/* 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. */

/* ---- TOKENS MOVED, 2026-08-09. Every colour token that used to live in this
   :root now lives in /assets/palette.css, the single source of colour for
   markdalton.com — built the day Mark asked for the board's shading to set
   the theme everywhere. THIS FILE NOW DEPENDS ON THAT ONE LOADING FIRST:
       <link rel="stylesheet" href="/assets/palette.css">
       <link rel="stylesheet" href="/assets/site.<hash>.css">
   in that order, on every page. A page that loads this file without
   palette.css first gets no --bg, no --ink, nothing — the rules below
   reference variables this file no longer defines.
   Contrast numbers for the pairs that matter (--ink-faint, --line-ui against
   both surfaces) are recomputed in palette.css's own closing comment; this
   file does not keep a second copy of them to go stale. ---- */

*{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:var(--topbar-bg);
  -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. */
/* WORDMARK AND NAV COLOURS ARE PINNED TO --tt-*, NOT --ink-bright/--ink-dim/
   --green/--ink/--signal DIRECTLY — added 2026-08-14, the fix for a live
   regression. This morning's light theme in palette.css pinned .topbar's
   background and index.html's/business.html's OWN copies of these rules to
   --tt-*, because the nav bar stays dark in both themes (matching /agents,
   which has no local override at all and always reads dark). This shared
   file was the one place that fix never reached: it still read the general
   tokens straight, which flip pale in light mode while the bar under them
   stayed dark — the wordmark measured 1.1:1, effectively invisible, on
   every one of the 16 pages that load this file instead of carrying their
   own copy. Repointed at the same tokens index.html/business.html already
   use, so all three now agree. See the token comment in palette.css for the
   figures: --tt-ink on --tt-bg 8.22:1, --tt-on-signal on --tt-signal
   10.98:1. */
.brand{display:flex;flex-direction:column;gap:2px;text-decoration:none;
       padding:4px 2px;min-height:44px;justify-content:center}
.brand b{color:var(--tt-name);font:700 17px/1.1 var(--sans);
         letter-spacing:-.015em}
.brand span{display:flex;align-items:center;gap:5px;
            color:var(--tt-strap);font:400 10.5px/1 var(--mono);
            letter-spacing:.02em;text-transform:none}
.brand span::before{content:"~$";color:var(--tt-accent);font-weight:700}
.brand span:last-child::after{content:"";width:6px;height:11px;background:var(--tt-accent);
                   opacity:.55;display:inline-block}
.brand:hover span{color:var(--tt-strap-hover)}
.brand:hover b{color:var(--tt-signal)}
@media(max-width:620px){
  .brand span{display:none}
  .brand b{font-size:15px}
  /* Below 620px the nine chips in .nav-links already wrap onto several
     rows of their own (see .nav-links above) -- but .topbar itself never
     did, so that tall wrapped stack stayed a flex SIBLING of .brand in one
     single row. align-items:center then centred the 44px wordmark against
     the full height of a 5-row chip stack, landing it roughly mid-height
     of the bar, to the left of and level with the chips rather than above
     them -- reading as a floating menu overlapping the name, not a menu
     under it. Letting .topbar wrap puts .nav-links on its own line below
     .brand, which is the layout .nav-links was already built to sit in.
     No JS: this site loads none, on purpose, so a hamburger toggle was
     never an option here -- this is the smaller of the two real choices,
     the other being a horizontally-scrolling nav, which would have hidden
     most of the menu off-screen by default instead of just costing
     vertical space up front. */
  .topbar{flex-wrap:wrap}
  .nav-links{width:100%}
}

/* 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:var(--tt-bg);border:1px solid var(--tt-border);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(--tt-ink);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(--tt-signal);color:var(--tt-on-signal)}
.topbar .tt.tt-cta:hover,.topbar .tt.tt-cta:focus-visible{background:var(--tt-cta-hover-bg);color:var(--tt-on-signal)}
/* HOVER CHANGES THE TEXT, NOT THE CHIP — Mark, 2026-08-07: "on the menu
   only make the text change colors when hover over. Lets talk should stay
   like it is."
   It used to fill the whole chip with the signal colour and invert the
   text, which made every hovered item look like the call to action beside
   it. Ten identical-looking buttons and one of them means something is a
   worse menu than ten plain links and one button. The CTA keeps its fill
   BECAUSE nothing else has one now — that is what makes it read as the
   thing to click.
   Focus is deliberately NOT folded in here. A keyboard user needs a
   visible ring, not a colour shift measured at a contrast nobody checked;
   :focus-visible keeps the existing treatment for exactly that reason. */
.topbar .tt:hover{color:var(--tt-signal);background:transparent}
.topbar .tt:focus-visible{color:var(--tt-on-signal);background:var(--tt-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(--tt-name)}
/* FOUND WHILE FIXING THE LIGHT-THEME REGRESSION, 2026-08-14, and NOT caused
   by it — a live bug in dark mode too, so worth the two lines to fix outright
   rather than leave it. talk.html puts aria-current="page" on the CTA
   ("Let's talk" IS /talk), so both rules above apply to the same element at
   equal specificity (0,0,3,0) and the later one in source order — this one —
   was winning, overriding .tt-cta's own colour with --tt-name. In dark mode
   that put WHITE text on the CTA's pinned light-cyan fill: 1.78:1, fails
   even the large-text floor. .topbar .tt.tt-cta[aria-current="page"] is one
   selector more specific (0,0,4,0) than either rule above, so it wins
   regardless of source order and restores the CTA's own colour — 11.41:1 on
   the pinned fill, same number in both themes since neither token moves.
   talk.html carried its OWN copy of the aria-current rule, which is what let
   this drift in the first place; removed there, this file is now the only
   copy. */
.topbar .tt.tt-cta[aria-current="page"]{color:var(--tt-on-signal)}

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 were sampled pixel-for-pixel out of the
   reference and found to be exact matches to this page's own DARK-theme
   tokens, so the validated 10.98:1 contrast pair carries over unchanged
   there. 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.
   FIXED 2026-08-14: was background:var(--ink);color:var(--navy);hover/focus
   #ffffff — all four DARK-theme literals, unchanged since 2026-08-06 and
   still exactly right there, but never updated when palette.css grew a
   light block on 2026-08-14. index.html and business.html got the same
   button re-pointed at --cta-bg/--cta-ink/--cta-hover-bg that day (see
   palette.css's "Component tokens" comment); this file, which agents.html,
   team.html, talk.html, learn.html, visualizers.html and blog.html all load,
   did not, so on any of those six pages under a light system preference the
   button rendered var(--ink) fill (near-black, #16232b) under var(--navy)
   text (#0b2d50) — dark-on-dark, no visible label. Confirmed by rendering
   agents.html's "Start the training" button before this fix. Pointing at
   the same three tokens the other two pages already use closes the gap
   without introducing a second definition of what "light" means. */
.cta{display:inline-block;margin-top:10px;padding:14px 28px;background:var(--cta-bg);
     color:var(--cta-ink);font-weight:700;text-decoration:none;border-radius:var(--btn-radius);
     box-shadow:var(--btn-glow)}
.cta:hover{background:var(--cta-hover-bg);box-shadow:var(--btn-glow-hover)}
.cta:focus-visible{background:var(--cta-hover-bg);box-shadow:var(--btn-glow-hover);
     outline:2px solid var(--focus);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 in the dark theme regardless of what sits
   under the element itself.
   FIXED 2026-08-14: was outline:2px solid #fff — a literal, not a token, so
   it never moved when palette.css's light block shipped. A white ring offset
   onto the light theme's near-white --bg (#f3f6f8) is close to invisible,
   which silently drops every focusable element's keyboard-focus indicator on
   the six pages that load this file, the moment a visitor's system prefers
   light. var(--focus) carries the light-theme equivalent (#0b0f12, checked
   in palette.css's own light-block comment) so this stays one rule instead
   of needing a second, theme-specific copy. */
a:focus-visible,button:focus-visible,[tabindex]:focus-visible{
  outline:2px solid var(--focus);outline-offset:2px;border-radius:2px;
}
@media (prefers-reduced-motion: reduce){ *{transition:none!important} }
</content>