/* ==========================================================================
   AVI Robotics: site stylesheet
   Layers: tokens → base → layout → components → pages → utilities
   BRAND SWAP POINT: everything brand-specific lives in the `tokens` layer.
   See /DESIGN.md before changing anything here.
   ========================================================================== */

@layer tokens, base, layout, components, pages, utilities;

@font-face {
  font-family: "Archivo";
  src: url("/fonts/archivo-var.woff2") format("woff2-variations");
  font-weight: 100 900;
  font-stretch: 62% 125%;
  font-display: swap;
}
@font-face {
  font-family: "Porcine";
  src: url("/fonts/porcine-heavy.woff2") format("woff2");
  font-weight: 900;
  font-display: swap;
}
@font-face {
  font-family: "JetBrains Mono";
  src: url("/fonts/jetbrains-mono-var.woff2") format("woff2-variations");
  font-weight: 100 800;
  font-display: swap;
}

/* ---------- tokens ---------- */
@layer tokens {
  :root {
    /* Palette: official AVI/SMS brand (BRAND SWATCH.aco + "Branding Resources" doc).
       Ink = AVI Black. Accent = AVI Blurple. Slate/steel/antenna = the dog's greys and antenna red.
       SMS = Tiffany blue + cream, used on SMS pages/products only. */
    --ink: #101011;          /* AVI BLACK (swatch, HSB 240/7/7) */
    --ink-2: #191a1f;
    --ink-3: #252731;
    --paper: #f7f9f9;        /* SMS WHITE (swatch) */
    --paper-2: #eceff1;
    --white: #ffffff;
    --slate: #364964;        /* dog dark grey */
    --steel: #6c7283;        /* dog light grey: decorative / large text only (4.5:1 on paper, 4.2 on paper-2) */
    --antenna: #911b1b;      /* dog antenna red: tiny details only */

    --accent: #0c63e6;       /* AVI BLURPLE: buttons, links, bands. White text on it = 5.3:1 */
    --accent-hover: #0a52c0;
    --accent-on-ink: #5a95f2;/* Blurple lifted for text/focus on ink (6.3:1); raw blurple is only 3.6:1 there */
    --sms: #2cc0b6;          /* SMS TIFF BLUE: on ink only (8.5:1). 2.1:1 on paper */
    --sms-deep: #0f6f69;     /* SMS teal for text on paper (5.7:1) and cream (4.7:1) */
    --sms-cream: #eee1cc;    /* SMS CREAM */
    --danger: #b42318;
    --ok: #1f7a4d;

    --text: var(--ink);
    --text-muted: #565c6c;
    --on-ink: #f7f9f9;
    --on-ink-muted: #a3a8b8;
    --line: rgb(16 16 17 / 0.14);
    --line-strong: rgb(16 16 17 / 0.32);
    --line-on-ink: rgb(247 249 249 / 0.16);
    --focus: var(--accent); /* 5.0:1 on paper; dark surfaces switch to --accent-on-ink */
    --line-input: rgb(16 16 17 / 0.55); /* ≥3:1 on white for input/chip borders */

    /* Type */
    --font-display: "Porcine", "Archivo", ui-sans-serif, system-ui, sans-serif; /* Porcine Heavy: headings only */
    --font-sans: "Archivo", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
    --font-mono: "JetBrains Mono", ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace;
    --stretch-display: 118%;
    --step--1: clamp(0.83rem, 0.8rem + 0.15vw, 0.9rem);
    --step-0: clamp(1rem, 0.96rem + 0.2vw, 1.125rem);
    --step-1: clamp(1.2rem, 1.1rem + 0.45vw, 1.45rem);
    --step-2: clamp(1.5rem, 1.3rem + 0.9vw, 2.1rem);
    --step-3: clamp(1.9rem, 1.5rem + 1.9vw, 3.1rem);
    --step-4: clamp(2.4rem, 1.7rem + 3.4vw, 4.6rem);
    --step-5: clamp(2.8rem, 1.8rem + 5vw, 6.2rem);

    /* Space (4px base) */
    --s-1: 0.25rem; --s-2: 0.5rem; --s-3: 0.75rem; --s-4: 1rem; --s-5: 1.5rem;
    --s-6: 2rem; --s-7: 3rem; --s-8: 4rem; --s-9: 6rem; --s-10: 8rem;
    --gutter: clamp(1rem, 0.6rem + 2vw, 2.5rem);
    --section: clamp(3rem, 2.25rem + 4vw, 6rem);
    --maxw: 76rem;

    --radius: 2px; /* engineering-sharp: corners are almost square on purpose */
    --grid-size: 24px;
    --ease: cubic-bezier(0.2, 0.7, 0.2, 1);
  }
}

/* ---------- base ---------- */
@layer base {
  *, *::before, *::after { box-sizing: border-box; }
  html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; scroll-padding-top: 5rem; }
  body {
    margin: 0;
    background: var(--paper);
    color: var(--text);
    font-family: var(--font-sans);
    font-size: var(--step-0);
    line-height: 1.6;
    font-kerning: normal;
    text-rendering: optimizeLegibility;
    -webkit-font-smoothing: antialiased;
  }
  img, svg { display: block; max-width: 100%; height: auto; }
  h1, h2, h3, h4 { margin: 0; line-height: 1.05; text-wrap: balance; }
  p { margin: 0; text-wrap: pretty; }
  ul, ol { margin: 0; padding: 0; }
  a { color: inherit; text-decoration-thickness: 1px; text-underline-offset: 0.2em; }
  a:hover { text-decoration-color: var(--accent); text-decoration-thickness: 2px; }
  a { text-decoration-color: color-mix(in srgb, currentColor 45%, transparent); }
  :focus-visible { outline: 3px solid var(--focus); outline-offset: 3px; border-radius: var(--radius); }
  .site-header, .site-footer, .hero, .page-hero, .section--ink { --focus: var(--accent-on-ink); }
  .section--accent { --focus: var(--white); }
  main:focus { outline: none; }
  button, input, textarea, select { font: inherit; color: inherit; }
  code { font-family: var(--font-mono); font-size: 0.9em; }
  ::selection { background: var(--accent); color: var(--white); }

  @media (prefers-reduced-motion: reduce) {
    *, *::before, *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
  }
}

/* ---------- layout ---------- */
@layer layout {
  .wrap { width: min(100% - 2 * var(--gutter), var(--maxw)); margin-inline: auto; }
  .narrow { max-width: 46rem; }
  .narrow--form { max-width: 28rem; }

  .section { padding-block: var(--section); }
  .section--ink { background: var(--ink); color: var(--on-ink); }
  .section--paper-2 { background: var(--paper-2); }
  .section--accent { background: var(--accent); color: var(--white); }
  .section__head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: var(--s-4); margin-bottom: var(--s-7); }

  /* Asymmetric two-column: narrow label column, wide content column. */
  .split { display: grid; gap: var(--s-6); }
  @media (min-width: 56rem) {
    .split { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: var(--s-8); align-items: start; }
    .split__head { position: sticky; top: 6rem; }
  }

  .prose { display: grid; gap: var(--s-4); max-width: 40rem; }
  .actions { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-4); }
}

/* ---------- components ---------- */
@layer components {
  /* Skip link */
  .skip-link { position: absolute; left: var(--s-4); top: -10rem; z-index: 100; background: var(--accent); color: var(--white); padding: var(--s-2) var(--s-4); font-weight: 700; }
  .skip-link:focus { top: var(--s-4); }

  /* Header */
  .site-header { position: sticky; top: 0; z-index: 50; background: rgb(16 16 17 / 0.96); color: var(--on-ink); border-bottom: 1px solid var(--line-on-ink); }
  @supports (backdrop-filter: blur(8px)) { .site-header { background: rgb(16 16 17 / 0.88); backdrop-filter: blur(8px); } }
  .site-header__bar { display: flex; align-items: center; justify-content: space-between; gap: var(--s-4); min-height: 4rem; }
  .brand { display: inline-flex; align-items: center; gap: var(--s-3); text-decoration: none; }
  .brand__mark { width: 36px; height: 36px; }
  .brand__word { font-weight: 800; font-stretch: 125%; letter-spacing: 0.02em; font-size: 1.15rem; line-height: 1; }
  .brand__word-sub { display: block; font-family: var(--font-mono); font-weight: 500; font-stretch: normal; font-size: 0.66rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--on-ink-muted); margin-top: 0.2rem; }

  .nav__list { list-style: none; display: flex; align-items: center; gap: var(--s-1); }
  .nav__link { display: inline-flex; align-items: center; gap: var(--s-2); padding: var(--s-2) var(--s-3); text-decoration: none; font-weight: 600; font-size: 0.95rem; color: var(--on-ink); border-radius: var(--radius); }
  .nav__link:hover { background: var(--ink-3); }
  .nav__link.active { box-shadow: inset 0 -2px 0 var(--accent-on-ink); }
  .nav--narrow { display: none; }
  @media (max-width: 47.99rem) {
    .nav--wide { display: none; }
    .nav--narrow { display: block; position: relative; }
    .nav__toggle { list-style: none; cursor: pointer; display: inline-flex; align-items: center; gap: var(--s-2); padding: var(--s-2) var(--s-4); border: 1px solid var(--line-on-ink); font-family: var(--font-mono); font-size: 0.8rem; letter-spacing: 0.12em; text-transform: uppercase; min-height: 44px; }
    .nav__toggle::-webkit-details-marker { display: none; }
    .nav--narrow[open] .nav__toggle { background: var(--ink-3); }
    .nav__sheet { position: fixed; inset: 4rem 0 0 0; overflow-y: auto; background: var(--ink); border-bottom: 1px solid var(--line-on-ink); padding: var(--s-4) var(--gutter) var(--s-6); }
    .nav__sheet .nav__list { flex-direction: column; align-items: stretch; gap: 0; }
    .nav__sheet .nav__link { display: flex; padding: var(--s-4) 0; font-size: var(--step-1); border-bottom: 1px solid var(--line-on-ink); border-radius: 0; }
    .nav__sheet .btn { margin-top: var(--s-5); justify-content: center; width: 100%; }
  }
  .badge { display: inline-grid; place-items: center; min-width: 1.4rem; height: 1.4rem; padding: 0 0.35rem; background: var(--accent); color: var(--white); font-family: var(--font-mono); font-size: 0.72rem; font-weight: 700; border-radius: 999px; }

  /* Eyebrow: mono index label */
  .eyebrow { display: inline-flex; align-items: center; gap: var(--s-3); margin-bottom: var(--s-4); font-family: var(--font-mono); font-size: 0.75rem; font-weight: 500; letter-spacing: 0.08em; text-transform: uppercase; color: var(--text-muted); }
  .eyebrow a { text-decoration: none; } .eyebrow a:hover { text-decoration: underline; }
  .eyebrow__num { color: var(--ink); padding-right: var(--s-3); border-right: 1px solid var(--line-strong); }
  .eyebrow--on-ink { color: var(--on-ink-muted); } .eyebrow--on-ink .eyebrow__num { color: var(--accent-on-ink); border-color: var(--line-on-ink); }
  .eyebrow--on-accent { color: rgb(255 255 255 / 0.85); } .eyebrow--on-accent .eyebrow__num { color: var(--white); border-color: rgb(255 255 255 / 0.4); }
  .eyebrow--plain { margin-bottom: var(--s-3); }

  /* Headings */
  .h1 { font-size: var(--step-4); font-weight: 800; font-stretch: var(--stretch-display); letter-spacing: -0.02em; margin-bottom: var(--s-4); }
  .h2 { font-size: var(--step-3); font-weight: 800; font-stretch: var(--stretch-display); letter-spacing: -0.015em; margin-bottom: var(--s-5); }
  .h3 { font-size: var(--step-1); font-weight: 700; margin-bottom: var(--s-3); }
  .lede { font-size: var(--step-1); line-height: 1.45; color: var(--text-muted); margin-bottom: var(--s-5); }
  .lede-on-ink { font-size: var(--step-1); line-height: 1.45; color: var(--on-ink-muted); margin-bottom: var(--s-6); max-width: 36rem; }
  .muted { color: var(--text-muted); }
  .mono { font-family: var(--font-mono); font-size: 0.85em; letter-spacing: 0.02em; }

  /* Buttons */
  .btn {
    --btn-bg: var(--ink); --btn-fg: var(--paper); --btn-border: var(--btn-bg);
    display: inline-flex; align-items: center; justify-content: center; gap: var(--s-2);
    min-height: 44px; padding: 0.7rem 1.25rem;
    background: var(--btn-bg); color: var(--btn-fg); border: 2px solid var(--btn-border); border-radius: var(--radius);
    font-weight: 700; font-size: 0.98rem; letter-spacing: 0.01em; text-decoration: none; cursor: pointer;
    transition: transform 120ms var(--ease), background-color 120ms var(--ease), box-shadow 120ms var(--ease);
  }
  .btn:hover { text-decoration: none; transform: translate(-2px, -2px); box-shadow: 4px 4px 0 var(--btn-shadow, var(--ink)); }
  .btn:active { transform: none; box-shadow: none; }
  .btn:disabled { opacity: 0.55; cursor: progress; transform: none; box-shadow: none; }
  .btn--accent { --btn-bg: var(--accent); --btn-fg: var(--white); --btn-shadow: var(--ink); }
  .btn--accent:hover { --btn-bg: var(--accent-hover); }
  .section--ink .btn--accent, .hero .btn--accent, .page-hero .btn--accent { --btn-shadow: var(--accent-on-ink); }
  .site-header .btn--accent:hover { box-shadow: none; transform: none; }
  .btn--ink { --btn-bg: var(--ink); --btn-fg: var(--paper); --btn-shadow: var(--white); }
  .btn--sms { --btn-bg: var(--sms); --btn-fg: var(--ink); --btn-shadow: var(--sms-cream); }
  .btn--ghost { --btn-bg: transparent; --btn-fg: var(--ink); --btn-border: var(--ink); }
  .btn--ghost-on-ink { --btn-bg: transparent; --btn-fg: var(--on-ink); --btn-border: var(--on-ink); --btn-shadow: var(--accent-on-ink); }
  .btn--ok { --btn-bg: var(--ok); --btn-fg: var(--white); }
  .btn--sm { min-height: 36px; padding: 0.4rem 0.8rem; font-size: 0.85rem; }
  .btn--lg { min-height: 52px; padding: 0.9rem 1.6rem; font-size: 1.05rem; }

  .link-arrow { display: inline-flex; align-items: center; gap: var(--s-2); font-weight: 700; text-decoration: none; border-bottom: 2px solid currentColor; padding-bottom: 2px; }
  .link-arrow::after { content: "→"; transition: transform 120ms var(--ease); }
  .link-arrow:hover::after { transform: translateX(3px); }
  .link-arrow:hover { border-color: var(--accent); }
  .link-arrow--on-accent { color: var(--white); } .link-arrow--on-accent:hover { border-color: var(--white); }
  .link-button { background: none; border: 0; padding: 0; cursor: pointer; text-decoration: underline; text-underline-offset: 0.2em; color: var(--text-muted); font-size: 0.9rem; min-height: 44px; }
  .on-ink-link { color: var(--accent-on-ink); }

  /* Figure with crop marks */
  .figure { margin: 0; }
  .figure__frame { position: relative; aspect-ratio: var(--ratio, 4 / 3); padding: 10px; }
  .figure__frame > img, .figure__slot { width: 100%; height: 100%; object-fit: cover; }
  .figure__crop { position: absolute; width: 18px; height: 18px; border-color: var(--line-strong); border-style: solid; border-width: 0; }
  .figure__crop--tl { top: 0; left: 0; border-top-width: 2px; border-left-width: 2px; }
  .figure__crop--tr { top: 0; right: 0; border-top-width: 2px; border-right-width: 2px; }
  .figure__crop--bl { bottom: 0; left: 0; border-bottom-width: 2px; border-left-width: 2px; }
  .figure__crop--br { bottom: 0; right: 0; border-bottom-width: 2px; border-right-width: 2px; }
  .figure__slot {
    display: grid; place-content: center; gap: var(--s-2); text-align: center; padding: var(--s-5);
    background:
      var(--paper-2);
    color: var(--text-muted);
  }
  .figure__slot .mono { letter-spacing: 0.2em; color: var(--ink); font-weight: 700; }
  .figure__slot-note { font-size: 0.9rem; max-width: 22ch; margin-inline: auto; }
  .figure__caption { display: flex; gap: var(--s-3); margin-top: var(--s-3); font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.06em; color: var(--text-muted); }
  .figure__caption span { color: var(--ink); font-weight: 700; }
  .figure--ink .figure__crop, .figure--sms .figure__crop { border-color: var(--line-on-ink); }
  .figure--ink .figure__slot, .figure--sms .figure__slot {
    background:
      var(--ink-2);
    color: var(--on-ink-muted);
  }
  .figure--ink .figure__slot .mono { color: var(--accent-on-ink); }
  .figure--sms .figure__slot .mono { color: var(--sms); }
  .figure--ink .figure__caption, .figure--sms .figure__caption { color: var(--on-ink-muted); }
  .figure--ink .figure__caption span { color: var(--accent-on-ink); }
  .figure--sms .figure__caption span { color: var(--sms); }

  /* Spec sheet (drawing title block) */
  .spec { margin: 0 0 var(--s-6); border-top: 2px solid var(--ink); }
  .spec__row { display: grid; grid-template-columns: minmax(8rem, 2fr) 3fr; gap: var(--s-4); padding: var(--s-3) 0; border-bottom: 1px solid var(--line); }
  .spec dt { font-family: var(--font-mono); font-size: 0.75rem; letter-spacing: 0.06em; text-transform: uppercase; color: var(--text-muted); padding-top: 0.2em; }
  .spec dd { margin: 0; font-weight: 600; }
  .spec--on-ink { border-top-color: var(--accent); }
  .spec--on-ink .spec__row { border-color: var(--line-on-ink); }
  .spec--on-ink dt { color: var(--on-ink-muted); }

  /* Page hero (interior pages) */
  .page-hero { background: var(--ink); color: var(--on-ink); padding-block: clamp(3.5rem, 2rem + 6vw, 7rem) clamp(2.5rem, 1.5rem + 4vw, 5rem); position: relative; overflow: hidden; }
  .page-hero::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 4px; background: linear-gradient(90deg, var(--antenna) 0 12%, var(--accent) 12% 100%); }
  .page-hero__inner { position: relative; }
  .page-hero__title { font-size: var(--step-5); font-weight: 850; font-stretch: 125%; letter-spacing: -0.025em; line-height: 0.95; max-width: 16ch; margin-bottom: var(--s-5); }
  .page-hero__lede { font-size: var(--step-1); color: var(--on-ink-muted); max-width: 40rem; display: grid; gap: var(--s-3); }
  .page-hero--sms { border-bottom: 6px solid var(--sms); }
  .page-hero--sms .eyebrow { color: var(--sms); }

  /* Tags & alerts */
  .tag { display: inline-block; padding: 0.15rem 0.5rem; font-family: var(--font-mono); font-size: 0.7rem; letter-spacing: 0.1em; text-transform: uppercase; border: 1px solid var(--line-strong); border-radius: var(--radius); }
  .tag--accent { background: var(--accent); border-color: var(--accent); color: var(--white); }
  .tag--paid { background: var(--ok); color: var(--white); border-color: var(--ok); }
  .tag--needsreview, .tag--denied { background: var(--danger); color: var(--white); border-color: var(--danger); }
  .tag--refunded, .tag--cancelled { color: var(--text-muted); }
  .alert { padding: var(--s-3) var(--s-4); margin-bottom: var(--s-5); border-left: 4px solid var(--danger); background: #fbeaea; color: #5c0f0a; }
  .alert--ok { border-color: var(--ok); background: #e5f3ec; color: #0c3b24; }
  .alert ul { margin: 0; padding-left: 1.1rem; }
  .note { font-family: var(--font-mono); font-size: 0.8rem; padding: var(--s-3) var(--s-4); border: 1px dashed var(--line-strong); color: var(--text-muted); background: rgb(12 99 230 / 0.06); }
  .section--ink .note { border-color: var(--line-on-ink); color: var(--on-ink-muted); }

  /* Forms */
  .form { display: grid; gap: var(--s-5); }
  .field { display: grid; gap: var(--s-2); }
  .label { font-family: var(--font-mono); font-size: 0.75rem; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; }
  .field input, .field textarea, .cart__qty input {
    width: 100%; min-height: 48px; padding: 0.7rem 0.85rem; background: var(--white);
    border: 1.5px solid var(--line-input); border-radius: var(--radius);
  }
  .field input:focus-visible, .field textarea:focus-visible, .cart__qty input:focus-visible { outline: 3px solid var(--focus); outline-offset: 0; border-color: var(--ink); }
  .field input.invalid, .field textarea.invalid { border-color: var(--danger); }
  .field__hint { font-size: 0.85rem; color: var(--text-muted); }
  .field__error { font-size: 0.9rem; color: var(--danger); font-weight: 600; }
  .validation-errors { margin: 0; }

  /* Product card */
  .product-row, .product-grid { list-style: none; display: grid; gap: var(--s-6); grid-template-columns: repeat(auto-fit, minmax(min(100%, 16rem), 24rem)); }
  .product-card__link { display: block; text-decoration: none; }
  .product-card__media { aspect-ratio: 1; background: var(--paper-2); border: 1px solid var(--line); overflow: hidden; }
  .product-card__media img { width: 100%; height: 100%; object-fit: cover; transition: transform 300ms var(--ease); }
  .product-card__link:hover .product-card__media img { transform: scale(1.03); }
  .product-card__body { display: flex; justify-content: space-between; align-items: baseline; gap: var(--s-3); padding-top: var(--s-3); border-top: 2px solid var(--ink); margin-top: var(--s-3); }
  .product-card--sms .product-card__body { border-top-color: var(--sms-deep); }
  .product-card__name { font-size: var(--step-1); font-weight: 750; font-stretch: 110%; }
  .product-card__meta { display: flex; gap: var(--s-2); align-items: center; font-family: var(--font-mono); font-weight: 600; white-space: nowrap; }
  .product-card__link:hover .product-card__name { text-decoration: underline; text-decoration-color: var(--accent); text-decoration-thickness: 3px; }

  /* Order summary */
  .summary { border-top: 2px solid var(--ink); padding-top: var(--s-4); }
  .summary__lines { list-style: none; }
  .summary__line { display: flex; justify-content: space-between; gap: var(--s-4); padding: var(--s-3) 0; border-bottom: 1px solid var(--line); }
  .summary__total { display: flex; justify-content: space-between; padding: var(--s-4) 0; font-weight: 800; font-size: var(--step-1); }
  .price { font-family: var(--font-mono); font-weight: 600; white-space: nowrap; }

  .code-chip { background: var(--accent); color: var(--white); padding: 0.1rem 0.45rem; }

  /* Tables (admin) */
  .table-scroll { overflow-x: auto; margin-bottom: var(--s-7); border-top: 2px solid var(--ink); }
  .table { width: 100%; border-collapse: collapse; font-size: 0.92rem; }
  .table th, .table td { text-align: left; padding: var(--s-3); border-bottom: 1px solid var(--line); vertical-align: top; }
  .table thead th { font-family: var(--font-mono); font-size: 0.72rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--text-muted); font-weight: 600; }
  .table .num { text-align: right; font-variant-numeric: tabular-nums; }
  .stats { display: grid; gap: var(--s-4); grid-template-columns: repeat(auto-fit, minmax(10rem, 1fr)); margin-bottom: var(--s-7); }
  .stat { border-top: 2px solid var(--ink); padding-top: var(--s-3); display: grid; }
  .stat__num { font-size: var(--step-3); font-weight: 800; font-stretch: 115%; font-variant-numeric: tabular-nums; }
  .stat__label { font-family: var(--font-mono); font-size: 0.72rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--text-muted); }
  .stat--alert { border-color: var(--danger); } .stat--alert .stat__num { color: var(--danger); }

  /* Footer */
  .site-footer { background: var(--ink); color: var(--on-ink); padding-top: var(--s-8); border-top: 6px solid var(--accent); }
  .site-footer__grid { display: grid; gap: var(--s-6); grid-template-columns: repeat(auto-fit, minmax(min(100%, 12rem), 1fr)); padding-bottom: var(--s-7); }
  .site-footer__about { grid-column: span 2; max-width: 28rem; }
  @media (max-width: 40rem) { .site-footer__about { grid-column: auto; } }
  .site-footer__name { font-size: var(--step-2); font-weight: 800; font-stretch: 125%; line-height: 1; margin-bottom: var(--s-3); }
  .site-footer .muted { color: var(--on-ink-muted); }
  .site-footer .eyebrow { color: var(--on-ink-muted); }
  .site-footer__links ul { list-style: none; display: grid; gap: var(--s-2); }
  .site-footer__links a { text-decoration: none; display: inline-block; padding-block: 0.2rem; }
  .site-footer__links a:hover { color: var(--accent-on-ink); }
  .site-footer__base { display: flex; flex-wrap: wrap; justify-content: space-between; gap: var(--s-3); padding-block: var(--s-5); border-top: 1px solid var(--line-on-ink); color: var(--on-ink-muted); font-size: 0.85rem; }
}

/* ---------- pages ---------- */
@layer pages {
  /* Home hero: asymmetric */
  .hero { background: var(--ink); color: var(--on-ink); position: relative; overflow: hidden; padding-block: clamp(3rem, 1.5rem + 6vw, 7rem); }
  /* No blueprint grid (Robert, round 5). Instead: our own pool water, ROSIE diving, toned blurple and faded in behind the dog. */
  .hero::before {
    content: ""; position: absolute; inset: -6% -6% -6% 30%; pointer-events: none;
    background: url("/img/photos/pool-rosie-dive-960.webp") 50% 45% / cover no-repeat;
    filter: grayscale(1) sepia(1) hue-rotate(178deg) saturate(2.4) brightness(0.55) contrast(1.15);
    opacity: 0.55;
    mask-image: linear-gradient(90deg, transparent, black 45%);
  }
  .hero::after {
    content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 4px; pointer-events: none;
    background: linear-gradient(90deg, var(--antenna) 0 12%, var(--accent) 12% 100%);
  }
  @media (prefers-reduced-motion: no-preference) {
    .hero::before { animation: water-drift 24s ease-in-out infinite alternate; }
    @keyframes water-drift { to { transform: translate3d(-2%, 2%, 0) scale(1.04); } }
  }
  .hero__grid { position: relative; display: grid; gap: var(--s-7); align-items: end; }
  @media (min-width: 56rem) { .hero__grid { grid-template-columns: minmax(0, 7fr) minmax(0, 4fr); gap: var(--s-8); } }
  .hero__title { font-size: var(--step-5); font-weight: 850; font-stretch: 125%; letter-spacing: -0.03em; line-height: 0.92; margin-bottom: var(--s-6); max-width: 13ch; }
  .hero__title em { font-style: normal; color: var(--accent-on-ink); }
  .hero__lede { font-size: var(--step-1); line-height: 1.5; color: var(--on-ink-muted); max-width: 38rem; margin-bottom: var(--s-6); }
  .hero__actions { display: flex; flex-wrap: wrap; gap: var(--s-4); }
  .hero__figure { max-width: 26rem; width: 100%; justify-self: end; }
  @media (max-width: 55.99rem) { .hero__figure { justify-self: start; max-width: 22rem; } }
  .hero__ticker { position: relative; display: flex; flex-wrap: wrap; gap: var(--s-2) var(--s-6); margin-top: var(--s-8); padding-block: var(--s-4); border-top: 1px solid var(--line-on-ink); color: var(--on-ink-muted); font-size: 0.72rem; letter-spacing: 0.22em; }
  .hero__ticker span::before { content: "+"; color: var(--accent); margin-right: var(--s-3); }

  /* What we do: numbered steps */
  .steps { list-style: none; counter-reset: step; border-top: 2px solid var(--ink); }
  .steps__item { counter-increment: step; display: grid; grid-template-columns: 3.5rem 1fr; column-gap: var(--s-4); padding-block: var(--s-5); border-bottom: 1px solid var(--line); }
  .steps__item::before { content: counter(step, decimal-leading-zero); grid-row: span 2; font-family: var(--font-mono); font-weight: 700; color: var(--text-muted); font-size: 0.85rem; padding-top: 0.35rem; }
  .steps__title { font-size: var(--step-1); font-weight: 800; font-stretch: 115%; margin-bottom: var(--s-2); }
  .steps__item p { color: var(--text-muted); max-width: 34rem; }

  /* Team feature */
  .team-feature { border-top: 6px solid var(--sms); }
  .team-feature__grid { display: grid; gap: var(--s-7); align-items: center; }
  @media (min-width: 56rem) { .team-feature__grid { grid-template-columns: minmax(0, 6fr) minmax(0, 5fr); gap: var(--s-8); } }
  .team-feature .h2 { font-stretch: 125%; }

  /* Support band */
  .support { display: grid; gap: var(--s-5); align-items: end; }
  @media (min-width: 56rem) { .support { grid-template-columns: 1fr 1fr; gap: var(--s-8); } }
  .support .h2 { margin-bottom: 0; font-size: var(--step-4); }
  .support__body p { font-size: var(--step-1); line-height: 1.45; margin-bottom: var(--s-5); }
  .support__actions { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-5); }

  /* Teams list */
  .team-list { list-style: none; display: grid; gap: var(--s-5); }
  .team-list__link { display: grid; gap: var(--s-2); padding: var(--s-6); border: 2px solid var(--ink); text-decoration: none; background: var(--white); }
  a.team-list__link:hover { box-shadow: 6px 6px 0 var(--ink); transform: translate(-3px, -3px); transition: transform 120ms var(--ease), box-shadow 120ms var(--ease); }
  .team-list__item--sms .team-list__link { border-left: 12px solid var(--sms); }
  .team-list__item--muted .team-list__link { border-style: dashed; border-color: var(--line-strong); background: transparent; }
  .team-list__code { font-weight: 700; letter-spacing: 0.2em; color: var(--text-muted); }
  .team-list__name { margin: 0; font-size: var(--step-3); font-weight: 850; font-stretch: 120%; line-height: 1; }
  .team-list__desc { color: var(--text-muted); max-width: 40rem; margin-bottom: var(--s-3); }
  .team-list .link-arrow { justify-self: start; }

  /* SMS depth gauge */
  .depth__grid { display: grid; gap: var(--s-7); }
  @media (min-width: 56rem) { .depth__grid { grid-template-columns: 3rem minmax(0, 5fr) minmax(0, 6fr); gap: var(--s-7); align-items: start; } }
  .depth__gauge { display: none; }
  @media (min-width: 56rem) {
    .depth__gauge { display: flex; flex-direction: column; justify-content: space-between; height: 100%; min-height: 22rem; border-right: 2px solid var(--sms); padding-right: var(--s-3); font-family: var(--font-mono); font-size: 0.7rem; color: var(--sms); text-align: right; }
    .depth__gauge span { position: relative; }
    .depth__gauge span::after { content: ""; position: absolute; right: calc(-1 * var(--s-3) - 2px); top: 50%; width: 10px; height: 2px; background: var(--sms); }
  }

  /* Join steps */
  .join-steps { list-style: none; display: grid; gap: var(--s-5); grid-template-columns: repeat(auto-fit, minmax(min(100%, 18rem), 1fr)); }
  .join-steps li { display: grid; align-content: start; gap: var(--s-3); padding-top: var(--s-4); border-top: 2px solid var(--ink); }
  .join-steps li p { color: var(--text-muted); }
  .join-steps li .btn, .join-steps li .link-arrow { justify-self: start; margin-top: var(--s-2); }
  .join-steps__num { font-size: 0.85rem; font-weight: 700; color: var(--text-muted); }

  /* Product page */
  .product__grid { display: grid; gap: var(--s-7); }
  @media (min-width: 56rem) { .product__grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--s-8); align-items: start; } .product__media { position: sticky; top: 6rem; } }
  .product__media { background: var(--paper-2); border: 1px solid var(--line); }
  .product__media img { width: 100%; aspect-ratio: 1; object-fit: cover; }
  .product__price { font-size: var(--step-2); margin-bottom: var(--s-3); }
  .product--sms .h1 { text-decoration: underline; text-decoration-color: var(--sms); text-decoration-thickness: 6px; text-underline-offset: 0.12em; }
  .product__desc { margin-block: var(--s-6); }
  .buy { display: grid; gap: var(--s-5); padding-block: var(--s-5); border-block: 1px solid var(--line); }
  .sizes { border: 0; margin: 0; padding: 0; }
  .sizes legend { margin-bottom: var(--s-3); }
  .sizes__options { display: flex; flex-wrap: wrap; gap: var(--s-2); }
  .sizes__input { position: absolute; opacity: 0; width: 1px; height: 1px; }
  .sizes__chip { display: inline-grid; place-items: center; min-width: 3.25rem; min-height: 48px; padding: 0.35rem 0.75rem; border: 1.5px solid var(--line-input); background: var(--white); font-family: var(--font-mono); font-weight: 700; cursor: pointer; line-height: 1.1; border-radius: var(--radius); }
  .sizes__chip:hover { border-color: var(--ink); }
  .sizes__up { font-size: 0.65rem; font-weight: 500; color: var(--text-muted); }
  .sizes__input:checked + .sizes__chip { background: var(--ink); color: var(--paper); border-color: var(--ink); }
  .sizes__input:checked + .sizes__chip .sizes__up { color: var(--on-ink-muted); }
  .sizes__input:focus-visible + .sizes__chip { outline: 3px solid var(--focus); outline-offset: 2px; }
  .buy__row { display: flex; flex-wrap: wrap; gap: var(--s-4); align-items: end; }
  .field--qty { width: 6rem; }

  /* Cart */
  .cart { list-style: none; border-top: 2px solid var(--ink); margin-bottom: var(--s-6); }
  .cart__line { display: grid; grid-template-columns: 1fr auto; gap: var(--s-3) var(--s-4); align-items: center; padding-block: var(--s-4); border-bottom: 1px solid var(--line); }
  @media (min-width: 40rem) { .cart__line { grid-template-columns: 1fr auto auto auto; } }
  .cart__item { display: grid; gap: var(--s-1); }
  .cart__name { font-weight: 700; font-size: var(--step-1); text-decoration: none; }
  .cart__size { color: var(--text-muted); }
  .cart__qty { display: flex; gap: var(--s-2); align-items: center; }
  .cart__qty input { width: 4.5rem; min-height: 40px; padding: 0.4rem 0.5rem; }
  .cart__total { text-align: right; }
  .cart__summary { display: grid; gap: var(--s-4); justify-items: start; }
  .cart__subtotal { display: flex; gap: var(--s-5); font-size: var(--step-2); font-weight: 800; }

  /* Checkout */
  .checkout { display: grid; gap: var(--s-7); }
  @media (min-width: 56rem) { .checkout { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: var(--s-8); align-items: start; } .checkout__summary { position: sticky; top: 6rem; } }
  .checkout__summary { background: var(--white); padding: var(--s-5); border: 1px solid var(--line); display: grid; gap: var(--s-4); }
  .checkout__form .h1 { font-size: var(--step-3); }
  .checkout__form > .muted { margin-bottom: var(--s-6); }
  .pay { display: grid; gap: var(--s-4); max-width: 30rem; margin-top: var(--s-6); }
  .pay__status:empty { display: none; }
  .pay__status { padding: var(--s-3) var(--s-4); border-left: 4px solid var(--ink); background: var(--white); }
  .pay__status--error { border-color: var(--danger); background: #fbeaea; }
  .pay__buttons { min-height: 160px; }
}

/* ---------- utilities ---------- */
@layer utilities {
  .visually-hidden { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
}

@layer pages {
  @media (max-width: 55.99rem) { .hero__figure { max-width: none; } .hero__figure .figure__frame { aspect-ratio: 16 / 10; } }
}

@layer components {
  .validation-wrap:empty, .validation-wrap:not(:has(li)) { display: contents; }
  /* --sms is 2.4:1 on paper: never use it as text on light surfaces; use --sms-deep. */
}

/* ---------- brand layer: Porcine display type + logos ---------- */
@layer components {
  /* Porcine Heavy is a single blocky weight with small-cap lowercase. Headings only; never body or UI labels. */
  .h1, .h2, .hero__title, .page-hero__title, .team-list__name, .site-footer__name, .brand__word, .steps__title, .product-card__name, .support .h2 {
    font-family: var(--font-display);
    font-weight: 900;
    font-stretch: normal;
    letter-spacing: 0.005em;
    line-height: 0.98;
  }
  .brand__mark { width: auto; height: 40px; }
  .brand__word { font-size: 1.35rem; letter-spacing: 0.02em; }
  .brand__word-sub { margin-top: 0.3rem; }
}

@layer pages {
  .hero__grid { align-items: center; }
  .hero__dog { justify-self: end; width: min(100%, 30rem); filter: drop-shadow(0 30px 60px rgb(12 99 230 / 0.25)); }
  .hero__dog img { width: 100%; height: auto; }
  @media (max-width: 55.99rem) { .hero__dog { justify-self: start; width: min(70%, 18rem); order: -1; } }

  .team-feature { border-top-color: var(--sms); }
  .team-feature__logo { justify-self: center; width: min(100%, 26rem); }
  .team-feature__logo img { width: 100%; height: auto; }

  .page-hero--sms .page-hero__inner { display: grid; gap: var(--s-6); align-items: center; }
  @media (min-width: 56rem) { .page-hero--sms .page-hero__inner { grid-template-columns: minmax(0, 1fr) 16rem; } }
  .page-hero__logo { width: min(60%, 16rem); height: auto; }
  @media (min-width: 56rem) { .page-hero__logo { width: 100%; grid-column: 2; grid-row: 1 / span 3; } }

  /* SMS product + band surfaces use the cream */
  .section--sms-cream { background: var(--sms-cream); color: var(--ink); }
  .product--sms .product__media { background: var(--sms-cream); }
}

/* =====================================================================
   Photos: level-of-detail blur-up
   ===================================================================== */
@layer components {
  .photo { position: relative; margin: 0; overflow: hidden; background: var(--paper-2) var(--lqip) center / cover no-repeat; max-width: 100%; }
  .photo__img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: var(--focus, 50% 50%); transition: opacity 500ms var(--ease); }
  .js .photo__img:not(.is-loaded) { opacity: 0; }
  .photo__caption { position: absolute; left: 0; bottom: 0; padding: var(--s-2) var(--s-3); background: rgb(16 16 17 / 0.7); color: var(--on-ink); font-family: var(--font-mono); font-size: 0.72rem; }
  .photo--frame { box-shadow: 0 1px 0 var(--line), 0 30px 60px -30px rgb(16 16 17 / 0.45); border-radius: var(--radius); }
  .photo--wide { aspect-ratio: 21 / 9 !important; max-height: 70vh; }
  .small { font-size: 0.85rem; }

  /* Scroll progress bar (scroll-driven; static where unsupported) */
  .scroll-progress { position: fixed; inset: 0 0 auto 0; height: 3px; background: var(--accent-on-ink); transform-origin: 0 50%; transform: scaleX(0); z-index: 60; pointer-events: none; }

  .stats-band { background: var(--ink); color: var(--on-ink); border-top: 1px solid var(--line-on-ink); padding-block: var(--s-7); }
  .stats-band__grid { display: grid; gap: var(--s-6); grid-template-columns: repeat(auto-fit, minmax(min(100%, 13rem), 1fr)); }
  .stat-big { display: grid; gap: var(--s-2); border-top: 2px solid var(--accent); padding-top: var(--s-4); }
  .stat-big__value { font-family: var(--font-display); font-size: var(--step-4); line-height: 1; color: var(--white); }
  .stat-big__label { color: var(--on-ink-muted); font-size: 0.95rem; max-width: 26ch; }

  .feature { display: grid; gap: var(--s-7); align-items: center; }
  @media (min-width: 56rem) { .feature { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: var(--s-8); } }

  .steps--on-ink { border-top-color: var(--accent-on-ink); }
  .steps--on-ink .steps__item { border-color: var(--line-on-ink); }
  .steps--on-ink .steps__item::before, .steps--on-ink .steps__item p { color: var(--on-ink-muted); }

  .section--flush { padding-block: 0; }
  .filmstrip { display: flex; gap: var(--s-4); overflow-x: auto; scroll-snap-type: x mandatory; padding: var(--s-6) max(var(--gutter), calc((100vw - var(--maxw)) / 2)); scrollbar-width: thin; }
  .filmstrip:focus-visible { outline-offset: -3px; }
  .filmstrip__item { flex: 0 0 min(85vw, 40rem); aspect-ratio: 3 / 2; scroll-snap-align: center; border-radius: var(--radius); }

  .team-cards { display: grid; gap: var(--s-5); }
  @media (min-width: 56rem) { .team-cards { grid-template-columns: 3fr 2fr; } }
  .team-card { position: relative; display: grid; min-height: 26rem; overflow: hidden; text-decoration: none; border-radius: var(--radius); background: var(--ink); color: var(--on-ink); isolation: isolate; }
  .team-card__photo { position: absolute; inset: 0; z-index: -1; aspect-ratio: auto !important; height: 100%; transition: transform 600ms var(--ease); }
  .team-card--sms::after { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(180deg, rgb(6 38 43 / 0.1) 20%, rgb(6 38 43 / 0.92) 80%); }
  a.team-card:hover .team-card__photo { transform: scale(1.04); }
  .team-card__body { align-self: end; display: grid; gap: var(--s-2); padding: var(--s-6); }
  .team-card__logo { width: 64px; height: 64px; }
  .team-card__kicker { font-family: var(--font-mono); font-size: 0.75rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--sms); }
  .team-card__name { font-family: var(--font-display); font-size: var(--step-3); line-height: 1; }
  .team-card__desc { color: var(--on-ink-muted); max-width: 44ch; }
  .team-card .link-arrow { justify-self: start; color: var(--white); }
  .team-card--forming { background: transparent; color: var(--ink); border: 2px dashed var(--line-strong); min-height: 0; }
  .team-card--forming .team-card__kicker { color: var(--slate); }
  .team-card--forming .team-card__desc { color: var(--text-muted); }
  .team-card--forming .link-arrow { color: var(--ink); }

  .mosaic { display: grid; gap: var(--s-4); grid-template-columns: 1fr 1fr; }
  .mosaic__a { grid-column: 1 / -1; aspect-ratio: 16 / 9 !important; }
  .mosaic__b, .mosaic__c { aspect-ratio: 4 / 5 !important; }
  @media (min-width: 56rem) { .mosaic { grid-template-columns: 2fr 1fr; grid-template-rows: 1fr 1fr; } .mosaic__a { grid-column: 1; grid-row: 1 / 3; aspect-ratio: auto !important; height: 100%; } .mosaic__b, .mosaic__c { aspect-ratio: 4 / 3 !important; } }

  /* Timeline with a scroll-filled spine */
  .timeline { list-style: none; position: relative; display: grid; gap: var(--s-8); padding-left: var(--s-6); }
  .timeline::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 2px; background: var(--line); }
  .timeline::after { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 2px; background: var(--accent); transform-origin: top; transform: scaleY(1); }
  .timeline__item { position: relative; display: grid; gap: var(--s-4); }
  .timeline__item::before { content: ""; position: absolute; left: calc(-1 * var(--s-6) - 6px); top: 0.35rem; width: 14px; height: 14px; border-radius: 50%; background: var(--paper); border: 3px solid var(--accent); }
  @media (min-width: 56rem) { .timeline__item { grid-template-columns: 9rem minmax(0, 1fr) minmax(0, 1fr); gap: var(--s-6); align-items: start; } }
  .timeline__when { color: var(--accent); font-weight: 700; }
  .timeline__title { font-family: var(--font-display); font-size: var(--step-2); margin-bottom: var(--s-3); }
  .timeline__body p { color: var(--text-muted); max-width: 46ch; }
  .timeline__photo { aspect-ratio: 3 / 2 !important; }

  .group-title { margin-top: var(--s-7); padding-bottom: var(--s-3); border-bottom: 2px solid var(--ink); }
  .group-title:first-child { margin-top: 0; }
  .people { list-style: none; display: grid; gap: var(--s-4); grid-template-columns: repeat(auto-fill, minmax(min(100%, 14rem), 1fr)); margin-top: var(--s-5); }
  .person { display: grid; grid-template-columns: auto 1fr; grid-template-rows: auto auto; column-gap: var(--s-4); align-items: center; padding: var(--s-4); background: var(--white); border: 1px solid var(--line); border-radius: var(--radius); }
  .person__mono { grid-row: span 2; display: grid; place-items: center; width: 3.25rem; height: 3.25rem; border-radius: 50%; background: var(--ink); color: var(--white); font-family: var(--font-display); font-size: 1.1rem; }
  .person__name { font-weight: 700; }
  .person__role { font-size: 0.88rem; color: var(--text-muted); }

  .sponsor-list { list-style: none; display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 14rem), 1fr)); border-top: 2px solid var(--ink); margin-bottom: var(--s-6); }
  .sponsor-list li { padding: var(--s-3) 0; border-bottom: 1px solid var(--line); font-weight: 600; }
  .sponsor-shirt { max-width: 22rem; }

  .join { display: grid; gap: var(--s-7); align-items: start; }
  @media (min-width: 56rem) { .join { grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); } .join .join-steps { grid-template-columns: 1fr; } }
  .join__poster { max-width: 24rem; }

  .site-footer__letters { width: 72px; height: auto; margin-bottom: var(--s-4); }
  .site-footer__legal { margin-top: var(--s-4); font-size: 0.85rem; color: var(--on-ink-muted); max-width: 40rem; }
}

/* =====================================================================
   Scroll-driven motion (progressive: only where supported, never with reduced motion)
   ===================================================================== */
@media (prefers-reduced-motion: no-preference) {
  @supports (animation-timeline: view()) {
    .reveal { animation: reveal-up linear both; animation-timeline: view(); animation-range: entry 0% entry 80%; }
    @keyframes reveal-up { from { opacity: 0; transform: translateY(24px); } to { opacity: 1; transform: none; } }

    .parallax .photo__img { animation: parallax linear both; animation-timeline: view(); scale: 1.15; }
    @keyframes parallax { from { translate: 0 -7%; } to { translate: 0 7%; } }

    .scroll-progress { animation: progress linear both; animation-timeline: scroll(root); }
    @keyframes progress { to { transform: scaleX(1); } }

    .hero__dog { animation: dog-drift linear both; animation-timeline: scroll(root); animation-range: 0 100vh; }
    @keyframes dog-drift { to { transform: translateY(18%) rotate(-6deg) scale(0.92); opacity: 0.4; } }

    .hero__copy { animation: hero-out linear both; animation-timeline: scroll(root); animation-range: 0 90vh; }
    @keyframes hero-out { to { transform: translateY(-12%); opacity: 0.2; } }

    .site-header { animation: header-solid linear both; animation-timeline: scroll(root); animation-range: 0 160px; }
    @keyframes header-solid { to { box-shadow: 0 10px 30px -10px rgb(0 0 0 / 0.6); } }

    .timeline::after { animation: spine linear both; animation-timeline: view(); animation-range: cover 0% cover 70%; }
    @keyframes spine { from { transform: scaleY(0); } to { transform: scaleY(1); } }

    .filmstrip__item { animation: strip-in linear both; animation-timeline: view(inline); animation-range: entry 0% contain 0%; }
    @keyframes strip-in { from { opacity: 0.35; scale: 0.92; } to { opacity: 1; scale: 1; } }
  }
}

/* =====================================================================
   Sequoia Marine Solutions microsite (its own look; /sms and sms.avirobotics.org)
   ===================================================================== */
@layer pages {
  .sms-site {
    --sms-ink: #06262b;      /* deep water (derived from SMS Tiffany) */
    --sms-ink-2: #0b3a40;
    --sms-teal: #2cc0b6;     /* SMS TIFF BLUE */
    --sms-teal-deep: #0f6f69;
    --sms-cream: #eee1cc;    /* SMS CREAM */
    --sms-white: #f7f9f9;    /* SMS WHITE */
    --font-sms: "Archivo", ui-sans-serif, system-ui, sans-serif;
    --accent: var(--sms-teal-deep);
    --accent-on-ink: var(--sms-teal);
    --focus: var(--sms-teal-deep);
    background: var(--sms-white);
    color: var(--sms-ink);
  }
  .sms-site .sms-header, .sms-site .sms-hero, .sms-site .sms-section--deep, .sms-site .sms-footer, .sms-site .sms-page-hero { --focus: var(--sms-teal); }

  .sms-header { position: sticky; top: 0; z-index: 50; background: rgb(6 38 43 / 0.92); color: var(--sms-white); border-bottom: 1px solid rgb(44 192 182 / 0.25); }
  @supports (backdrop-filter: blur(8px)) { .sms-header { background: rgb(6 38 43 / 0.78); backdrop-filter: blur(10px); } }
  .sms-header__bar { display: flex; align-items: center; justify-content: space-between; gap: var(--s-4); min-height: 4.25rem; }
  .sms-brand { display: inline-flex; align-items: center; gap: var(--s-3); text-decoration: none; }
  .sms-brand img { width: 44px; height: 44px; }
  .sms-brand__word { font-family: var(--font-sms); font-weight: 800; font-stretch: 125%; font-size: 1.15rem; letter-spacing: 0.01em; line-height: 1; }
  .sms-brand__word span { display: block; font-family: var(--font-mono); font-weight: 500; font-stretch: normal; font-size: 0.66rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--sms-teal); margin-top: 0.3rem; }
  .sms-nav .nav__link { color: var(--sms-white); }
  .sms-nav .nav__link:hover { background: var(--sms-ink-2); }
  .sms-nav .nav__link.active { box-shadow: inset 0 -2px 0 var(--sms-teal); }
  .sms-nav .nav__sheet { background: var(--sms-ink); }
  .sms-back { display: inline-flex; align-items: center; gap: var(--s-2); margin-left: var(--s-3); padding: 0.45rem 0.8rem; border: 1px solid rgb(247 249 249 / 0.4); border-radius: 999px; color: var(--sms-white); text-decoration: none; font-size: 0.85rem; font-weight: 600; min-height: 40px; }
  .sms-back:hover { background: var(--sms-white); color: var(--sms-ink); }
  .sms-back img { width: 16px; height: 20px; }
  @media (max-width: 47.99rem) { .sms-back { margin: var(--s-5) 0 0; justify-content: center; } }

  .sms-kicker { font-family: var(--font-mono); font-size: 0.78rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--sms-teal); margin-bottom: var(--s-4); }
  .sms-kicker--dark { color: var(--sms-teal-deep); }
  .sms-h2 { font-family: var(--font-sms); font-weight: 800; font-stretch: 125%; font-size: var(--step-3); line-height: 1; letter-spacing: -0.01em; margin-bottom: var(--s-5); }

  .sms-hero, .sms-page-hero--photo { position: relative; min-height: min(88vh, 52rem); display: grid; align-items: end; color: var(--sms-white); background: var(--sms-ink); isolation: isolate; overflow: hidden; }
  .sms-hero__bg { position: absolute !important; inset: 0; z-index: -2; aspect-ratio: auto !important; height: 100%; }
  .sms-hero::after, .sms-page-hero--photo::after { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(180deg, rgb(6 38 43 / 0.2) 0%, rgb(6 38 43 / 0.55) 45%, rgb(6 38 43 / 0.97) 100%); }
  .sms-hero__copy { padding-block: var(--s-9) var(--s-8); max-width: 60rem; }
  .sms-hero__title, .sms-page-hero__title { font-family: var(--font-sms); font-weight: 850; font-stretch: 125%; font-size: var(--step-5); line-height: 0.92; letter-spacing: -0.02em; margin-bottom: var(--s-5); text-wrap: balance; }
  .sms-hero__lede, .sms-page-hero__lede { font-size: var(--step-1); line-height: 1.5; color: rgb(247 249 249 / 0.85); max-width: 40rem; margin-bottom: var(--s-6); }
  .sms-hero__actions { display: flex; flex-wrap: wrap; gap: var(--s-4); }
  .btn--sms { --btn-bg: var(--sms-teal); --btn-fg: var(--sms-ink); --btn-shadow: var(--sms-cream); }
  .btn--sms-dark { --btn-bg: var(--sms-ink); --btn-fg: var(--sms-white); --btn-shadow: var(--sms-teal); }

  .sms-page-hero { background: var(--sms-ink); color: var(--sms-white); padding-block: var(--s-9) var(--s-8); }
  .sms-page-hero__grid { display: grid; gap: var(--s-7); align-items: center; }
  @media (min-width: 56rem) { .sms-page-hero__grid { grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); } }

  .sms-section { padding-block: var(--section); }
  .sms-section--deep { background: var(--sms-ink); color: var(--sms-white); }
  .sms-section--deep .lede, .sms-section--deep p { color: rgb(247 249 249 / 0.82); }
  .sms-section--cream { background: var(--sms-cream); }
  .sms-section--flush { padding-block: 0; background: var(--sms-ink); }
  .sms-big { font-family: var(--font-sms); font-weight: 700; font-stretch: 112%; font-size: var(--step-3); line-height: 1.12; max-width: 30ch; text-wrap: balance; }

  .sms-machines { display: grid; gap: var(--s-5); }
  @media (min-width: 56rem) { .sms-machines { grid-template-columns: 1fr 1fr; } }
  .sms-machine { display: grid; gap: var(--s-2); text-decoration: none; color: var(--sms-white); }
  .sms-machine__photo { aspect-ratio: 3 / 2 !important; border-radius: 4px; margin-bottom: var(--s-3); transition: transform 500ms var(--ease); }
  .sms-machine:hover .sms-machine__photo { transform: translateY(-6px); }
  .sms-machine__tag { font-family: var(--font-mono); font-size: 0.75rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--sms-teal); }
  .sms-machine__name { font-family: var(--font-sms); font-weight: 850; font-stretch: 125%; font-size: var(--step-4); line-height: 1; }
  .sms-machine__full { color: rgb(247 249 249 / 0.75); }

  .sms-record { display: grid; gap: var(--s-7); align-items: center; }
  @media (min-width: 56rem) { .sms-record { grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); } }
  .sms-record > * { min-width: 0; }
  .sms-record__score { font-family: var(--font-sms); font-weight: 850; font-stretch: 112%; font-size: clamp(3.5rem, 1.5rem + 6.5vw, 7.5rem); line-height: 0.9; color: var(--sms-teal-deep); white-space: nowrap; }
  .sms-section--deep .sms-record__score { color: var(--sms-teal); }
  .sms-record__score span { color: inherit; }
  .sms-record__text { font-size: var(--step-1); max-width: 34ch; margin-block: var(--s-4) var(--s-5); }

  .sms-sponsors { display: grid; gap: var(--s-5); justify-items: start; }
  .sponsor-list--sms { width: 100%; border-top-color: var(--sms-ink); }
  .sponsor-list--sms li { border-color: rgb(6 38 43 / 0.15); }

  .sms-poster { aspect-ratio: auto !important; background-color: var(--sms-white); border-radius: 4px; max-width: 64rem; margin-inline: auto; }
  .sms-poster--tall { max-width: 22rem; }
  .sms-chapters { display: grid; gap: var(--s-6); grid-template-columns: repeat(auto-fit, minmax(min(100%, 22rem), 1fr)); }
  .sms-chapters--single { grid-template-columns: 1fr; }
  .sms-chapter { border-top: 3px solid var(--sms-teal); padding-top: var(--s-4); }
  .sms-chapter h3 { font-family: var(--font-sms); font-weight: 800; font-stretch: 115%; font-size: var(--step-1); margin-bottom: var(--s-3); }
  .sms-chapter p { color: inherit; opacity: 0.85; }
  .sms-adam { display: grid; gap: var(--s-7); align-items: start; }
  @media (min-width: 56rem) { .sms-adam { grid-template-columns: minmax(0, 1fr) minmax(0, 2fr); } }
  .subsystems { list-style: none; display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 15rem), 1fr)); gap: var(--s-3); }
  .subsystems li { padding: var(--s-4); background: var(--sms-white); border-left: 4px solid var(--sms-teal-deep); font-weight: 600; }

  .sms-site .spec { border-top-color: var(--sms-teal-deep); }
  .sms-site .timeline::after, .sms-site .timeline__item::before { border-color: var(--sms-teal-deep); background-color: var(--sms-teal-deep); }
  .sms-site .timeline__item::before { background: var(--sms-white); }
  .sms-site .timeline__when { color: var(--sms-teal-deep); }
  .sms-site .person__mono { background: var(--sms-teal-deep); }
  .sms-site .link-arrow:hover { border-color: var(--sms-teal); }

  .sms-footer { background: var(--sms-ink); color: rgb(247 249 249 / 0.85); padding-block: var(--s-8) var(--s-6); border-top: 6px solid var(--sms-teal); }
  .sms-footer__grid { display: grid; gap: var(--s-6); grid-template-columns: repeat(auto-fit, minmax(min(100%, 14rem), 1fr)); }
  .sms-footer__grid > div:first-child { grid-column: span 2; max-width: 30rem; }
  @media (max-width: 40rem) { .sms-footer__grid > div:first-child { grid-column: auto; } }
  .sms-footer img { width: 72px; height: 72px; margin-bottom: var(--s-3); }
  .sms-footer__name { font-family: var(--font-sms); font-weight: 850; font-stretch: 125%; font-size: var(--step-2); color: var(--sms-white); margin-bottom: var(--s-3); }
  .sms-footer a { color: var(--sms-white); }
  .sms-footer a:hover { color: var(--sms-teal); }
  .sms-footer ul { list-style: none; display: grid; gap: var(--s-2); }
  .sms-footer__label { font-family: var(--font-mono); font-size: 0.75rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--sms-teal); margin-bottom: var(--s-3); }

  /* Depth gauge: counts metres as you scroll down the SMS site */
  .sms-depth { display: none; }
}

@property --depth { syntax: "<integer>"; inherits: false; initial-value: 0; }
@media (prefers-reduced-motion: no-preference) and (min-width: 88rem) {
  @supports (animation-timeline: scroll()) {
    .sms-depth { display: grid; position: fixed; right: max(16px, env(safe-area-inset-right, 0px)); top: 50%; translate: 0 -50%; z-index: 40; gap: 2px; justify-items: end; padding: var(--s-3); background: rgb(6 38 43 / 0.85); color: #f7f9f9; border: 1px solid rgb(44 192 182 / 0.4); border-radius: 4px; font-family: var(--font-mono); pointer-events: none; }
    .sms-depth__label { font-size: 0.6rem; letter-spacing: 0.15em; color: #2cc0b6; }
    .sms-depth__value { counter-reset: d var(--depth); animation: dive linear both; animation-timeline: scroll(root); font-size: 1rem; font-variant-numeric: tabular-nums; }
    .sms-depth__value::after { content: counter(d) " m"; }
    @keyframes dive { from { --depth: 0; } to { --depth: 40; } }
    .sms-hero__bg .photo__img { animation: sms-sink linear both; animation-timeline: scroll(root); animation-range: 0 100vh; }
    @keyframes sms-sink { to { scale: 1.12; translate: 0 8%; filter: saturate(0.7) brightness(0.7); } }
  }
}

/* ---- review round 3 fixes ---- */
@layer pages {
  .sms-hero .sms-kicker, .sms-page-hero--photo .sms-kicker { color: var(--sms-white); }
  .sms-hero::after, .sms-page-hero--photo::after { background: linear-gradient(180deg, rgb(6 38 43 / 0.25) 0%, rgb(6 38 43 / 0.75) 35%, rgb(6 38 43 / 0.97) 100%); }
  .sms-header { background: rgb(6 38 43 / 0.96); }
  @supports (backdrop-filter: blur(8px)) { .sms-header { background: rgb(6 38 43 / 0.92); } }
  .sms-record > div { container-type: inline-size; }
  .sms-record > div { container-type: inline-size; min-width: 0; }
  .sms-record__score { font-size: min(7.5rem, 21cqi); }
}
@layer components {
  /* Card: only the name is the link; a stretched ::after keeps the whole card clickable. */
  .team-card { position: relative; }
  .team-card__name a { color: inherit; text-decoration: none; }
  .team-card__name a::after { content: ""; position: absolute; inset: 0; z-index: 1; }
  .team-card__name a:focus-visible { outline: none; }
  .team-card:has(.team-card__name a:focus-visible) { outline: 3px solid var(--accent-on-ink); outline-offset: 3px; }
  .team-card:hover .team-card__photo { transform: scale(1.04); }
  .filmstrip-hint { font-family: var(--font-mono); font-size: 0.75rem; letter-spacing: 0.06em; text-transform: uppercase; color: var(--text-muted); padding: var(--s-4) max(var(--gutter), calc((100vw - var(--maxw)) / 2)) 0; }
  .sms-section--flush .filmstrip-hint { color: rgb(247 249 249 / 0.7); }
}

/* ---------- round 4: crew photo, MESA, sponsor wall, timelines, people, org chart, video, donate ---------- */
@layer components {
  /* One rule for type case: Porcine (display) is always set in capitals. Its lowercase is drawn as
     small caps, so mixed-case strings looked inconsistent. UI labels stay sentence case.
     tests/e2e/smoke.mjs ("consistent letter case") enforces both. */
  .h1, .h2, .hero__title, .page-hero__title, .team-list__name, .site-footer__name, .brand__word, .steps__title,
  .product-card__name, .support .h2, .stat-big__value, .team-card__name, .timeline__title, .person__mono { text-transform: uppercase; }

  .nowrap, .ein { white-space: nowrap; }

  /* Fall group photo, front and center on the home page */
  .crew { background: var(--paper); padding-block: var(--s-8) var(--s-7); }
  .crew__head { margin-bottom: var(--s-5); }
  .crew__head .h2 { font-size: var(--step-4); }
  .crew__photo { width: 100%; max-height: none; }
  .crew__photo .photo__img { object-fit: cover; }
  .crew__foot { display: flex; flex-wrap: wrap; gap: var(--s-5); align-items: center; margin-top: var(--s-5); }
  @supports (animation-timeline: view()) {
    @media (prefers-reduced-motion: no-preference) {
      .crew__photo { animation: crew-in linear both; animation-timeline: view(); animation-range: entry 0% cover 40%; }
      @keyframes crew-in { from { clip-path: inset(8% 6% 8% 6% round 12px); } to { clip-path: inset(0 0 0 0 round 0); } }
    }
  }

  /* MESA outreach */
  .mesa { display: grid; gap: var(--s-7); align-items: center; }
  @media (min-width: 56rem) { .mesa { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); } }
  .mesa__dates { list-style: none; display: grid; gap: var(--s-2); margin-top: var(--s-5); font-size: 0.82rem; border-left: 3px solid var(--accent); padding-left: var(--s-4); }
  .mesa__grid { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s-3); }
  .mesa__grid .photo { aspect-ratio: 4 / 3 !important; }
  .mesa__b, .mesa__d { translate: 0 var(--s-6); }

  /* Sponsor wall: white logos on dark, sized by tier */
  .sponsor-wall { display: grid; gap: var(--s-3); }
  .sponsor-wall__label { font-family: var(--font-mono); font-size: 0.72rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--on-ink-muted); margin-top: var(--s-5); }
  .sponsor-wall__label:first-child { margin-top: 0; }
  .sponsor-wall__tier { list-style: none; display: grid; gap: 1px; background: var(--line-on-ink); border: 1px solid var(--line-on-ink); }
  .sponsor-wall__item { display: grid; place-items: center; background: var(--ink); padding: var(--s-5); transition: background 0.3s var(--ease); }
  .sponsor-wall__item img { width: auto; height: auto; max-width: 100%; object-fit: contain; opacity: 0.88; transition: opacity 0.3s var(--ease), scale 0.3s var(--ease); }
  .sponsor-wall__item:hover { background: var(--ink-2); }
  .sponsor-wall__item:hover img { opacity: 1; scale: 1.04; }
  .sponsor-wall__tier--1 .sponsor-wall__item { padding: clamp(2rem, 1rem + 4vw, 4.5rem); }
  .sponsor-wall__tier--1 img { max-height: clamp(5rem, 3rem + 7vw, 9rem); }
  .sponsor-wall__tier--2 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 18rem), 1fr)); }
  .sponsor-wall__tier--2 img { max-height: clamp(4rem, 3rem + 3vw, 6rem); }
  .sponsor-wall__tier--3 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 12rem), 1fr)); }
  .sponsor-wall__tier--3 img { max-height: 3.4rem; }
  .sponsor-wall__tier--4 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 9.5rem), 1fr)); }
  .sponsor-wall__tier--4 .sponsor-wall__item { padding: var(--s-4); }
  .sponsor-wall__tier--4 img { max-height: 2.6rem; }
  .sponsor-wall--compact .sponsor-wall__tier--1 .sponsor-wall__item { padding: var(--s-6); }
  .sponsor-wall--compact .sponsor-wall__tier--1 img { max-height: 5rem; }
  .sponsor-wall--sms .sponsor-wall__tier, .sponsor-wall--sms .sponsor-wall__item { background: var(--sms-ink); }
  .sponsor-wall--sms .sponsor-wall__tier { background: rgb(44 192 182 / 0.25); border-color: rgb(44 192 182 / 0.25); }
  .sponsor-wall--sms .sponsor-wall__item:hover { background: #0a333a; }
  .sponsor-wall--sms .sponsor-wall__label { color: var(--sms-teal); }
  .sponsors-hall__photos { display: grid; gap: var(--s-4); grid-template-columns: repeat(auto-fit, minmax(min(100%, 16rem), 1fr)); max-width: 46rem; margin: var(--s-7) auto 0; }
  .link-arrow--on-ink { color: var(--on-ink); }

  /* Timeline: expandable entries and an unfinished ending */
  .timeline__more { margin-top: var(--s-4); }
  .timeline__more summary { display: inline-flex; align-items: center; gap: var(--s-2); cursor: pointer; list-style: none; min-height: 44px; font-family: var(--font-mono); font-size: 0.78rem; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; color: var(--accent); }
  .timeline__more summary::-webkit-details-marker { display: none; }
  .timeline__more summary::after { content: "+"; display: grid; place-items: center; width: 1.4rem; height: 1.4rem; border: 1.5px solid currentColor; border-radius: 50%; font-size: 1rem; line-height: 1; transition: rotate 0.25s var(--ease); }
  .timeline__more[open] summary::after { rotate: 45deg; }
  .timeline__more-close, .timeline__more[open] .timeline__more-open { display: none; }
  .timeline__more[open] .timeline__more-close { display: inline; }
  .timeline__more-body { display: grid; gap: var(--s-3); padding: var(--s-4); border-left: 3px solid var(--accent); background: var(--paper-2); }
  .timeline__more-body p { color: var(--text); }
  .timeline__more[open] .timeline__more-body { animation: more-open 0.3s var(--ease); }
  @keyframes more-open { from { opacity: 0; translate: 0 -6px; } }
  .timeline__more-photo { max-width: 26rem; }

  .timeline::before { background: linear-gradient(to bottom, var(--line) calc(100% - 9rem), transparent); }
  .timeline::after { bottom: 9rem; }
  .timeline__item--next::before { border-style: dashed; background: transparent; animation: next-pulse 2.4s ease-in-out infinite; }
  .timeline__item--next::after { content: ""; position: absolute; left: calc(-1 * var(--s-6)); top: 1.6rem; height: 7rem; border-left: 2px dashed var(--accent); mask-image: linear-gradient(black, transparent); }
  .timeline__item--next .timeline__when, .timeline__item--next .timeline__title { opacity: 0.85; }
  .timeline__item--next .timeline__title::after { content: "▍"; margin-left: 0.1em; color: var(--accent); animation: caret 1.1s steps(1) infinite; }
  @keyframes next-pulse { 50% { box-shadow: 0 0 0 6px color-mix(in srgb, var(--accent) 20%, transparent); } }
  @keyframes caret { 50% { opacity: 0; } }
  @media (prefers-reduced-motion: reduce) { .timeline__item--next::before, .timeline__item--next .timeline__title::after { animation: none; } }
  .sms-site .timeline__more summary { color: var(--sms-teal-deep); }
  .sms-site .timeline__more-body { border-color: var(--sms-teal-deep); background: rgb(44 192 182 / 0.08); }
  .sms-site .timeline__item--next::after { border-color: var(--sms-teal-deep); }
  .sms-site .timeline__item--next .timeline__title::after { color: var(--sms-teal-deep); }

  /* People */
  .person__photo { grid-row: span 3; width: 4rem; height: 4rem; border-radius: 50%; object-fit: cover; background: var(--paper-2); }
  .person--photo { grid-template-rows: auto auto auto; }
  .person__mono { grid-row: span 3; }
  .person__group { grid-column: 2; font-family: var(--font-mono); font-size: 0.72rem; letter-spacing: 0.04em; color: var(--text-muted); }
  .people--feature { grid-template-columns: repeat(auto-fill, minmax(min(100%, 18rem), 1fr)); }
  .people--feature .person { padding: var(--s-5); }
  .people--feature .person__photo, .people--feature .person__mono, .people--founders .person__photo, .people--founders .person__mono { width: 5rem; height: 5rem; }
  .people--founders { grid-template-columns: 1fr; margin-top: 0; }

  /* SMS org chart */
  .org { display: grid; justify-items: center; gap: var(--s-6); margin-top: var(--s-5); }
  .org .person { text-align: left; min-width: min(100%, 17rem); }
  .org__root { position: relative; }
  .org__root::after { content: ""; position: absolute; left: 50%; top: 100%; height: var(--s-6); border-left: 2px solid var(--sms-teal-deep); }
  .org__level { list-style: none; display: grid; gap: var(--s-5); width: 100%; position: relative; padding-top: var(--s-5); border-top: 2px solid var(--sms-teal-deep); }
  @media (min-width: 64rem) { .org__level { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
  .org__node { display: grid; gap: var(--s-3); align-content: start; position: relative; }
  .org__node::before { content: ""; position: absolute; left: 50%; top: calc(-1 * var(--s-5)); height: var(--s-5); border-left: 2px solid var(--sms-teal-deep); }
  .org__sub { list-style: none; display: grid; gap: var(--s-3); padding-left: var(--s-5); border-left: 2px solid rgb(15 111 105 / 0.35); margin-left: var(--s-5); }
  .org__leads { margin-top: var(--s-8); }

  /* Video embeds */
  .video-grid { display: grid; gap: var(--s-6); margin-top: var(--s-5); }
  @media (min-width: 56rem) { .video-grid { grid-template-columns: 1fr 1fr; } .video--feature { grid-column: 1 / -1; } }
  .video__frame { position: relative; aspect-ratio: 16 / 9; background: var(--sms-ink); border-radius: var(--radius); overflow: hidden; box-shadow: 0 18px 40px -24px rgb(6 38 43 / 0.6); }
  .video__frame iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
  .video__caption { display: grid; gap: var(--s-1); margin-top: var(--s-3); }
  .video__title { font-weight: 700; }
  .video__note { font-size: 0.9rem; color: rgb(6 38 43 / 0.75); }

  /* Donate */
  .amount-picker { border: 0; padding: 0; margin: 0 0 var(--s-5); display: grid; gap: var(--s-3); }
  .amount-picker__chips { display: flex; flex-wrap: wrap; gap: var(--s-2); }
  .chip { position: relative; }
  .chip input { position: absolute; opacity: 0; inset: 0; cursor: pointer; }
  .chip span { display: inline-grid; place-items: center; min-width: 5rem; min-height: 48px; padding: 0 var(--s-4); border: 2px solid var(--ink); border-radius: var(--radius); font-family: var(--font-mono); font-weight: 700; font-size: 1.05rem; }
  .chip input:checked + span { background: var(--ink); color: var(--white); box-shadow: 4px 4px 0 var(--accent); }
  .chip input:focus-visible + span { outline: 3px solid var(--focus); outline-offset: 2px; }
  .label--sub { margin-top: var(--s-2); }
  .amount-picker__custom { display: flex; align-items: center; gap: var(--s-2); font-family: var(--font-mono); font-weight: 700; }
  .amount-picker__custom input { max-width: 10rem; }
  .donate-aside { display: grid; gap: var(--s-4); align-content: start; }
  .donate-aside__list { list-style: none; display: grid; gap: var(--s-3); }
  .donate-aside__list li { padding-left: var(--s-4); border-left: 3px solid var(--accent); }
  .receipt { margin-top: var(--s-5); padding: var(--s-5); border: 1px dashed var(--line-strong); background: var(--paper-2); display: grid; gap: var(--s-2); }
  .btn--ghost-on-accent { --btn-bg: transparent; --btn-fg: var(--white); --btn-border: var(--white); }
}
@layer components {
  /* Closed mobile menus must not lay out (their links were adding sideways scroll on phones). */
  .nav--narrow:not([open]) .nav__sheet { display: none; }
}
@layer components {
  /* Sponsor rows wrap centered so a short last row never leaves an empty block. */
  .sponsor-wall__tier { display: flex; flex-wrap: wrap; justify-content: center; gap: 0; background: none; border: 0; }
  .sponsor-wall__item { flex: 0 1 50%; outline: 1px solid var(--line-on-ink); outline-offset: -0.5px; }
  .sponsor-wall__tier--1 .sponsor-wall__item { flex-basis: 100%; }
  @media (min-width: 40rem) { .sponsor-wall__tier--3 .sponsor-wall__item { flex-basis: 33.333%; } .sponsor-wall__tier--4 .sponsor-wall__item { flex-basis: 25%; } }
  @media (min-width: 64rem) { .sponsor-wall__tier--3 .sponsor-wall__item { flex-basis: 25%; } .sponsor-wall__tier--4 .sponsor-wall__item { flex-basis: 20%; } }
  .sponsor-wall--sms .sponsor-wall__item { outline-color: rgb(44 192 182 / 0.25); }
  .sponsor-wall--sms .sponsor-wall__tier { background: none; border: 0; }
}
@layer pages {
  @media (max-width: 55.99rem) { .hero::before { inset: 0; opacity: 0.35; mask-image: linear-gradient(180deg, black 30%, transparent 75%); } }
}

/* ---------- round 5 ---------- */
@layer pages {
  /* Home hero: the fall club photo. It starts veiled behind the title and clears as you scroll. */
  .hero { padding: 0; background: var(--ink); }
  .hero::before, .hero::after { display: none; }
  .hero__stage { position: relative; min-height: min(92svh, 56rem); display: grid; align-items: end; overflow: hidden; isolation: isolate; }
  .hero__photo { position: absolute !important; inset: 0; z-index: -2; aspect-ratio: auto !important; height: 100%; }
  .hero__photo .photo__img { object-fit: cover; }
  .hero__veil { position: absolute; inset: 0; z-index: -1; background: linear-gradient(180deg, rgb(16 16 17 / 0.55) 0%, rgb(16 16 17 / 0.72) 55%, rgb(16 16 17 / 0.9) 100%); }
  .hero__copy { position: relative; padding-block: clamp(6rem, 4rem + 8vw, 10rem) clamp(3rem, 2rem + 4vw, 5rem); }
  .hero__title { font-size: clamp(2.6rem, 1.4rem + 5.6vw, 6.4rem); max-width: 16ch; min-height: 2em; }
  .hero__caption { position: absolute; right: var(--gutter); bottom: var(--s-4); margin: 0; font-size: 0.72rem; letter-spacing: 0.12em; text-transform: uppercase; color: rgb(247 249 249 / 0.7); }
  .scramble__glyph { color: var(--accent-on-ink); }
  @supports (animation-timeline: scroll()) {
    @media (prefers-reduced-motion: no-preference) {
      .hero { height: 190svh; }
      .hero__stage { position: sticky; top: 0; height: 100svh; min-height: 0; }
      .hero__veil { animation: veil-lift linear both; animation-timeline: scroll(root); animation-range: 0 90svh; }
      .hero__copy { animation: hero-copy-out linear both; animation-timeline: scroll(root); animation-range: 0 70svh; }
      .hero__photo { animation: photo-settle linear both; animation-timeline: scroll(root); animation-range: 0 90svh; }
      .hero__caption { animation: caption-in linear both; animation-timeline: scroll(root); animation-range: 40svh 90svh; }
      @keyframes veil-lift { to { opacity: 0.05; } }
      @keyframes hero-copy-out { to { opacity: 0; transform: translateY(-12vh); } }
      @keyframes photo-settle { from { transform: scale(1.12); filter: blur(3px) saturate(0.7); } to { transform: scale(1); filter: none; } }
      @keyframes caption-in { from { opacity: 0; } to { opacity: 1; } }
    }
  }
}

@layer components {
  /* What we do: photo cards in a 2-1-1-2 layout */
  .what__lede { max-width: 34rem; margin: 0; }
  .what { list-style: none; display: grid; gap: var(--s-4); }
  @media (min-width: 56rem) { .what { grid-template-columns: repeat(3, 1fr); } .what__card--wide { grid-column: span 2; } }
  .what__card { display: grid; grid-template-rows: auto 1fr; background: var(--ink-2); border: 1px solid var(--line-on-ink); border-radius: 14px; overflow: hidden; }
  .what__photo { border-radius: 0; }
  .what__body { display: grid; align-content: start; gap: var(--s-3); padding: var(--s-5); }
  .what__body p { color: var(--on-ink-muted); }
  .what__title { font-family: var(--font-display); text-transform: uppercase; font-size: var(--step-1); color: var(--white); }
  .what__card:nth-child(1) { border-top: 4px solid var(--accent); }
  .what__card:nth-child(4) { border-top: 4px solid var(--antenna); }

  /* Outreach */
  .outreach { display: grid; gap: var(--s-7); align-items: center; }
  @media (min-width: 56rem) { .outreach { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); } }
  .outreach__dates { list-style: none; display: grid; gap: var(--s-2); margin-top: var(--s-5); font-size: 0.8rem; border-left: 3px solid var(--accent); padding-left: var(--s-4); }
  .outreach__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--s-3); }
  .outreach__grid .photo { aspect-ratio: 1 / 1 !important; }
  .outreach__a { grid-column: span 2; grid-row: span 2; aspect-ratio: auto !important; height: 100%; }
  .outreach__a .photo__img { height: 100%; object-fit: cover; }

  /* Timeline moments (expanded blocks) */
  .timeline__item > .timeline__more { grid-column: 1 / -1; margin-top: 0; }
  @media (min-width: 56rem) { .timeline__item > .timeline__more { grid-column: 2 / -1; } }
  .moments { list-style: none; display: grid; grid-auto-flow: column; grid-auto-columns: minmax(14rem, 17rem); gap: var(--s-4); overflow-x: auto; scroll-snap-type: x proximity; padding: var(--s-4) var(--s-1) var(--s-5); margin-top: var(--s-2); scrollbar-width: thin; }
  .timeline__more[open] .moments { animation: more-open 0.35s var(--ease); }
  .moment { scroll-snap-align: start; display: grid; align-content: start; gap: var(--s-2); padding: var(--s-3); background: var(--white); border: 1px solid var(--line); border-radius: 12px; box-shadow: 0 12px 24px -20px rgb(16 16 17 / 0.5); }
  .moment__photo { border-radius: 8px; overflow: hidden; }
  .moment--text { border-top: 4px solid var(--accent); }
  .moment__date { font-size: 0.72rem; letter-spacing: 0.06em; color: var(--accent); font-weight: 700; }
  .moment__title { font-weight: 700; line-height: 1.25; }
  .moment__body { font-size: 0.9rem; color: var(--text-muted); }
  .moment__caption { font-size: 0.78rem; color: var(--text-muted); font-style: italic; }
  .sms-site .moment__date { color: var(--sms-teal-deep); }
  .sms-site .moment--text { border-top-color: var(--sms-teal-deep); }

  /* Avatars */
  .avatar { width: var(--size, 64px); height: var(--size, 64px); border-radius: 50%; object-fit: cover; flex: none; background: var(--paper-2); }
  .avatar--initials { display: inline-grid; place-items: center; background: var(--sms-teal-deep, var(--ink)); color: var(--white); font-family: var(--font-mono); font-weight: 700; font-size: calc(var(--size, 64px) * 0.32); }

  /* Equal-size clickable tiles (SMS company) */
  .tiles { list-style: none; display: grid; gap: var(--s-4); margin-top: var(--s-5); }
  .tiles--people { grid-template-columns: repeat(auto-fill, minmax(min(100%, 12rem), 1fr)); }
  .tiles--crews { grid-template-columns: repeat(auto-fill, minmax(min(100%, 16rem), 1fr)); }
  .tiles > li { display: grid; }
  .tile { display: grid; justify-items: center; align-content: start; gap: var(--s-2); height: 100%; padding: var(--s-5) var(--s-4); text-align: center; text-decoration: none; color: inherit; background: var(--white); border: 1px solid rgb(6 38 43 / 0.12); border-radius: 16px; transition: transform 180ms var(--ease), box-shadow 180ms var(--ease), border-color 180ms; }
  .tile:hover, .tile:focus-visible { transform: translateY(-4px); box-shadow: 0 18px 30px -22px rgb(6 38 43 / 0.7); border-color: var(--sms-teal-deep); }
  .tile__name { font-weight: 800; font-stretch: 112%; line-height: 1.2; }
  .tile__role { font-size: 0.85rem; color: rgb(6 38 43 / 0.7); }
  .tile--crew { justify-items: start; text-align: left; padding: 0 0 var(--s-5); overflow: hidden; }
  .tile--crew .tile__name, .tile--crew .tile__role { padding-inline: var(--s-4); }
  .tile__photo { width: 100%; border-radius: 0; }
  .support-teams { display: flex; flex-wrap: wrap; gap: var(--s-3) var(--s-6); margin-top: var(--s-6); font-size: 0.95rem; }

  /* Pop-up sheets */
  .sheet { width: min(44rem, calc(100vw - 2 * var(--gutter))); max-height: min(88vh, 52rem); padding: var(--s-6); border: 0; border-radius: 20px; background: var(--white); color: var(--sms-ink, var(--ink)); box-shadow: 0 40px 80px -30px rgb(6 38 43 / 0.6); overflow: auto; }
  .sheet::backdrop { background: rgb(6 38 43 / 0.6); backdrop-filter: blur(4px); }
  .sheet[open] { animation: sheet-in 0.25s var(--ease); }
  @keyframes sheet-in { from { opacity: 0; transform: translateY(16px) scale(0.98); } }
  .sheet:target { display: block; position: fixed; inset: 5vh auto auto 50%; transform: translateX(-50%); z-index: 100; }
  .sheet__head { display: grid; grid-template-columns: auto 1fr auto; gap: var(--s-5); align-items: start; margin-bottom: var(--s-5); }
  .sheet__head:not(:has(.avatar)) { grid-template-columns: 1fr auto; }
  .sheet__title { font-size: var(--step-2); font-weight: 850; font-stretch: 120%; line-height: 1.05; margin-bottom: var(--s-2); }
  .sheet__close { display: grid; place-items: center; width: 44px; height: 44px; border-radius: 50%; border: 1px solid rgb(6 38 43 / 0.2); font-size: 1.6rem; line-height: 1; text-decoration: none; color: inherit; }
  .sheet__close:hover { background: var(--sms-ink); color: var(--white); }
  .sheet__photo { border-radius: 12px; overflow: hidden; margin-bottom: var(--s-5); }
  .sheet__h { font-family: var(--font-mono); font-size: 0.75rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--sms-teal-deep); margin: var(--s-5) 0 var(--s-3); }
  .sheet__list { display: grid; gap: var(--s-2); padding-left: 1.2rem; }
  .sheet__people { list-style: none; display: grid; grid-template-columns: repeat(auto-fill, minmax(11rem, 1fr)); gap: var(--s-2) var(--s-4); }
  .sheet__lead { grid-column: 1 / -1; display: flex; align-items: center; gap: var(--s-3); margin-bottom: var(--s-2); }

  /* SMS mission */
  .sms-mission { max-width: 56rem; }
  .sms-mission__quote { position: relative; margin: 0; padding: var(--s-6) 0 var(--s-5) var(--s-7); border-left: 6px solid var(--sms-teal); }
  .sms-mission__quote::before { content: "\201C"; position: absolute; left: var(--s-4); top: -0.15em; font-size: 6rem; line-height: 1; color: var(--sms-teal); font-weight: 800; }
  .sms-mission__quote p { font-size: var(--step-2); font-weight: 700; font-stretch: 110%; line-height: 1.25; color: var(--sms-ink); }
  .sms-mission__source { margin-top: var(--s-3); padding-left: var(--s-7); font-family: var(--font-mono); font-size: 0.75rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--sms-teal-deep); }

  /* St. John's photo wall */
  .canada-wall { display: grid; gap: var(--s-2); grid-template-columns: repeat(2, 1fr); padding: var(--s-4) var(--gutter) var(--s-8); }
  .canada-wall .photo { aspect-ratio: 4 / 3 !important; border-radius: 10px; overflow: hidden; }
  .canada-wall__a, .canada-wall__i { grid-column: span 2; aspect-ratio: 16 / 9 !important; }
  @media (min-width: 56rem) {
    .canada-wall { grid-template-columns: repeat(4, 1fr); grid-auto-rows: 14rem; max-width: 90rem; margin-inline: auto; }
    .canada-wall .photo { aspect-ratio: auto !important; height: 100%; }
    .canada-wall .photo__img { height: 100%; object-fit: cover; }
    .canada-wall__a { grid-column: span 2; grid-row: span 2; }
    .canada-wall__i { grid-column: span 2; }
    .canada-wall__d { grid-row: span 2; }
  }

  /* Submission documents */
  .docs { list-style: none; display: grid; gap: var(--s-2); }
  .docs__link { display: grid; gap: 2px; padding: var(--s-3) var(--s-4); border: 1px solid rgb(6 38 43 / 0.15); border-radius: 10px; text-decoration: none; color: inherit; background: var(--white); transition: border-color 150ms, transform 150ms; }
  .docs__link:hover { border-color: var(--sms-teal-deep); transform: translateX(4px); }
  .docs__title { font-weight: 700; }
  .docs__title::after { content: " ↗"; color: var(--sms-teal-deep); }
  .docs__note { font-size: 0.85rem; color: rgb(6 38 43 / 0.65); }
  .docs__poster { margin-top: var(--s-5); }

  /* Sponsor levels */
  .levels { list-style: none; display: grid; gap: var(--s-3); grid-template-columns: repeat(auto-fit, minmax(min(100%, 13rem), 1fr)); }
  .level { display: grid; align-content: start; gap: var(--s-2); padding: var(--s-5); border-radius: 14px; background: var(--white); border: 1px solid var(--line); }
  .level:first-child { background: var(--accent); color: var(--white); border-color: var(--accent); }
  .level:first-child .level__perks { color: rgb(255 255 255 / 0.88); }
  .level__name { font-family: var(--font-display); text-transform: uppercase; font-size: var(--step-1); }
  .level__amount { font-size: var(--step-1); font-weight: 700; }
  .level__perks { padding-left: 1.1rem; display: grid; gap: var(--s-1); font-size: 0.9rem; color: var(--text-muted); }

  /* About: blurple */
  .page-hero--blurple { background: var(--accent); }
  .page-hero--blurple .eyebrow { color: rgb(255 255 255 / 0.8); }
  .page-hero--blurple .page-hero__lede { color: rgb(255 255 255 / 0.9); }
  .page-hero--blurple::after { background: linear-gradient(90deg, var(--antenna) 0 12%, var(--ink) 12% 100%); }
  .section--blurple { background: var(--accent); color: var(--white); }
  .pillars { list-style: none; display: grid; gap: var(--s-4); margin-top: var(--s-6); grid-template-columns: repeat(auto-fit, minmax(min(100%, 14rem), 1fr)); }
  .pillar { padding: var(--s-5); border-radius: 16px; background: rgb(255 255 255 / 0.1); border: 1px solid rgb(255 255 255 / 0.25); }
  .pillar__num { font-size: 0.8rem; opacity: 0.8; }
  .pillar__title { font-family: var(--font-display); text-transform: uppercase; font-size: var(--step-1); margin: var(--s-2) 0; }
  .pillar a { color: var(--white); }
  .majors { margin-top: var(--s-6); display: grid; gap: var(--s-2); }
  .majors__row { display: grid; grid-template-columns: 11rem 1fr 3.5rem; gap: var(--s-3); align-items: center; font-size: 0.9rem; }
  .majors__bar { height: 12px; border-radius: 999px; background: linear-gradient(90deg, var(--accent) var(--pct), var(--paper-2) var(--pct)); }
  @media (max-width: 30rem) { .majors__row { grid-template-columns: 8rem 1fr 3rem; font-size: 0.8rem; } }

  /* About collage: mixed shapes */
  .collage { display: grid; gap: var(--s-3); grid-template-columns: repeat(2, 1fr); padding-block: var(--s-4) var(--s-8); }
  .collage .photo { aspect-ratio: 1 / 1 !important; overflow: hidden; }
  .collage .photo__img { height: 100%; object-fit: cover; }
  .collage__a { grid-column: span 2; aspect-ratio: 16 / 9 !important; border-radius: 24px; }
  .collage__b { border-radius: 50%; }
  .collage__c { border-radius: 999px 999px 18px 18px; }
  .collage__d { border-radius: 18px 80px 18px 80px; }
  .collage__e { border-radius: 18px; }
  .collage__f { clip-path: polygon(50% 0, 100% 25%, 100% 75%, 50% 100%, 0 75%, 0 25%); }
  .collage__g { border-radius: 18px 18px 999px 999px; }
  .collage__h { border-radius: 80px 18px 80px 18px; }
  .collage__i { border-radius: 999px; }
  @media (min-width: 56rem) {
    .collage { grid-template-columns: repeat(5, 1fr); grid-auto-rows: 12rem; grid-auto-flow: dense; }
    .collage .photo { aspect-ratio: auto !important; height: 100%; }
    .collage__a { grid-column: span 3; grid-row: span 2; }
    .collage__i { grid-column: span 2; }
  }
  @media (prefers-reduced-motion: no-preference) {
    .collage .photo { transition: transform 300ms var(--ease); }
    .collage .photo:hover { transform: rotate(-1.5deg) scale(1.02); }
  }

  /* Teams: SMS card legibility */
  .team-card--sms::after { background: linear-gradient(180deg, rgb(6 38 43 / 0.15) 0%, rgb(6 38 43 / 0.75) 45%, rgb(6 38 43 / 0.96) 75%); }
  .team-card--sms .team-card__kicker { justify-self: start; padding: 0.3rem 0.6rem; border-radius: 999px; background: rgb(6 38 43 / 0.85); color: var(--sms-teal); }
}
@layer components {
  @media (min-width: 56rem) {
    .timeline__item:has(> .timeline__more) > .timeline__photo { grid-row: 1 / span 2; }
    .timeline__item > .timeline__more:not([open]) { grid-column: 2; align-self: start; }
  }
}

/* ---------- round 6 ---------- */
@layer pages {
  /* Home landing: just the club photo, AVI and a scroll cue. Scrolling sends AVI up into the
     nav bar, the buttons fold into the nav, and the header slides in. Then the page carries on. */
  .landing { position: relative; background: var(--ink); color: var(--white); }
  .landing__stage { position: relative; height: 100svh; min-height: 32rem; overflow: hidden; isolation: isolate; }
  .landing__photo { position: absolute !important; inset: 0; z-index: -2; aspect-ratio: auto !important; height: 100%; }
  .landing__photo .photo__img { object-fit: cover; }
  .landing__veil { position: absolute; inset: 0; z-index: -1; background:
      radial-gradient(ellipse at 50% 32%, rgb(16 16 17 / 0.25), rgb(16 16 17 / 0.7) 70%),
      linear-gradient(180deg, rgb(16 16 17 / 0.55), rgb(16 16 17 / 0.35) 45%, rgb(16 16 17 / 0.8)); }
  .landing__mark { position: absolute; left: 50%; top: 30%; translate: -50% -50%; margin: 0;
    font-family: var(--font-display); font-weight: 850; text-transform: uppercase; line-height: 0.8; letter-spacing: 0.02em;
    font-size: clamp(7rem, 4rem + 22vw, 19rem); color: var(--white); text-shadow: 0 20px 60px rgb(0 0 0 / 0.45); white-space: nowrap; }
  .landing__sub { position: absolute; left: 50%; top: calc(30% + clamp(4.5rem, 2.5rem + 12vw, 11rem)); translate: -50% 0; width: max-content; max-width: calc(100vw - 2 * var(--gutter));
    margin: 0; text-align: center; font-family: var(--font-mono); font-size: clamp(0.85rem, 0.7rem + 0.8vw, 1.25rem); letter-spacing: 0.18em; text-transform: uppercase; color: rgb(247 249 249 / 0.88); }
  .landing__actions { position: absolute; left: 50%; bottom: clamp(6rem, 14svh, 9rem); translate: -50% 0; display: flex; flex-wrap: wrap; justify-content: center; gap: var(--s-3); width: max-content; max-width: calc(100vw - 2 * var(--gutter)); }
  .landing__cue { position: absolute; left: 50%; bottom: var(--s-5); translate: -50% 0; display: grid; justify-items: center; gap: var(--s-2); color: rgb(247 249 249 / 0.85); text-decoration: none; font-size: 0.7rem; letter-spacing: 0.24em; text-transform: uppercase; }
  .landing__cue-line { width: 2px; height: 2.75rem; border-radius: 2px; background: linear-gradient(var(--white) 0 40%, rgb(255 255 255 / 0.25) 40%); background-size: 100% 200%; }
  @media (prefers-reduced-motion: no-preference) { .landing__cue-line { animation: cue 2.2s var(--ease) infinite; } }
  @keyframes cue { from { background-position: 0 100%; } to { background-position: 0 -100%; } }

  @supports (animation-timeline: scroll()) {
    @media (prefers-reduced-motion: no-preference) {
      .landing { height: 240svh; }
      .landing__stage { position: sticky; top: 0; }
      /* the header waits off-screen until AVI arrives at the top */
      .landing__mark { animation: mark-to-nav linear both; animation-timeline: scroll(root); animation-range: 0 62svh; }
      @keyframes mark-to-nav {
        70% { opacity: 1; }
        to { translate: calc(-50% - 50vw + max(var(--gutter), (100vw - var(--maxw)) / 2) + 4.9rem) calc(-50% - 30svh + 2rem); scale: 0.1; opacity: 0; }
      }
      .landing__sub { animation: sub-out linear both; animation-timeline: scroll(root); animation-range: 0 30svh; }
      @keyframes sub-out { to { opacity: 0; translate: -50% -3rem; } }
      .landing__actions { animation: actions-to-nav linear both; animation-timeline: scroll(root); animation-range: 0 62svh; }
      @keyframes actions-to-nav {
        60% { opacity: 1; }
        to { translate: calc(-50% + 50vw - max(var(--gutter), (100vw - var(--maxw)) / 2) - 8rem) calc(-86svh + 2.75rem); scale: 0.55; opacity: 0; }
      }
      .landing__cue { animation: cue-out linear both; animation-timeline: scroll(root); animation-range: 0 14svh; }
      @keyframes cue-out { to { opacity: 0; translate: -50% 1rem; } }
      .landing__veil { animation: veil-clear linear both; animation-timeline: scroll(root); animation-range: 30svh 130svh; }
      @keyframes veil-clear { to { opacity: 0.1; } }
      .landing__photo .photo__img { animation: landing-photo linear both; animation-timeline: scroll(root); animation-range: 0 140svh; }
      @keyframes landing-photo { from { scale: 1.1; filter: saturate(0.75); } to { scale: 1; filter: none; } }
      .landing__actions .btn { pointer-events: auto; }
    }
  }

  /* Intro + news card */
  .intro__grid { display: grid; gap: var(--s-7); align-items: center; }
  @media (min-width: 56rem) { .intro__grid { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); } }
  .intro .hero__actions { align-items: center; margin-top: var(--s-5); }
  .news { display: grid; background: var(--white); border-radius: 22px; overflow: hidden; border: 1px solid var(--line); box-shadow: 0 30px 60px -40px rgb(16 16 17 / 0.5); rotate: -1.2deg; }
  .news__photo { border-radius: 0; }
  .news__body { padding: var(--s-5); display: grid; gap: var(--s-2); }
  .news__tag { font-size: 0.72rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--accent); font-weight: 700; }
  .news__title { font-family: var(--font-display); text-transform: uppercase; font-size: var(--step-1); line-height: 1.05; }
  .news__body p:last-child { color: var(--text-muted); }

  /* Home: projects band */
  .projects-band { display: grid; gap: var(--s-7); align-items: center; }
  @media (min-width: 56rem) { .projects-band { grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); } }
  .projects-band__copy .btn { margin-top: var(--s-5); }
  .projects-band__photos { display: grid; grid-template-columns: 1.3fr 1fr; grid-template-rows: auto auto; gap: var(--s-3); }
  .projects-band__photos .photo { overflow: hidden; }
  .projects-band__a { grid-row: span 2; aspect-ratio: 3 / 4 !important; border-radius: 28px; }
  .projects-band__a .photo__img, .projects-band__b .photo__img, .projects-band__c .photo__img { height: 100%; object-fit: cover; }
  .projects-band__b { aspect-ratio: 1 / 1 !important; border-radius: 50%; }
  .projects-band__c { aspect-ratio: 4 / 3 !important; border-radius: 999px 999px 24px 24px; }

  /* Outreach copy now sits above a collage */
  .section--outreach { padding-bottom: 0; }
  .outreach { grid-template-columns: 1fr !important; }
  @media (min-width: 56rem) { .outreach__copy { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); column-gap: var(--s-8); align-items: end; } .outreach__copy .eyebrow, .outreach__copy .h2 { grid-column: 1; } .outreach__dates { grid-column: 2; grid-row: 1 / span 3; margin-top: 0; } }

  /* Projects page */
  .tracks { list-style: none; display: grid; gap: var(--s-5); }
  .track { display: grid; background: var(--white); border: 1px solid var(--line); border-radius: 20px; overflow: hidden; }
  @media (min-width: 40rem) { .track { grid-template-columns: minmax(0, 2fr) minmax(0, 3fr); } }
  .track__photo { border-radius: 0; height: 100%; }
  .track__photo .photo__img { height: 100%; object-fit: cover; }
  .track__body { padding: var(--s-5); display: grid; align-content: center; gap: var(--s-2); }
  .track__title { font-family: var(--font-display); text-transform: uppercase; font-size: var(--step-1); }
  .track__body p { color: var(--text-muted); }
  .bcp__lede { max-width: 36rem; margin: 0; }
  .bcp { display: grid; gap: var(--s-7); align-items: start; }
  @media (min-width: 56rem) { .bcp { grid-template-columns: minmax(0, 6fr) minmax(0, 5fr); } }
  .bcp__kit { border-radius: 24px; rotate: 1.5deg; }
  .bcp-steps { list-style: none; display: grid; gap: var(--s-3); margin-bottom: var(--s-6); counter-reset: s; }
  .bcp-steps li { display: grid; gap: var(--s-1); padding: var(--s-4) var(--s-5); border-radius: 16px; background: var(--ink-2); border: 1px solid var(--line-on-ink); color: var(--on-ink-muted); }
  .bcp-steps .mono { color: var(--accent-on-ink); font-size: 0.75rem; letter-spacing: 0.1em; text-transform: uppercase; font-weight: 700; }
  .rounds { list-style: none; display: grid; gap: var(--s-4); }
  .round { padding: var(--s-5); border-radius: 18px; background: var(--white); border: 1px solid var(--line); border-left: 6px solid var(--accent); }
  .round__when { font-size: 0.75rem; color: var(--accent); font-weight: 700; }
  .round__title { font-family: var(--font-display); text-transform: uppercase; font-size: var(--step-1); margin: var(--s-2) 0; }
  .round p { color: var(--text-muted); }

  /* 3D models */
  .split--model { align-items: center; }
  .model { margin: 0; position: relative; }
  .model model-viewer { display: block; width: 100%; height: auto; aspect-ratio: 9 / 7; border-radius: 24px; background: radial-gradient(ellipse at 50% 40%, #f4fbfb, #d9eeee 70%); --poster-color: transparent; }
  .model__go { position: absolute; left: 50%; bottom: var(--s-5); translate: -50% 0; box-shadow: 0 16px 30px -16px rgb(6 38 43 / 0.7); }
  .model.is-live .model__go { display: none; }
  .model__size { font-size: 0.7rem; opacity: 0.8; margin-left: var(--s-2); }
  .model__caption { margin-top: var(--s-3); font-size: 0.75rem; color: rgb(6 38 43 / 0.65); }
  .no-3d .model__go { display: none; }
  .sms-section--model { background: linear-gradient(180deg, var(--sms-white, #f7f9f9), #e6f4f3); }

  /* Video carousel */
  .vcar { display: grid; gap: var(--s-4); margin-top: var(--s-6); }
  .vcar__stage { position: relative; }
  .vcar__stage .video__frame { border-radius: 18px; overflow: hidden; box-shadow: 0 40px 80px -50px rgb(6 38 43 / 0.8); }
  .vcar__arrow { display: none; position: absolute; top: 50%; translate: 0 -50%; width: 3.25rem; height: 3.25rem; border-radius: 50%; border: 0; cursor: pointer; font-size: 2rem; line-height: 1; background: var(--sms-ink, var(--ink)); color: var(--white); box-shadow: 0 12px 30px -10px rgb(0 0 0 / 0.6); transition: scale 150ms var(--ease), background 150ms; }
  .vcar.is-ready .vcar__arrow { display: grid; place-items: center; }
  .vcar__arrow:hover { scale: 1.08; background: var(--sms-teal-deep, var(--accent)); }
  .vcar__arrow--prev { left: -1rem; }
  .vcar__arrow--next { right: -1rem; }
  @media (max-width: 40rem) { .vcar__arrow--prev { left: var(--s-2); } .vcar__arrow--next { right: var(--s-2); } .vcar__arrow { top: auto; bottom: var(--s-2); translate: none; width: 2.75rem; height: 2.75rem; } }
  .vcar__bar { display: grid; gap: var(--s-4); }
  @media (min-width: 56rem) { .vcar__bar { grid-template-columns: minmax(0, 1fr) auto; align-items: center; } }
  .vcar__now { display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--s-2) var(--s-3); margin: 0; }
  .vcar__count { font-size: 0.75rem; color: var(--sms-teal-deep, var(--accent)); font-weight: 700; }
  .vcar__list { list-style: none; display: flex; gap: var(--s-3); flex-wrap: wrap; }
  .vcar__tab { display: grid; gap: var(--s-1); width: 9rem; text-decoration: none; color: inherit; font-size: 0.78rem; line-height: 1.25; opacity: 0.6; transition: opacity 150ms; }
  .vcar__tab img { width: 100%; height: auto; aspect-ratio: 16 / 9; object-fit: cover; border-radius: 10px; border: 3px solid transparent; }
  .vcar__tab[aria-current="true"] { opacity: 1; }
  .vcar__tab[aria-current="true"] img { border-color: var(--sms-teal-deep, var(--accent)); }
  .vcar__tab:hover { opacity: 1; }
}

@layer components {
  /* Photos zoom: anything not inside a link opens in the lightbox */
  figure.photo:not(.no-zoom) .photo__img { cursor: zoom-in; }
  .hero figure.photo .photo__img, a figure.photo .photo__img { cursor: inherit; }
  .lightbox { max-width: none; max-height: none; width: 100vw; height: 100dvh; margin: 0; padding: var(--s-5); border: 0; background: rgb(10 10 11 / 0.92); display: none; place-items: center; }
  .lightbox[open] { display: grid; animation: lb-in 0.25s var(--ease); }
  .lightbox::backdrop { background: transparent; }
  @keyframes lb-in { from { opacity: 0; } }
  .lightbox__figure { margin: 0; display: grid; gap: var(--s-3); justify-items: center; max-height: 100%; }
  .lightbox__img { max-width: min(100%, 120rem); max-height: calc(100dvh - 7rem); width: auto; height: auto; border-radius: 12px; cursor: zoom-out; animation: lb-zoom 0.3s var(--ease); }
  @keyframes lb-zoom { from { scale: 0.94; } }
  .lightbox__cap { color: rgb(247 249 249 / 0.85); font-size: 0.9rem; max-width: 60ch; text-align: center; }
  .lightbox__close { position: fixed; top: var(--s-4); right: var(--s-4); width: 3rem; height: 3rem; border-radius: 50%; border: 1px solid rgb(255 255 255 / 0.3); background: rgb(255 255 255 / 0.08); color: var(--white); font-size: 1.8rem; line-height: 1; cursor: pointer; }

  /* Collage: soft mixed shapes, edge to edge, fading out at both sides */
  .collage-band { overflow: hidden; padding-block: var(--s-6) var(--s-8);
    -webkit-mask-image: linear-gradient(90deg, transparent, #000 9%, #000 91%, transparent); mask-image: linear-gradient(90deg, transparent, #000 9%, #000 91%, transparent); }
  .collage-band .collage { display: grid; gap: var(--s-3); grid-template-columns: repeat(2, 1fr); grid-auto-rows: 9rem; grid-auto-flow: dense; padding: 0 var(--s-6); margin: 0 auto; max-width: 110rem; }
  @media (min-width: 40rem) { .collage-band .collage { grid-template-columns: repeat(4, 1fr); grid-auto-rows: 10rem; } }
  @media (min-width: 64rem) { .collage-band .collage { grid-template-columns: repeat(6, 1fr); grid-auto-rows: 11.5rem; padding-inline: 4rem; } }
  .collage__item { aspect-ratio: auto !important; height: 100%; overflow: hidden; box-shadow: 0 24px 40px -32px rgb(16 16 17 / 0.6); }
  .collage__item .photo__img { height: 100%; object-fit: cover; }
  .collage__item--big { grid-column: span 2; grid-row: span 2; border-radius: 32px; }
  .collage__item--circle { border-radius: 50%; aspect-ratio: 1 / 1 !important; height: auto; align-self: center; justify-self: center; width: min(100%, 11.5rem); }
  .collage__item--arch { grid-row: span 2; border-radius: 999px 999px 26px 26px; }
  .collage__item--drop { grid-row: span 2; border-radius: 26px 26px 999px 999px; }
  .collage__item--leaf { border-radius: 70px 18px 70px 18px; }
  .collage__item--wide { grid-column: span 2; border-radius: 999px; }
  .collage__item--soft { border-radius: 28px; }
  @media (prefers-reduced-motion: no-preference) {
    .collage__item { transition: transform 350ms var(--ease), box-shadow 350ms var(--ease); }
    .collage__item:hover { transform: translateY(-4px) rotate(-1deg); box-shadow: 0 30px 50px -30px rgb(16 16 17 / 0.7); }
  }
  .collage-band--ink .collage__item { box-shadow: none; }
  /* softer edges on the other galleries too */
  .filmstrip__item, .photo--frame, .what__photo, .team-card__photo { border-radius: 22px; }
  .what__photo { border-radius: 0; }

  /* Horizontal scrolling without the snap stutter */
  .filmstrip { scroll-snap-type: none; scroll-behavior: smooth; overscroll-behavior-x: contain;
    -webkit-mask-image: linear-gradient(90deg, transparent, #000 4%, #000 96%, transparent); mask-image: linear-gradient(90deg, transparent, #000 4%, #000 96%, transparent); }
  .filmstrip__item { scroll-snap-align: none; animation: none !important; }

  /* Sponsor logos aren't links, so no hover "lift" that suggests they are */
  .sponsor-wall__item:hover, .sponsor-wall--sms .sponsor-wall__item:hover { background: inherit; }
  .sponsor-wall__item:hover img { opacity: 0.88; scale: 1; }
  .sponsor-wall__item img { transition: none; }

  /* People: contact address */
  .person { grid-auto-rows: auto; }
  .person__photo, .person__mono { grid-row: 1 / span 4; }
  .person__email { grid-column: 2; font-size: 0.74rem; overflow-wrap: anywhere; color: var(--accent); text-decoration: none; margin-top: var(--s-1); }
  .person__email:hover { text-decoration: underline; }
  .sms-site .person__email { color: var(--sms-teal-deep); }

  /* About: blurple only in the hero now */
  .pillars .pillar { background: var(--white); border: 1px solid var(--line); border-top: 4px solid var(--accent); color: var(--text); }
  .pillars .pillar__num { color: var(--accent); opacity: 1; }
  .pillars .pillar a { color: var(--accent); }

  /* Timelines: hoverable nodes; chapters open into their own sub-timeline */
  .timeline__item::before { transition: scale 200ms var(--ease), background 200ms var(--ease), box-shadow 200ms var(--ease); }
  .timeline__item--more { cursor: default; }
  .timeline__item--more:hover::before, .timeline__item--more:focus-within::before { scale: 1.45; background: var(--accent); box-shadow: 0 0 0 6px rgb(12 99 230 / 0.15); }
  .timeline__item--more .timeline__photo { transition: transform 300ms var(--ease), box-shadow 300ms var(--ease); }
  .timeline__item--more:hover .timeline__photo { transform: translateY(-4px) rotate(-0.6deg); box-shadow: 0 30px 50px -30px rgb(16 16 17 / 0.6); }
  .timeline__photo-link { display: block; border-radius: 22px; }
  .timeline__open { display: inline-flex; align-items: center; gap: var(--s-3); margin-top: var(--s-4); padding: 0.6rem 1rem; border-radius: 999px; border: 2px solid var(--accent); color: var(--accent); font-weight: 700; text-decoration: none; transition: background 150ms, color 150ms; }
  .timeline__open::after { content: "→"; }
  .timeline__open:hover { background: var(--accent); color: var(--white); }
  .timeline__count { font-size: 0.72rem; opacity: 0.75; }
  .timeline__item--more { grid-template-rows: auto; }
  @media (min-width: 56rem) { .timeline__item:has(> .timeline__more) > .timeline__photo { grid-row: auto; } }

  .subtl { display: none; }
  .subtl:target, .subtl.is-open { display: block; }
  .tl.is-sub > .timeline { display: none; }
  .tl:has(.subtl:target):not(.is-sub) > .timeline { display: none; }
  .subtl__head { display: grid; gap: var(--s-5); padding: var(--s-5); border-radius: 24px; background: var(--ink); color: var(--white); margin-bottom: var(--s-7); }
  .subtl__back { justify-self: start; display: inline-flex; gap: var(--s-2); align-items: center; padding: 0.5rem 0.9rem; border-radius: 999px; background: rgb(255 255 255 / 0.1); color: var(--white); text-decoration: none; font-weight: 600; font-size: 0.9rem; }
  .subtl__back:hover { background: rgb(255 255 255 / 0.2); }
  .subtl__headline { display: grid; gap: var(--s-5); align-items: center; }
  @media (min-width: 48rem) { .subtl__headline { grid-template-columns: 18rem minmax(0, 1fr); } }
  .subtl__cover { border-radius: 16px; }
  .subtl__when { color: var(--accent-on-ink); font-weight: 700; font-size: 0.8rem; }
  .subtl__title { font-family: var(--font-display); text-transform: uppercase; font-size: var(--step-3); line-height: 0.95; margin: var(--s-2) 0 var(--s-3); }
  .subtl__lede { color: var(--on-ink-muted); max-width: 52ch; }
  .subtl__list { list-style: none; position: relative; display: grid; gap: var(--s-4); padding-left: var(--s-7); }
  .subtl__list::before { content: ""; position: absolute; left: 0.55rem; top: 0.5rem; bottom: 0.5rem; width: 2px; background: repeating-linear-gradient(var(--accent) 0 8px, transparent 8px 14px); }
  .subtl__item { position: relative; }
  .subtl__item::before { content: ""; position: absolute; left: calc(-1 * var(--s-7) + 0.55rem - 7px); top: 1.4rem; width: 16px; height: 16px; border-radius: 50%; background: var(--paper); border: 3px solid var(--accent); transition: scale 200ms var(--ease), background 200ms; }
  .subtl__item:hover::before, .subtl__item:focus-within::before { scale: 1.35; background: var(--accent); }
  .subtl__card { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: var(--s-4); align-items: center; padding: var(--s-3); padding-right: var(--s-5); border-radius: 18px; background: var(--white); border: 1px solid var(--line); text-decoration: none; color: inherit; transition: transform 200ms var(--ease), box-shadow 200ms var(--ease), border-color 200ms; }
  .subtl__card:hover, .subtl__card:focus-visible { transform: translateX(6px); border-color: var(--accent); box-shadow: 0 20px 40px -30px rgb(16 16 17 / 0.6); }
  .subtl__card--text { grid-template-columns: minmax(0, 1fr) auto; padding-left: var(--s-5); }
  .subtl__thumb { width: clamp(6rem, 20vw, 11rem); border-radius: 12px; }
  .subtl__text { display: grid; gap: var(--s-1); }
  .subtl__date { font-size: 0.72rem; color: var(--accent); font-weight: 700; letter-spacing: 0.04em; }
  .subtl__name { font-weight: 800; font-size: 1.05rem; line-height: 1.25; }
  .subtl__body { font-size: 0.9rem; color: var(--text-muted); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
  .subtl__more { display: grid; place-items: center; width: 2.25rem; height: 2.25rem; border-radius: 50%; border: 2px solid var(--line); font-weight: 700; color: var(--accent); }
  .subtl__card:hover .subtl__more { background: var(--accent); border-color: var(--accent); color: var(--white); }
  .subtl__next { margin-top: var(--s-6); }
  @media (prefers-reduced-motion: no-preference) {
    .subtl.is-open .subtl__item, .subtl:target .subtl__item { animation: sub-in 0.45s var(--ease) both; animation-delay: calc(var(--i) * 60ms + 120ms); }
    @keyframes sub-in { from { opacity: 0; translate: -12px 0; } }
  }
  ::view-transition-group(tl-chapter) { animation-duration: 0.5s; animation-timing-function: cubic-bezier(0.2, 0.7, 0.2, 1); }
  ::view-transition-old(tl-chapter), ::view-transition-new(tl-chapter) { height: 100%; object-fit: cover; }
  @media (prefers-reduced-motion: reduce) { ::view-transition-group(*), ::view-transition-old(*), ::view-transition-new(*) { animation: none !important; } }

  .moment-sheet__date { font-size: 0.75rem; color: var(--accent); font-weight: 700; margin-bottom: var(--s-1); }
  .moment-sheet__body { font-size: 1.05rem; line-height: 1.6; }
  .moment-sheet .sheet__photo .photo__caption { position: static; padding: var(--s-2) 0 0; background: none; color: var(--text-muted); font-style: italic; font-size: 0.85rem; }

  /* SMS flavour */
  .sms-site .timeline__open { border-color: var(--sms-teal-deep); color: var(--sms-teal-deep); }
  .sms-site .timeline__open:hover { background: var(--sms-teal-deep); color: var(--white); }
  .sms-site .timeline__item--more:hover::before { background: var(--sms-teal-deep); box-shadow: 0 0 0 6px rgb(44 192 182 / 0.2); }
  .sms-site .subtl__head { background: var(--sms-ink); }
  .sms-site .subtl__when { color: var(--sms-teal); }
  .sms-site .subtl__list::before { background: repeating-linear-gradient(var(--sms-teal-deep) 0 8px, transparent 8px 14px); }
  .sms-site .subtl__item::before { border-color: var(--sms-teal-deep); }
  .sms-site .subtl__item:hover::before { background: var(--sms-teal-deep); }
  .sms-site .subtl__card:hover { border-color: var(--sms-teal-deep); }
  .sms-site .subtl__date, .sms-site .subtl__more, .sms-site .moment-sheet__date { color: var(--sms-teal-deep); }
  .sms-site .subtl__card:hover .subtl__more { background: var(--sms-teal-deep); border-color: var(--sms-teal-deep); color: var(--white); }
}

/* Unlayered on purpose: on the home page the header must win over the layered header-solid animation. */
@supports (animation-timeline: scroll()) {
  @media (prefers-reduced-motion: no-preference) {
    body:has(.landing) .site-header { position: fixed; inset: 0 0 auto 0; animation: header-arrive linear both; animation-timeline: scroll(root); animation-range: 38svh 62svh; }
    @keyframes header-arrive { from { opacity: 0; translate: 0 -100%; visibility: hidden; } to { opacity: 1; translate: 0 0; visibility: visible; } }
  }
}
@layer components { .split__head > .btn { margin-top: var(--s-5); } .subtl__next { display: flex; flex-wrap: wrap; gap: var(--s-3); align-items: center; } .subtl__next .mono { font-size: 0.75rem; color: var(--text-muted); } }

/* ---------- round 7 ---------- */
@layer components {
  /* Phone menu: a full-height sheet. The header's backdrop-filter (and, on home, its slide-in
     translate) make the header the containing block for position: fixed, so `inset` used to
     clip the sheet to the header's own height. Size it from the viewport instead. */
  @media (max-width: 47.99rem) {
    .nav__sheet { position: fixed; inset: auto; top: var(--header-h, 4rem); left: 0; width: 100vw; height: calc(100dvh - var(--header-h, 4rem));
      overflow-y: auto; overscroll-behavior: contain; padding: var(--s-3) var(--gutter) calc(var(--s-7) + env(safe-area-inset-bottom)); border-top: 1px solid var(--line-on-ink); }
    .nav--narrow[open] .nav__sheet { animation: sheet-in 220ms var(--ease); }
    @keyframes sheet-in { from { opacity: 0; translate: 0 -0.75rem; } }
    .nav__sheet .nav__link { min-height: 3.5rem; padding: var(--s-3) 0; font-size: var(--step-1); }
    .nav__sheet .btn { min-height: 3.25rem; font-size: 1.05rem; }
    .nav__sheet .sms-back { margin: var(--s-5) 0 0; min-height: 3rem; justify-content: center; font-size: 1rem; }
    .nav__more { list-style: none; margin-top: var(--s-5); display: grid; }
    .nav__more a { display: flex; align-items: center; gap: var(--s-2); min-height: 3rem; color: var(--on-ink-muted); text-decoration: none; font-size: 1rem; border-bottom: 1px solid var(--line-on-ink); }
    .nav__more a:hover { color: var(--accent-on-ink); }
    .site-header:has(.nav--narrow[open]), .sms-header:has(.nav--narrow[open]) { backdrop-filter: none; }
    .site-header:has(.nav--narrow[open]) { background: var(--ink); }
    .sms-header:has(.nav--narrow[open]) { background: var(--sms-ink); }
    html:has(.nav--narrow[open]) { overflow: hidden; }
  }
  .sms-site { --header-h: 4.25rem; }
  .nav__toggle-close { display: none; }
  .nav--narrow[open] .nav__toggle-open { display: none; }
  .nav--narrow[open] .nav__toggle-close { display: inline; }
}
@layer components {
  /* Footer: Club then More, stacked in one column beside the about block. */
  .site-footer__grid { grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); }
  @media (max-width: 40rem) { .site-footer__grid { grid-template-columns: 1fr; } }
  .site-footer__about { grid-column: auto; }
  .site-footer__col { display: grid; gap: var(--s-6); align-content: start; }
  .site-footer__col .site-footer__links ul { gap: 0; }
}
@layer pages {
  /* Collages are horizontal scroll bands now: more photos, smooth native scrolling (no snap),
     fades on both sides. */
  .collage-band { overflow: visible; -webkit-mask-image: none; mask-image: none; padding-block: var(--s-5) var(--s-7); }
  .collage-band__scroller { overflow-x: auto; overflow-y: hidden; overscroll-behavior-x: contain; scrollbar-width: none; cursor: grab; outline-offset: -4px;
    -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); }
  .collage-band__scroller::-webkit-scrollbar { display: none; }
  .collage-band__scroller.is-dragging { cursor: grabbing; user-select: none; }
  .collage-band__scroller.is-dragging .photo__img { pointer-events: none; }
  .collage-band .collage { display: grid; grid-auto-flow: column dense; grid-template-columns: none; grid-template-rows: repeat(2, 8.5rem); grid-auto-columns: 8.5rem;
    gap: var(--s-3); width: max-content; max-width: none; margin: 0; padding: var(--s-4) 14vw; }
  @media (min-width: 40rem) { .collage-band .collage { grid-template-rows: repeat(3, 9.5rem); grid-auto-columns: 9.5rem; } }
  @media (min-width: 64rem) { .collage-band .collage { grid-template-rows: repeat(3, 11rem); grid-auto-columns: 11rem; padding-inline: 10vw; } }
  .collage-band .collage__item--circle { width: 100%; }
  .collage-band__hint { text-align: center; margin-top: var(--s-3); font-size: 0.72rem; letter-spacing: 0.18em; text-transform: uppercase; color: var(--text-muted); }
  .collage-band--ink .collage-band__hint, .section--ink .collage-band__hint { color: var(--on-ink-muted); }
  @media (prefers-reduced-motion: no-preference) {
    .collage-band__hint span { display: inline-block; animation: nudge 1.8s var(--ease) infinite; }
    @keyframes nudge { 50% { translate: 0.4rem 0; } }
  }
  @supports (animation-timeline: view()) {
    @media (prefers-reduced-motion: no-preference) {
      /* the strip drifts sideways while the page scrolls past it */
      .collage-band .collage { animation: collage-drift linear both; animation-timeline: view(); animation-range: cover 0% cover 100%; }
      @keyframes collage-drift { from { translate: 8vw 0; } to { translate: -8vw 0; } }
      /* photos grow in as they slide into the band */
      .collage-band .collage__item { animation: collage-in linear both; animation-timeline: view(inline); animation-range: entry 0% entry 90%; }
      @keyframes collage-in { from { opacity: 0.25; scale: 0.82; } to { opacity: 1; scale: 1; } }
    }
  }
}
@layer pages {
  /* Landing lockup: the AVI dog + "AVI Robotics", shaped like the nav brand so that scrolling
     shrinks it into the nav's brand slot. --u is the size of "AVI". */
  .landing { --u: clamp(4.25rem, 1.5rem + 15vw, 12rem); --lock-end-scale: 0.3; }
  @media (min-width: 40rem) { .landing { --lock-end-scale: 0.22; } }
  @media (min-width: 64rem) { .landing { --lock-end-scale: 0.16; } }
  .landing__mark { display: flex; align-items: center; gap: calc(var(--u) * 0.14); font-size: var(--u); line-height: 1; transform-origin: 0 50%; }
  .landing__dog { height: calc(var(--u) * 1.3); width: auto; filter: drop-shadow(0 18px 40px rgb(0 0 0 / 0.5)); }
  .landing__words { display: grid; justify-items: start; }
  .landing__word { font-size: var(--u); line-height: 0.8; }
  .landing__robotics { font-family: var(--font-mono); font-weight: 600; font-size: calc(var(--u) * 0.2); letter-spacing: 0.2em; line-height: 1; margin-top: calc(var(--u) * 0.12); color: rgb(247 249 249 / 0.92); text-shadow: 0 6px 24px rgb(0 0 0 / 0.5); }
  .landing__sub { top: calc(30% + var(--u) * 0.65 + clamp(1.25rem, 3vw, 2.5rem)); }
  @supports (animation-timeline: scroll()) {
    @media (prefers-reduced-motion: no-preference) {
      /* left edge → the nav brand's left edge, centre → the header's middle, shrink to brand size */
      @keyframes mark-to-nav {
        75% { opacity: 1; }
        to { translate: calc(max(var(--gutter), (100vw - var(--maxw)) / 2) - 50vw) calc(-50% - 30svh + 2rem); scale: var(--lock-end-scale); opacity: 0; }
      }
      /* the dog leads: it turns a little as it flies */
      .landing__dog { animation: dog-tilt linear both; animation-timeline: scroll(root); animation-range: 0 62svh; }
      @keyframes dog-tilt { 40% { rotate: -8deg; } to { rotate: 0deg; } }
      /* the nav's own brand fades in as the lockup lands on it */
      body:has(.landing) .site-header .brand { animation: brand-land linear both; animation-timeline: scroll(root); animation-range: 50svh 64svh; }
      @keyframes brand-land { from { opacity: 0; } to { opacity: 1; } }
    }
  }
}
@layer pages {
  /* More scroll-driven motion (round 7). Transform, opacity and clip-path only, so it stays
     smooth on phones. Everything is off for reduced motion and in browsers without
     scroll timelines (they just see the finished state). */
  @supports (animation-timeline: view()) {
    @media (prefers-reduced-motion: no-preference) {
      /* Headings wipe in from left to right, like the scramble. */
      .section__head .h2, .feature__copy .h2, .outreach__copy .h2, .projects-band__copy .h2, .intro__copy .h2, .split__head .h2 {
        animation: wipe-in linear both; animation-timeline: view(); animation-range: entry 20% cover 30%; }
      @keyframes wipe-in { from { clip-path: inset(-0.2em 100% -0.2em 0); translate: -0.6rem 0; } to { clip-path: inset(-0.2em -0.2em -0.2em 0); translate: 0 0; } }
      /* Big feature photos open up from a smaller, rounder frame. */
      .feature__media .photo { animation: open-up linear both; animation-timeline: view(); animation-range: entry 0% cover 45%; }
      @keyframes open-up { from { scale: 0.86; border-radius: 48px; opacity: 0.4; } to { scale: 1; opacity: 1; } }
      /* "What we do" cards rise in a stagger. */
      .what__card:nth-child(2) { animation-range: entry 10% entry 100%; }
      .what__card:nth-child(3) { animation-range: entry 20% cover 30%; }
      .what__card:nth-child(4) { animation-range: entry 5% entry 90%; }
      .what__photo .photo__img, .team-card__photo .photo__img { animation: inner-pan linear both; animation-timeline: view(); scale: 1.12; }
      @keyframes inner-pan { from { translate: 0 -5%; } to { translate: 0 5%; } }
      /* The news card swings into its tilt. */
      .news { animation: news-swing linear both; animation-timeline: view(); animation-range: entry 0% cover 40%; }
      @keyframes news-swing { from { rotate: 5deg; translate: 0 3rem; opacity: 0.3; } to { rotate: -1.2deg; translate: 0 0; opacity: 1; } }
      /* Projects band photos come together from both sides. */
      .projects-band__a { animation: from-left linear both; animation-timeline: view(); animation-range: entry 0% cover 40%; }
      .projects-band__b, .projects-band__c { animation: from-right linear both; animation-timeline: view(); animation-range: entry 0% cover 40%; }
      @keyframes from-left { from { translate: -12% 0; rotate: -3deg; opacity: 0.3; } }
      @keyframes from-right { from { translate: 14% 0; rotate: 4deg; opacity: 0.3; } }
      /* Sponsor logos pop in. */
      .sponsor-wall__item { animation: pop-in linear both; animation-timeline: view(); animation-range: entry 0% entry 100%; }
      @keyframes pop-in { from { scale: 0.85; opacity: 0; } }
      /* Page heroes (every inner page): the title drifts up and fades as you scroll away. */
      .page-hero__inner, .sms-page-hero .wrap { animation: hero-away linear both; animation-timeline: scroll(root); animation-range: 0 60svh; }
      @keyframes hero-away { to { translate: 0 -3rem; opacity: 0.2; } }
      /* Filmstrip photos tilt into place as they slide in. */
      .filmstrip__item { transform-origin: 50% 100%; }
    }
  }
}
@layer pages {
  @media (max-width: 47.99rem) { .nav__sheet .sms-back { margin: var(--s-5) 0 0; min-height: 3rem; padding-inline: 1.25rem; font-size: 1rem; } }
}