/* LFE homepage: introduction + topic map. House tokens only. */
body { font-size: 18px; line-height: 1.6; }
.shell { width: min(1080px, calc(100% - 96px)); margin-inline: auto; }
.skip { position: absolute; left: 12px; top: -80px; padding: 12px; background: var(--paper); z-index: 100; }
.skip:focus { top: 12px; }

.home-intro { padding: 44px 0 10px; max-width: 760px; }
.home-intro h1 { font-size: clamp(40px, 6vw, 68px); line-height: 1.04; letter-spacing: -.025em; margin: 0; max-width: none; }
.home-intro .standfirst { font-size: clamp(20px, 2.2vw, 25px); color: var(--muted); margin: 14px 0 0; line-height: 1.4; }
.home-intro .welcome { font-size: 17px; margin: 18px 0 0; max-width: 66ch; }
.home-intro .welcome a { text-underline-offset: 3px; }

/* ---- Topic map ---- */
.map-wrap { margin: 34px 0 8px; }
.map-head { display: flex; justify-content: space-between; align-items: baseline; gap: 16px; flex-wrap: wrap; border-top: 1px solid var(--hairline); padding-top: 16px; }
.map-head h2 { font-size: 24px; margin: 0; max-width: none; }
.map-head p { margin: 0; color: var(--muted); font-size: 16px; }

.topic-map { position: relative; display: grid; gap: 22px 56px; padding: 30px 0 18px;
  grid-template-columns: 1fr minmax(170px, .8fr) 1fr;
  grid-template-areas: ". minds ." "chips ai econ" "power ai econ"; }
.map-lines { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; overflow: visible; }
.map-lines path { fill: none; stroke: var(--hairline); stroke-width: 1.5; transition: stroke 250ms ease, opacity 250ms ease; }
.map-lines path.live { stroke: var(--accent); opacity: .55; }
.map-lines path.coming { stroke-dasharray: 4 6; }
.map-lines circle { fill: var(--accent); }

.node { position: relative; z-index: 1; display: block; padding: 16px 18px 15px; background: var(--paper); border: 1px solid var(--hairline); text-decoration: none; color: var(--ink); transition: border-color 250ms ease; }
.topic-map.is-ready .node { transition: border-color 250ms ease, opacity 250ms ease, transform 250ms cubic-bezier(.25,1,.5,1); }
.node .eyebrow { display: block; font-size: 12px; letter-spacing: .07em; text-transform: uppercase; color: var(--muted); margin-bottom: 6px; }
.node strong { display: block; font-size: 24px; line-height: 1.2; font-weight: 600; }
.node .q { display: block; margin-top: 6px; font-size: 16px; line-height: 1.45; color: var(--muted); }
.node .meta { display: block; margin-top: 10px; font-size: 14px; color: var(--accent); }
a.node strong { color: var(--accent); }
a.node:hover, a.node:focus-visible { border-color: var(--accent); transform: translateY(-2px); }
a.node:hover strong, a.node:focus-visible strong { text-decoration: underline; text-underline-offset: 5px; text-decoration-thickness: 1.5px; }
.node.coming { border-style: dashed; color: var(--muted); }
.node.coming strong { color: var(--muted); }
.node.coming .meta { color: var(--muted); font-style: italic; }
.n-chips { grid-area: chips; } .n-power { grid-area: power; } .n-minds { grid-area: minds; } .n-econ { grid-area: econ; align-self: center; }
.n-ai { grid-area: ai; align-self: center; justify-self: center; width: 150px; height: 150px; border-radius: 50%; border: 1.5px solid var(--accent); display: grid; place-items: center; text-align: center; padding: 0; background: var(--paper); }
.n-ai strong { font-size: 40px; color: var(--ink); }
.n-ai .eyebrow { margin: 0 0 2px; }
.ai-ring { position: absolute; inset: -1.5px; border-radius: 50%; border: 1.5px solid var(--accent); opacity: 0; pointer-events: none; }

/* Focus mode: hovering one topic quiets the others. */
.topic-map[data-focus] .node:not(.n-ai) { opacity: .45; }
.topic-map[data-focus] .node.is-focus { opacity: 1; }
.topic-map[data-focus] .map-lines path { opacity: .2; }
.topic-map[data-focus] .map-lines path.is-focus { opacity: 1; stroke: var(--accent); }

.map-note { margin: 4px 0 0; color: var(--muted); font-size: 16px; }

.site-footer { border-top: 1px solid var(--hairline); margin-top: 44px; padding: 20px 0 30px; display: flex; justify-content: space-between; flex-wrap: wrap; gap: 10px 24px; font-size: 14px; color: var(--muted); }
.site-footer nav { display: flex; flex-wrap: wrap; gap: 8px 20px; }
.site-footer a { text-underline-offset: 3px; }

@media (max-width: 760px) {
  .shell { width: calc(100% - 36px); }
  .home-intro { padding-top: 28px; }
  .topic-map { grid-template-columns: 1fr 1fr; gap: 18px 14px; grid-template-areas: "chips power" "ai ai" "minds econ"; padding-top: 22px; }
  .node { padding: 13px 13px 12px; }
  .node strong { font-size: 20px; }
  .node .q { font-size: 15px; }
  .n-ai { width: 112px; height: 112px; }
  .n-ai strong { font-size: 32px; }
}
@media (prefers-reduced-motion: reduce) { .node, .map-lines path { transition: none; } }

:root { --page-w: min(1080px, calc(100% - 96px)); }
@media (max-width: 760px) { :root { --page-w: calc(100% - 36px); } }