/* =========================================================================
   Masthead — identity left, get-in-touch right. Shared by the homepage and
   the case study pages; markup comes from scripts/masthead.mjs.

   No background of its own, at any scroll position. That reads as a real
   choice rather than an oversight once the two things living in the bar are
   themselves floating pills, each carrying its own opaque ground and shadow:
   the bar tinting on scroll used to be what kept a bare icon legible over a
   colour underneath it, and neither child needs that from the bar any more.

   Class names keep the `alt-` prefix from where the pattern started.
   ========================================================================= */

/* -------------------------------- masthead -------------------------------
   Deliberately NOT a scroll-snap target. A sticky element's snap position is
   derived from where it currently sits, which for a stuck bar is always the
   viewport top — so making it a snap target creates a snap point that follows
   the scroll and traps the page. The section below it carries the top snap
   point instead. */

/* `fixed`, not `sticky`, and that is the one structural change. A sticky bar
   occupies flow, so it held a band of space at the top of every page whether or
   not anything was in it. The pill is out of flow, which is what lets it be
   absent at the top and arrive later — and it means every page now opens with
   its first section against the top of the screen. */
.alt-masthead {
  position: fixed; top: 0; left: 0; right: 0; z-index: 40;
  /* The 44px pills set the floor, so the padding is all there is to spend. */
  padding-block: var(--space-xs);
}
/* Going out of flow took a band of space with it. The old sticky bar occupied
   its own height at the top of every page, so content began underneath it for
   free; a fixed pill reserves nothing and the first line of every page slid
   under it. Below 900 that was 42px of the homepage greeting and 34px of a case
   study's role pill, because the narrow tier zeroes the focus-line lead-in that
   was covering for it at wider sizes.

   One rule on the shared body class rather than a patch per page type, and
   `--masthead-h` rather than a number, so the space is exactly what the pill
   measured itself to need. The fallback matters: with the script blocked the
   variable is never set, and 4rem clears the pill at every width. */
.page { padding-top: var(--masthead-h, 4rem); }

/* The monogram now lives inside a circular floating pill rather than sitting
   bare on the page — see .alt-brandpill below. */
.alt-masthead .who__mark { display: block; height: 27px; width: auto; }

/* Identity at one content edge, contact at the other, nothing between.
   `position: relative` is load-bearing: the get-in-touch panel hangs off this
   element's right edge, and without a containing block here it would resolve
   against the full-width header and open past the page's own margin. */
.alt-masthead__inner {
  position: relative;
  display: flex; flex-wrap: nowrap; align-items: center;
  justify-content: space-between; gap: var(--space-s);

  /* Wider than the measure, and deliberately NOT aligned to the content grid.
     `.wrap` caps at --page-max and insets by --page-gutter, which is 96px at
     this width — a lot of empty margin either side of a bar carrying two small
     controls. --space-fluid-s halves it to 48 on a desktop and resolves to 24
     on a phone, which is what the gutter already was there, so narrow screens
     are unchanged. */
  max-width: none;
  padding-inline: var(--space-fluid-s);
}
.alt-masthead .meta-row { padding-bottom: 0; }

/* ------------------------------ the brand pill ---------------------------
   A circle, not a square — the mark is very nearly square itself, and a round
   badge is what reads as a floating chip rather than a cropped rectangle.
   Sized a step larger than the old 40px icon buttons: it now carries visual
   weight on its own, where before it sat inline with the icons it was every
   bit as small as. */
.alt-brandpill {
  display: grid; place-items: center;
  width: 44px; height: 44px; border-radius: var(--radius-round);
  background: var(--card); box-shadow: var(--shadow-raised);
  transition: box-shadow .18s ease;
}
a.alt-brandpill { color: inherit; text-decoration: none; }
a.alt-brandpill:hover, a.alt-brandpill:focus-visible { box-shadow: var(--shadow-raised-hi); }
a.alt-brandpill:focus-visible { outline: 2px solid var(--ink); outline-offset: 3px; }

/* fill:currentColor is the load-bearing part on every icon in this file — it
   is what makes a glyph take its button's colour. It used to live in alt.css,
   which only the homepage loads, so on every case study these SVGs fell back
   to their default black while the homepage rendered them correctly. */
.alt-icon { width: 1.05em; height: 1.05em; fill: currentColor; flex: none; }

/* ------------------------------ get in touch ------------------------------
   One control at every width. There used to be a wider tier showing four icon
   buttons inline and a narrower one hiding the same four behind a hamburger —
   two presentations of one fact. A single floating button collapses that
   distinction entirely: it says what it does in words, and what it opens is
   identical regardless of viewport. */
.alt-getintouch { position: relative; flex: none; }

/* One width, shared by the toggle and every pill beneath it, so the whole
   stack reads as one column with both edges straight rather than a ragged
   silhouette sized to each label. 10rem clears "Copy email" — the longest of
   the five, measured at 153px — with a little air rather than a tight fit. */
:root { --getintouch-w: 10rem; }

.alt-getintouch__btn {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--space-2xs);
  width: var(--getintouch-w); height: 44px; padding-inline: var(--space-m);
  border: 0; border-radius: var(--radius-pill);
  background: var(--card); color: var(--ink);
  font: inherit; font-size: 14px; font-weight: 600;
  box-shadow: var(--shadow-raised);
  cursor: pointer;
  transition: box-shadow .18s ease, background .18s ease, color .18s ease;
}
.alt-getintouch__btn:hover { box-shadow: var(--shadow-raised-hi); }
.alt-getintouch__btn:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; }
/* Inverts while open — the same treatment the section rail's own toggle pill
   uses for the same fact: a control that has opened something reports it by
   swapping to ink-on-paper, not just by rotating a chevron nobody notices. */
.alt-getintouch__btn[aria-expanded="true"] { background: var(--ink); color: var(--card); }

.alt-getintouch__chev { width: 12px; height: 12px; transition: transform .22s cubic-bezier(.16, 1, .3, 1); }
.alt-getintouch__btn[aria-expanded="true"] .alt-getintouch__chev { transform: rotate(180deg); }

/* ---- the panel ----
   Absolute and empty of its own chrome — no fill, no border, no shadow. It is
   a positioning context for four independently-floating pills, not a card
   that holds them; each pill below carries its own ground, so a shared
   surface here would just be a second, redundant one behind the first.

   Never in flow, for the same reason the old sheet never was: masthead.js
   publishes the bar's offsetHeight as --masthead-h, which drives
   scroll-padding-top for every anchor on the page. An in-flow panel would
   change that number every time the menu opened. */
/* `display: none` is the panel's OWN base state, not just what `[hidden]`
   gives it — without this, the moment JS drops the `hidden` attribute on init
   the four (invisible, opacity: 0) pills would still occupy hit-test area and
   sit in the tab order, reachable by a pointer or a keyboard that should never
   find them while "closed" is the state on screen. */
.alt-getintouch__panel {
  position: absolute; top: calc(100% + var(--space-xs)); right: 0;
  z-index: 50; list-style: none; margin: 0; padding: 0;
  display: none; flex-direction: column; align-items: flex-end; gap: var(--space-2xs);
  /* allow-discrete: opening flips to flex at the START of the transition, so
     the children's own opacity/transform have something rendered to animate;
     closing holds flex until the children finish fading, then flips to none —
     matching the duration below so the two land together. */
  transition: display .3s allow-discrete;
}
.alt-getintouch__panel.is-open { display: flex; }
/* Pre-JS the panel keeps the `hidden` attribute and stays down; masthead.js
   drops it on init and drives everything from .is-open, because `hidden`
   cannot be transitioned out of. Redundant with the base rule above once JS
   has run — kept anyway, the same belt-and-suspenders the old sheet used. */
.alt-getintouch__panel[hidden] { display: none; }

/* Each pill animates itself rather than the panel animating as one block —
   that is the difference between "a menu appeared" and "four pills opened
   below it," and the second is what was asked for. Opacity and transform
   only, so nothing here ever triggers layout. */
.alt-getintouch__panel li {
  opacity: 0; transform: translateY(-8px) scale(.96);
  transition: opacity .18s ease, transform .24s cubic-bezier(.16, 1, .3, 1);
}
.alt-getintouch__panel.is-open li { opacity: 1; transform: none; }
/* Without this, a browser is free to skip the transition on an element's very
   first rendered frame after its ancestor leaves `display: none` — which is
   exactly this moment, the panel's first open. The rail dropdown and the old
   sheet both needed the same declaration for the same reason. */
@starting-style {
  .alt-getintouch__panel.is-open li { opacity: 0; transform: translateY(-8px) scale(.96); }
}
/* Staggered on the way in, at a fifth of a beat apart, so the four settle as a
   cascade rather than as a single flash of four pills. Closing carries no
   delay — the stagger is a welcome, not a habit, and a reader dismissing the
   menu wants it gone, not gone in sequence. */
.alt-getintouch__panel.is-open li:nth-child(1) { transition-delay: 0s; }
.alt-getintouch__panel.is-open li:nth-child(2) { transition-delay: .05s; }
.alt-getintouch__panel.is-open li:nth-child(3) { transition-delay: .1s; }
.alt-getintouch__panel.is-open li:nth-child(4) { transition-delay: .15s; }

/* ---- a pill ----
   The visible surface. Fully rounded, off the page on shadow alone rather
   than on a tinted fill — the same lift an enlargeable figure's hover gets,
   at rest instead of on hover, because these are meant to read as floating
   the moment they appear. */
/* Left-aligned rather than centred, unlike the toggle above it — with a shared
   fixed width but five different label lengths, centring each row would put
   the icon at a different x position per pill and undo the alignment the
   shared width was for. Flush-left keeps every icon in one column. */
.alt-getintouch__pill {
  display: inline-flex; align-items: center; gap: var(--space-xs);
  height: 44px; padding-inline: var(--space-m); width: var(--getintouch-w);
  border: 0; border-radius: var(--radius-pill);
  background: var(--card); color: var(--ink); text-decoration: none;
  font: inherit; font-size: 14px; font-weight: 600; white-space: nowrap;
  box-shadow: var(--shadow-raised);
  cursor: pointer;
  transition: box-shadow .18s ease;
}
.alt-getintouch__pill:hover, .alt-getintouch__pill:focus-visible { box-shadow: var(--shadow-raised-hi); }
.alt-getintouch__pill:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; }
.alt-getintouch__pill .alt-icon { width: 17px; height: 17px; color: var(--ink-soft); }

@media (prefers-reduced-motion: reduce) {
  .alt-getintouch__chev, .alt-getintouch__panel li,
  .alt-brandpill, .alt-getintouch__btn, .alt-getintouch__pill { transition: none; }
}

/* The column layout that makes this work is .page in site.css; the footer just
   claims the slack. */
.alt-footer { margin-top: auto; }

/* ================================== footer ==============================
   Chrome, like the masthead above it — so it lives here, in the stylesheet
   every page loads, rather than in alt.css which only the homepage does.
   That was the bug: case studies rendered the same footer markup with none of
   its styling, so the copyright line sat at body size with no padding under it.
   ========================================================================= */
.alt-footer {
  position: relative; z-index: 3; background: var(--card);
  /* 50px of air under the copyright line on every page — the case studies used
     to add another 90px of body padding below it and the homepage none. */
  padding-block: var(--space-fluid-xs) var(--space-fluid-s);
}
.alt-footer__copy {
  margin-top: var(--space-3xs);
  font-size: 13px; color: var(--ink-faint);
}