/* ============================================================================
   FOW TRAVEL — THE INSTRUMENT HEADER (Hero visual repair)

     §1  tokens         the travel-instrument material: field, glass, foil edge
     §2  header         brand slot · (the Atlas Locator: fow_atlas_locator.css) · ATLAS · KO / EN
     §3  cruise         the scrolled state: the bar condenses into a capsule
     §4  console        the Hero console's volumes, Seoul first
     §5  responsive

   Every control here is a real link or button in the markup. The motion
   (assets/fow_instrument.js) is presentation layered on those controls;
   without it, the page still reads and works. The paper world footer is
   fow_journey.css.
   ============================================================================ */

/* ---------------------------------------------------------------- §1 TOKENS */
:root {
  --foil-w: #E9D3A8;                       /* the Hero globe's warm limb */
  --foil-w-rgb: 233, 211, 168;
  --limb-c: #6F86BE;                       /* the Hero globe's cool limb */
  --glass-ink: 8, 11, 20;
  --hair: rgba(237, 233, 222, .14);
  --hair-2: rgba(237, 233, 222, .24);
  --spring: cubic-bezier(.3, 1.36, .52, 1);
  /* the capsule hugs the header content, which stops at the hero shell width */
  --ih-side: max(var(--gutter), calc(50% - var(--shell-hero, 1560px) / 2 + var(--gutter) * .4));
  --fc: #F0674A;                            /* focus brackets: the world-material focus ink (v2.css --decide) */
}

/* instrument focus: four struck corner brackets, not a browser ring */
.ih :is(a, button):focus-visible { outline: none; }
:root {
  --brackets:
    linear-gradient(var(--fc), var(--fc)) top left / 9px 1.5px no-repeat,
    linear-gradient(var(--fc), var(--fc)) top left / 1.5px 9px no-repeat,
    linear-gradient(var(--fc), var(--fc)) top right / 9px 1.5px no-repeat,
    linear-gradient(var(--fc), var(--fc)) top right / 1.5px 9px no-repeat,
    linear-gradient(var(--fc), var(--fc)) bottom left / 9px 1.5px no-repeat,
    linear-gradient(var(--fc), var(--fc)) bottom left / 1.5px 9px no-repeat,
    linear-gradient(var(--fc), var(--fc)) bottom right / 9px 1.5px no-repeat,
    linear-gradient(var(--fc), var(--fc)) bottom right / 1.5px 9px no-repeat;
}

/* the ink of a press: a ring struck out from the point of contact */
.ink-ripple {
  position: absolute; left: var(--rx); top: var(--ry); width: 12px; height: 12px; margin: -6px;
  border-radius: 50%; border: 1px solid rgba(var(--foil-w-rgb), .85); pointer-events: none; z-index: 3;
  animation: ink-ripple 640ms var(--ease-out-strong) forwards;
}
@keyframes ink-ripple { from { transform: scale(.4); opacity: 1; } to { transform: scale(6.5); opacity: 0; } }

/* ---------------------------------------------------------------- §2 HEADER */
.ih {
  position: fixed; inset-inline: 0; top: 0; z-index: 40; color: var(--ink);
  --ink: #EDE9DE; --ink-2: #B6B4AC; --ink-3: #A3A29B; --ink-4: #86857E;
  --mx: 50%; --lit: 0;
}
/* the resting hairline: the edge of the instrument, fading out at both ends */
.ih::after {
  content: ""; position: absolute; left: var(--gutter); right: var(--gutter); bottom: 0; height: 1px; pointer-events: none;
  background:
    radial-gradient(160px 1px at var(--mx) 50%, rgba(var(--foil-w-rgb), calc(.55 * var(--lit))), transparent),
    linear-gradient(90deg, transparent, var(--hair) 10%, var(--hair) 90%, transparent);
  transition: opacity 420ms var(--ease);
}
.ih__glass {
  position: absolute; inset: 0; pointer-events: none; opacity: 0;
  background: linear-gradient(180deg, rgba(var(--glass-ink), .78), rgba(var(--glass-ink), .64));
  -webkit-backdrop-filter: blur(16px) saturate(1.3); backdrop-filter: blur(16px) saturate(1.3);
  clip-path: inset(0 0 0 0 round 0);
  transition: opacity 420ms var(--ease), clip-path 640ms var(--ease-out-strong);
}
/* the cursor rides the glass as a travelling light */
.ih__glass::before {
  content: ""; position: absolute; inset: 0; opacity: var(--lit); transition: opacity 360ms var(--ease);
  background: radial-gradient(260px 120% at var(--mx) 0%, rgba(var(--foil-w-rgb), .10), transparent 70%);
}
.ih__glass::after {                                   /* the capsule's top light */
  content: ""; position: absolute; left: var(--ih-side); right: var(--ih-side); top: 8px; height: 1px;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.12) 30%, rgba(255,255,255,.12) 70%, transparent);
}
.ih__in {
  position: relative; z-index: 2; max-width: var(--shell-hero, 1560px); margin-inline: auto;
  padding: .85rem var(--gutter) .75rem;
  display: flex; align-items: center; gap: 1.25rem;
  transition: padding 520ms var(--ease-out-strong);
}
.ih__brand { flex: none; transition: transform 520ms var(--ease-out-strong); transform-origin: left center; }
.ih__brand:focus-visible { background: var(--brackets); padding-inline: .4rem; margin-inline: -.4rem; }

/* THE MARKS — the supplied cream PNGs (assets/brand/), shown unaltered through a window
   on their visible artwork: the wrapper crops the canvas's transparent margin (source px
   --x0/--y0, window --cw × --ch of the --iw-wide canvas) and reserves the mark's box
   before the image decodes, so nothing moves when it arrives. --mw sets the width. */
.mark { position: relative; display: block; width: var(--mw); aspect-ratio: var(--cw) / var(--ch); overflow: hidden; }
.mark img { position: absolute; max-width: none; height: auto; width: calc(var(--iw) / var(--cw) * 100%);
  left: calc(var(--x0) / var(--cw) * -100%); top: calc(var(--y0) / var(--ch) * -100%); }
.mark--fow { --iw: 2172; --x0: 152; --y0: 212; --cw: 1886; --ch: 296; }
.mark--fow-parent { --iw: 2172; --x0: 115; --y0: 277; --cw: 1942; --ch: 172; }
.ih__brand .mark { --mw: 8rem; }

/* THE ATLAS LOCATOR — assets/fow_atlas_locator.css (Global Atlas Instrument Phase B) */

/* ATLAS */
.ih__nav { position: relative; display: flex; align-items: center; gap: clamp(1.2rem, 3.2vw, 3.4rem); margin-inline: auto; }
.ih__item {
  position: relative; display: inline-flex; align-items: center; gap: .62rem; padding: .6rem .35rem;
  font-family: var(--font-data); font-size: .75rem; letter-spacing: .22em; text-transform: uppercase; text-decoration: none;
  color: var(--ink-3); transform: translate3d(var(--tx, 0), var(--ty, 0), 0);
  transition: color 240ms var(--ease), transform 420ms var(--ease-out-strong);
}
html[lang="ko"] .ih__item { letter-spacing: .08em; font-size: .8125rem; }
/* the field an instrument item lights around itself */
.ih__item::before {
  content: ""; position: absolute; inset: -.25rem -.9rem; border-radius: 3px; pointer-events: none; opacity: 0;
  background: radial-gradient(closest-side, rgba(var(--foil-w-rgb), .2), rgba(var(--foil-w-rgb), .05) 60%, transparent);
  transition: opacity 320ms var(--ease);
}
.ih__item:focus-visible { color: var(--ink); }
.ih__item:focus-visible::before { opacity: 1; background: var(--brackets), radial-gradient(closest-side, rgba(var(--foil-w-rgb), .11), transparent); }
/* the struck line under the word: drawn out from its centre */
.ih__item::after {
  content: ""; position: absolute; left: .35rem; right: .35rem; bottom: .15rem; height: 1px;
  background: linear-gradient(90deg, transparent, var(--foil-w), transparent);
  transform: scaleX(0); transition: transform 460ms var(--ease-out-strong);
}
/* THE NAV'S BASIS IS LANGUAGE-INVARIANT (Atlas Index precision v0.1.3, Design
   §6 page-scoped geometry). Each label reserves the wider of its EN and KO
   settings — both strings are carried on the element (data-t-en / data-t-ko)
   and stand hidden in the same grid cell — so ATLAS and LIBRARY keep their
   place when the language changes instead of re-centring on new widths. */
.ih__t { display: inline-grid; grid-template-columns: minmax(0, auto); justify-items: start; }
.ih__t::before, .ih__t::after { grid-area: 1 / 1; visibility: hidden; height: 0; overflow: hidden; white-space: nowrap; pointer-events: none; }
.ih__t::before { content: attr(data-t-en); font-family: var(--fow-font-instrument-en); font-size: .75rem; letter-spacing: .22em; }
.ih__t::after { content: attr(data-t-ko); font-family: var(--fow-font-instrument-ko); font-size: .8125rem; letter-spacing: .08em; }
.ih__glyph { width: 1.35rem; height: 1.35rem; flex: none; transition: transform 420ms var(--ease-out-strong); }
.ih__glyph svg { width: 100%; height: 100%; fill: none; stroke: currentColor; stroke-width: 1.15; stroke-linecap: round; overflow: visible; }
.ih__item[aria-current="location"] { color: var(--ink); }
@media (hover: hover) and (pointer: fine) {
  .ih__item:hover { color: #FFF8EA; text-shadow: 0 0 14px rgba(var(--foil-w-rgb), .45); }
  .ih__item:hover::before { opacity: 1; }
  .ih__item:hover::after { transform: scaleX(1); }
  .ih__item:hover .ih__glyph { transform: translateY(-2px) scale(1.14); color: var(--foil-w); }
  .ih__item:hover .g-mer { animation: g-meridian 1.6s linear infinite; }
}
.ih__item:focus-visible::after { transform: scaleX(1); }
.ih__item:focus-visible .g-mer { animation: g-meridian 1.6s linear infinite; }
.ih__item:active { transform: translate3d(var(--tx, 0), var(--ty, 0), 0) scale(.96); }
/* a meridian carried round the globe: the ellipse narrows to the pole line
   and opens again on the far side */
@keyframes g-meridian { 0% { rx: 4.2px; } 25% { rx: .4px; } 50% { rx: 4.2px; } 75% { rx: 8.6px; } 100% { rx: 4.2px; } }
/* the section the page is in, marked under the instrument (scroll state) */
.ih__spy {
  position: absolute; left: 0; bottom: -.15rem; height: 1.5px; width: var(--sw, 0px); pointer-events: none;
  background: linear-gradient(90deg, transparent, var(--foil-w) 30%, var(--foil-w) 70%, transparent);
  transform: translateX(var(--sx, 0px)); opacity: var(--so, 0);
  transition: transform 620ms var(--spring), width 620ms var(--spring), opacity 320ms var(--ease);
}

/* KO / EN — the language state, stamped */
.lang { position: relative; display: flex; align-items: center; gap: .1rem; padding: .22rem; flex: none;
  border: 1px solid var(--hair); border-radius: 999px; }
.lang button {
  position: relative; z-index: 1; font-family: var(--font-data); font-size: .6875rem; font-weight: 500; letter-spacing: .16em;
  padding: .42rem .72rem .42rem .8rem; border-radius: 999px; color: var(--ink-4);
  transition: color 260ms var(--ease), transform 380ms var(--ease-out-strong);
}
.lang button[aria-pressed="true"] { color: var(--foil-w); }
@media (hover: hover) and (pointer: fine) { .lang button:hover { color: var(--ink); } }
.lang button:active { transform: scale(.93); }
.lang button:focus-visible { outline: none; color: var(--ink); box-shadow: 0 0 0 1.5px var(--fc); }
.lang__stamp {
  position: absolute; top: .22rem; bottom: .22rem; left: 0; width: var(--lw, 2.6rem); border-radius: 999px; pointer-events: none;
  border: 1px solid rgba(var(--foil-w-rgb), .78);
  box-shadow: inset 0 0 0 2px rgba(var(--glass-ink), .9), inset 0 0 0 3px rgba(var(--foil-w-rgb), .3), 0 0 14px -2px rgba(var(--foil-w-rgb), .25);
  background: rgba(var(--foil-w-rgb), .06);
  transform: translateX(var(--lx, 0px)) rotate(-3deg);
  transition: transform 520ms var(--spring), width 520ms var(--spring);
}
.lang__stamp.is-ink { animation: stamp-ink 560ms var(--ease-out-strong); }
@keyframes stamp-ink {
  0%   { transform: translateX(var(--lx, 0px)) rotate(-14deg) scale(1.42); opacity: 0; }
  55%  { transform: translateX(var(--lx, 0px)) rotate(-1deg) scale(.92); opacity: 1; }
  100% { transform: translateX(var(--lx, 0px)) rotate(-3deg) scale(1); }
}
html:not(.ih-live) .lang button[aria-pressed="true"] { box-shadow: inset 0 0 0 1px rgba(var(--foil-w-rgb), .7); }
html:not(.ih-live) .lang__stamp { display: none; }

/* the journey line: departure → arrival, lit as the page is travelled */
.ih__prog { position: absolute; left: calc(var(--ih-side) + 16px); right: calc(var(--ih-side) + 16px); bottom: 0; height: 1px; opacity: 0; pointer-events: none;
  background: rgba(237,233,222,.08); transition: opacity 360ms var(--ease); }
.ih__prog-lit { position: absolute; inset: 0; transform-origin: 0 50%; transform: scaleX(var(--p, 0));
  background: linear-gradient(90deg, rgba(var(--foil-w-rgb), .12), rgba(var(--foil-w-rgb), .9)); }
.ih__prog-craft { position: absolute; left: 0; top: -2px; width: 5px; height: 5px; border-radius: 50%; background: var(--foil-w);
  box-shadow: 0 0 9px 2px rgba(var(--foil-w-rgb), .55); transform: translateX(calc(var(--p, 0) * var(--pw, 0px) - 2.5px)); }

/* ---------------------------------------------------------------- §3 CRUISE */
.ih[data-cruise="1"]::after { opacity: 0; }
.ih[data-cruise="1"] .ih__glass { opacity: 1; clip-path: inset(8px var(--ih-side) 0 var(--ih-side) round 14px); }
.ih[data-cruise="1"] .ih__in { padding: 1.05rem calc(var(--gutter) + 1.1rem) .45rem; }
.ih[data-cruise="1"] .ih__brand { transform: scale(.92); }
.ih[data-cruise="1"] .ih__prog { opacity: 1; }

/* the hero stands under the header's resting height */
.hero { padding-top: 5.4rem; }

/* ---------------------------------------------------------------- §4 CONSOLE */
.cvols { display: flex; flex-direction: column; gap: .15rem; }
.cvol { --w: 40px; --hgt: 55px; --th: 8px; position: relative; padding: .38rem .5rem .38rem .7rem; border-radius: 2px;
  transition: background var(--m-struct) var(--ease); }
.cvol .mb__title b, html[lang="ko"] .cvol .mb__title b, html[lang="ja"] .cvol .mb__title b { font-size: 7.4px; }
.cvol .mb__rule { font-size: 3.2px; }
.cvol .mb__foot { font-size: 3px; }
.cvol .mb__spine span { font-size: 3.6px; }
.cvol .mb__obj::after { height: 9px; right: 5px; }
.cvol .nowvol__t b { font-size: 1rem; }
.cvol .nowvol__t { gap: .08rem; }
.cvol .nowvol__act { margin-top: .12rem; }
/* the active destination's volume: a lit edge, the console's own "you are here" */
.cvol::before {
  content: ""; position: absolute; left: 0; top: .5rem; bottom: .5rem; width: 2px; border-radius: 1px;
  background: var(--foil-w); box-shadow: 0 0 10px 1px rgba(var(--foil-w-rgb), .4);
  transform: scaleY(0); transition: transform 460ms var(--spring);
}
.cvol.is-active { background: linear-gradient(90deg, rgba(var(--foil-w-rgb), .07), rgba(var(--foil-w-rgb), 0) 80%); }
.cvol.is-active::before { transform: scaleY(1); }
.cvol__st { display: inline-flex; align-items: center; gap: .42rem; align-self: flex-start; margin-top: .12rem;
  font-family: var(--font-data); font-size: var(--t-micro); letter-spacing: .18em; text-transform: uppercase; color: var(--ink-4); }
.cvol__st::before { content: ""; width: .5em; height: .5em; border: 1px solid currentColor;
  background: linear-gradient(135deg, transparent 45%, currentColor 45% 55%, transparent 55%); }
html[lang="ko"] .cvol__st { letter-spacing: .08em; font-size: var(--t-label); }
.cvol--forth { cursor: default; }
.cvol--forth .mb__cover { filter: saturate(.85); }
/* a forthcoming volume answers a press in place: pressed, and nothing gives */
.cvol.is-nudge .mb__obj { animation: vol-nudge 560ms var(--ease-out-strong); }
@keyframes vol-nudge { 0% { transform: none; } 18% { transform: translateX(-3px) rotate(-1.4deg); } 38% { transform: translateX(2.5px) rotate(1deg); }
  58% { transform: translateX(-1.5px); } 78% { transform: translateX(.8px); } 100% { transform: none; } }
@media (min-width: 1025px) and (max-height: 780px) {
  .cvol { --w: 36px; --hgt: 49px; --th: 7px; padding-block: .26rem; }
}

/* ---------------------------------------------------------------- §5 RESPONSIVE */
@media (max-width: 1279px) {
  .ih__nav { gap: 1.6rem; }
}
@media (max-width: 1024px) {
  .ih__in { gap: 1rem; }
}
/* 761–830 px (a portrait tablet): beside the Locator and the language stamp the
   nav labels no longer fit (measured, EN: ATLAS ran into the LIBRARY glyph and
   LIBRARY under KO), so the nav takes its phone form a little early — the glyphs,
   with the names kept for assistive technology (the same treatment as ≤760 px) */
@media (min-width: 761px) and (max-width: 830px) {
  .ih__item .ih__t { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
  .ih__item::after { display: none; }
  .ih__spy { display: none; }
}
@media (max-width: 760px) {
  .ih__in { padding: .6rem var(--gutter) .55rem; gap: .6rem; }
  .ih__brand.brand[data-slot="brand"] { min-width: 3rem; font-size: .75rem; }
  .ih__brand .mark { --mw: 5.5rem; }
  .ih__nav { gap: .2rem; margin-left: auto; margin-right: .1rem; }
  .ih__item { padding: .55rem .45rem; }
  .ih__item .ih__t { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
  .ih__item::after { display: none; }
  .ih__spy { display: none; }
  .lang button { padding: .38rem .52rem .38rem .6rem; }
  .ih[data-cruise="1"] .ih__in { padding: .95rem calc(var(--gutter) + .7rem) .4rem; }
  .hero { padding-top: 4.6rem; }
}
@media (max-width: 560px) {
  .ih__in { gap: .45rem; }
  .ih__brand.brand[data-slot="brand"] { min-width: 2.6rem; }
  /* the compact form (the <picture> source at the same width): the FRAME OF WAYS symbol */
  .ih__brand .mark { --mw: 1.5rem; --iw: 1254; --x0: 139; --y0: 148; --cw: 976; --ch: 905; }
  .ih__item { padding: .5rem .35rem; }
  .lang button { padding: .34rem .44rem .34rem .5rem; }
}