@font-face {
  font-family: "Inter";
  src: url("/fonts/inter-latin.woff2") format("woff2");
  font-weight: 100 900;
  font-display: swap;
}

:root {
  --night: #04040f;
  --indigo: #0e1036;
  --text: #e4e6f4;
  --muted: #8d92bd;
  --body: #ccd0ea;    /* paragraph text: stays readable over the blue haze */
  --label: #aab0dc;
  --led: #8a93ff;
  --silver: linear-gradient(180deg, #f6f7fc 0%, #d3d6e8 45%, #a4a9cf 100%);
  --metal: linear-gradient(180deg, #dfe2ef 0%, #a9aecb 34%, #50558a 72%, #23265a 100%);
  --font: "Inter", "Helvetica Neue", Helvetica, Arial, sans-serif;
  --pad: clamp(16px, 5vw, 72px);
}

*, *::before, *::after { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  margin: 0;
  background: var(--night);
  color: var(--text);
  font: 300 17px/1.6 var(--font);
  -webkit-font-smoothing: antialiased;
}

a { color: inherit; }

.label {
  margin: 0 0 20px;
  color: var(--label);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: .32em;
  text-transform: uppercase;
}

/* Thin brushed-silver display type */
.display {
  margin: 0;
  font-size: clamp(40px, 5.6vw, 84px);
  font-weight: 200;
  line-height: 1.02;
  letter-spacing: -.035em;
  background: var(--silver);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.lede {
  margin: 26px 0 0;
  max-width: 46ch;
  color: var(--body);
  font-size: clamp(16px, 1.35vw, 19px);
}

/* Top bar */
.top {
  position: absolute; inset: 0 0 auto; z-index: 5;
  display: flex; align-items: center; justify-content: space-between; gap: 24px;
  padding: 28px var(--pad);
}
.wordmark { font-size: 13px; font-weight: 600; letter-spacing: .34em; text-decoration: none; }
.wordmark span { color: var(--muted); font-weight: 400; }
.chapters { display: flex; gap: 6px; }
.chapters a {
  display: grid; place-items: center;
  min-width: 34px; height: 34px; padding: 0 6px;
  border: 1px solid rgba(141, 146, 189, .28);
  color: var(--muted); text-decoration: none;
  font-size: 11px; font-weight: 500; letter-spacing: .12em;
  transition: color .3s, border-color .3s, box-shadow .3s;
}
.chapters a:hover, .chapters a:focus-visible { color: var(--text); border-color: var(--led); box-shadow: 0 0 12px -2px var(--led); }

/* Full-screen chapter scenes */
.scene {
  position: relative;
  min-height: 100vh; min-height: 100svh;
  overflow: hidden;
  isolation: isolate;
  display: flex;
}
.scene__img {
  position: absolute; inset: 0; z-index: -1;
  width: 100%; height: 100%;
  object-fit: cover;
}
.scene + .scene::before, .house + .scene::before {
  /* blend each scene into the one above */
  content: ""; position: absolute; inset: 0 0 auto; height: 160px; z-index: 0;
  background: linear-gradient(var(--night), transparent);
  pointer-events: none;
}
.scene__copy { position: relative; z-index: 1; }
/* a feathered pool of shadow behind the copy, so bright metal never sits directly behind text */
.scene__copy::before {
  content: ""; position: absolute; inset: -60px -90px; z-index: -1;
  background: radial-gradient(closest-side, rgba(4, 4, 15, .72), rgba(4, 4, 15, .45) 60%, transparent);
  pointer-events: none;
}
/* a soft dark halo keeps text legible wherever it crosses a bright part of a scene */
.scene .lede, .scene .label { text-shadow: 0 1px 2px rgba(4, 4, 15, .6), 0 0 12px rgba(4, 4, 15, .55); }

/* I: centered over the aisle */
.scene--hall { align-items: flex-start; justify-content: center; text-align: center; }
.scene--hall .scene__img { object-position: 50% 70%; }
.scene--hall .scene__copy { margin-top: clamp(130px, 19vh, 210px); padding: 0 var(--pad); }
.scene--hall .lede { margin-inline: auto; }
.js .scene--hall .scene__img { animation: approach 20s cubic-bezier(.2, .6, .2, 1) both; transform-origin: 50% 55%; }
@keyframes approach { from { transform: scale(1.12); } to { transform: scale(1); } }
.cue {
  position: absolute; left: 50%; bottom: 34px; translate: -50% 0;
  display: flex; flex-direction: column; align-items: center; gap: 12px;
  color: var(--muted); text-decoration: none;
  font-size: 11px; font-weight: 500; letter-spacing: .32em; text-transform: uppercase;
}
.cue::after { content: ""; width: 1px; height: 40px; background: linear-gradient(var(--muted), transparent); }

/* II: copy top-right, above the shrinking row */
/* The picture sits in flow under the copy and overlaps only its empty sky (the top 38%),
   so the cabinets can never rise into the text, whatever the window shape. */
.scene--shrink { flex-direction: column; align-items: flex-end; min-height: 0; }
.scene--shrink .scene__img { position: relative; inset: auto; height: auto; order: 2; margin-top: -23.75vw; /* 38% of 100vw x 1000/1600 */ }
.scene--shrink .scene__copy { margin: clamp(110px, 14vh, 160px) var(--pad) 0 0; max-width: 700px; }
.scene--shrink .display { font-size: clamp(40px, 4.6vw, 68px); }

/* IV: copy left of the monolith */
.scene--deal { align-items: center; }
.scene--deal .scene__img { object-position: 75% 100%; }
.scene--deal .scene__copy { margin-left: var(--pad); max-width: 560px; padding: 120px 0; }

/* V: centered, high above the lone machine */
/* Same in-flow treatment: the picture overlaps only its top half, which is empty sky */
.scene--light { flex-direction: column; align-items: center; text-align: center; min-height: 0; }
.scene--light .scene__img { position: relative; inset: auto; height: auto; order: 2; margin-top: -28vw; /* 50% of 100vw x 900/1600 */ }
.scene--light .scene__copy { margin-top: clamp(120px, 17vh, 190px); padding: 0 var(--pad); }
.scene--light .lede { margin-inline: auto; }

/* III: the house, as a stack of rack units */
.house {
  position: relative;
  padding: clamp(110px, 14vw, 180px) var(--pad);
  background:
    radial-gradient(ellipse 60% 45% at 50% 0%, rgba(58, 63, 158, .3), transparent 70%),
    linear-gradient(var(--night), var(--indigo) 55%, var(--night));
}
.house__head { max-width: 1100px; margin: 0 auto clamp(48px, 7vw, 84px); }
.units { list-style: none; margin: 0 auto; padding: 0; max-width: 1100px; display: grid; gap: 4px; }
.unit {
  position: relative;
  display: grid;
  grid-template-columns: 56px minmax(180px, 1fr) 2fr 24px;
  align-items: center;
  gap: 28px;
  padding: 30px 32px;
  /* silver front edge behind the verb, falling into dark steel behind the text */
  background:
    repeating-linear-gradient(90deg, rgba(255, 255, 255, .045) 0 1px, transparent 1px 3px),
    linear-gradient(180deg, rgba(255, 255, 255, .22), transparent 40%, rgba(0, 0, 0, .25)),
    linear-gradient(90deg, #dfe2ef 0%, #aab0cd 24%, #4b5084 38%, #262a5e 70%, #1c1f4a 100%);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .35);
  color: #0b0d28;
  transition: transform .5s cubic-bezier(.2, .7, .2, 1), filter .5s;
}
.unit::before, .unit::after {
  /* rack ears with screw holes */
  content: ""; position: absolute; top: 50%; width: 7px; height: 7px; margin-top: -3.5px;
  border-radius: 50%;
  background: #1a1c44;
  box-shadow: inset 0 1px 1px rgba(0, 0, 0, .6), 0 1px 0 rgba(255, 255, 255, .35);
}
.unit::before { left: 12px; }
.unit::after { right: 12px; }
.unit:hover { transform: translateX(8px); filter: brightness(1.07); }
.unit__slot { font-size: 11px; font-weight: 600; letter-spacing: .28em; color: #3b3f72; }
.unit__verb { margin: 0; font-size: clamp(24px, 2.6vw, 34px); font-weight: 300; letter-spacing: -.02em; }
.unit__text { margin: 0; font-size: 15.5px; line-height: 1.55; font-weight: 400; color: #eef0fa; text-shadow: 0 1px 2px rgba(10, 12, 40, .5); }
.unit__led {
  justify-self: end;
  width: 8px; height: 8px; border-radius: 50%;
  background: #e9ecff;
  box-shadow: 0 0 6px 2px var(--led), 0 0 18px 4px rgba(138, 147, 255, .5);
}
.js .unit__led { animation: blink 3.2s ease-in-out infinite; }
.js .unit:nth-child(2) .unit__led { animation-delay: .8s; }
.js .unit:nth-child(3) .unit__led { animation-delay: 1.9s; }
.js .unit:nth-child(4) .unit__led { animation-delay: 1.3s; }
@keyframes blink { 0%, 100% { opacity: 1; } 50% { opacity: .35; } }

/* Engraved nameplate */
.plate {
  margin: 40px 0 0;
  padding: 22px 26px;
  max-width: 420px;
  background:
    repeating-linear-gradient(90deg, rgba(255, 255, 255, .05) 0 1px, transparent 1px 3px),
    linear-gradient(180deg, #c9cde0, #8d92b6);
  border-radius: 3px;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .6), 0 18px 40px -16px rgba(0, 0, 0, .9);
  color: #121436;
}
.plate div { display: grid; grid-template-columns: 110px 1fr; gap: 12px; padding: 7px 0; }
.plate div + div { border-top: 1px solid rgba(18, 20, 54, .18); }
.plate dt { font-size: 10.5px; font-weight: 600; letter-spacing: .26em; text-transform: uppercase; color: #3b3f72; padding-top: 2px; }
.plate dd { margin: 0; font-size: 15px; font-weight: 500; }

/* Footer */
.foot {
  display: flex; flex-wrap: wrap; justify-content: space-between; gap: 12px 24px;
  padding: 28px var(--pad) 36px;
  border-top: 1px solid rgba(141, 146, 189, .15);
  color: var(--muted);
  font-size: 11px; font-weight: 500; letter-spacing: .24em; text-transform: uppercase;
}
.foot a { text-decoration: none; color: var(--text); }
.foot a:hover { color: var(--led); }

/* Entrance, only with JS */
.js .reveal { opacity: 0; transform: translateY(24px); transition: opacity 1.2s ease, transform 1.2s cubic-bezier(.2, .7, .2, 1); }
.js .reveal.is-in { opacity: 1; transform: none; }

:focus-visible { outline: 1px solid var(--led); outline-offset: 4px; }

@media (max-width: 900px) {
  .unit {
    grid-template-columns: 40px 1fr 20px; gap: 10px 18px;
    background:
      repeating-linear-gradient(90deg, rgba(255, 255, 255, .045) 0 1px, transparent 1px 3px),
      linear-gradient(180deg, #dfe2ef 0, #aab0cd 70px, #3b4074 110px, #1f2252 100%);
  }
  .unit__text { grid-column: 2 / 3; }
  .unit__led { grid-row: 1; grid-column: 3; }
}

@media (max-width: 640px) {
  .chapters a { min-width: 28px; height: 28px; font-size: 10px; }
  .wordmark { font-size: 11px; }
  /* Scenes stack: copy first, picture underneath */
  .scene { flex-direction: column; justify-content: flex-start; min-height: 0; }
  .scene__img { position: relative; inset: auto; height: 46vh; min-height: 300px; order: 2; }
  .scene__copy, .scene--shrink .scene__copy, .scene--deal .scene__copy, .scene--light .scene__copy {
    margin: 0; padding: 110px var(--pad) 28px; max-width: none;
  }
  .scene--hall { min-height: 100svh; }
  .scene--hall .scene__img { position: absolute; inset: 0; height: 100%; }
  .scene--hall .scene__copy { padding-top: 130px; }
  .scene--shrink .scene__img { object-position: 22% 100%; height: 46vh; margin-top: 0; }
  .scene--light .scene__img { height: 46vh; margin-top: 0; }
  .scene--deal .scene__img { object-position: 68% 100%; height: 56vh; }
  .unit { padding: 24px 28px; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .js .scene--hall .scene__img, .js .unit__led { animation: none; }
  .js .reveal { opacity: 1; transform: none; transition: none; }
  .unit { transition: none; }
}