/* The Scenic Route — web tokens. A port of the film's "Color Planes" language (gfx.PAL, kinds.py).
   Futura on Macs (as in the film); Jost is the open fallback. Japanese is a ~10% accent: 0.6× the English
   line, ~85% opacity, never a headline. Vermilion only for the loud bits (capes, the title rule, one CTA). */
@import url("https://fonts.googleapis.com/css2?family=Jost:wght@400;500;600;700&family=Zen+Kaku+Gothic+New:wght@500;700;900&display=swap");

:root {
  --bone: #F2EDE3;
  --bone-2: #E9E2D4;
  --land: #E2DBCD;
  --ink: #1F2531;
  --ink-2: #3A4252;
  --ink-3: #6B7282;
  --hot: #E05A3A;
  --apricot: #F4B183;
  --mint: #A8D5BA;
  --sky: #9DC3E6;
  --lilac: #C3B5DE;
  --sage: #5F8F7A;
  --kyushu: var(--apricot);
  --shikoku: var(--mint);
  --honshu: var(--sky);
  --hokkaido: var(--lilac);

  --bg: var(--bone);
  --fg: var(--ink);
  --muted: var(--ink-3);
  --rule: rgba(31, 37, 49, .14);
  --card: #FBF8F2;

  --futura: Futura, "Futura PT", "Jost", "Avenir Next", system-ui, sans-serif;
  --jp: "Zen Kaku Gothic New", "Hiragino Sans", "Yu Gothic", sans-serif;

  --ease-out: cubic-bezier(.22, .61, .36, 1);
  --ease-back: cubic-bezier(.34, 1.4, .64, 1);
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--bg);
  color: var(--fg);
  font-family: var(--futura);
  font-weight: 500;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}
img { max-width: 100%; display: block; }
a { color: inherit; }

/* ---- type kit ------------------------------------------------------------------------------------- */
.caps { text-transform: uppercase; letter-spacing: .12em; font-weight: 500; }
.caps-wide { text-transform: uppercase; letter-spacing: .29em; font-weight: 500; }
.bold { font-weight: 700; }
.num { font-weight: 700; letter-spacing: -.03em; font-variant-numeric: tabular-nums lining-nums; }
.jp { font-family: var(--jp); font-weight: 700; font-size: .6em; opacity: .85; letter-spacing: .02em; margin-left: .45em; }
.muted { color: var(--muted); }
.hot { color: var(--hot); }

/* the title stack (the brand): JAPAN 日本 kicker, THE / SCENIC / ROUTE, hot rule, JOHN ALLARD */
.title-stack { --t: clamp(56px, 9vw, 150px); }
.title-stack .kicker { color: var(--hot); font-size: calc(var(--t) * .2); letter-spacing: .33em; text-transform: uppercase; font-weight: 500; }
.title-stack .kicker .jp { font-size: .85em; }
.title-stack h1 { margin: .08em 0 0; font-size: var(--t); line-height: .98; font-weight: 700; letter-spacing: .02em; text-transform: uppercase; }
.title-stack .rule { width: calc(var(--t) * 1.15); height: calc(var(--t) * .06); background: var(--hot); margin: calc(var(--t) * .16) 0 calc(var(--t) * .14); }
.title-stack .byline { font-size: calc(var(--t) * .2); letter-spacing: .4em; text-transform: uppercase; font-weight: 500; }

/* island stem label (map_finale): a coloured stem, bold tracked caps, the JP small */
.stem { display: inline-flex; align-items: center; gap: .6em; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; }
.stem::before { content: ""; width: 4px; align-self: stretch; min-height: 1.2em; background: var(--c, var(--ink)); }

/* day tag chip (tag kind) */
.tag { display: inline-flex; flex-direction: column; gap: .1em; padding: .5em .8em .55em; background: var(--card); border-left: 4px solid var(--c, var(--ink)); }
.tag .k { font-size: .7em; letter-spacing: .14em; text-transform: uppercase; color: var(--muted); }
.tag .v { font-weight: 700; }

/* note card A (bone card) */
.note-card { background: var(--bone); color: var(--ink); border-top: 4px solid var(--c, var(--ink)); box-shadow: 0 10px 30px rgba(31, 37, 49, .18), 0 1px 0 rgba(31, 37, 49, .08); }

/* the vermilion plane: big bone type on a hot block */
.plane { background: var(--hot); color: var(--bone); }

/* the arch window (end card) */
.arch { border-radius: 999px 999px 0 0; overflow: hidden; }

/* rise-in motion: 10 px, 0.35 s ease-out, staggered */
@keyframes rise { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
.rise { animation: rise .35s var(--ease-out) both; }

/* ink theme (night) */
.theme-ink {
  --bg: var(--ink);
  --fg: var(--bone);
  --muted: #A7ADBA;
  --rule: rgba(242, 237, 227, .14);
  --card: #262D3B;
  --land: #2C3443;
}

.sr-photo-pop { position: fixed; z-index: 50; pointer-events: none; }

@media (prefers-reduced-motion: reduce) {
  .rise, .sr-lb { animation: none !important; }
  *, *::before, *::after { transition-duration: 0s !important; scroll-behavior: auto !important; }
}