/* ============================================================
   Y4 tenure portfolio — reader shell v2 (2026-09-05, after Howard's sketch)
   design-options/references/g-howard-sketch/README.md

   The viewport is one e-reader page. Status line on top, location line
   at the bottom, the text scrolls between them with no scrollbar. The
   reader sets page colour, face, size, spacing, margins, alignment.
   Nothing is decorated; the device's own behaviour is the design.
   ============================================================ */

/* ---- page colours: default is a slightly grey e-ink panel ---- */
:root, :root[data-page="grey"]{
  --page:#e3e3df; --page-2:#d8d8d3; --ink:#17171a; --ink-2:#4a4a4c; --ink-3:#7a7a7c;
  --rule:#a9a9a5; --rule-2:#c6c6c1; --sel:#17171a; --sel-ink:#e3e3df;
  --grain-op:.07;
}
:root[data-page="white"]{ --page:#f8f8f6; --page-2:#ececea; --ink:#141416; --ink-2:#48484a; --ink-3:#7c7c7e; --rule:#b4b4b0; --rule-2:#d4d4d0; --sel:#141416; --sel-ink:#f8f8f6; --grain-op:.055; }
:root[data-page="sepia"]{ --page:#eee4d0; --page-2:#e2d6bf; --ink:#2b2418; --ink-2:#5c523f; --ink-3:#8a7f69; --rule:#b8ab90; --rule-2:#d3c8b0; --sel:#2b2418; --sel-ink:#eee4d0; --grain-op:.07; }
:root[data-page="dark"]{ --page:#161617; --page-2:#222224; --ink:#d9d9d5; --ink-2:#a3a3a0; --ink-3:#6f6f6d; --rule:#454546; --rule-2:#333335; --sel:#d9d9d5; --sel-ink:#161617; --grain-op:.06; }

:root{
  --serif:"Literata",Georgia,"Times New Roman",serif;
  --sans:"Inter",-apple-system,system-ui,"Helvetica Neue",Arial,sans-serif;
  --face:var(--serif);
  --size:18px; --lead:1.6; --measure:42rem;
  --bar:2.6rem;
}
:root[data-face="sans"]{ --face:var(--sans); }
:root[data-size="1"]{ --size:15px } :root[data-size="2"]{ --size:16.5px } :root[data-size="3"]{ --size:18px } :root[data-size="4"]{ --size:20px } :root[data-size="5"]{ --size:22.5px }
:root[data-lead="tight"]{ --lead:1.42 } :root[data-lead="normal"]{ --lead:1.6 } :root[data-lead="loose"]{ --lead:1.85 }
/* page width: the reader picks the text column (until 2026-10-18 this was "Margins", with the scale inverted) */
:root[data-width="narrow"]{ --measure:34rem } :root[data-width="medium"]{ --measure:42rem } :root[data-width="wide"]{ --measure:52rem }

*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;background:var(--page);color:var(--ink);
  font-family:var(--face);font-size:var(--size);line-height:var(--lead);font-optical-sizing:auto;
  display:grid;grid-template-rows:var(--bar) 1fr var(--bar);overflow:hidden;
  -webkit-font-smoothing:antialiased;
}
/* the panel's matte surface (2026-10-18, Howard: "the texture of a matte screen"). It lies over
   everything, ink included, the way an anti-glare film does: fine light and dark pores plus a slow
   unevenness. Plain alpha layers, no blend modes, so scrolling stays cheap. */
body::after{
  content:"";position:fixed;inset:0;pointer-events:none;z-index:40;opacity:var(--grain-op);
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='f' x='0' y='0' width='100%25' height='100%25'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.95' numOctaves='3' seed='7' stitchTiles='stitch'/%3E%3CfeColorMatrix type='matrix' values='0 0 0 0 0  0 0 0 0 0  0 0 0 0 0  0 0 0 2 -1'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url%28%23f%29'/%3E%3C/svg%3E"),url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='f' x='0' y='0' width='100%25' height='100%25'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.95' numOctaves='3' seed='19' stitchTiles='stitch'/%3E%3CfeColorMatrix type='matrix' values='0 0 0 0 1  0 0 0 0 1  0 0 0 0 1  0 0 0 -2 1'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url%28%23f%29'/%3E%3C/svg%3E"),url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='720' height='720'%3E%3Cfilter id='f' x='0' y='0' width='100%25' height='100%25'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.0045' numOctaves='2' seed='3' stitchTiles='stitch'/%3E%3CfeColorMatrix type='matrix' values='0 0 0 0 0  0 0 0 0 0  0 0 0 0 0  0 0 0 .6 -.3'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url%28%23f%29'/%3E%3C/svg%3E");
  background-size:180px 180px,180px 180px,720px 720px;
}
/* on a high-density screen the pores are drawn at device pixels, as fine as the real film */
@media (min-resolution:2dppx){
  body::after{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='360' height='360'%3E%3Cfilter id='f' x='0' y='0' width='100%25' height='100%25'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.95' numOctaves='3' seed='7' stitchTiles='stitch'/%3E%3CfeColorMatrix type='matrix' values='0 0 0 0 0  0 0 0 0 0  0 0 0 0 0  0 0 0 2 -1'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url%28%23f%29'/%3E%3C/svg%3E"),url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='360' height='360'%3E%3Cfilter id='f' x='0' y='0' width='100%25' height='100%25'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.95' numOctaves='3' seed='19' stitchTiles='stitch'/%3E%3CfeColorMatrix type='matrix' values='0 0 0 0 1  0 0 0 0 1  0 0 0 0 1  0 0 0 -2 1'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url%28%23f%29'/%3E%3C/svg%3E"),url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='720' height='720'%3E%3Cfilter id='f' x='0' y='0' width='100%25' height='100%25'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.0045' numOctaves='2' seed='3' stitchTiles='stitch'/%3E%3CfeColorMatrix type='matrix' values='0 0 0 0 0  0 0 0 0 0  0 0 0 0 0  0 0 0 .6 -.3'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url%28%23f%29'/%3E%3C/svg%3E")}
}
@media print{ body::after{display:none} }
a{color:inherit}

/* ============ the chrome: small sans, quiet ============ */
.status,.loc{
  position:relative;z-index:5;display:flex;align-items:center;justify-content:space-between;gap:1rem;
  padding:0 1rem;font-family:var(--sans);font-size:12px;color:var(--ink-3);letter-spacing:.01em;
  background:var(--page);
}
.status{border-bottom:1px solid var(--rule-2)}
.loc{border-top:1px solid var(--rule-2)}
.status .left,.status .right{display:flex;align-items:center;gap:.6rem;min-width:0}
.status .name{color:var(--ink-2);text-decoration:none;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ic,.tx{
  appearance:none;background:transparent;border:0;padding:.25rem .45rem;cursor:pointer;color:var(--ink-2);
  font-family:var(--sans);font-size:12px;line-height:1;text-decoration:none;border-radius:2px;
}
.ic{font-size:17px;padding:.1rem .4rem}
.ic.back{font-size:22px;padding:0 .35rem .1rem}
.tx{border:1px solid var(--rule);padding:.28rem .55rem}
.aa-btn{font-family:var(--serif);font-size:13px}
.ic:hover,.tx:hover{color:var(--ink);background:var(--page-2)}
.ic:focus-visible,.tx:focus-visible,.row:focus-visible,.swatch:focus-visible,.seg button:focus-visible,.reset:focus-visible{outline:2px solid var(--ink);outline-offset:2px}
.prog{width:64px;height:2px;background:var(--rule-2);display:inline-block}
.prog i{display:block;height:100%;width:0;background:var(--ink-2)}
.pct{min-width:2.6em;text-align:right;font-variant-numeric:tabular-nums}
.loc .l{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.loc .r{font-variant-numeric:tabular-nums}
@media (max-width:40rem){ .prog{display:none} }

/* ============ the screen: scrolls, but shows no scrollbar ============ */
.screen{
  position:relative;z-index:1;overflow-y:auto;overscroll-behavior:contain;
  scrollbar-width:none;
}
.screen::-webkit-scrollbar{display:none}
.page,.part{max-width:var(--measure);margin:0 auto;padding:clamp(1.6rem,5vh,3.2rem) 1.4rem 4rem}

/* ============ chapter opening — like the Foreword page ============ */
.chapter{text-align:center;margin:1.2rem 0 2.4rem}
.chapter .orn{margin:0 0 1.2rem;font-size:1.3em;color:var(--ink-3)}
.chapter h1{
  font-weight:600;font-variant-caps:small-caps;letter-spacing:.06em;font-size:1.65em;line-height:1.2;margin:0;
  display:inline-block;padding-bottom:.35em;border-bottom:2px solid var(--ink);
}
.chapter .year{margin:1.1rem 0 0;font-family:var(--sans);font-size:12px;color:var(--ink-3);letter-spacing:.04em;text-transform:uppercase}
.chapter .chip{
  display:inline-block;margin:.9rem 0 0;padding:.15em .6em .2em;background:var(--sel);color:var(--sel-ink);
  font-family:var(--sans);font-size:11px;letter-spacing:.06em;text-transform:uppercase;
}

/* ============ prose — book setting: indent, no gaps ============ */
.prose{text-align:justify;hyphens:auto;-webkit-hyphens:auto;hyphenate-limit-chars:6 3 3}
:root[data-align="left"] .prose{text-align:left;hyphens:manual}
.prose p{margin:0}
.prose p + p{text-indent:1.5em}
.prose h2,.prose h3,.prose h4{text-align:center;hyphens:manual;font-weight:600}
.prose h2{font-variant-caps:small-caps;letter-spacing:.05em;font-size:1.2em;margin:2.2em 0 1em}
.prose h2::before{content:"";display:block;width:3.5rem;height:1px;background:var(--ink-2);margin:0 auto 1em}
.prose h3{font-size:1.05em;font-style:italic;font-weight:500;margin:1.8em 0 .7em}
.prose h4{font-family:var(--sans);font-size:.72em;letter-spacing:.08em;text-transform:uppercase;color:var(--ink-2);margin:1.6em 0 .6em}
.prose ul,.prose ol{margin:.8em 0;padding-left:1.5em;text-align:left}
.prose li{margin:.25em 0}
.prose li::marker{color:var(--ink-3)}
.prose blockquote{margin:1.2em 1.4em;padding:0 0 0 1em;border-left:1px solid var(--rule);color:var(--ink-2);font-size:.96em;text-align:left}
.prose blockquote p + p{text-indent:0;margin-top:.5em}
.prose hr{border:0;text-align:center;margin:1.8em 0;height:auto}
.prose hr::after{content:"⁂";color:var(--ink-3);font-size:1em}
.prose a{text-decoration-thickness:1px;text-underline-offset:.16em;text-decoration-color:var(--ink-3)}
.prose strong{font-weight:600}
.prose em{font-style:italic}
.prose code{font-family:ui-monospace,Menlo,monospace;font-size:.86em;background:var(--page-2);padding:.05em .3em}
/* a gap Howard still has to write — never mistakable for finished prose */
.gap{display:inline-block;font-family:var(--sans);font-size:.78em;text-indent:0;color:var(--ink-2);border:1px dashed var(--ink-3);padding:.1em .45em;hyphens:none;text-align:left}
/* tables: ruled, as printed */
.table-wrap{overflow-x:auto;margin:1.3em 0;font-size:.86em;text-align:left;hyphens:manual}
.table-wrap table{border-collapse:collapse;width:100%;font-variant-numeric:tabular-nums;border-top:2px solid var(--ink);border-bottom:1px solid var(--ink)}
.table-wrap th{font-family:var(--sans);font-size:.8em;font-weight:500;letter-spacing:.05em;text-transform:uppercase;color:var(--ink-2);padding:.55em .6em;border-bottom:1px solid var(--ink);vertical-align:bottom}
.table-wrap td{padding:.42em .6em;border-bottom:1px solid var(--rule-2);vertical-align:top}
.table-wrap tr:last-child td{border-bottom:0}

/* ============ part title page ============ */
.part{text-align:center}
.partno{font-family:var(--sans);font-size:12px;letter-spacing:.12em;text-transform:uppercase;color:var(--ink-3);margin:2.5rem 0 1rem}
.ptitle{font-weight:600;font-variant-caps:small-caps;letter-spacing:.06em;font-size:1.9em;line-height:1.15;margin:0 0 1rem;display:inline-block;padding-bottom:.3em;border-bottom:2px solid var(--ink)}
.blurb{font-style:italic;color:var(--ink-2);margin:0 auto 2.4rem;max-width:30em}
.chapters{list-style:none;margin:0 auto;padding:0;text-align:left;border-top:1px solid var(--rule)}
.chapters li{border-bottom:1px solid var(--rule-2)}
.chapters li a,.chapters li.planned{display:flex;justify-content:space-between;gap:1rem;align-items:baseline;padding:.75em .2em;text-decoration:none}
.chapters li a:hover .t{text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:.2em}
.chapters .v{font-family:var(--sans);font-size:11px;letter-spacing:.05em;text-transform:uppercase;color:var(--ink-3);white-space:nowrap}
.chapters li.planned{color:var(--ink-3)} .chapters li.planned .t{font-style:italic}

/* ---- how to use this site (Part 1's title page) ---- */
.guide{margin:3rem 0 0;text-align:left}
.guide h2{font-weight:600;font-variant-caps:small-caps;letter-spacing:.05em;font-size:1.2em;text-align:center;margin:0 0 1rem}
.guide h2::before{content:"";display:block;width:3.5rem;height:1px;background:var(--ink-2);margin:0 auto 1em}
.guide dl{margin:0;border-top:1px solid var(--rule)}
.guide dl > div{display:grid;grid-template-columns:5.2rem 1fr;gap:1rem;align-items:baseline;padding:.55em .2em;border-bottom:1px solid var(--rule-2)}
.guide dt{font-family:var(--sans);font-size:12px;color:var(--ink-2);white-space:nowrap}
.guide dt .ic,.guide dt .tx{cursor:default;display:inline-block}
.guide dt .kw{font-size:11px;letter-spacing:.05em;text-transform:uppercase;color:var(--ink-3)}
.guide dd{margin:0;font-size:.86em;line-height:1.45;color:var(--ink)}
@media (max-width:40rem){ .guide dl > div{grid-template-columns:3.6rem 1fr;gap:.6rem} }

/* ============ prev / next ============ */
.pager{display:grid;grid-template-columns:1fr 1fr;gap:1rem;margin-top:3.5rem;padding-top:1rem;border-top:1px solid var(--rule-2);text-align:left}
.pager a{display:flex;flex-direction:column;gap:.25rem;text-decoration:none}
.pager .next{text-align:right;align-items:flex-end}
.pager .k{font-family:var(--sans);font-size:11px;letter-spacing:.05em;text-transform:uppercase;color:var(--ink-3)}
.pager .t{font-size:.95em}
.pager a:hover .t{text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:.2em}

/* ============ the cover — type only (photo slot dropped 2026-10-18) ============ */
.cover{display:flex;flex-direction:column;padding:0}
.cover-top{flex:1 0 auto;display:flex;flex-direction:column;align-items:center;justify-content:center;padding:2rem 1.5rem;text-align:center}
.ctitle{font-weight:500;font-size:clamp(2rem,6vw,3.4rem);letter-spacing:-.01em;line-height:1.05;margin:0 0 .8rem}
.cmeta{margin:0;font-family:var(--sans);font-size:13px;line-height:1.6;color:var(--ink-2);letter-spacing:.03em}
.start{
  margin:clamp(1.6rem,6vh,3.2rem) 0 0;font-family:var(--sans);font-size:12px;letter-spacing:.14em;text-transform:uppercase;
  color:var(--ink-2);text-decoration:none;border:1px solid var(--rule);padding:.6em 1.2em;
}
.start:hover{background:var(--sel);color:var(--sel-ink);border-color:var(--sel)}
.cname{
  align-self:flex-end;margin:0 clamp(1rem,5vw,3.5rem) clamp(1rem,6vh,3rem);
  display:flex;flex-direction:column;align-items:flex-end;
  font-family:var(--sans);font-weight:500;font-size:clamp(2.2rem,8vw,5.2rem);line-height:.95;letter-spacing:.02em;color:var(--ink);
}

/* ============ the short contents at the left — wide screens only ============ */
.side{display:none}
@media (min-width:75rem){
  :root{--side:15.5rem}
  .side{
    display:block;position:fixed;z-index:3;top:var(--bar);bottom:var(--bar);left:0;width:var(--side);
    overflow-y:auto;scrollbar-width:none;padding:1.6rem 1rem 1.6rem 1.2rem;
    border-right:1px solid var(--rule-2);font-family:var(--sans);font-size:12.5px;line-height:1.35;
  }
  .side::-webkit-scrollbar{display:none}
  .side ol,.side ul{list-style:none;margin:0;padding:0}
  .side > ol > li{margin:0 0 .15rem}
  .side a{display:block;text-decoration:none;color:var(--ink-3);padding:.32rem .4rem;border-radius:2px}
  .side a:hover{color:var(--ink);background:var(--page-2)}
  .side a:focus-visible{outline:2px solid var(--ink);outline-offset:1px}
  .side .s{display:flex;gap:.55rem;color:var(--ink-2)}
  .side .s .n{min-width:1em;color:var(--ink-3);font-variant-numeric:tabular-nums}
  .side .s.here{color:var(--ink);font-weight:500}
  .side ul{margin:.15rem 0 .5rem 1.55rem;border-left:1px solid var(--rule-2)}
  .side .p{padding:.28rem .4rem .28rem .7rem;border-radius:0}
  .side .p.here{color:var(--ink);font-weight:500;box-shadow:inset 2px 0 0 var(--ink)}
  .side ~ .screen{padding-left:var(--side)}
}

/* ============ Go To ============ */
.goto{
  position:absolute;z-index:8;top:var(--bar);left:0;right:0;bottom:var(--bar);overflow-y:auto;scrollbar-width:none;
  background:var(--page);border-bottom:1px solid var(--rule);
  font-family:var(--sans);font-size:14px;color:var(--ink);
}
.goto::-webkit-scrollbar{display:none}
.goto[hidden]{display:none}
.goto > *,.goto details{max-width:34rem;margin:0 auto;display:block}
.goto-head{display:flex;justify-content:space-between;align-items:center;padding:1rem 1rem .6rem;font-size:15px;font-weight:500;border-bottom:1px solid var(--ink)}
.goto-head .x{appearance:none;background:none;border:0;font-size:22px;line-height:1;cursor:pointer;color:var(--ink-2);padding:0 .3rem}
.goto .row{display:flex;align-items:center;gap:.8rem;padding:.8rem 1rem;border-bottom:1px solid var(--rule-2);text-decoration:none;cursor:pointer;list-style:none}
.goto summary::-webkit-details-marker{display:none}
.goto .row .n{font-size:11px;color:var(--ink-3);min-width:1.1em;font-variant-numeric:tabular-nums}
.goto .row .t{flex:1}
.goto .row .v{font-size:11px;letter-spacing:.05em;text-transform:uppercase;color:var(--ink-3)}
.goto .row.sub{padding-left:3rem;color:var(--ink-2);background:var(--page)}
.goto .row.here{font-weight:600;color:var(--ink)}
.goto .row:hover{background:var(--page-2)}
.goto .tri{width:0;height:0;border-left:5px solid transparent;border-right:5px solid transparent;border-top:6px solid var(--ink-3);transform:rotate(-90deg);transition:transform .15s}
.goto details[open] .tri{transform:rotate(0)}

/* ============ Aa panel ============ */
.aa{position:relative}
.panel{
  position:absolute;right:0;top:calc(100% + .6rem);z-index:9;width:min(21rem,calc(100vw - 1.5rem));
  background:var(--page);border:1px solid var(--rule);box-shadow:0 8px 24px rgba(0,0,0,.14);
  font-family:var(--sans);font-size:13px;color:var(--ink);
}
.panel[hidden]{display:none}
.tabs{display:flex;border-bottom:1px solid var(--rule-2)}
.tabs button{flex:1;appearance:none;background:none;border:0;border-bottom:2px solid transparent;padding:.7rem 0 .55rem;cursor:pointer;font:inherit;color:var(--ink-3)}
.tabs button[aria-selected="true"]{color:var(--ink);border-bottom-color:var(--ink)}
.tab{padding:.4rem .9rem .6rem}
.tab[hidden]{display:none}
.opt{padding:.6rem 0;border-bottom:1px solid var(--rule-2)}
.opt:last-child{border-bottom:0}
.opt .lbl{display:block;font-size:12px;color:var(--ink-3);margin-bottom:.45rem}
.seg{display:flex;border:1px solid var(--rule);border-radius:3px;overflow:hidden}
.seg button{flex:1;appearance:none;background:transparent;border:0;border-right:1px solid var(--rule);padding:.45em .3em;cursor:pointer;font:inherit;color:var(--ink-2);font-size:12.5px}
.seg button:last-child{border-right:0}
.seg button[aria-pressed="true"]{background:var(--sel);color:var(--sel-ink)}
[data-var="size"] button{font-family:var(--serif)}
[data-var="size"] button:nth-child(1){font-size:11px} [data-var="size"] button:nth-child(2){font-size:13px} [data-var="size"] button:nth-child(3){font-size:15px} [data-var="size"] button:nth-child(4){font-size:17px} [data-var="size"] button:nth-child(5){font-size:19px}
.swatches{display:flex;gap:.7rem}
.swatch{width:30px;height:30px;border-radius:50%;border:1px solid var(--rule);cursor:pointer;padding:0;appearance:none}
.swatch[aria-pressed="true"]{outline:2px solid var(--ink);outline-offset:2px}
.sw-grey{background:#e3e3df} .sw-white{background:#f8f8f6} .sw-sepia{background:#eee4d0} .sw-dark{background:#161617}
.reset{display:block;width:100%;appearance:none;background:none;border:0;border-top:1px solid var(--rule-2);padding:.65em;cursor:pointer;font:inherit;font-size:12px;color:var(--ink-3)}
.reset:hover{color:var(--ink)}

/* ============ page turn: the text fades out, the next page's text fades in ============ */
/* Stepped, not smooth — an e-ink panel redraws through a few grey levels. Chrome and the side
   contents stay put; only the page itself changes. (Replaced the inverted flash, 2026-10-18.) */
@keyframes ink-in{from{opacity:0}to{opacity:1}}
@media (prefers-reduced-motion: no-preference){
  .screen{animation:ink-in .28s steps(4,end) backwards}
  .leaving .screen{opacity:0;transition:opacity .16s steps(3,end)}
}
@media (prefers-reduced-motion: reduce){ *{transition:none !important;animation:none !important} }

@media (max-width:40rem){
  .page,.part{padding:1.4rem 1.1rem 3rem}
  .goto .row.sub{padding-left:2.2rem}
}

/* ---- small screens: the chrome keeps its icons and loses its words ---- */
@media (max-width:40rem){
  .status{padding:0 .6rem;gap:.4rem}
  .status .left,.status .right{gap:.3rem}
  .status .name{display:none}
  .tx{padding:.25rem .4rem;font-size:11px}
  .cname{font-size:clamp(1.9rem,13vw,3rem);margin:0 1rem 1.2rem}
  .ctitle{font-size:clamp(1.8rem,9vw,2.6rem)}
}
/* a page that does not scroll reports no position */
.status .prog.none,.status .pct.none,.loc .r.none{visibility:hidden}

/* ---- figures and galleries: photographs as an e-ink panel would show them ---- */
.fig{margin:1.4em 0;text-align:center}
.fig img{max-width:100%;height:auto;display:block;margin:0 auto;border:1px solid var(--rule)}
.fig figcaption{font-family:var(--sans);font-size:12px;color:var(--ink-3);margin-top:.5em;text-align:left}
.gallery{display:grid;grid-template-columns:repeat(2,1fr);gap:.8rem;margin:1.4em 0}
.gallery .fig{margin:0}
.gallery .fig img{aspect-ratio:4/3;object-fit:cover;width:100%}
@media (max-width:40rem){ .gallery{grid-template-columns:1fr 1fr;gap:.5rem} }

/* ---- lightbox: the colour original, lifted off the grey panel ---- */
.prose img.eink{cursor:zoom-in}
#lightbox{position:fixed;inset:0;z-index:60;background:rgba(10,10,10,.92);display:flex;align-items:center;justify-content:center;padding:2rem;cursor:zoom-out}
#lightbox[hidden]{display:none}
#lightbox figure{margin:0;max-width:100%;max-height:100%;display:flex;flex-direction:column;align-items:center;gap:.6rem}
#lightbox img{max-width:min(100%,1400px);max-height:calc(100vh - 6rem);object-fit:contain;box-shadow:0 20px 60px rgba(0,0,0,.5)}
#lightbox figcaption{font-family:var(--sans);font-size:13px;color:#ddd}
#lightbox .x{position:absolute;top:.6rem;right:.9rem;appearance:none;background:none;border:0;color:#ddd;font-size:30px;line-height:1;cursor:pointer;padding:.2rem .5rem}
#lightbox .x:focus-visible{outline:2px solid #fff}
body.boxed .screen{overflow:hidden}

/* ---- shelf: the reader's library screen — covers in rows, a title and one line under each ---- */
.shelf{margin:1.4rem 0 0}
.shelf-bar{font-family:var(--sans);font-size:13px;color:var(--ink-2);display:flex;align-items:center;gap:.5rem;border-top:1px solid var(--rule);border-bottom:1px solid var(--rule);padding:.45rem 0;margin:0 0 .4rem;text-align:left}
.shelf-bar .lbl{margin-right:.2rem}
.shelf-bar button{appearance:none;font:inherit;color:var(--ink);background:none;border:1px solid var(--rule);padding:.15rem .7rem;cursor:pointer;border-radius:0}
.shelf-bar button[aria-pressed="true"]{background:var(--sel);color:var(--sel-ink);border-color:var(--sel)}
.shelf-bar button:focus-visible{outline:2px solid var(--ink);outline-offset:2px}
.shelf-group h2{margin:1.6rem 0 .7rem}
.books{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(auto-fill,minmax(7rem,1fr));gap:1.3rem 1rem}
.book{margin:0;padding:0}
.book a{display:block;text-decoration:none;color:inherit;border:0}
.book img{display:block;width:100%;height:auto;border:1px solid var(--rule);background:#fff}
.book a:hover img,.book a:focus-visible img{outline:2px solid var(--ink);outline-offset:2px}
.book a:focus-visible{outline:none}
.book .bt{display:block;hyphens:none;-webkit-hyphens:none;font-family:var(--sans);font-size:13px;font-weight:500;line-height:1.3;margin-top:.45rem;color:var(--ink);text-align:left}
.book .bm{display:block;hyphens:none;-webkit-hyphens:none;font-family:var(--sans);font-size:11.5px;line-height:1.35;color:var(--ink-3);margin-top:.15rem;text-align:left}
:root[data-page="dark"] .book img{opacity:.88}
@media print{.shelf-bar{display:none}.books{grid-template-columns:repeat(5,1fr)}.book{break-inside:avoid}}

/* a working simulation framed in a page (see the live marker in build.js) */
.fig.live iframe{display:block;width:100%;height:900px;border:1px solid var(--rule);background:#fff}