/* =========================================================
   HATCHED DIGITAL - 50 REASONS
   Brutalist neon. System fonts only. No external assets.

   v2 TOKENS
     --type-base / --type-ratio  drive every h1-h3 and p size.
                                  The --t* steps below are that
                                  scale written out (16 x 1.25^n),
                                  so nothing is an ad-hoc size.
     --s1 .. --s24               a strict 4px spacing ladder.
                                  Every padding / margin / gap is
                                  one of these, so box metrics
                                  land on the 4px grid.
     --maxw 1280px               below the widest supported
                                  viewport so 1440 still has
                                  outer margin.
   Every colour literal lives in :root. None below this block.
   ========================================================= */

:root{
  /* ---- palette (style-spec.md exact) ---- */
  --black:#000;
  --bone:#f2f0e9;
  --green:#39ff14;
  --pink:#ff2bd6;
  --cyan:#00e5ff;
  --yellow:#ffe600;

  /* ---- derived surfaces + alphas (were hard-coded in v1) ---- */
  --card:#0b0b0b;
  --line:#1d1d1d;
  --dim:#c9c7c0;
  --scrim-top:rgba(0,0,0,.55);
  --scrim-bot:rgba(0,0,0,.90);
  --grid-tint:rgba(57,255,20,.07);
  --cyan-glow-0:rgba(0,229,255,0);
  --cyan-glow-55:rgba(0,229,255,.55);

  /* ---- brutalist border weight (spec: 4-8px) ---- */
  --bw:6px;
  --hair:2px;

  /* ---- type scale ---- */
  --type-base:16px;
  --type-ratio:1.25;
  --t-3:10.24px;   /* 16 / 1.25^3 */
  --t-2:12.8px;    /* 16 / 1.25^2 */
  --t-1:16px;      /* 16 / 1.25   */
  --t0:16px;       /* base         */
  --t1:20px;       /* 16 x 1.25^1 */
  --t2:25px;       /* 16 x 1.25^2 */
  --t3:31.25px;    /* 16 x 1.25^3 */
  --t4:39.06px;    /* 16 x 1.25^4 */
  --t5:48.83px;    /* 16 x 1.25^5 */
  --t6:61.04px;    /* 16 x 1.25^6 */
  --t7:76.29px;    /* 16 x 1.25^7 */
  --t8:95.37px;    /* 16 x 1.25^8 */
  --t9:119.21px;   /* 16 x 1.25^9 */
  --t10:149.01px;  /* 16 x 1.25^10 */

  /* ---- spacing ladder: strict 4px grid ---- */
  --s1:4px;   --s2:8px;   --s3:12px;  --s4:16px;
  --s5:20px;  --s6:24px;  --s8:32px;  --s10:40px;
  --s12:48px; --s16:64px; --s20:80px; --s24:96px;

  --pad:var(--s8);
  --maxw:1280px;
  --space-section:var(--s16);

  --mono:ui-monospace, "SF Mono", SFMono-Regular, Menlo, Consolas, "Liberation Mono", monospace;
  --grotesk:"Helvetica Neue", Helvetica, Arial, "Arial Black", "Segoe UI", system-ui, sans-serif;
}

*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}

html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;overflow-x:clip}

body{
  background:var(--black);
  color:var(--bone);
  font-family:var(--mono);
  font-size:var(--t0);
  line-height:1.55;
  overflow-x:clip;
  min-width:0;
}

img{max-width:100%;height:auto;display:block}
ol,ul{list-style:none}
a{color:var(--cyan)}
h1,h2,h3{font-family:var(--grotesk);font-weight:900;letter-spacing:-.02em;text-wrap:balance}
h1{font-size:var(--t0);line-height:1.1}
h2{font-size:var(--t2);line-height:1.1}
h3{font-size:var(--t1);line-height:1.2}

/* ---------- focus: always visible, never removed ---------- */
:focus-visible{outline:4px solid var(--yellow);outline-offset:3px}

/* Parked fully offscreen horizontally so it can never sit a
   few px from the viewport edge while hidden. */
.skip{
  position:absolute;left:-40rem;top:0;z-index:99;
  background:var(--yellow);color:var(--black);
  font-family:var(--mono);font-weight:700;font-size:var(--t0);
  padding:var(--s4) var(--s5);
  border:var(--bw) solid var(--black);
  text-decoration:none;text-transform:uppercase;
  min-height:44px;display:flex;align-items:center;
}
.skip:focus{left:var(--s4);top:var(--s2)}

/* =========================================================
   HEADER
   ========================================================= */
.site-head{
  position:sticky;top:0;z-index:50;
  background:var(--black);
  border-bottom:var(--bw) solid var(--bone);
}
.site-head__inner{
  max-width:var(--maxw);margin-inline:auto;
  padding:var(--s2) var(--pad);
  display:flex;align-items:center;gap:var(--s4);flex-wrap:wrap;
}
.mark{
  display:inline-flex;align-items:center;gap:var(--s3);
  text-decoration:none;color:var(--bone);
  padding:var(--s2);min-height:44px;
}
.mark__egg{
  width:24px;height:32px;flex:0 0 auto;
  background:var(--green);border:var(--s1) solid var(--bone);
  border-radius:50% 50% 50% 50% / 60% 60% 40% 40%;
}
.mark__txt{
  font-family:var(--grotesk);font-weight:900;
  font-size:var(--t1);letter-spacing:-.01em;line-height:1;
}
.mark__sub{
  display:block;font-family:var(--mono);font-weight:400;
  font-size:var(--t-3);letter-spacing:.32em;color:var(--cyan);
  margin-top:var(--s1);
}

/* ---------- nav: works with or without JS ----------
   No JS  -> the nav list is simply always visible.
   With JS -> the toggle collapses it. The toggle itself only
   renders when the JS flag is on the <html>, so the control can
   never appear while inert. */
.nav{
  flex-basis:100%;
  border-top:var(--bw) solid var(--bone);
  margin-top:var(--s2);padding-top:var(--s2);
}
html.js .nav{display:none}
html.js .nav.is-open{display:block}
.nav__list{display:grid;gap:var(--s1)}
.nav__list a{
  display:flex;align-items:center;
  min-height:44px;padding:var(--s2) var(--s3);
  color:var(--bone);text-decoration:none;
  font-family:var(--mono);font-size:var(--t-1);
  letter-spacing:.12em;text-transform:uppercase;
  border:var(--s1) solid transparent;
}
.nav__list a:hover{border-color:var(--green);color:var(--green);background:var(--black)}
.navtoggle{
  margin-left:auto;
  display:none;align-items:center;gap:var(--s3);
  min-height:48px;min-width:48px;
  padding:var(--s3) var(--s4);
  background:var(--yellow);color:var(--black);
  border:var(--bw) solid var(--bone);
  font-family:var(--mono);font-weight:700;
  font-size:var(--t-1);letter-spacing:.12em;cursor:pointer;
}
html.js .navtoggle{display:inline-flex}
.navtoggle:hover{background:var(--green)}
.navtoggle__bars{display:grid;gap:var(--s1);width:20px}
.navtoggle__bars i{display:block;height:var(--s1);background:var(--black);width:100%}

/* =========================================================
   HERO
   ========================================================= */
.ticker{
  overflow:hidden;
  background:var(--green);color:var(--black);
  border-bottom:var(--bw) solid var(--black);
  padding:var(--s1) 0;
}
.ticker__track{display:flex;width:max-content;will-change:transform}
.ticker__set{
  font-family:var(--grotesk);font-weight:900;
  font-size:var(--t-1);letter-spacing:.06em;
  white-space:nowrap;padding-right:var(--s2);
}

.hero{
  border-bottom:var(--bw) solid var(--bone);
  padding-top:var(--space-section);
  background:
    linear-gradient(180deg,var(--scrim-top),var(--scrim-bot)),
    repeating-linear-gradient(0deg,var(--grid-tint) 0 var(--hair),transparent var(--hair) var(--s1));
}
.hero__inner{
  max-width:var(--maxw);margin-inline:auto;
  padding-inline:var(--pad);
  display:grid;gap:var(--s6);justify-items:start;
}
.hero__kicker{
  display:inline-flex;align-items:center;gap:var(--s3);
  font-size:var(--t-2);letter-spacing:.18em;text-transform:uppercase;
  color:var(--bone);
  border:var(--s1) solid var(--cyan);
  padding:var(--s2) var(--s3);
  line-height:1.5;
}
.blink{width:12px;height:12px;flex:0 0 auto;background:var(--pink)}

.hero__title{display:grid;gap:var(--s1);justify-items:start}
.hero__num{font-size:clamp(76px,13vw,232px);line-height:.8;color:var(--green)}
.hero__word{font-size:clamp(39px,6.6vw,118px);line-height:.86;color:var(--bone)}
.hero__word--alt{color:var(--pink)}
.hero__word--cyan{color:var(--cyan)}

.hero__lede{
  max-width:46ch;
  font-size:var(--t1);color:var(--bone);line-height:1.5;
  border-left:var(--bw) solid var(--yellow);
  padding-left:var(--s4);
}
.hero__lede em{color:var(--yellow);font-style:italic}
.hero__meta{
  font-size:var(--t-2);letter-spacing:.2em;color:var(--cyan);
  text-transform:uppercase;line-height:1.5;
}

.hero__art{
  max-width:var(--maxw);margin:var(--s12) auto 0;
  border-top:var(--bw) solid var(--bone);
}
.hero__art img{width:100%;filter:saturate(1.15) contrast(1.05)}

/* =========================================================
   BLOCKS
   P0-3: every block carries --space-section of air above its
   content, so adjacent sections clear the rhythm at 1440 and
   at 320. The border sits on the block edge, the padding
   creates the space. ========================================= */
.block{
  max-width:var(--maxw);margin-inline:auto;
  padding-top:var(--space-section);
  padding-bottom:var(--space-section);
  scroll-margin-top:96px;
}
.blockbar{
  display:flex;align-items:center;gap:var(--s3) var(--s4);flex-wrap:wrap;
  padding:var(--s3) var(--pad);
  background:var(--green);color:var(--black);
  border-block:var(--bw) solid var(--black);
}
.blockbar--cyan{background:var(--cyan)}
.blockbar--pink{background:var(--pink)}
.blockbar--yellow{background:var(--yellow)}

.blockbar__no{
  font-size:var(--t-2);letter-spacing:.18em;text-transform:uppercase;
  border:var(--hair) solid var(--black);padding:var(--s1) var(--s2);
  line-height:1.5;
}
.blockbar__title{
  font-size:var(--t3);line-height:1;letter-spacing:-.02em;
}
.blockbar__range{
  margin-left:auto;
  font-family:var(--grotesk);font-weight:900;
  font-size:var(--t2);line-height:1;
}

/* ---------- the 50 cards ----------
   P0-4: the v1 grid bled 3px outside the viewport via a
   negative margin, which pushed card text to 21px from the
   edge. The collapse effect is now done with a wrapper-free
   outline instead, so the grid itself stays inside the gutter. */
.reasons{
  display:grid;
  /* 10 divides evenly by 2 and 5, so pin even track counts: the grid always
     ends flush, no ragged final row at any width. */
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:var(--s1);
  /* Inline padding IS the page gutter: the grid runs full-bleed,
     so this is what keeps card text >=24px (desktop) / >=16px
     (<=390) from the viewport edge. Block padding collapses the
     hairlines only. */
  padding:var(--s4) var(--pad);
  margin-top:calc(-1 * var(--s1));
}
.reason{
  position:relative;
  padding:var(--s6);
  background:var(--card);
  min-width:0;overflow:hidden;
  outline:var(--hair) solid var(--line);
  outline-offset:calc(-1 * var(--hair));
}
.reason:hover{background:var(--bone);color:var(--black)}

.reason__num{
  display:block;
  font-family:var(--grotesk);font-weight:900;
  font-size:var(--t3);line-height:.9;color:var(--green);
  margin-bottom:var(--s2);
}
.reason:hover .reason__num{color:var(--black)}
.reason:nth-child(3n+2) .reason__num{color:var(--pink)}
.reason:nth-child(3n+2):hover .reason__num{color:var(--black)}
.reason:nth-child(3n+3) .reason__num{color:var(--cyan)}
.reason:nth-child(3n+3):hover .reason__num{color:var(--black)}

.reason__head{
  font-size:var(--t1);line-height:1.2;letter-spacing:-.01em;
  margin-bottom:var(--s2);text-transform:uppercase;
}
.reason__body{font-size:var(--t-1);line-height:1.5;color:var(--dim)}
.reason:hover .reason__body{color:var(--black)}

.reason--last{background:var(--yellow);color:var(--black)}
.reason--last .reason__num{color:var(--black)}
.reason--last .reason__body{color:var(--black)}
.reason--last:hover{background:var(--green)}

/* =========================================================
   CLOSER
   ========================================================= */
.closer{
  padding-top:var(--space-section);
  border-bottom:var(--bw) solid var(--bone);
  background:var(--black);
  overflow:hidden;
}
.closer__art{margin:0}
.closer__art img{width:100%;opacity:.5}

.closer__inner{
  position:relative;
  max-width:var(--maxw);margin-inline:auto;
  padding:var(--space-section) var(--pad);
  display:grid;gap:var(--s5);justify-items:start;
}
.closer__title{font-size:var(--t7);color:var(--yellow);line-height:.9}
.closer__cursor{color:var(--green)}
.closer__body{max-width:40ch;color:var(--bone);line-height:1.5}

.btn{
  display:inline-flex;align-items:center;justify-content:center;
  min-height:52px;padding:var(--s4) var(--s6);
  background:var(--green);color:var(--black);
  border:var(--bw) solid var(--bone);
  font-family:var(--grotesk);font-weight:900;
  font-size:var(--t1);letter-spacing:.06em;text-decoration:none;
}
.btn:hover{background:var(--yellow)}

/* =========================================================
   FOOTER
   ========================================================= */
.site-foot{background:var(--black);border-top:var(--bw) solid var(--green)}
.site-foot__inner{
  max-width:var(--maxw);margin-inline:auto;
  padding:var(--s12) var(--pad);
  display:grid;gap:var(--s4);
}
.site-foot__mark{
  font-family:var(--grotesk);font-weight:900;
  font-size:var(--t2);color:var(--bone);line-height:1;
}
.site-foot__sep{color:var(--green)}
.site-foot__note{color:var(--yellow);font-size:var(--t-1);line-height:1.5}
.site-foot__legal{color:var(--dim);font-size:var(--t-2);line-height:1.5;max-width:52ch}
.site-foot__top a{
  display:inline-flex;align-items:center;justify-content:center;
  min-height:44px;
  color:var(--cyan);text-decoration:none;
  font-size:var(--t-1);letter-spacing:.14em;text-transform:uppercase;
  border:var(--s1) solid var(--cyan);padding:var(--s2) var(--s3);
}
.site-foot__top a:hover{background:var(--cyan);color:var(--black)}

/* =========================================================
   NARROWER SCREENS
   ========================================================= */
@media (max-width:560px){
  :root{--bw:5px;--space-section:var(--s10);--pad:var(--s4)}
  .reasons{grid-template-columns:1fr}
  .blockbar__range{margin-left:0}
  .hero__meta{letter-spacing:.12em}
  .blockbar__title{font-size:var(--t2)}
  .closer__title{font-size:var(--t4)}
  .site-foot__mark{font-size:var(--t1)}
}

/* v1 used a --space-section of 40px at <=390; keep that floor
   explicit so the rhythm never collapses on the narrowest
   supported screen. */
@media (max-width:390px){
  :root{--space-section:var(--s10)}
  .reason{padding:var(--s5)}
  .reason__num{font-size:var(--t2)}
}

/* =========================================================
   WIDE SCREENS
   ========================================================= */
@media (min-width:1100px){
  .reasons{grid-template-columns:repeat(5,minmax(0,1fr))}
  .site-head__inner{flex-wrap:nowrap}
  .nav{flex-basis:auto;border:0;margin:0;padding:0;margin-left:auto}
  html.js .nav{display:block !important}
  html.js .navtoggle{display:none !important}
  .nav__list{display:flex;gap:var(--s1)}
  .nav__list a{padding:var(--s2) var(--s3);font-size:var(--t-2)}
}

@media (pointer:coarse){
  .nav__list a{min-height:48px}
}