@import url('https://fonts.googleapis.com/css2?family=Barlow+Condensed:wght@400;500;600;700;800&family=IBM+Plex+Mono:wght@400;500&display=swap');
:root{color-scheme:dark;--bg:#080909;--white:#f2f2f5;--muted:#c2c2ce;--line:#62626f;font-family:'Barlow Condensed',Arial,sans-serif;font-size:16px;font-synthesis:none}
*{box-sizing:border-box}html,body{width:100%;height:100%;overflow:hidden;overscroll-behavior:none}body{position:fixed;inset:0;margin:0;background:var(--bg);color:var(--white)}button,a{-webkit-tap-highlight-color:transparent}button{font:inherit;cursor:pointer;color:inherit;min-height:40px;border:0}button:focus-visible,a:focus-visible{outline:3px solid #ddd7ff;outline-offset:5px}button[hidden],[hidden]{display:none!important}a{color:inherit;text-decoration:none}
.experience{height:100svh;height:100dvh;position:absolute;inset:0;touch-action:none;overflow:hidden}
/* The root, Safari tint and both viewport edges share one near-black color.
   Restrict light and grain to the middle; the logo field is drawn in WebGL. */
:root{--safe-top:env(safe-area-inset-top,0px);--safe-bottom:env(safe-area-inset-bottom,0px)}
html{background:var(--bg)}
.ambient{position:fixed;inset:0;height:100vh;height:100dvh;pointer-events:none;background:var(--bg)}
.ambient::before{content:"";position:absolute;inset:0;background:radial-gradient(ellipse 70% 46% at 50% 50%,#17181b 0%,rgba(23,24,27,.65) 25%,rgba(23,24,27,.28) 50%,rgba(23,24,27,.08) 72%,rgba(23,24,27,.015) 88%,rgba(23,24,27,0) 100%);pointer-events:none}
.ambient::after{position:absolute;inset:0;mask-image:linear-gradient(to bottom,transparent 4%,rgba(0,0,0,.16) 12.5%,rgba(0,0,0,.5) 21%,rgba(0,0,0,.84) 29.5%,black 38%,black 62%,rgba(0,0,0,.84) 70.5%,rgba(0,0,0,.5) 79%,rgba(0,0,0,.16) 87.5%,transparent 96%);-webkit-mask-image:linear-gradient(to bottom,transparent 4%,rgba(0,0,0,.16) 12.5%,rgba(0,0,0,.5) 21%,rgba(0,0,0,.84) 29.5%,black 38%,black 62%,rgba(0,0,0,.84) 70.5%,rgba(0,0,0,.5) 79%,rgba(0,0,0,.16) 87.5%,transparent 96%);pointer-events:none}
.ambient::after{content:"";background:url('/assets/graphite-grain.png') repeat;background-size:160px 160px;opacity:.10}
#scene{position:absolute;inset:0;width:100%;height:100%;touch-action:none;outline:none}body.inspect #scene{touch-action:none;cursor:grab}body.inspect.dragging #scene{cursor:grabbing}
.masthead{position:absolute;top:0;left:0;width:100%;padding:18px 4vw;display:flex;align-items:center;justify-content:space-between;z-index:5;gap:16px}.wordmark{display:flex;align-items:center;gap:18px;min-height:48px}.ec{font-size:30px;letter-spacing:-.5px;font-weight:700;position:relative}.wordmark-rule{height:34px;width:1px;background:var(--line);margin-left:5px}.edition{font-family:'IBM Plex Mono',monospace;font-size:.875rem;line-height:1.5;letter-spacing:.6px}.header-right{display:flex;gap:28px;align-items:center}.date{font:1rem 'IBM Plex Mono',monospace;color:var(--muted)}
.quiet-button{display:inline-flex;align-items:center;justify-content:center;gap:8px;background:transparent;font-size:1rem;padding:6px 8px;color:var(--muted)}.quiet-button:hover{color:white;text-decoration:underline}
.intro,.chapter-copy{position:absolute;left:5%;right:5%;top:96px;max-width:none;text-align:center;pointer-events:none;z-index:2}.intro{will-change:opacity,transform}.eyebrow{font-family:'IBM Plex Mono',monospace;font-size:.875rem;line-height:1.5;letter-spacing:.7px;color:var(--muted);display:flex;justify-content:center;align-items:center;gap:12px}.fine-line{width:24px;height:1px;background:var(--muted)}h1,.chapter-copy h2{font-size:clamp(1.625rem,2.6vw,2.25rem);font-weight:500;line-height:1.2;letter-spacing:-.01em;margin:10px 0}.muted{color:#c2c2ce}.recipient{font-size:1rem;color:var(--muted);line-height:1.5;margin:0}.recipient strong{color:var(--white);font-weight:500}.intro-bottom,.object-caption{display:none}.chapter-copy{opacity:0}
.action-area{position:absolute;bottom:52px;left:50%;transform:translateX(-50%);text-align:center;z-index:5;width:min(92%,490px);min-height:92px}
.primary-button{display:inline-flex;align-items:center;justify-content:center;gap:10px;background:#ededf5;color:#17171f;border:1px solid #ededf5;border-radius:5px;padding:8px 14px;font-size:1rem;font-weight:600;min-height:40px}.primary-button:hover{background:white}
.inspection-buttons{display:flex;justify-content:center;gap:12px;flex-wrap:wrap}.inspection-buttons button{white-space:nowrap}.outline-button{background:#15151ecc;border:1px solid #8a8a9e;border-radius:5px;padding:8px 12px;font-size:1rem;display:inline-flex;justify-content:center;align-items:center;gap:9px}.outline-button:hover{background:#2a2a35}
.stage-footer{font-family:'IBM Plex Mono',monospace;position:absolute;bottom:58px;left:4vw;right:4vw;min-height:48px;display:flex;justify-content:space-between;align-items:center;font-size:.875rem;letter-spacing:.2px;color:var(--muted)}.chapter-indicator{display:flex;gap:12px;align-items:center}.stage-rule{width:30px;height:1px;background:var(--line)}#footer-detail{display:none}#replay{font-size:1rem}
#fallback{position:absolute;top:45%;left:50%;transform:translate(-50%,-50%);background:#16161d;padding:28px;z-index:8;width:min(90%,460px);font-size:1rem;line-height:1.6}
/* Reading view uses actual text, independent of 3D perspective and reflection. */
#reading-view{touch-action:pan-y;width:min(94vw,680px);max-height:90svh;max-height:90dvh;padding:0;margin:auto;border:1px solid #777787;border-radius:12px;background:#15151c;color:#f6f6fa;overflow:auto;font-size:1.25rem;line-height:1.6;overscroll-behavior:contain}#reading-view::backdrop{background:#000c;backdrop-filter:blur(8px)}.reading-header{position:sticky;top:0;display:flex;align-items:center;justify-content:space-between;gap:16px;padding:12px 20px;background:#15151c;border-bottom:1px solid #555564;z-index:1;font-size:1rem}.reading-header .outline-button{min-height:40px}.reading-content{padding:24px 28px 28px}.reading-edition{font-size:1rem;color:#d0cfe0;margin:0}.reading-content h2{font-family:'Barlow Condensed',Arial,sans-serif;font-weight:500;font-size:clamp(2rem,7vw,3rem);line-height:1.2;margin:12px 0 24px}.reading-event{font:700 clamp(2.75rem,11vw,4rem)/1.1 'Barlow Condensed',Arial,sans-serif;margin:0 0 24px}.reading-event span{color:#d4d0f5}.reading-promise{font-size:1.375rem;margin:20px 0}.reading-details{margin:24px 0}.reading-details div{padding:12px 0;border-top:1px solid #555564}.reading-details dt{font-size:1rem;color:#d0cfe0}.reading-details dd{margin:4px 0 0;font-weight:600}.reading-message{padding:18px 0;border-top:1px solid #777787}.reading-message h3{font-size:1.5rem;margin:0}.reading-message p{margin:10px 0}.reading-note{font-size:1rem;color:#d0cfe0;border-top:1px solid #555564;padding-top:20px;margin-bottom:0}
@media(max-width:760px){.masthead{padding:12px 5%;gap:10px}.wordmark{gap:12px}.ec{font-size:27px}.edition{font-size:.875rem;letter-spacing:0}.date{display:none}.header-right{gap:0}.quiet-button{font-size:1rem;padding:6px 4px}.intro,.chapter-copy{top:88px;left:5%;right:5%}.eyebrow{font-size:.875rem}.intro h1,.chapter-copy h2{font-size:1.625rem}.recipient{font-size:1rem;line-height:1.4}.action-area{bottom:52px;width:94%}.primary-button{padding:8px 14px}.outline-button{padding:8px 12px}.inspection-buttons{gap:12px}.stage-footer{left:4%;right:4%;font-size:.875rem;bottom:58px}.stage-rule{width:18px}.chapter-indicator{gap:8px}.reading-content{padding:24px}.reading-header{padding:12px 16px;font-size:1rem}.reading-header .outline-button{font-size:1rem}.reading-promise{font-size:1.25rem}}
@media(max-width:360px){.edition{display:none}.wordmark-rule{display:none}.inspection-buttons .primary-button,.inspection-buttons .outline-button{font-size:1rem;padding:8px 12px}.reading-content{padding:20px}}
@media(prefers-reduced-motion:reduce){*{animation:none!important;scroll-behavior:auto!important}}

/* Keep copy, object and actions in stable, separated bands at every chapter. */
.intro,.chapter-copy{min-height:0}
.recipient{line-height:1.65}
.eyebrow{font-size:.75rem;letter-spacing:1.2px}

@media(max-width:760px){.intro,.chapter-copy{min-height:0}.masthead{padding-top:18px}.stage-footer{bottom:62px}.action-area{min-height:92px}.edition{font-size:.75rem}.quiet-button{font-size:.875rem}}

/* Barlow Condensed for page text; IBM Plex Mono for collector metadata. */
h1{letter-spacing:-.015em}
.reading-edition,.reading-details dt{font-family:'IBM Plex Mono',monospace}

/* Give the objects the available height without crowding the controls. */
.stage-footer{min-height:32px;bottom:12px}
.stage-footer .quiet-button{min-height:32px;padding:4px 6px}

/* Compact visible controls; retain comfortable targets on touch screens. */
button{line-height:1.25}
@media(pointer:coarse){.primary-button,.outline-button{min-height:44px}}

/* On phones, keep the presentation dominant and move replay into the masthead. */
@media(max-width:760px){
  .masthead{padding:10px 5%}
  .wordmark{min-height:40px}
  .intro,.chapter-copy{top:64px;min-height:0}
  .intro h1,.chapter-copy h2{margin:8px 0}
  .recipient{line-height:1.4}
  .action-area{bottom:max(18px,env(safe-area-inset-bottom))}
  .stage-footer{top:14px;bottom:auto;left:auto;right:5%;z-index:6}
  .chapter-indicator{display:none}
  .stage-footer .quiet-button{font-family:'Barlow Condensed',Arial,sans-serif;font-size:.875rem}
}

/* Keep design choices beside the revealed ticket, without a separate toolbar. */
.inspection-secondary{display:flex;align-items:center;justify-content:center;gap:20px;margin-top:4px}
.variant-navigation{display:flex;align-items:center;gap:2px}
.variant-navigation button{background:transparent;color:var(--muted);width:40px;min-height:40px;padding:4px;font-size:1.25rem}
.variant-navigation button:hover{color:var(--white)}
#variant-label{font: .75rem 'IBM Plex Mono',monospace;color:var(--muted);min-width:92px}
@media(pointer:coarse){.variant-navigation button{min-height:44px}}
@media(max-width:360px){.inspection-secondary{gap:12px}}

/* Ignore repeated activation while an intentional reveal is playing. */
.primary-button:disabled{cursor:progress}

/* Lower the control row while keeping the mobile home-indicator inset clear. */
.action-area{bottom:40px}
@media(max-width:760px){.action-area{bottom:max(8px,env(safe-area-inset-bottom))}}

/* Full-bleed background, with interactive content clear of the sensor housing. */
.masthead{top:var(--safe-top);padding-left:max(4vw,env(safe-area-inset-left));padding-right:max(4vw,env(safe-area-inset-right))}
.intro,.chapter-copy{top:calc(88px + var(--safe-top))}
.action-area{bottom:max(40px,var(--safe-bottom))}
.stage-footer{bottom:calc(12px + var(--safe-bottom))}
@media(max-width:760px){
  .masthead{padding-left:max(5%,env(safe-area-inset-left));padding-right:max(5%,env(safe-area-inset-right))}
  .intro,.chapter-copy{top:calc(64px + var(--safe-top))}
  .action-area{bottom:max(8px,var(--safe-bottom))}
  .stage-footer{top:calc(14px + var(--safe-top));bottom:auto;right:max(5%,env(safe-area-inset-right))}
}

/* Empty chapter copy must not reserve the removed headline space. */
#chapter-kicker{min-height:18px}