:root {
  --photon-ink: #171d2d;
  --photon-paper: #f7f4ec;
  --photon-paper-deep: #e4dfd3;
  --photon-red: #812e29;
  --photon-red-deep: #421a1a;
  --photon-blue: #173f73;
  --photon-blue-deep: #0b223e;
  --photon-gold: #efbd6a;
  --photon-green: #5abf87;
  --photon-line: #6b6b67;
  --photon-shadow: rgba(12, 17, 29, .34);
}

* { box-sizing: border-box; }

body {
  min-width: 320px;
  margin: 0;
  color: var(--photon-ink);
  background:
    linear-gradient(rgba(255,255,255,.27) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.27) 1px, transparent 1px),
    #aeb9c9;
  background-size: 18px 18px;
}

.photonic-page {
  width: min(1180px, calc(100% - 48px));
  margin: 24px auto 56px;
  overflow: hidden;
  border: 1px solid #334157;
  background: var(--photon-paper);
  box-shadow: 0 28px 70px var(--photon-shadow);
}

.photonic-hero {
  position: relative;
  min-height: min(760px, 86svh);
  padding: clamp(28px, 5vw, 64px);
  overflow: hidden;
  color: #fff;
  background:
    radial-gradient(circle at 50% 19%, rgba(255,255,255,.93) 0 3%, rgba(255,255,255,.12) 3.2%, transparent 15%),
    linear-gradient(112deg, var(--photon-red-deep) 0%, var(--photon-red) 39%, #e8e5dc 39.2%, #e8e5dc 58%, var(--photon-blue) 58.2%, var(--photon-blue-deep) 100%);
}

.photonic-hero::after {
  position: absolute;
  inset: auto -8% -26% 23%;
  height: 54%;
  content: "";
  border: 1px solid rgba(255,255,255,.5);
  background: linear-gradient(155deg, rgba(255,255,255,.27), rgba(239,189,106,.06) 54%, rgba(23,63,115,.2));
  box-shadow: 0 -24px 60px rgba(7,13,24,.25);
  transform: skewX(-18deg);
}

.photonic-hero .hierarchy-nav,
.photonic-hero .hierarchy-nav a { color: #fff; }

.hero-copy {
  position: relative;
  z-index: 1;
  width: min(820px, 90%);
  margin-top: clamp(110px, 20svh, 190px);
  padding: clamp(24px, 4vw, 44px);
  border-left: 4px solid var(--photon-gold);
  background: rgba(12, 20, 35, .78);
  box-shadow: 0 22px 48px rgba(8,12,20,.34);
}

.hero-copy .project-status {
  margin: 0 0 16px;
  color: #ffe0a4;
  letter-spacing: .12em;
}

.hero-copy h1 {
  max-width: 780px;
  margin: 0;
  font-size: clamp(48px, 7.2vw, 84px);
  line-height: .94;
  letter-spacing: -.045em;
}

.hero-copy .project-lede {
  max-width: 690px;
  margin: 28px 0 0;
  font-size: clamp(19px, 2.4vw, 28px);
  line-height: 1.35;
}

.field-equation {
  position: absolute;
  z-index: 1;
  right: clamp(22px, 5vw, 64px);
  bottom: clamp(22px, 5vw, 54px);
  display: flex;
  align-items: center;
  gap: 14px;
  margin: 0;
  padding: 11px 14px;
  border: 1px solid rgba(255,255,255,.52);
  background: rgba(12,20,35,.82);
  font-size: 13px;
  letter-spacing: .06em;
  text-transform: uppercase;
}

.field-equation b { color: var(--photon-gold); font-size: 24px; }

.photonic-page section { border-top: 1px solid var(--photon-line); }

.problem-section,
.hypothesis-section,
.journey-section,
.mechanism-section,
.receipt-section,
.demonstrators-section,
.views-section,
.next-section,
.limits-section { padding: clamp(42px, 7vw, 84px); }

.photonic-page h2 {
  max-width: 820px;
  margin: 0 0 24px;
  font-size: clamp(34px, 5vw, 62px);
  line-height: 1;
  letter-spacing: -.035em;
}

.photonic-page section p {
  max-width: 790px;
  font-size: clamp(17px, 1.8vw, 21px);
  line-height: 1.65;
}

.section-intro { display: grid; grid-template-columns: 1fr 1fr; gap: 40px; align-items: end; }
.section-intro h2, .section-intro p { margin-top: 0; }

.problem-section { background: #fffdf7; }
.problem-section > p { margin-top: 36px; }
.problem-statement { margin: 0; color: var(--photon-red-deep); font-size: clamp(24px, 3.2vw, 38px) !important; font-weight: 700; line-height: 1.25 !important; }

.hypothesis-section { color: #f5f1e7; background: var(--photon-blue-deep); }
.hypothesis-section .section-intro p { color: #dce4ee; }
.hypothesis-section blockquote {
  margin: 48px 0 30px;
  padding: clamp(24px, 4vw, 42px);
  border: 1px solid #94abc5;
  border-left: 5px solid var(--photon-gold);
  color: #fff2d3;
  background: rgba(255,255,255,.06);
  font-size: clamp(25px, 3.5vw, 42px);
  font-weight: 700;
  line-height: 1.25;
}
.hypothesis-section > p { color: #dce4ee; }

.journey-player {
  margin: clamp(28px, 5vw, 54px) 0 0;
  border: 1px solid #111826;
  background: #080d16;
  box-shadow: 0 24px 48px var(--photon-shadow);
}

.journey-player video { display: block; width: 100%; aspect-ratio: 16 / 9; background: #080d16; }
.journey-player figcaption { padding: 12px 16px; color: #f0e6d1; background: #202a38; font-size: 14px; }

.mechanism-section { background: #fffdf7; }

.transport-line {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  margin: 48px 0;
  padding: 0;
  border-block: 1px solid #777b7c;
  list-style: none;
}

.transport-line li { min-height: 180px; padding: 24px; border-left: 1px solid #777b7c; }
.transport-line li:first-child { border-left: 0; }
.transport-line strong { display: block; margin-bottom: 14px; color: var(--photon-blue); font-size: 26px; }
.transport-line span { line-height: 1.55; }
.stage-label { margin: 44px 0 0; color: var(--photon-red); font-size: 15px; letter-spacing: .1em; text-transform: uppercase; }
.transport-line.scene-stages { grid-template-columns: repeat(4, 1fr); margin-top: 14px; }
.transport-line.camera-stages { grid-template-columns: 1fr; margin-top: 14px; }
.transport-line.scene-stages li { padding: 20px; }
.transport-line.scene-stages strong { font-size: 21px; }
.transport-line.camera-stages li { min-height: 0; }

.receipt-section {
  display: grid;
  grid-template-columns: minmax(0, 1.2fr) minmax(280px, .8fr);
  gap: clamp(40px, 7vw, 90px);
  color: #f6f2e8;
  background: #303a48;
}

.receipt-copy p { font-size: 17px !important; }

.source-link { color: #ffe09f; text-decoration-thickness: 2px; text-underline-offset: 4px; }

.measurement-ledger { margin: 0; border: 1px solid #aeb8c5; background: #202936; }
.measurement-ledger div { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; padding: 14px 16px; border-top: 1px solid #687483; }
.measurement-ledger div:first-child { border-top: 0; }
.measurement-ledger dt { color: #bdc8d7; }
.measurement-ledger dd { margin: 0; color: #fff2d3; font-variant-numeric: tabular-nums; }

.results-table-wrap { grid-column: 1 / -1; overflow-x: auto; border: 1px solid #aeb8c5; }
.results-table { width: 100%; min-width: 730px; border-collapse: collapse; background: #202936; font-variant-numeric: tabular-nums; }
.results-table caption { padding: 14px 16px; color: #fff2d3; background: #111924; font-size: 14px; font-weight: 700; text-align: left; }
.results-table th,
.results-table td { padding: 14px 16px; border-top: 1px solid #687483; border-left: 1px solid #687483; text-align: left; vertical-align: top; }
.results-table th:first-child,
.results-table td:first-child { border-left: 0; }
.results-table thead th { color: #bdc8d7; font-size: 12px; letter-spacing: .06em; text-transform: uppercase; }
.results-table tbody th { color: #fff; }
.results-table td { color: #eef2f7; }
.results-reading { grid-column: 1 / -1; margin: 0; font-size: 17px !important; }

.demonstrators-section {
  color: #f5f1e7;
  background: var(--photon-ink);
}

.demonstrators-section > .section-intro { margin-bottom: 54px; }
.demonstrators-section > .section-intro p { color: #ced6e1; }

.demonstrator {
  display: grid;
  grid-template-columns: minmax(250px, .72fr) minmax(0, 1.28fr);
  gap: 22px;
  margin-top: 28px;
  padding: clamp(20px, 3vw, 34px);
  border: 1px solid #677487;
  background: #283343;
  box-shadow: 0 18px 34px rgba(0,0,0,.26);
}

.demonstrator header { align-self: center; }
.demonstrator h3 { margin: 0 0 18px; font-size: clamp(32px, 4vw, 50px); line-height: 1; letter-spacing: -.03em; }
.demonstrator header p { margin: 0; color: #d9e0e8; font-size: 16px; line-height: 1.58; }
.demonstrator .demonstrator-kicker { margin-bottom: 12px; color: var(--photon-gold); font-size: 12px; font-weight: 800; letter-spacing: .11em; text-transform: uppercase; }
.demonstrator video { display: block; width: 100%; aspect-ratio: 16 / 9; align-self: center; border: 1px solid #9ba5b3; background: #070b12; }

.demonstrator-stills {
  display: grid;
  grid-column: 1 / -1;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}

.demonstrator-stills figure { margin: 0; border: 1px solid #697586; background: #111a28; }
.demonstrator-stills img { display: block; width: 100%; height: auto; }
.demonstrator-stills figcaption { padding: 12px 14px 14px; color: #dce2e9; font-size: 14px; line-height: 1.45; }

.demonstrator-ledger {
  display: grid;
  grid-column: 1 / -1;
  grid-template-columns: 1.5fr 1fr 1.2fr 1fr;
  margin: 0;
  border: 1px solid #6e7989;
}

.demonstrator-ledger div { padding: 12px 14px; border-left: 1px solid #6e7989; }
.demonstrator-ledger div:first-child { border-left: 0; }
.demonstrator-ledger dt { margin-bottom: 5px; color: #aeb9c7; font-size: 12px; letter-spacing: .06em; text-transform: uppercase; }
.demonstrator-ledger dd { margin: 0; color: #fff1ce; font-size: 14px; font-variant-numeric: tabular-nums; line-height: 1.4; }
.aperture-demonstrator { border-top: 4px solid #b779d1; }
.relay-demonstrator { border-top: 4px solid #5bc8d8; }
.garden-demonstrator { border-top: 4px solid #8fc94d; }

.views-section { background: var(--photon-paper-deep); }
.view-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
.view-grid figure { margin: 0; border: 1px solid #626762; background: #f9f7f0; box-shadow: 0 10px 24px rgba(25,30,38,.16); }
.view-grid img { display: block; width: 100%; height: auto; }
.view-grid figcaption { padding: 16px 18px 18px; line-height: 1.45; }

.next-section {
  min-height: 430px;
  color: #fff;
  background: linear-gradient(110deg, var(--photon-red-deep), #3a2930 48%, var(--photon-blue-deep));
}

.next-section p { color: #f3eee4; }

.limits-section { background: #fffdf7; }
.limits-section p { font-size: 17px !important; }
.limits-section .code-link { margin-top: 34px; padding-top: 24px; border-top: 1px solid #777b7c; }
.limits-section .source-link { color: var(--photon-blue); font-weight: 700; }

a:focus-visible,
video:focus-visible { outline: 3px solid var(--photon-gold); outline-offset: 4px; }

@media (max-width: 760px) {
  .photonic-page { width: 100%; margin: 0; border-inline: 0; }
  .photonic-hero { min-height: 720px; }
  .hero-copy { width: 100%; margin-top: 96px; }
  .field-equation { left: 24px; right: auto; flex-wrap: wrap; }
  .section-intro,
  .receipt-section,
  .demonstrator,
  .demonstrator-stills,
  .view-grid { grid-template-columns: 1fr; }
  .demonstrator-ledger { grid-template-columns: 1fr 1fr; }
  .demonstrator-ledger div:nth-child(odd) { border-left: 0; }
  .demonstrator-ledger div:nth-child(n+3) { border-top: 1px solid #6e7989; }
  .transport-line { grid-template-columns: 1fr; }
  .transport-line.scene-stages { grid-template-columns: 1fr; }
  .transport-line li { min-height: 0; border-top: 1px solid #777b7c; border-left: 0; }
  .transport-line li:first-child { border-top: 0; }
}

@media (prefers-reduced-motion: reduce) {
  .journey-player video { scroll-behavior: auto; }
}