@charset "utf-8";
/* ==========================================================================
   KINGOFAEOVITHURS.COM — "THE MANIFESTO"
   A neo-brutalist poster system. Pure black, pure white, one acid yellow,
   one hot magenta used sparingly. Hard borders, hard offset shadows,
   zero radius, full-bleed black bands.
   Display: Arial Black. Metadata: monospace. Body: plain grotesque.
   Single stylesheet. No imports. No external resources.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. TOKENS
   -------------------------------------------------------------------------- */
:root{
  color-scheme: light;

  /* Colour — committed light-on-white with black blocks. No soft greys. */
  --ink:            #000000;
  --paper:          #ffffff;
  --acid:           #e9ff00;
  --acid-shade:     #d4e800;
  --hot:            #ff2d6f;
  --paper-tint:     #f5f5ef;
  --meta:           #3a3a3a;   /* 10.8:1 on white — metadata only */
  --meta-invert:    #d8d8d8;   /* 11.6:1 on black — metadata only */

  /* Type */
  --display: 'Arial Black', 'Arial Bold', 'Helvetica Neue', Impact, Haettenschweiler, sans-serif;
  --body:    'Helvetica Neue', Helvetica, Arial, 'Segoe UI', system-ui, sans-serif;
  --mono:    ui-monospace, 'Cascadia Mono', 'SF Mono', SFMono-Regular, Menlo, Consolas, 'Courier New', monospace;

  --step--2: clamp(.68rem, .66rem + .10vw, .74rem);
  --step--1: clamp(.79rem, .76rem + .16vw, .88rem);
  --step-0:  clamp(1rem,   .97rem + .18vw, 1.09rem);
  --step-1:  clamp(1.12rem, 1.05rem + .38vw, 1.34rem);
  --step-2:  clamp(1.32rem, 1.14rem + .90vw, 1.95rem);
  --step-3:  clamp(1.75rem, 1.32rem + 2.10vw, 3.05rem);
  --step-4:  clamp(2.25rem, 1.45rem + 3.90vw, 4.55rem);
  --step-5:  clamp(2.70rem, 1.30rem + 6.60vw, 6.60rem);

  /* Space */
  --s-1:.35rem; --s-2:.6rem;  --s-3:1rem;   --s-4:1.5rem;
  --s-5:2.25rem; --s-6:3.25rem; --s-7:4.75rem; --s-8:6.75rem;

  /* Structure */
  --radius:0px;
  --bw:3px;
  --border:      var(--bw) solid var(--ink);
  --border-thin: 2px solid var(--ink);
  --border-fat:  5px solid var(--ink);
  --shadow:      6px 6px 0 var(--ink);
  --shadow-sm:   4px 4px 0 var(--ink);
  --shadow-lg:   10px 10px 0 var(--ink);
  --shadow-snap: 9px 9px 0 var(--ink);

  --measure: 68ch;
  --max: 1260px;
  --header-h: 62px;
  --t: 170ms cubic-bezier(.2,.7,.3,1);
}

@media (min-width: 900px){
  :root{ --header-h: 70px; }
}

/* --------------------------------------------------------------------------
   2. RESET / BASE
   -------------------------------------------------------------------------- */
*,*::before,*::after{ box-sizing:border-box; }

html{
  -webkit-text-size-adjust:100%;
  scroll-behavior:smooth;
  background:var(--paper);
}

body{
  margin:0;
  background:var(--paper);
  color:var(--ink);
  font-family:var(--body);
  font-size:var(--step-0);
  line-height:1.62;
  letter-spacing:-.003em;
  overflow-x:hidden;
  text-rendering:optimizeLegibility;
}

::selection{ background:var(--acid); color:var(--ink); }
::-moz-selection{ background:var(--acid); color:var(--ink); }

img,svg{ max-width:100%; height:auto; display:block; }

h1,h2,h3,h4{
  font-family:var(--display);
  font-weight:900;
  line-height:.94;
  letter-spacing:-.035em;
  margin:0 0 var(--s-3);
  text-wrap:balance;
}
h1{ font-size:var(--step-4); }
h2{ font-size:var(--step-3); }
h3{ font-size:var(--step-1); line-height:1.05; letter-spacing:-.02em; }
h4{ font-size:var(--step-0); line-height:1.15; letter-spacing:-.01em; }

p{ margin:0 0 var(--s-3); }
p:last-child{ margin-bottom:0; }

a{ color:var(--ink); text-decoration:underline; text-underline-offset:.18em; text-decoration-thickness:2px; }
a:hover{ background:var(--acid); text-decoration-color:var(--ink); }

strong,b{ font-weight:800; }

ul,ol{ margin:0 0 var(--s-3); padding-left:1.15rem; }
li{ margin:.42rem 0; }
li::marker{ color:var(--ink); font-weight:700; }

hr{ border:0; border-top:var(--border); margin:var(--s-5) 0; }

:focus-visible{
  outline:4px solid var(--hot);
  outline-offset:3px;
}

/* --------------------------------------------------------------------------
   3. LAYOUT PRIMITIVES
   -------------------------------------------------------------------------- */
.wrap{ width:min(var(--max), 100% - 2.4rem); margin-inline:auto; }
.wrap--narrow{ width:min(80ch, 100% - 2.4rem); }

.prose{ max-width:var(--measure); }
/* When .prose sits on the same element as .wrap, keep the container at full
   wrap width and constrain the children instead — otherwise margin-inline:auto
   centres the measure and breaks the left-hand grid line. */
.wrap.prose{ max-width:none; }
.wrap.prose > *{ max-width:var(--measure); }
.wrap.prose > .table-wrap{ max-width:100%; }
.prose h2{ margin-top:var(--s-6); }
.prose h2:first-child{ margin-top:0; }
.prose h3{ margin-top:var(--s-5); }

.sect{ padding:var(--s-7) 0; border-top:var(--border); }
.sect:first-of-type{ border-top:0; }
.sect--tight{ padding:var(--s-6) 0; }

/* Full-bleed black band */
.band{ background:var(--ink); color:var(--paper); padding:var(--s-7) 0; }
.band a{ color:var(--acid); }
.band a:hover{ background:var(--acid); color:var(--ink); }
.band h2,.band h3{ color:var(--paper); }
.band--acid{ background:var(--acid); color:var(--ink); }
.band--acid a{ color:var(--ink); }
.band--acid a:hover{ background:var(--ink); color:var(--acid); }

[id]{ scroll-margin-top: calc(var(--header-h) + 1.25rem); }

.skip{
  position:absolute; left:-9999px; top:0; z-index:200;
  background:var(--acid); color:var(--ink);
  font-family:var(--mono); font-size:var(--step--1); font-weight:700;
  padding:.85rem 1.2rem; border:var(--border); text-decoration:none;
}
.skip:focus{ left:.6rem; top:.6rem; }

/* Monospace metadata / eyebrow / counters */
.mono{ font-family:var(--mono); }
.eyebrow{
  font-family:var(--mono); font-size:var(--step--1);
  text-transform:uppercase; letter-spacing:.14em; font-weight:700;
  margin:0 0 var(--s-3);
}
.counter{
  font-family:var(--mono); font-size:var(--step--1); font-weight:700;
  letter-spacing:.16em; text-transform:uppercase;
  display:inline-block; padding:.3rem .55rem;
  border:var(--border-thin); background:var(--acid); color:var(--ink);
}
.band .counter{ border-color:var(--acid); }

/* --------------------------------------------------------------------------
   4. CROWN (CSS-drawn, squares only)
   -------------------------------------------------------------------------- */
.crown{
  display:inline-grid; grid-template-columns:repeat(5, 5px);
  gap:2px; align-items:end;
  width:33px; height:24px; position:relative; flex:0 0 auto;
  padding-bottom:7px;
}
.crown i{ display:block; background:var(--acid); }
.crown i:nth-child(1){ height:9px; }
.crown i:nth-child(2){ height:15px; }
.crown i:nth-child(3){ height:22px; }
.crown i:nth-child(4){ height:15px; }
.crown i:nth-child(5){ height:9px; }
.crown::after{
  content:""; position:absolute; left:0; bottom:0;
  width:33px; height:5px; background:var(--acid);
}
.crown--ink i, .crown--ink::after{ background:var(--ink); }
.crown--lg{ grid-template-columns:repeat(5, 10px); gap:4px; width:66px; height:48px; padding-bottom:14px; }
.crown--lg i:nth-child(1){ height:18px; }
.crown--lg i:nth-child(2){ height:30px; }
.crown--lg i:nth-child(3){ height:44px; }
.crown--lg i:nth-child(4){ height:30px; }
.crown--lg i:nth-child(5){ height:18px; }
.crown--lg::after{ width:66px; height:10px; }

/* --------------------------------------------------------------------------
   5. HEADER + NAVIGATION
   -------------------------------------------------------------------------- */
.site-head{
  position:sticky; top:0; z-index:100;
  background:var(--ink); color:var(--paper);
  border-bottom:var(--border-fat);
}

.head-bar{
  display:flex; align-items:stretch; gap:0;
  min-height:var(--header-h); min-width:0;
}

.wordmark{
  display:flex; align-items:center; gap:.55rem;
  padding:.55rem .9rem .55rem 0;
  color:var(--paper); text-decoration:none;
  font-family:var(--display); letter-spacing:-.04em; line-height:.9;
  font-size:clamp(.88rem, .74rem + .55vw, 1.22rem);
  text-transform:uppercase;
  flex:0 1 auto; min-width:0;
}
.wordmark:hover{ background:transparent; }
.wordmark:hover .wordmark-t{ background:var(--acid); color:var(--ink); }
.wordmark-t{ display:block; min-width:0; padding:.15rem .3rem; transition:background var(--t), color var(--t); }
.wordmark-sub{
  display:block; font-family:var(--mono); font-size:.56em;
  letter-spacing:.12em; font-weight:700; margin-top:.18rem;
  white-space:nowrap;
}

/* Small phones: shrink the bar so the wordmark and the menu button always fit. */
@media (max-width: 430px){
  .wordmark{ gap:.4rem; padding-right:.5rem; font-size:.85rem; }
  .wordmark-sub{ font-size:.5em; letter-spacing:.06em; }
  .crown{ grid-template-columns:repeat(5, 4px); gap:2px; width:26px; height:20px; padding-bottom:6px; }
  .crown i:nth-child(1),.crown i:nth-child(5){ height:7px; }
  .crown i:nth-child(2),.crown i:nth-child(4){ height:12px; }
  .crown i:nth-child(3){ height:18px; }
  .crown::after{ width:26px; height:4px; }
  .mega > summary{ padding:0 .65rem; gap:.4rem; font-size:var(--step--2); }
  .mega .burger span{ width:16px; }
}

.nav-main{ display:none; margin-left:auto; }
.nav-main ul{ display:flex; margin:0; padding:0; list-style:none; height:100%; }
.nav-main li{ margin:0; display:flex; }
.nav-main a{
  display:flex; align-items:center; padding:0 .95rem;
  color:var(--paper); text-decoration:none;
  font-family:var(--mono); font-size:var(--step--1); font-weight:700;
  text-transform:uppercase; letter-spacing:.06em;
  border-left:var(--border-thin); border-color:#333;
  transition:background var(--t), color var(--t);
}
.nav-main a:hover{ background:var(--acid); color:var(--ink); }
.nav-main a[aria-current="page"]{ background:var(--acid); color:var(--ink); }

@media (min-width: 980px){
  .nav-main{ display:block; }
}

/* --- Mega panel (<details>, works with JS off) --- */
.mega{ margin-left:auto; display:flex; }
@media (min-width: 980px){ .mega{ margin-left:0; } }

.mega > summary{
  list-style:none; cursor:pointer;
  display:flex; align-items:center; gap:.5rem;
  padding:0 1rem; min-height:var(--header-h);
  background:var(--acid); color:var(--ink);
  font-family:var(--mono); font-size:var(--step--1); font-weight:700;
  text-transform:uppercase; letter-spacing:.08em;
  border-left:var(--border-fat);
  min-width:44px;
}
.mega > summary::-webkit-details-marker{ display:none; }
.mega > summary::marker{ content:""; }
.mega > summary:hover{ background:var(--paper); }
.mega .burger{ display:inline-grid; gap:3px; }
.mega .burger span{ display:block; width:18px; height:3px; background:var(--ink); }
.mega[open] > summary{ background:var(--hot); }
.mega[open] .sum-open{ display:none; }
.mega:not([open]) .sum-close{ display:none; }

.mega-panel{
  position:absolute; left:0; right:0; top:100%;
  background:var(--paper); color:var(--ink);
  border-bottom:var(--border-fat);
  max-height:calc(100vh - var(--header-h));
  overflow-y:auto;
  padding:var(--s-4) 0 var(--s-5);
}
.mega-grid{
  display:grid; gap:var(--s-4);
  grid-template-columns:1fr;
}
@media (min-width: 640px){ .mega-grid{ grid-template-columns:repeat(2,1fr); } }
@media (min-width: 980px){ .mega-grid{ grid-template-columns:repeat(4,1fr); } }

.mega-col h2{
  font-family:var(--mono); font-size:var(--step--1); font-weight:700;
  text-transform:uppercase; letter-spacing:.14em; line-height:1.3;
  margin:0 0 .7rem; padding-bottom:.4rem; border-bottom:var(--border);
}
.mega-col ul{ list-style:none; margin:0; padding:0; display:grid; gap:.4rem; }
.mega-col li{ margin:0; }
.tile{
  display:block; padding:.55rem .7rem; min-height:44px;
  border:var(--border-thin); background:var(--paper);
  text-decoration:none; font-weight:700; font-size:var(--step--1);
  line-height:1.3; letter-spacing:-.01em;
  transition:transform var(--t), box-shadow var(--t), background var(--t);
}
.tile:hover{ background:var(--acid); transform:translate(-2px,-2px); box-shadow:var(--shadow-sm); }
.tile[aria-current="page"]{ background:var(--acid); box-shadow:var(--shadow-sm); }

.mega-note{
  font-family:var(--mono); font-size:var(--step--2); line-height:1.5;
  color:var(--meta); margin:var(--s-4) 0 0; padding-top:var(--s-3);
  border-top:var(--border-thin);
}

/* --------------------------------------------------------------------------
   6. BREADCRUMBS / PAGER / RELATED
   -------------------------------------------------------------------------- */
.crumbs{
  border-bottom:var(--border-thin);
  font-family:var(--mono); font-size:var(--step--1);
  overflow-x:auto; white-space:nowrap;
  -webkit-overflow-scrolling:touch;
}
.crumbs ol{ list-style:none; display:flex; gap:.5rem; margin:0; padding:0; align-items:center; min-height:46px; }
.crumbs li{ margin:0; display:flex; gap:.5rem; align-items:center; }
.crumbs li + li::before{ content:"/"; color:var(--meta); }
.crumbs a{
  text-decoration:none; border-bottom:2px solid var(--acid);
  display:inline-flex; align-items:center; min-height:44px;
}
.crumbs a:hover{ background:var(--acid); }
.crumbs [aria-current="page"]{ color:var(--meta); }

.pager{
  display:grid; gap:var(--s-3); grid-template-columns:1fr;
  margin-top:var(--s-5);
}
@media (min-width: 720px){ .pager{ grid-template-columns:1fr 1fr; } }
.pager a{
  display:block; padding:var(--s-3); min-height:44px;
  border:var(--border); background:var(--paper); text-decoration:none;
  box-shadow:var(--shadow-sm);
  transition:transform var(--t), box-shadow var(--t), background var(--t);
}
.pager a:hover{ transform:translate(-2px,-2px); box-shadow:var(--shadow-snap); background:var(--acid); }
.pager .dir{
  display:block; font-family:var(--mono); font-size:var(--step--2);
  text-transform:uppercase; letter-spacing:.14em; font-weight:700; color:var(--meta);
  margin-bottom:.3rem;
}
.pager .to{ font-family:var(--display); font-size:var(--step-1); letter-spacing:-.03em; line-height:1.02; display:block; }
.pager .prev{ text-align:left; }
.pager .next{ text-align:right; grid-column:2; }

.rel-grid{
  display:grid; gap:var(--s-3);
  grid-template-columns:repeat(auto-fill, minmax(230px,1fr));
}
.rel-card{
  border:var(--border); background:var(--paper); padding:var(--s-3);
  box-shadow:var(--shadow-sm); text-decoration:none; display:block;
  transition:transform var(--t), box-shadow var(--t), background var(--t);
}
.rel-card:hover{ transform:translate(-2px,-2px); box-shadow:var(--shadow-snap); background:var(--acid); }
.rel-card h3{ margin:0 0 .35rem; font-size:var(--step-0); }
.rel-card p{ margin:0; font-size:var(--step--1); color:var(--meta); line-height:1.45; }
.rel-card:hover p{ color:var(--ink); }

/* --------------------------------------------------------------------------
   7. HERO
   -------------------------------------------------------------------------- */
.hero{
  background:var(--paper);
  padding:var(--s-6) 0 var(--s-7);
  border-bottom:var(--border-fat);
  position:relative;
}
.hero--home{ padding-top:var(--s-6); }
.hero .kicker{
  display:inline-flex; align-items:center; gap:.5rem;
  font-family:var(--mono); font-size:var(--step--1); font-weight:700;
  text-transform:uppercase; letter-spacing:.12em;
  background:var(--ink); color:var(--acid);
  padding:.45rem .75rem; margin-bottom:var(--s-4);
}
.hero h1{
  font-size:var(--step-5);
  text-transform:uppercase;
  margin:0 0 var(--s-4);
  max-width:18ch;
}
.hero--page h1{ font-size:var(--step-4); max-width:22ch; }
.hero .lead{
  font-size:var(--step-1); line-height:1.42; max-width:56ch;
  margin:0;
}
.hero-rule{
  height:14px; background:var(--acid); border:var(--border);
  margin:var(--s-4) 0; max-width:100%;
}

/* Colophon line: the publication date, set as press metadata under the rule. */
.dateline{
  display:flex; align-items:center; gap:.6rem; flex-wrap:wrap;
  font-family:var(--mono); font-size:var(--step--2); font-weight:700;
  text-transform:uppercase; letter-spacing:.18em; color:var(--ink);
  margin:0 0 var(--s-4);
}
.dateline__k{
  background:var(--ink); color:var(--acid);
  padding:.3rem .55rem; flex:0 0 auto;
}
.dateline time{
  border-bottom:var(--border-thin); padding-bottom:.18rem;
  white-space:nowrap;
}
.dateline__x{
  flex:1 1 2rem; min-width:1.5rem; height:0;
  border-top:var(--border-thin);
}

/* Wide screens: the lead and the answer capsule sit side by side, everything
   else spans the full measure of the poster. */
@media (min-width: 1080px){
  .hero > .wrap{
    display:grid;
    grid-template-columns:minmax(0,1.05fr) minmax(0,1fr);
    column-gap:var(--s-6); align-items:start;
  }
  .hero > .wrap > *{ grid-column:1 / -1; }
  .hero > .wrap > .kicker{ justify-self:start; }
  .hero > .wrap > .lead{ grid-column:1; align-self:center; }
  .hero > .wrap > .capsule{ grid-column:2; margin-top:0; max-width:none; }
  .hero > .wrap > .cta,
  .hero > .wrap > .stats{ margin-top:var(--s-5); }
}

/* --------------------------------------------------------------------------
   8. ANSWER CAPSULE / SLAB / QUOTE
   -------------------------------------------------------------------------- */
.capsule{
  border:var(--border-fat); background:var(--paper);
  box-shadow:var(--shadow-lg);
  margin:var(--s-5) 0;
  max-width:60ch;
}
.capsule__label{
  background:var(--ink); color:var(--acid);
  font-family:var(--mono); font-size:var(--step--1); font-weight:700;
  text-transform:uppercase; letter-spacing:.14em;
  padding:.5rem .85rem;
  display:flex; justify-content:space-between; gap:1rem; flex-wrap:wrap;
}
.capsule__body{ padding:var(--s-4); }
.capsule__body p{ font-size:var(--step-1); line-height:1.45; }
.capsule__body p:first-child{ margin-top:0; }
.band .capsule{ background:var(--paper); color:var(--ink); box-shadow:6px 6px 0 var(--acid); }
.band .capsule a{ color:var(--ink); }

.slab{
  background:var(--ink); color:var(--paper);
  border:var(--border); box-shadow:var(--shadow);
  padding:var(--s-5); margin:var(--s-5) 0;
}
.slab .q{
  font-family:var(--mono); font-size:var(--step--1); font-weight:700;
  text-transform:uppercase; letter-spacing:.14em; color:var(--acid);
  margin:0 0 .5rem;
}
.slab .a{
  font-family:var(--display); font-size:var(--step-3); line-height:.95;
  letter-spacing:-.04em; text-transform:uppercase; margin:0;
  overflow-wrap:anywhere; word-break:break-word;
}
/* Long unbroken strings (an email address) must not push the page sideways. */
.slab .a:has(a[href^="mailto:"]){ font-size:clamp(1rem,6.4vw,var(--step-3)); }
.slab p:last-child{ margin-bottom:0; }
.slab .foot-note{ font-family:var(--mono); font-size:var(--step--1); color:var(--meta-invert); margin-top:var(--s-3); }

.quote{
  margin:var(--s-5) 0; padding:var(--s-4) var(--s-4) var(--s-4) var(--s-5);
  border:var(--border); border-left:14px solid var(--acid);
  background:var(--paper); box-shadow:var(--shadow-sm);
  font-family:var(--display); font-size:var(--step-2); line-height:1.06;
  letter-spacing:-.03em; text-transform:uppercase;
}
.quote p{ margin:0; }
.quote cite{
  display:block; font-family:var(--mono); font-size:var(--step--1);
  font-style:normal; letter-spacing:.1em; text-transform:uppercase;
  font-weight:700; color:var(--meta); margin-top:var(--s-3);
}

.pull{
  font-family:var(--display); text-transform:uppercase; letter-spacing:-.04em;
  font-size:var(--step-2); line-height:1; margin:var(--s-5) 0;
  border-top:var(--border-fat); border-bottom:var(--border-fat);
  padding:var(--s-4) 0;
}

/* --------------------------------------------------------------------------
   9. STAT STRIP
   -------------------------------------------------------------------------- */
.stats{
  display:grid; grid-template-columns:repeat(2,1fr);
  border:var(--border); background:var(--ink); gap:var(--bw);
  margin:var(--s-5) 0;
}
@media (min-width: 760px){ .stats{ grid-template-columns:repeat(4,1fr); } }
.stat{ background:var(--paper); padding:var(--s-3) var(--s-3) var(--s-4); }
.stat:nth-child(2){ background:var(--acid); }
.stat .n{
  font-family:var(--display); font-size:var(--step-3); line-height:.9;
  letter-spacing:-.05em; display:block;
}
.stat .l{
  font-family:var(--mono); font-size:var(--step--2); font-weight:700;
  text-transform:uppercase; letter-spacing:.12em; color:var(--meta);
  margin-top:.5rem; display:block; line-height:1.4;
}
.stat:nth-child(2) .l{ color:var(--ink); }

/* --------------------------------------------------------------------------
   10. THE REASON CARD — signature component
   -------------------------------------------------------------------------- */
.reasons{
  display:grid; gap:var(--s-4);
  grid-template-columns:repeat(auto-fill, minmax(min(100%, 330px), 1fr));
}

.reason{
  position:relative;
  border:var(--border); background:var(--paper);
  box-shadow:var(--shadow-sm);
  padding:var(--s-4) var(--s-4) var(--s-4);
  display:flex; flex-direction:column;
  transition:transform var(--t), box-shadow var(--t);
}
.reason:hover,.reason:focus-within{
  transform:translate(-2px,-2px);
  box-shadow:var(--shadow-snap);
}
.reason__top{
  display:flex; align-items:baseline; justify-content:space-between;
  gap:var(--s-3); margin-bottom:var(--s-2);
}
.reason__num{
  font-family:var(--mono); font-weight:700;
  font-size:clamp(1.6rem, 1.2rem + 1.4vw, 2.4rem);
  line-height:.85; letter-spacing:-.05em;
  color:var(--ink);
}
.reason__anchor{
  font-family:var(--mono); font-size:var(--step--1); font-weight:700;
  text-decoration:none; color:var(--meta);
  border:var(--border-thin); padding:.15rem .5rem; line-height:1.2;
  min-width:54px; min-height:44px; text-align:center;
  display:inline-flex; align-items:center; justify-content:center;
  align-self:flex-start;
}
.reason__anchor:hover{ background:var(--acid); color:var(--ink); }
.reason h3{
  font-size:var(--step-1); text-transform:uppercase;
  margin:0 0 0; letter-spacing:-.025em;
}
.reason h3::after{
  content:""; display:block; height:9px; width:2.75rem;
  background:var(--acid); margin-top:.55rem;
  transition:width 240ms cubic-bezier(.2,.7,.3,1);
}
.reason:hover h3::after,.reason:focus-within h3::after{ width:100%; }
.reason p{
  margin:var(--s-3) 0 0; font-size:var(--step--1); line-height:1.55;
}
/* Compact reason index — homepage only. Titles and numbers; the full text of
   every reason lives on /100-reasons-vithurs-is-king-of-aeo/. */
.rindex{
  list-style:none; margin:var(--s-5) 0 var(--s-5); padding:0;
  border-top:var(--border);
  display:grid; grid-template-columns:repeat(auto-fill, minmax(min(100%, 320px), 1fr));
  column-gap:var(--s-5);
}
.rindex li{ margin:0; border-bottom:var(--border-thin); }
.rindex a{
  display:flex; align-items:center; gap:.9rem;
  min-height:48px; padding:.6rem .5rem;
  text-decoration:none; color:var(--ink);
  transition:background var(--t), padding-left var(--t);
}
.rindex a:hover,.rindex a:focus-visible{ background:var(--acid); padding-left:.95rem; }
.rindex__n{
  font-family:var(--mono); font-weight:700; font-size:var(--step--1);
  letter-spacing:.08em; color:var(--meta); flex:0 0 auto;
}
.rindex a:hover .rindex__n{ color:var(--ink); }
.rindex__t{
  font-family:var(--display); text-transform:uppercase;
  font-size:var(--step--1); letter-spacing:-.01em; line-height:1.15;
}

/* Sticky group headers on the 100-reasons page */
.groupnav{
  position:sticky; top:var(--header-h); z-index:60;
  background:var(--acid); border-bottom:var(--border-fat);
  border-top:var(--border-fat);
}
.groupnav .inner{
  display:flex; gap:.45rem; align-items:center;
  height:56px; overflow-x:auto; overflow-y:hidden;
  -webkit-overflow-scrolling:touch;
  padding:.3rem 0 0;
  scrollbar-width:thin; scrollbar-color:var(--ink) var(--acid);
}
.groupnav .inner::-webkit-scrollbar{ height:6px; }
.groupnav .inner::-webkit-scrollbar-track{ background:var(--acid); }
.groupnav .inner::-webkit-scrollbar-thumb{ background:var(--ink); border-radius:0; }
.groupnav a{
  flex:0 0 auto; text-decoration:none;
  font-family:var(--mono); font-size:var(--step--2); font-weight:700;
  text-transform:uppercase; letter-spacing:.08em;
  padding:.4rem .58rem; min-height:44px; display:flex; align-items:center;
  border:var(--border-thin); background:var(--paper); white-space:nowrap;
  transition:background var(--t), transform var(--t), box-shadow var(--t);
}
.groupnav a:hover{ background:var(--ink); color:var(--acid); transform:translate(-2px,-2px); box-shadow:var(--shadow-sm); }
.groupnav .gn-label{
  flex:0 0 auto; font-family:var(--mono); font-size:var(--step--2);
  font-weight:700; text-transform:uppercase; letter-spacing:.1em;
  padding-right:.35rem; white-space:nowrap;
}

.group{ border-top:var(--border-fat); }
.group-head{
  background:var(--ink); color:var(--paper);
  border-bottom:var(--border-fat);
  padding:var(--s-3) 0;
}
@media (min-width: 900px){
  .group-head{ position:sticky; top:calc(var(--header-h) + 66px); z-index:50; }
}
.group-head .inner{ display:flex; align-items:center; gap:var(--s-3); flex-wrap:wrap; }
.group-head h2{
  margin:0; color:var(--paper); font-size:var(--step-2);
  text-transform:uppercase; letter-spacing:-.035em;
}
.group-head .range{
  font-family:var(--mono); font-size:var(--step--1); font-weight:700;
  letter-spacing:.12em; background:var(--acid); color:var(--ink);
  padding:.3rem .55rem; margin-left:auto;
}
.group-body{ padding:var(--s-5) 0 var(--s-7); }
.group-intro{
  max-width:var(--measure); margin:0 0 var(--s-5);
  font-size:var(--step-0); line-height:1.6;
}
.group-back{
  display:inline-block; margin-top:var(--s-4);
  font-family:var(--mono); font-size:var(--step--1); font-weight:700;
  text-transform:uppercase; letter-spacing:.1em; text-decoration:none;
  border:var(--border-thin); padding:.5rem .7rem; min-height:44px;
  display:inline-flex; align-items:center;
}
.group-back:hover{ background:var(--acid); }

/* --------------------------------------------------------------------------
   11. KEY-FACTS TABLE / DATA TABLES
   -------------------------------------------------------------------------- */
.table-wrap{
  overflow-x:auto; -webkit-overflow-scrolling:touch;
  border:var(--border); box-shadow:var(--shadow-sm);
  margin:var(--s-5) 0; background:var(--paper);
}
table{ border-collapse:collapse; width:100%; min-width:32rem; font-size:var(--step--1); }
caption{
  caption-side:top; text-align:left;
  font-family:var(--mono); font-size:var(--step--1); font-weight:700;
  text-transform:uppercase; letter-spacing:.12em;
  background:var(--ink); color:var(--acid); padding:.55rem .8rem;
}
th,td{ text-align:left; padding:.7rem .85rem; border-bottom:var(--border-thin); vertical-align:top; }
thead th{
  background:var(--acid); font-family:var(--mono); font-weight:700;
  text-transform:uppercase; letter-spacing:.08em; font-size:var(--step--2);
  border-bottom:var(--border);
}
tbody th{
  font-family:var(--mono); font-weight:700; text-transform:uppercase;
  letter-spacing:.06em; font-size:var(--step--2); width:34%;
  background:var(--paper-tint); white-space:nowrap;
}
tbody tr:last-child th,tbody tr:last-child td{ border-bottom:0; }

/* --------------------------------------------------------------------------
   12. NOTICE / DISCLOSURE — must be unmissable
   -------------------------------------------------------------------------- */
.notice{
  border:var(--border-fat); background:var(--acid); color:var(--ink);
  box-shadow:var(--shadow-lg);
  margin:var(--s-5) 0;
}
.notice__label{
  background:var(--ink); color:var(--acid);
  font-family:var(--mono); font-size:var(--step--1); font-weight:700;
  text-transform:uppercase; letter-spacing:.16em;
  padding:.6rem .9rem;
  display:flex; align-items:center; gap:.6rem; flex-wrap:wrap;
}
.notice__body{ padding:var(--s-4); }
.notice__body p{ font-size:var(--step-0); line-height:1.55; max-width:70ch; }
.notice__body p:last-child{ margin-bottom:0; }
.notice--plain{ background:var(--paper); }
.notice--hot .notice__label{ background:var(--hot); color:var(--ink); }
.notice--hot{ background:var(--paper); }

/* Response cards */
.responses{
  display:grid; gap:var(--s-3);
  grid-template-columns:repeat(auto-fill, minmax(min(100%, 290px), 1fr));
}
.response{
  border:var(--border); background:var(--paper);
  box-shadow:var(--shadow-sm); padding:0;
  transition:transform var(--t), box-shadow var(--t);
}
.response:hover{ transform:translate(-2px,-2px); box-shadow:var(--shadow-snap); }
/* A short acid rule sets the name off from the response. */
.response__in{ padding:var(--s-4); }
.response p{ margin:0; font-size:var(--step--1); line-height:1.6; }
.response .response__name{
  font-family:var(--display); font-size:var(--step-0); line-height:1.05;
  text-transform:uppercase; letter-spacing:-.02em;
  margin:0 0 var(--s-3); padding-bottom:.75rem; position:relative;
}
.response .response__name::after{
  content:""; position:absolute; left:0; bottom:0;
  width:2.25rem; height:7px; background:var(--acid);
  transition:width 240ms cubic-bezier(.2,.7,.3,1);
}
.response:hover .response__name::after{ width:100%; }

/* --------------------------------------------------------------------------
   13. FAQ / DEFINITIONS / CITE
   -------------------------------------------------------------------------- */
.faq{ display:grid; gap:var(--s-3); margin:var(--s-5) 0 0; }
.faq__item{
  border:var(--border); background:var(--paper);
  box-shadow:var(--shadow-sm); padding:var(--s-4);
  transition:transform var(--t), box-shadow var(--t);
}
.faq__item:hover{ transform:translate(-2px,-2px); box-shadow:var(--shadow-snap); }
.faq__item h3{
  font-size:var(--step-1); text-transform:uppercase; margin:0 0 var(--s-2);
  padding-left:1.6rem; position:relative;
}
.faq__item h3::before{
  content:"Q"; position:absolute; left:0; top:0;
  font-family:var(--mono); font-size:.72em; background:var(--acid);
  padding:0 .22rem; line-height:1.35;
}
.faq__item p{ margin:0 0 var(--s-2); }
.faq__item p:last-child{ margin-bottom:0; }

.deflist{ display:grid; gap:var(--s-3); margin:var(--s-5) 0 0; }
.defterm{
  border:var(--border); background:var(--paper); box-shadow:var(--shadow-sm);
  padding:var(--s-4);
  transition:transform var(--t), box-shadow var(--t);
}
.defterm:hover{ transform:translate(-2px,-2px); box-shadow:var(--shadow-snap); }
.defterm dt{
  font-family:var(--display); font-size:var(--step-1); text-transform:uppercase;
  letter-spacing:-.025em; line-height:1.02; margin:0 0 .5rem;
}
.defterm dt::after{
  content:""; display:block; height:8px; width:2.5rem; background:var(--acid); margin-top:.5rem;
  transition:width 240ms cubic-bezier(.2,.7,.3,1);
}
.defterm:hover dt::after{ width:100%; }
.defterm dd{ margin:0; font-size:var(--step--1); line-height:1.55; }
.defterm .alt{
  display:block; font-family:var(--mono); font-size:var(--step--2);
  text-transform:uppercase; letter-spacing:.1em; color:var(--meta); margin-top:.5rem;
}

.cite{
  border:var(--border-thin); border-left:14px solid var(--ink);
  background:var(--paper-tint); padding:var(--s-4); margin:var(--s-5) 0 0;
}
.cite h2,.cite h3{
  font-family:var(--mono); font-size:var(--step--1); font-weight:700;
  text-transform:uppercase; letter-spacing:.14em; margin:0 0 var(--s-2);
}
.cite p{ font-family:var(--mono); font-size:var(--step--1); line-height:1.6; margin:0; word-break:break-word; }

/* Bordered checklist / numbered argument list */
.props{ list-style:none; padding:0; margin:var(--s-5) 0 0; display:grid; gap:var(--s-3); counter-reset:prop; }
.props > li{
  counter-increment:prop; margin:0; position:relative;
  border:var(--border); background:var(--paper); box-shadow:var(--shadow-sm);
  padding:var(--s-4) var(--s-4) var(--s-4) 4.2rem;
  transition:transform var(--t), box-shadow var(--t);
}
.props > li:hover{ transform:translate(-2px,-2px); box-shadow:var(--shadow-snap); }
.props > li::before{
  content:counter(prop,decimal-leading-zero);
  position:absolute; left:0; top:0; bottom:0; width:3.3rem;
  display:flex; align-items:center; justify-content:center;
  background:var(--ink); color:var(--acid);
  font-family:var(--mono); font-weight:700; font-size:var(--step-0);
}
.props h3{ margin:0 0 .4rem; font-size:var(--step-0); text-transform:uppercase; }
.props p{ margin:0; font-size:var(--step--1); line-height:1.55; }

/* Simple bordered content card */
.cards{
  display:grid; gap:var(--s-3);
  grid-template-columns:repeat(auto-fill, minmax(min(100%, 280px), 1fr));
  margin:var(--s-5) 0 0;
}
.card{
  border:var(--border); background:var(--paper); box-shadow:var(--shadow-sm);
  padding:var(--s-4);
  transition:transform var(--t), box-shadow var(--t);
}
.card:hover{ transform:translate(-2px,-2px); box-shadow:var(--shadow-snap); }
.card h3{ margin:0 0 var(--s-2); font-size:var(--step-1); text-transform:uppercase; }
.card p{ margin:0 0 var(--s-2); font-size:var(--step--1); line-height:1.55; }
.card p:last-child{ margin-bottom:0; }
.card--acid{ background:var(--acid); }
.card--ink{ background:var(--ink); color:var(--paper); }
.card--ink h3{ color:var(--paper); }
.card--ink a{ color:var(--acid); }

/* Call-to-action bar */
.cta{
  display:flex; flex-wrap:wrap; gap:var(--s-3);
  margin:var(--s-5) 0 0; align-items:stretch;
}
.btn{
  display:inline-flex; align-items:center; gap:.55rem;
  min-height:48px; padding:.75rem 1.15rem;
  border:var(--border); background:var(--acid); color:var(--ink);
  box-shadow:var(--shadow-sm); text-decoration:none;
  font-family:var(--mono); font-size:var(--step--1); font-weight:700;
  text-transform:uppercase; letter-spacing:.08em;
  transition:transform var(--t), box-shadow var(--t), background var(--t);
}
.btn:hover{ transform:translate(-2px,-2px); box-shadow:var(--shadow-snap); background:var(--acid); }
.btn--ink{ background:var(--ink); color:var(--acid); }
.btn--ink:hover{ background:var(--ink); color:var(--acid); }
.btn--ghost{ background:var(--paper); }
.band .btn{ box-shadow:6px 6px 0 var(--acid); }
.band .btn--ink{ border-color:var(--paper); }

/* Anchor list / jump links */
.jump{
  list-style:none; padding:0; margin:var(--s-4) 0 0;
  display:grid; gap:.5rem;
  grid-template-columns:repeat(auto-fill, minmax(min(100%, 210px), 1fr));
}
.jump li{ margin:0; }
.jump a{
  display:flex; align-items:center; gap:.5rem; min-height:44px;
  border:var(--border-thin); background:var(--paper); padding:.5rem .7rem;
  text-decoration:none; font-size:var(--step--1); font-weight:700; line-height:1.25;
  transition:transform var(--t), box-shadow var(--t), background var(--t);
}
.jump a:hover{ background:var(--acid); transform:translate(-2px,-2px); box-shadow:var(--shadow-sm); }
.jump .n{ font-family:var(--mono); font-size:var(--step--2); color:var(--meta); }
.jump a:hover .n{ color:var(--ink); }

/* --------------------------------------------------------------------------
   14. FOOTER
   -------------------------------------------------------------------------- */
.site-foot{
  background:var(--ink); color:var(--paper);
  border-top:var(--border-fat);
  padding:var(--s-7) 0 var(--s-5);
  margin-top:var(--s-8);
}
.foot-statement{
  font-family:var(--display); font-size:var(--step-3); line-height:.95;
  letter-spacing:-.04em; text-transform:uppercase;
  margin:0 0 var(--s-3); max-width:20ch;
}
.foot-statement em{ font-style:normal; background:var(--acid); color:var(--ink); padding:0 .18em; }
.foot-blurb{ max-width:56ch; color:var(--meta-invert); font-size:var(--step--1); line-height:1.6; }

.foot-grid{
  display:grid; gap:var(--s-5); margin-top:var(--s-6);
  grid-template-columns:1fr;
}
@media (min-width: 620px){ .foot-grid{ grid-template-columns:repeat(2,1fr); } }
@media (min-width: 1000px){ .foot-grid{ grid-template-columns:repeat(4,1fr); } }
.foot-col h2{
  font-family:var(--mono); font-size:var(--step--1); font-weight:700;
  text-transform:uppercase; letter-spacing:.14em; color:var(--acid);
  margin:0 0 .7rem; padding-bottom:.45rem; border-bottom:2px solid #444;
}
.foot-col ul{ list-style:none; margin:0; padding:0; }
.foot-col li{ margin:0; }
.foot-col a{
  display:flex; align-items:center; padding:.5rem 0; min-height:44px;
  color:var(--paper); text-decoration:none; font-size:var(--step--1);
  border-bottom:1px solid #262626;
  transition:padding var(--t), background var(--t), color var(--t);
}
.foot-col a:hover{ background:var(--acid); color:var(--ink); padding-left:.4rem; }

.foot-net{
  margin-top:var(--s-6); padding-top:var(--s-4); border-top:2px solid #444;
}
.foot-net h2{
  font-family:var(--mono); font-size:var(--step--1); font-weight:700;
  text-transform:uppercase; letter-spacing:.14em; color:var(--acid); margin:0 0 .6rem;
}
.foot-net p{ color:var(--meta-invert); font-size:var(--step--2); line-height:1.6; max-width:80ch; }
.foot-net ul{ list-style:none; margin:.8rem 0 0; padding:0; display:flex; flex-wrap:wrap; gap:.45rem; }
.foot-net li{ margin:0; }
.foot-net a{
  display:inline-flex; align-items:center; min-height:44px;
  font-family:var(--mono); font-size:var(--step--2); letter-spacing:.04em;
  color:var(--paper); text-decoration:none; border:2px solid #444; padding:.3rem .55rem;
}
.foot-net a:hover{ background:var(--acid); color:var(--ink); border-color:var(--acid); }

.foot-legal{
  margin-top:var(--s-5); padding-top:var(--s-4); border-top:2px solid #444;
  display:flex; flex-wrap:wrap; gap:var(--s-3) var(--s-4);
  align-items:center; justify-content:space-between;
  font-family:var(--mono); font-size:var(--step--2); color:var(--meta-invert);
}
.foot-legal ul{ list-style:none; margin:0; padding:0; display:flex; flex-wrap:wrap; gap:.4rem 1rem; }
.foot-legal li{ margin:0; }
.foot-legal a{ color:var(--paper); text-decoration:none; border-bottom:2px solid var(--acid); padding:.2rem 0; display:inline-flex; align-items:center; min-height:44px; }
.foot-legal a:hover{ background:var(--acid); color:var(--ink); }

/* --------------------------------------------------------------------------
   15. 404
   -------------------------------------------------------------------------- */
.oops{
  font-family:var(--display); font-size:var(--step-5); line-height:.85;
  letter-spacing:-.06em; text-transform:uppercase; margin:0 0 var(--s-4);
}

/* --------------------------------------------------------------------------
   16. UTILITIES
   -------------------------------------------------------------------------- */
.vh{
  position:absolute!important; width:1px; height:1px; overflow:hidden;
  clip:rect(0 0 0 0); clip-path:inset(50%); white-space:nowrap;
}
.mt-0{ margin-top:0; }
.lead-sm{ font-size:var(--step-1); line-height:1.45; max-width:58ch; }
.mark{ background:var(--acid); padding:0 .18em; }
.mark--hot{ background:var(--hot); padding:0 .18em; }

/* --------------------------------------------------------------------------
   17. MOTION / PRINT
   -------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce){
  html{ scroll-behavior:auto; }
  *,*::before,*::after{
    animation-duration:.001ms!important; animation-iteration-count:1!important;
    transition-duration:.001ms!important; scroll-behavior:auto!important;
  }
  .reason:hover,.card:hover,.tile:hover,.faq__item:hover,.response:hover,
  .rel-card:hover,.pager a:hover,.btn:hover,.props > li:hover,.defterm:hover,
  .jump a:hover,.groupnav a:hover{ transform:none; }
}

@media print{
  :root{ --shadow:none; --shadow-sm:none; --shadow-lg:none; --shadow-snap:none; }
  .site-head,.groupnav,.mega,.pager,.skip,.foot-net,.jump{ display:none!important; }
  body{ font-size:11pt; line-height:1.45; color:#000; background:#fff; }
  .band,.site-foot,.slab,.group-head{ background:#fff!important; color:#000!important; border:1px solid #000; }
  .band h2,.band h3,.site-foot .foot-statement,.group-head h2,.slab .a{ color:#000!important; }
  .capsule,.notice,.reason,.card,.faq__item,.response,.defterm,.props > li{
    box-shadow:none!important; border:1px solid #000; break-inside:avoid;
  }
  .reasons,.cards,.responses,.faq,.deflist{ display:block; }
  .reason,.card,.response,.faq__item,.defterm{ margin-bottom:8pt; }
  a{ text-decoration:underline; color:#000; }
  a[href^="/"]::after{ content:" (kingofaeovithurs.com" attr(href) ")"; font-size:9pt; }
  .rindex{ columns:2; column-gap:18pt; border-top:1px solid #000; }
  .rindex li{ break-inside:avoid; }
  .rindex a[href^="/"]::after{ content:none; }
  .dateline{ color:#000; }
  .dateline__k{ background:#fff!important; color:#000!important; border:1px solid #000; }
  .hero h1{ font-size:26pt; }
}