@font-face { font-family: "Montserrat"; src: url("../assets/fonts/montserrat.woff2") format("woff2"); font-weight: 100 900; font-style: normal; font-display: swap; }
@font-face { font-family: "Hanken Grotesk"; src: url("../assets/fonts/hanken-grotesk.woff2") format("woff2"); font-weight: 100 900; font-style: normal; font-display: swap; }
@font-face { font-family: "Hanken Grotesk"; src: url("../assets/fonts/hanken-grotesk-italic.woff2") format("woff2"); font-weight: 100 900; font-style: italic; font-display: swap; }
@font-face { font-family: "Montserrat Fallback"; src: local("Arial"), local("Helvetica Neue"), local("Helvetica"); size-adjust: 112%; ascent-override: 86%; descent-override: 22%; line-gap-override: 0%; }
@font-face { font-family: "Hanken Fallback"; src: local("Arial"), local("Helvetica Neue"), local("Helvetica"); size-adjust: 97%; ascent-override: 102%; descent-override: 30%; line-gap-override: 0%; }

:root {
  --void: #08080B;
  --void-2: #0D0D12;
  --void-3: #121219;
  --ink: #F0F7FB;
  --ink-2: #B6B9DF;
  --ink-3: #969BC0;
  --line: rgba(150, 155, 192, 0.18);
  --line-2: rgba(150, 155, 192, 0.32);
  --cyan: #8CE5F5;
  --gold: #F1DA8D;
  --emerald: #3FE3A8;
  --light: #F0F7FB;
  --spectrum: linear-gradient(90deg, #3FEAED 0%, #4BD4EB 11%, #659DE6 22%, #8460E5 33%, #B050DF 44%, #DB64CE 56%, #E48FB3 67%, #EABB94 78%, #F1DA8D 89%, #F0E38F 100%);

  --display: "Montserrat", "Montserrat Fallback", "Avenir Next", "Helvetica Neue", system-ui, sans-serif;
  --text: "Hanken Grotesk", "Hanken Fallback", "Helvetica Neue", system-ui, sans-serif;
  --grc: "Helvetica Neue", Arial, "Noto Sans", "Lucida Grande", sans-serif;

  --t-hero: clamp(3rem, 1.2rem + 7.6vw, 8.25rem);
  --t-door: clamp(2.75rem, 1.4rem + 5.8vw, 6.5rem);
  --t-h2: clamp(2.25rem, 1.2rem + 4.4vw, 5rem);
  --t-line: clamp(1.75rem, 1rem + 3vw, 3.5rem);
  --t-lead: clamp(1.25rem, 1.05rem + 0.7vw, 1.625rem);
  --t-body: clamp(1.0625rem, 1rem + 0.2vw, 1.1875rem);
  --t-small: 0.875rem;
  --t-micro: 0.8125rem;

  --s5: 24px; --s6: 32px; --s7: 48px; --s8: 64px; --s9: 96px; --s10: 144px; --s11: 216px;
  --gutter: clamp(20px, 4vw, 64px);
  --gap: clamp(16px, 2vw, 32px);
  --edge: max(var(--gutter), calc((100% - 1320px) / 2));
  --nav: 64px;

  --ease-out: cubic-bezier(.16, 1, .3, 1);
  --ease-io: cubic-bezier(.65, 0, .35, 1);
  --ease-veil: cubic-bezier(.22, .61, .36, 1);
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; scroll-padding-top: var(--nav); }
body { margin: 0; background: var(--void); color: var(--ink-2); font-family: var(--text); font-size: var(--t-body); line-height: 1.6; letter-spacing: -0.003em;
  font-variant-numeric: lining-nums; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; overflow-x: clip; }
img, picture { display: block; max-width: 100%; }
img { height: auto; }
h1, h2, h3 { margin: 0; font-family: var(--display); color: var(--ink); text-wrap: balance; font-weight: 400; }
p { margin: 0; text-wrap: pretty; }
ul, ol { margin: 0; padding: 0; list-style: none; }
button { font: inherit; color: inherit; }
::selection { background: rgba(132, 96, 229, 0.45); color: var(--ink); }
:focus-visible { outline: 1.5px solid var(--cyan); outline-offset: 3px; border-radius: 1px; }
.sr-only { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.grc { font-family: var(--grc); font-style: normal; letter-spacing: 0.04em; }

a { color: var(--ink); text-decoration: none;
  background: var(--spectrum) 0 100% / 0% 1px no-repeat, linear-gradient(var(--line-2), var(--line-2)) 0 100% / 100% 1px no-repeat;
  transition: background-size 320ms var(--ease-out), color 200ms; }
a:hover, a:focus-visible { background-size: 100% 1px, 100% 1px; }

.skip { position: fixed; left: var(--gutter); top: -80px; z-index: 60; padding: 10px 14px; background: var(--void-3); color: var(--ink); font-size: var(--t-small); }
.skip:focus { top: 12px; }

/* navigation */
.nav { position: fixed; inset: 0 0 auto 0; z-index: 40; height: var(--nav); display: flex; align-items: center; gap: var(--s6); padding: 0 var(--gutter);
  transition: background-color 320ms var(--ease-out), opacity 200ms linear; opacity: var(--nav-o, 1); }
.nav::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 1px; background: var(--spectrum); opacity: 0; transition: opacity 320ms; }
.nav.is-scrolled { background: rgba(8, 8, 11, 0.72); -webkit-backdrop-filter: saturate(140%) blur(14px); backdrop-filter: saturate(140%) blur(14px); }
.nav.is-scrolled::after { opacity: 0.5; }
.brand { display: flex; align-items: flex-end; gap: 10px; background: none; padding: 4px 0; margin-right: auto; }
.brand-mark { width: 20px; height: 40px; }
.brand-word { width: 200px; height: auto; margin-bottom: 1px; }
.nav-links { display: flex; align-items: center; gap: 28px; }
.nav-links a, .veil-toggle { font-family: var(--text); font-weight: 500; font-size: var(--t-small); color: var(--ink-2); background-size: 0% 1px, 0% 1px; padding: 6px 0; }
.nav-links a:hover, .nav-links a:focus-visible, .nav-links a[aria-current] { color: var(--ink); background-size: 100% 1px, 0% 1px; }
.veil-toggle { border: 0; cursor: pointer; display: inline-flex; align-items: center; gap: 8px; background: none; }
.veil-toggle::before { content: ""; width: 6px; height: 6px; border-radius: 50%; border: 1px solid var(--ink-3); transition: background-color 320ms, border-color 320ms; }
.veil-toggle[aria-pressed="true"]::before { background: var(--cyan); border-color: var(--cyan); }
.veil-toggle:hover { color: var(--ink); }
html:not(.js) .veil-toggle, .menu-btn { display: none; }
.menu-btn { border: 0; background: none; padding: 10px 0 10px 12px; font-weight: 500; font-size: 15px; color: var(--ink); cursor: pointer; min-height: 44px; }
.sheet { position: fixed; inset: 0; z-index: 35; background: var(--void-3); padding: calc(var(--nav) + 48px) var(--gutter) 40px; display: flex; flex-direction: column; gap: var(--s6);
  opacity: 0; transform: translateY(12px); transition: opacity 420ms var(--ease-out), transform 420ms var(--ease-out); }
.sheet.open { opacity: 1; transform: none; }
.sheet[hidden] { display: none; }
.sheet > * { position: relative; z-index: 1; }
/* the real arch, whole and quiet, so the open menu is not an empty room */
.sheet .sheet-door { position: absolute; z-index: 0; right: var(--gutter); bottom: 88px; width: min(38vw, 190px); opacity: 0.09; pointer-events: none; }
.sheet-door img { display: block; width: 100%; height: auto; }
.sheet-links { display: flex; flex-direction: column; gap: 10px; }
.sheet-links a { font-family: var(--display); font-weight: 300; font-size: var(--t-h2); line-height: 1.15; letter-spacing: -0.028em; color: var(--ink); background-size: 0 1px, 0 1px; align-self: flex-start; }
.sheet .veil-toggle { align-self: flex-start; font-size: 16px; }
.sheet-mail { margin-top: auto; align-self: flex-start; font-size: var(--t-small); color: var(--ink-2); }

/* the veil: one line, two readings */
.veiled { position: relative; }
.v-p { margin-top: 0.6rem; font-family: var(--text); font-style: normal; font-weight: 400; font-size: 1.0625rem; line-height: 1.55; letter-spacing: -0.003em; color: var(--ink-2); }
.js .veiled { display: grid; grid-template-columns: minmax(0, 1fr); }
.js .veiled > .v-c, .js .veiled > .v-p { grid-area: 1 / 1; margin: 0; }
.js .veiled > .v-p { color: var(--ink); align-self: start; opacity: 0; }
.js .veiled.lifted > .v-c { opacity: 0; }
.js .veiled.lifted > .v-p { opacity: 1; }
.js .veiled.tearing > .v-c, .js .veiled.tearing > .v-p { opacity: 1; }
.js .veiled.tearing > .v-c { clip-path: inset(var(--t, 0%) -0.6em -0.4em -0.6em); }
.js .veiled.tearing > .v-p { clip-path: inset(0 -0.6em calc(100% - var(--t, 0%)) -0.6em); }
.js .veiled::after { content: ""; position: absolute; left: 0; right: 0; top: var(--t, 0%); height: 1px; background: var(--spectrum); opacity: var(--seam, 0); pointer-events: none; }
.js .veiled.fading > .v-c, .js .veiled.fading > .v-p { transition: opacity 150ms linear; }
span.veiled { display: inline-block; }
.js span.veiled { display: inline-grid; }
html:not(.js) span.veiled .v-p { display: block; }
.js .veiled[data-lift] > p.v-c { text-decoration: underline dotted var(--line-2); text-decoration-thickness: 1px; text-underline-offset: 0.32em; }
.lift { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; min-width: 44px; padding: 0; margin-top: 6px; border: 0; background: none; cursor: pointer;
  color: var(--ink-3); font-family: var(--text); font-weight: 500; font-size: var(--t-micro); letter-spacing: 0.01em; }
.lift svg { width: 22px; height: 22px; flex: none; color: var(--ink-2); }
.lift:hover, .lift:focus-visible { color: var(--ink); }

/* type roles */
.whisper .v-c, p.whisper { font-family: var(--text); font-style: italic; font-weight: 400; }
.spectrum-rule { display: block; width: 64px; height: 1px; background: var(--spectrum); margin: 22px auto 0; }

/* ------- the threshold ------- */
.hero { position: relative; }
.stage { position: relative; min-height: 100svh; padding: calc(var(--nav) + var(--s8)) var(--edge) var(--s8); display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gap); align-content: center; row-gap: var(--s6); }
.lens, .light, .flight-only { display: none; }
.portal { grid-column: 8 / 13; grid-row: 1 / 4; margin: 0; justify-self: center; align-self: center; width: min(420px, 100%); position: relative; }
.portal-blur, .portal-zoom { position: relative; }
.p-n { display: none; }
.scene-open { grid-column: 1 / 8; grid-row: 1; align-self: end; display: flex; flex-direction: column; gap: var(--s6); }
.hero-copy { align-self: stretch; }
.hero h1 { font-weight: 300; font-size: var(--t-hero); line-height: 0.95; letter-spacing: -0.035em; max-width: 10ch; }
.hero-pair > .v-p { max-width: 34ch; font-size: var(--t-lead); line-height: 1.42; letter-spacing: -0.01em; }
html:not(.js) .hero-pair > .v-p { margin-top: var(--s5); }
.scene-mid { grid-column: 1 / 8; grid-row: 2; }
.scene-mid .v-c { font-size: var(--t-lead); color: var(--ink); }
.scene-arrive { grid-column: 1 / 8; grid-row: 3; max-width: 36rem; }
.scene-arrive .v-c { font-size: calc(var(--t-line) * 0.62); line-height: 1.3; color: var(--ink); }
.coords { margin-top: 14px; font-weight: 500; font-size: var(--t-small); color: var(--ink-3); }
.step { align-self: flex-start; display: inline-flex; align-items: center; gap: 12px; font-weight: 500; font-size: var(--t-small); color: var(--ink-2); background-size: 0 1px, 0 1px; padding: 8px 0; }
.step-line { width: 1px; height: 24px; background: linear-gradient(var(--ink-2), var(--ink-2)) top / 1px 0 no-repeat; }
.js:not(.moved) .step-line { animation: draw 2.4s var(--ease-io) infinite; }
@keyframes draw { 0% { background-size: 1px 0; background-position: top; } 50% { background-size: 1px 100%; background-position: top; } 51% { background-position: bottom; } 100% { background-size: 1px 0; background-position: bottom; } }

/* cinematic mode */
.cine .hero { height: 300vh; }
.cine .stage { position: sticky; top: 0; height: 100vh; height: 100svh; min-height: 0; padding: 0; display: block; overflow: hidden; }
.cine .portal { --archH: min(609px, 62vh); --pw: calc(var(--archH) * 596 / 807); position: absolute; margin: 0; width: var(--pw);
  left: calc(73.5% - var(--pw) / 2); top: calc(54% - var(--pw) * 1.1622); z-index: 1; }
.cine .portal-blur { filter: blur(var(--blur, 0px)); will-change: filter; }
.cine .portal-zoom { transform-origin: 51.1% 48.4%; transform: translate3d(var(--dx, 0px), var(--dy, 0px), 0) scale(var(--s, 1)); will-change: transform; }
.cine .p-t { opacity: var(--t-o, 1); }
.cine .p-n { display: block; position: absolute; inset: 0; opacity: var(--neon, 0); }
.cine .p-nl { clip-path: inset(0 48.9% 0 0); transform: translate3d(calc(var(--split, 0) * -1px), 0, 0); }
.cine .p-nr { clip-path: inset(0 0 0 51.1%); transform: translate3d(calc(var(--split, 0) * 1px), 0, 0); }
.cine .portal { animation: focus 1100ms var(--ease-out) 100ms backwards; }
@keyframes focus { from { transform: translateY(18px) scale(0.965); } to { transform: none; } }

.cine .lens { display: block; position: absolute; inset: 0; z-index: 2; pointer-events: none; opacity: var(--lens, 0); transition: opacity 400ms linear;
  background: radial-gradient(220px circle at var(--lx, -400px) var(--ly, -400px), rgba(240, 247, 251, 0.06), rgba(140, 229, 245, 0.025) 55%, rgba(219, 100, 206, 0.02) 72%, transparent 78%); }
.cine .light { display: block; position: absolute; inset: 0; z-index: 0; opacity: var(--light-o, 0); pointer-events: none;
  -webkit-mask-image: radial-gradient(ellipse calc(var(--lr, 0) * 0.55%) calc(var(--lr, 0) * 2.4%) at 50% 50%, #000 60%, transparent 100%); mask-image: radial-gradient(ellipse calc(var(--lr, 0) * 0.55%) calc(var(--lr, 0) * 2.4%) at 50% 50%, #000 60%, transparent 100%);
  background: radial-gradient(ellipse 70% 78% at 50% 50%, #F7FBFD 0%, var(--light) 34%, #DCE3F3 56%, #B6B9DF 76%, #8E98D6 92%, #659DE6 100%); }
.light-rings { position: absolute; inset: -20%; transform: scale(var(--ring, 0.6)); opacity: 0.9;
  background: radial-gradient(ellipse 34% 46% at 50% 50%, transparent 72%, rgba(182, 185, 223, 0.30) 80%, transparent 88%),
              radial-gradient(ellipse 48% 62% at 50% 50%, transparent 78%, rgba(150, 155, 192, 0.18) 85%, transparent 92%),
              radial-gradient(ellipse 62% 78% at 50% 50%, transparent 82%, rgba(101, 157, 230, 0.10) 89%, transparent 95%); }
.light-phos { position: absolute; left: 50%; top: 64%; transform: translateX(-50%); margin: 0; font-size: 15px; color: #59608A; opacity: var(--phos, 0); }

.cine .scene { position: absolute; z-index: 3; margin: 0; pointer-events: none; }
.cine .scene.live { pointer-events: auto; }
.cine .scene-open, .cine .scene-open.live { pointer-events: none; }
.cine .scene-open.live .hero-copy, .cine .scene-open.live .step { pointer-events: auto; }
.cine .scene-open { inset: 0; z-index: 3; display: block; align-self: auto; justify-self: auto; opacity: var(--o1, 1); transform: translate3d(0, calc(var(--o1x, 0) * -6vh), 0); }
.cine .hero-copy { position: absolute; left: var(--edge); bottom: 25vh; width: min(52vw, 760px); }
.cine .step { position: absolute; right: var(--edge); bottom: 32px; }
.cine .scene-mid { left: 0; right: 0; top: 70%; text-align: center; padding: 0 var(--gutter); opacity: var(--o2, 0); transform: translate3d(0, calc((1 - var(--o2, 0)) * 3vh), 0); }
.cine .scene-mid .v-c { font-size: var(--t-line); font-weight: 500; line-height: 1.12; letter-spacing: -0.018em; color: #FFFFFF; text-shadow: 0 0 2px rgba(8, 8, 11, 0.7), 0 1px 18px rgba(8, 8, 11, 0.75), 0 0 48px rgba(8, 8, 11, 0.6); }
.cine .scene-mid::before { content: ""; position: absolute; inset: -40% -10%; z-index: -1; pointer-events: none; background: radial-gradient(closest-side, rgba(8, 8, 11, 0.5), rgba(8, 8, 11, 0.22) 60%, rgba(8, 8, 11, 0) 100%); }
.cine .scene-mid .v-p { font-size: var(--t-lead); text-shadow: 0 0 24px rgba(8, 8, 11, 0.85); }
.cine .flight-only { display: block; }
.cine .scene-bear { left: 0; right: 0; top: 50%; z-index: 5; text-align: center; transform: translateY(-50%); opacity: var(--o5, 0); padding: 0 var(--gutter); }
.cine .scene-bear .v-c, .cine .scene-bear .v-p { font-family: var(--display); font-weight: 300; font-size: var(--t-line); line-height: 1.12; letter-spacing: -0.018em; color: #1B1D33; }
.cine .scene-arrive { left: calc(var(--edge) + (100% - 2 * var(--edge) + var(--gap)) / 12); bottom: 15vh; width: min(40rem, 70vw); opacity: var(--o3, 0); transform: translate3d(0, calc((1 - var(--o3, 0)) * 2vh), 0); max-width: none; }
.cine .scene-arrive .v-c { font-size: calc(var(--t-line) * 0.8); line-height: 1.24; font-weight: 400; }
.cine .scene-arrive .v-p { font-size: var(--t-lead); }
.js.cine .hero h1 { animation: resolve 700ms var(--ease-veil) 600ms backwards; }
@keyframes resolve { from { filter: blur(10px); opacity: 0.2; } to { filter: none; opacity: 1; } }

/* ------- the house ------- */
section { position: relative; }
.house, .keepers, .word { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gap); padding-inline: var(--edge); }
.house { position: relative; padding-top: var(--s9); padding-bottom: var(--s9); }
.house-head { grid-column: 1 / 7; }
.house h2, .keepers h2, .word h2, .register h2 { font-size: var(--t-h2); line-height: 1; letter-spacing: -0.028em; }
.house-head .v-p { font-size: var(--t-lead); }
.horizon { grid-column: 1 / -1; position: relative; margin-top: var(--s6); height: 1px; display: grid; grid-template-columns: subgrid; align-items: end; }
.horizon-line { position: absolute; left: 0; right: 0; bottom: 0; height: 1px; background: var(--line); }
.house-body { grid-column: 6 / 12; grid-row: 3; margin-top: var(--s7); }
.house-body > p { max-width: 62ch; }
.house-body > p + p { margin-top: 1.1em; }
.lead, .lead .v-c { font-size: var(--t-lead); line-height: 1.42; letter-spacing: -0.01em; color: var(--ink); max-width: 34ch; }
.house-body .lead { max-width: 38ch; margin-bottom: 1.2em; }
.house-pair { margin-top: var(--s7); }
.house-pair .v-c, .keepers-pair .v-c, .word-pair .v-c { font-family: var(--display); font-weight: 300; font-size: calc(var(--t-line) * 0.72); line-height: 1.2; letter-spacing: -0.015em; color: var(--ink); max-width: 26ch; }
.js .house-pair .v-p, .js .keepers-pair .v-p, .js .word-pair .v-p { font-size: var(--t-lead); }
.rules { grid-column: 1 / 4; grid-row: 3; margin-top: calc(var(--s7) + 6px); align-self: start; border-left: 1px solid var(--line-2); padding-left: 18px; }
.rules-label { font-weight: 500; font-size: var(--t-micro); color: var(--ink-3); margin-bottom: 14px; }
.rules li + li { margin-top: 18px; }
.rules .v-c { font-style: italic; font-size: 18px; line-height: 1.45; color: var(--ink-2); }
.js .rules .v-p { font-size: 17px; }

/* arrivals, once */
.js.io .arrive { opacity: 0; transform: translate3d(0, 16px, 0); transition: opacity 700ms var(--ease-out), transform 700ms var(--ease-out); }
.js.io .arrive.in { opacity: 1; transform: none; }

/* ------- the register ------- */
.register { padding-top: var(--s9); }
.register-head { padding-inline: var(--edge); display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gap); padding-bottom: var(--s8); }
.register-head > * { grid-column: 1 / 8; }
.register-cue { font-size: 15px; color: var(--ink-3); margin-bottom: 18px; }
.register-note { margin-top: 22px; }
.register-note .v-c { font-size: 17px; color: var(--ink-2); }
.register-stage { padding: 0 var(--edge) var(--s10); }
.door-stack, .rail { display: none; }
.doors { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s9) var(--gap); }
.door { display: grid; grid-template-columns: 136px minmax(0, 1fr); gap: var(--s6); align-items: start; }
.door-thumb { width: 136px; height: auto; }
[data-tone="brass"] { --tone: #E0B34F; }
[data-tone="neon-vapor"] { --tone: #00E4FF; }
[data-tone="neon-infrared"] { --tone: #FF005A; }
[data-tone="neon-outrun"] { --tone: #FF6E27; }
[data-tone="gold"] { --tone: #FFCD3D; }
[data-tone="neon-toxic"] { --tone: #39FF13; }
.door-epi .v-c { font-style: italic; font-size: 19px; line-height: 1.4; color: var(--ink-2); max-width: 32ch; }
.door h3 { margin-top: 14px; font-size: calc(var(--t-door) * 0.6); line-height: 0.95; letter-spacing: -0.03em; text-wrap: balance; }
.door-aspect { margin-top: 18px; display: flex; align-items: center; gap: 10px; font-weight: 500; font-size: var(--t-small); color: var(--ink-3); }
.door-aspect::before { content: ""; width: 2px; height: 16px; background: var(--tone); flex: none; }
.door-aspect a { color: var(--ink-2); }
.door-desc { margin-top: 16px; max-width: 40ch; color: var(--ink-2); }
.door-state { margin-top: 18px; font-weight: 500; font-size: var(--t-small); color: var(--ink); }
.door-state > p, .door-state .v-c { display: flex; align-items: center; gap: 10px; }
.door-state > p::before, .door-state .v-c::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--tone); flex: none; }
.js .door-state .v-p { font-weight: 500; font-size: var(--t-small); padding-left: 16px; }

.cine.wide .register-track { height: 400vh; }
.cine.wide .register-stage { position: sticky; top: 0; height: 100vh; padding: var(--nav) var(--edge) 0; display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gap); align-items: center; overflow: hidden; }
.cine.wide .door-stack { display: block; grid-column: 1 / 7; grid-row: 1; position: relative; height: min(74vh, 788px); }
.cine.wide .stack-door { position: absolute; left: 50%; top: calc((100% - 8px) * 0.09); height: calc((100% - 8px) * 0.82); aspect-ratio: 360 / 604; transform: translateX(-50%) scale(var(--ds, 1)); opacity: var(--do, 0); will-change: opacity, transform; }
.cine .stack-door img { width: 100%; height: 100%; object-fit: contain; }
.cine.wide .rail { display: flex; flex-direction: column; gap: 10px; position: absolute; left: max(10px, calc(var(--edge) / 2 - 1px)); top: 50%; transform: translateY(-50%); }
.cine .rail i { display: block; width: 1px; height: 12px; background: var(--line-2); transition: height 320ms var(--ease-out), background-color 320ms; }
.cine .rail i.on { height: 24px; background: var(--ink); }
.cine.wide .doors { grid-column: 7 / 13; grid-row: 1; display: grid; grid-template-columns: minmax(0, 1fr); gap: 0; }
.cine.wide .door { grid-area: 1 / 1; display: block; opacity: var(--to, 0); transform: translate3d(0, var(--ty, 24px), 0); will-change: opacity, transform; }
.cine.wide .door:not(.live) { visibility: hidden; }
.cine .door-art { display: none; }
.cine.wide .door h3 { font-size: min(var(--t-door), 10.5vh); }
.cine.wide .door { max-height: calc(100vh - var(--nav) - 24px); }
.cine.wide .door-desc { max-width: 34ch; font-size: min(calc(var(--t-lead) * 0.9), 2.7vh); line-height: 1.45; }

/* ------- the keepers ------- */
.keepers { padding-top: var(--s9); padding-bottom: var(--s9); }
.keepers h2 { grid-column: 1 / 7; }
.bars { grid-column: 1 / -1; display: flex; align-items: center; gap: 14px; margin-top: var(--s6); }
/* redactions: dark ink over the names, a faint inset edge, and the mark's spectrum as the line they sit on */
.bar { position: relative; display: block; height: 25px; background: #15151B; box-shadow: inset 0 0 0 1px rgba(240, 247, 251, 0.07); transform-origin: left center; }
.bar::before { content: ""; position: absolute; left: 0; right: 0; bottom: -4px; height: 1px; background: var(--spectrum); opacity: 0.85; }
.bar:nth-of-type(2) { width: 13rem; }
.bar:nth-of-type(4) { width: 10rem; }
.amp { font-style: italic; font-size: 22px; color: var(--ink-3); }
.js.io .bar { transform: scaleX(0); transition: transform 600ms var(--ease-out); }
.js.io .bar:nth-of-type(4) { transition-delay: 200ms; }
.js.io .bars.sealed .bar { transform: none; }
.keepers-body { grid-column: 5 / 11; margin-top: var(--s8); }
.keepers-body > p { margin-top: 1.4em; max-width: 62ch; }
.keepers-lead .v-c { color: var(--ink); }
.emerald { text-shadow: 0 0 18px rgba(63, 227, 168, 0.35); color: var(--ink); }
.keepers-pair { margin-top: var(--s7); }
.keepers-aside { grid-column: 1 / 4; grid-row: 3; margin-top: var(--s8); border-left: 1px solid var(--line-2); padding-left: 18px; align-self: start; }
.keepers-aside .v-c { font-style: italic; font-size: 18px; line-height: 1.45; }

/* ------- send word ------- */
.word { position: relative; overflow-x: clip; padding-top: var(--s10); padding-bottom: var(--s8); }
.word > * { grid-column: 1 / -1; }
.word h2 { grid-column: 1 / 7; }
.word-lead { margin-top: var(--s5); max-width: 36ch; font-size: 20px; line-height: 1.5; color: var(--ink-2); text-wrap: balance; }
.address { justify-self: start; position: relative; isolation: isolate; margin-top: 14px; padding-bottom: 0.12em; font-family: var(--display); font-weight: 300; font-size: clamp(1.35rem, min(1rem + 4.6vw, 7.4vw), 5rem); line-height: 1.08; letter-spacing: -0.025em; white-space: nowrap; overflow-wrap: normal; word-break: keep-all; -webkit-hyphens: none; hyphens: none; max-width: 100%; color: var(--ink);
  background-size: 0% 1px, 0% 1px; padding-bottom: 6px; transition: background-size 900ms var(--ease-out); }
/* the address carries the mark's own spectrum as a hairline, with a low aura of the same light behind it (live text stays solid, per the brand rules) */
.address { background: var(--spectrum) 0 100% / 100% 1px no-repeat; }
.address::before { content: ""; position: absolute; z-index: -1; left: -4%; right: -4%; top: 18%; bottom: -14%; border-radius: 50%; pointer-events: none;
  background: var(--spectrum); opacity: 0.2; filter: blur(clamp(20px, 3.4vw, 44px)); transition: opacity 600ms var(--ease-out); }
.address:hover::before, .address:focus-visible::before { opacity: 0.34; }
.address:hover, .address:focus-visible { background-size: 100% 1px; }
.word-pair { grid-column: 1 / 8; margin-top: var(--s8); }
.seen { grid-column: 1 / 9; margin-top: var(--s9); }
/* the finale: the page closes on the same door it opened with */
.finale { grid-column: 1 / -1; display: grid; justify-items: center; text-align: center; margin-top: var(--s9); }
.finale-door img { display: block; width: clamp(104px, 9vw, 148px); height: auto; }
.finale .seen { grid-column: 1 / -1; margin-top: var(--s6); justify-items: center; }
.finale .seen .v-c, .finale .seen .v-p { margin-inline: auto; }
.finale .lift { justify-self: center; }
.js.io .finale-door { opacity: 0; transform: scale(0.96); filter: blur(8px); transition: opacity 1100ms var(--ease-out), transform 1400ms var(--ease-out), filter 1100ms var(--ease-out); }
.js.io .finale.in .finale-door { opacity: 1; transform: none; filter: none; }
.seen .v-c { font-family: var(--display); font-weight: 300; font-size: var(--t-line); line-height: 1.1; letter-spacing: -0.018em; color: var(--ink); }
.js .seen .v-p { font-size: var(--t-lead); }

/* ------- the foot ------- */
.foot { position: relative; background: var(--void-2); padding: var(--s8) var(--edge) var(--s7); color: var(--ink-3); }
.foot::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 1px; background: var(--spectrum); opacity: 0.7; }
.foot-row { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: var(--s6); }
.foot-brand { background: none; padding: 0; }
.foot-lockup { height: 80px; width: auto; }
.foot-links { display: flex; flex-wrap: wrap; gap: 8px 24px; font-weight: 500; font-size: var(--t-small); }
.foot-links a { color: var(--ink-2); }
.foot-pair { margin-top: var(--s7); }
.foot-pair .v-c { font-family: var(--display); font-weight: 300; font-size: 22px; color: var(--ink); }
.js .foot-pair .v-p { font-size: 17px; }
.evening { margin-top: 14px; display: flex; align-items: baseline; gap: 12px; font-size: var(--t-small); color: var(--ink-2); }
.evening[hidden] { display: none; }
.evening .grc { margin: 0; font-size: 12px; color: var(--ink-3); }
.legal-line { margin-top: var(--s6); font-size: var(--t-micro); line-height: 1.5; letter-spacing: 0.01em; max-width: 72ch; }
.makers-mark { margin-top: var(--s7); text-align: center; font-family: var(--display); font-weight: 500; font-size: 10px; letter-spacing: 0.32em; color: var(--ink-3); }

/* ------- inner pages ------- */
.page { padding: calc(var(--nav) + var(--s9)) var(--edge) var(--s10); max-width: calc(62ch + 2 * var(--edge)); }
.page h1 { font-size: var(--t-h2); line-height: 1; letter-spacing: -0.028em; }
.updated { margin-top: 16px; font-weight: 500; font-size: var(--t-small); color: var(--ink-3); }
.page-pair { margin-top: var(--s6); }
.page-pair .v-c { font-family: var(--display); font-weight: 300; font-size: calc(var(--t-line) * 0.62); line-height: 1.3; color: var(--ink); }
.js .page-pair .v-p { font-size: var(--t-lead); }
.legal { margin-top: var(--s8); }
.legal h2 { margin-top: var(--s7); font-size: 22px; letter-spacing: -0.01em; }
.legal p, .legal li { margin-top: 14px; max-width: 62ch; }
.legal ul { padding-left: 1.1em; list-style: disc; }
.legal strong { color: var(--ink); font-weight: 600; }
.lost { display: grid; gap: var(--s6); justify-items: start; padding-top: var(--s7); }
.lost-mark { width: 60px; height: 120px; opacity: 0.4; }
.lost-pair .v-c { font-size: var(--t-h2); line-height: 1; letter-spacing: -0.028em; font-weight: 300; }
.js .lost-pair .v-p { font-size: var(--t-lead); }
.lost-line .v-c, .lost-line .v-p { font-size: var(--t-lead); color: var(--ink-2); }

/* ------- small screens ------- */
@media (max-width: 900px) {
  :root { --nav: 56px; }
  .nav { gap: 12px; }
  .brand { gap: 8px; }
  .brand-mark { width: 18px; height: 36px; }
  .brand-word { width: 150px; }
  .js .nav-links { display: none; }
  .js .menu-btn { display: block; }
  html:not(.js) .nav { height: auto; flex-wrap: wrap; padding-top: 10px; padding-bottom: 6px; row-gap: 4px; background: rgba(8, 8, 11, 0.9); }
  html:not(.js) .nav-links { gap: 18px; }

  .stage { grid-template-columns: repeat(6, minmax(0, 1fr)); padding-top: calc(var(--nav) + 24px); align-content: start; }
  .portal { grid-column: 1 / -1; grid-row: 1; width: min(200px, 60vw); }
  .scene-open, .scene-mid, .scene-arrive { grid-column: 1 / -1; grid-row: auto; }

  .cine .hero { height: 280vh; }
  .cine .portal { --pw: min(300px, 56vw, calc((55svh - 12px) / 1.839)); left: calc(50% - var(--pw) / 2); top: 12px; }
  .cine .hero-copy { left: var(--gutter); right: var(--gutter); width: auto; bottom: auto; top: 56svh; }
  .cine .step { left: var(--gutter); right: auto; bottom: 18px; }
  .cine .scene-mid { top: 66%; }
  /* after the light closes, the line sits in the middle of the screen; the house rises to meet it */
  .cine .scene-arrive { left: var(--gutter); right: var(--gutter); width: auto; top: 50%; bottom: auto; transform: translate3d(0, calc(-50% + (1 - var(--o3, 0)) * 2vh), 0); }
  .cine .house { margin-top: -30svh; }
  .house { padding-bottom: 64px; }
  .register { padding-top: 64px; }

  .house, .keepers, .word { grid-template-columns: repeat(6, minmax(0, 1fr)); }
  .house { padding-top: 72px; }
  .house-head, .house-body, .rules, .keepers h2, .keepers-body, .keepers-aside, .word h2, .word-pair, .seen { grid-column: 1 / -1; grid-row: auto; }
  .rules { margin-top: var(--s8); }
  .keepers-aside { margin-top: var(--s7); }
  .register-head { grid-template-columns: repeat(6, minmax(0, 1fr)); }
  .register-head > * { grid-column: 1 / -1; }
  .doors { grid-template-columns: 1fr; gap: var(--s8); }
  .door { grid-template-columns: 96px minmax(0, 1fr); gap: 20px; }
  .door-thumb { width: 96px; }
  .door h3 { font-size: 2.25rem; }

  .cine .door-stack { display: block; position: sticky; top: var(--nav); z-index: 2; height: 32svh; margin: 0 calc(-1 * var(--edge)); background: var(--void); }
  /* the fade sits below the arch, never behind it, so text scrolling up dims out before it meets the door */
  .cine .door-stack::after { content: ""; position: absolute; left: 0; right: 0; top: 100%; height: 72px; pointer-events: none; background: linear-gradient(var(--void), rgba(8, 8, 11, 0.85) 30%, rgba(8, 8, 11, 0)); }
  .cine .stack-door { position: absolute; left: 50%; top: 6px; height: calc(100% - 14px); aspect-ratio: 360 / 604; transform: translateX(-50%); opacity: 0; transition: opacity 300ms var(--ease-io); }
  .cine .stack-door.on { opacity: 1; }
  .cine .doors { display: block; position: relative; z-index: 1; }
  .cine .door { display: block; min-height: 44svh; padding-top: 124px; }
  .cine .door:first-child { padding-top: var(--s7); }
  .cine .door h3 { font-size: var(--t-door); }
  /* the register hands off to the keepers without a dead screen */
  .cine .door:last-child { min-height: 0; }
  .word { padding-top: 96px; padding-bottom: 72px; }
  .word-lead { font-size: 18px; }
  .address::before { opacity: 0.3; filter: blur(18px); top: 6%; bottom: -24%; }
  .word-pair { margin-top: 48px; }
  .finale { margin-top: 88px; }
  .finale .seen { margin-top: 28px; }
  .register-stage { padding-bottom: 72px; }
  .keepers { padding-top: 96px; }
  .foot-row { flex-direction: column; align-items: flex-start; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition-duration: 0.001ms !important; transition-delay: 0s !important; scroll-behavior: auto !important; }
  .js .veiled.fading > .v-c, .js .veiled.fading > .v-p { transition: opacity 150ms linear !important; }
}
@media (forced-colors: active) {
  .bar { background: CanvasText; }
  .light, .lens { display: none !important; }
}
@media print {
  .nav, .sheet, .portal, .light, .lens, .door-stack, .step { display: none !important; }
  body { background: #fff; color: #000; }
  h1, h2, h3, .lead, .v-c { color: #000 !important; }
  .js .veiled > .v-p { opacity: 1 !important; }
}

.cine .light.full { -webkit-mask-image: none; mask-image: none; z-index: 4; }

/* labels: blocky uppercase in the wordmark's voice. Source text stays in natural case for screen readers. */
.nav-links a, .veil-toggle, .menu-btn, .step, .coords, .lift, .rules-label, .door-aspect, .door-state, .door-state .v-c, .door-state .v-p,
.foot-links, .evening .v-c, .evening .v-p, .updated, .sheet-mail, .sheet-links a {
  font-family: var(--display); font-weight: 600; font-style: normal; text-transform: uppercase; font-kerning: normal; }
.nav-links a, .veil-toggle, .menu-btn { font-size: 12px; letter-spacing: 0.12em; line-height: 1.2; }
.step, .coords, .door-aspect, .door-state, .door-state .v-c, .js .door-state .v-p, .foot-links, .evening .v-c, .evening .v-p, .updated, .sheet-mail { font-size: 12px; letter-spacing: 0.1em; line-height: 1.5; }
.lift, .rules-label { font-size: 11px; letter-spacing: 0.14em; }
.sheet-links a { font-size: clamp(1.75rem, 1.2rem + 3vw, 2.5rem); line-height: 1.2; letter-spacing: 0.06em; }
.sheet .veil-toggle { font-size: 13px; }
.menu-btn { color: var(--ink); }
.door-aspect a { text-decoration-thickness: 1px; }

/* r6: product links on the doors */
/* r6: doors that open. One real link per product (the step-through line); the door and its name repeat it for the pointer. */
.door-name, .go-art, .go { background: none; color: inherit; }
.door-name { transition: color 300ms var(--ease-out); -webkit-tap-highlight-color: transparent; -webkit-user-select: none; user-select: none; }
.door-name:focus, .go-art:focus { outline: none; }
.door.has-go:hover .door-name, .door.has-go:focus-within .door-name, .door.hot .door-name { color: var(--tone); }
.go-art { display: block; position: relative; cursor: pointer; -webkit-tap-highlight-color: transparent; }
.go-art::before { content: ""; position: absolute; inset: 0; background: center / contain no-repeat; filter: blur(16px); opacity: 0; transition: opacity 420ms var(--ease-out); pointer-events: none; }
.go-art img { transition: transform 520ms var(--ease-out); }
.go-art:hover::before, .hot .go-art::before, .go-art:active::before { opacity: 0.6; }
.go-art:hover img, .hot .go-art img, .go-art:active img { transform: scale(1.03); }
.go-art picture { position: relative; display: block; height: 100%; }
.stack-go { height: 100%; }
[data-tone="brass"] { --door-src: url(/assets/doors/door-brass-glow-w120.avif); }
[data-tone="neon-outrun"] { --door-src: url(/assets/doors/door-neon-outrun-glow-w120.avif); }
[data-tone="gold"] { --door-src: url(/assets/doors/door-gold-glow-w120.avif); }
/* the glow copies load only after the page has settled, so they never compete with the first paint */
.glow-ready .go-art::before { background-image: var(--door-src); }
.cine .stack-door { pointer-events: none; }
.cine .stack-door.on { pointer-events: auto; }
.door-go { margin-top: 18px; }
.go { display: inline-flex; flex-direction: column; align-items: flex-start; gap: 4px; padding: 4px 0; -webkit-tap-highlight-color: transparent; }
.go-cta { display: inline-flex; align-items: center; gap: 0.55em; padding-bottom: 5px; font-family: var(--display); font-weight: 600; text-transform: uppercase; font-size: 12px; letter-spacing: 0.16em; line-height: 1.2; color: var(--ink);
  background: var(--spectrum) 0 100% / 32px 1px no-repeat; transition: background-size 480ms var(--ease-out), color 240ms; }
.go-arrow { display: inline-block; transition: transform 360ms var(--ease-out); }
.go-dom { font-family: var(--display); font-weight: 500; text-transform: uppercase; font-size: 10.5px; letter-spacing: 0.14em; line-height: 1.3; color: var(--ink-3); overflow-wrap: anywhere; }
.go:hover .go-cta, .go:focus-visible .go-cta, .hot .go-cta { background-size: 100% 1px; }
.go:hover .go-arrow, .go:focus-visible .go-arrow, .hot .go-arrow { transform: translate(2px, -2px); }
.go:focus-visible { outline: 1px solid var(--tone); outline-offset: 6px; }
/* the step through: the real door raster carried forward until its light fills the screen */
.transport { position: fixed; inset: 0; z-index: 100; overflow: hidden; pointer-events: auto; }
.transport .t-void { position: absolute; inset: 0; background: var(--void); opacity: 0; }
.transport img { position: absolute; transform-origin: 50% 52%; will-change: transform, filter, opacity; }

/* the seam between the threshold and the house: a low band of the mark's own light, so the turn reads as intended */
.house::before { content: ""; position: absolute; left: 50%; top: -56px; width: min(1100px, 100%); height: 132px; transform: translateX(-50%); pointer-events: none;
  background: var(--spectrum); opacity: 0.17; filter: blur(44px); border-radius: 50%;
  -webkit-mask-image: radial-gradient(closest-side, #000 30%, transparent); mask-image: radial-gradient(closest-side, #000 30%, transparent); }
.house > * { position: relative; }
.house { overflow-x: clip; }
@media (max-width: 900px) { .house::before { top: -40px; height: 96px; filter: blur(30px); opacity: 0.2; } }

/* addresses are written as they are typed: lowercase, never shouted */
.foot-links a[href^="mailto"], .sheet-mail { text-transform: none; letter-spacing: 0.02em; }
/* iPad landscape and small laptops: keep the headline clear of the door */
@media (min-width: 901px) and (max-width: 1100px) {
  .cine .hero-copy { width: min(46vw, 760px); }
  .hero h1 { font-size: min(var(--t-hero), 8.2vw); }
}