/* The course's landing page (index.html, home.mjs): a double helix in 3D behind the course's name, then its chapters
   in the order of the syllabus, part by part, each with what it has in 3D. Builds on shared/course.css and
   shared/hub.css. */
body.home{background:radial-gradient(1200px 760px at 78% 8%,#13283766,transparent 62%),radial-gradient(900px 700px at 8% 92%,#1a1f2a55,transparent 70%),var(--night)}

/* The helix fades in once drawn; the page reads the same without it. */
.home .hero-view canvas{opacity:0;transition:opacity 1.6s ease}
.home .hero-view.ready canvas{opacity:1}
.home .hero-text{max-width:640px}
.home .hero-text .display{font-size:clamp(56px,7.2vw,118px);line-height:.94;margin-bottom:22px}
.home .hero-text .lede{max-width:44ch;font-size:15px}

/* ---------- Chapters ---------- */
.outline{border-top:1px solid var(--line);padding-top:30px}

.part{margin-top:44px}
.part-label{display:flex;align-items:baseline;gap:14px;margin:0 0 6px;font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:var(--accent);font-weight:500}
.part-n{font-family:var(--serif);font-size:22px;letter-spacing:0;text-transform:none;color:#c9a979;min-width:28px}
.toc{list-style:none;margin:0;padding:0;border-top:1px solid var(--line)}

.chapter{position:relative;display:grid;grid-template-columns:92px minmax(0,1fr) auto;gap:6px 22px;align-items:start;padding:22px 18px 22px 10px;border-bottom:1px solid var(--line)}
.chapter .num{font-family:var(--serif);font-size:46px;line-height:.9;letter-spacing:-.02em;color:#5f717c;font-variant-numeric:lining-nums}
.chapter h3{font-family:var(--serif);font-weight:400;font-size:clamp(24px,2.3vw,32px);line-height:1.05;margin:2px 0 8px;letter-spacing:-.01em;color:#c5d0d5}
.chapter .body>p{margin:0;max-width:68ch;font-size:13px;line-height:1.7;color:#8e9ea8;text-wrap:pretty}
.chapter .state{align-self:center;font-size:10px;letter-spacing:.14em;text-transform:uppercase;color:#5f717c;white-space:nowrap;padding:6px 0}

/* A chapter in 3D: its colour, a soft glow, and what it holds. The heading's link covers the row; the links inside
   sit above it. */
.chapter.live{border-radius:var(--radius);border:1px solid color-mix(in srgb,var(--c),transparent 72%);margin:14px 0;background:linear-gradient(100deg,color-mix(in srgb,var(--c),transparent 90%),#0d1822b3 38%,#0b141e99);overflow:hidden;transition:border-color .25s,background .25s,transform .25s}
.chapter.live::before{content:'';position:absolute;left:-90px;top:-110px;width:320px;height:320px;border-radius:50%;background:radial-gradient(closest-side,color-mix(in srgb,var(--c),transparent 80%),transparent);pointer-events:none}
.chapter.live .num{color:color-mix(in srgb,var(--c),#fff 18%)}
.chapter.live h3{color:var(--ink)}
.chapter.live .body>p{color:#b3c1ca}
.chapter-link{color:inherit;text-decoration:none}
.chapter-link::after{content:'';position:absolute;inset:0;z-index:1}
@media(hover:hover){.chapter.live:hover{border-color:color-mix(in srgb,var(--c),transparent 45%);transform:translateY(-1px)}}
.chapter-link:focus-visible{outline:none}
.chapter.live:has(.chapter-link:focus-visible){outline:2px solid var(--accent);outline-offset:4px}

.inside{position:relative;z-index:2;list-style:none;margin:18px 0 2px;padding:0;display:grid;grid-template-columns:repeat(auto-fill,minmax(210px,1fr));gap:8px}
.inside a{position:relative;z-index:2;display:flex;flex-direction:column;gap:3px;height:100%;padding:11px 14px 12px;border-radius:8px;border:1px solid #a4c0d421;background:#0a1520b3;color:inherit;text-decoration:none;transition:border-color .2s,background .2s}
.inside b{font-weight:500;font-size:13px;color:#e4ecef}
.inside small{font-size:11px;color:#8ea4ae}
@media(hover:hover){.inside a:hover{border-color:color-mix(in srgb,var(--c),transparent 40%);background:#101d29d9}}

/* ---------- The library, and the foot ---------- */
.library{margin-top:72px}
.library-card{position:relative;display:block;padding:34px 34px 30px;border-radius:var(--radius);border:1px solid #9fb6c01c;background:linear-gradient(180deg,#0f1b27cc,#0b141ecc);color:inherit;text-decoration:none;overflow:hidden;transition:border-color .25s,transform .25s}
.library-card::before{content:'';position:absolute;right:-80px;top:-120px;width:360px;height:360px;border-radius:50%;background:radial-gradient(closest-side,#e5bf8d26,transparent);pointer-events:none}
.library-card .kicker{font-size:10px;letter-spacing:.16em;text-transform:uppercase;color:var(--accent)}
.library-card .section-title{margin:14px 0 10px}
.library-card p{margin:0 0 20px;max-width:60ch;font-size:13px;line-height:1.7;color:#a8b6bf}
.library-card .go{font-size:12px;color:#d9b882}
@media(hover:hover){.library-card:hover{border-color:#e5bf8d55;transform:translateY(-2px)}}
.foot{max-width:1360px;margin:0 auto;padding:0 var(--gutter) 48px;font-size:11px;color:#6f808b}
.foot p{margin:0;border-top:1px solid var(--line);padding-top:20px}

@media(max-width:780px){
  .home .hero-text .display{font-size:clamp(46px,13vw,64px)}
  .chapter{grid-template-columns:52px minmax(0,1fr);padding:18px 12px 18px 6px}
  .chapter .num{font-size:32px}
  .chapter .state{grid-column:2;justify-self:start;margin-top:10px}
  .inside{grid-template-columns:1fr}
  .library-card{padding:26px 22px 24px}
}