/* ============================================================================
   ORCA SIGMA — website foundation
   Built on the ORCA SIGMA design system tokens (colors / typography / spacing).
   Display = Montserrat (UPPERCASE, -0.01em). UI/body = Montserrat.
   Chinese mirrors the roles: Swei Spring CJK SC (head) + Source Han Sans SC.
   One accent only: burgundy. Square corners; the lone rounded form is the
   circular arrow button. Hairline rules, warm grounds, blur-fade motion.
   ============================================================================ */

/* —— Latin webfonts —— */
@import url('https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,300;0,400;0,500;0,600;0,700;1,400;1,500&family=Prata&display=swap');

/* —— Chinese webfonts —— */
@font-face{font-family:'Swei Spring CJK SC';src:url('fonts/SweiSpringCJKsc-Regular.ttf') format('truetype');font-weight:400;font-display:swap;}
@font-face{font-family:'Swei Spring CJK SC';src:url('fonts/SweiSpringCJKsc-Medium.ttf') format('truetype');font-weight:500;font-display:swap;}
@font-face{font-family:'Swei Spring CJK SC';src:url('fonts/SweiSpringCJKsc-Bold.ttf') format('truetype');font-weight:700;font-display:swap;}
@font-face{font-family:'Source Han Sans SC';src:url('fonts/SourceHanSansSC-Normal.otf') format('opentype');font-weight:400;font-display:swap;}
@font-face{font-family:'Source Han Sans SC';src:url('fonts/SourceHanSansSC-Regular.otf') format('opentype');font-weight:500;font-display:swap;}

:root{
  /* —— families (per-glyph fallback handles bilingual automatically) —— */
  --font-display:'Montserrat','Swei Spring CJK SC',system-ui,sans-serif;
  --font-sans:'Montserrat','Source Han Sans SC',system-ui,sans-serif;

  /* —— brand palette —— */
  --orca-burgundy:#a3382d;
  --orca-oat:#f5eedb;
  --orca-black:#272323;
  --orca-ivory:#fbf6ed;
  --orca-beige:#e4e0d4;
  --b-200:#cbbfbc;--b-300:#a18d88;--b-400:#85706a;--b-500:#6b554f;--b-600:#52403a;
  --accent-hover:#8e2f25;
  --burgundy-08:rgba(163,56,45,.08);--burgundy-16:rgba(163,56,45,.16);--burgundy-32:rgba(163,56,45,.32);
  --ink-08:rgba(39,35,35,.08);--ink-16:rgba(39,35,35,.16);--ink-56:rgba(39,35,35,.56);

  /* —— oxblood interlude (deeper than burgundy; used as a ground, not an accent) —— */
  --orca-oxblood:oklch(0.30 0.07 25);
  --orca-oxblood-deep:oklch(0.22 0.06 25);
  --orca-oxblood-fg:oklch(0.93 0.02 60);
  --orca-oxblood-mute:oklch(0.78 0.03 50);

  /* —— semantic aliases (reused by all page markup) —— */
  --bg:var(--orca-ivory);
  --fg:var(--orca-black);
  --fg-muted:var(--b-500);
  --fg-faint:var(--b-400);
  --red:var(--orca-burgundy);
  --red-deep:var(--accent-hover);
  --paper:var(--orca-oat);
  --ink:var(--orca-black);
  --ink-fg:var(--orca-oat);
  --muted:var(--orca-oat);
  --border:var(--ink-16);
  --border-strong:rgba(39,35,35,.28);

  --maxw:1280px;
  --pad:clamp(20px,5vw,80px);
  --header-h:72px;

  --dur:.6s;
  --ease:cubic-bezier(0.22,1,0.36,1);

  --shadow-soft:0 2px 8px rgba(39,35,35,.04);
  --shadow-card:0 12px 32px rgba(39,35,35,.07);
}

*{box-sizing:border-box;}
html{-webkit-text-size-adjust:100%;}
body{
  margin:0;font-family:var(--font-sans);font-weight:400;
  font-size:15px;line-height:1.5;color:var(--fg);background:var(--bg);
  -webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;
}
img{display:block;max-width:100%;}
a{color:inherit;text-decoration:none;}
::selection{background:var(--red);color:var(--orca-oat);}

/* ---- type ---------------------------------------------------------------- */
.display{font-family:var(--font-display);font-weight:400;line-height:1.02;
  letter-spacing:-0.01em;text-transform:uppercase;margin:0;font-size:clamp(46px,8vw,96px);}
.h-xl{font-family:var(--font-display);font-weight:400;line-height:1.06;letter-spacing:-0.01em;
  text-transform:uppercase;margin:0;font-size:clamp(34px,5vw,62px);}
.h-lg{font-family:var(--font-display);font-weight:400;line-height:1.12;letter-spacing:-0.01em;
  text-transform:uppercase;margin:0;font-size:clamp(27px,3.6vw,42px);}
.h-md{font-family:var(--font-display);font-weight:400;line-height:1.18;letter-spacing:-0.01em;
  text-transform:uppercase;margin:0;font-size:clamp(20px,2.3vw,27px);}
.lede{font-family:var(--font-sans);font-size:clamp(16px,1.55vw,20px);line-height:1.6;
  letter-spacing:0;color:var(--text-body,var(--b-600));font-weight:400;}
.body{font-size:15px;line-height:1.6;color:var(--b-600);}
.body-muted{font-size:15px;line-height:1.65;color:var(--b-500);}
p{margin:0 0 1em;}
p:last-child{margin-bottom:0;}

.label{font-family:var(--font-sans);font-size:12px;letter-spacing:.04em;text-transform:uppercase;
  color:var(--b-500);font-weight:500;line-height:1.2;}
.label.red{color:var(--red);}
.idx{font-family:var(--font-sans);font-size:11px;letter-spacing:.08em;color:var(--b-400);
  font-variant-numeric:tabular-nums;text-transform:uppercase;font-weight:500;}
.caption{font-family:var(--font-sans);font-size:11px;letter-spacing:.02em;color:var(--b-400);line-height:1.5;}

/* chinese tuning: looser leading, no faux-bold tracking issues */
html[data-lang="zh"] .display,html[data-lang="zh"] .h-xl{line-height:1.18;letter-spacing:0;}
html[data-lang="zh"] .h-lg,html[data-lang="zh"] .h-md{line-height:1.3;letter-spacing:0;}
html[data-lang="zh"] .body,html[data-lang="zh"] .body-muted,html[data-lang="zh"] .lede{line-height:1.85;}

/* ---- layout -------------------------------------------------------------- */
.wrap{max-width:var(--maxw);margin:0 auto;padding-left:var(--pad);padding-right:var(--pad);}
.section{padding-block:clamp(64px,10vw,140px);}
.section-sm{padding-block:clamp(44px,7vw,84px);}
.rule{height:1px;background:var(--border);border:0;margin:0;}
.rule-strong{height:1px;background:var(--border-strong);border:0;margin:0;}
.stack-1>*+*{margin-top:8px;}.stack-2>*+*{margin-top:16px;}.stack-3>*+*{margin-top:24px;}.stack-4>*+*{margin-top:40px;}

.grid{display:grid;gap:clamp(16px,2vw,32px);}
@media(min-width:760px){.cols-2{grid-template-columns:1fr 1fr;}.cols-3{grid-template-columns:repeat(3,1fr);}.cols-12{grid-template-columns:repeat(12,1fr);}}

/* ---- header -------------------------------------------------------------- */
.nav{position:sticky;top:0;z-index:60;background:color-mix(in srgb,var(--orca-ivory) 88%,transparent);
  backdrop-filter:saturate(1.1) blur(10px);border-bottom:1px solid var(--border);}
.nav-in{max-width:1600px;margin:0 auto;height:var(--header-h);padding:0 clamp(16px,3vw,40px);
  display:flex;align-items:center;justify-content:space-between;gap:24px;}
.nav-brand{display:flex;align-items:center;gap:10px;}
.nav-brand img{height:18px;width:auto;}
.nav-links{display:flex;align-items:center;gap:clamp(20px,3vw,44px);}
.nav-link{font-family:var(--font-sans);font-size:12px;font-weight:500;letter-spacing:.04em;
  text-transform:uppercase;color:var(--fg);padding-block:8px;position:relative;transition:color .2s;white-space:nowrap;}
.nav-link::after{content:"";position:absolute;left:0;right:100%;bottom:0;height:1px;background:var(--red);transition:right .3s var(--ease);}
.nav-link:hover::after,.nav-link.active::after{right:0;}
.nav-link.active{color:var(--red);}
.nav-right{display:flex;align-items:center;gap:18px;}
.lang{display:inline-flex;border:1px solid var(--border-strong);}
.lang button{appearance:none;border:0;background:transparent;font-family:var(--font-sans);cursor:pointer;
  font-size:11px;font-weight:500;letter-spacing:.06em;padding:5px 9px;color:var(--b-500);transition:.18s;}
.lang button.on{background:var(--orca-black);color:var(--orca-oat);}
.nav-burger{display:none;appearance:none;background:none;border:0;cursor:pointer;font-family:var(--font-sans);
  font-size:11px;font-weight:500;letter-spacing:.06em;text-transform:uppercase;color:var(--fg);}
@media(max-width:820px){
  .nav-links{position:fixed;inset:var(--header-h) 0 auto 0;flex-direction:column;align-items:flex-start;gap:0;
    background:var(--orca-ivory);border-bottom:1px solid var(--border);padding:8px clamp(16px,3vw,40px) 20px;
    transform:translateY(-8px);opacity:0;pointer-events:none;transition:.25s var(--ease);}
  .nav.open .nav-links{transform:none;opacity:1;pointer-events:auto;}
  .nav-link{width:100%;padding:15px 0;border-top:1px solid var(--border);font-size:15px;}
  .nav-link::after{display:none;}
  .nav-burger{display:inline-block;}
}

/* ---- buttons ------------------------------------------------------------- */
/* primary = solid burgundy square (the add-to-cart control) */
.btn{display:inline-flex;align-items:center;gap:12px;font-family:var(--font-sans);cursor:pointer;
  font-size:12px;font-weight:500;letter-spacing:.04em;text-transform:uppercase;padding:15px 26px;
  border:1px solid var(--red);background:var(--red);color:var(--orca-oat);border-radius:0;transition:.25s var(--ease);}
.btn:hover{background:var(--accent-hover);border-color:var(--accent-hover);}
.btn .arr{transition:transform .3s var(--ease);}
.btn:hover .arr{transform:translateX(4px);}
.btn-ghost{background:transparent;color:var(--fg);border:1px solid var(--border-strong);}
.btn-ghost:hover{background:var(--orca-black);color:var(--orca-oat);border-color:var(--orca-black);}
.btn-red{background:var(--red);border-color:var(--red);color:var(--orca-oat);}
.btn-red:hover{background:var(--accent-hover);border-color:var(--accent-hover);}
.on-dark .btn{background:var(--orca-oat);border-color:var(--orca-oat);color:var(--orca-black);}
.on-dark .btn:hover{background:#fff;border-color:#fff;}
.on-dark .btn-ghost{background:transparent;color:var(--orca-oat);border-color:rgba(245,238,219,.4);}
.on-dark .btn-ghost:hover{background:var(--orca-oat);color:var(--orca-black);border-color:var(--orca-oat);}

/* signature ArrowButton: label + outlined circle holding the long arrow */
.link-arrow{display:inline-flex;align-items:center;gap:10px;font-family:var(--font-sans);
  font-size:12px;font-weight:500;letter-spacing:.04em;text-transform:uppercase;color:var(--red);transition:color .2s;}
.link-arrow .arr{width:28px;height:28px;flex-shrink:0;border:1px solid currentColor;border-radius:999px;
  display:inline-flex;align-items:center;justify-content:center;font-size:12px;line-height:1;
  transition:background-color .3s var(--ease),color .3s var(--ease);}
.link-arrow:hover .arr{background:var(--red);color:var(--orca-oat);}
.link-arrow:hover{color:var(--red);}
.on-dark .link-arrow{color:var(--orca-oat);}
.on-dark .link-arrow:hover .arr{background:var(--orca-oat);color:var(--orca-black);}

/* ---- figure / media ------------------------------------------------------ */
figure{margin:0;}
.fig img{width:100%;height:100%;object-fit:cover;display:block;}
.fig-cap{display:flex;justify-content:space-between;gap:16px;margin-top:10px;}
.ar-square{aspect-ratio:1/1;}.ar-port{aspect-ratio:4/5;}.ar-tall{aspect-ratio:3/4;}.ar-wide{aspect-ratio:16/10;}.ar-cine{aspect-ratio:21/9;}
.media{overflow:hidden;background:var(--orca-beige);position:relative;border-radius:0;}
.media img{transition:transform 1.2s var(--ease);}
.media.zoom:hover img{transform:scale(1.04);}

/* ---- chips / tags -------------------------------------------------------- */
.chips{display:flex;flex-wrap:wrap;gap:8px;}
.chip{font-family:var(--font-sans);font-size:11px;font-weight:500;letter-spacing:.03em;text-transform:uppercase;
  color:var(--b-500);border:1px solid var(--border);padding:6px 12px;white-space:nowrap;border-radius:0;background:transparent;}
.chip.red{color:var(--red);border-color:var(--burgundy-32);}

/* ---- section grounds ----------------------------------------------------- */
.on-dark{background:var(--orca-black);color:var(--orca-oat);}
.on-dark .label,.on-dark .caption,.on-dark .idx,.on-dark .fig-cap{color:rgba(245,238,219,.62);}
.on-dark .body-muted{color:rgba(245,238,219,.72);}
.on-dark .rule{background:rgba(245,238,219,.16);}
.on-dark .chip{border-color:rgba(245,238,219,.22);color:rgba(245,238,219,.8);}
.on-paper{background:var(--orca-oat);}
.on-red{background:var(--red);color:var(--orca-oat);}
.on-red .label,.on-red .caption,.on-red .body-muted{color:rgba(245,238,219,.82);}

/* ---- product card -------------------------------------------------------- */
.pcard{display:block;background:transparent;transition:.3s var(--ease);border-radius:0;}
.pcard .media{aspect-ratio:4/5;}
.pcard:hover .media img{transform:scale(1.04);}
.pcard-body{padding:18px 0 6px;display:flex;flex-direction:column;gap:10px;}
.pcard-row{display:flex;justify-content:space-between;align-items:baseline;gap:12px;}
.price{font-family:var(--font-sans);font-weight:600;font-variant-numeric:tabular-nums;color:var(--fg);}

/* ---- spec table ---------------------------------------------------------- */
.spec{width:100%;border-collapse:collapse;}
.spec tr{border-top:1px solid var(--border);}
.spec tr:last-child{border-bottom:1px solid var(--border);}
.spec th{text-align:left;font-weight:500;color:var(--b-500);font-size:12px;letter-spacing:.03em;
  text-transform:uppercase;padding:14px 16px 14px 0;width:38%;vertical-align:top;font-family:var(--font-sans);}
.spec td{padding:14px 0;vertical-align:top;font-size:14px;color:var(--b-600);}

/* ---- footer -------------------------------------------------------------- */
.foot{background:var(--orca-black);color:var(--orca-oat);}
.foot a{color:inherit;}
.foot-top{display:grid;gap:40px;padding-block:clamp(52px,7vw,88px);}
@media(min-width:860px){.foot-top{grid-template-columns:1.5fr 1fr 1fr;}}
.foot-mark{height:40px;width:auto;margin-bottom:20px;}
.foot-col h4{font-family:var(--font-sans);font-size:11px;font-weight:500;letter-spacing:.08em;text-transform:uppercase;
  color:rgba(245,238,219,.5);margin:0 0 16px;}
.foot-col a{display:block;padding:7px 0;font-size:13px;letter-spacing:.01em;color:rgba(245,238,219,.82);transition:color .2s;}
.foot-col a:hover{color:#fff;}
.foot-bottom{border-top:1px solid rgba(245,238,219,.16);padding-block:22px;display:flex;flex-wrap:wrap;
  gap:14px 28px;justify-content:space-between;align-items:center;}
.foot-bottom .label{color:rgba(245,238,219,.5);}

/* ---- reveal (blur-fade) -------------------------------------------------- */
@media(prefers-reduced-motion:no-preference){
  .reveal{opacity:0;transform:translateY(14px);filter:blur(16px);
    transition:opacity var(--dur) var(--ease),transform var(--dur) var(--ease),filter var(--dur) var(--ease);}
  .reveal.in{opacity:1;transform:none;filter:none;}
  .reveal.d1{transition-delay:.09s;}.reveal.d2{transition-delay:.18s;}.reveal.d3{transition-delay:.27s;}.reveal.d4{transition-delay:.36s;}
}

/* ---- misc ---------------------------------------------------------------- */
.eyebrow{display:flex;align-items:center;gap:12px;}
.eyebrow::before{content:"";width:28px;height:1px;background:currentColor;opacity:.5;}
.marquee-wrap{overflow:hidden;border-block:1px solid var(--border);background:var(--orca-oat);}
.on-dark .marquee-wrap{border-color:rgba(245,238,219,.16);}
.marquee{display:flex;gap:56px;white-space:nowrap;width:max-content;animation:marq 42s linear infinite;padding-block:16px;}
.marquee span{font-family:var(--font-sans);font-size:12px;font-weight:500;letter-spacing:.08em;text-transform:uppercase;color:var(--b-500);display:inline-flex;align-items:center;gap:14px;}
.marquee .dot{color:var(--red);font-style:normal;}
@keyframes marq{to{transform:translateX(-50%);}}
@media(prefers-reduced-motion:reduce){.marquee{animation:none;}}

.hide{display:none !important;}
.center{text-align:center;}
.measure{max-width:62ch;}
.measure-sm{max-width:46ch;}
html[data-lang="zh"] .measure{max-width:42em;}
html[data-lang="zh"] .measure-sm{max-width:30em;}

/* ============================================================================
   EDITORIAL EXTENSIONS — push the page toward small-press monograph behaviour.
   Add asymmetry, oversized pagination, marginalia, oxblood interludes.
   ============================================================================ */

/* ---- ground: oxblood interlude ------------------------------------------- */
.on-oxblood{background:var(--orca-oxblood);color:var(--orca-oxblood-fg);}
.on-oxblood .label,.on-oxblood .caption,.on-oxblood .idx,.on-oxblood .fig-cap{color:oklch(0.93 0.02 60 / .62);}
.on-oxblood .label.red,.on-oxblood .label[style*="--red"]{color:oklch(0.93 0.02 60);}
.on-oxblood .body-muted{color:oklch(0.93 0.02 60 / .76);}
.on-oxblood .body{color:oklch(0.93 0.02 60 / .92);}
.on-oxblood .rule{background:oklch(0.93 0.02 60 / .22);}
.on-oxblood .chip{border-color:oklch(0.93 0.02 60 / .26);color:oklch(0.93 0.02 60 / .82);}
.on-oxblood .btn{background:var(--orca-oxblood-fg);border-color:var(--orca-oxblood-fg);color:var(--orca-oxblood-deep);}
.on-oxblood .btn:hover{background:#fff;border-color:#fff;}
.on-oxblood .btn-ghost{background:transparent;color:var(--orca-oxblood-fg);border-color:oklch(0.93 0.02 60 / .38);}
.on-oxblood .btn-ghost:hover{background:var(--orca-oxblood-fg);color:var(--orca-oxblood-deep);border-color:var(--orca-oxblood-fg);}
.on-oxblood .link-arrow{color:var(--orca-oxblood-fg);}
.on-oxblood .link-arrow:hover .arr{background:var(--orca-oxblood-fg);color:var(--orca-oxblood-deep);}

/* ---- oversize numerals & chapter pagination ------------------------------ */
/* Use these as the page-flip device — a wall-clock-size folio number sitting
   in the margin or above the section heading. */
.numeral{font-family:var(--font-display);font-weight:300;line-height:.92;letter-spacing:-0.04em;
  font-variant-numeric:tabular-nums;color:var(--red);
  font-size:clamp(72px,14vw,200px);display:block;}
.numeral-sm{font-size:clamp(48px,9vw,120px);}
.numeral-xs{font-size:clamp(32px,5.5vw,68px);}
.numeral-ink{color:var(--ink);}
.numeral-muted{color:color-mix(in oklch,var(--ink) 14%,transparent);}
.on-dark .numeral{color:var(--red);}
.on-dark .numeral-ink{color:var(--orca-oat);}
.on-dark .numeral-muted{color:color-mix(in oklch,var(--orca-oat) 18%,transparent);}
.on-oxblood .numeral{color:var(--orca-oxblood-fg);}
.on-oxblood .numeral-muted{color:color-mix(in oklch,var(--orca-oxblood-fg) 22%,transparent);}

/* Folio: a "page number" — index + slash + total — placed in the margin. */
.folio{display:flex;align-items:baseline;gap:8px;font-family:var(--font-sans);
  font-variant-numeric:tabular-nums;text-transform:uppercase;letter-spacing:.08em;
  font-size:11px;color:var(--fg-muted);}
.folio b{font-weight:500;color:var(--red);}
.on-dark .folio{color:rgba(245,238,219,.55);}
.on-oxblood .folio{color:oklch(0.93 0.02 60 / .55);}
.on-oxblood .folio b{color:var(--orca-oxblood-fg);}

/* ---- chapter break (replaces a flat hairline with a numbered marker) ---- */
.chap{display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:18px;
  padding-block:clamp(28px,3.5vw,48px);}
.chap::before,.chap::after{content:"";display:block;height:1px;background:var(--border);}
.chap-label{font-family:var(--font-sans);font-size:11px;font-weight:500;letter-spacing:.16em;
  text-transform:uppercase;color:var(--fg-muted);display:flex;gap:10px;align-items:baseline;
  font-variant-numeric:tabular-nums;white-space:nowrap;}
.chap-label b{font-weight:500;color:var(--red);}
.on-dark .chap::before,.on-dark .chap::after{background:rgba(245,238,219,.18);}
.on-dark .chap-label{color:rgba(245,238,219,.55);}
.on-oxblood .chap::before,.on-oxblood .chap::after{background:oklch(0.93 0.02 60 / .22);}
.on-oxblood .chap-label{color:oklch(0.93 0.02 60 / .62);}
.on-oxblood .chap-label b{color:var(--orca-oxblood-fg);}

/* ---- sidenote / marginalia ---------------------------------------------- */
/* A small caption running in the margin alongside body text. Used to carry
   fig-references, source notes, bilingual mirrors. */
.sidenote{font-family:var(--font-sans);font-size:11px;line-height:1.55;letter-spacing:.02em;
  color:var(--fg-muted);font-variant-numeric:tabular-nums;}
.sidenote::before{content:"";display:block;width:18px;height:1px;background:var(--red);margin-bottom:10px;}
.sidenote b{font-weight:500;color:var(--ink);letter-spacing:.06em;text-transform:uppercase;font-size:10px;display:block;margin-bottom:4px;}
.on-dark .sidenote{color:rgba(245,238,219,.6);}
.on-dark .sidenote b{color:var(--orca-oat);}
.on-oxblood .sidenote{color:oklch(0.93 0.02 60 / .6);}
.on-oxblood .sidenote b{color:var(--orca-oxblood-fg);}

/* ---- drop cap ----------------------------------------------------------- */
.dropcap::first-letter{font-family:var(--font-display);font-weight:400;float:left;
  font-size:clamp(54px,7vw,86px);line-height:.82;padding:6px 12px 0 0;
  color:var(--red);}
html[data-lang="zh"] .dropcap::first-letter{padding:8px 14px 0 0;line-height:.94;}

/* ---- editorial 12-col asymmetric helpers -------------------------------- */
/* Available only ≥760px (matches the existing .cols-12 breakpoint). Use to
   place a headline in cols 1–7 with a sidenote riding cols 9–11, etc. */
@media(min-width:760px){
  .col-1-5{grid-column:1 / span 5;}.col-1-6{grid-column:1 / span 6;}.col-1-7{grid-column:1 / span 7;}.col-1-8{grid-column:1 / span 8;}.col-1-9{grid-column:1 / span 9;}
  .col-2-7{grid-column:2 / span 6;}.col-3-9{grid-column:3 / span 7;}
  .col-5-12{grid-column:5 / span 8;}.col-6-12{grid-column:6 / span 7;}.col-7-12{grid-column:7 / span 6;}
  .col-8-11{grid-column:8 / span 4;}.col-9-12{grid-column:9 / span 4;}.col-10-12{grid-column:10 / span 3;}
  .col-span-3{grid-column:span 3;}.col-span-4{grid-column:span 4;}.col-span-5{grid-column:span 5;}.col-span-6{grid-column:span 6;}.col-span-7{grid-column:span 7;}.col-span-8{grid-column:span 8;}
  .row-pull-1{margin-top:clamp(40px,7vw,120px);}
  .row-pull-2{margin-top:clamp(64px,11vw,180px);}
}

/* ---- staggered three-up: drop the middle column slightly --------------- */
@media(min-width:760px){
  .stagger-3>*:nth-child(2){transform:translateY(clamp(28px,4vw,60px));}
  .stagger-3>*:nth-child(3){transform:translateY(clamp(-12px,-1.4vw,-22px));}
}

/* ---- micro: hover refinement on cards + arrow link --------------------- */
.pcard{outline:0;}
.pcard .pcard-body .body{transition:color .25s var(--ease);}
.pcard:hover .pcard-body .body{color:var(--red);}
.pcard .link-arrow .arr{transition:background-color .3s var(--ease),color .3s var(--ease),transform .3s var(--ease);}
.pcard:hover .link-arrow .arr{background:var(--red);color:var(--orca-oat);transform:translateX(2px);}
.prow{transition:background-color .35s var(--ease);}
.prow:hover{background:color-mix(in oklch,var(--red) 3%,transparent);}

/* ---- focus-visible: a clean, consistent ring ---------------------------- */
:where(a,button,[role="button"],input,select,textarea):focus-visible{
  outline:2px solid var(--red);outline-offset:3px;border-radius:1px;
}
.on-dark :where(a,button):focus-visible,
.on-oxblood :where(a,button):focus-visible{outline-color:var(--orca-oat);outline-offset:3px;}
.btn:focus-visible{outline-offset:4px;}
.nav-link:focus-visible{outline-offset:6px;}
.lang button:focus-visible{outline-offset:2px;}

/* ---- nav refinements ---------------------------------------------------- */
.nav-link{font-feature-settings:"ss01";}
.lang button{transition:background-color .2s var(--ease),color .2s var(--ease);}
.lang button:not(.on):hover{color:var(--ink);}
.nav-brand:focus-visible{outline-offset:6px;}

/* ---- footer refinements ------------------------------------------------- */
.foot-mark{transition:opacity .25s var(--ease);}
.foot-brand:hover .foot-mark{opacity:.9;}
.foot-col a{position:relative;display:block;width:fit-content;max-width:100%;}
.foot-col a::after{content:"";position:absolute;left:0;right:100%;bottom:4px;height:1px;
  background:rgba(245,238,219,.7);transition:right .35s var(--ease);}
.foot-col a:hover::after{right:0;}
.foot-bottom{font-variant-numeric:tabular-nums;}

/* ---- product-row index numeral ----------------------------------------- */
.prow-num{font-family:var(--font-display);font-weight:300;font-variant-numeric:tabular-nums;
  font-size:clamp(40px,5.5vw,76px);line-height:.92;letter-spacing:-0.03em;color:var(--red);
  display:block;}
.prow-num-ink{color:var(--ink);}

/* ---- pull-quote (sets a body line as if printed) ----------------------- */
.pullquote{font-family:var(--font-display);font-weight:400;text-transform:none;letter-spacing:-0.01em;
  font-size:clamp(22px,2.6vw,30px);line-height:1.32;color:var(--ink);max-width:30ch;}
.pullquote::before{content:"\201C";display:block;font-size:1.4em;line-height:.6;color:var(--red);margin-bottom:8px;}
.on-dark .pullquote{color:var(--orca-oat);}
.on-oxblood .pullquote{color:var(--orca-oxblood-fg);}
html[data-lang="zh"] .pullquote{line-height:1.5;letter-spacing:0;}
html[data-lang="zh"] .pullquote::before{content:"\201C";}

/* ---- "fig 02" style oversized fig number ------------------------------- */
.fig-num{font-family:var(--font-sans);font-variant-numeric:tabular-nums;font-weight:500;
  font-size:clamp(11px,.78vw,13px);letter-spacing:.18em;text-transform:uppercase;color:var(--fg-muted);}
.fig-num b{color:var(--red);font-weight:500;}
.on-dark .fig-num{color:rgba(245,238,219,.6);}
.on-oxblood .fig-num{color:oklch(0.93 0.02 60 / .6);}

/* ---- reveal: add a stagger child variant for arbitrary card grids ------- */
@media(prefers-reduced-motion:no-preference){
  .reveal-children>.reveal:nth-child(1){transition-delay:0s;}
  .reveal-children>.reveal:nth-child(2){transition-delay:.08s;}
  .reveal-children>.reveal:nth-child(3){transition-delay:.16s;}
  .reveal-children>.reveal:nth-child(4){transition-delay:.24s;}
  .reveal-children>.reveal:nth-child(5){transition-delay:.32s;}
  .reveal-children>.reveal:nth-child(6){transition-delay:.40s;}
}

/* ---- selection in oxblood ground --------------------------------------- */
.on-oxblood ::selection{background:var(--orca-oxblood-fg);color:var(--orca-oxblood-deep);}

/* ---- closing band (shared, was previously page-local) ------------------ */
.closing{position:relative;min-height:clamp(420px,62vh,640px);display:flex;align-items:flex-end;overflow:hidden;}
.closing-img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;}
.closing-overlay{position:relative;width:100%;padding-block:clamp(40px,6vw,72px);
  background:linear-gradient(to top,
    oklch(0.16 0 0 / .82) 0%,
    oklch(0.16 0 0 / .72) 30%,
    oklch(0.16 0 0 / .35) 65%,
    transparent 100%);}
.closing h2,.closing .h-xl,.closing .h-lg{text-shadow:0 1px 24px oklch(0.16 0 0 / .35);}

/* ---- crumb muted styling ------------------------------------------------ */
.crumb a{transition:color .2s var(--ease);}
.crumb .muted{color:var(--fg-faint);}
.crumb>span{display:inline-flex;align-items:center;gap:10px;}