*,*::before,*::after{box-sizing:border-box}

:root{
  --cream:#FAFCF9;
  --cream-2:#EFF5EF;
  --sand:#E3EDE3;
  --ink:#1F221B;
  --ink-2:#545A4B;
  --ink-3:#66735F;
  --sage:#3E8E5A;
  --sage-deep:#24573A;
  --sage-soft:#DDF0E2;
  --terra:#C98B68;
  --terra-ink:#9E5F3C; /* 浅底文字用的深色版，保证 ≥4.5 对比度 */
  --line:#D9E7DC;
  --line-2:#C9DAC9;
  --serif:"Iowan Old Style","Palatino Linotype",Palatino,"Book Antiqua",Georgia,"Songti SC",serif;
  --sans:"Inter","Helvetica Neue",Helvetica,Arial,"PingFang SC","Microsoft YaHei",sans-serif;
  --max:1220px;
  --ease:cubic-bezier(.22,.68,.16,1);
}

html{scroll-behavior:smooth}
section[id]{scroll-margin-top:100px}
body{
  margin:0;background:var(--cream);color:var(--ink);
  font-family:var(--sans);font-size:16px;line-height:1.62;
  -webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;
}
img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit;cursor:pointer;background:none;border:0;padding:0}
::selection{background:var(--sage-soft)}

.wrap{max-width:var(--max);margin:0 auto;padding:0 32px}
.section{padding:clamp(4.5rem,9vw,7.5rem) 0}
.section--tight{padding:clamp(3rem,6vw,4.5rem) 0}
.rule{height:1px;background:var(--line);border:0;margin:0}

/* type */
.eyebrow{
  font-size:.68rem;letter-spacing:.24em;text-transform:uppercase;
  color:var(--ink-3);margin:0 0 1.1rem;font-weight:500;
}
.eyebrow--dark{color:var(--sage-deep)}
.display{
  font-family:var(--serif);font-weight:400;line-height:1.02;
  letter-spacing:-.022em;font-size:clamp(2.5rem,5vw,4.5rem);margin:0;
}
.h2{
  font-family:var(--serif);font-weight:400;line-height:1.1;
  letter-spacing:-.015em;font-size:clamp(1.85rem,3.3vw,2.75rem);margin:0;
}
.h3{font-family:var(--serif);font-weight:400;font-size:1.32rem;line-height:1.3;margin:0}
.lede{font-size:1.05rem;line-height:1.72;color:var(--ink-2);max-width:54ch;margin:1.4rem 0 0}
.small{font-size:.8rem;letter-spacing:.06em;color:var(--ink-3);margin:0}
.serif{font-family:var(--serif)}
.mono{font-variant-numeric:tabular-nums}

/* header */
.site-header{
  position:sticky;top:0;z-index:80;
  background:rgba(250,252,249,.92); /* = --cream 的 92% 不透明版，给不支持 color-mix 的浏览器兜底 */
  background:color-mix(in srgb,var(--cream) 88%,transparent);
  backdrop-filter:blur(14px) saturate(120%);
  border-bottom:1px solid var(--line);
}
.header-inner{display:flex;align-items:center;justify-content:space-between;height:76px;gap:24px}
.logo{
  display:inline-flex;align-items:center;gap:.6em;line-height:1;
  font-family:var(--serif);font-size:1.05rem;letter-spacing:.42em;
  text-transform:uppercase;white-space:nowrap;
}
/* Outlined droplet, same geometry as the favicon. Sized in em so it tracks the
   font size; nudged down a hair so its optical centre meets the cap centre of
   the serif caps, not the centre of the line box. */
.logo-mark{
  flex:none;height:1.22em;width:auto;color:var(--sage-deep);
  margin-top:-.015em;overflow:visible;
}
.site-nav{display:flex;align-items:center;gap:34px}
.site-nav a{
  font-size:.78rem;letter-spacing:.13em;text-transform:uppercase;
  color:var(--ink-2);position:relative;padding:6px 0;transition:color .3s var(--ease);
}
.site-nav a::after{
  content:"";position:absolute;left:0;bottom:0;height:1px;width:0;
  background:var(--ink);transition:width .4s var(--ease);
}
.site-nav a:hover{color:var(--ink)}
.site-nav a:hover::after,.site-nav a[aria-current="page"]::after{width:100%}
.site-nav a[aria-current="page"]{color:var(--ink)}
.header-utils{display:flex;align-items:center;gap:20px}
.bag{font-size:.78rem;letter-spacing:.13em;text-transform:uppercase;color:var(--ink-2)}
.nav-toggle{display:none;width:38px;height:38px;border:1px solid var(--line-2);border-radius:999px;align-items:center;justify-content:center}
.nav-toggle span{display:block;width:15px;height:1px;background:var(--ink);position:relative}
.nav-toggle span::before,.nav-toggle span::after{content:"";position:absolute;left:0;width:15px;height:1px;background:var(--ink)}
.nav-toggle span::before{top:-4px}.nav-toggle span::after{top:4px}

/* buttons */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:.65rem;
  padding:1rem 1.75rem;border-radius:999px;border:1px solid transparent;
  font-size:.76rem;letter-spacing:.14em;text-transform:uppercase;font-weight:500;
  transition:background .3s var(--ease),color .3s var(--ease),border-color .3s var(--ease),transform .3s var(--ease);
}
.btn:hover{transform:translateY(-1px)}
.btn--primary{background:var(--sage-deep);color:#EAF6EE}
.btn--primary:hover{background:#1D4630}
.btn--ghost{border-color:rgba(31,34,27,.24);color:var(--ink)}
.btn--ghost:hover{background:var(--sand);border-color:transparent}
.btn--wide{width:100%}
.link-arrow{
  display:inline-flex;align-items:center;gap:.5rem;font-size:.76rem;
  letter-spacing:.14em;text-transform:uppercase;border-bottom:1px solid var(--line-2);
  padding-bottom:4px;transition:border-color .3s var(--ease),gap .3s var(--ease);
}
.link-arrow:hover{border-color:var(--ink);gap:.8rem}

/* hero -- shared by the home page (VIEWS.home) and the top of About
   (VIEWS.about); it carries padding only, so both agree on vertical rhythm. */
.hero{padding:clamp(3rem,6vw,5rem) 0 clamp(3.5rem,7vw,6rem)}

/* Home-page hero only. VIEWS.about uses .hero too, and putting this on the base
   class would also have hung the photograph behind the About page's opening
   lines -- measured before the fix: about.html did show it. So the artwork is a
   modifier rather than part of .hero.

   Two layers: the photograph, then a cream veil that starts transparent and
   goes solid over the last 18% so the picture dissolves into the page instead
   of ending on a hard band. They carry separate background-size values on
   purpose -- the veil is 100% 100% so it always tracks the box (the hero is
   716px tall on a desktop and 1047px on a phone) while the photograph is
   `cover` and crops freely.

   The veil's transparent end is rgba(cream,0), not the keyword `transparent`,
   otherwise the gradient interpolates towards transparent black and greys out. */
.hero--photo{
  background-color:var(--cream);
  background-image:
    linear-gradient(to bottom, rgba(250,252,249,0) 82%, var(--cream) 100%),
    url(../img/hero-wall.jpg);
  background-size:100% 100%,cover;
  background-position:center,center top;
  background-repeat:no-repeat;
}
.hero-grid{display:grid;grid-template-columns:1.02fr .98fr;gap:clamp(2rem,5vw,5rem);align-items:end}

/* Small labels take the deep green while they are on the photograph.
   Measured on the photo they render against (not on the page cream), the muted
   grey --ink-3 only reaches 3.8:1 on the eyebrow and 3.6:1 on the stat labels,
   where it clears 4.87:1 on plain cream. Washing the picture out instead would
   take roughly a 70% cream veil -- most of the photograph gone -- so the labels
   move to the brand green instead: same visual role, 6.3:1 and 5.2:1 measured
   at their worst pixel. Scoped to .hero--photo so no other page shifts: About
   reuses .hero, and the two occurrences of .hero-meta on the collection pages
   sit outside .hero entirely, so those keep grey on cream at 4.87:1. */
.hero--photo .eyebrow,
.hero--photo .hero-meta div{color:var(--sage-deep)}

.hero-copy{max-width:540px}
.hero-actions{display:flex;gap:14px;margin-top:2.4rem;flex-wrap:wrap}
.hero-meta{display:flex;gap:28px;margin-top:3rem;padding-top:1.6rem;border-top:1px solid var(--line)}
.hero-meta div{font-size:.74rem;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-3)}
.hero-meta strong{display:block;font-family:var(--serif);font-size:1.2rem;letter-spacing:0;text-transform:none;color:var(--ink);font-weight:400;margin-top:2px}

.palette{display:flex;flex-direction:column;height:clamp(400px,46vw,540px);border:1px solid var(--line-2);background:var(--cream-2)}
.palette-row{
  flex:1;display:flex;align-items:center;justify-content:space-between;
  padding:0 clamp(1rem,2.2vw,1.8rem);border-bottom:1px solid rgba(31,34,27,.08);
  transition:flex .55s var(--ease);overflow:hidden;
}
.palette-row:last-child{border-bottom:0}
.palette:hover .palette-row{flex:.78}
.palette .palette-row:hover{flex:1.7}
.palette-row .pl-name{font-family:var(--serif);font-size:1.15rem;letter-spacing:.01em}
.palette-row .pl-no{font-size:.66rem;letter-spacing:.2em;color:rgba(31,34,27,.5);white-space:nowrap}

/* strip */
.strip{border-top:1px solid var(--line);border-bottom:1px solid var(--line);background:var(--cream-2)}
.strip-inner{display:flex;flex-wrap:wrap;justify-content:center;gap:14px 26px;padding:18px 0;font-size:.7rem;letter-spacing:.2em;text-transform:uppercase;color:var(--ink-3)}
.strip-inner i{font-style:normal;color:var(--line-2)}

/* section head */
.section-head{display:flex;justify-content:space-between;align-items:flex-end;gap:32px;margin-bottom:clamp(2.2rem,4vw,3.4rem)}
.section-head p{margin:.9rem 0 0}

/* grids */
.grid-4{display:grid;grid-template-columns:repeat(4,1fr);gap:34px 26px}
.grid-3{display:grid;grid-template-columns:repeat(3,1fr);gap:34px 26px}
.grid-2{display:grid;grid-template-columns:repeat(2,1fr);gap:clamp(2rem,4vw,3.5rem)}

/* swatch / art block */
.swatch{
  position:relative;aspect-ratio:4/5;display:grid;place-items:center;overflow:hidden;
  border:1px solid rgba(31,34,27,.07);transition:transform .7s var(--ease);
}
.swatch::after{content:"";position:absolute;inset:11px;border:1px solid rgba(255,255,255,.55);pointer-events:none}
.swatch svg{width:44%;height:auto;opacity:.5}
.swatch .sw-label{position:absolute;left:16px;bottom:13px;font-size:.58rem;letter-spacing:.22em;text-transform:uppercase;color:rgba(31,34,27,.5)}
.swatch--wide{aspect-ratio:16/10}
.swatch--tall{aspect-ratio:3/4}

/* product card */
/* Heldengrün-style white cards on the cream page: thin border, soft lift on hover */
.card{
  display:flex;flex-direction:column;color:inherit;
  background:#fff;border:1px solid var(--line);border-radius:2px;
  padding:14px 14px 16px;
  transition:border-color .35s var(--ease),box-shadow .35s var(--ease);
}
.card:hover{border-color:var(--line-2);box-shadow:0 18px 36px -24px rgba(31,34,27,.25)}
.card:hover .swatch{transform:translateY(-6px)}
.card .swatch{border-radius:2px}
.card-body{display:flex;flex-direction:column;flex:1;padding-top:14px}
.card-top{display:flex;justify-content:space-between;align-items:baseline;gap:16px}
.card-body .h3{font-size:1.22rem}
.card-note{font-size:.78rem;letter-spacing:.04em;color:var(--ink-3);margin:6px 0 0}
.card-note--dim{font-size:.74rem;color:var(--ink-3);opacity:.85}
.card-price{font-size:.86rem;color:var(--ink-2);white-space:nowrap}
.swatch--machine svg{width:40%}

/* split block */
.split{display:grid;grid-template-columns:1fr 1fr;gap:clamp(2rem,5vw,4.5rem);align-items:center}
.split--reverse .split-media{order:2}
.stack{display:flex;flex-direction:column;gap:1.1rem}

/* steps */
.steps{counter-reset:step;display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(1.6rem,3.5vw,3rem)}
.step{border-top:1px solid var(--line-2);padding-top:1.4rem}
.step::before{
  counter-increment:step;content:"0" counter(step);
  display:block;font-size:.66rem;letter-spacing:.24em;color:var(--ink-3);margin-bottom:1.4rem;
}
.step h3{margin:0 0 .5rem;font-family:var(--serif);font-weight:400;font-size:1.2rem}
.step p{margin:0;font-size:.92rem;color:var(--ink-2);line-height:1.7}

/* note box */
.note-box{
  border:1px solid var(--line-2);background:var(--cream-2);
  padding:clamp(1.8rem,3.5vw,3rem);display:grid;grid-template-columns:auto 1fr;gap:clamp(1.4rem,3vw,2.6rem);align-items:start;
}
.note-box .nb-tag{font-size:.64rem;letter-spacing:.22em;text-transform:uppercase;color:var(--terra-ink);white-space:nowrap;padding-top:6px}
.note-box p{margin:0;font-size:.95rem;color:var(--ink-2);max-width:62ch}

/* newsletter */
.subscribe{display:block;margin:1.8rem auto 0;max-width:430px;text-align:left}
/* `display:block` above would otherwise beat the UA rule for [hidden] */
.subscribe[hidden]{display:none}
.subscribe-row{display:flex;gap:10px}
.subscribe input[type="email"]{
  flex:1;min-width:0;background:transparent;border:1px solid var(--line-2);border-radius:999px;
  padding:.95rem 1.2rem;font-size:.85rem;color:var(--ink);outline:none;transition:border-color .3s;
}
.subscribe input[type="email"]::placeholder{color:var(--ink-3)}
.subscribe input[type="email"]:focus{border-color:var(--sage)}
.subscribe input[type="email"][aria-invalid="true"]{border-color:var(--terra-ink)}
.consent{
  display:flex;gap:.55rem;align-items:flex-start;margin-top:.9rem;
  font-size:.76rem;line-height:1.5;color:var(--ink-2);cursor:pointer;
}
.consent input{flex:none;width:14px;height:14px;margin-top:.2rem;accent-color:var(--sage-deep)}
.consent a{color:var(--terra-ink);text-decoration:underline}
.sub-err{margin:.6rem 0 0;font-size:.76rem;line-height:1.4;color:var(--terra-ink)}
.sub-err:empty{margin:0}
.hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.sub-done{margin:1.8rem auto 0;max-width:430px}
.sub-done[hidden]{display:none}
.sub-done__title{font-family:var(--serif);font-size:1.2rem;margin:0 0 .45rem}
.sub-done__body{font-size:.85rem;line-height:1.6;color:var(--ink-2);margin:0}
.sub-done__body a{color:var(--terra-ink);text-decoration:underline;text-underline-offset:2px}

/* footer */
.site-footer{background:#1F4B32;color:#CBE0CD;padding:clamp(3.5rem,7vw,5.5rem) 0 2rem;margin-top:0}
.foot-grid{display:grid;grid-template-columns:1.5fr 1fr 1fr 1fr 1fr;gap:clamp(1.6rem,3vw,2.6rem)}
.site-footer .logo{color:#EAF6EE;font-size:.95rem}
.site-footer .logo-mark{color:#9CB69C}
.site-footer p{color:#A9C2A9;font-size:.88rem;line-height:1.7;max-width:34ch}
.foot-col h4{font-size:.64rem;letter-spacing:.22em;text-transform:uppercase;color:#9CB69C;margin:0 0 1.2rem;font-weight:500}
.foot-col a{display:block;font-size:.86rem;color:#CBE0CD;padding:5px 0;transition:color .25s}
.foot-col a:hover{color:#EAF6EE}
.foot-bottom{
  display:flex;justify-content:space-between;gap:20px;flex-wrap:wrap;
  margin-top:clamp(3rem,6vw,4.5rem);padding-top:1.6rem;border-top:1px solid rgba(243,240,228,.14);
  font-size:.72rem;letter-spacing:.08em;color:#9CB69C;
}

/* breadcrumb */
.crumbs{display:flex;gap:10px;align-items:center;font-size:.72rem;letter-spacing:.12em;text-transform:uppercase;color:var(--ink-3);padding:2rem 0 0}
.crumbs a:hover{color:var(--ink)}
.crumbs span{color:var(--line-2)}

/* pdp */
.pdp{display:grid;grid-template-columns:1.08fr .92fr;gap:clamp(2rem,4.5vw,4.5rem);align-items:start;padding:clamp(2rem,4vw,3.5rem) 0 0}
.pdp-gallery{display:grid;grid-template-columns:1fr;gap:14px;align-items:start}
.pdp-thumbs{display:flex;flex-direction:column;gap:10px}
.pdp-thumbs button{aspect-ratio:1;border:1px solid var(--line);position:relative;overflow:hidden;transition:border-color .3s}
.pdp-thumbs button[aria-pressed="true"]{border-color:var(--ink)}
.pdp-thumbs button span{position:absolute;inset:8px;background:currentColor;opacity:.25}
.pdp-main .swatch{aspect-ratio:1/1}
.pdp-info{padding-top:.4rem}
.pdp-price{display:flex;align-items:baseline;gap:14px;margin:1.1rem 0 1.6rem}
.pdp-price .amount{font-family:var(--serif);font-size:1.6rem}
.pdp-price .size{font-size:.8rem;letter-spacing:.06em;color:var(--ink-3)}
.pdp-desc{font-size:.98rem;line-height:1.75;color:var(--ink-2);margin:0 0 1.8rem;max-width:46ch}
.in-box{border-top:1px solid var(--line);border-bottom:1px solid var(--line);padding:1.2rem 0;margin-bottom:1.6rem}
.in-box h4{font-size:.64rem;letter-spacing:.22em;text-transform:uppercase;color:var(--ink-3);margin:0 0 .9rem;font-weight:500}
.in-box ul{list-style:none;margin:0;padding:0;display:grid;gap:.55rem}
.in-box li{display:flex;justify-content:space-between;gap:16px;font-size:.88rem;color:var(--ink-2)}
.in-box li em{font-style:normal;color:var(--ink-3);font-size:.8rem}
.buy-row{display:flex;gap:12px;align-items:stretch}
.qty{display:flex;align-items:center;border:1px solid var(--line-2);border-radius:999px;padding:0 6px}
.qty button{width:34px;height:46px;font-size:1rem;color:var(--ink-2)}
.qty span{min-width:24px;text-align:center;font-size:.9rem}
.pdp-note{font-size:.76rem;color:var(--ink-3);margin-top:1rem;letter-spacing:.04em}

/* accordion */
.acc{border-top:1px solid var(--line);margin-top:2rem}
.acc details{border-bottom:1px solid var(--line)}
.acc summary{
  list-style:none;display:flex;justify-content:space-between;align-items:center;gap:16px;
  padding:1.15rem 0;font-size:.82rem;letter-spacing:.1em;text-transform:uppercase;cursor:pointer;
}
.acc summary::-webkit-details-marker{display:none}
.acc summary::after{content:"+";font-size:1rem;color:var(--ink-3);transition:transform .3s var(--ease)}
.acc details[open] summary::after{content:"–"}
.acc .acc-body{padding:0 0 1.5rem;font-size:.92rem;line-height:1.75;color:var(--ink-2);max-width:60ch}
.acc .acc-body p{margin:0 0 .8rem}
.acc .acc-body p:last-child{margin-bottom:0}

/* pyramid */
.pyramid{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(1.4rem,3vw,2.6rem);border-top:1px solid var(--line-2);padding-top:2rem}
.pyramid div{border-left:1px solid var(--line);padding-left:1.2rem}
.pyramid div:first-child{border-left:0;padding-left:0}
.pyramid h4{font-size:.62rem;letter-spacing:.22em;text-transform:uppercase;color:var(--ink-3);margin:0 0 .6rem;font-weight:500}
.pyramid p{font-family:var(--serif);font-size:1.12rem;line-height:1.5;margin:0}

/* chips */
.chips{display:flex;gap:10px;flex-wrap:wrap;margin:2rem 0 2.6rem}
.chip{
  border:1px solid var(--line-2);border-radius:999px;padding:.62rem 1.15rem;
  font-size:.72rem;letter-spacing:.13em;text-transform:uppercase;color:var(--ink-2);
  transition:all .3s var(--ease);
}
.chip:hover{border-color:var(--ink);color:var(--ink)}
.chip[aria-pressed="true"]{background:var(--sage-deep);border-color:var(--sage-deep);color:#EAF6EE}

/* spec table */
.table-wrap{overflow-x:auto;border-top:1px solid var(--line-2)}
table.spec{width:100%;border-collapse:collapse;font-size:.88rem;min-width:640px}
table.spec th,table.spec td{padding:1.05rem 1.1rem;text-align:left;border-bottom:1px solid var(--line);vertical-align:top}
table.spec thead th{font-size:.64rem;letter-spacing:.2em;text-transform:uppercase;color:var(--ink-3);font-weight:500;padding-top:1.6rem}
table.spec tbody th{font-weight:400;color:var(--ink-3);font-size:.78rem;letter-spacing:.04em;white-space:nowrap;width:190px}
table.spec td{color:var(--ink-2)}
table.spec tbody tr:hover{background:var(--cream-2)}
table.spec td strong{color:var(--ink);font-weight:500}

/* model card */
.model{border:1px solid var(--line-2);background:var(--cream);display:flex;flex-direction:column}
.model .swatch{border:0;border-bottom:1px solid var(--line-2)}
.model-body{padding:1.6rem 1.5rem 1.8rem;display:flex;flex-direction:column;gap:.9rem;flex:1}
.model-body .h3{font-size:1.28rem}
.model-specs{list-style:none;margin:0;padding:0;display:grid;gap:.45rem;font-size:.84rem;color:var(--ink-2)}
.model-specs li{display:flex;justify-content:space-between;gap:14px;border-bottom:1px dotted var(--line-2);padding-bottom:.45rem}
.model-specs li span:first-child{color:var(--ink-3)}
.model-foot{margin-top:auto;padding-top:1rem;display:flex;justify-content:space-between;align-items:center}
.model-foot .p{font-family:var(--serif);font-size:1.2rem}

/* quiz */
.quiz{border:1px solid var(--line-2);background:var(--cream-2);padding:clamp(1.8rem,4vw,3.4rem)}
.quiz-progress{display:flex;gap:6px;margin-bottom:2rem}
.quiz-progress i{height:2px;flex:1;background:var(--line-2);transition:background .4s}
.quiz-progress i.on{background:var(--sage)}
.quiz-q{font-family:var(--serif);font-size:clamp(1.35rem,2.4vw,1.8rem);margin:0 0 1.8rem;line-height:1.25}
.quiz-opts{display:grid;gap:10px;max-width:560px}
.quiz-opts button{
  text-align:left;border:1px solid var(--line-2);background:var(--cream);
  padding:1rem 1.2rem;font-size:.92rem;transition:all .3s var(--ease);
}
.quiz-opts button:hover{border-color:var(--ink);background:var(--sand)}
.quiz-result{display:none}
.quiz-result.on{display:block}
.quiz-result-grid{display:grid;grid-template-columns:180px 1fr;gap:2rem;align-items:center;margin-top:1.5rem}

/* pager */
.pager{display:flex;justify-content:space-between;align-items:center;gap:24px;border-top:1px solid var(--line);padding:2.4rem 0 0;margin-top:clamp(3rem,6vw,5rem)}
.pager a{display:flex;flex-direction:column;gap:.4rem}
.pager .lbl{font-size:.64rem;letter-spacing:.22em;text-transform:uppercase;color:var(--ink-3)}
.pager .val{font-family:var(--serif);font-size:1.3rem}
.pager a:hover .val{color:var(--sage)}

/* toast */
.toast{
  position:fixed;left:50%;bottom:28px;transform:translate(-50%,20px);
  background:#1F4B32;color:#EAF6EE;padding:.9rem 1.5rem;border-radius:999px;
  font-size:.8rem;letter-spacing:.06em;opacity:0;pointer-events:none;
  transition:opacity .35s var(--ease),transform .35s var(--ease);z-index:200;
}
.toast.on{opacity:1;transform:translate(-50%,0)}

/* reveal */
[data-reveal]{opacity:0;transform:translateY(20px);transition:opacity .9s var(--ease),transform .9s var(--ease)}
[data-reveal].in{opacity:1;transform:none}

/* prose */
.prose{max-width:66ch}
.prose p{font-size:1rem;line-height:1.8;color:var(--ink-2);margin:0 0 1.3rem}
.prose h3{font-family:var(--serif);font-weight:400;font-size:1.5rem;margin:2.4rem 0 .9rem}
.prose ul{padding-left:1.1rem;color:var(--ink-2);line-height:1.8}
.prose li{margin-bottom:.5rem}

/* announcement bar */
.announce{background:var(--sage-deep);color:#E4F2E8}
.announce-inner{
  display:flex;align-items:center;justify-content:center;min-height:38px;
  font-size:.72rem;letter-spacing:.12em;text-transform:uppercase;padding:0 32px;
}
.announce-inner a{display:flex;align-items:center;gap:.6rem;padding:9px 0;text-align:center}
.announce-inner a:hover{color:#fff}
.an-label{
  font-weight:500;color:#A9C8AE;border-right:1px solid rgba(237,239,230,.28);
  padding-right:.7rem;margin-right:.1rem;
}

/* photos replace the line-art placeholder in the same box */
/* real product photo: show the whole shot on white — never crop the pack */
.swatch img{width:100%;height:100%;object-fit:contain;display:block;padding:2%}
.swatch--photo{overflow:hidden;background:#fff}
.swatch--photo::after{content:none}
/* 场景照：铺满画框（不留白边、不缩进），用于首页/关于页的氛围大图 */
.swatch--cover img{object-fit:cover;padding:0}
.swatch--photo .sw-label{
  background:rgba(250,252,249,.88);color:#2A4636;
  left:0;bottom:0;padding:.36rem .7rem;letter-spacing:.18em;
}

/* product gallery thumbnails (only when a product has several photos) */
.pdp-gallery--thumbs{grid-template-columns:76px 1fr}
.pdp-thumbs button span{overflow:hidden;display:block}
.pdp-thumbs button img{width:100%;height:100%;object-fit:cover}
.pdp-thumbs button:hover{border-color:var(--sage)}

/* contact */
.contact-box{
  margin-top:2rem;border:1px solid var(--line);border-radius:2px;
  padding:1.4rem 1.6rem;background:var(--cream-2);
}
.cb-label{
  display:block;font-size:.62rem;letter-spacing:.24em;text-transform:uppercase;
  color:var(--ink-3);margin-bottom:.55rem;
}
.mail-link{
  font-family:var(--serif);font-size:clamp(1.15rem,2.2vw,1.5rem);letter-spacing:-.01em;
  color:var(--sage-deep);border-bottom:1px solid var(--line-2);padding-bottom:2px;
  transition:color .3s var(--ease),border-color .3s var(--ease);word-break:break-all;
}
.mail-link:hover{color:var(--terra-ink);border-color:var(--terra-ink)}
.foot-mail{
  display:inline-block;margin-top:1.1rem;font-size:.86rem;letter-spacing:.04em;
  color:#9CB69C;border-bottom:1px solid rgba(156,182,156,.45);padding-bottom:2px;
}
.foot-mail:hover{color:#E4F2E8;border-color:#E4F2E8}
.mail-link--inline{font-family:inherit;font-size:inherit;letter-spacing:inherit;color:var(--terra-ink)}
.mail-link--inline:hover{color:var(--sage-deep)}

/* language switcher */
.lang-select{
  appearance:none;-webkit-appearance:none;
  font-family:var(--sans);font-size:.74rem;letter-spacing:.14em;text-transform:uppercase;
  color:var(--ink-2);background:transparent;
  border:1px solid var(--line-2);border-radius:999px;
  padding:7px 30px 7px 14px;cursor:pointer;line-height:1.2;
  background-image:linear-gradient(45deg,transparent 50%,var(--ink-3) 50%),linear-gradient(135deg,var(--ink-3) 50%,transparent 50%);
  background-position:calc(100% - 16px) 52%,calc(100% - 11px) 52%;
  background-size:5px 5px,5px 5px;background-repeat:no-repeat;
  transition:border-color .3s var(--ease),color .3s var(--ease);
}
.lang-select:hover{border-color:var(--sage);color:var(--sage-deep)}
.lang-select:focus-visible{outline:2px solid var(--sage);outline-offset:2px}
.lang-select option{text-transform:none;letter-spacing:0;font-size:.86rem;color:var(--ink)}

/* card price placeholder */
.card-foot{margin:auto 0 0;padding-top:12px;display:flex;justify-content:space-between;align-items:baseline;gap:12px}
.card-price--soft{
  display:inline-block;font-size:.68rem;letter-spacing:.14em;text-transform:uppercase;
  color:var(--ink-3);border-bottom:1px solid var(--line-2);padding-bottom:2px;margin-left:auto;
  transition:color .3s var(--ease),border-color .3s var(--ease);
}
.card:hover .card-price--soft{color:var(--sage-deep);border-color:var(--sage)}

/* coming-soon tile (reserved slots) */
.tile-coming{
  border:1px dashed var(--line-2);border-radius:2px;
  padding:28px 24px;display:flex;flex-direction:column;justify-content:center;
  min-height:220px;background:#fff;
}
.tc-label{
  font-size:.6rem;letter-spacing:.24em;text-transform:uppercase;
  color:var(--terra-ink);margin-bottom:1rem;font-weight:500;
}
.tc-title{font-family:var(--serif);font-size:1.32rem;line-height:1.3;margin:0 0 .5rem;color:var(--ink)}
.tc-note{font-size:.82rem;line-height:1.65;color:var(--ink-3);margin:0}

/* spec list (product page, diffusers) */
.spec-list{border-top:1px solid var(--line);margin:0 0 1.6rem}
.spec-row{
  display:flex;justify-content:space-between;align-items:baseline;gap:20px;
  padding:.72rem 0;border-bottom:1px solid var(--line);font-size:.88rem;
}
.spec-row span{color:var(--ink-3);font-size:.76rem;letter-spacing:.1em;text-transform:uppercase;white-space:nowrap}
.spec-row strong{font-weight:500;color:var(--ink);text-align:right}

/* oil grid (product page, sets) */
.oil-grid{display:grid;grid-template-columns:1fr 1fr;gap:.5rem 1.4rem;margin:0}
.oil{display:flex;align-items:center;gap:.6rem;font-size:.88rem;color:var(--ink-2)}
.oil-dot{
  width:7px;height:7px;border-radius:50%;flex:0 0 7px;
  background:var(--sage);opacity:.55;
}

/* responsive */
@media(max-width:1080px){
  .hero-grid{grid-template-columns:1fr;gap:2.6rem}
  .palette{height:360px}
  .grid-4{grid-template-columns:repeat(2,1fr)}
  .pdp{grid-template-columns:1fr}
  .split{grid-template-columns:1fr;gap:2.4rem}
  .split--reverse .split-media{order:0}
  .foot-grid{grid-template-columns:1fr 1fr}
}
@media(max-width:1020px){
  /* Six nav items with the tracking they carry need about 986px once the
     wordmark and the language select are on the row. Below 1020 the menu
     collapses instead of shrinking the type, which would look pinched at this
     tracking. Note this is earlier than the rest of the mobile layout. */
  .site-nav{
    display:none;position:absolute;left:0;right:0;top:76px;background:var(--cream);
    border-bottom:1px solid var(--line);padding:1.4rem 22px 1.8rem;flex-direction:column;
    align-items:flex-start;gap:1.1rem;
  }
  body.menu-open .site-nav{display:flex}
  .nav-toggle{display:flex}
  .header-utils .bag{display:none}
}
@media(max-width:860px){
  .wrap{padding:0 22px}
  .grid-3,.steps,.pyramid{grid-template-columns:1fr}
  .pyramid div{border-left:0;padding-left:0;border-top:1px solid var(--line);padding-top:1rem}
  .pyramid div:first-child{border-top:0;padding-top:0}
  .note-box{grid-template-columns:1fr}
  .section-head{flex-direction:column;align-items:flex-start;gap:1.2rem}
  .quiz-result-grid{grid-template-columns:1fr}
  .pdp-gallery{grid-template-columns:1fr}
  .pdp-thumbs{flex-direction:row;order:2}
  .pdp-thumbs button{width:64px}
}
@media(max-width:560px){
  .grid-4,.grid-2{grid-template-columns:1fr}
  .hero-meta{gap:18px;flex-wrap:wrap}
  .display{font-size:2.5rem}
  .foot-grid{grid-template-columns:1fr}
  .hero-actions .btn{width:100%}
  .announce-inner{font-size:.64rem;letter-spacing:.05em;padding:0 18px;text-align:center}
  .an-label{display:none}
  .pdp-thumbs{flex-direction:row;order:2;flex-wrap:wrap}
  .pdp-gallery--thumbs{grid-template-columns:1fr}
  .subscribe-row{flex-direction:column}
  .subscribe-row .btn{width:100%}
  /* The header row is the one place that still overflowed on a 320px phone:
     wordmark 150px + gap 24 + language select 144px. Tighten all three so the
     row fits without a sideways scroll. */
  .logo{font-size:.95rem;letter-spacing:.24em;gap:.46em}
  .logo-mark{height:1.14em}
  .lang-select{font-size:.66rem;letter-spacing:.06em;padding:6px 23px 6px 11px}
}
@media(max-width:380px){
  /* 320px-class phones (iPhone SE and older Androids) still overflowed by ~13px
     after the 560px pass, so the side padding and the wordmark tighten once
     more rather than letting the whole page scroll sideways. */
  .wrap{padding:0 14px}
  .header-inner{gap:12px}
  .logo{font-size:.9rem;letter-spacing:.2em;gap:.44em}
  .logo-mark{height:1.1em}
  .lang-select{font-size:.64rem;letter-spacing:.04em;padding:6px 22px 6px 10px}
}
@media(prefers-reduced-motion:reduce){
  *{animation:none!important;transition:none!important}
  [data-reveal]{opacity:1;transform:none}
  html{scroll-behavior:auto}
}