/* ============================================================
   無用  In Utile — Magazine
   ============================================================ */

/* ---- Local serif fonts: 한자 ↔ Source Han Serif HK · 한글 ↔ Source Han Serif K ---- */
@font-face {
  font-family: 'Source Han Serif HK';
  src: url('fonts/SourceHanSerifHK-VF.woff2') format('woff2');
  font-weight: 200 900;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Source Han Serif K';
  src: url('fonts/SourceHanSerifK-VF.woff2') format('woff2');
  font-weight: 200 900;
  font-style: normal;
  font-display: swap;
}

/* ---- Local sans fonts: body reading ↔ Source Han Sans K · Hanja ↔ Source Han Sans HC ---- */
@font-face {
  font-family: 'Source Han Sans K';
  src: url('fonts/SourceHanSansK-VF.woff2') format('woff2');
  font-weight: 200 900;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Source Han Sans HC';
  src: url('fonts/SourceHanSansHC-VF.woff2') format('woff2');
  font-weight: 200 900;
  font-style: normal;
  font-display: swap;
}

/* ---- Korean title display face ---- */
@font-face {
  font-family: 'MICE Myungjo';
  src: url('fonts/MICEMyungjo.ttf') format('truetype');
  font-weight: 400 700;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Bodoni Moda SC';
  src: url('fonts/BodoniModaSC-VF.ttf') format('truetype');
  font-weight: 400 900;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Bodoni Moda SC';
  src: url('fonts/BodoniModaSC-Italic-VF.ttf') format('truetype');
  font-weight: 400 900;
  font-style: italic;
  font-display: swap;
}

/* ---- Self-hosted Bodoni Moda (variable opsz,wght) — numerals + decorative + wordmark.
   Unique family name so it always wins over the Google static 'Bodoni Moda'. ---- */
@font-face {
  font-family: 'Bodoni Moda VF';
  src: url('fonts/BodoniModa-VF.ttf') format('truetype');
  font-weight: 400 900;
  font-stretch: normal;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Bodoni Moda VF';
  src: url('fonts/BodoniModa-Italic-VF.ttf') format('truetype');
  font-weight: 400 900;
  font-stretch: normal;
  font-style: italic;
  font-display: swap;
}

/* ============================================================
   DESIGN TOKENS — In Utile canonical system
   BASE = Journal (global). CINEMA layer (Issue/Essays/Article-Hero)
   layers on top via data-mode="cinema". Prime = Crimson in both themes.
   Semantic vars carry the legacy names so the whole sheet inherits
   light/dark for free; primitives below never change.
   ============================================================ */
:root {
  /* ===== PRIMITIVES (constant across themes) ===== */
  --c-paper:#FAF8F2;  --c-ivory:#F6F3EC;   --c-charcoal:#3D3936;
  --c-crimson:#8A2D2B; --c-crimson-dark:#E84A3D;
  --c-navy:#263245;   --c-teal:#234B4D;
  --c-gold:#B5965C;   --c-gold-deep:#7E682F;
  --c-rose:#B88A87;   --c-tobacco:#70523E;
  --c-ink0:#1E1B19;   --c-ink1:#262220;
  /* light ink that ALWAYS stays light — text/labels over dark media + crimson fills */
  --on-dark:#F6F3EC;

  /* keep secondary-palette aliases (used by archive/poster hover) */
  --teal:#234B4D; --navy:#263245; --rose:#B88A87; --tobacco:#70523E;
  --gold:#B5965C; --ivory-white:#F6F3EC;

  /* ===== SEMANTIC — Light theme (default) ===== */
  --paper:#FAF8F2;            /* bg.canvas */
  --paper-2:#F1ECE0;
  --ivory:#F6F3EC;            /* bg.subtle */
  --charcoal:#3D3936;         /* text.primary */
  --charcoal-soft:#5E574F;    /* text secondary */
  --crimson:#8A2D2B;          /* text.emphasis · prime (area cap 5–10%) */
  --crimson-deep:#6B2120;
  --ghost:#C7BEAF;            /* decorative / inactive large nav */
  --ghost-2:#6E665B;          /* meta text — ≥4.5:1 on paper */
  --grid:#ECE6DA;
  --rule:rgba(61,57,54,0.15); /* border = charcoal @15% hairline */
  --numeral:#B5965C;          /* gold — large decorative numerals only */
  --label:#7E682F;            /* goldDeep — small labels (text-safe) */
  --accent-theory:#263245;    /* navy */
  --accent-hover:#234B4D;     /* teal */
  /* unified row hover / active fill — light crimson, site-wide */
  --hover-fill:rgba(138,45,43,0.05);
  --active-fill:rgba(138,45,43,0.09);

  /* ===== TYPE — script-separated families ===== */
  --f-serif:'Spectral','Source Han Serif K',Georgia,serif;                          /* EN title text (calm, literary) */
  --f-num:'Bodoni Moda VF','Bodoni Moda','Times New Roman',serif;                   /* numerals · large decorative · wordmark (dramatic Didone) */
  /* Bodoni optical-size + weight for NUMERALS. Low opsz = sturdier hairlines
     (legible); high opsz = thin display contrast. Tuned for readability. */
  --num-opsz:26;
  --num-wght:700;
  --f-serif-kr:'Noto Serif KR','Source Han Serif K','Nanum Myeongjo','MICE Myungjo',serif;  /* displayKr — Google Noto first (reliable); heavy self-host is a late fallback */
  --f-cjk:'Noto Serif HK','Noto Serif KR','Source Han Serif HK','Nanum Myeongjo',serif;     /* displayHanja — Google Noto first; self-host SHSerif kept only as deep fallback */
  --f-sans:'Pretendard Variable','Pretendard','Source Han Sans K',system-ui,sans-serif; /* body / UI */
  --f-sans-body:'Pretendard Variable','Pretendard','Source Han Sans K',system-ui,sans-serif;
  --f-serif-body:'Cormorant Garamond','Source Han Serif K',Georgia,serif;           /* quote */
  --f-mono:'IBM Plex Mono','IBM Plex Sans KR','Source Han Sans K',ui-monospace,monospace; /* meta */
  --cjk-weight:700;

  /* ===== TYPE SCALE (desktop maxima → clamp responsive) ===== */
  --fs-issue:clamp(56px,9vw,96px);
  --fs-hero:clamp(52px,8vw,96px);
  --fs-page:clamp(40px,6vw,64px);
  --fs-article:clamp(34px,4.5vw,48px);
  --fs-subtitle:clamp(20px,2.4vw,24px);
  --fs-body:18px;
  --fs-caption:13px;
  --fs-meta:12px;

  /* tracking */
  --tr-display:-0.04em;
  --tr-display-kr:-0.02em;
  --tr-meta:0.08em;

  /* line-height */
  --lh-hero:0.95; --lh-title:1.05; --lh-subtitle:1.20; --lh-body:1.70; --lh-meta:1.40;

  /* ===== SPACE — 8px base scale ===== */
  --space-1:8px; --space-2:16px; --space-3:24px; --space-4:32px; --space-5:48px;
  --space-6:64px; --space-7:96px; --space-8:128px; --space-9:160px;

  /* ===== LAYOUT ===== */
  --max-width:1440px;
  --reading-width:720px;
  --quote-width:560px;
  --grid-columns:12;
  --grid-gutter:24px;
  --page-margin:clamp(24px,5vw,96px);
  --section-gap:clamp(64px,9vw,128px);   /* token: 64–128 */
  --paragraph-gap:1.6em;
  --focus-ring:2px;
  --focus-offset:2px;

  /* ===== BACKGROUND GRID MODULE =====
     The graph-paper cell. Every horizontal rule's pitch is a multiple of this,
     and the Home landing animation draws on the same pitch (seamless hand-off).
     24px = token gutter = 3 × 8px baseline. */
  --grid-cell:24px;
  --grid-x:0px;    /* sub-cell X shift → aligns grid to content-left (JS-set) */
  --row-2:48px;    /* 2 cells */
  --row-3:72px;    /* 3 cells — default index row */
  --row-4:96px;    /* 4 cells — roomy row */

  /* ===== BORDER / SHADOW (radius 0, no shadows) ===== */
  --border-width:1px;
  --radius:0px;

  /* ===== MOTION ===== */
  --transition-base:250ms; --transition-fast:150ms; --transition-cinema:300ms;
  --ease-standard:cubic-bezier(0.2,0,0,1);
  --hover-lift:0px; --hover-lift-cinema:-2px;
  --img-filter:saturate(0.9) contrast(0.95);

  color-scheme:light;
}

/* ===== SEMANTIC — Dark theme ===== */
[data-theme="dark"] {
  --paper:#1E1B19;            /* bg.canvas (ink0) */
  --paper-2:#262220;
  --ivory:#262220;            /* bg.subtle (ink1) */
  --charcoal:#F6F3EC;         /* text.primary (ivory) */
  --charcoal-soft:#C7C0B4;
  --crimson:#E84A3D;          /* text.emphasis · prime (crimsonDark for legibility) */
  --crimson-deep:#C53D32;
  --ghost:#5C564E;
  --ghost-2:#A89F92;          /* meta on dark — ≥4.5:1 on ink */
  --grid:#2C2825;
  --rule:rgba(246,243,236,0.16);
  --numeral:#B5965C;
  --label:#B5965C;            /* gold in dark */
  --accent-theory:#3D5573;
  --accent-hover:#356E70;
  --hover-fill:rgba(232,74,61,0.10);
  --active-fill:rgba(232,74,61,0.16);
  color-scheme:dark;
}
/* Auto-follow OS when no explicit choice has been made */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --paper:#1E1B19; --paper-2:#262220; --ivory:#262220;
    --charcoal:#F6F3EC; --charcoal-soft:#C7C0B4;
    --crimson:#E84A3D; --crimson-deep:#C53D32;
    --ghost:#5C564E; --ghost-2:#A89F92;
    --grid:#2C2825; --rule:rgba(246,243,236,0.16);
    --numeral:#B5965C; --label:#B5965C;
    --accent-theory:#3D5573; --accent-hover:#356E70;
    --hover-fill:rgba(232,74,61,0.10); --active-fill:rgba(232,74,61,0.16);
    color-scheme:dark;
  }
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  padding: 0;
  overflow-x: clip;
  background: var(--paper);
  color: var(--charcoal);
  font-family: var(--f-sans);
  font-size: 16px;
  line-height: 1.55;
  transition: background-color var(--transition-base) var(--ease-standard), color var(--transition-base) var(--ease-standard);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

body {
  min-height: 100vh;
  overflow-x: clip;
  background-color: var(--paper);
  /* graph-paper grid — scrolls with the document so horizontal rules can land on it.
     Cell = --grid-cell (24px module = token gutter = 3 × 8px baseline). */
  background-image:
    linear-gradient(var(--grid) 1px, transparent 1px),
    linear-gradient(90deg, var(--grid) 1px, transparent 1px);
  background-size: var(--grid-cell) var(--grid-cell);
  /* --grid-x (set by grid-snap.js) shifts a vertical line onto the page's
     left content edge so content reads as "on the grid". */
  background-position: var(--grid-x, 0px) 0;
}

/* warm paper grain — brand exception, kept very faint (decorative grid removed per tokens) */
body::before {
  content: '';
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 1;
  opacity: 0.14;
  mix-blend-mode: multiply;
  background-image:
    radial-gradient(rgba(80, 60, 40, 0.04) 1px, transparent 1px),
    radial-gradient(rgba(80, 60, 40, 0.025) 1px, transparent 1px);
  background-size: 3px 3px, 7px 7px;
  background-position: 0 0, 1px 1px;
}

#root { position: relative; z-index: 2; }

/* Article metadata rail — capped to the viewport (inline style) with a thin,
   ghosted scrollbar so its lower fields (Subject / Reading) are always
   reachable on short screens without a heavy scrollbar breaking the editorial
   calm. Track is invisible; thumb only appears when the rail actually overflows. */
.art-rail-left { scrollbar-width: thin; scrollbar-color: var(--ghost) transparent; }
.art-rail-left::-webkit-scrollbar { width: 3px; }
.art-rail-left::-webkit-scrollbar-track { background: transparent; }
.art-rail-left::-webkit-scrollbar-thumb { background: var(--ghost); }
.art-rail-left:hover::-webkit-scrollbar-thumb { background: var(--ghost-2); }

/* ---------- Typography utilities ---------- */
.serif    { font-family: var(--f-serif); }
.serif-kr { font-family: var(--f-serif-kr); }
.sans     { font-family: var(--f-sans); }
.mono     { font-family: var(--f-mono); font-feature-settings: 'tnum'; }

/* ---------- Semantic type system (language-aware) ----------
   Title    → EN Bodoni Moda SC · KR Source Han Serif K
   Subtitle → EN Spectral       · KR Source Han Serif K
   Body     → Source Han Sans K (both languages — clean long-form reading)
   Meta/sub → IBM Plex Mono → IBM Plex Sans KR (both languages)
   Italics are avoided unless classically required (e.g. <em>).  */
.ty-title { font-family: var(--f-serif);      font-style: normal; }
.ty-sub   { font-family: var(--f-serif-body); font-style: italic; line-height: 1.7; }
.ty-body  { font-family: var(--f-sans-body);  font-style: normal; line-height: var(--lh-body); font-weight: 300; }
.ty-meta  { font-family: var(--f-mono);       font-style: normal; font-feature-settings: 'tnum'; }
html[lang="ko"] .ty-title { font-family: 'MICE Myungjo', var(--f-serif-kr); }
html[lang="ko"] .ty-sub { font-family: var(--f-serif-kr); font-style: normal; }
/* English subtitle/quote face (Cormorant) is optically small — enlarge list leads in EN */
html[lang="en"] .essay-feat__lead { font-size: 19px; }
html[lang="en"] .essay-row__lead { font-size: 17px; }

/* ── EN display typography — density pass ───────────────────────────────────
   Spectral sets optically lighter and looser than the Korean Myeongjo at
   display sizes, so long English headlines can read thin and gappy beside the
   dense KR setting. In EN we tighten tracking, balance multi-line breaks, and
   switch on the family's kerning + ligatures so titles carry the same visual
   weight as Korean. These touch only properties the inline styles don't set,
   so nothing reflows badly. */
html[lang="en"] .ty-title {
  letter-spacing: -0.018em;
  text-wrap: balance;
  font-kerning: normal;
  font-optical-sizing: auto;
  font-feature-settings: "kern" 1, "liga" 1, "dlig" 1, "calt" 1;
}
/* The giant article / issue headline: pull the leading tight, close the gaps */
html[lang="en"] h1.ty-title { letter-spacing: -0.026em; word-spacing: -0.02em; }
/* List, ToC, praxis-index titles: balance breaks + trim inter-word gaps so a
   long English title fills its column instead of trailing an orphan word */
html[lang="en"] .toc-row__title,
html[lang="en"] .iss-row__title,
html[lang="en"] .essay-row__title,
html[lang="en"] .essay-feat__title,
html[lang="en"] .prx-list__name,
html[lang="en"] .prx-opening__statement { letter-spacing: -0.014em; text-wrap: balance; }
/* All-caps Latin in the mono eyebrow reads cleaner with a touch more tracking */
html[lang="en"] .eyebrow { letter-spacing: 0.2em; }
/* Spectral italic leads run a hair tight at body measure — settle the leading */
html[lang="en"] .ty-sub { line-height: 1.64; }
/* The issue intro / editor's letter switches to Spectral in EN (set inline via
   `serif`); give that running paragraph a denser, book-like measure */
html[lang="en"] .iss-intro--en {
  font-family: var(--f-serif);
  font-size: 17px;
  line-height: 1.72;
  letter-spacing: 0.002em;
  text-wrap: pretty;
}

.eyebrow {
  font-family: var(--f-mono);
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--charcoal);
}

.eyebrow--ghost { color: var(--ghost-2); }
.eyebrow--crimson { color: var(--crimson); }

.crimson { color: var(--crimson); }
.ghost   { color: var(--ghost-2); }

/* ---------- Page frame ---------- */
.page {
  min-height: 100vh;
  --pad-x: var(--page-margin);
  /* top/bottom snapped to the grid module so content lands on grid lines */
  padding: 48px var(--pad-x) 96px;   /* 2 / 4 cells */
  position: relative;
}
@media (max-width: 720px) {
  .page { padding: 24px var(--pad-x) 48px; }   /* 1 / 2 cells */
}

/* Title hanja — small crimson CJK mark riding the top-right of a section title
   (shared treatment, originally on .iss-head__title) */
.t-cjk {
  font-family: var(--f-cjk);
  font-weight: var(--cjk-weight, 700);
  font-size: 0.32em;
  color: var(--crimson);
  vertical-align: super;
  margin-left: 0.16em;
  letter-spacing: 0.04em;
}

/* ---------- Top header ---------- */
.top {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: start;
  gap: 24px;
  margin-bottom: 72px;   /* 3 cells */
}
.brand {
  display: inline-flex;
  flex-direction: column;
  align-items: flex-start;
  line-height: 1;
  text-decoration: none;
  color: inherit;
  cursor: pointer;
}
.brand__cjk {
  font-family: var(--f-cjk);
  font-weight: var(--cjk-weight, 700);
  font-size: 26px;
  letter-spacing: 0.14em;
  color: var(--charcoal);
  line-height: 1;
  transition: color 320ms ease;
}
.brand__name {
  margin-top: 0;
  font-family: var(--f-num);
  font-style: normal;
  font-weight: 500;
  font-size: 14px;
  letter-spacing: 0.01em;
  color: var(--charcoal-soft);
  line-height: 1;
  transition: color 320ms ease;
}
/* Hairline between 無用 and In Utile — animates on hover.
   Sits inside the 3px gap so spacing never shifts. */
.brand__rule {
  display: block;
  height: 1px;
  width: 0;
  background: var(--crimson);
  margin: 1px 0;
  transition: width 320ms ease;
}
.brand:hover .brand__rule,
.brand:active .brand__rule { width: 50px; }

.brand:hover .brand__cjk,
.brand:hover .brand__name,
.brand:active .brand__cjk,
.brand:active .brand__name {
  color: var(--crimson);
}

.top__center {
  text-align: center;
  font-family: var(--f-mono);
  font-size: 11px;
  letter-spacing: 0.22em;
  color: var(--ghost-2);
  text-transform: uppercase;
  padding-top: 6px;
}

.top__right {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  gap: 18px;
  padding-top: 4px;
}
.lang {
  display: inline-flex;
  align-items: baseline;
  gap: 6px;
  font-family: var(--f-mono);
  font-size: 11px;
  letter-spacing: 0.16em;
}
.lang__opt {
  background: none;
  border: 0;
  padding: 2px 0;
  cursor: pointer;
  font: inherit;
  letter-spacing: inherit;
  color: var(--ghost-2);
  transition: color 220ms ease;
}
.lang__opt:hover { color: var(--charcoal-soft); }
.lang__opt.is-active {
  color: var(--charcoal);
  font-weight: 500;
}
.lang__sep { color: var(--ghost-2); }

.menu-btn {
  background: none;
  border: 0;
  cursor: pointer;
  padding: 6px 4px;
  display: inline-flex;
  flex-direction: column;
  gap: 4px;
  align-items: flex-end;
}
.menu-btn span {
  width: 22px;
  height: 1px;
  background: var(--charcoal);
  transition: width 240ms ease, background 240ms ease;
}
.menu-btn span:nth-child(2) { width: 16px; }
.menu-btn:hover span { background: var(--crimson); }
.menu-btn:hover span:nth-child(2) { width: 22px; }

/* ---------- Fixed header controls (KR/EN + menu) — stay put on scroll ---------- */
.header-ctrl {
  position: fixed;
  top: 26px;
  right: 48px;
  z-index: 45;
  display: flex;
  align-items: center;
  gap: 18px;
}
@media (max-width: 720px) {
  .header-ctrl { top: 18px; right: 20px; }
}

/* ---------- Page heading — big, anchored to the top-left of every page ---------- */
.page-head {
  display: flex;
  justify-content: flex-start;
  padding-top: 30px;
  margin-bottom: 40px;
}
.page-head__title {
  text-align: left;
  font-weight: 500;
  font-size: clamp(36px, 5.4vw, 58px);   /* unified to the KR size so EN no longer grows taller and breaks the grid rhythm of everything below */
  line-height: 0.95;
  margin: 0;
  letter-spacing: -0.01em;
}
html[lang="ko"] .page-head__title { letter-spacing: var(--tr-display-kr); }

/* ---------- Sidebar wordmark (go home) ---------- */
.menu-pop__top {
  display: flex;
  justify-content: flex-end;
  align-items: flex-start;
  margin-bottom: 48px;
}
.menu-pop__brand {
  display: inline-flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 3px;
  line-height: 1;
  text-decoration: none;
  cursor: pointer;
}
.menu-pop__brand-cjk {
  font-family: var(--f-cjk);
  font-weight: var(--cjk-weight, 700);
  font-size: 30px;
  letter-spacing: 0.14em;
  color: var(--charcoal);
  transition: color 320ms ease;
}
.menu-pop__brand-name {
  font-family: var(--f-num);
  font-weight: 600;
  font-size: 14px;
  letter-spacing: 0.01em;
  color: var(--charcoal-soft);
  transition: color 320ms ease;
}
.menu-pop__brand:hover .menu-pop__brand-cjk,
.menu-pop__brand:hover .menu-pop__brand-name { color: var(--crimson); }

/* ---------- Uploaded image fill (fixed-size frames) ---------- */
.ph-img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  z-index: 0;
}
.ph-scrim {
  position: absolute;
  inset: 0;
  z-index: 1;
  background: linear-gradient(180deg, rgba(0,0,0,.34) 0%, rgba(0,0,0,0) 28%, rgba(0,0,0,0) 60%, rgba(0,0,0,.42) 100%);
  pointer-events: none;
}
/* Real uploaded images render clean — no placeholder scanline / vignette texture */
.cine--img { background: transparent; }
.cine--img::before { content: none; }

/* ---------- Vertical signage (right edge label) — removed per design ---------- */
.signage {
  display: none;
}

/* ---------- Editorial link (A.) ---------- */
.elink {
  display: inline-flex;
  align-items: baseline;
  gap: 8px;
  text-decoration: none;
  color: var(--charcoal);
  font-family: var(--f-sans);
  font-size: 13px;
  border-bottom: 1px solid var(--rule);
  padding-bottom: 3px;
  transition: color 220ms ease, border-color 220ms ease, padding 220ms ease;
  cursor: pointer;
}
.elink__arrow {
  display: inline-block;
  transition: transform 240ms ease, color 220ms ease;
  font-family: var(--f-mono);
}
.elink:hover {
  color: var(--crimson);
  border-color: var(--crimson);
}
.elink:hover .elink__arrow {
  transform: translateX(4px);
  color: var(--crimson);
}

/* ---------- Vertical reveal link (B.) ---------- */
.vlink {
  display: inline-block;
  font-family: var(--f-serif);
  font-style: normal;
  font-weight: 500;
  font-size: 22px;
  letter-spacing: 0.01em;
  color: var(--ghost);
  text-decoration: none;
  cursor: pointer;
  position: relative;
  padding: 2px 0;
  transition: color 320ms ease, transform 320ms ease;
}
.vlink::after {
  content: '';
  position: absolute;
  left: 0;
  bottom: -4px;
  width: 0;
  height: 1px;
  background: currentColor;
  transition: width 340ms ease;
}
.vlink:hover {
  color: var(--crimson);
}
.vlink:hover::after { width: 38px; }
.vlink.is-active { color: var(--crimson); }
.vlink.is-active::after { width: 28px; background: var(--crimson); }

/* ---------- Index nav (C.) ---------- */
.idx {
  display: flex;
  flex-direction: column;
  gap: 2px;
  font-family: var(--f-sans);
  font-size: 13px;
}
.idx__row {
  display: grid;
  grid-template-columns: 28px 1fr 28px;
  align-items: center;
  padding: 7px 0;
  color: var(--charcoal);
  text-decoration: none;
  cursor: pointer;
  border-bottom: 1px solid transparent;
  transition: color 220ms ease, border-color 220ms ease, padding 240ms ease;
}
.idx__row > span:first-child {
  font-family: var(--f-mono);
  font-size: 11px;
  color: var(--ghost-2);
  letter-spacing: 0.08em;
}
.idx__row:hover {
  color: var(--crimson);
  border-color: var(--crimson);
}
.idx__row:hover > span:first-child { color: var(--crimson); }
.idx__row::after {
  content: '—';
  font-family: var(--f-mono);
  color: transparent;
  text-align: right;
  transition: color 220ms ease;
}
.idx__row:hover::after { color: var(--crimson); }
.idx__row.is-active { color: var(--crimson); border-color: var(--crimson); }
.idx__row.is-active span:first-child { color: var(--crimson); }
.idx__row.is-active::after { color: var(--crimson); }

/* ---------- Solid Contact pill (D.) ---------- */
.btn-solid {
  display: inline-block;
  background: var(--crimson);
  color: var(--on-dark);
  text-decoration: none;
  padding: 12px 28px;
  font-family: var(--f-sans);
  font-size: 13px;
  letter-spacing: 0.04em;
  border: 0;
  cursor: pointer;
  transition: background 240ms ease, transform 240ms ease;
}
.btn-solid:hover {
  background: var(--crimson-deep);
}

/* ---------- Filter chips ---------- */
.chips {
  display: flex;
  flex-wrap: wrap;
  gap: 22px;
  align-items: baseline;
}
.chip {
  background: none;
  border: 0;
  font-family: var(--f-sans);
  font-size: 14px;
  color: var(--charcoal);
  cursor: pointer;
  padding: 0 0 4px;
  border-bottom: 1px solid transparent;
  transition: color 220ms ease, border-color 220ms ease;
}
.chip:hover { color: var(--crimson); }
.chip.is-active {
  color: var(--crimson);
  border-color: var(--crimson);
}
/* Touch ergonomics — give chips & tappable lexicon rows a real hit area */
@media (pointer: coarse) {
  .chip {
    min-height: 40px;
    display: inline-flex;
    align-items: center;
    padding-top: 6px;
  }
  .m-thy-head { min-height: 48px; }
}

/* ---------- Archive card ---------- */
.card {
  display: flex;
  flex-direction: column;
  gap: 10px;
  cursor: pointer;
  text-decoration: none;
  color: inherit;
}
.card__poster {
  position: relative;
  aspect-ratio: 3 / 4;
  overflow: hidden;
  background: var(--charcoal);
}
.card__poster::after {
  content: '';
  position: absolute;
  inset: 0;
  background-image:
    repeating-linear-gradient(0deg, rgba(255,255,255,0.025) 0 1px, transparent 1px 3px);
  pointer-events: none;
  opacity: 0.6;
}
.card__face,
.card__hover {
  position: absolute;
  inset: 0;
  padding: 16px;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  gap: 6px;
}
/* Persistent caption laid over the full-bleed image */
.card__face {
  z-index: 1;
  color: var(--on-dark);
  background: linear-gradient(180deg, rgba(0,0,0,0) 38%, rgba(0,0,0,0.62) 100%);
  transition: opacity 240ms ease;
}
/* Hover state: the chosen background colour replaces the image */
.card__hover {
  z-index: 2;
  background: var(--card-hover-bg, var(--charcoal));
  color: var(--card-hover-fg, var(--on-dark));
  opacity: 0;
  transition: opacity 320ms ease;
}
.card:hover .card__hover { opacity: 1; }
.card:hover .card__face { opacity: 0; }
.t-title {
  font-family: var(--f-serif);
  font-size: 22px;
  line-height: 1.1;
}
html[lang="ko"] .t-title { font-family: 'MICE Myungjo', var(--f-serif-kr); }
.card__face .t-title { text-shadow: 0 1px 8px rgba(0,0,0,0.45); }
.t-meta {
  font-family: var(--f-mono);
  font-size: 10px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
}
.card__face .t-meta { color: var(--on-dark); opacity: 0.74; text-shadow: 0 1px 6px rgba(0,0,0,0.5); }
.card__hover .t-meta { color: var(--card-hover-fg, var(--on-dark)); opacity: 0.62; }
.card__caption {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  font-family: var(--f-mono);
  font-size: 10px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--charcoal-soft);
  padding: 0 2px;
}

/* ---------- Atmospheric poster placeholders ---------- */
.poster {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding: 14px 12px;
  color: var(--on-dark);
  background: var(--charcoal);
  overflow: hidden;
}
.poster::before {
  content: '';
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse at 30% 80%, rgba(159, 36, 36, 0.0) 0%, rgba(0,0,0,0.6) 70%),
    repeating-linear-gradient(90deg, rgba(255,255,255,0.02) 0 2px, transparent 2px 5px);
}
.poster--red {
  background: linear-gradient(180deg, #4A0E0E 0%, #1A0606 100%);
}
.poster--red::before {
  background:
    radial-gradient(ellipse at 50% 30%, rgba(255, 60, 60, 0.18) 0%, transparent 60%),
    radial-gradient(ellipse at 70% 90%, rgba(0,0,0,0.6) 0%, transparent 70%),
    repeating-linear-gradient(90deg, rgba(255,255,255,0.03) 0 2px, transparent 2px 5px);
}
.poster--ink {
  background: linear-gradient(160deg, #1A1816 0%, #2E2C2A 60%, #0E0D0C 100%);
}
.poster--ink::before {
  background:
    radial-gradient(ellipse at 30% 20%, rgba(207, 200, 190, 0.06) 0%, transparent 60%),
    repeating-linear-gradient(180deg, rgba(255,255,255,0.025) 0 1px, transparent 1px 4px);
}
.poster--sepia {
  background: linear-gradient(180deg, #3B2E20 0%, #1C1612 100%);
}
.poster--sepia::before {
  background:
    radial-gradient(ellipse at 50% 60%, rgba(214, 180, 120, 0.10) 0%, transparent 60%),
    repeating-linear-gradient(90deg, rgba(255,255,255,0.02) 0 2px, transparent 2px 6px);
}

.poster__top, .poster__bot {
  position: relative;
  z-index: 2;
  display: flex;
  justify-content: space-between;
  font-family: var(--f-mono);
  font-size: 9px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.5);
}
.poster__title {
  position: relative;
  z-index: 2;
  font-family: var(--f-serif);
  font-size: clamp(18px, 2vw, 26px);
  line-height: 1.05;
  color: var(--on-dark);
  letter-spacing: 0.005em;
}
.poster__title--cjk {
  font-family: var(--f-cjk);
  font-style: normal;
  font-size: clamp(22px, 2.4vw, 32px);
}
.poster__title--vertical {
  writing-mode: vertical-rl;
  text-orientation: mixed;
  font-family: var(--f-cjk);
  font-style: normal;
  font-size: clamp(20px, 2vw, 28px);
  align-self: flex-end;
  margin-top: auto;
}
.poster__num {
  position: absolute;
  right: 10px;
  bottom: 8px;
  z-index: 2;
  font-family: var(--f-mono);
  font-size: 9px;
  letter-spacing: 0.2em;
  color: rgba(255,255,255,0.4);
}

/* ---------- Cinematic placeholder (article hero) ---------- */
.cine {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 10;
  background: var(--charcoal);
  overflow: hidden;
}
.cine::before {
  content: '';
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse at 50% 80%, rgba(159, 36, 36, 0.15) 0%, transparent 50%),
    radial-gradient(ellipse at 50% 20%, rgba(207, 200, 190, 0.05) 0%, transparent 60%),
    repeating-linear-gradient(0deg, rgba(255,255,255,0.02) 0 1px, transparent 1px 3px),
    repeating-linear-gradient(90deg, rgba(255,255,255,0.02) 0 1px, transparent 1px 6px);
}
.cine::after {
  content: '';
  position: absolute;
  inset: 0;
  background:
    /* vertical building silhouettes */
    linear-gradient(180deg, transparent 0%, transparent 40%, rgba(0,0,0,0.5) 70%, rgba(0,0,0,0.9) 100%),
    repeating-linear-gradient(90deg,
      transparent 0%,
      transparent 1%,
      rgba(40,40,40,0.4) 1%,
      rgba(40,40,40,0.4) 1.3%,
      transparent 1.3%,
      transparent 3%,
      rgba(60,60,60,0.5) 3%,
      rgba(60,60,60,0.5) 3.4%,
      transparent 3.4%,
      transparent 5%
    );
}
.cine__label {
  position: absolute;
  left: 14px;
  bottom: 12px;
  z-index: 3;
  font-family: var(--f-mono);
  font-size: 10px;
  letter-spacing: 0.22em;
  color: rgba(255,255,255,0.5);
  text-transform: uppercase;
}
.cine__signs {
  position: absolute;
  top: 18%;
  right: 12%;
  z-index: 3;
  display: flex;
  flex-direction: column;
  gap: 4px;
  align-items: flex-end;
}
.cine__signs span {
  display: inline-block;
  padding: 3px 6px;
  background: rgba(159, 36, 36, 0.6);
  font-family: var(--f-cjk);
  color: #FFD9A8;
  font-size: 13px;
  letter-spacing: 0.06em;
}

/* ---------- Footer prev/next ---------- */
.foot-nav {
  display: grid;
  grid-template-columns: 1fr 1fr;
  align-items: center;
  gap: 24px;
  margin-top: 56px;
  padding-top: 22px;
  border-top: 1px solid var(--rule);
  font-family: var(--f-sans);
  font-size: 13px;
}
.foot-nav__side {
  display: flex;
  flex-direction: column;
  gap: 4px;
  cursor: pointer;
  text-decoration: none;
  color: inherit;
  padding: 6px 0;
  border-radius: 0;
  transition: background 240ms ease;
}
.foot-nav__side--right { text-align: right; align-items: flex-end; }
.foot-nav__side small {
  font-family: var(--f-mono);
  font-size: 10px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ghost-2);
}
.foot-nav__side strong {
  font-family: var(--f-serif), var(--f-serif-kr);
  font-weight: 600;
  font-size: 18px;
  font-weight: 500;
  color: var(--charcoal);
  transition: color 220ms ease;
}
.foot-nav__side:hover strong { color: var(--crimson); }
.foot-nav__side:hover { background: var(--hover-fill); }

/* ---------- Menu overlay (hover state for top right) ---------- */
.menu-pop {
  position: fixed;
  top: 0;
  right: 0;
  width: 360px;
  height: 100vh;
  background: var(--paper);
  border-left: 1px solid var(--rule);
  padding: 32px 44px;
  display: flex;
  flex-direction: column;
  z-index: 50;
  transform: translateX(100%);
  transition: transform 420ms cubic-bezier(0.7, 0, 0.2, 1);
}
.menu-pop.is-open { transform: translateX(0); }
.menu-pop__header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 64px;
}
.menu-pop__close {
  background: none;
  border: 0;
  cursor: pointer;
  font-family: var(--f-mono);
  font-size: 11px;
  letter-spacing: 0.18em;
  color: var(--charcoal);
}
.menu-pop__close:hover { color: var(--crimson); }
.menu-pop__list {
  display: flex;
  flex-direction: column;
  gap: 20px;
  margin-top: 20px;
}
.menu-pop__item {
  display: flex;
  align-items: baseline;
  gap: 12px;
  text-decoration: none;
  font-family: var(--f-serif);
  font-style: normal;
  font-weight: 500;
  font-size: 32px;
  letter-spacing: 0.005em;
  color: var(--ghost);
  cursor: pointer;
  transition: color 320ms ease, transform 320ms ease;
}
.menu-pop__item .num {
  font-family: var(--f-mono);
  font-style: normal;
  font-size: 11px;
  letter-spacing: 0.18em;
  color: var(--ghost-2);
  width: 28px;
}
.menu-pop__item:hover {
  color: var(--crimson);
  transform: translateX(4px);
}
.menu-pop__item:hover .num { color: var(--crimson); }
.menu-pop__item.is-active { color: var(--crimson); }
.menu-pop__item.is-active .num { color: var(--crimson); }
.menu-pop__item .cjk {
  margin-left: auto;
  font-family: var(--f-cjk);
  font-weight: 500;
  font-style: normal;
  font-size: 24px;
  color: var(--charcoal-soft);
  letter-spacing: 0.06em;
  transition: color 320ms ease;
}
.menu-pop__item:hover .cjk { color: var(--crimson); }
.menu-pop__item.is-active .cjk { color: var(--crimson); }
.menu-pop__foot {
  margin-top: auto;
  display: flex;
  flex-direction: column;
  gap: 10px;
  font-family: var(--f-mono);
  font-size: 11px;
  letter-spacing: 0.14em;
  color: var(--ghost-2);
  text-transform: uppercase;
}
.menu-pop__social {
  display: flex;
  flex-wrap: wrap;
  gap: 18px;
  margin-top: 14px;
  padding-top: 14px;
  border-top: 1px solid var(--rule);
}
.menu-pop__sub {
  font-size: 10px;
  letter-spacing: 0.18em;
  color: var(--ghost-2);
  text-transform: none;
  line-height: 1.6;
}
.menu-pop__social a {
  display: inline-flex;
  align-items: baseline;
  gap: 4px;
  cursor: pointer;
  color: var(--charcoal-soft);
  transition: color 200ms ease;
}
.menu-pop__social a span { color: var(--ghost-2); transition: color 200ms ease; }
.menu-pop__social a:hover,
.menu-pop__social a:hover span { color: var(--crimson); }
.menu-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(46, 44, 42, 0.0);
  z-index: 49;
  opacity: 0;
  pointer-events: none;
  transition: opacity 320ms ease, background 320ms ease;
}
.menu-backdrop.is-open {
  opacity: 1;
  pointer-events: auto;
  background: rgba(46, 44, 42, 0.18);
}

/* ---------- Fade-in page ---------- */
.page-enter {
  animation: pageFade 680ms ease both;
}
@keyframes pageFade {
  from { opacity: 0; transform: translateY(6px); }
  to   { opacity: 1; transform: none; }   /* explicit `none` (not an omitted/interpolated identity matrix) so .page leaves NO transform containing block — otherwise position:fixed backdrops (the page-glyph watermark, Praxis tablet hero) resolve to .page and drift on scroll/reflow */
}

/* ---------- Vertical text helpers ---------- */
.vtext {
  writing-mode: vertical-rl;
  text-orientation: mixed;
}
.vtext--ghost {
  font-family: var(--f-num);
  font-variation-settings: 'opsz' 40, 'wght' var(--num-wght);
  font-size: 80px;
  color: var(--ghost);
  letter-spacing: 0.04em;
  line-height: 0.9;
}

/* ---------- Rules ---------- */
.hr {
  border: 0;
  border-top: 1px solid var(--rule);
  margin: 0;
}

/* ---------- Scroll cue ---------- */
.scroll-cue {
  position: absolute;
  left: 48px;
  top: 50%;
  transform: translateY(-50%) rotate(-90deg);
  transform-origin: left center;
  font-family: var(--f-mono);
  font-size: 10px;
  letter-spacing: 0.3em;
  color: var(--ghost-2);
  text-transform: uppercase;
  white-space: nowrap;
}
.scroll-cue::before {
  content: '●';
  display: inline-block;
  margin-right: 12px;
  font-size: 6px;
  vertical-align: middle;
  color: var(--charcoal);
}

/* ---------- Article body — long-form reading ---------- */
.article-body {
  font-family: var(--f-sans-body);
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  color: var(--charcoal);
  margin: 0 auto 1.4em;
  max-width: var(--reading-width);
  letter-spacing: 0;
  text-align: justify;
  text-justify: inter-character;
  hyphens: auto;
  -webkit-hyphens: auto;
  word-break: keep-all;
  text-wrap: pretty;
  scroll-margin-top: 80px;
}
/* Korean body reads a touch light at 300 — nudge the weight up for naturalness */
html[lang="ko"] .article-body { font-weight: 400; }
.article-body em {
  font-family: var(--f-serif-body);
  font-style: italic;
  color: var(--charcoal);
  font-weight: 500;
}
html[lang="ko"] .article-body em {
  font-family: var(--f-serif-kr);
}
.article-body--close {
  font-style: normal;
  color: var(--charcoal-soft);
  border-top: 1px dashed var(--rule);
  padding-top: 32px;
  margin-top: 24px;
}
.dropcap {
  float: left;
  font-family: var(--f-num);
  font-variation-settings: 'opsz' 34, 'wght' var(--num-wght);
  font-weight: 500;
  font-size: 64px;
  line-height: 0.9;
  padding: 6px 12px 0 0;
  color: var(--crimson);
}

/* ---------- TOC rows (Issue page) ---------- */
.toc-row {
  display: grid;
  grid-template-columns: 42px 1fr auto 22px;
  align-items: center;
  gap: 18px;
  height: var(--row-4);   /* 4 cells — fixed so the rule lands on the grid */
  box-sizing: border-box;
  overflow: hidden;
  padding: 12px 0;
  border-bottom: 1px solid var(--rule);
  cursor: pointer;
  text-decoration: none;
  color: var(--charcoal);
  transition: background 240ms ease, padding 240ms ease;
}
.toc-row:hover { background: var(--hover-fill); padding-left: 8px; padding-right: 8px; }
.toc-row__num {
  font-size: 11px;
  letter-spacing: 0.16em;
  color: var(--ghost-2);
}
.toc-row__body {
  display: flex;
  flex-direction: column;
  gap: 3px;
  min-width: 0;
}
.toc-row__title {
  font-size: 19px;
  line-height: 1.25;
  color: var(--charcoal);
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow: hidden;
}
.toc-row__sub {
  font-family: var(--f-mono);
  font-size: 13px;
  color: var(--ghost-2);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  letter-spacing: 0.005em;
}
.toc-row__meta {
  font-size: 10px;
  letter-spacing: 0.18em;
  color: var(--ghost-2);
  text-transform: uppercase;
  white-space: nowrap;
}
.toc-row__arrow {
  font-family: var(--f-mono);
  color: var(--ghost-2);
  transition: color 220ms, transform 220ms;
}
.toc-row:hover .toc-row__title { color: var(--crimson); }
.toc-row:hover .toc-row__arrow { color: var(--crimson); transform: translateX(3px); }
.toc-row--featured .toc-row__title {
  font-weight: 500;
  font-size: 21px;
  color: var(--crimson);
}
.toc-row--featured {
  border-top: 1px solid var(--crimson);
  border-bottom-color: var(--crimson);
}
/* avoid a doubled hairline directly above the featured row */
.toc-row:has(+ .toc-row--featured) { border-bottom-color: transparent; }

/* ---------- Essays page — featured + row list ---------- */
.essay-feat {
  display: grid;
  grid-template-columns: 200px 1fr auto;
  gap: 36px;
  align-items: start;
  min-height: 336px;   /* 14 cells — poster + meta block, rule on grid */
  box-sizing: border-box;
  padding: 24px 0;
  border-top: 1px solid var(--crimson);   /* grid-aligned top rule (snapped via rule-top) */
  border-bottom: 1px solid var(--crimson);
  margin: 0 0 0;
  cursor: pointer;
  transition: background 320ms ease, padding 320ms ease;
}
.essay-feat:hover { background: var(--hover-fill); }
.essay-feat__poster {
  position: relative;
  aspect-ratio: 3 / 4;
}
.essay-feat__title {
  font-size: clamp(28px, 3vw, 40px);
  line-height: 1.15;
  font-weight: 500;
  margin: 10px 0 8px;
  letter-spacing: -0.005em;
  color: var(--charcoal);
  transition: color 320ms ease;
  max-width: 640px;
}
.essay-feat:hover .essay-feat__title { color: var(--crimson); }
.essay-feat__lead {
  font-size: 15px;
  line-height: 1.85;
  color: var(--charcoal-soft);
  max-width: 580px;
  margin: 0;
}
.essay-feat__meta {
  font-size: 10px;
  letter-spacing: 0.2em;
  color: var(--ghost-2);
  text-transform: uppercase;
  text-align: right;
  display: flex;
  flex-direction: column;
  gap: 8px;
  white-space: nowrap;
}

.essay-row {
  display: grid;
  grid-template-columns: 64px 1fr 140px 22px;
  gap: 24px;
  height: 168px;   /* 7 cells — fixed so the rule lands on the grid */
  box-sizing: border-box;
  overflow: hidden;
  padding: 18px 0;
  border-bottom: 1px solid var(--rule);
  cursor: pointer;
  align-items: start;
  transition: background 240ms ease, padding 240ms ease;
}
.essay-row:hover { background: var(--hover-fill); padding-left: 8px; padding-right: 8px; }
.essay-row__num {
  font-size: 11px;
  letter-spacing: 0.16em;
  color: var(--ghost-2);
  padding-top: 4px;
}
.essay-row__body {
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 0;
}
.essay-row__title {
  font-size: 22px;
  line-height: 1.2;
  color: var(--charcoal);
  font-weight: 500;
  letter-spacing: -0.005em;
  transition: color 220ms ease;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow: hidden;
}
.essay-row:hover .essay-row__title { color: var(--crimson); }
.essay-row__sub {
  font-family: var(--f-mono);
  font-size: 14px;
  color: var(--ghost-2);
  letter-spacing: 0.005em;
}
.essay-row__lead {
  margin-top: 6px;
  font-size: 14px;
  line-height: 1.75;
  color: var(--charcoal-soft);
  max-width: 640px;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow: hidden;
}
.essay-row__meta {
  display: flex;
  flex-direction: column;
  gap: 4px;
  font-size: 10px;
  letter-spacing: 0.16em;
  color: var(--ghost-2);
  text-transform: uppercase;
  text-align: right;
  padding-top: 6px;
}
.essay-row__arrow {
  font-family: var(--f-mono);
  font-size: 14px;
  color: var(--ghost-2);
  padding-top: 4px;
  transition: color 220ms ease, transform 220ms ease;
}
.essay-row:hover .essay-row__arrow { color: var(--crimson); transform: translateX(3px); }

/* ---------- Praxis Detail — 行 · Project Record ---------- */

.prx-opening {
  max-width: 780px;
  margin: 0 auto 72px;
  text-align: center;
}
.prx-opening__eyebrow {
  display: flex;
  justify-content: space-between;
  font-family: var(--f-mono);
  font-size: 10px;
  letter-spacing: 0.22em;
  color: var(--ghost-2);
  text-transform: uppercase;
  margin-bottom: 48px;
}
.prx-opening__statement {
  font-size: clamp(28px, 3.2vw, 42px);
  font-weight: 500;
  line-height: 1.55;
  color: var(--charcoal);
  margin: 0;
  letter-spacing: 0.005em;
}
.prx-opening__statement-en {
  font-size: 16px;
  line-height: 1.6;
  color: var(--ghost-2);
  margin: 22px 0 0;
  letter-spacing: 0.01em;
}

.prx-atmos { margin-bottom: 64px; }
.prx-atmos__frame {
  position: relative;
  aspect-ratio: 21 / 9;
  overflow: hidden;
}
.prx-atmos__caption {
  display: flex;
  justify-content: space-between;
  font-family: var(--f-mono);
  font-size: 10px;
  letter-spacing: 0.18em;
  color: var(--ghost-2);
  text-transform: uppercase;
  margin-top: 12px;
  padding: 0 2px;
}

.prx-meta-section {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 48px;
  align-items: start;
  margin-bottom: 72px;
  box-sizing: border-box;
  min-height: 264px;   /* 11 cells — top rule snapped, height on grid → bottom rule lands on grid too */
  padding: 24px 0;     /* 1 cell each side */
  border-top: 1px solid var(--rule);
  border-bottom: 1px solid var(--rule);
}
.prx-meta-grid {
  display: grid;
  grid-template-columns: 110px 1fr;
  row-gap: 12px;
  column-gap: 18px;
  font-size: 13px;
}
.prx-meta__label { font-size: 10px !important; padding-top: 2px; }
.prx-meta__value {
  color: var(--charcoal-soft);
  font-family: var(--f-mono);
  font-size: 12px;
  letter-spacing: 0.06em;
}
.prx-meta-cat { text-align: right; padding-top: 4px; }

.prx-title-block {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 36px;
  align-items: end;
  margin-bottom: 56px;
}

.prx-essay {
  display: grid;
  grid-template-columns: 120px minmax(0, 1fr);
  gap: 48px;
  margin-bottom: 80px;
  align-items: start;
}
.prx-essay__rail { position: sticky; top: 24px; }
.prx-essay__body { max-width: var(--reading-width); }
.prx-essay__para {
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  color: var(--charcoal);
  margin: 0 0 1.4em;
  letter-spacing: 0.005em;
  text-wrap: pretty;
}

.prx-drawings { margin-bottom: 80px; }
.prx-drawings__header {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  padding-bottom: 16px;
  border-bottom: 1px solid var(--rule);
  margin-bottom: 28px;
}
.prx-drawings__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
}
.prx-drawing-card {
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.prx-drawing-card__frame {
  position: relative;
  aspect-ratio: 4 / 3;
  overflow: hidden;
  background: var(--charcoal);
}
.prx-drawing-card__info { padding: 0 2px; }

.prx-diagram {
  margin-bottom: 80px;
  padding: 40px 0;
  border-top: 1px solid var(--rule);
}
.prx-diagram__header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
}
.prx-diagram__layers {
  display: flex;
  flex-direction: column;
  gap: 0;
}
.prx-diagram__layer {
  display: grid;
  grid-template-columns: 36px 1fr auto;
  gap: 16px;
  align-items: center;
  padding: 14px 0;
  border-bottom: 1px solid var(--rule);
}
.prx-diagram__layer:first-child { border-top: 1px solid var(--rule); }
.prx-diagram__layer-num {
  font-size: 10px;
  letter-spacing: 0.16em;
  color: var(--ghost-2);
}
.prx-diagram__layer-bar {
  height: 6px;
  border-radius: 0;
}
.prx-diagram__layer-label {
  font-family: var(--f-mono);
  font-size: 12px;
  letter-spacing: 0.1em;
  color: var(--charcoal-soft);
  white-space: nowrap;
}

.prx-colophon {
  text-align: center;
  padding: 32px 0 24px;
  border-top: 1px solid var(--rule);
}

.prx-foot-nav {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 24px;
  padding: 22px 0 0;
  border-top: 1px solid var(--rule);
  margin-top: 8px;
}
.prx-foot-nav__side {
  display: flex;
  flex-direction: column;
  gap: 4px;
  text-decoration: none;
  color: inherit;
  padding: 6px 0;
  transition: background 240ms ease;
}
.prx-foot-nav__side small {
  font-size: 10px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ghost-2);
}
.prx-foot-nav__side strong {
  font-family: var(--f-serif), var(--f-serif-kr);
  font-size: 18px;
  font-weight: 600;
  color: var(--charcoal);
  transition: color 220ms ease;
}
.prx-foot-nav__side:hover strong { color: var(--crimson); }
.prx-foot-nav__side--right { text-align: right; align-items: flex-end; }
.prx-foot-nav__center {
  display: flex;
  gap: 6px;
  align-items: center;
}

/* ---------- Issues — 號 · The Stacked Library ---------- */
.iss-wrap { max-width: 1180px; margin: 0 auto; }

.iss-head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 32px;
  padding-bottom: 24px;
  border-bottom: 1px solid var(--rule);
}
.iss-head__title {
  font-weight: 500;
  font-size: clamp(40px, 5.4vw, 70px);
  line-height: 0.9;
  margin: 0;
  letter-spacing: -0.02em;
}
.iss-head__cjk {
  font-family: var(--f-cjk);
  font-weight: var(--cjk-weight, 700);
  font-size: 0.32em;
  color: var(--crimson);
  vertical-align: super;
  margin-left: 0.18em;
  letter-spacing: 0.04em;
}
.iss-head__sub {
  max-width: 320px;
  text-align: right;
  font-size: 14px;
  line-height: 1.7;
  color: var(--charcoal-soft);
  margin: 0 0 6px;
}

.iss-layout {
  display: grid;
  grid-template-columns: 1.08fr 0.92fr;
  gap: 68px;
  margin-top: 48px;
  align-items: start;
}

/* ── Left: the stack of issues ── */
.iss-stack { display: flex; flex-direction: column; }
.iss-row {
  appearance: none;
  width: 100%;
  background: transparent;
  border: 0;
  border-top: 1px solid var(--rule);
  text-align: left;
  cursor: pointer;
  color: inherit;
  font-family: inherit;
  display: grid;
  grid-template-columns: minmax(78px, 0.62fr) auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 22px;
  min-height: var(--row-4);   /* 4 cells — large numeral row, rule on grid */
  box-sizing: border-box;
  padding: 12px 8px 12px 4px;
  position: relative;
  transition: padding-left 380ms cubic-bezier(.2,.7,.2,1), background 320ms ease;
}
.iss-row:last-child { border-bottom: 1px solid var(--rule); }
.iss-row:hover { background: var(--hover-fill); }
.iss-row.is-active { background: var(--active-fill); padding-left: 18px; }
.iss-row.is-active::before {
  content: '';
  position: absolute;
  left: 0; top: -1px; bottom: -1px;
  width: 2px;
  background: var(--crimson);
}
.iss-row__num {
  font-family: var(--f-num);
  font-variation-settings: 'opsz' var(--num-opsz), 'wght' var(--num-wght);
  font-weight: 500;
  font-size: clamp(38px, 4.6vw, 60px);
  line-height: 0.82;
  letter-spacing: -0.02em;
  color: var(--charcoal);
  transition: color 320ms ease;
}
.iss-row.is-active .iss-row__num { color: var(--crimson); }
.iss-row__cjk {
  font-family: var(--f-cjk);
  font-weight: var(--cjk-weight, 700);
  font-size: 19px;
  line-height: 1.04;
  letter-spacing: 0.04em;
  color: var(--charcoal-soft);
  display: flex;
  flex-direction: column;
}
.iss-row__title {
  font-size: clamp(17px, 1.5vw, 21px);
  line-height: 1.16;
  color: var(--charcoal);
  min-width: 0;
  word-break: keep-all;
}
.iss-row__title-sub {
  display: block;
  font-size: 12.5px;
  line-height: 1.3;
  color: var(--ghost-2);
  margin-top: 5px;
  font-style: normal;
}
.iss-row__date {
  font-size: 10px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ghost-2);
  white-space: nowrap;
  justify-self: end;
}
/* ── Right: the cover, soft fade on change ── */
.iss-cover { position: sticky; top: 36px; }
.iss-cover__frame {
  position: relative;
  aspect-ratio: 4 / 5;
  background: #EDE9E0;
  border: 1px solid var(--rule);
  overflow: hidden;
}
.iss-cover__art {
  position: absolute;
  inset: 0;
  animation: issFade 540ms ease both;
}
@keyframes issFade {
  from { opacity: 0; transform: scale(1.025); }
  to   { opacity: 1; transform: scale(1); }
}
.iss-cover__art .cine { width: 100%; height: 100%; aspect-ratio: auto; }

/* Issue-detail cover slot: force the Cine to fill the 4/5 book-cover frame
   (otherwise it falls back to its default 16/10 landscape ratio). */
.iss-detail-cover .cine,
.iss-detail-cover .poster { position: absolute; inset: 0; width: 100%; height: 100%; aspect-ratio: auto; }

.iss-cover__meta {
  margin-top: 24px;
  display: flex;
  flex-direction: column;
}
.iss-cover__eyebrow {
  font-family: var(--f-mono);
  font-size: 11px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--ghost-2);
}
.iss-cover__theme {
  font-size: clamp(24px, 2.5vw, 34px);
  line-height: 1.08;
  color: var(--charcoal);
  margin-top: 12px;
  word-break: keep-all;
}
.iss-cover__theme-sub {
  font-size: 15px;
  color: var(--charcoal-soft);
  margin-top: 8px;
}
.iss-cover__line {
  font-size: 10px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ghost-2);
  margin-top: 16px;
}
.iss-cover__open {
  align-self: flex-start;
  margin-top: 22px;
  font-size: 18px;
  color: var(--crimson);
  cursor: pointer;
  border-bottom: 1px solid transparent;
  transition: border-color 240ms ease;
}
.iss-cover__open:hover { border-bottom-color: var(--crimson); }

@media (max-width: 920px) {
  /* Tablet: show ONLY the list (no cover band on top). Clicking a row opens the
     issue-detail page, which presents the book cover at its fixed 4:5 ratio.
     The hover-preview cover only makes sense with a mouse on the wide layout. */
  .iss-layout { grid-template-columns: 1fr; gap: 36px; }
  .iss-cover { display: none; }
  .iss-head { align-items: baseline; }
}
@media (max-width: 560px) {
  .iss-row {
    grid-template-columns: minmax(58px, auto) auto 1fr;
    gap: 16px;
  }
  .iss-row__date { display: none; }
}

/* Issue-to-issue nav on detail page */
.issue-nav {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 18px;
  margin-top: 28px;
  padding-top: 20px;
  border-top: 1px solid var(--rule);
}
.issue-nav__side {
  display: flex;
  flex-direction: column;
  gap: 4px;
  text-decoration: none;
  color: inherit;
  padding: 6px 0;
}
.issue-nav__side small {
  font-size: 10px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ghost-2);
}
.issue-nav__side strong {
  font-family: var(--f-serif), var(--f-serif-kr);
  font-size: 17px;
  font-weight: 600;
  color: var(--charcoal);
  transition: color 220ms ease;
}
.issue-nav__side:hover strong { color: var(--crimson); }
.issue-nav__side--right { text-align: right; align-items: flex-end; }

@media (max-width: 720px) {
  .aisle-poster { width: 86%; }
  .aisle-poster--left,
  .aisle-poster--right { align-self: center; margin-left: 0; margin-right: 0; }
  .aisle-poster + .aisle-poster { margin-top: 44px; }
}

/* ============================================================
   Bold imagery — full-bleed right-edge heroes
   Used by: Essay reader, Praxis list, Praxis detail, Theory.
   A hero column pulls to the viewport's right edge (cancels the
   page's right padding) and pins full-height while content scrolls.
   ============================================================ */

/* shared right-edge bleed + pinned panel */
.bleed-hero {
  position: sticky;
  top: 24px;
  align-self: start;
  height: calc(100vh - 48px);
  margin-right: calc(-1 * var(--pad-x));
  overflow: hidden;
  background: #1A1816;
  border: 1px solid var(--rule);
  border-right: 0;
}
.bleed-hero .cine,
.bleed-hero .poster {
  width: 100%; height: 100%; aspect-ratio: auto;
}
.bleed-hero__credit {
  position: absolute;
  right: 18px; bottom: 16px;
  z-index: 3;
  font-family: var(--f-mono);
  font-size: 10px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: rgba(244, 241, 235, 0.82);
  text-shadow: 0 1px 5px rgba(0, 0, 0, 0.55);
}

/* ---- Essay reader: rail · body · hero ---- */
.art-grid {
  display: grid;
  grid-template-columns: 176px minmax(0, 1fr) clamp(300px, 33vw, 540px);
  gap: 48px;
  margin-top: 24px;
  align-items: start;
}
.art-grid > .article { max-width: none; }

/* ---- Praxis list: index · hero ---- */
.prx-list-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) clamp(380px, 48vw, 820px);
  gap: 56px;
  margin-top: 18px;
  align-items: start;
}
/* the project index list on the left of Praxis */
.prx-list { display: flex; flex-direction: column; }
.prx-list__group {
  font-family: var(--f-mono);
  font-size: 10px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--ghost-2);
  height: 48px;   /* 2 cells — keeps following rows phase-locked to the grid */
  box-sizing: border-box;
  display: flex;
  align-items: flex-end;
  padding: 0 0 10px;
}
.prx-list__group:first-child { height: 24px; padding-bottom: 6px; }   /* 1 cell */
.prx-list__row {
  appearance: none; background: transparent; border: 0;
  border-top: 1px solid var(--rule);
  width: 100%; text-align: left; cursor: pointer; color: inherit;
  display: grid;
  grid-template-columns: 64px minmax(0,1fr) auto;
  align-items: center;
  gap: 24px;
  min-height: var(--row-3);   /* 3 cells */
  box-sizing: border-box;
  padding: 12px 6px 12px 4px;
  position: relative;
  transition: padding-left 360ms cubic-bezier(.2,.7,.2,1), background 300ms ease;
}
.prx-list__row:last-child { border-bottom: 1px solid var(--rule); }
.prx-list__row:hover { background: var(--hover-fill); }
.prx-list__row.is-active { background: var(--active-fill); padding-left: 16px; }
.prx-list__row.is-active::before {
  content:''; position:absolute; left:0; top:-1px; bottom:-1px; width:2px; background: var(--crimson);
}
.prx-list__num {
  font-family: var(--f-num);
  font-variation-settings: 'opsz' var(--num-opsz), 'wght' var(--num-wght);
  font-weight: 500;
  font-size: 30px;
  line-height: 1;
  color: var(--charcoal);
  transition: color 300ms ease;
}
.prx-list__row.is-active .prx-list__num { color: var(--crimson); }
.prx-list__name {
  font-size: 19px;
  line-height: 1.2;
  color: var(--charcoal);
  word-break: keep-all;
}
.prx-list__loc {
  font-family: var(--f-mono);
  font-size: 10px;
  letter-spacing: 0.16em;
  color: var(--ghost-2);
  text-transform: uppercase;
  white-space: nowrap;
  justify-self: end;
}

/* Praxis detail atmosphere → full-bleed both edges */
.prx-atmos--bleed {
  margin-left: calc(-1 * var(--pad-x));
  margin-right: calc(-1 * var(--pad-x));
}
.prx-atmos--bleed .prx-atmos__frame {
  aspect-ratio: auto;
  height: clamp(440px, 76vh, 820px);
}
.prx-atmos--bleed .prx-atmos__caption {
  padding: 0 var(--pad-x);
}

/* Article hero reflow (articles stack early — tuned & approved) */
@media (max-width: 1080px) {
  .art-grid {
    grid-template-columns: minmax(0, 1fr);
    gap: 28px;
  }
  .bleed-hero {
    position: static;
    height: clamp(360px, 52vh, 560px);
    margin: 0 calc(-1 * var(--pad-x));
    border-left: 0;
    order: -1;
  }
}

/* ============================================================
   Theory & Praxis — hero pinned to the very top-right corner.
   The image escapes the page padding entirely (fixed to the
   viewport) and the content reserves space on the left.
   The TopBar floats above it; its right-side controls go light.
   ============================================================ */
.top { position: relative; z-index: 6; }

.bleed-hero--top {
  position: fixed;
  top: 0; right: 0;
  height: 100vh;
  margin: 0;
  border: 0;
  z-index: 1;
}

/* Praxis list: single content column, hero fixed on the right */
.prx-list-grid {
  display: block;
  padding-right: clamp(380px, 48vw, 820px);
}
.prx-list-grid .bleed-hero--top { width: clamp(380px, 48vw, 820px); }

/* Theory's right-bleed layout (.thy-lex) lives in theory.jsx; the shared
   .bleed-hero--top rules above + the stack reflow below cover its hero. */

/* light TopBar controls when they sit over the image */
.top--over-image .lang__opt { color: rgba(244, 241, 235, 0.7); }
.top--over-image .lang__opt.is-active { color: var(--on-dark); }
.top--over-image .lang__sep { color: rgba(244, 241, 235, 0.5); }
.top--over-image .menu-btn span { background: var(--on-dark); }

/* Tablet (761–1300) — the hovered project's hero fills the whole viewport
   BEHIND the index; the list text turns cream and rides on top. The images are
   always dark-toned (+scrim), so cream stays legible. Below 760 the dedicated
   mobile component takes over. */
@media (max-width: 1300px) and (min-width: 761px) {
  .bleed-hero--top.hero-reveal {
    position: fixed;
    inset: 0;
    width: auto !important;
    height: 100vh;
    height: 100dvh;        /* children (.cine/.poster) are height:100% — need an explicit height or they collapse to 0 */
    margin: 0;
    z-index: 0;            /* behind the index column */
    opacity: 1;           /* always present — the page has a living backdrop */
    overflow: hidden;
  }
  .prx-list-grid {
    display: block;
    padding-right: 0;
    position: relative;
    z-index: 1;           /* index sits above the fixed hero */
    max-width: 760px;     /* keep the list readable, not stretched over the photo */
  }
  /* the index column rides above the full-screen hero + scrim */
  .prx-list-grid > div { position: relative; z-index: 1; }
  /* the Praxis page title is a sibling BEFORE the list — without a z-index the
     positioned hero paints over it. Lift it above the backdrop and turn it
     cream so it reads at the very top. */
  .page--praxis .page-head { position: relative; z-index: 2; }
  .page--praxis .page-head__title { color: #F4F1EB; }
  .page--praxis .page-head .t-cjk { color: var(--crimson-dark, #E84A3D); }
  /* legibility scrim painted over the photo, inside the hero's own context */
  .bleed-hero--top.hero-reveal::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(100deg, rgba(20,18,16,0.84) 0%, rgba(20,18,16,0.66) 44%, rgba(20,18,16,0.34) 100%);
    pointer-events: none;
    z-index: 2;
  }
  /* cream-on-dark index */
  .prx-list-grid .prx-list__group { color: rgba(244, 241, 235, 0.55); border-color: rgba(244,241,235,0.18); }
  .prx-list-grid .prx-list__row { color: var(--on-dark, #F4F1EB); }
  .prx-list-grid .prx-list__name { color: #F4F1EB; }
  .prx-list-grid .prx-list__num { color: rgba(244, 241, 235, 0.65); }
  .prx-list-grid .prx-list__loc { color: rgba(244, 241, 235, 0.6); }
  .prx-list-grid .prx-list__row.is-active .prx-list__name,
  .prx-list-grid .prx-list__row:hover .prx-list__name { color: #fff; }
  .prx-list-grid .prx-eyebrow .mono { color: rgba(244, 241, 235, 0.55) !important; }
  /* the studio statement block under the index — keep its original dark text,
     no card; just drop it well below the list. */
  .prx-list-grid .prx-statement {
    margin-top: 112px !important;
    color: var(--charcoal-soft) !important;
  }
  .prx-list-grid .prx-statement .eyebrow--ghost { color: var(--ghost-2); }
  /* TopBar controls go light over the dark backdrop (header-ctrl is a sibling
     of .page, so reach it from the root via :has) */
  body:has(.page--praxis) .header-ctrl .lang__opt { color: rgba(244, 241, 235, 0.7); }
  body:has(.page--praxis) .header-ctrl .lang__opt.is-active { color: var(--on-dark); }
  body:has(.page--praxis) .header-ctrl .menu-btn span { background: var(--on-dark); }
}

/* ---------- Misc tweaks ---------- */
::selection { background: var(--crimson); color: var(--on-dark); }
/* Keyboard focus ring — token: 2px crimson, 2px offset (no rounded corners) */
:focus-visible {
  outline: var(--focus-ring) solid var(--crimson);
  outline-offset: var(--focus-offset);
}
a:focus:not(:focus-visible),
button:focus:not(:focus-visible) { outline: none; }
a { color: inherit; }
button { font: inherit; color: inherit; }
img { max-width: 100%; display: block; }


/* ============================================================
   Real uploaded images (Cine/Poster with src) get NO decorative
   overlay — no scanlines, no vertical "building" silhouettes,
   no vignette. Just the photo. (placed last to win the cascade)
   ============================================================ */
.cine--img::before,
.cine--img::after { content: none !important; background: none !important; }
.cine--img { background: transparent !important; }


/* ============================================================
   Home landing intro — self-drawing grid (lines meet at centre)
   ============================================================ */
.intro-grid {
  position: fixed;
  inset: 0;
  background: var(--paper);
  z-index: 0;
  pointer-events: none;
  overflow: hidden;
  opacity: 1;
  /* match the static body grid's content-aligned X shift for a seamless hand-off */
  transform: translateX(var(--grid-x, 0px));
  transition: opacity 1.2s ease;
}
.intro-grid.is-out { opacity: 0; }

.intro-grid .ig-v { position: absolute; top: 0; bottom: 0; width: 1px; }
.intro-grid .ig-h { position: absolute; left: 0; right: 0; height: 1px; }
.intro-grid .ig-seg { position: absolute; display: block; background: var(--grid); }

/* vertical line: top half grows down, bottom half grows up → meet at centre */
.intro-grid .ig-v .ig-seg { left: 0; width: 1px; height: 50%; transform: scaleY(0); }
.intro-grid .ig-v .ig-seg--t { top: 0;    transform-origin: top center;    animation-name: igGrowV; animation-fill-mode: both; }
.intro-grid .ig-v .ig-seg--b { bottom: 0; transform-origin: bottom center; animation-name: igGrowV; animation-fill-mode: both; }

/* horizontal line: left half grows right, right half grows left → meet at centre */
.intro-grid .ig-h .ig-seg { top: 0; height: 1px; width: 50%; transform: scaleX(0); }
.intro-grid .ig-h .ig-seg--l { left: 0;  transform-origin: left center;  animation-name: igGrowH; animation-fill-mode: both; }
.intro-grid .ig-h .ig-seg--r { right: 0; transform-origin: right center; animation-name: igGrowH; animation-fill-mode: both; }

@keyframes igGrowV { from { transform: scaleY(0); } to { transform: scaleY(1); } }
@keyframes igGrowH { from { transform: scaleX(0); } to { transform: scaleX(1); } }

@media (prefers-reduced-motion: reduce) {
  .intro-grid { display: none; }
}

/* ============================================================
   Hover-reveal hero (Issues · Theory · Praxis index pages)
   The preview image + title + CTA are hidden until a row is
   hovered/focused, then fade in; they fade back out on leave.
   Restrained, cinematic (300ms · ease-standard).
   ============================================================ */
.hero-reveal {
  opacity: 0;
  transition: opacity var(--transition-cinema) var(--ease-standard);
}
.hero-reveal.is-revealed { opacity: 1; }
/* inner wrapper is keyed by the active index → cross-fades on swap */
.hero-reveal__inner {
  animation: heroSwap var(--transition-cinema) var(--ease-standard) both;
}
@keyframes heroSwap {
  from { opacity: 0; }
  to   { opacity: 1; }
}

/* Theory: empty-state prompt overlays the centre column until a term is chosen */
.lex-empty {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  font-family: var(--f-mono);
  font-size: 11px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--ghost-2);
  opacity: 1;
  transition: opacity var(--transition-base) var(--ease-standard);
}
.lex-empty.is-hidden { opacity: 0; pointer-events: none; }
.lex-def { position: relative; min-height: clamp(320px, 50vh, 560px); }

/* Touch / no-hover devices: nothing to hover, so reveal everything and drop the prompt */
@media (hover: none) {
  .hero-reveal { opacity: 1; }
  .lex-empty { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  .hero-reveal,
  .hero-reveal__inner,
  .lex-empty { transition: none; animation: none; }
}