/* Scarlett Works — built to the exemplar DNA (design/EXEMPLAR_DNA_2026-08-04.md).
   Warm paper, warm near-black, one saturated accent, serif-italic accent word,
   mono micro-labels, square corners, hairline rules, offset blocks not blur. */
:root{
  --paper:#FBF8F2; --paper-2:#F2ECE2; --ink:#171715; --ink-2:#3A3733;
  --muted:#6B655C; --rule:#DCD4C6; --scarlet:#FF2400; --cyan:#00DBFF;
  --sans:"Segoe UI",-apple-system,BlinkMacSystemFont,"Helvetica Neue",Arial,sans-serif;
  --serif:Georgia,"Times New Roman",serif;
  --mono:ui-monospace,"SF Mono",Menlo,Consolas,monospace;
  --measure:74rem; --band:clamp(4rem,7vw,6.5rem);
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--paper);color:var(--ink);
  font:400 17px/1.65 var(--sans);letter-spacing:-0.003em}
img,svg{max-width:100%;height:auto}
a{color:inherit}
.skip{position:absolute;left:-9999px}
.skip:focus{left:1rem;top:1rem;background:var(--ink);color:var(--paper);padding:.6rem 1rem;z-index:9}
.wrap{width:min(100% - 3rem,var(--measure));margin-inline:auto}
.eyebrow,.tag{font:600 11px/1.4 var(--mono);letter-spacing:.14em;text-transform:uppercase}
.eyebrow{color:var(--scarlet);margin:0 0 1.25rem}
.tag{color:var(--muted)}
.top{background:var(--paper);border-bottom:1px solid var(--rule);position:relative}
.top::before{content:"";position:absolute;inset:0 auto 0 0;width:4px;background:var(--scarlet)}
.strip{display:flex;justify-content:space-between;gap:1rem;padding:.55rem 0;
  font:600 10px/1.4 var(--mono);letter-spacing:.14em;text-transform:uppercase;color:var(--muted)}
.bar{display:flex;align-items:center;gap:2rem;padding:1.1rem 0;flex-wrap:wrap}
.logo{display:flex;align-items:center;gap:.6rem;text-decoration:none;font-weight:700;
  letter-spacing:-.01em;font-size:1rem}
.mark{width:26px;height:26px;background:var(--scarlet);
  border-radius:14px 14px 14px 2px;display:inline-block;flex:none}
nav.main{display:flex;gap:1.6rem;margin-left:auto;flex-wrap:wrap}
nav.main a{text-decoration:none;color:var(--ink-2);font-size:.95rem;padding-bottom:2px}
nav.main a[aria-current]{color:var(--ink);border-bottom:2px solid var(--scarlet)}
.cta-top{text-decoration:none;font:600 12px/1 var(--mono);letter-spacing:.1em;
  text-transform:uppercase;border:1px solid var(--ink);padding:.75rem 1.1rem}
.cta-top:hover{background:var(--ink);color:var(--paper)}
.hero{padding:var(--band) 0 calc(var(--band) * .7)}
.hero-grid{display:grid;grid-template-columns:1.05fr .95fr;gap:clamp(2rem,5vw,4.5rem);align-items:center}
h1{font-size:clamp(2.9rem,7.2vw,5.4rem);line-height:.94;letter-spacing:-.035em;
  font-weight:800;margin:0 0 1.6rem;max-width:12ch}
h1 em,h2 em{font-family:var(--serif);font-style:italic;font-weight:400;color:var(--scarlet);
  letter-spacing:-.01em}
.lead{font-size:1.18rem;color:var(--ink-2);max-width:46ch;margin:0 0 2.2rem}
.actions{display:flex;align-items:center;gap:1.75rem;flex-wrap:wrap}
.btn{display:inline-block;text-decoration:none;background:var(--scarlet);color:#fff;
  padding:1rem 1.6rem;font:700 12px/1 var(--mono);letter-spacing:.11em;text-transform:uppercase}
.btn:hover{background:var(--ink)}
.btn.ghost{background:transparent;color:var(--ink);border:1px solid var(--ink)}
.btn.ghost:hover{background:var(--ink);color:var(--paper)}
.textlink{text-decoration:none;border-bottom:1px solid var(--ink);padding-bottom:3px;
  font:600 12px/1 var(--mono);letter-spacing:.1em;text-transform:uppercase}
.offset{position:relative;isolation:isolate}
.offset::after{content:"";position:absolute;inset:16px -16px -16px 16px;background:var(--scarlet);z-index:-1}
.offset>svg{position:relative;display:block;background:var(--ink);width:100%}
section{padding:var(--band) 0}
.band-paper2{background:var(--paper-2);border-block:1px solid var(--rule)}
.band-ink{background:var(--ink);color:var(--paper-2)}
.band-ink .eyebrow{color:var(--cyan)}
.band-ink h2,.band-ink h3{color:var(--paper)}
.band-ink p{color:#C9C3B8}
h2{font-size:clamp(1.9rem,3.6vw,2.9rem);line-height:1.06;letter-spacing:-.028em;
  font-weight:800;margin:0 0 1rem;max-width:18ch}
h3{font-size:1.12rem;letter-spacing:-.012em;margin:0 0 .45rem;font-weight:700}
p{margin:0 0 1rem}
.head-2col{display:grid;grid-template-columns:1fr 1fr;gap:clamp(1.5rem,4vw,4rem);
  align-items:end;margin-bottom:3rem}
.head-2col p{color:var(--muted);margin:0;max-width:46ch}
.grid{display:grid;gap:1px;background:var(--rule);border:1px solid var(--rule)}
.cols-4{grid-template-columns:repeat(4,1fr)}
.cols-3{grid-template-columns:repeat(3,1fr)}
.cols-2{grid-template-columns:repeat(2,1fr)}
.card{background:var(--paper);padding:1.9rem 1.6rem;display:flex;flex-direction:column;gap:.5rem}
.band-paper2 .card{background:var(--paper-2)}
.card .num{font:600 10px/1 var(--mono);letter-spacing:.14em;color:var(--scarlet)}
.card p{color:var(--muted);font-size:.97rem;margin:0}
.card.live{background:var(--ink)}
.card.live h3{color:#fff}
.card.live p{color:#C9C3B8}
.status{font:600 10px/1 var(--mono);letter-spacing:.12em;text-transform:uppercase}
.status.on{color:var(--cyan)}
.status.later{color:var(--muted)}
.rows{border-top:1px solid var(--rule);margin:0}
.row{display:grid;grid-template-columns:14rem 1fr;gap:2rem;padding:1.15rem 0;
  border-bottom:1px solid var(--rule)}
.row dt{font-weight:700}
.row dd{margin:0;color:var(--muted)}
footer{background:var(--ink);color:var(--paper-2);padding:var(--band) 0 2.5rem}
footer a{color:var(--paper-2)}
.foot-grid{display:grid;grid-template-columns:1.4fr 1fr 1fr;gap:2.5rem;margin-bottom:3rem}
.foot-nav{display:flex;flex-direction:column;gap:.6rem}
.foot-nav a{text-decoration:none;color:#C9C3B8;font-size:.95rem}
.foot-base{display:flex;justify-content:space-between;gap:1rem;padding-top:1.5rem;
  border-top:1px solid #35322E;font:600 10px/1.4 var(--mono);letter-spacing:.14em;
  text-transform:uppercase;color:#8C857A}
:focus-visible{outline:3px solid var(--scarlet);outline-offset:3px}
@media (max-width:900px){
  .hero-grid,.head-2col,.foot-grid{grid-template-columns:1fr}
  .cols-4{grid-template-columns:repeat(2,1fr)}
  .cols-3,.cols-2{grid-template-columns:1fr}
  .row{grid-template-columns:1fr;gap:.25rem}
  nav.main{margin-left:0;width:100%;order:3}
}
@media (prefers-reduced-motion:reduce){*{transition:none!important;animation:none!important}}