/* Hoopla - shared styles v3 (FORMA design language: Electric Crimson / near-black / Archivo+Onest) */
@import url("https://fonts.googleapis.com/css2?family=Archivo:ital,wdth,wght@0,62..125,100..900&family=Onest:wght@300..800&display=swap");

:root{
  --bg:#00030C; --panel:#0A0E17; --ink:#FFFFFF; --body:#B9BEC7; --meta:#8A8F98;
  --hair:#ffffff14; --red:#FF1F2B; --red-soft:#FF5A63; --grey-light:#F5F5F5;
  --disp:"Archivo",Impact,system-ui,sans-serif;
  --mono:"Onest",system-ui,sans-serif;
  --sans:"Onest",system-ui,sans-serif; --serif:"Archivo",Georgia,serif;
}
*{ box-sizing:border-box; margin:0; padding:0; }
html{ scroll-behavior:smooth; }
body{ background:var(--bg); color:var(--body); font-family:var(--sans);
  -webkit-font-smoothing:antialiased; line-height:1.6; overflow-x:hidden; }
a{ color:inherit; text-decoration:none; }
::selection{ background:var(--red); color:#fff; }
img{ max-width:100%; display:block; }
.wrap{ position:relative; z-index:1; }
.mark{ font-style:normal; font-weight:inherit; color:var(--red); letter-spacing:0; }

/* intro logo reveal (curtain) — ported from v2 homepage */
.curtain{ position:fixed; inset:0; z-index:200; background:var(--bg); display:flex; align-items:center; justify-content:center;
  animation:curtainUp 1.35s cubic-bezier(.76,0,.24,1) .85s forwards; }
.curtain img{ width:min(70vw,800px); height:auto; animation:logoIn .8s cubic-bezier(.2,.7,.2,1) both; }
@keyframes logoIn{ from{ opacity:0; transform:scale(.86); } to{ opacity:1; transform:scale(1); } }
@keyframes curtainUp{ to{ transform:translateY(-101%); visibility:hidden; } }
@media (prefers-reduced-motion:reduce){ .curtain{ display:none; } }

/* top bar */
.nav{ position:sticky; top:0; z-index:50; width:100%; margin:0 auto;
  display:flex; align-items:center; justify-content:space-between; gap:24px;
  padding:20px clamp(20px,3vw,40px); border-radius:0;
  background:#00030Cf2; border-bottom:1px solid var(--hair); backdrop-filter:blur(10px); -webkit-backdrop-filter:blur(10px); }
.nav__brand{ display:inline-flex; align-items:center; }
.nav__brand img{ height:20px; width:auto; display:block; }
.nav__links{ display:flex; gap:clamp(16px,3vw,34px); font-family:var(--mono); font-weight:600; letter-spacing:.16em; text-transform:uppercase; font-size:11.5px; color:#E7E9EE; padding-right:6px; }
.nav__links a{ position:relative; padding:4px 0; transition:color .25s; }
.nav__links a:hover{ color:var(--red); }
.nav__links a[aria-current="page"]{ color:var(--red); }
.nav__links a::after{ content:none; }

.container{ max-width:1440px; margin:0 auto; padding:0 clamp(20px,3vw,40px); }

/* page intro */
.intro{ padding:clamp(64px,9vw,110px) 0 clamp(30px,4vw,52px); border-bottom:1px solid var(--hair); }
.eyebrow{ font-family:var(--mono); font-weight:500; letter-spacing:.15em; text-transform:uppercase; color:var(--meta); font-size:12px; display:inline-flex; align-items:center; gap:0; }
.eyebrow::before{ content:"["; margin-right:6px; color:var(--meta); width:auto; height:auto; background:none; display:inline; }
.eyebrow::after{ content:"]"; margin-left:6px; color:var(--meta); }
.h-display{ font-family:var(--disp); font-variation-settings:'wdth' 116; font-weight:840; text-transform:uppercase; letter-spacing:-.015em; line-height:.98; color:var(--ink); }
.intro .h-display{ font-size:clamp(38px,7vw,96px); margin:20px 0 0; }
.intro p{ font-size:clamp(17px,2vw,22px); color:var(--body); max-width:60ch; margin-top:22px; }

/* post grid (index) */
.grid{ display:grid; grid-template-columns:repeat(auto-fit, minmax(330px,1fr)); gap:1px; background:var(--hair); border:1px solid var(--hair); margin:clamp(40px,6vw,72px) 0 clamp(64px,10vw,120px); }
.card{ background:var(--bg); padding:clamp(26px,3vw,42px); display:flex; flex-direction:column; min-height:300px; transition:background .3s; }
.card:hover{ background:var(--panel); }
.card__tag{ font-family:var(--mono); font-weight:600; letter-spacing:.16em; text-transform:uppercase; color:var(--red); font-size:11.5px; }
.card__title{ font-family:var(--disp); font-variation-settings:'wdth' 108; font-weight:740; text-transform:uppercase; font-size:clamp(20px,2.2vw,27px); color:var(--ink); letter-spacing:.005em; line-height:1.1; margin:14px 0; }
.card:hover .card__title{ color:var(--red-soft); }
.card__excerpt{ color:var(--body); font-size:15.5px; line-height:1.65; }
.card__meta{ margin-top:auto; padding-top:22px; font-family:var(--mono); font-weight:500; letter-spacing:.13em; text-transform:uppercase; color:var(--meta); font-size:11.5px; display:flex; gap:16px; }
.card--feature{ grid-column:1 / -1; flex-direction:row; gap:48px; align-items:center; }
.card--feature .card__title{ font-size:clamp(26px,3.8vw,48px); }
.card--feature .card__body{ flex:1; }
.card--feature .card__n{ font-family:var(--disp); font-variation-settings:'wdth' 120; font-weight:900; font-size:clamp(80px,12vw,180px); color:transparent; -webkit-text-stroke:1px #FF1F2B55; line-height:.8; }
@media (max-width:760px){ .card--feature{ flex-direction:column; align-items:flex-start; gap:20px; } .card--feature .card__n{ display:none; } }

/* article */
.article{ padding:clamp(48px,7vw,88px) 0 clamp(56px,8vw,110px); }
.article__head{ max-width:880px; }
.article__title{ font-family:var(--disp); font-variation-settings:'wdth' 112; font-weight:820; text-transform:uppercase; letter-spacing:-.008em; line-height:1.02; color:var(--ink); font-size:clamp(30px,4.8vw,64px); margin:16px 0; }
.article__standfirst{ font-size:clamp(18px,2.2vw,25px); color:var(--ink); line-height:1.5; max-width:54ch; margin-top:10px; font-weight:400; }
.article__byline{ margin-top:26px; padding:18px 0; border-top:1px solid var(--hair); border-bottom:1px solid var(--hair); font-family:var(--mono); font-weight:500; letter-spacing:.13em; text-transform:uppercase; color:var(--meta); font-size:11.5px; display:flex; flex-wrap:wrap; gap:10px 22px; }
.article__byline b{ color:var(--ink); font-weight:600; }
.article__hero{ margin:clamp(32px,5vw,56px) 0; aspect-ratio:16/7; background-size:cover; background-position:center; border:1px solid var(--hair);
  filter:saturate(1.02) contrast(1.02); }

.prose{ max-width:720px; }
.prose h2{ font-family:var(--disp); font-variation-settings:'wdth' 108; font-weight:760; text-transform:uppercase; color:var(--ink); font-size:clamp(21px,2.6vw,31px); letter-spacing:.005em; line-height:1.15; margin:clamp(36px,5vw,56px) 0 16px; }
.prose h2 .mark{ color:var(--red); }
.prose p{ font-size:clamp(16.5px,1.5vw,18.5px); line-height:1.78; color:var(--body); margin:0 0 22px; }
.prose p strong{ color:var(--ink); font-weight:600; }
.prose blockquote{ margin:36px 0; padding:26px 28px; border-left:none; background:var(--panel); border:1px solid var(--hair);
  font-family:var(--disp); font-variation-settings:'wdth' 105; font-weight:680; text-transform:uppercase; font-size:clamp(19px,2.4vw,26px); color:var(--ink); line-height:1.32; letter-spacing:.01em; }
.prose ul{ margin:0 0 22px; padding-left:22px; }
.prose li{ font-size:clamp(16.5px,1.5vw,18.5px); line-height:1.72; color:var(--body); margin-bottom:10px; }
.prose a{ color:var(--red-soft); border-bottom:1px solid #FF1F2B55; }
.prose a:hover{ color:#fff; border-color:#fff; }

/* FAQ (AEO) */
.faq{ max-width:720px; margin-top:clamp(44px,6vw,72px); border-top:1px solid var(--hair); padding-top:34px; }
.faq h2{ font-family:var(--disp); font-variation-settings:'wdth' 108; font-weight:780; text-transform:uppercase; color:var(--ink); font-size:clamp(20px,2.4vw,28px); margin-bottom:8px; }
.faq__item{ border-bottom:1px solid var(--hair); padding:22px 0; }
.faq__q{ font-family:var(--disp); font-variation-settings:'wdth' 105; font-weight:700; text-transform:uppercase; color:var(--ink); font-size:clamp(16px,1.8vw,20px); margin:0 0 8px; letter-spacing:.01em; }
.faq__a{ font-size:clamp(15.5px,1.4vw,17.5px); line-height:1.72; color:var(--body); }

/* related */
.related{ max-width:720px; margin-top:clamp(40px,6vw,64px); }
.related__title{ font-family:var(--mono); font-weight:500; letter-spacing:.15em; text-transform:uppercase; color:var(--meta); font-size:12px; margin-bottom:18px; }
.related__title::before{ content:"["; margin-right:6px; }
.related__title::after{ content:"]"; margin-left:6px; }
.related a{ display:block; padding:18px 0; border-top:1px solid var(--hair); font-family:var(--disp); font-variation-settings:'wdth' 106; font-weight:680; text-transform:uppercase; font-size:clamp(16px,1.9vw,21px); color:var(--ink); letter-spacing:.01em; transition:color .25s, transform .25s; transform-origin:left; }
.related a:hover{ color:var(--red); transform:translateX(10px); }

/* CTA + footer */
.cta{ border:none; background:var(--red); color:#fff; padding:clamp(52px,8vw,100px) clamp(24px,4vw,56px); margin-top:clamp(48px,7vw,84px); }
.cta .eyebrow{ color:#FFD3DD; }
.cta .eyebrow::before,.cta .eyebrow::after{ color:#FFD3DD; }
.cta .h-display{ font-size:clamp(32px,5.6vw,68px); color:#fff; }
.cta .h-display .mark{ color:#00030C; }
.btn{ display:inline-block; margin-top:28px; font-family:var(--mono); font-weight:700; letter-spacing:.12em; text-transform:uppercase; font-size:12.5px; padding:17px 38px; border-radius:999px; color:var(--bg); background:#fff; transition:transform .3s cubic-bezier(.22,1,.36,1); }
.btn:hover{ transform:scale(1.05); box-shadow:none; }
.footer{ padding:44px 0 28px; color:var(--meta); font-family:var(--mono); font-weight:500; letter-spacing:.13em; text-transform:uppercase; font-size:11.5px; display:flex; flex-wrap:wrap; gap:14px 28px; justify-content:space-between; }
.footer a:hover{ color:var(--red); }

/* giant footer wordmark */
.megaword{ position:relative; width:100%; overflow:hidden; line-height:.78; pointer-events:none; user-select:none; }
.megaword span{ display:block; font-family:var(--disp); font-variation-settings:'wdth' 122; font-weight:900; text-transform:uppercase;
  font-size:clamp(64px,17.5vw,250px); letter-spacing:-.012em; color:var(--ink); text-align:center; transform:translateY(16%); white-space:nowrap; }
@media (max-width:560px){ .megaword span{ font-size:22.5vw; } }

/* burger + fullscreen mobile menu */
.burger{ display:none; background:none; border:0; color:#fff; font-size:26px; line-height:1; cursor:pointer; padding:4px 8px; }
.mmenu{ position:fixed; inset:0; z-index:120; display:none; flex-direction:column; padding:22px clamp(20px,5vw,32px) 40px;
  background:linear-gradient(160deg,#9E0F2C,#5E0517); color:#fff; }
.mmenu.open{ display:flex; }
.mmenu__top{ display:flex; justify-content:space-between; align-items:center; }
.mmenu nav{ margin:auto 0; display:flex; flex-direction:column; gap:6px; text-align:center; }
.mmenu nav a{ font-family:var(--disp); font-variation-settings:'wdth' 110; font-weight:780; font-size:clamp(30px,9vw,46px);
  text-transform:uppercase; letter-spacing:.02em; padding:10px 0; color:#fff; }
.mmenu nav a:active{ color:#00030C; }
.mmenu__foot{ text-align:center; display:flex; flex-direction:column; gap:14px; }
.mmenu__foot p{ font-size:13px; opacity:.85; }
.mmenu__cta{ display:inline-flex; align-items:center; justify-content:center; background:#fff; color:#00030C;
  font-family:var(--sans); font-weight:700; font-size:12.5px; letter-spacing:.12em; text-transform:uppercase;
  border-radius:999px; padding:17px 34px; margin:0 auto; }
@media (max-width:860px){
  .nav__links{ display:none; }
  .burger{ display:block; }
}
@media (prefers-reduced-motion:no-preference){
  .mmenu.open{ animation:mmenuIn .35s cubic-bezier(.22,1,.36,1); }
  @keyframes mmenuIn{ from{ opacity:0; transform:translateY(10px);} to{ opacity:1; transform:none; } }
}

@media (prefers-reduced-motion:reduce){ html{ scroll-behavior:auto; } }

/* homepage-grade footer for all pages */
.sitefoot{ background:var(--bg); padding-top:clamp(56px,7vw,84px); overflow:hidden; border-top:1px solid var(--hair); margin-top:clamp(48px,7vw,84px); }
.sitefoot__grid{ display:grid; grid-template-columns:1.4fr 1fr 1fr 1.2fr 1fr; gap:28px; padding-bottom:50px; }
.sitefoot__grid h4{ font-size:11px; letter-spacing:.16em; text-transform:uppercase; color:var(--meta); font-weight:600; margin-bottom:14px; }
.sitefoot__grid a,.sitefoot__grid span{ display:block; font-size:13.5px; color:var(--body); margin-bottom:8px; }
.sitefoot__grid a:hover{ color:var(--red); }
.sitefoot__brand p{ margin-top:12px; font-size:12.5px; color:var(--meta); }
.sitefoot__brand img{ height:20px; width:auto; }
.sitefoot__row{ display:flex; justify-content:space-between; align-items:center; border-top:1px solid var(--hair); padding:20px 0; font-size:10.5px; letter-spacing:.14em; text-transform:uppercase; color:var(--meta); flex-wrap:wrap; gap:12px; }
.sitefoot__row a:hover{ color:var(--red); }
@media (max-width:1060px){ .sitefoot__grid{ grid-template-columns:1fr 1fr; } }

/* page hero band (red-duotone image behind intro) */
.intro.pagehero{ position:relative; overflow:hidden; border-bottom:none; padding:clamp(120px,16vw,200px) 0 clamp(44px,6vw,72px); }
.pagehero__bg{ position:absolute; inset:0; background-size:cover; background-position:center 30%; z-index:0; }
.pagehero__bg::after{ content:""; position:absolute; inset:0;
  background:radial-gradient(120% 90% at 50% 30%,transparent 25%,rgba(0,3,12,.6) 80%),linear-gradient(to bottom,rgba(0,3,12,.55),rgba(0,3,12,.25) 40%,rgba(0,3,12,.88)); }
.intro.pagehero > .container, .intro.pagehero > *:not(.pagehero__bg){ position:relative; z-index:1; }
.intro.pagehero .h-display{ color:#fff; }

/* SVG megaword: guaranteed edge-to-edge at every width */
.megaword svg{ display:block; width:100%; height:auto; }
.megaword svg text{ fill:var(--ink); font-family:var(--disp); font-variation-settings:'wdth' 122; font-weight:900; font-size:290px; letter-spacing:-2px; }
.mmenu .nav__brand img{ filter:brightness(0) invert(1); }