/* sambr.com — "the guidebook"
 * The site is laid out as a printed travel guide: white sheets on a desk,
 * a colour-coded edge tab per section, page numbers, listings with a
 * condensed data line, cream and pale-cyan boxed texts. The system is
 * documented in REDESIGN-GUIDEBOOK-SPEC.md; this file is the whole of it.
 *
 * Why a plain stylesheet in public/ rather than a Vite import: the six essay
 * pages under public/writing are static HTML outside the bundle, and every
 * page (including 404) must share one unhashed sheet. */

:root {
  --desk: #cbc7bd; --desk-ink: #2b2a27; --desk-mute: #5d5b55;
  --red: #e5301f; --cyan: #00a8e8; --blue: #0058a8; --grey: #6c736e; --ink: #141414; --mute: #555;
  --cream: #f3ecdb; --cream-2: #ece4d4; --pale: #dcf1fb; --green: #3aa64a;
  --ser: 'Newsreader', 'Times New Roman', Georgia, serif;
  --con: 'Roboto Condensed', 'Arial Narrow', Arial, sans-serif;
  --san: 'Roboto', 'Helvetica Neue', Arial, sans-serif;
  --sheet-w: 760px; --sheet-pad: 44px;
}
* { box-sizing: border-box; }
html { background: var(--desk); scroll-padding-top: 24px; }
body { margin: 0; background: var(--desk); color: var(--ink); font-family: var(--ser); font-size: 15.5px; line-height: 1.38; -webkit-font-smoothing: antialiased; padding-block: 28px 64px; padding-inline: clamp(12px, 2.5vw, 40px); }
a { color: var(--blue); text-decoration: none; }
a:hover, a:focus-visible { text-decoration: underline; text-underline-offset: 3px; }
:focus-visible { outline: 2px solid var(--blue); outline-offset: 3px; }
img { max-width: 100%; }
p { margin: 0 0 0.6em; }
p.j { text-align: justify; hyphens: auto; }
b, strong { font-weight: 700; }
.con { font-family: var(--con); }
.san { font-family: var(--san); }
.small { font-size: 0.88em; }
.mute { color: var(--mute); }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* ── Sheets ─────────────────────────────────────────────────────────── */
/* .book, not main.book: the essays wrap their book in an <article> inside a bare <main>. */
.book { max-width: var(--sheet-w); margin: 0 auto; display: grid; gap: 22px; }
/* Grid children default to min-width: auto, so a wide chart, table or image
   would stretch its sheet past --sheet-w. Every sheet stays the same width. */
.book > *, .split > *, .pl-grid > *, .tips > *, .story > * { min-width: 0; }
.sheet { position: relative; background: #fff; padding: 40px var(--sheet-pad) 44px; box-shadow: 0 1px 2px rgba(0,0,0,0.22), 0 10px 26px rgba(0,0,0,0.16); min-height: 320px; }
.sheet.cover, .sheet.plate-full { padding: 0; overflow: hidden; }
.pn { position: absolute; top: 16px; right: 22px; font: 700 15px var(--san); color: #111; }
.sheet.cover .pn { display: none; }
@media (min-width: 701px) { body { padding-right: calc(clamp(12px, 2.5vw, 40px) + 40px); } }
@media (max-width: 700px) { :root { --sheet-pad: 20px; } body { padding-block: 64px 40px; } .sheet { padding-top: 34px; padding-bottom: 32px; } .pn { top: 10px; right: 14px; font-size: 13px; } }

/* ── Home tile: the persistent way back to the cover ────────────────── */
.home-tile { position: fixed; left: 14px; top: 14px; z-index: 21; background: var(--blue); color: #fff; font: 700 17px var(--san); letter-spacing: -0.02em; padding: 7px 10px 8px; border-radius: 5px; line-height: 1; text-decoration: none; box-shadow: 0 2px 8px rgba(0,0,0,0.2); }
.home-tile:hover, .home-tile:focus-visible { text-decoration: none; filter: brightness(1.08); }
body.on-cover .home-tile { opacity: 0; pointer-events: none; }
@media (max-width: 700px) { .home-tile { top: 0; left: 0; height: 40px; border-radius: 0; box-shadow: none; padding: 0 12px; display: flex; align-items: center; z-index: 22; } body.on-cover .home-tile { opacity: 1; pointer-events: auto; } }

/* ── Edge tab and contents ──────────────────────────────────────────── */
.tab { position: fixed; right: 0; top: 18vh; z-index: 20; width: 34px; height: 300px; color: #fff; font-family: var(--con); font-size: 12.5px; letter-spacing: 0.08em; text-transform: uppercase; writing-mode: vertical-rl; display: flex; align-items: center; padding-top: 22px; border-radius: 8px 0 0 8px; border: 0; cursor: pointer; text-align: left; box-shadow: -2px 0 8px rgba(0,0,0,0.15); white-space: nowrap; overflow: hidden; }
.tab b { font-weight: 700; } .tab span { font-weight: 300; margin-top: 10px; }
.tab.red { background: var(--red); } .tab.cyan { background: var(--cyan); } .tab.blue { background: var(--blue); } .tab.grey { background: var(--grey); }
.tab:hover { filter: brightness(1.05); }
@media (max-width: 700px) {
  .tab { top: 0; left: 0; right: 0; width: auto; height: 40px; writing-mode: horizontal-tb; padding: 0 16px 0 78px; border-radius: 0; box-shadow: 0 2px 8px rgba(0,0,0,0.2); justify-content: flex-start; gap: 10px; }
  .tab span { margin: 0; }
  .tab::after { content: "contents"; margin-left: auto; font-weight: 700; letter-spacing: 0.1em; }
}
.contents { position: fixed; inset: 0; z-index: 30; background: rgba(20,20,20,0.55); display: none; padding: 5vh 16px; overflow: auto; }
.contents.open { display: block; }
.contents .panel { max-width: 760px; margin: 0 auto; background: var(--cream-2); border-radius: 10px; padding: 26px 26px 22px; display: grid; grid-template-columns: 1fr 1fr; gap: 12px; box-shadow: 0 20px 50px rgba(0,0,0,0.35); }
.contents h2 { grid-column: 1 / -1; margin: 0 0 4px; font: 700 20px var(--san); }
.contents h2 b { font-size: 34px; float: left; line-height: 0.85; margin-right: 6px; }
.contents .blk { color: #fff; border-radius: 8px; padding: 12px 14px 14px; font-family: var(--san); display: block; }
.contents .blk:hover { text-decoration: none; filter: brightness(1.06); }
.contents .blk .n { font-size: 28px; font-weight: 700; line-height: 1; opacity: 0.85; }
.contents .blk .t { font-weight: 700; font-size: 15px; letter-spacing: 0.03em; margin-top: 2px; }
.contents .blk .s { font-weight: 700; font-size: 12px; opacity: 0.9; margin-top: 3px; }
.contents .blk ul { margin: 8px 0 0; padding: 0; list-style: none; font-family: var(--con); font-size: 13px; line-height: 1.5; }
.contents .blk ul a { color: #fff; }
.contents .foot { grid-column: 1 / -1; display: flex; justify-content: space-between; align-items: center; font-family: var(--con); font-size: 13px; color: var(--desk-mute); margin-top: 6px; }
.contents .foot button { font: inherit; background: none; border: 1px solid #999; border-radius: 4px; padding: 4px 10px; cursor: pointer; }
@media (max-width: 600px) { .contents .panel { grid-template-columns: 1fr; } }

/* ── Type roles ─────────────────────────────────────────────────────── */
.t-sec { font-family: var(--ser); font-weight: 800; font-size: clamp(38px, 6vw, 52px); line-height: 0.95; letter-spacing: -0.01em; margin: 0 0 14px; font-variation-settings: "opsz" 60; text-wrap: balance; }
.t-sec.red { color: var(--red); } .t-sec.cyan { color: var(--cyan); } .t-sec.blue { color: var(--blue); } .t-sec.grey { color: var(--grey); }
.t-chap { font-family: var(--ser); font-weight: 800; font-size: clamp(46px, 8vw, 66px); line-height: 0.95; margin: 4px 0 6px; letter-spacing: -0.01em; font-variation-settings: "opsz" 72; }
.h-red, .h-cyan, .h-blue, .h-grey { font-family: var(--ser); font-weight: 700; font-size: 22px; line-height: 1.1; margin: 0 0 6px; font-variation-settings: "opsz" 24; }
.h-red { color: var(--red); } .h-cyan { color: var(--cyan); } .h-blue { color: var(--blue); } .h-grey { color: var(--grey); }
.h-rule { border-top: 4px solid var(--cyan); padding-top: 8px; }
.h-rule.red { border-color: var(--red); } .h-rule.blue { border-color: var(--blue); } .h-rule.grey { border-color: var(--grey); }
.h-sub { font-family: var(--ser); font-weight: 700; font-size: 17px; margin: 10px 0 4px; }
.cols { columns: 2; column-gap: 26px; column-rule: 1px dotted #b9b9b9; }
.cols3 { columns: 3; column-gap: 22px; column-rule: 1px dotted #b9b9b9; }
.cols > *, .cols3 > * { break-inside: avoid; }
.cols p, .cols3 p { break-inside: auto; }
.cols h3, .cols h4, .cols3 h4 { break-after: avoid-column; }
@media (max-width: 700px) { .cols, .cols3 { columns: 1; } }
.nobreak { break-inside: avoid; }
.dot { border-top: 1px dotted var(--red); margin: 10px 0; } .dot.cyan { border-color: var(--cyan); } .dot.grey { border-color: #999; }
.arrow { padding: 0; margin: 0 0 10px; list-style: none; font-family: var(--con); font-size: 14.5px; line-height: 1.32; }
.arrow li { margin: 0 0 5px; padding-left: 18px; position: relative; }
.arrow li::before { content: "➜"; position: absolute; left: 0; color: var(--red); font-size: 12px; top: 2px; }
.arrow.cyan li::before { color: var(--cyan); }
.data { font-family: var(--con); font-size: 13.5px; letter-spacing: 0.05em; color: #333; text-transform: uppercase; }
.gl { display: inline-block; width: 16px; height: 16px; border-radius: 50%; background: #333; color: #fff; font: 700 10px/16px var(--san); text-align: center; vertical-align: 1px; margin-right: 3px; }
.gl.c { background: var(--cyan); } .gl.r { background: var(--red); } .gl.b { background: var(--blue); } .gl.g { background: var(--grey); }
.eye { display: inline-block; width: 16px; height: 16px; border-radius: 50%; background: var(--cyan); position: relative; vertical-align: -2px; margin-right: 6px; }
.eye::after { content: ""; position: absolute; left: 30%; top: 30%; width: 40%; height: 40%; border-radius: 50%; background: #fff; }
.eye.r { background: var(--red); }
.free { display: inline-block; background: var(--green); color: #fff; font: 700 11px var(--con); padding: 1px 5px; border-radius: 3px; letter-spacing: 0.05em; vertical-align: 1px; }
.lozenge { display: inline-block; background: var(--blue); color: #fff; font: 700 12px var(--con); letter-spacing: 0.08em; text-transform: uppercase; padding: 2px 8px; border-radius: 4px; margin-bottom: 6px; }

/* ── Photos and badges ──────────────────────────────────────────────── */
.photo { position: relative; overflow: hidden; background: #e6e3da; border-radius: 5px; }
.photo img { display: block; width: 100%; height: 100%; object-fit: cover; transition: opacity 0.4s; }
.photo img[data-lazy] { opacity: 0; }
.photo .badge { position: absolute; top: 8px; right: 8px; background: var(--red); color: #fff; font: 700 13px var(--san); padding: 2px 7px; border-radius: 4px; }
.credit { position: absolute; font: 400 9px var(--con); letter-spacing: 0.06em; text-transform: uppercase; color: #fff; writing-mode: vertical-rl; right: 9px; top: 40px; opacity: 0.9; text-shadow: 0 0 2px rgba(0,0,0,0.6); }

/* ── Boxed text ─────────────────────────────────────────────────────── */
.box { background: var(--cream); border-radius: 7px; padding: 12px 14px; margin: 0 0 12px; font-family: var(--con); font-size: 14.5px; line-height: 1.32; break-inside: avoid; }
.box.pale { background: var(--pale); }
.box h6 { margin: 0 0 6px; font: 700 13.5px var(--con); letter-spacing: 0.06em; text-transform: uppercase; color: var(--red); padding-bottom: 5px; border-bottom: 1px dotted var(--red); }
.box.pale h6 { color: #111; border-color: var(--cyan); }
.box p { margin: 0 0 6px; } .box p:last-child { margin: 0; }
.box .fig { font-family: var(--ser); font-weight: 800; font-size: 30px; color: var(--blue); line-height: 1; }
.figs { display: grid; grid-template-columns: 1fr 1fr; gap: 8px 12px; margin-top: 8px; }

/* ── Listings ───────────────────────────────────────────────────────── */
.lst { margin: 0 0 12px; break-inside: avoid; }
.lst .nm { font: 700 16.5px var(--con); color: var(--cyan); display: flex; justify-content: space-between; align-items: baseline; gap: 8px; }
.lst .nm a { color: inherit; }
.lst .nm .tag { font: 400 11.5px var(--con); color: #222; letter-spacing: 0.02em; text-transform: uppercase; white-space: nowrap; }
.lst .star::before { content: "★ "; color: var(--cyan); }
.lst.blue .nm, .lst.blue .star::before { color: var(--blue); }
.lst.ink .nm { color: #111; }
.lst .dt { font-family: var(--con); font-size: 13.5px; line-height: 1.3; color: #222; }
.lst p { margin: 3px 0 0; text-align: justify; hyphens: auto; }

/* Map key / cream list box */
.key { background: var(--cream); border-radius: 7px; padding: 12px 14px; font-family: var(--con); font-size: 14px; line-height: 1.32; columns: 2; column-gap: 20px; }
.key.one { columns: 1; }
.key h5 { margin: 0 0 4px; font: 700 18px var(--ser); color: var(--blue); column-span: all; }
.key h6 { margin: 8px 0 3px; font: 700 14px var(--con); break-after: avoid; }
.key ol { margin: 0; padding: 0; list-style: none; }
.key li { display: flex; gap: 6px; break-inside: avoid; }
.key li b { color: var(--red); min-width: 20px; text-align: right; }
.key li .l { flex: 1; overflow: hidden; white-space: nowrap; }
.key li .l::after { content: " ............................................................................."; color: #888; letter-spacing: 0.1em; }
.key li .g { color: #222; white-space: nowrap; }
@media (max-width: 700px) { .key { columns: 1; } }

/* Includes / Best */
.inc { background: var(--pale); border-radius: 6px; padding: 10px 12px; margin: 0 0 14px; font-family: var(--con); font-size: 14.5px; }
.inc h6 { margin: 0 0 5px; font: 700 16px var(--san); }
.inc h6::after { content: " ➜"; color: var(--blue); }
.inc ol { margin: 0; padding: 0; list-style: none; }
.inc li { display: flex; gap: 4px; } .inc li a { color: inherit; }
.inc li span:first-child { flex: 1; overflow: hidden; white-space: nowrap; }
.inc li span:first-child::after { content: " ........................................................................"; color: #999; letter-spacing: 0.1em; }
.best { border-top: 4px solid var(--cyan); padding-top: 6px; margin: 0 0 14px; }
.best h6 { margin: 0 0 5px; font: 700 20px var(--ser); color: var(--blue); line-height: 1.05; }

/* Need to Know rail and tables */
.rail h6 { margin: 0 0 2px; font: 700 20px var(--ser); color: var(--red); line-height: 1.05; }
.rail p { font-family: var(--con); font-size: 14.5px; margin: 0 0 8px; }
.rail .dot { margin: 8px 0 9px; }
.tbl { width: 100%; border-collapse: collapse; font-family: var(--con); font-size: 14px; margin: 4px 0 12px; }
.tbl td { background: #e9e9e6; padding: 4px 8px; border-bottom: 2px solid #fff; vertical-align: top; }
.tbl td:first-child { font-weight: 700; }
.tbl td:last-child { text-align: right; white-space: nowrap; }
.tbl.wrap td:last-child { white-space: normal; text-align: left; }
.arrowbox { background: var(--pale); border-radius: 7px; padding: 10px 14px; font-family: var(--con); font-size: 14.5px; display: flex; align-items: center; gap: 10px; }
.arrowbox a { color: inherit; }
.arrowbox::after { content: ""; width: 0; height: 0; border-top: 14px solid transparent; border-bottom: 14px solid transparent; border-left: 22px solid var(--blue); flex: none; }

/* Chart, maps, badges */
.clim { border-top: 4px solid var(--cyan); padding-top: 6px; }
.clim h6 { margin: 0; font: 700 22px var(--ser); color: var(--blue); }
.clim .sub { font: 700 16px var(--san); margin: 0 0 4px; }
.clim svg { width: 100%; height: auto; display: block; }
.tips { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 6px; margin-top: 6px; }
.tips div { background: var(--pale); border-radius: 5px; padding: 7px 9px; font-family: var(--con); font-size: 13px; line-height: 1.28; }
.tips b { display: block; }
@media (max-width: 520px) { .tips { grid-template-columns: 1fr; } }
.map { border-radius: 7px; overflow: hidden; border: 1px solid #ccc; }
.map svg { display: block; width: 100%; height: auto; }
.burst { display: inline-grid; place-items: center; width: 50px; height: 50px; background: var(--blue); color: #fff; font: 700 11px var(--san); text-align: center; line-height: 1; clip-path: polygon(50% 0%, 61% 8%, 74% 4%, 80% 16%, 94% 18%, 93% 32%, 100% 42%, 92% 53%, 96% 67%, 84% 73%, 82% 87%, 68% 87%, 58% 100%, 47% 91%, 33% 96%, 26% 84%, 12% 82%, 13% 68%, 0% 60%, 8% 47%, 3% 33%, 16% 27%, 18% 13%, 32% 13%, 39% 1%); vertical-align: middle; margin-right: 8px; }
.burst b { font-size: 20px; display: block; }
.topnum { color: var(--red); font-family: var(--san); font-weight: 700; font-size: 30px; float: left; line-height: 0.8; margin: 3px 6px 0 0; }
.grid2 { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-bottom: 12px; }
.grid3 { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 6px; margin: 6px 0; }
.split { display: grid; grid-template-columns: 38% 1fr; gap: 22px; }
.split.even { grid-template-columns: 1fr 1fr; }
.split.wide { grid-template-columns: 1fr 1.5fr; }
@media (max-width: 700px) { .split, .split.even, .split.wide { grid-template-columns: 1fr; } }

/* ── Cover ──────────────────────────────────────────────────────────── */
.cover { width: 100vw; margin-left: calc(50% - 50vw); height: 100vh; height: 100dvh; min-height: 520px; box-shadow: none; }
body.home { padding-top: 0; }
body.home main.book { max-width: none; }
body.home main.book > .sheet:not(.cover) { width: 100%; max-width: var(--sheet-w); margin-inline: auto; }
.cover .turn { position: absolute; left: 50%; bottom: 14px; transform: translateX(-50%); color: #fff; font: 700 12px var(--con); letter-spacing: 0.12em; text-transform: uppercase; text-shadow: 0 1px 4px rgba(0,0,0,0.6); text-decoration: none; }
.cover .turn::after { content: "▾"; display: block; text-align: center; font-size: 18px; line-height: 1; }
@media (min-width: 701px) { body.home main.book > .sheet:not(.cover) { margin-right: auto; } }
.cover .art { position: absolute; inset: 0; }
.cover .art img { width: 100%; height: 100%; object-fit: cover; display: block; }
.cover .art::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(0,0,0,0.25) 0%, rgba(0,0,0,0) 35%, rgba(0,0,0,0) 60%, rgba(0,0,0,0.45) 100%); }
.logo { display: inline-block; background: var(--blue); color: #fff; font: 700 26px var(--san); letter-spacing: -0.02em; padding: 8px 12px 10px; border-radius: 6px; line-height: 1; }
.cover .logo { position: absolute; left: 32px; top: 30px; z-index: 2; }
.cover .title { position: absolute; left: 32px; top: 120px; color: #fff; font: 900 clamp(34px, 6.5vw, 50px)/0.98 var(--san); letter-spacing: -0.02em; text-shadow: 0 1px 6px rgba(0,0,0,0.35); max-width: 8em; }
.cover .sub { position: absolute; left: 32px; top: 42%; color: #fff; font: 400 14px var(--con); letter-spacing: 0.06em; text-transform: uppercase; text-shadow: 0 1px 4px rgba(0,0,0,0.5); }
.cover .bluebox { position: absolute; left: 32px; bottom: 34px; background: #0080c8; color: #fff; border-radius: 7px; padding: 12px 14px; font: 700 15px/1.35 var(--san); max-width: 60%; }
.cover .bluebox span { display: block; font-weight: 400; }
.cover .ed { position: absolute; right: 30px; bottom: 36px; color: #fff; font: 400 13px var(--con); letter-spacing: 0.08em; text-transform: uppercase; text-align: right; text-shadow: 0 1px 4px rgba(0,0,0,0.6); }
.cover .roundel { position: absolute; right: 30px; top: 30px; width: 72px; height: 72px; border-radius: 50%; border: 2.5px solid #fff; color: #fff; display: grid; place-items: center; font: 700 10px/1.1 var(--con); text-align: center; text-transform: uppercase; letter-spacing: 0.06em; text-shadow: 0 1px 3px rgba(0,0,0,0.5); }
/* Below 700px the fixed bar already carries the sambr tile, so the cover's own
   logo goes and the roundel drops under the bar. The imprint moves up under the
   subtitle so the bottom edge holds only the blue box and the turn-page link. */
@media (max-width: 700px) { .cover .logo { display: none; } .cover .roundel { right: 16px; top: 54px; width: 60px; height: 60px; } .cover .title { left: 18px; top: 90px; } .cover .sub { left: 18px; } .cover .ed { bottom: auto; top: calc(42% + 30px); left: 18px; right: auto; text-align: left; } .cover .bluebox { max-width: 72%; font-size: 13px; bottom: 74px; } .cover .turn { bottom: 16px; } }

/* ── Inside front cover ─────────────────────────────────────────────── */
.ifc { display: grid; grid-template-columns: 38% 62%; }
.sheet.ifc { padding: 0; }
.ifc .left { background: var(--cream-2); padding: 36px 20px 30px 28px; }
.ifc .left h4 { margin: 0 0 14px; font: 700 17px/1.1 var(--san); }
.ifc .left h4 b { font-size: 40px; float: left; line-height: 0.85; margin-right: 4px; }
.ifc .blk { color: #fff; border-radius: 6px; padding: 9px 11px 12px; margin-bottom: 8px; font-family: var(--san); display: block; }
.ifc .blk:hover { text-decoration: none; filter: brightness(1.06); }
.ifc .blk .n { font-size: 28px; font-weight: 700; line-height: 1; opacity: 0.85; }
.ifc .blk .t { font-weight: 700; font-size: 15px; letter-spacing: 0.03em; margin-top: 2px; }
.ifc .blk .s { font-weight: 700; font-size: 12.5px; opacity: 0.9; margin-top: 3px; }
.ifc .blk .d { font-family: var(--con); font-size: 12.5px; margin-top: 4px; line-height: 1.25; }
.ifc .right { padding: 36px 30px 30px 24px; font-family: var(--con); font-size: 14.5px; }
.ifc .right h4 { margin: 0 0 8px; font: 700 26px var(--san); }
.ifc .right h5 { color: var(--red); font: 700 14.5px var(--con); margin: 10px 0 6px; padding-top: 8px; border-top: 1px dotted var(--red); }
.ifc .sym { display: grid; grid-template-columns: 1fr 1fr; gap: 4px 12px; margin-bottom: 6px; }
.ifc .sym div { display: flex; gap: 6px; align-items: center; font-weight: 700; }
.ifc .sym2 { columns: 2; column-gap: 12px; }
.ifc .sym2 div { display: flex; gap: 6px; align-items: baseline; break-inside: avoid; }
.ifc .sym2 .ab { min-width: 24px; text-align: right; font-weight: 700; }
@media (max-width: 700px) { .ifc { grid-template-columns: 1fr; } .ifc .left, .ifc .right { padding: 24px 20px; } }

/* ── Index, writer, back matter ─────────────────────────────────────── */
.idx { columns: 3; column-gap: 18px; column-rule: 1px dotted #aaa; font-family: var(--con); font-size: 13.5px; line-height: 1.28; }
.idx .let { background: var(--cyan); color: #fff; font: 700 15px var(--san); padding: 0 6px; margin: 6px 0 3px; break-after: avoid; display: block; width: fit-content; border-radius: 2px; }
.idx div { break-inside: avoid; padding-left: 14px; text-indent: -14px; }
.idx b { font-weight: 700; } .idx i { color: var(--cyan); font-style: normal; }
.idx a { color: inherit; }
.idxkey { background: var(--cream); border-radius: 6px; padding: 8px 10px; font-family: var(--con); font-size: 13.5px; display: inline-block; margin-bottom: 12px; }
@media (max-width: 700px) { .idx { columns: 2; } } @media (max-width: 460px) { .idx { columns: 1; } }
.story { background: var(--pale); border-radius: 7px; padding: 12px; display: grid; grid-template-columns: 130px 1fr; gap: 12px; margin: 0 0 16px; }
.story h6 { margin: 0 0 3px; font: 800 26px var(--ser); color: var(--cyan); letter-spacing: 0.02em; text-transform: uppercase; }
.story p { font-family: var(--con); font-size: 14.5px; text-align: justify; margin: 0; }
.writer { display: grid; grid-template-columns: 110px 1fr; gap: 12px; align-items: start; }
.writer .port { width: 104px; height: 104px; border-radius: 50%; overflow: hidden; filter: grayscale(1) contrast(1.05); }
.writer .port img { width: 100%; height: 100%; object-fit: cover; }
.writer h6 { margin: 0; font: 700 17px var(--san); }
.writer .ch { color: var(--cyan); font-family: var(--con); }
.writer p { font-family: var(--con); font-size: 14.5px; text-align: justify; margin: 2px 0 6px; }
.readmore { background: var(--pale); font-family: var(--con); font-size: 13px; text-align: right; padding: 5px 9px; margin-left: 30%; border-radius: 4px; }
.legal { font-family: var(--san); font-size: 11px; line-height: 1.3; color: #222; margin-top: 12px; }
.legal b { font-size: 12.5px; display: block; margin-bottom: 2px; }
.disc { border: 1px solid var(--cyan); color: var(--cyan); font: 400 11px var(--san); padding: 6px 9px; border-radius: 4px; line-height: 1.3; }
@media (max-width: 520px) { .story { grid-template-columns: 1fr; } .writer { grid-template-columns: 1fr; } .readmore { margin-left: 0; } }

/* ── Plates ─────────────────────────────────────────────────────────── */
.plate-full { aspect-ratio: 128 / 197; max-height: 92vh; }
.plate-full .art { position: absolute; inset: 0; }
.plate-full .art img { width: 100%; height: 100%; object-fit: cover; display: block; }
.plate-full .capbar { position: absolute; left: 0; right: 0; bottom: 0; background: rgba(255,255,255,0.94); padding: 14px var(--sheet-pad) 18px; }
.plate-full .capbar h5 { margin: 0; font: 700 22px var(--ser); color: var(--blue); }
.plate-full .capbar .d { font-family: var(--con); font-size: 13.5px; color: #222; margin-top: 2px; }
.plate-full .capbar p { font-family: var(--ser); font-size: 15px; margin: 6px 0 0; }
.plate-full .bignum { position: absolute; top: 34px; right: 34px; background: var(--red); color: #fff; font: 700 16px var(--san); padding: 2px 8px; border-radius: 4px; }
.plate-full .credit { right: 9px; top: 110px; }
.plate-full .pn { color: #fff; text-shadow: 0 1px 3px rgba(0,0,0,0.6); }
.pl-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px 12px; }
.pl-grid .photo { aspect-ratio: 4 / 3; }
.pl-cap { font-family: var(--con); font-size: 13.5px; line-height: 1.3; margin-top: 5px; }
.pl-cap b.n { color: var(--red); font: 800 20px var(--ser); margin-right: 4px; }
.pl-cap .t { font: 700 15px var(--ser); color: var(--blue); }
.pl-cap .d { color: #444; display: block; }
@media (max-width: 520px) { .pl-grid { grid-template-columns: 1fr; } }
.plate-page .art { border-radius: 6px; overflow: hidden; position: relative; margin-bottom: 12px; background: #e6e3da; }
.plate-page .art img { width: 100%; display: block; }
.kbd { display: inline-block; border: 1px solid #999; border-bottom-width: 2px; border-radius: 3px; padding: 0 5px; font: 700 12px var(--con); background: #f7f7f7; }
.pnav { display: flex; justify-content: space-between; gap: 10px; flex-wrap: wrap; font-family: var(--con); font-size: 14px; color: var(--blue); margin-top: 8px; padding-top: 6px; border-top: 1px dotted var(--cyan); }
.sheet.dark { background: #111; color: #eee; }
.sheet.dark .pn { color: #eee; } .sheet.dark .lst .dt, .sheet.dark .lst p { color: #ddd; } .sheet.dark .lst .nm .tag { color: #ddd; }
.sheet.dark .key { background: #222; color: #ddd; } .sheet.dark .key h5 { color: var(--cyan); } .sheet.dark .key li .g { color: #ccc; }
.sheet.dark .gl { background: #555; }

/* ── Essays ─────────────────────────────────────────────────────────── */
.ess-title { font-family: var(--ser); font-weight: 800; font-size: clamp(36px, 6vw, 46px); line-height: 0.98; letter-spacing: -0.01em; margin: 4px 0 8px; font-variation-settings: "opsz" 60; text-wrap: balance; }
.ess-title em { font-style: italic; }
.deck { font-family: var(--ser); font-weight: 500; font-style: italic; font-size: 20px; line-height: 1.3; color: #222; margin: 0 0 8px; font-variation-settings: "opsz" 24; }
.ess-data { font-family: var(--con); font-size: 13.5px; letter-spacing: 0.05em; color: #333; margin-bottom: 16px; text-transform: uppercase; }
.ess-data .gl { margin-right: 4px; }
.essay-body { columns: 2; column-gap: 26px; column-rule: 1px dotted #b9b9b9; }
@media (max-width: 700px) { .essay-body { columns: 1; } }
.essay-body p { margin: 0; text-align: justify; hyphens: auto; }
.essay-body p + p { text-indent: 1.3em; }
.essay-body .drop::first-letter { font-family: var(--ser); font-weight: 800; font-size: 3.1em; float: left; line-height: 0.82; margin: 0.05em 0.12em 0 0; color: var(--blue); }
.essay-body .sec { font-family: var(--ser); font-weight: 700; font-size: 20px; color: var(--blue); line-height: 1.1; margin: 12px 0 5px; border-top: 4px solid var(--blue); padding-top: 6px; break-after: avoid-column; }
.essay-body .sec small { font-family: var(--con); font-weight: 400; font-size: 12px; color: var(--blue); letter-spacing: 0.1em; display: block; margin-bottom: 2px; }
.essay-body .keep { break-inside: avoid; }
.essay-body .q { font-style: italic; color: var(--blue); margin: 8px 0 8px 12px; text-indent: 0; text-align: left; font-variation-settings: "opsz" 14; }
.essay-body .q + p { text-indent: 1.3em; }
.essay-body code { font-family: var(--con); font-size: 0.92em; background: #f0f0ec; padding: 0 3px; }
.essay-body sup { font-size: 0.7em; line-height: 0; } .essay-body sup a { color: var(--blue); }
.essay-body .box { margin: 10px 0; }
.essay-body .refs { font-family: var(--con); font-size: 13px; margin: 10px 0 0; break-inside: avoid; }
.essay-body .refs h6 { margin: 4px 0 5px; font: 700 13.5px var(--con); letter-spacing: 0.06em; text-transform: uppercase; color: var(--blue); }
.essay-body .refs table { width: 100%; border-collapse: collapse; }
.essay-body .refs td { background: #e9e9e6; padding: 4px 7px; border-bottom: 2px solid #fff; vertical-align: top; word-break: break-word; }
.essay-body .refs td:first-child { font-weight: 700; width: 24px; }
.essay-body .refs a { color: var(--blue); }
.essay-body .refs .fn-back { margin-left: 4px; }
.tl { border-top: 4px solid var(--blue); padding-top: 8px; margin-top: 22px; display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; font-family: var(--con); font-size: 13.5px; line-height: 1.28; }
.tl b { display: block; font: 700 17px var(--ser); color: var(--blue); margin-bottom: 2px; }
.tl a { color: inherit; }
@media (max-width: 520px) { .tl { grid-template-columns: 1fr; } }

/* ── Footer strip on the desk ───────────────────────────────────────── */
.deskfoot { max-width: var(--sheet-w); margin: 26px auto 0; font-family: var(--con); font-size: 12.5px; color: var(--desk-mute); display: flex; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.deskfoot a { color: var(--desk-ink); }

/* ── Motion, print ──────────────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { transition: none !important; animation: none !important; } }
@media print {
  @page { size: 128mm 197mm; margin: 0; }
  html, body { background: #fff; padding: 0; }
  .tab, .contents, .deskfoot { display: none !important; }
  main.book { gap: 0; }
  .sheet { box-shadow: none; break-after: page; min-height: 0; }
  a { color: inherit; }
}