/* Hoopla - shared styles (refined-dark, unified with the homepage system) */
@import url("https://fonts.googleapis.com/css2?family=IBM+Plex+Mono:wght@400;500&family=IBM+Plex+Sans:wght@400;500;600&family=Instrument+Serif:ital@0;1&display=swap");
@import url("https://api.fontshare.com/v2/css?f[]=clash-display@400,500,600,700&display=swap");

:root{
  --bg:#0a0a0b; --panel:#101012; --ink:#f5f5f7; --body:#c4c4cc; --meta:#8a8a92;
  --hair:#ffffff1a; --red:#ff1f2b; --red-soft:#ff5a63;
  --disp:"Clash Display",system-ui,sans-serif; --mono:"IBM Plex Mono",ui-monospace,monospace;
  --sans:"IBM Plex Sans",system-ui,sans-serif; --serif:"Instrument Serif",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.5; 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-family:var(--serif); font-style:italic; font-weight:400; color:var(--red); letter-spacing:0; }

/* floating pill header (matches homepage) */
.nav{ position:sticky; top:18px; z-index:50; width:min(1400px,calc(100% - 32px)); margin:18px auto 0;
  display:flex; align-items:center; justify-content:space-between; gap:24px;
  padding:12px 14px 12px 28px; border-radius:999px;
  background:#121214cc; border:1px solid var(--hair); backdrop-filter:blur(14px); -webkit-backdrop-filter:blur(14px); }
.nav__brand{ display:inline-flex; align-items:center; }
.nav__brand img{ height:22px; width:auto; display:block; }
.nav__links{ display:flex; gap:clamp(16px,3vw,32px); font-family:var(--mono); letter-spacing:.14em; text-transform:uppercase; font-size:13px; color:#d4d4d8; padding-right:14px; }
.nav__links a{ position:relative; padding:4px 0; transition:color .25s; }
.nav__links a:hover{ color:#fff; }
.nav__links a::after{ content:""; position:absolute; left:0; right:100%; bottom:-2px; height:1px; background:var(--red); transition:right .3s; }
.nav__links a:hover::after, .nav__links a[aria-current="page"]::after{ right:0; }
.nav__links a[aria-current="page"]{ color:#fff; }

.container{ max-width:1180px; margin:0 auto; padding:0 clamp(20px,5vw,64px); }

/* page intro */
.intro{ padding:clamp(60px,9vw,104px) 0 clamp(28px,4vw,48px); border-bottom:1px solid var(--hair); }
.eyebrow{ font-family:var(--mono); letter-spacing:.22em; text-transform:uppercase; color:var(--meta); font-size:13px; display:flex; align-items:center; gap:12px; }
.eyebrow::before{ content:""; width:26px; height:2px; background:var(--red); display:inline-block; }
.h-display{ font-family:var(--disp); font-weight:600; letter-spacing:-.03em; line-height:.98; color:var(--ink); }
.intro .h-display{ font-size:clamp(44px,8vw,104px); margin:18px 0 0; }
.intro p{ font-size:clamp(18px,2.2vw,24px); color:var(--body); max-width:60ch; margin-top:20px; }

/* 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); letter-spacing:.16em; text-transform:uppercase; color:var(--red); font-size:12px; }
.card__title{ font-family:var(--disp); font-weight:600; font-size:clamp(24px,2.6vw,32px); color:var(--ink); letter-spacing:-.02em; line-height:1.04; margin:14px 0; }
.card:hover .card__title{ color:var(--red-soft); }
.card__excerpt{ color:var(--body); font-size:16px; line-height:1.6; }
.card__meta{ margin-top:auto; padding-top:22px; font-family:var(--mono); letter-spacing:.12em; text-transform:uppercase; color:var(--meta); font-size:12px; 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(30px,4.5vw,58px); }
.card--feature .card__body{ flex:1; }
.card--feature .card__n{ font-family:var(--disp); font-weight:700; font-size:clamp(80px,12vw,180px); color:transparent; -webkit-text-stroke:1px #ff1f2b40; 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:820px; }
.article__title{ font-family:var(--disp); font-weight:600; letter-spacing:-.03em; line-height:1.02; color:var(--ink); font-size:clamp(34px,5.6vw,72px); margin:16px 0; }
.article__standfirst{ font-size:clamp(19px,2.4vw,27px); color:var(--ink); line-height:1.45; max-width:54ch; margin-top:8px; }
.article__byline{ margin-top:26px; padding:18px 0; border-top:1px solid var(--hair); border-bottom:1px solid var(--hair); font-family:var(--mono); letter-spacing:.14em; text-transform:uppercase; color:var(--meta); font-size:12px; display:flex; flex-wrap:wrap; gap:10px 22px; }
.article__byline b{ color:var(--ink); font-weight:500; }
.article__hero{ margin:clamp(32px,5vw,56px) 0; aspect-ratio:16/7; background-size:cover; background-position:center; border:1px solid var(--hair); }

.prose{ max-width:720px; }
.prose h2{ font-family:var(--disp); font-weight:600; color:var(--ink); font-size:clamp(24px,3vw,36px); letter-spacing:-.02em; line-height:1.1; margin:clamp(36px,5vw,56px) 0 16px; }
.prose p{ font-size:clamp(17px,1.5vw,19px); line-height:1.75; color:var(--body); margin:0 0 22px; }
.prose p strong{ color:var(--ink); font-weight:600; }
.prose blockquote{ margin:34px 0; padding:6px 0 6px 28px; border-left:2px solid var(--red); font-family:var(--disp); font-weight:500; font-size:clamp(22px,2.8vw,30px); color:var(--ink); line-height:1.3; letter-spacing:-.01em; }
.prose ul{ margin:0 0 22px; padding-left:22px; }
.prose li{ font-size:clamp(17px,1.5vw,19px); line-height:1.7; color:var(--body); margin-bottom:10px; }
.prose a{ color:var(--red-soft); border-bottom:1px solid #ff5a6355; }
.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-weight:600; color:var(--ink); font-size:clamp(22px,2.6vw,30px); margin-bottom:8px; }
.faq__item{ border-bottom:1px solid var(--hair); padding:22px 0; }
.faq__q{ font-family:var(--disp); font-weight:600; color:var(--ink); font-size:clamp(18px,2vw,22px); margin:0 0 8px; }
.faq__a{ font-size:clamp(16px,1.4vw,18px); line-height:1.7; color:var(--body); }

/* related */
.related{ max-width:720px; margin-top:clamp(40px,6vw,64px); }
.related__title{ font-family:var(--mono); letter-spacing:.24em; text-transform:uppercase; color:var(--meta); font-size:13px; margin-bottom:18px; }
.related a{ display:block; padding:18px 0; border-top:1px solid var(--hair); font-family:var(--disp); font-weight:500; font-size:clamp(18px,2vw,23px); 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-top:1px solid var(--hair); border-bottom:1px solid var(--hair); padding:clamp(48px,8vw,96px) 0; margin-top:clamp(40px,6vw,72px); }
.cta .h-display{ font-size:clamp(34px,6vw,72px); }
.btn{ display:inline-block; margin-top:26px; font-family:var(--disp); font-weight:600; font-size:clamp(15px,2vw,20px); padding:15px 38px; border-radius:999px; color:#fff; background:var(--red); transition:transform .18s, box-shadow .18s; }
.btn:hover{ transform:translateY(-3px); box-shadow:0 14px 44px #ff1f2b55; }
.footer{ padding:48px 0; color:var(--meta); font-family:var(--mono); letter-spacing:.14em; text-transform:uppercase; font-size:12px; display:flex; flex-wrap:wrap; gap:14px 28px; justify-content:space-between; }
.footer a:hover{ color:#fff; }

/* mobile header */
@media (max-width:600px){
  .nav{ flex-wrap:wrap; gap:12px 18px; padding:14px 20px; border-radius:22px; }
  .nav__brand{ flex:0 0 100%; }
  .nav__links{ flex-wrap:wrap; gap:14px 18px; font-size:12px; padding-right:0; }
}
@media (max-width:360px){ .nav__links{ gap:12px; } }

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