/* The one header of the main site (2026-10-14). The same markup, styles and behaviour on all six pages: the home's
   calm night header (rated 10 of 10), with a phone menu. Self-contained: its own tokens (the home and the inner pages
   give --color-ink opposite meanings), sizes in px so a page's root font size does not change it.
   Behaviour: assets/js/header.js. Load this file after the page's own stylesheets. */

:root {
  --hd-paper: #F3F1EA;                      /* text on the night */
  --hd-muted: #B9C2DA;
  --hd-deep: #050814;                       /* the owl's pupils */
  --hd-veil: rgb(5 8 20 / 0.86);            /* the ground under the header, fading out */
  --hd-veil-solid: rgb(5 8 20 / 0.96);      /* the open phone menu */
  --hd-line: rgb(191 212 255 / 0.16);
  --hd-line-strong: rgb(191 212 255 / 0.34);
  --hd-hover: rgb(191 212 255 / 0.09);
  --hd-press: rgb(191 212 255 / 0.15);
  --hd-shadow: rgb(0 0 0 / 0.5);
  --hd-blue: #4191E1;
  --hd-mint: #41E1B5;
  --hd-cyan: #22D3EE;
  --hd-ring: #22D3EE;
  --hd-gradient: linear-gradient(100deg, #4191E1 0%, #41E1B5 55%, #22D3EE 100%);
  --hd-size: clamp(0.875rem, 0.75rem + 0.2vw, 1rem);       /* rem-led, rem cap: follows browser zoom */
  --hd-pad: clamp(1.125rem, 0.75rem + 1.6vw, 4rem);
  --hd-h: clamp(3.5rem, 2.75rem + 1.2vw, 5rem);
  --hd-ease: cubic-bezier(0.16, 1, 0.3, 1);
  --hd-ease-exit: cubic-bezier(0.4, 0, 1, 1);
  --hd-fast: 150ms;
  --hd-normal: 200ms;
  --hd-slow: 300ms;
  --header-h: var(--hd-h);                  /* the inner pages place their content under the header with this */
}

.skip { z-index: 200; }                     /* the skip link stays above the header on every page */

.hd { position: fixed; inset: 0 0 auto 0; z-index: 100; height: var(--hd-h); display: flex; align-items: center; justify-content: space-between; gap: 1.5em; padding: 0 max(var(--hd-pad), env(safe-area-inset-right)) 0 max(var(--hd-pad), env(safe-area-inset-left)); font-family: var(--font-text); font-size: var(--hd-size); font-weight: 400; line-height: 1.5; letter-spacing: normal; color: var(--hd-paper); background: linear-gradient(to bottom, var(--hd-veil) 0%, var(--hd-veil) 64%, transparent 100%); }
/* T312 (2026-10-17): on the inner pages the header sits over live content. Once the page has scrolled, a solid band
   fades in behind it (the --hd-deep night, fully solid, a hairline under it), so scrolling text no longer ghosts behind the
   name and the menu. At the top of the page nothing changes: the band is at opacity 0 there and the calm gradient above
   is all you see. Only opacity moves, tied to the scroll position by the browser (no script, no blur). The home keeps its
   own look. A browser that cannot tie a style to the scroll (no animation-timeline) gets the solid band at all times. */
body:is(.about, .products, .research, .contact-dawn, .license) .hd::before { content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none; background: var(--hd-deep); box-shadow: 0 1px 0 var(--hd-line); }
@keyframes hd-scrim { from { opacity: 0; } to { opacity: 1; } }
@supports (animation-timeline: scroll()) {
  body:is(.about, .products, .research, .contact-dawn, .license) .hd::before { opacity: 0; animation: hd-scrim linear both; animation-timeline: scroll(root block); animation-range: 0 96px; }
}
.hd :focus-visible { outline: 2px solid var(--hd-ring); outline-offset: 3px; border-radius: 6px; }

/* the owl and the name */
.hd-brand { display: inline-flex; align-items: center; gap: 0.62em; min-height: 44px; color: var(--hd-paper); text-decoration: none; }
.hd-brand__mark { width: 1.9em; height: 1.9em; flex: none; transition: transform var(--hd-slow) var(--hd-ease); }
.hd-brand__pupil { fill: var(--hd-deep); transform-box: fill-box; transform-origin: center; transition: transform var(--hd-normal) var(--hd-ease); }
.hd-brand__name { font-family: var(--font-display); font-weight: 300; font-size: 1.5em; letter-spacing: 0.01em; line-height: 1; white-space: nowrap; }
.hd-brand:hover .hd-brand__mark { transform: rotate(-8deg); }
.hd-brand:hover .hd-brand__pupil { transform: scale(1.35); }

/* the links */
.hd-nav { display: flex; align-items: center; gap: clamp(0.2em, 0.6vw, 1.1em); }
.hd-list, .hd-sites__menu { list-style: none; margin: 0; padding: 0; }
.hd-list { display: flex; align-items: center; gap: clamp(0.2em, 0.6vw, 1.1em); }
.hd-link { position: relative; display: inline-flex; align-items: center; gap: 0.45em; min-height: 44px; padding: 0 0.75em; border: 0; border-radius: 999px; background: none; color: var(--hd-paper); font: inherit; font-weight: 600; letter-spacing: 0.035em; text-decoration: none; white-space: nowrap; cursor: pointer; transition: color var(--hd-fast) ease-out, background-color var(--hd-fast) ease-out; }
.hd-link::after { content: ""; position: absolute; left: 0.75em; right: 0.75em; bottom: 0.72em; height: 1px; background: var(--hd-gradient); transform: scaleX(0); transform-origin: left; transition: transform var(--hd-slow) var(--hd-ease); }
.hd-link:hover::after, .hd-link:focus-visible::after, .hd-sites__button[aria-expanded="true"]::after { transform: scaleX(1); }
.hd-link:active { color: var(--hd-mint); }
.hd-link[aria-current="page"]::after { transform: scaleX(1); height: 2px; }   /* the page you are on: the river line stays */

/* Product sites: one button, a small menu of the three sites */
.hd-sites { position: relative; margin-left: clamp(0.2em, 0.8vw, 1.4em); padding-left: clamp(0.4em, 1vw, 1.6em); border-left: 1px solid var(--hd-line); }
.hd-chev { width: 0.85em; height: 0.85em; transition: transform var(--hd-normal) var(--hd-ease); }
.hd-sites__button[aria-expanded="true"] .hd-chev { transform: rotate(180deg); }
.hd-sites__menu { position: absolute; right: 0; top: calc(100% + 0.5em); min-width: 19em; padding: 0.5em; border-radius: 1em; background: var(--hd-veil); border: 1px solid var(--hd-line); box-shadow: 0 1.2em 3em var(--hd-shadow); visibility: hidden; opacity: 0; transform: translateY(-6px) scale(0.985); transform-origin: top right; transition: opacity 150ms var(--hd-ease-exit), transform 150ms var(--hd-ease-exit), visibility 0s linear 150ms; }
.hd-sites__menu.is-open { visibility: visible; opacity: 1; transform: none; transition: opacity var(--hd-normal) var(--hd-ease), transform var(--hd-normal) var(--hd-ease), visibility 0s; }
.hd-sites__link { display: grid; grid-template-columns: auto 1fr auto; align-items: center; column-gap: 0.8em; min-height: 44px; padding: 0.7em 0.9em; border-radius: 0.7em; color: var(--hd-paper); text-decoration: none; opacity: 0; transform: translateY(-4px); transition: background-color var(--hd-fast) ease-out; }
.hd-sites__menu.is-open .hd-sites__link { opacity: 1; transform: none; transition: background-color var(--hd-fast) ease-out, opacity var(--hd-normal) var(--hd-ease), transform var(--hd-normal) var(--hd-ease); }
.hd-sites__menu.is-open li:nth-child(2) .hd-sites__link { transition-delay: 0s, 40ms, 40ms; }
.hd-sites__menu.is-open li:nth-child(3) .hd-sites__link { transition-delay: 0s, 80ms, 80ms; }
.hd-sites__link:hover, .hd-sites__link:focus-visible { background: var(--hd-hover); }
.hd-sites__link:active { background: var(--hd-press); }
.hd-sites__dot { width: 0.6em; height: 0.6em; border-radius: 50%; background: var(--dot); box-shadow: 0 0 0.8em var(--dot); }
.hd-sites__link[data-site="mneme"] { --dot: var(--hd-blue); }
.hd-sites__link[data-site="skills"] { --dot: var(--hd-mint); }
.hd-sites__link[data-site="orion"] { --dot: var(--hd-cyan); }
.hd-sites__link.is-joined .hd-sites__dot { outline: 2px solid var(--dot); outline-offset: 2px; }   /* Products page: the product being read */
.hd-sites__name { font-weight: 600; letter-spacing: 0.03em; }
.hd-sites__go { color: var(--hd-muted); transition: transform var(--hd-normal) var(--hd-ease), color var(--hd-fast) ease-out; }
.hd-sites__link:hover .hd-sites__go, .hd-sites__link:focus-visible .hd-sites__go { transform: translate(2px, -2px); color: var(--hd-paper); }

/* the one sound toggle (assets/js/sound.js) and its volume */
.hd-sound { display: flex; align-items: center; gap: 0.3em; }
.hd-sound__bars { display: inline-flex; align-items: flex-end; gap: 2px; height: 0.95em; }
.hd-sound__bars i { width: 2px; height: 30%; border-radius: 1px; background: currentColor; transform-origin: bottom; }
.hd-sound__button[aria-pressed="true"] { color: var(--hd-mint); }
.hd-sound__button[aria-pressed="true"] .hd-sound__bars i { height: 100%; animation: hd-bars 1.1s ease-in-out infinite alternate; }
.hd-sound__button[aria-pressed="true"] .hd-sound__bars i:nth-child(2) { animation-delay: -0.4s; }
.hd-sound__button[aria-pressed="true"] .hd-sound__bars i:nth-child(3) { animation-delay: -0.75s; }
.hd-sound__button[aria-pressed="true"] .hd-sound__bars i:nth-child(4) { animation-delay: -0.2s; }
.hd-sound__button[data-state="resume"] { color: var(--hd-mint); }
@keyframes hd-bars { from { transform: scaleY(0.25); } to { transform: scaleY(1); } }
.hd-sound__level { width: clamp(64px, 5.2vw, 150px); height: 44px; margin: 0; accent-color: var(--hd-mint); cursor: pointer; background: none; }
.hd-sound__level[hidden] { display: none; }

/* the phone menu button: only on narrow screens */
.hd-menu { display: none; font: inherit; }
.hd-menu svg { width: 1.15em; height: 1.15em; }
.hd-menu .hd-menu__close, .hd-menu[aria-expanded="true"] .hd-menu__open { display: none; }
.hd-menu[aria-expanded="true"] .hd-menu__close { display: block; }

@media (max-width: 900px) {
  .hd.is-open { background: var(--hd-veil-solid); }
  .hd-nav { gap: 0.25em; }
  .hd-menu { display: inline-flex; align-items: center; gap: 0.5em; min-height: 44px; padding: 0 0.95em; border: 1px solid var(--hd-line-strong); border-radius: 999px; background: none; color: var(--hd-paper); font: inherit; font-weight: 600; letter-spacing: 0.035em; cursor: pointer; transition: border-color var(--hd-fast) ease-out, background-color var(--hd-fast) ease-out; }
  .hd-menu:hover { border-color: var(--hd-paper); }
  .hd-menu:active { background: var(--hd-press); }
  .hd-list { position: fixed; inset: var(--hd-h) 0 auto 0; flex-direction: column; align-items: stretch; gap: 0.15em; max-height: calc(100svh - var(--hd-h)); overflow-y: auto; padding: 0.5em max(var(--hd-pad), env(safe-area-inset-right)) 1.5em max(var(--hd-pad), env(safe-area-inset-left)); background: var(--hd-veil-solid); border-bottom: 1px solid var(--hd-line-strong); box-shadow: 0 1.5em 3em var(--hd-shadow); visibility: hidden; opacity: 0; transform: translateY(-8px); }
  /* T347 (2026-10-17): the closed panel has NO transition of its own, so when the window crosses this breakpoint (a zoom
     step, a resize) the panel is hidden at once, never a fade-out frame. Motion belongs to the button only: .is-open
     fades it in, and header.js adds .is-closing for the length of a fade-out when the person closes it. */
  .hd-list.is-open { visibility: visible; opacity: 1; transform: none; transition: opacity var(--hd-normal) var(--hd-ease), transform var(--hd-normal) var(--hd-ease), visibility 0s; }
  .hd-list.is-closing { transition: opacity 150ms var(--hd-ease-exit), transform 150ms var(--hd-ease-exit), visibility 0s linear 150ms; }
  .hd-list .hd-link { width: 100%; min-height: 48px; justify-content: flex-start; font-size: max(16px, 1.05em); }
  .hd-list .hd-link::after { right: auto; width: 2.5em; bottom: 0.6em; }
  .hd-sites { margin: 0.4em 0 0; padding: 0.4em 0 0; border-left: 0; border-top: 1px solid var(--hd-line); }
  .hd-sites__button { justify-content: space-between; }
  .hd-sites__menu { position: static; min-width: 0; padding: 0 0 0 0.6em; border: 0; border-radius: 0; background: none; box-shadow: none; transform: none; display: none; }
  .hd-sites__menu.is-open { display: block; }
  .hd-sites__link { font-size: max(16px, 1em); }
  .sound__label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
  .hd-sound__button { justify-content: center; min-width: 44px; padding: 0 0.6em; }
  .hd-sound__level { width: 56px; }
}
@media (max-width: 360px) { .hd-menu__word { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; } }

@media (prefers-reduced-motion: reduce) {
  .hd-brand__mark, .hd-brand__pupil, .hd-link::after, .hd-chev, .hd-sites__menu, .hd-sites__link, .hd-sites__go, .hd-list { transition-property: opacity, color, background-color, border-color, visibility; }
  .hd-brand:hover .hd-brand__mark, .hd-brand:hover .hd-brand__pupil, .hd-sites__link:hover .hd-sites__go, .hd-sites__link:focus-visible .hd-sites__go { transform: none; }
  .hd-sites__menu, .hd-sites__link, .hd-list { transform: none; }
  .hd-sound__button[aria-pressed="true"] .hd-sound__bars i { animation: none; height: 80%; }
  .hd-sound__button[aria-pressed="true"] .hd-sound__bars i:nth-child(odd) { height: 50%; }
}
@media (forced-colors: active) {
  .hd-sites__menu, .hd-list { border: 1px solid CanvasText; }
  .hd-link::after { background: Highlight; }
  .hd-menu { border-color: ButtonText; }
}