:root {
  color-scheme: light;
  --ink: #151915;
  --blue: #123b9a;
  --navy: #0a225c;
  --paper: #f7f8f3;
  --pale: #e6edfa;
  --light: #fafbf4;
  --fog: #dce5fa;
  --accent: #f8e34f;
  --gutter: clamp(20px, 5vw, 84px);
  --space: clamp(64px, 8vw, 128px);
  --gap: clamp(24px, 5vw, 76px);
  --body: clamp(1rem, .96rem + .22vw, 1.2rem);
  --lead: clamp(1.23rem, 1.02rem + .8vw, 1.8rem);
  --heading: clamp(2.45rem, 5.7vw, 6.2rem);
  --small: .875rem;
  --ease: cubic-bezier(.2,.65,.3,1);
}
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; background: var(--paper); color: var(--ink); font: 400 var(--body)/1.56 "Helvetica Neue", Helvetica, Arial, sans-serif; }
h1, h2, h3, p, figure, dl, dd { margin: 0; }
p + p { margin-top: 1em; }
h1, h2, h3 { font-weight: 800; line-height: .98; letter-spacing: -.065em; }
h2 { font-size: var(--heading); }
h3 { font-size: clamp(1.5rem, 2.55vw, 2.55rem); }
a { color: inherit; text-decoration: none; }
img { display: block; width: 100%; height: auto; }
:focus-visible { outline: 3px solid currentColor; outline-offset: 4px; }
::selection { background: var(--accent); color: var(--ink); }
.wrap { width: min(100% - 2 * var(--gutter), 1440px); margin-inline: auto; }
.sr-only, .viewer input, .skip:not(:focus) { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.skip { position: absolute; z-index: 2; top: 10px; left: var(--gutter); padding: 10px 18px; background: var(--accent); color: var(--ink); }
.mast, .footer { background: var(--ink); color: var(--light); }
.mast-inner, .footer-inner { display: flex; align-items: center; justify-content: space-between; gap: 16px 24px; }
.mast-inner { min-height: 72px; }
.wordmark { font-size: 1.15rem; font-weight: 800; letter-spacing: -.045em; white-space: nowrap; }
nav { display: flex; gap: clamp(10px, 3vw, 36px); align-items: center; }
nav a { display: inline-flex; align-items: center; min-height: 44px; font-weight: 650; font-size: var(--small); }
nav a:hover, .text-link:hover { text-decoration: underline; text-underline-offset: .3em; }
.opening { background: var(--blue); color: var(--light); }
.cover { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); align-items: center; gap: var(--gap); padding-block: clamp(42px, 8vw, 116px); }
.cover h1 { font-size: clamp(3rem, 6.1vw, 6.65rem); }
.cover-logo {
  width: clamp(94px, 10vw, 144px);
  margin-bottom: clamp(14px, 2vw, 26px);
  filter: grayscale(1) invert(1) brightness(2.65);
  mix-blend-mode: screen;
}
.cover-meta { color: var(--fog); font-size: var(--small); margin-bottom: 18px; }
.lead { font-size: var(--lead); line-height: 1.25; letter-spacing: -.023em; font-weight: 570; max-width: 38ch; }
.cover .lead { margin-top: 24px; max-width: 25ch; }
.action { margin-top: 24px; padding: 12px 17px; min-height: 48px; display: inline-flex; align-items: center; gap: 20px; background: var(--accent); color: var(--ink); font-weight: 750; font-size: 1rem; }
.action:hover span { transform: translateY(3px); }
.action span { display: inline-block; transition: transform .22s var(--ease); }
.phone-lineup { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); align-items: start; gap: clamp(7px, 1.25vw, 20px); }
.phone-lineup figure:nth-child(odd) { margin-top: clamp(14px, 2.6vw, 38px); }
.phone-lineup figcaption { margin-top: 12px; font-size: var(--small); font-weight: 750; line-height: 1.25; text-align: center; }
.phone {
  --bezel: clamp(3px, .55vw, 8px);
  --chin: clamp(15px, 2.4vw, 34px);
  position: relative;
  display: block;
  padding: var(--chin) var(--bezel);
  border: 1px solid #7889ac;
  border-radius: clamp(11px, 1.8vw, 27px);
  background: #0b101e;
}
.phone img { aspect-ratio: 9 / 16; object-fit: cover; border-radius: 2px; }
.phone::before, .phone::after { content: ""; position: absolute; inset-inline-start: 50%; transform: translateX(-50%); }
.phone::before { top: calc(var(--chin) / 2); width: 15%; height: 2px; border-radius: 2px; background: #495570; }
.phone::after { bottom: calc(var(--chin) * .2); width: calc(var(--chin) * .62); aspect-ratio: 1; border: 1px solid #495570; border-radius: 50%; }
.art-caption { margin-top: 17px; font-size: var(--small); color: var(--fog); text-align: center; }
.chapter { padding-block: var(--space); scroll-margin-top: 12px; }
.split, .chapter-head { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: var(--gap); }
.chapter-head { align-items: end; margin-bottom: 30px; }
.split > div > p:not(.lead) { max-width: 61ch; }
.handoffs { margin-top: 30px; }
.handoffs div + div { margin-top: 15px; }
.handoffs dt { color: var(--blue); font-weight: 750; }
.sample { background: var(--navy); color: var(--light); }
.sample .chapter-head { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); }
.sample-note { color: var(--fog); margin-bottom: 18px; }
.viewer { position: relative; min-width: 0; margin: 0; padding: 0; border: 0; }
.switch { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 6px; margin-bottom: 6px; }
.switch label { display: grid; place-items: center; text-align: center; padding: 10px 5px; min-height: 46px; cursor: pointer; font-size: var(--small); font-weight: 750; line-height: 1.3; color: var(--light); background: var(--blue); }
.switch label:hover { text-decoration: underline; text-underline-offset: .2em; }
#directory:checked ~ .switch label[for="directory"],
#queue:checked ~ .switch label[for="queue"],
#order:checked ~ .switch label[for="order"],
#confirmation:checked ~ .switch label[for="confirmation"] { background: var(--accent); color: var(--ink); }
#directory:focus-visible ~ .switch label[for="directory"],
#queue:focus-visible ~ .switch label[for="queue"],
#order:focus-visible ~ .switch label[for="order"],
#confirmation:focus-visible ~ .switch label[for="confirmation"] { outline: 3px solid var(--light); outline-offset: 2px; z-index: 1; }
.plate { display: none; grid-template-columns: minmax(0, 300px) minmax(0, 360px); align-items: center; justify-content: center; gap: var(--gap); padding: clamp(18px, 5vw, 64px); background: var(--pale); color: var(--ink); }
.plate figcaption p { margin-top: 13px; }
#directory:checked ~ .viewer-plates .directory,
#queue:checked ~ .viewer-plates .queue,
#order:checked ~ .viewer-plates .order,
#confirmation:checked ~ .viewer-plates .confirmation { display: grid; animation: settle .34s var(--ease) both; }
.execution { background: var(--pale); }
.decisions > div + div { margin-top: 32px; }
.decisions p { margin-top: 12px; max-width: 61ch; }
.results { background: var(--accent); }
.metrics { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); gap: var(--gap); margin-top: 42px; }
.metrics dt { color: var(--navy); font-size: clamp(3rem, 7vw, 7.5rem); font-weight: 800; line-height: 1; letter-spacing: -.075em; font-variant-numeric: tabular-nums; }
.metrics dd { max-width: 40ch; margin-top: 12px; }
.network-context {
  display: grid;
  grid-template-columns: minmax(0, 4fr) minmax(0, 8fr);
  gap: var(--gap);
  margin-top: clamp(38px, 5vw, 72px);
  padding: clamp(20px, 3vw, 44px);
  background: var(--navy);
  color: var(--light);
}
.network-context h3 + p { margin-top: 12px; max-width: 37ch; }
.network-metrics { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; }
.network-metrics dt { font-size: clamp(1.7rem, 3vw, 3rem); font-weight: 800; line-height: 1; letter-spacing: -.055em; color: var(--accent); }
.network-metrics dd { margin-top: 8px; font-size: var(--small); }
.network-source { margin-top: 18px; font-size: var(--small); }
.network-source a { display: inline-block; padding-block: 8px; text-decoration: underline; text-underline-offset: .22em; }
.archive { margin-top: 38px; }
.archive summary { width: fit-content; cursor: pointer; padding: 12px 16px; font-weight: 750; color: var(--light); background: var(--navy); }
.archive figure { margin-top: 22px; max-width: 720px; }
.companion summary { background: var(--blue); }
.companion figure { display: grid; grid-template-columns: minmax(0, 210px) minmax(0, 330px); align-items: center; gap: 20px; }
.archive figcaption { margin-top: 10px; font-size: var(--small); }
.contribution .lead { color: var(--blue); }
.text-link { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; font-weight: 750; }
.footer { padding-block: clamp(48px, 7vw, 94px); }
.footer-inner { align-items: end; }
.footer h2 { margin-top: 14px; font-size: clamp(2.7rem, 7.7vw, 8.7rem); }
.footer h2 span { color: var(--accent); display: block; }
.footer p { color: var(--fog); font-size: var(--small); }
.footer nav { align-items: flex-end; }
[data-reveal].enter { animation: rise .52s var(--ease) both; }
@keyframes rise { from { opacity: .75; transform: translateY(12px); } }
@keyframes settle { from { opacity: .72; } }
@media (max-width: 740px) {
  .cover, .split, .chapter-head, .sample .chapter-head, .network-context { grid-template-columns: minmax(0,1fr); }
  .cover h1 { font-size: clamp(3rem, 12vw, 5.2rem); }
  .cover .lead { margin-top: 17px; }
  .chapter-head { gap: 14px; }
  .footer-inner { align-items: flex-start; flex-direction: column; }
}
@media (max-width: 560px) {
  .mast-inner { flex-wrap: wrap; gap: 2px 12px; padding-block: 10px 4px; }
  .wordmark { font-size: 1.05rem; }
  .mast nav { gap: 14px; flex-wrap: wrap; }
  .mast nav a { font-size: .8125rem; }
  .switch { grid-template-columns: repeat(2,minmax(0,1fr)); }
  .plate, .companion figure { grid-template-columns: minmax(0, 240px); }
  .metrics { grid-template-columns: minmax(0,1fr); }
  .phone-lineup figcaption { font-size: .8125rem; }
}
@media (max-width: 380px) {
  .network-metrics { grid-template-columns: minmax(0,1fr); }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation: none !important; transition: none !important; }
}