:root {
    --bg:#f4f1ea;
    --bg-2:#ebe6da;
    --ink:#1f2218;
    --ink-soft:#4a4a3f;
    --ink-mute:#8a8979;
    --line:rgba(31,34,24,.16);
    --accent:#3a4a35;/* moss */ 
    --warm:#7a5c3a;
    --paper:#faf8f2;
    --serif-cn:"Noto Serif SC","Songti SC","STSong",serif;
    --serif-en:"Cormorant Garamond","EB Garamond",Georgia,serif;
    --sans:"Inter",ui-sans-serif,system-ui,sans-serif;
    --mono:"JetBrains Mono",ui-monospace,"SFMono-Regular",monospace;
}
* {box-sizing:border-box;margin:0;padding:0;}
html,body {background:var(--bg);color:var(--ink);font-family:var(--sans);font-weight:300;-webkit-font-smoothing:antialiased;}
body {overflow-x:hidden;}
a {color:inherit;text-decoration:none;}
img {display:block;max-width:100%;}

/* ------------- NAV ------------- */
.nav { position:fixed; top:0; left:0; right:0; z-index:50; display:grid; grid-template-columns:1fr auto 1fr; align-items:center; padding:22px 36px; mix-blend-mode:difference; color:#f4f1ea; font-family:var(--mono); font-size:12px; letter-spacing:.18em;text-transform:uppercase;}
.nav .left {display:flex;gap:28px;}
.nav .right {display:flex;gap:28px;justify-content:flex-end;}
.nav .brand {font-family:var(--serif-en);font-style:italic;font-size:18px;letter-spacing:.04em;text-transform:none;font-weight:400;}
.nav .brand .cn {font-family:var(--serif-cn);font-style:normal;font-weight:400;margin-right:8px;letter-spacing:.3em;}
.nav a.item {opacity:.85;transition:opacity .2s;}
.nav a.item:hover {opacity:1;}
.nav .dot {display:inline-block;width:4px;height:4px;border-radius:50%;background:currentColor;margin-right:8px;vertical-align:middle;}

/* ------------- HERO ------------- */
.hero {position:relative;height:100vh;min-height:720px;width:100%;overflow:hidden;}
.hero .photo {position:absolute;inset:0;background:#2a2f25;background-image:repeating-linear-gradient(135deg,rgba(255,255,255,.025) 0 2px,transparent 2px 28px),radial-gradient(120% 80% at 65% 35%,#4b5340 0%,#2d3328 55%,#1a1e15 100%);}
.hero .photo::after {content:"hero photograph · 茶园清晨 · drop image here";position:absolute;left:36px;bottom:36px;font-family:var(--mono);font-size:10px;letter-spacing:.2em;text-transform:uppercase;color:rgba(244,241,234,.45);}
.hero .meta-tr {position:absolute;right:36px;top:96px;color:#f4f1ea;font-family:var(--mono);font-size:10px;letter-spacing:.22em;text-transform:uppercase;text-align:right;line-height:2;opacity:.7;}
.hero .meta-bl {position:absolute;left:36px;bottom:36px;right:36px;display:flex;justify-content:space-between;align-items:flex-end;color:#f4f1ea;opacity:.0;/* keep clean per request */      pointer-events:none;}
.hero .vert-num {position:absolute;left:36px;top:50%;transform:translateY(-50%);writing-mode:vertical-rl;color:rgba(244,241,234,.4);font-family:var(--mono);font-size:10px;letter-spacing:.4em;}

/* ------------- SECTION SHELL ------------- */
section {position:relative;}
.grid {display:grid;grid-template-columns:repeat(12,1fr);gap:24px;padding:0 36px;max-width:1600px;margin:0 auto;}
.eyebrow {font-family:var(--mono);font-size:10px;letter-spacing:.22em;text-transform:uppercase;color:var(--ink-mute);}
.h-display {font-family:var(--serif-cn);font-weight:300;font-size:clamp(56px,9vw,144px);line-height:.95;letter-spacing:-.01em;}
.h-display .en {font-family:var(--serif-en);font-style:italic;font-weight:300;}
.lede {font-family:var(--serif-cn);font-weight:300;font-size:22px;line-height:1.7;color:var(--ink-soft);letter-spacing:.02em;}
.body {font-family:var(--serif-cn);font-weight:300;font-size:15px;line-height:1.9;color:var(--ink-soft);letter-spacing:.02em;}
.rule {height:1px;background:var(--line);border:0;}

/* ------------- INTRO ------------- */
.intro {padding:160px 0 140px;}
.intro .grid {align-items:start;}
.intro .id {grid-column:1 / span 2;font-family:var(--mono);font-size:11px;letter-spacing:.22em;text-transform:uppercase;color:var(--ink-mute);line-height:2.1;}
.intro .big {grid-column:3 / span 7;padding-top:6px;}
.intro .big h1 {font-family:var(--serif-cn);font-weight:300;font-size:clamp(48px,7.2vw,116px);line-height:1.02;letter-spacing:-.005em;}
.intro .big h1 em {font-family:var(--serif-en);font-style:italic;font-weight:300;color:var(--accent);display:inline-block;transform:translateY(-.04em);}
.intro .side {grid-column:10 / span 3;padding-top:14px;border-top:1px solid var(--line);}
.intro .side p {margin-top:18px;}
.intro .side .tag {margin-top:28px;display:flex;gap:18px;flex-wrap:wrap;font-family:var(--mono);font-size:10px;letter-spacing:.2em;text-transform:uppercase;color:var(--ink-mute);} 

/* ------------- PRODUCT EDITORIAL ------------- */
.product {padding:60px 0 140px;background:var(--bg);}
.product .grid {grid-template-rows:auto;}
.product .frame {grid-column:1 / span 6;aspect-ratio:4/5;position:relative;background:#dcd5c4;background-image:repeating-linear-gradient(135deg,rgba(31,34,24,.05) 0 1px,transparent 1px 22px),radial-gradient(90% 70% at 35% 30%,#ece5d2 0%,#c9c0aa 100%);overflow:hidden;}
.product .frame::after {content:"product still life · 茶饼 / 茶罐";position:absolute;left:20px;bottom:20px;font-family:var(--mono);font-size:10px;letter-spacing:.2em;text-transform:uppercase;color:rgba(31,34,24,.45);}
.product .frame .badge {position:absolute;top:20px;left:20px;font-family:var(--mono);font-size:10px;letter-spacing:.22em;text-transform:uppercase;color:rgba(31,34,24,.6);}
.product .copy {grid-column:8 / span 4;padding-top:24px;display:flex;flex-direction:column;gap:36px;}
.product .copy .num {font-family:var(--serif-en);font-style:italic;font-weight:300;font-size:88px;line-height:1;color:var(--accent);letter-spacing:-.01em;}
.product .copy .num small {font-family:var(--mono);font-style:normal;font-size:11px;color:var(--ink-mute);letter-spacing:.2em;margin-left:14px;vertical-align:top;text-transform:uppercase;}
.product .copy h2 {font-family:var(--serif-cn);font-weight:300;font-size:56px;line-height:1.05;letter-spacing:.02em;}
.product .copy h2 .en {display:block;font-family:var(--serif-en);font-style:italic;font-size:26px;color:var(--ink-mute);letter-spacing:.04em;margin-top:8px;font-weight:300;}
.specs {display:grid;grid-template-columns:1fr 1fr;gap:0 24px;row-gap:0;border-top:1px solid var(--line);}
.specs > div {padding:14px 0;border-bottom:1px solid var(--line);display:flex;justify-content:space-between;align-items:baseline;gap:12px;}
.specs .k {font-family:var(--mono);font-size:10px;letter-spacing:.2em;text-transform:uppercase;color:var(--ink-mute);}
.specs .v {font-family:var(--serif-cn);font-size:15px;color:var(--ink);}
.buy {display:flex;align-items:center;justify-content:space-between;gap:24px;}
.buy .price {font-family:var(--serif-en);font-style:italic;font-weight:300;font-size:44px;color:var(--ink);line-height:1;}
.buy .price small {font-family:var(--mono);font-style:normal;font-size:10px;color:var(--ink-mute);letter-spacing:.2em;margin-left:8px;text-transform:uppercase;}
.btn {--c:var(--ink);display:inline-flex;align-items:center;gap:14px;padding:14px 22px;border:1px solid var(--c);color:var(--c);font-family:var(--mono);font-size:11px;letter-spacing:.22em;text-transform:uppercase;background:transparent;cursor:pointer;border-radius:0;transition:background .25s,color .25s;}
.btn:hover {background:var(--c);color:var(--bg);}
.btn .arr {display:inline-block;transition:transform .25s;}
.btn:hover .arr {transform:translateX(4px);}    

/* ------------- ORIGIN / NUMBERS STRIP ------------- */
.origin {padding:140px 0 140px;background:var(--bg-2);}
.origin .grid {align-items:end;}
.origin .title {grid-column:1 / span 5;}
.origin .title h3 {font-family:var(--serif-cn);font-weight:300;font-size:88px;line-height:1;letter-spacing:.04em;}
.origin .title h3 .en {display:block;font-family:var(--serif-en);font-style:italic;font-size:30px;color:var(--ink-mute);margin-top:14px;letter-spacing:.04em;}
.origin .text {grid-column:7 / span 4;}
.origin .text .eyebrow {margin-bottom:18px;}
.origin .stats {grid-column:1 / -1;margin-top:96px;display:grid;grid-template-columns:repeat(4,1fr);gap:0;border-top:1px solid var(--line);}
.origin .stats > div {padding:32px 24px 0 0;border-right:1px solid var(--line);}
.origin .stats > div:last-child {border-right:0;}
.origin .stats .k {font-family:var(--mono);font-size:10px;letter-spacing:.22em;color:var(--ink-mute);text-transform:uppercase;margin-bottom:18px;}
.origin .stats .n {font-family:var(--serif-en);font-style:italic;font-weight:300;font-size:72px;line-height:1;color:var(--ink);letter-spacing:-.01em;}
.origin .stats .n sup {font-family:var(--serif-cn);font-style:normal;font-size:18px;color:var(--ink-mute);margin-left:6px;vertical-align:top;top:.2em;position:relative;}
    

/* ------------- RITUAL STRIP ------------- */
.ritual {padding:140px 0 160px;}
.ritual .head {display:flex;justify-content:space-between;align-items:end;padding:0 36px 64px;max-width:1600px;margin:0 auto;}
.ritual .head h3 {font-family:var(--serif-cn);font-weight:300;font-size:clamp(48px,6vw,96px);line-height:1;letter-spacing:.02em;}
.ritual .head h3 .en {font-family:var(--serif-en);font-style:italic;color:var(--ink-mute);font-weight:300;}
.ritual .steps {display:grid;grid-template-columns:repeat(4,1fr);padding:0 36px;max-width:1600px;margin:0 auto;gap:0;border-top:1px solid var(--line);}
.ritual .step {padding:36px 28px 28px 0;border-right:1px solid var(--line);min-height:340px;display:flex;flex-direction:column;}
.ritual .step:last-child {border-right:0;}
.ritual .step .num {font-family:var(--serif-en);font-style:italic;font-weight:300;color:var(--accent);font-size:44px;line-height:1;}
.ritual .step h4 {font-family:var(--serif-cn);font-weight:400;font-size:22px;margin-top:28px;letter-spacing:.04em;}
.ritual .step .body {font-size:14px;margin-top:14px;}
.ritual .step .meta {margin-top:auto;font-family:var(--mono);font-size:10px;letter-spacing:.2em;text-transform:uppercase;color:var(--ink-mute);display:flex;justify-content:space-between;padding-top:24px;border-top:1px solid var(--line);}

/* ------------- TASTE NOTES ------------- */
.notes {padding:140px 0;background:var(--ink);color:var(--paper);}
.notes .grid {align-items:start;}
.notes .title {grid-column:1 / span 4;}
.notes .title .eyebrow {color:rgba(250,248,242,.5);}
.notes .title h3 {font-family:var(--serif-cn);font-weight:300;font-size:64px;line-height:1.05;margin-top:28px;letter-spacing:.04em;}
.notes .title h3 .en {display:block;font-family:var(--serif-en);font-style:italic;font-size:22px;color:rgba(250,248,242,.55);margin-top:12px;letter-spacing:.04em;}
.notes .wheel {grid-column:6 / span 7;}
.notes .list {}
.notes .list .row {display:grid;grid-template-columns:60px 1fr 60px;align-items:baseline;padding:18px 0;border-bottom:1px solid rgba(250,248,242,.14);gap:18px;}
.notes .list .row:first-child {border-top:1px solid rgba(250,248,242,.14);}
.notes .list .row .ix {font-family:var(--mono);font-size:11px;color:rgba(250,248,242,.45);letter-spacing:.18em;}
.notes .list .row .name {display:flex;align-items:baseline;gap:18px;}
.notes .list .row .cn {font-family:var(--serif-cn);font-weight:300;font-size:24px;}
.notes .list .row .en {font-family:var(--serif-en);font-style:italic;color:rgba(250,248,242,.55);font-size:18px;}
.notes .list .row .bar {position:relative;height:1px;background:rgba(250,248,242,.18);align-self:center;min-width:40px;}
.notes .list .row .bar::after {content:"";position:absolute;left:0;top:-1px;height:3px;background:var(--paper);width:var(--w,40%);}
.notes .list .row .pct {font-family:var(--mono);font-size:11px;color:rgba(250,248,242,.55);text-align:right;letter-spacing:.1em;}

/* ------------- QUOTE ------------- */
.quote {padding:160px 0 160px;background:var(--bg);}
.quote .grid {align-items:start;}
.quote .mark {grid-column:1 / span 2;font-family:var(--serif-en);font-style:italic;font-size:160px;line-height:.6;color:var(--accent);font-weight:300;}
.quote blockquote {grid-column:3 / span 8;}
.quote blockquote p {font-family:var(--serif-cn);font-weight:300;font-size:clamp(28px,3.4vw,52px);line-height:1.35;letter-spacing:.01em;color:var(--ink);}
.quote blockquote p .en {font-family:var(--serif-en);font-style:italic;color:var(--ink-mute);display:block;font-size:.52em;line-height:1.5;margin-top:22px;letter-spacing:.04em;}
.quote cite {grid-column:3 / span 8;margin-top:32px;font-family:var(--mono);font-size:11px;letter-spacing:.22em;text-transform:uppercase;color:var(--ink-mute);font-style:normal;}

/* ------------- BUY CTA STRIP ------------- */
.cta {padding:140px 0;background:var(--bg-2);}
.cta .grid {align-items:center;}
.cta .l {grid-column:1 / span 6;}
.cta .l h3 {font-family:var(--serif-cn);font-weight:300;font-size:clamp(56px,7vw,108px);line-height:1;letter-spacing:.02em;}
.cta .l h3 .en {display:block;font-family:var(--serif-en);font-style:italic;font-size:.3em;color:var(--ink-mute);margin-top:18px;letter-spacing:.04em;}
.cta .r {grid-column:8 / span 5;display:flex;flex-direction:column;gap:28px;}
.cta .r .price {font-family:var(--serif-en);font-style:italic;font-weight:300;font-size:96px;line-height:1;color:var(--ink);}
.cta .r .price small {font-family:var(--mono);font-style:normal;font-size:11px;color:var(--ink-mute);letter-spacing:.22em;vertical-align:top;margin-left:14px;text-transform:uppercase;}
.cta .r .opts {display:flex;gap:8px;flex-wrap:wrap;}
.cta .r .opt {padding:10px 18px;border:1px solid var(--line);font-family:var(--mono);font-size:11px;letter-spacing:.18em;text-transform:uppercase;color:var(--ink-soft);cursor:pointer;transition:all .2s;}
.cta .r .opt.on {background:var(--ink);color:var(--bg);border-color:var(--ink);}
.cta .r .actions {display:flex;gap:14px;margin-top:8px;}

/* page hero (shorter) */
.page-hero{position:relative; height:56vh; min-height:420px; width:100%; overflow:hidden; background:var(--ink);}
.page-hero .bg{position:absolute; inset:0; background:#2a2f25; background-image:repeating-linear-gradient(135deg, rgba(255,255,255,.025) 0 2px, transparent 2px 28px), radial-gradient(120% 80% at 65% 35%, #4b5340 0%, #2d3328 55%, #1a1e15 100%);}
.page-hero .content{position:relative; z-index:2; display:flex; flex-direction:column; justify-content:flex-end; height:100%; padding:36px; max-width:1600px; margin:0 auto;}
.page-hero .eyebrow{font-family:var(--mono); font-size:10px; letter-spacing:.22em; text-transform:uppercase; color:rgba(244,241,234,.55); margin-bottom:18px;}
.page-hero h1{font-family:var(--serif-cn); font-weight:300; font-size:clamp(48px,7vw,96px); line-height:1; color:#f4f1ea; letter-spacing:.02em;}
.page-hero h1 .en{font-family:var(--serif-en); font-style:italic; font-size:.45em; color:rgba(244,241,234,.6); display:block; margin-top:10px; letter-spacing:.04em;}

/* about sections */
.about-intro{padding:120px 0 100px;}
.about-intro .grid{align-items:start;}
.about-intro .label{grid-column:1 / span 2; font-family:var(--mono); font-size:11px; letter-spacing:.22em; text-transform:uppercase; color:var(--ink-mute); line-height:2.1;}
.about-intro .text{grid-column:3 / span 6;}
.about-intro .text h2{font-family:var(--serif-cn); font-weight:300; font-size:clamp(32px,4vw,56px); line-height:1.1; letter-spacing:.01em; margin-bottom:28px;}
.about-intro .text h2 .en{font-family:var(--serif-en); font-style:italic; font-size:.5em; color:var(--ink-mute); display:block; margin-top:8px; letter-spacing:.04em;}
.about-intro .text p{margin-bottom:22px;}
.about-intro .side{grid-column:10 / span 3; padding-top:14px; border-top:1px solid var(--line);}
.about-intro .side .stat{margin-bottom:28px;}
.about-intro .side .stat .n{font-family:var(--serif-en); font-style:italic; font-size:56px; line-height:1; color:var(--accent);}
.about-intro .side .stat .k{font-family:var(--mono); font-size:10px; letter-spacing:.22em; text-transform:uppercase; color:var(--ink-mute); margin-top:8px;}

/* timeline */
.timeline{padding:100px 0; background:var(--bg-2);}
.timeline .head{display:flex; justify-content:space-between; align-items:end; padding:0 36px 64px; max-width:1600px; margin:0 auto;}
.timeline .head h2{font-family:var(--serif-cn); font-weight:300; font-size:clamp(36px,5vw,64px); line-height:1.05; letter-spacing:.02em;}
.timeline .head h2 .en{font-family:var(--serif-en); font-style:italic; font-size:.45em; color:var(--ink-mute); display:block; margin-top:8px; letter-spacing:.04em;}
.timeline .list{padding:0 36px; max-width:1600px; margin:0 auto;}
.timeline .item{display:grid; grid-template-columns:200px 1fr; gap:48px; padding:36px 0; border-top:1px solid var(--line); align-items:start;}
.timeline .item:first-child{border-top:0;}
.timeline .item .year{font-family:var(--serif-en); font-style:italic; font-size:44px; line-height:1; color:var(--accent);}
.timeline .item .year span{font-family:var(--mono); font-style:normal; font-size:11px; color:var(--ink-mute); margin-left:8px; vertical-align:top; letter-spacing:.2em; text-transform:uppercase;}
.timeline .item h4{font-family:var(--serif-cn); font-weight:400; font-size:22px; margin-bottom:10px; letter-spacing:.04em;}
.timeline .item p{font-family:var(--serif-cn); font-size:15px; line-height:1.8; color:var(--ink-soft);}

/* team */
.team{padding:120px 0;}
.team .head{padding:0 36px 64px; max-width:1600px; margin:0 auto;}
.team .head h2{font-family:var(--serif-cn); font-weight:300; font-size:clamp(36px,5vw,64px); line-height:1.05; letter-spacing:.02em;}
.team .head h2 .en{font-family:var(--serif-en); font-style:italic; font-size:.45em; color:var(--ink-mute); display:block; margin-top:8px; letter-spacing:.04em;}
.team .grid{grid-template-columns:repeat(3, 1fr); gap:24px;}
.team .member{position:relative; aspect-ratio:3/4; background:var(--bg-2); overflow:hidden;}
.team .member .placeholder{position:absolute; inset:0; display:flex; align-items:center; justify-content:center;}
.team .member .placeholder::after{content:"portrait"; font-family:var(--mono); font-size:10px; letter-spacing:.2em; text-transform:uppercase; color:var(--ink-mute);}
.team .member .info{position:absolute; left:0; right:0; bottom:0; padding:24px; background:linear-gradient(transparent, rgba(31,34,24,.7)); color:var(--paper);}
.team .member .info h4{font-family:var(--serif-cn); font-weight:400; font-size:20px; letter-spacing:.04em;}
.team .member .info .role{font-family:var(--mono); font-size:10px; letter-spacing:.22em; text-transform:uppercase; opacity:.7; margin-top:6px;}

/* pagination */
.pagination{padding:48px 36px 100px; max-width:1600px; margin:0 auto; display:flex; justify-content:center; gap:8px;}
.pagination a{padding:10px 18px; border:1px solid var(--line); font-family:var(--mono); font-size:11px; letter-spacing:.18em; text-transform:uppercase; color:var(--ink-soft); transition:all .2s;}
.pagination a:hover{background:var(--ink); color:var(--bg); border-color:var(--ink);}
.pagination a.on{background:var(--ink); color:var(--bg); border-color:var(--ink);}


/* list */
.article-list{padding:80px 0 60px;}
.article-list .grid { grid-template-columns: repeat(2, 1fr);}
.article-item { display:grid; grid-template-columns:1fr 1fr; gap:0; border-top:1px solid var(--line); transition:background .25s;}
.article-item:last-child{border-bottom:1px solid var(--line);}
.article-item:hover{background:var(--bg-2);}
.article-item .thumb { aspect-ratio:16/10; background:var(--bg-2); position:relative; overflow:hidden;}
.article-item .thumb::after{content:"image"; position:absolute; inset:0; display:flex; align-items:center; justify-content:center; font-family:var(--mono); font-size:10px; letter-spacing:.2em; text-transform:uppercase; color:var(--ink-mute);}
.article-item .meta{padding:36px 36px 36px 48px; display:flex; flex-direction:column; justify-content:center;}
.article-item .meta .date{font-family:var(--mono); font-size:10px; letter-spacing:.22em; text-transform:uppercase; color:var(--ink-mute); margin-bottom:16px;}
.article-item .meta h3 {font-family:var(--serif-cn); font-weight:300; font-size:clamp(24px,3vw,36px); line-height:1.15; letter-spacing:.01em; margin-bottom:14px;}
.article-item .meta .excerpt{font-family:var(--serif-cn); font-size:15px; line-height:1.7; color:var(--ink-soft); margin-bottom:20px;}
.article-item .meta .read{font-family:var(--mono); font-size:10px; letter-spacing:.22em; text-transform:uppercase; color:var(--ink-mute); transition:color .2s;}
.article-item:hover .meta .read{color:var(--ink);}

/* article header */
    .article-header{padding:140px 0 60px;}
    .article-header .grid{align-items:start;}
    .article-header .meta{grid-column:1 / span 2; font-family:var(--mono); font-size:11px; letter-spacing:.22em; text-transform:uppercase; color:var(--ink-mute); line-height:2.1;}
    .article-header .title{grid-column:3 / span 8;}
    .article-header .title h1{font-family:var(--serif-cn); font-weight:300; font-size:clamp(36px,5.5vw,72px); line-height:1.05; letter-spacing:.01em;}
    .article-header .title h1 .en{font-family:var(--serif-en); font-style:italic; font-size:.55em; color:var(--ink-mute); display:block; margin-top:10px; letter-spacing:.04em;}
.article-header .title .date {margin-top:24px; font-family:var(--mono); font-size:12px; letter-spacing:.22em; text-transform:uppercase; color:var(--ink-mute);}

/* article hero image */
.article-hero{margin-bottom:60px;}
.article-hero .image{max-width:1600px; margin:0 auto; aspect-ratio:21/9; background:var(--bg-2); position:relative; overflow:hidden;}
.article-hero .image::after{content:"article photograph"; position:absolute; inset:0; display:flex; align-items:center; justify-content:center; font-family:var(--mono); font-size:10px; letter-spacing:.2em; text-transform:uppercase; color:var(--ink-mute);}

/* article body */
.article-body{padding:0 0 80px;}
.article-body .grid{align-items:start;}
.article-body .content{grid-column:3 / span 7;}
.article-body .content p {font-family:var(--serif-cn); font-weight:300; font-size:17px; line-height:2; color:var(--ink-soft); letter-spacing:.02em; margin-bottom:28px;}
.article-body .content p strong { font-size:20px; color:var(--ink); line-height:1.8;}
.article-body .content h2{font-family:var(--serif-cn); font-weight:300; font-size:28px; line-height:1.2; letter-spacing:.02em; margin:48px 0 20px;}
.article-body .content h2 .en{font-family:var(--serif-en); font-style:italic; font-size:.65em; color:var(--ink-mute); letter-spacing:.04em; margin-left:10px;}
.article-body .content blockquote {border-left:1px solid var(--line); padding-left:24px; margin:36px 0; font-family:var(--serif-cn); font-weight:300; font-size:20px; line-height:1.7; color:var(--ink); letter-spacing:.02em;}
.article-body .content blockquote em {display:block; margin-top:14px; font-family:var(--serif-cn); font-size:12px; letter-spacing:.22em; text-transform:uppercase; color:var(--ink-mute); font-style:normal;}
.article-body .content hr{border:0; height:1px; background:var(--line); margin:48px 0;}
.article-body .content .image-block{margin:36px 0; aspect-ratio:16/9; background:var(--bg-2); position:relative; overflow:hidden;}
.article-body .content .image-block::after{content:"inline image"; position:absolute; inset:0; display:flex; align-items:center; justify-content:center; font-family:var(--mono); font-size:10px; letter-spacing:.2em; text-transform:uppercase; color:var(--ink-mute);}
.article-body .content .image-caption{font-family:var(--mono); font-size:10px; letter-spacing:.18em; text-transform:uppercase; color:var(--ink-mute); margin-top:10px;}

.article-body .aside{grid-column:11 / span 2; padding-top:14px; border-top:1px solid var(--line);}
.article-body .aside .tag{margin-bottom:24px; font-family:var(--mono); font-size:12px; letter-spacing:.18em; text-transform:uppercase; color:var(--ink-mute);}
.article-body .aside .share{display:flex; flex-direction:column; gap:8px;}
.article-body .aside .share a{padding:8px 0; font-family:var(--mono); font-size:12px; letter-spacing:.18em; text-transform:uppercase; color:var(--ink-mute); border-bottom:1px solid var(--line); transition:color .2s;}
.article-body .aside .share a:hover{color:var(--ink);}

    /* related */
    .related{padding:80px 0 100px; background:var(--bg-2);}
    .related .head{padding:0 36px 48px; max-width:1600px; margin:0 auto;}
    .related .head h2{font-family:var(--serif-cn); font-weight:300; font-size:clamp(28px,3.5vw,48px); line-height:1.1; letter-spacing:.02em;}
    .related .head h2 .en{font-family:var(--serif-en); font-style:italic; font-size:.5em; color:var(--ink-mute); display:block; margin-top:8px; letter-spacing:.04em;}
    .related .grid{grid-template-columns:repeat(3, 1fr); gap:24px;}
    .related .card{display:block; background:var(--bg); transition:transform .25s;}
    .related .card:hover{transform:translateY(-4px);}
    .related .card .thumb{aspect-ratio:16/10; background:var(--bg-2); position:relative; overflow:hidden;}
    .related .card .thumb::after{content:"thumb"; position:absolute; inset:0; display:flex; align-items:center; justify-content:center; font-family:var(--mono); font-size:10px; letter-spacing:.2em; text-transform:uppercase; color:var(--ink-mute);}
    .related .card .info{padding:24px;}
    .related .card .info .date{font-family:var(--mono); font-size:10px; letter-spacing:.22em; text-transform:uppercase; color:var(--ink-mute); margin-bottom:10px;}
    .related .card .info h4{font-family:var(--serif-cn); font-weight:300; font-size:20px; line-height:1.2; letter-spacing:.01em;}

/* filter bar */
.filter { padding:48px 36px 24px; max-width:1600px; margin:0 auto; display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap; gap:16px;}
.filter .cats { display:flex; gap:8px; flex-wrap:wrap; font-size:12px; }
.filter .cats a{ padding:10px 18px; border:1px solid var(--line); font-family:var(--mono); letter-spacing:.18em; text-transform:uppercase; color:var(--ink-soft); transition:all .2s;}
.filter .cats a:hover{ background:var(--ink); color:var(--bg); border-color:var(--ink);}
.filter .cats a.on{ background:var(--ink); color:var(--bg); border-color:var(--ink);}
.filter .count { font-family:var(--mono); font-size:10px; letter-spacing:.22em; text-transform:uppercase; color:var(--ink-mute);}

/* product grid */
.product-grid{padding:24px 0 100px;}
.product-grid .grid{grid-template-columns:repeat(3, 1fr); gap:24px;}
.product-card{display:block; background:var(--bg); transition:transform .25s;}
.product-card:hover{transform:translateY(-4px);}
.product-card .frame{aspect-ratio:4/5; position:relative; background:#dcd5c4; background-image:repeating-linear-gradient(135deg, rgba(31,34,24,.05) 0 1px, transparent 1px 22px), radial-gradient(90% 70% at 35% 30%, #ece5d2 0%, #c9c0aa 100%); overflow:hidden;}
.product-card .frame .badge{position:absolute; top:16px; left:16px; font-family:var(--mono); font-size:10px; letter-spacing:.22em; text-transform:uppercase; color:rgba(31,34,24,.6);}
.product-card .frame .status{position:absolute; top:16px; right:16px; font-family:var(--mono); font-size:10px; letter-spacing:.18em; text-transform:uppercase; padding:4px 10px; background:var(--ink); color:var(--bg);}
.product-card .frame .status.sold{background:rgba(31,34,24,.2); color:var(--ink);}
.product-card .info{padding:24px 0 12px;}
.product-card .info .id {font-family:var(--mono); font-size:12px; letter-spacing:.22em; text-transform:uppercase; color:var(--ink-mute); margin-bottom:8px;}
.product-card .info h3 {font-family:var(--serif-cn); font-weight:300; font-size:26px; line-height:1.2; letter-spacing:.02em; margin-bottom:6px;}
.product-card .info .meta { font-family:var(--mono); font-size:12px; letter-spacing:.18em; text-transform:uppercase; color:var(--ink-mute); margin-bottom:16px;}
.product-card .info .foot{display:flex; justify-content:space-between; align-items:center;}
.product-card .info .price{font-family:var(--serif-en); font-style:italic; font-size:28px; color:var(--ink); line-height:1;}
.product-card .info .price small{font-family:var(--mono); font-style:normal; font-size:10px; color:var(--ink-mute); letter-spacing:.2em; margin-left:6px; text-transform:uppercase;}
.product-card .info .btn-small{padding:8px 14px; border:1px solid var(--line); font-family:var(--mono); font-size:10px; letter-spacing:.18em; text-transform:uppercase; color:var(--ink-soft); transition:all .2s;}
.product-card:hover .info .btn-small{background:var(--ink); color:var(--bg); border-color:var(--ink);}

/* product hero */
    .product-hero{padding:120px 0 80px;}
    .product-hero .grid{align-items:start;}
    .product-hero .gallery{grid-column:1 / span 7;}
    .product-hero .gallery .main{aspect-ratio:4/5; position:relative; background:#dcd5c4; background-image:repeating-linear-gradient(135deg, rgba(31,34,24,.05) 0 1px, transparent 1px 22px), radial-gradient(90% 70% at 35% 30%, #ece5d2 0%, #c9c0aa 100%); overflow:hidden;}
    .product-hero .gallery .main::after{content:"product still life · 茶罐"; position:absolute; left:20px; bottom:20px; font-family:var(--mono); font-size:10px; letter-spacing:.2em; text-transform:uppercase; color:rgba(31,34,24,.45);}


.product-hero .detail {grid-column:9 / span 4; padding-top:24px;}
.product-hero .detail .id {font-family:var(--mono); font-size:12px; letter-spacing:.22em; text-transform:uppercase; color:var(--ink-mute); margin-bottom:14px;}
.product-hero .detail h1{ font-family:var(--serif-cn); font-weight:300; font-size:clamp(32px,4vw,56px); line-height:1.05; letter-spacing:.02em; margin-bottom:10px;}
.product-hero .detail .meta {font-family:var(--mono); font-size:12px; letter-spacing:.18em; text-transform:uppercase; color:var(--ink-mute); margin-bottom:36px;}
.product-hero .detail .price { font-family:var(--serif-en); font-style:italic; font-weight:300; font-size:64px; line-height:1; color:var(--ink); margin-bottom:60px;}
.product-hero .detail .price small{font-family:var(--mono); font-style:normal; font-size:11px; color:var(--ink-mute); letter-spacing:.22em; margin-left:14px; vertical-align:top; text-transform:uppercase;}
    .product-hero .detail .opts{display:flex; gap:8px; flex-wrap:wrap; margin-bottom:24px;}
    .product-hero .detail .opt{padding:10px 18px; border:1px solid var(--line); font-family:var(--mono); font-size:11px; letter-spacing:.18em; text-transform:uppercase; color:var(--ink-soft); cursor:pointer; transition:all .2s;}
    .product-hero .detail .opt.on{background:var(--ink); color:var(--bg); border-color:var(--ink);}
    .product-hero .detail .actions{display:flex; gap:14px; margin-bottom:48px;}
    .product-hero .detail .btn{
      --c:var(--ink);
      display:inline-flex; align-items:center; gap:14px;
      padding:16px 28px; border:1px solid var(--c); color:var(--c);
      font-family:var(--mono); font-size:12px; letter-spacing:.22em; text-transform:uppercase;
      background:transparent; cursor:pointer; border-radius:0;
      transition:background .25s, color .25s;
    }
    .product-hero .detail .btn:hover{background:var(--c); color:var(--bg);}
    .product-hero .detail .btn.primary{background:var(--ink); color:var(--bg);}
    .product-hero .detail .btn.primary:hover{background:var(--ink-soft);}

    /* specs table */
    .specs-table{margin-bottom:48px;}
    .specs-table .row{display:flex; justify-content:space-between; padding:14px 0; border-bottom:1px solid var(--line); font-family:var(--serif-cn); font-size:15px; color:var(--ink-soft);}
    .specs-table .row .k{font-family:var(--mono); font-size:10px; letter-spacing:.2em; text-transform:uppercase; color:var(--ink-mute);}
    .specs-table .row .v{font-family:var(--serif-cn); font-size:15px; color:var(--ink);}

    /* tabs */
    .product-tabs{padding:0 0 100px;}
    .product-tabs .tab-bar{display:flex; gap:0; border-bottom:1px solid var(--line); max-width:1600px; margin:0 auto 48px; padding:0 36px;}
    .product-tabs .tab-bar a {padding:14px 24px; font-family:var(--mono); font-size:12px; letter-spacing:.18em; text-transform:uppercase; color:var(--ink-mute); border-bottom:1px solid transparent; margin-bottom:-1px; transition:all .2s;}
    .product-tabs .tab-bar a.on{color:var(--ink); border-bottom-color:var(--ink);}
    .product-tabs .tab-content{max-width:1600px; margin:0 auto; padding:0 36px;}
    .product-tabs .tab-content h3{font-family:var(--serif-cn); font-weight:300; font-size:28px; line-height:1.2; letter-spacing:.02em; margin-bottom:24px;}
    .product-tabs .tab-content h3 .en{font-family:var(--serif-en); font-style:italic; font-size:.65em; color:var(--ink-mute); margin-left:10px; letter-spacing:.04em;}
    .product-tabs .tab-content p{font-family:var(--serif-cn); font-weight:300; font-size:16px; line-height:2; color:var(--ink-soft); letter-spacing:.02em; margin-bottom:20px; max-width:720px;}
    .product-tabs .tab-content .image-row{display:grid; grid-template-columns:repeat(3, 1fr); gap:24px; margin:36px 0;}
    .product-tabs .tab-content .image-row .img{aspect-ratio:4/3; background:var(--bg-2); position:relative; overflow:hidden;}
    .product-tabs .tab-content .image-row .img::after{content:"image"; position:absolute; inset:0; display:flex; align-items:center; justify-content:center; font-family:var(--mono); font-size:10px; letter-spacing:.2em; text-transform:uppercase; color:var(--ink-mute);}

    /* taste wheel inline */
    .taste-inline{display:grid; grid-template-columns:1fr 1fr; gap:0; border-top:1px solid var(--line); margin-top:36px;}
    .taste-inline .item{padding:18px 24px 18px 0; border-bottom:1px solid var(--line); display:flex; align-items:center; gap:18px;}
    .taste-inline .item .name{flex:1; font-family:var(--serif-cn); font-weight:300; font-size:18px;}
    .taste-inline .item .name .en{font-family:var(--serif-en); font-style:italic; font-size:.8em; color:var(--ink-mute); margin-left:8px;}
    .taste-inline .item .bar{flex:1; height:1px; background:var(--line); position:relative;}
    .taste-inline .item .bar::after{content:""; position:absolute; left:0; top:-1px; height:3px; background:var(--accent); width:var(--w,50%);}
    .taste-inline .item .pct{font-family:var(--mono); font-size:11px; color:var(--ink-mute); letter-spacing:.1em; width:40px; text-align:right;}

/* contact sections */
.contact-main{padding:120px 0 80px;}
.contact-main .grid{align-items:start;}
.contact-main .label{grid-column:1 / span 2; font-family:var(--mono); font-size:11px; letter-spacing:.22em; text-transform:uppercase; color:var(--ink-mute); line-height:2.1;}
.contact-main .info{grid-column:3 / span 5;}
.contact-main .info h2{font-family:var(--serif-cn); font-weight:300; font-size:clamp(32px,4vw,56px); line-height:1.1; letter-spacing:.01em; margin-bottom:36px;}
.contact-main .info h2 .en{font-family:var(--serif-en); font-style:italic; font-size:.5em; color:var(--ink-mute); display:block; margin-top:8px; letter-spacing:.04em;}

.contact-block{margin-bottom:48px;}
.contact-block .eyebrow{margin-bottom:14px;}
.contact-block .value{font-family:var(--serif-cn); font-weight:300; font-size:22px; line-height:1.6; color:var(--ink); letter-spacing:.02em;}
.contact-block .value a:hover{color:var(--accent);}
.contact-block .note{font-family:var(--serif-cn); font-size:14px; color:var(--ink-mute); margin-top:6px;}

.contact-hours{grid-column:9 / span 4; padding:36px; background:var(--bg-2);}
.contact-hours h3{font-family:var(--serif-cn); font-weight:300; font-size:28px; margin-bottom:28px; letter-spacing:.04em;}
.contact-hours h3 .en{font-family:var(--serif-en); font-style:italic; font-size:.6em; color:var(--ink-mute); display:block; margin-top:6px; letter-spacing:.04em;}
.contact-hours .row{display:flex; justify-content:space-between; padding:12px 0; border-bottom:1px solid var(--line); font-family:var(--serif-cn); font-size:15px; color:var(--ink-soft);}
.contact-hours .row .day{font-family:var(--mono); font-size:10px; letter-spacing:.2em; text-transform:uppercase; color:var(--ink-mute);}

/* map / location */
.location{padding:80px 0 120px; background:var(--bg-2);}
.location .grid{align-items:center;}
.location .text{grid-column:1 / span 5;}
.location .text h2{font-family:var(--serif-cn); font-weight:300; font-size:clamp(32px,4vw,56px); line-height:1.1; letter-spacing:.01em; margin-bottom:28px;}
.location .text h2 .en{font-family:var(--serif-en); font-style:italic; font-size:.5em; color:var(--ink-mute); display:block; margin-top:8px; letter-spacing:.04em;}
.location .text p{margin-bottom:18px;}
.location .text .coords{font-family:var(--mono); font-size:11px; letter-spacing:.18em; text-transform:uppercase; color:var(--ink-mute); margin-top:24px;}
.location .map{grid-column:7 / span 6; aspect-ratio:4/3; background:var(--bg); position:relative; overflow:hidden;}
.location .map::after{content:"map placeholder · 地图占位"; position:absolute; inset:0; display:flex; align-items:center; justify-content:center; font-family:var(--mono); font-size:10px; letter-spacing:.2em; text-transform:uppercase; color:var(--ink-mute);}

/* social */
.social{padding:100px 0;}
.social .head{padding:0 36px 48px; max-width:1600px; margin:0 auto;}
.social .head h2{font-family:var(--serif-cn); font-weight:300; font-size:clamp(32px,4vw,56px); line-height:1.1; letter-spacing:.01em;}
.social .head h2 .en{font-family:var(--serif-en); font-style:italic; font-size:.5em; color:var(--ink-mute); display:block; margin-top:8px; letter-spacing:.04em;}
.social .grid{grid-template-columns:repeat(4, 1fr); gap:0; border-top:1px solid var(--line);}
.social .item{padding:36px 28px 28px 0; border-right:1px solid var(--line); min-height:200px; display:flex; flex-direction:column;}
.social .item:last-child{border-right:0;}
.social .item .name{font-family:var(--serif-cn); font-weight:400; font-size:22px; margin-bottom:10px; letter-spacing:.04em;}
.social .item .handle{font-family:var(--mono); font-size:11px; letter-spacing:.18em; text-transform:uppercase; color:var(--ink-mute); margin-bottom:auto;}
.social .item .desc{font-family:var(--serif-cn); font-size:14px; line-height:1.7; color:var(--ink-soft); margin-top:18px;}

/* ------------- FOOTER ------------- */
footer {padding:80px 36px 36px;background:var(--bg);border-top:1px solid var(--line);}
footer .top {display:grid;grid-template-columns:repeat(12,1fr);gap:24px;max-width:1600px;margin:0 auto;}
footer .brand {grid-column:1 / span 4;}
footer .brand .logo {font-family:var(--serif-cn);font-weight:300;font-size:48px;letter-spacing:.4em;line-height:1;}
footer .brand .en {font-family:var(--serif-en);font-style:italic;font-size:22px;color:var(--ink-mute);margin-top:14px;}
footer .brand p {margin-top:24px;max-width:340px;}
footer .col {grid-column:span 2;}
footer .col h5 {font-family:var(--mono);font-size:10px;letter-spacing:.22em;text-transform:uppercase;color:var(--ink-mute);margin-bottom:18px;}
footer .col a {display:block;font-family:var(--serif-cn);font-size:15px;color:var(--ink);padding:5px 0;letter-spacing:.02em;}
footer .col a:hover {color:var(--accent);}
footer .bot { display:flex; justify-content:space-between; align-items:end; margin-top:96px; padding-top:24px; border-top:1px solid var(--line); max-width:1600px; margin-left:auto; margin-right:auto; font-size:12px; text-transform:uppercase; color:var(--ink-mute);    letter-spacing: .05rem;}
footer .bot .big {font-family:var(--serif-cn);font-size:clamp(80px,18vw,260px);color:var(--ink);letter-spacing:.5em;line-height:.8;text-transform:none;opacity:.9;}    

/* ------------- THEME VARIANTS ------------- */
body.theme-ash {--bg:#e8e6e0;--bg-2:#dcd9d1;--ink:#1a1a18;--ink-soft:#46453f;--ink-mute:#8c8b83;--line:rgba(26,26,24,.16);--accent:#4a5a52;--paper:#f5f3ee;}
body.theme-mist {--bg:#eef0ec;--bg-2:#e1e5dd;--ink:#1f261d;--ink-soft:#3d4639;--ink-mute:#7e857a;--line:rgba(31,38,29,.16);--accent:#5c6a4a;--paper:#f6f8f3;}
body.theme-paper {--bg:#f6f1e6;--bg-2:#ece5d2;--ink:#2a1f12;--ink-soft:#5b4d3a;--ink-mute:#9b8d75;--line:rgba(42,31,18,.16);--accent:#7a5c3a;--paper:#fbf6ea;}    

/* density */
body.dense .intro{padding:120px 0 100px;}
body.dense .origin, body.dense .ritual, body.dense .quote, body.dense .cta,
body.dense .notes, body.dense .product{padding-top:100px; padding-bottom:100px;}
body.airy .intro{padding:200px 0 180px;}
body.airy .origin, body.airy .ritual, body.airy .quote, body.airy .cta,
body.airy .notes, body.airy .product{padding-top:200px; padding-bottom:200px;}

/* type variants */
body.type-sans .h-display, body.type-sans .intro .big h1,
body.type-sans .product .copy h2, body.type-sans .origin .title h3,
body.type-sans .ritual .head h3, body.type-sans .notes .title h3,
body.type-sans .cta .l h3{font-family:var(--sans); font-weight:300; letter-spacing:-.02em;}

/* hero variants */
body.hero-split .hero{height:88vh; min-height:680px; padding:36px;}
body.hero-split .hero .photo{left:50%; right:0; inset-block:36px; inset-inline-end:36px;}
body.hero-split .hero .photo{inset:36px 36px 36px 50%;}
body.hero-split .hero::before{
    content:"山 言"; position:absolute; left:36px; top:50%; transform:translateY(-50%);
    font-family:var(--serif-cn); font-weight:300;
    font-size:clamp(80px, 14vw, 220px); letter-spacing:.4em; color:var(--ink); line-height:1;
}
body.hero-split .hero .vert-num{display:none;}
body.hero-split .hero .photo::after{color:rgba(244,241,234,.45);}
body.hero-inset .hero{padding:96px 36px 36px;}
body.hero-inset .hero .photo{inset:96px 36px 36px;}
body.hero-inset .nav{mix-blend-mode:normal; color:var(--ink);}

/* mobile-ish */
@media (max-width:900px){
    .nav{padding:18px 20px; grid-template-columns:1fr 1fr;}
    .nav .left{display:none;}
    .grid{padding:0 20px;}
    .intro .id{grid-column:1 / -1;}
    .intro .big{grid-column:1 / -1;}
    .intro .side{grid-column:1 / -1;}
    .product .frame{grid-column:1 / -1;}
    .product .copy{grid-column:1 / -1;}
    .origin .title, .origin .text{grid-column:1 / -1;}
    .origin .stats{grid-template-columns:repeat(2,1fr);}
    .origin .stats > div:nth-child(2){border-right:0;}
    .ritual .steps{grid-template-columns:1fr 1fr;}
    .notes .title, .notes .wheel{grid-column:1 / -1;}
    .quote .mark{grid-column:1 / -1;}
    .quote blockquote, .quote cite{grid-column:1 / -1;}
    .cta .l, .cta .r{grid-column:1 / -1;}
    footer .brand{grid-column:1 / -1;}
    footer .col{grid-column:span 6;}
}