/* ==========================================================================
   Loxtopus Intelligence, shared stylesheet
   Consumed by index.html and methodology.html.
   Section order:
     1. Tokens          6. Sections and bands
     2. Base            7. Underline-led blocks
     3. Layout          8. About and contact
     4. Buttons         9. Footer and reveal
     5. Nav and hero   10. Storymap
   ========================================================================== */

/* --- 1. Tokens ----------------------------------------------------------- */
:root {
  --abyss:     #0A0E1A;
  --depth:     #0E1420;
  --buff:      #E9E2CC;
  --buff-ink:  #22201A;
  --amber:     #C8922A;
  --amber-br:  #E0A445;
  --amber-ink: #8A6320;            /* amber legible on the buff band */
  --teal:      #2F7C82;
  --ink:       #F5F7FA;
  --slate:     #8C97A3;
  --slate-dim: #47515E;            /* hairlines and borders only: 2.39:1 on
                                      the page background, too low for text */
  --hair:      rgba(140,151,163,.18);
  --warn:      #D98A6A;            /* 'what this cannot tell us' */
  --alert:     #E24B4A;            /* the flagged hull */
  --net-clean: #4E7FA6;            /* legitimate hulls in the fleet diagram */

  /* One colour per former identity, so the name tree reads as three separate
     identities rather than three instances of the same thing. */
  --identity-grand: #7EC8A2;
  --identity-sea:   #7FB3E8;
  --identity-volga: #AE97DC;

  /* Storymap track scheme. Authentic and manipulated share a hue so they read
     as related; radio frequency detections are a different colour entirely
     because they are a different kind of evidence. */
  --track-authentic:   var(--amber-br);
  --track-manipulated: #8A6E42;
  --track-rfgl:        #47A7AF;
  --track-rfgl-faint:  rgba(71,167,175,.4);
  --track-vessel-y:    var(--buff);

  --globe-ocean:     #0C1622;
  --globe-land:      #1B2637;
  --globe-coast:     rgba(140,151,163,.55);
  --globe-graticule: rgba(71,81,94,.30);
  --globe-limb:      rgba(47,124,130,.45);

  --font: 'DM Sans', system-ui, sans-serif;
  --mono: 'IBM Plex Mono', ui-monospace, monospace;
  --gutter: 6vw;
}

/* --- 2. Base ------------------------------------------------------------- */
* { margin: 0; padding: 0; box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  background: var(--abyss);
  color: var(--ink);
  font-family: var(--font);
  font-size: 16px;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
}
a { color: inherit; }
:focus-visible { outline: 2px solid var(--amber-br); outline-offset: 3px; }

.eyebrow {
  font-family: var(--mono); font-size: 11.5px; letter-spacing: .18em;
  text-transform: uppercase; color: var(--slate);
}

/* --- 3. Layout ----------------------------------------------------------- */
.wrap { max-width: 1240px; margin: 0 auto; padding-inline: var(--gutter); }

/* --- 4. Buttons (discreet by default, fill on hover) --------------------- */
.btn {
  display: inline-flex; align-items: center; gap: 10px;
  font-family: var(--mono); font-size: 12px; letter-spacing: .12em;
  text-transform: uppercase;
  padding: 15px 28px; text-decoration: none;
  border: 1px solid var(--slate-dim); color: var(--ink); background: transparent;
  cursor: pointer;
  transition: background .28s ease, color .28s ease, border-color .28s ease;
}
.btn:hover, .btn:focus-visible {
  background: var(--amber); color: var(--abyss); border-color: var(--amber);
}
.btn .ar { transition: transform .28s ease; }
.btn:hover .ar { transform: translateX(4px); }
.btn-amber { border-color: var(--amber); color: var(--amber-br); }

/* --- 5. Nav and hero ----------------------------------------------------- */

/* Horizontal lockup: inline mark, rule, wordmark. Wordmark is live text in
   DM Sans so it matches page headings exactly and inherits colour. Everything
   scales from the --mark custom property. */
.lockup {
  --mark: 40px;
  display: inline-flex; align-items: center; gap: calc(var(--mark) * .34);
  text-decoration: none; color: var(--ink);
}
.lockup-mark { height: var(--mark); width: auto; display: block; flex: none; overflow: visible; }
.lockup-rule {
  width: 2px; flex: none; align-self: stretch;
  margin-block: calc(var(--mark) * .09); background: currentColor;
}
.lockup-text { display: flex; flex-direction: column; gap: calc(var(--mark) * .17); }
.lockup-name {
  font-size: calc(var(--mark) * .40); font-weight: 700;
  letter-spacing: .20em; line-height: 1; text-indent: .20em;
}
.lockup-sub {
  font-size: calc(var(--mark) * .18); font-weight: 400;
  letter-spacing: .34em; line-height: 1; text-indent: .34em;
}

.nav {
  position: sticky; top: 0; z-index: 50;
  background: rgba(10,14,26,.93); backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--hair);
}
.nav-inner { display: flex; align-items: center; justify-content: space-between; height: 74px; position: relative; }
.nav-links { display: flex; align-items: center; gap: 34px; }
.nav-links > a {
  font-family: var(--mono); font-size: 11.5px; letter-spacing: .13em;
  text-transform: uppercase; color: var(--slate); text-decoration: none;
  padding: 4px 0; border-bottom: 2px solid transparent;
  transition: color .2s, border-color .2s;
}
.nav-links > a:hover { color: var(--ink); border-bottom-color: var(--amber); }
.nav-links > a.btn { border: 1px solid var(--amber); color: var(--amber-br); padding: 11px 20px; }
.nav-links > a.btn:hover { background: var(--amber); color: var(--abyss); }
/* Mobile navigation. The button is inserted by nav.js, so without JavaScript
   the links simply stay visible and wrap. */
.nav-toggle { display: none; }

@media (max-width: 900px) {
  .nav .lockup { --mark: 32px; }

  .nav-toggle {
    display: inline-flex; align-items: center; justify-content: center;
    width: 44px; height: 44px; padding: 0; margin-left: auto;
    background: transparent; border: 1px solid var(--slate-dim); cursor: pointer;
    transition: border-color .25s ease;
  }
  .nav-toggle:hover { border-color: var(--amber); }
  .nav-toggle-bars, .nav-toggle-bars::before, .nav-toggle-bars::after {
    display: block; width: 17px; height: 1.5px; background: var(--ink);
    transition: transform .25s ease, opacity .2s ease;
  }
  .nav-toggle-bars { position: relative; }
  .nav-toggle-bars::before, .nav-toggle-bars::after { content: ""; position: absolute; left: 0; }
  .nav-toggle-bars::before { top: -5.5px; }
  .nav-toggle-bars::after { top: 5.5px; }
  .is-open .nav-toggle-bars { background: transparent; }
  .is-open .nav-toggle-bars::before { transform: translateY(5.5px) rotate(45deg); }
  .is-open .nav-toggle-bars::after { transform: translateY(-5.5px) rotate(-45deg); }

  .nav-links {
    position: absolute; left: 0; right: 0; top: 100%;
    flex-direction: column; align-items: stretch; gap: 0;
    /* Fully opaque: at .97 the hero ghosted through the open menu. */
    background: var(--abyss);
    border-bottom: 1px solid var(--hair);
    padding: 8px var(--gutter) 22px;
    display: none;
  }
  .nav.is-open .nav-links { display: flex; }
  .nav-links > a {
    padding: 15px 0; border-bottom: 1px solid var(--hair); border-top: none;
    font-size: 12px;
  }
  .nav-links > a:hover { border-bottom-color: var(--amber); }
  .nav-links > a.btn {
    margin-top: 18px; justify-content: center; padding: 14px 20px;
    border: 1px solid var(--amber); border-bottom: 1px solid var(--amber);
  }
}

@media (prefers-reduced-motion: reduce) {
  .nav-toggle-bars, .nav-toggle-bars::before, .nav-toggle-bars::after { transition: none; }
}

.hero {
  position: relative; overflow: hidden; padding: 110px 0 0;
  background-image:
    linear-gradient(rgba(24,38,54,.5) 1px, transparent 1px),
    linear-gradient(90deg, rgba(24,38,54,.5) 1px, transparent 1px);
  background-size: 70px 70px;
}
.hero::before {
  content: ""; position: absolute; inset: 0;
  background: radial-gradient(ellipse 70% 60% at 20% 10%, rgba(47,124,130,.15), transparent 70%);
  pointer-events: none;
}
/* Hero: the headline on the left, what we actually do on the right. */
.hero-grid {
  position: relative; z-index: 2;
  display: grid; grid-template-columns: minmax(0, 1fr) 310px;
  gap: 70px; align-items: end;
}
.hero-inner { max-width: 900px; }

.hero-pillars { display: flex; flex-direction: column; padding-bottom: 4px; }
.hero-pillars .eyebrow { margin-bottom: 18px; }
.pillar {
  display: grid; grid-template-columns: 30px 1fr; gap: 12px; align-items: start;
  padding: 15px 0; border-top: 1px solid var(--hair); text-decoration: none;
  transition: border-color .25s ease;
}
.pillar:last-child { border-bottom: 1px solid var(--hair); }
.pillar-num {
  font-family: var(--mono); font-size: 11px; letter-spacing: .14em;
  color: var(--amber); padding-top: 3px;
}
.pillar-name {
  font-size: 15.5px; font-weight: 500; color: var(--ink);
  line-height: 1.35; letter-spacing: -.006em; transition: color .25s ease;
}
.pillar:hover { border-top-color: var(--amber); }
.pillar:hover .pillar-name, .pillar:focus-visible .pillar-name { color: var(--amber-br); }

@media (max-width: 1100px) {
  .hero-grid { grid-template-columns: 1fr; gap: 54px; align-items: start; }
  .hero-pillars { max-width: 420px; }
}
.hero h1 {
  font-weight: 700; font-size: clamp(40px, 6vw, 74px); line-height: 1.02;
  letter-spacing: -.025em; margin: 26px 0;
}
.hero h1 span { color: var(--amber-br); }
.hero .lede { font-size: 19px; color: var(--slate); max-width: 44ch; margin-bottom: 40px; }
.btn-row { display: flex; gap: 16px; flex-wrap: wrap; }

/* Signature motion: the one animated element on the site. */
.track { position: relative; z-index: 2; margin-top: 96px; padding-bottom: 34px; }
.track svg { width: 100%; height: 56px; display: block; overflow: visible; }
.track-label {
  display: flex; justify-content: space-between; gap: 20px;
  font-family: var(--mono); font-size: 10.5px; letter-spacing: .15em;
  text-transform: uppercase; color: var(--slate); margin-top: 12px;
}
.tp {
  fill: none; stroke: var(--amber); stroke-width: 1.5;
  stroke-dasharray: 900; stroke-dashoffset: 900;
  animation: draw 2.8s cubic-bezier(.2,.7,.3,1) .5s forwards;
}
.tn { fill: var(--amber-br); opacity: 0; animation: appear .5s ease-out 3s forwards; }
.nd { fill: var(--slate-dim); }
@keyframes draw   { to { stroke-dashoffset: 0; } }
@keyframes appear { to { opacity: 1; } }
@media (prefers-reduced-motion: reduce) {
  .tp, .tn { animation: none; stroke-dashoffset: 0; opacity: 1; }
}

/* --- 6. Sections and bands ----------------------------------------------- */
section { padding: 104px 0; }
.band-depth { background: var(--depth); }
.band-buff  { background: var(--buff); color: var(--buff-ink); }
.band-buff .eyebrow { color: rgba(34,32,26,.6); }
.band-buff h2, .band-buff h3 { color: var(--buff-ink); }

.sec-head { display: flex; align-items: baseline; gap: 24px; margin-bottom: 56px; }
.sec-head .num { font-family: var(--mono); font-size: 12px; color: var(--amber); letter-spacing: .12em; }
/* Unnumbered section marker: a short amber rule where the number sits. */
.sec-head .num-rule {
  width: 22px; height: 2px; background: var(--amber);
  display: inline-block; transform: translateY(-5px);
}
h2 {
  font-weight: 700; font-size: clamp(28px, 3.4vw, 42px);
  letter-spacing: -.022em; line-height: 1.1; margin-top: 8px;
}
h3 { font-weight: 700; font-size: 19px; letter-spacing: -.012em; }

/* Storymap lead-in. The walkthrough itself mounts inside .storymap-mount at
   build step 3; until then the slot carries the lead-in copy and a link out to
   the standalone page. */
.storymap-lead { max-width: 62ch; }
.storymap-lead h2 { margin-bottom: 26px; }
.storymap-lead p { color: var(--slate); font-size: 18px; margin-bottom: 20px; }
.storymap-lead p strong { color: var(--ink); font-weight: 500; }
.storymap-lead .btn { margin-top: 22px; }
.storymap-aside {
  margin-top: 30px; padding-top: 16px; border-top: 1px solid var(--hair);
  font-family: var(--mono); font-size: 11.5px; letter-spacing: .06em;
  color: var(--slate);
}
.storymap-aside a { color: var(--amber-br); text-decoration: none; border-bottom: 1px solid transparent; }
.storymap-aside a:hover { border-bottom-color: var(--amber); }

/* Embedded in the homepage: the walkthrough runs full bleed inside the section,
   and its banner has to clear the sticky site header. */
.storymap-section { padding-bottom: 0; }
.storymap-section .wrap { margin-bottom: 78px; }
.storymap-section .storymap { --storymap-top: 74px; }
@media (max-width: 900px) { .storymap-section .storymap { --storymap-top: 74px; } }

/* --- 7. Underline-led blocks (no boxes, no cards, no panels) ------------- */
.cols3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 54px; }
@media (max-width: 900px) { .cols3 { grid-template-columns: 1fr; gap: 44px; } }

.block .idx {
  font-family: var(--mono); font-size: 11px; color: var(--amber);
  letter-spacing: .14em; display: block; margin-bottom: 16px;
}
.band-buff .block .idx { color: var(--amber-ink); }
.block h3 {
  padding-bottom: 14px; border-bottom: 2px solid var(--ink);
  display: block; margin-bottom: 18px; line-height: 1.25;
}
/* Hold the rules on one line across the columns when a heading wraps. Two
   lines at line-height 1.25 is 2.5em; box-sizing is border-box, so the
   padding above the rule has to be added on. Grid layouts only. */
@media (min-width: 901px) {
  .cols3 .block h3 { min-height: calc(2.5em + 14px); }
}
.band-buff .block h3 { border-bottom-color: var(--buff-ink); }
.block p { color: var(--slate); font-size: 15.5px; }
.band-buff .block p { color: rgba(34,32,26,.76); }
.block ul { list-style: none; margin-top: 20px; }
.block li {
  font-family: var(--mono); font-size: 11.5px; letter-spacing: .03em;
  color: var(--slate); padding: 6px 0 6px 16px; position: relative; line-height: 1.5;
}
.band-buff .block li { color: rgba(34,32,26,.6); }
.block li::before {
  content: ""; position: absolute; left: 0; top: 14px;
  width: 7px; height: 1px; background: var(--amber);
}

/* Extended capability sits below the three core domains in the hierarchy.
   Thinner rule, smaller type, dimmer heading. */
.cols3.minor { gap: 46px; }
.minor .block h3 {
  font-size: 16px; color: var(--slate);
  padding-bottom: 12px; border-bottom: 1px solid var(--slate-dim); margin-bottom: 16px;
}
@media (min-width: 901px) {
  .cols3.minor .block h3 { min-height: calc(2.5em + 12px); }
}
.minor .block p { font-size: 14.5px; }
.sec-head.minor-head { margin-bottom: 44px; }
.sec-head.minor-head h2 { font-size: clamp(22px, 2.4vw, 30px); }

.callout { margin-top: 64px; padding-top: 26px; border-top: 2px solid var(--amber); max-width: 80ch; }
.callout h3 { margin-bottom: 12px; }
.callout p { color: var(--slate); font-size: 16px; }

/* --- 8. About and contact ------------------------------------------------ */
.about p { color: var(--slate); font-size: 18px; margin-bottom: 22px; max-width: 66ch; }
.about p strong { color: var(--ink); font-weight: 500; }

.contact-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 80px; align-items: start; }
.contact-copy p { color: var(--slate); font-size: 17px; margin-bottom: 20px; max-width: 44ch; }
.contact-direct {
  margin-top: 34px; padding-top: 20px; border-top: 2px solid var(--amber);
  font-family: var(--mono); font-size: 13px; color: var(--slate);
}
.contact-direct a { color: var(--amber-br); text-decoration: none; }
.contact-direct a:hover { text-decoration: underline; }

form { display: grid; }
.field { border-bottom: 1px solid var(--hair); padding: 16px 0 10px; transition: border-color .2s; }
.field:focus-within { border-bottom-color: var(--amber); }
.field label {
  display: block; font-family: var(--mono); font-size: 10.5px;
  letter-spacing: .15em; text-transform: uppercase; color: var(--slate); margin-bottom: 8px;
}
.field input, .field textarea, .field select {
  width: 100%; background: transparent; border: none; color: var(--ink);
  font-family: var(--font); font-size: 16px; padding: 4px 0; resize: vertical;
}
.field input:focus, .field textarea:focus, .field select:focus { outline: none; }
.field select option { background: var(--depth); color: var(--ink); }
form .btn { margin-top: 34px; justify-self: start; }
.form-note {
  font-family: var(--mono); font-size: 11px; color: var(--slate);
  margin-top: 20px; letter-spacing: .05em;
}
.field-trap { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.form-status {
  font-family: var(--mono); font-size: 12px; letter-spacing: .04em;
  line-height: 1.7; margin-top: 20px; max-width: 46ch; color: var(--slate);
}
.form-status:empty { margin-top: 0; }
.form-status[data-state="ok"]    { color: var(--amber-br); }
.form-status[data-state="error"] { color: var(--warn); }
@media (max-width: 900px) { .contact-grid { grid-template-columns: 1fr; gap: 48px; } }

/* --- 9. Footer and reveal ------------------------------------------------ */
footer { border-top: 1px solid var(--hair); padding: 46px 0 58px; }
.foot {
  display: flex; justify-content: space-between; align-items: flex-start;
  gap: 32px; flex-wrap: wrap;
}
.foot .lockup { --mark: 32px; color: var(--slate); }
.foot-links { display: flex; gap: 26px; flex-wrap: wrap; }
.foot-links a {
  font-family: var(--mono); font-size: 11px; letter-spacing: .13em;
  text-transform: uppercase; color: var(--slate); text-decoration: none;
  border-bottom: 1px solid transparent; padding-bottom: 2px;
  transition: color .2s, border-color .2s;
}
.foot-links a:hover { color: var(--ink); border-bottom-color: var(--amber); }
.foot-legal {
  font-family: var(--mono); font-size: 11px; color: var(--slate);
  letter-spacing: .07em; line-height: 1.9; text-align: right;
}
@media (max-width: 760px) { .foot-legal { text-align: left; } }

/* Keyboard skip link, visible only on focus. */
.skip-link {
  position: absolute; left: -9999px; top: 0; z-index: 100;
  font-family: var(--mono); font-size: 11px; letter-spacing: .12em;
  text-transform: uppercase; text-decoration: none;
  background: var(--amber); color: var(--abyss); padding: 12px 20px;
}
.skip-link:focus { left: 0; }

.rv { opacity: 0; transform: translateY(18px); transition: opacity .7s ease, transform .7s ease; }
.rv.in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) { .rv { opacity: 1; transform: none; } }

/* --- 10. Storymap -------------------------------------------------------- */
.storymap { --storymap-top: 0px; }

.banner {
  position: sticky; top: var(--storymap-top); z-index: 60;
  background: rgba(10,14,26,.94); backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--hair);
  display: flex; align-items: center; justify-content: space-between;
  padding: 12px 5vw; gap: 20px;
}
.banner .lbl {
  font-family: var(--mono); font-size: 10.5px; letter-spacing: .14em;
  text-transform: uppercase; color: var(--slate);
}
.banner .lbl b { color: var(--amber-br); font-weight: 500; }
.skip {
  font-family: var(--mono); font-size: 10.5px; letter-spacing: .12em;
  text-transform: uppercase; color: var(--ink); text-decoration: none;
  border: 1px solid var(--slate-dim); padding: 9px 16px; white-space: nowrap;
  transition: background .25s, color .25s, border-color .25s;
}
.skip:hover, .skip:focus-visible { background: var(--amber); color: var(--abyss); border-color: var(--amber); }

.storymap-intro { padding: 16vh 5vw 12vh; max-width: 760px; margin: 0 auto; }
.storymap-intro h1 {
  font-size: clamp(32px, 5vw, 58px); font-weight: 700;
  letter-spacing: -.025em; line-height: 1.05; margin: 22px 0;
}
.storymap-intro h1 span { color: var(--amber-br); }
.storymap-intro p { font-size: 18px; color: var(--slate); margin-top: 18px; }
.storymap-intro p strong { color: var(--ink); font-weight: 500; }

.storymap-closing {
  padding: 10vh 5vw 14vh; max-width: 760px; margin: 0 auto;
  font-family: var(--mono); font-size: 12px; letter-spacing: .05em;
  color: var(--slate); line-height: 1.95;
}

/* ---- stage --------------------------------------------------------------- */
.scrolly { position: relative; }
.stage { position: sticky; top: 0; height: 100vh; width: 100%; }
.stage-scene { position: absolute; inset: 0; }
.globe { width: 100%; height: 100%; display: block; }
.network { width: 100%; height: 100%; display: block; }

/* Track key. Only the styles present in the current beat are listed. */
.globe-key {
  position: absolute; left: 5vw; bottom: calc(5vh + 34px);
  display: flex; flex-direction: column; gap: 9px;
  pointer-events: none;
}
.key-row {
  display: flex; align-items: center; gap: 11px;
  font-family: var(--mono); font-size: 10.5px; letter-spacing: .11em;
  text-transform: uppercase; color: var(--slate); white-space: nowrap;
}
.key-swatch { width: 26px; flex: none; border-top: 2px solid var(--slate); }
.key-swatch.is-authentic   { border-top-color: var(--track-authentic); }
.key-swatch.is-manipulated { border-top: 2px dashed var(--track-manipulated); }
.key-swatch.is-rfgl        { border-top: 2px dotted var(--track-rfgl); }
.key-swatch.is-vessel-y    { border-top-color: var(--track-vessel-y); }
@media (max-width: 760px) {
  .globe-key { font-size: 10px; max-width: 62vw; }
  .key-row { white-space: normal; }
}

.readout {
  position: absolute; left: 5vw; bottom: 5vh;
  font-family: var(--mono); font-size: 10.5px; letter-spacing: .12em;
  color: var(--slate); text-transform: uppercase; pointer-events: none;
}
.readout b { color: var(--amber); font-weight: 400; }

/* ---- network diagrams ---------------------------------------------------- */
/* Element opacity is driven per node by the scene, so nothing here animates. */
.network text { font-family: var(--mono); fill: var(--slate); }
.net-label { font-size: 15px; letter-spacing: .11em; fill: var(--ink); }
.net-sub { font-size: 11.5px; letter-spacing: .11em; fill: var(--slate); }
.net-note {
  font-size: 11.5px; letter-spacing: .16em; text-transform: uppercase; fill: var(--slate);
}

.net-edge { stroke: var(--slate-dim); stroke-width: 1; }
.net-edge.is-dashed { stroke-dasharray: 6 7; }
.net-edge.is-flagged { stroke: var(--alert); stroke-width: 1.6; }

/* The link from the hull to each identity it has traded under. */
.net-edge.is-identity { stroke-width: 1.5; stroke-dasharray: 5 5; }
.net-edge.is-tone-grand { stroke: var(--identity-grand); }
.net-edge.is-tone-sea   { stroke: var(--identity-sea); }
.net-edge.is-tone-volga { stroke: var(--identity-volga); }

.net-node circle, .net-node .net-glyph { fill: var(--net-clean); }
.net-node.is-flagged circle, .net-node.is-flagged .net-glyph { fill: var(--alert); }
.net-node.is-flagged .net-label { fill: var(--alert); }
.net-node.is-former circle { fill: var(--amber); }
.net-node.is-tone-grand circle { fill: var(--identity-grand); }
.net-node.is-tone-sea   circle { fill: var(--identity-sea); }
.net-node.is-tone-volga circle { fill: var(--identity-volga); }
.net-node.is-tone-grand .net-label { fill: var(--identity-grand); }
.net-node.is-tone-sea   .net-label { fill: var(--identity-sea); }
.net-node.is-tone-volga .net-label { fill: var(--identity-volga); }
.net-node.is-client rect { fill: none; stroke: var(--ink); stroke-width: 2; }
.net-node.is-holding .net-glyph-outline { fill: none; stroke: var(--ink); stroke-width: 2; }
.net-node.is-holding .net-glyph { fill: var(--ink); opacity: .55; }

/* On wide screens the diagram is held to a column on the left, so the beat
   panel on the right never covers part of it. */
@media (min-width: 1000px) {
  .network { width: 60%; }
  .step.is-network .card { margin-left: auto; }
}

.net-box rect { fill: none; stroke: var(--amber); stroke-width: 2; }
.net-box-label {
  font-size: 11.5px; letter-spacing: .16em; text-transform: uppercase; fill: var(--amber);
}
.net-box-text { font-size: 15px; letter-spacing: .04em; fill: var(--ink); }

/* The portrait variant uses a narrower viewBox, so nominal type has to grow to
   land at the same rendered size. */
.network[data-variant="portrait"] .net-label { font-size: 21px; }
.network[data-variant="portrait"] .net-sub { font-size: 16px; }
.network[data-variant="portrait"] .net-note { font-size: 16px; }
.network[data-variant="portrait"] .net-box-label { font-size: 16px; }
.network[data-variant="portrait"] .net-box-text { font-size: 20px; }
.network[data-variant="portrait"] .net-edge { stroke-width: 1.4; }

/* ---- beat panels --------------------------------------------------------- */
.steps { position: relative; z-index: 3; pointer-events: none; }
.step { min-height: 105vh; display: flex; align-items: center; padding: 0 5vw; }
.card {
  pointer-events: auto; max-width: 460px;
  background: rgba(10,14,26,.9); backdrop-filter: blur(8px);
  border-left: 2px solid var(--amber); padding: 28px 30px 30px;
  opacity: .25; transform: translateY(14px);
  transition: opacity .5s ease, transform .5s ease;
}
.step.on .card { opacity: 1; transform: none; }
.step:nth-child(even) .card { margin-left: auto; }
.card .beat {
  font-family: var(--mono); font-size: 10.5px; letter-spacing: .16em;
  color: var(--amber); text-transform: uppercase; display: block; margin-bottom: 12px;
}
.card h3 { font-size: 22px; font-weight: 700; letter-spacing: -.02em; line-height: 1.15; margin-bottom: 14px; }
.card p { font-size: 15px; color: var(--slate); }
.card p + p { margin-top: 14px; }
.card p strong { color: var(--ink); font-weight: 500; }
@media (prefers-reduced-motion: reduce) { .card { opacity: 1; transform: none; } }

.beat-quote {
  margin-top: 20px; padding-left: 18px; border-left: 1px solid var(--amber);
}
.beat-quote p { color: var(--ink); font-size: 14.5px; }

/* The limitation blocks are the reason the walkthrough persuades, so they are
   set apart from the body copy and given their own tone. */
.beat-limits {
  margin-top: 22px; padding-top: 16px; border-top: 1px solid var(--hair);
}
.beat-limits-label {
  display: block; font-family: var(--mono); font-size: 9.5px;
  letter-spacing: .16em; text-transform: uppercase;
  color: var(--warn); margin-bottom: 8px;
}
.beat-limits p { color: var(--warn); font-size: 14px; }

@media (max-width: 760px) {
  .card { max-width: none; }
  .step:nth-child(even) .card { margin-left: 0; }
}