/*
  Scuttle. Implements DESIGN.md.

  A sticker book you fill by walking. The grammar is hand-cut collage: flat colour stickers
  with 1px black outlines, pinned to pale paper, with display type crushed until the words
  behave like physical objects.

  DELIBERATELY NOT A COPY of the reference world that inspired it. We keep the grammar,
  the boldness and the proportions, and differ on every specific:

    - Ground:  pale MOSS, not pale blue. The reference's signature is an electric blue on a
               blue wash; ours is a walked-in green on paper, which is also the right
               register for a product about British footpaths.
    - Motif:   STAMPS and a dashed TRAIL line, not 3D inflatable ribbons. Ours is the thing
               the product actually produces, so it earns its place twice.
    - Face:    Anton, not Lateral.
    - Layout:  left-aligned and asymmetric, not centred posters.

  Seven rules, and these are the ones most likely to be undone by accident:

    1. Grounds alternate moss wash -> white -> stone. NEVER cream. A warm off-white ground
       is the most recognisable default of generated design and it made this a template.
    2. Every sticker, card, button and pill carries a 1px #000000 outline. The hand-cut
       outline is the visual language, not a fallback. 1px, not 2px.
    3. Nothing below 16px radius. Cards 20px, elevated 40px, all controls fully pill.
    4. No single accent. The six sticker colours are a shared set; use several per screen.
    5. Blue is DECORATIVE. Never a CTA fill, never a link colour. Actions are black-filled
       or black-outlined, and nothing else. Green is decorative too, never a success state.
    6. A statement block holds ONE statement. No small uppercase kicker above a heading above
       a paragraph: that stack is the house style of generated design. Three registers means
       three blocks, or it means prose.
    7. No gradients. No shadows. Depth is a colour band, an outline, or overlap.
*/

@import url("https://fonts.googleapis.com/css2?family=Anton&family=Schibsted+Grotesk:wght@400;500;700;900&display=swap");

:root {
  /*
    Sticker palette. Six colours, no hierarchy between them.
    Deliberately our own: a walked-in green leads instead of an electric blue, the wash is
    moss rather than sky, and the neutral interlude is a cool stone rather than a flat grey.
  */
  --carbon: #0b0b0d;
  --paper: #ffffff;
  --moss-wash: #e7f6d8;   /* hero ground: pale moss paper */
  --stone: #d4d7d0;       /* neutral interlude band */
  --mist: #eceee9;
  --grass: #2fbf6b;       /* the signature */
  --lake: #3d8bff;
  --heath: #7b5bd6;
  --flare: #ff5a26;
  --buttercup: #ffc933;
  --slate: #56594f;

  /* Pale heather, the one tint in the set. Used for sticker fills, never for text. */
  --heather-pale: #ded2fa;

  /*
    One mapping table, and the only place a colour is named twice. Every template and rule
    written against the older vocabulary resolves through here, so re-pointing the palette
    is this block and nothing else.
  */
  --ink: var(--carbon);
  --chalk: var(--paper);
  --sky-wash: var(--moss-wash);
  --concrete: var(--stone);
  --blue: var(--lake);
  --sky: var(--lake);
  --mint: var(--grass);
  --moss: var(--grass);
  --lavender: var(--heather-pale);
  --heather: var(--heather-pale);
  --violet: var(--heath);
  --grape: var(--heath);
  --ember: var(--flare);
  --clay: var(--flare);
  --sun: var(--buttercup);

  --hair: 4px;
  --tight: 8px;
  --snug: 12px;
  --base: 16px;
  --loose: 24px;
  --wide: 40px;
  --section: 48px;
  --band: 128px;

  --tile: 16px;
  --card: 20px;
  --big: 40px;
  --pill: 1600px;

  /* 1px. The hand-cut outline. */
  --line: 1px solid var(--carbon);

  --shell: 1440px;
  --row-card-min: 300px;
  --display: Anton, "Arial Narrow", Haettenschweiler, sans-serif;
  --sans: "Schibsted Grotesk", -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--paper);
  color: var(--carbon);
  font-family: var(--sans);
  font-size: 16px;
  font-weight: 500;
  line-height: 1.45;
  letter-spacing: -0.01em;
  -webkit-font-smoothing: antialiased;
}

/* ---------- type ---------- */

/*
  Anton is a single condensed black weight, so this register never varies by weight, only
  by size. Two corrections it needs, both learned by looking rather than by reasoning:

  TRACKING is positive. Display type conventionally wants negative tracking, and the first
  version applied it here out of habit. Anton's sidebearings are already near zero, so any
  negative value welds the letters into a solid slab with no counters. It needs air PUT BACK,
  not taken out.

  LEADING is 0.92, not the reference's 0.78. This is the tightest value at which Anton's
  pointed capitals clear when stacked; lower values merge apexes such as V over A.
*/
.display, h1, .title, h2, .figure, .plan-price, .metric,
.marker-name, .code-display, .wordmark, .statement > * {
  letter-spacing: 0.012em;
}

.display {
  font-family: var(--display);
  font-weight: 400;
  font-size: clamp(64px, 12vw, 190px);
  line-height: 0.92;
  margin: 0;
  text-transform: uppercase;
}
/* Full-bleed poster type, for a block that owns its whole band. */
.display-xl { font-size: clamp(64px, 13vw, 220px); }
.display-sm { font-size: clamp(44px, 6vw, 96px); }

h1, .title {
  font-family: var(--display);
  font-weight: 400;
  font-size: clamp(44px, 6.5vw, 108px);
  line-height: 0.88;
  margin: 0;
  text-transform: uppercase;
}

h2 {
  font-family: var(--display);
  font-weight: 400;
  font-size: clamp(40px, 5.5vw, 92px);
  line-height: 0.88;
  margin: 0 0 var(--wide);
  text-transform: uppercase;
}

/* The supporting line under a display block. Big enough to read, never competing. */
.tagline {
  font-size: clamp(20px, 2.2vw, 30px);
  font-weight: 500;
  line-height: 1.25;
  letter-spacing: -0.01em;
  margin: 0;
  max-width: 30ch;
}

p { margin: 0 0 var(--base); max-width: 62ch; }
.lede { font-size: clamp(18px, 1.9vw, 24px); line-height: 1.35; }
.muted { color: var(--slate); }
.caption { font-size: 13px; line-height: 1.5; color: var(--slate); }
.band-ink .caption, .band-ink .muted { color: rgba(255,255,255,0.72); }
.card-violet .caption, .card-ember .caption, .card-clay .caption,
.card-blue .caption, .card-sky .caption, .card-sun .caption,
.card-mint .caption, .card-moss .caption, .card-lavender .caption,
.card-heather .caption { color: inherit; }

/* Uppercase labels get their tracking opened, per the reference. */
.label {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.032em;
  text-transform: uppercase;
}

.figure { font-family: var(--display); font-size: 56px; line-height: 1; font-variant-numeric: tabular-nums; }

/* ---------- bands and shell ---------- */

.shell { max-width: var(--shell); margin: 0 auto; padding-inline: var(--wide); }
/* padding-block only: a shorthand here wipes the shell gutter when both classes share an
   element, which flattened every page in a previous system. */
.band { padding-block: var(--band); }

/* Sections are defined purely by colour band. No borders, no shadows, no dividers. */
.band-paper, .band-chalk { background: var(--paper); }
.band-wash { background: var(--sky-wash); }
.band-concrete { background: var(--concrete); }
.band-sky { background: var(--blue); }
.band-sun { background: var(--sun); }
.band-moss, .band-mint { background: var(--mint); }
.band-ink { background: var(--carbon); color: var(--paper); }

/* ---------- controls: black-filled or black-outlined, never coloured ---------- */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--tight);
  min-height: 52px;
  padding: 14px 26px;
  border: var(--line);
  border-radius: var(--pill);
  font-family: var(--sans);
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 0.032em;
  text-transform: uppercase;
  text-decoration: none;
  cursor: pointer;
  transition: transform 0.12s ease, background-color 0.12s ease, color 0.12s ease;
}
.btn:hover { transform: translateY(-2px); }
.btn:active { transform: translateY(0); }

.btn-primary { background: var(--carbon); color: var(--paper); }
.btn-ghost { background: var(--paper); color: var(--carbon); }
.btn-ghost:hover { background: var(--carbon); color: var(--paper); }
/* Retained for templates that name them; both resolve to the two legitimate treatments,
   because a coloured CTA breaks rule 5. */
.btn-sun, .btn-moss, .btn-clay { background: var(--carbon); color: var(--paper); }
.btn-danger { background: var(--paper); color: var(--ember); border-color: var(--ember); }
.btn:disabled, .btn[aria-disabled="true"] { opacity: 0.4; pointer-events: none; transform: none; }

/* On black the outline cannot be seen, so the fill carries the shape. */
.band-ink .btn { border-color: var(--paper); }
.band-ink .btn-primary { background: var(--paper); color: var(--carbon); }
.band-ink .btn-ghost { background: transparent; color: var(--paper); }
.band-ink .btn-ghost:hover { background: var(--paper); color: var(--carbon); }

.nav-pill {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: 0 var(--base);
  background: var(--paper);
  color: var(--carbon);
  border: var(--line);
  border-radius: var(--pill);
  /* Sign out is a button inside a form, and a button does not inherit the page face. */
  font-family: var(--sans);
  cursor: pointer;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.032em;
  text-transform: uppercase;
  text-decoration: none;
  white-space: nowrap;
}
.nav-pill:hover { background: var(--carbon); color: var(--paper); }
.nav-pill-solid { background: var(--carbon); color: var(--paper); }
.nav-pill-solid:hover { background: var(--violet); border-color: var(--violet); }

/* ---------- stickers: cards, outlined and filled ---------- */

/*
  Two block types on this site, and they are never mixed in one row:
    .card       prose. A strong opening line and one paragraph. Body register only.
    .statement  one statement in the display register, and nothing else.

  Both stretch to the tallest in their row. Ragged card bottoms were most of what read as
  "inconsistent": a grid of outlined blocks makes every height difference a visible defect
  in a way a borderless layout does not.
*/
.card {
  display: flex;
  flex-direction: column;
  background: var(--paper);
  border: var(--line);
  border-radius: var(--card);
  padding: var(--loose);
}
.card > :last-child { margin-bottom: 0; }
.card-big { border-radius: var(--big); padding: var(--wide); }
.card-blue, .card-sky { background: var(--blue); }
.card-mint, .card-moss { background: var(--mint); }
.card-lavender, .card-heather { background: var(--lavender); }
.card-violet { background: var(--violet); color: var(--paper); }
.card-sun { background: var(--sun); }
.card-ember, .card-clay { background: var(--ember); color: var(--carbon); }

/*
  The statement sticker. One statement, nothing else, and it is allowed to be enormous.
  A previous version put a kicker, a heading and a paragraph in a 260px box, which is how a
  bold palette still ends up looking like a settings panel.
*/
.statements {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(var(--row-card-min), 1fr));
  grid-template-rows: auto auto;
  gap: var(--loose);
}
.statement {
  position: relative;
  display: flex;
  align-items: flex-end;
  min-height: 440px;
  padding: var(--wide);
  border: var(--line);
  border-radius: var(--big);
  overflow: hidden;
}
.statement > * {
  font-family: var(--display);
  font-weight: 400;
  font-size: clamp(40px, 4.6vw, 68px);
  line-height: 0.88;
  text-transform: uppercase;
  margin: 0;
  max-width: none;
}

.grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(var(--row-card-min), 1fr)); gap: var(--loose); align-items: stretch; }

/* A pricing row is three cards whose buttons must line up regardless of list length. */
.plan-cta { margin-top: auto; padding-top: var(--loose); width: 100%; }

/* ---------- fields ---------- */

label.label { display: block; margin-bottom: var(--tight); }

input[type="text"], input[type="email"], input[type="password"],
input[type="number"], input[type="date"], select, textarea {
  width: 100%;
  min-height: 56px;
  padding: var(--base) var(--loose);
  background: var(--paper);
  color: var(--carbon);
  border: var(--line);
  border-radius: var(--pill);
  font: inherit;
  font-size: 16px;
}
textarea { border-radius: var(--card); }
input::placeholder { color: var(--slate); }
input:focus-visible, select:focus-visible, textarea:focus-visible {
  outline: 3px solid var(--violet);
  outline-offset: 2px;
}
.form-row + .form-row { margin-top: var(--loose); }
.errorlist { list-style: none; margin: var(--tight) 0 0; padding: 0; color: var(--ember); font-size: 14px; font-weight: 700; }
/* A whole-form error sits above the first field, so it needs the gap under it that a
   field-level error gets from the row below. */
.errorlist.nonfield { margin: 0 0 var(--base); }
.helptext { display: block; margin-top: var(--tight); color: var(--slate); font-size: 14px; }

/* An email capture that reads as one object rather than a field beside a button. */
.capture { max-width: 620px; }
.capture-row { display: flex; gap: var(--snug); flex-wrap: wrap; }
.capture-row input { flex: 1 1 260px; min-width: 0; }
.capture-row .btn { flex: none; }

/* Segmented choice, built from the same outlined pill as everything else. */
.choice { display: flex; gap: var(--tight); border: 0; padding: 0; margin: 0 0 var(--snug); flex-wrap: wrap; }
.choice legend { float: left; width: 100%; padding: 0; margin-bottom: var(--tight); }
.choice-pill { position: relative; display: inline-flex; }
.choice-pill input {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  min-height: 0;
  margin: 0;
  padding: 0;
  border: 0;
  opacity: 0;
  cursor: pointer;
}
.choice-pill span {
  display: inline-flex;
  align-items: center;
  min-height: 46px;
  padding: 0 var(--loose);
  background: var(--paper);
  border: var(--line);
  border-radius: var(--pill);
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 0.032em;
  text-transform: uppercase;
}
/* Checked state is a fill AND a weight change, never colour alone. */
.choice-pill input:checked + span { background: var(--carbon); color: var(--paper); }
.choice-pill input:focus-visible + span { outline: 3px solid var(--violet); outline-offset: 3px; }

.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

/* ---------- stickers: the illustrated objects ---------- */

/*
  Flat, black-outlined, transparent-background cut-outs. They pin to a block the way a real
  sticker pins to a page: rotated, cropped by the edge, never centred in a tidy slot. Their
  job is rule 6 in reverse, no display block stands alone on a flat ground.
*/
.sticker { display: block; width: 100%; height: auto; pointer-events: none; user-select: none; }

.sticker-pin {
  position: absolute;
  width: clamp(120px, 15vw, 210px);
  /* Deliberately allowed to run off the block; the parent crops it. */
  top: calc(var(--loose) * -1);
  right: calc(var(--loose) * -1);
  transform: rotate(9deg);
}
.statement:nth-child(2n) .sticker-pin { transform: rotate(-7deg); }

/* The hero pair. Decorative only, so they leave on small screens rather than fight for room. */
.sticker-float { position: absolute; width: clamp(130px, 13vw, 220px); z-index: 1; }
.sticker-float-a { left: -3%; bottom: 6%; transform: rotate(-12deg); }
.sticker-float-b { right: 4%; top: 4%; transform: rotate(10deg); }
@media (max-width: 1100px) { .sticker-float { display: none; } }

/* ---------- stamps: our signature motif ---------- */

.stamps { display: flex; flex-wrap: wrap; gap: var(--base); }

/*
  The assets are white alpha masks, so they are coloured with a CSS mask and a background
  colour, NOT a filter chain. Filters were tuned against a near-black ground and washed the
  stamps out to invisible grey rings the moment the ground went light. A mask gives the
  exact token colour on any background.
*/
.stamp {
  width: 120px;
  height: 120px;
  display: block;
  -webkit-mask: var(--src) center / contain no-repeat;
  mask: var(--src) center / contain no-repeat;
}

/* Stickers are pinned, never grid-aligned. Perfect placement is the wrong instinct. */
.stamp:nth-child(2n) { transform: rotate(-6deg); }
.stamp:nth-child(3n) { transform: rotate(5deg); }
.stamp:nth-child(5n) { transform: rotate(-2deg); }

.ink-clay, .ink-ember { background-color: var(--ember); }
.ink-heather, .ink-violet { background-color: var(--violet); }
.ink-moss, .ink-mint { background-color: var(--mint); }
.ink-sky, .ink-blue { background-color: var(--blue); }
.ink-ash { background-color: var(--slate); opacity: 0.35; }
.band-ink .stamp.ink-ash { background-color: var(--paper); opacity: 0.3; }

/* ---------- progress ---------- */

.rail { height: 18px; background: var(--paper); border: var(--line); border-radius: var(--pill); overflow: hidden; }
.rail > span { display: block; height: 100%; background: var(--mint); }

/* ---------- the road band ---------- */

/*
  The route itself, scrolling: a dashed trail across a black field with the real landmarks
  pinned along it as waymarkers, each at its true mileage.

  This deliberately replaces a tiled wordmark marquee. Tiling your own name across coloured
  panels is the reference world's single most recognisable move, and repeating it here would
  have been trade dress rather than inspiration. Same energy, same black ground, same
  condensed type at size, but the content is our product: a person reads it and learns the
  route rather than being shouted the brand name eight times.
*/
.road { background: var(--carbon); overflow: hidden; padding-block: var(--band); position: relative; }

/* The trail. A dashed rule the markers hang from, drawn the width of the band. */
.road-line {
  position: absolute;
  left: 0;
  right: 0;
  top: 50%;
  height: 0;
  border-top: 3px dashed rgba(255, 255, 255, 0.32);
}

.road-track {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  gap: clamp(28px, 5vw, 88px);
  width: max-content;
  animation: slide 46s linear infinite;
}

/*
  Waymarkers alternate above and below the line rather than sitting in a tidy row: a route
  has undulation, and the stagger is what stops this reading as a tiled grid.
*/
.marker {
  flex: none;
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 10px 28px 16px;
  border: var(--line);
  border-radius: var(--card);
  border-color: var(--carbon);
  white-space: nowrap;
}
.marker:nth-child(odd) { transform: translateY(-46%) rotate(-1.5deg); }
.marker:nth-child(even) { transform: translateY(46%) rotate(1.5deg); }

.marker-name {
  font-family: var(--display);
  font-size: clamp(34px, 4.4vw, 68px);
  line-height: 1;
  text-transform: uppercase;
}
.marker-mile { font-size: 13px; font-weight: 700; letter-spacing: 0.032em; text-transform: uppercase; }

.road-track > .marker:nth-child(6n+1) { background: var(--ember); color: var(--paper); }
.road-track > .marker:nth-child(6n+2) { background: var(--buttercup); }
.road-track > .marker:nth-child(6n+3) { background: var(--lake); }
.road-track > .marker:nth-child(6n+4) { background: var(--paper); }
.road-track > .marker:nth-child(6n+5) { background: var(--grass); }
.road-track > .marker:nth-child(6n+6) { background: var(--heather-pale); }

/* The thin announcement strip. Small white text on black, flush to the band edges. */
.marquee { background: var(--carbon); color: var(--paper); padding-block: var(--snug); overflow: hidden; white-space: nowrap; }
.marquee span {
  display: inline-block;
  padding-right: var(--section);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.032em;
  text-transform: uppercase;
  animation: slide 26s linear infinite;
}
@keyframes slide { to { transform: translateX(-50%); } }
@keyframes slide-back { from { transform: translateX(-50%); } to { transform: translateX(0); } }

/* ---------- the phone ---------- */

/*
  A screenshot needs an edge or it reads as a floating rectangle of UI. The bezel is a solid
  carbon sticker at phone radius: the same outlined-block logic as everything else, rather
  than a drawn device illustration.
*/
.phone { flex: none; width: 100%; max-width: 300px; background: var(--carbon); border: var(--line); border-radius: 48px; padding: 9px; }
.phone img { display: block; width: 100%; height: auto; border-radius: 40px; }
.phone-tilt-l { transform: rotate(-4deg); }
.phone-tilt-r { transform: rotate(4deg); }
.phone-row { display: flex; gap: var(--loose); align-items: center; justify-content: center; flex-wrap: wrap; }

/*
  The hero. Two columns that do not collapse to "text, then a hole": the phone column is
  sized to the phone rather than to a free fraction, which is what left a third of the first
  viewport empty when the screenshot was missing.
*/
.hero {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: var(--wide);
  align-items: center;
}
.hero-phone { position: relative; display: flex; justify-content: flex-end; }
.sticker-peek {
  position: absolute;
  width: clamp(110px, 11vw, 168px);
  left: -22%;
  bottom: -6%;
  transform: rotate(-11deg);
  z-index: 3;
}

/* Phones at ONE size, in a fixed row. Three different phone sizes across a page is the
   other half of what read as inconsistent. */
.showcase { display: grid; grid-template-columns: repeat(auto-fit, minmax(var(--row-card-min), 1fr)); gap: var(--band) var(--wide); align-items: start; }
.showcase-item { display: flex; flex-direction: column; align-items: center; gap: var(--loose); margin: 0; text-align: center; }
.showcase-item figcaption { max-width: 30ch; }

@media (max-width: 900px) {
  .hero { grid-template-columns: minmax(0, 1fr); }
  .hero-phone { justify-content: flex-start; }
  .sticker-peek { display: none; }
}

/* ---------- pricing ---------- */

.plan-price { font-family: var(--display); font-size: 88px; line-height: 0.84; }
.plan-list { list-style: none; margin: 0; padding: 0; }
.plan-list li { padding: var(--snug) 0; border-bottom: var(--line); }
.plan-list li:last-child { border-bottom: 0; }
.card-violet .plan-list li { border-bottom-color: var(--paper); }

/* ---------- organiser pages ---------- */

.masthead {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--snug) var(--base);
  padding-block: var(--loose);
}
.site-head { background: var(--paper); }
.wordmark { font-family: var(--display); font-size: 34px; line-height: 1; text-decoration: none; text-transform: uppercase; }

.page-head { margin-bottom: var(--section); }
.metric-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: var(--base); }
.metric { display: block; margin-top: var(--tight); font-family: var(--display); font-size: 52px; line-height: 1; }
.notice { border: var(--line); border-radius: var(--card); background: var(--sun); padding: var(--loose); margin-bottom: var(--section); }
.notice p { margin: 0 0 var(--snug); }
/* The live price quote is the same sticker, and it has nothing to say until a number is
   typed. An empty outlined box reads as a page that failed to load. */
#pricing-quote:empty { display: none; }
.code-card { max-width: 620px; }
.code-display { font-family: var(--display); font-size: clamp(56px, 11vw, 104px); line-height: 1; letter-spacing: 0.06em; margin: var(--snug) 0 0; }

/* A whole card can be the link. The register was a list of underlined rows, which is a
   different object from every other block on the site for no reason. */
a.card { text-decoration: none; transition: transform 0.12s ease; }
a.card:hover { transform: translateY(-2px); }

/* ---------- misc ---------- */

a { color: inherit; }
a:focus-visible, .btn:focus-visible, .nav-pill:focus-visible {
  outline: 3px solid var(--violet);
  outline-offset: 3px;
}
.band-ink a:focus-visible, .band-ink .btn:focus-visible { outline-color: var(--sun); }
.stack > * + * { margin-top: var(--base); }
.stack-list > * + * { border-top: var(--line); }
.split { display: flex; flex-wrap: wrap; gap: var(--snug); align-items: center; }

footer nav a.caption { display: inline-flex; align-items: center; min-height: 44px; padding-block: 12px; }

/* At the first width that cannot hold three shared-minimum cards plus both gaps and shell
   gutters, all three row types move directly to one column instead of stranding a 2+1. */
@media (max-width: 1028px) {
  .statements, .grid, .showcase { grid-template-columns: minmax(0, 1fr); }
}

@media (max-width: 900px) {
  :root { --band: 80px; --section: 40px; --wide: 24px; }
  .statement { min-height: 320px; }
}
@media (max-width: 560px) {
  .masthead > nav { width: 100%; }
  .stamp { width: 88px; height: 88px; }
  .phone-tilt-l, .phone-tilt-r { transform: none; }
}

@media (prefers-reduced-motion: reduce) {
  *, .marquee span, .marquee-xl-track { animation: none !important; transition-duration: 0.01ms !important; }
  .btn:hover { transform: none; }
}

/* A sticker pinned to a prose card, cropped by the corner the same way. */
.card .sticker-pin { width: clamp(96px, 11vw, 150px); top: -14px; right: -14px; transform: rotate(8deg); }

/* Grazing beside the trail, cropped by the band's bottom edge. Decorative, so it goes
   before it can fight the markers for room. */
.road-sheep {
  position: absolute;
  left: 4%;
  bottom: -10px;
  width: clamp(120px, 12vw, 190px);
  transform: rotate(-3deg);
  z-index: 0;
}
@media (max-width: 900px) { .road-sheep { display: none; } }

/* A statement block with its supporting prose beneath, never inside it: rule 6 says a
   statement block holds one statement, and the explanation is a separate register. */
.statement-item { display: contents; margin: 0; }
.statement-item:nth-child(1) .statement { grid-column: 1; grid-row: 1; }
.statement-item:nth-child(1) figcaption { grid-column: 1; grid-row: 2; }
.statement-item:nth-child(2) .statement { grid-column: 2; grid-row: 1; }
.statement-item:nth-child(2) figcaption { grid-column: 2; grid-row: 2; }
.statement-item:nth-child(3) .statement { grid-column: 3; grid-row: 1; }
.statement-item:nth-child(3) figcaption { grid-column: 3; grid-row: 2; }
.statement-item figcaption { max-width: 34ch; }

@media (max-width: 1028px) {
  .statements { grid-template-rows: repeat(6, auto); }
  .statement-item:nth-child(1) .statement { grid-column: 1; grid-row: 1; }
  .statement-item:nth-child(1) figcaption { grid-column: 1; grid-row: 2; }
  .statement-item:nth-child(2) .statement { grid-column: 1; grid-row: 3; }
  .statement-item:nth-child(2) figcaption { grid-column: 1; grid-row: 4; }
  .statement-item:nth-child(3) .statement { grid-column: 1; grid-row: 5; }
  .statement-item:nth-child(3) figcaption { grid-column: 1; grid-row: 6; }
}