/* ==========================================================================
   Tokens — his real brand, inverted back to the dark ground his site uses.
   Sources: Brand/brand-tokens.css, extracted from learn.jbarrows.com.
   ========================================================================== */
:root{
  /* ⚠ VERBATIM FROM JOHN'S BRAND STORE, NOT SAMPLED FROM HIS SITE. An earlier
     version of this file took its palette by eyedropping learn.jbarrows.com and got
     the roles backwards: it led with #006AFF, which is his SECONDARY. It also had no
     equivalent of the accent below, which is the one colour here that is not simply
     another blue and is doing the most work to make this look like an upgrade. */
  --jb:#3088F3;            /* Primary   — buttons, links, the working accent      */
  --jb-deep:#006AFF;       /* Secondary — headline emphasis, the punchier blue    */
  --jb-accent:#1F0AE8;     /* Accent    — indigo. Depth in gradients, pressed     */
  --dark:#28282D;          /* Dark      — raised surfaces, hovers                 */
  --ground:#080808;        /* Black     — page ground. Note: NOT pure #000        */

  --ink:#F2F2F3;
  --ink-2:#A7A7AE;
  --muted:#8A8A8A;         /* his own --branding-text-color, verbatim             */
  --raise:#131317;         /* between Black and Dark, so cards read as lifted     */
  --raise-2:var(--dark);
  --line:#25252A;
  --line-2:#35353C;
  /* ⚠ radius 0 is a real brand signature on his site: every button and card is
     square. It is the cheapest single thing that stops this reading as generic SaaS. */
  --r:0px;
  /* ⚠ INTER IS THE BRAND BODY FACE, NOT A FALLBACK. This file previously listed
     "proxima-nova" first and carried a warning about Adobe domain-locking. His brand
     store names the pair outright: Oswald for headings, Inter for body. Both are
     Google Fonts, so there is no licence to arrange and no domain to authorise. */
  --head:"Oswald","Inter Tight",system-ui,sans-serif;
  --body:"Inter",system-ui,-apple-system,sans-serif;
  --max:1180px;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:var(--ground);color:var(--ink);font-family:var(--body);
  font-size:16.5px;line-height:1.62;overflow-x:clip;-webkit-font-smoothing:antialiased}
img{max-width:100%;display:block}
a{color:inherit}
.wrap{max-width:var(--max);margin:0 auto;padding:0 24px}

h1,h2,h3,.h{font-family:var(--head);font-weight:600;letter-spacing:.01em;
  text-transform:uppercase;line-height:1.04;margin:0;text-wrap:balance}
.eyebrow{font-family:var(--head);font-size:12px;font-weight:500;letter-spacing:.2em;
  text-transform:uppercase;color:var(--jb);margin:0 0 14px}

/* ── Nav ─────────────────────────────────────────────────────────────────── */
nav{position:fixed;inset:0 0 auto;z-index:60;transition:background .25s,border-color .25s;
  border-bottom:1px solid transparent}
nav.solid{background:rgba(0,0,0,.92);backdrop-filter:blur(12px);border-bottom-color:var(--line)}
.nav-in{display:flex;align-items:center;gap:26px;height:70px;
  max-width:var(--max);margin:0 auto;padding:0 24px}
/* ⚠ THE REAL LOGO IS WHITE-ONLY, WHICH IS WHY THE MASTHEAD IS DARK. His only
   supplied mark has no dark variant, so any light header would need a version that
   does not exist. Height is fixed and width follows the 2.88 aspect, so it never
   distorts; 34px keeps it inside the 70px bar with room to breathe. */
.brand{display:flex;align-items:center;text-decoration:none;flex:none}
.brand img{height:34px;width:auto;display:block}
.nav-links{display:flex;gap:22px;margin-left:auto;list-style:none;padding:0;margin-block:0}
.nav-links a{font-size:13px;letter-spacing:.1em;text-transform:uppercase;
  text-decoration:none;color:var(--ink-2);font-weight:500;transition:color .15s}
.nav-links a:hover{color:var(--ink)}
.btn{display:inline-flex;align-items:center;gap:9px;font-family:var(--head);
  font-size:13px;font-weight:500;letter-spacing:.13em;text-transform:uppercase;
  padding:12px 20px;border-radius:var(--r);text-decoration:none;cursor:pointer;
  border:1px solid var(--line-2);color:var(--ink);background:transparent;
  transition:background .18s,border-color .18s,color .18s}
.btn:hover{border-color:var(--jb);color:#fff}
.btn.solid{background:var(--jb);border-color:var(--jb);color:#fff}
.btn.solid:hover{background:var(--jb-deep);border-color:var(--jb-deep)}
/* The trailing square is his own button detail, kept. */
.btn.solid::after{content:"";width:7px;height:7px;background:#fff;flex:none}
.nav-cta{display:flex;gap:10px;align-items:center}

/* ── Hero, with the Vimeo plate behind it ────────────────────────────────── */
/* ⚠ NO `isolation` AND NO NEGATIVE z-index ON THE MEDIA PLATE. This is the whole
   reason the hero video appeared broken for hours. `isolation:isolate` here plus
   `z-index:-2` on .hero-media painted the iframe BEHIND its own parent's background:
   the embed loaded, Vimeo reported ready, opacity went to 1, and nothing was visible.
   It reads exactly like a blocked embed and it is not one. This now matches the
   stacking that works on mainstage.pro: plate at 0, scrim at 1, content at 2. */
.hero{position:relative;min-height:88vh;display:flex;align-items:flex-end;
  padding:140px 0 66px;overflow:hidden}
.hero-media{position:absolute;inset:0;z-index:0;overflow:hidden;background:var(--ground)}
.hero-media iframe{position:absolute;top:50%;left:50%;width:100vw;height:56.25vw;
  min-height:100%;min-width:177.78vh;transform:translate(-50%,-50%);border:0;
  pointer-events:none}
/* ⚠ THE SCRIM IS A REAL ELEMENT, NOT A PSEUDO-ELEMENT ON THE PLATE. Same reason as
   above: it is what works on the other two sites, and it keeps the stacking flat and
   obvious — plate 0, overlay 1, content 2. Any headline over moving video fails
   contrast somewhere in the loop, so this is not decoration. */
.hero-overlay{position:absolute;inset:0;z-index:1;pointer-events:none;
  background:linear-gradient(180deg,rgba(8,8,8,.70) 0%,rgba(8,8,8,.52) 40%,rgba(8,8,8,.94) 100%)}
.hero-in{position:relative;z-index:2;max-width:var(--max);margin:0 auto;padding:0 24px;width:100%}
.hero h1{font-size:clamp(38px,6.4vw,76px);max-width:17ch;margin-bottom:22px}
.hero h1 em{font-style:normal;color:var(--jb-deep)}
.hero p{font-size:clamp(17px,2vw,20px);color:var(--ink-2);max-width:56ch;margin:0 0 32px}
.hero-cta{display:flex;gap:12px;flex-wrap:wrap}
.scroll-hint{position:absolute;bottom:26px;left:50%;transform:translateX(-50%);
  font-size:11px;letter-spacing:.22em;text-transform:uppercase;color:var(--muted);z-index:2}

/* ── Logo strip ──────────────────────────────────────────────────────────── */
.proof{border-block:1px solid var(--line);background:#0B0B0D;padding:26px 0}
.proof-in{display:flex;align-items:center;gap:40px;flex-wrap:wrap;justify-content:center;
  max-width:var(--max);margin:0 auto;padding:0 24px}
.proof span{font-family:var(--head);font-size:clamp(15px,2vw,20px);font-weight:500;
  letter-spacing:.1em;text-transform:uppercase;color:#4A5058}
.proof .lede{font-family:var(--body);font-size:12px;letter-spacing:.16em;color:var(--muted);
  text-transform:uppercase;width:100%;text-align:center;margin-bottom:4px}

section{padding:96px 0}
.sec-head{display:flex;align-items:flex-end;gap:24px;flex-wrap:wrap;margin-bottom:42px}
.sec-head h2{font-size:clamp(26px,3.6vw,42px);flex:1 1 420px}
.sec-head p{color:var(--ink-2);max-width:52ch;margin:0;font-size:15.5px}
.sec-head .btn{flex:none}

/* ── Service cards ───────────────────────────────────────────────────────── */
.svc{display:grid;grid-template-columns:repeat(auto-fit,minmax(290px,1fr));gap:2px;
  background:var(--line)}
.svc article{background:var(--raise);padding:38px 30px 32px;display:flex;
  flex-direction:column;gap:14px;transition:background .2s}
.svc article:hover{background:var(--raise-2)}
.svc .n{font-family:var(--head);font-size:12px;letter-spacing:.2em;color:var(--jb)}
.svc h3{font-size:24px}
.svc p{color:var(--ink-2);font-size:15.5px;margin:0;flex:1}
.svc a{font-family:var(--head);font-size:12.5px;letter-spacing:.14em;text-transform:uppercase;
  color:var(--ink);text-decoration:none;border-bottom:1px solid var(--jb);
  padding-bottom:3px;align-self:flex-start}

/* ── Post + episode cards ────────────────────────────────────────────────
   Same component for both. David's brief: thumbnail, title, published date,
   short description, click through to the article or episode page. */
.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(310px,1fr));gap:26px}
.card{background:var(--raise);border:1px solid var(--line);border-radius:var(--r);
  display:flex;flex-direction:column;text-decoration:none;overflow:hidden;
  transition:border-color .2s,transform .2s}
.card:hover{border-color:var(--jb);transform:translateY(-3px)}
.card:focus-visible{outline:2px solid var(--jb);outline-offset:2px}
/* ⚠ ART IS GENERATED, NOT STOCK. No real thumbnails exist yet. A deterministic
   gradient keyed to the title is honest about that and still reads as designed;
   dropping in stock photography would misrepresent what has been built. */
.thumb{aspect-ratio:16/9;position:relative;display:grid;place-items:center;
  border-bottom:1px solid var(--line)}
.thumb .mark{font-family:var(--head);font-size:13px;letter-spacing:.24em;
  text-transform:uppercase;color:rgba(255,255,255,.82);z-index:1;text-align:center;
  padding:0 18px}
.thumb::after{content:"";position:absolute;inset:0;
  background:linear-gradient(180deg,transparent 45%,rgba(0,0,0,.55))}
.card-b{padding:20px 22px 24px;display:flex;flex-direction:column;gap:9px;flex:1}
.meta{display:flex;gap:10px;align-items:center;font-size:11.5px;letter-spacing:.14em;
  text-transform:uppercase;color:var(--muted)}
.meta .dot{width:3px;height:3px;background:var(--muted);flex:none}
.card h3{font-size:18.5px;text-transform:none;font-family:var(--head);font-weight:500;
  letter-spacing:0;line-height:1.26}
.card p{margin:0;font-size:14.5px;color:var(--ink-2);line-height:1.58;flex:1}
.card .go{font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:var(--jb);
  font-family:var(--head)}

/* ── Numbers band ────────────────────────────────────────────────────────── */
.stats{border-block:1px solid var(--line);background:#0B0B0D}
.stats-in{display:grid;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));
  max-width:var(--max);margin:0 auto}
.stat{padding:40px 24px;border-right:1px solid var(--line)}
.stat:last-child{border-right:0}
.stat b{display:block;font-family:var(--head);font-size:clamp(30px,4vw,46px);
  font-weight:600;line-height:1;color:#fff}
.stat span{display:block;margin-top:9px;font-size:12.5px;letter-spacing:.14em;
  text-transform:uppercase;color:var(--muted)}

/* ── Membership band — the Uscreen handoff ───────────────────────────────── */
.member{background:
  linear-gradient(120deg,rgba(31,10,232,.30),rgba(48,136,243,.10) 46%,transparent 62%),var(--raise);
  border:1px solid var(--line);padding:46px 40px;display:flex;gap:34px;
  align-items:center;flex-wrap:wrap}
.member div{flex:1 1 420px}
.member h2{font-size:clamp(24px,3vw,34px);margin-bottom:12px}
.member p{color:var(--ink-2);margin:0;max-width:56ch}

footer{border-top:1px solid var(--line);padding:56px 0 40px;background:#0B0B0D}
.foot-in{display:flex;gap:34px;flex-wrap:wrap;justify-content:space-between;
  max-width:var(--max);margin:0 auto;padding:0 24px}
.foot-in p{color:var(--muted);font-size:13.5px;margin:0}
.foot-links{display:flex;gap:20px;flex-wrap:wrap;list-style:none;padding:0;margin:0}
.foot-links a{font-size:13px;color:var(--ink-2);text-decoration:none}
.foot-links a:hover{color:var(--jb)}

.ribbon{position:fixed;right:0;bottom:0;z-index:90;background:var(--jb);color:#fff;
  font-family:var(--head);font-size:11px;letter-spacing:.18em;text-transform:uppercase;
  padding:9px 16px}

@media (max-width:900px){
  .nav-links{display:none}
  section{padding:64px 0}
  .hero{min-height:78vh;padding-top:120px}
  .stat{border-right:0;border-bottom:1px solid var(--line)}
}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *{transition:none!important;animation:none!important}
  .hero-media iframe{display:none}
}


/* ── Interior pages ─────────────────────────────────────────────────────────
   The homepage opens on a full-bleed hero. Interior pages open on a compact
   masthead instead: enough weight to feel like a real page, not so much that
   someone reading three articles has to scroll past a landing page each time. */
.page-head{padding:150px 0 54px;position:relative;isolation:isolate;
  border-bottom:1px solid var(--line)}
.page-head::before{content:"";position:absolute;inset:0;z-index:-1;
  background:
    radial-gradient(760px 380px at 12% 0%,rgba(48,136,243,.20),transparent 64%),
    radial-gradient(620px 420px at 88% 96%,rgba(31,10,232,.24),transparent 66%),
    var(--ground)}
.page-head h1{font-size:clamp(34px,5.4vw,60px);max-width:20ch;margin-bottom:16px}
.page-head p{font-size:clamp(16px,1.8vw,19px);color:var(--ink-2);max-width:60ch;margin:0}
.page-head .count{margin-top:20px;font-family:var(--head);font-size:12px;
  letter-spacing:.18em;text-transform:uppercase;color:var(--muted)}

/* Filter row on the index pages. */
.filters{display:flex;gap:10px;flex-wrap:wrap;align-items:center;margin-bottom:34px}
.filters input{flex:1 1 260px;min-width:0;font:inherit;font-size:15px;padding:12px 15px;
  background:var(--raise);border:1px solid var(--line);border-radius:var(--r);
  color:var(--ink)}
.filters input:focus{outline:none;border-color:var(--jb)}
.filters input::placeholder{color:var(--muted)}
.chipbar{display:flex;gap:8px;flex-wrap:wrap}
.chipbar button{font-family:var(--head);font-size:12px;letter-spacing:.12em;
  text-transform:uppercase;padding:10px 15px;background:transparent;color:var(--ink-2);
  border:1px solid var(--line-2);border-radius:var(--r);cursor:pointer;
  transition:border-color .15s,color .15s,background .15s}
.chipbar button:hover{border-color:var(--jb);color:var(--ink)}
.chipbar button[aria-pressed="true"]{background:var(--jb);border-color:var(--jb);color:#fff}
.empty{padding:52px 0;color:var(--muted);text-align:center}

/* ── About ─────────────────────────────────────────────────────────────── */
.prose{max-width:68ch}
.prose p{font-size:17px;line-height:1.72;color:var(--ink-2);margin:0 0 1.15em}
.prose p strong{color:var(--ink);font-weight:600}
.split{display:grid;grid-template-columns:1fr 1fr;gap:56px;align-items:start}
.rail h3{font-size:15px;letter-spacing:.14em;margin-bottom:16px;color:var(--jb)}
.rail ul{list-style:none;padding:0;margin:0 0 34px}
.rail li{padding:11px 0;border-bottom:1px solid var(--line);font-size:15px;
  color:var(--ink-2);display:flex;gap:12px}
.rail li:last-child{border-bottom:0}
.rail li b{color:var(--ink);font-weight:600;flex:none}
.values{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:2px;
  background:var(--line)}
.values div{background:var(--raise);padding:26px 22px}
.values b{display:block;font-family:var(--head);font-size:17px;letter-spacing:.02em;
  text-transform:uppercase;margin-bottom:7px}
.values span{font-size:14.5px;color:var(--ink-2)}
@media (max-width:900px){ .split{grid-template-columns:1fr;gap:40px} }