/* ───────────────────────────────────────────────────────────────
   何苦开心 Why Be Happy — English side (the other face)
   Same visual system; font gravity flipped: Bodoni Moda leads,
   Noto Serif SC recedes to accent/brand marks
   ─────────────────────────────────────────────────────────────── */


/* ── EN-PAGE BODY OVERRIDE ─────────────────────────────────────
   The English side uses Bodoni Moda as body font instead of
   Noto Serif SC. This override is scoped to .en-page (body class).
   ─────────────────────────────────────────────────────────────── */

.en-page{
  font-family: var(--display); font-weight:400; line-height:1.65;
}


/* ── NAV (English tweaks) ──────────────────────────────────────
   English nav uses .nav-mid instead of .nav-links, and the brand
   .en class instead of .enmark. Structural styles live here;
   shared .nav/.brand/.lang base comes from style.css.
   ─────────────────────────────────────────────────────────────── */

.en-page .nav{ align-items: center; }

.en-page .brand .en, .en-page .brand .enmark{
  font-family: var(--display); font-style:italic; font-weight:500;
  font-size:17px; color: var(--ink-2); letter-spacing:.01em; white-space:nowrap;
}
@media(max-width:640px){
  .en-page .brand .zh{ display:none; }
  .en-page .brand .en, .en-page .brand .enmark{ display:inline; }
}

.nav-mid{
  display:flex; align-items:baseline; gap: clamp(14px,2vw,32px); margin-left:auto;
}
.nav-mid a{
  font-family: var(--sans); font-size:14px; font-weight:500;
  letter-spacing:.05em; color: var(--ink-2); transition: color .25s; position:relative;
}
.nav-mid a:hover{ color: var(--accent); }
.nav-mid a.active{ color: var(--ink); }
.nav-mid a.active::after{
  content:""; position:absolute; left:0; right:0; bottom:-5px;
  height:2px; background: var(--accent);
}
@media(max-width:780px){ .nav-mid a:nth-child(n+4){ display:none; } }
@media(max-width:540px){ .nav-mid a:nth-child(n+3){ display:none; } .nav-mid{ gap:12px; } }


/* ── LANG TOGGLE ───────────────────────────────────────────────
   Shared between Chinese and English sides. Duplicated here so
   the standalone English template has it even without style.css
   providing it (style.css may add its own copy for the Chinese nav).
   ─────────────────────────────────────────────────────────────── */

.lang{
  display:inline-flex; border:1px solid var(--line); flex-shrink:0;
  margin-left: clamp(12px,2vw,28px);
}
.lang a{
  font-family: var(--sans); font-size:12px; font-weight:600;
  letter-spacing:.06em; padding: 5px 11px; color: var(--ink-soft);
  transition: background .2s, color .2s;
}
.lang a + a{ border-left:1px solid var(--line); }
.lang a.on{ background: var(--ink); color:#fff; }
.lang a:not(.on):hover{ color: var(--accent); }


/* ════════════ HERO — magazine cover (ritual entry) ════════════ */

.ehero{ padding-block: clamp(24px,4vh,46px) clamp(70px,13vh,170px); }

.e-masthead{
  display:flex; align-items:flex-end; justify-content:space-between;
  gap:24px; flex-wrap:wrap; padding-bottom:14px; border-bottom:2px solid var(--ink);
}
.e-masthead .mh-l{
  font-family:var(--display); font-style:italic;
  font-size:clamp(15px,1.6vw,19px); color:var(--ink-2);
}
.e-masthead .mh-r{
  font-family:var(--sans); font-size:12px; letter-spacing:.04em;
  color:var(--ink-soft); text-align:right;
}
.e-masthead .mh-r b{
  display:block; font-weight:600; letter-spacing:.12em;
  text-transform:uppercase; font-size:11px; color:var(--ink-2); margin-bottom:4px;
}

.e-cover{
  display:grid; grid-template-columns:1fr;
  gap:clamp(28px,4vw,72px); padding-top:clamp(30px,6vh,68px);
}
@media(min-width:940px){
  .e-cover{ grid-template-columns:1.45fr 1fr; align-items:end; }
}

.cov-title .cov-lbl{
  font-family:var(--sans); font-size:12px; font-weight:600;
  letter-spacing:.2em; text-transform:uppercase; color:var(--accent);
  display:block; margin-bottom:clamp(14px,2.5vh,26px);
}
.cov-title h1{
  font-family:var(--display); font-weight:500; font-style:italic;
  font-size:clamp(3.4rem,13vw,12rem); line-height:.88;
  letter-spacing:-.02em; margin:0; text-wrap:balance;
}
.cov-title h1 .reg{ font-style:normal; font-weight:600; }
.cov-title h1 .acc{ color:var(--accent); }

.cov-line .lead{
  font-family:var(--display); font-weight:400;
  font-size:clamp(1.25rem,2vw,1.75rem); line-height:1.42;
  color:var(--ink); margin:0 0 18px; max-width:26ch;
}
.cov-line .lead .acc{ font-style:italic; }
.cov-line .note{
  font-family:var(--sans); font-size:14px; line-height:1.8;
  color:var(--ink-2); margin:0 0 22px; max-width:36ch;
  border-top:1px solid var(--line); padding-top:18px;
}
.cov-line .note em{
  font-style:normal; text-emphasis:filled var(--ink);
  -webkit-text-emphasis:filled var(--ink);
}
.cov-line .cta-row{ display:flex; gap:14px; flex-wrap:wrap; align-items:center; }


/* ════════════ INDEX — the body of work ════════════ */

.index{ padding-block: clamp(40px,6vh,80px) clamp(20px,3vh,40px); }

.en-page .sec-lead h2{
  font-family: var(--display); font-weight:600;
  font-size: clamp(1.8rem,3.4vw,2.8rem); line-height:1.05;
  letter-spacing:-.01em; margin:.3em 0 0;
}

.domains{}
.domain{ border-top:1px solid var(--line); }
.domain:last-of-type{ border-bottom:1px solid var(--line); }
.domain a{
  display:grid; grid-template-columns: 1fr; gap: clamp(10px,2vw,40px);
  padding: clamp(26px,4vh,42px) 0; align-items:baseline;
}
@media(min-width: 820px){ .domain a{ grid-template-columns: auto 1fr auto; } }

.domain .d-no{
  font-family: var(--display); font-style:italic;
  font-size: clamp(20px,2vw,28px); color: var(--ink-faint); min-width: 2.4ch;
}
.domain .d-name{
  font-family: var(--display); font-weight:600;
  font-size: clamp(2rem,4.4vw,3.4rem); line-height:1;
  letter-spacing:-.01em; transition: color .3s;
}
.domain a:hover .d-name{ color: var(--accent); }
.domain .d-desc{
  font-family:var(--sans); font-size:15px; color: var(--ink-2);
  line-height:1.65; margin-top: .8em; max-width: 50ch;
}
.domain .d-desc .tags{
  display:block; margin-top:.5em; color: var(--ink-faint);
  font-size:12.5px; letter-spacing:.03em;
}
.domain .d-go{
  font-family:var(--sans); font-weight:600; font-size:14px; color: var(--ink);
  display:inline-flex; align-items:center; gap:.4em;
  opacity:.4; transition: opacity .3s, transform .3s; white-space:nowrap;
}
.domain a:hover .d-go{ opacity:1; transform: translateX(4px); }

/* one orange domain (Research) — the punctual rupture, restrained */
.domain.feature a{
  background: var(--accent); color:#fff;
  padding-inline: var(--gut); margin-inline: calc(-1 * var(--gut));
}
.domain.feature .d-no{ color: rgba(255,255,255,.6); }
.domain.feature .d-name{ color:#fff; }
.domain.feature a:hover .d-name{ color:#fff; }
.domain.feature .d-desc{ color: rgba(255,255,255,.9); }
.domain.feature .d-desc .tags{ color: rgba(255,255,255,.7); }
.domain.feature .d-go{ color:#fff; opacity:.85; }
.domain.feature{ border:none; }
@media(min-width:820px){ .domain.feature a{ grid-template-columns: auto 1fr auto; } }

/* stagger + scale (standing on a quiet base) */
.domain.big .d-name{ font-size: clamp(2.7rem,8vw,6rem); letter-spacing:-.02em; }
.domain.sm .d-name{ font-size: clamp(1.7rem,3.4vw,2.6rem); }
@media(min-width:820px){
  .domain.stag2 a{ padding-left: clamp(0px,8vw,160px); }
  .domain.stag3 a{ padding-left: clamp(0px,16vw,320px); }
}


/* ════════════ SELECTED — compressed quiet beat ════════════ */

.selected{ padding-block: clamp(34px,5vh,60px) clamp(40px,6vh,80px); }
.sel-grid{
  display:grid; grid-template-columns:1fr; gap: clamp(24px,3vw,40px);
}
@media(min-width: 920px){
  .sel-grid{ grid-template-columns: 1.5fr 1fr; align-items:start; }
}

.sel-feature .sf-tags{
  display:flex; gap:10px; align-items:center; margin-bottom: 18px; flex-wrap:wrap;
}
.sel-feature .sf-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);
  padding:3px 11px;
}
.sel-feature .sf-tags .t.hot{
  color:var(--accent);
  border-color: color-mix(in oklch,var(--accent) 40%, transparent);
}
.sel-feature h3{
  font-family: var(--display); font-weight:600;
  font-size: clamp(1.9rem,4vw,3.2rem); line-height:1.08;
  letter-spacing:-.01em; margin:0; transition: color .3s;
}
.sel-feature:hover h3{ color: var(--accent); }
.sel-feature .dek{
  font-family:var(--sans); font-size:16px; color: var(--ink-2);
  line-height:1.65; margin: 20px 0 0; max-width: 42ch;
}
.sel-feature .by{
  font-family:var(--sans); font-size:13px; color:var(--ink-faint);
  letter-spacing:.04em; margin-top:20px;
}

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


/* ════════════ dark full-bleed pull-quote — the rupture ════════════ */

.equote{
  background: var(--ink); color:#F0F1F2;
  padding-block: clamp(84px,18vh,210px); border:none;
  position:relative; overflow:clip;
}
.equote .q-mark{
  position:absolute; left:clamp(8px,3vw,64px); top:clamp(8px,4vh,46px);
  font-family:var(--display); font-style:italic;
  font-size:clamp(120px,24vw,360px); color:rgba(240,241,242,.06);
  line-height:.8; pointer-events:none; user-select:none;
}
.equote blockquote{
  position:relative; z-index:1; margin:0;
  font-family: var(--display); font-weight:500;
  font-size: clamp(2.1rem,5.6vw,5rem); line-height:1.16;
  letter-spacing:-.012em; max-width: 21ch; text-wrap:balance;
}
.equote blockquote .acc{ font-style:italic; color: var(--accent); }
.equote .q-cite{
  position:relative; z-index:1; font-family:var(--sans); font-size:13px;
  font-weight:500; letter-spacing:.14em; text-transform:uppercase;
  color: rgba(240,241,242,.55); margin-top: clamp(28px,5vh,46px);
  display:flex; align-items:center; gap:.7em;
}
.equote .q-cite .dot{ width:6px;height:6px;border-radius:50%;background:var(--accent); }
.equote .q-en{
  position:absolute; right:clamp(10px,3vw,64px); bottom:clamp(24px,5vh,56px);
  writing-mode:vertical-rl; font-family:var(--display); font-style:italic;
  font-size:15px; color:rgba(240,241,242,.4);
}
@media(max-width:720px){ .equote .q-en{ display:none; } }


/* ── FOOTER (English tweaks) ───────────────────────────────────
   The footer structure is shared with style.css. These overrides
   handle the English-side brand mark and bottom-bar layout.
   ─────────────────────────────────────────────────────────────── */

.en-page .foot .f-mark{
  font-family:var(--display); font-style:italic; font-weight:500;
  font-size: clamp(2rem,4.4vw,3.4rem); line-height:1; letter-spacing:-.01em;
}
.en-page .foot .f-mark .zh{
  font-family:var(--serif); font-style:normal; font-weight:900;
  letter-spacing:.08em; font-size:.7em;
}
.en-page .foot .f-mark .zh b{ color: var(--accent); }

.en-page .foot .f-line{
  font-family:var(--sans); font-size:15px; color:var(--ink-2);
  line-height:1.7; max-width:32ch;
}

.en-page .foot .f-bottom .zh{
  font-family:var(--serif); font-size:14px; color:var(--ink-soft);
}
.en-page .foot .f-bottom .zh:hover{ color:var(--accent); }


/* ── EN EXPERIENCE PAGE — Bodoni display overrides ────────────
   Flip headings to Bodoni Moda display weight on the English
   Experience page (phead, punch, works, tail).
   ─────────────────────────────────────────────────────────────── */

.en-page .phead .mh-title{
  font-family:var(--display); font-style:italic; font-weight:500;
  letter-spacing:-.01em;
}
.en-page .punch h1{
  font-family:var(--display); font-weight:600; font-style:normal;
  letter-spacing:-.01em; line-height:1.2;
}
.en-page .punch h1 .soft{ font-style:italic; font-weight:400; }
.en-page .w-title{
  font-family:var(--display); font-weight:600; letter-spacing:-.01em;
}
.en-page .w-title .en{
  font-family:var(--serif); font-style:normal; font-weight:500;
  font-size:.42em; color:var(--ink-faint); letter-spacing:.06em;
}
.en-page .work.feature .w-title .en{ color:rgba(255,255,255,.78); }
.en-page .exfoot .ef-l h2{
  font-family:var(--display); font-weight:600; letter-spacing:-.01em;
}


/* ════════════ EN RESEARCH PAGE ════════════════════════════════
   Quiet, weighted, no dark sections or orange bursts.
   Unique colour is awards orange (.accent).
   ═════════════════════════════════════════════════════════════ */

/* ── 1 · PAGE HEAD ──────────────────────────────────────────── */
.rhead{ padding-block:clamp(48px,11vh,150px) clamp(50px,9vh,120px); }
.rhead .lbl{ font-family:var(--sans); font-size:12px; font-weight:600; letter-spacing:.2em; text-transform:uppercase; color:var(--accent); display:block; margin-bottom:clamp(22px,4vh,40px); }
.rhead h1{ font-family:var(--display); font-weight:600; font-size:clamp(3rem,8vw,6.5rem); line-height:.95; letter-spacing:-.02em; margin:0; }
.rhead .q{ font-family:var(--display); font-style:italic; font-weight:400; font-size:clamp(1.3rem,2.4vw,2.1rem); line-height:1.45; color:var(--ink-2); margin:clamp(30px,5vh,56px) 0 0; max-width:26ch; }

/* ── 2 · THREE FOUNDATIONS ──────────────────────────────────── */
.foundations{ padding-block:clamp(20px,3vh,40px) clamp(56px,9vh,120px); }
.f-lead{ font-family:var(--sans); font-size:12px; font-weight:600; letter-spacing:.2em; text-transform:uppercase; color:var(--ink-faint); padding-bottom:clamp(20px,3vh,30px); border-bottom:2px solid var(--ink); display:flex; justify-content:space-between; gap:16px; flex-wrap:wrap; }
.f-lead .en{ font-family:var(--display); font-style:italic; text-transform:none; letter-spacing:.01em; font-size:15px; color:var(--ink-soft); }
.foundation{ border-top:1px solid var(--line); padding-block:clamp(36px,5.5vh,64px); display:grid; grid-template-columns:1fr; gap:clamp(18px,3vw,56px); }
.foundation:first-of-type{ border-top:none; }
@media(min-width:880px){
  .foundation{ grid-template-columns:auto 1fr; align-items:baseline; }
  .foundation.f2{ padding-left:clamp(0px,4vw,80px); }
  .foundation.f3{ padding-left:clamp(0px,8vw,160px); }
}
.foundation .f-no{ font-family:var(--display); font-style:italic; font-size:clamp(18px,2vw,26px); color:var(--ink-faint); }
.foundation .f-body{ max-width:64ch; }
.foundation .f-name{ font-family:var(--display); font-weight:600; font-size:clamp(2rem,4.6vw,3.4rem); line-height:1.04; letter-spacing:-.015em; margin:0; }
.foundation.f1 .f-name{ font-size:clamp(2.3rem,5.4vw,4rem); }
.foundation .f-q{ font-family:var(--display); font-style:italic; font-weight:400; font-size:clamp(1.15rem,1.9vw,1.5rem); line-height:1.45; color:var(--ink); margin:clamp(16px,2.5vh,24px) 0 0; max-width:34ch; }
.foundation .f-status{ font-family:var(--sans); font-size:14px; line-height:1.75; color:var(--ink-soft); margin:clamp(26px,4vh,38px) 0 0; max-width:50ch; }
.foundation .f-status b{ color:var(--ink-2); font-weight:600; }
.foundation .f-link{ display:inline-flex; align-items:center; gap:.5em; font-family:var(--sans); font-size:13.5px; font-weight:600; color:var(--ink); margin-top:clamp(20px,3vh,26px); transition:gap .25s,color .25s; }
.foundation .f-link .ar{ color:var(--accent); }
.foundation .f-link:hover{ color:var(--accent); gap:.8em; }

/* ── 3 · ADDITIONAL LINES ──────────────────────────────────── */
.lines{ padding-block:clamp(48px,8vh,100px); border-top:1px solid var(--line); }
.lines .l-lead{ font-family:var(--sans); font-size:12px; font-weight:600; letter-spacing:.2em; text-transform:uppercase; color:var(--ink-faint); margin-bottom:clamp(26px,4vh,40px); display:flex; align-items:center; gap:.7em; }
.lines .l-lead .en{ font-family:var(--display); font-style:italic; text-transform:none; letter-spacing:.01em; font-size:15px; color:var(--ink-soft); }
.line-grid{ display:grid; grid-template-columns:1fr; gap:1px; background:var(--line); border-block:1px solid var(--line); }
@media(min-width:820px){ .line-grid{ grid-template-columns:repeat(3,1fr); } }
.line{ background:var(--bg); padding:clamp(24px,2.5vw,34px) clamp(4px,1vw,16px); transition:background .25s; }
.line:hover{ background:var(--paper); }
.line .ln-name{ font-family:var(--display); font-weight:600; font-size:clamp(1.15rem,1.8vw,1.45rem); line-height:1.2; }
.line .ln-d{ font-family:var(--sans); font-size:13.5px; color:var(--ink-soft); line-height:1.65; margin:12px 0 0; }
.line .ln-go{ font-family:var(--sans); font-size:12.5px; font-weight:600; color:var(--ink-faint); margin-top:16px; display:inline-flex; gap:.4em; transition:color .25s, gap .25s; }
.line:hover .ln-go{ color:var(--accent); gap:.6em; }

/* ── 3.5 · PRESENTATIONS ───────────────────────────────────── */
.talks{ padding-block:clamp(48px,8vh,100px); border-top:1px solid var(--line); }
.talks .t-lead{ font-family:var(--sans); font-size:12px; font-weight:600; letter-spacing:.2em; text-transform:uppercase; color:var(--ink-faint); margin-bottom:clamp(22px,3.5vh,34px); display:flex; align-items:center; gap:.7em; }
.talks .t-lead .en{ font-family:var(--display); font-style:italic; text-transform:none; letter-spacing:.01em; font-size:15px; color:var(--ink-soft); }
.talk{ display:grid; grid-template-columns:1fr; gap:3px; padding:clamp(13px,1.8vh,18px) 0; border-top:1px solid var(--line-2); }
@media(min-width:760px){ .talk{ grid-template-columns:1fr auto; gap:clamp(18px,3vw,44px); align-items:baseline; } }
.talk:first-of-type{ border-top:none; }
.talk .tk-title{ font-family:var(--display); font-weight:500; font-size:clamp(1.05rem,1.6vw,1.3rem); line-height:1.32; color:var(--ink); letter-spacing:-.005em; }
.talk .tk-where{ font-family:var(--sans); font-size:13px; color:var(--ink-faint); letter-spacing:.02em; white-space:nowrap; }
.talk .tk-where b{ color:var(--ink-soft); font-weight:500; }

/* ── 4 · PUBLICATIONS ──────────────────────────────────────── */
.pubs{ padding-block:clamp(56px,9vh,120px); border-top:1px solid var(--line); }
.pubs .p-lead{ display:flex; align-items:flex-end; justify-content:space-between; gap:24px; flex-wrap:wrap; margin-bottom:clamp(44px,7vh,76px); }
.pubs .p-lead h2{ font-family:var(--display); font-weight:600; font-size:clamp(1.9rem,4vw,3rem); line-height:1; letter-spacing:-.01em; margin:0; }
.pubs .p-lead .count{ font-family:var(--sans); font-size:13px; color:var(--ink-faint); letter-spacing:.04em; text-align:right; }
.pub{ display:grid; grid-template-columns:1fr; gap:8px; padding:clamp(20px,3vh,30px) 0; border-top:1px solid var(--line-2); }
@media(min-width:820px){ .pub{ grid-template-columns:120px 1fr; gap:clamp(20px,3vw,48px); align-items:baseline; } }
.pub:first-of-type{ border-top:none; }
.pub .p-type{ display:inline-flex; align-items:center; align-self:start; }
.pub .p-type span{ font-family:var(--sans); font-size:10.5px; font-weight:600; letter-spacing:.08em; text-transform:uppercase; padding:4px 10px; background:var(--paper); border:1px solid var(--line); color:var(--ink-soft); white-space:nowrap; }
.pub .p-type span.published{ color:var(--ink-2); }
.pub .p-type span.forthcoming{ color:var(--accent); border-color:color-mix(in oklch,var(--accent) 35%,transparent); }
.pub .p-type span.invited{ color:var(--ink-soft); border-style:dashed; }
.pub .p-type span.translation{ color:var(--ink-soft); }
.pub .p-title{ font-family:var(--display); font-weight:600; font-size:clamp(1.2rem,1.9vw,1.55rem); line-height:1.32; color:var(--ink); letter-spacing:-.005em; }
.pub .p-cite{ font-family:var(--sans); font-size:13.5px; line-height:1.6; color:var(--ink-soft); margin-top:8px; }
.pub .p-cite em{ font-family:var(--display); font-style:italic; font-size:1.05em; color:var(--ink-2); }
.pub .award{ display:inline-flex; align-items:center; gap:.45em; margin-top:11px; font-family:var(--sans); font-size:12.5px; font-weight:600; color:var(--accent); }
.pub .award svg{ width:13px; height:13px; flex-shrink:0; }
.subhead{ grid-column:1/-1; font-family:var(--sans); font-size:11.5px; font-weight:600; letter-spacing:.16em; text-transform:uppercase; color:var(--ink-faint); padding:clamp(26px,4vh,42px) 0 4px; border-top:1px solid var(--line); margin-top:clamp(14px,2vh,22px); }
.subhead:first-child{ border-top:none; margin-top:0; padding-top:0; }
.pub-list > .subhead:first-child{ padding-bottom:8px; }
.more-awards{ margin-top:clamp(30px,4.5vh,46px); padding-top:22px; border-top:1px solid var(--line); display:flex; flex-direction:column; gap:10px; }
.more-awards .ma-row{ display:flex; align-items:baseline; gap:.6em; font-family:var(--sans); font-size:13.5px; color:var(--ink-soft); }
.more-awards .ma-row svg{ width:12px; height:12px; color:var(--accent); flex-shrink:0; transform:translateY(1px); }
.more-awards .ma-row b{ color:var(--ink); font-weight:600; }

/* ── 5 · EXITS ─────────────────────────────────────────────── */
.exits{ padding-block:clamp(44px,7vh,90px); border-top:1px solid var(--line); display:flex; gap:clamp(20px,4vw,60px); flex-wrap:wrap; align-items:baseline; }
.exits .ex{ font-family:var(--sans); font-size:14px; color:var(--ink-2); display:inline-flex; align-items:baseline; gap:.6em; transition:color .25s; }
.exits .ex .k{ font-size:11px; font-weight:600; letter-spacing:.14em; text-transform:uppercase; color:var(--ink-faint); }
.exits .ex:hover{ color:var(--accent); }
.exits .ex .ar{ color:var(--accent); }
.exits .ex.orcid{ font-variant-numeric:tabular-nums; }


/* ════════════ EN WRITING PAGE ═════════════════════════════════
   Magazine-index page for English writing: featured, essays,
   in-print, podcast, exits.
   ═════════════════════════════════════════════════════════════ */

/* ── section lead (writing-page variant: border-bottom) ───── */
.featured .sec-lead,
.essays .sec-lead,
.inprint .sec-lead,
.listen .sec-lead{
  font-family:var(--sans); font-size:12px; font-weight:600;
  letter-spacing:.2em; text-transform:uppercase; color:var(--ink-faint);
  padding-bottom:clamp(18px,3vh,28px); border-bottom:2px solid var(--ink);
  display:flex; justify-content:space-between; gap:16px;
  flex-wrap:wrap; align-items:baseline; margin-bottom:0;
}
.featured .sec-lead .en,
.essays .sec-lead .en,
.inprint .sec-lead .en,
.listen .sec-lead .en{
  font-family:var(--display); font-style:italic; text-transform:none;
  letter-spacing:.01em; font-size:15px; color:var(--ink-soft);
}

/* ── 1 · PAGE HEAD (.whead) ───────────────────────────────── */
.whead{ padding-block:clamp(48px,11vh,150px) clamp(46px,8vh,100px); }
.whead .lbl{ font-family:var(--sans); font-size:12px; font-weight:600; letter-spacing:.2em; text-transform:uppercase; color:var(--accent); display:block; margin-bottom:clamp(22px,4vh,40px); }
.whead h1{ font-family:var(--display); font-weight:600; font-size:clamp(3rem,8vw,6.5rem); line-height:.95; letter-spacing:-.02em; margin:0; }
.whead .q{ font-family:var(--display); font-style:italic; font-weight:400; font-size:clamp(1.3rem,2.4vw,2.05rem); line-height:1.45; color:var(--ink-2); margin:clamp(30px,5vh,52px) 0 0; max-width:32ch; }

/* platform pill */
.plat{ font-family:var(--sans); font-size:10.5px; font-weight:600; letter-spacing:.08em; text-transform:uppercase; padding:4px 10px; border:1px solid var(--line); color:var(--ink-soft); white-space:nowrap; display:inline-block; flex-shrink:0; }
.plat.cps{ color:var(--accent); border-color:color-mix(in oklch,var(--accent) 35%,transparent); }

/* ── 2 · FEATURED ─────────────────────────────────────────── */
.featured{ padding-block:clamp(40px,6vh,80px) clamp(50px,8vh,110px); }
.feat-grid{ display:grid; grid-template-columns:1fr; gap:clamp(34px,5vh,60px); margin-top:clamp(34px,5vh,56px); }
@media(min-width:900px){ .feat-grid{ grid-template-columns:1.5fr 1fr; gap:clamp(40px,5vw,90px); align-items:start; } }

.feat-lead{ display:block; }
.feat-lead .f-top{ display:flex; align-items:center; gap:12px; margin-bottom:clamp(18px,3vh,26px); flex-wrap:wrap; }
.feat-lead .f-kind{ font-family:var(--sans); font-size:11px; font-weight:600; letter-spacing:.16em; text-transform:uppercase; color:var(--ink-faint); }
.feat-lead h2{ font-family:var(--display); font-weight:600; font-size:clamp(2.1rem,4.6vw,3.8rem); line-height:1.05; letter-spacing:-.015em; margin:0; transition:color .25s; }
.feat-lead:hover h2{ color:var(--accent); }
.feat-lead .pull{ font-family:var(--display); font-style:italic; font-weight:400; font-size:clamp(1.25rem,2vw,1.65rem); line-height:1.5; color:var(--ink); margin:clamp(22px,3.5vh,32px) 0 0; max-width:34ch; position:relative; padding-left:clamp(16px,2vw,24px); border-left:2px solid var(--accent); }
.feat-lead .f-go{ display:inline-flex; align-items:center; gap:.5em; font-family:var(--sans); font-size:14px; font-weight:600; color:var(--ink); margin-top:clamp(24px,4vh,32px); transition:gap .25s,color .25s; }
.feat-lead .f-go .ar{ color:var(--accent); }
.feat-lead:hover .f-go{ gap:.8em; color:var(--accent); }

.feat-subs{ display:flex; flex-direction:column; gap:clamp(28px,4vh,40px); }
.feat-sub{ display:block; border-top:1px solid var(--line); padding-top:clamp(24px,3.5vh,34px); }
.feat-subs .feat-sub:first-child{ border-top:none; padding-top:0; }
.feat-sub .fs-top{ display:flex; align-items:center; gap:10px; margin-bottom:14px; }
.feat-sub h3{ font-family:var(--display); font-weight:600; font-size:clamp(1.4rem,2.2vw,1.85rem); line-height:1.14; letter-spacing:-.01em; margin:0; transition:color .25s; }
.feat-sub:hover h3{ color:var(--accent); }
.feat-sub .fs-sum{ font-family:var(--sans); font-size:14.5px; line-height:1.6; color:var(--ink-soft); margin:12px 0 0; max-width:40ch; }
.feat-sub .fs-go{ font-family:var(--sans); font-size:12.5px; font-weight:600; color:var(--ink-faint); margin-top:14px; display:inline-flex; gap:.4em; transition:color .25s,gap .25s; }
.feat-sub:hover .fs-go{ color:var(--accent); gap:.6em; }

/* ── 3 · ESSAYS ───────────────────────────────────────────── */
.essays{ padding-block:clamp(50px,8vh,110px); border-top:1px solid var(--line); }
.essay-list{ margin-top:clamp(20px,3vh,34px); }
.essay{ display:grid; grid-template-columns:1fr; gap:6px; padding:clamp(18px,2.8vh,28px) 0; border-top:1px solid var(--line-2); transition:padding-left .25s; }
.essay:first-of-type{ border-top:none; }
@media(min-width:760px){ .essay{ grid-template-columns:84px 1fr auto; gap:clamp(18px,3vw,44px); align-items:baseline; } }
.essay:hover{ padding-left:8px; }
.essay .e-date{ font-family:var(--display); font-style:italic; font-size:14.5px; color:var(--ink-faint); white-space:nowrap; }
.essay .e-title{ font-family:var(--display); font-weight:600; font-size:clamp(1.2rem,1.9vw,1.55rem); line-height:1.3; color:var(--ink); letter-spacing:-.005em; transition:color .25s; }
.essay:hover .e-title{ color:var(--accent); }
.essay .e-topic{ font-family:var(--sans); font-size:11.5px; font-weight:500; letter-spacing:.06em; text-transform:uppercase; color:var(--ink-faint); white-space:nowrap; }
.essay .e-topic .ar{ opacity:0; margin-left:.5em; color:var(--accent); transition:opacity .25s; }
.essay:hover .e-topic .ar{ opacity:1; }
.essay-all{ margin-top:clamp(28px,4vh,42px); padding-top:24px; border-top:2px solid var(--ink); }
.essay-all a{ 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; }
.essay-all a .ar{ color:var(--accent); }
.essay-all a:hover{ gap:.8em; color:var(--accent); }

/* ── 4 · IN PRINT ─────────────────────────────────────────── */
.inprint{ padding-block:clamp(50px,8vh,110px); border-top:1px solid var(--line); }
.print-list{ margin-top:clamp(20px,3vh,34px); }
.pwork{ display:grid; grid-template-columns:1fr; gap:8px; padding:clamp(20px,3vh,28px) 0; border-top:1px solid var(--line-2); transition:padding-left .25s; }
.pwork:first-of-type{ border-top:none; }
@media(min-width:760px){ .pwork{ grid-template-columns:1fr 230px; gap:clamp(20px,3vw,44px); align-items:baseline; } }
.pwork:hover{ padding-left:8px; }
.pwork .pw-title{ font-family:var(--display); font-weight:600; font-size:clamp(1.2rem,1.9vw,1.5rem); line-height:1.3; color:var(--ink); letter-spacing:-.005em; transition:color .25s; }
.pwork:hover .pw-title{ color:var(--accent); }
.pwork .pw-where{ display:flex; flex-direction:column; gap:4px; }
.pwork .pw-pub{ font-family:var(--display); font-style:italic; font-size:15px; color:var(--ink-2); line-height:1.3; }
.pwork .pw-year{ font-family:var(--sans); font-size:12px; color:var(--ink-faint); letter-spacing:.04em; }

/* ── 5 · LISTEN ───────────────────────────────────────────── */
.listen{ padding-block:clamp(46px,7vh,90px); border-top:1px solid var(--line); }
.listen-row{ display:grid; grid-template-columns:1fr; gap:clamp(20px,3vw,40px); margin-top:clamp(20px,3vh,32px); }
@media(min-width:760px){ .listen-row{ grid-template-columns:auto 1fr auto; align-items:center; gap:clamp(22px,3vw,40px); } }
.listen .lis-icon{ width:54px; height:54px; border:1.5px solid var(--ink); border-radius:50%; display:flex; align-items:center; justify-content:center; flex-shrink:0; transition:background .25s,border-color .25s; }
.listen .lis-icon svg{ width:22px; height:22px; color:var(--ink); transition:color .25s; }
.listen-row:hover .lis-icon{ background:var(--accent); border-color:var(--accent); }
.listen-row:hover .lis-icon svg{ color:#fff; }
.listen .lis-main .lis-t{ font-family:var(--display); font-weight:600; font-size:clamp(1.3rem,2vw,1.7rem); line-height:1.2; letter-spacing:-.005em; }
.listen .lis-main .lis-w{ font-family:var(--sans); font-size:13.5px; color:var(--ink-soft); margin-top:8px; }
.listen .lis-go{ font-family:var(--sans); font-size:13px; font-weight:600; color:var(--ink-faint); white-space:nowrap; display:inline-flex; gap:.4em; }
.listen-row:hover .lis-go{ color:var(--accent); }


/* ════════════ EN ABOUT PAGE ═════════════════════════════════════
   Quiet, narrative page. Mutual translation diagram with SVG
   convergence paths, brand brief, Jo's bio, contact.
   ═══════════════════════════════════════════════════════════════ */

/* ── utility ── */
.read-wrap{ width:100%; max-width:760px; margin:0 auto; padding:0 var(--gut); }

/* ── 1 · OPENING QUOTE ───────────────────────────────────────── */
.opening{ padding-block:clamp(60px,16vh,200px) clamp(60px,13vh,170px); text-align:center; }
.opening .q-en{ font-family:var(--display); font-weight:500; font-style:italic; font-size:clamp(2rem,5.4vw,4.6rem); line-height:1.16; letter-spacing:-.015em; margin:0 auto; max-width:20ch; text-wrap:balance; color:var(--ink); }
.opening .q-en .acc{ color:var(--accent); }
.opening .q-zh{ font-family:var(--serif); font-weight:500; font-size:clamp(1rem,1.8vw,1.4rem); line-height:1.7; letter-spacing:.08em; color:var(--ink-faint); margin:clamp(26px,4vh,42px) auto 0; max-width:30ch; }
.opening .q-by{ font-family:var(--sans); font-size:12px; letter-spacing:.16em; text-transform:uppercase; color:var(--ink-faint); margin-top:clamp(30px,5vh,48px); display:inline-flex; align-items:center; gap:.7em; }
.opening .q-by::before,.opening .q-by::after{ content:""; width:24px; height:1px; background:var(--line); }

/* ── 2 · MUTUAL TRANSLATION DEVICE ───────────────────────────── */
.translation{ padding-block:clamp(40px,7vh,90px) clamp(50px,8vh,110px); }
.tr-intro{ text-align:center; max-width:46ch; margin:0 auto clamp(40px,7vh,80px); }
.tr-intro .k{ font-family:var(--sans); font-size:12px; font-weight:600; letter-spacing:.2em; text-transform:uppercase; color:var(--accent); display:block; margin-bottom:18px; }
.tr-intro p{ font-family:var(--display); font-style:italic; font-size:clamp(1.15rem,1.9vw,1.5rem); line-height:1.5; color:var(--ink-2); margin:0; }

/* direction labels */
.tr-dirs{ display:grid; grid-template-columns:1fr 1fr; gap:clamp(20px,4vw,80px); max-width:1080px; margin:0 auto clamp(20px,3vh,30px); }
.tr-dir{ font-family:var(--sans); font-size:12.5px; font-weight:600; letter-spacing:.06em; color:var(--ink-soft); line-height:1.5; }
.tr-dir.l{ text-align:right; }
.tr-dir.r{ text-align:left; }
.tr-dir .arr{ color:var(--accent); }
.tr-dir b{ display:block; font-family:var(--display); font-style:italic; font-weight:500; font-size:16px; color:var(--ink); letter-spacing:0; margin-bottom:4px; text-transform:none; }
@media(max-width:720px){ .tr-dirs{ display:none; } }

/* two-road timeline */
.tr-stage{ position:relative; max-width:1180px; margin:0 auto; height:clamp(620px,80vw,840px); }
.tr-links{ position:absolute; inset:0; width:100%; height:100%; overflow:visible; pointer-events:none; z-index:0; }
.tr-links path{ fill:none; stroke-width:1.6; }
.tr-links path.l{ stroke:color-mix(in oklch, var(--ink) 32%, transparent); }
.tr-links path.r{ stroke:color-mix(in oklch, var(--accent) 62%, transparent); }
.tr-links .meet{ fill:var(--accent); stroke:none; }
.tnode{ position:absolute; z-index:1; }
.tnode .dot{ position:absolute; left:0; top:0; width:10px; height:10px; border-radius:50%; transform:translate(-50%,-50%); background:var(--bg); border:2px solid var(--ink-faint); }
.tnode.r .dot{ border-color:var(--accent); }
.tnode .tbody{ position:absolute; top:0; transform:translateY(-50%); width:max-content; max-width:min(40vw,300px); }
.tnode.l .tbody{ left:18px; text-align:left; }
.tnode.r .tbody{ right:18px; text-align:right; }
.tnode .yr{ font-family:var(--display); font-style:italic; font-size:13px; display:block; margin-bottom:4px; letter-spacing:.02em; }
.tnode.l .yr{ color:var(--ink-faint); }
.tnode.r .yr{ color:var(--accent); opacity:.85; }
.tnode .t-line{ font-family:var(--display); font-weight:500; font-size:clamp(1rem,1.5vw,1.28rem); line-height:1.24; letter-spacing:-.005em; color:var(--ink); }
.tnode .t-sub{ font-family:var(--sans); font-size:11.5px; color:var(--ink-soft); line-height:1.5; margin-top:5px; }

/* convergence */
.converge{ position:relative; max-width:1180px; margin:clamp(26px,4vh,48px) auto 0; text-align:center; padding-top:clamp(30px,5vh,56px); }
.converge .seam{ position:absolute; top:0; left:50%; width:9px; height:9px; border-radius:50%; transform:translate(-50%,-50%); background:var(--accent); box-shadow:0 0 0 5px color-mix(in oklch,var(--accent) 16%, transparent); }
.converge .cv-mark{ font-family:var(--serif); font-weight:900; font-size:clamp(2.2rem,6vw,4.6rem); letter-spacing:.04em; line-height:1; }
.converge .cv-mark b{ color:var(--accent); }
.converge .cv-en{ font-family:var(--display); font-style:italic; font-weight:500; font-size:clamp(1.6rem,3.6vw,2.8rem); color:var(--ink-2); margin-top:.3em; display:block; }
.converge .cv-note{ font-family:var(--sans); font-size:12.5px; letter-spacing:.04em; color:var(--ink-faint); margin-top:clamp(18px,3vh,26px); }

/* gap is ground */
.gap{ text-align:center; padding-block:clamp(46px,8vh,100px); }
.gap .big{ font-family:var(--display); font-weight:600; font-style:italic; font-size:clamp(1.8rem,4.4vw,3.4rem); letter-spacing:-.01em; color:var(--ink); margin:0; }
.gap .big .acc{ color:var(--accent); }
.gap p{ font-family:var(--display); font-size:clamp(1.1rem,1.7vw,1.4rem); line-height:1.6; color:var(--ink-2); margin:clamp(24px,4vh,38px) auto 0; max-width:40ch; font-style:normal; }

/* ── 3 · BRAND BRIEF ────────────────────────────────────────── */
.brief{ padding-block:clamp(50px,8vh,110px); border-top:1px solid var(--line); }
.brief .b-body{ font-family:var(--display); font-size:clamp(1.25rem,2vw,1.7rem); line-height:1.62; color:var(--read); margin:0 auto; max-width:none; }
.brief .b-body b{ font-weight:600; color:var(--ink); }
.brief .b-body .acc{ color:var(--accent); font-style:italic; }
.brief .b-side{ display:flex; flex-wrap:wrap; gap:clamp(10px,1.5vw,18px); margin-top:clamp(30px,5vh,46px); }
.brief .b-side .stat{ font-family:var(--sans); font-size:13px; color:var(--ink-soft); border:1px solid var(--line); padding:7px 14px; }
.brief .b-side .stat b{ font-family:var(--display); font-style:italic; color:var(--ink); font-weight:500; margin-right:.4em; }

/* ── 4 · JO (contributor note) ───────────────────────────────── */
.who{ padding-block:clamp(46px,7vh,90px); border-top:1px solid var(--line); }
.who-in{ display:grid; grid-template-columns:1fr; gap:clamp(24px,4vw,46px); align-items:start; max-width:880px; margin:0 auto; }
@media(min-width:680px){ .who-in{ grid-template-columns:140px 1fr; } }
.who .portrait img{ width:140px; height:170px; display:block; object-fit:cover; border-radius:2px; filter: saturate(.7) contrast(1.05) brightness(1.02); }
.who .who-body .k{ font-family:var(--sans); font-size:11px; font-weight:600; letter-spacing:.18em; text-transform:uppercase; color:var(--ink-faint); margin-bottom:14px; }
.who .who-body .nm{ font-family:var(--display); font-weight:600; font-size:clamp(1.4rem,2.4vw,1.9rem); letter-spacing:-.01em; margin-bottom:14px; }
.who .who-body .nm .zh{ font-family:var(--serif); font-weight:600; font-size:.7em; color:var(--ink-soft); letter-spacing:.08em; margin-left:.4em; }
.who .who-body p{ font-family:var(--sans); font-size:14.5px; line-height:1.8; color:var(--ink-soft); margin:0; max-width:52ch; }
.who .who-body p b{ color:var(--ink-2); font-weight:600; }

/* ── 5 · CONTACT ─────────────────────────────────────────────── */
.contact{ padding-block:clamp(46px,7vh,90px); border-top:1px solid var(--line); }
.contact .c-grid{ display:flex; flex-wrap:wrap; gap:clamp(18px,3vw,50px) clamp(24px,4vw,64px); align-items:baseline; max-width:880px; margin:0 auto; }
.contact .c-item{ display:inline-flex; flex-direction:column; gap:5px; }
.contact .c-item .k{ font-family:var(--sans); font-size:11px; font-weight:600; letter-spacing:.16em; text-transform:uppercase; color:var(--ink-faint); }
.contact .c-item a, .contact .c-item span{ font-family:var(--display); font-size:clamp(1rem,1.5vw,1.25rem); color:var(--ink); transition:color .25s; }
.contact .c-item a:hover{ color:var(--accent); }

/* ── MOBILE: timeline degrades to single left rail ─────────── */
@media(max-width:720px){
  .tr-links{ display:none; }
  .tr-stage{ height:auto; padding-left:6px; }
  .tr-stage::before{ content:""; position:absolute; top:6px; bottom:6px; left:13px; width:2px; background:var(--line); }
  .tnode{ position:relative!important; left:auto!important; top:auto!important; padding-left:34px; margin-bottom:18px; }
  .tnode .dot{ left:13px!important; top:11px!important; transform:translate(-50%,-50%); }
  .tnode .tbody{ position:relative!important; left:auto!important; right:auto!important; top:auto!important; transform:none!important; text-align:left!important; max-width:none; width:auto; }
  .tnode .t-line::after{ font-family:var(--sans); font-style:normal; font-size:10px; font-weight:600; letter-spacing:.1em; text-transform:uppercase; display:inline-block; margin-left:.6em; vertical-align:.12em; }
  .tnode.l .t-line::after{ content:"→ 中文"; color:var(--ink-faint); }
  .tnode.r .t-line::after{ content:"← psa"; color:var(--accent); }
  .converge{ text-align:center; }
  .converge .seam{ left:13px; }
}