/* OTHER WORLDS (PROJECT 05) — 'book' detail layout: an archive book on one long page. V1 tokens only; no new colour.
   Column 1 = the small chapter list (desktop); columns 2–4 = opening, index and chapters. */
.detail.ob .d-side{grid-column:1/2}
.ob-media{grid-column:2/5;grid-row:1/span 2;min-width:0}
/* chapter list */
.ob-toc{list-style:none;padding:0!important;margin:0}
.ob-toc li+li{margin-top:3px}
.ob-toc a{display:grid;grid-template-columns:28px 1fr auto;gap:0 6px;color:var(--ink)!important;text-decoration:none}
.ob-toc .ob-tn,.ob-toc a>span:last-child{color:var(--mute)}
.ob-toc a:hover b,.ob-toc a[aria-current] b{text-decoration:underline;text-underline-offset:3px;text-decoration-thickness:1px}
.ob-toc a[aria-current] .ob-tn{color:var(--ink)}
.ob-toc b{font-weight:400}
.ob-random{margin-top:14px;padding:0;border:0;background:none;color:var(--mute);font:inherit;cursor:pointer;text-decoration:underline;text-underline-offset:3px;text-decoration-thickness:1px}
.ob-random:hover{color:var(--ink)}
/* opening */
.ob-open{padding:0 0 calc(var(--m) * 9)}
.ob-kicker{display:flex;gap:18px;margin:0 0 18px;color:var(--mute);text-transform:uppercase;letter-spacing:.08em;font-size:11.5px}
.ob-title{margin:0;font:500 clamp(44px,6.2vw,96px)/.92 Anybody,"Arial Narrow",Arial,sans-serif;font-stretch:78%;text-transform:uppercase;letter-spacing:-.005em}
.ob-sub{margin:14px 0 0;font-size:16px;line-height:23px}
.ob-meta{margin:6px 0 0;color:var(--mute);text-transform:uppercase;letter-spacing:.08em;font-size:11.5px}
.ob-intro{margin:28px 0 0;max-width:46ch;color:var(--mute)}
/* index of worlds */
.ob-index{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:calc(var(--m) * 2.4) var(--m)}
.ob-card{display:block;color:var(--ink);text-decoration:none}
.ob-cover{position:relative;display:block;aspect-ratio:4/5;border-radius:calc(var(--r-tile) * .6);overflow:hidden;background:var(--surface)}
.ob-cover img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.ob-cap{display:grid;grid-template-columns:28px 1fr auto;gap:0 6px;align-items:baseline;padding:9px 2px 0}
.ob-cap .ob-tn,.ob-cap>span:last-child{color:var(--mute);font-size:11.5px}
.ob-cap b{font-weight:400}
.ob-card:hover .ob-cap b{text-decoration:underline;text-underline-offset:3px;text-decoration-thickness:1px}
.ob-card:focus-visible{outline:none}.ob-card:focus-visible .ob-cover{outline:1px solid var(--ink);outline-offset:3px}
/* chapters */
.ob-chapter{margin-top:calc(var(--m) * 16);scroll-margin-top:calc(var(--m) * 4 + var(--pill-h))}
.ob-chead{display:grid;grid-template-columns:auto 1fr auto;align-items:baseline;gap:0 14px;padding-top:8px;border-top:1px solid var(--line);margin-bottom:calc(var(--m) * 3.5)}
.ob-no{color:var(--mute);font-size:11.5px;letter-spacing:.08em}
.ob-chead h2{margin:0;font:500 22px/1.1 Anybody,"Arial Narrow",Arial,sans-serif;font-stretch:80%;text-transform:uppercase;letter-spacing:.01em}
.ob-count{color:var(--mute);font-size:11.5px}
.ob-note{grid-column:2/-1;margin:8px 0 0;color:var(--mute);max-width:60ch}
.ob-cgrid{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:calc(var(--m) * 1.4) var(--m);align-items:start}
.ob-fig{grid-column:var(--at) / span var(--span);margin:0;border-radius:calc(var(--r-tile) * .5);overflow:hidden;background:var(--surface)}
.ob-fig.end{align-self:end}
.ob-fig .ob-cell{display:block;width:100%;height:100%;padding:0;border:0;background:none;cursor:zoom-in}
.ob-fig img{display:block;width:100%;height:100%;object-fit:cover}
.ob-cell:focus-visible{outline:1px solid var(--ink);outline-offset:-1px}
/* viewer opened from the book: a horizontal swipe changes the image instead of the browser going back in history */
#lightbox[data-book]{touch-action:pan-y pinch-zoom;overscroll-behavior:contain}
html:has(#lightbox[data-book]:not([hidden])){overscroll-behavior-x:none}
@media (max-width:1179px){ .ob-index{grid-template-columns:repeat(4,minmax(0,1fr))} }
@media (max-width:760px){
  .ob-side{display:none} /* phones: the index at the top carries the chapters */
  .ob-media{grid-column:1/-1;grid-row:auto}
  .ob-open{padding-bottom:calc(var(--m) * 5)}
  .ob-index{grid-template-columns:repeat(2,minmax(0,1fr));gap:calc(var(--m) * 2) var(--m)}
  .ob-chapter{margin-top:calc(var(--m) * 9)}
  .ob-cgrid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .ob-fig,.ob-fig.s3,.ob-fig.s4,.ob-fig.s6{grid-column:auto / span var(--ms,2)} /* --ms: the phone rhythm from gallery-book.js */
  .ob-fig.end{align-self:start}
}