/* chrome.css — the header, navigation, mobile menu, footer and founders strip that
   every page shares (404 excepted: it is deliberately chrome-less). Linked after
   tokens.css and before the page sheet. It depends on nothing in the page sheets:
   the wrapper is .chrome, not .container, so the narrower reading column on /dpa
   does not narrow the header, and every chrome link declares text-decoration:none
   itself, because dpa.css deliberately keeps the underline on body links. */

.chrome{max-width:1480px;margin:0 auto;padding-left:var(--pad-x);padding-right:var(--pad-x)}

/* Visually hidden, still read by assistive tech. */
.vh{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}

/* Skip link: the first thing in the tab order on every page with the header, visible
   only while focused. Every page wraps its content in <main id="main">. */
.skip{position:absolute;left:var(--pad-x);top:0;transform:translateY(-200%);padding:10px 14px;background:var(--teal);color:#fff;font-size:14px;font-weight:500;text-decoration:none;z-index:60}
.skip:focus{transform:none;outline:2px solid var(--coral);outline-offset:2px}

/* The small mono label used by the footer groups, menu groups and founder titles. */
.foot-label{font-family:var(--font-mono);font-weight:500;letter-spacing:.04em;text-transform:uppercase;font-size:11px;color:var(--mute)}

/* ---------- logo ---------- */
.logo{display:inline-flex;align-items:center;gap:10px;font-family:var(--font-display);font-weight:500;letter-spacing:-.02em;color:var(--ink);text-decoration:none}
.logo .mark{width:28px;height:28px;position:relative;flex:none}
.logo .mark svg{position:absolute;inset:0;width:100%;height:100%}
.logo .word{font-size:22px;letter-spacing:-.025em}

/* ---------- top bar ---------- */
header.top{
  position:sticky;top:0;z-index:50;
  background:color-mix(in oklab, var(--bg) 88%, transparent);
  backdrop-filter:blur(10px);
  border-bottom:1px solid var(--line-2);
}
header.top .chrome{display:flex;align-items:center;justify-content:space-between;gap:24px;height:64px}
nav.links{display:flex;gap:28px}
nav.links a{font-size:14px;color:var(--ink-2);font-weight:400;text-decoration:none}
nav.links a:hover{color:var(--ink)}
body[data-page="about"] nav.links a[href="/about"],
body[data-page="careers"] nav.links a[href="/careers"],
body[data-page="insights"] nav.links a[href="/insights/"]{color:var(--ink)}
header.top .actions{display:flex;align-items:center;gap:10px}
.nav-signin{font-size:13px;color:var(--ink-2);padding:8px 14px;border:1px solid var(--line-strong);border-radius:999px;text-decoration:none;transition:color .15s,border-color .15s}
.nav-signin:hover{color:var(--ink);border-color:var(--ink-2)}
.nav-cta{display:inline-flex;align-items:center;gap:10px;padding:9px 14px;border:1px solid var(--line-strong);border-radius:999px;font-size:13px;color:var(--ink);text-decoration:none}
.nav-cta .pulse{width:7px;height:7px;border-radius:50%;background:var(--red);box-shadow:0 0 0 0 color-mix(in oklab, var(--red) 55%, transparent);animation:pulse 2s infinite}
@keyframes pulse{0%{box-shadow:0 0 0 0 color-mix(in oklab, var(--red) 55%, transparent)}70%{box-shadow:0 0 0 10px color-mix(in oklab, var(--red) 0%, transparent)}100%{box-shadow:0 0 0 0 color-mix(in oklab, var(--red) 0%, transparent)}}

/* ---------- mobile menu ----------
   A <details> element: open/close is native and works with no script under the
   CSP. chrome.js adds Escape, close-on-link and close-on-outside-click on top.
   The panel is positioned against header.top (the nearest positioned ancestor),
   so it hangs below the bar at full width instead of growing the 64px row. */
.menu{display:none;position:static}
.menu>summary{list-style:none;cursor:pointer;display:inline-flex;align-items:center;justify-content:center;width:40px;height:40px;border:1px solid var(--line-strong);border-radius:999px;color:var(--ink)}
.menu>summary::-webkit-details-marker{display:none}
.menu>summary::marker{content:""}
.menu>summary:hover{border-color:var(--ink-2)}
.menu[open]>summary{background:var(--bg-2);border-color:var(--ink-2)}
.menu .bars{position:relative;width:16px;height:10px;display:block}
.menu .bars::before,.menu .bars::after{content:"";position:absolute;left:0;right:0;height:1.5px;background:currentColor;transition:transform .15s}
.menu .bars::before{top:0}
.menu .bars::after{bottom:0}
.menu[open] .bars::before{top:4px;transform:rotate(45deg)}
.menu[open] .bars::after{bottom:4px;transform:rotate(-45deg)}
.menu>nav{
  position:absolute;top:100%;left:0;right:0;
  background:var(--bg);border-bottom:1px solid var(--line-2);
  padding:20px var(--pad-x) 28px;display:grid;gap:22px;
  max-height:calc(100vh - 64px);max-height:calc(100dvh - 64px);overflow:auto;
}
.menu-group{display:flex;flex-wrap:wrap;gap:4px 20px;align-items:baseline}
.menu-group .foot-label{width:100%;margin-bottom:4px}
.menu-group a{font-size:16px;color:var(--ink);text-decoration:none;padding:10px 0;min-height:44px;display:inline-flex;align-items:center}
.menu-group a:hover{color:var(--ink)}

@media (max-width: 900px){
  nav.links{display:none}
  .nav-signin{display:none}
  .menu{display:block}
}

/* ---------- footer ---------- */
/* The footer is the one teal surface: the palette's dark swatch as a band on every
   page. Text is the page background and the mint swatch (9.3:1 and 6.6:1 on teal);
   the coral dot in the logo stays. A surface, not a theme — the site is light-only. */
footer{padding:56px 0 36px;background:var(--teal);color:var(--bg)}
footer .foot-label{color:var(--mint)}
footer .logo{color:var(--bg)}
.foot-groups{display:grid;grid-template-columns:1fr 1fr;gap:24px 48px;padding-bottom:28px;border-bottom:1px solid color-mix(in oklab, var(--bg) 18%, transparent)}
.foot-group{display:flex;flex-wrap:wrap;gap:8px 20px;align-items:baseline}
.foot-group .foot-label{width:100%;margin-bottom:2px}
footer a{color:var(--bg-2);font-size:13px;text-decoration:none}
footer a:hover{color:#fff}
.foot-base{display:flex;justify-content:space-between;align-items:center;gap:16px 24px;flex-wrap:wrap;padding-top:24px}
.foot-base .logo .word{font-size:18px}
@media (max-width: 700px){
  .foot-groups{grid-template-columns:1fr}
  .foot-base{flex-direction:column;align-items:flex-start;gap:10px}
}

/* ---------- founders strip ----------
   Heading-free on purpose (a <ul> of links), so it nests under any heading level:
   an h3 section on /, the careers footer module, and the post footers. The tiles hold
   the portraits from src/assets/img/team/ (the same files as /about). */
.founders{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:1px;background:var(--line);border:1px solid var(--line)}
.founders li{background:var(--bg);margin:0}
.founders a{display:flex;align-items:center;gap:16px;padding:18px 20px;color:var(--ink);text-decoration:none;transition:background .2s ease}
.founders a:hover{background:var(--bg-2)}
.founders .tile{flex:none;width:56px;height:56px;background:var(--bg-2);border:1px solid var(--line-2);display:grid;place-items:center;font-family:var(--font-display);font-weight:500;font-size:18px;letter-spacing:-.02em;color:var(--ink);position:relative;overflow:hidden}
.founders .tile::after{content:"";position:absolute;right:6px;bottom:6px;width:6px;height:6px;border-radius:50%;background:var(--red)}
.founders .tile img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:50% 30%} /* the 4:5 portraits carry the face in the upper third */
.founders .name{display:block;font-size:15px;font-weight:500;letter-spacing:-.01em;line-height:1.2}
.founders .foot-label{display:block;margin-top:4px}
@media (max-width: 900px){
  .founders{grid-template-columns:1fr}
}