/* ==========================================================================
   Double Helix Creative — main stylesheet
   Layers are declared up front so specificity never fights source order.
   ========================================================================== */

@layer reset, fonts, tokens, base, layout, components, motion, utilities;

/* ---------- Reset ---------- */
@layer reset {
  *, *::before, *::after { box-sizing: border-box; }
  * { margin: 0; }
  html { -webkit-text-size-adjust: none; text-size-adjust: none; }
  body { min-block-size: 100svh; }
  img, svg, canvas, picture { display: block; max-inline-size: 100%; }
  input, button, textarea, select { font: inherit; color: inherit; }
  ul[role="list"], ol[role="list"] { list-style: none; padding: 0; }
  h1, h2, h3, h4 { text-wrap: balance; }
  p { text-wrap: pretty; }
}

/* ---------- Fonts (self-hosted variable, latin subset) ---------- */
@layer fonts {
  @font-face {
    font-family: "Fraunces";
    src: url("../fonts/fraunces-var.woff2") format("woff2");
    font-weight: 100 900;
    font-style: normal;
    font-display: swap;
  }
  @font-face {
    font-family: "Fraunces";
    src: url("../fonts/fraunces-italic-var.woff2") format("woff2");
    font-weight: 100 900;
    font-style: italic;
    font-display: swap;
  }
  @font-face {
    font-family: "Inter";
    src: url("../fonts/inter-var.woff2") format("woff2");
    font-weight: 100 900;
    font-style: normal;
    font-display: swap;
  }
  @font-face {
    font-family: "Bank Gothic";
    src: url("../fonts/bank-gothic-medium.woff2") format("woff2");
    font-weight: 500;
    font-style: normal;
    font-display: swap;
  }
  @font-face {
    font-family: "Bank Gothic";
    src: url("../fonts/bank-gothic-light.woff2") format("woff2");
    font-weight: 300;
    font-style: normal;
    font-display: swap;
  }
  /* Metric-matched fallbacks minimize layout shift while web fonts load. */
  @font-face {
    font-family: "Inter Fallback";
    src: local("Arial"), local("Helvetica Neue"), local("Helvetica");
    size-adjust: 107.1%;
    ascent-override: 90.4%;
    descent-override: 22.5%;
    line-gap-override: 0%;
  }
  @font-face {
    font-family: "Fraunces Fallback";
    src: local("Georgia"), local("Times New Roman");
    size-adjust: 104%;
    ascent-override: 94%;
    descent-override: 24.5%;
    line-gap-override: 0%;
  }
}

/* ---------- Design tokens ---------- */
@layer tokens {
  @property --header-fill {
    syntax: "<number>";
    inherits: true;
    initial-value: 0;
  }

  :root {
    color-scheme: light dark;

    /* Neutrals carry the design; the accent is used sparingly. */
    --bg:       light-dark(#f6f5f3, #0a0a0c);
    --surface:  light-dark(#ffffff, #111115);
    --surface-2:light-dark(#efeeeb, #17171c);
    --ink:      light-dark(#0b0b0f, #f3f3f5);
    --ink-2:    light-dark(#4b4b53, #a3a3ad);
    --ink-3:    light-dark(#86868f, #6c6c76);
    --line:     light-dark(rgb(11 11 15 / 0.1), rgb(243 243 245 / 0.1));
    --line-strong: light-dark(rgb(11 11 15 / 0.22), rgb(243 243 245 / 0.22));

    /* Brand accent, taken from the logo: purple → fuchsia. Dark mode lifts the purple
       so it keeps at least 3:1 contrast on near-black. */
    --accent-purple:  light-dark(#662c91, #9b4dca);
    --accent-fuchsia: #ec008c;
    --accent-grad: linear-gradient(100deg, var(--accent-purple), var(--accent-fuchsia));
    --helix-from: var(--accent-purple);
    --helix-to: var(--accent-fuchsia);

    --font-display: "Fraunces", "Fraunces Fallback", Georgia, serif;
    --font-body: "Inter", "Inter Fallback", system-ui, sans-serif;
    --font-tech: "Bank Gothic", "Eurostile", "Arial", sans-serif;

    --step--1: clamp(0.8rem, 0.78rem + 0.1vw, 0.875rem);
    --step-0:  clamp(1rem, 0.96rem + 0.2vw, 1.125rem);
    --step-1:  clamp(1.2rem, 1.1rem + 0.5vw, 1.5rem);
    --step-2:  clamp(1.5rem, 1.3rem + 1vw, 2.25rem);
    --step-3:  clamp(2rem, 1.5rem + 2.4vw, 3.5rem);
    --step-4:  clamp(2.5rem, 1.6rem + 4.5vw, 5.5rem);
    --step-5:  clamp(3.1rem, 1rem + 8vw, 9rem);

    --gutter: clamp(1.25rem, 4vw, 3.5rem);
    --max: 90rem;
    --radius: 1.25rem;
    --header-h: 4.5rem;

    --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
    --ease-in-out: cubic-bezier(0.7, 0, 0.2, 1);
  }

  /* Manual override from the theme toggle. */
  :root[data-theme="light"] { color-scheme: light; }
  :root[data-theme="dark"]  { color-scheme: dark; }
}

/* ---------- Base ---------- */
@layer base {
  html {
    background: var(--bg);
    color: var(--ink);
    scrollbar-color: var(--ink-3) transparent;
    scroll-padding-top: var(--header-h);
    hanging-punctuation: first last;
  }

  body {
    font-family: var(--font-body);
    font-size: var(--step-0);
    line-height: 1.6;
    font-optical-sizing: auto;
    -webkit-font-smoothing: antialiased;
    overflow-x: clip;

    /* Fine film grain gives flat surfaces a printed, tactile quality. */
    &::after {
      content: "";
      position: fixed;
      inset: 0;
      z-index: 100;
      pointer-events: none;
      opacity: 0.05;
      background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
    }
  }

  a {
    color: inherit;
    text-decoration-thickness: 1px;
    text-underline-offset: 0.2em;
  }

  :focus-visible {
    outline: 2px solid var(--accent-fuchsia);
    outline-offset: 3px;
    border-radius: 4px;
  }

  ::selection {
    background: color-mix(in oklch, var(--accent-fuchsia) 28%, transparent);
    color: var(--ink);
  }

  h1, h2, h3 {
    font-family: var(--font-display);
    font-weight: 380;
    line-height: 1.05;
    letter-spacing: -0.02em;
  }
}

/* ---------- Layout ---------- */
@layer layout {
  .section {
    inline-size: min(100%, var(--max));
    margin-inline: auto;
    padding-inline: var(--gutter);
    padding-block: clamp(5rem, 12vw, 10rem);
    scroll-margin-top: 1rem;
  }

  .section__head {
    display: grid;
    grid-template-columns: auto 1fr;
    align-items: baseline;
    column-gap: 1.25rem;
    margin-block-end: clamp(2.5rem, 6vw, 4.5rem);
  }

  .section__index {
    font-family: var(--font-tech);
    font-size: var(--step--1);
    color: var(--ink-3);
    display: flex;
    align-items: center;
    gap: 0.75rem;

    &::after {
      content: "";
      inline-size: 2.5rem;
      block-size: 1px;
      background: var(--line-strong);
    }
  }

  .section__title {
    font-size: var(--step-4);
    text-box: trim-both cap alphabetic;
  }

  .section__kicker {
    grid-column: 2;
    margin-block-start: 1.25rem;
    max-inline-size: 42ch;
    color: var(--ink-2);
    font-size: var(--step-1);
    line-height: 1.45;
  }
}

/* ---------- Components ---------- */
@layer components {

  /* Skip link */
  .skip-link {
    position: fixed;
    inset-block-start: 0.75rem;
    inset-inline-start: 0.75rem;
    z-index: 200;
    padding: 0.6rem 1rem;
    border-radius: 999px;
    background: var(--ink);
    color: var(--bg);
    text-decoration: none;
    translate: 0 -200%;
    transition: translate 0.3s var(--ease-out);

    &:focus-visible { translate: 0 0; }
  }

  /* Scroll progress (driven by scroll timeline in the motion layer) */
  .scroll-progress {
    position: fixed;
    inset: 0 0 auto;
    block-size: 2px;
    z-index: 60;
    background: var(--accent-grad);
    transform-origin: 0 50%;
    scale: 0 1;
  }

  /* Logo with light/dark variants */
  .logo {
    display: inline-grid;
    > .logo__img { grid-area: 1 / 1; inline-size: 100%; block-size: auto; }
  }
  .logo__img--dark { display: none; }
  :root[data-theme="dark"] {
    .logo__img--light { display: none; }
    .logo__img--dark { display: block; }
  }
  @media (prefers-color-scheme: dark) {
    :root:not([data-theme]) {
      .logo__img--light { display: none; }
      .logo__img--dark { display: block; }
    }
  }
  /* The logo lockup is ~2.5:1, so sizes are set by width. */
  .logo--sm { inline-size: clamp(6.25rem, 5rem + 2vw, 7.75rem); }
  .logo--hero { inline-size: clamp(14rem, 8rem + 16vw, 24rem); }
  .logo--footer { inline-size: min(100%, 38rem); }

  /* Header */
  .site-header {
    position: fixed;
    inset: 0 0 auto;
    z-index: 50;
    block-size: var(--header-h);
    padding-inline: var(--gutter);
    display: flex;
    align-items: center;
    gap: 1.5rem;
    background: color-mix(in oklch, var(--bg) calc(var(--header-fill) * 78%), transparent);
    border-block-end: 1px solid color-mix(in oklch, var(--line) calc(var(--header-fill) * 100%), transparent);
    backdrop-filter: blur(calc(var(--header-fill) * 18px)) saturate(1.4);
  }

  .brand {
    display: flex;
    align-items: center;
    text-decoration: none;
    margin-inline-end: auto;
  }

  .site-nav {
    ul {
      display: flex;
      gap: clamp(1rem, 2.5vw, 2.25rem);
      list-style: none;
      padding: 0;
    }

    a {
      position: relative;
      font-family: var(--font-tech);
      font-size: 0.78rem;
      font-weight: 500;
      letter-spacing: 0.06em;
      text-transform: uppercase;
      color: var(--ink-2);
      text-decoration: none;
      transition: color 0.25s;

      &::after {
        content: "";
        position: absolute;
        inset: auto 0 -0.35rem;
        block-size: 1px;
        background: var(--accent-grad);
        scale: 0 1;
        transform-origin: 100% 50%;
        transition: scale 0.45s var(--ease-out);
      }

      &:hover, &:focus-visible {
        color: var(--ink);
        &::after { scale: 1 1; transform-origin: 0 50%; }
      }
    }

    @media (width < 48rem) { display: none; }
  }

  .theme-toggle {
    display: grid;
    place-items: center;
    inline-size: 2.75rem;
    aspect-ratio: 1;
    border: 1px solid var(--line-strong);
    border-radius: 50%;
    background: transparent;
    color: var(--ink);
    cursor: pointer;
    transition: border-color 0.3s, background-color 0.3s;

    &:hover { border-color: var(--ink-2); background: var(--surface-2); }

    svg { overflow: visible; }

    .theme-toggle__mask { transition: cx 0.5s var(--ease-out), cy 0.5s var(--ease-out); }
    .theme-toggle__core { transition: r 0.5s var(--ease-out); }
    .theme-toggle__rays {
      transform-origin: center;
      transition: opacity 0.35s, rotate 0.5s var(--ease-out), scale 0.5s var(--ease-out);
    }

    :root[data-theme="dark"] & {
      .theme-toggle__mask { cx: 17px; cy: 7px; }
      .theme-toggle__core { r: 8px; }
      .theme-toggle__rays { opacity: 0; rotate: -45deg; scale: 0.5; }
    }

    :root:not(.js) & { display: none; }
  }

  /* Hero */
  .hero {
    position: relative;
    isolation: isolate;
    min-block-size: 100svh;
    display: grid;
    align-items: center;
    padding-inline: var(--gutter);
    padding-block: calc(var(--header-h) + 3rem) 7rem;
    overflow: clip;

    /* Editorial column rules, fading out from the top left. */
    &::before {
      content: "";
      position: absolute;
      inset: 0;
      z-index: -2;
      background-image: repeating-linear-gradient(90deg, var(--line) 0 1px, transparent 1px calc(100% / 6));
      mask-image: radial-gradient(ellipse 80% 70% at 20% 40%, #000 20%, transparent 75%);
    }

    /* Faint glow that follows the pointer. */
    &::after {
      content: "";
      position: absolute;
      inset: 0;
      z-index: -1;
      pointer-events: none;
      background: radial-gradient(
        40rem circle at var(--px, 70%) var(--py, 40%),
        light-dark(
          color-mix(in oklch, var(--accent-purple) 7%, transparent),
          color-mix(in oklch, var(--accent-purple) 14%, transparent)
        ),
        transparent 70%
      );
    }
  }

  .hero__helix {
    position: absolute;
    inset-block: 0;
    inset-inline-end: 0;
    inline-size: min(52%, 56rem);
    z-index: -1;
    display: block;

    canvas { inline-size: 100%; block-size: 100%; }

    @media (width < 60rem) {
      inline-size: 100%;
      opacity: 0.4;
    }
  }

  .hero__content {
    inline-size: min(100%, var(--max));
    margin-inline: auto;
    display: grid;
    justify-items: start;
    gap: 1.75rem;
  }

  .eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 0.75rem;
    font-family: var(--font-tech);
    font-size: var(--step--1);
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--ink-2);
  }

  .eyebrow__dot {
    inline-size: 0.5rem;
    aspect-ratio: 1;
    border-radius: 50%;
    background: var(--accent-grad);
    box-shadow: 0 0 0 0 color-mix(in oklch, var(--accent-fuchsia) 50%, transparent);
  }

  /* The tagline pairs both sides of the brand: a flowing serif for the creative,
     Bank Gothic capitals (the logo's face) for the analytical. */
  .hero__title {
    display: grid;
    justify-items: start;
    row-gap: 0.25em;
    font-weight: 300;
    letter-spacing: normal;
  }

  .hero__flow {
    display: grid;
    justify-items: start;
    font-size: var(--step-5);
    font-style: italic;
    font-weight: 300;
    line-height: 0.95;
    letter-spacing: -0.035em;
  }

  .hero__struct {
    font-family: var(--font-tech);
    font-size: clamp(1.15rem, 0.55rem + 2.6vw, 3.1rem);
    font-weight: 500;
    line-height: 1;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    padding-inline-start: 0.12em;
  }

  .word { display: inline-block; }

  .word--accent {
    /* Padding keeps italic overhang and descenders inside the clipped background. */
    padding: 0.06em 0.1em 0.14em 0.02em;
    margin: -0.06em -0.1em -0.14em -0.02em;
    background: linear-gradient(100deg, var(--accent-purple) 0%, var(--accent-fuchsia) 45%, var(--accent-purple) 90%) 0 0 / 220% 100%;
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
  }

  .word--amp { color: var(--ink-3); }

  .hero__lede {
    font-size: var(--step-1);
    line-height: 1.5;
    color: var(--ink-2);
    max-inline-size: 36ch;
  }

  .scroll-cue {
    position: absolute;
    inset-block-end: 2rem;
    inset-inline-start: var(--gutter);
    display: flex;
    align-items: center;
    gap: 0.875rem;
    font-family: var(--font-tech);
    font-size: 0.7rem;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--ink-3);
    text-decoration: none;
  }

  .scroll-cue__line {
    position: relative;
    inline-size: 1px;
    block-size: 3.5rem;
    background: var(--line-strong);
    overflow: hidden;

    &::after {
      content: "";
      position: absolute;
      inset-inline: 0;
      block-size: 40%;
      background: var(--accent-grad);
      translate: 0 -100%;
    }
  }

  /* Marquee */
  .marquee {
    border-block: 1px solid var(--line);
    padding-block: clamp(1rem, 2.5vw, 1.75rem);
    overflow: clip;
    mask-image: linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent);
  }

  .marquee__track {
    display: flex;
    inline-size: max-content;
  }

  .marquee__group {
    display: flex;
    list-style: none;
    padding: 0;

    li {
      display: flex;
      align-items: center;
      font-family: var(--font-display);
      font-size: var(--step-3);
      font-weight: 300;
      font-style: italic;
      line-height: 1.1;
      letter-spacing: -0.02em;
      white-space: nowrap;

      /* Alternate the two voices of the brand: flowing serif, then outlined Bank Gothic. */
      &:nth-child(even) {
        font-family: var(--font-tech);
        font-size: calc(var(--step-3) * 0.62);
        font-style: normal;
        font-weight: 500;
        letter-spacing: 0.04em;
        text-transform: uppercase;
        color: transparent;
        -webkit-text-stroke: 1px var(--ink-3);
      }

      &::after {
        content: "✦";
        font-style: normal;
        font-size: 0.4em;
        color: var(--ink-3);
        -webkit-text-stroke: 0;
        margin-inline: clamp(1.5rem, 4vw, 3rem);
      }

      &:nth-child(even)::after { font-size: 0.65em; }
    }
  }

  /* About */
  .about {
    @media (width >= 64rem) {
      display: grid;
      grid-template-columns: minmax(14rem, 1fr) 3fr;
      column-gap: clamp(2rem, 5vw, 5rem);
      align-items: start;

      .section__head {
        position: sticky;
        inset-block-start: calc(var(--header-h) + 2rem);
        grid-template-columns: 1fr;
        row-gap: 1.25rem;
      }

      .section__title { font-size: var(--step-3); }
    }
  }

  .statement {
    view-timeline: --statement block;
    font-family: var(--font-display);
    font-size: clamp(1.6rem, 1rem + 2.2vw, 3rem);
    font-weight: 340;
    line-height: 1.2;
    letter-spacing: -0.02em;
    max-inline-size: 28ch;
  }

  .facts {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(12rem, 1fr));
    gap: 2rem;
    margin-block-start: clamp(3rem, 8vw, 6rem);
  }

  .fact {
    padding-block-start: 1.25rem;
    border-block-start: 1px solid var(--line-strong);

    dt {
      font-family: var(--font-tech);
      font-size: var(--step--1);
      letter-spacing: 0.08em;
      text-transform: uppercase;
      color: var(--ink-3);
      margin-block-end: 0.75rem;
    }

    dd {
      font-family: var(--font-display);
      font-size: var(--step-3);
      font-weight: 330;
      line-height: 1;
      letter-spacing: -0.03em;
    }

    .amp { font-style: italic; color: var(--ink-3); }
  }

  /* Capabilities: bento grid driven by a container query */
  .capabilities { container: caps / inline-size; }

  .performance { padding-block-end: clamp(3rem, 6vw, 5rem); }

  .bento {
    display: grid;
    gap: 1rem;
    grid-template-columns: 1fr;
    grid-auto-flow: dense;

    @container caps (width >= 38rem) {
      grid-template-columns: repeat(2, 1fr);
      .card--feature, .card--wide { grid-column: span 2; }
    }
    @container caps (width >= 58rem) {
      grid-template-columns: repeat(3, 1fr);
      .card--feature { grid-row: span 2; }
    }
    @container caps (width >= 76rem) {
      grid-template-columns: repeat(4, 1fr);
    }
  }

  .card {
    --mx: 50%;
    --my: 50%;
    container-type: inline-size;
    position: relative;
    isolation: isolate;
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    min-block-size: 15rem;
    padding: clamp(1.5rem, 2.5vw, 2.25rem);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    background: var(--surface);
    transition: border-color 0.4s, translate 0.5s var(--ease-out), opacity 0.4s;

    /* Accent border that tracks the pointer. */
    &::before {
      content: "";
      position: absolute;
      inset: -1px;
      z-index: 1;
      padding: 1px;
      border-radius: inherit;
      background: radial-gradient(22rem circle at var(--mx) var(--my), var(--accent-fuchsia), var(--accent-purple) 35%, transparent 65%);
      mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
      mask-composite: exclude;
      opacity: 0;
      transition: opacity 0.4s;
      pointer-events: none;
    }

    /* Soft inner light that tracks the pointer. */
    &::after {
      content: "";
      position: absolute;
      inset: 0;
      z-index: -1;
      background: radial-gradient(28rem circle at var(--mx) var(--my), color-mix(in oklch, var(--ink) 5%, transparent), transparent 60%);
      opacity: 0;
      transition: opacity 0.4s;
    }

    @media (hover: hover) {
      &:hover {
        border-color: transparent;
        &::before, &::after { opacity: 1; }
      }
    }
  }

  /* Gently recede the other cards while one is being explored. */
  @media (hover: hover) {
    .bento:has(.card:hover) .card:not(:hover) { opacity: 0.55; }
  }

  .card__num {
    font-family: var(--font-tech);
    font-size: var(--step--1);
    color: var(--ink-3);
    margin-block-end: auto;
    padding-block-end: 2rem;
  }

  .card__title {
    font-size: clamp(1.35rem, 6cqi, 2rem);
    font-weight: 400;
    line-height: 1.1;
  }

  .card__text {
    color: var(--ink-2);
    font-size: 0.95rem;
    line-height: 1.55;
    max-inline-size: 46ch;
  }

  .card--feature {
    background:
      radial-gradient(120% 90% at 100% 0%, var(--surface-2), transparent 60%),
      var(--surface);

    .card__title {
      font-size: clamp(2rem, 8cqi, 3.5rem);
      font-weight: 330;
      letter-spacing: -0.03em;
    }

    .card__text { font-size: var(--step-0); }
  }

  .card__art {
    position: absolute;
    inset-block-start: clamp(1.5rem, 2.5vw, 2.25rem);
    inset-inline-end: clamp(1.5rem, 2.5vw, 2.25rem);
    inline-size: min(45%, 18rem);
    fill: none;
    stroke-width: 1.5;
    stroke-linecap: round;
    mask-image: linear-gradient(90deg, transparent, #000 20%, #000 80%, transparent);

    path:first-child { stroke: var(--accent-fuchsia); }
    path:last-child { stroke: var(--ink-3); }
  }

  /* Past performance: rows aligned across records with subgrid */
  .records {
    display: grid;
    grid-template-columns: minmax(14rem, 1.2fr) minmax(0, 1.6fr) minmax(0, 1fr) auto;
    border-block-start: 1px solid var(--line-strong);
  }

  .record {
    position: relative;
    display: grid;
    grid-column: 1 / -1;
    grid-template-columns: subgrid;
    grid-template-rows: auto auto;
    grid-template-areas:
      "role    clients scope period"
      "prime   clients scope period";
    column-gap: clamp(1.25rem, 3vw, 2.5rem);
    row-gap: 0.35rem;
    align-items: start;
    padding-block: clamp(1.5rem, 3vw, 2.25rem);
    border-block-end: 1px solid var(--line);

    &::after {
      content: "";
      position: absolute;
      inset: auto 0 -1px;
      block-size: 1px;
      background: var(--accent-grad);
      scale: 0 1;
      transform-origin: 0 50%;
      transition: scale 0.7s var(--ease-out);
    }

    &:hover::after { scale: 1 1; }

    @media (width < 56rem) {
      grid-template-columns: 1fr auto;
      grid-template-areas:
        "role   period"
        "prime  prime"
        "clients clients"
        "scope  scope";
      row-gap: 0.75rem;
    }
  }

  @media (width < 56rem) {
    .records { display: block; }
  }

  .record__role {
    grid-area: role;
    font-family: var(--font-tech);
    font-size: 0.72rem;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--ink-3);
  }

  .record__prime {
    grid-area: prime;
    font-size: var(--step-2);
    font-weight: 400;
  }

  .record__clients {
    grid-area: clients;
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    list-style: none;
    padding: 0;
    align-self: center;

    li {
      padding: 0.35rem 0.85rem;
      border: 1px solid var(--line-strong);
      border-radius: 999px;
      font-size: 0.85rem;
      color: var(--ink-2);
      white-space: nowrap;
    }
  }

  .record__scope {
    grid-area: scope;
    align-self: center;
    color: var(--ink-2);
    font-size: 0.95rem;
  }

  .record__period {
    grid-area: period;
    align-self: center;
    font-family: var(--font-tech);
    font-size: var(--step--1);
    color: var(--ink-3);
    white-space: nowrap;
  }

  /* Footer */
  .site-footer {
    inline-size: min(100%, var(--max));
    margin-inline: auto;
    padding: clamp(2rem, 5vw, 4rem) var(--gutter) 2rem;
    overflow: clip;
  }

  .footer__mark { display: grid; }

  .footer__meta {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    gap: 1rem 2rem;
    margin-block-start: clamp(2.5rem, 6vw, 4rem);
    padding-block-start: 1.5rem;
    border-block-start: 1px solid var(--line);
    font-family: var(--font-tech);
    font-size: 0.75rem;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--ink-3);
  }

  .footer__top {
    text-decoration: none;
    transition: color 0.25s;
    &:hover { color: var(--ink); }
  }
}

/* ---------- Motion (opt-in: only when the user has not requested reduced motion) ---------- */
@layer motion {
  ::view-transition-old(root),
  ::view-transition-new(root) {
    animation: none;
    mix-blend-mode: normal;
  }

  @media (prefers-reduced-motion: no-preference) {
    html { scroll-behavior: smooth; }

    /* Hero entrance */
    .hero__title .word {
      animation: word-in 1.2s var(--ease-out) both;
      animation-delay: calc(350ms + var(--i) * 90ms);
    }
    .hero__content > .logo { animation: fade-up 1s var(--ease-out) 100ms both; }
    .hero__eyebrow        { animation: fade-up 1s var(--ease-out) 250ms both; }
    .hero__lede           { animation: fade-up 1s var(--ease-out) 900ms both; }
    .scroll-cue           { animation: fade-up 1s var(--ease-out) 1300ms both; }
    .site-header          { animation: fade-in 1.2s var(--ease-out) 200ms both; }

    .hero__title .word--accent { animation: word-in 1.2s var(--ease-out) calc(350ms + var(--i) * 90ms) both, shimmer 8s linear 1.5s infinite; }
    .eyebrow__dot { animation: pulse 2.6s var(--ease-out) infinite; }
    .scroll-cue__line::after { animation: drip 2.4s var(--ease-in-out) infinite; }

    .marquee__track { animation: marquee 45s linear infinite; }
    .marquee:hover .marquee__track { animation-play-state: paused; }

    .card { will-change: translate; }
    @media (hover: hover) { .card:hover { translate: 0 -4px; } }

    .card--feature .card__art-wave { animation: wave-flow 9s linear infinite; }

    /* Scroll-driven effects: progressive enhancement */
    @supports (animation-timeline: scroll()) {
      .scroll-progress {
        animation: grow-x linear both;
        animation-timeline: scroll(root);
      }

      .site-header {
        animation: fade-in 1.2s var(--ease-out) 200ms both, header-fill linear both;
        animation-timeline: auto, scroll(root);
        animation-range: normal, 0 12rem;
      }

      .hero__content {
        animation: hero-out linear both;
        animation-timeline: scroll(root);
        animation-range: 0 90svh;
      }

      .scroll-cue {
        animation: fade-up 1s var(--ease-out) 1300ms both, fade-out linear both;
        animation-timeline: auto, scroll(root);
        animation-range: normal, 0 30svh;
      }

      .reveal {
        animation: reveal linear both;
        animation-timeline: view();
        animation-range: entry 0% entry 65%;
      }

      .statement__text {
        color: transparent;
        background:
          linear-gradient(var(--ink), var(--ink)) 0 0 / 0% 100% no-repeat,
          linear-gradient(var(--ink-3), var(--ink-3)) 0 0 / 100% 100% no-repeat;
        -webkit-background-clip: text;
        background-clip: text;
        animation: text-fill linear both;
        animation-timeline: --statement;
        animation-range: cover 15% cover 55%;
      }

      .marquee__group {
        animation: skew-in linear both;
        animation-timeline: view();
        animation-range: entry 0% cover 50%;
      }
    }

    /* Fallback for browsers without scroll-driven animations (main.js toggles .is-visible). */
    @supports not (animation-timeline: scroll()) {
      .js .reveal {
        opacity: 0;
        translate: 0 2.5rem;
        transition: opacity 0.9s var(--ease-out), translate 0.9s var(--ease-out);

        &.is-visible { opacity: 1; translate: 0 0; }
      }
    }
  }

  @media not (prefers-reduced-motion: no-preference) {
    .scroll-progress { display: none; }
  }

  @supports not (animation-timeline: scroll()) {
    .site-header { --header-fill: 1; }
    .scroll-progress { display: none; }
  }

  @keyframes word-in {
    from { opacity: 0; translate: 0 0.45em; filter: blur(14px); }
  }
  @keyframes fade-up {
    from { opacity: 0; translate: 0 1.25rem; }
  }
  @keyframes fade-in {
    from { opacity: 0; }
  }
  @keyframes fade-out {
    to { opacity: 0; }
  }
  @keyframes shimmer {
    to { background-position: -220% 0; }
  }
  @keyframes pulse {
    0%   { box-shadow: 0 0 0 0 color-mix(in oklch, var(--accent-fuchsia) 55%, transparent); }
    70%, 100% { box-shadow: 0 0 0 0.6rem transparent; }
  }
  @keyframes drip {
    0%   { translate: 0 -100%; }
    100% { translate: 0 260%; }
  }
  @keyframes marquee {
    to { translate: -50% 0; }
  }
  @keyframes wave-flow {
    to { translate: -240px 0; }
  }
  @keyframes grow-x {
    to { scale: 1 1; }
  }
  @keyframes header-fill {
    to { --header-fill: 1; }
  }
  @keyframes hero-out {
    to { opacity: 0; translate: 0 -10svh; filter: blur(8px); }
  }
  @keyframes reveal {
    from { opacity: 0; translate: 0 3rem; }
  }
  @keyframes text-fill {
    to {
      background-size: 100% 100%, 100% 100%;
    }
  }
  @keyframes skew-in {
    from { transform: translateX(12%) skewX(-8deg); opacity: 0.3; }
  }
}

/* ---------- Utilities ---------- */
@layer utilities {
  .visually-hidden {
    position: absolute !important;
    inline-size: 1px;
    block-size: 1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
  }
}