/* ============================================================================
   FOW TRAVEL — THE PAGE JOURNEY · layers and tracks (fow_journey.js, fow_plate.js)
   and THE PAPER WORLD FOOTER (Hero → Paper World Footer v0.1)
   Everything journey-bound is inert until the journey has mounted (html.jr):
   without script or WebGL the tracks are plain blocks and the footer is a
   plain paper footer after the Hero.
   ============================================================================ */

/* ---------------------------------------------------------------- the tracks
   A: the Hero is held while the world becomes the plate.
   F: the footer's frame is pinned over the plate while the sheet is laid down
      (it overlaps A by the Hero's height, so it is already in place when the
      Hero leaves); its last position is the footer's rest. A footer taller
      than the viewport is read natively below that rest. */
html.jr .jr-a { position: relative; height: calc(var(--jr-hero-h, 100svh) + var(--jr-ra, 0px)); }
html.jr .jr-a > .hero { position: sticky; top: 0; }
html.jr .jr-f { position: relative; z-index: 3; margin-top: calc(-1 * var(--jr-hero-h, 100svh)); height: calc(var(--jr-frame, 100vh) + var(--jr-rf, 0px)); pointer-events: none; }
html.jr .jr-f__frame { position: sticky; top: 0; height: var(--jr-frame, 100vh); }

/* ---------------------------------------------------------------- the plate
   One canvas for the whole middle of the journey and the footer's rest, over
   the Hero and under the footer's type. */
.jr-plate { position: fixed; left: 0; top: 0; z-index: 2; pointer-events: none; visibility: hidden; }

/* ---------------------------------------------------------------- Signature A
   z-order inside the Hero (isolated): gl 0 · scrim 1 · [expo] · grain 2 ·
   labels 3 · type 4. The plate itself is drawn over the Hero, through the
   Hero's camera, in the Hero's frame. */
.jr-expo { position: absolute; inset: 0; z-index: 1; pointer-events: none; overflow: hidden; visibility: hidden; contain: strict; }
.jr-expo > i {
  position: absolute; left: 0; top: 0; border-radius: 50%; will-change: transform; transform-origin: 50% 50%;
  background: radial-gradient(closest-side,
    #F2F0EA 0%, #F2F0EA 44%, rgba(242,240,234,.93) 52%, rgba(236,222,196,.66) 61%,
    rgba(233,211,168,.34) 71%, rgba(128,152,203,.12) 84%, rgba(128,152,203,0) 100%);
}
.jr-expo::after { content: ""; position: absolute; inset: 0; background: #F2F0EA; opacity: var(--jr-sheet, 0); }
/* while the journey holds the Hero, the world is choreography, not a control */
.hero.jr-held .hero__gl { pointer-events: none; }

/* ---------------------------------------------------------------- the phone
   Vertical touch belongs to the page: a vertical swipe over the globe scrolls,
   a horizontal one still turns the world, a tap still enters. */
@media (max-width: 760px) {
  html.jr .hero__gl canvas { touch-action: pan-y; }
}

/* ============================================================================
   THE PAPER WORLD FOOTER
   The settled plate is the footer's ground (.pw__stage is its place; the plate
   is fitted into it by fow_journey.js). Around it: the FOW signature, the ways
   in, the credits — quiet type on the paper, no cards. The marks are the
   supplied cream artwork printed in ink on the paper (.mark--ink).
   ============================================================================ */
.pw {
  --pw-side: var(--ih-side, var(--gutter));
  --pw-in-en: 600 .6875rem/1.2 var(--fow-font-instrument-en, var(--font-utility));
  --pw-in-ko: 600 .8125rem/1.25 var(--fow-font-instrument-ko, var(--cjk-ko));
  --pw-ed-en: italic 400 .9375rem/1.25 var(--fow-font-editorial-en, var(--font-display));
  --pw-ed-ko: 400 .78125rem/1.35 var(--fow-font-instrument-ko, var(--cjk-ko));
  position: relative; display: grid; grid-template-columns: minmax(0, 1fr); grid-template-rows: minmax(0, 1fr) auto auto;
  min-height: var(--jr-vh, 100vh);
  padding: 5.6rem var(--pw-side) calc(1.1rem + env(safe-area-inset-bottom, 0px));
  color: var(--ink);
}
html:not(.jr) .pw { min-height: 0; padding-top: 3.5rem; border-top: 1px solid var(--rule-strong); }
/* the footer holds the focus handed to it at its rest (fow_journey.js); its ways in carry their own rings */
.pw:focus { outline: none; }
html:not(.jr) .pw__stage { display: none; }
/* without script the discovery surface cannot open: the footer offers its plain links only */
.no-js .pw__item--where { display: none; }
.pw__stage { min-height: 12rem; margin-block: clamp(.25rem, 1.4vh, 1rem) clamp(.4rem, 1.8vh, 1.2rem); }
.mark--ink img { filter: brightness(0); opacity: .86; }

/* the signature and the ways in, on one rule */
.pw__in {
  display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: end; column-gap: 3rem; row-gap: 1.25rem;
  margin-top: clamp(.9rem, 2.2vh, 1.6rem); padding-top: 1.05rem; border-top: 1px solid rgba(23, 24, 28, .16);
}
.pw__sig { display: grid; gap: .5rem; min-width: 0; }
.pw__brand { margin: 0; line-height: 0; }
.pw__brand .mark { --mw: 9.25rem; }
.pw__tag { font: var(--pw-ed-en); color: var(--ink-3); }
html[lang="ko"] .pw__tag { font: var(--pw-ed-ko); letter-spacing: .02em; word-break: keep-all; }

.pw__ways { display: flex; align-items: flex-end; gap: clamp(1.25rem, 2.6vw, 2.75rem); min-width: 0; }
.pw__list { display: flex; }
.pw__item + .pw__item { border-left: 1px solid rgba(23, 24, 28, .14); }
.pw__way {
  display: grid; align-content: end; gap: .32rem; min-height: 44px; padding: .25rem clamp(.85rem, 1.5vw, 1.35rem);
  text-align: left; text-decoration: none; color: var(--ink); cursor: pointer;
}
.pw__item:first-child .pw__way { padding-left: 0; }
.pw__way b { font: var(--pw-in-en); letter-spacing: .22em; text-transform: uppercase; white-space: nowrap;
  text-decoration: underline 1px transparent; text-underline-offset: .45em; transition: text-decoration-color 200ms var(--ease); }
.pw__way i { font: var(--pw-ed-en); color: var(--ink-3); white-space: nowrap; transition: color 200ms var(--ease); }
html[lang="ko"] .pw__way b { font: var(--pw-in-ko); letter-spacing: .06em; }
html[lang="ko"] .pw__way i { font: var(--pw-ed-ko); font-style: normal; letter-spacing: .01em; }
.pw__top {
  display: inline-flex; align-items: center; gap: .55rem; min-height: 44px; padding: .25rem 0 .25rem .25rem; white-space: nowrap;
  font: var(--pw-in-en); letter-spacing: .2em; text-transform: uppercase; text-decoration: none; color: var(--ink-3);
  transition: color 200ms var(--ease);
}
html[lang="ko"] .pw__top { font: var(--pw-in-ko); letter-spacing: .06em; }
.pw__top svg { width: .75rem; height: .75rem; fill: none; stroke: currentColor; stroke-width: 1.3; stroke-linecap: round; stroke-linejoin: round; transition: transform 320ms var(--ease-out-strong); }
@media (hover: hover) and (pointer: fine) {
  .pw__way:hover b { text-decoration-color: currentColor; }
  .pw__way:hover i, .pw__top:hover { color: var(--ink); }
  .pw__top:hover svg { transform: translateY(-2px); }
}
.pw__way:focus-visible b { text-decoration-color: currentColor; }
.pw__way:focus-visible i { color: var(--ink); }

/* the credits and the publisher, under a hairline */
.pw__legal {
  display: grid; grid-template-columns: minmax(0, 1fr) auto; column-gap: 3rem; row-gap: .3rem; align-items: end;
  margin-top: .95rem; padding-top: .8rem; border-top: 1px solid rgba(23, 24, 28, .09);
}
.pw__credits { grid-column: 1; max-width: 168ch; font: 400 .65625rem/1.55 var(--fow-font-instrument-en, var(--font-utility)); color: var(--ink-4); }
html[lang="ko"] .pw__credits { font-family: var(--fow-font-instrument-ko, var(--cjk-ko)); word-break: keep-all; }
.pw__colo { grid-column: 2; grid-row: 1 / span 3; align-self: end; display: flex; align-items: center; gap: .55rem; color: var(--ink-4); }
.pw__colo small { font: 500 .625rem/1 var(--fow-font-instrument-en, var(--font-utility)); letter-spacing: .08em; }
.pw__colo .mark { --mw: 6.75rem; }

/* ---------------------------------------------------------------- the footer in the journey
   The frame is laid over the plate (the paper is the plate's own ground), and
   the type comes up around the sheet as it lands (--pw-k, written by the
   journey); before its rest the footer takes no input. */
html.jr .pw { background: transparent; pointer-events: none; }
html.jr .pw[data-rest] { pointer-events: auto; }
html.jr .pw > :not(.pw__stage) { opacity: var(--pw-k, 0); transform: translate3d(0, calc((1 - var(--pw-k, 0)) * 14px), 0); }
@media (prefers-reduced-motion: reduce) {
  html.jr .pw > :not(.pw__stage) { transform: none; }
}

/* ---------------------------------------------------------------- the footer: laptop
   the ways in take their own row under the signature when they no longer fit beside it */
@media (max-width: 1180px) {
  .pw__in { grid-template-columns: minmax(0, 1fr); }
  .pw__ways { justify-content: space-between; flex-wrap: wrap; row-gap: .4rem; }
}

/* ---------------------------------------------------------------- the footer: the phone
   The same scene composed for a thumb: the plate across the width at the top,
   the signature, the ways in as a two-by-two of real targets, the way back,
   then the credits (read below the rest on a short screen). */
@media (max-width: 760px) {
  .pw { --pw-side: var(--gutter); grid-template-rows: auto auto auto; padding-top: 4.75rem; }
  .pw__stage { min-height: 0; margin-block: .5rem 0; aspect-ratio: 1.68; }
  .pw__in { margin-top: .9rem; padding-top: .9rem; row-gap: .95rem; }
  .pw__brand .mark { --mw: 8rem; }
  .pw__ways { flex-direction: column; align-items: stretch; gap: .35rem; }
  .pw__list { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); border-top: 1px solid rgba(23, 24, 28, .12); }
  .pw__item + .pw__item { border-left: 0; }
  .pw__item { border-bottom: 1px solid rgba(23, 24, 28, .12); }
  .pw__item:nth-child(odd) { border-right: 1px solid rgba(23, 24, 28, .12); }
  .pw__way, .pw__item:first-child .pw__way { min-height: 3.6rem; padding: .7rem .8rem; align-content: center; }
  .pw__way i { white-space: normal; }
  .pw__top { align-self: flex-end; }
  .pw__legal { grid-template-columns: minmax(0, 1fr); margin-top: .5rem; }
  .pw__colo { grid-column: 1; grid-row: auto; margin-top: .45rem; }
}