/* =============================================================================
   ORIVANA · v9 "The Spec Sheet & The Field"
   Final design-system layer: tokens, base type, utilities and shared primitives.
   Page-specific work lives in css/pages/<page>.css and loads after this file.
   ========================================================================== */

@font-face {
  font-family: "Gambarino";
  src: url("../../v3/fonts/gambarino.woff2") format("woff2");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Switzer";
  src: url("../../v3/fonts/switzer-var.woff2") format("woff2");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Switzer";
  src: url("../../v3/fonts/switzer-var-italic.woff2") format("woff2");
  font-weight: 100 900;
  font-style: italic;
  font-display: swap;
}

/* Metric-compatible fallbacks keep the first paint close to the final layout. */
@font-face {
  font-family: "Gambarino Fallback";
  src: local("Iowan Old Style"), local("Georgia");
  size-adjust: 96%;
  ascent-override: 92%;
  descent-override: 24%;
  line-gap-override: 0%;
}
@font-face {
  font-family: "Switzer Fallback";
  src: local("Segoe UI"), local("Helvetica Neue"), local("Arial");
  size-adjust: 101%;
  ascent-override: 88%;
  descent-override: 22%;
  line-gap-override: 0%;
}

:root {
  /* colour: field */
  --paper: #F3EEE3;
  --paper-2: #EAE3D4;
  --bone: #FBF8F2;
  --ink: #16201A;
  --ink-2: #3B463F;
  --ink-3: #5E675F;
  --rule: rgba(22, 32, 26, .14);
  --rule-2: rgba(22, 32, 26, .28);

  /* colour: night */
  --night: #0F1712;
  --night-2: #16211A;
  --on-night: #F1EDE4;
  --on-night-2: rgba(241, 237, 228, .74);
  --rule-n: rgba(241, 237, 228, .14);

  /* brand */
  --green: #1A4331;
  --leaf: #88C999;
  --apricot: #FFB347;
  --apricot-d: #E0902A;
  --apricot-ink: #2A1A00;

  /* type */
  --fd: "Gambarino", "Gambarino Fallback", "Iowan Old Style", Georgia, serif;
  --f: "Switzer", "Switzer Fallback", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  --fm: ui-monospace, "SF Mono", "Cascadia Mono", Menlo, monospace;
  --t-hero: clamp(3rem, 1.15rem + 8.1vw, 9.2rem);
  --t-1: clamp(2.6rem, 1.2rem + 4.7vw, 6.4rem);
  --t-2: clamp(2.1rem, 1.15rem + 3.1vw, 4.2rem);
  --t-3: clamp(1.5rem, 1.15rem + 1.1vw, 2.4rem);
  --t-4: clamp(1.2rem, 1.1rem + .38vw, 1.5rem);
  --t-lead: clamp(1.15rem, 1.05rem + .38vw, 1.375rem);
  --t-body: clamp(1.0625rem, 1rem + .18vw, 1.1875rem);
  --t-sm: clamp(.9375rem, .91rem + .12vw, 1rem);
  --t-label: .75rem;
  --t-num: clamp(2.4rem, 1.4rem + 3vw, 5rem);

  /* legacy aliases: old selectors keep working while they are migrated */
  --t-xl: var(--t-hero);
  --t-xs: .8125rem;
  --g950: var(--night);
  --g900: var(--night);
  --g850: var(--night-2);
  --g800: var(--night-2);
  --g700: var(--green);
  --g600: var(--green);
  --g500: #3A7A5A;
  --g400: #5FA27C;
  --g300: var(--leaf);
  --g200: #BFE2C8;
  --g100: rgba(136, 201, 153, .14);
  --white: var(--bone);
  --on-dark: var(--on-night);
  --on-dark-2: var(--on-night-2);
  --on-dark-3: rgba(241, 237, 228, .5);
  --line: var(--rule);
  --line-2: var(--rule-2);
  --line-d: var(--rule-n);
  --line-d2: rgba(241, 237, 228, .28);
  --ok: #3FA66B;
  --err: #D6553E;

  /* space (8-pt) */
  --s1: 4px;
  --s2: 8px;
  --s3: 12px;
  --s4: 16px;
  --s5: 24px;
  --s6: 32px;
  --s7: 48px;
  --s8: 64px;
  --s9: 96px;
  --s10: 128px;
  --gut: clamp(16px, 1rem + 1.6vw, 44px);
  --sec: clamp(80px, 5rem + 6vw, 176px);
  --wrap: 1480px;
  --measure: 64ch;
  --hdr: 76px;

  /* radius */
  --r-s: 10px;
  --r: 18px;
  --r-l: 28px;
  --r-xs: var(--r-s);
  --r-sm: var(--r);
  --r-lg: var(--r-l);

  /* motion */
  --e-out: cubic-bezier(.16, 1, .3, 1);
  --e-io: cubic-bezier(.65, 0, .35, 1);
  --e-press: var(--e-io);
  --d-1: .25s;
  --d-2: .5s;
  --d-3: .9s;
  --d-4: 1.4s;
  --shadow-1: 0 1px 2px rgba(15, 23, 18, .06), 0 8px 24px -12px rgba(15, 23, 18, .18);
  --shadow-2: 0 2px 6px rgba(15, 23, 18, .08), 0 30px 60px -28px rgba(15, 23, 18, .4);
  --shadow-3: 0 40px 120px -40px rgba(0, 0, 0, .55);
}

html { scroll-padding-top: calc(var(--hdr) + 16px); }
body {
  font: 400 var(--t-body)/1.65 var(--f);
  color: var(--ink);
  background: var(--paper);
  letter-spacing: 0;
}

/* Readability floors. A paragraph is never smaller than body size; table
   cells, list items and descriptions never fall below the small type step. */
main p, main li, main dd, main td { font-size: max(var(--t-sm), 1em); }
main p { font-size: max(var(--t-body), 1em); }
main p.label, main p.xs { font-size: max(var(--t-sm), 1em); }
main p, main li, main dd, main td { text-wrap: pretty; }
main p { color: var(--ink-2); }
main .sec p { max-width: 64ch; }
main .on-dark p, main .on-dark li, main .on-dark dd, main .on-dark td,
main [data-tone="dark"] p, main [data-tone="dark"] li, main [data-tone="dark"] dd, main [data-tone="dark"] td {
  color: var(--on-night-2);
}

h1, h2, h3 {
  font-family: var(--fd);
  font-weight: 400;
  letter-spacing: -.025em;
  text-wrap: balance;
}
h4, h5, h6 { text-wrap: balance; }
p, li, dd, td { text-wrap: pretty; }

/* Type utilities. New work should use these names and tokens, never raw px. */
.d-xl, .d-1, .d-2, .d-3 {
  font-family: var(--fd);
  font-weight: 400;
  font-stretch: normal;
  line-height: .96;
  letter-spacing: -.025em;
  text-wrap: balance;
}
.d-xl { font-size: var(--t-hero); line-height: .9; letter-spacing: -.045em; }
.d-1 { font-size: var(--t-1); line-height: .95; letter-spacing: -.035em; }
.d-2 { font-size: var(--t-2); line-height: 1; letter-spacing: -.025em; }
.d-3 { font-size: var(--t-3); line-height: 1.1; letter-spacing: -.015em; }
.h-4 { font-family: var(--f); font-size: var(--t-4); font-weight: 600; line-height: 1.25; letter-spacing: -.01em; }
.h-5 { font-family: var(--f); font-size: 1.125rem; font-weight: 600; line-height: 1.3; letter-spacing: -.01em; }
.lead { font-family: var(--f); font-size: var(--t-lead); font-weight: 400; line-height: 1.5; letter-spacing: -.005em; color: var(--ink-2); max-width: 52ch; }
.body { font-family: var(--f); font-size: var(--t-body); font-weight: 400; line-height: 1.65; color: var(--ink-2); max-width: var(--measure); }
.sm { font-size: var(--t-sm); line-height: 1.5; }
.xs { font-size: var(--t-xs); line-height: 1.45; }
.label {
  font-size: var(--t-label);
  font-weight: 600;
  letter-spacing: .12em;
  line-height: 1.2;
  text-transform: uppercase;
  color: var(--ink-3);
}
.num { font-family: var(--fd); font-variant-numeric: tabular-nums; letter-spacing: -.02em; }
.mute { color: var(--ink-3); }
.on-dark { color: var(--on-night); }
.on-dark .lead, .on-dark .body { color: var(--on-night-2); }
.on-dark .label, .on-dark .mute { color: var(--on-night-2); }

/* Responsive image markup should not add a layout box between its frame and img. */
picture { display: contents; }

/* One shared photographic finish; the layer is non-interactive and clipped by the frame. */
.grain { position: relative; }
.grain::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 3;
  pointer-events: none;
  border-radius: inherit;
  opacity: .06;
  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='.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.8'/%3E%3C/svg%3E");
  mix-blend-mode: multiply;
}

.sec--deep, .sec--ink { background: var(--night); color: var(--on-night); }
.sec--green { background: var(--green); color: var(--on-night); }
.sec--deep, .sec--ink, .sec--green { --line: var(--rule-n); --line-2: rgba(241, 237, 228, .28); }

/* --------------------------------------------------------------------------
   Reading tools
   Each primitive is opt-in markup, so pages can use one tool without paying
   for the rest. The JS initialiser is shared in main.js.
   ----------------------------------------------------------------------- */

/* Highlighter: an apricot sweep that draws when the phrase enters view. */
.hl,
mark.hl {
  color: inherit;
  background-color: transparent;
  background-image: linear-gradient(transparent 58%, rgba(255, 179, 71, .56) 58%, rgba(255, 179, 71, .56) 92%, transparent 92%);
  background-repeat: no-repeat;
  background-position: left bottom;
  background-size: var(--hl, 0%) 100%;
  -webkit-box-decoration-break: clone;
  box-decoration-break: clone;
  padding-inline: .06em;
  margin-inline: -.04em;
  transition: background-size 1.1s var(--e-out);
}
.hl.is-in { --hl: 100%; }

/* Sidenote: desktop gutter note; on narrow screens the superscript marker
   expands the note inline. */
.essay { position: relative; max-width: 64ch; }
.sn-ref {
  position: relative;
  display: none;
  appearance: none;
  border: 0;
  background: transparent;
  padding: 0 .16em;
  color: var(--green);
  font: 600 .7em/1 var(--f);
  vertical-align: super;
  cursor: pointer;
  touch-action: manipulation;
}
.sn-ref::after { content: ""; position: absolute; inset: -16px; border-radius: 50%; }
.sn-ref:focus-visible { outline: 2px solid var(--apricot); outline-offset: 3px; border-radius: 2px; }
.sidenote {
  position: absolute;
  left: calc(100% + clamp(1.4rem, 3.5vw, 3.75rem));
  top: 0;
  width: min(18rem, 24vw);
  padding-left: 1rem;
  border-left: 1px solid var(--rule-2);
  color: var(--ink-2);
  font-size: var(--t-sm);
  line-height: 1.5;
  text-wrap: pretty;
}
.sidenote > :first-child { margin-top: 0; }
.sidenote > :last-child { margin-bottom: 0; }

/* Pull quote: one sentence, set large enough to break the reading column. */
.pull {
  max-width: 36ch;
  margin: clamp(2.5rem, 7vw, 6rem) 0;
  padding: .2rem 0 .25rem clamp(1.1rem, 2.4vw, 1.8rem);
  border-left: 2px solid var(--apricot);
  hanging-punctuation: first last;
  text-wrap: balance;
}
.pull > p, .pull > blockquote > p, .pull blockquote {
  margin: 0;
  max-width: 36ch;
  color: var(--ink);
  font-family: var(--fd);
  font-size: var(--t-3);
  font-weight: 400;
  line-height: 1.1;
  letter-spacing: -.015em;
}
.pull cite {
  display: block;
  margin-top: .9rem;
  color: var(--ink-2);
  font: 500 var(--t-sm)/1.45 var(--f);
  font-style: normal;
}
.on-dark .pull, [data-tone="dark"] .pull { border-color: var(--apricot); }
.on-dark .pull > p, .on-dark .pull > blockquote > p, .on-dark .pull blockquote,
[data-tone="dark"] .pull > p, [data-tone="dark"] .pull > blockquote > p, [data-tone="dark"] .pull blockquote { color: var(--on-night); }
.on-dark .pull cite, [data-tone="dark"] .pull cite { color: var(--on-night-2); }

/* Drop cap: three lines of Gambarino in the brand green. */
.dropcap::first-letter {
  float: left;
  margin: .03em .1em 0 0;
  color: var(--green);
  font-family: var(--fd);
  font-size: 5.1em;
  font-weight: 400;
  line-height: .72;
}

/* Statistics: the number is the component's headline. */
.stat {
  display: grid;
  align-content: start;
  gap: .28rem;
  padding-top: 1rem;
  border-top: 1px solid var(--rule-2);
}
.stat b, .stat__n {
  color: var(--ink);
  font-family: var(--fd);
  font-size: var(--t-num);
  font-weight: 400;
  line-height: .9;
  letter-spacing: -.03em;
  font-variant-numeric: tabular-nums;
}
.stat > span {
  max-width: 26ch;
  color: var(--ink-2);
  font-size: var(--t-sm);
  line-height: 1.45;
}
.on-dark .stat, [data-tone="dark"] .stat { border-color: var(--rule-n); }
.on-dark .stat b, .on-dark .stat__n, [data-tone="dark"] .stat b, [data-tone="dark"] .stat__n { color: var(--on-night); }
.on-dark .stat > span, [data-tone="dark"] .stat > span { color: var(--on-night-2); }

/* On-this-page nav. Desktop uses the left gutter; mobile becomes a pill that
   opens a sheet. It is only rendered by JS when four or more sections opt in. */
.toc {
  position: fixed;
  left: max(8px, calc((100vw - var(--wrap)) / 2 + 8px));
  top: 50%;
  z-index: 80;
  transform: translateY(-50%);
  font-family: var(--f);
}
.toc__btn {
  display: none;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  width: 100%;
  min-height: 44px;
  padding: 10px 14px;
  border: 1px solid var(--rule-n);
  border-radius: 999px;
  background: var(--night);
  color: var(--on-night);
  box-shadow: var(--shadow-2);
  cursor: pointer;
  text-align: left;
}
.toc__btn:focus-visible { outline: 2px solid var(--apricot); outline-offset: 3px; }
.toc__btn span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.toc__btn i {
  flex: none;
  width: 8px;
  height: 8px;
  border-right: 1.5px solid currentColor;
  border-bottom: 1.5px solid currentColor;
  transform: rotate(45deg) translateY(-2px);
  transition: transform .25s var(--e-out);
}
.toc.is-open .toc__btn i { transform: rotate(225deg) translateY(-2px); }
.toc__list {
  display: grid;
  gap: 7px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.toc__list a {
  position: relative;
  display: flex;
  align-items: center;
  gap: 8px;
  min-height: 14px;
  color: var(--ink-3);
  font-size: .65rem;
  font-weight: 600;
  letter-spacing: .1em;
  line-height: 1;
  text-decoration: none;
  text-transform: uppercase;
}
.toc__dot {
  width: 15px;
  height: 2px;
  flex: none;
  background: currentColor;
  opacity: .45;
  transition: width .3s var(--e-out), background .3s, opacity .3s;
}
.toc__label {
  position: absolute;
  left: 26px;
  z-index: 1;
  max-width: min(16rem, 28vw);
  padding: 6px 9px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--bone);
  color: var(--ink);
  font-size: .72rem;
  font-weight: 500;
  letter-spacing: 0;
  line-height: 1.2;
  text-transform: none;
  white-space: nowrap;
  opacity: 0;
  pointer-events: none;
  transform: translateX(-4px);
  transition: opacity .2s, transform .2s;
}
.toc__list a:hover, .toc__list a:focus-visible, .toc__list a[aria-current="location"] { color: var(--green); }
.toc__list a:hover .toc__label, .toc__list a:focus-visible .toc__label { opacity: 1; transform: none; }
.toc__list a[aria-current="location"] .toc__dot { width: 26px; background: var(--apricot); opacity: 1; }
.toc__list a:focus-visible { outline: 2px solid var(--apricot); outline-offset: 3px; border-radius: 3px; }

@media (min-width: 1680px) {
  .toc__label {
    position: static;
    max-width: none;
    padding: 0;
    border: 0;
    background: none;
    opacity: 1;
    transform: none;
  }
}

/* Glossary tooltip: one shared card for mouse, keyboard and touch. */
[data-gloss] {
  color: inherit;
  text-decoration-line: underline;
  text-decoration-style: dotted;
  text-decoration-thickness: 1px;
  text-underline-offset: .18em;
  cursor: help;
}
[data-gloss].gl {
  appearance: none;
  margin: 0;
  padding: 0;
  border: 0;
  background: transparent;
  font: inherit;
  text-align: inherit;
}
[data-gloss]:focus-visible { outline: 2px solid var(--apricot); outline-offset: 3px; border-radius: 2px; }
.gl-card {
  position: fixed;
  z-index: 240;
  width: min(20rem, calc(100vw - 24px));
  padding: .8rem .95rem;
  border: 1px solid var(--rule-n);
  border-radius: 12px;
  background: var(--night);
  color: var(--on-night-2);
  box-shadow: var(--shadow-2);
  font: 400 var(--t-sm)/1.45 var(--f);
  text-wrap: pretty;
  pointer-events: none;
}
.gl-card[hidden] { display: none; }

[data-dim] .sw > span { transition: opacity .12s linear; }

/* --------------------------------------------------------------------------
   T04 · Shared components and section archetypes
   These are opt-in classes. Page CSS may place them but should not restyle
   their internal mechanics. Every interactive part has a keyboard path and a
   reduced-motion state.
   ----------------------------------------------------------------------- */

/* Buttons: usage = btn($href,$label,'btn--lg') for the primary action,
   btn(...,'btn--line') for secondary, and <a class="btn btn--link"> for a
   text-only action. The helper signature stays unchanged. */
.btn {
  --bg: var(--apricot);
  --fg: var(--apricot-ink);
  --bd: transparent;
  --fill: var(--apricot-d);
  --fill-fg: var(--apricot-ink);
  height: 52px;
  min-height: 52px;
  padding: 0 16px 0 22px;
  gap: 12px;
  border-radius: 999px;
  background: var(--bg);
  color: var(--fg);
  border: 1px solid var(--bd);
}
.btn--sm, .btn--lg { height: 52px; min-height: 52px; }
.btn--sm { padding: 0 14px 0 18px; font-size: .9rem; gap: 10px; }
.btn--lg { padding: 0 18px 0 24px; font-size: 1rem; }
.btn::before { background: var(--fill); transform: translateY(101%); }
.btn:hover::before, .btn:focus-visible::before { transform: translateY(0); }
.btn:hover, .btn:focus-visible { color: var(--fill-fg); }
.btn:active { transform: scale(.98); }
.btn:focus-visible { outline: 2px solid var(--green); outline-offset: 3px; }
.on-dark .btn:focus-visible, .ft .btn:focus-visible, .menu .btn:focus-visible,
[data-tone="dark"] .btn:focus-visible { outline-color: var(--apricot); }
.btn__i { width: 28px; height: 28px; border-radius: 0; background: none; color: inherit; }
.btn:hover .btn__i svg { animation: none; transform: translateX(4px); }
.btn:active .btn__i svg { transform: translateX(2px); }
.btn--line, .btn--secondary {
  --bg: transparent;
  --fg: var(--ink);
  --bd: var(--rule-2);
  --fill: var(--ink);
  --fill-fg: var(--paper);
}
.on-dark .btn--line, .on-dark .btn--secondary,
.btn--line.on-dark, .btn--secondary.on-dark {
  --fg: var(--on-night);
  --bd: var(--rule-n);
  --fill: var(--on-night);
  --fill-fg: var(--night);
}
.btn--link {
  height: auto;
  min-height: 44px;
  padding: 0;
  gap: 8px;
  border: 0;
  border-radius: 0;
  background: none;
  color: var(--ink);
  font-weight: 600;
  overflow: visible;
  isolation: auto;
}
.btn--link::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 4px;
  z-index: 0;
  height: 1px;
  background: currentColor;
  transform: scaleX(0);
  transform-origin: left;
  transition: transform .3s var(--e-out), background .3s;
}
.btn--link:hover, .btn--link:focus-visible { color: var(--green); }
.btn--link:hover::before, .btn--link:focus-visible::before { transform: scaleX(1); }
.btn--link .btn__i { width: auto; height: auto; }
.on-dark .btn--link, .btn--link.on-dark { color: var(--on-night); }
.on-dark .btn--link:hover, .on-dark .btn--link:focus-visible,
.btn--link.on-dark:hover, .btn--link.on-dark:focus-visible { color: var(--apricot); }

/* Ledger: usage = <dl class="ledger"> with .ledger__row > dt + i + dd.
   Add a .ledger__more button with aria-controls when a row has detail. */
.ledger { margin: 0; border-top: 1px solid var(--rule-2); }
.ledger__row {
  display: grid;
  grid-template-columns: minmax(9rem, .7fr) minmax(2rem, 1fr) auto;
  align-items: baseline;
  gap: 14px;
  padding: 14px 0 13px;
  border-bottom: 1px solid var(--rule);
}
.ledger__row dt {
  color: var(--ink-3);
  font: 600 var(--t-label)/1.2 var(--f);
  letter-spacing: .12em;
  text-transform: uppercase;
}
.ledger__row > i {
  height: 1px;
  transform: translateY(-.25em);
  background-image: linear-gradient(90deg, var(--rule-2) 50%, transparent 50%);
  background-size: 6px 1px;
  background-repeat: repeat-x;
}
.ledger__row dd {
  margin: 0;
  color: var(--ink);
  font-family: var(--fd);
  font-size: clamp(1.25rem, 1.06rem + .75vw, 1.9rem);
  line-height: 1;
  letter-spacing: -.02em;
  font-variant-numeric: tabular-nums;
  text-align: right;
}
.ledger__more {
  grid-column: 3;
  justify-self: end;
  appearance: none;
  margin-top: 4px;
  padding: 6px 0;
  border: 0;
  background: none;
  color: var(--ink-3);
  font: 600 var(--t-label)/1.2 var(--f);
  letter-spacing: .1em;
  text-transform: uppercase;
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: .25em;
  cursor: pointer;
}
.ledger__more:hover { color: var(--ink); }
.ledger__more:focus-visible { outline: 2px solid var(--green); outline-offset: 3px; border-radius: 2px; }
.ledger__detail {
  grid-column: 2 / -1;
  max-width: 62ch;
  padding: 2px 0 6px;
  color: var(--ink-2);
  font-size: var(--t-sm);
  line-height: 1.55;
}
.ledger__detail[hidden] { display: none; }
.on-dark .ledger { border-color: var(--rule-n); }
.on-dark .ledger__row { border-color: var(--rule-n); }
.on-dark .ledger__row dt, .on-dark .ledger__more { color: var(--on-night-2); }
.on-dark .ledger__row dd { color: var(--on-night); }
.on-dark .ledger__detail { color: var(--on-night-2); }
.on-dark .ledger__more:focus-visible { outline-color: var(--apricot); }
@media (max-width: 700px) {
  .ledger__row {
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 6px 12px;
    align-items: start;
    padding-block: 15px;
  }
  .ledger__row dt { grid-area: 1 / 1; }
  .ledger__row > i { display: none; }
  .ledger__row dd { grid-area: 2 / 1 / 3 / -1; text-align: left; overflow-wrap: anywhere; }
  .ledger__more { grid-area: 1 / 2; margin-top: 0; }
  .ledger__detail { grid-area: 3 / 1 / 4 / -1; }
}

/* Figure: usage = <figure class="fig"><div class="fig__media">image</div>
   <figcaption>Fig. NN — Place, what</figcaption></figure>. */
.fig { margin: 0; }
.fig__media {
  position: relative;
  aspect-ratio: 16 / 10;
  overflow: hidden;
  border-radius: var(--r-l);
  background: var(--paper-2);
  clip-path: inset(0 round var(--r-l));
  transition: clip-path var(--d-3) var(--e-out);
}
.fig__media img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transform: scale(1);
  transition: transform var(--d-3) var(--e-out);
}
.js .fig:not(.is-in) .fig__media { clip-path: inset(12% 12% 12% 12% round var(--r-l)); }
.js .fig:not(.is-in) .fig__media img { transform: scale(1.08); }
.fig figcaption {
  display: flex;
  flex-wrap: wrap;
  gap: 5px 12px;
  margin-top: 12px;
  padding-top: 12px;
  border-top: 1px solid var(--rule);
  color: var(--ink-2);
  font-size: var(--t-sm);
  line-height: 1.45;
}
.fig figcaption b, .fig figcaption span { color: var(--ink); font-weight: 600; }
.fig:focus-within .fig__media { outline: 2px solid var(--green); outline-offset: 3px; }
.on-dark .fig figcaption { border-color: var(--rule-n); color: var(--on-night-2); }
.on-dark .fig figcaption b, .on-dark .fig figcaption span { color: var(--on-night); }
.on-dark .fig:focus-within .fig__media { outline-color: var(--apricot); }

/* Rail: usage = <div class="rail" data-rail aria-roledescription="carousel">
   <div class="rail__track">.rail__item…</div></div>. JS adds arrows, progress,
   item labels and keyboard support; no autoplay. */
.rail__head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 24px;
  margin-bottom: 18px;
}
.rail__nav { display: flex; gap: 8px; }
.rail__btn {
  display: grid;
  place-items: center;
  width: 48px;
  height: 48px;
  padding: 0;
  border: 1px solid var(--rule-2);
  border-radius: 50%;
  background: transparent;
  color: var(--ink);
  cursor: pointer;
  transition: background .25s, color .25s, opacity .25s;
}
.rail__btn:hover { background: var(--ink); color: var(--paper); }
.rail__btn:focus-visible { outline: 2px solid var(--green); outline-offset: 3px; }
.rail__btn:disabled { opacity: .32; cursor: default; }
.rail__btn svg { width: 18px; height: 18px; }
.rail__prev svg { transform: rotate(180deg); }
.rail__track {
  display: flex;
  gap: clamp(14px, 2vw, 24px);
  overflow-x: auto;
  overscroll-behavior-inline: contain;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
  padding: 4px 0 12px;
  touch-action: pan-x pan-y;
  mask-image: linear-gradient(90deg, transparent 0, #000 20px, #000 calc(100% - 20px), transparent 100%);
}
.rail__track::-webkit-scrollbar { display: none; }
.rail__track:focus-visible { outline: 2px solid var(--green); outline-offset: 4px; border-radius: var(--r-s); }
.rail__item {
  flex: 0 0 clamp(260px, 28vw, 420px);
  scroll-snap-align: start;
  min-width: 0;
}
.rail__item > img, .rail__item .rail__media img {
  display: block;
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  border-radius: var(--r);
  background: var(--paper-2);
}
.rail__item h3 { margin-top: 14px; font-size: var(--t-4); line-height: 1.15; }
.rail__item p { margin-top: 5px; }
.rail__foot { display: flex; align-items: center; gap: 14px; margin-top: 12px; }
.rail__progress { flex: 1; height: 2px; overflow: hidden; background: var(--rule); }
.rail__progress i {
  display: block;
  height: 100%;
  background: var(--green);
  transform: scaleX(var(--rail-progress, 0));
  transform-origin: left;
  transition: transform .18s linear;
}
.rail__count { flex: none; color: var(--ink-3); font: 500 var(--t-label)/1 var(--f); letter-spacing: .08em; }
.on-dark .rail__btn { color: var(--on-night); border-color: var(--rule-n); }
.on-dark .rail__btn:hover { background: var(--on-night); color: var(--night); }
.on-dark .rail__progress { background: var(--rule-n); }
.on-dark .rail__progress i { background: var(--apricot); }
.on-dark .rail__count { color: var(--on-night-2); }
.on-dark .rail__btn:focus-visible, .on-dark .rail__track:focus-visible { outline-color: var(--apricot); }
@media (max-width: 900px) {
  .rail__nav { display: none; }
  .rail__track { margin-inline: calc(var(--gut) * -1); padding-inline: var(--gut); mask-image: none; }
  .rail__item { flex-basis: 82vw; }
}

/* Index: usage = <ol class="idx"> rows containing <a class="idx__a">,
   .idx__head (number + title), .idx__d (description + arrow), a 56px
   .idx__thumb for mobile and .idx__preview for the pointer preview. */
.idx { margin: 0; padding: 0; list-style: none; border-top: 1px solid var(--rule-2); }
.idx__i { position: relative; border-bottom: 1px solid var(--rule); }
.idx__a {
  position: relative;
  display: grid;
  grid-template-columns: clamp(56px, 5vw, 80px) minmax(0, 1fr);
  grid-template-areas: "head head" ". d";
  column-gap: 24px;
  row-gap: 9px;
  align-content: center;
  min-height: 220px;
  padding: clamp(24px, 3vw, 40px) 0;
  color: inherit;
  text-decoration: none;
  isolation: isolate;
}
.idx__head {
  grid-area: head;
  display: grid;
  grid-template-columns: clamp(56px, 5vw, 80px) minmax(0, 1fr);
  gap: 24px;
  align-items: baseline;
}
.idx__k { color: var(--ink-3); font: 500 var(--t-label)/1.2 var(--f); letter-spacing: .1em; }
.idx__t {
  margin: 0;
  font-family: var(--fd);
  font-size: clamp(1.65rem, 1.1rem + 2.1vw, 3.4rem);
  font-weight: 400;
  line-height: 1;
  letter-spacing: -.04em;
  transition: transform .45s var(--e-out), color .3s;
}
.idx__d {
  grid-area: d;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  color: var(--ink-2);
}
.idx__d > span:first-child { max-width: 56ch; }
.idx__go { flex: none; display: grid; place-items: center; width: 40px; height: 40px; color: var(--ink); transition: transform .45s var(--e-out), color .3s; }
.idx__go svg { width: 22px; height: 22px; }
.idx__a:hover .idx__t, .idx__a:focus-visible .idx__t { transform: translateX(8px); color: var(--green); }
.idx__a:hover .idx__go, .idx__a:focus-visible .idx__go { transform: rotate(-45deg); color: var(--green); }
.idx__a:focus-visible { outline: 2px solid var(--green); outline-offset: -2px; }
.idx__thumb { display: none; }
.idx__preview {
  position: absolute;
  left: 0;
  top: 0;
  z-index: 4;
  display: block;
  width: 280px;
  height: 200px;
  overflow: hidden;
  border-radius: var(--r);
  background: var(--paper-2);
  box-shadow: var(--shadow-2);
  pointer-events: none;
  opacity: 0;
  scale: .92;
  transform: translate3d(var(--ix, 50%), var(--iy, 50%), 0) translate(-50%, -50%);
  transition: opacity .25s, scale .4s var(--e-out);
}
.idx__preview.is-on { opacity: 1; scale: 1; will-change: transform; }
.idx__preview img { display: block; width: 100%; height: 100%; object-fit: cover; }
.on-dark .idx { border-color: var(--rule-n); }
.on-dark .idx__i { border-color: var(--rule-n); }
.on-dark .idx__k { color: var(--on-night-2); }
.on-dark .idx__t { color: var(--on-night); }
.on-dark .idx__d { color: var(--on-night-2); }
.on-dark .idx__go { color: var(--on-night); }
.on-dark .idx__a:focus-visible { outline-color: var(--apricot); }
@media (max-width: 900px) {
  .idx__a {
    grid-template-columns: 56px minmax(0, 1fr);
    grid-template-areas: "thumb head" "thumb d";
    column-gap: 14px;
    row-gap: 8px;
    min-height: 0;
    padding: 20px 0;
  }
  .idx__thumb {
    display: block;
    grid-area: thumb;
    align-self: start;
    width: 56px;
    height: 56px;
    object-fit: cover;
    border-radius: var(--r-s);
    background: var(--paper-2);
  }
  .idx__head { grid-area: head; grid-template-columns: auto minmax(0, 1fr); gap: 10px; }
  .idx__t { font-size: clamp(1.45rem, 1.15rem + .9vw, 1.85rem); line-height: 1.05; overflow-wrap: anywhere; }
  .idx__a:hover .idx__t, .idx__a:focus-visible .idx__t { transform: none; }
  .idx__d { grid-area: d; align-items: flex-start; }
  .idx__go { width: 32px; height: 32px; }
  .idx__preview { display: none; }
}

/* Sequence: usage = <section data-seq> with .seq__media images marked
   data-seq-img and .seq__step rows marked data-seq-step. JS swaps the sticky
   media and fills the rail from scroll progress; there is no pin. */
.seq__grid {
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr);
  gap: clamp(40px, 7vw, 120px);
  align-items: start;
}
.seq__media {
  position: sticky;
  top: calc(var(--hdr) + 24px);
  height: min(72vh, 640px);
  min-height: 420px;
  overflow: hidden;
  border-radius: var(--r-l);
  background: var(--night-2);
}
.seq__imgs { display: grid; height: 100%; }
/* ph_img() wraps images in <picture>: the wrapper is the grid item, so it takes the stacking slot. */
.seq__imgs > picture { grid-area: 1 / 1; display: block; height: 100%; min-height: 0; }
.seq__img {
  grid-area: 1 / 1;
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0;
  clip-path: inset(10% 10% 10% 10% round var(--r-l));
  transform: scale(1.04);
  transition: opacity var(--d-2), clip-path var(--d-3) var(--e-out), transform var(--d-3) var(--e-out);
}
.seq__img.is-on { opacity: 1; clip-path: inset(0 round var(--r-l)); transform: none; }
.seq__steps {
  position: relative;
  display: grid;
  gap: clamp(48px, 8vw, 96px);
  margin: 0;
  padding: 0 0 0 54px;
  list-style: none;
}
.seq__steps::before, .seq__steps::after {
  content: "";
  position: absolute;
  left: 15px;
  top: 14px;
  bottom: 14px;
  width: 1px;
}
.seq__steps::before { background: var(--rule-2); }
.seq__steps::after {
  background: var(--green);
  transform: scaleY(var(--seq-fill, 0));
  transform-origin: top;
  transition: transform .18s linear;
}
.seq__step { position: relative; display: grid; grid-template-columns: minmax(0, 1fr); gap: 10px; align-content: start; min-width: 0; min-height: 30vh; }
.seq__step::before {
  content: "";
  position: absolute;
  left: -46px;
  top: .45em;
  width: 9px;
  height: 9px;
  border: 1px solid var(--rule-2);
  border-radius: 50%;
  background: var(--paper);
  transition: background .3s, border-color .3s;
}
.seq__step.is-active::before { background: var(--apricot); border-color: var(--apricot); }
.seq__n { color: var(--ink-3); font: 600 var(--t-label)/1 var(--f); letter-spacing: .12em; }
.seq__step h3 { margin: 0; font-family: var(--fd); font-size: var(--t-3); line-height: 1.05; }
.seq__step p { margin: 0; }
.seq__inline { display: none; }
.seq:focus-within .seq__media { outline: 2px solid var(--green); outline-offset: 3px; }
.on-dark .seq__steps::before { background: var(--rule-n); }
.on-dark .seq__steps::after { background: var(--apricot); }
.on-dark .seq__step::before { background: var(--night); border-color: var(--rule-n); }
.on-dark .seq__step.is-active::before { background: var(--apricot); border-color: var(--apricot); }
.on-dark .seq__n { color: var(--on-night-2); }
.on-dark .seq__step h3 { color: var(--on-night); }
.on-dark .seq:focus-within .seq__media { outline-color: var(--apricot); }
@media (max-width: 900px) {
  .seq__grid { grid-template-columns: minmax(0, 1fr); gap: 32px; }
  .seq__media { display: none; }
  .seq__steps { gap: 56px; padding-left: 40px; }
  .seq__steps::before, .seq__steps::after { left: 10px; }
  .seq__step { min-height: 0; gap: 14px; }
  .seq__step::before { left: -35px; }
  .seq__step > picture { display: block; min-width: 0; }
  .seq__inline {
    display: block;
    width: calc(100% + 2 * var(--gut) + 40px);
    max-width: none;
    margin-left: calc(-1 * (var(--gut) + 40px));
    margin-right: 0;
    aspect-ratio: 16 / 10;
    object-fit: cover;
    background: var(--paper-2);
  }
}

/* Essay: usage = .essay for the 64ch reading column, .sidenote for gutter
   notes, and .plate--bleed as the full-bleed break. */
.essay { margin-inline: auto; }
.essay__col { max-width: 64ch; }

/* Plate: usage = <figure class="plate plate--bleed"> with .plate__stage and
   a figcaption below it. The modifier protects Home's .plate machine cards. */
.plate.plate--bleed {
  display: block;
  width: 100vw;
  max-width: none;
  height: auto;
  margin: clamp(56px, 9vw, 128px) calc(50% - 50vw);
  border: 0;
  border-radius: 0;
  background: none;
  overflow: visible;
}
.plate--bleed .plate__stage {
  height: clamp(520px, 88vh, 960px);
  overflow: hidden;
  background: var(--paper-2);
}
.plate--bleed .plate__stage img { display: block; width: 100%; height: 100%; object-fit: cover; }
.plate--bleed figcaption {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 6px 16px;
  max-width: var(--wrap);
  margin: 0 auto;
  padding: 14px var(--gut);
  border-bottom: 1px solid var(--rule);
  color: var(--ink-2);
  font-size: var(--t-sm);
  line-height: 1.45;
}
.plate--bleed figcaption b { color: var(--ink); font-weight: 600; }
.plate--bleed:focus-within .plate__stage { outline: 2px solid var(--green); outline-offset: -2px; }
.on-dark .plate--bleed figcaption { border-color: var(--rule-n); color: var(--on-night-2); }
.on-dark .plate--bleed figcaption b { color: var(--on-night); }
.on-dark .plate--bleed:focus-within .plate__stage { outline-color: var(--apricot); }
@media (max-width: 900px) {
  .plate--bleed .plate__stage { height: clamp(420px, 72vh, 680px); }
}

/* Statistics: usage = <div class="stats"> containing .stat blocks. Keep the
   final value in the HTML; data-count is progressive enhancement only. */
.stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: clamp(20px, 3vw, 48px); }
.stat__n { display: flex; align-items: flex-start; gap: .08em; margin: 0; }
.stat .stat__u { font-family: var(--f); font-size: .38em; font-weight: 600; line-height: 1.1; letter-spacing: 0; color: var(--ink-2); }
.stat__d { margin: 0; max-width: 26ch; font-size: var(--t-sm); line-height: 1.45; }
.stat__src { margin: .35rem 0 0; color: var(--ink-3); font: 500 var(--t-sm)/1.35 var(--f); letter-spacing: .02em; }
.on-dark .stat__u, .on-dark .stat__d, .on-dark .stat__src { color: var(--on-night-2); }

/* Certificate badge: usage = <a class="badge-cert" href="/buyer-room"> with
   issuer, licence number, scope and expiry/status. */
.badge-cert {
  display: grid;
  gap: 10px;
  align-content: start;
  padding: clamp(20px, 2.5vw, 28px);
  border: 1px solid var(--rule-2);
  border-radius: var(--r);
  background: var(--bone);
  color: inherit;
  text-decoration: none;
  transition: border-color .25s, transform .35s var(--e-out);
}
.badge-cert:hover { border-color: var(--ink); transform: translateY(-2px); }
.badge-cert:focus-visible { outline: 2px solid var(--green); outline-offset: 3px; }
.badge-cert__issuer { color: var(--ink-3); font: 600 var(--t-label)/1.2 var(--f); letter-spacing: .1em; text-transform: uppercase; }
.badge-cert__name { font-family: var(--fd); font-size: var(--t-3); line-height: 1.05; }
.badge-cert dl { display: grid; gap: 7px; margin: 4px 0 0; padding-top: 12px; border-top: 1px solid var(--rule); }
.badge-cert dl > div { display: grid; grid-template-columns: 5.5rem minmax(0, 1fr); gap: 12px; }
.badge-cert dt { color: var(--ink-3); font-size: var(--t-label); font-weight: 600; letter-spacing: .06em; text-transform: uppercase; }
.badge-cert dd { margin: 0; color: var(--ink-2); font-size: var(--t-sm); line-height: 1.4; overflow-wrap: anywhere; }
.badge-cert dd.num { color: var(--ink); font-family: var(--fm); }
.on-dark .badge-cert { background: var(--night-2); border-color: var(--rule-n); }
.on-dark .badge-cert__issuer, .on-dark .badge-cert dt { color: var(--on-night-2); }
.on-dark .badge-cert__name, .on-dark .badge-cert dd { color: var(--on-night); }
.on-dark .badge-cert dl { border-color: var(--rule-n); }
.on-dark .badge-cert:focus-visible { outline-color: var(--apricot); }

/* Call: usage = the final page CTA. One sentence, one primary button, one
   secondary link and a human detail line. */
.call { padding-block: var(--sec); }
.call__in { display: grid; justify-items: center; gap: 22px; max-width: 880px; margin-inline: auto; text-align: center; }
.call h2 { max-width: 20ch; margin: 0; font-family: var(--fd); font-size: var(--t-2); line-height: 1; }
.call__act { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 12px 24px; }
.call__human { margin: 0; color: var(--ink-3); font-size: var(--t-sm); }
.call:focus-within .call__in { outline: 2px solid var(--green); outline-offset: 16px; border-radius: 4px; }
.on-dark .call__human { color: var(--on-night-2); }
.on-dark .call:focus-within .call__in { outline-color: var(--apricot); }

/* Mobile action bar: usage = one .mbar per page, rendered by the footer.
   JS shows it after the hero, hides it on fast downward scroll, and keeps it
   away from forms, the cookie banner and the mobile TOC. */
.mbar { display: none; }
@media (max-width: 1199.98px) {
  /* Space for the bar lives inside the footer, so the night field runs to the bottom edge. */
  body.has-mbar .ft { padding-bottom: calc(64px + env(safe-area-inset-bottom)); }
  .mbar {
    position: fixed;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 90;
    display: grid;
    grid-template-columns: minmax(0, 1fr) 52px 58px;
    gap: 8px;
    align-items: center;
    min-height: 64px;
    padding: 8px var(--gut) calc(8px + env(safe-area-inset-bottom));
    border-top: 1px solid var(--rule-2);
    background: var(--paper);
    box-shadow: 0 -12px 30px -24px rgba(15, 23, 18, .5);
    transform: translateY(calc(100% + 12px));
    visibility: hidden;
    pointer-events: none;
    transition: transform .32s var(--e-out), visibility .32s;
  }
  .mbar.is-on { transform: none; visibility: visible; pointer-events: auto; }
  .mbar.is-tucked { transform: translateY(calc(100% + 12px)); }
  .mbar--no-wa { grid-template-columns: minmax(0, 1fr) 58px; }
  .mbar__cta {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    min-width: 0;
    height: 48px;
    padding: 0 16px;
    border-radius: 999px;
    background: var(--apricot);
    color: var(--apricot-ink);
    font-weight: 600;
    font-size: .92rem;
    text-decoration: none;
  }
  .mbar__cta span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .mbar__cta svg { flex: none; width: 18px; height: 18px; }
  .mbar__wa, .mbar__menu {
    display: grid;
    place-items: center;
    width: 100%;
    height: 48px;
    padding: 0;
    border: 1px solid var(--rule-2);
    border-radius: 999px;
    background: transparent;
    color: var(--ink);
    font: 600 .85rem/1 var(--f);
    text-decoration: none;
    cursor: pointer;
  }
  .mbar__wa svg { width: 22px; height: 22px; }
  .mbar__cta:focus-visible, .mbar__wa:focus-visible, .mbar__menu:focus-visible { outline: 2px solid var(--green); outline-offset: 2px; }
  body.cookie-on .mbar { transform: translateY(calc(100% + 12px)); visibility: hidden; pointer-events: none; }
  body.mbar-on .toc { bottom: calc(82px + env(safe-area-inset-bottom)); }
}

@media (prefers-reduced-motion: reduce) {
  .btn, .btn::before, .btn__i, .btn__i svg,
  .fig__media, .fig__media img,
  .rail__progress i, .idx__t, .idx__go, .idx__preview,
  .seq__img, .seq__step::before, .seq__steps::after,
  .badge-cert, .mbar { transition: none; }
  .btn:hover .btn__i svg { transform: none; }
  .rail__track { scroll-behavior: auto; }
  .js .fig:not(.is-in) .fig__media { clip-path: inset(0 round var(--r-l)); }
  .js .fig:not(.is-in) .fig__media img { transform: none; }
  .idx__preview { scale: 1; }
}

@media (max-width: 900px) {
  :root { --hdr: 64px; }
}

@media (max-width: 1180px) {
  .essay { max-width: 64ch; }
  .sn-ref { display: inline-grid; place-items: center; }
  .sidenote {
    position: static;
    display: none;
    width: auto;
    max-width: 52ch;
    margin: .75rem 0 1.25rem;
    padding: .65rem 0 0 1rem;
  }
  .sidenote.is-open { display: block; }
}

@media (max-width: 900px) {
  body.has-toc { padding-bottom: calc(76px + env(safe-area-inset-bottom)); }
  .toc {
    left: 50%;
    top: auto;
    bottom: calc(var(--toc-bottom, 14px) + env(safe-area-inset-bottom));
    width: min(calc(100vw - 32px), 420px);
    transform: translateX(-50%);
  }
  .toc__btn { display: flex; }
  .toc__list {
    position: absolute;
    right: 0;
    bottom: calc(100% + 8px);
    left: 0;
    max-height: min(60vh, 440px);
    overflow: auto;
    padding: 10px;
    border: 1px solid var(--line);
    border-radius: 18px;
    background: var(--bone);
    box-shadow: var(--shadow-2);
    opacity: 0;
    visibility: hidden;
    transform: translateY(8px);
    transition: opacity .25s var(--e-out), transform .25s var(--e-out), visibility .25s;
  }
  .toc.is-open .toc__list { opacity: 1; visibility: visible; transform: none; }
  .toc__list a {
    min-height: 44px;
    padding: 0 8px;
    border-radius: 8px;
    font-size: .9rem;
    letter-spacing: 0;
    text-transform: none;
  }
  .toc__list a:hover, .toc__list a:focus-visible { background: var(--paper-2); }
  .toc__label {
    position: static;
    max-width: none;
    padding: 0;
    border: 0;
    background: none;
    color: inherit;
    opacity: 1;
    transform: none;
    white-space: normal;
    font-size: .9rem;
    line-height: 1.3;
  }
  .toc__dot { width: 12px; }
  .toc__list a[aria-current="location"] .toc__dot { width: 20px; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .hl { transition: none; --hl: 100%; }
  .toc__list { transition: none; }
}

/* =============================================================================
   T05 · Header and menu
   Usage: global chrome from views/layouts/header.php.
   - The header is transparent over the hero, then turns into a 92% paper/night
     bar with a 10px saturate blur and a 1px rule after 40px of scroll.
   - Four inline links show at >=1200px; below that the CTA moves to .mbar.
   - The menu is a paper sheet. Its panel wipes down in .5s; page links then
     mask-reveal with a .04s stagger. Mobile closes on a downward swipe.
   ========================================================================== */

.hdr {
  --hdr-bg: color-mix(in srgb, var(--night) 92%, transparent);
  --hdr-line: var(--rule-n);
}
.hdr[data-tone="light"] {
  --hdr-bg: color-mix(in srgb, var(--paper) 92%, transparent);
  --hdr-line: var(--rule);
}
.hdr::before {
  background: var(--hdr-bg);
  -webkit-backdrop-filter: saturate(1.2) blur(10px);
  backdrop-filter: saturate(1.2) blur(10px);
  border-bottom: 1px solid var(--hdr-line);
}
.hdr-progress { display: none; }
.hdr.has-toc .hdr-progress { display: block; }

@media (max-width: 1199.98px) {
  .nav { display: none; }
  .hdr__cta { display: none; }
  .hdr__act { margin-left: auto; }
}
@media (max-width: 900px) {
  :root { --hdr: 64px; }
  .hdr { height: var(--hdr); }
}

.hdr__logo picture { display: block; }
.hdr__logo .logo-d-pic { position: absolute; inset: 0; }
.hdr__logo .logo-d-pic img { width: 100%; height: auto; }
html.menu-open .hdr { --hdr-fg: var(--ink); }
html.menu-open .hdr::before {
  opacity: 1;
  background: var(--paper);
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
  border-bottom-color: transparent;
}
html.menu-open .hdr .logo-l { opacity: 0; }
html.menu-open .hdr .logo-d { opacity: 1; }

/* The paper panel itself. */
.menu {
  display: flex;
  flex-direction: column;
  background: var(--paper);
  color: var(--ink);
  clip-path: inset(0 0 100% 0);
  visibility: hidden;
  transition: clip-path .5s var(--e-io), visibility 0s .5s;
}
html.menu-open .menu {
  clip-path: inset(0 0 0 0);
  visibility: visible;
  transition: clip-path .5s var(--e-io), visibility 0s;
}

.menu .menu__grid {
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr);
  gap: clamp(32px, 6vw, 110px);
  align-items: start;
  padding-top: clamp(10px, 2vh, 30px);
}
.menu__left { min-width: 0; }
.menu .menu__main { display: block; }
.menu .menu__main a {
  display: grid;
  grid-template-columns: 3.4ch minmax(0, 1fr) auto;
  align-items: baseline;
  gap: 14px;
  padding: 7px 0 9px;
  border-bottom: 1px solid var(--rule);
  font-family: var(--fd);
  font-size: var(--t-2);
  font-weight: 400;
  font-stretch: normal;
  letter-spacing: -.01em;
  line-height: 1;
  color: var(--ink);
  transition: color .3s;
}
.menu .menu__main a:hover,
.menu .menu__main a:focus-visible,
.menu .menu__main a[aria-current="page"] { color: var(--green); }
.menu .menu__main a:hover .menu__ar { transform: translateX(4px); }
.menu__no {
  font-family: var(--f);
  font-size: .72rem;
  font-weight: 600;
  letter-spacing: .1em;
  color: var(--ink-3);
  opacity: 0;
  transform: translateY(8px);
  transition: opacity .4s var(--e-io), transform .5s var(--e-io);
}
.menu__ar {
  align-self: center;
  opacity: 0;
  transform: translateX(-8px);
  transition: opacity .4s var(--e-io), transform .5s var(--e-io);
}
.menu__ar svg { width: 18px; height: 18px; }
html.menu-open .menu__no,
html.menu-open .menu__ar {
  opacity: 1;
  transform: none;
  transition-delay: calc(.34s + var(--i, 0) * .04s);
}
.menu__t { display: block; overflow: hidden; }
.menu__tt { display: block; transform: translateY(115%); transition: transform .7s var(--e-io); }
html.menu-open .menu__tt { transform: none; transition-delay: calc(.3s + var(--i, 0) * .04s); }
.menu .menu__main a small {
  display: block;
  margin-top: 6px;
  font-family: var(--f);
  font-size: .82rem;
  font-weight: 500;
  font-stretch: normal;
  letter-spacing: 0;
  line-height: 1.35;
  color: var(--ink-3);
  opacity: 1;
  transform: none;
}

/* Utility groups stay in the left column, compact and quiet. */
.menu__sub {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(20px, 3vw, 48px);
  margin-top: clamp(20px, 3.5vh, 40px);
  padding-top: 16px;
  border-top: 1px solid var(--rule);
}
.menu .menu__col h3 { margin-bottom: 8px; color: var(--ink-3); }
.menu .menu__col a {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 7px 0;
  border-bottom: 1px solid var(--rule);
  font-size: .9rem;
  font-weight: 500;
  color: var(--ink-2);
  transition: color .25s, padding-left .3s var(--e-out);
}
.menu .menu__col a:hover { color: var(--green); padding-left: 6px; }
.menu .menu__col a svg { width: 14px; height: 14px; opacity: .5; }

/* Right column: the hover photo and the live contact block. */
.menu__aside { display: grid; gap: clamp(20px, 3vh, 32px); min-width: 0; }
.menu .menu__peek { aspect-ratio: 4 / 3; border-radius: var(--r-l); }
.menu .menu__peek::after {
  content: "";
  position: absolute;
  inset: auto 0 0;
  height: 46%;
  background: linear-gradient(transparent, rgba(15, 23, 18, .72));
  pointer-events: none;
}
.menu .menu__peek figcaption { z-index: 1; color: var(--paper); }
.menu__contact {
  display: grid;
  gap: 9px;
  padding-top: 16px;
  border-top: 1px solid var(--rule);
}
.menu__contact .label { margin: 0 0 4px; color: var(--ink-3); }
.menu__mail {
  width: fit-content;
  padding-bottom: 3px;
  border-bottom: 1px solid var(--rule-2);
  font-family: var(--fd);
  font-size: var(--t-3);
  line-height: 1.1;
  color: var(--ink);
  overflow-wrap: anywhere;
}
.menu__mail:hover { color: var(--green); border-color: var(--green); }
.menu__crows { display: flex; flex-wrap: wrap; gap: 6px 20px; font-size: .95rem; color: var(--ink-2); }
.menu__crows a:hover { color: var(--green); }
.menu__addr,
.menu__hours { margin: 2px 0 0; max-width: 36ch; font-size: .86rem; line-height: 1.5; color: var(--ink-3); }
.menu__hours { font-family: var(--fm); font-size: .76rem; letter-spacing: .01em; }

.menu__footwrap { margin-top: auto; padding-top: 22px; }
.menu .menu__foot { border-top: 1px solid var(--rule); color: var(--ink-3); }
.menu .snd { color: var(--ink); }
.menu__ambient { display: flex; flex-direction: column; gap: 6px; }
.menu__ambient .label { margin: 0; font-size: .75rem; letter-spacing: .08em; text-transform: uppercase; color: var(--ink-3); }
.menu .snd--pill {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  height: 40px;
  width: fit-content;
  padding: 0 16px;
  border-radius: 999px;
  background: var(--paper-2, #EFECE6);
  border: 1px solid var(--rule-2, rgba(15, 23, 18, 0.14));
  color: var(--ink);
  font-family: var(--f);
  font-size: .85rem;
  font-weight: 600;
  cursor: pointer;
  transition: all .25s var(--e-out);
}
.menu .snd--pill:hover {
  background: var(--white, #fff);
  border-color: var(--apricot, #FFB347);
  color: var(--ink);
  transform: translateY(-1px);
}
.menu .snd--pill[aria-pressed="true"],
.menu .snd--foot[aria-pressed="true"] {
  background: rgba(255, 179, 71, .16);
  border-color: var(--apricot, #FFB347);
  color: var(--ink);
}
.menu .snd--pill[aria-pressed="true"] .snd__bars i,
.menu .snd--foot[aria-pressed="true"] .snd__bars i {
  background: var(--apricot, #FFB347);
}
.menu .label { color: var(--ink-3); }
.menu a:focus-visible,
.menu button:focus-visible { outline: 2px solid var(--green); outline-offset: 3px; }

.menu [data-mi] {
  opacity: 0;
  transform: translateY(16px);
  transition: opacity .45s var(--e-io), transform .6s var(--e-io);
}
html.menu-open .menu [data-mi] {
  opacity: 1;
  transform: none;
  transition-delay: calc(.34s + var(--i, 0) * .04s);
}

@media (max-width: 1000px) {
  .menu .menu__grid { grid-template-columns: minmax(0, 1fr); gap: 0; }
  .menu .menu__peek { display: none; }
  .menu__aside { display: block; }
  .menu__contact { margin-top: 26px; }
  .menu__sub { grid-template-columns: minmax(0, 1fr); gap: 24px; }
  .menu .menu__col a,
  .menu__mail,
  .menu__crows a { min-height: 48px; }
  .menu__mail,
  .menu__crows a { display: inline-flex; align-items: center; }
  .menu__mail { font-size: clamp(1.05rem, 4.9vw, var(--t-3)); }
  .menu .menu__main a {
    grid-template-columns: 2.6ch minmax(0, 1fr) auto;
    font-size: clamp(1.9rem, 1.3rem + 4.6vw, 2.5rem);
  }
}

@media (prefers-reduced-motion: reduce) {
  .menu,
  html.menu-open .menu { transition: none; }
  .menu [data-mi],
  html.menu-open .menu [data-mi] { opacity: 1; transform: none; transition: none; }
  .menu__tt,
  html.menu-open .menu__tt { transform: none; transition: none; }
  .menu__no,
  .menu__ar,
  html.menu-open .menu__no,
  html.menu-open .menu__ar { opacity: 1; transform: none; transition: none; }
}
/* The action bar yields to the open menu sheet. */
html.menu-open .mbar { transform: translateY(calc(100% + 12px)); visibility: hidden; pointer-events: none; }

/* =============================================================================
   FOOTER: the back cover. Night field, one Call, a quiet conveyor of crops,
   the full link index, a ledger of plant facts and a cropped wordmark.
   Markup: views/layouts/footer.php. Every link is CMS-driven; keep them all.
   ========================================================================== */
.ft { position: relative; overflow: hidden; background: var(--night); color: var(--on-night); }
.ft a { color: inherit; text-decoration: none; }

/* Call: the visit */
.ft__cta { display: grid; grid-template-columns: minmax(0, 1fr); gap: clamp(32px, 5vw, 96px); align-items: center; padding-block: var(--sec) clamp(56px, 6vw, 96px); }
.ft__cta-l { display: grid; gap: clamp(20px, 2.4vw, 30px); justify-items: start; max-width: 760px; }
.ft__eye { display: inline-flex; align-items: center; gap: 12px; margin: 0; color: var(--leaf); }
.ft__eye i { width: 28px; height: 1px; background: currentColor; }
.ft__h { margin: 0; max-width: 15ch; font-family: var(--fd); font-weight: 400; font-size: var(--t-1); line-height: .96; letter-spacing: -.035em; color: var(--on-night); text-wrap: balance; }
.ft__h em { font-style: normal; color: var(--leaf); }
/* On night the highlighter is a low stroke, so light type never sits on apricot. */
.ft .hl { background-image: linear-gradient(transparent 84%, rgba(255, 179, 71, .9) 84%, rgba(255, 179, 71, .9) 92%, transparent 92%); padding-inline: 0; margin-inline: 0; }
.ft__lede { margin: 0; max-width: 46ch; font-size: var(--t-lead); line-height: 1.55; color: var(--on-night-2); }
.ft__acts { display: flex; flex-wrap: wrap; align-items: center; gap: 14px 28px; }
.ft__acts .ulink { color: var(--on-night); }
.ft__human { margin: 0; font-size: var(--t-sm); color: var(--on-night-2); font-variant-numeric: tabular-nums; }

.visit { position: relative; height: clamp(320px, 32vw, 460px); cursor: pointer; outline: none; -webkit-tap-highlight-color: transparent; }
.visit__c { position: absolute; left: 50%; top: 50%; width: min(64%, 330px); aspect-ratio: 4 / 5; margin: 0; padding: 10px 10px 0; background: var(--bone); color: var(--ink); border-radius: 4px; box-shadow: 0 30px 60px -24px rgba(0, 0, 0, .7), 0 2px 4px rgba(0, 0, 0, .3); transform: translate(calc(-50% + var(--x, 0%)), calc(-50% + var(--y, 0%))) rotate(var(--r, 0deg)); transition: transform .8s var(--e-out); }
.visit__c picture, .visit__c img { display: block; width: 100%; height: calc(100% - 44px); object-fit: cover; border-radius: 2px; }
.visit__c picture img { height: 100%; }
.visit__c figcaption { display: flex; justify-content: space-between; gap: 10px; align-items: baseline; padding: 10px 2px 0; font-size: .875rem; line-height: 1.2; }
.visit__c figcaption b { font-family: var(--fd); font-weight: 400; font-size: 1.25rem; font-variant-numeric: tabular-nums; }
.visit__c:nth-child(1) { --r: -9deg; --x: -16%; --y: 4%; z-index: 1; }
.visit__c:nth-child(2) { --r: 5deg; --x: 14%; --y: -3%; z-index: 2; }
.visit__c:nth-child(3) { --r: -1.5deg; z-index: 3; }
.visit:hover .visit__c:nth-child(1), .visit:focus-visible .visit__c:nth-child(1) { --r: -14deg; --x: -56%; --y: 7%; }
.visit:hover .visit__c:nth-child(2), .visit:focus-visible .visit__c:nth-child(2) { --r: 11deg; --x: 52%; --y: -4%; }
.visit:hover .visit__c:nth-child(3), .visit:focus-visible .visit__c:nth-child(3) { --r: 0deg; --y: -4%; }
.visit:focus-visible { outline: 2px solid var(--apricot); outline-offset: 8px; border-radius: var(--r); }
.visit__hint { position: absolute; left: 0; right: 0; bottom: -10px; margin: 0; text-align: center; font-size: .8125rem; color: var(--on-night-2); opacity: 0; transition: opacity .4s; }
.visit:hover .visit__hint, .visit:focus-visible .visit__hint { opacity: 1; }
@media (hover: none) { .visit__hint { opacity: 1; } }

/* The conveyor: crops ride a slow belt. It pauses off-screen and on hover. */
.belt { position: relative; height: 196px; overflow: hidden; border-block: 1px solid var(--rule-n); }
.belt__track { position: absolute; left: 0; bottom: 30px; z-index: 1; display: flex; align-items: end; gap: clamp(40px, 5vw, 96px); width: max-content; padding-left: 40px; animation: ft-belt 70s linear infinite; }
.belt__i { display: grid; justify-items: center; gap: 12px; margin: 0; }
.belt__i img { height: 104px; width: auto; max-width: 170px; object-fit: contain; filter: drop-shadow(0 16px 14px rgba(0, 0, 0, .5)); }
.belt__i figcaption { font-family: var(--fd); font-size: 1.0625rem; color: var(--on-night-2); white-space: nowrap; }
.belt__rail { position: absolute; left: 0; right: 0; bottom: 58px; height: 8px; border-top: 1px solid var(--rule-n); background: repeating-linear-gradient(90deg, rgba(241, 237, 228, .12) 0 2px, transparent 2px 26px); animation: ft-rail 1.6s linear infinite; }
.belt:hover .belt__track, .belt:hover .belt__rail, .belt.is-off .belt__track, .belt.is-off .belt__rail { animation-play-state: paused; }
@keyframes ft-belt { to { transform: translateX(-50%); } }
@keyframes ft-rail { to { background-position: -26px 0; } }

/* Index: brand + reach | link columns | newsletter */
.ft__grid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gut); row-gap: clamp(40px, 4vw, 64px); padding-block: clamp(64px, 6vw, 104px) clamp(40px, 4vw, 64px); }
.ft__brand { grid-column: 1 / span 4; grid-row: 1 / span 2; display: grid; align-content: start; gap: 24px; }
.ft__logo img { width: 172px; height: auto; }
.ft__blurb { margin: 0; max-width: 36ch; font-size: var(--t-sm); line-height: 1.6; color: var(--on-night-2); }
.ft__reach { margin: 0; border-top: 1px solid var(--rule-n); }
.ft__reach > div { display: grid; grid-template-columns: minmax(0, 1fr); gap: 4px; padding: 13px 0; border-bottom: 1px solid var(--rule-n); }
.ft__reach dt { font-size: .75rem; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: var(--on-night-2); }
.ft__reach dd { margin: 0; min-width: 0; }
.ft__reach a { display: inline-block; font-size: 1rem; color: var(--on-night); overflow-wrap: anywhere; background: linear-gradient(currentColor, currentColor) 0 100% / 0 1px no-repeat; transition: background-size .45s var(--e-out), color .25s; }
.ft__reach a:hover, .ft__reach a:focus-visible { background-size: 100% 1px; color: var(--apricot); }
.ft__reach .ft__mail { font-family: var(--fd); font-size: clamp(1.15rem, 1rem + .4vw, 1.4rem); letter-spacing: -.01em; }
.ft__btns { display: flex; flex-wrap: wrap; gap: 10px; }

.ft__nav { grid-column: 6 / -1; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); column-gap: var(--gut); }
.ft__col details > summary { list-style: none; display: flex; align-items: center; justify-content: space-between; gap: 12px; cursor: default; }
.ft__col details > summary::-webkit-details-marker { display: none; }
.ft__col details > summary:focus-visible { outline: 2px solid var(--apricot); outline-offset: 4px; }
/* v4 forces every h2 to the display face with !important; the index labels are Switzer. Drop this override when that v4 rule is retired (T22). */
.ft__col h2 { margin: 0 0 18px; font-family: var(--f) !important; font-size: .75rem; font-weight: 600 !important; line-height: 1.2; letter-spacing: .12em; text-transform: uppercase; color: var(--leaf); }
.ft__tw { display: none; }
.ft__col ul { margin: 0; padding: 0; list-style: none; }
.ft__col li + li { margin-top: 2px; }
.ft__col a, .ft__col button { display: inline-block; padding: 5px 0; font: 400 1rem/1.4 var(--f); color: var(--on-night-2); text-align: left; background: none; border: 0; cursor: pointer; transition: color .25s, transform .4s var(--e-out); }
.ft__col a:hover, .ft__col button:hover, .ft__col a:focus-visible, .ft__col button:focus-visible { color: var(--on-night); transform: translateX(4px); }
.ft__col a[aria-current="page"] { color: var(--on-night); }

.ft__news { grid-column: 6 / -1; display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); column-gap: var(--gut); align-items: end; padding-top: clamp(28px, 3vw, 40px); border-top: 1px solid var(--rule-n); }
.ft__news h2 { grid-column: 1; margin: 0 0 8px; font-family: var(--fd); font-weight: 400; font-size: var(--t-3); line-height: 1.05; letter-spacing: -.015em; color: var(--on-night); }
.ft__news p { grid-column: 1; margin: 0; max-width: 40ch; font-size: var(--t-sm); color: var(--on-night-2); }
.ft__news form { grid-column: 2; grid-row: 1 / span 2; align-self: end; }
.news__f { display: flex; align-items: center; gap: 8px; height: 56px; padding: 4px 4px 4px 20px; border: 1px solid rgba(241, 237, 228, .22); border-radius: 999px; background: rgba(241, 237, 228, .04); transition: border-color .3s, background-color .3s; }
.news__f:focus-within { border-color: var(--apricot); background: rgba(241, 237, 228, .07); }
.news__f input { flex: 1; min-width: 0; height: 100%; border: 0; background: none; color: var(--on-night); font: 400 1rem var(--f); outline: none; }
.news__f input::placeholder { color: rgba(241, 237, 228, .55); }
.news__f button { display: inline-flex; align-items: center; gap: 10px; height: 46px; padding: 0 18px 0 20px; border: 0; border-radius: 999px; background: var(--apricot); color: var(--apricot-ink); font: 600 .9375rem var(--f); white-space: nowrap; cursor: pointer; transition: background-color .25s, transform .2s; }
.news__f button:hover { background: #FFC06A; }
.news__f button:active { transform: scale(.98); }
.news__f button:focus-visible { outline: 2px solid var(--on-night); outline-offset: 2px; }
.news__f button svg { width: 15px; height: 15px; transition: transform .4s var(--e-out); }
.news__f button:hover svg { transform: translateX(3px); }
.news__f button.is-busy { opacity: .6; pointer-events: none; }
.news__m { min-height: 22px; margin-top: 10px; padding-left: 20px; font-size: .9375rem; }
.news__m.ok { color: var(--leaf); }
.news__m.err { color: #FF9F88; }

/* Ledger of plant facts */
.ft__fac { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--gut); margin: 0; padding-block: 28px; border-top: 1px solid var(--rule-n); }
.ft__fac dt { margin-bottom: 8px; font-size: .75rem; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: var(--leaf); }
.ft__fac dd { margin: 0; font-size: var(--t-sm); line-height: 1.6; color: var(--on-night-2); }
.ft__fac .num { color: var(--on-night); font-family: var(--f); font-variant-numeric: tabular-nums; letter-spacing: .02em; }

/* Bottom line */
.ft__bot { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 14px 32px; align-items: center; padding-block: 24px 28px; border-top: 1px solid var(--rule-n); font-size: .9375rem; color: var(--on-night-2); }
.ft__certs { grid-column: 1 / -1; display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 6px; padding: 0; list-style: none; }
.ft__certs li { padding: 6px 12px; border: 1px solid var(--rule-n); border-radius: 999px; font-size: .8125rem; line-height: 1.2; color: var(--on-night); }
.ft__legal { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 20px; }
.ft__legal a { padding-block: 4px; transition: color .25s; }
.ft__legal a:hover, .ft__legal a:focus-visible { color: var(--on-night); }
.ft__made { margin: 0; font-variant-numeric: tabular-nums; white-space: nowrap; }
.ft__made time { color: var(--on-night); }

/* The cropped wordmark: type, not decoration. Static and very quiet. */
.ft__mark { margin: 0 0 -.24em; padding-inline: var(--gut); font-family: "Montserrat", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif; font-weight: 400; font-size: clamp(6rem, 1rem + 22vw, 24rem); line-height: .8; letter-spacing: -.055em; text-align: center; white-space: nowrap; color: rgba(241, 237, 228, .07); pointer-events: none; user-select: none; }

@media (max-width: 1099.98px) {
  .ft__brand { grid-column: 1 / -1; grid-row: auto; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); column-gap: var(--gut); }
  .ft__logo, .ft__blurb, .ft__btns { grid-column: 1; }
  .ft__reach { grid-column: 2; grid-row: 1 / span 3; align-self: start; }
  .ft__nav, .ft__news { grid-column: 1 / -1; }
}
@media (max-width: 899.98px) {
  .ft__cta { grid-template-columns: minmax(0, 1fr); padding-block: clamp(72px, 16vw, 112px) 48px; }
  .visit { height: 380px; }
  .belt { height: 164px; }
  .belt__i img { height: 80px; max-width: 132px; }
  .belt__track { bottom: 24px; }
  .belt__rail { bottom: 48px; }
  .ft__grid { row-gap: 44px; padding-top: 56px; }
  .ft__brand { grid-template-columns: minmax(0, 1fr); }
  .ft__reach { grid-column: 1; grid-row: auto; }
  .ft__reach a { font-size: 1.0625rem; padding-block: 4px; }
  .ft__nav { grid-template-columns: minmax(0, 1fr); border-top: 1px solid var(--rule-n); }
  .ft__col { border-bottom: 1px solid var(--rule-n); }
  .ft__col details > summary { min-height: 60px; cursor: pointer; }
  .ft__col h2 { margin: 0; font-size: .8125rem; }
  .ft__tw { display: block; position: relative; width: 14px; height: 14px; flex: none; }
  .ft__tw::before, .ft__tw::after { content: ""; position: absolute; left: 0; top: 50%; width: 14px; height: 1.5px; margin-top: -.75px; background: var(--on-night); transition: transform .4s var(--e-out); }
  .ft__tw::after { transform: rotate(90deg); }
  .ft__col details[open] .ft__tw::after { transform: rotate(0deg); }
  .ft__col ul { padding-bottom: 18px; }
  .ft__col a, .ft__col button { padding: 10px 0; font-size: 1.0625rem; }
  .ft__news { grid-template-columns: minmax(0, 1fr); row-gap: 8px; border-top: 0; padding-top: 0; }
  .ft__news form { grid-column: 1; grid-row: auto; margin-top: 14px; }
  .ft__fac { grid-template-columns: minmax(0, 1fr); gap: 22px; }
  .ft__bot { grid-template-columns: minmax(0, 1fr); }
  .ft__made { white-space: normal; }
  .ft__mark { font-size: 31vw; margin-bottom: -.2em; }
}
@media (max-width: 420px) {
  .news__f { padding-left: 16px; }
  .news__f button span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  .news__f button { width: 46px; padding: 0; justify-content: center; }
}
@media (prefers-reduced-motion: reduce) {
  .belt__track, .belt__rail { animation: none; }
  .visit__c, .ft__col a, .ft__col button, .ft__tw::after { transition: none; }
}

/* =============================================================================
   LOADER "Roast": first visit per session only (html.preload is set inline in
   header.php from sessionStorage). A kernel heats on a dial, pops, and the
   screen irises open. runLoader() in main.js drives every variable below.
   ========================================================================== */
.loader { position: fixed; inset: 0; z-index: 200; display: none; place-items: center; overflow: hidden; background: var(--paper); color: var(--ink); cursor: pointer; }
html.preload .loader { display: grid; }
.loader__mark { position: absolute; left: var(--gut); top: clamp(22px, 4vh, 40px); display: flex; margin: 0; overflow: hidden; font-family: var(--fd); font-size: clamp(1.8rem, 1.2rem + 1.6vw, 2.8rem); letter-spacing: -.03em; line-height: 1.1; }
.loader__mark span { display: inline-block; transform: translateY(var(--ly, 110%)); }
.loader__est { position: absolute; right: var(--gut); top: clamp(30px, 4.6vh, 48px); margin: 0; font-size: .75rem; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: var(--ink-3); }

.loader__dish { position: relative; display: grid; place-items: center; width: clamp(240px, 42vmin, 440px); aspect-ratio: 1; }
.loader__dial { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.loader__dial .tk { stroke: rgba(22, 32, 26, .22); stroke-width: 1.4; stroke-linecap: round; transition: stroke .3s; }
.loader__dial .tk.on { stroke: var(--green); }
.loader__dial .tk.major { stroke-width: 2.2; }
.loader__dial .arc { fill: none; stroke: var(--apricot); stroke-width: 3; stroke-linecap: round; transform: rotate(-90deg); transform-origin: 50% 50%; }
.loader__plate { position: absolute; inset: 16%; border-radius: 50%; background: radial-gradient(circle at 50% 40%, #FFF 0%, #F7F2E8 55%, #E8E1D2 100%); box-shadow: inset 0 -10px 30px rgba(22, 32, 26, .08), 0 30px 60px -30px rgba(22, 32, 26, .35); }
.loader__kernel { position: relative; width: 56%; height: auto; aspect-ratio: 440 / 455; object-fit: contain; filter: drop-shadow(0 24px 26px rgba(22, 32, 26, .32)); transform: scale(var(--ks, .7)) rotate(var(--kr, 0deg)); will-change: transform; }
.loader__burst { position: absolute; inset: 0; pointer-events: none; }
.loader__burst img { position: absolute; left: 50%; top: 50%; width: clamp(40px, 6vmin, 70px); margin: calc(clamp(40px, 6vmin, 70px) / -2); filter: drop-shadow(0 12px 14px rgba(22, 32, 26, .3)); }

.loader__foot { position: absolute; left: var(--gut); right: var(--gut); bottom: clamp(20px, 4vh, 40px); display: flex; justify-content: space-between; align-items: flex-end; gap: 20px; pointer-events: none; }
.loader__w { margin: 0; font-family: var(--fd); font-size: clamp(1.4rem, 1rem + 1.4vw, 2.4rem); line-height: 1; color: var(--ink); }
.loader__n { display: flex; align-items: baseline; gap: .2rem; margin: 0; font-family: var(--fd); font-weight: 400; font-size: clamp(3.4rem, 2rem + 5vw, 7.4rem); line-height: .85; letter-spacing: -.04em; color: var(--ink); font-variant-numeric: tabular-nums; }
.loader__n small { margin-left: .4rem; font-family: var(--f); font-size: .8125rem; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: var(--ink-3); }
@media (max-width: 599.98px) {
  .loader__w { font-size: 1.25rem; max-width: 12ch; }
  .loader__est { display: none; }
}

/* =============================================================================
   CURTAIN: page-to-page transition. A paper panel rises over the old page with
   the destination's name; the new page opens it again (initTransitions).
   ========================================================================== */
.curtain { position: fixed; inset: 0; z-index: 190; pointer-events: none; visibility: hidden; }
.curtain__p { position: absolute; inset: 0; display: grid; place-content: center; justify-items: center; gap: 18px; padding: var(--gut); background: var(--paper); border-top: 1px solid var(--rule-2); transform: translateY(100%); }
.curtain__eye { margin: 0; font-size: .75rem; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: var(--ink-3); }
.curtain__p b { max-width: 16ch; font-family: var(--fd); font-weight: 400; font-size: var(--t-2); line-height: 1; letter-spacing: -.03em; text-align: center; color: var(--ink); text-wrap: balance; }
.curtain__bar { position: absolute; left: 0; right: 0; bottom: 0; height: 3px; background: var(--apricot); transform: scaleX(0); transform-origin: left center; }
html.curtain-in .curtain { visibility: visible; }
html.curtain-in .curtain__p { transform: none; }
html.curtain-in .curtain__bar { transform: scaleX(.85); }

/* Drag and inspect surfaces use the system cursor (the custom cursor is retired). */
[data-cursor] { cursor: grab; }
[data-cursor]:active { cursor: grabbing; }
[data-loupe] { cursor: zoom-in; }

/* =============================================================================
   FOLIO: the inner-page hero (views/partials/page_hero.php, initFolio in main.js).
   An oversized serif title with one round photo seal set inline, a short intro
   beside a spec sheet with dotted leaders, and a photograph that opens to full
   width on scroll. The few !important flags below beat the legacy v4 rule that
   forces every h1 to fixed metrics; drop them when that rule is retired (T22).
   ========================================================================== */
.fo { position: relative; isolation: isolate; overflow: hidden; background: var(--paper); color: var(--ink); }
.fo::before { content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none; opacity: .5; background: radial-gradient(40% 50% at 92% 8%, rgba(255, 179, 71, .18), transparent 70%), radial-gradient(35% 45% at 4% 40%, rgba(136, 201, 153, .16), transparent 70%); }
.fo__in { padding-top: calc(var(--hdr) + clamp(20px, 3.4vh, 40px)); }

.fo__top { display: flex; justify-content: space-between; align-items: center; gap: 1rem; padding-bottom: clamp(18px, 3vh, 34px); font-size: .75rem; font-weight: 600; line-height: 1; letter-spacing: .14em; text-transform: uppercase; color: var(--ink-3); }
.fo__crumb { display: flex; align-items: center; gap: .8rem; min-width: 0; }
.fo__crumb a { color: inherit; text-decoration: none; transition: color .3s; }
.fo__crumb a:hover { color: var(--ink); }
.fo__crumb i { flex: none; width: 34px; height: 1px; background: currentColor; opacity: .5; }
.fo__crumb span { color: var(--ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.fo__time { display: flex; flex: none; align-items: center; gap: .6rem; margin: 0; }
.fo__time b { width: 7px; height: 7px; border-radius: 50%; background: var(--g500); box-shadow: 0 0 0 0 rgba(58, 122, 90, .5); animation: fo-pulse 2.4s infinite; }
.fo__time time { color: var(--ink); font-variant-numeric: tabular-nums; }
@keyframes fo-pulse { 70% { box-shadow: 0 0 0 9px rgba(58, 122, 90, 0); } 100% { box-shadow: 0 0 0 0 rgba(58, 122, 90, 0); } }

.fo__title { margin: 0; max-width: 16ch; color: var(--ink); text-wrap: balance; font-size: var(--t-hero) !important; line-height: .92 !important; letter-spacing: -.045em !important; }
.fo .fo__title em, .fo .fo__title em * { font-style: normal !important; color: var(--green) !important; }
.fo .fo__title em { background: linear-gradient(transparent 72%, rgba(255, 179, 71, .55) 72%, rgba(255, 179, 71, .55) 90%, transparent 90%) no-repeat 0 0 / var(--hl, 0%) 100%; -webkit-box-decoration-break: clone; box-decoration-break: clone; transition: background-size 1.2s var(--e-out) .9s; }
.fo.is-in .fo__title em { --hl: 100%; }
/* The seal is glued to its neighbours, so it never starts or ends a line. */
.fo__glue { white-space: nowrap; }
.fo__seal { position: relative; display: inline-block; vertical-align: -.06em; width: .82em; height: .82em; margin: 0 .04em; overflow: hidden; border-radius: 50%; box-shadow: 0 0 0 .045em var(--paper), 0 0 0 .07em rgba(22, 32, 26, .18), 0 18px 34px -16px rgba(22, 32, 26, .55); transform: rotate(-8deg); transition: transform .8s var(--e-out); }
.fo__seal img { position: absolute; inset: -8%; width: 116%; height: 116%; object-fit: cover; animation: fo-seal 16s ease-in-out infinite alternate; }
.fo__title:hover .fo__seal { transform: rotate(6deg) scale(1.08); }
@keyframes fo-seal { from { transform: scale(1) translate(-3%, -2%); } to { transform: scale(1.12) translate(3%, 2%); } }

.fo__row { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gut); align-items: end; margin-top: clamp(26px, 4.4vh, 52px); padding-bottom: clamp(30px, 5vh, 60px); }
.fo__intro { grid-column: 1 / span 6; }
.fo__lede { margin: 0; max-width: 46ch; font-size: var(--t-lead); line-height: 1.55; color: var(--ink-2); }
.fo__ctas { display: flex; flex-wrap: wrap; align-items: center; gap: 14px 30px; margin-top: clamp(22px, 3vh, 32px); }

.fo__spec { grid-column: 8 / -1; margin: 0; border-top: 1px solid var(--ink); }
.fo__specrow { display: flex; align-items: baseline; gap: 14px; padding: 13px 0 12px; border-bottom: 1px solid var(--rule); }
.fo__specrow dt { flex: none; font-size: .75rem; font-weight: 600; line-height: 1.2; letter-spacing: .12em; text-transform: uppercase; color: var(--ink-3); }
.fo__specrow i { flex: 1; height: 1px; transform: translateY(-.25em); background-image: linear-gradient(90deg, rgba(22, 32, 26, .3) 50%, transparent 50%); background-size: 6px 1px; }
.fo__specrow dd { flex: none; margin: 0; font-family: var(--fd); font-size: clamp(1.3rem, 1.05rem + .7vw, 1.9rem); line-height: 1; letter-spacing: -.02em; color: var(--ink); font-variant-numeric: tabular-nums; }

.fo__media { position: relative; margin: 0; padding: 0 var(--gut) clamp(18px, 3vw, 40px); }
.fo__frame { position: relative; height: clamp(360px, 74vh, 860px); overflow: hidden; border-radius: 30px; background: #1B241E; clip-path: inset(0 var(--fi, 0%) 0 var(--fi, 0%) round var(--fr, 30px)); will-change: clip-path; }
.fo__frame picture { position: absolute; inset: 0; display: block; }
.fo__frame img { position: absolute; left: 0; top: -10%; width: 100%; height: 120%; object-fit: cover; transform: translate3d(0, var(--fy, 0px), 0) scale(var(--fs, 1.1)); will-change: transform; }
.fo__cap { position: absolute; left: calc(var(--gut) + 22px); bottom: calc(clamp(18px, 3vw, 40px) + 22px); z-index: 2; display: flex; align-items: center; gap: 12px; max-width: calc(100% - 2 * var(--gut) - 44px); padding: 10px 16px; border-radius: 999px; background: rgba(243, 238, 227, .9); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); color: var(--ink); font-size: .75rem; font-weight: 600; line-height: 1.2; letter-spacing: .1em; text-transform: uppercase; }
.fo__cap span { flex: none; color: var(--ink-3); }
.fo__cap b { font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

@media (max-width: 899.98px) {
  .fo__in { padding-top: calc(var(--hdr) + 14px); }
  .fo__top { padding-bottom: 18px; font-size: .75rem; }
  .fo__time b, .fo__tl { display: none; }
  .fo__title { max-width: none; font-size: clamp(2.6rem, 1.2rem + 7vw, 4.6rem) !important; line-height: .95 !important; }
  .fo__row { grid-template-columns: minmax(0, 1fr); row-gap: 28px; margin-top: 20px; padding-bottom: 28px; }
  .fo__intro, .fo__spec { grid-column: 1 / -1; }
  .fo__lede { font-size: 1.0625rem; }
  .fo__ctas { margin-top: 18px; gap: 12px 24px; }
  /* Facts as a 2×2 sheet: half the height of four rows. */
  .fo__spec { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); border-top: 1px solid var(--ink); }
  .fo__specrow { flex-direction: column; align-items: flex-start; gap: 8px; padding: 14px 12px 14px 0; border-bottom: 1px solid var(--rule); }
  .fo__specrow:nth-child(odd) { border-right: 1px solid var(--rule); }
  .fo__specrow:nth-child(even) { padding-left: 14px; }
  .fo__specrow i { display: none; }
  .fo__specrow dt { font-size: .6875rem; }
  .fo__specrow dd { font-size: 1.375rem; }
  .fo__frame { height: 58vh; border-radius: 22px; }
  .fo__cap { left: calc(var(--gut) + 12px); bottom: calc(clamp(18px, 3vw, 40px) + 12px); padding: 8px 12px; font-size: .6875rem; }
}
@media (prefers-reduced-motion: reduce) {
  .fo__time b, .fo__seal img { animation: none; }
  .fo .fo__title em { transition: none; --hl: 100%; }
}

/* =============================================================================
   FORMS (shared by contact, RFQ, sample, feasibility and the buyer modal)
   Labels are short, firm and above the field; errors and hints meet the
   15 px floor. Field names, handlers and validation live in forms.js.
   ========================================================================== */
.form .field > label, .field > label { display: block; margin-bottom: 8px; font-family: var(--f); font-size: .9375rem; font-weight: 600; line-height: 1.3; letter-spacing: 0; color: var(--ink); }
.field .req { color: var(--apricot-d); }
.field__err { margin-top: 6px; font-size: .9375rem; font-weight: 500; color: var(--err); }
.hint { font-size: .9375rem; color: var(--ink-2); }
.input:focus-visible, .select:focus-visible, .textarea:focus-visible { outline: none; border-color: var(--green); box-shadow: 0 0 0 1px var(--green); }
.on-dark .field > label { color: var(--on-night); }

/* =============================================================================
   LUMEN CARDS: a light that follows the pointer along the card's edge, a soft
   sheen inside, and a slight 3D lean (data-tilt, set in initPointer).
   Fine pointers only; nothing happens on touch or with reduced motion.
   ========================================================================== */
.lumen { position: relative; isolation: isolate; transform-style: preserve-3d; }
.lumen::before, .lumen::after { content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; opacity: 0; transition: opacity .45s var(--e-out); }
.lumen::before {
  z-index: 2; padding: 1.5px;
  background: radial-gradient(340px circle at var(--lx, 50%) var(--ly, 50%), #FFB347, rgba(255, 179, 71, .45) 40%, transparent 75%);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor;
  mask: linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0);
}
.lumen::after { z-index: 1; background: radial-gradient(420px circle at var(--lx, 50%) var(--ly, 50%), rgba(255, 179, 71, .10), transparent 62%); }
@media (hover: hover) and (pointer: fine) { .lumen:hover::before, .lumen:hover::after { opacity: 1; } }
.on-dark .lumen::after, [data-tone="dark"] .lumen::after, .ing-grade.lumen::after, .cl__panel.lumen::after { background: radial-gradient(420px circle at var(--lx, 50%) var(--ly, 50%), rgba(255, 179, 71, .12), rgba(241, 237, 228, .04) 40%, transparent 65%); }
/* lift the card's own content above the sheen */
.lumen > * { position: relative; z-index: 3; }
.mcard__a.lumen { padding: 14px; margin: -14px; border-radius: var(--r); }

/* =============================================================================
   SCROLL-EXPAND PLATES: inset and rounded on arrival, edge to edge by the time
   the plate reaches the top third of the screen (initExpand drives --ex).
   ========================================================================== */
.plate__stage.is-expand { clip-path: inset(0 calc((1 - var(--ex, 0)) * 5vw) round calc((1 - var(--ex, 0)) * 28px)); will-change: clip-path; }
.plate__stage.is-expand img { transform: scale(calc(1.12 - var(--ex, 0) * .12)); transform-origin: 50% 50%; }
@media (max-width: 760px) { .plate__stage.is-expand { clip-path: inset(0 calc((1 - var(--ex, 0)) * 4vw) round calc((1 - var(--ex, 0)) * 18px)); } }

/* =============================================================================
   COLOUR REVEAL on the Folio hero photograph (initColourReveal).
   Fine pointers only: the photo rests in warm monochrome and a feathered
   spotlight restores its colour. Touch and keyboard users see full colour.
   ========================================================================== */
@media (hover: hover) and (pointer: fine) {
  .fo__frame.has-reveal > picture img, .fo__frame.has-reveal > img { filter: grayscale(.92) sepia(.22) contrast(1.06) brightness(.94); }
}
.cr-lit { position: absolute; inset: 0; z-index: 1; pointer-events: none; overflow: hidden; border-radius: inherit;
  --rx: 50%; --ry: 50%; --rr: 0px;
  -webkit-mask-image: radial-gradient(circle var(--rr) at var(--rx) var(--ry), #000 0%, #000 40%, rgb(0 0 0 / .75) 60%, rgb(0 0 0 / .4) 75%, rgb(0 0 0 / .12) 88%, transparent 100%);
  mask-image: radial-gradient(circle var(--rr) at var(--rx) var(--ry), #000 0%, #000 40%, rgb(0 0 0 / .75) 60%, rgb(0 0 0 / .4) 75%, rgb(0 0 0 / .12) 88%, transparent 100%);
  -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; will-change: mask-image; }
.cr-lit img { filter: saturate(1.08); }
@media (hover: none), (pointer: coarse) { .cr-lit { display: none; } }

/* =============================================================================
   PREMIUM LAYER: sheets, card surfaces, photo hovers, buttons.
   ========================================================================== */

/* ---------- Sheets: a colour change rides up over the section above ---------- */
.sheet-z { position: relative; }
.is-sheet {
  position: relative;
  margin-top: -40px;
  border-radius: 40px 40px 0 0;
  box-shadow: 0 -1px 0 rgba(255, 255, 255, .06), 0 -28px 60px -34px rgba(15, 23, 18, .45);
  overflow: clip;
}
@media (max-width: 760px) { .is-sheet { margin-top: -24px; border-radius: 24px 24px 0 0; } }

/* ---------- Card surfaces: a visible gradient edge, an inner highlight, layered depth ---------- */
.mcard__a, .mspec, .br-badge {
  border: 1px solid transparent;
  background:
    linear-gradient(180deg, #FFFDF9, var(--bone)) padding-box,
    linear-gradient(155deg, rgba(255, 255, 255, .95), rgba(22, 32, 26, .10) 38%, rgba(22, 32, 26, .06) 62%, rgba(255, 179, 71, .45)) border-box;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .9),
    0 1px 2px rgba(15, 23, 18, .05),
    0 12px 28px -14px rgba(15, 23, 18, .18),
    0 40px 70px -40px rgba(15, 23, 18, .22);
  transition: box-shadow .6s var(--e-out);
}
.mcard__a { border-radius: var(--r); }
.mcard__a:hover, .mspec:hover, .br-badge:hover {
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .9),
    0 2px 4px rgba(15, 23, 18, .06),
    0 22px 40px -16px rgba(15, 23, 18, .24),
    0 60px 90px -40px rgba(26, 67, 49, .28);
}
.ing-grade, .rd-lab .cl__panel {
  border: 1px solid transparent;
  background:
    linear-gradient(180deg, #1B2620, var(--night-2)) padding-box,
    linear-gradient(160deg, rgba(241, 237, 228, .22), rgba(241, 237, 228, .04) 40%, rgba(255, 179, 71, .30)) border-box;
  box-shadow: inset 0 1px 0 rgba(241, 237, 228, .06), 0 30px 60px -30px rgba(0, 0, 0, .6);
}

/* ---------- Photo hovers: slow zoom, a richer grade and a light sweep ---------- */
.mcard__fig, .cap-zone__fig, .ing-idx__fig, .pf__fig, .seq__media, .tour__plate .plate__stage { isolation: isolate; }
.mcard__fig::after, .cap-zone__fig::after, .ing-idx__fig::after, .pf__fig::after {
  content: ""; position: absolute; inset: 0; z-index: 2; pointer-events: none;
  background: linear-gradient(115deg, transparent 30%, rgba(255, 244, 222, .38) 48%, transparent 66%);
  transform: translateX(-120%); transition: transform 1.1s var(--e-out);
}
.mcard__a:hover .mcard__fig::after, .cap-zone__fig:hover::after, .ing-idx__i:hover .ing-idx__fig::after, .pf__g:hover .pf__fig::after { transform: translateX(120%); }
.mcard__fig img, .cap-zone__fig img, .ing-idx__fig img, .pf__fig img { transition: transform 1.2s var(--e-out), filter .8s var(--e-out); }
.mcard__a:hover .mcard__fig img, .cap-zone__fig:hover img, .ing-idx__i:hover .ing-idx__fig img { transform: scale(1.07); filter: saturate(1.15) contrast(1.05); }

/* ---------- Buttons: a light sweep, a ringed arrow ---------- */
.btn { overflow: hidden; isolation: isolate; }
.btn > span:first-child { position: relative; z-index: 1; }
.btn::after {
  content: ""; position: absolute; inset: 0; z-index: 2; pointer-events: none; border-radius: inherit;
  background: linear-gradient(110deg, transparent 35%, rgba(255, 255, 255, .45) 50%, transparent 65%);
  transform: translateX(-130%); transition: transform .9s var(--e-out);
}
.btn:hover::after { transform: translateX(130%); }
.btn--lg .btn__i { display: grid; place-items: center; width: 34px; height: 34px; border-radius: 50%; background: rgba(42, 26, 0, .1); transition: background-color .3s, transform .5s var(--e-out); position: relative; z-index: 1; }
.btn--lg:hover .btn__i { background: rgba(42, 26, 0, .16); transform: rotate(-45deg); }
.btn--lg:hover .btn__i svg { transform: none; }
.btn--line.btn--lg .btn__i { background: rgba(22, 32, 26, .07); }
.on-dark .btn--line.btn--lg .btn__i { background: rgba(241, 237, 228, .1); }

@media (prefers-reduced-motion: reduce) {
  .btn::after, .mcard__fig::after, .cap-zone__fig::after, .ing-idx__fig::after, .pf__fig::after { display: none; }
  .mcard__fig img, .cap-zone__fig img, .ing-idx__fig img { transition: none; }
}