/* =========================================================
   SDTW SUB-PAGE STYLES
   Shared shell for: program · ecosystem · venue · about · faq · recap
   Mirrors the press.html / brand-kit.html visual system.
   ========================================================= */

*,*::before,*::after{box-sizing:border-box}
html,body{margin:0;padding:0;background:var(--sdtw-charcoal);color:var(--sdtw-bone);font-family:var(--font-sans);-webkit-font-smoothing:antialiased}
a{color:inherit;text-decoration:none}
img{display:block;max-width:100%}
::selection{background:var(--sdtw-bone);color:var(--sdtw-charcoal)}

/* -- NAV -------------------------------------------------- */
.nav{display:flex;align-items:center;justify-content:space-between;padding:22px 64px;border-bottom:.5px solid var(--rule-soft);position:sticky;top:0;background:rgba(41,41,43,.85);backdrop-filter:blur(8px);z-index:20}
.nav .brand{display:flex;gap:14px;align-items:center}
.nav .brand img{height:32px}
.nav .brand .pill{font-family:var(--font-display);text-transform:uppercase;font-size:11px;letter-spacing:.14em;border:.5px solid var(--rule);padding:4px 8px 3px;color:var(--fg-2)}
.nav-links{display:flex;gap:26px;list-style:none;margin:0;padding:0;font-family:var(--font-display);text-transform:uppercase;font-size:12px;letter-spacing:.12em}
.nav-links a{color:var(--fg-2);transition:color .12s}
.nav-links a:hover,.nav-links a.active{color:var(--sdtw-bone)}
.nav-links a.active{border-bottom:1px solid var(--sdtw-parchment);padding-bottom:2px}
.nav-cta{display:flex;gap:10px;align-items:center}
.nav-cta a{font-family:var(--font-display);text-transform:uppercase;font-size:12px;letter-spacing:.12em;padding:10px 14px;border:.5px solid var(--rule)}
.nav-cta a.primary{background:var(--sdtw-bone);color:var(--sdtw-charcoal);border-color:var(--sdtw-bone)}
.nav-cta a.primary:hover{background:var(--sdtw-parchment);border-color:var(--sdtw-parchment)}
.nav a.back{font-family:var(--font-display);text-transform:uppercase;font-size:12px;letter-spacing:.12em;color:var(--fg-2)}

@media (max-width:1080px){
  .nav-links{display:none}
}

/* -- HERO ------------------------------------------------- */
.hero{padding:96px 64px 64px;max-width:1280px;margin:0 auto}
.hero .eye{font-family:var(--font-display);text-transform:uppercase;font-size:12px;letter-spacing:.18em;color:var(--fg-2);margin-bottom:28px;display:flex;align-items:center;gap:12px;flex-wrap:wrap}
.hero .eye .sq{width:8px;height:8px;background:var(--sdtw-parchment)}
.hero h1{font-family:var(--font-display);text-transform:uppercase;font-size:clamp(56px,8vw,128px);line-height:.9;font-weight:500;letter-spacing:-.005em;margin:0 0 28px;max-width:14ch}
.hero h1 em{font-family:var(--font-serif);font-style:italic;font-weight:400;text-transform:none;color:var(--sdtw-parchment);letter-spacing:-.02em}
.hero .lede{font-family:var(--font-serif);font-size:clamp(20px,1.7vw,26px);line-height:1.4;max-width:780px;color:var(--fg-1);margin:0 0 8px}
.hero .meta-row{margin-top:36px;display:flex;gap:18px;flex-wrap:wrap;font-family:var(--font-display);text-transform:uppercase;font-size:11px;letter-spacing:.14em;color:var(--fg-3)}
.hero .meta-row span::before{content:"■  ";color:var(--sdtw-parchment)}

/* -- SECTIONS --------------------------------------------- */
.sec{max-width:1280px;margin:0 auto;padding:64px 64px;border-top:.5px solid var(--rule-soft)}
.sec.invert{background:var(--sdtw-bone);color:var(--sdtw-charcoal);max-width:none;padding-left:64px;padding-right:64px}
.sec.invert .head h2,.sec.invert h2,.sec.invert h3,.sec.invert h4{color:var(--sdtw-charcoal)}
.sec.invert .head .lead,.sec.invert p{color:var(--fg-on-light-2)}
.sec .head{display:flex;justify-content:space-between;align-items:flex-end;margin-bottom:40px;gap:40px;flex-wrap:wrap}
.sec .head .eyebrow{font-family:var(--font-display);text-transform:uppercase;font-size:11px;letter-spacing:.16em;color:var(--fg-3);margin-bottom:14px;display:block}
.sec .head h2{font-family:var(--font-display);text-transform:uppercase;font-size:clamp(32px,4vw,56px);line-height:.95;margin:0;font-weight:500;letter-spacing:-.005em;max-width:16ch}
.sec .head h2 em{font-family:var(--font-serif);font-style:italic;font-weight:400;text-transform:none;color:var(--sdtw-parchment);letter-spacing:-.02em}
.sec.invert .head h2 em{color:var(--sdtw-charcoal);opacity:.7}
.sec .head .lead{font-family:var(--font-serif);font-size:17px;color:var(--fg-2);max-width:480px;line-height:1.45}

/* -- FOOTER ----------------------------------------------- */
.foot{padding:28px 64px;border-top:.5px solid var(--rule-soft);display:flex;justify-content:space-between;font-family:var(--font-display);text-transform:uppercase;font-size:11px;letter-spacing:.14em;color:var(--fg-3);flex-wrap:wrap;gap:14px}
.foot a{color:var(--fg-2)}
.foot a:hover{color:var(--sdtw-bone)}

/* -- BUTTONS ---------------------------------------------- */
.btn{display:inline-flex;align-items:center;gap:10px;font-family:var(--font-display);text-transform:uppercase;font-size:12px;letter-spacing:.12em;padding:14px 20px;border:.5px solid var(--rule);color:var(--sdtw-bone);transition:background .15s,color .15s,border-color .15s}
.btn:hover{background:var(--sdtw-bone);color:var(--sdtw-charcoal);border-color:var(--sdtw-bone)}
.btn.primary{background:var(--sdtw-bone);color:var(--sdtw-charcoal);border-color:var(--sdtw-bone)}
.btn.primary:hover{background:var(--sdtw-parchment);border-color:var(--sdtw-parchment)}
.btn.ink{background:var(--sdtw-charcoal);color:var(--sdtw-bone);border-color:var(--sdtw-charcoal)}
.btn.ink:hover{background:var(--sdtw-bone);color:var(--sdtw-charcoal);border-color:var(--sdtw-bone)}

/* -- RESPONSIVE ------------------------------------------- */
@media (max-width:960px){
  .hero,.sec{padding-left:32px;padding-right:32px}
  .hero{padding-top:64px}
  .sec.invert{padding-left:32px;padding-right:32px}
  .sec .head{display:block}
  .sec .head h2{margin-bottom:18px}
  .nav{padding:18px 24px}
  .nav-links{display:none}
  .foot{padding:24px 32px;flex-direction:column;gap:10px}
}