/* ==========================================================================
   COMPONENTS - header, nav, buttons, media frames, forms, footer
   Reusable across every future page. Homepage-specific layout is in home.css.
   ========================================================================== */

/* ==========================================================================
   MASTHEAD

   The paper, not a panel. Cream ground, black wordmark, the standfirst and
   the one orange callout. In normal flow, so it scrolls away.

   HOW MUCH OF THE HEADER IS BLUE. Painting the masthead Prussian as well as
   the bar came to 185px of solid blue, 20.6 per cent of the first screen and,
   with the podcast band added, a quarter of the whole page. At that share it
   stops reading as an accent and starts reading as a brand colour applied to
   everything, which is what this design is getting away from. Blue on the bar
   alone takes it to 18.4 per cent and hands the wordmark 20:1 on cream.
   ========================================================================== */
.masthead {
  background: var(--c-ground);
  padding-block: var(--s-6) var(--s-5);
}
.masthead__in {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: var(--s-5);
  text-align: center;
}
.masthead__brand {
  display: inline-block;
  text-decoration: none;
  font-family: var(--font-display);
  font-optical-sizing: auto;
  font-size: clamp(1.9rem, 1.2rem + 2.2vw, 2.9rem);
  font-weight: 600;
  letter-spacing: -0.03em;
  line-height: 1;
  color: var(--c-ink);                    /* 20:1 on the cream */
}
.masthead__brand .brand__tld { color: var(--c-ink-3); font-weight: 400; }
/* --c-ink-2, not --c-ink-3. At 11px uppercase with this much tracking it is
   the thinnest text on the page, and the lighter grey measured 4.88:1, which
   clears AA but only just, at a size where only just is not enough. */
.masthead__line {
  margin: var(--s-3) 0 0;
  font-size: 11px;
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
  color: var(--c-ink-2);                  /* 10.9:1 */
}
.masthead__cta { justify-self: end; }

/* ==========================================================================
   HEADER + NAVIGATION

   The chrome: Prussian, sticky, the categories. Three tracks, and the outer
   two keep their width whether or not anything is painted in them, so the
   categories sit dead centre in both states and revealing the wordmark and
   the button moves nothing.
   ========================================================================== */
.site-header {
  position: sticky;
  top: 0;
  z-index: 100;
  background: var(--c-ground);
  border-bottom: var(--border);
}

.site-header__inner {
  height: var(--header-h);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-5);
}


/* ---- Brand placeholder -------------------------------------------------
   Swap the text node inside .brand for an <img>/<svg> logo later. Nothing
   else in the header needs to change: the flex box sizes to its content. */
.brand {
  display: inline-flex;
  align-items: center;
  gap: var(--s-2);
  text-decoration: none;
  color: var(--c-ink);
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 1.06rem;
  letter-spacing: -0.015em;
  white-space: nowrap;
}
.brand:hover { color: var(--c-ink); }
.brand__tld { color: var(--c-ink-3); font-weight: 400; }

.site-nav { display: flex; align-items: center; gap: var(--s-5); }

.site-nav__list {
  display: flex;
  align-items: center;
  /* Half the old gap, because the divider now sits in the middle of it and
     takes the other half as its own margin: 12 + rule + 12 lands close to the
     24 the bar had before, so the row does not get wider. */
  gap: var(--s-3);
  list-style: none;
  margin: 0;
  padding: 0;
}

/* DIVIDERS BETWEEN THE CATEGORIES, broadsheet style.

   An empty pseudo element with a background, not a "|" character. A pipe in
   CSS content is announced by some screen readers, so a nav of five items
   would be read as five items and four pipes. This is purely a painted rule
   and says nothing.

   Desktop only: below the drawer breakpoint the items stack vertically and
   already carry their own bottom rules, where a vertical divider would be
   nonsense. */
@media (min-width: 901px) {
  .site-nav__list li + li::before {
    content: "";
    display: inline-block;
    width: 1px;
    height: 0.95em;
    margin-right: var(--s-3);
    vertical-align: -0.14em;
    background: rgb(255 255 255 / 0.32);
  }
}

.site-nav__link {
  display: inline-block;
  padding-block: var(--s-2);
  font-size: var(--fs-sm);
  font-weight: 500;
  color: var(--c-ink-2);
  text-decoration: none;
  border-bottom: 2px solid transparent;
  transition: color var(--dur) var(--ease), border-color var(--dur) var(--ease);
}
.site-nav__link:hover { color: var(--c-ink); border-bottom-color: var(--c-rule-strong); }
.site-nav__link[aria-current="page"] { color: var(--c-ink); border-bottom-color: var(--c-accent); }

.nav-toggle {
  display: none;
  align-items: center;
  justify-content: center;
  width: 42px; height: 42px;
  padding: 0;
  background: none;
  border: var(--border);
  border-radius: var(--radius);
  color: var(--c-ink);
  cursor: pointer;
}
.nav-toggle:hover { border-color: var(--c-rule-strong); }
.nav-toggle .icon--close { display: none; }
.nav-toggle[aria-expanded="true"] .icon--open { display: none; }
.nav-toggle[aria-expanded="true"] .icon--close { display: block; }

/* ORDER MATTERS HERE. This block has to come after the base .site-nav rule.
   It sets .site-nav to display:contents, and the base rule sets it to
   display:flex at the same specificity, so whichever is written last wins.
   Written earlier, the flex box survived, the callout stayed inside the
   centre track, and the categories sat 74px left of centre.

   Desktop only: the bar takes the three track layout and the wordmark and the
   button wait, unpainted, for the masthead to leave. None of this applies
   below the drawer breakpoint, where the bar carries the brand and the
   hamburger at all times and there is no masthead to wait for. */
@media (min-width: 901px) {
  .site-header__inner {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
  }
  /* The callout has to live inside .site-nav so the drawer can carry it on a
     phone, but on desktop it must be a grid item in its own right or it rides
     along inside the centre track and pushes the categories off centre.
     display:contents dissolves the nav box on desktop only and leaves the
     list and the button as direct children of the grid. */
  .site-nav { display: contents; }
  .site-nav__list { justify-self: center; }

  .site-header .brand,
  .site-header__cta {
    opacity: 0;
    visibility: hidden;
    transition: opacity 150ms var(--ease), visibility 150ms;
  }
  .site-header .brand { justify-self: start; font-size: 1.05rem; }
  .site-header__cta   { justify-self: end; }

  :root[data-header="condensed"] .site-header .brand,
  :root[data-header="condensed"] .site-header__cta {
    opacity: 1;
    visibility: visible;
  }
}

/* No masthead on a phone: it would cost most of a screen before the first
   story. The bar carries the brand there, and it is always painted. */
@media (max-width: 900px) {
  .masthead { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  .site-header .brand, .site-header__cta { transition: none; }
}

/* ==========================================================================
   BREADCRUMB
   Shared by topic pages, playbook pages and anything else with a parent.
   ========================================================================== */
.breadcrumb { margin-bottom: var(--s-5); }
.breadcrumb ol {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--s-2);
  list-style: none;
  margin: 0;
  padding: 0;
  font-size: var(--fs-xs);
  color: var(--c-ink-3);
}
.breadcrumb a { color: var(--c-ink-3); text-decoration: none; }
.breadcrumb a:hover { color: var(--c-ink); text-decoration: underline; text-underline-offset: 2px; }
.breadcrumb [aria-current="page"] { color: var(--c-ink-2); }
.breadcrumb__sep { color: var(--c-rule-strong); }


/* ==========================================================================
   BUTTONS
   Two only: solid accent (primary) and outlined (secondary). Plus a text link.
   Labels are short enough to never wrap at desktop.
   ========================================================================== */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--s-2);
  padding: 0.72rem 1.15rem;
  border-radius: var(--radius);
  border: 1px solid transparent;
  font-family: var(--font-body);
  font-size: var(--fs-sm);
  font-weight: 600;
  line-height: 1.2;
  white-space: nowrap;
  text-decoration: none;
  cursor: pointer;
  transition: background-color var(--dur) var(--ease),
              border-color var(--dur) var(--ease),
              color var(--dur) var(--ease),
              transform var(--dur) var(--ease);
}
.btn:active { transform: translateY(1px); }

/* ONE BUTTON, ONE COLOUR, EVERYWHERE.

   Every primary call to action on the site is butter with espresso type and a
   hairline espresso rule, on cream and on the dark band alike. That is the
   whole point: a reader should be able to pick the clickable thing out of any
   page on this site by colour alone, without reading it, the way lavender
   works on Wispr Flow and blue works on 7shifts.

   Butter is a pale block, so the rule is not decoration. It is what keeps the
   button reading as a control rather than as a highlighted paragraph, and it
   is why the same button survives being put on espresso.

   Espresso stays the colour of links and structure. A link is a word, a button
   is an object, and they no longer have to share a colour to be consistent. */
/* Type on butter takes --c-on-statement, not the accent. Identical in light
   mode, where the accent IS espresso; the difference is dark mode, where the
   accent inverts to cream and butter does not, which left this button at
   1.2:1 on every page of the site. */
.btn--primary {
  background: var(--c-statement);
  color: var(--c-on-statement);
  border-color: var(--c-on-statement);
}
.btn--primary:hover {
  background: color-mix(in srgb, var(--c-statement) 86%, var(--c-on-statement));
  border-color: var(--c-on-statement);
  color: var(--c-on-statement);
}

/* In the masthead the callout is not a control in a toolbar, it is the one
   commercial moment on the page, so it gets real size. It wins on colour, not
   by shouting. */
.btn--lg {
  font-size: var(--fs-sm);
  padding: 0.95em 1.7em;
  letter-spacing: 0.1em;
}

/* Secondary is an outline and carries no fill, which is what keeps butter
   meaning "this is the thing to press" on a page that offers two choices. */
.btn--secondary {
  background: transparent;
  color: var(--c-ink);
  border-color: var(--c-rule-strong);
}
.btn--secondary:hover { border-color: var(--c-accent); color: var(--c-accent); }

/* Used on the accent band, where the page accent is the background. */
/* On the espresso band the button is butter, not white. White made the band
   read as a notification bar: one flat rectangle on another with nothing
   between them. Butter is the statement colour doing the job it exists for,
   and espresso type on it clears 8:1. */
.btn--on-accent {
  background: var(--c-statement);
  color: var(--c-on-statement);
  /* On espresso an espresso rule is invisible, so the rule becomes the butter
     itself. The button is otherwise identical to the one on a cream page. */
  border-color: var(--c-statement);
}
.btn--on-accent:hover {
  background: color-mix(in srgb, var(--c-statement) 88%, #FFFFFF);
  border-color: color-mix(in srgb, var(--c-statement) 88%, #FFFFFF);
  color: var(--c-on-statement);
}

.btn--full { width: 100%; }

/* Inline text link with a trailing arrow. */
.link-arrow {
  display: inline-flex;
  align-items: center;
  gap: var(--s-2);
  font-size: var(--fs-sm);
  font-weight: 600;
  color: var(--c-accent);
  text-decoration: none;
}
.link-arrow .icon { transition: transform var(--dur) var(--ease); }
.link-arrow:hover .icon { transform: translateX(3px); }

/* ==========================================================================
   MEDIA FRAMES
   Every human image on this site is a real operator photograph. Until those
   arrive, these frames hold the exact aspect ratio and show what is needed.
   ========================================================================== */
.media {
  position: relative;
  overflow: hidden;
  border-radius: var(--radius);
  background: var(--c-surface-2);
  border: var(--border);
}
.media img { width: 100%; height: 100%; object-fit: cover; }

.media--portrait { aspect-ratio: 4 / 5; }
.media--video    { aspect-ratio: 16 / 9; }
.media--square   { aspect-ratio: 1 / 1; }

/* Placeholder label sitting inside an empty frame. */
.media__slot {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--s-2);
  padding: var(--s-4);
  text-align: center;
  color: var(--c-ink-2);
  font-size: var(--fs-xs);
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
}

/* ==========================================================================
   FORMS
   Label above input. No placeholder-as-label. Error slot below, in markup.
   ========================================================================== */
.field { display: flex; flex-direction: column; gap: var(--s-2); }

.field__label {
  font-size: var(--fs-sm);
  font-weight: 600;
  color: var(--c-ink);
}

.field__input {
  width: 100%;
  padding: 0.7rem 0.85rem;
  font-family: var(--font-body);
  font-size: 1rem; /* 16px minimum stops iOS zooming on focus */
  color: var(--c-ink);
  background: var(--c-surface);
  border: var(--border-strong);
  border-radius: var(--radius);
  transition: border-color var(--dur) var(--ease);
}
.field__input::placeholder { color: var(--c-ink-3); }
.field__input:hover { border-color: var(--c-ink-3); }
.field__input:focus { border-color: var(--c-accent); }

.field__hint  { font-size: var(--fs-xs); color: var(--c-ink-3); }
.field__error { font-size: var(--fs-xs); color: var(--c-ink); font-weight: 600; }
.field__error[hidden] { display: none; }

.form-row {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: var(--s-3);
  align-items: end;
}

/* Form styling on the accent band. */
.form--on-accent .field__label { color: var(--c-on-accent); }
.form--on-accent .field__input {
  background: var(--c-on-accent);
  color: var(--c-ink);
  border-color: transparent;
}
.form--on-accent .field__input::placeholder { color: var(--c-ink-3); }
.form--on-accent .field__hint { color: color-mix(in srgb, var(--c-on-accent) 78%, transparent); }

/* ==========================================================================
   BUILD NOTE
   A visible, deliberately plain marker for anything not yet wired up.
   Delete the element and the note disappears. Search: BUILD NOTE
   ========================================================================== */
.build-note {
  display: block;
  margin-top: var(--s-3);
  padding: var(--s-3) var(--s-4);
  border: 1px dashed var(--c-rule-strong);
  border-radius: var(--radius);
  font-size: var(--fs-xs);
  line-height: 1.5;
  color: var(--c-ink-3);
  background: transparent;
}
.form--on-accent .build-note {
  border-color: color-mix(in srgb, var(--c-on-accent) 40%, transparent);
  color: color-mix(in srgb, var(--c-on-accent) 82%, transparent);
}

/* ==========================================================================
   HIRING CTA BAND
   The one commercial moment. Used on the homepage and on hiring related topic
   pages, so it lives here rather than in a page specific stylesheet. Full bleed
   accent band, so it reads as a change of gear without changing the page theme.
   ========================================================================== */
.hiring {
  background: var(--c-accent);
  color: var(--c-on-accent);
  padding-block: var(--s-9);
}
.hiring__inner { max-width: var(--w-narrow); margin-inline: auto; text-align: center; }
.hiring h2 { color: var(--c-on-accent); }
.hiring__lead {
  margin: var(--s-4) auto 0;
  font-size: var(--fs-lead);
  line-height: 1.55;
  color: color-mix(in srgb, var(--c-on-accent) 88%, transparent);
  max-width: 50ch;
}
.hiring__form { margin-top: var(--s-7); text-align: left; }
.hiring__fields { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s-4); }
.hiring__submit { margin-top: var(--s-5); }

@media (max-width: 760px) {
  .hiring__fields { grid-template-columns: 1fr; }
  .hiring__inner { text-align: left; }
  .hiring__lead { margin-inline: 0; }
}

/* ==========================================================================
   FOOTER
   ========================================================================== */
.site-footer {
  border-top: var(--border);
  padding-block: var(--s-8) var(--s-6);
  margin-top: var(--s-9);
}

.site-footer__top {
  display: grid;
  grid-template-columns: 1.4fr repeat(3, 1fr);
  gap: var(--s-7) var(--s-5);
}

.site-footer__brandcol p {
  margin-top: var(--s-3);
  font-size: var(--fs-sm);
  color: var(--c-ink-2);
  max-width: 34ch;
}

.footer-col__title {
  font-family: var(--font-body);
  font-size: var(--fs-xs);
  font-weight: 600;
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
  color: var(--c-ink-3);
  margin-bottom: var(--s-4);
}

.footer-col__list { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--s-3); }
.footer-col__list a {
  font-size: var(--fs-sm);
  color: var(--c-ink-2);
  text-decoration: none;
}
.footer-col__list a:hover { color: var(--c-ink); text-decoration: underline; text-underline-offset: 2px; }

.site-footer__bottom {
  margin-top: var(--s-8);
  padding-top: var(--s-5);
  border-top: var(--border);
  display: flex;
  justify-content: space-between;
  gap: var(--s-4);
  flex-wrap: wrap;
  font-size: var(--fs-xs);
  color: var(--c-ink-3);
}

/* ==========================================================================
   RESPONSIVE
   Every multi-column block collapses explicitly. Nothing is left to chance.
   ========================================================================== */
@media (max-width: 980px) {
  .site-footer__top { grid-template-columns: 1fr 1fr; }
  .site-footer__brandcol { grid-column: 1 / -1; }
}

/* 900, not 860. With two buttons in the bar the desktop layout needs about
   890px; below the old breakpoint it overflowed between 861 and 889, which is
   a real window size. The drawer now takes over before the bar runs out. */
@media (max-width: 900px) {
  .nav-toggle { display: inline-flex; }

  .site-nav {
    position: fixed;
    inset: var(--header-h) 0 auto 0;
    display: block;
    padding: var(--s-5);
    background: var(--c-ground);
    border-bottom: var(--border);
    max-height: calc(100dvh - var(--header-h));
    overflow-y: auto;
  }
  .site-nav[hidden] { display: none; }

  .site-nav__list { flex-direction: column; align-items: stretch; gap: 0; }
  .site-nav__link {
    padding-block: var(--s-4);
    font-size: 1.05rem;
    border-bottom: var(--border);
  }
  .site-nav__link[aria-current="page"] { border-bottom-color: var(--c-accent); }
  .site-nav .btn { margin-top: var(--s-5); width: 100%; }
}

@media (max-width: 640px) {
  :root { --section-y: var(--s-8); --section-y-tight: var(--s-7); }
  .wrap { padding-inline: var(--s-4); }
  .site-footer__top { grid-template-columns: 1fr; gap: var(--s-6); }
  .form-row { grid-template-columns: 1fr; }
  .form-row .btn { width: 100%; }
}

/* --------------------------------------------------------------------------
   EMPTY FORM SLOT

   The Share your story page is where both of the site's primary buttons land,
   and its one section holds nothing but the marker comment for the HubSpot
   embed. While the review note was printed there the section had something in
   it; with notes out of the published build, the page showed a headline and
   then a tall empty band.

   A comment is not an element, so :empty will not match. :has looking for a
   real child will. The section disappears while the slot is empty and comes
   back the moment the embed is pasted in, with no second edit needed.
   -------------------------------------------------------------------------- */
.section--slot:not(:has(> .wrap > *)) { display: none; }

/* --------------------------------------------------------------------------
   HUBSPOT FORM EMBED

   The form renders inside a cross-origin iframe, so none of the site's CSS
   reaches the fields. Type, field fills and the submit button are set in the
   form provider's own editor and nowhere else; there is no point writing rules
   here that target them, because they will never apply. That was true of the
   HubSpot embed and is true of the Google Form replacing it.

   Two things are ours. First the measure: a form is read down a column, and
   left in the page container a single-line field would run 930px across.
   Second the frame. HubSpot pads the form inside the iframe, which made it sit
   indented from the headline above it with nothing to explain why. Giving the
   box a surface and a rule turns that padding into a card's padding, so the
   inset reads as intended instead of as a mistake. It also avoids pulling the
   iframe out with a negative margin, which would have had to be unwound at
   every width and would break the day HubSpot changes its padding.
   -------------------------------------------------------------------------- */
/* The card does not follow the theme. HubSpot draws a light form with dark
   labels no matter what the page is doing, and it cannot be told otherwise
   through a cross-origin iframe, so in dark mode an inverted card put those
   labels on near-black. Pinning the card light keeps the form coherent with
   itself, which matters more here than matching the page around it. */
.form-embed {
  max-width: 44rem;
  background: var(--c-surface-fixed);
  border: 1px solid var(--c-rule-fixed);
  border-radius: var(--radius);
  overflow: hidden;
}
.form-embed iframe { display: block; width: 100%; border: 0; }

/* ==========================================================================
   THE HEADER, IN PRUSSIAN

   The nav was the page ground with a hairline under it, which on white meant
   it barely existed. As a solid blue band it becomes the masthead of the
   publication: the one fixed thing at the top of every page, and the reason
   the white below it reads as paper rather than as the absence of a colour.

   It also gives the orange button somewhere to work. On white the CTA was a
   bright block on an empty field; on Prussian it is the single warm thing in
   a cool bar, which is the whole argument for this palette.

   Every value here is measured against #14213D, not assumed.
   ========================================================================== */
.site-header {
  background: var(--c-ground-ink);
  border-bottom: 0;
}
.site-header .brand      { color: var(--c-on-ink); }       /* 16:1 */
.site-header .brand:hover{ color: var(--c-on-ink); }
/* Scoped to the header. The footer carries the same .brand markup on a
   white ground, and unscoped this rule put its ".com" at 1.79:1 down there. */
.site-header .brand__tld { color: var(--c-on-ink-2); }     /* 8.9:1 on Prussian */

.site-nav__link { color: var(--c-on-ink-2); }              /* 8.9:1 */
.site-nav__link:hover {
  color: var(--c-on-ink);
  border-bottom-color: color-mix(in srgb, var(--c-on-ink) 45%, transparent);
}
/* The current page is marked in orange, not in white. White on white cannot
   say "you are here", and the orange is already the page's pointer. */
.site-nav__link[aria-current="page"] {
  color: var(--c-on-ink);
  border-bottom-color: var(--c-statement);
}

.nav-toggle {
  color: var(--c-on-ink);
  border-color: color-mix(in srgb, var(--c-on-ink) 32%, transparent);
}
.nav-toggle:hover { border-color: var(--c-on-ink); }

/* The drawer that opens under the bar on a phone has to be the bar's colour,
   or the menu drops out of a blue header onto a white sheet mid-gesture. */
@media (max-width: 900px) {
  .site-nav {
    background: var(--c-ground-ink);
    border-top: 1px solid color-mix(in srgb, var(--c-on-ink) 16%, transparent);
  }
}

/* ---- The header's second action -----------------------------------------
   An outline button for the blue bar. .btn--secondary is built for a white
   page: its ink and its rule both vanish on Prussian. This is the same shape
   in the bar's own terms, and it is deliberately quieter than the orange one
   beside it. */
.btn--ghost-on-ink {
  background: transparent;
  color: var(--c-on-ink);                                          /* 16:1 */
  border-color: color-mix(in srgb, var(--c-on-ink) 38%, transparent);
}
.btn--ghost-on-ink:hover {
  background: color-mix(in srgb, var(--c-on-ink) 10%, transparent);
  border-color: var(--c-on-ink);
  color: var(--c-on-ink);
}

.site-nav__cta { display: flex; align-items: center; gap: var(--s-3); }

/* In the drawer the two actions go full width and stack, because side by side
   at 360px they each get about 150px and the longer label wraps. */
@media (max-width: 900px) {
  .site-nav__cta {
    flex-direction: column;
    align-items: stretch;
    width: 100%;
    gap: var(--s-3);
  }
  .site-nav__cta .btn { width: 100%; }
}

/* ==========================================================================
   THE BAR ON A PHONE

   Three things have to fit 390px: the wordmark, the one call to action and the
   hamburger. Measured, they are 179 + 42 for the first and last, so the button
   gets what is left and is set compact to take it.

   ORDER, because the DOM order is wordmark, hamburger, nav, button, and the
   button has to sit between the wordmark and the hamburger on screen. The nav
   is position:fixed at this width so it is out of the flow entirely.
   ========================================================================== */
@media (max-width: 900px) {
  .site-header__cta {
    order: 2;
    flex: none;
    padding: 0.55rem 0.8rem;
    font-size: var(--fs-xs);
  }
  .nav-toggle { order: 3; }
  .site-header .brand { order: 1; font-size: 0.98rem; }

  /* The drawer holds the links only now. Its own bottom padding was sized for
     a button that is no longer in it. */
  .site-nav .btn { display: none; }
}

/* ==========================================================================
   TAP TARGETS ON A PHONE

   Standalone links in lists and section footers were 19 to 23px tall, which is
   under any reasonable thumb. Padding rather than font size: the type is
   already the size it should be, it just had no room around it.

   Links inside running prose are deliberately not touched. Growing those would
   break the line spacing of the paragraph they sit in, and a link in a
   sentence is reached by its line, not by its box.
   ========================================================================== */
@media (max-width: 900px) {
  .site-footer__list a,
  .footer-col__list a {
    display: inline-block;
    padding-block: 0.45rem;
  }
  .link-arrow,
  .kitgroup__all,
  .events__all {
    padding-block: 0.5rem;
  }
}

/* At 360 the three of them did not fit: the bar overflowed by 12px and the
   hamburger was being squashed from its 42px square down to 21, because it was
   the only flexible thing left in the row. Both are the same fix, applied at
   the two ends: the gap comes in, and the button stops being shrinkable. */
@media (max-width: 900px) {
  .site-header__inner { gap: var(--s-3); }
  .nav-toggle { flex: none; }
  .site-header .brand { min-width: 0; overflow: hidden; }
}
@media (max-width: 380px) {
  .site-header .brand { font-size: 0.88rem; }
  .site-header__cta { padding: 0.5rem 0.65rem; }
}