/* Terra Obscura / editorial education. Scoped to #tour and tour routing. */
@font-face { font-family: 'TO Inter'; font-style: normal; font-weight: 300; font-display: swap; src: url('assets/fonts/inter-light.ttf') format('truetype'); }
@font-face { font-family: 'TO Inter'; font-style: normal; font-weight: 400; font-display: swap; src: url('assets/fonts/inter-regular.ttf') format('truetype'); }
@font-face { font-family: 'TO Inter'; font-style: normal; font-weight: 500; font-display: swap; src: url('assets/fonts/inter-medium.ttf') format('truetype'); }
html { scroll-padding-top: 88px; }
body:not(.explorer-active) { height: auto; overflow: auto; background: #080908; }
#tour { --edu-font: 'TO Inter', 'Helvetica Neue', Arial, sans-serif; --edu-gutter: clamp(24px, 5.5vw, 104px); --tour-ink: var(--accent); --tour-muted: #aaa69c; --tour-gold: #d4ac76; height: auto; overflow: visible; background: #080908; font-family: var(--edu-font); }
#tour[hidden] { display: none; }
#tour .tour-nav { position: sticky; top: 0; z-index: 50; width: 100%; max-width: none; height: 88px; padding: 0 var(--edu-gutter); margin: 0; border: 0; background: #080908ee; backdrop-filter: blur(14px); }
#tour .tour-mark { display: flex; align-items: center; gap: 24px; margin: 0; color: var(--accent); text-decoration: none; font: 500 12px/1.2 var(--edu-font); letter-spacing: .2em; }
#tour .tour-edition { max-width: 100px; font: 400 8px/1.6 var(--edu-font); letter-spacing: .12em; color: #8e8a80; }
#tour .tour-chapters { display: flex; gap: 30px; margin-left: auto; margin-right: 42px; }
#tour .tour-chapters button { border: 0; background: none; color: #8e8b83; font: 400 12px var(--edu-font); padding: 10px 0; cursor: pointer; }
#tour .tour-chapters button:hover, #tour .tour-chapters button[aria-current] { color: var(--accent); }
#tour .tour-nav-actions { margin: 0; }
#tour .tour-nav-actions .tour-explorer-link { color: #17150f !important; }
#tour .tour-explorer-link { display: inline-flex; align-items: center; gap: 20px; padding: 13px 20px; border: 0; border-radius: 999px; background: #d4ac76; color: #17150f; box-shadow: none; font: 500 11px var(--edu-font); letter-spacing: .02em; text-transform: none; }
#tour .story-scroll { position: relative; display: grid; grid-template-columns: minmax(0, 1fr); height: auto; background: #080908; }
#tour .story-stage { grid-area: 1 / 1; position: sticky; align-self: start; top: 88px; width: 100%; height: calc(100svh - 88px); min-height: 0; overflow: clip; }
#tour .story-steps { display: block; grid-area: 1 / 1; position: relative; pointer-events: none; }
#tour .story-steps .story-step { height: clamp(180px, 28svh, 280px); min-height: 0; }
/* Reveal the opening after a small scroll, then allow time to read it. */
#tour .story-steps .story-step[data-focus="welcome"] { height: clamp(120px, 18svh, 180px); min-height: 0; }
#tour .story-steps .story-step[data-reveal-opening="true"] { height: clamp(180px, 28svh, 280px); }
/* The final reading state needs a viewport of track to keep the stage pinned. */
#tour .story-steps .story-step:last-child { height: 100svh; }
#tour .story-stage .story-glass h2 { font-family: var(--edu-font); font-weight: 300; letter-spacing: -.045em; text-shadow: none; }
#tour .story-glass p { font-family: var(--edu-font); font-weight: 300; text-shadow: none; }
#tour .story-count { font: 400 10px/1.6 var(--edu-font); letter-spacing: .2em; color: var(--tour-gold); }
#tour .story-stage { background: radial-gradient(ellipse at 80% 55%, #b38e5720, transparent 42%), #080908; }
#tour .story-stage::before, #tour .story-stage::after { display: none; }
#tour .story-stage[data-editorial="false"] > .studio-scene { background: none; border: 0; border-radius: 0; box-shadow: none; backdrop-filter: none; }
#tour .story-stage[data-editorial="false"] .studio-scene::before { display: none; }
#tour .story-stage .landscape-lesson { background: transparent; border: 0; border-radius: 0; box-shadow: none; }
#tour .story-stage[data-editorial="true"] .story-glass { left: var(--edu-gutter); top: 46%; bottom: auto; width: 40%; height: auto; max-height: none; padding: 0; margin: 0; transform: translateY(-50%); background: none; border: 0; box-shadow: none; backdrop-filter: none; overflow: visible; text-align: left; }
#tour .story-stage[data-editorial="true"] .story-glass h2 { font-size: clamp(44px, 5.2vw, 84px) !important; line-height: 1.03; margin: 24px 0 26px; white-space: pre-line; text-wrap: balance; }
#tour .story-stage[data-editorial="true"] .story-glass p { max-width: 480px; padding: 0; margin: 0; font-size: clamp(16px, 1.35vw, 20px) !important; line-height: 1.65 !important; color: #b7b2a7; }
#tour .story-stage[data-focus="welcome"] .story-glass { top: 46%; }
#tour .story-stage[data-focus="welcome"] .story-glass h2 { color: var(--accent); }
#tour .story-stage[data-focus="welcome"] .story-glass .story-copy--detail { min-height: 118px; margin-top: 24px; font-size: 15px !important; line-height: 1.6 !important; color: #a29d92; }
#tour .story-stage[data-focus="welcome"] .story-scroll-cue { position: absolute; top: calc(100% + 28px); bottom: auto; left: 0; right: auto; margin: 0; color: #cbb38f; font: 400 10px var(--edu-font); letter-spacing: .15em; }
#tour .story-scroll-cue::after { display: inline-block; width: 7px; height: 7px; margin: 0 0 3px 22px; }
#tour .story-stage[data-editorial="true"] > .studio-scene { position: absolute; inset: 12% var(--edu-gutter) 12% 52%; display: block; width: auto; height: auto; min-height: 0; margin: 0; padding: 0; background: none; border: 0; border-radius: 0; box-shadow: none; backdrop-filter: none; overflow: visible; }
#tour .story-stage[data-editorial="true"] .studio-scene::before { display: none; }
#tour .story-stage[data-editorial="true"] .studio-pipe { display: none; }
#tour .hero-atlas { display: none; }
#tour .story-stage[data-focus="welcome"] .hero-atlas { position: absolute; display: flex; flex-direction: column; justify-content: center; inset: -12% -6% -8%; margin: 0; }
#tour .hero-atlas svg { display: block; width: 100%; height: auto; max-height: 600px; }
#tour .hero-atlas { pointer-events: none; }
#tour #hero-atlas-points { transform-origin: 340px 282px; will-change: transform; }
#tour .hero-atlas figcaption { margin-top: -18px; text-align: center; color: #9b8d76; font: 400 8px var(--edu-font); letter-spacing: .22em; }
#tour .story-stage[data-focus="welcome"] .welcome-intro { display: none; }
#tour .story-stage[data-focus="intro"] > .studio-scene { inset: 15% 3% 16% 49%; }
#tour .story-stage[data-focus="intro"] .unet-intro { inset: 0; display: flex; gap: 22px; }
#tour .story-stage[data-focus="intro"] .unet-intro > svg { width: 100%; max-height: 440px; }
#tour .unet-diagram-heading span { font: 400 9px var(--edu-font); color: #9b927f; letter-spacing: .16em; }
#tour .unet-diagram-heading b { font: 400 16px var(--edu-font); color: #d5c5aa; }
#tour .unet-diagram-note { max-width: 360px; margin: 0 auto; font: 300 11px/1.6 var(--edu-font); color: #8e887b; }
#tour .unet-node-label, #tour .unet-end-label, #tour .unet-repeat-label { font-family: var(--edu-font); font-weight: 400; }
#tour .story-stage[data-editorial="true"] .unet-stack { filter: none; }
#tour .story-stage[data-editorial="true"]:is([data-focus="overview"], [data-focus="composition"], [data-focus="meaning"], [data-focus="detail"], [data-focus="finish"], [data-focus="sae"]) > .studio-scene { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); grid-template-rows: repeat(2, minmax(0,1fr)); gap: 32px 28px; inset: 10% var(--edu-gutter) 13% 52%; }
#tour .story-stage[data-editorial="true"] .studio-room { position: relative; inset: auto; width: auto; height: auto; padding: 0; border: 0; border-radius: 0; background: none; box-shadow: none; backdrop-filter: none; overflow: visible; transform: none; opacity: .22; filter: saturate(.35); transition: opacity .6s ease, filter .6s ease; }
#tour .story-stage[data-editorial="true"]:is([data-focus="overview"], [data-focus="sae"]) .studio-room,
#tour .story-stage[data-focus="composition"] .room-composition,
#tour .story-stage[data-focus="meaning"] .room-meaning,
#tour .story-stage[data-focus="detail"] .room-detail,
#tour .story-stage[data-focus="finish"] .room-finish { opacity: 1; filter: none; transform: none; box-shadow: none; }
#tour .story-stage[data-focus="overview"] .studio-room { filter: none !important; opacity: .8; }
#tour .story-stage[data-focus="sae"] .studio-room { transform: none !important; }
#tour .story-stage[data-editorial="true"] .room-image { inset: 0; height: 68%; width: 100%; border-radius: 3px; opacity: .72; transform: none; filter: saturate(.5) brightness(.8); z-index: 0; }
#tour .story-stage[data-editorial="true"] .studio-room::after { bottom: auto; height: 68%; background: linear-gradient(#07080744, transparent 60%); border-radius: 0; }
#tour .story-stage[data-editorial="true"] .studio-room > span { position: absolute; top: 12px; left: 12px; z-index: 2; color: #e0ceae; font: 400 8px var(--edu-font); letter-spacing: .1em; }
#tour .story-stage[data-editorial="true"] .studio-room h2 { position: absolute; top: calc(68% + 12px); left: 0; margin: 0; font: 400 clamp(13px,1.2vw,19px)/1.2 var(--edu-font); letter-spacing: -.02em; text-shadow: none; }
#tour .story-stage[data-editorial="true"] .studio-room p { position: absolute; top: calc(68% + 38px); margin: 0; max-width: none; font: 300 10px/1.5 var(--edu-font); color: #8f8a80; text-shadow: none; }
#tour .story-stage[data-focus="sae"] .studio-room h2 { top: 14px; left: 12px; font-size: 16px; z-index: 3; }
#tour .story-stage[data-focus="sae"] .studio-room > span { top: 42px; }
#tour .story-stage[data-focus="sae"] .studio-room p { display: none; }
#tour .story-stage[data-focus="sae"] .sae-strip { top: calc(100% - 56px); height: 56px; border: 0; border-radius: 0; padding: 8px 4px; background: none; }
#tour .sae-strip span { font: 400 8px var(--edu-font); color: #9b8b72; }
#tour .story-controls { position: absolute; inset: auto var(--edu-gutter) 20px auto; z-index: 22; gap: 16px; margin: 0; }
#tour .story-controls button { min-width: 0; min-height: 36px; padding: 8px 16px; border: 0; background: none; color: #b2ab9e; box-shadow: none; font: 400 11px var(--edu-font); }
#tour .story-controls button:last-child { background: #d4ac7614; border: 1px solid #d4ac7640; border-radius: 999px; color: #e4c398; }
#tour .story-progress { right: 22px; top: 35%; height: 30%; width: 1px; opacity: .65; }
#tour .story-progress i { transition: none; }
#tour .story-stage[data-editorial="false"] .story-glass h2 { white-space: normal; }
#tour .story-stage[data-focus="handoff"] .story-handoff { background: #080908cc; backdrop-filter: blur(16px); }
#tour .story-handoff span { font-family: var(--edu-font); color: #bca37e; }
#tour .story-handoff p { font: 300 22px/1.55 var(--edu-font); color: #c1bbaf; }
#tour .story-handoff a { border: 0; background: #d4ac76; color: #17150f; box-shadow: none; font: 500 12px var(--edu-font); text-transform: none; letter-spacing: 0; padding: 18px 26px; }
@media (min-width: 1600px) {
  #tour .story-stage[data-editorial="true"] .story-glass { left: max(var(--edu-gutter), calc((100% - 1440px) / 2)); width: 37%; }
  #tour .story-stage[data-editorial="true"] > .studio-scene { right: max(var(--edu-gutter), calc((100% - 1440px) / 2)); }
}
@media (max-width: 1050px) {
  #tour .tour-edition { display: none; }
  #tour .tour-chapters { gap: 22px; margin-right: 28px; }
  #tour .story-stage[data-editorial="true"] .story-glass h2 { font-size: clamp(44px,5.5vw,66px) !important; }
}
@media (max-width: 800px) {
  html { scroll-padding-top: 72px; }
  #tour .tour-nav { height: 72px; }
  #tour .tour-mark { font-size: 10px; letter-spacing: .14em; }
  #tour .tour-chapters { display: none; }
  #tour .tour-explorer-link { font-size: 10px; padding: 11px 15px; gap: 12px; }
  #tour .story-stage { top: 72px; height: calc(100svh - 72px); }
  #tour .story-stage[data-editorial="true"] .story-glass { top: 5%; left: var(--edu-gutter); width: calc(100% - var(--edu-gutter) * 2); transform: none; }
  #tour .story-stage[data-editorial="true"] .story-glass h2 { font-size: clamp(38px,7vw,58px) !important; margin: 14px 0 18px; line-height: 1.02; }
  #tour .story-stage[data-editorial="true"] .story-glass p { max-width: 600px; font-size: 15px !important; line-height: 1.6 !important; }
  #tour .story-stage[data-focus="welcome"] .story-glass { width: 82%; top: 6%; }
  #tour .story-stage[data-focus="welcome"] .story-glass h2 { font-size: clamp(46px,8.4vw,66px) !important; }
  #tour .story-stage[data-focus="welcome"] .story-glass .story-copy--detail { min-height: 125px; margin-top: 18px; font-size: 13px !important; line-height: 1.6 !important; }
  #tour .story-stage[data-focus="welcome"] > .studio-scene { inset: 48% 8% 3% 20%; opacity: .45; }
  #tour .hero-atlas figcaption { display: none; }
  #tour .story-stage[data-focus="welcome"] .story-scroll-cue { top: calc(100% + 20px); bottom: auto; left: 0; font-size: 9px; }
  #tour .story-stage[data-focus="intro"] > .studio-scene { inset: 44% 4% 9%; }
  #tour .story-stage[data-focus="intro"] .unet-intro { min-height: 0; gap: 12px; }
  #tour .story-stage[data-focus="intro"] .unet-diagram-heading { display: none; }
  #tour .story-stage[data-editorial="true"]:is([data-focus="overview"], [data-focus="composition"], [data-focus="meaning"], [data-focus="detail"], [data-focus="finish"], [data-focus="sae"]) > .studio-scene { inset: 42% var(--edu-gutter) 10%; gap: 18px 20px; }
  #tour .story-stage[data-editorial="true"] .studio-room h2 { font-size: 13px; top: calc(68% + 8px); }
  #tour .story-stage[data-editorial="true"] .studio-room p { top: calc(68% + 28px); font-size: 9px; }
  #tour .story-stage[data-focus="sae"] .studio-room { transform: none !important; }
  #tour .story-stage[data-focus="sae"] .studio-room h2 { top: 10px; left: 8px; font-size: 13px; }
  #tour .story-stage[data-focus="sae"] .studio-room > span { top: 32px; }
  #tour .story-stage[data-focus="sae"] .sae-strip { top: calc(100% - 44px); height: 44px; }
  #tour .story-progress { display: block; right: 10px; }
  #tour .story-stage[data-focus="journey"] { display: block; overflow: clip; --evidence-image-size: min(350px,calc(100vw - 156px),calc(100svh - 370px)); }
  #tour .story-stage[data-focus="journey"] > .studio-scene { position: absolute; inset: 0; display: block; width: 100%; height: 100%; min-height: 0; padding: 0; margin: 0; }
  #tour .story-stage[data-focus="journey"] .story-glass { position: absolute; left: 24px; top: 20px; width: calc(100% - 48px); height: 160px; max-height: 160px; padding: 0; margin: 0; transform: none; }
  #tour .story-stage[data-focus="journey"] .story-glass h2 { font-size: 24px !important; }
  #tour .story-stage[data-focus="journey"] .feature-console { position: absolute; left: 24px; top: 230px; width: 88px; height: 145px; flex-direction: column; padding: 8px; gap: 9px; transform: none; }
  #tour .story-stage[data-focus="journey"] .feature-console > span { font-size: 6px; }
  #tour .story-stage[data-focus="journey"] .feature-console small { font-size: 5px; }
  #tour .story-stage[data-focus="journey"] .console-dial { width: 52px; height: 52px; }
  #tour .story-stage[data-focus="journey"] .console-dial b { font-size: 16px; }
  #tour .story-stage[data-focus="journey"] .journey-gallery { position: absolute; top: 205px; left: calc(50% + 62px - var(--evidence-image-size) / 2); right: auto; bottom: auto; width: var(--evidence-image-size); height: var(--evidence-image-size); }
  #tour .story-stage[data-focus="journey"] .journey-gallery figure { grid-template-rows: var(--evidence-image-size); }
  #tour .story-stage[data-focus="journey"] .journey-gallery img { width: 100%; height: 100%; max-height: none; }
  #tour .story-stage[data-focus="journey"] .journey-track { position: absolute; left: calc(50% + 62px - var(--evidence-image-size) / 2); top: calc(255px + var(--evidence-image-size)); width: var(--evidence-image-size); height: 28px; padding: 0 6px; margin: 0; }
  #tour .story-stage[data-focus="journey"] .journey-track span { width: 26px; height: 26px; font-size: 10px; }
  #tour .story-stage[data-focus="journey"] .journey-track span::before { font-size: 9px; }
  #tour .story-stage[data-focus="journey"] .story-controls,
  #tour .story-stage:is([data-focus="space"],[data-focus="path"]) .story-controls { position: absolute; top: auto; bottom: 20px; right: 24px; margin: 0; }
  #tour .story-stage:is([data-focus="space"],[data-focus="path"]) { display: block; padding: 0; overflow: clip; }
  #tour .story-stage:is([data-focus="space"],[data-focus="path"]) .story-glass { position: absolute; left: 24px; top: 12px; width: calc(100% - 48px); max-height: 35%; overflow-y: auto; padding: 0; margin: 0; transform: none; }
  #tour .story-stage:is([data-focus="space"],[data-focus="path"]) .landscape-lesson { position: absolute; inset: 38% 12px 70px; margin: 0; min-height: 0; padding: 10px; transform: none; }
  #tour .story-stage:is([data-focus="space"],[data-focus="path"]) .lesson-preview,
  #tour .story-stage:is([data-focus="space"],[data-focus="path"]) .flight-dial-panel { --flight-panel-size: min(115px,calc((100% - 44px) / 2)); top: 12px; }
  #tour .story-stage:is([data-focus="space"],[data-focus="path"]) .lesson-map { transform: translateY(55px); }
  #tour .story-stage:is([data-focus="space"],[data-focus="path"]) .lesson-caption { font-size: 8px; transform: none; }
}
@media (max-height: 650px) and (min-width: 801px) {
  #tour .story-stage[data-editorial="true"] .story-glass h2 { font-size: 52px !important; margin-top: 12px; margin-bottom: 16px; }
  #tour .story-stage[data-editorial="true"] .story-glass p { font-size: 15px !important; }
  #tour .story-stage[data-focus="welcome"] .story-glass .story-copy--detail { font-size: 13px !important; min-height: 100px; }
}
@media (prefers-reduced-motion: reduce) {
  #tour * { animation: none !important; transition: none !important; }
}