/* ==========================================================================
   Layout — shell, masthead, section rhythm, footer
   ========================================================================== */

.shell {
  width: 100%;
  max-width: var(--shell);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

/* Section rhythm lives here only, so component files never fight it. */
.band { padding-block: var(--s-8); }
.band--tight { padding-block: var(--s-6); }
.band--sunk { background: var(--canvas-sunk); }

/* ---- Masthead ---------------------------------------------------------- */
/* Transparent over the hero, tinted once scrolled. */

/* The bar materialises gradually rather than snapping on at 8px of scroll.
   --mast-p is progress across the first 120px, written once per frame by
   site.js. A custom property rather than a scroll-driven animation, so
   Safari - which still has no scroll timelines - behaves identically to
   everything else. With JS off the property is unset, --mast-p resolves to
   0, and the bar stays cleanly transparent exactly as it does today. */
.masthead {
  position: sticky;
  top: 0;
  z-index: 50;
  background-color: rgb(11 11 12 / calc(var(--mast-p, 0) * 0.82));
  backdrop-filter: blur(calc(var(--mast-p, 0) * 16px));
  border-bottom: 1px solid rgb(245 243 240 / calc(var(--mast-p, 0) * 0.12));
}

/* The bar stays put at every scroll position. It used to retreat while you
   read downward and return on the way back up; that reclaimed some vertical
   space on long case studies, but it also meant the nav simply wasn't there
   most of the time you might reach for it. Always-visible wins. */

/* Reading progress along the bottom edge. Doubles as the progress bar on
   case studies, which is where it earns its keep. */
.masthead::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: -1px;
  height: 2px;
  background: var(--amber);
  transform: scaleX(var(--scroll-p, 0));
  transform-origin: left center;
  opacity: var(--mast-p, 0);
}

.masthead__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-4);
  padding-block: var(--s-3);
}

/* The wordmark is the home link on every page, so it has to read as one.
   Without a hover state it looked like a static logotype and people didn't
   try clicking it. The full stop is the affordance: it lifts and brightens. */
.wordmark {
  font-size: var(--t-md);
  font-weight: 700;
  letter-spacing: var(--track-snug);
  text-decoration: none;
  white-space: nowrap;
  color: rgba(245, 243, 240, 0.9);
  transition: color var(--d-base) var(--ease);
}
.wordmark:hover { color: var(--ivory); }
.wordmark b {
  color: var(--amber);
  font-weight: 700;
  display: inline-block;
  transition: transform var(--d-base) var(--ease-out),
              color var(--d-base) var(--ease);
}
.wordmark:hover b { transform: translateY(-0.14em); color: #FF9A44; }

/* A single pulse on load. Enough to draw the eye to the one mark on the page
   that is also the way back home. */
.wordmark b { animation: dot-pulse 1.5s var(--ease-out) 0.7s 1; }
@keyframes dot-pulse {
  0%, 100% { transform: translateY(0); }
  42%      { transform: translateY(-0.16em); }
}
@media (prefers-reduced-motion: reduce) {
  .wordmark b { animation: none; }
}

.masthead__nav {
  display: flex;
  align-items: center;
  gap: clamp(var(--s-3), 2.2vw, var(--s-5));
  font-size: var(--t-body-sm);
  font-weight: 500;
}
/* :not(.btn) matters — a bare `.masthead__nav a` rule outranks `.btn--light`
   and would repaint the CTA label to near-white on a near-white pill. */
.masthead__nav a:not(.btn) {
  position: relative;
  text-decoration: none;
  color: rgba(245, 243, 240, 0.72);
  transition: color var(--d-base) var(--ease);
}
.masthead__nav a:not(.btn):hover,
.masthead__nav a:not(.btn)[aria-current="page"] { color: var(--ivory); }

.masthead__nav a:not(.btn)::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: 0.28rem;
  height: 1px;
  background: var(--amber);
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform var(--d-base) var(--ease-out);
}
.masthead__nav a:not(.btn):hover::after,
.masthead__nav a:not(.btn)[aria-current="page"]::after { transform: scaleX(1); }

/* Nav degrades in stages rather than emptying out: Services drops first, then
   the CTA pill is swapped for a plain "Contact" link so About and Contact stay
   reachable on the narrowest phones. */
.masthead__nav .is-compact { display: none; }

@media (max-width: 62rem) {
  .masthead__nav .is-services { display: none; }
}
@media (max-width: 40rem) {
  .masthead__nav .btn { display: none; }
  .masthead__nav .is-compact { display: inline; }
}
/* On small phones the wordmark's descriptor and the nav can't both fit, so
   the descriptor goes — the name is what has to survive. */
@media (max-width: 30rem) {
  .wordmark .desc { display: none; }
  .masthead__inner { gap: var(--s-3); }
  .masthead__nav { gap: var(--s-3); }
}

/* ---- Footer ------------------------------------------------------------ */

.colophon {
  background: var(--canvas-sunk);
  border-top: 1px solid var(--rule);
  padding-block: var(--s-5) var(--s-4);
  font-size: var(--t-sm);
  color: var(--muted);
}
.colophon__inner {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-3) var(--s-5);
  align-items: baseline;
  justify-content: space-between;
}
.colophon a { color: var(--muted); text-decoration: none; }
.colophon a:hover { color: var(--ivory); }
.colophon__links { display: flex; flex-wrap: wrap; gap: var(--s-4); }

/* The credit takes the full width of the colophon rather than becoming a
   third column - at three items the row breaks awkwardly on a laptop, and
   the line reads as a footnote rather than as a peer of the nav links. */
.colophon__credit {
  flex-basis: 100%;
  order: 3;
  margin-top: var(--s-2);
  color: rgba(161, 161, 166, 0.78);
  max-width: 62ch;
}