/* =============================================================================
   ATUM — assets/css/shell.css
   THE SHELL: the header and the footer, and nothing else.

   Written 2026-08-16, when the interactive homepage landed and Angelo asked
   for one header across all five pages, with the language picker moved out of
   the header and into the footer.

   WHY THIS FILE EXISTS AT ALL, AND WHY IT IS NOT IN components.css.
   The homepage is a self-contained document: a canvas engine, its own inline
   <style>, and no base.css. The other four pages are the ordinary site and
   load base.css + components.css + pages.css. The header and the footer are
   the only two things that have to be identical on both. So they live here,
   in the ONE stylesheet both worlds load, and this file depends on nothing
   but the palette.

   THE CONTRACT WITH ITS TWO HOSTS — read before adding a rule.
   Usable here: --paper --paper-2 --paper-3 --rule --rule-2 --ink --ink-2
   --ink-3 --night-900 --night-700 --night-600 --on-night --on-night-2
   --on-night-3 --sun --sun-hi --ochre --font-sans --font-mono. Those are
   declared identically by base.css and by the homepage's inline :root.
   NOT usable bare: the spacing scale (--s1..--s11), the type scale (--t-*),
   --border, --radius, --dur-*, --ease, --shell, --gutter, --night-800,
   --night-500, --rule-strong, --ochre-2. base.css has them; the homepage does
   not. Anything from that second list is written as var(--x, literal) so the
   token wins where it exists and the shell still renders where it does not.

   THE TWO MODES.
   Static pages          the bar sits on a paper plate at all times. It has to:
                         about.html and nights.html open on a night band, and a
                         transparent bar over a night band is ink on night.
                         Scrolling condenses it — that is the interaction.
   body[data-shell=      the homepage. The bar is fixed and transparent, over
   "overlay"]            the engine canvas, and it inverts with body.night the
                         way the rest of that page does.

   THE MARK IS NEVER REDRAWN HERE. The <svg> is the media kit’s own drawing,
   generated by the kit and pasted in whole. This file only points its two role
   classes at tokens — it never recolours or redraws anything.
   ========================================================================== */

:root {
  /* Shell-only names. They cannot collide with base.css, and they are the one
     thing the homepage overrides — its content measure is 88rem, not 76rem. */
  --sh-max:     76rem;
  --sh-gutter:  clamp(1.5rem, 4vw, 4rem);
  --sh-gap:     1.5rem;
  --sh-t-xs:    0.75rem;
  --sh-t-sm:    0.8438rem;
  --sh-t-md:    1.0625rem;
  --sh-ease:    cubic-bezier(0.22, 0.61, 0.36, 1);
  --sh-dur:     120ms;
  --sh-dur-2:   220ms;
}

/* ---------- Skip link ------------------------------------------------------
   Fixed, not absolute: an absolute skip link is anchored to the document, so
   focusing it part-way down a page puts it off-screen above the fold. It used
   to live in base.css; it moved here when the homepage — which does not load
   base.css — got a <main> and needed one too. One source, both worlds.      */

.skip {
  position: fixed;
  left: 1rem;
  top: -6rem;
  z-index: 200;
  padding: 0.75rem 1.5rem;
  background: var(--ink);
  color: var(--paper);
  font-family: var(--font-sans);
  font-weight: 600;
  text-decoration: none;
  border-radius: var(--radius, 4px);
  transition: top var(--sh-dur-2) var(--sh-ease);
}
.skip:focus { top: 1rem; }

/* ---------- The mark -------------------------------------------------------
   Two roles, not five colours. `form` is the hub disc and two of the three
   blades; `accent` is the amber ring and the third blade. Naming them for
   their role is what lets ONE inline drawing be correct on paper and on night.

   `overflow: visible` is deliberate — the blades reach 27.5 of the 32-unit
   half-artboard, so there is 4.5 units of built-in margin and nothing clips,
   but a future variation with a rim would.                                  */

.mark { width: 1.75rem; height: 1.75rem; flex: none; overflow: visible; }
.mark__form   { fill: currentColor; }
.mark__accent { fill: var(--ochre); }

/* THE HEADER MARK SITS ON ITS OWN INK PLATE. MEDIA-KIT.md §5, "the mark in
   the site header": night artwork on an ink plate. Angelo, 2026-08-13 — "the
   atum logo is black? its barely visible, can we use the coloured version?"
   On cream the drawing has to be ink to be seen at all, and --ochre is the
   only amber that clears contrast on paper (5.3:1), which is a dark brown. So
   the plate gives the night artwork the ground it was drawn for.

   IT KEEPS THE PLATE ON THE HOMEPAGE TOO, over the canvas and through night.
   That is §6.5 — a mark that must sit on a busy ground goes on a solid plate —
   and it means the bar, the browser tab and the app icon are one drawing in
   one treatment everywhere. The padding is the kit's clear space, 10 of 64
   artboard units. Keep the drawing at 28px if you change the box: the box is
   the drawing plus twice the padding.                                       */
.header .mark {
  width: 2.375rem;
  height: 2.375rem;
  padding: 0.3125rem;
  box-sizing: border-box;
  background: var(--ink);
  border-radius: 0.625rem;
}
.header .mark__form   { fill: var(--paper); }
.header .mark__accent { fill: var(--sun); }

/* The footer is night on night, so the drawing needs no plate — it is already
   on the ground it was drawn for. */
.footer .mark__form   { fill: currentColor; }
.footer .mark__accent { fill: var(--sun); }

.wordmark {
  display: inline-flex;
  align-items: center;
  gap: 0.75rem;
  text-decoration: none;
  color: var(--ink);
  font-family: var(--font-sans);
  font-weight: 800;
  font-size: 1.375rem;
  letter-spacing: 0.02em;
  line-height: 1;
  transition: color var(--sh-dur-2) var(--sh-ease);
}
.footer .wordmark { color: var(--on-night); }
.wordmark__text { display: block; padding-top: 0.1em; }

/* ---------- Header ---------------------------------------------------------
   One bar: wordmark, nav, and the page's one standing call to action. The
   language picker used to live here and is now in the footer — Angelo,
   2026-08-16. It was the only control in the bar that was not navigation,
   and six languages in a bar that also has to hold a CTA is the fight that
   put it on the burger's side of the breakpoint in the first place.        */

.header {
  position: sticky;
  top: 0;
  z-index: 60;
  background: color-mix(in srgb, var(--paper) 92%, transparent);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--rule);
  transition: min-height var(--sh-dur-2) var(--sh-ease),
              box-shadow var(--sh-dur-2) var(--sh-ease),
              background var(--sh-dur-2) var(--sh-ease),
              border-color var(--sh-dur-2) var(--sh-ease);
}
@supports not (backdrop-filter: blur(4px)) { .header { background: var(--paper); } }

.header__bar {
  width: 100%;
  max-width: var(--sh-max);
  margin-inline: auto;
  padding-inline: var(--sh-gutter);
  display: flex;
  align-items: center;
  gap: var(--sh-gap);
  min-height: 4.5rem;
  transition: min-height var(--sh-dur-2) var(--sh-ease);
}

/* The interaction on a static page. site.js sets is-stuck past 8px of scroll:
   the bar condenses and lifts off the page instead of changing colour, which
   is the one move that cannot make anything unreadable. */
.header.is-stuck { box-shadow: 0 10px 30px -24px rgb(20 26 40 / 0.55); }
.header.is-stuck .header__bar { min-height: 3.75rem; }

/* THE HOMEPAGE. Fixed over the canvas, no plate, no rule, and it inverts with
   the engine's own night. */
body[data-shell='overlay'] .header {
  position: fixed;
  left: 0;
  right: 0;
  background: transparent;
  backdrop-filter: none;
  border-bottom-color: transparent;
  box-shadow: none;
}
body[data-shell='overlay'] .header.is-stuck .header__bar { min-height: 4.5rem; }
body.night .wordmark { color: var(--on-night); }

.nav {
  display: none;
  margin-inline: auto;
  align-items: center;
  gap: clamp(1rem, 2.2vw, 2rem);
}
@media (min-width: 62rem) { .nav { display: flex; } }

.nav__link {
  position: relative;
  text-decoration: none;
  font-family: var(--font-sans);
  font-size: var(--sh-t-sm);
  font-weight: 600;
  letter-spacing: 0.005em;
  color: var(--ink-2);
  padding-block: 0.5rem;
  transition: color var(--sh-dur) var(--sh-ease);
}
.nav__link:hover { color: var(--ink); }
.nav__link::after {
  content: '';
  position: absolute;
  left: 0; right: 0; bottom: -2px;
  height: 2px;
  background: var(--ochre);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform var(--sh-dur-2) var(--sh-ease);
}
.nav__link:hover::after { transform: scaleX(1); }
.nav__link[aria-current='page'] { color: var(--ink); }
.nav__link[aria-current='page']::after { transform: scaleX(1); }

body.night .nav__link { color: var(--on-night-2); }
body.night .nav__link:hover,
body.night .nav__link[aria-current='page'] { color: var(--on-night); }
body.night .nav__link::after { background: var(--sun); }

/* The right-hand group. Wrapped rather than loose so the CTA and the burger
   never separate when the nav is hidden and the bar re-flows. */
.header__end {
  margin-left: auto;
  display: flex;
  align-items: center;
  gap: 0.75rem;
}

/* The standing call to action. A pill, because it is the one thing in the bar
   that is not navigation and it has to look like a different kind of object. */
.header__cta {
  display: none;
  border-radius: 99px;
  padding: 0.6rem 1.3rem;
  font-family: var(--font-sans);
  font-weight: 700;
  font-size: var(--sh-t-sm);
  text-decoration: none;
  white-space: nowrap;
  background: var(--ink);
  color: var(--paper);
  transition: background var(--sh-dur-2) var(--sh-ease),
              color var(--sh-dur-2) var(--sh-ease);
}
@media (min-width: 30rem) { .header__cta { display: inline-block; } }
.header__cta:hover { background: var(--ochre); color: var(--paper); }
body.night .header__cta { background: var(--sun); color: var(--night-900); }
body.night .header__cta:hover { background: var(--sun-hi); }

/* ---------- Mobile menu ----------------------------------------------------
   The panel is positioned inside the header, not fixed to the viewport, so it
   can never cover the button that opened it. The new header hid the nav below
   its breakpoint and put nothing in its place; the burger is kept from the old
   one because a phone otherwise has no way to reach four of the five pages. */

.burger {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.45rem 0.6rem;
  border: 1px solid var(--rule-strong, #8E8069);
  border-radius: var(--radius, 4px);
  background: transparent;
  font-family: var(--font-mono);
  font-size: var(--sh-t-xs);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink);
  cursor: pointer;
}
@media (min-width: 62rem) { .burger { display: none; } }
.burger__ico { width: 14px; height: 10px; position: relative; }
.burger__ico::before, .burger__ico::after {
  content: '';
  position: absolute;
  left: 0; right: 0;
  height: 2px;
  background: currentColor;
}
.burger__ico::before { top: 0; }
.burger__ico::after { bottom: 0; }
body.night .burger { color: var(--on-night); border-color: var(--night-500, #55689C); }

.menu {
  position: absolute;
  left: 0; right: 0; top: 100%;
  background: var(--paper);
  border-bottom: 1px solid var(--rule-2);
  box-shadow: 0 18px 40px -24px rgb(20 26 40 / 0.45);
  padding: 1rem 0 1.5rem;
}
.menu[hidden] { display: none !important; }
.menu__link {
  display: block;
  padding: 0.75rem var(--sh-gutter);
  text-decoration: none;
  font-family: var(--font-sans);
  font-size: var(--sh-t-md);
  font-weight: 650;
  color: var(--ink);
  border-left: 3px solid transparent;
}
.menu__link[aria-current='page'] { border-left-color: var(--ochre); background: var(--paper-2); }
.menu__link:hover { background: var(--paper-2); }

/* THE PILL ON A PHONE. Below 30rem the bar cannot hold it — measured at 360px,
   not eyeballed: mark plate, wordmark, pill and a labelled burger came to about
   380 in a 360 row, and in Dutch and French it overflowed the four static pages
   too. Hiding it and leaving nothing would take the one standing call to action
   off every phone, on a site whose whole argument is that somebody picks up. So
   it moves into the panel the burger opens, where it has a full row to itself.

   It appears ONLY where the bar cannot carry it, so no width ever shows two. */
.menu__cta { display: none; }
@media (max-width: 29.99rem) {
  .menu__cta {
    display: inline-block;
    margin: 1rem var(--sh-gutter) 0;
    border-radius: 99px;
    padding: 0.7rem 1.4rem;
    font-family: var(--font-sans);
    font-weight: 700;
    font-size: var(--sh-t-sm);
    text-decoration: none;
    background: var(--ink);
    color: var(--paper);
  }
}

/* ---------- Footer ---------------------------------------------------------
   Night ground, four columns, and since 2026-08-16 the language picker.     */

.footer {
  position: relative;
  z-index: 10;
  background: var(--night-900);
  color: var(--on-night-2);
  font-family: var(--font-sans);
  border-top: 1px solid var(--night-700);
  padding-block: 6rem 2rem;
}
.footer__inner {
  width: 100%;
  max-width: var(--sh-max);
  margin-inline: auto;
  padding-inline: var(--sh-gutter);
}
.footer__grid {
  display: grid;
  gap: 3rem 2rem;
  grid-template-columns: 1fr;
}
@media (min-width: 46rem) { .footer__grid { grid-template-columns: 1fr 1fr; } }
@media (min-width: 68rem) { .footer__grid { grid-template-columns: 1.6fr 1fr 1fr 1.2fr; } }

.footer .footer__title {
  font-family: var(--font-mono);
  font-size: var(--sh-t-xs);
  font-weight: 500;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--on-night-3);
  margin: 0 0 1rem;
}
.footer .footer__list { list-style: none; margin: 0; padding: 0; }
.footer .footer__list > li + li { margin-top: 0.5rem; }
.footer .footer__link {
  text-decoration: none;
  color: var(--on-night-2);
  font-size: var(--sh-t-sm);
  border-bottom: 1px solid transparent;
  transition: color var(--sh-dur) var(--sh-ease), border-color var(--sh-dur) var(--sh-ease);
}
.footer .footer__link:hover { color: var(--on-night); border-bottom-color: var(--sun); }

.footer .footer__note {
  font-size: var(--sh-t-sm);
  color: var(--on-night-3);
  margin-top: 1rem;
  max-width: 32ch;
}

/* The standing line about what the engine is. An amber rule marks it the way
   the section numbers are marked; it is not greyed down into a footnote. */
.footer .footer__build {
  margin-top: 1.5rem;
  max-width: 34ch;
  padding-left: 1rem;
  border-left: 2px solid var(--sun);
  font-size: var(--sh-t-sm);
  color: var(--on-night-2);
}

.footer .footer__legal {
  margin-top: 4rem;
  padding-top: 1.5rem;
  border-top: 1px solid var(--night-700);
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem 1.5rem;
  align-items: center;
  font-size: var(--sh-t-sm);
  color: var(--on-night-3);
}

/* The staff links. They inherit the legal line's size and its muted colour so
   they read as the same class of thing as the copyright notice, and they are
   pushed to the far end so they never sit next to anything a prospect is meant
   to click. They are wrapped as one group rather than sitting loose: on a
   wrapped flex row the auto margin otherwise strands one of them alone on a
   line, which reads as two unrelated items instead of a pair of staff doors. */
.footer .footer__legal-link { color: inherit; text-decoration: none; }
.footer .footer__legal-link:hover,
.footer .footer__legal-link:focus-visible { color: var(--on-night-2); text-decoration: underline; }
.footer .footer__staff {
  margin-left: auto;
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem 1.5rem;
}
@media (max-width: 47.99rem) { .footer .footer__staff { margin-left: 0; } }

/* ---------- Language picker ------------------------------------------------
   MOVED HERE FROM THE HEADER — Angelo, 2026-08-16: "the language selector from
   the header we used to use, now needs to be added in the footer".

   The control is unchanged: a disclosure button and a list of seven real
   buttons, no fake listbox semantics, so it degrades and reads correctly. The
   trigger shows the two-letter code because that is what fits and what is
   universally read as a language control; the list carries each language's own
   name in its own script, which is what a visitor actually recognises. IDs are
   what i18n.js binds to, so the move needed no JavaScript change at all.

   TWO THINGS CHANGED WITH THE GROUND. It is night here, not paper, so every
   colour is re-pointed at the night tokens; and the panel opens UPWARD, because
   the control now sits at the bottom of the document and a downward panel would
   open into nothing.                                                        */

.lang { position: relative; }

.lang__trigger {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.4rem 0.5rem 0.4rem 0.6rem;
  border: 1px solid var(--night-500, #55689C);
  border-radius: var(--radius, 4px);
  background: transparent;
  font-family: var(--font-mono);
  font-size: var(--sh-t-xs);
  font-weight: 500;
  letter-spacing: 0.09em;
  color: var(--on-night);
  cursor: pointer;
  transition: background var(--sh-dur) var(--sh-ease), color var(--sh-dur) var(--sh-ease);
}
.lang__trigger:hover { background: var(--night-800, #111A33); }
.lang__trigger[aria-expanded='true'] { background: var(--on-night); color: var(--night-900); border-color: var(--on-night); }
.lang__trigger[aria-busy='true'] { opacity: 0.55; }
.lang__current { display: block; }
.lang__chev {
  flex: none;
  color: var(--on-night-3);
  transition: transform var(--sh-dur) var(--sh-ease);
}
.lang__trigger[aria-expanded='true'] .lang__chev { color: var(--night-900); transform: rotate(180deg); }

/* Anchored to the control and opening upward and leftward, so it can never run
   off a phone screen and never off the bottom of the document. */
.lang__menu {
  position: absolute;
  bottom: calc(100% + 0.5rem);
  left: 0;
  z-index: 70;
  min-width: 12.5rem;
  padding: 0.5rem 0;
  background: var(--night-800, #111A33);
  border: 1px solid var(--night-600);
  border-radius: var(--radius, 4px);
  box-shadow: 0 -18px 40px -22px rgb(0 0 0 / 0.8);
}
.lang__menu[hidden] { display: none !important; }

.lang__head {
  margin: 0 0 0.25rem;
  padding: 0.25rem 1rem 0.5rem;
  max-width: none;
  font-family: var(--font-mono);
  font-size: var(--sh-t-xs);
  letter-spacing: 0.09em;
  color: var(--on-night-3);
  border-bottom: 1px solid var(--night-700);
}

.lang__opt {
  display: flex;
  align-items: baseline;
  gap: 0.75rem;
  width: 100%;
  padding: 0.5rem 1rem;
  background: transparent;
  border: 0;
  border-left: 3px solid transparent;
  font-family: var(--font-sans);
  font-size: var(--sh-t-sm);
  text-align: left;
  color: var(--on-night-2);
  cursor: pointer;
  transition: background var(--sh-dur) var(--sh-ease), color var(--sh-dur) var(--sh-ease);
}
.lang__opt:hover { background: var(--night-700); color: var(--on-night); }
/* On a touch screen these seven sit close together and a mis-tap sends someone
   to a language they cannot read, which is a hard state to get out of. */
@media (pointer: coarse) {
  .lang__opt { min-height: 44px; align-items: center; }
}
.lang__opt[aria-current='true'] {
  border-left-color: var(--sun);
  background: var(--night-700);
  color: var(--on-night);
  font-weight: 650;
}
/* min-width, not width: `2ch` is two zeros, and two letter-spaced capitals are
   wider than that, so a fixed width broke "EN" onto two lines. */
.lang__code {
  flex: none;
  min-width: 2.6ch;
  white-space: nowrap;
  font-family: var(--font-mono);
  font-size: 0.6875rem;
  letter-spacing: 0.06em;
  color: var(--on-night-3);
}
.lang__opt[aria-current='true'] .lang__code { color: var(--sun); }
/* the native name is set in its own script, so it must not inherit the
   document's tracking or the Thai marks separate from their base letters */
.lang__name { letter-spacing: normal; line-height: 1.45; }

/* ---------- Motion ---------------------------------------------------------
   The shell's own transitions, switched off for anyone who asked. base.css
   zeroes its duration tokens the same way, but the homepage has no base.css. */
@media (prefers-reduced-motion: reduce) {
  :root { --sh-dur: 0ms; --sh-dur-2: 0ms; }
  .header, .header__bar, .wordmark, .nav__link, .nav__link::after,
  .header__cta, .lang__trigger, .lang__chev, .lang__opt, .footer__link, .skip {
    transition: none;
  }
}