/* Layout: a night-time reading scene. A navy, gold-foiled hardcover sits in a pool of lamp light
   between a slim top bar and a page counter; every scroll step turns one leaf. */
:root {
  --night: #0c0f1e;
  --cream: #efe4cc;
  --cream-dim: #a99c86;
  --gold: #d6b46a;
  --gold-hi: #f3dfa6;
  --gold-ink: #94702f;
  --paper: #f6efe1;
  --paper-2: #ece2cc;
  --ink: #2b231d;
  --ink-soft: #66574a;
  --rose: #b24f68;
  --navy-ink: #22305f;
  --cloth: #1a2246;
  --pen: #34539a;

  --f-display: "Cormorant Garamond", "Cormorant", Garamond, "Times New Roman", serif;
  --f-body: "EB Garamond", Garamond, Georgia, "Times New Roman", serif;
  --f-caps: "Cinzel", "Trajan Pro", Georgia, serif;
  --f-hand: "Caveat", "Segoe Print", "Bradley Hand", "Comic Sans MS", cursive;
  --f-script: "Allura", "Snell Roundhand", "Segoe Script", cursive;
  --f-sans: "Avenir Next", "Segoe UI", "Helvetica Neue", Arial, sans-serif;

  --paper-noise: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .4 0 0 0 0 .31 0 0 0 0 .2 0 0 0 .13 0'/%3E%3C/filter%3E%3Crect width='220' height='220' filter='url(%23n)'/%3E%3C/svg%3E");
  --paper-mottle: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='600' height='600'%3E%3Cfilter id='m'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.012' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .55 0 0 0 0 .42 0 0 0 0 .25 0 0 0 .09 0'/%3E%3C/filter%3E%3Crect width='600' height='600' filter='url(%23m)'/%3E%3C/svg%3E");
  --cloth-noise: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='c'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='1.1' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .8 0 0 0 0 .85 0 0 0 0 1 0 0 0 .1 0'/%3E%3C/filter%3E%3Crect width='200' height='200' filter='url(%23c)'/%3E%3C/svg%3E");
  --endpaper: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120' viewBox='0 0 120 120'%3E%3Cg fill='%23c9a45c' opacity='.55'%3E%3Cpath d='M31 14a11 11 0 1 0 9 17.5 9 9 0 1 1-9-17.5z'/%3E%3Cpath d='M88 22l1.5 4.2 4.2 1.5-4.2 1.5-1.5 4.2-1.5-4.2-4.2-1.5 4.2-1.5z'/%3E%3Cpath d='M64 78l1 2.8 2.8 1-2.8 1-1 2.8-1-2.8-2.8-1 2.8-1z'/%3E%3Ccircle cx='14' cy='68' r='1.1'/%3E%3Ccircle cx='106' cy='58' r='1'/%3E%3Ccircle cx='52' cy='44' r='.9'/%3E%3Ccircle cx='98' cy='102' r='1.2'/%3E%3C/g%3E%3Cg fill='none' stroke='%23c9a45c' stroke-width='.9' opacity='.45'%3E%3Cpath d='M8 104c10-8 22-8 30-2s20 4 26-4'/%3E%3Cpath d='M74 48c6 3 11 9 19 8'/%3E%3C/g%3E%3Cg fill='%23c9a45c' opacity='.5'%3E%3Cpath d='M16 100.5l2-5 1.4 5.2zM30 101.5l1.2-5.2 2.3 4.8zM46 103l2.4-4.6.9 5.2z'/%3E%3Ccircle cx='64' cy='97.5' r='2.6'/%3E%3Ccircle cx='94' cy='56' r='2'/%3E%3C/g%3E%3C/svg%3E");
  --grain: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='180' height='180' filter='url(%23g)'/%3E%3C/svg%3E");

  color-scheme: dark;
}

/* ------------------------------------------------------------------ base */
*, *::before, *::after { box-sizing: border-box; }
html {
  background: var(--night);
  -webkit-text-size-adjust: 100%;
}
body {
  margin: 0;
  min-height: 100%;
  background: var(--night);
  color: var(--cream);
  font-family: var(--f-body);
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
body.ov-open { overflow: hidden; }
[hidden] { display: none !important; }
button { font: inherit; }
.svg-defs { position: absolute; width: 0; height: 0; overflow: hidden; }
#pages { display: none; }
#scroller { position: relative; width: 1px; pointer-events: none; }
.noscript { position: fixed; inset: auto 16px 16px; z-index: 99; margin: 0; padding: 1rem; border-radius: .6rem; background: #1b2347; color: var(--cream); }

.skip {
  position: fixed; left: 1rem; top: -4rem; z-index: 100;
  padding: .7rem 1rem; border-radius: .5rem;
  background: var(--gold); color: #1b1408;
  font: 600 .78rem/1 var(--f-caps); letter-spacing: .12em; text-decoration: none;
  transition: top .2s;
}
.skip:focus { top: 1rem; }

/* ----------------------------------------------------------------- scene */
#scene { position: fixed; inset: 0; overflow: hidden; }
#fx-back, #fx-front { position: absolute; left: 0; top: 0; display: block; }
#fx-back { z-index: 0; }
.grain {
  position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background-image: var(--grain); opacity: .09; mix-blend-mode: overlay;
}
#stage { position: absolute; inset: 0; z-index: 2; touch-action: pan-y; }
#fx-front { z-index: 3; pointer-events: none; }
.vignette {
  position: absolute; inset: 0; z-index: 4; pointer-events: none;
  background: radial-gradient(125% 95% at 50% 46%, rgba(4,5,12,0) 58%, rgba(4,5,12,.5) 100%);
}

#book-wrap {
  position: absolute; left: 0; right: 0; top: 70px;
  display: flex; justify-content: center;
  perspective: 2600px;
  pointer-events: none;
  transition: opacity 1.3s ease, transform 1.5s cubic-bezier(.2,.8,.2,1);
}
body.is-loading #book-wrap { opacity: 0; transform: translateY(26px); }
#book { position: relative; pointer-events: auto; }
#book-shadow {
  position: absolute; top: 0;
  transform-origin: 0 50%;
  pointer-events: none;
}
#book-shadow::before {
  content: ""; position: absolute; inset: 4% 3% -3% 3%;
  border-radius: 2%;
  background: rgba(0, 0, 0, .62);
  filter: blur(26px);
}
#book-shadow::after {
  content: ""; position: absolute; inset: 1% .5% -.8% .5%;
  background: rgba(0, 0, 0, .55);
  filter: blur(5px);
}

/* ------------------------------------------------------- book mechanics */
.leaf {
  position: absolute; left: var(--spine);
  display: none;
  perspective: var(--persp);
  perspective-origin: 0 50%;
}
.is-single .leaf { perspective-origin: 50% 50%; }
.leaf.st-left, .leaf.st-right, .leaf.st-flip { display: block; }
.flat { position: absolute; left: 0; top: 0; width: 100%; height: 100%; display: none; }
.flat-back { left: -100%; }
.leaf.st-right > .flat-front, .leaf.st-left > .flat-back { display: block; }
.measuring .leaf, .measuring .flat { display: block !important; visibility: hidden !important; }

.strips {
  position: absolute; left: 0; top: 0; width: 100%; height: 100%;
  transform-style: preserve-3d;
  display: none; pointer-events: none;
}
.leaf.st-flip > .strips { display: block; }
.seg { position: absolute; top: 0; transform-origin: 0 50%; transform-style: preserve-3d; }
.face {
  position: absolute; left: 0; top: 0; overflow: hidden;
  -webkit-backface-visibility: hidden; backface-visibility: hidden;
}
.face-b { transform: rotateY(180deg); }
.face > .pg { position: absolute; top: 0; }
/* own GPU layer: the moving light only repaints this overlay, not the page under it */
.shade {
  position: absolute; inset: 0; pointer-events: none;
  transform: translateZ(0);
  -webkit-backface-visibility: hidden; backface-visibility: hidden;
}

.seg-tab { position: absolute; transform-style: preserve-3d; }
.seg-tab > i {
  position: absolute; inset: 0;
  display: flex; align-items: center; justify-content: center;
  font-style: normal;
  -webkit-backface-visibility: hidden; backface-visibility: hidden;
  background: linear-gradient(90deg, rgba(0,0,0,.08), rgba(255,255,255,.2) 45%, rgba(0,0,0,.05)), var(--tc);
  border-radius: 0 .45em .45em 0;
  color: rgba(40, 30, 22, .8);
}
.seg-tab > .st-b { transform: rotateY(180deg); border-radius: .45em 0 0 .45em; }
.seg-tab span { writing-mode: vertical-rl; font: 600 .74em/1 var(--f-hand); white-space: nowrap; }

/* Page blocks: the edges of every page under the top one. Each is one drawing with a
   side face and a bottom face that meet in a mitred corner (engine.js sets the points;
   the width follows how many pages lie on each side). */
/* own compositor layer: redrawing a block must not repaint the pages around it */
.block { position: absolute; top: 0; overflow: visible; pointer-events: none; will-change: transform; }
.block-l { z-index: 2030; }
.block-r { z-index: 2075; }
.block-l .pb-side { fill: url(#pb-side-l); }
.block-r .pb-side { fill: url(#pb-side-r); }
.pb-side-lines { fill: url(#pb-v); }
.pb-side-ends { fill: url(#pb-ends); }
.pb-bot { fill: url(#pb-bot); }
.pb-bot-lines { fill: url(#pb-h); }
.pb-edge { fill: none; stroke: rgba(70, 48, 20, .4); stroke-width: .8; }

.tabs { position: absolute; inset: 0; z-index: 2090; pointer-events: none; font-size: var(--f); }
.tab {
  --tabw: 2em;
  position: absolute; width: var(--tabw);
  display: flex; align-items: center; justify-content: center;
  padding: 0; border: 0; cursor: pointer; pointer-events: auto;
  color: rgba(40, 30, 22, .8);
  background: linear-gradient(90deg, rgba(0,0,0,.06), rgba(255,255,255,.22) 45%, rgba(0,0,0,.04)), var(--tc);
  box-shadow: 0 1px 2px rgba(0,0,0,.35);
  transition: transform .25s cubic-bezier(.2,.8,.2,1), filter .2s;
}
.tab span { writing-mode: vertical-rl; font: 600 .74em/1 var(--f-hand); white-space: nowrap; letter-spacing: .01em; }
.tab.side-r { left: calc(var(--spine) + var(--pw) + var(--wr, 0px) - .35em); border-radius: 0 .45em .45em 0; justify-content: flex-end; padding-right: .22em; }
.tab.side-l { left: calc(var(--spine) - var(--pw) - var(--wl, 0px) - var(--tabw) + .35em); border-radius: .45em 0 0 .45em; justify-content: flex-start; padding-left: .22em; }
.tab.side-x { display: none; }
.tab.side-r:hover { transform: translateX(.3em); filter: brightness(1.05); }
.tab.side-l:hover { transform: translateX(-.3em); filter: brightness(1.05); }
.tab:focus-visible { outline: 2px solid var(--gold-hi); outline-offset: 2px; }

/* the shadow of a lifted page changes every frame: on its own layer so the book is not repainted */
.cast {
  position: absolute; top: 0; width: var(--pw); height: var(--ph);
  z-index: 5000; pointer-events: none; opacity: 0;
  will-change: transform;
}
.cast-r { left: var(--spine); }
.cast-l { left: calc(var(--spine) - var(--pw)); }

/* The page corners are the handles: a small dog-ear is always visible, it grows under the
   pointer, and it can be clicked or dragged (the page then follows the hand). */
.corner {
  position: absolute; bottom: 0; z-index: 5200;
  width: 5.2em; height: 5.2em; font-size: var(--f);
  padding: 0; border: 0; background: none;
  cursor: grab; touch-action: none;
  filter: drop-shadow(-.12em -.12em .2em rgba(40, 25, 10, .32));
}
.corner-r { left: calc(var(--spine) + var(--pw) - 5.2em); }
.corner-l { left: calc(var(--spine) - var(--pw)); filter: drop-shadow(.12em -.12em .2em rgba(40, 25, 10, .32)); }
.corner::before, .corner::after {
  content: ""; position: absolute; bottom: 0;
  width: 1.55em; height: 1.55em;
  transition: width .32s cubic-bezier(.2,.8,.2,1), height .32s cubic-bezier(.2,.8,.2,1);
}
/* ::before is the page underneath where the corner folded away (in the flap's shadow at the
   fold), ::after the folded flap, the back of the paper catching the light along the fold */
.corner-r::before { right: 0; clip-path: polygon(100% 0, 100% 100%, 0 100%); background: linear-gradient(135deg, rgba(60, 40, 14, .34) 0%, rgba(60, 40, 14, .1) 38%, rgba(60, 40, 14, 0) 75%), #e6dabf; }
.corner-r::after { right: 0; clip-path: polygon(0 0, 100% 0, 0 100%); background: linear-gradient(315deg, #fffbf2 0%, #f1e8d3 22%, #e2d4b3 70%, #cdb98f 100%); }
.corner-l::before { left: 0; clip-path: polygon(0 0, 100% 100%, 0 100%); background: linear-gradient(225deg, rgba(60, 40, 14, .34) 0%, rgba(60, 40, 14, .1) 38%, rgba(60, 40, 14, 0) 75%), #e6dabf; }
.corner-l::after { left: 0; clip-path: polygon(0 0, 100% 0, 100% 100%); background: linear-gradient(45deg, #fffbf2 0%, #f1e8d3 22%, #e2d4b3 70%, #cdb98f 100%); }
/* On a board (the back cover, the endpaper glued inside the back board) the handle moves to the
   board's own corner and takes the cloth's colours: navy, with a gold edge along the fold. */
.corner-r.on-board { transform: translate(calc(var(--wcap) + var(--ov) * .3), calc(var(--ov) * .3)); }
.corner-l.on-board { transform: translate(calc(var(--wcap) * -1 - var(--ov)), var(--ov)); }
.corner-l.on-board::before, .corner-l.on-board::after { border-bottom-left-radius: .55em; }
.corner-r.on-board::before { background: linear-gradient(135deg, rgba(0, 0, 0, .55) 50%, rgba(0, 0, 0, .18) 72%, rgba(0, 0, 0, 0) 100%), #1a2254; }
.corner-l.on-board::before { background: linear-gradient(225deg, rgba(0, 0, 0, .55) 50%, rgba(0, 0, 0, .18) 72%, rgba(0, 0, 0, 0) 100%), #1a2254; }
.corner-r.on-board::after { background: linear-gradient(315deg, #f3dfa6 50%, #c99a45 53%, #36438c 57%, #2a356f 76%, #1f2858 100%); }
.corner-l.on-board::after { background: linear-gradient(45deg, #f3dfa6 50%, #c99a45 53%, #36438c 57%, #2a356f 76%, #1f2858 100%); }
.corner:hover::before, .corner:hover::after, .corner:focus-visible::before, .corner:focus-visible::after { width: 3.1em; height: 3.1em; }
.corner:focus-visible { outline: none; }
.corner-r::before, .corner-r::after { animation: nudge 7s 3s infinite; }
.corner:hover::before, .corner:hover::after { animation: none; }
@keyframes nudge {
  0%, 84%, 100% { width: 1.55em; height: 1.55em; }
  90% { width: 2.6em; height: 2.6em; }
}
/* while a page is being dragged (or lifts by itself) the page itself curls, so the dog-ear steps aside */
body.is-dragging .corner::before, body.is-dragging .corner::after { width: 0; height: 0; transition: none; animation: none; }
body.is-hinting .corner::before, body.is-hinting .corner::after { width: 0; height: 0; animation: none; }
body.is-grabbing, body.is-grabbing * { cursor: grabbing !important; }
body.is-grabbing #scene { user-select: none; -webkit-user-select: none; }

/* first-time hint: a pulsing marker rides on the corner while the page lifts by itself
   (above the lifted page, whose z-index is 6000 and up) */
.turn-hint { position: absolute; left: 0; top: 0; z-index: 7000; font-size: var(--f); pointer-events: none; opacity: 0; transition: opacity .45s; will-change: transform; }
.turn-hint.is-on { opacity: 1; }
.th-ring {
  position: absolute; left: -1.15em; top: -1.15em; width: 2.3em; height: 2.3em; border-radius: 50%;
  border: 2px solid rgba(178, 79, 104, .9);
  box-shadow: 0 0 0 .35em rgba(178, 79, 104, .16), 0 0 1em rgba(178, 79, 104, .35);
  animation: th-pulse 1.1s ease-out infinite;
}
/* a little paper tag, so it stays readable over whatever is printed on the page */
.th-label {
  position: absolute; right: 1.35em; bottom: 1.25em; white-space: nowrap;
  padding: .32em .8em .4em; border-radius: .9em;
  background: rgba(255, 251, 242, .96);
  box-shadow: 0 .18em .7em rgba(40, 25, 10, .3), 0 0 0 1px rgba(178, 79, 104, .2);
  font: 600 1.15em/1 var(--f-hand); color: var(--rose); transform: rotate(-3deg);
}
@keyframes th-pulse { from { transform: scale(.65); opacity: 1; } to { transform: scale(1.3); opacity: .25; } }

/* ---------------------------------------------------------------- pages */
.pg {
  position: absolute; left: 0; top: 0;
  width: var(--pw); height: var(--ph);
  font-size: var(--f);
  font-family: var(--f-body);
  line-height: 1.45;
  text-align: left;
  color: var(--ink);
  background-color: var(--paper);
  background-image:
    var(--gutter, none),
    var(--fore, none),
    radial-gradient(130% 100% at 50% 42%, rgba(255,253,246,.55), rgba(255,253,246,0) 66%),
    var(--paper-mottle),
    var(--paper-noise);
  overflow: hidden;
  hyphens: auto; -webkit-hyphens: auto;
  font-kerning: normal;
  font-variant-ligatures: common-ligatures;
  text-rendering: optimizeLegibility;
}
.pg.is-right {
  --gutter: linear-gradient(90deg, rgba(70,48,24,.26) 0, rgba(70,48,24,.11) 2.4%, rgba(70,48,24,.035) 6%, rgba(70,48,24,0) 11%);
  --fore: linear-gradient(270deg, rgba(130,96,52,.1), rgba(130,96,52,0) 3.5%);
  border-radius: 0 3px 3px 0;
}
.pg.is-left {
  --gutter: linear-gradient(270deg, rgba(70,48,24,.26) 0, rgba(70,48,24,.11) 2.4%, rgba(70,48,24,.035) 6%, rgba(70,48,24,0) 11%);
  --fore: linear-gradient(90deg, rgba(130,96,52,.1), rgba(130,96,52,0) 3.5%);
  border-radius: 3px 0 0 3px;
}
.pg-inner {
  position: absolute; top: 3.3em; bottom: 3.1em;
  display: flex; flex-direction: column;
  padding-bottom: .4em;
  overflow: hidden; outline: none;
}
.pg-inner > * { flex-shrink: 0; }
.pg.is-right .pg-inner { left: 3.3em; right: 2.7em; }
.pg.is-left .pg-inner { left: 2.7em; right: 3.3em; }

.rhead {
  position: absolute; top: 2.3em;
  font: 600 .6em/1 var(--f-caps); letter-spacing: .28em; text-transform: uppercase;
  color: var(--ink-soft); opacity: .78;
}
.pg.is-right .rhead { right: 4.5em; }
.pg.is-left .rhead { left: 4.5em; }
.pg.is-right .rhead::before { content: attr(data-r); }
.pg.is-left .rhead::before { content: attr(data-l); }
.folio {
  position: absolute; bottom: 1.9em;
  font: italic 500 .82em/1 var(--f-display); color: var(--ink-soft);
  font-variant-numeric: oldstyle-nums;
}
.pg.is-right .folio { right: 3.3em; }
.pg.is-left .folio { left: 3.3em; }

.pg-blank { background-image: var(--paper-mottle), var(--paper-noise); }

/* shared page typography */
.kicker {
  margin: 0 0 .7em;
  font: 600 .62em/1.25 var(--f-caps); letter-spacing: .3em; text-transform: uppercase;
  color: var(--rose);
}
.h-title {
  margin: 0 0 .55em;
  font: 600 2.35em/1.02 var(--f-display); letter-spacing: -.005em;
  color: var(--navy-ink); text-wrap: balance;
}
.ch-title {
  margin: .12em 0 .18em;
  font: italic 600 3.35em/.95 var(--f-display); letter-spacing: -.01em;
  color: var(--navy-ink); text-wrap: balance;
}
.ch-sub {
  margin: 0 0 1.1em;
  font: 600 .64em/1.35 var(--f-caps); letter-spacing: .2em; text-transform: uppercase;
  color: var(--gold-ink);
}
.ch-intro {
  margin: auto 0 0;
  font: italic 500 1.12em/1.4 var(--f-display);
  color: var(--ink-soft); text-wrap: pretty;
}
.h-sec {
  margin: 0 0 .75em;
  font: 600 1.75em/1.05 var(--f-display);
  color: var(--navy-ink); text-wrap: balance;
}
.prose { margin: 0 0 .7em; text-align: justify; text-wrap: pretty; }
.prose.small { font-size: .9em; color: var(--ink-soft); text-align: left; }
.dropcap::first-letter {
  float: left; margin: .07em .09em 0 0;
  font: 600 3.55em/.8 var(--f-display); color: var(--rose);
}
.label {
  margin: 0 0 .55em;
  font: 600 .6em/1.3 var(--f-caps); letter-spacing: .24em; text-transform: uppercase;
  color: var(--gold-ink);
}
.orn { display: block; width: 7.5em; height: .9em; margin: .45em auto; color: var(--gold-ink); }
.caption {
  margin: .45em 0 0;
  font: 600 .52em/1 var(--f-caps); letter-spacing: .24em; text-transform: uppercase;
  color: var(--ink-soft); opacity: .7;
}

mark.hl {
  --hlc: rgba(255, 210, 70, .58);
  color: inherit;
  padding: 0 .12em; margin: 0 -.12em;
  border-radius: .25em .55em .3em .5em;
  background: linear-gradient(100deg, rgba(0,0,0,0) .1em, var(--hlc) .3em, var(--hlc) calc(100% - .3em), rgba(0,0,0,0) calc(100% - .08em)) no-repeat 0 62% / 0% 74%;
  -webkit-box-decoration-break: clone; box-decoration-break: clone;
  transition: background-size 1.15s cubic-bezier(.6,.05,.25,1) .55s;
}
.revealed mark.hl { background-size: 100% 74%; }
.hl-pink { --hlc: rgba(255, 150, 186, .5) !important; }
.hl-peach { --hlc: rgba(255, 184, 118, .55) !important; }
.hl-sky { --hlc: rgba(140, 196, 255, .52) !important; }
.hl-butter { --hlc: rgba(255, 220, 86, .6) !important; }

.note {
  position: absolute; margin: 0;
  font: 600 1.2em/1.02 var(--f-hand); color: var(--pen);
  transform: rotate(-4deg);
  opacity: 0; transition: opacity .9s 1.1s;
}
.revealed .note { opacity: .95; }
/* A note at the foot of a page is part of the text flow there, below everything else: it can
   never sit on the text, and when room runs short the page's type is fitted with it counted in. */
.note-roots, .note-club, .note-ideas {
  position: relative; align-self: flex-end;
  margin: auto .45em 1.1em 0; padding-top: .55em; text-align: right;
}
.note-arrow { position: absolute; width: 3.3em; height: 1.85em; color: inherit; }

.points { list-style: none; margin: 0 0 1em; padding: 0; display: grid; gap: .55em; }
.points li { position: relative; padding-left: 1.3em; line-height: 1.42; text-wrap: pretty; }
.points li::before {
  content: ""; position: absolute; left: .18em; top: .56em;
  width: .4em; height: .4em; background: var(--gold-ink); transform: rotate(45deg);
}
.points b { font-weight: 600; color: var(--navy-ink); }
.points-stars li::before {
  width: .7em; height: .7em; left: .05em; top: .36em; transform: none;
  clip-path: polygon(50% 0, 61% 39%, 100% 50%, 61% 61%, 50% 100%, 39% 61%, 0 50%, 39% 39%);
}

.chips { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: .4em; }
.chips li {
  font-size: .82em; line-height: 1.2; padding: .28em .75em;
  border: 1px solid rgba(148, 112, 47, .5); border-radius: 999px;
  background: rgba(255, 250, 238, .65);
}

.figures { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .9em; margin: 0 0 1em; }
.fig { display: flex; flex-direction: column; gap: .25em; padding-top: .55em; border-top: 1px solid rgba(148, 112, 47, .5); }
.fig-n { font: 600 2.45em/1 var(--f-display); color: var(--navy-ink); font-variant-numeric: lining-nums; white-space: nowrap; }
.fig-l { font-size: .78em; line-height: 1.3; color: var(--ink-soft); }

.pull {
  margin: .3em 0 1.05em; padding: .15em 0 .15em 1.1em;
  border-left: 2px solid var(--rose);
  font: italic 500 1.13em/1.4 var(--f-display); color: var(--navy-ink);
}
.pull p { margin: 0; }

/* ------------------------------------------------------------ the cover */
.pg-board { width: calc(var(--pw) + var(--wcap, 0px) + var(--ov)); height: calc(var(--ph) + 2 * var(--ov)); }
body.at-cover #book { cursor: pointer; }

/* printed-looking pages that flutter past while the book opens (word shapes from pages.js) */
.pg-ghost::before {
  content: ""; position: absolute; pointer-events: none;
  top: 3.6em; bottom: 4em; left: 3.3em; right: 2.7em;
  background: var(--ghost-a) center / 100% 100% no-repeat;
  opacity: .24;
}
.pg-ghost.is-left::before { left: 2.7em; right: 3.3em; }
.ghost-b::before { background-image: var(--ghost-b); }
.ghost-c::before { background-image: var(--ghost-c); }
.pg-cover, .pg-back, .pg-endpaper, .pg-blank-board {
  color: var(--gold-hi);
  background-color: var(--cloth);
  background-image:
    var(--hinge, none),
    radial-gradient(120% 90% at 30% 18%, rgba(120, 140, 225, .17), rgba(120, 140, 225, 0) 60%),
    radial-gradient(90% 80% at 80% 92%, rgba(0, 0, 0, .38), rgba(0, 0, 0, 0) 70%),
    repeating-linear-gradient(0deg, rgba(255, 255, 255, .022) 0 1px, rgba(255, 255, 255, 0) 1px 3px),
    repeating-linear-gradient(90deg, rgba(0, 0, 0, .06) 0 1px, rgba(0, 0, 0, 0) 1px 3px),
    var(--cloth-noise);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .05), inset 0 0 2.4em rgba(0, 0, 0, .45);
}
.pg-cover.is-right, .pg-back.is-right, .pg-blank-board.is-right, .pg-endpaper.is-right {
  --hinge: linear-gradient(90deg, rgba(0,0,0,.45) 0, rgba(255,255,255,.07) .55em, rgba(0,0,0,.3) 1.05em, rgba(255,255,255,.04) 1.25em, rgba(0,0,0,0) 1.75em);
  border-radius: .1em .55em .55em .1em;
}
.pg-cover.is-left, .pg-back.is-left, .pg-blank-board.is-left, .pg-endpaper.is-left {
  --hinge: linear-gradient(270deg, rgba(0,0,0,.45) 0, rgba(255,255,255,.07) .55em, rgba(0,0,0,.3) 1.05em, rgba(255,255,255,.04) 1.25em, rgba(0,0,0,0) 1.75em);
  border-radius: .55em .1em .1em .55em;
}
.pg-cover::after {
  content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none;
  background: linear-gradient(112deg, rgba(255,255,255,0) 30%, rgba(255,255,255,.075) 46%, rgba(255,255,255,0) 60%);
  background-size: 260% 100%;
  background-position: var(--foil, 50%) 0;
}
.cover-frame {
  position: absolute; inset: 1.8em 1.55em 1.8em 2.75em;
  border: .09em solid rgba(214, 180, 106, .85);
  box-shadow: 0 .04em 0 rgba(0, 0, 0, .5), inset 0 .04em 0 rgba(0, 0, 0, .4);
}
.cover-frame::before {
  content: ""; position: absolute; inset: .42em;
  border: .05em solid rgba(214, 180, 106, .55);
}
.corner-orn { position: absolute; width: 3.6em; height: 3.6em; color: #d9b96f; }
.corner-orn.tl { left: .1em; top: .1em; }
.corner-orn.tr { right: .1em; top: .1em; transform: scaleX(-1); }
.corner-orn.bl { left: .1em; bottom: .1em; transform: scaleY(-1); }
.corner-orn.br { right: .1em; bottom: .1em; transform: scale(-1, -1); }
.cover-stars { position: absolute; inset: 1.8em 1.55em 1.8em 2.75em; }
.cover-stars svg { width: 100%; height: 100%; fill: #d9b96f; opacity: .7; }
.cover-stars .tw { transform-box: fill-box; transform-origin: center; animation: twinkle 4.2s var(--d, 0s) infinite ease-in-out; }
@keyframes twinkle { 0%, 100% { opacity: .35; } 50% { opacity: 1; } }

.cover-inner {
  position: absolute; inset: 3.6em 3.1em 3.6em 4.3em;
  display: flex; flex-direction: column; align-items: center; text-align: center;
}
.foil {
  background-image: linear-gradient(100deg, #8c6a2c 0%, #e9cf88 17%, #fff3c4 25%, #c9a14e 34%, #8a6527 46%, #e0c27a 60%, #fff0bd 67%, #b38a3d 78%, #7c5a22 100%);
  background-size: 260% 100%;
  background-position: var(--foil, 50%) 0;
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent; color: transparent;
  filter: drop-shadow(0 .045em 0 rgba(0, 0, 0, .6));
}
.cover-author { margin: .6em 0 .9em; font: 600 .98em/1 var(--f-caps); letter-spacing: .44em; text-transform: uppercase; padding-left: .44em; }
.cover-emblem { width: 9.6em; height: 7.2em; margin: auto 0 .9em; filter: drop-shadow(0 .05em 0 rgba(0, 0, 0, .55)); }
.cover-title { margin: 0; font: 600 2.75em/1 var(--f-display); letter-spacing: .01em; }
.cover-title span { display: block; font-style: italic; font-size: 1.6em; line-height: .95; margin-top: .02em; }
.cover-orn { width: 8.5em; height: 1em; margin: 1.1em 0 .7em; color: #d9b96f; }
.cover-sub { margin: 0 0 auto; font: italic 500 1.16em/1.3 var(--f-display); }
/* the seal sits in the cover's frame: on a spread tilted at the corner (offsets relative to
   .cover-inner, so the same place on the board as before); on a phone, see .mode-single below */
.cover-sticker {
  position: absolute; right: -2.2em; bottom: -.9em;
  width: 7.6em; height: 7.6em; border-radius: 50%;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: .36em;
  text-align: center; color: #3a2410;
  background: radial-gradient(circle at 34% 28%, #fbe6b3, #dcae5f 52%, #b07f37 100%);
  box-shadow: 0 .18em .4em rgba(0, 0, 0, .5), inset 0 0 0 .2em rgba(255, 240, 200, .55), inset 0 0 0 .3em rgba(120, 80, 30, .45);
  transform: rotate(-12deg);
}
.cover-sticker span { font: 600 .47em/1.2 var(--f-caps); letter-spacing: .2em; text-transform: uppercase; }
.cover-sticker strong { font: italic 700 .86em/1.12 var(--f-display); padding: 0 .55em; }

/* -------------------------------------------------------------- endpapers */
.pastedown {
  position: absolute;
  top: calc(var(--ov) * .7); bottom: calc(var(--ov) * .7);
  background-color: #1c2552;
  background-image: linear-gradient(90deg, rgba(0,0,0,0), rgba(0,0,0,0)), var(--endpaper), var(--cloth-noise);
  box-shadow: inset 0 0 1.6em rgba(0, 0, 0, .4);
}
.pg-endpaper.is-left .pastedown { left: calc(var(--ov) * .7); right: 0; background-image: linear-gradient(270deg, rgba(0,0,0,.42), rgba(0,0,0,0) 9%), var(--endpaper), var(--cloth-noise); }
.pg-endpaper.is-right .pastedown { left: 0; right: calc(var(--ov) * .7); background-image: linear-gradient(90deg, rgba(0,0,0,.42), rgba(0,0,0,0) 9%), var(--endpaper), var(--cloth-noise); }
/* the left page of the first spread: place and year, the publisher's line of the title page */
.pg-place .pg-inner { align-items: center; justify-content: center; }
.pg-place .tp-imprint { margin: 0 0 2em; }
.note-ex { left: .4em; bottom: 1.2em; transform: rotate(-6deg); }

/* ------------------------------------------------------------ title page */
.pg-title .pg-inner { align-items: center; justify-content: center; padding-bottom: 3.5em; text-align: center; }
.tp-author { margin: .5em 0 .2em; font: 600 .84em/1 var(--f-caps); letter-spacing: .42em; padding-left: .42em; text-transform: uppercase; color: var(--ink-soft); }
.tp-title { margin: .25em 0 .3em; font: 600 2.6em/.95 var(--f-display); color: var(--navy-ink); }
.tp-title em { display: block; font-size: 1.45em; }
.tp-sub { margin: 0 0 2.6em; font: italic 500 1.18em/1.3 var(--f-display); color: var(--ink-soft); }
.tp-for { display: flex; flex-direction: column; gap: .25em; font-size: .95em; color: var(--ink-soft); }
.tp-for strong { font: 600 1.22em/1.2 var(--f-display); color: var(--rose); }
.tp-imprint {
  margin: auto 0 0; display: flex; flex-direction: column; align-items: center; gap: .7em;
  font: 600 .58em/1 var(--f-caps); letter-spacing: .26em; text-transform: uppercase; color: var(--ink-soft);
}
.tp-mark { width: 4.4em; height: 4.4em; color: var(--gold-ink); }

/* --------------------------------------------------------------- imprint */
.dedication { margin: 2.4em 0 auto; text-align: center; }
.dedication p { margin: 0; font: italic 500 1.42em/1.42 var(--f-display); color: var(--navy-ink); }
.ded-star { width: 1.1em; height: 1.1em; margin-top: .8em; fill: var(--gold-ink); }
.content-notes {
  margin: 0 0 1.5em; padding: .85em 1em;
  border: 1px dashed rgba(148, 112, 47, .6); border-radius: .3em;
  font-size: .86em; line-height: 1.4;
}
.content-notes p:last-child { margin: 0; }
.colophon { font-size: .74em; line-height: 1.45; color: var(--ink-soft); }
.colophon p { margin: 0 0 .4em; }

/* --------------------------------------------------------------- contents */
.toc-title { margin: .35em 0 0; text-align: center; font: italic 600 2.7em/1 var(--f-display); color: var(--navy-ink); }
.toc { list-style: none; margin: .7em 0 0; padding: 0; display: flex; flex-direction: column; gap: .05em; }
.toc a {
  display: grid; grid-template-columns: 4.7em minmax(0, 1fr) auto; column-gap: .55em; align-items: baseline;
  padding: .38em .35em; border-radius: .3em;
  color: inherit; text-decoration: none;
  transition: background .2s;
}
.toc a:hover, .toc a:focus-visible { background: rgba(214, 180, 106, .17); outline: none; }
.toc-k { grid-row: 1 / span 2; font: 600 .55em/1.2 var(--f-caps); letter-spacing: .16em; text-transform: uppercase; color: var(--rose); }
.toc-t { display: flex; align-items: baseline; gap: .35em; font: 600 1.18em/1.1 var(--f-display); color: var(--navy-ink); }
.toc-t::after { content: ""; flex: 1; min-width: 1em; border-bottom: 1px dotted rgba(102, 87, 74, .55); transform: translateY(-.25em); }
.toc-d { grid-column: 2 / span 2; font: italic .8em/1.2 var(--f-body); color: var(--ink-soft); }
.toc-n { grid-column: 3; grid-row: 1; font: 600 1.05em/1 var(--f-display); color: var(--gold-ink); font-variant-numeric: oldstyle-nums; }
.toc-hint { margin: auto 0 0; font: 600 1.05em/1.1 var(--f-hand); color: var(--pen); transform: rotate(-1.5deg); }
.mode-single .toc-hint { display: none; }

/* --------------------------------------------------------------- portrait */
.pg-portrait .pg-inner { align-items: center; justify-content: center; }
.frontis { margin: 0; display: flex; flex-direction: column; align-items: center; gap: 1.1em; }
.frame {
  width: 16.2em; height: 20.6em; padding: .85em; border-radius: 50%;
  background: conic-gradient(from 210deg, #8a6526, #e8cc84, #fff2c2, #c39a48, #7e5b21, #ecd393, #b8893b, #8a6526);
  box-shadow: 0 .35em .9em rgba(60, 40, 10, .35), inset 0 0 0 .1em rgba(255, 240, 200, .55);
}
.oval {
  width: 100%; height: 100%; border-radius: 50%; overflow: hidden;
  background: var(--paper);
  box-shadow: inset 0 0 0 .16em rgba(90, 64, 20, .45);
}
.oval img {
  display: block; width: 100%; height: 100%;
  object-fit: cover; object-position: 50% 30%;
  mix-blend-mode: multiply;
  filter: sepia(.1) saturate(1.04) contrast(1.02);
}
.frontis figcaption { display: flex; flex-direction: column; align-items: center; gap: .3em; }
.fc-name { font: 2.5em/1 var(--f-script); color: var(--navy-ink); }
.fc-line { font: 600 .56em/1.2 var(--f-caps); letter-spacing: .22em; text-transform: uppercase; color: var(--gold-ink); }
.note-hello { left: .4em; top: .6em; }
.note-hello .note-arrow { left: 3.6em; top: 2.05em; width: 2.8em; height: 1.55em; transform: rotate(28deg); }

/* ------------------------------------------------------------------ prolog */
.facts {
  margin: auto 0 0; padding: .85em 1em;
  display: grid; gap: .55em;
  border: 1px solid rgba(148, 112, 47, .45); border-radius: .3em;
  background: rgba(255, 250, 238, .55);
}
.facts > div { display: grid; grid-template-columns: 8.2em minmax(0, 1fr); gap: .7em; }
.facts dt { font: 600 .56em/1.75 var(--f-caps); letter-spacing: .16em; text-transform: uppercase; color: var(--gold-ink); }
.facts dd { margin: 0; font-size: .95em; line-height: 1.3; }

/* --------------------------------------------------------- 1 · roots */
.ch-art { flex: 1 1 auto; min-height: 8em; display: flex; align-items: center; justify-content: center; }
.tree { width: 100%; height: 100%; max-height: 18em; overflow: visible; }
.tree .ground { fill: none; stroke: var(--gold-ink); stroke-width: .9; stroke-dasharray: 1; stroke-dashoffset: 1; opacity: .7; }
.tree-b path { fill: none; stroke: #6a512d; stroke-linecap: round; stroke-dasharray: 1; stroke-dashoffset: 1; }
.tree-r path { fill: none; stroke: #9a8158; stroke-linecap: round; stroke-dasharray: 1; stroke-dashoffset: 1; opacity: .8; }
.tree-l > * { opacity: 0; }
.tree .leaf-star { fill: #cf9f45; transform-box: fill-box; transform-origin: center; transform: scale(.2); }
.revealed .tree-b path, .revealed .tree-r path, .revealed .tree .ground { stroke-dashoffset: 0; transition: stroke-dashoffset .8s var(--d, 0s) cubic-bezier(.3,.6,.3,1); }
.revealed .tree .ground { transition-delay: 0s; }
.revealed .tree-l > * { opacity: .92; transition: opacity .7s var(--d, 0s); }
.revealed .tree .leaf-star { transform: none; transition: opacity .5s var(--d, 0s), transform .7s var(--d, 0s) cubic-bezier(.3,1.6,.5,1); }

.timeline { list-style: none; margin: .1em 0 0; padding: 0 0 0 1.45em; position: relative; display: flex; flex-direction: column; gap: 1.3em; }
.timeline::before {
  content: ""; position: absolute; left: .36em; top: .5em; bottom: .6em; width: 1px;
  background: linear-gradient(var(--gold-ink), rgba(148, 112, 47, .2));
}
.timeline li { position: relative; }
.timeline li::before {
  content: ""; position: absolute; left: -1.4em; top: .3em;
  width: .64em; height: .64em; border-radius: 50%;
  background: var(--paper); border: 1.5px solid var(--gold-ink);
}
.timeline .tl-now::before { background: var(--rose); border-color: var(--rose); box-shadow: 0 0 0 .28em rgba(178, 79, 104, .16); }
.tl-date { font: 600 .6em/1.2 var(--f-caps); letter-spacing: .2em; text-transform: uppercase; color: var(--rose); }
.timeline h4 { margin: .2em 0 .15em; font: 600 1.2em/1.15 var(--f-display); color: var(--navy-ink); text-wrap: balance; }
.timeline p { margin: 0; font-size: .92em; line-height: 1.38; color: var(--ink-soft); }
.note-roots { transform: rotate(-5deg); }

/* --------------------------------------------------------- 2 · rooms */
/* the doors scale to the room their frame has (like the phone in chapter 3); the two labels
   take the drawing's width, so each stays under its door. The frame never gets so small that
   a label needs three lines: on a short page the text shrinks instead (fitPage) */
.doors-art { flex-direction: column; gap: .2em; min-height: 9.5em; container-type: size; }
.doors { width: auto; max-width: 100%; height: min(10.5em, calc(100cqh - 2.9em)); color: var(--gold-ink); overflow: visible; }
.door-line { stroke-dasharray: 1; stroke-dashoffset: 1; }
.door-glow { opacity: 0; }
.door-stars { opacity: 0; }
.revealed .door-line { stroke-dashoffset: 0; transition: stroke-dashoffset 1.5s .15s cubic-bezier(.4,.1,.3,1); }
.revealed .door-glow { opacity: 1; transition: opacity 1.4s 1.1s; }
.revealed .door-stars { opacity: .9; transition: opacity 1s 1.6s; }
.door-labels { display: grid; grid-template-columns: 1fr 1fr; width: min(100%, calc(min(10.5em, 100cqh - 2.9em) * 1.8667)); text-align: center; font: 600 1em/1 var(--f-hand); color: var(--pen); hyphens: manual; -webkit-hyphens: manual; }
.door-labels span { padding: 0 .3em; font-size: 1.15em; }

/* --------------------------------------------------------- 3 · posts */
/* the phone illustration scales to the room its frame has (a container), so on a short page it
   gets smaller instead of spilling over the title and the text below */
.phone-wrap { position: relative; flex: 1 1 auto; min-height: 9em; display: flex; flex-direction: column; align-items: center; justify-content: center; margin: 0 0 .7em; container-type: size; }
.phone-cap { margin-top: 1.1em; }
.phone {
  font-size: min(1em, calc((100cqh - 2.2em) / 19.4));
  position: relative; width: 10.4em; height: 19.4em; padding: .42em;
  border-radius: 1.6em;
  background: linear-gradient(145deg, #2d3040, #12131b);
  box-shadow: 0 .55em 1.3em rgba(30, 20, 10, .35), inset 0 0 0 .08em rgba(255, 255, 255, .16);
  transform: rotate(-4deg);
}
.ph-notch { position: absolute; top: .42em; left: 50%; z-index: 2; width: 3.2em; height: .6em; transform: translateX(-50%); background: #12131b; border-radius: 0 0 .5em .5em; }
.ph-screen { width: 100%; height: 100%; border-radius: 1.22em; overflow: hidden; background: #fbf8f2; display: flex; flex-direction: column; gap: .42em; padding: 1.25em .55em .5em; }
.ph-head { display: flex; align-items: center; gap: .55em; }
.ph-avatar { width: 2em; height: 2em; border-radius: 50%; background: conic-gradient(#f2b5c4, #f3df92, #b5d3f1, #cdbcf0, #f2b5c4); box-shadow: inset 0 0 0 .16em #fbf8f2, inset 0 0 0 .5em #2d355f; flex: none; }
.ph-stats { display: flex; gap: .35em; flex: 1; }
.ph-stats i { flex: 1; height: .95em; border-radius: .2em; background: #ebe5da; }
.ph-bio i { display: block; height: .3em; margin: .18em 0; border-radius: .2em; background: #e3dccf; }
.ph-bio i:last-child { width: 58%; }
.ph-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .14em; }
.ph-grid .t { aspect-ratio: 4 / 5; display: flex; align-items: center; justify-content: center; overflow: hidden; text-align: center; color: #fff; }
.ph-grid .t b { font: italic 600 .55em/1 var(--f-display); padding: 0 .2em; }
.t1 { background: linear-gradient(160deg, #f4b6a6, #d26f80); }
.t2 { background: radial-gradient(circle at 50% 66%, #ffe2a0 0 17%, rgba(0,0,0,0) 18%), linear-gradient(180deg, #9cc3ea, #f6d6b5); }
.t3 { background: #2d355f; color: #f3df92; }
.t3 b { font-size: .8em; }
.t4 { background: linear-gradient(135deg, #b4e2cd, #6aae93); }
.t5 { background: linear-gradient(180deg, #f7c9a1, #ec9a77); }
.t6 { background: repeating-linear-gradient(45deg, #f3df92 0 .3em, #f7e9b9 .3em .6em); }
.t7 { background: linear-gradient(200deg, #cdbcf0, #8b77cf); }
.t8 { background: #f2b5c4; color: #6a2b3c; }
.t9 { background: radial-gradient(circle at 30% 30%, #fff 0 9%, rgba(0,0,0,0) 10%), linear-gradient(160deg, #b5d3f1, #5b85c4); }
.note-feed { right: .1em; top: 1.6em; font-size: 1.08em; transform: rotate(7deg); text-align: center; }

.venn { margin: auto 0; display: flex; flex-direction: column; align-items: center; gap: .45em; }
.venn svg { width: 100%; max-width: 18.5em; height: auto; overflow: visible; }
.venn .v { mix-blend-mode: multiply; stroke: rgba(80, 60, 40, .3); stroke-width: .6; transform-box: fill-box; transform-origin: center; transform: scale(.8); opacity: 0; }
.v1 { fill: rgba(242, 181, 196, .78); }
.v2 { fill: rgba(181, 211, 241, .82); }
.v3 { fill: rgba(243, 223, 146, .85); }
.revealed .venn .v { transform: none; opacity: 1; transition: transform .9s cubic-bezier(.3,1.4,.5,1), opacity .6s; }
.revealed .venn .v2 { transition-delay: .25s; }
.revealed .venn .v3 { transition-delay: .5s; }
.venn .vt, .venn .vc { paint-order: stroke; stroke: rgba(255, 250, 240, .8); stroke-linejoin: round; text-anchor: middle; }
.venn .vt { font-family: var(--f-caps); font-weight: 600; font-size: 9.5px; letter-spacing: 1.4px; fill: var(--navy-ink); text-transform: uppercase; stroke-width: 2.5px; }
.venn .vc { font-family: var(--f-display); font-style: italic; font-weight: 700; font-size: 16px; fill: var(--rose); stroke-width: 3.5px; }
.venn figcaption { font-size: .88em; line-height: 1.35; text-align: center; color: var(--ink-soft); font-style: italic; text-wrap: balance; }

/* --------------------------------------------------------- 4 · sheet */
.charsheet {
  position: relative; margin: .2em 0 auto;
  padding: 1.15em 1.25em 1em;
  background: rgba(255, 250, 236, .7);
  border: 1px solid rgba(148, 112, 47, .55);
  outline: 1px solid rgba(148, 112, 47, .3); outline-offset: .32em;
  border-radius: .2em;
  box-shadow: 0 .2em .6em rgba(60, 40, 10, .12);
}
.cs-head { margin: 0 0 .85em; display: flex; align-items: center; justify-content: center; gap: .6em; font: 600 .7em/1 var(--f-caps); letter-spacing: .32em; text-transform: uppercase; color: var(--rose); }
.cs-head svg { width: .9em; height: .9em; fill: var(--gold-ink); }
.charsheet dl { margin: 0; display: grid; gap: .5em; }
.charsheet dl > div { display: grid; grid-template-columns: 7.3em minmax(0, 1fr); gap: .6em; padding-bottom: .5em; border-bottom: 1px dotted rgba(102, 87, 74, .4); }
.charsheet dl > div:last-child { border-bottom: 0; padding-bottom: 0; }
.charsheet dt { font: 600 .55em/1.95 var(--f-caps); letter-spacing: .15em; text-transform: uppercase; color: var(--gold-ink); }
.charsheet dd { margin: 0; font-size: .95em; line-height: 1.3; }
.cs-special dd { font: italic 600 1.15em/1.2 var(--f-display); color: var(--rose); }

.skills { list-style: none; margin: 0 0 auto; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .85em 1em; }
.skills li { display: grid; grid-template-columns: 1.75em minmax(0, 1fr); column-gap: .55em; align-content: start; }
.skills svg { grid-row: 1 / span 2; width: 1.6em; height: 1.6em; color: var(--rose); margin-top: .05em; }
.skills b { font: 600 1.02em/1.12 var(--f-display); color: var(--navy-ink); }
.skills span { font-size: .78em; line-height: 1.3; color: var(--ink-soft); margin-top: .15em; }
.more { margin-top: 1em; padding-top: .8em; border-top: 1px solid rgba(148, 112, 47, .4); }
.more p:last-child { margin: 0; font-size: .9em; }

/* --------------------------------------------------------- 5 · portfolio */
.pf-lede { margin: 0 0 1.1em; text-wrap: pretty; }
.pf-row { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.2em; margin: 0 0 .55em; }
.pf-piece { margin: 0; display: flex; flex-direction: column; align-items: center; gap: .5em; min-width: 0; }
.pf-zoom {
  display: block; width: 100%; padding: 0; border: 0; border-radius: .2em;
  background: none; cursor: zoom-in;
  box-shadow: 0 .3em .9em rgba(40, 25, 10, .28), 0 0 0 1px rgba(60, 40, 10, .08);
  transition: transform .35s cubic-bezier(.2,.8,.2,1), box-shadow .35s;
}
.pf-zoom img { display: block; width: 100%; height: auto; border-radius: inherit; }
.pf-zoom:hover { transform: translateY(-.25em); box-shadow: 0 .6em 1.4em rgba(40, 25, 10, .32), 0 0 0 1px rgba(60, 40, 10, .08); }
.pf-zoom:focus-visible { outline: 2px solid var(--rose); outline-offset: 3px; }
.pf-piece figcaption { display: flex; flex-direction: column; align-items: center; gap: .2em; font: italic 500 .9em/1.25 var(--f-display); color: var(--ink-soft); text-align: center; text-wrap: balance; }
.pf-piece figcaption b { font: 600 .6em/1.2 var(--f-caps); font-style: normal; letter-spacing: .18em; text-transform: uppercase; color: var(--gold-ink); }
.pf-note { margin: auto 0 0; font: italic .8em/1.35 var(--f-body); color: var(--ink-soft); text-wrap: pretty; }
.hint-line { margin: .3em 0 .7em; text-align: center; font: 600 1.05em/1 var(--f-hand); color: var(--pen); }
.only-touch { display: none; }
@media (hover: none) { .only-hover { display: none; } .only-touch { display: inline; } }

/* the story stands beside what the concept covers */
.pf-split { display: grid; grid-template-columns: minmax(0, 1fr) 10.2em; gap: 1.3em; align-items: start; margin-top: .4em; }
.pf-facts { margin: .3em 0 0; display: grid; gap: .7em; }
.pf-facts > div { padding-bottom: .65em; border-bottom: 1px dotted rgba(102, 87, 74, .4); }
.pf-facts > div:last-child { border-bottom: 0; padding-bottom: 0; }
.pf-facts dt { font: 600 .55em/1.4 var(--f-caps); letter-spacing: .16em; text-transform: uppercase; color: var(--gold-ink); }
.pf-facts dd { margin: .15em 0 0; font-size: .92em; line-height: 1.3; text-wrap: pretty; }

/* the flyer, front and back, as one open spread */
.pf-flyer { align-self: center; }
.pf-flyer .pf-zoom { width: 15.6em; }
.pg-pf-back .pf-flyer { margin-top: .4em; }
.pf-points { list-style: none; margin: auto 0 0; padding: .85em 0 0; display: grid; gap: .6em; border-top: 1px solid rgba(148, 112, 47, .4); font-size: .9em; line-height: 1.35; }
.pf-points b { display: block; margin-bottom: .1em; font: 600 .62em/1.3 var(--f-caps); letter-spacing: .18em; text-transform: uppercase; color: var(--rose); }

/* --------------------------------------------------------- 6 · club */
/* the club's table from above: the book is the centre, the five places around it are alike */
.clubtable {
  flex: 1 1 auto; min-height: 12em;
  display: flex; flex-direction: column; gap: .35em;
  margin: .2em 0 .9em; padding: .9em 1em .75em;
  border-radius: .5em;
  background: radial-gradient(120% 95% at 50% 0%, #fffaf0, #efe2c6 78%);
  box-shadow: inset 0 0 0 1px rgba(148, 112, 47, .38), 0 .3em .9em rgba(60, 40, 10, .16);
}
.ct-title { margin: 0; text-align: center; font: 600 .58em/1 var(--f-caps); letter-spacing: .3em; text-transform: uppercase; color: var(--gold-ink); }
.ct-title em { display: block; margin-top: .25em; font: italic 600 2.1em/1.05 var(--f-display); letter-spacing: 0; text-transform: none; color: var(--navy-ink); }
.ct-svg { flex: 1 1 auto; width: 100%; min-height: 8em; overflow: visible; }
.ct-book { opacity: 0; transform: scale(.88); transform-box: fill-box; transform-origin: center; }
.revealed .ct-book { opacity: 1; transform: none; transition: opacity .6s .1s, transform .9s .1s cubic-bezier(.3,1.4,.5,1); }
.ct-cup { opacity: 0; transform: translate(var(--dx), var(--dy)) scale(.75); transform-box: fill-box; transform-origin: center; }
.revealed .ct-cup { opacity: 1; transform: none; transition: opacity .5s var(--d, 0s), transform .8s var(--d, 0s) cubic-bezier(.3,1.5,.5,1); }
.ct-foot { display: flex; justify-content: space-between; margin: 0; font: 600 .5em/1 var(--f-caps); letter-spacing: .22em; text-transform: uppercase; color: var(--gold-ink); }
.figures-row .fig-n { font-size: 2.15em; }
.note-club { transform: rotate(-3deg); }

/* --------------------------------------------------------- 7 · fabely */
.ch-title-fls { font-size: 2.75em; }
.sample {
  display: flex; align-items: center; gap: .7em;
  margin: .1em 0 1em; padding: .55em .95em .55em .55em;
  border-radius: 999px;
  background: #1f2750; color: #f3df92;
  box-shadow: 0 .25em .7em rgba(20, 20, 50, .28);
}
.sample-play { flex: none; width: 2.1em; height: 2.1em; border-radius: 50%; display: grid; place-items: center; background: linear-gradient(145deg, #f3df92, #c99a45); color: #1f2750; }
.sample-play svg { width: 1.25em; height: 1.25em; }
.wave { flex: 1; min-width: 0; height: 2.1em; }
.wave rect { fill: rgba(243, 223, 146, .42); transform-box: fill-box; transform-origin: center; }
.wave rect.played { fill: #f4a9c6; }
.revealed .wave rect { animation: wv 1.15s calc(var(--i) * -.09s) ease-in-out infinite alternate; }
@keyframes wv { from { transform: scaleY(.42); } to { transform: scaleY(1); } }
.sample-t { flex: none; font: 600 .48em/1.2 var(--f-caps); letter-spacing: .16em; text-transform: uppercase; color: #d9b96f; }
.pg-fls .ch-intro { margin: 0 0 1.1em; }
.fls { list-style: none; margin: 0 0 1em; padding: 0; display: grid; gap: .8em; }
.pull-fls { margin: auto 0 0; font-size: 1.04em; }
.fls li { display: grid; grid-template-columns: 2.3em minmax(0, 1fr); column-gap: .75em; align-items: center; }
.fls svg { grid-row: 1 / span 2; width: 2.3em; height: 2.3em; padding: .5em; border-radius: 50%; background: rgba(178, 79, 104, .1); color: var(--rose); }
.fls b { font: italic 600 1.38em/1 var(--f-display); color: var(--navy-ink); }
.fls span { font-size: .87em; line-height: 1.35; color: var(--ink-soft); }

.ideas { display: grid; gap: .75em; margin: 0 0 .9em; }
.idea {
  position: relative;
  padding: .7em .9em .6em 3.1em;
  border-radius: .2em;
  background-color: #fffdf7;
  background-image: linear-gradient(90deg, rgba(0,0,0,0) 2.45em, rgba(220, 120, 140, .45) 2.45em, rgba(220, 120, 140, .45) calc(2.45em + 1px), rgba(0,0,0,0) calc(2.45em + 1px));
  box-shadow: 0 .14em .4em rgba(60, 40, 10, .18);
}
.idea:nth-child(1) { transform: rotate(-.6deg); }
.idea:nth-child(2) { transform: rotate(.45deg); }
.idea:nth-child(3) { transform: rotate(-.3deg); }
.idea-n { position: absolute; left: .55em; top: .5em; margin: 0; font: italic 600 1.35em/1 var(--f-display); color: var(--rose); }
.idea h4 { margin: 0; font: 600 1.15em/1.1 var(--f-display); color: var(--navy-ink); }
.idea-f { margin: .15em 0 .3em; font: 600 .52em/1.2 var(--f-caps); letter-spacing: .18em; text-transform: uppercase; color: var(--gold-ink); }
.idea p { margin: 0 0 .25em; font-size: .86em; line-height: 1.33; text-wrap: pretty; }
.idea .idea-g { margin: 0; font: 600 1.02em/1.1 var(--f-hand); color: var(--pen); }
.note-ideas { transform: rotate(-2.5deg); }

/* ---------------------------------------------------------- epilog */
.ch-title-epi { font-size: 2.85em; margin-bottom: .45em; }
.card {
  display: grid; gap: .55em;
  margin: .3em 0 1em; padding: .95em 1.1em;
  font-style: normal;
  border-radius: .4em;
  background: linear-gradient(160deg, #fffaf0, #f3e8d0);
  box-shadow: 0 .25em .8em rgba(60, 40, 10, .18), inset 0 0 0 1px rgba(148, 112, 47, .4);
}
.card-k { margin: 0 0 .1em; font: 600 .58em/1 var(--f-caps); letter-spacing: .3em; text-transform: uppercase; color: var(--rose); }
.card-row { margin: 0; display: flex; align-items: center; gap: .6em; min-width: 0; }
.card-row > svg { flex: none; width: 1.2em; height: 1.2em; color: var(--gold-ink); }
.card-row a { color: var(--navy-ink); text-decoration: none; border-bottom: 1px solid rgba(34, 48, 95, .3); overflow-wrap: anywhere; }
.card-row a:hover, .card-row a:focus-visible { color: var(--rose); border-bottom-color: var(--rose); outline: none; }
.copy {
  margin-left: auto; flex: none;
  display: inline-flex; align-items: center; gap: .35em;
  padding: .35em .7em; border-radius: 999px;
  border: 1px solid rgba(148, 112, 47, .5); background: transparent;
  font: 600 .52em/1 var(--f-caps); letter-spacing: .14em; text-transform: uppercase;
  color: var(--gold-ink); cursor: pointer;
  transition: background .25s, color .25s, border-color .25s;
}
.copy svg { width: 1.35em; height: 1.35em; }
.copy:hover { background: rgba(214, 180, 106, .16); }
.copy:focus-visible { outline: 2px solid var(--rose); outline-offset: 2px; }
.copy.is-done { background: #b4e2cd; border-color: #6aae93; color: #24563f; }
.regards { margin: auto 0 .5em; font-style: italic; color: var(--ink-soft); }
.signature { margin: 0; font: 3.1em/1.05 var(--f-script); color: var(--navy-ink); clip-path: inset(0 100% 0 0); padding-right: .2em; }
.revealed .signature { clip-path: inset(0 0 0 0); transition: clip-path 2.4s .5s cubic-bezier(.5,.1,.3,1); }

/* ---------------------------------------------------------- back cover */
.back-inner {
  position: absolute; inset: 2.9em 2.8em 2.6em;
  display: flex; flex-direction: column; align-items: center; text-align: center;
}
.pg-back.is-left .back-inner { right: 3.9em; }
.pg-back.is-right .back-inner { left: 3.9em; }
/* the author line and the buttons both take auto margins, so the group sits centred above the barcode */
.back-author { margin: auto 0 .45em; font: 600 .7em/1 var(--f-caps); letter-spacing: .4em; padding-left: .4em; text-transform: uppercase; color: #d9b96f; }
.blurb { display: flex; flex-direction: column; gap: .45em; max-width: 21em; margin-top: 1.1em; font: 500 1.12em/1.35 var(--f-display); color: #efe2c2; text-wrap: balance; }
.blurb p { margin: 0; }
.blurb .blurb-last { font-style: italic; color: #f6e2a8; }
.tropes { list-style: none; margin: 1.4em 0 1.3em; padding: 0; display: flex; flex-wrap: wrap; justify-content: center; gap: .45em; }
.tropes li { padding: .55em .9em; border: 1px solid rgba(214, 180, 106, .6); border-radius: 999px; font: 600 .5em/1 var(--f-caps); letter-spacing: .15em; text-transform: uppercase; color: #f3df92; }
.back-actions { display: flex; flex-wrap: wrap; justify-content: center; gap: .6em; margin-bottom: auto; }
.back-actions .pill { font-size: .6em; height: 3.4em; padding: 0 1.3em; gap: .55em; }
.back-actions .pill svg { width: 1.6em; height: 1.6em; }
.barcode-box { align-self: flex-end; display: flex; flex-direction: column; align-items: center; gap: .3em; margin-top: 1em; padding: .5em .6em .35em; border-radius: .15em; background: #fbf6e9; }
.barcode { width: 7.4em; height: 2.3em; fill: #1a1a1a; }
.barcode-box span { font: 600 .42em/1 var(--f-caps); letter-spacing: .12em; color: #333; text-transform: uppercase; }

/* ---------------------------------------------------------------- UI */
#topbar {
  position: absolute; z-index: 20; top: 0; left: 0; right: 0;
  height: calc(var(--top-h, 70px) + env(safe-area-inset-top, 0px));
  display: flex; align-items: center; justify-content: space-between; gap: 1rem;
  padding-top: env(safe-area-inset-top, 0px);
  padding-left: max(16px, env(safe-area-inset-left, 0px));
  padding-right: max(16px, env(safe-area-inset-right, 0px));
  background: linear-gradient(rgba(6, 8, 18, .78), rgba(6, 8, 18, 0));
  transition: opacity 1s .3s;
}
.brand { display: flex; align-items: center; gap: .75rem; min-width: 0; color: var(--cream); text-decoration: none; }
.mono {
  flex: none; width: 2.5rem; height: 2.5rem; border-radius: 50%;
  display: grid; place-items: center;
  font: 600 .88rem/1 var(--f-caps); letter-spacing: .06em; color: var(--gold-hi);
  border: 1px solid rgba(214, 180, 106, .6);
  background: radial-gradient(circle at 35% 30%, rgba(214, 180, 106, .28), rgba(214, 180, 106, 0) 70%);
}
.brand-text { display: flex; flex-direction: column; line-height: 1.15; min-width: 0; }
.brand-text strong { font: 600 1.2rem/1.1 var(--f-display); letter-spacing: .01em; }
.brand-text small { font: 500 .6rem/1.35 var(--f-caps); letter-spacing: .15em; text-transform: uppercase; color: var(--cream-dim); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.brand:focus-visible { outline: 2px solid var(--gold-hi); outline-offset: 4px; border-radius: .4rem; }
.top-actions { display: flex; gap: .5rem; flex: none; }
.pill {
  display: inline-flex; align-items: center; gap: .45rem;
  height: 2.35rem; padding: 0 1rem;
  border-radius: 999px; border: 1px solid rgba(214, 180, 106, .45);
  background: rgba(12, 15, 30, .45);
  color: var(--cream);
  font: 600 .68rem/1 var(--f-caps); letter-spacing: .14em; text-transform: uppercase;
  text-decoration: none; cursor: pointer; white-space: nowrap;
  -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
  transition: background .2s, border-color .2s, color .2s;
}
.pill svg { width: 1.05rem; height: 1.05rem; flex: none; }
.pill:hover { background: rgba(214, 180, 106, .15); border-color: rgba(214, 180, 106, .8); }
.pill-gold { background: linear-gradient(135deg, #ebd08a, #b8893b); border-color: transparent; color: #1b1408; }
.pill-gold:hover { background: linear-gradient(135deg, #f5e0a3, #c99a45); }
.pill:focus-visible, .nav-btn:focus-visible { outline: 2px solid var(--gold-hi); outline-offset: 3px; }

.menu {
  position: absolute; top: calc(var(--top-h, 70px) + env(safe-area-inset-top, 0px) - .2rem);
  right: max(16px, env(safe-area-inset-right, 0px));
  width: min(22rem, calc(100vw - 32px));
  max-height: calc(100vh - var(--top-h, 70px) - 1.5rem); overflow: auto;
  padding: .45rem; border-radius: .85rem;
  background: #10132a;
  border: 1px solid rgba(214, 180, 106, .35);
  box-shadow: 0 1.2rem 2.6rem rgba(0, 0, 0, .55);
  -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
}
.menu-item {
  display: grid; grid-template-columns: .75rem minmax(0, 1fr); column-gap: .75rem;
  padding: .55rem .7rem; border-radius: .55rem;
  color: var(--cream); text-decoration: none;
}
.menu-item:hover, .menu-item:focus-visible { background: rgba(214, 180, 106, .13); outline: none; }
.menu-item.is-here { background: rgba(214, 180, 106, .2); }
.mi-dot { grid-row: 1 / span 2; align-self: center; width: .7rem; height: .7rem; border-radius: .2rem; background: var(--tc); }
.mi-l { font: 600 1.02rem/1.2 var(--f-display); }
.mi-s { font: italic .8rem/1.3 var(--f-body); color: var(--cream-dim); }

#bottombar {
  position: absolute; z-index: 20; left: 0; right: 0; bottom: 0;
  height: calc(var(--bot-h, 92px) + env(safe-area-inset-bottom, 0px));
  display: flex; flex-direction: column; align-items: center; justify-content: flex-end; gap: .55rem;
  padding-bottom: calc(.85rem + env(safe-area-inset-bottom, 0px));
  padding-left: max(16px, env(safe-area-inset-left, 0px));
  padding-right: max(16px, env(safe-area-inset-right, 0px));
  background: linear-gradient(rgba(6, 8, 18, 0), rgba(6, 8, 18, .72));
  pointer-events: none;
  transition: opacity 1s .3s;
}
body.is-loading #topbar, body.is-loading #bottombar { opacity: 0; }
body.og-shot #topbar, body.og-shot #bottombar { display: none; }
body.og-shot *, body.og-shot *::before, body.og-shot *::after { transition: none !important; animation: none !important; }
.navrow { display: flex; align-items: center; gap: 1rem; pointer-events: auto; max-width: 100%; }
.nav-btn {
  flex: none; width: 2.6rem; height: 2.6rem; border-radius: 50%;
  display: grid; place-items: center;
  border: 1px solid rgba(214, 180, 106, .45); background: rgba(12, 15, 30, .55);
  color: var(--gold-hi); cursor: pointer;
  transition: background .2s, opacity .2s;
}
.nav-btn svg { width: 1.25rem; height: 1.25rem; }
.nav-btn:hover:not(:disabled) { background: rgba(214, 180, 106, .18); }
.nav-btn:disabled { opacity: .3; cursor: default; }
.nav-label { min-width: 0; width: 17rem; max-width: calc(100vw - 9rem); display: flex; flex-direction: column; align-items: center; gap: .12rem; text-align: center; }
.nav-chapter { max-width: 100%; font: 600 1.06rem/1.2 var(--f-display); color: var(--cream); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.nav-pages { font: 500 .6rem/1.2 var(--f-caps); letter-spacing: .17em; text-transform: uppercase; color: var(--cream-dim); }
.progress { position: relative; width: min(28rem, 82vw); height: 2px; border-radius: 2px; background: rgba(239, 228, 204, .14); }
.progress-fill { position: absolute; inset: 0; border-radius: inherit; transform-origin: 0 50%; transform: scaleX(0); background: linear-gradient(90deg, #b8893b, #f3dfa6); transition: transform .55s cubic-bezier(.2,.8,.2,1); }
.progress-ticks i { position: absolute; top: -2px; width: 1px; height: 6px; background: rgba(239, 228, 204, .35); }
body.at-cover .nav-pages { display: inline-flex; align-items: center; gap: .55rem; color: var(--gold-hi); }
body.at-cover .nav-pages::before {
  content: ""; flex: none; width: .78rem; height: 1.15rem;
  border: 1.5px solid rgba(243, 223, 166, .75); border-radius: .45rem;
  background: radial-gradient(circle, var(--gold-hi) 0 1.3px, rgba(0,0,0,0) 1.7px) no-repeat 50% 25% / 100% 100%;
  animation: wheel 1.9s infinite;
}
@keyframes wheel {
  0% { background-position: 50% 22%; }
  60% { background-position: 50% 62%; opacity: 1; }
  80%, 100% { background-position: 50% 62%; opacity: .4; }
}

/* ------------------------------------------------------------ overview */
#overview {
  position: fixed; inset: 0; z-index: 50;
  overflow-y: auto; overscroll-behavior: contain;
  padding: 0 max(16px, env(safe-area-inset-right, 0px)) 4rem max(16px, env(safe-area-inset-left, 0px));
  background: rgba(8, 10, 22, .97);
}
.ov-head {
  position: sticky; top: 0; z-index: 5;
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .5rem 1rem;
  padding: calc(1rem + env(safe-area-inset-top, 0px)) 0 1.2rem;
  background: linear-gradient(rgba(8, 10, 22, 1) 72%, rgba(8, 10, 22, 0));
}
.ov-kicker { width: 100%; margin: 0; font: 600 .62rem/1 var(--f-caps); letter-spacing: .2em; text-transform: uppercase; color: var(--cream-dim); }
.ov-head h2 { margin: 0; font: 600 1.85rem/1.1 var(--f-display); color: var(--cream); }
.ov-grid { display: flex; flex-wrap: wrap; justify-content: center; gap: 2.4rem 2rem; padding-top: .5rem; }
.ov-item {
  display: flex; flex-direction: column; align-items: center; gap: .7rem;
  padding: 0; border: 0; background: none; cursor: pointer; color: var(--cream);
}
.ov-row { display: flex; align-items: center; box-shadow: 0 1rem 2.2rem rgba(0, 0, 0, .45); }
.ov-page { position: relative; width: var(--pw); height: var(--ph); flex: none; }
.ov-page.ov-board { width: calc(var(--pw) + var(--ov)); height: calc(var(--ph) + 2 * var(--ov)); }
.ov-page > .pg { position: absolute; left: 0; top: 0; }
.ov-item:hover .ov-row, .ov-item:focus-visible .ov-row { outline: 2px solid rgba(214, 180, 106, .75); outline-offset: 5px; }
.ov-item:focus-visible { outline: none; }
.ov-cap { font: 600 .64rem/1.2 var(--f-caps); letter-spacing: .18em; text-transform: uppercase; color: var(--cream-dim); }
.is-ov .note, .is-ov mark.hl, .is-ov .signature { transition: none !important; animation: none !important; }
@media (max-width: 759px) {
  .ov-row { flex-direction: column; }
  .ov-head h2 { font-size: 1.45rem; }
}

/* ---------------------------------------------------------- responsive */
@media (max-width: 999px) {
  .pill-ghost span { display: none; }
  .pill-ghost { padding: 0 .7rem; }
}
@media (max-width: 759px) {
  .brand-text small { display: none; }
  .top-actions .pill span { display: none; }
  .top-actions .pill { width: 2.35rem; padding: 0; justify-content: center; }
  .navrow { gap: .6rem; }
  .nav-label { width: auto; flex: 1; }
  .hint { font-size: .58rem; }
}
@media (max-width: 380px) {
  .brand-text strong { font-size: 1.05rem; }
  .mono { width: 2.2rem; height: 2.2rem; font-size: .8rem; }
}
.mode-single .pf-split { grid-template-columns: minmax(0, 1fr) 8.6em; gap: 1em; }
.mode-single .pf-flyer .pf-zoom { width: 14.6em; }
.mode-single .prose { text-align: left; }
/* On a phone the page is narrow and the text runs longer, so a note at the foot of a page joins
   the text flow there (below everything else) instead of floating: it can never sit on the text,
   and the page's type is fitted with the note counted in. */
/* the greeting above the portrait (first, although it comes last in the page), its arrow ending
   just short of the frame */
.mode-single .note-hello { order: -1; position: relative; left: auto; top: auto; align-self: flex-start; margin: .6em 0 2.2em .4em; }
/* the cover's column: the seal follows the subtitle, and the cover is fitted like a page */
.mode-single .cover-sub { margin: 0; }
.mode-single .cover-sticker { position: relative; right: auto; bottom: auto; flex: none; margin: 1.3em 0 auto; transform: rotate(-8deg); }
/* the phone illustration steps left so the note beside it has room */
.mode-single .phone, .mode-single .phone-cap { margin-right: 2.6em; }
.mode-single .note-feed { right: 0; font-size: 1em; }

/* ------------------------------------------------------------ lightbox */
/* a portfolio piece opened large; a click anywhere or Escape closes it */
.lightbox {
  position: fixed; inset: 0; z-index: 60;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 1rem;
  padding: calc(1rem + env(safe-area-inset-top, 0px)) max(16px, env(safe-area-inset-right, 0px)) calc(1rem + env(safe-area-inset-bottom, 0px)) max(16px, env(safe-area-inset-left, 0px));
  background: rgba(8, 10, 22, .95);
  cursor: zoom-out;
}
.lb-fig { margin: 0; min-height: 0; max-width: 100%; display: flex; flex-direction: column; align-items: center; gap: .8rem; }
.lb-fig img {
  display: block; width: auto; height: auto;
  max-width: min(100%, 60rem);
  max-height: calc(100vh - 9.5rem); max-height: calc(100dvh - 9.5rem);
  border-radius: .3rem; box-shadow: 0 1.2rem 2.8rem rgba(0, 0, 0, .55);
}
.lb-fig figcaption { font: 600 .66rem/1.3 var(--f-caps); letter-spacing: .18em; text-transform: uppercase; color: var(--cream-dim); text-align: center; }
body.lb-open { overflow: hidden; }

@media print {
  @page { size: A4 landscape; margin: 10mm; }
  * { -webkit-print-color-adjust: exact; print-color-adjust: exact; }
  html, body { background: #fff !important; }
  #scene, #scroller, .skip, .rotate-hint, .ov-head .pill, .ov-kicker { display: none !important; }
  #overview { display: block !important; position: static; overflow: visible; padding: 0; background: #fff; }
  .ov-head { position: static; padding: 0 0 4mm; background: none; }
  .ov-head h2 { color: #22305f; font-size: 16pt; }
  .ov-grid { display: block; --pw: 112mm; --ph: 160mm; --ov: 3.4mm; --wcap: 5.6mm; --f: 3.73mm; }
  .ov-item { display: flex; margin: 0 auto 6mm; break-inside: avoid; page-break-inside: avoid; }
  .ov-item + .ov-item { break-before: page; page-break-before: always; }
  .ov-row { box-shadow: none; flex-direction: row !important; }
  .ov-cap { color: #555; }
}

.rotate-hint { display: none; }
@media (orientation: landscape) and (max-height: 500px) and (pointer: coarse) {
  .rotate-hint {
    position: fixed; inset: 0; z-index: 90;
    display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 1rem;
    padding: 0 max(16px, env(safe-area-inset-right, 0px)) 0 max(16px, env(safe-area-inset-left, 0px));
    background: rgba(8, 10, 22, .96); color: var(--cream); text-align: center;
  }
  .rotate-hint svg { width: 3.2rem; height: 3.2rem; color: var(--gold-hi); }
  .rotate-hint p { margin: 0; font: italic 500 1.2rem/1.4 var(--f-display); }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
    transition-delay: 0s !important;
  }
  .revealed .wave rect { animation: none; }
}