/* ═══════════════════════════════════════════════════════════════════════
   何苦开心 — Merged Theme Stylesheet
   Design system: cold-grey base, orange accent, Noto Serif SC + Bodoni
   Pages: Homepage / Read / Boya / Article / Deep / About
   ═══════════════════════════════════════════════════════════════════════ */


/* ── TOKENS ─────────────────────────────────────────────────────────── */

:root{
  --bg: #F0F1F2;
  --paper: #F7F7F8;
  --ink: #15171C;
  --read: #23262D;          /* body text on article page — slightly softer */
  --ink-2: #3C404A;
  --ink-soft: #5C616C;
  --ink-faint: #969AA3;
  --line: rgba(21,23,28,.13);
  --line-2: rgba(21,23,28,.07);

  --accent: #FF3B14;
  --accent-ink: #fff;

  --serif: "Noto Serif SC", serif;
  --sans: "Noto Sans SC", system-ui, sans-serif;
  --display: "Bodoni Moda", "Noto Serif SC", serif;

  --maxw: 1480px;
  --gut: clamp(20px, 5vw, 110px);
  --read-w: 712px;           /* comfortable reading measure (article page) */
}


/* ── RESET & BASE ───────────────────────────────────────────────────── */

*{ box-sizing: border-box; }
html{ -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body{
  margin:0; background: var(--bg); color: var(--ink);
  font-family: var(--serif); font-weight:400; line-height:1.7;
  -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility;
  overflow-x: clip;
}
::selection{ background: var(--accent); color: var(--accent-ink); }

/* Ghost Koenig editor width classes (required) */
.kg-width-wide{ max-width: min(1040px, calc(100vw - 2 * var(--gut))); margin-left: auto; margin-right: auto; }
.kg-width-full{ max-width: none; margin-left: calc(-1 * var(--gut)); margin-right: calc(-1 * var(--gut)); width: calc(100% + 2 * var(--gut)); }
.kg-width-full img{ width: 100%; }
a{ color:inherit; text-decoration:none; }
img{ max-width:100%; display:block; }

.wrap{ width:100%; max-width: var(--maxw); margin:0 auto; padding: 0 var(--gut); }
.read-col{ width:100%; max-width: var(--read-w); margin-inline:auto; }
.acc{ color: var(--accent); }


/* ── REVEAL ANIMATION ───────────────────────────────────────────────── */

html.reveal-ready [data-reveal]{
  opacity:0; transform: translateY(24px);
  transition: opacity 1s cubic-bezier(.2,.6,.2,1), transform 1s cubic-bezier(.2,.6,.2,1);
}
html.reveal-ready [data-reveal].in{ opacity:1; transform:none; }
html.reveal-done [data-reveal]{ opacity:1 !important; transform:none !important; transition:none !important; }
@media (prefers-reduced-motion: reduce){
  html.reveal-ready [data-reveal]{ opacity:1!important; transform:none!important; }
  html{ scroll-behavior:auto; }
}


/* ── NAV ─────────────────────────────────────────────────────────────── */

.nav{
  position: sticky; top:0; z-index:100;
  display:flex; align-items:baseline; justify-content:space-between;
  padding: 16px var(--gut);
  background: color-mix(in oklch, var(--bg) 80%, transparent);
  backdrop-filter: blur(14px) saturate(150%); -webkit-backdrop-filter: blur(14px) saturate(150%);
}
.brand{ font-family: var(--serif); font-weight:900; font-size:20px; letter-spacing:.16em; }
.brand b{ color: var(--accent); }
.nav-links{ display:flex; align-items:baseline; gap: clamp(14px,2.2vw,34px); }
.nav-links a{
  font-family: var(--sans); font-size:14px; font-weight:500;
  letter-spacing:.06em; color: var(--ink-2); transition: color .25s;
  position:relative;
}
.nav-links a:hover{ color: var(--accent); }
.nav-links a.active{ color: var(--ink); }
.nav-links a.active::after{
  content:""; position:absolute; left:0; right:0; bottom:-5px;
  height:2px; background: var(--accent);
}
.nav-en{ font-family: var(--display); font-style:italic; font-size:15px; color: var(--ink-faint); }
@media(max-width:720px){ .nav-links a:nth-child(n+4):not(.nav-en){ display:none; } }


/* ── BREADCRUMB ──────────────────────────────────────────────────────── */

.crumb{
  font-family:var(--sans); font-size:12.5px; letter-spacing:.04em;
  color: var(--ink-faint); padding-top: clamp(24px,4vh,40px);
}
.crumb a:hover{ color: var(--accent); }
.crumb .sep{ margin:0 .5em; }
.crumb b{ color: var(--ink-2); font-weight:500; }


/* ── CTA BUTTON ──────────────────────────────────────────────────────── */

.cta{
  display:inline-flex; align-items:center; gap:.55em;
  font-family: var(--sans); font-weight:600; font-size:15px; letter-spacing:.02em;
  background: var(--ink); color:#fff; padding: 14px 26px; border-radius:0;
  white-space:nowrap;
  transition: background .3s, transform .3s cubic-bezier(.2,.7,.2,1);
}
.cta .arr{ display:inline-block; transition: transform .35s cubic-bezier(.2,.7,.2,1); }
.cta:hover{ background: var(--accent); transform: translate(2px,-2px); }
.cta:hover .arr{ transform: translate(4px,4px); }
.cta.line{ background:transparent; color: var(--ink); box-shadow: inset 0 0 0 1.5px var(--ink); }
.cta.line:hover{ background: var(--ink); color:#fff; }
.cta.ondark{ background:#fff; color: var(--ink); }
.cta.ondark:hover{ background: var(--accent); color:#fff; }
.cta.big{ font-size:16.5px; padding: 17px 34px; }
.cta-row{ display:flex; align-items:center; gap:16px; flex-wrap:wrap; }


/* ── SEC-LEAD (shared section header pattern) ────────────────────────── */

.sec-lead{
  display:flex; align-items:flex-end; justify-content:space-between;
  gap:24px; flex-wrap:wrap; margin-bottom: clamp(30px,5vh,56px);
}
.sec-lead .kick{
  font-family:var(--sans); font-size:12px; font-weight:600;
  letter-spacing:.2em; text-transform:uppercase; color: var(--accent);
  display:flex; align-items:center; gap:.7em;
}
.sec-lead .kick .en{
  font-family:var(--display); font-style:italic; text-transform:none;
  letter-spacing:.02em; font-size:15px; color:var(--ink-soft);
}
.sec-lead h2{
  font-weight:900; font-size: clamp(2rem,5vw,3.6rem); line-height:1.02;
  letter-spacing:-.01em; margin:.4em 0 0;
}
.sec-lead .aside{
  font-family:var(--sans); font-size:14px; color:var(--ink-soft);
  line-height:1.7; max-width: 30ch; text-align:right;
}
.sec-lead .pace{
  font-family:var(--sans); font-size:13.5px; color:var(--ink-soft);
  line-height:1.7; max-width: 30ch; text-align:right;
}
.sec-lead .pace b{ color: var(--ink); font-weight:600; }


/* ── READING PROGRESS BAR (article page) ─────────────────────────────── */

.progress{
  position:fixed; top:0; left:0; height:2px; width:0;
  background: var(--accent); z-index:200; transition: width .1s linear;
}


/* ═══════════════════════════════════════════════════════════════════════
   HOMEPAGE — C-case Hero (editorial masthead)
   ═══════════════════════════════════════════════════════════════════════ */

.hero-c{ padding-block: clamp(28px,4vh,48px) clamp(64px,10vh,120px); }
.hero-c .masthead{
  display:flex; align-items:flex-end; justify-content:space-between;
  gap: 24px; padding-bottom: 20px; border-bottom: 2px solid var(--ink); flex-wrap: wrap;
}
.hero-c .mh-title{
  font-family: var(--serif); font-weight:900;
  font-size: clamp(2.4rem,7vw,5.4rem); letter-spacing:.04em; line-height:.95;
}
.hero-c .mh-meta{
  font-family: var(--display); font-style:italic; font-size: 15px;
  color: var(--ink-soft); text-align:right; line-height:1.5;
}
.hero-c .mh-meta b{
  font-style: normal; font-family: var(--sans); font-weight:500;
  letter-spacing:.12em; text-transform: uppercase; font-size:11px;
  display:block; color: var(--ink-2);
}
.hero-c .cover{
  display:grid; grid-template-columns: 1fr; gap: clamp(28px,4vw,56px);
  padding-top: clamp(34px,6vh,70px);
}
@media(min-width: 920px){ .hero-c .cover{ grid-template-columns: 1.55fr 1fr; align-items:start; } }
.hero-c .cover-line .lbl{
  font-family: var(--sans); font-size:12px; font-weight:500;
  letter-spacing:.2em; text-transform:uppercase; color: var(--accent);
  margin-bottom: 18px; display:block;
}
.hero-c .cover-line h1{
  font-weight:900; font-size: clamp(2rem,5vw,3.9rem); line-height:1.12;
  letter-spacing:-.005em; margin:0;
}
.hero-c .cover-line h1 .soft{ font-weight:400; color: var(--ink-2); }
.hero-c .cover-line h1 .acc{ color: var(--accent); }
.hero-c .cover-side{
  font-size: 17px; line-height: 1.85; color: var(--ink-2);
  border-top: 1px solid var(--line); padding-top: 22px;
}
.hero-c .cover-side p{ margin: 0 0 18px; }
.hero-c .cover-side .cta-row{ margin-top: 26px; }


/* ═══════════════════════════════════════════════════════════════════════
   HOMEPAGE — B-case Hero (broken masthead / wordmark bleed)
   ═══════════════════════════════════════════════════════════════════════ */

.hero{ position:relative; padding: clamp(20px,4vh,40px) 0 clamp(70px,11vh,150px); overflow: clip; }
.hero .topline{
  display:flex; align-items:flex-end; justify-content:space-between; gap:20px;
  border-bottom: 2px solid var(--ink); padding-bottom: 14px; flex-wrap:wrap;
}
.hero .topline .meta{
  font-family:var(--sans); font-size:11px; font-weight:500;
  letter-spacing:.2em; text-transform:uppercase; color: var(--ink-soft);
}
.hero .topline .meta-r{
  font-family:var(--display); font-style:italic; font-size:15px;
  color: var(--ink-soft); text-align:right;
}

.hero .wordmark{
  font-family: var(--serif); font-weight:900; line-height:.82; letter-spacing:-.01em;
  font-size: clamp(5rem, 23vw, 21rem);
  margin: clamp(20px,5vh,60px) 0 0; margin-left: calc(-1 * var(--gut) - .04em);
  white-space: nowrap;
}
.hero .wordmark .x{ color: var(--accent); }

.hero .manifesto{
  margin-top: clamp(18px, 3vh, 40px);
  display:grid; grid-template-columns: 1fr; gap: 8px;
  margin-left: auto; max-width: 40ch; text-align: left;
}
.hero .manifesto .l{
  font-weight:400; font-size: clamp(1.15rem, 2.2vw, 1.75rem);
  line-height:1.55; color: var(--ink-2);
}
.hero .manifesto .l b{ font-weight:900; color: var(--ink); }
.hero .manifesto .big{
  font-family: var(--serif); font-weight:900;
  font-size: clamp(2rem,5vw,3.6rem); line-height:1.1; color: var(--ink);
  margin-top:.2em;
}
.hero .manifesto .big .acc{ color: var(--accent); }
.hero .manifesto .cta{ margin-top: 22px; }

.hero .vlabel{
  position:absolute; left: clamp(6px, 1.5vw, 28px); bottom: clamp(80px, 16vh, 240px);
  writing-mode: vertical-rl; font-family: var(--display); font-style:italic;
  font-size: 15px; color: var(--ink-faint); letter-spacing:.08em;
}
@media(max-width: 860px){
  .hero .manifesto{ padding-left:0; margin-left:0; max-width:none; }
  .hero .wordmark{ font-size: clamp(3.4rem, 22vw, 8rem); margin-left: calc(-1 * var(--gut)); }
  .hero .vlabel{ display:none; }
}


/* ═══════════════════════════════════════════════════════════════════════
   HOMEPAGE — Path (irregular depth list)
   ═══════════════════════════════════════════════════════════════════════ */

.path{ padding: clamp(70px,11vh,150px) 0 clamp(60px,9vh,120px); position:relative; }
.path .lead{
  display:grid; grid-template-columns:1fr; gap: 18px;
  margin-bottom: clamp(40px,6vh,80px);
}
@media(min-width: 820px){
  .path .lead{ grid-template-columns: auto 1fr; align-items:end; gap: clamp(30px,5vw,90px); }
}
.path .lead .num{
  font-family: var(--display); font-style:italic;
  font-size: clamp(20px,2.4vw,30px); color: var(--ink-faint);
}
.path .lead h2{
  font-weight:900; font-size: clamp(2.4rem,7vw,5.5rem); line-height:.98;
  letter-spacing:-.01em; margin:0;
}
.path .lead .aside{
  font-family:var(--sans); font-size:14.5px; color:var(--ink-soft);
  line-height:1.7; max-width: 34ch;
}

.steps{ position:relative; }
.step{ position:relative; border-top:1px solid var(--line); }
.step:last-of-type{ border-bottom:1px solid var(--line); }
.step a{ display:block; padding: clamp(24px,3.4vh,40px) 0; }
.step .row{
  display:grid; align-items:baseline; gap: clamp(12px,2vw,32px);
  grid-template-columns: clamp(40px,5vw,76px) 1fr auto;
}
.step .idx{
  font-family: var(--display); font-style:italic;
  font-size: clamp(20px,2.4vw,34px); color: var(--ink-faint);
}
.step .nm{
  font-weight:900; line-height:1; letter-spacing:.01em;
  display:flex; align-items:baseline; gap:.5em; flex-wrap:wrap;
}
.step .nm .en{
  font-family: var(--display); font-style:italic; font-weight:400;
  color: var(--ink-faint);
}
.step .desc{
  font-size:16px; color: var(--ink-2); margin-top:.7em;
  max-width: 48ch; line-height:1.6;
}
.step .desc .means{
  font-family:var(--sans); font-size:12.5px; color:var(--ink-faint);
  letter-spacing:.03em; display:block; margin-top:.5em;
}
.step .meta{
  display:flex; flex-direction:column; align-items:flex-end;
  gap:9px; text-align:right;
}
.step .tag{
  font-family:var(--sans); font-size:11.5px; font-weight:500;
  letter-spacing:.04em; color:var(--ink-soft); border:1px solid var(--line);
  border-radius:999px; padding:3px 11px; white-space:nowrap;
}
.step .arrow{
  font-family:var(--sans); font-weight:600; font-size:13.5px;
  color:var(--ink); opacity:.4; transition:opacity .3s, transform .3s;
}
.step a:hover .arrow{ opacity:1; transform: translateX(4px); }
.step a:hover .nm{ color: var(--accent); }

/* depth scale-down: 01 huge & left -> 05 small & indented right */
.step.s1 .nm{ font-size: clamp(2.2rem,6vw,4.6rem); }
.step.s3 .nm{ font-size: clamp(1.9rem,4.6vw,3.4rem); }
.step.s4 .nm{ font-size: clamp(1.7rem,4vw,2.9rem); }
.step.s5 .row{ grid-template-columns: clamp(40px,5vw,76px) 1fr auto; }
.step.s5 .nm{ font-size: clamp(1.5rem,3.4vw,2.4rem); }
.step.s4 a{ padding-left: clamp(0px,6vw,120px); }
.step.s5 a{ padding-left: clamp(0px,12vw,260px); }
@media(max-width:720px){
  .step.s4 a, .step.s5 a{ padding-left:0; }
  .step .row{ grid-template-columns:1fr; gap:10px; }
  .step .meta{ flex-direction:row; align-items:center; justify-content:flex-start; }
}

/* 02 boya — full-bleed orange rupture strip */
.step.live{ border:none; margin: clamp(6px,1vh,14px) 0; }
.step.live a{
  background: var(--accent); color:#fff;
  padding: clamp(34px,5vh,64px) var(--gut); position: relative;
}
.step.live .row{
  width:100%; max-width: var(--maxw); margin:0 auto;
  grid-template-columns: clamp(40px,5vw,76px) 1fr auto; align-items: center;
}
.step.live .idx{ color: rgba(255,255,255,.6); }
.step.live .nm{ color:#fff; font-size: clamp(2.4rem,6.5vw,5rem); }
.step.live a:hover .nm{ color:#fff; }
.step.live .nm .en{ color: rgba(255,255,255,.7); }
.step.live .desc{ color: rgba(255,255,255,.92); max-width: 44ch; }
.step.live .desc .means{ color: rgba(255,255,255,.65); }
.step.live .tag{ color:#fff; border-color: rgba(255,255,255,.5); background: rgba(255,255,255,.12); }
.step.live .arrow{ color:#fff; opacity:.85; }
.step.live .liveword{
  position:absolute; right: clamp(10px,3vw,60px); top: 10px;
  font-family: var(--display); font-style:italic;
  font-size: clamp(40px,9vw,150px); color: rgba(255,255,255,.14);
  pointer-events:none; line-height:1; user-select:none;
}
@media(max-width:720px){
  .step.live a{ padding-inline: var(--gut); }
  .step.live .liveword{ display:none; }
}

.undercurrent{
  margin-top: clamp(40px,6vh,72px); font-family:var(--sans); font-size:15px;
  color:var(--ink-soft); line-height:1.9; max-width: 64ch;
}
.undercurrent b{ color: var(--ink); font-weight:500; }


/* ═══════════════════════════════════════════════════════════════════════
   HOMEPAGE — Rupture (dark full-screen pull-quote)
   ═══════════════════════════════════════════════════════════════════════ */

.quote{
  background: var(--ink); color: #F0F1F2; min-height: 88vh;
  display:flex; align-items:center; position:relative; overflow:clip;
}
.quote .q-mark{
  position:absolute; left: clamp(10px,3vw,70px); top: clamp(20px,6vh,80px);
  font-family:var(--display); font-style:italic;
  font-size: clamp(120px,22vw,340px); color: rgba(240,241,242,.06);
  line-height:.8; user-select:none;
}
.quote .q-body{ position:relative; z-index:1; }
.quote blockquote{
  margin:0; font-weight:900; line-height:1.14; letter-spacing:-.005em;
  font-size: clamp(2.1rem, 6.4vw, 6rem); max-width: 18ch;
}
.quote blockquote .acc{ color: var(--accent); }
.quote .q-cite{
  margin-top: clamp(26px,4vh,46px); font-family:var(--sans); font-size:13px;
  font-weight:500; letter-spacing:.16em; text-transform:uppercase;
  color: rgba(240,241,242,.55); display:flex; gap:.7em; align-items:center;
}
.quote .q-cite .dot{ width:6px; height:6px; border-radius:50%; background:var(--accent); }
.quote .q-en{
  position:absolute; right: clamp(10px,3vw,70px); bottom: clamp(24px,5vh,60px);
  writing-mode: vertical-rl; font-family:var(--display); font-style:italic;
  font-size:15px; color: rgba(240,241,242,.4);
}
@media(max-width:720px){ .quote .q-en{ display:none; } }


/* ═══════════════════════════════════════════════════════════════════════
   HOMEPAGE — Now section (broken grid, feature + recent + cards)
   ═══════════════════════════════════════════════════════════════════════ */

.now{ padding: clamp(70px,11vh,150px) 0 clamp(60px,9vh,120px); }
.now .lead{
  display:flex; align-items:flex-end; justify-content:space-between;
  gap:24px; flex-wrap:wrap; margin-bottom: clamp(40px,6vh,76px);
}
.now .lead h2{
  font-weight:900; font-size: clamp(2rem,5.4vw,4.4rem); line-height:1;
  letter-spacing:-.01em; margin:0;
}
.now .lead .kick{
  font-family:var(--sans); font-size:12px; font-weight:600;
  letter-spacing:.2em; text-transform:uppercase; color: var(--accent);
  margin-bottom: 14px; display:block;
}
.now .lead .aside{
  font-family:var(--sans); font-size:14px; color:var(--ink-soft);
  line-height:1.7; max-width: 28ch; text-align:right;
}

/* asymmetric grid */
.now-grid{ display:grid; grid-template-columns:1fr; gap: clamp(20px,2.5vw,30px); }
@media(min-width: 920px){ .now-grid{ grid-template-columns: 1.7fr .9fr; align-items:start; } }

.feature{ position:relative; }
.feature .ft-tags{ display:flex; gap:10px; align-items:center; margin-bottom:18px; flex-wrap:wrap; }
.feature .ft-tags .t{
  font-family:var(--sans); font-size:11.5px; font-weight:500;
  letter-spacing:.04em; color:var(--ink-soft); border:1px solid var(--line);
  border-radius:999px; padding:3px 11px;
}
.feature .ft-tags .t.hot{ color:var(--accent); border-color: color-mix(in oklch,var(--accent) 40%, transparent); }
.feature h3{
  font-weight:900; font-size: clamp(2.1rem,5.2vw,4rem); line-height:1.04;
  letter-spacing:-.01em; margin:0; transition: color .3s;
}
.feature:hover h3{ color: var(--accent); }
.feature .dek{ font-size:18px; color: var(--ink-2); line-height:1.65; margin: 22px 0 0; max-width: 38ch; }
.feature .by{ font-family:var(--sans); font-size:13px; color:var(--ink-faint); letter-spacing:.04em; margin-top:22px; }

.recent{ border-top: 2px solid var(--ink); padding-top: 16px; }
.recent .rh{
  font-family:var(--sans); font-size:12px; font-weight:600;
  letter-spacing:.18em; text-transform:uppercase; color:var(--ink-2); margin-bottom:6px;
}
.r-item{ display:block; padding:16px 0; border-bottom:1px solid var(--line); transition: padding-left .3s; }
.r-item:hover{ padding-left: 8px; }
.r-item .r-top{ display:flex; align-items:center; gap:10px; margin-bottom:6px; }
.r-item .r-prop{ font-family:var(--sans); font-size:11px; font-weight:600; letter-spacing:.1em; color:var(--accent); }
.r-item .r-date{ font-family:var(--display); font-style:italic; font-size:13px; color:var(--ink-faint); margin-left:auto; }
.r-item .r-title{ font-weight:600; font-size:18px; line-height:1.4; transition: color .3s; }
.r-item:hover .r-title{ color: var(--accent); }

/* two cards */
.now-cards{ display:grid; grid-template-columns:1fr; gap: clamp(18px,2vw,26px); margin-top: clamp(40px,6vh,72px); }
@media(min-width: 820px){ .now-cards{ grid-template-columns: 1.25fr .75fr; align-items:stretch; } }
.card{
  position:relative; padding: clamp(26px,3vw,44px); background: var(--paper);
  border:1px solid var(--line);
  transition: transform .35s cubic-bezier(.2,.7,.2,1), border-color .35s;
}
.card:hover{ transform: translateY(-3px); border-color: color-mix(in oklch, var(--accent) 50%, var(--line)); }
.card.bleed{ background: var(--ink); color:#fff; border:none; }
.card.bleed .c-lbl{ color: rgba(255,255,255,.6); }
.card.bleed h4{ color:#fff; }
.card.bleed .c-body{ color: rgba(255,255,255,.85); }
.card.bleed .c-modules span{ color: rgba(255,255,255,.8); border-color: rgba(255,255,255,.28); }
.card.bleed .c-link{ color:#fff; }
.card.bleed .price{ color:#fff; }
.card .c-lbl{
  font-family:var(--sans); font-size:12px; font-weight:600;
  letter-spacing:.16em; text-transform:uppercase; color:var(--ink-2);
  margin-bottom: 20px; display:block;
}
.card h4{ font-weight:900; font-size: clamp(1.4rem,2.6vw,2.1rem); line-height:1.12; margin:0 0 14px; }
.card .c-body{ font-size:15.5px; color:var(--ink-2); line-height:1.65; margin:0; }
.card .c-modules{ display:flex; flex-wrap:wrap; gap:8px; margin-top:20px; }
.card .c-modules span{
  font-family:var(--sans); font-size:12px; color:var(--ink-soft);
  border:1px solid var(--line); border-radius:0; padding:4px 11px; white-space:nowrap;
}
.card .c-foot{ display:flex; align-items:center; justify-content:space-between; margin-top:26px; gap:14px; }
.card .c-link{ font-family:var(--sans); font-weight:600; font-size:14px; color:var(--accent); display:inline-flex; gap:.4em; }
.card .price{ font-family:var(--display); font-style:italic; font-size:19px; }


/* ═══════════════════════════════════════════════════════════════════════
   READ PAGE — Header & Navigation
   ═══════════════════════════════════════════════════════════════════════ */

.rhead{ padding-block: clamp(18px,3vh,30px) clamp(50px,8vh,96px); }
.rhead .masthead{
  display:flex; align-items:flex-end; justify-content:space-between; gap:24px;
  padding-bottom: 18px; border-bottom: 2px solid var(--ink); flex-wrap:wrap;
}
.rhead .mh-title{
  font-family: var(--serif); font-weight:900;
  font-size: clamp(3rem,9vw,7rem); letter-spacing:.04em; line-height:.9;
}
.rhead .mh-meta{
  font-family: var(--display); font-style:italic; font-size:15px;
  color: var(--ink-soft); text-align:right; line-height:1.5;
}
.rhead .mh-meta b{
  font-style:normal; font-family:var(--sans); font-weight:500;
  letter-spacing:.12em; text-transform:uppercase; font-size:11px;
  display:block; color:var(--ink-2); margin-bottom:4px;
}

.rhead .intro{
  display:grid; grid-template-columns:1fr; gap: clamp(30px,5vw,70px);
  padding-top: clamp(32px,5vh,60px);
}
@media(min-width: 900px){ .rhead .intro{ grid-template-columns: 1.4fr 1fr; align-items:start; } }
.rhead .intro .what{
  font-size: clamp(1.15rem,1.7vw,1.45rem); line-height:1.75;
  color: var(--ink-2); max-width: 40ch;
}
.rhead .intro .what b{ font-weight:900; color: var(--ink); }
.rhead .intro .what .acc{ font-weight:900; }


/* ── READ — Start cards (entry points) ───────────────────────────────── */

.start .st-h{
  font-family:var(--sans); font-size:12px; font-weight:600;
  letter-spacing:.2em; text-transform:uppercase; color: var(--accent);
  margin-bottom: 18px;
}
.start .st-grid{ display:grid; grid-template-columns:1fr; gap: 10px; }
.start-card{
  display:block; border-top:1px solid var(--line); padding: 16px 0;
  transition: padding-left .3s; position:relative;
}
.start-card:last-child{ border-bottom:1px solid var(--line); }
.start-card:hover{ padding-left: 8px; }
.start-card .sc-top{ display:flex; align-items:baseline; gap:.6em; }
.start-card .who{ font-weight:900; font-size: 17px; }
.start-card .to{
  font-family:var(--display); font-style:italic; font-size:13px;
  color: var(--ink-faint); margin-left:auto;
}
.start-card:hover .to{ color: var(--accent); }
.start-card .tip{
  font-family:var(--sans); font-size:13.5px; color: var(--ink-soft);
  line-height:1.6; margin-top: 5px; max-width: 38ch;
}


/* ── READ — Propositions (seven theses) ──────────────────────────────── */

.props{ padding-block: clamp(60px,9vh,120px); border-top:1px solid var(--line); }

.prop{ border-top:1px solid var(--line); }
.prop:last-of-type{ border-bottom:1px solid var(--line); }
.prop .pin{
  display:grid; grid-template-columns:1fr; gap: clamp(18px,3vw,56px);
  padding: clamp(28px,4vh,46px) 0;
}
@media(min-width: 860px){ .prop .pin{ grid-template-columns: 1fr 1.05fr; align-items:start; } }

.prop .p-num{
  font-family: var(--display); font-style:italic;
  font-size: clamp(20px,2.2vw,30px); color: var(--ink-faint);
  display:block; margin-bottom: 10px;
}
.prop .p-title{
  font-weight:900; font-size: clamp(1.5rem,3vw,2.4rem); line-height:1.12;
  letter-spacing:-.005em; margin:0; transition: color .3s;
}
.prop .p-title .sub{
  display:block; font-weight:400; font-size:.62em;
  color: var(--ink-2); margin-top:.25em;
}
.prop:hover .p-title{ color: var(--accent); }
.prop .p-desc{
  font-size:15.5px; color: var(--ink-soft); line-height:1.7;
  margin: 16px 0 0; max-width: 40ch;
}

.prop .p-arts{ }
.art{
  display:flex; align-items:baseline; gap: 14px; padding: 11px 0;
  border-bottom:1px solid var(--line-2); transition: padding-left .25s;
}
.art:first-child{ border-top:1px solid var(--line-2); }
.art:hover{ padding-left: 6px; }
.art .a-title{
  font-weight:600; font-size: 16.5px; line-height:1.45;
  color: var(--ink); transition: color .3s;
}
.art:hover .a-title{ color: var(--accent); }
.art .a-note{
  font-family:var(--sans); font-size:11.5px; color: var(--ink-faint);
  letter-spacing:.03em; white-space:nowrap;
}
.art .a-meta{ margin-left:auto; display:flex; align-items:center; gap: 12px; white-space:nowrap; }
.art .free{
  font-family:var(--sans); font-size:10.5px; font-weight:500;
  letter-spacing:.1em; text-transform:uppercase; color: var(--ink-faint);
  display:inline-flex; align-items:center; gap:.4em;
}
.art .free::before{ content:""; width:6px; height:6px; border-radius:50%; border:1.5px solid var(--ink-faint); }
.art .a-arrow{
  font-family:var(--sans); font-size:13px; color: var(--ink-faint);
  opacity:0; transition: opacity .25s, transform .25s;
}
.art:hover .a-arrow{ opacity:1; transform: translateX(3px); }
.art.series .a-title{ font-style:normal; }
.art.series .a-title::before{
  content:"系列 "; font-family:var(--sans); font-size:11px;
  font-weight:600; letter-spacing:.08em; color: var(--accent);
}

.prop .p-all{
  display:inline-flex; align-items:center; gap:.5em; margin-top: 18px;
  font-family:var(--sans); font-size:13.5px; font-weight:600;
  color: var(--ink); transition: gap .25s, color .25s;
}
.prop .p-all:hover{ color: var(--accent); gap:.9em; }
.prop .p-all .n{ color: var(--ink-faint); font-weight:500; }


/* ── READ — Undercurrents ────────────────────────────────────────────── */

.under{ padding-block: clamp(50px,7vh,90px); border-top:1px solid var(--line); }
.under .u-grid{ display:grid; grid-template-columns:1fr; gap: clamp(20px,3vw,40px); }
@media(min-width: 760px){
  .under .u-grid{ grid-template-columns: auto repeat(3, 1fr); align-items:baseline; gap: clamp(24px,3vw,56px); }
}
.under .u-lead{
  font-family:var(--sans); font-size:13.5px; color: var(--ink-soft);
  line-height:1.7; max-width: 22ch;
}
.under .u-lead b{
  color: var(--ink); font-weight:600; display:block;
  font-family:var(--serif); font-size:17px; margin-bottom:8px;
}
.uline .ul-t{ font-weight:900; font-size: 19px; transition: color .3s; }
.uline:hover .ul-t{ color: var(--accent); }
.uline .ul-d{ font-family:var(--sans); font-size:12.5px; color: var(--ink-faint); line-height:1.6; margin-top: 7px; }


/* ── READ — Curation (paid/member block) ─────────────────────────────── */

.curation{ padding-block: clamp(60px,9vh,120px); }
.cur-wrap{
  background: var(--ink); color:#fff;
  padding: clamp(34px,5vw,72px); position:relative; overflow:clip;
}
.cur-wrap .cur-ghost{
  position:absolute; right: clamp(-20px,-1vw,0px); top: clamp(-10px,2vh,30px);
  font-family:var(--display); font-style:italic;
  font-size: clamp(60px,11vw,180px); color: rgba(255,255,255,.05);
  line-height:.9; pointer-events:none; user-select:none;
}
.cur-head{
  display:flex; align-items:flex-start; justify-content:space-between;
  gap:24px; flex-wrap:wrap; position:relative; z-index:1;
}
.cur-head .badge{
  display:inline-flex; align-items:center; gap:.5em;
  font-family:var(--sans); font-size:11px; font-weight:600;
  letter-spacing:.16em; text-transform:uppercase; color: var(--accent);
  border:1px solid color-mix(in oklch, var(--accent) 55%, transparent);
  padding: 5px 12px; margin-bottom: 20px; white-space:nowrap;
}
.cur-head h2{
  font-weight:900; font-size: clamp(1.8rem,4vw,3rem); line-height:1.06;
  margin:0; color:#fff;
}
.cur-head .ch-sub{
  font-size:16px; color: rgba(255,255,255,.78); line-height:1.7;
  margin: 16px 0 0; max-width: 42ch;
}
.cur-head .ch-r{ text-align:right; }
.cur-head .price{
  font-family:var(--display); font-style:italic;
  font-size: clamp(20px,2.4vw,30px); color:#fff;
}
.cur-head .price small{
  display:block; font-style:normal; font-family:var(--sans); font-size:11px;
  letter-spacing:.1em; text-transform:uppercase; color: rgba(255,255,255,.55);
  margin-top:6px;
}

.cur-issues{
  display:grid; grid-template-columns:1fr; gap: clamp(14px,1.6vw,20px);
  margin-top: clamp(34px,5vh,52px); position:relative; z-index:1;
}
@media(min-width: 720px){ .cur-issues{ grid-template-columns: 1fr 1fr; } }
.issue{
  border:1px solid rgba(255,255,255,.16); padding: clamp(22px,2.4vw,32px);
  position:relative;
  transition: border-color .3s, transform .3s cubic-bezier(.2,.7,.2,1);
}
.issue:hover{ border-color: rgba(255,255,255,.4); transform: translateY(-3px); }
.issue .lock{
  position:absolute; top: clamp(20px,2.4vw,30px); right: clamp(20px,2.4vw,30px);
  color: rgba(255,255,255,.5);
}
.issue .iss-no{
  font-family:var(--display); font-style:italic; font-size:14px;
  color: var(--accent); margin-bottom: 12px;
}
.issue h4{
  font-weight:900; font-size: clamp(1.3rem,2vw,1.7rem); line-height:1.2;
  margin:0 0 12px; padding-right: 30px; color:#fff;
}
.issue .iss-d{ font-size:14.5px; color: rgba(255,255,255,.7); line-height:1.65; margin:0; }
.issue .iss-foot{
  display:flex; align-items:center; gap:10px; margin-top: 20px;
  font-family:var(--sans); font-size:12px; letter-spacing:.06em;
  color: rgba(255,255,255,.55);
}
.issue .iss-foot .mem{ color: var(--accent); font-weight:600; }
.cur-cta{ margin-top: clamp(30px,4vh,46px); position:relative; z-index:1; }


/* ═══════════════════════════════════════════════════════════════════════
   BOYA PAGE — Header
   ═══════════════════════════════════════════════════════════════════════ */

.bhead{ padding-block: clamp(18px,3vh,30px) clamp(56px,9vh,110px); }
.bhead .masthead{
  display:flex; align-items:flex-end; justify-content:space-between; gap:24px;
  padding-bottom: 18px; border-bottom: 2px solid var(--ink); flex-wrap:wrap;
}
.bhead .mh-title{
  font-family: var(--serif); font-weight:900;
  font-size: clamp(3rem,9vw,7rem); letter-spacing:.04em; line-height:.9;
}
.bhead .mh-meta{
  font-family: var(--display); font-style:italic; font-size:15px;
  color: var(--ink-soft); text-align:right; line-height:1.5;
}
.bhead .mh-meta b{
  font-style:normal; font-family:var(--sans); font-weight:500;
  letter-spacing:.12em; text-transform:uppercase; font-size:11px;
  display:block; color:var(--ink-2); margin-bottom:4px;
}

.bhead .punch{
  display:grid; grid-template-columns:1fr; gap: clamp(28px,4vw,64px);
  padding-top: clamp(36px,6vh,72px);
}
@media(min-width: 940px){ .bhead .punch{ grid-template-columns: 1.5fr 1fr; align-items:end; } }
.bhead .punch h1{
  font-weight:900; font-size: clamp(2rem,4.6vw,3.7rem); line-height:1.18;
  letter-spacing:-.005em; margin:0; max-width: 20ch;
}
.bhead .punch h1 .soft{ font-weight:400; color: var(--ink-2); }
.bhead .punch .side p{
  font-size:17px; color: var(--ink-2); line-height:1.8;
  margin:0 0 22px; max-width: 34ch;
}
.bhead .punch .side .cta-row{
  display:flex; flex-direction:column; align-items:flex-start; gap:14px;
}
.bhead .punch .side .softlink{
  font-family:var(--sans); font-size:14px; color: var(--ink-soft);
  display:inline-flex; align-items:center; gap:.5em;
}
.bhead .punch .side .softlink b{ color: var(--accent); font-weight:600; }
.bhead .punch .side .softlink:hover b{ text-decoration: underline; text-underline-offset: 3px; }


/* ── BOYA — Value proposition ────────────────────────────────────────── */

.why{ padding-block: clamp(64px,10vh,130px); border-top:1px solid var(--line); }
.why .kick{
  font-family:var(--sans); font-size:12px; font-weight:600;
  letter-spacing:.2em; text-transform:uppercase; color: var(--accent);
  margin-bottom: clamp(24px,4vh,40px); display:block;
}
.why .statement{
  font-weight:900; font-size: clamp(1.7rem,4vw,3rem); line-height:1.35;
  letter-spacing:-.005em; margin:0; max-width: 24ch;
}
.why .statement .soft{ font-weight:400; color: var(--ink-2); }
.why .statement .acc{ color: var(--accent); }
.why .cols{
  display:grid; grid-template-columns:1fr; gap: clamp(24px,4vw,64px);
  margin-top: clamp(40px,6vh,72px);
}
@media(min-width: 820px){ .why .cols{ grid-template-columns: 1fr 1fr; max-width: 78ch; margin-left:auto; } }
.why .cols p{ font-size:17px; line-height:1.85; color: var(--ink-2); margin:0; }
.why .cols p b{ color: var(--ink); font-weight:600; }


/* ── BOYA — Course system (timeline rail) ────────────────────────────── */

.courses{ padding-block: clamp(64px,10vh,130px); border-top:1px solid var(--line); }

.rail{ position:relative; margin-left: 6px; }
.rail::before{
  content:""; position:absolute; left: 11px; top: 30px; bottom: 30px;
  width:2px; background: linear-gradient(var(--line), var(--line));
}
.course{
  position:relative; display:grid; grid-template-columns: 44px 1fr;
  gap: clamp(16px,2.4vw,40px); padding: clamp(28px,4vh,44px) 0;
}
.course + .course{ border-top:1px solid var(--line); }
.course .mk{ position:relative; z-index:1; padding-top: 8px; }
.course .dot{
  width:24px; height:24px; border-radius:50%; background: var(--bg);
  border:2px solid var(--ink-faint);
  display:flex; align-items:center; justify-content:center;
}
.course .dot::after{
  content:""; width:8px; height:8px; border-radius:50%; background: transparent;
}
.course.active .dot{ border-color: var(--accent); }
.course.active .dot::after{ background: var(--accent); animation: pulse 2.4s ease-in-out infinite; }
.course.done .dot{ border-color: var(--ink); }
.course.done .dot::after{ background: var(--ink); }
.course.soon .dot{ border-style: dashed; border-color: var(--ink-faint); opacity:.7; }
@keyframes pulse{ 0%,100%{opacity:1} 50%{opacity:.3} }

.course .cbody{ display:grid; grid-template-columns:1fr; gap: 6px; }
@media(min-width: 860px){
  .course .cbody{ grid-template-columns: 1.5fr 1fr; gap: clamp(20px,3vw,56px); align-items:start; }
}
.course .c-name{
  font-weight:900; font-size: clamp(1.6rem,3.4vw,2.7rem); line-height:1.08;
  letter-spacing:-.005em; margin:0;
  display:flex; align-items:baseline; gap:.5em; flex-wrap:wrap;
  transition: color .3s;
}
.course a.c-name:hover{ color: var(--accent); }
.course .c-name .en{
  font-family:var(--display); font-style:italic; font-weight:400;
  font-size:.42em; color: var(--ink-faint);
}
.course .c-theme{
  font-family:var(--sans); font-size:13px; color: var(--ink-faint);
  letter-spacing:.04em; margin-top: 8px;
}
.course .c-desc{ font-size:16px; color: var(--ink-2); line-height:1.7; margin: 0; }
.course .c-foot{
  display:flex; align-items:center; gap: 16px; margin-top: 16px; flex-wrap:wrap;
}
.course .status{
  font-family:var(--sans); font-size:11.5px; font-weight:600;
  letter-spacing:.06em; padding: 4px 12px; border:1px solid var(--line);
  color: var(--ink-soft);
}
.course.active .status{ color: var(--accent); border-color: color-mix(in oklch, var(--accent) 45%, transparent); }
.course.done .status{ color: var(--ink-2); }
.course .c-link{
  font-family:var(--sans); font-size:14px; font-weight:600;
  color: var(--ink); display:inline-flex; align-items:center; gap:.4em;
  transition: gap .25s, color .25s;
}
.course .c-link:hover{ color: var(--accent); gap:.8em; }
.course.soon .c-link{ color: var(--ink-faint); pointer-events:none; }


/* ── BOYA — Member perks ─────────────────────────────────────────────── */

.perks{ padding-block: clamp(64px,10vh,130px); border-top:1px solid var(--line); }
.perks-grid{
  display:grid; grid-template-columns:1fr; gap: 0;
  margin-top: clamp(30px,5vh,52px);
}
@media(min-width: 760px){ .perks-grid{ grid-template-columns: 1fr 1fr; column-gap: clamp(40px,6vw,90px); } }
.perk{
  display:grid; grid-template-columns: auto 1fr; gap: 18px;
  padding: clamp(20px,3vh,28px) 0; border-top:1px solid var(--line);
  align-items:start;
}
.perk .pk-mk{
  font-family:var(--display); font-style:italic; font-size:18px;
  color: var(--accent); line-height:1.4;
}
.perk h4{
  font-weight:900; font-size: clamp(1.15rem,1.8vw,1.45rem); line-height:1.2;
  margin:0 0 6px;
}
.perk h4 .soon{
  font-family:var(--sans); font-style:normal; font-size:11px; font-weight:600;
  letter-spacing:.08em; color:var(--ink-faint); border:1px solid var(--line);
  padding:2px 8px; margin-left:8px; vertical-align:3px;
}
.perk p{ font-family:var(--sans); font-size:14px; color: var(--ink-soft); line-height:1.65; margin:0; }


/* ── BOYA — Pricing (orange block) ───────────────────────────────────── */

.pricing{ padding-block: clamp(40px,6vh,80px); }
.price-block{
  background: var(--accent); color:#fff;
  padding: clamp(40px,6vw,84px); position:relative; overflow:clip;
}
.price-block .pg{
  position:absolute; right: clamp(-30px,-2vw,0); bottom: clamp(-40px,-4vh,-10px);
  font-family:var(--display); font-style:italic;
  font-size: clamp(140px,30vw,460px); line-height:.7;
  color: rgba(255,255,255,.12); pointer-events:none; user-select:none;
}
.price-block .pb-in{
  position:relative; z-index:1;
  display:grid; grid-template-columns:1fr; gap: clamp(28px,4vw,56px); align-items:end;
}
@media(min-width: 820px){ .price-block .pb-in{ grid-template-columns: 1.3fr 1fr; } }
.price-block .lbl{
  font-family:var(--sans); font-size:12px; font-weight:600;
  letter-spacing:.2em; text-transform:uppercase; color: rgba(255,255,255,.85);
  margin-bottom: 18px;
}
.price-block h2{
  font-weight:900; font-size: clamp(1.8rem,4vw,3rem); line-height:1.12;
  margin:0; color:#fff; max-width: 18ch;
}
.price-block .num{
  font-family: var(--serif); font-weight:900;
  font-size: clamp(3.4rem,8vw,6rem); line-height:.9; letter-spacing:-.01em;
}
.price-block .num small{
  font-family:var(--sans); font-weight:500; font-size:.26em; letter-spacing:.06em;
}
.price-block .pnote{
  font-family:var(--sans); font-size:13.5px; color: rgba(255,255,255,.8);
  line-height:1.6; margin: 14px 0 26px; max-width: 30ch;
}
.price-block .cta-row{
  display:flex; align-items:center; gap: 20px; flex-wrap:wrap;
}
.price-block .byline{
  font-family:var(--display); font-style:italic; font-size:14px;
  color: rgba(255,255,255,.75);
}


/* ── BOYA — Member voices ────────────────────────────────────────────── */

.voices{ padding-block: clamp(64px,10vh,130px); }
.voices .kick{
  font-family:var(--sans); font-size:12px; font-weight:600;
  letter-spacing:.2em; text-transform:uppercase; color: var(--accent);
  margin-bottom: clamp(30px,5vh,52px);
  display:flex; align-items:center; gap:.7em;
}
.voices .kick .en{
  font-family:var(--display); font-style:italic; text-transform:none;
  letter-spacing:.02em; font-size:15px; color:var(--ink-soft);
}
.voice-grid{
  display:grid; grid-template-columns:1fr; gap: clamp(28px,4vw,56px);
}
@media(min-width: 760px){ .voice-grid{ grid-template-columns: 1fr 1fr; } }
.voice{ border-top:2px solid var(--ink); padding-top: 24px; }
.voice blockquote{
  font-weight:900; font-size: clamp(1.5rem,2.8vw,2.2rem); line-height:1.35;
  letter-spacing:-.005em; margin:0;
}
.voice blockquote .acc{ color: var(--accent); }
.voice .v-by{
  font-family:var(--sans); font-size:13px; color: var(--ink-faint);
  letter-spacing:.04em; margin-top: 18px;
}


/* ═══════════════════════════════════════════════════════════════════════
   ARTICLE PAGE — Head
   ═══════════════════════════════════════════════════════════════════════ */

.art-head{ padding-block: clamp(30px,5vh,56px) clamp(34px,5vh,56px); }
.art-head .crumb{
  font-family:var(--sans); font-size:12.5px; letter-spacing:.04em;
  color: var(--ink-faint); margin-bottom: clamp(34px,6vh,64px);
}
.art-head .crumb a:hover{ color: var(--accent); }
.art-head .crumb .sep{ margin:0 .5em; }

.art-head .prop-tag{
  display:inline-flex; align-items:center; gap:.6em;
  font-family:var(--sans); font-size:12.5px; font-weight:600; letter-spacing:.1em;
  color: var(--accent); margin-bottom: clamp(22px,3.5vh,34px);
}
.art-head .prop-tag::before{ content:""; width:22px; height:1.5px; background: var(--accent); }
.art-head .prop-tag:hover{ text-decoration: underline; text-underline-offset:3px; }

.art-head h1{
  font-weight:900; font-size: clamp(2.2rem,5.4vw,4.2rem); line-height:1.1;
  letter-spacing:-.01em; margin:0; text-wrap: balance; max-width: 18ch;
}
.art-head .dek{
  font-size: clamp(1.2rem,2vw,1.6rem); line-height:1.55; color: var(--ink-2);
  font-weight:400; margin: clamp(20px,3vh,30px) 0 0; max-width: 32ch;
}
.art-head .dek .acc{ font-weight:600; }


/* ── ARTICLE — Byline ────────────────────────────────────────────────── */

.byline{
  display:flex; align-items:center; gap: clamp(14px,2vw,26px); flex-wrap:wrap;
  margin-top: clamp(30px,5vh,48px); padding-top: 20px; border-top: 1px solid var(--line);
  font-family:var(--sans); font-size:13.5px; color: var(--ink-soft); letter-spacing:.02em;
}
.byline .who{ color: var(--ink); font-weight:600; }
.byline .who .role{ color: var(--ink-faint); font-weight:400; }
.byline .sep{ width:3px; height:3px; border-radius:50%; background: var(--ink-faint); }
.byline .badge{
  display:inline-flex; align-items:center; gap:.45em; font-size:11px;
  font-weight:600; letter-spacing:.08em; text-transform:uppercase;
  padding: 3px 10px; border:1px solid var(--line);
}
.byline .badge-free{ color: var(--ink-soft); }
.byline .badge-free::before{
  content:""; width:6px; height:6px; border-radius:50%; border:1.5px solid var(--ink-faint);
}
.byline .badge-paid{ color: var(--accent); border-color: color-mix(in oklch, var(--accent) 45%, transparent); }
.byline .ml{ margin-left:auto; }
.byline .share{ color: var(--ink-soft); transition: color .25s; }
.byline .share:hover{ color: var(--accent); }
/* badge visibility by article type */
.byline .badge-paid{ display:none; }
html[data-article="paid"] .byline .badge-free{ display:none; }
html[data-article="paid"] .byline .badge-paid{ display:inline-flex; }

/* feature rule between head & body */
.art-rule{ border:none; border-top:2px solid var(--ink); margin: 0; }


/* ── ARTICLE — Body typography ───────────────────────────────────────── */

.art-body{ padding-block: clamp(40px,6vh,72px) clamp(20px,3vh,32px); }
.art-body p,
.art-body ul,
.art-body ol{
  font-size: clamp(1.08rem, 1.3vw, 1.22rem); line-height: 1.95; color: var(--read);
  margin: 0 0 1.5em; letter-spacing:.004em;
}
.art-body > .read-col > *:first-child{ margin-top:0; }
.art-body strong{ font-weight:700; color: var(--ink); }
.art-body em{
  font-style:normal;
  text-emphasis: filled var(--ink); -webkit-text-emphasis: filled var(--ink);
  text-emphasis-position: under; -webkit-text-emphasis-position: under;
}
.art-body a.inline{ color: var(--accent); border-bottom:1px solid color-mix(in oklch, var(--accent) 35%, transparent); }
.art-body a.inline:hover{ border-bottom-color: var(--accent); }

/* subhead within article */
.art-body h2{
  font-weight:900; font-size: clamp(1.4rem,2.4vw,1.9rem); line-height:1.25;
  letter-spacing:-.005em; margin: 2em 0 .8em;
}

/* blockquote — quiet, left rule */
.art-body blockquote{
  margin: 2.2em 0; padding-left: clamp(18px,2vw,28px);
  border-left: 2px solid var(--accent);
  font-size: clamp(1.15rem,1.5vw,1.34rem); line-height:1.66;
  color: var(--ink); font-weight:500;
}
.art-body blockquote p{ font-size: inherit; line-height: inherit; margin:0 0 .6em; }
.art-body blockquote cite{
  display:block; font-family:var(--sans); font-style:normal; font-size:13px;
  font-weight:500; color: var(--ink-faint); letter-spacing:.04em; margin-top:.5em;
}

/* pull quote */
.art-body .pull{
  margin: 2.4em 0; font-weight:900;
  font-size: clamp(1.6rem,3vw,2.4rem); line-height:1.3;
  letter-spacing:-.005em; color: var(--ink); text-wrap: balance;
}
.art-body .pull .acc{ color: var(--accent); }

/* section divider */
.art-body .divider{
  border:none; text-align:center; margin: 2.6em 0; line-height:1;
}
.art-body .divider::before{
  content:"· · ·"; font-family:var(--display); color: var(--ink-faint);
  letter-spacing:.5em; font-size:18px;
}

/* footnotes */
.art-body sup.fn{
  font-family:var(--sans); font-size:.62em; font-weight:600;
  color: var(--accent); vertical-align: super; padding: 0 .15em;
}
.art-body sup.fn a{ color: inherit; }
.footnotes{ margin-top: 3em; padding-top: 22px; border-top:1px solid var(--line); }
.footnotes ol{ margin:0; padding-left: 1.4em; }
.footnotes li{
  font-family:var(--sans); font-size:13.5px; line-height:1.7;
  color: var(--ink-soft); margin-bottom: 10px;
}
.footnotes li a.back{ color: var(--accent); margin-left:.4em; }


/* ── ARTICLE — Paywall ───────────────────────────────────────────────── */

.seg-locked{ }
.paywall{ display:none; position:relative; }
html[data-article="paid"]:not([data-reader="member"]) .seg-locked{ display:none; }
html[data-article="paid"]:not([data-reader="member"]) .paywall{ display:block; }
html[data-article="paid"]:not([data-reader="member"]) .fade-tail{
  position:relative; max-height: 9em; overflow:hidden;
  -webkit-mask-image: linear-gradient(180deg, #000 8%, transparent 100%);
  mask-image: linear-gradient(180deg, #000 8%, transparent 100%);
}
.paywall .pw-card{
  background: var(--ink); color:#fff; padding: clamp(30px,4vw,52px);
  margin-top: clamp(20px,3vh,36px); position:relative; overflow:clip;
}
.paywall .pw-lock{
  display:inline-flex; align-items:center; gap:.5em;
  font-family:var(--sans); font-size:11px; font-weight:600;
  letter-spacing:.16em; text-transform:uppercase; color: var(--accent);
  margin-bottom: 18px;
}
.paywall h3{
  font-weight:900; font-size: clamp(1.5rem,2.6vw,2.1rem); line-height:1.2;
  margin:0 0 12px; color:#fff; text-wrap:balance;
}
.paywall .pw-sub{
  font-size:16px; color: rgba(255,255,255,.78); line-height:1.7;
  margin:0 0 26px; max-width: 42ch;
}
.paywall .pw-row{ display:flex; align-items:center; gap: 18px; flex-wrap:wrap; }
.paywall .pw-price{
  font-family:var(--display); font-style:italic; font-size:18px;
  color: rgba(255,255,255,.8);
}
.paywall .pw-already{
  font-family:var(--sans); font-size:13px; color: rgba(255,255,255,.6);
  margin-top: 18px;
}
.paywall .pw-already a{ color:#fff; border-bottom:1px solid rgba(255,255,255,.4); }
.paywall .pw-already a:hover{ border-color:#fff; }


/* ── ARTICLE — Footer (series nav, related, conversion CTA) ──────────── */

.art-foot{ padding-block: clamp(30px,5vh,56px) clamp(60px,9vh,110px); }

/* series prev/next */
.series-nav{
  display:grid; grid-template-columns:1fr; gap: 1px;
  background: var(--line); border-block:1px solid var(--line);
  margin-bottom: clamp(40px,6vh,72px);
}
@media(min-width:680px){ .series-nav{ grid-template-columns:1fr 1fr; } }
.series-nav a{ background: var(--bg); padding: clamp(20px,3vh,30px) clamp(18px,2vw,30px); transition: background .25s; }
.series-nav a:hover{ background: var(--paper); }
.series-nav .sn-dir{
  font-family:var(--sans); font-size:11.5px; font-weight:600;
  letter-spacing:.14em; text-transform:uppercase; color: var(--ink-faint);
  margin-bottom:8px; display:flex; align-items:center; gap:.5em;
}
.series-nav a.next{ text-align:right; }
.series-nav a.next .sn-dir{ justify-content:flex-end; }
.series-nav .sn-t{
  font-weight:700; font-size: clamp(1.05rem,1.6vw,1.3rem); line-height:1.3;
  transition: color .25s;
}
.series-nav a:hover .sn-t{ color: var(--accent); }

/* related articles */
.related .rl-h{
  font-family:var(--sans); font-size:12px; font-weight:600;
  letter-spacing:.2em; text-transform:uppercase; color: var(--accent);
  margin-bottom: clamp(20px,3vh,30px);
  display:flex; align-items:center; gap:.7em;
}
.related .rl-h .en{
  font-family:var(--display); font-style:italic; text-transform:none;
  letter-spacing:.02em; color: var(--ink-soft);
}
.rl-grid{
  display:grid; grid-template-columns:1fr; gap: 1px;
  background: var(--line); border-top:1px solid var(--line); border-bottom:1px solid var(--line);
}
@media(min-width:760px){ .rl-grid{ grid-template-columns: repeat(3,1fr); } }
.rl-item{
  background: var(--bg); padding: clamp(22px,3vh,32px) clamp(4px,1vw,18px);
  transition: background .25s, padding-left .25s;
}
.rl-item:hover{ background: var(--paper); }
.rl-item .rl-no{
  font-family:var(--display); font-style:italic; font-size:13px;
  color: var(--ink-faint); margin-bottom: 12px;
}
.rl-item .rl-t{
  font-weight:700; font-size: clamp(1.1rem,1.6vw,1.35rem); line-height:1.32;
  transition: color .25s;
}
.rl-item:hover .rl-t{ color: var(--accent); }
.rl-item .rl-d{
  font-family:var(--sans); font-size:13px; color: var(--ink-soft);
  line-height:1.6; margin-top: 10px;
}

/* conversion CTA (varies by reader state) */
.cta-convert{
  display:none; margin-top: clamp(44px,7vh,80px);
  border:1px solid var(--line); padding: clamp(28px,4vw,52px); background: var(--paper);
}
.cta-convert .cc-k{
  font-family:var(--sans); font-size:11.5px; font-weight:600;
  letter-spacing:.16em; text-transform:uppercase; color: var(--accent);
  margin-bottom: 16px;
}
.cta-convert h3{
  font-weight:900; font-size: clamp(1.5rem,2.8vw,2.2rem); line-height:1.18;
  margin:0 0 12px; text-wrap:balance; max-width: 20ch;
}
.cta-convert p{
  font-family:var(--sans); font-size:14.5px; color: var(--ink-soft);
  line-height:1.7; margin:0 0 24px; max-width: 40ch;
}
.cta-convert .ccform{ display:flex; gap:10px; flex-wrap:wrap; align-items:center; }
.cta-convert input{
  flex:1; min-width: 220px; font-family:var(--sans); font-size:15px;
  padding: 14px 16px; border:1px solid var(--line); background: var(--bg);
  color: var(--ink); border-radius:0;
}
.cta-convert input::placeholder{ color: var(--ink-faint); }
.cta-convert input:focus{ outline:none; border-color: var(--ink); }
/* reader-driven visibility */
html[data-reader="guest"] .cta-guest{ display:block; }
html[data-reader="free"] .cta-free{ display:block; }
html[data-article="paid"]:not([data-reader="member"]) .cta-convert{ display:none; }

.end-mark{
  display:none; text-align:center; margin-top: clamp(44px,7vh,80px);
  font-family:var(--display); font-style:italic; font-size: 22px; color: var(--ink-faint);
}
html[data-reader="member"] .end-mark{ display:block; }
html[data-article="paid"]:not([data-reader="member"]) .end-mark{ display:none; }


/* ═══════════════════════════════════════════════════════════════════════
   DEEP PAGE — Services / offerings
   ═══════════════════════════════════════════════════════════════════════ */

/* page header (shared by deep + about) */
.phead{ padding-block: clamp(18px,3vh,30px) clamp(50px,8vh,96px); }
.phead .masthead{
  display:flex; align-items:flex-end; justify-content:space-between; gap:24px;
  padding-bottom: 18px; border-bottom: 2px solid var(--ink); flex-wrap:wrap;
}
.phead .mh-title{
  font-family: var(--serif); font-weight:900;
  font-size: clamp(3rem,9vw,7rem); letter-spacing:.04em; line-height:.9;
}
.phead .mh-meta{
  font-family: var(--display); font-style:italic; font-size:15px;
  color: var(--ink-soft); text-align:right; line-height:1.5;
}
.phead .mh-meta b{
  font-style:normal; font-family:var(--sans); font-weight:500;
  letter-spacing:.12em; text-transform:uppercase; font-size:11px;
  display:block; color:var(--ink-2); margin-bottom:4px;
}
.phead .punch{ padding-top: clamp(34px,6vh,68px); }
.phead .punch p{
  font-weight:400; font-size: clamp(1.4rem,3vw,2.4rem); line-height:1.4;
  letter-spacing:-.005em; color: var(--ink); margin:0; max-width: 26ch;
}
.phead .punch p .soft{ color: var(--ink-2); }
.phead .punch p .acc{ font-weight:600; }

.services{ padding-block: clamp(40px,6vh,72px) clamp(20px,3vh,30px); }
.svc{ border-top:1px solid var(--line); }
.svc:last-of-type{ border-bottom:1px solid var(--line); }
.svc-in{
  display:grid; grid-template-columns:1fr; gap: clamp(16px,3vw,56px);
  padding: clamp(30px,4.5vh,52px) 0; align-items:start;
}
@media(min-width: 820px){ .svc-in{ grid-template-columns: 1fr 1.15fr; } }
.svc .s-cat{
  font-family:var(--sans); font-size:12px; font-weight:600;
  letter-spacing:.14em; text-transform:uppercase; color: var(--ink-faint);
  margin-bottom: 12px;
}
.svc .s-name{
  font-weight:900; font-size: clamp(1.6rem,3.4vw,2.7rem); line-height:1.1;
  letter-spacing:-.005em; margin:0;
}
.svc .s-desc{
  font-size:16.5px; line-height:1.75; color: var(--ink-2);
  margin:0 0 22px; max-width: 44ch;
}
.svc .s-link{
  display:inline-flex; align-items:center; gap:.5em;
  font-family:var(--sans); font-size:14.5px; font-weight:600;
  color: var(--ink); transition: gap .25s, color .25s;
}
.svc .s-link .ext{ font-size:13px; color: var(--ink-faint); transition: color .25s; }
.svc .s-link:hover{ color: var(--accent); gap:.8em; }
.svc .s-link:hover .ext{ color: var(--accent); }
.svc .s-meta{
  font-family:var(--sans); font-size:13px; color: var(--ink-faint);
  margin-top:14px; line-height:1.6;
}

/* waitlist note */
.waitlist{
  margin-top: clamp(40px,6vh,70px);
  display:flex; align-items:flex-start; justify-content:space-between;
  gap:24px; flex-wrap:wrap;
  padding: clamp(26px,3.5vh,40px); background: var(--paper); border:1px solid var(--line);
}
.waitlist .w-l h4{ font-weight:900; font-size: clamp(1.2rem,2vw,1.5rem); margin:0 0 8px; }
.waitlist .w-l p{
  font-family:var(--sans); font-size:14px; color: var(--ink-soft);
  line-height:1.65; margin:0; max-width: 46ch;
}
.waitlist .w-r{ flex-shrink:0; }

/* deep page footer section */
.deep-foot{ padding-block: clamp(56px,9vh,110px); border-top:1px solid var(--line); }
.deep-foot .df-grid{
  display:grid; grid-template-columns:1fr; gap: clamp(30px,5vw,72px);
}
@media(min-width: 820px){ .deep-foot .df-grid{ grid-template-columns: 1.3fr 1fr; align-items:start; } }
.deep-foot .bio{
  font-size:17px; line-height:1.85; color: var(--ink-2); margin:0; max-width: 44ch;
}
.deep-foot .bio b{ color: var(--ink); font-weight:600; }
.deep-foot .bio a.more{
  color: var(--accent); border-bottom:1px solid color-mix(in oklch,var(--accent) 35%, transparent);
}
.deep-foot .first-read{
  border-left:2px solid var(--line); padding-left: clamp(20px,2.5vw,34px);
}
.deep-foot .first-read .fr-k{
  font-family:var(--sans); font-size:12px; font-weight:600;
  letter-spacing:.14em; text-transform:uppercase; color: var(--ink-faint);
  margin-bottom:12px;
}
.deep-foot .first-read p{
  font-size:16px; color: var(--ink-2); line-height:1.7;
  margin:0 0 16px; max-width: 32ch;
}
.deep-foot .first-read a.go{
  font-family:var(--sans); font-size:14.5px; font-weight:600;
  color: var(--ink); display:inline-flex; align-items:center; gap:.5em;
  transition: gap .25s, color .25s;
}
.deep-foot .first-read a.go:hover{ color: var(--accent); gap:.8em; }


/* ═══════════════════════════════════════════════════════════════════════
   ABOUT PAGE
   ═══════════════════════════════════════════════════════════════════════ */

/* origin intro (extends .phead) */
.phead .origin{
  padding-top: clamp(34px,6vh,68px);
  display:grid; grid-template-columns:1fr; gap: clamp(20px,4vw,60px);
}
@media(min-width: 900px){ .phead .origin{ grid-template-columns: 1.5fr 1fr; align-items:end; } }
.phead .origin .o-big{
  font-weight:900; font-size: clamp(1.7rem,3.6vw,2.8rem); line-height:1.32;
  letter-spacing:-.005em; margin:0; max-width: 22ch;
}
.phead .origin .o-big .soft{ color: var(--ink-2); font-weight:400; }
.phead .origin .o-side{
  font-family:var(--sans); font-size:14px; color: var(--ink-soft);
  line-height:1.8; max-width: 32ch;
}

/* who section (portrait + bio) */
.who{ padding-block: clamp(56px,9vh,120px); border-top:1px solid var(--line); }
.who-grid{
  display:grid; grid-template-columns:1fr; gap: clamp(36px,5vw,80px);
}
@media(min-width: 860px){ .who-grid{ grid-template-columns: 360px 1fr; align-items:start; } }
.who .portrait image-slot{
  width:100%; height: clamp(380px, 50vh, 480px); display:block;
}
.who .portrait .cap{
  font-family:var(--sans); font-size:12.5px; color: var(--ink-faint);
  letter-spacing:.04em; margin-top: 14px; line-height:1.6;
}
.who .kick{
  font-family:var(--sans); font-size:12px; font-weight:600;
  letter-spacing:.2em; text-transform:uppercase; color: var(--accent);
  margin-bottom: 18px; display:block;
}
.who h2{
  font-weight:900; font-size: clamp(1.9rem,4vw,3rem); line-height:1.08;
  letter-spacing:-.01em; margin:0 0 8px;
}
.who .roles{
  font-family:var(--display); font-style:italic;
  font-size: clamp(1.05rem,1.6vw,1.3rem); color: var(--ink-soft);
  margin-bottom: clamp(24px,4vh,38px);
}
.who .who-body p{
  font-size:17px; line-height:1.85; color: var(--read);
  margin:0 0 1.3em; max-width: 52ch;
}
.who .who-body p b{ font-weight:600; color: var(--ink); }
.who .who-body em{
  font-style:normal;
  text-emphasis: filled var(--ink); -webkit-text-emphasis: filled var(--ink);
  text-emphasis-position: under; -webkit-text-emphasis-position: under;
}

/* credentials grid */
.creds{
  margin-top: clamp(30px,5vh,46px); border-top:1px solid var(--line);
  padding-top: clamp(24px,4vh,34px);
  display:grid; grid-template-columns:1fr; gap: 0;
}
@media(min-width:640px){ .creds{ grid-template-columns: 1fr 1fr; column-gap: clamp(30px,4vw,64px); } }
.cred{
  display:grid; grid-template-columns: auto 1fr; gap:14px;
  padding: 13px 0; border-bottom:1px solid var(--line-2); align-items:baseline;
}
.cred .c-k{ font-family:var(--display); font-style:italic; font-size:14px; color: var(--accent); }
.cred .c-t{ font-size:15.5px; color: var(--ink); }
.cred .c-t .c-d{
  display:block; font-family:var(--sans); font-size:12.5px;
  color: var(--ink-faint); margin-top:3px; line-height:1.5;
}

/* research focus */
.research{ padding-block: clamp(56px,9vh,120px); border-top:1px solid var(--line); }
.research .r-lead{
  display:flex; align-items:flex-end; justify-content:space-between;
  gap:24px; flex-wrap:wrap; margin-bottom: clamp(30px,5vh,52px);
}
.research .r-lead .kick{
  font-family:var(--sans); font-size:12px; font-weight:600;
  letter-spacing:.2em; text-transform:uppercase; color: var(--accent);
  display:flex; align-items:center; gap:.7em;
}
.research .r-lead .kick .en{
  font-family:var(--display); font-style:italic; text-transform:none;
  letter-spacing:.02em; font-size:15px; color:var(--ink-soft);
}
.research .r-lead h2{
  font-weight:900; font-size: clamp(1.9rem,4.4vw,3.2rem); line-height:1.05;
  letter-spacing:-.01em; margin:.4em 0 0;
}
.research .r-grid{
  display:grid; grid-template-columns:1fr; gap: clamp(24px,3vw,48px);
}
@media(min-width: 820px){ .research .r-grid{ grid-template-columns: 1fr 1fr; } }
.research .r-grid .r-item{ border-top:2px solid var(--ink); padding-top: 22px; }
.research .r-grid .r-item h3{
  font-weight:900; font-size: clamp(1.3rem,2.2vw,1.8rem); line-height:1.2;
  margin:0 0 12px;
}
.research .r-grid .r-item p{
  font-family:var(--sans); font-size:14.5px; color: var(--ink-soft);
  line-height:1.75; margin:0; max-width: 40ch;
}

/* story (what is hekukaixin) */
.story{ padding-block: clamp(56px,9vh,120px); border-top:1px solid var(--line); }
.story-grid{
  display:grid; grid-template-columns:1fr; gap: clamp(30px,5vw,80px);
}
@media(min-width: 860px){ .story-grid{ grid-template-columns: 1fr 1.3fr; align-items:start; } }
.story .s-head .kick{
  font-family:var(--sans); font-size:12px; font-weight:600;
  letter-spacing:.2em; text-transform:uppercase; color: var(--accent);
  margin-bottom: 18px; display:block;
}
.story .s-head h2{
  font-weight:900; font-size: clamp(2rem,4.6vw,3.4rem); line-height:1.05;
  letter-spacing:-.01em; margin:0;
}
.story .s-head .est{
  font-family:var(--display); font-style:italic; font-size: 18px;
  color: var(--ink-faint); margin-top: 18px;
}
.story .s-body p{
  font-size:17px; line-height:1.85; color: var(--read);
  margin:0 0 1.3em; max-width: 50ch;
}
.story .s-body p b{ font-weight:600; color: var(--ink); }
.story .s-body .pull{
  font-weight:900; font-size: clamp(1.4rem,2.4vw,1.9rem); line-height:1.35;
  color: var(--ink); margin: 1.4em 0; max-width: 24ch;
}
.story .s-body .pull .acc{ color: var(--accent); }

/* contact */
.contact{ padding-block: clamp(56px,9vh,110px); border-top:1px solid var(--line); }
.contact-grid{
  display:flex; align-items:flex-end; justify-content:space-between;
  gap: clamp(24px,4vw,60px); flex-wrap:wrap;
}
.contact .c-l .kick{
  font-family:var(--sans); font-size:12px; font-weight:600;
  letter-spacing:.2em; text-transform:uppercase; color: var(--accent);
  margin-bottom: 18px; display:block;
}
.contact .c-l h2{
  font-weight:900; font-size: clamp(1.8rem,4vw,2.8rem); line-height:1.1;
  margin:0; max-width:18ch;
}
.contact .c-r{ display:grid; gap: 14px; }
.contact .c-row{ display:flex; gap: 16px; align-items:baseline; }
.contact .c-row .lbl{
  font-family:var(--sans); font-size:12px; font-weight:600;
  letter-spacing:.1em; text-transform:uppercase; color: var(--ink-faint);
  width: 6em; flex-shrink:0;
}
.contact .c-row a, .contact .c-row span{ font-size:18px; color: var(--ink); }
.contact .c-row a:hover{ color: var(--accent); }


/* ═══════════════════════════════════════════════════════════════════════
   FOOTER
   ═══════════════════════════════════════════════════════════════════════ */

.foot{ padding: clamp(60px,9vh,120px) 0 44px; border-top:1px solid var(--ink); }
.foot .f-mark{
  font-family:var(--serif); font-weight:900;
  font-size: clamp(2rem,4vw,3rem); line-height:1; letter-spacing:.1em;
}
.foot .f-mark b{ color: var(--accent); }
.foot .f-cols{
  display:grid; grid-template-columns:1fr; gap: clamp(28px,4vw,56px);
  margin-top: clamp(34px,5vh,60px);
}
@media(min-width:760px){ .foot .f-cols{ grid-template-columns: 1.4fr 1fr 1fr; } }
.foot .f-line{ font-size:17px; color:var(--ink-2); line-height:1.7; max-width:30ch; }
.foot .f-col h5{
  font-family:var(--sans); font-size:12px; font-weight:600;
  letter-spacing:.16em; text-transform:uppercase; color:var(--ink-faint); margin:0 0 14px;
}
.foot .f-col a{
  display:block; font-family:var(--sans); font-size:15px;
  color:var(--ink-2); padding:7px 0; transition: color .25s;
}
.foot .f-col a:hover{ color:var(--accent); }
.foot .f-bottom{
  display:flex; align-items:center; justify-content:space-between;
  margin-top:clamp(44px,7vh,80px); padding-top:22px; border-top:1px solid var(--line);
  gap:16px; flex-wrap:wrap;
}
.foot .f-bottom .c{
  font-family:var(--sans); font-size:12.5px; color:var(--ink-faint); letter-spacing:.03em;
}
.foot .f-bottom .en{
  font-family:var(--display); font-style:italic; font-size:16px; color:var(--ink-soft);
}
.foot .f-bottom .en:hover{ color:var(--accent); }
/* article page uses a simplified footer */
.foot .f-bottom .lk{ display:flex; gap: 22px; }
.foot .f-bottom a{
  font-family:var(--sans); font-size:13px; color:var(--ink-2);
}
.foot .f-bottom a:hover{ color: var(--accent); }