/* ------------------------------------------------------------------
   Header, navigation, footer
   ------------------------------------------------------------------ */

.site-header {
  position: fixed;
  inset: 0 0 auto;
  z-index: 100;
  height: var(--header-h);
  padding-top: var(--safe-top);
  transition: background-color 0.4s var(--ease-out), box-shadow 0.4s var(--ease-out), backdrop-filter 0.4s;
}

.site-header.is-scrolled,
.site-header.is-open {
  background: color-mix(in srgb, var(--paper) 78%, transparent);
  backdrop-filter: saturate(1.4) blur(16px);
  -webkit-backdrop-filter: saturate(1.4) blur(16px);
  box-shadow: 0 1px 0 var(--rule);
}

.site-header__inner {
  width: min(100% - 2 * var(--gutter), var(--max));
  height: 100%;
  margin-inline: auto;
  display: flex;
  align-items: center;
  gap: 2rem;
}

.wordmark {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  min-height: 44px;
  text-decoration: none;
  color: var(--ink);
}

.wordmark .brand-mark { color: var(--moss); transition: transform 0.6s var(--ease-out); }
.brand-mark .wave { transition: opacity 0.3s; }

@media (hover: hover) {
  .wordmark:hover .brand-mark { transform: rotate(-8deg); }
  .wordmark:hover .wave--1 { animation: wave 1.2s var(--ease-out) infinite; }
  .wordmark:hover .wave--2 { animation: wave 1.2s 0.15s var(--ease-out) infinite; }
  .wordmark:hover .wave--3 { animation: wave 1.2s 0.3s var(--ease-out) infinite; }
}

@keyframes wave { 0%, 100% { opacity: 1; } 50% { opacity: 0.2; } }

.wordmark__text {
  font-family: var(--font-display);
  font-size: 1.4rem;
  font-weight: 420;
  letter-spacing: -0.035em;
  font-variation-settings: "SOFT" 100, "WONK" 1;
  line-height: 1;
  padding-bottom: 0.1em;
}

.nav {
  display: flex;
  align-items: center;
  gap: 0.25rem;
  margin-left: auto;
}

.nav__link {
  position: relative;
  padding: 0.5rem 0.85rem;
  border-radius: 999px;
  font-size: 0.95rem;
  font-weight: 450;
  text-decoration: none;
  color: var(--ink-2);
  transition: color 0.25s, background-color 0.25s;
}

@media (hover: hover) {
  .nav__link:hover { color: var(--ink); background: color-mix(in srgb, var(--ink) 6%, transparent); }
}

.nav__link.is-active { color: var(--ink); }
.nav__link.is-active::after {
  content: "";
  position: absolute;
  left: 50%; bottom: 0.15rem;
  width: 5px; height: 5px;
  border-radius: 50%;
  background: var(--signal);
  transform: translateX(-50%);
}

.nav__link--admin { font-family: var(--font-mono); font-size: var(--step--1); color: var(--moss); }

.site-header__tools { display: flex; align-items: center; gap: 0.25rem; }

/* Header HUD: ARB01's live dot and the time in Brussels, on every page. It doubles as
   the shortest way back to the node. */
.hud {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  min-height: 40px;
  margin-right: 0.35rem;
  padding: 0 0.85rem;
  border: 1px solid var(--rule);
  border-radius: 999px;
  font-family: var(--font-mono);
  font-size: var(--step--2);
  font-feature-settings: "zero", "tnum";
  letter-spacing: 0.08em;
  text-decoration: none;
  color: var(--muted);
  transition: border-color 0.25s, color 0.25s, background-color 0.25s;
}
.hud .pulse__dot { position: relative; width: 7px; height: 7px; border-radius: 50%; background: var(--muted); }
.hud__node { color: var(--ink); font-weight: 550; }
.hud__clock { color: var(--ink-2); }

@media (hover: hover) {
  .hud:hover { border-color: var(--rule-strong); color: var(--ink-2); background: color-mix(in srgb, var(--ink) 4%, transparent); }
}

@media (max-width: 1040px) { .hud__place { display: none; } }
@media (max-width: 760px) {
  .site-header__inner { gap: 0.5rem; }
  .hud { padding: 0 0.7rem; margin-right: 0; }
  .hud__node { display: none; }
}
/* The smallest phones keep only the live dot, so the header never overflows. */
@media (max-width: 380px) {
  .hud { justify-content: center; width: 44px; padding: 0; }
  .hud__clock { display: none; }
}
@media (pointer: coarse) { .hud { min-height: 44px; } }

/* Reading progress: a hairline of signal along the header's lower edge, driven by the
   scroll itself (no script). Browsers without scroll timelines simply don't show it. */
@supports (animation-timeline: scroll()) {
  @media (prefers-reduced-motion: no-preference) {
    .site-header::after {
      content: "";
      position: absolute;
      inset: auto 0 -1px;
      height: 2px;
      background: var(--signal);
      transform-origin: 0 50%;
      animation: read-progress linear both;
      animation-timeline: scroll(root);
    }
  }
}

@keyframes read-progress { from { transform: scaleX(0); } to { transform: scaleX(1); } }

.icon-button {
  display: inline-grid;
  place-items: center;
  width: 40px; height: 40px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: transparent;
  cursor: pointer;
  color: var(--ink);
  transition: background-color 0.25s, transform 0.5s var(--ease-out);
}
.icon-button svg { width: 20px; height: 20px; transition: transform 0.6s var(--ease-out); }
.icon-button:active { background: color-mix(in srgb, var(--ink) 10%, transparent); }

@media (hover: hover) {
  .icon-button:hover { background: color-mix(in srgb, var(--ink) 7%, transparent); }
  .theme-toggle:hover svg { transform: rotate(180deg); }
}

@media (pointer: coarse) { .icon-button { width: 44px; height: 44px; } }

.nav-toggle { display: none; }
.nav-toggle span {
  display: block;
  grid-area: 1 / 1;
  width: 18px; height: 1.5px;
  background: currentColor;
  border-radius: 2px;
  transition: transform 0.4s var(--ease-out);
}
.nav-toggle span:first-child { transform: translateY(-4px); }
.nav-toggle span:last-child { transform: translateY(4px); }
.is-open .nav-toggle span:first-child { transform: rotate(45deg); }
.is-open .nav-toggle span:last-child { transform: rotate(-45deg); }

@media (max-width: 760px) {
  .nav-toggle { display: inline-grid; }
  .site-header__tools { margin-left: auto; }

  /* The open header's backdrop-filter makes it the containing block for
     fixed descendants, so size the panel to the viewport explicitly. */
  .nav {
    position: fixed;
    inset: var(--header-h) 0 auto;
    height: calc(100vh - var(--header-h));
    height: calc(100dvh - var(--header-h));
    overflow-y: auto;
    overscroll-behavior: contain;
    flex-direction: column;
    align-items: stretch;
    justify-content: flex-start;
    gap: 0;
    margin: 0;
    padding: 2rem var(--gutter) calc(2rem + var(--safe-bottom));
    background: var(--paper);
    opacity: 0;
    visibility: hidden;
    transform: translateY(-12px);
    transition: opacity 0.35s var(--ease-out), transform 0.5s var(--ease-out), visibility 0.35s;
  }

  .is-open .nav { opacity: 1; visibility: visible; transform: none; }

  .nav__link {
    opacity: 0;
    transform: translateY(10px);
    transition: opacity 0.4s var(--ease-out), transform 0.6s var(--ease-out), color 0.25s;
  }
  .is-open .nav__link { opacity: 1; transform: none; }
  .is-open .nav__link:nth-child(2) { transition-delay: 0.04s; }
  .is-open .nav__link:nth-child(3) { transition-delay: 0.08s; }
  .is-open .nav__link:nth-child(4) { transition-delay: 0.12s; }
  .is-open .nav__link:nth-child(5) { transition-delay: 0.16s; }

  .nav__link {
    padding: 1rem 0;
    border-radius: 0;
    border-bottom: 1px solid var(--rule);
    font-family: var(--font-display);
    font-size: var(--step-3);
    font-weight: 340;
    letter-spacing: -0.03em;
    color: var(--ink);
  }
  .nav__link:active { color: var(--moss); }
  .nav__link.is-active { font-style: italic; color: var(--moss); }
  .nav__link.is-active::after { left: auto; right: 0; bottom: 50%; width: 9px; height: 9px; }
  .nav__link--admin { font-size: var(--step-1); }
}

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

.site-footer {
  margin-top: clamp(4rem, 10vw, 9rem);
  border-top: 1px solid var(--rule);
  /* clip, not hidden: a hidden box is a scroll container, and the wordmark's letters
     would then measure their view() timeline against the footer instead of the page. */
  overflow: hidden;
  overflow: clip;
}

.site-footer__grid {
  display: grid;
  grid-template-columns: 2fr 1fr 1fr;
  gap: 2.5rem;
  padding-block: clamp(3rem, 6vw, 5rem) 2rem;
}

.site-footer__lede {
  max-width: 30rem;
  margin-top: 1rem;
  font-family: var(--font-display);
  font-size: var(--step-1);
  font-weight: 340;
  line-height: 1.4;
  color: var(--ink-2);
}

.site-footer__col { display: flex; flex-direction: column; gap: 0.55rem; }
.site-footer__col .eyebrow { margin-bottom: 0.6rem; }
.site-footer__col a {
  width: fit-content;
  text-decoration: none;
  color: var(--ink-2);
  background: linear-gradient(currentColor, currentColor) left bottom / 0 1px no-repeat;
  transition: background-size 0.4s var(--ease-out), color 0.2s;
}
@media (hover: hover) {
  .site-footer__col a:hover { color: var(--ink); background-size: 100% 1px; }
}

.site-footer__mark {
  display: flex;
  justify-content: center;
  margin-top: clamp(1rem, 3vw, 3rem);
  margin-bottom: -0.2em;
  font-family: var(--font-display);
  font-size: clamp(5rem, 27vw, 28rem);
  font-style: italic;
  font-weight: 300;
  line-height: 0.82;
  letter-spacing: -0.06em;
  font-variation-settings: "SOFT" 100, "WONK" 1;
  color: var(--moss);
  user-select: none;
  white-space: nowrap;
}

.site-footer__mark > span { padding-inline: 0.06em; }

/* Each letter carries the gradient itself, so they can rise one after the other. The
   mark closes the page and its last 0.2em is cut off, so it only ever gets about 75%
   of the way into view: every range ends before 70% of "entry". */
.site-footer__mark span span {
  display: inline-block;
  background: linear-gradient(180deg, var(--moss) 30%, color-mix(in srgb, var(--moss) 15%, var(--paper)) 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  /* background-clip: text only paints inside the box, and italic glyphs overhang theirs
     (the b's ascender, the dots of the i's): pad every side the glyphs reach past, and
     take the room back with negative margins so the word keeps its spacing. */
  padding: 0.25em 0.2em 0;
  margin: -0.25em -0.2em 0;
}

@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    .site-footer__mark span span {
      animation: mark-rise linear both;
      animation-timeline: view();
      animation-range: entry calc(var(--i) * 3%) entry calc(46% + var(--i) * 3%);
    }
  }
}

@keyframes mark-rise { from { transform: translateY(70%) rotate(6deg); opacity: 0; } }

.site-footer__base {
  position: relative;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem 2rem;
  padding-block: 1.25rem 0;
  padding-bottom: var(--safe-bottom);
  border-top: 1px solid var(--rule);
  color: var(--muted);
}
.site-footer__base a { text-decoration: none; }
.site-footer__base form { display: inline; }

@media (max-width: 760px) {
  .site-footer__grid { grid-template-columns: 1fr 1fr; gap: 2rem 1.5rem; }
  .site-footer__intro { grid-column: 1 / -1; }
  .site-footer__col { gap: 0; }
  .site-footer__col .eyebrow { margin-bottom: 0.25rem; }
}

/* Comfortable thumb targets for the footer's text links. */
@media (pointer: coarse) {
  .site-footer__col a { display: flex; align-items: center; min-height: 44px; background-position: left calc(50% + 0.8em); }
  .site-footer__base a, .site-footer__base .link-button { display: inline-flex; align-items: center; min-height: 44px; }
}