@import url('https://fonts.googleapis.com/css2?family=Barlow+Condensed:wght@500;600;700;800&family=IBM+Plex+Mono:wght@400;500;600&display=swap');

:root {
  color-scheme: dark;
  --ground: #111210;
  --chalk: #ecebe4;
  --muted: #93958b;
  --lime: #c8f35b;
  --line: rgba(236, 235, 228, .22);
  --display: 'Barlow Condensed', 'Arial Narrow', Impact, sans-serif;
  --mono: 'IBM Plex Mono', 'SFMono-Regular', Consolas, monospace;
}

* { box-sizing: border-box; }
html { background: var(--ground); scroll-behavior: smooth; }
body { margin: 0; color: var(--chalk); background: var(--ground); font-family: var(--mono); }
::selection { color: var(--ground); background: var(--lime); }

.scene { position: fixed; z-index: 0; inset: 0; overflow: hidden; background: var(--ground); pointer-events: none; }
#world { display: none; position: absolute; inset: 0; width: 100%; height: 100%; }
.scene-grain { position: absolute; inset: 0; opacity: .12; pointer-events: none; background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.92' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.18'/%3E%3C/svg%3E"); mix-blend-mode: screen; }
.webgl-on #world { display: block; }
.webgl-on .scene-grain { opacity: .08; }

.masthead { position: fixed; z-index: 5; inset: 0 0 auto; display: flex; align-items: center; justify-content: space-between; padding: 28px 4.4vw 20px; pointer-events: none; }
.wordmark { color: var(--chalk); text-decoration: none; font: 600 22px/1 var(--display); letter-spacing: -.035em; pointer-events: auto; }
.wordmark span { position: relative; top: -6px; padding-left: 2px; color: var(--lime); font: 400 8px/1 var(--mono); }
.visit-index { display: flex; gap: 13px; align-items: center; color: #74766e; font: 10px/1 var(--mono); letter-spacing: .07em; }
.visit-index__number { color: var(--chalk); }
.visit-index__rule { width: 58px; height: 1px; background: var(--line); position: relative; }
.visit-index__rule::before { content: ''; position: absolute; inset: 0 auto 0 0; width: var(--visit-progress, 8%); background: var(--lime); transition: width .15s linear; }

.journey { position: relative; z-index: 1; }
.chapter { min-height: 100svh; position: relative; display: flex; align-items: flex-end; padding: 0 11vw 12.5vh; isolation: isolate; }
.chapter::after { content: ''; position: absolute; z-index: -1; left: 0; right: 0; bottom: 0; height: 32vh; background: linear-gradient(0deg, rgba(17,18,16,.84), transparent); opacity: .74; pointer-events: none; }
.chapter-copy { position: relative; z-index: 2; width: min(45vw, 640px); padding-bottom: 1rem; text-shadow: 0 2px 26px rgba(0,0,0,.45); }
.eyebrow, .specimen-label { margin: 0 0 17px; color: var(--lime); font: 500 10px/1.4 var(--mono); letter-spacing: .12em; text-transform: uppercase; }
.chapter h1, .chapter h2 { margin: 0; font: 700 clamp(74px, 10.3vw, 154px)/.78 var(--display); letter-spacing: -.045em; text-transform: uppercase; }
.chapter--enter { padding-bottom: 14vh; }
.chapter--enter h1 { font-size: clamp(80px, 12vw, 174px); }
.chapter--stool .chapter-copy { width: auto; }
body.webgl-on .chapter--stool .chapter-copy { opacity: 0; transform: translateY(10px); transition: opacity .28s ease, transform .28s ease; }
body.webgl-on .chapter--stool.is-complete .chapter-copy { opacity: 1; transform: translateY(0); }
.chapter--specimen { padding-bottom: 17vh; }
.chapter-copy--specimen { width: auto; min-width: 150px; }
.specimen-label { color: var(--chalk); font-size: 12px; letter-spacing: .13em; margin: 0; }
.specimen-label span { color: var(--lime); padding: 0 .18em; }
.chapter-copy--stacked { display: flex; flex-direction: column; gap: 14px; }
.chapter-copy--home { width: 54vw; }
.chapter--home h2 { font-size: clamp(64px, 9vw, 134px); }
.chapter--home .eyebrow { white-space: nowrap; }
.chapter-copy--invite { width: min(620px, 60vw); padding-bottom: 1vh; }
.chapter--invite h2 { font-size: clamp(76px, 10vw, 145px); margin-bottom: 6vh; }

.fallback-proof, .fallback-pair, .fallback-triptych { display: none; }
.fallback-proof { margin: 0; overflow: hidden; background: #22231f; border: 1px solid rgba(236,235,228,.22); }
.fallback-proof img { display: block; width: 100%; height: 100%; object-fit: cover; filter: saturate(.82) contrast(1.06); }
body:not(.webgl-on) .scene { opacity: .98; }
body:not(.webgl-on) .fallback-proof { display: block; }
body:not(.webgl-on) .chapter { align-items: center; justify-content: space-between; gap: 5vw; padding-top: 12vh; padding-bottom: 10vh; }
body:not(.webgl-on) .chapter-copy { width: 42%; flex: 0 0 42%; }
body:not(.webgl-on) .chapter--table, body:not(.webgl-on) .chapter--odd { justify-content: flex-end; }
body:not(.webgl-on) .chapter--table .fallback-proof { width: 48%; aspect-ratio: 16 / 9; }
body:not(.webgl-on) .chapter--stool .fallback-proof, body:not(.webgl-on) .chapter--invite .fallback-proof, body:not(.webgl-on) .chapter--enter .fallback-proof { width: 47%; aspect-ratio: 16 / 9; }
body:not(.webgl-on) .chapter--home { justify-content: flex-start; }
body:not(.webgl-on) .fallback-triptych, body:not(.webgl-on) .fallback-pair { display: flex; width: 53%; gap: 8px; align-items: center; }
body:not(.webgl-on) .fallback-pair .fallback-proof { width: 50%; aspect-ratio: 16 / 9; }
body:not(.webgl-on) .fallback-triptych .fallback-proof { width: 33.333%; aspect-ratio: 16 / 9; }
body:not(.webgl-on) .chapter--home .chapter-copy { width: 40%; flex-basis: 40%; }
body:not(.webgl-on) .chapter--home .fallback-triptych { width: 58%; }
body:not(.webgl-on) .chapter--invite .chapter-copy { width: 50%; flex-basis: 50%; }

.chapter-marks { position: fixed; z-index: 6; right: 4.5vw; top: 50%; transform: translateY(-50%); display: grid; gap: 10px; }
.chapter-marks a { display: block; width: 15px; height: 2px; background: rgba(236,235,228,.27); transition: width .2s ease, background .2s ease; }
.chapter-marks a.is-current { width: 28px; background: var(--lime); }

.waitlist { width: min(100%, 620px); }
.waitlist__line { display: flex; align-items: stretch; border-bottom: 1px solid var(--lime); min-height: 58px; }
.waitlist input { min-width: 0; flex: 1; border: 0; border-radius: 0; padding: 0 14px 0 0; color: var(--chalk); background: transparent; outline: none; font: 11px/1 var(--mono); letter-spacing: .1em; }
.waitlist input::placeholder { color: #77796f; opacity: 1; }
.waitlist input:focus-visible { box-shadow: inset 0 -2px 0 var(--lime); }
.waitlist button { appearance: none; border: 0; padding: 0 0 0 18px; color: var(--lime); background: transparent; font: 500 10px/1 var(--mono); letter-spacing: .055em; white-space: nowrap; cursor: pointer; }
.waitlist button span { display: inline-block; padding-left: 7px; font-size: 17px; transition: transform .2s ease; }
.waitlist button:hover span { transform: translate(3px,-3px); }
.waitlist button:focus-visible { outline: 1px solid var(--lime); outline-offset: 5px; }
.form-status { min-height: 15px; margin: 11px 0 0; color: var(--lime); font: 10px/1.4 var(--mono); letter-spacing: .08em; }
.waitlist.is-complete .waitlist__line { border: 0; min-height: auto; }
.waitlist.is-complete input, .waitlist.is-complete button { display: none; }
.waitlist.is-complete .form-status { margin-top: 0; font-size: 13px; }
.waitlist button[disabled] { opacity: .54; cursor: wait; }
.sr-only { position: absolute; width: 1px; height: 1px; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; }

@media (max-width: 700px) {
  .masthead { padding: max(22px, env(safe-area-inset-top)) 6vw 14px; }
  .wordmark { font-size: 20px; }
  .visit-index { gap: 9px; }
  .visit-index__rule { width: 34px; }
  .chapter { min-height: 100svh; padding: 16svh 7vw 9svh; align-items: flex-start; }
  .chapter::after { height: 35svh; }
  .chapter-copy, .chapter-copy--home, .chapter-copy--invite { width: 100%; max-width: 100%; padding-bottom: 0; }
  .chapter h1, .chapter h2, .chapter--enter h1 { font-size: clamp(65px, 17vw, 108px); line-height: .79; }
  .chapter .eyebrow { font-size: 9px; margin-bottom: 13px; }
  .chapter--home .chapter-copy { width: 100%; }
  .chapter--home .eyebrow { white-space: normal; line-height: 1.8; }
  .chapter--invite { padding-bottom: max(10svh, env(safe-area-inset-bottom)); }
  .chapter--invite h2 { margin-bottom: 4svh; }
  .chapter-marks { right: 6vw; top: auto; bottom: max(24px, env(safe-area-inset-bottom)); transform: none; display: flex; gap: 7px; }
  .chapter-marks a { width: 10px; }
  .chapter-marks a.is-current { width: 22px; }
  .chapter--table .chapter-copy, .chapter--odd .chapter-copy { padding-top: 2svh; }
  .chapter-copy--stacked { gap: 10px; }
  .specimen-label { font-size: 11px; }
  .waitlist__line { display: block; border: 0; }
  .waitlist input { display: block; width: 100%; height: 53px; border-bottom: 1px solid rgba(236,235,228,.45); }
  .waitlist button { display: flex; align-items: center; justify-content: space-between; width: 100%; min-height: 54px; margin-top: 13px; border-bottom: 1px solid var(--lime); padding: 0; }
  .waitlist button span { font-size: 20px; }
  .waitlist.is-complete .waitlist__line { min-height: 0; }
  .form-status { font-size: 9px; }
  body:not(.webgl-on) .chapter { flex-direction: column; justify-content: flex-start; gap: 5svh; padding-top: 16svh; }
  body:not(.webgl-on) .chapter-copy, body:not(.webgl-on) .chapter--home .chapter-copy, body:not(.webgl-on) .chapter--invite .chapter-copy { width: 100%; flex: none; }
  body:not(.webgl-on) .chapter--enter .fallback-proof, body:not(.webgl-on) .chapter--stool .fallback-proof, body:not(.webgl-on) .chapter--invite .fallback-proof { width: 100%; max-width: 460px; aspect-ratio: 16 / 9; }
  body:not(.webgl-on) .chapter--table .fallback-proof { width: 100%; max-width: 460px; aspect-ratio: 16 / 9; }
  body:not(.webgl-on) .fallback-pair, body:not(.webgl-on) .fallback-triptych { width: 100%; gap: 6px; }
  body:not(.webgl-on) .fallback-pair .fallback-proof, body:not(.webgl-on) .fallback-triptych .fallback-proof { width: 50%; aspect-ratio: 16 / 9; }
  body:not(.webgl-on) .fallback-triptych .fallback-proof { width: 33.333%; }
  body:not(.webgl-on) .chapter--home { gap: 3svh; }
  body:not(.webgl-on) .chapter--home .fallback-triptych { width: 100%; }
}

/* Build step viewer: a click on any finished build opens its real FORGE viewer (the same
   scrub-through-the-steps tool used internally) in a lightbox. */
.fallback-proof[data-build] { cursor: pointer; }
.fallback-proof[data-build]:focus-visible { outline: 1px solid var(--lime); outline-offset: 4px; }

.canvas-hint { position: fixed; z-index: 4; top: 0; left: 0; transform: translate(-50%, -140%); pointer-events: none; opacity: 0; transition: opacity .15s ease; color: var(--chalk); font: 500 10px/1 var(--mono); letter-spacing: .12em; text-transform: uppercase; background: rgba(17, 18, 16, .82); border: 1px solid var(--line); padding: 7px 10px; white-space: nowrap; }
.canvas-hint::after { content: ''; position: absolute; left: 50%; bottom: -5px; width: 6px; height: 6px; margin-left: -3px; background: var(--lime); border-radius: 50%; }
.canvas-hint.is-visible { opacity: 1; }

/* A real, always-tappable button - not a hover affordance - so opening a build's step viewer
   works the same on a phone (no hover, and a raycasted 3D hit-test is too small/unreliable to
   tap) as it does on desktop. */
.view-steps { position: fixed; z-index: 4; left: 4.4vw; bottom: max(28px, env(safe-area-inset-bottom)); display: flex; align-items: center; gap: 7px; background: rgba(17, 18, 16, .86); border: 1px solid var(--line); color: var(--chalk); font: 500 10px/1 var(--mono); letter-spacing: .12em; text-transform: uppercase; padding: 11px 15px; cursor: pointer; opacity: 0; transform: translateY(8px); pointer-events: none; transition: opacity .18s ease, transform .18s ease, border-color .18s ease; }
.view-steps.is-visible { opacity: 1; transform: translateY(0); pointer-events: auto; }
.view-steps:hover, .view-steps:focus-visible { border-color: var(--lime); color: var(--lime); }
.view-steps span { color: var(--lime); font-size: 13px; line-height: 1; }

.build-modal { position: fixed; inset: 0; z-index: 40; display: flex; align-items: center; justify-content: center; padding: 4vh 4vw; opacity: 0; pointer-events: none; transition: opacity .22s ease; }
.build-modal.is-open { opacity: 1; pointer-events: auto; }
.build-modal__backdrop { position: absolute; inset: 0; background: rgba(9, 10, 9, .88); backdrop-filter: blur(2px); }
.build-modal__frame { position: relative; width: min(1180px, 100%); height: 100%; max-height: 860px; display: flex; flex-direction: column; background: var(--ground); border: 1px solid var(--line); box-shadow: 0 30px 90px rgba(0, 0, 0, .55); transform: translateY(14px) scale(.98); transition: transform .22s ease; }
.build-modal.is-open .build-modal__frame { transform: translateY(0) scale(1); }
.build-modal__bar { display: flex; align-items: center; justify-content: space-between; padding: 12px 16px; border-bottom: 1px solid var(--line); }
.build-modal__label { color: var(--lime); font-size: 10px; letter-spacing: .14em; }
.build-modal__close { display: flex; align-items: center; gap: 6px; background: transparent; border: 1px solid var(--line); color: var(--chalk); font: 500 10px/1 var(--mono); letter-spacing: .1em; padding: 7px 11px; cursor: pointer; }
.build-modal__close:hover { border-color: var(--lime); color: var(--lime); }
.build-modal__close span { font-size: 14px; line-height: 1; }
.build-modal iframe { flex: 1; width: 100%; border: 0; background: var(--ground); }

@media (max-width: 700px) {
  .build-modal { padding: 0; }
  .build-modal__frame { max-height: none; border: 0; }
  .canvas-hint { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { transition-duration: .01ms !important; animation-duration: .01ms !important; }
}