@font-face {
  font-family: 'Octoberline Display';
  src: url('../../node_modules/@fontsource/bebas-neue/files/bebas-neue-latin-400-normal.woff2') format('woff2');
  font-style: normal;
  font-weight: 400;
  font-display: swap;
}

@font-face {
  font-family: 'Octoberline Type';
  src: url('../../node_modules/@fontsource/special-elite/files/special-elite-latin-400-normal.woff2') format('woff2');
  font-style: normal;
  font-weight: 400;
  font-display: swap;
}

:root {
  color-scheme: dark;
  --black: #070907;
  --enamel: #0e120f;
  --enamel-raised: #151914;
  --paper: #e8dec6;
  --paper-strong: #f2ead7;
  --paper-muted: #bcb39e;
  --brass: #cca463;
  --brass-dark: #82653b;
  --ochre: #aa5e31;
  --blue: #29434f;
  --blue-soft: #45616b;
  --walnut: #38261b;
  --rule: rgba(232, 222, 198, 0.18);
  --rule-strong: rgba(204, 164, 99, 0.42);
  --display: 'Octoberline Display', 'Arial Narrow', 'Franklin Gothic Condensed', sans-serif;
  --type: 'Octoberline Type', 'Courier New', monospace;
}

* { box-sizing: border-box; }

html {
  min-width: 320px;
  background: var(--black);
  color: var(--paper);
  scroll-behavior: smooth;
  scroll-padding-top: 88px;
}

body {
  min-width: 320px;
  margin: 0;
  overflow-x: hidden;
  background:
    radial-gradient(circle at 78% 4%, rgba(51, 78, 85, 0.17), transparent 34rem),
    linear-gradient(180deg, #090c0a 0%, #060806 60%, #090b09 100%);
  font-family: var(--display);
  letter-spacing: 0.075em;
}

button, a { font: inherit; }
a { color: inherit; }
button { color: inherit; }

.skip-link {
  position: fixed;
  top: 10px;
  left: 10px;
  z-index: 1000;
  padding: 12px 16px;
  background: var(--paper-strong);
  color: var(--black);
  transform: translateY(-160%);
  transition: transform 150ms ease;
}

.skip-link:focus { transform: translateY(0); }

.site-header {
  position: sticky;
  top: 0;
  z-index: 50;
  min-height: 76px;
  display: grid;
  grid-template-columns: minmax(280px, 1fr) auto auto;
  align-items: stretch;
  border-bottom: 1px solid var(--rule);
  background: rgba(5, 8, 6, 0.94);
  backdrop-filter: blur(16px);
}

.wordmark {
  min-width: 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 11px clamp(20px, 3vw, 44px);
  text-decoration: none;
}

.wordmark span {
  color: var(--brass);
  font-size: 8px;
  letter-spacing: 0.32em;
}

.wordmark strong {
  display: flex;
  align-items: baseline;
  gap: 8px;
  font-family: var(--type);
  font-size: 25px;
  font-weight: 400;
  letter-spacing: -0.065em;
}

.wordmark strong i {
  color: var(--paper-strong);
  font-style: normal;
  text-shadow: 0.65px 0 rgba(242, 234, 215, 0.18), -0.35px 0 rgba(242, 234, 215, 0.12);
  transform: rotate(-0.45deg);
}

.wordmark b {
  color: var(--ochre);
  font-weight: 400;
  text-shadow: -0.7px 0 rgba(170, 94, 49, 0.34), 0.55px 0 rgba(217, 134, 82, 0.2);
  transform: translateY(1px) rotate(-1.6deg);
}

.release-stamp {
  min-width: 144px;
  display: grid;
  align-content: center;
  justify-items: center;
  padding: 8px 22px;
  border-left: 1px solid var(--rule);
  border-right: 1px solid var(--rule);
}

.release-stamp span { color: var(--paper-muted); font-size: 8px; letter-spacing: 0.24em; }
.release-stamp strong { color: var(--brass); font-size: 15px; font-weight: 400; letter-spacing: 0.15em; }

.preview-state {
  min-width: 310px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  margin: 0;
  padding: 0 26px;
  color: var(--paper-muted);
  font: 9px var(--type);
  letter-spacing: 0.045em;
}

.preview-state i {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--ochre);
  box-shadow: 0 0 0 4px rgba(170, 94, 49, 0.14);
}

main { width: min(1640px, 100%); margin: 0 auto; }

.hero {
  min-height: min(800px, calc(100vh - 76px));
  display: grid;
  grid-template-columns: minmax(0, 0.87fr) minmax(500px, 1.13fr);
  border-bottom: 1px solid var(--rule);
}

.hero-copy {
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: clamp(70px, 8vw, 132px) clamp(30px, 6vw, 96px);
  border-right: 1px solid var(--rule);
}

.eyebrow {
  margin: 0 0 16px;
  color: var(--brass);
  font-size: 10px;
  letter-spacing: 0.27em;
  text-transform: uppercase;
}

h1, h2, h3, p { margin-top: 0; }

h1 {
  max-width: 760px;
  margin-bottom: 25px;
  font-size: clamp(66px, 7.1vw, 126px);
  font-weight: 400;
  line-height: 0.82;
  letter-spacing: 0.005em;
}

h1 em {
  display: block;
  color: var(--brass);
  font-family: var(--type);
  font-size: 0.44em;
  font-style: normal;
  line-height: 1.14;
  letter-spacing: -0.055em;
}

.hero-lede {
  max-width: 630px;
  margin-bottom: 31px;
  color: var(--paper-muted);
  font: 14px/1.76 var(--type);
  letter-spacing: 0;
}

.hero-actions {
  width: min(600px, 100%);
  display: grid;
  grid-template-columns: 1.28fr 1fr;
  border: 1px solid rgba(204, 164, 99, 0.72);
}

.button {
  min-height: 56px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 12px 19px;
  text-align: center;
  text-decoration: none;
  text-transform: uppercase;
  transition: background 160ms ease, color 160ms ease, transform 160ms ease;
}

.button-primary {
  justify-content: space-between;
  background: rgba(204, 164, 99, 0.12);
  font-size: 12px;
  letter-spacing: 0.14em;
}

.button-primary:hover { background: var(--brass); color: var(--black); }
.button-primary span { font-size: 22px; }
.button-secondary { border-left: 1px solid rgba(204, 164, 99, 0.45); color: var(--paper-muted); font-size: 9px; letter-spacing: 0.16em; }
.button-secondary:hover { background: rgba(232, 222, 198, 0.08); color: var(--paper-strong); }

.hero-assurance {
  max-width: 610px;
  display: flex;
  gap: 10px;
  margin: 14px 0 0;
  color: rgba(232, 222, 198, 0.52);
  font: 9px/1.6 var(--type);
  letter-spacing: 0;
}

.hero-assurance span { color: var(--brass); font-size: 15px; }

.hero-art {
  position: relative;
  min-height: 650px;
  overflow: hidden;
  background:
    linear-gradient(90deg, rgba(7, 9, 7, 0.1), rgba(7, 9, 7, 0.65)),
    radial-gradient(circle at 73% 25%, rgba(59, 98, 114, 0.42), transparent 31%),
    linear-gradient(180deg, #101b1c 0%, #141b18 56%, #0a0d0a 57%);
  isolation: isolate;
}

.hero-art::after {
  content: '';
  position: absolute;
  z-index: 8;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(90deg, rgba(7, 9, 7, 0.72), transparent 34%), radial-gradient(circle, transparent 52%, rgba(5, 7, 5, 0.61));
}

.window-light {
  position: absolute;
  top: 8%;
  right: 8%;
  width: 60%;
  height: 48%;
  overflow: hidden;
  border: 11px solid #171a15;
  box-shadow: inset 0 0 0 1px rgba(232, 222, 198, 0.13), 0 0 80px rgba(50, 86, 103, 0.19);
  background: linear-gradient(180deg, #385a68, #68777a 71%, #343d3b);
}

.window-light::before,
.window-light::after {
  content: '';
  position: absolute;
  z-index: 1;
  background: #181b17;
}

.window-light::before { top: 0; left: 49%; width: 7px; height: 100%; }
.window-light::after { top: 51%; left: 0; width: 100%; height: 7px; }

.branch {
  position: absolute;
  z-index: 2;
  right: -12%;
  width: 66%;
  height: 9px;
  border-radius: 100%;
  background: rgba(19, 25, 23, 0.72);
  transform-origin: right center;
  animation: branch-sway 13s ease-in-out infinite;
}

.branch::before,
.branch::after {
  content: '';
  position: absolute;
  width: 55%;
  height: 5px;
  border-radius: 100%;
  background: inherit;
  transform-origin: right center;
}

.branch::before { right: 38%; top: -24px; transform: rotate(28deg); }
.branch::after { right: 18%; top: 24px; transform: rotate(-26deg); }
.branch-one { top: 27%; transform: rotate(-13deg); }
.branch-two { top: 63%; right: -19%; width: 52%; transform: rotate(10deg); animation-delay: -4s; }

.leaf {
  position: absolute;
  z-index: 4;
  top: 23%;
  right: 16%;
  width: 12px;
  height: 7px;
  border-radius: 90% 10% 90% 10%;
  background: var(--ochre);
  opacity: 0;
  animation: leaf-drift 15s linear infinite;
}

.leaf-two { top: 60%; right: 37%; width: 9px; height: 6px; background: #c39749; animation-delay: -7.2s; animation-duration: 17s; }

.desk-plane {
  position: absolute;
  z-index: 3;
  left: -8%;
  right: -10%;
  bottom: -2%;
  height: 42%;
  background: linear-gradient(175deg, #513725 0%, #291b14 46%, #130f0c 100%);
  box-shadow: inset 0 2px rgba(232, 222, 198, 0.06), 0 -28px 80px rgba(0, 0, 0, 0.28);
  transform: perspective(700px) rotateX(54deg) scale(1.25);
  transform-origin: bottom;
}

.paper-sheet {
  position: absolute;
  z-index: 6;
  right: 19%;
  bottom: 14%;
  width: min(38%, 330px);
  aspect-ratio: 0.72;
  padding: 12% 10%;
  overflow: hidden;
  color: #29261e;
  background:
    linear-gradient(90deg, transparent 11%, rgba(114, 81, 52, 0.12) 11.5%, transparent 12%),
    linear-gradient(150deg, #eee4cc 0%, #d9cbae 100%);
  box-shadow: -12px 22px 45px rgba(0, 0, 0, 0.46), inset 0 0 40px rgba(92, 65, 37, 0.08);
  transform: rotate(4deg);
  animation: paper-lift 12s ease-in-out infinite;
}

.paper-number { display: block; margin-bottom: 22%; color: #9d5f36; font: 8px var(--type); letter-spacing: 0.12em; }
.typed-line { display: block; height: 4px; margin-bottom: 9%; background: rgba(34, 33, 27, 0.64); filter: blur(0.25px); }
.line-long { width: 92%; }
.line-medium { width: 73%; }
.line-short { width: 44%; }
.paper-mark { position: absolute; right: -7px; bottom: 17%; padding: 4px 12px; border: 2px solid rgba(136, 59, 38, 0.64); color: rgba(136, 59, 38, 0.72); font: 14px var(--type); transform: rotate(-13deg); }

.board-rail {
  position: absolute;
  z-index: 7;
  top: 16%;
  left: 9%;
  width: 50%;
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 10px;
  color: var(--brass);
  transform: rotate(-90deg) translateX(-100%);
  transform-origin: left top;
}

.board-rail span { font-size: 11px; letter-spacing: 0.19em; }
.board-rail i { height: 1px; background: rgba(204, 164, 99, 0.56); }
.board-rail b { font: 13px var(--type); }

.art-caption {
  position: absolute;
  z-index: 10;
  right: 22px;
  bottom: 18px;
  margin: 0;
  color: rgba(232, 222, 198, 0.62);
  font: 8px var(--type);
  letter-spacing: 0.08em;
}

.art-caption span { margin: 0 7px; color: var(--brass); }

.principle-strip {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  border-bottom: 1px solid var(--rule);
}

.principle-strip p {
  min-height: 128px;
  display: grid;
  grid-template-columns: auto 1fr;
  align-content: center;
  column-gap: 16px;
  margin: 0;
  padding: 25px clamp(24px, 4vw, 64px);
  border-right: 1px solid var(--rule);
}

.principle-strip p:last-child { border-right: 0; }
.principle-strip span { grid-row: span 2; color: var(--brass); font: 15px var(--type); }
.principle-strip strong { font-size: 18px; font-weight: 400; letter-spacing: 0.12em; text-transform: uppercase; }
.principle-strip small { color: var(--paper-muted); font: 10px/1.5 var(--type); letter-spacing: 0; }

.board-section,
.flow-section,
.trust-section,
.rollout-section {
  padding: 84px clamp(26px, 5vw, 84px) 102px;
  border-bottom: 1px solid var(--rule);
}

.section-heading {
  display: grid;
  grid-template-columns: 74px minmax(0, 1fr) minmax(260px, 390px);
  gap: 34px;
  align-items: end;
  margin-bottom: 42px;
}

.section-heading.compact { margin-bottom: 50px; }
.section-index { align-self: start; margin: 4px 0 0; color: var(--brass); font: 12px var(--type); letter-spacing: 0.1em; }

h2 {
  margin-bottom: 0;
  font-size: clamp(45px, 5.6vw, 88px);
  font-weight: 400;
  line-height: 0.9;
  letter-spacing: 0.012em;
}

.section-heading > p:last-child {
  margin: 0;
  color: var(--paper-muted);
  font: 12px/1.68 var(--type);
  letter-spacing: 0;
}

.sample-notice {
  display: flex;
  align-items: center;
  gap: 20px;
  min-height: 48px;
  padding: 10px 17px;
  border: 1px solid rgba(170, 94, 49, 0.56);
  background: rgba(170, 94, 49, 0.08);
}

.sample-notice strong { color: #d98652; font-size: 11px; font-weight: 400; letter-spacing: 0.19em; }
.sample-notice span { color: var(--paper-muted); font: 10px/1.5 var(--type); letter-spacing: 0; }

.category-filter {
  display: grid;
  grid-template-columns: 1.18fr repeat(4, 1fr);
  margin-top: 18px;
  border-top: 1px solid var(--rule);
  border-left: 1px solid var(--rule);
}

.category-button {
  min-height: 54px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 10px 16px;
  border: 0;
  border-right: 1px solid var(--rule);
  border-bottom: 1px solid var(--rule);
  border-radius: 0;
  background: transparent;
  color: var(--paper-muted);
  font-size: 10px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  cursor: pointer;
  transition: background 150ms ease, color 150ms ease;
}

.category-button span { font: 9px var(--type); }
.category-button:hover { background: rgba(232, 222, 198, 0.045); color: var(--paper); }
.category-button.is-active { background: rgba(204, 164, 99, 0.1); box-shadow: inset 0 -3px var(--brass); color: var(--paper-strong); }

.board-layout {
  display: grid;
  grid-template-columns: 230px 1fr;
  gap: 0;
  margin-top: 28px;
  border: 1px solid var(--rule);
  background: rgba(8, 11, 9, 0.55);
}

.board-ledger {
  padding: 28px 24px;
  border-right: 1px solid var(--rule);
  background: linear-gradient(180deg, rgba(204, 164, 99, 0.055), transparent 50%);
}

.ledger-label { margin-bottom: 13px; color: var(--brass); font-size: 9px; letter-spacing: 0.21em; }
.board-ledger > strong { display: block; font-size: 84px; font-weight: 400; line-height: 0.9; }
.board-ledger > span { color: var(--paper-muted); font: 9px var(--type); letter-spacing: 0; }
.board-ledger dl { margin: 45px 0 26px; border-top: 1px solid var(--rule); }
.board-ledger dl div { padding: 12px 0; border-bottom: 1px solid var(--rule); }
.board-ledger dt { color: var(--paper-muted); font-size: 8px; letter-spacing: 0.2em; text-transform: uppercase; }
.board-ledger dd { margin: 4px 0 0; font: 10px var(--type); letter-spacing: 0; }
.ledger-note { color: rgba(232, 222, 198, 0.52); font: 9px/1.62 var(--type); letter-spacing: 0; }

.writing-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  align-content: start;
}

.writing-card {
  position: relative;
  min-height: 300px;
  display: flex;
  flex-direction: column;
  padding: 25px 25px 22px;
  border-right: 1px solid var(--rule);
  border-bottom: 1px solid var(--rule);
  background: rgba(232, 222, 198, 0.018);
  transition: background 160ms ease, transform 160ms ease;
}

.writing-card:nth-child(3n) { border-right: 0; }
.writing-card:hover { z-index: 2; background: rgba(204, 164, 99, 0.055); }
.writing-card[hidden] { display: none; }
.writing-card.featured::after { content: 'EDITOR’S PIN'; position: absolute; top: 0; right: 24px; padding: 6px 9px 8px; background: var(--brass); color: var(--black); font-size: 7px; letter-spacing: 0.14em; }
.card-meta { display: flex; justify-content: space-between; gap: 15px; color: var(--brass); font-size: 8px; letter-spacing: 0.17em; }
.card-meta b { color: rgba(217, 134, 82, 0.95); font-weight: 400; }
.writing-card h3 { margin: 34px 0 17px; font-size: clamp(25px, 2.4vw, 36px); font-weight: 400; line-height: 0.95; letter-spacing: 0.035em; }
.writing-card blockquote { margin: 0 0 32px; color: var(--paper-muted); font: 12px/1.72 var(--type); letter-spacing: 0; }
.writing-card footer { display: flex; justify-content: space-between; gap: 12px; margin-top: auto; padding-top: 14px; border-top: 1px solid var(--rule); color: rgba(232, 222, 198, 0.57); font: 8px/1.4 var(--type); letter-spacing: 0; }
.empty-state { grid-column: 1 / -1; min-height: 250px; place-items: center; margin: 0; color: var(--paper-muted); font: 12px var(--type); }
.empty-state:not([hidden]) { display: grid; }

.flow-section { background: linear-gradient(180deg, rgba(44, 67, 71, 0.07), transparent); }

.flow-track {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  margin: 0;
  padding: 0;
  border-top: 1px solid var(--rule);
  border-left: 1px solid var(--rule);
  list-style: none;
}

.flow-step button {
  width: 100%;
  min-height: 130px;
  display: grid;
  grid-template-columns: auto 1fr;
  align-content: center;
  column-gap: 14px;
  padding: 20px;
  border: 0;
  border-right: 1px solid var(--rule);
  border-bottom: 1px solid var(--rule);
  border-radius: 0;
  background: transparent;
  text-align: left;
  cursor: pointer;
}

.flow-step button:hover { background: rgba(232, 222, 198, 0.035); }
.flow-step.is-current button { background: rgba(204, 164, 99, 0.085); box-shadow: inset 0 -3px var(--brass); }
.flow-step span { grid-row: span 2; color: var(--brass); font: 13px var(--type); }
.flow-step strong { font-size: 16px; font-weight: 400; letter-spacing: 0.11em; text-transform: uppercase; }
.flow-step small { margin-top: 5px; color: var(--paper-muted); font: 9px var(--type); letter-spacing: 0; }

.flow-details {
  min-height: 365px;
  border: 1px solid var(--rule);
  border-top: 0;
}

.flow-detail {
  min-height: 365px;
  grid-template-columns: minmax(0, 1fr) minmax(300px, 0.72fr);
  align-content: center;
  gap: 70px;
  padding: clamp(38px, 5vw, 74px);
  animation: proof-in 210ms ease-out;
}

.flow-detail.is-active { display: grid; }
.flow-detail[hidden] { display: none; }
.detail-number { grid-column: 1; margin-bottom: -47px; color: var(--brass); font: 10px var(--type); letter-spacing: 0.11em; }
.flow-detail h3 { grid-column: 1; margin: 0; font-size: clamp(36px, 4.1vw, 62px); font-weight: 400; line-height: 0.93; }
.flow-detail > p:nth-of-type(2) { grid-column: 1; margin: -47px 0 0; color: var(--paper-muted); font: 12px/1.72 var(--type); letter-spacing: 0; }
.privacy-seal,
.proof-sheet,
.choice-row,
.inactive-action { grid-column: 2; grid-row: 1 / span 3; align-self: center; }

.privacy-seal {
  min-height: 180px;
  display: grid;
  place-items: center;
  align-content: center;
  border: 2px solid var(--brass);
  outline: 1px solid rgba(204, 164, 99, 0.35);
  outline-offset: 7px;
  transform: rotate(-1.3deg);
}

.privacy-seal span { color: var(--paper-muted); font-size: 8px; letter-spacing: 0.24em; }
.privacy-seal strong { color: var(--brass); font-size: 58px; font-weight: 400; letter-spacing: 0.1em; }
.privacy-seal small { color: var(--paper-muted); font: 9px var(--type); }

.proof-sheet { min-height: 210px; display: grid; grid-template-columns: auto 1fr; align-content: center; gap: 13px 18px; padding: 32px; color: #2e2a21; background: linear-gradient(145deg, #eee4ce, #d1c2a6); box-shadow: -10px 15px 30px rgba(0, 0, 0, 0.28); transform: rotate(1deg); }
.proof-sheet span { color: #8b5637; font-size: 8px; letter-spacing: 0.15em; }
.proof-sheet b { font: 11px var(--type); }
.choice-row { display: grid; gap: 9px; }
.choice-row span { min-height: 53px; display: flex; align-items: center; justify-content: space-between; padding: 12px 16px; border: 1px solid var(--rule); color: var(--paper-muted); font: 10px var(--type); letter-spacing: 0; }
.choice-row span::after { content: '○'; color: var(--brass); }
.choice-row .chosen { border-color: var(--brass); color: var(--paper); }
.choice-row .chosen::after { content: '●'; }
.inactive-action { display: grid; gap: 12px; }
.inactive-action button { min-height: 62px; border: 1px solid var(--rule); background: rgba(232, 222, 198, 0.04); color: rgba(232, 222, 198, 0.42); font-size: 11px; letter-spacing: 0.12em; text-transform: uppercase; }
.inactive-action span { color: var(--paper-muted); font: 9px var(--type); letter-spacing: 0; text-align: center; }

.trust-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  border-top: 1px solid var(--rule);
  border-left: 1px solid var(--rule);
}

.trust-grid article {
  min-height: 290px;
  padding: 28px;
  border-right: 1px solid var(--rule);
  border-bottom: 1px solid var(--rule);
}

.trust-icon { min-width: 42px; min-height: 42px; display: inline-grid; place-items: center; border: 1px solid var(--rule-strong); color: var(--brass); font: 14px var(--type); }
.card-index { margin: 28px 0 13px; color: var(--brass); font-size: 8px; letter-spacing: 0.2em; }
.trust-grid h3 { margin-bottom: 15px; font-size: 29px; font-weight: 400; letter-spacing: 0.06em; }
.trust-grid article > p:last-child { margin: 0; color: var(--paper-muted); font: 11px/1.7 var(--type); letter-spacing: 0; }

.moderation-table {
  display: grid;
  grid-template-columns: minmax(270px, 0.72fr) 1.28fr;
  margin-top: 50px;
  border: 1px solid var(--rule);
}

.moderation-table > div { display: grid; align-content: center; padding: 34px; border-right: 1px solid var(--rule); }
.moderation-table h3 { margin: 0; font-size: 36px; font-weight: 400; line-height: 0.95; }
.moderation-table ol { display: grid; grid-template-columns: repeat(2, 1fr); margin: 0; padding: 0; list-style: none; }
.moderation-table li { min-height: 130px; display: grid; grid-template-columns: auto 1fr; align-content: center; column-gap: 12px; padding: 20px; border-right: 1px solid var(--rule); border-bottom: 1px solid var(--rule); }
.moderation-table li:nth-child(2n) { border-right: 0; }
.moderation-table li:nth-last-child(-n + 2) { border-bottom: 0; }
.moderation-table li span { grid-row: span 2; color: var(--brass); font: 11px var(--type); }
.moderation-table li strong { font-size: 14px; font-weight: 400; letter-spacing: 0.1em; text-transform: uppercase; }
.moderation-table li small { color: var(--paper-muted); font: 9px var(--type); letter-spacing: 0; }

.rollout-section { background: linear-gradient(180deg, rgba(58, 38, 27, 0.2), transparent); }

.rollout-line {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  border-top: 1px solid var(--rule);
  border-left: 1px solid var(--rule);
}

.rollout-line article {
  position: relative;
  min-height: 300px;
  padding: 27px;
  border-right: 1px solid var(--rule);
  border-bottom: 1px solid var(--rule);
}

.rollout-line article:not(:last-child)::after { content: '→'; position: absolute; z-index: 2; top: 50%; right: -11px; width: 22px; height: 22px; display: grid; place-items: center; border: 1px solid var(--rule-strong); background: var(--enamel); color: var(--brass); font: 11px var(--type); }
.rollout-line article > p { margin-bottom: 14px; color: var(--brass); font: 9px var(--type); letter-spacing: 0.11em; }
.rollout-line article > span { display: inline-block; padding: 5px 7px; border: 1px solid var(--rule); color: var(--paper-muted); font-size: 7px; letter-spacing: 0.17em; }
.rollout-line h3 { margin: 41px 0 14px; font-size: 28px; font-weight: 400; line-height: 0.98; }
.rollout-line small { color: var(--paper-muted); font: 10px/1.65 var(--type); letter-spacing: 0; }
.rollout-line .dependency { background: rgba(204, 164, 99, 0.075); box-shadow: inset 0 3px var(--brass); }

.launch-gates { display: grid; grid-template-columns: 260px 1fr; margin-top: 48px; border: 1px solid rgba(204, 164, 99, 0.36); }
.launch-gates > p { display: grid; place-items: center; margin: 0; padding: 30px; border-right: 1px solid var(--rule); color: var(--brass); font-size: 18px; line-height: 1.05; text-align: center; }
.launch-gates ul { display: grid; grid-template-columns: repeat(2, 1fr); margin: 0; padding: 0; list-style: none; }
.launch-gates li { position: relative; min-height: 90px; display: flex; align-items: center; padding: 20px 22px 20px 48px; border-right: 1px solid var(--rule); border-bottom: 1px solid var(--rule); color: var(--paper-muted); font: 10px/1.55 var(--type); letter-spacing: 0; }
.launch-gates li:nth-child(2n) { border-right: 0; }
.launch-gates li:nth-last-child(-n + 2) { border-bottom: 0; }
.launch-gates li::before { content: '□'; position: absolute; left: 20px; color: var(--brass); font-size: 16px; }

.closing {
  min-height: 580px;
  display: grid;
  place-items: center;
  align-content: center;
  padding: 90px 24px;
  text-align: center;
  background: radial-gradient(circle at 50% 50%, rgba(46, 73, 79, 0.14), transparent 34rem);
}

.closing h2 { max-width: 920px; }
.closing > p:not(.eyebrow) { max-width: 680px; margin: 27px auto 30px; color: var(--paper-muted); font: 13px/1.75 var(--type); letter-spacing: 0; }
.closing-actions { min-width: min(520px, 100%); display: grid; grid-template-columns: 1fr 0.9fr; align-items: center; border: 1px solid rgba(204, 164, 99, 0.62); }
.text-link { padding: 18px; color: var(--paper-muted); font-size: 9px; letter-spacing: 0.14em; text-decoration: none; text-transform: uppercase; }
.text-link:hover { color: var(--paper); }
.closing > small { margin-top: 18px; color: rgba(232, 222, 198, 0.42); font: 8px var(--type); letter-spacing: 0.08em; }

.site-footer {
  min-height: 62px;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  align-items: center;
  padding: 0 clamp(20px, 4vw, 64px);
  border-top: 1px solid var(--rule);
  color: rgba(232, 222, 198, 0.48);
  font-size: 8px;
  letter-spacing: 0.17em;
}

.site-footer span:nth-child(2) { text-align: center; }
.site-footer span:last-child { text-align: right; }

.site-footer .footer-carbon {
  display: flex;
  align-items: baseline;
  gap: 6px;
  color: var(--paper-strong);
  font: 15px var(--type);
  letter-spacing: -0.07em;
}

.footer-carbon i { font-style: normal; transform: rotate(-0.35deg); }
.footer-carbon b { color: var(--ochre); font-weight: 400; transform: rotate(-1.5deg); }

a:focus-visible,
button:focus-visible {
  outline: 2px solid var(--paper-strong);
  outline-offset: 3px;
}

@keyframes branch-sway {
  0%, 100% { transform: rotate(-13deg); }
  48% { transform: rotate(-10deg); }
  55% { transform: rotate(-15deg); }
}

@keyframes leaf-drift {
  0%, 61% { opacity: 0; transform: translate(0, 0) rotate(0); }
  64% { opacity: 0.75; }
  78% { opacity: 0.48; }
  90%, 100% { opacity: 0; transform: translate(-310px, 170px) rotate(480deg); }
}

@keyframes paper-lift {
  0%, 44%, 100% { transform: rotate(4deg) translateY(0); }
  48% { transform: rotate(3.3deg) translateY(-3px); }
  52% { transform: rotate(4.3deg) translateY(0); }
}

@keyframes proof-in {
  from { opacity: 0; transform: translateY(5px); }
  to { opacity: 1; transform: translateY(0); }
}

@media (max-width: 1120px) {
  .site-header { grid-template-columns: 1fr auto; }
  .preview-state { grid-column: 1 / -1; min-height: 32px; border-top: 1px solid var(--rule); }
  .hero { grid-template-columns: 1fr; }
  .hero-copy { border-right: 0; border-bottom: 1px solid var(--rule); }
  .hero-art { min-height: 610px; }
  .writing-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .writing-card:nth-child(3n) { border-right: 1px solid var(--rule); }
  .writing-card:nth-child(2n) { border-right: 0; }
  .rollout-line { grid-template-columns: repeat(2, 1fr); }
  .rollout-line article:nth-child(2)::after { display: none; }
  .moderation-table { grid-template-columns: 1fr; }
  .moderation-table > div { border-right: 0; border-bottom: 1px solid var(--rule); }
}

@media (max-width: 820px) {
  .site-header { position: relative; grid-template-columns: 1fr; }
  .release-stamp { min-height: 54px; grid-row: 2; border: 1px solid var(--rule); border-right: 0; border-left: 0; }
  .preview-state { min-width: 0; padding: 10px 18px; text-align: center; }
  .hero-copy { padding: 74px 24px; }
  h1 { font-size: clamp(57px, 18vw, 92px); }
  .hero-art { min-height: 520px; }
  .window-light { width: 72%; right: 4%; }
  .paper-sheet { width: min(45%, 260px); right: 12%; }
  .principle-strip { grid-template-columns: 1fr; }
  .principle-strip p { border-right: 0; border-bottom: 1px solid var(--rule); }
  .principle-strip p:last-child { border-bottom: 0; }
  .board-section, .flow-section, .trust-section, .rollout-section { padding: 68px 20px 82px; }
  .section-heading { grid-template-columns: 45px 1fr; gap: 18px; }
  .section-heading > p:last-child { grid-column: 2; }
  .category-filter { grid-template-columns: repeat(2, 1fr); }
  .category-button:first-child { grid-column: 1 / -1; }
  .board-layout { grid-template-columns: 1fr; }
  .board-ledger { display: grid; grid-template-columns: auto 1fr; gap: 6px 22px; border-right: 0; border-bottom: 1px solid var(--rule); }
  .board-ledger > strong { grid-row: 1 / span 2; font-size: 64px; }
  .board-ledger dl { grid-column: 1 / -1; display: grid; grid-template-columns: repeat(3, 1fr); margin: 20px 0; }
  .board-ledger dl div { padding-right: 10px; }
  .ledger-note { grid-column: 1 / -1; }
  .flow-track { grid-template-columns: repeat(2, 1fr); }
  .flow-detail { grid-template-columns: 1fr; gap: 28px; padding: 38px 25px; }
  .detail-number, .flow-detail h3, .flow-detail > p:nth-of-type(2), .privacy-seal, .proof-sheet, .choice-row, .inactive-action { grid-column: 1; grid-row: auto; margin-top: 0; }
  .privacy-seal { margin: 16px 9px; }
  .trust-grid { grid-template-columns: repeat(2, 1fr); }
  .rollout-line { grid-template-columns: 1fr; }
  .rollout-line article::after { display: none; }
  .launch-gates { grid-template-columns: 1fr; }
  .launch-gates > p { border-right: 0; border-bottom: 1px solid var(--rule); }
}

@media (max-width: 560px) {
  .wordmark { align-items: center; text-align: center; }
  .hero-actions { grid-template-columns: 1fr; }
  .button-secondary { border-top: 1px solid rgba(204, 164, 99, 0.45); border-left: 0; }
  .hero-art { min-height: 430px; }
  .window-light { top: 7%; width: 82%; height: 48%; }
  .paper-sheet { width: 48%; right: 10%; bottom: 10%; }
  .board-rail { display: none; }
  .art-caption { left: 15px; right: auto; max-width: 250px; }
  .sample-notice { align-items: flex-start; flex-direction: column; gap: 5px; }
  .category-filter { grid-template-columns: 1fr; }
  .category-button:first-child { grid-column: auto; }
  .board-ledger { grid-template-columns: auto 1fr; }
  .board-ledger dl { grid-template-columns: 1fr; }
  .writing-grid { grid-template-columns: 1fr; }
  .writing-card { border-right: 0 !important; }
  .flow-track { grid-template-columns: 1fr; }
  .flow-step button { min-height: 94px; }
  .trust-grid { grid-template-columns: 1fr; }
  .moderation-table ol { grid-template-columns: 1fr; }
  .moderation-table li { border-right: 0; border-bottom: 1px solid var(--rule) !important; }
  .moderation-table li:last-child { border-bottom: 0 !important; }
  .launch-gates ul { grid-template-columns: 1fr; }
  .launch-gates li { border-right: 0; border-bottom: 1px solid var(--rule) !important; }
  .launch-gates li:last-child { border-bottom: 0 !important; }
  .closing-actions { grid-template-columns: 1fr; }
  .text-link { border-top: 1px solid var(--rule); }
  .site-footer { grid-template-columns: 1fr; gap: 8px; padding: 20px; text-align: center; }
  .site-footer .footer-carbon { justify-content: center; }
  .site-footer span:nth-child(2), .site-footer span:last-child { text-align: center; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    scroll-behavior: auto !important;
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
  }
  .branch, .leaf, .paper-sheet { animation: none !important; }
  .leaf { display: none; }
}

@media (forced-colors: active) {
  .preview-state i,
  .typed-line { forced-color-adjust: none; }
  .category-button.is-active,
  .flow-step.is-current button { outline: 2px solid CanvasText; outline-offset: -3px; }
}