/* ---------------------------------------------------------------------------
   site.css: the chrome every page on the marketing site shares.

   Before this file existed each page carried its own copy of the block below,
   and the copies had already drifted: namesake.html was missing
   align-items:center on .navlinks, and the three pages disagreed on the width
   at which the nav gap tightens (900 / 820 / 780). The canonical values here
   are the majority ones.

   WHAT THIS FILE DOES NOT COVER, and is not trying to: page-specific layout
   (.hero sizing, .stats, .chapter, .prose, .card, .splash and friends) stays
   inline in the page that uses it. Two pages having a rule with the same NAME
   is not evidence they are the same component. why.html and namesake.html
   both style .stats and they are deliberately different.

   The <nav> MARKUP is still duplicated per page; only its styling lives here.
   Sharing the markup needs JS, a build step, or real routes, and all three
   cost more than 22 lines at this size.

   body.page opts a page into the long-form content treatment (reading
   line-height + the noise wash). index.html is a splash and deliberately
   does not carry the class.
--------------------------------------------------------------------------- */

:root{
  /* --ring (#3f5f83) and --dim (#6f89a8) were removed: both were referenced
     zero times. --ring's value survives as a literal in the logo SVG, which
     cannot read a custom property from a presentation attribute anyway.
     --dim is deliberately NOT kept as an unused token, because it measures 4.04:1 on
     this navy and fails WCAG AA for normal text, and it was reached for twice
     before that was noticed. A palette entry nobody can safely use is a trap,
     not a convenience. */
  --navy:#0E2A47;--navy-soft:#12395f;--teal:#14B8A6;
  --ink:#e8eef5;--muted:#aebfd2;
  /* Inter FIRST. It used to be second, behind Helvetica Neue, which every Mac
     and iPhone has, so Inter was fetched from Google Fonts on every page load
     and never drew a character. document.fonts showed 300/400/500/600/700 all
     "unloaded"; only 800 loaded, because the SVG logo names it directly.
     That also forked the typography by platform: Mac read Helvetica Neue,
     Windows and Android fell through to Inter. Same site, two faces.
     Inter is also the more legible of the two here (x-height 55 vs 52 at
     100px, cap 73 vs 71), and it was drawn for screens rather than adapted from
     print, where Helvetica Neue's lighter weights thin out badly. */
  --font:'Inter','Helvetica Neue','Liberation Sans',Arial,sans-serif;
  --mono:'JetBrains Mono',ui-monospace,monospace;
  --edge:rgba(255,255,255,.08);
}
*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
body{font-family:var(--font);background:var(--navy);-webkit-font-smoothing:antialiased;position:relative}
body.page{color:var(--ink);line-height:1.6}
body.page::before{content:'';position:fixed;inset:0;z-index:0;pointer-events:none;opacity:.5;
  background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.025'/%3E%3C/svg%3E")}
.wrap{max-width:1080px;margin:0 auto;padding:0 32px;position:relative;z-index:1}

nav{position:sticky;top:0;z-index:50;background:rgba(14,42,71,.82);backdrop-filter:blur(10px);border-bottom:1px solid var(--edge)}
nav .wrap{display:flex;align-items:center;justify-content:space-between;height:66px}
.brand{display:flex;align-items:center;gap:11px;text-decoration:none}
.brand .wm{font-weight:800;letter-spacing:-.02em;font-size:19px;color:#fff}
.brand .wm .h{font-weight:400;color:var(--teal)}
.navlinks{display:flex;gap:30px;list-style:none;align-items:center}
.navlinks a{color:var(--muted);text-decoration:none;font-size:13px;letter-spacing:.12em;text-transform:uppercase;font-weight:600}
.navlinks a:hover,.navlinks a.active{color:#fff}
/* The door is open now: Login points at the prototype, so it is styled as the
   live control it has become. Teal border, hover fill, real anchor cursor.

   This restores the treatment the button first shipped with, and reverses the
   muted "not yet" version that sat here in between. That version was right
   while the href was missing — a styled anchor with no destination should not
   invite a click — and is wrong now that clicking it goes somewhere.

   The label sits at #fff rather than --muted: it is the one nav item that is
   an action rather than a page, and it now matches .active and :hover, the
   other states that mean "this one". Full opacity, so no contrast haircut —
   #fff on the navy is 12.6:1. The old floor note still applies to anything
   dimmer: these are 13px at weight 600, normal text under WCAG, needing
   4.5:1. --dim is 4.04:1 and fails; --muted at .65 is ~4.2:1 and fails. */
.navlinks a.login{color:#fff;border:1px solid var(--teal);
  border-radius:4px;padding:8px 16px;letter-spacing:.1em;
  transition:background-color .15s ease,color .15s ease}
/* Specificity note: this must out-rank .navlinks a:hover above, which only
   sets colour. (0,3,1) beats (0,2,1), so the fill lands. */
.navlinks a.login:hover{background:var(--teal);color:var(--navy)}
/* The mark alone measured 34px tall as a tap target. The bar has room. */
.brand{min-height:44px}

/* Mobile disclosure. The button is created by site.js and does not exist
   without it. See the header of that file for why. Everything here is gated
   on nav[data-nav="js"] so the collapsed layout cannot apply to a page whose
   script failed to load, which would leave the nav shut with no way to open. */
.nav-toggle{display:none;width:44px;height:44px;padding:0;border:0;background:none;
  cursor:pointer;align-items:center;justify-content:center;-webkit-tap-highlight-color:transparent}
.nav-toggle-bars{position:relative;display:block;width:22px;height:2px;background:#fff;border-radius:2px}
.nav-toggle-bars::before,.nav-toggle-bars::after{content:'';position:absolute;left:0;
  display:block;width:22px;height:2px;background:#fff;border-radius:2px}
.nav-toggle-bars::before{top:-7px}
.nav-toggle-bars::after{top:7px}
.nav-toggle:focus-visible{outline:2px solid var(--teal);outline-offset:3px;border-radius:4px}
@media(prefers-reduced-motion:no-preference){
  .nav-toggle-bars,.nav-toggle-bars::before,.nav-toggle-bars::after{transition:transform .18s ease,background-color .18s ease}
}
nav[data-open] .nav-toggle-bars{background:transparent}
nav[data-open] .nav-toggle-bars::before{transform:translateY(7px) rotate(45deg)}
nav[data-open] .nav-toggle-bars::after{transform:translateY(-7px) rotate(-45deg)}

/* One focus ring for everything. Before this the only :focus-visible rule on
   the site was .nav-toggle's, so a keyboard user got a branded ring on the
   hamburger and the browser default everywhere else. Nothing sets
   outline:none, so this replaces a working-but-inconsistent default rather
   than restoring a suppressed one. */
a:focus-visible,button:focus-visible{outline:2px solid var(--teal);outline-offset:3px;border-radius:3px}

.eyebrow{font-family:var(--mono);font-size:12px;letter-spacing:.24em;text-transform:uppercase;color:var(--teal);font-weight:500}

/* Hero shell. These three lived inline on Why, About and Team with values that
   had drifted apart by accident rather than intent: max-width 62ch/60ch/62ch,
   line-height 1.55/1.65/1.55, h1 clamped to 64px on two pages and 68px on the
   third. Unified here; Namesake keeps its own, which are a deliberate
   departure (much larger display, two-column hero). */
.hero{padding:76px 0 56px}
.hero h1{font-size:clamp(36px,5.6vw,64px);font-weight:800;letter-spacing:-.03em;
  line-height:1.05;margin:18px 0 20px;color:#fff;max-width:20ch}
.hero .lede{font-size:clamp(17px,2.1vw,21px);font-weight:400;color:var(--muted);
  max-width:62ch;line-height:1.6}
/* Section padding doubles at every boundary, so this number is half the gap
   between two blocks of text, not the gap. At 78 the measured ink-to-ink gaps
   ran 151-181px, nine or ten blank lines of body copy. 56 puts them at ~112. */
section{padding:56px 0}
.divide{border-top:1px solid var(--edge)}

/* The dot motif sits in one fixed spot on every page: under the nav, at the
   right edge of the 1080 content column. .dotrail is a zero-height strip
   pinned below the bar; its .wrap does the centring, so the block keeps the
   column's right margin at any width. */
.dotrail{position:absolute;left:0;right:0;top:67px;z-index:1;pointer-events:none}
.dotrail .wrap{position:relative;height:0}
.dots{position:absolute;top:16px;right:32px;width:80px;height:60px;
  background-image:radial-gradient(circle,var(--teal) 3.5px,transparent 4px);
  background-size:20px 20px}

footer{border-top:1px solid var(--edge);padding:34px 0}
footer .wrap{display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:14px}
footer .wm{font-weight:800;font-size:16px;color:#fff;letter-spacing:-.02em}
footer .wm .h{font-weight:400;color:var(--teal)}
/* --muted, not --dim. --dim on this navy measures 4.04:1 and fails WCAG AA
   for normal text; --muted is 7.76:1. Costs a slightly louder footer. */
footer .loc,footer .copy{font-family:var(--mono);font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:var(--muted)}
/* Contact in the footer of the four content pages. Not on index.html, which
   has "Request early access" as its whole purpose and does not use <footer>
   at all. Stealth sites travel by being forwarded, and before this a reader
   who landed on one page from a colleague had no way to reach anyone.
   Lowercase, unlike .loc and .copy: an address in caps is harder to read and
   invites transcription errors. The border-bottom is not decoration; a link
   distinguished only by colour fails WCAG 1.4.1. The padding is a tap target,
   taking an 11px line from ~15px tall to ~26px, over the 24x24 in WCAG 2.2
   AA (2.5.8). */
footer .mail{font-family:var(--mono);font-size:11px;letter-spacing:.08em;color:var(--muted);
  text-decoration:none;border-bottom:1px solid rgba(174,191,210,.35);padding:5px 0 3px}
footer .mail:hover{color:var(--teal);border-bottom-color:var(--teal)}

/* The centred closing statement. Lived inline on Why as .closing and on Team
   as .value, identical but for max-width (24ch vs 22ch), which was drift
   rather than intent, the same way the .hero rules had drifted. Unified at
   24ch and moved here when About needed a third copy. Both class names are
   kept so neither page's markup had to change. */
.closing,.value{text-align:center;padding:72px 0}
.closing p,.value p{font-size:clamp(22px,3.2vw,34px);font-weight:300;color:#fff;
  max-width:24ch;margin:0 auto;line-height:1.32}
.closing p b,.value p b{color:var(--teal);font-weight:600}

/* The reading path. Every page was a cul-de-sac before this: exactly five
   links per page, all of them the nav plus the logo, and nothing in the
   content connecting About to Why or Why to anything. Labels name the
   DESTINATION'S HEADLINE rather than its nav word, because the headline is
   the actual promise. Lives inside the closing section of each page rather
   than in a strip of its own, so it adds no fourth horizontal rule above a
   footer that already has one. */
.next{display:inline-flex;align-items:center;gap:10px;min-height:44px;margin-top:30px;
  font-family:var(--mono);font-size:12px;letter-spacing:.14em;text-transform:uppercase;
  color:var(--muted);text-decoration:none;border-bottom:1px solid rgba(174,191,210,.35)}
.next:hover{color:var(--teal);border-bottom-color:var(--teal)}
@media(prefers-reduced-motion:no-preference){
  .next .arrow{transition:transform .18s ease}
  .next:hover .arrow{transform:translateX(3px)}
}

/* Below 900 the content column has no spare right margin for the dot block. */
@media(max-width:900px){
  .navlinks{gap:16px}
  .dotrail{display:none}
}
/* The two blocks below are the NO-SCRIPT fallback and nothing else. They are
   the old shrink-to-fit nav: too small to tap comfortably, but present and
   usable if site.js never runs. When it does run, the nav[data-nav="js"]
   rules that follow out-specify all of it. */
@media(max-width:620px){
  .wrap{padding:0 18px}
  .brand .wm{display:none}
  .navlinks{gap:11px}
  .navlinks a{font-size:10.5px;letter-spacing:.06em}
  .navlinks a.login{padding:6px 10px}
}
@media(max-width:400px){
  .navlinks{gap:9px}
  .navlinks a{font-size:10px;letter-spacing:.04em}
  .navlinks a.login{padding:6px 8px}
}

@media(max-width:620px){
  nav[data-nav="js"] .nav-toggle{display:flex}
  /* The links are behind the button now, so the wordmark gets its space back. */
  nav[data-nav="js"] .brand .wm{display:block}
  nav[data-nav="js"] .navlinks{
    display:none;position:absolute;top:100%;left:0;right:0;
    flex-direction:column;align-items:stretch;gap:0;
    background:var(--navy);border-bottom:1px solid var(--edge);
    padding:4px 18px 14px}
  nav[data-nav="js"][data-open] .navlinks{display:flex}
  nav[data-nav="js"] .navlinks a{
    display:flex;align-items:center;min-height:48px;
    font-size:15px;letter-spacing:.14em;border-bottom:1px solid var(--edge)}
  nav[data-nav="js"] .navlinks li:last-child a{border-bottom:0}
  nav[data-nav="js"] .navlinks a.login{
    justify-content:center;min-height:48px;margin-top:14px;padding:0 16px;letter-spacing:.12em}
  /* li:last-child a{border-bottom:0} above strips the divider from the final
     item, and the login box IS that item, so it lost the bottom edge of its
     own border and rendered as a three-sided box. That rule out-specifies the
     .login border (0,3,3 vs 0,3,1), so the edge has to be put back here.
     It was wrong before too, just invisible: the old border was
     rgba(174,191,210,.32) and the gap did not read. Teal, it does. */
  nav[data-nav="js"] .navlinks li:last-child a.login{border-bottom:1px solid var(--teal)}
}