:root {
  --paper: #ffffff;
  --paper-2: #ffffff;
  --ink: #252823;
  --muted: #6d6d62;
  --rule: #8d8a7c;
  --green: #42594b;
  --green-bright: #78a06f;
  --red: #8a4138;
  --amber: #a67c38;
  --terminal: #111713;
  --terminal-ink: #c6d4bd;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; background: var(--paper); }
body {
  margin: 0;
  min-height: 100vh;
  color: var(--ink);
  background:
    repeating-linear-gradient(0deg, rgba(43,46,40,.018) 0, rgba(43,46,40,.018) 1px, transparent 1px, transparent 4px),
    var(--paper);
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", monospace;
  font-size: 16px;
  line-height: 1.55;
  transition: background .2s ease, color .2s ease;
}

body.night {
  --paper: #111512;
  --paper-2: #171d18;
  --ink: #cfd5ca;
  --muted: #8f988d;
  --rule: #455047;
  --green: #7d9f83;
  --green-bright: #a4c59b;
  --red: #c16d5f;
  --amber: #c39b59;
}

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

.masthead {
  padding: max(16px, env(safe-area-inset-top)) clamp(18px, 5vw, 72px) 12px;
  background: var(--paper);
}
.masthead-rule, .footer-rule { border-top: 3px solid var(--ink); border-bottom: 1px solid var(--ink); height: 7px; }
.masthead-rule.thin { border-top-width: 1px; border-bottom: 0; height: 1px; }
.masthead-row { min-height: 72px; display: grid; grid-template-columns: 1fr auto auto; gap: 22px; align-items: center; }
.wordmark { font-size: clamp(28px, 5vw, 52px); line-height: 1; letter-spacing: -.06em; text-decoration: none; font-weight: 900; }
.issue { color: var(--muted); font-size: 12px; text-transform: uppercase; letter-spacing: .08em; }
.mode-button, .trace-button, footer button {
  border: 1px solid var(--ink);
  background: transparent;
  color: var(--ink);
  padding: 7px 10px;
  cursor: pointer;
  text-transform: uppercase;
  font-size: 11px;
  letter-spacing: .06em;
}
.mode-button:hover, .trace-button:hover, footer button:hover { background: var(--ink); color: var(--paper); }

.intro {
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(360px, .95fr);
  gap: clamp(40px, 8vw, 120px);
  padding: 90px clamp(18px, 6vw, 90px) 100px;
  align-items: center;
}
.kicker, .eyebrow { margin: 0 0 16px; color: var(--red); text-transform: uppercase; letter-spacing: .1em; font-size: 11px; }
.intro h1, .section-heading h2 {
  margin: 0;
  max-width: 900px;
  font-family: Georgia, "Times New Roman", serif;
  font-weight: 400;
  letter-spacing: -.045em;
  line-height: .98;
}
.intro h1 { font-size: clamp(55px, 9vw, 118px); }
.lede { margin: 32px 0 18px; max-width: 780px; font-family: Georgia, "Times New Roman", serif; font-size: clamp(22px, 3vw, 31px); line-height: 1.35; }
.intro-copy > p:last-child { max-width: 720px; color: var(--muted); }

.rack { border: 2px solid var(--ink); padding: 14px; background: var(--paper-2); box-shadow: 12px 12px 0 rgba(37,40,35,.12); }
.rack-label { display: flex; justify-content: space-between; gap: 20px; padding: 2px 3px 12px; color: var(--muted); font-size: 10px; text-transform: uppercase; }
.rack-unit { position: relative; display: grid; grid-template-columns: auto 1fr; grid-template-rows: auto auto; column-gap: 11px; padding: 15px; margin-top: 8px; border: 1px solid var(--ink); background: var(--paper); }
.rack-unit strong { grid-column: 2; font-size: 14px; }
.rack-unit small { grid-column: 2; color: var(--muted); }
.unit-led { grid-row: 1 / 3; width: 10px; height: 10px; margin-top: 5px; border-radius: 50%; background: var(--green-bright); box-shadow: 0 0 0 2px rgba(66,89,75,.16); }
.rack-bus { margin: 12px 0 4px; padding: 8px; background: var(--ink); color: var(--paper); text-align: center; font-size: 10px; text-transform: uppercase; letter-spacing: .08em; }
.app-unit { margin-left: 26px; margin-right: 26px; }
.host-unit { border-width: 2px; }

.status-strip { display: flex; flex-wrap: wrap; border-top: 1px solid var(--ink); border-bottom: 1px solid var(--ink); background: var(--green); color: #f2efe5; }
.status-strip span { flex: 1 1 190px; padding: 11px 16px; border-right: 1px solid rgba(255,255,255,.35); text-align: center; font-size: 10px; text-transform: uppercase; letter-spacing: .07em; }

.section-shell { position: relative; padding: 105px clamp(18px, 6vw, 90px); border-bottom: 1px solid var(--rule); }
.section-number { position: absolute; top: 35px; right: clamp(18px, 6vw, 90px); color: var(--rule); font-size: 12px; }
.section-heading { max-width: 960px; margin-bottom: 55px; }
.section-heading h2 { font-size: clamp(46px, 7vw, 88px); }
.section-heading > p:not(.eyebrow) { max-width: 700px; margin-top: 24px; color: var(--muted); }

.ledger { border-top: 2px solid var(--ink); }
.ledger-row { display: grid; grid-template-columns: minmax(170px, .35fr) 1fr; gap: 40px; padding: 24px 0; border-bottom: 1px solid var(--rule); }
.ledger-row strong { font-size: 13px; letter-spacing: .06em; }
.ledger-row p { margin: 0; max-width: 860px; color: var(--muted); }

.topology { background: var(--paper-2); }
.topology-heading .trace-button { margin-top: 18px; }
.network-map { max-width: 920px; margin: 0 auto; display: flex; flex-direction: column; align-items: center; }
.node { width: min(390px, 90%); padding: 14px 18px; border: 1px solid var(--ink); background: var(--paper); display: grid; grid-template-columns: 34px 1fr; transition: transform .15s ease, background .15s ease, color .15s ease; }
.node small { grid-row: 1 / 3; color: var(--red); }
.node strong { font-size: 13px; }
.node span { color: var(--muted); font-size: 12px; }
.wire { width: 1px; height: 58px; background: var(--ink); }
.network-rail { position: relative; width: min(760px, 88%); padding-top: 22px; border-top: 2px solid var(--ink); text-align: center; font-size: 10px; text-transform: uppercase; color: var(--muted); }
.network-rail::before { content: ""; position: absolute; left: 50%; top: -58px; width: 1px; height: 58px; background: var(--ink); }
.service-bank { width: min(840px, 100%); display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; margin: 34px 0; }
.service-bank .node { width: 100%; min-height: 105px; }
.host-base { width: min(860px, 100%); padding: 22px; border: 2px solid var(--ink); text-align: center; background: var(--paper); }
.host-base strong, .host-base span { display: block; }
.host-base span { margin-top: 5px; color: var(--muted); font-size: 12px; }
.network-map.tracing [data-step] { opacity: .35; }
.network-map.tracing [data-step].trace-active { opacity: 1; background: var(--green); color: #fff; transform: translateY(-2px); }
.network-map.tracing [data-step].trace-active span, .network-map.tracing [data-step].trace-active small { color: #e9eadf; }

.deployment-layout { display: grid; grid-template-columns: 1.05fr .95fr; gap: clamp(40px, 8vw, 110px); align-items: start; }
.deploy-flow { list-style: none; margin: 0; padding: 0; border-top: 2px solid var(--ink); }
.deploy-flow li { position: relative; display: grid; grid-template-columns: 48px 1fr; padding: 21px 0 21px 16px; border-bottom: 1px solid var(--rule); }
.deploy-flow li > span { color: var(--red); font-size: 11px; }
.deploy-flow strong { font-size: 14px; font-weight: 700; overflow-wrap: anywhere; }
.deploy-flow small { grid-column: 2; color: var(--muted); margin-top: 3px; }
.terminal-card { border: 2px solid var(--ink); background: var(--terminal); color: var(--terminal-ink); box-shadow: 12px 12px 0 rgba(37,40,35,.12); }
.terminal-top { display: flex; align-items: center; gap: 7px; padding: 9px 12px; border-bottom: 1px solid #4e5b50; color: #91a08f; font-size: 10px; }
.terminal-top span { width: 8px; height: 8px; border: 1px solid #7f8c7e; border-radius: 50%; }
.terminal-top b { margin-left: auto; font-weight: 400; }
.terminal-card pre { margin: 0; padding: 28px; overflow-x: auto; line-height: 1.75; }
.terminal-card p { margin: 0; padding: 13px 18px; border-top: 1px solid #4e5b50; color: #93a190; font-size: 11px; }

.evidence { background: var(--paper-2); }
.evidence-grid { display: grid; grid-template-columns: 1.4fr .6fr; gap: 28px; align-items: start; }
.screen { margin: 0; border: 1px solid var(--ink); background: var(--paper); }
.screen.wide { grid-row: span 2; }
.screen-bar { display: flex; justify-content: space-between; padding: 8px 10px; background: var(--ink); color: var(--paper); font-size: 10px; }
.screen img { display: block; width: 100%; height: auto; }
.screen figcaption { padding: 12px 14px; color: var(--muted); font-size: 11px; }
.small-screen img { padding: 32px 18px; }
.operator-log { padding: 18px; border: 1px solid var(--ink); background: var(--paper); transform: rotate(.35deg); }
.log-title { margin-top: 0; padding-bottom: 9px; border-bottom: 1px solid var(--ink); font-weight: 700; }
.operator-log p { margin: 11px 0; font-size: 12px; }
.operator-log time { display: inline-block; width: 56px; color: var(--red); }

.switchboard { border: 2px solid var(--ink); background: var(--paper-2); }
.switchboard > div { display: grid; grid-template-columns: 22px 230px 1fr; gap: 20px; align-items: start; padding: 22px; border-bottom: 1px solid var(--rule); }
.switchboard > div:last-child { border-bottom: 0; }
.switchboard p { margin: 0; color: var(--muted); }
.lamp { width: 11px; height: 11px; margin-top: 5px; border-radius: 50%; border: 1px solid var(--ink); }
.lamp.on { background: var(--green-bright); }
.lamp.standby { background: var(--amber); }

.future { display: grid; grid-template-columns: 1fr minmax(270px, .34fr); gap: clamp(45px, 8vw, 110px); }
.future .section-number { grid-column: 1 / -1; }
.future .section-heading { grid-column: 1 / -1; margin-bottom: 10px; }
.future-list { border-top: 2px solid var(--ink); }
.future-list p { margin: 0; padding: 18px 0; border-bottom: 1px solid var(--rule); color: var(--muted); }
.future-list span { display: inline-block; min-width: 230px; color: var(--ink); font-weight: 700; font-size: 12px; }
.rule-card { align-self: start; padding: 24px; border: 3px double var(--ink); background: var(--paper-2); }
.rule-card strong { color: var(--red); text-transform: uppercase; font-size: 11px; }
.rule-card p { margin-bottom: 0; font-family: Georgia, "Times New Roman", serif; font-size: 28px; line-height: 1.15; }

footer { padding: 50px clamp(18px, 5vw, 72px) max(42px, env(safe-area-inset-bottom)); }
.footer-inner { display: flex; justify-content: space-between; gap: 35px; align-items: end; padding-top: 27px; }
.footer-inner > div { display: flex; flex-direction: column; gap: 4px; }
.footer-inner strong { font-size: 24px; letter-spacing: -.04em; }
.footer-inner span { color: var(--muted); font-size: 11px; }

@media (max-width: 850px) {
  .masthead-row { grid-template-columns: 1fr auto; }
  .issue { grid-column: 1 / -1; grid-row: 2; }
  .intro, .deployment-layout, .evidence-grid, .future { grid-template-columns: 1fr; }
  .intro { padding-top: 60px; }
  .rack { max-width: 620px; }
  .section-heading h2 { font-size: clamp(43px, 11vw, 72px); }
  .ledger-row { grid-template-columns: 1fr; gap: 8px; }
  .service-bank { grid-template-columns: 1fr; width: min(470px, 100%); }
  .network-rail { width: 70%; }
  .screen.wide { grid-row: auto; }
  .switchboard > div { grid-template-columns: 22px 1fr; gap: 12px; }
  .switchboard p { grid-column: 2; }
  .future .section-heading { grid-column: auto; }
  .future-list span { display: block; min-width: 0; margin-bottom: 5px; }
}

@media (max-width: 560px) {
  body { font-size: 15px; }
  .masthead { padding-left: 14px; padding-right: 14px; }
  .wordmark { font-size: 34px; }
  .intro, .section-shell { padding-left: 16px; padding-right: 16px; }
  .intro h1 { font-size: clamp(50px, 16vw, 78px); }
  .rack { box-shadow: 7px 7px 0 rgba(37,40,35,.12); }
  .rack-label { flex-direction: column; gap: 2px; }
  .app-unit { margin-left: 12px; margin-right: 12px; }
  .terminal-card { box-shadow: 7px 7px 0 rgba(37,40,35,.12); }
  .terminal-card pre { padding: 20px 15px; font-size: 12px; }
  .footer-inner { align-items: flex-start; flex-direction: column; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { transition-duration: .001ms !important; animation-duration: .001ms !important; }
}