/* The color page, the name page and the color sheet — DESIGN-SYSTEM.md §11-12 ("Article", "Color page",
   "The color sheet"). Scoped to js/explore.js's colorPage(), js/names.js's namePage() and js/swatch.js's
   nameSheet(). Reuses shared primitives (.lead, .fine, .sec, .kin, .icon-btn, .lk-list…) from app.css where
   they already match the new system; everything new lives here so app.css stays untouched.
   Loaded after every other stylesheet, so equal-specificity rules here win over app.css's older ones. */

:root{
  --cp-surface-2:#1F1D18;   /* floating controls over a hero: solid, never glass (DESIGN-SYSTEM §1 rule 2) */
  --cp-rule:rgba(236,232,223,.14);
}

/* A color/name page is exactly as tall as its content: the shared .screen rule forces min-height:100dvh,
   which is right for a deck or a drill, but on a short article (few facets, no connections) it leaves a
   slab of dead ground after the last line (research/DESIGN-AUDIT.md problem #8). */
.screen.cp-page{min-height:0}
/* David, 2026-10-09: a faint tint of the page's own color instead of flat black (progressive enhancement --
   unsupported browsers just keep the plain dark ground; the mix is light enough that text contrast is unaffected) */
.screen.cp-page{background:color-mix(in srgb, var(--c,transparent) 4%, var(--ground))}

/* ---------- the full-bleed hero ---------- */
.cp-page .cp-hero{
  position:relative;
  /* bleed past the screen's own top-and-side padding, so the swatch reaches every edge */
  /* (a cp-page is always an .article, whose screen has no top padding: app.css .article. Pulling the cover up by the
     safe area again put it 59 + 12 px above the screen on an iPhone, so its ‹ and Close sat on the status bar) */
  margin:0 calc(-1 * var(--g)) 0;
  width:calc(100% + var(--g) * 2);
  border-radius:0;
  padding:16px var(--g) 22px;
}
.cp-chip{display:block;font:italic 400 18px/1.25 var(--serif);opacity:.85}
.cp-hero h1{margin-top:4px}

/* The page's first screen IS the color, full viewport, no chrome but the way back (David, 2026-10-07: "any
   color in home, you should be able to click it to make it full screen with the hex on the bottom left").
   The hero already bleeds to every edge (.cp-page .cp-hero above); at 100dvh its bottom edge lands exactly on
   the viewport's own bottom, so the rest of the page (primary row, strip, shelves…) sits one scroll away. */
/* David, 2026-10-09: the lede's first line should peek above the fold -- about half the screen, not nearly all of it */
.cp-hero-full{height:min(58svh,540px);min-height:420px}
.cp-close{position:absolute;top:calc(var(--top) + 14px);left:20px;width:36px;height:36px;display:grid;place-items:center;z-index:2;transition:transform .2s var(--spring)}
.cp-close:active{transform:scale(.88)}
.cp-close svg{width:24px;height:24px}
.cp-hero-foot{display:flex;flex-direction:column;align-items:flex-start;gap:2px}
/* two classes deep, to outrank app.css's ".c-hero .mono" (same specificity, loads earlier) rather than lose
   to it: .mono's font shorthand would otherwise quietly win back the font-size this needs. */
.cp-hero-foot .cp-hex{background:none;border:0;padding:2px 0;margin-top:4px;font-size:13px;letter-spacing:.04em;opacity:.8;text-decoration:underline;text-decoration-color:currentColor;text-decoration-thickness:1px;text-underline-offset:3px}
.cp-scroll-hint{position:absolute;right:22px;bottom:calc(var(--bottom) + 18px);opacity:.6;animation:cpBob 1.8s ease-in-out infinite;transform:rotate(180deg)}
.cp-scroll-hint svg{display:block;width:18px;height:18px}
@keyframes cpBob{0%,100%{transform:rotate(180deg) translateY(0)}50%{transform:rotate(180deg) translateY(-6px)}}
@media (prefers-reduced-motion:reduce){.cp-scroll-hint{animation:none}}

/* ---------- primary row: the one filled button, plus save/share ---------- */
.cp-primary-row{display:flex;align-items:center;gap:10px;margin-top:20px}
.cp-primary{flex:1;display:flex;align-items:center;gap:10px;height:58px;padding:0 22px;background:var(--paper);color:var(--paper-ink);border-radius:var(--r-pill);font:400 24px/1 var(--serif);letter-spacing:-.01em}
.cp-primary em{font:italic 400 17px/1 var(--serif);color:var(--paper-soft);font-style:italic;margin-left:2px}
.cp-primary svg{width:18px;height:18px;margin-left:auto;flex:none}
.cp-icon{width:44px;height:44px;flex:none}

/* ---------- the cover's compact action row (David, 2026-10-09): Learn it, Pair with…, the heart, all on the
   color itself -- legible on very light, very dark, grey and vivid covers, never a bright white slab ---------- */
.rp-actrow{display:flex;align-items:center;gap:8px;margin-top:16px;flex-wrap:wrap}
.rp-learnpill{display:flex;align-items:center;gap:7px;height:40px;padding:0 16px;border-radius:var(--r-pill);font:500 15px/1 var(--sans);background:rgba(20,19,17,.88);color:#F3F0EA;flex:none}
[data-ink="light"] .rp-learnpill{background:rgba(20,19,17,.88);color:#F3F0EA}
[data-ink="dark"] .rp-learnpill{background:rgba(255,255,255,.86);color:#1A1814}
.rp-learnpill em{font:italic 400 17px/1 var(--serif);opacity:.72;font-style:italic}
.rp-learnpill-known{opacity:.86}
.rp-learnpill svg{width:15px;height:15px;flex:none}
.rp-actrow .sx-pairbtn{margin:0;flex:none}
.rp-heart{width:40px;height:40px;flex:none;border-radius:50%;background:rgba(20,19,17,.5);color:inherit}
[data-ink="dark"] .rp-heart{background:rgba(255,255,255,.4)}
.rp-heart.saved svg{fill:currentColor}
/* 320px: Learn it + heart keep priority; Pair with becomes the row's third item and may wrap alone */
@media (max-width:339px){.rp-actrow{row-gap:8px}.rp-learnpill{order:1}.rp-heart{order:2}.sx-pairbtn{order:3;flex-basis:100%}}
/* the liking moment: the heart fills with the page's own color, anticipation -> impact -> settle */
.rp-heart.rp-like-go{animation:rpHeartLike .5s var(--spring,ease)}
@keyframes rpHeartLike{0%{transform:scale(1)}30%{transform:scale(.82)}55%{transform:scale(1.22);background:var(--rp-heart-c);color:#fff}100%{transform:scale(1);background:var(--rp-heart-c);color:#fff}}
.rp-heart.saved{background:var(--rp-heart-c,rgba(20,19,17,.5))}
@media (prefers-reduced-motion:reduce){.rp-heart.rp-like-go{animation:none;background:var(--rp-heart-c);color:#fff}}
/* the def line's tappable neighbor (opens Family's Compare, pinned on it) */
.rp-def-link{display:inline;color:inherit;font:inherit;text-decoration:underline;text-decoration-thickness:1px;text-decoration-color:currentColor;text-underline-offset:2px;opacity:.95}

/* ---------- the focus view (David, 2026-10-09): tap the cover's bare fill to take the color full screen ---------- */
.rp-focus{position:fixed;inset:0;z-index:400;background:var(--c);display:flex;align-items:center;justify-content:center;opacity:0;transform:scale(.06);transform-origin:var(--ox,50%) var(--oy,50%);transition:opacity .4s var(--ease,ease),transform .4s var(--ease,ease)}
.rp-focus.on{opacity:1;transform:scale(1)}
.rp-focus.closing{opacity:0}
/* the quiet corner tag (David, 2026-10-09; and 2026-10-10: "full-screen color shouldn't show the name in the
   middle, keep it only in the corner" -- the old big centered .rp-focus-name and its dim-after-a-beat fade are
   gone; this corner tag is the one label the color field ever shows now). Name + hex, bottom-left, safe-area
   aware. Restyled 2026-10-09 (David: "the color's name is in a small, ugly font -- not as pretty as before going
   full screen"): the app's own display type, not a small mono line -- the name in the serif display face at a
   generous size, the hex quietly beneath it in the sans at caption size, generous margins so it reads as a
   label, not a cramped corner note. */
.rp-focus-tag{position:absolute;left:calc(env(safe-area-inset-left,0px) + 24px);right:calc(env(safe-area-inset-right,0px) + 24px);bottom:calc(env(safe-area-inset-bottom,0px) + 28px);margin:0;pointer-events:none;text-align:left;opacity:.9}
.rp-focus-tag-name{margin:0;font:400 clamp(34px,9vw,44px)/1.05 var(--serif);letter-spacing:-.01em;text-wrap:balance}
.rp-focus-tag-hex{margin:6px 0 0;font:400 13px/1.3 var(--sans);letter-spacing:.06em;opacity:.65;text-transform:uppercase;font-variant-numeric:tabular-nums}
.rp-focus[data-ink="dark"]{color:#141311}.rp-focus[data-ink="light"]{color:#fff}
@media (prefers-reduced-motion:reduce){.rp-focus{transform:none;transition:opacity .22s ease}.rp-focus.on{transform:none}}
/* the same view, 2 or more colors at once (David, 2026-10-09: "same full-screen preview for a pair or more" --
   js/setpage.js): full-height bands side by side, or stacked full-width when there are 4+ (or the viewport is too
   narrow for a sliver of a band to read) -- background and the transform-origin scale-in still belong to .rp-focus
   itself, each band just paints its own fill and carries its own corner tag, inked by its own contrast */
.rp-focus.cf-multi{background:var(--ground);flex-direction:row;align-items:stretch}
.rp-focus.cf-multi.cf-stack{flex-direction:column}
.cf-band{position:relative;flex:1;min-width:0;min-height:0;background:var(--c)}
.cf-band[data-ink="dark"]{color:#141311}.cf-band[data-ink="light"]{color:#fff}
.cf-band .rp-focus-tag{opacity:.65;left:calc(env(safe-area-inset-left,0px) + 16px);right:calc(env(safe-area-inset-right,0px) + 16px);bottom:calc(env(safe-area-inset-bottom,0px) + 18px)}
/* a side-by-side band is narrower than the full viewport a vw-based clamp assumes, so its name shrinks to fit a
   pair or trio instead of overflowing/wrapping badly -- stacked (full-width) bands keep the fuller size. Still
   the same serif display face either way, just scaled to the space. */
.cf-band .rp-focus-tag-name{font-size:clamp(20px,6vw,28px)}
.rp-focus.cf-stack .cf-band .rp-focus-tag-name{font-size:clamp(28px,9vw,40px)}
@media (prefers-reduced-motion:reduce){.rp-focus.cf-multi{transform:none}}

/* ---------- the look-alike strip: no label, the diff line right under it ---------- */
.cp-strip-sec{margin-top:26px}
.cp-strip{display:flex;gap:2px;height:64px;border-radius:var(--r-1);overflow:hidden;cursor:pointer}
.cp-strip>div{flex:1;display:flex;align-items:center;padding:0 12px;background:var(--c)}
.cp-strip>div:first-child{flex:1.6}
.cp-strip b{font:400 18px/1.05 var(--serif);text-wrap:balance}
.cp-strip div[data-ink="dark"]{color:#141311}.cp-strip div[data-ink="light"]{color:#fff}
.cp-diff{font:400 24px/1.15 var(--serif);letter-spacing:-.01em;margin-top:14px;text-wrap:pretty}

/* ---------- empty hub shelves collapse to nothing, never a gap ---------- */
.cp-page .gl-in:empty,.cp-page .fx-in:empty,.cp-page .bt-rows:empty,.cp-page .gm-rows:empty,.cp-page .arch-rows:empty,
.cp-page [id^="rc-painters-"]:empty,.cp-page [id^="rc-ww-"]:empty,.cp-page [id^="rc-pair-"]:empty{display:none;margin:0}

/* ---------- the quiet Codes row (tier 4, collapsed with Language/History/Sources) ---------- */
.cp-codes{display:flex;flex-direction:column}
.cp-code-row{display:flex;align-items:baseline;justify-content:space-between;width:100%;padding:12px 0;border-bottom:1px solid var(--cp-rule);text-align:left}
.cp-code-row:last-child{border-bottom:0}
.cp-code-row span{font:400 18px/1 var(--serif);color:var(--soft)}
.cp-code-row b{font:500 13px/1 var(--mono);letter-spacing:.04em;color:var(--ink)}
.cp-codes-fine{margin-top:12px}

/* ============================================================
   The color sheet (js/swatch.js nameSheet) — one sheet for every swatch.
   ============================================================ */
.sw-sheet .pk-hero{border-radius:var(--r-1,4px)}
.cp-sheet-title{display:flex;align-items:baseline;gap:10px;margin-top:16px;flex-wrap:wrap}
.cp-sheet-title h2{font:400 34px/1.05 var(--serif);letter-spacing:-.02em}
.cp-sheet-tag{display:inline-block;font:italic 400 17px/1 var(--serif);color:var(--soft);padding:3px 10px;border:1px solid var(--cp-rule);border-radius:var(--r-pill)}
.cp-sheet-desc,.cp-sheet-note{margin-top:6px;font:italic 400 17px/1.35 var(--serif);color:var(--soft)}

/* near-name bubbles: tap one and the sheet becomes that color (js/swatch.js walks the chain) */
.cp-near-row{display:flex;gap:14px;margin-top:18px;overflow-x:auto;-webkit-overflow-scrolling:touch}
.cp-near{display:flex;flex-direction:column;align-items:center;gap:8px;width:66px;flex:none;text-align:center}
.cp-near i{width:48px;height:48px;border-radius:50%;background:var(--c);flex:none}
.cp-near span{font:400 15px/1.1 var(--serif);text-wrap:balance}

.cp-sheet-primary{margin-top:20px}
.cp-sheet-links{display:flex;flex-wrap:wrap;gap:8px 18px;margin-top:16px}
.cp-link{font:italic 400 17px/1 var(--serif);text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:3px;color:var(--ink)}
/* the readout's own confirmation + way to the rest of the swatch history (js/gallery.js glColorReadout,
   js/picked.js pkButtonHTML) -- the pick itself already saved on release (js/eyedrop.js), this just says so */
.cp-sheet-saved{display:flex;align-items:center;gap:6px;margin-top:8px;font:500 13px/1 var(--mono);color:var(--soft)}
.cp-sheet-saved svg{width:13px;height:13px;flex:none}
.cp-sheet-pk{margin-top:16px}

/* ============================================================
   Rich color-page sections (js/richcolor.js): Painters, When and where, Often paired with, Harmonies, The
   color measured, Mix it. Every one of these is computed from data already in the repo, so it exists on any
   of the ~2,716/~1,000 colors, not only the 101 taught ones (David, 2026-10-08: "an almost empty page").
   Shares the app's own .kin row and .sec-head look where that already fits; new rules only for what's new.
   ============================================================ */
.rc-sec{margin-top:30px}
.rc-sec h3{font:400 24px/1.15 var(--serif);letter-spacing:-.01em;margin-bottom:10px}
.rc-sec .kin.rc-plain,.rc-plain{cursor:default}
.kin.rc-harm{grid-template-columns:30px 1fr;grid-template-rows:auto auto;column-gap:12px;row-gap:2px}.kin.rc-harm i{grid-row:1/3}.kin.rc-harm span{grid-column:2}

/* Harmonies */
.rc-harm-row{margin-bottom:14px}
.rc-harm-sub{font-size:13px;color:var(--soft);margin-bottom:6px}
.rc-harm-sub b{color:var(--ink);font-weight:500}
.rc-harm-chips{display:flex;flex-wrap:wrap;gap:8px}
.rc-harm-chips .kin{width:auto;display:flex;align-items:center;gap:8px;padding:6px 12px 6px 6px;border:1px solid var(--cp-rule,var(--rule));border-radius:999px;border-bottom:1px solid var(--cp-rule,var(--rule))}
.rc-harm-chips .kin i{width:22px;height:22px;border-radius:50%}
.rc-harm-chips .kin b{font-size:15px}
.rc-harm-pal{height:48px;border-radius:4px;overflow:hidden;margin-top:4px}
.rc-harm-pal .pal{flex:1}

/* The color measured */
.rc-measured-words{font:400 22px/1.3 var(--serif);letter-spacing:-.01em;margin-bottom:16px;text-wrap:pretty}
.rc-plane-wrap{margin:14px 0}
.rc-plane{width:100%;max-width:320px;height:auto;color:var(--ink)}
.rc-plane circle[data-rc-open]{cursor:pointer}
.rc-contrast{display:flex;flex-direction:column;gap:8px;margin:16px 0}
.rc-contrast-row{display:flex;align-items:center;gap:10px;padding:10px 14px;border-radius:10px;background:var(--bg);color:var(--c)}
.rc-contrast-row span{flex:1;font-size:14px;opacity:.85}
.rc-contrast-row b{font:500 15px/1 var(--mono)}
.rc-contrast-row em{font-style:normal;font-size:13px;opacity:.75;white-space:nowrap}
.rc-cvd-row{display:flex;gap:10px;flex-wrap:wrap;margin-top:6px}
.rc-cvd{display:flex;flex-direction:column;align-items:center;gap:6px;flex:none;width:72px}
.rc-cvd i{width:40px;height:40px;border-radius:50%;background:var(--c)}
.rc-cvd b{font-size:13px;color:var(--soft);text-align:center;line-height:1.2}

/* Mix it */
.rc-mix-row{display:flex;align-items:center;gap:14px}
.rc-mix-parts{display:flex;flex-direction:column;gap:2px;flex:1}
.rc-mix-parts .kin{grid-template-columns:30px 44px 1fr;padding:6px 0}
.rc-mix-eq{font:italic 400 22px/1 var(--serif);color:var(--soft)}
.rc-mix-target{width:56px;height:56px;border-radius:50%;background:var(--c);flex:none}
.rc-mix-note{margin-top:10px;font-size:15px;color:var(--soft)}

/* Painters / When and where / Often paired with */
.rc-painters .kin,.rc-whenwhere,.rc-paired .kin{margin-bottom:2px}
/* a painter row opens their page (David, 2026-10-09: Paul Signac wasn't tappable and had no photo) -- a real
   portrait (data/artists/portraits.json via js/artwiki.js's own painter page), or, with none recorded, the same
   famous/typical-painting fallback the painter page's own hero now uses, never a blank circle. One shared class
   (.rc-painter-port) sizes every state -- the real <img>, the pending placeholder and the painting it resolves
   to -- so a portrait and a painting-fallback avatar are never two different sizes (David, 2026-10-09: "the
   circle is ~60px for fallbacks but ~150px for real portraits"). Same grid shape as .kin.rc-harm: the avatar
   spans both rows, the name and its stat stack in the wide column beside it instead of each other. */
.rc-painters .kin.rc-painter{grid-template-columns:64px 1fr;grid-template-rows:auto auto;column-gap:14px;row-gap:2px;align-items:center;cursor:pointer}
.rc-painters .kin.rc-painter .rc-painter-port{grid-row:1/3}
.rc-painters .kin.rc-painter b{grid-column:2;grid-row:1}
.rc-painters .kin.rc-painter span{grid-column:2;grid-row:2}
.rc-painter-port{display:block;width:64px;height:64px;border-radius:50%;object-fit:cover;object-position:center;background:var(--c,var(--cp-surface-2));flex:none}
.rc-painter-port-sw.wait{animation:rpPulse 1.6s ease-in-out infinite}
@media (prefers-reduced-motion:reduce){.rc-painter-port-sw.wait{animation:none}}
.rc-spark{display:flex;align-items:flex-end;gap:3px;height:60px;margin:10px 0}
.rc-spark i{flex:1;background:var(--soft);opacity:.35;border-radius:2px 2px 0 0;min-height:4px;position:relative;display:flex;align-items:flex-end;justify-content:center}
.rc-spark i.on{opacity:1;background:var(--ink)}
.rc-spark i em{position:absolute;bottom:-18px;font-size:13px;color:var(--soft);font-style:normal;white-space:nowrap}

/* Details: ΔE and "Also called" sit behind this disclosure, reusing the app's own .sec/.sec-body look */
.cp-details{margin-top:18px;border-top:1px solid var(--cp-rule)}
.cp-details summary{list-style:none;display:flex;justify-content:space-between;align-items:center;min-height:48px;cursor:pointer;-webkit-tap-highlight-color:transparent}
.cp-details summary::-webkit-details-marker{display:none}
.cp-details summary span{font:400 20px/1 var(--serif)}
.cp-details summary i{width:10px;height:10px;border-right:1px solid var(--soft);border-bottom:1px solid var(--soft);transform:rotate(45deg) translate(-2px,-2px);transition:transform .35s var(--ease)}
.cp-details[open] summary i{transform:rotate(225deg) translate(-2px,-2px)}
.cp-details-body{padding:0 0 16px;display:flex;flex-direction:column;gap:8px}
.cp-details-body p{font-size:15px;line-height:1.55;color:var(--soft)}

/* "You and this color" and "Its role in paintings" (js/richcolor.js) */
.rc-role-bar{display:flex;flex-wrap:nowrap;gap:3px;min-height:96px}
.rc-role{display:flex;flex-direction:column;justify-content:flex-end;gap:3px;min-width:84px;max-width:none;padding:12px 10px;text-align:left;border-radius:6px;background:var(--cp-surface-2);border-top:6px solid var(--c);overflow:hidden}
.rc-role[data-role="shadow"]{border-top-color:color-mix(in srgb,var(--c) 65%,#000)}
.rc-role[data-role="light"]{border-top-color:color-mix(in srgb,var(--c) 65%,#fff)}
.rc-role b,.rc-role span,.rc-role small{overflow-wrap:break-word;word-break:break-word}
.rc-role b{font:400 18px/1 var(--serif)}
.rc-role span{font:500 13px/1.2 var(--mono);opacity:.8}
.rc-role small{font-size:13px;line-height:1.25;opacity:.7}
.cp-page [id^="rc-role-"]:empty,.cp-page [id^="rc-reach-"]:empty,.cp-page [id^="rc-compass-"]:empty{display:none}

/* Role paintings (CHECKPOINT.md #6): one small square thumbnail per role, squares because these are samples
   (VISUAL-DIRECTION.md §2 "the bubble" rule), not named colors. */
.rc-roleimg-row{display:flex;gap:8px}
.rc-ri{flex:1;display:flex;flex-direction:column;align-items:center;gap:6px;min-width:0;background:none;border:0;padding:0}
.rc-ri-im{display:block;width:100%;aspect-ratio:1;border-radius:var(--r-tile,6px);overflow:hidden;background:var(--cp-surface-2)}
.rc-ri.wait .rc-ri-im{animation:rpPulse 1.6s ease-in-out infinite}
.rc-ri-im img{width:100%;height:100%;object-fit:cover;opacity:0;transition:opacity .25s var(--ease,ease)}
.rc-ri-im img.ld{opacity:1}
.rc-ri small{font-size:13px;line-height:1;color:var(--soft)}
@media (prefers-reduced-motion:reduce){.rc-ri.wait .rc-ri-im{animation:none}}

/* Werner's 1821 examples (CHECKPOINT.md #7), "In the world" */
.rc-werner{font:400 17px/1.4 var(--serif)}
.rc-werner .wl{font:inherit;color:var(--ink);background:none;border:0;padding:0;cursor:pointer;text-decoration:underline;text-underline-offset:3px}
.rc-werner em{font-style:italic;color:var(--soft)}

/* The history band, the Compass and the passport (js/richcolor.js) */
.rc-reach{margin-top:22px}
.rc-reach-head{font:400 26px/1.15 var(--serif);letter-spacing:-.01em;text-wrap:balance}
.rc-reach-pair{display:flex;gap:2px;height:84px;margin:14px 0 8px;border-radius:6px;overflow:hidden}
.rc-reach-pair>div,.rc-reach-pair>button{flex:1;display:flex;flex-direction:column;justify-content:flex-end;gap:2px;padding:10px 12px;background:var(--c)}
.rc-reach-pair [data-ink="dark"]{color:#141311}.rc-reach-pair [data-ink="light"]{color:#fff}
.rc-reach-pair b{font:400 17px/1.1 var(--serif)}.rc-reach-pair small{font-size:13px;opacity:.85}
.rc-reach-blocks{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:14px;align-items:start}
.rc-reach-pin .gl-pin{width:100%}
.rc-reach-stat{display:flex;flex-direction:column;gap:6px;font-size:14px;color:var(--soft)}
.rc-reach-stat>b{font:400 26px/1.05 var(--serif);color:var(--ink)}
.rc-reach-yr{font:600 14px/1.3 var(--mono);color:var(--ink)}
.rc-compass-grid{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.rc-cell{display:grid;grid-template-columns:30px 1fr;grid-template-rows:auto auto auto;column-gap:10px;align-items:center;padding:10px;border:1px solid var(--cp-rule);border-radius:10px;text-align:left;width:100%;border-bottom:1px solid var(--cp-rule)}
.rc-cell i{grid-row:1/4;width:30px;height:30px;border-radius:50%;background:var(--c)}
.rc-cell small{font-size:13px;color:var(--soft);text-transform:none;letter-spacing:0}
.rc-cell b{font:400 17px/1.1 var(--serif)}.rc-cell span{font-size:13px;color:var(--soft);grid-column:2}
.rc-cell-empty{display:block;opacity:.7}.rc-cell-empty small{display:block;margin-bottom:4px}
.rc-crowd{margin-top:12px;font:italic 400 18px/1.3 var(--serif)}
.rc-passport{display:flex;flex-wrap:wrap;gap:8px;margin-top:6px}
.rc-stamp{display:inline-flex;flex-direction:column;align-items:center;padding:6px 12px;border:1.5px dashed var(--soft);border-radius:8px;transform:rotate(-1.5deg)}
.rc-stamp:nth-child(even){transform:rotate(1.2deg)}
.rc-stamp b{font:500 13px/1.2 var(--mono)}.rc-stamp em{font:italic 400 17px/1.2 var(--serif);color:var(--soft)}
.rc-tier{margin-top:8px}

/* ============================================================
   The deep page (js/richpage.js, design/COLOR-PAGE-DESIGN.md): cover foot stack, glance peek, field-note drawers,
   the twin block, the Walk from here flower and hold-to-walk.
   ============================================================ */
.cp-hero-foot{gap:0}
.cp-hero h1.rp-name{margin-top:6px;font-size:96px;line-height:.9;letter-spacing:-.04em;text-wrap:balance}
.rp-tier{margin-top:8px;font:italic 400 19px/1.25 var(--serif)}
.rp-def{margin-top:10px;font:400 20px/1.3 var(--serif);max-width:30ch;text-wrap:pretty}
.rp-defsrc{margin-top:4px;font:italic 400 17px/1.3 var(--serif);opacity:.8}
.rp-def:empty,.rp-defsrc:empty,.rp-tier:empty{display:none}
.cp-hex em{font-style:normal;opacity:.8}
.cp-scroll-hint{display:none}

.rp-glance{display:flex;gap:10px;overflow-x:auto;scroll-snap-type:x mandatory;scroll-padding:0 var(--g);margin:0 calc(-1 * var(--g));padding:12px var(--g) 4px;scrollbar-width:none}
.rp-glance::-webkit-scrollbar{display:none}
.rp-card{flex:none;width:256px;min-height:188px;scroll-snap-align:start;display:flex;flex-direction:column;gap:6px;padding:16px;text-align:left;background:var(--surface-2);border-radius:var(--r-2);border:1px solid var(--cp-rule)}
.rp-card small{font:500 13px/1 var(--mono);letter-spacing:.04em;color:var(--soft)}
.rp-card b{font:400 40px/1 var(--serif);letter-spacing:-.02em}
.rp-card span{font:400 17px/1.3 var(--serif);color:var(--ink)}
.rp-glance.rp-wait i{flex:none;width:256px;height:188px;border-radius:var(--r-2);background:var(--surface-2);animation:rpPulse 1.6s ease-in-out infinite}
@keyframes rpPulse{0%,100%{opacity:.55}50%{opacity:1}}
@media (prefers-reduced-motion:reduce){.rp-glance.rp-wait i{animation:none}}

.rp-notes{margin-top:34px}
.rp-notes-head{display:flex;align-items:baseline;justify-content:space-between;margin-bottom:6px}
.rp-notes h2,.rp-walk h2{font:400 30px/1.1 var(--serif);letter-spacing:-.01em}
.rp-notes-head small{font-size:13px;color:var(--soft)}
.rp-drawer{border-bottom:1px solid var(--cp-rule)}
.rp-drawer[hidden]{display:none}
.rp-drawer summary{list-style:none;display:grid;grid-template-columns:1fr 18px;column-gap:12px;align-items:center;padding:14px 0;cursor:pointer;-webkit-tap-highlight-color:transparent}
.rp-drawer summary::-webkit-details-marker{display:none}
.rp-d-name{font:400 22px/1.15 var(--serif)}
.rp-d-head{grid-column:1;font:400 16.5px/1.3 var(--serif);color:var(--soft)}
.rp-d-head:empty{display:none}
.rp-drawer summary i{grid-row:1/3;grid-column:2;width:9px;height:9px;border-right:1px solid var(--soft);border-bottom:1px solid var(--soft);transform:rotate(-45deg);transition:transform .35s var(--ease)}
.rp-drawer[open] summary i{transform:rotate(45deg)}
.rp-d-body{padding:0 0 18px}
.rp-d-body .rc-sec:first-child{margin-top:4px}

.rp-twin{margin-top:26px;padding:18px;background:var(--surface-2);border-radius:var(--r-2)}
.rp-twin-split{display:flex;height:72px;border-radius:8px;overflow:hidden;gap:2px}.rp-twin-split i{flex:1;background:var(--c)}
.rp-twin-compact .rp-twin-split{height:56px}
.rp-twin-label{margin-top:14px;font:500 13px/1 var(--mono);color:var(--soft)}
.rp-twin h3{margin-top:6px;font:400 28px/1.1 var(--serif);letter-spacing:-.01em}.rp-twin h3 em{font-style:italic}
.rp-twin-compact h3{font-size:22px}
.rp-twin-lede{margin-top:10px;font:400 18px/1.35 var(--serif)}
.rp-twin-how{margin-top:14px;padding:14px;background:var(--surface-3);border-radius:10px}
.rp-twin-how b{font:500 13px/1 var(--mono);color:var(--soft)}.rp-twin-how p,.rp-twin-how-c{margin-top:6px;font-size:15px;line-height:1.45;color:var(--soft)}
.rp-twin-go{display:flex;align-items:center;gap:10px;margin-top:16px;width:100%;height:52px;padding:0 20px;border-radius:999px;background:var(--paper);color:var(--paper-ink);font:400 21px/1 var(--serif)}
.rp-twin-compact .rp-twin-go{height:auto;padding:0;background:none;color:var(--ink);font:italic 400 17px/1 var(--serif);text-decoration:underline;text-underline-offset:3px;margin-top:10px}
.rp-twin-go svg{width:18px;height:18px;margin-left:auto}.rp-twin-compact .rp-twin-go svg{display:none}

.rp-walk{margin-top:38px}
.rp-walk-sub{margin-top:6px;font-size:14px;color:var(--soft)}
.rp-flower{position:relative;width:330px;height:322px;margin:18px auto 0;max-width:100%}
.rp-hex{position:absolute;width:112px;height:97px;clip-path:polygon(25% 0,75% 0,100% 50%,75% 100%,25% 100%,0 50%);background:var(--c,var(--surface-2));display:flex;flex-direction:column;align-items:center;justify-content:center;gap:1px;padding:0 20px;text-align:center;transform-origin:center;border:0}
.rp-hex[data-ink="dark"]{color:#141311}.rp-hex[data-ink="light"]{color:#fff}
.rp-hex small{font:500 13px/1.1 var(--mono);opacity:.8}.rp-hex b{font:400 15px/1.05 var(--serif);text-wrap:balance}.rp-hex em{font:500 13px/1 var(--mono);font-style:normal;opacity:.8}
.rp-c{left:109px;top:112px}
.rp-n{left:109px;top:7px}.rp-s{left:109px;top:217px}
.rp-ne{left:200px;top:59px}.rp-nw{left:18px;top:59px}.rp-se{left:200px;top:164px}.rp-sw{left:18px;top:164px}
.rp-hex-empty{background:var(--surface-2);color:var(--soft)}.rp-hex-empty span{font-size:13px;line-height:1.2}
.rp-hex.hot{transform:scale(1.12);z-index:3}
.rp-crowd{margin-top:16px;font:400 17px/1.3 var(--serif);text-align:center}

.rp-holding .cp-hero-foot{opacity:.34;transition:opacity .2s}
.rp-hold{position:fixed;inset:0;z-index:60;background:rgba(14,13,11,.66);touch-action:none}
.rp-hold .rp-flower{position:absolute;margin:0;transform:translate(-50%,-50%)}
.rp-hold .rp-hex{animation:rpHexIn .22s var(--ease) both}
@keyframes rpHexIn{from{opacity:0;transform:scale(.6)}to{opacity:1;transform:none}}
.rp-hold .rp-hex.hot{transform:scale(1.12)}
.rp-hold-say{position:absolute;left:20px;right:20px;top:calc(var(--top,40px) + 20px);text-align:left}
.rp-hold-say b{display:block;font:400 40px/1 var(--serif)}.rp-hold-say span{font:400 20px/1.2 var(--serif);color:var(--soft)}
@media (max-width:359px){.rp-flower{transform:scale(.9);transform-origin:top center;margin-bottom:-30px}.rp-card{width:236px}}
.rc-you{margin-top:26px;padding:16px 18px;background:var(--surface-2);border-radius:var(--r-2)}
.rc-you h3{font:400 22px/1.15 var(--serif);margin-bottom:8px}
.rc-you p{font:400 17px/1.35 var(--serif)}
.rc-you .rc-met{margin-top:4px}
.rc-metlink{display:inline;padding:0;border:0;background:none;font:inherit;color:inherit;font-weight:600;text-decoration:underline;text-decoration-color:var(--faint)}
.rc-you .rc-duel{margin-top:12px;padding:10px 18px;border-radius:999px;border:1px solid var(--cp-rule);font:italic 400 17px/1 var(--serif)}
.rc-duel-panel{display:block;margin-top:12px}

/* Combinations: a color physically beside its partners, name under each (David, 2026-10-08) */
.rc-combo{display:flex;gap:3px;align-items:flex-start}
.rc-cb{flex:1 1 0;min-width:0;display:block;text-align:left;padding:0;background:none;border:0;color:inherit;font:inherit;cursor:pointer}
.rc-cb-me{flex:1.4 1 0;cursor:default}
.rc-cb i{display:block;height:64px;background:var(--c);border-radius:2px;box-shadow:inset 0 0 0 1px rgba(0,0,0,.08)}
.rc-combo-2 .rc-cb i{height:72px}
.rc-cb:first-child i{border-radius:10px 2px 2px 10px}.rc-cb:last-child i{border-radius:2px 10px 10px 2px}
.rc-cb b{display:block;font:500 13px/1.25 var(--sans,inherit);margin-top:6px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.rc-cb em{display:block;font-style:normal;font-size:13px;color:var(--soft)}
.rc-cb:active:not(.rc-cb-me){opacity:.6}
.rc-harm-head{display:flex;align-items:center;gap:8px;margin-bottom:8px}.rc-harm-head .rc-harm-sub{margin:0}
.rc-ring{flex:none}
.rc-more{margin:2px 0 10px}.rc-more>summary{font-size:14px;color:var(--soft);padding:10px 0;cursor:pointer;min-height:44px;box-sizing:border-box}
.rc-pc{margin-bottom:18px}
.rc-pc-meta{font-size:13px;color:var(--soft);margin-top:6px;display:flex;flex-wrap:wrap;gap:4px 10px;align-items:center}
.rc-pc-go{background:none;border:0;padding:6px 0;font:inherit;font-size:13px;color:var(--ink);text-decoration:underline;cursor:pointer}
.lk-split{background:linear-gradient(90deg,var(--c2) 50%,var(--c) 50%)!important}

.rc-pals{margin-bottom:22px}
.rc-pal-tabs{display:flex;gap:8px;overflow-x:auto;padding:2px 0 12px;scrollbar-width:none}.rc-pal-tabs::-webkit-scrollbar{display:none}
.rc-pal-tabs button{flex:none;min-height:40px;padding:0 14px;border-radius:999px;border:1px solid var(--cp-rule,var(--rule));background:none;color:var(--ink);font:inherit;font-size:14px;cursor:pointer}
.rc-pal-tabs button.on{background:var(--ink);color:#141311;border-color:var(--ink)}
.rc-pal-row{display:flex;gap:3px;align-items:flex-start}
.rc-pal-sw{min-width:0;display:block;text-align:left;padding:0;background:none;border:0;color:inherit;font:inherit;cursor:pointer}
.rc-pal-me{cursor:default}
.rc-pal-sw i{display:block;height:96px;background:var(--c);border-radius:2px;box-shadow:inset 0 0 0 1px rgba(0,0,0,.08)}
.rc-pal-sw:first-child i{border-radius:12px 2px 2px 12px}.rc-pal-sw:last-child i{border-radius:2px 12px 12px 2px}
.rc-pal-sw b{display:block;font:500 12px/1.25 var(--sans,inherit);margin-top:6px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.rc-pal-sw em{display:block;font-style:normal;font-size:13px;color:var(--soft);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.rc-pal-sw:active:not(.rc-pal-me){opacity:.6}
.rc-pal-note{margin:10px 0 8px}

.rp-hc{position:relative;height:304px;margin:6px -16px 0;overflow:hidden;touch-action:pan-y;cursor:grab;user-select:none;-webkit-user-select:none;-webkit-mask-image:radial-gradient(ellipse 74% 78% at 50% 50%,#000 68%,transparent 100%);mask-image:radial-gradient(ellipse 74% 78% at 50% 50%,#000 68%,transparent 100%)}
.rp-hc.drag{cursor:grabbing}
.rp-hc-in{position:absolute;left:0;top:0;width:0;height:0;transform-origin:0 0;will-change:transform}
.rp-hc-c{position:absolute;width:112px;height:97px;box-sizing:border-box;padding:0 20px;border:0;margin:0;clip-path:polygon(25% 0,75% 0,100% 50%,75% 100%,25% 100%,0 50%);background:var(--c);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;text-align:center;font:inherit;cursor:pointer;opacity:0;pointer-events:none;transition:opacity .5s var(--ease)}
.rp-hc-c.rp-hc-on{opacity:1;pointer-events:auto}
.rp-hc-c[data-ink="dark"]{color:#141311}.rp-hc-c[data-ink="light"]{color:#fff}
.rp-hc-c b{font:400 13px/1.05 var(--serif);text-wrap:balance;max-width:100%;overflow:hidden;position:relative;z-index:1}
.rp-hc-c em{font:500 13px/1 var(--mono);font-style:normal;opacity:.78;position:relative;z-index:1}
.rp-hc-c.rp-hc-self{cursor:pointer}.rp-hc-c.rp-hc-focus b{font-weight:500}
.rp-hc-focus::before{content:"";position:absolute;inset:5px 6px;clip-path:polygon(25% 0,75% 0,100% 50%,75% 100%,25% 100%,0 50%);background:rgba(0,0,0,.2)}
.rp-hc-c[data-ink="light"].rp-hc-focus::before{background:rgba(255,255,255,.34)}
.rp-hc-focus::after{content:"";position:absolute;inset:6.5px 7.5px;clip-path:polygon(25% 0,75% 0,100% 50%,75% 100%,25% 100%,0 50%);background:var(--c)}
.rp-hc-wrap{position:relative}.rp-hc-hint{margin:2px 0 0;text-align:center;font-size:13px;color:var(--soft);pointer-events:none;transition:opacity .3s}
.rp-hc-back{position:absolute;left:50%;bottom:12px;transform:translateX(-50%);z-index:5;min-height:44px;padding:0 16px;border-radius:999px;border:1px solid var(--cp-rule,var(--rule));background:var(--surface-2);color:var(--ink);font:inherit;font-size:14px;cursor:pointer}.rp-hc-back[hidden]{display:none}
.rp-hc.glide .rp-hc-in{transition:transform .35s var(--ease)}
.rp-hc-map{display:block;margin:12px auto 0;min-height:44px;padding:0 18px;border-radius:999px;border:1px solid var(--cp-rule,var(--rule));background:none;color:var(--ink);font:inherit;font-size:14px;cursor:pointer}
.rc-pal-note{display:flex;align-items:center;gap:10px}

/* ---------- the color header (David, 2026-10-09: "too big -- harder to read the article"): one slim row,
   back + name + small text tabs, about 56pt below the status bar, not two stacked rows ---------- */
.rp-bar{position:fixed;top:0;left:50%;z-index:40;width:min(100%,540px);transform:translate(-50%,-110%);transition:transform .32s var(--ease);background:var(--c);padding:calc(var(--top) + 4px) var(--g) 6px;display:flex;align-items:center;column-gap:10px;pointer-events:none}
.rp-bar-back{width:30px;height:30px;flex:none;display:grid;place-items:center;border-radius:50%;background:var(--surface-2);color:var(--ink);border:1px solid rgba(236,232,223,.14)}.rp-bar-back svg{width:17px;height:17px}
.rp-bar.on{transform:translate(-50%,0);pointer-events:auto}
.rp-bar-hair{box-shadow:0 1px 0 rgba(255,255,255,.1)}
.rp-bar[data-ink="dark"]{color:#141311}.rp-bar[data-ink="light"]{color:#fff}
.rp-bar-name{flex:none;min-height:30px;padding:0;background:none;border:0;color:inherit;font:400 17px/1.1 var(--serif);letter-spacing:-.01em;text-align:left;max-width:34%;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.rp-bar-chips{flex:1;display:flex;gap:14px;overflow-x:auto;scrollbar-width:none;justify-content:flex-end;opacity:1;transform:translateX(0);transition:opacity .2s ease,transform .2s ease}
.rp-bar-chips::-webkit-scrollbar{display:none}
.rp-bar-chips button{flex:none;min-height:30px;padding:0 2px;background:none;border:0;color:inherit;opacity:.75;font:400 14px/1 var(--sans)}
.rp-bar-chips button[hidden]{display:none}
/* David, 2026-10-09: reading down slims the bar further (name + back only); a little scroll up brings the tabs
   straight back. The bar's own height never changes (it's one row already), so this is a quiet fade+slide. */
.rp-bar.collapsed .rp-bar-chips{opacity:0;transform:translateX(6px);pointer-events:none}
@media (prefers-reduced-motion:reduce){.rp-bar-chips{transition:none}}
.cp-page .cp-close{z-index:31}
@media (prefers-reduced-motion:reduce){.rp-bar{transition:none}}

/* ---------- the tapped color's split cover (#7): your color vs. the matched name, side by side ----------
   David, 2026-10-09: a diagonal wedge in the top-right corner ("this thing... looks odd") sat right where a
   full-bleed hero's mirrored Close pill also lives (js/trail.js tlDecorate, "a full-bleed hero: mirrored on
   the right"), so the two overlapped. A calm two-up band at the bottom of the hero, inside cp-hero-foot (where
   the Close pill never reaches), replaces it: two clean halves, each its own color, each labeled with a name
   and a hex in that half's own contrast ink -- never a corner wedge again. */
.rp-split{background:linear-gradient(var(--c),var(--c))}
.cp-hero{position:relative}
/* .cp-hero-foot is a column flexbox with align-items:flex-start (every other child sizes to its own content,
   e.g. the name/chip/buttons), so this needs its own width:100% or it shrinks to a min-content sliver instead
   of spanning the hero the way a comparison band should. */
.rp-split-band{display:flex;width:100%;border-radius:var(--r-2,14px);overflow:hidden;margin-bottom:14px;box-shadow:0 0 0 1px rgba(255,255,255,.1)}
.rp-split-half{flex:1;min-width:0;padding:10px 14px;display:flex;flex-direction:column;gap:2px}
.rp-split-half-a{background:var(--c)}
.rp-split-half-b{background:var(--c2)}
.rp-split-half b{font:400 16px/1.2 var(--serif);letter-spacing:-.01em;text-wrap:balance;overflow-wrap:break-word}
.rp-split-half span{font-size:12px;opacity:.85}
.rp-split-half[data-ink="dark"]{color:#141311}.rp-split-half[data-ink="light"]{color:#fff}
.rp-yours{margin-top:10px;font:400 20px/1.3 var(--serif);max-width:30ch;text-wrap:pretty}
.rp-hexrow{display:flex;align-items:center;gap:14px;flex-wrap:wrap;margin-top:6px}
.rp-saveyours{min-height:40px;padding:0 16px;border-radius:999px;background:var(--surface-2);color:var(--ink);border:1px solid rgba(236,232,223,.14);font:400 16px/1 var(--serif)}

/* ---------- Names and codes, Read next, the last line ---------- */
.rp-aka{font:italic 400 18px/1.35 var(--serif);margin:4px 0 10px}
.rp-aka[hidden]{display:none}
.rp-n-h{margin:16px 0 8px;font:400 18px/1.2 var(--serif);color:var(--soft)}
.rp-n-tier:empty{display:none}
.rp-other{margin-top:14px}
.rp-next{margin-top:38px}
.rp-next h2{font:400 30px/1.1 var(--serif);letter-spacing:-.01em;margin-bottom:6px}
.rp-next-row{display:flex;flex-direction:column;align-items:flex-start;gap:4px;width:100%;padding:14px 0;border-bottom:1px solid var(--cp-rule,var(--rule));text-align:left}
.rp-next-row b{font:400 20px/1.2 var(--serif)}.rp-next-row span{font-size:14px;line-height:1.4;color:var(--soft)}
.rp-last{margin-top:30px}

/* ---------- the Walk: nothing under 13px in a hex (#2) ---------- */
.rp-hex small{font-size:13px}.rp-hex em{font-size:13px}
.rp-split .cp-hero-foot{position:relative;z-index:1}
/* double-tap the cover to keep the color (js/richpage.js rpCoverLike): the heart blooms where you tapped */
.cp-hero{touch-action:manipulation}
.cp-hero .rp-like{z-index:2;filter:drop-shadow(0 6px 18px rgba(0,0,0,.3))}
.cp-hero .rp-like.off{animation-duration:.6s;opacity:.8}

/* ---------- Paintings, first class (David, 2026-10-09: "one of the most important sections... hidden at the
   bottom in Field notes"): the lead painting as a museum label, then the gallery strip (js/paintingsof.js,
   unchanged), the painter, the decade line, remaining archive findings as plain one-liners ---------- */
.rp-paint{margin-top:38px}
.rp-paint h2{font:400 30px/1.1 var(--serif);letter-spacing:-.01em;margin-bottom:10px}
.rp-paint-lead:empty{display:none}
.rp-findings-box:empty,.rp-findings-box:has(.rp-findings:empty){display:none}
.rp-findings-h{font:400 18px/1.2 var(--serif);color:var(--soft);margin:26px 0 8px}
.rp-findings{display:flex;flex-direction:column}
.rp-findings li{list-style:none;border-top:1px solid var(--cp-rule)}
.rp-findings li button{display:block;width:100%;padding:12px 0;text-align:left;font:400 17px/1.4 var(--serif);text-wrap:pretty}
.rp-findings li button b{font-weight:500;color:var(--ink)}
.rp-paint [data-rp-painters] .rc-sec,.rp-paint [data-rp-whenwhere] .rc-sec{margin-top:26px}
.rp-paint [data-rp-painters]:empty,.rp-paint [data-rp-whenwhere]:empty{display:none}
.rp-paint .c-poems:empty,.rp-paint [data-world-in]:empty{display:none}

/* ---------- the ID card: facts, codes and sources in one specimen card ---------- */
.rp-idcard{margin-top:38px}
.rp-idcard h2{font:400 30px/1.1 var(--serif);letter-spacing:-.01em;margin-bottom:12px}
.rp-id-swatch{width:100%;height:84px;border-radius:var(--r-2);background:var(--c,var(--surface-2));margin-bottom:4px}
.rp-id-facts:empty{display:none;margin:0}
.rc-passport{display:flex;flex-wrap:wrap;gap:8px;margin-top:4px}
.rc-stamp{display:flex;flex-direction:column;align-items:flex-start;gap:1px;padding:7px 12px;border-radius:999px;background:var(--surface-2);border:1px solid var(--cp-rule)}
.rc-stamp b{font:400 14px/1 var(--serif)}.rc-stamp em{font-style:normal;font-size:11px;color:var(--soft)}

/* ---------- "Next: <relative>" -- a tap or a horizontal swipe walks the family ---------- */
.rp-next-rel{margin-top:30px}
.rp-next-btn{display:flex;align-items:center;gap:10px;width:100%;min-height:52px;padding:14px 0;border-top:1px solid var(--cp-rule);text-align:left}
.rp-next-btn span{font:400 14px/1 var(--sans);color:var(--soft)}
.rp-next-btn b{flex:1;font:400 20px/1.2 var(--serif);min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.rp-next-btn svg{flex:none;width:18px;height:18px;opacity:.7}

/* ============================================================ landscape lane (2026-10-09, CSS only -- the
   page's markup and js/richpage.js are untouched). David: "the cover becomes the left half, content scrolls
   on the right". The cover (.cp-hero.cp-hero-full, already a flex column that pins the name/def/actions to its
   own bottom edge -- app.css .c-hero) goes position:fixed as a true left column, the full viewport height; the
   rest of the color page (everything after it: Paintings, Family, the ID card, Next, the last line) is left in
   normal document flow, and the page's own left padding is pushed past the cover's width so that flow becomes
   the scrolling right side -- no wrapper div, no JS, the existing document scroll does the work. The collapsed
   "name reappears once you scroll past the cover" bar (.rp-bar) only makes sense when the cover scrolls away,
   which it no longer does here, so it stays off. ============================================================ */
@media (orientation:landscape){
  :root{--cp-cover-w:clamp(280px,42vw,440px)}
  .screen.cp-page{max-width:none;margin:0;padding-left:calc(var(--cp-cover-w) + var(--g) + var(--left));padding-right:calc(var(--g) + var(--right))}
  .cp-page .cp-hero.cp-hero-full{position:fixed;left:0;top:0;bottom:0;z-index:2;margin:0;width:calc(var(--cp-cover-w) + var(--left));
    height:100dvh;min-height:0;border-radius:0;padding:calc(var(--top) + 16px) 18px 22px calc(18px + var(--left))}
  .cp-page .rp-bar{display:none}
  /* the name is sized off the viewport's own height now (a vh clamp, not the portrait vw one two rules below),
     so a short landscape screen (740x360) never has to push the top of the cover's content -- the back button's
     own row -- above the fold to keep the name and actions anchored at the bottom. cp-hero-foot gets a scroll
     of last resort on top of that, for anything still too tall to fit even at the smallest size in the clamp. */
  .cp-hero h1.rp-name{font-size:clamp(40px,16dvh,96px)}
  /* craft critique (2026-10-09, fresh context): on all three sizes the "added to you"/relation chip -- the
     first line in cp-hero-foot -- sat under and ran past the circular back button, both overlapped and
     clipped at the left edge. cp-hero-foot is still bottom-anchored (.c-hero's own justify-content:flex-end)
     and still scrolls internally as a last resort, but its own box now stops short of the back button's row
     instead of being free to grow into it. */
  .cp-page .cp-hero.cp-hero-full .cp-hero-foot{max-height:calc(100% - 50px);overflow-y:auto;overscroll-behavior:contain;scrollbar-width:thin}
  /* the focus view (tap the cover to go full screen, js/richpage.js) stays a true inset:0 overlay either way */
}