/* ---------------------------------------------------------------------------
   The guides (2026-10-16, src/lib/guides.ts): plain pages a search engine reads
   without running the app. The landing's tokens, fonts, nav and button, copied
   here because these pages load none of the app's stylesheets; one reading
   column, quiet ink, and colour only on the grids, where it is the rank.
   --------------------------------------------------------------------------- */

@font-face {
  font-family: "Sora";
  font-style: normal;
  font-weight: 600 800;
  font-display: swap;
  src: url("/fonts/sora-latin.woff2") format("woff2");
}
@font-face {
  font-family: "Instrument Sans";
  font-style: normal;
  font-weight: 400 600;
  font-display: swap;
  src: url("/fonts/instrument-sans-latin.woff2") format("woff2");
}

:root {
  --display: "Sora", ui-sans-serif, system-ui, sans-serif;
  --font: "Instrument Sans", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  --g-bg: #0c0d10;
  --g-ink: #f2f2f0;
  --g-ink-2: #a3a7ae;
  --g-ink-3: #6b7078;
  --g-line: rgb(255 255 255 / 0.08);
  --g-line-2: rgb(255 255 255 / 0.14);
  --g-glass: rgb(255 255 255 / 0.035);
  --g-glass-2: rgb(255 255 255 / 0.06);
  --g-ember: #e2a25a;
  color-scheme: dark;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0; background: var(--g-bg); color: var(--g-ink);
  font-family: var(--font); font-size: 17px; line-height: 1.7;
  -webkit-font-smoothing: antialiased;
}
a { color: inherit; }
img { display: block; }

/* ---------- the nav: the landing's bar ---------- */
.gd-nav {
  position: sticky; top: 14px; z-index: 10;
  width: min(1040px, calc(100% - 32px)); margin: 14px auto 0; height: 56px;
  display: flex; align-items: center; gap: 4px; padding: 0 8px 0 18px; border-radius: 16px;
  background: linear-gradient(rgb(255 255 255 / 0.09), rgb(255 255 255 / 0.09)), rgb(14 15 19 / 0.55);
  border: 1px solid var(--g-line-2);
  backdrop-filter: blur(40px) saturate(180%);
  -webkit-backdrop-filter: blur(40px) saturate(180%);
}
.gd-nav__brand { display: flex; align-items: center; text-decoration: none; }
.gd-nav__right { margin-left: auto; display: flex; align-items: center; gap: 6px; }
.gd-nav__link {
  font-size: 14px; font-weight: 500; color: var(--g-ink-2); text-decoration: none;
  padding: 8px 12px; border-radius: 10px;
}
.gd-nav__link:hover { color: var(--g-ink); background: var(--g-glass-2); }
.gd-btn {
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 14px; font-weight: 600; line-height: 1.2; text-decoration: none;
  color: #0c0d10; background: #ececea; border-radius: 10px; padding: 9px 16px;
}
.gd-btn:hover { background: #d9d9d6; }

/* ---------- the reading column ---------- */
.gd { width: min(680px, calc(100% - 32px)); margin: 0 auto; padding: clamp(48px, 9vh, 96px) 0 0; }
.gd-kicker { margin: 0 0 14px; font-size: 13px; font-weight: 600; }
.gd-kicker a { color: var(--g-ink-3); text-decoration: none; }
.gd-kicker a:hover { color: var(--g-ink-2); }
.gd h1 {
  margin: 0; font-family: var(--display); font-weight: 600;
  font-size: clamp(30px, 5vw, 44px); line-height: 1.1; letter-spacing: -0.022em; text-wrap: balance;
}
.gd-meta { margin: 16px 0 0; font-size: 14px; color: var(--g-ink-3); }
.gd-lede { margin: 28px 0 0; font-size: 19px; line-height: 1.65; color: var(--g-ink); text-wrap: pretty; }
.gd h2 {
  margin: 2.2em 0 0; font-family: var(--display); font-weight: 600;
  font-size: 24px; line-height: 1.25; letter-spacing: -0.015em; text-wrap: balance;
}
.gd h3 { margin: 1.6em 0 0; font-family: var(--display); font-weight: 600; font-size: 18px; line-height: 1.35; }
.gd p, .gd li { color: var(--g-ink-2); text-wrap: pretty; }
.gd p { margin: 0.9em 0 0; }
.gd ul, .gd ol { margin: 0.9em 0 0; padding-left: 1.3em; }
.gd li + li { margin-top: 0.5em; }
.gd strong { color: var(--g-ink); font-weight: 600; }
.gd-article a { text-decoration-color: var(--g-line-2); text-underline-offset: 3px; }
.gd-article a:hover { text-decoration-color: currentColor; }
.gd-sources { font-size: 14px; line-height: 1.6; }

/* ---------- tables: two columns that fit a phone; the box scrolls only if one ever cannot ---------- */
.gd-scroll { margin: 1.2em 0 0; overflow-x: auto; }
.gd-table { width: 100%; border-collapse: collapse; font-size: 15px; line-height: 1.5; }
.gd-table th, .gd-table td { padding: 10px 14px 10px 0; text-align: left; vertical-align: top; border-top: 1px solid var(--g-line); }
.gd-table thead th { border-top: 0; padding-top: 0; font-size: 12px; font-weight: 600; letter-spacing: 0.05em; text-transform: uppercase; color: var(--g-ink-3); }
.gd-table tbody th { width: 34%; color: var(--g-ink); font-weight: 600; }
.gd-table td { color: var(--g-ink-2); }
.gd-table tbody tr:last-child > * { border-bottom: 1px solid var(--g-line); }

/* ---------- the rank grids ---------- */
.gd-figure { margin: 1.6em 0 0; }
.gd-grid { display: block; width: 100%; max-width: 360px; height: auto; margin: 0 auto; }
.gd-grid text {
  font-family: var(--font); font-size: 13px; font-weight: 600;
  text-anchor: middle; dominant-baseline: central;
}
/* three small grids: side by side, one under another on a phone, where side by side would
   shrink their numbers under reading size */
.gd-grids { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px 20px; max-width: 600px; margin: 0 auto; }
.gd-grids .gd-grid { max-width: 200px; }
.gd-grid--panel text { font-size: 12px; }
@media (max-width: 560px) {
  .gd-grids { grid-template-columns: minmax(0, 220px); justify-content: center; }
}
.gd-grid .r1 circle { fill: var(--g-ember); }
.gd-grid .r1 text { fill: #0c0d10; }
.gd-grid .r2 circle { fill: #a3a7ae; }
.gd-grid .r2 text { fill: #0c0d10; }
.gd-grid .r3 circle { fill: #3d4148; }
.gd-grid .r3 text { fill: var(--g-ink); }
.gd-grid .r4 circle { fill: none; stroke: var(--g-line-2); stroke-width: 1.5; }
.gd-grid .r4 text { fill: var(--g-ink-3); }
.gd-grid__home { fill: none; stroke: var(--g-ink); stroke-width: 2; }
/* a lettered point's badge sits on its own point's edge, never between two */
.gd-grid__badge circle { fill: var(--g-ink); }
.gd-grid .gd-grid__badge text { font-family: var(--display); font-size: 12px; font-weight: 700; fill: #0c0d10; }
.gd-grid--panel text.gd-grid__label { font-size: 14px; font-weight: 600; fill: var(--g-ink-2); }
.gd-figure figcaption { margin: 14px 0 0; font-size: 14px; line-height: 1.6; color: var(--g-ink-3); text-wrap: pretty; }

/* ---------- the guides list ---------- */
.gd .gd-list { list-style: none; margin: 2em 0 0; padding: 0; }
.gd .gd-list__item { margin: 0; padding: 20px 0; border-top: 1px solid var(--g-line); }
.gd .gd-list__item:last-child { border-bottom: 1px solid var(--g-line); }
.gd-list__link {
  font-family: var(--display); font-weight: 600; font-size: 20px; line-height: 1.3;
  letter-spacing: -0.01em; color: var(--g-ink); text-decoration: none;
}
.gd-list__link:hover { text-decoration: underline; text-underline-offset: 4px; text-decoration-color: var(--g-line-2); }
.gd .gd-list__summary { margin: 6px 0 0; font-size: 15px; line-height: 1.6; }

/* ---------- what Cornerlens does, once a page ---------- */
.gd-cta {
  margin: clamp(48px, 8vh, 72px) 0 0; padding: 24px; border-radius: 16px;
  background: var(--g-glass); border: 1px solid var(--g-line);
}
.gd .gd-cta__title { margin: 0; font-family: var(--display); font-weight: 600; font-size: 19px; color: var(--g-ink); }
.gd-cta p { font-size: 15px; line-height: 1.6; }
.gd-cta__more { margin-left: 14px; font-size: 14px; color: var(--g-ink-2); text-underline-offset: 3px; }

/* ---------- the footer: the landing's, without the map credit ---------- */
.gd-foot {
  width: min(1040px, calc(100% - 32px)); margin: clamp(64px, 12vh, 120px) auto 0;
  padding: 28px 0 32px; border-top: 1px solid var(--g-line); font-size: 14px; color: var(--g-ink-3);
}
.gd-foot__top { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 24px; }
.gd-foot__what { margin: 10px 0 0; max-width: 34ch; line-height: 1.5; }
.gd-foot__links { display: flex; flex-wrap: wrap; gap: 8px 18px; max-width: 520px; }
.gd-foot a { color: var(--g-ink-2); text-decoration: none; }
.gd-foot a:hover { color: var(--g-ink); }
.gd-foot__base { display: flex; flex-wrap: wrap; gap: 8px 24px; margin-top: 28px; font-size: 13px; }
.gd-foot__legal { display: inline-flex; gap: 16px; }

@media (max-width: 620px) {
  body { font-size: 16px; }
  .gd-lede { font-size: 17.5px; }
  .gd h2 { font-size: 21px; }
  .gd-nav { padding: 0 6px 0 14px; }
  .gd-nav__link { padding: 8px; }
  .gd-cta__more { display: inline-block; margin: 12px 0 0; }
}
@media (max-width: 400px) {
  .gd-nav .gd-nav__link[href="/guides/"] { display: none; }
}