/* shell.css — the shared shell on every page, on the Ink preset: header
   with primary navigation (desktop row, mobile disclosure menu) and footer.
   Behaviour: assets/js/nav.js. Without JS the mobile header shows the links
   as wrapping rows, so navigation never depends on the script (the club
   action left the header on 7 Oct; it stays in the footer). The brand is
   the wordmark artwork "cogniflux." (PDF p.19: lowercase, Display 650 /
   FLAR 65, Chalk letters and a Vermilion stop on Ink; never retyped).
   Decorative lines on Ink are Muted Plum. Hover feedback is for pointers
   that hover: on touch a tapped link or button would otherwise keep its
   hover look after the finger lifts. */

/* ---- wordmark ------------------------------------------------------------ */
/* clear space >= the x-height on every side (PDF p.19); the x-height is
   0.114 x the width (997 of 8726 units): 15 px at 132 px wide */
.brand {
  flex: none;
  display: inline-flex;
  align-items: center;
  min-height: var(--target-preferred);
  padding-block: var(--space-2);
  text-decoration: none;
}
.wordmark { display: block; width: 132px; height: auto; }   /* minimum 64 px */
/* the Ink-letter artwork for print (10 Oct 2026): an <img> of its own,
   hidden on screen but loaded with the page, so it is ready when the page
   is printed (a print-only CSS image is not fetched in time) */
.wordmark--print { display: none; }
@media (max-width: 600px), (orientation: landscape) and (max-height: 500px) { .wordmark { width: 116px; } }   /* phones, upright or turned */

/* ---- header -------------------------------------------------------------- */
.site-header {
  position: sticky;
  top: 0;
  z-index: 50;
  background: var(--on-bg);
  border-bottom: 1px solid var(--color-line);
}
.site-header__bar {
  display: flex;
  align-items: center;
  gap: var(--space-5);
  min-height: var(--header-h);
}
.site-nav { display: flex; align-items: center; gap: var(--space-6); margin-left: auto; }
.site-nav__list { display: flex; gap: var(--space-5); list-style: none; }
.site-nav__list a {
  display: inline-flex;
  align-items: center;
  min-height: var(--target-preferred);
  font-size: var(--text-ui);
  color: var(--on-text);
  text-decoration: none;
  border-bottom: 2px solid transparent;
  transition: border-color var(--duration-fast) var(--ease-out);
}
@media (hover: hover) { .site-nav__list a:hover { border-bottom-color: var(--color-line); } }
.site-nav__list a[aria-current="page"] { border-bottom-color: var(--on-text); }
.menu-btn { display: none; }
.site-header__scrim { display: none; }

/* phones (under 640px): the four links collapse behind the Menu button.
   From 640px up (tablets, phones turned sideways) they fit in one row:
   132px wordmark + 24px gap + 368px of links = 524px, inside the 576px
   content column at 640px. Set in em (39.9375em = 639px at the default
   16px) so a larger default text size keeps the menu until the row fits,
   instead of breaking the links over two lines; nav.js uses the same query */
@media (max-width: 39.9375em) {
  .js .menu-btn {
    display: inline-flex;
    align-items: center;
    gap: var(--space-3);
    margin-left: auto;
    min-height: var(--target-preferred);
    padding: 0 var(--space-4);
    border: 1px solid var(--on-text);
    border-radius: var(--radius-control);
    background: transparent;
    font-size: var(--text-ui);
    cursor: pointer;
  }
  .menu-btn__icon, .menu-btn__icon::before, .menu-btn__icon::after {
    display: block;
    width: 18px;
    height: 2px;
    background: currentColor;
    transition: transform var(--duration-fast) var(--ease-out);
  }
  .menu-btn__icon { position: relative; }
  .menu-btn__label { min-width: 2.65em; }   /* "Menu" and "Close" share one width: the bordered button keeps its edge */
  .menu-btn__icon::before, .menu-btn__icon::after { content: ""; position: absolute; left: 0; }
  .menu-btn__icon::before { top: -6px; }
  .menu-btn__icon::after { top: 6px; }
  .menu-btn[aria-expanded="true"] .menu-btn__icon { background: transparent; }
  .menu-btn[aria-expanded="true"] .menu-btn__icon::before { transform: translateY(6px) rotate(45deg); }
  .menu-btn[aria-expanded="true"] .menu-btn__icon::after { transform: translateY(-6px) rotate(-45deg); }

  .js .site-nav {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    display: none;
    flex-direction: column;
    align-items: stretch;
    gap: var(--space-5);
    margin: 0;
    padding: var(--space-4) var(--page-margin) var(--space-6);
    background: var(--on-bg);
    /* a full-height Ink sheet down to the bottom of the screen: the page
       never shows through as a dimmed, blended tone (dvh follows Safari's
       toolbars; svh first for browsers without dvh) */
    min-height: calc(100svh - var(--header-h));
    min-height: calc(100dvh - var(--header-h));
    max-height: calc(100svh - var(--header-h));
    max-height: calc(100dvh - var(--header-h));
    overflow-y: auto;
    overscroll-behavior: contain;
  }
  .js .site-header.is-open .site-nav { display: flex; }
  .js .site-nav__list { flex-direction: column; gap: 0; }
  .js .site-nav__list a {
    display: flex;
    width: 100%;
    min-height: 56px;
    font-size: var(--text-h3);
    font-weight: var(--weight-regular);   /* navigation is Text 400 (PDF p.8) */
    border-bottom: 1px solid var(--color-line);
  }
  .js .site-nav__list a[aria-current="page"] { text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 0.2em; }

  /* the page behind an open menu: covered and held still; wherever the
     sheet does not reach, a tap on the scrim only closes the menu (nav.js
     adds the element). Under the header's own content, over everything
     else on the page */
  .js .site-header.is-open .site-header__scrim {
    display: block;
    position: fixed;
    inset: 0;
    z-index: -1;
    background: var(--color-ink-panel);
  }
  html.has-open-menu { overflow: hidden; scrollbar-gutter: stable; }

  /* no JS: the links wrap under the brand name */
  /* without JS the links are already at the top: no sticky header covering content */
  html:not(.js) .site-header { position: static; }
  html:not(.js) .site-header__bar { flex-wrap: wrap; row-gap: 0; padding-block: var(--space-2); }
  html:not(.js) .site-nav { width: 100%; margin: 0; flex-wrap: wrap; gap: var(--space-2) var(--space-5); }
  html:not(.js) .site-nav__list { flex-wrap: wrap; gap: 0 var(--space-5); }
}
/* phones turned sideways: in the 56px header, 44px targets keep the whole
   focus ring (3px gap + 3px ring) on screen above the wordmark and links */
@media (orientation: landscape) and (max-height: 500px) {
  .site-header .brand, .site-nav__list a { min-height: 44px; }
}
/* small phones turned sideways (e.g. 568x320; wider ones show the row):
   the header is compact (--header-h, tokens.css) and the menu rows are
   48px, so the whole menu fits a short screen */
@media (max-width: 39.9375em) and (orientation: landscape) and (max-height: 500px) {
  .js .menu-btn { min-height: 44px; }
  .js .site-nav { padding-block: var(--space-2) var(--space-4); }
  .js .site-nav__list a { min-height: var(--target-preferred); }
}
/* the open menu fades in over the utility entry time; the links take a
   tap at once, and it closes instantly. Browsers without @starting-style
   show it at once */
@media (max-width: 39.9375em) and (prefers-reduced-motion: no-preference) {
  .js .site-header.is-open .site-nav,
  .js .site-header.is-open .site-header__scrim { transition: opacity var(--duration-enter) var(--ease-out); }
  @starting-style {
    .js .site-header.is-open .site-nav,
    .js .site-header.is-open .site-header__scrim { opacity: 0; }
  }
}
@media (prefers-reduced-motion: reduce) {
  .menu-btn__icon, .menu-btn__icon::before, .menu-btn__icon::after { transition: none; }
}

/* ---- footer: a compact Ink section (Alessandro, 8 Oct: option 2; the two
   actions removed on 10 Oct). The pages stay in the header only. The
   wordmark on the left, the contact links on the right, level with it; a
   thin rule, then the legal line. */
.site-footer { padding-block: var(--space-7) var(--space-4); border-top: 1px solid var(--on-line); }   /* a quiet edge where the page above also ends on Ink */
main:has(> :last-child:is(.surface-chalk, .surface-oyster, .surface-energy)) + .site-footer { border-top-color: transparent; }   /* after Chalk, Oyster or Vermilion the colour edge is the division (the border shows the Ink behind it: no shift) */
.site-footer ul { margin: 0; padding: 0; list-style: none; }
.site-footer li { margin: 0; }
.site-footer .brand { display: inline-flex; align-items: center; min-height: 40px; }
.site-footer .wordmark { width: min(160px, calc(var(--page-margin) * 8.75)); height: auto; }   /* x-height clear space inside the page margin on phones */
.site-footer__main {
  display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center;
  gap: var(--space-5) var(--space-8);
  padding-bottom: var(--space-5);
  border-bottom: 1px solid var(--on-line);
}
.site-footer__right { display: grid; gap: var(--space-2); }
.site-footer__contact { display: flex; flex-wrap: wrap; gap: 0 var(--space-5); }
.site-footer li a {
  display: inline-flex; align-items: center; gap: var(--space-2);
  min-height: 40px;
  font-size: var(--text-ui); line-height: 1.3; color: var(--on-text);
  text-decoration-line: underline; text-decoration-thickness: 2px; text-decoration-color: transparent; text-underline-offset: 0.2em;
  transition: text-decoration-color var(--duration-fast) var(--ease-out);
}
@media (hover: hover) {
  .site-footer li a:hover { text-decoration-color: currentColor; }
}
/* the press cue on touch, the same as hover (10 Oct 2026; the tap flash is off, base.css) */
.site-footer li a:active { text-decoration-color: currentColor; }
.site-nav__list a:active { border-bottom-color: var(--color-line); }
.site-footer__base {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between;
  gap: 0 var(--space-5);
  margin: 0; padding-top: var(--space-2);
  font-size: var(--text-ui); line-height: 1.3; color: var(--on-muted);   /* 16px at every width, like the contacts above it */
}
.site-footer__base a { display: inline-flex; align-items: center; min-height: 40px; color: var(--on-link); text-decoration-thickness: 1px; }
@media (min-width: 1024px) {
  .site-footer__right { justify-items: end; }
  .site-footer__contact { justify-content: flex-end; }
}
/* touch screens: every footer link is at least 44px tall */
@media (max-width: 639px), (pointer: coarse) {
  .site-footer li a, .site-footer__base a { min-height: 44px; }
}
@media (max-width: 639px) {
  .site-footer__contact { display: grid; }
  .site-footer__base { justify-content: flex-start; }
}
@media (prefers-reduced-motion: reduce) {
  .site-footer li a { transition: none; }
}

/* ---- print and Save as PDF (10 Oct 2026, off-page audit) -------------------
   Paper is the reading surface. Every surface prints with the Chalk preset's
   roles on no fill (Ink text, Muted Plum secondary text, underlined Ink
   links), so nothing prints light on white, whether or not the browser
   prints backgrounds. The wordmark swaps to the Ink-letter artwork (the
   approved version for light grounds) at the same size. Left out: the
   navigation, menu button and skip link, the decorative films (the hero
   film and its still, the training montage, the reel loops), the film
   viewer and the controls that only work on screen (play tabs, scroll
   cue). The header is static. Content waiting to arrive on
   scroll prints as it is composed. Actions print as outlined Ink labels. */
@media print {
  :root, .surface-ink, .surface-chalk, .surface-oyster, .surface-energy {
    --on-bg: transparent;
    --on-text: var(--color-text-reading);
    --on-muted: var(--color-text-muted-reading);
    --on-link: var(--color-text-reading);
    --on-line: var(--color-line-reading);
    --on-control: var(--color-border-control-reading);
    --on-badge-outline: transparent;
    color-scheme: light;
  }
  .brand picture { display: none; }
  .brand .wordmark--print { display: block; }
  .site-header { position: static; border-bottom-color: var(--color-line-reading); }
  .site-nav, .menu-btn, .skip-link, .site-header__scrim, .preview-bar,
  .hero-film__media, .hero__media video, .hero__pause, .tr__montage video, .reel__preview,
  .viewer, .media__film, .play, .scroll-cue, .hero-film__note { display: none !important; }
  /* panels that sit over a picture on screen (the homepage hero, For Clubs
     C02) lose their fill on paper: they print below it, on the page's roles
     (a parent class outranks the page stylesheets, which load later) */
  .hero.hero-film { min-height: 0; }
  .hero-film .hero-film__content { padding-top: var(--space-6); }
  .hero-film .hero-film__panel { background: none; padding-inline: 0; --on-muted: var(--color-text-muted-reading); --on-control: var(--color-border-control-reading); }
  .mv-band .mv-band__body { margin-top: 0; }
  .reveal, .arrive-item { opacity: 1 !important; transform: none !important; transition: none !important; }
  .btn, .btn.btn--primary, .surface-energy .btn.btn--primary { background: transparent; color: var(--color-text-reading); border-color: currentColor; box-shadow: none; }
  .site-footer { border-top-color: var(--color-line-reading); }
  /* no touch-target height or bottom padding on paper (it has its own
     margin): a page that ends on the footer no longer spills a blank one */
  .site-footer { padding-bottom: 0; }
  .site-footer li a, .site-footer__base a { min-height: 0; }
  /* a heading is never split across two pages, nor left at the foot of
     one without what it introduces */
  h1, h2, h3, h4 { break-inside: avoid; break-after: avoid; }
}