/* The Zero Journal — blog-specific styles. Namespaced jr-* to coexist with site.css.
   Chrome (nav, footer, promo, waitlist modal) comes from site.css. */
:root{
  --jr-ink:#141210; --jr-paper:#FFFAF5; --jr-card:#fff; --jr-accent:#FDEC04; --jr-accent-deep:#EAD800;
  --jr-muted:#6B6258; --jr-line:#1412101a; --jr-line2:#14121012;
  --jr-serif:"Hoefler Text","Iowan Old Style","Palatino Linotype","Baskerville",Georgia,"Times New Roman",serif;
  --jr-sans:-apple-system,BlinkMacSystemFont,"SF Pro Display","Segoe UI",system-ui,"Helvetica Neue",Arial,sans-serif;
  --jr-wrap:1180px;
}
/* body stays dark (from site.css) so the fixed-footer reveal + dark frame match home;
   only .site is the paper sheet. Do NOT set color:inherit on all .jr a — it would
   clobber the nav CTA's ink text (0,0,1,1 beats site.css .cta 0,0,1,0). */
.jr{color:var(--jr-ink);font-family:var(--jr-sans);line-height:1.5}
.jr a{text-decoration:none}
.jr img{max-width:100%;display:block}
.jr-wrap{max-width:var(--jr-wrap);margin:0 auto;padding:0 28px}
.jr ::selection{background:var(--jr-accent);color:var(--jr-ink)}

.jr-eyebrow{font-size:12px;font-weight:600;letter-spacing:.2em;text-transform:uppercase;color:var(--jr-muted)}
.jr-cat{font-size:11px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--jr-muted)}

/* masthead: compact, sits on the paper sheet. Nav is made legible on paper by the
   .nav:not(.scrolled) overrides below, so no full-height dark cover is needed. */
.jr-mast{position:relative;padding:140px 0 28px}
.jr-mast .jr-issue{position:absolute;top:116px;right:28px;text-align:right;font-size:11.5px;
  color:var(--jr-muted);line-height:1.8;letter-spacing:.16em;text-transform:uppercase}
.jr-mast .jr-eyebrow{color:var(--jr-muted);letter-spacing:.24em}
.jr-mast h1{font-family:var(--jr-serif);font-weight:600;letter-spacing:-.02em;line-height:1.05;
  font-size:clamp(30px,4.2vw,50px);margin:13px 0 0;max-width:18em;text-wrap:balance}
.jr-mast .jr-lede{font-size:clamp(15px,1.7vw,18px);color:var(--jr-muted);max-width:58ch;margin:15px 0 0;line-height:1.5}

/* nav is legible on the light masthead even before it solidifies into the capsule.
   Kill the dark hero scrim + text/logo shadows (they only make sense over the video hero). */
.jr .nav:not(.scrolled)::before{opacity:0}
.jr .nav:not(.scrolled) .links a{color:var(--jr-ink);text-shadow:none}
.jr .nav:not(.scrolled) .links a:not(.active):hover{background:rgba(20,18,16,.07)}
/* current page ("Blog") is a dark bubble in BOTH the top nav and the scrolled capsule */
.jr .nav:not(.scrolled) .links a.jr-here,
.jr .nav.scrolled .links a.jr-here{background:var(--jr-ink);color:#fff;opacity:1;font-weight:600}
.jr .nav.scrolled .links a.jr-here{box-shadow:0 6px 16px -8px rgba(20,18,16,.5)}
.jr .nav .links a.jr-here:hover{background:var(--jr-ink)}
.jr .nav:not(.scrolled) .brand{text-shadow:none}
.jr .nav:not(.scrolled) .brand .wd{fill:var(--jr-ink)}
/* logo stays black on the white masthead (no yellow) */
.jr .nav:not(.scrolled) .brand .mk{fill:var(--jr-ink);filter:none}
.jr .nav:not(.scrolled) .cta{background:var(--jr-accent);color:var(--jr-ink);border-color:transparent;
  box-shadow:0 10px 24px -12px rgba(234,216,0,.55)}

/* warm the reused .site surface (the current-nav-link styling lives above) */
.jr .site{background:var(--jr-paper)}

/* filter pills (static: the floating nav capsule owns the top edge) */
.jr-filter{position:relative;z-index:5;background:var(--jr-paper);border-top:1px solid var(--jr-line);border-bottom:1px solid var(--jr-line)}
.jr-filter-in{display:flex;gap:8px;overflow-x:auto;padding:14px 0;scrollbar-width:none}
.jr-filter-in::-webkit-scrollbar{display:none}
.jr-pill{flex:0 0 auto;font-size:13.5px;font-weight:500;color:var(--jr-muted);background:transparent;border:1px solid transparent;
  padding:7px 15px;border-radius:999px;cursor:pointer;white-space:nowrap;font-family:var(--jr-sans);transition:color .2s,background .2s}
.jr-pill:hover{color:var(--jr-ink)}
.jr-pill[aria-pressed="true"]{background:var(--jr-accent);color:var(--jr-ink);font-weight:600;box-shadow:0 1px 0 var(--jr-accent-deep)}
.jr-pill:focus-visible{outline:2px solid var(--jr-ink);outline-offset:2px}

/* generic cover shell */
.jr-cover{position:relative;border-radius:16px;overflow:hidden}
.jr-cover.dark{background:radial-gradient(120% 130% at 22% 0%,#26221c,#121110)}
.jr-cover.light{background:radial-gradient(120% 130% at 30% 8%,#fff6e2,#efe6d3)}
/* VS lockup inside a cover */
.jr-vs{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;gap:clamp(10px,3vw,22px);padding:16px;z-index:0}
.jr-vs.up{align-items:flex-start;padding-top:clamp(20px,7%,44px)}
/* radius is proportional (not a fixed px) so every badge is the SAME squircle shape
   at every size, on both the index covers and the article hero */
.jr-badge{background:var(--jr-card);border-radius:26%;display:flex;align-items:center;justify-content:center;
  box-shadow:0 10px 26px -14px #14121055;aspect-ratio:1;flex:0 0 auto}
.jr-badge img{object-fit:contain}
.jr-badge.zero{background:var(--jr-accent);box-shadow:0 10px 26px -12px #ead80099}
.jr-badge.zero svg{width:60%;height:60%}
.jr-vs-x{font-family:var(--jr-serif);font-style:italic;color:#b6a888;font-size:clamp(15px,2.4vw,26px)}
.jr-feat .jr-vs-x{color:#efe6d3aa}
.jr-vs-logos{display:flex;gap:9px;flex-wrap:wrap;justify-content:center;max-width:78%}
/* badge sizes (width only; height comes from aspect-ratio:1 so they're always square) */
.jr-badge.b-lg{width:clamp(60px,15%,92px)}
.jr-badge.b-md{width:clamp(46px,20%,66px)}
.jr-badge.b-sm{width:clamp(40px,11%,54px)}
.jr-badge.b-xs{width:clamp(30px,9%,42px)}
.jr-badge.b-lg img,.jr-badge.b-md img{width:64%;height:64%}
.jr-badge.b-sm img,.jr-badge.b-xs img{width:66%;height:66%}
.jr-badge-txt{font-family:var(--jr-sans);font-weight:700;font-size:10.5px;letter-spacing:-.03em;
  color:var(--jr-ink);padding:0 4px;text-align:center;line-height:1.05}
/* cover tag pill (over cover) */
.jr-cover .jr-tag{position:absolute;top:12px;left:12px;z-index:2;font-size:10.5px;font-weight:700;letter-spacing:.12em;
  text-transform:uppercase;color:var(--jr-ink);background:#fffaf5e6;padding:5px 10px;border-radius:999px}

/* featured (big) */
.jr-lead{display:grid;grid-template-columns:1.62fr 1fr;gap:30px;padding:40px 0 8px;align-items:start}
.jr-feat{position:relative;border-radius:20px;overflow:hidden;min-height:408px;display:block;color:#fff;isolation:isolate}
/* roundup cover: big square Zero + a 2x2 grid of competitor logos, matched heights */
.jr-badge.b-xl{width:clamp(96px,13vw,118px)}
.jr-badge.b-xl svg{width:58%;height:58%}
.jr-grid2{display:grid;grid-template-columns:repeat(2,1fr);gap:11px}
.jr-grid2 .jr-badge{width:clamp(44px,5.8vw,53px)}
.jr-grid2.sm{gap:8px}                       /* tighter 2x2 for the smaller grid/keep-reading covers */
.jr-grid2.sm .jr-badge{width:clamp(30px,9%,42px)}
.jr-feat .jr-cover{position:absolute;inset:0;border-radius:0}
/* lockup hugs the top, left-aligned with the title; body sits at the bottom (no overlap) */
.jr-feat .jr-vs{inset:0 0 auto 0;align-items:center;justify-content:flex-start;padding:32px 30px 0}
.jr-feat::before{content:"";position:absolute;inset:0;z-index:1;
  background:linear-gradient(to top,#0b0a08 0%,#0b0a08e0 26%,#0b0a0870 46%,#0b0a0800 68%)}
.jr-feat .jr-body{position:absolute;left:0;right:0;bottom:0;z-index:2;padding:30px}
.jr-feat .jr-cat{display:block;color:#efe6d3;opacity:.85;margin-bottom:10px}
.jr-feat h2{color:#fff;font-family:var(--jr-serif);font-weight:600;letter-spacing:-.015em;line-height:1.06;font-size:clamp(25px,2.7vw,34px);margin:0;text-wrap:balance}
.jr-feat p{color:#f4efe6cc;font-size:15px;line-height:1.5;margin:12px 0 0;max-width:none}
.jr-meta{display:flex;align-items:center;gap:9px;font-size:12.5px;color:var(--jr-muted);margin-top:15px;flex-wrap:wrap}
.jr-feat .jr-meta{color:#e9e3d8bf}
.jr-meta .jr-dot{width:3px;height:3px;border-radius:50%;background:currentColor;opacity:.6}

/* sidebar rail */
.jr-rail{display:flex;flex-direction:column;gap:24px}
.jr-mini{display:grid;grid-template-columns:104px 1fr;gap:15px;align-items:start;cursor:pointer}
.jr-mini .jr-cover{aspect-ratio:1/1;border-radius:12px}
.jr-mini .jr-vs{gap:0;padding:12px}
.jr-mini h3{font-family:var(--jr-serif);font-weight:600;font-size:18px;line-height:1.18;margin:5px 0 0;letter-spacing:-.01em}
.jr-mini p{font-size:12.5px;color:var(--jr-muted);line-height:1.42;margin:6px 0 0;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.jr-mini .jr-meta{margin-top:7px;font-size:11.5px}

/* latest grid */
.jr-sec-head{display:flex;align-items:baseline;justify-content:space-between;gap:16px;padding:52px 0 22px;border-top:1px solid var(--jr-line);margin-top:44px}
.jr-sec-head h2{font-family:var(--jr-serif);font-weight:600;font-size:clamp(26px,3.4vw,36px);margin:0;letter-spacing:-.015em}
.jr-sec-head a{font-size:13.5px;color:var(--jr-muted);transition:color .2s}
.jr-sec-head a:hover{color:var(--jr-ink)}
.jr-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:34px 30px}
.jr-post{cursor:pointer;display:flex;flex-direction:column}
.jr-post .jr-cover{aspect-ratio:16/11}
.jr-post h3{font-family:var(--jr-serif);font-weight:600;font-size:22px;line-height:1.15;margin:16px 0 0;letter-spacing:-.01em;text-wrap:balance}
.jr-post p{font-size:14px;color:var(--jr-muted);line-height:1.5;margin:9px 0 0;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.jr-post .jr-meta{margin-top:auto;padding-top:12px;font-size:12px}
.jr-empty{grid-column:1/-1;text-align:center;color:var(--jr-muted);font-family:var(--jr-serif);font-size:20px;padding:36px 0;display:none}

/* hover: image/lockup zoom inside the clipped cover + title darken */
.jr-cover .jr-vs,.jr-cover .jr-ph{transition:transform .5s cubic-bezier(.2,.7,.2,1)}
.jr-mini:hover .jr-cover .jr-vs,.jr-post:hover .jr-cover .jr-vs,.jr-feat:hover .jr-cover .jr-vs{transform:scale(1.05)}
.jr-mini:hover,.jr-post:hover{}
.jr-mini h3,.jr-post h3{transition:color .2s}
.jr-post:hover h3,.jr-mini:hover h3{color:#000}
.jr-mini:hover .jr-cover,.jr-post:hover .jr-cover{box-shadow:0 14px 30px -18px #14121055}

/* reveal */
.jr-reveal{opacity:0;transform:translateY(16px);transition:opacity .7s ease,transform .7s cubic-bezier(.2,.7,.2,1)}
.jr-reveal.in{opacity:1;transform:none}

/* breathing room before the footer reveals */
.jr-tail{height:104px}

/* ============ ARTICLE ============ */
.jr-art{padding-bottom:8px}
.jr-art-head{max-width:768px;margin:0 auto;padding:140px 28px 22px;text-align:center}
.jr-art-head .jr-back{display:inline-block;font-size:12.5px;color:var(--jr-muted);letter-spacing:.02em;margin-bottom:22px}
.jr-art-head .jr-back:hover{color:var(--jr-ink)}
.jr-art-head .jr-cat{display:block;margin-bottom:16px}
.jr-art-head h1{font-family:var(--jr-serif);font-weight:600;letter-spacing:-.022em;line-height:1.04;
  font-size:clamp(32px,5.4vw,58px);margin:0;text-wrap:balance}
.jr-art-head .jr-meta{justify-content:center;margin-top:20px}
/* hero VS cover band */
.jr-art-cover{max-width:768px;margin:8px auto 0;padding:0 28px}
.jr-art-cover .jr-cover{aspect-ratio:16/9;border-radius:20px}
.jr-art-cover .jr-badge.b-lg{width:clamp(74px,12%,120px);height:clamp(74px,12%,120px)}

/* prose */
.jr-prose{max-width:768px;margin:0 auto;padding:40px 28px 8px;
  font-family:var(--jr-serif);font-size:19px;line-height:1.72;color:#221f1a}
.jr-prose>*{max-width:100%}
.jr-prose p{margin:0 0 22px}
.jr-prose h2{font-family:var(--jr-serif);font-weight:600;font-size:clamp(24px,3vw,31px);line-height:1.15;
  letter-spacing:-.015em;margin:44px 0 14px;text-wrap:balance;scroll-margin-top:104px}
.jr-prose h3{font-family:var(--jr-serif);font-weight:600;font-size:21px;line-height:1.2;margin:32px 0 10px;scroll-margin-top:104px}
.jr-prose a{color:var(--jr-ink);text-decoration:underline;text-decoration-color:var(--jr-accent-deep);
  text-decoration-thickness:2px;text-underline-offset:3px}
.jr-prose a:hover{background:var(--jr-accent)}
.jr-prose strong{font-weight:700}
.jr-prose em{font-style:italic}
.jr-prose code{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:.85em;
  background:#14121010;padding:2px 6px;border-radius:5px}
.jr-prose ul,.jr-prose ol{margin:0 0 22px;padding-left:1.3em}
.jr-prose li{margin:0 0 9px}
.jr-prose ul li::marker{color:var(--jr-accent-deep)}
.jr-prose pre.jr-pre{background:#14121008;border:1px solid var(--jr-line);border-radius:12px;padding:16px;overflow-x:auto;font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:13px;line-height:1.5;margin:22px 0}
.jr-prose hr.jr-rule{border:0;height:1px;background:var(--jr-line);max-width:120px;margin:38px auto}
/* pull-quote from blockquotes */
.jr-prose blockquote.jr-pq{margin:34px 0;padding:4px 0 4px 24px;border-left:3px solid var(--jr-accent);
  font-size:24px;line-height:1.35;font-style:italic;color:var(--jr-ink)}
.jr-prose blockquote.jr-pq p{margin:0}
/* comparison table */
.jr-cmp-wrap{margin:30px 0;overflow-x:auto;border:1px solid var(--jr-line);border-radius:14px}
table.jr-cmp{border-collapse:collapse;width:100%;font-family:var(--jr-sans);font-size:14.5px}
table.jr-cmp th,table.jr-cmp td{text-align:left;padding:13px 16px;border-bottom:1px solid var(--jr-line2);vertical-align:top}
table.jr-cmp thead th{font-weight:700;font-size:12px;letter-spacing:.04em;text-transform:uppercase;color:var(--jr-muted);background:#14121006}
table.jr-cmp tbody tr:last-child td{border-bottom:0}
table.jr-cmp td:first-child,table.jr-cmp th:first-child{font-weight:600;color:var(--jr-ink)}
table.jr-cmp .jr-col-zero{background:#fdec041f}
table.jr-cmp thead .jr-col-zero{background:var(--jr-accent);color:var(--jr-ink)}
/* CTA band */
.jr-cta{max-width:768px;margin:48px auto 0;padding:0 28px}
.jr-cta-card{background:var(--jr-ink);color:var(--jr-paper);border-radius:20px;padding:clamp(30px,5vw,52px);text-align:center;position:relative;overflow:hidden}
.jr-cta-card::before{content:"";position:absolute;inset:0;background:radial-gradient(90% 120% at 82% 0%,#2a251c,transparent 60%);opacity:.7}
.jr-cta-card>*{position:relative}
.jr-cta-card h2{font-family:var(--jr-serif);font-weight:600;font-size:clamp(24px,3.4vw,34px);margin:0;letter-spacing:-.015em}
.jr-cta-card p{color:#efe6d3bf;margin:14px auto 0;max-width:46ch;line-height:1.5}
.jr-cta-btn{display:inline-flex;align-items:center;gap:8px;margin-top:24px;background:var(--jr-accent);color:var(--jr-ink);
  font-family:var(--jr-sans);font-weight:600;font-size:15px;padding:13px 26px;border-radius:999px;box-shadow:0 1px 0 var(--jr-accent-deep)}
.jr-cta-btn:hover{transform:translateY(-1px)}
/* keep reading */
.jr-keep{max-width:1120px;margin:0 auto;padding:0 28px}
@media(max-width:900px){
  .jr-lead{grid-template-columns:1fr}
  .jr-feat{min-height:360px}
  .jr-grid{grid-template-columns:repeat(2,1fr)}
}
@media(max-width:640px){
  .jr-wrap{padding:0 20px}
  /* taller nav (promobar + Pre-Order pill) on mobile: clear it + ~18px breathing room */
  .jr-mast{padding:126px 0 22px}
  .jr-mast .jr-issue{position:static;text-align:left;margin:0 0 8px}
  .jr-grid{grid-template-columns:1fr;gap:26px}
  /* featured: keep the lockup compact so it never overlaps the copy on a narrow card */
  .jr-feat{min-height:344px}
  .jr-feat .jr-vs{padding:24px 22px 0}
  .jr-feat .jr-body{padding:24px 22px}
  /* clamp the featured excerpt to 2 rows with an ellipsis on mobile */
  .jr-feat p{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
  .jr-badge.b-xl{width:82px}
  .jr-grid2 .jr-badge,.jr-grid2.sm .jr-badge{width:38px}
  .jr-grid2{gap:9px}
  /* article */
  .jr-art-head{padding-top:126px}
  .jr-prose{font-size:18px;padding:32px 22px 8px}
  .jr-art-cover,.jr-cta{padding-left:22px;padding-right:22px}
  .jr-keep{padding:0 20px}
}
@media(prefers-reduced-motion:reduce){
  .jr-reveal{opacity:1;transform:none;transition:none}
  .jr-mini:hover .jr-cover .jr-vs,.jr-post:hover .jr-cover .jr-vs,.jr-feat:hover .jr-cover .jr-vs{transform:none}
}