/* Guides — the SEO/content section of the marketing site.
   Shared by guides/index.html and every article page.

   ⭐ CONVERTED TO THE BRUTALIST REGISTER 2026-08-29. It was the dark
   aesthetic until tonight, while landing.css had already shipped light —
   so anybody clicking "Guides" in the landing footer fell out of one app
   and into another. Every token, type size and rule below is lifted from
   the LIVE landing.css rather than re-derived, because the only job this
   file has is to be the same page the landing is.

   ⚠️ NOTHING IN THE HTML CHANGED, and that is the point. The three guide
   pages carry no inline styles and no hex codes — only semantic class
   names — so the whole register swap is this one file. Keep it that way:
   a colour or a size written into an article is a page that will not come
   along on the next change.

   The rules this file obeys (docs/DESIGN-RULES.md):
     · six type sizes, nothing between them — 34 / 22 / 15 / 13 / 11 / 9.5
     · ZERO radius. Panels are butted and ruled, never floated
     · Archivo for words, IBM Plex Mono for money, dates and labels
       (Plex Mono never above 600 — 700 is not loaded and fakes itself)
     · no invented hexes. Body copy is ink, not a softened grey
     · one thing per region is allowed to be loud — on a guide page that
       is THE SHORT ANSWER, and nothing else competes with it

   Keep this file BOM-free and never prepend above the first rule — see
   the warning at the top of landing.css for what that costs. */
:root{
  /* Lifted verbatim from the live landing.css. If that palette moves,
     this block moves with it — they are one surface to a reader. */
  --paper:#eceae3;
  --ink:#111014;
  --grey:#7c7a72;
  --line:#111014;
  --money:#007a03;
  --attn:#e9ff4b;

  --sans:'Archivo','Helvetica Neue',Arial,sans-serif;
  --mono:'IBM Plex Mono',ui-monospace,Menlo,monospace;

  --t-1:34px;
  --t-2:22px;
  --t-3:15px;
  --t-4:13px;
  --t-5:11px;
  --t-6:9.5px;
}

*{box-sizing:border-box;margin:0;padding:0}

html{scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *{transition:none !important}
}

body{
  background:var(--paper);
  color:var(--ink);
  font-family:var(--sans);
  -webkit-font-smoothing:antialiased;
  min-height:100vh;
  padding:22px 20px 44px;
}
a{color:inherit}

/* The framed sheet. Same 2px rule the landing draws its whole page in;
   1000px rather than 1560 because this one holds prose, not a dashboard. */
.header,.article,.footer{max-width:880px;margin-left:auto;margin-right:auto}
.header{border:2px solid var(--line);border-bottom-width:2px;background:var(--paper)}
.article{border:2px solid var(--line);border-top:0;background:var(--paper)}
.footer{border:2px solid var(--line);border-top:0}

/* ── Header — reads identically to the landing's nav ──
   Different class names (the HTML predates the register), same object. */
.header-inner{display:flex;align-items:stretch;min-height:54px}
.header-logo{
  font-size:20px;font-weight:900;letter-spacing:-.045em;
  padding:15px 22px;display:flex;align-items:center;
  text-decoration:none;flex-shrink:0;
}
.header-nav{display:flex;flex:1}
.header-nav a,.btn-login,.btn-signup{
  border-left:1px solid var(--line);padding:0 18px;
  display:flex;align-items:center;
  font-family:var(--mono);font-size:var(--t-5);letter-spacing:.13em;
  text-transform:uppercase;text-decoration:none;white-space:nowrap;
}
.header-nav a:hover,.btn-login:hover{background:var(--ink);color:var(--paper)}
.header-nav a.active{background:var(--ink);color:var(--paper)}
.header-auth{display:flex;align-items:stretch;margin-left:auto}
.btn-signup{background:var(--ink);color:var(--paper)}
.btn-signup:hover{background:var(--money);color:#fff}

/* ── Article shell ── */
.article{padding:0}
.crumbs{
  font-family:var(--mono);font-size:var(--t-6);letter-spacing:.18em;
  text-transform:uppercase;color:var(--grey);
  padding:16px 30px;border-bottom:1px solid var(--line);
}
.crumbs a{text-decoration:none}
.crumbs a:hover{color:var(--ink);text-decoration:underline}

h1{
  font-size:var(--t-1);font-weight:900;line-height:1.02;letter-spacing:-.045em;
  padding:34px 30px 0;max-width:24ch;text-wrap:balance;
}

.article-meta{
  display:flex;flex-wrap:wrap;align-items:center;gap:14px;
  font-family:var(--mono);font-size:var(--t-6);letter-spacing:.13em;
  text-transform:uppercase;color:var(--grey);
  padding:20px 30px 24px;
}
/* The separator dots are decoration the mono letter-spacing already does
   better. Kept in the markup, hidden here — one job per element. */
.article-meta .dot{display:none}
.meta-year-badge{color:var(--ink);border:1px solid var(--line);padding:4px 9px}

/* ── The one loud thing on the page ──
   A flat field of the attention colour, the way the landing uses it: ink
   on top, no tint, no hairline, nothing polite about it. Every other
   region on a guide page is deliberately quiet so this one can carry. */
.short-answer{
  background:var(--attn);color:var(--ink);
  border-top:2px solid var(--line);border-bottom:2px solid var(--line);
  padding:26px 30px;
}
.short-answer-label{
  font-family:var(--mono);font-size:var(--t-6);letter-spacing:.18em;
  text-transform:uppercase;margin-bottom:12px;
}
.short-answer p{font-size:var(--t-2);line-height:1.4;font-weight:500;letter-spacing:-.02em}
.short-answer .yes{font-weight:800}

/* ── On this page ── */
.toc{padding:26px 30px;border-bottom:1px solid var(--line)}
.toc-label{
  font-family:var(--mono);font-size:var(--t-6);letter-spacing:.18em;
  text-transform:uppercase;color:var(--grey);margin-bottom:14px;
}
.toc ol{list-style:none;display:grid;gap:2px}
.toc li{counter-increment:toc}
/* .article a paints links; the TOC stays quiet. Written as .article .toc a
   so it outranks .article a — equal specificity would let source order
   decide, and the whole list took the link colour. */
.article .toc a{
  font-size:var(--t-4);line-height:1.6;text-decoration:none;color:var(--ink);
  display:inline-block;padding:2px 0;
}
.article .toc a:hover{text-decoration:underline;text-underline-offset:3px}

/* ── Body copy ── */
.article h2{
  font-size:var(--t-2);font-weight:700;letter-spacing:-.03em;line-height:1.15;
  padding:38px 30px 0;scroll-margin-top:20px;max-width:40ch;text-wrap:balance;
}
.article p{
  font-size:var(--t-3);line-height:1.7;
  padding:0 30px;margin-top:16px;max-width:74ch;
}
.article p strong{font-weight:600}
.article a{color:var(--ink);text-decoration:underline;text-underline-offset:3px;
  text-decoration-thickness:1px}
.article a:hover{background:var(--attn)}
.article sup{font-family:var(--mono);font-size:var(--t-6);padding-left:1px}

.article ul{list-style:none;margin-top:16px;padding:0 30px;max-width:74ch}
.article ul li{
  font-size:var(--t-3);line-height:1.65;
  padding:9px 0 9px 20px;border-top:1px solid rgba(17,16,20,.14);position:relative;
}
.article ul li:first-child{border-top:0}
.article ul li::before{
  content:"";position:absolute;left:0;top:17px;
  width:9px;height:1px;background:var(--ink);
}
.article ul li strong{font-weight:600}

/* ── Timeline — a real dated sequence, so it gets a rule and a year ── */
.timeline{margin:22px 30px;border-left:2px solid var(--line);max-width:70ch}
.tl-row{padding:0 0 20px 18px;position:relative}
.tl-row:last-child{padding-bottom:2px}
.tl-row::before{
  content:"";position:absolute;left:-2px;top:7px;width:10px;height:2px;background:var(--line);
}
.tl-year{
  font-family:var(--mono);font-size:var(--t-6);letter-spacing:.15em;
  text-transform:uppercase;color:var(--grey);margin-bottom:5px;
}
/* The row that is TRUE TODAY is the only one that gets the field. */
.tl-row.tl-now .tl-year{background:var(--attn);color:var(--ink);display:inline-block;padding:3px 7px}
.tl-row.tl-now::before{height:3px;top:6px}
.tl-row p{font-size:var(--t-4);line-height:1.6;padding:0;margin:0;max-width:none}

/* ── Worked math ── */
.math{border:2px solid var(--line);margin:22px 30px;max-width:60ch}
.math-title{
  font-family:var(--mono);font-size:var(--t-6);letter-spacing:.18em;
  text-transform:uppercase;padding:12px 16px;border-bottom:1px solid var(--line);
}
.math-row{
  display:flex;justify-content:space-between;gap:16px;
  font-size:var(--t-4);line-height:1.5;padding:11px 16px;
  border-top:1px solid rgba(17,16,20,.14);
}
.math-row:first-of-type{border-top:0}
/* Plex Mono at 500. Never 700 — that cut is not loaded and the browser
   fakes it, which un-aligns every column of figures on the page. */
.math-row .val{font-family:var(--mono);font-size:var(--t-4);font-weight:500;
  font-variant-numeric:tabular-nums;white-space:nowrap}
.math-row.total{border-top:2px solid var(--line);font-weight:600}
.math-row.total .val{background:var(--attn);padding:2px 7px;font-weight:600}
.math-note{
  font-size:var(--t-5);line-height:1.6;color:var(--grey);
  padding:12px 16px;border-top:1px solid var(--line);
}

/* ── Sources ── */
.sources{padding:0 30px;margin-top:16px;max-width:74ch}
.sources ol{padding-left:18px}
.sources li{font-size:var(--t-4);line-height:1.65;padding:5px 0;color:var(--grey)}
.article .sources a{color:var(--grey);text-decoration:underline;text-underline-offset:3px}
.article .sources a:hover{color:var(--ink);background:var(--attn)}

/* ── Disclaimer ── */
.disclaimer{
  border-top:2px solid var(--line);margin-top:38px;padding:18px 30px;
  background:rgba(17,16,20,.035);
}
.disclaimer p{font-size:var(--t-5);line-height:1.65;color:var(--grey);padding:0;margin:0;max-width:80ch}

/* ── The one-line ALPHA footnote — a footnote, never a funnel ── */
.alpha-note{border-top:1px solid var(--line);padding:22px 30px 30px}
.alpha-note p{font-size:var(--t-4);line-height:1.7;color:var(--grey);padding:0;margin:0;max-width:74ch}
.alpha-note strong{color:var(--ink);font-weight:600}

/* ── Index page: the guide list ── */
/* The rule under this divides the whole sheet, so it must span the sheet.
   The reading measure comes from padding-right instead of a max-width —
   a max-width here would crop the border with the text. */
/* .article p caps every paragraph at 74ch, and this one IS a <p> — so its
   bottom rule was being cropped to the measure instead of dividing the
   sheet. Two classes to outrank it, then the measure comes from padding. */
.article .guides-intro{
  font-size:var(--t-3);line-height:1.7;padding:24px 26% 24px 30px;
  margin-top:0;max-width:none;border-bottom:1px solid var(--line);
}
/* Butted, not spaced: one rule shared between two cards, the way the
   landing stacks its sections. A gap here would re-introduce the floating
   card the register exists to remove. */
.guide-list{display:flex;flex-direction:column}
.article .guide-item{
  display:block;text-decoration:none;padding:22px 30px;
  border-bottom:1px solid var(--line);color:var(--ink);
}
.article .guide-item:hover{background:var(--ink);color:var(--paper)}
/* Only the title reads as the link. The description is prose on a card,
   not a sentence with a link in it. */
.article .guide-item .guide-item-title{text-decoration:underline;
  text-underline-offset:4px;text-decoration-thickness:1.5px}
.guide-item-cat{
  font-family:var(--mono);font-size:var(--t-6);letter-spacing:.18em;
  text-transform:uppercase;color:var(--grey);margin-bottom:9px;
}
.guide-item:hover .guide-item-cat,
.guide-item:hover .guide-item-meta{color:var(--paper);opacity:.75}
.guide-item-title{font-size:var(--t-2);font-weight:700;letter-spacing:-.03em;
  line-height:1.2;margin-bottom:8px;max-width:28ch}
.guide-item-desc{font-size:var(--t-4);line-height:1.6;margin-bottom:10px;max-width:72ch}
.guide-item-meta{
  font-family:var(--mono);font-size:var(--t-6);letter-spacing:.13em;
  text-transform:uppercase;color:var(--grey);
}
.guides-more{
  font-family:var(--mono);font-size:var(--t-6);letter-spacing:.15em;
  text-transform:uppercase;color:var(--grey);padding:20px 30px;
}

/* ── Footer — the landing's foot, same letter-spacing and case ── */
.footer-inner{
  display:flex;flex-wrap:wrap;justify-content:space-between;gap:14px;
  padding:18px 22px;
  font-family:var(--mono);font-size:var(--t-6);letter-spacing:.13em;
  text-transform:uppercase;color:var(--grey);
}
.footer-left{display:flex;flex-wrap:wrap;gap:18px;align-items:center}
.footer-logo{color:var(--ink);font-weight:500;font-family:var(--sans);font-size:15px;
  letter-spacing:-.04em;text-transform:none}
.footer-copy{color:var(--grey)}
.footer-links{display:flex;flex-wrap:wrap;gap:18px;align-items:center}
.footer-links a{text-decoration:none;color:var(--grey)}
.footer-links a:hover{color:var(--ink)}

/* ── Mobile ── */
@media (max-width:820px){
  body{padding:12px 12px 28px}
  .crumbs,.toc,.short-answer,.disclaimer,.alpha-note{padding-left:18px;padding-right:18px}
  h1,.article-meta,.article h2,.article p,.article ul,.sources,
  .guides-intro,.guide-item,.guides-more{padding-left:18px;padding-right:18px}
  .timeline,.math{margin-left:18px;margin-right:18px}
  h1{font-size:26px;max-width:none}
  .short-answer p{font-size:18px}
  .article h2{font-size:19px;max-width:none}
  .header-nav{display:none}
  .header-logo{padding:13px 18px}
  /* Measured at 375px: the invite button pushed the page 5px wider than the
     viewport and gave every guide a horizontal scrollbar. The two auth
     controls get tighter padding and are allowed to wrap their label rather
     than the page. */
  .btn-login{padding:0 12px}
  .btn-signup{padding:0 12px;text-align:center;line-height:1.15}
  .header-inner{min-width:0}
  .header-auth{min-width:0;flex-shrink:1}
  .footer-inner{padding:16px 18px}
}