/* ============================================================================
   FOW TRAVEL — F1R2 · THE GLOBAL ATLAS

   HERO      discover by exploring   WORLD → CONTINENT → COUNTRY → CITY BOOK

   One object family runs through it: the leather-bound MAP BOOK. In the
   hero it is a lit 3-D object (assets/hero3d.js); in the console it is the
   same book built in CSS. Same leather, same deboss, same spine logic.

   Tokens are inherited from the accepted DS-1R sheet unchanged.
   ============================================================================ */

/* ---------------------------------------------------------------- §0 RESET */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
body, h1, h2, h3, h4, p, figure, figcaption, dl, dd, ul, ol { margin: 0; padding: 0; }
ul, ol { list-style: none; }
img, svg { display: block; max-width: 100%; }
button { background: none; border: 0; cursor: pointer; font: inherit; color: inherit; }
input { font: inherit; color: inherit; }
a { color: inherit; }
:focus-visible { outline: var(--focus); outline-offset: var(--focus-off); }
[hidden] { display: none !important; }
:target { scroll-margin-top: 6rem; }
html { scroll-behavior: smooth; }

/* ---------------------------------------------------------------- §1 TOKENS */
:root {
  --paper:#F2F0EA; --paper-sunk:#E8E5DC; --paper-raised:#FAF9F5;
  --ink:#17181C; --ink-2:#45474D; --ink-3:#565961; --ink-4:#5F6167;
  --rule:#D4D0C4; --rule-strong:#B4AF9F; --rule-hair:#E0DDD3;
  --decide:#B23A1E; --decide-soft:#F4E3DC;
  --evidence:#2F565B; --evidence-soft:#E0E8E7;
  --sample:#5B4E86; --sample-soft:#E6E2F0;
  --stale:#8A5220;

  --meridian-h: 235; --meridian-c: 0.085;
  --meridian:      oklch(0.46 min(var(--meridian-c), 0.0783) var(--meridian-h));
  --meridian-lift: oklch(0.72 min(var(--meridian-c), 0.0851) var(--meridian-h));
  --meridian-wash: oklch(0.94 min(var(--meridian-c), 0.0445) var(--meridian-h));

  --stock:#F0ECE0; --stock-2:#E6E0D1; --stock-3:#D8D1BD;
  --stock-edge:#C0B79E; --stock-edge-d:#9C9378;
  --stock-ink:#191B21; --stock-ink-2:#4C4E54; --stock-ink-3:#5F6167;
  --stock-hair:#CBC4B0;

  --font-display:  "Sitka Banner", "Sitka Display", "Sitka Heading", "Iowan Old Style",
                   Constantia, "Palatino Linotype", Palatino, Georgia, serif;
  --font-utility:  "Inter", "Segoe UI Variable Text", "Segoe UI", -apple-system,
                   BlinkMacSystemFont, "Helvetica Neue", Arial, sans-serif;
  --font-data:     "Cascadia Mono", "SF Mono", "SFMono-Regular", "JetBrains Mono",
                   "Roboto Mono", ui-monospace, Consolas, "Liberation Mono", monospace;
  --cjk-ko-display:"Noto Serif KR", "Nanum Myeongjo", Batang, serif;
  --cjk-ja-display:"Noto Serif JP", "Yu Mincho", YuMincho, "Hiragino Mincho ProN", "Noto Serif KR", Batang, serif;
  --cjk-ko:        "Pretendard", "Malgun Gothic", "Apple SD Gothic Neo", "Noto Sans KR", sans-serif;
  --cjk-ja:        "Yu Gothic", "Hiragino Kaku Gothic ProN", "Noto Sans JP", Meiryo, sans-serif;

  --t-monument: clamp(2.4rem, 1rem + 3.3vw, 3.9rem);
  --t-clock:    clamp(2.4rem, 1rem + 3.6vw, 4.25rem);
  --t-display:  clamp(1.75rem, 1.1rem + 2.1vw, 2.85rem);
  --t-head:     clamp(1.4rem, 1.05rem + 1.3vw, 1.95rem);
  --t-body: 1rem; --t-small: .875rem; --t-data: .8125rem; --t-label: .6875rem; --t-micro: .625rem;

  --shell: 1280px;
  --gutter: clamp(1.125rem, .4rem + 2.4vw, 3.5rem);

  --m-micro:130ms; --m-struct:320ms; --m-narr:560ms; --m-object:900ms; --m-return:340ms;
  --ease: cubic-bezier(.2,.7,.25,1);
  --ease-out-strong: cubic-bezier(.23,1,.32,1);
  --ease-object: cubic-bezier(.16,.86,.22,1);

  --focus: 2px solid var(--decide);
  --focus-off: 3px;

  --grain: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='160' height='160'><filter id='g'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/><feColorMatrix type='saturate' values='0'/></filter><rect width='160' height='160' filter='url(%23g)'/></svg>");
  /* leather: a coarser, pebbled noise than paper grain */
  /* the same skin the 3-D volumes are bound from — Poly Haven "Leather White",
     scanned, CC0 — so a book in the collection and a book on the globe are
     plainly the same object. See V2/tools/lookdev/bake_hide.py.
     The tile is 300 mm of leather and a 148 px cover is a 210 mm board, so
     211 px is 1:1 physical scale. It is seamless, so it wraps. */
  /* set to a blob URL by v2.js, from the single fetch the whole page shares —
     the 3-D layer needs the same bytes as a WebGL texture, and one skin should
     be one request. The no-JS rule below restores the file URL. */
  --leather-hide: none;
  --hide-size: 211px auto;
  color-scheme: light;
}
[data-material="world"] {
  --paper:#0B0E16; --paper-sunk:#070910; --paper-raised:#141926;
  --ink:#EDE9DE; --ink-2:#B6B4AC; --ink-3:#97968F; --ink-4:#7E7D77;
  --rule:#23293A; --rule-strong:#39415A; --rule-hair:#171C29;
  --decide:#F0674A; --decide-soft:#35201B;
  --evidence:#7FB3B8; --evidence-soft:#16292B;
  --sample:#A79BD8; --sample-soft:#221E33;
  --stale:#D08A4A;
  --meridian:      oklch(0.70 min(var(--meridian-c), 0.1191) var(--meridian-h));
  --meridian-lift: oklch(0.84 min(var(--meridian-c), 0.1055) var(--meridian-h));
  --meridian-wash: oklch(0.24 min(var(--meridian-c), 0.0411) var(--meridian-h));
  color-scheme: dark;
  background: var(--paper); color: var(--ink);
}
[data-material="stock"] {
  --paper:#F2F0EA; --paper-sunk:#E8E5DC; --paper-raised:#FAF9F5;
  --ink:#17181C; --ink-2:#45474D; --ink-3:#565961; --ink-4:#5F6167;
  --rule:#D4D0C4; --rule-strong:#B4AF9F; --rule-hair:#E0DDD3;
  --decide:#B23A1E; --decide-soft:#F4E3DC;
  --evidence:#2F565B; --evidence-soft:#E0E8E7;
  --sample:#5B4E86; --sample-soft:#E6E2F0;
  --stale:#8A5220;
  --meridian:      oklch(0.46 min(var(--meridian-c), 0.0783) var(--meridian-h));
  --meridian-lift: oklch(0.72 min(var(--meridian-c), 0.0851) var(--meridian-h));
  --meridian-wash: oklch(0.94 min(var(--meridian-c), 0.0445) var(--meridian-h));
  color-scheme: light;
  background: var(--paper); color: var(--ink);
}
/* geographic signal — hue derived (DS-1R). Used for anchors, rails, edge glow.
   NOT for identity: identity is the authored leather (see .mb --leather). */
[data-place="tokyo"]     { --meridian-h:235; --meridian-c:.085; }
[data-place="osaka"]     { --meridian-h:226; --meridian-c:.085; }
[data-place="seoul"]     { --meridian-h:209; --meridian-c:.080; }
[data-place="taipei"]    { --meridian-h:213; --meridian-c:.115; }
[data-place="hongkong"]  { --meridian-h:198; --meridian-c:.120; }
[data-place="macau"]     { --meridian-h:197; --meridian-c:.115; }
[data-place="hochiminh"] { --meridian-h:198; --meridian-c:.130; }
[data-place="hanoi"]     { --meridian-h:197; --meridian-c:.125; }
[data-place="bangkok"]   { --meridian-h:186; --meridian-c:.130; }

/* ---------------------------------------------------------------- §2 TYPE */
body {
  font-family: var(--font-utility); font-size: var(--t-body); line-height: 1.62;
  background: var(--paper); color: var(--ink); overflow-x: hidden;
  font-feature-settings: "kern" 1; text-rendering: optimizeLegibility;
}
html[lang="ko"] body { font-family: var(--cjk-ko), var(--font-utility); }
html[lang="ja"] body { font-family: var(--cjk-ja), var(--font-utility); }
.monument, .display, .plate__nm, .band__t {
  font-family: var(--font-display); font-weight: 400; letter-spacing: -0.012em;
}
html[lang="ko"] .monument, html[lang="ko"] .display, html[lang="ko"] .lede, html[lang="ko"] .body,
html[lang="ko"] .band__t, html[lang="ko"] .band__d, html[lang="ko"] .note, html[lang="ko"] .colophon,
html[lang="ko"] .readout__sub { word-break: keep-all; overflow-wrap: break-word; }
html[lang="ko"] .monument, html[lang="ko"] .display, html[lang="ko"] .plate__nm {
  font-family: var(--cjk-ko-display); font-weight: 700; letter-spacing: -0.028em;
}
html[lang="ja"] .monument, html[lang="ja"] .display, html[lang="ja"] .plate__nm {
  font-family: var(--cjk-ja-display); font-weight: 700; letter-spacing: -0.02em;
}
.u-label {
  font-family: var(--font-data); font-size: var(--t-label); letter-spacing: .16em;
  text-transform: uppercase; color: var(--ink-3); white-space: nowrap;
}
html[lang="ko"] .u-label, html[lang="ja"] .u-label { letter-spacing: .08em; }
.u-label--ink { color: var(--ink); }
.u-small { font-size: var(--t-small); color: var(--ink-2); line-height: 1.6; }
.vh { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0; }
.skip { position: absolute; left: -9999px; top: 0; z-index: 99; background: var(--stock); color: var(--stock-ink); padding: .75rem 1.25rem; font-size: var(--t-small); }
.skip:focus { left: 1rem; top: 1rem; }
.shell { max-width: var(--shell); margin-inline: auto; padding-inline: var(--gutter); }
.body { font-size: var(--t-body); color: var(--ink-2); max-width: 62ch; }
.note { font-size: var(--t-small); color: var(--ink-3); max-width: 64ch; border-top: 1px solid var(--rule); padding-top: .75rem; line-height: 1.55; }
.js-only { display: none; } html:not(.no-js) .js-only { display: inline; }
/* with no JavaScript nothing hands the covers a blob URL, so take the file */
html.no-js { --leather-hide: url("tex/hide_lum.webp"); }

/* ---------------------------------------------------------------- §3 CHIPS */
.ev {
  display: inline-flex; align-items: center; gap: .4em;
  font-family: var(--font-data); font-size: var(--t-micro); letter-spacing: .14em; text-transform: uppercase;
  padding: .22em .6em; border: 1px solid currentColor; white-space: nowrap;
}
.ev::before { content: ""; width: .45em; height: .45em; border: 1px solid currentColor; }
.ev--sample { color: var(--sample); } .ev--sample::before { border-radius: 50%; }
.ev--illus { color: var(--stale); } .ev--illus::before { transform: rotate(45deg); }
.ev--pub { color: var(--evidence); } .ev--pub::before { background: currentColor; }
.ev--none { color: var(--ink-4); } .ev--none::before { background: linear-gradient(135deg, transparent 45%, currentColor 45% 55%, transparent 55%); }
.ev--soon { color: var(--stale); } .ev--soon::before { background: linear-gradient(90deg, currentColor 50%, transparent 50%); }

/* ---------------------------------------------------------------- §4 BRAND SLOT
   the header is in fow_instrument.css (Hero visual repair) */
.brand { font-family: var(--font-data); font-size: .8125rem; letter-spacing: .22em; text-decoration: none; font-weight: 700; }
/* the brand slot: the footprint the FOW mark will take at the Logo gate is
   reserved here, so applying it cannot move the navigation */
.brand[data-slot="brand"] { display: inline-block; min-width: 9rem; line-height: 2rem; }
.brand span { color: var(--ink-3); font-weight: 400; }

/* ============================================================================
   §5  THE HERO — THE LIVING ATLAS INSTRUMENT

   One instrument, four zones that answer to the same geographic state:
     LEFT    authored hero typography + the addressed locale
     CENTRE  the globe (visual gravity; the canvas is full-bleed, the stage
             rectangle only tells the camera where the centre of gravity is)
     RIGHT   the Atlas Finder
     BOTTOM  the Atlas Journey Rail
   ============================================================================ */
.hero {
  position: relative; isolation: isolate; min-height: 100svh;
  display: flex; flex-direction: column;
  padding-block: 5.1rem .9rem; overflow: hidden;
  /* the field: a deep authored night carrying the addressed object's atmosphere */
  --atm-h: 240; --atm-c: .03; --atm-x: 52%; --atm-y: 44%; --atm-k: 1;
  --void: 5, 6, 12;
  background:
    radial-gradient(66% 58% at var(--atm-x) var(--atm-y),
      oklch(.30 calc(var(--atm-c) * 1.4) var(--atm-h) / calc(.58 * var(--atm-k))) 0%,
      oklch(.22 var(--atm-c) var(--atm-h) / calc(.30 * var(--atm-k))) 42%, rgba(0,0,0,0) 74%),
    radial-gradient(60% 40% at 44% 110%, oklch(.58 .11 44 / .26) 0%, oklch(.50 .09 40 / .09) 45%, rgba(0,0,0,0) 100%),
    linear-gradient(180deg, #05060C 0%, #080B14 42%, #0B0F1A 78%, #070911 100%);
  transition: background 900ms var(--ease);
}
.hero__gl { position: absolute; inset: 0; z-index: 0; }
/* THE FIRST FRAME (Hero closeout). The canvas and its printed labels stay
   transparent until hero3d.js has dressed, compiled and drawn the world
   (html[data-hero-ready]); then they arrive together with the entrance. */
.hero__gl, .hero__labels { transition: opacity 900ms var(--ease); }
html[data-hero="3d"]:not([data-hero-ready]) .hero__gl,
html[data-hero="3d"]:not([data-hero-ready]) .hero__labels { opacity: 0; }
.hero__gl canvas { display: block; width: 100%; height: 100%; touch-action: none; }

/* the scrim: not a panel and not a cut — a vignette in the field's own ink that
   gives the type its ground while the instrument stays whole underneath */
.hero__scrim {
  position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background:
    linear-gradient(90deg,  rgba(var(--void),.97) 0%, rgba(var(--void),.88) 13%, rgba(var(--void),.46) 25%, rgba(var(--void),.13) 33%, rgba(var(--void),0) 41%),
    linear-gradient(270deg, rgba(var(--void),.96) 0%, rgba(var(--void),.84) 12%, rgba(var(--void),.40) 22%, rgba(var(--void),0) 31%),
    linear-gradient(0deg,   rgba(var(--void),.94) 0%, rgba(var(--void),.74) 9%,  rgba(var(--void),.22) 18%, rgba(var(--void),0) 26%),
    linear-gradient(180deg, rgba(var(--void),.80) 0%, rgba(var(--void),.28) 7%,  rgba(var(--void),0) 15%);
}
/* Hero world-field final repair v0.1.2 · at desktop widths the outer strips
   of the side columns (pure sky: the globe never reaches them) keep ~72% of
   their ink, so the world field reads around the type instead of ending in
   black; from 17.4% / 13.2% inward, over the globe's limb, every stop is the
   original. The field itself stands down behind the type's own boxes
   (hero3d.js §1.5 wfTextSafe), which is what holds the labels' contrast.
   The top and bottom bands, and every narrower layout, are unchanged. */
@media (min-width: 1025px) {
  .hero__scrim {
    background:
      linear-gradient(90deg,  rgba(var(--void),.45) 0%, rgba(var(--void),.48) 11%, rgba(var(--void),.726) 17.4%, rgba(var(--void),.46) 25%, rgba(var(--void),.13) 33%, rgba(var(--void),0) 41%),
      linear-gradient(270deg, rgba(var(--void),.45) 0%, rgba(var(--void),.48) 9%, rgba(var(--void),.787) 13.2%, rgba(var(--void),.40) 22%, rgba(var(--void),0) 31%),
      linear-gradient(0deg,   rgba(var(--void),.94) 0%, rgba(var(--void),.74) 9%,  rgba(var(--void),.22) 18%, rgba(var(--void),0) 26%),
      linear-gradient(180deg, rgba(var(--void),.80) 0%, rgba(var(--void),.28) 7%,  rgba(var(--void),0) 15%);
  }
}
/* deeper in, the sheet fills the frame — the vignette answers so the argument keeps
   its ground. A composited opacity layer: scaling the gradient alphas instead
   repaints the whole viewport on every frame of the transition. */
.hero__scrim::after {
  content: ""; position: absolute; inset: 0; opacity: 0; will-change: opacity;
  transition: opacity 760ms var(--ease);
  /* the sheet now fills the stage — a continent has to be zoomed far enough in
     that a small country is a real target — so the field's own ink has to carry
     the argument, the console and the gathering against a much brighter plate */
  background:
    linear-gradient(90deg,  rgba(var(--void),.95) 0%, rgba(var(--void),.84) 17%, rgba(var(--void),.58) 26%, rgba(var(--void),.2) 34%, rgba(var(--void),0) 41%),
    linear-gradient(270deg, rgba(var(--void),.93) 0%, rgba(var(--void),.74) 13%, rgba(var(--void),.36) 22%, rgba(var(--void),0) 31%),
    linear-gradient(180deg, rgba(var(--void),.80) 0%, rgba(var(--void),.36) 6%, rgba(var(--void),0) 13%),
    linear-gradient(0deg,   rgba(var(--void),.92) 0%, rgba(var(--void),.82) 7%, rgba(var(--void),.55) 14%, rgba(var(--void),.22) 20%, rgba(var(--void),0) 27%);
}
.hero[data-level="continent"] .hero__scrim::after { opacity: 1; }
.hero[data-level="country"] .hero__scrim::after { opacity: 1; }
.hero__grain { position: absolute; inset: 0; z-index: 2; pointer-events: none; background-image: var(--grain); background-size: 160px 160px; opacity: .05; mix-blend-mode: overlay; }
.hero__labels { position: absolute; inset: 0; z-index: 3; pointer-events: none; overflow: hidden; }

.hero__in {
  position: relative; z-index: 4; width: 100%; flex: 1;
  max-width: var(--shell-hero, 1560px); margin-inline: auto; padding-inline: var(--gutter);
  display: grid; gap: 1rem 1.75rem;
  grid-template-columns: minmax(0, 25rem) minmax(0, 1fr) minmax(0, 18.5rem);
  grid-template-rows: minmax(0, 1fr) auto;
  grid-template-areas: "head stage finder" "rail rail rail";
  pointer-events: none;                        /* the canvas below gets the pointer */
}
.hero__in > * { pointer-events: auto; }
.hero__stage { grid-area: stage; pointer-events: none; min-height: 0; }
.hero__head { grid-area: head; align-self: center; max-width: 26rem; }

/* §5.0 THE VOLUME SPINE — the atlas you are standing in, printed on its edge */
.spine-rail {
  position: absolute; left: .35rem; top: 0; bottom: 0; z-index: 5; display: none;
  align-items: center; justify-content: center; width: 1.5rem;
  border-inline: 1px solid var(--rule-hair); pointer-events: none;
  background: linear-gradient(90deg, rgba(255,255,255,.014), rgba(255,255,255,.045), rgba(255,255,255,.008));
}
.spine-rail span {
  writing-mode: vertical-rl; transform: rotate(180deg);
  font-family: var(--font-data); font-size: var(--t-micro); letter-spacing: .34em; text-transform: uppercase;
  color: var(--ink-4); white-space: nowrap; transition: color var(--m-narr) var(--ease);
}
@media (min-width: 1280px) { .spine-rail { display: flex; } }

/* §5.1 THE AUTHORED TYPOGRAPHY */
.eyebrow { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem 1.1rem; padding-bottom: .8rem; margin-bottom: 1.25rem; border-bottom: 1px solid var(--rule); }
.monument { font-size: clamp(2.15rem, .8rem + 2.8vw, 3.25rem); line-height: 1.04; margin-bottom: 1rem; letter-spacing: -.03em; }
.monument__l { display: block; overflow: hidden; padding-bottom: .06em; }
.monument__l > span { display: block; will-change: transform; }
/* the headline's entrance is the Optical Type Acquisition (fow_hero_instrument.css §3),
   started from the Hero readiness seam (v2.js §4b), no longer a page-load rise */
/* the console and the gathering settle into the same spatial state as the
   instrument: an editorial orientation, not a loading screen */
html:not(.no-js) .finder, html:not(.no-js) .rail { opacity: 0; }
/* they settle with the world, not on a clock: a fixed delay put them on screen
   before the globe on any load slower than the author's */
html[data-hero-ready] .finder, html[data-hero="flat"] .finder, html[data-hero-late] .finder {
  animation: settle 760ms var(--ease-out-strong) 160ms forwards;
}
html[data-hero-ready] .rail, html[data-hero="flat"] .rail, html[data-hero-late] .rail {
  animation: settle 760ms var(--ease-out-strong) 320ms forwards;
}
@keyframes settle { from { opacity: 0; transform: translate3d(0, 10px, 0); } to { opacity: 1; transform: none; } }
html[lang="ja"] .monument { font-size: clamp(1.95rem, .75rem + 2.65vw, 3.05rem); }
.monument em { display: block; font-style: normal; color: oklch(.84 min(var(--meridian-c), .062) var(--meridian-h)); transition: color var(--m-narr) var(--ease); }
.lede { font-size: clamp(.9375rem, .9rem + .2vw, 1.0625rem); line-height: 1.6; color: var(--ink-2); max-width: 32ch; }

/* the addressed locale — the type answers to the same state as the globe */
.locus {
  display: flex; align-items: baseline; gap: .55rem; margin-top: 1.25rem;
  padding-top: .7rem; border-top: 1px solid var(--rule-hair);
  font-family: var(--font-data); font-size: var(--t-data); letter-spacing: .06em;
}
.locus__mk { align-self: center; width: .5rem; height: .5rem; flex: none; border: 1px solid var(--meridian-lift); border-radius: 50%; position: relative; transition: border-color var(--m-narr) var(--ease); }
.locus__mk::after { content: ""; position: absolute; inset: 1.5px; border-radius: 50%; background: var(--meridian-lift); opacity: 0; transition: opacity var(--m-struct) var(--ease); }
.locus[data-mode="country"] .locus__mk::after, .locus[data-mode="city"] .locus__mk::after { opacity: 1; }
.locus__n { font-weight: 400; color: var(--ink); letter-spacing: .12em; text-transform: uppercase; white-space: nowrap; }
html[lang="ko"] .locus__n, html[lang="ja"] .locus__n { letter-spacing: .06em; text-transform: none; }
.locus__c { color: var(--ink-4); font-variant-numeric: tabular-nums; letter-spacing: .04em; margin-left: auto; white-space: nowrap; }
.hero__hint { margin-top: .85rem; } .hero__hint .u-label { color: var(--ink-4); white-space: normal; line-height: 1.7; }
/* deeper in, a lit plate can pass under the argument's small type: a halo in
   the field's own ink keeps it legible, as a printed map lifts a place name */
.hero[data-level="continent"] .hero__head :is(.eyebrow, .locus, .hero__hint),
.hero[data-level="country"] .hero__head :is(.eyebrow, .locus, .hero__hint) { text-shadow: 0 0 10px rgba(var(--void), .95), 0 0 3px rgba(var(--void), .9); }

/* §5.2 THE ATLAS FINDER — the instrument's console */
.finder {
  grid-area: finder; align-self: center; justify-self: stretch;
  display: flex; flex-direction: column; gap: .9rem;
  padding-left: 1.15rem; border-left: 1px solid var(--rule);
}
.finder__k { display: flex; align-items: center; justify-content: space-between; gap: .8rem; }
.finder__slash { font-family: var(--font-data); font-size: var(--t-micro); color: var(--ink-4); border: 1px solid var(--rule-strong); padding: .06rem .38rem; line-height: 1.5; }
.search { position: relative; }
.search__field { display: flex; align-items: center; gap: .55rem; border: 1px solid var(--rule-strong); background: rgba(255,255,255,.028); padding-inline: .65rem; transition: border-color var(--m-micro) var(--ease), background var(--m-micro) var(--ease), box-shadow var(--m-micro) var(--ease); }
.search__mk { width: 1rem; height: 1rem; flex: none; fill: none; stroke: var(--ink-4); stroke-width: 1.4; transition: stroke var(--m-struct) var(--ease), transform var(--m-struct) var(--ease); }
.search__mk .fill { fill: var(--ink-4); stroke: none; }
.search__in {
  flex: 1; min-width: 0; background: none; border: 0; color: var(--ink);
  padding: .72rem 0; font-size: var(--t-small); font-family: var(--font-data); letter-spacing: .04em;
  -webkit-appearance: none; appearance: none; border-radius: 0;
}
.search__in::placeholder { color: var(--ink-4); letter-spacing: .1em; }
.search__in:focus { outline: none; }
.search__field:focus-within { border-color: var(--meridian-lift); background: rgba(255,255,255,.055); box-shadow: 0 0 0 2px oklch(.7 .1 var(--meridian-h) / .22); }
.search__field:focus-within .search__mk { stroke: var(--meridian-lift); transform: rotate(45deg); }
.search__field:focus-within .search__mk .fill { fill: var(--meridian-lift); }
.search__in::-webkit-search-cancel-button { -webkit-appearance: none; }
.search__out {
  position: absolute; left: 0; right: 0; top: calc(100% + 5px); z-index: 30;
  background: #0B0F1B; border: 1px solid var(--rule-strong); box-shadow: 0 26px 54px -20px rgba(0,0,0,.92);
  max-height: 19rem; overflow: auto;
}
.search__out li button, .search__out li a {
  display: grid; grid-template-columns: minmax(0,1fr) auto; gap: .6rem; width: 100%; text-align: left;
  padding: .58rem .8rem; text-decoration: none; font-size: var(--t-small); border-bottom: 1px solid var(--rule-hair);
  transition: background var(--m-micro) var(--ease), padding-left var(--m-micro) var(--ease);
}
.search__out b { font-weight: 600; } .search__out i { font-style: normal; color: var(--ink-3); margin-left: .45em; font-size: var(--t-data); }
.search__out .u-label { font-size: var(--t-micro); align-self: center; }
.search__out li[aria-selected="true"] > *, .search__out li > *:hover { background: rgba(255,255,255,.07); padding-left: 1.05rem; }
.search__out .search__none { padding: .7rem .8rem; color: var(--ink-3); font-size: var(--t-small); }

/* §5.3 THE READOUT — what the instrument is addressed to, printed */
.readout {
  border-top: 1px solid var(--rule); padding-top: .85rem;
  /* Reserved COUNTRY/CONTINENT/WORLD detail footprint: content height
     currently ranges from ~98px (a no-collection continent/country) up to
     ~137px (the WORLD state's longer summary line, tallest real navigation
     content, measured across 1280-1920 desktop widths — the finder column
     itself is a fixed 296px track so wrapping doesn't vary further with
     viewport). Without a floor here, OPEN NOW / the book below recentre
     with every state change, since .finder is a centred flex column. This
     does not cover the separate city-hover preview mode (clock/sun rows,
     up to ~249px) — that is a different, transient interaction, and
     reserving space for it here would leave the common states looking
     hollow; it is a candidate for its own follow-up if it also needs
     stabilising. */
  min-height: 8.75rem;
}
.readout__k { display: flex; align-items: baseline; gap: .7rem; flex-wrap: wrap; margin-bottom: .5rem; }
.readout__name { line-height: 1.08; }
.readout__name b { font-family: var(--cjk-ko-display), var(--font-display); font-weight: 700; font-size: clamp(1.35rem, 1.15rem + .55vw, 1.8rem); letter-spacing: -.025em; }
.readout__name i { font-style: normal; font-family: var(--cjk-ja-display), var(--font-display); font-size: .72em; color: var(--ink-3); margin-left: .45em; }
.readout__name i:empty { display: none; }
.readout__clock { display: flex; align-items: baseline; gap: .5rem; margin-top: .35rem; }
.readout__clock time { font-family: var(--font-data); font-size: clamp(2rem, 1.2rem + 1.9vw, 3rem); line-height: .98; font-variant-numeric: tabular-nums; letter-spacing: -.035em; color: var(--ink); }
.readout__tz { font-family: var(--font-data); font-size: var(--t-data); color: var(--ink-3); letter-spacing: .08em; }
.readout__sun { display: flex; align-items: center; gap: .5rem; margin-top: .35rem; font-size: var(--t-small); color: var(--ink-2); }
.readout__sun b { font-weight: 600; color: var(--ink); }
.readout__sun span { font-family: var(--font-data); font-size: var(--t-data); color: var(--ink-3); }
.sunmark { width: .8rem; height: .8rem; border: 1px solid currentColor; border-radius: 50%; color: var(--ink-3); flex: none; }
.sunmark[data-up="1"] { background: var(--meridian-lift); border-color: var(--meridian-lift); }
.sunmark[data-up="0"] { background: linear-gradient(90deg, var(--ink-4) 50%, transparent 50%); }
.readout__sub { margin-top: .4rem; font-family: var(--font-data); font-size: var(--t-data); color: var(--ink-3); letter-spacing: .02em; line-height: 1.5; }
.readout__sub:empty { display: none; }
.readout__list { display: flex; flex-wrap: wrap; gap: .3rem .8rem; margin-top: .5rem; font-family: var(--font-data); font-size: var(--t-data); color: var(--ink-2); letter-spacing: .06em; text-transform: uppercase; }
.readout__list:empty { display: none; }
.readout__list li[data-pub="1"] { color: var(--evidence); }
.readout__preview { display: flex; gap: .4rem; flex-wrap: wrap; margin-top: .7rem; padding-top: .6rem; border-top: 1px solid var(--rule-hair); }
.readout__preview li { font-family: var(--font-data); font-size: var(--t-micro); letter-spacing: .12em; text-transform: uppercase; color: var(--ink-2); border: 1px solid var(--rule-strong); padding: .28em .55em; }
.readout[data-mode="city"] .readout__preview li { color: var(--ink); border-color: var(--meridian-lift); }

/* the console's volumes (Seoul first; the published one can be taken in hand) */
.finder__now { border-top: 1px solid var(--rule); padding-top: .8rem; }
.finder__now > .u-label { color: var(--ink-4); display: block; margin-bottom: .6rem; }
.cvol { --w: 56px; --hgt: 77px; --th: 11px; display: flex; align-items: center; gap: .85rem; text-decoration: none; color: inherit;
  width: 100%; text-align: left; padding: .2rem 0; -webkit-tap-highlight-color: transparent; }
/* THE ACTION LINE. Not a button drawn on the console: a foil-struck mark and a
   verb under the volume's name, with a hairline that draws out under the hand
   (the same struck-glyph grammar the Mapbook cover uses). Pressing takes the
   volume down into the scene; nothing navigates. */
.nowvol__act {
  position: relative; display: inline-flex; align-items: center; gap: .42rem; align-self: flex-start;
  margin-top: .32rem; padding-bottom: .22rem;
  font-family: var(--font-data); font-size: var(--t-micro); letter-spacing: .18em; text-transform: uppercase;
  color: var(--ink-3); transition: color var(--m-struct) var(--ease);
}
html[lang="ko"] .nowvol__act, html[lang="ja"] .nowvol__act { letter-spacing: .08em; font-size: var(--t-label); }
.nowvol__act::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 1px;
  background: var(--foil); opacity: .45; transform: scaleX(.22); transform-origin: left center;
  transition: transform var(--m-struct) var(--ease-out-strong), opacity var(--m-struct) var(--ease);
}
.nowvol__g { width: 14px; height: 14px; flex: none; fill: none; stroke: currentColor; stroke-width: 1.15; stroke-linecap: round; stroke-linejoin: round;
  transition: transform var(--m-struct) var(--ease-out-strong); }
.cvol .mb__obj { transition: transform var(--m-micro) var(--ease); }
.cvol:focus-visible { outline: none; }
.cvol:focus-visible .mb__cover { box-shadow: inset 0 0 0 2px var(--decide), 2px 4px 10px rgba(0,0,0,.35); }
.cvol:focus-visible .nowvol__act, .cvol:active .nowvol__act { color: var(--foil); }
.cvol:focus-visible .nowvol__act::after, .cvol:active .nowvol__act::after { transform: none; opacity: 1; }
.cvol:active .mb__obj { transform: scale(.965); }
.cvol:active .nowvol__g { transform: translateY(-2px); }
.cvol .mb__obj { flex: none; }
.cvol .mb__cover { padding: 5px 5px 4px; }
.cvol .mb__cover::before { inset: 3px; }
.cvol .mb__rule { font-size: 4px; letter-spacing: .1em; margin-top: 1px; padding-inline: 1px; }
.cvol .mb__title b, html[lang="ko"] .cvol .mb__title b, html[lang="ja"] .cvol .mb__title b { font-size: 10px; letter-spacing: -.01em; }
.cvol .mb__foot { font-size: 3.6px; padding-inline: 1px; margin-bottom: 1px; }
.cvol .mb__seal { width: 6px; height: 6px; }
.cvol .mb__seal::before { inset: 1.5px; }
.cvol .mb__spine span { font-size: 4.5px; letter-spacing: .12em; }
.cvol .mb__obj::after { height: 12px; right: 7px; }
.nowvol__t { display: flex; flex-direction: column; gap: .18rem; min-width: 0; }
.nowvol__t b { font-family: var(--cjk-ko-display), var(--font-display); font-weight: 700; font-size: 1.0625rem; letter-spacing: -.015em; transition: color var(--m-micro) var(--ease); }
.nowvol__now { font-family: var(--font-data); font-size: var(--t-data); color: var(--ink-3); font-variant-numeric: tabular-nums; }
.nowvol__t .ev { align-self: flex-start; margin-top: .1rem; }
@media (hover: hover) and (pointer: fine) { .cvol:hover .mb__cover, .cvol:hover .mb__pages { transform: rotateY(-8deg) translateZ(calc(var(--th) / 2 + 7px)) translateY(-3px); }
  .cvol:hover .mb__pages { transform: rotateY(-8deg) translateZ(calc(var(--th) / 2 + 5px)) translateX(4px) translateY(-3px); }
  .cvol:hover .mb__spine { transform: rotateY(-98deg) translateZ(calc(var(--th) / 2)) translateY(-3px); }
  .cvol:hover .nowvol__t b { color: var(--meridian-lift); }
  .cvol:hover .nowvol__act { color: var(--foil); }
  .cvol:hover .nowvol__act::after { transform: none; opacity: 1; }
  .cvol:hover .nowvol__g { transform: translateY(-2px); } }
/* deep in a country the readout is already full; the console does not repeat itself */
.hero[data-level="country"] .finder__now { display: none; }
.hero__hint .u-label { max-width: 23rem; }

/* §5.4 THE ATLAS JOURNEY RAIL — an authored quick-navigation system.
   Hierarchy is scale, spacing, marker, folio rhythm and spine — never colour alone. */
.rail { grid-area: rail; align-self: end; min-width: 0; }
.rail__head { display: flex; align-items: center; justify-content: space-between; gap: 1rem; flex-wrap: wrap; padding-bottom: .5rem; margin-bottom: .6rem; border-bottom: 1px solid var(--rule); }
.rail__k { color: var(--ink-4); }
.crumb { display: flex; align-items: center; gap: .7rem; flex-wrap: wrap; font-family: var(--font-data); font-size: var(--t-label); letter-spacing: .14em; text-transform: uppercase; }
html[lang="ko"] .crumb, html[lang="ja"] .crumb { letter-spacing: .06em; }
.crumb__path { display: flex; align-items: center; gap: .5rem; }
.crumb__path li + li::before { content: "›"; color: var(--ink-4); margin-right: .5rem; }
.crumb__path button { color: var(--ink-3); padding: .28rem 0; border-bottom: 1px solid transparent; }
.crumb__path button[aria-current="location"] { color: var(--ink); border-bottom-color: var(--meridian-lift); }
.crumb__back, .crumb__reset { color: var(--ink-2); border: 1px solid var(--rule-strong); padding: .3rem .7rem; transition: color var(--m-micro), border-color var(--m-micro), background var(--m-micro); }
.crumb__back:hover, .crumb__reset:hover { color: var(--ink); border-color: var(--ink-3); background: rgba(255,255,255,.05); }

.rail__row { display: flex; align-items: stretch; overflow-x: auto; scrollbar-width: none; scroll-snap-type: x proximity; padding-block: .15rem .35rem;
  /* the gathering runs past the frame as the atlas grows: the edge fades rather
     than cutting a name in half, so the overflow reads as bound, not broken */
  mask-image: linear-gradient(90deg, #000 0, #000 calc(100% - 4.5rem), rgba(0,0,0,.15) 100%);
  -webkit-mask-image: linear-gradient(90deg, #000 0, #000 calc(100% - 4.5rem), rgba(0,0,0,.15) 100%); }
.rail__row[data-end="1"] { mask-image: none; -webkit-mask-image: none; }
.rail__row::-webkit-scrollbar { display: none; }
.folio { flex: 0 0 auto; scroll-snap-align: start; padding: .1rem .85rem .1rem; border-left: 1px solid var(--rule-hair); position: relative; }
.folio:first-child { padding-left: 0; border-left: 0; }
.folio::before {                                  /* the head-band: a folio is a bound gathering */
  content: ""; position: absolute; left: 1.15rem; right: .5rem; top: -.16rem; height: 1px;
  background: var(--meridian-lift); opacity: 0; transition: opacity var(--m-struct) var(--ease);
}
.folio:first-child::before { left: 0; }
.folio.is-on::before { opacity: .9; }
.folio__hit { display: block; text-decoration: none; color: inherit; }
.folio__t { display: flex; align-items: baseline; gap: .45rem; }
.folio__t b { font-family: var(--font-display); font-weight: 700; font-size: 1.0625rem; line-height: 1.2; letter-spacing: -.02em; color: var(--ink-2); transition: color var(--m-micro) var(--ease); }
.folio__t i { font-style: normal; font-family: var(--font-data); font-size: var(--t-micro); letter-spacing: .16em; text-transform: uppercase; color: var(--ink-4); }
html[lang="ja"] .folio__t i, .folio__t i[lang] { letter-spacing: .04em; text-transform: none; font-family: var(--cjk-ja-display), var(--font-display); font-size: var(--t-data); }
.folio__c { display: block; margin-top: .12rem; font-family: var(--font-data); font-size: var(--t-micro); letter-spacing: .1em; color: var(--ink-4); font-variant-numeric: tabular-nums; white-space: nowrap; }
.folio__hit:hover .folio__t b, .folio.is-on .folio__t b { color: var(--ink); }
html[lang="ko"] .folio__t b, html[lang="ja"] .folio__t b { font-family: var(--cjk-ko-display), var(--font-display); }

/* the plotted country mark — the same device the globe uses */
.mk { display: flex; align-items: center; gap: .34rem; height: .95rem; margin-bottom: .28rem; }
.mk svg { width: .88rem; height: .88rem; flex: none; fill: none; stroke: var(--rule-strong); stroke-width: 1.15;
  transform: scale(.82); transform-origin: 50% 50%; transition: stroke var(--m-struct) var(--ease), transform var(--m-struct) var(--ease-out-strong); }
.mk svg .fill { fill: var(--rule-strong); stroke: none; transition: fill var(--m-struct) var(--ease); }
.mk em { font-style: normal; font-family: var(--font-data); font-size: var(--t-micro); letter-spacing: .22em; text-indent: .22em; color: var(--ink-4); }
.folio.is-on .mk svg, .folio__hit:hover .mk svg { transform: scale(1.04); stroke: var(--meridian-lift); }
.folio.is-on .mk svg .fill, .folio__hit:hover .mk svg .fill { fill: var(--meridian-lift); }
.folio.is-on .mk em, .folio__hit:hover .mk em { color: var(--ink-2); }

/* the continent seal opens the rail */
.folio--cont { padding-right: 1.05rem; }
.folio--cont .mk { display: none; }
.folio--cont .folio__hit { display: grid; grid-template-columns: auto minmax(0,1fr); grid-template-rows: auto auto; gap: 0 .7rem; align-items: center; }
.seal { grid-row: 1 / 3; width: 2.5rem; height: 2.5rem; }
.seal svg { width: 100%; height: 100%; fill: none; stroke: var(--ink-3); stroke-width: 1; }
.seal svg .rose { fill: var(--ink-3); stroke: none; opacity: .55; transform-origin: 50% 50%; transition: transform 1.2s var(--ease); }
.folio--cont .folio__t b { font-size: 1.3rem; }
.folio--cont:hover .seal svg .rose, .folio--cont.is-on .seal svg .rose { transform: rotate(45deg); }
.folio--cont.is-on .seal svg { stroke: var(--meridian-lift); }
.folio--cont.is-on .seal svg .rose { fill: var(--meridian-lift); }

/* the city spines: the volumes standing in the country's gathering */
.folio__cities { display: flex; gap: .68rem; margin-top: .5rem; }
.spn { display: inline-flex; align-items: center; gap: .36rem; text-decoration: none; --leather: #3A3A44; --foil: #E8E2CF; }
.spn i {
  width: 7px; height: 26px; flex: none; border-radius: 1px 0 0 1px; position: relative;
  background:
    linear-gradient(90deg, rgba(0,0,0,.5) 0%, rgba(255,255,255,.16) 38%, rgba(0,0,0,.12) 62%, rgba(0,0,0,.55) 100%),
    linear-gradient(180deg, color-mix(in oklab, var(--leather) 78%, #FFF0D8) 0%, var(--leather) 34%, color-mix(in oklab, var(--leather) 62%, #000) 100%);
  box-shadow: 1px 2px 4px rgba(0,0,0,.55), inset 0 1px 0 rgba(255,255,255,.18);
  transition: transform var(--m-struct) var(--ease-out-strong), box-shadow var(--m-struct) var(--ease);
}
.spn i::before, .spn i::after { content: ""; position: absolute; left: 0; right: 0; height: 1px; background: var(--foil); opacity: .5; }
.spn i::before { top: 6px; } .spn i::after { bottom: 6px; }
.spn b { font-family: var(--font-data); font-size: var(--t-data); font-weight: 400; letter-spacing: .04em; color: var(--ink-3); transition: color var(--m-micro) var(--ease); }
.spn--pub b { color: var(--evidence); }
.spn--pub i { box-shadow: 1px 2px 4px rgba(0,0,0,.55), inset 0 1px 0 rgba(255,255,255,.22), 0 0 0 1px color-mix(in oklab, var(--foil) 55%, transparent); }
.spn:hover i, .spn:focus-visible i { transform: translateY(-3px) scaleY(1.1); box-shadow: 2px 5px 9px rgba(0,0,0,.6), inset 0 1px 0 rgba(255,255,255,.28); }
.spn:hover b, .spn.is-on b { color: var(--ink); }
.spn.is-on i { transform: translateY(-3px) scaleY(1.12); }

.folio--none { display: flex; flex-direction: column; justify-content: flex-end; padding-bottom: .1rem; opacity: .78; }
.folio__none-k { color: var(--ink-4); margin-bottom: .35rem; }
.folio__none { display: grid; grid-template-columns: repeat(2, auto); gap: .16rem .8rem; max-width: 13.5rem; }
.folio__none a { font-family: var(--font-data); font-size: var(--t-data); color: var(--ink-4); text-decoration: none; border-bottom: 1px solid transparent; }
.folio__none a:hover { color: var(--ink-2); border-bottom-color: var(--rule-strong); }
/* while the 3-D instrument is live the rail leads with the collection; without it
   every continent must stay reachable as a plain link */
[data-hero="flat"] .folio--none, .no-js .folio--none { opacity: 1; }

/* §5.5 THE FLAT FALLBACK */
.hero__flat { grid-area: stage; align-self: center; display: none; }
.hero__flat .wmap { width: 100%; height: auto; opacity: .92; }
.hero__flat figcaption { margin-top: .6rem; color: var(--ink-4); text-align: center; white-space: normal; }
[data-hero="flat"] .hero__flat, .no-js .hero__flat { display: block; }
[data-hero="flat"] .hero__gl, .no-js .hero__gl, [data-hero="flat"] .hero__labels, .no-js .hero__labels { display: none; }
[data-hero="flat"] .hero__scrim, .no-js .hero__scrim { opacity: .45; }
.no-js .readout__clock, .no-js .readout__sun, .no-js .crumb { display: none; }

/* §5.6 MARKERS — the cartographic language placed by the scene.
   Plotted devices, not HTML cards floating above the atlas. */
.lab { position: absolute; left: 0; top: 0; transform: translate(-50%, -50%); will-change: transform; white-space: nowrap; opacity: 0; transition: opacity 300ms var(--ease); }
.lab.is-on { opacity: 1; }

/* CONTINENT — an atlas seal struck into the sheet. Printed in ink where the sun
   falls on the land, in light where the land is in night. */
.lab--cont { transform: translate(-50%, -50%); text-align: center; --ink-c: rgba(28,29,26,.86); --halo: rgba(238,232,214,.92); --halo2: rgba(238,232,214,.5); }
.lab--cont[data-lit="0"] { --ink-c: rgba(248,245,236,.97); --halo: rgba(5,6,12,.98); --halo2: rgba(5,6,12,.9); }
.lab--cont .lab__seal { display: block; width: 44px; height: 44px; margin: 0 auto .38rem; }
.lab--cont .lab__seal svg { width: 100%; height: 100%; fill: none; stroke: var(--ink-c); stroke-width: .9; opacity: .62;
  filter: drop-shadow(0 0 4px var(--halo)) drop-shadow(0 0 9px var(--halo2)); transition: stroke 300ms var(--ease), opacity 300ms var(--ease), transform 900ms var(--ease); }
.lab--cont .lab__seal svg .rose { fill: var(--ink-c); stroke: none; opacity: .8; transform-origin: 50% 50%; transition: fill 300ms var(--ease), transform 1.1s var(--ease); }
.lab--cont .lab__t { display: block; font-family: var(--font-data); font-size: var(--t-label); letter-spacing: .42em; text-indent: .42em; text-transform: uppercase; color: var(--ink-c);
  text-shadow: 0 0 3px var(--halo), 0 0 6px var(--halo), 0 0 13px var(--halo), 0 0 24px var(--halo2); transition: letter-spacing 300ms var(--ease), color 300ms var(--ease); }
/* the counts are enrichment, not identity: the seal itself says whether a
   continent holds a collection, and the numbers arrive on address */
.lab--cont .lab__n { display: none; font-family: var(--font-data); font-size: var(--t-micro); letter-spacing: .18em; text-indent: .18em; color: var(--ink-c); opacity: .8; margin-top: .3rem;
  text-shadow: 0 0 3px var(--halo), 0 0 7px var(--halo), 0 0 14px var(--halo); }
.lab--cont.is-hot .lab__n { display: block; }
/* a continent that holds a collection is struck with a full rose; the rest keep an empty ring */
.lab--cont[data-coll="0"] .lab__seal svg .rose { display: none; }
.lab--cont[data-coll="0"] .lab__seal svg { opacity: .4; }
.lab--cont[data-coll="0"] .lab__t { opacity: .78; }
.lab--cont[data-coll="1"] .lab__seal svg .rose { opacity: .92; }
.lab--cont.is-hot .lab__seal svg { stroke: var(--decide); opacity: 1; transform: scale(1.07); }
.lab--cont.is-hot .lab__seal svg .rose { fill: var(--decide); transform: rotate(45deg); }
.lab--cont.is-hot .lab__t { letter-spacing: .48em; text-indent: .48em; }
.lab--cont.is-hot .lab__n { opacity: .9; }

/* COUNTRY — a plotted cartographic marker: struck point at the true coordinate,
   hairline leader, engraved name displaced only as far as legibility needs */
.lab--ctry { transform: translate(0,0); }
/* THE INK FLIPS WITH THE GROUND. A name printed on the sheet is struck in ink
   and lifted off it with the map-maker's paper halo; the same name carried out
   over the field is set in light on a tight shadow. Luminance separation, not a
   translucent slab laid over the atlas. */
.lab--ctry { --ink-c: rgba(18,19,17,.95); --halo: rgba(241,236,220,.97); --halo2: rgba(241,236,220,.62); }
.lab--ctry[data-ground="night"] { --ink-c: rgba(250,247,238,.98); --halo: rgba(5,6,12,.94); --halo2: rgba(5,6,12,.8); }
.lab--ctry[data-ground="night"] .lab__t { text-shadow: 0 1px 2px var(--halo), 0 0 5px var(--halo), 0 0 11px var(--halo), 0 0 22px var(--halo2); }
.lab--ctry[data-ground="night"][data-pub="1"] .lab__t::after { background: #7FB5B8; }
.lab--ctry[data-ground="night"] .lab__lead { background: linear-gradient(90deg, rgba(240,236,226,.25), rgba(240,236,226,.75)); box-shadow: 0 0 5px rgba(5,6,12,.9); }
.lab--ctry[data-ground="night"].is-hot .lab__t { color: #FFFDF7; }
/* while the instrument is in flight the context reading stands down; the
   collection countries travel with their own geography and never blink out */
.hero__labels[data-fly="1"] .lab--ctry[data-coll="0"] { opacity: 0 !important; }
.lab--ctry .lab__pin { position: absolute; left: -7.5px; top: -7.5px; width: 15px; height: 15px; fill: none; stroke: var(--ink-c); stroke-width: 1.35; opacity: .8; filter: drop-shadow(0 0 3px var(--halo)) drop-shadow(0 0 7px var(--halo2)); transition: stroke 260ms var(--ease), transform 320ms var(--ease-out-strong), opacity 260ms var(--ease); }
.lab--ctry .lab__pin .fill { fill: var(--ink-c); stroke: none; }
.lab--ctry .lab__lead { position: absolute; left: 0; top: 0; height: 1px; width: 0; transform-origin: 0 50%; background: linear-gradient(90deg, rgba(26,27,24,.25), rgba(26,27,24,.7)); box-shadow: 0 0 4px var(--halo); transition: opacity 260ms var(--ease); }
.lab--ctry .lab__body { position: absolute; left: 0; top: 0; text-align: center; }
/* the engraved name is a hit target while the field is struck: a small country
   is a few pixels of polygon, and its name is not */
.lab--ctry.is-on .lab__body { pointer-events: auto; cursor: pointer; padding: .3rem .45rem; margin: -.3rem -.45rem; }
.hero__labels[data-fly="1"] .lab--ctry .lab__body { pointer-events: none; }
.lab--ctry .lab__t { display: block; font-family: var(--font-display); font-weight: 700; font-size: 1rem; line-height: 1.2; letter-spacing: -.015em; color: var(--ink-c);
  text-shadow: 0 0 3px var(--halo), 0 0 6px var(--halo), 0 0 12px var(--halo), 0 0 22px var(--halo2), 0 1px 0 rgba(255,255,255,.3); }
html[lang="ko"] .lab--ctry .lab__t, html[lang="ja"] .lab--ctry .lab__t { font-family: var(--cjk-ko-display), var(--font-display); }
.lab--ctry[data-pub="1"] .lab__t::after { content: ""; display: inline-block; width: .34em; height: .34em; margin-left: .36em; vertical-align: .28em; border-radius: 50%; background: #2F565B; box-shadow: 0 0 0 2px var(--halo); }
.lab--ctry .lab__iso { display: none; font-family: var(--font-data); font-size: var(--t-micro); letter-spacing: .16em; color: var(--ink-c); opacity: .9; margin-top: .22rem; padding-top: .22rem; border-top: 1px solid currentColor; text-shadow: 0 0 4px var(--halo), 0 0 9px var(--halo); }
.lab--ctry .lab__iso b { font-weight: 400; letter-spacing: .22em; }
.lab--ctry .lab__iso i { font-style: normal; color: #1E4045; }
.lab--ctry[data-ground="night"] .lab__iso i { color: #8FC3C6; }
.lab--ctry .lab__iso em { display: block; font-style: normal; letter-spacing: .06em; margin-top: .2rem; opacity: .95; }
.lab--ctry.is-hot { z-index: 3; }
.lab--ctry.is-hot .lab__iso { display: block; }
.lab--ctry.is-hot .lab__pin { stroke: var(--decide); opacity: 1; transform: scale(1.3); }
.lab--ctry.is-hot .lab__pin .fill { fill: var(--decide); }
.lab--ctry.is-hot .lab__t { color: #0D0E10; }
.lab--ctry.is-hot .lab__lead { background: linear-gradient(90deg, rgba(26,27,24,.3), var(--decide)); }
/* context countries: engraved names, no struck point — they are not destinations */
.lab--ctry[data-coll="0"] { opacity: 0; }
.lab--ctry[data-coll="0"].is-on { opacity: 1; }
.lab--ctry[data-coll="0"] .lab__pin, .lab--ctry[data-coll="0"] .lab__lead { display: none; }
/* the context reading is a rank below the collection, and it is ranked by weight
   and letterfit — not by fading it until it cannot be read */
.lab--ctry[data-coll="0"] .lab__t { font-family: var(--font-data); font-weight: 500; font-size: var(--t-data); letter-spacing: .2em; text-indent: .2em; text-transform: uppercase;
  color: rgba(30,32,28,.82); text-shadow: 0 0 3px var(--halo), 0 0 7px var(--halo), 0 0 15px var(--halo2); }
.lab--ctry[data-coll="0"][data-ground="night"] .lab__t { color: rgba(238,234,222,.84);
  text-shadow: 0 1px 2px var(--halo), 0 0 6px var(--halo), 0 0 14px var(--halo2); }
.lab--ctry[data-coll="0"].is-hot .lab__t { color: var(--ink-c); }

/* CITY — the MAP BOOK's folio plate */
.lab--city { transform: translate(-50%, 0); text-align: center; }
.lab--city .lab__t { display: block; font-family: var(--cjk-ko-display), var(--font-display); font-weight: 700; font-size: .95rem; color: #FBF8F0; text-shadow: 0 1px 2px #05060C, 0 0 6px rgba(5,6,12,.98), 0 0 16px rgba(5,6,12,.9); }
.lab--city .lab__d { display: block; font-family: var(--font-data); font-size: var(--t-micro); letter-spacing: .12em; color: rgba(240,236,226,.9); margin-top: .16rem; text-shadow: 0 1px 2px #05060C, 0 0 6px rgba(5,6,12,.98), 0 0 14px rgba(5,6,12,.92); }
.lab--city .lab__d b { font-weight: 400; color: #EDE9DE; font-variant-numeric: tabular-nums; }
.lab--city .lab__d i { font-style: normal; }
.lab--city[data-pub="1"] .lab__d i { color: var(--evidence); }
.lab--city[data-pub="0"] .lab__d i { color: rgba(240,236,226,.78); }
.lab--city .lab__rule { display: block; width: 26px; height: 1px; margin: 0 auto .3rem; background: rgba(240,236,224,.35); transition: width 320ms var(--ease-out-strong), background 260ms var(--ease); }
/* printed on the sheet the volume stands on, the folio line is struck in ink;
   carried out over the field it is set in light. Same rule as the country names. */
.lab--city[data-ground="paper"] .lab__t { color: #15161A;
  text-shadow: 0 0 3px rgba(243,238,222,.95), 0 0 7px rgba(243,238,222,.9), 0 0 15px rgba(243,238,222,.6); }
.lab--city[data-ground="paper"] .lab__d { color: rgba(32,33,30,.9);
  text-shadow: 0 0 3px rgba(243,238,222,.95), 0 0 7px rgba(243,238,222,.85); }
.lab--city[data-ground="paper"] .lab__d b { color: #23241F; }
.lab--city[data-ground="paper"][data-pub="0"] .lab__d i { color: rgba(52,53,48,.85); }
.lab--city[data-ground="paper"][data-pub="1"] .lab__d i { color: #22484D; }
.lab--city[data-ground="paper"] .lab__rule { background: rgba(38,36,30,.5); }
.lab--city[data-ground="paper"].is-hot .lab__t { color: #000; }
.lab--city.is-hot .lab__t { color: #FFF; }
.lab--city.is-hot .lab__rule { width: 46px; background: var(--meridian-lift); }
.lab--none { font-family: var(--font-data); font-size: var(--t-micro); letter-spacing: .16em; text-transform: uppercase; color: rgba(237,233,222,.55); text-shadow: 0 1px 10px rgba(0,0,0,.9); }

.colophon { grid-area: colo; display: flex; align-items: center; gap: .85rem; font-family: var(--font-data); font-size: var(--t-micro); letter-spacing: .04em; color: var(--ink-4); line-height: 1.5; padding-top: .7rem; border-top: 1px solid var(--rule-hair); }
html[lang="ko"] .colophon, html[lang="ja"] .colophon { font-family: var(--cjk-ko), var(--font-utility); font-size: var(--t-data); }
.colophon .ev { flex: none; }

/* opening a city: the field goes to the object */
body[data-state="opening"] .hero__head, body[data-state="open"] .hero__head,
body[data-state="opening"] .rail__row, body[data-state="open"] .rail__row { opacity: .06; }
/* ghosted, they are not in the way: a press there reaches the scene and puts
   the volume back (hero3d.js) */
body[data-state="opening"] .hero__head, body[data-state="open"] .hero__head,
body[data-state="opening"] .rail__row, body[data-state="open"] .rail__row { pointer-events: none; }
body[data-state="opening"] .spine-rail, body[data-state="open"] .spine-rail { opacity: .12; }
body[data-state="opening"] .finder, body[data-state="open"] .finder { opacity: .45; }
/* the way back out stays lit. The reader used to leave an open volume by
   scrolling on into the Tokyo chapter; with that chapter out of the flow the
   volume opens in place, so Back and Reset have to remain readable while it is
   open — they are the only way back. */
body[data-state="opening"] .rail__head, body[data-state="open"] .rail__head { opacity: 1; }
body[data-state="opening"] .rail__k, body[data-state="open"] .rail__k { opacity: .3; }
.hero__head, .rail, .rail__row, .rail__head, .finder, .spine-rail { transition: opacity var(--m-narr) var(--ease); }

/* THE HELD CAPTION — materialises under the volume in hand (placed each frame
   by hero3d.js), and is the way to put it back. */
.held {
  position: absolute; left: 0; top: 0; z-index: 6; pointer-events: none;
  display: flex; flex-direction: column; align-items: center; gap: .6rem; text-align: center;
  opacity: 0; visibility: hidden; will-change: transform, opacity;
  transition: opacity 260ms var(--ease), visibility 0s linear 260ms;
}
body[data-state="open"] .held { opacity: 1; visibility: visible; pointer-events: auto; transition: opacity 520ms var(--ease) 60ms, visibility 0s; }
[data-hero="flat"] .held, .no-js .held { display: none; }
/* the flat atlas cannot take a volume in hand, so it does not offer to */
[data-hero="flat"] .nowvol__act, .no-js .nowvol__act { display: none; }
.held__id { display: flex; align-items: baseline; gap: .75rem; white-space: nowrap; }
.held__id b { font-family: var(--cjk-ko-display), var(--font-display); font-weight: 700; font-size: 1.2rem; letter-spacing: -.012em; color: var(--ink); }
.held__id span { font-family: var(--font-data); font-size: var(--t-micro); letter-spacing: .22em; color: var(--ink-3); }
.held__do { display: flex; align-items: center; gap: 1.1rem; white-space: nowrap; }
.held__back {
  display: inline-flex; align-items: center; gap: .45rem; padding: .38rem .1rem .3rem;
  font-family: var(--font-data); font-size: var(--t-label); letter-spacing: .16em; text-transform: uppercase;
  color: var(--ink-2); border-bottom: 1px solid var(--rule-strong);
  transition: color var(--m-micro) var(--ease), border-color var(--m-micro) var(--ease);
}
html[lang="ko"] .held__back, html[lang="ja"] .held__back { letter-spacing: .06em; }
.held__back svg { width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 1.15; stroke-linecap: round; stroke-linejoin: round; }
.held__back kbd { font-family: var(--font-data); font-size: var(--t-micro); letter-spacing: .08em; color: var(--ink-4); border: 1px solid var(--rule-strong); padding: 0 .32rem; margin-left: .25rem; line-height: 1.5; }
.held__back:hover, .held__back:focus-visible { color: var(--ink); border-bottom-color: var(--meridian-lift); }
.held__back:active { color: var(--meridian-lift); }
.held__hint { font-family: var(--font-data); font-size: var(--t-micro); letter-spacing: .18em; text-transform: uppercase; color: var(--ink-4); }
html[lang="ko"] .held__hint, html[lang="ja"] .held__hint { letter-spacing: .08em; }
@media (hover: none) { .held__back kbd { display: none; } }
/* ============================================================================
   §6  THE MAP BOOK — CSS build. Same object as the 3-D one.
   ============================================================================ */
.mb {
  --w: 108px; --hgt: 150px; --th: 19px;        /* cover width · height · block thickness */
  --leather:#3A3A44; --leather-2:#26262E; --foil:#E8E2CF; --edge:#DDD3B8; --h: 235;
  position: relative;
}
.mb__obj {
  position: relative; display: block; width: calc(var(--w) + var(--th) * .9); height: calc(var(--hgt) + 14px);
  perspective: 1100px; perspective-origin: 30% 30%;
}
/* the book stands on the shelf, cover slightly turned so the spine reads */
.mb__cover, .mb__spine, .mb__pages {
  position: absolute; left: var(--th); top: 6px; width: var(--w); height: var(--hgt);
  transform-origin: 0 50%;
  transition: transform var(--m-address, 400ms) var(--ease-out-strong), filter var(--m-narr) var(--ease);
}
.mb__cover {
  transform: rotateY(-22deg) translateZ(calc(var(--th) / 2));
  border-radius: 1.5px 3px 3px 1.5px;
  background:
    /* the hide */
    var(--leather-hide) var(--hide-x, 0) var(--hide-y, 0) / var(--hide-size),
    /* where it is handled: the fore-edge, the outer corners, the joint */
    radial-gradient(70% 46% at 96% 78%, rgba(255,238,214,.10), rgba(0,0,0,0) 70%),
    linear-gradient(90deg, rgba(18,12,7,.24) 0%, rgba(0,0,0,0) 16%, rgba(0,0,0,0) 74%, rgba(255,240,218,.055) 93%, rgba(14,10,6,.16) 100%),
    radial-gradient(120% 90% at 20% 8%, rgba(255,255,255,.10) 0%, rgba(255,255,255,0) 55%),
    linear-gradient(160deg, rgba(14,12,10,.22) 0%, rgba(8,7,6,.38) 100%),
    linear-gradient(160deg, var(--leather) 0%, var(--leather-2) 100%);
  background-blend-mode: soft-light, normal, normal, normal, normal, normal;
  box-shadow:
    inset 0 0 0 1px rgba(255,255,255,.05),
    inset 1px 1px 0 rgba(255,255,255,.14),
    inset -1px -1px 0 rgba(0,0,0,.45),
    inset 0 0 18px rgba(0,0,0,.28),
    2px 4px 10px rgba(0,0,0,.35);
  color: color-mix(in oklab, var(--leather) 62%, #000);
  display: flex; flex-direction: column; padding: 11px 12px 10px;
  overflow: hidden;
}
/* the spine: convex, in the shadow of the boards */
.mb__spine {
  width: var(--th); transform: rotateY(-112deg) translateZ(calc(var(--th) / 2)) translateX(0);
  transform-origin: 0 50%;
  border-radius: 3px 0 0 3px;
  background:
    /* a strip taken across the sheet, as on the 3-D volume: the spine is
       plainly a different piece of the skin from the board it joins */
    var(--leather-hide) calc(var(--hide-x, 0px) - 132px) var(--hide-y, 0) / var(--hide-size),
    linear-gradient(90deg, rgba(0,0,0,.45) 0%, rgba(255,246,228,.13) 42%, rgba(0,0,0,.05) 60%, rgba(0,0,0,.5) 100%),
    linear-gradient(180deg, var(--leather) 0%, var(--leather-2) 100%);
  background-blend-mode: soft-light, normal, normal;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.12), inset 0 -1px 0 rgba(0,0,0,.5);
  display: flex; align-items: center; justify-content: center;
}
.mb__spine span { writing-mode: vertical-rl; font-family: var(--font-data); font-size: 8px; letter-spacing: .22em; color: var(--foil); opacity: .78; }
/* the page block: warm ivory paper, edge stripes, sits inside the boards */
.mb__pages {
  left: calc(var(--th) + 3px); top: 9px; width: calc(var(--w) - 8px); height: calc(var(--hgt) - 6px);
  transform: rotateY(-22deg) translateZ(calc(var(--th) / 2 - 3px)) translateX(6px);
  background:
    repeating-linear-gradient(180deg, rgba(0,0,0,.10) 0 1px, rgba(255,255,255,0) 1px 3px),
    linear-gradient(90deg, #CFC6AC 0%, var(--edge) 30%, #EDE6D2 100%);
  box-shadow: 4px 0 0 -1px #C9BFA3, 8px 0 0 -2px #B7AC8E, 10px 2px 12px rgba(0,0,0,.45);
  border-radius: 0 2px 2px 0;
}
.mb__pages::before {  /* fore-edge, seen at the angle */
  content: ""; position: absolute; right: -9px; top: 3px; bottom: 3px; width: 10px;
  background: repeating-linear-gradient(180deg, #D8CFB4 0 1px, #C3B899 1px 2px);
  transform: skewY(-12deg); border-radius: 0 2px 2px 0;
}
.mb__cover::before { /* blind-embossed frame */
  content: ""; position: absolute; inset: 7px; border-radius: 1px; pointer-events: none;
  border: 1px solid rgba(0,0,0,.35);
  box-shadow: 0 1px 0 rgba(255,255,255,.12), inset 0 1px 0 rgba(255,255,255,.10), inset 0 -1px 0 rgba(0,0,0,.28);
}
.mb__rule { display: flex; justify-content: space-between; font-family: var(--font-data); font-size: 7px; letter-spacing: .18em; color: var(--foil); opacity: .72; margin-top: 3px; padding-inline: 4px; }
.mb__title { margin: auto 0; text-align: center; padding-inline: 4px; }
.mb__title b {
  display: block; font-family: var(--font-display); font-size: 15px; line-height: 1.02; letter-spacing: .06em; font-weight: 700;
  color: color-mix(in oklab, var(--leather) 55%, #000);
  text-shadow: 0 1px 0 rgba(255,255,255,.16), 0 -1px 0 rgba(0,0,0,.55);
  text-wrap: balance;
}
html[lang="ko"] .mb__title b { font-family: var(--cjk-ko-display), var(--font-display); letter-spacing: -.01em; font-size: 18px; }
html[lang="ja"] .mb__title b { font-family: var(--cjk-ja-display), var(--font-display); letter-spacing: .04em; font-size: 18px; }
.mb__title i { display: block; font-style: normal; font-family: var(--cjk-ja-display), var(--font-display); font-size: 9.5px; letter-spacing: .12em; color: var(--foil); opacity: .9; margin-top: 5px; text-shadow: 0 0 1px rgba(0,0,0,.4); }
.mb__foot { display: flex; justify-content: space-between; align-items: center; font-family: var(--font-data); font-size: 6.5px; letter-spacing: .1em; color: var(--foil); opacity: .7; padding-inline: 4px; margin-bottom: 3px; }
.mb__seal { width: 12px; height: 12px; border-radius: 50%; border: 1px solid rgba(0,0,0,.4); box-shadow: 0 1px 0 rgba(255,255,255,.12), inset 0 1px 0 rgba(255,255,255,.1); position: relative; }
.mb__seal::before { content: ""; position: absolute; inset: 3px; border-radius: 50%; border: 1px solid rgba(0,0,0,.35); }
/* the cast shadow on the shelf plane */
.mb__obj::after { content: ""; position: absolute; left: 4px; right: 12px; bottom: 2px; height: 22px; background: radial-gradient(50% 90% at 45% 0%, rgba(0,0,0,.55), rgba(0,0,0,0) 70%); pointer-events: none; z-index: -1; }
@media (hover: hover) and (pointer: fine) {
  .mb { transition: transform var(--m-struct) var(--ease-out-strong), filter var(--m-struct) var(--ease); }
}
.mb.is-on .mb__cover, .mb.is-on .mb__pages { filter: brightness(1.06); }

/* ============================================================================
   §8  VOLUME 01 — the object world (carried from F1)
   ============================================================================ */
.world {
  position: relative; isolation: isolate;
  background:
    radial-gradient(88% 62% at 22% 4%, oklch(.34 min(var(--meridian-c), .068) var(--meridian-h)) 0%, rgba(0,0,0,0) 68%),
    radial-gradient(78% 58% at 92% 96%, oklch(.28 min(var(--meridian-c), .052) var(--meridian-h)) 0%, rgba(0,0,0,0) 72%),
    linear-gradient(178deg, oklch(.20 min(var(--meridian-c), .036) var(--meridian-h)) 0%, #0A0D15 52%, #07090F 100%);
  padding-block: clamp(3.5rem, 9vh, 7rem); border-top: 1px solid var(--rule);
}
.world__grain { position: absolute; inset: 0; z-index: -1; pointer-events: none; background-image: var(--grain); background-size: 160px 160px; opacity: .05; mix-blend-mode: overlay; }
.world__in { max-width: var(--shell); margin-inline: auto; padding-inline: var(--gutter); display: grid; gap: clamp(2rem, 4vw, 4rem); grid-template-columns: minmax(0, .92fr) minmax(0, 1.08fr); grid-template-areas: "back back" "plate ed"; align-items: start; }
.world__back { grid-area: back; margin-bottom: .5rem; }
.back { display: inline-flex; align-items: center; gap: .6rem; text-decoration: none; font-family: var(--font-data); font-size: var(--t-label); letter-spacing: .16em; text-transform: uppercase; color: var(--ink-3); border-bottom: 1px solid var(--rule); padding-bottom: .3rem; transition: color var(--m-micro) var(--ease), border-color var(--m-micro) var(--ease); }
html[lang="ko"] .back, html[lang="ja"] .back { letter-spacing: .06em; }
@media (hover: hover) and (pointer: fine) { .back:hover { color: var(--ink); border-bottom-color: var(--meridian); } }
.plate { grid-area: plate; position: relative; background: linear-gradient(176deg, var(--stock) 0%, var(--stock-2) 100%); color: var(--stock-ink); box-shadow: 0 1px 0 rgba(255,255,255,.5) inset, 0 26px 60px -22px rgba(0,0,0,.85), 0 2px 0 var(--stock-edge), 0 3px 0 var(--stock-edge-d); }
.plate::after { content: ""; position: absolute; inset: 0; pointer-events: none; background-image: var(--grain); background-size: 160px 160px; opacity: .14; mix-blend-mode: multiply; }
.plate__band { display: flex; justify-content: space-between; align-items: baseline; gap: 1rem; padding: .8rem 1.35rem; font-family: var(--font-data); font-size: var(--t-micro); letter-spacing: .14em; color: var(--stock-ink-3); }
.plate__head { border-bottom: 1px solid var(--stock-hair); } .plate__head .u-label { color: var(--stock-ink-2); }
.plate__foot { border-top: 1px solid var(--stock-hair); } .plate__foot b { font-weight: 400; color: var(--stock-ink); }
.plate__inst { position: relative; padding: 1.75rem 1.35rem 1.5rem; }
.plate__fig { position: absolute; right: 4%; top: 4%; width: 46%; height: auto; opacity: .78; --fig-grat: rgba(25,27,33,.13); --fig-water: oklch(.90 .030 var(--meridian-h)); --fig-water-stroke: rgba(25,27,33,.30); --fig-line: rgba(25,27,33,.28); --fig-land: rgba(25,27,33,.14); --fig-mark: #B23A1E; }
.cv-grat { fill: none; stroke: var(--fig-grat, rgba(255,255,255,.14)); stroke-width: 1.6; }
.cv-water { fill: var(--fig-water, rgba(255,255,255,.24)); stroke: var(--fig-water-stroke, none); stroke-width: 1.6; }
.cv-ridge { fill: none; stroke: var(--fig-line, rgba(20,24,34,.34)); stroke-width: 3; stroke-linecap: round; }
.cv-cross { fill: none; stroke: var(--fig-mark, #B23A1E); stroke-width: 3.4; } .cv-core { fill: var(--fig-mark, #B23A1E); }
.plate__nm { position: relative; font-size: clamp(2.5rem, 1.4rem + 3.4vw, 4.25rem); line-height: 1; }
.plate__nm i { display: block; font-style: normal; font-size: .42em; color: var(--stock-ink-3); margin-top: .25em; }
.plate__key { position: relative; display: flex; flex-wrap: wrap; gap: .35rem 1.5rem; margin-top: 1.25rem; padding-top: .8rem; border-top: 1px solid var(--stock-hair); font-family: var(--font-data); font-size: var(--t-micro); letter-spacing: .1em; color: var(--stock-ink-2); }
.plate__key b { color: var(--decide); letter-spacing: .14em; margin-right: .5em; }
.plate__img { position: relative; } .plate__img img { width: 100%; height: auto; } .plate__img picture { display: block; border-block: 1px solid var(--stock-edge); }
.plate__img figcaption { display: flex; align-items: flex-start; gap: .7rem; padding: .7rem 1.35rem; font-size: var(--t-micro); line-height: 1.5; color: var(--stock-ink-2); }
.plate__img .ev { flex: none; }
.world__ed { grid-area: ed; } .world__ed .eyebrow { border-bottom-color: var(--rule); }
.display { font-size: var(--t-display); line-height: 1.14; margin-bottom: 1.15rem; text-wrap: balance; }
.world__ed .body { margin-bottom: 2rem; }
.sheets { display: flex; flex-direction: column; }
.band { display: grid; grid-template-columns: 4.75rem minmax(0,1fr) auto; gap: 1.25rem; align-items: start; padding: 1.15rem .35rem; text-decoration: none; border-top: 1px solid var(--rule); transition: background var(--m-micro) var(--ease), padding-left var(--m-struct) var(--ease); }
.sheets li:last-child .band { border-bottom: 1px solid var(--rule); }
@media (hover: hover) and (pointer: fine) { .band:hover { background: rgba(255,255,255,.032); padding-left: .85rem; } }
.band__i { font-family: var(--font-data); font-size: var(--t-data); color: var(--ink-4); letter-spacing: .06em; }
.band__t { display: block; font-size: 1.0625rem; line-height: 1.3; margin-bottom: .3rem; }
.band__d { display: block; font-size: var(--t-small); color: var(--ink-3); line-height: 1.55; max-width: 52ch; }
.band__m { text-align: right; } .band:hover .band__t { color: var(--meridian-lift); }

/* ============================================================================
   §10 RESPONSIVE
   ============================================================================ */
/* — LAPTOP: the side columns give width back to the instrument — */
@media (max-width: 1279px) {
  .hero__in { grid-template-columns: minmax(0, 20.5rem) minmax(0, 1fr) minmax(0, 16.5rem); gap: .9rem 1.35rem; }
  .hero__head { max-width: none; }
  .folio { padding-inline: .95rem; }
}
@media (max-width: 1120px) {
  .world__in { grid-template-columns: minmax(0,1fr); grid-template-areas: "back" "plate" "ed"; }
}

/* — TABLET: the argument and the console share the top; the instrument takes
     the full width beneath them. Not three squeezed columns. — */
@media (max-width: 1024px) {
  .hero { padding-block: 5rem 1rem; }
  .hero__in {
    grid-template-columns: minmax(0, 1fr) minmax(0, 17.5rem);
    grid-template-rows: auto minmax(0, 1fr) auto;
    grid-template-areas: "head finder" "stage stage" "rail rail";
    gap: 1rem 1.5rem;
  }
  .hero__head { align-self: start; max-width: 34rem; }
  .finder { align-self: start; }
  .hero__stage { margin-inline: calc(var(--gutter) * -.5); min-height: clamp(300px, 42svh, 460px); }
  .readout__clock time { font-size: clamp(1.9rem, 1.4rem + 1.6vw, 2.5rem); }
}
/* — TABLET, deeper in: the argument and the console sit across the top of a
     full-bleed plate, so the vignette darkens the top band they stand on rather
     than the side columns they no longer occupy (Hero closeout: the readout was
     printed on bright land at 800 px). — */
@media (min-width: 761px) and (max-width: 1024px) {
  .hero[data-level="continent"] .hero__scrim::after,
  .hero[data-level="country"] .hero__scrim::after {
    background:
      linear-gradient(180deg, rgba(var(--void),.94) 0%, rgba(var(--void),.88) 30%, rgba(var(--void),.6) 38%, rgba(var(--void),.18) 44%, rgba(var(--void),0) 49%),
      linear-gradient(0deg, rgba(var(--void),.92) 0%, rgba(var(--void),.7) 9%, rgba(var(--void),0) 20%);
  }
  .hero[data-level="continent"] .finder, .hero[data-level="country"] .finder { text-shadow: 0 0 10px rgba(var(--void), .95), 0 0 3px rgba(var(--void), .9); }
}

/* — PHONE: the instrument is recomposed as one stacked column.
     Direct entry first, the globe as the field, the readout engraved on its
     lower edge, the journey rail beneath. The desktop layout is not shrunk. — */
@media (max-width: 760px) {
  .hero { min-height: auto; padding-block: 5.4rem 1.1rem; }
  .hero__in {
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: auto auto minmax(0, auto) auto;
    grid-template-areas: "head" "find" "stage" "rail";
    gap: .8rem;
  }
  .finder { display: contents; }
  .finder__k { display: none; }
  .finder__now { display: none; }
  .search { grid-area: find; }
  .hero__stage { grid-area: stage; margin-inline: calc(var(--gutter) * -1); height: clamp(310px, 44svh, 430px); min-height: 0; }
  /* THE STAGE HOLDS THE WORLD. On a phone the country plate and its dimmed
     neighbours are far larger than the frame, so a full-bleed canvas runs the
     geography straight through the headline. The instrument keeps the whole
     canvas — the world is still one continuous field — but it is held inside
     its own stage by its own edges, so the argument keeps a safe field and the
     atlas still reads as one world rather than a cropped picture of one. */
  /* the mask is a state device, not a permanent one: at world level the globe
     already sits inside its stage, and masking a full-bleed canvas layer costs
     the compositor real time on every frame it draws. */
  .hero[data-level="continent"] .hero__gl, .hero[data-level="continent"] .hero__labels,
  .hero[data-level="country"] .hero__gl,   .hero[data-level="country"] .hero__labels {
    --edge: 46px; --tail: 74px;
    mask-image: linear-gradient(180deg,
      transparent 0,
      transparent calc(var(--stage-t, 0px) - var(--edge)),
      #000 calc(var(--stage-t, 0px) + 6px),
      #000 calc(var(--stage-b, 100%) - 4px),
      rgba(0,0,0,.22) calc(var(--stage-b, 100%) - var(--tail) * .45),
      transparent calc(var(--stage-b, 100%) + var(--tail) * .2));
    -webkit-mask-image: linear-gradient(180deg,
      transparent 0,
      transparent calc(var(--stage-t, 0px) - var(--edge)),
      #000 calc(var(--stage-t, 0px) + 6px),
      #000 calc(var(--stage-b, 100%) - 4px),
      rgba(0,0,0,.22) calc(var(--stage-b, 100%) - var(--tail) * .45),
      transparent calc(var(--stage-b, 100%) + var(--tail) * .2));
  }
  .hero[data-level="continent"] .hero__labels, .hero[data-level="country"] .hero__labels { --tail: 168px; }
  /* the field keeps its own atmosphere above the stage so the type is not
     standing on a flat black band */
  .hero[data-level="country"] .hero__scrim::after, .hero[data-level="continent"] .hero__scrim::after { opacity: .55; }
  /* the folio line under a volume is a phone-sized reading */
  .lab--city .lab__t { font-size: .875rem; }
  .lab--city .lab__d { letter-spacing: .08em; }
  .hero__flat { grid-area: stage; align-self: center; margin-inline: calc(var(--gutter) * -.5); }
  /* the readout is printed on the field, not stacked under it */
  .readout {
    grid-area: stage; align-self: end; z-index: 2; border-top: 0; padding: .7rem .85rem .6rem;
    margin-inline: calc(var(--gutter) * -.35); pointer-events: none;
    background: linear-gradient(180deg, rgba(var(--void),0) 0%, rgba(var(--void),.72) 34%, rgba(var(--void),.94) 100%);
  }
  .readout > * { pointer-events: auto; }
  .readout__k { margin-bottom: .25rem; }
  .readout__name { display: flex; align-items: baseline; gap: .5rem; flex-wrap: wrap; }
  .readout__name b { font-size: 1.3rem; }
  .readout__clock { margin-top: .1rem; }
  .readout__clock time { font-size: 1.9rem; }
  .readout__sun { margin-top: .2rem; }
  .readout__list { display: none; }
  .readout__preview { margin-top: .45rem; padding-top: .45rem; }
  .monument { font-size: clamp(2.1rem, 8.4vw, 2.9rem); margin-bottom: .7rem; }
  .lede { font-size: .9375rem; max-width: none; }
  .eyebrow { padding-bottom: .6rem; margin-bottom: .85rem; }
  .locus { margin-top: .85rem; padding-top: .55rem; flex-wrap: wrap; row-gap: .2rem; }
  .locus__c { margin-left: 0; flex: 1 0 100%; white-space: normal; }
  .hero__hint { display: none; }
  .spine-rail { display: none; }
  .rail__head { padding-bottom: .4rem; margin-bottom: .5rem; }
  .rail__k { display: none; }
  .rail__row { margin-inline: calc(var(--gutter) * -1); padding-inline: var(--gutter); }
  .folio { padding-inline: .85rem; padding-top: .9rem; }
  .mk { left: .85rem; }
  .crumb__back, .crumb__reset { padding: .48rem .85rem; }        /* touch targets */
  .lab--cont .lab__seal { width: 34px; height: 34px; margin-bottom: .3rem; }
  .lab--cont .lab__t { font-size: var(--t-micro); letter-spacing: .28em; text-indent: .28em; }
  .lab--cont .lab__n { display: none; }
  .lab--ctry .lab__t { font-size: .8125rem; }
  .lab--ctry .lab__iso { display: none; }

  .plate__fig { width: 40%; }
  .band { grid-template-columns: 3.25rem minmax(0,1fr); gap: .9rem; } .band__m { grid-column: 2; text-align: left; margin-top: .4rem; }
}
@media (max-width: 560px) {
  .hero { padding-block: 6.1rem 1.1rem; }
  .colophon { flex-direction: column; align-items: flex-start; gap: .5rem; }
  .folio__none { max-width: 15rem; }
}

/* — SHORT DESKTOP (1280 × 720 class): the instrument, rail included, stays
     above the fold. Measured before this block: the hero stood 767 px tall in
     a 720 px window and the rail's volumes were cut by the fold. — */
@media (min-width: 1025px) and (max-height: 780px) {
  .hero { padding-top: 4.75rem; }
  .hero__in { row-gap: .7rem; }
  .finder { gap: .65rem; }
  .cvol { --w: 50px; --hgt: 69px; --th: 10px; }
  .rail__head { padding-bottom: .35rem; margin-bottom: .4rem; }
  .folio__cities { margin-top: .35rem; }
}

/* ============================================================================
   §11 REDUCED MOTION + NO SCRIPT
   ============================================================================ */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  html:not(.no-js) .finder, html:not(.no-js) .rail { opacity: 1; animation: none; transform: none; }
  *, *::before, *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; scroll-behavior: auto !important; }
  .mb__cover, .mb__spine, .mb__pages { transition: none; }
}
.no-js .hero__hint { display: none; }
.no-js .search__k { display: none; }

/* Hero rail: raster equivalents of the existing CSS gradient paint only.
   Avoid first-use gradient raster programs during Book entry. Dimensions,
   text, hit areas, shadows and transitions stay authored in the rules above.
   3x local tiles; source recipes: evidence/hero_final_craft_v01/rail_assets.
   Mapbook's data-hub presentation keeps its original CSS painting. */
body:not([data-hub]) #tree .spn[data-jump="city:seoul"] i { background-image:url("hero-rail/seoul.png");background-size:100% 100%; }
body:not([data-hub]) #tree .spn[data-jump="city:tokyo"] i { background-image:url("hero-rail/tokyo.png");background-size:100% 100%; }
body:not([data-hub]) #tree .crumb { background-image:url("hero-rail/face.png");background-size:1px 100%; }
body:not([data-hub]) #tree .crumb::before,body:not([data-hub]) #tree .crumb::after { background-image:url("hero-rail/roundel.png");background-size:100% 100%; }
body:not([data-hub]) #tree .crumb__rule { background-image:url("hero-rail/rule.png");background-size:64px 7px;background-position:0 100%; }
body:not([data-hub]) #tree .crumb__scale::before { background:currentColor;mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='7'%3E%3Cpath d='M.5 0v7M15.5 0v7M0 3.5h16' stroke='white'/%3E%3C/svg%3E") center/contain no-repeat; }
body:not([data-hub]) #tree .crumb__reset::before { background:currentColor;mask:url("hero-rail/reset.png") center/100% 100% no-repeat; }

/* Internal HOME has immediate quiet feedback while its live world prepares. */
.home-preparing{display:none}html[data-home-return]:not([data-hero-ready]):not([data-hero-late]):not([data-hero=flat]) .home-preparing{display:block;position:fixed;left:28px;bottom:28px;margin:0;z-index:5;color:#d8c9a6;font:14px/1.5 var(--fow-font-instrument,SUIT,sans-serif);pointer-events:none}