/* The guide and comparison pages. Self-contained on purpose: it shares the landing page's tokens
   and fonts but loads none of site.css, whose rules are scoped to the landing page's section ids.
   Nothing here can reach index.html.

   Corners are square. The landing page rounds only circles (50%, for dots and avatars); every
   panel, button and rule on it is a straight 1px line in #3a3836, so these pages do the same. */

@font-face { font-family: 'Geist'; src: url('../assets/Geist-Variable.woff2') format('woff2'); font-weight: 100 900; font-display: swap; }
@font-face { font-family: 'Geist Mono'; src: url('../assets/GeistMono-Variable.woff2') format('woff2'); font-weight: 100 900; font-display: swap; }

:root {
  --bg: #1a1817; --surface: #282625; --panel: #1e1c1b; --line: #3a3836; --line-soft: #353331;
  --text: #efebe7; --dim: #c4bdb8; --faint: #a09994; --accent: #ee6018;
  --sans: 'Geist', 'Avenir Next', -apple-system, sans-serif;
  --mono: 'Geist Mono', ui-monospace, monospace;
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: #1a1817 radial-gradient(rgba(239,235,231,.055) 1px, transparent 1.3px) 0 0 / 32px 32px;
  color: var(--text); font-family: var(--sans); font-size: 17px; line-height: 1.65;
  -webkit-font-smoothing: antialiased;
}

a { color: var(--text); text-decoration-color: rgba(239,235,231,.35); text-underline-offset: 3px; }
a:hover { text-decoration-color: var(--accent); }

/* ---- top bar ---- */
.bar { border-bottom: 1px solid var(--line); background: rgba(26,24,23,.86); backdrop-filter: blur(8px); position: sticky; top: 0; z-index: 5; }
.bar-in { max-width: 820px; margin: 0 auto; padding: 13px 24px; display: flex; align-items: center; gap: 14px; }
.bar-wm { display: flex; align-items: center; gap: 9px; font-weight: 500; text-decoration: none; letter-spacing: -.01em; }
.bar-wm img { width: 20px; height: 20px; }
.bar-in .sp { flex: 1; }
.bar-in .dl { font-size: 14px; padding: 7px 14px; border: 1px solid var(--line); text-decoration: none; color: var(--dim); white-space: nowrap; }
.bar-in .dl:hover { border-color: var(--accent); color: var(--text); }

/* ---- page ---- */
main { max-width: 820px; margin: 0 auto; padding: 46px 24px 24px; }
.kicker { font-family: var(--mono); font-size: 11px; letter-spacing: .14em; text-transform: uppercase; color: var(--faint); margin: 0 0 14px; }
h1 { font-size: clamp(30px, 5vw, 42px); line-height: 1.14; letter-spacing: -.025em; font-weight: 500; margin: 0 0 18px; }
.standfirst { font-size: 19px; color: var(--dim); margin: 0 0 10px; }
.asof { font-family: var(--mono); font-size: 12px; color: var(--faint); margin: 0 0 38px; }
h2 { font-size: 24px; line-height: 1.25; letter-spacing: -.018em; font-weight: 500; margin: 42px 0 14px; }
h3 { font-size: 18px; line-height: 1.3; font-weight: 500; margin: 28px 0 10px; }
p { margin: 0 0 18px; }
ul, ol { margin: 0 0 18px; padding-left: 21px; }
li { margin: 0 0 8px; }
strong { font-weight: 600; }
code { font-family: var(--mono); font-size: .88em; background: var(--panel); border: 1px solid var(--line-soft); padding: 1px 5px; }
pre { background: var(--panel); border: 1px solid var(--line); padding: 15px 17px; overflow-x: auto; margin: 0 0 18px; }
pre code { background: none; border: 0; padding: 0; font-size: 14px; line-height: 1.6; }
hr { border: 0; border-top: 1px solid var(--line); margin: 42px 0; }

/* ---- figures ---- */
figure { margin: 0 0 24px; }
figure img { display: block; width: 100%; height: auto; border: 1px solid var(--line); background: var(--panel); }
figcaption { font-size: 14px; color: var(--faint); margin-top: 9px; }

/* ---- table ---- */
.wrap { overflow-x: auto; margin: 0 0 20px; border: 1px solid var(--line); }
table { border-collapse: collapse; width: 100%; font-size: 15px; }
th, td { text-align: left; padding: 11px 14px; border-bottom: 1px solid var(--line-soft); vertical-align: top; }
th { font-family: var(--mono); font-size: 11px; letter-spacing: .1em; text-transform: uppercase; color: var(--faint); font-weight: 500; background: var(--panel); }
tbody td:first-child { white-space: nowrap; }
tbody tr:last-child td { border-bottom: 0; }
td .y { color: #7fc99a; } td .n { color: var(--faint); }

/* ---- callout ---- */
.note { border: 1px solid var(--line); border-left: 2px solid var(--accent); background: var(--panel); padding: 16px 19px; margin: 0 0 22px; }
.note p:last-child { margin-bottom: 0; }
.note .h { font-family: var(--mono); font-size: 11px; letter-spacing: .12em; text-transform: uppercase; color: var(--accent); margin: 0 0 7px; }

/* ---- card list, for the index ---- */
.cards { display: grid; gap: 0; margin: 0 0 22px; padding: 0; list-style: none; border: 1px solid var(--line); }
.cards li { margin: 0; border-bottom: 1px solid var(--line-soft); }
.cards li:last-child { border-bottom: 0; }
.cards a { display: block; background: var(--panel); padding: 18px 20px; text-decoration: none; }
.cards a:hover { background: var(--surface); }
.cards b { display: block; font-size: 18px; font-weight: 500; margin-bottom: 5px; }
.cards span { color: var(--dim); font-size: 15px; }

/* ---- the one call to action, at the foot of the prose ---- */
.cta { border: 1px solid var(--line); background: var(--panel); padding: 22px 24px; margin: 40px 0 0; }
.cta h2 { margin: 0 0 8px; font-size: 20px; }
.cta p { color: var(--dim); font-size: 16px; }
.cta .row { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 4px; }
/* the hero's two buttons: a light solid one and a bordered one, both square */
.cta .b1, .cta .b2 { font-size: 15px; letter-spacing: -.01em; padding: 11px 19px; text-decoration: none; display: inline-block; }
.cta .b1 { background: #efebe7; color: #1a1817; font-weight: 600; }
.cta .b1:hover { background: #fff; }
.cta .b2 { background: rgba(40,38,37,.7); border: 1px solid #464443; color: var(--dim); font-weight: 500; }
.cta .b2:hover { border-color: #6a6563; color: var(--text); }

/* ---- foot ---- */
footer { border-top: 1px solid var(--line); margin-top: 54px; }
footer .in { max-width: 820px; margin: 0 auto; padding: 26px 24px 40px; display: flex; flex-wrap: wrap; gap: 8px 22px; font-size: 14px; color: var(--faint); }
footer a { color: var(--faint); }
footer .in .sp { flex: 1; }

@media (max-width: 560px) {
  body { font-size: 16px; }
  main { padding-top: 32px; }
  h2 { font-size: 21px; }
}