/* PT Maksima · page styles. The engine (scrollcraft.css) is the floor; this
   file is the composition. Nothing here restyles .sc-stage, .sc-copy or any
   [data-sc-*] selector.
   v8: colour. A warm cream ground the photographs already sit on, coconut-husk
   brown ink, palm green as the one accent, and a palm panel for the farmers. */

/* ------------------------------------------------------------- fonts --
   Served from this site, not from Google Fonts, so the page does not depend
   on a third party that may be slow or blocked in mainland China. Archivo and
   Geist are SIL OFL 1.1 (licences in fonts/). Chinese text uses the reader's
   own system font (PingFang SC, Microsoft YaHei, Noto Sans CJK SC ...): no
   Chinese webfont is downloaded at all. */
@font-face { font-family: 'Archivo'; font-style: normal; font-weight: 500; font-display: swap;
  src: url(fonts/archivo-latin-ext-500-normal.woff2) format('woff2'); unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF; }
@font-face { font-family: 'Archivo'; font-style: normal; font-weight: 500; font-display: swap;
  src: url(fonts/archivo-latin-500-normal.woff2) format('woff2'); unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD; }
@font-face { font-family: 'Geist'; font-style: normal; font-weight: 400; font-display: swap;
  src: url(fonts/geist-latin-ext-400-normal.woff2) format('woff2'); unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF; }
@font-face { font-family: 'Geist'; font-style: normal; font-weight: 400; font-display: swap;
  src: url(fonts/geist-latin-400-normal.woff2) format('woff2'); unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD; }
@font-face { font-family: 'Geist'; font-style: normal; font-weight: 500; font-display: swap;
  src: url(fonts/geist-latin-ext-500-normal.woff2) format('woff2'); unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF; }
@font-face { font-family: 'Geist'; font-style: normal; font-weight: 500; font-display: swap;
  src: url(fonts/geist-latin-500-normal.woff2) format('woff2'); unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD; }

/* ------------------------------------------------------------- tokens -- */
:root {
  --sc-canvas:      #F4EDE0;
  --sc-surface:     #FBF7F0;
  --sc-ink:         #2A1D13;
  --sc-ink-soft:    #6A5644;
  --sc-accent:      #2F6B3D;
  --sc-accent-ink:  #F7F2E8;
  --sc-shadow-color: 30 38% 24%;
  --sc-e1: 0 1px 2px hsl(var(--sc-shadow-color) / 0.10),
           0 2px 6px -1px hsl(var(--sc-shadow-color) / 0.08);
  --sc-e2: 0 2px 4px hsl(var(--sc-shadow-color) / 0.07),
           0 10px 24px -8px hsl(var(--sc-shadow-color) / 0.18);
  --sc-e3: 0 4px 8px hsl(var(--sc-shadow-color) / 0.06),
           0 18px 40px -12px hsl(var(--sc-shadow-color) / 0.18),
           0 44px 80px -32px hsl(var(--sc-shadow-color) / 0.16);
  --sc-edge: inset 0 1px 0 rgb(255 255 255 / 0.7);
  --sc-font-display: "Archivo", system-ui, sans-serif;
  --sc-font-text:    "Geist", system-ui, sans-serif;
  --cjk: "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "Noto Sans CJK SC",
         "Source Han Sans SC", "Noto Sans SC", "WenQuanYi Micro Hei", sans-serif;
  --sc-r-sm: 8px; --sc-r-md: 14px; --sc-r-lg: 22px;

  /* page-local */
  --palm: #1F4A2C;          /* the farmers' panel */
  --palm-ink: #F4EDE0;
  --palm-soft: #C9D8C2;
  --sun: #E7B85A;           /* the accent on palm */
  --tone-kopra: #B9822F;    /* one colour per product: label bars, callout dots */
  --tone-wm:    #5B8C4A;
  --tone-arang: #3A322D;
  --tone-air:   #2E8496;
  --tone-testa: #8A5A33;
  --chrome-h: 3.5rem;
  --index-w: 10rem;
  --band-w: calc(var(--index-w) + var(--sc-gutter) + var(--sc-5));   /* the index margin band */
}
.lang-zh {
  --sc-font-display: "Archivo", var(--cjk);
  --sc-font-text:    "Geist", var(--cjk);
  --sc-track-tight: 0; --sc-track-snug: 0; --sc-track-normal: 0; --sc-track-wide: 0.14em;
  --sc-leading-none: 1.16; --sc-leading-tight: 1.28; --sc-leading-body: 1.85;
}
.lang-zh .sc-display { font-weight: 500; }
.sc-grain { opacity: 0.035; }

/* ------------------------------------------------------------- chrome -- */
.skip {
  position: fixed; top: var(--sc-3); left: var(--sc-3); z-index: 99;
  padding: var(--sc-2) var(--sc-4); background: var(--sc-accent); color: var(--sc-accent-ink);
  border-radius: var(--sc-r-sm); font-size: var(--sc-t-sm); text-decoration: none;
  transform: translateY(-200%); transition: transform var(--sc-d-fast) var(--sc-ease-out);
}
.skip:focus-visible { transform: none; }

.chrome {
  position: fixed; inset: 0 0 auto 0; z-index: calc(var(--sc-z-chrome) + 1);
  display: flex; justify-content: space-between; align-items: center;
  height: var(--chrome-h); padding-inline: var(--sc-gutter);
  background: color-mix(in oklab, var(--sc-canvas) 90%, transparent);
  -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
  pointer-events: none;
}
.chrome > * { pointer-events: auto; }
.mark {
  display: inline-flex; align-items: center; gap: 0.55em;
  font-family: var(--sc-font-display); font-weight: 500; font-size: var(--sc-t-sm);
  letter-spacing: var(--sc-track-snug); text-decoration: none; color: var(--sc-ink);
}
.mark::before {
  content: ""; width: 0.8em; height: 0.8em; border-radius: 50%;
  background: radial-gradient(circle at 50% 50%, var(--tone-testa) 0 38%, var(--sc-canvas) 39% 62%, var(--sc-accent) 63%);
}
.langs { display: flex; gap: var(--sc-4); font-size: var(--sc-t-xs); letter-spacing: var(--sc-track-wide); }
.langs a { color: var(--sc-ink-soft); text-decoration: none; padding: var(--sc-1) 0; }
.langs a[aria-current="page"] { color: var(--sc-ink); text-decoration: underline; text-decoration-color: var(--sc-accent); text-underline-offset: 0.35em; }
@media (hover: hover) and (pointer: fine) {
  .langs a:hover { color: var(--sc-ink); transition: color var(--sc-d-fast) var(--sc-ease-out); }
}

/* the index: an index of objects, and it jumps */
.index {
  position: fixed; right: 0; top: 0; bottom: 0;
  z-index: calc(var(--sc-z-chrome) - 1); width: var(--band-w);
  display: flex; align-items: center; justify-content: flex-end;
  padding-right: var(--sc-gutter);
  background: color-mix(in oklab, var(--sc-canvas) 94%, transparent);
  pointer-events: none;
}
.index::before {   /* rail items fade into the band instead of being cut by it */
  content: ""; position: absolute; top: 0; bottom: 0; right: 100%; width: 3.5rem;
  background: linear-gradient(to right, transparent, color-mix(in oklab, var(--sc-canvas) 94%, transparent));
}
.index ol { pointer-events: auto; }
.index ol { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--sc-2); text-align: right; }
.index a {
  position: relative; display: inline-block; text-decoration: none;
  color: var(--sc-ink-soft); font-size: var(--sc-t-xs); letter-spacing: var(--sc-track-wide);
  text-transform: uppercase; padding: 2px 0 2px var(--sc-5);
  transition: color var(--sc-d-fast) var(--sc-ease-out);
}
.index a::before {
  content: ""; position: absolute; left: 0; top: 50%; width: 10px; height: 2px; margin-top: -1px;
  background: var(--sc-accent); border-radius: 1px; transform: scaleX(0); transform-origin: 0 50%;
  transition: transform var(--sc-d-base) var(--sc-ease-out);
}
.index a[aria-current="true"] { color: var(--sc-ink); }
.index a[aria-current="true"]::before { transform: scaleX(1); }
@media (hover: hover) and (pointer: fine) { .index a:hover { color: var(--sc-ink); } }
.index a:active { translate: 0 1px; }

/* ----------------------------------------------------- the label schema -- */
.label { display: grid; gap: var(--sc-4); }
.label__name { margin: 0; }
.label__sub {
  display: block; font-family: var(--sc-font-text); font-weight: 400;
  font-size: var(--sc-t-sm); letter-spacing: var(--sc-track-normal); color: var(--sc-ink-soft);
  margin-top: var(--sc-2);
}
.label__fields { margin: 0; display: grid; }
.label__fields > div {
  display: grid; grid-template-columns: 6.5rem 1fr; gap: var(--sc-4); align-items: baseline;
  padding-block: var(--sc-3); border-top: 1px solid var(--sc-hairline);
}
.label__fields > div:last-child { border-bottom: 1px solid var(--sc-hairline); }
.label__fields dt {
  font-size: var(--sc-t-xs); letter-spacing: var(--sc-track-wide); text-transform: uppercase;
  color: var(--sc-ink-soft);
}
.label__fields dd { margin: 0; font-size: var(--sc-t-sm); color: var(--sc-ink); text-wrap: pretty; }
.lang-zh .label__fields > div { grid-template-columns: 4.5rem 1fr; }

/* the small honest caption on every AI picture */
.ai-chip, .obj__photo, .burst__ai {
  font-size: var(--sc-t-xs); letter-spacing: var(--sc-track-wide); text-transform: uppercase;
  color: var(--sc-ink-soft);
}

/* --------------------------------------------------------- A1 · hero -- */
/* .hero is the sticky stage; never set position on it. Custom properties are
   fine: they size and place the composition. */
.hero {
  --comp-h: min(84svh, calc(100svh - var(--chrome-h) - 3rem),
                calc((100vw - var(--band-w) - 30rem) * 1085 / 594));
  --comp-w: calc(var(--comp-h) * 594 / 1085);
  --comp-x: calc((100vw - var(--band-w)) * 0.54);
  --comp-y: calc(50% + var(--chrome-h) * 0.35);
}
.burst { position: absolute; inset: 0; margin: 0; pointer-events: none; }
.burst__comp {
  position: absolute; container-type: size;
  width: var(--comp-w); height: var(--comp-h);
  left: var(--comp-x); top: var(--comp-y); translate: -50% -50%;
  /* the fruit before the crack: scale and offset (in composition units) */
  --ws: 1; --wr: 0; --wx: 0; --wy: 0; --wo: 0; --mx: 0; --my: 0;
  --ws0: 1.45; --wx0: 0; --wy0: 0;
}
/* Every piece carries its own --k (0 = packed inside the fruit, 1 = in place)
   and --o, written by the script each frame. The resolved state is the CSS
   default, so without script or motion the split coconut is simply there. */
.piece {
  position: absolute; max-width: none; height: auto;
  left: calc(var(--l) * 100%); top: calc(var(--t) * 100%); width: calc(var(--w) * 100%);
  --k: 1; --o: 1;
  translate:
    calc((var(--sx) - var(--cx)) * (1 - var(--k)) * 100cqw + var(--mx) * var(--z) * 1px)
    calc((var(--sy) - var(--cy)) * (1 - var(--k)) * 100cqh + var(--my) * var(--z) * 1px);
  rotate: calc((1 - var(--k)) * var(--r) * 1deg);
  scale: calc(var(--s0) + (1 - var(--s0)) * var(--k));
  opacity: var(--o);
  filter: drop-shadow(0 14px 18px hsl(var(--sc-shadow-color) / 0.16));
  will-change: translate, rotate, scale, opacity;
}
/* with script, the page opens on the whole fruit (set before first paint) */
html.js .piece { --k: 0; --o: 0; }
html.js .burst__comp { --wo: 1; --ws: var(--ws0); --wx: var(--wx0); --wy: var(--wy0); }
/* the whole fruit, as two halves cut along a jagged crack: identical until the
   crack, then each half follows its shell photo and dissolves into it */
.whole {
  position: absolute; left: 50%; top: 50%; width: 67.5cqw; height: auto; max-width: none;
  --hx: 0; --hy: 0; --hr: 0;
  translate: calc(-50% + (var(--wx) + var(--hx)) * 1cqw) calc(-50% + (var(--wy) + var(--hy)) * 1cqh);
  rotate: calc((var(--wr) + var(--hr)) * 1deg);
  scale: var(--ws); opacity: var(--wo);
  filter: drop-shadow(0 22px 26px hsl(var(--sc-shadow-color) / 0.20));
  will-change: translate, scale, rotate, opacity;
}
/* The clip reaches 30% past the picture on every side, so the drop shadow is
   never cut at the picture's edge (that showed as a box around the fruit).
   Inside the fruit the halves overlap a little so no hairline opens; outside
   it (x < 0, x > 100%) the two edges coincide, so the shadow is not doubled. */
.whole--top    { clip-path: polygon(-30% -30%, 130% -30%, 130% 46.5%, 100% 46.5%, 90% 50.5%, 79% 46.5%, 67% 52%, 55% 47.5%, 44% 53%, 33% 48%, 21% 52.5%, 10% 48.5%, 0 50.5%, -30% 50.5%); }
.whole--bottom { clip-path: polygon(-30% 50.5%, 0 50.5%, 10% 47.5%, 21% 51.5%, 33% 47%, 44% 52%, 55% 46.5%, 67% 51%, 79% 45.5%, 90% 49.5%, 100% 46.5%, 130% 46.5%, 130% 130%, -30% 130%); }
/* the water: a crown that rises out of the crack, and loose drops */
.splash, .drop { position: absolute; max-width: none; opacity: 0; pointer-events: none; will-change: translate, scale, opacity; }
/* the crown's foot (50% 85% of the image) is the point that is placed: at the
   crack line while it bursts, then in the water of the bottom shell, where it
   stays. The CSS default is that resting state. */
.splash {
  left: 50%; top: 50%; width: 92cqw; height: auto;
  --ssx: 0.66; --ssy: 0.58; --sx: 0.8; --sy: 32.0; --so: 1;
  translate: calc(-50% + var(--sx) * 1cqw + var(--mx) * 6px) calc(-85% + var(--sy) * 1cqh + var(--my) * 6px);
  scale: var(--ssx) var(--ssy); opacity: var(--so); transform-origin: 50% 85%;
}
html.js .splash { --so: 0; }
.drop {
  left: 50%; top: 50%; width: 3.2cqw; height: auto;
  --dx: 0; --dy: 0; --dk: 0; --do: 0;
  translate: calc(-50% + var(--dx) * 1cqw) calc(-50% + var(--dy) * 1cqh);
  scale: calc(var(--ds) * (0.5 + 0.5 * var(--dk))); opacity: var(--do);
}
.burst__ai {
  position: absolute; left: var(--comp-x); translate: -50% 0;
  top: calc(var(--comp-y) + var(--comp-h) / 2 + 0.35rem);
  white-space: nowrap;
}

.leaders { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; z-index: 2; overflow: visible; }
.leader { stroke: var(--sc-ink); stroke-opacity: 0.55; stroke-width: 1px; fill: none; vector-effect: non-scaling-stroke; }
.leader-dot { fill: var(--sc-canvas); stroke: var(--sc-ink); stroke-width: 1.5px; vector-effect: non-scaling-stroke; }

.callouts { list-style: none; margin: 0; padding: 0; }
.callout {
  position: absolute; z-index: 3; display: grid; gap: 2px; width: max-content; max-width: 13rem;
  opacity: 0; pointer-events: none;
}
.callout__part {
  display: inline-flex; align-items: center; gap: 0.5em;
  font-size: var(--sc-t-xs); letter-spacing: var(--sc-track-wide); text-transform: uppercase;
  color: var(--sc-ink-soft); line-height: 1.6;
}
.callout__part::before {
  content: ""; width: 0.7em; height: 0.7em; border-radius: 50%; flex: none;
  background: var(--tone, var(--sc-accent));
}
.callout[data-callout="shell"] { --tone: var(--tone-arang); }
.callout[data-callout="meat"]  { --tone: var(--tone-kopra); }
.callout[data-callout="water"] { --tone: var(--tone-air); }
.callout[data-callout="testa"] { --tone: var(--tone-testa); }
.callout__to {
  font-family: var(--sc-font-display); font-weight: 500; font-size: var(--sc-t-lg);
  letter-spacing: var(--sc-track-snug); line-height: 1.12; color: var(--sc-ink); text-wrap: balance;
}
.callout--minor .callout__to { font-family: var(--sc-font-text); font-weight: 400; font-size: var(--sc-t-sm); color: var(--sc-ink-soft); }
.callout.is-left  { text-align: right; justify-items: end; }
.callout.is-left .callout__part { flex-direction: row-reverse; }
.callout.is-right { text-align: left; justify-items: start; }
html:not(.js) .callouts { position: absolute; left: var(--sc-gutter); top: calc(var(--chrome-h) + var(--sc-4)); display: grid; gap: var(--sc-3); z-index: 3; }
html:not(.js) .callout { position: static; opacity: 1; }

.label--hero {
  position: absolute; z-index: var(--sc-z-copy);
  left: var(--sc-gutter); bottom: clamp(2.5rem, 10vh, 7rem);
  width: min(22rem, 30vw);
}
.label--hero > * { opacity: var(--lab-o, 1); }

/* -------------------------------------------------- A2 · the farmers -- */
.method { padding-block: calc(var(--sc-section) * 0.55); }
.method .sc-wrap { padding-right: max(var(--sc-gutter), var(--band-w)); }
.method__panel {
  /* the palm panel re-points the colour roles; the engine's hairlines are
     computed at :root, so they are re-declared here too */
  --sc-ink: var(--palm-ink); --sc-ink-soft: var(--palm-soft);
  --sc-accent: var(--sun); --sc-accent-ink: var(--palm);
  --sc-hairline: color-mix(in oklab, var(--palm-ink) 20%, transparent);
  --sc-hairline-strong: color-mix(in oklab, var(--palm-ink) 32%, transparent);
  --sc-edge: inset 0 1px 0 rgb(255 255 255 / 0.12);
  background: var(--palm); color: var(--sc-ink);
  border-radius: var(--sc-r-lg);
  padding: clamp(1.5rem, 4.5vw, 4.5rem);
  box-shadow: var(--sc-e3);
}
.method__grid {
  display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
  gap: var(--sc-8) var(--sc-8); align-items: start;
}
.method__text { max-width: 40rem; }
.method__text h2 { color: var(--sc-ink); }
.method__text h2::after {
  content: ""; display: block; width: 3rem; height: 4px; border-radius: 2px;
  background: var(--sun); margin-top: var(--sc-5);
}
.farmers { display: grid; gap: var(--sc-6); max-width: 30rem; }
.farmers__frame {
  position: relative; margin: 0; aspect-ratio: 3 / 2; overflow: clip;
  background: color-mix(in oklab, var(--palm) 80%, black);
  border-radius: var(--sc-r-md); box-shadow: var(--sc-e2);
}
.farmers__frame img { width: 100%; height: 100%; object-fit: cover; }
.farmers__frame--text { margin-top: var(--sc-7); max-width: 34rem; }
.label--farmers { max-width: 26rem; }
.label--farmers .label__name { font-size: var(--sc-t-xl); }

/* photo captions sit on a small cream chip so they read on any picture */
.obj__photo {
  position: absolute; left: var(--sc-3); bottom: var(--sc-3); max-width: calc(100% - 1.5rem);
  padding: 0.3em 0.65em; border-radius: 6px;
  background: color-mix(in oklab, #F4EDE0 88%, transparent); color: #5E4B3A;
  -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
  line-height: 1.4;
}

/* ---------------------------------------------------------- A3 · walk -- */
.walk { display: flex; align-items: center; padding-top: var(--chrome-h); }
.rail {
  display: flex; align-items: flex-start; gap: clamp(2rem, 4vw, 4rem);
  padding-inline: var(--sc-gutter) var(--band-w);
}
.rail > * { flex: 0 0 auto; }
.rail__lead, .rail__note { align-self: center; }
.rail__lead { width: min(26rem, 70vw); padding-right: var(--sc-6); }
.rail__note { width: min(20rem, 70vw); display: grid; gap: var(--sc-4); }
.obj { width: clamp(16rem, 23vw, 22rem); display: grid; gap: var(--sc-5); --a: 1; }
#kopra { --tone: var(--tone-kopra); }
#wm    { --tone: var(--tone-wm); }
#arang { --tone: var(--tone-arang); }
#air   { --tone: var(--tone-air); }
.obj__frame {
  position: relative; margin: 0; aspect-ratio: 4 / 5; max-height: 52vh; overflow: clip;
  background: var(--sc-surface);
  border-radius: var(--sc-r-md); box-shadow: var(--sc-e2), var(--sc-edge);
  clip-path: inset(calc((1 - var(--a)) * 100%) 0 0 0 round var(--sc-r-md));
}
.obj__frame::after {   /* the product's colour, as a strip along the foot of the frame */
  content: ""; position: absolute; inset: auto 0 0 0; height: 5px; background: var(--tone);
}
.obj__frame img { width: 100%; height: 100%; object-fit: cover; }
.obj__frame .obj__photo { bottom: calc(var(--sc-3) + 5px); }
.obj .label { opacity: calc(0.55 + 0.45 * var(--a)); translate: calc((1 - var(--a)) * 18px) 0; }
.obj .label__name::before {
  content: ""; display: block; width: 2.25rem; height: 4px; border-radius: 2px;
  background: var(--tone); margin-bottom: var(--sc-4);
}
.textlink {
  display: inline-block; width: max-content; color: var(--sc-ink); font-size: var(--sc-t-base);
  text-decoration: underline; text-decoration-color: var(--sc-accent); text-decoration-thickness: 2px; text-underline-offset: 0.3em;
  transition: text-decoration-color var(--sc-d-fast) var(--sc-ease-out), color var(--sc-d-fast) var(--sc-ease-out);
}
@media (hover: hover) and (pointer: fine) { .textlink:hover { color: var(--sc-accent); } }
.textlink:active { translate: 0 1px; }

/* --------------------------------------------------------- A4 · close -- */
.close { display: grid; grid-template-rows: 1fr auto; }
.plate {
  align-self: center; justify-self: start;
  margin-inline: var(--sc-gutter); width: min(34rem, calc(100% - var(--sc-gutter) - var(--band-w)));
  display: grid; gap: var(--sc-6);
  padding: var(--sc-6); border-radius: var(--sc-r-lg);
  background: var(--sc-surface); box-shadow: var(--sc-e3), var(--sc-edge);
  border-top: 5px solid var(--sc-accent);
}
/* the ask is plain text: where to write, and the address big enough to copy */
.plate__cta { margin: 0; display: grid; gap: var(--sc-2); }
.plate__ask {
  font-size: var(--sc-t-xs); letter-spacing: var(--sc-track-wide); text-transform: uppercase;
  color: var(--sc-ink-soft);
}
.plate__mail {
  font-family: var(--sc-font-display); font-weight: 500; font-size: var(--sc-t-xl);
  letter-spacing: var(--sc-track-tight); line-height: 1.15; color: var(--sc-ink);
  user-select: all; overflow-wrap: anywhere;
}
.cta {
  display: inline-flex; align-items: center; gap: 0.6em;
  padding: 0.7em 1.25em; border-radius: 999px;
  font-family: var(--sc-font-display); font-weight: 500; font-size: var(--sc-t-base);
  letter-spacing: var(--sc-track-snug); text-decoration: none;
  background: var(--sc-accent); color: var(--sc-accent-ink);
  box-shadow: var(--sc-e1);
  transition: background-color var(--sc-d-fast) var(--sc-ease-out), translate var(--sc-d-fast) var(--sc-ease-out);
}
.cta::after { content: "→"; font-family: var(--sc-font-text); }
@media (hover: hover) and (pointer: fine) { .cta:hover { background: color-mix(in oklab, var(--sc-accent) 86%, black); } }
.cta:active { translate: 0 1px; }
.foot {
  display: flex; flex-wrap: wrap; justify-content: space-between; gap: var(--sc-3) var(--sc-6);
  padding: var(--sc-5) calc(var(--band-w) + 3.5rem) calc(var(--sc-5) + env(safe-area-inset-bottom)) var(--sc-gutter);   /* clear of the index band and its fade */
  border-top: 1px solid var(--sc-hairline); font-size: var(--sc-t-xs); color: var(--sc-ink-soft);
  letter-spacing: var(--sc-track-wide);
}
.foot__mark { color: var(--sc-ink); }
.foot__ai { flex-basis: 100%; letter-spacing: var(--sc-track-normal); }
.foot__langs { display: flex; gap: var(--sc-4); }
.foot__langs a { color: var(--sc-ink-soft); text-decoration: none; }
.foot__langs a[aria-current="page"] { color: var(--sc-ink); text-decoration: underline; text-decoration-color: var(--sc-accent); text-underline-offset: 0.35em; }

/* ----------------------------------------------------- reduced motion -- */
@media (prefers-reduced-motion: reduce) {
  .piece { --k: 1 !important; --o: 1 !important; }
  .burst__comp { --wo: 0 !important; --mx: 0 !important; --my: 0 !important; }
  .drop { display: none; }
  .callout { opacity: 1; }
  .obj { --a: 1 !important; }
  .index a::before, .index a, .langs a, .textlink, .cta { transition: none; }
}

/* ------------------------------------------------------------ mobile -- */
@media (max-width: 860px) {
  :root { --index-w: 0px; --chrome-h: 3rem; --band-w: var(--sc-gutter); }
  .index {
    inset: auto 0 0 0; translate: none; width: auto; display: block;
    padding: 0 var(--sc-gutter) env(safe-area-inset-bottom);
    background: color-mix(in oklab, var(--sc-canvas) 90%, transparent);
    border-top: 1px solid var(--sc-hairline);
    -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
  }
  .index::before { display: none; }
  .index ol { display: flex; gap: var(--sc-5); overflow-x: auto; scrollbar-width: none; text-align: left; }
  .index ol::-webkit-scrollbar { display: none; }
  .index li { flex: 0 0 auto; }
  .index a { padding: var(--sc-3) 0 var(--sc-3) 0; }
  .index a::before { left: 50%; top: auto; bottom: 6px; width: 100%; translate: -50% 0; height: 2px; transform-origin: 50% 50%; }

  /* the composition on the left, every callout in one column on the right */
  .hero {
    --comp-h: min(calc(100svh - var(--chrome-h) - 21.5rem),
                  calc((100vw - 2 * var(--sc-gutter) - 8.75rem) * 1085 / 594));
    --comp-x: calc(var(--sc-gutter) + var(--comp-w) / 2);
    --comp-y: calc(var(--chrome-h) + 0.75rem + var(--comp-h) / 2);
  }
  .burst__comp { --ws0: 1.9; --wx0: 30; --wy0: 4; }
  .callout { max-width: 9rem; }
  .callout__to { font-size: var(--sc-t-sm); line-height: 1.2; }
  .label--hero { left: var(--sc-gutter); right: var(--sc-gutter); width: auto; bottom: calc(3.4rem + env(safe-area-inset-bottom)); }
  .label--hero .label__name { font-size: var(--sc-t-xl); }
  .label--hero .label__fields > div { padding-block: var(--sc-2); grid-template-columns: 6.25rem 1fr; }
  .label--hero .label__fields dd { font-size: var(--sc-t-xs); }

  .method { padding-block: var(--sc-7); }
  .method .sc-wrap { padding-inline: var(--sc-3); }
  .method__grid { grid-template-columns: 1fr; gap: var(--sc-7); }
  .method__panel { border-radius: var(--sc-r-md); padding: var(--sc-6) var(--sc-5); }

  .rail { gap: var(--sc-6); padding-inline: var(--sc-gutter); }
  .rail__lead { width: min(22rem, 78vw); padding-right: 0; }
  .obj { width: min(20rem, 76vw); }
  .rail__note { width: min(18rem, 70vw); padding-right: var(--sc-6); }
  .walk { padding-bottom: 3rem; }

  .plate { width: calc(100% - 2 * var(--sc-gutter)); padding: var(--sc-5); }
  .foot { padding: var(--sc-5) var(--sc-gutter) calc(3.4rem + env(safe-area-inset-bottom)); }
}