/* Anlon's book. Values come from the approved mockup in Design/ unless noted. */

:root {
  --cloth: #93271F;
  --gilt: #DDBA66;
  --paper: #ECE1C9;
  --ink: #2A2119;
  --ink-faded: #5B4C3B;
  --ink-red: #962D1F;
  --tab: #E6D6B2;
  --tab-hover: #F2E6C8;
  --silk: linear-gradient(90deg, #876020 0%, #CFA246 46%, #A57729 100%);
  --sc: 'IM Fell English SC', 'Iowan Old Style', Georgia, serif;
  --fell: 'IM Fell English', 'Iowan Old Style', Georgia, serif;
  --body: 'Libre Caslon Text', 'Iowan Old Style', Georgia, serif;

  /* Landing page depth and light. cover.js sets --mouse-x / --mouse-y (the cursor, 0 to 1 across the window)
     and --foil-x / --foil-y / --foil-a (where the highlight falls on the cover, and how strongly). Tune here. */
  --tilt-max: 4deg;                  /* most the closed book leans toward the cursor */
  --tilt-perspective: 1200px;
  --lift-angle: -6deg;               /* the cover cracking open when you point at it or at "Open the book" */
  --lift-perspective: 1400px;
  --ribbon-drop: 6px;
  --ribbon-swing: 3deg;
  --tab-slide: 6px;
  --foil-hl: 255 248 222;            /* colour of the highlight on the gold, as r g b */
  --wm-drift: 18px;                  /* how far the desk schematics drift against the cursor */
  --grid-size: 28px;                 /* spacing of the isometric grid */
  --gilt-line: linear-gradient(90deg, #A8823A, #F0D98F 50%, #A8823A);
  --tab-grain:
    repeating-linear-gradient(8deg, rgba(110,80,42,.035) 0 1px, rgba(110,80,42,0) 1px 4px),
    repeating-linear-gradient(98deg, rgba(255,255,255,.07) 0 1px, rgba(255,255,255,0) 1px 5px);
}

[data-theme=dark] {
  --desk: #131111;
  --desk-text: #EEDFBC; --desk-muted: #B5A68A; --rule: rgba(216,180,98,.65);
  --book-shadow: 0 30px 64px rgba(0,0,0,.72), 0 8px 18px rgba(0,0,0,.5);
  --open-shadow: 0 32px 70px rgba(0,0,0,.72), 0 10px 24px rgba(0,0,0,.5);
  --page-shadow: 0 10px 24px rgba(0,0,0,.6);
  --tab-shadow: 1px 1px 0 rgba(60,40,15,.3), 2px 4px 8px rgba(0,0,0,.5), inset -1px 0 0 rgba(110,80,42,.35), inset 0 1px 0 rgba(255,255,255,.35);
  --tab-shadow-l: -1px 1px 0 rgba(60,40,15,.3), -2px 4px 8px rgba(0,0,0,.5), inset 1px 0 0 rgba(110,80,42,.35), inset 0 1px 0 rgba(255,255,255,.35);
  --chip-shadow: 0 1px 0 rgba(60,40,15,.3), 0 3px 7px rgba(0,0,0,.5), inset 0 -1px 0 rgba(110,80,42,.35), inset 0 1px 0 rgba(255,255,255,.35);
  --focus: #E8C873;
  --spot: rgba(255,204,138,.15); --spot-0: rgba(255,204,138,0);
  --vig: rgba(0,0,0,.65); --vig-0: rgba(0,0,0,0); --vig-start: 46%;
  --grid-line: rgba(238,223,188,.045);
  --wm-ink: #EEDFBC; --wm-opacity: .055;
  --cta-border: rgba(221,186,102,.7); --cta-border-hover: rgba(232,200,115,.95);
  --cta-fill: rgba(221,186,102,.06); --cta-fill-hover: rgba(221,186,102,.14);
  --cta-sheen: rgba(255,240,200,.10); --cta-glow: rgba(221,186,102,.12); --cta-drop: rgba(0,0,0,.45);
  /* Light / Dark switch: a gunmetal plate with brass lettering */
  --plate-face: linear-gradient(180deg, #4A453E 0%, #2F2B27 48%, #24211E 100%);
  --plate-brush: repeating-linear-gradient(0deg, rgba(255,255,255,.028) 0 1px, rgba(255,255,255,0) 1px 2px);
  --plate-shadow: inset 0 1px 0 rgba(255,255,255,.06), inset 0 -1px 0 rgba(0,0,0,.5), 0 0 0 1px rgba(205,170,98,.45), 0 4px 12px rgba(0,0,0,.55);
  --plate-text: #B9A06A; --plate-text-hover: #D8C08A; --plate-text-on: #F2DA9C; --plate-hover: rgba(255,255,255,.04);
  --plate-engrave: 0 -1px 0 rgba(0,0,0,.65), 0 1px 0 rgba(255,255,255,.07);
  --plate-well: linear-gradient(180deg, rgba(0,0,0,.42), rgba(0,0,0,.18));
  --plate-well-shadow: inset 0 2px 5px rgba(0,0,0,.6), inset 0 -1px 0 rgba(255,255,255,.07);
  --plate-groove-d: rgba(0,0,0,.5); --plate-groove-l: rgba(255,255,255,.06);
  --plate-screw: radial-gradient(circle at 35% 35%, #E9D7A6, #9C7F44 60%, #5E4A24); --plate-screw-shadow: 0 1px 0 rgba(0,0,0,.6);
  --plate-icon-shadow: 0 -1px 0 rgba(0,0,0,.6);
}

[data-theme=light] {
  --desk: #E4E9E1;
  --desk-text: #2A2119; --desk-muted: #5B4C3B; --rule: rgba(147,39,31,.55);
  --book-shadow: 0 26px 50px rgba(36,30,22,.30), 0 7px 16px rgba(36,30,22,.22);
  --open-shadow: 0 28px 56px rgba(36,30,22,.30), 0 8px 18px rgba(36,30,22,.22);
  --page-shadow: 0 8px 20px rgba(36,30,22,.20);
  --tab-shadow: 1px 1px 0 rgba(60,40,15,.22), 1px 3px 6px rgba(36,30,22,.25), inset -1px 0 0 rgba(110,80,42,.45), inset 0 1px 0 rgba(255,255,255,.4);
  --tab-shadow-l: -1px 1px 0 rgba(60,40,15,.22), -1px 3px 6px rgba(36,30,22,.25), inset 1px 0 0 rgba(110,80,42,.45), inset 0 1px 0 rgba(255,255,255,.4);
  --chip-shadow: 0 1px 0 rgba(60,40,15,.22), 0 2px 5px rgba(36,30,22,.22), inset 0 -1px 0 rgba(110,80,42,.45), inset 0 1px 0 rgba(255,255,255,.4);
  --focus: #93271F;
  --spot: rgba(255,255,252,.78); --spot-0: rgba(255,255,252,0);
  --vig: rgba(40,52,40,.16); --vig-0: rgba(40,52,40,0); --vig-start: 50%;
  --grid-line: rgba(42,33,25,.055);
  --wm-ink: #2A2119; --wm-opacity: .06;
  --cta-border: rgba(147,39,31,.55); --cta-border-hover: rgba(147,39,31,.85);
  --cta-fill: rgba(147,39,31,.035); --cta-fill-hover: rgba(147,39,31,.08);
  --cta-sheen: rgba(255,255,255,.5); --cta-glow: rgba(147,39,31,.08); --cta-drop: rgba(36,30,22,.16);
  /* Light / Dark switch: a brass plate with dark lettering */
  --plate-face: linear-gradient(180deg, #E7CB86 0%, #C9A65E 46%, #A98642 100%);
  --plate-brush: repeating-linear-gradient(0deg, rgba(255,255,255,.07) 0 1px, rgba(255,255,255,0) 1px 2px);
  --plate-shadow: inset 0 1px 0 rgba(255,250,225,.55), inset 0 -1px 0 rgba(80,55,15,.35), 0 0 0 1px rgba(110,80,30,.55), 0 3px 9px rgba(40,30,15,.35);
  --plate-text: #4A3517; --plate-text-hover: #2A1C08; --plate-text-on: #2A1C08; --plate-hover: rgba(255,245,215,.18);
  --plate-engrave: 0 1px 0 rgba(255,240,200,.55), 0 -1px 0 rgba(80,55,15,.25);
  --plate-well: linear-gradient(180deg, rgba(90,62,18,.32), rgba(90,62,18,.12));
  --plate-well-shadow: inset 0 2px 4px rgba(70,48,12,.5), inset 0 -1px 0 rgba(255,245,215,.35);
  --plate-groove-d: rgba(90,62,18,.45); --plate-groove-l: rgba(255,245,215,.45);
  --plate-screw: radial-gradient(circle at 35% 35%, #FFF1C8, #B08A45 60%, #6E5426); --plate-screw-shadow: 0 1px 0 rgba(255,245,215,.5);
  --plate-icon-shadow: 0 1px 0 rgba(255,240,200,.55);
}

* { box-sizing: border-box; }
[hidden] { display: none !important; }
html, body { margin: 0; }
body { background-color: var(--desk); color: var(--desk-text); font-family: var(--body); transition: background-color .3s ease; }
a { color: inherit; }
p, h1, h2, figure { margin: 0; }

/* The desk: background colour, spotlight and vignette */
.desk {
  position: relative; min-height: 100vh; min-height: 100dvh; overflow-x: clip;
  --spot-size: 62% 58%; --spot-y: 40%; --vig-size: 120% 100%; --vig-y: 45%;
  background-image:
    radial-gradient(ellipse var(--spot-size) at 50% var(--spot-y), var(--spot), var(--spot-0) 72%),
    radial-gradient(ellipse var(--vig-size) at 50% var(--vig-y), var(--vig-0) var(--vig-start), var(--vig) 100%);
}
[data-view=open] .desk { --spot-y: 44%; }

/* Under the book: an isometric drafting grid that fades toward the edges, and faint schematics either side.
   The grid's three line families meet at common points: two diagonals per 2 x 1.1547 tile, and verticals. */
.backdrop { position: absolute; inset: 0; z-index: 0; overflow: hidden; pointer-events: none; user-select: none; }
.backdrop::before {
  content: ""; position: absolute; inset: 0;
  background-image:
    linear-gradient(to top right, rgba(0,0,0,0) calc(50% - .6px), var(--grid-line) calc(50% - .6px), var(--grid-line) calc(50% + .6px), rgba(0,0,0,0) calc(50% + .6px)),
    linear-gradient(to bottom right, rgba(0,0,0,0) calc(50% - .6px), var(--grid-line) calc(50% - .6px), var(--grid-line) calc(50% + .6px), rgba(0,0,0,0) calc(50% + .6px)),
    linear-gradient(90deg, var(--grid-line) 1px, rgba(0,0,0,0) 1px);
  background-size: calc(var(--grid-size) * 2) calc(var(--grid-size) * 1.1547), calc(var(--grid-size) * 2) calc(var(--grid-size) * 1.1547), var(--grid-size) 100%;
  background-position: center top, center top, calc(50% + var(--grid-size) / 2) 0;
  -webkit-mask-image: radial-gradient(ellipse 72% 78% at 50% 45%, #000 30%, rgba(0,0,0,0) 100%);
          mask-image: radial-gradient(ellipse 72% 78% at 50% 45%, #000 30%, rgba(0,0,0,0) 100%);
}
/* Schematics drift against the cursor, the nearer-looking ones (higher --depth) a little further */
.wm {
  position: absolute; height: auto; overflow: visible; color: var(--wm-ink); opacity: var(--wm-opacity);
  translate: calc((var(--mouse-x, .5) - .5) * var(--wm-drift) * var(--depth, 1) * -1) calc((var(--mouse-y, .5) - .5) * var(--wm-drift) * var(--depth, 1) * -1);
}
.wm * { vector-effect: non-scaling-stroke; }
.wm text { font-family: var(--fell); }
.wm-arm { left: max(2vw, calc(50% - 640px)); top: 16%; width: clamp(230px, 23vw, 350px); --depth: 1; }
.wm-gears { right: max(2vw, calc(50% - 650px)); top: 8%; width: clamp(210px, 21vw, 320px); --depth: 1.4; }
.wm-pcb { right: max(3vw, calc(50% - 630px)); bottom: 6%; width: clamp(220px, 22vw, 330px); --depth: .7; }

/* Light / Dark switch: an engraved plate (gunmetal in dark mode, brass in light), the pressed button sunk into it */
.modes {
  position: absolute; top: 20px; left: 20px; z-index: 10; display: flex; padding: 2px 12px; border-radius: 6px;
  background-image: var(--plate-brush), var(--plate-face); box-shadow: var(--plate-shadow);
}
.modes::before, .modes::after {                            /* two screws */
  content: ""; position: absolute; top: 50%; width: 6px; height: 6px; margin-top: -3px; border-radius: 50%;
  background-image: var(--plate-screw); box-shadow: var(--plate-screw-shadow);
}
.modes::before { left: 3px; }
.modes::after { right: 3px; }
.mode-btn {
  position: relative; display: inline-flex; align-items: center; gap: 8px; min-height: 44px; margin: 0; padding: 0 14px; border: 0; border-radius: 4px;
  background-color: transparent; color: var(--plate-text); text-shadow: var(--plate-engrave);
  font-family: var(--sc); font-size: 15px; letter-spacing: .06em;
  cursor: pointer; transition: background-color .2s ease, color .2s ease, box-shadow .2s ease;
}
.mode-btn + .mode-btn { margin-left: 2px; }
.mode-btn + .mode-btn::before {                            /* the groove between the two buttons */
  content: ""; position: absolute; left: -2px; top: 9px; bottom: 9px; width: 2px;
  background-image: linear-gradient(90deg, var(--plate-groove-d) 50%, var(--plate-groove-l) 50%);
}
.mode-btn svg { width: 16px; height: 16px; filter: drop-shadow(var(--plate-icon-shadow)); transition: transform .45s cubic-bezier(.3,1.5,.5,1), opacity .3s ease; }
.mode-btn[aria-pressed=false] svg { transform: rotate(-25deg) scale(.86); opacity: .72; }
.mode-btn:hover { background-color: var(--plate-hover); color: var(--plate-text-hover); }
.mode-btn[aria-pressed=true] { background-color: transparent; background-image: var(--plate-well); box-shadow: var(--plate-well-shadow); color: var(--plate-text-on); }
.mode-btn:focus-visible { outline: 2px solid var(--focus); outline-offset: -3px; }

/* Scenes share one grid cell so they can cross-fade. The stage sits above the backdrop */
.stage { position: relative; z-index: 1; display: grid; min-height: 100vh; min-height: 100dvh; }
.scene { grid-area: 1 / 1; min-width: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; }
.scene-cover, .scene-back { padding: 56px 16px 48px; gap: 64px; }
.scene-open { padding: 76px 16px 32px; gap: 26px; }
.bookrow { display: flex; align-items: flex-start; justify-content: center; padding-left: 44px; }
.f1 { flex: 1; } .f8 { flex: .8; } .f6 { flex: .6; } .f25 { flex: .25; } .f15 { flex: .15; }

/* Cloth texture */
.cloth {
  background-image:
    radial-gradient(ellipse 85% 60% at 28% 16%, rgba(255,255,255,.10), rgba(255,255,255,0) 62%),
    radial-gradient(ellipse 95% 75% at 78% 96%, rgba(0,0,0,.30), rgba(0,0,0,0) 66%),
    repeating-linear-gradient(0deg, rgba(255,255,255,.035) 0 1px, rgba(255,255,255,0) 1px 3px),
    repeating-linear-gradient(90deg, rgba(0,0,0,.08) 0 1px, rgba(0,0,0,0) 1px 3px);
}

/* Closed book (front and back cover) */
.closed { position: relative; flex: none; width: min(480px, 74vw, calc((100vh - 240px) * 480 / 655)); aspect-ratio: 480 / 655; }
.closed-back { position: absolute; inset: 0; transform: translate(10px, 11px); border-radius: 4px 9px 9px 4px; background-color: var(--cloth); filter: brightness(.55); box-shadow: var(--book-shadow); }
/* The page block: edges show beside the cover (--edge-r) and below it (--edge-b), lined like stacked paper */
.closed-block {
  position: absolute; top: 10px; bottom: -3px; left: 24px; right: -2px; transform: translate(5px, 5px); border-radius: 0 3px 3px 0;
  --edge-r: 7px; --edge-b: 8px; --page-lines: rgba(110,80,42,.22) 0 1px, rgba(110,80,42,0) 1px 3px; --page-sheen: rgba(255,255,255,.16) 0 1px, rgba(255,255,255,0) 1px 5px;
  background-color: #E2D3B1;
  background-image:
    linear-gradient(to left, rgba(255,250,235,.4) 0, rgba(255,250,235,0) 1.5px, rgba(60,40,12,0) calc(var(--edge-r) - 3px), rgba(60,40,12,.32) var(--edge-r)),
    repeating-linear-gradient(90deg, var(--page-lines)), repeating-linear-gradient(90deg, var(--page-sheen));
  box-shadow: 1px 1px 0 rgba(60,40,12,.3), 2px 3px 5px rgba(0,0,0,.22);
}
.closed-block::after {                                     /* the bottom edge, mitred into the side */
  content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: var(--edge-b); border-radius: 0 0 3px 0;
  background-color: #E2D3B1;
  background-image:
    linear-gradient(to top, rgba(255,250,235,.35) 0, rgba(255,250,235,0) 1.5px, rgba(60,40,12,0) calc(var(--edge-b) - 3px), rgba(60,40,12,.32) var(--edge-b)),
    repeating-linear-gradient(0deg, var(--page-lines)), repeating-linear-gradient(0deg, var(--page-sheen));
  clip-path: polygon(0 0, calc(100% - var(--edge-r)) 0, 100% 100%, 0 100%);
}
.closed-ribbon {
  position: absolute; left: 31%; bottom: -46px; width: 15px; height: 64px; z-index: 1; background-image: var(--silk); clip-path: polygon(0 0, 100% 0, 100% 100%, 50% 80%, 0 100%);
  transform-origin: 50% 0; transition: transform .5s cubic-bezier(.3,.7,.2,1);
}
/* .board is the size container (cqw = 1% of the cover's width); it has no padding, unlike .board-face */
.board { position: absolute; inset: 0; z-index: 2; display: block; text-decoration: none; container-type: inline-size; perspective: var(--lift-perspective); }
.board-face {
  position: absolute; inset: 0; border-radius: 4px 9px 9px 4px; background-color: var(--cloth);
  --face-inset: inset 0 0 0 1px rgba(0,0,0,.4), inset 0 0 26px rgba(0,0,0,.38);
  box-shadow: var(--face-inset);
  padding: 17% 12% 10% 20%; display: flex; flex-direction: column; align-items: center; text-align: center;
  transform-origin: left center; transition: transform .5s cubic-bezier(.2,.75,.25,1), box-shadow .5s ease;
}
.board.swing .board-face { backface-visibility: hidden; }   /* only while it swings: on a tilted book it would draw a dark seam */
a.board:focus-visible { outline: 2px solid var(--focus); outline-offset: 10px; }

/* The closed book leans toward the cursor, up to --tilt-max. It stays above the open book while it swings open */
.scene-cover .bookrow, .scene-back .bookrow {
  position: relative; z-index: 1;
  transform: perspective(var(--tilt-perspective)) rotateX(calc((var(--mouse-y, .5) - .5) * 2 * var(--tilt-max))) rotateY(calc((var(--mouse-x, .5) - .5) * -2 * var(--tilt-max)));
}
.scene-back .bookrow { transform-origin: calc(50% + 22px) 50%; }   /* the middle of the back cover */
/* Pointing at the cover or at "Open the book" lifts the cover a little off the pages and lets the ribbon fall */
.scene-cover:has(.board:hover, .board:focus-visible, .open-link:hover, .open-link:focus-visible) .board-face {
  transform: rotateY(var(--lift-angle)); box-shadow: var(--face-inset), 9px 6px 16px rgba(0,0,0,.32);
}
.scene-cover:has(.board:hover, .board:focus-visible, .open-link:hover, .open-link:focus-visible) .closed-ribbon {
  transform: translateY(var(--ribbon-drop)) rotate(var(--ribbon-swing));
}

/* The spine: a rounded back with raised bands, and a deep crease at the hinge */
.spine {
  position: absolute; left: 0; top: 0; bottom: 0; width: 8%; border-radius: 4px 0 0 4px;
  --spine-shade: rgba(0,0,0,.55) 0, rgba(0,0,0,.32) 9%, rgba(255,255,255,.09) 28%, rgba(255,255,255,.04) 40%, rgba(0,0,0,.10) 60%, rgba(0,0,0,.28) 86%, rgba(0,0,0,.36) 100%;
  --spine-ribs:                                            /* four raised bands: a lit top edge, a shadow under */
    linear-gradient(180deg, rgba(0,0,0,0) 15.4%, rgba(255,255,255,.14) 15.4% 15.9%, rgba(0,0,0,.34) 15.9% 16.8%, rgba(0,0,0,0) 16.8% 31.4%,
      rgba(255,255,255,.14) 31.4% 31.9%, rgba(0,0,0,.34) 31.9% 32.8%, rgba(0,0,0,0) 32.8% 67%,
      rgba(255,255,255,.14) 67% 67.5%, rgba(0,0,0,.34) 67.5% 68.4%, rgba(0,0,0,0) 68.4% 83%,
      rgba(255,255,255,.14) 83% 83.5%, rgba(0,0,0,.34) 83.5% 84.4%, rgba(0,0,0,0) 84.4%);
  background-image: linear-gradient(90deg, var(--spine-shade)), var(--spine-ribs);
}
.spine-line { position: absolute; left: calc(8.4% - 1px); top: 0; bottom: 0; width: 5px; --crease: rgba(255,255,255,.07) 0, rgba(0,0,0,.48) 28%, rgba(0,0,0,.62) 50%, rgba(0,0,0,.3) 72%, rgba(255,255,255,.12) 100%; background-image: linear-gradient(90deg, var(--crease)); }

/* Cover engraving and corner marks (inline SVG, cover units), and the light on the gold.
   The highlight is drawn in cover coordinates on every gilt line, frame and the engraving, so it runs across them in one piece. */
.cover-art { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; pointer-events: none; }
.cover-art .foil-light { opacity: var(--foil-a, 0); }
.board-face .gilt {
  background-image:
    radial-gradient(ellipse 34% 26% at calc(var(--foil-x, .5) * 100%) calc(var(--foil-y, .3) * 100%),
      rgb(var(--foil-hl) / calc(var(--foil-a, 0) * .9)), rgb(var(--foil-hl) / calc(var(--foil-a, 0) * .3)) 45%, rgb(var(--foil-hl) / 0) 100%),
    linear-gradient(180deg, #F8E9B6 0%, #DDBA66 50%, #A8823A 100%);
  background-size: 100cqw calc(100cqw * 655 / 480), 100% 100%;
  background-position: calc(var(--fx, 0px) * -1) calc(var(--fy, 0px) * -1), 0 0;
  background-repeat: no-repeat;
}
.frame::after {
  content: ""; position: absolute; inset: -1.5px; border: 1.5px solid transparent; opacity: var(--foil-a, 0);
  border-image: radial-gradient(ellipse 42.5% 29% at calc((var(--foil-x, .5) - var(--frame-x, .14)) / .8 * 100%) calc((var(--foil-y, .3) - .05) / .9 * 100%), rgb(var(--foil-hl) / .95), rgb(var(--foil-hl) / 0)) 1;
}
.frame.inner::after { inset: -1px; border-width: 1px; }
.frame { position: absolute; top: 5%; bottom: 5%; left: 14%; right: 6%; border: 1.5px solid rgba(221,186,102,.85); }
.frame.inner { top: calc(5% + 7px); bottom: calc(5% + 7px); left: calc(14% + 7px); right: calc(6% + 7px); border: 1px solid rgba(221,186,102,.5); }
.gilt {
  display: block; color: var(--gilt); background-image: linear-gradient(180deg, #F8E9B6 0%, #DDBA66 50%, #A8823A 100%);
  -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; filter: drop-shadow(0 1px 0 rgba(0,0,0,.55));
}
.name { font-family: var(--sc); font-size: 11.25cqw; line-height: 1.04; letter-spacing: .07em; }
.gilt-rule { display: block; width: 12.1cqw; height: 1px; margin: 4.17cqw 0 3.33cqw; background-color: rgba(221,186,102,.8); }
.role { font-family: var(--fell); font-style: italic; font-size: 5cqw; letter-spacing: .01em; }
.device { width: 23%; height: auto; color: var(--gilt); filter: drop-shadow(0 1px 0 rgba(0,0,0,.55)); }

/* Back cover: the spine sits on the right */
.back .board-face { border-radius: 9px 4px 4px 9px; padding: 17% 20% 10% 12%; transform-origin: right center; }
.back .closed-back { border-radius: 9px 4px 4px 9px; }
.back .spine { left: auto; right: 0; border-radius: 0 4px 4px 0; background-image: linear-gradient(270deg, var(--spine-shade)), var(--spine-ribs); }
.back .spine-line { left: auto; right: calc(8.4% - 1px); background-image: linear-gradient(270deg, var(--crease)); }
.back .frame { left: 6%; right: 14%; --frame-x: .06; }
.back .frame.inner { left: calc(6% + 7px); right: calc(14% + 7px); }
.closing { margin-top: 6cqw; font-family: var(--fell); font-style: italic; font-size: 5cqw; }
.back-link { display: inline-block; margin-top: 4cqw; font-family: var(--sc); font-size: 4cqw; letter-spacing: .1em; text-decoration: none; border-bottom: 1px solid rgba(221,186,102,.6); }
.back-link:focus-visible { outline: 2px solid var(--focus); outline-offset: 4px; }

/* Chapter tabs beside the closed cover */
.tabs { position: relative; z-index: 1; flex: none; margin: 44px 0 0 -6px; display: flex; flex-direction: column; gap: 5px; }
/* Each tab: parchment with a fine grain, darker where it comes out from between the pages (--tab-edge),
   its own layered shadow, and a short gilt rule across its top */
.tab {
  display: flex; align-items: center; justify-content: center; gap: 7px; width: 50px; min-height: 62px; padding: 10px 0 10px 6px;
  border-radius: 0 7px 7px 0; background-color: var(--tab); color: var(--ink); text-decoration: none;
  --tab-edge: 90deg;
  background-image: linear-gradient(var(--tab-edge), rgba(90,62,28,.16) 0, rgba(90,62,28,0) 32%), var(--tab-grain);
  font-family: var(--sc); font-size: 13px; letter-spacing: .06em; box-shadow: var(--tab-shadow);
  writing-mode: vertical-rl; transition: transform .25s ease, background-color .25s ease;
}
.tab::before { content: ""; flex: none; writing-mode: horizontal-tb; width: 16px; height: 1.5px; background-image: var(--gilt-line); box-shadow: 0 1px 0 rgba(90,62,28,.25); }
.tab:hover, .tab:focus-visible { background-color: var(--tab-hover); transform: translateX(var(--tab-slide)); }
.tab:focus-visible { outline: 2px solid var(--focus); outline-offset: 3px; }

/* Text on the desk under the book */
.under { display: flex; flex-direction: column; align-items: center; gap: 6px; text-align: center; }
.scene-open .under { flex-direction: row; flex-wrap: wrap; justify-content: center; gap: 4px 28px; }
.muted { font-style: italic; font-size: 15px; color: var(--desk-muted); }
.narrow { display: none; }
/* "Open the book": a pill with a gold rule (red in light mode, like the other underlines) and a chevron that nudges forward */
.open-link {
  display: inline-flex; align-items: center; gap: 10px; min-height: 44px; padding: 0 20px 0 26px;
  font-family: var(--sc); font-size: 21px; letter-spacing: .14em; color: var(--desk-text); text-decoration: none;
  border: 1px solid var(--cta-border); border-radius: 999px; background-color: var(--cta-fill);
  box-shadow: inset 0 1px 0 var(--cta-sheen), 0 4px 14px var(--cta-drop);
  transition: background-color .25s ease, border-color .25s ease, box-shadow .25s ease;
}
.open-link .chev { flex: none; width: 15px; height: 15px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; animation: nudge 2.8s ease-in-out infinite; }
@keyframes nudge { 0%, 60%, 100% { transform: translateX(0); } 75% { transform: translateX(4px); } 88% { transform: translateX(1px); } }
.open-link:hover, .open-link:focus-visible {
  border-color: var(--cta-border-hover); background-color: var(--cta-fill-hover);
  box-shadow: inset 0 1px 0 var(--cta-sheen), 0 0 0 4px var(--cta-glow), 0 6px 18px var(--cta-drop);
}
.open-link:hover .chev, .open-link:focus-visible .chev { animation: none; transform: translateX(4px); transition: transform .25s ease; }
.close-link {
  display: inline-flex; align-items: center; min-height: 44px; padding: 0; font-family: var(--sc); font-size: 17px;
  letter-spacing: .12em; color: var(--desk-text); text-decoration: none; border-bottom: 1px solid var(--rule);
}
.open-link:focus-visible { outline: 2px solid var(--focus); outline-offset: 4px; }
.close-link:focus-visible { outline: 2px solid var(--focus); outline-offset: 3px; }

/* ---------- Open book ---------- */
.scene-open .bookrow { width: 100%; padding: 0 44px; }
.book { position: relative; flex: none; width: min(1100px, 100%, calc((100vh - 180px) * 1160 / 740)); aspect-ratio: 1160 / 740; container-type: inline-size; }
.book-cloth { position: absolute; inset: 0; border-radius: 6px; background-color: var(--cloth); box-shadow: var(--open-shadow), inset 0 0 0 1px rgba(0,0,0,.4), inset 0 0 28px rgba(0,0,0,.36); }
/* Text on the pages is sized in em: 16px when the book is its full 1100px, scaling with it */
.pages { position: absolute; top: 13px; bottom: 13px; left: 16px; right: 16px; z-index: 2; font-size: 1.4545cqw; }
.pages.dragging { user-select: none; cursor: grabbing; }

/* Stacks of page edges: book.js sets --el / --er so the side with more pages is thicker */
.edge { position: absolute; top: 0; bottom: 0; pointer-events: none; }
.edge-l { right: 100%; width: var(--el, 4px); border-radius: 2px 0 0 2px; background: linear-gradient(90deg, rgba(60,40,12,.14), rgba(60,40,12,0)), repeating-linear-gradient(90deg, #C5B087 0 1px, #DCCDAB 1px 2px); }
.edge-r { left: 100%; width: var(--er, 10px); border-radius: 0 2px 2px 0; background: linear-gradient(270deg, rgba(60,40,12,.14), rgba(60,40,12,0)), repeating-linear-gradient(90deg, #E0D2B0 0 1px, #C3AE84 1px 2px); }

/* Paper. data-pos: l = left page, r = right page, c = the single page on a phone */
.page {
  position: absolute; top: 0; bottom: 0; left: 0; width: 50%; z-index: 1; overflow: hidden;
  display: flex; flex-direction: column; padding: 6% 6.5% 6.5%;
  background-color: var(--paper); color: var(--ink); box-shadow: 0 1px 0 #D3C19B;
}
.page[data-pos=l] {
  border-radius: 3px 0 0 3px;
  background-image:
    linear-gradient(to left, rgba(70,48,22,.32) 0, rgba(70,48,22,.12) 3.5%, rgba(70,48,22,0) 12%),
    radial-gradient(circle at 24% 80%, rgba(150,105,55,.10) 0, rgba(150,105,55,0) 18px),
    radial-gradient(circle at 70% 12%, rgba(150,105,55,.07) 0, rgba(150,105,55,0) 26px),
    radial-gradient(ellipse 95% 90% at 55% 50%, rgba(120,84,40,0) 62%, rgba(120,84,40,.17) 100%);
}
.page[data-pos=r], .page[data-pos=c] {
  left: 50%; border-radius: 0 3px 3px 0;
  background-image:
    linear-gradient(to right, rgba(70,48,22,.32) 0, rgba(70,48,22,.12) 3.5%, rgba(70,48,22,0) 12%),
    radial-gradient(circle at 82% 86%, rgba(150,105,55,.09) 0, rgba(150,105,55,0) 20px),
    radial-gradient(circle at 30% 18%, rgba(150,105,55,.06) 0, rgba(150,105,55,0) 14px),
    radial-gradient(ellipse 95% 90% at 45% 50%, rgba(120,84,40,0) 62%, rgba(120,84,40,.17) 100%);
}
.page[data-pos=c] { left: 0; width: 100%; }
.folio { position: absolute; left: 0; right: 0; bottom: 4.2%; text-align: center; font-family: var(--fell); font-style: italic; font-size: .9375em; color: var(--ink-faded); }

/* The page curl. book.js sets clip-path, transform and these gradients every frame:
   .shade darkens the crease and lights the curl, .cast is the shadow on the page below,
   .sheet is the blank back of a page on a phone. The folding flap isn't held inside the book: it can rise past the edge,
   and .lift is its own soft shadow (book.js gives .lift-shape the flap's outline, nudged down and right). */
.shade { position: absolute; inset: 0; z-index: 6; pointer-events: none; }
.cast { position: absolute; top: 0; bottom: 0; pointer-events: none; }
.lift { position: absolute; inset: 0; pointer-events: none; filter: blur(5px); }
.lift-shape { position: absolute; top: 0; bottom: 0; transform-origin: 0 0; background-color: rgba(30,20,8,.3); }
.sheet {
  position: absolute; top: 0; bottom: 0; transform-origin: 0 0; border-radius: 2px; overflow: hidden; background-color: var(--paper);
  background-image: linear-gradient(to left, rgba(70,48,22,.22) 0, rgba(70,48,22,0) 10%), radial-gradient(ellipse 95% 90% at 55% 50%, rgba(120,84,40,0) 62%, rgba(120,84,40,.15) 100%);
}

/* Opening and closing: the cover and the half of the spread that swings with it */
.swing { backface-visibility: hidden; }
.half-cloth { position: absolute; top: 0; bottom: 0; width: 50%; background-color: var(--cloth); box-shadow: inset 0 0 0 1px rgba(0,0,0,.4), inset 0 0 28px rgba(0,0,0,.36); }
.half-cloth.l { left: 0; border-radius: 6px 0 0 6px; }
.half-cloth.r { right: 0; border-radius: 0 6px 6px 0; }

/* Title page */
.page.title { padding: 6% 5.5% 5%; align-items: center; text-align: center; }
.tp-name { font-family: var(--sc); font-weight: 400; font-size: 3.75em; line-height: 1.04; letter-spacing: .06em; }
.tp-name span { display: block; }
.tp-rule { display: block; width: 4.5em; height: 1px; margin: 1.375em 0 1.125em; background-color: rgba(42,33,25,.6); }
.tp-role { font-family: var(--fell); font-style: italic; font-size: 1.5em; }
.tp-record { margin-top: 1.7333em; max-width: 17em; font-style: italic; font-size: .9375em; line-height: 1.65; color: var(--ink-faded); text-wrap: balance; }
.tp-device { width: 3.875em; height: auto; color: var(--ink-red); }
.tp-place { font-family: var(--sc); font-size: .9375em; letter-spacing: .24em; }
.tp-year { margin-top: .4286em; font-family: var(--sc); font-size: .875em; letter-spacing: .22em; color: var(--ink-faded); }

/* Chapter heading (the Contents heading style) */
.chapter-head { display: flex; flex-direction: column; align-items: center; gap: .625em; margin-bottom: 1.5em; }
.chapter-head h2 { font-family: var(--sc); font-weight: 400; font-size: 1.5em; letter-spacing: .22em; color: var(--ink-red); text-align: center; }
.orn { width: 7.5em; height: .75em; color: var(--ink-red); }

/* Contents */
.entries { display: flex; flex-direction: column; gap: .125em; }
.entry { display: grid; grid-template-columns: 2.5em minmax(0, 1fr) auto; column-gap: .625em; align-items: baseline; padding: .4375em 0; color: var(--ink); text-decoration: none; }
.entry .n { font-family: var(--sc); color: var(--ink-red); text-align: right; }
.entry .tl { display: flex; align-items: baseline; min-width: 0; }
.entry .t { font-size: 1.125em; transition: color .15s ease; }
.entry .pg { font-family: var(--fell); font-size: 1.125em; }
.entry .note { grid-column: 2 / 4; margin-top: 2px; font-style: italic; font-size: .84375em; line-height: 1.45; color: var(--ink-faded); }
.entry:hover .t { color: var(--ink-red); }
.entry:focus-visible { outline: 2px solid var(--ink-red); outline-offset: 2px; }
.leader {
  flex: 1; min-width: 1.5em; height: 3px; margin: 0 .5em 5px; align-self: flex-end;
  background-image: radial-gradient(circle, rgba(42,33,25,.55) .9px, rgba(42,33,25,0) 1.3px);
  background-size: 7px 3px; background-repeat: repeat-x; background-position: left center;
}

/* Placeholders (visible on purpose) */
.ph { margin-bottom: .75em; font-size: .9375em; letter-spacing: .04em; color: var(--ink-faded); }
.plate { flex: 1; max-height: 70%; margin-bottom: 1em; display: grid; place-items: center; border: 1px solid rgba(91,76,59,.45); outline: 1px solid rgba(91,76,59,.25); outline-offset: 4px; background-color: rgba(255,255,255,.16); }
.plate .ph { margin: 0; }
.orn-d { width: .75em; height: .75em; margin: auto; color: var(--ink-red); }

/* Turned-down corners: the click and drag targets for turning */
.corner { position: absolute; bottom: 0; z-index: 4; width: 52px; height: 52px; margin: 0; padding: 0; border: 0; background: none; cursor: pointer; touch-action: none; }
.corner-l { left: 0; }
.corner-r { right: 0; }
.fold { position: absolute; bottom: 0; width: 30px; height: 30px; transition: width .2s ease, height .2s ease; }
.corner-r .fold { right: 0; background-image: linear-gradient(315deg, #D6C6A2 0, #DCCCA8 49%, #B9A47B 50%, #E6D9BD 70%, #F6EEDD 100%); }
.corner-l .fold { left: 0; background-image: linear-gradient(45deg, #D6C6A2 0, #DCCCA8 49%, #B9A47B 50%, #E6D9BD 70%, #F6EEDD 100%); }
.corner:hover .fold, .corner:focus-visible .fold { width: 46px; height: 46px; }
.corner:focus-visible { outline: 2px solid var(--ink-red); outline-offset: -4px; }

/* Ribbon: phone only, opens the contents */
.ribbon { display: none; position: absolute; top: -12px; right: 16px; z-index: 5; width: 44px; height: 72px; justify-content: center; }
.ribbon span { display: block; width: 20px; height: 72px; background-image: var(--silk); clip-path: polygon(0 0, 100% 0, 100% 100%, 50% 82%, 0 100%); }
.ribbon:focus-visible { outline: 2px solid var(--ink-red); outline-offset: -4px; }

/* Tabs on the open book: passed chapters sit on the left edge, the rest on the right */
.tabcol { position: absolute; top: clamp(36px, 4.73cqw, 52px); z-index: 1; display: flex; flex-direction: column; gap: 5px; }
.tabcol.r { left: calc(100% - 18px); }
.tabcol.l { right: calc(100% - 18px); }
.tabcol .tab { gap: 5px; width: clamp(54px, 5.64cqw, 62px); min-height: clamp(50px, 5.64cqw, 62px); padding: 10px 0 10px 16px; font-size: clamp(11px, 1.18cqw, 13px); }
.tabcol .tab::before { width: 12px; }
.tabcol.l .tab { --tab-edge: 270deg; padding: 10px 16px 10px 0; border-radius: 7px 0 0 7px; box-shadow: var(--tab-shadow-l); }
.tabcol.l .tab:hover, .tabcol.l .tab:focus-visible { transform: translateX(calc(var(--tab-slide) * -1)); }
.tabcol .tab.off { visibility: hidden; }

.phone-nav { display: none; }

/* ---------- Phone: one page at a time (also small tablets and landscape phones) ---------- */
@media (max-width: 899px), (max-height: 559px) {
  .desk { --spot-size: 80% 50%; --spot-y: 36%; --vig-size: 140% 100%; --vig-y: 40%; }
  [data-view=open] .desk { --spot-size: 120% 70%; --spot-y: 42%; --vig-y: 45%; }
  .modes { top: 14px; left: 14px; padding: 1px 11px; }           /* 46px tall, as before */
  .modes::before { left: 2.5px; } .modes::after { right: 2.5px; }
  [data-view=open] .modes { top: 12px; left: 12px; }
  .mode-btn { gap: 7px; padding: 0 12px; font-size: 14px; }
  .mode-btn svg { width: 15px; height: 15px; }

  /* Closed book */
  .scene-cover, .scene-back { padding: 52px 16px 32px; gap: 30px; }
  .bookrow { flex-direction: column; align-items: center; padding-left: 0; }
  .closed { width: min(300px, 100vw - 64px); }
  .closed-back { transform: translate(7px, 8px); border-radius: 3px 7px 7px 3px; }
  .closed-block { top: 8px; bottom: -2px; left: 16px; transform: translate(4px, 4px); --edge-r: 6px; --edge-b: 6px; }
  .closed-ribbon { bottom: -34px; width: 12px; height: 48px; }
  .board-face { border-radius: 3px 7px 7px 3px; --face-inset: inset 0 0 0 1px rgba(0,0,0,.4), inset 0 0 20px rgba(0,0,0,.38); }
  .back .board-face, .back .closed-back { border-radius: 7px 3px 3px 7px; }
  .spine-line { width: 3px; left: calc(8.4% - .5px); }
  .back .spine-line { left: auto; right: calc(8.4% - .5px); }
  .wm { display: none; }
  .scene-cover .bookrow, .scene-back .bookrow { transform: none; }
  .frame.inner { top: calc(5% + 5px); bottom: calc(5% + 5px); left: calc(14% + 5px); right: calc(6% + 5px); }
  .back .frame.inner { left: calc(6% + 5px); right: calc(14% + 5px); }
  .name { font-size: 11.33cqw; letter-spacing: .06em; }
  .gilt-rule { width: 14cqw; margin: 4.67cqw 0 4cqw; }
  .role { font-size: 5.33cqw; letter-spacing: 0; }
  .device { width: 22%; }
  a.board:focus-visible { outline-offset: 8px; }

  /* Chapter tabs become a row of labels under the cover */
  .tabs { margin: 38px 0 0; flex-direction: row; flex-wrap: wrap; justify-content: center; gap: 8px; max-width: 340px; }
  .tabs .tab { --tab-edge: 180deg; writing-mode: horizontal-tb; width: auto; min-height: 44px; padding: 0 14px; border-radius: 3px 3px 7px 7px; font-size: 15px; letter-spacing: .05em; box-shadow: var(--chip-shadow); transition: background-color .2s ease; }
  .tabs .tab::before { width: 1.5px; height: 14px; background-image: linear-gradient(180deg, #A8823A, #F0D98F 50%, #A8823A); box-shadow: 1px 0 0 rgba(90,62,28,.25); }
  .tabs .tab:hover, .tabs .tab:focus-visible { transform: none; }
  .under { gap: 4px; }
  .open-link { font-size: 19px; padding: 0 16px 0 22px; }
  .muted { font-size: 14px; }
  .wide { display: none; }
  .narrow { display: inline; }

  /* Open book: one page, a ribbon to the contents, Back and Next underneath */
  .scene-open { height: 100vh; height: 100dvh; padding: 66px 12px 10px; gap: 8px; align-items: stretch; justify-content: flex-start; }
  .scene-open .bookrow { flex: 1; min-height: 0; padding: 0; flex-direction: row; align-items: stretch; }
  .book { flex: 1; width: auto; aspect-ratio: auto; container-type: normal; }
  .book-cloth, .otabs, .scene-open .under, .corner-l, .edge-l { display: none; }
  .pages { inset: 0 8px 0 0; font-size: 15.11px; box-shadow: var(--page-shadow); }
  .page { padding: 44px 24px 52px 26px; overflow-y: auto; touch-action: pan-y; }
  .page[data-pos=c] { border-radius: 2px 3px 3px 2px; }
  .folio { bottom: 18px; font-size: 15px; }
  .chapter-head { gap: 9px; margin-bottom: 16px; }
  .orn { width: 104px; height: 11px; }
  .entry { grid-template-columns: 30px minmax(0, 1fr) auto; column-gap: 8px; padding: 6px 0; }
  .entry .note { font-size: 13px; }
  .leader { min-width: 18px; margin: 0 6px 5px; }
  .corner { width: 48px; height: 48px; }
  .ribbon { display: flex; }
  .phone-nav { flex: none; display: flex; align-items: center; justify-content: space-between; gap: 8px; min-height: 48px; padding: 0 2px; }
  .nav-btn { display: inline-flex; align-items: center; min-height: 44px; margin: 0; padding: 0 10px; border: 0; background: none; color: var(--desk-text); font-family: var(--sc); font-size: 16px; letter-spacing: .06em; cursor: pointer; }
  .nav-btn:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
  .phone-nav .muted { font-size: 13px; }
}

/* Reduced motion: no hover movement; book.js fades pages instead of turning them */
@media (prefers-reduced-motion: reduce) {
  .tab, .board-face, .mode-btn, .mode-btn svg, .fold, .entry .t, .closed-ribbon, .open-link, .open-link .chev { transition: none !important; }
  .scene-cover .board-face, .closed-ribbon, .tab:hover, .tab:focus-visible, .tabcol.l .tab:hover, .tabcol.l .tab:focus-visible { transform: none !important; }
  .scene-cover .bookrow, .scene-back .bookrow { transform: none; }
  .wm { translate: none; }
  .open-link .chev { animation: none; transform: none !important; }
}