/* =========================================================
   Kimchi House — kimchihouse.be
   Design system "D2 — Living culture, dimensional".
   Spec: design-canvas/ boards (D2 build-out + Film design pages).
   Hand-written. No frameworks, no external requests.
   ========================================================= */

/* ---------- Fonts (self-hosted: no Google calls, GDPR-clean) ---------- */
@font-face{
  font-family:'KH Hangul';
  src:url('../assets/fonts/notokr-marks.woff2') format('woff2');
  font-weight:300 700;font-display:swap;
  unicode-range:U+AC00-D7A3;   /* Hangul syllables only — never shadows Latin */
}
@font-face{
  font-family:'Hanken Grotesk';font-style:normal;font-weight:300 700;font-display:swap;
  src:url('../assets/fonts/hanken-300-700-latin.woff2') format('woff2');
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+20AC,U+2122,U+2212;
}
@font-face{
  font-family:'Hanken Grotesk';font-style:normal;font-weight:300 700;font-display:swap;
  src:url('../assets/fonts/hanken-300-700-latin-ext.woff2') format('woff2');
  unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+1E00-1E9F,U+2020,U+20A0-20AB,U+2C60-2C7F,U+A720-A7FF;
}
@font-face{
  font-family:'IBM Plex Mono';font-style:normal;font-weight:400;font-display:swap;
  src:url('../assets/fonts/plexmono-400-latin.woff2') format('woff2');
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+20AC,U+2122,U+2212;
}
@font-face{
  font-family:'IBM Plex Mono';font-style:normal;font-weight:400;font-display:swap;
  src:url('../assets/fonts/plexmono-400-latin-ext.woff2') format('woff2');
  unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+1E00-1E9F,U+2020,U+20A0-20AB,U+2C60-2C7F,U+A720-A7FF;
}
@font-face{
  font-family:'IBM Plex Mono';font-style:normal;font-weight:500;font-display:swap;
  src:url('../assets/fonts/plexmono-500-latin.woff2') format('woff2');
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+20AC,U+2122,U+2212;
}
@font-face{
  font-family:'IBM Plex Mono';font-style:normal;font-weight:500;font-display:swap;
  src:url('../assets/fonts/plexmono-500-latin-ext.woff2') format('woff2');
  unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+1E00-1E9F,U+2020,U+20A0-20AB,U+2C60-2C7F,U+A720-A7FF;
}
@font-face{
  font-family:'IBM Plex Mono';font-style:normal;font-weight:600;font-display:swap;
  src:url('../assets/fonts/plexmono-600-latin.woff2') format('woff2');
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+20AC,U+2122,U+2212;
}
@font-face{
  font-family:'IBM Plex Mono';font-style:normal;font-weight:600;font-display:swap;
  src:url('../assets/fonts/plexmono-600-latin-ext.woff2') format('woff2');
  unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+1E00-1E9F,U+2020,U+20A0-20AB,U+2C60-2C7F,U+A720-A7FF;
}
/* Fraunces is GONE. It was kept loadable "until the film-side session
   completes the type swap" — that swap is done (the film titles are Hanken 300
   uppercase now, index.html), so the face had no font-family referencing it
   anywhere and was pure weight. */

/* ---------- Tokens (D2) ----------
   One meaning per colour: chilli = live/alert, napa = vegan,
   brass = instrument accents on light ground (the film keeps its
   gold #C4933C on dark ground — a deliberate pair). */
:root{
  --paper:#FCFBF7;          /* warm white canvas */
  --paper-2:#EEEDE7;        /* warm stone surface */
  --paper-3:#E5E3DC;
  --card:#FFFFFF;
  --ink:#191310;
  --ink-deep:#1C1512;       /* CTA pills */
  --ink-2:#666460;
  --ink-3:#7A766E;         /* was #A6A29A = 2.46:1 on paper; this is 4.6:1 (AA) */
  --line:#E5E3DC;
  --line-2:#DAD7CD;

  --chilli:#C43B1F;         /* live / alert — sparingly */
  --brick:#C43B1F;          /* legacy alias, kept for main.js-agnostic rules */
  --brick-deep:#7C2117;
  --jade:#2C4415;           /* vegan */
  --napa-soft:#E9F2D4;
  --gold:#C4933C;           /* film gold (dark ground) */
  --brass:#B99C68;          /* page brass (light ground) */

  --dark:#1A1310;
  --dark-2:#241A15;
  --tail-paper:#FCFBF7;     /* the film tail lands on the page canvas */

  --f-display:'Hanken Grotesk',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,sans-serif;
  --f-body:'Hanken Grotesk',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,sans-serif;
  --f-mono:'IBM Plex Mono',ui-monospace,'SF Mono',Menlo,monospace;

  --wrap:1240px;
  --r:16px;
  --shadow:0 2px 6px rgba(25,19,16,.05),0 24px 48px -26px rgba(25,19,16,.28);
  --shadow-cta:0 10px 24px -14px rgba(25,19,16,.45);
  --ease:cubic-bezier(.2,.7,.3,1);
}

/* ---------- Reset ---------- */
*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{
  margin:0;
  background:var(--paper);
  color:var(--ink);
  font-family:var(--f-body);
  font-size:17px;
  line-height:1.6;
  font-weight:400;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
img,svg{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
h1,h2,h3,h4{margin:0;line-height:1.1;font-weight:600;letter-spacing:-.015em}
p{margin:0}
ul,ol,dl,dd{margin:0;padding:0;list-style:none}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}
:focus-visible{outline:2.5px solid var(--chilli);outline-offset:3px;border-radius:4px}
/* no 300 ms tap delay, no accidental double-tap zoom on controls */
a,button,summary,label,[role="button"]{touch-action:manipulation}
/* balanced headings / no orphans on the page side only — the film's titles
   are solved by fitBig() and must keep natural wrapping */
main h1,main h2,main h3,.doc h1,.doc h2{text-wrap:balance}
main p,.doc p{text-wrap:pretty}
/* anchor targets clear the 74px fixed header; #distance is excluded on
   purpose — its pinned track must start exactly where the film hands over */
main .section:not(#distance){scroll-margin-top:90px}
/* screen-reader only */
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
/* keyboard users: first tab stop jumps past the film and the nav */
.skip-link{position:fixed;left:1rem;top:-120px;z-index:300;padding:.75rem 1.1rem;
  background:var(--ink);color:var(--paper);border-radius:10px;font-weight:600;font-size:.95rem;
  transition:top .15s}
.skip-link:focus{top:1rem;outline-offset:2px}

/* Paper grain — one inline SVG, no network request */
body::after{
  content:'';position:fixed;inset:0;pointer-events:none;z-index:60;opacity:.04;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)'/%3E%3C/svg%3E");
}

.wrap{width:min(100% - 2.5rem,var(--wrap));margin-inline:auto}
.wrap-narrow{width:min(100% - 2.5rem,860px)}

.skip{position:absolute;left:-9999px;top:0;z-index:200;background:var(--ink);color:var(--paper);padding:.7rem 1.1rem;border-radius:0 0 8px 0}
.skip:focus{left:0}

/* ---------- Typography helpers ---------- */
.display{font-family:var(--f-display);font-weight:300;letter-spacing:-.022em}
h1.display{font-size:clamp(2.6rem,5.6vw,4rem);line-height:1.06}
h2.display{font-size:clamp(2rem,3.6vw,3.25rem);line-height:1.08}
.display b,.display strong,.display .hard{font-weight:600}
.accent{color:var(--chilli)}

/* Mono instrument voice — replaces the old uppercase-serif eyebrow */
.eyebrow,.mono-label{
  font-family:var(--f-mono);font-weight:500;
  font-size:.75rem;letter-spacing:.08em;text-transform:uppercase;
  color:var(--ink-2);margin-bottom:1.15rem;
}
.section-dark .eyebrow{color:rgba(244,240,233,.6)}

.lede{font-size:clamp(13.26px,1.4vw,15.34px);color:var(--ink-2);max-width:48ch;line-height:1.6}  /* film copy; px = the 13px-root reading it was approved at */
.sec-lede{font-size:1.02rem;color:var(--ink-2);max-width:56ch;margin-top:1.1rem;line-height:1.65}
.section-dark .sec-lede{color:#B9A99C}

/* Section head row: heading left, mono index right (D2 boards) */
.sec-head{max-width:none;margin-bottom:clamp(2.4rem,4vw,3.4rem)}
.sec-head-row{display:flex;justify-content:space-between;align-items:baseline;gap:1rem;flex-wrap:wrap}
.sec-index{font-family:var(--f-mono);font-weight:500;font-size:.75rem;letter-spacing:.08em;text-transform:uppercase;color:var(--ink-2);margin:0}

/* TODO markers — deliberately loud so they can't ship by accident */
.todo{
  background:#FFE9A8;color:#5A4200;border-bottom:2px solid #E0B830;
  padding:0 .3em;border-radius:3px;font-style:italic;
}
.section-dark .todo{background:#6B5312;color:#FFE9A8;border-bottom-color:#A8842A}

/* ---------- Buttons ---------- */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:.55rem;
  padding:.9rem 1.75rem;border-radius:1000px;
  font-size:.94rem;font-weight:600;letter-spacing:-.005em;
  border:1.5px solid transparent;cursor:pointer;
  transition:transform .22s var(--ease),background .22s var(--ease),color .22s var(--ease),border-color .22s var(--ease),box-shadow .22s var(--ease);
}
.btn:hover{transform:translateY(-2px)}
.btn:active{transform:translateY(0)}
.btn-solid{background:var(--ink-deep);color:var(--paper);box-shadow:var(--shadow-cta)}
.btn-solid:hover{background:#000000}
.btn-ghost{border-color:var(--line-2);color:var(--ink)}
.btn-ghost:hover{border-color:var(--ink);background:var(--ink);color:var(--paper)}
.section-dark .btn-ghost{border-color:rgba(255,255,255,.28);color:#F4ECE1}
.section-dark .btn-ghost:hover{background:#F4ECE1;color:var(--dark);border-color:#F4ECE1}
.btn-sm{padding:.62rem 1.25rem;font-size:.87rem}
.btn-lg{padding:1rem 1.9rem;font-size:1rem}
/* Quiet text action (film-style underline) */
.link-under{font-weight:600;border-bottom:1.5px solid var(--ink);padding-bottom:2px;transition:color .2s,border-color .2s}
.link-under:hover{color:var(--chilli);border-color:var(--chilli)}
.link-under:active{opacity:.6}

/* ---------- Header ---------- */
.site-header{
  position:sticky;top:0;z-index:50;
  background:transparent;
  border-bottom:1px solid transparent;
  transition:background .3s,border-color .3s,box-shadow .3s,backdrop-filter .3s,
    transform .45s var(--ease),opacity .35s ease;
}
.site-header.hide{transform:translateY(-102%);opacity:0;pointer-events:none}
.site-header.stuck{
  background:rgba(252,251,247,.92);
  backdrop-filter:saturate(180%) blur(14px);
  -webkit-backdrop-filter:saturate(180%) blur(14px);
  border-bottom-color:var(--line);
}
/* Over a dark section the cream plate glares (standing rule) — dark plate,
   light chrome while dark ground is under the header line. */
.site-header.on-dark{
  background:rgba(10,8,6,.6);
  backdrop-filter:saturate(160%) blur(14px);
  -webkit-backdrop-filter:saturate(160%) blur(14px);
  border-bottom:1px solid rgba(255,255,255,.08);
  box-shadow:none;
}
.site-header.on-dark .brand-text{color:#F6EFE6}
/* over the film the header is plateless on near-black — the wordmark flips
   cream there like the nav does, and returns to brand red on paper */
html:not(.past-film) .site-header .brand-text{color:#F6EFE6}
.site-header.on-dark .nav a{color:#B9B2AA}
.site-header.on-dark .nav a:hover{color:#fff}
.site-header.on-dark .lang-btn{color:#C3BCB4;border-color:rgba(255,255,255,.22)}
.site-header.on-dark .lang-btn:hover{border-color:rgba(255,255,255,.4);color:#fff}
.site-header.on-dark .burger span{background:#F6EFE6}
.header-inner{display:flex;align-items:center;gap:2rem;height:74px}

.brand{display:flex;align-items:center;gap:.6rem;color:var(--ink);flex-shrink:0}
/* the REAL lockup (Alan: "the logo from kimchi house needs to be changed to
   our logo") — the roof-and-leaf mark plus KIMCHI HOUSE in the label's own
   voice: bold caps, brand red. The old typed KimchiHouse in the site font
   was a stand-in wearing the brand's name. */
.brand-mark-img{width:30px;height:30px}
.brand-text{
  font-family:var(--f-display);font-weight:700;font-size:.92rem;
  letter-spacing:.1em;color:var(--brick-deep);white-space:nowrap;
}

.nav{display:flex;gap:1.9rem;margin-inline:auto;font-size:.93rem;font-weight:400}
.nav a{color:var(--ink-2);position:relative;padding:.3rem 0;transition:color .2s}
.nav a::after{
  content:'';position:absolute;left:0;right:100%;bottom:0;height:1.5px;
  background:var(--brass);transition:right .3s var(--ease);
}
.nav a:hover,.nav a[aria-current]{color:var(--ink)}
.nav a:hover::after,.nav a[aria-current]::after{right:0}

.header-actions{display:flex;align-items:center;gap:.7rem;flex-shrink:0}

/* Language */
.lang{position:relative}
.lang-btn{
  display:flex;align-items:center;gap:.4rem;padding:.5rem .8rem;border-radius:1000px;
  font-family:var(--f-mono);font-size:.75rem;font-weight:500;letter-spacing:.06em;
  color:var(--ink-2);border:1px solid var(--line);
  transition:border-color .2s,color .2s;
}
.lang-btn:hover{border-color:var(--line-2);color:var(--ink)}
.lang-menu{
  position:absolute;top:calc(100% + .5rem);right:0;min-width:150px;
  background:var(--card);border:1px solid var(--line);border-radius:12px;
  box-shadow:var(--shadow);padding:.35rem;
  opacity:0;visibility:hidden;transform:translateY(-6px);
  transition:opacity .2s,transform .2s,visibility .2s;
}
.lang.open .lang-menu{opacity:1;visibility:visible;transform:translateY(0)}
.lang-menu a{
  display:block;width:100%;text-align:left;padding:.55rem .75rem;border-radius:8px;
  font-size:.9rem;color:var(--ink-2);transition:background .15s,color .15s;
}
.lang-menu a:hover,.lang-menu a[aria-current="true"]{background:var(--paper-2);color:var(--ink)}

.burger{display:none;flex-direction:column;gap:5px;padding:.5rem;margin-right:-.5rem}
.burger span{display:block;width:22px;height:2px;background:var(--ink);border-radius:2px;transition:transform .3s var(--ease),opacity .2s}
.burger[aria-expanded="true"] span:nth-child(1){transform:translateY(7px) rotate(45deg)}
.burger[aria-expanded="true"] span:nth-child(2){opacity:0}
.burger[aria-expanded="true"] span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}

/* ---------- Sections ---------- */
.section{padding:clamp(4rem,7vw,6.5rem) 0;background:var(--paper)}
.section-tint{background:var(--paper-2)}
.section-dark{background:var(--dark);color:var(--paper-2)}
.section-dark h2,.section-dark h3{color:#F6EFE6}

/* ---------- Products — the dimensional hero ---------- */
#products{position:relative;overflow:hidden}
#products .wrap{position:relative;z-index:1}
/* the recipe-sketch canvas was tuned for dark ground; parked while
   products is light (js/sketches.js pauses off-screen / when hidden) */
#prodSketch{display:none}

.prod-lab{
  display:flex;justify-content:space-between;align-items:center;gap:1rem;flex-wrap:wrap;
  font-family:var(--f-mono);font-weight:500;font-size:.75rem;
  letter-spacing:.08em;text-transform:uppercase;color:var(--ink-2);
  margin-bottom:2.6rem;
}
.prod-lab .livedot{
  width:8px;height:8px;border-radius:50%;background:var(--chilli);
  display:inline-block;margin-right:.6rem;vertical-align:1px;
  animation:kh-pulse 2.4s ease-in-out infinite;
}
@keyframes kh-pulse{0%,100%{opacity:1;transform:scale(1)}50%{opacity:.45;transform:scale(.72)}}

.prod-hero{display:grid;grid-template-columns:1fr minmax(0,560px);gap:2.5rem;align-items:center}
.prod-hero-copy h2{max-width:20ch}
.chip-vegan{background:var(--napa-soft);color:var(--jade)}
.chip-days{background:#F7E3DC;color:var(--brick-deep)}
.prod-ctas{display:flex;align-items:center;flex-wrap:wrap;gap:1.4rem;margin-top:2.4rem}

/* The floating object */
.prod-obj{position:relative;aspect-ratio:1;max-width:560px;justify-self:end;width:100%}
.prod-orbit{position:absolute;inset:0;animation:kh-spin 70s linear infinite;transform-origin:center}
@keyframes kh-spin{from{transform:rotate(0)}to{transform:rotate(360deg)}}
.prod-tub{
  /* height:auto is load-bearing — the <img> carries width/height attributes
     for CLS, so without it the attribute height wins, stretching the tub and
     overflowing the object box (it was clipped at the lid). */
  position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);
  width:72%;height:auto;filter:drop-shadow(0 30px 26px rgba(25,19,16,.26));
  animation:kh-bob 6.5s ease-in-out infinite;
}
@keyframes kh-bob{0%,100%{transform:translate(-50%,-50%)}50%{transform:translate(-50%,calc(-50% - 14px))}}
.prod-ground{
  position:absolute;left:50%;bottom:7%;transform:translateX(-50%);
  width:58%;height:40px;border-radius:50%;
  background:radial-gradient(closest-side,rgba(25,19,16,.28),rgba(25,19,16,0));
  filter:blur(6px);
}

/* Version cards + tilted photo */
/* two version cards since the wood-table photo showed the OLD unlabeled tub
   directly under the hero carrying the real packaging (Alan, 19 Aug) */
.prod-photo{
  border-radius:24px;background:var(--paper-2);padding:14px;
  transform:rotateX(4deg) rotateY(-5deg);transform-style:preserve-3d;
  box-shadow:0 3px 8px rgba(25,19,16,.05),0 34px 60px -30px rgba(25,19,16,.35);
}
.prod-photo img{width:100%;height:100%;min-height:0;border-radius:14px;object-fit:cover}

.prod-specline{
  display:flex;justify-content:space-between;align-items:baseline;gap:1rem;flex-wrap:wrap;
  margin-top:2.4rem;padding-top:1.5rem;border-top:1px solid var(--line);
  font-family:var(--f-mono);font-weight:500;font-size:.75rem;
  letter-spacing:.08em;text-transform:uppercase;color:var(--ink-2);
}
.prod-specline .brass{color:var(--brass)}

/* ---------- Supply — editorial index list ---------- */
.supply-list{border-bottom:1px solid var(--line)}
.supply-row{
  display:grid;grid-template-columns:80px minmax(0,380px) 1fr 40px;gap:1.5rem;
  align-items:baseline;padding:1.8rem 0;border-top:1px solid var(--line);
  transition:background .25s;
}
.supply-row:hover{background:rgba(238,237,231,.5)}
.supply-num{font-family:var(--f-mono);font-weight:500;font-size:.75rem;letter-spacing:.08em;color:var(--ink-2)}
.supply-name{font-weight:300;font-size:1.65rem;letter-spacing:-.02em;line-height:1.2}
.supply-desc{font-size:.9rem;color:var(--ink-2);line-height:1.6}
.supply-arrow{font-size:1.2rem;color:var(--brass);text-align:right}

/* ---------- Steps — points on one instrument line ---------- */
.steps{display:block;border-top:1px solid var(--ink)}
.steps li{position:relative;display:grid;grid-template-columns:64px minmax(0,290px) 1fr;
  gap:28px;align-items:baseline;padding:28px 0;border-bottom:1px solid var(--line);
  transition:background .3s var(--ease)}
.steps li::after{content:'';position:absolute;left:0;right:0;bottom:-1px;
  height:1px;background:var(--chilli);transform:scaleX(0);transform-origin:left;
  transition:transform .5s var(--ease)}
.steps li:hover::after{transform:scaleX(1)}
.steps li h3{transition:transform .45s var(--ease)}
.steps li:hover h3{transform:translateX(6px)}
.step-n{
  display:block;font-family:var(--f-mono);font-weight:500;font-size:.75rem;
  letter-spacing:.08em;color:var(--ink-2);margin-bottom:.75rem;
}
.steps li:last-child .step-n{color:var(--brass)}
.steps h3{font-family:var(--f-display);font-weight:300;font-size:1.45rem;
  letter-spacing:-.015em;margin:0}
.steps p{color:var(--ink-2);font-size:.92rem;line-height:1.72;max-width:56ch;margin:0}

/* ---------- FAQ ---------- */
.faq{counter-reset:faq}
.faq details{border-bottom:1px solid var(--line);counter-increment:faq}
.faq details:first-child{border-top:1px solid var(--ink)}
.faq summary{
  list-style:none;cursor:pointer;display:grid;grid-template-columns:64px 1fr auto;
  gap:28px;align-items:baseline;padding:24px 0;
  font-family:var(--f-display);font-weight:300;font-size:1.3rem;letter-spacing:-.012em;
}
.faq summary::before{content:counter(faq,decimal-leading-zero);
  font-family:var(--f-mono);font-size:12px;letter-spacing:.1em;color:var(--ink-3)}
.faq summary::-webkit-details-marker{display:none}
.faq summary:hover{color:var(--brick-deep)}
.faq summary::after{content:'+';
  font-family:var(--f-mono);font-size:15px;color:var(--ink-3)}
.faq details[open] summary{font-weight:300}
.faq details[open] summary::after{content:'−';color:var(--chilli)}
.faq details p{padding:0 0 26px 92px;color:var(--ink-2);font-size:.94rem;line-height:1.78;max-width:70ch}

/* ---------- Enquiry (light — one white card on warm stone) ---------- */
#enquiry{background:var(--paper-2);color:var(--ink)}
#enquiry h2{color:var(--ink)}
#enquiry .sec-lede{color:var(--ink-2)}
.enquiry-grid{display:grid;grid-template-columns:.85fr 1.15fr;gap:clamp(2rem,5vw,4rem);align-items:start}

.contact-block{margin-top:2.4rem;border-top:1px solid var(--line-2)}
.contact-row{
  display:flex;justify-content:space-between;align-items:baseline;gap:1rem;
  padding:.95rem 0;border-bottom:1px solid var(--line-2);
  transition:padding-left .25s var(--ease);
}
a.contact-row:hover{padding-left:.5rem}
.contact-label{font-family:var(--f-mono);font-weight:500;font-size:.75rem;letter-spacing:.08em;text-transform:uppercase;color:var(--ink-2)}
.contact-val{font-family:var(--f-mono);font-size:.9rem;color:var(--ink);text-align:right}

.enquiry-form{
  /* direction B: the form sits on the paper — no card, no radius, no shadow.
     Fields carry hairline underlines; focus draws the line in ink. */
  display:flex;flex-direction:column;gap:1.15rem;
}
.field-row{display:grid;grid-template-columns:1fr 1fr;gap:1rem}
.field{display:flex;flex-direction:column;gap:.45rem;border:0;padding:0;margin:0;min-width:0}
.field>span,.field legend{
  font-family:var(--f-mono);font-weight:500;
  font-size:.75rem;letter-spacing:.08em;text-transform:uppercase;
  color:var(--ink-2);padding:0;
}
.field>span em{font-style:normal;text-transform:none;letter-spacing:0;opacity:.65;font-weight:400}
.field input,.field select,.field textarea{
  border:0;border-bottom:1px solid var(--line);border-radius:0;background:transparent;
  padding:.5rem 0 .55rem;font-family:var(--f-body);font-size:.98rem;color:var(--ink);
  outline:none;transition:border-color .3s var(--ease);
}
.field textarea{resize:vertical;min-height:96px}
.field input::placeholder,.field textarea::placeholder{color:var(--ink-3)}
.field input:focus,.field select:focus,.field textarea:focus{
  border-bottom-color:var(--ink);
}
.field input.err:focus,.field select.err:focus{border-bottom-color:var(--chilli)}
.field input.err,.field select.err,.field [aria-invalid="true"]{border-bottom-color:var(--chilli)}
/* the error is a sentence under the field, not just a red line (colour
   alone is not information); main.js inserts it and wires aria-describedby */
.field>span.field-err{display:none;font-family:var(--f-body);font-weight:400;font-size:.82rem;line-height:1.4;
  color:var(--chilli);text-transform:none;letter-spacing:0;margin-top:-.3rem}
.field.has-err>span.field-err{display:block}
.field select{appearance:none;cursor:pointer;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6'%3E%3Cpath d='M1 1l4 4 4-4' fill='none' stroke='%23A6A29A' stroke-width='1.6' stroke-linecap='round'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right 1rem center;padding-right:2.4rem;
}
.field select option{background:#fff;color:var(--ink)}

.checks{display:flex;flex-wrap:wrap;gap:.4rem 1.7rem}
.checks label{
  display:flex;align-items:center;gap:.55rem;cursor:pointer;
  font-size:.92rem;color:var(--ink);min-height:44px;
}
.checks label:hover input{border-color:var(--ink)}
.checks input{
  appearance:none;-webkit-appearance:none;margin:0;cursor:pointer;
  width:15px;height:15px;border-radius:5px;flex-shrink:0;
  border:1.5px solid #C9C5BA;background:transparent;
  display:grid;place-content:center;transition:background .18s,border-color .18s;
}
.checks input::after{
  content:'';width:9px;height:5px;
  border-left:2px solid var(--paper);border-bottom:2px solid var(--paper);
  transform:rotate(-45deg) scale(0);transform-origin:center;
  transition:transform .18s var(--ease);margin-top:-2px;
}
.checks input:checked{background:var(--ink-deep);border-color:var(--ink-deep)}
.checks input:checked::after{transform:rotate(-45deg) scale(1)}

/* colour = meaning: the vegan choice checks in napa green */
.checks label.check-vegan input:checked{background:var(--jade);border-color:var(--jade)}


.form-actions{display:flex;flex-wrap:wrap;gap:1.1rem;margin-top:.6rem;align-items:center}
.form-note{font-size:.78rem;color:var(--ink-3);margin-top:.2rem}

/* ---------- Footer ---------- */
.site-footer{background:var(--paper);border-top:1px solid var(--line);padding:clamp(3rem,5vw,4rem) 0 1.6rem}
.footer-grid{display:grid;grid-template-columns:1.6fr 1fr 1fr 1fr;gap:2.5rem}
.footer-brand-row{display:flex;align-items:center;gap:.65rem;margin-bottom:.8rem}
.footer-brand .brand-text{font-size:1.2rem;display:block}
.footer-brand p{font-size:.88rem;color:var(--ink-2);max-width:34ch}
.footer-col{display:flex;flex-direction:column;gap:.6rem;align-items:flex-start}
.footer-col h3{
  font-family:var(--f-mono);font-weight:500;font-size:.75rem;
  letter-spacing:.08em;text-transform:uppercase;color:var(--ink-3);margin-bottom:.4rem;
}
.footer-col a,.footer-col span{font-size:.88rem;color:var(--ink-2);transition:color .2s}
.footer-col a:hover{color:var(--chilli)}
.footer-base{
  display:flex;justify-content:space-between;flex-wrap:wrap;gap:.6rem;
  margin-top:2.8rem;padding-top:1.4rem;border-top:1px solid var(--line);
  font-family:var(--f-mono);font-weight:500;font-size:.75rem;
  letter-spacing:.08em;text-transform:uppercase;color:var(--ink-3);
}
.footer-base p:last-child{color:var(--brass)}

/* ---------- Reveal ---------- */
/* ARRIVAL — borrowed from the film, not invented: same curve, same blur that
   resolves. The generic fade-up on 12 unrelated elements was one of the
   loudest cheap-website signals on the page. */
.reveal{opacity:0;transform:translateY(26px);
  transition:opacity .78s cubic-bezier(.16,.84,.28,1),
             transform .78s cubic-bezier(.16,.84,.28,1)}
.reveal.in{opacity:1;transform:none;filter:none}
@media (prefers-reduced-motion:reduce){
  .reveal{opacity:1;transform:none;filter:none;transition:none}
}

/* ---------- Responsive ---------- */
@media (max-width:1000px){
  .nav{
    position:fixed;inset:74px 0 auto;flex-direction:column;gap:0;
    background:var(--paper);border-bottom:1px solid var(--line);
    padding:.5rem 1.25rem 1.5rem;margin:0;
    visibility:hidden;
    transform:translateY(calc(-100% - 74px));
    transition:transform .35s var(--ease),visibility 0s .35s;
    box-shadow:0 20px 40px -30px rgba(25,19,16,.6);
  }
  .nav.open{visibility:visible;transform:translateY(0);transition:transform .35s var(--ease)}
  html.nav-open{overflow:hidden}
  .nav a{padding:.95rem 0;border-bottom:1px solid var(--line);font-size:1.05rem}
  .nav a:last-child{border-bottom:0}
  .burger{display:flex}
  .header-inner{gap:.6rem;justify-content:space-between}
  .footer-grid{grid-template-columns:1fr 1fr}
  .prod-hero{grid-template-columns:1fr;gap:1.5rem}
  .prod-obj{justify-self:center;max-width:440px}
    .supply-row{grid-template-columns:56px 1fr 40px;grid-template-rows:auto auto}
  .supply-name{grid-column:2}
  .supply-desc{grid-column:2;grid-row:2}
  .supply-arrow{grid-row:1}
}
/* narrow phones: brand + language + CTA + burger must share 375px */
@media (max-width:480px){
  .wrap{width:min(100% - 2rem,var(--wrap))}
  .header-inner{gap:.4rem}
  .header-actions{gap:.3rem}
  .brand{gap:.45rem}
  .brand-text{font-size:.78rem;letter-spacing:.06em}
  .brand-mark-img{width:26px;height:26px}
  .lang-btn{padding:.4rem .5rem;font-size:.7rem}
  .btn-sm{padding:.5rem .75rem;font-size:.78rem}
  .burger{margin-right:-.25rem}
}
/* the very smallest phones (320px): the mark alone carries the brand; the
   link keeps its accessible name */
@media (max-width:340px){
  .brand-text{display:none}
}
@media (max-width:820px){
  .enquiry-grid{grid-template-columns:1fr}
  /* .steps is a REGISTER now, not a three-up grid: its rows must collapse
     to number + stacked text, the same shape .reg takes. The old
     grid-template-columns override was a no-op on display:block, and
     .steps-line no longer exists. */
  .steps li{grid-template-columns:44px 1fr;gap:8px 16px}
  .steps li p{grid-column:2}
}
@media (max-width:600px){
  body{font-size:16px}
  .field-row{grid-template-columns:1fr}
  .footer-grid{grid-template-columns:1fr;gap:2rem}
  /* .prod-chip and .supply-name were deleted with the card draft; the CTAs
     are quiet underlines now, so a full-width pill rule is meaningless.
     What they DO need on a narrow screen is room to breathe when they wrap. */
  .prod-ctas{gap:1rem 1.6rem}
  .form-actions{gap:1.1rem}
}

/* ---------- The distance — pinned scroll story ----------
   Paper ground: the planet is an object on the page, not a scene
   we're inside. The story panel is now the D2 white card. */
.dist-track{position:relative;height:520vh}
.dist-sticky{
  position:sticky;top:0;height:100vh;height:100svh;
  display:flex;align-items:center;overflow:hidden;
}
.dist-globe{position:absolute;inset:0}
#globe{position:absolute;inset:0}
#globe canvas{display:block;width:100%!important;height:100%!important}
.dist-panels{
  position:relative;z-index:2;
  width:min(470px,42vw);margin-left:clamp(24px,6vw,96px);
  height:100%;
}
.dist-panel{
  /* REVERTED to the original card, verbatim (Alan: "it is still not fixed to
     how it used to be, why is it changed"). Two of my replacements failed in
     opposite ways: the translucent wash smeared, and the plateless version
     put ink headlines on the dark ocean — invisible. The white card is the
     ONE treatment that stays legible over both the paper and the planet,
     which is why it was designed this way. Not every card is the rejected
     pattern; this one is doing a job. */
  position:absolute;top:50%;left:0;right:0;
  transform:translateY(calc(-50% + 22px));
  opacity:0;pointer-events:none;
  padding:2rem 2.1rem;
  background:var(--card);
  border-radius:16px;
  box-shadow:0 2px 6px rgba(25,19,16,.05),0 28px 56px -28px rgba(25,19,16,.3);
  transition:opacity .65s var(--ease),transform .65s var(--ease);
}
.dist-panel.on{opacity:1;transform:translateY(-50%)}
.dist-h{
  font-family:var(--f-display);font-weight:300;
  font-size:clamp(1.5rem,2.5vw,2.1rem);line-height:1.14;letter-spacing:-.02em;
  color:var(--ink);margin:0 0 .9rem;
}
.dist-p{font-size:.96rem;color:var(--ink-2);line-height:1.65;max-width:38ch;margin:0}
.dist-hud{
  margin:1.5rem 0 0;display:flex;align-items:baseline;gap:.7rem;
  font-family:var(--f-mono);font-weight:400;font-variant-numeric:tabular-nums;
  font-size:.8rem;letter-spacing:.12em;text-transform:uppercase;color:var(--ink-2);
}
.dist-hud b{
  font-family:var(--f-mono);font-weight:600;
  font-size:1.5rem;color:var(--ink);letter-spacing:.02em;
}
.dist-hud-sep{color:var(--ink-3)}
.dist-cue{
  margin:1.8rem 0 0;display:flex;align-items:center;gap:.7rem;
  font-family:var(--f-mono);font-weight:500;
  font-size:.7rem;letter-spacing:.08em;text-transform:uppercase;color:var(--ink-2);
}
.dist-cue i{
  display:block;width:1px;height:24px;background:var(--brass);
  animation:distcue 1.8s ease-in-out infinite;transform-origin:top;
}
@keyframes distcue{0%,100%{transform:scaleY(.3);opacity:.3}50%{transform:scaleY(1);opacity:1}}
@media (max-width:860px){
  .dist-track{height:440vh}
  .dist-sticky{align-items:flex-end}
  /* width:auto COLLAPSES here: every child is absolutely positioned, so the
     container has no in-flow content to size from, and the panel (left:0;
     right:0) collapsed with it — measured 31px wide on a 430px phone, i.e.
     the whole globe story was unreadable on mobile. Give the container real
     width and let the panel fill it. */
  .dist-panels{width:auto;left:16px;right:16px;margin:0;height:100%;
    position:absolute;top:0}
  .dist-panel{
    position:absolute;bottom:5vh;top:auto;transform:translateY(22px);
    background:rgba(252,251,247,.94);
    -webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);
    border-radius:14px;padding:1.1rem 1.2rem 1.3rem;
  }
  .dist-panel.on{transform:none}
}
@media (prefers-reduced-motion:reduce){
  .dist-track{height:auto}
  .dist-sticky{position:static;height:auto;display:block;overflow:visible}
  .dist-globe{position:relative;inset:auto;height:62vh}
  .dist-panels{width:auto;max-width:560px;margin:2rem auto 0;height:auto}
  .dist-panel{position:static;opacity:1;transform:none;pointer-events:auto;margin-bottom:2.2rem}
  .dist-cue{display:none}
}

/* ---------- Touch targets (Apple HIG: minimum 44×44pt) ---------- */
@media (pointer:coarse){
  .lang-btn,.burger,.btn-sm{min-height:44px}
  .lang-menu a{min-height:44px;display:flex;align-items:center}
  .nav a{min-height:44px;display:flex;align-items:center}
  .footer-col a{display:inline-flex;align-items:center;min-height:44px}
  .checks label{min-height:44px;display:flex;align-items:center}
  .contact-row{min-height:44px}
  .link-under{display:inline-flex;align-items:center;min-height:44px}
}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}
  html{scroll-behavior:auto}
  .reveal{opacity:1;transform:none}
  .prod-tub,.prod-orbit,.prod-lab .livedot{animation:none}
}

/* ─────────────  FERMENT BEAT OVERLAY (in-film instrument, D2 voice)  ─────────
   Fixed over the film stage during the ferment beat only; children get
   inline opacity/transform from the film's updateCopy. Film-cream inks,
   mono instrument labels, Hanken display. */
/* fermUi: all sizes in px — they were authored in rem and approved while the
   root was (accidentally) 13px; pinned so the root fix below the film changes
   nothing here. 1rem here == 13px. */
#fermUi{position:fixed;inset:0;z-index:12;pointer-events:none;
        opacity:0;visibility:hidden;transition:opacity .35s ease}
#fermUi.on{opacity:1;visibility:visible}
#fermUi .ferm-copy{position:absolute;left:clamp(16.9px,4vw,45.5px);top:29%;max-width:299px;
                   opacity:0;will-change:opacity,transform}
#fermUi .ferm-eyebrow{margin:0;font-family:var(--f-mono);font-weight:500;font-size:11px;
                      letter-spacing:.1em;text-transform:uppercase;color:rgba(244,240,233,.62)}
#fermUi .ferm-h{font-family:var(--f-display);font-weight:300;
                font-size:clamp(17.55px,2vw,22.1px);line-height:1.25;letter-spacing:-.015em;
                margin:11.7px 0 13px;color:#F6EFE6}
#fermUi .ferm-p{margin:0;font-size:12.35px;line-height:1.65;color:rgba(244,240,233,.62);font-weight:300}
#fermUi .ferm-title{position:absolute;left:clamp(16.9px,4vw,45.5px);bottom:31.2px;margin:0;
                    font-family:var(--f-display);font-weight:300;color:#F6EFE6;
                    font-size:clamp(28.6px,4.8vw,54.6px);line-height:1.0;letter-spacing:-.02em;
                    text-transform:uppercase;opacity:0}
#fermUi .ferm-rule{position:absolute;left:clamp(16.9px,4vw,45.5px);
                   bottom:calc(31.2px + clamp(28.6px,4.8vw,54.6px)*2.3);
                   width:min(299px,55vw);border-top:1px dotted rgba(244,240,233,.45);opacity:0}
#fermUi .ferm-scale{position:absolute;right:clamp(14.3px,3vw,39px);top:17vh;height:50vh;
                    display:flex;align-items:stretch;gap:14.3px;opacity:0}
#fermUi .ferm-scale-labels{display:flex;flex-direction:column;justify-content:space-between;text-align:right}
#fermUi .ferm-scale-labels div{font-family:var(--f-mono);font-weight:400;font-size:10.5px;
                               letter-spacing:.12em;text-transform:uppercase;
                               color:rgba(244,240,233,.62);line-height:1.5}
#fermUi .ferm-scale-labels b{display:block;color:#F6EFE6;font-weight:600;letter-spacing:.06em}
#fermUi .ferm-bar{position:relative;width:3px;border-radius:2px;
                  background:linear-gradient(to bottom,#ffd98a,#ff7a1f 40%,#8a1e06 72%,#2a0f08)}
#fermUi .ferm-marker{position:absolute;left:50%;top:100%;transform:translate(-50%,-50%);
                     width:11px;height:11px;border-radius:50%;background:#F6EFE6;
                     box-shadow:0 0 12px rgba(255,170,80,.9)}
#fermUi .ferm-caption{position:absolute;right:clamp(14.3px,3vw,39px);bottom:91px;
                      text-align:right;opacity:0}
#fermUi .ferm-cap-label{margin:0 0 5.85px;font-family:var(--f-mono);font-weight:400;font-size:11px;
                        letter-spacing:.12em;text-transform:uppercase;color:#F6EFE6}
#fermUi .ferm-cap-sub{margin:0 0 11.7px;font-size:10.14px;color:rgba(244,240,233,.62);font-weight:300}
#fermUi .ferm-cap-formula{margin:0;font-family:var(--f-mono);font-weight:600;font-size:14.95px;
                          letter-spacing:.02em;color:#F6EFE6;font-variant-numeric:tabular-nums}
#fermUi .ferm-cap-formula i{font-style:normal;font-weight:400;color:rgba(244,240,233,.75)}
@media (max-width:760px){
  #fermUi .ferm-copy{top:12%;max-width:208px}
  #fermUi .ferm-scale{height:42vh}
  #fermUi .ferm-title{font-size:clamp(23.4px,7vw,33.8px)}
  #fermUi .ferm-cap-formula{font-size:13px}
}

/* ─────────  FILM → PAGE DISSOLVE  ─────────
   Scrolls over the fixed film stage; transparent at the top so the tail's
   last frame shows through. The tail resolves onto the D2 canvas
   (worldpull GROUND_PAPER must equal --tail-paper). Alpha reaches SOLID
   well before the bottom edge — landing on 1.0 exactly at the join reads
   as a hard seam. */
/* Seam contract (docs/after-the-planet.md): the dissolve band COLLAPSES —
   the tail itself now resolves to paper on the stage, and the globe story
   must catch the planet with zero white space between. The element stays
   for structural compatibility. */
.film-dissolve{position:relative;z-index:1;height:0;pointer-events:none}
/* #distance opens TRANSPARENT with no top padding: during the one-viewport
   slide-in the fixed stage (holding the tail's final planet frame) shows
   through, and the story's own canvas takes over pixel-identically at pin. */
#distance{background:transparent;padding:0}

@media (prefers-reduced-motion:reduce){
  /* the world holds a single frame; the register is static markup and
     needs no rule of its own */
  .sup-stage{position:static;height:auto}
}

/* ── THE REGISTER (direction B, Alan-approved) — the shared shape of the
   bottom half: hairline rows on paper, mono for measured facts, weight-300
   display for names. No plates, no pills, no radii above 2px. */
.reg{display:grid;grid-template-columns:64px minmax(0,290px) 1fr auto;gap:28px;
  align-items:baseline;padding:28px 0;border-bottom:1px solid var(--line);
  transition:background .3s var(--ease)}
.reg:first-of-type{border-top:1px solid var(--ink)}
.reg{position:relative}
.reg::after{content:'';position:absolute;left:0;right:0;bottom:-1px;height:1px;
  background:var(--chilli);transform:scaleX(0);transform-origin:left;
  transition:transform .5s var(--ease)}
.reg:hover::after{transform:scaleX(1)}
.reg .reg-n,.reg .reg-name,.reg .reg-meta{transition:color .35s var(--ease),
  transform .45s var(--ease)}
.reg:hover .reg-n{color:var(--ink)}
.reg:hover .reg-name{transform:translateX(6px)}
.reg:hover .reg-meta{color:var(--ink);letter-spacing:.14em}
.reg .reg-meta{transition:color .35s var(--ease),letter-spacing .5s var(--ease)}
.reg .reg-n{font-family:var(--f-mono);font-size:12px;letter-spacing:.1em;color:var(--ink-3)}
.reg .reg-name{font-family:var(--f-display);font-weight:300;font-size:1.55rem;
  letter-spacing:-.015em}
.reg .reg-name em{font-style:normal;font-family:'KH Hangul',var(--f-display);font-size:11.5px;
  letter-spacing:.18em;color:var(--ink-3);margin-left:12px}
.reg .reg-desc{color:var(--ink-2);font-size:.92rem;line-height:1.72;max-width:56ch}
.reg .reg-meta{font-family:var(--f-mono);font-size:12px;letter-spacing:.06em;
  color:var(--ink-2);text-align:right;white-space:nowrap;font-variant-numeric:tabular-nums}
.reg-tail{display:flex;justify-content:space-between;gap:30px;padding-top:34px;
  flex-wrap:wrap;align-items:baseline}
.reg-tail p{color:var(--ink-2);font-size:.9rem;line-height:1.7;max-width:52ch;margin:0}
@media (max-width:820px){
  .reg{grid-template-columns:44px 1fr;gap:8px 16px}
  .reg .reg-desc,.reg .reg-meta{grid-column:2;text-align:left}
}

.prod-register{margin-top:2.6rem}
.reg .reg-desc .todo{display:block;margin-top:.5rem;width:fit-content}
.reg-jade{display:block;margin-top:.5rem;font-family:var(--f-display);font-weight:400;
  font-size:12px;letter-spacing:.13em;text-transform:uppercase;color:var(--jade)}
.prod-specline-solo{font-family:var(--f-mono);font-size:12px;letter-spacing:.06em;
  color:var(--ink-2);font-variant-numeric:tabular-nums}

/* the form's actions in the quiet-CTA voice (the inspiration doc's own
   finding: "a quiet, underlined text CTA instead of a pill button") */
.link-btn{background:none;border:0;border-bottom:1px solid var(--ink);border-radius:0;
  padding:0 0 2px;font:inherit;font-size:1rem;color:var(--ink);cursor:pointer}
.link-btn:hover{border-color:var(--chilli);color:var(--chilli)}
.link-quiet{border-bottom-color:var(--line-2);color:var(--ink-2)}
.form-actions{display:flex;gap:2rem;align-items:baseline;flex-wrap:wrap;margin-top:.6rem}

/* ─────────────  WHO WE SUPPLY — the diorama (js/supply.js)  ─────────────
   A pinned scroll track over an isometric world; the stepper is the content
   and survives without the canvas (html.sup-flat / noscript). Stepper
   movement is the bkmglab clone's, in this site's voice: chip fills ink,
   title grows, body unfolds, a chilli rule fills with scroll progress. */
/* 165vh, not 720. The pin now covers only the fly-in and the scene;
   the five customer types read as a register below it (index.html).
   Measured on a 390x844 phone: 7.4 screens -> 2.8. */
.sup-track{position:relative;height:165vh}
html.sup-flat .sup-track{height:auto}
.sup-stage{position:sticky;top:0;height:100vh;height:100svh;overflow:hidden}
html.sup-flat .sup-stage{position:static;height:auto;padding:40px 0}
#supScene{position:absolute;inset:0;z-index:0}
html.sup-flat #supScene,html.sup-flat .sup-hero{display:none}

.sup-head{position:absolute;top:calc(74px + 4vh);left:clamp(24px,4.5vw,72px);z-index:2;
  pointer-events:none}
.sup-head h2{font-family:var(--f-display);font-weight:300;letter-spacing:-.022em;
  font-size:clamp(1.2rem,1.8vw,1.6rem);margin:0}
.sup-head p{font-family:var(--f-display);font-weight:400;font-size:12px;
  letter-spacing:.26em;text-transform:uppercase;color:var(--ink-2);margin:7px 0 0}
html.sup-flat .sup-head{position:static;margin-bottom:26px}

.sup-hero{position:absolute;left:clamp(24px,4.5vw,72px);bottom:12vh;z-index:3;
  max-width:560px;pointer-events:none}
.sup-hero h3{font-family:var(--f-display);font-weight:300;letter-spacing:-.024em;
  line-height:1.05;font-size:clamp(2.2rem,4.6vw,3.8rem);margin:0}
.sup-lede{margin:20px 0 0;color:var(--ink-2);font-size:15.5px;line-height:1.7;
  max-width:40ch}
.sup-cue{margin:30px 0 0;font-family:var(--f-display);font-weight:400;
  font-size:12px;letter-spacing:.26em;text-transform:uppercase;color:var(--ink-3);
  border-left:1px solid var(--line-2);padding-left:12px}

/* ---------- Who we supply: the register ----------
   The stepper's CSS lived here and is gone with it. These rows are the
   same pattern the products section uses, so the page keeps one way of
   listing things. */
.sup-list{padding:clamp(2.6rem,5vw,4rem) 0 0}
.sup-list-in{border-top:1px solid var(--line)}
.sup-item{
  display:grid;grid-template-columns:52px minmax(0,1fr) minmax(0,1.35fr) auto;
  gap:8px 26px;align-items:baseline;
  padding:1.5rem 0;border-bottom:1px solid var(--line);
}
.sup-item .n{font-family:var(--f-mono);font-size:12px;letter-spacing:.1em;color:var(--ink-3)}
.sup-item .t{font-family:var(--f-display);font-weight:300;letter-spacing:-.015em;
  font-size:clamp(1.15rem,1.7vw,1.45rem);color:var(--ink)}
.sup-item .t .ko{font-family:'KH Hangul',var(--f-display);font-size:11px;
  letter-spacing:.22em;color:var(--ink-3);margin-left:12px;vertical-align:middle}
.sup-item .d{color:var(--ink-2);font-size:14.5px;line-height:1.72;max-width:52ch}
.sup-item .c{white-space:nowrap}
.sup-item .c .link-under{font-size:14px}
/* distribution is what the section is FOR, so it is the one row with weight */
.sup-item.key{background:var(--paper-2)}
.sup-item.key .n{color:var(--chilli)}
@media (max-width:860px){
  .sup-item{grid-template-columns:44px 1fr;gap:6px 16px}
  .sup-item .d,.sup-item .c{grid-column:2;white-space:normal}
  .sup-item .c{margin-top:.5rem}
}

@media (max-width:820px){
  .sup-hero h3{font-size:clamp(1.9rem,8vw,2.6rem)}
}



.reg.reveal{opacity:1;transform:none;filter:none}   /* the row itself stays; */
.reg.reveal > *{opacity:0;transform:translateY(22px);filter:blur(6px);
  transition:opacity .78s cubic-bezier(.16,.84,.28,1),
             transform .78s cubic-bezier(.16,.84,.28,1),
             filter .78s cubic-bezier(.16,.84,.28,1)}
.reg.reveal > *:nth-child(2){transition-delay:75ms}
.reg.reveal > *:nth-child(3){transition-delay:150ms}
.reg.reveal > *:nth-child(4){transition-delay:225ms}
.reg.reveal.in > *{opacity:1;transform:none;filter:none}
@media (prefers-reduced-motion:reduce){
  .reg.reveal > *{opacity:1;transform:none;filter:none;transition:none}
}
/* the product rows are also the product PICKER — cursor + a pressed state
   in the register's own language: the number chip inks up */
.reg-pick{cursor:pointer}
.reg-pick:active{opacity:.7}
.reg-pick[aria-pressed="true"] .reg-n{background:var(--ink);color:var(--paper);
  padding:4px 7px;margin-left:-7px;border-radius:2px}

/* the copy column needs ground. Every other section gets it free from the
   page; here the diorama runs underneath, so the stepper carries its own —
   a paper wash that fades out well before the buildings. Same rule the film
   learned on its ingredient beat. */
/* z-index 1 — the wash must sit BETWEEN the canvas (0) and the copy (2).
   At 0 it tied with the canvas and lost on paint order, so the diorama drew
   straight over it and the trees kept crossing the type. */
.sup-stage::before{content:'';position:absolute;inset:0;z-index:1;
  pointer-events:none;
  background:linear-gradient(90deg,
    var(--paper) 0%, var(--paper) 26%,
    color-mix(in srgb, var(--paper) 70%, transparent) 38%,
    transparent 52%)}
html.sup-flat .sup-stage::before{display:none}
/* short viewports get the compact treatment too: a landscape phone is 844
   wide but only 390 tall, so a width-only breakpoint handed it the DESKTOP
   layout inside a letterbox — the copy ran off the bottom and the previous
   section bled over the header. (MOBILE_QUERY in index.html deliberately
   stays width-based: a landscape phone should still load the LANDSCAPE
   frame set.) */
@media (max-width:820px), (max-height:520px){
  /* PHONE: the copy no longer sits over the scene at all — the register is
     below the pin — so the scrim only has to keep the hero legible over the
     top of the world, not hide half of it. */
  .sup-stage::before{background:linear-gradient(180deg,
    transparent 0%, transparent 46%,
    color-mix(in srgb, var(--paper) 62%, transparent) 68%,
    var(--paper) 100%)}
}

/* ── mobile: the register shapes that were only solved for desktop ──── */
@media (max-width:600px){
  /* the FAQ answer indents 92px to align under the text column — on a
     375px screen that is a quarter of the width. Align to the number
     gutter instead. */
  .faq summary{grid-template-columns:38px 1fr auto;gap:14px;font-size:1.12rem}
  .faq details p{padding-left:52px}
  .reg{grid-template-columns:38px 1fr;gap:6px 14px}
  .reg .reg-name{font-size:1.3rem}
  .steps li{grid-template-columns:38px 1fr;gap:6px 14px}
  .sup-head h2{font-size:1.15rem}
}

/* ---------- Enquiry form: honeypot + status ---------- */
/* Off-screen rather than display:none — some bots skip hidden inputs. */
.hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.form-status{min-height:1.4em;margin:.6rem 0 0;font-size:.95rem;transition:color .2s}
.form-status.is-busy{color:var(--ink-3,#666460)}
.form-status.is-ok{color:var(--jade,#2C4415);font-weight:500}
.form-status.is-err{color:var(--chilli,#C43B1F)}


/* ── .doc — the standalone content pages (horeca, retail, kimchi, vegan,
   delivery, story). Moved here from retail.html's inline block the day the
   third content page appeared, so six pages cannot drift apart. Everything
   structural (type, colour, header, footer) is above; this is only the
   document layout, the .fmt table, the .note and the closing .doc-cta. ── */
  .doc{padding:6vh 0 0}   /* .site-header is sticky, not fixed — it takes its own space */
  .doc .wrap{max-width:820px}
  .doc h1{font-size:clamp(2rem,5vw,3.1rem);font-weight:300;letter-spacing:-.03em;
          line-height:1.03;text-transform:uppercase;margin:.6rem 0 1.4rem}
  .doc h2{font-size:clamp(1.25rem,2.6vw,1.65rem);font-weight:400;letter-spacing:-.02em;
          margin:3.2rem 0 .9rem}
  .doc h3{font-size:1.02rem;font-weight:600;letter-spacing:-.01em;margin:1.6rem 0 .3rem}
  .doc p{max-width:62ch;color:var(--ink-2);margin:0 0 .9rem}
  .doc .lede{font-size:1.18rem;line-height:1.55;color:var(--ink);max-width:56ch}
  .doc .kick{font-family:var(--f-mono);font-size:.7rem;font-weight:500;letter-spacing:.16em;
             text-transform:uppercase;color:var(--brass)}
  .doc ul{margin:0 0 1rem 1.1rem;color:var(--ink-2);max-width:62ch}
  .doc li{margin:.3rem 0}
  .fmt{width:100%;border-collapse:collapse;margin:1.2rem 0 .4rem}
  .fmt th,.fmt td{text-align:left;padding:.85rem .8rem .85rem 0;border-bottom:1px solid var(--line);
                  vertical-align:top;font-size:.95rem}
  .fmt thead th{font-family:var(--f-mono);font-size:.66rem;font-weight:500;letter-spacing:.14em;
                text-transform:uppercase;color:var(--ink-3);border-bottom:1px solid var(--ink)}
  .fmt td:first-child{font-family:var(--f-mono);font-weight:600;white-space:nowrap;
                      color:var(--ink);width:9rem}
  .doc ol{margin:0 0 1rem 1.2rem;color:var(--ink-2);max-width:62ch}
  /* ── .recipe — one dish on the recipes page. The JSON-LD for these is
     GENERATED from this markup by scripts/recipe_schema.py, so the ingredient
     list Google reads is literally the one on screen and cannot drift from it
     in any language. Keep .ing / .steps as the hooks that script looks for. ── */
  .recipe{margin:2.6rem 0 0;padding:1.6rem 1.6rem .4rem;border:1px solid var(--line);
          border-radius:var(--r);background:var(--paper)}
  .recipe h2{margin-top:0}
  .recipe .meta{font-family:var(--f-mono);font-size:.7rem;letter-spacing:.12em;
                text-transform:uppercase;color:var(--ink-3);margin:0 0 .9rem}
  .recipe .meta span+span::before{content:"·";margin:0 .5rem;color:var(--line)}
  .recipe ul.ing{list-style:none;margin-left:0}
  .recipe ul.ing li{padding:.34rem 0;border-bottom:1px solid var(--line)}
  .recipe ul.ing li:last-child{border-bottom:0}
  .recipe ol.steps li{margin:.5rem 0}
  @media (max-width:700px){ .recipe{padding:1.1rem 1.1rem .3rem} }
  .note{border-left:2px solid var(--brass);padding:.1rem 0 .1rem 1rem;margin:1.4rem 0}
  .doc-cta{margin:3.4rem 0 5rem;padding-top:2rem;border-top:1px solid var(--line)}
  @media (max-width:700px){ .fmt td:first-child{width:6.6rem} }

/* ── .subscribe — the newsletter block above the footer on every page.
   Double opt-in (api/subscribe.js → api/confirm.js). The form's script is
   js/subscribe.js, standalone because content pages never load main.js. ── */
.subscribe{background:var(--paper);border-top:1px solid var(--line);padding:clamp(3rem,6vw,5rem) 0}
.subscribe .wrap{max-width:820px}
.subscribe .kick{font-family:var(--f-mono);font-size:.7rem;font-weight:500;letter-spacing:.16em;text-transform:uppercase;color:var(--ink-3);margin:0 0 .6rem}
.subscribe h2{font-size:clamp(1.5rem,3vw,2.1rem);font-weight:300;letter-spacing:-.02em;margin:0 0 .8rem;max-width:24ch;text-wrap:balance}
.subscribe>.wrap>p{color:var(--ink-2);max-width:56ch;margin:0 0 1.6rem}
.sub-form{display:grid;gap:1rem;max-width:520px}
.sub-kind{display:flex;flex-wrap:wrap;gap:1.2rem;font-size:.92rem;color:var(--ink-2)}
.sub-kind label{display:flex;gap:.45rem;align-items:center;cursor:pointer}
.sub-kind input{accent-color:var(--chilli)}
.sub-form .form-actions{margin-top:0}
.stockists{list-style:none;margin:0 0 1rem;padding:0;max-width:62ch}
.stockists li{padding:.8rem 0;border-top:1px solid var(--line);color:var(--ink-2)}
.stockists li:last-child{border-bottom:1px solid var(--line)}
.stockists strong{color:var(--ink)}
.doc blockquote{margin:0 0 1rem;padding:.2rem 0 .2rem 1rem;border-left:2px solid var(--chilli);color:var(--ink);max-width:56ch;font-size:1.05rem}