:root {
  color-scheme: dark;
  --velvet: #050711;
  --ink: #080b17;
  --cobalt: #3975ff;
  --ultraviolet: #925cff;
  --amber: #ffb53d;
  --sea: #60e2cc;
  --milk: #f7f0e4;
  --smoke: #a8b0c0;
  --hairline: color-mix(in srgb, var(--milk) 16%, transparent);
  --serif: Iowan Old Style, Baskerville, Georgia, serif;
  --sans: Inter, ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --measure: 68rem;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; background: var(--velvet); }
body {
  margin: 0;
  min-width: 18rem;
  background:
    radial-gradient(circle at 84% 8%, rgb(146 92 255 / .13), transparent 32rem),
    radial-gradient(circle at 7% 58%, rgb(57 117 255 / .12), transparent 38rem),
    var(--velvet);
  color: var(--milk);
  font-family: var(--sans);
  line-height: 1.55;
}
img { display: block; width: 100%; height: 100%; object-fit: cover; }
figure { margin: 0; overflow: hidden; background: #0a0d19; }
a { color: inherit; text-underline-offset: .25em; }
.skip {
  position: fixed;
  z-index: 50;
  left: 1rem;
  top: -5rem;
  padding: .75rem 1rem;
  border-radius: 999px;
  background: var(--milk);
  color: var(--velvet);
}
.skip:focus { top: 1rem; }
.beam {
  position: fixed;
  z-index: 0;
  inset: 0 auto 0 48%;
  width: 1px;
  pointer-events: none;
  background: linear-gradient(180deg, transparent, var(--cobalt) 18%, var(--sea) 54%, var(--amber) 82%, transparent);
  opacity: .42;
  transform: rotate(3deg);
  transform-origin: 50% 50%;
}
.beamhead {
  position: relative;
  z-index: 5;
  display: grid;
  grid-template-columns: minmax(9rem, .55fr) 1fr auto;
  align-items: center;
  gap: 2rem;
  padding: 1.25rem clamp(1rem, 4vw, 4rem);
  border-bottom: 1px solid var(--hairline);
  backdrop-filter: blur(14px);
}
.wordmark {
  display: flex;
  width: max-content;
  color: var(--milk);
  font-family: var(--serif);
  font-size: 1.35rem;
  text-decoration: none;
}
.wordmark span:last-child { color: var(--sea); }
.turnline { margin: 0; color: var(--smoke); font-size: .88rem; letter-spacing: .04em; }
.plain-link {
  width: max-content;
  padding: .55rem 0;
  border-bottom: 1px solid color-mix(in srgb, var(--sea) 58%, transparent);
  color: var(--milk);
  font-size: .86rem;
  text-decoration: none;
}
.exposure { position: relative; z-index: 1; min-height: 100svh; }
.exposure-number,
.register-key {
  margin: 0 0 .8rem;
  color: var(--sea);
  font-size: .72rem;
  font-weight: 800;
  letter-spacing: .18em;
  text-transform: uppercase;
}
h1, h2, h3, p { max-width: 70ch; }
h1, h2 {
  margin: 0;
  font-family: var(--serif);
  font-weight: 400;
  line-height: .98;
  letter-spacing: -.035em;
}
h1 { font-size: clamp(3.5rem, 8vw, 8.8rem); }
h2 { font-size: clamp(2.4rem, 5vw, 5.4rem); }
.lede { font-size: clamp(1.1rem, 1.7vw, 1.45rem); color: var(--smoke); }
.aperture {
  display: grid;
  grid-template-columns: minmax(0, .9fr) minmax(22rem, 1.2fr);
  grid-template-rows: 1fr auto;
  gap: clamp(1.5rem, 4vw, 5rem);
  padding: clamp(3rem, 8vw, 9rem) clamp(1rem, 5vw, 6rem) clamp(2rem, 6vw, 6rem);
}
.aperture-copy { align-self: center; z-index: 2; }
.enter-link {
  display: inline-block;
  margin-top: 2rem;
  padding: .85rem 1.2rem;
  border: 1px solid color-mix(in srgb, var(--amber) 55%, transparent);
  border-radius: 99px;
  text-decoration: none;
}
.hero-vessel {
  min-height: 70svh;
  border-radius: 45% 8% 42% 12% / 22% 42% 14% 38%;
  box-shadow: 0 0 7rem rgb(57 117 255 / .14);
}
.sliver { height: 10rem; }
.sliver-a { width: 62%; border-radius: 8rem 1rem 6rem 1rem; justify-self: end; }
.sliver-b { width: 76%; border-radius: 1rem 7rem 1rem 6rem; }
.lightwell { padding: clamp(5rem, 10vw, 12rem) clamp(1rem, 5vw, 6rem); }
.well-copy {
  display: grid;
  grid-template-columns: .35fr 1.1fr .7fr;
  gap: clamp(1rem, 4vw, 4rem);
  align-items: end;
  margin-bottom: 5rem;
}
.well-copy .exposure-number { align-self: start; }
.well-copy p:last-child { margin: 0; color: var(--smoke); }
.darkroom {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  grid-auto-rows: 6rem;
  gap: clamp(.7rem, 1.5vw, 1.4rem);
  max-width: 96rem;
  margin-inline: auto;
}
.darkroom-frame { border: 1px solid var(--hairline); }
.frame-tall { grid-column: 1 / 6; grid-row: 1 / 8; border-radius: 48% 6% 32% 9%; }
.frame-low { grid-column: 6 / 10; grid-row: 2 / 6; border-radius: 7rem 1rem 5rem 1rem; }
.frame-wide { grid-column: 7 / 13; grid-row: 6 / 10; border-radius: 1rem 7rem 2rem 7rem; }
.frame-narrow { grid-column: 2 / 5; grid-row: 8 / 12; border-radius: 1rem 6rem 1rem 5rem; }
.frame-offset { grid-column: 5 / 9; grid-row: 10 / 14; border-radius: 6rem 2rem 7rem 1rem; }
.margin-note { margin: 4rem 5vw 0 auto; color: var(--smoke); font-size: 1.05rem; }
.four-angles { padding: clamp(5rem, 9vw, 10rem) 0; overflow: hidden; }
.angles-head { padding-inline: clamp(1rem, 5vw, 6rem); margin-bottom: 4rem; }
.angle-film {
  display: grid;
  grid-template-columns: repeat(4, minmax(19rem, 1fr));
  gap: 1px;
  overflow-x: auto;
  background: var(--hairline);
  scrollbar-color: var(--sea) var(--velvet);
}
.angle-frame { position: relative; min-height: 38rem; }
.angle-frame figcaption {
  position: absolute;
  inset: auto 0 0;
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  padding: 1.1rem;
  background: linear-gradient(transparent, rgb(5 7 17 / .95));
}
.angle-frame figcaption span { color: var(--smoke); font-size: .84rem; text-align: right; }
.angles-note { margin: 3rem clamp(1rem, 5vw, 6rem) 0 auto; color: var(--smoke); }
.glint {
  display: grid;
  grid-template-columns: .8fr repeat(3, minmax(0, .48fr));
  grid-template-rows: auto 1fr auto;
  gap: clamp(1rem, 2vw, 2rem);
  align-items: center;
  padding: clamp(5rem, 10vw, 12rem) clamp(1rem, 5vw, 6rem);
}
.glint-copy { grid-column: 1 / 3; align-self: end; z-index: 2; }
.glint-copy p:last-child { color: var(--smoke); font-size: 1.1rem; }
.glint-plate { min-height: 27rem; }
.plate-one { grid-column: 2; border-radius: 42% 8% 36% 11%; transform: translateY(4rem); }
.plate-two { grid-column: 3; border-radius: 9% 44% 12% 38%; transform: translateY(-3rem); }
.plate-three { grid-column: 4; border-radius: 40% 9% 46% 12%; transform: translateY(7rem); }
.sample-glint {
  grid-column: 1 / 4;
  margin: 6rem 0 0;
  color: var(--milk);
  font-family: var(--serif);
  font-size: clamp(2rem, 4vw, 4rem);
  line-height: 1.06;
}
.afterglow { padding: clamp(5rem, 10vw, 12rem) clamp(1rem, 5vw, 6rem) 2rem; }
.after-head { display: grid; grid-template-columns: .35fr 1fr .65fr; gap: 3rem; align-items: end; }
.after-head p:last-child { color: var(--smoke); }
.trace-sequence {
  display: grid;
  grid-template-columns: 1.2fr .8fr 1fr;
  grid-template-rows: 14rem 15rem;
  gap: 1rem;
  margin: 5rem 0 8rem;
}
.trace-1 { grid-row: 1 / 3; border-radius: 9rem 1rem 7rem 1rem; }
.trace-2 { border-radius: 1rem 7rem 1rem 6rem; }
.trace-3 { grid-column: 2 / 4; border-radius: 7rem 1rem 8rem 1rem; }
.context-grid { display: grid; grid-template-columns: 1.1fr .9fr; gap: clamp(2rem, 6vw, 8rem); align-items: center; }
.context-still { min-height: 38rem; border-radius: 46% 8% 38% 12%; }
.context-copy p { color: var(--smoke); font-size: 1.05rem; }
.closing-beam { height: clamp(14rem, 35vw, 34rem); margin: 9rem -6vw 0; border-radius: 50% 50% 0 0 / 12% 12% 0 0; }
.site-foot,
.policy-foot { display: flex; justify-content: space-between; gap: 2rem; padding: 2rem 0 0; color: var(--smoke); font-size: .88rem; }

/* Privacy register: a calmer information grammar */
.policy { background: linear-gradient(135deg, #0b1020, #070914 46%, #0d1122); }
.register-head {
  display: grid;
  grid-template-columns: minmax(9rem, .35fr) 1fr auto;
  gap: 3rem;
  align-items: start;
  padding: clamp(2rem, 5vw, 5rem);
  border-bottom: 1px solid var(--hairline);
}
.register-head h1 { font-size: clamp(3rem, 6vw, 6.5rem); }
.register-head p:last-child { color: var(--smoke); }
.register { max-width: 98rem; margin: auto; padding: 0 clamp(1rem, 5vw, 5rem); }
.policy-index {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1px;
  margin: clamp(3rem, 7vw, 7rem) 0;
  background: var(--hairline);
  border: 1px solid var(--hairline);
}
.wavelength { padding: clamp(1.4rem, 3vw, 3rem); background: rgb(10 14 28 / .95); }
.wavelength h2 { margin-bottom: 2rem; font-size: 1.7rem; line-height: 1.15; }
.wavelength ol { margin: 0; padding: 0; list-style: none; counter-reset: wave; }
.wavelength li { counter-increment: wave; border-top: 1px solid var(--hairline); }
.wavelength a { display: grid; grid-template-columns: 2rem 1fr; padding: .78rem 0; text-decoration: none; }
.wavelength a::before { content: counter(wave, decimal-leading-zero); color: var(--smoke); font-size: .7rem; letter-spacing: .08em; }
.wavelength-a h2, .wavelength-a a:hover { color: var(--amber); }
.wavelength-b h2, .wavelength-b a:hover { color: var(--sea); }
.wavelength-c h2, .wavelength-c a:hover { color: #9ab9ff; }
.register-band {
  display: grid;
  grid-template-columns: minmax(15rem, .7fr) minmax(0, 1.3fr);
  align-items: start;
  column-gap: clamp(2rem, 7vw, 8rem);
  border-top: 1px solid var(--hairline);
}
.register-band section {
  grid-column: 2;
  min-height: 23rem;
  padding: clamp(3rem, 7vw, 7rem) 0;
  border-bottom: 1px solid var(--hairline);
  scroll-margin-top: 2rem;
}
.register-band section h2 { max-width: 15ch; font-size: clamp(2.2rem, 4vw, 4.2rem); line-height: 1.04; }
.register-band section p:last-child { color: var(--smoke); font-size: 1.05rem; }
.policy-interlude {
  grid-column: 1;
  min-height: 20rem;
  margin-top: clamp(3rem, 7vw, 7rem);
  border-radius: 40% 8% 34% 10%;
  position: sticky;
  top: 2rem;
}
.band-two .register-key { color: var(--sea); }
.band-three .register-key { color: #9ab9ff; }
.policy code { color: var(--milk); font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: .92em; }
.policy-foot { max-width: 98rem; margin: auto; padding: 4rem clamp(1rem, 5vw, 5rem); border-top: 1px solid var(--hairline); }

.reveal { opacity: 0; transform: translateY(1.5rem); transition: opacity .75s ease, transform .9s cubic-bezier(.18,.75,.22,1); }
.reveal.entered { opacity: 1; transform: none; }

@media (max-width: 850px) {
  .beamhead,
  .register-head { grid-template-columns: 1fr auto; gap: 1rem; }
  .turnline,
  .register-head > div { grid-column: 1 / -1; grid-row: 2; }
  .aperture { grid-template-columns: 1fr; }
  .hero-vessel { min-height: 58svh; }
  .well-copy,
  .after-head { grid-template-columns: 1fr; gap: 1rem; }
  .darkroom { grid-auto-rows: 4.5rem; }
  .frame-tall { grid-column: 1 / 8; }
  .frame-low { grid-column: 8 / 13; }
  .frame-wide { grid-column: 5 / 13; }
  .frame-narrow { grid-column: 1 / 5; }
  .frame-offset { grid-column: 5 / 11; }
  .glint { grid-template-columns: repeat(3, 1fr); }
  .glint-copy { grid-column: 1 / -1; }
  .plate-one { grid-column: 1; }
  .plate-two { grid-column: 2; }
  .plate-three { grid-column: 3; }
  .sample-glint { grid-column: 1 / -1; }
  .context-grid { grid-template-columns: 1fr; }
  .policy-index { grid-template-columns: 1fr; }
  .register-band { grid-template-columns: 1fr; }
  .policy-interlude,
  .register-band section { grid-column: 1; position: relative; top: auto; }
  .policy-interlude { min-height: 25rem; }
}

@media (max-width: 560px) {
  h1 { font-size: clamp(3rem, 17vw, 5.5rem); }
  .beamhead { position: relative; }
  .aperture { padding-top: 4rem; }
  .hero-vessel { min-height: 50svh; }
  .sliver { height: 7rem; }
  .darkroom { display: flex; flex-direction: column; }
  .darkroom-frame { height: 18rem; border-radius: 3rem 1rem 3rem 1rem; }
  .angle-frame { min-height: 31rem; }
  .glint { display: block; }
  .glint-plate { min-height: 19rem; margin: 1rem 0; transform: none; }
  .trace-sequence { grid-template-columns: 1fr; grid-template-rows: repeat(3, 18rem); }
  .trace-1, .trace-2, .trace-3 { grid-column: 1; grid-row: auto; }
  .site-foot,
  .policy-foot { flex-direction: column; }
  .register-band section { min-height: 0; }
}

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