/* ============================================================
   JOVANA EDUCATION — 超圖解 · Illustrated · spread reader
   One topic = one full-bleed "two-page spread": a sentence title,
   a short lede, ONE dominant infographic carrying numbered call-out
   pins, a few secondary elements, and a one-line takeaway.

   Loaded alongside styles.css ONLY — deliberately NOT reader.css,
   whose .role-widget card treatment (bordered, padded, shadowed) is
   the opposite of full-bleed. The two rules worth keeping from it
   (.read-progress, .sr-only) are re-declared here as .ill-progress
   and .sr-only so this file is self-sufficient.

   Every colour goes through the existing theme tokens, so a spread
   recolours correctly under all four skins (editorial / cosmic /
   modern / ai) with no per-theme work.
   ============================================================ */

.ill-body{
  /* Spread-scoped aliases: "paper" is the panel a spread is printed on.
     Tuning the book's feel per theme is a 2-line override, not a new theme. */
  --paper:      var(--surface-2);
  --paper-edge: var(--line);

  /* ---- FIGURE PALETTE ----------------------------------------------------
     SVG paint attributes take a <color>, NOT a CSS gradient. Passing
     var(--grad-soft) — which is a linear-gradient() — is an invalid paint and
     silently renders BLACK, swallowing whatever is behind it. So figures must
     never reach for --grad/--grad-soft/--aura; they use these flat tokens,
     which are real colours in every theme. Six hues so a figure can colour-code
     meaning (the reference book is full-colour, not monochrome). */
  --fig-ink:   #16130F;   /* headline text in a figure */
  --fig-soft:  #4C463E;   /* body text */
  --fig-faint: #8E877C;   /* captions, units, axis labels */
  --fig-line:  #D9D2C6;   /* hairlines, axes, ticks */
  --fig-paper: #FFFFFF;   /* card / panel fill inside a figure */
  --fig-tint:  #EFF0FE;   /* soft accent wash (replaces --grad-soft) */
  --fig-tint2: #F5EEFC;
  --fig-c1: #3E52D9;  /* indigo  — the "signal" hue */
  --fig-c2: #8A5CEC;  /* violet  — the "control" hue */
  --fig-c3: #0E9F9B;  /* teal    — matter / material */
  --fig-c4: #E08A1E;  /* amber   — energy / heat */
  --fig-c5: #D8456B;  /* rose    — limits / warnings */
  --fig-c6: #2E9E58;  /* green   — the natural world */

  --ill-nav: 74px;   /* .nav-inner height (styles.css) */
  --ill-bar: 54px;   /* the sticky part bar below it */
  /* Full-bleed bands use 100vw, which includes the classic scrollbar. Scoped to this page
     only — global styles.css is untouched. */
  overflow-x:hidden;
}
html[data-theme="modern"] .ill-body{
  --fig-ink:#131620; --fig-soft:#41485C; --fig-faint:#7A8398; --fig-line:#DCE0E8;
  --fig-paper:#FFFFFF; --fig-tint:#EEF1FE; --fig-tint2:#F4EFFD;
}
html[data-theme="cosmic"] .ill-body,
html[data-theme="ai"] .ill-body{
  --fig-ink:#ECEAF4; --fig-soft:#B9B4CC; --fig-faint:#8A85A0; --fig-line:#3A3552;
  --fig-paper:#191630; --fig-tint:#241F42; --fig-tint2:#2A1F45;
  --fig-c1:#7E8CFF; --fig-c2:#B48CFF; --fig-c3:#3FD2CD; --fig-c4:#FFB454; --fig-c5:#FF7095; --fig-c6:#5BD68A;
}
html[data-theme="cosmic"] .ill-body,
html[data-theme="ai"] .ill-body{
  --paper:      color-mix(in srgb, var(--surface-2) 76%, transparent);
  --paper-edge: color-mix(in srgb, var(--line) 88%, transparent);
}

.sr-only{ position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0; }

.ill-progress{
  position:fixed; top:0; left:0; height:3px; width:0%;
  background:var(--grad); z-index:200; transition:width .12s linear;
  box-shadow:0 0 12px -2px color-mix(in srgb, var(--accent-1) 70%, transparent);
}

/* ============================================================
   The sticky part bar — progress indicator AND intra-part nav
   ============================================================ */
/* The nav is position:fixed and therefore out of flow — without this, the sticky part bar
   starts at y=0 and sits underneath it. */
.ill-body main{ padding-top:var(--ill-nav); }

.ill-bar{
  position:sticky; top:var(--ill-nav); z-index:60;
  height:var(--ill-bar);
  background:color-mix(in srgb, var(--bg) 88%, transparent);
  backdrop-filter:saturate(1.4) blur(14px);
  -webkit-backdrop-filter:saturate(1.4) blur(14px);
  border-bottom:1px solid var(--line-soft);
}
.ill-bar-in{ display:flex; align-items:center; gap:18px; height:100%; }

.ill-back{
  display:inline-flex; align-items:center; gap:6px; flex-shrink:0;
  font-size:13px; color:var(--ink-soft); text-decoration:none; transition:color .2s;
}
.ill-back svg{ width:14px; height:14px; }
.ill-back:hover{ color:var(--accent-ink); }

.ill-part{
  flex-shrink:0; min-width:0;
  font-size:12px; font-weight:700; letter-spacing:.11em; text-transform:uppercase;
  color:var(--accent-ink);
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis; max-width:38ch;
}
html[data-lang="zh"] .ill-part,
html[data-lang="zhHant"] .ill-part{ letter-spacing:.06em; font-size:12.5px; }

.ill-count{
  flex-shrink:0; margin-left:auto;
  font-family:var(--font-mono); font-size:12.5px; color:var(--ink-faint); letter-spacing:.04em;
}

/* the rail: one segment per topic in this Part. Clicking a segment jumps to it. */
.ill-rail{ display:flex; gap:4px; list-style:none; margin:0; padding:0; flex:1 1 auto; min-width:0; }
.ill-rail li{ flex:1 1 0; min-width:0; max-width:44px; }
.ill-rail a{
  display:block; height:5px; border-radius:3px;
  background:var(--line); text-decoration:none;
  transition:background .2s, transform .2s;
}
.ill-rail a:hover{ background:color-mix(in srgb, var(--accent-1) 55%, var(--line)); transform:scaleY(1.5); }
.ill-rail li.done a{ background:color-mix(in srgb, var(--accent-1) 40%, var(--line)); }
.ill-rail li.here a{ background:var(--grad); transform:scaleY(1.6); }

/* ============================================================
   The spread
   ============================================================ */
.ill-spread{ display:block; min-height:calc(100svh - var(--ill-nav) - var(--ill-bar)); background:var(--bg); }

/* ============================================================
   THE PLATE — full-bleed. The illustration IS the page.
   ============================================================ */
.ill-plate{
  position:relative; isolation:isolate; overflow:hidden;
  padding:clamp(30px,5vh,64px) 0 clamp(34px,5vh,58px);
  background:
    radial-gradient(80% 120% at 12% 0%,  color-mix(in srgb, var(--accent-1) 13%, transparent) 0%, transparent 58%),
    radial-gradient(70% 110% at 92% 12%, color-mix(in srgb, var(--accent-2) 14%, transparent) 0%, transparent 60%),
    linear-gradient(180deg, var(--bg-warm) 0%, var(--bg) 100%);
  border-bottom:1px solid var(--line);
}
/* a faint engraved grid, so the plate reads as printed stock rather than flat colour */
.ill-plate::before{
  content:""; position:absolute; inset:0; z-index:-1; pointer-events:none; opacity:.5;
  background-image:
    linear-gradient(to right, color-mix(in srgb, var(--ink) 5%, transparent) 1px, transparent 1px),
    linear-gradient(to bottom, color-mix(in srgb, var(--ink) 5%, transparent) 1px, transparent 1px);
  background-size:44px 44px;
  -webkit-mask-image:radial-gradient(90% 70% at 50% 40%, #000 0%, transparent 78%);
          mask-image:radial-gradient(90% 70% at 50% 40%, #000 0%, transparent 78%);
}
/* the plate number, set huge and ghosted — the book's folio, blown up */
.ill-ghost{
  position:absolute; z-index:-1; top:-.16em; right:2.5vw; pointer-events:none;
  font-family:var(--font-display); font-weight:700; font-size:clamp(180px,26vw,420px);
  line-height:.8; letter-spacing:-.04em;
  color:color-mix(in srgb, var(--accent-1) 9%, transparent);
}
.ill-plate-in{ position:relative; width:min(1360px,92vw); margin-inline:auto; }

.ill-head{ width:min(760px,100%); margin-bottom:clamp(22px,3.2vh,38px); }
.ill-n{
  font-family:var(--font-mono); font-size:13px; letter-spacing:.16em;
  color:var(--accent-ink); font-weight:600;
}
.ill-n::after{ content:""; display:block; width:34px; height:2px; border-radius:2px; background:var(--grad); margin-top:9px; }

.ill-title{
  font-family:var(--font-display); font-weight:600;
  font-size:clamp(30px,4.4vw,58px); line-height:1.08; letter-spacing:-.016em;
  color:var(--ink); margin:14px 0 0; max-width:24ch; text-wrap:balance;
}
html[data-lang="zh"] .ill-title,
html[data-lang="zhHant"] .ill-title{ line-height:1.26; letter-spacing:-.01em; max-width:20ch; font-weight:600; }

.ill-lede{
  font-size:clamp(15.5px,1.15vw,17.5px); line-height:1.76; color:var(--ink-soft);
  margin:16px 0 0; max-width:62ch;
}
.ill-lede strong{ color:var(--ink); font-weight:600; }

/* glossary deep-links (same treatment as the guides reader, so the two feel like one site) */
.gterm{
  color:var(--accent-ink); text-decoration:none;
  border-bottom:1px solid color-mix(in srgb, var(--accent-1) 35%, transparent);
  transition:border-color .2s, background .2s; padding-bottom:1px;
}
.gterm:hover{ border-bottom-color:var(--accent-1); background:var(--grad-soft); }
.g-imath{ font-family:var(--font-mono); }

/* ---------- below the plate: legend + supporting material, full width ---------- */
.ill-below{ width:min(1360px,92vw); margin-inline:auto; padding:clamp(28px,4vh,46px) 0 0; }

/* ---------- the takeaway: a full-bleed band, the last thing you read ---------- */
.ill-takewrap{
  margin-top:clamp(30px,4.4vh,52px);
  padding:clamp(28px,4.4vh,52px) 0;
  background:
    radial-gradient(60% 160% at 50% 120%, color-mix(in srgb, var(--accent-2) 15%, transparent) 0%, transparent 70%),
    var(--bg-warm);
  border-top:1px solid var(--line); border-bottom:1px solid var(--line);
}
.ill-takeaway{
  position:relative; width:min(940px,88vw); margin-inline:auto; padding:0 0 0 46px;
  font-family:var(--font-display); font-size:clamp(21px,2.5vw,34px); line-height:1.34;
  color:var(--ink); font-weight:600; text-wrap:balance;
}
html[data-lang="zh"] .ill-takeaway,
html[data-lang="zhHant"] .ill-takeaway{ line-height:1.5; font-size:clamp(19px,2.2vw,30px); }
.ill-takeaway::before{
  content:"◆"; position:absolute; left:0; top:.42em;
  font-size:.44em; color:var(--accent-1); font-family:var(--font-sans);
}

/* ============================================================
   The dominant infographic + its call-out pins
   ============================================================ */

/* The CARD chrome lives on the wrapper, NOT on .ill-canvas. That matters: call-out pins are
   positioned as a percentage of .ill-canvas, while the SVG is laid out inside .ill-mount. If
   .ill-canvas carried padding, the two boxes would differ in aspect ratio, the SVG would
   letterbox inside it, and every pin would sit slightly off the feature it points at. Keeping
   .ill-canvas a pure, unpadded aspect box makes pin % === figure viewBox % exactly. */
.ill-figwrap{
  margin:0; display:flex; flex-direction:column; gap:16px;
  background:var(--paper); border:1px solid var(--paper-edge);
  border-radius:24px; box-shadow:var(--shadow-lg);
  padding:clamp(16px,2.2vw,34px);
}

.ill-canvas{
  position:relative; width:100%;
  aspect-ratio:var(--vbw,1000) / var(--vbh,640);
}
.ill-mount{ position:absolute; inset:0; }
.ill-mount svg{ display:block; width:100%; height:100%; }
/* no-JS / failed-widget fallback: the alt text stands in for the picture */
.ill-mount:empty::after{
  content:attr(data-alt); display:block; padding:14% 10%;
  font-size:14px; line-height:1.7; color:var(--ink-faint); font-style:italic; text-align:center;
}

.ill-fig-cap{
  font-family:var(--font-display); font-style:italic; font-size:14px;
  color:var(--ink-faint); text-align:center; margin:0;
}

/* ---------- pins ---------- */
.ill-pins{ position:absolute; inset:0; list-style:none; margin:0; padding:0; pointer-events:none; }
.ill-pin{ position:absolute; left:calc(var(--px) * 1%); top:calc(var(--py) * 1%); pointer-events:auto; }

.ill-dot{
  position:absolute; left:0; top:0; transform:translate(-50%,-50%);
  width:23px; height:23px; border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  background:var(--grad); color:#fff;
  font-family:var(--font-sans); font-size:12px; font-weight:700; line-height:1;
  box-shadow:0 0 0 3px var(--paper), 0 2px 8px -2px color-mix(in srgb, var(--accent-1) 60%, transparent);
  z-index:2;
}

/* The floating card is a HOVER affordance, not the content. Permanently-visible cards
   cover the illustration they are annotating — and their width is in CSS pixels, so they
   do not shrink with the figure and cannot be kept clear of each other at every viewport.
   The numbered legend below the figure is the real, always-readable presentation; this
   just lets a mouse user read a call-out without leaving the picture. */
.ill-card{
  position:absolute; width:min(178px, 40vw);
  padding:10px 12px; border-radius:11px;
  background:var(--paper); border:1px solid var(--accent-1);
  box-shadow:var(--shadow-lg);
  z-index:4; opacity:0; visibility:hidden; pointer-events:none;
  transition:opacity .16s ease, visibility .16s;
}
.ill-pin:hover .ill-card, .ill-pin:focus-within .ill-card{ opacity:1; visibility:visible; }
.ill-pin-right .ill-card{ left:21px;  top:50%; transform:translateY(-50%); }
.ill-pin-left  .ill-card{ right:21px; top:50%; transform:translateY(-50%); }
.ill-pin-top   .ill-card{ left:50%;   bottom:21px; transform:translateX(-50%); }
.ill-pin-bottom .ill-card{ left:50%;  top:21px;    transform:translateX(-50%); }

.ill-pin-l{ display:block; font-size:12.5px; font-weight:700; color:var(--ink); margin-bottom:3px; letter-spacing:.01em; }
.ill-pin-t{ margin:0; font-size:12.5px; line-height:1.55; color:var(--ink-soft); }
.ill-pin-t .gterm{ border-bottom-color:color-mix(in srgb, var(--accent-1) 45%, transparent); }

/* The legend: the call-out text as a numbered list at full page width, always visible.
   This is what a crawler, a screen reader, a no-JS reader and a phone all get. */
.ill-pinlist{
  list-style:none; margin:0 0 clamp(24px,3.4vh,40px); padding:0;
  display:grid; gap:18px clamp(24px,3vw,48px);
  grid-template-columns:repeat(auto-fit, minmax(268px, 1fr));
}
.ill-pinlist li{
  display:grid; grid-template-columns:26px 1fr; gap:12px; align-items:start;
  font-size:14px; line-height:1.68;
  padding-top:14px; border-top:2px solid color-mix(in srgb, var(--accent-1) 26%, transparent);
}
.ill-pinlist .n{
  width:25px; height:25px; border-radius:50%; background:var(--grad); color:#fff;
  display:flex; align-items:center; justify-content:center;
  font-size:12.5px; font-weight:700;
}
.ill-pinlist b{ display:block; color:var(--ink); font-weight:700; font-size:14.5px; margin-bottom:2px; }
.ill-pinlist span.t{ color:var(--ink-soft); }

/* ============================================================
   Secondary elements (the closed block vocabulary)
   ============================================================ */
/* Supporting material reads as an editorial row across the page, not a stack in a narrow gutter. */
.ill-extras{
  display:grid; gap:clamp(16px,2vw,26px);
  grid-template-columns:repeat(auto-fit, minmax(300px, 1fr));
  align-items:start;
}

/* — the big number — */
.ill-stat{
  padding:16px 20px; border-radius:14px;
  background:var(--paper); border:1px solid var(--paper-edge);
}
.ill-stat-v{
  font-family:var(--font-display); font-weight:600; line-height:1;
  font-size:clamp(30px,3.6vw,44px); color:var(--accent-ink);
}
.ill-stat-v .katex{ font-size:.92em; }
.ill-stat-l{ margin-top:7px; font-size:13.5px; font-weight:600; color:var(--ink); line-height:1.45; }
.ill-stat-n{ margin:6px 0 0; font-size:12.5px; line-height:1.6; color:var(--ink-faint); }

/* — the history band — */
.ill-timeline{ list-style:none; margin:0; padding:0; display:flex; gap:0; position:relative; }
.ill-timeline::before{
  content:""; position:absolute; left:0; right:0; top:8px; height:2px;
  background:linear-gradient(90deg, var(--line), color-mix(in srgb, var(--accent-1) 45%, var(--line)));
  border-radius:2px;
}
.ill-timeline li{ flex:1 1 0; min-width:0; position:relative; padding-top:22px; }
.ill-timeline li::before{
  content:""; position:absolute; left:0; top:4px; width:10px; height:10px; border-radius:50%;
  background:var(--accent-1); box-shadow:0 0 0 3px var(--bg);
}
.ill-tl-y{ display:block; font-family:var(--font-mono); font-size:12.5px; font-weight:600; color:var(--accent-ink); }
.ill-tl-l{ display:block; font-size:12px; line-height:1.45; color:var(--ink-soft); margin-top:2px; padding-right:8px; }
.ill-tl-cap{ margin:10px 0 0; font-size:12.5px; font-style:italic; color:var(--ink-faint); }

/* — the analogy band: the book's signature move — */
.ill-compare{
  display:grid; grid-template-columns:1fr auto 1fr; gap:12px; align-items:center;
  padding:16px 18px; border-radius:14px;
  background:var(--paper); border:1px dashed color-mix(in srgb, var(--accent-2) 34%, var(--line));
}
.ill-cmp-side b{ display:block; font-size:12.5px; font-weight:700; color:var(--ink); margin-bottom:4px; }
.ill-cmp-side p{ margin:0; font-size:13px; line-height:1.6; color:var(--ink-soft); }
.ill-cmp-vs{
  font-family:var(--font-display); font-size:20px; color:var(--accent-2);
  padding:0 2px; align-self:center;
}

/* — the margin aside — */
.ill-note{
  display:flex; gap:11px; padding:14px 16px; border-radius:13px;
  background:var(--bg-warm); border:1px solid var(--line-soft);
}
.ill-note-k{
  flex-shrink:0; font-size:10px; font-weight:700; letter-spacing:.11em;
  color:var(--accent-ink); padding-top:3px;
}
.ill-note p{ margin:0; font-size:13.5px; line-height:1.68; color:var(--ink-soft); }
.ill-note-careful{ border-color:color-mix(in srgb, var(--accent-2) 30%, var(--line)); }
.ill-note-why{ background:var(--grad-soft); border-color:color-mix(in srgb, var(--accent-1) 20%, transparent); }

/* — the real photograph — */
.ill-photo{ margin:0; }
.ill-photo img{
  display:block; width:100%; height:auto; border-radius:14px;
  border:1px solid var(--paper-edge); background:var(--bg-warm);
  filter:var(--mono-img, none);
}
.ill-photo-cap{ margin:9px 2px 0; font-size:13px; line-height:1.6; color:var(--ink-soft); }
.ill-credit{
  margin:5px 2px 0; font-size:11.5px; line-height:1.55; color:var(--ink-faint);
}
.ill-credit a{ color:var(--ink-faint); text-decoration:underline; text-underline-offset:2px; }
.ill-credit a:hover{ color:var(--accent-ink); }
.ill-credit .k{ font-weight:600; letter-spacing:.04em; }

/* ============================================================
   Prev / next — crosses Part boundaries, like turning the page
   ============================================================ */
.ill-prevnext{
  width:min(1360px,92vw); margin-inline:auto;
  display:grid; grid-template-columns:1fr 1fr; gap:14px;
  padding:clamp(26px,4vh,40px) 0; border-top:1px solid var(--line);
}
.ill-pn{
  display:flex; flex-direction:column; gap:5px; padding:17px 20px;
  border:1px solid var(--line); border-radius:14px; text-decoration:none; color:inherit;
  transition:border-color .2s, transform .2s, box-shadow .2s;
}
.ill-pn:hover{ border-color:var(--accent-1); transform:translateY(-2px); box-shadow:var(--shadow-sm); }
.ill-pn.next{ text-align:right; }
.ill-pn-k{ font-size:11.5px; letter-spacing:.08em; text-transform:uppercase; color:var(--ink-faint); }
.ill-pn-t{ font-family:var(--font-display); font-weight:600; font-size:17px; line-height:1.3; color:var(--ink); }
.ill-pn-spacer{ display:block; }

.nav-link[aria-current="page"]{ color:var(--ink); }
.nav-link[aria-current="page"]::after{ content:""; display:block; height:2px; border-radius:2px; background:var(--grad); margin-top:3px; }

/* ============================================================
   Responsive — below 900px the spread stacks and the floating
   cards become a numbered list under the figure
   ============================================================ */
@media (max-width:1080px){
  .ill-card{ width:min(178px, 40vw); padding:9px 11px; }
  .ill-pin-l, .ill-pin-t{ font-size:11.5px; }
}
@media (max-width:900px){
  .ill-spread{ scroll-snap-type:y proximity; }   /* proximity, never mandatory — mandatory traps tall pins */
  .ill-panel{ scroll-snap-align:start; }
  .ill-ghost{ font-size:clamp(140px,34vw,240px); right:-2vw; opacity:.7; }
  .ill-figwrap{ padding:12px; border-radius:18px; }
  .ill-takeaway{ padding-left:34px; }

  /* A hover card cannot be opened by a finger, and would cover a 360px-wide figure anyway.
     The legend below the figure is the whole presentation here. */
  .ill-pin .ill-card{ display:none; }
  .ill-dot{ width:20px; height:20px; font-size:11px; }
  .ill-pinlist{ display:flex; flex-direction:column; gap:11px; }

  .ill-timeline{ flex-direction:column; gap:12px; }
  .ill-timeline::before{ left:4px; right:auto; top:0; bottom:0; width:2px; height:auto; background:var(--line); }
  .ill-timeline li{ padding-top:0; padding-left:22px; }
  .ill-timeline li::before{ top:3px; }
  .ill-tl-l{ padding-right:0; }
}
@media (max-width:700px){
  .ill-bar-in{ gap:12px; }
  .ill-rail{ display:none; }
  .ill-part{ max-width:22ch; font-size:11px; }
  .ill-compare{ grid-template-columns:1fr; gap:10px; }
  .ill-cmp-vs{ justify-self:start; }
}
@media (max-width:560px){
  .ill-prevnext{ grid-template-columns:1fr; }
  .ill-back span{ display:none; }
}

@media (prefers-reduced-motion: reduce){
  .ill-spread{ scroll-snap-type:none; }
  .ill-progress, .ill-rail a, .ill-pn, .gterm{ transition:none; }
  .ill-rail a:hover, .ill-rail li.here a{ transform:none; }
}

/* ============================================================
   /illustrated — the index page: each volume presented as a book
   ============================================================ */
.illx-hero{ position:relative; padding:118px 0 clamp(30px,5vh,52px); border-bottom:1px solid var(--line); overflow:hidden; }
.illx-hero .aura{ position:absolute; inset:0; background:var(--aura); opacity:.55; pointer-events:none; }
.illx-hero .wrap{ position:relative; z-index:1; }
.illx-eyebrow{ font-size:12.5px; font-weight:700; letter-spacing:.14em; text-transform:uppercase; color:var(--accent-ink); }
.illx-h1{
  font-family:var(--font-display); font-weight:600;
  font-size:clamp(34px,5vw,60px); line-height:1.08; letter-spacing:-.015em;
  margin:14px 0 16px; max-width:18ch; text-wrap:balance;
}
html[data-lang="zh"] .illx-h1, html[data-lang="zhHant"] .illx-h1{ line-height:1.24; letter-spacing:0; }
.illx-lede{ max-width:62ch; }
.illx-cross{ margin-top:20px; font-size:13.5px; color:var(--ink-faint); }
.illx-cross a{ color:var(--accent-ink); text-decoration:none; border-bottom:1px solid color-mix(in srgb,var(--accent-1) 30%,transparent); }
.illx-cross a:hover{ border-bottom-color:var(--accent-1); }
.illx-empty{ padding:60px 0; color:var(--ink-faint); font-style:italic; }

.illx-vol{ padding:clamp(34px,5vh,58px) 0; }
.illx-cover{
  padding:clamp(26px,3.4vw,40px); border-radius:20px;
  background:var(--paper); border:1px solid var(--paper-edge); box-shadow:var(--shadow-sm);
  margin-bottom:clamp(26px,4vh,42px);
}
.illx-vol-t{ font-family:var(--font-display); font-weight:600; font-size:clamp(26px,3vw,38px); line-height:1.15; margin:0; }
.illx-vol-s{ margin:8px 0 0; font-size:15px; color:var(--accent-ink); font-style:italic; }
.illx-vol-b{ margin:16px 0 0; max-width:64ch; font-size:15.5px; line-height:1.72; color:var(--ink-soft); }
.illx-vol-meta{ display:flex; flex-wrap:wrap; gap:8px 20px; margin-top:18px; font-size:12.5px; color:var(--ink-faint); }
.illx-vol-meta .illx-aud{ font-style:italic; }
.illx-start{ margin-top:22px; }

.illx-part{ margin-bottom:clamp(24px,3.4vh,38px); }
.illx-part-head{ display:flex; flex-wrap:wrap; align-items:baseline; gap:8px 14px; padding-bottom:12px; border-bottom:1px solid var(--line); }
.illx-part-n{ font-family:var(--font-mono); font-size:12px; letter-spacing:.14em; color:var(--accent-ink); font-weight:600; }
.illx-part-t{ font-family:var(--font-display); font-weight:600; font-size:clamp(20px,2.2vw,27px); line-height:1.2; margin:0; }
.illx-part-l{ flex-basis:100%; margin:2px 0 0; font-size:13.5px; line-height:1.65; color:var(--ink-faint); max-width:70ch; }
.illx-soon{ font-size:10.5px; font-weight:700; letter-spacing:.11em; text-transform:uppercase; color:var(--ink-faint); border:1px solid var(--line); border-radius:999px; padding:3px 10px; }
.illx-part-soon .illx-part-t{ color:var(--ink-faint); }

.illx-list{ list-style:none; margin:16px 0 0; padding:0; display:grid; gap:10px; grid-template-columns:repeat(auto-fill,minmax(310px,1fr)); }
.illx-card{
  display:grid; grid-template-columns:auto 1fr; gap:14px; align-items:start;
  padding:16px 18px; border:1px solid var(--line); border-radius:14px;
  text-decoration:none; color:inherit; height:100%;
  transition:border-color .2s, transform .2s, box-shadow .2s, background .2s;
}
.illx-card:hover{ border-color:var(--accent-1); background:var(--paper); transform:translateY(-2px); box-shadow:var(--shadow-sm); }
.illx-card-n{ font-family:var(--font-mono); font-size:12.5px; font-weight:600; color:var(--accent-ink); padding-top:2px; }
.illx-card-t{ font-size:14.5px; line-height:1.5; color:var(--ink); }
html[data-lang="zh"] .illx-card-t, html[data-lang="zhHant"] .illx-card-t{ line-height:1.62; }

.illx-sources{ margin-top:8px; padding-top:20px; border-top:1px solid var(--line-soft); }
.illx-sources h4{ font-size:11px; font-weight:700; letter-spacing:.14em; text-transform:uppercase; color:var(--ink-faint); margin:0 0 10px; }
.illx-sources ul{ margin:0; padding-left:18px; }
.illx-sources li{ font-size:12.5px; line-height:1.7; }
.illx-sources a{ color:var(--ink-soft); text-decoration:underline; text-underline-offset:2px; }
.illx-sources a:hover{ color:var(--accent-ink); }

/* ============================================================
   Print — a spread should print as a spread
   ============================================================ */
@media print{
  .nav, .ill-bar, .ill-prevnext, .footer, .m-sheet, .ill-progress{ display:none !important; }
  .ill-body{ overflow:visible; }
  .ill-spread{ min-height:auto; background:none; padding:0; }
  .ill-plate{ padding:0; background:none; border:0; }
  .ill-plate-in, .ill-below{ width:100%; }
  .ill-ghost, .ill-plate::before{ display:none; }
  .ill-takewrap{ background:none; padding:16px 0 0; }
  .ill-pin .ill-card{ display:block; }
  .ill-canvas{ box-shadow:none; break-inside:avoid; }
  .ill-takeaway{ background:none; border:1px solid #999; }
}