/* ============================================================================
   FOW TRAVEL — THE HERO INSTRUMENT · precision recraft v0.1.2
   SAME WORLD · HIGHER INSTRUMENT CRAFT. The Library's Archive Scope is the
   paper instrument laid on the sheet; this is its dark optical sibling,
   suspended in the world: graphite body, smoked-glass face, restrained brass,
   calibrated marks. Same family, lower chassis mass, a different module.

     §1  tokens
     §2  the head          registration cue · headline · address line
     §3  acquisition       OPTICAL TYPE ACQUISITION, keyed on html[data-hero-type]
                           (v2.js §4b: the Hero readiness seam, never a clock)
     §4  the readout       inscription · primary state · measurement
     §5  the volumes       seat · locus · LIFT TO INSPECT as one event
     §6  the scale instrument (#crumb): aperture · graphite body · rule · bead
     §7  the held volume   its docking mark · RETURN TO PLATE
     §8  narrow screens
     §9  reduced motion

   Painting: the instrument's chassis, aperture, rule, bead, seat and dock are
   3x image tiles (assets/hero-rail/hp_*.png, sources and recipe in
   evidence/hero_precision_recraft_v012), not CSS gradients — the accepted rail
   was rasterised for the same reason (a first-use gradient raster cost at the
   first Book entry, evidence/hero_final_craft_v01).
   Every #crumb rule is scoped body:not([data-hub]): the City hub keeps its own
   presentation (f2hub.css §11). Loaded after every other sheet.
   ============================================================================ */

/* ------------------------------------------------------------------ §1 TOKENS */
.hero {
  --hi-brass: 200, 167, 105;          /* #C8A769 — the restrained brass */
  --hi-brass-hi: 239, 217, 166;       /* #EFD9A6 — its lit edge */
  --hi-seam: rgba(0, 0, 0, .55);
  --hi-seam-lit: rgba(255, 246, 224, .045);
  --hi-ease: cubic-bezier(.23, 1, .32, 1);
  --hi-settle: cubic-bezier(.16, .86, .22, 1);
}

/* ------------------------------------------------------------------ §2 THE HEAD
   The eyebrow and the explanatory paragraph are retired. The column is the
   headline between two hairlines: the registration cue above it, the address
   line below it. */
.hero__reg { position: relative; display: block; height: 11px; margin: 0 0 1.5rem; }
.hero__reg-mk {
  position: absolute; left: 0; top: 0; width: 11px; height: 11px;
  background: url("hero-rail/hp_reg.png") 0 0 / 100% 100% no-repeat;
}
.hero__reg-rule {
  position: absolute; left: 19px; right: 0; top: 5px; height: 1px;
  background: rgba(214, 196, 150, .19); transform-origin: 0 50%;
}
.hero__reg::after {
  content: ""; position: absolute; right: 0; top: 2px; width: 1px; height: 7px;
  background: rgba(var(--hi-brass), .5);
}
.hero__head .monument {
  font-size: clamp(2.6rem, .7rem + 3.25vw, 3.9rem); line-height: .98; margin: 0;
}
html[lang="ko"] .hero__head .monument { font-size: clamp(2.25rem, .6rem + 2.85vw, 3.35rem); line-height: 1.12; }
html[lang="ja"] .hero__head .monument { font-size: clamp(2.2rem, .6rem + 2.8vw, 3.3rem); line-height: 1.1; }
.hero__head .monument__l { padding-bottom: .1em; }
.monument__w > span { display: block; transform-origin: 0 50%; }
em.monument__l > span { transform-origin: 0 50%; }
.hero__head .locus { margin-top: 1.6rem; }

/* ------------------------------------------------------------------ §3 ACQUISITION
   world resolves (hero3d.js) → the registration cue strikes → the first line
   acquires focus across its width → the second settles into its baseline
   with a little more weight → the address line and the entry affordance
   lock. ~1.1 s, once per page. Masks, blur and tracking exist only while the
   phrase runs; at rest ([data-hero-type="rest"]) nothing is animated. */
@media (prefers-reduced-motion: no-preference) {
  html:not(.no-js):not([data-hero-type]) .hero__reg-rule { transform: scaleX(0); }
  html:not(.no-js):not([data-hero-type]) :is(.hero__reg-mk, .monument__w > span, em.monument__l > span, .hero__head .locus, .hero__hint, .nowvol__act) { opacity: 0; }
  html:not(.no-js):not([data-hero-type]) .hero__reg::after { opacity: 0; }

  html[data-hero-type="acquire"] .hero__reg-mk { animation: ht-mk 420ms var(--hi-ease) 0ms both; }
  html[data-hero-type="acquire"] .hero__reg-rule { animation: ht-rule 520ms var(--hi-ease) 50ms both; }
  html[data-hero-type="acquire"] .hero__reg::after { animation: ht-fade 200ms linear 420ms both; }
  /* line 1's soft focus front: a static window (.monument__w) whose soft-edged
     mask sweeps across it while the type inside resolves in place. The two
     never have to cancel each other, so neither can drag the letters if one
     of them runs late on a busy frame. */
  html[data-hero-type="acquire"] .monument__w {
    -webkit-mask-image: linear-gradient(90deg, #000 0 40%, rgba(0, 0, 0, .35) 49%, transparent 58%);
            mask-image: linear-gradient(90deg, #000 0 40%, rgba(0, 0, 0, .35) 49%, transparent 58%);
    -webkit-mask-size: 260% 100%; mask-size: 260% 100%;
    -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat;
    animation: ht-win 880ms var(--hi-ease) 150ms both;
  }
  html[data-hero-type="acquire"] .monument__w > span { animation: ht-l1 880ms var(--hi-ease) 150ms both; }
  html[data-hero-type="acquire"] em.monument__l > span { animation: ht-l2 820ms var(--hi-settle) 300ms both; }
  html[data-hero-type="acquire"] .hero__hint { animation: ht-ins 240ms var(--hi-ease) 780ms both; }
  html[data-hero-type="acquire"] .nowvol__act { animation: ht-cta 240ms var(--hi-ease) 800ms both; }
  html[data-hero-type="acquire"] .nowvol__g { animation: ht-glyph 220ms var(--hi-ease) 800ms both; }
  html[data-hero-type="acquire"] .nowvol__act::after { animation: ht-line 240ms var(--hi-ease) 820ms both; }
  /* the phrase's last lock: v2.js sets rest on this animation's end */
  html[data-hero-type="acquire"] .hero__head .locus { animation: ht-ins 260ms var(--hi-ease) 860ms both; }
  /* NO WORLD BEHIND THE TYPE (flat atlas, or a world that never came): a
     plain settle — opacity only, no mask, blur or tracking; the optical
     acquisition is never simulated against missing spatial content
     (final bounded repair v0.1; v2.js htSettle) */
  html[data-hero-type="settle"] :is(.hero__reg-mk, .monument__w > span, em.monument__l > span, .hero__head .locus, .hero__hint, .nowvol__act),
  html[data-hero-type="settle"] .hero__reg::after { animation: ht-settle 280ms var(--hi-ease) both; }
}
@keyframes ht-settle { from { opacity: 0; } to { opacity: 1; } }
@keyframes ht-mk { from { opacity: 0; transform: scale(.7) rotate(-22.5deg); } 55% { opacity: 1; } to { opacity: 1; transform: none; } }
@keyframes ht-rule { from { transform: scaleX(0); } to { transform: scaleX(1); } }
@keyframes ht-fade { from { opacity: 0; } to { opacity: 1; } }
/* line 1: optical acquisition — the soft front crosses the line while the
   blur resolves, the letters close up (a 3% set, drawn in by the transform)
   and the baseline registers */
@keyframes ht-win { from { -webkit-mask-position: 100% 0; mask-position: 100% 0; } to { -webkit-mask-position: 0 0; mask-position: 0 0; } }
@keyframes ht-l1 {
  0%   { opacity: 0; filter: blur(7px); transform: translate3d(0, .07em, 0) scaleX(1.03); }
  36%  { opacity: .9; filter: blur(2.2px); }
  74%  { filter: blur(.35px); }
  100% { opacity: 1; filter: blur(0); transform: translate3d(0, 0, 0) scaleX(1); }
}
/* line 2: related, not a clone — it settles into its own baseline slot from
   just below, with more weight and no sweep */
@keyframes ht-l2 {
  0%   { opacity: 0; filter: blur(5px); transform: translate3d(0, .32em, 0) scaleX(1.02); }
  46%  { opacity: .94; filter: blur(1.1px); }
  100% { opacity: 1; filter: blur(0); transform: translate3d(0, 0, 0) scaleX(1); }
}
@keyframes ht-ins { from { opacity: 0; filter: blur(1.5px); transform: translate3d(-.45em, 0, 0); } to { opacity: 1; filter: blur(0); transform: translate3d(0, 0, 0); } }
@keyframes ht-cta { from { opacity: 0; filter: blur(1.5px); transform: translate3d(-.5em, 0, 0); } to { opacity: 1; filter: blur(0); transform: translate3d(0, 0, 0); } }
@keyframes ht-glyph { from { opacity: 0; transform: translateY(2px) scale(.72); } to { opacity: 1; transform: none; } }
@keyframes ht-line { from { opacity: 0; transform: scaleX(0); } }

/* ------------------------------------------------------------------ §4 THE READOUT
   Three ranks, not a telemetry wall: the inscription (what the instrument is
   addressed to), the primary state in the editorial voice, the measurement
   in the instrument voice. Nothing added. */
#finder .readout__k { align-items: center; gap: .6rem; margin-bottom: .45rem; }
#finder .readout__k::before {
  content: ""; flex: none; width: 13px; height: 1px; background: rgba(var(--hi-brass), .72);
  box-shadow: 0 0 0 .5px rgba(var(--hi-brass), .08);
}
#ro-k { font-size: var(--t-micro); letter-spacing: .26em; color: var(--ink-4); }
html[lang="ko"] #ro-k, html[lang="ja"] #ro-k { letter-spacing: .1em; font-size: var(--t-label); }
#finder .readout__name b { font-weight: 560; font-size: clamp(1.6rem, 1.2rem + .78vw, 2.1rem); letter-spacing: -.022em; line-height: 1.02; }
html[lang="ko"] #finder .readout__name b { font-weight: 400; }
#finder .readout__clock { margin-top: .5rem; gap: .55rem; }
#finder .readout__clock time { font-size: clamp(1.45rem, 1.1rem + .72vw, 1.9rem); font-weight: 400; letter-spacing: -.02em; color: var(--ink-2); }
#finder .readout__tz { color: var(--ink-4); letter-spacing: .14em; }
#finder .readout__sun { margin-top: .3rem; }
#finder .readout__sub { margin-top: .5rem; color: var(--ink-3); letter-spacing: .1em; line-height: 1.55; }
#finder .readout__list { color: var(--ink-2); letter-spacing: .14em; }

/* ------------------------------------------------------------------ §5 THE VOLUMES
   world locus → seat → volume → entry affordance, answering as one object.
   Each volume stands in a shallow seat with an engraved lip; the locus at the
   lip's centre is lit for the active destination (the same warm point the
   globe and the header's aperture carry). */
.cvol__seat {
  position: absolute; z-index: -1; left: calc(var(--th) - 12px); bottom: 0;
  width: calc(var(--w) + 18px); height: 14px; pointer-events: none;
  background: url("hero-rail/hp_seat.png") 0 0 / 100% 100% no-repeat;
  opacity: .72; transform-origin: 50% 72%;
  transition: opacity 320ms var(--hi-ease), transform 420ms var(--hi-ease);
}
.cvol__locus {
  position: absolute; left: 50%; bottom: 1.3px; width: 5px; height: 5px; margin-left: -2.5px; border-radius: 50%;
  background: rgba(var(--hi-brass), .5); box-shadow: 0 0 0 1px rgba(7, 8, 11, .92);
  transition: background 320ms var(--hi-ease), box-shadow 420ms var(--hi-ease), transform 320ms var(--hi-ease);
}
.cvol.is-active .cvol__locus { background: rgba(255, 228, 170, .95); box-shadow: 0 0 0 1px rgba(7, 8, 11, .92), 0 0 7px 1.5px rgba(255, 210, 132, .5); }
/* the entry affordance: legible at rest, its struck hairline partly drawn */
#finder .nowvol__act { color: var(--ink-2); }
#finder .nowvol__act::after { background: rgba(var(--hi-brass-hi), 1); opacity: .5; }
#finder .nowvol__g { transition: transform 320ms var(--hi-ease), opacity 220ms var(--hi-ease); }
/* HOVER (a fine pointer): the glyph wakes, the hairline tensions across,
   the copy locks in brass, the seat answers, and the volume lifts off it */
@media (hover: hover) and (pointer: fine) {
  #finder .cvol:hover .cvol__seat { opacity: 1; transform: scaleX(1.07); }
  #finder .cvol:hover .cvol__locus { background: rgba(var(--hi-brass-hi), .95); }
  #finder .cvol.nowvol:hover .nowvol__act { color: rgba(var(--hi-brass-hi), 1); }
}
/* FOCUS: the Hero's own ring — a brass hairline and a faint brass halo round
   the whole row (box-shadow only: the row's box is identical focused or not) */
#finder .cvol:focus-visible { outline: none; box-shadow: 0 0 0 1px rgba(var(--hi-brass-hi), .74), 0 0 0 4px rgba(var(--hi-brass), .16); border-radius: 4px; }
#finder .cvol:focus-visible .mb__cover {
  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);
}
#finder .cvol:focus-visible .cvol__seat { opacity: 1; transform: scaleX(1.07); }
#finder .cvol.nowvol:focus-visible .nowvol__act { color: rgba(var(--hi-brass-hi), 1); }
/* PRESS: the volume is pressed into its seat, the locus strikes */
#finder .cvol:active .cvol__seat { opacity: 1; transform: scaleX(.96); transition-duration: 120ms; }
#finder .cvol:active .cvol__locus { background: #FFF1CC; box-shadow: 0 0 0 1px rgba(7, 8, 11, .92), 0 0 10px 2px rgba(255, 214, 140, .7); transition-duration: 90ms; }
/* LIFTED: while the volume is in hand its console seat stands empty-lit */
body[data-state="opening"] .cvol.nowvol .cvol__locus,
body[data-state="open"] .cvol.nowvol .cvol__locus { background: rgba(255, 228, 170, .95); box-shadow: 0 0 0 1px rgba(7, 8, 11, .92), 0 0 9px 2px rgba(255, 210, 132, .55); }

/* ------------------------------------------------------------------ §6 THE SCALE INSTRUMENT
   One integrated optical instrument, not two roundels on a strip: a single
   precision aperture forms the body's left end (bezel → smoked face →
   radial marks → an iris that closes with the scale the reader is at), the
   stops are inscriptions on a calibrated rule, the addressed stop carries a
   turned brass bead seated in the rule, the field width is the measurement.
   Semantics, order and behaviour are v2.js's and unchanged. */
body:not([data-hub]) #tree .crumb {
  position: relative; display: inline-flex; align-items: stretch; flex-wrap: nowrap; gap: 0;
  height: 46px; min-height: 46px; margin: 0; padding: 0 20px 0 50px;
  border: 1px solid rgba(214, 196, 150, .2); border-radius: 23px;
  background: url("hero-rail/hp_chassis.png") 0 0 / 4px 100% repeat-x;
  background-color: transparent;
  box-shadow:
    inset 0 1px 0 rgba(255, 246, 224, .05),
    inset 0 -1px 0 rgba(0, 0, 0, .5),
    0 1px 0 rgba(0, 0, 0, .55),
    0 14px 28px -16px rgba(0, 0, 0, .9);
  letter-spacing: .2em;
}
html[lang="ko"] body:not([data-hub]) #tree .crumb, html[lang="ja"] body:not([data-hub]) #tree .crumb { letter-spacing: .06em; }
/* the retired roundels: ::before goes, ::after becomes the body's end-stop */
body:not([data-hub]) #tree .crumb::before { content: none; }
body:not([data-hub]) #tree .crumb::after {
  content: ""; position: absolute; left: auto; right: 8px; top: 50%; z-index: 3;
  width: 5px; height: 5px; margin-top: -2.5px; border-radius: 50%;
  border: 1px solid rgba(var(--hi-brass), .5); background: #0A0B0E; box-shadow: none;
}
/* the aperture */
.crumb__ap { display: none; }
body:not([data-hub]) #tree .crumb__ap {
  display: block; position: absolute; left: -1px; top: -1px; width: 46px; height: 46px; z-index: 4;
  border-radius: 50%; pointer-events: none;
  background: url("hero-rail/hp_aperture.png") 0 0 / 100% 100% no-repeat;
  box-shadow: 0 2px 7px rgba(0, 0, 0, .6), 0 0 0 .5px rgba(0, 0, 0, .9);
}
.crumb__iris {
  position: absolute; inset: 11px; border-radius: 50%;
  border: 1px solid rgba(var(--hi-brass-hi), .62);
  box-shadow: 0 0 0 .5px rgba(0, 0, 0, .8), inset 0 0 6px rgba(var(--hi-brass-hi), .08);
  transition: inset 560ms var(--hi-settle), border-color 320ms var(--hi-ease);
}
body[data-level="continent"] .crumb__iris { inset: 14.5px; border-color: rgba(var(--hi-brass-hi), .74); }
body[data-level="country"] .crumb__iris { inset: 17.5px; border-color: rgba(var(--hi-brass-hi), .9); }
.crumb__core {
  position: absolute; left: 50%; top: 50%; width: 4px; height: 4px; margin: -2px 0 0 -2px; border-radius: 50%;
  background: #FFE9B8; box-shadow: 0 0 6px 1.5px rgba(255, 214, 140, .5);
  transition: box-shadow 420ms var(--hi-ease);
}
body[data-level="country"] .crumb__core { box-shadow: 0 0 8px 2.5px rgba(255, 214, 140, .66); }
/* the calibrated rule along the body's foot */
body:not([data-hub]) #tree .crumb__rule {
  left: 50px; right: 22px; bottom: 4px; height: 7px;
  background: url("hero-rail/hp_rule.png") 0 100% / 16px 7px repeat-x; opacity: .9;
}
/* the stops: inscriptions divided by milled seams */
body:not([data-hub]) #tree .crumb__path { gap: 0; padding: 0 .2rem; }
body:not([data-hub]) #tree .crumb__path li + li { border-left: 1px solid var(--hi-seam); box-shadow: 1px 0 0 var(--hi-seam-lit) inset; }
body:not([data-hub]) #tree .crumb__path button {
  height: 100%; padding: 0 .8rem 7px; gap: .5rem; border: 0; border-radius: 0;
  color: var(--ink-3); font-size: var(--t-label); letter-spacing: inherit;
  transition: color 220ms var(--hi-ease), transform 160ms var(--hi-ease), box-shadow 220ms var(--hi-ease);
}
html[lang="en"] body:not([data-hub]) #tree .crumb__path button { text-transform: uppercase; }
body:not([data-hub]) #tree .crumb__path button::before { opacity: .55; }
/* the registration dot: every stop is plotted on the rule */
body:not([data-hub]) #tree .crumb__path button::after {
  bottom: 5px; width: 3px; height: 3px; margin-left: -1.5px;
  background: rgba(var(--hi-brass), .55); box-shadow: 0 0 0 1px rgba(7, 8, 11, .9);
  transition: transform 320ms var(--hi-ease), background 220ms var(--hi-ease), box-shadow 320ms var(--hi-ease);
}
/* ACTIVE: the addressed stop — ivory inscription, the bead seated in the rule */
body:not([data-hub]) #tree .crumb__path button[aria-current="location"] { color: var(--ink); border: 0; }
body:not([data-hub]) #tree .crumb__path button[aria-current="location"]::before { opacity: 1; }
body:not([data-hub]) #tree .crumb__path button[aria-current="location"]::after {
  bottom: 2px; width: 9px; height: 9px; margin-left: -4.5px;
  background: url("hero-rail/hp_bead.png") 0 0 / 100% 100% no-repeat;
  box-shadow: 0 0 8px 1px rgba(240, 208, 132, .32);
}
/* HOVER: the inscription inks, its dot takes brass */
@media (hover: hover) and (pointer: fine) {
  body:not([data-hub]) #tree .crumb__path button:hover { color: var(--ink); }
  body:not([data-hub]) #tree .crumb__path button:hover::before { opacity: 1; }
  body:not([data-hub]) #tree .crumb__path button:not([aria-current]):hover::after { background: rgba(var(--hi-brass-hi), .95); transform: scale(1.4); }
  body:not([data-hub]) #tree :is(.crumb__back, .crumb__reset):hover { color: var(--ink); background: rgba(255, 246, 224, .035); }
}
/* PRESS: the stop is pressed into the body, the bead answers */
body:not([data-hub]) #tree .crumb__path button:active { transform: translateY(1px); color: var(--ink); transition-duration: 90ms; }
body:not([data-hub]) #tree .crumb__path button:active::after { box-shadow: 0 0 10px 2px rgba(255, 214, 140, .6); }
/* FOCUS: a brass hairline inside the body round the focused stop — never the
   browser's ring, never a layout change */
body:not([data-hub]) #tree :is(.crumb__path button, .crumb__back, .crumb__reset):focus-visible {
  outline: none; border-radius: 15px;
  box-shadow: inset 0 0 0 1px rgba(var(--hi-brass-hi), .78), inset 0 0 0 3.5px rgba(var(--hi-brass), .14);
}
body:not([data-hub]) #tree .crumb__path button:focus-visible { color: var(--ink); }
/* BACK and RESET: engraved step controls at the ends of the path */
body:not([data-hub]) #tree .crumb__back,
body:not([data-hub]) #tree .crumb__reset {
  padding: 0 .85rem 7px; color: var(--ink-3); background: none; border: 0;
  transition: color 220ms var(--hi-ease), background 220ms var(--hi-ease), box-shadow 220ms var(--hi-ease);
}
body:not([data-hub]) #tree .crumb__back { padding-left: .55rem; border-right: 1px solid var(--hi-seam); box-shadow: -1px 0 0 var(--hi-seam-lit) inset; }
body:not([data-hub]) #tree .crumb__reset { border-left: 1px solid var(--hi-seam); box-shadow: 1px 0 0 var(--hi-seam-lit) inset; }
body:not([data-hub]) #tree .crumb__back:active, body:not([data-hub]) #tree .crumb__reset:active { color: var(--ink); transform: translateY(1px); }
/* the measurement: the true width of the addressed field (hero3d.js) */
body:not([data-hub]) #tree .crumb__scale {
  padding: 0 .95rem 7px; color: var(--ink-3); letter-spacing: .16em;
  border-left: 1px solid var(--hi-seam); box-shadow: 1px 0 0 var(--hi-seam-lit) inset;
}
body:not([data-hub]) #tree .crumb__scale::before { opacity: .6; }

/* ------------------------------------------------------------------ §7 THE HELD VOLUME
   A docking mark at the lifted volume's foot, its locus the volume's place;
   the return control speaks the same object grammar (RETURN TO PLATE). */
.held::before {
  content: ""; width: 136px; height: 14px; margin: -10px 0 -.6rem; flex: none;
  background: url("hero-rail/hp_dock.png") 0 0 / 100% 100% no-repeat;
  opacity: 0; transform: scaleX(.7);
  transition: opacity 360ms var(--hi-ease), transform 520ms var(--hi-settle);
}
body[data-state="open"] .held::before { opacity: .9; transform: none; transition-delay: 80ms; }
.held__back { border-bottom-color: rgba(var(--hi-brass), .45); }
.held__back:hover { color: var(--ink); border-bottom-color: rgba(var(--hi-brass-hi), .9); }
.held__back:focus-visible { outline: none; color: var(--ink); border-radius: 3px; border-bottom-color: rgba(var(--hi-brass-hi), .9);
  box-shadow: 0 0 0 1px rgba(var(--hi-brass-hi), .74), 0 0 0 4px rgba(var(--hi-brass), .16); }
.held__back:active { color: rgba(var(--hi-brass-hi), 1); transform: translateY(1px); }
/* OPEN MAPBOOK (Hero → Mapbook First Spread integration v0.1): the published
   volume's second act, beside the way back and in the same grammar — the
   brass voice lit, an opening book where RETURN TO PLATE has a closing one. */
.held__read {
  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); text-decoration: none; border-bottom: 1px solid rgba(var(--hi-brass-hi), .62); -webkit-tap-highlight-color: transparent;
  transition: color var(--m-micro) var(--ease), border-color var(--m-micro) var(--ease);
}
html[lang="ko"] .held__read, html[lang="ja"] .held__read { letter-spacing: .06em; }
.held__read svg { width: 14px; height: 14px; fill: none; stroke: rgba(var(--hi-brass-hi), 1); stroke-width: 1.15; stroke-linecap: round; stroke-linejoin: round; }
.held__read:hover { border-bottom-color: rgba(var(--hi-brass-hi), 1); }
.held__read:focus-visible { outline: none; border-radius: 3px; border-bottom-color: rgba(var(--hi-brass-hi), .9);
  box-shadow: 0 0 0 1px rgba(var(--hi-brass-hi), .74), 0 0 0 4px rgba(var(--hi-brass), .16); }
.held__read:active { transform: translateY(1px); }
.held__read[aria-disabled="true"] { pointer-events: none; }
/* a phone cannot hold three acts on one line: the gesture hint takes its own */
@media (max-width: 560px) {
  .held__do { flex-wrap: wrap; justify-content: center; row-gap: .15rem; }
  .held__hint { flex-basis: 100%; }
}
/* THE DEPARTURE. The Hero steps back from the volume the reader chose to open:
   its instruments and printed type leave, and a veil in the page's own night
   closes in around the volume (v2.js §7b follows the volume with it each
   frame). The veil holds the input until the page is left or the departure is
   called back (html[data-read="back"]). */
html[data-read]:not([data-read="back"]) :is(#ih, .skip, .hero__head, #finder > *, #tree, .spine-rail, .held, .hero__labels, .hero__scrim, .hero__grain) {
  opacity: 0 !important; pointer-events: none !important;
  transition: opacity 300ms cubic-bezier(.23, 1, .32, 1) !important;
}
/* the field's own vignette and grain leave last, under the closed veil, so the
   world never brightens as the Hero steps back and the volume is left bare */
html[data-read="depart"] :is(.hero__scrim, .hero__grain) { transition: opacity 320ms linear 520ms !important; }
/* called back (Escape, or Back from the Mapbook): each returns to its own state at
   once, under the veil, which is what fades -- a page restored from the page cache
   does not reliably present an opacity transition started on its first frames */
html[data-read="back"] :is(#ih, .skip, .hero__head, #finder > *, #tree, .spine-rail, .held, .hero__labels, .hero__scrim, .hero__grain) {
  pointer-events: none !important; transition: none !important;
}
.read-veil {
  position: fixed; inset: 0; z-index: 2147483000; pointer-events: none; opacity: 0;
  background: #05060C;
  --rx0: 0px; --rx1: 100vw; --ry0: 0px; --ry1: 100vh; --rf: 26px;
  mask-image: linear-gradient(#000 0 0),
    linear-gradient(90deg, transparent calc(var(--rx0) - var(--rf)), #000 var(--rx0), #000 var(--rx1), transparent calc(var(--rx1) + var(--rf))),
    linear-gradient(180deg, transparent calc(var(--ry0) - var(--rf)), #000 var(--ry0), #000 var(--ry1), transparent calc(var(--ry1) + var(--rf)));
  mask-composite: exclude, intersect;
  transition: opacity 520ms cubic-bezier(.23, 1, .32, 1);
}
html[data-read] .read-veil { opacity: 1; pointer-events: auto; cursor: progress; }
html[data-read="back"] .read-veil { opacity: 0; transition: opacity 560ms cubic-bezier(.45, 0, .55, 1); }

/* ------------------------------------------------------------------ §8 NARROW SCREENS
   The same instrument at 390, recomposed rather than stripped: the headline
   stays a headline, the volumes and their entry affordance return beneath
   the world (they had no phone presence), the scale instrument spans the
   column with its measurement printed at world scale. */
@media (max-width: 760px) {
  .hero__in {
    grid-template-rows: auto auto minmax(0, auto) auto auto;
    grid-template-areas: "head" "find" "stage" "vols" "rail";
  }
  .hero__reg { margin-bottom: 1.1rem; }
  .hero__head .monument { font-size: clamp(2.55rem, 11.4vw, 3.3rem); line-height: 1; }
  html[lang="ko"] .hero__head .monument { font-size: clamp(2.1rem, 9.4vw, 2.8rem); line-height: 1.14; }
  .hero__head .locus { margin-top: 1.1rem; }
  /* THE PHONE SHELF: the two volumes stand side by side under the world,
     each on its seat, the published one with its entry affordance. It is
     sized to the space the retired eyebrow and paragraph gave back, so the
     phone Hero keeps its height: the Library plate on a phone is placed
     from that height (fow_journey.js plateRect, lite: y = heroH / 2), and
     the accepted Library composition must not move. The console's label and
     the local time stay on the wider layouts (the readout above prints the
     same state). */
  #finder .finder__now { display: block; grid-area: vols; border-top: 0; padding-top: 0; }
  .hero[data-level="country"] #finder .finder__now { display: none; }
  #finder .finder__now > .u-label { display: none; }
  #finder .cvols { flex-direction: row; gap: .45rem; }
  #finder .cvols > li { flex: 0 0 auto; min-width: 0; }
  #finder .cvols > li + li { flex: 1 1 auto; }
  /* the row's padding is trimmed by a fraction so the EN phone Hero measures exactly its START height (1005.02 px at 390) */
  #finder .cvol { --w: 28px; --hgt: 38px; --th: 5px; gap: .55rem; padding: calc(.2rem - .227px) .45rem calc(.2rem - .227px) .5rem; min-height: 44px; }
  #finder .cvol .nowvol__now { display: none; }
  #finder .cvol .nowvol__act, #finder .cvol .cvol__st { letter-spacing: .12em; }
  #finder .readout__name b { font-size: 1.45rem; }
  #finder .readout__clock time { font-size: 1.45rem; }
  /* while a volume is in hand the stage belongs to it: the readout printed on
     the stage steps aside (the desktop console already steps back, v2.css; on a
     phone .finder is display: contents, so that rule never reached it and the
     held caption was printed over the readout) */
  #finder .readout { transition: opacity 420ms var(--hi-ease), visibility 0s; }
  body:is([data-state="opening"], [data-state="open"]) #finder .readout { opacity: 0; visibility: hidden; transition: opacity 260ms var(--hi-ease), visibility 0s linear 260ms; }
  body:not([data-hub]) #tree .crumb { display: flex; width: 100%; padding-right: 18px; }
  body:not([data-hub]) #tree .crumb__path button { padding-inline: .6rem; }
  body[data-level="world"]:not([data-hub]) #tree .crumb__scale { display: inline-flex; margin-left: auto; }
}
@media (max-width: 560px) {
  body:not([data-hub]) #tree .crumb__path { padding-right: 0; }
  body:not([data-hub]) #tree .crumb__back { padding-right: .6rem; }
  body:not([data-hub]) #tree .crumb__path button { padding-inline: .5rem; }
  body[data-level="world"]:not([data-hub]) #tree .crumb__scale { padding-inline: .7rem; letter-spacing: .1em; }
}

/* ------------------------------------------------------------------ §9 REDUCED MOTION
   No blur, masks or travel: the type is present from the first frame (the
   waiting state above only exists without the preference), the re-resolve is
   skipped in v2.js, and every state here stays a plain change of state. */
@media (prefers-reduced-motion: reduce) {
  .crumb__iris, .crumb__core, .cvol__seat, .cvol__locus, .held::before { transition: none; }
  /* the departure is a change of light only: no travel, a short fade */
  html[data-read]:not([data-read="back"]) :is(#ih, .skip, .hero__head, #finder > *, #tree, .spine-rail, .held, .hero__labels, .hero__scrim, .hero__grain),
  html[data-read] .read-veil, .read-veil { transition: opacity 200ms linear !important; }
}