:root {
  color-scheme: light;
  --paper: #f2f0e9;
  --ink: #11110f;
  --muted: #676760;
  --line: rgba(17, 17, 15, 0.18);
  --signal: #b32024;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
}
a { color: inherit; }
.masthead {
  position: relative;
  z-index: 10;
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: 84px;
  padding: 18px clamp(20px, 4vw, 64px);
  border-bottom: 1px solid var(--line);
}
.identity { display: flex; align-items: center; gap: 13px; text-decoration: none; font-size: 13px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; }
.identity img { width: 42px; height: 42px; }
.masthead nav { display: flex; gap: clamp(18px, 3vw, 42px); }
.masthead nav a, footer a { color: var(--muted); font-size: 11px; letter-spacing: .11em; text-decoration: none; text-transform: uppercase; }
.masthead nav a:hover, footer a:hover { color: var(--ink); }
.hero {
  position: relative;
  min-height: calc(100vh - 84px);
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  padding: 12vh clamp(20px, 6vw, 96px) 10vh;
  overflow: hidden;
}
.eyebrow { margin: 0 0 24px; color: var(--muted); font-size: 10px; letter-spacing: .16em; text-transform: uppercase; }
.hero h1, .section h2 { margin: 0; font-family: Didot, "Bodoni MT", "Times New Roman", serif; font-weight: 400; }
.hero h1 { position: relative; z-index: 2; max-width: 1050px; font-size: clamp(56px, 10vw, 154px); line-height: .84; letter-spacing: -.045em; }
.lead { position: relative; z-index: 2; max-width: 610px; margin: 44px 0 0 auto; font: clamp(17px, 1.7vw, 25px)/1.45 Didot, "Times New Roman", serif; }
.field { position: absolute; top: 6%; right: -5%; width: min(65vw, 850px); aspect-ratio: 1; opacity: .72; }
.orbit, .kernel { position: absolute; inset: 50%; border: 1px solid var(--line); transform: translate(-50%, -50%); }
.orbit-a { width: 82%; height: 82%; border-radius: 50%; animation: turn 48s linear infinite; }
.orbit-b { width: 56%; height: 56%; transform: translate(-50%, -50%) rotate(45deg); animation: counterturn 34s linear infinite; }
.orbit::before, .orbit::after { content: ""; position: absolute; width: 7px; height: 7px; background: var(--ink); border-radius: 50%; }
.orbit-a::before { top: -4px; left: 50%; }
.orbit-a::after { right: -4px; top: 50%; }
.orbit-b::before { left: -4px; top: 50%; }
.orbit-b::after { bottom: -4px; left: 50%; }
.kernel { width: 10%; height: 10%; background: var(--ink); border: 0; box-shadow: 0 0 0 18px rgba(17,17,15,.035), 0 0 0 48px rgba(17,17,15,.02); }
@keyframes turn { to { transform: translate(-50%, -50%) rotate(360deg); } }
@keyframes counterturn { to { transform: translate(-50%, -50%) rotate(-315deg); } }
.section { padding: clamp(76px, 11vw, 168px) clamp(20px, 6vw, 96px); border-top: 1px solid var(--line); }
.section h2 { max-width: 900px; font-size: clamp(42px, 6vw, 92px); line-height: .98; letter-spacing: -.025em; }
.protocol { display: grid; grid-template-columns: 1.2fr .8fr; gap: 8vw; }
.sequence { margin: 0; padding: 0; list-style: none; border-top: 1px solid var(--ink); }
.sequence li { display: grid; grid-template-columns: 54px 1fr; padding: 18px 0; border-bottom: 1px solid var(--line); font-size: clamp(16px, 1.6vw, 23px); }
.sequence span, .steps article > span { color: var(--signal); font: 10px/1 "SFMono-Regular", Consolas, monospace; }
.begin { background: var(--ink); color: var(--paper); }
.begin .eyebrow, .begin-copy p, .steps p { color: rgba(242,240,233,.62); }
.begin-copy { display: grid; grid-template-columns: .5fr 1.35fr; gap: 5vw; }
.begin-copy .eyebrow { grid-column: 1; }
.begin-copy h2 { grid-column: 2; }
.begin-copy > p:last-child { grid-column: 2; max-width: 670px; font: 18px/1.6 Didot, "Times New Roman", serif; }
.steps { display: grid; grid-template-columns: repeat(3, 1fr); margin-top: 100px; border-top: 1px solid rgba(242,240,233,.3); }
.steps article { min-height: 330px; padding: 28px 32px 28px 0; border-right: 1px solid rgba(242,240,233,.18); }
.steps article + article { padding-left: 32px; }
.steps h3 { margin: 58px 0 16px; font: 400 27px/1.1 Didot, "Times New Roman", serif; }
.steps p { max-width: 34ch; font-size: 13px; line-height: 1.6; }
.steps a { display: inline-block; margin-top: 26px; font-size: 10px; letter-spacing: .12em; text-transform: uppercase; text-underline-offset: 5px; }
.boundary-grid { display: grid; grid-template-columns: 1.15fr .65fr; gap: 10vw; }
.boundary-grid p { margin: 0 0 24px; color: var(--muted); font: 18px/1.65 Didot, "Times New Roman", serif; }
footer { display: grid; grid-template-columns: 1fr 1fr auto; gap: 20px; padding: 32px clamp(20px, 4vw, 64px); border-top: 1px solid var(--line); color: var(--muted); font-size: 10px; letter-spacing: .08em; text-transform: uppercase; }
@media (max-width: 760px) {
  .masthead nav { gap: 14px; }
  .masthead nav a { font-size: 9px; }
  .hero { min-height: 760px; }
  .field { width: 110vw; right: -48%; top: 4%; }
  .lead { margin-left: 0; }
  .protocol, .begin-copy, .boundary-grid { grid-template-columns: 1fr; }
  .begin-copy .eyebrow, .begin-copy h2, .begin-copy > p:last-child { grid-column: 1; }
  .steps { grid-template-columns: 1fr; margin-top: 64px; }
  .steps article, .steps article + article { min-height: 0; padding: 26px 0 38px; border-right: 0; border-bottom: 1px solid rgba(242,240,233,.18); }
  .steps h3 { margin-top: 28px; }
  footer { grid-template-columns: 1fr; }
}
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } .orbit { animation: none; } }