/* Hoshi Mincho: Noto Serif JP subset, Copyright 2012 Google Inc. SIL Open Font License 1.1 (assets/fonts/OFL.txt) */
@font-face { font-family: 'Hoshi Mincho'; src: url('assets/fonts/hoshi-mincho.ttf') format('truetype'); font-display: swap; font-weight: 400 }

:root { color-scheme: dark; --paper: #f4f0e6; --muted: #c0c9d0; --gold: #e2cda1; --sans: Arial, 'Hiragino Kaku Gothic ProN', 'Yu Gothic', sans-serif; --serif: 'Hoshi Mincho', 'Hiragino Mincho ProN', 'Yu Mincho', YuMincho, 'Noto Serif CJK JP', serif }
* { box-sizing: border-box }
html { scroll-behavior: auto }
body { margin: 0; background: #060b11; color: var(--paper); font-family: var(--serif); font-weight: 400 }
a { color: inherit; text-decoration: none }
button { font: inherit; color: inherit; cursor: pointer }
a:focus-visible, button:focus-visible { outline: 2px solid var(--gold); outline-offset: 7px }
.skip { position: fixed; top: -100px; left: 20px; z-index: 30; padding: 12px; background: #101820 }
.skip:focus { top: 12px }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap }

/* Opening: fade up from black, like the first shot of a film. */
.curtain { position: fixed; inset: 0; z-index: 40; background: #000; pointer-events: none; animation: curtain 2.6s .25s cubic-bezier(.45, 0, .2, 1) forwards }
@keyframes curtain { to { opacity: 0; visibility: hidden } }

/* Backdrop layers, far to near. */
.backdrops { position: fixed; inset: 0; overflow: hidden; pointer-events: none }
.layer, #sky, #near { position: absolute; inset: 0; width: 100%; height: 100% }
.plate { position: absolute; inset: -3%; opacity: 0; will-change: opacity, transform }
.layer-sky .plate { background: #0c1723; transform-origin: 50% 40% }
.layer-fg .plate { transform-origin: 50% 100% }
.plate:first-child { opacity: 1 }
.plate img { width: 100%; height: 100%; object-fit: cover; object-position: center 100%; filter: saturate(.72) brightness(.87) }
.plate[data-location="bisei"] img { object-position: 55% 10% }
.plate[data-location="ishigaki"] img { object-position: 58% 60% }
.photo-error { position: absolute; bottom: 100px; right: 60px; color: #b6c4cb; font-size: 12px }
.veil { position: absolute; inset: 0; background: linear-gradient(90deg, rgba(3, 9, 16, .7), rgba(3, 9, 16, .17) 53%, rgba(3, 9, 16, .08)), linear-gradient(0deg, rgba(4, 9, 15, .75), transparent 45%, rgba(3, 8, 15, .1) 80%, rgba(3, 8, 15, .4)) }
.halo { position: absolute; inset: 0; background: radial-gradient(ellipse at 73% 31%, #cbe2df0b, transparent 40%); mix-blend-mode: screen }
.vignette { position: absolute; inset: 0; background: radial-gradient(ellipse 75% 70% at 50% 45%, transparent 55%, #00000073) }
/* Mist texture is generated in main.js; each layer is two tiles wide and loops by sliding one tile. */
.fog { position: absolute; left: 0; width: 200%; background-size: 50% 100%; background-repeat: repeat-x; -webkit-mask-image: linear-gradient(transparent, #000 45%, #000 70%, transparent); mask-image: linear-gradient(transparent, #000 45%, #000 70%, transparent); animation: drift 160s linear infinite }
.fog-back { bottom: 22%; height: 34%; opacity: .5 }
.fog-front { bottom: -6%; height: 42%; opacity: .32; animation-duration: 95s; animation-direction: reverse }
@keyframes drift { to { transform: translateX(-50%) } }
.letterbox i { position: fixed; left: 0; right: 0; z-index: 1; height: 11svh; background: #000; pointer-events: none; will-change: transform }
.letterbox i:first-child { top: 0; transform-origin: top }
.letterbox i:last-child { bottom: 0; transform-origin: bottom }
.grain { position: fixed; inset: -10%; z-index: 20; pointer-events: none; opacity: .5; mix-blend-mode: overlay; animation: grain .8s steps(1) infinite }
@keyframes grain { 0% { transform: translate(0, 0) } 20% { transform: translate(-5%, 3%) } 40% { transform: translate(4%, -5%) } 60% { transform: translate(-2%, 6%) } 80% { transform: translate(6%, 1%) } }

header { position: fixed; inset: 0 0 auto; z-index: 10; display: flex; align-items: center; justify-content: space-between; padding: 26px 5%; background: linear-gradient(#040b1260, transparent) }
header:before { content: ''; position: absolute; inset: 0 0 -40px; z-index: -1; background: linear-gradient(#050b12 60%, #050b1200); opacity: 0; transition: opacity .6s; pointer-events: none }
header.solid:before { opacity: 1 }
.brand { font-family: Georgia, serif; display: flex; align-items: center; gap: 12px; font-size: 25px; letter-spacing: .19em }
.brand .mark { color: var(--gold); font-size: 35px }
.brand small { font-family: var(--serif); font-size: 12px; letter-spacing: .13em; margin-left: 14px }
nav { display: flex; align-items: center; gap: 30px; font-size: 14px; text-shadow: 0 2px 15px #000 }
nav button { background: #09131c55; border: 1px solid #d8e0dd55; border-radius: 30px; padding: 9px 14px; font-size: 12px }
.rail { position: fixed; right: 28px; top: 44%; z-index: 12; display: flex; flex-direction: column; align-items: center; gap: 23px }
.rail a { width: 5px; height: 5px; background: #becad033; border-radius: 50%; position: relative }
.rail a:before { content: ''; position: absolute; inset: -10px }
.rail a.active { background: var(--gold); box-shadow: 0 0 14px #ecdfbd }
.rail a.active:after { content: ''; position: absolute; inset: -6px; border: 1px solid #e0d4ad55; border-radius: 50% }
.rail span { font: 10px var(--sans); writing-mode: vertical-rl; letter-spacing: .13em; margin-top: 12px; color: #d6dddf }
.scene-footer { position: fixed; bottom: 25px; left: 5%; right: 5%; z-index: 5; display: flex; justify-content: space-between; font: 11px var(--sans); letter-spacing: .2em; pointer-events: none; color: #dde1df; text-shadow: 0 2px 12px #000 }
.scene-footer .whisper { font: 12px var(--serif); letter-spacing: .2em }
#progress { position: fixed; bottom: 0; left: 0; z-index: 15; height: 1px; width: 100%; background: var(--gold); transform-origin: left; transform: scaleX(0) }
main { position: relative; z-index: 2 }
section:focus { outline: none }
.chapter { height: 230svh; position: relative }
.hero { height: 155svh }
.chapter-inner { position: sticky; top: 0; height: 100svh; min-height: 660px; padding: 125px 12% 100px; display: flex; flex-direction: column; justify-content: center; pointer-events: none; transition: opacity .9s ease, filter .9s ease }
.chapter-inner a { pointer-events: auto }
/* A chapter whose sticky frame has been released dissolves instead of sliding under the header. */
.is-out .chapter-inner { opacity: 0; filter: blur(6px) }
.is-out .chapter-inner:focus-within { opacity: 1; filter: none }
.hero-copy { margin-top: -30px; max-width: 700px }
.eyebrow { font: 11px var(--sans); letter-spacing: .27em; color: var(--gold); margin: 0 0 30px }
h1 { font-size: clamp(52px, 6.4vw, 98px); line-height: 1.48; letter-spacing: .15em; font-weight: 400; margin: 0 0 30px; text-shadow: 0 4px 40px #0006; --d: 900ms }
.intro { font-size: 16px; line-height: 2.3; letter-spacing: .13em; color: #e0e5e5 }
.hero .side-note { position: absolute; right: 10%; top: 32%; writing-mode: vertical-rl; letter-spacing: .43em; font-size: 14px; color: #e3e8e7 }
.scroll { position: absolute; bottom: 80px; left: 50%; transform: translateX(-50%); text-align: center; white-space: nowrap; font-size: 13px; letter-spacing: .12em; color: #ece4d2 }
.scroll i { display: block; width: 1px; height: 44px; margin: 19px auto 14px; background: linear-gradient(#ead6ac, transparent) }
.scroll small { display: block; font: 10px var(--sans); letter-spacing: .19em; color: #c0c9ce }
/* Title-card reveal: main.js splits headings into characters that surface out of focus. */
.split .ch { display: inline-block; opacity: 0; filter: blur(12px); transform: translateY(.3em) scale(1.06); transition: opacity 1.4s cubic-bezier(.2, .6, .2, 1), filter 1.6s cubic-bezier(.2, .6, .2, 1), transform 1.9s cubic-bezier(.16, 1, .3, 1); transition-delay: calc(var(--i) * 75ms + var(--d, 0ms)) }
.split.is-in .ch { opacity: 1; filter: none; transform: none }
.place { width: 43%; max-width: 490px; text-shadow: 0 2px 24px #0007 }
.place h2 { font-size: clamp(32px, 3.35vw, 52px); line-height: 1.7; letter-spacing: .15em; font-weight: 400; margin: 0 0 24px }
.place-name { border-top: 1px solid #e6e5d947; padding-top: 18px; display: flex; align-items: center; gap: 25px }
.place-name h3 { font-size: 24px; letter-spacing: .18em; font-weight: 400; margin: 0 }
.place-name span { font: 10px var(--sans); letter-spacing: .16em; color: #c4ced1 }
.place p { font-size: 16px; line-height: 2.05; letter-spacing: .065em; color: #e0e4e5; margin: 22px 0 }
.place .detail { font-size: 14px; color: #c1cbd0; line-height: 1.9; max-width: 390px }
.text-link { display: inline-flex; font-size: 14px; letter-spacing: .1em; padding: 10px 0 12px; border-bottom: 1px solid #d9c49988; color: var(--gold); width: fit-content }
.constellation-caption { position: fixed; left: 58%; right: 10%; top: 52%; text-align: center; pointer-events: none; opacity: 0; transition: opacity .15s }
.constellation-caption span { font: 11px var(--sans); letter-spacing: .3em; color: #f1d9ac }
.constellation-caption p { font-size: 19px; letter-spacing: .25em; margin: 10px 0 }
.constellation-caption small { font-size: 12px; color: #d1dadd; letter-spacing: .1em }
.next { position: absolute; right: 11%; bottom: 90px; font-size: 12px; color: #e6e2d4; letter-spacing: .15em; display: flex; align-items: center; gap: 22px }
.next:before { content: ''; display: block; width: 55px; height: 1px; background: linear-gradient(90deg, transparent, #d9c498) }
.photo-location { position: absolute; left: 12%; bottom: 80px; font-size: 11px; color: #c3ccd0; letter-spacing: .12em }
.guide { position: relative; min-height: 100svh; background: linear-gradient(#050b1200, #050b12 230px); padding: 200px 12% 95px; text-align: center }
.guide h2 { font-size: 34px; letter-spacing: .12em; font-weight: 400; line-height: 1.7 }
.tips { display: grid; grid-template-columns: repeat(3, 1fr); gap: 45px; margin: 70px 0 90px; text-align: left }
.tips article { border-top: 1px solid #b4c3cc40; padding-top: 25px }
.tips span { font: 11px var(--sans); letter-spacing: .2em; color: var(--gold) }
.tips h3 { font-size: 19px; font-weight: 400; line-height: 1.8; margin: 20px 0 12px }
.tips p { font-size: 15px; color: #bfc9cf; line-height: 2 }
.closing { font-size: 40px; line-height: 1.9; letter-spacing: .17em }
footer { margin-top: 80px; border-top: 1px solid #ffffff24; padding-top: 25px; text-align: left; display: grid; grid-template-columns: 1fr 2fr; gap: 35px }
footer .notes { font-size: 12px; line-height: 1.9; color: #a5b2bb }
footer p { margin: 0 0 10px }
footer .credits { display: flex; flex-wrap: wrap; gap: 12px; font-size: 11px }
footer .credits a { border-bottom: 1px solid #a5b2bb55 }
footer .maker { margin: 14px 0 0; font: 11px var(--sans); letter-spacing: .2em; color: #a5b2bb }
footer .maker a { color: var(--gold); border-bottom: 1px solid #d9c49966 }
/* Break Japanese prose at phrase boundaries and avoid one-character last lines where supported. */
.intro, .place p, .tips p, footer .notes { word-break: auto-phrase; text-wrap: pretty }
/* ?demo hides the scrollbar so screen recordings stay clean. */
.demo { scrollbar-width: none }
.demo::-webkit-scrollbar { display: none }
.motion-off .plate { transform: none !important; filter: none !important }
.motion-off .constellation-caption { transition: none }
.motion-off .curtain { display: none }
.motion-off .fog, .motion-off .grain { animation-play-state: paused }
.motion-off .chapter-inner, .motion-off .split .ch { transition: none }
.motion-off .split .ch { opacity: 1; filter: none; transform: none }

@media (min-width: 1600px) { .place { width: 38% } }
@media (max-width: 759px) {
  header { padding: 18px 6% }
  .brand { font-size: 21px; gap: 7px }
  .brand .mark { font-size: 27px }
  .brand small, nav > a { display: none }
  nav button { font-size: 11px; padding: 8px 12px }
  .rail { right: 15px; gap: 22px }
  .rail span { display: none }
  .scene-footer { bottom: 18px; left: 7%; right: 7%; font-size: 9px }
  .scene-footer .whisper { font-size: 10px }
  .chapter { height: 230svh }
  .hero { height: 155svh }
  .chapter-inner { min-height: 690px; padding: 0 9% 90px; justify-content: flex-start }
  .hero .chapter-inner { justify-content: center }
  .hero-copy { margin-top: -60px }
  .eyebrow { font-size: 10px; letter-spacing: .17em; margin-bottom: 22px }
  h1 { font-size: clamp(43px, 11.5vw, 64px); letter-spacing: .12em; line-height: 1.55 }
  .intro { font-size: 14px; line-height: 2.2 }
  .hero .side-note { top: 25%; right: 8%; font-size: 11px }
  .scroll { bottom: 82px; font-size: 12px }
  .scroll small { font-size: 9px }
  .destination .chapter-inner { padding-top: 43svh }
  .place { width: 100%; max-width: none }
  .place h2 { font-size: clamp(27px, 7vw, 35px); line-height: 1.6; margin: 0 0 15px; letter-spacing: .1em }
  .place .eyebrow { margin: 0 0 12px; font-size: 10px }
  .place-name { padding-top: 13px; gap: 22px }
  .place-name h3 { font-size: 20px }
  .place-name span { font-size: 9px }
  .place p { font-size: 14px; line-height: 1.8; margin: 15px 0 }
  .place .detail { font-size: 13px; margin: 12px 0; max-width: 310px }
  .place .poem { display: none }
  .text-link { font-size: 13px; padding: 7px 0 10px }
  .constellation-caption { left: 20%; right: 20%; top: 36% }
  .constellation-caption span { font-size: 9px }
  .constellation-caption p { font-size: 14px; margin: 6px }
  .constellation-caption small { display: none }
  .photo-location { left: 9%; bottom: 55px; font-size: 9px }
  .next { right: 9%; bottom: 87px; font-size: 11px; gap: 10px }
  .next:before { width: 25px }
  .plate img { object-position: 48% 60%; filter: saturate(.75) brightness(.9) }
  .plate[data-location="bisei"] img { object-position: 65% 63% }
  .plate[data-location="ishigaki"] img { object-position: 66% 63% }
  .veil { background: linear-gradient(0deg, #030a10c9, rgba(3, 9, 16, .72) 30%, rgba(3, 9, 16, .15) 65%, rgba(3, 9, 16, .3)) }
  .letterbox i { height: 8svh }
  /* Phones skip the full-screen grain, lens bokeh and blur dissolves to keep scrolling smooth. */
  .grain, #near { display: none }
  .is-out .chapter-inner { filter: none }
  .guide { padding: 140px 9% 80px }
  .guide h2 { font-size: 26px }
  .tips { grid-template-columns: 1fr; gap: 25px; margin: 45px 0 55px }
  .tips h3 { margin-top: 16px }
  .tips p { font-size: 14px }
  .closing { font-size: 30px }
  footer { grid-template-columns: 1fr; gap: 20px; margin-top: 65px }
}
@media (max-height: 720px) and (min-width: 760px) { .chapter-inner { padding-top: 110px; padding-bottom: 80px } .place h2 { font-size: 34px; margin-bottom: 15px } .place p { font-size: 14px; margin: 14px 0 } .place .detail { font-size: 13px } .photo-location { bottom: 45px } .next { bottom: 60px } }
@media (max-width: 759px) and (max-height: 720px) { .destination .chapter-inner { min-height: 780px; padding-top: 310px } .chapter { height: 1875px } .hero { height: 1500px } .constellation-caption { top: 36% } .next { bottom: 75px } .photo-location { bottom: 46px } }
@media (prefers-reduced-motion: reduce) {
  *, *:before, *:after { scroll-behavior: auto !important; transition: none !important; animation: none !important }
  .curtain { display: none }
  .split .ch { opacity: 1; filter: none; transform: none }
}

.sky-labels { position: relative; z-index: 3; pointer-events: none }

.place p.eyebrow { font: 11px var(--sans); letter-spacing: .23em; color: var(--gold); margin: 0 0 25px }
@media (max-width: 759px) { .place p.eyebrow { font-size: 10px; margin-bottom: 12px } }