/* The subpage shell: nav, wordmark, page kicker and page h1.
 *
 * These are NOT in base.css because index.html genuinely replaces them. Its nav
 * is fixed and transparent over a full-bleed hero and only grows a border once
 * scrolled; its kicker is a flex row with a rule rather than an accent eyebrow;
 * its h1 runs to 124px against this file's 56px. Merging the two shells put a
 * permanent hairline under the homepage nav and 18px under every kicker.
 *
 * base.css holds what every page shares: tokens, type roles, .btn, .glass,
 * dialogs, the footer and the focus ring. This holds the five-page chrome.
 */
.wrap{margin:0 auto;padding-inline:max(24px,env(safe-area-inset-left)) max(24px,env(safe-area-inset-right))}
nav{border-bottom:1px solid var(--line)}
/* One bar on every subpage, shaped like the homepage's: wordmark, the five
   links centred in the free space, then the account widget (Sign in or the
   avatar) and the burger on the right. Join free lives in the page, not the
   bar (2026-08-15): two email pills side by side read as two different clubs. The bar spans the homepage's 1280 rather than the
   page's reading column: the full row is ~940px wide and does not fit an
   880px column, and every page draws the bar's rule edge to edge anyway. */
.nav-inner{max-width:1280px;margin:0 auto;height:72px;display:flex;align-items:center;gap:16px;
  padding-inline:max(24px,env(safe-area-inset-left)) max(24px,env(safe-area-inset-right))}
.wordmark{display:flex;align-items:center;gap:10px;text-decoration:none;color:var(--porcelain);flex:none}
.wordmark .logo-mark{width:38px;height:38px;object-fit:cover;border-radius:var(--r-chrome);display:block}
/* Gardiant carries the mark; Archivo carries everything else. */
.wordmark b{font-family:var(--font-title);font-weight:400;font-size:13px;letter-spacing:.1em;text-transform:uppercase;white-space:nowrap}
.nav-links{display:flex;align-items:center;gap:clamp(14px,1.7vw,26px);margin-inline:auto;padding-inline:12px}
.nav-links a{color:var(--porcelain-dim);text-decoration:none;font-size:12px;font-weight:500;letter-spacing:.13em;
  text-transform:uppercase;white-space:nowrap;transition:color .25s}
.nav-links a:hover{color:var(--porcelain)}
/* Current page: the link and, for Library, the summary wear the hover face. */
.nav-links a[aria-current="page"],.nav-links .nav-dd summary[aria-current="page"]{color:var(--porcelain)}
/* Library dropdown: native details/summary so it works with JS off and closes
   on a second click. The summary wears the link look; the menu floats under
   the bar. */
.nav-dd{position:relative}
.nav-dd summary{list-style:none;cursor:pointer;color:var(--porcelain-dim);font-size:12px;font-weight:500;
  letter-spacing:.13em;text-transform:uppercase;white-space:nowrap;transition:color .25s;
  display:inline-flex;align-items:center;gap:7px}
.nav-dd summary::-webkit-details-marker{display:none}
/* Same chevron as the homepage's .nav-drop>a::after, flipping while open. */
.nav-dd summary::after{content:"";width:6px;height:6px;margin-top:-4px;
  border-right:1.5px solid currentColor;border-bottom:1.5px solid currentColor;
  transform:rotate(45deg);transition:transform .22s}
.nav-dd[open] summary::after{transform:translateY(3px) rotate(225deg)}
.nav-dd summary:hover{color:var(--porcelain)}
.nav-dd[open] summary{color:var(--porcelain)}
.nav-dd .nav-menu{position:absolute;left:50%;transform:translateX(-50%);top:calc(100% + 16px);min-width:230px;z-index:60;
  background:var(--pane-bg);border:1px solid var(--pane-line);border-radius:var(--r-card);padding:8px 0;overflow:hidden;
  backdrop-filter:blur(22px) saturate(165%);-webkit-backdrop-filter:blur(22px) saturate(165%);
  box-shadow:var(--pane-edge),0 18px 40px rgba(0,0,0,.55)}
.nav-dd .nav-menu a{display:block;padding:10px 18px;text-decoration:none;color:var(--porcelain-dim);
  font-family:var(--font-mono);font-size:11px;letter-spacing:.14em;text-transform:uppercase;white-space:nowrap}
.nav-dd .nav-menu a:hover{color:var(--porcelain);background:rgba(var(--accent-rgb),.08)}
.nav-dd .nav-menu .nd-all{border-top:1px solid var(--line);margin-top:6px;padding-top:12px}
/* Right-hand group. Own padding on the pill: base.css sets 16px 34px, which is
   a page button, not a bar control. */
.nav-right{display:flex;align-items:center;gap:12px;margin-left:auto;flex:none}
/* The Sign in chip is drawn like the page pills: same face, size, padding and
   line box. Nav-scoped on purpose; the widget block below stays identical to
   index.html's. */
.nav-right .acct-chip{padding:11px 22px;white-space:nowrap;font-family:var(--font-body);font-size:11px;font-weight:500;
  letter-spacing:.16em;line-height:inherit;color:var(--porcelain-dim);border-color:var(--field-line)}
.nav-right .acct-chip:hover{color:var(--porcelain);border-color:var(--porcelain)}
/* ---------- burger + mobile menu ----------
   Same shape as index.html's. The bar is static here, not fixed, so the open
   burger pins itself to the corner and the panel covers the bar: otherwise a
   visitor who scrolled before opening the menu has no toggle left on screen
   to close it. */
.burger{display:none;background:none;border:1px solid var(--line);border-radius:50%;
  width:44px;height:44px;flex-direction:column;align-items:center;justify-content:center;gap:5px;cursor:pointer;flex:none}
.burger i{display:block;width:18px;height:1.5px;background:var(--porcelain);transition:transform .3s,opacity .3s}
.burger.open{position:fixed;top:14px;right:max(24px,env(safe-area-inset-right));z-index:91;background:var(--void)}
.burger.open i:nth-child(1){transform:translateY(6.5px) rotate(45deg)}
.burger.open i:nth-child(2){opacity:0}
.burger.open i:nth-child(3){transform:translateY(-6.5px) rotate(-45deg)}
.mnav{position:fixed;inset:0;z-index:89;background:rgba(var(--void-rgb),.96);backdrop-filter:blur(18px);
  display:flex;flex-direction:column;gap:8px;padding:92px 30px 40px;
  overflow-y:auto;overscroll-behavior:contain;
  opacity:0;visibility:hidden;transition:opacity .35s,visibility .35s}
/* Centre when it fits, scroll from the top when it does not: auto margins
   collapse to 0 when space runs out, where justify-content:center would clip
   both ends. */
.mnav > :first-child{margin-top:auto}
.mnav > :last-child{margin-bottom:auto}
.mnav > *{flex:0 0 auto}
/* No visibility transition on the way in: the script focuses the first link
   the moment the menu opens, and a link still transitioning from hidden
   cannot take focus. The way out keeps the .35s hold. */
.mnav.open{opacity:1;visibility:visible;transition:opacity .35s}
.mnav a{font-family:var(--font-body);font-weight:400;font-size:38px;color:var(--porcelain);
  text-decoration:none;padding:12px 0;border-bottom:1px solid var(--line);
  display:flex;justify-content:space-between;align-items:baseline}
.mnav a small{font-family:var(--font-mono);font-size:11px;letter-spacing:.25em;color:var(--porcelain-dim)}
.mnav-sub{display:flex;flex-direction:column;margin:0 0 8px;padding-left:15px;border-left:1px solid var(--line)}
.mnav .mnav-sub a{display:block;font-size:15px;padding:7px 0;border-bottom:none;color:var(--porcelain-dim)}
.mnav .mnav-sub a:hover{color:var(--porcelain)}
/* The sub-item override is restated in each block because it ties on
   specificity with ".mnav a". */
@media(max-height:1000px){
  .mnav a{font-size:30px;padding:9px 0}
  .mnav .mnav-sub a{font-size:14px;padding:6px 0}
}
/* Phone-height viewports (844 and under): keep the 30px links, tighten the
   spacing so the whole list lands above the fold. */
@media(max-height:900px){
  .mnav{gap:3px;padding:84px 26px 24px}
}
@media(max-height:720px){
  .mnav{gap:3px;padding:84px 26px 24px}
  .mnav a{font-size:23px;padding:6px 0}
  .mnav .mnav-sub a{font-size:12px;padding:4px 0}
}
/* Signed in, the avatar replaces the chip and the menu's Sign in goes. */
html.is-signed-in .mnav-signin{display:none}
/* ---------- the bar's width ladder ----------
   Nothing in the bar can shrink: the name, every link and the chip are all
   nowrap. The phone bar (name, chip, burger) is ~490px, so the links hand off
   to the burger at 1000, and below that the phone ladder gives things up in
   this order: the article, the type step, the chip's padding, and the name
   last, at 364, because it is the only thing identifying the site on a cold
   mobile landing. The chip stays at every width: it is the bar's one action. */
@media(max-width:1000px){
  .nav-links{display:none}
  .burger{display:flex}
}
@media(max-width:700px){
  .nav-inner{padding-inline:max(22px,env(safe-area-inset-left)) max(22px,env(safe-area-inset-right))}
  .burger.open{right:max(22px,env(safe-area-inset-right))}
}
/* The full name, the chip and the burger need ~490px, so the article goes
   at 500. */
@media(max-width:500px){.nav-inner .wm-the{display:none}}
/* The step-down index.html already uses at this width, and what buys the name
   the last 34px rather than dropping it on every phone at 430 and under. */
@media(max-width:430px){
  .nav-inner .logo-mark{width:32px;height:32px}
  .nav-inner .wordmark b{font-size:11px;letter-spacing:.06em}
  .nav-inner{gap:12px}
  .nav-right{gap:8px}
}
@media(max-width:400px){.nav-right .acct-chip{padding:10px 14px;letter-spacing:.1em;font-size:10px}}
@media(max-width:380px){.nav-right .acct-chip{padding:9px 10px;letter-spacing:.06em}}
@media(max-width:350px){.nav-inner .wordmark b{display:none}}
.kicker{font-family:var(--font-mono);font-weight:400;font-size:11px;letter-spacing:.32em;text-transform:uppercase;color:var(--accent);margin-bottom:18px}
/* Gradient eyebrows. Guarded: without background-clip:text the transparent fill
   colour renders invisible rather than degrading to the solid accent. Uses the
   text cut of the ramp, whose darkest point is 7.94:1 on the ground. */
@supports ((-webkit-background-clip:text) or (background-clip:text)){
  .kicker{background:var(--accent-grad-text);-webkit-background-clip:text;background-clip:text;
    color:transparent;-webkit-text-fill-color:transparent;width:fit-content}
}
/* Page titles sit in the mono label system (2026-08-18), one step above the
   section titles below: the sponsor page set the pattern and Liz asked for it
   site-wide. Sized clearly above the 11px .kicker eyebrow so the two never
   read as a pair of kickers (the 2026-08-14 problem), and well under the
   homepage hero's 124px so a subpage never outshouts the front door. */
h1{font-family:var(--font-mono);font-weight:400;font-size:clamp(26px,3.8vw,40px);line-height:1.18;letter-spacing:.12em;text-transform:uppercase;text-wrap:balance}
/* Section titles: one mono label size on every page, and non-body text is
   never Sora. Sub-heads one step down. Pages set margins, not type. */
main h2{font-family:var(--font-mono);font-weight:400;font-size:clamp(17px,2vw,24px);line-height:1.2;letter-spacing:.2em;text-transform:uppercase;color:var(--porcelain)}
main h3{font-family:var(--font-mono);font-weight:400;font-size:14px;line-height:1.3;letter-spacing:.16em;text-transform:uppercase;color:var(--porcelain)}

/* ---------- notify form ----------
   The one-field email capture used by every page that carries one: the event
   page, the benchmark page, the guide and the glossary. index.html does NOT
   load this stylesheet and has no .nf form, so nothing here reaches it. */
.notify{margin:64px 0 90px}
.notify h2{margin-bottom:10px}
.notify p{color:var(--porcelain-dim);font-size:15px;max-width:520px}
/* Sized to the field, not to the column. An email address is a short entry, so
   the input caps out near the width of one and the button follows it. Capping
   the input rather than the form keeps the cap when a page's button is wider.
   The cap comes off in the column layout, where full width is the point. */
.nf{display:flex;gap:10px;margin-top:24px;max-width:440px}
@media(max-width:560px){.nf{flex-direction:column}}
/* The button never wraps its label: "Get cohort updates" broke onto two lines
   inside the 440px row. The input is the flexible part and gives up the
   difference, still wide enough for its own placeholder. */
.nf .btn{flex:none;white-space:nowrap}
.nf input{flex:1;max-width:220px;background:var(--field-bg);border:1px solid var(--field-line);border-radius:var(--r-chrome);padding:14px 18px;color:var(--porcelain);font-family:inherit;font-size:16px;outline:none;transition:border-color .25s,box-shadow .25s}
/* After the rule it overrides, not with the flex-direction switch above it:
   both are (0,1,1), so the later one wins and an earlier reset would be inert. */
@media(max-width:560px){.nf input{max-width:none}}
.nf input:focus{border-color:var(--accent);box-shadow:var(--field-ring)}
/* outline:none above outranks the bare :focus-visible in base.css, so the
   ring has to be restated here or keyboard users get no indicator at all. */
.nf input:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
/* display:none, not offscreen. A field named "website" that is merely
   positioned off-screen still gets filled by password managers and form
   fillers, and a false trip is invisible and unrecoverable: the visitor is
   shown a welcome and no record is ever stored. display:none is the one
   form autofill actually skips. It costs a little bot-catching against a
   crawler that reads CSS, which is the cheaper thing to lose.
   The markup also carries the `hidden` attribute, so a stale or missing
   stylesheet shows the field to a real person and silently drops them. This
   rule is the redundant half; do not give .hp a display value anywhere else. */
.hp{display:none}
.nf-msg{margin-top:14px;font-family:var(--font-mono);font-size:12px;letter-spacing:.08em;color:var(--ok);min-height:18px}
.nf-msg.err{color:var(--warn)}
/* The referral panel the API hands back on signup. These lived as an inline
   style attribute inside a JS string, where neither the design-system tests
   nor a token change could reach them. */
.nf-ref-label{display:block;margin:14px 0 6px;font-family:var(--font-mono);font-size:11px;
  letter-spacing:.2em;text-transform:uppercase;color:var(--porcelain-dim)}
.nf-ref-input{width:100%;max-width:460px;background:var(--field-bg);
  border:1px solid var(--field-line);border-radius:var(--r-chrome);padding:11px 15px;
  color:inherit;font-family:var(--font-mono);font-size:12px}

/* ---------- account widget (assets/account.js) ----------
   The nav's sign-in chip, avatar and menu. Own selectors throughout: nothing
   here joins .chip, .btn, .back or .nav-dd, for the .roles-label reason. The
   same block is pasted into index.html's stylesheet, which does not load this
   file; keep the two copies identical.
   The chip is hidden by visibility, not display, so its space is held from the
   first paint and the row does not jump when /api/me answers; .on reveals it.
   Its border is --field-line, not --line: at 10% the pill outline vanishes on
   the homepage hero. */
.nav-auth{position:relative;display:flex;align-items:center;gap:8px}
.acct-chip{visibility:hidden;display:inline-flex;align-items:center;font-family:var(--font-mono);
  font-weight:400;font-size:11px;letter-spacing:.2em;text-transform:uppercase;line-height:1.2;
  background:none;border:1px solid var(--field-line);border-radius:var(--r-pill);
  color:var(--porcelain-dim);padding:8px 15px;cursor:pointer;white-space:nowrap;
  text-decoration:none;transition:color .25s,border-color .25s}
.acct-chip.on{visibility:visible}
.acct-chip:hover{color:var(--porcelain);border-color:var(--porcelain)}
.acct-chip.saved{border-color:var(--ok);color:var(--ok)}
@media(pointer:coarse){.acct-chip{min-height:44px}}
/* One initial in a 32px circle. The ::after widens the hit area to 44px on a
   touch screen without growing the mark. */
.acct-avatar{position:relative;display:inline-flex;align-items:center;justify-content:center;
  width:32px;height:32px;padding:0;border-radius:50%;border:1px solid var(--field-line);
  background:rgba(var(--porcelain-rgb),.06);color:var(--porcelain);
  font-family:var(--font-mono);font-weight:400;font-size:12px;line-height:1;cursor:pointer;text-decoration:none;
  transition:border-color .25s,background .25s}
.acct-avatar:hover,.acct-avatar:focus-visible{border-color:var(--porcelain);
  background:rgba(var(--porcelain-rgb),.12)}
@media(pointer:coarse){.acct-avatar::after{content:"";position:absolute;inset:-6px}}
.acct-avatar-img{display:block;width:100%;height:100%;border-radius:50%;object-fit:cover}
/* The points balance beside the avatar ("1,240 pts"), a second link to the
   account page. Same visibility gate as the chip so a repaint does not jump. */
.acct-points{visibility:hidden;display:inline-flex;align-items:center;font-family:var(--font-mono);
  font-weight:400;font-size:11px;letter-spacing:.14em;text-transform:uppercase;line-height:1.2;
  color:var(--porcelain-dim);white-space:nowrap;text-decoration:none;transition:color .25s}
.acct-points.on{visibility:visible}
.acct-points:hover,.acct-points:focus-visible{color:var(--porcelain)}
/* The menu falls back to an opaque surface where blur is unavailable or
   declined, so the items never float over the text beneath them. */
@supports not ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){
  .nav-dd .nav-menu{background:var(--ink)}
}
@media (prefers-reduced-transparency:reduce){
  .nav-dd .nav-menu{background:var(--ink);backdrop-filter:none;-webkit-backdrop-filter:none}
}
/* The autosave confirmation beside the avatar ("Saved"). */
.acct-flash{font-family:var(--font-mono);font-size:10px;letter-spacing:.14em;text-transform:uppercase;
  color:var(--ok);white-space:nowrap}
/* Ladder, copied from events.html so the two agree. The chip adds ~95px to a
   bar that already fits only just: below 600 the back link steps off when a
   widget is present (the wordmark still links home), then the chip tightens. */
@media(max-width:700px){
  /* Full back label plus the chip needs ~686px; the label collapses to "Back"
     first (sr-only, restated from base.css so screen readers keep the name). */
  .nav-inner:has(.nav-auth) .bk-x{position:absolute;width:1px;height:1px;margin:-1px;overflow:hidden;
    clip-path:inset(50%);white-space:nowrap}
}
@media(max-width:600px){.nav-inner:has(.nav-auth) .back{display:none}}
@media(max-width:520px){
  .nav-auth .acct-chip{font-size:10px;letter-spacing:.12em;padding:8px 11px}
  .nav-auth .acct-points{display:none}
}
@media(max-width:430px){
  .nav-auth{gap:6px}
  .nav-auth .acct-chip{letter-spacing:.08em;padding:8px 9px}
}
/* The stepped-down name plus Library plus the chip is ~373px, and the name
   may not drop before 364 (tests/nav-wordmark.test.mjs), so the last 10px come
   out of the group gap and the chip's own padding. */
@media(max-width:380px){
  .nav-inner:has(.nav-auth) .nav-x{gap:12px}
  .nav-auth .acct-chip{padding:8px 7px}
}