/* =====================================================================
   BLOG-LEARN-THEME.CSS — brings every page Mark owns other than the
   homepage onto the dark, cinematic design language shipped there
   (business.html + this same assets/home/ directory). Started
   2026-08-18 (Wren) scoped to /blog, /learn and the 19 posts; widened
   2026-08-18 the same night to agents/team/ai-comparison/visualizers/
   consulting ("five more pages join the theme"); widened again
   2026-08-19 (Wren, on Jarvis's dispatch) to /talk, and — the part the
   name no longer describes — to the STRUCTURE, not just the colour.

   MARK, 2026-08-19, after the 08-18 pass: he had asked for pages to move
   "to the new theme... as they are on the old theme and layout" and got
   exactly that — new colours, old layout. The header was the clearest
   tell: every one of these pages still opened on a typed terminal block
   ("Mark Dalton" over four ~$-prefixed command spans, blinking cursor)
   while the homepage carries one clean line, "MARK DALTON [ V.1 ]". That
   is a STRUCTURAL difference a palette swap cannot fix — see the
   WORDMARK and MOBILE DISCLOSURE sections below, both new 2026-08-19,
   both markup-and-CSS rather than CSS-only.

   THE ORIGINAL 2026-08-18 REASONING FOR WHY THIS IS A NEW FILE, not an
   edit to palette.css / site.<hash>.css, still holds and widens with the
   file: those two are shared by every page in scope PLUS salon.html,
   defense.html and projects.html, which this job explicitly excludes
   (other people's businesses, and a locked decision, respectively).
   Editing them would re-theme pages nobody asked to change. This file
   changes nothing there — it is the LAST stylesheet in <head> on every
   page that links it, after the page's own inline <style> block. Same
   specificity, later wins — every rule below overrides the shared files
   without editing them.

   WHAT THIS DOES:
     1. Forces the site's own dark palette permanently — palette.css's
        dark :root values, restated so no visitor's OS light preference
        can switch them back (that switch is the actual bug being fixed).
        The hex values are copied from palette.css, not reinvented, so
        every contrast ratio already documented there still holds.
     2. Self-hosts the homepage's InterVar variable font and points
        --sans at it, so headings and body type match business.html
        instead of the generic system-ui stack.
     3. Restyles the shared topbar (.brand/.nav-links/.tt/.tt-cta) to the
        homepage's plain-text, bracket-accented nav language, in place of
        the pill-chip menu.
     4. Sharpens --btn-radius (14px -> 4px) and the one .cta button
        learn.html carries (its newsletter signup) to match the
        homepage's flatter, sharper geometry.
     5. NEW 2026-08-19 — replaces the typed-terminal wordmark with the
        homepage's plain "NAME [ V.1 ]" line. This one needed a markup
        change too: see the WORDMARK comment below for why no stylesheet
        alone can do it.
     6. NEW 2026-08-19 — a real native <details> mobile menu, matching
        business.html's own build, in place of site.css's old answer
        (let the nav wrap onto several rows). See the MOBILE DISCLOSURE
        comment below.

   WHAT THIS DELIBERATELY DOES NOT TOUCH: the dozens of page-local,
   hand-styled components inside individual posts (chart frames, segment
   bars, swatches, lane tracks, pull-quotes) each carry their own
   border-radius, picked for that post's own diagram. Reshaping all of
   them was scoped out — high risk of breaking a specific post's layout
   for a cosmetic radius nobody would consciously notice next to real
   content, and blog is explicitly legibility-first. Same reasoning for
   the homepage's blur-resolve reveal-on-scroll animation and its
   corner-bracket card language elsewhere on the page: not brought in
   here, because a page of long-form text does not want anything
   fading in as the reader scrolls past it.

   No build step. Self-hosted. Everything below reads var()s already
   defined by palette.css / site.<hash>.css — load order (this file
   last) is what makes it work, not anything fancier.
   ===================================================================== */

@font-face{
  font-family:"InterVar";
  src:url("vendor/inter-variable.woff2") format("woff2-variations");
  font-weight:100 900;
  font-style:normal;
  font-display:swap;
}

:root{
  color-scheme: dark;

  /* ---- palette.css's DARK block, restated verbatim (not new numbers) so
     it always wins over that file's own @media(prefers-color-scheme:light)
     block, regardless of the visitor's OS setting.

     RE-POINTED WITH IT, 2026-08-19. Mark, twice: "the site STILL doesn't
     match the home page in color and style." palette.css was moved onto the
     homepage's neutral values the same morning — and moving it alone changed
     NOTHING VISIBLE, because this block loads after it and restates every one
     of those tokens. Measured on a preview deploy: --accent came through
     (this file never named it) while --bg and --ink did not, which is exactly
     the signature of a later restatement winning.
     That is the trap in "restated verbatim": it is only true on the day it is
     written, and nothing enforces it afterwards. If palette.css moves again,
     THIS BLOCK MOVES WITH IT OR THE MOVE IS INERT. ---- */
  --bg:         #000000;
  --bg-2:       #050509;
  --bg-3:       #08090d;
  --panel:      #050509;

  --ink-bright: #ffffff;
  --ink:        #ffffff;
  --ink-read:   #b0b0b0;
  --ink-dim:    #9aa0a8;
  --ink-faint:  #5c6169;
  --ink-ghost:  #34373c;

  --signal:     #8fd0e8;
  --accent:     #8fd0e8;
  --accent-dim: #4d7688;

  --line:       rgba(255,255,255,.09);
  --line-bright:rgba(255,255,255,.18);
  --line-edge:  rgba(255,255,255,.18);
  --line-ui:    #546a73;
  --focus:      #ffffff;

  --amber:      #ffc36b;
  --amber-ink:  #ffd9a0;
  --amber-dim:  #d8b478;

  --red:        #ff3b30;
  --red-ink:    #ff8a80;
  --red-pale:   #ffd2cf;
  --grn:        #46d17a;
  --grn-ink:    #8ff0b4;
  --good:       var(--grn-ink);
  --bad:        var(--red-pale);
  --green:      var(--grn);

  --navy:       #0b2d50;

  --topbar-bg:      rgba(0,0,0,.62);
  --tt-bg:          transparent;
  --tt-border:      transparent;
  --tt-ink:         #9aa0a8;
  --tt-signal:      #87cddd;
  --tt-on-signal:   #02060d;
  --tt-name:        #ffffff;
  --tt-strap:       #7d8f96;
  --tt-accent:      #46d17a;
  --tt-strap-hover: #ffffff;
  --tt-cta-hover-bg:#8fd0e8;

  --cta2-bg:        rgba(213,239,255,.1);
  --cta2-bg-hover:  rgba(213,239,255,.18);
  --cta-bg:         var(--ink);
  --cta-ink:        var(--navy);
  --cta-hover-bg:   #ffffff;

  /* ---- geometry: sharper, matching the homepage's bracket language.
     14px -> 4px. Only .nav-links/.topbar .tt/.cta/.cta-secondary read
     this token (checked); nothing inside a post's own diagrams does. ---- */
  --btn-radius: 4px;

  /* ---- type: the homepage's font, same token name every component on
     this file's pages already reads via var(--sans). ---- */
  --sans: "InterVar", system-ui, -apple-system, "Segoe UI", sans-serif;
}

/* =====================================================================
   NAV — plain-text links + bracket CTA, matching assets/home/style.css's
   .topbar/.word/.btn. Markup unchanged (.brand/.nav-links/.tt/.tt-cta);
   only these rules move.
   ===================================================================== */
.topbar{
  background:var(--topbar-bg);
  -webkit-backdrop-filter:blur(14px) saturate(1.1);
  backdrop-filter:blur(14px) saturate(1.1);
  border-bottom:1px solid var(--line);
}
.brand b{
  font-weight:700;letter-spacing:.01em;text-transform:uppercase;font-size:15px;
}
.brand span{
  letter-spacing:.06em;
}
.nav-links{
  background:transparent;border:0;border-radius:0;gap:22px;padding:0;
}
.topbar .tt{
  padding:0;min-height:auto;line-height:1;border-radius:0;
  font:500 13px/1 var(--sans);letter-spacing:.01em;color:var(--tt-ink);
}
.topbar .tt:hover{color:#fff;background:transparent}
.topbar .tt:focus-visible{
  color:#fff;background:transparent;outline:2px solid #fff;outline-offset:3px;
}
.topbar .tt[aria-current="page"]{color:#fff}

/* THE CTA — the homepage's bracket-cornered .btn.primary, reused here
   rather than re-derived: white fill, black text, corner brackets,
   uppercase tracked mono label, hover to the icy accent. */
.topbar .tt.tt-cta{
  position:relative;background:#fff;color:#000;border:1px solid #fff;
  padding:11px 18px;font:600 11.5px/1 var(--mono);letter-spacing:.1em;
  text-transform:uppercase;
}
.topbar .tt.tt-cta:hover,.topbar .tt.tt-cta:focus-visible,
.topbar .tt.tt-cta[aria-current="page"]{
  background:var(--tt-cta-hover-bg);border-color:var(--tt-cta-hover-bg);color:#000;
}
.topbar .tt.tt-cta::before,.topbar .tt.tt-cta::after{
  content:"";position:absolute;width:6px;height:6px;border-color:#000;
  border-style:solid;opacity:.55;pointer-events:none;
}
.topbar .tt.tt-cta::before{top:-1px;left:-1px;border-width:1px 0 0 1px}
.topbar .tt.tt-cta::after{bottom:-1px;right:-1px;border-width:0 1px 1px 0}
@media(max-width:620px){
  .topbar .tt.tt-cta{padding:9px 14px}
}

/* THE LOGIN CONTROL -- 2026-08-19, Mark: "change 'AI SYSTEM' in the top right
   to Login buttong". Same rule as its twin in assets/home/style.*.css, which
   is the home page's copy; if one moves, move both.

   SECONDARY ON PURPOSE, and this is the whole judgement in it. "Let's talk" is
   the conversion and is solid white. A second filled button beside it splits
   the ask in two and neither wins. So this is the ghost variant of the same
   control language -- identical type, padding and corner marks, outline
   instead of fill -- which reads as utility rather than as a competing call to
   action.

   currentColor on the corner marks rather than a fixed hex, so they follow the
   label through the hover into the accent instead of staying black on a
   transparent ground, where they would simply vanish. */
.topbar .tt.tt-login{
  position:relative;background:transparent;color:var(--ink);
  border:1px solid var(--line-bright);
  padding:11px 18px;font:600 11.5px/1 var(--mono);letter-spacing:.1em;
  text-transform:uppercase;
}
.topbar .tt.tt-login:hover,.topbar .tt.tt-login:focus-visible{
  border-color:var(--tt-cta-hover-bg);color:var(--tt-cta-hover-bg);
}
.topbar .tt.tt-login::before,.topbar .tt.tt-login::after{
  content:"";position:absolute;width:6px;height:6px;border-color:currentColor;
  border-style:solid;opacity:.55;pointer-events:none;
}
.topbar .tt.tt-login::before{top:-1px;left:-1px;border-width:1px 0 0 1px}
.topbar .tt.tt-login::after{bottom:-1px;right:-1px;border-width:0 1px 1px 0}
@media(max-width:620px){
  .topbar .tt.tt-login{padding:9px 14px}
}

/* =====================================================================
   WORDMARK — 2026-08-19, Wren, on Jarvis's dispatch ("bring the DESIGN
   across, not just the colours"). This file already restyled the nav
   links and CTA to the homepage's language; the wordmark itself was
   untouched, so every one of these 27 pages still typed the old terminal
   block business.html dropped weeks ago: "Mark Dalton" over four ~$-
   prefixed command spans (ai-infrastructure-architect / claude / hermes /
   openai) with a blinking cursor block on the last line. Two different
   identity treatments on two halves of one site is the exact complaint —
   the homepage carries one clean line, "MARK DALTON [ V.1 ]", nothing
   typed, nothing blinking.

   MARKUP CHANGED THIS TIME, not just CSS, because the old strapline was
   real DOM content (~$ is a ::before, but the four words are text nodes)
   -- no stylesheet can turn "ai-infrastructure-architect" into "[ V.1 ]".
   The <a class="brand"> anchor across all 27 files now reads:
     <a class="brand" href="/"><b>Mark Dalton</b><span class="v">[ V.1 ]</span></a>
   — the same two-node shape as business.html's own .word/.v, so the rules
   below are close copies of assets/home/style.css's .topbar .word/.v
   rather than new numbers. .brand keeps its class name (nothing else on
   this file or site.css needs renaming) but every property that used to
   build the typed-terminal look is overridden flat: no flex-column, no
   "~$" pseudo-element, no cursor block. */
.brand{
  display:flex;align-items:baseline;gap:8px;flex-direction:row;
  padding:4px 2px;min-height:44px;
}
.brand b{
  font:700 14px/1 var(--sans);letter-spacing:.01em;text-transform:uppercase;
  color:#fff;
}
.brand .v{
  font:600 9px/1 var(--mono);letter-spacing:.12em;color:var(--ink-faint);
}
.brand span::before,.brand span::after{content:none}
/* .brand span:last-child::after (site.css's cursor block, and the two
   inline copies on ai-comparison.html/consulting.html carry the same
   rule) OUTRANKS the pair above on specificity alone (0,2,2 vs 0,1,2 --
   the :last-child pseudo-class counts as a second class), so load order
   does not save it: named explicitly, at matching specificity, so this
   file's later position in <head> is what decides it. Left unfixed this
   still draws a 6x11px accent-coloured block after "[ V.1 ]" on every
   page — the exact blinking-caret look business.html deleted. */
.brand span:last-child::after{content:none;display:none}
.brand:hover b{color:#fff}
.brand:hover .v{color:var(--ink-dim)}
@media(max-width:620px){
  .brand .v{display:none}
}

/* =====================================================================
   MOBILE DISCLOSURE — 2026-08-19, Wren. site.css's old mobile answer was
   "let .topbar wrap and stack .nav-links onto several rows" (its own
   comment says so, and says why: no JS on this site, so a hamburger
   toggle "was never an option"). That stopped being true the moment
   business.html shipped a real one tonight, native <details>, no JS,
   proven against both engines this box can render with (see that file's
   own head comment for why a forced-visible div failed on one of the
   two and passed on the other for the wrong reason). Bringing the SAME
   mechanism here rather than re-deriving a second one: <summary> is
   already keyboard- and screen-reader-native disclosure, so this needed
   nothing beyond CSS plus the <details class="nav-disclosure"> markup
   already added next to .nav-links in every one of these 27 files.

   The wrapper element inside is a plain <div>, not a second <nav> — the
   outer <nav class="topbar"> is already the page's one navigation
   landmark (several of these files label it aria-label="Main"); nesting
   a second nav with the same label would have put two identically-named
   landmarks in the tree at once, which the homepage's own build avoids
   by using <header class="topbar"> outside two sibling <nav>s instead.
   Renaming the outer element to match wasn't worth the risk across 27
   files with no selector depending on the tag name (checked: nothing
   here or in site.css selects on `nav.topbar`) — a plain <div> gets the
   same result with zero rename risk.

   860px, matching business.html's own breakpoint (not this file's
   existing 620px, which was site.css's number for "the nav chips start
   wrapping" — a different problem this replaces rather than tunes). At
   any width where both this rule and site.css's older max-width:620px
   .nav-links{width:100%} could apply, this file loads after site.css and
   both selectors sit at equal specificity, so this one wins regardless —
   confirmed by the load-order comment at the top of this file. */
@media(max-width:860px){
  .nav-links{display:none}
  .topbar{flex-wrap:nowrap}
  .nav-disclosure{display:block;position:relative}
}
@media(min-width:861px){
  .nav-disclosure{display:none}
}
@media(max-width:860px){
  .nav-disclosure summary{
    list-style:none;cursor:pointer;display:flex;align-items:center;
    justify-content:center;width:44px;height:44px;
    border:1px solid var(--line-edge);border-radius:4px;
    -webkit-tap-highlight-color:transparent;
  }
  .nav-disclosure summary::-webkit-details-marker{display:none}
  .nav-disclosure summary:focus-visible{outline:2px solid #fff;outline-offset:3px}
  .nav-disclosure .bars,.nav-disclosure .bars::before,.nav-disclosure .bars::after{
    content:"";display:block;width:16px;height:1.5px;background:#fff;border-radius:1px;
  }
  .nav-disclosure .bars{position:relative}
  .nav-disclosure .bars::before{position:absolute;left:0;top:-5px}
  .nav-disclosure .bars::after{position:absolute;left:0;top:5px}
  .nav-disclosure[open] summary .bars{background:transparent}
  .nav-disclosure[open] summary .bars::before{top:0;transform:rotate(45deg)}
  .nav-disclosure[open] summary .bars::after{top:0;transform:rotate(-45deg)}
  @media (prefers-reduced-motion:no-preference){
    .nav-disclosure summary .bars::before,.nav-disclosure summary .bars::after{
      transition:transform .16s ease,top .16s ease;
    }
  }
  .nav-disclosure .disclosure-links{
    display:flex;flex-direction:column;
    position:absolute;top:52px;right:0;min-width:230px;
    background:rgba(2,6,13,.96);
    -webkit-backdrop-filter:blur(14px) saturate(1.1);backdrop-filter:blur(14px) saturate(1.1);
    border:1px solid var(--line);border-radius:6px;padding:6px;
  }
  .nav-disclosure .disclosure-links .tt{
    padding:12px 14px;min-height:44px;display:flex;align-items:center;
    border-radius:4px;font:500 14.5px/1 var(--sans);
  }
  .nav-disclosure .disclosure-links .tt:hover,
  .nav-disclosure .disclosure-links .tt:focus-visible{
    color:#fff;background:rgba(255,255,255,.07);
  }
  .nav-disclosure .disclosure-links .tt.tt-cta{margin-top:4px}
}

/* =====================================================================
   BUTTONS — sharpened to match; only learn.html's newsletter .cta uses
   these today, restyled here rather than left rounded and glowing next
   to a sharp-cornered nav.
   ===================================================================== */
.cta{
  border-radius:var(--btn-radius);box-shadow:none;
  border:1px solid var(--ink);
}
.cta:hover,.cta:focus-visible{box-shadow:none}
.cta-secondary{border-radius:var(--btn-radius)}

@media (prefers-reduced-motion:reduce){ *{transition:none!important} }

/* =====================================================================
   HERO ATMOSPHERE — 2026-08-19, Jarvis, on Mark's third asking:
   "review the entire site as it is NOT matching the theme across the
   board" and "preview each page as the site STILL doesn't match the home
   page in color and style."

   WHY THIS FILE ALREADY LOOKED FINISHED AND HE STILL SAW A SEAM. The
   colour tokens, the font stack, the nav and the wordmark were all brought
   onto business.html's values earlier the same day, and every one of those
   landed — measured by rendering all fourteen pages against the live home
   page, they are literally identical now. What was never brought across is
   the thing you notice in the first second: the home page opens on a lit
   particle field with depth and a gradient falling away under the
   headline, and every inner page opened on FLAT BLACK. Same palette,
   different world. That is the mismatch, and no amount of further token
   matching was going to close it.

   NO JAVASCRIPT, AND THAT IS A CONSTRAINT NOT A PREFERENCE — these pages
   ship under a CSP that does not admit script, which is why the home
   page's WebGL halo is deliberately NOT what gets copied. What gets copied
   is its FALLBACK: assets/home/hero-field.svg, the static 760-point field
   Mark himself proposed, plus the same veil gradient. The asset is reused
   byte-for-byte rather than regenerated, so "matching" is literal. It is
   also the exact path Mark's own browser takes on the home page — his
   Chromium has no WebGL — so these pages now match what HE sees there.

   BACKGROUND LAYERS, NOT AN <img>, AND THAT IS THE SECOND ATTEMPT.
   The first version put <img class="hero-field"> into seven files. It
   rendered, and it was WRONG in a way only a screenshot showed: the SVG
   carries a viewBox and no intrinsic width, so as a replaced element its
   painted width tracked the header's HEIGHT — the field ended in two hard
   vertical edges about 200px in from each side, and those edges moved page
   to page because the headers are different heights. background-size:cover
   has no such quirk; it always covers the box. Doing it here also means
   zero markup in any page, so a new page inherits the treatment by having
   a <header> and nothing else.

   IF THE HOME PAGE'S HERO MOVES, THIS BLOCK MOVES WITH IT. Values are
   lifted from style.e3491ec0.css's .hero / .hero-field / .hero .veil /
   .mlabel. Do not hand-tune them here to taste; that drift is what put two
   design systems on one site in the first place.
   ===================================================================== */

header{
  position:relative;
  overflow:hidden;
  padding:clamp(72px,9vw,116px) 0 clamp(56px,7vw,88px);
  /* .hero's own ground, verbatim */
  background:radial-gradient(75% 65% at 50% 15%, #0d1626 0%, #000 72%);
}

/* THE FIELD. mix-blend-mode:screen is what makes it read as light in the
   dark rather than as a grey wash — same as the home page. */
header::before{
  content:"";position:absolute;inset:0;pointer-events:none;
  /* 144%, NOT cover, AND THE NUMBER IS MEASURED — do not round it to
     "cover" and do not tune it by eye.

     hero-field.svg declares viewBox="0 0 1600 1100" but its 760 points only
     occupy x 243.6 → 1356.4, i.e. the middle 69.55% of its own width, with
     a dead ~244px margin down each side. The home page never shows that
     margin because its .hero is 100svh: cover scales the field up until
     the empty sides overflow the viewport and get cropped. These headers
     are a third of that height, so cover scaled it DOWN and painted both
     dead margins straight onto the page — two hard vertical edges about
     200px in from each side, which moved page to page because the headers
     are different heights. That is what a screenshot caught and a CSS diff
     never would have.

     100 / 69.55 = 143.8, rounded to 144%: the populated band is scaled to
     exactly the width of the header and the dead margins fall outside it.
     Height follows the aspect ratio and overflows downward, which is
     correct — the field's density is banked toward the top by design, so
     the top is the part worth showing. IF THE ASSET IS EVER REGENERATED
     WITH A DIFFERENT SPREAD, RE-MEASURE THIS NUMBER. */
  background:url("/assets/home/hero-field.svg") top center / 144% auto no-repeat;
  mix-blend-mode:screen;
}

/* THE VEIL, verbatim from .hero .veil — it is what makes the headline sit
   ON something rather than float over a texture. */
header::after{
  content:"";position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(to bottom, rgba(0,0,0,.05) 0%, rgba(0,0,0,0) 30%,
    rgba(0,0,0,.35) 78%, rgba(0,0,0,.86) 100%);
}

/* Copy rides above both layers. */
header .wrap{position:relative;z-index:2}

/* THE EYEBROW — was 700 13px mono in --signal (icy blue). The home page's
   equivalent (.mlabel) is 600 11px mono in --ink-faint, wrapped in square
   brackets: "[ SYSTEM_READY ]". Brackets are added in CSS rather than in
   the markup of seven pages, so the label text stays plain for screen
   readers and for anyone editing the HTML. */
header .eyebrow{
  font:600 11px/1 var(--mono);letter-spacing:.22em;text-transform:uppercase;
  color:var(--ink-faint);margin-bottom:20px;
}
header .eyebrow::before{content:"[ "}
header .eyebrow::after{content:" ]"}

/* No motion here, so no reduced-motion guard is needed. Stated so the next
   person does not go looking for one. */