/* ============================================================
   CRYPTO WAR ROOM — rhythm
   One type scale and one spacing scale for the whole landing page.

   Loaded LAST, after home.css, so it wins. The room lead's rhythm
   sheet, mapped onto this page's own class names:
       .hero            -> #top (.vh--fit)
       .sec__head       -> .rm__head / .dx__head
       .display         -> .rm__display / .dx__display (.v-display in the hero)
       .display--sm     -> .rm__copy h3 (the room name)
       .copy .lede      -> .rm__copy p
       .tabs / .tab     -> .rm__rail / .rm__tab
       .panel           -> .rm__panel
       .room-facts      -> .rm__facts
       .pager           -> .rm__foot
       .facts           -> .v-facts
       .cta-row         -> .v-cta
   Section ids carry the selectors so they beat home.css's older
   overrides without !important. The closing block (.close/.risk) is
   left out: the page has none.
   Nothing here changes markup or colours -- only size and air.
   ============================================================ */

/* ---------- 1. the scale ---------------------------------- */
:root{
  --t-hero:clamp(36px,4.9vw,66px);   /* the hero headline, once per page */
  --t-display:clamp(32px,4.2vw,58px);/* section headlines */
  --t-sub:clamp(23px,2.3vw,33px);    /* room names, sub-headings */
  --t-lede:clamp(15.5px,1.12vw,17px);/* the paragraph under a headline */
  --t-body:15px;                     /* everything else you read */
  --t-small:13.5px;                  /* captions, notes */
  --t-label:11px;                    /* mono labels, in caps */

  --s-1:8px; --s-2:14px; --s-3:22px; --s-4:34px;
  --s-5:clamp(44px,4.4vw,64px);      /* head to body */
  --s-6:clamp(80px,8.5vw,128px);     /* the section's own top and bottom */
  --wrap:1240px;
}

/* ---------- 2. section rhythm ----------------------------- */
/* every section breathes the same; the one-screen stretch is off */
section.stats, #what, #dex{padding:var(--s-6) 24px;min-height:0}
#what > *, #dex .sec__inner{max-width:var(--wrap);margin-left:auto;margin-right:auto}
#what .rm__head, #dex .dx__head{text-align:center;max-width:64ch;margin:0 auto var(--s-5)}
#what .rm__head > *, #dex .dx__head > *{margin-left:auto;margin-right:auto}
#what .rm__head .v-eyebrow, #dex .dx__head .v-eyebrow{margin:0 auto var(--s-3)}
#what .rm__display, #dex .dx__display{margin:0 auto}
#what .rm__head p, #dex .dx__lede{margin:var(--s-3) auto 0;max-width:62ch;text-wrap:pretty}
@media (max-width:860px){ section.stats, #what, #dex{padding:clamp(56px,12vw,80px) 18px} }

/* ---------- 3. headlines ---------------------------------- */
#what .rm__display, #dex .dx__display{font-size:var(--t-display);line-height:1.02;letter-spacing:-.014em;text-wrap:balance}
#what .rm__copy h3{font-size:var(--t-sub);line-height:1.06;letter-spacing:-.01em;margin:0}
/* the quiet second line always takes its own line */
#what .rm__display br{display:inline}
#what .rm__display em, #dex .dx__display em{display:block}
#what .rm__display em::before{content:none}
#top .v-display{font-size:var(--t-hero);line-height:1;margin-top:var(--s-3)}

/* ---------- 4. body copy ---------------------------------- */
#top .v-lede, #what .rm__head p, #dex .dx__lede{font-size:var(--t-lede);line-height:1.7}
#what .rm__copy p{font-size:var(--t-body);line-height:1.68;max-width:48ch;margin:var(--s-3) 0 0}
#what .rm__copy p + p{margin-top:var(--s-2)}
#top .v-eyebrow, #what .v-eyebrow, #dex .v-eyebrow{font-size:var(--t-label);letter-spacing:.22em}

/* ---------- 5. hero --------------------------------------- */
#top .v-lede{margin-top:var(--s-3);max-width:60ch}
#top .v-cta{margin-top:var(--s-4)}
#top .v-facts{margin-top:var(--s-4);gap:0 36px}
#top .v-facts span{font-size:10.5px;letter-spacing:.18em}
/* the chain rail is part of the hero, not a section of its own */
.chains-strip{padding:var(--s-4) 20px calc(var(--s-4) + 6px)}
.chains-strip .chains span{font-size:10.5px;letter-spacing:.18em}

/* ---------- 6. stats row ---------------------------------- */
section.stats .stat{padding:var(--s-1) 30px 0}
section.stats .stat__n{font-size:clamp(38px,3.9vw,56px);line-height:1}
section.stats .stat__label{margin-top:var(--s-2);font-size:var(--t-label);letter-spacing:.2em}
section.stats .stat__note{margin-top:var(--s-1);font-size:var(--t-small);line-height:1.6;max-width:28ch}

/* ---------- 7. rooms switcher ----------------------------- */
#what .rm__rail{margin-top:0;margin-bottom:var(--s-5)}
#what .rm__tab{font-size:var(--t-label);letter-spacing:.18em;padding:14px 18px}
#what .rm__panels{margin-top:0}
#what .rm__panel{gap:clamp(36px,4vw,64px)}
#what .rm__facts{margin-top:var(--s-4);padding-top:var(--s-3);font-size:var(--t-small);line-height:1.7;gap:var(--s-1)}
#what .rm__foot{margin-top:var(--s-5)}

/* ---------- 8. DEX section -------------------------------- */
#dex .dex, #dex .sec__inner{column-gap:clamp(40px,4.4vw,64px)}
#dex .step{padding:var(--s-4) 0}
#dex .step:first-child{padding-top:0}
#dex .step h3{font-size:16.5px;letter-spacing:-.005em}
#dex .step p{margin-top:var(--s-1);font-size:var(--t-body);line-height:1.68;max-width:50ch}
#dex .checks{margin-top:var(--s-2);gap:6px}
#dex .checks li{font-size:12.5px;line-height:1.6}
#dex .note{margin-top:var(--s-2);font-size:var(--t-small)}
#dex .chainlist{margin-top:var(--s-2)}
#dex .dex-facts{margin-top:var(--s-5);padding-top:var(--s-4)}

/* ---------- 9. footer ------------------------------------- */
/* the footer takes the same top as a section, so the last join matches */
.foot .foot__grid{padding-top:var(--s-6)}

/* ---------- 10. the seams --------------------------------- */
/* Two dark sections in a row read as one long slab. A hairline at the
   top of each, faded at both ends. Painted as a background layer rather
   than ::after, because ::after already carries the scan lines and the
   DEX grid here. */
section.stats, #what{
  background-image:linear-gradient(90deg,transparent,rgba(255,255,255,.07) 22%,rgba(255,255,255,.07) 78%,transparent);
  background-size:100% 1px;background-repeat:no-repeat;background-position:top
}
#dex{
  background-image:linear-gradient(90deg,transparent,rgba(255,255,255,.09) 22%,rgba(255,255,255,.09) 78%,transparent);
  background-size:100% 1px;background-repeat:no-repeat;background-position:top
}


/* ---------- DEX chain logos ------------------------------- */
/* round, in each chain's own colour; the name shows on hover */
#dex .chainlist--logos{display:flex;flex-wrap:wrap;gap:10px;margin-top:var(--s-2)}
#dex .chainlist--logos .chainlogo{
  position:relative;display:grid;place-items:center;width:38px;height:38px;padding:0;border-radius:50%;
  background:var(--bg);color:var(--fg);border:1px solid rgba(255,255,255,.14);
  box-shadow:0 0 0 3px rgba(0,0,0,.35),0 6px 18px rgba(0,0,0,.45);
  font-size:0;letter-spacing:0;text-transform:none;transition:transform .16s ease}
#dex .chainlist--logos .chainlogo svg{width:18px;height:18px;fill:currentColor;display:block}
#dex .chainlist--logos .chainlogo:hover{transform:translateY(-2px)}
#dex .chainlist--logos .chainlogo__name{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0;padding:0}
#dex .chainlist--logos .chainlogo::after{
  content:attr(data-name);position:absolute;left:50%;bottom:calc(100% + 8px);transform:translate(-50%,4px);
  padding:4px 8px;border-radius:6px;background:#0c0f13;border:1px solid #232c36;white-space:nowrap;
  font-family:"JetBrains Mono",ui-monospace,monospace;font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;color:#cfd6dd;
  opacity:0;pointer-events:none;transition:opacity .14s,transform .14s}
#dex .chainlist--logos .chainlogo:hover::after{opacity:1;transform:translate(-50%,0)}



/* the counting figure keeps the serif's weight and colour */
section.stats .stat__v{font:inherit;color:inherit}