/* ── Guides ───────────────────────────────────────────────────────────────────
   Prose styling for /guides/*, loaded ONLY by guide pages and layered on top of
   v4.css (which supplies the tokens, header, footer and mega-menu).

   Deliberately a separate file rather than an addition to v4.css: a guide is the
   only thing that needs prose rules, and folding them into the shared stylesheet
   would force the `?v=` cache-buster to be bumped on every page of the site each
   time a guide style changed. Keeping it here means a new guide touches nothing
   that already ships.

   The venue-type pages are marketing sections (.hero, .pricing, .dark). A guide is
   read top to bottom, so it needs a measure and a rhythm instead.
   ─────────────────────────────────────────────────────────────────────────────── */

.guide{max-width:min(72ch,100%);margin:0 auto;padding:56px 22px 72px;}

.guide .eyebrow{font-family:var(--mono);font-size:12px;letter-spacing:.1em;
  text-transform:uppercase;color:var(--coral-deep);margin:0 0 10px;}
.guide h1{font-family:var(--display);font-weight:800;font-size:clamp(30px,5vw,44px);
  line-height:1.08;letter-spacing:-.02em;margin:0 0 14px;text-wrap:balance;}
.guide .lede{font-size:19px;line-height:1.6;color:var(--ink-soft);margin:0 0 10px;}
.guide .byline{font-family:var(--mono);font-size:12.5px;color:var(--ink-soft);
  margin:0 0 34px;padding-bottom:22px;border-bottom:1px solid var(--line);}

.guide h2{font-family:var(--display);font-weight:800;font-size:clamp(21px,3vw,27px);
  line-height:1.2;letter-spacing:-.01em;margin:44px 0 12px;text-wrap:balance;}
.guide h3{font-family:var(--display);font-weight:700;font-size:18px;margin:28px 0 8px;}
.guide p,.guide li{font-size:17px;line-height:1.68;color:var(--ink-soft);}
.guide p{margin:0 0 16px;}
.guide ul,.guide ol{margin:0 0 18px;padding-left:22px;}
.guide li{margin:0 0 9px;}
.guide strong{color:var(--ink);font-weight:700;}
.guide a{color:var(--coral-deep);text-underline-offset:2px;}

/* Figures carry the Hatch signature face, same as the storefront and the reports. */
.guide .num{font-family:var(--mono);font-weight:700;color:var(--ink);}

/* Wide tables scroll inside their own box rather than pushing the page sideways. */
.guide .tw{overflow-x:auto;margin:0 0 22px;}
.guide table{border-collapse:collapse;width:100%;font-size:15.5px;min-width:460px;}
.guide th,.guide td{border:1px solid var(--line);padding:9px 12px;text-align:left;}
.guide thead th{background:var(--coral-wash);font-family:var(--display);font-weight:700;
  color:var(--ink);}
.guide td.n{font-family:var(--mono);text-align:right;white-space:nowrap;}

/* The one thing to take away, pulled out of the flow. */
.guide .keytake{background:var(--coral-wash);border:1px solid var(--coral-line);
  border-radius:14px;padding:18px 20px;margin:26px 0;}
.guide .keytake p{margin:0;color:var(--ink);}
.guide .keytake p+p{margin-top:10px;}

.guide blockquote{margin:24px 0;padding:2px 0 2px 18px;border-left:3px solid var(--coral);
  color:var(--ink-soft);font-style:italic;}
.guide .endnote{margin-top:40px;padding-top:20px;border-top:1px solid var(--line);
  font-size:14.5px;color:var(--ink-soft);}

@media(max-width:640px){
  .guide{padding:38px 18px 56px;}
  .guide p,.guide li{font-size:16.5px;}
}

/* Guide index list. Cards rather than bare links, so each guide can carry the venue type
   and a line of what it is about: the index has to sell the read, not just name it. */
.glist{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:14px;}
.glist li{margin:0;}
.glist a{display:block;text-decoration:none;border:1px solid var(--line);border-radius:14px;
  padding:20px 22px;background:var(--paper);transition:border-color .12s var(--ease),transform .12s var(--ease);}
.glist a:hover{border-color:var(--coral);transform:translateY(-1px);}
.glist a:focus-visible{outline:3px solid var(--blue);outline-offset:2px;}
.gl-kick{display:block;font-family:var(--mono);font-size:11.5px;letter-spacing:.1em;
  text-transform:uppercase;color:var(--coral-deep);margin-bottom:6px;}
.gl-t{display:block;font-family:var(--display);font-weight:800;font-size:19px;line-height:1.25;
  color:var(--ink);margin-bottom:6px;text-wrap:balance;}
.gl-d{display:block;font-size:15.5px;line-height:1.55;color:var(--ink-soft);}

/* Venue-type hub cards. Same shape as the guide index cards, wider grid because there are
   thirteen of them: a hub has to be scannable at a glance, not a long single column. */
.vtgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:14px;margin:0;padding:0;list-style:none;}
.vtgrid li{margin:0;}
.vtgrid a{display:block;height:100%;text-decoration:none;border:1px solid var(--line);border-radius:14px;
  padding:18px 20px;background:var(--paper);transition:border-color .12s var(--ease),transform .12s var(--ease);}
.vtgrid a:hover{border-color:var(--coral);transform:translateY(-1px);}
.vtgrid a:focus-visible{outline:3px solid var(--blue);outline-offset:2px;}
.vt-t{display:block;font-family:var(--display);font-weight:800;font-size:17px;line-height:1.25;
  color:var(--ink);margin-bottom:5px;}
.vt-d{display:block;font-size:14.5px;line-height:1.5;color:var(--ink-soft);}