/* The game's darkroom palette and type (the game's ActinicTheme.tss and Typography.uss). */

@font-face {
  font-family: 'Cormorant Garamond';
  src: url('/fonts/CormorantGaramondMedium.woff2') format('woff2');
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Spectral';
  src: url('/fonts/SpectralRegular.woff2') format('woff2');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Spectral';
  src: url('/fonts/SpectralMedium.woff2') format('woff2');
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}

:root {
  --color-void: #07080B;
  --color-darkroom: #0E1016;
  --color-graphite: #1C1F27;
  --color-ash: #8A8F9C;
  --color-paper: #D9DCE3;
  --color-actinic: #6F5CFF;
  --color-actinic-bright: #A89CFF;
  --color-flash: #F4F7FF;
  --color-safelight: #C4302B;

  --glow-afterimage:
    0 0 0.03em rgba(168, 156, 255, 0.85),
    0 0 0.22em rgba(111, 92, 255, 0.55),
    0 0 0.9em rgba(196, 48, 43, 0.08);
  --glow-flash:
    0 0 0.02em var(--color-flash),
    0 0 0.16em rgba(244, 247, 255, 0.9),
    0 0 0.45em rgba(111, 92, 255, 0.95),
    0 0 1.1em rgba(196, 48, 43, 0.4);

  --font-display: 'Cormorant Garamond', 'Cormorant', Garamond, 'Times New Roman', serif;
  --font-body: 'Spectral', Georgia, 'Times New Roman', serif;
  --gutter: clamp(20px, 5.5vw, 160px);
  --content: 74rem;
  --header-height: 72px;
}

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

/* The root size grows with the window, so every rem-sized thing scales from a laptop to a 4K screen. */
html {
  font-size: clamp(16px, 0.42vw + 11px, 24px);
  background: var(--color-void);
  scroll-behavior: smooth;
  scroll-padding-top: var(--header-height);
}

body {
  margin: 0;
  overflow-x: hidden;
  background: var(--color-void);
  color: var(--color-paper);
  font-family: var(--font-body);
  font-size: 1.125rem;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

img {
  display: block;
  max-width: 100%;
}

a {
  color: inherit;
}

a:focus-visible,
button:focus-visible {
  outline: 2px solid var(--color-actinic-bright);
  outline-offset: 4px;
}

.skip-link {
  position: absolute;
  left: 16px;
  top: -100px;
  z-index: 100;
  padding: 10px 16px;
  background: var(--color-darkroom);
  color: var(--color-paper);
}

.skip-link:focus {
  top: 16px;
}

/* Shared type */

.eyebrow {
  margin: 0;
  color: var(--color-ash);
  font-family: var(--font-body);
  font-size: 0.78rem;
  font-weight: 500;
  letter-spacing: 0.26em;
  line-height: 1.4;
  text-transform: uppercase;
}

.heading {
  margin: 14px 0 0;
  font-family: var(--font-display);
  font-size: clamp(2.2rem, 4.6vw, 3.6rem);
  font-weight: 500;
  line-height: 1.08;
}

.body {
  margin: 0;
  color: rgba(217, 220, 227, 0.82);
}

.wordmark {
  color: var(--color-actinic-bright);
  font-family: var(--font-display);
  font-size: 1.35rem;
  font-weight: 500;
  letter-spacing: 0.34em;
  text-decoration: none;
  text-shadow: var(--glow-afterimage);
}

/* Buttons light like menu items: focus jumps to Flash and settles on Actinic. */

.button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  min-height: 54px;
  padding: 14px 28px;
  border: 1px solid rgba(168, 156, 255, 0.45);
  background: rgba(7, 8, 11, 0.35);
  color: var(--color-paper);
  font-family: var(--font-body);
  font-size: 0.9rem;
  font-weight: 500;
  letter-spacing: 0.18em;
  line-height: 1.2;
  text-decoration: none;
  text-transform: uppercase;
  cursor: pointer;
  transition: border-color 200ms ease, background-color 200ms ease, box-shadow 200ms ease;
}

.button-solid {
  border-color: var(--color-actinic);
  background: var(--color-actinic);
  color: var(--color-flash);
  box-shadow: 0 0 0 1px rgba(168, 156, 255, 0.25), 0 14px 40px -12px rgba(111, 92, 255, 0.75);
}

.button:hover,
.button:focus-visible,
a:hover > .button,
a:focus-visible > .button {
  animation: expose 320ms ease-out forwards;
}

.button-small {
  min-height: 40px;
  padding: 8px 18px;
  font-size: 0.75rem;
}

@keyframes expose {
  from {
    border-color: var(--color-flash);
    background-color: rgba(244, 247, 255, 0.85);
    color: var(--color-void);
    box-shadow: 0 0 30px -2px rgba(244, 247, 255, 0.7), 0 0 60px -6px rgba(196, 48, 43, 0.35);
  }

  to {
    border-color: var(--color-actinic-bright);
    background-color: var(--color-actinic);
    color: var(--color-flash);
    box-shadow: 0 0 0 1px rgba(168, 156, 255, 0.4), 0 18px 48px -10px rgba(111, 92, 255, 0.9);
  }
}

/* Header */

.site-header {
  position: fixed;
  inset: 0 0 auto 0;
  z-index: 20;
  display: flex;
  align-items: center;
  gap: 40px;
  height: var(--header-height);
  padding: 0 var(--gutter);
  transition: background-color 300ms ease, border-color 300ms ease;
  border-bottom: 1px solid transparent;
}

.site-header.is-scrolled {
  background: rgba(7, 8, 11, 0.86);
  border-bottom-color: var(--color-graphite);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
}

.site-nav {
  display: flex;
  gap: 32px;
  margin-left: auto;
}

.site-nav a {
  color: var(--color-ash);
  font-size: 0.78rem;
  font-weight: 500;
  letter-spacing: 0.22em;
  text-decoration: none;
  text-transform: uppercase;
  transition: color 200ms ease;
}

.site-nav a:hover {
  color: var(--color-actinic-bright);
}

/* Hero */

.hero {
  position: relative;
  display: flex;
  align-items: center;
  min-height: 100vh;
  min-height: 100svh;
  padding: calc(var(--header-height) + 32px) var(--gutter) 96px;
  overflow: hidden;
  isolation: isolate;
}

.room {
  position: absolute;
  inset: 0;
  z-index: -2;
  background: #000;
}

.room-layer {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 72% 50%;
}

.room-flash {
  opacity: 0;
}

.hero-shade {
  position: absolute;
  inset: 0;
  z-index: -1;
  background:
    linear-gradient(90deg, rgba(0, 0, 0, 0.55) 0%, rgba(0, 0, 0, 0.2) 45%, transparent 70%),
    linear-gradient(180deg, transparent 70%, var(--color-void) 100%);
  pointer-events: none;
}

.hero-content {
  width: 100%;
}

.hero-content > * {
  max-width: min(40rem, 46vw);
}

.hero-content > .actions {
  max-width: none;
}

.chips {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin: 0;
}

.chip {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 6px 12px;
  border: 1px solid var(--color-graphite);
  background: rgba(14, 16, 22, 0.7);
  color: var(--color-paper);
  font-size: 0.72rem;
  font-weight: 500;
  letter-spacing: 0.2em;
  line-height: 1.3;
  text-transform: uppercase;
}

.chip-rating {
  border-color: var(--color-safelight);
  box-shadow: 0 0 14px rgba(196, 48, 43, 0.3);
  letter-spacing: 0.08em;
}

.pulse {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--color-actinic-bright);
  box-shadow: 0 0 0 0 rgba(168, 156, 255, 0.6);
}

.title {
  max-width: none;
  margin: 28px 0 0;
  font-family: var(--font-display);
  font-size: clamp(3rem, 6.6vw, 15rem);
  font-weight: 500;
  line-height: 0.95;
  letter-spacing: 0.22em;
  white-space: nowrap;
}

.title-letter {
  display: inline-block;
  color: var(--color-actinic-bright);
  opacity: var(--rest);
  text-shadow: var(--glow-afterimage);
}

/* Each letter rests at its own brightness, as the menu title does. */
.title-letter:nth-child(1) { --rest: 0.86; }
.title-letter:nth-child(2) { --rest: 0.66; }
.title-letter:nth-child(3) { --rest: 0.92; }
.title-letter:nth-child(4) { --rest: 0.6; }
.title-letter:nth-child(5) { --rest: 0.8; }
.title-letter:nth-child(6) { --rest: 0.7; }
.title-letter:nth-child(7) { --rest: 0.88; }

.tagline {
  margin: 18px 0 0;
  font-family: var(--font-display);
  font-size: clamp(1.7rem, 2.5vw, 4.2rem);
  font-weight: 500;
  line-height: 1.15;
}

.lede {
  margin: 18px 0 0;
  color: rgba(217, 220, 227, 0.85);
  font-size: clamp(1.05rem, 1.4vw, 1.2rem);
}

.actions {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  margin-top: 34px;
}

.hero-note {
  margin: 18px 0 0;
  color: var(--color-ash);
  font-size: 0.9rem;
}

.scroll-cue {
  position: absolute;
  left: 50%;
  bottom: 28px;
  width: 26px;
  height: 42px;
  margin-left: -13px;
  border: 1px solid rgba(168, 156, 255, 0.4);
  border-radius: 13px;
}

.scroll-cue span {
  position: absolute;
  left: 50%;
  top: 9px;
  width: 3px;
  height: 8px;
  margin-left: -1.5px;
  border-radius: 2px;
  background: var(--color-actinic-bright);
}

/* Sections */

.section {
  max-width: calc(var(--content) + 2 * var(--gutter));
  margin: 0 auto;
  padding: clamp(80px, 11vw, 140px) var(--gutter);
}

.section-head {
  max-width: 48rem;
  margin-bottom: clamp(40px, 6vw, 64px);
}

.house {
  display: grid;
  grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr);
  gap: clamp(40px, 6vw, 112px);
  align-items: center;
}

.house-text .body {
  max-width: 30rem;
  margin-top: 22px;
}

.house-plan {
  margin: 0;
  padding: clamp(24px, 3.5vw, 56px);
  border: 1px solid var(--color-graphite);
  background:
    linear-gradient(rgba(168, 156, 255, 0.045) 1px, transparent 1px) 0 0 / 32px 32px,
    linear-gradient(90deg, rgba(168, 156, 255, 0.045) 1px, transparent 1px) 0 0 / 32px 32px,
    var(--color-darkroom);
  box-shadow: 0 40px 90px -40px rgba(111, 92, 255, 0.45);
}

.house-plan img {
  width: 100%;
  max-width: 34rem;
  height: auto;
  margin: 0 auto;
  filter: drop-shadow(0 0 6px rgba(111, 92, 255, 0.55));
}

.house-plan figcaption {
  margin-top: 20px;
  color: var(--color-ash);
  font-size: 0.78rem;
  font-weight: 500;
  letter-spacing: 0.22em;
  text-align: center;
  text-transform: uppercase;
}

.premise {
  display: grid;
  grid-template-columns: minmax(0, 1.2fr) minmax(0, 0.8fr);
  gap: clamp(40px, 6vw, 88px);
  align-items: center;
}

.premise-quote {
  margin: 18px 0 0;
  font-family: var(--font-display);
  font-size: clamp(2rem, 3.8vw, 3.1rem);
  font-weight: 500;
  line-height: 1.15;
}

.premise-turn {
  margin: 28px 0 0;
  color: var(--color-actinic-bright);
  font-family: var(--font-display);
  font-size: clamp(1.5rem, 2.4vw, 2rem);
  line-height: 1.25;
  text-shadow: 0 0 24px rgba(111, 92, 255, 0.55);
}

.premise .body {
  max-width: 560px;
  margin-top: 28px;
}

.premise-figure {
  margin: 0;
}

.premise-figure img {
  width: 100%;
  height: auto;
  border: 1px solid var(--color-graphite);
  box-shadow: 0 40px 90px -30px rgba(111, 92, 255, 0.45);
}

.premise-figure figcaption {
  margin-top: 12px;
  color: var(--color-ash);
  font-size: 0.8rem;
  letter-spacing: 0.08em;
}

.cards {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 20px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.card {
  position: relative;
  padding: 32px 28px 30px;
  border: 1px solid var(--color-graphite);
  background: rgba(14, 16, 22, 0.78);
  transition: border-color 250ms ease, box-shadow 250ms ease, background-color 250ms ease;
}

.card:hover {
  border-color: rgba(168, 156, 255, 0.45);
  background: rgba(20, 20, 34, 0.86);
  box-shadow: 0 24px 60px -30px rgba(111, 92, 255, 0.6);
}

.card-icon {
  width: 44px;
  height: 44px;
  fill: none;
  stroke: var(--color-actinic-bright);
  stroke-width: 1.6;
  stroke-linecap: round;
  stroke-linejoin: round;
  filter: drop-shadow(0 0 6px rgba(111, 92, 255, 0.7));
}

.card-icon-hole {
  fill: var(--color-flash);
  stroke: none;
}

.card h3 {
  margin: 22px 0 10px;
  font-family: var(--font-display);
  font-size: 1.7rem;
  font-weight: 500;
  line-height: 1.15;
}

.card p {
  margin: 0;
  color: rgba(217, 220, 227, 0.78);
  font-size: 1.02rem;
}

.section-note {
  margin-top: 18px;
  color: var(--color-ash);
}

/* The gallery runs to the window edges: the shot in view lines up with the text column and the next one runs off the
   side. The track scrolls sideways natively, so trackpads, swipes and the arrows all move it, and each shot snaps into
   place. --bleed is the text column's distance from the window edge. */
.gallery {
  --bleed: max(var(--gutter), (100vw - var(--content)) / 2);
  position: relative;
  margin: 0 calc(50% - 50vw);
}

.gallery-track {
  display: flex;
  gap: 20px;
  padding: 0 var(--bleed);
  scroll-padding: 0 var(--bleed);
  overflow-x: auto;
  overscroll-behavior-x: contain;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  scrollbar-width: none;
}

.gallery-track::-webkit-scrollbar {
  display: none;
}

.gallery-track:focus-visible {
  outline: 2px solid var(--color-actinic-bright);
  outline-offset: 4px;
}

.gallery-slide {
  flex: 0 0 min(100vw - 2 * var(--bleed), 88vw, (100vh - 20rem) * 16 / 9);
  margin: 0;
  scroll-snap-align: start;
}

.shot-link {
  display: block;
  border: 1px solid var(--color-graphite);
  background: #000;
  cursor: zoom-in;
  transition: border-color 250ms ease, box-shadow 250ms ease;
}

.shot-link:hover {
  border-color: rgba(168, 156, 255, 0.45);
  box-shadow: 0 24px 60px -30px rgba(111, 92, 255, 0.6);
}

.gallery-slide img {
  width: 100%;
  height: auto;
}

.gallery-slide figcaption {
  max-width: 44rem;
  margin-top: 14px;
  color: rgba(217, 220, 227, 0.78);
  font-size: 1rem;
  line-height: 1.5;
}

.gallery-step {
  position: absolute;
  top: calc((100% - 3rem) / 2);
  width: 48px;
  height: 64px;
  margin-top: -32px;
  padding: 0;
  border: 1px solid var(--color-graphite);
  background: rgba(14, 16, 22, 0.86);
  color: var(--color-paper);
  cursor: pointer;
  transition: border-color 200ms ease, color 200ms ease, opacity 200ms ease;
}

.gallery-step svg {
  width: 22px;
  height: 22px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.6;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.gallery-step:hover {
  border-color: rgba(168, 156, 255, 0.45);
  color: var(--color-actinic-bright);
}

.gallery-step:disabled {
  opacity: 0;
  pointer-events: none;
}

.gallery-previous {
  left: calc(var(--bleed) - 24px);
}

.gallery-next {
  right: calc(var(--bleed) - 24px);
}

.gallery-thumbs {
  display: flex;
  gap: 12px;
  margin-top: 28px;
}

.gallery-thumb {
  width: clamp(64px, 11vw, 150px);
  padding: 0;
  border: 1px solid var(--color-graphite);
  background: #000;
  opacity: 0.5;
  cursor: pointer;
  transition: opacity 200ms ease, border-color 200ms ease, box-shadow 200ms ease;
}

.gallery-thumb img {
  width: 100%;
  height: auto;
}

.gallery-thumb:hover {
  opacity: 0.85;
}

.gallery-thumb[aria-current="true"] {
  border-color: var(--color-actinic-bright);
  opacity: 1;
  box-shadow: 0 0 18px -4px rgba(111, 92, 255, 0.8);
}

html.is-viewing {
  overflow: hidden;
}

.viewer {
  max-width: none;
  max-height: none;
  width: 100%;
  height: 100%;
  margin: 0;
  padding: clamp(16px, 3vw, 48px) calc(48px + 2 * clamp(8px, 1.5vw, 24px));
  border: 0;
  background: transparent;
  color: var(--color-paper);
}

.viewer[open] {
  display: flex;
  align-items: center;
  justify-content: center;
}

.viewer::backdrop {
  background: rgba(7, 8, 11, 0.985);
}

.viewer-figure {
  margin: 0;
}

.viewer-image {
  width: auto;
  max-width: 100%;
  max-height: calc(100vh - 2 * clamp(16px, 3vw, 48px) - 4rem);
  margin: 0 auto;
  border: 1px solid var(--color-graphite);
}

.viewer-caption {
  max-width: 48rem;
  margin: 14px auto 0;
  color: rgba(217, 220, 227, 0.82);
  font-size: 1rem;
  text-align: center;
}

.viewer-count {
  margin-right: 14px;
  color: var(--color-ash);
  font-size: 0.78rem;
  font-weight: 500;
  letter-spacing: 0.22em;
}

.viewer-step {
  position: absolute;
  top: 50%;
  width: 48px;
  height: 64px;
  margin-top: -32px;
  padding: 0;
  border: 1px solid var(--color-graphite);
  background: rgba(14, 16, 22, 0.8);
  color: var(--color-paper);
  cursor: pointer;
}

.viewer-step svg {
  width: 22px;
  height: 22px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.6;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.viewer-step:hover {
  border-color: rgba(168, 156, 255, 0.45);
  color: var(--color-actinic-bright);
}

.viewer-previous {
  left: clamp(8px, 1.5vw, 24px);
}

.viewer-next {
  right: clamp(8px, 1.5vw, 24px);
}

.viewer-close {
  position: absolute;
  top: clamp(8px, 1.5vw, 24px);
  right: clamp(8px, 1.5vw, 24px);
  width: 48px;
  height: 48px;
  padding: 0;
  border: 1px solid var(--color-graphite);
  background: rgba(14, 16, 22, 0.8);
  color: var(--color-paper);
  font-family: var(--font-body);
  font-size: 1.6rem;
  line-height: 1;
  cursor: pointer;
}

.viewer-close:hover {
  border-color: rgba(168, 156, 255, 0.45);
  color: var(--color-actinic-bright);
}

.timeline {
  position: relative;
  display: grid;
  gap: 18px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.timeline::before {
  content: "";
  position: absolute;
  left: 40px;
  top: 40px;
  bottom: 40px;
  width: 1px;
  background: var(--color-graphite);
}

.timeline-item {
  position: relative;
  display: grid;
  grid-template-columns: 24px 200px minmax(0, 1fr);
  gap: 28px;
  align-items: start;
  padding: 28px;
  border: 1px solid var(--color-graphite);
  background: rgba(14, 16, 22, 0.78);
}

.timeline-mark {
  width: 24px;
  height: 24px;
  margin-top: 2px;
  border: 1px solid var(--color-ash);
  background: var(--color-void);
}

.timeline-item-now .timeline-mark {
  border-color: var(--color-actinic-bright);
  background: radial-gradient(circle, var(--color-actinic-bright) 0 3.5px, var(--color-void) 4.5px);
  box-shadow: 0 0 14px rgba(111, 92, 255, 0.7);
}

.timeline-status {
  margin: 6px 0 0;
  font-family: var(--font-display);
  font-size: 1.5rem;
  line-height: 1.2;
}

.timeline-item-now .timeline-status {
  color: var(--color-actinic-bright);
}

.timeline-body p {
  margin: 0;
}

.built-list {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px 28px;
  margin: 14px 0 0;
  padding: 0;
  list-style: none;
  color: rgba(217, 220, 227, 0.82);
  font-size: 1rem;
}

.built-list li {
  position: relative;
  padding-left: 20px;
}

.built-list li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.8em;
  width: 8px;
  height: 1px;
  background: var(--color-actinic-bright);
}

.follow {
  display: grid;
  grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr);
  gap: 20px;
}

.follow-main {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 14px;
  padding: clamp(28px, 4vw, 44px);
  border: 1px solid rgba(111, 92, 255, 0.45);
  background:
    radial-gradient(ellipse 70% 90% at 100% 0%, rgba(111, 92, 255, 0.22), transparent 70%),
    rgba(14, 16, 22, 0.86);
  text-decoration: none;
  box-shadow: 0 30px 80px -40px rgba(111, 92, 255, 0.7);
}

.follow-title {
  margin: 0;
  font-family: var(--font-display);
  font-size: clamp(2rem, 3.4vw, 2.8rem);
  line-height: 1.05;
}

.follow-main .button {
  margin-top: 10px;
}

.follow-links {
  display: grid;
  gap: 20px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.follow-link {
  display: flex;
  flex-direction: column;
  gap: 6px;
  height: 100%;
  padding: 22px 26px;
  border: 1px solid var(--color-graphite);
  background: rgba(14, 16, 22, 0.78);
  text-decoration: none;
  transition: border-color 250ms ease, background-color 250ms ease;
}

.follow-link:hover {
  border-color: rgba(168, 156, 255, 0.45);
  background: rgba(20, 20, 34, 0.86);
}

.follow-link-title {
  font-family: var(--font-display);
  font-size: 1.5rem;
  line-height: 1.2;
}

.follow-link:hover .follow-link-title {
  color: var(--color-actinic-bright);
}

/* Footer */

.footer {
  border-top: 1px solid var(--color-graphite);
  color: var(--color-ash);
  font-size: 0.88rem;
}

.footer-inner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 20px 40px;
  max-width: calc(var(--content) + 2 * var(--gutter));
  margin: 0 auto;
  padding: 40px var(--gutter) 20px;
}

.footer-links {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 28px;
  margin: 0;
}

.footer-links a,
.footer-links button {
  padding: 0;
  border: 0;
  background: none;
  color: inherit;
  font: inherit;
  letter-spacing: 0.06em;
  text-decoration: none;
  cursor: pointer;
}

.footer-links a:hover,
.footer-links button:hover {
  color: var(--color-actinic-bright);
}

.footer-copyright {
  max-width: calc(var(--content) + 2 * var(--gutter));
  margin: 0 auto;
  padding: 0 var(--gutter) 48px;
  font-size: 0.8rem;
}

/* Consent banner */

.consent {
  position: fixed;
  inset: auto 0 0 0;
  z-index: 30;
  padding: 16px;
}

.consent[hidden] {
  display: none;
}

.consent-panel {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 16px 32px;
  max-width: 52rem;
  margin: 0 auto;
  padding: 20px 24px;
  border: 1px solid var(--color-graphite);
  background: var(--color-darkroom);
  box-shadow: 0 16px 48px rgba(0, 0, 0, 0.6);
}

.consent-panel p {
  flex: 1 1 22rem;
  margin: 0;
  font-size: 0.95rem;
  line-height: 1.55;
}

.consent-panel a {
  color: var(--color-actinic-bright);
  text-underline-offset: 4px;
}

.consent-buttons {
  display: flex;
  gap: 12px;
}

/* Privacy page */

.page-header {
  max-width: 46rem;
  margin: 0 auto;
  padding: 32px var(--gutter) 0;
}

.policy {
  max-width: 46rem;
  margin: 0 auto;
  padding: 48px var(--gutter) 96px;
}

.policy h1 {
  margin: 0.4em 0 0.6em;
  font-family: var(--font-display);
  font-size: clamp(2.2rem, 6vw, 3rem);
  font-weight: 500;
  line-height: 1.1;
}

.policy h2 {
  margin: 2.2em 0 0.4em;
  font-family: var(--font-display);
  font-size: 1.6rem;
  font-weight: 500;
}

.policy ul {
  padding-left: 1.2em;
}

.policy li {
  margin-bottom: 0.6em;
}

.policy a {
  color: var(--color-actinic-bright);
  text-underline-offset: 4px;
}

/* Narrow screens */

@media (max-width: 960px) {
  .site-nav {
    display: none;
  }

  .site-header-cta {
    margin-left: auto;
  }

  .premise,
  .house {
    grid-template-columns: 1fr;
  }

  .premise-figure {
    max-width: 420px;
  }

  .cards {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .follow {
    grid-template-columns: 1fr;
  }

  .timeline-item {
    grid-template-columns: 24px minmax(0, 1fr);
  }

  .timeline-body {
    grid-column: 2;
  }
}

/* On narrow or squarish windows the room takes the top of the screen and the text follows below it, so the text never
   covers the figure. */
@media (max-width: 640px), (max-aspect-ratio: 13/10) {
  .hero {
    display: block;
    min-height: 0;
    padding: 0 0 72px;
  }

  .room {
    position: relative;
    overflow: hidden;
    height: 60vh;
    height: 60svh;
  }

  .room-layer {
    object-position: 88% 50%;
    transform: scale(1.45);
    transform-origin: 86% 48%;
  }

  .hero-shade {
    bottom: auto;
    height: 60vh;
    height: 60svh;
    background: linear-gradient(180deg, rgba(7, 8, 11, 0.6) 0%, transparent 22%, transparent 70%, var(--color-void) 100%);
  }

  .hero-content {
    position: relative;
    margin-top: -40px;
    padding: 0 var(--gutter);
  }

  .hero-content > * {
    max-width: 40rem;
  }

  .title {
    font-size: min(13.5vw, 9rem);
  }

  .scroll-cue {
    display: none;
  }
}

@media (max-width: 640px) {

  .title {
    letter-spacing: 0.18em;
  }

  .cards {
    grid-template-columns: 1fr;
  }

  .gallery-track {
    gap: 12px;
  }

  .gallery-slide {
    flex-basis: 84vw;
  }

  .gallery-step {
    display: none;
  }

  .built-list {
    grid-template-columns: 1fr;
  }

  .timeline::before {
    display: none;
  }

  .timeline-item {
    padding: 22px;
    gap: 18px;
  }

  .actions .button {
    flex: 1 1 100%;
  }

  /* On phones the arrows sit below the image, so the shot keeps the full width. */
  .viewer {
    padding: 72px 12px 96px;
  }

  .viewer-step {
    top: auto;
    bottom: 20px;
    margin-top: 0;
  }

  .viewer-previous {
    left: calc(50% - 60px);
  }

  .viewer-next {
    right: calc(50% - 60px);
  }
}

/* Motion: the page develops like a print, and the room and title wait dark for the first flash. */

@media (prefers-reduced-motion: no-preference) {
  .develop {
    animation: develop 1.4s ease-out 0.7s both;
  }

  .js .title-letter {
    opacity: 0;
  }

  .js .room {
    opacity: 0;
  }

  .pulse {
    animation: pulse 2.4s ease-in-out infinite;
  }

  .scroll-cue span {
    animation: scroll-cue 2s ease-in-out infinite;
  }
}

@keyframes develop {
  from {
    opacity: 0;
    filter: brightness(0.3) blur(1.5px);
  }

  to {
    opacity: 1;
    filter: none;
  }
}

@keyframes pulse {
  0%,
  100% {
    box-shadow: 0 0 0 0 rgba(168, 156, 255, 0.6);
  }

  50% {
    box-shadow: 0 0 0 7px rgba(168, 156, 255, 0);
  }
}

@keyframes scroll-cue {
  0% {
    opacity: 0;
    transform: translateY(0);
  }

  30% {
    opacity: 1;
  }

  100% {
    opacity: 0;
    transform: translateY(14px);
  }
}

@media (prefers-reduced-motion: reduce) {
  html,
  .gallery-track {
    scroll-behavior: auto;
  }

  .button:hover,
  .button:focus-visible,
  a:hover > .button,
  a:focus-visible > .button {
    animation: none;
    border-color: var(--color-actinic-bright);
  }
}