/* ===========================================================================
   SECTIONS — the band-level layouts every page is assembled from
   ========================================================================= */

/* --- Heroes -------------------------------------------------------------- */
.hero { position: relative; isolation: isolate; }

/* Cinematic full-bleed hero */
.hero--cinema {
  min-height: min(calc(96vh - var(--announce-h, 2.35rem)), 58rem);
  display: flex; align-items: flex-end;
  padding: calc(var(--rail-h) + var(--nav-h) + var(--sub-h) + clamp(2rem, 4vw, 3.5rem)) 0 clamp(2.5rem, 6vw, 5rem);
  color: var(--chalk);
  overflow: hidden;
}
.hero--cinema.hero--tall { min-height: min(calc(100vh - var(--announce-h, 2.35rem)), 64rem); }
.hero--cinema.hero--short { min-height: min(calc(70vh - var(--announce-h, 2.35rem)), 40rem); }
.hero__media { position: absolute; inset: 0; z-index: -2; }
.hero__media img { width: 100%; height: 100%; object-fit: cover; will-change: transform; }
.hero__veil { position: absolute; inset: 0; z-index: -1; background: var(--hero-veil); }
.hero__veil--side { background: var(--hero-veil-side); }
.hero__content { position: relative; width: 100%; }
.hero__text { max-width: 46rem; }
.hero--cinema .hero__eyebrow { color: var(--corn); }
.hero--cinema h1 { font-size: var(--fs-3xl); line-height: var(--lh-tight); margin-top: .75rem; text-shadow: 0 2px 30px rgba(0,0,0,.3); }
.hero--cinema .lead { color: rgba(237,230,214,.9); margin-top: 1.1rem; max-width: 40rem; font-size: clamp(1.1rem, 1.5vw, 1.4rem); }
.hero__actions { display: flex; flex-wrap: wrap; gap: .8rem; align-items: center; margin-top: 1.9rem; }
.hero__note { display: inline-flex; align-items: center; gap: .45rem; font-size: var(--fs-sm); color: rgba(237,230,214,.72); }
.hero__scroll { position: absolute; left: 50%; bottom: 1.5rem; transform: translateX(-50%); display: grid; gap: .5rem; justify-items: center; font-size: .62rem; font-weight: 800; letter-spacing: .24em; text-transform: uppercase; color: rgba(237,230,214,.6); }
.hero__scroll i { display: block; width: 1px; height: 2.25rem; background: linear-gradient(rgba(237,230,214,.7), transparent); animation: scroll-hint 2.4s var(--ease-tractor) infinite; }
@keyframes scroll-hint { 0%,100% { transform: scaleY(.35); transform-origin: top; opacity: .35; } 50% { transform: scaleY(1); opacity: 1; } }
.hero__stats { display: flex; flex-wrap: wrap; gap: 2.25rem; margin-top: 2.5rem; padding-top: 1.75rem; border-top: 1px solid rgba(237,230,214,.22); }

/* Poster hero — colour-blocked, no photography, the wheat-paste panel */
.hero--poster {
  padding: calc(var(--nav-h) + 4rem) 0 clamp(3rem, 6vw, 5.5rem);
  background: var(--accent); color: var(--accent-ink);
  position: relative; overflow: hidden;
}
.hero--poster .hero__inner { position: relative; display: grid; gap: 2.5rem; grid-template-columns: 1.25fr .75fr; align-items: center; }
.hero--poster h1 { font-size: var(--fs-3xl); text-transform: uppercase; letter-spacing: .01em; line-height: .96; }
.hero--poster .eyebrow { color: var(--accent-ink); opacity: .75; }
.hero--poster .lead { color: color-mix(in srgb, var(--accent-ink) 82%, transparent); }
.hero__beast { justify-self: center; width: min(100%, 24rem); opacity: .95; }
.hero__beast .dse-beast { color: var(--accent-ink); opacity: .22; }
@media (max-width: 900px) { .hero--poster .hero__inner { grid-template-columns: 1fr; } .hero__beast { display: none; } }

/* Quiet hero — utility, legal, index pages */
.hero--quiet { padding: calc(var(--nav-h) + 3.5rem) 0 clamp(2rem, 4vw, 3.5rem); background: var(--surface-sunk); border-bottom: 1px solid var(--line); }
.hero--quiet h1 { font-size: var(--fs-xl); margin-top: .5rem; }
.hero--quiet .lead { margin-top: .8rem; }
.hero__crumbs { margin-bottom: 1.1rem; }

/* Split hero — half image, half type. Product and chapter pages. */
.hero--split { padding-top: var(--nav-h); }
.hero--split .hero__inner { display: grid; grid-template-columns: 1fr 1fr; min-height: min(80vh, 46rem); }
.hero--split .hero__pane { display: flex; flex-direction: column; justify-content: center; padding: clamp(2.5rem, 5vw, 5rem) var(--gutter); }
.hero--split .hero__pane--art { position: relative; background: var(--chalk-deep); overflow: hidden; padding: 0; }
.hero--split .hero__pane--art img { width: 100%; height: 100%; object-fit: cover; }
@media (max-width: 900px) { .hero--split .hero__inner { grid-template-columns: 1fr; } .hero--split .hero__pane--art { aspect-ratio: 4/3; } }

/* --- Chapter card — the signature transition device ---------------------- */
.chapter-card {
  position: relative; overflow: hidden;
  padding: clamp(3rem, 8vw, 7rem) var(--gutter);
  background: var(--accent); color: var(--accent-ink);
  text-align: center;
}
.chapter-card--petrol { background: var(--petrol); color: var(--chalk); }
.chapter-card--ink    { background: var(--ink);    color: var(--chalk); }
.chapter-card--claret { background: var(--claret); color: var(--chalk); }
.chapter-card--ochre  { background: var(--ochre);  color: var(--ink); }
.chapter-card__rule { display: block; width: 3.5rem; height: 3px; background: currentColor; opacity: .45; margin: 0 auto 1.5rem; }
.chapter-card__num { display: grid; gap: .3rem; justify-items: center; margin-bottom: .9rem; }
.chapter-card__num i { font-style: normal; font-size: var(--fs-xs); font-weight: 800; letter-spacing: .3em; text-transform: uppercase; opacity: .7; }
.chapter-card__num b { font-family: var(--font-display); font-size: clamp(2.25rem, 5vw, 3.75rem); font-weight: 900; line-height: .9; letter-spacing: .06em; }
.chapter-card__num u { text-decoration: none; font-family: var(--font-mono); font-size: var(--fs-xs); opacity: .55; letter-spacing: .2em; }
.chapter-card__name {
  font-family: var(--font-display); font-weight: 900;
  font-size: clamp(2.5rem, 8vw, 6.5rem); line-height: .95;
  letter-spacing: var(--track-card); text-transform: uppercase;
  max-width: 18ch; margin-inline: auto;
}
.chapter-card__beast { display: block; width: min(100%, 15rem); margin: 1.75rem auto 0; opacity: .3; }
.chapter-card__grain { position: absolute; inset: 0; pointer-events: none; opacity: var(--grain-opacity); mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)'/%3E%3C/svg%3E"); }

/* --- Story: image beside text, alternating ------------------------------- */
.story__inner { display: grid; gap: clamp(2rem, 4vw, 4rem); grid-template-columns: 1fr 1fr; align-items: center; }
.story--flip .story__art { order: 2; }
.story__art { position: relative; }
.story__art .dse-figure__frame { border-radius: var(--r-xl); }
.story__body > * + * { margin-top: 1.05rem; }
.story__facts { display: grid; gap: 1.1rem; grid-template-columns: repeat(auto-fit, minmax(8rem, 1fr)); margin-top: 1.75rem; padding-top: 1.5rem; border-top: 1px solid var(--line); }
@media (max-width: 900px) { .story__inner { grid-template-columns: 1fr; } .story--flip .story__art { order: 0; } }

/* --- Triptych: three abreast, iconic ------------------------------------- */
.tri { display: grid; gap: var(--s5); grid-template-columns: repeat(auto-fit, minmax(min(100%, 16rem), 1fr)); }
.tri__item { display: flex; flex-direction: column; gap: .65rem; padding: 1.5rem; background: var(--surface-raised); border: 1px solid var(--line); border-radius: var(--r-lg); }
.tri__ico { width: 2.75rem; height: 2.75rem; border-radius: var(--r-md); background: var(--accent); color: var(--accent-ink); display: grid; place-items: center; margin-bottom: .35rem; }
.tri__ico .dse-icon { width: 1.35rem; height: 1.35rem; }
.tri__title { font-family: var(--font-display); font-size: 1.22rem; font-weight: 600; }
.tri__text { font-size: var(--fs-sm); color: var(--text-soft); line-height: 1.55; }

/* --- Plates: big numbered blocks ----------------------------------------- */
.plates { display: grid; gap: var(--s4); grid-template-columns: repeat(auto-fit, minmax(min(100%, 15rem), 1fr)); counter-reset: plate; }
.plate { position: relative; padding: 1.75rem 1.5rem 1.5rem; background: var(--surface-raised); border: 1px solid var(--line); border-radius: var(--r-lg); overflow: hidden; }
.plate::before { counter-increment: plate; content: counter(plate, decimal-leading-zero); position: absolute; top: .4rem; right: .9rem; font-family: var(--font-display); font-size: 3.75rem; font-weight: 900; color: var(--accent); opacity: .13; line-height: 1; }
.plate__title { font-family: var(--font-display); font-size: 1.2rem; font-weight: 600; margin-bottom: .45rem; }
.plate__text { font-size: var(--fs-sm); color: var(--text-soft); line-height: 1.55; }

/* --- Timeline ------------------------------------------------------------ */
.tl { position: relative; padding-left: 2.5rem; }
.tl::before { content: ""; position: absolute; left: .6rem; top: .5rem; bottom: .5rem; width: 2px; background: linear-gradient(var(--accent), color-mix(in srgb, var(--accent) 15%, transparent)); }
.tl__node { position: relative; padding-bottom: 2.25rem; }
.tl__node::before { content: ""; position: absolute; left: -2.5rem; top: .35rem; width: .85rem; height: .85rem; border-radius: 50%; background: var(--accent); border: 3px solid var(--surface); box-shadow: 0 0 0 2px var(--accent); }
.tl__when { font-family: var(--font-mono); font-size: var(--fs-xs); font-weight: 700; letter-spacing: .1em; color: var(--accent-deep); text-transform: uppercase; }
.tl__title { font-family: var(--font-display); font-size: 1.25rem; font-weight: 600; margin-top: .2rem; }
.tl__text { font-size: var(--fs-sm); color: var(--text-soft); margin-top: .35rem; line-height: 1.55; max-width: 58ch; }
.ground--ink .tl__node::before { border-color: var(--ink); }
.ground--ink .tl__when { color: var(--corn); }

/* --- Route map: marker travels the path on scroll ------------------------ */
.route { display: grid; gap: clamp(2rem, 4vw, 3.5rem); grid-template-columns: .9fr 1.1fr; align-items: center; }
.route__map { position: relative; background: var(--surface-raised); border: 1px solid var(--line); border-radius: var(--r-xl); padding: 1.5rem; aspect-ratio: 4/3; }
.route__map svg { width: 100%; height: 100%; overflow: visible; }
.route-path { fill: none; stroke: var(--line-strong); stroke-width: 2; stroke-dasharray: 6 6; }
.route-trail { fill: none; stroke: var(--accent); stroke-width: 3; stroke-linecap: round; }
.route-marker { fill: var(--accent); }
.route-pulse { fill: var(--accent); opacity: .35; }
.route__stops { list-style: none; padding: 0; margin: 0; display: grid; gap: .9rem; counter-reset: stop; }
.route__stop { display: flex; gap: .9rem; align-items: flex-start; }
.route__stop b { counter-increment: stop; flex: none; width: 1.7rem; height: 1.7rem; border-radius: 50%; background: var(--accent); color: var(--accent-ink); display: grid; place-items: center; font-size: .72rem; font-weight: 800; }
.route__stop b::before { content: counter(stop); }
@media (max-width: 900px) { .route { grid-template-columns: 1fr; } }

/* --- Index: everything on this branch ------------------------------------ */
.index-grid { display: grid; gap: .5rem 1.5rem; grid-template-columns: repeat(auto-fill, minmax(min(100%, 15rem), 1fr)); }
.index-row {
  display: flex; align-items: baseline; gap: .6rem; padding: .65rem 0;
  border-bottom: 1px solid var(--line); text-decoration: none; color: inherit;
  transition: padding var(--t-quick) var(--ease-paper), border-color var(--t-quick);
}
.index-row:hover { padding-left: .5rem; border-color: var(--accent); color: inherit; }
.index-row__n { font-family: var(--font-mono); font-size: var(--fs-xs); color: var(--text-faint); flex: none; }
.index-row__t { font-weight: 600; flex: 1; }
.index-row__go { opacity: 0; transition: opacity var(--t-quick), transform var(--t-quick); color: var(--accent-deep); }
.index-row:hover .index-row__go { opacity: 1; transform: translateX(2px); }

/* --- Steps --------------------------------------------------------------- */
.steps { display: grid; gap: 1.25rem; counter-reset: step; }
.step { display: grid; grid-template-columns: 3rem 1fr; gap: 1.15rem; align-items: start; padding-bottom: 1.25rem; border-bottom: 1px solid var(--line); }
.step:last-child { border-bottom: 0; }
.step__n { counter-increment: step; width: 3rem; height: 3rem; border-radius: var(--r-md); background: var(--accent); color: var(--accent-ink); display: grid; place-items: center; font-family: var(--font-display); font-size: 1.35rem; font-weight: 900; }
.step__n::before { content: counter(step); }
.step__title { font-family: var(--font-display); font-size: 1.22rem; font-weight: 600; }
.step__text { font-size: var(--fs-sm); color: var(--text-soft); margin-top: .3rem; line-height: 1.55; max-width: 62ch; }

/* --- Gallery ------------------------------------------------------------- */
.gal { display: grid; gap: .75rem; grid-template-columns: repeat(auto-fit, minmax(min(100%, 13rem), 1fr)); }
.gal__item { position: relative; overflow: hidden; border-radius: var(--r-md); aspect-ratio: 1; background: var(--chalk-deep); }
.gal__item:nth-child(4n+1) { grid-column: span 2; aspect-ratio: 2/1; }
.gal__item img { width: 100%; height: 100%; object-fit: cover; transition: transform var(--t-slow) var(--ease-paper); }
.gal__item:hover img { transform: scale(1.06); }
@media (max-width: 640px) { .gal__item:nth-child(4n+1) { grid-column: span 1; aspect-ratio: 1; } }

/* --- Media band: a video or big image, full bleed ------------------------ */
.media-band { position: relative; overflow: hidden; border-radius: var(--r-xl); aspect-ratio: 21/9; background: var(--ink); }
.media-band img, .media-band video { width: 100%; height: 100%; object-fit: cover; }
.media-band__play { position: absolute; inset: 0; display: grid; place-items: center; }
.media-band__play button { width: 5rem; height: 5rem; border-radius: 50%; background: var(--ochre); color: var(--ink); display: grid; place-items: center; box-shadow: var(--sh-lg); transition: transform var(--t-base) var(--ease-gate); }
.media-band__play button:hover { transform: scale(1.09); }
.media-band__play .dse-icon { width: 1.7rem; height: 1.7rem; fill: currentColor; }
.media-band__cap { position: absolute; left: 0; right: 0; bottom: 0; padding: 2rem; background: linear-gradient(transparent, rgba(35,33,30,.85)); color: var(--chalk); }
@media (max-width: 700px) { .media-band { aspect-ratio: 4/3; } }

/* --- Feature strip: icon + label rows ------------------------------------ */
.strip { display: grid; gap: 1.25rem; grid-template-columns: repeat(auto-fit, minmax(min(100%, 14rem), 1fr)); }
.strip__item { display: flex; gap: .85rem; align-items: flex-start; }
.strip__ico { flex: none; width: 2.25rem; height: 2.25rem; border-radius: var(--r-sm); background: color-mix(in srgb, var(--accent) 16%, transparent); color: var(--accent-deep); display: grid; place-items: center; }
.strip__ico .dse-icon { width: 1.15rem; height: 1.15rem; }
.strip__t { font-weight: 700; font-size: .95rem; }
.strip__x { font-size: var(--fs-sm); color: var(--text-soft); line-height: 1.5; margin-top: .15rem; }
.ground--ink .strip__ico { background: rgba(237,230,214,.12); color: var(--corn); }
.ground--ink .strip__x { color: rgba(237,230,214,.66); }

/* --- Comparison / included ----------------------------------------------- */
.incl { display: grid; gap: 2rem; grid-template-columns: repeat(auto-fit, minmax(min(100%, 17rem), 1fr)); }
.incl__list { list-style: none; padding: 0; margin: 0; display: grid; gap: .55rem; }
.incl__list li { display: flex; gap: .6rem; align-items: flex-start; font-size: .95rem; }
.incl__list .dse-icon { flex: none; margin-top: .2rem; width: 1.05rem; height: 1.05rem; }
.incl--yes .dse-icon { color: var(--moss); }
.incl--no  .dse-icon { color: var(--claret); }
.incl--no li { color: var(--text-faint); }

/* --- Menu board (the pub) ------------------------------------------------ */
.menu-board { display: grid; gap: 2.5rem; grid-template-columns: repeat(auto-fit, minmax(min(100%, 19rem), 1fr)); }
.menu-course__title { font-family: var(--font-display); font-size: 1.35rem; font-weight: 700; padding-bottom: .6rem; border-bottom: 2px solid var(--accent); margin-bottom: .9rem; }
.menu-item { display: flex; gap: .75rem; align-items: baseline; padding: .55rem 0; border-bottom: 1px dotted var(--line-strong); text-decoration: none; color: inherit; }
.menu-item:hover { color: var(--accent-deep); }
.menu-item__n { font-weight: 600; flex: 1; }
.menu-item__d { display: block; font-size: var(--fs-xs); color: var(--text-faint); font-weight: 400; margin-top: .1rem; }
.menu-item__p { font-family: var(--font-mono); font-weight: 700; flex: none; }
.menu-note { margin-top: 1.25rem; font-size: var(--fs-xs); color: var(--text-faint); font-style: italic; }

/* --- Yield ticker -------------------------------------------------------- */
.ticker { overflow: hidden; background: var(--ink); color: var(--chalk); padding-block: .8rem; border-block: 1px solid var(--ink-3); }
.ticker__track { display: flex; gap: 3rem; width: max-content; animation: ticker 46s linear infinite; }
.ticker__item { display: inline-flex; align-items: center; gap: .55rem; font-size: var(--fs-xs); font-weight: 700; letter-spacing: .1em; text-transform: uppercase; white-space: nowrap; }
.ticker__item b { font-family: var(--font-mono); color: var(--corn); }
.ticker__item .dse-icon { color: var(--corn); }
@keyframes ticker { to { transform: translateX(-50%); } }
.ticker:hover .ticker__track { animation-play-state: paused; }
@media (prefers-reduced-motion: reduce) { .ticker__track { animation: none; flex-wrap: wrap; width: auto; } }

/* --- Big CTA band -------------------------------------------------------- */
.cta-band { position: relative; overflow: hidden; border-radius: var(--r-xl); padding: clamp(2.25rem, 5vw, 4rem); background: var(--ink); color: var(--chalk); }
.cta-band--accent { background: var(--accent); color: var(--accent-ink); }
.cta-band__inner { position: relative; z-index: 2; display: flex; flex-wrap: wrap; gap: 1.75rem; align-items: center; justify-content: space-between; }
.cta-band__text { max-width: 44ch; }
.cta-band__title { font-family: var(--font-display); font-size: var(--fs-l); font-weight: 700; }
.cta-band__lead { margin-top: .55rem; font-size: var(--fs-sm); opacity: .78; line-height: 1.55; }
.cta-band__beast { position: absolute; right: -3%; bottom: -22%; width: 22rem; opacity: .1; pointer-events: none; }

/* --- Safety / notice ----------------------------------------------------- */
.notice { display: flex; gap: 1rem; padding: 1.25rem 1.4rem; border-radius: var(--r-lg); background: color-mix(in srgb, var(--corn) 20%, var(--surface)); border-left: 4px solid var(--corn-deep); }
.notice--legal { background: color-mix(in srgb, var(--petrol) 10%, var(--surface)); border-left-color: var(--petrol); }
.notice--warn  { background: color-mix(in srgb, var(--claret) 10%, var(--surface)); border-left-color: var(--claret); }
.notice__ico { flex: none; color: var(--accent-deep); }
.notice__title { font-weight: 800; font-size: .95rem; margin-bottom: .25rem; }
.notice__text { font-size: var(--fs-sm); color: var(--text-soft); line-height: 1.55; }

/* --- Testimonials -------------------------------------------------------- */
.quotes { display: grid; gap: var(--s4); grid-template-columns: repeat(auto-fit, minmax(min(100%, 17rem), 1fr)); }
.quote-card { padding: 1.5rem; background: var(--surface-raised); border: 1px solid var(--line); border-radius: var(--r-lg); display: flex; flex-direction: column; gap: .85rem; }
.quote-card__stars { display: flex; gap: .12rem; color: var(--corn-deep); }
.quote-card__stars .dse-icon { width: .95rem; height: .95rem; fill: currentColor; stroke: none; }
.quote-card__q { font-family: var(--font-display); font-size: 1.08rem; line-height: 1.4; }
.quote-card__who { margin-top: auto; font-size: var(--fs-xs); font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: var(--text-faint); }

/* --- Verdict / honest box ------------------------------------------------ */
.verdict { border: 2px dashed var(--line-strong); border-radius: var(--r-lg); padding: 1.5rem 1.75rem; background: color-mix(in srgb, var(--accent) 5%, transparent); }
.verdict__eyebrow { font-size: var(--fs-xs); font-weight: 800; letter-spacing: .18em; text-transform: uppercase; color: var(--accent-deep); }
.verdict__text { font-family: var(--font-display); font-size: var(--fs-m); line-height: 1.35; margin-top: .55rem; }

/* --- Sitemap ------------------------------------------------------------- */
.sitemap { display: grid; gap: 2.5rem; grid-template-columns: repeat(auto-fit, minmax(min(100%, 16rem), 1fr)); }
.sitemap__group h3 { font-size: 1.15rem; padding-bottom: .5rem; border-bottom: 2px solid var(--accent); margin-bottom: .75rem; }
.sitemap__links { list-style: none; padding: 0; margin: 0; display: grid; gap: .25rem; font-size: .9rem; }
.sitemap__links a { text-decoration: none; color: var(--text-soft); }
.sitemap__links a:hover { color: var(--accent-deep); }
.sitemap__links ul { list-style: none; padding-left: .9rem; margin: .2rem 0; border-left: 1px solid var(--line); }

/* --- Empty & error states ------------------------------------------------ */
.state { text-align: center; max-width: 34rem; margin-inline: auto; padding-block: clamp(2.5rem, 6vw, 5rem); }
.state__beast { width: min(100%, 15rem); margin: 0 auto 1.5rem; color: var(--accent); opacity: .35; }
.state__title { font-family: var(--font-display); font-size: var(--fs-xl); }
.state__text { margin-top: .8rem; color: var(--text-soft); }
.state__actions { margin-top: 1.75rem; display: flex; flex-wrap: wrap; gap: .7rem; justify-content: center; }

@media (max-width: 700px) {
  .hero--cinema h1 { font-size: clamp(2.35rem, 11vw, 3.5rem); }
  .tl { padding-left: 1.9rem; }
  .tl__node::before { left: -1.9rem; }
  .step { grid-template-columns: 2.4rem 1fr; gap: .85rem; }
  .step__n { width: 2.4rem; height: 2.4rem; font-size: 1.1rem; }
}

/* ===========================================================================
   THE SECOND WAVE — the components named in the platform specification.
   ========================================================================= */

/* --- CamTile ------------------------------------------------------------- */
.cams { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 17rem), 1fr)); gap: var(--s5); }
.cam { display: grid; gap: .7rem; text-decoration: none; color: inherit; }
.cam__frame {
  position: relative; aspect-ratio: 16/10; overflow: hidden;
  border-radius: var(--r-md); background: var(--ink-2, #201E18);
  border: var(--bw-line) solid rgba(237,230,214,.14);
  transition: border-color var(--t-base), transform var(--t-base) var(--ease-paper);
}
.cam:hover .cam__frame { border-color: var(--corn); transform: translateY(-4px); }
.cam__frame img { width: 100%; height: 100%; object-fit: cover; filter: saturate(.82) contrast(1.06); }
/* A single slow scan line. Two would be a novelty; one reads as a monitor. */
.cam__scan { position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(to bottom, transparent 0%, rgba(237,230,214,.09) 48%, transparent 52%);
  animation: camscan 7.5s linear infinite; }
@keyframes camscan { from { transform: translateY(-100%); } to { transform: translateY(100%); } }
.cam__grain { position: absolute; inset: 0; pointer-events: none; opacity: .5;
  background-image: var(--grain-url); background-size: 160px; mix-blend-mode: overlay; }
.cam__tag {
  position: absolute; top: .55rem; left: .55rem; display: inline-flex; align-items: center; gap: .35rem;
  padding: .2rem .5rem; border-radius: var(--r-xs);
  background: rgba(12,11,9,.72); color: var(--chalk);
  font-size: .62rem; font-weight: 800; letter-spacing: .12em; text-transform: uppercase;
}
.cam__tag i { width: .38rem; height: .38rem; border-radius: 50%; background: var(--slate); }
.cam.is-live .cam__tag i { background: #E24B4B; animation: railpulse 2.2s var(--ease-settle) infinite; }
.cam__angle {
  position: absolute; bottom: .55rem; right: .55rem; padding: .16rem .45rem; border-radius: var(--r-xs);
  background: rgba(12,11,9,.62); color: rgba(237,230,214,.8);
  font-family: var(--font-mono); font-size: .6rem; letter-spacing: .04em;
}
.cam__body { display: grid; gap: .18rem; }
.cam__title { font-family: var(--font-display); font-size: 1.08rem; font-weight: 600; }
.cam__meta { font-size: var(--fs-xs); color: var(--text-faint); }
.cams__note { display: flex; align-items: flex-start; gap: .5rem; margin-top: var(--s6); font-size: var(--fs-sm); color: var(--text-faint); max-width: 62ch; }
.cams__note .dse-icon { flex: none; margin-top: .18em; }
@media (prefers-reduced-motion: reduce) { .cam__scan { animation: none; opacity: .25; } }

/* --- DropCountdown ------------------------------------------------------- */
.drop { display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(0, .7fr); gap: var(--s7); align-items: center; }
.drop__title { font-family: var(--font-display); font-size: var(--fs-l); font-weight: 700; line-height: 1.05; margin-top: .5rem; max-width: var(--measure-h2); }
.drop__lead { margin-top: .7rem; color: var(--text-soft); max-width: 54ch; }
.drop__lead + .btn-row { margin-top: 1.4rem; }
.drop__clock { display: flex; gap: .5rem; flex-wrap: wrap; align-items: flex-start; justify-content: flex-end; }
.drop__unit {
  display: grid; gap: .2rem; justify-items: center; min-width: 4.2rem; padding: .7rem .6rem;
  border-radius: var(--r-md); background: color-mix(in srgb, var(--chalk) 10%, transparent);
  border: var(--bw-hair) solid var(--line-light);
}
.drop__unit b { font-family: var(--font-mono); font-size: var(--step-3); font-weight: 700; line-height: 1; font-variant-numeric: tabular-nums; }
.drop__unit i { font-style: normal; font-size: .58rem; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; opacity: .6; }
.drop__when { flex-basis: 100%; text-align: right; font-size: var(--fs-xs); opacity: .6; }
.drop__bar { margin-top: var(--s6); display: grid; gap: .6rem; }
.drop__bar p { font-size: var(--fs-sm); opacity: .78; }
.scarcity { height: 6px; border-radius: 3px; background: color-mix(in srgb, var(--chalk) 16%, transparent); overflow: hidden; }
.scarcity i { display: block; height: 100%; border-radius: 3px; background: linear-gradient(90deg, var(--corn), var(--claret)); }
@media (max-width: 820px) { .drop { grid-template-columns: 1fr; } .drop__clock { justify-content: flex-start; } }

/* --- The big-number band ------------------------------------------------- */
.figures { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 13rem), 1fr)); gap: var(--s6) var(--s5); }
.figure { display: grid; gap: .35rem; padding-top: 1rem; position: relative; }
.figure__rule { position: absolute; top: 0; left: 0; width: 2.5rem; height: var(--bw-plate); background: var(--accent); border-radius: 2px; }
.figure__n {
  font-family: var(--font-mono); font-size: clamp(1.9rem, 3.2vw, var(--step-4));
  font-weight: 700; line-height: 1; letter-spacing: -.02em; font-variant-numeric: tabular-nums;
}
.figure__label { font-size: var(--fs-sm); font-weight: 600; line-height: 1.35; }
.figure__src { font-size: var(--fs-xs); color: var(--text-faint); line-height: 1.45; }

/* --- The specification block --------------------------------------------- */
.spec { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 22rem), 1fr)); gap: var(--s6) var(--s7); }
.spec__group-title {
  display: flex; align-items: center; gap: .75rem; margin-bottom: .75rem;
  font-size: .68rem; font-weight: 800; letter-spacing: .16em; text-transform: uppercase; color: var(--accent-deep);
}
.spec__group-title i { flex: 1; height: var(--bw-hair); background: var(--line); }
.spec__rows { display: grid; }
.spec__row {
  display: grid; grid-template-columns: minmax(7rem, 34%) 1fr; gap: 1rem;
  padding: .62rem 0; border-bottom: var(--bw-hair) solid var(--line); align-items: baseline;
}
.spec__row:last-child { border-bottom: 0; }
.spec__row dt { font-size: var(--fs-sm); color: var(--text-faint); font-weight: 500; }
.spec__row dd { font-size: var(--fs-sm); font-weight: 600; }
.spec__row dd small { display: block; margin-top: .18rem; font-weight: 400; font-size: var(--fs-xs); color: var(--text-faint); }
.spec__note { display: flex; align-items: flex-start; gap: .5rem; margin-top: var(--s6); font-size: var(--fs-xs); color: var(--text-faint); max-width: 68ch; }
.spec__note .dse-icon { flex: none; margin-top: .18em; }

/* --- The escalation ladder ----------------------------------------------- */
.ladder { list-style: none; margin: 0; padding: 0; counter-reset: rung; max-width: 62rem; }
.ladder__rung { display: grid; grid-template-columns: 4.5rem 1fr; gap: var(--s5); padding: var(--s6) 0; border-top: var(--bw-hair) solid var(--line); }
.ladder__rung:first-child { border-top: 0; padding-top: 0; }
.ladder__n {
  font-family: var(--font-mono); font-size: var(--step-2); font-weight: 700;
  color: var(--accent-deep); line-height: 1; padding-top: .28rem;
}
.ladder__title { font-family: var(--font-display); font-size: var(--fs-m); font-weight: 700; margin-bottom: .7rem; max-width: var(--measure-h2); }
/* The first paragraph of each rung is a deck, so a long argument still skims. */
.ladder .prose p:first-of-type { font-family: var(--font-display); font-size: 1.28rem; font-weight: 500; line-height: 1.45; }
.ladder__pull {
  display: flex; gap: .7rem; margin-top: 1.1rem; padding-left: 1.1rem;
  border-left: var(--bw-plate) solid var(--accent);
  font-family: var(--font-display); font-size: 1.15rem; line-height: 1.4; color: var(--text-soft);
}
.ladder__pull .dse-icon { flex: none; width: 1.1rem; height: 1.1rem; color: var(--accent); margin-top: .3rem; }
@media (max-width: 640px) { .ladder__rung { grid-template-columns: 1fr; gap: .75rem; } }

/* --- The marquee band ---------------------------------------------------- */
.marquee { padding-block: clamp(1.75rem, 4vw, 3.25rem); overflow: hidden; }
.marquee__track { display: flex; align-items: center; gap: 1.5rem; width: max-content; animation: marquee 42s linear infinite; }
.marquee:hover .marquee__track { animation-play-state: paused; }
@keyframes marquee { from { transform: translateX(0); } to { transform: translateX(-50%); } }
.marquee__word {
  font-family: var(--font-display); font-size: clamp(1.8rem, 4.5vw, var(--step-5));
  font-weight: 700; text-transform: uppercase; letter-spacing: var(--track-card);
  white-space: nowrap; text-decoration: none; color: inherit; opacity: .9;
  transition: opacity var(--t-quick), color var(--t-quick);
}
a.marquee__word:hover { opacity: 1; color: var(--corn); }
.marquee__dot { font-size: clamp(1.5rem, 3vw, 2.5rem); opacity: .35; }
@media (prefers-reduced-motion: reduce) { .marquee__track { animation: none; } .marquee { overflow-x: auto; } }

/* --- LoyaltyWallet ------------------------------------------------------- */
.wallet { display: grid; grid-template-columns: minmax(0, 20rem) minmax(0, 1fr); gap: var(--s6); align-items: start; }
.wallet__card {
  position: relative; overflow: hidden; padding: var(--s6);
  border-radius: var(--r-lg); background: var(--accent); color: var(--accent-ink);
  box-shadow: var(--sh-accent);
}
.wallet__beast { position: absolute; inset: auto -12% -22% auto; width: 13rem; opacity: .14; pointer-events: none; }
.wallet__beast .dse-beast { width: 100%; }
.wallet__balance { display: flex; align-items: baseline; gap: .5rem; margin-top: .6rem; }
.wallet__balance b { font-family: var(--font-mono); font-size: var(--step-5); font-weight: 700; line-height: 1; font-variant-numeric: tabular-nums; }
.wallet__balance i { font-style: normal; font-size: .78rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; opacity: .7; }
.wallet__sub { font-size: var(--fs-xs); opacity: .78; margin-top: .5rem; max-width: 32ch; }
.wallet__meter { height: 6px; border-radius: 3px; margin-top: 1.1rem; background: rgba(0,0,0,.16); overflow: hidden; }
.wallet__meter i { display: block; height: 100%; background: currentColor; opacity: .8; border-radius: 3px; }
.wallet__next { font-size: var(--fs-xs); font-weight: 700; margin-top: .5rem; opacity: .85; }
.wallet__lists { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 15rem), 1fr)); gap: var(--s5); }
.wallet__list-title { display: flex; align-items: center; gap: .45rem; font-size: .68rem; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; color: var(--accent-deep); margin-bottom: .5rem; }
.wallet__list ul { list-style: none; margin: 0; padding: 0; }
.wallet__list li { display: flex; align-items: baseline; justify-content: space-between; gap: 1rem; padding: .5rem 0; border-bottom: var(--bw-hair) solid var(--line); font-size: var(--fs-sm); }
.wallet__list li b { font-family: var(--font-mono); font-weight: 700; white-space: nowrap; }
@media (max-width: 820px) { .wallet { grid-template-columns: 1fr; } }

/* --- BookingSlot --------------------------------------------------------- */
.slots { display: grid; gap: var(--s4); }
.slots__day { display: grid; grid-template-columns: 8.5rem 1fr; gap: var(--s4); align-items: center; padding: .85rem 0; border-bottom: var(--bw-hair) solid var(--line); }
.slots__date { display: grid; }
.slots__date b { font-weight: 700; font-size: var(--fs-sm); }
.slots__date span { font-size: var(--fs-xs); color: var(--text-faint); }
.slots__row { display: flex; flex-wrap: wrap; gap: .45rem; }
.slot {
  display: grid; gap: .1rem; justify-items: center; min-width: 4.6rem; padding: .5rem .7rem;
  border: var(--bw-hair) solid var(--line-strong); border-radius: var(--r-sm);
  background: var(--surface); color: var(--text); font-family: var(--font-mono); font-size: .82rem; font-weight: 700;
  transition: background var(--t-quick), border-color var(--t-quick), transform var(--t-quick) var(--ease-gate);
}
.slot i { font-style: normal; font-family: var(--font-ui); font-size: .58rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--text-faint); }
.slot:hover:not(:disabled) { border-color: var(--accent); transform: translateY(-2px); }
.slot.is-on { background: var(--accent); color: var(--accent-ink); border-color: transparent; }
.slot.is-on i { color: inherit; opacity: .75; }
.slot.is-gone { opacity: .42; text-decoration: line-through; cursor: not-allowed; }
.slots__foot { display: flex; align-items: center; justify-content: space-between; gap: 1rem; flex-wrap: wrap; margin-top: var(--s5); font-size: var(--fs-sm); color: var(--text-soft); }
@media (max-width: 640px) { .slots__day { grid-template-columns: 1fr; gap: .5rem; } }

/* --- ParishCard ---------------------------------------------------------- */
.parishes { display: grid; gap: .5rem; }
.parish {
  position: relative; display: grid; align-items: center; gap: 1rem;
  grid-template-columns: 2.4rem minmax(0, 1.4fr) 6rem minmax(0, 1.2fr) 1.5rem;
  padding: .9rem 1.1rem; border-radius: var(--r-md); text-decoration: none; color: inherit;
  background: var(--surface-raised); border: var(--bw-hair) solid var(--line);
  transition: border-color var(--t-quick), transform var(--t-base) var(--ease-paper), box-shadow var(--t-base);
}
.parish:hover { border-color: var(--accent); transform: translateX(4px); box-shadow: var(--sh-md); color: inherit; }
.parish__pin { display: grid; place-items: center; width: 2.4rem; height: 2.4rem; border-radius: 50%; background: color-mix(in srgb, var(--accent) 16%, transparent); color: var(--accent-deep); }
.parish__name { font-family: var(--font-display); font-size: 1.1rem; font-weight: 600; display: block; }
.parish__county { font-size: var(--fs-xs); color: var(--text-faint); }
.parish__n { display: grid; justify-items: start; }
.parish__n b { font-family: var(--font-mono); font-size: 1.1rem; font-weight: 700; }
.parish__n i { font-style: normal; font-size: .6rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--text-faint); }
.parish__next { display: flex; align-items: center; gap: .4rem; font-size: var(--fs-xs); color: var(--text-soft); }
.parish__next .dse-icon { width: .9em; height: .9em; flex: none; opacity: .6; }
.parish__go { color: var(--accent-deep); transition: transform var(--t-quick); }
.parish:hover .parish__go { transform: translateX(3px); }
@media (max-width: 860px) { .parish { grid-template-columns: 2.4rem 1fr 1.5rem; } .parish__n, .parish__next { display: none; } }

/* --- ArchiveRow ---------------------------------------------------------- */
.archive { border-top: var(--bw-hair) solid var(--line); }
.archive__group { display: flex; align-items: center; gap: .75rem; padding: var(--s5) 0 .5rem; font-size: .68rem; font-weight: 800; letter-spacing: .16em; text-transform: uppercase; color: var(--accent-deep); }
.archive__group i { flex: 1; height: var(--bw-hair); background: var(--line); }
.archive__row {
  display: grid; align-items: baseline; gap: 1rem;
  grid-template-columns: 3.5rem minmax(0, 1fr) 2.5rem minmax(0, 12rem) 7rem 1.2rem;
  padding: .58rem .5rem; border-bottom: var(--bw-hair) solid var(--line);
  text-decoration: none; color: inherit;
  transition: background var(--t-quick), padding-left var(--t-quick);
}
.archive__row:hover { background: color-mix(in srgb, var(--accent) 8%, transparent); padding-left: 1rem; color: inherit; }
.archive__n { font-family: var(--font-mono); font-size: .78rem; font-weight: 700; color: var(--accent-deep); font-variant-numeric: tabular-nums; }
.archive__t { font-family: var(--font-display); font-size: 1.02rem; font-weight: 600; }
.archive__op { font-family: var(--font-mono); font-size: .62rem; font-weight: 700; color: var(--text-faint); border: var(--bw-hair) solid var(--line-strong); border-radius: var(--r-xs); padding: .05rem .25rem; justify-self: start; }
.archive__meta { font-size: var(--fs-xs); color: var(--text-faint); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.archive__date { font-family: var(--font-mono); font-size: var(--fs-xs); color: var(--text-faint); }
.archive__go { color: var(--accent-deep); opacity: 0; transition: opacity var(--t-quick), transform var(--t-quick); }
.archive__row:hover .archive__go { opacity: 1; transform: translateX(2px); }
@media (max-width: 900px) { .archive__row { grid-template-columns: 3rem 1fr 5.5rem; } .archive__op, .archive__meta, .archive__go { display: none; } }

/* --- SeasonalBanner ------------------------------------------------------ */
.season { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); gap: var(--s7); align-items: center; }
.season__now { display: flex; align-items: center; gap: var(--s5); }
.season__dial { position: relative; width: 8.5rem; height: 8.5rem; flex: none; display: grid; place-items: center; border-radius: 50%; background: rgba(237,230,214,.06); }
.season__q { position: absolute; width: 50%; height: 50%; opacity: .18; transition: opacity var(--t-slow); }
.season__q--spring { top: 0; left: 0; background: var(--moss);   border-radius: 100% 0 0 0; }
.season__q--summer { top: 0; right: 0; background: var(--corn);  border-radius: 0 100% 0 0; }
.season__q--autumn { bottom: 0; right: 0; background: var(--sunset); border-radius: 0 0 100% 0; }
.season__q--winter { bottom: 0; left: 0; background: var(--sky);  border-radius: 0 0 0 100%; }
.season__q.is-on { opacity: .92; }
.season__dial b { position: relative; z-index: 2; font-family: var(--font-display); font-size: 1.15rem; font-weight: 700; background: var(--ink); padding: .5rem .75rem; border-radius: var(--r-pill); }
.season__doing { font-family: var(--font-display); font-size: var(--fs-m); font-weight: 700; margin-top: .45rem; }
.season__note { font-size: var(--fs-sm); opacity: .7; margin-top: .3rem; }
.season__feeds { list-style: none; margin: 0; padding: 0; display: grid; gap: .1rem; }
.season__feeds li { display: grid; grid-template-columns: minmax(0, 9rem) minmax(0, 1fr); gap: .5rem 1rem; padding: .62rem 0; border-bottom: var(--bw-hair) solid var(--line-light); align-items: baseline; }
.season__feed-k { font-size: var(--fs-xs); font-weight: 700; letter-spacing: .08em; text-transform: uppercase; opacity: .55; }
.season__feed-v { font-size: var(--fs-sm); font-weight: 600; }
.season__feed-src { grid-column: 2; display: flex; align-items: center; gap: .35rem; font-family: var(--font-mono); font-size: .66rem; opacity: .5; }
.season__feed-src .dse-icon { width: .85em; height: .85em; }
.season__feed-src em { font-style: normal; margin-left: auto; }
.season__live { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 16rem), 1fr)); gap: var(--s4); margin-top: var(--s6); padding-top: var(--s5); border-top: var(--bw-hair) solid var(--line-light); }
.season__live p { display: flex; align-items: flex-start; gap: .5rem; font-size: var(--fs-sm); opacity: .78; }
.season__live .dse-icon { flex: none; margin-top: .18em; color: var(--corn); }
@media (max-width: 900px) { .season { grid-template-columns: 1fr; } }

/* --- StopMotionScrubber -------------------------------------------------- */
.scrub { padding: 0; }
.scrub__stage { position: relative; min-height: 92vh; display: grid; align-items: end; }
.scrub__frames { position: absolute; inset: 0; overflow: hidden; }
.scrub__frame { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; }
.scrub__frame.is-on { opacity: 1; }
.scrub__grain { position: absolute; inset: 0; pointer-events: none;
  background-image: var(--grain-url); background-size: 180px; opacity: .5; mix-blend-mode: multiply; }
.scrub__copy { position: relative; z-index: 2; padding-block: clamp(2.5rem, 6vw, 5rem);
  background: linear-gradient(to top, rgba(12,11,9,.86), rgba(12,11,9,.45) 60%, transparent); }
.scrub__copy .eyebrow { color: var(--corn); }
.scrub__title { font-family: var(--font-display); font-size: var(--fs-2xl); font-weight: 700; line-height: var(--lh-tight); margin-top: .5rem; max-width: var(--measure-h1); }
.scrub__lead { margin-top: .9rem; max-width: 48ch; font-size: var(--fs-lead); color: rgba(237,230,214,.86); }
.scrub__hint { display: inline-flex; align-items: center; gap: .5rem; margin-top: 1.5rem; font-family: var(--font-mono); font-size: .72rem; letter-spacing: .06em; color: rgba(237,230,214,.6); }
@media (prefers-reduced-motion: reduce) { .scrub__stage { min-height: 60vh; } .scrub__hint { display: none; } }

/* --- PlotCard over a field plan ------------------------------------------ */
.plotmap { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr); gap: var(--s6); align-items: start; }
.plotmap__field { border-radius: var(--r-lg); overflow: hidden; border: var(--bw-hair) solid var(--line); background: var(--surface-sunk); }
.plotmap__field svg { width: 100%; height: auto; display: block; }
.plotmap__cell { transition: opacity var(--t-quick); cursor: default; }
.plotmap__cell:hover { opacity: .88; }
.plotmap__list { list-style: none; margin: 0; padding: 0; display: grid; gap: .3rem; }
.plotmap__list a {
  display: grid; grid-template-columns: 1fr auto; gap: .2rem 1rem; align-items: baseline;
  padding: .65rem .85rem; border-radius: var(--r-sm); text-decoration: none; color: inherit;
  border: var(--bw-hair) solid var(--line); transition: border-color var(--t-quick), background var(--t-quick);
}
.plotmap__list a:hover { border-color: var(--accent); background: color-mix(in srgb, var(--accent) 7%, transparent); color: inherit; }
.plotmap__list b { font-family: var(--font-display); font-size: 1.05rem; font-weight: 600; }
.plotmap__list span { grid-column: 1; font-size: var(--fs-xs); color: var(--text-faint); }
.plotmap__list em { grid-row: 1; grid-column: 2; font-style: normal; font-family: var(--font-mono); font-weight: 700; }
.plotmap__list i { grid-row: 2; grid-column: 2; justify-self: end; }
@media (max-width: 860px) { .plotmap { grid-template-columns: 1fr; } }

/* --- The pinned split ---------------------------------------------------- */
.split { padding-block: 0; }
.split__inner { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--s7); align-items: start; }
.split__sticky { position: sticky; top: calc(var(--head-h) + 2rem); padding-block: clamp(3rem, 7vw, 6rem); }
.split__plate { position: relative; aspect-ratio: 4/5; border-radius: var(--r-lg); overflow: hidden; background: var(--ink-2, #201E18); }
.split__art { position: absolute; inset: 0; opacity: 0; transition: opacity var(--t-base) var(--ease-paper); }
.split__art.is-on { opacity: 1; }
.split__art img { width: 100%; height: 100%; object-fit: cover; }
.split__grain { position: absolute; inset: 0; background-image: var(--grain-url); background-size: 170px; opacity: .45; mix-blend-mode: multiply; pointer-events: none; }
.split__count { position: absolute; left: 1rem; bottom: 1rem; display: flex; align-items: baseline; gap: .3rem; padding: .35rem .7rem; border-radius: var(--r-pill); background: rgba(12,11,9,.66); color: var(--chalk); font-family: var(--font-mono); }
.split__count b { font-size: 1.1rem; font-weight: 700; }
.split__count i { font-style: normal; font-size: .7rem; opacity: .6; }
.split__flow { padding-block: clamp(3rem, 7vw, 6rem); display: grid; gap: var(--s8); }
.split__step { display: grid; gap: .5rem; opacity: .42; transition: opacity var(--t-base); }
.split__step.is-on { opacity: 1; }
.split__step-n { font-family: var(--font-mono); font-size: .8rem; font-weight: 700; color: var(--corn); letter-spacing: .1em; }
.split__step-title { font-family: var(--font-display); font-size: var(--fs-m); font-weight: 700; max-width: var(--measure-h2); }
.split__step p { color: rgba(237,230,214,.78); max-width: 52ch; }
.split__facts { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 9rem), 1fr)); gap: .75rem 1.25rem; margin-top: .9rem; }
.split__facts dt { font-size: var(--fs-xs); text-transform: uppercase; letter-spacing: .1em; opacity: .5; }
.split__facts dd { font-family: var(--font-mono); font-weight: 700; font-size: .95rem; }
@media (max-width: 900px) {
  .split__inner { grid-template-columns: 1fr; }
  .split__sticky { position: static; padding-bottom: 0; }
  .split__step { opacity: 1; }
}

/* ===========================================================================
   THE INTERACTIVE LAYER
   ========================================================================= */

/* --- Rent a patch -------------------------------------------------------- */
.patch { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr); gap: var(--s7); align-items: start; }
.patch__field { display: grid; gap: 1rem; }
.patch__grid {
  display: grid; grid-template-columns: repeat(var(--patch-cols, 8), 1fr); gap: 4px;
  padding: 10px; border-radius: var(--r-md);
  background: var(--surface-sunk); border: var(--bw-hair) solid var(--line);
}
.patch__cell {
  position: relative; aspect-ratio: 1; border-radius: 3px;
  background: color-mix(in srgb, var(--patch-tone, var(--moss)) 62%, transparent);
  display: grid; place-items: center; color: var(--chalk);
  font-family: var(--font-mono); font-size: .58rem; font-weight: 700;
  /* The tones run from pale corn to deep hedge, so the reference needs a shadow
     rather than a colour to stay legible across all six. */
  text-shadow: 0 1px 2px rgba(12,11,9,.55);
  transition: transform var(--t-quick) var(--ease-gate), background var(--t-quick), box-shadow var(--t-quick);
}
.patch__cell:hover:not(:disabled) { transform: scale(1.12); z-index: 2; background: var(--patch-tone, var(--moss)); }
.patch__cell.is-on { box-shadow: 0 0 0 3px var(--ink); z-index: 3; background: var(--patch-tone, var(--moss)); transform: scale(1.12); }
.patch__cell.is-taken { background: color-mix(in srgb, var(--slate) 34%, transparent); color: var(--text-faint); cursor: not-allowed; }
.patch__x { position: absolute; inset: 0; }
.patch__x::before, .patch__x::after {
  content: ''; position: absolute; inset: 34% 12%; height: 1.5px; background: currentColor; opacity: .55;
}
.patch__x::before { transform: rotate(38deg); } .patch__x::after { transform: rotate(-38deg); }
.patch__legend { display: flex; flex-wrap: wrap; gap: 1rem; align-items: center; font-size: var(--fs-xs); color: var(--text-faint); }
.patch__legend span { display: inline-flex; align-items: center; gap: .4rem; }
.patch__key { width: .8rem; height: .8rem; border-radius: 2px; }
.patch__key--free { background: var(--moss); }
.patch__key--taken { background: color-mix(in srgb, var(--slate) 34%, transparent); }
.patch__scale { margin-left: auto; font-style: italic; }
.patch__panel { position: relative; min-height: 26rem; }
.patch__detail {
  display: none; gap: .55rem; padding: var(--s6);
  border-radius: var(--r-lg); background: var(--surface-raised);
  border: var(--bw-hair) solid var(--line); box-shadow: var(--sh-sm);
}
.patch__detail.is-on { display: grid; animation: megapane var(--t-base) var(--ease-paper) both; }
.patch__name { font-family: var(--font-display); font-size: var(--fs-m); font-weight: 700; }
.patch__blurb { font-size: var(--fs-sm); color: var(--text-soft); line-height: 1.55; }
.patch__facts { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .75rem 1.25rem; margin-block: .5rem; }
.patch__facts dt { font-size: var(--fs-xs); text-transform: uppercase; letter-spacing: .1em; color: var(--text-faint); }
.patch__facts dd { font-size: var(--fs-sm); font-weight: 600; margin-top: .1rem; }
.patch__price { display: flex; align-items: baseline; gap: .6rem; padding-top: .6rem; border-top: var(--bw-hair) solid var(--line); }
.patch__price b { font-family: var(--font-mono); font-size: var(--step-3); font-weight: 700; }
.patch__price span { font-size: var(--fs-xs); color: var(--text-faint); }
.patch__gone { display: flex; gap: .5rem; font-size: var(--fs-sm); color: var(--claret); }
.patch__gone .dse-icon { flex: none; margin-top: .18em; }
.patch__legal { display: flex; gap: .5rem; font-size: var(--fs-xs); color: var(--text-faint); line-height: 1.5; }
.patch__legal .dse-icon { flex: none; margin-top: .18em; }
@media (max-width: 900px) { .patch { grid-template-columns: 1fr; } .patch__panel { min-height: 0; } }

/* --- Seed to harvest ----------------------------------------------------- */
.tracker { list-style: none; margin: 0; padding: 0; position: relative; }
.tracker::before { content: ''; position: absolute; left: 11px; top: .8rem; bottom: 1.5rem; width: 2px; background: var(--line); }
.tracker__stage { position: relative; display: grid; grid-template-columns: 24px 1fr; gap: 1.25rem; padding-bottom: var(--s6); }
.tracker__dot {
  width: 24px; height: 24px; border-radius: 50%; display: grid; place-items: center;
  background: var(--surface); border: var(--bw-line) solid var(--line-strong); z-index: 1;
}
.tracker__dot .dse-icon { width: .7rem; height: .7rem; }
.is-done .tracker__dot { background: var(--moss); border-color: var(--moss); color: var(--chalk); }
.is-now  .tracker__dot { background: var(--accent); border-color: var(--accent); box-shadow: 0 0 0 5px color-mix(in srgb, var(--accent) 22%, transparent); }
.is-ahead .tracker__body { opacity: .55; }
.tracker__when { display: flex; align-items: center; gap: .5rem; font-family: var(--font-mono); font-size: var(--fs-xs); color: var(--text-faint); }
.tracker__when b { padding: .1rem .4rem; border-radius: var(--r-xs); background: var(--accent); color: var(--accent-ink); font-size: .58rem; letter-spacing: .1em; text-transform: uppercase; }
.tracker__title { font-family: var(--font-display); font-size: var(--fs-m); font-weight: 700; margin-top: .2rem; }
.tracker__what { font-size: var(--fs-sm); color: var(--text-soft); margin-top: .3rem; max-width: 58ch; line-height: 1.55; }
.tracker__tell { display: inline-flex; align-items: center; gap: .4rem; margin-top: .5rem; font-size: var(--fs-xs); color: var(--accent-deep); font-weight: 600; }

/* --- The configurator ---------------------------------------------------- */
.config { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 20rem); gap: var(--s7); align-items: start; }
.config__group { border: 0; padding: 0; margin: 0 0 var(--s6); }
.config__group legend { display: flex; align-items: center; gap: .6rem; font-family: var(--font-display); font-size: var(--fs-m); font-weight: 700; margin-bottom: .3rem; }
.config__step { font-family: var(--font-mono); font-size: .7rem; color: var(--accent-deep); }
.config__lead { font-size: var(--fs-sm); color: var(--text-soft); margin-bottom: .8rem; max-width: 56ch; }
.config__opts { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 13rem), 1fr)); gap: .6rem; }
.config__opt { cursor: pointer; }
.config__opt input { position: absolute; opacity: 0; width: 0; height: 0; }
.config__opt-body {
  display: grid; gap: .2rem; padding: .85rem 1rem; height: 100%;
  border: var(--bw-line) solid var(--line); border-radius: var(--r-md);
  background: var(--surface-raised); transition: border-color var(--t-quick), background var(--t-quick), transform var(--t-quick) var(--ease-gate);
}
.config__opt:hover .config__opt-body { transform: translateY(-2px); border-color: var(--line-strong); }
.config__opt input:checked + .config__opt-body { border-color: var(--accent); background: color-mix(in srgb, var(--accent) 9%, transparent); }
.config__opt input:focus-visible + .config__opt-body { outline: 3px solid var(--accent); outline-offset: 2px; }
.config__opt-body b { font-size: var(--fs-sm); font-weight: 700; }
.config__opt-body i { font-style: normal; font-family: var(--font-mono); font-size: var(--fs-xs); color: var(--accent-deep); font-weight: 700; }
.config__opt-body em { font-style: normal; font-size: var(--fs-xs); color: var(--text-faint); line-height: 1.45; }
.config__total {
  position: sticky; top: calc(var(--head-h) + 1.5rem); display: grid; gap: .75rem;
  padding: var(--s5); border-radius: var(--r-lg);
  background: var(--surface-raised); border: var(--bw-hair) solid var(--line-strong); box-shadow: var(--sh-md);
}
.config__summary { list-style: none; margin: 0; padding: 0; display: grid; gap: .3rem; }
.config__summary li { display: flex; justify-content: space-between; gap: 1rem; font-size: var(--fs-xs); }
.config__summary b { font-family: var(--font-mono); }
.config__sum { display: flex; align-items: baseline; justify-content: space-between; padding-top: .6rem; border-top: var(--bw-hair) solid var(--line); }
.config__sum b { font-family: var(--font-mono); font-size: var(--step-3); font-weight: 700; }
.config__note { font-size: var(--fs-xs); color: var(--text-faint); }
@media (max-width: 900px) { .config { grid-template-columns: 1fr; } .config__total { position: static; } }

/* --- The dashboard ------------------------------------------------------- */
.dash { display: grid; grid-template-columns: minmax(0, 1.35fr) minmax(0, .65fr); gap: var(--s6); align-items: start; }
.dash__cap { display: flex; align-items: center; gap: .45rem; font-size: .68rem; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; color: var(--accent-deep); margin-bottom: .75rem; }
.dash__row {
  display: grid; grid-template-columns: 2.4rem minmax(0, 1fr) 7rem; gap: .3rem 1rem; align-items: center;
  padding: .85rem 1rem; margin-bottom: .4rem; border-radius: var(--r-md);
  background: var(--surface-raised); border: var(--bw-hair) solid var(--line);
  text-decoration: none; color: inherit; transition: border-color var(--t-quick), transform var(--t-base) var(--ease-paper);
}
.dash__row:hover { border-color: var(--accent); transform: translateX(3px); color: inherit; }
.dash__ico { width: 2.4rem; height: 2.4rem; display: grid; place-items: center; border-radius: 50%; background: color-mix(in srgb, var(--accent) 15%, transparent); color: var(--accent-deep); grid-row: span 2; }
.dash__t b { display: block; font-family: var(--font-display); font-size: 1.05rem; font-weight: 600; }
.dash__t i { font-style: normal; font-size: var(--fs-xs); color: var(--text-faint); }
.dash__state { justify-self: end; font-size: var(--fs-xs); font-weight: 700; padding: .2rem .55rem; border-radius: var(--r-pill); }
.dash__state[data-state="ok"]   { background: color-mix(in srgb, var(--moss) 20%, transparent); color: var(--moss); }
.dash__state[data-state="wait"] { background: color-mix(in srgb, var(--corn) 26%, transparent); color: var(--corn-deep); }
.dash__state[data-state="due"]  { background: color-mix(in srgb, var(--claret) 18%, transparent); color: var(--claret); }
.dash__bar { grid-column: 2 / -1; height: 4px; border-radius: 2px; background: var(--line); overflow: hidden; }
.dash__bar i { display: block; height: 100%; background: var(--accent); border-radius: 2px; }
.dash__side { display: grid; gap: var(--s4); }
.dash__next, .dash__year { padding: var(--s5); border-radius: var(--r-lg); background: var(--surface-raised); border: var(--bw-hair) solid var(--line); }
.dash__next-t { font-family: var(--font-display); font-size: var(--fs-m); font-weight: 700; margin-top: .4rem; }
.dash__next-w { font-size: var(--fs-sm); color: var(--text-soft); margin-bottom: .8rem; }
.dash__year ul { list-style: none; margin: .6rem 0 0; padding: 0; display: grid; gap: .5rem; }
.dash__year li { display: flex; gap: .75rem; font-size: var(--fs-sm); }
.dash__year b { font-family: var(--font-mono); font-size: var(--fs-xs); color: var(--accent-deep); flex: none; width: 5.5rem; }
@media (max-width: 900px) { .dash { grid-template-columns: 1fr; } }

/* --- Badges -------------------------------------------------------------- */
.badges { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 13rem), 1fr)); gap: var(--s4); }
.badge-card {
  display: grid; gap: .4rem; padding: var(--s5) var(--s4); text-align: center;
  border-radius: var(--r-lg); border: var(--bw-line) dashed var(--line-strong);
  opacity: .62; transition: opacity var(--t-base), border-color var(--t-base), transform var(--t-base) var(--ease-paper);
}
.badge-card.is-earned { opacity: 1; border-style: solid; border-color: var(--accent); background: var(--surface-raised); box-shadow: var(--sh-sm); }
.badge-card.is-earned:hover { transform: translateY(-4px); box-shadow: var(--sh-md); }
.badge-card__mark { width: 4.5rem; margin-inline: auto; }
.badge-card__mark .dse-beast { width: 100%; color: var(--text-faint); }
.badge-card.is-earned .badge-card__mark .dse-beast { color: var(--accent); }
.badge-card__t { font-family: var(--font-display); font-size: 1.05rem; font-weight: 700; }
.badge-card__how { font-size: var(--fs-xs); color: var(--text-soft); line-height: 1.45; }
.badge-card__state { display: inline-flex; align-items: center; justify-content: center; gap: .35rem; font-size: var(--fs-xs); font-weight: 700; color: var(--text-faint); }
.badge-card.is-earned .badge-card__state { color: var(--moss); }
.badge-card__bar { height: 3px; border-radius: 2px; background: var(--line); overflow: hidden; }
.badge-card__bar i { display: block; height: 100%; background: var(--accent); }

/* --- Leaderboard --------------------------------------------------------- */
.board { border-radius: var(--r-lg); overflow: hidden; border: var(--bw-hair) solid var(--line); }
.board__head { display: flex; justify-content: space-between; padding: .85rem 1.1rem; background: var(--accent); color: var(--accent-ink); font-weight: 700; font-size: var(--fs-sm); }
.board__head i { font-style: normal; opacity: .75; }
.board__list { list-style: none; margin: 0; padding: 0; }
.board__row { display: grid; grid-template-columns: 2.5rem minmax(0, 1fr) minmax(0, 1.1fr) 5rem; gap: 1rem; align-items: baseline; padding: .65rem 1.1rem; border-bottom: var(--bw-hair) solid var(--line); }
.board__row:last-child { border-bottom: 0; }
.board__row.is-you { background: color-mix(in srgb, var(--accent) 12%, transparent); }
.board__n { font-family: var(--font-mono); font-size: var(--fs-xs); color: var(--text-faint); }
.board__who { font-weight: 600; font-size: var(--fs-sm); }
.board__who i { font-style: normal; margin-left: .4rem; font-size: .6rem; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; color: var(--accent-deep); }
.board__what { font-size: var(--fs-xs); color: var(--text-faint); }
.board__score { justify-self: end; font-family: var(--font-mono); font-weight: 700; font-size: var(--fs-sm); }
.board__foot { display: flex; gap: .5rem; padding: .8rem 1.1rem; background: var(--surface-sunk); font-size: var(--fs-xs); color: var(--text-faint); }
@media (max-width: 700px) { .board__row { grid-template-columns: 2rem 1fr 4rem; } .board__what { display: none; } }

/* --- Prediction market --------------------------------------------------- */
.predicts { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 20rem), 1fr)); gap: var(--s5); }
.predict { padding: var(--s5); border-radius: var(--r-lg); background: var(--surface-raised); border: var(--bw-hair) solid var(--line); display: grid; gap: .6rem; }
.predict__q { font-family: var(--font-display); font-size: var(--fs-m); font-weight: 700; line-height: 1.2; }
.predict__meta { display: flex; align-items: center; gap: .4rem; font-size: var(--fs-xs); color: var(--text-faint); }
.predict__n { margin-left: auto; }
.predict__opts { display: grid; gap: .4rem; }
.predict__opt {
  position: relative; display: flex; justify-content: space-between; align-items: center; gap: 1rem;
  padding: .6rem .8rem; border-radius: var(--r-sm); overflow: hidden; text-align: left;
  border: var(--bw-hair) solid var(--line-strong); background: var(--surface); font-size: var(--fs-sm); font-weight: 600;
  transition: border-color var(--t-quick);
}
.predict__opt:hover { border-color: var(--accent); }
.predict__opt.is-picked { border-color: var(--accent); box-shadow: inset 0 0 0 1px var(--accent); }
.predict__fill { position: absolute; inset: 0 auto 0 0; background: color-mix(in srgb, var(--accent) 16%, transparent); z-index: 0; }
.predict__label, .predict__pct { position: relative; z-index: 1; }
.predict__pct { font-family: var(--font-mono); color: var(--text-faint); }
.predict__state { font-size: var(--fs-xs); color: var(--text-soft); min-height: 2.4em; }
.predict__legal { display: flex; gap: .55rem; margin-top: var(--s6); padding: 1rem 1.15rem; border-radius: var(--r-md); background: color-mix(in srgb, var(--claret) 8%, transparent); font-size: var(--fs-sm); color: var(--text-soft); max-width: 78ch; }
.predict__legal .dse-icon { flex: none; margin-top: .2em; color: var(--claret); }

/* --- The auction --------------------------------------------------------- */
.lots { display: grid; gap: var(--s5); }
.lot { display: grid; grid-template-columns: minmax(0, 18rem) minmax(0, 1fr); gap: var(--s5); padding: var(--s5); border-radius: var(--r-lg); background: rgba(237,230,214,.05); border: var(--bw-hair) solid var(--line); }
.lot__art { position: relative; border-radius: var(--r-md); overflow: hidden; aspect-ratio: 4/3; }
.lot__art img { width: 100%; height: 100%; object-fit: cover; }
.lot__no { position: absolute; top: .6rem; left: .6rem; padding: .18rem .5rem; border-radius: var(--r-xs); background: rgba(12,11,9,.72); color: var(--chalk); font-family: var(--font-mono); font-size: .62rem; font-weight: 700; }
.lot__t { font-family: var(--font-display); font-size: var(--fs-m); font-weight: 700; }
.lot__d { font-size: var(--fs-sm); color: var(--text-soft); margin: .4rem 0 .9rem; max-width: 60ch; }
.lot__facts { display: flex; flex-wrap: wrap; gap: 1.5rem; margin-bottom: .9rem; }
.lot__facts dt { font-size: var(--fs-xs); text-transform: uppercase; letter-spacing: .1em; color: var(--text-faint); }
.lot__facts dd { font-family: var(--font-mono); font-weight: 700; font-size: var(--fs-sm); margin-top: .15rem; }
.lot__bid { color: var(--corn-lift); font-size: 1.15rem !important; }
.lot__history { list-style: none; margin: 0 0 1rem; padding: .6rem .8rem; border-radius: var(--r-sm); background: rgba(0,0,0,.2); display: grid; gap: .3rem; max-width: 30rem; }
.lot__history li { display: flex; gap: .75rem; font-size: var(--fs-xs); }
.lot__history b { flex: 1; font-weight: 600; }
.lot__history span { font-family: var(--font-mono); }
.lot__history i { font-style: normal; color: var(--text-faint); }
@media (max-width: 760px) { .lot { grid-template-columns: 1fr; } }

/* --- The farm stock exchange --------------------------------------------- */
.exch { border-radius: var(--r-lg); overflow: hidden; border: var(--bw-hair) solid var(--line); }
.exch__head, .exch__row { display: grid; grid-template-columns: minmax(0, 1.5fr) 7rem 7rem 6rem 6rem; gap: 1rem; align-items: center; padding: .75rem 1.1rem; }
.exch__head { background: rgba(0,0,0,.28); font-size: .62rem; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; color: var(--text-faint); }
.exch__row { border-top: var(--bw-hair) solid var(--line); text-decoration: none; color: inherit; transition: background var(--t-quick); }
.exch__row:hover { background: rgba(237,230,214,.06); color: inherit; }
.exch__name b { display: block; font-family: var(--font-display); font-size: 1.05rem; font-weight: 600; }
.exch__name i { font-style: normal; font-size: var(--fs-xs); color: var(--text-faint); }
.exch__turnover, .exch__result { font-family: var(--font-mono); font-weight: 700; font-size: var(--fs-sm); }
.exch__result.is-loss { color: var(--claret-lift, #D14346); }
.exch__chg { display: inline-flex; align-items: center; gap: .3rem; font-family: var(--font-mono); font-size: var(--fs-xs); font-weight: 700; }
.exch__chg .dse-icon { width: .85em; height: .85em; }
.exch__chg.is-up { color: #8CC46A; } .exch__chg.is-down { color: var(--claret-lift, #D14346); } .exch__chg.is-flat { color: var(--text-faint); }
.exch__spark svg { width: 100%; height: 26px; display: block; }
.exch__row .exch__spark { color: var(--corn-lift); }
@media (max-width: 900px) { .exch__head, .exch__row { grid-template-columns: minmax(0,1fr) 6rem 5rem; } .exch__turnover, .exch__spark { display: none; } }

/* --- The provenance ledger ----------------------------------------------- */
.ledger { border-radius: var(--r-lg); border: var(--bw-hair) solid var(--line); overflow: hidden; }
.ledger__id { display: flex; align-items: center; gap: .55rem; padding: .8rem 1.1rem; background: var(--surface-sunk); font-size: var(--fs-sm); }
.ledger__id span { color: var(--text-faint); }
.ledger__id b { font-family: var(--font-mono); font-weight: 700; }
.ledger__rows { list-style: none; margin: 0; padding: 0; }
.ledger__row { display: grid; grid-template-columns: 7.5rem minmax(0, 1fr) 8rem 7rem; gap: 1rem; align-items: baseline; padding: .7rem 1.1rem; border-top: var(--bw-hair) solid var(--line); }
.ledger__when { font-family: var(--font-mono); font-size: var(--fs-xs); color: var(--text-faint); }
.ledger__what b { display: block; font-size: var(--fs-sm); font-weight: 700; }
.ledger__what i { font-style: normal; font-size: var(--fs-xs); color: var(--text-soft); }
.ledger__who { font-size: var(--fs-xs); color: var(--text-faint); }
.ledger__hash { font-family: var(--font-mono); font-size: .62rem; color: var(--text-faint); overflow: hidden; text-overflow: ellipsis; }
.ledger__foot { display: flex; gap: .5rem; padding: .85rem 1.1rem; background: var(--surface-sunk); font-size: var(--fs-xs); color: var(--text-faint); }
@media (max-width: 860px) { .ledger__row { grid-template-columns: 6rem 1fr; } .ledger__who, .ledger__hash { display: none; } }

/* --- The recipe generator ------------------------------------------------ */
.recipe { display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); gap: var(--s6); align-items: start; }
.recipe__chips { display: flex; flex-wrap: wrap; gap: .4rem; margin-block: .8rem; }
.recipe__chip { cursor: pointer; }
.recipe__chip input { position: absolute; opacity: 0; width: 0; height: 0; }
.recipe__chip span {
  display: inline-flex; align-items: baseline; gap: .4rem; padding: .4rem .75rem;
  border-radius: var(--r-pill); border: var(--bw-hair) solid var(--line-strong);
  font-size: var(--fs-sm); font-weight: 600; transition: background var(--t-quick), border-color var(--t-quick);
}
.recipe__chip i { font-style: normal; font-size: .62rem; color: var(--text-faint); }
.recipe__chip input:checked + span { background: var(--accent); color: var(--accent-ink); border-color: transparent; }
.recipe__chip input:checked + span i { color: inherit; opacity: .7; }
.recipe__chip input:focus-visible + span { outline: 3px solid var(--accent); outline-offset: 2px; }
.recipe__hint { display: flex; align-items: center; gap: .4rem; font-size: var(--fs-xs); color: var(--text-faint); }
.recipe__list { list-style: none; margin: .8rem 0 0; padding: 0; display: grid; gap: .5rem; }
.recipe__meal { padding: .85rem 1rem; border-radius: var(--r-md); background: var(--surface-raised); border: var(--bw-hair) solid var(--line); }
.recipe__meal b { font-family: var(--font-display); font-size: 1.08rem; font-weight: 600; }
.recipe__meal span { display: block; font-size: var(--fs-xs); color: var(--accent-deep); margin-top: .15rem; }
.recipe__meal i { display: block; font-style: normal; font-size: var(--fs-sm); color: var(--text-soft); margin-top: .35rem; line-height: 1.5; }
.recipe__none { padding: 1.5rem; text-align: center; color: var(--text-faint); font-size: var(--fs-sm); }
@media (max-width: 860px) { .recipe { grid-template-columns: 1fr; } }

/* --- The seasonal calendar ----------------------------------------------- */
.seasoncal__scroll { overflow-x: auto; border-radius: var(--r-lg); border: var(--bw-hair) solid var(--line); }
.seasoncal__table { width: 100%; border-collapse: collapse; font-size: var(--fs-sm); min-width: 34rem; }
.seasoncal__table th, .seasoncal__table td { padding: .5rem .3rem; text-align: center; border-bottom: var(--bw-hair) solid var(--line); }
.seasoncal__table thead th { background: var(--surface-sunk); font-family: var(--font-mono); font-size: var(--fs-xs); font-weight: 700; }
.seasoncal__table thead th.is-now { background: var(--accent); color: var(--accent-ink); }
.seasoncal__table tbody th { text-align: left; padding-left: 1rem; font-weight: 600; min-width: 10rem; }
.seasoncal__table tbody th i { display: block; font-style: normal; font-size: var(--fs-xs); color: var(--text-faint); font-weight: 400; }
.seasoncal__table td { position: relative; }
.seasoncal__table td.is-on::after, .seasoncal__table td.is-best::after {
  content: ''; position: absolute; inset: 30% 12%; border-radius: 2px; background: color-mix(in srgb, var(--moss) 45%, transparent);
}
.seasoncal__table td.is-best::after { background: var(--accent); inset: 22% 10%; }
.seasoncal__table td.is-now { background: color-mix(in srgb, var(--accent) 8%, transparent); }
.seasoncal__key { display: flex; flex-wrap: wrap; gap: 1.25rem; margin-top: 1rem; font-size: var(--fs-xs); color: var(--text-faint); }
.seasoncal__key span { display: inline-flex; align-items: center; gap: .4rem; }
.seasoncal__key i { width: .85rem; height: .85rem; border-radius: 2px; display: block; }
.seasoncal__key i.is-best { background: var(--accent); }
.seasoncal__key i.is-on { background: color-mix(in srgb, var(--moss) 45%, transparent); }
.seasoncal__key i.is-now { background: color-mix(in srgb, var(--accent) 20%, transparent); }

/* --- The locator --------------------------------------------------------- */
.locator { display: grid; grid-template-columns: minmax(0, .55fr) minmax(0, 1fr); gap: var(--s6); align-items: start; }
.locator__map { border-radius: var(--r-lg); overflow: hidden; background: var(--surface-raised); border: var(--bw-hair) solid var(--line); padding: 1rem; }
.locator__map svg { width: 100%; height: auto; display: block; }
.locator__pin { transition: transform var(--t-quick) var(--ease-gate); transform-box: fill-box; transform-origin: center; }
.locator__pin.is-on { transform: scale(1.7); }
.locator__list { list-style: none; margin: 0; padding: 0; display: grid; gap: .35rem; }
.locator__list a {
  display: grid; grid-template-columns: 1fr auto; gap: .15rem 1rem; padding: .7rem .9rem;
  border-radius: var(--r-md); border: var(--bw-hair) solid var(--line); text-decoration: none; color: inherit;
  transition: border-color var(--t-quick), background var(--t-quick);
}
.locator__list li.is-on a, .locator__list a:hover { border-color: var(--accent); background: color-mix(in srgb, var(--accent) 7%, transparent); color: inherit; }
.locator__list b { font-family: var(--font-display); font-size: 1.05rem; font-weight: 600; }
.locator__list span { grid-column: 1; font-size: var(--fs-xs); color: var(--text-faint); }
.locator__list i { grid-column: 1; font-style: normal; font-size: var(--fs-sm); color: var(--text-soft); }
.locator__list em { grid-row: 1; grid-column: 2; font-style: normal; }
@media (max-width: 860px) { .locator { grid-template-columns: 1fr; } }

/* --- The register -------------------------------------------------------- */
.register { border-radius: var(--r-lg); overflow: hidden; border: var(--bw-hair) solid var(--line); }
.register__head, .register__row { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1.2fr) 6.5rem 6.5rem 6rem; gap: 1rem; align-items: center; padding: .7rem 1.1rem; }
.register__head { background: var(--surface-sunk); font-size: .62rem; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; color: var(--text-faint); }
.register__row { border-top: var(--bw-hair) solid var(--line); text-decoration: none; color: inherit; transition: background var(--t-quick); }
.register__row:hover { background: color-mix(in srgb, var(--accent) 7%, transparent); color: inherit; }
.register__who b { display: block; font-weight: 700; font-size: var(--fs-sm); }
.register__who i { font-style: normal; font-size: var(--fs-xs); color: var(--text-faint); }
.register__for { font-size: var(--fs-sm); color: var(--text-soft); }
.register__d { font-family: var(--font-mono); font-size: var(--fs-xs); color: var(--text-faint); }
.register__st { justify-self: start; font-size: .62rem; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; padding: .2rem .55rem; border-radius: var(--r-pill); }
.register__st.is-current { background: color-mix(in srgb, var(--moss) 20%, transparent); color: var(--moss); }
.register__st.is-due     { background: color-mix(in srgb, var(--corn) 28%, transparent); color: var(--corn-deep); }
.register__st.is-lapsed  { background: color-mix(in srgb, var(--claret) 16%, transparent); color: var(--claret); }
@media (max-width: 900px) { .register__head, .register__row { grid-template-columns: 1fr 6rem; } .register__for, .register__d { display: none; } }

/* --- Share cards --------------------------------------------------------- */
.sharecards { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 17rem), 1fr)); gap: var(--s5); }
.sharecard { margin: 0; display: grid; gap: .75rem; }
.sharecard__face {
  position: relative; aspect-ratio: 4/5; overflow: hidden; padding: var(--s5);
  display: flex; flex-direction: column; border-radius: var(--r-lg);
  background: var(--accent); color: var(--accent-ink); box-shadow: var(--sh-plate);
}
.sharecard__ch { font-family: var(--font-mono); font-size: .66rem; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; opacity: .8; }
.sharecard__t { font-family: var(--font-display); font-size: 1.5rem; font-weight: 700; line-height: 1.06; margin-top: .5rem; text-transform: uppercase; letter-spacing: var(--track-card); }
.sharecard__s { font-size: var(--fs-xs); opacity: .82; margin-top: .5rem; max-width: 24ch; }
.sharecard__beast { position: absolute; left: 50%; transform: translateX(-50%); bottom: 2.4rem; width: 68%; opacity: .22; }
.sharecard__mark { margin-top: auto; font-size: .58rem; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; opacity: .7; }
.sharecard figcaption { display: grid; gap: .35rem; justify-items: start; }
.sharecard figcaption b { font-size: var(--fs-xs); color: var(--accent-deep); text-transform: uppercase; letter-spacing: .1em; }
.sharecard figcaption span { font-size: var(--fs-sm); color: var(--text-soft); line-height: 1.5; }

/* --- The notification matrix --------------------------------------------- */
.notify { border-radius: var(--r-lg); overflow: hidden; border: var(--bw-hair) solid var(--line); }
.notify__head, .notify__row { display: grid; grid-template-columns: minmax(0, 1fr) repeat(3, 5.5rem); gap: 1rem; align-items: center; padding: .7rem 1.1rem; }
.notify__head { background: var(--surface-sunk); font-size: .62rem; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; color: var(--text-faint); }
.notify__ch { justify-self: center; }
.notify__row { border-top: var(--bw-hair) solid var(--line); }
.notify__what b { display: block; font-size: var(--fs-sm); font-weight: 700; }
.notify__what i { font-style: normal; font-size: var(--fs-xs); color: var(--text-faint); }
.switch { display: inline-block; cursor: pointer; }
.switch input { position: absolute; opacity: 0; width: 0; height: 0; }
.switch i { display: block; width: 2.1rem; height: 1.15rem; border-radius: var(--r-pill); background: var(--line-strong); position: relative; transition: background var(--t-quick); }
.switch i::after { content: ''; position: absolute; top: 2px; left: 2px; width: calc(1.15rem - 4px); height: calc(1.15rem - 4px); border-radius: 50%; background: var(--surface); transition: transform var(--t-quick) var(--ease-gate); }
.switch input:checked + i { background: var(--accent); }
.switch input:checked + i::after { transform: translateX(.95rem); }
.switch input:focus-visible + i { outline: 3px solid var(--accent); outline-offset: 2px; }
.notify__cap { display: grid; grid-template-columns: 1.1rem 1fr; gap: .1rem .55rem; padding: .9rem 1.1rem; background: var(--surface-sunk); }
.notify__cap .dse-icon { grid-row: span 2; margin-top: .2em; color: var(--accent-deep); }
.notify__cap b { font-size: var(--fs-sm); }
.notify__cap span { font-size: var(--fs-xs); color: var(--text-faint); }
@media (max-width: 700px) { .notify__head, .notify__row { grid-template-columns: 1fr repeat(3, 3.2rem); gap: .4rem; } }