/* Darwin — rider storyboard styles
   Served by the darwin-assets Worker at /storyboard.css
   Content comes from window.STORYBOARD (Squarespace header injection). */

/* ---- Break out of Squarespace's container ----
   Squarespace wraps a Code Block in padded, max-width containers, which
   squeezes the storyboard into a narrow column on desktop.

   Percentage tricks (`margin-left: calc(50% - 50vw)`) only work if the
   wrapper happens to be centred; with a left-aligned or asymmetric wrapper
   they drag the whole page sideways. Instead the JS measures the mount's
   real offset from the viewport and sets --sb-offset, so this is correct
   no matter how the theme wraps or aligns the block. */
#sb{
  position: relative;
  width: 100vw;
  max-width: 100vw;
  margin-left: var(--sb-offset, 0px);
  margin-right: 0;
  overflow-x: clip;
}
#sb, #sb * { box-sizing: border-box; }

/* ---- Fonts ----
     Self-hosted Yapari (Power Type licence).
     Right now these point at placeholder paths, so every browser fails the
     font load and silently falls back to Helvetica Neue / Arial — that's
     the "wrong font" you're seeing.

     Steps:
     1. Upload each Yapari weight (.woff2 preferred, .woff as fallback) to
        Squarespace as a Site Asset, or use Design > Fonts > Upload Fonts
        (see chat for why that route may be simpler).
     2. Copy the real hosted URL for each file and paste it in below,
        replacing everything inside url('...').
     3. Keep font-display: swap so text is never invisible while loading —
        it just briefly shows the fallback font, then swaps to Yapari.
  */
  @font-face {
    font-family: 'Yapari Ultra';
    src: url('https://static1.squarespace.com/static/5ea9a82580530c7a6069f5c3/t/6a587a0f23c865764839cf2f/1784183311987/Yapari-Ultra.woff2') format('woff2');
    font-weight: 900;
    font-style: normal;
    font-display: swap;
  }
  @font-face {
    font-family: 'Yapari';
    src: url('https://static1.squarespace.com/static/5ea9a82580530c7a6069f5c3/t/6a587a0faee87773cba8c418/1784183312114/Yapari-Regular.woff2') format('woff2');
    font-weight: 400;
    font-style: normal;
    font-display: swap;
  }
  @font-face {
    font-family: 'Yapari';
    src: url('https://static1.squarespace.com/static/5ea9a82580530c7a6069f5c3/t/6a587a0f746cb4216c09f11c/1784183312111/Yapari-Light.woff2') format('woff2');
    font-weight: 300;
    font-style: normal;
    font-display: swap;
  }
  @font-face {
    font-family: 'Yapari';
    src: url('https://static1.squarespace.com/static/5ea9a82580530c7a6069f5c3/t/6a587a0fe3c0af1c1d1e0622/1784183312110/Yapari-Medium.woff2') format('woff2');
    font-weight: 500;
    font-style: normal;
    font-display: swap;
  }

  :root {
    --black: #0B0B0A;
    --offwhite: #F2F0E8;
    --gray-1: #8C8C86;   /* light titanium */
    --gray-2: #5B5B56;   /* mid titanium */
    --gray-3: #3A3A37;   /* dark titanium */
    --moss: #4A4F45;     /* single accent, used sparingly */
    --font-display: 'Yapari', 'Helvetica Neue', Arial, sans-serif;
    --font-ultra: 'Yapari Ultra', 'Yapari', 'Helvetica Neue', Arial, sans-serif;
    --font-mono: 'IBM Plex Mono', 'Courier New', monospace;
  }

  * { box-sizing: border-box; margin: 0; padding: 0; }

  html { scroll-behavior: smooth; }

  body {
    background: var(--black);
    color: var(--offwhite);
    font-family: var(--font-display);
    font-weight: 300;
    -webkit-font-smoothing: antialiased;
    overflow-x: hidden;
  }

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

  /* ---- Weld seam / scroll progress ---- */
  #weld-seam {
    position: fixed;
    top: 0; left: 24px;
    width: 1px; height: 100%;
    z-index: 40;
    background: rgba(242,240,232,0.12);
    pointer-events: none;
  }
  #weld-seam::before {
    content: '';
    position: absolute;
    top: 0; left: 0;
    width: 100%;
    height: var(--progress, 0%);
    background: var(--gray-1);
    transition: height 0.05s linear;
  }
  @media (max-width: 780px) { #weld-seam { display: none; } }

  /* ---- Nav ---- */
  nav {
    position: fixed;
    top: 0; left: 0; width: 100%;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 28px 44px;
    z-index: 50;
    mix-blend-mode: difference;
  }
  .wordmark {
    font-family: var(--font-ultra);
    font-weight: 900;
    font-size: 20px;
    letter-spacing: 0.14em;
    color: var(--offwhite);
  }
  .nav-meta {
    font-family: var(--font-mono);
    font-size: 11px;
    letter-spacing: 0.05em;
    color: var(--gray-1);
    text-transform: uppercase;
  }

  /* ---- Movements ---- */
  .movement {
    position: relative;
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    padding: 100px 8vw 90px;
    border-bottom: 1px solid rgba(242,240,232,0.08);
  }

  .eyebrow {
    font-family: var(--font-mono);
    font-size: 12px;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--gray-1);
    margin-bottom: 18px;
    opacity: 0;
    transform: translateY(12px);
    transition: opacity 0.7s ease, transform 0.7s ease;
  }

  h1.headline, h2.headline {
    font-family: var(--font-display);
    font-weight: 300;
    font-size: clamp(30px, 4.4vw, 62px);
    line-height: 1.08;
    max-width: 780px;
    color: var(--offwhite);
    opacity: 0;
    transform: translateY(18px);
    transition: opacity 0.8s ease 0.1s, transform 0.8s ease 0.1s;
  }

  .body-copy {
    font-size: 16px;
    line-height: 1.7;
    color: var(--gray-1);
    max-width: 460px;
    margin-top: 22px;
    opacity: 0;
    transform: translateY(14px);
    transition: opacity 0.8s ease 0.2s, transform 0.8s ease 0.2s;
  }

  .movement.in-view .eyebrow,
  .movement.in-view .headline,
  .movement.in-view .body-copy {
    opacity: 1;
    transform: translateY(0);
  }

  /* ---- Placeholder media ---- */
  .placeholder {
    position: absolute;
    inset: 0;
    background:
      repeating-linear-gradient(115deg, #171716 0px, #171716 2px, #1f1f1e 2px, #1f1f1e 4px);
    display: flex;
    align-items: flex-start;
    justify-content: flex-end;
    overflow: hidden;
  }
  .placeholder img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: var(--img-fit, cover);
    object-position: var(--img-pos, center);
  }
  /* Portrait photos in a wide frame crop hard with `cover` — on a 1440x900
     screen only ~42% of a 934x1400 image survives. Movements can opt into
     `fit: "contain"` (whole image, letterboxed) or set a focal point via
     `imagePosition` in the config. */
  .placeholder.is-contain{
    background: var(--black);
  }
  .placeholder.is-contain img{
    object-fit: contain;
  }
  .placeholder::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, rgba(11,11,10,0.15) 0%, rgba(11,11,10,0.85) 100%);
  }
  .placeholder-tag {
    position: relative;
    z-index: 2;
    font-family: var(--font-mono);
    font-size: 11px;
    letter-spacing: 0.06em;
    color: var(--gray-2);
    border: 1px solid rgba(140,140,134,0.3);
    padding: 6px 12px;
    margin: 28px;
    text-transform: uppercase;
  }

  .content-inner { position: relative; z-index: 2; }

  /* ---- Dig deeper ---- */
  .dig-deeper, .closer-look-btn {
    position: relative;
    z-index: 2;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin-top: 30px;
    background: transparent;
    border: 1px solid rgba(242,240,232,0.35);
    color: var(--offwhite);
    font-family: var(--font-mono);
    font-size: 12px;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    padding: 12px 20px;
    cursor: pointer;
    transition: border-color 0.25s ease, background 0.25s ease;
    opacity: 0;
    transform: translateY(14px);
    transition: opacity 0.8s ease 0.3s, transform 0.8s ease 0.3s, border-color 0.25s ease, background 0.25s ease;
  }
  .movement.in-view .dig-deeper, .movement.in-view .closer-look-btn { opacity: 1; transform: translateY(0); }
  .dig-deeper:hover, .closer-look-btn:hover { border-color: var(--moss); background: rgba(74,79,69,0.25); }
  .dig-deeper .arrow { transition: transform 0.3s ease; }
  .dig-deeper.open .arrow { transform: rotate(45deg); }

  .drawer {
    position: relative;
    z-index: 2;
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.5s ease;
    background: var(--offwhite);
    color: var(--black);
    margin-top: 0;
  }
  .drawer.open { margin-top: 2px; }
  .drawer-inner {
    padding: 32px 8vw;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
    gap: 28px 40px;
  }
  .spec-label {
    font-family: var(--font-mono);
    font-size: 11px;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--gray-2);
    margin-bottom: 6px;
  }
  .spec-value {
    font-family: var(--font-display);
    font-weight: 400;
    font-size: 17px;
    color: var(--black);
  }
  .drawer-note {
    grid-column: 1 / -1;
    font-size: 14px;
    line-height: 1.6;
    color: var(--gray-3);
    max-width: 620px;
    border-top: 1px solid rgba(11,11,10,0.12);
    padding-top: 18px;
    margin-top: 4px;
  }

  /* ---- Opening movement (hero) ---- */
  #movement-01 { justify-content: center; align-items: flex-start; padding-top: 0; }
  #movement-01 .headline { font-size: clamp(38px, 6.5vw, 84px); }
  .scroll-cue {
    position: absolute;
    bottom: 44px; left: 8vw;
    font-family: var(--font-mono);
    font-size: 11px;
    letter-spacing: 0.08em;
    color: var(--gray-1);
    z-index: 2;
    text-transform: uppercase;
  }

  /* ---- Athlete movement (asymmetric) ---- */
  .movement-athlete { align-items: flex-end; text-align: right; }
  .movement-athlete .body-copy,
  .movement-athlete .eyebrow { margin-left: auto; }
  .movement-athlete .headline { margin-left: auto; }

  /* ---- Closing / footer ---- */
  footer {
    padding: 90px 8vw 60px;
    background: var(--black);
    border-top: 1px solid rgba(242,240,232,0.08);
  }
  .footer-word {
    font-family: var(--font-ultra);
    font-weight: 900;
    font-size: clamp(48px, 10vw, 140px);
    letter-spacing: 0.02em;
    color: var(--offwhite);
    line-height: 0.9;
  }
  .footer-meta {
    display: flex;
    justify-content: space-between;
    margin-top: 40px;
    font-family: var(--font-mono);
    font-size: 11px;
    color: var(--gray-2);
    letter-spacing: 0.05em;
    text-transform: uppercase;
    flex-wrap: wrap;
    gap: 12px;
  }

  @media (max-width: 780px) {
    .movement { padding: 80px 24px 60px; }
    .movement-athlete { text-align: left; align-items: flex-start; }
    .movement-athlete .body-copy, .movement-athlete .eyebrow, .movement-athlete .headline { margin-left: 0; }
    nav { padding: 20px 24px; }
    footer { padding: 70px 24px 44px; }
  }
  /* ---- Video lightbox modal ---- */
  .video-modal {
    position: fixed;
    inset: 0;
    z-index: 80;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.35s ease;
  }
  .video-modal.open { opacity: 1; pointer-events: auto; }
  .video-modal-backdrop {
    position: absolute;
    inset: 0;
    background: rgba(11,11,10,0.92);
    backdrop-filter: blur(4px);
  }
  .video-modal-content {
    position: relative;
    z-index: 2;
    width: min(1100px, 90vw);
    transform: scale(0.97);
    transition: transform 0.35s ease;
  }
  .video-modal.open .video-modal-content { transform: scale(1); }
  .video-modal-frame {
    position: relative;
    width: 100%;
    aspect-ratio: 16/9;
    background: #000;
    border: 1px solid rgba(242,240,232,0.15);
  }
  .video-modal-frame iframe {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    border: 0;
  }
  .video-modal-close {
    position: absolute;
    top: -46px;
    right: 0;
    background: transparent;
    border: 1px solid rgba(242,240,232,0.35);
    color: var(--offwhite);
    font-family: var(--font-mono);
    font-size: 20px;
    line-height: 1;
    width: 36px;
    height: 36px;
    cursor: pointer;
    transition: border-color 0.25s ease;
  }
  .video-modal-close:hover { border-color: var(--moss); }
  @media (max-width: 780px) {
    .video-modal-close { top: -40px; width: 32px; height: 32px; font-size: 17px; }
  }