/* ============================================================
   SINOCHA — Design System v2 · "Quiet plate"
   Editorial, air-led. Separation by whitespace and tone, not by
   borders. One typeface family does the talking; the mono is a
   caption voice used sparingly. Liquor colours stay as the only
   saturated accents on the page.
   ============================================================ */

:root{
  --paper:   #F7F5F0;
  --paper-2: #FCFBF8;
  --paper-3: #EFECE4;
  --ink:     #111411;
  --ink-2:   #383D37;
  --ink-3:   #636961;
  --rule:    #E4E0D6;
  --rule-2:  #CFCABD;

  --jade:    #1B4634;
  --jade-lt: #2E6A50;
  --gold:    #A6812F;
  --gold-lt: #D3AD5C;

  --liq-gunpowder:#C4CB63; --liq-chunmee:#D9C766; --liq-sencha:#A8C25E;
  --liq-jasmine:#E0CE7E;   --liq-oolong:#C98A34;  --liq-black:#9A3D14; --liq-puer:#5A2412;

  --wrap:1280px; --narrow:720px; --gut:clamp(22px,5vw,72px);
  --r:2px;
  --shadow:0 30px 70px -40px rgba(17,20,17,.35);
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--paper);color:var(--ink-2);font-family:var(--f-body);font-size:17.5px;line-height:1.72;-webkit-font-smoothing:antialiased;font-feature-settings:"kern","liga"}

h1,h2,h3,h4{color:var(--ink);font-family:var(--f-display);font-weight:400;line-height:1.06;letter-spacing:-.022em;margin:0 0 .45em}
h1{font-size:clamp(2.9rem,6.6vw,5.6rem);letter-spacing:-.032em;line-height:1.0}
h2{font-size:clamp(2rem,3.9vw,3.2rem)}
h3{font-size:clamp(1.28rem,1.9vw,1.6rem);line-height:1.18}
h4{font-size:1.02rem;font-family:var(--f-body);font-weight:600;letter-spacing:0;margin-bottom:.4em}
p{margin:0 0 1.2em}
a{color:var(--ink);text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:.2em;text-decoration-color:var(--rule-2);transition:text-decoration-color .2s}
a:hover{text-decoration-color:var(--ink)}
:focus-visible{outline:2px solid var(--gold);outline-offset:4px}
strong{color:var(--ink);font-weight:600}
hr{border:0;border-top:1px solid var(--rule);margin:0}
img{max-width:100%}

/* --- layout ---------------------------------------------- */
.wrap{max-width:var(--wrap);margin-inline:auto;padding-inline:var(--gut)}
.wrap-narrow{max-width:var(--narrow);margin-inline:auto;padding-inline:var(--gut)}
section{padding-block:clamp(64px,7vw,120px)}
.section-tight{padding-block:clamp(56px,7vw,112px)}
.section-flush{padding-block:0}
.band-ink{background:var(--ink);color:#C9CDC1}
.band-ink h1,.band-ink h2,.band-ink h3,.band-ink h4{color:#F6F4EE}
.band-sunken{background:var(--paper-3)}
.band-ink a,.band-jade a{color:#F6F4EE;text-decoration-color:rgba(255,255,255,.35)}
.band-ink a:hover,.band-jade a:hover{text-decoration-color:#fff}

/* --- voices ---------------------------------------------- */
.kicker{font-family:var(--f-mono);font-size:.68rem;font-weight:500;letter-spacing:.18em;text-transform:uppercase;color:var(--ink-3);margin:0 0 1.6em}
.band-ink .kicker,.band-jade .kicker{color:#9AA394}
.lede{font-size:clamp(1.15rem,1.7vw,1.38rem);line-height:1.5;color:var(--ink-2);max-width:56ch;font-weight:400}
.band-ink .lede,.band-jade .lede{color:inherit}

/* Answer-first paragraph — the GEO primitive. Styled as a lead, not a callout. */
.answer{font-size:clamp(1.12rem,1.5vw,1.3rem);line-height:1.52;color:var(--ink);max-width:60ch;margin:0 0 1.5em;font-weight:400}
.band-ink .answer,.band-jade .answer{color:#F0EEE7}

.stamp{font-family:var(--f-mono);font-size:.66rem;letter-spacing:.12em;text-transform:uppercase;color:var(--ink-3)}
.mono{font-family:var(--f-mono)} .muted{color:var(--ink-3)}
.visually-hidden{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

/* --- tables: editorial hairlines, no box ------------------ */
.tbl-wrap{overflow-x:auto;margin:2.2em 0 2.6em}
table{width:100%;border-collapse:collapse;font-size:.94rem;min-width:560px}
caption{caption-side:top;text-align:left;padding:0 0 1.1em;font-family:var(--f-display);font-size:1.15rem;color:var(--ink);letter-spacing:-.01em}
thead th{text-align:left;font-family:var(--f-mono);font-weight:500;font-size:.64rem;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-3);padding:0 1.4em .9em 0;border-bottom:1px solid var(--ink)}
tbody th{text-align:left;font-weight:500;color:var(--ink);padding:1.05em 1.4em 1.05em 0;vertical-align:top;border-top:1px solid var(--rule)}
tbody td{padding:1.05em 1.4em 1.05em 0;border-top:1px solid var(--rule);vertical-align:top;color:var(--ink-2)}
tbody tr:first-child th,tbody tr:first-child td{border-top:0}
td.num,th.num{font-family:var(--f-mono);font-size:.86rem;font-variant-numeric:tabular-nums;white-space:nowrap}
.pos{color:#1E6B45}.neg{color:#9A3D14}
.band-ink caption{color:#F6F4EE}
.band-ink thead th{color:#9AA394;border-bottom-color:rgba(255,255,255,.5)}
.band-ink tbody th{color:#F6F4EE;border-top-color:rgba(255,255,255,.12)}
.band-ink tbody td{color:#C9CDC1;border-top-color:rgba(255,255,255,.12)}
.band-ink .pos{color:#93D4AD}.band-ink .neg{color:#E9A07A}

/* --- spec sheet ------------------------------------------ */
.spec dl{margin:2em 0;display:grid;grid-template-columns:minmax(150px,.36fr) 1fr}
.spec dt{font-family:var(--f-mono);font-size:.64rem;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-3);padding-block:1em;padding-inline:0 1em;border-top:1px solid var(--rule);display:flex;align-items:center}
.spec dd{margin:0;padding:1em 0;border-top:1px solid var(--rule);color:var(--ink);font-size:.97rem}
.spec dl>dt:first-child,.spec dl>dt:first-child+dd{border-top:0}

/* --- liquor ----------------------------------------------- */
.liquor{display:flex;align-items:center;gap:.9em}
.liquor-dot{width:44px;height:44px;border-radius:50%;flex:none;box-shadow:inset 0 -9px 16px -7px rgba(0,0,0,.38),inset 0 3px 7px rgba(255,255,255,.55),0 0 0 1px rgba(17,20,17,.06)}
.liquor-meta{font-family:var(--f-mono);font-size:.66rem;letter-spacing:.08em;color:var(--ink-3);line-height:1.5}
.liquor-meta b{display:block;font-family:var(--f-body);font-size:.95rem;letter-spacing:0;color:var(--ink);font-weight:500}
.liquor-dot-lg{width:88px;height:88px;display:inline-block}
.cup{text-decoration:none;display:flex;flex-direction:column;align-items:center;gap:1em;text-align:center}
.cup .liquor-dot{width:clamp(64px,7vw,96px);height:clamp(64px,7vw,96px);transition:transform .25s}
.cup:hover .liquor-dot{transform:translateY(-4px)}
@media (prefers-reduced-motion:reduce){.cup:hover .liquor-dot{transform:none}}
.cup b{font-family:var(--f-display);font-weight:400;font-size:1.05rem;color:var(--ink)}
.cup span{font-family:var(--f-mono);font-size:.62rem;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-3)}

/* --- grade rail ------------------------------------------ */
.rail{display:flex;flex-wrap:wrap;border-top:1px solid var(--rule);border-bottom:1px solid var(--rule)}
.rail a{font-family:var(--f-mono);font-size:.72rem;letter-spacing:.1em;text-decoration:none;color:var(--ink-2);padding:1.05em 1.4em;display:flex;align-items:baseline;gap:.6em;transition:color .18s}
.rail a:hover{color:var(--ink)}
.rail a span{font-size:.6rem;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-3)}
@media (max-width:1220px){.rail{overflow-x:auto;flex-wrap:nowrap}.rail a{white-space:nowrap}}

/* --- grids ------------------------------------------------ */
.grid{display:grid;gap:clamp(28px,3.6vw,52px) clamp(22px,3vw,44px)}
.g2{grid-template-columns:repeat(auto-fit,minmax(300px,1fr))}
.g3{grid-template-columns:repeat(auto-fit,minmax(272px,1fr))}
.g4{grid-template-columns:repeat(auto-fit,minmax(200px,1fr))}

/* Borderless tile: image + caption. The premium card. */
.card,.mcard{display:flex;flex-direction:column;gap:.7em;text-decoration:none;color:inherit;background:transparent;border:0;padding:0;overflow:visible}
.mcard .fig{border-radius:var(--r);overflow:hidden;background:var(--paper-3)}
.mcard .fig img{transition:transform .8s cubic-bezier(.2,.7,.2,1)}
.mcard:hover .fig img{transform:scale(1.035)}
@media (prefers-reduced-motion:reduce){.mcard:hover .fig img{transform:none}}
.mcard-body{padding:.95em 0 0;display:flex;flex-direction:column;gap:.35em}
.mcard h3,.card h3{margin:0;font-size:1.28rem}
.mcard h4,.card h4{margin:0}
.mcard p,.card p{margin:0;font-size:.93rem;color:var(--ink-3);line-height:1.55;max-width:38ch}
.mcard .prod-meta{margin-top:.5em}
.card{padding:1.6em 0 0;border-top:1px solid var(--rule)}
.card p{max-width:none}
.band-ink .card{border-top-color:rgba(255,255,255,.14)}
.band-ink .mcard h3,.band-ink .card h3,.band-ink .card h4{color:#F6F4EE}
.band-ink .mcard p,.band-ink .card p{color:#A6AE9F}

.prod-meta{font-family:var(--f-mono);font-size:.64rem;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-3);margin:0}
.mcard-liquor{position:absolute;inset-inline-start:14px;bottom:14px;display:flex;align-items:center;background:rgba(17,20,17,.58);backdrop-filter:blur(14px);border:1px solid rgba(255,255,255,.16);border-radius:2px;padding:.48em .72em}
.mcard-liquor span{font-family:var(--f-mono);font-size:.6rem;letter-spacing:.12em;text-transform:uppercase;color:#EEEBE3}

/* --- figures ---------------------------------------------- */
.fig{position:relative;overflow:hidden;background:var(--paper-3);border-radius:var(--r)}
.fig img{display:block;width:100%;height:100%;object-fit:cover}
.fig-ink{background:var(--ink)}
.fig-veil::after{content:"";position:absolute;inset:0;pointer-events:none;background:linear-gradient(180deg,rgba(17,20,17,0) 55%,rgba(17,20,17,.5) 100%)}
.page-visual{padding:0 0 clamp(64px,8vw,124px)}
.page-visual .fig{max-height:680px;background:#D9D5CA}
.page-visual-img{display:block;width:100%;height:auto;object-fit:cover;object-position:center;border-radius:var(--r)}
@media (max-width:700px){.page-visual{padding-bottom:64px}.page-visual-img{aspect-ratio:4/3!important}}

/* --- stats ------------------------------------------------ */
.stat{display:flex;flex-direction:column;gap:.5em;min-width:0}
.stat b{font-family:var(--f-display);font-size:clamp(1.9rem,3vw,2.9rem);font-weight:300;color:var(--ink);line-height:.95;letter-spacing:-.03em;white-space:nowrap}
.band-ink .stat b{color:#F6F4EE}
.stat span{font-family:var(--f-mono);font-size:.64rem;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-3)}
.band-ink .stat span{color:#9AA394}
.stat-row{margin:3em 0 3.5em}

/* --- buttons & links -------------------------------------- */
.btn{display:inline-flex;align-items:center;gap:.7em;text-decoration:none;font-family:var(--f-mono);font-size:.7rem;letter-spacing:.14em;text-transform:uppercase;padding:1.05em 1.7em;border-radius:100px;border:1px solid transparent;cursor:pointer;transition:all .2s}
.btn-primary{background:var(--ink);color:#F6F4EE}
.btn-primary:hover{background:var(--jade)}
.band-ink .btn-primary,.band-jade .btn-primary{background:#F6F4EE;color:var(--ink)}
.band-ink .btn-primary:hover,.band-jade .btn-primary:hover{background:#fff}
.band-ink .btn-ghost,.band-jade .btn-ghost{border-color:rgba(255,255,255,.3);color:#F6F4EE}
.band-ink .btn-ghost:hover,.band-jade .btn-ghost:hover{border-color:#fff}
.link{font-family:var(--f-mono);font-size:.7rem;letter-spacing:.14em;text-transform:uppercase;text-decoration:none;color:var(--ink);display:inline-flex;align-items:center;gap:.6em}
.link::after{content:"→";transition:transform .2s}
.link:hover::after{transform:translateX(4px)}
.band-ink .link{color:#F6F4EE}

/* --- sources ---------------------------------------------- */
.sources{margin:3em 0 0;padding-top:1.6em;border-top:1px solid var(--ink)}
.sources h3,.sources h4{font-family:var(--f-mono);font-size:.64rem;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-3);margin:0 0 1em;font-weight:500}
.sources ul{margin:0;padding:0;list-style:none;display:flex;flex-direction:column;gap:.55em}
.sources li{font-size:.88rem;line-height:1.5;color:var(--ink-2)}
.sources li b{color:var(--ink);font-weight:500}
.band-ink .sources{border-top-color:rgba(255,255,255,.4)}
.band-ink .sources li{color:#C9CDC1}.band-ink .sources li b{color:#F6F4EE}

/* --- FAQ -------------------------------------------------- */
.faq{border-top:1px solid var(--ink);margin-top:1.5em}
.faq details{border-bottom:1px solid var(--rule)}
.faq summary{cursor:pointer;list-style:none;padding:1.35em 2.6em 1.35em 0;position:relative;font-family:var(--f-display);font-size:clamp(1.12rem,1.6vw,1.34rem);color:var(--ink);line-height:1.3}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";position:absolute;right:.2em;top:50%;transform:translateY(-50%);font-family:var(--f-mono);font-size:1.15rem;color:var(--ink-3);font-weight:300}
.faq details[open] summary::after{content:"–"}
.faq .faq-a{padding:0 0 1.6em;max-width:66ch;font-size:.98rem}
.faq .faq-a p:last-child{margin-bottom:0}
.band-ink .faq{border-top-color:rgba(255,255,255,.4)}
.band-ink .faq details{border-bottom-color:rgba(255,255,255,.12)}
.band-ink .faq summary{color:#F6F4EE}

/* --- breadcrumb ------------------------------------------- */
.crumb{font-family:var(--f-mono);font-size:.64rem;letter-spacing:.12em;text-transform:uppercase;color:var(--ink-3);padding-block:1.6em 0}
.crumb a{color:var(--ink-3);text-decoration:none}
.crumb a:hover{color:var(--ink)}
.crumb span{opacity:.4;margin-inline:.6em}

/* --- prose ------------------------------------------------ */
.prose{max-width:62ch}
.prose h2{margin-top:2.4em}
.prose h3{margin-top:1.9em}
.prose ul,.prose ol{padding-left:1.2em;margin:0 0 1.3em}
.prose li{margin-bottom:.5em}
.prose .tbl-wrap{min-width:100%}
.prose blockquote{margin:2em 0;padding:0;border:0;font-family:var(--f-display);font-size:1.4rem;line-height:1.4;color:var(--ink)}

/* ============================================================
   MASTHEAD
   ============================================================ */
.masthead{position:sticky;top:0;z-index:50;background:rgba(247,245,240,.88);backdrop-filter:saturate(1.4) blur(12px);border-bottom:1px solid var(--rule)}
.masthead-in{display:flex;align-items:center;gap:2.4em;min-height:84px}
.wordmark{display:inline-flex;align-items:center;gap:.6em;text-decoration:none;color:var(--ink);font-family:var(--f-display);font-size:1.3rem;font-weight:400;letter-spacing:.06em;flex:none}
.wordmark .mark{display:block}
.nav{display:flex;gap:2.1em;margin-left:auto}
.nav a{text-decoration:none;color:var(--ink-2);font-size:.86rem;font-weight:450;padding-block:.4em;white-space:nowrap;transition:color .2s}
.nav a:hover{color:var(--ink)}
.nav-cta{flex:none;padding:.8em 1.3em;font-size:.68rem}
.lang-switch{position:relative;flex:none;font-family:var(--f-mono);font-size:.64rem;letter-spacing:.1em}
.lang-switch summary{list-style:none;cursor:pointer;min-width:3.7em;padding:.72em .9em;border:1px solid var(--rule-2);border-radius:100px;text-align:center;color:var(--ink);background:rgba(247,245,240,.92)}
.lang-switch summary::-webkit-details-marker{display:none}
.lang-switch[open] summary{border-color:var(--ink)}
.lang-menu{position:absolute;top:calc(100% + .7em);right:0;z-index:80;display:grid;grid-template-columns:1fr 1fr;min-width:260px;padding:.65em;background:var(--paper);border:1px solid var(--rule);box-shadow:0 18px 50px rgba(17,20,17,.14)}
.lang-menu a{padding:.75em .8em;color:var(--ink-2);text-decoration:none;white-space:nowrap;letter-spacing:0;font-family:var(--f-body);font-size:.78rem}
.lang-menu a:hover,.lang-menu a[aria-current="page"]{background:var(--paper-3);color:var(--ink)}
.nav-toggle{display:none;background:none;border:0;padding:.5em;cursor:pointer;margin-left:auto;flex-direction:column;gap:5px}
.nav-toggle span{display:block;width:22px;height:1px;background:var(--ink)}
.mobnav{display:none;flex-direction:column;border-top:1px solid var(--rule);padding:.6em var(--gut) 1.4em;background:var(--paper-2)}
.mobnav a{text-decoration:none;color:var(--ink);padding:.9em 0;border-bottom:1px solid var(--rule);font-size:1.05rem;font-family:var(--f-display)}
.mobnav .mobnav-cta{margin-top:1em;border:0;font-family:var(--f-mono);font-size:.7rem;letter-spacing:.14em;text-transform:uppercase}
.masthead.open .mobnav{display:flex}
@media (max-width:1000px){.nav,.nav-cta{display:none}.lang-switch{margin-left:auto}.nav-toggle{display:flex;margin-left:0}.masthead-in{gap:1em}}

/* Localized typography and right-to-left layout. */
html[lang="zh-Hans"] body{font-family:"PingFang SC","Noto Sans CJK SC","Microsoft YaHei",sans-serif}
html[lang="zh-Hans"] h1,html[lang="zh-Hans"] h2,html[lang="zh-Hans"] h3,html[lang="zh-Hans"] h4{font-family:"Songti SC","Noto Serif CJK SC",serif;letter-spacing:-.02em}
html[lang="ja"] body{font-family:"Hiragino Sans","Yu Gothic",sans-serif}
html[lang="ja"] h1,html[lang="ja"] h2,html[lang="ja"] h3,html[lang="ja"] h4{font-family:"Yu Mincho","Hiragino Mincho ProN",serif;letter-spacing:-.02em}
html[dir="rtl"] body{direction:rtl;font-family:"Geeza Pro","Noto Naskh Arabic",Tahoma,sans-serif}
html[dir="rtl"] h1,html[dir="rtl"] h2,html[dir="rtl"] h3,html[dir="rtl"] h4{font-family:"Geeza Pro","Noto Naskh Arabic",serif;letter-spacing:0}
html[dir="rtl"] .nav{margin-left:0;margin-right:auto}
html[dir="rtl"] .lang-menu{right:auto;left:0}
html[dir="rtl"] .faq summary{padding-right:0;padding-left:2.6em}
html[dir="rtl"] .faq summary::after{right:auto;left:.2em}
/* Only the wordmark is forced left-to-right. .mono, .num, .prod-meta and .rank-val carry
   translated Arabic on /ar/ (hundreds of elements), which a forced LTR run reorders; the
   codes and figures inside them are isolated with <bdi> in the markup instead. */
html[dir="rtl"] .wordmark{direction:ltr;unicode-bidi:isolate}
.locale-status{padding:.55rem var(--gut);font-size:.75rem;line-height:1.6;background:var(--paper-2);border-bottom:1px solid var(--rule);color:var(--ink-3)}
html[dir="rtl"] .legal-name,html[dir="rtl"] .legal-id,
html[dir="rtl"] a[href^="mailto:"],html[dir="rtl"] a[href^="tel:"]{direction:ltr;unicode-bidi:isolate}
html[dir="rtl"] .link::after{content:"←"}

/* ============================================================
   HERO — full-bleed, one image, one sentence
   ============================================================ */
.hero{position:relative;padding:0;background:linear-gradient(180deg,#1E3128 0%,#111411 100%);color:#DDE1D5;overflow:hidden;min-height:min(88vh,920px);display:flex;align-items:flex-end}
.hero-media{position:absolute;inset:0}
.hero-media img{width:100%;height:100%;object-fit:cover;display:block;opacity:1}
.hero-media::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(17,20,17,.18) 0%,rgba(17,20,17,.22) 40%,rgba(17,20,17,.78) 100%)}
.hero-in{position:relative;width:100%;padding-block:clamp(56px,7vw,110px)}
.hero h1{color:#FBFAF5;margin-bottom:.35em;max-width:11ch}
.hero .lede{color:#D6DACF;max-width:44ch}
.hero .kicker{color:#E4E7DE}
.hero-actions{display:flex;gap:2.2em;flex-wrap:wrap;margin-top:2.2em;align-items:center}
.hero .link{color:#FBFAF5}
.hero .btn-primary{background:#F6F4EE;color:var(--ink)}
.hero .btn-primary:hover{background:#fff}

/* ============================================================
   PAGE HEAD / BANNER
   ============================================================ */
.page-head{padding-block:clamp(42px,5vw,72px) clamp(28px,3.5vw,48px)}
.page-head h1{margin-bottom:.4em}
.page-head-products{padding-top:clamp(36px,4vw,56px);padding-bottom:clamp(22px,2vw,32px)}
.page-head-products h1{font-size:clamp(2.9rem,5.8vw,5rem)}
.page-head-products .lede{max-width:68ch}
.range-head{display:grid;grid-template-columns:minmax(0,1fr) minmax(320px,.72fr);gap:clamp(36px,7vw,110px);align-items:end}
.range-head .kicker{margin-bottom:1.1em}
.range-head h2{max-width:16ch;margin-bottom:0}
.range-head .answer{margin:0}
.product-range{padding-top:clamp(48px,5vw,76px)}
.product-card-grid{margin-top:clamp(44px,5vw,72px)}
.product-fit{padding-top:clamp(60px,6vw,92px)}
.contact-head-grid{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(360px,.75fr);gap:clamp(44px,8vw,130px);align-items:end}
.contact-head-grid h1,.contact-head-grid .lede{margin-bottom:0}
.page-head-contact{padding-bottom:clamp(28px,3vw,44px)}
.rfq-steps{list-style:none;margin:clamp(32px,4vw,54px) 0 0;padding:0;border-top:1px solid var(--ink);display:grid;grid-template-columns:repeat(3,1fr)}
.rfq-steps li{display:flex;align-items:center;gap:1em;padding:1.1em 0;border-bottom:1px solid var(--rule);font-family:var(--f-display);font-size:1.06rem;color:var(--ink)}
.rfq-steps li+li{padding-left:clamp(18px,3vw,42px);border-left:1px solid var(--rule)}
.rfq-steps span{font-family:var(--f-mono);font-size:.6rem;letter-spacing:.12em;color:var(--ink-3)}
.contact-section{padding-top:clamp(42px,4.5vw,68px)}
.prod-zh{font-family:var(--f-display);font-size:1.5rem;color:var(--ink-3);margin:0 0 .6em;font-weight:300}

.banner{position:relative;padding:0;background:var(--ink)}
.banner-fig{height:clamp(340px,36vw,500px);min-height:0;border-radius:0}
.banner-fig img{width:100%;height:100%;object-fit:cover;aspect-ratio:auto!important}
.banner-in{position:absolute;inset:auto 0 0 0;padding-bottom:clamp(30px,4vw,64px)}
.banner h1,.banner h2{color:#FBFAF5}
.banner .kicker{color:#C9CEC2}
.banner .prod-zh{color:#B8BEB1;margin-bottom:0}
.banner-grid{display:grid;grid-template-columns:1fr auto;gap:2em;align-items:end}
.banner-liquor{text-align:end}
.banner-liquor p{margin:.75em 0 0;font-size:.66rem;letter-spacing:.1em;color:#B8BEB1;line-height:1.6}
.banner-liquor b{color:#FBFAF5;font-size:.78rem}
.banner .liquor-dot-lg{width:72px;height:72px}
@media (max-width:700px){.banner-fig{height:440px}.banner-grid{grid-template-columns:1fr}.banner-liquor{text-align:start}}
.article-cover{margin-top:clamp(24px,3vw,44px)}

/* ============================================================
   COMPOSITIONS
   ============================================================ */
.split{display:grid;grid-template-columns:1fr 1fr;gap:clamp(36px,6vw,100px);align-items:center}
@media (max-width:880px){.split,.split-wide{grid-template-columns:1fr}}
.track{padding:2.2em 0 0;border-top:1px solid var(--ink)}
.track h3{margin-bottom:.6em}
.ticks{list-style:none;padding:0;margin:1.6em 0 0;display:flex;flex-direction:column;gap:.7em}
.ticks li{font-size:.94rem;padding-left:1.3em;position:relative;color:var(--ink-3)}
.ticks li::before{content:"";position:absolute;left:0;top:.7em;width:5px;height:5px;border-radius:50%;background:var(--gold)}
.ticks li a{color:var(--ink);text-decoration:none;font-weight:500}
.band-ink .track{border-top-color:rgba(255,255,255,.4)}

.disclose{margin:2.4em 0;padding:1.6em 0;border-top:1px solid var(--ink);border-bottom:1px solid var(--rule)}
.disclose p:last-child{margin-bottom:0;font-size:.97rem;color:var(--ink)}
.disclose .kicker{margin-bottom:.8em}

.cta-block{display:grid;grid-template-columns:1.3fr auto;gap:clamp(28px,5vw,80px);align-items:center}
.cta-actions{display:flex;gap:1em;flex-wrap:wrap}
@media (max-width:860px){.cta-block{grid-template-columns:1fr}}

/* --- glossary / steps / filter / calc / rfq --------------- */
.gloss{margin:2em 0 0;display:grid;grid-template-columns:repeat(auto-fit,minmax(320px,1fr));gap:0 clamp(28px,4vw,64px)}
.gloss-item{border-top:1px solid var(--rule);padding:1.4em 0;scroll-margin-top:100px}
.gloss-item dt{font-family:var(--f-display);font-size:1.2rem;color:var(--ink);margin-bottom:.4em;line-height:1.25}
.gloss-item dt .mono{font-size:.68rem;color:var(--ink-3);letter-spacing:.08em}
.gloss-zh{font-size:.95rem;color:var(--ink-3);font-weight:300}
.gloss-item dd{margin:0;font-size:.93rem;line-height:1.6;color:var(--ink-2)}
.gloss-item:target{background:linear-gradient(90deg,rgba(166,129,47,.1),transparent 60%)}

.steps{list-style:none;padding:0;margin:3em 0 0;display:grid;grid-template-columns:repeat(auto-fit,minmax(320px,1fr));gap:0 clamp(28px,4vw,72px)}
.step{display:grid;grid-template-columns:auto 1fr;gap:1.4em;padding:1.7em 0;border-top:1px solid var(--rule)}
.step-n{font-size:.7rem;color:var(--gold);letter-spacing:.14em;padding-top:.45em}
.step h3{font-size:1.2rem;margin:0 0 .4em}
.step p{margin:0;font-size:.93rem;color:var(--ink-3);line-height:1.6}

.filterbar{display:flex;align-items:center;gap:.5em;flex-wrap:wrap;margin:0 0 1.8em}
.filterbar>.mono{font-size:.62rem;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-3);margin-inline-end:.4em}
.chip{font-family:var(--f-mono);font-size:.66rem;letter-spacing:.08em;cursor:pointer;background:transparent;border:1px solid var(--rule-2);color:var(--ink-2);padding:.55em .95em;border-radius:100px;transition:all .16s}
.chip:hover{border-color:var(--ink);color:var(--ink)}
.chip.is-on{background:var(--ink);border-color:var(--ink);color:#F6F4EE}
tr[hidden]{display:none}

.calc{margin:3em 0 0;padding-top:2.2em;border-top:1px solid var(--ink)}
.calc h3{margin:0 0 1.4em}
.calc-row{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:1.4em;margin-bottom:1.8em}
.calc label{display:flex;flex-direction:column;gap:.6em;font-family:var(--f-mono);font-size:.64rem;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-3)}
.calc-input{display:flex;align-items:center;gap:.7em}
.calc input{font-family:var(--f-mono);font-size:1.1rem;padding:.65em .8em;border:0;border-bottom:1px solid var(--ink);border-radius:0;background:transparent;color:var(--ink);width:130px}
.calc input:focus{outline:0;border-bottom-color:var(--gold)}
.calc-out{padding-top:.4em}
.calc-out .tbl-wrap{margin:1em 0 0}
.calc-note{font-size:.8rem;margin:1.4em 0 0}
.calc-verdict{font-family:var(--f-display);font-size:1.25rem;color:var(--ink);margin:0 0 .6em;letter-spacing:0;text-transform:none}

.rfq-grid{display:grid;grid-template-columns:1.1fr .9fr;gap:clamp(36px,6vw,110px);align-items:start}
@media (max-width:900px){.rfq-grid{grid-template-columns:1fr}}
.rfq{padding:0}
.field{display:flex;flex-direction:column;gap:.55em;margin-bottom:1.6em}
.field-row{display:grid;grid-template-columns:1fr 1fr;gap:1.4em}
@media (max-width:560px){.field-row{grid-template-columns:1fr}}
.field label{font-family:var(--f-mono);font-size:.66rem;letter-spacing:.13em;text-transform:uppercase;color:var(--ink-3);display:flex;gap:.7em;align-items:baseline}
.req{color:#765817;font-size:.58rem}
.field input,.field select,.field textarea{font-family:var(--f-body);font-size:1rem;padding:.8em 0;border:0;border-bottom:1px solid var(--rule-2);border-radius:0;background:transparent;color:var(--ink);width:100%}
.field textarea{resize:vertical;line-height:1.55}
.field input:focus,.field select:focus,.field textarea:focus{outline:0;border-bottom-color:var(--ink)}
.rfq button{margin-top:.6em}
.rfq-note{font-size:.82rem;margin:1.4em 0 0}
.rfq-side h2{font-size:1.7rem;margin-top:0}
.rfq-side h3{font-size:.7rem;font-family:var(--f-mono);font-weight:500;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-3);margin:2.4em 0 .9em}
.rfq-side .ticks li{font-size:.92rem}
@media (max-width:900px){
  .range-head,.contact-head-grid{grid-template-columns:1fr}
  .range-head{gap:1.6em}
  .range-head h2{max-width:16ch}
  .page-head-products{padding-top:32px;padding-bottom:22px}
  .page-head-products h1{font-size:clamp(2.55rem,11vw,3.4rem)}
  .page-head-products .lede{font-size:1.03rem;line-height:1.55}
  .product-range{padding-top:40px}
  .product-card-grid{margin-top:36px}
  .contact-head-grid{gap:1.4em}
  .rfq-steps{grid-template-columns:1fr}
  .rfq-steps li+li{padding-left:0;border-left:0}
}

/* ============================================================
   FOOTER
   ============================================================ */
.foot{background:var(--paper);color:var(--ink-3);padding-block:clamp(72px,9vw,140px) 40px;border-top:1px solid var(--rule)}
.foot-top{display:grid;grid-template-columns:1.5fr repeat(4,1fr);gap:clamp(28px,4vw,56px);padding-bottom:3.5em;border-bottom:1px solid var(--rule)}
.foot-brand .wordmark{margin-bottom:1.1em}
.foot-brand p{font-size:.9rem;max-width:30ch;color:var(--ink-3)}
.foot-col h3,.foot-col h4{font-family:var(--f-mono);font-size:.62rem;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-3);margin:0 0 1.2em;font-weight:500}
.foot-col a{display:block;color:var(--ink-2);text-decoration:none;font-size:.9rem;padding-block:.3em;transition:color .2s}
.foot-col a:hover{color:var(--ink)}
.foot-bottom{display:flex;justify-content:space-between;gap:1.5em;flex-wrap:wrap;padding-top:1.8em;font-size:.76rem;font-family:var(--f-mono);letter-spacing:.06em}
.foot-legal a{color:var(--ink-3);text-decoration:none}
.foot-legal a:hover{color:var(--ink)}
@media (max-width:980px){.foot-top{grid-template-columns:1fr 1fr}}
@media (max-width:560px){.foot-top{grid-template-columns:1fr}}

/* ============================================================
   RANKINGS / COMPARISONS
   ============================================================ */
.rank{list-style:none;margin:2.5em 0 0;padding:0;border-top:1px solid var(--ink)}
.rank li{display:grid;grid-template-columns:3.2em minmax(0,1fr) auto;gap:1.4em;align-items:baseline;padding:1.35em 0;border-bottom:1px solid var(--rule)}
.rank-n{font-family:var(--f-display);font-size:1.7rem;color:var(--ink-3);font-weight:300;line-height:1}
.rank-name{font-family:var(--f-display);font-size:1.32rem;color:var(--ink);line-height:1.25}
.rank-name a{text-decoration:none}
.rank-name a:hover{text-decoration:underline}
.rank-note{display:block;font-family:var(--f-body);font-size:.9rem;color:var(--ink-3);margin-top:.35em;line-height:1.5}
.rank-val{font-family:var(--f-mono);font-size:.86rem;color:var(--ink);white-space:nowrap;font-variant-numeric:tabular-nums}
/* A 1fr track's minimum is its min-content width, so one long name or value pushed the
   row to 417px on a 320px screen. minmax(0,1fr) and anywhere-wrapping let it shrink. */
.rank-name,.rank-val{min-width:0;overflow-wrap:anywhere}
@media (max-width:560px){.rank li{grid-template-columns:2.4em minmax(0,1fr)}.rank-val{grid-column:2;white-space:normal}}

.vs{display:grid;grid-template-columns:1fr auto 1fr;gap:clamp(20px,3vw,44px);align-items:center;margin:2.5em 0 0}
@media (max-width:640px){.vs{grid-template-columns:1fr}.vs-mark{display:none}}

.hub-list{list-style:none;margin:2.5em 0 0;padding:0;border-top:1px solid var(--ink)}
.hub-list li{border-bottom:1px solid var(--rule)}
.hub-list a{display:grid;grid-template-columns:1fr auto;gap:2em;align-items:baseline;padding:1.3em 0;text-decoration:none;color:var(--ink)}
.hub-list a b{font-family:var(--f-display);font-weight:400;font-size:1.28rem;line-height:1.25}
.hub-list a small{display:block;font-size:.9rem;color:var(--ink-3);margin-top:.3em;line-height:1.5;max-width:64ch}
.hub-list a .mono{font-size:.62rem;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-3)}
.hub-list a:hover b{text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:.2em}

/* --- project-supplied motion footage ---------------------- */
.hero-video .hero-media video{display:block;width:100%;height:100%;object-fit:cover;object-position:center center}
.hero-video .hero-media::after{background:linear-gradient(90deg,rgba(17,20,17,.7) 0%,rgba(17,20,17,.32) 48%,rgba(17,20,17,.08) 78%),linear-gradient(180deg,rgba(17,20,17,.12) 0%,rgba(17,20,17,.16) 46%,rgba(17,20,17,.72) 100%)}
@media (max-width:760px){
  .hero-video .hero-media video{object-position:center center}
  .process-films{grid-template-columns:1fr;align-items:start}
  .process-film-portrait{height:620px}
  .process-film-wide{height:auto;aspect-ratio:16/9}
}
@media (prefers-reduced-motion:reduce){.hero-video .hero-media video{display:none}}
/* Hero still: the frame shown before the loop loads, when reduced motion removes the video
   and when the pause control stops it. An isolated box with the still at z-index:-1 keeps it
   under the video whatever the source order, and above the hero's own gradient ground. */
.hero-video .hero-media{isolation:isolate}
.hero-video .hero-media img{position:absolute;inset:0;z-index:-1}

/* ============================================================
   v2.1 — CRAFT LAYER
   Micro-typography, an editorial 12-column grid, material, and
   the liquor disc as a proper object. Motion stays polite.
   ============================================================ */

/* --- micro-typography --------------------------------------- */
body{font-optical-sizing:auto}
h1,h2,h3,.foot-sign,.rank-name,.hub-list a b{text-wrap:balance;hanging-punctuation:first}
p,li,dd,.answer,.lede,.mcard p{text-wrap:pretty}
h1 em,h2 em{font-style:italic;font-weight:300;color:var(--ink-2)}
.kicker .idx{color:var(--gold);margin-right:1.4em;letter-spacing:.1em}

/* --- editorial grid ----------------------------------------- */
.ed{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:clamp(16px,2.2vw,36px);align-items:start}
.ed-rail{grid-column:1/3}
.ed-main{grid-column:3/10}
.ed-wide{grid-column:3/13}
.ed-rail .kicker{margin-bottom:.9em}
.ed-rail .idx{display:block;font-family:var(--f-display);font-size:clamp(1.9rem,2.6vw,2.6rem);font-weight:300;color:var(--ink-3);line-height:1;margin:0 0 .55em;letter-spacing:-.02em}
.ed-rail .stamp{margin-top:1.2em;display:block}
.ed-main>h1:first-child,.ed-main>h2:first-child{margin-top:-.06em}
.ed-main .prose{max-width:none}
.ed-rail .liquor-dot-lg{margin-bottom:1em}
.ed-rail .mono{font-size:.66rem;letter-spacing:.1em;color:var(--ink-3);line-height:1.6}
.ed-rail .mono b{color:var(--ink);font-size:.78rem;display:block;margin-bottom:.2em}
@media (max-width:900px){.ed{display:block}.ed-rail{margin-bottom:1.4em}.ed-rail .idx{display:inline-block;margin:0;margin-inline-end:.8em;font-size:1.4rem;vertical-align:baseline}}

/* --- the liquor disc as an object --------------------------- */
.liquor-dot{
  background-color:var(--liq,#C8C3A8);
  background-image:
    radial-gradient(circle at 34% 28%,rgba(255,255,255,.62) 0,rgba(255,255,255,0) 40%),
    radial-gradient(circle at 50% 56%,rgba(0,0,0,0) 54%,rgba(0,0,0,.24) 100%);
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.28),inset 0 -12px 22px -10px rgba(0,0,0,.42),0 1px 1px rgba(17,20,17,.06);
}
.mcard-liquor .liquor-dot{box-shadow:inset 0 0 0 1px rgba(255,255,255,.3)}
.cup .liquor-dot{box-shadow:inset 0 0 0 1px rgba(255,255,255,.3),inset 0 -14px 26px -12px rgba(0,0,0,.45),0 18px 30px -22px rgba(17,20,17,.45)}

/* --- material: paper grain, noise on the dark band ---------- */
body{background-color:var(--paper);background-image:url(/assets/img/grain-paper.svg);background-size:320px 320px}
.band-ink{position:relative}
.band-ink::after{content:"";position:absolute;inset:0;background:url(/assets/img/grain.svg) repeat;background-size:320px 320px;opacity:.07;pointer-events:none;mix-blend-mode:screen}
.band-ink>.wrap{position:relative;z-index:1}

/* --- hero: rail lives at the bottom edge --------------------- */
.hero{flex-direction:column;justify-content:flex-end}
.hero-in{position:relative;z-index:1}
.hero-rail{position:relative;z-index:1;width:100%;border-top:1px solid rgba(255,255,255,.18);border-bottom:0;background:rgba(17,20,17,.34)}
.hero-rail a{color:#DCE0D4;border-right:0}
.hero-rail a span{color:#A5AD9E}
.hero-rail a:hover{color:#fff}

/* --- footer sign-off ---------------------------------------- */
.foot-sign{font-family:var(--f-display);font-weight:300;font-size:clamp(2.6rem,9vw,8.8rem);line-height:.95;letter-spacing:-.045em;color:var(--rule-2);margin:0 0 clamp(44px,6vw,96px)}

/* --- nav underline, buttons -------------------------------- */
.nav a{position:relative}
.nav a::after{content:"";position:absolute;left:0;right:0;bottom:-3px;height:1px;background:var(--ink);transform:scaleX(0);transform-origin:left;transition:transform .28s cubic-bezier(.2,.7,.2,1)}
.nav a:hover::after{transform:scaleX(1)}
.btn-primary{transition:background .25s,transform .25s}
.btn-primary:hover{transform:translateY(-1px)}

/* --- full-screen mobile menu ------------------------------- */
@media (max-width:1000px){
  .masthead.open .mobnav{display:flex;position:fixed;inset:84px 0 0;background:var(--paper);padding:2.2em var(--gut) 3em;overflow:auto;z-index:60;border-top:1px solid var(--rule)}
  .mobnav a{font-size:clamp(1.9rem,8.5vw,2.8rem);padding:.42em 0;letter-spacing:-.025em;line-height:1.1}
  .mobnav .mobnav-cta{margin-top:2.2em;font-size:.74rem}
  body.nav-open{overflow:hidden}
}

/* --- polite motion ------------------------------------------ */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{transition-duration:.01ms!important;animation-duration:.01ms!important;scroll-behavior:auto!important}
}

/* --- v2.1 fixes ------------------------------------------------
   backdrop-filter on .masthead makes it the containing block for
   position:fixed descendants, so the menu must be positioned
   against the masthead itself. */
@media (max-width:1000px){
  .masthead{position:sticky}
  .masthead.open{backdrop-filter:none;background:var(--paper)}
  .masthead.open .mobnav{position:absolute;top:100%;left:0;right:0;height:calc(100vh - 100%);min-height:60vh;inset:auto 0 auto 0}
}
.hero-rail .wrap{display:flex;flex-wrap:wrap}
@media (max-width:900px){
  .hero-rail .wrap{flex-wrap:nowrap;overflow-x:auto;-webkit-overflow-scrolling:touch;scrollbar-width:none}
  .hero-rail .wrap::-webkit-scrollbar{display:none}
  .hero-rail a{white-space:nowrap}
}

/* ============================================================
   v3 — IDENTITY & FILM
   A vermilion seal, a Garamond voice, vertical Chinese labels,
   and the estate's own footage as the material of the site.
   ============================================================ */
:root{
  --f-cjk:"Noto Serif SC","Songti SC","STSong","SimSun",serif;
  --seal:#B8321F;
  --film:#0B0F0C;
}
h1{font-size:clamp(3.2rem,7.6vw,6.8rem);font-weight:400;letter-spacing:-.02em;line-height:.98}
h2{font-size:clamp(2.2rem,4.4vw,3.7rem);font-weight:400;letter-spacing:-.015em;line-height:1.04}
h3{font-size:clamp(1.4rem,2.1vw,1.8rem);font-weight:500;letter-spacing:-.005em}
h1 em,h2 em{font-style:italic;font-weight:400;color:inherit}
.answer{font-size:clamp(1.15rem,1.55vw,1.34rem)}
.foot-sign{font-size:clamp(3rem,10vw,10rem);font-weight:300;letter-spacing:-.03em}
.rank-name,.hub-list a b,.faq summary,.gloss-item dt,caption{font-weight:500}
.stat b{font-weight:400}

/* --- seal ---------------------------------------------------- */
.seal{display:inline-grid;place-items:center;width:34px;height:34px;border-radius:5px;background:var(--seal);color:#FBF3EE;font-family:var(--f-cjk);font-size:19px;font-weight:600;line-height:1;box-shadow:inset 0 0 0 1.5px rgba(255,255,255,.22),inset 0 0 0 3px var(--seal);flex:none;letter-spacing:0}
.seal-lg{width:64px;height:64px;font-size:36px;border-radius:8px}
.wordmark{gap:.7em;font-family:var(--f-display);font-size:1.42rem;font-weight:500;letter-spacing:.14em;text-transform:uppercase}
.wordmark .mark{display:none}

/* --- vertical Chinese labels ------------------------------- */
.vlabel{writing-mode:vertical-rl;text-orientation:upright;font-family:var(--f-cjk);font-size:.9rem;letter-spacing:.32em;color:var(--ink-3);line-height:1;margin:0}
.vlabel b{font-weight:600;color:var(--ink)}
.ed-rail .vlabel{margin-top:.2em}
.band-ink .vlabel,.film-band .vlabel{color:#9AA394}
.band-ink .vlabel b,.film-band .vlabel b{color:#F6F4EE}
@media (max-width:900px){.vlabel{writing-mode:horizontal-tb;text-orientation:mixed;letter-spacing:.2em}}
.film-band .kicker{color:#9AA394}
.film-band .answer{color:#EEECE5}
.film-band .link{color:#F6F4EE}
.film{position:relative;margin:0;overflow:hidden;border-radius:var(--r);background:#141915}
.film video,.film img{display:block;width:100%;height:100%;object-fit:cover}
/* The still (.film-still, formerly an <img hidden> that display:block overrode) is lazy and
   sits under the clip: it is what shows before the clip loads, when the pause control stops
   it, and under reduced motion. z-index:-1 in an isolated figure keeps it beneath the video
   and above the figure's ground, whatever the source order. */
.film{isolation:isolate}
.film img,.film .film-still{position:absolute;inset:0;z-index:-1}
.film-16{aspect-ratio:16/10}
.film-21{aspect-ratio:21/9}
.film figcaption{position:absolute;left:16px;bottom:14px;right:16px;display:flex;align-items:flex-end;justify-content:space-between;gap:1em;pointer-events:none}
.film figcaption b{font-family:var(--f-display);font-weight:500;font-size:1.25rem;color:#F6F4EE;letter-spacing:.01em}
.film figcaption span{font-family:var(--f-mono);font-size:.62rem;letter-spacing:.14em;text-transform:uppercase;color:#C9CDC1}
.film::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(11,15,12,0) 55%,rgba(11,15,12,.72) 100%);pointer-events:none}
/* Logical inset, so the label hangs off the trailing edge in Arabic too. */
.film .vlabel{position:absolute;top:16px;inset-inline-end:14px;color:#F6F4EE;font-size:.95rem;margin:0;z-index:1;text-shadow:0 1px 8px rgba(0,0,0,.4)}
@media (max-width:900px){.films{grid-template-columns:1fr 1fr}.films .film:first-child{grid-column:1/-1}}
@media (max-width:560px){.films{grid-template-columns:1fr}}

/* --- tea atlas: the leaf leads, liquor colour is evidence ---- */
.tea-select{background:#EAE6DC}
.tea-select-head{margin-bottom:clamp(44px,6vw,82px)}
.tea-select-head .answer{max-width:48ch}
.tea-atlas{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:clamp(8px,1vw,14px)}
.tea-atlas-card{position:relative;grid-column:span 4;display:block;min-height:clamp(300px,26vw,380px);color:#F8F5EC;text-decoration:none;overflow:hidden;background:#171A16;isolation:isolate;transform:translateZ(0)}
.tea-atlas-card:nth-child(1){grid-column:span 5;min-height:clamp(360px,32vw,460px)}
.tea-atlas-card:nth-child(2){grid-column:span 7;min-height:clamp(360px,32vw,460px)}
.tea-atlas-card:nth-child(6),.tea-atlas-card:nth-child(7){grid-column:span 6;min-height:clamp(330px,29vw,420px)}
.tea-atlas-card:nth-child(8){grid-column:span 5;min-height:clamp(300px,24vw,360px)}
.tea-atlas-card:nth-child(9){grid-column:span 7;min-height:clamp(300px,24vw,360px)}
.tea-atlas-media{position:absolute;inset:0;margin:0;overflow:hidden;background:#3a3d35}
.tea-atlas-media>img{position:absolute;inset:-1.5%;width:103%;height:103%;max-width:none;object-fit:cover;filter:saturate(.86) contrast(1.02);transition:scale .9s cubic-bezier(.2,.7,.2,1),filter .7s ease}
.tea-atlas-media::before{content:"";position:absolute;inset:0;z-index:1;background:linear-gradient(180deg,rgba(8,11,8,.08) 22%,rgba(8,11,8,.22) 50%,rgba(8,11,8,.92) 100%);pointer-events:none}
.tea-atlas-media::after{content:"";position:absolute;inset:0;z-index:2;background:radial-gradient(360px circle at var(--mx,50%) var(--my,45%),rgba(255,248,225,.16),transparent 68%);opacity:0;transition:opacity .45s;pointer-events:none;mix-blend-mode:screen}
.tea-atlas-index{position:absolute;z-index:3;top:clamp(16px,2vw,26px);inset-inline-start:clamp(16px,2vw,26px);font-family:var(--f-mono);font-size:.64rem;letter-spacing:.16em;color:rgba(255,255,255,.78);font-variant-numeric:tabular-nums}
.tea-atlas-copy{position:absolute;z-index:3;left:clamp(18px,2.5vw,34px);right:clamp(18px,2.5vw,34px);bottom:clamp(18px,2.5vw,32px);display:flex;flex-direction:column;align-items:flex-start}
.tea-atlas-meta{width:100%;margin:0 0 .75em;display:flex;justify-content:space-between;gap:1em;font-family:var(--f-mono);font-size:.59rem;line-height:1.3;letter-spacing:.12em;text-transform:uppercase;color:rgba(255,255,255,.72)}
.tea-atlas-meta span:last-child{text-align:end}
.tea-atlas-copy h3{color:#fff;font-size:clamp(1.55rem,2.7vw,2.55rem);font-weight:400;letter-spacing:-.025em;margin:0;line-height:1}
.tea-atlas-why{max-width:49ch;margin:.85em 0 0;color:rgba(255,255,255,.82);font-size:.9rem;line-height:1.48;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;opacity:.82;translate:0 4px;transition:opacity .45s,translate .45s}
.tea-atlas-origin{width:100%;margin:1.15em 0 0;padding-top:.9em;border-top:1px solid rgba(255,255,255,.26);display:grid;grid-template-columns:auto 1fr auto;gap:.8em;align-items:start;color:rgba(255,255,255,.82);font-size:.72rem;line-height:1.35}
.tea-atlas-origin span{font-family:var(--f-mono);font-size:.56rem;letter-spacing:.13em;text-transform:uppercase;color:rgba(255,255,255,.58)}
.tea-atlas-origin b{font-size:1rem;font-weight:400;line-height:.8;transition:translate .3s}
.tea-atlas-card:hover,.tea-atlas-card:focus-visible{color:#fff;text-decoration:none;box-shadow:0 34px 70px -46px rgba(17,20,17,.8)}
.tea-atlas-card:hover .tea-atlas-media>img,.tea-atlas-card:focus-visible .tea-atlas-media>img{scale:1.045;filter:saturate(1) contrast(1.03)}
.tea-atlas-card:hover .tea-atlas-media::after,.tea-atlas-card:focus-visible .tea-atlas-media::after{opacity:1}
.tea-atlas-card:hover .tea-atlas-why,.tea-atlas-card:focus-visible .tea-atlas-why{opacity:1;translate:0 0}
.tea-atlas-card:hover .tea-atlas-origin b,.tea-atlas-card:focus-visible .tea-atlas-origin b{translate:3px -3px}
.tea-select-link{margin:clamp(32px,4vw,54px) 0 0}
@media (max-width:1000px){
  .tea-atlas-card,.tea-atlas-card:nth-child(n){grid-column:span 6;min-height:clamp(320px,44vw,440px)}
  .tea-atlas-card:last-child{grid-column:1/-1;min-height:clamp(350px,48vw,500px)}
}
@media (max-width:680px){
  .tea-atlas{display:block}
  .tea-atlas-card,.tea-atlas-card:nth-child(n){min-height:clamp(300px,86vw,400px);margin-bottom:10px}
  .tea-atlas-copy h3{font-size:clamp(1.75rem,8vw,2.35rem)}
  .tea-atlas-why{-webkit-line-clamp:3;font-size:.88rem}
}
@media (prefers-reduced-motion:reduce){.tea-atlas-media>img,.tea-atlas-why,.tea-atlas-origin b{transition:none}}

/* --- process steps with film ----------------------------- */
.steps-film{list-style:none;padding:0;margin:3em 0 0;display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:clamp(18px,2.4vw,36px)}
.steps-film .step{display:block;padding:0;border:0}
.steps-film .film{aspect-ratio:16/10;margin-bottom:1.1em}
.steps-film .step-n{display:inline-block;margin-inline-end:1em}
.steps-film h3{display:inline;font-size:1.3rem}
.steps-film p{margin-top:.6em}

/* hero: seal + rail on the film */
.hero .seal-lg{margin-bottom:1.6em}
.hero-media video{display:block;width:100%;height:100%;object-fit:cover}
/* --- v3 fixes ----------------------------------------------- */
.banner-fig video{display:block;width:100%;height:100%;object-fit:cover}
/* The banner image is the first paint; the clip is laid over it once it plays. */
.banner-fig video{position:absolute;inset:0}

/* Reduced motion: every clip goes, product banners included, and each still stays.
   This block is deliberately placed after the .banner-fig rules above: a media query
   adds no specificity, so the equal-specificity `.banner-fig video{display:block}`
   declared later used to win and the five product banners kept playing for readers
   who had asked for no motion. */
@media (prefers-reduced-motion:reduce){.hero-media video,.film video,.banner-fig video{display:none}.film img,.film .film-still{display:block}}
.film figcaption{flex-direction:column;align-items:flex-start;gap:.25em}
.film figcaption span{opacity:.8}
/* Plate: an honest stand-in for steps we have no footage of yet —
   number and label only, never a borrowed image. */
.film-plate{background:var(--paper-3);display:grid;place-items:center;border:1px solid var(--rule)}
.film-plate::after{display:none}
.film-plate .plate-n{font-family:var(--f-display);font-size:clamp(3rem,6vw,5.2rem);font-weight:300;color:var(--rule-2);line-height:1;letter-spacing:-.04em}
.film-plate .vlabel{position:absolute;top:16px;inset-inline-end:14px;color:var(--ink-3);text-shadow:none}
.band-ink .film-plate,.film-band .film-plate{background:#141915;border-color:rgba(255,255,255,.1)}

/* ============================================================
   v3.1 — Bodoni voice
   Didone display: tighter, larger, no italics as decoration.
   ============================================================ */
h1{font-family:var(--f-display);font-weight:500;letter-spacing:-.005em;line-height:1.02;font-size:clamp(3rem,7vw,6.2rem)}
h2{font-family:var(--f-display);font-weight:500;letter-spacing:0;line-height:1.08;font-size:clamp(2rem,4vw,3.3rem)}
h3{font-family:var(--f-display);font-weight:500;letter-spacing:.005em;font-size:clamp(1.3rem,1.9vw,1.65rem)}
h1 em,h2 em{font-style:normal;font-weight:400;color:var(--ink-3)}
.band-ink h1 em,.band-ink h2 em,.film-band h2 em,.hero h1 em{color:#A9B199}
.wordmark{font-family:var(--f-display);font-weight:600;letter-spacing:.2em;font-size:1.3rem}
.foot-sign{font-weight:400;letter-spacing:-.01em;font-size:clamp(2.6rem,8.6vw,8.6rem)}
.stat b{font-weight:500;letter-spacing:-.01em}
.rank-n,.ed-rail .idx,.film-plate .plate-n{font-weight:400}
.chart b,.film figcaption b,.rank-name,.hub-list a b,.faq summary,.gloss-item dt,caption,.step h3{font-family:var(--f-display);font-weight:500}
.answer,.lede{font-family:var(--f-body)}
.calc-verdict{font-family:var(--f-display)}

/* Latin vertical labels read sideways, not stacked letter by letter. */
.vlabel{text-orientation:mixed;font-family:var(--f-mono);font-size:.64rem;letter-spacing:.18em;text-transform:uppercase}
.vlabel b{font-weight:500}
@media (max-width:900px){.vlabel{writing-mode:horizontal-tb}}

/* ============================================================
   v3.2 — MODERN SANS SYSTEM
   One grotesque family at every size. Luxury reads as restraint:
   light weights at display size, tight tracking, generous air.
   ============================================================ */
:root{
  --f-display:"Geist","Inter",-apple-system,BlinkMacSystemFont,"Segoe UI",Helvetica,Arial,sans-serif;
  --f-body:"Geist","Inter",-apple-system,BlinkMacSystemFont,"Segoe UI",Helvetica,Arial,sans-serif;
  --f-mono:"Geist Mono","IBM Plex Mono",ui-monospace,SFMono-Regular,Menlo,monospace;
  --f-cjk:"Geist",sans-serif;
}
body{font-family:var(--f-body);font-size:17px;line-height:1.7;font-weight:400}
h1,h2,h3,h4{font-family:var(--f-display)}
h1{font-size:clamp(2.7rem,6.2vw,5.4rem);font-weight:300;letter-spacing:-.035em;line-height:1.0}
h2{font-size:clamp(1.9rem,3.6vw,3rem);font-weight:300;letter-spacing:-.03em;line-height:1.06}
h3{font-size:clamp(1.25rem,1.8vw,1.55rem);font-weight:500;letter-spacing:-.015em;line-height:1.2}
h4{font-weight:600;letter-spacing:-.005em}
h1 em,h2 em{font-style:normal;font-weight:300;color:var(--ink-3)}
.band-ink h1 em,.band-ink h2 em,.film-band h2 em,.hero h1 em{color:#9AA394}
.lede{font-weight:400;letter-spacing:-.01em}
.answer{font-family:var(--f-body);font-weight:400;letter-spacing:-.012em;font-size:clamp(1.1rem,1.45vw,1.28rem);line-height:1.5}
.kicker{font-family:var(--f-mono);font-weight:500;letter-spacing:.2em;font-size:.66rem}
.wordmark{font-family:var(--f-display);font-weight:600;letter-spacing:.24em;font-size:1.02rem;text-transform:uppercase}
.nav a{font-weight:500;letter-spacing:-.005em}
.btn,.link,.chip,.rail a,.prod-meta,.stamp,.crumb,thead th,caption,.spec dt,.sources h3,.sources h4,.foot-col h3,.foot-col h4,.calc label,.field label,.liquor-meta,.hero-index-hex,.cup span,.chart span,.film figcaption span,.mcard-liquor span,.rank-val,.hub-list a .mono,.foot-bottom,.mobnav .mobnav-cta,.vlabel{font-family:var(--f-mono)}
caption{font-family:var(--f-display);font-weight:500;letter-spacing:-.01em;font-size:1.05rem}
.stat b{font-family:var(--f-display);font-weight:300;letter-spacing:-.04em;font-variant-numeric:tabular-nums}
.rank-n,.ed-rail .idx,.film-plate .plate-n{font-family:var(--f-display);font-weight:200;letter-spacing:-.04em}
.rank-name,.hub-list a b,.faq summary,.gloss-item dt,.step h3,.chart b,.film figcaption b,.cup b,.mcard h3,.card h3{font-family:var(--f-display);font-weight:500;letter-spacing:-.015em}
.faq summary{font-size:clamp(1.05rem,1.4vw,1.2rem)}
.foot-sign{font-family:var(--f-display);font-weight:200;letter-spacing:-.045em;font-size:clamp(2.6rem,8.6vw,8.4rem)}
.prod-zh{font-family:var(--f-display);font-weight:300;font-size:1.2rem;letter-spacing:-.01em}
.calc-verdict{font-family:var(--f-display);font-weight:500}
.chart b{font-size:clamp(.95rem,1.15vw,1.15rem)}
.seal{font-family:var(--f-display);font-weight:600;font-size:16px;letter-spacing:0}
.seal-lg{font-size:30px}
.hero .lede{font-weight:400}
.hero h1{font-weight:300}

/* ============================================================
   v3.3 — MOTION
   Rule: nothing that carries meaning is ever hidden. Entrances use
   translate/scale only (individual transform properties, so hover
   transforms still compose). Everything is off under reduced motion.
   ============================================================ */
:root{interpolate-size:allow-keywords}

@media (prefers-reduced-motion:no-preference){
  /* Page-to-page transition. It used to cross-fade the whole page on opacity outside this
     block, so it ran under reduced motion too (the universal reduce rule does not match
     ::view-transition-* pseudo-elements). Now it only exists here, and moves by translate
     alone. Both snapshots are opaque, so the UA's plus-lighter blend is reset to normal,
     which would otherwise wash the frame out. */
  @view-transition{navigation:auto}
  ::view-transition-old(root),::view-transition-new(root){mix-blend-mode:normal}
  ::view-transition-old(root){animation:vt-out .22s ease both}
  ::view-transition-new(root){animation:vt-in .32s ease both}
  @keyframes vt-out{to{translate:0 -8px}}
  @keyframes vt-in{from{translate:0 8px}}

  @supports (animation-timeline:view()){
    .mcard,.card,.rank li,.hub-list li,.steps-film .step,.step,.tea-atlas-card,.stat,.films .film,.gloss-item,.faq details,.tbl-wrap,.spec,.track{
      animation:rise linear both;animation-timeline:view();animation-range:entry 0% entry 38%}
    @keyframes rise{from{translate:0 28px}to{translate:0 0}}
    .tea-atlas-card:nth-child(2){animation-range:entry 4% entry 42%}.tea-atlas-card:nth-child(3){animation-range:entry 8% entry 46%}.tea-atlas-card:nth-child(4){animation-range:entry 12% entry 50%}
    .tea-atlas-card:nth-child(5){animation-range:entry 16% entry 54%}.tea-atlas-card:nth-child(6){animation-range:entry 20% entry 58%}.tea-atlas-card:nth-child(7){animation-range:entry 24% entry 62%}.tea-atlas-card:nth-child(8){animation-range:entry 28% entry 66%}.tea-atlas-card:nth-child(9){animation-range:entry 32% entry 70%}
    .mcard .fig img,.films .film video,.films .film img,.article-cover img{animation:settle linear both;animation-timeline:view();animation-range:entry 0% entry 70%}
    @keyframes settle{from{scale:1.07}to{scale:1}}
    .hero-in{animation:drift linear both;animation-timeline:scroll();animation-range:0 100vh}
    @keyframes drift{to{translate:0 140px}}
    .hero-media{animation:zoom linear both;animation-timeline:scroll();animation-range:0 100vh}
    @keyframes zoom{to{scale:1.1}}
    .foot-sign{animation:sign linear both;animation-timeline:view();animation-range:entry 0% entry 80%}
    html[dir="rtl"] .foot-sign{animation-name:rise;letter-spacing:0;line-height:1.3}
    @keyframes sign{from{translate:-40px 0;letter-spacing:.02em}to{translate:0 0;letter-spacing:-.045em}}
  }
}

/* masthead: settles on scroll */
.masthead{transition:background .3s,box-shadow .3s}
.masthead-in{transition:min-height .3s}
.masthead.is-scrolled{background:rgba(247,245,240,.96);box-shadow:0 1px 0 var(--rule),0 12px 30px -24px rgba(17,20,17,.35)}
.masthead.is-scrolled .masthead-in{min-height:64px}

/* buttons: magnetic, handled in JS via --dx/--dy */
.btn-primary{transform:translate(var(--dx,0),var(--dy,0));transition:transform .25s cubic-bezier(.2,.7,.2,1),background .25s}
.btn-primary:hover{transform:translate(var(--dx,0),calc(var(--dy,0) - 1px))}

/* rail + table + FAQ */
.rail a{position:relative}
.rail a::after{content:"";position:absolute;left:1.4em;right:1.4em;bottom:.6em;height:1px;background:currentColor;transform:scaleX(0);transform-origin:left;transition:transform .3s cubic-bezier(.2,.7,.2,1)}
.rail a:hover::after{transform:scaleX(1)}
tbody tr{transition:background .2s}
tbody tr:hover th,tbody tr:hover td{background:rgba(17,20,17,.035)}
.band-ink tbody tr:hover th,.band-ink tbody tr:hover td{background:rgba(255,255,255,.05)}
details::details-content{height:0;overflow:clip;transition:height .38s cubic-bezier(.2,.7,.2,1),content-visibility .38s allow-discrete}
details[open]::details-content{height:auto}
.faq summary::after{transition:transform .3s,color .2s}
.faq details[open] summary::after{transform:translateY(-50%) rotate(180deg)}
.faq summary:hover::after{color:var(--ink)}
.mcard .fig img{transition:transform .9s cubic-bezier(.2,.7,.2,1)}
.mcard-body h3{transition:color .2s}
.mcard:hover h3{color:var(--seal)}

/* --- key facts, table of contents ---------------------------- */
.facts{list-style:none;margin:2em 0 0;padding:0;border-top:1px solid var(--ink);max-width:62ch}
.facts li{display:grid;grid-template-columns:minmax(150px,.36fr) 1fr;gap:1.2em;padding:.8em 0;border-bottom:1px solid var(--rule);align-items:baseline}
.facts span{font-family:var(--f-mono);font-size:.62rem;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-3)}
.facts b{font-weight:500;color:var(--ink);font-size:.97rem}
.facts a{text-decoration-color:var(--rule-2)}
.toc{margin:1.8em 0 1.2em;padding:1.3em 0 0;border-top:1px solid var(--rule);max-width:60ch}
.toc .kicker{margin-bottom:.8em}
.toc ol{margin:0;padding:0;list-style:none;display:grid;gap:.4em}
.toc li{font-size:.93rem}
.toc a{text-decoration:none;color:var(--ink-2)}
.toc a:hover{color:var(--ink);text-decoration:underline}
.toc li::before{content:counter(toc,decimal-leading-zero);counter-increment:toc;font-family:var(--f-mono);font-size:.62rem;letter-spacing:.1em;color:var(--gold);margin-right:.9em}
.toc ol{counter-reset:toc}
section[id]{scroll-margin-top:96px}

/* ============================================================
   v4 — SHOWROOM HOME (ivory minimal)
   Fewer words, bigger pictures, more air. Library pages stay editorial.
   ============================================================ */
body.home section{padding-block:clamp(64px,7.5vw,128px)}
body.home .section-flush{padding-block:0}
body.home .kicker .idx{display:none}
.manifesto{text-align:left}
.statement{font-size:clamp(2rem,4.2vw,3.6rem);font-weight:300;letter-spacing:-.035em;line-height:1.02;max-width:16ch;margin-bottom:.6em}
.statement em{font-style:normal;color:var(--ink-3)}
.film-full{border-radius:0;width:100%;aspect-ratio:21/9;max-height:72vh}
.film-full figcaption{left:var(--gut);right:var(--gut);bottom:clamp(24px,3.5vw,52px)}
.film-full figcaption b{font-size:clamp(1.4rem,2.6vw,2.4rem);font-weight:400;letter-spacing:-.02em}
.film-full figcaption span{font-size:.66rem}
.film-full::after{background:linear-gradient(180deg,rgba(11,15,12,0) 45%,rgba(11,15,12,.62) 100%)}
.film-full .vlabel{display:none}
.stat-hero{margin:1.6em 0 2em}
.stat-hero b{font-size:clamp(4rem,10vw,8.6rem);font-weight:200;letter-spacing:-.05em;line-height:.95}
.stat-hero span{font-size:.68rem;margin-top:1em;display:block}
.inline-list{list-style:none;padding:0;margin:2em 0 0;display:flex;flex-wrap:wrap;gap:.6em 1.6em}
.inline-list a{text-decoration:none;font-size:1.05rem;color:var(--ink);border-bottom:1px solid var(--rule-2);padding-bottom:.15em;transition:border-color .2s}
.inline-list a:hover{border-color:var(--ink)}
.mt-3{margin-top:3em}
@media (max-width:700px){.film-full{aspect-ratio:4/5;max-height:none}}

.foot-top{grid-template-columns:1.4fr repeat(5,1fr)}
@media (max-width:980px){.foot-top{grid-template-columns:1fr 1fr}}
@media (max-width:560px){.foot-top{grid-template-columns:1fr}}
.nav{gap:1.7em}

/* --- why us, routes, downloads, subscribe, checks ------------ */
.why .card h3{font-size:1.15rem}
.routes{margin:2.5em 0 0;border:1px solid var(--rule);border-radius:var(--r);overflow:hidden;background:var(--paper)}
.routes img{display:block;width:100%;height:auto}
/* Secondary row link (the printable page on /downloads/). It used to be pinned to the right
   of every row with an 11em reserve at all widths, which left a 119px text column on a phone
   and pushed the labels off-screen on /ar/. On narrow screens, and in browsers without
   :has(), it sits under the row; on wider ones it moves to the trailing edge. */
.hub-list li{position:relative}
.hub-list a.alt{display:block;padding:0 0 1.1em;font-family:var(--f-mono);font-size:.62rem;letter-spacing:.12em;text-transform:uppercase;color:var(--ink-3)}
@media (min-width:760px){
  @supports selector(li:has(a)){
    .hub-list a.alt{position:absolute;inset-inline-end:0;bottom:.9em;display:inline;padding:0}
    .hub-list li:has(a.alt) > a:first-child{padding-inline-end:11em}
  }
}
.subscribe{max-width:60ch;margin-top:1.5em}
.checks{border:0;padding:0;margin:0 0 1.6em}.checks legend{font-family:var(--f-mono);font-size:.62rem;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-3);margin-bottom:.7em}
.checks label{display:inline-flex;align-items:center;gap:.5em;margin:0 1.4em .5em 0;font-size:.95rem;font-family:var(--f-body);letter-spacing:0;text-transform:none;color:var(--ink)}
.checks input{accent-color:var(--ink)}

/* ============================================================
   ACCESSIBILITY CORRECTIONS · WCAG 2.2 AA
   Measured, not estimated. Ratios below are computed against the
   paper ground #F7F5F0 using the WCAG relative-luminance formula.
   ============================================================ */
:root{
  /* --gold #A6812F is 3.32:1 on paper: fine for a focus ring or a rule
     (1.4.11 needs 3:1) but it was also being used for text at 0.62–0.7rem,
     where 1.4.3 needs 4.5:1. A second token keeps the decorative gold and
     gives text a compliant one. */
  --gold-tx:  #8A6A21;   /* 4.63:1 on paper */
  /* Form fields are drawn with a single underline, so that line IS the control
     boundary and 1.4.11 applies to it. --rule-2 measured 1.50:1. */
  --field-line:#8F8777;  /* 3.27:1 on paper */
}

/* Small type that was set in decorative gold */
.step-n,
.kicker .idx,
.toc li::before{color:var(--gold-tx)}

/* Focus must stay visible on form controls. The previous rules removed the
   outline outright and left only a 1px border-colour change, on the one
   surface the whole site exists to make people use. */
/* Bound to :focus, not :focus-visible. A form control must show focus however it was
   reached — :focus-visible is not reliably matched for programmatic or assistive focus,
   and a ring on a text field is unobtrusive even when it was clicked. */
.field input:focus,
.field select:focus,
.field textarea:focus,
.calc input:focus{outline:2px solid var(--gold);outline-offset:3px;
  /* box-shadow as well as outline: this file is 900 append-only lines deep and an
     earlier layer already zeroed the outline once. box-shadow cannot be cancelled by
     an `outline:0` rule, so the indicator survives a future layer too. */
  box-shadow:0 0 0 3px rgba(166,129,47,.45);border-bottom-color:var(--ink)}
.field input,.field select,.field textarea{border-bottom-color:var(--field-line)}
.calc input{border-bottom-color:var(--ink)}
/* A filter chip's outline is its whole boundary, the same case as the field underline:
   --rule-2 measured 1.50:1. Hover (ink) and pressed (ink) stay distinct from rest. */
.chip{border-color:var(--field-line)}
/* The language switch is the third control drawn this way: a 1px --rule-2 ring is the only
   thing that says it can be pressed. `.lang-switch[open] summary` is more specific, so the
   open state keeps its ink ring. */
.lang-switch summary{border-color:var(--field-line)}

/* The skip link was clipped to 1×1px even while focused, so a keyboard user's
   first Tab landed on an invisible control. */
a.visually-hidden[href^="#"]:focus,
a.visually-hidden[href^="#"]:focus-visible{
  position:fixed;top:.75rem;left:.75rem;z-index:200;
  width:auto;height:auto;clip:auto;clip-path:none;overflow:visible;white-space:normal;
  padding:.7em 1.2em;background:var(--ink);color:var(--paper);
  font-family:var(--f-mono);font-size:.7rem;letter-spacing:.12em;text-transform:uppercase;
  text-decoration:none;border-radius:2px;outline:2px solid var(--gold);outline-offset:2px}
html[dir="rtl"] a.visually-hidden[href^="#"]:focus,
html[dir="rtl"] a.visually-hidden[href^="#"]:focus-visible{left:auto;right:.75rem}

/* WCAG 2.2 target size (2.5.8): standalone controls need 24×24 CSS px.
   Inline links inside a sentence are exempt and are left alone. */
.mobnav-cta,.chip,[data-filter-bar] button{min-height:24px}

/* Source tier sits beside each citation: a reader can see at a glance whether a figure
   comes from a regulator or from an industry report. */
.sources .src-tier{display:block;font-family:var(--f-mono);font-size:.58rem;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-3);margin-top:.15em}

/* ============================================================
   RTL COMPLETION · /ar/
   The original RTL layer was eight rules and left tables, lists, steps and the
   tick marks physically left-aligned, so Arabic headers sat away from the columns
   they head and bullets rendered on the wrong side of their text. Arabic is the
   commercial language of Morocco and Mauritania, two of the largest destinations
   named on this site, so the mirroring has to be complete rather than indicative.
   ============================================================ */

/* Tables: header labels, row headers and the inter-column gutter all mirror. */
html[dir="rtl"] caption{text-align:right}
html[dir="rtl"] thead th{text-align:right;padding:0 0 .9em 1.4em}
html[dir="rtl"] tbody th{text-align:right;padding:1.05em 0 1.05em 1.4em}
html[dir="rtl"] tbody td{padding-right:0;padding-left:1.4em}
html[dir="rtl"] th.num,html[dir="rtl"] td.num{text-align:left}

/* Lists and tick marks */
html[dir="rtl"] .prose ul,html[dir="rtl"] .prose ol{padding-left:0;padding-right:1.2em}
html[dir="rtl"] .ticks li{padding-left:0;padding-right:1.3em}
html[dir="rtl"] .ticks li::before{left:auto;right:0}
html[dir="rtl"] .toc li::before{margin-right:0;margin-left:.9em}
html[dir="rtl"] .kicker .idx{margin-right:0;margin-left:1.4em}

/* Enquiry steps: the divider rule belongs on the trailing edge */
html[dir="rtl"] .rfq-steps li+li{padding-left:0;padding-right:clamp(18px,3vw,42px);border-left:0;border-right:1px solid var(--rule)}
/* ...except where the steps stack (the 900px reset above); the RTL rule outranks that reset,
   so it is repeated here or the divider comes back on phones. */
@media (max-width:900px){html[dir="rtl"] .rfq-steps li+li{padding-right:0;border-right:0}}

/* Underline sweeps, arrows and gradients that encode a direction. (Gutters and offsets
   elsewhere in this file use logical properties — padding-inline, inset-inline-start,
   margin-inline-end, text-align:end — and mirror without an override.) */
html[dir="rtl"] .rail a::after{transform-origin:right}
html[dir="rtl"] .link:hover::after{transform:translateX(-4px)}
html[dir="rtl"] .gloss-item:target{background:linear-gradient(270deg,rgba(166,129,47,.1),transparent 60%)}
html[dir="rtl"] .hero-video .hero-media::after{background:linear-gradient(270deg,rgba(17,20,17,.7) 0%,rgba(17,20,17,.32) 48%,rgba(17,20,17,.08) 78%),linear-gradient(180deg,rgba(17,20,17,.12) 0%,rgba(17,20,17,.16) 46%,rgba(17,20,17,.72) 100%)}

/* Masthead, mobile nav and the underline sweep */
html[dir="rtl"] .nav-toggle{margin-left:0;margin-right:auto}
html[dir="rtl"] .nav a::after{transform-origin:right}
html[dir="rtl"] .checks label{margin:0 0 .5em 1.4em}

/* Blocks that were explicitly left-aligned for the Latin setting */
/* .banner-liquor is aligned with text-align:end/start, which mirrors by itself. */
html[dir="rtl"] .manifesto{text-align:right}

/* Latin runs inside Arabic sentences — grade codes, HS headings, Incoterms, port
   names — need bidi isolation or the surrounding text reorders them. Only <code> is
   always Latin. .facts b holds translated Arabic values, so it is no longer forced LTR
   (its codes are wrapped in <bdi> in the markup). The date stamp and source-tier labels
   are English today and translated later, so they take their direction from their own
   first strong character instead of a fixed one. */
html[dir="rtl"] code{direction:ltr;unicode-bidi:isolate;text-align:right}
html[dir="rtl"] .src-tier,
html[dir="rtl"] .stamp{unicode-bidi:plaintext;text-align:right}

@media (max-width:1000px){
  html[dir="rtl"] .lang-switch{margin-left:0;margin-right:auto}
  html[dir="rtl"] .nav-toggle{margin-right:0}
}

/* Grade ladder: sibling navigation in place of a table that repeated every sibling's
   description on every page in the line. */
.grade-ladder{font-family:var(--f-mono);font-size:.8rem;letter-spacing:.04em;line-height:2}
.grade-ladder b{color:var(--ink);border-bottom:2px solid var(--gold)}

/* Motion control (WCAG 2.2.2) and filter status. One button pauses every clip on the page
   (hero, product banners, scroll-started films), so it is fixed to the trailing corner
   rather than pinned inside the hero; it sits under the masthead and the open menu. It
   floats over moving footage and over paper alike, so it carries its own ground.
   aria-pressed="true" means the footage is paused; the label itself does not change. */
.motion-toggle{position:fixed;inset-inline-end:1rem;bottom:1rem;z-index:40;
  font-family:var(--f-mono);font-size:.6rem;letter-spacing:.14em;text-transform:uppercase;
  padding:.6em 1.1em;min-height:24px;border:1px solid rgba(247,245,240,.5);border-radius:2px;
  background:rgba(17,20,17,.86);color:#f7f5f0;cursor:pointer}
.motion-toggle:hover{background:rgba(17,20,17,.96)}
.motion-toggle:focus-visible{outline:2px solid var(--gold);outline-offset:2px}
.motion-toggle[aria-pressed="true"]{background:var(--paper);color:var(--ink);border-color:var(--ink)}
.motion-toggle[hidden]{display:none}
.filter-status{font-family:var(--f-mono);font-size:.66rem;letter-spacing:.1em;color:var(--ink-3);margin:.9em 0 0}
.chip[aria-pressed="true"]{background:var(--ink);color:var(--paper);border-color:var(--ink)}
/* A cue that is not colour: the pressed chip carries a filled dot. Empty content, so it is
   not announced; aria-pressed carries the state for assistive technology. */
.chip[aria-pressed="true"]::before,
.chip.is-on:not([aria-pressed])::before{content:"";display:inline-block;width:.5em;height:.5em;border-radius:50%;background:currentColor;margin-inline-end:.55em;vertical-align:.06em}
/* Forced colours replace every background and colour above, which left the pressed chip
   identical to the rest. System colours keep the two states apart. */
@media (forced-colors:active){
  .chip{forced-color-adjust:none;background:Canvas;color:CanvasText;border-color:CanvasText}
  .chip[aria-pressed="true"],.chip.is-on{background:Highlight;color:HighlightText;border-color:Highlight}
  .motion-toggle{forced-color-adjust:none;background:ButtonFace;color:ButtonText;border-color:ButtonText}
  .motion-toggle[aria-pressed="true"]{background:Highlight;color:HighlightText;border-color:Highlight}
}

/* Enquiry draft fallback: shown when the mail application did not take over the window,
   so the buyer still has the address and the prepared text. */
.rfq-fallback{margin:1em 0 1.4em;display:flex;flex-direction:column;align-items:flex-start;gap:.8em}
.rfq-copy{font-family:var(--f-mono);font-size:.66rem;letter-spacing:.1em;text-transform:uppercase;min-height:24px;
  padding:.6em 1.1em;border:1px solid var(--ink);border-radius:100px;background:transparent;color:var(--ink);cursor:pointer}
.rfq-copy:hover{background:var(--ink);color:var(--paper)}
.rfq-draft{width:100%;font-family:var(--f-mono);font-size:.8rem;line-height:1.55;padding:.8em;
  border:1px solid var(--field-line);border-radius:2px;background:var(--paper-2);color:var(--ink);resize:vertical}

/* Enquiry context banner: confirms the form knows which grade or market the buyer
   arrived from, so they can see it was carried across rather than lost. */
.enquiry-context{font-family:var(--f-mono);font-size:.68rem;letter-spacing:.08em;line-height:1.7;
  color:var(--ink);background:var(--paper-3);border-left:2px solid var(--gold);
  padding:.9em 1.1em;margin:0 0 2em}
html[dir="rtl"] .enquiry-context{border-left:0;border-right:2px solid var(--gold)}

/* ============================================================
   NARROW-VIEWPORT OVERFLOW
   auto-fit tracks declared in px cannot shrink below that px value, so a 300–320px
   track inside a ~276px content box at 320px viewport pushed the page sideways.
   min(track, 100%) lets the track collapse to the container instead.
   ============================================================ */
.g2{grid-template-columns:repeat(auto-fit,minmax(min(300px,100%),1fr))}
.g3{grid-template-columns:repeat(auto-fit,minmax(min(272px,100%),1fr))}
.g4{grid-template-columns:repeat(auto-fit,minmax(min(200px,100%),1fr))}
.gloss{grid-template-columns:repeat(auto-fit,minmax(min(320px,100%),1fr))}
.steps{grid-template-columns:repeat(auto-fit,minmax(min(320px,100%),1fr))}
.steps-film{grid-template-columns:repeat(auto-fit,minmax(min(300px,100%),1fr))}
.calc-row{grid-template-columns:repeat(auto-fit,minmax(min(220px,100%),1fr))}
.range-head{grid-template-columns:minmax(0,1fr) minmax(min(320px,100%),.72fr)}
.contact-head-grid{grid-template-columns:minmax(0,1.05fr) minmax(min(360px,100%),.75fr)}
/* These two are also stacked at 900px further up the file. Re-declaring the track list here
   unconditionally would have outranked that block (same specificity, later), leaving the
   heads two-up between 761px and 900px, so the stack is restated at its own breakpoint. */
@media (max-width:900px){.range-head,.contact-head-grid{grid-template-columns:1fr}}

@media (max-width:760px){
  .range-head,.contact-head-grid{grid-template-columns:1fr}
  /* Key-facts rows gave a fixed 150px to four-character labels, leaving the value
     wrapping in what was left of a 390px screen. Stack them instead. */
  .facts li{grid-template-columns:1fr;gap:.3em}
  .facts span{font-size:.58rem}
  /* The spec sheet had the same fixed 150px label column: a 126px value column at 320px,
     with 138–164px tall cells. Label above value; the dt rule still separates rows. */
  .spec dl{grid-template-columns:1fr}
  .spec dt{padding:1em 0 .2em}
  .spec dd{border-top:0;padding-top:0}
}

/* The language menu is absolutely positioned against the switch, which sits at the
   trailing end of the masthead. On a 320px screen either anchor can push the panel past
   an edge, so clamp it to the viewport and let it settle inside. */
@media (max-width:700px){
  /* A 260px panel hung off a small button cannot stay inside a 320px screen whichever
     edge it is anchored to, so on narrow screens it is positioned against the viewport
     instead of against the switch. Works identically in both directions. */
  /* The masthead's backdrop-filter makes it a containing block, so a fixed-position
     panel does not resolve against the viewport here. Rather than fight that, the menu
     drops to a single narrow column: at ~150px it fits inside 320px from either anchor. */
  .lang-menu{grid-template-columns:1fr;min-width:0;width:max-content;
    max-width:calc(100vw - 1.5rem);max-height:70vh;overflow:auto}
}

/* ============================================================
   PRINT
   Buyers print spec pages, trade data and the packaging brief. Browsers drop background
   colours by default, which left the light text of every dark band (#C9CDC1 and #F6F4EE)
   on white paper. Dark surfaces print as ink on white; footage, the masthead and the
   motion control are screen-only; tables print whole instead of scrolling.
   ============================================================ */
@media print{
  *,*::before,*::after{animation:none!important;transition:none!important}
  body{background:#fff!important;color:#111411!important}
  .masthead,.mobnav,.nav-toggle,.lang-switch,.motion-toggle,video,.film,.hero-media,.tea-atlas-media,.foot-sign,.rfq-fallback{display:none!important}
  .band-ink,.band-jade,.band-sunken,.hero,.banner,.film-band,.tea-select,.tea-atlas-card,.fig-ink,.hero-rail{background:#fff!important;color:#111411!important}
  .band-ink::after,.fig-veil::after{display:none!important}
  :is(.band-ink,.band-jade,.hero,.banner,.film-band,.tea-atlas-card,.fig-ink,.hero-rail) :is(h1,h2,h3,h4,p,li,dt,dd,a,b,em,span,caption,th,td,.kicker,.lede,.answer,.stat b,.stat span){color:#111411!important}
  :is(.band-ink,.band-jade,.hero,.banner) :is(thead th,tbody th,tbody td,.card,.track,.faq,.faq details,.sources){border-color:#CFCABD!important}
  .btn,.hero .btn-primary,.band-ink .btn-primary{background:#fff!important;color:#111411!important;border:1px solid #111411!important;transform:none!important}
  .hero{min-height:0;display:block}
  .hero-in{translate:none!important}
  .banner-in{position:static;padding-block:1.2em 0}
  .banner-fig{height:auto;max-height:90mm}
  .tea-atlas{display:block}
  .tea-atlas-card{min-height:0!important;margin-bottom:1em;border-top:1px solid #CFCABD}
  .tea-atlas-copy{position:static;padding:1em 0}
  .tea-atlas-why{-webkit-line-clamp:unset;display:block;overflow:visible;opacity:1;translate:none}
  .tbl-wrap{overflow:visible!important}
  table{min-width:0!important}
  thead{display:table-header-group}
  tr,img,.spec dl>*,.faq details,.card,.mcard{break-inside:avoid}
  h1,h2,h3,h4{break-after:avoid}
  /* Closed FAQ answers are content too. */
  details::details-content{height:auto!important;content-visibility:visible!important}
  section{padding-block:1.5em!important}
}

/* Buyer programmes — three compact rows: number, copy, thumbnail, arrow. */
.programme-list{margin-top:clamp(28px,3vw,44px);border-top:1px solid var(--rule)}
.programme-row{display:grid;grid-template-columns:56px minmax(0,1fr) minmax(0,180px) 28px;gap:clamp(16px,2.4vw,36px);align-items:center;
  padding:clamp(18px,2vw,28px) 0;border-bottom:1px solid var(--rule);color:inherit;text-decoration:none}
.programme-n{font-family:var(--f-mono);font-size:.72rem;letter-spacing:.12em;color:var(--ink-3)}
.programme-copy .kicker{margin:0 0 .5em}
.programme-copy h3{margin:0 0 .35em;font-size:clamp(1.1rem,1.6vw,1.35rem)}
.programme-copy p{margin:0;color:var(--ink-2);max-width:56ch}
.programme-media{margin:0;border-radius:6px;overflow:hidden;background:#d9d4c8;aspect-ratio:3/2}
.programme-media img,.programme-media picture{display:block;width:100%;height:100%;object-fit:cover}
.programme-arrow{font-size:1.1rem;color:var(--ink-3);transition:transform .3s ease}
.programme-row:hover .programme-arrow,.programme-row:focus-visible .programme-arrow{transform:translate(3px,-3px);color:var(--ink)}
@media (max-width:700px){
  .programme-row{grid-template-columns:40px minmax(0,1fr) 24px;row-gap:12px}
  .programme-media{grid-column:2 / 3;grid-row:2;max-width:100%}
}

/* ---------- Wordmark: a tea leaf stands for the O of ODM ---------- */
.wordmark{display:inline-flex;align-items:center;gap:.42em;text-transform:none;letter-spacing:0;font-family:var(--f-display);font-size:1.4rem;font-weight:700;color:var(--ink);line-height:1;text-decoration:none}
.wm-name{display:inline-flex;align-items:center;letter-spacing:-.015em}
.wm-o{display:inline-flex;align-items:center;margin-right:.04em}
.wm-leaf{display:block;width:.96em;height:.96em;fill:var(--leaf,#3F5A36);flex:none}
.wm-vein{fill:none;stroke:var(--paper);stroke-width:1.9;stroke-linecap:round}
.wm-tea{font-size:.44em;font-weight:500;letter-spacing:.44em;text-transform:uppercase;color:var(--seal,#B8321F);margin-top:.15em}
.foot-brand .wordmark{font-size:1.55rem}
@media (max-width:700px){.wordmark{font-size:1.22rem}}