@charset "UTF-8";
/* ===========================================================================
   DESTERROCORE — design system
   ---------------------------------------------------------------------------
   Clean structure, dirty surface.

   The layout is a disciplined document grid hung off a single 1px vertical
   spine that runs from the hero to the EOF marker in the footer. Grain,
   scanlines and print registration live in one fixed overlay above the page,
   never inside the layout.

   Palette budget, deliberately kept: ~70% near-black, ~20% paper, ~8% orange,
   ~2% terminal green. Green is machine semantics only — prompts, status,
   cursors, live event dots. It is never decoration.
   =========================================================================== */

/* ---------------------------------------------------------------------------
   1. Fonts — self-hosted, no third-party requests.
   Archivo is a variable font with both a weight and a width axis, which is
   where the condensed display type comes from; JetBrains Mono carries every
   piece of metadata on the page.
   --------------------------------------------------------------------------- */

/* latin-ext */
@font-face {
  font-family: 'Archivo';
  font-style: normal;
  font-weight: 400 800;
  font-stretch: 62% 125%;
  font-display: swap;
  src: url(../fonts/archivo-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Archivo';
  font-style: normal;
  font-weight: 400 800;
  font-stretch: 62% 125%;
  font-display: swap;
  src: url(../fonts/archivo-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* latin-ext */
@font-face {
  font-family: 'JetBrains Mono';
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url(../fonts/jetbrains-mono-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'JetBrains Mono';
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url(../fonts/jetbrains-mono-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* The arrows used in buttons and link affordances — U+2191, U+2192, U+2197 —
   sit outside the latin and latin-ext ranges Google serves, so they get their
   own 1 KB subset rather than falling back to a system font mid-label. */
@font-face {
  font-family: 'JetBrains Mono';
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url(../fonts/jetbrains-mono-arrows.woff2) format('woff2');
  unicode-range: U+2191-2192, U+2197;
}

/* Fallback metrics matched to Archivo so the font swap causes no layout shift. */
@font-face {
  font-family: 'Archivo Fallback';
  src: local('Arial'), local('Helvetica'), local('Liberation Sans');
  size-adjust: 100%;
  ascent-override: 92%;
  descent-override: 24%;
  line-gap-override: 0%;
}

/* ---------------------------------------------------------------------------
   2. Tokens
   --------------------------------------------------------------------------- */

:root {
  /* Ink */
  --bg:            #090909;
  --panel:         #171717;
  --panel-2:       #101010;
  --paper:         #E7DFCF;
  --orange:        #E85D04;
  --orange-hot:    #F26419;
  --green:         #7CFF4F;
  /* The brief names #77736C as the muted gray. Measured against #090909 it is
     4.22:1 and against #171717 3.80:1 — under AA for body-sized text. So it is
     kept for rules and separators, and metadata text uses a lifted variant at
     6.13:1. Same hue, same role, legible. */
  --gray-rule:     #77736C;
  --gray:          #948E84;

  /* Derived surfaces. Every hairline on the page comes from these two. */
  --hair:          rgba(231, 223, 207, .14);
  --hair-strong:   rgba(231, 223, 207, .30);
  --ink-dim:       rgba(231, 223, 207, .70);
  --focus:         var(--orange);

  /* Type */
  --ff-sans: 'Archivo', 'Archivo Fallback', system-ui, -apple-system, 'Segoe UI', Roboto, Arial, sans-serif;
  --ff-mono: 'JetBrains Mono', ui-monospace, SFMono-Regular, 'SF Mono', Menlo, Consolas, 'Liberation Mono', monospace;

  --fs-display: clamp(2.5rem, 7.6vw, 6rem);
  --fs-h2:      clamp(1.85rem, 4.4vw, 3.35rem);
  --fs-h3:      clamp(1.1rem, 1.05rem + .55vw, 1.55rem);
  --fs-lede:    clamp(1.05rem, .99rem + .5vw, 1.4rem);
  --fs-body:    clamp(1rem, .97rem + .12vw, 1.0625rem);
  --fs-small:   clamp(.875rem, .86rem + .08vw, .9375rem);
  --fs-mono:    clamp(.6875rem, .67rem + .08vw, .75rem);
  --fs-mono-sm: .6875rem;
  --fs-num:     clamp(3.25rem, 8.5vw, 7.5rem);

  --ls-label: .18em;
  --ls-mono:  .04em;

  /* Layout */
  --pad:    clamp(20px, 4.4vw, 64px);
  --busgap: clamp(16px, 3.2vw, 60px);
  --maxw:   1320px;
  /* x position of the 1px spine, measured from the left edge of any full-width
     band: the content edge when the viewport is narrower than --maxw, and the
     centred shell's content edge once it is wider. */
  --bus-x:  calc(50% - min(50%, var(--maxw) / 2) + var(--pad));
  --gap:    clamp(16px, 1.7vw, 30px);
  --sec-pad: clamp(72px, 9vw, 148px);
  --header-h: 56px;

  /* Motion */
  --dur-1: 120ms;
  --dur-2: 240ms;
  --dur-3: 380ms;
  --ease:  cubic-bezier(.2, .6, .2, 1);

  color-scheme: dark;
  accent-color: var(--orange);
}

/* ---------------------------------------------------------------------------
   3. Reset & base
   --------------------------------------------------------------------------- */

*, *::before, *::after { box-sizing: border-box; }

/* Any component that declares its own `display` would otherwise out-specify the
   UA rule for [hidden]. Several here do. */
[hidden] { display: none !important; }

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--header-h) + 16px);
}

body {
  margin: 0;
  background: var(--bg);
  color: var(--paper);
  font-family: var(--ff-sans);
  font-size: var(--fs-body);
  font-weight: 400;
  font-stretch: 100%;
  line-height: 1.62;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

h1, h2, h3, h4 {
  margin: 0;
  font-weight: 700;
  font-stretch: 84%;
  line-height: .98;
  letter-spacing: -.015em;
  text-wrap: balance;
}

p  { margin: 0; }
ul, ol, dl, dd { margin: 0; padding: 0; }
ul, ol { list-style: none; }
img, svg { display: block; max-width: 100%; }
img { height: auto; }
button { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; }
table { border-collapse: collapse; width: 100%; }

a {
  color: inherit;
  text-decoration-color: var(--hair-strong);
  text-underline-offset: .22em;
  text-decoration-thickness: 1px;
  transition: color var(--dur-1) var(--ease), text-decoration-color var(--dur-1) var(--ease);
}
a:hover { color: var(--orange); text-decoration-color: var(--orange); }

::selection { background: var(--orange); color: #090909; }

:focus-visible {
  outline: 2px solid var(--focus);
  outline-offset: 3px;
  border-radius: 0;
}
:focus:not(:focus-visible) { outline: none; }

/* ---------------------------------------------------------------------------
   4. Utilities
   --------------------------------------------------------------------------- */

.sr-only {
  position: absolute !important;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

.skip-link {
  position: absolute;
  left: 8px; top: -100px;
  z-index: 200;
  padding: 12px 18px;
  background: var(--orange);
  color: #090909;
  font-family: var(--ff-mono);
  font-size: var(--fs-mono);
  letter-spacing: var(--ls-label);
  text-transform: uppercase;
  text-decoration: none;
  transition: top var(--dur-1) var(--ease);
}
.skip-link:focus { top: 8px; color: #090909; }

/* Announced to assistive tech when the language changes; never seen. */
.a11y-status {
  position: absolute;
  width: 1px; height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

.mono {
  font-family: var(--ff-mono);
  font-size: var(--fs-mono);
  letter-spacing: var(--ls-mono);
  font-variant-ligatures: none;
}

.label {
  font-family: var(--ff-mono);
  font-size: var(--fs-mono);
  letter-spacing: var(--ls-label);
  text-transform: uppercase;
  color: var(--gray);
  margin-bottom: clamp(14px, 1.6vw, 22px);
}
.label::before {
  content: "";
  display: inline-block;
  width: 18px; height: 1px;
  margin-right: 10px;
  vertical-align: .32em;
  background: var(--orange);
}

.js-only { display: none; }
.js .js-only { display: flex; }

/* The document shell. Every band on the page uses .wrap; the ones carrying
   .rail also draw the 1px spine at the content's left edge. */
.wrap {
  width: 100%;
  max-width: var(--maxw);
  margin-inline: auto;
  padding-inline: var(--pad);
}

/* .rail only reserves the gutter; the spine itself is drawn once per band so
   it runs unbroken from the hero to the EOF marker in the footer. */
.rail { position: relative; padding-left: calc(var(--pad) + var(--busgap)); }

.hero, .statusbar, .sec, .foot { position: relative; }
.hero::before,
.statusbar::before,
.sec::before,
.foot::before {
  content: "";
  position: absolute;
  left: var(--bus-x);
  top: 0; bottom: 0;
  width: 1px;
  background: var(--hair);
  pointer-events: none;
}

/* ---------------------------------------------------------------------------
   5. Surface — grain, scanlines, vignette.
   One fixed overlay, no image requests, no animation.
   --------------------------------------------------------------------------- */

.grain, .scanlines {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 90;
}

.grain {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.82' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='200' height='200' filter='url(%23g)'/%3E%3C/svg%3E");
  background-size: 200px 200px;
  background-repeat: repeat;
  opacity: .055;
  mix-blend-mode: overlay;
}

.scanlines {
  background-image: repeating-linear-gradient(180deg, rgba(0, 0, 0, .38) 0 1px, transparent 1px 3px);
  opacity: .2;
}
@media (min-resolution: 2dppx) { .scanlines { opacity: .12; } }
/* The expensive layers — a blended fixed overlay and a nine-octave SVG filter —
   are dropped on touch devices rather than on narrow ones. Keying this to width
   alone meant a phone in landscape (667-932px) switched them all back on, which
   is exactly the device they exist to protect. */
@media (max-width: 640px),
       (pointer: coarse) and (max-width: 1024px),
       (max-height: 520px) and (pointer: coarse) {
  .scanlines { display: none; }
  .hero__sun [filter] { filter: none !important; }
  .grain { mix-blend-mode: normal; opacity: .035; }
}

/* ---------------------------------------------------------------------------
   6. Masthead
   --------------------------------------------------------------------------- */

.masthead {
  position: sticky;
  top: 0;
  z-index: 80;
  background: color-mix(in srgb, var(--bg) 86%, transparent);
  border-bottom: 1px solid transparent;
  transition: background var(--dur-2) var(--ease), border-color var(--dur-2) var(--ease);
}
@supports not (background: color-mix(in srgb, red 50%, blue)) {
  .masthead { background: rgba(9, 9, 9, .88); }
}
.masthead.is-stuck {
  background: rgba(9, 9, 9, .97);
  border-bottom-color: var(--hair);
}

.masthead__in {
  max-width: var(--maxw);
  margin-inline: auto;
  padding-inline: var(--pad);
  min-height: var(--header-h);
  display: flex;
  align-items: center;
  gap: clamp(16px, 2.4vw, 40px);
}

.brand {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  text-decoration: none;
  flex: 0 0 auto;
}
.brand__mark {
  display: block;
  width: 34px;
  color: var(--paper);
  transition: color var(--dur-1) var(--ease);
}
.brand__mark svg { width: 100%; height: auto; }
.brand__name {
  font-family: var(--ff-mono);
  font-size: var(--fs-mono);
  letter-spacing: .1em;
  color: var(--paper);
}
.brand:hover .brand__mark { color: var(--orange); }
.brand:hover .brand__name { color: var(--orange); }

.nav { margin-left: auto; }
.nav__list {
  display: flex;
  gap: clamp(10px, 1.6vw, 26px);
}
.nav__list a {
  display: block;
  padding: 6px 2px;
  font-family: var(--ff-mono);
  font-size: var(--fs-mono);
  letter-spacing: var(--ls-mono);
  color: var(--gray);
  text-decoration: none;
  box-shadow: inset 0 -1px 0 transparent;
  transition: color var(--dur-1) var(--ease), box-shadow var(--dur-1) var(--ease);
}
.nav__list a:hover { color: var(--paper); }
.nav__list a.is-current {
  color: var(--paper);
  box-shadow: inset 0 -1px 0 var(--orange);
}

.masthead__tools {
  display: flex;
  align-items: center;
  gap: 12px;
  flex: 0 0 auto;
}

.lang {
  align-items: center;
  gap: 6px;
  border: 1px solid var(--hair);
  padding: 3px 8px;
  height: 28px;
}
.lang__btn {
  font-family: var(--ff-mono);
  font-size: var(--fs-mono-sm);
  letter-spacing: .06em;
  color: var(--gray);
  padding: 3px 2px;
  position: relative;
  transition: color var(--dur-1) var(--ease), box-shadow var(--dur-1) var(--ease);
  box-shadow: inset 0 -1px 0 transparent;
}
.lang__btn::after {               /* 44px touch target without changing layout */
  content: "";
  position: absolute;
  inset: -10px -6px;
}
.lang__btn:hover { color: var(--paper); }
.lang__btn.is-active {
  color: var(--paper);
  box-shadow: inset 0 -1px 0 var(--orange);
}
.lang__sep { color: var(--gray); opacity: .5; font-family: var(--ff-mono); font-size: var(--fs-mono-sm); }

.navtoggle {
  display: none;
  width: 44px; height: 44px;
  align-items: center;
  justify-content: center;
  margin-right: -10px;
}
.navtoggle__bars { display: block; width: 20px; }
.navtoggle__bars i {
  display: block;
  height: 1px;
  background: var(--paper);
  margin: 5px 0;
  transition: transform var(--dur-2) var(--ease), opacity var(--dur-1) var(--ease);
}
.navtoggle[aria-expanded="true"] .navtoggle__bars i:nth-child(1) { transform: translateY(6px) rotate(45deg); }
.navtoggle[aria-expanded="true"] .navtoggle__bars i:nth-child(2) { opacity: 0; }
.navtoggle[aria-expanded="true"] .navtoggle__bars i:nth-child(3) { transform: translateY(-6px) rotate(-45deg); }

.navtoggle[aria-expanded="false"] [data-navlabel="close"],
.navtoggle[aria-expanded="true"]  [data-navlabel="open"] { display: none; }

/* ---------------------------------------------------------------------------
   7. Hero
   --------------------------------------------------------------------------- */

.hero {
  position: relative;
  isolation: isolate;
  padding-block: clamp(56px, 9vh, 120px) clamp(48px, 7vh, 96px);
  min-height: clamp(560px, 84vh, 900px);
  min-height: clamp(560px, 84svh, 900px);
  display: grid;
  align-content: center;
  overflow: hidden;
}
.sentinel { position: absolute; top: 0; left: 0; width: 1px; height: 1px; }

.hero__bg {
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  overflow: hidden;
}
.hero__contours,
.hero__coast,
.hero__sun { position: absolute; }

.hero__contours {
  right: -8%;
  top: -14%;
  width: min(76vw, 900px);
  color: var(--paper);
  opacity: .085;
}
.hero__coast {
  left: -4%;
  bottom: -12%;
  width: min(26vw, 260px);
  color: var(--paper);
  opacity: .10;
}
.hero__sun {
  right: 4%;
  top: 8%;
  width: min(38vw, 380px);
  opacity: .5;
}

.hero__in { position: relative; }

.hero__term {
  color: var(--gray);
  line-height: 1.75;
  margin-bottom: clamp(24px, 3vw, 40px);
}
.term__line { color: var(--gray); }
.term__prompt { color: var(--green); }
.term__out { color: var(--ink-dim); padding-left: 1.15em; }
.term__out--name { color: var(--paper); }
.term__out--dim { color: var(--gray); }

.cursor {
  display: inline-block;
  width: .55em;
  height: 1em;
  vertical-align: -.14em;
  background: var(--green);
  animation: blink 1.1s steps(1) infinite;
}
@keyframes blink { 50% { opacity: 0; } }

.hero__headline {
  font-size: var(--fs-display);
  font-weight: 800;
  font-stretch: 78%;
  line-height: .9;
  letter-spacing: -.028em;
  max-width: 18ch;
  margin-bottom: clamp(22px, 2.6vw, 36px);
}

.hero__lede {
  max-width: 58ch;
  font-size: var(--fs-lede);
  line-height: 1.55;
  color: var(--ink-dim);
  margin-bottom: clamp(24px, 3vw, 38px);
}

.hero__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  margin-top: clamp(24px, 3vw, 38px);
}

.hero__foot {
  position: absolute;
  left: 0; right: 0;
  bottom: 20px;
}
.hero__scroll {
  padding-left: var(--busgap);
  display: flex;
  align-items: center;
  gap: 12px;
  color: var(--gray);
  letter-spacing: var(--ls-label);
  text-transform: uppercase;
}
.hero__scrollrule {
  display: block;
  width: clamp(40px, 6vw, 88px);
  height: 1px;
  background: linear-gradient(90deg, var(--orange), transparent);
}

/* ---------------------------------------------------------------------------
   8. Tags, chips, buttons
   --------------------------------------------------------------------------- */

.tags {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 20px;
}
.tag {
  font-family: var(--ff-mono);
  font-size: var(--fs-mono);
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--gray);
  white-space: nowrap;
}
.tag::before { content: "["; color: var(--orange); margin-right: .45em; }
.tag::after  { content: "]"; color: var(--orange); margin-left: .45em; }

.hero__tags .tag { color: var(--paper); }

.chips {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}
.chip {
  font-family: var(--ff-mono);
  font-size: var(--fs-mono);
  letter-spacing: .06em;
  color: var(--ink-dim);
  border: 1px solid var(--hair);
  padding: 7px 12px;
  transition: border-color var(--dur-1) var(--ease), color var(--dur-1) var(--ease);
}
.chip:hover { border-color: var(--orange); color: var(--paper); }
.chips--quiet .chip { border-color: transparent; border-bottom-color: var(--hair); padding-inline: 0; margin-right: 12px; }
.chips--quiet .chip:hover { border-bottom-color: var(--orange); }

.btn {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  min-height: 46px;
  padding: 13px 20px;
  border: 1px solid var(--hair-strong);
  border-radius: 0;
  font-family: var(--ff-mono);
  font-size: var(--fs-mono);
  letter-spacing: var(--ls-label);
  text-transform: uppercase;
  text-decoration: none;
  color: var(--paper);
  background: transparent;
  transition: background var(--dur-1) var(--ease), color var(--dur-1) var(--ease), border-color var(--dur-1) var(--ease);
}
.btn__arrow { transition: transform var(--dur-2) var(--ease); }
.btn:hover, .btn:focus-visible {
  background: var(--orange);
  border-color: var(--orange);
  color: #090909;
}
.btn:hover .btn__arrow { transform: translateX(4px); }
.btn:active { transform: translateX(-1px); }
.btn--primary {
  background: var(--orange);
  border-color: var(--orange);
  color: #090909;
}
.btn--primary:hover, .btn--primary:focus-visible {
  background: var(--orange-hot);
  border-color: var(--orange-hot);
}

/* ---------------------------------------------------------------------------
   9. Status strip
   --------------------------------------------------------------------------- */

.statusbar {
  border-block: 1px solid var(--hair);
  background: var(--panel-2);
}
.statusbar__in {
  display: flex;
  flex-wrap: wrap;
  gap: 8px clamp(20px, 3.4vw, 56px);
  padding-block: 12px;
}
.statusbar__cell { display: flex; align-items: center; gap: 10px; }
.statusbar__k {
  color: var(--gray);
  letter-spacing: var(--ls-label);
  text-transform: uppercase;
}
.statusbar__v {
  color: var(--paper);
  letter-spacing: .06em;
  display: inline-flex;
  align-items: center;
  gap: 7px;
}
.statusbar__v--on { color: var(--green); }
/* Named for the status strip specifically: `.dot` is taken by the event
   circles inside the inlined topology SVG. */
.statusbar__dot {
  width: 6px; height: 6px;
  background: var(--green);
  display: inline-block;
  animation: blip 4s steps(1) infinite;
}
@keyframes blip { 0%, 92% { opacity: 1; } 93%, 100% { opacity: .25; } }

/* ---------------------------------------------------------------------------
   9b. Ink load
   One press, four ink loads. Engineering and culture are not two designs — the
   same grid, type and inks are pulled at different weights. Only 03 / CULTURA
   inverts the ground, and it is the single paper insert on the page.
   --------------------------------------------------------------------------- */

[data-ink]        { --rule-w: 1px; --rule-c: var(--hair); }
[data-ink="0"]    { --rule-w: 1px; --rule-c: var(--hair); }
[data-ink="1"]    { --rule-w: 1px; --rule-c: var(--hair-strong); }
[data-ink="2"]    { --rule-w: 1px; --rule-c: var(--hair-strong); }
[data-ink="3"]    { --rule-w: 2px; --rule-c: var(--orange); }

.sec + .sec, .plate + .sec { border-top: var(--rule-w) solid var(--rule-c); }

/* ---------------------------------------------------------------------------
   10. Section anatomy
   --------------------------------------------------------------------------- */

.sec {
  position: relative;
  padding-block: var(--sec-pad);
  overflow: clip;   /* html's scroll-padding-top already offsets anchor jumps */
}

.sechead {
  position: relative;
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: end;
  column-gap: clamp(16px, 2vw, 32px);
  padding-bottom: 18px;
  margin-bottom: clamp(28px, 3.4vw, 48px);
  border-bottom: 1px solid var(--hair);
}
/* The node square soldered onto the spine. */
.sechead::before {
  content: "";
  position: absolute;
  left: calc(-1 * var(--busgap) - 4px);
  bottom: -4px;
  width: 9px; height: 9px;
  border: 1px solid var(--hair-strong);
  background: var(--bg);
}
/* The stub connecting the square to the section rule. */
.sechead::after {
  content: "";
  position: absolute;
  left: calc(-1 * var(--busgap) + 6px);
  bottom: -1px;
  width: calc(var(--busgap) - 6px);
  height: 1px;
  background: var(--hair);
}

.sechead__num {
  font-size: var(--fs-num);
  font-weight: 800;
  font-stretch: 70%;
  line-height: .78;
  letter-spacing: -.04em;
  color: transparent;
  -webkit-text-stroke: 1px rgba(231, 223, 207, .42);
  /* Print misregistration: a solid orange pull sitting a hair off the outlined
     cream one. One constant offset vector everywhere, which is what makes it
     read as a bad press run rather than as a glitch filter. */
  text-shadow: 3px -2px 0 rgba(232, 93, 4, .34);
  padding-right: 4px;
}
@supports not (-webkit-text-stroke: 1px red) {
  .sechead__num { color: var(--hair-strong); text-shadow: none; }
}
.sechead__title {
  font-size: var(--fs-h2);
  font-stretch: 80%;
  letter-spacing: -.01em;
  text-transform: uppercase;
  padding-bottom: .06em;
}
.sechead__meta {
  display: grid;
  justify-items: end;
  gap: 4px;
  padding-bottom: .5em;
  text-align: right;
}
.sechead__path {
  color: var(--gray);
  letter-spacing: .08em;
  white-space: nowrap;
}
.sechead__path::first-letter { color: var(--green); }
.sechead__index {
  color: var(--gray);
  letter-spacing: .14em;
  font-size: var(--fs-mono-sm);
  white-space: nowrap;
}

.sec__lede {
  max-width: 62ch;
  font-size: var(--fs-lede);
  line-height: 1.55;
  color: var(--ink-dim);
  margin-bottom: clamp(32px, 4vw, 56px);
}

.block { margin-block: clamp(36px, 4.5vw, 68px); }

.cols2 {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(320px, 100%), 1fr));
  gap: clamp(28px, 3.6vw, 64px);
  margin-block: clamp(36px, 4.5vw, 68px);
}

/* ---------------------------------------------------------------------------
   11. Prose & pull quotes
   --------------------------------------------------------------------------- */

.prose { max-width: 68ch; }
.prose p, .sec__lede, .card__body, .duo__body, .note__body, .network__body,
.identity__body, .step__body, .plate__text, .foot__colotext { overflow-wrap: break-word; }
.prose p + p { margin-top: 1.15em; }
.prose--two {
  max-width: none;
  columns: 2;
  column-gap: clamp(28px, 3.6vw, 64px);
}
.prose--two p { break-inside: avoid; max-width: 60ch; }
.prose--two p + p { margin-top: 1.15em; }
@media (max-width: 860px) { .prose--two { columns: 1; } }

.pull {
  margin-block: clamp(36px, 4.6vw, 72px);
  padding-left: clamp(16px, 2vw, 28px);
  border-left: 2px solid var(--orange);
  max-width: 30ch;
}
.pull p {
  font-size: clamp(1.5rem, 3.4vw, 2.6rem);
  font-weight: 700;
  font-stretch: 82%;
  line-height: 1.06;
  letter-spacing: -.02em;
  text-wrap: balance;
}
.pull--sm { max-width: 26ch; }
.pull--sm p { font-size: clamp(1.3rem, 2.6vw, 2rem); }

/* ---------------------------------------------------------------------------
   12. 01 / SISTEMAS
   --------------------------------------------------------------------------- */

.duo {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  gap: clamp(20px, 3vw, 52px);
  align-items: start;
  margin-block: clamp(40px, 5vw, 76px);
}
.duo__col { border-top: 2px solid var(--paper); padding-top: 18px; }
.duo__title {
  font-size: var(--fs-h3);
  font-stretch: 88%;
  margin-block: 4px 12px;
  line-height: 1.1;
}
.duo__body { color: var(--ink-dim); font-size: var(--fs-small); line-height: 1.6; }
.duo__bus { align-self: stretch; display: flex; justify-content: center; padding-top: 18px; }
.duo__bus span {
  display: block;
  width: 1px;
  min-height: 100%;
  background: repeating-linear-gradient(180deg, var(--hair-strong) 0 6px, transparent 6px 12px);
}
@media (max-width: 820px) {
  .duo { grid-template-columns: 1fr; }
  .duo__bus { display: none; }
}

.equiv { margin-block: clamp(40px, 5vw, 76px); }
.etable { font-variant-numeric: tabular-nums; }
.etable th {
  text-align: left;
  font-family: var(--ff-mono);
  font-size: var(--fs-mono);
  font-weight: 400;
  letter-spacing: var(--ls-label);
  text-transform: uppercase;
  color: var(--gray);
  padding-bottom: 10px;
  border-bottom: 2px solid var(--orange);
  width: 50%;
}
.etable td {
  overflow-wrap: break-word;
  padding: 14px 24px 14px 0;
  border-bottom: 1px solid var(--hair);
  vertical-align: top;
  color: var(--ink-dim);
  font-size: var(--fs-small);
}
.etable tbody tr:nth-child(even) { background: rgba(231, 223, 207, .025); }
.etable tbody tr:hover td { color: var(--paper); }
.etable td:first-child { color: var(--paper); }

.invariants { margin-block: clamp(36px, 4.5vw, 68px); }
.invariants__list {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(240px, 100%), 1fr));
  gap: 0 clamp(20px, 3vw, 48px);
  counter-reset: inv;
}
.invariants__list li {
  counter-increment: inv;
  display: flex;
  gap: 12px;
  padding: 11px 0;
  border-bottom: 1px solid var(--hair);
  color: var(--ink-dim);
}
.invariants__list li::before {
  content: counter(inv, decimal-leading-zero);
  color: var(--orange);
  flex: 0 0 auto;
}

/* ---------------------------------------------------------------------------
   13. 02 / ENGENHARIA
   --------------------------------------------------------------------------- */

.stack {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(200px, 100%), 1fr));
  gap: clamp(20px, 2.6vw, 40px);
}
.stack__group { border-top: 1px solid var(--hair-strong); padding-top: 14px; }
.stack__k {
  color: var(--gray);
  letter-spacing: var(--ls-label);
  text-transform: uppercase;
  margin-bottom: 12px;
}
.stack__v li {
  padding: 6px 0;
  color: var(--paper);
  border-bottom: 1px solid var(--hair);
}
.stack__v li:last-child { border-bottom: 0; }

.diagram {
  margin: clamp(40px, 5vw, 76px) 0;
  border: 1px solid var(--hair);
  background: var(--panel);
}
.diagram__head {
  padding: 16px clamp(16px, 2vw, 26px);
  border-bottom: 1px solid var(--hair);
  display: grid;
  gap: 10px;
}
.diagram__head .label { margin-bottom: 0; }
.diagram__caption {
  color: var(--ink-dim);
  font-size: var(--fs-small);
  line-height: 1.55;
  max-width: 78ch;
}
.diagram__canvas {
  padding: clamp(16px, 2.4vw, 34px);
  overflow-x: auto;
  overscroll-behavior-x: contain;
}
.diagram__canvas svg { width: 100%; height: auto; }
/* Labels are sized in viewBox units, so scaling the drawing down scales the
   type down with it. Below ~1080px the diagram scrolls instead of shrinking
   past legibility; the container is focusable so it can be scrolled by
   keyboard too. */
.diagram__wide svg { min-width: 1080px; }
.diagram__canvas:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
.diagram__narrow { display: none; }

/* Event dots drifting along the asynchronous edges. The arrowheads already
   carry direction, so each dot only needs a short travel with a fade at both
   ends — the one piece of continuous motion in the body of the page, and it
   depicts something true about the topology. */
@keyframes flow-x {
  0%        { transform: translateX(-16px); opacity: 0; }
  22%, 78%  { opacity: 1; }
  100%      { transform: translateX(16px); opacity: 0; }
}
@keyframes flow-y {
  0%        { transform: translateY(-16px); opacity: 0; }
  22%, 78%  { opacity: 1; }
  100%      { transform: translateY(16px); opacity: 0; }
}
.diagram .dot {
  animation: flow-x 3.2s linear infinite;
}
#event-topology-dot-consume   { animation-delay: -.4s; }
#event-topology-dot-dlq       { animation-delay: -.8s; }
#event-topology-dot-dlq2      { animation-delay: -2.4s; }
/* these three run right-to-left */
#event-topology-dot-decision  { animation-delay: -1.2s; animation-direction: reverse; }
#event-topology-dot-decision2 { animation-delay: -2.8s; animation-direction: reverse; }
#event-topology-dot-callback  { animation-delay: -1.6s; animation-direction: reverse; }
/* and these two run on vertical segments */
#event-topology-dot-callback2 { animation-name: flow-y; animation-delay: -2s; animation-direction: reverse; }
#event-topology-dot-notify    { animation-name: flow-y; animation-delay: -2.6s; }
#flow-strip-dot-out           { animation-delay: -1.6s; }
@media (max-width: 720px) {
  .diagram__wide   { display: none; }
  .diagram__narrow { display: block; }
}

.ruled li {
  padding: 11px 0;
  border-bottom: 1px solid var(--hair);
  color: var(--ink-dim);
  transition: color var(--dur-1) var(--ease), padding-left var(--dur-1) var(--ease);
}
.ruled li:hover { color: var(--paper); padding-left: 6px; }

.note {
  border-left: 2px solid var(--orange);
  padding: 4px 0 4px clamp(16px, 2vw, 26px);
  align-self: start;
}
.note__body { color: var(--ink-dim); font-size: var(--fs-small); line-height: 1.6; max-width: 46ch; }

/* ---------------------------------------------------------------------------
   14. 03 / CULTURA — the cream insert.
   The section re-declares the ink tokens, so every component inside it
   inverts without needing a single override of its own.
   --------------------------------------------------------------------------- */

.sec--culture {
  --bg:          #E7DFCF;
  --panel:       #DED5C3;
  --paper:       #14110C;
  --orange:      #A33600;   /* 5.14:1 on cream — #E85D04 is 2.64:1 and fails */
  --orange-hot:  #8F2F00;
  --green:       #2E6B18;
  --gray-rule:   #6E675A;
  --gray:        #5F594D;   /* 5.24:1 on cream */
  --hair:        rgba(20, 17, 12, .18);
  --hair-strong: rgba(20, 17, 12, .38);
  --ink-dim:     rgba(20, 17, 12, .78);
  --focus:       #14110C;

  background: var(--bg);
  color: var(--paper);
  /* Both 2px rules resolve against this block's own --orange (#A33600). That
     is deliberate: they are painted over the cream ground, where #E85D04 drops
     to 2.6:1. */
  border-bottom: var(--rule-w) solid var(--rule-c);
}
.sec--culture + .sec { border-top: 0; }
.sec--culture .sechead__num {
  -webkit-text-stroke-color: rgba(20, 17, 12, .52);
  text-shadow: 3px -2px 0 rgba(163, 54, 0, .38);
}
.sec--culture ::selection { background: #14110C; color: #E7DFCF; }

.stats {
  display: flex;
  flex-wrap: wrap;
  gap: clamp(24px, 4vw, 72px);
  padding-block: clamp(20px, 2.4vw, 32px);
  border-block: 1px solid var(--hair);
  margin-bottom: clamp(32px, 4vw, 56px);
}
.stat { display: grid; gap: 6px; }
.stat__v {
  font-size: clamp(2.2rem, 5.4vw, 3.8rem);
  font-weight: 800;
  font-stretch: 72%;
  line-height: .9;
  letter-spacing: -.03em;
  font-variant-numeric: tabular-nums;
}
.stat__v--span { font-size: clamp(1.7rem, 3.8vw, 2.7rem); }
.stat__k { color: var(--gray); letter-spacing: var(--ls-label); text-transform: uppercase; }

.cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(320px, 100%), 1fr));
  gap: 1px;
}
.card {
  background: var(--bg);
  outline: 1px solid var(--hair);   /* not a border: it fills the 1px gap and
                                       leaves empty tracks invisible */
  padding: clamp(20px, 2.4vw, 34px);
  display: flex;
  flex-direction: column;
  gap: 12px;
  transition: background var(--dur-2) var(--ease);
}
.card:hover { background: var(--panel); }
.card--wide { grid-column: 1 / -1; }

.card__bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding-bottom: 12px;
  border-bottom: 1px solid var(--hair);
}
.card__idx { color: var(--gray); letter-spacing: .12em; }
.stamp {
  font-size: var(--fs-mono-sm);
  letter-spacing: var(--ls-label);
  text-transform: uppercase;
  color: var(--orange);
  border: 1px solid var(--orange);
  padding: 3px 8px;
}
.card__name {
  font-size: var(--fs-h3);
  font-stretch: 86%;
  line-height: 1.06;
}
.card__sub { color: var(--gray); font-size: var(--fs-small); line-height: 1.4; }
.card__meta {
  color: var(--gray);
  display: flex;
  flex-wrap: wrap;
  gap: 4px 8px;
  align-items: baseline;
}
.card__dot { color: var(--orange); }
.card__body { color: var(--ink-dim); font-size: var(--fs-small); line-height: 1.6; }
.card .tags { margin-top: auto; padding-top: 6px; }
.card .tag { color: var(--gray); }

.network {
  margin-top: clamp(32px, 4vw, 56px);
  border-left: 2px solid var(--orange);
  padding: 4px 0 4px clamp(18px, 2.4vw, 32px);
  max-width: 76ch;
}
.network__name {
  font-size: var(--fs-h3);
  font-stretch: 86%;
  margin-bottom: 12px;
}
.network__body { color: var(--ink-dim); font-size: var(--fs-small); line-height: 1.62; }

/* ---------------------------------------------------------------------------
   15. 04 / MÉTODO
   --------------------------------------------------------------------------- */

.pipeline { margin-block: clamp(40px, 5vw, 72px); }
.pipeline__list {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(210px, 100%), 1fr));
  gap: 0 clamp(14px, 1.6vw, 28px);
}
.step {
  position: relative;
  padding: 22px 0 26px;
  border-top: 1px solid var(--hair-strong);
}
.step::before {
  content: "";
  position: absolute;
  top: -1px; left: 0;
  width: 26px; height: 2px;
  background: var(--orange);
}
.step__num { color: var(--orange); letter-spacing: .12em; display: block; margin-bottom: 12px; }
.step__title {
  font-size: 1.0625rem;
  font-stretch: 90%;
  line-height: 1.16;
  margin-bottom: 10px;
}
.step__body { color: var(--ink-dim); font-size: var(--fs-small); line-height: 1.58; }


/* ---------------------------------------------------------------------------
   16. 05 / SOBRE
   --------------------------------------------------------------------------- */

.about {
  display: grid;
  grid-template-columns: minmax(220px, 340px) minmax(0, 1fr);
  gap: clamp(28px, 4vw, 72px);
  align-items: start;
  margin-bottom: clamp(36px, 4.5vw, 68px);
}
@media (max-width: 860px) { .about { grid-template-columns: 1fr; } }

.about__fig { margin: 0; }
.avatar {
  position: relative;
  border-radius: 50%;
  overflow: hidden;
  border: 1px solid var(--hair);
  isolation: isolate;
}
.avatar img {
  width: 100%;
  height: auto;
  filter: contrast(1.06) saturate(.95);
}
.avatar__halftone {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background-image: radial-gradient(circle at 50% 50%, rgba(9, 9, 9, .55) 22%, transparent 23%);
  background-size: 4px 4px;
  mix-blend-mode: multiply;
  opacity: .5;
}
.about__cap {
  margin-top: 16px;
  color: var(--gray);
  line-height: 1.7;
  border-top: 1px solid var(--hair);
  padding-top: 12px;
}

.identity__term {
  font-size: clamp(1.6rem, 3.2vw, 2.4rem);
  font-stretch: 78%;
  letter-spacing: -.02em;
  margin-block: 4px 14px;
}
.identity__body { color: var(--ink-dim); font-size: var(--fs-small); line-height: 1.62; max-width: 52ch; }

.facts__list {
  display: grid;
  grid-template-columns: minmax(96px, auto) 1fr;
  column-gap: clamp(16px, 2vw, 32px);
}
.facts__list dt {
  color: var(--gray);
  letter-spacing: var(--ls-label);
  text-transform: uppercase;
  padding: 11px 0;
  border-bottom: 1px solid var(--hair);
}
.facts__list dd {
  color: var(--paper);
  padding: 11px 0;
  border-bottom: 1px solid var(--hair);
}

/* ---------------------------------------------------------------------------
   17. 06 / CONTATO
   --------------------------------------------------------------------------- */

.contact__headline {
  font-family: var(--ff-sans);
  font-size: clamp(1.8rem, 4.4vw, 3.2rem);
  font-weight: 800;
  font-stretch: 78%;
  line-height: 1;
  letter-spacing: -.025em;
  margin-bottom: clamp(18px, 2.2vw, 28px);
  max-width: 20ch;
}

.channels { border-top: 1px solid var(--hair); margin-block: clamp(28px, 3.4vw, 44px); }
.channel {
  display: grid;
  grid-template-columns: minmax(110px, 180px) 1fr auto;
  align-items: center;
  gap: 12px clamp(16px, 2vw, 32px);
  padding: 16px 0;
  border-bottom: 1px solid var(--hair);
  transition: padding-left var(--dur-1) var(--ease);
}
.channel:hover { padding-left: 8px; }
.channel__k { color: var(--gray); letter-spacing: var(--ls-label); text-transform: uppercase; }
.channel__v {
  font-family: var(--ff-mono);
  font-size: var(--fs-small);
  letter-spacing: .02em;
  color: var(--paper);
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: 10px;
}
.channel__v--plain { color: var(--ink-dim); }
.channel__ext { color: var(--orange); transition: transform var(--dur-2) var(--ease); }
.channel__v:hover { color: var(--orange); }
.channel__v:hover .channel__ext { transform: translate(3px, -3px); }
.channel__copy {
  font-family: var(--ff-mono);
  font-size: var(--fs-mono-sm);
  letter-spacing: var(--ls-label);
  text-transform: uppercase;
  color: var(--gray);
  border: 1px solid var(--hair);
  padding: 6px 10px;
  min-height: 32px;
}
.channel__copy.is-copied { color: var(--green); border-color: var(--green); }
.channel__copy.is-failed { color: var(--orange); border-color: var(--orange); }

.contact__actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 16px 22px;
  margin-bottom: clamp(24px, 3vw, 40px);
}
.contact__note {
  color: var(--gray);
  letter-spacing: .06em;
  text-transform: lowercase;
}
.contact__note::before { content: "// "; color: var(--orange); }

.contact__status {
  color: var(--green);
  letter-spacing: .04em;
  border-top: 1px solid var(--hair);
  padding-top: 16px;
}
.contact__foot { color: var(--gray); margin-top: 8px; }

/* ---------------------------------------------------------------------------
   18. Footer
   --------------------------------------------------------------------------- */

.foot {
  border-top: 1px solid var(--hair);
  padding-block: clamp(56px, 7vw, 104px) clamp(28px, 3vw, 44px);
  background: var(--panel-2);
}
.foot__in { position: relative; }
.foot::before { bottom: 96px; }
.foot::after {
  content: "";
  position: absolute;
  left: calc(var(--bus-x) - 4px);
  bottom: 92px;
  width: 9px; height: 9px;
  background: var(--orange);
}

.foot__manifesto { margin-bottom: clamp(36px, 4vw, 56px); }
.manifesto { margin-top: 18px; }
.manifesto li {
  font-family: var(--ff-sans);
  font-size: clamp(1.15rem, 2.6vw, 2rem);
  font-weight: 600;
  font-stretch: 84%;
  line-height: 1.24;
  letter-spacing: -.015em;
  color: var(--paper);
  padding: 8px 0;
  border-bottom: 1px solid var(--hair);
  max-width: 24ch;
}
.manifesto li:last-child { border-bottom: 0; }

.foot__colophon { margin-bottom: clamp(28px, 3vw, 44px); max-width: 62ch; }
.foot__colotext { color: var(--gray); font-size: var(--fs-small); line-height: 1.6; }

.foot__bar {
  display: flex;
  flex-wrap: wrap;
  gap: 12px 24px;
  align-items: center;
  justify-content: space-between;
  padding-top: 20px;
  border-top: 1px solid var(--hair);
}
.foot__rights { color: var(--gray); display: flex; flex-wrap: wrap; gap: 0 .6em; }
.foot__year { color: var(--gray); }
.foot__top {
  color: var(--gray);
  text-decoration: none;
  letter-spacing: var(--ls-label);
  text-transform: uppercase;
  display: inline-flex;
  gap: 8px;
  align-items: center;
}
.foot__top:hover { color: var(--orange); }

/* ---------------------------------------------------------------------------
   22. The plate — a full-width technical elevation between the status strip
   and 01 / SISTEMAS. Desterro arrives as an engineering drawing, which is the
   only way the brief allows the city in: origin and atmosphere, never
   destination marketing.
   --------------------------------------------------------------------------- */

.plate {
  position: relative;
  margin: 0;
  padding-block: clamp(40px, 5vw, 76px);
  overflow: clip;   /* the status strip above already draws this boundary */
}
.plate::before {
  content: "";
  position: absolute;
  left: var(--bus-x);
  top: 0; bottom: 0;
  width: 1px;
  background: var(--hair);
  pointer-events: none;
}
.plate__canvas {
  color: var(--paper);
  opacity: .62;
}
.plate__canvas svg { width: 100%; height: auto; }
.plate__canvas { --bridge-chain: var(--orange); --bridge-dim: var(--gray); }
.plate__cap {
  display: grid;
  gap: 8px;
  margin-top: clamp(16px, 2vw, 28px);
}
.plate__cap .label { margin-bottom: 0; }
.plate__text {
  color: var(--gray);
  font-size: var(--fs-small);
  line-height: 1.55;
  max-width: 76ch;
  border-top: 1px solid var(--hair);
  padding-top: 14px;
}

@media (max-width: 900px) { .plate__canvas text { display: none; } }
@media (max-width: 640px) {
  .plate { padding-block: 32px; }
  .plate__canvas { opacity: .75; }
}

/* ---------------------------------------------------------------------------
   23. Basemap tuning for the inlined SVGs
   --------------------------------------------------------------------------- */

.hero__contours { --basemap-hairline: .9; --basemap-index: 1.3; --basemap-mark: 1.2; }
.hero__sun      { --sun-ink: var(--orange); }
.hero__coast    { --basemap-hairline: 1.2; }
.hero__contours svg, .hero__coast svg, .hero__sun svg { width: 100%; height: auto; }

.brand__mark { --bridge-mark-chain: var(--orange); }

.diagram__sub { color: var(--gray); letter-spacing: .06em; }

/* ---------------------------------------------------------------------------
   24. Manifesto
   Quoted verbatim from the Desterrocore artwork, so it stays in Portuguese in
   both locales; the English reading appears underneath as a gloss.
   --------------------------------------------------------------------------- */

.manifesto__line { display: block; }
.manifesto em { font-style: normal; color: var(--orange); }
.manifesto__gloss {
  display: none;
  color: var(--gray);
  letter-spacing: .04em;
  margin-top: 4px;
}
html[data-lang="en"] .manifesto__gloss { display: block; }

/* ---------------------------------------------------------------------------
   19. Reveal
   Default is visible. Only when JS is present AND the observer is running do
   elements start hidden, so a failure can never blank the page.
   --------------------------------------------------------------------------- */

.reveal-enabled [data-reveal] {
  opacity: 0;
  transform: translateY(12px);
  transition: opacity var(--dur-3) var(--ease), transform var(--dur-3) var(--ease);
}
.reveal-enabled [data-reveal].is-revealed {
  opacity: 1;
  transform: none;
}

/* ---------------------------------------------------------------------------
   20. Responsive
   --------------------------------------------------------------------------- */

@media (max-width: 900px) {
  :root { --header-h: 52px; }

  .js .navtoggle { display: inline-flex; }

  .nav {
    position: fixed;
    inset: var(--header-h) 0 auto 0;
    margin: 0;
    max-height: calc(100vh - var(--header-h));
    max-height: calc(100svh - var(--header-h));
    overflow-y: auto;
    overscroll-behavior: contain;
    background: rgba(9, 9, 9, .98);
    border-bottom: 1px solid var(--hair);
    transform: translateY(-12px);
    opacity: 0;
    visibility: hidden;
    transition: opacity var(--dur-2) var(--ease), transform var(--dur-2) var(--ease), visibility var(--dur-2);
  }
  .nav.is-open { transform: none; opacity: 1; visibility: visible; }
  html.nav-open { overflow: hidden; }
  .nav__list {
    flex-direction: column;
    gap: 0;
    padding: 8px var(--pad) 20px;
  }
  .nav__list a {
    padding: 14px 0;
    font-size: .8125rem;
    border-bottom: 1px solid var(--hair);
  }

  /* Without JS the drawer can never open, so the links must stay reachable. */
  html:not(.js) .nav {
    position: static;
    transform: none; opacity: 1; visibility: visible;
    background: none; border: 0;
    width: 100%;
  }
  html:not(.js) .nav__list { flex-direction: row; flex-wrap: wrap; padding: 0 0 10px; gap: 4px 18px; }
  html:not(.js) .nav__list a { border-bottom: 0; padding: 4px 0; }
  html:not(.js) .masthead__in { flex-wrap: wrap; padding-block: 10px; }
}

@media (max-width: 640px) {
  :root { --sec-pad: clamp(56px, 12vw, 88px); }

  .sechead {
    grid-template-columns: 1fr;
    align-items: start;
    row-gap: 6px;
  }
  .sechead__num { font-size: clamp(3rem, 18vw, 5rem); }
  .sechead__path { padding-bottom: 0; }
  .sechead::before { bottom: auto; top: 10px; }
  .sechead::after  { bottom: auto; top: 14px; }

  .hero { min-height: auto; padding-block: 48px 64px; }
  .hero__scroll { display: none; }
  .hero__sun { width: 60vw; right: -10%; top: 2%; }
  .hero__contours { display: none; }

  .channel { grid-template-columns: 1fr; gap: 6px; }
  .facts__list { grid-template-columns: 1fr; }
  .facts__list dt { border-bottom: 0; padding-bottom: 0; }
  .etable td { padding-right: 12px; }
}

/* ---------------------------------------------------------------------------
   21. Preferences
   --------------------------------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
    scroll-behavior: auto !important;
  }
  /* Freezing these mid-keyframe would leave them invisible, so stop them
     outright and restore the resting state. */
  .cursor, .statusbar__dot, .diagram .dot {
    animation: none !important;
    opacity: 1;
    transform: none;
  }
}

@media (prefers-contrast: more) {
  :root {
    --hair:        rgba(231, 223, 207, .34);
    --hair-strong: rgba(231, 223, 207, .60);
    --ink-dim:     #E7DFCF;
    --gray:        #ABA69C;
  }
  .grain, .scanlines { display: none; }
  .sechead__num { -webkit-text-stroke-color: rgba(231, 223, 207, .8); }
}

@media print {
  :root, .sec--culture {
    --bg:          #FFFFFF;
    --panel:       #FFFFFF;
    --panel-2:     #FFFFFF;
    --paper:       #000000;
    --ink-dim:     #222222;
    --gray:        #555555;
    --gray-rule:   #777777;
    --orange:      #8F2F00;
    --orange-hot:  #8F2F00;
    --green:       #1F5410;
    --hair:        #BBBBBB;
    --hair-strong: #888888;
  }
  .grain, .scanlines, .masthead, .hero__bg, .hero__scroll, .foot__top { display: none !important; }
  .plate__canvas { opacity: 1; }
  .plate::before { display: none; }
  body { background: #fff; color: #000; }
  .sec, .hero, .foot { padding-block: 18pt; }
  .rail { padding-left: 0; }
  .hero::before, .statusbar::before, .sec::before, .foot::before, .foot::after,
  .sechead::before, .sechead::after { display: none; }
  a { color: #000; }
  .sec--culture { background: #fff; color: #000; }
  .card { outline-color: #BBBBBB; }
  .sechead__num { -webkit-text-stroke-color: #666; text-shadow: none; }
}