/* _guide-theme.css — repaint the guide body in the new club system.

   _guide.css is entirely token-driven (335 var() calls, no hardcoded colour
   outside its :root), so the whole article rethemes by redefining the tokens
   rather than rewriting 1,100 lines of component CSS. Load order matters:

       club.css  →  _guide.css  →  _guide-theme.css

   Anything below the token block is a spot fix where the old editorial
   styling doesn't survive the palette change on its own. */

:root{
  /* surfaces: newsprint bone → clean white */
  --bone:      #FFFFFF;
  --bone-soft: #F7F7F4;
  --bone-deep: #EFEFEA;

  --ink:    #1B1B1B;
  --ink-70: rgba(27,27,27,.70);
  --ink-55: rgba(27,27,27,.55);
  --ink-40: rgba(27,27,27,.45);
  --ink-30: rgba(27,27,27,.30);
  --ink-12: rgba(27,27,27,.12);

  /* oxblood carried every accent in the old design — hand it to blue, which
     is what "interactive" means in the new system */
  --oxblood: #2D7FF0;
  --ochre:   #E3AF00;
  --moss:    #2FA84F;

  /* one friendly sans everywhere; the serif slot points at it too so the old
     serif headings come out in Nunito instead of Source Serif */
  --serif: "Nunito Sans", -apple-system, BlinkMacSystemFont, "Helvetica Neue", Arial, sans-serif;
  --sans:  "Nunito Sans", -apple-system, BlinkMacSystemFont, "Helvetica Neue", Arial, sans-serif;
  --mono:  "JetBrains Mono", ui-monospace, "SFMono-Regular", Menlo, monospace;

  --t-display:38px; --t-subhead:25px; --t-lead:19px; --t-body:17px; --t-meta:12px; --t-mono:12.5px;
  --grain-opacity:0;      /* the newsprint grain is not part of the new look */
  --nav-h:62px;
  --container:100%;
  --gutter:0px;           /* the shell already supplies the page gutter */
}
@media (max-width:820px){
  :root{ --t-display:30px; --t-subhead:21px; --t-lead:17px; --t-body:16px; }
}

/* the grain overlay is a fixed pseudo-element — opacity:0 still paints, so
   remove it outright */
body::before{ display:none !important; }
body{ background:var(--white); line-height:1.65; }

/* italic serif <em> was the old accent; keep the emphasis, drop the italic
   affectation in headings so they read as one confident voice */
.guide__title em,
.guide__section-title em,
.wordmark em{ font-style:normal; font-weight:inherit; }
/* the emphasis moves from italic serif to a yellow underline */
.guide__title em{
  text-decoration:underline; text-decoration-color:var(--yellow);
  text-decoration-thickness:5px; text-underline-offset:4px;
}

/* ── article rhythm ─────────────────────────────────────── */
.guide{ padding:0; }
.guide__article{ max-width:none; }
.guide__crumb{ margin-bottom:16px; font-family:var(--mono); font-size:11.5px; letter-spacing:.08em; text-transform:uppercase; color:var(--ink-40); }
.guide__crumb a{ color:var(--blue); text-decoration:none; }
.guide__crumb a:hover{ text-decoration:underline; }

.guide__title{ font-weight:800; letter-spacing:-.02em; line-height:1.12; }
.guide__verdict{ color:var(--ink-70); }
.guide__byline{ color:var(--ink-55); }
.guide__byline .stat{ background:var(--yellow-l); color:#8A6B00; border-radius:999px; padding:3px 10px; font-family:var(--mono); font-size:11px; }

.guide__p{ font-size:17px; line-height:1.7; }
.guide__section-title{ font-weight:800; letter-spacing:-.015em; }
.guide__step-title{ font-weight:800; }

/* ── rounded, friendly surfaces ─────────────────────────── */
.guide__pull,
.guide__breaks,
.guide__build__block,
.guide__avoid,
.guide__triad__cell,
.guide__lock,
.guide__cta,
.guide__related{ border-radius:14px; }

.guide__pull{ background:var(--blue-l); border-left:4px solid var(--blue); }
.guide__pull-label{ color:var(--blue-d); }
.guide__avoid{ background:#FDECEC; border-left:4px solid #C4443B; }

/* code blocks read better dark against all this white */
.guide__pre{
  background:#1B1B1B; color:#F2F2EE; border:none; border-radius:12px;
  font-family:var(--mono); font-size:13.5px; line-height:1.65;
}
.guide__pre *{ color:inherit; }
.guide__copy-btn{
  border-radius:999px; border:1px solid rgba(255,255,255,.28);
  background:rgba(255,255,255,.1); color:#F2F2EE;
  font-family:var(--mono); font-size:10.5px; letter-spacing:.1em; text-transform:uppercase;
  padding:5px 11px; cursor:pointer;
}
.guide__copy-btn:hover{ background:rgba(255,255,255,.2); }
.guide__copy-btn.is-copied{ background:var(--green); border-color:var(--green); color:#fff; }

/* ── tab strip → pill row ───────────────────────────────── */
.guide__tabs{ gap:8px; border:none; padding:0; margin:22px 0 26px; flex-wrap:wrap; }
.guide__tab{
  border:2px solid var(--ink-12); border-radius:999px; background:var(--white);
  padding:8px 16px; font-family:var(--sans); font-weight:700; font-size:14.5px;
  color:var(--ink-70); cursor:pointer;
}
.guide__tab:hover{ border-color:var(--ink-40); color:var(--ink); }
.guide__tab.is-active{ background:var(--ink); border-color:var(--ink); color:#fff; }
.guide__tab .num{ opacity:.6; margin-right:6px; font-family:var(--mono); font-size:10.5px; }

/* ── tables ─────────────────────────────────────────────── */
.guide__decide,
.guide__compare,
.guide__factory{ border-radius:12px; overflow:hidden; border:1px solid var(--ink-12); }
.guide__decide__h,
.guide__compare__h,
.guide__factory__h{ background:var(--bone-soft); font-family:var(--mono); font-size:11px; letter-spacing:.1em; text-transform:uppercase; color:var(--ink-55); }
.guide__decide__cell--ox{ color:var(--green-d); font-weight:800; }
.guide__decide__cell--no{ color:var(--ink-40); }

/* ── the guide's own CTA → the audit ────────────────────── */
.guide__cta{ background:var(--ink); color:#fff; border:none; padding:26px; }
.guide__cta *{ color:#fff; }
/* the accent <em> inherited link-blue, which is only 3.6:1 on the dark panel */
.guide__cta-head em{ color:var(--yellow) !important; font-style:normal; }
.guide__cta-fine{ color:rgba(255,255,255,.6) !important; }
.guide__cta-btn{
  background:var(--yellow); color:var(--ink) !important; border:2px solid var(--yellow);
  border-radius:999px; padding:14px 26px; font-weight:800; text-decoration:none;
  display:inline-flex; align-items:center; gap:8px;
}
.guide__cta-btn:hover{ background:var(--yellow-d); border-color:var(--yellow-d); }

/* ── locked panels ──────────────────────────────────────── */
.guide__lock{ background:var(--yellow-l); border:2px solid var(--ink); }
.guide__lock__cta{ background:var(--yellow); border:2px solid var(--ink); border-radius:999px; padding:13px 24px; font-weight:800; color:var(--ink); text-decoration:none; display:inline-block; }

/* the old chrome is gone — make sure nothing left behind shows up */
.nav, .drawer, .footer{ display:none !important; }

/* ── generic-class collisions with club.css ──────────────
   club.css owns .top (the sticky page header), .note (a callout box) and
   .small as page furniture. The article markup uses .top for a ranked row and
   .note for an inline aside. _guide.css restyles their *typography* but never
   resets box or positioning, so club.css's properties leak straight through —
   which turned every top-ranked row into a 62px sticky bar and every inline
   note into a blue block. Reset the leaked properties inside the article. */
.guide__article li.top{
  position:static; height:auto; z-index:auto;
  background:none; backdrop-filter:none; -webkit-backdrop-filter:none;
}
.guide__article .name .note{
  display:inline; background:none; border:0; border-radius:0;
  padding:0; margin:0;
}

/* ── the ranked tool list ────────────────────────────────
   Same thing as .stack__list on /stacks; give it the same air. */
.guide__tools{ margin:18px 0 22px; border-top:1px solid var(--ink-12); }
.guide__tools li{ padding:12px 2px; align-items:center; }
.guide__tools li.top .name{ font-weight:800; }
.guide__tools .name{ font-weight:700; }
.guide__tools .name .note{ font-family:var(--sans); font-style:normal; font-size:15px; color:var(--ink-55); }