/* SITE.CSS — the shared stylesheet for the marketing pages: business, agents,
   team, talk, learn. Built 2026-08-07, Wren, replacing nine near-identical
   copies with one file, on Mark's instruction: "create one and run the entire
   site off it... one per site and keep them in sync."

   WHY THIS EXISTS. Every page used to carry its own <style> block, hand-copied
   from business.html with a comment saying so. Drift was never a risk, it was
   guaranteed: body type sat at 1.0625rem/1.68 on four pages and 1.03rem/1.65 on
   a fifth, and --green was used on five pages but DEFINED on only three — so the
   ~$ prompt glyph and its cursor block rendered with no colour at all on
   business.html and talk.html, live, until this file existed. Reconciling nine
   copies by hand does not fix that class of bug; it only re-hides it until the
   next edit. One file removes the category.

   TWO HOSTS, ONE FILE, PLAIN PATH. markdalton.com (Cloudflare Pages: business,
   agents, team, projects, salon, defense) and ai.markdalton.com (this box:
   talk, learn, index.html) both serve this same file at /assets/site.css. Every
   page links it with a root-relative path, so it is same-origin on BOTH hosts
   and satisfies each host's CSP (`style-src 'self'`) without a cross-origin
   fetch. Do not point one host's pages at the other host's copy of this file —
   that is a cross-origin stylesheet load and the CSP blocks it silently, which
   is exactly the failure this shape exists to avoid.

   KEEPING THE TWO COPIES IDENTICAL IS NOT A MATTER OF REMEMBERING. Edit this
   file, then copy it to BOTH places in the same pass:
     - the box origin serves it from THIS path (markdalton-site/assets/), added
       to the STATIC dict in server.py — see that file's own comment on why the
       filename carries a content hash and what to do when you edit this file.
     - the Cloudflare Pages deploy carries its own copy of this same file at the
       same relative path; Mark deploys that half.
   drift-check.py can (and should) verify the two are byte-identical over HTTP,
   not just on disk — a Pages deploy that silently serves stale or nothing is
   the exact failure this file's own history already produced once tonight.

   WHAT DOES NOT LIVE HERE: page-specific components (business's diagram and
   card grid, agents' and team's own card/tab layouts, talk's and learn's form
   chrome, learn's terminal frame) stay in that page's own trailing <style>
   block, which now carries ONLY what is genuinely unique to that page — no
   token, no reset rule, no nav, no button primitive duplicated ever again.
   Each page's own block says so at its top.

   THE FOUR ACCESSIBILITY FIXES THIS FILE CARRIES FORWARD, all found 2026-08-04
   by Wren by MEASURING rather than by looking, and preserved here verbatim
   rather than re-derived:
     1. FOCUS. A 2px white ring at outline-offset:2px, not outline:none. THE
        OFFSET IS THE MECHANISM — white ON the cyan button is 1.78:1, but offset
        puts the ring on the page ground at 19.53:1, which is why one ring
        colour works everywhere instead of needing a different one per
        component.
     2. --ink-faint is decorative ONLY and must never carry a sentence — it
        measures 3.23:1, under the 4.5:1 body floor. Body and footer text use
        --ink-dim (5.80:1 on --bg, 5.27:1 on --bg-2) or brighter.
     3. Body type is REM, never px — px overrides a visitor's own browser
        font-size setting. (projects.html and index.html, which do not load
        this file, carry the same fix locally — see their own comments.)
     4. FONT STACK ORDER. `ui-sans-serif` and `ui-monospace` are UNSUPPORTED by
        Firefox on Linux — measured, they fall through to the browser's default
        SERIF. `system-ui` and `monospace` resolve properly and lead both
        stacks below; the unsupported names are kept only as later fallbacks
        for browsers that do resolve them, never first. */

/* ---- PALETTE, measured against #030e12 (--bg) unless stated otherwise:
      #ffffff 19.53:1   #d5efff 16.38:1   #87cddd 10.98:1   #b0b0b0 9.00:1
   All clear the 4.5:1 body floor. --ink-faint is 3.23:1 and DECORATIVE ONLY —
   never a sentence in it.
   --ink-dim (#7d8f96) is 5.80:1 against --bg, but is also used on --bg-2
   (#0b1a22) — .card span, .diagram-center span and .diagram-node span all sit
   there, not on --bg. Against --bg-2 it is 5.27:1. Both clear 4.5:1; the real
   headroom on --bg-2 is 0.77, not the 1.30 the old single-surface number
   implied. Re-measure against --bg-2 specifically before darkening this shade.
   --line-ui (#546a73) — UI-BOUNDARY BORDER, added 2026-08-06 (Nadia's fail,
   WCAG 1.4.11). --line composited over --bg is rgb(30,43,49), 1.34:1 — fails
   the 3:1 floor for a resting control border, which is what the nav chips'
   container and the secondary hero CTA rely on at rest. #546a73 measures
   3.43:1 against --bg, with real headroom. Checked and rejected first:
   #4a5f68 2.91:1, #44585f 2.61:1, #3a4c55 2.18:1 — all fail, and #4a5f68 fails
   close enough to look like a pass. Verified in-browser against the real
   composited page background, not the hex. ---- */
:root{
  --bg:#030e12; --bg-2:#0b1a22; --ink:#d5efff; --ink-bright:#ffffff;
  --ink-read:#b0b0b0; --ink-dim:#7d8f96; --ink-faint:#56656c;
  --signal:#87cddd; --navy:#0b2d50; --line:rgba(213,239,255,.13);
  --line-ui:#546a73;
  /* --green — DEFINED HERE ONLY, 2026-08-07. Found by Cyrus while writing
     another page: used on five pages, defined on three, so the ~$ prompt
     glyph and its cursor block in the wordmark had NO colour at all on
     business.html and talk.html, live, until now. Value carried from
     learn.html's own derivation, not re-picked: moved from #7fb069 on Wren's
     call because the old warm hue "read as a survivor rather than a
     decision" once the rest of the palette was retuned. 12.67:1 against --bg,
     and already one of The Room's (index.html) own colours, so the site's hue
     count did not go up by adding it. One line to revert if that call is
     ever wrong. */
  --green:#5ce8b0;
  /* --good / --bad — the two form-state colours, shared by talk.html and
     learn.html's signup. Measured against --bg-2 (#0b1a22), the surface they
     actually sit on, not against --bg: #8fdcb0 (good) 9.14:1, #ffb3a7 (bad)
     8.47:1. Both clear the 4.5:1 body floor with real headroom. Used for text
     and for a 1px border, never as a fill behind dark text. */
  --good:#8fdcb0; --bad:#ffb3a7;
  /* FONT STACKS. system-ui / monospace lead — see fix #4 above. The
     ui-sans-serif / ui-monospace names stay as later fallbacks for browsers
     that do resolve them; they must never lead. */
  --mono:monospace,ui-monospace,"SF Mono",Menlo,Consolas,"DejaVu Sans Mono",monospace;
  --sans:system-ui,ui-sans-serif,-apple-system,"Segoe UI",sans-serif;
  /* BUTTON TOKENS, added 2026-08-06 — Mark handed over a screenshot and named
     the buttons specifically as the thing to match. Pixel-sampled from that
     image (python3/Pillow, not eyeballed): the pale button fill is
     rgb(213,239,255) and its text is rgb(11,45,80) — this page's own --ink
     and --navy, exact, already sitting in this file.
     RADIUS: sampled corner curvature on the reference's hero button (62px
     tall) flattens out ~11px in from the edge, and on its smaller nav chip
     (35px tall) ~5px in — both well under half the button's own height. 14px
     is one shared value rather than two: reads as "generous but not fully
     round" at both sizes, and one token is less to keep in sync than two.
     GLOW is this page's own --signal family (#87cddd) at low alpha, not a new
     hue — sampled fading from rgb(22,53,69) at the button edge down to the
     page's rgb(3,14,19) over roughly 100px. Two stacked shadows: a tight near
     glow and a soft far one, so it reads as light coming off the button
     rather than a flat coloured outline. */
  --btn-radius:14px;
  --btn-glow:0 0 20px 1px rgba(135,205,221,.32),0 14px 34px -12px rgba(135,205,221,.55);
  --btn-glow-hover:0 0 26px 3px rgba(135,205,221,.5),0 16px 38px -10px rgba(135,205,221,.65);
}

*{margin:0;padding:0;box-sizing:border-box}

/* BODY. font-size and line-height are the two numbers that were drifting —
   1.0625rem/1.68 here, matched now by every page that loads this file. rem,
   never px: fix #3 above. */
body{background:var(--bg);color:var(--ink-read);font:400 1.0625rem/1.68 var(--sans);
     -webkit-font-smoothing:antialiased}

/* WRAP. Width is intentionally NOT fixed here — it is the one dimension that
   legitimately differs by page (980px on business/talk, 900px on agents/team,
   840px on learn, to fit its boxed terminal frame), and each page sets it in
   its own trailing <style> block with the reasoning for that page's number.
   Everything else about the column — centring and the fluid side padding — is
   shared and lives here. */
.wrap{max-width:980px;margin:0 auto;padding:0 clamp(20px,5vw,72px)}

a{color:var(--signal)}
.skip{position:absolute;left:-9999px;top:0;background:var(--ink-bright);
      color:var(--bg);padding:10px 16px;z-index:10}
.skip:focus{left:12px;top:12px}

/* TOPBAR — sticky, blurred, with the wordmark on the left and the nav chips on
   the right. FULL-BLEED per Mark's 2026-08-06 call (flush to the browser edge,
   not boxed inside .wrap): padding supplies its own horizontal inset instead.
   blur(10px) against this page's own --bg at 90% opacity, literal rather than
   a color-mix() of the var, because color-mix() is newer than this box's
   "verify, don't assume" bar was checked against when this was written — if
   --bg is ever repointed this rgba needs updating with it. */
.topbar{
  position:sticky;top:0;z-index:20;padding:14px clamp(12px,4vw,16px);
  display:flex;justify-content:space-between;align-items:center;gap:16px;
  background:rgba(3,14,18,.9);
  -webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);
  border-bottom:1px solid var(--line-ui);
}

/* WORDMARK — Mark, 2026-08-06: "can we put my name in the top left hand corner
   and some type of style on the header so that people know what's my site?"
   Name first, then the strapline under it, typed rather than printed — a
   prompt glyph, mono, lowercase and hyphenated the way a real command is. The
   cursor block is STATIC (no blinking caret on every page). It sits on the
   LAST line only (::after on :last-child), and is hidden below 620px where it
   was crowding an already-wrapping menu.
   MARKUP FOR THE WORDMARK IS NOT TOUCHED BY THIS FILE OR BY ANY EDIT THAT
   CITES IT — only its styling. See the boot instructions this page's edit was
   made under. */
.brand{display:flex;flex-direction:column;gap:2px;text-decoration:none;
       padding:4px 2px;min-height:44px;justify-content:center}
.brand b{color:var(--ink-bright);font:700 17px/1.1 var(--sans);
         letter-spacing:-.015em}
.brand span{display:flex;align-items:center;gap:5px;
            color:var(--ink-dim);font:400 10.5px/1 var(--mono);
            letter-spacing:.02em;text-transform:none}
.brand span::before{content:"~$";color:var(--green);font-weight:700}
.brand span:last-child::after{content:"";width:6px;height:11px;background:var(--green);
                   opacity:.55;display:inline-block}
.brand:hover span{color:var(--ink)}
.brand:hover b{color:var(--signal)}
@media(max-width:620px){
  .brand span{display:none}
  .brand b{font-size:15px}
}

/* NAV CHIPS. One rounded panel with its own fill and hairline border — not
   free-floating links, not a border per chip (Mark's explicit call after
   being shown the WCAG 1.4.11 reasoning: "plain text links inside a bordered
   container are text links, not buttons"). Fill/border pixel-sampled off the
   reference screenshot away from any text or button pixel: fill rgb(14,25,31),
   border rgb(49,59,64). --ink-read against this fill is 8.22:1. min-width:0
   overrides the flex-item default so the chip row can wrap on a narrow phone
   instead of forcing .topbar into horizontal overflow. */
.nav-links{
  display:flex;flex-wrap:wrap;align-items:center;gap:2px;padding:6px;
  background:#0e191f;border:1px solid #313b40;border-radius:var(--btn-radius);
  min-width:0;max-width:100%;
}
.topbar .tt{
  display:inline-block;padding:10px 16px;min-height:44px;line-height:24px;
  border-radius:var(--btn-radius);text-decoration:none;
  color:var(--ink-read);font:700 14px/24px var(--sans);letter-spacing:.01em;
}
/* THE NAV'S "LET'S TALK" IS PERMANENTLY LIT — Mark, 2026-08-06: the one action
   in the bar should look like one before anyone touches it. Filled, not
   outlined. Dark text on the pale fill, 10.98:1 — do NOT invert to
   light-on-dark, which is the same note on .cta below: a button that reads as
   a link stops looking pressable. */
.topbar .tt.tt-cta{background:var(--signal);color:#030e12}
.topbar .tt.tt-cta:hover,.topbar .tt.tt-cta:focus-visible{background:#a5dcea;color:#030e12}
.topbar .tt:hover,.topbar .tt:focus-visible{color:var(--bg);background:var(--signal)}
/* aria-current marks the current page in the nav — a colour change alone
   would only signal a sighted user, so the attribute does the announcing and
   this rule does the showing. Only talk.html sets the attribute today; the
   rule lives here so any page that starts doing the same gets it for free. */
.topbar .tt[aria-current="page"]{color:var(--ink-bright)}

header{padding:clamp(44px,7.5vw,80px) 0 40px}
.eyebrow{font:700 13px/1 var(--mono);letter-spacing:.22em;text-transform:uppercase;
         color:var(--signal);margin-bottom:16px}

/* H1. clamp(2.1rem,7vw,4.8rem) at the top of the ramp, clamp(2rem,11vw,2.8rem)
   below 620px where a single vw curve floors out flat. line-height .98.
   A page whose h1 breaks inside a fixed-width frame at this ceiling (learn.html,
   boxed in its terminal chrome) overrides both numbers locally with its own
   reasoning — see that page's own comment. */
h1{font:700 clamp(2.1rem,7vw,4.8rem)/.98 var(--sans);color:var(--ink-bright);
   letter-spacing:-.022em;margin-bottom:26px}
@media(max-width:620px){h1{font-size:clamp(2rem,11vw,2.8rem)}}
.lede{font-size:clamp(17px,1.6vw,19.5px);color:var(--ink);max-width:650px}

/* SECONDARY BUTTON. Dark-filled with a hairline border, not an outline —
   transparent read as a lower-priority ghost button next to the solid
   primary. rgba(213,239,255,.1) is --ink at low alpha, not a new hex. */
.cta-secondary{
  display:inline-block;padding:14px 26px;min-height:44px;
  background:rgba(213,239,255,.1);color:var(--ink);border:1px solid var(--line-ui);
  border-radius:var(--btn-radius);text-decoration:none;font-weight:700;
}
.cta-secondary:hover,.cta-secondary:focus-visible{
  border-color:var(--signal);color:var(--ink-bright);
  background:rgba(213,239,255,.18);
}

/* SECTION RHYTHM. padding clamp(56px,8.5vw,96px) top+bottom, hairline top
   border as the page's own divider convention. */
section{padding:clamp(56px,8.5vw,96px) 0;border-top:1px solid var(--line);
        scroll-margin-top:64px}
h2{font:700 clamp(28px,4vw,54px)/1.05 var(--sans);color:var(--ink-bright);
   margin-bottom:24px;letter-spacing:-.014em}
@media(max-width:620px){h2{font-size:clamp(24px,9vw,34px)}}
h3{font:700 17px/1.3 var(--sans);color:var(--ink);margin:26px 0 8px}
p{margin-bottom:18px;max-width:760px}
p:last-child{margin-bottom:0}
.note{color:var(--ink-dim);font-size:15.5px}

/* PRIMARY BUTTON — Mark handed over a screenshot and named the buttons
   specifically: pale-ice fill, dark navy text, a moderate corner radius, a
   soft cyan glow. Fill/text are var(--ink)/var(--navy) — sampled pixel-for-
   pixel out of the reference and found to already be exact matches to this
   page's own tokens, so the validated 10.98:1 contrast pair carries over
   unchanged. White is what HOVER brightens to, not the resting fill — a
   button that reads as a link (light text, dark rest) stops looking
   pressable. THIS IS THE CANONICAL VERSION; a stale copy on team.html
   (border-radius:3px, no glow, background:var(--signal)) predated the
   2026-08-06 restyle and is retired by loading this file instead. */
.cta{display:inline-block;margin-top:10px;padding:14px 28px;background:var(--ink);
     color:var(--navy);font-weight:700;text-decoration:none;border-radius:var(--btn-radius);
     box-shadow:var(--btn-glow)}
.cta:hover{background:#ffffff;box-shadow:var(--btn-glow-hover)}
.cta:focus-visible{background:#ffffff;box-shadow:var(--btn-glow-hover);
     outline:2px solid #fff;outline-offset:2px}

/* FOOTER. agents.html and team.html already agreed on these numbers;
   learn.html's own copy had drifted to 40px/70ch with no comment explaining
   why, so it is folded in here rather than kept as a third value. */
footer{padding:42px 0 74px;color:var(--ink-dim);font-size:14px;
       border-top:1px solid var(--line)}
footer p{max-width:66ch;margin-bottom:8px}

/* FOCUS — fix #1 above. One ring, every focusable thing, offset onto the page
   ground where it measures 19.53:1 regardless of what sits under the element
   itself. */
a:focus-visible,button:focus-visible,[tabindex]:focus-visible{
  outline:2px solid #fff;outline-offset:2px;border-radius:2px;
}
@media (prefers-reduced-motion: reduce){ *{transition:none!important} }
</content>