:root{--ground:#FAFAF5;--sheet:#FFFFFF;--ink:#2A2A2A;--muted:#6B6B6B;--line:#D8D8D2;--accent:#A2392B;--warn:#CC5500;}@media (prefers-color-scheme:dark){:root:not([data-theme="light"]){--ground:#1A1917;--sheet:#23221F;--ink:#EDEBE4;--muted:#A29C90;--line:#3A3833;--accent:#D4705F;--warn:#E8854A;}}:root[data-theme="dark"]{--ground:#1A1917;--sheet:#23221F;--ink:#EDEBE4;--muted:#A29C90;--line:#3A3833;--accent:#D4705F;--warn:#E8854A;}
*{box-sizing:border-box}
body{background:var(--ground);color:var(--ink);font-family:'Inter', system-ui, -apple-system, sans-serif;font-size:17px;line-height:1.6;margin:0;padding:0 16px 48px}
input[type=radio]{position:absolute;opacity:0}.es{display:none}
#ed-es:checked~main .es{display:block}#ed-es:checked~main li.story.es{display:flex}#ed-es:checked~main li.story.en{display:none}#ed-es:checked~main .en{display:none}
#ed-es:checked~main span.es{display:inline}#ed-es:checked~main span.en{display:none}
#ed-es:checked~main figure.es{display:block}
main{max-width:46rem;margin-inline:auto}
.mast{padding:26px 0 14px;border-bottom:1px solid var(--line);display:flex;flex-wrap:wrap;align-items:flex-end;justify-content:space-between;gap:10px 24px}
.name{font-family:'Noto Serif', Georgia, 'Times New Roman', serif;font-weight:700;font-size:2.3rem;letter-spacing:-.02em;line-height:1;margin:0}.name b{color:var(--accent)}
.sub{font-size:.8rem;color:var(--muted);margin:6px 0 0}
.switch label{display:inline-block;font-family:'IBM Plex Mono', 'SF Mono', Menlo, monospace;font-size:.7rem;padding:5px 11px;border:1px solid var(--line);cursor:pointer;color:var(--muted)}
#ed-en:checked~main .l-en,#ed-es:checked~main .l-es{background:var(--accent);border-color:var(--accent);color:#fff}
.strip{font-family:'IBM Plex Mono', 'SF Mono', Menlo, monospace;font-size:.72rem;line-height:1.7;color:var(--muted);border-bottom:1px solid var(--line);padding:12px 0 14px;margin:0}
.strip b{color:var(--ink)}
.open{font-family:'Noto Serif', Georgia, 'Times New Roman', serif;font-size:1.2rem;line-height:1.5;margin:26px 0 6px}.open em{color:var(--accent);font-style:normal;font-weight:700}
.contents{margin-top:24px;border-top:1px solid var(--line);padding-top:14px}
.contents .kicker{color:var(--muted)}
.cells{display:grid;grid-template-columns:repeat(auto-fit,minmax(19rem,1fr));gap:0 26px;margin-top:6px}
.cell{display:block;padding:11px 0 11px 13px;border-left:3px solid var(--mark-text);border-bottom:1px solid var(--line);text-decoration:none;color:inherit}
.cell:hover{background:var(--sheet)}
.cell a.cellto{display:block;text-decoration:none;color:inherit}
.cell a.cellto.es,.into a.es,h2 a.toit.es{display:none}#ed-es:checked~main h2 a.toit.es{display:inline}#ed-es:checked~main h2 a.toit.en{display:none}
.cell a.cellto.es,.into a.es{display:none}#ed-es:checked~main .cell a.cellto.es,#ed-es:checked~main .into a.es{display:block}#ed-es:checked~main .cell a.cellto.en,#ed-es:checked~main .into a.en{display:none}
a.tag{text-decoration:none}
a.tag.paid:hover{background:var(--ink);border-color:var(--ink)}
.cell .what{font-family:'IBM Plex Mono', 'SF Mono', Menlo, monospace;font-size:.66rem;letter-spacing:.09em;text-transform:uppercase;color:var(--mark-text);display:flex;gap:9px;align-items:center}
.cell .lead{display:block;font-family:'Noto Serif', Georgia, 'Times New Roman', serif;font-size:.97rem;line-height:1.35;color:var(--ink);margin-top:4px}
.cell .lead.es{display:none}#ed-es:checked~main .cell .lead.es{display:block}#ed-es:checked~main .cell .lead.en{display:none}
.sec{scroll-margin-top:14px;background:var(--sheet);border:1px solid var(--line);border-top:3px solid var(--mark-text);padding:20px 22px 24px;margin-top:22px}
/* THE SECTION'S COLOUR AS TYPE. Six of the eight marks are deep (burgundy, navy, olive...) and read well on the light
   ground; on the dark ground they sink into it (his word, 2026-09-21: "the red and the blue text are hard to read").
   So type and thin lines use --mark-text, which is the mark itself in the light and the mark lifted toward white in
   the dark. */
/* IN THE LIGHT THE TYPE IS --mark-lit, which is the mark itself wherever the mark already carries type on this
   sheet and the mark taken down in lightness where it did not (line/front.py mark_text(); sage was 2.28:1 on
   #FFFFFF, burnt orange 4.31, olive 4.48 - all under WCAG AA's 4.5). A block that sets no --mark-lit, such as a
   course page's, falls back to the mark, exactly as before. */
/* AND THE 3px RULE AND THE FILLED SUBSCRIBE TAG TAKE THAT SAME SHADE (his word, 2026-09-22, by buttons: "Yes, use
   the lighter shade"). Until now they painted with --mark itself, which on the DARK sheet #23221F measured
   your_mind 1.41:1, business_adoption 1.70 and rights_and_rules 2.39 - a graphic needs 3:1, so three of the eight
   section rules were all but invisible there and the tag was a dark block with white type on it. With --mark-text
   the worst in the dark is 5.50:1 (your_mind). NOTHING IN THE PALETTE CHANGED: --mark-text IS the mark in the light
   theme wherever the mark already carries, and the shade the 2026-09-22 audit introduced where it did not, so in
   the light theme the rule is the same colour it has always been for five of the eight sections and the audit's
   own shade for education, seniors and work_and_employment - where the mark on white was 2.28, 4.48 and 4.31.
   THE TAG'S OWN TYPE turns over with it: white on --mark-text carries in the light (4.50:1 at worst), but white on
   a shade lifted toward white in the dark does not (1.49:1 for education), so in the dark the tag's type is the
   page's own ground, which measures 6.07:1 at worst. */
.sec,.cell{--mark-text:var(--mark-lit,var(--mark))}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) .sec,:root:not([data-theme="light"]) .cell{--mark-text:color-mix(in srgb,var(--mark) 52%,#fff)}}
:root[data-theme="dark"] .sec,:root[data-theme="dark"] .cell{--mark-text:color-mix(in srgb,var(--mark) 52%,#fff)}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) .tag.paid{color:var(--ground)}}
:root[data-theme="dark"] .tag.paid{color:var(--ground)}
.kicker{font-family:'IBM Plex Mono', 'SF Mono', Menlo, monospace;font-size:.68rem;letter-spacing:.1em;text-transform:uppercase;color:var(--mark-text);font-weight:500;margin:0;display:flex;gap:10px;align-items:center}
.tag{font-size:.64rem;padding:2px 7px;border:1px solid var(--line);color:var(--muted);letter-spacing:.06em}
.tag.paid{background:var(--mark-text);border-color:var(--mark-text);color:#fff;padding:4px 10px;font-weight:600;cursor:pointer}
.tag.free{border-color:var(--mark-text);color:var(--mark-text);font-weight:500}
main a:not(.go):not(.tag):not(.open):not(.toit):not(.cellto):not([class^=l-]){color:var(--accent);text-decoration:none;border-bottom:1px solid var(--line)}
html.in .tag{display:none!important}
h2{font-family:'Noto Serif', Georgia, 'Times New Roman', serif;font-weight:700;font-size:1.5rem;line-height:1.2;margin:6px 0 2px;letter-spacing:-.005em}
h2 a.toit{color:inherit;text-decoration:none}h2 a.toit:hover{color:var(--mark-text)}
.into{margin:16px 0 0}
.into a{font-family:'IBM Plex Mono', 'SF Mono', Menlo, monospace;font-size:.7rem;letter-spacing:.06em;color:var(--mark-text);text-decoration:none;border-bottom:1px solid var(--line)}
.who{font-size:.8rem;color:var(--muted);margin:0 0 4px}
.hooks{list-style:none;margin:14px 0 0;padding:0}
/* EACH ENTRY IS A CARD with a narrow line in the section's colour (his word, 2026-09-21: "a narrow line around each...
   a nice elegant detail, the color of the section"), and the picture stands the full height of the card, so its
   bottom is level with the bottom of the text ("the image squares for each entry should be bigger"). */
li.story.es{display:none}.story{display:flex;gap:16px;align-items:stretch;padding:12px;margin-top:10px;border:1px solid var(--mark-text)}
.story:first-child{margin-top:0}
.pic{position:relative;width:118px;flex:0 0 118px;align-self:stretch;min-height:72px}
.thumb{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center 45%;border:1px solid var(--line);display:block;box-sizing:border-box}
.hook{font-size:.93rem;line-height:1.5;color:var(--muted);align-self:flex-start}
.hook>*:last-child{margin-bottom:0}
.hook b{font-family:'Noto Serif', Georgia, 'Times New Roman', serif;font-weight:700;font-size:1.02rem;color:var(--ink);display:block;margin-bottom:3px;line-height:1.3}
.hook b a.open{color:inherit;text-decoration:none}.hook b a.open:hover{color:var(--mark-text)}
.hook b .tag{display:inline-block;vertical-align:middle;margin-left:8px;font-family:'IBM Plex Mono', 'SF Mono', Menlo, monospace;font-size:.6rem;font-weight:500;letter-spacing:.08em;text-transform:uppercase;text-decoration:none;line-height:1.5}
/* "SHORT + DETAILED" beside the FREE or SUBSCRIBE word (records/47 section 10, records/08 item 237): the label type
   of .tag, muted, with no border - it says what the story holds, it is not a button. */
.hook b .depth{display:inline-block;vertical-align:middle;margin-left:6px;font-family:'IBM Plex Mono', 'SF Mono', Menlo, monospace;font-size:.68rem;font-weight:500;letter-spacing:.08em;text-transform:uppercase;color:var(--muted);line-height:1.5;white-space:nowrap}
.film video{aspect-ratio:9/16;object-fit:cover}
.shot{width:274px;flex:0 0 274px;aspect-ratio:9/16;object-fit:cover;background:#000;border:1px solid var(--line);display:block}
.story.filmed{padding:26px 0;gap:22px;align-items:stretch}.story.filmed>div{display:flex;flex-direction:column;justify-content:center}
video.shot.es,iframe.shot.es{display:none}#ed-es:checked~main video.shot.es,#ed-es:checked~main iframe.shot.es{display:block}#ed-es:checked~main video.shot.en,#ed-es:checked~main iframe.shot.en{display:none}
iframe.shot{border:1px solid var(--line);background:#000}
.story.filmed .hook{font-size:1rem;line-height:1.55}.story.filmed .hook b{font-size:1.22rem}

/* THE FILM STANDS BEHIND ITS OWN PICTURE UNTIL THE READER PRESSES IT (his word, 2026-09-22, by buttons: "Yes,
   picture with a play button"; line/front.py film_facade() writes the markup). What stood here before was a
   youtube-nocookie <iframe> in a black box, and the story's own picture was dropped.
   A SRC IS A FETCH (2026-09-22, the eighteen players). The first facade was a hidden radio and a <label>, and
   the iframe behind it carried the player's address in its src with autoplay=1, hidden with display:none and
   loading="lazy". Neither of those keeps a browser from loading a frame, and eighteen of them started together
   the first time the operator opened the front page. The facade is now an <a> whose href IS the player's page -
   so the press works with no script at all - and the iframe beside it has NO src: its address waits in data-src
   until the four lines in the page's one script block copy it over, with autoplay=1, on that press.
   NOTHING IS FETCHED BEFORE THE READER ASKS (records/36 section 4), and the reader who asked once is not made
   to ask twice.
   THE PLAY MARK IS DRAWN HERE - a circle and a triangle in the section's own --mark-text, no image file, nothing
   to fetch. The caption's ground is a scrim rather than a palette value, because it lies over a picture whose
   colours are not ours to know; that is the same reason line/s85_short.py sets the name over a picture in white
   with a black outline. */
.films{position:relative;width:274px;flex:0 0 274px;align-self:flex-start;aspect-ratio:9/16;background:#000;border:1px solid var(--line);overflow:hidden}
/* THE OTHER EDITION'S FILM IS HIDDEN, and the rule must outrank `.story.filmed>div{display:flex}` above, which once
   drew both editions' films side by side and squeezed the story's text into a column 98 px wide (2026-09-22, seen on
   the live page). */
.story.filmed>.films.es,.films.es{display:none}#ed-es:checked~main .story.filmed>.films.es,#ed-es:checked~main .films.es{display:block}#ed-es:checked~main .story.filmed>.films.en,#ed-es:checked~main .films.en{display:none}
.films .facade{position:absolute;inset:0;display:block;cursor:pointer;text-decoration:none}
.films .facadepic{width:100%;height:100%;object-fit:cover;object-position:center 45%;display:block}
.films .play{position:absolute;left:50%;top:50%;width:62px;height:62px;margin:-31px 0 0 -31px;border-radius:50%;background:var(--sheet);border:2px solid var(--mark-text);box-sizing:border-box}
.films .play::after{content:"";position:absolute;left:22px;top:16px;width:0;height:0;border-style:solid;border-width:13px 0 13px 21px;border-color:transparent transparent transparent var(--mark-text)}
.films .cap{position:absolute;left:0;right:0;bottom:0;padding:8px 11px;font-family:'IBM Plex Mono', 'SF Mono', Menlo, monospace;font-size:.64rem;letter-spacing:.09em;text-transform:uppercase;color:#fff;background:rgba(0,0,0,.66)}
.films iframe.shot{position:absolute;inset:0;width:100%;height:100%;flex:none;border:0;display:none}
/* OUR OWN FILM IN THE BROWSER'S OWN VIDEO ELEMENT (records/47 section 3.5, records/08 item 224): it stands where the iframe stood,
   hidden until the press. The edition rule above that shows video.shot.es is outranked here, or the Spanish film
   would stand over its own facade with no src to play; the press sets display inline, which wins over both. */
.films video.shot,#ed-es:checked~main .films video.shot{position:absolute;inset:0;width:100%;height:100%;flex:none;border:0;display:none;object-fit:contain;background:#000}
.films .facade:focus-visible{outline:2px solid var(--accent);outline-offset:-2px}
@media(max-width:560px){.story.filmed{flex-direction:column}.shot,.films{width:100%;flex:0 0 auto;max-width:300px}}
.soon{background:transparent;border-style:dashed;border-top-style:solid}
.themes{font-size:.9rem;margin:12px 0 0;padding-left:1.1rem}.themes li{margin:4px 0}
.sample{font-size:.76rem;color:var(--muted);margin:12px 0 0}
.who-makes{background:var(--sheet);border:1px solid var(--line);border-top:3px solid var(--accent);padding:22px;margin-top:26px;display:flex;gap:22px;align-items:flex-start}
.who-makes .kicker{color:var(--accent)}
.portrait{width:132px;height:162px;flex:0 0 132px;object-fit:cover;border:1px solid var(--line);display:block}
.who-makes .title{font-family:'IBM Plex Mono', 'SF Mono', Menlo, monospace;font-size:.72rem;letter-spacing:.04em;color:var(--muted);margin:2px 0 12px}
.who-makes p{font-size:.95rem;line-height:1.6;margin:0 0 10px}
/* THE PLAQUE (records/08 item 306): one line under the opening sentence, the strip's small type, pointing at #who */
.plaque{font-family:'IBM Plex Mono', 'SF Mono', Menlo, monospace;font-size:.72rem;line-height:1.7;color:var(--muted);margin:4px 0 0}
.plaque a{color:var(--accent);text-decoration:none;border-bottom:1px solid var(--line);white-space:nowrap}
.plaque-face{display:flex;gap:14px;align-items:center;margin:12px 0 4px}
.plaque-face img{width:64px;height:64px;flex:0 0 64px;object-fit:cover;object-position:50% 18%;border-radius:50%;border:1px solid var(--line);display:block}
.plaque-face .plaque{margin:0;font-size:.8rem}
.plaque-face>a{flex:0 0 64px}
/* THE RECORD, DATED: folded on the front page, open on the courses page; a <details>, no script */
.who-makes details.record{margin:4px 0 14px}
.who-makes details.record>summary{font-family:'IBM Plex Mono', 'SF Mono', Menlo, monospace;font-size:.72rem;letter-spacing:.06em;color:var(--accent);cursor:pointer;list-style:none}
.who-makes details.record>summary::-webkit-details-marker{display:none}
.who-makes details.record>summary::marker{content:""}
.who-makes details.record>summary::before{content:"▸ ";}
.who-makes details.record[open]>summary::before{content:"▾ ";}
.who-makes ul.dated{list-style:none;margin:10px 0 0;padding:0}
.who-makes ul.dated li{font-size:.86rem;line-height:1.5;margin:0;padding:5px 0;border-bottom:1px solid var(--line)}
.who-makes ul.dated li b{font-family:'IBM Plex Mono', 'SF Mono', Menlo, monospace;font-weight:500;font-size:.72rem;color:var(--muted);display:inline-block;min-width:5.6em}
.who-makes .more a{color:var(--accent);font-family:'IBM Plex Mono', 'SF Mono', Menlo, monospace;font-size:.72rem;letter-spacing:.06em;text-decoration:none;border-bottom:1px solid var(--line)}
.prices{background:var(--sheet);border:1px solid var(--line);border-top:3px solid var(--accent);padding:20px 22px;margin-top:22px}
.prices .kicker{color:var(--accent)}
/* THE FREE WEEKLY DRIP (records/08 item 177): the same card as the prices, one line above them, so the reader who
   will not pay today is still offered something rather than nothing. Its form is plain HTML and posts to /drip/. */
.drip{background:var(--sheet);border:1px solid var(--line);border-top:3px solid var(--accent);padding:20px 22px;margin-top:22px}
.drip .kicker{color:var(--accent)}
.drip>div.es{display:none}#ed-es:checked~main .drip>div.es{display:block}#ed-es:checked~main .drip>div.en{display:none}
.drip .what{margin:6px 0 0}
.dripform{display:flex;flex-wrap:wrap;gap:10px;align-items:flex-end;margin-top:12px}
.dripform label{display:block;font-family:'IBM Plex Mono', 'SF Mono', Menlo, monospace;font-size:.68rem;letter-spacing:.09em;text-transform:uppercase;color:var(--muted);margin:0 0 5px}
.dripform input[type=email]{flex:1 1 15rem;padding:10px 12px;font:inherit;font-size:.95rem;background:var(--ground);color:var(--ink);border:1px solid var(--line)}
.dripform .go{margin-top:0;cursor:pointer}
.go{display:inline-block;margin-top:14px;font-family:'Inter', system-ui, -apple-system, sans-serif;font-size:.84rem;font-weight:600;color:#fff;background:var(--accent);padding:10px 18px;text-decoration:none;border:0}
.go:hover{background:var(--ink)}
.two{display:grid;grid-template-columns:repeat(auto-fit,minmax(15rem,1fr));gap:22px;margin-top:12px}
.price{font-family:'Noto Serif', Georgia, 'Times New Roman', serif;font-size:.9rem;color:var(--muted);margin:0}.price b{font-size:1.7rem;color:var(--accent);display:block;line-height:1.1}
.what{font-size:.98rem;color:var(--ink);line-height:1.5;margin:6px 0 0}
/* the two lines under the prices stand out (his word 2026-09-21: "soft white"): the page's ink in the light, a soft white in the dark */
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) .prices .what{color:#ece7dd}}
:root[data-theme="dark"] .prices .what{color:#ece7dd}
@media(max-width:560px){.who-makes{flex-direction:column}}
/* THE COURSES' PAGE (records/36). These rules live HERE, in the front page's own stylesheet, and not in a second
   one, because /tertulia/en/ and /tertulia/es/ carry assets/front.css at the same hash as the front page: the same
   light, the same type, the same cards and the same buttons. The front page never uses them. */
.mark{width:34px;height:34px;flex:0 0 34px;display:block;color:var(--muted)}
.mast .withmark{display:flex;align-items:center;gap:10px}
.switch a.twin{display:inline-block;font-family:'IBM Plex Mono', 'SF Mono', Menlo, monospace;font-size:.7rem;padding:5px 11px;border:1px solid var(--line);color:var(--muted);text-decoration:none}
.switch a.twin:hover{border-color:var(--accent);color:var(--accent)}
/* THE MEDIA ROW IS THE CARD'S CENTRE: the trailer at the left, the free first lesson at the right, both 16:9 and
   of equal width. On a phone they stack and THE LESSON COMES FIRST - the free thing is the point. */
/* AN EMPTY FRAME IS NOT A FRAME (reviewed in the pane, 2026-09-21). Where only ONE of the two players has an id it
   stands alone across the whole row, at the same 16:9 and so larger; a card with no video at all has no media row
   at all (.sec.compact), only the one small line of .cap saying where the lesson is. */
.media{display:grid;grid-template-columns:1fr 1fr;gap:18px;margin:16px 0 0}
.media.solo{grid-template-columns:1fr}
.frame{display:block;width:100%;aspect-ratio:16/9;border:1px solid var(--line);background:#000}
.cap{font-family:'IBM Plex Mono', 'SF Mono', Menlo, monospace;font-size:.66rem;letter-spacing:.07em;text-transform:uppercase;color:var(--muted);margin:7px 0 0;display:flex;gap:9px;align-items:center}
.sec.compact .cap{margin-top:14px}
.sec .leave{font-size:1rem;line-height:1.55;margin:10px 0 14px;color:var(--ink)}
.kicker.then{margin:26px 0 6px;color:var(--muted)}
.cap .tag{font-family:'IBM Plex Mono', 'SF Mono', Menlo, monospace;font-size:.6rem;font-weight:500;letter-spacing:.08em}
/* THE LESSONS ARE FOLDED, so seven lists do not make a wall of buttons. A <details>, and no script. */
.lessons{margin:16px 0 0}
.lessons>summary{font-family:'IBM Plex Mono', 'SF Mono', Menlo, monospace;font-size:.7rem;letter-spacing:.06em;color:var(--mark-text);cursor:pointer;list-style:none}
.lessons>summary::-webkit-details-marker{display:none}
.lessons>summary::marker{content:""}
.lessons ol{list-style:none;margin:10px 0 0;padding:0}
.lessons li{display:flex;gap:12px;align-items:center;justify-content:space-between;font-size:.93rem;line-height:1.45;padding:8px 0;border-bottom:1px solid var(--line)}
.lessons li .tag{flex:0 0 auto;font-family:'IBM Plex Mono', 'SF Mono', Menlo, monospace;font-size:.6rem;font-weight:500;letter-spacing:.08em;text-transform:uppercase;text-decoration:none;line-height:1.5}
@media(max-width:560px){.media{grid-template-columns:1fr}.media .lesson{order:-1}.prices .two{grid-template-columns:1fr}}
.foot{font-family:'IBM Plex Mono', 'SF Mono', Menlo, monospace;font-size:.7rem;color:var(--muted);margin-top:30px;padding-top:14px;border-top:1px solid var(--line);display:flex;flex-wrap:wrap;gap:6px 18px}
@media(max-width:600px){.story.lead h3{font-size:1.2rem}.name{font-size:1.9rem}}

/* THE LESSON'S PREPARED PAGE, under the lesson (records/41_THE_LESSON_EXTRAS.md, his word 2026-09-22: "We had
   prepared other things, a challenge, for example"). These words were written for the learner and are shown as
   they were written, so the rules below are about RANK and READABILITY only - not one of them recolours a word.
   They use the section's own --mark-text, --muted, --line and --sheet, which is why the block reads in the light
   and in the dark without a second palette. */
.extras{margin:18px 0 0;border-top:1px solid var(--line);padding-top:16px}
.extras>div+div{margin-top:20px}
.extras h3{font-family:'IBM Plex Mono', 'SF Mono', Menlo, monospace;font-size:.68rem;letter-spacing:.1em;text-transform:uppercase;color:var(--mark-text);font-weight:500;margin:0 0 8px}
.extras h4{font-family:'IBM Plex Mono', 'SF Mono', Menlo, monospace;font-size:.64rem;letter-spacing:.08em;text-transform:uppercase;color:var(--muted);font-weight:500;margin:12px 0 4px}
.extras p{font-size:.93rem;line-height:1.6;margin:0 0 9px}
.extras ul,.extras ol{margin:0 0 9px;padding-left:1.1em}
.extras li{font-size:.93rem;line-height:1.55;margin:0 0 6px}
.extras code{font-family:'IBM Plex Mono', 'SF Mono', Menlo, monospace;font-size:.85em}
/* THE FIELD CARD IS THE LESSON ON ONE PAGE, so it is the one thing here that is boxed, on the section's own rule. */
.extras .fieldcard{border:1px solid var(--line);border-left:3px solid var(--mark-text);background:var(--sheet);padding:14px 16px 6px}
.extras .fieldcard h3{margin-bottom:6px}
/* A GLOSSARY IS A LIST OF TERMS: the term stands, its meaning steps back. */
dl.glossary{margin:0}
dl.glossary dt{font-weight:600;font-size:.93rem;margin:10px 0 2px}
dl.glossary dd{margin:0;font-size:.9rem;line-height:1.55;color:var(--muted)}
/* THE REFERENCES ARE THE SMALL TYPE, one line each, and they are the last thing on the lesson. */
.extras .references p,.extras .references li{font-family:'IBM Plex Mono', 'SF Mono', Menlo, monospace;font-size:.68rem;line-height:1.7;color:var(--muted);margin:0 0 4px}

/* THE LESSON'S OWN PAGE (records/42_THE_LESSON_PAGE.md, his word 2026-09-22: "So every lesson needs a well designed
   page"). A handful of rules and no more: the course page's own classes do the rest, so a lesson page and a course
   page are never served two different looks. */
/* WHERE YOU ARE, AND THE ONLY NAVIGATION THE PAGE HAS: ← previous · next → and the way back to the index. The
   links take the section's own colour rather than the page's link colour, so the kicker stays one line of type. */
.kicker a.l-nav{color:var(--mark-text);text-decoration:none;border-bottom:1px solid var(--line)}
.kicker a.l-nav:hover{border-color:var(--mark-text)}
/* THE COURSE'S PARAGRAPH stands on the course page as it does on the shelf (records/38). */
.leave{font-size:1rem;line-height:1.55;margin:10px 0 14px;color:var(--ink)}
/* THE INDEX OF LESSONS: the folded list's own rows, unfolded, with the lesson's number in front of its title. */
.lessons.index{margin-top:18px}
.lessons.index ol{margin:0}
.lessons li .n{font-family:'IBM Plex Mono', 'SF Mono', Menlo, monospace;font-size:.7rem;color:var(--muted);margin-right:9px}
/* THE INTERACTIVE IS A STILL AND A BUTTON, never the widget (records/42 §2.10: nothing moves until the reader
   asks). Where no screenshot exists beside the widget the frame carries its title and no picture. */
.still{margin:18px 0 0}
.still .frame{object-fit:contain;background:var(--sheet)}
.still .frame.empty{display:flex;align-items:center;justify-content:center;text-align:center;padding:14px;font-family:'IBM Plex Mono', 'SF Mono', Menlo, monospace;font-size:.72rem;letter-spacing:.06em;color:var(--muted);border-style:dashed}
.still .cap{margin:0 0 7px}

/* MORE THAN ONE VERSION OF A VIDEO IS ONE PLAYER WITH SMALL TABS ABOVE IT, NEVER TWO PLAYERS SIDE BY SIDE
   (records/08 item 196, his word 2026-09-22). The tabs make it plain that there are versions: the lesson and its
   short cut on a lesson page, the FREE first lesson and the trailer on a doorway card. A video that has only one
   version keeps .media.solo and shows no tabs at all.
   THE MECHANISM IS THE SITE'S OWN EDITION SWITCH AND NOT A SCRIPT: a hidden radio per version (already invisible
   by the `input[type=radio]` rule at the top of this sheet), a label per version in the kicker's mono type - the
   .switch label look - and one .vers box per version stacked in the same frame, all but the checked one hidden by
   a plain sibling rule. No :has(), no javascript, and the hidden iframe, being display:none, plays nothing. */
.media.tabs{grid-template-columns:1fr}
.media.tabs .tabrow{display:flex;flex-wrap:wrap;gap:8px;margin:0 0 10px}
.media.tabs .tabrow label{display:inline-flex;align-items:center;gap:8px;font-family:'IBM Plex Mono', 'SF Mono', Menlo, monospace;font-size:.66rem;letter-spacing:.07em;text-transform:uppercase;padding:5px 11px;border:1px solid var(--line);color:var(--muted);cursor:pointer}
.media.tabs .tabrow label:hover{border-color:var(--mark-text);color:var(--mark-text)}
.media.tabs .vers{display:none}
.media.tabs input.v1:checked~.vers.v1,.media.tabs input.v2:checked~.vers.v2,.media.tabs input.v3:checked~.vers.v3{display:block}
.media.tabs input.v1:checked~.tabrow .t1,.media.tabs input.v2:checked~.tabrow .t2,.media.tabs input.v3:checked~.tabrow .t3{border-color:var(--mark-text);color:var(--mark-text);background:var(--sheet)}
.media.tabs input.v1:focus-visible~.tabrow .t1,.media.tabs input.v2:focus-visible~.tabrow .t2,.media.tabs input.v3:focus-visible~.tabrow .t3{outline:2px solid var(--accent);outline-offset:2px}
/* A THIRD TAB: THE TRAILER (records/42 section 8, his ruling 2026-09-22 - "every lesson has a trailer, that
   trailer should go in all the lesson pages for non subscribers, it is part of the hook"). A lesson page that
   has the lesson, its short cut and its trailer is still ONE player: the three rules above simply run to v3.
   THE TRAILER IS OUR OWN FILE AND NOT A VENDOR'S EMBED, so its version is a <video> rather than an <iframe>. It
   wears the same .frame class, which already gives it the 16:9 box, the hairline and the black ground; the one
   thing a <video> needs that an <iframe> does not is to be told not to grow past that box on a phone, because a
   film wider than the column would otherwise push the page sideways. */
.media video.frame{max-width:100%;object-fit:contain}
/* ON A PHONE THE TABS WRAP AND THE FRAME KEEPS THE FULL WIDTH. */
@media(max-width:560px){.media.tabs .tabrow{gap:6px}.media.tabs .tabrow label{padding:5px 9px;font-size:.62rem}}

/* THE CHAT'S CARD (records/43 section 14; his word 2026-09-24: "very prominent, it sells and then it gives
   value"). AN OPEN CARD IN THE PAGE'S FLOW, on the first screen of the doorway, every course and every lesson,
   with its first turn already written. A sheet card with the course's --mark rule where there is one and the
   accent where there is none; nothing fixed, nothing floating, nothing moving before Send. The list of turns
   grows to a bounded height and then scrolls, so the page below it never jumps. */
.chatcard{margin:18px 0 22px;padding:14px 16px 14px;background:var(--sheet);border:1px solid var(--line);border-left:4px solid var(--mark,var(--accent))}
.chat-k{display:block;margin:0 0 10px;color:var(--mark-text,var(--accent))}
.chat-list{max-height:min(46vh,380px);overflow-y:auto;padding:0 0 4px}
.chat-list .turn{margin:0 0 14px}
.chat-list .turn .kicker{color:var(--muted);margin:0 0 4px;display:block}
.chat-list .turn.us .kicker{color:var(--mark-text,var(--accent))}
.chat-list .said{margin:0;font-size:1rem;line-height:1.55;white-space:pre-wrap}
.chat-ask{display:flex;gap:8px;padding-top:10px;border-top:1px solid var(--line)}
.chat-ask input{flex:1 1 auto;min-width:0;padding:11px 12px;font:inherit;font-size:1rem;background:var(--ground);color:var(--ink);border:1px solid var(--line)}
.chat-ask input:focus{outline:none;border-color:var(--mark-text,var(--accent))}
.chat-ask .go{margin:0;white-space:nowrap}
.chat-ask .go[disabled]{opacity:.5;cursor:default}
.chat-note{margin:8px 0 0;font-family:'IBM Plex Mono', 'SF Mono', Menlo, monospace;font-size:.66rem;letter-spacing:.06em;color:var(--muted)}