/* Space first; the arrival sequence flows directly into the field. */
.site-header:not(.is-on-content) { background: linear-gradient(#0008, transparent); color: #fffaf0; }
.site-header:not(.is-on-content) .language-control select { color: inherit; background-color: transparent; }
.space-hero { position: relative; min-height: 680px; height: 100svh; color: #fffaf0; background: #25211b; isolation: isolate; overflow: hidden; }
.space-hero-image { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center 45%; z-index: -2; }
.space-hero::after { content: ''; position: absolute; inset: 0; z-index: -1; pointer-events: none; background: linear-gradient(180deg,#0003,transparent 32%,#0002 58%,#000b); }
.space-hero-copy { position: absolute; left: var(--gutter); bottom: 150px; }
.space-hero-copy > span { font-size: 14px; letter-spacing: .16em; }
.space-hero-copy h1 { margin: 14px 0 0; font-weight: 700; font-size: clamp(88px,14vw,200px); line-height: .85; letter-spacing: -.085em; }
.space-hero-bottom { position: absolute; bottom: max(28px,env(safe-area-inset-bottom)); left: var(--gutter); right: var(--gutter); display: flex; justify-content: space-between; align-items: end; gap: 20px; }
.space-hero-bottom p { margin: 0; font-size: 14px; line-height: 1.8; letter-spacing: .035em; }
.space-hero-bottom p span { display: block; opacity: .8; }
.space-hero-bottom a { display: inline-flex; align-items: center; gap: 24px; min-height: 48px; padding: 8px 0; color: inherit; font-size: 16px; text-decoration: none; }
.space-hero-bottom .ui-icon { width: 24px; height: 24px; }
.inline-way-in { --way-header: 0px; scroll-margin-top: 0; }
.inline-way-in .way-in-stage { top: 0; height: 100svh; min-height: 100svh; }
.inline-way-in.is-active[data-mode="scroll"] .way-in-runway { height: 280svh; }
.inline-way-in .way-in-topline { top: calc(80px + env(safe-area-inset-top)); padding-inline: var(--gutter); }
.inline-way-in .way-in-topline > span, .inline-way-in .way-in-topline a { font-size: 14px; }
.inline-way-in #way-in-skip { visibility: visible; }
.inline-way-in .way-scene-copy { left: var(--gutter); bottom: 108px; }
.inline-way-in .way-scene-copy > span { font-size: 14px; }
.inline-way-in .way-scene-copy h3 { font-size: clamp(30px,4.8vw,68px); line-height: 1.15; }
.inline-way-in .way-in-bottomline { left: var(--gutter); right: var(--gutter); bottom: max(18px,env(safe-area-inset-bottom)); }
.inline-way-in .way-in-progress { display: flex; flex: 1; max-width: 260px; gap: 6px; }
.inline-way-in .way-in-progress button { height: 44px; min-width: 28px; }
.inline-way-in .way-in-progress button .ui-icon { display: block; width: 19px; height: 19px; margin: 0 auto; }
.inline-way-in .way-in-progress button::after { width: 100%; left: 0; bottom: 0; height: 1px; border-radius: 0; box-shadow: none; }
.inline-way-in .way-in-progress button[aria-current="step"]::after { width: 100%; height: 2px; box-shadow: none; }
.inline-way-in .way-in-scroll { display: none; }
.inline-way-in #way-in-next, .inline-way-in #way-in-play { display: grid; place-items: center; flex: 0 0 44px; width: 44px; height: 44px; padding: 10px; }
.inline-way-in[data-mode="scroll"] #way-in-play { display: none; }
.inline-way-in .way-signal-mark { padding-bottom: 0; }
.inline-way-in .way-signal-mark p { font-size: 14px; }
.section-anchor { position: absolute; scroll-margin-top: 100px; }
.zones { position: relative; }
.field-cards { gap: 24px; }
.field-card { flex-basis: 88%; aspect-ratio: 16 / 10; scroll-snap-stop: always; }
.field-card:last-child { margin-right: 12%; }
.field-card::after { inset: 45% 0 0; }
.field-card > span { left: 30px; right: 30px; bottom: 28px; justify-content: start; gap: 18px; }
.field-card > span > .ui-icon:first-child { display: block; width: 28px; height: 28px; flex: 0 0 28px; }
.field-card > span > .ui-icon:last-child { margin-left: auto; }
.field-card-label { display: grid; gap: 4px; text-align: left; }
.field-card-label b { font-size: clamp(30px,4vw,58px); font-weight: 400; line-height: 1.15; }
.field-card-label small { font-size: 16px; line-height: 1.45; opacity: .9; }
.field-card-notice { position: absolute; z-index: 2; top: 18px; left: 18px; right: 18px; width: fit-content; padding: 10px 14px; background: #151510dc; color: #fffaf0; font-size: 14px; line-height: 1.5; text-align: left; }
.route-rail button { gap: 8px; }
.route-rail button > [data-icon] { display: block; }
.route-rail button > [data-icon] .ui-icon { width: 22px; height: 22px; }
.field-detail-concept img { object-fit: contain; }
.zones.is-entering .field-stage { animation: field-arrival .8s ease-out; }
.venue { display: block; padding: 0; }
.venue-panel, .venue-panel:nth-of-type(2) { position: relative; display: grid; min-height: 76svh; color: #fffaf0; isolation: isolate; margin: 0; overflow: hidden; }
.venue-panel img, .venue-panel:nth-of-type(2) img { position: absolute; inset: 0; width: 100%; height: 100%; aspect-ratio: auto; object-fit: cover; z-index: -2; }
.venue-panel::after { display: block; content: ''; position: absolute; inset: 0; background: linear-gradient(transparent 35%,#000b); z-index: -1; }
.venue-panel > div { align-self: end; padding: 80px var(--gutter) 54px; }
.venue-panel span { color: #fffaf0c9; font-size: 14px; }
.venue-panel h2 { font-size: clamp(36px,5vw,72px); }
.venue-panel p { font-size: 16px; max-width: 34em; }
.venue-panel a { color: inherit; }
.passage-panel { width: 100%; height: 65svh; max-height: 780px; margin: 0; aspect-ratio: auto; }
.passage-panel img { object-position: center; }
.visibility { padding-top: 72px; }
@keyframes field-arrival { from { opacity: .3; transform: translateY(18px); } to { opacity: 1; transform: none; } }
@media(max-width:900px) {
  .space-hero { min-height: 520px; }
  .space-hero-image { object-position: 48% center; }
  .space-hero-copy { bottom: 154px; }
  .space-hero-copy h1 { font-size: clamp(86px,23vw,150px); }
  .space-hero-copy > span { font-size: 12px; letter-spacing: .14em; }
  .inline-way-in .way-in-runway { height: auto; }
  .inline-way-in .way-in-stage { position: relative; top: 0; }
  .inline-way-in .way-in-bottomline { gap: 10px; }
  .inline-way-in .way-in-topline { gap: 12px; }
  .inline-way-in .way-in-progress { max-width: 220px; }
  .field-cards { gap: 14px; }
  .field-card { flex-basis: 96%; aspect-ratio: 4 / 5; }
  .field-card:last-child { margin-right: 4%; }
  .field-card > span { left: 18px; right: 18px; bottom: 22px; gap: 12px; }
  .field-card-label b { font-size: 34px; }
  .field-card-label small { font-size: 14px; }
  .route-rail { gap: 10px; overflow-x: auto; }
  .route-rail button { flex: 0 0 auto; }
  .route-rail > .ui-icon { flex: 0 0 16px; }
  .venue-panel, .venue-panel:nth-of-type(2) { min-height: 80svh; }
  .venue-panel > div { padding-block: 72px 38px; }
  .passage-panel { height: 65svh; }
}
@media(prefers-reduced-motion:reduce) {
  .zones.is-entering .field-stage { animation: none; }
}
