/* Shared by the home page and subject hubs: header, subject and lesson cards. */
button{touch-action:manipulation}
body{background:var(--paper);font-family:"Inter",system-ui,sans-serif;color:var(--ink)}
main{max-width:680px;margin:0 auto;padding:20px 16px 40px;position:relative;z-index:1}
h1{font-family:"Fraunces",Georgia,serif;font-weight:800;font-size:clamp(26px,6vw,38px);letter-spacing:-.02em;line-height:1}
.sub{font-size:13.5px;color:var(--ink-2);line-height:1.5;margin:8px 0 32px}
/* Lesson links: quiet rows with hairline dividers (matches the card-less notes) */
main{--accent:var(--ink);--accent-bg:var(--ink-3)}
/* the content column is paper-coloured, so the decorative clouds only show in the margins, never behind rows */
main{background:var(--paper);box-shadow:0 0 48px 36px var(--paper);clip-path:inset(0 -120px)}  /* soft side edges: clouds fade out near the column; clipped so the glow never reaches up into the top bar */
/* the hub title wears its subject colour (large text, so even gold reads) */
main>h1{color:var(--accent)}
.lesson{position:relative;isolation:isolate;display:grid;grid-template-columns:1fr auto;column-gap:16px;align-items:center;
  text-decoration:none;color:var(--ink);padding:24px 12px;border-top:1px solid var(--ink-3)}
.lesson:last-of-type{border-bottom:1px solid var(--ink-3)}
.lesson>:not(.go){grid-column:1}
.lesson .num{
  font-family:"IBM Plex Mono",monospace;font-size:10.5px;font-weight:500;
  letter-spacing:.14em;text-transform:uppercase;color:var(--ink-2);margin-bottom:9px;
  display:flex;align-items:center;gap:8px;
}
.lesson .num::before{content:"";width:7px;height:7px;border-radius:50%;background:var(--accent);flex-shrink:0}
/* hover: a soft wash of the subject colour, filling the row between its dividers */
.lesson::after{content:"";position:absolute;inset:0;background:var(--accent-bg);opacity:0;z-index:-1;transition:opacity .15s ease}
.lesson:hover::after{opacity:1}
.lesson h2{font-family:"Fraunces",Georgia,serif;font-weight:600;font-size:21px;line-height:1.25;text-wrap:balance}
.lesson .go{grid-column:2;grid-row:1/span 2;font-size:17px;color:var(--accent);transition:transform .15s ease}
.lesson:hover h2{text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:4px}
.lesson:hover .go{transform:translateX(3px)}
.lesson:focus-visible{outline:2px solid var(--gold);outline-offset:4px;border-radius:4px}
@media(prefers-reduced-motion:reduce){.lesson .go,.lesson::after{transition:none}}
.foot{font-size:12px;color:var(--ink-2);margin-top:40px;padding-top:14px;border-top:1px solid var(--ink-3);line-height:1.5}
/* Wide screens: lessons flow into 2 columns (3 on very wide), headings and notes span the full width.
   Every row draws its own top + bottom line (overlapping by 1px), so rows in a grid line up as ruled cells. */
@media(min-width:1000px){
  :root{--content-w:1080px}
  main{max-width:1080px;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));column-gap:40px;align-content:start}
  main>:not(.lesson):not(.subject),.unit>:not(.lesson){grid-column:1/-1}
  .unit{display:grid;grid-template-columns:subgrid}
  .lesson{border-bottom:1px solid var(--ink-3);margin-bottom:-1px}
  .unit-h+.lesson+.lesson{border-top:none}
}
@media(min-width:1500px){
  :root{--content-w:1320px}
  main{max-width:1320px;grid-template-columns:repeat(3,minmax(0,1fr))}
  .unit-h+.lesson+.lesson+.lesson{border-top:none}
}