/* =====================================================================
   HJLP GIFT — Atelier Zero editorial landing
   ===================================================================== */
:root {
  --paper:    oklch(96% 0.012 80);
  --paper-2:  oklch(92% 0.018 75);
  --paper-3:  oklch(88% 0.022 70);
  --ink:      oklch(20% 0.018 45);
  --ink-2:    oklch(32% 0.025 45);
  --muted:    oklch(40% 0.022 50);
  --rule:     oklch(75% 0.020 70);
  --rule-2:   oklch(65% 0.025 65);
  --vermilion:oklch(50% 0.175 35);
  --indigo:   oklch(32% 0.07 250);
  --olive:    oklch(42% 0.07 130);

  /* Zirflow brand token — used only in attribution / studio-credit contexts.
     A muted version of the Zirflow electric blue (60% L, 0.18 chroma) so it
     reads as a tasteful accent in the warm-paper Atelier Zero palette
     without clashing with HJLP's vermilion. */
  --zflow:    oklch(56% 0.16 248);

  --display: 'Cormorant Garamond', 'Iowan Old Style', 'Noto Serif JP', Georgia, serif;
  --serif-jp:'Noto Serif JP', 'Cormorant Garamond', Georgia, serif;
  --jp-serif:--serif-jp;
  --cn-serif:'Noto Serif SC', 'Songti SC', 'STZhongsong', 'PingFang SC', 'Noto Serif JP', serif;
  --body:    'Inter', -apple-system, BlinkMacSystemFont, 'Noto Sans JP', system-ui, sans-serif;
  --jp:      'Noto Sans JP', 'Inter', system-ui, sans-serif;
  --mono:    'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, monospace;

  --noise-blend: multiply;
  --noise-alpha: 0.35;
  --noise-color: '0.45 0.30 0.18';   /* warm brown */
  --theme-meta:  #f3ead8;
}

/* ---------- Dark theme tokens (DRY: define once, apply twice) ----------
   The dark palette values live on :root as --dk-* "dark value" tokens
   so both the manual override ([data-theme="dark"]) and the auto OS
   path (@media prefers-color-scheme: dark with no explicit choice)
   can reuse the same source of truth. */
:root {
  --dk-paper:    oklch(20% 0.018 50);
  --dk-paper-2:  oklch(24% 0.020 50);
  --dk-paper-3:  oklch(28% 0.022 48);
  --dk-ink:      oklch(94% 0.010 80);
  --dk-ink-2:    oklch(78% 0.014 75);
  --dk-muted:    oklch(62% 0.018 70);
  --dk-rule:     oklch(34% 0.018 55);
  --dk-rule-2:   oklch(44% 0.022 55);
  --dk-vermilion:oklch(68% 0.170 38);
  --dk-indigo:   oklch(72% 0.08 250);
  --dk-olive:    oklch(72% 0.08 130);
  --dk-zflow:    oklch(70% 0.14 245);
  --dk-noise-blend: overlay;
  --dk-noise-alpha: 0.18;
  --dk-noise-color: '0.85 0.78 0.62';
  --dk-theme-meta:  #1a1612;
}

/* Manual override: user clicked the toggle. */
[data-theme="dark"] {
  --paper:    var(--dk-paper);
  --paper-2:  var(--dk-paper-2);
  --paper-3:  var(--dk-paper-3);
  --ink:      var(--dk-ink);
  --ink-2:    var(--dk-ink-2);
  --muted:    var(--dk-muted);
  --rule:     var(--dk-rule);
  --rule-2:   var(--dk-rule-2);
  --vermilion:var(--dk-vermilion);
  --indigo:   var(--dk-indigo);
  --olive:    var(--dk-olive);
  --zflow:    var(--dk-zflow);
  --noise-blend: var(--dk-noise-blend);
  --noise-alpha: var(--dk-noise-alpha);
  --noise-color: var(--dk-noise-color);
  --theme-meta:  var(--dk-theme-meta);
}

/* Auto: only when OS prefers dark AND user has not made an explicit choice. */
@media (prefers-color-scheme: dark) {
  html:not([data-theme]) {
    --paper:    var(--dk-paper);
    --paper-2:  var(--dk-paper-2);
    --paper-3:  var(--dk-paper-3);
    --ink:      var(--dk-ink);
    --ink-2:    var(--dk-ink-2);
    --muted:    var(--dk-muted);
    --rule:     var(--dk-rule);
    --rule-2:   var(--dk-rule-2);
    --vermilion:var(--dk-vermilion);
    --indigo:   var(--dk-indigo);
    --olive:    var(--dk-olive);
    --zflow:    var(--dk-zflow);
    --noise-blend: var(--dk-noise-blend);
    --noise-alpha: var(--dk-noise-alpha);
    --noise-color: var(--dk-noise-color);
    --theme-meta:  var(--dk-theme-meta);
  }
}

/* Dark mode photo treatment: photos in dark mode look too bright on
   the deep cocoa paper, so a subtle brightness + contrast adjustment
   pulls them back into the same printed-tone register. We override the
   .photo img filter (set in the light-mode rule below) inside the
   two dark paths (manual + auto). */
[data-theme="dark"] .photo img,
[data-theme="dark"] .qr-img {
  filter: sepia(0.05) saturate(0.78) brightness(0.86) contrast(1.08);
}
@media (prefers-color-scheme: dark) {
  html:not([data-theme]) .photo img,
  html:not([data-theme]) .qr-img {
    filter: sepia(0.05) saturate(0.78) brightness(0.86) contrast(1.08);
  }
}

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

html, body {
  background: var(--paper);
  color: var(--ink);
  font-family: var(--body);
  font-size: 16px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}

body::before {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 1;
  opacity: var(--noise-alpha, 0.35);
  mix-blend-mode: var(--noise-blend, multiply);
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='220' height='220'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 0.45  0 0 0 0 0.30  0 0 0 0 0.18  0 0 0 0.08 0'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");
}

::selection { background: var(--vermilion); color: var(--paper); }
a { color: inherit; text-decoration: none; }
img, svg { display: block; max-width: 100%; }
button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }

.page {
  max-width: 1320px;
  margin: 0 auto;
  padding: 0 48px;
  position: relative;
  z-index: 2;
}
@media (max-width: 720px) {
.page { padding: 0 22px; } }

.masthead {
  position: sticky;
  top: 0;
  z-index: 100;
  background: var(--paper);
  border-bottom: 1px solid var(--ink);
}
.masthead .page {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  padding-top: 14px;
  padding-bottom: 14px;
  gap: 24px;
}
.mast-left, .mast-right {
  display: flex;
  align-items: center;
  gap: 18px;
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ink-2);
}
.mast-right { justify-content: flex-end; }
.mast-left span, .mast-right span { white-space: nowrap; }
.mast-dot { width: 4px; height: 4px; background: var(--vermilion); border-radius: 50%; }
.mast-logo {
  font-family: var(--display);
  font-weight: 600;
  font-size: 26px;
  letter-spacing: 0.02em;
  line-height: 1;
  text-align: center;
}
.mast-logo .amp { color: var(--vermilion); font-style: italic; padding: 0 4px; }
.mast-logo .cn { display: block; font-family: var(--serif-jp); font-size: 10px; letter-spacing: 0.4em; color: var(--muted); margin-top: 6px; text-transform: uppercase; }

.lang {
  display: inline-flex;
  gap: 2px;
  border: 1px solid var(--ink);
  padding: 2px;
}
.lang button {
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.18em;
  padding: 5px 9px;
  color: var(--ink);
  text-transform: uppercase;
  transition: background 0.15s, color 0.15s;
}
.lang button.on { background: var(--ink); color: var(--paper); }
.lang button:hover:not(.on) { background: var(--paper-2); }

/* Theme toggle — sun/moon swap */
.theme-toggle {
  display: inline-grid;
  place-items: center;
  width: 28px; height: 28px;
  border: 1px solid var(--ink);
  color: var(--ink);
  background: transparent;
  border-radius: 50%;
  transition: background 0.18s, color 0.18s, transform 0.18s;
  cursor: pointer;
}
.theme-toggle:hover { background: var(--ink); color: var(--paper); transform: rotate(-12deg); }
.theme-toggle .i-moon { display: none; }
[data-theme="dark"] .theme-toggle .i-sun { display: none; }
[data-theme="dark"] .theme-toggle .i-moon { display: block; }

@media (max-width: 720px) {
  .masthead .page { grid-template-columns: 1fr; gap: 6px; padding-top: 10px; padding-bottom: 10px; }
  .mast-left { display: flex; justify-content: center; font-size: 10px; gap: 6px; }
  .mast-left .mast-dot { width: 3px; height: 3px; }
  .mast-right { justify-content: center; }
  .mast-right > span { display: none; }
  .mast-logo { font-size: 22px; }
}

/* Lightbox (click any photo to enlarge) */
.lightbox {
  width: 100vw;
  height: 100vh;
  max-width: 100vw;
  max-height: 100vh;
  margin: 0;
  padding: 0;
  border: 0;
  background: oklch(18% 0.02 60 / 0.94);
  color: oklch(98% 0.012 80);
  cursor: zoom-out;
  animation: lb-fade 180ms ease;
}
.lightbox::backdrop { background: oklch(8% 0.01 60 / 0.5); }
.lightbox-figure {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 14px;
  width: 100%;
  height: 100%;
  padding: 56px 64px 48px;
  margin: 0;
}
.lightbox-img {
  max-width: min(96vw, 1400px);
  max-height: 84vh;
  width: auto;
  height: auto;
  object-fit: contain;
  border: 1px solid oklch(98% 0.012 80 / 0.15);
  background: oklch(8% 0.01 60);
  box-shadow: 0 30px 80px -20px oklch(0% 0 0 / 0.6);
  cursor: default;
}
.lightbox-caption {
  font-family: var(--body);
  font-size: 12px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: oklch(98% 0.012 80 / 0.55);
  text-align: center;
  max-width: 80ch;
}
.lightbox-close {
  position: fixed;
  top: 24px;
  right: 32px;
  width: 44px;
  height: 44px;
  border: 1px solid oklch(98% 0.012 80 / 0.3);
  background: transparent;
  color: oklch(98% 0.012 80);
  font-size: 28px;
  font-weight: 300;
  line-height: 1;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 160ms, border-color 160ms;
  z-index: 10;
}
.lightbox-close:hover { background: oklch(98% 0.012 80 / 0.1); border-color: oklch(98% 0.012 80 / 0.6); }
@keyframes lb-fade { from { opacity: 0; } to { opacity: 1; } }
@media (max-width: 700px) {
  .lightbox-figure { padding: 56px 20px 32px; }
  .lightbox-close { top: 12px; right: 14px; }
}

.cover {
  padding: 48px 0 72px;
  border-bottom: 1px solid var(--ink);
}
.cover-grid {
  display: grid;
  grid-template-columns: 1.05fr 1fr;
  gap: 64px;
  align-items: start;
}
.cover-left { position: relative; min-width: 0; }
.cover-right { position: sticky; top: 84px; align-self: start; }
.cover-eyebrow {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.32em;
  text-transform: uppercase;
  color: var(--ink-2);
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 28px;
}
.cover-eyebrow::before {
  content: "";
  width: 36px;
  height: 1px;
  background: var(--vermilion);
}
.read-time {
  font-family: var(--mono);
  font-size: 10.5px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--muted);
  display: inline-flex;
  align-items: center;
  gap: 7px;
  margin-top: -16px;
  margin-bottom: 28px;
  padding: 5px 10px;
  border: 1px solid var(--rule);
  border-radius: 999px;
  background: var(--paper-2);
}
.read-time svg { color: var(--vermilion); flex-shrink: 0; }
.cover-headline {
  font-family: var(--display);
  font-weight: 500;
  font-style: italic;
  font-size: clamp(48px, 6.4vw, 92px);
  line-height: 0.98;
  letter-spacing: -0.015em;
  color: var(--ink);
  margin-bottom: 28px;
  padding-bottom: 6px;
}
.cover-headline .l-zh,
.cover-headline .l-en,
.cover-headline .l-jp { line-height: 1.04; letter-spacing: 0; }
.cover-headline .l-jp {
  font-family: var(--jp-serif);
  font-style: normal;
  font-weight: 600;
  letter-spacing: 0.03em;
  line-height: 1.42;
  text-wrap: balance;
  font-feature-settings: "palt" 1, "pkna" 1;
}
.cover-headline .l-zh {
  font-family: var(--cn-serif, 'Noto Serif JP', 'Songti SC', 'STZhongsong', 'PingFang SC', serif);
  font-style: normal;
  font-weight: 600;
  letter-spacing: 0.02em;
  line-height: 1.18;
  text-wrap: balance;
}
.cover-headline em {
  font-style: normal;
  color: var(--vermilion);
  position: relative;
}
.cover-headline em::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: 6px;
  height: 2px;
  background: var(--vermilion);
  opacity: 0.5;
}
.cover-deck {
  font-family: var(--serif-jp);
  font-size: 18px;
  line-height: 1.65;
  color: var(--ink-2);
  max-width: 48ch;
  margin-bottom: 32px;
}
.cover-meta {
  display: flex;
  gap: 36px;
  border-top: 1px solid var(--rule);
  border-bottom: 1px solid var(--rule);
  padding: 18px 0;
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ink-2);
}
.cover-meta strong {
  display: block;
  font-family: var(--display);
  font-weight: 600;
  font-size: 28px;
  letter-spacing: -0.01em;
  color: var(--ink);
  text-transform: none;
  margin-bottom: 4px;
  line-height: 1.05;
}
.cover-cta {
  display: flex;
  gap: 14px;
  margin-top: 18px;
  flex-wrap: wrap;
}
.cover-badges {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
  align-items: center;
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--vermilion);
  margin-top: 6px;
}
.badge-sep { color: var(--rule-2); opacity: 0.5; }
.badge-em {
  color: var(--olive);
  font-weight: 600;
  letter-spacing: 0.08em;
}
.cover-capacity {
  font-family: var(--body);
  font-size: 13px;
  color: var(--olive);
  margin-top: 6px;
  line-height: 1.4;
}
.btn {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 14px 22px;
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  border: 1px solid var(--ink);
  color: var(--ink);
  background: transparent;
  transition: background 0.18s, color 0.18s, transform 0.18s;
}
.btn.primary { background: var(--vermilion); color: var(--paper); border-color: var(--vermilion); }
.btn.primary:hover { background: oklch(42% 0.18 32); border-color: oklch(42% 0.18 32); transform: translateY(-1px); }
.btn.ghost:hover { background: var(--ink); color: var(--paper); }
.btn .arrow { font-family: var(--display); font-size: 16px; line-height: 1; }

.collage {
  position: relative;
  aspect-ratio: 4/5;
}
.collage .photo {
  position: absolute;
  background: #f7efe1;
  padding: 10px 10px 36px;
  box-shadow: 0 14px 30px -18px rgba(40, 20, 10, 0.45);
}
.collage .photo::after {
  content: attr(data-cap);
  position: absolute;
  left: 14px; right: 14px; bottom: 10px;
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--muted);
}
.collage .photo svg, .collage .photo img { width: 100%; height: 100%; object-fit: cover; display: block; filter: sepia(0.15) saturate(0.86) contrast(1.05) brightness(0.99); }
.collage .photo::before {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse at center, transparent 55%, rgba(80, 50, 20, 0.18) 100%);
  pointer-events: none;
  z-index: 2;
}
.collage .p1 { top: 0; left: 4%; width: 56%; aspect-ratio: 1/1; transform: rotate(-2.2deg); z-index: 3; }
.collage .p2 { top: 8%; right: 0; width: 42%; aspect-ratio: 3/4; transform: rotate(1.6deg); z-index: 2; }
.collage .p3 { bottom: 4%; left: 0; width: 50%; aspect-ratio: 4/3; transform: rotate(1.2deg); z-index: 4; }
.collage .p4 { bottom: 0; right: 6%; width: 38%; aspect-ratio: 1/1; transform: rotate(-2.8deg); z-index: 5; }

.collage .tape {
  position: absolute;
  width: 80px; height: 22px;
  background: rgba(255, 230, 150, 0.65);
  border: 1px solid rgba(180, 150, 60, 0.2);
  z-index: 10;
}
.collage .tape.t1 { top: -10px; left: 12%; transform: rotate(-18deg); }
.collage .tape.t2 { top: 4%; right: 8%; transform: rotate(12deg); }
.collage .tape.t3 { bottom: 12%; left: 28%; transform: rotate(-7deg); }

.collage .stamp {
  position: absolute;
  bottom: -10px; left: 32%;
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.32em;
  text-transform: uppercase;
  color: var(--vermilion);
  border: 1.5px solid var(--vermilion);
  padding: 6px 10px;
  transform: rotate(-4deg);
  z-index: 11;
  background: var(--paper);
}

/* Spread-head CTA — side-mounted foliot linking to /products, 3-trilingual stack, hover vermilion */
.spread-head {
  display: grid;
  grid-template-columns: 1fr auto;
  grid-template-areas:
    "main  cta"
    "deck  deck";
  align-items: end;
  gap: 28px 36px;
  margin-bottom: 44px;
  padding-bottom: 16px;
  border-bottom: 1px solid var(--ink);
}
.spread-head-main { grid-area: main; }
.spread-deck.spread-deck-wide { grid-area: deck; text-align: left; }
.spread-cta {
  grid-area: cta;
  align-self: end;
  display: flex;
  align-items: center;
  gap: 14px 18px;
  padding: 14px 18px 14px 20px;
  border: 1.5px solid var(--ink);
  background: var(--paper);
  color: var(--ink);
  text-decoration: none;
  white-space: nowrap;
  max-width: 100%;
  transition: background 0.45s cubic-bezier(0.4, 0, 0.2, 1),
              color 0.45s cubic-bezier(0.4, 0, 0.2, 1),
              border-color 0.45s ease,
              transform 0.45s cubic-bezier(0.4, 0, 0.2, 1),
              box-shadow 0.45s ease;
  position: relative;
  overflow: hidden;
  isolation: isolate;
}
.spread-cta::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(115deg, transparent 30%, oklch(98% 0.012 80 / 0.4) 50%, transparent 70%);
  transform: translateX(-100%);
  transition: transform 0.9s cubic-bezier(0.4, 0, 0.2, 1);
  z-index: -1;
  pointer-events: none;
}
.spread-cta::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 2px;
  background: linear-gradient(90deg, oklch(58% 0.16 32) 0%, oklch(72% 0.14 35) 50%, oklch(58% 0.16 32) 100%);
  background-size: 220% 100%;
  background-position: 0% 50%;
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform 0.6s cubic-bezier(0.4, 0, 0.2, 1),
              background-position 2.4s linear;
  pointer-events: none;
}
.spread-cta:hover::after { transform: scaleX(1); background-position: 100% 50%; }
@keyframes scta-pulse {
  0%, 100% { transform: translateX(0) scale(1); }
  50%      { transform: translateX(3px) scale(1.06); }
}
.scta-arrow { animation: scta-pulse 3.6s ease-in-out infinite; }
.spread-cta:hover .scta-arrow { animation: none; }
.spread-cta:hover {
  background: var(--ink);
  color: var(--paper);
  border-color: var(--ink);
  transform: translateY(-3px);
  box-shadow: 0 12px 28px -10px oklch(0% 0 0 / 0.25);
}
.spread-cta:hover::before { transform: translateX(100%); }
.spread-cta:hover .scta-num { color: var(--paper); opacity: 0.75; }
.spread-cta:hover .scta-arrow {
  transform: translateX(8px) scale(1.1);
  color: var(--vermilion);
}
.spread-cta:hover .scta-line.l-en { color: oklch(78% 0.014 80); }
.scta-arrow {
  font-family: var(--display);
  font-style: italic;
  font-size: clamp(24px, 2.6vw, 32px);
  line-height: 1;
  color: var(--vermilion);
  flex-shrink: 0;
  transition: transform 0.45s cubic-bezier(0.4, 0, 0.2, 1), color 0.45s ease;
}
.scta-stack {
  display: inline-flex;
  flex-direction: row;
  align-items: baseline;
  gap: 0;
  line-height: 1.2;
  flex: 0 1 auto;
  min-width: 0;
}
/* banner: 走 i18n 系统, 3 语按 data-lang 只显示当前语言那一条 */
.l-zh.scta-line, .l-en.scta-line, .l-jp.scta-line { display: none; }
html[data-lang="zh"] .l-zh.scta-line,
html[data-lang="en"] .l-en.scta-line,
html[data-lang="jp"] .l-jp.scta-line { display: inline-block; }
.scta-line {
  font-family: var(--display);
  font-style: italic;
  font-size: clamp(16px, 1.5vw, 20px);
  font-weight: 500;
  letter-spacing: -0.005em;
  color: inherit;
  white-space: nowrap;
  white-space: nowrap;
}
.scta-line.l-zh {
  font-family: var(--cn-serif);
  font-style: normal;
  font-size: clamp(20px, 1.8vw, 26px);
  font-weight: 500;
  letter-spacing: 0.01em;
}
.scta-line.l-en {
  font-family: var(--body);
  font-style: normal;
  font-size: clamp(11px, 1.05vw, 14px);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--muted);
  font-weight: 600;
  margin-top: 4px;
  transition: color 0.45s ease;
}
.scta-line.l-jp {
  font-family: var(--serif-jp);
  font-style: normal;
  font-size: clamp(14px, 1.3vw, 18px);
  color: var(--ink-2);
  font-weight: 500;
  margin-top: 1px;
}
.scta-num {
  font-family: var(--mono);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--muted);
  white-space: nowrap;
  flex-shrink: 0;
  transition: color 0.35s ease, opacity 0.35s ease;
}
@media (max-width: 720px) {
  .spread-head { grid-template-columns: 1fr; gap: 18px; margin-bottom: 36px; }
  .spread-deck { text-align: left; }
  .spread-cta { max-width: 100%; padding: 12px 16px; gap: 10px 14px; flex-wrap: wrap; }
  .scta-arrow { font-size: 32px; }
}

.spread {
  padding: 72px 0;
  border-bottom: 1px solid var(--ink);
}
.spread:last-of-type { border-bottom: 0; }
.spread-head {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: end;
  gap: 28px;
  margin-bottom: 44px;
  padding-bottom: 16px;
  border-bottom: 1px solid var(--ink);
}
.spread-num {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--ink-2);
  display: flex;
  align-items: center;
  gap: 12px;
}
.spread-num::before {
  content: "";
  width: 8px; height: 8px;
  background: var(--vermilion);
}
.spread-title {
  font-family: var(--display);
  font-style: italic;
  font-weight: 500;
  font-size: clamp(32px, 3.8vw, 54px);
  line-height: 1.06;
  letter-spacing: -0.012em;
  color: var(--ink);
  max-width: 18ch;
  padding-bottom: 4px;
}
.spread-title .l-jp {
  font-family: var(--jp-serif);
  font-style: normal;
  font-weight: 600;
  letter-spacing: 0.025em;
  line-height: 1.5;
  text-wrap: balance;
  font-feature-settings: "palt" 1, "pkna" 1;
}
.spread-title .l-zh {
  font-family: var(--cn-serif, 'Noto Serif JP', 'Songti SC', 'STZhongsong', 'PingFang SC', serif);
  font-style: normal;
  font-weight: 600;
  letter-spacing: 0.015em;
  line-height: 1.22;
  text-wrap: balance;
}
.spread-title em { font-style: normal; color: var(--vermilion); }
.spread-deck {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--muted);
  text-align: right;
  max-width: 30ch;
  line-height: 1.55;
  padding-bottom: 4px;
}
.spread-entity {
  font-family: var(--body);
  font-size: 11.5px;
  color: var(--muted);
  line-height: 1.55;
  grid-column: 1 / -1;
}
@media (max-width: 720px) {
  .spread { padding: 52px 0; }
  .spread-deck { text-align: left; }
}

.story-grid {
  display: grid;
  grid-template-columns: 1.25fr 1fr;
  gap: 48px 56px;
  align-items: start;
}
.story-lead {
  font-family: var(--display);
  font-size: 21px;
  line-height: 1.5;
  color: var(--ink);
  letter-spacing: 0;
  padding-right: 8px;
}
.story-lead::first-letter {
  font-family: var(--display);
  font-weight: 600;
  font-size: 5em;
  float: left;
  line-height: 0.88;
  padding: 4px 12px 0 0;
  color: var(--vermilion);
}
.story-body p {
  font-size: 15.5px;
  line-height: 1.72;
  color: var(--ink-2);
  margin-bottom: 16px;
}
.story-body p:last-child { margin-bottom: 0; }

.pull {
  font-family: var(--display);
  font-style: italic;
  font-size: 22px;
  line-height: 1.45;
  color: var(--ink);
  border-top: 1px solid var(--ink);
  border-bottom: 1px solid var(--ink);
  padding: 22px 0 18px 28px;
  position: relative;
}
.pull::before {
  content: "“";
  font-family: var(--display);
  font-size: 56px;
  line-height: 0;
  position: absolute;
  top: 26px; left: 0;
  color: var(--vermilion);
}
.pull-attr {
  display: block;
  font-family: var(--mono);
  font-size: 10px;
  font-style: normal;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--muted);
  margin-top: 12px;
}

@media (max-width: 900px) {
  .story-grid { grid-template-columns: 1fr; gap: 28px; }
}

.pull-row {
  margin-top: 36px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0 56px;
}
.pull-row .pull { width: 100%; }
@media (max-width: 900px) {
  .pull-row { grid-template-columns: 1fr; }
}

.materials {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0;
  margin-top: 56px;
  border-top: 1px solid var(--ink);
  border-bottom: 1px solid var(--ink);
}
.mat {
  padding: 30px 24px 30px;
  border-right: 1px solid var(--rule);
  position: relative;
}
.mat:last-child { border-right: 0; }

.workshops {
  margin-top: 48px;
  border-top: 1px solid var(--ink);
  border-bottom: 1px solid var(--ink);
  padding: 26px 0 28px;
}
.ws-head {
  display: grid;
  grid-template-columns: auto 1fr;
  align-items: center;
  gap: 18px;
  margin-bottom: 22px;
}
.ws-eyebrow {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--ink-2);
  white-space: nowrap;
}
.ws-rule {
  height: 1px;
  background: var(--rule);
}
.ws-list {
  list-style: none;
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 0;
}
.ws {
  padding: 4px 18px 4px 0;
  border-right: 1px solid var(--rule);
  position: relative;
}
.ws:last-child { border-right: 0; padding-right: 0; }
.ws:not(:first-child) { padding-left: 18px; }
.ws-num {
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.22em;
  color: var(--vermilion);
  margin-bottom: 8px;
}
.ws-name {
  font-family: var(--display);
  font-weight: 600;
  font-size: 19px;
  line-height: 1.2;
  color: var(--ink);
  margin-bottom: 6px;
}
.ws-out {
  font-family: var(--body);
  font-size: 12.5px;
  line-height: 1.5;
  color: var(--muted);
}
@media (max-width: 900px) {
  .ws-list { grid-template-columns: repeat(2, 1fr); }
  .ws { border-right: 0; padding-left: 0 !important; padding-right: 18px; padding-bottom: 18px; border-bottom: 1px solid var(--rule); }
  .ws-list .ws:nth-child(odd) { padding-right: 18px; }
  .ws-list .ws:nth-child(even) { padding-left: 18px !important; border-left: 1px solid var(--rule); }
  .ws-list .ws:nth-last-child(-n+2) { border-bottom: 0; padding-bottom: 0; }
}
.mat-num {
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--vermilion);
  margin-bottom: 14px;
}
.mat-name {
  font-family: var(--display);
  font-style: italic;
  font-weight: 500;
  font-size: 36px;
  line-height: 1;
  color: var(--ink);
  margin-bottom: 6px;
}
.mat-jp {
  font-family: var(--serif-jp);
  font-size: 13px;
  color: var(--muted);
  margin-bottom: 16px;
}
.mat-spec {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.1em;
  color: var(--ink-2);
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 4px 12px;
  margin-bottom: 18px;
}
.mat-spec dt { color: var(--muted); text-transform: uppercase; letter-spacing: 0.18em; font-size: 10px; }
.mat-spec dd { color: var(--ink); }
.mat-desc {
  font-size: 14px;
  line-height: 1.65;
  color: var(--ink-2);
}
.mat svg { width: 100%; height: 80px; margin-bottom: 16px; opacity: 0.85; }
@media (max-width: 720px) {
  .materials { grid-template-columns: 1fr; }
  .mat { border-right: 0; border-bottom: 1px solid var(--rule); }
  .mat:last-child { border-bottom: 0; }
}

.process {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 0;
  margin-top: 8px;
  border-top: 1px solid var(--ink);
}
.step {
  padding: 28px 18px 24px;
  border-right: 1px solid var(--rule);
  position: relative;
  background: var(--paper);
  transition: background 0.25s;
}
.step:last-child { border-right: 0; }
.step:hover { background: var(--paper-2); }
.step-num {
  font-family: var(--display);
  font-style: italic;
  font-weight: 500;
  font-size: 52px;
  line-height: 0.92;
  color: var(--ink);
  margin-bottom: 10px;
  position: relative;
}
.step-num::after {
  content: "";
  position: absolute;
  bottom: -8px; left: 0;
  width: 28px; height: 2px;
  background: var(--vermilion);
}
.step-name {
  font-family: var(--display);
  font-weight: 500;
  font-size: 21px;
  line-height: 1.18;
  color: var(--ink);
  margin: 16px 0 4px;
}
.step-jp {
  font-family: var(--serif-jp);
  font-size: 11.5px;
  color: var(--muted);
  margin-bottom: 12px;
}
.step-time {
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--vermilion);
  margin-bottom: 10px;
}
.step-body {
  font-size: 13px;
  line-height: 1.62;
  color: var(--ink-2);
}
@media (min-width: 901px) {
  .process .step { padding: 26px 14px 22px; }
  .process .step-body { font-size: 12.5px; line-height: 1.55; }
}
@media (max-width: 900px) {
  .process { grid-template-columns: repeat(2, 1fr); }
  .step { border-right: 1px solid var(--rule); border-bottom: 1px solid var(--rule); }
}
@media (max-width: 540px) {
  .process { grid-template-columns: 1fr; }
  .step { border-right: 0; }
}

.ip-note {
  background: var(--paper-2);
  border-top: 1px solid var(--ink);
  border-bottom: 1px solid var(--ink);
  padding: 64px 0;
}
.ip-note-card {
  max-width: 880px;
  margin: 0 auto;
  border-left: 3px solid var(--vermilion);
  padding: 4px 0 4px 28px;
}
.ip-note-eyebrow {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--ink-2);
  margin-bottom: 18px;
}
.ip-note-h {
  font-family: var(--display);
  font-weight: 500;
  font-size: clamp(24px, 2.6vw, 34px);
  line-height: 1.2;
  color: var(--ink);
  margin-bottom: 18px;
  letter-spacing: -0.005em;
}
.ip-note-body {
  font-size: 15.5px;
  line-height: 1.72;
  color: var(--ink-2);
  max-width: 64ch;
}
.ip-note-body a {
  color: var(--vermilion);
  border-bottom: 1px solid var(--vermilion);
  padding-bottom: 1px;
}
.ip-note-body a:hover { background: var(--vermilion); color: var(--paper); }
.ip-note-foot {
  margin-top: 22px;
  font-family: var(--mono);
  font-size: 10.5px;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--muted);
}
@media (max-width: 720px) {
  .ip-note { padding: 44px 0; }
  .ip-note-card { padding-left: 18px; border-left-width: 2px; }
}
[data-theme="dark"] .ip-note { background: var(--paper-2); border-color: var(--rule); }
[data-theme="dark"] .ip-note-foot { color: var(--muted); }

.workshop-grid {
  display: grid;
  grid-template-columns: 1.4fr 1fr;
  gap: 48px;
  align-items: start;
}
.workshop-collage {
  position: relative;
  aspect-ratio: 1/1;
}
.workshop-collage .photo {
  position: absolute;
  background: var(--paper-2);
  padding: 10px 10px 32px;
  box-shadow: 0 12px 24px -16px rgba(40, 20, 10, 0.4);
}
.workshop-collage .photo::after {
  content: attr(data-cap);
  position: absolute;
  left: 12px; right: 12px; bottom: 8px;
  font-family: var(--mono);
  font-size: 9px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--muted);
}
.workshop-collage .photo svg, .workshop-collage .photo img { width: 100%; height: 100%; object-fit: cover; display: block; filter: sepia(0.15) saturate(0.86) contrast(1.05) brightness(0.99); }
.workshop-collage .photo::before {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse at center, transparent 55%, rgba(80, 50, 20, 0.18) 100%);
  pointer-events: none;
  z-index: 2;
}
.workshop-collage .w1 { top: 0; left: 0; width: 60%; aspect-ratio: 4/3; transform: rotate(-0.8deg); z-index: 3; }
.workshop-collage .w2 { top: 4%; right: 0; width: 48%; aspect-ratio: 4/3; transform: rotate(1.2deg); z-index: 2; }
.workshop-collage .w3 { bottom: 2%; right: 20%; width: 42%; aspect-ratio: 4/3; transform: rotate(-1.4deg); z-index: 4; }
.workshop-collage .note {
  position: absolute;
  font-family: var(--display);
  font-style: italic;
  font-size: 16px;
  line-height: 1.3;
  color: var(--ink);
  background: var(--paper);
  border: 1px solid var(--ink);
  padding: 10px 14px;
  transform: rotate(-3deg);
  z-index: 6;
}
.workshop-collage .note.n1 { top: 38%; left: -2%; }
.workshop-collage .note.n2 { bottom: 0; right: -2%; transform: rotate(2deg); }

.workshop-right { padding-top: 12px; }
.workshop-right p {
  font-size: 15.5px;
  line-height: 1.72;
  color: var(--ink-2);
  margin-bottom: 18px;
}
.workshop-right p:last-child { margin-bottom: 0; }
.facts {
  margin-top: 32px;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 0;
  border-top: 1px solid var(--rule);
  border-left: 1px solid var(--rule);
}
.fact {
  border-right: 1px solid var(--rule);
  border-bottom: 1px solid var(--rule);
  padding: 18px 16px;
}
.fact-n {
  font-family: var(--display);
  font-style: italic;
  font-weight: 500;
  font-size: 32px;
  line-height: 1;
  color: var(--ink);
  margin-bottom: 4px;
}
.fact-n em { color: var(--vermilion); font-style: normal; }
.fact-l {
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--muted);
}


.faq-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0 56px;
}

.creds {
  display: grid;
  grid-template-columns: 1.05fr 1fr;
  gap: 0 64px;
}
.cred-block {
  padding: 0;
}
.cred-eyebrow {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--ink-2);
  padding-bottom: 14px;
  border-bottom: 1px solid var(--ink);
  margin-bottom: 8px;
}
.cred-list {
  list-style: none;
}
.cred-list li {
  display: grid;
  grid-template-columns: 1.1fr 1.6fr;
  gap: 18px;
  align-items: baseline;
  padding: 16px 0;
  border-bottom: 1px solid var(--rule);
}
.cred-list .cn {
  font-family: var(--display);
  font-weight: 600;
  font-size: 22px;
  line-height: 1.15;
  color: var(--ink);
  letter-spacing: -0.005em;
}
.cred-list .scope {
  font-family: var(--body);
  font-size: 13.5px;
  line-height: 1.55;
  color: var(--ink-2);
}
.cred-list.certs .cn {
  font-family: var(--mono);
  font-size: 14px;
  letter-spacing: 0.06em;
  font-weight: 500;
  text-transform: uppercase;
  color: var(--vermilion);
}
.cred-list.certs li {
  grid-template-columns: 1fr 1.9fr;
}
.cred-stamp {
  position: absolute;
  top: 0;
  right: 0;
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.32em;
  text-transform: uppercase;
  color: var(--vermilion);
  border: 1.5px solid var(--vermilion);
  padding: 6px 10px;
  transform: rotate(-3deg);
  background: var(--paper);
}
@media (max-width: 900px) {
  .creds { grid-template-columns: 1fr; gap: 36px; }
  .cred-list li { grid-template-columns: 1fr !important; gap: 4px; }
}
.faq-item {
  padding: 22px 0;
  border-top: 1px solid var(--rule);
}
.faq-item:nth-child(-n+2) { border-top: 1px solid var(--ink); }
.faq-q {
  font-family: var(--display);
  font-weight: 500;
  font-size: 22px;
  line-height: 1.25;
  color: var(--ink);
  margin-bottom: 10px;
  display: grid;
  grid-template-columns: 56px 1fr;
  gap: 14px;
  align-items: start;
}
.faq-q .qx {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--vermilion);
  padding-top: 6px;
}
.faq-a {
  font-size: 14.5px;
  line-height: 1.7;
  color: var(--ink-2);
  padding-left: 70px;
}
@media (max-width: 720px) {
  .faq-grid { grid-template-columns: 1fr; gap: 0; }
  .faq-a { padding-left: 0; }
}

.contact-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 56px;
  align-items: start;
}
.contact-form {
  border-top: 1px solid var(--ink);
  border-bottom: 1px solid var(--ink);
  padding: 32px 28px;
}
.field { margin-bottom: 22px; }
.field label {
  display: block;
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: 8px;
}
.field label em { color: var(--vermilion); font-style: normal; }
.field input, .field textarea, .field select {
  width: 100%;
  background: transparent;
  border: 0;
  border-bottom: 1px solid var(--ink);
  padding: 8px 0 10px;
  font-family: var(--body);
  font-size: 15.5px;
  color: var(--ink);
  outline: 0;
  transition: border-color 0.15s;
}
.field input:focus, .field textarea:focus, .field select:focus {
  border-bottom-color: var(--vermilion);
}
.field textarea { resize: vertical; min-height: 90px; line-height: 1.55; }
.field-row { display: grid; grid-template-columns: 1fr 1fr; gap: 22px; }
.form-actions { display: flex; align-items: center; gap: 16px; margin-top: 14px; }
.form-note {
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--muted);
}
.form-error {
  display: none;
  border-left: 2px solid var(--vermilion);
  padding: 10px 14px;
  font-family: var(--mono);
  font-size: 11.5px;
  letter-spacing: 0.08em;
  color: var(--vermilion);
  margin-top: 12px;
  background: color-mix(in oklch, var(--vermilion) 4%, var(--paper));
}
.form-error.show { display: block; }
.field.invalid input,
.field.invalid textarea,
.field.invalid select { border-bottom-color: var(--vermilion); }
.field-error {
  display: none;
  margin-top: 6px;
  font-family: var(--mono);
  font-size: 10.5px;
  letter-spacing: 0.06em;
  color: var(--vermilion);
  align-items: center;
  gap: 5px;
}
.field-error::before {
  content: "↑";
  font-size: 11px;
  line-height: 1;
}
.field.invalid .field-error { display: inline-flex; }
.field input:user-invalid,
.field textarea:user-invalid,
.field select:user-invalid { border-bottom-color: color-mix(in oklch, var(--vermilion) 60%, transparent); }
.form-success {
  display: none;
  border: 1px solid var(--vermilion);
  background: color-mix(in oklch, var(--vermilion) 6%, var(--paper));
  padding: 14px 18px;
  font-family: var(--mono);
  font-size: 12px;
  letter-spacing: 0.12em;
  color: var(--vermilion);
  margin-top: 16px;
}
.form-success.show { display: block; }

.qr-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 24px;
}
.qr-card {
  border: 1px solid var(--ink);
  padding: 22px 20px;
  text-align: center;
  background: var(--paper);
}
.qr-svg { width: 100%; max-width: 180px; margin: 0 auto 14px; }
.qr-img { display: block; width: 100%; max-width: 180px; height: auto; margin: 0 auto 14px; }
.qr-label {
  font-family: var(--display);
  font-style: italic;
  font-size: 20px;
  color: var(--ink);
  margin-bottom: 4px;
}
.qr-id {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.16em;
  color: var(--ink-2);
}
.qr-cn {
  font-family: var(--serif-jp);
  font-size: 12px;
  color: var(--muted);
  margin-top: 6px;
}

.direct {
  margin-top: 28px;
  border-top: 1px solid var(--ink);
  padding-top: 22px;
}
.direct-row {
  display: grid;
  grid-template-columns: 120px 1fr;
  gap: 18px;
  padding: 10px 0;
  font-size: 14px;
  border-bottom: 1px solid var(--rule);
}
.direct-row:last-child { border-bottom: 0; }
.direct-row dt {
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--muted);
  padding-top: 2px;
}
.direct-row dd { color: var(--ink); }
.direct-row a { border-bottom: 1px solid var(--vermilion); padding-bottom: 1px; }

/* Web Share API button — only shown on browsers that implement
   navigator.share (mobile Safari, Chrome mobile, Edge, etc.). On desktop
   browsers without the API, the button stays hidden and users can copy
   the URL from the address bar. */
.contact-actions {
  margin-top: 18px;
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
}
.share-btn {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 8px 14px;
  background: transparent;
  color: var(--ink-2);
  border: 1px solid var(--rule-2);
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  cursor: pointer;
  transition: background 0.2s, color 0.2s, border-color 0.2s;
}
.share-btn:hover {
  background: var(--ink);
  color: var(--paper);
  border-color: var(--ink);
}
.share-btn:focus-visible {
  outline: 2px solid var(--vermilion);
  outline-offset: 3px;
}
.share-btn svg { transition: transform 0.2s; }
.share-btn:hover svg { transform: translateX(2px); }

@media (max-width: 900px) {
  .contact-grid { grid-template-columns: 1fr; gap: 40px; }
  .field-row { grid-template-columns: 1fr; }
  .qr-grid { grid-template-columns: 1fr 1fr; }
  .field textarea { min-height: 140px; }
  .form-actions { flex-direction: column; align-items: stretch; }
  .form-actions .btn { justify-content: center; padding: 16px 22px; }
}
@media (max-width: 480px) {
  .qr-grid { grid-template-columns: 1fr; }
}

/* ============== FOOTER — flat, Zirflow-centered ============== */
.colophon {
  border-top: 1px solid var(--ink);
  padding: 28px 0 0;
  margin-top: 80px;
}
.colophon-grid {
  display: grid;
  grid-template-columns: 1.2fr 1fr;
  gap: clamp(32px, 4vw, 56px);
  padding-bottom: 24px;
}

/* Brand */
.cf-mark {
  font-family: var(--display);
  font-style: italic;
  font-weight: 600;
  font-size: clamp(18px, 2vw, 24px);
  color: var(--ink);
  line-height: 1.1;
  letter-spacing: -0.01em;
}
.cf-cn {
  font-family: var(--body);
  font-style: normal;
  font-weight: 500;
  font-size: 0.7em;
  color: var(--muted);
  margin-left: 4px;
}
.cf-tag {
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--muted);
  margin-top: 6px;
}
.cf-desc {
  font-family: var(--body);
  font-size: 12.5px;
  line-height: 1.55;
  color: var(--ink-2);
  margin-top: 8px;
  max-width: 36ch;
}

/* Contact (QR row) */
.cf-navline {
  display: flex;
  gap: 8px;
  justify-content: center;
  flex-wrap: wrap;
  margin-bottom: 10px;
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.15em;
  text-transform: uppercase;
}
.cf-navline a {
  color: var(--muted);
  text-decoration: none;
  transition: color 0.15s;
}
.cf-navline a:hover { color: var(--vermilion); }
.cf-navsep { color: var(--rule-2); opacity: 0.4; }
.cf-contact {
  display: flex;
  align-items: center;
  justify-content: flex-end;
}
.cf-qr-row {
  display: flex;
  align-items: center;
  gap: 20px;
}
.cf-qr-img {
  width: 80px;
  height: 80px;
  min-width: 80px;
  border: 1px solid var(--rule);
  display: block;
  cursor: zoom-in;
  transition: border-color 0.15s;
}
.cf-qr-img:hover { border-color: var(--vermilion); }
.cf-qr-info {
  text-align: left;
}
.cf-email {
  font-family: var(--body);
  font-size: 14px;
}
.cf-email a {
  color: var(--ink);
  text-decoration: none;
  border-bottom: 1px solid var(--ink);
  padding-bottom: 1px;
  transition: border-color 0.15s, color 0.15s;
}
.cf-email a:hover { color: var(--vermilion); border-color: var(--vermilion); }
.cf-qr-desc {
  font-family: var(--body);
  font-size: 11px;
  line-height: 1.5;
  color: var(--muted);
  margin-top: 6px;
}

/* Copyright */
.cf-copy {
  grid-column: 1 / -1;
  border-top: 1px solid var(--rule);
  padding: 14px 0 22px;
  font-family: var(--mono);
  font-size: 9.5px;
  letter-spacing: 0.18em;
  color: var(--muted);
  text-align: center;
}

@media (max-width: 720px) {
  .colophon-grid { grid-template-columns: 1fr; gap: 20px; }
  .cf-contact { justify-content: flex-start; }
  .cf-copy { text-align: left; }
}

/* ---------- utilities ---------- */
.l-zh, .l-en, .l-jp { display: none; }
html[data-lang="zh"] .l-zh,
html[data-lang="en"] .l-en,
html[data-lang="jp"] .l-jp { display: revert; }
html[data-lang="zh"] .b-zh,
html[data-lang="en"] .b-en,
html[data-lang="jp"] .b-jp { display: inline-flex; align-items: center; gap: 10px; }
html[data-lang="zh"] .i-zh,
html[data-lang="en"] .i-en,
html[data-lang="jp"] .i-jp { display: inline; }

html { scroll-behavior: smooth; }

:focus-visible { outline: 2px solid var(--vermilion); outline-offset: 2px; }

/* ===========================================================
   Advanced effects layer — typewriter, reveal, counter,
   parallax, scroll progress, image fade-in
   =========================================================== */

/* Scroll progress bar (top hairline) — use transform:scaleX for GPU compositing */
.scroll-progress {
  position: fixed;
  top: 0; left: 0;
  height: 2px;
  width: 100%;
  background: linear-gradient(90deg, var(--vermilion), color-mix(in oklch, var(--vermilion) 60%, var(--ink)));
  z-index: 200;
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform 0.08s linear;
  will-change: transform;
}

/* Hero typewriter caret */
.cover-headline em {
  position: relative;
  white-space: pre-wrap;
}
.cover-headline em.is-typing::after {
  content: "";
  display: inline-block;
  width: 0.42em;
  height: 0.92em;
  margin-left: 0.06em;
  vertical-align: -0.06em;
  background: var(--vermilion);
  animation: caret-blink 0.85s steps(1) infinite;
  opacity: 0.95;
}
.cover-headline em.is-typing { caret-color: transparent; }
@keyframes caret-blink { 50% { opacity: 0; } }
/* While typing the underline stripe distracts — hide until done */
.cover-headline em.is-typing::after,
.cover-headline em.is-typing { z-index: 2; }
.cover-headline em.is-typing ~ .__hidden { display: none; }
.cover-headline em:not(.is-typing) { animation: none; }
/* Suppress the persistent red underline on em during typing for clarity */
.cover-headline em.is-typing::before {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: 6px;
  height: 2px;
  background: transparent;
}

/* IntersectionObserver reveal: opacity + small translate */
.reveal {
  opacity: 0;
  transform: translateY(22px);
  transition: opacity 0.7s cubic-bezier(0.22, 0.61, 0.36, 1),
              transform 0.7s cubic-bezier(0.22, 0.61, 0.36, 1);
  will-change: opacity, transform;
}
.reveal.is-in {
  opacity: 1;
  transform: translateY(0);
}
/* Per-child stagger for grids with .reveal-stagger */
.reveal-stagger > * {
  opacity: 0;
  transform: translateY(18px);
  transition: opacity 0.65s ease-out, transform 0.65s ease-out;
}
.reveal-stagger.is-in > * { opacity: 1; transform: translateY(0); }
.reveal-stagger.is-in > *:nth-child(1) { transition-delay: 0.04s; }
.reveal-stagger.is-in > *:nth-child(2) { transition-delay: 0.10s; }
.reveal-stagger.is-in > *:nth-child(3) { transition-delay: 0.16s; }
.reveal-stagger.is-in > *:nth-child(4) { transition-delay: 0.22s; }
.reveal-stagger.is-in > *:nth-child(5) { transition-delay: 0.28s; }
.reveal-stagger.is-in > *:nth-child(6) { transition-delay: 0.34s; }
.reveal-stagger.is-in > *:nth-child(7) { transition-delay: 0.40s; }
.reveal-stagger.is-in > *:nth-child(8) { transition-delay: 0.46s; }

/* Photo fade-in + subtle scale */
.photo {
  opacity: 0;
  transform: scale(0.985);
  transition: opacity 0.85s cubic-bezier(0.2, 0.6, 0.2, 1),
              transform 0.85s cubic-bezier(0.2, 0.6, 0.2, 1);
}
.photo.is-in { opacity: 1; transform: scale(1); }

/* Collage parallax — combine the existing rotation with a translated layer */
.collage .photo {
  --tx: 0px; --ty: 0px; --py: 0px;
  transition: transform 0.35s cubic-bezier(0.2, 0.7, 0.2, 1), opacity 0.85s ease;
}
.collage .p1.is-in { transform: rotate(-2.2deg) translate3d(var(--tx), calc(var(--ty) + var(--py)), 0) scale(1); }
.collage .p2.is-in { transform: rotate(1.6deg)  translate3d(var(--tx), calc(var(--ty) + var(--py)), 0) scale(1); }
.collage .p3.is-in { transform: rotate(1.2deg)  translate3d(var(--tx), calc(var(--ty) + var(--py)), 0) scale(1); }
.collage .p4.is-in { transform: rotate(-2.8deg) translate3d(var(--tx), calc(var(--ty) + var(--py)), 0) scale(1); }
.collage .p1 { transform: rotate(-2.2deg) scale(0.985); }
.collage .p2 { transform: rotate(1.6deg)  scale(0.985); }
.collage .p3 { transform: rotate(1.2deg)  scale(0.985); }
.collage .p4 { transform: rotate(-2.8deg) scale(0.985); }

/* Counter number flicker while running */
.cover-meta strong { transition: color 0.18s ease; font-variant-numeric: tabular-nums; }
.cover-meta strong.is-counting { color: color-mix(in oklch, var(--ink) 78%, var(--vermilion)); }

/* ===========================================================
   Zirflow tech signature — particle grid, scroll parallax,
   live data pulse, process flow stroke draw
   =========================================================== */

/* Particle grid background — two layers of radial dots, slow drift.
   Sits behind cover-meta and colophon to read as "Zirflow is on". */
.zf-particles {
  position: relative;
  isolation: isolate;
  overflow: hidden;
}
.zf-particles::before,
.zf-particles::after {
  content: "";
  position: absolute;
  inset: -20%;
  pointer-events: none;
  z-index: -1;
  background-image:
    radial-gradient(circle at center, color-mix(in oklch, var(--vermilion) 28%, transparent) 0.6px, transparent 0.6px),
    radial-gradient(circle at center, color-mix(in oklch, var(--ink) 22%, transparent) 0.6px, transparent 0.6px);
  background-size: 32px 32px, 32px 32px;
  background-position: 0 0, 16px 16px;
  opacity: 0.32;
  animation: zf-drift 48s linear infinite;
}
.zf-particles::after {
  background-size: 64px 64px, 64px 64px;
  background-position: 8px 8px, 24px 24px;
  opacity: 0.18;
  animation-duration: 96s;
  animation-direction: reverse;
}
@keyframes zf-drift {
  0%   { transform: translate3d(0, 0, 0); }
  50%  { transform: translate3d(-16px, -16px, 0); }
  100% { transform: translate3d(0, 0, 0); }
}
@media (prefers-reduced-motion: reduce) {
  .zf-particles::before, .zf-particles::after { animation: none; }
}

/* Scroll-driven parallax on cover collage (desktop only) */
@media (min-width: 901px) {
  .collage .p1 { will-change: transform; }
  .collage .p2 { will-change: transform; }
  .collage .p3 { will-change: transform; }
  .collage .p4 { will-change: transform; }
}

/* Live data pulse — small heartbeat dot signalling "AI service live".
   Used in the colophon footer as a subtle Zirflow tech signature. */
.zf-live {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--mono);
  font-size: 10px;
  font-weight: 500;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--muted);
}
.zf-live::before {
  content: "";
  width: 7px; height: 7px;
  border-radius: 50%;
  background: #16a34a;
  box-shadow: 0 0 0 0 color-mix(in oklch, #16a34a 65%, transparent);
  animation: zf-pulse 1.8s cubic-bezier(0.4, 0, 0.6, 1) infinite;
}
@keyframes zf-pulse {
  0%   { box-shadow: 0 0 0 0   color-mix(in oklch, #16a34a 70%, transparent); }
  70%  { box-shadow: 0 0 0 10px color-mix(in oklch, #16a34a 0%,  transparent); }
  100% { box-shadow: 0 0 0 0   color-mix(in oklch, #16a34a 0%,  transparent); }
}
@media (prefers-reduced-motion: reduce) {
  .zf-live::before { animation: none; }
}

/* Process flow stroke draw — applied to the 5-step process SVG line.
   Default stroke-dashoffset = full length (hidden), .is-in draws it. */
.zf-flow path.zf-line {
  stroke-dasharray: 800;
  stroke-dashoffset: 800;
  transition: stroke-dashoffset 1.6s cubic-bezier(0.22, 0.61, 0.36, 1);
}
.zf-flow.is-in path.zf-line { stroke-dashoffset: 0; }
.zf-flow circle.zf-node {
  opacity: 0;
  transform: scale(0.4);
  transform-origin: center;
  transform-box: fill-box;
  transition: opacity 0.5s ease, transform 0.5s cubic-bezier(0.2, 0.7, 0.2, 1.4);
}
.zf-flow.is-in circle.zf-node { opacity: 1; transform: scale(1); }
.zf-flow.is-in circle.zf-node:nth-of-type(1) { transition-delay: 0.20s; }
.zf-flow.is-in circle.zf-node:nth-of-type(2) { transition-delay: 0.50s; }
.zf-flow.is-in circle.zf-node:nth-of-type(3) { transition-delay: 0.80s; }
.zf-flow.is-in circle.zf-node:nth-of-type(4) { transition-delay: 1.10s; }
.zf-flow.is-in circle.zf-node:nth-of-type(5) { transition-delay: 1.40s; }
@media (prefers-reduced-motion: reduce) {
  .zf-flow path.zf-line { stroke-dashoffset: 0; transition: none; }
  .zf-flow circle.zf-node { opacity: 1; transform: scale(1); transition: none; }
}

/* Reveal-stagger for material cards (already has .reveal-stagger class) */
@media (prefers-reduced-motion: reduce) {
  .reveal, .reveal-stagger > * { opacity: 1; transform: none; transition: none; }
}

/* Lang button — soft tap feedback */
.lang button { transition: background 0.14s ease, color 0.14s ease, transform 0.18s ease; }
.lang button:active { transform: scale(0.96); }

/* Soft hover lift on cards (cheap CSS-only) */
.material-card, .ws-card, .step, .brand-card, .qr-card, .cred-card {
  transition: transform 0.32s cubic-bezier(0.2, 0.6, 0.2, 1), box-shadow 0.32s ease;
}
.material-card:hover, .ws-card:hover, .step:hover, .qr-card:hover {
  transform: translateY(-2px);
}

/* Loading state for images (lightweight skeleton) */
.photo img {
  background: linear-gradient(110deg, var(--paper-2) 8%, var(--paper-3) 18%, var(--paper-2) 33%);
  background-size: 200% 100%;
  animation: shimmer 1.6s linear infinite;
}
.photo img[data-loaded="1"] {
  background: none;
  animation: none;
}
@keyframes shimmer {
  0%   { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}

/* Reduced motion — turn everything off honestly */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .scroll-progress { display: none; }
  .reveal, .reveal-stagger > *, .photo {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
    animation: none !important;
  }
  .cover-headline em.is-typing::after { animation: none; opacity: 0; }
  .photo img { animation: none; background: none; }
  .collage .p1, .collage .p2, .collage .p3, .collage .p4 {
    transform: none !important;
  }
}

/* Reduced data — user has set OS-level "low data mode" or equivalent.
   On slow connections (mobile roaming, captive portals) we want a
   lightweight page: skip the WebP preference (serve JPEG), drop the
   noise overlay, and keep typography but no decorative treatment. */
@media (prefers-reduced-data: reduce) {
  body::before { display: none; }
  .photo img {
    filter: none !important;
  }
  /* Force JPEG fallback on <picture> sources when supported. Browsers
     that respect prefers-reduced-data swap WebP for the JPEG <img>. */
  picture > source[type="image/webp"] { display: none; }
}

/* ---------- Skip-to-content link (a11y) ----------------------------- */
.skip-link {
  position: absolute;
  top: -100px;
  left: 12px;
  z-index: 9999;
  background: var(--ink);
  color: var(--paper);
  padding: 12px 18px;
  font-family: var(--mono);
  font-size: 12px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  border: 1px solid var(--vermilion);
  text-decoration: none;
  transition: top 0.18s;
}
.skip-link:focus { top: 12px; outline: 2px solid var(--vermilion); outline-offset: 2px; }
main#main { outline: none; }

/* ---------- Back-to-top button (long single page) -------------------- */
.back-to-top {
  position: fixed;
  bottom: 24px;
  right: 24px;
  width: 44px;
  height: 44px;
  background: var(--ink);
  color: var(--paper);
  border: 1px solid var(--ink);
  border-radius: 50%;
  font-family: var(--display);
  font-size: 18px;
  display: grid;
  place-items: center;
  cursor: pointer;
  z-index: 50;
  opacity: 0;
  transform: translateY(8px);
  pointer-events: none;
  transition: opacity 0.2s, transform 0.2s, background 0.15s;
  box-shadow: 0 6px 20px -8px rgba(20, 14, 6, 0.4);
}
.back-to-top.is-visible { opacity: 1; transform: translateY(0); pointer-events: auto; }
.back-to-top:hover { background: var(--vermilion); border-color: var(--vermilion); }
.back-to-top:focus-visible { outline: 2px solid var(--vermilion); outline-offset: 2px; }
@media (max-width: 720px) { .back-to-top { bottom: 80px; right: 16px; } }

/* Sticky mobile contact bar — visible on screens ≤720px */
.mob-bar {
  display: none;
  position: fixed;
  bottom: 0; left: 0; right: 0;
  z-index: 99;
  background: var(--paper);
  border-top: 1px solid var(--ink);
  padding: 10px 16px;
  padding-bottom: max(10px, env(safe-area-inset-bottom));
  gap: 10px;
  box-shadow: 0 -4px 20px -8px rgba(20, 14, 6, 0.18);
}
@media (max-width: 720px) {
  .mob-bar { display: flex; }
}
.mob-bar-btn {
  flex: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 12px 16px;
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  border: 1px solid var(--ink);
  color: var(--ink);
  background: transparent;
  transition: background 0.15s, color 0.15s;
}
.mob-bar-btn.primary {
  background: var(--ink);
  color: var(--paper);
}
.mob-bar-btn:active {
  background: var(--vermilion);
  border-color: var(--vermilion);
  color: var(--paper);
}

/* ---------- High contrast / forced colors (Windows a11y) ------------- */
@media (prefers-contrast: more) {
  :root {
    --muted: oklch(30% 0.02 50);
    --rule: oklch(45% 0.02 70);
  }
  .btn { border-width: 2px; }
  .field input, .field select, .field textarea { border-width: 2px; }
}
@media (forced-colors: active) {
  .btn, .field input, .field select, .field textarea,
  .lang button, .theme-toggle, .back-to-top {
    border: 2px solid CanvasText;
  }
  .skip-link:focus { outline: 3px solid Highlight; }
  :focus-visible { outline: 3px solid Highlight !important; }
  .photo img { filter: none; }
}


/* Inline IP disclosure — surfaced between materials and process sections */
.ip-note-inline {
  margin: 48px auto 0;
  padding: 20px 28px;
  border-left: 3px solid var(--vermilion);
  background: color-mix(in oklch, var(--vermilion) 3%, var(--paper));
}
.ip-note-inline p {
  font-family: var(--body);
  font-size: 13px;
  line-height: 1.65;
  color: var(--muted);
  margin: 0;
}
.ip-note-inline a {
  color: var(--vermilion);
  text-decoration: underline;
  text-underline-offset: 2px;
}
.ip-note-inline a:hover { color: var(--ink); }

/* ---------- Colophon ip-note (simplified) ---------- */
.colophon-ipnote {
  border-top: 1px solid var(--rule);
  padding: 24px 0;
  margin: 0;
}
.colophon-ipnote-inner {
  max-width: 1320px;
  margin: 0 auto;
  padding: 0 48px;
}
.colophon-ipnote-body {
  font-family: var(--mono);
  font-size: 10.5px;
  line-height: 1.6;
  letter-spacing: 0.06em;
  color: var(--muted);
  margin: 0;
  max-width: 72ch;
}
.colophon-ipnote-body a {
  color: var(--vermilion);
  text-decoration: underline;
  text-underline-offset: 2px;
}
.colophon-ipnote-body a:hover { color: var(--ink); }
@media (max-width: 720px) {
  .colophon-ipnote-inner { padding: 0 22px; }
}

/* Print stylesheet moved to assets/print.css (media="print", lazy-loaded) */