/* The site header: one component on every page (markup in _parts/nav.html, behaviour in
   heroes/site-header.js). Fixed to the top; transparent while the page is at rest, then a
   compact frosted bar once the page scrolls. Every page opens on a navy banner, so the dark
   variant (white type, a navy frosted bar) applies everywhere. The light variant (navy type,
   a white bar) is kept for a future paper page, opted into with body.header-light. */
:root { --sh-h: 4.75rem; --sh-hs: 3.5rem; }
@media (max-width: 759px) { :root { --sh-h: 4rem; --sh-hs: 3.5rem; } }
html { scroll-padding-top: calc(var(--sh-hs) + .75rem); }

.site-header {
  /* Dark variant by default. */
  --sh-fg: #fff; --sh-link: rgba(236,240,252,.78); --sh-link-hi: #fff;
  --sh-bar: rgba(13,20,62,.9); --sh-line: rgba(214,220,240,.12); --sh-shadow: 0 12px 32px -20px rgba(3,6,25,.85);
  --sh-panel: #0E1646; --sh-panel-line: rgba(214,220,240,.12); --sh-tile-ring: rgba(255,255,255,.28);
  position: fixed; inset: 0 0 auto 0; z-index: 60; color: var(--sh-fg); pointer-events: auto;
  padding-top: env(safe-area-inset-top, 0px);
}
body.header-light .site-header {
  --sh-fg: var(--ece-navy); --sh-link: #4A5273; --sh-link-hi: var(--ece-navy);
  --sh-bar: rgba(255,255,255,.93); --sh-line: rgba(21,29,75,.09); --sh-shadow: 0 12px 30px -22px rgba(21,29,75,.45);
  --sh-panel: #fff; --sh-panel-line: var(--rule); --sh-tile-ring: transparent;
}

/* The bar's ground lives on a layer of its own, so it can fade in without moving anything. */
.site-header::before { content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background: var(--sh-bar); -webkit-backdrop-filter: blur(16px) saturate(150%); backdrop-filter: blur(16px) saturate(150%);
  border-bottom: 1px solid var(--sh-line); box-shadow: var(--sh-shadow); opacity: 0; transition: opacity .35s ease; }
.site-header.is-stuck::before, .site-header.is-open::before { opacity: 1; }
.site-header.is-open::before { background: var(--sh-panel); -webkit-backdrop-filter: none; backdrop-filter: none; }

.sh-bar { max-width: 72rem; margin: 0 auto; padding: 0 1.5rem; height: var(--sh-h);
  display: flex; align-items: center; justify-content: space-between; gap: 1.5rem;
  transition: height .35s cubic-bezier(.2,.7,.2,1); }
.is-stuck .sh-bar { height: var(--sh-hs); }

/* Brand: the favicon's monogram tile beside the name. */
.sh-brand { display: inline-flex; align-items: center; gap: .7rem; color: var(--sh-fg); text-decoration: none; border-radius: 6px; padding-block: .5rem; margin-block: -.5rem; }
.sh-mark { width: 2rem; height: 2rem; flex: none; overflow: visible; transition: transform .35s cubic-bezier(.2,.7,.2,1); }
.sh-tile { fill: #151D4B; stroke: var(--sh-tile-ring); stroke-width: 2; }
.sh-mark text { font: 600 32px var(--serif); fill: #fff; }
.sh-name { font: 600 1.14rem/1 var(--serif); letter-spacing: -.005em; white-space: nowrap; }
.is-stuck .sh-mark { transform: scale(.9); }
.sh-brand:hover .sh-name { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: .25em; }

/* Links, and the orange rule that rests under the current page and follows the pointer. */
.sh-nav { position: relative; }
.sh-nav ul { display: flex; gap: .35rem; list-style: none; margin: 0 -.8rem 0 0; padding: 0; }
.sh-nav a { position: relative; display: block; padding: .55rem .8rem; border-radius: 6px;
  font: 500 .95rem/1.2 var(--sans); color: var(--sh-link); text-decoration: none; transition: color .2s; }
.sh-nav a:hover, .sh-nav a[aria-current="page"] { color: var(--sh-link-hi); }
.sh-nav a[aria-current="page"] { font-weight: 600; }
.site-header a:focus-visible, .sh-toggle:focus-visible { outline: 3px solid var(--ece-orange); outline-offset: 2px; }
/* Before the script has placed the sliding rule, the current link carries its own. */
.sh-nav a[aria-current="page"]::after { content: ""; position: absolute; left: .8rem; right: .8rem; bottom: .15rem; height: 2px; border-radius: 1px; background: var(--ece-orange); }
.sh-ink { position: absolute; left: 0; bottom: .15rem; height: 2px; width: 1px; border-radius: 1px; background: var(--ece-orange);
  transform-origin: 0 50%; opacity: 0; pointer-events: none; }
.sh-nav.has-ink a[aria-current="page"]::after { display: none; }
.sh-nav.has-ink .sh-ink { transform: translateX(var(--x, 0)) scaleX(var(--w, 1)); opacity: var(--o, 0);
  transition: transform .42s cubic-bezier(.2,.75,.2,1), opacity .25s ease; }
.sh-nav.ink-instant .sh-ink { transition: none; }

/* Menu button: shown by the script on phones only. Without the script the links wrap below the name. */
.sh-toggle { display: none; align-items: center; gap: .6rem; min-height: 2.75rem; padding: 0 .35rem 0 .75rem; margin-right: -.35rem;
  font: 500 .95rem var(--sans); color: var(--sh-fg); background: none; border: 0; border-radius: 6px; cursor: pointer; }
.sh-burger { position: relative; width: 1.25rem; height: .75rem; order: 2; }
.sh-burger i { position: absolute; left: 0; right: 0; height: 2px; border-radius: 1px; background: currentColor;
  transition: transform .3s cubic-bezier(.2,.7,.2,1), top .3s cubic-bezier(.2,.7,.2,1); }
.sh-burger i:first-child { top: 0; }
.sh-burger i:last-child { top: calc(100% - 2px); width: 70%; left: auto; }
.sh-toggle[aria-expanded="true"] .sh-burger i { top: calc(50% - 1px); width: 100%; }
.sh-toggle[aria-expanded="true"] .sh-burger i:first-child { transform: rotate(45deg); }
.sh-toggle[aria-expanded="true"] .sh-burger i:last-child { transform: rotate(-45deg); }

@media (max-width: 759px) {
  .sh-bar { padding-inline: 1.25rem; gap: .75rem; }
  .sh-mark { width: 1.85rem; height: 1.85rem; }
  .sh-name { font-size: 1.08rem; }
  /* Without the script: the links sit on a second row. */
  .site-header:not(.sh-js) .sh-bar { flex-wrap: wrap; height: auto; padding-block: .75rem; row-gap: .25rem; }
  .site-header:not(.sh-js) .sh-nav a { padding-inline: .5rem; }
  .site-header:not(.sh-js) .sh-nav ul { margin: 0 0 0 -.5rem; }

  .sh-js .sh-toggle { display: inline-flex; }
  .sh-js .sh-ink { display: none; }
  .sh-js .sh-nav { position: absolute; left: 0; right: 0; top: 100%; padding: .5rem 1.25rem 1.75rem;
    background: var(--sh-panel); border-bottom: 1px solid var(--sh-panel-line); box-shadow: 0 24px 40px -24px rgba(3,6,25,.6);
    visibility: hidden; opacity: 0; transform: translateY(-.5rem);
    transition: opacity .25s ease, transform .3s cubic-bezier(.2,.7,.2,1), visibility 0s linear .3s; }
  .sh-js.is-open .sh-nav { visibility: visible; opacity: 1; transform: none; transition-delay: 0s; }
  .sh-js .sh-nav ul { flex-direction: column; gap: 0; margin: 0; }
  .sh-js .sh-nav li + li { border-top: 1px solid var(--sh-panel-line); }
  .sh-js .sh-nav a { display: flex; align-items: center; min-height: 3.6rem; padding: .5rem 0 .5rem 1rem;
    font: 600 1.45rem/1.2 var(--serif); color: var(--sh-link-hi); border-radius: 0; }
  .sh-js .sh-nav a::after { display: none; }
  .sh-js .sh-nav a::before { content: ""; position: absolute; left: 0; top: 50%; width: 3px; height: 1.4rem; margin-top: -.7rem;
    border-radius: 2px; background: var(--sh-panel-line); transition: background .2s; }
  .sh-js .sh-nav a:hover::before { background: var(--sh-link); }
  .sh-js .sh-nav a[aria-current="page"]::before { background: var(--ece-orange); }
  /* The page behind an open menu is dimmed; a tap there closes it. */
  .site-header.is-open::after { content: ""; position: fixed; inset: 0; z-index: -2; background: rgba(7,11,39,.5); }
}

/* Room for the fixed header: the first block of every page starts below it. */
.site-header + * { padding-top: var(--sh-h); }

/* Things that stick below the header rather than under it. */
body.course .course-nav { top: calc(var(--sh-hs) + env(safe-area-inset-top, 0px)); }
body.course .content { --navh: calc(3.2rem + var(--sh-hs)); }
html:has(body.course) { scroll-padding-top: 0; }
body.course .course section { scroll-margin-top: calc(3.5rem + var(--sh-hs)); }
body.about-page .journey-stage { top: var(--sh-hs); }
@media (min-width: 801px) {
  body.about-page .journey-stage { height: calc(100vh - var(--sh-hs)); height: calc(100svh - var(--sh-hs)); }
}

@media (prefers-reduced-motion: reduce) {
  .site-header::before, .sh-bar, .sh-mark, .sh-nav a, .sh-burger i, .sh-nav.has-ink .sh-ink { transition: none; }
  .sh-js .sh-nav, .sh-js.is-open .sh-nav { transition: none; transform: none; }
}