/* ==========================================================================
   MASTHEAD — site-wide, minimal.

   Built once because project pages need navigation, and navigation that only
   exists on some pages is worse than navigation that is quietly consistent.

   Present from the top of the page. An earlier version slid in only after the
   hero had scrolled past, which left the first screen with no way to navigate
   at all — fine as an effect, wrong as a site.

   COLOUR IS STATED PER CONTROL, NOT PER ELEMENT TYPE. <summary> is not an
   <a>, so a rule written for links skips it and it falls back to the UA's
   default. Every rule below names all three — mark, link and summary — in
   both the resting and inverted states.
   ========================================================================== */

.masthead {
  position: fixed;
  inset-block-start: 0;
  inset-inline: 0;
  z-index: var(--z-nav);

  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-m);
  /* From the token, not a literal: --masthead-h is derived from this value so
     the hero can reserve exactly the height the bar occupies. Changing the
     padding here without changing the token would put the two out of step. */
  padding: var(--masthead-pad) var(--gutter);

  background: color-mix(in srgb, var(--paper) 88%, transparent);
  backdrop-filter: blur(10px);
  border-block-end: 1px solid var(--rule);

  transition: background-color var(--t-quick) var(--ease),
              border-color var(--t-quick) var(--ease),
              color var(--t-quick) var(--ease);
}


/* --- Scroll progress ------------------------------------------------------
   A kumkumam bar on the masthead's bottom edge that fills across the width of
   the page as the document scrolls. It sits ON the rule rather than under it,
   so the bar is not a second horizontal line — it is the rule, being drawn.

   Driven by a scroll timeline where one exists, which means it is composited
   and never touches the main thread. masthead.js writes --scroll-progress as
   the fallback; the transform below reads that property, so the resting state
   without either is an empty track rather than a full one.

   Kept under prefers-reduced-motion. It is not motion for its own sake: it
   reports where you are, and it only ever moves because you moved the page. */

.masthead__progress {
  position: absolute;
  inset-inline: 0;
  /* Over the border, not above it. */
  inset-block-end: -1px;
  height: 3px;
  overflow: hidden;
  pointer-events: none;
}

.masthead__progress-fill {
  display: block;
  height: 100%;
  background: var(--kumkumam);
  transform-origin: left center;
  transform: scaleX(var(--scroll-progress, 0));
}

@supports (animation-timeline: scroll()) {
  .masthead__progress-fill {
    transform: scaleX(0);
    animation: masthead-progress linear forwards;
    animation-timeline: scroll(root block);
  }

  @keyframes masthead-progress {
    to { transform: scaleX(1); }
  }
}

/* On the inverted field a kumkumam bar on a kumkumam ground has no edge, so
   the fill takes paper there and the track keeps the border's own tint. */
.masthead.is-over-invert .masthead__progress-fill { background: var(--paper); }


/* --- Mark ----------------------------------------------------------------- */

.masthead__mark {
  display: inline-flex;
  /* CENTRE, NOT BASELINE. With the conch in the box, baseline alignment sized
     the line box off the artwork and left the wordmark's optical centre 4.5px
     above WORK and ABOUT — measured, not guessed. The nav items are centred in
     the bar, so the name has to be centred in the mark to meet them. */
  align-items: center;
  gap: 0.55rem;
  color: var(--ink);
  text-decoration: none;
}

/* Sized off the wordmark's own cap height rather than a fixed px, so the two
   stay in proportion as the name scales. */
.masthead__conch {
  width: auto;
  height: 2.1em;
  aspect-ratio: 666 / 908;
  fill: var(--kumkumam);
  flex: none;
}

.masthead.is-over-invert .masthead__conch { fill: var(--paper); }

.masthead__mark-name {
  font-family: var(--font-display);
  font-size: clamp(1.15rem, 1.55vw, 1.5rem);
  letter-spacing: -0.01em;
}


/* --- Nav ------------------------------------------------------------------ */

.masthead__nav {
  display: flex;
  align-items: center;
  gap: clamp(var(--sp-s), 2.5vw, var(--sp-l));
}

.masthead__link,
.menu__summary {
  color: var(--kumkumam);
  font-size: var(--type-micro);
  letter-spacing: var(--ls-wide);
  text-transform: uppercase;
  text-decoration: none;
  padding-block: 0.35rem;
  border-block-end: 1px solid transparent;
  transition: color var(--t-quick) var(--ease),
              border-color var(--t-quick) var(--ease);
}

.masthead__link:hover,
.menu__summary:hover {
  color: var(--kumkumam-lit);
  border-block-end-color: var(--kumkumam-lit);
}

.masthead__mark:focus-visible,
.masthead__link:focus-visible,
.menu__summary:focus-visible {
  outline: 2px solid var(--kumkumam);
  outline-offset: 4px;
}


/* --- The Work menu -------------------------------------------------------
   Six projects would crowd the bar, so they live one level down. <details>
   gives open/close, keyboard operation and a correct expanded state with no
   script at all, and degrades to a labelled list of links if CSS fails. */

.menu { position: relative; }

.menu__summary {
  cursor: pointer;
  list-style: none;
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
}

.menu__summary::-webkit-details-marker { display: none; }

/* Caret drawn in CSS rather than set as a glyph, so it inherits colour and
   rotates with the open state. */
.menu__summary::after {
  content: '';
  width: 0.36em;
  height: 0.36em;
  border-right: 1px solid currentColor;
  border-bottom: 1px solid currentColor;
  transform: rotate(45deg) translateY(-0.1em);
  transition: transform var(--t-quick) var(--ease);
}

.menu[open] .menu__summary::after {
  transform: rotate(-135deg) translateY(-0.1em);
}

/* Absolutely positioned content escapes the hiding a browser applies to a
   closed <details>, so it has to be hidden explicitly — without this the
   panel rendered over the hero while the menu was shut. */
.menu:not([open]) .menu__list { display: none; }

.menu__list {
  position: absolute;
  inset-inline-end: 0;
  inset-block-start: calc(100% + 0.7rem);
  /* ABOVE THE PROGRESS BAR. Both are absolutely positioned inside the
     masthead with no z-index of their own, so paint order fell to DOM order
     and the bar — which comes later — drew its kumkumam rule straight across
     the top of the open panel. One local step is enough: .masthead is a
     stacking context, so this cannot escape the bar. */
  z-index: 1;
  min-width: 15rem;
  margin: 0;
  padding: var(--sp-xs) 0;
  list-style: none;
  background: var(--paper);
  border: 1px solid var(--rule);
  box-shadow: 0 12px 30px -18px rgba(36, 28, 24, 0.4);
}

.menu__list li { margin: 0; }

.menu__list a {
  display: block;
  padding: 0.5rem var(--sp-s);
  color: var(--ink);
  font-size: var(--type-micro);
  letter-spacing: 0.1em;
  text-decoration: none;
  white-space: nowrap;
}

.menu__list a:hover {
  background: var(--kumkumam);
  color: var(--paper);
}

.menu__list a:focus-visible {
  outline: 2px solid var(--kumkumam);
  outline-offset: -2px;
}

/* The panel used to end with an "All work" row, ruled off from the six
   projects. It has gone: the panel already IS all the work, so the row
   restated its own contents, and the summary above it is the same anchor. */


/* --- Over the inverted field ---------------------------------------------
   A cream stripe across the inversion would cut it in half, so the bar takes
   the field's colours while it is over it. The panel keeps paper ground —
   a kumkumam panel on a kumkumam field would have no edge. */

.masthead.is-over-invert {
  background: color-mix(in srgb, var(--kumkumam) 92%, transparent);
  border-block-end-color: color-mix(in srgb, var(--paper) 28%, transparent);
}

.masthead.is-over-invert .masthead__mark,
.masthead.is-over-invert .masthead__link,
.masthead.is-over-invert .menu__summary {
  color: var(--paper);
}

.masthead.is-over-invert .masthead__link:hover,
.masthead.is-over-invert .menu__summary:hover {
  color: var(--paper);
  border-block-end-color: var(--paper);
}

.masthead.is-over-invert .masthead__mark:focus-visible,
.masthead.is-over-invert .masthead__link:focus-visible,
.masthead.is-over-invert .menu__summary:focus-visible {
  outline-color: var(--paper);
}


@media (max-width: 46rem) {
  .menu__list {
    min-width: min(17rem, calc(100vw - 2 * var(--gutter)));
  }
}

@media (prefers-reduced-motion: reduce) {
  .masthead,
  .masthead__link,
  .menu__summary,
  .menu__summary::after { transition: none; }
}