/* ═══════════════════════════════════════════════
   PROJECT:  The Longer Crowbar — Cloudflare Rebuild
   FILE:     public/assets/css/site.css
   VERSION:  v1.11
   UPDATED:  2026-10-13 CT
   CHANGES:  "B2 Crow" design system from Easy's handoff — bold poster hero with
             crow mascot on red signup block, heavy black rules, 1200px grid,
             real mobile menu; no scroll animation (handoff rule); all labels
             raised to the 16px iQ minimum
   ═══════════════════════════════════════════════ */
:root{
  --paper:#fbfaf7;
  --ink:#101318;
  --ink2:#181c24;
  --coal:#101318;
  --coal-2:#181c24;
  --line:#e3e0d8;
  --line-dark:#2a2f3a;
  --dim:#4a4f5a;
  --dim-light:#b8bcc6;
  --red:#d21f26;
  --red-deep:#b0181e;
  --red-light:#ff6b70;
  --max:1200px;
}
*{margin:0;padding:0;box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
html,body{overflow-x:clip}
body{background:var(--paper);color:var(--ink);font:400 18px/1.6 "Public Sans",system-ui,sans-serif}
h1,h2,h3,h4{font-family:"Bricolage Grotesque","Public Sans",system-ui,sans-serif;font-weight:800;letter-spacing:-.02em;line-height:1.05;margin:0}
em,i,cite,address{font-style:normal;font-weight:600}
img{max-width:100%;height:auto;display:block}
a{color:inherit}
.wrap{max-width:var(--max);margin:0 auto;padding:0 24px}
.skip-link{position:absolute;left:12px;top:-80px;background:var(--ink);color:#fff;padding:10px 14px;z-index:999;border-radius:6px;font-weight:700}
.skip-link:focus{top:12px}
:focus-visible{outline:3px solid var(--ink);outline-offset:2px;box-shadow:0 0 0 6px #fff;border-radius:4px}
.dark :focus-visible,.on-red :focus-visible{outline-color:#fff;box-shadow:0 0 0 6px var(--ink)}
.vh,.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.muted{color:var(--dim)}
.eyebrow{font:700 16px/1.2 "Public Sans",sans-serif;letter-spacing:.12em;text-transform:uppercase;color:var(--red);margin:0 0 14px}
.placeholder{border:2px dashed var(--dim);display:grid;place-items:center;text-align:center;font:600 16px/1.4 "Public Sans",sans-serif;color:var(--dim);padding:16px}

/* Buttons */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:50px;padding:0 22px;border-radius:8px;font:700 17px/1 "Public Sans",sans-serif;text-decoration:none;border:2px solid transparent;cursor:pointer;white-space:nowrap}
.btn-red,.btn.primary{background:var(--red);color:#fff}
.btn-red:hover,.btn.primary:hover{background:var(--red-deep)}
.btn-ink{background:var(--ink);color:#fff}
.btn-line,.btn.quiet{border-color:currentColor;background:transparent}
.cta-row{display:flex;gap:14px;flex-wrap:wrap}
.cta-row.center{justify-content:center;margin:26px 0 0}

/* Signup forms */
.signup{display:flex;gap:10px;flex-wrap:wrap}
.signup input{flex:1 1 220px;min-height:52px;border:2px solid var(--ink);border-radius:8px;padding:0 16px;font:500 17px "Public Sans",sans-serif;background:#fff;color:var(--ink)}
.signup .btn{min-height:52px}
.fine{font-size:16px;margin:10px 0 0}
.form-note{display:block;margin-top:12px;font-size:16px;font-weight:600;color:var(--red-deep)}
.on-red .form-note{color:#fff}

/* Header + mobile menu */
.site-h{position:relative;z-index:20;background:var(--paper);border-bottom:2px solid var(--ink)}
.site-h .bar{display:flex;align-items:center;justify-content:space-between;gap:20px;height:96px}
.brand{display:flex;align-items:center;text-decoration:none}
.brand .logo-full{height:80px;width:auto}
.brand-m{display:none}
.nav ul{display:flex;align-items:center;gap:24px;list-style:none;margin:0;padding:0}
.nav a{text-decoration:none;font-weight:600;font-size:16px}
.nav a:hover{text-decoration:underline;text-underline-offset:4px}
.nav a.btn:hover{text-decoration:none}
.menu-btn{display:none;align-items:center;gap:8px;min-height:44px;padding:0 12px;border:2px solid currentColor;border-radius:8px;background:transparent;color:inherit;font:700 16px "Public Sans",sans-serif;cursor:pointer}
.menu-btn svg{display:block}

/* Hero */
.hero{padding:40px 0 0}
.hero .wrap{position:relative}
.kicker-tag{display:flex;align-items:center;gap:14px;font:700 16px/1.3 "Public Sans",sans-serif;letter-spacing:.24em;text-transform:uppercase;margin:0 0 20px;color:var(--ink)}
.kicker-tag img{width:110px;height:auto;flex:none}
.hero h1{font-size:clamp(46px,6.6vw,96px);line-height:.95;letter-spacing:-.04em;max-width:8.6em;position:relative;z-index:1}
.hero h1 .u{background:linear-gradient(transparent 78%,var(--red) 78%,var(--red) 92%,transparent 92%)}
.mascot{position:absolute;right:30px;bottom:calc(100% - 26px);width:318px;height:auto;z-index:3;transform-origin:40% 100%}
.hero-top{position:relative}
.m-only{display:none}
.hero-row{display:grid;grid-template-columns:6fr 6fr;gap:40px;margin-top:34px;align-items:stretch;position:relative}
.by{display:flex;gap:18px;align-items:center}
.by img{width:96px;height:96px;border-radius:50%;object-fit:cover;object-position:50% 25%;border:3px solid var(--ink);flex:none}
.by p{margin:0;font-size:20px}
.by strong{display:block;font:800 20px/1.2 "Bricolage Grotesque",sans-serif;margin-bottom:4px}
.redblock{background:var(--red);color:#fff;border-radius:4px;padding:30px 28px 26px;position:relative}
.redblock h2{font-size:30px;margin-bottom:14px;max-width:11em}
.redblock .fine{color:#fff}
.tagline{display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:18px;margin:52px 0 0}
.tagline img{width:100%;height:auto;max-height:40px;object-fit:contain}
.tagline img.l{object-position:right center}.tagline img.r{object-position:left center}
.tagline h2{font:700 16px/1.3 "Public Sans",sans-serif;letter-spacing:.24em;text-transform:uppercase;text-align:center;margin:0}
.pillars{display:grid;grid-template-columns:repeat(4,1fr);margin:20px 0 0;padding:0;list-style:none;border-top:2px solid var(--ink);border-bottom:2px solid var(--ink)}
.pillars li+li{border-left:2px solid var(--ink)}
.pillars a{display:flex;flex-direction:column;height:100%;padding:24px 24px 26px;text-decoration:none}
.pillars .n{font:700 16px/1 "Public Sans",sans-serif;color:var(--red);letter-spacing:.1em}
.pillars h3{font-size:38px;margin:12px 0 10px;display:flex;justify-content:space-between;align-items:baseline;gap:8px}
.pillars h3 .arrow{color:var(--red)}
.pillars p{margin:0;font-size:16px;color:var(--dim)}
.pillars a:hover h3 .t{text-decoration:underline;text-decoration-thickness:3px;text-underline-offset:6px}
@media (hover:hover) and (min-width:961px){
  .mascot{transition:transform .35s ease}
  .redblock:hover .mascot,.mascot:hover{transform:rotate(-4deg)}
}

/* Sections */
section{padding:72px 0}
.sep{display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:18px;margin:0 0 36px}
.sep img{width:100%;height:auto;max-height:40px;object-fit:contain}
.sep img.l{object-position:right center}.sep img.r{object-position:left center}
.sep span{font:700 16px/1 "Public Sans",sans-serif;letter-spacing:.24em;text-transform:uppercase}
.kicker{display:flex;justify-content:space-between;align-items:end;border-bottom:2px solid var(--ink);padding-bottom:14px;margin-bottom:32px}
.kicker h2{font-size:clamp(36px,4.4vw,64px);letter-spacing:-.035em}
.kicker a{font-weight:700}
.latest-grid{display:grid;grid-template-columns:7fr 5fr;gap:40px}
.feature a{text-decoration:none}
.feature img{width:100%;aspect-ratio:16/9;object-fit:cover;border:2px solid var(--ink)}
.feature h3{font-size:40px;margin:18px 0 8px;letter-spacing:-.03em}
.feature p{margin:0;color:var(--dim)}
.meta-line{font:700 16px/1 "Public Sans",sans-serif;letter-spacing:.08em;text-transform:uppercase;color:var(--red);margin:18px 0 0}
.plist{list-style:none;margin:0;padding:0;counter-reset:p}
.plist li{border-bottom:1px solid #cfcac0}
.plist a{display:grid;grid-template-columns:44px 1fr 120px;gap:14px;align-items:center;padding:16px 0;text-decoration:none}
.plist a::before{counter-increment:p;content:"0" counter(p);font:800 22px/1 "Bricolage Grotesque",sans-serif;color:var(--red)}
.plist h3{font-size:21px;line-height:1.2}
.plist .m{display:block;font-size:16px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--dim);margin-top:6px;font-family:"Public Sans",sans-serif}
.plist img{width:120px;aspect-ratio:16/9;object-fit:cover;border:2px solid var(--ink)}
.plist .noimg{width:120px;aspect-ratio:16/9;font-size:16px;padding:4px}
.plist a:hover h3,.feature a:hover h3{text-decoration:underline;text-underline-offset:5px}
.trio{display:grid;grid-template-columns:repeat(3,1fr);border-top:2px solid var(--ink);border-bottom:2px solid var(--ink)}
.trio>div{padding:28px 28px 32px}
.trio>div+div{border-left:2px solid var(--ink)}
.trio h3{font-size:34px;margin:10px 0 14px}
.trio p{margin:0 0 16px;font-size:16px;color:var(--dim)}
.vthumb{position:relative;display:block;border:2px solid var(--ink)}
.vthumb img{width:100%;aspect-ratio:16/9;object-fit:cover}
.vthumb .play{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%) scale(.8)}
.trio .placeholder{aspect-ratio:16/9;margin-bottom:16px}
.trio .me{width:100%;aspect-ratio:16/9;object-fit:cover;object-position:50% 30%;border:2px solid var(--ink);margin-bottom:16px}
.vt{font-weight:700;font-size:16px;margin:12px 0 16px;color:var(--ink)}
.tl{font-weight:700}
.end{padding:24px 0 64px}
.end-g{display:grid;grid-template-columns:7fr 5fr;gap:40px;align-items:center}
.end h2{font-size:clamp(36px,4.4vw,60px);letter-spacing:-.035em}

/* Footer */
.site-f{padding:40px 0 48px;border-top:2px solid var(--ink);font-size:16px}
.site-f p{margin:0 0 10px}
.legal{list-style:none;display:flex;flex-wrap:wrap;gap:8px 22px;margin:0 0 10px;padding:0}
.site-f .ft{display:grid;grid-template-columns:auto 1fr;column-gap:20px;align-items:center}
.site-f .fcrow{grid-row:span 3;width:64px;height:auto}

/* ── Inner pages ─────────────────────────────── */
.page-head{max-width:var(--max);margin:0 auto;padding:56px 24px 24px}
.page-head .kicker-lbl{font:700 16px/1.2 "Public Sans",sans-serif;letter-spacing:.12em;text-transform:uppercase;color:var(--red);margin:0 0 14px}
.page-head h1{font-size:clamp(40px,5vw,72px);letter-spacing:-.035em}
.page-head .lead{font-size:clamp(18px,1.4vw,21px);color:var(--dim);margin-top:22px;max-width:60ch}
.page-head.center{text-align:center;padding-top:80px}
.page-head.center img{height:200px;width:auto;margin:0 auto}
.backlink{color:var(--red);font-weight:700;text-decoration:none;font-size:17px}
.backlink:hover{text-decoration:underline}
.page-head .backlink{display:inline-block;margin-top:18px}

/* Archive + filter chips */
.archive{max-width:var(--max);margin:0 auto;padding:8px 24px 80px}
.chips{display:flex;gap:10px;flex-wrap:wrap;margin-bottom:38px;padding-bottom:28px;border-bottom:2px solid var(--ink)}
.chip{font-family:inherit;font-size:16px;font-weight:700;color:var(--ink);background:transparent;border:2px solid var(--ink);border-radius:8px;padding:10px 18px;cursor:pointer}
.chip:hover{background:#f3f1ec}
.chip.active{background:var(--ink);color:#fff}
.pcard[hidden]{display:none}

/* Post cards: dark band (related) + light grid (archives) */
.latest{background:var(--coal);color:#f3f1ec;padding:72px 24px}
.latest .inner{max-width:var(--max);margin:0 auto}
.latest .row-head{display:flex;align-items:baseline;justify-content:space-between;gap:18px;flex-wrap:wrap;margin-bottom:40px;border-bottom:2px solid #f3f1ec;padding-bottom:14px}
.latest .tag{font:700 16px/1.2 "Public Sans",sans-serif;letter-spacing:.12em;text-transform:uppercase;color:var(--red-light);margin-bottom:14px}
.latest h2{font-size:clamp(32px,3.8vw,54px)}
.latest .row-head a{color:#f3f1ec;font-weight:700;font-size:18px}
.post-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:24px}
.pcard{background:var(--coal-2);border:2px solid var(--line-dark);border-radius:4px;padding:28px;text-decoration:none;color:#f3f1ec;display:flex;flex-direction:column;gap:12px}
.pcard:hover h3{text-decoration:underline;text-underline-offset:5px}
.pcard .cat{font:700 16px/1.2 "Public Sans",sans-serif;letter-spacing:.08em;text-transform:uppercase;color:var(--red-light)}
.pcard h3{font-size:22px;line-height:1.2}
.pcard .read{margin-top:auto;font-size:16px;color:var(--dim-light);font-weight:600}
.post-grid.light .pcard{background:#fff;border-color:var(--ink);color:var(--ink)}
.post-grid.light .pcard .cat{color:var(--red)}
.post-grid.light .pcard .read{color:var(--dim)}

/* Post article */
.post{max-width:820px;margin:0 auto;padding:0 24px 72px}
.post-head{padding:48px 0 10px}
.chips-row{display:flex;gap:10px;flex-wrap:wrap;margin-bottom:20px}
.cat-chip{font:700 16px/1 "Public Sans",sans-serif;letter-spacing:.06em;text-transform:uppercase;color:var(--red);border:2px solid var(--ink);border-radius:8px;padding:8px 12px;text-decoration:none}
.cat-chip.main{background:var(--ink);color:#fff}
.cat-chip:hover{background:#f3f1ec}
.cat-chip.main:hover{background:var(--ink2)}
.post-head h1{font-size:clamp(34px,4.4vw,60px);letter-spacing:-.035em}
.post-head .meta{color:var(--dim);font-size:17px;margin-top:18px}
.feat{width:100%;border:2px solid var(--ink);margin:14px 0 6px}
.post-body{margin-top:26px}
.post-body h2{font-size:clamp(26px,2.6vw,36px);line-height:1.15;margin:44px 0 16px}
.post-body h3{font-size:clamp(22px,2.2vw,28px);line-height:1.2;margin:36px 0 14px}
.post-body h4{font-size:20px;margin:30px 0 12px}
.post-body p{margin:0 0 22px}
.post-body ul,.post-body ol{margin:0 0 22px 26px}
.post-body li{margin-bottom:10px}
.post-body a{color:var(--red);font-weight:600}
.post-body a:hover{color:var(--red-deep)}
.post-body img{border:2px solid var(--ink);margin:10px 0 22px}
.post-body blockquote{border-left:5px solid var(--red);padding:6px 0 6px 24px;margin:0 0 22px;color:var(--dim);font-weight:600}
.post-body audio{width:100%;margin:0 0 22px}
.post-body table{width:100%;border-collapse:collapse;margin:0 0 22px;display:block;overflow-x:auto}
.post-body th,.post-body td{border:1px solid var(--line);padding:10px 14px;text-align:left}
.video-wrap{position:relative;aspect-ratio:16/9;margin:10px 0 26px;border:2px solid var(--ink);overflow:hidden;background:var(--coal)}
.video-wrap iframe{position:absolute;inset:0;width:100%;height:100%;border:0}
.post-foot{padding:10px 0 0}

/* Videos grid */
.vgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:28px 24px}
.vcard{display:block;text-decoration:none;border-top:2px solid var(--ink);padding-top:14px}
.vcard img{width:100%;aspect-ratio:16/9;object-fit:cover;border:2px solid var(--ink)}
.vcard .m{display:block;font:700 16px/1.2 "Public Sans",sans-serif;letter-spacing:.06em;text-transform:uppercase;color:var(--red);margin:12px 0 6px}
.vcard h3{font-size:21px;line-height:1.2}
.vcard:hover h3{text-decoration:underline;text-underline-offset:5px}

/* iQ Cookie banner reskin (overrides the kit defaults) */
:root{--iqc-accent:#d21f26;--iqc-accent-hover:#b0181e;--iqc-accent-ink:#fff;--iqc-link:#b0181e;--iqc-ink:#101318;--iqc-muted:#4a4f5a;--iqc-font:"Public Sans",system-ui,sans-serif;--iqc-radius:8px;--iqc-secondary-ink:#101318;--iqc-secondary-border:#101318;--iqc-line:#e3e0d8}

/* Consent-gated embeds */
.video-wrap .video-load{position:absolute;inset:0;width:100%;display:grid;place-items:center;padding:20px;border:0;cursor:pointer;background:var(--coal) center/cover no-repeat;color:#fff;font:700 18px/1.3 "Public Sans",sans-serif;text-align:center}
.video-wrap .video-load span{background:rgba(16,19,24,.88);padding:14px 20px;border-radius:8px;border:2px solid #fff}
.video-wrap .video-load:hover span{background:var(--red)}
.video-wrap.loaded .video-load{display:none}

/* Legal pages */
.legal .eff{font:700 16px/1.4 "Public Sans",sans-serif;letter-spacing:.06em;text-transform:uppercase;color:var(--red);margin:0 0 26px}
.legal table{width:100%;border-collapse:collapse;margin:0 0 26px;font-size:16px}
.legal th,.legal td{border:1px solid var(--line);padding:10px 12px;text-align:left;vertical-align:top}
.legal th{background:#f3f1ec}
.contact-form .hint{display:block;font-size:16px;color:var(--dim);margin-top:8px}

/* Contact */
.contact-wrap{display:grid;grid-template-columns:1fr auto;gap:5vw;align-items:end}
.contact-form label{display:block;font-weight:700;font-size:17px;margin-bottom:8px}
.contact-form input,.contact-form textarea{font-family:inherit;font-size:18px;width:100%;padding:14px 16px;border:2px solid var(--ink);border-radius:8px;background:#fff;color:var(--ink)}
.contact-form p{margin-bottom:20px}
.contact-crow{height:316px;width:auto}

@media (max-width:960px){
  body{font-size:17px}
  .wrap{padding:0 20px}
  .site-h .bar{height:68px;gap:10px}
  .brand .logo-full{display:none}
  .brand-m{display:flex;align-items:center;gap:8px}
  .brand-m img{width:40px;height:auto}
  .wm{display:flex;flex-direction:column;font:800 17px/0.98 "Bricolage Grotesque",sans-serif;text-transform:uppercase;letter-spacing:-.01em;color:var(--ink)}
  .wm .r{color:var(--red);font-size:21px}
  .menu-btn{display:inline-flex}
  .nav{display:none;position:absolute;left:0;right:0;top:100%;background:var(--paper);border-bottom:1px solid var(--line);box-shadow:0 18px 30px -18px rgba(0,0,0,.35)}
  .nav.open{display:block}
  .nav ul{flex-direction:column;align-items:stretch;gap:0;padding:8px 20px 20px}
  .nav li a{display:block;padding:14px 4px;font-size:19px;border-bottom:1px solid var(--line)}
  .nav li.nav-sub a{border:0;margin-top:14px;display:flex;justify-content:center}
  .kicker-tag{font-size:16px;letter-spacing:.12em;gap:10px;margin-bottom:14px}
  .kicker-tag img{display:none}
  .hero{padding-top:22px}
  .hero-top{display:grid;grid-template-columns:1fr 92px;gap:6px;align-items:end}
  .hero h1{font-size:42px;line-height:.98;max-width:none}
  .mascot{position:static;width:92px;margin-bottom:-4px}
  .m-only{display:block}.d-only{display:none}
  .hero-row{grid-template-columns:1fr;gap:22px;margin-top:18px}
  .redblock{order:-1;padding:20px 20px}
  .redblock h2{font-size:24px}
  .signup .btn{flex:1 1 100%}
  .by img{width:64px;height:64px}.by p{font-size:17px}
  .tagline{grid-template-columns:1fr;gap:10px;justify-items:start;margin-top:36px}
  .tagline img.r{display:none}
  .tagline img.l{order:2;width:150px;object-position:left center}
  .tagline h2{text-align:left;letter-spacing:.14em;font-size:16px}
  .pillars{grid-template-columns:1fr;margin-top:14px}
  .pillars li+li{border-left:0;border-top:1px solid var(--ink)}
  .pillars a{padding:16px 0;display:grid;grid-template-columns:34px 1fr;column-gap:8px}
  .pillars .n{grid-row:span 2;padding-top:8px}
  .pillars h3{font-size:26px;margin:0 0 4px}
  .pillars p{font-size:16px}
  section{padding:52px 0}
  .sep span{font-size:16px;letter-spacing:.14em}
  .latest-grid,.end-g{grid-template-columns:1fr}
  .feature h3{font-size:30px}
  .plist a{grid-template-columns:36px 1fr 96px}.plist img,.plist .noimg{width:96px}.plist h3{font-size:18px}
  .trio{grid-template-columns:1fr}.trio>div+div{border-left:0;border-top:2px solid var(--ink)}.trio>div{padding:24px 0}
  .contact-wrap{grid-template-columns:1fr}
  .contact-crow{display:none}
  .page-head{padding:40px 20px 16px}
  .archive{padding:8px 20px 56px}
  .latest{padding:52px 20px}
}
@media (prefers-reduced-motion: reduce){
  *{transition:none !important;animation:none !important;scroll-behavior:auto !important}
}