:root{
  --white:#FBFBF8;
  --grey:#ECECE7;
  --black:#121212;
  --muted:#6B6B66;
  --hair:#CFCFC8;
  --porcelain:#2B4C7E;
}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    --white:#121212;
    --grey:#1B1B1A;
    --black:#F0EFEA;
    --muted:#9A9A93;
    --hair:#33332F;
    --porcelain:#7FA3D9;
  }
}
:root[data-theme="dark"]{
  --white:#121212;
  --grey:#1B1B1A;
  --black:#F0EFEA;
  --muted:#9A9A93;
  --hair:#33332F;
  --porcelain:#7FA3D9;
}
*{box-sizing:border-box;margin:0;padding:0}
body{
  background:var(--white);color:var(--black);
  font-family:"Schibsted Grotesk",system-ui,sans-serif;
  font-size:17px;line-height:1.55;
}
.zh{font-family:"Noto Serif SC",serif}
.serif{font-family:"Bodoni Moda",Didot,serif;font-weight:400}
.lbl{font-size:12px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--muted)}
a{color:inherit}

.g{
  max-width:1280px;margin:0 auto;padding:0 16px;
  display:grid;grid-template-columns:repeat(12,1fr);column-gap:16px;
}
@media(min-width:900px){.g{padding:0 32px;column-gap:24px}}

/* masthead */
header{border-bottom:1px solid var(--black);background:var(--white);position:sticky;top:0;z-index:5}
.mast{align-items:center;padding-top:14px;padding-bottom:14px}
.mast .brand{grid-column:1/5;display:flex;gap:10px;align-items:center;text-decoration:none;font-family:"Bodoni Moda",serif;font-size:22px;letter-spacing:-.01em}
.mast .brand svg{width:20px;height:20px}
.mast .mid{grid-column:5/9;display:none;text-align:center}
@media(min-width:900px){.mast .mid{display:block}}
.mast .act{grid-column:9/13;display:flex;gap:12px;justify-content:flex-end;align-items:center}
@media(max-width:899px){.mast .brand{grid-column:1/7}.mast .act{grid-column:7/13}}
.btn{
  display:inline-block;text-decoration:none;
  font-size:13px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;
  padding:12px 20px;background:var(--black);color:var(--white);
}
.btn:hover{background:var(--porcelain)}
.btn.line{background:transparent;color:var(--black);border:1px solid var(--black)}
.btn.line:hover{background:var(--grey)}
.dial{background:none;border:1px solid var(--hair);color:var(--black);font-family:"Noto Serif SC",serif;padding:6px 10px;cursor:pointer;font-size:14px}

/* hero: numeral + headline across 12 */
.hero{padding:40px 0 56px;border-bottom:1px solid var(--black)}
@media(min-width:900px){.hero{padding:72px 0 88px}}
.hero .eyebrow{grid-column:1/13;display:flex;justify-content:space-between;gap:16px;margin-bottom:24px}
.hero .numeral{
  grid-column:1/13;
  font-family:"Bodoni Moda",serif;font-weight:400;
  font-size:clamp(140px,28vw,420px);line-height:.78;letter-spacing:-.04em;
  color:var(--black);
}
@media(min-width:900px){.hero .numeral{grid-column:1/5}}
.hero .numeral .zh{font-weight:400;font-size:.9em}
.hero .title{grid-column:1/13;margin-top:28px}
@media(min-width:900px){.hero .title{grid-column:5/13;margin-top:0;padding-top:8px}}
h1{
  font-family:"Bodoni Moda",serif;font-weight:400;
  font-size:clamp(40px,6.6vw,104px);line-height:.96;letter-spacing:-.025em;text-wrap:balance;
}
h1 em{font-style:italic;font-weight:400;color:var(--porcelain)}
.hero .sub{grid-column:1/13;margin-top:32px;display:grid;gap:20px}
@media(min-width:900px){.hero .sub{grid-column:5/10}}
.hero .sub p{font-size:19px;color:var(--muted);max-width:48ch}
.hero .ctas{display:flex;flex-wrap:wrap;gap:12px;align-items:center}
.hero .fine{font-size:14px;color:var(--muted)}
.hero .side{grid-column:1/13;margin-top:32px;font-size:14px;color:var(--muted)}
@media(min-width:900px){.hero .side{grid-column:10/13;margin-top:0;border-left:1px solid var(--hair);padding-left:24px}}
.hero .side dl{display:grid;grid-template-columns:auto 1fr;gap:6px 14px}
.hero .side dt{font-weight:600;color:var(--black)}

/* sections */
section.ed{padding:56px 0;border-bottom:1px solid var(--hair)}
@media(min-width:900px){section.ed{padding:96px 0}}
.ed .no{
  grid-column:1/13;
  font-family:"Bodoni Moda",serif;font-size:clamp(64px,10vw,160px);line-height:.8;letter-spacing:-.04em;color:var(--porcelain);
}
@media(min-width:900px){.ed .no{grid-column:1/3}}
.ed .head{grid-column:1/13;margin-top:16px}
@media(min-width:900px){.ed .head{grid-column:3/8;margin-top:0}}
.ed .head h2{margin-top:10px}
.ed .body{grid-column:1/13;margin-top:28px}
@media(min-width:900px){.ed .body{grid-column:8/13;margin-top:0}}
h2{
  font-family:"Bodoni Moda",serif;font-weight:400;
  font-size:clamp(34px,4.8vw,72px);line-height:.98;letter-spacing:-.02em;text-wrap:balance;
}
h2 em{font-style:italic;color:var(--porcelain)}
.lead{margin-top:20px;font-size:19px;color:var(--muted);max-width:44ch}
.lead strong{color:var(--black);font-weight:600}

.steps{list-style:none;counter-reset:s;border-top:1px solid var(--black)}
.steps li{display:grid;grid-template-columns:48px 1fr;gap:16px;padding:20px 0;border-bottom:1px solid var(--hair)}
.steps li::before{counter-increment:s;content:counter(s,upper-roman);font-family:"Bodoni Moda",serif;font-size:24px;line-height:1;color:var(--porcelain);padding-top:2px}
.steps h3{font-family:"Bodoni Moda",serif;font-weight:500;font-size:26px;line-height:1.1}
.steps p{margin-top:8px;color:var(--muted)}
.foot-note{margin-top:20px;padding-top:16px;border-top:1px solid var(--black);font-size:15px;color:var(--muted)}
.foot-note b{color:var(--black);font-weight:600}

/* scene plate */
.plate{border:1px solid var(--black);display:grid;grid-template-columns:1fr;background:var(--white)}
.plate .glyph{display:grid;place-items:center;padding:28px;border-bottom:1px solid var(--black)}
.plate .glyph .zh{font-size:clamp(120px,18vw,220px);line-height:1}
.plate dl{display:grid;grid-template-columns:auto 1fr;gap:0}
.plate dt,.plate dd{padding:12px 16px;border-bottom:1px solid var(--hair)}
.plate dt{font-size:12px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--muted);border-right:1px solid var(--hair)}
.plate dd{color:var(--black)}
.plate dt:nth-last-of-type(1),.plate dd:last-of-type{border-bottom:0}
.plate .cap{padding:10px 16px;border-top:1px solid var(--black);font-family:"Bodoni Moda",serif;font-style:italic;font-size:15px;color:var(--muted)}

/* watch pull-quote caption */
.pull{border-top:1px solid var(--black);border-bottom:1px solid var(--black);padding:36px 0;display:grid;gap:14px}
.pull .line{font-size:clamp(36px,5.4vw,72px);line-height:1.15;display:flex;gap:.4em;flex-wrap:wrap}
.pull .hit{color:var(--porcelain);border-bottom:2px solid currentColor}
.pull .gloss{display:flex;gap:28px;color:var(--muted);font-size:15px;flex-wrap:wrap}
.loop{list-style:none;margin-top:24px}
.loop li{display:grid;grid-template-columns:36px 1fr;gap:12px;padding:12px 0;border-bottom:1px solid var(--hair);color:var(--muted)}
.loop .n{font-family:"Bodoni Moda",serif;font-size:20px;color:var(--porcelain)}
.status{margin-top:20px;font-size:12px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--porcelain)}
.fine{margin-top:12px;font-size:14px;color:var(--muted)}

/* inventory table */
.tbl{width:100%;border-collapse:collapse;border-top:1px solid var(--black)}
.tbl td{padding:16px 0;border-bottom:1px solid var(--hair);vertical-align:top}
.tbl td:first-child{width:5ch;font-family:"Bodoni Moda",serif;font-size:22px;color:var(--porcelain);line-height:1}
.tbl td:last-child{text-align:right;white-space:nowrap;padding-left:16px;font-size:12px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--muted)}
.tbl tr.soon td{color:var(--muted)}
.road{margin-top:20px;font-size:15px;color:var(--muted)}

/* closing */
.close{padding:80px 0 96px;border-bottom:1px solid var(--black)}
.close h2{grid-column:1/13;font-size:clamp(48px,10vw,160px);letter-spacing:-.035em}
.close .row{grid-column:1/13;margin-top:36px;display:grid;gap:20px}
@media(min-width:900px){.close .row{grid-template-columns:1fr auto;align-items:end}}
.close .row p{color:var(--muted);max-width:40ch}
.close .contact{grid-column:1/13;margin-top:24px;font-size:14px;color:var(--muted)}

footer{padding:28px 0 56px}
.foot{align-items:center;font-size:12px;letter-spacing:.08em;text-transform:uppercase;color:var(--muted)}
.foot .c{grid-column:1/13}
.foot nav{grid-column:1/13;display:flex;flex-wrap:wrap;gap:18px;margin-top:12px}
@media(min-width:900px){.foot .c{grid-column:1/7}.foot nav{grid-column:7/13;justify-content:flex-end;margin-top:0}}
.foot a{text-decoration:none}.foot a:hover{color:var(--porcelain)}