/* Kings Tea (Qingshenge) — site styles. Spec: 06_视觉规范与图片提示词_20261111.md */
@font-face{font-family:"Fraunces";src:url(fonts/fraunces-var.woff2) format("woff2");font-weight:300 600;font-style:normal;font-display:swap}
@font-face{font-family:"Fraunces";src:url(fonts/fraunces-var-italic.woff2) format("woff2");font-weight:300 600;font-style:italic;font-display:swap}
@font-face{font-family:"Inter";src:url(fonts/inter-var.woff2) format("woff2");font-weight:100 900;font-style:normal;font-display:swap}
@font-face{font-family:"Noto Serif SC";src:url(fonts/noto-serif-sc-sub.woff2) format("woff2");font-weight:400 700;font-style:normal;font-display:swap}

:root{
  --ink:#14110D;--bark:#281810;--forest:#284020;--forest-deep:#1A2B17;
  --paper:#F4ECDD;--paper-2:#EADFCB;--cream:#F0E4D2;
  --cinnabar:#B0301E;--amber:#B4661F;--gold:#C8A460;--stone:#7D7466;--mist:#CFC7B8;
  --line-dark:rgba(240,228,210,.18);
  --serif:"Fraunces","Iowan Old Style","Palatino Linotype",Georgia,serif;
  --sans:"Inter",system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  --zh:"Noto Serif SC","Songti SC","Source Han Serif SC","SimSun",serif;
  --h1:clamp(2.6rem,6.2vw,5.75rem);--h2:clamp(2rem,3.8vw,3.5rem);--h3:1.5rem;
  --lead:clamp(1.125rem,1.4vw,1.3125rem);--body:1.0625rem;--small:.875rem;--eyebrow:.75rem;
  --numeral:clamp(3.5rem,9vw,8rem);
  --gutter:16px;--wrap:1240px;--section:clamp(72px,10vw,160px);--gap:24px;
  --ease:cubic-bezier(.2,.7,.2,1);
}
@media (min-width:768px){:root{--gutter:32px}}
@media (min-width:1200px){:root{--gutter:48px}}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{margin:0;background:var(--paper);color:var(--bark);font:400 var(--body)/1.65 var(--sans);font-feature-settings:"ss01","cv11";overflow-x:hidden}
img,picture,svg,video{display:block;max-width:100%}
img{height:auto}
.media > picture,.tc-media > picture,.band > picture{width:100%;height:100%}
h2 + p,h2 + .lead{margin-top:22px}
a{color:inherit}
:lang(zh),[lang=zh]{font-family:var(--zh)}
h1,h2,h3,h4{font-family:var(--serif);font-weight:340;font-variation-settings:"opsz" 144;letter-spacing:-.02em;margin:0;text-wrap:balance}
h1{font-size:var(--h1);line-height:1.02}
h2{font-size:var(--h2);line-height:1.08}
h3{font-size:var(--h3);line-height:1.2;font-weight:400;font-variation-settings:"opsz" 48}
h1 em,h2 em{font-style:italic;font-weight:300}
p{margin:0 0 1em;max-width:66ch}
.lead{font-size:var(--lead);line-height:1.6}
.small{font-size:var(--small)}
.muted{color:var(--stone)}
.eyebrow{display:block;font:500 var(--eyebrow)/1.4 var(--sans);text-transform:uppercase;letter-spacing:.18em;margin:0 0 18px;color:var(--stone)}
.dark .eyebrow,.forest .eyebrow{color:rgba(240,228,210,.66)}
.wrap{width:100%;max-width:calc(var(--wrap) + 2*var(--gutter));margin:0 auto;padding:0 var(--gutter)}
.narrow{max-width:calc(720px + 2*var(--gutter))}
.section{padding:var(--section) 0}
.section.tight{padding:calc(var(--section)*.6) 0}
.dark{background:var(--ink);color:var(--cream)}
.forest{background:var(--forest-deep);color:var(--cream)}
.paper-2{background:var(--paper-2)}
.textured{background-image:linear-gradient(rgba(244,236,221,.72),rgba(244,236,221,.72)),url(img/tex-xuan-paper-1536.webp);background-size:cover}
.skip{position:absolute;left:-9999px;top:8px;z-index:100;background:var(--cream);color:var(--ink);padding:10px 16px}
.skip:focus{left:8px}
:focus-visible{outline:2px solid var(--gold);outline-offset:3px}
.vh{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.num{font-family:var(--serif);font-variant-numeric:lining-nums tabular-nums}

/* links & buttons */
.text-link{display:inline-block;font:500 .8125rem/1.4 var(--sans);text-transform:uppercase;letter-spacing:.14em;text-decoration:none;padding-bottom:4px;background:linear-gradient(currentColor,currentColor) 0 100%/100% 1px no-repeat;transition:background-size .3s var(--ease)}
.text-link:hover{background-size:0 1px;background-position:100% 100%}
.text-link::after{content:" →"}
.prose a:not(.text-link):not(.button),.faq a,.sources a,.facts a{text-decoration-thickness:1px;text-underline-offset:3px}
.button{display:inline-flex;align-items:center;justify-content:center;gap:10px;padding:14px 28px;border:1px solid var(--ink);background:var(--ink);color:var(--cream);font:500 .8125rem/1.2 var(--sans);text-transform:uppercase;letter-spacing:.14em;text-decoration:none;cursor:pointer;transition:background .2s,border-color .2s,color .2s}
.button:hover{background:var(--cinnabar);border-color:var(--cinnabar);color:var(--cream)}
.button.light{background:var(--cream);border-color:var(--cream);color:var(--ink)}
.button.light:hover{background:var(--cinnabar);border-color:var(--cinnabar);color:var(--cream)}
.button.ghost{background:transparent;color:inherit;border-color:currentColor}
.button.ghost:hover{background:var(--cinnabar);border-color:var(--cinnabar);color:var(--cream)}
.actions{display:flex;flex-wrap:wrap;align-items:center;gap:20px 28px;margin-top:32px}

/* header */
.site-header{position:fixed;inset:0 0 auto;z-index:50;color:var(--cream);transition:background .35s var(--ease),box-shadow .35s}
.site-header .header-inner{display:flex;align-items:center;justify-content:space-between;gap:24px;height:76px}
.brand img{width:118px;height:auto}
.site-nav{display:flex;align-items:center;gap:28px}
.site-nav a{font:500 .8125rem/1 var(--sans);letter-spacing:.08em;text-decoration:none;position:relative;padding:8px 0}
.site-nav a span{display:none}
.site-nav a[aria-current=page]::after,.site-nav a:hover::after{content:"";position:absolute;left:0;right:0;bottom:0;height:1px;background:var(--gold)}
.site-nav .nav-cta{border:1px solid rgba(240,228,210,.6);padding:11px 18px;text-transform:uppercase;letter-spacing:.14em;font-size:.75rem}
.site-nav .nav-cta:hover{background:var(--cinnabar);border-color:var(--cinnabar)}
.site-nav .nav-cta::after{display:none}
.menu-toggle{display:none;background:none;border:1px solid rgba(240,228,210,.5);color:inherit;font:500 .75rem/1 var(--sans);letter-spacing:.16em;text-transform:uppercase;padding:11px 16px;cursor:pointer}
.has-hero .site-header{background:linear-gradient(rgba(20,17,13,.55),rgba(20,17,13,0))}
.site-header.is-solid,body:not(.has-hero) .site-header{background:var(--ink);box-shadow:0 1px 0 var(--line-dark)}
body:not(.has-hero) main{padding-top:76px}
@media (max-width:959px){
  .menu-toggle{display:block}
  .site-nav{position:fixed;inset:0;background:var(--ink);flex-direction:column;align-items:flex-start;justify-content:center;gap:6px;padding:96px 28px 40px;transform:translateY(-100%);visibility:hidden;transition:transform .45s var(--ease),visibility .45s}
  .site-nav.open{transform:none;visibility:visible}
  .site-nav a{font:340 2rem/1.15 var(--serif);letter-spacing:-.01em;padding:10px 0}
  .site-nav a span{display:block;font-size:.8125rem;color:rgba(240,228,210,.6);margin-top:4px;letter-spacing:.2em}
  .site-nav a::after{display:none}
  .site-nav .nav-cta{margin-top:24px;font:500 .8125rem/1 var(--sans);letter-spacing:.14em;padding:16px 22px}
  .menu-toggle{position:relative;z-index:2}
}

/* home hero (split: copy on ink, photograph right) */
.hero{display:grid;grid-template-columns:minmax(0,40fr) minmax(0,60fr);min-height:max(100svh,680px);background:var(--ink);color:var(--cream);position:relative}
.hero-copy{display:flex;flex-direction:column;justify-content:flex-end;padding:140px var(--gutter) 150px calc(max(var(--gutter),(100vw - var(--wrap))/2))}
.hero-copy h1{font-size:clamp(2.5rem,4.6vw,4.75rem);margin-bottom:28px}
.hero-copy .lead{color:rgba(240,228,210,.86);max-width:34ch}
.hero-media{position:relative;overflow:hidden}
.hero-media picture,.hero-media img{position:absolute;inset:0;width:100%;height:100%}
.hero-media img{object-fit:cover;animation:settle 1.6s var(--ease) both}
.hero-media::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,rgba(20,17,13,.35),rgba(20,17,13,0) 22%)}
.hero-vertical{position:absolute;right:calc(var(--gutter) - 4px);top:120px;z-index:2;writing-mode:vertical-rl;font:400 14px/1 var(--zh);letter-spacing:.4em;color:rgba(240,228,210,.82);text-shadow:0 1px 8px rgba(0,0,0,.4)}
.evidence{position:absolute;left:0;right:0;bottom:0;z-index:3;display:grid;grid-template-columns:repeat(3,1fr);border-top:1px solid var(--line-dark);background:rgba(20,17,13,.78);backdrop-filter:blur(6px)}
.evidence a{display:flex;align-items:center;gap:14px;padding:20px var(--gutter);text-decoration:none;border-left:1px solid var(--line-dark);font:500 .8125rem/1.35 var(--sans);letter-spacing:.06em;transition:background .25s}
.evidence a:first-child{border-left:0;padding-left:calc(max(var(--gutter),(100vw - var(--wrap))/2))}
.evidence a:hover{background:rgba(176,48,30,.35)}
.evidence .seal{width:38px;height:38px;flex:none}
.evidence strong{display:block;font:400 1.0625rem/1.2 var(--serif);letter-spacing:0}
@keyframes settle{from{transform:scale(1.06)}to{transform:none}}
@media (max-width:959px){
  .hero{grid-template-columns:1fr;min-height:0}
  .hero-media{order:-1;height:64svh;min-height:380px}
  .hero-media::after{background:linear-gradient(rgba(20,17,13,.55),rgba(20,17,13,0) 30%,rgba(20,17,13,0) 70%,var(--ink))}
  .hero-copy{padding:8px var(--gutter) 40px}
  .hero-vertical{top:96px}
  .evidence{position:static;grid-template-columns:1fr;background:var(--ink)}
  .evidence a,.evidence a:first-child{border-left:0;border-top:1px solid var(--line-dark);padding:16px var(--gutter)}
}

/* page hero for inner pages */
.page-hero{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);background:var(--ink);color:var(--cream);min-height:min(78svh,760px)}
.page-hero.forest{background:var(--forest-deep)}
.page-hero .ph-copy{display:flex;flex-direction:column;justify-content:flex-end;padding:140px var(--gutter) 72px calc(max(var(--gutter),(100vw - var(--wrap))/2))}
.page-hero .ph-copy p{color:rgba(240,228,210,.86)}
.page-hero .ph-media{position:relative;overflow:hidden}
.page-hero .ph-media picture,.page-hero .ph-media img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.page-hero.text-only{grid-template-columns:1fr;min-height:0}
.page-hero.text-only .ph-copy{padding-top:160px;padding-right:calc(max(var(--gutter),(100vw - var(--wrap))/2))}
.page-hero h1{margin-bottom:28px}
@media (max-width:959px){
  .page-hero{grid-template-columns:1fr;min-height:0}
  .page-hero .ph-media{order:-1;height:52svh;min-height:300px}
  .page-hero .ph-copy{padding:40px var(--gutter) 56px}
  .page-hero.text-only .ph-copy{padding:120px var(--gutter) 56px}
}
.summary{font:400 clamp(1.25rem,2.1vw,1.625rem)/1.5 var(--serif);font-variation-settings:"opsz" 36;max-width:46ch;margin:0}
.summary-block{padding:var(--section) 0;text-align:left}
.summary-block .summary{margin:0 auto}
.updated{font-size:var(--small);color:var(--stone);margin-top:24px}
.dark .updated,.forest .updated{color:rgba(240,228,210,.6)}

/* breadcrumbs */
.crumbs{font-size:var(--small);color:var(--stone);padding-top:22px}
.crumbs ol{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:6px}
.crumbs li+li::before{content:"/";margin-right:6px;color:var(--mist)}
.crumbs a{text-decoration:none}
.crumbs a:hover{text-decoration:underline}

/* section heads */
.section-head{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,1fr);gap:var(--gap) 64px;align-items:end;margin-bottom:64px}
.section-head p{margin:0}
@media (max-width:959px){.section-head{grid-template-columns:1fr;margin-bottom:40px}}

/* three dates */
.dates{display:grid;grid-template-columns:repeat(3,1fr);gap:48px}
.date{border-top:2px solid var(--c,var(--bark));padding-top:28px}
.date .numeral{display:block;font:300 var(--numeral)/.9 var(--serif);font-variation-settings:"opsz" 144;letter-spacing:-.04em;color:var(--c);margin-bottom:22px}
.date h3{margin-bottom:12px}
.date .seal{width:44px;height:44px;margin-bottom:20px}
.c-organic{--c:var(--forest)}.c-heritage{--c:var(--cinnabar)}.c-origin{--c:var(--amber)}
@media (max-width:959px){.dates{grid-template-columns:1fr;gap:56px}}

/* full-bleed band */
.band{position:relative;height:clamp(280px,42vw,640px);overflow:hidden;background:var(--ink)}
.band picture,.band img{width:100%;height:100%;object-fit:cover}
.band figcaption{position:absolute;left:var(--gutter);bottom:16px;color:rgba(240,228,210,.85);font-size:var(--small);text-shadow:0 1px 6px rgba(0,0,0,.6)}

/* award ribbon */
.ribbon{background:var(--cinnabar);color:var(--cream);border-top:1px solid var(--gold);border-bottom:1px solid var(--gold)}
.ribbon .wrap{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:16px 40px;padding-top:26px;padding-bottom:26px}
.ribbon p{margin:0;font:400 clamp(1.125rem,1.8vw,1.5rem)/1.3 var(--serif)}
.ribbon .eyebrow{color:rgba(240,228,210,.8);margin-bottom:6px}

/* tea cards */
.tea-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:32px}
.tea-card{text-decoration:none;display:block}
.tea-card .tc-media{overflow:hidden;aspect-ratio:4/5;background:var(--ink)}
.tea-card .tc-media img{width:100%;height:100%;object-fit:cover;transition:transform .6s var(--ease)}
.tea-card:hover .tc-media img{transform:scale(1.03)}
.tea-card h3{font-size:1.75rem;margin:20px 0 4px}
.tea-card .zh{font-size:.9375rem;color:var(--stone);letter-spacing:.1em}
.tea-card p{margin:10px 0 14px}
@media (max-width:959px){.tea-grid{grid-template-columns:1fr;gap:48px}}
@media (min-width:600px) and (max-width:959px){.tea-grid{grid-template-columns:1fr 1fr}}

/* split feature (image + copy) */
.split{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:64px;align-items:center}
.split.flip > :first-child{order:2}
.split figure{margin:0}
.split .media{aspect-ratio:4/5;overflow:hidden}
.split .media img{width:100%;height:100%;object-fit:cover}
@media (max-width:959px){.split{grid-template-columns:1fr;gap:36px}.split.flip > :first-child{order:0}}
figcaption,.caption{font-size:var(--small);color:var(--stone);margin-top:12px;line-height:1.5}
.dark figcaption,.forest figcaption{color:rgba(240,228,210,.6)}

/* records strip */
.records{display:grid;grid-template-columns:repeat(3,1fr);border-top:1px solid var(--mist)}
.record{padding:32px 32px 32px 0;border-right:1px solid var(--mist)}
.record+.record{padding-left:32px}
.record:last-child{border-right:0}
.record h3{font-size:1.25rem;margin-bottom:10px}
@media (max-width:959px){.records{grid-template-columns:1fr}.record,.record+.record{padding:28px 0;border-right:0;border-bottom:1px solid var(--mist)}}

/* facts (at a glance) */
.facts{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:0 48px;margin:0;border-top:1px solid var(--mist)}
.facts > div{padding:18px 0;border-bottom:1px solid var(--mist)}
.facts dt{font:500 var(--eyebrow)/1.4 var(--sans);text-transform:uppercase;letter-spacing:.16em;color:var(--stone);margin-bottom:6px}
.facts dd{margin:0;font:400 1.1875rem/1.4 var(--serif);font-variation-settings:"opsz" 24}
.facts dd small{display:block;font:400 var(--small)/1.5 var(--sans);color:var(--stone);margin-top:4px}
.dark .facts,.forest .facts,.dark .facts > div,.forest .facts > div{border-color:var(--line-dark)}
.dark .facts dt,.forest .facts dt,.dark .facts dd small,.forest .facts dd small{color:rgba(240,228,210,.6)}
@media (max-width:700px){.facts{grid-template-columns:1fr}}
sup.ref{font:500 .65em/0 var(--sans);margin-left:2px}
sup.ref a{text-decoration:none;color:var(--stone)}

/* faq */
.faq{border-top:1px solid var(--mist)}
.faq details{border-bottom:1px solid var(--mist)}
.faq summary{list-style:none;cursor:pointer;display:flex;justify-content:space-between;gap:24px;padding:24px 0;font:400 1.25rem/1.35 var(--serif);font-variation-settings:"opsz" 30}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";font:300 1.6rem/1 var(--sans);color:var(--stone);flex:none}
.faq details[open] summary::after{content:"−"}
.faq .answer{padding:0 0 26px;max-width:70ch}
.faq .answer p:last-child{margin-bottom:0}
.dark .faq,.dark .faq details,.forest .faq,.forest .faq details{border-color:var(--line-dark)}

/* sources */
.sources{font-size:var(--small);color:var(--stone);border-top:1px solid var(--mist);padding-top:28px;margin-top:64px}
.sources ol{margin:0;padding-left:1.4em;columns:2;column-gap:48px}
.sources li{margin-bottom:8px;break-inside:avoid}
.sources a[target=_blank]::after{content:" ↗"}
@media (max-width:700px){.sources ol{columns:1}}

/* trade banner */
.trade{background:var(--forest-deep);color:var(--cream)}
.trade .wrap{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,1fr);gap:40px 64px;align-items:end;padding-top:var(--section);padding-bottom:var(--section)}
.trade p{color:rgba(240,228,210,.86)}
@media (max-width:959px){.trade .wrap{grid-template-columns:1fr}}

/* seal */
.seal{display:inline-block;width:72px;height:72px}
.seal-row{display:flex;flex-wrap:wrap;gap:28px}
.seal-row figure{margin:0;display:flex;flex-direction:column;align-items:flex-start;gap:10px;font:500 .6875rem/1.3 var(--sans);text-transform:uppercase;letter-spacing:.16em}

/* year band */
.years{display:grid;grid-template-columns:repeat(20,minmax(0,1fr));gap:4px;margin:40px 0 18px}
.years li{list-style:none;aspect-ratio:3/4;display:flex;align-items:flex-end;justify-content:center;padding-bottom:8px;background:var(--forest);color:var(--cream);font:400 .8125rem/1 var(--serif);font-variant-numeric:lining-nums;opacity:0;transform:translateY(12px);animation:rise .5s var(--ease) forwards;animation-delay:calc(var(--i)*40ms)}
.years li.edge{background:var(--gold);color:var(--ink)}
.years-note{display:flex;flex-wrap:wrap;justify-content:space-between;gap:12px 32px;font-size:var(--small);color:rgba(240,228,210,.72)}
.years-wrap ol{padding:0}
@keyframes rise{to{opacity:1;transform:none}}
@media (max-width:700px){.years{grid-template-columns:repeat(5,minmax(0,1fr))}.years li{aspect-ratio:auto;padding:12px 0}}
.current-cert{display:grid;grid-template-columns:auto 1fr;gap:20px 28px;align-items:center;margin-top:48px;padding:28px;border:1px solid var(--line-dark)}
.current-cert .seal{width:64px;height:64px}

/* certificate cards */
.cert-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:40px}
.cert{display:grid;grid-template-columns:150px minmax(0,1fr);gap:28px;align-items:start;padding-top:28px;border-top:1px solid var(--mist)}
.cert .doc{border:1px solid var(--mist);background:#fff;padding:6px}
.cert h3{margin-bottom:14px}
.cert .facts{grid-template-columns:1fr;border-top:0}
.cert .facts > div{padding:10px 0}
.cert .facts dd{font-size:1rem}
.scope{font-size:var(--small);margin-top:16px}
.scope strong{font-weight:600}
@media (max-width:959px){.cert-grid{grid-template-columns:1fr}}
@media (max-width:520px){.cert{grid-template-columns:1fr}.cert .doc{max-width:200px}}

/* icon cards */
.cards{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:0;border-top:1px solid var(--mist)}
.card{padding:32px 32px 36px 0;border-bottom:1px solid var(--mist)}
.card:not(:nth-child(3n+1)){padding-left:32px;border-left:1px solid var(--mist)}
.card svg{width:40px;height:40px;stroke:var(--c,var(--forest));fill:none;stroke-width:1.5;margin-bottom:22px}
.card h3{font-size:1.25rem;margin-bottom:10px}
.card p{margin:0}
@media (max-width:959px){.cards{grid-template-columns:1fr}.card,.card:not(:nth-child(3n+1)){padding:28px 0;border-left:0}}

/* archive strip */
.archive{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}
.archive figure{margin:0}
.archive img{width:100%;aspect-ratio:3/2;object-fit:cover}
@media (max-width:700px){.archive{grid-template-columns:1fr}}

/* craft story */
.steps-story{background:var(--ink);color:var(--cream)}
.step{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:64px;padding:var(--section) 0;border-top:1px solid var(--line-dark)}
.step:first-child{border-top:0}
.step-copy{position:sticky;top:120px;align-self:start}
.step-no{display:block;font:300 4.5rem/1 var(--serif);color:var(--gold);font-variant-numeric:lining-nums;margin-bottom:18px}
.step-copy h3{font-size:clamp(1.75rem,2.6vw,2.5rem);margin-bottom:6px}
.step-copy .zh{display:block;color:rgba(240,228,210,.6);letter-spacing:.3em;margin-bottom:24px}
.step-copy p{color:rgba(240,228,210,.86)}
.step-media{display:grid;gap:16px}
.step-media img{width:100%}
.step-media .pair{display:grid;grid-template-columns:1fr 1fr;gap:16px}
@media (max-width:959px){.step{grid-template-columns:1fr;gap:28px}.step-copy{position:static}}

/* quote */
.quote{position:relative;color:var(--cream);text-align:center;background:var(--ink) center/cover no-repeat;background-image:linear-gradient(rgba(20,17,13,.55),rgba(20,17,13,.55)),url(img/tex-embers-1536.webp)}
.quote blockquote{margin:0 auto;max-width:28ch;font:300 italic clamp(2rem,4vw,3.5rem)/1.15 var(--serif);font-variation-settings:"opsz" 144}
.quote .src{margin:28px auto 0;font-size:var(--small);color:rgba(240,228,210,.7)}
.quote .src span{display:block;font-size:1.125rem;letter-spacing:.3em;color:var(--cream);margin-bottom:8px}

/* tables */
.table-wrap{overflow-x:auto;margin:32px 0}
table{width:100%;border-collapse:collapse;font-size:.9375rem;min-width:560px}
caption{text-align:left;font:500 var(--eyebrow)/1.4 var(--sans);text-transform:uppercase;letter-spacing:.16em;color:var(--stone);padding-bottom:12px}
th,td{text-align:left;padding:14px 16px 14px 0;border-bottom:1px solid var(--mist);vertical-align:top}
thead th{font:500 .75rem/1.4 var(--sans);text-transform:uppercase;letter-spacing:.12em;color:var(--stone);border-bottom-color:var(--bark)}
tbody th{font:400 1.0625rem/1.35 var(--serif)}
.dark th,.dark td{border-color:var(--line-dark)}
.dark thead th,.dark caption{color:rgba(240,228,210,.6)}
.dark thead th{border-bottom-color:var(--cream)}

/* map */
.map{position:relative;margin:0}
.map img{width:100%}
.map .pin{position:absolute;transform:translate(-50%,-50%);font:500 .75rem/1.3 var(--sans);letter-spacing:.04em;background:rgba(244,236,221,.92);border:1px solid var(--mist);padding:6px 10px;white-space:nowrap}
.map .pin.us{background:var(--cinnabar);color:var(--cream);border-color:var(--cinnabar)}
@media (max-width:700px){.map .pin{font-size:.625rem;padding:4px 6px;white-space:normal;max-width:130px}}

/* three steps (producer not trader) */
.chain{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:32px;counter-reset:chain}
.chain figure{margin:0}
.chain img{width:100%;aspect-ratio:4/5;object-fit:cover}
.chain h3{margin:22px 0 8px}
.chain h3::before{counter-increment:chain;content:"0" counter(chain) "  ";color:var(--amber);font-size:1rem;letter-spacing:.1em}
@media (max-width:959px){.chain{grid-template-columns:1fr}}

/* prose & article */
.prose h2{font-size:clamp(1.75rem,3vw,2.5rem);margin:64px 0 20px}
.prose h3{margin:40px 0 12px}
.prose ul,.prose ol{padding-left:1.2em;max-width:66ch}
.prose li{margin-bottom:8px}
.prose .table-wrap{max-width:none}
.article-hero{margin:0 0 48px}
.article-hero img{width:100%}
.two-col{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:64px}
@media (max-width:959px){.two-col{grid-template-columns:1fr;gap:40px}}
.guide-list{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:48px}
.guide-list a{text-decoration:none;display:block}
.guide-list img{width:100%;aspect-ratio:3/2;object-fit:cover}
.guide-list h3{margin:18px 0 8px}
@media (max-width:700px){.guide-list{grid-template-columns:1fr}}
.callout{border-left:2px solid var(--c,var(--gold));padding:6px 0 6px 22px;margin:32px 0}

/* product */
.product{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:64px;padding:48px 0 var(--section)}
.product .gallery{display:grid;gap:16px}
.product .gallery picture:first-child img{aspect-ratio:4/5;object-fit:cover;width:100%}
.product .gallery .pair{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.product .gallery .pair img{aspect-ratio:1;object-fit:cover;width:100%}
.product h1{font-size:clamp(2.5rem,5vw,4.5rem)}
.product .zh-title{display:block;font:400 1.25rem/1.4 var(--zh);letter-spacing:.3em;color:var(--stone);margin:8px 0 28px}
@media (max-width:959px){.product{grid-template-columns:1fr;gap:36px}}

/* news */
.record-figure img{border:1px solid var(--mist);max-height:720px;width:auto}

/* forms (trade) */
.form-card{background:var(--paper-2);padding:40px;align-self:start}
.form-grid{display:grid;grid-template-columns:1fr 1fr;gap:20px}
.field{display:flex;flex-direction:column;gap:8px}
.field.full,.full{grid-column:1/-1}
label,legend{font:500 .8125rem/1.3 var(--sans);letter-spacing:.04em}
input,textarea{font:400 1rem/1.4 var(--sans);color:var(--bark);background:var(--paper);border:1px solid var(--mist);padding:12px 14px;border-radius:0}
input:focus,textarea:focus{outline:2px solid var(--gold);outline-offset:0;border-color:var(--gold)}
textarea{min-height:140px;resize:vertical}
fieldset{border:0;padding:0;margin:0}
.check-row{display:flex;flex-wrap:wrap;gap:12px 24px;margin-top:10px}
.check-row label{display:flex;gap:8px;align-items:center;font-weight:400}
.form-note{font-size:var(--small);color:var(--stone)}
.subtle{color:var(--stone);font-weight:400}
.dialog{border:0;padding:40px;max-width:640px;width:calc(100% - 32px);background:var(--paper);color:var(--bark)}
.dialog::backdrop{background:rgba(20,17,13,.7)}
.dialog textarea{width:100%;min-height:280px;font-size:.875rem}
.dialog-close{position:absolute;top:14px;right:14px;background:none;border:0;font:500 .75rem/1 var(--sans);letter-spacing:.14em;text-transform:uppercase;cursor:pointer;padding:8px}
@media (max-width:700px){.form-grid{grid-template-columns:1fr}.form-card,.dialog{padding:28px 20px}}
.steps-list{counter-reset:s;list-style:none;padding:0;margin:32px 0}
.steps-list li{display:grid;grid-template-columns:48px 1fr;gap:4px 12px;padding:18px 0;border-top:1px solid var(--mist)}
.steps-list li::before{counter-increment:s;content:"0" counter(s);font:400 1.125rem/1.3 var(--serif);color:var(--amber)}
.steps-list strong{font:400 1.125rem/1.3 var(--serif)}

/* footer */
.site-footer{background:var(--ink);color:var(--cream);padding:88px 0 40px;font-size:.9375rem}
.footer-grid{display:grid;grid-template-columns:minmax(0,1.3fr) repeat(3,minmax(0,1fr));gap:40px}
.site-footer img.logo{width:132px;margin-bottom:24px}
.site-footer address{font-style:normal;color:rgba(240,228,210,.75);line-height:1.6}
.site-footer h2{font:500 var(--eyebrow)/1.4 var(--sans);letter-spacing:.18em;text-transform:uppercase;color:rgba(240,228,210,.55);margin-bottom:16px}
.site-footer ul{list-style:none;padding:0;margin:0}
.site-footer li{margin-bottom:10px}
.site-footer a{text-decoration:none}
.site-footer a:hover{text-decoration:underline}
.footer-bottom{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:center;gap:24px;margin-top:64px;padding-top:28px;border-top:1px solid var(--line-dark);color:rgba(240,228,210,.6);font-size:var(--small)}
.footer-bottom .seal{width:40px;height:40px}
.footer-seals{display:flex;gap:12px}
@media (max-width:959px){.footer-grid{grid-template-columns:1fr 1fr}.footer-grid > :first-child{grid-column:1/-1}}

/* reveal */
.js .reveal{opacity:0;transform:translateY(24px);transition:opacity .6s var(--ease),transform .6s var(--ease);transition-delay:calc(var(--d,0)*80ms)}
.js .reveal.in{opacity:1;transform:none}
@supports (animation-timeline:view()){
  .band img{animation:drift linear both;animation-timeline:view();transform-origin:center}
  @keyframes drift{from{transform:scale(1.08) translateY(-3%)}to{transform:scale(1.08) translateY(3%)}}
}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation:none!important;transition:none!important;scroll-behavior:auto!important}
  .js .reveal{opacity:1;transform:none}
  .years li{opacity:1;transform:none}
}
@media print{.site-header,.site-footer,.evidence,.trade,.menu-toggle{display:none}body:not(.has-hero) main{padding-top:0}}