/* ============================================================
   CHROME — the header and footer that wrap every page.
   The words inside them live in content/site.js

   The header is modelled on an editor menu bar: short, flat,
   hairline-edged, with everything in small mono caps.
   ============================================================ */

.site-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem 1.5rem;
  flex-wrap: wrap;
  padding: 0.6rem var(--gutter);
  border-bottom: 1px solid var(--line-soft);
  background: linear-gradient(to bottom,
    color-mix(in srgb, var(--bg-deep) 92%, transparent),
    color-mix(in srgb, var(--bg-deep) 45%, transparent));
  backdrop-filter: blur(10px);
}

/* A hairline of accent under the whole bar, so the current project colour
   is present even in the furniture. */
.site-header::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: -1px;
  height: 1px;
  background: linear-gradient(to right,
    transparent,
    color-mix(in srgb, var(--accent) 45%, transparent) 20%,
    color-mix(in srgb, var(--accent) 12%, transparent) 60%,
    transparent);
  transition: background 0.9s var(--ease);
}

.brand {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  text-decoration: none;
}

/* The small square mark to the left of the name. */
.brand__mark {
  position: relative;
  width: 0.9rem;
  height: 0.9rem;
  flex: 0 0 auto;
  border: 1px solid color-mix(in srgb, var(--accent) 70%, transparent);
  border-radius: 1px;
  transition: border-color 0.9s var(--ease);
}
.brand__mark::after {
  content: "";
  position: absolute;
  inset: 2px;
  background: var(--accent);
  transition: background 0.9s var(--ease);
}
.brand:hover .brand__mark::after { background: var(--pop); }

.brand__text { display: flex; flex-direction: column; line-height: 1.25; }
.brand__name {
  font-family: var(--font-display);
  font-size: 0.95rem;
  font-weight: 600;
  letter-spacing: -0.01em;
  color: var(--text);
}
.brand__role {
  font-family: var(--font-mono);
  font-size: 0.58rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--muted);
}

.site-head__right {
  display: flex;
  align-items: center;
  gap: clamp(0.8rem, 2vw, 1.6rem);

  /* A flex item defaults to "never shrink below my own content". That beat
     the `max-width: 100%` on the section switcher further down, so on a phone
     the header stayed about 40px wider than the screen and the whole page
     could be dragged sideways, fighting the swipe on the rail. This lets it
     shrink so the switcher scrolls inside it instead. */
  min-width: 0;
}

/* ---------- the two-half switch ---------- */

/* Drawn as one enclosed segmented control rather than two more links.
   A hairline after the pair was not enough: a section can share a name with
   a portfolio (there is a Tutoring in both), so the eye met the same word
   twice in one row with no clue the two did different things. Boxing this
   pair makes it read as a switch and the links beside it as navigation. */
.site-modes {
  display: flex;
  align-items: center;
  gap: 0;

  /* Never squashed. The section switcher beside it gives way instead. */
  flex: 0 0 auto;

  padding: 2px;
  border: 1px solid var(--line-soft);
  border-radius: var(--radius-sm);
  background: color-mix(in srgb, var(--bg-deep) 55%, transparent);
}

.site-mode {
  font-family: var(--font-mono);
  font-size: 0.62rem;
  font-weight: 500;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  text-decoration: none;
  color: var(--muted);
  padding: 0.32rem 0.6rem;
  border: 1px solid transparent;
  border-radius: var(--radius-sm);
  transition: color 0.25s var(--ease), background 0.25s var(--ease),
              border-color 0.25s var(--ease);
}
/* Only the ones you can actually go to light up. The selected segment is a
   span, not a link, so it must not pretend to be clickable. */
a.site-mode:hover {
  color: var(--text);
  background: var(--surface);
  border-color: var(--line-soft);
}

.site-mode.is-on { cursor: default; }
.site-mode[aria-current="true"] {
  color: color-mix(in srgb, var(--accent) 45%, var(--text));
  background: color-mix(in srgb, var(--accent) 12%, transparent);
  border-color: color-mix(in srgb, var(--accent) 45%, transparent);
}


/* ---------- the tabs cascade in rather than snapping ---------- */

/* Switching portfolio is a real page load, so the number of section tabs
   changes between one paint and the next. Going back to All was the worst
   of it: six tabs returned in the same instant, which is the snap you
   noticed. They now fan out from the left one after another.

   The rail beside them already eases in on load, so this only brings the
   header into line with it.

   TWO KNOBS. The 0.5s on the keyframe line is how long each tab takes. The
   0.045s step between the nth-child rules is how far apart they start, and
   it is the one that controls how much it reads as a cascade: raise it for
   a longer ripple, drop it to 0 and they all arrive together.

   The reduced-motion block in base.css switches the whole thing off. */
@keyframes tab-cascade {
  from { opacity: 0; transform: translateX(-10px); }
  to   { opacity: 1; transform: none; }
}

.site-nav__link { animation: tab-cascade 0.5s var(--ease-liquid) both; }

.site-nav__link:nth-child(1) { animation-delay: 0s; }
.site-nav__link:nth-child(2) { animation-delay: 0.045s; }
.site-nav__link:nth-child(3) { animation-delay: 0.09s; }
.site-nav__link:nth-child(4) { animation-delay: 0.135s; }
.site-nav__link:nth-child(5) { animation-delay: 0.18s; }
.site-nav__link:nth-child(6) { animation-delay: 0.225s; }
.site-nav__link:nth-child(7) { animation-delay: 0.27s; }
.site-nav__link:nth-child(8) { animation-delay: 0.315s; }

/* The switch itself never animates. It is the fixed point the tabs move
   against: if it fades or slides too then nothing on the header is still,
   and the whole bar reads as reloading rather than as the tabs changing.
   Do not add an entrance to this one. */

.site-nav { display: flex; align-items: center; gap: clamp(0.7rem, 1.8vw, 1.5rem); }

/* ---------- why the tabs stopped jumping sideways ---------- */

/* The whole right-hand group is pinned to the right edge of the window, so
   its LEFT edge was decided by how wide its contents happened to be. Switch
   from four tabs to seven and everything already on screen slid about 210px
   left to make room. That was the jump, and no amount of fading hides it,
   because the tabs that survive the switch genuinely teleport.

   Holding this box at one width fixes the switch and every tab in place.
   Coming back to All now extends the row rightwards into space that was
   already being reserved, so nothing that was on screen moves at all and
   the cascade above is the only thing you see.

   THE NUMBER: wide enough for every section you have, measured with the real
   font loaded. The widest case today is the root view, which needs 519px.
   Add or rename sections until they no longer fit and the box simply grows
   again, quietly taking the old jump back with it, so raise this whenever you
   add a section or give one a longer name. 36rem is 576px, leaving room for
   roughly one more tab.

   Only above 1100px. Narrower than that the header wraps onto two lines and
   reserving half a screen of empty space would do more harm than the jump. */
@media (min-width: 1100px) {
  .site-nav[data-sections] { min-width: 36rem; }
}

.site-nav__link {
  position: relative;
  font-family: var(--font-mono);
  font-size: 0.64rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  text-decoration: none;
  color: var(--muted);
  padding: 0.3rem 0;
  transition: color 0.25s var(--ease);
}
.site-nav__link::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 1px;
  background: var(--accent);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.4s var(--ease);
}
.site-nav__link:hover { color: var(--text); }
.site-nav__link:hover::after { transform: scaleX(1); }

/* "page" marks a separate page; "true" marks the section you are currently
   scrolled into. Both read as current. */
.site-nav__link[aria-current="page"],
.site-nav__link[aria-current="true"] { color: var(--text); }
.site-nav__link[aria-current="page"]::after,
.site-nav__link[aria-current="true"]::after { transform: scaleX(1); }

/* The separate-pages nav, if site.nav lists any, is set apart from the
   section switcher by a hairline. */
.site-nav--pages {
  padding-left: clamp(0.7rem, 1.8vw, 1.5rem);
  border-left: 1px solid var(--line-soft);
}

/* The small data chip on the far right. Set or empty it in content/site.js */
.site-status {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  padding: 0.3rem 0.55rem;
  border: 1px solid var(--line-soft);
  border-radius: var(--radius-sm);
  background: var(--surface);
  font-family: var(--font-mono);
  font-size: 0.58rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--dim);
}
.site-status::before {
  content: "";
  width: 4px;
  height: 4px;
  background: var(--pop);
  box-shadow: 0 0 7px var(--pop);
}

/* ---------- footer: an editor status bar ---------- */

.site-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.6rem 1.5rem;
  flex-wrap: wrap;
  padding: 0.55rem var(--gutter);
  border-top: 1px solid var(--line-soft);
  background: color-mix(in srgb, var(--bg-deep) 70%, transparent);
  font-family: var(--font-mono);
  font-size: 0.6rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--muted);
}

.site-footer__links { display: flex; gap: 1rem; flex-wrap: wrap; }
.site-footer__links a {
  text-decoration: none;
  transition: color 0.25s var(--ease);
}
.site-footer__links a:hover { color: color-mix(in srgb, var(--accent) 55%, var(--text)); }

@media (max-width: 1020px) {
  .site-status { display: none; }
}

@media (max-width: 720px) {
  .brand__role { display: none; }
  /* With several sections the switcher stops fitting. Let it scroll sideways
     rather than wrap the header onto a second line. */
  .site-nav {
    overflow-x: auto;
    scrollbar-width: none;
    -ms-overflow-style: none;
    max-width: 100%;

    /* Same reason as the min-width on .site-head__right above: without it a
       flex item refuses to shrink and scrolls nothing. */
    min-width: 0;
  }
  .site-nav::-webkit-scrollbar { display: none; }
  .site-nav__link { white-space: nowrap; }
}