/* Threadlight marketing site — extracted verbatim from
   docs/design/threadlight-brand/threadlight-mockup.html (<style> block).
   It is the design; do not restyle. Site-specific additions live in the
   clearly-marked section at the bottom. */
  :root{
    --night:#14172e;
    --night-deep:#0d0f22;
    --navy:#22264B;
    --beige:#D7C6AD;
    --cream:#EFE4CD;
    --amber:#F7A026;
    --amber-soft:#f7a02655;
    --ink:#1a1d38;
    --serif:"Fraunces", Georgia, serif;
    --sans:"Inter", -apple-system, "Segoe UI", sans-serif;
  }
  *{margin:0;padding:0;box-sizing:border-box}
  html{scroll-behavior:smooth}
  body{
    background:var(--night);
    color:var(--beige);
    font-family:var(--sans);
    font-weight:300;
    overflow-x:hidden;
    -webkit-font-smoothing:antialiased;
  }
  ::selection{background:var(--amber);color:var(--night-deep)}
  ::-webkit-scrollbar{width:6px}
  ::-webkit-scrollbar-track{background:var(--night-deep)}
  ::-webkit-scrollbar-thumb{background:var(--amber)}

  /* grain overlay */
  body::after{
    content:"";position:fixed;inset:0;pointer-events:none;z-index:90;opacity:.05;
    background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='240' height='240' filter='url(%23n)'/%3E%3C/svg%3E");
  }

  .label{
    font-family:var(--sans);font-weight:500;font-size:11px;
    letter-spacing:.42em;text-transform:uppercase;
  }
  .label.amber{color:var(--amber)}
  .label.dim{color:#d7c6ad88}

  /* ---------- header ---------- */
  header{
    position:fixed;top:0;left:0;right:0;z-index:80;
    display:flex;justify-content:space-between;align-items:center;
    padding:26px 4vw;
    transition:background .5s, backdrop-filter .5s;
  }
  header.scrolled{background:#14172ed9;backdrop-filter:blur(14px)}
  .hdr-brand{display:flex;align-items:baseline;gap:14px;text-decoration:none}
  .hdr-brand .rufilla{color:var(--beige)}
  .hdr-brand .sep{width:26px;height:1px;background:#d7c6ad44;display:inline-block;transform:translateY(-3px)}
  .hdr-brand .threadlight{font-family:var(--serif);font-variation-settings:"opsz" 40,"wght" 480;font-size:19px;color:var(--cream);letter-spacing:.01em}
  .pill{
    position:relative;overflow:hidden;
    font-family:var(--sans);font-weight:500;font-size:11px;letter-spacing:.28em;text-transform:uppercase;
    color:var(--beige);text-decoration:none;
    border:1px solid #d7c6ad55;border-radius:30px;
    padding:11px 26px 10px;
    transition:color .45s, border-color .45s;
    z-index:1;
  }
  .pill::before{
    content:"";position:absolute;left:0;right:0;bottom:0;height:0;
    background:var(--amber);transition:height .45s cubic-bezier(.65,0,.35,1);z-index:-1;
  }
  .pill:hover{color:var(--night-deep);border-color:var(--amber)}
  .pill:hover::before{height:100%}

  /* ---------- hero ---------- */
  .hero{
    position:relative;min-height:100vh;
    display:flex;flex-direction:column;justify-content:center;align-items:center;
    text-align:center;padding:14vh 4vw 10vh;overflow:hidden;
  }
  #stars{position:absolute;inset:0;z-index:0}
  .hero-inner{position:relative;z-index:2}
  .hero .by{opacity:0;animation:rise 1.2s .3s cubic-bezier(.22,1,.36,1) forwards}
  .wordmark{
    font-family:var(--serif);
    font-size:clamp(58px, 12.5vw, 220px);
    line-height:.95;letter-spacing:-.015em;
    color:var(--cream);
    margin:3.2vh 0 2.4vh;
    display:flex;justify-content:center;flex-wrap:wrap;
    user-select:none;
  }
  .wordmark .ch{
    display:inline-block;
    font-variation-settings:"opsz" 144,"wght" 340,"SOFT" 30,"WONK" 0;
    transition:font-variation-settings .35s cubic-bezier(.22,1,.36,1), color .35s;
    opacity:0;transform:translateY(.35em) rotate(2deg);
    animation:chIn 1s cubic-bezier(.22,1,.36,1) forwards;
    cursor:default;
  }
  .wordmark .ch.hot{font-variation-settings:"opsz" 144,"wght" 780,"SOFT" 60,"WONK" 1;color:var(--amber)}
  .wordmark .ch.near{font-variation-settings:"opsz" 144,"wght" 480,"SOFT" 40}
  .wordmark .ch.far{font-variation-settings:"opsz" 144,"wght" 390,"SOFT" 30}
  @keyframes chIn{to{opacity:1;transform:translateY(0) rotate(0)}}
  @keyframes rise{to{opacity:1}}

  .tagline{
    font-family:var(--serif);font-variation-settings:"opsz" 30,"wght" 340,"SOFT" 50;
    font-size:clamp(19px,2.3vw,30px);color:#d7c6adc9;
    max-width:22ch;line-height:1.35;margin:0 auto;
    opacity:0;animation:rise 1.2s .9s cubic-bezier(.22,1,.36,1) forwards;
  }
  .tagline em{font-style:italic;color:var(--amber)}

  .hero-thread{display:block;margin:5.5vh auto 0;opacity:0;animation:rise 1.4s 1.3s forwards}
  .hero-thread path{stroke-linecap:round;fill:none}

  .scroll-cue{
    position:absolute;bottom:34px;left:50%;transform:translateX(-50%);
    z-index:2;display:flex;flex-direction:column;align-items:center;gap:12px;
    opacity:0;animation:rise 1.2s 2s forwards;
  }
  .scroll-cue .line{width:1px;height:52px;background:#d7c6ad33;position:relative;overflow:hidden}
  .scroll-cue .line::after{
    content:"";position:absolute;left:0;top:-50%;width:100%;height:50%;
    background:var(--amber);animation:drop 2.2s cubic-bezier(.65,0,.35,1) infinite;
  }
  @keyframes drop{0%{top:-50%}60%,100%{top:110%}}

  /* ---------- story section (beige) ---------- */
  .story{
    background:var(--beige);color:var(--ink);
    padding:16vh 6vw 14vh;position:relative;
  }
  .story .kicker{color:#22264b99}
  .story h2{
    font-family:var(--serif);font-variation-settings:"opsz" 100,"wght" 420,"SOFT" 40;
    font-size:clamp(34px,4.6vw,72px);line-height:1.08;letter-spacing:-.01em;
    max-width:18ch;margin:3vh 0 0;
  }
  .story h2 .u{position:relative;white-space:nowrap}
  .story h2 .u svg{
    position:absolute;left:-2%;bottom:-.18em;width:104%;height:.42em;overflow:visible;
  }
  .story h2 .u path{fill:none;stroke:var(--amber);stroke-width:5;stroke-linecap:round}
  .beats{margin-top:12vh;display:flex;flex-direction:column;gap:11vh}
  .beat{
    display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.15fr);
    gap:5vw;align-items:center;
  }
  .beat:nth-child(even) .beat-art{order:2}
  .beat-num{font-size:12px;letter-spacing:.4em;font-weight:500;color:#22264b77;text-transform:uppercase}
  .beat h3{
    font-family:var(--serif);font-variation-settings:"opsz" 60,"wght" 460;
    font-size:clamp(28px,3vw,44px);margin:14px 0 18px;line-height:1.1;
  }
  .beat p{font-size:15.5px;line-height:1.75;color:#22264bcc;max-width:44ch}
  .beat-art svg{width:100%;height:auto;display:block}
  .draw{fill:none;stroke-linecap:round;stroke-linejoin:round}

  /* ---------- mark section (navy) ---------- */
  .mark{
    background:var(--navy);padding:16vh 6vw 15vh;
  }
  .mark-head{max-width:760px}
  .mark h2{
    font-family:var(--serif);font-variation-settings:"opsz" 100,"wght" 420,"SOFT" 40;
    font-size:clamp(34px,4.6vw,72px);line-height:1.08;color:var(--cream);
    margin-top:3vh;
  }
  .mark h2 em{font-style:italic;color:var(--amber)}
  .lockups{margin-top:10vh;display:grid;grid-template-columns:1.35fr 1fr;gap:3vw}
  .lockup{
    display:flex;flex-direction:column;justify-content:center;align-items:center;
    min-height:380px;padding:7vh 4vw;gap:5vh;
  }
  .lockup.primary{background:var(--night-deep);grid-row:span 2;min-height:640px}
  .lockup.light{background:var(--beige)}
  .lockup.mono{background:transparent;border:1px solid #d7c6ad2e}
  .lockup .note{position:relative;margin-top:auto}
  .wm{
    font-family:var(--serif);font-variation-settings:"opsz" 60,"wght" 450,"SOFT" 40;
    letter-spacing:-.01em;line-height:1;
  }
  .wm.xl{font-size:clamp(40px,4.6vw,72px);color:var(--cream)}
  .wm.md{font-size:clamp(28px,3vw,44px);color:var(--ink)}
  .wm.sm{font-size:clamp(24px,2.4vw,36px);color:var(--beige)}
  .byline{font-size:10px;letter-spacing:.42em;text-transform:uppercase;font-weight:500;margin-top:14px}
  .byline.on-dark{color:#d7c6ad77}
  .byline.on-light{color:#22264b88}

  /* ---------- constellation section ---------- */
  .sky{
    background:var(--night-deep);padding:17vh 6vw 15vh;text-align:center;position:relative;overflow:hidden;
  }
  .sky h2{
    font-family:var(--serif);font-variation-settings:"opsz" 100,"wght" 400,"SOFT" 40;
    font-size:clamp(30px,3.9vw,58px);line-height:1.25;color:var(--beige);
    max-width:26ch;margin:3vh auto 0;
  }
  .sky h2 strong{font-weight:460;color:var(--cream)}
  .sky h2 em{font-style:italic;color:var(--amber)}
  .constellation{margin:9vh auto 0;max-width:1080px}
  .constellation svg{width:100%;height:auto;display:block}
  .node-label{font-family:var(--sans);font-size:10.5px;letter-spacing:.3em;text-transform:uppercase;fill:#d7c6ad99;font-weight:500}
  .cta-row{margin-top:11vh;display:flex;justify-content:center;align-items:center;gap:34px;flex-wrap:wrap}
  .cta-row .hint{font-size:12px;letter-spacing:.24em;text-transform:uppercase;color:#d7c6ad66}

  /* ---------- footer ---------- */
  footer{
    background:var(--night);padding:14vh 0 6vh;overflow:hidden;
    border-top:1px solid #d7c6ad14;
  }
  .giant{
    font-family:var(--serif);font-variation-settings:"opsz" 144,"wght" 380,"SOFT" 40;
    font-size:13.4vw;line-height:.9;letter-spacing:-.02em;color:#d7c6ad1f;
    white-space:nowrap;text-align:center;user-select:none;
    transition:color 1.2s;
  }
  .giant.lit{color:#efe4cd2e}
  .foot-meta{
    margin-top:9vh;padding:0 4vw;display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:18px;
  }
  .foot-meta .label{color:#d7c6ad55}

  .reveal{opacity:0;transform:translateY(36px);transition:opacity 1s cubic-bezier(.22,1,.36,1), transform 1s cubic-bezier(.22,1,.36,1)}
  .reveal.in{opacity:1;transform:none}

  @media(max-width:860px){
    .beat{grid-template-columns:1fr;gap:4vh}
    .beat:nth-child(even) .beat-art{order:0}
    .lockups{grid-template-columns:1fr}
    .lockup.primary{min-height:480px}
  }

/* ======================================================================
   Site additions (B4) — everything below is NOT from the mockup.
   ====================================================================== */

/* header nav (the mockup header has only the lockup + pill; the site's nav
   links are styled in the mockup's label idiom) */
.hdr-nav{display:flex;align-items:center;gap:30px}
.hdr-nav a{
  font-family:var(--sans);font-weight:500;font-size:11px;
  letter-spacing:.28em;text-transform:uppercase;
  color:#d7c6ad99;text-decoration:none;transition:color .35s;
}
.hdr-nav a:hover{color:var(--cream)}
.hdr-nav a.on{color:var(--amber)}
@media(max-width:860px){
  .hdr-nav{display:none}
}

/* features page (Task 3) — the mockup's section idioms composed for a
   content page: a night intro, the beige story, a navy differentiator
   section, and the sky CTA. */
.f-hero{
  background:var(--night-deep);
  padding:26vh 6vw 14vh;text-align:left;
}
.f-hero h1{
  font-family:var(--serif);font-variation-settings:"opsz" 100,"wght" 420,"SOFT" 40;
  font-size:clamp(38px,5.4vw,84px);line-height:1.06;letter-spacing:-.01em;
  color:var(--cream);max-width:16ch;margin-top:3vh;
}
.f-hero h1 em{font-style:italic;color:var(--amber)}
.f-thread{display:block;margin:5vh 0 0;max-width:100%;height:auto}
.f-thread path{stroke-linecap:round;fill:none}
.f-sub{
  font-family:var(--serif);font-variation-settings:"opsz" 30,"wght" 340,"SOFT" 50;
  font-size:clamp(18px,2vw,26px);color:#d7c6adc9;
  max-width:34ch;line-height:1.45;margin-top:4.5vh;
}
.f-light{
  background:var(--navy);padding:16vh 6vw 15vh;
}
.f-light h2{
  font-family:var(--serif);font-variation-settings:"opsz" 100,"wght" 420,"SOFT" 40;
  font-size:clamp(34px,4.6vw,72px);line-height:1.08;color:var(--cream);
  max-width:18ch;margin-top:3vh;
}
.f-light h2 em{font-style:italic;color:var(--amber)}
.f-lead{margin-top:5vh;display:grid;grid-template-columns:1fr 1fr;gap:4vw;max-width:1080px}
.f-lead p{font-size:15.5px;line-height:1.75;color:#d7c6adcc}
.f-grid{margin-top:9vh;display:grid;grid-template-columns:repeat(3,1fr);gap:2.4vw}
.f-card{
  border:1px solid #d7c6ad2e;padding:5vh 2.2vw;
  display:flex;flex-direction:column;gap:2.6vh;
}
.f-card svg{opacity:.9}
.f-card h3{
  font-family:var(--serif);font-variation-settings:"opsz" 60,"wght" 460;
  font-size:clamp(20px,1.8vw,27px);color:var(--cream);line-height:1.15;
}
.f-card p{font-size:14.5px;line-height:1.7;color:#d7c6adaa}
.f-cta h2{max-width:24ch}
@media(max-width:860px){
  .f-hero{padding:20vh 6vw 12vh}
  .f-lead{grid-template-columns:1fr;gap:3vh}
  .f-grid{grid-template-columns:1fr}
}

/* reduced motion: the mockup's motion is honoured as-is for most users;
   under prefers-reduced-motion the CSS entrances/reveals settle instantly
   (the JS loops have matching guards in site.js) */
@media (prefers-reduced-motion: reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{
    animation-duration:.01ms !important;
    animation-delay:.01ms !important; /* letters/cue carry inline delays — squash those too (B4 review) */
    animation-iteration-count:1 !important;
    transition-duration:.01ms !important;
  }
}