/* ── Brand faces. Measured 2026-08-02: the page was loading ZERO @font-face rules and
       rendering whatever the OS happened to have for "Palatino". These are the real
       files from the kit. `swap` so copy is never invisible while a face downloads. ── */
  @font-face {
    font-family: "Palatino CAIN"; font-style: normal; font-weight: 400; font-display: swap;
    src: url("../../design-system/assets/fonts/palatino-regular.ttf") format("truetype");
  }
  @font-face {
    font-family: "Freight Text CAIN"; font-style: normal; font-weight: 300; font-display: swap;
    src: url("../../fonts/Freight%20Text%20Light/Freight%20Text%20Light.otf") format("opentype");
  }
  @font-face {
    font-family: "Freight Text CAIN"; font-style: normal; font-weight: 400; font-display: swap;
    src: url("../../fonts/Freight%20Text%20Book/Freight%20Text%20Book.otf") format("opentype");
  }
  @font-face {
    font-family: "Freight Text CAIN"; font-style: normal; font-weight: 500; font-display: swap;
    src: url("../../fonts/Freight%20Text%20Medium/Freight%20Text%20Medium.otf") format("opentype");
  }
  @font-face {
    font-family: "Freight Text CAIN"; font-style: normal; font-weight: 700; font-display: swap;
    src: url("../../fonts/Freight%20Text%20Bold/Freight%20Text%20Bold.otf") format("opentype");
  }

  .sw-root {
    --sw-bg: #141010;                      /* deep ink; never #000 */
    --sw-ink: #ffffff;
    --sw-ink-soft: rgba(255,255,255,.72);
    --sw-accent: #B31B1B;                  /* Cornell Carnelian */
    --sw-font-display: "Palatino CAIN", "Palatino Linotype", "Book Antiqua", Palatino, Georgia, serif;
    --sw-font-body: "Freight Text CAIN", "Palatino CAIN", Georgia, "Times New Roman", serif;
    --cain-rule: 2px;                      /* the brand's hard editorial rule */
  }

  /* ── THE SIDE / HEIGHT FIX ────────────────────────────────────────────────────────
     Two measured faults, 2026-08-02 at 1919x893:
       1. The copy column ran x 64..524 — 27% of the viewport. Too narrow to read as
          the page's voice, which is what "too much on the side" meant.
       2. It ran y 464..913 and overflowed the bottom edge by 20px, so the CTA was
          clipped off-screen. Cause: the engine assigns `c.style.transform` inline on
          every scroll frame, and an inline transform beats the stylesheet's
          `translateY(-50%)`. The centering silently never applied — `top:50%` was
          anchoring the block's TOP at mid-viewport. Anchor the top explicitly instead
          and the drift the engine writes stays as intended parallax.
     Do not restore `top:50%` here without also removing that inline write.        */
  .sw-copy {
    top: clamp(88px, 19vh, 196px);
    left: clamp(20px, 6vw, 96px);
    right: auto;
    width: min(50vw, 620px);
    max-width: calc(100vw - 2 * clamp(20px, 6vw, 96px));
  }

  /* Ezra's mascot stands left of centre in his plate — copy on the left would sit on
     top of him. Section order is lead-in, Sage, Ezra, Baker, Tech, so Ezra is the
     third .sw-copy the engine appends. */
  /* Extra right inset, not the plain 6vw: the engine's route rail lives at the right edge
     and its active-section label extends LEFT from the dot, straight across the body
     copy. This clears it. */
  .sw-copylayer .sw-copy:nth-child(3) {
    left: auto;
    right: clamp(60px, 9vw, 168px);
  }

  /* ── SCRIM ────────────────────────────────────────────────────────────────────────
     The engine's layer-wide gradient washes 58vw of the footage flat. A wide dimmed
     backdrop behind editorial copy is exactly the beige-haze failure from the earlier
     scroll-home build. Kill it and give each block its own tight local scrim that
     travels with the copy, so the picture stays a picture.

     Two stacked gradients, not one: an elliptical core that carries the contrast under
     the text, plus a wide directional wash that reaches the frame edge so the dark side
     does not end in a visible oval. Ezra's plate is a bright dusk sky and needed more
     than the first pass gave it. */
  .sw-copylayer::before { display: none; }
  .sw-copy::before {
    content: "";
    position: absolute;
    inset: -16% -26% -20% -20%;
    z-index: -1;
    background:
      radial-gradient(66% 58% at 32% 48%,
        rgba(18,14,14,.90) 0%, rgba(18,14,14,.70) 46%,
        rgba(18,14,14,.30) 74%, transparent 100%),
      linear-gradient(90deg, rgba(18,14,14,.66) 0%, rgba(18,14,14,.34) 46%, transparent 82%);
    pointer-events: none;
  }
  .sw-copylayer .sw-copy:nth-child(3)::before {
    background:
      radial-gradient(66% 58% at 68% 48%,
        rgba(18,14,14,.90) 0%, rgba(18,14,14,.70) 46%,
        rgba(18,14,14,.30) 74%, transparent 100%),
      linear-gradient(270deg, rgba(18,14,14,.66) 0%, rgba(18,14,14,.34) 46%, transparent 82%);
  }

  /* ── TYPE ─────────────────────────────────────────────────────────────────────── */
  /* The engine ships a "01 / 05" counter <span> here. The section name now lives on the
     right-hand route rail instead (see .sw-route__label), so the counter is dead weight. */
  .sw-copy__num { display: none; }
  /* Carnelian reads as a hard rule, not as body colour — a #B31B1B eyebrow on dark
     footage sits under 3:1. Rule carries the brand, type stays legible. */
  .sw-copy__eyebrow {
    font-family: var(--sw-font-body);
    font-weight: 700; font-size: clamp(.9rem, 1.05vw, 1.05rem); letter-spacing: .17em;
    text-transform: uppercase;
    color: rgba(255,255,255,.86);
    margin-top: 22px; padding-top: 16px;
    border-top: var(--cain-rule) solid var(--sw-accent);
    display: inline-block;
  }
  .sw-copy__title {
    font-family: var(--sw-font-display);
    font-weight: 400;
    font-size: clamp(2.3rem, 3.9vw, 3.85rem);
    line-height: 1.07; letter-spacing: -.018em;
    margin: 14px 0 0; color: #fff;
    text-shadow: 0 2px 26px rgba(20,16,16,.72);
    text-wrap: balance;
  }
  .sw-copy__body {
    font-family: var(--sw-font-body);
    font-weight: 400;
    margin-top: 18px;
    font-size: clamp(1.02rem, 1.16vw, 1.19rem);
    line-height: 1.6; max-width: 48ch;
    color: rgba(255,255,255,.82);
    text-shadow: 0 1px 16px rgba(20,16,16,.8);
  }

  /* Lead-in and Sage subheads — they carry the page's two promises, so they run bolder and
     larger than the remaining landing bodies. Cards are appended in section order, so the
     lead-in is the first .sw-copy and Sage the second. */
  .sw-copylayer .sw-copy:nth-child(1) .sw-copy__body,
  .sw-copylayer .sw-copy:nth-child(2) .sw-copy__body {
    font-weight: 700;
    font-size: clamp(1.18rem, 1.55vw, 1.52rem);
    line-height: 1.45; max-width: 30ch;
    color: rgba(255,255,255,.94);
  }

  /* ── TAGS — hard 1px border, no fill. The engine ships a light-mode pill (near-white
       background) which is a bright chiclet sitting on dark footage. */
  .sw-copy__tags { flex-direction: column; align-items: flex-start; gap: 0; margin-top: 26px; }
  .sw-copy__tags li {
    font-family: var(--sw-font-body);
    font-weight: 400; font-size: .93rem; line-height: 1.45;
    color: rgba(255,255,255,.8);
    background: none; border: 0; border-radius: 0;
    padding: 9px 0 9px 20px;
    position: relative;
    box-shadow: inset 0 -1px 0 rgba(255,255,255,.14);
    width: 100%;
  }
  .sw-copy__tags li:first-child { box-shadow: inset 0 1px 0 rgba(255,255,255,.14), inset 0 -1px 0 rgba(255,255,255,.14); }
  .sw-copy__tags li::before {
    content: ""; position: absolute; left: 0; top: 1.02em;
    width: 9px; height: var(--cain-rule); background: var(--sw-accent);
  }

  /* ── BUTTONS ──────────────────────────────────────────────────────────────────────
     LIVE BUG, measured: the engine fills .sw-btn--primary and .sw-topcta with
     var(--sw-ink) and sets color:#fff. This page sets --sw-ink to #ffffff, so both
     rendered white-on-white — computed style was rgb(255,255,255) on rgb(255,255,255).
     The primary CTA was invisible on every landing. Carnelian fill fixes it and is the
     brand's actual button. Radius drops to a hard edge to match the kit. */
  .sw-btn { border-radius: 2px; font-family: var(--sw-font-body); font-weight: 500;
            letter-spacing: .01em; padding: 13px 26px;
            transition: transform .22s cubic-bezier(.16,1,.3,1), background .22s, border-color .22s; }
  .sw-btn--primary { background: var(--sw-accent); color: #fff; border: var(--cain-rule) solid var(--sw-accent); }
  .sw-btn--primary:hover { background: #9A1717; border-color: #9A1717; transform: translateY(-2px); }
  .sw-btn--primary:active { transform: translateY(0) scale(.985); }
  .sw-btn--ghost { background: transparent; color: #fff; border: 1px solid rgba(255,255,255,.42); }
  .sw-btn--ghost:hover { border-color: #fff; transform: translateY(-2px); }
  .sw-btn--ghost:active { transform: translateY(0) scale(.985); }
  .sw-copy__cta { margin-top: 30px; gap: 12px; }

  .sw-topcta { background: var(--sw-accent); color: #fff; border-radius: 2px;
               font-family: var(--sw-font-body); font-weight: 500; letter-spacing: .01em; }
  .sw-topcta:hover { background: #9A1717; }

  /* ── CHROME ───────────────────────────────────────────────────────────────────── */
  .sw-brand__name { font-family: var(--sw-font-display); font-weight: 400; letter-spacing: -.005em; }
  .sw-brand__mark { border-radius: 2px; background: var(--sw-accent); box-shadow: none;
                    width: 22px; height: 26px; }
  .sw-nav { background: rgba(20,16,16,.42); backdrop-filter: blur(12px);
            border: 1px solid rgba(255,255,255,.14); border-radius: 2px; }
  .sw-nav__item { font-family: var(--sw-font-body); border-radius: 2px; color: rgba(255,255,255,.66); }
  .sw-nav__item:hover { color: #fff; }
  .sw-nav__item.is-active { background: var(--sw-accent); color: #fff; }
  .sw-route__label { background: rgba(20,16,16,.82); color: #fff; border-radius: 2px;
                     border: 1px solid rgba(255,255,255,.16); font-family: var(--sw-font-body); }
  .sw-hint { font-family: var(--sw-font-body); }

  /* ── SCROLL-STAGGERED REVEAL ──────────────────────────────────────────────────────
     The engine fades the whole block as one object. This cascades it: rule, then
     headline, then body, then each proof line, then the CTA. `.is-in` is toggled by the
     engine from the same scroll value that drives playback, so the reveal is tied to
     the scroll position and not to a wall clock. Transform + opacity only. */
  .sw-copy__num, .sw-copy__eyebrow, .sw-copy__title,
  .sw-copy__body, .sw-copy__tags li, .sw-copy__cta {
    opacity: 0;
    transform: translateY(15px);
    transition: opacity .66s cubic-bezier(.16,1,.3,1), transform .66s cubic-bezier(.16,1,.3,1);
  }
  .sw-copy.is-in .sw-copy__num,
  .sw-copy.is-in .sw-copy__eyebrow,
  .sw-copy.is-in .sw-copy__title,
  .sw-copy.is-in .sw-copy__body,
  .sw-copy.is-in .sw-copy__tags li,
  .sw-copy.is-in .sw-copy__cta { opacity: 1; transform: none; }

  .sw-copy.is-in .sw-copy__num     { transition-delay: 0ms; }
  .sw-copy.is-in .sw-copy__eyebrow { transition-delay: 80ms; }
  .sw-copy.is-in .sw-copy__title   { transition-delay: 160ms; }
  .sw-copy.is-in .sw-copy__body    { transition-delay: 280ms; }
  .sw-copy.is-in .sw-copy__tags li:nth-child(1) { transition-delay: 380ms; }
  .sw-copy.is-in .sw-copy__tags li:nth-child(2) { transition-delay: 450ms; }
  .sw-copy.is-in .sw-copy__tags li:nth-child(3) { transition-delay: 520ms; }
  .sw-copy.is-in .sw-copy__tags li:nth-child(4) { transition-delay: 590ms; }
  .sw-copy.is-in .sw-copy__cta     { transition-delay: 620ms; }

  /* ── PHONE ────────────────────────────────────────────────────────────────────────
     Single column, bottom-anchored, both sides collapse to the same place. The engine's
     own phone rules re-pin .sw-copy, so these have to restate the geometry. */
  @media (max-width: 860px) {
    .sw-copy,
    .sw-copylayer .sw-copy:nth-child(3) {
      top: auto;
      left: clamp(18px, 5vw, 40px);
      right: clamp(18px, 5vw, 40px);
      bottom: calc(clamp(56px, 12dvh, 110px) + env(safe-area-inset-bottom));
      width: auto; max-width: 560px;
    }
    .sw-copy::before,
    .sw-copylayer .sw-copy:nth-child(3)::before {
      inset: -14% -18% -30% -18%;
      background: linear-gradient(0deg, rgba(20,16,16,.94) 6%, rgba(20,16,16,.72) 46%, transparent 100%);
    }
    .sw-copy__title { font-size: clamp(1.95rem, 7.4vw, 2.7rem); }
    .sw-copy__body { max-width: none; font-size: clamp(1rem, 3.6vw, 1.1rem); }
    .sw-copy__tags li { font-size: .88rem; padding-block: 7px; }
  }

  @media (prefers-reduced-motion: reduce) {
    .sw-copy__num, .sw-copy__eyebrow, .sw-copy__title,
    .sw-copy__body, .sw-copy__tags li, .sw-copy__cta {
      transform: none; transition-duration: .01ms; transition-delay: 0ms;
    }
  }

/* ── cain-site integration ────────────────────────────────────────────────────────
   The engine pins its chrome with position:fixed, which is right for a standalone
   page and wrong inside a longer site: the topbar, stage, copy and route dots would
   float over every section below the hero forever. A containing block is not the fix
   here, because .sw-stage{position:fixed;inset:0} would then stretch to the full
   track height instead of one viewport. So the hero simply hides its fixed layers
   once its own track scrolls out of view — see hero-scroll-world.jsx.             */
.sw-root.is-offscreen > .sw-sky,
.sw-root.is-offscreen > .sw-topbar,
.sw-root.is-offscreen > .sw-stage,
.sw-root.is-offscreen > .sw-copylayer,
.sw-root.is-offscreen > .sw-route,
.sw-root.is-offscreen > .sw-hint,
.sw-root.is-offscreen > .sw-scrollbar { display: none; }