/* Home: a dark field notebook for AI practice, built as a dense field of active routes. */
.home-page {
  min-height: 100vh;
  background:
    radial-gradient(circle at 80% -5%, rgba(62, 91, 178, .25), transparent 34rem),
    radial-gradient(circle at 4% 55%, rgba(28, 139, 128, .11), transparent 25rem),
    linear-gradient(90deg, rgba(128, 151, 188, .045) 1px, transparent 1px) 0 0 / 132px 132px,
    var(--canvas);
}

.home-grain {
  position: fixed;
  z-index: -1;
  inset: 0;
  pointer-events: none;
  opacity: .32;
  background-image: radial-gradient(rgba(194, 212, 237, .13) .55px, transparent .65px);
  background-size: 8px 8px;
  mask-image: linear-gradient(to bottom, #000, transparent 66%);
}

.home-hero {
  display: grid;
  grid-template-columns: minmax(0, .95fr) minmax(430px, .92fr);
  align-items: center;
  gap: clamp(40px, 6vw, 96px);
  min-height: min(650px, calc(100svh - 70px));
  padding: clamp(46px, 6vw, 82px) 0 clamp(54px, 7vw, 92px);
}

.context-line,
.section-index,
.path-label,
.note-type {
  margin: 0;
  color: var(--aqua);
  font-size: .74rem;
  font-weight: 760;
  letter-spacing: .035em;
}
.context-line { display: flex; align-items: center; gap: 9px; }
.context-line span { width: 7px; aspect-ratio: 1; border-radius: 50%; background: var(--aqua); box-shadow: 0 0 0 5px rgba(83, 216, 199, .13); }

.home-copy h1 {
  max-width: 11ch;
  margin: 18px 0 19px;
  color: var(--ink-strong);
  font-family: var(--font-display);
  font-size: clamp(3.15rem, 5.45vw, 5.35rem);
  font-weight: 760;
  letter-spacing: -.04em;
  line-height: .99;
  text-wrap: balance;
}
.home-copy h1 em { color: var(--cobalt); font-style: normal; }
.home-intro { max-width: 58ch; margin: 0; color: var(--ink-muted); font-size: 1rem; line-height: 1.82; text-wrap: pretty; }
.home-actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 25px; }
.action-link { display: inline-flex; align-items: center; gap: 9px; padding: 10px 13px; color: var(--ink-muted); font-size: .86rem; font-weight: 720; border: 1px solid transparent; border-radius: var(--radius-small); transition: color 180ms var(--ease-out), background 180ms var(--ease-out), border-color 180ms var(--ease-out), transform 180ms var(--ease-out); }
.action-link:hover { color: var(--ink-strong); border-color: var(--line-strong); background: var(--surface); transform: translateY(-2px); }
.action-primary { color: #071019; border-color: var(--aqua); background: var(--aqua); box-shadow: 0 10px 26px rgba(41, 184, 167, .17); }
.action-primary:hover { color: #071019; border-color: #86eee2; background: #86eee2; }
.home-caption { margin: 17px 0 0; color: var(--ink-faint); font-size: .78rem; }

.learning-plot {
  position: relative;
  align-self: stretch;
  display: flex;
  flex-direction: column;
  justify-content: center;
  margin: 0;
  padding: 24px 22px 18px;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: var(--radius-large);
  background: linear-gradient(145deg, rgba(21, 30, 43, .9), rgba(10, 15, 23, .86));
  box-shadow: var(--shadow-soft);
}
.learning-plot::before { position: absolute; inset: 14px; content: ""; pointer-events: none; border: 1px solid rgba(109, 134, 170, .09); border-radius: 10px; }
.learning-plot svg { position: relative; z-index: 1; display: block; width: 100%; height: auto; overflow: visible; }
.plot-grid path { stroke: var(--line); stroke-width: 1; opacity: .62; }
.plot-axis path { stroke: var(--line-strong); stroke-width: 1.25; }
.plot-route { fill: none; stroke-linecap: round; stroke-width: 2; }
.route-knowledge { stroke: url(#pathBlue); stroke-dasharray: 5 12; opacity: .88; }
.route-build { stroke: var(--cobalt); opacity: .7; }
.route-reflect { stroke: var(--aqua); opacity: .76; }
.plot-nodes circle { fill: var(--surface-raised); stroke: var(--cobalt); stroke-width: 4; filter: url(#softGlow); }
.plot-nodes circle:last-child { stroke: var(--aqua); }
.plot-tags text { fill: var(--ink-strong); font-family: var(--font-display); font-size: 18px; font-weight: 760; }
.plot-tags .plot-small { fill: var(--ink-faint); font-family: var(--font-body); font-size: 12px; font-weight: 600; }
.plot-points circle { fill: var(--aqua); opacity: .82; }
.learning-plot figcaption { position: relative; z-index: 1; display: flex; justify-content: space-between; gap: 20px; margin: 4px 16px 0 61px; color: var(--ink-faint); font-size: .73rem; }
.learning-plot figcaption span:first-child { color: var(--ink-muted); font-weight: 700; }

.home-section { padding: clamp(54px, 7vw, 94px) 0; }
.section-lead { display: grid; grid-template-columns: minmax(0, 1fr) minmax(280px, .82fr); gap: 20px 70px; align-items: end; }
.section-lead .section-index { grid-column: 1 / -1; margin-bottom: -5px; }
.section-lead h2,
.notes-heading h2,
.method-copy h2 { margin: 0; color: var(--ink-strong); font-family: var(--font-display); font-size: clamp(2rem, 3.8vw, 3.65rem); font-weight: 740; letter-spacing: -.04em; line-height: 1.04; text-wrap: balance; }
.section-lead > p:last-child,
.notes-heading > p,
.method-copy > p:last-child { max-width: 43ch; margin: 0; color: var(--ink-muted); font-size: .94rem; line-height: 1.78; text-wrap: pretty; }

.learning-paths { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1px; margin-top: 32px; overflow: hidden; border: 1px solid var(--line); border-radius: var(--radius); background: var(--line); }
.learning-path { display: grid; grid-template-columns: 25px 1fr; gap: 13px; min-height: 205px; padding: 22px; background: var(--surface); transition: background 180ms var(--ease-out); }
.learning-path:hover { background: var(--surface-raised); }
.learning-path + .learning-path { border-left: 0; }
.path-marker { display: grid; width: 20px; aspect-ratio: 1; place-items: center; color: var(--cobalt); font-size: .65rem; border: 1px solid currentColor; border-radius: 50%; }
.path-build .path-marker { color: var(--aqua); border-radius: 4px; }
.path-explore .path-marker { color: var(--warning); border-radius: 50% 50% 50% 3px; }
.path-label { margin-bottom: 16px; color: var(--ink-faint); }
.learning-path h3 { margin: 0 0 9px; color: var(--ink-strong); font-family: var(--font-display); font-size: 1.15rem; letter-spacing: -.025em; }
.learning-path p:last-child { margin: 0; color: var(--ink-muted); font-size: .87rem; line-height: 1.7; }

.notes-section { border-top: 1px solid var(--line); }
.notes-heading { display: flex; justify-content: space-between; gap: 30px; align-items: end; }
.note-shelf { display: grid; grid-template-columns: minmax(0, 1.12fr) minmax(300px, .88fr); gap: 1px; margin-top: 32px; overflow: hidden; border: 1px solid var(--line); border-radius: var(--radius-large); background: var(--line); box-shadow: var(--shadow-soft); }
.feature-note, .compact-note { position: relative; display: flex; flex-direction: column; justify-content: space-between; min-height: 296px; padding: 26px; overflow: hidden; background: var(--surface); transition: background 180ms var(--ease-out); }
.feature-note { background: linear-gradient(145deg, #182848, #101722 69%); }
.feature-note::after { position: absolute; right: -65px; bottom: -93px; width: 270px; aspect-ratio: 1; content: ""; border: 1px solid rgba(124, 156, 255, .25); border-radius: 50%; box-shadow: 0 0 0 45px rgba(124, 156, 255, .055), 0 0 0 90px rgba(124, 156, 255, .03); }
.feature-note > *, .compact-note > * { position: relative; z-index: 1; }
.feature-note:hover, .compact-note:hover { background: var(--surface-raised); }
.note-type { display: inline-flex; width: fit-content; padding: 4px 7px; color: var(--cobalt-deep); font-size: .68rem; border: 1px solid rgba(156, 179, 255, .33); border-radius: 999px; background: rgba(28, 43, 77, .72); }
.feature-note h3 { max-width: 15ch; margin: 22px 0 12px; color: var(--ink-strong); font-family: var(--font-display); font-size: clamp(1.7rem, 2.9vw, 2.75rem); font-weight: 730; letter-spacing: -.04em; line-height: 1.07; text-wrap: balance; }
.feature-note p { max-width: 53ch; margin: 0; color: var(--ink-muted); font-size: .91rem; line-height: 1.72; }
.note-meta, .compact-note > span:last-child { color: var(--ink-faint); font-size: .79rem; font-weight: 650; }
.note-meta b, .compact-note b { color: var(--aqua); font-size: 1rem; }
.compact-notes { display: grid; gap: 1px; background: var(--line); }
.compact-note { min-height: 147px; padding: 21px 24px; }
.compact-note h3 { max-width: 26ch; margin: 13px 0; color: var(--ink-strong); font-family: var(--font-display); font-size: 1.16rem; letter-spacing: -.025em; line-height: 1.25; }

.method-section { display: grid; grid-template-columns: minmax(0, .86fr) minmax(370px, 1.14fr); gap: clamp(42px, 7vw, 104px); align-items: start; }
.method-copy .section-index { margin-bottom: 15px; }
.method-copy h2 { font-size: clamp(2rem, 4vw, 4rem); }
.method-copy > p:last-child { margin-top: 22px; }
.method-list { display: grid; gap: 1px; margin: 0; padding: 1px; list-style: none; border: 1px solid var(--line); border-radius: var(--radius); background: var(--line); }
.method-list li { display: grid; grid-template-columns: 95px 1fr; gap: 17px; padding: 18px; background: var(--surface); }
.method-list span { color: var(--aqua); font-family: var(--font-display); font-size: 1rem; font-weight: 750; }
.method-list p { margin: 0; color: var(--ink-muted); font-size: .9rem; line-height: 1.68; }

@media (max-width: 900px) {
  .home-hero { grid-template-columns: 1fr; min-height: auto; }
  .learning-plot { width: min(100%, 660px); margin: 4px auto 0; }
  .section-lead { grid-template-columns: 1fr; gap: 16px; }
  .section-lead .section-index { margin-bottom: 0; }
  .learning-paths { grid-template-columns: 1fr; }
  .learning-path { min-height: auto; }
  .notes-heading { flex-direction: column; align-items: start; }
  .note-shelf { grid-template-columns: 1fr; }
  .compact-notes { grid-template-columns: 1fr 1fr; }
  .compact-note { min-height: 190px; }
  .method-section { grid-template-columns: 1fr; }
}

@media (max-width: 620px) {
  .home-hero { padding-top: 40px; }
  .home-copy h1 { font-size: clamp(2.9rem, 13vw, 4.25rem); }
  .learning-plot { padding: 16px 12px 14px; }
  .learning-plot figcaption { margin-left: 0; flex-direction: column; gap: 4px; }
  .plot-tags text { font-size: 15px; }
  .plot-tags .plot-small { font-size: 10px; }
  .home-section { padding: 58px 0; }
  .learning-path { padding: 18px; }
  .feature-note { min-height: 294px; padding: 22px; }
  .feature-note h3 { font-size: 2rem; }
  .compact-notes { grid-template-columns: 1fr; }
  .compact-note { min-height: 150px; }
  .method-list li { grid-template-columns: 1fr; gap: 6px; }
}