/* =====
   DINKOMART — the home page
   Loads after main.css, only on index.php.

   In order down the page:
     Loader      a curtain that lifts off the stage
     Hero        the stage: each range's headline beside the coverflow deck,
                 lit by the range's own photograph, the ticker at its foot
     Ranges      what we sell, a bento of pictures unveiled as they arrive
     The way in  three doors, in the logo's three colours

   Rules this file keeps:
   · Nothing is hidden and then revealed by JS. `html.js` (set before first
     paint) is what permits anything to start hidden. No JS, no hiding.
   · Motion uses `translate`/`scale`/`rotate`, not `transform`, so GSAP and
     CSS can move the same element without one wiping the other.
   · The section reveals below the hero are main.css's [data-reveal]; the
     hero's entrance is GSAP's (home.js), on the loader's beat.
   ===== */

/* =====
   00 · LOADER — the Dinkomart box (header.php, D34). A box travels the
   ploughed field — the site's own ground, in 3D — at sunrise: its sides
   the ranges on sale, its lid the mark. The sun rises as the page loads
   (--p, header.php's script); then the box squares its lid to you and
   comes forward, and the curtain LIFTS (a translate), the hero beneath.
   CSS 3D, no WebGL. With no script the box drops in and the curtain
   clears itself at 1.2s; with one, 5s is only the net.
   ===== */
.loader {
  --p: 0; --s: clamp(140px, 31vmin, 260px);
  --horizon: calc(41% + var(--s) * .2);
  position: fixed; inset: 0; z-index: 9999; overflow: hidden;
  background: var(--grain-layer), var(--stage);
  box-shadow: 0 30px 60px rgba(0, 0, 0, .45);
  animation: loaderBail .6s var(--ease) 1.2s forwards;
}
html.js .loader { animation-delay: 5s; }
html.is-loaded .loader { animation: loaderLift .95s var(--ease-drawer) forwards; }
/* A return to the page in the same session: no curtain at all. */
html.no-loader .loader { display: none; }
@keyframes loaderBail { to { opacity: 0; visibility: hidden; } }
@keyframes loaderLift { to { translate: 0 -100%; visibility: hidden; } }

/* The sky warms and the sun climbs out of the field behind the box with
   the page's progress. */
.loader__sky {
  position: absolute; inset: 0; opacity: var(--p);
  background: linear-gradient(transparent 20%, color-mix(in srgb, var(--accent) 16%, transparent) var(--horizon));
}
.loader__sun {
  position: absolute; left: 50%; top: var(--horizon); width: 120vmin; aspect-ratio: 1;
  translate: -50% calc(-50% + (1 - var(--p)) * 30vmin - var(--p) * 9vmin);
  background: radial-gradient(closest-side,
    color-mix(in srgb, var(--accent) 64%, #fff) 0 22%, color-mix(in srgb, var(--accent) 80%, var(--farm)) 31%,
    color-mix(in srgb, var(--accent) 30%, transparent) 33%, color-mix(in srgb, var(--accent) 10%, transparent) 52%, transparent 74%);
}
/* The land hides the sun below the horizon; its rows run to it. */
.loader__land {
  position: absolute; inset: var(--horizon) 0 0; perspective: 520px; perspective-origin: 50% 0;
  background: linear-gradient(var(--stage), var(--stage-2));
  box-shadow: 0 -1px 0 color-mix(in srgb, var(--accent) 50%, transparent), 0 -18px 40px -12px color-mix(in srgb, var(--accent) 40%, transparent);
}
/* The near ground falls away, so the rows read from afar and the words
   under them stay clear. On the loader, not the land: inside the land the
   tilted plane is sorted in front of it. */
.loader::after { content: ''; position: absolute; inset: auto 0 0; height: 36%; background: linear-gradient(transparent, var(--stage-2) 78%); }
.loader__field {
  position: absolute; left: -80%; right: -80%; top: 0; height: 320%; overflow: hidden;
  transform-origin: 50% 0; transform: rotateX(76deg);
  -webkit-mask-image: linear-gradient(transparent, #000 22%); mask-image: linear-gradient(transparent, #000 22%);
}
/* Ploughed rows to the horizon, each ridge shaded on one side, and faint
   clods across them streaming toward you: the box is on its way. A
   translate, inside the tilted plane. */
.loader__field i {
  position: absolute; inset: -90px 0 0;
  background:
    repeating-linear-gradient(90deg, transparent 0 9px, color-mix(in srgb, var(--fg) 10%, transparent) 17px, color-mix(in srgb, var(--fg) 2%, transparent) 21px, transparent 24px),
    repeating-linear-gradient(0deg, color-mix(in srgb, var(--fg) 5%, transparent) 0 2px, transparent 2px 30px),
    repeating-linear-gradient(0deg, color-mix(in srgb, var(--fg) 4%, transparent) 0 1px, transparent 1px 45px);
  animation: furrow 1.3s linear infinite;
}
@keyframes furrow { to { translate: 0 90px; } }

/* THE BOX: a cube in perspective, seen from a little above and off its
   corner. The outer box drops in, bobs and makes the finale; the inner
   one turns (header.php, Web Animations). */
.loader__scene {
  position: absolute; left: 50%; top: 41%; width: var(--s); height: var(--s);
  translate: -50% -50%; perspective: 760px;
}
.lbox {
  position: absolute; inset: 0; transform-style: preserve-3d;
  transform: rotateX(-17deg);
  animation: drop .6s var(--ease-out) both, bob 2.2s ease-in-out .6s infinite alternate;
  transition: transform .8s var(--ease-out), scale .8s var(--ease-out);
}
@keyframes drop { from { translate: 0 -60vh; } }
@keyframes bob { to { translate: 0 -5px; } }
.lbox__spin { position: absolute; inset: 0; transform-style: preserve-3d; transform: rotateY(-28deg); }
.lbox__face {
  position: absolute; inset: 0; margin: 0; overflow: hidden; backface-visibility: hidden;
  border-radius: 6px; background: #15110D;
}
.lbox__face--1 { transform: rotateY(0deg)   translateZ(calc(var(--s) / 2)); }
.lbox__face--2 { transform: rotateY(90deg)  translateZ(calc(var(--s) / 2)); }
.lbox__face--3 { transform: rotateY(180deg) translateZ(calc(var(--s) / 2)); }
.lbox__face--4 { transform: rotateY(270deg) translateZ(calc(var(--s) / 2)); }
.lbox__face--top { transform: rotateX(90deg) translateZ(calc(var(--s) / 2)); display: grid; place-items: center; background: var(--surface); }
.lbox__face--bottom { transform: rotateX(-90deg) translateZ(calc(var(--s) / 2)); }
figure.lbox__face img { width: 100%; height: 100%; object-fit: cover; }
/* A pack render shows the food in its art, as its tile does. */
figure.lbox__face.is-cutout img { object-position: 50% 100%; transform-origin: 62% 50%; scale: 1.7; }
/* Light from above the box's left; its name where a tile has it. */
.lbox__face:not(.lbox__face--top)::after {
  content: ''; position: absolute; inset: 0; border-radius: inherit;
  background: linear-gradient(to top, rgba(18, 12, 6, .82), rgba(18, 12, 6, 0) 52%), linear-gradient(125deg, rgba(255, 255, 255, .16), transparent 42%);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .12);
}
.lbox__face figcaption {
  position: absolute; left: 9%; right: 9%; bottom: 8%; z-index: 1;
  font: 700 clamp(.92rem, 2.3vmin, 1.24rem)/1.05 var(--font-display); letter-spacing: -.02em; color: #fff;
}
.lbox__mark { width: 66%; height: auto; }
/* Its shadow on the field, breathing with the bob. */
.lbox__shadow {
  position: absolute; left: 50%; top: 84%; width: 150%; height: 46%; translate: -50% 0;
  background: radial-gradient(closest-side, rgba(10, 12, 11, .34), transparent);
  animation: shadowIn .6s var(--ease-out) both, shade 2.2s ease-in-out .6s infinite alternate;
  transition: opacity .5s var(--ease);
}
@keyframes shadowIn { from { opacity: 0; scale: .4; } }
@keyframes shade { to { scale: .92; opacity: .8; } }
/* Delivered: the lid swings to you and the box comes forward. */
.loader.is-landing .lbox { transform: rotateX(-90deg); scale: 1.18; }
.loader.is-landing .lbox__shadow { opacity: 0; }

.loader__meta {
  position: absolute; z-index: 1; left: 0; right: 0; bottom: max(7vh, 40px);
  display: grid; justify-items: center; gap: 10px; text-align: center;
}
.loader__pct { font: 500 .9rem/1 var(--font-mono); letter-spacing: .1em; color: var(--fg-subtle); font-variant-numeric: tabular-nums; }
.loader__pct b { font-weight: 600; color: var(--fg); }
.loader__word {
  font-family: var(--font-mono); font-size: var(--fs-label);
  text-transform: uppercase; letter-spacing: .22em; color: var(--fg-subtle);
}
@media (prefers-reduced-motion: reduce) {
  html.js .loader, html .loader { animation: loaderBail .01ms forwards; }
  .lbox, .lbox__shadow, .loader__field i { animation: none; }
}

/* The hero's entrance (home.js sweeps these). `.is-in` hands an element
   back once it has played, clearing GSAP's inline leftovers. */
html.js [data-rise]:not(.is-in) { opacity: 0; translate: 0 26px; }
html.js [data-scale]:not(.is-in) { opacity: 0; scale: .96; }
@media (prefers-reduced-motion: reduce) {
  html.js [data-rise]:not(.is-in), html.js [data-scale]:not(.is-in) { opacity: 1; translate: none; scale: none; }
}


/* =====
   01 · HERO — two panels and a coin, the copy and the deck in step
   (D38; crafted further, D40)

   THE WORDS (left): the range's number, large, outlined and rolling; its
   headline flipping up letter by letter, its line, its way in and what
   stands behind it (how many products, by whom, three of them), on two
   soft lights in the range's colours that drift; the foot-left corner CUT
   (D33) for the three numbers a visitor can check. THE SCREEN (right):
   the range's name running huge and outlined behind chelukala.com's
   coverflow, on the range's own light; the card in the middle leans to a
   pointer, a glare crossing it. THE COIN between, bitten from both: the
   mark, the tagline round it, a gold point running its rim — the clock.

   One beat (home.js): the clock runs out; the deck turns; the headline
   flips out and the next flips in; the number rolls; the name lifts away
   and the next comes up; the lights cross-fade; the next light opens out
   of the coin; the coin flips. TRANSFORM AND OPACITY ONLY: a colour eased
   through the hero recalculated its whole tree every frame of a turn
   (3.5ms a frame, measured 2026-10-14), and a clock written by script
   every frame rebuilt the page's layers even with no one there.
   ===== */
.hero {
  --stage-top: 6px;
  --hgap: 14px;                  /* between the panels, and round every cut */
  --coin: 108px;
  --bite: calc(var(--coin) / 2 + 12px);
  --coin-y: 50%;
  --cycle: 6.5s;                 /* how long a range stays: the clock */
  --stage-h: 92px;               /* each tab's 3D stage, over its line (D44, D45) */
  /* The first screen whole at 1366x768 and the owner's 1536x730: the bar,
     the panels and the ticker. */
  --bento-h: clamp(500px, calc(100svh - var(--top-h, 72px) - 84px), 740px);
  position: relative; isolation: isolate;
  display: grid; grid-template-columns: minmax(0, 1fr);
  background: var(--bg);
}
/* The shade a card out of the middle sits in, and the cards' shadow. */
.hero { --veil: rgba(17, 21, 18, .2); --ds: rgba(17, 21, 18, .34); }
[data-theme='dark'] .hero { --veil: rgba(3, 5, 4, .5); --ds: rgba(0, 0, 0, .8); }

.hero__bento {
  /* The words' cut corner: a 420x84 notch and its 24px fillet (an exact
     path, storage/cache/review/cutmask.php), the stats sitting in it. */
  --nw: 470px; --nh: 100px; --nf: 24px;
  --notch: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='494' height='124'%3E%3Cg transform='matrix(-1 0 0 1 494 0)'%3E%3Cpath d='M0 0H494A24 24 0 0 1 470 24H58A34 34 0 0 0 24 58V100A24 24 0 0 1 0 124Z'/%3E%3C/g%3E%3C/svg%3E");
  position: relative;
  display: grid; grid-template-columns: minmax(0, 1.08fr) minmax(0, 1fr); gap: var(--hgap);
  height: var(--bento-h);
}
/* Without JS the deck is a grid of cards: the panels grow to hold it. */
html:not(.js) .hero__bento { height: auto; min-height: var(--bento-h); }
.hero__words, .hero__screen { position: relative; isolation: isolate; min-width: 0; overflow: hidden; border-radius: 34px; }

/* THE ARRIVAL: each panel is drawn open from the coin outward, a cover
   of the page's own colour folding away (a scale). home.js opens it; with
   no script there is none, and if the script never comes the CSS opens it. */
.hwipe { display: none; }
html.js .hwipe {
  display: block; position: absolute; inset: 0; z-index: 6; pointer-events: none;
  background: var(--hwipe-bg, var(--surface-sunk)); transform-origin: 0 50%;
  animation: wipeBail .01s 6s forwards;
}
html.js .hero__words .hwipe { --hwipe-bg: var(--words-bg); }
html.js .hero__screen .hwipe { transform-origin: 100% 50%; }
html.js .hwipe.is-open { animation: none; scale: var(--wipe-to, .0001 1); transition: scale 1.15s var(--ease-cine); }
html.js .hwipe.is-open .sk::after { animation: none; }
@keyframes wipeBail { to { scale: var(--wipe-to, .0001 1); } }
@media (prefers-reduced-motion: reduce) { html.js .hwipe { display: none; } }
/* UNTIL THEN, THE HERO'S SKELETON (D42; owner: "skeleton loading for the
   whole site"): on a slow line the scripts that open the hero can take
   seconds, and the covers were the page's own colour — a blank page.
   Now each is its panel's shape in grey with the light sweeping it: the
   words' kicker, headline, line and button; the deck's three cards and
   its tabs. The shapes fade as the cover folds away. */
.hsk { position: absolute; display: grid; transition: opacity .3s var(--ease); }
/* Opaque greys, so the deck's cards overlap as cards do. */
.hsk .sk { background: color-mix(in srgb, var(--fg) 8%, var(--hwipe-bg, var(--surface-sunk))); }
.hsk .hsk__side { background: color-mix(in srgb, var(--fg) 5%, var(--hwipe-bg, var(--surface-sunk))); }
.hwipe.is-open .hsk { opacity: 0; }
.hsk--words {
  inset: 0 calc(var(--bite) + 18px) 0 clamp(28px, 3.6vw, 56px);
  align-content: center; justify-items: start; gap: 16px; padding-bottom: var(--nh);
}
.hsk__kick { width: 220px; height: 30px; border-radius: var(--r-full); }
.hsk__h { width: min(88%, 470px); height: clamp(38px, 4.4vw, 64px); border-radius: 14px; }
.hsk__h--2 { width: min(70%, 400px); margin-top: -4px; }
.hsk__l { width: min(76%, 380px); margin-top: 6px; }
.hsk__l--2 { width: min(50%, 250px); margin-top: -6px; }
.hsk__btn { width: 220px; height: 54px; margin-top: 14px; border-radius: var(--r-full); }
.hsk--deck {
  --card-w: max(150px, min(calc((100cqi - 74px) / 1.92), calc((var(--bento-h) - 132px - var(--stage-h)) / 1.5), 330px));
  inset: 16px 0 calc(var(--stage-h) + 22px); grid-template-columns: auto auto auto; place-content: center; align-items: center;
}
.hsk__card { width: var(--card-w, 220px); aspect-ratio: 2 / 3; height: auto; max-height: 100%; border-radius: 22px; z-index: 1; }
.hsk__side { width: calc(var(--card-w, 220px) * .8); aspect-ratio: 2 / 3; height: auto; border-radius: 20px; }
.hsk__side:first-child { margin-right: calc(var(--card-w, 220px) * -.36); }
.hsk__side:last-child { margin-left: calc(var(--card-w, 220px) * -.36); }
/* The dock's shape: its marks and the pill. */
.hsk--tabs {
  left: 12px; right: 12px; bottom: 12px; height: 44px; padding: 0 94px 0 4px; border-radius: 22px;
  background: color-mix(in srgb, var(--fg) 6%, var(--hwipe-bg, var(--surface-sunk)));
  grid-auto-flow: column; grid-auto-columns: 1fr; align-items: center; justify-items: center;
}
.hsk--tabs .sk { width: 18px; height: 18px; border-radius: 50%; background: color-mix(in srgb, var(--fg) 12%, var(--hwipe-bg, var(--surface-sunk))); }
.hsk--tabs .sk.is-on { width: clamp(36px, 100%, 132px); height: 36px; border-radius: 18px; }

/* ----- the words
   The coin's bite on the right, the cut on the foot-left: one mask, the
   corner's three layers added, the bite intersected over them. */
.hero__words {
  --nbw: calc(var(--nw) + var(--nf)); --nbh: calc(var(--nh) + var(--nf));
  --words-bg: var(--surface-sunk);
  display: flex; flex-direction: column; justify-content: center;
  padding: clamp(28px, 3.2vw, 52px) calc(var(--bite) + 18px) calc(var(--nh) + 18px) clamp(28px, 3.6vw, 56px);
  background: var(--words-bg);
  -webkit-mask:
    radial-gradient(circle at calc(100% + var(--hgap) / 2) var(--coin-y), #0000 var(--bite), #000 calc(var(--bite) + .5px)) 0 0 / 100% 100% no-repeat,
    var(--notch) left bottom / var(--nbw) var(--nbh) no-repeat,
    linear-gradient(#000 0 0) left top / 100% calc(100% - var(--nbh) + 1px) no-repeat,
    linear-gradient(#000 0 0) right bottom / calc(100% - var(--nbw) + 1px) var(--nbh) no-repeat;
  -webkit-mask-composite: source-in, source-over, source-over, source-over;
  mask:
    radial-gradient(circle at calc(100% + var(--hgap) / 2) var(--coin-y), #0000 var(--bite), #000 calc(var(--bite) + .5px)) 0 0 / 100% 100% no-repeat,
    var(--notch) left bottom / var(--nbw) var(--nbh) no-repeat,
    linear-gradient(#000 0 0) left top / 100% calc(100% - var(--nbh) + 1px) no-repeat,
    linear-gradient(#000 0 0) right bottom / calc(100% - var(--nbw) + 1px) var(--nbh) no-repeat;
  mask-composite: intersect, add, add, add;
}
[data-theme='dark'] .hero__words { --words-bg: var(--stage-2); }
.hero__words::after { content: ''; position: absolute; inset: 0; z-index: -1; pointer-events: none; background: var(--grain-layer); }
.hero__words .floor { height: 46%; opacity: .75; }

/* THE AURA: two soft lights per range, drifting (transforms, on the
   compositor; painted once). Two sets: the next range's is coloured while
   unseen, then cross-fades in over the last (home.js). */
.haura { position: absolute; inset: 0; z-index: -1; pointer-events: none; }
.haura__set { position: absolute; inset: 0; opacity: 0; transition: opacity 1.5s var(--ease); }
.haura__set.is-on { opacity: 1; }
.haura__set:not(.is-on) i { animation-play-state: paused; }
.haura__set i {
  position: absolute; width: 82%; aspect-ratio: 1; border-radius: 50%;
  background: radial-gradient(closest-side, var(--aura), transparent);
}
.haura__set i:first-child {
  --aura: color-mix(in srgb, var(--tint-b, var(--brand)) 24%, transparent);
  left: -26%; top: -34%; animation: auraA 17s ease-in-out infinite alternate;
}
.haura__set i:last-child {
  --aura: color-mix(in srgb, var(--accent) 20%, transparent);
  right: -22%; bottom: -40%; width: 70%; animation: auraB 21s ease-in-out infinite alternate;
}
[data-theme='dark'] .haura__set i:first-child { --aura: color-mix(in srgb, var(--tint-b, var(--brand)) 46%, transparent); }
[data-theme='dark'] .haura__set i:last-child { --aura: color-mix(in srgb, var(--accent) 16%, transparent); }
@keyframes auraA { to { transform: translate(38%, 30%) scale(1.2); } }
@keyframes auraB { to { transform: translate(-34%, -26%) scale(.84); } }

/* THE INDEX: the range's number, large and outlined, top right; a turn
   rolls the next one up under the last (a mask of its own line). */
.hidx {
  position: absolute; z-index: -1; top: clamp(22px, 3.4vw, 40px); right: calc(var(--bite) + 14px);
  display: flex; align-items: flex-start; gap: 8px; pointer-events: none;
}
.hidx__roll {
  display: grid; overflow: hidden; height: 1em; padding-inline: .04em;
  font: 400 clamp(4.2rem, 2.2rem + 4.4vw, 7.4rem)/1 var(--font-display);
  font-variation-settings: 'opsz' 144, var(--wonk-off); letter-spacing: -.05em;
  color: transparent; -webkit-text-stroke: 1.5px color-mix(in srgb, var(--fg) 20%, transparent);
}
.hidx__n { grid-area: 1 / 1; translate: 0 100%; transition: translate 1s var(--ease-cine); }
.hidx__n.is-on { translate: 0 0; }
.hidx__n.is-out { translate: 0 -100%; }
.hidx__of { margin-top: 1.1em; font: 600 var(--fs-label)/1 var(--font-mono); letter-spacing: .12em; color: var(--fg-subtle); }

/* ----- panels */
/* One column no wider than the panel; each range centred in the cell the
   tallest one sets, so the middle of the words never moves. */
.hpanels { display: grid; grid-template-columns: minmax(0, 1fr); }
.hpanel { grid-area: 1 / 1; display: flex; flex-direction: column; justify-content: center; align-items: flex-start; min-width: 0; }
/* Only the range on screen can be read, focused or clicked; `.is-leaving`
   keeps the outgoing one painted for its exit. Without JS the first open
   range is the hero and the rest are in the bento below. */
html.js .hpanel:not(.is-on):not(.is-leaving) { visibility: hidden; }
html:not(.js) .hpanel:not(.is-on) { display: none; }

.hpanel__kicker {
  display: flex; align-items: center; flex-wrap: wrap; gap: var(--s-2) var(--s-3);
  font: 600 var(--fs-label)/1 var(--font-mono); text-transform: uppercase; letter-spacing: .12em;
  color: var(--fg-muted);
}
.hpanel__num {
  display: inline-grid; place-items: center; min-width: 2.7em; height: 2.4em; padding-inline: .6em;
  border-radius: var(--r-full); letter-spacing: .04em;
  background: var(--fg); color: var(--bg);
}
.hpanel__name { color: var(--fg); }
/* The side, in its colour: the kitchen's gold, the farm's green. */
.hpanel__side {
  display: inline-flex; align-items: center; gap: 7px; color: var(--fg-subtle);
}
.hpanel__side::before { content: ''; width: 18px; height: 1.5px; border-radius: 2px; background: var(--accent); }
.hpanel[data-side='farm'] .hpanel__side::before { background: var(--brand); }

.hpanel__title {
  margin-top: clamp(1rem, 2.6svh, 1.6rem);
  font-size: clamp(2.4rem, 1rem + 3vw, 4.15rem);
  font-weight: 800; line-height: .98; letter-spacing: -.042em;
  color: var(--fg); text-wrap: balance;
}
/* Letter by letter (home.js splits each word): each letter turns up off
   its line, hinged at its foot. Until the hero's first entrance the range
   on screen waits unseen (`is-pre`, home.js), so no letter is held by a
   script that has finished. */
.hpanel__title .c { display: inline-block; transform-origin: 50% 100%; }
html.js .hero.is-pre .hpanel :is(.c, .hpanel__kicker, .hpanel__lede, .hpanel__cta, .hproof, .hmark) { opacity: 0; }

/* THE MARK: the last word underlined by hand in the gold, drawn in once
   its letters have landed (home.js: a wipe, on the compositor). It sits
   in the word's own foot room, inside the word's mask. */
.hpanel__title .w { position: relative; }
.hmark { position: absolute; left: -.02em; right: -.04em; bottom: .01em; height: .15em; pointer-events: none; overflow: clip; overflow-clip-margin: 4px; }
.hmark svg { display: block; width: 100%; height: 100%; overflow: visible; }
.hmark path { fill: none; stroke: var(--accent); stroke-width: 4; stroke-linecap: round; vector-effect: non-scaling-stroke; }

/* The way in catches the light as its range arrives: the button's own
   sheen (main.css) crosses it once, after the letters. */
@media (prefers-reduced-motion: no-preference) {
  .hpanel.is-on .hpanel__cta .btn--brand::after { animation: btnSheen 1.1s var(--ease-out) 1.45s; }
}
@keyframes btnSheen { from { translate: -110% 0; } to { translate: 110% 0; } }

.hpanel__lede {
  margin-top: var(--s-4); max-width: 36ch;
  font-size: clamp(1.04rem, .96rem + .38vw, 1.26rem); line-height: 1.5; color: var(--fg-muted);
}
.hpanel__cta { display: flex; align-items: center; flex-wrap: wrap; gap: var(--s-3) var(--s-4); margin-top: clamp(1.25rem, 3.4svh, 2rem); min-height: 54px; }

/* WHAT STANDS BEHIND IT: three of the range's photographs overlapping,
   its count and its makers — rows, never a written claim. */
.hproof { display: flex; align-items: center; gap: 12px; margin-top: clamp(.9rem, 2.4svh, 1.4rem); }
.hproof__pics { display: flex; flex: none; }
.hproof__pics img {
  width: 40px; height: 40px; border-radius: 50%; object-fit: cover; background: var(--surface);
  box-shadow: 0 0 0 3px var(--words-bg), 0 6px 12px -6px rgba(17, 21, 18, .4);
}
.hproof__pics img + img { margin-left: -12px; }
.hproof__txt { display: grid; gap: 3px; min-width: 0; font-size: .84rem; line-height: 1.25; color: var(--fg-muted); }
.hproof__txt b { font: 600 .86rem/1.2 var(--font-mono); letter-spacing: -.01em; color: var(--fg); }

/* ----- the stats, in the words' cut corner: three numbers anyone can
   check, sitting on the page itself, the gap of the cut round them. */
.hstats {
  position: absolute; z-index: 2; left: 0; bottom: 0;
  width: calc(var(--nw) - var(--hgap) - 4px); height: calc(var(--nh) - var(--hgap));
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); align-items: center; gap: var(--s-3);
  padding-left: 6px;
}

/* WHERE THE SHOP WORKS FROM (D56, D57; owner, 2026-10-22, of the three
   numbers here: "no need … just in a creative way based in Mysore, use
   icon, use palace image"; of the palace drawn: "real Amba Vilas day and
   night image, creative and camera shots"; of the film: "more cool
   transitions … cinematic … suiting to the website … make it the best").
   "Based in" and the town; a pin on an emerald coin, pinging; for Mysore
   THE SCENE below, the coin bitten into it as the hero's coin is into its
   panels. */
.hcity { --pin: 44px; grid-template-columns: auto minmax(0, 1fr); gap: 14px; }
.hcity__pin {
  position: relative; flex: none; width: var(--pin); height: var(--pin); border-radius: 50%; z-index: 2;
  display: grid; place-items: center; color: #fff;
  background: linear-gradient(180deg, #14904A, var(--forest-500) 55%, #097034);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .25), 0 8px 18px -8px rgba(8, 106, 49, .7);
}
.hcity__pin .ico { width: 20px; height: 20px; stroke-width: 1.9; }
.hcity__pin::after {
  content: ''; position: absolute; inset: 0; border-radius: 50%; pointer-events: none;
  box-shadow: 0 0 0 2px var(--forest-400); opacity: 0;
  animation: cityPing 3s cubic-bezier(.16, 1, .3, 1) 1.4s infinite;
}
@keyframes cityPing { 0% { opacity: .75; scale: 1; } 60%, 100% { opacity: 0; scale: 1.5; } }
.hcity__txt { display: grid; gap: 5px; margin: 0; white-space: nowrap; }
.hcity__txt small { font: 600 var(--fs-label)/1 var(--font-mono); text-transform: uppercase; letter-spacing: .16em; color: var(--fg-subtle); }
.hcity__txt b { font: 800 clamp(1.45rem, 1.05rem + .9vw, 1.95rem)/.95 var(--font-display); letter-spacing: -.035em; color: var(--fg); }

/* THE SCENE (D60): Amba Vilas from day into night in the owner's own two
   pictures (2026-10-23: "use any 2 … no cc needed … the best looking
   cinematic transitions, transformation, coolest things"), one frame by
   day and by night, each palace cut out of its sky, on a 24s take:
     DAY — a slow dolly across the front.
     GOLDEN HOUR — the sky burns violet to gold, rays fan out from behind
       the great tower and the sun sets behind it (the palace hides it:
       the sky is behind, the palace in front), the stone warms.
     BLUE HOUR — the night's sky comes over, stars come out, the palace
       stands in shadow.
     THE ILLUMINATION — the bulbs flicker on, the great tower first, then
       the wings, then the towers at the ends (five bands of the night
       picture, cut where the building is cut); a bloom of gold behind; a
       sheen runs over the lit front.
     NIGHT — the moon rises from behind the right-hand towers onto its
       own place in the sky; the camera pushes in on the great tower;
       fireworks in the logo's three colours burst behind the domes; the
       bulbs glint.
     DAWN — a line of light wipes the night away from the left (the night
       of each stack is a window that slides off while its contents stay:
       two translates, D46) and the sun climbs back.
   Two cameras: the sky's moves less than the palace's — parallax.
   Transforms and opacity only; masks and clips static on what moves; no
   loop staggered by a positive delay (D59); paused by the hero's pause
   and off the screen. Dark theme: the take starts at blue hour, so the
   lights come on as the page opens. Reduced motion: still, by day (light)
   or lit (dark). */
.hcity__stage { position: relative; display: flex; align-items: center; min-width: 0; height: 100%; padding-left: calc(var(--pin) / 2); }
.hcity__stage .hcity__pin { position: absolute; left: 0; top: calc(50% - var(--pin) / 2); }
.hcity__scene {
  --T: 24s; --t0: 0s; --cine: cubic-bezier(.45, .05, .55, .95);
  --day: url(../img/place/amba-vilas-day.webp); --night: url(../img/place/amba-vilas-night.webp);
  position: relative; flex: 1; min-width: 0; height: 100%; max-height: 92px;
  container-type: inline-size; overflow: clip; isolation: isolate;
  border-radius: 18px; background: #7FA3D9;
  -webkit-mask: radial-gradient(circle at 0 50%, #0000 calc(var(--pin) / 2 + 6px), #000 calc(var(--pin) / 2 + 6.5px));
          mask: radial-gradient(circle at 0 50%, #0000 calc(var(--pin) / 2 + 6px), #000 calc(var(--pin) / 2 + 6.5px));
}
[data-theme='dark'] .hcity__scene { --t0: -9.6s; background: #0B1530; }
.hcity__scene * { animation-delay: var(--t0); animation-iteration-count: infinite; animation-duration: var(--T); }
.hcity__scene span, .hcity__scene img, .hcity__scene i { position: absolute; display: block; }

/* ---- the frame: every layer is the scene's own box, so one camera's
   transform lands the same on all of them */
.hs-sky, .hs-pal, .hs-box, .hs-stars { inset: 0; width: 100%; height: 100%; }
.hs-sky, .hs-box, .hs-stars { transform-origin: 50% 40%; animation-name: hsCamS; animation-timing-function: var(--cine); }
.hs-pal { transform-origin: 50% 32%; animation-name: hsCamP; animation-timing-function: var(--cine); }
img.hs-pal { object-fit: cover; object-position: 50% 12%; }
/* The night of each stack in a window wider than the scene by a soft edge
   either side; at dawn it slides off to the right, its contents back the
   other way, so the night stays put while its edge sweeps across. */
.hs-win {
  top: 0; bottom: 0; left: -15cqw; width: 130cqw;
  -webkit-mask: linear-gradient(90deg, #0000, #000 11.54%, #000 88.46%, #0000);
          mask: linear-gradient(90deg, #0000, #000 11.54%, #000 88.46%, #0000);
  animation-name: hsWin; animation-timing-function: var(--cine);
}
.hs-in { top: 0; bottom: 0; left: 0; width: 130cqw; animation-name: hsIn; animation-timing-function: var(--cine); }
.hs-in > :is(.hs-sky, .hs-pal, .hs-box, .hs-stars) { inset: 0 auto 0 15cqw; width: 100cqw; }

/* ---- THE SKY */
.hs-sky--day { background: url(../img/place/amba-vilas-sky-day.webp) 50% 0 / cover no-repeat; }
.hs-sky--night { background: url(../img/place/amba-vilas-sky-night.webp) 50% 0 / cover no-repeat; opacity: 0; animation-name: hsCamS, hsNight; animation-timing-function: var(--cine), linear; }
.hs-sky--gold {
  background: linear-gradient(180deg, #2B3A78 0%, #7A4E8E 16%, #D0607A 30%, #F47A2A 46%, #FDB802 64%, #FFE27A 84%);
  opacity: 0; animation-name: hsCamS, hsGold; animation-timing-function: var(--cine), linear;
}
/* Rays fanning out from behind the great tower as the sun goes down. */
.hs-rays {
  left: 50%; top: 22%; width: 96cqw; aspect-ratio: 1; margin: -48cqw 0 0 -48cqw; border-radius: 50%;
  background: repeating-conic-gradient(from 0deg, rgba(255, 222, 140, .32) 0 3.5deg, rgba(255, 222, 140, 0) 3.5deg 13deg);
  -webkit-mask: radial-gradient(closest-side, #000 6%, rgba(0, 0, 0, .55) 38%, #0000 74%);
          mask: radial-gradient(closest-side, #000 6%, rgba(0, 0, 0, .55) 38%, #0000 74%);
  opacity: 0; animation-name: hsRays; animation-timing-function: linear;
}
/* The sun: high over the right by day, down behind the great tower, round
   behind the left-hand towers through the night, up again at dawn. */
.hs-sun {
  left: 71.5cqw; top: -2cqw; width: 13cqw; aspect-ratio: 1; border-radius: 50%;
  background: radial-gradient(circle, #FFFBEA 0 16%, #FFE27A 24%, rgba(253, 184, 2, .5) 38%, rgba(253, 106, 0, 0) 68%);
  animation-name: hsSun; animation-timing-function: var(--cine);
}
.hs-stars { opacity: 0; animation-name: hsCamS, hsStarsIn; animation-timing-function: var(--cine), linear; }
.hs-stars i {
  left: var(--x); top: var(--y); width: 2px; height: 2px; border-radius: 50%;
  background: #FFF6DA; box-shadow: 0 0 4px 1px rgba(255, 246, 218, .6);
  animation: hsTwinkle 2.6s ease-in-out calc(var(--k) * -.37s) infinite alternate;
}
/* The moon, lifted out of the night picture, rises onto its own place in
   it (the sky under it is painted): from behind the right-hand towers. */
.hs-moon img {
  left: 77.7%; top: calc(100cqw / 3 * .0988); width: 5.8cqw; height: auto; translate: -50% -50%;
  opacity: 0; animation-name: hsMoon; animation-timing-function: cubic-bezier(.2, .6, .35, 1);
}
/* Fireworks behind the domes, in the logo's colours: a spark climbs from
   behind the roof, bursts into spokes and falls away. One clock, each
   firework a little ahead of the last (negative delays, D59). */
.hs-fw { left: var(--fx); top: var(--fy); width: 15cqw; aspect-ratio: 1; margin: -7.5cqw 0 0 -7.5cqw; }
.hs-fw::before, .hs-fw::after { content: ''; position: absolute; animation: var(--T) linear calc(var(--t0) - var(--sh, 0s)) infinite; }
.hs-fw::before {
  left: calc(50% - 1.5px); top: calc(50% - 1.5px); width: 3px; height: 3px; border-radius: 50%;
  background: #FFF4D6; box-shadow: 0 0 5px 1px var(--c);
  opacity: 0; animation-name: hsTrail; animation-timing-function: cubic-bezier(.2, .6, .4, 1);
}
.hs-fw::after {
  inset: 0; border-radius: 50%;
  background:
    radial-gradient(closest-side, #FFFDF2 0 7%, var(--c) 14%, #0000 22%),
    repeating-conic-gradient(from 6deg, var(--c) 0 2.6deg, #0000 2.6deg 18deg);
  -webkit-mask: radial-gradient(closest-side, #000 0 20%, #0000 26%, #0000 38%, #000 52%, #000 72%, #0000 100%);
          mask: radial-gradient(closest-side, #000 0 20%, #0000 26%, #0000 38%, #000 52%, #000 72%, #0000 100%);
  opacity: 0; scale: .12; animation-name: hsBurst;
}
.hs-fw--1 { --sh: 2.88s; }
.hs-fw--2 { --sh: 1.44s; }
/* The bloom of the lights, behind the palace's middle. */
.hs-bloom {
  background: radial-gradient(34% 62% at 50% 48%, rgba(255, 200, 70, .5), rgba(253, 140, 20, .14) 58%, #0000 80%);
  opacity: 0; animation-name: hsCamP, hsBloom; animation-timing-function: var(--cine), linear;
}

/* ---- THE PALACE: by day; warmed at golden hour; in shadow at blue hour */
.hs-pal--warm, .hs-pal--blue {
  -webkit-mask: var(--day) 50% 12% / cover no-repeat;
          mask: var(--day) 50% 12% / cover no-repeat;
  opacity: 0;
}
.hs-pal--warm {
  background: linear-gradient(180deg, rgba(255, 150, 40, .5), rgba(255, 112, 30, .42) 52%, rgba(120, 40, 20, .5));
  animation-name: hsCamP, hsWarm; animation-timing-function: var(--cine), linear;
}
.hs-pal--blue {
  background: linear-gradient(180deg, rgba(26, 34, 74, .84), rgba(10, 14, 34, .92));
  animation-name: hsCamP, hsBlue; animation-timing-function: var(--cine), linear;
}
/* …by night, in five bands cut where the building is (the end towers,
   the wings, the great tower; a hair of overlap, so no seam), lit from
   the middle out, each with a flicker. */
.hs-lit { opacity: 0; animation-name: hsCamP, hsOnC; animation-timing-function: var(--cine), linear; }
.hs-lit--c { clip-path: inset(0 41.2% 0 41.2%); }
.hs-lit--l1 { clip-path: inset(0 58.5% 0 23.7%); animation-name: hsCamP, hsOnI; }
.hs-lit--r1 { clip-path: inset(0 23.7% 0 58.5%); animation-name: hsCamP, hsOnI; }
.hs-lit--l2 { clip-path: inset(0 76% 0 0); animation-name: hsCamP, hsOnO; }
.hs-lit--r2 { clip-path: inset(0 0 0 76%); animation-name: hsCamP, hsOnO; }
/* A sheen over the lit front as the last band comes on. */
.hs-sheen {
  -webkit-mask: var(--night) 50% 12% / cover no-repeat;
          mask: var(--night) 50% 12% / cover no-repeat;
  opacity: 0; animation-name: hsCamP, hsSheenOn; animation-timing-function: var(--cine), linear;
}
.hs-sheen i {
  top: -30%; bottom: -30%; left: 0; width: 24%;
  background: linear-gradient(100deg, #0000 10%, rgba(255, 244, 214, .6) 48%, rgba(255, 220, 150, .25) 60%, #0000 88%);
  translate: -130% 0; animation-name: hsSheen; animation-timing-function: var(--cine);
}
/* Bulbs glinting on the lit front: placed on the picture's own box. */
.hs-glints { opacity: 0; animation-name: hsCamP, hsGlints; animation-timing-function: var(--cine), linear; }
.hs-frame { left: 0; width: 100%; top: calc(.12 * (100% - 100cqw / 3)); height: calc(100cqw / 3); }
.hs-frame i {
  left: var(--x); top: var(--y); width: 2.2cqw; aspect-ratio: 1; margin: -1.1cqw 0 0 -1.1cqw; border-radius: 50%;
  background: radial-gradient(circle, #FFFDF4 0 14%, rgba(255, 214, 120, .75) 30%, #0000 62%);
  animation: hsGlint 1.7s ease-in-out calc(var(--k) * -.31s) infinite alternate;
}
.hs-frame i::before, .hs-frame i::after {
  content: ''; position: absolute; left: 50%; top: 50%; translate: -50% -50%;
  background: linear-gradient(90deg, #0000, rgba(255, 246, 214, .9), #0000);
}
.hs-frame i::before { width: 260%; height: 1px; }
.hs-frame i::after { width: 1px; height: 260%; background: linear-gradient(180deg, #0000, rgba(255, 246, 214, .9), #0000); }
/* The dawn: a line of light on the night window's edge. */
.hs-edge {
  top: 0; bottom: 0; left: 0; width: 15cqw;
  background: linear-gradient(90deg, #0000 8%, rgba(255, 196, 120, .4) 46%, rgba(255, 244, 214, .72) 62%, rgba(255, 220, 160, .26) 82%, #0000);
}

/* ---- the clock, 24s (1% = .24s) */
@keyframes hsCamP {
  0%, 100% { transform: scale(1.06) translate(2.5%, 1%); }
  18% { transform: scale(1.1) translate(-2.5%, 1%); }
  32%, 48% { transform: scale(1.03) translate(0, .5%); }
  70% { transform: scale(1.55) translate(0, 13.5%); }
  84% { transform: scale(1.08) translate(1%, 1%); }
}
@keyframes hsCamS {
  0%, 100% { transform: scale(1.04) translate(1%, 0); }
  18% { transform: scale(1.06) translate(-1%, 0); }
  32%, 48% { transform: scale(1.02) translate(0, 0); }
  70% { transform: scale(1.16) translate(0, 3%); }
  84% { transform: scale(1.05) translate(.4%, 0); }
}
@keyframes hsGold { 0%, 17% { opacity: 0; } 31%, 44% { opacity: 1; } 52%, 100% { opacity: 0; } }
@keyframes hsRays {
  0%, 19% { opacity: 0; rotate: -6deg; }
  26% { opacity: 1; }
  33% { opacity: .75; }
  40%, 100% { opacity: 0; rotate: 16deg; }
}
@keyframes hsSun {
  0%, 100% { translate: 0 0; }
  17% { translate: -6cqw 3cqw; }
  33% { translate: -28cqw 12cqw; animation-timing-function: steps(1, end); }
  34%, 86% { translate: -58cqw 24cqw; }
  94.5% { translate: -40cqw 4cqw; }
}
@keyframes hsWarm { 0%, 17% { opacity: 0; } 30% { opacity: 1; } 40% { opacity: .35; } 46%, 100% { opacity: 0; } }
@keyframes hsBlue { 0%, 29% { opacity: 0; } 41%, 80% { opacity: 1; } 84%, 100% { opacity: 0; } }
@keyframes hsNight { 0%, 30% { opacity: 0; } 42%, 95% { opacity: 1; } 95.5%, 100% { opacity: 0; } }
@keyframes hsStarsIn { 0%, 34% { opacity: 0; } 46%, 95% { opacity: 1; } 95.5%, 100% { opacity: 0; } }
@keyframes hsTwinkle { from { opacity: .25; scale: .6; } to { opacity: 1; scale: 1.15; } }
@keyframes hsMoon {
  0%, 46% { opacity: 0; transform: translateY(260%); }
  47% { opacity: 1; }
  70%, 95% { opacity: 1; transform: none; }
  95.5%, 100% { opacity: 0; transform: translateY(260%); }
}
@keyframes hsOnC {
  0%, 42.4% { opacity: 0; }
  42.7% { opacity: .8; } 42.95% { opacity: .15; } 43.3% { opacity: 1; } 43.55% { opacity: .5; }
  44%, 95% { opacity: 1; }
  95.5%, 100% { opacity: 0; }
}
@keyframes hsOnI {
  0%, 43.8% { opacity: 0; }
  44.1% { opacity: .8; } 44.35% { opacity: .15; } 44.7% { opacity: 1; } 44.95% { opacity: .5; }
  45.4%, 95% { opacity: 1; }
  95.5%, 100% { opacity: 0; }
}
@keyframes hsOnO {
  0%, 45.2% { opacity: 0; }
  45.5% { opacity: .8; } 45.75% { opacity: .15; } 46.1% { opacity: 1; } 46.35% { opacity: .5; }
  46.8%, 95% { opacity: 1; }
  95.5%, 100% { opacity: 0; }
}
@keyframes hsBloom {
  0%, 42.4% { opacity: 0; scale: .6; }
  45% { opacity: 1; scale: 1.1; }
  50%, 95% { opacity: .72; scale: 1; }
  95.5%, 100% { opacity: 0; scale: .6; }
}
@keyframes hsSheenOn { 0%, 46.4% { opacity: 0; } 46.8%, 50.8% { opacity: 1; } 51.2%, 100% { opacity: 0; } }
@keyframes hsSheen { 0%, 46.8% { translate: -130% 0; } 50.8%, 100% { translate: 560% 0; } }
@keyframes hsGlints { 0%, 48% { opacity: 0; } 51%, 84% { opacity: 1; } 86%, 100% { opacity: 0; } }
@keyframes hsGlint { from { opacity: .1; scale: .4; } to { opacity: 1; scale: 1; } }
@keyframes hsTrail {
  0%, 64.8% { opacity: 0; translate: 0 26cqw; }
  65% { opacity: 1; translate: 0 26cqw; }
  66.9% { opacity: 1; translate: 0 0; }
  67.1%, 100% { opacity: 0; translate: 0 0; }
}
@keyframes hsBurst {
  0%, 66.9% { opacity: 0; scale: .12; translate: 0 0; }
  67% { opacity: 1; scale: .16; animation-timing-function: cubic-bezier(.1, .7, .3, 1); }
  69.6% { opacity: .9; scale: 1; translate: 0 2%; }
  71.6% { opacity: 0; scale: 1.1; translate: 0 8%; }
  71.7%, 100% { opacity: 0; scale: .12; translate: 0 0; }
}
@keyframes hsWin {
  0%, 85% { translate: 0 0; }
  94% { translate: 118cqw 0; }
  96% { translate: 118cqw 0; animation-timing-function: steps(1, end); }
  96.1%, 100% { translate: 0 0; }
}
@keyframes hsIn {
  0%, 85% { translate: 0 0; }
  94% { translate: -118cqw 0; }
  96% { translate: -118cqw 0; animation-timing-function: steps(1, end); }
  96.1%, 100% { translate: 0 0; }
}
@media (prefers-reduced-motion: reduce) {
  .hcity .hcity__scene *, .hcity .hcity__scene *::before, .hcity .hcity__scene *::after, .hcity__pin::after { animation: none; }
  [data-theme='dark'] .hcity__scene :is(.hs-sky--night, .hs-stars, .hs-lit, .hs-moon img) { opacity: 1; }
  [data-theme='dark'] .hcity__scene .hs-bloom { opacity: .72; }
}

/* =====
   THE SCREEN — the deck on the range's own light, its name behind it
   ===== */
.hero__screen {
  --sp: clamp(18px, 2vw, 28px);
  container-type: inline-size;
  display: grid; grid-template-columns: minmax(0, 1fr);
  padding: 16px var(--sp) 14px;
  background: var(--stage);
  -webkit-mask: radial-gradient(circle at calc(var(--hgap) / -2) var(--coin-y), #0000 var(--bite), #000 calc(var(--bite) + .5px));
  mask: radial-gradient(circle at calc(var(--hgap) / -2) var(--coin-y), #0000 var(--bite), #000 calc(var(--bite) + .5px));
}

/* THE LIGHT: one ground per range in its own tint; at night its
   photograph, blurred past recognition, glows through. The one on screen
   is open; the next opens over it out of the coin (home.js stacks them
   and opens it: a Web Animation of this circle, so a turn reads no
   layout to restart it). A circle needs `clip-path`: a scaled round mask
   grew as a rectangle (tried, D46). */
.hgrounds { position: absolute; inset: 0; z-index: -1; pointer-events: none; }
.hground {
  --ix: calc(var(--hgap) / -2); --iy: var(--coin-y);
  position: absolute; inset: 0; overflow: hidden;
  background:
    radial-gradient(54% 50% at 54% 44%, color-mix(in srgb, var(--tint-b) 20%, transparent), transparent 72%),
    radial-gradient(40% 46% at 100% 100%, color-mix(in srgb, var(--accent) 12%, transparent), transparent 70%),
    linear-gradient(160deg, color-mix(in srgb, var(--tint-b) 11%, var(--surface-sunk)) 0%, color-mix(in srgb, var(--tint-b) 28%, var(--surface-sunk)) 100%);
  clip-path: circle(0 at var(--ix) var(--iy));
}
.hground.is-on { clip-path: circle(150% at var(--ix) var(--iy)); }
.hground__img {
  position: absolute; inset: -12%; width: 124%; height: 124%; object-fit: cover;
  filter: blur(64px) saturate(1.5); opacity: 0;
}
[data-theme='dark'] .hground {
  background:
    radial-gradient(54% 50% at 54% 44%, color-mix(in srgb, var(--tint-b) 34%, transparent), transparent 72%),
    linear-gradient(160deg, color-mix(in srgb, var(--tint-b) 22%, #0B0E0C) 0%, #060807 100%);
}
[data-theme='dark'] .hground__img { opacity: .5; }
.hero__screen::after { content: ''; position: absolute; inset: 0; z-index: -1; pointer-events: none; background: var(--grain-layer); }


/* THE NAME behind the deck: huge, outlined, running sideways like a
   title card (the -50% loop of six copies); a turn lifts the row away and
   brings the next one up. Only the row on screen runs. */
.hname {
  position: absolute; inset: 0; z-index: 0; overflow: hidden; pointer-events: none;
  display: grid; align-items: start;
}
/* Its letters stand above the deck, their feet behind the cards: a
   masthead behind the subject. */
.hname__row {
  grid-area: 1 / 1; margin-top: clamp(4px, 1.2cqi, 14px);
  opacity: 0; translate: 0 75%;
  transition: translate 1.1s var(--ease-cine), opacity .8s var(--ease);
}
.hname__row.is-on { opacity: 1; translate: 0 0; }
.hname__row.is-out { opacity: 0; translate: 0 -75%; }
.hname__track {
  display: flex; align-items: center; gap: .3em; width: max-content;
  font: 800 clamp(4.6rem, 19cqi, 10rem)/1 var(--font-display);
  letter-spacing: -.045em; white-space: nowrap;
  color: transparent; -webkit-text-stroke: 1.5px color-mix(in srgb, var(--fg) 15%, transparent);
  animation: marq 46s linear infinite;
}
/* Only the row on screen runs and is drawn: five rows of outlined type,
   each 2,500px wide and running, were five layers the size of the hero
   (2026-10-15). The one leaving holds still as it lifts away. */
.hname__row:not(.is-on):not(.is-out) { visibility: hidden; }
.hname__row:not(.is-on):not(.is-out) .hname__track { animation: none; }
.hname__row.is-out .hname__track { animation-play-state: paused; }
.hname__track i {
  font-style: normal; font-size: .32em; -webkit-text-stroke: 0;
  color: color-mix(in srgb, var(--accent) 60%, transparent);
}
[data-theme='dark'] .hname__track { -webkit-text-stroke-color: rgba(255, 255, 255, .13); }

/* The deck's column is exactly as wide as the deck — one card and half of
   each neighbour. A card is as wide as the screen allows with its left
   neighbour CLEAR OF THE COIN'S BITE (100cqi is the screen's own width),
   and as tall as the panel allows with the tabs under it. */
.hcover {
  --card-w: max(150px, min(calc((100cqi - 74px) / 1.92), calc((var(--bento-h) - 132px - var(--stage-h)) / 1.5), 330px));
  --cover-w: calc(var(--card-w) * 1.92);
  position: relative; z-index: 1;
  min-width: 0; display: grid; grid-template-rows: minmax(0, 1fr) auto; justify-items: center; align-items: center;
}
/* min-width 0, or the slides' flex row sets this grid item's minimum. */
.hcover__frame { position: relative; width: 100%; min-width: 0; max-width: var(--cover-w); }
html:not(.js) .hcover__frame { max-width: none; }
/* A pool of light on the ground under the deck. */
.hcover__frame::before {
  content: ''; position: absolute; z-index: -1; left: 8%; right: 8%; bottom: 0; height: 26%;
  background: radial-gradient(closest-side, var(--pool), transparent);
  pointer-events: none;
}
/* The pointer's depth (home.js writes `transform` a few times a second;
   these transitions glide between, on the compositor): the name, the
   lights, the number and the deck each a different distance away. */
.hname, .haura, .hidx, .hcover__frame { will-change: transform; transition: transform 1s cubic-bezier(.16, 1, .3, 1); }

/* =====
   THE DECK — chelukala.com's coverflow, shot like film

   The geometry is the reference's: a 2:3 card in a frame 1.92 cards wide.
   The motion is a camera's, on Swiper's own clock (home.js): the dolly
   (1300ms, slow in, slow out); each picture drifting inside its frame
   against the move; the neighbours in shade; the middle card eased toward
   the lens, its picture settling out of a push-in, its name rising once it
   lands, its arrow turning into its CUT corner — and leaning to a pointer.

   THREE WHOLE CARDS (owner, three times): home.js `fitDeck` draws each
   neighbour in behind the centre card until its rounded corners and its
   shadow sit inside the frame. Never a card sliced by the frame.
   ===== */
.hcover__swiper { --ease-dolly: var(--ease-cine); width: 100%; padding-block: var(--s-4) var(--s-6); }
.hcover__swiper .swiper-wrapper { transition-timing-function: var(--ease-dolly); }
.hcover .swiper-slide { transition-property: transform, scale, opacity; transition-timing-function: var(--ease-dolly); }
/* The deck does not clip: a card arriving crosses the frame's edge as it
   fades; the screen clips at its own edge. Only the middle three are seen. */
html.js .hcover__swiper { overflow: visible; }
html.js .hcover .swiper-slide:not(.swiper-slide-active, .swiper-slide-prev, .swiper-slide-next) { opacity: 0; pointer-events: none; }
html:not(.js) .ccard--echo { display: none; }

/* Without JS, Swiper never starts: the slides are a 2x2 grid of cards. */
html:not(.js) .hcover__swiper { max-width: none; padding-block: 0; }
html:not(.js) .hcover__swiper .swiper-wrapper { display: grid; gap: var(--s-4); grid-template-columns: repeat(auto-fill, minmax(min(100%, 168px), 1fr)); }

/* A card is its picture (.ccard__pic), its foot-right corner CUT for the
   arrow, which sits in the notch on the screen. Its shadow is a soft pool
   under it, not a filter: a drop-shadow eased through a 1.3s dolly was
   painted again every frame. */
.ccard {
  position: relative; width: var(--card-w); height: calc(var(--card-w) * 1.5);
  display: grid; text-decoration: none; color: var(--white);
}
.ccard::before {
  content: ''; position: absolute; z-index: -1; left: 4%; right: 4%; bottom: -7%; height: 18%;
  border-radius: 50%; background: radial-gradient(closest-side, var(--ds), transparent);
  opacity: .6; transition: opacity 1.3s var(--ease-dolly), scale 1.3s var(--ease-dolly);
}
.hcover .swiper-slide-active::before { opacity: 1; scale: 1.08 1.25; }
[data-theme='dark'] .hcover .swiper-slide-active::before { background: radial-gradient(closest-side, var(--lit, rgba(244, 180, 0, .3)), transparent); }
html:not(.js) .ccard { width: auto; height: clamp(240px, 30vw, 340px); }
/* THE TILT: the picture and its arrow lean together (home.js writes the
   transform, eased; a pointer only). */
.ccard__tilt { grid-area: 1 / 1; display: grid; min-width: 0; transition: transform .55s cubic-bezier(.16, 1, .3, 1); }
/* THE FLOAT: the card in the middle hangs over its pool of light,
   breathing a few pixels up and down (translate; the lean is transform). */
@media (prefers-reduced-motion: no-preference) {
  html.js .hcover .swiper-slide-active .ccard__tilt { animation: cardFloat 4.8s ease-in-out 1.4s infinite alternate; }
}
@keyframes cardFloat { to { translate: 0 -6px; } }
.ccard__pic {
  --cut: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='70' height='70'%3E%3Cpath d='M0 0H70A16 16 0 0 1 54 16H46A30 30 0 0 0 16 46V54A16 16 0 0 1 0 70Z'/%3E%3C/svg%3E");
  --cut-w: 70px; --cut-h: 70px;    /* a 54px notch: the 48px arrow and a 6px gap */
  grid-area: 1 / 1; position: relative; overflow: hidden;
  display: flex; flex-direction: column; justify-content: flex-end;
  border-radius: 22px; background: #0D1C14;
}
/* THE CUT is the middle card's, ALWAYS, with its arrow in it (owner,
   2026-10-14/15: the cut belongs to the centre card — not a neighbour,
   "where is that cut"). It moves to the next card the moment the turn
   starts (Swiper's `swiper-slide-active`), and a range not open yet has
   one too, a clock in it. The neighbours are whole rounded cards. */
html.js .hcover .swiper-slide:not(.swiper-slide-active) .ccard__pic { -webkit-mask: none; mask: none; }

/* THE PUSH: the card in the middle eased toward the lens. */
.hcover .swiper-slide-active { scale: 1.035; }

/* THE SHADE every card but the middle one sits in: an overlay, so it costs
   nothing to fade; a hairline round every card. */
.ccard__pic::after {
  content: ''; position: absolute; inset: 0; z-index: 2; pointer-events: none;
  border-radius: inherit; background: var(--veil);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .08);
  transition: opacity 1.3s var(--ease-dolly);
}
.hcover .swiper-slide-active .ccard__pic::after { opacity: 0; }
html:not(.js) .ccard__pic::after { display: none; }

/* THE WINDOW and THE SETTLE. `--p` is the slide's progress (0 in the
   middle, ±1 either side) and `--pdur` the move's duration, both written by
   home.js. 1.18 overscale leaves room for the 5% drift at every moment of
   a move (1.16 showed a 1px edge mid-move). */
.ccard__img {
  position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover;
  scale: 1.18; translate: calc(var(--p, 0) * 5%) 0;
  transition: scale 2.2s var(--ease-out), translate var(--pdur, 0ms) var(--ease-dolly);
}
.hcover .swiper-slide-active .ccard__img, html:not(.js) .ccard__img { scale: 1.02; }

/* A cut-out pack render FILLS its card like a photograph (the owner: the
   picture alone). Waisted to 10-90% of its width, so 1.34x in the middle,
   1.48x either side where the drift runs; checked by sampling the edges. */
.ccard--cutout .ccard__img { scale: 1.48; }
.hcover .swiper-slide-active.ccard--cutout .ccard__img, html:not(.js) .ccard--cutout .ccard__img { scale: 1.34; }

/* A range with no photograph set: its own mark on its own tint. */
.ccard__fallback {
  position: absolute; inset: 0; display: grid; place-items: center;
  background: radial-gradient(70% 60% at 50% 34%, var(--tint-a, var(--brand-soft)), transparent 72%), var(--surface-sunk);
}
.ccard__fallback .ico { width: 34%; height: 34%; color: var(--tint-b, var(--brand)); opacity: .32; }

/* THE LENS — a faint vignette, and a gradient only where the title sits. */
.ccard__shade {
  position: absolute; inset: 0;
  background:
    radial-gradient(130% 95% at 50% 42%, transparent 56%, rgba(0, 0, 0, .34) 100%),
    linear-gradient(to top, rgba(6, 21, 13, .84) 0%, rgba(6, 21, 13, .34) 28%, transparent 52%);
}
/* THE GLARE: a light across the glass where the pointer is (home.js moves
   it, a transform); there only while the card leans. */
.ccard__glare {
  position: absolute; z-index: 3; left: -50%; top: -50%; width: 200%; height: 200%; pointer-events: none;
  background: radial-gradient(circle at 50% 50%, rgba(255, 255, 255, .3), rgba(255, 255, 255, .08) 16%, transparent 34%);
  opacity: 0; transition: opacity .5s var(--ease), transform .55s cubic-bezier(.16, 1, .3, 1);
}
.ccard.is-tilt .ccard__glare { opacity: 1; }
/* THE SHINE: as a card lands in the middle, a light runs once across its
   glass, the way it would across a pack turned to the window. */
.ccard__shine { position: absolute; inset: 0; z-index: 3; pointer-events: none; overflow: hidden; border-radius: inherit; }
.ccard__shine::before {
  content: ''; position: absolute; top: -25%; bottom: -25%; left: 0; width: 46%;
  background: linear-gradient(100deg, transparent 8%, rgba(255, 255, 255, .26) 46%, rgba(255, 255, 255, .06) 62%, transparent 92%);
  translate: -170% 0;
}
@media (prefers-reduced-motion: no-preference) {
  html.js .hcover .swiper-slide-active .ccard__shine::before { animation: cardShine 1.6s cubic-bezier(.3, .6, .2, 1) .85s; }
}
@keyframes cardShine { from { translate: -170% 0; } to { translate: 330% 0; } }

/* THE TITLE rises into the card once it has landed; only the middle card
   speaks. Left, clear of the notch. It fades up WHOLE, with no mask: a
   name on two lines rising through its own box showed its second line
   cut in half mid-turn (owner's screenshot, 2026-10-15). */
.ccard__body { position: relative; z-index: 4; display: grid; justify-items: start; margin: 0 72px 22px 20px; }
.ccard__name {
  font-family: var(--font-display); font-size: clamp(1.35rem, 1.05rem + .9vw, 1.85rem); font-weight: 800;
  line-height: 1.08; letter-spacing: -.015em; color: var(--white); text-shadow: 0 2px 12px rgba(0, 0, 0, .4);
  text-wrap: balance; opacity: 0; translate: 0 .55em;
  transition: opacity .25s var(--ease), translate .25s var(--ease-out);
}
.hcover .swiper-slide-active .ccard__name, html:not(.js) .ccard__name {
  opacity: 1; translate: 0 0;
  transition: opacity .5s var(--ease) .7s, translate .8s var(--ease-out) .7s;
}

/* The way in, in the notch: it turns from a glance to straight on as its
   card lands in the middle; the neighbours' sit back. */
.ccard__go {
  grid-area: 1 / 1; justify-self: end; align-self: end; position: relative; z-index: 3;
  width: 48px; height: 48px; display: grid; place-items: center; border-radius: 50%;
  background: var(--fg); color: var(--bg); rotate: -45deg; opacity: 0; scale: .7;
  transition: rotate .8s var(--ease-out), opacity .6s var(--ease), scale .8s var(--ease-out), background-color .3s var(--ease), color .3s var(--ease);
}
.ccard__go .ico { width: 18px; height: 18px; }
.hcover .swiper-slide-active .ccard__go { opacity: 1; scale: 1; rotate: 0deg; }
.ccard__go--soon { rotate: 0deg; background: var(--accent); color: var(--on-accent); }
html:not(.js) .ccard__go { opacity: 1; scale: 1; }
@media (hover: hover) and (pointer: fine) {
  .hcover .swiper-slide-active:hover .ccard__go { background-color: var(--brand); color: var(--on-brand); transition-delay: 0s; }
  .hcover .swiper-slide-active:hover .ccard__img { scale: 1.06; }
  .hcover .swiper-slide-active.ccard--cutout:hover .ccard__img { scale: 1.39; }
}
@media (prefers-reduced-motion: reduce) { .ccard__img, .ccard__name, .ccard__pic::after, .ccard__go, .ccard::before { transition: none; } }

/* ----- under the deck: THE DOCK (D49; owner, 2026-10-22, of D49's ink
   bar of five names and a lit key filling green to gold: "looks shit …
   why expand all when u can expand only active"; D54).
   One bar along the panel's foot — its round ends concentric with the
   panel's corners, the 3D standing over it — on the page's own surface,
   so it turns with the theme. Each range is ITS MARK under its 3D (owner,
   of dots: "instead of dots use its icons"); THE RANGE ON SCREEN IS A
   PILL grown out of its mark as the comet lands: the mark on a white
   coin, its clock a gold ring round the coin, its name. The pill sits
   over its own mark unless an end of the row is in the way, and the
   marks it would cover step aside (home.js `placeDock`). In a row too
   narrow for the names the pill is the coin alone.
   THE RING IS THE CLOCK: a CSS animation (`is-auto`, home.js), and its
   end is what turns the deck — no script runs between turns. Held
   (`is-held`), it stops where it is.
   ON A DRUM (2026-10-27; owner, adding Turmeric and Jaggery: "tab like
   rolling not everything show because it will not accommodate all"):
   the ranges stand round a drum seen from the front — the range on
   screen in the middle, its neighbours turned away either side, smaller
   and fainter, the rest behind, out of sight — and a turn rolls it
   (home.js `rollDrum`, scenes3d.js the same arc). */
.hcover__foot {
  --dock-h: 44px; --key-h: calc(var(--dock-h) - 8px); --dock: var(--surface);
  --pill: linear-gradient(180deg, #14904A, var(--forest-500) 55%, #097034);
  --spring: cubic-bezier(.3, 1.32, .6, 1);
  position: relative; display: flex; align-items: flex-end;
  /* 12px from the panel's sides and foot: a 22px round end in its 34px corner */
  width: calc(100% + 2 * var(--sp) - 24px); margin: 0 calc(12px - var(--sp)) -2px;
  padding: 0 4px 4px;
}
[data-theme='dark'] .hcover__foot { --dock: #1A1F1B; }
html:not(.js) .hcover__foot { display: none; }
.hcover__foot::before {
  content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: var(--dock-h);
  border-radius: calc(var(--dock-h) / 2); background: var(--dock);
  box-shadow: 0 1px 2px rgba(6, 21, 13, .07), 0 16px 30px -16px rgba(6, 21, 13, .42);
}
[data-theme='dark'] .hcover__foot::before {
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .07), 0 18px 34px -16px rgba(0, 0, 0, .8);
}
/* The pill grows as its range comes round to the front (home.js `--glide`). */
.htabs {
  --land: calc(var(--glide, .42s) + .05s);
  position: relative; z-index: 0; flex: 1; min-width: 0; height: calc(var(--stage-h) + 8px + var(--key-h));
}
/* Placed on arrival and on a resize: nothing moves while it is; and
   nothing is drawn until every tab has its seat. */
.hero .htabs.is-still .htab * { transition: none; }
html.js .htabs:not(.is-set) { visibility: hidden; }

/* A TAB: its stage, where its range stands in 3D (below), over its key —
   one seat on the drum, placed from the row's middle by one transform
   (home.js `seatTab`) and shrunk toward its key the farther round it is.
   Out of sight round the back, it cannot be pointed at. */
.htab {
  position: absolute; top: 0; left: calc(50% - var(--slot, 104px) / 2); width: var(--slot, 104px); height: 100%;
  display: grid; grid-template-rows: var(--stage-h) var(--key-h); row-gap: 8px;
  min-width: 0; padding: 0; margin: 0; border: 0; background: none; cursor: pointer;
  color: var(--fg); text-align: center;
  transform-origin: 50% calc(100% - var(--key-h) / 2);
  -webkit-tap-highlight-color: transparent;
}
.htab.is-back { pointer-events: none; }
.htab:focus-visible { outline: none; }

/* ITS KEY: a point at the middle of its tab, under its 3D, stepped aside
   (`--dx`) when the pill next door needs the room. All in it is placed
   from that point and moved by transforms, which the compositor runs.
   Shut, it is the range's mark; it gives way as the pill opens out of
   it, the same mark on the pill's coin. */
.htab__key {
  grid-area: 2 / 1; position: relative; justify-self: center; width: 0; height: var(--key-h);
  translate: var(--dx, 0px) 0;
  transition: translate .6s var(--ease-out) .08s, scale var(--dur-press) var(--ease-out);
}
.htab:active .htab__key { scale: .95; }
.htab__ico {
  position: absolute; left: -12px; top: calc(50% - 12px); width: 24px; height: 24px;
  display: grid; place-items: center; border-radius: 50%;
  color: color-mix(in srgb, var(--fg) 54%, transparent);
  transition: opacity .25s var(--ease) .14s, scale .4s var(--ease-out) .1s;
}
.htab__ico .ico { width: 19px; height: 19px; }
.htab.is-on .htab__ico { opacity: 0; scale: .4; transition-delay: var(--land); }

/* THE PILL: its two round ends and the length between them, so it grows
   out of its dot by translate and scale alone — a width eased frame by
   frame is laid out on the page's thread. Shut, the three sit on the
   mark, a fifth of their size. Open, the ends stand at its place (`--pl`, from the
   point) and width (`--pw`), both home.js's. */
.htab__pill { position: absolute; left: 0; top: 0; height: 100%; opacity: 0; transition: opacity .2s var(--ease) .16s; }
.htab__pill i {
  position: absolute; top: 0; left: calc(var(--key-h) / -2); width: var(--key-h); height: var(--key-h);
  border-radius: 50%; background: var(--pill); scale: .2;
  transition: translate .42s var(--ease-out) .06s, scale .42s var(--ease-out) .06s;
}
.htab__pill i:first-child {
  left: calc(var(--pl, 0px) + var(--key-h) / 2); width: max(0px, var(--pw, 0px) - var(--key-h)); border-radius: 0;
  scale: .0001 .2; transform-origin: calc(var(--pl, 0px) * -1 - var(--key-h) / 2) 50%;
}
.htab.is-on .htab__pill { opacity: 1; transition: opacity .1s var(--ease) var(--land); }
.htab.is-on .htab__pill i { scale: 1; transition: translate .62s var(--spring) var(--land), scale .62s var(--spring) var(--land); }
.htab.is-on .htab__pill i:nth-child(2) { translate: calc(var(--pl, 0px) + var(--key-h) / 2) 0; }
.htab.is-on .htab__pill i:nth-child(3) { translate: calc(var(--pl, 0px) + var(--pw, 0px) - var(--key-h) / 2) 0; }

/* WHAT THE PILL HOLDS: its range's mark on a white coin, the clock round
   the coin, the name. They come once the pill has begun to open, and go
   before it shuts. */
.htab__face {
  position: absolute; top: 0; left: var(--pl, 0px); width: max-content; height: 100%;
  display: flex; align-items: center; gap: 9px; padding: 0 17px 0 3px; white-space: nowrap;
  color: #fff; pointer-events: none;
}
/* The coin rides the pill's left end out of the mark: shut, it sits on
   the point; open, where the end stops (the same motion, so the two stay
   one). */
.htab__coin {
  position: relative; flex: none; width: calc(var(--key-h) - 6px); height: calc(var(--key-h) - 6px); border-radius: 50%;
  opacity: 0; scale: .4; translate: calc(var(--pl, 0px) * -1 - var(--key-h) / 2) 0;
  transition: opacity .14s var(--ease), scale .3s var(--ease-out), translate .42s var(--ease-out) .06s;
}
.htab__coin::before { content: ''; position: absolute; inset: 0; border-radius: 50%; box-shadow: inset 0 0 0 2px rgba(255, 255, 255, .22); }
.htab__disc {
  position: absolute; inset: 4px; display: grid; place-items: center; border-radius: 50%;
  background: #fff; color: var(--forest-500); box-shadow: 0 1px 2px rgba(3, 33, 18, .3);
}
.htab__disc .ico { width: 13px; height: 13px; stroke-width: 2.2; }
.htab__name {
  flex: none; font: 700 .82rem/1 var(--font-display); letter-spacing: -.005em;
  opacity: 0; translate: -6px 0; transition: opacity .12s var(--ease), translate .3s var(--ease-out);
}
.htab.is-on .htab__coin { opacity: 1; scale: 1; translate: 0 0; transition: opacity .2s var(--ease) calc(var(--land) + .04s), scale .6s var(--spring) calc(var(--land) + .04s), translate .62s var(--spring) var(--land); }
.htab.is-on .htab__name { opacity: 1; translate: 0 0; transition: opacity .28s var(--ease) calc(var(--land) + .24s), translate .5s var(--ease-out) calc(var(--land) + .24s); }
/* A row a little short of room: the names a size down (home.js). Too
   short: the coin alone, the name still read out. */
.htabs.is-small .htab__name { font-size: .74rem; }
.htabs.is-compact .htab__name { display: none; }
.htabs.is-compact .htab__face { padding: 0 3px; }

/* THE CLOCK: a gold ring drawn round the coin as the range's time runs —
   two half rings turning into two still half windows (`rotate`, which the
   compositor runs: a dash offset is drawn by the page every frame, D42).
   The right half fills in the first half of the time, the left in the
   second. */
.htab__arc { position: absolute; inset: 0; clip-path: inset(0 0 0 50%); }
.htab__arc + .htab__arc { clip-path: inset(0 50% 0 0); }
.htab__arc i { position: absolute; inset: 0; border-radius: 50%; box-shadow: inset 0 0 0 2px #FDB802; clip-path: inset(0 50% 0 0); }
.htab__arc + .htab__arc i { clip-path: inset(0 0 0 50%); }
.hero.is-auto .htab.is-on .htab__arc i { animation: clock-a var(--cycle) linear forwards; }
.hero.is-auto .htab.is-on .htab__arc + .htab__arc i { animation-name: clock; }
.hero.is-held .htab.is-on .htab__arc i { animation-play-state: paused; }
/* Each half is unseen while its edge lies on its window's: two edges
   on one line leak a hairline of gold there, from their smoothing. */
@keyframes clock-a { from { rotate: 0deg; opacity: 0; } 1% { opacity: 1; } 50%, to { rotate: 180deg; opacity: 1; } }
@keyframes clock { from, 49.9% { rotate: 0deg; opacity: 0; } 50% { rotate: 0deg; opacity: 1; } to { rotate: 180deg; opacity: 1; } }
/* Its head: a gold spark at the ring's leading end, turning with it. */
.htab__head { position: absolute; inset: 0; opacity: 0; }
.htab__head i {
  position: absolute; left: calc(50% - 2.5px); top: -1.5px; width: 5px; height: 5px; border-radius: 50%;
  background: #FFE27A; box-shadow: 0 0 0 1px #FDB802, 0 0 7px 1px rgba(253, 184, 2, .85);
}
.hero.is-auto .htab.is-on .htab__head { opacity: 1; animation: clock-h var(--cycle) linear forwards; }
.hero.is-held .htab.is-on .htab__head { animation-play-state: paused; }
@keyframes clock-h { from { rotate: 0deg; } to { rotate: 360deg; } }

.htab:focus-visible .htab__ico { outline: 2px solid var(--accent); outline-offset: 3px; }
.htab.is-on:focus-visible .htab__face { outline: 2px solid var(--accent); outline-offset: 3px; border-radius: var(--r-full); }
@media (hover: hover) and (pointer: fine) {
  .htab:not(.is-on):hover .htab__ico { scale: 1.14; color: var(--brand-ink); transition-delay: 0s; }
}
@media (prefers-reduced-motion: reduce) { .hero .htabs .htab * { transition: none; } }

/* EACH TAB'S STAGE (D44, D45): its range's mark, until scenes3d.js puts
   the range at work there in 3D — the coffee machine pouring, the dosa on
   its tawa, the sprout, the chaff cutter, the crate (a canvas over the row,
   drawn in a worker). The range on screen grows over its neighbours, up to
   the deck, and plays on its key's clock. 92px: the deck's own height
   never used it (51px spare at 1536x730), so the cards keep their size.
   It ends 4px over the dock: the ranges stand on it. */
.htab__stage { display: grid; place-items: end center; height: var(--stage-h); color: var(--fg-subtle); }
.htab__stage .ico { width: 22px; height: 22px; opacity: .5; transition: opacity .5s var(--ease), scale .5s var(--ease-out), color .3s var(--ease); }
.htab.is-on .htab__stage .ico { opacity: 1; scale: 1.18; color: var(--brand); }
.hero.has-scenes .htab__stage .ico { opacity: 0; scale: .5; color: inherit; }   /* hidden: no colour to ease each turn */
.hscenes {
  position: absolute; left: 0; right: 0; bottom: 0; z-index: 1; pointer-events: none;
  width: 100%; height: calc(100% + 58px); opacity: 0; transition: opacity .4s var(--ease);
}
.hero.has-scenes .hscenes { opacity: 1; }

/* THE STAND-INS (2026-10-26): where the 3D cannot run — Chrome with its
   GPU off for the session, no WebGL, reduced motion — each range stands
   there as its own 3D, rendered (home.js standIns): a still at rest, the
   range on screen grown and turning slowly under its light. Each picture
   is pinned to its tab by the point where the render stood the range
   (--ax, --ay: the tab's middle and the floor, as shares of the picture),
   and sized against a 106px stage, as the row was rendered. The rest
   still gives way only once the range on screen can be drawn. */
.htab__stage { position: relative; }
.htab__sti {
  position: absolute; left: 50%; bottom: 0; max-width: none; height: auto; pointer-events: none; opacity: 0;
  translate: calc(var(--ax) * -100%) calc((1 - var(--ay)) * 100%);
  transform-origin: calc(var(--ax) * 100%) calc(var(--ay) * 100%);
  transition: opacity .45s var(--ease), scale .7s var(--ease-out), transform .7s var(--ease-out);
}
.htab__sti--rest { --ax: var(--rax); --ay: var(--ray); width: calc(var(--rw) / 106 * 100%); }
.htab__sti--on { --ax: var(--oax); --ay: var(--oay); width: calc(var(--ow) / 106 * 100%); scale: .45; }
.hero.has-stills .htab__stage[data-stand] .ico { opacity: 0; scale: .5; color: inherit; }
.hero.has-stills .htab__sti--rest { opacity: 1; }
.hero.has-stills .htab.is-on { z-index: 1; }
.hero.has-stills .htab.is-on .htab__sti--on.is-ready { opacity: 1; scale: 1; }
.hero.has-stills .htab.is-on .htab__stage:has(.is-ready) .htab__sti--rest { opacity: 0; }
/* its neighbours step aside for it, a little smaller, as they do live */
.hero.has-stills .htab[data-off='1'] .htab__sti--rest { transform: translateX(16%) scale(.86); }
.hero.has-stills .htab[data-off='-1'] .htab__sti--rest { transform: translateX(-16%) scale(.86); }
@media (prefers-reduced-motion: reduce) { .htab__sti { transition: none; } }

/* THE PAUSE AND THE SPEED (WCAG 2.2.2), the dock's last key: buttons,
   never a hover hold — the owner read a deck that froze under the mouse
   as broken. The pause holds everything that runs on its own: the clock,
   the 3D at work, the name, the lights, the ticker. The speed (owner,
   2026-10-16: "speed 0.5 0.25, 1, 2x … along play and pause") sets how
   long a range stays and how fast its 3D works: the value on the button,
   the four choices in a menu that grows out of it. Hidden until home.js
   knows the deck turns on its own. */
.hctl {
  position: relative; flex: none; display: flex; align-items: center; gap: 6px;
  height: var(--key-h); margin-left: 8px;
}
.hctl:not(:has(> button:not([hidden]))) { display: none; }
.hplay, .hspeed {
  position: relative; flex: none; width: var(--key-h); height: var(--key-h);
  display: grid; place-items: center; padding: 0; border: 0; border-radius: 50%; cursor: pointer;
  transition: background-color var(--dur) var(--ease), scale var(--dur-press) var(--ease-out);
}
.hplay[hidden], .hspeed[hidden] { display: none; }
/* The speed: its value on a grey coin, the menu growing up out of it. */
.hspeed {
  overflow: hidden; background: color-mix(in srgb, var(--fg) 7%, transparent); color: var(--fg);
  font: 600 .76rem/1 var(--font-mono); font-variant-numeric: tabular-nums; letter-spacing: -.04em;
}
.hspeed:hover, .hspeed[aria-expanded='true'] { background: color-mix(in srgb, var(--fg) 13%, transparent); }
.hspeed.is-off { color: var(--accent-ink); }
.hspeed__v { display: block; }
/* The pause: an ink coin at the bar's end, round in its round end (the
   header's ink Cart, the hero's coin). Held, it turns the pill's green
   and shows the play sign; the two signs swap by scale and fade. */
.hplay { background: var(--fg); color: var(--surface); }
.hplay:hover { background: color-mix(in srgb, var(--fg) 84%, var(--forest-500)); }
.hplay[aria-pressed='true'], .hplay[aria-pressed='true']:hover { background: var(--forest-500); color: #fff; }
.hplay__g { grid-area: 1 / 1; display: grid; transition: opacity .16s var(--ease), scale .34s var(--ease-out); }
.hplay__g svg { width: 15px; height: 15px; fill: currentColor; }
.hplay__play svg { translate: 1px 0; }
.hplay[aria-pressed='false'] .hplay__play, .hplay[aria-pressed='true'] .hplay__pause { opacity: 0; scale: .3; }
@media (prefers-reduced-motion: reduce) { .hplay__g { transition: none; } }
.hspeeds {
  position: absolute; right: 0; bottom: calc(100% + 8px); z-index: 6;
  display: grid; gap: 2px; min-width: 118px; padding: 6px;
  border-radius: 18px; background: var(--surface); color: var(--fg);
  box-shadow: var(--shadow-float); outline: 1px solid color-mix(in srgb, var(--fg) 8%, transparent);
  transform-origin: calc(100% - var(--key-h) * 1.5 - 6px) 100%;   /* the speed's coin */
  opacity: 0; scale: .9; translate: 0 6px; visibility: hidden;
  transition: opacity .12s var(--ease), scale .12s var(--ease), translate .12s var(--ease), visibility 0s .12s;
}
.hspeeds.is-open {
  opacity: 1; scale: 1; translate: 0 0; visibility: visible;
  transition: opacity .18s var(--ease-out), scale .26s var(--ease-out), translate .26s var(--ease-out), visibility 0s;
}
.hspeeds__t { padding: 6px 12px 4px; font: 600 var(--fs-label)/1 var(--font-mono); letter-spacing: .1em; text-transform: uppercase; color: var(--fg-subtle); }
.hspeeds__i {
  display: flex; align-items: center; justify-content: space-between; gap: 18px;
  min-height: 40px; padding: 0 12px; border: 0; border-radius: 12px; background: none; color: inherit;
  font: 600 .8rem/1 var(--font-mono); font-variant-numeric: tabular-nums; text-align: left; cursor: pointer;
  transition: background var(--dur-fast) var(--ease);
}
.hspeeds__i::after {
  content: ''; width: 7px; height: 7px; border-radius: 50%; background: currentColor;
  opacity: 0; scale: .2; transition: opacity .2s var(--ease), scale .3s var(--ease-out);
}
.hspeeds__i[aria-checked='true'] { color: var(--brand); }
.hspeeds__i[aria-checked='true']::after { opacity: 1; scale: 1; }
.hspeeds__i:hover, .hspeeds__i:focus-visible { background: color-mix(in srgb, var(--fg) 7%, transparent); }
@media (prefers-reduced-motion: reduce) { .hspeeds, .hspeeds.is-open { transition: none; } }
.motion-paused :is(.marq__track, .hname__track, .haura__set i, .hcoin__glow, .hcoin__shine, .hcoin__lines,
  .hcoin__cart, .hcoin__sheen, .hcoin__spin, .hcity__scene *),
.motion-paused .hcity__pin::after, .motion-paused .hcity__scene *::before,
.motion-paused .hcity__scene *::after { animation-play-state: paused; }

.hcover__empty {
  display: grid; gap: var(--s-2); padding: var(--s-7) var(--s-5); text-align: center;
  border: 1px dashed var(--border-strong); border-radius: var(--r-lg); color: var(--fg-muted);
}


/* =====
   THE COIN (D38, D55; owner, 2026-10-22, of D38's white coin of rings:
   "looks worst … animation, transition, transformation and all"). The
   mark on A GOLD COIN WITH A THICKNESS: a white enamel face in a gold rim,
   six layers of milled edge behind it, the mark again on its back. TWO
   TRAILS OF LIGHT orbit it on tilted paths, the logo's green and its
   orange to gold, passing behind it. The cart in the mark REVS now and
   then — its speed lines stretch, the D and the M lurch forward — a sheen
   crosses the enamel and a shine runs round the rim. EVERY RANGE TURNS IT
   OVER (home.js `turnCoin`): its edge shows as it spins and a ring of
   light runs out across both panels. It arrives spinning in.
   One 3D scene (preserve-3d: the browser sorts what passes behind what).
   Transforms and opacity only, so the compositor runs it all; every loop
   holds off the screen (the hero's data-live) and under the pause. Placed
   by margins, not `translate`: the entrance owns `transform`.
   ===== */
.hcoin {
  --rim: calc(var(--coin) * .085);
  --gold: conic-gradient(from 200deg, #FFF0B8, #E7A900 11%, #FFF6D2 22%, #B98000 35%, #FFD95E 48%, #9C6A00 61%, #FFE8A3 74%, #D49A00 87%, #FFF0B8);
  position: absolute; z-index: 3; top: var(--coin-y);
  left: calc((100% - var(--hgap)) * 1.08 / 2.08 + var(--hgap) / 2);
  width: var(--coin); height: var(--coin); margin: calc(var(--coin) / -2) 0 0 calc(var(--coin) / -2);
  display: grid; place-items: center;
  perspective: 640px; transform-style: preserve-3d; pointer-events: none;
}
.hcoin > * { grid-area: 1 / 1; }
/* The light it stands in: the logo's gold into its green, breathing. */
.hcoin__glow {
  width: 136%; height: 136%; border-radius: 50%;
  background: radial-gradient(closest-side, rgba(253, 184, 2, .42), rgba(31, 154, 80, .16) 60%, transparent);
  transform: translateZ(-40px);
  animation: coinGlow 4.6s cubic-bezier(.37, 0, .63, 1) infinite alternate;
}
[data-theme='dark'] .hcoin__glow { background: radial-gradient(closest-side, rgba(253, 184, 2, .34), rgba(43, 176, 98, .2) 60%, transparent); }
@keyframes coinGlow { from { opacity: .5; scale: .9; } to { opacity: 1; scale: 1.04; } }

/* THE COIN: front, edge, back, each a disc in one turning body. */
.hcoin__body { position: relative; width: 100%; height: 100%; transform-style: preserve-3d; }
.hcoin__body > *, .hcoin__edge i { position: absolute; inset: 0; border-radius: 50%; }
.hcoin__edge { transform-style: preserve-3d; }
/* The milled edge: six discs a step behind each other, darker inward. */
.hcoin__edge i {
  background: linear-gradient(90deg, #7A5200, #D9A21A 26%, #FFE08A 50%, #C48C00 74%, #6E4A00);
  transform: translateZ(calc(var(--z) * -1.25px));
}
.hcoin__back { display: grid; place-items: center; background: var(--gold); transform: translateZ(-8.75px) rotateY(180deg); backface-visibility: hidden; }
.hcoin__front {
  display: grid; place-items: center; background: var(--gold); backface-visibility: hidden;
  box-shadow: inset 0 1px 1px rgba(255, 255, 255, .75), inset 0 -2px 3px rgba(110, 70, 0, .45), 0 18px 30px -14px rgba(70, 46, 0, .55);
}
/* The rim's shine, running round it. */
.hcoin__shine {
  position: absolute; inset: 0; border-radius: 50%;
  background: conic-gradient(transparent 0 7%, rgba(255, 255, 255, .9) 12%, transparent 17% 57%, rgba(255, 255, 255, .6) 62%, transparent 67%);
  -webkit-mask: radial-gradient(closest-side, transparent calc(100% - var(--rim)), #000 calc(100% - var(--rim) + 1px));
          mask: radial-gradient(closest-side, transparent calc(100% - var(--rim)), #000 calc(100% - var(--rim) + 1px));
  animation: coinSpin 7s linear infinite;
}
@keyframes coinSpin { to { rotate: 360deg; } }
/* The enamel face, sunk in the rim; the mark on it. */
.hcoin__enamel {
  position: absolute; inset: var(--rim); border-radius: 50%; overflow: hidden;
  display: grid; place-items: center;
  background: radial-gradient(circle at 34% 26%, #FFFFFF, #EEF1EC);
  box-shadow: inset 0 2px 5px rgba(60, 40, 0, .3), 0 0 0 1px rgba(150, 100, 0, .5);
}
.hcoin__enamel > * { grid-area: 1 / 1; }
.hcoin__enamel picture { display: contents; }
.hcoin__mark { display: block; width: 100%; height: auto; }
.hcoin__back .hcoin__mark { width: 76%; }
/* The mark cut in two, the same picture twice: its speed lines (the left
   quarter, the middle third of its height; 1px over the cut, so the join
   has no seam) and the cart. The lines stretch from where they meet it. */
.hcoin__lines, .hcoin__cart { display: block; width: 76%; }
.hcoin__lines { clip-path: inset(33.6% 73.6% 35.5% 0); transform-origin: 25.9% 50%; animation: coinRev 5.4s cubic-bezier(.16, 1, .3, 1) infinite 1.6s; }
.hcoin__cart:not(.is-whole) { clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%, 0 64.5%, 25.9% 64.5%, 25.9% 33.6%, 0 33.6%); animation: coinLurch 5.4s cubic-bezier(.16, 1, .3, 1) infinite 1.6s; }
@keyframes coinRev {
  0%, 72% { scale: 1; opacity: 1; }
  78% { scale: 1.5 1; opacity: .8; }
  83% { scale: 1.08 1; opacity: 1; }
  88% { scale: 1.3 1; }
  95%, 100% { scale: 1; }
}
@keyframes coinLurch {
  0%, 72% { transform: none; }
  78% { transform: translateX(5%) skewX(-12deg); }
  86% { transform: translateX(-1.5%) skewX(4deg); }
  94%, 100% { transform: none; }
}
/* A sheen across the enamel now and then. */
.hcoin__sheen {
  position: absolute; inset: -30% -70%;
  background: linear-gradient(100deg, transparent 43%, rgba(255, 255, 255, .85) 50%, transparent 57%);
  translate: -62% 0;
  animation: coinSheen 6.2s cubic-bezier(.22, .61, .36, 1) infinite 2.4s;
}
@keyframes coinSheen { 0%, 70% { translate: -62% 0; } 90%, 100% { translate: 62% 0; } }

/* THE TRAILS: each a ring in a tilted plane, a fading arc of light and its
   head turning round it; the far half passes behind the coin. The second
   runs the other way, its arc drawn the other way round. */
.hcoin__orbit {
  --c: #2BB062; --h: #E4FFD0; --spin: 3.9s; --yaw: -20deg;
  width: calc(100% + 16px); height: calc(100% + 16px); transform-style: preserve-3d;
  transform: rotateZ(var(--yaw)) rotateX(72deg);
}
.hcoin__orbit--b { --c: #FD8A00; --h: #FFE27A; --spin: 5.7s; --yaw: 24deg; width: calc(100% + 22px); height: calc(100% + 22px); }
.hcoin__spin { position: absolute; inset: 0; animation: coinSpin var(--spin) linear infinite; }
.hcoin__orbit--b .hcoin__spin { animation-direction: reverse; }
.hcoin__trail {
  position: absolute; inset: 0; border-radius: 50%;
  background: conic-gradient(transparent 0 56%, var(--c) 97%, var(--h) 100%);
  -webkit-mask: radial-gradient(closest-side, transparent calc(100% - 3px), #000 calc(100% - 2.5px));
          mask: radial-gradient(closest-side, transparent calc(100% - 3px), #000 calc(100% - 2.5px));
}
.hcoin__orbit--b .hcoin__trail { scale: -1 1; }
.hcoin__spin i {
  position: absolute; left: calc(50% - 4px); top: -2.5px; width: 8px; height: 8px; border-radius: 50%;
  background: var(--h); box-shadow: 0 0 6px 2px var(--c), 0 0 16px 5px color-mix(in srgb, var(--c) 45%, transparent);
}
/* The ring of light it sends out as it turns over (home.js). */
.hcoin__wave {
  width: 100%; height: 100%; border-radius: 50%; opacity: 0;
  box-shadow: 0 0 0 2px rgba(253, 184, 2, .95), 0 0 22px 6px rgba(253, 184, 2, .38), inset 0 0 14px 2px rgba(253, 184, 2, .3);
}
@media (prefers-reduced-motion: reduce) {
  .hcoin :is(.hcoin__glow, .hcoin__shine, .hcoin__lines, .hcoin__cart, .hcoin__sheen, .hcoin__spin) { animation: none; }
}

/* ----- the ticker, under the panels */
/* Its own line under the panels, clear of their rounded feet. */
.hero__band { position: relative; margin-top: clamp(12px, 2.4svh, 22px); }
.marq {
  overflow: hidden; padding-block: 18px;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
          mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
}
.marq__track { display: flex; gap: var(--s-7); width: max-content; animation: marq 42s linear infinite; }
@keyframes marq { to { translate: -50% 0; } }
.marq__item {
  display: inline-flex; align-items: center; gap: var(--s-7);
  font: 600 var(--fs-label) var(--font-mono); text-transform: uppercase; letter-spacing: .14em;
  color: var(--fg-muted); white-space: nowrap;
}
/* A small mark between facts, in the harvest gold. */
.marq__item::before { content: ''; width: 6px; height: 6px; border-radius: 2px; rotate: 45deg; background: var(--accent); opacity: .8; }
@media (prefers-reduced-motion: reduce) { .marq__track { animation: none; } }

.badge--soon {
  background: var(--accent-soft); color: var(--accent-ink);
  border: 1px dashed color-mix(in srgb, var(--accent) 45%, transparent); white-space: nowrap;
}


/* =====
   SECTION HEADS — a heading on the left, its way in on the right
   ===== */
.sechead { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: var(--s-5); align-items: end; margin-bottom: clamp(2rem, 3.6vw, 3rem); }
.sechead__main { max-width: 60ch; }
.sechead__ctrl { display: flex; align-items: center; gap: var(--s-2); }
.railall {
  display: inline-flex; align-items: center; gap: var(--s-3);
  height: 50px; padding: 0 6px 0 var(--s-5);
  border: 1px solid var(--border); border-radius: var(--r-full); background: var(--surface);
  font: 600 var(--fs-label) var(--font-mono); text-transform: uppercase; letter-spacing: var(--track-label);
  color: var(--fg); text-decoration: none; white-space: nowrap;
  transition: border-color var(--dur) var(--ease), box-shadow .35s var(--ease-out), scale var(--dur-press) var(--ease-out);
}
.railall .ico {
  width: 38px; height: 38px; padding: 11px; border-radius: 50%;
  background: var(--brand); color: var(--on-brand); rotate: -45deg;
  transition: rotate .4s var(--ease-out);
}
.railall:hover { color: var(--fg); border-color: var(--border-strong); box-shadow: var(--shadow-float); }
@media (hover: hover) and (pointer: fine) { .railall:hover .ico { rotate: 0deg; } }



/* =====
   02 · TWO DIRECTIONS — an aisle to a row; the other ranges as tiles

   An aisle (D72) has a row of its own (D75): one panel, its band, its
   ranges inside as cards. The ranges in no aisle stand as tiles on one row,
   up to three across (index.php sets --cols; the last of a short row
   takes what is left of it, --span). Each is unveiled from its middle as
   it scrolls in.
   ===== */
.tiles {
  display: grid; gap: clamp(12px, 1.3vw, 20px);
  grid-template-columns: repeat(var(--cols, 3), minmax(0, 1fr));
  grid-auto-rows: minmax(clamp(260px, 22vw, 330px), auto);
}
.tile--wide { grid-column: span var(--span, 2); }

/* A tile is its picture (.tile__bg), its top corner CUT (main.css) for
   the arrow, which sits in the notch on the page. THE SHADOW IS PAINTED
   ONCE (D46), a box-shadow, and the deeper one of a hover is a second
   layer faded in: a drop-shadow followed the cut, but the tiles rise with
   the scroll, and two blurred shadows per tile were filtered again on
   every frame of it — 6 to 9 frames over 50ms in a scroll at full speed,
   1 without (measured 2026-10-16). Inside the notch nothing was ever
   drawn either way. */
.tile {
  --cut: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='80' height='80'%3E%3Cpath d='M0 80H80A20 20 0 0 0 60 60H54A34 34 0 0 1 20 26V20A20 20 0 0 0 0 0Z'/%3E%3C/svg%3E");
  --cut-w: 80px; --cut-h: 80px;    /* a 60px notch: the 52px arrow and an 8px gap */
  position: relative; display: grid; border-radius: var(--r-2xl);
  color: var(--white); text-decoration: none;
  box-shadow: 0 1px 1px rgba(17, 21, 18, .04), 0 20px 22px rgba(17, 21, 18, .14);
  transition: translate .5s var(--ease-out), scale var(--dur-press) var(--ease-out);
}
.tile::after {
  content: ''; position: absolute; inset: 0; z-index: -1; border-radius: inherit; pointer-events: none;
  box-shadow: 0 2px 2px rgba(17, 21, 18, .06), 0 30px 30px rgba(17, 21, 18, .26);
  opacity: 0; transition: opacity .5s var(--ease-out);
}
.tile__bg {
  --glow: rgba(255, 255, 255, .16);
  grid-area: 1 / 1; position: relative; isolation: isolate; overflow: hidden; overflow: clip;
  display: flex; flex-direction: column; justify-content: flex-end;
  padding: clamp(1.25rem, 2.2vw, 2rem); padding-top: 4.75rem;
  border-radius: inherit;
  background: #15110D;   /* only ever seen while a picture loads */
}
.tile:hover { color: var(--white); }
.tile:focus-visible { outline: 3px solid var(--focus-ring); outline-offset: 3px; }
.tile:active { scale: .985; }

.tile__img {
  position: absolute; inset: 0; z-index: -2; width: 100%; height: 100%; object-fit: cover;
  transition: scale 1.2s var(--ease-out);
}
/* A pack render fills its tile with the FOOD in its art (bottom-aligned,
   1.7x, a point right of centre where the bowl sits), never the pack on a
   coloured stage: the owner, "only images". */
.tile--cutout .tile__img { object-position: 50% 100%; transform-origin: 62% 50%; scale: 1.7; }

/* Words on a picture: a gradient where the words are, never a flat scrim.
   Warm-dark on the kitchen side, forest-dark on the farm side. */
.tile__shade {
  --shade: 18, 12, 6;
  position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(to top, rgba(var(--shade), .9) 0%, rgba(var(--shade), .5) 36%, rgba(var(--shade), 0) 66%);
}
.tile--farm .tile__shade { --shade: 6, 21, 13; }

.tile__tag {
  position: absolute; top: clamp(1rem, 1.6vw, 1.4rem);
  background: rgba(6, 12, 9, .42);
  -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
  left: clamp(1rem, 1.6vw, 1.4rem); padding: 7px 13px; border-radius: var(--r-full);
  font: 600 var(--fs-label) var(--font-mono); text-transform: uppercase; letter-spacing: .1em; color: var(--white); white-space: nowrap;
}
.tile__tag--soon { background: rgba(244, 180, 0, .95); color: #241900; }
/* The way in: an arrow in the notch, turning toward where it goes; its
   centre is the notch's, so the two curves run parallel. */
.tile__arrow {
  grid-area: 1 / 1; justify-self: end; align-self: start; position: relative; z-index: 2;
  width: 52px; height: 52px; display: grid; place-items: center;
  border-radius: 50%; background: var(--fg); color: var(--bg); rotate: -45deg;
  transition: rotate .5s var(--ease-out), background-color .3s var(--ease), color .3s var(--ease);
}
.tile__arrow .ico { width: 18px; height: 18px; }

.tile__body { display: grid; justify-items: start; gap: var(--s-2); }
.tile__ico { width: 28px; height: 28px; color: var(--forest-300); margin-bottom: var(--s-1); }
.tile--farm .tile__ico { color: #FFB27F; }
.tile__name {
  font-family: var(--font-display); font-size: clamp(1.5rem, 1rem + 1.2vw, 2.2rem); font-weight: 800;
  line-height: 1.04; letter-spacing: -.025em; color: var(--white); text-wrap: balance;
}
.tile__blurb {
  max-width: 34ch; font-size: .96rem; line-height: 1.5; color: rgba(255, 255, 255, .84);
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.tile__go {
  display: inline-flex; align-items: center; gap: var(--s-2); margin-top: var(--s-3);
  font: 600 var(--fs-label) var(--font-mono); text-transform: uppercase; letter-spacing: .1em; color: var(--harvest-400);
}
.tile__go .ico { transition: translate .4s var(--ease-out); }
@media (hover: hover) and (pointer: fine) {
  .tile:not(.tile--soon):hover { translate: 0 -6px; }
  .tile:not(.tile--soon):hover::after { opacity: 1; }
  .tile--photo:not(.tile--soon):hover .tile__img { scale: 1.06; }
  .tile--cutout:not(.tile--soon):hover .tile__img { scale: 1.78; }
  .tile:hover .tile__arrow { rotate: 0deg; background-color: var(--brand); color: var(--on-brand); }
  .tile:hover .tile__go .ico { translate: 6px 0; }
}
/* Coming soon: shown, badged, not a link; it neither lifts nor gives. */
.tile--soon { cursor: default; }
.tile.tile--soon:active { scale: none; }

/* AN AISLE'S ROW (D75; owner, 2026-11-05, with a crop of D72's tile:
   "make like in the above image but full row okay and small gaps between
   the cards"): the tile they drew — a dark panel; a band with the aisle's
   mark, its name and the way into all of it; the panel's corner cut for
   the arrow; its ranges below as pictures with their names on them —
   across the row's whole width, every range a card of its own with a small
   gap round it. Up to five share the row; more page sideways a whole card
   at a time; two by two on a tablet or a phone. The panel's shadow is painted once,
   on the row (the tile's way, D46). */
.aisle {
  --cut: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='80' height='80'%3E%3Cpath d='M0 80H80A20 20 0 0 0 60 60H54A34 34 0 0 1 20 26V20A20 20 0 0 0 0 0Z'/%3E%3C/svg%3E");
  --cut-w: 80px; --cut-h: 80px;    /* the tile's: a 52px arrow in a 60px notch */
  --gap: 10px;
  position: relative; display: grid; border-radius: var(--r-2xl);
  margin-bottom: clamp(12px, 1.3vw, 20px);   /* the bento's own gap: one set with the tiles */
  box-shadow: 0 1px 1px rgba(17, 21, 18, .04), 0 20px 22px rgba(17, 21, 18, .14);
}
.aisle__panel {
  --glow: rgba(255, 255, 255, .1);
  grid-area: 1 / 1; position: relative; isolation: isolate; overflow: hidden; overflow: clip;
  display: grid; border-radius: inherit; background: #15110D;
}
/* at night a step lighter than the page, so the panel reads as one */
[data-theme='dark'] .aisle__panel { background: #1D1813; }
/* The band: tall enough that the notch never reaches the cards. */
.aisle__head {
  display: flex; align-items: center; flex-wrap: wrap; gap: 6px 14px;
  min-height: calc(var(--cut-h) - 6px);
  padding: clamp(.9rem, 1.4vw, 1.2rem) calc(var(--cut-w) + 12px) clamp(.8rem, 1.2vw, 1rem) clamp(1.25rem, 2.2vw, 2rem);
}
.aisle__ico { flex: none; width: 28px; height: 28px; color: var(--forest-300); }
.aisle__title {
  font-family: var(--font-display); font-size: clamp(1.5rem, 1rem + 1.2vw, 2.2rem); font-weight: 800;
  line-height: 1.04; letter-spacing: -.025em; color: var(--white);
}
.aisle__ctrl { display: flex; align-items: center; gap: 8px; margin-left: auto; }
.aisle__go {
  display: inline-flex; align-items: center; gap: var(--s-2); min-height: 36px;
  font: 600 var(--fs-label) var(--font-mono); text-transform: uppercase; letter-spacing: .1em;
  color: var(--harvest-400); text-decoration: none;
}
.aisle__go:hover { color: var(--white); }
.aisle__go .ico { transition: translate .4s var(--ease-out); }
.aisle__btn {
  width: 36px; height: 36px; display: grid; place-items: center;
  border: 0; border-radius: 50%; background: rgba(255, 255, 255, .12); color: var(--white);
  transition: background-color var(--dur) var(--ease), opacity var(--dur) var(--ease), scale var(--dur-press) var(--ease-out);
}
.aisle__btn:active { scale: .92; }
.aisle__btn:disabled { opacity: .3; cursor: default; }
.aisle__blurb { flex-basis: 100%; max-width: 62ch; font-size: .96rem; line-height: 1.5; color: rgba(255, 255, 255, .84); }

/* The cards: --per of them to the panel's width, the gap round each. */
.aisle__rail {
  --per: min(var(--count, 4), 5);
  display: grid; grid-auto-flow: column; gap: var(--gap);
  grid-auto-columns: calc((100% - (var(--per) - 1) * var(--gap)) / var(--per));
  margin: 0; padding: 0 var(--gap) var(--gap); list-style: none;
  overflow-x: auto; overscroll-behavior-x: contain;
  scroll-snap-type: x mandatory; scroll-padding-inline: var(--gap); scrollbar-width: none;
}
.aisle__rail::-webkit-scrollbar { display: none; }
/* A card's corners run with the panel's, inside its gap. */
.lane {
  position: relative; isolation: isolate; min-width: 0; height: clamp(230px, 21vw, 310px);
  overflow: hidden; overflow: clip; border-radius: calc(var(--r-2xl) - var(--gap));
  background: #241D16; scroll-snap-align: start;
}
.lane__in {
  position: absolute; inset: 0; display: flex; flex-direction: column; justify-content: flex-end; gap: 5px;
  padding: clamp(.9rem, 1.4vw, 1.25rem); color: var(--white); text-decoration: none;
}
.lane__in:hover { color: var(--white); }
.lane__in:focus-visible { outline: 3px solid var(--focus-ring); outline-offset: -3px; border-radius: inherit; }
.lane__img {
  position: absolute; inset: 0; z-index: -2; width: 100%; height: 100%; object-fit: cover;
  transition: scale 1.2s var(--ease-out), opacity .5s var(--ease);
}
/* a pack render, should one come without a tile: the food in its art */
.lane--cutout .lane__img { object-position: 50% 100%; transform-origin: 56% 92%; scale: 2; }
.lane__mark { position: absolute; inset: 0; z-index: -1; width: 30%; height: 30%; margin: auto; color: rgba(255, 255, 255, .8); }
/* Words on a picture: a gradient where they are, never a flat scrim. */
.lane__shade {
  position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(to top, rgba(18, 12, 6, .9) 0%, rgba(18, 12, 6, .42) 34%, rgba(18, 12, 6, 0) 62%);
}
.lane__name {
  font-family: var(--font-display); font-size: clamp(1.1rem, .82rem + .6vw, 1.5rem); font-weight: 800;
  line-height: 1.05; letter-spacing: -.02em; text-wrap: balance;
}
.lane__n { font: 600 var(--fs-label) var(--font-mono); text-transform: uppercase; letter-spacing: .1em; color: rgba(255, 255, 255, .78); }
.lane__n--soon { color: var(--harvest-400); }
.lane--soon .lane__in { cursor: default; }
/* the way into all of it, in the cut corner: the tile's arrow (.tile__arrow) */
@media (hover: hover) and (pointer: fine) {
  .lane:not(.lane--soon):hover .lane__img { scale: 1.07; }
  .lane--cutout:not(.lane--soon):hover .lane__img { scale: 2.1; }
  .aisle__rail:has(.lane:not(.lane--soon):hover) .lane:not(:hover) .lane__img { opacity: .74; }
  .aisle__go:hover .ico { translate: 4px 0; }
  .aisle__btn:hover { background-color: rgba(255, 255, 255, .22); }
  .aisle__arrow:hover, .aisle:has(.aisle__go:hover) .aisle__arrow { rotate: 0deg; background-color: var(--brand); color: var(--on-brand); }
}
@media (prefers-reduced-motion: reduce) { .lane__img, .aisle__go .ico { transition: none; } }
@media (prefers-reduced-motion: reduce) { .tile, .tile__img, .tile__go .ico, .tile__arrow { transition: none; } }


/* =====
   03 · ABOUT US — the About page's own words in one panel (owner,
   2026-10-14: "you forgot to add about us in the index") over THE BRIDGE
   (D64; 2026-10-23, of the hub before it: "doesnt make sense, something
   creative meaningful"): the purpose's sentence — a bridge between
   producers and consumers — and the shop's two sides as one place in 3D,
   the makers on one bank, the takers on the other, Dinkomart's trucks
   carrying food across one way and farm inputs back the other. Rendered
   once and played by the browser (an animated AVIF: off the page's
   thread; lazy), by day in the light theme and by night in the dark; the
   pairs' names pinned over their places in HTML. The title on the left,
   the story's line, the purpose and the founders on the right, the bridge
   across the panel below; its foot-right corner CUT (main.css .cut) for
   the arrow into the whole story.
   ===== */
.habout .tone-0 { --tone: var(--brand);  --tone-ink: var(--brand-ink); }
.habout .tone-1 { --tone: var(--accent); --tone-ink: var(--accent-ink); }
.habout .tone-2 { --tone: var(--farm);   --tone-ink: var(--farm-ink); }

.habout__wrap { position: relative; display: grid; }
.habout__panel {
  --cut: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='82' height='82'%3E%3Cpath d='M0 0H82A18 18 0 0 1 64 18H54A36 36 0 0 0 18 54V64A18 18 0 0 1 0 82Z'/%3E%3C/svg%3E");
  --cut-w: 82px; --cut-h: 82px;    /* a 64px notch: the 56px arrow and an 8px gap */
  grid-area: 1 / 1; position: relative; isolation: isolate; overflow: hidden;
  display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); align-items: end;
  grid-template-areas: 'head side' 'hub hub';
  gap: clamp(1.25rem, 2.4vw, 2rem) clamp(1.5rem, 4vw, 4rem);
  padding: clamp(28px, 4.2vw, 60px) clamp(20px, 3.6vw, 56px) clamp(20px, 2.4vw, 34px);
  border-radius: 36px;
  background:
    radial-gradient(60% 55% at 50% 78%, color-mix(in srgb, var(--accent) 12%, transparent), transparent 70%),
    radial-gradient(66% 80% at 0% 0%, color-mix(in srgb, var(--brand) 13%, transparent), transparent 72%),
    linear-gradient(170deg, color-mix(in srgb, var(--brand) 5%, var(--surface)), color-mix(in srgb, var(--brand) 11%, var(--surface-sunk)));
}
[data-theme='dark'] .habout__panel {
  background:
    radial-gradient(60% 55% at 50% 78%, rgba(253, 184, 2, .07), transparent 70%),
    radial-gradient(66% 80% at 0% 0%, color-mix(in srgb, var(--brand) 18%, transparent), transparent 72%),
    linear-gradient(170deg, #0f1f18, #07100b);
}

.habout__head { grid-area: head; display: grid; justify-items: start; }
.habout__kick {
  display: inline-flex; align-items: center; gap: 10px; padding: 8px 14px 8px 10px; border-radius: var(--r-full);
  background: color-mix(in srgb, var(--surface) 72%, transparent);
  font: 600 var(--fs-label)/1 var(--font-mono); text-transform: uppercase; letter-spacing: .12em; color: var(--fg);
}
.habout__kick::before { content: ''; width: 8px; height: 8px; border-radius: 50%; background: var(--brand); box-shadow: 0 0 0 4px color-mix(in srgb, var(--brand) 22%, transparent); }
.habout__title {
  margin-top: var(--s-5);
  font-size: clamp(2.3rem, 1.15rem + 3vw, 4.1rem); font-weight: 800; line-height: 1; letter-spacing: -.042em;
  text-wrap: balance;
}
.habout__title em { font-style: normal; color: var(--brand); }
/* The word it ends on, underlined by hand in the gold as the hero's last
   word is (D43): drawn in once the words have risen (a wipe, on the
   compositor), inside the word's own foot room. */
.habout__title .w:has(em) { position: relative; }
.habout__title .w:has(em)::after {
  content: ''; position: absolute; left: -.02em; right: .06em; bottom: .01em; height: .15em; pointer-events: none;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 12' preserveAspectRatio='none'%3E%3Cpath d='M1.5 8.6C20 4.2 44 2.6 66 4.4S90 8.2 98.5 5.2' fill='none' stroke='%23FDB802' stroke-width='3.4' stroke-linecap='round' vector-effect='non-scaling-stroke'/%3E%3C/svg%3E") center / 100% 100% no-repeat;
  clip-path: inset(0 0 0 0); transition: clip-path .9s var(--ease-out) .95s;
}
html.reveal-on .habout__title:not(.is-in) .w:has(em)::after { clip-path: inset(0 100% 0 0); }
@media (prefers-reduced-motion: reduce) { .habout__title .w:has(em)::after { transition: none; } }

.habout__side { grid-area: side; display: grid; align-content: end; gap: var(--s-4); }
.habout__lede { max-width: 50ch; font-size: clamp(1rem, .95rem + .25vw, 1.12rem); line-height: 1.6; color: var(--fg-muted); }
/* The purpose: what the bridge below shows, in its own words, set off by
   a bar in the logo's three colours. */
.habout__purpose {
  position: relative; max-width: 44ch; padding-left: 20px;
  font: 650 clamp(1.02rem, .94rem + .35vw, 1.2rem)/1.42 var(--font-display); letter-spacing: -.015em; color: var(--fg);
}
.habout__purpose::before {
  content: ''; position: absolute; left: 0; top: .2em; bottom: .2em; width: 4px; border-radius: 4px;
  background: linear-gradient(180deg, var(--brand), var(--accent) 55%, var(--farm));
}
/* ----- the founders: a coin each in their colour, the name, the role. */
.habout__people { display: flex; flex-wrap: wrap; gap: 8px; margin: 2px 0 0; padding: 0; list-style: none; }
.habout__people a {
  display: flex; align-items: center; gap: 10px; padding: 5px 14px 5px 5px; border-radius: var(--r-full);
  background: color-mix(in srgb, var(--surface) 78%, transparent); color: var(--fg); text-decoration: none;
  box-shadow: 0 1px 0 rgba(255, 255, 255, .5) inset, 0 10px 22px -16px rgba(17, 21, 18, .4);
  transition: background var(--dur) var(--ease), translate .35s var(--ease-out), scale var(--dur-press) var(--ease-out);
}
[data-theme='dark'] .habout__people a { box-shadow: none; }
.habout__people a:hover { color: var(--fg); background: var(--surface); }
.habout__people a:active { scale: .97; }
.habout__mono {
  flex: none; width: 36px; height: 36px; display: grid; place-items: center; border-radius: 50%;
  background: color-mix(in srgb, var(--tone) 22%, var(--surface)); color: var(--tone-ink);
  box-shadow: inset 0 0 0 2px color-mix(in srgb, var(--tone) 34%, transparent);
  font: 800 .88rem/1 var(--font-display); letter-spacing: -.02em;
}
.habout__pname { display: grid; gap: 2px; line-height: 1.2; }
.habout__pname b { font-weight: 650; font-size: .9rem; }
.habout__pname small { font: 600 .62rem/1.2 var(--font-mono); text-transform: uppercase; letter-spacing: .1em; color: var(--fg-subtle); }

/* ----- THE BRIDGE: the film across the panel, the names pinned over it.
   The film has no ground of its own (the land casts a soft shadow): the
   panel's light shows round it. Its stage keeps the render's frame, so a
   pin's place (a share of it) stays on its place at any width. */
.habout__hub { grid-area: hub; position: relative; margin: calc(-1 * clamp(8px, 3.4vw, 46px)) -8px 0; }   /* the frame's empty sky tucked under the words */
.habout__scroll { position: relative; }
.habout__stage { position: relative; aspect-ratio: 1440 / 648; container-type: inline-size; }
.habout__film { display: block; position: absolute; inset: 0; }
.habout__film img { display: block; width: 100%; height: 100%; }
html:not([data-theme='dark']) .habout .is-night, [data-theme='dark'] .habout .is-day { display: none; }
.habout__pins { position: absolute; inset: 0; margin: 0; padding: 0; list-style: none; pointer-events: none; }
.habout__pin {
  --at: 50%;
  position: absolute; left: var(--x); top: var(--y); translate: calc(-1 * var(--at)) calc(-100% - 12px);
  display: flex; align-items: center; gap: .5em; white-space: nowrap;
  padding: .48em .9em .48em .7em; border-radius: var(--r-full);
  background: var(--surface); color: var(--fg);
  box-shadow: 0 1px 0 rgba(255, 255, 255, .6) inset, 0 12px 24px -12px rgba(17, 21, 18, .5);
  font: 650 clamp(.66rem, 1.12cqi, .92rem)/1.15 var(--font-body);
}
.habout__pin::before { content: ''; flex: none; width: .62em; height: .62em; border-radius: 50%; background: var(--tone); }
/* the stem, and its foot on the place */
.habout__pin::after {
  content: ''; position: absolute; left: var(--at); top: 100%; width: 2px; height: 12px; margin-left: -1px;
  background: linear-gradient(var(--surface), color-mix(in srgb, var(--surface) 30%, transparent));
}
[data-theme='dark'] .habout__pin { background: #1B2420; color: #EEF2EE; box-shadow: 0 0 0 1px rgba(255, 255, 255, .08), 0 12px 24px -12px rgba(0, 0, 0, .7); }
[data-theme='dark'] .habout__pin::after { background: linear-gradient(#1B2420, rgba(27, 36, 32, .3)); }
/* The names stand up one after another once the bridge has arrived. */
html.reveal-on .habout__hub:not(.is-in) .habout__pin { opacity: 0; scale: .7; }
.habout__pin {
  transform-origin: var(--at) 130%;
  transition: opacity .4s var(--ease) calc(.5s + var(--i) * 90ms), scale .6s cubic-bezier(.34, 1.4, .5, 1) calc(.5s + var(--i) * 90ms);
}
.habout__snap { position: absolute; left: 50%; top: 0; width: 1px; height: 1px; }

/* The way into the whole story: its name on the panel, its arrow in the
   notch, turning to straight on under a pointer. */
.habout__go {
  grid-area: 1 / 1; justify-self: end; align-self: end; position: relative; z-index: 2;
  display: flex; align-items: center; gap: 16px; color: var(--fg); text-decoration: none;
}
.habout__golabel {
  font: 600 var(--fs-label)/1 var(--font-mono); text-transform: uppercase; letter-spacing: .14em;
  padding-bottom: 4px; background: linear-gradient(currentColor, currentColor) 0 100% / 100% 1.5px no-repeat;
}
.habout__arrow {
  width: 56px; height: 56px; display: grid; place-items: center; border-radius: 50%;
  background: var(--fg); color: var(--bg); rotate: -45deg;
  transition: rotate .5s var(--ease-out), background-color .3s var(--ease), color .3s var(--ease);
}
.habout__arrow .ico { width: 20px; height: 20px; }
.habout__go:hover { color: var(--fg); }
.habout__go:active .habout__arrow { scale: .95; }
@media (hover: hover) and (pointer: fine) {
  .habout__go:hover .habout__arrow { rotate: 0deg; background-color: var(--brand); color: var(--on-brand); }
  .habout__people a:hover { translate: 0 -3px; }
}
@media (prefers-reduced-motion: reduce) { .habout__pin { transition: none; } }


/* =====
   04 · THE WAY IN — three doors, one per reader, each in a colour of the
   logo: the farmer's green, the maker's gold, the cook's orange. A panel
   lit in its colour (no border), its mark in a white well and drawn large
   and faint — whole — in the empty corner above the words; its foot
   corner CUT (main.css) for the arrow, which sits in the notch in the
   panel's colour. (Rows across the page were "worst", 2026-10-13; a mark
   sliced by the panel's edge and a bordered panel, 2026-10-14.)
   ===== */
.routes { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(12px, 1.4vw, 20px); }
.route {
  --tone: var(--brand-ink); --tone-soft: var(--brand-soft); --tone-fill: var(--brand); --tone-on: var(--on-brand);
  --cut: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='86' height='86'%3E%3Cpath d='M0 0H86A22 22 0 0 1 64 22H58A36 36 0 0 0 22 58V64A22 22 0 0 1 0 86Z'/%3E%3C/svg%3E");
  --cut-w: 86px; --cut-h: 86px;    /* a 64px notch: the 56px arrow and an 8px gap */
  position: relative; display: grid; border-radius: var(--r-2xl);
  color: var(--fg); text-decoration: none;
  transition: translate .5s var(--ease-out), filter .5s var(--ease-out), scale var(--dur-press) var(--ease-out);
}
.route--gold   { --tone: var(--accent-ink); --tone-soft: var(--accent-soft); --tone-fill: var(--accent); --tone-on: var(--on-accent); }
.route--orange { --tone: var(--farm-ink);   --tone-soft: var(--farm-soft);   --tone-fill: var(--farm);   --tone-on: var(--bg); }
.route:hover { color: var(--fg); }
.route__bg {
  --glow: color-mix(in srgb, var(--tone-fill) 16%, transparent);
  grid-area: 1 / 1; position: relative; isolation: isolate; overflow: hidden;
  display: flex; flex-direction: column; align-items: flex-start;
  min-height: clamp(340px, 28vw, 400px); padding: clamp(1.5rem, 2.4vw, 2.25rem) clamp(1.5rem, 2.4vw, 2.25rem) 0;
  border-radius: inherit;
  background: linear-gradient(160deg, var(--tone-soft), color-mix(in srgb, var(--tone-soft) 55%, var(--surface)));
}
.route__ico {
  display: grid; place-items: center; width: 58px; height: 58px; border-radius: 18px;
  background: var(--surface); color: var(--tone); box-shadow: var(--shadow-md);
}
.route__ico .ico { width: 26px; height: 26px; }
/* The same mark, large and faint, whole, in the corner over the words. */
.route__mark {
  position: absolute; z-index: -1; top: clamp(1.25rem, 2vw, 1.75rem); right: clamp(1.25rem, 2vw, 1.75rem);
  width: clamp(112px, 10vw, 156px); height: auto; aspect-ratio: 1;
  color: var(--tone-fill); opacity: .16; pointer-events: none;
  transition: rotate .8s var(--ease-out), scale .8s var(--ease-out);
}
.route__kind {
  margin-top: auto; padding-top: var(--s-6);
  font: 600 var(--fs-label) var(--font-mono); text-transform: uppercase; letter-spacing: .12em; color: var(--tone);
}
.route__head {
  margin-top: var(--s-2);
  font-size: clamp(1.8rem, 1.2rem + 1.4vw, 2.5rem); font-weight: 800; line-height: 1.02; letter-spacing: -.035em;
}
.route__body { margin-top: var(--s-3); max-width: 34ch; color: var(--fg-muted); font-size: .97rem; line-height: 1.55; }
/* The way in, named beside the arrow: on the arrow's line, clear of the notch. */
.route__cta {
  display: inline-flex; align-items: center; min-height: 56px; max-width: calc(100% - var(--cut-w));
  margin-top: var(--s-3); font-weight: 700; font-size: .95rem; color: var(--tone);
}
.route__arrow {
  grid-area: 1 / 1; justify-self: end; align-self: end; position: relative; z-index: 2;
  width: 56px; height: 56px; display: grid; place-items: center;
  border-radius: 50%; background: var(--tone-fill); color: var(--tone-on); rotate: -45deg;
  transition: rotate .5s var(--ease-out);
}
.route__arrow .ico { width: 20px; height: 20px; }
.route:active { scale: .985; }
@media (hover: hover) and (pointer: fine) {
  .route:hover { translate: 0 -6px; filter: drop-shadow(0 2px 2px rgba(17, 21, 18, .05)) drop-shadow(0 26px 26px rgba(17, 21, 18, .16)); }
  .route:hover .route__mark { rotate: -8deg; scale: 1.08; }
  .route:hover .route__arrow { rotate: 0deg; }
}
@media (prefers-reduced-motion: reduce) { .route, .route__mark, .route__arrow { transition: none; } }
:is(.railall, .hplay, .hspeed, .hspeeds__i, .tile, .route) { -webkit-tap-highlight-color: transparent; }
:is(.railall, .hplay, .hspeed):active { scale: .97; }


/* =====
   ON THE SCROLL'S OWN CLOCK (D42; main.css) — below the hero, the page
   moves with the scroll as well as arriving: the bento comes up as a wave
   (each tile from further down than the last) while its pictures drift
   in their frames; About us grows to full size, cut and arrow together;
   the three doors come up one after another. Each is its arrival AND its
   scroll, two animations on one element: the arrival on `translate`, the
   scroll on `transform`. The hero stays still (D39).
   ===== */
@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    .tiles > .tile.is-in {
      --lift: calc(30px + var(--i, 0) * 18px);
      animation: unveil .8s var(--ease-out) backwards, sLift linear both;
      animation-delay: calc(var(--i, 0) * 60ms), 0s;
      animation-timeline: auto, view();
      animation-range: normal, entry 0% cover 34%;
    }
    .tiles > .tile.is-in .tile__img {
      animation: lens 1.1s var(--ease-out) backwards, parallax linear both;
      animation-delay: calc(var(--i, 0) * 60ms), 0s;
      animation-timeline: auto, view();
      animation-range: normal, cover;
    }
    /* A photograph overfills its tile by 7% top and bottom, so the drift
       never shows an edge. */
    .tile--photo .tile__img { inset: -7% 0; height: 114%; --pz: 5%; }
    .habout__wrap { animation: sGrow linear both; animation-timeline: view(); animation-range: entry 0% cover 40%; }
    .routes > .route.is-in {
      --lift: calc(28px + var(--i, 0) * 34px);
      animation: rise .6s var(--ease-out) backwards, sLift linear both;
      animation-delay: calc(var(--i, 0) * 45ms), 0s;
      animation-timeline: auto, view();
      animation-range: normal, entry 0% cover 30%;
    }
  }
}


/* =====
   RESPONSIVE — breakpoints from what the ELEMENT needs, not device names.
   ===== */
@media (max-width: 1240px) { .aisle__rail { --per: min(var(--count, 4), 4); } }
@media (max-width: 1024px) {
  /* the tiles two by two, an odd one out first, across the row */
  .tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); grid-auto-rows: minmax(260px, auto); }
  .tiles--odd > :first-child { grid-column: 1 / -1; min-height: 340px; }
  .tile--wide { grid-column: auto; }
}
/* A tablet and down: an aisle's cards two by two, every one in sight. */
@media (max-width: 980px) {
  .aisle__rail {
    grid-auto-flow: row; grid-template-columns: repeat(2, minmax(0, 1fr)); grid-auto-columns: auto;
    overflow: visible; scroll-snap-type: none;
  }
  .lane { height: clamp(176px, 26vw, 230px); }
  /* an odd one out closes the pairs across the row, never half a row alone */
  .aisle__rail > .lane:last-child:nth-child(odd) { grid-column: 1 / -1; }
}
/* A narrower pair: a smaller cut corner and coin. */
@media (max-width: 1199px) {
  .hero { --coin: 96px; }
  .hero__bento {
    --nw: 380px; --nh: 88px; --nf: 22px;
    --notch: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='402' height='110'%3E%3Cg transform='matrix(-1 0 0 1 402 0)'%3E%3Cpath d='M0 0H402A22 22 0 0 1 380 22H52A30 30 0 0 0 22 52V88A22 22 0 0 1 0 110Z'/%3E%3C/g%3E%3C/svg%3E");
  }
  .hcity { --pin: 38px; gap: 11px; }
  .hcity__pin .ico { width: 17px; height: 17px; }
  .hcity__txt b { font-size: 1.32rem; }
}
/* STACKED (a tablet held upright, a phone): the words; the coin, bitten
   from the words' foot and the screen's head; the screen; the numbers.
   The coin sits in the flow on negative margins, so it is always centred
   on the gap whatever the words' height. The card sizes off the width. */
@media (max-width: 1023px) {
  .hero { --coin: 88px; }
  .hero__bento { display: flex; flex-direction: column; gap: 0; height: auto; }
  .hero__words {
    margin-bottom: calc(var(--hgap) / 2);
    padding: clamp(26px, 6vw, 44px) clamp(22px, 5vw, 40px) calc(var(--bite) - 4px);
    justify-content: flex-start;
    -webkit-mask: radial-gradient(circle at 50% calc(100% + var(--hgap) / 2), #0000 var(--bite), #000 calc(var(--bite) + .5px));
    -webkit-mask-composite: source-over;
    mask: radial-gradient(circle at 50% calc(100% + var(--hgap) / 2), #0000 var(--bite), #000 calc(var(--bite) + .5px));
    mask-composite: add;
  }
  .hcoin { position: relative; z-index: 3; order: 2; top: auto; left: auto; flex: none; align-self: center; margin: calc(var(--coin) / -2) 0; }
  .hero__screen {
    order: 3; margin-top: calc(var(--hgap) / 2); padding-top: calc(var(--bite) - 4px);
    -webkit-mask: radial-gradient(circle at 50% calc(var(--hgap) / -2), #0000 var(--bite), #000 calc(var(--bite) + .5px));
    mask: radial-gradient(circle at 50% calc(var(--hgap) / -2), #0000 var(--bite), #000 calc(var(--bite) + .5px));
  }
  .hground { --ix: 50%; --iy: calc(var(--hgap) / -2); }
  .hcover, .hsk--deck { --card-w: clamp(196px, 66cqi, 300px); }
  .hero { --stage-h: 76px; }
  /* Opened from the coin: the words upward, the screen downward. */
  .hwipe { --wipe-to: 1 .0001; }
  html.js .hero__words .hwipe { transform-origin: 50% 0; }
  html.js .hero__screen .hwipe { transform-origin: 50% 100%; }
  .hidx { right: clamp(20px, 5vw, 40px); }
  .hname__row { margin-top: calc(var(--bite) - 18px); }
  .hstats { position: static; order: 4; width: auto; height: auto; max-width: 30rem; padding: var(--s-5) 4px 0; }
  /* Under the panels, not in a corner of fixed height: the scene keeps the photographs' shape. */
  .hcity__stage { height: auto; }
  .hcity__scene { height: auto; max-height: none; aspect-ratio: 3.2; }
}
@media (max-width: 600px) {
  .hcover__foot { --dock-h: 40px; width: calc(100% + 2 * var(--sp) - 28px); margin: 0 calc(14px - var(--sp)) 0; }
  .hsk--tabs { left: 14px; right: 14px; bottom: 14px; height: 40px; padding: 0 86px 0 4px; border-radius: 20px; }
  .hsk--tabs .sk.is-on { width: 32px; height: 32px; }
  .hsk--tabs .sk:first-child, .hsk--tabs .sk:last-child { display: none; }
  .hpanel__kicker { gap: 8px 10px; }
  .hpanel__side { display: none; }
  .hidx__roll { font-size: 3.4rem; }
  .hidx { top: 16px; }
}
/* About us: the words one above the other once two columns would crowd
   them; the bridge still across the panel. */
@media (max-width: 1099px) {
  .habout__panel { grid-template-columns: minmax(0, 1fr); grid-template-areas: 'head' 'side' 'hub'; }
}
/* On a phone the bridge is a strip to swipe, wide enough to read, opening
   on the bridge itself (home.js centres it; the snap holds it there). */
@media (max-width: 760px) {
  .habout__hub { margin: 0 calc(-1 * clamp(20px, 3.6vw, 56px)) 0; }
  .habout__scroll {
    overflow-x: auto; overflow-y: hidden; scroll-snap-type: x proximity; overscroll-behavior-x: contain;
    scrollbar-width: none; -webkit-mask: linear-gradient(90deg, #0000, #000 18px, #000 calc(100% - 18px), #0000);
            mask: linear-gradient(90deg, #0000, #000 18px, #000 calc(100% - 18px), #0000);
  }
  .habout__scroll::-webkit-scrollbar { display: none; }
  .habout__stage { width: 700px; max-width: none; }
  .habout__snap { scroll-snap-align: center; }
  .habout__pin { font-size: .74rem; }
}
@media (max-width: 760px) {
  .habout__panel { padding-bottom: calc(82px + 18px); }
  .habout__people { padding-right: 0; flex-direction: column; align-items: flex-start; }
  .habout__go { margin: 0 4px 0 0; }
}
/* The doors stack once three would be narrower than their words. */
@media (max-width: 899px) {
  .routes { grid-template-columns: minmax(0, 1fr); }
  .route__bg { min-height: 0; }
  .route__mark { width: 112px; }
}
@media (max-width: 760px) {
  .sechead { grid-template-columns: 1fr; gap: var(--s-4); }
  .railall { justify-self: start; }
}
/* A phone: an aisle's way in under its name. */
@media (max-width: 700px) {
  .aisle__ctrl { flex-basis: 100%; margin: 0; }
}
@media (max-width: 600px) {
  .tiles { grid-template-columns: minmax(0, 1fr); grid-auto-rows: minmax(240px, auto); }
  .tiles--odd > :first-child { min-height: 280px; }
}