/* ========================================================================== formulize.org — main stylesheet Palette: a pale blue ground (#e2ecf2) under a charcoal shell (#3a3a3a), with two action colours doing two different jobs — green (#81de76) is the CTA (buttons and badges only) and blue (#4c7ec0) is the accent ramp that carries links, prices, hovers and tick marks. Type is Unbounded ExtraBold over Poppins, both tracked +4%. Plain CSS on purpose: Jekyll serves this file as a static asset, so it needs no Sass compilation and can be previewed directly in a browser. ========================================================================== */ @import url('https://fonts.googleapis.com/css2?family=Unbounded:wght@800&family=Poppins:wght@400;500;600;700&display=swap'); :root { --color-bg: #e2ecf2; --color-surface: #ffffff; --color-text: #000000; --color-accent: #4c7ec0; --color-accent-2: #81de76; --color-divider: color-mix(in srgb, #000000 15%, transparent); /* The charcoal shell: header, footer, and anything that has to read as chrome rather than content. Held apart from the neutral ramp so the ramp can stay monotonic. */ --color-shell: #3a3a3a; /* The green is an action colour, not a text colour — it is light enough that it only ever appears as a fill with black type on it. */ --color-cta: #81de76; --color-cta-hover: #6ad15e; --color-cta-active: #57bd4b; --color-neutral-100: #ffffff; --color-neutral-200: #f2f6f8; --color-neutral-300: #dce7ed; --color-neutral-400: #afc0c9; --color-neutral-500: #7f8c93; --color-neutral-600: #626d73; --color-neutral-700: #4a5357; --color-neutral-800: #2c3235; --color-neutral-900: #14181a; --color-accent-100: #eaf1fa; --color-accent-200: #d2e2f5; --color-accent-300: #aec8e9; --color-accent-400: #7ba4d6; --color-accent-500: #4c7ec0; --color-accent-600: #3c66a1; --color-accent-700: #2f5182; --color-accent-800: #223c61; --color-accent-900: #172942; --color-accent-2-100: #eefaec; --color-accent-2-200: #d9f5d4; --color-accent-2-300: #b8ecb0; --color-accent-2-400: #81de76; --color-accent-2-500: #5cbf50; --color-accent-2-600: #489c3e; --color-accent-2-700: #377a2f; --color-accent-2-800: #275822; --color-accent-2-900: #193a17; /* Formulize blue, kept as its own family so the second badge and the hosted rail stay a different claim from the green CTA. */ --color-brand: #4c7ec0; --color-brand-600: #3c66a1; --color-brand-700: #2f5182; --color-brand-200: #d2e2f5; --color-brand-100: #eaf1fa; /* Deep enough that white body copy on the hero band clears 4.5:1; the mockup's lighter band only managed about 2.5:1. */ --color-hero: #3c66a1; --font-heading: "Unbounded", system-ui, sans-serif; --font-heading-weight: 800; --font-body: "Poppins", system-ui, sans-serif; --tracking: 0.04em; --space-1: 4.4px; --space-2: 8.8px; --space-3: 13.2px; --space-4: 17.6px; --space-6: 26.4px; --space-8: 35.2px; --space-12: 52.8px; --space-16: 70.4px; /* A third of what these were (8/16/28). Pills and circles are deliberately not on this scale - the 999px buttons and tags, and the 50% avatars, are meant to be fully round and stay hard-coded. */ --radius-sm: 3px; --radius-md: 5px; --radius-lg: 9px; --shadow-sm: 0 1px 2px color-mix(in srgb, #14181a 14%, transparent); --shadow-md: 0 3px 10px color-mix(in srgb, #14181a 16%, transparent); --shadow-lg: 0 12px 32px color-mix(in srgb, #14181a 22%, transparent); --page-max: 1160px; /* The comfortable measure for running text - see .prose. */ --measure: 52rem; } /* ── base ───────────────────────────────────────────────────────────────── */ *, *::before, *::after { box-sizing: border-box; } body { margin: 0; background: var(--color-bg); color: var(--color-text); font-family: var(--font-body); font-size: 17px; line-height: 1.6; letter-spacing: var(--tracking); -webkit-font-smoothing: antialiased; /* A word longer than its line breaks rather than hanging out of the box. Without this, an unbreakable string - a URL, an element handle like generate_a_report_about_a_form, a long heading in a narrow column - is laid out at its full width and widens the whole document, because text is not an element and no amount of overflow handling on the boxes around it applies. That is a sideways scroll on the entire page, and it is invisible in any inspector that looks at element rectangles: every box measures correctly and the text simply paints past the edge of one. break-word rather than anywhere: it only breaks a word that has no opportunity to wrap at all, so ordinary prose is unaffected. It does not reach 
, where white-space: pre means nothing wraps regardless -
     those scroll horizontally in their own box, which is what a code block
     should do. */
  overflow-wrap: break-word;
}

h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-heading);
  font-weight: var(--font-heading-weight);
  line-height: 1.18;
  letter-spacing: var(--tracking);
  margin: 0 0 var(--space-3);
  color: var(--color-text);
  text-wrap: balance;
}
/* Unbounded ExtraBold sets far wider than the face this replaced, and the +4%
   tracking widens it again, so the display sizes come down a step to keep the
   same number of words on a line. */
h1 { font-size: 39px; }
h2 { font-size: 30px; }

/* /examples/ is built as two questions - "Why do people use Formulize?" and
   "What do people use Formulize for?" - and they carry equal weight, so they
   are set at the same size rather than at h1 and h2's default step apart. The
   second stays an h2 because it is still a section inside the page, and the
   class rather than an inline size so the pair cannot drift apart at the 900px
   breakpoint, where h1 and h2 shrink by different amounts. */
.page-question { font-size: 39px; }
h3 { font-size: 25px; }
h4 { font-size: 21px; }
h5 { font-size: 19px; }
h6 { font-size: 14px; letter-spacing: 0.08em; text-transform: uppercase; }

p, ul, ol, dl, pre, table, blockquote { margin: 0 0 var(--space-4); }
p { text-wrap: pretty; }
ul, ol { padding-left: var(--space-6); }
li { margin-bottom: var(--space-1); }

a { color: var(--color-accent-700); text-underline-offset: 3px; }
/* :not(.btn) so this stays out of the buttons. Buttons own their own colour
   in the .btn block further down and set it for every state there; without
   the exclusion, a:focus (0,1,1) outranks plain .btn (0,1,0) and a focused
   button picks up this lighter 600 instead - lighter than its own resting
   700, and only 3.5:1 on the green fill, which fails AA. Browsers grant
   :focus-visible on both keyboard and mouse paths, so .btn:focus-visible
   normally wins and hides this, but script-moved focus (:focus without
   :focus-visible) exposes it. The :hover half was already being saved only
   by .btn:hover being later in the file at equal specificity - excluded
   here too so button colour doesn't depend on source order. */
a:not(.btn):hover, a:not(.btn):focus { color: var(--color-accent-600); }
/* :visited is scoped to prose content (API reference pages, blog posts) rather
   than site-wide — it's a real wayfinding aid on link-dense reference/listing
   pages, but applying it globally would risk bleeding into buttons and card
   CTAs, which should read the same regardless of visited state. Browsers only
   allow color-ish properties here (privacy: no font-weight, no content), so
   this is a subtly darker shade rather than a different hue. */
.prose a:visited { color: var(--color-accent-800); }

img { display: block; max-width: 100%; }

/* The hidden attribute has to beat component display rules. Several components
   here set display:flex or display:grid on the same element that script wants
   to hide (the plan cards on /signup/, for one), and a class selector outranks
   the user agent's own [hidden] rule - so without this, el.hidden = true does
   nothing at all. */
[hidden] { display: none !important; }
figure { margin: 0; }

hr {
  height: 1px;
  border: 0;
  margin: var(--space-8) 0;
  background: var(--color-divider);
}

code, pre {
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, "Liberation Mono", monospace;
  /* 13px was set against a 17px body face, which put code blocks a full four
     points under the prose around them - small enough that a config file or a
     PHP example was harder to read than the paragraph explaining it, which is
     backwards on pages whose whole point is the code. 15.5px is still a step
     down from the body (monospace sets optically larger at the same size, so
     matching 17 exactly would read as bigger than the prose) but it is a step,
     not a drop. */
  font-size: 15.5px;
}
code { font-size: 17px; color: var(--color-accent-700); }
pre {
  padding: var(--space-3) var(--space-4);
  background: var(--code-bg, var(--color-neutral-100));
  color: var(--code-fg, inherit);
  border: 1px solid var(--code-border, var(--color-divider));
  border-radius: var(--radius-md);
  overflow-x: auto;
}
pre code { font-size: inherit; color: inherit; }

/* ── code blocks: the light/dark switch ─────────────────────────────────────

   Every code block on the site can be read light-on-dark or dark-on-light,
   and the choice is the reader's, not the page's. It is one setting for the
   whole site rather than per block: someone who wants dark code wants it in
   every example on every page, and a per-block memory would mean a page of
   six examples in two different schemes.

   How it is wired:

   - The chosen scheme lives in the `formulize_code_theme` cookie and is put on
      as data-code-theme by a tiny inline script in  (see
     _includes/head-custom.html), so it is set before the first paint. Doing it
     from the deferred script instead would paint every block light and then
     repaint it dark, which is the flash this avoids.
   - assets/js/code-theme.js wraps each block in .code-block at load and adds
     the button. The wrapper exists because 
 scrolls horizontally: a
     button positioned inside it would slide away with the code.
   - The three --code-* custom properties below are what actually changes.
     
 reads them with light-mode fallbacks, so a block still renders
     correctly with the script blocked or JavaScript off - the toggle simply is
     not there.
   - The syntax colours are the other half of this and live with the rest of
     the highlighting theme, in _sass/rouge-dark.scss. */

:root[data-code-theme="dark"] {
  --code-bg: #14181a;
  --code-fg: #e6edf3;
  --code-border: #30383c;
}

.code-block {
  position: relative;
  margin: 0 0 var(--space-4);
}
/* The block inside the wrapper carries the margin no longer - the wrapper does
   - so a code block occupies exactly the space it did before it was wrapped. */
.code-block > pre,
.code-block > .highlight,
.code-block > .highlighter-rouge { margin-bottom: 0; }
/* .prose caps each of its direct children at the reading measure and exempts
   code from that cap by element; once wrapped, the wrapper is the child, so it
   needs the exemption instead or every code block folds to 52rem. */
.prose > .code-block { max-width: none; }

.code-theme-toggle {
  position: absolute;
  top: var(--space-2);
  right: var(--space-2);
  z-index: 1;
  padding: 2px var(--space-2);
  font-family: var(--font-body);
  font-size: 12.5px;
  line-height: 1.6;
  letter-spacing: var(--tracking);
  color: var(--color-neutral-700);
  background: var(--color-neutral-200);
  border: 1px solid var(--color-divider);
  border-radius: var(--radius-sm);
  cursor: pointer;
  /* Understated until wanted: the button sits over the top-right of the code,
     where a long first line may run under it, so it stays quiet at rest and
     comes forward on hover and on keyboard focus. */
  opacity: 0.55;
  transition: opacity 0.15s ease, background 0.15s ease, color 0.15s ease;
}
.code-block:hover .code-theme-toggle,
.code-theme-toggle:hover,
.code-theme-toggle:focus-visible { opacity: 1; }
.code-theme-toggle:hover { background: var(--color-accent-100); color: var(--color-accent-800); }
:root[data-code-theme="dark"] .code-theme-toggle {
  color: #c9d4dc;
  background: #232b2f;
  border-color: #3d474c;
}
:root[data-code-theme="dark"] .code-theme-toggle:hover { background: #303a3f; color: #ffffff; }
/* Coarse pointers have no hover to reveal it with, so it is simply always on. */
@media (hover: none) {
  .code-theme-toggle { opacity: 1; }
}

blockquote {
  border-left: 3px solid var(--color-accent-300);
  padding-left: var(--space-4);
  font-style: italic;
  color: var(--color-neutral-700);
}

:focus { outline: none; }
:focus-visible { outline: 2px solid var(--color-accent); outline-offset: 2px; }
::selection { background: color-mix(in srgb, var(--color-accent) 30%, transparent); }

.text-muted { color: var(--color-neutral-700); }
.italic { font-style: italic; }
.visually-hidden {
  position: absolute; width: 1px; height: 1px; overflow: hidden;
  clip-path: inset(50%); white-space: nowrap;
}
.bold {
	font-weight: bold;
}
.italic {
	font-style: italic;
}
.underline {
	text-decoration: underline;
}

/* ── layout ─────────────────────────────────────────────────────────────── */

.page {
  width: 100%;
  max-width: var(--page-max);
  margin: 0 auto;
  padding: 0 var(--space-6);
}

/* No bottom padding: .band already ends in its own var(--space-12) bottom
   padding, the same as the gap between every other pair of bands - adding
   space-16 more here on top of that (and, until the fix above, another
   space-12 from the footer's own margin-top) was three closing gaps
   stacked on each other before the footer even started. */
/* The opening gap belongs to the column, not to 
: 
 is the full
   width of the window and transparent, so padding here is a full-width strip
   of whatever is behind the page, showing directly under the header box.
   Putting it inside .page means the fill below covers it. */
.site-main { padding: 0; }

/* An explicit fill on the content column, matching the page background it
   sits on. It was load-bearing when a pixel-pattern layer ran down the page
   behind everything - this is what kept the pattern in the margins and out
   from behind the words. That layer is gone (the pattern lives in the footer
   now), so this is belt and braces: it costs nothing and it means anything
   dropped in behind the page later has a clean column to work against.
   Scoped to 
's copy of .page; the footer has one too and it is blue. */
.site-main > .page {
  background-color: var(--color-bg);
  padding-top: var(--space-8);
}

.band { padding: var(--space-12) 0; }
/* Same job as .band-box's copy of this: the band's own padding owns its
   bottom edge, so a last child does not add its margin on top of it. It only
   ever catches a trailing 
 - a p, so it inherits the base
   paragraph margin, and a button row is almost always the last thing in its
   band - which was putting an extra space-4 under three button rows on the
   site while every band ending in a card or a grid got the padding alone. */
.band > :last-child { margin-bottom: 0; }
/* Zeroes the gap between two stacked bands so it's one space-12, not two.
   Also covers the page heading immediately before the first band - that
   heading is a bare .band-head div or (videos.html) a bare h1, never a
   .band itself, so without this the heading's own bottom margin and the
   band's full padding-top stacked into a much bigger gap than any other
   pair of bands on the page. */
.band + .band,
.band-head + .band,
h1 + .band {
  padding-top: 0;
}

/* Wrap a band's contents in this to give them the same tinted, bordered card
   the Features and Pricing pages end on. It started out as protection - the
   pixel pattern used to reach into the page at both ends, and text sitting
   over it needed a clean ground - but the pattern is confined to the header
   now and this is purely a visual device: a way to close a page off with
   something more deliberate than another run of loose text. */
.band-box {
  padding: var(--space-6);
  background-color: var(--color-accent-100);
  border: 1px solid var(--color-divider);
  border-radius: calc(var(--radius-lg) * 1.15);
  box-shadow: var(--shadow-sm);
  transition: box-shadow 0.15s ease;
}
/* Same rest/hover shadow step as .card, so every tinted box on the site
   lifts the same way regardless of which of the two it's built from. */
.band-box:hover { box-shadow: var(--shadow-md); }
.band-box > :last-child { margin-bottom: 0; }

.band-head { max-width: 62ch; margin-bottom: var(--space-8); }
.band-head h2 { margin-bottom: var(--space-2); }
.band-head p { margin: 0; color: var(--color-neutral-800); font-size: 19px; line-height: 1.5; }
.band-head p + p { margin-top: var(--space-3); }
/* A .band-head that is only a heading, sitting directly on top of its own
   content inside a box rather than introducing a whole band. The standard
   space-8 below is sized for a heading plus a lede paragraph with a band's
   worth of air under it; over a bare list in a .band-box it just reads as a
   gap. */
.band-head-tight { margin-bottom: var(--space-4); }

.band-head-row {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--space-6);
  flex-wrap: wrap;
  margin-bottom: var(--space-6);
}
.band-head-row h2, .band-head-row h3 { margin: 0; }

/* A band's "See all ..." button: at the right of the heading on a wide screen,
   below the cards once they stack into a single column (620px, the same width
   .quad collapses at, further down). Both copies are in the markup and only
   one is ever displayed - display: none also takes the hidden one out of the
   tab order and the accessibility tree, so it is never read out twice. The
   .band-head-row prefix is what beats .btn's display: inline-flex, declared
   further down, which would win at equal specificity. */
.band-foot-cta { display: none; }
@media (max-width: 620px) {
  .band-head-row .band-head-cta { display: none; }
  .band-foot-cta { display: block; }
}

.inpage-anchor { padding-top: var(--space-8); }
.inpage-anchor-heading { margin-bottom: var(--space-1); }

/* ── buttons ────────────────────────────────────────────────────────────── */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  cursor: pointer;
  text-decoration: none;
  font-family: var(--font-heading);
  font-weight: var(--font-heading-weight);
  font-size: 15px;
  line-height: 1.2;
  white-space: nowrap;
  /* Dark blue at rest, darker blue on hover - on every button, filled or
     outlined. Set once here rather than per role so .btn-primary's green
     fill and the outlined ones can't drift apart. The only exception is the
     hero, further down, where the button sits on blue and has to stay white.

     700, the same blue as body links. This was 900 for a while, to clear
     4.5:1 on the darker :active green in one go - but 900 is only 1.4:1
     against the black these went to on hover, so both states read as flat
     black and the hover change was invisible. The fix is to stop hovering
     to black (see below) and let the resting colour be a blue you can
     actually see: 700 is 8:1 on the page background and 4.8:1 on the green
     fill. The one place it doesn't clear AA is the pressed green, handled
     on .btn-primary:active rather than by darkening every button. */
  color: var(--color-accent-700);
  background: transparent;
  border: 1px solid transparent;
  padding: var(--space-3) var(--space-6);
  border-radius: var(--radius-md);
  transition: background-color 120ms ease, color 120ms ease, transform 0.15s ease;
}
/* Buttons don't get a separate visited colour - pinned to the same blue as
   .btn above rather than left to default to the browser's visited-link
   colour. Browsers restrict :visited styling for privacy and, as part of
   that, won't animate a transition through it - so a genuinely different
   visited colour doesn't fade in/out smoothly like every other state here,
   it pops. Declared before :hover/:focus-visible (LVHA order) so hovering a
   visited button still darkens to 900 rather than getting stuck on this. */
.btn:visited { color: var(--color-accent-700); }
/* Hover is a scale-up plus the text darkening two steps, 700 -> 900 — same
   scale treatment as the .action-strip tiles. Deliberately not black: black
   is so close to any blue dark enough to sit on the green fill that the
   change can't be seen, which is what went wrong before. 900 keeps the hue
   and just drops the lightness, which is legible because the resting 700 is
   light enough to read as blue in the first place. :active (an actual
   press) still darkens the fill, as distinct feedback for the click itself
   rather than just pointing at it. */
.btn:hover, .btn:focus-visible { transform: scale(1.05); color: var(--color-accent-900); }
/* Two roles: primary (filled, the one strong action) and secondary
   (outlined, everything else). A third role, ghost, used to exist alongside
   secondary - a borderless "plain text" button - but it read as a link
   rather than a button sitting next to one, so it was merged into secondary
   (sharing this exact style) and, later, every ghost button in the site's
   HTML was reclassed to secondary outright and the class dropped for good.

   Secondary also briefly carried a dark-blue fill of its own for a few
   commits (see git history if it's ever wanted back) - reverted, it
   competed too much with primary's green over which one read as the strong
   action.

   Secondary used to need a different class on every dark background it sat
   on (btn-on-dark in the hero, btn-outline-light also in the hero, a
   .header-cta override in the header) because its border/text colors were
   hard-coded for a light background. It's custom properties now, so context
   (hero) can just override the properties below instead of needing a whole
   separate class — one visual style everywhere, auto-adapting instead of
   hand-matched per spot. btn-brand dropped even earlier: nothing in the
   site referenced it. */
/* No colour of its own: takes the 700/900 blues from .btn above. */
.btn-primary { background: var(--color-cta); }
/* The one spot the resting 700 doesn't clear 4.5:1: on the pressed green it
   is 3.3:1. Hovering already moves it to 900 (6.1:1 there), but a press can
   happen without a hover - keyboard Enter/Space, and touch - so pin it here
   too rather than relying on :hover being along for the ride. */
.btn-primary:active { background: var(--color-cta-active); color: var(--color-accent-900); }
.btn-secondary {
  --btn-secondary-border: var(--color-divider);
  --btn-secondary-active-bg: color-mix(in srgb, var(--color-text) 14%, transparent);
  border-color: var(--btn-secondary-border);
}
.btn-secondary:active { background: var(--btn-secondary-active-bg); }
/* Outlined buttons sitting straight on a dark panel with no fill of their
   own - the hero, and the note beside the Managed plan - so they're the
   exception to the 700/900 rule: both of those disappear into the blue
   otherwise. Scoped to .plan-aside on the Managed side, NOT the whole band:
   the "Sign up" button in that row is also a .btn-secondary, but it sits on
   a white card, where white-on-white would erase it. The custom properties and the
   rest/visited colour are set here on the plain (no pseudo-class) selector,
   which keeps matching through :hover too, so :hover below only has to
   touch colour - it doesn't need to repeat the border/active-bg values. In
   the header, the equivalent button gets a light fill instead and so can
   keep the normal 700/900.

   --color-neutral-200 rather than white at rest - the same off-white the
   "Getting started" style footer headings use, which sits on this same
   --color-hero blue in .footer-panel, so it's already proven there. */
.hero .btn-secondary,
.hero .btn-secondary:visited,
.plan-band-team .plan-aside .btn-secondary,
.plan-band-team .plan-aside .btn-secondary:visited {
  --btn-secondary-border: rgba(255, 255, 255, 0.7);
  --btn-secondary-active-bg: rgba(255, 255, 255, 0.28);
  color: var(--color-neutral-200);
}
/* White on hover/focus instead of the 900 everywhere else - a blue that
   dark would read as barely-there on the hero's blue. Listed after .btn:hover
   deliberately - same specificity, so being later is what keeps it white on
   hover too. */
.hero .btn-secondary:hover,
.hero .btn-secondary:focus-visible,
.plan-band-team .plan-aside .btn-secondary:hover,
.plan-band-team .plan-aside .btn-secondary:focus-visible {
  color: #fff;
}
.btn-sm { padding: var(--space-2) var(--space-4); font-size: 14px; }
.btn-block { width: 100%; }

.btn-row { display: flex; flex-wrap: wrap; gap: var(--space-3); }

/* ── tags ───────────────────────────────────────────────────────────────── */

.tag {
  display: inline-flex;
  align-items: center;
  font-size: 12.5px;
  letter-spacing: 0.02em;
  padding: 3px 11px;
  border-radius: 999px;
  white-space: nowrap;
}
.tag-accent { background: var(--color-accent-100); color: var(--color-accent-800); }
.tag-accent-2 { background: var(--color-accent-2-100); color: var(--color-accent-2-800); }
.tag-neutral { background: var(--color-neutral-100); color: var(--color-neutral-800); }
.tag-outline { border: 1px solid var(--color-accent); color: var(--color-accent-700); }

/* ── site header + main menu ────────────────────────────────────────────── */

.site-header {
  position: sticky;
  top: 0;
  z-index: 50;
  /* White, with a green rule underneath - the mirror of .site-footer, which
     is white with the same green rule on top. Between them the page is
     bracketed by two green lines, and the light blue in the middle is the
     page rather than the chrome.

     The fill has to stay opaque: the header is sticky, so once scrolled it
     carries this strip over the page instead of letting content show
     through. White qualifies; the old --color-bg did too, but it was the
     same colour as the page, so the header had no edge of its own and the
     rule is now what gives it one.

     Padding is symmetric now. It was var(--space-4) 0 0 when the bar inside
     was a dark panel sitting on a pattern, where any bottom padding showed
     as a strip of pattern under the box. There is no box and no pattern
     here any more, so the bar just needs equal air above and below it. */
  background-color: var(--color-surface);
  border-bottom: 4px solid var(--color-accent-2);
  padding: var(--space-4) 0;
}

/* The header is sticky, so any in-page anchor - including the nav
   dropdowns' jumps into Features/Examples - needs room to land below it
   rather than under it. The header itself is ~108px tall at desktop widths
   (17.6px padding top and bottom, the 69px logo, the 4px rule) - this has to
   clear that plus a bit of breathing room, or the target still lands partly
   behind the header instead of below it. */
[id] { scroll-margin-top: 128px; }

/* The row is just layout: the page-width column the header's contents sit
   in. Vertical spacing belongs to .site-header's padding, not here. */
.site-header-inner {
  display: flex;
  align-items: center;
  padding: 0 var(--space-6);
  max-width: var(--page-max);
  margin: 0 auto;
}

/* A flex row, not a panel. This was a dark blue box for as long as the
   header had a pattern behind it - it needed to be heavy enough to hold its
   own against that. With the header white there is nothing to hold out
   against, and a filled box on white would just be a second surface for no
   reason, so the fill, the radius and the white text are all gone and the
   header's own ground shows through.

   The logo's box went with it. That box existed to give the wordmark a light
   ground, because its grey lettering and the dark blue border on its
   checkmark were drawn for one and went muddy straight on the blue. White is
   a light ground, so the artwork is already on what it was drawn for and the
   box has nothing left to do. .brand's own colours apply now. */
.header-bar {
  display: flex;
  align-items: center;
  gap: var(--space-6);
  flex: 1;
  min-width: 0;
  padding: 0;
}

.brand {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-1);
  text-decoration: none;
  color: var(--color-text);
  margin-right: auto;
}
/* 69px, at the image's native 8008x1764 ratio, renders 313px wide - measured
   as the largest size that still holds that ratio once the viewport reaches
   --page-max (1160px), where .site-header-inner stops growing and the row's
   width is fixed regardless of how much wider the window gets. This is
   taller than the old fixed 58px, and taller than .header-cta's 82px
   stacked-button ceiling once the gap and tagline are added on top - the
   logo is now the tallest thing in the row on wide screens, and the header
   is a bit taller for it. Accepted trade for the bigger logo.

   Below 1160px, .header-bar's width shrinks 1:1 with the viewport while the
   full menu is still inline (the 1060px breakpoint below is where it moves
   behind the toggle instead), so the row has steadily less room for the
   brand block - 69px stops fitting almost immediately. 48px is the value
   that still holds its ratio down to the 1060px wrap; past that the menu no
   longer competes for space, so 48px keeps being safe all the way to the
   560px breakpoint below, where the tagline disappears and the logo drops
   again to 36px. */
.brand-logo { width: auto; height: 69px; }
.brand-tagline {
  display: block;
  font-family: var(--font-body);
  font-size: 12.5px;
  letter-spacing: 0.04em;
  white-space: nowrap;
  color: var(--color-neutral-600);
  margin-top: 0;
}

.main-nav ul {
  display: flex;
  align-items: center;
  gap: var(--space-1);
  list-style: none;
  margin: 0;
  padding: 0;
}
.main-nav li { margin: 0; }
/* Dark blue on white. These were white with translucent-white chips when the
   bar was a dark panel; on white that whole scheme inverts - a translucent
   white chip on white is invisible, so both states are opaque tints now.

   The two states are deliberately different hues rather than two strengths
   of one: blue for hover, green for the page you are on. Hover is transient
   and happens under the pointer, where a tint of the link's own colour reads
   as the link lighting up. The current-page marker has to be legible at a
   glance with nothing pointing at it, and green is the only other colour in
   the header - it is the rule underneath - so it reads as a marker rather
   than as a slightly stronger hover. */
.main-nav a {
  display: block;
  padding: var(--space-2) var(--space-3);
  border-radius: var(--radius-md);
  color: var(--color-accent-800);
  text-decoration: none;
  font-size: 15.5px;
  font-weight: 500;
  white-space: nowrap;
}
.main-nav a:hover { background: var(--color-accent-100); color: var(--color-accent-900); }
/* .nav-section-current is the same marker on a top-level item whose section
   you are somewhere inside - see the comment in _includes/nav.html for what
   counts as inside. It is deliberately the identical green rather than a
   weaker version of it: the question this answers is "which part of the site
   am I in", and a half-strength answer to that just reads as a rendering
   glitch next to the full-strength one on the dropdown item. Only ever one
   top-level item carries it, so there is nothing for it to compete with. */
.main-nav a[aria-current="page"],
.main-nav a.nav-section-current {
  background: var(--color-accent-2-200);
  color: var(--color-accent-900);
}

/* Dropdowns: hover for a mouse, focus-within for a keyboard, so a Tab
   press behaves the same as a hover instead of skipping the submenu. The
   top-level link stays a real link either way - the dropdown is a shortcut
   past it, not the only way in. */
.main-nav li { position: relative; }
.main-nav li.has-dropdown > a::after {
  content: "";
  display: inline-block;
  width: 5px;
  height: 5px;
  margin-left: 6px;
  margin-bottom: 1px;
  /* Was translucent white for the dark bar; on white it needs to be a
     lightened version of the link colour instead, so it reads as part of the
     link rather than as a separate mark. */
  border-right: 1.5px solid var(--color-accent-500);
  border-bottom: 1.5px solid var(--color-accent-500);
  transform: rotate(45deg);
}
/* This floating-panel appearance (absolute position, translate/opacity
   reveal on hover or focus-within) is the desktop dropdown only - the
   max-width: 1060px block further down replaces it with a plain inline
   list. It has to be walled off behind the matching min-width here,
   because :focus-within beats that mobile override on specificity alone
   (four classes/pseudo-classes vs. two) regardless of source order: without
   this guard, tapping a link inside a mobile dropdown re-applied this
   block's `transform: translate(-50%, 0)` on top of the mobile reset,
   sliding that submenu about half its own width to the left - off the edge
   of the screen - for as long as focus stayed inside it. */
@media (min-width: 1061px) {
  .main-nav .nav-dropdown {
    /* .main-nav ul (above) makes every