:root{--ground:#FAFAF5;--sheet:#FFFFFF;--ink:#2A2A2A;--muted:#6B6B6B;--line:#D8D8D2;--accent:#A2392B;--warn:#CC5500;--paper:var(--sheet);--ink:#111111;--grey:#666666;--rule:#DDDDDD;--frame:#CCCCCC;--mat:#F3F1EC;--accent:#588057;--accent-line:#588157;
--head:'Noto Serif', Georgia, 'Times New Roman', serif;--body:'Inter', system-ui, -apple-system, sans-serif;color-scheme:light}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]){--ground:#1A1917;--sheet:#23221F;--ink:#EDEBE4;--muted:#A29C90;--line:#3A3833;--accent:#D4705F;--warn:#E8854A;--paper:#161616;--ink:#EEEEEE;--grey:#A8A8A8;--rule:#333333;--frame:#444444;--mat:#22211E;--accent:#A3B18A;color-scheme:dark}}
:root[data-theme="dark"]{--ground:#1A1917;--sheet:#23221F;--ink:#EDEBE4;--muted:#A29C90;--line:#3A3833;--accent:#D4705F;--warn:#E8854A;--paper:#161616;--ink:#EEEEEE;--grey:#A8A8A8;--rule:#333333;--frame:#444444;--mat:#22211E;--accent:#A3B18A;color-scheme:dark}
/* THE ONE DARK RULE THE MOCK DID NOT GIVE (the chair, U1 review 2026-10-24 late): on the dark ground the accent is the
   pale sage, and the off-white type of the green buttons, the house boxes and the Ask button vanished on it (seen in
   the pane); their type takes the page's own ground there, as line/page.py does for the gate's button. */
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) :is(.rib a,.hs a,.ask button){color:var(--paper)}}
:root[data-theme="dark"] :is(.rib a,.hs a,.ask button){color:var(--paper)}

input[type=radio]{position:absolute;opacity:0}.es{display:none}
#ed-es:checked~main .es{display:block}#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}
#ed-en:checked~main .es{display:none!important}#ed-es:checked~main .en{display:none!important}
.info label{color:var(--accent);cursor:pointer}
#ed-en:checked~main .info .l-en,#ed-es:checked~main .info .l-es{color:var(--ink);font-weight:700}

html.in .tag{display:none!important}
html.in .offerfoot{display:none!important}
html.in .gate{display:none!important}
html.in .hs a.newsletter{display:none!important}
html.in .filmsnote{display:none!important}

*{box-sizing:border-box}
/* ONE SERIF FOR EVERYTHING A READER READS (his correction 1); the sans only for labels, metadata, counts, ribbon, buttons */
body{margin:0;background:var(--paper);color:var(--ink);font-family:var(--head);font-size:16px;line-height:1.5}
.meta,.go,.ask button,.ask input,.more,.byline,.gate .gh{font-family:var(--body)}
a{color:inherit;text-decoration:none}a:hover{color:var(--accent)}
.page{max-width:1240px;margin:0 auto;padding:0 16px 48px}
h1,h2,h3,h4{font-family:var(--head);font-weight:700;margin:0;letter-spacing:-.01em;overflow-wrap:break-word}
h1{font-size:2.4rem;line-height:1.1}h2{font-size:1.3rem;line-height:1.2}h3{font-size:1.08rem;line-height:1.25}
h4{font-size:1rem;line-height:1.3;font-weight:600}
p{margin:0}

.label,.info,.rib{font-family:var(--body)}
.name{font-family:var(--head);font-weight:700;margin:0;letter-spacing:-.01em;overflow-wrap:break-word}
/* THE TOP, FOUR TIGHT ROWS (his correction 2) */
.mast{text-align:center;padding:22px 0 0}
.name{font-size:2.9rem;line-height:1.05;letter-spacing:-.02em;margin:0 0 14px}
.name .small{font-size:.5em;font-weight:400;letter-spacing:0;vertical-align:baseline}
.mast .motto{font-family:var(--head);font-style:italic;font-size:.95rem;color:var(--grey);margin:-6px 0 12px;line-height:1.3}
.info{display:flex;justify-content:center;align-items:baseline;flex-wrap:wrap;gap:2px 12px;font-size:.74rem;color:var(--grey);
margin:5px 0 0;padding:3px 0;border-top:1px solid var(--ink);border-bottom:1px solid var(--rule)}
.info a{color:var(--accent)}.info a.on{color:var(--ink);font-weight:700}.info .counts{font-size:.68rem;white-space:nowrap}
/* THE RIBBON: one line at desk width, wrapping to a second row rather than scrolling (his correction 3) */
.ribbon{position:sticky;top:0;z-index:5;background:var(--paper);border-bottom:1px solid var(--ink);margin-bottom:16px}
.rib{padding:7px 0 8px}
.rib .row{display:flex;justify-content:center;flex-wrap:nowrap;white-space:nowrap;gap:5px;margin:0 0 5px}.rib .row:last-child{margin-bottom:0}
/* the entries are small SOLID buttons in the Ask button's style, off-white type on the green (his word, 2026-10-24 night), two fixed rows */
.rib a{font-size:.66rem;font-weight:700;color:#f6f4ee;background:var(--accent);border:1px solid var(--accent);padding:2px 8px;white-space:nowrap;line-height:1.5}  /* 85 % of the first size, his word */
.rib a:hover{background:var(--ink);border-color:var(--ink);color:#f6f4ee}
/* an inner page's own section: its button filled a shade darker, the type unchanged (records/69_specs/U1 section 4.2) */
.rib a.here{background:color-mix(in srgb,var(--accent) 75%,#000);border-color:color-mix(in srgb,var(--accent) 75%,#000)}
.label{font-size:.7rem;font-weight:700;text-transform:uppercase;letter-spacing:.08em;color:var(--accent);margin:0 0 6px}

.meta{font-size:.78rem;font-variant:small-caps;text-transform:lowercase;letter-spacing:.05em;color:var(--grey);margin:5px 0 0}
.meta .sec{font-weight:700;color:var(--mx,var(--m))}
.fold{border-bottom:1px solid var(--rule);padding-bottom:18px;margin-bottom:26px}
/* THE LEAD IS THE WIDEST COLUMN (his correction 7) */
.three{display:grid;grid-template-columns:1.5fr 1fr 1fr;gap:0}
.three>*{padding:0 18px;min-width:0}.three>*:first-child{padding-left:0}.three>*:last-child{padding-right:0}
.three>*+*{border-left:1px solid var(--rule)}
.lead .two{font-size:1.06rem;margin:12px 0 0}
/* PICTURES SMALLER AND FRAMED (his correction 6): a 1px frame and a light mat behind every picture */
.leadpic{margin:0;align-self:start}
.leadpic a,.leadpic img{height:auto}
.leadpic a,.card .pic{display:block;border:1px solid var(--frame);background:var(--mat);padding:5px}
.leadpic img,.card .pic img{display:block;width:100%;height:100%;aspect-ratio:3/2;object-fit:cover}
.card .pic{width:100%;max-width:270px;aspect-ratio:3/2;margin-bottom:8px}
.card .pic.none{display:none}
.card.text .txt{padding-top:6px}.card.text .one{font-size:1.02rem}
.row3{display:grid;grid-template-columns:repeat(3,1fr);margin-top:18px;border-top:1px solid var(--rule);padding-top:16px}
.row3>.card,.cards>.card{padding:0 18px;min-width:0}.row3>.card:first-child,.cards>.card:first-child{padding-left:0}
.row3>.card:last-child{padding-right:0}.row3>.card+.card,.cards>.card+.card{border-left:1px solid var(--rule)}
.card .one{font-size:.92rem;margin:5px 0 0;line-height:1.45}
.row3 h2{font-size:1.08rem;line-height:1.25}

.desk h2{margin:2px 0 6px}.desk .first{font-size:.95rem;line-height:1.45;margin:0 0 8px}
.byline{display:flex;align-items:center;gap:10px;font-size:.8rem;color:var(--grey);margin:0 0 8px}
.face{width:104px;height:104px;border-radius:50%;object-fit:cover;flex:none}  /* bigger, at the right edge: "I need to show face" (2026-10-24 late) */
.byline{display:flex;justify-content:space-between;align-items:center;gap:12px}.byline .bl{display:flex;flex-direction:column;gap:2px}
.byline a.who{color:var(--accent);font-weight:700;white-space:nowrap}
.gate{border-top:1px solid var(--rule);padding-top:6px;font-size:.84rem;color:var(--grey)}
.gate .gh{font-weight:700;font-size:.8rem}.gate .gh a{color:var(--accent)}.gate p{margin:2px 0 6px;line-height:1.4}
.go{display:inline-block;font-size:.8rem;font-weight:700;color:var(--accent);border:1px solid var(--accent);padding:3px 10px}
/* side to side of the column and lower (his word, 2026-10-24 night): the box runs the lead's full width, the title
   and the input share one line, the note is one small line under them */
.three{grid-template-rows:auto 1fr}.three>.lead{grid-column:1;grid-row:1}.three>.leadpic{grid-column:2;grid-row:1}.three>.desk{grid-column:3;grid-row:1/3}.three>.ask{grid-row:2}
.three>.ask{grid-column:1/3;margin:18px 18px 0 0;padding:12px 16px 10px;align-self:start}  /* its own height, never stretched to the desk's: the empty frame was the mess (2026-10-25) */
.ask{border-top:3px solid var(--accent);border-bottom:1px solid var(--rule);background:var(--mat,#f7f6f2);display:flex;flex-direction:column;gap:8px}
.ask .label{margin:0}
.askmember{font-size:.78rem;line-height:1.35;margin:0;color:var(--grey)}
.ask input{flex:1;min-width:0;font-size:.95rem;padding:7px 10px;border:1px solid var(--rule);background:var(--paper);color:var(--ink)}
.ask button{font-size:.88rem;font-weight:700;background:var(--accent);color:#fff;border:0;padding:7px 14px}
/* THE LIVE CARD IN THE HOUSE'S FRAME (line/chat_card.py, unchanged): its row first; its list as plain text, no box */
.ask .chatcard{display:flex;flex-direction:column;gap:8px;margin:0;padding:0;border:0;background:none}
#ed-es:checked~main .ask .chatcard.es{display:flex}
.ask .chat-k{display:none}
.ask .chat-ask{order:-1;display:flex;gap:6px}
.ask .chat-list{padding:2px 4px 0 0;font-size:.95rem;line-height:1.45;color:var(--ink);max-height:min(42vh,340px);overflow-y:auto;overscroll-behavior:contain}  /* a scrolling column, never a growing block (his word 2026-10-25) */.ask .chat-list p{margin:0}
.ask .chat-list .chat-first{color:var(--grey);font-style:italic}
.ask .chat-list .turn+.turn{margin-top:8px}.ask .chat-list .turn .kicker{font-family:var(--body);font-size:.7rem;font-weight:700;color:var(--accent)}
.ask .chat-list .said{color:var(--ink)}
.ask .chat-note{font-size:.78rem;color:var(--grey);margin:0;line-height:1.3}

/* THE STRANDS: a 3px rule in the section's colour, the reader-name bold and black (his correction 4) */
/* THE SECTION'S COLOUR AS TYPE AND AS A RULE ON THE DARK GROUND (the rule of 2026-09-22, line/page.py's --mark-text):
   the mark is lifted toward white where it carries the section's name (.sec) and the strand's rule; --m stays the
   mark itself, set inline, and --mx is the lifted shade the dark theme defines (U8 review, 2026-10-24 night). */
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) :is(.sec,.strand){--mx:color-mix(in srgb,var(--m) 52%,#fff)}}
:root[data-theme="dark"] :is(.sec,.strand){--mx:color-mix(in srgb,var(--m) 52%,#fff)}
.strand{border-top:3px solid var(--mx,var(--m));padding-top:8px;margin-bottom:32px;scroll-margin-top:72px}
.band{font-size:1.5rem;color:var(--ink);margin:0 0 4px}
.subs{display:flex;flex-wrap:wrap;gap:3px 0;margin:0 0 14px;border-bottom:1px solid var(--rule);padding-bottom:9px}
.subs a{font-size:.88rem;color:var(--grey);padding:0 12px;border-left:1px solid var(--rule);line-height:1.35}
.subs a:first-child{padding-left:0;border-left:0}.subs a:hover{color:var(--accent)}
.cards{display:grid;grid-template-columns:repeat(3,1fr);gap:0}
.more{font-size:.7rem;text-transform:uppercase;letter-spacing:.08em;color:var(--grey);margin:16px 0 4px}
.rest{list-style:none;margin:0;padding:0;columns:2;column-gap:36px}.rest li{break-inside:avoid;border-top:1px solid var(--rule);padding:8px 0}

.foot{border-top:2px solid var(--ink);padding-top:12px}.foot section{border-bottom:1px solid var(--rule);padding:12px 0 18px}
.film .fr{display:block;border:1px solid var(--frame);background:var(--mat);padding:5px}
.film img{display:block;width:100%;height:100%;aspect-ratio:3/2;object-fit:cover}
.filmsnote{font-family:var(--body);font-size:.82rem;color:var(--grey);margin:-2px 0 10px}
.films{display:grid;grid-template-columns:repeat(auto-fill,minmax(130px,1fr));gap:14px}
.film{display:block;font-size:.8rem}.film img{aspect-ratio:9/16}.film .cap{display:block;font-family:var(--body);color:var(--accent);font-weight:700;margin-top:4px}
.film .ft{display:block;font-size:.86rem;line-height:1.25}
.hs{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}
.hs a{display:block;text-align:center;font-family:var(--body);color:#f6f4ee;background:var(--accent);border:1px solid var(--accent);padding:12px 10px;line-height:1.3}
.hs .hn{display:block;font-weight:700;font-size:1.05rem}.hs .hp{display:block;font-size:.8rem;margin-top:3px;opacity:.92}
.hs .hf{display:block;font-size:.68rem;font-style:italic;margin-top:7px;opacity:.78;line-height:1.25}  /* the book's asterisk note (item 830) */
.hs a:hover{background:var(--ink);border-color:var(--ink)}
.biotoggle,.biomore{display:none}
.whosite{font-family:var(--body);font-size:.82rem;margin:0 0 8px}.whosite a{color:var(--accent);font-weight:700}
.whotitle a{color:inherit;text-decoration:underline;text-decoration-color:var(--rule);text-underline-offset:2px}
.about{max-width:760px}.about p{margin:0 0 .8em}.about .promise{font-size:1.05rem}.plaque{font-size:.9rem;color:var(--grey)}
.who{display:flex;gap:18px;align-items:flex-start}.portrait{width:120px;height:148px;object-fit:cover;flex:0 0 120px}
.whoname{font-weight:700;font-size:1.2rem;margin:0}.whotitle{font-family:var(--body);font-size:.82rem;color:var(--grey);margin:2px 0 8px}
.who p{font-size:.92rem}
.pastlink{font-weight:700;margin-top:12px}.pastlink a{color:var(--accent)}
.footnotes{font-family:var(--body);font-size:.72rem;color:var(--grey);margin-top:10px}.footnotes span{display:block}

@media (max-width:999px) and (min-width:701px){.three{grid-template-columns:1.3fr 1fr;grid-template-rows:auto}.three>.lead,.three>.leadpic,.three>.ask{grid-column:auto;grid-row:auto}.three>.desk{grid-column:1/-1;grid-row:auto;border-left:0;padding:16px 0 0;border-top:1px solid var(--rule);margin-top:16px}.three>.ask{grid-column:1/-1;margin-right:0}}

@media (max-width:700px){
h1{font-size:1.65rem}
.three{display:flex;flex-direction:column}.row3,.cards{display:block}
.three>*{padding:0!important;border-left:0!important}.three{grid-template-rows:auto}.three>.lead,.three>.leadpic,.three>.desk{grid-column:auto;grid-row:auto}.three>.ask{grid-column:auto;grid-row:auto;margin:16px 0 0;padding:10px 12px 9px!important;order:1}
.leadpic{order:-1;margin-bottom:10px}
.desk{border-top:1px solid var(--rule)!important;margin-top:16px;padding-top:12px!important}
.row3>.card,.cards>.card{display:grid;grid-template-columns:96px 1fr;gap:12px;padding:12px 0!important;border-left:0!important;border-top:1px solid var(--rule)}
.card .pic{margin:0;padding:3px;align-self:start}.card .pic.none{display:block;border:0;background:none}
.row3>.card.text,.cards>.card.text{grid-template-columns:1fr}  /* the text-led card has no picture: its words take the whole width, never the picture's 96px column */
.row3 h2,.card h3{font-size:1rem}
.band{font-size:1.35rem}.subs a{font-size:.84rem}
.rest{columns:1}
body{font-size:15px}.lead .two{font-size:1rem}.desk .first{font-size:.92rem}
.desk .first{display:-webkit-box;-webkit-line-clamp:7;-webkit-box-orient:vertical;overflow:hidden}
.ask{gap:6px}
}

@media (max-width:700px){
.mast{padding-top:16px}.name{font-size:2.1rem;margin-bottom:10px}
.rib{padding:5px 0 6px}.rib .row{display:contents}.rib{display:flex;flex-wrap:wrap;justify-content:center;gap:4px}.rib a{font-size:.66rem;padding:2px 7px}  /* on a phone the two rows give way to as many as the width needs, the buttons at their size */
.name[lang=es]{font-size:1.72rem}.mast .motto{font-size:.82rem;margin:-2px 10px 10px}.info .counts{white-space:normal}
.who{flex-direction:column}.hs{grid-template-columns:1fr}
.who p{font-size:.9rem}
.biomore{display:inline-block;font-family:var(--body);font-weight:700;color:var(--accent);font-size:.85rem;margin:0 0 8px;cursor:pointer}
.biorest{display:none}.biotoggle:checked~.biorest{display:block}.biotoggle:checked~.biomore{display:none}
}