:root{
  --desk:#e3d9c4; --paper:#f8f3e7; --paper-2:#f1e8d4; --text:#2b2925; --muted:#625c51;
  --ink:#1e3d70; --pen:#1a6fa8; --ink-soft:#dbe4f2; --cloth:#21406f; --line:#ddd1b8; --speaking:#fbefc8;
  --sage:#7f9b7b; --ochre:#c49a42; --rose:#c48d8a;
  --serif:"Literata", Georgia, "Times New Roman", serif;
  --hand:"Caveat", "Segoe Print", "Bradley Hand", cursive;
  --fs:1.08rem;
  box-sizing:border-box;
  padding-top:env(safe-area-inset-top,0px);
  padding-bottom:env(safe-area-inset-bottom,0px);
}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    --desk:#14161a; --paper:#2a2a27; --paper-2:#33322e; --text:#ece6d8; --muted:#b9b1a1;
    --ink:#a9c3ec; --pen:#7cc3e6; --ink-soft:#2c3852; --cloth:#16294a; --line:#45433d; --speaking:#4a4126;
  }
}
:root[data-theme="dark"]{
  --desk:#14161a; --paper:#2a2a27; --paper-2:#33322e; --text:#ece6d8; --muted:#b9b1a1;
  --ink:#a9c3ec; --pen:#7cc3e6; --ink-soft:#2c3852; --cloth:#16294a; --line:#45433d; --speaking:#4a4126;
}
:root.large-text{ --fs:1.32rem; }
*,*::before,*::after{ box-sizing:inherit; }
html,body{ height:100%; }
html{ scroll-padding-top:env(safe-area-inset-top,0px); }
body{
  margin:0; color:var(--text); font-family:var(--serif); font-size:var(--fs); line-height:1.65;
  background:radial-gradient(120% 90% at 50% 40%, color-mix(in srgb,var(--desk) 70%, #fff 30%), var(--desk));
  display:flex; flex-direction:column; -webkit-text-size-adjust:100%;
}
:focus-visible{ outline:3px solid var(--ink); outline-offset:3px; border-radius:4px; }
.vh{ position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; }
button{ font:inherit; }

/* toolbar */
.bar{ display:flex; align-items:center; gap:.6rem; padding:.7rem 1rem; max-width:1240px; width:100%; margin:0 auto; flex-wrap:wrap; }
.bar .name{ font-weight:600; font-size:.9rem; margin-right:auto; }
.btn{
  font-size:.85rem; cursor:pointer; display:inline-flex; align-items:center; gap:.45em;
  padding:.5em 1em; min-height:44px; border:2px solid var(--ink); border-radius:999px;
  background:transparent; color:var(--ink); line-height:1.1;
}
.btn:hover{ background:var(--ink-soft); }
.btn.solid{ background:var(--ink); color:var(--paper); }
.btn.solid:hover{ filter:brightness(1.12); background:var(--ink); }
.btn svg{ width:1em; height:1em; flex:none; }
.btn[disabled]{ opacity:.35; cursor:default; }

/* stage */
.stage{ flex:1; display:flex; flex-direction:column; align-items:center; justify-content:center; padding:.5rem .75rem 1rem; }
.cover{ padding:10px; background:var(--cloth); border-radius:8px;
  box-shadow:0 1px 0 rgba(255,255,255,.08) inset, 0 18px 40px -12px rgba(30,25,15,.45), 0 4px 10px rgba(30,25,15,.18); }
.spreads{ position:relative; width:var(--bw); height:var(--bh); perspective:2600px; }
.spread{ position:absolute; inset:0; display:grid; grid-template-columns:1fr 1fr; }
.spread[hidden]{ display:none; }
.page{ position:relative; overflow:hidden; background-color:var(--paper);
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .45 0 0 0 0 .38 0 0 0 0 .25 0 0 0 .07 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); }
.page.left{ border-radius:4px 0 0 4px; }
.page.right{ border-radius:0 4px 4px 0; }
.page.left::after, .page.right::after{ content:""; position:absolute; top:0; bottom:0; width:42px; pointer-events:none; z-index:3; }
.page.left::after{ right:0; background:linear-gradient(to left, rgba(60,45,20,.22), rgba(60,45,20,0)); }
.page.right::after{ left:0; background:linear-gradient(to right, rgba(60,45,20,.24), rgba(60,45,20,0)); }

/* picture page */
.art{ position:absolute; inset:7% 9% 13% 9%; }
.layer{ position:absolute; inset:0; opacity:0; transition:opacity 1.3s ease; }
.layer.show{ opacity:1; }
.frame{ position:absolute; inset:0; overflow:hidden; border-radius:3px;
  box-shadow:0 0 0 1px rgba(60,45,20,.12), 0 8px 18px -10px rgba(60,45,20,.5); }
.pic{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; transform-origin:var(--o,50% 50%); }
.layer.show .pic{ animation:breathe 18s ease-in-out infinite alternate; }
.layer.show.push .pic{ animation:push 11s ease-in-out forwards; }
@keyframes breathe{ from{ transform:scale(1.03) translate(0,0); } to{ transform:scale(1.1) translate(-1.6%,-1.2%); } }
@keyframes push{ from{ transform:scale(1.05); } to{ transform:scale(1.32); } }
.wash{ background:
  radial-gradient(55% 60% at 28% 36%, var(--c1), transparent 70%),
  radial-gradient(50% 55% at 74% 64%, var(--c2), transparent 72%),
  radial-gradient(45% 45% at 62% 18%, var(--c3), transparent 70%),
  radial-gradient(60% 50% at 20% 85%, var(--c2), transparent 70%),
  var(--c0,#efe5cf); }
.chip{ position:absolute; left:.6rem; bottom:.6rem; z-index:2; font-size:.68rem; line-height:1.3;
  background:rgba(255,252,244,.92); color:#5b5446; padding:.2em .6em; border-radius:4px; }
.fx{ position:absolute; inset:0; width:100%; height:100%; pointer-events:none; z-index:1; }
.caption{ position:absolute; left:9%; right:9%; bottom:4.5%; margin:0; font-size:.8em; font-style:italic; color:var(--muted); text-align:center; min-height:1.3em; }
.live{ position:absolute; top:.55rem; left:.55rem; z-index:2; font-size:.66rem; background:rgba(255,252,244,.92); color:#5b5446; padding:.15em .55em; border-radius:999px; }

/* album of snapshots */
.album{ position:absolute; inset:0; display:grid; grid-template-columns:1fr 1fr; gap:6%; padding:2% 4%; align-content:center; }
.snap{ position:relative; background:#fffdf7; padding:6% 6% 16%; box-shadow:0 6px 14px -8px rgba(40,30,10,.55);
  opacity:0; transform:translateY(14px) rotate(calc(var(--r) * 2.5)); transition:opacity .9s ease, transform 1.1s cubic-bezier(.2,.8,.2,1); transition-delay:var(--d); }
.layer.show .snap{ opacity:1; transform:rotate(var(--r)); }
.layer.show .snap.settled{ animation:sway 7s ease-in-out infinite alternate; animation-delay:var(--d); }
@keyframes sway{ from{ transform:rotate(var(--r)); } to{ transform:rotate(calc(var(--r) * -1 + .3deg)); } }
.snap .ph{ position:relative; aspect-ratio:4/5; overflow:hidden; }
.snap .ph .pic{ animation:none !important; }
.album.duo{ grid-template-columns:1fr; gap:0; padding:3% 6%; }
.album.duo .snap{ width:68%; padding:3.5% 3.5% 10%; }
.album.duo .snap:nth-child(1){ justify-self:start; z-index:1; }
.album.duo .snap:nth-child(2){ justify-self:end; margin-top:-14%; z-index:2; }
.album.duo .snap .ph{ aspect-ratio:4/3; }
.snap .chip{ font-size:.58rem; left:.3rem; bottom:.3rem; }
.snap .cap{ position:absolute; left:0; right:0; bottom:2%; text-align:center; font-family:var(--hand); font-size:1.05em; color:#3b4a6b; line-height:1; }
.snap::before,.snap::after{ content:""; position:absolute; width:16%; aspect-ratio:1; background:rgba(60,50,35,.55); }
.snap::before{ top:-3%; left:-3%; clip-path:polygon(0 0,100% 0,0 100%); }
.snap::after{ top:-3%; right:-3%; clip-path:polygon(0 0,100% 0,100% 100%); }

/* text page */
.inner{ position:absolute; inset:0; overflow:auto; padding:2.3em 2.4em 2.8em 2.7em; overscroll-behavior:contain; }
.running{ font-size:.75em; font-style:italic; color:var(--muted); margin:0 0 1.2rem; }
.folio{ position:absolute; bottom:1.1rem; right:1.6rem; font-size:.72rem; color:var(--muted); z-index:2; }
.page.left .folio{ right:auto; left:1.6rem; }
.inner h2{ font-size:1.65em; line-height:1.15; margin:0 0 1rem; font-weight:600; }
.inner h3{ font-size:1.12em; margin:0 0 .8rem; font-weight:600; }
.clip{ margin:0 0 1em; padding:.12em .45em; margin-left:-.45em; margin-right:-.45em; border-radius:6px; transition:background-color .3s; cursor:default; }
.clip.speaking{ background:var(--speaking); }
.playpage{ margin-top:.4rem; }
.title-page h1{ font-size:clamp(2rem,3.4vw,2.8rem); line-height:1.08; margin:2.5rem 0 .4rem; font-weight:600; }
.title-page .sub{ font-style:italic; color:var(--muted); margin:0 0 1.6rem; }
.title-page .intro{ border-left:3px solid var(--sage); padding-left:1rem; color:var(--muted); margin:0 0 1.6rem; }
.title-page .pen{ width:12rem; color:var(--pen); display:block; margin:0 0 1.2rem; }
.btnrow{ display:flex; gap:.6rem; flex-wrap:wrap; }
.qlist{ list-style:none; margin:0; padding:0; }
.qlist li{ padding:.45em 0; border-bottom:1px solid var(--line); display:grid; grid-template-columns:1.6rem 1fr; }
.qlist .n{ color:var(--muted); font-size:.85em; }
.qlist .t{ font-weight:600; font-size:.92em; }
.qlist .q{ grid-column:2; font-family:var(--hand); font-size:1.18em; line-height:1.15; color:var(--pen); }
.qlist button{ all:unset; cursor:pointer; }
.qlist button:focus-visible{ outline:3px solid var(--ink); outline-offset:2px; }
.qlist button:hover .t{ text-decoration:underline; }
.qlist .soon{ grid-column:2; font-size:.72em; color:var(--muted); }
.opener{ display:flex; flex-direction:column; justify-content:center; min-height:100%; }
.opener .label{ color:var(--muted); margin:0; font-size:.9em; }
.question{ margin:1.2rem 0 1.6rem; }
.question .asked{ margin:0 0 .2rem; font-size:.8em; color:var(--muted); }
.question .prompt{ font-family:var(--hand); font-weight:600; color:var(--ink); font-size:2.1em; line-height:1.05; margin:0; color:var(--pen); }
.note{ margin:1.4rem 0 0; padding:1rem 1.1rem; background:var(--paper-2); border-radius:12px 3px 14px 4px; transform:rotate(-1deg); box-shadow:0 4px 10px -8px rgba(40,30,10,.5); }
.note p{ margin:0; }
.note .q{ font-size:.82em; color:var(--muted); margin-bottom:.3rem; }
.note .a{ font-family:var(--hand); font-size:1.45em; line-height:1.1; color:var(--pen); }
details.full{ border-top:1px solid var(--line); padding:.8rem 0; }
details.full:last-of-type{ border-bottom:1px solid var(--line); }
details.full summary{ cursor:pointer; font-weight:600; font-size:.92em; }
details.full summary .q{ display:block; font-family:var(--hand); font-size:1.3em; color:var(--pen); line-height:1.15; margin-top:.15rem; font-weight:600; }
details.full .body{ padding-top:.6rem; font-size:.9em; }
details.full .body p{ margin:0 0 .9em; }

/* nav */
.nav{ display:flex; align-items:center; gap:.8rem; margin-top:.9rem; }
.nav .count{ font-size:.85rem; color:var(--muted); min-width:6.5rem; text-align:center; }

/* flipping */
.flip{ position:absolute; inset:0; z-index:20; pointer-events:none; transform-style:preserve-3d; }
.flip .half{ position:absolute; top:0; bottom:0; width:50%; }
.flip .under-l{ left:0; } .flip .under-r{ left:50%; }
.flip .half > .page{ position:absolute; inset:0; }
.flip .shadow{ position:absolute; inset:0; z-index:5; pointer-events:none; opacity:0; }
.flip .leaf{ position:absolute; top:0; bottom:0; width:50%; transform-style:preserve-3d; z-index:10; }
.flip .leaf.fwd{ left:50%; transform-origin:left center; }
.flip .leaf.back{ left:0; transform-origin:right center; }
.flip .face{ position:absolute; inset:0; backface-visibility:hidden; -webkit-backface-visibility:hidden; overflow:hidden; }
.flip .face > .page{ position:absolute; inset:0; }
.flip .face.verso{ transform:rotateY(180deg); }
.flip .face .shade{ position:absolute; inset:0; z-index:6; pointer-events:none; }
.flip .solo{ left:0; width:100%; }

/* player */
.player{ position:fixed; left:0; right:0; bottom:0; z-index:40; background:var(--paper-2); border-top:1px solid var(--line);
  padding:.6rem 1rem calc(.6rem + env(safe-area-inset-bottom,0px)); transform:translateY(110%); transition:transform .25s; }
.player.on{ transform:none; }
.player .in{ max-width:60rem; margin:0 auto; display:flex; gap:.6rem; align-items:center; flex-wrap:wrap; }
.player .status{ flex:1 1 12rem; margin:0; font-size:.85rem; }
.player .status b{ display:block; }
.player select{ font:inherit; font-size:.85rem; min-height:44px; padding:0 .6em; border:2px solid var(--ink); border-radius:999px; background:var(--paper); color:var(--ink); }
.player .pv{ flex-basis:100%; margin:0; font-size:.72rem; color:var(--muted); }

/* single-page (phones) */
@media (max-width: 859px){
  .bar .name{ flex-basis:100%; }
  .spread{ grid-template-columns:1fr; grid-template-rows:44% 56%; }
  .page.left{ border-radius:4px 4px 0 0; }
  .page.right{ border-radius:0 0 4px 4px; }
  .page.left::after,.page.right::after{ display:none; }
  .art{ inset:6% 6% 15% 6%; }
  .caption{ bottom:3%; }
  .inner{ padding:1.4rem 1.4rem 2.8rem; }
  .folio{ display:none; }
  .title-page h1{ margin-top:.5rem; }
}
@media (prefers-reduced-motion: reduce){
  .layer, .snap, .clip, .player{ transition:none !important; }
  .layer.show .pic, .layer.show .snap.settled{ animation:none !important; }
  .snap{ transform:rotate(var(--r)) !important; }
}

/* ===== storybook realism + living watercolor ===== */
body{ background-color:var(--desk); background-image:var(--deskwash), radial-gradient(120% 90% at 50% 40%, color-mix(in srgb,var(--desk) 70%, #fff 30%), var(--desk)); background-size:cover; background-attachment:fixed; }
.cover{ position:relative; border-radius:10px;
  background-color:var(--cloth);
  background-image:
    repeating-linear-gradient(0deg, rgba(255,255,255,.035) 0 1px, transparent 1px 3px),
    repeating-linear-gradient(90deg, rgba(0,0,0,.06) 0 1px, transparent 1px 3px),
    radial-gradient(120% 140% at 30% 20%, rgba(255,255,255,.10), rgba(0,0,0,.18));
}
.spreads::before, .spreads::after{ content:""; position:absolute; top:3px; bottom:3px; z-index:0; border-radius:3px;
  background:repeating-linear-gradient(to right, var(--paper) 0 1px, color-mix(in srgb, var(--paper) 70%, #8a7a5a 30%) 1px 2px); }
.spreads::before{ right:100%; width:var(--ls,2px); border-radius:3px 0 0 3px; }
.spreads::after{ left:100%; width:var(--rs,8px); border-radius:0 3px 3px 0; }
.ribbon{ position:absolute; left:calc(50% + 22px); bottom:-38px; width:15px; height:52px; z-index:-1;
  background:linear-gradient(90deg, color-mix(in srgb,var(--rose) 80%, #000 20%), var(--rose) 45%, color-mix(in srgb,var(--rose) 85%, #fff 15%));
  clip-path:polygon(0 0,100% 0,100% 100%,50% 82%,0 100%); transform-origin:50% 0; animation:ribbon 6s ease-in-out infinite alternate; }
@keyframes ribbon{ from{ transform:rotate(-3deg); } to{ transform:rotate(4deg); } }
.page > .splash{ position:absolute; z-index:0; pointer-events:none; background-size:100% 100%; mix-blend-mode:multiply; opacity:var(--so,.5); transform-origin:var(--to,50% 50%); }
.page.left > .splash{ left:-12%; bottom:-10%; width:75%; height:45%; --to:0% 100%; }
.page.right > .splash{ right:-14%; top:-10%; width:70%; height:42%; --to:100% 0%; }
.spread:not([hidden]) .splash{ animation:splashIn 2.6s cubic-bezier(.2,.7,.2,1) both; }
@keyframes splashIn{ from{ opacity:0; transform:scale(.55) rotate(-4deg); } to{ opacity:var(--so,.5); transform:none; } }
.art, .inner{ z-index:1; }
.frame{ border-radius:0; box-shadow:none; -webkit-mask-image:var(--m); mask-image:var(--m); -webkit-mask-size:100% 100%; mask-size:100% 100%; -webkit-mask-repeat:no-repeat; mask-repeat:no-repeat; -webkit-mask-position:center; mask-position:center; }
.layer.show .frame{ animation:bloom 2.2s cubic-bezier(.2,.7,.2,1) both; }
@keyframes bloom{ from{ -webkit-mask-size:38% 38%; mask-size:38% 38%; filter:saturate(.4) brightness(1.08); } 60%{ filter:saturate(.9); } to{ -webkit-mask-size:100% 100%; mask-size:100% 100%; filter:none; } }
.wash::after{ content:""; position:absolute; inset:0; background-image:var(--grain); mix-blend-mode:multiply; opacity:.55; }
.clip.first::first-letter{ float:left; font-size:3.2em; line-height:.82; padding:.1em .14em 0 .05em; margin-right:.04em; color:var(--ink); font-weight:600;
  background:radial-gradient(60% 55% at 45% 55%, color-mix(in srgb,var(--ochre) 38%, transparent), transparent 72%); }
.spread:not([hidden]) .question .prompt{ animation:write 2.4s .35s steps(40,end) both; }
@keyframes write{ from{ clip-path:inset(0 100% 0 0); } to{ clip-path:inset(0 0 0 0); } }
.spread:not([hidden]) .pen path{ stroke-dasharray:420; animation:draw 2s .2s ease-out both; }
@keyframes draw{ from{ stroke-dashoffset:420; } to{ stroke-dashoffset:0; } }
.inner h2, .inner h3{ position:relative; }
@media (prefers-color-scheme: dark){ :root:not([data-theme="light"]) .page > .splash{ mix-blend-mode:screen; --so:.16; } :root:not([data-theme="light"]) .wash::after{ opacity:.3; } }
:root[data-theme="dark"] .page > .splash{ mix-blend-mode:screen; --so:.16; }
@media (max-width: 859px){ .spreads::before, .spreads::after, .ribbon{ display:none; } .page.left > .splash{ width:60%; height:70%; } .page.right > .splash{ width:60%; height:30%; } }
@media (prefers-reduced-motion: reduce){
  .ribbon, .spread:not([hidden]) .splash, .layer.show .frame, .spread:not([hidden]) .question .prompt, .spread:not([hidden]) .pen path{ animation:none !important; }
}

.frame .chip{ left:17%; bottom:16%; }
.nav{ margin-top:1.9rem; }
@media (prefers-color-scheme: dark){ :root:not([data-theme="light"]) body{ background-image:radial-gradient(120% 90% at 50% 40%, #1d2026, var(--desk)); } }
:root[data-theme="dark"] body{ background-image:radial-gradient(120% 90% at 50% 40%, #1d2026, var(--desk)); }
@media (max-width: 859px){ .nav{ margin-top:.9rem; } }

@media (min-width: 860px){ .page.left .art{ inset:6% 4% 13% 4%; } .art .frame{ inset:auto 0; top:50%; transform:translateY(-55%); aspect-ratio:3/2; } }
.snap .ph .pic{ object-position:50% 22%; }

@media (max-width: 859px){ .album{ grid-template-columns:repeat(4,1fr); gap:3%; padding:4% 1%; } .snap{ padding:5% 5% 22%; } .snap .cap{ font-size:.72em; } .snap::before,.snap::after{ width:22%; } }

/* ===== more room for pictures ===== */
.bar{ padding:.45rem 1rem; }
.stage{ position:relative; min-height:0; justify-content:safe center; padding:.25rem .75rem .5rem; }
@media (min-width: 860px){
  .page.left .art{ inset:4.5% 4.5% 10% 4.5%; }
  .art .frame{ inset:auto 0; top:47%; transform:translateY(-50%); aspect-ratio:16/10; }
  .album{ gap:4%; padding:0 2%; }
  .nav{ position:absolute; inset:0; margin:0; pointer-events:none; display:block; }
  .nav .btn{ position:absolute; top:50%; transform:translateY(-50%); pointer-events:auto; width:48px; height:48px; min-height:48px; padding:0; justify-content:center; background:var(--paper); }
  .nav .btn:hover{ background:var(--ink-soft); }
  .nav .btn[disabled]{ opacity:0; pointer-events:none; }
  .nav .btn svg{ width:1.25em; height:1.25em; }
  #prevBtn{ left:calc(50% - var(--bw) / 2 - 58px); }
  #nextBtn{ right:calc(50% - var(--bw) / 2 - 58px); }
  .nav .lbl{ position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; }
  .nav .count{ position:absolute; left:50%; bottom:-.2rem; transform:translateX(-50%); font-size:.78rem; }
  .ribbon{ height:30px; bottom:-26px; }
}
@media (max-width: 859px){
  .spread{ grid-template-rows:50% 50%; }
  .art{ inset:3% 3% 11% 3%; }
}
.enlarge{ position:absolute; right:.4rem; top:.4rem; z-index:3; width:44px; height:44px; border-radius:50%; border:0; cursor:zoom-in;
  display:grid; place-items:center; background:rgba(255,252,244,.88); color:#1e3d70; opacity:0; transition:opacity .2s; }
.art:hover .enlarge, .enlarge:focus-visible{ opacity:1; }
@media (hover: none){ .enlarge{ opacity:.85; } }
.enlarge svg{ width:18px; height:18px; }
.art .layer{ cursor:zoom-in; }
.lightbox{ border:0; padding:0; background:transparent; max-width:100vw; max-height:100vh; width:100vw; height:100vh; }
.lightbox::backdrop{ background:rgba(22,20,16,.86); }
.lightbox[open]{ display:flex; flex-direction:column; align-items:center; justify-content:center; gap:.8rem; }
.lb-stage{ display:flex; align-items:center; justify-content:center; max-width:94vw; max-height:84vh; }
.lb-img{ max-width:94vw; max-height:84vh; width:auto; height:auto; display:block; border-radius:3px; box-shadow:0 20px 50px rgba(0,0,0,.5); animation:lbIn .5s ease both; }
@keyframes lbIn{ from{ opacity:0; transform:scale(.96); } to{ opacity:1; transform:none; } }
.lb-album{ display:grid; grid-template-columns:repeat(4, minmax(0,1fr)); gap:1.2rem; width:min(94vw,1300px); animation:lbIn .5s ease both; }
.lb-album figure{ margin:0; background:#fffdf7; padding:4% 4% 2%; box-shadow:0 14px 30px rgba(0,0,0,.45); }
.lb-album img{ width:100%; height:auto; max-height:70vh; object-fit:contain; display:block; }
.lb-album figcaption{ font-family:var(--hand); color:#3b4a6b; text-align:center; font-size:1.3rem; }
@media (max-width: 859px){ .lb-album{ grid-template-columns:repeat(2, minmax(0,1fr)); } }
.lb-cap{ color:#efe7d6; font-style:italic; margin:0; font-size:.95rem; }
.lb-close{ position:fixed; top:calc(.8rem + env(safe-area-inset-top,0px)); right:1rem; background:rgba(255,252,244,.92); color:#1e3d70; border-color:#fffaf0; }
@media (prefers-reduced-motion: reduce){ .lb-img, .lb-album{ animation:none; } }

/* ===== app shell ===== */
.app{ flex:1; min-height:100%; display:flex; flex-direction:column; }
a{ color:var(--ink); } a:hover{ color:var(--text); }

/* ===== picture layout: full page (default) — :root[data-layout="framed"] restores the original ===== */
@keyframes breatheSoft{ from{ transform:scale(1.01); } to{ transform:scale(1.05) translate(-.8%,-.6%); } }
:root:not([data-layout="framed"]) .layer.show .pic{ animation-name:breatheSoft; }
:root:not([data-layout="framed"]) .frame{ -webkit-mask-image:var(--mt,var(--m)); mask-image:var(--mt,var(--m)); }
:root:not([data-layout="framed"]) .frame .pic{ object-position:var(--op,50% 50%); }
@media (min-width: 860px){
  :root:not([data-layout="framed"]) .page.left .art{ inset:2.4% 2.4% 8.6% 2.4%; }
  :root:not([data-layout="framed"]) .art .frame{ inset:0; top:0; transform:none; aspect-ratio:auto; }
  :root:not([data-layout="framed"]) .caption{ bottom:2.4%; }
  :root:not([data-layout="framed"]) .album{ display:flex; justify-content:center; align-items:center; padding:0 2%; gap:0; }
  :root:not([data-layout="framed"]) .album .snap{ width:25%; flex:none; margin:0 -.4%; }
  :root:not([data-layout="framed"]) .album .snap:nth-child(odd){ margin-top:-10%; }
  :root:not([data-layout="framed"]) .album .snap:nth-child(even){ margin-top:10%; }
}
@media (max-width: 859px){
  :root:not([data-layout="framed"]) .spread{ grid-template-rows:auto minmax(0,1fr); }
  :root:not([data-layout="framed"]) .page.left{ aspect-ratio:4/3; }
  :root:not([data-layout="framed"]) .art{ inset:2% 2% 10% 2%; }
}

/* full layout on squarish pages: keep the whole painting, uncropped, at full page width */
@media (min-width: 860px){
  :root:not([data-layout="framed"])[data-fit="contain"] .art .frame{ inset:auto 0; top:50%; transform:translateY(-50%); aspect-ratio:4/3; }
  :root:not([data-layout="framed"])[data-fit="contain"] .album{ display:grid; grid-template-columns:repeat(2, min(42%, calc(var(--bh) * .27))); justify-content:center; gap:2.5% 5%; padding:0; align-content:center; }
  :root:not([data-layout="framed"])[data-fit="contain"] .album .snap{ width:auto; margin:0; }
}

.bar .now{ font-size:.82rem; color:var(--muted); }

/* scrapbook sized by page height so it never spills off the page */
@media (min-width: 860px){
  .art .album{ display:grid; grid-template-columns:repeat(2, min(44%, calc(var(--bh) * .25))); justify-content:center; align-content:center; gap:3% 6%; padding:0; }
  .art .album .snap{ width:auto; margin:0; }
}
.qlist.cols2{ display:grid; grid-template-columns:1fr 1fr; column-gap:1.4em; }
.qlist.cols2 .soon{ display:none; }
.qlist.cols2 li{ padding:.35em 0; }

/* chapter openers + sources */
blockquote.pull{ margin:1.1em 0 .9em; padding:0; }
blockquote.pull p{ margin:0; font-size:2.05em; line-height:1.15; font-style:italic; color:var(--text); text-wrap:balance; }
blockquote.pull.small{ margin:.4em 0 .5em; }
blockquote.pull.small p{ font-size:1.35em; }
.frame-line{ margin:0 0 1em; color:var(--muted); font-size:.9em; max-width:28em; text-wrap:pretty; }
.spread:not([hidden]) blockquote.pull p{ animation:pullIn 1.4s .3s cubic-bezier(.2,.7,.2,1) both; }
.spread:not([hidden]) .frame-line{ animation:pullIn 1.2s .9s ease-out both; }
@keyframes pullIn{ from{ opacity:0; transform:translateY(6px); } to{ opacity:1; transform:none; } }
.asked-q{ margin:0 0 .4em; font-size:.74em; line-height:1.4; color:var(--muted); }
.asked-q .k, .note .q .k{ font-weight:600; letter-spacing:.02em; }
.clip + .asked-q{ margin-top:1.2em; }
@media (prefers-reduced-motion: reduce){ .spread:not([hidden]) blockquote.pull p, .spread:not([hidden]) .frame-line{ animation:none !important; } }

details.full{ padding:.55em 0; }
details.full summary{ display:flex; flex-wrap:wrap; align-items:baseline; gap:.3em .75em; list-style:none; font-weight:400; font-size:1em; }
details.full summary::-webkit-details-marker{ display:none; }
details.full summary .q{ display:inline; min-width:0; font-size:1.25em; margin:0; }
details.full summary .more{ font-family:var(--serif); font-size:.72em; color:var(--muted); white-space:normal; }
details.full summary:hover .more{ color:var(--ink); text-decoration:underline; }
dialog.reader{ border:0; padding:0; width:min(44rem, 92vw); max-height:86vh; border-radius:6px; background:var(--paper); color:var(--text); box-shadow:0 30px 60px -20px rgba(0,0,0,.6); font-family:var(--serif); }
dialog.reader::backdrop{ background:rgba(22,20,16,.7); }
.reader .rd-in{ position:relative; display:flex; flex-direction:column; max-height:86vh; padding:2rem 2.2rem 1.6rem; }
.reader .rd-close{ position:absolute; top:1rem; right:1rem; }
.reader .rd-k{ margin:0 0 .3rem; font-size:.8rem; color:var(--muted); }
.reader h3{ margin:0 5.5rem 1rem 0; font-family:var(--hand); font-weight:600; color:var(--pen); font-size:1.9rem; line-height:1.1; }
.reader .rd-body{ overflow:auto; font-size:1.05rem; line-height:1.65; padding-right:.4rem; }
.reader .rd-body p{ margin:0 0 .9em; }

/* framed layout: every picture frame is 4:3, as large as the picture area allows */
:root[data-layout="framed"] .art{ container-type:size; }
:root[data-layout="framed"] .art .frame{ inset:auto; left:50%; top:50%; transform:translate(-50%,-50%); width:min(100cqw, 100cqh); height:auto; aspect-ratio:1/1; }
:root[data-layout="framed"] .art .frame[data-ratio]{ top:50%; aspect-ratio:var(--ar); width:min(calc(100cqw - 16px), calc((100cqh - 16px) * var(--ar))); }
.frame[data-nomask], .layer.show .frame[data-nomask]{ -webkit-mask-image:none !important; mask-image:none !important; }
.art .frame[data-pad]{ background:color-mix(in srgb, var(--paper) 92%, #b9a57c 8%); }
.art .frame[data-pad] .pic{ inset:4.5%; width:91%; height:91%; }
/* square frames: show every real picture whole on a paper mat, never cropped */
:root[data-layout="framed"] .art .frame:has(img.pic){ background:color-mix(in srgb, var(--paper) 92%, #b9a57c 8%); }
:root[data-layout="framed"] .art .frame img.pic, :root[data-layout="framed"] .layer.show .frame img.pic{ inset:4.5%; width:91%; height:91%; object-fit:contain; transform-origin:50% 50% !important; }
:root[data-layout="framed"] .layer.show .frame:not([data-photo]) img.pic{ animation:matZoom 14s ease-in-out infinite alternate !important; }
@keyframes matZoom{ from{ transform:scale(1); } to{ transform:scale(1.04); } }
@media (prefers-reduced-motion: reduce){ :root[data-layout="framed"] .layer.show .frame img.pic{ animation:none !important; } }

html body .art .album.duo, html body .album.duo{ display:grid !important; grid-template-columns:1fr !important; place-content:center !important; align-content:center !important; gap:0 !important; padding:2% 6% !important; flex-wrap:nowrap; }
html body .art .album.duo .snap, html body .album.duo .snap{ width:min(68%, calc(var(--bh, 100vh) * .62)) !important; max-width:none !important; flex:none !important; margin:0 !important; padding:3.5% 3.5% 9% !important; }
html body .art .album.duo .snap:nth-child(1), html body .album.duo .snap:nth-child(1){ justify-self:start !important; }
html body .art .album.duo .snap:nth-child(2), html body .album.duo .snap:nth-child(2){ justify-self:end !important; margin-top:-5% !important; }
html body .album.duo .snap .ph{ aspect-ratio:4/3 !important; width:100% !important; }
html body .album.duo .snap:nth-child(1) .cap{ text-align:left !important; left:6% !important; right:auto !important; }
html body .album.duo .snap:nth-child(2) .cap{ text-align:right !important; right:6% !important; left:auto !important; }
html body .album.duo.n3 .snap{ width:min(50%, calc(var(--bh, 100vh) * .46)) !important; padding:3% 3% 8% !important; }
html body .album.duo.n3 .snap:nth-child(2){ justify-self:center !important; margin-top:-9% !important; }
html body .album.duo.n3 .snap:nth-child(3){ justify-self:end !important; margin-top:-9% !important; z-index:3; }
html body .album.duo.n3 .snap:nth-child(2) .cap{ text-align:left !important; left:6% !important; right:auto !important; }

/* pile collage (Ch8 dogs) */
html body .art .album.pile{ display:block !important; position:absolute; inset:0; padding:0 !important; container-type:size; }
html body .art .album.pile .snap{ position:absolute !important; margin:0 !important; padding:2.2cqmin 2.2cqmin 2.2cqmin !important; flex:none !important; }
html body .art .album.pile .snap .ph{ aspect-ratio:var(--ar) !important; width:100% !important; }
html body .art .album.pile .snap .pic{ object-position:50% 50% !important; }
html body .art .album.pile .snap .cap{ display:none; }
html body .art .album.pile .p-couch{ width:40cqmin !important; left:calc(50% - 48cqmin); top:calc(50% - 48cqmin); z-index:1; }
html body .art .album.pile .p-kiss{ width:30cqmin !important; left:calc(50% + 10cqmin); top:calc(50% - 49cqmin); z-index:1; }
html body .art .album.pile .p-bed{ width:42cqmin !important; left:calc(50% - 47cqmin); top:calc(50% + 1.5cqmin); z-index:1; }
html body .art .album.pile .p-howl{ width:34cqmin !important; left:calc(50% + 6cqmin); top:calc(50% - 2cqmin); z-index:1; }
.more-below details.full summary .more{ display:block; flex-basis:100%; }

/* real photos: white snapshot border, soft shadow, slight tilt; no zoom on load */
html body .art .frame[data-photo]{ background:#fffdf7 !important; -webkit-mask-image:none !important; mask-image:none !important; animation:none !important; filter:none !important;
  box-shadow:0 10px 22px -10px rgba(40,30,10,.6), 0 2px 5px rgba(40,30,10,.18) !important; transform:translate(-50%,-50%) rotate(-1.2deg) !important;
  width:min(calc(100cqw - 28px), calc((100cqh - 28px) * var(--ar, 1.333))) !important; aspect-ratio:var(--ar, 4/3) !important; }
html body .art .frame[data-photo]::after{ content:""; position:absolute; inset:0; background-image:var(--grain); mix-blend-mode:multiply; opacity:.35; pointer-events:none; }
html body .art .frame[data-photo] img.pic, html body .layer.show .frame[data-photo] img.pic{ inset:3.5% !important; width:93% !important; height:93% !important; object-fit:cover !important; animation:none !important; transform:none !important; }
html body .art .album.pile .q-a, html body .art .album.pile .q-b, html body .art .album.pile .q-c, html body .art .album.pile .q-d{ width:33cqmin !important; z-index:1; }
html body .art .album.pile .q-a{ left:calc(50% - 43cqmin); top:calc(50% - 48cqmin); }
html body .art .album.pile .q-b{ left:calc(50% + 6cqmin); top:calc(50% - 46cqmin); }
html body .art .album.pile .q-c{ left:calc(50% - 41cqmin); top:calc(50% + 2.5cqmin); }
html body .art .album.pile .q-d{ left:calc(50% + 8cqmin); top:calc(50% + 1cqmin); }

/* ===== 7a: Midnight & gilt ===== */
:root{ --gilt:#c9a86a; --gilt-ink:#94773f; --night:#172640; --display:"Cormorant Garamond", "Literata", Georgia, serif; }
:root[data-theme="light"]{ --desk:#e6e0d4; --paper:#f8f4ea; --paper-2:#f1ead9; --cloth:#172640; --ink:#172640; --pen:#2c5a8c; --ink-soft:#ebe4d3; --line:#e2d8c3; --muted:#6a6152; }
:root[data-theme="light"] body{ background-color:var(--desk) !important; background-image:radial-gradient(85% 70% at 50% 42%, #f4f0e8, #d9d1c1) !important; }
html body .cover{ box-shadow:inset 0 0 0 1px rgba(201,168,106,.55), inset 0 0 0 5px var(--cloth), inset 0 0 0 6px rgba(201,168,106,.28), 0 28px 50px -22px rgba(20,24,40,.6), 0 4px 10px rgba(20,24,40,.14) !important; }
#closedCover > div:first-child::after{ content:""; position:absolute; inset:16px; border:1px solid rgba(201,168,106,.6); box-shadow:inset 0 0 0 4px transparent, inset 0 0 0 5px rgba(201,168,106,.25); border-radius:3px; pointer-events:none; }
.ribbon{ background:linear-gradient(90deg, #a3864f, #c9a86a 45%, #dcc28f) !important; }
.bar{ padding:.5rem 0 0 !important; min-height:0; }

/* type */
.inner h2.h, .inner h3.h, .opener .h{ font-family:var(--display); font-size-adjust:.47; font-weight:600; color:var(--ink); letter-spacing:-.005em; }
.inner > h3.h::after{ content:""; display:block; width:54px; height:7px; margin:.6em 0 .1em;
  background:linear-gradient(var(--gilt),var(--gilt)) left center/22px 1px no-repeat, linear-gradient(var(--gilt),var(--gilt)) right center/22px 1px no-repeat, radial-gradient(circle, var(--gilt) 2px, transparent 2.6px) center/7px 7px no-repeat; }
.running{ font-style:normal !important; text-transform:uppercase; letter-spacing:.18em; font-size:.62em !important; color:var(--gilt-ink) !important; }
.opener .label{ text-transform:uppercase; letter-spacing:.22em; font-size:.68em !important; color:var(--gilt-ink) !important; }
blockquote.pull p{ font-family:var(--display); font-size-adjust:.47; font-weight:500; color:var(--ink) !important; }
.folio{ font-family:var(--display); font-size:.85rem !important; color:var(--gilt-ink) !important; letter-spacing:.04em; }
.clip.speaking{ background:linear-gradient(transparent 56%, rgba(201,168,106,.34) 56%) !important; }
.caption{ color:var(--pen) !important; }

/* listening bar */
html body .nav.lbar{ position:relative !important; inset:auto !important; display:flex !important; align-items:center; gap:12px; width:min(var(--bw, 900px), calc(100vw - 24px)); margin:1.8rem auto 0 !important; padding:8px 10px 8px 8px; background:var(--night); color:#efe6d2; border-radius:999px; box-shadow:0 14px 30px -16px rgba(20,24,40,.7); pointer-events:auto !important; font-family:var(--serif); }
.lbar :focus-visible{ outline:2px solid var(--gilt); outline-offset:2px; }
.lb-play{ width:46px; height:46px; flex:none; border:0; border-radius:50%; background:var(--gilt); color:var(--night); display:grid; place-items:center; cursor:pointer; transition:background .2s; }
.lb-play:hover{ background:#d8bb83; }
.lb-play svg{ width:16px; height:16px; }
.lb-mid{ flex:1; min-width:0; display:flex; flex-direction:column; gap:6px; padding-left:2px; }
.lb-actions{ display:flex; flex:none; align-items:center; gap:12px; max-width:100%; }
.lb-now{ margin:0; display:flex; flex-wrap:wrap; align-items:baseline; gap:.2em .55em; font:italic 500 1.12rem/1.3 var(--display); overflow-wrap:anywhere; }
.lb-chn{ flex:none; font:400 .62rem/1 var(--serif); letter-spacing:.16em; opacity:.6; }
.lb-chn:empty, .lb-state:empty{ display:none; }
.lb-state{ flex-basis:100%; min-width:0; font:italic 400 .8rem/1.4 var(--serif); color:#d9c79f; }
.lb-state::before{ content:"· "; opacity:.6; }
.lb-segs{ display:grid; grid-template-columns:repeat(var(--n, 9), minmax(0,1fr)); gap:3px; }
.lb-seg{ position:relative; height:14px; padding:0; border:0; background:none; cursor:pointer; }
.lb-seg::before{ content:""; position:absolute; left:0; right:0; top:5px; height:4px; border-radius:2px; background:linear-gradient(90deg, var(--gilt) var(--f, 0%), rgba(255,255,255,.17) var(--f, 0%)); transition:background .4s; }
.lb-seg:hover::before{ box-shadow:0 0 0 1.5px rgba(201,168,106,.55); }
.lb-arrow{ width:40px; height:40px; flex:none; border:0; border-radius:50%; background:transparent; color:#efe6d2; display:grid; place-items:center; cursor:pointer; }
.lb-arrow:hover{ background:rgba(255,255,255,.08); }
.lb-arrow[disabled]{ opacity:.3; cursor:default; background:transparent; }
.lb-arrow svg{ width:15px; height:15px; }
.lb-chapters{ flex:none; min-height:40px; padding:0 16px; border:1px solid rgba(201,168,106,.6); border-radius:999px; background:transparent; color:#efe6d2; font:500 .8rem/1 var(--serif); letter-spacing:.06em; cursor:pointer; }
.lb-chapters:hover, .lb-chapters[aria-expanded="true"]{ background:rgba(201,168,106,.16); }
.lb-menu{ position:absolute; right:6px; bottom:calc(100% + 10px); width:min(310px, calc(100vw - 24px)); max-height:min(62dvh, 520px); overflow:auto; background:#fbf8f1; color:#2a2823; border-radius:10px; box-shadow:0 24px 50px -14px rgba(20,24,40,.5), 0 0 0 1px rgba(23,38,64,.06); padding:8px 0; z-index:40; }
.lb-menu[hidden]{ display:none; }
.lb-menu h2{ margin:0; padding:6px 16px 8px; font:500 .6rem/1 var(--serif); letter-spacing:.2em; text-transform:uppercase; color:var(--gilt-ink); }
.lb-menu button{ display:flex; gap:12px; align-items:baseline; width:100%; min-height:42px; padding:8px 16px; border:0; background:none; text-align:left; color:inherit; cursor:pointer; }
.lb-menu button:hover{ background:#f3ecdc; }
.lb-menu button[aria-current="true"]{ background:#efe6d2; }
.lb-menu button[aria-current="true"] .t{ font-weight:600; }
.lb-menu .n{ flex:none; width:1.1em; font:500 1rem/1 var(--display); color:var(--gilt-ink); }
.lb-menu .t{ font:500 1.08rem/1.15 var(--display); font-size-adjust:.47; }
@media (max-width:640px){
  .lb-chn{ display:none; }
  html body .nav.lbar{ display:grid !important; grid-template-columns:46px minmax(0,1fr); gap:6px; border-radius:20px; }
  .lb-mid{ grid-column:2; grid-row:1; }
  .lb-actions{ grid-column:1 / -1; grid-row:2; flex-wrap:wrap; justify-content:flex-end; gap:6px; }
  .lb-arrow{ width:36px; }
  .lb-speed{ margin-left:auto; }
  .lb-chapters{ padding:0 12px; }
}
:root[data-theme="dark"] .lb-menu{ background:#24262b; color:#ece6d8; } :root[data-theme="dark"] .lb-menu button:hover, :root[data-theme="dark"] .lb-menu button[aria-current="true"]{ background:#30333a; }

/* All his answers (back pages) */
.all-list .all-note{ margin:0 0 .9rem; font-size:.84em; color:var(--muted); text-wrap:pretty; }
.all-list details.full summary .q{ font-family:var(--display); font-size:1.32em; font-weight:500; color:var(--ink); }
.spread.responses:not([hidden]){ display:block; }
.response-page{ height:100%; border-radius:4px; }
.response-page .inner{ max-width:48rem; margin-inline:auto; padding:clamp(1rem, 3vw, 2.8rem); }
.response-page details.full{ margin-block:1.3rem; }
.lbar .lb-play[hidden], .lbar .lb-speed[hidden], .lbar .lb-segs[hidden]{ display:none; }
.lbar.reading-mode .lb-mid{ padding:4px 8px; }
.lb-sharing{ margin-top:8px; padding-top:8px; border-top:1px solid var(--line); }
.lb-sharing button{ font-size:.85rem; }
.lb-sharing button[aria-disabled="true"]{ opacity:.6; cursor:wait; }
.lb-sharing :focus-visible{ outline-color:var(--ink); }
#shareStatus, #shareLinkLabel{ margin:0; padding:4px 16px; font-size:.8rem; line-height:1.5; overflow-wrap:anywhere; }
#shareStatus:empty{ padding:0; }
#shareLinkLabel{ display:block; }
#shareLinkLabel[hidden]{ display:none; }
#shareLink{ display:block; width:100%; min-height:44px; margin-top:4px; padding:6px; font:inherit; color:var(--text); background:var(--paper); border:1px solid var(--line); border-radius:4px; }
@media (max-width:640px){
  html body .nav.lbar.reading-mode{ grid-template-columns:minmax(0,1fr); }
  .lbar.reading-mode .lb-mid{ grid-column:1; }
}

/* speaking paragraph: soft tint over the whole paragraph + gilt rule (replaces the partial underline band) */
html body .clip.speaking{ background:rgba(201,168,106,.13) !important; box-shadow:inset 3px 0 0 var(--gilt); border-radius:2px 6px 6px 2px; }
.lb-speed{ flex:none; min-width:44px; height:40px; padding:0 10px; border:0; border-radius:999px; background:transparent; color:#efe6d2; font:500 .85rem/1 var(--serif); letter-spacing:.02em; cursor:pointer; font-variant-numeric:tabular-nums; }
.lb-speed:hover{ background:rgba(255,255,255,.08); }

/* always-visible scrollbars on anything that scrolls */
.inner, .reader .rd-body, .lb-menu, dialog.reader, .lightbox, .lb-stage{ scrollbar-width:thin; scrollbar-color:rgba(148,119,63,.75) rgba(23,38,64,.08); scrollbar-gutter:stable; }
.inner::-webkit-scrollbar, .reader .rd-body::-webkit-scrollbar, .lb-menu::-webkit-scrollbar, dialog.reader::-webkit-scrollbar, .lightbox::-webkit-scrollbar, .lb-stage::-webkit-scrollbar{ width:10px; height:10px; -webkit-appearance:none; }
.inner::-webkit-scrollbar-track, .reader .rd-body::-webkit-scrollbar-track, .lb-menu::-webkit-scrollbar-track, dialog.reader::-webkit-scrollbar-track, .lightbox::-webkit-scrollbar-track, .lb-stage::-webkit-scrollbar-track{ background:rgba(23,38,64,.06); border-radius:6px; }
.inner::-webkit-scrollbar-thumb, .reader .rd-body::-webkit-scrollbar-thumb, .lb-menu::-webkit-scrollbar-thumb, dialog.reader::-webkit-scrollbar-thumb, .lightbox::-webkit-scrollbar-thumb, .lb-stage::-webkit-scrollbar-thumb{ background:rgba(148,119,63,.7); border-radius:6px; border:2px solid transparent; background-clip:padding-box; min-height:36px; }
.inner::-webkit-scrollbar-thumb:hover, .reader .rd-body::-webkit-scrollbar-thumb:hover, .lb-menu::-webkit-scrollbar-thumb:hover{ background-color:rgba(148,119,63,.95); }
.lightbox, .lightbox .lb-stage{ scrollbar-color:rgba(201,168,106,.8) rgba(255,255,255,.1); }

/* Keep small screens readable; scroll long pages instead of shrinking their text. */
.inner, .caption, .lb-cap, .lb-album figcaption{ overflow-wrap:anywhere; }
.inner:focus-visible{ outline-offset:-3px; }
.inner .pen{ max-inline-size:100%; }
@media (min-width:540px) and (max-height:500px){
  .spread{ grid-template-columns:1fr 1fr; grid-template-rows:1fr; }
  .page.left{ border-radius:4px 0 0 4px; }
  .page.right{ border-radius:0 4px 4px 0; }
  .inner{ padding:1rem; }
  .art{ inset:4% 4% 16%; }
  .caption{ font-size:.75rem; }
}

#coldOpen:not([hidden]){ display:flex; flex-direction:column; padding:13vh 6vw 7vh; }
#coSheet{ position:relative; flex:1; min-height:0; overflow:auto; overflow-wrap:anywhere; }
#coSig{ max-width:100%; }
.co-actions{ position:relative; display:flex; gap:.7rem; flex-wrap:wrap; align-items:center; margin-top:1rem; }
.co-actions [hidden]{ display:none !important; }
.co-actions .btn{ min-height:52px; font-size:1rem; white-space:normal; }
#coResume{ flex-basis:100%; max-width:42rem; margin:0 0 .4rem; font-size:.9rem; line-height:1.6; color:#5a5246; overflow-wrap:anywhere; }
#coldOpen.returning{ overflow-y:auto !important; }
#coldOpen.returning #coSheet{ flex:1 0 auto; overflow:visible; }
#coldOpen.returning .co-actions{ flex-shrink:0; }
#coldOpen.returning :focus-visible{ outline-color:var(--night); }
#coRestart{ color:var(--night); border-color:var(--night); }
#coRestart:hover{ background:color-mix(in srgb, var(--night) 8%, transparent); }
#coRead{ max-width:calc(100% - 2rem); white-space:normal; justify-content:center; text-align:center; }
#closedCover > div:first-child > div > div:first-child{ font-size:max(1.25rem, calc(var(--bw, 1200px) * .03)) !important; }
#closedCover > div:first-child > div > div:last-child{ font-size:max(.75rem, calc(var(--bw, 1200px) * .011)) !important; }
@media (max-height:500px){
  #closedCover > div:first-child > div{ align-self:start; margin-top:0 !important; padding:3% !important; }
}

.lightbox{ height:100dvh; padding:calc(4.5rem + env(safe-area-inset-top,0px)) 1rem calc(1rem + env(safe-area-inset-bottom,0px)); overflow:auto; }
.lightbox[open]{ justify-content:flex-start; }
.lb-stage{ flex:none; width:100%; max-width:100%; max-height:none; }
.lb-img{ max-width:100%; max-height:max(8rem, calc(100dvh - 8rem)); }
.lb-album{ width:100%; }
.lb-cap{ flex:none; text-align:center; }
dialog.reader{ max-height:86dvh; overflow:auto; }
.reader .rd-in{ max-height:none; padding:clamp(1rem, 4vw, 2.2rem); overflow-wrap:anywhere; }
.reader .rd-close{ position:sticky; top:0; right:auto; align-self:flex-end; flex:none; margin-bottom:1rem; background:var(--paper); z-index:1; }
.reader h3{ margin-right:0; }
.reader .rd-body{ overflow:visible; }