/* APA 101 lessons: shared by every lesson page (each lists it in its meta "css"), including Lesson 7, guide-apa-headings. */

.intro--lesson h1 { max-width: 24ch; }
.intro--lesson .lede { max-width: 70ch; }
.lesson-chips { margin: 0 0 0.25rem; }

/* The video slot near the top of every lesson. Graysen's illustrated videos replace the placeholder inside
   the same .lesson-video box: an <iframe> or <video> placed in it fills the 16:9 frame. */
.lesson-video { width: 100%; aspect-ratio: 16 / 9; min-height: 0; margin: 0 0 2.5rem; font-size: 0.8125rem; }
.lesson-video iframe, .lesson-video video { display: block; width: 100%; height: 100%; border: 0; border-radius: var(--radius); }
.lesson-video:not(.shot) { background: #000; border-radius: var(--radius); overflow: hidden; }
/* Until a lesson's video is made, its slot holds the lesson's hero image from the live site (Graysen, Oct 5, 2026),
   inside a figure with a note under it. The images are 16:9 like the frame and are shown whole, never cropped.
   When the video arrives it replaces the <img>, and the figcaption goes. */
.lesson-still { margin: 0 0 2.5rem; }
.lesson-still .lesson-video { margin: 0; background: var(--gray-50); }
.lesson-video img { display: block; width: 100%; height: 100%; object-fit: contain; }
.lesson-still figcaption { margin-top: 0.5rem; font-size: 0.875rem; color: var(--ink-3); }

/* Example pages. The page's type scales with its own width (an 8.5-inch page is 51 times its 12-point type),
   so the lines wrap the same at every screen size and the pins stay on the lines they mark. */
.lesson-sheet { --fs: clamp(7px, 1.96cqi, 15px); container-type: inline-size; position: relative; max-width: 40rem; margin: 1.75rem 0 1.25rem; }
.lesson-sheet .paper { font-size: var(--fs); overflow: visible; }
.prose .paper p { margin-bottom: 0; }   /* a sample page has no gaps between lines, headings included: double spacing is the spacing (.prose p would add 1.1rem) */
.lesson-sheet--cut .paper { aspect-ratio: auto; padding-bottom: 2.3em; }      /* the top of a page, cut off below the last line shown */
.lesson-sheet--strip { --fs: clamp(9px, 2.4cqi, 15.5px); }   /* a few lines lifted from a page, seen closer up so they read on a phone */
.lesson-sheet--strip .paper { aspect-ratio: auto; padding-top: 1.6em; padding-bottom: 1.6em; }
.lesson-sheet .pinned { position: relative; }
.lesson-sheet .pin--l { left: calc(-11.58% - 0.75rem); top: calc(var(--fs) * 1.15 - 0.75rem); }
.lesson-sheet .pin--r { right: calc(-11.58% - 0.75rem); top: calc(var(--fs) * 1.15 - 0.75rem); }
.lesson-sheet .pnum .pin--pnum { right: calc(-9.4cqi - 0.75rem); top: calc(50% - 0.75rem); }   /* inside the page number, on the sheet's right edge */
.lesson-sheet .pin--last { top: auto; bottom: calc(var(--fs) * 1.15 - 0.75rem); }   /* on the last line of what it marks */
.lesson-sheet .paper .sub { padding-left: 7.7%; }   /* an outline's sub-point, half an inch in */
.lesson-sheet .pin--tpad { top: calc(var(--fs) * 8.05 - 0.75rem); }   /* the title page's title sits three blank lines down (.tpad) */
/* Page setup: the one-inch margins drawn on the sheet as a dashed guide */
.lesson-sheet .paper--guides::before { content: ""; position: absolute; inset: 9.4cqi; border: 1px dashed var(--blue-300); pointer-events: none; }
.lesson-sheet--cut .paper--guides::before { bottom: 0; border-bottom: 0; }
.lesson-sheet .ref .part { background: var(--highlight-soft); border-radius: 2px; box-decoration-break: clone; -webkit-box-decoration-break: clone; }
.lesson-sheet .ref .part--b { background: var(--highlight); }
.lesson-sheet + .anatomy-list { font-size: 0.9375rem; margin-bottom: 1.25rem; }
.sheet-note { font-size: 0.875rem; color: var(--ink-3); }

/* The three-page paper (Lessons 1 and 18): the site's .fan, sized for the article column */
.fan.lesson-fan { aspect-ratio: 1 / 0.6; max-width: 40rem; }

/* A worked example inside the prose: one line in Times, as it appears in the paper */
.prose .example { margin-bottom: 1.1rem; overflow-wrap: anywhere; }
.prose .example + .example { margin-top: -0.6rem; }
.prose .example .ref { padding-left: 2.5em; text-indent: -2.5em; }
.prose .ex { font-family: var(--font-paper); font-size: 1.08em; }   /* a piece of a reference, inline in a sentence */

/* The made-up source details a lesson works from */
.lesson-facts { display: grid; grid-template-columns: max-content minmax(0, 1fr); gap: 0 1.25rem; margin: 0 0 1.25rem; padding: 0.875rem 0; border-top: 2px solid var(--ink); border-bottom: 1px solid var(--rule); font-size: 0.9375rem; }
.lesson-facts dt { font-family: var(--font-mono); font-size: 0.6875rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--ink-3); padding: 0.4rem 0; }
.lesson-facts dd { margin: 0; padding: 0.3rem 0; overflow-wrap: anywhere; }

/* Checklists keep the planner tick box (.checks) */
.prose .checks { margin-bottom: 1.25rem; }

/* Before and after pairs, set in Times on the right */
.prose .table td.paperish { font-family: var(--font-paper); font-size: 1rem; }

/* An index card inside the lesson stays on the white page (DESIGN.md) */
.prose .icard--solo { margin: 2.75rem 0 1.75rem; }

/* Previous and next lesson */
.lesson-pager { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 1rem 2rem; border-top: 2px solid var(--ink); margin-top: 3rem; padding-top: 1.25rem; }
.lesson-pager a { display: flex; flex-direction: column; gap: 0.3rem; color: var(--ink); text-decoration: none; }
.lesson-pager a:hover .lesson-pager__title { color: var(--link); text-decoration: underline; }
.lesson-pager__dir { font-family: var(--font-mono); font-size: 0.6875rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--ink-3); }
.lesson-pager__title { font-family: var(--font-display); font-weight: 700; font-size: 1.1875rem; line-height: 1.25; letter-spacing: -0.005em; }
.lesson-pager__next { text-align: right; align-items: flex-end; }
@media (max-width: 560px) { .lesson-pager { grid-template-columns: minmax(0, 1fr); } .lesson-pager__next { text-align: left; align-items: flex-start; } }