/* =====================================================
   ERRIESE — Editorial Stylesheet v2
   VI: Subtle Grey #F2F0EA · Soft Beige #D1C0B5
       Delightful Yellow #F1ECC1 · Denim Blue #393F60
   v2 additions: scroll progress bar, chapter index,
   chapter markers, hero parallax, word/letter stagger
   reveal, typography micro-refinements.
   ===================================================== */

:root {
  --bg: #F2F0EA;
  --bg-soft: #EBE7DD;
  --beige: #D1C0B5;
  --yellow: #F1ECC1;
  --denim: #393F60;
  --ink: #0E0E0E;
  --ink-soft: #4a4a4a;
  --ink-faint: #8a8a8a;
  --line: rgba(14, 14, 14, 0.10);
  --line-strong: rgba(14, 14, 14, 0.20);
  --max: 1680px;
  --gutter: clamp(20px, 4vw, 64px);
  --serif: 'Cormorant Garamond', 'Times New Roman', serif;
  --sans: 'Inter', 'Helvetica Neue', Helvetica, Arial, sans-serif;
  --mono: 'JetBrains Mono', 'Courier New', monospace;
  --ease-editorial: cubic-bezier(0.22, 0.61, 0.36, 1);
  --ease-soft: cubic-bezier(0.32, 0.72, 0, 1);
  --hero-progress: 0;       /* 0 → 1 across hero scroll */
  --scroll-progress: 0;     /* 0 → 1 across full page scroll */
}

* { box-sizing: border-box; margin: 0; padding: 0; }

/* —— I18N (lang-switch) —— */
html[data-lang="en"] [data-lang="zh"], html[data-lang="zh"] [data-lang="en"] { display: none !important; }
/* Lang toggle button uses [data-lang-label] (different attribute than [data-lang]).
   Hide the label of the *current* language so the button shows the language
   the user will switch *to*. Without this both 中 and EN flash before script.js
   runs. (No !important — keeps script.js free to flip labels on click.) */
html[data-lang="en"] .lang-toggle [data-lang-label="en"],
html[data-lang="zh"] .lang-toggle [data-lang-label="zh"] { display: none; }
html[data-lang="zh"] body { font-family: -apple-system, BlinkMacSystemFont, 'PingFang SC', 'Microsoft YaHei', 'Hiragino Sans GB', 'Inter', sans-serif; }
html[data-lang="zh"] .serif-it,
html[data-lang="zh"] em:not(.keep-it) { font-style: italic; }
html[data-lang="zh"] .serif-it,
html[data-lang="zh"] [data-lang="zh"] em { font-family: 'Noto Serif SC', 'STSong', 'Songti SC', serif; font-weight: 500; }
html[data-lang="zh"] .pd-name,
html[data-lang="zh"] .event-title,
html[data-lang="zh"] .products-head h2,
html[data-lang="zh"] .other-series h2,
html[data-lang="zh"] .footer-tag,
html[data-lang="zh"] .phonetic-pron {
  font-family: 'Noto Serif SC', 'STSong', 'Songti SC', serif;
  font-style: normal;
  letter-spacing: -0.005em;
}
/* Series title — most names are Latin (Echo / Petit Mouvement / Sous le Vent),
   so keep italic Cormorant even when ZH lang is active. */
.series-hero-title { font-family: var(--serif); font-style: italic; }

/* Inline italic CJK emphasis — give a touch of breathing room so the keyword
   doesn't merge into surrounding text, and force the whole phrase to wrap
   together so e.g. "永久性陪伴" / "小幅动作" never gets split mid-word. */
html[data-lang="zh"] p em.serif-it,
html[data-lang="zh"] p em,
html[data-lang="zh"] .tag-row em,
html[data-lang="zh"] .lead em.serif-it,
html[data-lang="zh"] .statement-quote em { margin: 0 0.15em; }
html[data-lang="zh"] em.serif-it,
html[data-lang="zh"] em:not(.serif-it),
html[data-lang="zh"] p em { display: inline-block; white-space: nowrap; }
/* Statement quote: keep the keyword phrase together but ALLOW wrapping if it
   would overflow the 18ch headline width. inline-block + balanced wrap keeps
   the keyword visually grouped without forcing horizontal overflow on narrow
   viewports where 永久性陪伴 + surrounding chars exceed the column. */
html[data-lang="zh"] .statement-quote em {
  display: inline;
  white-space: normal;
}

/* Lang toggle button */
.lang-toggle {
  background: none; border: 1px solid currentColor;
  color: inherit;
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.18em;
  padding: 6px 12px;
  cursor: pointer;
  border-radius: 999px;
  transition: background 0.45s var(--ease-editorial), color 0.45s var(--ease-editorial), border-color 0.45s var(--ease-editorial);
  margin-left: 28px;
}
.lang-toggle:hover { background: currentColor; }
.lang-toggle:hover span { color: var(--bg); }
.lang-toggle span { transition: color 0.45s var(--ease-editorial); }
@media (max-width: 720px) { .lang-toggle { margin-left: 12px; padding: 5px 9px; font-size: 9px; } }

html {
  scroll-behavior: smooth;
  /* When jumping to in-page anchors (e.g. #culture, #campaigns), offset the
     landing position by the fixed nav height so headings don't get hidden
     underneath. ~80px covers both transparent-state (~92px) and scrolled
     state (~70px) well enough for any anchor to land inside its section. */
  scroll-padding-top: 88px;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

body {
  background: var(--bg);
  color: var(--ink);
  font-family: var(--sans);
  font-size: 16px;
  line-height: 1.55;
  font-weight: 400;
  cursor: none; /* swap for custom cursor on desktop */
  font-feature-settings: "kern" 1, "liga" 1, "calt" 1;
  overflow-x: hidden;
}

@media (hover: none) { body { cursor: auto; } }

img { display: block; max-width: 100%; height: auto; }

a { color: inherit; text-decoration: none; transition: opacity 0.4s ease; }

p { font-size: clamp(14px, 1vw, 16px); line-height: 1.65; max-width: 56ch; color: var(--ink-soft); text-wrap: pretty; }

::selection { background: var(--denim); color: var(--bg); }

/* —— SHARED PRIMITIVES —— */
.serif-it { font-family: var(--serif); font-style: italic; font-weight: 500; line-height: inherit; vertical-align: baseline; color: var(--denim); }
em:not(.serif-it) { font-style: italic; font-weight: 500; line-height: inherit; vertical-align: baseline; }

p em, p .serif-it, li em, li .serif-it,
.camp-text p em, .camp-text p .serif-it,
.fig-body em, .fig-body .serif-it,
.event-text em, .event-text .serif-it,
.phil-body em, .phil-body .serif-it { font-size: 1.18em; }

h1 em, h2 em, h3 em, h4 em,
.statement-quote em, .camp-title em, .camp-intro h2 em,
.collection-head h2 em, .event-title em,
.cpb-head h4 .serif-it,
.cpb-head h4 em { font-size: 1em; font-weight: 500; color: inherit; }

.mono-cap { font-family: var(--mono); font-size: 11px; letter-spacing: 0.18em; text-transform: uppercase; color: var(--ink-faint); }

.eyebrow {
  display: inline-block;
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--ink-faint);
}

.rule { display: block; width: 100%; height: 1px; background: var(--line); border: 0; }

.container {
  max-width: var(--max);
  margin: 0 auto;
  padding-left: var(--gutter);
  padding-right: var(--gutter);
}

/* —— SCROLL PROGRESS BAR —— */
.scroll-progress {
  position: fixed; top: 0; left: 0; right: 0;
  height: 1px;
  z-index: 250;
  pointer-events: none;
  background: rgba(57, 63, 96, 0.06);
}
.scroll-progress span {
  display: block;
  height: 100%;
  background: var(--denim);
  width: 100%;
  transform-origin: left center;
  transform: scaleX(var(--scroll-progress, 0));
  transition: transform 0.12s linear;
}

/* —— BRAND LOGO ————————————————————————————————
   Two PNG variants of the wordmark (530×104, 5.1:1):
   • brand/erriese-logo.png        — black (for light bgs)
   • brand/erriese-logo-white.png  — white (for dark bgs)
   Each placement uses a plain <img>; the img is sized
   by its parent rule (.loader-mark, .nav-mark, etc).
   Override the global img max-width: 100% rule. */
img.loader-mark, img.hero-mark,
.nav-mark img, .phonetic-mark img {
  display: block;
  max-width: none;
  height: auto;
}
img.footer-mark {
  display: block;
  height: auto;
  /* footer-mark keeps its own max-width cap (set below) */
}
.brand-logo {                                /* legacy class — keeps mask fallback for any holdouts */
  display: inline-block;
  background-color: currentColor;
  -webkit-mask: url('brand/erriese-logo.png') center / contain no-repeat;
          mask: url('brand/erriese-logo.png') center / contain no-repeat;
}

/* —— LOADER —— */
.loader {
  position: fixed; inset: 0;
  background: var(--bg);
  z-index: 9999;
  display: flex; align-items: center; justify-content: center;
  pointer-events: none;
  transition: opacity 0.9s var(--ease-editorial) 0.15s, visibility 0s linear 1.2s;
}
.loader.gone { opacity: 0; visibility: hidden; }
.loader-mark {
  width: clamp(180px, 22vw, 320px);
  height: auto;
  animation: loader-fade 1.3s var(--ease-editorial) forwards;
}
@keyframes loader-fade {
  0%   { opacity: 0; transform: scale(0.96); }
  60%  { opacity: 1; transform: scale(1); }
  100% { opacity: 1; transform: scale(1); }
}

/* —— CUSTOM CURSOR —— */
.cursor-dot, .cursor-ring {
  position: fixed;
  top: 0; left: 0;
  pointer-events: none;
  z-index: 9990;
  transform: translate(-50%, -50%);
  transition: width 0.3s ease, height 0.3s ease, opacity 0.3s ease, border-color 0.3s ease, background-color 0.3s ease;
  mix-blend-mode: difference;
}
.cursor-dot {
  width: 3px; height: 3px;
  background: #fff;
  border-radius: 50%;
}
.cursor-ring {
  width: 26px; height: 26px;
  border: 1px solid #fff;
  border-radius: 50%;
  transition: transform 0.18s var(--ease-soft), width 0.3s, height 0.3s, opacity 0.3s, border-color 0.3s;
}
.is-hover .cursor-ring { width: 52px; height: 52px; }
.is-hover .cursor-dot { width: 5px; height: 5px; }
@media (hover: none) {
  .cursor-dot, .cursor-ring { display: none; }
}

/* —— NAV —— */
.nav {
  position: fixed; top: 0; left: 0; right: 0;
  z-index: 200;
  padding: 22px var(--gutter);
  display: flex; align-items: center; justify-content: space-between;
  color: #fff;
  background: transparent;
  transition: background 0.5s var(--ease-editorial), backdrop-filter 0.5s var(--ease-editorial), color 0.5s var(--ease-editorial), padding 0.4s var(--ease-editorial), border-color 0.5s var(--ease-editorial);
  border-bottom: 1px solid transparent;
  pointer-events: none;
}
.nav > * { pointer-events: auto; }
.nav.scrolled {
  background: rgba(242, 240, 234, 0.82);
  -webkit-backdrop-filter: saturate(140%) blur(16px);
  backdrop-filter: saturate(140%) blur(16px);
  color: var(--ink);
  padding-top: 14px;
  padding-bottom: 14px;
  border-bottom-color: var(--line);
}
.nav-mark {
  display: inline-flex; align-items: center;
  flex-shrink: 0;
}
.nav-mark img {
  width: 92px;
  height: auto;
  /* Default state (over hero, dark bg): invert to white */
  filter: invert(1);
  transition: filter 0.45s var(--ease-editorial);
}
.nav.scrolled .nav-mark img { filter: invert(0); }
.nav-menu {
  display: flex; gap: 28px;
  font-size: 11px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  align-items: center;
}
.nav-menu a { position: relative; }
.nav-menu a:not(.lang-toggle):after {
  content: ''; position: absolute; left: 0; right: 0; bottom: -4px;
  height: 1px; background: currentColor;
  transform: scaleX(0); transform-origin: right center;
  transition: transform 0.4s var(--ease-editorial);
}
.nav-menu a:not(.lang-toggle):hover:after { transform: scaleX(1); transform-origin: left center; }
@media (max-width: 720px) { .nav-menu { gap: 16px; font-size: 10px; } }
/* On narrow phones the 4 menu items + logo overlap. Hide menu items, keep
   logo + language toggle. Editorial readers navigate by scroll anyway. */
@media (max-width: 540px) {
  .nav-menu a:not(.lang-toggle) { display: none; }
  .nav-mark img { width: 76px; }
  .nav-menu { gap: 0; }
}

/* —— CHAPTER INDEX (right-side floating) —— */
.chapter-index {
  position: fixed;
  right: clamp(16px, 2vw, 28px);
  top: 50%;
  transform: translateY(-50%);
  z-index: 180;
  display: flex; flex-direction: column;
  gap: 18px;
  pointer-events: auto;
  opacity: 0;
  transition: opacity 0.6s var(--ease-editorial), transform 0.6s var(--ease-editorial);
}
.chapter-index.show {
  opacity: 1;
}
.ch-item {
  display: flex; align-items: center; gap: 10px;
  font-family: var(--mono);
  font-size: 9.5px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--ink-faint);
  text-decoration: none;
  transition: color 0.4s var(--ease-editorial);
}
.ch-item .ch-num {
  font-weight: 500;
  letter-spacing: 0.12em;
}
.ch-item .ch-name {
  opacity: 0;
  transform: translateX(8px);
  transition: opacity 0.45s var(--ease-editorial), transform 0.45s var(--ease-editorial), color 0.4s;
  pointer-events: none;
  white-space: nowrap;
}
.ch-item:hover .ch-name,
.ch-item.active .ch-name {
  opacity: 1;
  transform: translateX(0);
  color: var(--ink);
}
.ch-item.active { color: var(--denim); }
.ch-item.active .ch-num { color: var(--denim); }
.ch-item:hover { color: var(--ink); }

/* When over light hero — invert colors */
.chapter-index.on-dark .ch-item { color: rgba(255,255,255,0.55); }
.chapter-index.on-dark .ch-item:hover { color: #fff; }
.chapter-index.on-dark .ch-item.active { color: #fff; }
.chapter-index.on-dark .ch-item.active .ch-num,
.chapter-index.on-dark .ch-item:hover .ch-name,
.chapter-index.on-dark .ch-item.active .ch-name { color: #fff; }

@media (max-width: 1024px) { .chapter-index { display: none; } }

/* —— CHAPTER MARKER (section header) —— */
.chapter-marker {
  display: flex; align-items: center; gap: 14px;
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--ink-faint);
  margin-bottom: clamp(40px, 6vw, 80px);
  white-space: nowrap;
  width: max-content;
  max-width: 100%;
}
.chapter-marker .cm-num { color: var(--denim); font-weight: 500; flex-shrink: 0; }
.chapter-marker .cm-line {
  flex: 0 0 80px;
  height: 1px;
  background: var(--ink-faint);
  opacity: 0.6;
}
.chapter-marker .cm-name { color: var(--ink-soft); white-space: nowrap; }
/* Chinese chapter names — disable letter-spacing (looks weird with CJK) */
html[data-lang="zh"] .chapter-marker { letter-spacing: 0.12em; }
html[data-lang="zh"] .chapter-marker .cm-name { letter-spacing: 0.18em; }
.statement .chapter-marker {
  position: absolute; top: 110px; left: var(--gutter);
  margin-bottom: 0;
}
.figures .chapter-marker { margin-bottom: clamp(40px, 6vw, 70px); }
.phonetic-marker {
  position: absolute; top: 90px; left: var(--gutter);
  margin-bottom: 0;
}
.phonetic-marker .cm-line { background: var(--ink-faint); }
.chapter-marker-wrap { padding: 0 var(--gutter); margin-bottom: 0; }
.collection .chapter-marker { margin-bottom: clamp(50px, 7vw, 90px); }
.footer-marker { margin-bottom: clamp(36px, 5vw, 56px); color: var(--ink-faint); }
.footer-marker .cm-num { color: var(--denim); }
.footer-marker .cm-line { background: var(--ink-faint); opacity: 0.4; }
.footer-marker .cm-name { color: var(--ink-soft); }

/* —— HERO (parallax + subtle veil) —— */
.hero {
  position: relative;
  min-height: 100vh;
  width: 100%;
  overflow: hidden;
  background: var(--bg-soft);
}
.hero-media {
  position: absolute; inset: 0;
  overflow: hidden;
  z-index: 1;
}
.hero-img {
  position: absolute;
  inset: -4% -4% -4% -4%;
  width: 108%;
  height: 108%;
  max-width: none;             /* override global img max-width: 100% */
  object-fit: cover;
  object-position: center;
  /* parallax — driven by --hero-progress (0 → 1)
     subtle scale-up + downward drift, easing into next section */
  transform:
    translate3d(0, calc(var(--hero-progress, 0) * 12vh), 0)
    scale(calc(1 + var(--hero-progress, 0) * 0.06));
  will-change: transform;
}
.hero-veil {
  position: absolute; inset: 0;
  background:
    linear-gradient(to bottom,
      rgba(0,0,0,calc(0.18 + var(--hero-progress, 0) * 0.12)) 0%,
      rgba(0,0,0,0.05) 40%,
      rgba(0,0,0,calc(0.30 + var(--hero-progress, 0) * 0.18)) 100%);
  pointer-events: none;
  z-index: 2;
  transition: background 0.05s linear;
}
.hero-frame {
  position: relative; z-index: 3;
  height: 100vh;
  display: grid;
  grid-template-rows: auto 1fr auto;
  padding: 90px var(--gutter) var(--gutter);
  color: #fff;
}
.hero-corners {
  display: flex; justify-content: space-between;
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  opacity: calc(0.85 - var(--hero-progress, 0) * 0.85);
  transform: translate3d(0, calc(var(--hero-progress, 0) * -20px), 0);
  transition: opacity 0.05s linear;
}
.hero-bottom {
  display: grid;
  grid-template-columns: 2fr 1fr;
  align-items: end;
  gap: 24px;
  transform: translate3d(0, calc(var(--hero-progress, 0) * -40px), 0);
  opacity: calc(1 - var(--hero-progress, 0) * 1.2);
}
.hero-mark {
  width: clamp(220px, 38vw, 620px);   /* shrunk so it doesn't run into "Scroll/向下" indicator */
  height: auto;
  align-self: end;
}
.hero-pron {
  font-family: var(--serif);
  font-style: italic;
  font-size: clamp(18px, 1.5vw, 22px);
  text-align: right;
  opacity: 0.92;
  color: #fff;
}
/* Air-Ease italic on dark hero must be white, not the default --denim blue. */
.hero-pron .serif-it,
.hero-pron em { color: #fff; }
.hero-scroll {
  position: absolute; bottom: 24px; left: 50%; transform: translateX(-50%);
  z-index: 4;
  font-family: var(--mono);
  font-size: 9px;
  letter-spacing: 0.32em;
  text-transform: uppercase;
  color: #fff;
  display: flex; flex-direction: column; align-items: center; gap: 10px;
  opacity: calc(0.7 - var(--hero-progress, 0) * 0.7);
}
.hero-scroll::after {
  content: '';
  width: 1px; height: 38px;
  background: #fff;
  animation: scrollLine 2s ease-in-out infinite;
}
@keyframes scrollLine {
  0%, 100% { opacity: 0.2; transform: scaleY(0.8); transform-origin: top; }
  50% { opacity: 1; transform: scaleY(1.1); }
}
@media (max-width: 720px) {
  .hero-bottom { grid-template-columns: 1fr; }
  .hero-pron { text-align: left; }
}

/* Letter-stagger split (data-split) */
.split-letter {
  display: inline-block;
  transform: translateY(0.6em);
  opacity: 0;
  transition: transform 1s var(--ease-editorial), opacity 1s var(--ease-editorial);
  transition-delay: calc(var(--i, 0) * 60ms);
}
.split-ready .split-letter,
[data-split].in .split-letter,
.in[data-split] .split-letter {
  transform: translateY(0);
  opacity: 1;
}
.hero-mark .split-letter { transition-delay: calc(0.7s + var(--i, 0) * 70ms); }

/* Word-stagger split (data-split-words) — for headline phrases */
.split-word {
  display: inline-block;
  transform: translateY(0.5em);
  opacity: 0;
  transition: transform 1.05s var(--ease-editorial), opacity 1.05s var(--ease-editorial);
  transition-delay: calc(var(--i, 0) * 90ms);
}
.in[data-split-words] .split-word,
[data-split-words].in .split-word { transform: translateY(0); opacity: 1; }

/* —— STATEMENT (full viewport quote) —— */
.statement {
  min-height: 100vh;
  display: grid;
  align-items: center;
  padding: 0 var(--gutter);
  position: relative;
}
.statement-counter {
  position: absolute;
  top: 90px; right: var(--gutter);
}
.statement-quote {
  max-width: 18ch;
  font-family: var(--serif);
  font-style: italic;
  font-weight: 300;
  font-size: clamp(40px, 6vw, 96px);
  line-height: 1.1;
  letter-spacing: -0.012em;
  color: var(--ink);
  text-wrap: balance;
}
.statement-quote em {
  color: var(--denim);
  font-style: italic;
}
.statement-foot {
  position: absolute; bottom: 64px; left: var(--gutter); right: var(--gutter);
  display: flex; justify-content: space-between; align-items: baseline;
  border-top: 1px solid var(--line);
  padding-top: 18px;
  font-size: 11px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--ink-faint);
}

/* —— PHILOSOPHY (editorial split) —— */
.philosophy {
  padding: clamp(80px, 12vw, 160px) 0;
}
.phil-grid {
  display: grid;
  grid-template-columns: 5fr 6fr 1fr;
  gap: clamp(40px, 5vw, 80px);
  align-items: start;
}
.phil-tags {
  display: flex; flex-direction: column; gap: 14px;
  font-size: 11px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--denim);
  border-left: 1px solid var(--denim);
  padding-left: 18px;
}
.phil-body p { margin-bottom: 22px; max-width: 50ch; }
.phil-body p:first-of-type { font-size: clamp(17px, 1.4vw, 22px); color: var(--ink); line-height: 1.5; max-width: 36ch; text-wrap: balance; }
.phil-aside {
  font-family: var(--serif);
  font-style: italic;
  font-size: clamp(80px, 8vw, 140px);
  line-height: 0.85;
  color: var(--beige);
  text-align: right;
}
@media (max-width: 900px) {
  .phil-grid { grid-template-columns: 1fr; }
  .phil-aside { text-align: left; font-size: clamp(60px, 14vw, 100px); }
}

/* —— FIGURES (audience callout) —— */
.figures {
  padding: clamp(80px, 12vw, 140px) 0;
  border-top: 1px solid var(--line);
  position: relative;
}
.fig-grid {
  display: grid;
  grid-template-columns: 6fr 6fr;
  gap: clamp(40px, 6vw, 100px);
  align-items: end;
}
.fig-num {
  font-family: var(--serif);
  font-style: italic;
  font-weight: 300;
  font-size: clamp(180px, 20vw, 360px);
  line-height: 0.8;
  letter-spacing: -0.04em;
  color: var(--ink);
}
.fig-num sub {
  font-family: var(--sans);
  font-style: normal;
  font-size: 0.18em;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink-faint);
  vertical-align: top;
  margin-left: 0.4em;
}
.fig-tags {
  display: flex; flex-direction: column; gap: 8px;
  font-family: var(--serif);
  font-style: italic;
  font-size: clamp(22px, 2vw, 30px);
  color: var(--denim);
  margin-bottom: 24px;
}
.fig-body { max-width: 46ch; }
.fig-body em { font-family: var(--serif); font-style: italic; color: var(--denim); }
@media (max-width: 900px) { .fig-grid { grid-template-columns: 1fr; } }

/* —— PHONETIC SOUL (huge centered moment) —— */
.phonetic {
  min-height: 100vh;
  display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  text-align: center;
  padding: 0 var(--gutter);
  background: var(--bg-soft);
  position: relative;
}
.phonetic .eyebrow { margin-bottom: 28px; }
.phonetic-pron {
  font-family: var(--serif);
  font-style: italic;
  /* Editorial size — small but distinct from body text. */
  font-size: clamp(22px, 3vw, 52px) !important;
  font-weight: 300;
  letter-spacing: -0.02em;
  color: var(--denim);
  /* Editorial gap below /Air-Ease/, plus upward pull so it sits high in the
     section and the ERRIESE wordmark below has room to breathe. !important
     to defeat any stale-cache or cascade weirdness — value is editorial intent. */
  margin-bottom: 50px !important;
  margin-top: -14vh !important;
  line-height: 1;
}
.phonetic-mark {
  margin-bottom: 64px;
  display: flex; justify-content: center;
}
.phonetic-mark img {
  /* User-tuned size — sits above the small /Air-Ease/. */
  width: clamp(120px, 22vw, 380px) !important;
  height: auto;
}
.phonetic p {
  max-width: 48ch;
  font-size: clamp(15px, 1.1vw, 18px);
  line-height: 1.75;
  text-align: center;
  margin: 0 auto;
  text-wrap: pretty;
}
/* Chinese: keep words intact, don't break inside multi-char words.
   Apply globally (any p/span/h*) under html[data-lang="zh"] so we never
   get punctuation orphaned to the next line or mid-word breaks.
   Also constrain text containers to the viewport width so long words don't
   overflow horizontally on phones. */
html[data-lang="zh"] p,
html[data-lang="zh"] h1,
html[data-lang="zh"] h2,
html[data-lang="zh"] h3,
html[data-lang="zh"] h4,
html[data-lang="zh"] li,
html[data-lang="zh"] dt,
html[data-lang="zh"] dd,
html[data-lang="zh"] .phonetic p,
html[data-lang="zh"] .camp-text p,
html[data-lang="zh"] .fig-body,
html[data-lang="zh"] .phil-body p,
html[data-lang="zh"] .event-text p,
html[data-lang="zh"] .statement-quote {
  word-break: keep-all;
  line-break: strict;
  overflow-wrap: break-word;
  /* Make Chinese punctuation hang at line-end rather than wrap to next line */
  hanging-punctuation: allow-end;
}
/* Mobile: hard horizontal-overflow guards.
   1) html + body clip horizontal — no element can leak past viewport.
   2) All images get max-width: 100% so they shrink to container, never
      overflow. (height: auto preserves aspect.)
   3) For zh text, soft-wrap as last resort if a long latin run shows up. */
@media (max-width: 540px) {
  html, body { overflow-x: hidden; max-width: 100%; }
  img, video, iframe, svg { max-width: 100%; height: auto; }
  html[data-lang="zh"] p,
  html[data-lang="zh"] li,
  html[data-lang="zh"] dd {
    overflow-wrap: break-word;
    word-break: break-word;
    max-width: 100%;
  }
}
.phonetic-marquee {
  position: absolute; bottom: 28px; left: 0; right: 0;
  display: flex; justify-content: space-between;
  padding: 0 var(--gutter);
  font-size: 10px;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  font-family: var(--mono);
  color: var(--ink-faint);
}

/* —— VISUAL SYSTEM (compact strip) —— */
.vs {
  padding: clamp(50px, 6vw, 80px) 0;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}
.vs-row {
  display: grid;
  grid-template-columns: 1fr 1.5fr 2fr;
  gap: clamp(24px, 4vw, 60px);
  align-items: baseline;
}
.vs-num { font-family: var(--serif); font-style: italic; color: var(--denim); font-size: 22px; }
.vs-title { font-size: 14px; letter-spacing: 0.05em; font-weight: 500; }
.vs-body { font-size: 13px; color: var(--ink-soft); line-height: 1.5; }
.vs-body em { color: var(--denim); }

.palette-strip {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 0;
  border-top: 1px solid var(--line);
  margin-top: 36px;
}
.swatch-mini {
  display: flex; align-items: center; justify-content: space-between;
  padding: 18px 22px;
  border-right: 1px solid var(--line);
  font-size: 12px;
  position: relative;
}
.swatch-mini:last-child { border-right: none; }
.swatch-mini::before {
  content: ''; position: absolute; left: 0; top: 0; bottom: 0; width: 6px;
}
.swatch-mini.beige::before { background: var(--beige); }
.swatch-mini.yellow::before { background: var(--yellow); }
.swatch-mini.grey::before { background: var(--bg); border-right: 1px solid var(--line); }
.swatch-mini.denim::before { background: var(--denim); }
.swatch-mini span { padding-left: 16px; font-weight: 500; }
.swatch-mini code {
  font-family: var(--mono);
  font-size: 10px;
  color: var(--ink-faint);
  letter-spacing: 0.04em;
}
@media (max-width: 720px) {
  .vs-row { grid-template-columns: 1fr; }
  .palette-strip { grid-template-columns: repeat(2, 1fr); }
  .swatch-mini:nth-child(2) { border-right: none; }
  .swatch-mini:nth-child(1), .swatch-mini:nth-child(2) { border-bottom: 1px solid var(--line); }
}

/* —— CAMPAIGN SERIES (one campaign per ~viewport) —— */
.campaigns {
  padding-top: clamp(80px, 10vw, 140px);
}
.camp-intro {
  display: grid;
  grid-template-columns: 6fr 5fr;
  gap: clamp(40px, 5vw, 100px);
  align-items: end;
  margin-bottom: clamp(60px, 8vw, 120px);
}
.camp-intro h2 {
  font-size: clamp(32px, 4vw, 56px);
  font-weight: 300;
  letter-spacing: -0.018em;
  line-height: 1.05;
  text-wrap: balance;
}
.camp-intro h2 em { font-family: var(--serif); font-weight: 400; color: var(--denim); }
@media (max-width: 900px) { .camp-intro { grid-template-columns: 1fr; } }

.camp {
  display: grid;
  grid-template-columns: 6fr 5fr;
  grid-template-rows: auto auto;
  gap: clamp(40px, 5vw, 100px);
  align-items: center;
  padding: clamp(60px, 8vw, 120px) var(--gutter);
  max-width: var(--max);
  margin: 0 auto;
}
/* Pin concept (img + text) to row 1; gallery (below) sits on row 2.
   Explicit grid-row prevents the gallery from floating above when
   .camp-reverse uses order: 1/2 to swap img/text. */
.camp > .camp-img { grid-row: 1; }
.camp > .camp-text { grid-row: 1; }
.camp-reverse { grid-template-columns: 5fr 6fr; }
.camp-reverse .camp-img { order: 2; }
.camp-reverse .camp-text { order: 1; }

.camp-img {
  position: relative;
  aspect-ratio: 4/5;
  overflow: hidden;
  background: var(--bg-soft);
}
.camp-img.tall { aspect-ratio: 3/4; }
.camp-img.square { aspect-ratio: 1/1; }
.camp-img.wide { aspect-ratio: 16/9; }

/* Atmospheric secondary photos under each campaign — placed as a third grid row
   inside the article, spanning both columns. Two-photo gallery is side-by-side
   portrait crops; single-photo gallery is one wide cinematic strip.
   order:3 keeps the gallery LAST even on .camp-reverse rows (where img/text
   use order: 1/2 to swap sides — without an explicit order on .camp-gallery,
   its default order:0 would float it to the top of the article). */
.camp-gallery {
  grid-row: 2;
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(12px, 1.4vw, 24px);
  margin-top: clamp(40px, 6vw, 80px);
}
.camp-gallery.single { grid-template-columns: 1fr; }
.camp-gallery .camp-img { aspect-ratio: 4/5; }
.camp-gallery.single .camp-img { aspect-ratio: 16/9; }
.camp-img img {
  width: 100%; height: 100%; object-fit: cover;
  transition: transform 8s var(--ease-editorial);
  /* will be subtly translated by JS via --img-shift */
  --img-shift: 0px;
  transform: translate3d(0, var(--img-shift), 0);
}
.camp:hover .camp-img img {
  transform: translate3d(0, var(--img-shift), 0) scale(1.04);
}
.camp-img-num {
  position: absolute; top: 24px; left: 24px;
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.24em;
  color: #fff;
  text-transform: uppercase;
  mix-blend-mode: difference;
}

.camp-text { padding: 20px 0; }
.camp-meta {
  display: flex; gap: 18px; align-items: baseline;
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--ink-faint);
  margin-bottom: 32px;
}
.camp-meta::before {
  content: ''; flex-basis: 32px; height: 1px;
  background: var(--ink-faint);
}
.camp-title {
  font-family: var(--serif);
  font-style: italic;
  font-weight: 300;
  font-size: clamp(48px, 6vw, 96px);
  line-height: 0.95;
  letter-spacing: -0.012em;
  color: var(--ink);
  margin-bottom: 36px;
  text-wrap: balance;
}
.camp-text p { margin-bottom: 16px; max-width: 44ch; }
.camp-text p.lead {
  font-family: var(--serif);
  font-style: italic;
  font-size: clamp(20px, 1.7vw, 28px);
  color: var(--denim);
  margin-bottom: 24px;
  line-height: 1.4;
  max-width: 30ch;
  text-wrap: balance;
}
.camp-pieces {
  margin-top: 36px;
  padding-top: 22px;
  border-top: 1px solid var(--line);
  display: flex; flex-direction: column; gap: 6px;
  font-size: 12px;
  color: var(--ink-faint);
}
@media (max-width: 900px) {
  .camp, .camp-reverse {
    grid-template-columns: 1fr;
    padding: 48px var(--gutter);
    gap: 24px;
  }
  .camp-reverse .camp-img { order: 0; }
  .camp-reverse .camp-text { order: 0; }
  /* Stack img/text/gallery vertically — pinned grid-row no longer applies
     in single-column. Reset row pinning so flow order takes over. */
  .camp > .camp-img, .camp > .camp-text { grid-row: auto; }
  .camp-gallery { grid-row: auto; grid-column: auto; margin-top: 24px; gap: 12px; }
  /* Mobile: show FULL image (no cover-crop). Width constrained to container,
     height grows with natural aspect of source image. Override the absolute-
     positioned cover-fill that desktop uses. */
  .camp-img, .camp-img.tall, .camp-img.square {
    aspect-ratio: auto;
    overflow: visible;
    background: transparent;
    height: auto;
  }
  .camp-img img,
  .camp-img.tall img,
  .camp-img.square img {
    position: static;
    inset: auto;
    width: 100%;
    height: auto;
    object-fit: contain;
    display: block;
    transform: none;
  }
}
/* Expand cue button — desktop hides it (gallery always visible). */
.camp-expand-cue {
  display: none;
  background: transparent;
  border: 1px solid var(--line);
  color: var(--ink);
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  padding: 12px 18px;
  margin-top: 24px;
  cursor: pointer;
  transition: background 0.3s var(--ease-editorial), color 0.3s var(--ease-editorial);
}
.camp-expand-cue:hover { background: var(--ink); color: #fff; }
.camp-expand-cue .cue-en, .camp-expand-cue .cue-zh { display: inline; }
html[data-lang="en"] .camp-expand-cue .cue-zh { display: none; }
html[data-lang="zh"] .camp-expand-cue .cue-en { display: none; }

@media (max-width: 540px) {
  /* Mobile-only: hide gallery by default, reveal on .expanded.
     The expand cue button becomes visible. Tap main image OR cue toggles. */
  .camp .camp-gallery { display: none; }
  .camp.expanded .camp-gallery { display: grid; }
  .camp-expand-cue { display: inline-block; }
  .camp .camp-img { cursor: pointer; }

  /* Howto method: collapse desc + gravity + faces by default;
     show only number+title+photos. .expanded reveals everything. */
  .howto-method > .howto-desc,
  .howto-method > .howto-gravity,
  .howto-method > .howto-faces { display: none; }
  .howto-method.expanded > .howto-desc,
  .howto-method.expanded > .howto-gravity,
  .howto-method.expanded > .howto-faces { display: block; }
  .howto-method.expanded > .howto-faces { display: flex; flex-direction: column; gap: 12px; }
  /* Visual cue: small chevron after the title */
  .howto-method .howto-num-title::after {
    content: '↓';
    margin-left: auto;
    font-family: var(--mono);
    font-size: 14px;
    color: var(--ink-faint);
    transition: transform 0.3s var(--ease-editorial);
  }
  .howto-method.expanded .howto-num-title::after { content: '↑'; }
  .howto-method .howto-num-title { display: flex; align-items: center; gap: 12px; }

  /* Atmospheric gallery: keep 2-column horizontal on phone (per design),
     but use a shorter 1:1 crop so each row only takes ~50% viewport
     height instead of ~80% (was 4:5 portrait). Cuts page scroll length
     dramatically without sacrificing the editorial pair feel. */
  .camp-gallery { grid-template-columns: 1fr 1fr; gap: 8px; }
  .camp-gallery .camp-img { aspect-ratio: 1/1; overflow: hidden; }
  /* Gallery thumbnails use cover-crop (secondary atmosphere, OK to crop).
     Override the 900px rule that made images contain. */
  .camp-gallery .camp-img img {
    position: absolute !important;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover !important;
  }
  /* Single (e.g. Sous le Vent souslevent_a — 16:9 wide) — let the image
     dictate its own height (object-fit: contain) so the full landscape
     frame is visible without cover-cropping the edges. */
  .camp-gallery.single .camp-img {
    aspect-ratio: auto;
    background: transparent;
    overflow: visible;
  }
  .camp-gallery.single .camp-img img {
    width: 100%;
    height: auto;
    object-fit: contain;
    display: block;
  }
  /* Tighter top margin too — gallery sits closer to text on phone */
  .camp-gallery { margin-top: 24px; }
  /* Tighten huge serif title on narrow viewports */
  .camp-title { font-size: clamp(40px, 12vw, 64px); }
}

/* —— CAMPAIGN PIECES (flat-lay grid) —— */
.cpb {
  background: var(--bg-soft);
  padding: clamp(70px, 8vw, 120px) 0 clamp(80px, 10vw, 140px);
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  margin-top: clamp(-30px, -2vw, 0px);
}
.cpb-head {
  margin-bottom: clamp(50px, 6vw, 90px);
  padding: 0 var(--gutter);
  max-width: var(--max);
  margin-left: auto;
  margin-right: auto;
}
.cpb-head h4 {
  font-family: var(--serif);
  font-style: italic;
  font-weight: 300;
  font-size: clamp(32px, 3.8vw, 60px);
  letter-spacing: -0.015em;
  line-height: 1.05;
  color: var(--ink);
}
.cpb-head h4 .serif-it { color: var(--ink); font-weight: 400; font-size: 1em; }
.cpb-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: clamp(20px, 3vw, 40px);
  padding: 0 var(--gutter);
  max-width: var(--max);
  margin: 0 auto;
}
.cpb-grid.cols-2 {
  grid-template-columns: repeat(2, minmax(0, 360px));
  justify-content: center;
}
.cpb-grid.cols-3 {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  max-width: calc(var(--max) * 0.78);
}

.cpb-item { display: block; position: relative; }
.cpb-item .cpi-img {
  aspect-ratio: 4/5;
  background: var(--bg);
  overflow: hidden;
  margin-bottom: 18px;
}
.cpb-item .cpi-img img {
  width: 100%; height: 100%;
  object-fit: cover;
  transition: transform 1.6s var(--ease-editorial);
}
.cpb-item:hover .cpi-img img { transform: scale(1.035); }
.cpb-item .cpi-color {
  font-family: var(--serif);
  font-style: italic;
  font-size: clamp(20px, 1.55vw, 26px);
  font-weight: 500;
  letter-spacing: -0.005em;
  color: var(--ink);
  margin-bottom: 6px;
  transition: color 0.4s var(--ease-editorial);
}
.cpb-item:hover .cpi-color { color: var(--denim); }
.cpb-item .cpi-type {
  font-size: 13px;
  color: var(--ink-soft);
  letter-spacing: 0;
}
@media (max-width: 900px) {
  .cpb-head { grid-template-columns: 1fr; gap: 16px; }
  .cpb-grid { grid-template-columns: repeat(2, 1fr); }
  .cpb-grid.cols-2, .cpb-grid.cols-3 { grid-template-columns: repeat(2, 1fr); max-width: var(--max); }
}
@media (max-width: 540px) {
  .cpb-grid, .cpb-grid.cols-2, .cpb-grid.cols-3 { grid-template-columns: 1fr; }
}

/* —— COLLECTION (editorial magazine grid) —— */
.collection {
  padding: clamp(100px, 14vw, 180px) 0;
  border-top: 1px solid var(--line);
}
.collection-head {
  display: grid;
  grid-template-columns: 6fr 5fr;
  gap: clamp(40px, 5vw, 100px);
  align-items: end;
  margin-bottom: clamp(60px, 8vw, 120px);
}
.collection-head h2 {
  font-size: clamp(36px, 5vw, 72px);
  font-weight: 300;
  letter-spacing: -0.018em;
  line-height: 1;
  text-wrap: balance;
}
.collection-head h2 em { font-family: var(--serif); font-weight: 400; color: var(--denim); }

.col-grid {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  column-gap: clamp(20px, 3vw, 40px);
  row-gap: clamp(60px, 8vw, 120px);
}
.col-card {
  display: block;
  text-decoration: none;
  color: inherit;
  position: relative;
}
.col-card .ci {
  position: relative;
  aspect-ratio: 3/4;
  background: var(--bg-soft);
  overflow: hidden;
  margin-bottom: 24px;
}
.col-card .ci img {
  width: 100%; height: 100%; object-fit: cover;
  transition: transform 1.6s var(--ease-editorial), filter 0.6s var(--ease-editorial);
}
.col-card:hover .ci img { transform: scale(1.04); filter: brightness(0.92); }
.col-card .ci-num {
  position: absolute; top: 18px; left: 18px;
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.26em;
  text-transform: uppercase;
  color: #fff;
  mix-blend-mode: difference;
}
.col-card .ci-cta {
  position: absolute; bottom: 18px; right: 18px;
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.26em;
  text-transform: uppercase;
  color: #fff;
  mix-blend-mode: difference;
  opacity: 0;
  transform: translateX(-6px);
  transition: opacity 0.5s var(--ease-editorial), transform 0.5s var(--ease-editorial);
}
.col-card:hover .ci-cta { opacity: 1; transform: translateX(0); }
.col-meta {
  display: flex; align-items: baseline; gap: 14px;
  font-size: 11px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--ink-faint);
  margin-bottom: 6px;
}
.col-title {
  font-family: var(--serif);
  font-style: italic;
  font-size: clamp(24px, 2.2vw, 36px);
  font-weight: 500;
  letter-spacing: -0.012em;
  color: var(--ink);
  margin-bottom: 6px;
  margin-top: 4px;
  transition: color 0.4s var(--ease-editorial);
}
.col-card:hover .col-title { color: var(--denim); }
.col-sub {
  font-size: 13px;
  color: var(--ink-soft);
  letter-spacing: 0.02em;
}

/* asymmetric magazine offsets */
.col-1 { grid-column: 1 / span 6; }
.col-2 { grid-column: 8 / span 5; margin-top: clamp(60px, 10vw, 160px); }
.col-3 { grid-column: 1 / span 5; }
.col-4 { grid-column: 7 / span 6; margin-top: clamp(40px, 6vw, 100px); }
.col-5 { grid-column: 2 / span 5; }
.col-6 { grid-column: 8 / span 5; margin-top: clamp(60px, 10vw, 160px); }
.col-7 { grid-column: 1 / span 6; }
.col-8 { grid-column: 8 / span 5; margin-top: clamp(40px, 6vw, 100px); }

@media (max-width: 900px) {
  .col-grid { grid-template-columns: 1fr; row-gap: 60px; }
  .col-1, .col-2, .col-3, .col-4, .col-5, .col-6, .col-7, .col-8 {
    grid-column: auto; margin-top: 0;
  }
}

/* —— EVENT —— */
.event {
  padding: clamp(80px, 10vw, 140px) 0;
  border-top: 1px solid var(--line);
}
.event-grid {
  display: grid;
  grid-template-columns: 5fr 6fr 1fr;
  gap: clamp(40px, 6vw, 100px);
  align-items: center;
}
.event-text { padding-right: 40px; }
.event-title {
  font-family: var(--serif);
  font-style: italic;
  font-weight: 300;
  font-size: clamp(36px, 4vw, 64px);
  line-height: 1;
  letter-spacing: -0.012em;
  margin: 18px 0 32px;
  text-wrap: balance;
}
.event-text p { margin-bottom: 16px; max-width: 44ch; }
.event-text em.serif-it { color: var(--denim); }
/* Event images cluster — 1 feature image (event_1) on top spanning full width
   + 2 detail thumbs (event_2, event_3) side by side beneath. Photos are
   landscape 3:2, so cells share that aspect for clean cropping. */
.event-images {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: auto auto;
  gap: clamp(8px, 1vw, 14px);
}
.event-img {
  aspect-ratio: 3/2;
  overflow: hidden;
  background: var(--bg-soft);
}
.event-img.event-img-main {
  grid-column: 1 / -1;
}
.event-img img {
  width: 100%; height: 100%; object-fit: cover;
  transition: transform 1.6s var(--ease-editorial);
}
.event-img:hover img { transform: scale(1.03); }
.event-mark {
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: var(--ink-faint);
  writing-mode: vertical-rl;
  text-align: right;
}
@media (max-width: 900px) {
  .event-grid { grid-template-columns: 1fr; }
  .event-mark { writing-mode: initial; text-align: left; }
}
@media (max-width: 540px) {
  /* Event_1 大主图全宽，event_2 + event_3 横向并排在下方，与主图左对齐。
     主图保持 3:2 横向；下面一行两个小图各占 1/2 宽度。 */
  .event-images { grid-template-columns: 1fr 1fr; gap: 8px; }
  .event-img.event-img-main { grid-column: 1 / -1; }
  .event-img { aspect-ratio: 3/2; }
}

/* —— FOOTER —— */
.footer {
  background: var(--bg);                  /* light cream tone */
  color: var(--ink);
  padding: clamp(60px, 8vw, 120px) 0 36px;
  border-top: 1px solid var(--line);
}
.footer-mark {
  width: clamp(280px, 50vw, 600px);       /* hard upper cap so the wordmark stays editorial */
  height: auto;
  margin-bottom: 14px;
}
.footer-tag {
  font-family: var(--serif);
  font-style: italic;
  font-size: clamp(22px, 2vw, 32px);
  color: var(--ink-faint);
  margin-bottom: clamp(60px, 10vw, 120px);
}
.footer-grid {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr 1fr;
  gap: clamp(40px, 5vw, 80px);
  padding-bottom: 80px;
  border-bottom: 1px solid var(--line);
}
.footer-grid h4 {
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--ink-faint);
  margin-bottom: 18px;
  font-weight: 400;
}
.footer-grid p, .footer-grid a {
  color: var(--ink);
  font-size: 14px;
  display: block;
  margin-bottom: 8px;
}
.footer-grid a { position: relative; transition: opacity 0.4s var(--ease-editorial); }
.footer-grid a:hover { opacity: 0.6; }
.footer-bottom {
  padding-top: 30px;
  display: flex; justify-content: space-between; align-items: center;
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--ink-faint);
}
@media (max-width: 720px) {
  .footer-grid { grid-template-columns: 1fr 1fr; }
  .footer-bottom { flex-direction: column; gap: 12px; align-items: flex-start; }
}

/* —— REVEAL ON SCROLL —— */
.reveal { opacity: 0; transform: translateY(36px); transition: opacity 1.1s var(--ease-editorial), transform 1.1s var(--ease-editorial); }
.reveal.in { opacity: 1; transform: translateY(0); }
.reveal-delay-1 { transition-delay: 0.12s; }
.reveal-delay-2 { transition-delay: 0.22s; }
.reveal-delay-3 { transition-delay: 0.32s; }

@media (prefers-reduced-motion: reduce) {
  .reveal, .reveal.in { opacity: 1; transform: none; transition: none; }
  .loader-mark { animation: none; }
  .hero-scroll::after { animation: none; }
  .split-letter, .split-word { transform: none; opacity: 1; transition: none; }
  .hero-img { transform: none; }
  .hero-bottom, .hero-corners { transform: none; opacity: 1; }
}

/* =====================================================
   SERIES DETAIL PAGES
   ===================================================== */

.series-hero {
  display: grid;
  grid-template-columns: 7fr 5fr;
  min-height: 100vh;
  padding-top: 70px;
}
.series-hero-image { background: var(--bg-soft); overflow: hidden; }
.series-hero-image img { width: 100%; height: 100%; object-fit: cover; }
.series-hero-text {
  display: flex; flex-direction: column; justify-content: center;
  padding: clamp(80px, 10vw, 140px) clamp(48px, 7vw, 120px);
  width: 100%;           /* fill grid column instead of capping at 720px */
  min-width: 0;          /* allow grid shrinking so children can wrap */
  overflow: hidden;      /* safety against rare overflow */
}
.series-hero-text > * { max-width: 100%; }   /* every child stays within container */
/* Series hero text — strict 3-style system:
   1. Eyebrow  (mono uppercase, ink-faint or denim) — meta + tag-row
   2. Title    (italic Cormorant, denim)             — series-hero-title
   3. Body     (sans regular, ink-soft)              — subtitle + paragraphs
   Inline italic emphasis on Latin foreign terms uses Cormorant italic
   inside body — same family family as title, so no new font added. */
.series-hero-meta {
  font-family: var(--mono);
  font-size: 10.5px; letter-spacing: 0.28em; text-transform: uppercase;
  color: var(--ink-faint); margin-bottom: 36px;
  display: flex; gap: 18px; align-items: center;
  font-weight: 400;
}
.series-hero-meta::before {
  content: ''; width: 40px; height: 1px; background: var(--ink-faint);
}
.series-hero-title {
  font-family: var(--serif);
  font-style: italic;
  font-weight: 300;
  /* Sized so the longest brand title ("Petit Mouvement", "The Curve Paradox",
     "Wandering Verses") fits within the narrow right column without overflow. */
  font-size: clamp(36px, 4.4vw, 64px);
  letter-spacing: -0.018em;
  line-height: 1;
  margin-bottom: 22px;
  overflow-wrap: break-word;
  word-break: normal;
  hyphens: none;
  white-space: normal;
  max-width: 100%;
  color: var(--ink);
}
/* Override the global zh em.serif-it nowrap rule for hero title — allow wrapping */
.series-hero-title em,
.series-hero-title em.serif-it,
html[data-lang="zh"] .series-hero-title em,
html[data-lang="zh"] .series-hero-title em.serif-it {
  display: inline;
  white-space: normal;
  font-style: italic;
}
.series-hero-subtitle {
  font-size: clamp(15px, 1.15vw, 18px);
  color: var(--ink-soft);
  margin-bottom: 36px;
  font-family: var(--sans);
  font-weight: 400;
  letter-spacing: 0.005em;
  line-height: 1.4;
}
.series-hero-text .tag-row {
  display: flex; gap: 22px; flex-wrap: wrap;
  margin-bottom: 36px;
  font-size: 10.5px;
  letter-spacing: 0.26em;
  text-transform: uppercase;
  color: var(--denim);
  font-family: var(--mono);
  font-weight: 400;
  padding-bottom: 28px;
  border-bottom: 1px solid var(--line);
}
.series-hero-text p {
  margin-bottom: 18px;
  font-family: var(--sans);
  color: var(--ink-soft);
  font-size: clamp(13.5px, 0.95vw, 15px);
  line-height: 1.7;
  max-width: 52ch;
}
.series-hero-text p em.serif-it,
.series-hero-text p em { font-family: var(--serif); font-style: italic; color: var(--denim); display: inline; }
@media (max-width: 900px) {
  .series-hero { grid-template-columns: 1fr; }
  .series-hero-image { aspect-ratio: 4/5; min-height: auto; }
  .series-hero-text { padding: 60px 24px; }
}

/* How to Wear */
.howto {
  padding: clamp(120px, 14vw, 200px) 0 clamp(120px, 14vw, 200px);
  background: var(--bg-soft);
}
.howto-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(28px, 3vw, 60px);
  margin-top: clamp(50px, 6vw, 80px);
}
.howto-grid.two { grid-template-columns: repeat(2, 1fr); }
@media (max-width: 720px) { .howto-grid, .howto-grid.two { grid-template-columns: 1fr; } }
/* —— Legacy single-image howto (kept as fallback) —— */
.howto-item { border-top: 1px solid var(--line-strong); padding-top: 24px; }
.howto-img { aspect-ratio: 3/4; margin-bottom: 22px; overflow: hidden; background: var(--bg); }
.howto-img img { width: 100%; height: 100%; object-fit: cover; object-position: center; transition: transform 1.6s var(--ease-editorial); }
.howto-item:hover .howto-img img { transform: scale(1.04); }
.howto-num { font-family: var(--serif); font-style: italic; font-size: 36px; color: var(--denim); margin-bottom: 18px; }
.howto-item h3 { font-size: 22px; margin-bottom: 12px; font-weight: 500; letter-spacing: -0.01em; }
.howto-item p { font-size: 14px; line-height: 1.6; }

/* ============================================
   NEW HOWTO MODULE — brand-book aligned
   Header (Two/Three Ways to Wear · Series N)
   + N columns with: title, description, 2 photos,
   visual gravity commentary, face shape recommendations.
   ============================================ */
.howto-head {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: end;
  /* Match the standard --line hairline so this header divider doesn't read
     as a heavy black bar — was --ink. */
  border-top: 1px solid var(--line);
  padding-top: 28px;
  margin-bottom: clamp(50px, 6vw, 90px);
  gap: 24px;
}
.howto-head-l {
  display: flex;
  flex-direction: column;
  gap: 6px;
  font-family: var(--serif);
  font-style: italic;
  font-weight: 300;
  font-size: clamp(34px, 4vw, 56px);
  letter-spacing: -0.02em;
  line-height: 1;
  color: var(--ink);
  text-transform: none;
}
.howto-head-r {
  color: var(--ink-faint);
  font-family: var(--mono);
  font-size: 10.5px;
  letter-spacing: 0.26em;
  text-transform: uppercase;
}

/* Howto methods grid — subgrid aligns 5 rows horizontally across columns:
   title / desc / photos / gravity / faces. Columns without gravity/faces
   (e.g. series-3 illustration column) leave those rows empty. */
.howto-grid {
  display: grid;
  /* All 5 rows explicit so subgrid spans them and items don't fall into
     the photos row by accident. */
  grid-template-rows: auto auto auto auto auto;
  gap: clamp(34px, 3.5vw, 60px) clamp(28px, 3vw, 60px);
  align-items: start;
}
.howto-grid.cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.howto-grid.cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
/* Mobile: collapse all column variants to 1-up.
   The earlier rule on `.howto-grid` alone gets overridden by the higher-
   specificity `.cols-3`/`.cols-2` selectors above, so we need explicit
   overrides at narrow widths. Each method becomes a full-width vertical
   block — much more readable than 3 cramped columns of 90px each. */
@media (max-width: 720px) {
  .howto-grid,
  .howto-grid.cols-2,
  .howto-grid.cols-3,
  .howto-grid.two {
    grid-template-columns: 1fr;
    gap: 56px;
  }
  .howto-method {
    /* Reset subgrid pinning — each child flows naturally in the column */
    grid-template-rows: auto;
  }
  .howto-method > .howto-num-title,
  .howto-method > .howto-desc,
  .howto-method > .howto-photos,
  .howto-method > .howto-photos.illus,
  .howto-method > .howto-gravity,
  .howto-method > .howto-faces { grid-row: auto; }
}

.howto-method {
  display: grid;
  grid-template-rows: subgrid;
  grid-row: 1 / -1;          /* span all 5 explicit rows of parent */
  grid-template-columns: 1fr;
  row-gap: 22px;
}
.howto-method > .howto-num-title { grid-row: 1; align-self: start; }
.howto-method > .howto-desc      { grid-row: 2; align-self: start; }
.howto-method > .howto-photos    { grid-row: 3; align-self: start; }
.howto-method > .howto-gravity   { grid-row: 4; align-self: start; }
.howto-method > .howto-faces     { grid-row: 5; align-self: start; }
@supports not (grid-template-rows: subgrid) {
  /* Fallback: flex column for browsers without subgrid support. */
  .howto-method { display: flex; flex-direction: column; gap: 22px; }
}
.howto-num-title {
  display: flex; gap: 14px; align-items: baseline;
  font-size: 13px;
  font-weight: 500;
  letter-spacing: -0.005em;
  padding-bottom: 14px;
  border-bottom: 1px solid var(--line);
}
.howto-method .howto-num-circ {
  font-family: var(--serif);
  font-style: italic;
  font-weight: 300;
  font-size: 28px;
  color: var(--denim);
  line-height: 1;
}
.howto-method .howto-title {
  font-family: var(--serif);
  font-style: italic;
  font-weight: 400;
  font-size: clamp(20px, 1.8vw, 26px);
  letter-spacing: -0.015em;
  color: var(--ink);
  line-height: 1.1;
}
.howto-method .howto-desc {
  font-size: 13.5px;
  line-height: 1.7;
  color: var(--ink-soft);
  max-width: 38ch;
  margin-bottom: 6px;
}
.howto-photos {
  display: grid; grid-template-columns: 1fr 1fr; gap: 0;
  margin: 8px 0 4px;
}
.howto-photos.single { grid-template-columns: 1fr; }
.howto-photos.illus { grid-template-columns: 1fr; }
.howto-photos > div {
  aspect-ratio: 556 / 683;
  overflow: hidden;
  position: relative;
}
.howto-photos.single > div { aspect-ratio: 1 / 1; }
/* illus container — square cell so the near-square illustration (≈0.92
   aspect) can scale up to fill the column. This makes the middle method
   visually as large as the 2-photo blocks beside it. */
.howto-photos.illus {
  /* Match width AND vertical margin of sibling 2-photo blocks so the top
     edge aligns horizontally across columns (was margin:0 which made it
     8px higher than 2-photo containers). */
  width: 100%;
  margin: 8px 0 4px;
  padding: 0;
  box-sizing: border-box;
}
.howto-photos.illus > div {
  aspect-ratio: 1 / 1;
  background: transparent;
  width: 100%;
  box-sizing: border-box;
}
.howto-photos img {
  position: absolute; inset: 0;
  width: 101%; height: 101%;
  object-fit: cover;
  object-position: center;
  display: block;
  /* Smooth the hover scale below — without this the image jumps abruptly. */
  transition: transform 1.4s var(--ease-editorial);
}
.howto-photos.illus img {
  object-fit: contain;
  /* Anchor to top-left so the illustration aligns horizontally with the
     top edges of the photo cells in sibling columns. */
  object-position: left top;
  padding: 0;
  width: 100%;
  height: 100%;
}
.howto-method:hover .howto-photos img { transform: scale(1.025); }

/* Visual-gravity block — eyebrow + body in editorial rhythm. */
.howto-gravity {
  margin-top: 18px;
  display: flex; flex-direction: column; gap: 8px;
  border-top: 1px solid var(--line);
  padding-top: 18px;
}
.howto-gravity-label {
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--denim);
}
.howto-gravity-text {
  color: var(--ink);
  max-width: 38ch;
  font-size: 14px;
  line-height: 1.55;
}

/* Face-shape recommendation — compact horizontal rail. The placeholder PNGs
   are visually neutral, so we shrink the icon area and let the labels carry
   the meaning until real face illustrations are dropped in. */
.howto-faces {
  margin-top: 20px;
  display: flex; flex-direction: column; gap: 12px;
}
.howto-recommend {
  display: block;
  font-family: var(--mono);
  font-size: 9.5px;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--ink-faint);
}
.howto-face-row {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 14px;
}
.face-card {
  display: flex; flex-direction: column; align-items: center;
  text-align: center;
  gap: 10px;
}
/* Face-shape icon — illustrated head with dotted face-shape outline.
   Sized comfortably so the dotted outline reads, but not so big that it
   competes with the howto photos above. */
.face-card img {
  width: 56%;
  max-width: 68px;
  aspect-ratio: 1 / 1;
  height: auto;
  object-fit: contain;
  display: block;
  /* Soften the white fill so the icon recedes into the page bg instead of
     standing out as a hard white block. */
  opacity: 0.7;
}
.face-card .face-zh {
  font-size: 12px;
  color: var(--ink);
  letter-spacing: 0.04em;
  font-weight: 500;
}
/* EN: hide ZH label — EN icons should have English label baked into image. */
html[data-lang="en"] .face-card .face-zh { display: none; }

@media (max-width: 900px) {
  .howto-grid.cols-3, .howto-grid.cols-2 { grid-template-columns: 1fr; }
  /* .howto-head is display:grid (1fr auto) — collapse to a single column with
     align-items:start so the section title and meta stack cleanly. */
  .howto-head { grid-template-columns: 1fr; align-items: start; gap: 12px; }
  .howto-head-r { justify-self: start; }
}

/* —— Series 07 (Curve Paradox) howto: 4 wear angles + 4 features —— */
.g7-angles {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 0;
  margin-top: clamp(36px, 4vw, 56px);
}
.g7-angles .ga {
  aspect-ratio: 1 / 1;
  overflow: hidden;
  background: var(--bg-soft);
  position: relative;
}
.g7-angles .ga img {
  position: absolute; inset: 0;
  width: 101%; height: 101%;
  object-fit: cover;
  object-position: center top;
  display: block;
}
.g7-features {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: clamp(20px, 2vw, 40px);
  margin-top: clamp(36px, 3vw, 56px);
  border-top: 1px solid var(--line);
  padding-top: clamp(28px, 3vw, 44px);
}
.g7-features .gf {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.g7-features .gf-label {
  font-family: var(--mono);
  font-size: 10.5px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--denim);
}
.g7-features .gf p {
  font-size: 12.5px;
  line-height: 1.6;
  color: var(--ink-soft);
  max-width: 32ch;
}
@media (max-width: 900px) {
  .g7-angles { grid-template-columns: repeat(2, 1fr); }
  .g7-features { grid-template-columns: repeat(2, 1fr); gap: 24px; }
}
@media (max-width: 540px) {
  .howto-photos { grid-template-columns: 1fr 1fr; }
  .face-card svg { width: 36px; height: 42px; }
}

/* —— PRODUCTS — editorial detail layout —— */
.products { padding: clamp(120px, 14vw, 200px) 0 clamp(80px, 10vw, 140px); }
.products-head {
  display: grid;
  grid-template-columns: 5fr 6fr;
  gap: clamp(48px, 6vw, 100px);
  align-items: end;
  margin-bottom: clamp(100px, 12vw, 180px);
  padding-bottom: clamp(40px, 5vw, 80px);
  border-bottom: 1px solid var(--line);
}
.products-head h2 {
  font-family: var(--serif);
  font-style: italic;
  font-weight: 300;
  font-size: clamp(48px, 6vw, 96px);
  letter-spacing: -0.025em;
  line-height: 0.95;
  text-wrap: balance;
}
.products-head h2 em {
  font-style: italic;
  color: var(--denim);
}
.products-head p {
  font-size: clamp(14px, 1.05vw, 17px);
  line-height: 1.65;
  max-width: 44ch;
  /* Push to right edge of column and right-align — every line ends flush
     with the page's right gutter for an editorial right-rag column. */
  margin-left: auto;
  text-align: right;
  color: var(--ink-soft);
}
@media (max-width: 900px) {
  .products-head { grid-template-columns: 1fr; gap: 28px; }
  .products-head p { text-align: left; margin-left: 0; }
}

/* —— SS26-aligned product-row layout · v3 editorial polish ——
   Mirrors the SS26 deck with refined typographic rhythm:
   LEFT column (5fr) = identity (code/price/name/materials) + main flatlay
   RIGHT column (7fr) = three numbered sections (How to Wear · Adjustment · Styling)
*/
.product-row {
  display: grid;
  grid-template-columns: 5fr 7fr;
  gap: clamp(48px, 5vw, 96px);
  margin-bottom: clamp(140px, 16vw, 240px);
  align-items: stretch;          /* both columns share row height */
  position: relative;
}
.product-row:last-child { margin-bottom: 0; }
/* Subtle hairline separator between rows for editorial rhythm */
.product-row + .product-row::before {
  content: '';
  position: absolute;
  top: calc(-1 * clamp(70px, 8vw, 120px));
  left: 0; right: 0;
  height: 1px;
  background: var(--line);
}
.product-row.alt { grid-template-columns: 7fr 5fr; }
.product-row.alt .pd-side { order: 2; }
.product-row.alt .pd-sections { order: 1; }

/* LEFT column: identity + main flatlay */
.pd-side {
  display: flex;
  flex-direction: column;
  gap: clamp(32px, 3.5vw, 52px);
  padding-top: 4px;
  height: 100%;
}

/* Identity block — mono code/price + serif italic name */
.pd-info {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: baseline;
  row-gap: 18px;
  border-bottom: 1px solid var(--line);
  padding-bottom: 28px;
}
.pd-code {
  font-family: var(--mono);
  font-size: 10.5px;
  letter-spacing: 0.28em;
  color: var(--ink);
  text-transform: uppercase;
  grid-column: 1; grid-row: 1;
}
.pd-price {
  font-family: var(--mono);
  font-size: 12px;
  letter-spacing: 0.12em;
  color: var(--denim);
  grid-column: 2; grid-row: 1;
  text-align: right;
}
.pd-name {
  font-family: var(--serif);
  font-style: italic;
  font-weight: 400;
  font-size: clamp(36px, 4vw, 64px);
  line-height: 1;
  letter-spacing: -0.025em;
  color: var(--ink);
  grid-column: 1 / -1;
  margin-top: 8px;
  text-wrap: balance;
}
.pd-adjustment {
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.22em;
  color: var(--ink-faint);
  text-transform: uppercase;
  grid-column: 1 / -1;
}
.pd-materials {
  display: grid;
  grid-template-columns: auto 1fr;
  column-gap: 32px;
  row-gap: 14px;
  font-size: 12.5px;
  margin: 0;
}
.pd-materials dt {
  font-family: var(--mono);
  font-size: 9.5px;
  letter-spacing: 0.26em;
  text-transform: uppercase;
  color: var(--ink-faint);
  align-self: start;
  padding-top: 3px;
}
.pd-materials dd {
  color: var(--ink-soft);
  line-height: 1.55;
  margin: 0;
}

.pd-main {
  position: relative;
  overflow: hidden;
  background: var(--bg-soft);
  /* margin-top: auto pushes pd-main to the bottom of the pd-side column,
     so its bottom edge aligns with the bottom of the right (sections) column. */
  margin-top: auto;
  /* Square so the full product (brim + crown) is visible without cropping. */
  aspect-ratio: 1 / 1;
}
/* Reversible products (e.g. Series 8 H1/H5A/H5B) — show both sides as a wide
   horizontal pair (A side · B side). Each image is square; the pair's combined
   aspect is 2:1.
   Width is 74% of the column so the pair's height ≈ styling-row height
   (3 photos at 9:10 in a column-width grid → row height = 10W/27 ≈ 0.37W;
   dual at 2:1 needs width ≈ 0.74W to hit the same height). With
   margin-top:auto bottom-aligning pd-main, the pair sits flush with the bottom
   of the right column, level with the styling row. */
.pd-main.dual {
  aspect-ratio: 2 / 1;
  display: flex;
  flex-direction: row;
  gap: 4px;
  background: transparent;
  width: 74%;
  max-width: 74%;
  margin-left: 0;
  margin-right: auto;
}
.pd-main.dual img {
  position: relative;
  inset: auto;
  width: calc(50% - 2px);
  height: 100%;
  flex: 0 0 calc(50% - 2px);
  aspect-ratio: 1 / 1;
  object-fit: cover;
  object-position: center;
  background: var(--bg-soft);
  display: block;
}
.pd-main img {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover; object-position: center;
  display: block;
  transition: transform 2s var(--ease-editorial);
}
.product-row:hover .pd-main img { transform: scale(1.025); }

/* RIGHT column: SS26-style numbered sections — top-stacked with a fixed gap.
   Whether the row has 2 sections (e.g. H7, H8) or 3 sections (H1, H5-A, H5-B,
   plus most other series), the howto → adjust gap and adjust → styling gap
   stay the same, so the vertical rhythm reads consistent across all rows in
   a series. Per H series unification: never use space-between — that made
   3-section rows breathe wider than 2-section rows. */
.pd-sections {
  display: flex;
  flex-direction: column;
  gap: clamp(48px, 5vw, 80px);
  padding-top: 4px;
  counter-reset: pd-sec;
  height: 100%;
  justify-content: flex-start;
}
.pd-howto-section,
.pd-adjust-section,
.pd-styling-section {
  counter-increment: pd-sec;
}
.pd-section-label {
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--ink);
  /* Use the standard --line hairline so this divider matches every other
     subtle separator on the page (was --ink which read as full black). */
  border-top: 1px solid var(--line);
  padding-top: 18px;
  margin-bottom: 18px;
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: baseline;
  gap: 16px;
}
.pd-section-label::before {
  content: counter(pd-sec, decimal-leading-zero);
  font-family: var(--serif);
  font-style: italic;
  font-weight: 300;
  font-size: 22px;
  letter-spacing: 0;
  color: var(--denim);
  text-transform: none;
  line-height: 1;
}
.pd-section-label > span:first-of-type {
  font-weight: 500;
}
.pd-section-label .pd-sec-meta {
  /* Hidden — the product code already appears in .pd-info on the left,
     so the right-edge meta tag was redundant. */
  display: none;
}

/* Section 1: How to Wear — variable count, 1:1 thumbs (no cropping of source) */
.pd-howto {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 0;
}
/* data-count="1": single image — keep the same column width as a 4-up cell so
   it doesn't stretch the full row width. justify-content: start anchors it left. */
.pd-howto[data-count="1"] { grid-template-columns: minmax(0, 25%); justify-content: start; }
.pd-howto[data-count="2"] { grid-template-columns: repeat(2, 1fr); }
.pd-howto[data-count="3"] { grid-template-columns: repeat(3, 1fr); }
.pd-howto[data-count="4"] { grid-template-columns: repeat(4, 1fr); }
.pd-howto[data-count="5"] { grid-template-columns: repeat(5, 1fr); }
.pd-howto .ph {
  aspect-ratio: 1 / 1;             /* matches square source — preserves full hat */
  overflow: hidden;
  position: relative;
  background: var(--bg-soft);
}
.pd-howto .ph img {
  position: absolute;
  /* Bleed 1.5% on each side to crop any baked-in white margin from source PNGs
     (some shots have a thin white strip at one edge from compositing). The
     subject is always studio-centered so a 1.5% overscan never clips content. */
  inset: -1.5%;
  width: 103%; height: 103%;
  object-fit: cover;
  object-position: center center;
  display: block;
  transition: transform 1.2s var(--ease-editorial);
}
.pd-howto .ph:hover img { transform: scale(1.035); }

/* —— G-series special layout: 4 features grid replaces adjust+styling —— */
.pd-features-section { counter-increment: pd-sec; }
.pd-features {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1px;
  background: var(--line);
  border: 1px solid var(--line);
}
.pf {
  display: flex;
  flex-direction: column;
  background: var(--bg-soft);
  min-height: 0;
}
.pf-photo {
  aspect-ratio: 4 / 3;
  overflow: hidden;
  position: relative;
  background: var(--bg);
}
.pf-photo img {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  object-position: center;
  display: block;
  transition: transform 1.4s var(--ease-editorial);
}
.pf:hover .pf-photo img { transform: scale(1.04); }
.pf-text {
  padding: clamp(20px, 2vw, 32px);
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.pf-num {
  font-family: var(--serif);
  font-style: italic;
  font-weight: 300;
  font-size: 22px;
  color: var(--denim);
  line-height: 1;
}
.pf-label {
  font-family: var(--serif);
  font-style: italic;
  font-weight: 400;
  font-size: clamp(18px, 1.6vw, 24px);
  letter-spacing: -0.01em;
  color: var(--ink);
  line-height: 1.15;
}
.pf-meta {
  font-family: var(--mono);
  font-size: 10.5px;
  letter-spacing: 0.18em;
  color: var(--ink-soft);
  text-transform: uppercase;
  margin-top: 2px;
}
@media (max-width: 720px) {
  .pd-features { grid-template-columns: 1fr; }
}

/* Section 2: Adjustment (sizing label + detail photo, 1:2 split) */
/* Match the section-label spacing pattern: hairline divider + padding-top
   above the row, so the gap between howto and adjust has the same rhythm
   as the gap between adjust and styling. */
.pd-adjust-section {
  border-top: 1px solid var(--line);
  padding-top: 18px;
}
.pd-adjust-row {
  display: grid;
  /* 2fr label / 1fr photo so the photo cell takes ~1/3 of the row width,
     matching the size of a single howto thumb in series 5 (data-count=3). */
  grid-template-columns: 2fr 1fr;
  gap: 0;
  align-items: stretch;
  background: var(--bg-soft);
}
.pd-adjust-label {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 12px;
  padding: clamp(28px, 3vw, 48px);
}
.pd-adjust-label-title {
  font-family: var(--serif);
  font-style: italic;
  font-weight: 400;
  font-size: clamp(20px, 1.8vw, 26px);
  letter-spacing: -0.01em;
  color: var(--ink);
  line-height: 1.1;
}
.pd-adjust-label-size {
  font-family: var(--mono);
  font-size: 10.5px;
  color: var(--ink-soft);
  letter-spacing: 0.16em;
  text-transform: uppercase;
}
.pd-adjust-photo {
  /* 1:1 square — combined with the 2fr/1fr row split, the photo cell ends
     up the same size as a single howto thumb (square at ~1/3 column width). */
  aspect-ratio: 1 / 1;
  overflow: hidden;
  position: relative;
}
.pd-adjust-photo img {
  position: absolute; inset: 0;
  width: 101%; height: 101%;
  object-fit: cover; object-position: center;
  display: block;
  transition: transform 1.4s var(--ease-editorial);
}
.pd-adjust-section:hover .pd-adjust-photo img { transform: scale(1.03); }

/* Reversible products (H1, H5-A, H5-B) — both reversible-side photos live
   inside the adjust-photo slot, side by side. Each image stays a true 1:1
   square (no crop), so the wrapper widens to 2:1. The parent adjust-row
   re-allocates columns (1fr label / 2fr photo) so the wider photo cell still
   yields squares the same height as a single 1:1 photo on H7/H8. */
.pd-adjust-row:has(.pd-adjust-photo.dual) {
  grid-template-columns: 1fr 2fr;
}
.pd-adjust-photo.dual {
  aspect-ratio: 2 / 1;
  display: flex;
  flex-direction: row;
  gap: 4px;
}
.pd-adjust-photo.dual img {
  position: relative;
  inset: auto;
  width: calc(50% - 2px);
  height: 100%;
  flex: 0 0 calc(50% - 2px);
  aspect-ratio: 1 / 1;
  object-fit: cover;
  object-position: center;
  background: var(--bg-soft);
  display: block;
  transition: transform 1.4s var(--ease-editorial);
}

/* Section 3: Styling — variable count (1–3 photos), columns adapt to data-count */
.pd-styling {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0;
}
.pd-styling[data-count="1"] { grid-template-columns: minmax(0, 60%); justify-content: start; }
.pd-styling[data-count="2"] { grid-template-columns: repeat(2, 1fr); }
.pd-styling[data-count="3"] { grid-template-columns: repeat(3, 1fr); }
.pd-styling .ps {
  aspect-ratio: 9 / 10;
  overflow: hidden;
  position: relative;
  background: var(--bg-soft);
}
.pd-styling .ps img {
  position: absolute; inset: 0;
  width: 101%; height: 101%;
  object-fit: cover; object-position: center;
  display: block;
  transition: transform 1.2s var(--ease-editorial);
  /* webp v82 */
}
.pd-styling .ps:hover img { transform: scale(1.04); }
.pd-styling:empty { display: none; }

/* If a colorway has no styling photos (e.g. H7, H8), hide the whole section */
.pd-styling-section:not(:has(.ps)) { display: none; }

@media (max-width: 900px) {
  .product-row, .product-row.alt { grid-template-columns: 1fr; gap: 28px; margin-bottom: 100px; }
  .product-row.alt .pd-side { order: 0; }
  .product-row.alt .pd-sections { order: 0; }
  .pd-adjust-row { grid-template-columns: 1fr; }
  .pd-adjust-photo { aspect-ratio: 16/9; }
}
@media (max-width: 540px) {
  /* Phone: stack thumbs into a 2-up grid for both how-to and styling rails. */
  .pd-howto { grid-template-columns: repeat(2, 1fr); }
  .pd-styling { grid-template-columns: repeat(2, 1fr); }
  .pd-lifestyle { grid-template-columns: 1fr; }
}

/* Other series */
.other-series {
  padding: clamp(100px, 12vw, 180px) 0 clamp(80px, 10vw, 140px);
  border-top: 1px solid var(--line);
}
.other-series .section-eyebrow {
  font-family: var(--mono);
  font-size: 10.5px;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--ink-faint);
  display: inline-block;
  margin-bottom: 14px;
}
.other-series h2 {
  font-family: var(--serif);
  font-style: italic;
  font-weight: 300;
  font-size: clamp(36px, 4.5vw, 64px);
  letter-spacing: -0.02em;
  line-height: 0.95;
  margin-top: 0;
  margin-bottom: clamp(60px, 7vw, 100px);
}
.other-series-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: clamp(28px, 3vw, 48px);
}
@media (max-width: 900px) { .other-series-grid { grid-template-columns: repeat(2, 1fr); } }
.other-card { display: block; }
.other-card .si {
  aspect-ratio: 3/4;
  background: var(--bg-soft);
  overflow: hidden;
  margin-bottom: 18px;
}
.other-card .si img {
  width: 100%; height: 100%;
  object-fit: cover;
  transition: transform 1.6s var(--ease-editorial);
}
.other-card:hover .si img { transform: scale(1.05); }
.other-card .sn {
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--ink-faint);
}
.other-card .st {
  font-family: var(--serif);
  font-style: italic;
  font-weight: 400;
  font-size: clamp(20px, 1.8vw, 28px);
  margin-top: 6px;
  letter-spacing: -0.015em;
  line-height: 1.1;
  transition: color 0.4s var(--ease-editorial);
}
.other-card:hover .st { color: var(--denim); }

.tag-row {
  display: flex; gap: 20px; flex-wrap: wrap;
  font-size: 11px; letter-spacing: 0.18em; text-transform: uppercase;
  color: var(--denim);
}

.section-eyebrow {
  font-family: var(--mono);
  font-size: 11px; letter-spacing: 0.22em; text-transform: uppercase;
  color: var(--ink-faint);
  display: inline-block;
}

/* ==========================================
   MOBILE RESPONSIVENESS
   ========================================== */

@media (max-width: 720px) {
  body { font-size: 15px; }
  :root { --gutter: 22px; }

  .nav { padding: 14px var(--gutter); }
  .nav-mark { font-size: 11px; letter-spacing: 0.16em; }
  .nav-menu { gap: 12px; font-size: 9px; letter-spacing: 0.14em; }

  .hero-frame { padding: 80px var(--gutter) var(--gutter); }
  .hero-mark { font-size: clamp(48px, 16vw, 80px); }
  .hero-corners { font-size: 9px; }
  .hero-pron { font-size: 16px; }
  .hero-bottom { grid-template-columns: 1fr; gap: 12px; }
  .hero-pron { text-align: left; }

  .statement-quote { font-size: clamp(34px, 9vw, 48px); max-width: 16ch; }
  .statement-foot { flex-direction: column; gap: 10px; align-items: flex-start; padding-top: 14px; font-size: 10px; }
  .statement .chapter-marker { top: 90px; }
  .phonetic-marker { top: 80px; }

  .philosophy { padding: 80px 0 60px; }
  .phil-grid { grid-template-columns: 1fr; gap: 36px; }
  .phil-tags { padding-left: 14px; font-size: 10px; }
  .phil-body p:first-of-type { font-size: 18px; }
  .phil-aside { display: none; }

  .figures { padding: 80px 0; }
  .fig-grid { grid-template-columns: 1fr; gap: 32px; }
  .fig-num { font-size: clamp(140px, 36vw, 200px); }
  .fig-tags { font-size: 22px; gap: 4px; margin-bottom: 18px; }

  .phonetic { min-height: 80vh; }
  .phonetic-pron { font-size: clamp(40px, 11vw, 64px); }
  .phonetic-mark { font-size: clamp(56px, 18vw, 100px); margin-bottom: 36px; }
  .phonetic-marquee { font-size: 9px; gap: 8px; flex-wrap: wrap; }
  .phonetic-marquee span { flex: 1 1 40%; }

  .vs-row { grid-template-columns: 1fr; gap: 16px; }
  .palette-strip { grid-template-columns: 1fr; }
  .swatch-mini { border-right: none !important; border-bottom: 1px solid var(--line); padding: 14px 18px; }
  .swatch-mini:last-child { border-bottom: none; }

  .campaigns { padding-top: 60px; }
  .camp-intro { grid-template-columns: 1fr; gap: 20px; margin-bottom: 50px; }
  .camp-intro h2 { font-size: clamp(28px, 7vw, 40px); }
  .camp, .camp-reverse { grid-template-columns: 1fr; gap: 24px; padding: 50px var(--gutter); }
  .camp-reverse .camp-img { order: 0; }
  .camp-reverse .camp-text { order: 0; }
  .camp-img, .camp-img.tall, .camp-img.square { aspect-ratio: 4/5 !important; }
  .camp-text { padding: 0; }
  .camp-meta { font-size: 10px; margin-bottom: 18px; flex-wrap: wrap; }
  .camp-title { font-size: clamp(32px, 9vw, 48px); margin-bottom: 22px; line-height: 1.05; }
  .camp-text p.lead { font-size: 18px; }
  .camp-pieces { font-size: 11px; }

  .cpb { padding: 60px 0; }
  .cpb-head { margin-bottom: 36px; }
  .cpb-head h4 { font-size: clamp(28px, 7.5vw, 40px); }
  .cpb-grid, .cpb-grid.cols-2, .cpb-grid.cols-3 { grid-template-columns: 1fr 1fr; max-width: var(--max); gap: 14px; }
  .cpb-item .cpi-color { font-size: 17px; }
  .cpb-item .cpi-type { font-size: 11px; }

  .collection { padding: 80px 0; }
  .collection-head { grid-template-columns: 1fr; gap: 20px; margin-bottom: 50px; }
  .collection-head h2 { font-size: clamp(32px, 9vw, 48px); }
  .col-grid { grid-template-columns: 1fr; row-gap: 50px; }
  .col-1, .col-2, .col-3, .col-4, .col-5, .col-6, .col-7, .col-8 { grid-column: auto; margin-top: 0; }
  .col-card .ci { aspect-ratio: 4/5; margin-bottom: 16px; }
  .col-title { font-size: 22px; }
  .col-sub { font-size: 12px; }

  .event { padding: 80px 0; }
  .event-grid { grid-template-columns: 1fr; gap: 28px; }
  .event-text { padding-right: 0; }
  .event-title { font-size: clamp(32px, 8.5vw, 48px); }
  .event-mark { writing-mode: initial; text-align: left; font-size: 9px; }

  .footer { padding: 60px 0 28px; }
  .footer-mark { font-size: clamp(56px, 18vw, 100px); }
  .footer-tag { font-size: 18px; margin-bottom: 60px; }
  .footer-grid { grid-template-columns: 1fr; gap: 28px; padding-bottom: 40px; }
  .footer-grid h4 { font-size: 9px; margin-bottom: 12px; }
  .footer-grid p, .footer-grid a { font-size: 13px; }
  .footer-bottom { flex-direction: column; gap: 8px; align-items: flex-start; padding-top: 18px; font-size: 9px; }

  .chapter-marker { font-size: 9px; gap: 10px; margin-bottom: 28px; }
  .chapter-marker .cm-line { flex-basis: 50px; }

  /* Series */
  .series-hero { grid-template-columns: 1fr; padding-top: 60px; min-height: auto; }
  .series-hero-image { aspect-ratio: 4/5; min-height: auto; }
  .series-hero-text { padding: 50px var(--gutter); }
  .series-hero-title { font-size: clamp(40px, 11vw, 60px); }
  .series-hero-subtitle { font-size: 15px; margin-bottom: 24px; }
  .series-hero-meta { font-size: 10px; margin-bottom: 22px; gap: 10px; }
  .series-hero-meta::before { width: 24px; }
  .tag-row { gap: 12px; font-size: 9px; }

  .howto { padding: 60px 0; }
  .howto-grid, .howto-grid.two { grid-template-columns: 1fr; gap: 24px; margin-top: 30px; }
  .howto-num { font-size: 28px; margin-bottom: 12px; }
  .howto-item h3 { font-size: 19px; }
  .howto-item p { font-size: 13px; }

  .products { padding: 60px 0; }
  .products-head { grid-template-columns: 1fr; gap: 16px; margin-bottom: 60px; }
  .products-head h2 { font-size: clamp(32px, 9vw, 48px); }
  .product-row, .product-row.alt { grid-template-columns: 1fr; gap: 22px; margin-bottom: 70px; }
  .product-row.alt .pd-main { order: 0; }
  .product-row.alt .pd-side { order: 0; }
  .pd-side { padding-top: 8px; gap: 26px; }
  .pd-name { font-size: clamp(28px, 8vw, 36px); }
  .pd-info { padding-bottom: 18px; }
  .pd-materials { font-size: 12px; column-gap: 14px; row-gap: 10px; }
  .pd-styling { gap: 0; }
  .pd-lifestyle { grid-template-columns: 1fr 1fr; gap: 0; margin-top: 24px !important; }

  .other-series { padding: 60px 0; }
  .other-series h2 { font-size: clamp(28px, 7vw, 40px); margin-bottom: 32px; }
  .other-series-grid { grid-template-columns: repeat(2, 1fr); gap: 14px; }
  .other-card .si { aspect-ratio: 3/4; margin-bottom: 10px; }
  .other-card .st { font-size: 16px; }
  .other-card .sn { font-size: 9px; }

  .cursor-dot, .cursor-ring { display: none !important; }
  body { cursor: auto !important; }
}

@media (max-width: 540px) {
  .cpb-grid, .cpb-grid.cols-2, .cpb-grid.cols-3 { grid-template-columns: 1fr; }
  .pd-lifestyle { grid-template-columns: 1fr; }
  .pd-styling { grid-template-columns: 1fr 1fr; }

  .hero-corners { font-size: 8px; gap: 8px; }
  .hero-corners > span { letter-spacing: 0.18em; }

  .phonetic-marquee { display: none; }

  .tag-row { gap: 10px; flex-wrap: wrap; }
}