/* Satyartha's 13A/B: a compact corner, warm individual circles and padded soft backdrop.
   These local colors do not alter the app's approved ambient palette. */
.corner-launcher{position:fixed;left:16px;bottom:calc(16px + env(safe-area-inset-bottom));z-index:82;width:48px;height:48px;border:0;background:transparent!important;box-shadow:none!important;display:grid;place-items:center}
.corner-mark{display:grid;place-items:center;width:46px;height:46px;border-radius:50%;background:var(--card);color:var(--accent);border:1px solid var(--accent-border);box-shadow:0 3px 15px #0002;font-size:24px;transition:width .28s ease,height .28s ease,transform .28s ease}
.corner-launcher[hidden]{display:none}
.corner-open .corner-mark{width:46px;height:46px;transform:rotate(45deg)}
.corner-open .corner-mark::after{content:'+';font-size:30px;position:absolute}
.corner-open .corner-mark{font-size:0}
#corner-menu{position:fixed;inset:0;z-index:81;background:#100b071c;backdrop-filter:blur(3px);-webkit-backdrop-filter:blur(3px);animation:corner-veil .28s ease both;overscroll-behavior:contain;touch-action:none}
#corner-menu[hidden]{display:none}
.corner-fan{position:absolute;bottom:calc(40px + env(safe-area-inset-bottom));left:40px;width:0;height:0;color:var(--ink)}
.corner-fan::before{content:'';position:absolute;left:-40px;bottom:-40px;width:285px;height:255px;border-radius:0 100% 0 0;background:linear-gradient(130deg,#433227ef,#30251be8);border-top:1px solid #bea17c30;box-shadow:0 -4px 40px #0001;pointer-events:none}
.corner-destination{position:absolute;bottom:var(--y);left:var(--x);margin:0 0 -24px -24px;width:48px;height:48px;border:1px solid #e6c4a04a;border-radius:50%;background:var(--circle);color:#f3e6d5;box-shadow:0 4px 18px #0002;cursor:pointer;animation:corner-arrive .32s cubic-bezier(.2,.7,.25,1) both;animation-delay:var(--delay);touch-action:manipulation}
.corner-destination[data-corner=ask]{--x:0px;--y:134px;--circle:#746049;--delay:0s}
.corner-destination[data-corner=library]{--x:67px;--y:116px;--circle:#7b5141;--delay:.025s}
.corner-destination[data-corner=journal]{--x:116px;--y:67px;--circle:#765d58;--delay:.05s}
.corner-destination[data-corner=account]{--x:134px;--y:0px;--circle:#5a5d4d;--delay:.075s}
.corner-symbol{display:block;font-size:23px;line-height:1;margin:auto;width:24px;height:24px}
.corner-label{position:absolute;left:calc(100% + 9px);top:50%;transform:translateY(-50%);font-size:14px;line-height:1.35;color:var(--ink);white-space:nowrap}
.corner-destination:focus-visible,.corner-launcher:focus-visible{outline:2px solid var(--accent);outline-offset:5px}
.corner-destination:active{filter:brightness(1.08)}
.corner-destination[data-corner=ask] .corner-label{left:50%;top:-25px;transform:translateX(-50%)}
#corner-menu.corner-closing{pointer-events:none;animation:corner-veil .22s ease reverse both}
.corner-closing .corner-destination{animation:corner-depart .22s ease both;animation-delay:0s}
@keyframes corner-depart{to{opacity:0;transform:translate(calc(-1 * var(--x)),var(--y)) scale(.65)}}
body{padding-bottom:calc(76px + env(safe-area-inset-bottom))}

/* Small paintings carry their own theme pigment, using the same footprint. */
.library-mini-pair{display:block}
.library-mini-pair .library-watercolor{width:100%;height:100%;margin:0;float:none;object-fit:contain;mix-blend-mode:normal}
.library-mini-pair .library-mini-day{display:none}
.library-mini-pair .library-mini-night{display:block}
:root[data-theme=light] .library-mini-day{display:block}
:root[data-theme=light] .library-mini-night{display:none}
@media(prefers-color-scheme:light){:root:not([data-theme=dark]) .library-mini-day{display:block}:root:not([data-theme=dark]) .library-mini-night{display:none}}
.library-mini-fallback{display:block}
@keyframes corner-arrive{from{opacity:0;transform:translate(calc(-1 * var(--x)),var(--y)) scale(.65)}to{opacity:1;transform:translate(0,0) scale(1)}}
@keyframes corner-veil{from{opacity:0}to{opacity:1}}
@media(prefers-color-scheme:light){:root:not([data-theme=dark]) .corner-fan::before{background:linear-gradient(130deg,#f5e8d7f5,#eee3d6ed)}:root:not([data-theme=dark]) .corner-destination{color:#4b3527;border-color:#84634926}:root:not([data-theme=dark]) [data-corner=ask]{--circle:#e4cba8}:root:not([data-theme=dark]) [data-corner=library]{--circle:#dcb29c}:root:not([data-theme=dark]) [data-corner=journal]{--circle:#d6bcbc}:root:not([data-theme=dark]) [data-corner=account]{--circle:#cbd0b8}}
:root[data-theme=light] .corner-fan::before{background:linear-gradient(130deg,#f5e8d7f5,#eee3d6ed)}
:root[data-theme=light] .corner-destination{color:#4b3527;border-color:#84634926}
:root[data-theme=light] [data-corner=ask]{--circle:#e4cba8}:root[data-theme=light] [data-corner=library]{--circle:#dcb29c}:root[data-theme=light] [data-corner=journal]{--circle:#d6bcbc}:root[data-theme=light] [data-corner=account]{--circle:#cbd0b8}
@media(prefers-reduced-motion:reduce){#corner-menu,.corner-destination{animation:none}.corner-mark{transition:none}}
@media(max-height:400px){.corner-fan{transform:scale(.86);transform-origin:0 100%}}
.library-watercolor{object-fit:contain;display:block;filter:none;opacity:1;pointer-events:none}
.library-art-lead{position:relative;isolation:isolate;margin:0;display:flex;align-items:flex-start;min-height:172px}
.library-art-title{position:relative;z-index:1;width:61%;padding:14px 0 18px}
.lens-entry .library-art-title h1{margin:0;font-size:clamp(27px,8.5vw,36px);line-height:1.13;overflow-wrap:break-word;hyphens:manual}
.library-title-compound{white-space:nowrap}
.library-art-person{display:block;margin:0 0 17px;color:var(--accent);font:17px/1.35 ui-serif,Georgia,"Times New Roman",serif}
.library-art-opening{position:absolute;right:-20px;top:-22px;width:235px;height:375px;margin:0;object-fit:contain;object-position:right top;z-index:0;mask-image:linear-gradient(to right,transparent,#000 24%),linear-gradient(to bottom,#000 58%,transparent 100%);mask-composite:intersect;-webkit-mask-image:linear-gradient(to right,transparent,#000 24%),linear-gradient(to bottom,#000 58%,transparent 100%);-webkit-mask-composite:source-in}
.lens-entry .library-art-champion + h2{position:relative;z-index:1;margin-top:12px;padding-top:18px;border-top:0}
.library-art-champion + h2::before{content:'';position:absolute;top:0;left:0;width:60%;height:1px;background:var(--line)}
.lens-entry .library-art-lead + p{position:relative;margin-top:16px}
/* A chapter's painting ends in a soft wash: the reading starts clear of it, so a portrait or the
   first words never merge into the painting (Satyartha, 2026-11-12, the Zeno page). */
.lens-entry.library-painted-page > .library-art-school + p{margin-top:34px}
.library-art-first-paragraph{position:relative;z-index:1}
.library-art-flow{float:right;width:98px;height:110px;shape-outside:polygon(0 0,100% 0,100% 100%,90% 100%,55% 65%,20% 32%);shape-margin:9px}
.library-art-school{min-height:302px}
.library-art-school .library-art-title{width:100%;padding:8px 0 0}
.library-art-school .library-art-opening{top:24px;left:-20px;width:calc(100% + 40px);height:310px;object-fit:cover;object-position:center 18%;mask-image:linear-gradient(to bottom,transparent,#000 15%,#000 70%,transparent);-webkit-mask-image:linear-gradient(to bottom,transparent,#000 15%,#000 70%,transparent)}
.library-art-champion:not([data-art=nadal]) .library-art-opening{top:-2px;height:350px;object-position:right center}
.library-art-champion:not([data-art=nadal]) ~ .library-art-first-paragraph .library-art-flow{width:130px;height:110px;shape-outside:polygon(0 0,100% 0,100% 100%,40% 100%,0 65%)}
.library-art-champion[data-art=nadal] .library-art-opening{width:205px;object-fit:cover;object-position:left top}
.lens-entry .library-art-school + h2{position:relative;margin-top:6px;padding-top:14px;border-top:0}
.library-art-school + h2::after{content:'';position:absolute;left:150px;right:0;top:27px;height:1px;background:var(--line)}
.library-art-chapter{min-height:142px}
.library-art-chapter .library-art-title{width:74%;padding:10px 0 28px}
.library-art-chapter .library-art-opening,.library-art-chapter .library-art-small{position:absolute;float:none;right:-20px;top:-10px;width:180px;height:215px;margin:0;object-fit:cover;object-position:65% center;opacity:.62;mask-image:linear-gradient(to right,transparent,#000 40%),linear-gradient(to bottom,#000 60%,transparent);mask-composite:intersect;-webkit-mask-image:linear-gradient(to right,transparent,#000 40%),linear-gradient(to bottom,#000 60%,transparent);-webkit-mask-composite:source-in}
.library-art-ideas{min-height:145px}
.library-art-ideas .library-art-title{width:72%;padding:10px 0 16px}
.library-art-ideas .library-art-small{width:130px;height:225px;right:-10px;top:10px;opacity:1;object-fit:contain;object-position:right top}
.library-art-ideas ~ .library-art-first-paragraph .library-art-flow{width:85px;height:85px}
.library-idea-paragraph{display:flow-root}
.library-idea-art{float:right;width:125px;height:200px;margin:0 -8px 8px 12px;shape-outside:ellipse(44% 48%);shape-margin:10px;mask-image:linear-gradient(to bottom,#000 78%,transparent);-webkit-mask-image:linear-gradient(to bottom,#000 78%,transparent)}
.library-idea-art[data-idea-art=stoic-view]{width:175px;height:170px;shape-outside:ellipse(48% 44%);object-position:right center}
.library-art-practice{display:block;min-height:0;margin-bottom:8px}
.library-art-practice .library-art-title{width:100%;padding:10px 0 0}
.library-art-practice .library-art-small{position:relative;top:auto;right:auto;width:calc(100% + 30px);height:190px;margin:0 -15px;opacity:1;object-fit:contain;object-position:center;mask-image:linear-gradient(to bottom,#000 75%,transparent);-webkit-mask-image:linear-gradient(to bottom,#000 75%,transparent)}
.library-art-unavailable{min-height:0}
.library-art-lead.library-art-unavailable .library-art-title{width:100%;padding:0}
.library-art-small{opacity:.67}
.library-art-thinker{float:right;width:142px;height:175px;margin:8px 0 20px 18px;shape-outside:ellipse(46% 48%);shape-margin:12px}
.library-career-section{position:relative;isolation:isolate}
.library-art-career{width:100%;height:205px;margin:auto}
.library-career-watermark{position:absolute;right:-20px;top:8px;width:260px;height:330px;opacity:.15!important;z-index:-1;mask-image:linear-gradient(to right,transparent,#000 35%),linear-gradient(to bottom,#000 65%,transparent);mask-composite:intersect;-webkit-mask-image:linear-gradient(to right,transparent,#000 35%),linear-gradient(to bottom,#000 65%,transparent);-webkit-mask-composite:source-in}
.library-career-scene{display:flow-root;margin:22px 0 28px}
.library-career-plate{width:100%;margin:-18px 0 0}
.library-career-plate .library-art-career{height:265px;object-position:center;mask-image:linear-gradient(to bottom,transparent,#000 14%,#000 72%,transparent);-webkit-mask-image:linear-gradient(to bottom,transparent,#000 14%,#000 72%,transparent)}
.library-career-plate figcaption{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%)}
.lens-entry::after{content:'';display:block;clear:both}
/* Career paintings (2026-10-11): full width after their paragraph, as in the approved previews.
   Only the current theme's painting is displayed, so the other is never downloaded. */
.library-career-painting{clear:both;margin:4px -18px 6px;padding:0}
.library-career-painting img{display:block;width:100%;height:auto}
.library-career-day{display:none!important}
:root[data-theme=light] .library-career-day{display:block!important}
:root[data-theme=light] .library-career-night{display:none!important}
@media(prefers-color-scheme:light){:root:not([data-theme=dark]) .library-career-day{display:block!important}:root:not([data-theme=dark]) .library-career-night{display:none!important}}
/* One-version paintings (Satyartha, 2026-10-24: "all card"): the only version always shows. In the
   OTHER theme it sits on its own paper card - a lit print on the night page (warm paper, slightly
   dimmed), or a night painting on its espresso card on the day page. No-card was tried and kept for
   none: paintings that use bare paper for highlights blotched white on the night page. */
.library-print-day .library-career-day,.library-print-night .library-career-night{display:block!important}
:root:not([data-theme=light]) .library-print-day .library-career-day{background:#efe7d8;border-radius:18px;padding:14px;filter:brightness(.86) saturate(.92);box-shadow:0 10px 30px rgba(0,0,0,.45)}
:root:not([data-theme=light]) .library-print-day{margin:10px 0 14px}
/* as specific as the rule that hides night paintings by day, so the only version still shows */
:root[data-theme=light] .library-print-night .library-career-night{display:block!important}
@media(prefers-color-scheme:light){:root:not([data-theme=dark]) .library-print-night .library-career-night{display:block!important}}
:root[data-theme=light] .library-print-night .library-career-night{background:#151009;border-radius:18px;padding:14px;box-shadow:0 10px 26px rgba(40,30,20,.25)}
:root[data-theme=light] .library-print-night{margin:10px 0 14px}
@media(prefers-color-scheme:light){:root:not([data-theme=dark]) .library-print-day .library-career-day{background:none;border-radius:0;padding:0;filter:none;box-shadow:none}:root:not([data-theme=dark]) .library-print-day{margin:4px -18px 6px}:root:not([data-theme=dark]) .library-print-night .library-career-night{background:#151009;border-radius:18px;padding:14px;box-shadow:0 10px 26px rgba(40,30,20,.25)}:root:not([data-theme=dark]) .library-print-night{margin:10px 0 14px}}
.library-art-thumb{flex:0 0 54px;width:54px;height:64px;margin:0 12px 0 0}
.library-row-illustrated{align-items:center}
.library-row-illustrated>span:first-of-type{flex:1;min-width:0}
.library-row-illustrated>.library-mini-pair.library-art-thumb{flex:0 0 54px;min-width:54px}
.library-row-illustrated>.library-mini-pair+span{flex:1;min-width:0}
@media(max-width:340px){.library-row-illustrated>.library-mini-pair.library-art-thumb{flex-basis:44px;min-width:44px}}
/* Selected 5B/6B: left bust, close introduction, then full-width reading. */
.library-thinker-paragraph{position:relative;isolation:isolate}
.library-thinker-intro{position:relative;display:grid;grid-template-columns:minmax(0,42%) minmax(0,1fr);gap:10px;align-items:center;margin:0 0 12px}
.library-thinker-intro>.library-art-thinker{position:relative;z-index:0;float:none;width:100%;height:auto;aspect-ratio:1;margin:0;shape-outside:none;shape-margin:0;overflow:visible}
/* The bust keeps its size; its wider painted canvas flows beneath the words. */
.library-thinker-intro>.library-art-thinker .library-watercolor{position:absolute;left:0;top:0;width:150%;height:100%;max-width:none;object-fit:contain}
.library-thinker-caption{position:relative;z-index:1;display:block;font-size:16px;line-height:1.5}
.library-thinker-reading{position:relative;z-index:1;display:inline;font-size:inherit;line-height:inherit}
.lens-entry .library-thinker-caption .name{display:block;margin-bottom:4px;color:var(--ink);font:500 21px/1.25 ui-serif,Georgia,"Times New Roman",serif}
@media(max-width:340px){.lens-entry .library-thinker-caption .name{font-size:18px}}
/* A sentence that names the person part-way through ("That man is Antisthenes, and …") keeps the
   name inside the sentence, styled as it is in the reading; only an opening name is a heading. */
.lens-entry .library-thinker-caption.library-caption-mid .name{display:inline;margin:0;font:inherit;color:var(--accent)}
.library-thinker-no-art{grid-template-columns:1fr}
.library-portrait-note{display:block;margin-top:5px;color:var(--ink-2);font:italic 12px/1.4 ui-serif,Georgia,"Times New Roman",serif}
/* 5C/6C: hand right of the idea; its wider washes extend left beneath the text. */
.library-control-intro{position:relative;isolation:isolate;display:grid;grid-template-columns:minmax(0,60%) minmax(0,1fr);gap:8px;align-items:center;margin:26px 0 12px}
.library-control-intro>p.idea{position:relative;z-index:1;margin:0;padding:0;border:0;border-radius:0;background:transparent;box-shadow:none}
.library-control-intro>.library-control-art{position:relative;z-index:0;display:block;width:100%;aspect-ratio:.57;overflow:visible}
.library-control-art .library-watercolor{position:absolute;right:0;top:0;width:calc(250% + 20px);max-width:none;height:100%;object-fit:contain;opacity:1;filter:none;mask-image:none;-webkit-mask-image:none}
.library-control-no-art{grid-template-columns:1fr}
/* View-above landscape below the words; its circle sits right and wash flows up. */
.library-view-intro{position:relative;isolation:isolate;margin:26px 0 12px}
.library-view-intro>p.idea{position:relative;z-index:1;width:100%;margin:0;padding:0;border:0;border-radius:0;background:transparent;box-shadow:none}
.library-view-intro>.library-view-art{position:relative;z-index:0;display:block;width:100%;aspect-ratio:1.5;margin-top:-8%;margin-bottom:-12%}
.library-view-art .library-watercolor{width:100%;height:100%;max-width:none;object-fit:contain;opacity:1;filter:none;mask-image:none;-webkit-mask-image:none}
/* 5D practice vignette: full-width title, real paint between title and reading. */
.library-practice-painting{position:relative;isolation:isolate;margin:-12px 0 -22px}
.library-practice-art{position:relative;display:block;width:100%;aspect-ratio:1.5}
.library-practice-art .library-watercolor{width:100%;height:100%;object-fit:contain;opacity:1;filter:none;mask-image:none;-webkit-mask-image:none}
.library-practice-art[data-small-art="existential-practice"]{width:calc(100% + 40px);margin-left:-20px;overflow:hidden}
.library-practice-art[data-small-art="existential-practice"] .library-watercolor{position:absolute;left:-5%;top:-5%;width:110%;height:110%}
.library-practice-painting:has([data-small-art="existential-practice"]){margin-top:calc(-12px - 7.2cqw);z-index:0}
.lens-entry h1:has(+ .library-practice-painting [data-small-art="existential-practice"]){position:relative;z-index:1}
.library-integrated-painting{margin-top:calc(-12px - 7.2cqw);margin-bottom:0;z-index:0}
.library-integrated-painting .library-practice-art{width:calc(100% + 40px);margin-left:-20px;overflow:hidden}
.library-integrated-painting .library-watercolor{position:absolute;left:-5%;top:-5%;width:110%;height:110%}
.lens-entry h1:has(+ .library-integrated-painting){position:relative;z-index:1}
.library-practice-painting+p{position:relative;z-index:1}
/* Four next school openings use their own paint, with full-width titles above it. */
.library-art-school-paired{display:block;min-height:0}
.library-art-school-paired .library-art-title{width:100%;padding:8px 0 0}
.library-art-school-paired .library-school-pair{position:relative;z-index:0;width:100%;aspect-ratio:1;margin:-16% 0 -12%}
.library-art-school-paired .library-school-pair .library-watercolor{width:100%;height:100%;max-width:none;object-fit:contain;opacity:1;filter:none;mask-image:none;-webkit-mask-image:none;mix-blend-mode:normal}
.library-art-school-paired[data-art="existentialism"] .library-school-pair{aspect-ratio:5/6;margin:-28% 0 -16%}
.library-art-school-paired[data-art="existentialism"] .library-watercolor{object-fit:cover}
.library-art-school-paired[data-art="greeks"] .library-school-pair,
.library-art-school-paired[data-art="ubuntu"] .library-school-pair{aspect-ratio:5/6;margin:-28% 0 -23%}
.library-art-school-paired[data-art="greeks"] .library-watercolor,
.library-art-school-paired[data-art="ubuntu"] .library-watercolor{object-fit:cover}
/* Pale natural edge washes enter these headings; solid objects remain below. */
.library-art-school-paired[data-art="confucian"] .library-school-pair{aspect-ratio:1;margin:-20% 0 -8%}
.library-art-school-paired[data-art="samkhya"] .library-school-pair{aspect-ratio:1;margin:-27% 0 -8%}
.library-art-school-paired[data-art="confucian"] .library-watercolor,
.library-art-school-paired[data-art="samkhya"] .library-watercolor{object-fit:cover}

/* Natural pale wash meets these titles; source objects stay below the words. */
.library-art-school-paired[data-art="islamic"] .library-school-pair{aspect-ratio:1;margin:-14% 0 -8%}
.library-art-school-paired[data-art="nietzsche"] .library-school-pair{aspect-ratio:1;margin:-20% 0 -8%}
.library-art-school-paired[data-art="islamic"] .library-watercolor,
.library-art-school-paired[data-art="nietzsche"] .library-watercolor{object-fit:cover}
.library-art-school-paired.library-art-unavailable .library-art-title{padding:0}
.library-art-school-paired[data-art="modern"] .library-school-pair{aspect-ratio:1;margin:-24% 0 -8%}
/* Original Library board: title/name left, small painting right, prose below. */
.library-row.library-row-portrait{display:grid;grid-template-columns:minmax(0,1fr) 96px 8px;column-gap:10px;row-gap:0;align-items:center}
.library-row-portrait>span:first-of-type{display:contents}
.library-row-portrait .library-name{grid-column:1;grid-row:1;align-self:end}
.library-row-portrait .library-person{grid-column:1;grid-row:2;align-self:start}
.library-row-portrait .library-summary{grid-column:1/-1;grid-row:3;margin-top:8px}
.library-row-portrait>.library-mini-pair.library-art-thumb{grid-column:2;grid-row:1/3;width:96px;min-width:0;height:96px;margin:0}
.library-row-portrait>.pocket-chev{grid-column:3;grid-row:1/3;display:block}
/* A single painting (no night pair) sits in the same place as Nadal's pair (2026-10-18). */
.library-row-portrait>img.library-art-thumb{grid-column:2;grid-row:1/3;width:96px;height:96px;min-width:0;margin:0;object-fit:contain}
.library-row-portrait .library-name{padding-top:2px}
/* A school has no "From the career of" line: its title sits level with the middle of the painting. */
.library-row-noperson .library-name{grid-row:1/3;align-self:center}
@media(max-width:340px){.library-row-portrait{grid-template-columns:minmax(0,1fr) 80px 8px}.library-row-portrait>.library-mini-pair.library-art-thumb,.library-row-portrait>img.library-art-thumb{width:80px;height:80px}}
/* Schools, mockup F (Satyartha, 2026-10-22: "i like F"): every school in the SAME wide window,
   full width, the painting filling it; the window's edges fade into the page. The sides fade
   only briefly and the painting is drawn a little larger than the window, so its own ragged paper
   edge falls outside and the paint reaches the text edge on BOTH sides ("the left of the painting
   fades out very quickly … doesnt align with the school name"). Name and arrow under it. */
.library-row.library-row-strip{display:grid;grid-template-columns:minmax(0,1fr) 10px;column-gap:10px;row-gap:0;align-items:center}
.library-row-strip>span:not(.library-school-strip){display:contents}
.library-row-strip>.library-school-strip{grid-column:1/-1;grid-row:1;display:block;position:relative;overflow:hidden;width:100%;height:132px;margin:0 0 10px;
  -webkit-mask-image:linear-gradient(to right,transparent,#000 5%,#000 95%,transparent),linear-gradient(to bottom,transparent,#000 16%,#000 84%,transparent);
  -webkit-mask-composite:source-in;
  mask-image:linear-gradient(to right,transparent,#000 5%,#000 95%,transparent),linear-gradient(to bottom,transparent,#000 16%,#000 84%,transparent);
  mask-composite:intersect}
.library-mini-pair.library-school-strip .library-watercolor{position:absolute;left:-7%;top:-7%;width:114%;height:114%;max-width:none;object-fit:cover}
.library-row-strip .library-name{grid-column:1;grid-row:2}
.library-row-strip>.pocket-chev{grid-column:2;grid-row:2;display:block}
.library-row-strip .library-summary{grid-column:1/-1;grid-row:3;margin-top:3px}
.lens-entry{container-type:inline-size}
/* Enlarged text/very narrow windows need a full-width title. The small painting stays
   at the top corner, never becomes a full-width block below the heading. */
@container(max-width:260px){.library-art-lead:not(.library-art-unavailable) .library-art-title{width:100%;padding-top:12px}.library-art-champion .library-art-opening{width:48%;height:285px;right:-20px;opacity:.24}.library-art-champion + h2::before{width:100%}.library-art-flow{display:none}.library-art-chapter .library-art-opening,.library-art-chapter .library-art-small{opacity:.2}.library-art-person{margin-bottom:12px}}
.library-photo{object-fit:cover;object-position:50% 12%;border-radius:14px;mask-image:linear-gradient(to bottom,#000 65%,transparent);-webkit-mask-image:linear-gradient(to bottom,#000 65%,transparent)}
/* 12A/B: the reading sits above a single painted page, without a float spacer.
   Fade the perimeter and lower wash, not the whole portrait. Night needs its own
   soft pigment edge: opaque pale speckles cannot blend with dark paper. */
.lens-entry.library-art-overlap{position:relative;isolation:isolate}
.library-art-overlap > :not(.library-art-backdrop){position:relative;z-index:1}
.library-art-backdrop{position:absolute;top:-48px;left:0;right:-20px;height:370px;z-index:0;overflow:hidden;pointer-events:none}
.library-art-overlap .library-art-lead{isolation:auto;min-height:172px}
.lens-entry.library-art-overlap .library-art-title{width:100%}
.library-art-overlap .library-art-title h1{max-width:70%}
.library-art-overlap .library-art-unavailable h1{max-width:100%}
.library-art-backdrop > .library-art-opening{top:0;right:-22px;width:235px;height:auto;object-fit:contain;object-position:right top;z-index:0;filter:saturate(.76) contrast(.91) brightness(.9);mask-image:radial-gradient(ellipse 61% 68% at 65% 39%,#000 28%,#000b 53%,#0003 76%,transparent 98%),linear-gradient(to bottom,transparent,#000 18%,#000 48%,#000b 70%,transparent 100%);-webkit-mask-image:radial-gradient(ellipse 61% 68% at 65% 39%,#000 28%,#000b 53%,#0003 76%,transparent 98%),linear-gradient(to bottom,transparent,#000 18%,#000 48%,#000b 70%,transparent 100%)}
@media(prefers-color-scheme:light){:root:not([data-theme=dark]) .library-art-backdrop{mix-blend-mode:multiply}:root:not([data-theme=dark]) .library-art-backdrop > .library-art-opening{filter:saturate(.82) contrast(.92)}}
:root[data-theme=light] .library-art-backdrop{mix-blend-mode:multiply}
:root[data-theme=light] .library-art-backdrop > .library-art-opening{filter:saturate(.82) contrast(.92)}
@container(max-width:260px){.library-art-overlap .library-art-title h1{max-width:100%}.library-art-backdrop > .library-art-opening{width:60%;opacity:.24}.library-art-overlap .library-art-lead{min-height:0}}
@media(max-width:340px){.library-art-champion .library-art-title{width:67%}.library-art-champion .library-art-opening{width:185px;height:320px}.library-art-champion[data-art=nadal] .library-art-opening{width:165px;object-position:left top}.library-art-champion:not([data-art=nadal]) ~ .library-art-first-paragraph .library-art-flow{width:90px;height:100px}.library-art-flow{width:65px;height:85px}.library-art-thumb{width:44px;flex-basis:44px;margin-right:8px}}
@media(max-width:340px){.library-art-backdrop > .library-art-opening{width:185px}}

/* Two-opening pilot: selected 12A/B face clearance and soft painted page edges.
   Menu styles above are owned by the separate Opus menu task. */
.library-art-overlap .library-art-title h1{font-size:clamp(26px,8.2vw,32px);max-width:66%;line-height:1.13}
.library-art-overlap .library-art-lead{min-height:174px}
.library-art-backdrop{top:-52px;height:380px;right:-20px}
.library-art-backdrop > .library-art-opening{width:235px;right:-32px;filter:none;mask-image:linear-gradient(to right,transparent 0%,#000 28%),linear-gradient(to bottom,#000 53%,transparent 96%);mask-composite:intersect;-webkit-mask-image:linear-gradient(to right,transparent 0%,#000 28%),linear-gradient(to bottom,#000 53%,transparent 96%);-webkit-mask-composite:source-in}
:root[data-theme=light] .library-art-backdrop > .library-art-opening{filter:none}
@media(prefers-color-scheme:light){:root:not([data-theme=dark]) .library-art-backdrop > .library-art-opening{filter:none}}
@media(max-width:340px){.library-art-overlap .library-art-title h1{font-size:26px;max-width:70%}.library-art-backdrop > .library-art-opening{width:175px;right:-16px}}
@container(max-width:260px){.library-art-overlap .library-art-title h1{max-width:100%}.library-art-backdrop > .library-art-opening{width:60%;opacity:.18}.library-art-overlap .library-art-lead{min-height:0}}

/* 5A school opening: complete architecture, title in front of its faint upper wash. */
.library-art-school[data-art=stoicism][data-page=opening]{min-height:310px}
.library-art-school[data-art=stoicism][data-page=opening] .library-art-opening{top:-4px;left:-20px;width:calc(100% + 40px);height:320px;object-fit:cover;object-position:center top;mask-image:linear-gradient(to bottom,transparent 0%,#000 17%,#000 68%,transparent 99%);-webkit-mask-image:linear-gradient(to bottom,transparent 0%,#000 17%,#000 68%,transparent 99%)}
:root[data-theme=light] .library-art-school[data-art=stoicism][data-page=opening] .library-art-opening{mix-blend-mode:multiply}
@media(prefers-color-scheme:light){:root:not([data-theme=dark]) .library-art-school[data-art=stoicism][data-page=opening] .library-art-opening{mix-blend-mode:multiply}}
:root[data-theme=dark] .library-art-school[data-art=stoicism][data-page=opening] .library-art-opening{filter:brightness(.8) contrast(.92);mask-image:radial-gradient(ellipse 65% 74% at 50% 46%,#000 48%,#000b 70%,transparent 100%),linear-gradient(to bottom,transparent 0%,#000 17%,#000 68%,transparent 99%);mask-composite:intersect;-webkit-mask-image:radial-gradient(ellipse 65% 74% at 50% 46%,#000 48%,#000b 70%,transparent 100%),linear-gradient(to bottom,transparent 0%,#000 17%,#000 68%,transparent 99%);-webkit-mask-composite:source-in}
@media(prefers-color-scheme:dark){:root:not([data-theme=light]) .library-art-school[data-art=stoicism][data-page=opening] .library-art-opening{filter:brightness(.8) contrast(.92);mask-image:radial-gradient(ellipse 65% 74% at 50% 46%,#000 48%,#000b 70%,transparent 100%),linear-gradient(to bottom,transparent 0%,#000 17%,#000 68%,transparent 99%);mask-composite:intersect;-webkit-mask-image:radial-gradient(ellipse 65% 74% at 50% 46%,#000 48%,#000b 70%,transparent 100%),linear-gradient(to bottom,transparent 0%,#000 17%,#000 68%,transparent 99%);-webkit-mask-composite:source-in}}

/* 2026-10-04 (Opus), Satyartha: "make it just like the original render". The Nadal and
   Stoicism openings show the paintings lifted straight out of the selected renders
   (tools/extract_reference_art.py): 12A / 12B for Nadal, 5A / 6A for Stoicism. Each theme
   shows its own render's painting at that render's size and place. Sizes use cqw (the
   article is a size container), so a 320px phone gets the same composition, smaller.
   The earlier mask, alpha-feather, wash and sky layers stay removed. */
.library-art-backdrop > .library-art-opening,.library-art-backdrop > .library-art-night{position:absolute;right:0;height:auto;object-fit:contain;filter:none;mask-image:none;-webkit-mask-image:none;mix-blend-mode:normal;opacity:1}
/* 12A: the crop is 236px wide in a 390px phone; "Rafael Nadal" sits 80px below its top. */
.library-art-backdrop > .library-art-day{width:67.4cqw;top:calc(70px - 22.85cqw)}
/* 12B: 220px wide; the name sits 86px below its top. */
.library-art-backdrop > .library-art-night{width:62.9cqw;top:calc(70px - 24.6cqw)}
:root[data-theme=light] .library-art-backdrop{mix-blend-mode:normal}
@media(prefers-color-scheme:light){:root:not([data-theme=dark]) .library-art-backdrop{mix-blend-mode:normal}}
/* Stoicism uses the founder-selected day composition in both themes;
   title overlap and reading clearance are identical when the theme changes. */
.library-art-school[data-art=stoicism][data-page=opening] .library-art-opening,.library-art-school[data-art=stoicism][data-page=opening] .library-art-night{position:absolute;left:-20px;width:calc(100cqw + 40px);height:auto;object-fit:contain;filter:none;mask-image:none;-webkit-mask-image:none;mix-blend-mode:normal}
.library-art-school[data-art=stoicism][data-page=opening] .library-art-day{top:-22px}
.library-art-school[data-art=stoicism][data-page=opening] .library-art-night{top:-22px}
.library-art-school[data-art=stoicism][data-page=opening]{min-height:calc((100cqw + 40px) * 1.108 - 18px)}
:root[data-theme=dark] .library-art-school[data-art=stoicism][data-page=opening]{min-height:calc((100cqw + 40px) * 1.108 - 18px)}
@media(prefers-color-scheme:dark){:root:not([data-theme=light]) .library-art-school[data-art=stoicism][data-page=opening]{min-height:calc((100cqw + 40px) * 1.108 - 18px)}}
.library-art-night{display:block;pointer-events:none;z-index:0}
.library-art-day{visibility:hidden}
:root[data-theme=light] .library-art-day{visibility:visible}
:root[data-theme=light] .library-art-night{visibility:hidden}
@media(prefers-color-scheme:light){:root:not([data-theme=dark]) .library-art-day{visibility:visible}:root:not([data-theme=dark]) .library-art-night{visibility:hidden}}
@container(max-width:260px){.library-art-backdrop > .library-art-day,.library-art-backdrop > .library-art-night{opacity:.24}}
/* Every other champion's opening in Nadal's layout (2026-10-18). Their portraits are single, compact
   paintings, so they sit lower and smaller than Nadal's composed render: below the header, beside the
   title, fading out on the side that faces the words so the title always reads in front. */
.library-art-overlap[data-champion]:not([data-champion=nadal]) .library-art-backdrop > .library-art-opening{
  width:47cqw;top:58px;right:-4px;
  mask-image:linear-gradient(to right,transparent 0%,#000 30%),linear-gradient(to bottom,#000 72%,transparent 100%);mask-composite:intersect;
  -webkit-mask-image:linear-gradient(to right,transparent 0%,#000 30%),linear-gradient(to bottom,#000 72%,transparent 100%);-webkit-mask-composite:source-in}
.library-art-overlap[data-champion]:not([data-champion=nadal]) .library-art-title h1{max-width:56%}
.library-art-overlap[data-champion]:not([data-champion=nadal]) .library-art-lead{min-height:190px}
/* Paintings are part of the page (Satyartha, 2026-10-25: long-press "download" should not be offered): touches pass through them, no callout. */
.library-watercolor,.library-career-painting img,.ac-gate-art img{pointer-events:none;-webkit-touch-callout:none;-webkit-user-select:none;user-select:none}
/* The Library's words cannot be selected or copied (Satyartha, 2026-10-26: "make text in our library non copyable"). */
#library-content{-webkit-user-select:none;user-select:none;-webkit-touch-callout:none}
/* Champion page (Satyartha, 2026-10-31: "Make champion name bigger ... larger than The Quiet Genius"):
   the champion's name is the page's biggest line and the lens title sits under it in the accent. */
.library-art-title .library-art-person{margin:0;color:var(--ink);font:500 clamp(30px,9.2vw,36px)/1.1 ui-serif,Georgia,"Times New Roman",serif;letter-spacing:-.01em}
.lens-entry .library-art-title .library-art-person + h1{margin-top:6px;color:var(--accent);font:400 21px/1.3 ui-serif,Georgia,"Times New Roman",serif;letter-spacing:0}
.library-art-overlap[data-champion]:not([data-champion=nadal]) .library-art-person{max-width:56%}
/* Champions list (2026-10-31): the row keeps its height and portrait; only the words grow into the space. */
.library-row-portrait .library-name{font-size:23px;line-height:1.15}
.library-row-portrait .library-person{margin-top:5px;font-size:13.5px}
@media(max-width:340px){.library-row-portrait .library-name{font-size:19px}.library-row-portrait .library-person{margin-top:3px;font-size:12.5px}}
/* Library speaker (2026-11-12, Satyartha, round-2 choice B): a speaker in a circle, without the word
   Listen, at the right of the page's first paragraph, with the words going round it. */
.library-speaker-slot{float:right;margin:-3px 0 6px 14px;line-height:0}
.listen.library-speaker{width:44px;height:44px;padding:0;gap:0;border-radius:50%}
.library-speaker-slot.library-speaker-alone{float:none;display:flex;justify-content:flex-end;margin:14px 0 4px}