/* The home page: the lgkm look around The Ascent. Loaded last (see the order note in index.html).
 * The Ascent's own stylesheet (ascent.css, generated) uses the lgkm token values written out; its page palette is mapped
 * onto the live tokens here. The triple :root outranks the dark-theme blocks in ascent.css. */
:root:root:root {
  --bg: var(--surface);
  --surface-2: var(--surface-sunken);
  --muted: var(--ink-muted);
  --focus: var(--signal-ink);
  --radius: var(--radius-md);
  --font-body: var(--font-sans);
  --font-display: var(--font-sans);
}
/* Inside The Ascent, --surface is its card colour (raised); everywhere else it is the page. */
#ascent { --surface: var(--surface-raised); }

body { padding-block: var(--space-4) var(--space-16); font-size: 15px; line-height: 24px; }
lgkm-nav { display: block; max-width: 1240px; min-height: 38px; margin: 0 auto var(--space-4); }

.hero { max-width: 1240px; margin: 0 auto var(--space-12); padding: var(--space-8) var(--space-6) var(--space-12); background: var(--slate); color: var(--on-slate); border-radius: var(--radius-lg); display: grid; gap: var(--space-2); }
.hero .lg-eyebrow { color: color-mix(in srgb, var(--on-slate) 72%, transparent); }
.hero .display { margin: 0; max-width: 20em; font-size: clamp(34px, 6vw, 56px); line-height: 1.07; font-weight: 600; letter-spacing: -.03em; text-wrap: balance; }
.hero .eli5 { margin: var(--space-2) 0 0; font-size: 17px; line-height: 26px; color: color-mix(in srgb, var(--on-slate) 72%, transparent); }
.hero .eli5 a { color: var(--on-slate); }

.latest, .topics, .sections { max-width: 1240px; margin: 0 auto var(--space-12); display: grid; gap: var(--space-4); scroll-margin-top: var(--space-4); }
.topics, .sections { margin-top: var(--space-12); }
.latest h2, .topics h2, .sections h2 { margin: 0; font-size: 24px; line-height: 32px; font-weight: 600; letter-spacing: -.01em; }
.topics > p, .sections > p { margin: 0; color: var(--ink-muted); }
@media (min-width: 900px) { .latest, .topics, .sections { margin-bottom: var(--space-16); } .topics, .sections { margin-top: var(--space-16); } }

.stream, .tiles, .cards { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: var(--space-4); }
.stream .lg-card, .tiles .lg-card, .cards .lg-card { position: relative; }
.stream .lg-card-title a::after, .tiles .lg-card-title a::after, .cards .lg-card-title a::after { content: ""; position: absolute; inset: 0; border-radius: var(--radius-md); }
.stream .lg-card-title a:focus-visible, .tiles .lg-card-title a:focus-visible, .cards .lg-card-title a:focus-visible { outline: none; }
.stream .lg-card:has(a:focus-visible), .tiles .lg-card:has(a:focus-visible), .cards .lg-card:has(a:focus-visible) { outline: 2px solid var(--signal-ink); outline-offset: 2px; }
.tiles .lg-card.following { border-color: var(--line-strong); }
.tiles .lg-eyebrow { margin-top: auto; padding-top: var(--space-2); }
.lg-card-title .lg-tag { margin-left: var(--space-2); vertical-align: 2px; }

.cards .lg-card { display: grid; grid-template-columns: auto minmax(0, 1fr); column-gap: var(--space-4); row-gap: var(--space-1); align-content: start; }
.cards .ico { grid-row: span 3; width: 40px; height: 40px; display: grid; place-items: center; color: var(--ink); border: 1px solid var(--line); border-radius: var(--radius-md); }
.cards .ico svg { width: 20px; height: 20px; }

.more { margin: 0; font-size: 15px; color: var(--ink-muted); }
.more a { color: var(--ink); }
.more a:hover { color: var(--signal-ink); }
@media (max-width: 560px) { .hero { padding: var(--space-8) var(--space-4); } }