/* Monster Community Auction — one stylesheet for every page.
   Palette and type are sampled from the printed poster; change them here. */
@import "shared.css";

:root {
  --paper:  #E4F2F9;   /* as light as the ground can be with white panels still showing */
  --navy:   #062D5F;
  --orange: #E0520A;   /* the poster's orange (#FE5C08), darkened to hold 3:1 on --paper */
  --blue:   #298CB1;
  --sky:    #6CC8F2;   /* the brush strokes, lightened for a wash */
  --sky-pale: #CBEAF8;
  --ink:    #3C3937;
  --white:  #FFFFFF;
  --stop:   #A2361C;   /* not accepted, no admittance */
  --mark:   #FFC6E0;   /* placeholder highlight — deliberately not a brand colour */
  /* The poster's sky: a brush wash from one corner, pale from the other, on
     a pale sky ground white panels stand out from. Every page, flyer and
     social image paints this. */
  --wash:
    radial-gradient(70% 45% at 105% -5%, var(--sky) 0%, transparent 70%),
    radial-gradient(60% 40% at -5% 105%, var(--sky-pale) 0%, transparent 70%),
    var(--paper);
  /* The prohibition sign, a circle with a line through it, in --stop: a data URI
     cannot read a custom property, so the colour is written in. */
  --no: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 36 36' fill='none' stroke='%23A2361C' stroke-width='4'%3E%3Ccircle cx='18' cy='18' r='15'/%3E%3Cpath d='M7.4 7.4l21.2 21.2'/%3E%3C/svg%3E");
  /* The same, in --orange: the on-the-day sun, and the tick in a form's box and the at-a-glance list. */
  --sun: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 36 36' fill='none' stroke='%23E0520A' stroke-width='3' stroke-linecap='round'%3E%3Ccircle cx='18' cy='18' r='7'/%3E%3Cpath d='M18 2v5M18 29v5M2 18h5M29 18h5M6.7 6.7l3.5 3.5M25.8 25.8l3.5 3.5M6.7 29.3l3.5-3.5M25.8 10.2l3.5-3.5'/%3E%3C/svg%3E");
  --tick: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 26 26' fill='none' stroke='%23E0520A' stroke-width='4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 13l6 7L24 2'/%3E%3C/svg%3E");
  /* The brush swoosh under AUCTION on the poster art, with the letters' sky depth. */
  --swoosh: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 404 60' preserveAspectRatio='none'%3E%3Cpath transform='translate(5 5)' fill='%236CC8F2' d='M6 52 C100 12 280 0 398 10 C290 16 110 28 14 58 C8 58 4 56 6 52 Z'/%3E%3Cpath fill='%23062D5F' d='M6 52 C100 12 280 0 398 10 C290 16 110 28 14 58 C8 58 4 56 6 52 Z'/%3E%3C/svg%3E");

  --display: "Londrina Solid", Impact, "Arial Narrow", sans-serif;
  --display-weight: 900; /* Londrina's one cut embedded in fonts.css */
  --display-tracking: .04em;
  /* The hand-lettered hook line ("Anyone can bring…"), on the site and every print piece. */
  --marker: "Permanent Marker", "Marker Felt", cursive;
  /* The event's name (.event-name, .event-title), with block-shadow depth. */
  --hero: "Bangers", var(--display);
  --body: system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;

  /* Text sizes by role, from the club's floors (shared.css): --fs-small,
     1rem, is the smallest, for captions and the footer. Headings and the
     hero title scale with the window, never below a floor. */
  --fs-text: calc(var(--fs-small) * 1.125);  /* running text, lists */
  --fs-lead: calc(var(--fs-small) * 1.3);    /* the intro line, the pitch, the timeline's lines */
  --fs-label: calc(var(--fs-small) * 1.6);   /* h3, the details and timeline labels in the display face */

  --measure: 62rem;
  --gap: 1.25rem;
}

* { box-sizing: border-box; }

html { color-scheme: light; }

body {
  margin: 0;
  font-family: var(--body);
  font-size: var(--fs-text);
  line-height: 1.55;
  color: var(--ink);
  background: var(--wash);
  background-attachment: fixed;
  min-height: 100vh;
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
}

a { color: var(--navy); }
a:hover { color: var(--orange); }

h1, h2, h3 {
  font-family: var(--display);
  font-weight: var(--display-weight);
  line-height: 1.05;
  color: var(--navy);
  margin: 0 0 .5em;
  letter-spacing: var(--display-tracking);
}
h1 { font-size: clamp(calc(var(--fs-small) * 3.1), 10vw, calc(var(--fs-small) * 5)); }
h2 { font-size: clamp(calc(var(--fs-small) * 2.4), 7vw, calc(var(--fs-small) * 3.25)); color: var(--orange); }
h3 { font-size: var(--fs-label); }

.wrap { max-width: var(--measure); margin: 0 auto; padding: 0 var(--gap); }

main { flex: 1 0 auto; }

/* Header */
.site-header {
  border-bottom: .25rem solid var(--navy);
  background: var(--white);
}
.site-header .wrap {
  display: flex; flex-wrap: wrap; align-items: center;
  justify-content: space-between; gap: .75rem var(--gap);
}
/* The header's geometry matches the club website's (rotary/website,
   site/styles.css), so the logo and menu stay put moving between the two; a
   change to one is made to both. The club logo, from Rotary's Brand Center:
   Rotary requires clear space the height of its capital R (102 of the 286 px)
   around it, 1.6rem at 4.5rem tall. It links to the club website. */
.brand { display: block; padding-block: 1.6rem; }
.brand img { display: block; width: auto; height: 4.5rem; }
.site-nav { display: flex; flex-wrap: wrap; gap: .25rem 1rem; margin: 0; padding: 0; list-style: none; }
.site-nav a { font-weight: 700; text-decoration: none; padding: .25rem 0; border-bottom: .2rem solid transparent; }
.site-nav a[aria-current="page"] { border-bottom-color: var(--orange); }
/* Phones: logo and menu stacked and centred, the menu spread across the width
   with 44px tap targets. */
@media (max-width: 36rem) {
  .site-header .wrap { flex-direction: column; gap: 0; }
  .brand { padding-block: 1.6rem 1.05rem; }
  .brand img { height: 5rem; }
  nav[aria-label="Site"] { align-self: stretch; padding-bottom: .5rem; }
  .site-nav { justify-content: space-evenly; gap: 0 1rem; font-size: calc(var(--fs-small) * 1.2); }
  .site-nav a { display: block; padding: .55rem 0; }
}

/* Hero (home) */
.hero { padding: 3rem 0 2rem; }
.hero .wrap {
  display: grid; grid-template-columns: 1.15fr .85fr; gap: 2rem; align-items: center;
}
/* The event's name, wherever it is written: the cartoon face, 'Monster' in
   orange and the rest navy, with block depth on screen and in print
   (print/flyer.css). .event-name is the one-line form; .event-title the
   hero block. Markup: <span class="monster">Monster</span> Community Auction. */
.event-title, .event-name { font-family: var(--hero); font-weight: 400; letter-spacing: .02em; color: var(--navy);
  text-shadow: .025em .025em 0 var(--sky), .05em .05em 0 var(--sky); }
.event-title .monster, .event-name .monster { color: var(--orange);
  text-shadow: .025em .025em 0 var(--navy), .05em .05em 0 var(--navy), .075em .075em 0 var(--navy); }
.event-name { white-space: nowrap; }
/* The hero block: like the poster's lettering, each word is sized to fill
   the block's full width: the cqi sizes are 97 / (the word's width in
   Bangers at 1em). */
/* The whole block rises to the right, as the poster art's lettering does. */
.event-title { container-type: inline-size; line-height: .95; transform: rotate(-4deg); }
.event-title span { display: block; white-space: nowrap; }
.event-title .monster { font-size: max(var(--fs-small), 29.55cqi); }
.event-title .community { font-size: max(var(--fs-small), 23.54cqi); }
.event-title .auction { font-size: max(var(--fs-small), 33.41cqi); }
.event-title .auction::after {
  content: ""; display: block; height: .34em; margin: -.12em 0 0 .02em;
  background: var(--swoosh) no-repeat center / 100% 100%;
}
/* Body face: the brush face is kept for the h1 directly above. The flyers
   quote this line into their own display-face blocks, so no face is set here. */
.when-where {
  font-size: clamp(calc(var(--fs-small) * 1.3), 3vw, calc(var(--fs-small) * 1.75)); line-height: 1.3;
  color: var(--navy); margin: .75rem 0 1rem;
}
/* The lettered date, as the poster art letters it: the display face, the day
   of the month big in orange with the event title's block depth, the month
   navy beside it, weekday and year stacked on the left. The hero's line
   carries .lettered, and the monster social images quote the line whole, so
   both letter it from these rules; each sets its own sizes. */
.when-where.lettered {
  font-family: var(--display); font-weight: var(--display-weight); letter-spacing: var(--display-tracking);
  text-transform: uppercase; line-height: 1;
}
.lettered br { display: none; }
.lettered .when { display: grid; grid-template-columns: auto auto 1fr; align-items: end; column-gap: .15em; }
.lettered .weekday, .lettered .year { grid-column: 1; font-size: max(var(--fs-small), .45em); color: var(--ink); }
.lettered .weekday { grid-row: 1; align-self: end; }
.lettered .year { grid-row: 2; align-self: start; margin-top: .15em; }
.lettered .day {
  grid-column: 2; grid-row: 1 / span 2; font-size: 2em; line-height: .85; color: var(--orange);
  text-shadow: .025em .025em 0 var(--navy), .05em .05em 0 var(--navy);
}
.lettered .month { grid-column: 3; grid-row: 1 / span 2; align-self: center; color: var(--navy);
  text-shadow: .03em .03em 0 var(--sky), .06em .06em 0 var(--sky); }
.lettered .where { display: block; color: var(--navy); }
.hero .when-where { margin: 1.5rem 0 1.25rem; }
.hero .when { font-size: clamp(calc(var(--fs-small) * 2.4), 6vw, calc(var(--fs-small) * 3.6)); }
.hero .where { margin-top: .6rem; font-size: clamp(calc(var(--fs-small) * 1.4), 3.2vw, calc(var(--fs-small) * 1.9)); }
/* The times and the price at a glance, a ticked list; every flyer quotes it.
   The tick is sized in em, so a page sets only the font size. */
ul.glance { list-style: none; padding: 0; margin: 0 0 1.25rem; display: flex; flex-wrap: wrap; gap: .35rem 1.5rem; line-height: 1.3; }
.hero ul.glance { flex-direction: column; }
ul.glance li {
  margin: 0; padding-left: 1.5em;
  background: var(--tick) no-repeat 0 .15em / 1em 1em; color: var(--navy); font-weight: 700;
}
.lead { font-size: var(--fs-lead); max-width: 34rem; }
.hero figure { margin: 0; text-align: center; }
/* Behind the tilted poster, which hides his paw and the flat line. */
.hero .mascot { --w: min(15rem, 58%); margin-right: 8%; margin-bottom: calc(-.4 * var(--w)); z-index: auto; }
.hero .poster { display: block; }
.hero .poster img {
  width: 100%; max-width: 26rem; height: auto;
  border: .35rem solid var(--white); box-shadow: 0 .75rem 2rem rgba(6,45,95,.25);
  transform: rotate(2deg);
}
.hero figcaption { margin-top: .75rem; font-size: var(--fs-small); }

/* Buttons and cards */
/* A pair of buttons shares the text column's width. */
.buttons { display: grid; grid-template-columns: 1fr 1fr; gap: 2rem; max-width: 34rem; margin: 1.75rem 0 0; }
/* A plain button on ::before; hover and focus fade in its monster fur on
   ::after, from site/fur.css. The fur stands out from the button by its
   reach, --r, and is stencilled from a strip of tufts for each side and a
   fan for each corner round a solid core; the marks sit just inside the
   core's edge. The label is in the hero face at large-text size, which
   white on --orange needs to reach 3:1. */
.button {
  position: relative; isolation: isolate;
  display: flex; align-items: center; justify-content: center; min-height: 4.5rem; padding: .9rem 1.2rem;
  font-family: var(--hero); font-size: calc(var(--fs-small) * 1.75); line-height: 1.1; letter-spacing: .03em; text-align: center;
  color: var(--white); text-decoration: none;
  --fill: var(--orange);
}
.button.secondary { --fill: var(--navy); }
.button::before, .button::after { content: ""; position: absolute; z-index: -1; }
.button::before { inset: 0; border-radius: .6rem; background: var(--fill); }
.button::after {
  inset: calc(-1 * var(--r));
  --side: calc(100% - 2 * var(--r));
  background:
    var(--marks-top) no-repeat center top calc(var(--r) + 1px) / calc(var(--side) - 12px) 12px,
    var(--marks-bottom) no-repeat center bottom calc(var(--r) + 1px) / calc(var(--side) - 12px) 12px,
    var(--marks-left) no-repeat left calc(var(--r) + 1px) center / 12px calc(var(--side) - 12px),
    var(--marks-right) no-repeat right calc(var(--r) + 1px) center / 12px calc(var(--side) - 12px),
    var(--fill);
  mask:
    var(--fur-top) no-repeat center top / var(--side) var(--r),
    var(--fur-bottom) no-repeat center bottom / var(--side) var(--r),
    var(--fur-left) no-repeat left center / var(--r) var(--side),
    var(--fur-right) no-repeat right center / var(--r) var(--side),
    var(--fur-top-left) no-repeat left top / calc(2 * var(--r)) calc(2 * var(--r)),
    var(--fur-top-right) no-repeat right top / calc(2 * var(--r)) calc(2 * var(--r)),
    var(--fur-bottom-left) no-repeat left bottom / calc(2 * var(--r)) calc(2 * var(--r)),
    var(--fur-bottom-right) no-repeat right bottom / calc(2 * var(--r)) calc(2 * var(--r)),
    linear-gradient(#000 0 0) no-repeat center / calc(var(--side) + 2px) calc(var(--side) + 2px);
}
.button::after { opacity: 0; transition: opacity .25s ease-out; }
.button:hover, .button:focus-visible { color: var(--white); }
.button:hover::after, .button:focus-visible::after { opacity: 1; }
.button:focus-visible { outline: 3px solid var(--navy); outline-offset: .6rem; }
@media (prefers-reduced-motion: reduce) { .button::after { transition: none; } }

.cards { display: grid; grid-template-columns: 1fr 1fr; gap: var(--gap); margin: 1.5rem 0; }
.card {
  background: var(--white); border-top: .4rem solid var(--blue);
  padding: 1.25rem 1.5rem 1.5rem; box-shadow: 0 .25rem 1rem rgba(6,45,95,.08);
}
.card.sell { border-top-color: var(--orange); }
.card p:last-child { margin-bottom: 0; }

/* Details list (when / where / on the day / cost / pay). Pairs either side of
   On the day, the tall box: it takes a full row at two columns (its icon list
   in two columns), and the right-hand column over both rows at three. */
.details { display: grid; grid-template-columns: 1fr; gap: var(--gap); margin: 0; }
@media (min-width: 36rem) {
  .details { grid-template-columns: 1fr 1fr; }
  .details #on-the-day { grid-column: 1 / -1; }
  .page .details #on-the-day ul.on-the-day { grid-template-columns: 1fr 1fr; column-gap: var(--gap); }
  .page .details #on-the-day .vehicles { grid-column: 1 / -1; }
}
@media (min-width: 56rem) {
  .details { grid-template-columns: 1fr 1fr 1.15fr; }
  .details #on-the-day { grid-column: 3; grid-row: 1 / span 2; }
  /* The column is as tall as the two rows beside it: the facts share that height
     as ruled rows with larger marks, rather than bunching at the top. */
  .details #on-the-day { display: flex; flex-direction: column; }
  .details #on-the-day dd { flex: 1; display: flex; flex-direction: column; }
  .page .details #on-the-day ul.on-the-day {
    flex: 1; display: flex; flex-direction: column; justify-content: space-around; gap: 0; margin-top: .75rem;
  }
  .page .details #on-the-day ul.on-the-day li {
    padding: .85rem 0 .85rem 3.5rem; min-height: 4.25rem;
    background-size: 2.6rem 2.6rem; border-top: 2px solid var(--sky-pale);
  }
  .page .details #on-the-day ul.on-the-day li:last-child { border-bottom: 2px solid var(--sky-pale); }
}
.details div { background: var(--white); padding: 1rem 1.25rem; border-left: .35rem solid var(--sky); }
.details dt { font-family: var(--display); letter-spacing: var(--display-tracking); color: var(--navy); font-size: var(--fs-label); line-height: 1.2; }
.details dd { margin: .25rem 0 0; }

/* Content pages */
.page { padding: 2.5rem 0 3rem; }
.page .wrap > * { max-width: 44rem; }
/* …but a grid is not prose: cards and photos use the full wrap. */
.page .wrap > .details,
.page .wrap > .cards,
.page .wrap > .range { max-width: none; }
/* A page that is nothing but prose (sell, buy, terms, 404 — every <main class="page">;
   the home page is a <main> of sections) narrows the wrap itself to the reading
   measure, so the column is centred in the window and the text is flush left
   inside it. Clamping the children instead stranded them against a wide gutter. */
main.page > .wrap { max-width: 46.5rem; }
/* A section or part heading opens with a clear gap above it, and a jump to
   any id lands with room above rather than flush against the window. */
.page .wrap > section, .page .wrap > h2 { margin-top: clamp(3rem, 9vw, 4.5rem); }
.page .wrap > :first-child, .page .wrap > h1 + section { margin-top: 0; }
.page section > h3 { margin-top: 2.25rem; }
[id] { scroll-margin-top: 2.5rem; }
/* A callout is a box, like a card: it fills its container rather than sitting
   short under a full-width grid. */
.page .wrap > .callout { max-width: none; }

.page ol, .page ul { padding-left: 1.4rem; }
.page li { margin: .35rem 0; }
.steps { counter-reset: step; list-style: none; padding: 0; }
.steps li {
  counter-increment: step; position: relative; padding-left: 3rem; margin: 1rem 0;
}
.steps li::before {
  content: counter(step); position: absolute; left: 0; top: 0;
  width: 2.4rem; height: 2.4rem; border-radius: 50%;
  background: var(--navy); color: var(--white);
  font-family: var(--display); letter-spacing: var(--display-tracking); font-size: var(--fs-label); line-height: 2.4rem; text-align: center;
}
/* The day's times: a timeline, each time on the rail. */
.page ol.day { list-style: none; padding: 0; margin: 1rem 0; border-left: .25rem solid var(--sky); }
.page ol.day li { position: relative; padding-left: 1.5rem; margin: 1.25rem 0; font-size: var(--fs-lead); line-height: 1.45; }
.page ol.day li::before {
  content: ""; position: absolute; left: -.6rem; top: .5rem;
  width: .95rem; height: .95rem; border-radius: 50%; background: var(--navy);
}
.day .time { display: block; font-family: var(--display); letter-spacing: var(--display-tracking); font-weight: var(--display-weight); color: var(--navy); font-size: var(--fs-label); line-height: 1.2; margin-bottom: .2rem; }
/* Arriving from the home page's "How selling works" or "How buying works"
   (how.html#as-seller, #as-buyer), a reader starts at the top of the page:
   the day marks their part of it with a panel and a label, and their steps
   button below wears the fur. */
.page:has(#as-seller:target) ol.day li.for-sellers,
.page:has(#as-buyer:target) ol.day li.for-buyers {
  background: var(--white); margin-left: .6rem; padding: .6rem 1rem .7rem 1.5rem;
  border-radius: 0 .5rem .5rem 0; box-shadow: 0 .25rem 1rem rgba(6,45,95,.08);
}
.page:has(#as-seller:target) ol.day li.for-sellers::before,
.page:has(#as-buyer:target) ol.day li.for-buyers::before { left: -1.2rem; top: 1.1rem; background: var(--orange); }
.page:has(#as-seller:target) ol.day li.for-sellers .time::after,
.page:has(#as-buyer:target) ol.day li.for-buyers .time::after {
  display: inline-block; margin-left: .6rem; padding: .1rem .5rem; border-radius: .3rem; vertical-align: .2em;
  background: var(--sky-pale); color: var(--navy);
  font-family: var(--body); font-size: var(--fs-small); font-weight: 700; letter-spacing: 0;
}
.page:has(#as-seller:target) ol.day li.for-sellers .time::after { content: "Sellers"; }
.page:has(#as-buyer:target) ol.day li.for-buyers .time::after { content: "Buyers"; }
.page .to-steps { margin: 2rem 0 3rem; }
.page:has(#as-seller:target) .to-steps .button:not(.secondary)::after,
.page:has(#as-buyer:target) .to-steps .button.secondary::after { opacity: 1; }

/* Items not accepted: plain text behind a prohibition sign. Not a bordered pill,
   which reads as a button. The flyers use these rules too. */
.page ul.not-accepted, ul.not-accepted {
  list-style: none; padding: 0; margin: .5rem 0;
  display: grid; grid-template-columns: repeat(auto-fill, minmax(14rem, 1fr)); gap: .4rem 1.5rem;
}
.page ul.not-accepted li, ul.not-accepted li {
  position: relative; margin: 0; padding-left: 1.7em; color: var(--ink); font-weight: 600; line-height: 1.3;
}
ul.not-accepted li::before {
  content: ""; position: absolute; left: 0; top: .02em; width: 1.25em; height: 1.25em;
  background: var(--no) no-repeat center / contain;
}
/* The long safety-standard item spans the row rather than making one tall cell. */
ul.not-accepted li.wide { grid-column: 1 / -1; }

/* On the day: each fact beside its own mark. The flyers use these rules too. */
.page ul.on-the-day, ul.on-the-day {
  list-style: none; padding: .75rem 1rem; margin: 1rem 0; background: var(--white);
  display: grid; grid-template-columns: repeat(auto-fill, minmax(13rem, 1fr)); gap: .75rem 1.25rem;
}
.page ul.on-the-day li, ul.on-the-day li {
  margin: 0; padding-left: 2.6rem; min-height: 2.1rem; display: flex; align-items: center;
  font-weight: 600; color: var(--navy); line-height: 1.25;
  background-repeat: no-repeat; background-position: left center; background-size: 2.1rem 2.1rem;
}
.page ul.on-the-day li::before { content: none; }
.on-the-day .outdoor { background-image: var(--sun); }
.on-the-day .food { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 36 36' fill='none' stroke='%23062D5F' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 15h20v6a9 9 0 0 1-9 9h-2a9 9 0 0 1-9-9z'/%3E%3Cpath d='M26 17h2a4 4 0 0 1 0 8h-2'/%3E%3Cpath d='M12 4c-2 2 2 4 0 7M18 4c-2 2 2 4 0 7'/%3E%3C/svg%3E"); }
.on-the-day .dogs { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 36 36'%3E%3Cg fill='%23062D5F'%3E%3Cellipse cx='18' cy='23' rx='7' ry='6'/%3E%3Ccircle cx='9' cy='14' r='3'/%3E%3Ccircle cx='14.5' cy='9' r='3'/%3E%3Ccircle cx='21.5' cy='9' r='3'/%3E%3Ccircle cx='27' cy='14' r='3'/%3E%3C/g%3E%3Cg fill='none' stroke='%23A2361C' stroke-width='3'%3E%3Ccircle cx='18' cy='18' r='16'/%3E%3Cpath d='M6.7 6.7l22.6 22.6'/%3E%3C/g%3E%3C/svg%3E"); }
.on-the-day .ovals { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 36 36' fill='none'%3E%3Cellipse cx='18' cy='18' rx='9' ry='12' stroke='%23062D5F' stroke-width='3'/%3E%3Cg stroke='%23A2361C' stroke-width='3'%3E%3Ccircle cx='18' cy='18' r='16'/%3E%3Cpath d='M6.7 6.7l22.6 22.6'/%3E%3C/g%3E%3C/svg%3E"); }
.on-the-day .vehicles { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 36 36' fill='none'%3E%3Cpath d='M8.5 21l2.5-6h14l2.5 6v4h-19z' stroke='%23062D5F' stroke-width='2.5' stroke-linejoin='round'/%3E%3Cg fill='%23062D5F'%3E%3Ccircle cx='12.5' cy='25.5' r='2.3'/%3E%3Ccircle cx='23.5' cy='25.5' r='2.3'/%3E%3C/g%3E%3Cg stroke='%23A2361C' stroke-width='3'%3E%3Ccircle cx='18' cy='18' r='16'/%3E%3Cpath d='M6.7 6.7l22.6 22.6'/%3E%3C/g%3E%3C/svg%3E"); }
.electrical {
  background: var(--white); border-left: .4rem solid var(--stop); padding: .75rem 1rem;
}

.callout {
  background: var(--white); border-left: .4rem solid var(--orange);
  padding: 1rem 1.25rem; margin: 1.5rem 0;
}
.terms h2 { color: var(--navy); }
.terms ol li { margin: .75rem 0; }

/* Placeholder for a value the board has not decided.
   Always visible, never hidden: an undecided number must not pass for a decision. */
.fillin {
  background: var(--mark); color: var(--ink);
  padding: 0 .3em; border-radius: .2em;
  outline: .12rem dashed var(--orange); outline-offset: .05rem;
}


/* The one-line pitch under the masthead, hand-lettered as on the print pieces.
   Orange passes contrast only as large text, so it stays at 24px or more. */
.shout {
  font-family: var(--marker); font-weight: 400; color: var(--orange);
  font-size: calc(var(--fs-small) * 1.6); line-height: 1.2;
  margin: 1rem 0 .5rem; max-width: 34rem;
}
.shout a { font-size: max(var(--fs-small), .7em); vertical-align: super; text-decoration: none; color: inherit; }
.shout a:hover { color: var(--navy); }

/* Arrow points. A real list — the ► is a marker, not typed into the content. */
.page ul.tight {
  list-style: none; padding-left: 1.5rem; margin: .75rem 0;
}
.page ul.tight li { position: relative; margin: .35rem 0; }
.page ul.tight li::before {
  content: "\25BA"; position: absolute; left: -1.2rem; top: .15em;
  color: var(--orange); font-size: .75em; /* glyph */
}
.page .card ul.tight { margin: .5rem 0 .75rem; }
.page .details ul.tight { margin: .35rem 0 0; }
/* Inside a details box the icon list is already on white: one column, no box of its own. */
.page .details ul.on-the-day { padding: 0; margin: .5rem 0 0; grid-template-columns: 1fr; gap: .5rem; }

/* "What sells" gallery (home). Wider than the 44rem text measure so the tiles
   stay big enough to read; the selectors carry .page because the section sits
   inside .page .wrap, whose list and measure rules would otherwise win.
   --cols tiles to a row, two even on a phone so the photos are a short
   block rather than a long scroll; a short last row sits centred. */
.page ul.range-grid {
  --cols: 2; --tile-gap: .75rem;
  display: flex; flex-wrap: wrap; justify-content: center;
  gap: var(--tile-gap);
  list-style: none;
  margin: 1.25rem 0 .75rem;
  padding: 0;
}
@media (min-width: 36rem) { .page ul.range-grid { --cols: 3; } }
@media (min-width: 56rem) { .page ul.range-grid { --cols: 4; } }
.page .range-grid li {
  margin: 0;
  width: calc((100% - (var(--cols) - 1) * var(--tile-gap)) / var(--cols));
}
.range-grid img {
  display: block; width: 100%; height: auto;
  border: .3rem solid var(--white);
  box-shadow: 0 .25rem .9rem rgba(6,45,95,.15);
}

/* The monster cut from the poster art (tools/monster.sh), --w wide, leans
   on whatever follows him: the cut-out's body ends flat .21 of its width
   above its foot, and the paw below that hangs over the next box's top. */
.mascot {
  --w: 8rem; display: block; width: var(--w); height: auto;
  margin: 0 0 calc(-.21 * var(--w)) auto;
  position: relative; z-index: 1;
}
.mascot + *, .sign-off + * { position: relative; }
.sign-off + .site-footer { margin-top: 0; }
.lost { --w: min(16rem, 60%); margin-right: auto; }

/* Footer */
.site-footer {
  margin-top: 3rem; padding: 1.5rem 0 2rem;
  background: var(--navy); color: var(--paper); font-size: var(--fs-small);
}
.site-footer a { color: var(--paper); }
.site-footer p { margin: .25rem 0; }
.site-footer p:has(.social) { margin-top: .75rem; }

/* A link to a social page, led by that platform's own logo (images/facebook.svg is
   Meta's "f" logo, unaltered: #0866ff with the f in white). The same file and
   rules as the club website's. */
.social { display: inline-flex; align-items: center; gap: .5rem; }
.social img { flex: none; width: 1.5rem; height: 1.5rem; }
.hero .follow { margin: 1.75rem 0 0; font-weight: 700; }

@media (max-width: 44rem) {
  .hero .wrap { grid-template-columns: 1fr; }
  .hero img { transform: none; }
  .cards { grid-template-columns: 1fr; }
  .buttons { grid-template-columns: 1fr; }
}

@page { size: A4; margin: 15mm; }

@media print {
  body { background: var(--white); }
  .site-nav, .button, .range { display: none; }
  .fillin { outline: .12rem solid var(--ink); background: none; }
}