/* ==========================================================================
   Samia Learn — only what the Learn pages need beyond samia.css
   Hero art, course cards, lesson cards, resource rows, teacher steps, the
   phone frame, storyboard strip, template thumbnails, claim log, sample note.
   Everything here is transform/opacity motion only and stops under reduced motion.
   ========================================================================== */

/* Hero: keep the framed art's tilt after it pops in; drawn art sits on a tint */
.hero .art.framed.pop.in { transform: rotate(1.5deg); }
.hero .art.framed { background: var(--paper-2); }
.hero .caption + h1, .hero .caption + .label { margin-top: 0; }
.hero .meta-pills { display: flex; flex-wrap: wrap; gap: 8px; margin-top: var(--s3); }

/* Drawn glyphs: a 64px flat drawing at the top of a tile or a step */
.glyph { width: 64px; height: 64px; flex: none; }
.glyph svg { width: 100%; height: 100%; overflow: visible; }
.tile .glyph { margin-bottom: 4px; }

/* Template thumbnails: a 9:16 drawn frame at the top of a tile */
.template-thumb { width: 100%; max-width: 132px; aspect-ratio: 9 / 16; border: var(--bw) solid var(--ink); border-radius: var(--r); overflow: hidden; background: var(--paper); box-shadow: 3px 3px 0 var(--ink); flex: none; }
.template-thumb svg { width: 100%; height: 100%; }
.tile .template-thumb { margin-bottom: 6px; }

/* Phone: a 9:16 frame with an ink border and a hard shadow */
.phone { width: 100%; max-width: 340px; aspect-ratio: 9 / 16; margin-inline: auto; border: 3px solid var(--ink); border-radius: 22px; overflow: hidden; background: var(--paper); box-shadow: var(--shadow-lg); position: relative; }
.phone svg { width: 100%; height: 100%; }
.phone .caption { position: absolute; left: 14px; top: 14px; margin: 0; }
.phone-note { font-size: var(--fs-small); color: var(--muted); text-align: center; margin-top: var(--s2); }

/* Storyboard: six 9:16 panels in a row; a horizontal strip on phones */
.storyboard { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 12px; margin-top: var(--s3); }
.storyboard figure { margin: 0; min-width: 0; }
.storyboard .frame { aspect-ratio: 9 / 16; border: var(--bw) solid var(--ink); border-radius: var(--r); overflow: hidden; background: var(--paper-2); box-shadow: 3px 3px 0 var(--ink); }
.storyboard .frame svg { width: 100%; height: 100%; }
.storyboard figcaption { font-size: .7rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--ink); text-align: center; margin-top: 10px; line-height: 1.2; }
@media (max-width: 640px) {
  .storyboard { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; -webkit-overflow-scrolling: touch; padding: 0 4px var(--s2) 0; scrollbar-width: thin; }
  .storyboard figure { flex: 0 0 112px; scroll-snap-align: start; }
}

/* Script: the narration, with source superscripts */
.script { font-size: 1.12rem; line-height: 1.7; max-width: 36em; }
.script sup { font-size: .68em; line-height: 0; font-weight: 700; }
.script sup a { color: var(--red); }
.script-meta { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: var(--s2); }

/* Claim log: results, and stacked rows on phones */
.claims .ok { color: var(--green); font-weight: 700; white-space: nowrap; }
.claims .approx { color: var(--blue); font-weight: 700; white-space: nowrap; }
@media (max-width: 640px) {
  .table-wrap table.claims { min-width: 0; }
  table.claims thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0, 0, 0, 0); }
  table.claims, table.claims tbody, table.claims tr, table.claims td { display: block; width: 100%; }
  table.claims tr { border: var(--bw) solid var(--ink); border-radius: var(--r); background: var(--paper-2); padding: 12px 14px; margin-bottom: 12px; box-shadow: 3px 3px 0 var(--ink); }
  table.claims td { border: 0; padding: 6px 0; }
  table.claims td::before { content: attr(data-label); display: block; font-size: .68rem; letter-spacing: .1em; text-transform: uppercase; font-weight: 700; color: var(--muted); margin-bottom: 2px; }
}

/* Sources and credits */
.sources { margin: 0; padding-left: 1.5em; display: grid; gap: 10px; font-size: var(--fs-small); }
.sources li { padding-left: 4px; scroll-margin-top: 92px; }
.sources li:target { background: var(--lemon); outline: 2px solid var(--sun); }
.credits { margin: 0; display: grid; grid-template-columns: auto 1fr; gap: 8px 18px; font-size: var(--fs-small); }
.credits dt { font-weight: 700; color: var(--ink); }
.credits dd { margin: 0; color: var(--muted); }

/* Sample note: a lemon strip under the header on sample pages */
.sample-note { background: var(--lemon); border-bottom: var(--bw) solid var(--ink); padding-block: 10px; font-size: var(--fs-small); color: var(--ink); }
.sample-note .wrap { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 16px; }
.sample-note .pill { flex: none; }
.sample-note p { margin: 0; }

/* Centred button rows (the subscribe band on lesson pages) */
.actions.center { justify-content: center; }

/* Course cards: a 9:16 thumb beside the plan, with a progress bar that fills in ----- */
.course { display: grid; grid-template-columns: 132px minmax(0, 1fr); gap: var(--s3); align-items: start; padding: clamp(20px, 2.6vw, 30px); background: var(--paper-2); border: var(--bw) solid var(--ink); border-radius: var(--r); box-shadow: var(--shadow); min-width: 0; }
.course.sky { background: var(--sky); } .course.lemon { background: var(--lemon); } .course.rose { background: var(--rose); } .course.mint { background: var(--mint); } .course.lilac { background: var(--lilac); } .course.peach { background: var(--peach); }
.course .template-thumb { margin: 0; }
.course .body { display: grid; gap: 10px; min-width: 0; }
.course .body > * { margin: 0; }
.course h3 { font-size: clamp(1.4rem, 1.1rem + 1.2vw, 2rem); line-height: 1; }
.course .status { margin-bottom: 2px; }
.course .meta { display: flex; flex-wrap: wrap; gap: 8px; }
.course .lessons { margin: 4px 0 0; padding-left: 1.2em; font-size: var(--fs-small); columns: 2; column-gap: var(--s4); }
.course .lessons li { break-inside: avoid; margin-bottom: 4px; padding-left: 2px; }
.course .lessons .wt { color: var(--muted); }
.course .foot { display: flex; flex-wrap: wrap; gap: 10px 16px; align-items: center; padding-top: 6px; }
.progress { display: grid; gap: 6px; }
.progress .bar { height: 12px; border: var(--bw) solid var(--ink); border-radius: var(--r); background: var(--paper-2); overflow: hidden; }
.progress .bar i { height: 100%; background: var(--green); display: block; }
.progress .bar.zero i { background: transparent; }
.progress small { font-size: .8rem; font-weight: 700; color: var(--ink); letter-spacing: .04em; text-transform: uppercase; }
@media (max-width: 600px) { .course { grid-template-columns: minmax(0, 1fr); } .course .template-thumb { max-width: 108px; } .course .lessons { columns: 1; } }

/* Lesson cards: a 9:16 thumb, the series, the title, the length ---------------- */
.lesson-card { display: grid; grid-template-columns: 120px minmax(0, 1fr); gap: var(--s3); align-items: start; padding: clamp(20px, 2.6vw, 30px); background: var(--paper-2); border: var(--bw) solid var(--ink); border-radius: var(--r); box-shadow: var(--shadow); color: var(--ink-2); transition: transform .25s var(--ease), box-shadow .25s var(--ease); min-width: 0; }
a.lesson-card:hover { text-decoration: none; transform: translate(-3px, -3px); box-shadow: var(--shadow-lg); }
.lesson-card .template-thumb { margin: 0; max-width: 120px; }
.lesson-card .body { display: grid; gap: 8px; min-width: 0; }
.lesson-card .body > * { margin: 0; }
.lesson-card h3 { font-size: clamp(1.3rem, 1.05rem + 1vw, 1.8rem); line-height: 1.02; color: var(--ink); }
.lesson-card .meta { display: flex; flex-wrap: wrap; gap: 8px; }
.lesson-card .body > p { text-wrap: pretty; }
@media (max-width: 480px) { .lesson-card { grid-template-columns: minmax(0, 1fr); } .lesson-card .template-thumb { max-width: 96px; } }

/* Planned lessons: numbered rows with working titles */
.planned { list-style: none; margin: 0; padding: 0; display: grid; gap: 0; border: var(--bw) solid var(--ink); border-radius: var(--r); overflow: hidden; background: var(--paper-2); box-shadow: var(--shadow); }
.planned li { display: grid; grid-template-columns: 56px minmax(0, 1fr) auto; gap: 12px 16px; align-items: center; padding: 14px 18px; border-bottom: 1.5px solid var(--line); }
.planned li:last-child { border-bottom: 0; }
.planned li.sample { background: var(--lemon); }
.planned .n { font-family: var(--display); font-weight: 900; font-size: 1.5rem; line-height: 1; color: var(--red); font-variation-settings: "wdth" 80; }
.planned b { color: var(--ink); display: block; }
.planned small { color: var(--muted); font-size: .85rem; }
.planned .pill { justify-self: end; }
@media (max-width: 600px) { .planned li { grid-template-columns: 44px minmax(0, 1fr); } .planned .pill { grid-column: 2; justify-self: start; } .planned .n { font-size: 1.25rem; } }

/* Resource rows: a drawn glyph, the name, the address and one line on how to use it -- */
.resources { display: grid; gap: 14px; }
@media (min-width: 1000px) { .resources { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s3); align-items: start; } }
.resource { display: grid; grid-template-columns: 56px minmax(0, 1fr); gap: 16px; align-items: start; padding: 16px 18px; background: var(--paper-2); border: var(--bw) solid var(--ink); border-radius: var(--r); box-shadow: 3px 3px 0 var(--ink); min-width: 0; }
.resource .glyph { width: 56px; height: 56px; border: var(--bw) solid var(--ink); border-radius: var(--r); background: var(--sun); display: grid; place-items: center; box-shadow: 2px 2px 0 var(--ink); }
.resource .glyph svg { width: 36px; height: 36px; }
.resource .glyph.sky { background: var(--sky); } .resource .glyph.mint { background: var(--mint); } .resource .glyph.rose { background: var(--rose); } .resource .glyph.lilac { background: var(--lilac); } .resource .glyph.peach { background: var(--peach); } .resource .glyph.lemon { background: var(--lemon); }
.resource h3 { font-size: 1.15rem; margin: 0 0 2px; line-height: 1.1; }
.resource h3 a { color: var(--ink); }
.resource .url { font-size: .82rem; color: var(--blue); word-break: break-all; font-weight: 600; }
.resource p { margin: 6px 0 0; font-size: var(--fs-small); }
.resource .tags { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
.resource .tags span { font-size: .72rem; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; padding: 3px 8px; border: 1.5px solid var(--ink); border-radius: 2px; background: var(--paper); color: var(--ink); }
.resource-group { scroll-margin-top: calc(var(--header-h) + 16px); }
.resource-group + .resource-group { margin-top: var(--s6); }
.group-nav { display: flex; flex-wrap: wrap; gap: 8px; }
.group-nav a { font-size: .82rem; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; padding: 7px 12px; border: 1.5px solid var(--ink); border-radius: var(--pill); background: var(--paper-2); color: var(--ink); }
.group-nav a:hover { background: var(--sun); text-decoration: none; }

/* Steps: a short classroom plan in four slanted panels ------------------------------ */
.steps { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); border: var(--bw) solid var(--ink); border-radius: var(--r); overflow: hidden; box-shadow: var(--shadow); counter-reset: st; }
.steps > div { position: relative; padding: clamp(20px, 2.4vw, 30px) clamp(18px, 2vw, 26px); border-right: var(--bw) solid var(--ink); display: grid; gap: 8px; align-content: start; counter-increment: st; min-width: 0; }
.steps > div:last-child { border-right: 0; }
.steps > div::before { content: counter(st, decimal-leading-zero); font-size: var(--fs-label); font-weight: 700; letter-spacing: .14em; color: var(--red); }
.steps .min { font-family: var(--display); font-weight: 900; font-size: clamp(2rem, 1.5rem + 2vw, 3.2rem); line-height: 1; color: var(--ink); letter-spacing: -.03em; font-variation-settings: "wdth" 78; }
.steps .min small { font-family: var(--sans); font-weight: 700; font-size: .8rem; letter-spacing: .06em; text-transform: uppercase; margin-left: 4px; }
.steps h3 { font-size: 1.1rem; margin: 0; }
.steps p { font-size: var(--fs-small); margin: 0; }
.steps > div:nth-child(1) { background: var(--lemon); } .steps > div:nth-child(2) { background: var(--sky); } .steps > div:nth-child(3) { background: var(--mint); } .steps > div:nth-child(4) { background: var(--rose); }
@media (max-width: 900px) { .steps { grid-template-columns: repeat(2, minmax(0, 1fr)); } .steps > div { border-bottom: var(--bw) solid var(--ink); } .steps > div:nth-child(even) { border-right: 0; } .steps > div:nth-child(n+3) { border-bottom: 0; } }
@media (max-width: 520px) { .steps { grid-template-columns: minmax(0, 1fr); } .steps > div { border-right: 0; border-bottom: var(--bw) solid var(--ink); } .steps > div:last-child { border-bottom: 0; } }

/* Night band: drawn sky, and the shared timeline readable on night blue -------------- */
.night-sky { width: 100%; max-width: 420px; margin-inline: auto; }
.night-sky svg { width: 100%; height: auto; overflow: visible; }
.band.night .timeline { border-left-color: rgba(255,247,230,.4); }
.band.night .timeline li::before { border-color: var(--night); box-shadow: 0 0 0 2px rgba(255,247,230,.5); }
.band.night .timeline .when { color: var(--sun); }
.band.night .timeline b { color: var(--paper); }
.band.night .stats { --surface: var(--paper-2); color: var(--ink-2); }
.band.night .stats .l { color: #6F6A7A; }

/* Mailboxes: three addresses as a stacked list with what each is for ---------------- */
.mailboxes { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; }
.mailboxes li { display: grid; gap: 2px; padding: 14px 16px; border: var(--bw) solid var(--ink); border-radius: var(--r); background: var(--paper-2); box-shadow: 3px 3px 0 var(--ink); }
.mailboxes a { font-weight: 700; color: var(--ink); word-break: break-all; }
.mailboxes span { font-size: var(--fs-small); color: var(--muted); }

/* A drawn divider: the river line under a section head */
.river-rule { width: 100%; max-width: 420px; height: 28px; }
.river-rule svg { width: 100%; height: 100%; overflow: visible; }

/* Keep long hero headlines from orphaning a word on phones */
@media (max-width: 480px) { .hero h1 { font-size: clamp(2.4rem, 11vw, 3.2rem); } }

/* Lesson page: three blocks. On wide screens the sources and credits sit under the storyboard so both columns end together */
@media (min-width: 981px) {
  .lesson-grid { grid-template-rows: auto 1fr; }
  .lesson-grid > .lesson-left { grid-column: 1; grid-row: 1; }
  .lesson-grid > .lesson-main { grid-column: 2; grid-row: 1 / span 2; }
  .lesson-grid > .lesson-refs { grid-column: 1; grid-row: 2; }
  .storyboard { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px 12px; }
}
.storyboard figcaption { font-size: .72rem; hyphens: manual; overflow-wrap: normal; }
@media (max-width: 640px) { .storyboard figcaption { font-size: .74rem; } }
/* The claim log, the sources and the credits are h2s (the lesson outline) set at h3 size */
.lesson-grid h2.sub { font-weight: 800; font-size: var(--fs-h3); line-height: 1.1; letter-spacing: -.01em; font-variation-settings: "wdth" 88; }
.lesson-refs h2.sub:first-child { margin-top: 0; }

/* Claim log: result states, and a note on its own line under a result */
.claims .pend { color: var(--ink); font-weight: 700; white-space: nowrap; }
.claims td small { display: block; margin-top: 4px; font-size: .8rem; line-height: 1.4; color: var(--muted); font-weight: 400; white-space: normal; }
.claims .note-tag { display: block; font-size: .66rem; letter-spacing: .1em; text-transform: uppercase; font-weight: 700; color: var(--blue); margin-bottom: 3px; }

/* The dated "since then" note under a script: what has changed since the lesson was written, kept out of the lesson itself */
.since { margin-top: var(--s3); padding: 16px 18px; background: var(--lemon); border: var(--bw) solid var(--ink); border-left-width: 8px; border-radius: var(--r); font-size: var(--fs-small); max-width: 36em; }
.since .label { margin-bottom: 8px; }
.since p:last-child { margin: 0; }

/* Resources: the company tag, the way back up to the shelf list, and tighter rows on phones */
.resource .tags .co { background: var(--lemon); }
.back-up { margin: var(--s3) 0 0; text-align: right; font-size: var(--fs-small); }
.back-up a { font-weight: 700; color: var(--ink); }
.back-up .arrow { color: var(--red); }
@media (max-width: 640px) {
  .resources { gap: 10px; }
  .resource { grid-template-columns: 44px minmax(0, 1fr); gap: 12px; padding: 12px 14px; }
  .resource .glyph { width: 44px; height: 44px; }
  .resource .glyph svg { width: 28px; height: 28px; }
  .resource h3 { font-size: 1.05rem; }
  .resource p { font-size: .9rem; }
}

/* Print: a lesson page prints as the script, the note, the claim log, the sources and the credits; nothing waits to be scrolled into view */
@media print {
  .reveal, .pop, .stagger > *, .enter, .fill > i { opacity: 1 !important; transform: none !important; transition: none !important; animation: none !important; }
  .draw path, .draw line, .draw polyline, .draw circle { stroke-dashoffset: 0 !important; }
  body { padding-top: 0 !important; background: #fff; }
  body::before, .site-header, .nav-toggle, .sample-note, .marquee, #subscribe, form, .form-msg, .site-footer .cols, .site-footer .family, .back-up { display: none !important; }
  .hero { padding-block: 16px; }
  .lesson-grid { display: block; }
  .lesson-grid > * + * { margin-top: 24px; }
  .phone { box-shadow: none; max-width: 240px; margin-inline: 0; break-inside: avoid; }
  .storyboard { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); overflow: visible; padding: 0; }
  .storyboard figure { flex: none; }
  .table-wrap { overflow: visible; }
  .table-wrap table.claims { display: table; min-width: 0; width: 100%; }
  table.claims thead { position: static; width: auto; height: auto; clip: auto; overflow: visible; }
  table.claims, table.claims tbody, table.claims tr, table.claims td { display: revert; width: auto; }
  table.claims tr { break-inside: avoid; box-shadow: none; }
  table.claims td::before { content: none; }
  .tile, .panel, .since, .sources li { box-shadow: none !important; }
  .tile { transform: none !important; }
  .sources li { break-inside: avoid; }
  .script sup a, .sources a { color: inherit; }
  .sources a::after { content: " (" attr(href) ")"; font-size: .8em; color: var(--muted); word-break: break-all; }
  h2, h3 { break-after: avoid; }
}