/* Kiwi's Library
   Layout: a reading room seen straight on. A two-tone wall, a walnut bookcase on slim legs standing on
   oak boards. Take a book down and it is laid on a carved desk of fresh cherry under a lamp, where it opens and its pages turn.
   Type: Literata for reading, IBM Plex Sans Condensed for spines and signage, IBM Plex Mono for
   prices, stamps and call numbers. Classic room, a little bit of terminal. */

@font-face { font-family: "Literata"; src: url("fonts/literata.woff2") format("woff2"); font-weight: 200 900; font-display: swap; }
@font-face { font-family: "Literata"; src: url("fonts/literata-italic.woff2") format("woff2"); font-weight: 200 900; font-style: italic; font-display: swap; }
@font-face { font-family: "Plex Cond"; src: url("fonts/plex-cond-500.woff2") format("woff2"); font-weight: 500; font-display: swap; }
@font-face { font-family: "Plex Cond"; src: url("fonts/plex-cond-600.woff2") format("woff2"); font-weight: 600; font-display: swap; }
@font-face { font-family: "Plex Mono"; src: url("fonts/plex-mono-400.woff2") format("woff2"); font-weight: 400; font-display: swap; }
@font-face { font-family: "Plex Mono"; src: url("fonts/plex-mono-600.woff2") format("woff2"); font-weight: 600; font-display: swap; }
/* accented letters beyond Western Europe (Hungarian ő and ű), loaded only on pages that use them */
@font-face { font-family: "Literata"; src: url("fonts/literata-ext.woff2") format("woff2"); font-weight: 200 900; font-display: swap; unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: "Literata"; src: url("fonts/literata-ext-italic.woff2") format("woff2"); font-weight: 200 900; font-style: italic; font-display: swap; unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: "Plex Cond"; src: url("fonts/plex-cond-ext-500.woff2") format("woff2"); font-weight: 500; font-display: swap; unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: "Plex Cond"; src: url("fonts/plex-cond-ext-600.woff2") format("woff2"); font-weight: 600; font-display: swap; unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: "Plex Mono"; src: url("fonts/plex-mono-ext-400.woff2") format("woff2"); font-weight: 400; font-display: swap; unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: "Plex Mono"; src: url("fonts/plex-mono-ext-600.woff2") format("woff2"); font-weight: 600; font-display: swap; unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
/* Arabic: Noto Naskh for reading, IBM Plex Sans Arabic for labels (the Arabic sister of the Plex used for Latin) */
@font-face { font-family: "Naskh Arabic"; src: url("fonts/naskh-arabic.woff2") format("woff2"); font-weight: 400 700; font-display: swap; unicode-range: U+0600-06FF, U+0750-077F, U+0870-08FF, U+FB50-FDFF, U+FE70-FEFF, U+200C-200E, U+2010-2011, U+204F, U+2E41; }
@font-face { font-family: "Plex Arabic"; src: url("fonts/plex-arabic-400.woff2") format("woff2"); font-weight: 400 500; font-display: swap; unicode-range: U+0600-06FF, U+0750-077F, U+0870-08FF, U+FB50-FDFF, U+FE70-FEFF, U+200C-200E, U+2010-2011, U+204F, U+2E41; }
@font-face { font-family: "Plex Arabic"; src: url("fonts/plex-arabic-600.woff2") format("woff2"); font-weight: 600 700; font-display: swap; unicode-range: U+0600-06FF, U+0750-077F, U+0870-08FF, U+FB50-FDFF, U+FE70-FEFF, U+200C-200E, U+2010-2011, U+204F, U+2E41; }
/* handwriting, for the notes on the wall and what is scratched into the desk: Caveat, and Aref Ruqaa for Arabic */
@font-face { font-family: "Caveat"; src: url("fonts/caveat-500.woff2") format("woff2"); font-weight: 400 700; font-display: swap; unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Caveat"; src: url("fonts/caveat-ext-500.woff2") format("woff2"); font-weight: 400 700; font-display: swap; unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: "Kufi"; src: url("fonts/kufi-600.woff2") format("woff2"); font-weight: 400 700; font-display: swap; unicode-range: U+0600-06FF, U+0750-077F, U+0870-08FF, U+FB50-FDFF, U+FE70-FEFF, U+200C-200E, U+2010-2011, U+204F, U+2E41; }
@font-face { font-family: "Ruqaa"; src: url("fonts/ruqaa-400.woff2") format("woff2"); font-weight: 400 700; font-display: swap; unicode-range: U+0600-06FF, U+0750-077F, U+0870-08FF, U+FB50-FDFF, U+FE70-FEFF, U+200C-200E, U+2010-2011, U+204F, U+2E41; }

:root {
  /* the room */
  --wall: #263129;        /* a dark library green, covered in notes */
  --wall-glow: #34433a;
  --wall-ink: #f1e9d9;
  --wall-ink-soft: #bdb4a2;
  --wall-lower: #1d2621;
  --skirt: #3b2b1f;
  --floor-a: #9a7957;
  --floor-b: #8d6e4f;
  --floor-seam: #6a5139;
  --wood: #684a35;
  --wood-hi: #7f5f48;
  --wood-lo: #46321f;
  --case-back: #31251c;
  --shadow: rgba(0, 0, 0, .42);
  --foot-bg: #3c3029;
  --foot-ink: #e7ddcc;
  --foot-link: #d6c79c;
  /* the desk: fresh cherry, pale and pinkish (old cherry darkens to red brown) */
  --desk: #d39b82;
  --desk-lip: #8e543f;
  --desk-hi: #e9bda5;
  --desk-front: #bf8469;
  --desk-front-lo: #a86f56;
  --rule-bg: #c68d73;
  --band-v: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='26' height='44' viewBox='0 0 26 44'%3E%3Cg transform='translate(.6 .8)'%3E%3Cg fill='none' stroke='rgba(255,243,234,.55)' stroke-width='1.1'%3E%3Cpath d='M3 0V44M23 0V44'/%3E%3Ccircle cx='13' cy='22' r='5.4'/%3E%3C/g%3E%3Cg fill='rgba(255,243,234,.55)'%3E%3Ccircle cx='13' cy='22' r='1.5'/%3E%3Ccircle cx='13' cy='0' r='1.7'/%3E%3Ccircle cx='13' cy='44' r='1.7'/%3E%3C/g%3E%3C/g%3E%3Cg fill='none' stroke='rgba(120,52,32,.42)' stroke-width='1.1'%3E%3Cpath d='M3 0V44M23 0V44'/%3E%3Ccircle cx='13' cy='22' r='5.4'/%3E%3C/g%3E%3Cg fill='rgba(120,52,32,.42)'%3E%3Ccircle cx='13' cy='22' r='1.5'/%3E%3Ccircle cx='13' cy='0' r='1.7'/%3E%3Ccircle cx='13' cy='44' r='1.7'/%3E%3C/g%3E%3C/svg%3E");
  --band-h: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='44' height='26' viewBox='0 0 44 26'%3E%3Cg transform='translate(.6 .8)'%3E%3Cg fill='none' stroke='rgba(255,243,234,.55)' stroke-width='1.1'%3E%3Cpath d='M0 3H44M0 23H44'/%3E%3Ccircle cx='22' cy='13' r='5.4'/%3E%3C/g%3E%3Cg fill='rgba(255,243,234,.55)'%3E%3Ccircle cx='22' cy='13' r='1.5'/%3E%3Ccircle cx='0' cy='13' r='1.7'/%3E%3Ccircle cx='44' cy='13' r='1.7'/%3E%3C/g%3E%3C/g%3E%3Cg fill='none' stroke='rgba(120,52,32,.42)' stroke-width='1.1'%3E%3Cpath d='M0 3H44M0 23H44'/%3E%3Ccircle cx='22' cy='13' r='5.4'/%3E%3C/g%3E%3Cg fill='rgba(120,52,32,.42)'%3E%3Ccircle cx='22' cy='13' r='1.5'/%3E%3Ccircle cx='0' cy='13' r='1.7'/%3E%3Ccircle cx='44' cy='13' r='1.7'/%3E%3C/g%3E%3C/svg%3E");
  --grain: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='900' height='428'%3E%3Cfilter id='g' x='0' y='0'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.0016 .1' numOctaves='3' seed='9' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0.6 0 0 0 0 0.3 0 0 0 0 0.2 0 0 0.7 0 -0.38'/%3E%3C/filter%3E%3Crect width='900' height='428' filter='url(%23g)'/%3E%3C/svg%3E");
  /* small fittings: cherry blocks with brass plates, the lettering cut into the wood */
  --cherry: #d09880;
  --cherry-lo: #9a5d45;
  --cherry-ink: #3f1c11;
  --cherry-hover: #1d0b05;
  --cherry-icon: #7a3420;
  --cherry-cut: 0 1px 0 rgba(255, 238, 226, .55);
  /* what people cut into the desk: the groove, its lit far wall, and the bottom of the cut */
  --scratch: rgba(126, 56, 34, .62);
  --scratch-hi: rgba(255, 244, 236, .7);
  --scratch-deep: rgba(74, 26, 12, .55);
  /* the same edge pattern and grain by lamplight, used by the evening theme below */
  --band-v-dark: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='26' height='44' viewBox='0 0 26 44'%3E%3Cg transform='translate(.6 .8)'%3E%3Cg fill='none' stroke='rgba(255,214,190,.16)' stroke-width='1.1'%3E%3Cpath d='M3 0V44M23 0V44'/%3E%3Ccircle cx='13' cy='22' r='5.4'/%3E%3C/g%3E%3Cg fill='rgba(255,214,190,.16)'%3E%3Ccircle cx='13' cy='22' r='1.5'/%3E%3Ccircle cx='13' cy='0' r='1.7'/%3E%3Ccircle cx='13' cy='44' r='1.7'/%3E%3C/g%3E%3C/g%3E%3Cg fill='none' stroke='rgba(25,8,3,.5)' stroke-width='1.1'%3E%3Cpath d='M3 0V44M23 0V44'/%3E%3Ccircle cx='13' cy='22' r='5.4'/%3E%3C/g%3E%3Cg fill='rgba(25,8,3,.5)'%3E%3Ccircle cx='13' cy='22' r='1.5'/%3E%3Ccircle cx='13' cy='0' r='1.7'/%3E%3Ccircle cx='13' cy='44' r='1.7'/%3E%3C/g%3E%3C/svg%3E");
  --band-h-dark: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='44' height='26' viewBox='0 0 44 26'%3E%3Cg transform='translate(.6 .8)'%3E%3Cg fill='none' stroke='rgba(255,214,190,.16)' stroke-width='1.1'%3E%3Cpath d='M0 3H44M0 23H44'/%3E%3Ccircle cx='22' cy='13' r='5.4'/%3E%3C/g%3E%3Cg fill='rgba(255,214,190,.16)'%3E%3Ccircle cx='22' cy='13' r='1.5'/%3E%3Ccircle cx='0' cy='13' r='1.7'/%3E%3Ccircle cx='44' cy='13' r='1.7'/%3E%3C/g%3E%3C/g%3E%3Cg fill='none' stroke='rgba(25,8,3,.5)' stroke-width='1.1'%3E%3Cpath d='M0 3H44M0 23H44'/%3E%3Ccircle cx='22' cy='13' r='5.4'/%3E%3C/g%3E%3Cg fill='rgba(25,8,3,.5)'%3E%3Ccircle cx='22' cy='13' r='1.5'/%3E%3Ccircle cx='0' cy='13' r='1.7'/%3E%3Ccircle cx='44' cy='13' r='1.7'/%3E%3C/g%3E%3C/svg%3E");
  --grain-dark: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='900' height='428'%3E%3Cfilter id='g' x='0' y='0'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.0016 .1' numOctaves='3' seed='9' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0.2 0 0 0 0 0.05 0 0 0 0 0.02 0 0 0.75 0 -0.4'/%3E%3C/filter%3E%3Crect width='900' height='428' filter='url(%23g)'/%3E%3C/svg%3E");
  --brass: #cfa652;
  --brass-hi: #f3db98;
  --brass-lo: #8e6922;
  --brass-ink: #3a2606;
  --desk-ink: #3f1c11;
  --lamp: rgba(255, 230, 182, .22);
  --pencil: #6f7d63;
  --pencil-lo: #4f5b46;
  --pencil-hi: #8d9a80;
  /* paper and print */
  --paper: #f7f2e7;
  --paper-edge: #e6ddcb;
  --paper-shade: #d6cab3;
  --endpaper: #cdbd97;
  --endpaper-line: #bba982;
  --pocket: #d9c69c;
  --card: #fbf7ee;
  --card-line: #cdd6d9;
  --ink: #2a251f;
  --ink-soft: #585046;
  --ink-faint: #85796b;
  --link: #3a5e45;
  --focus: #a7672a;
  /* signage */
  --sign: #ebe1c9;         /* the name sign, cream enamel on the dark wall */
  --sign-ink: #1f2b24;
  --plate: #cdbd93;
  --plate-edge: #ad9c70;
  --plate-ink: #2c2617;
  --spine-ink: #f3ecdc;
  --gilt: #d7bd82;
  --label: #f0e9d8;
  --label-ink: #2e2820;
  /* rubber stamp inks */
  --st-free: #44633d;
  --st-tier: #56672f;
  --st-paid: #6d5232;
  --st-library: #4d5377;
  --st-warn: #984535;
  --st-loud: #98382a;
  --st-info: #3d5b76;
  --st-check: #84601d;
  --st-ai: #6f3e64;
  /* book cloth, deliberately faded */
  --cover-1: #5f6d50;
  --cover-2: #8a5d43;
  --cover-3: #4b5b69;
  --cover-4: #7a6338;
  --cover-5: #5a4636;
  --cover-6: #67546b;
  --cover-7: #405a4c;
  --cover-8: #84503f;
  --cover-9: #5c6a6b;
  --ribbon-1: #8f4a42;
  --ribbon-2: #4b6a50;
  --ribbon-3: #4a5d78;
  --ribbon-4: #9a7838;
  /* the house rules scroll: parchment, red ink, wood and wax */
  --parch: #efe1bd;
  --parch-ink: #3b2a18;
  --parch-soft: #57422c;
  --rubric: #8f2f1f;
  --rod: #6e4726;
  --rod-hi: #b0814f;
  --rod-lo: #3b2412;
  --wax: #a5342a;
  --wax-hi: #cf5d4f;
  --wax-lo: #6a1912;
  --ribbon: #a03a2c;
  --ribbon-lo: #6e2015;
  --paper-grain: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .38 0 0 0 0 .24 0 0 0 0 .08 .55 0 0 0 -.17'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23g)'/%3E%3C/svg%3E");
  --paper-mottle: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 700 1200' preserveAspectRatio='none'%3E%3Cfilter id='m' x='0' y='0' width='100%25' height='100%25'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.006 .009' numOctaves='3' seed='4'/%3E%3CfeColorMatrix values='0 0 0 0 .5 0 0 0 0 .33 0 0 0 0 .12 .6 0 0 0 -.22'/%3E%3C/filter%3E%3Crect width='700' height='1200' filter='url(%23m)'/%3E%3C/svg%3E"); /* stretched over the whole sheet, so it never repeats */
  /* surfaces shared by spines, covers and filler books */
  --shade-spine: linear-gradient(90deg, rgba(0,0,0,.3), rgba(255,255,255,.1) 22%, rgba(255,255,255,.02) 46%, rgba(0,0,0,.24));
  --cloth: repeating-linear-gradient(0deg, rgba(255,255,255,.035) 0 1px, transparent 1px 3px), repeating-linear-gradient(90deg, rgba(0,0,0,.05) 0 1px, transparent 1px 3px);
  --band: linear-gradient(to bottom, rgba(0,0,0,.42), rgba(255,255,255,.2) 45%, rgba(0,0,0,.36));
  /* type */
  --f-serif: "Literata", "Naskh Arabic", Georgia, "Times New Roman", serif;
  --f-sans: "Plex Cond", "Plex Arabic", "IBM Plex Sans Condensed", "Arial Narrow", "Helvetica Neue", Arial, sans-serif;
  --f-mono: "Plex Mono", "Plex Arabic", "IBM Plex Mono", ui-monospace, Menlo, Consolas, monospace;
  --f-hand: "Caveat", "Ruqaa", "Segoe Print", "Bradley Hand", cursive;
  --gutter-l: max(16px, env(safe-area-inset-left, 0px));
  --gutter-r: max(16px, env(safe-area-inset-right, 0px));
  --ease: cubic-bezier(.2, .7, .2, 1);
  --spring: cubic-bezier(.2, .9, .25, 1.06);
}
@supports (transition-timing-function: linear(0, 1)) {
  :root { --spring: linear(0, .009, .035 2.1%, .141 4.4%, .723 12.9%, .938 16.7%, 1.017 20.5%, 1.043 24.5%, 1.035 28.4%, 1.007 41%, .998 52.3%, 1); }
}

/* evening: the same room by lamplight. Paper stays warm and readable under the lamp. */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --wall: #1a221e; --wall-glow: #27322c; --wall-ink: #e8ddcb; --wall-ink-soft: #b4a691; --wall-lower: #141a17; --skirt: #1c1612; --note-dim: brightness(.86) saturate(.9);
    --floor-a: #4a3826; --floor-b: #423221; --floor-seam: #271d14;
    --wood: #4a3527; --wood-hi: #5d4433; --wood-lo: #2b1f16; --case-back: #17110d;
    --shadow: rgba(0, 0, 0, .5); --foot-bg: #1a1511; --foot-ink: #cdbfa8; --foot-link: #c9b986;
    --desk: #7a4636; --desk-lip: #3b1a10; --desk-hi: #98614d; --desk-front: #6a3a2c; --desk-front-lo: #552d21; --rule-bg: #4f2b20; --cherry: #8a5442; --cherry-lo: #4f2a1e; --cherry-ink: #fbe9dc; --cherry-hover: var(--brass-hi); --cherry-icon: var(--brass); --cherry-cut: 0 -1px 0 rgba(0, 0, 0, .5); --band-v: var(--band-v-dark); --band-h: var(--band-h-dark); --scratch: rgba(255, 206, 180, .4); --scratch-hi: rgba(0, 0, 0, .5); --scratch-deep: rgba(255, 228, 210, .45); --grain: var(--grain-dark); --desk-ink: #f6e8dc; --lamp: rgba(255, 196, 120, .17);
    --pencil: #4f5a46; --pencil-lo: #38412f; --pencil-hi: #66725a;
    --paper: #ddd3bf; --paper-edge: #c8bb9f; --paper-shade: #ae9f82; --endpaper: #a8987a; --endpaper-line: #978766; --pocket: #b8a67f;
    --card: #e3d9c4; --card-line: #b4bcbc;
    --ink: #27211b; --ink-soft: #4b4238; --ink-faint: #6c6052; --link: #2f5139; --focus: #d79a52;
    --sign: #d8ccb2; --sign-ink: #1c241f; --plate: #a79a74; --plate-edge: #857853; --plate-ink: #231e12;
    --spine-ink: #eadfca; --gilt: #c4a96f; --label: #d9cfb8; --label-ink: #29231b;
    --cover-1: #4b5740; --cover-2: #6f4a35; --cover-3: #3c4954; --cover-4: #62502d; --cover-5: #48382b;
    --cover-6: #534456; --cover-7: #33483d; --cover-8: #6a4032; --cover-9: #4a5556;
    --parch: #d9c89e; --rod-hi: #8f6740; --wax-hi: #b54c40;
    color-scheme: dark;
  }
}
:root[data-theme="dark"] {
  --wall: #1a221e; --wall-glow: #27322c; --wall-ink: #e8ddcb; --wall-ink-soft: #b4a691; --wall-lower: #141a17; --skirt: #1c1612; --note-dim: brightness(.86) saturate(.9);
  --floor-a: #4a3826; --floor-b: #423221; --floor-seam: #271d14;
  --wood: #4a3527; --wood-hi: #5d4433; --wood-lo: #2b1f16; --case-back: #17110d;
  --shadow: rgba(0, 0, 0, .5); --foot-bg: #1a1511; --foot-ink: #cdbfa8; --foot-link: #c9b986;
  --desk: #7a4636; --desk-lip: #3b1a10; --desk-hi: #98614d; --desk-front: #6a3a2c; --desk-front-lo: #552d21; --rule-bg: #4f2b20; --cherry: #8a5442; --cherry-lo: #4f2a1e; --cherry-ink: #fbe9dc; --cherry-hover: var(--brass-hi); --cherry-icon: var(--brass); --cherry-cut: 0 -1px 0 rgba(0, 0, 0, .5); --band-v: var(--band-v-dark); --band-h: var(--band-h-dark); --scratch: rgba(255, 206, 180, .4); --scratch-hi: rgba(0, 0, 0, .5); --scratch-deep: rgba(255, 228, 210, .45); --grain: var(--grain-dark); --desk-ink: #f6e8dc; --lamp: rgba(255, 196, 120, .17);
  --pencil: #4f5a46; --pencil-lo: #38412f; --pencil-hi: #66725a;
  --paper: #ddd3bf; --paper-edge: #c8bb9f; --paper-shade: #ae9f82; --endpaper: #a8987a; --endpaper-line: #978766; --pocket: #b8a67f;
  --card: #e3d9c4; --card-line: #b4bcbc;
  --ink: #27211b; --ink-soft: #4b4238; --ink-faint: #6c6052; --link: #2f5139; --focus: #d79a52;
  --sign: #d8ccb2; --sign-ink: #1c241f; --plate: #a79a74; --plate-edge: #857853; --plate-ink: #231e12;
  --spine-ink: #eadfca; --gilt: #c4a96f; --label: #d9cfb8; --label-ink: #29231b;
  --cover-1: #4b5740; --cover-2: #6f4a35; --cover-3: #3c4954; --cover-4: #62502d; --cover-5: #48382b;
  --cover-6: #534456; --cover-7: #33483d; --cover-8: #6a4032; --cover-9: #4a5556;
  --parch: #d9c89e; --rod-hi: #8f6740; --wax-hi: #b54c40;
  color-scheme: dark;
}

.vol--c1, .mini--c1 { --c: var(--cover-1); } .vol--c2, .mini--c2 { --c: var(--cover-2); } .vol--c3, .mini--c3 { --c: var(--cover-3); }
.vol--c4, .mini--c4 { --c: var(--cover-4); } .vol--c5, .mini--c5 { --c: var(--cover-5); } .vol--c6, .mini--c6 { --c: var(--cover-6); }
.vol--c7, .mini--c7 { --c: var(--cover-7); } .vol--c8, .mini--c8 { --c: var(--cover-8); } .vol--c9, .mini--c9 { --c: var(--cover-9); }
.ribbon--1 { --rb: var(--ribbon-1); } .ribbon--2 { --rb: var(--ribbon-2); } .ribbon--3 { --rb: var(--ribbon-3); } .ribbon--4 { --rb: var(--ribbon-4); }

/* ------------------------------------------------------------------ base */
*, *::before, *::after { box-sizing: border-box; }
html { overflow-x: clip; -webkit-text-size-adjust: 100%; font-size: calc(100% * var(--ts, 1)); }
body {
  margin: 0; overflow-x: clip;
  background: var(--wall); color: var(--wall-ink);
  font-family: var(--f-serif); font-size: calc(clamp(16px, 15.2px + .25vw, 17.5px) * var(--ts, 1)); line-height: 1.6;
  font-optical-sizing: auto;
}
img { max-width: 100%; }
a { color: inherit; }
:focus-visible { outline: 2px solid var(--focus); outline-offset: 3px; border-radius: 2px; }
.vh { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.skip { position: absolute; left: var(--gutter-l); top: -100px; z-index: 20; background: var(--paper); color: var(--ink); padding: .5rem .9rem; border-radius: 3px; }
.skip:focus { top: calc(env(safe-area-inset-top, 0px) + 8px); }
h1, h2, h3 { text-wrap: balance; }

.room { position: relative; background: radial-gradient(ellipse 60% 420px at 50% 0, var(--wall-glow), transparent 75%), var(--wall); }

/* ------------------------------------------------------------------ wall top: name sign and the small navigation shelf */
.wall-top {
  max-width: 1180px; margin-inline: auto;
  padding: 26px var(--gutter-r) 18px var(--gutter-l);
  display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 22px 32px;
}
.plaque {
  display: inline-flex; align-items: center; gap: 12px;
  padding: 7px 18px 7px 7px; border-radius: 7px; text-decoration: none;
  background: var(--sign); color: var(--sign-ink);
  box-shadow: 0 1px 0 rgba(0,0,0,.25), 0 8px 18px -6px var(--shadow);
}
.plaque__kiwi { width: 46px; height: 46px; border-radius: 6px; display: block; }
.plaque__name { font: 600 1.45rem/1 var(--f-serif); letter-spacing: -.005em; }
.wall-top--small .plaque__kiwi { width: 38px; height: 38px; }
.wall-top--small .plaque__name { font-size: 1.22rem; }

.navshelf { position: relative; padding-inline: 10px; }
.navshelf__books { list-style: none; margin: 0; padding: 0 8px; display: flex; align-items: flex-end; gap: 2px; }
.navshelf__books li { perspective: 420px; perspective-origin: 50% -50%; }
.navshelf__board { height: 10px; margin-inline: -4px; border-radius: 1px; background: var(--wood); box-shadow: inset 0 2px 0 var(--wood-hi), 0 7px 10px -5px var(--shadow); }
.navshelf::before, .navshelf::after { /* slim steel brackets */
  content: ""; position: absolute; bottom: -16px; width: 3px; height: 16px; background: var(--wall-ink-soft); opacity: .7; border-radius: 0 0 2px 2px;
}
.navshelf::before { left: 26px; } .navshelf::after { right: 26px; }
.mini {
  position: relative; display: flex; align-items: center; justify-content: center;
  width: calc(var(--w) * 1px); height: calc(var(--h) * 1px);
  background-color: var(--c); color: var(--spine-ink); text-decoration: none;
  background-image:
    linear-gradient(var(--gilt), var(--gilt)), linear-gradient(var(--gilt), var(--gilt)),
    linear-gradient(90deg, rgba(0,0,0,.22), rgba(255,255,255,.07) 24%, rgba(255,255,255,0) 52%, rgba(0,0,0,.18));
  background-size: calc(100% - 8px) 1px, calc(100% - 8px) 1px, 100% 100%;
  background-position: 50% 5px, 50% calc(100% - 5px), 0 0;
  background-repeat: no-repeat;
  border-radius: 2px 2px 1px 1px;
  rotate: calc(var(--r) * .6deg);
  transform-origin: 50% 100%; transform-style: preserve-3d;
  transition: transform .9s var(--spring), translate .9s var(--spring);
}
.mini::before { /* the page block on top, seen once the book tips toward you */
  content: ""; position: absolute; left: 2px; right: 2px; top: 0; height: 26px;
  transform-origin: 50% 0; transform: rotateX(-90deg);
  background: linear-gradient(to bottom, rgba(0,0,0,.22), transparent 80%), repeating-linear-gradient(90deg, var(--paper) 0 1.5px, var(--paper-shade) 1.5px 2.4px);
  box-shadow: inset 0 0 0 1px rgba(0,0,0,.12);
  border-radius: 1px; opacity: 0; transition: opacity .5s var(--ease);
}
.mini__title { /* drawn at twice its size and halved, so a phone's minimum text size cannot swell it past the book */
  writing-mode: vertical-rl; font: 600 calc(var(--fs, 10.5) * 2px)/1 var(--f-sans); letter-spacing: .12em; text-transform: uppercase; white-space: nowrap;
  text-shadow: 0 2px 2px rgba(0,0,0,.3); scale: .5; flex: none;
}
.mini:hover, .mini:focus-visible { transform: translateZ(10px) rotateX(-12deg); }
.mini:hover::before, .mini:focus-visible::before, .mini.is-current::before, .mini.is-pulled::before { opacity: 1; }
.mini.is-current { rotate: 0deg; z-index: 1; transform: translateZ(24px) rotateX(-17deg); translate: 0 -5px; }
.mini.is-pulled { transform: translateZ(40px) rotateX(-20deg); translate: 0 -14px; transition-duration: .32s; }

/* ------------------------------------------------------------------ the hall: wall lettering and the bookcase */
.hall { position: relative; }
.hello { max-width: 1080px; margin-inline: auto; padding: 30px var(--gutter-r) 40px var(--gutter-l); }
.opening { margin: 0 0 1rem; font: 600 clamp(1.9rem, 1.2rem + 2.8vw, 3.05rem)/1.08 var(--f-serif); letter-spacing: -.018em; color: var(--wall-ink); max-width: 17ch; }
.opening em { display: block; font-style: italic; font-weight: 500; }
.method { margin: 0; max-width: 36rem; color: var(--wall-ink-soft); font-size: 1.04rem; }

.hall__floorline {
  position: relative; z-index: 2;
  padding-inline: var(--gutter-l) var(--gutter-r);
  margin-bottom: -34px; /* the bookcase stands on the floor, in front of the wall */
}
.hall__floorline::before { /* two-tone wall and a slim skirting, full width behind the case */
  content: ""; position: absolute; z-index: -1; left: 50%; width: 100vw; translate: -50% 0; bottom: 34px; height: 250px;
  background: linear-gradient(to top, var(--skirt) 0 12px, var(--wall-lower) 12px);
}

/* the bookcase: walnut, slim top, slim legs */
.case {
  --u: 1; --side: 14px;
  container: case / inline-size;
  position: relative; width: min(100%, 780px); margin: 0 auto 52px;
  background: var(--case-back);
  border-inline: var(--side) solid var(--wood);
  box-shadow: inset 10px 0 14px -10px rgba(0,0,0,.55), inset -10px 0 14px -10px rgba(0,0,0,.55);
}
.case__crown { height: 16px; margin-inline: calc(-1 * var(--side) - 5px); border-radius: 2px; background: var(--wood); box-shadow: inset 0 2px 0 var(--wood-hi), 0 5px 8px -3px rgba(0,0,0,.45); position: relative; z-index: 1; }
.case__plinth { position: relative; height: 16px; margin-inline: calc(-1 * var(--side) - 3px); border-radius: 0 0 2px 2px; background: var(--wood); box-shadow: inset 0 2px 0 var(--wood-hi); }
.case__plinth::before, .case__plinth::after { /* tapered legs, splayed a little */
  content: ""; position: absolute; top: 14px; width: 15px; height: 54px; background: var(--wood-lo);
  clip-path: polygon(0 0, 100% 0, 72% 100%, 34% 100%);
}
.case__plinth::before { left: 30px; rotate: 6deg; transform-origin: 50% 0; }
.case__plinth::after { right: 30px; rotate: -6deg; transform-origin: 50% 0; }
.case::after { /* contact shadow under the legs */
  content: ""; position: absolute; z-index: -1; left: -10px; right: -10px; bottom: -64px; height: 22px;
  background: radial-gradient(closest-side, var(--shadow), transparent);
}
.case__row {
  --row: calc(316px * var(--u)); --board: 14px;
  list-style: none; margin: 0; padding: 0 12px;
  display: flex; flex-wrap: wrap; align-items: flex-end; column-gap: 2px;
  background:
    repeating-linear-gradient(to bottom, rgba(0,0,0,.4) 0, rgba(0,0,0,0) 30px, rgba(0,0,0,0) var(--row)),
    repeating-linear-gradient(to bottom,
      transparent 0 calc(var(--row) - var(--board)),
      var(--wood-hi) calc(var(--row) - var(--board)) calc(var(--row) - var(--board) + 2px),
      var(--wood) calc(var(--row) - var(--board) + 2px) var(--row));
}
.case__row--low { --row: calc(214px * var(--u)); column-gap: 3px; }
.slot {
  flex: none; height: var(--row); padding-bottom: var(--board);
  width: calc(var(--w) * var(--u) * 1px);
  display: flex; align-items: flex-end;
}
.slot:has(.is-leaning) { margin-left: calc(var(--gap) * var(--u) * 1px); }
/* filler books step aside as the case narrows, so every volume shares one shelf.
   The build writes the container queries that bring them back and that size the spines to fit. */
.case__row--volumes .slot--filler { display: none; }

/* ------------------------------------------------------------------ spines
   A volume tips toward you when touched and comes all the way out when chosen; the body inside does the 3D.
   Every measurement on a spine is in --k, one pixel at full size, so a spine shrinks on a phone as one piece.
   Three bindings: cloth with gilt rules, leather with raised bands and a title label, buckram with a volume number.
   Titles read top to bottom and are sized by the build to fill the space without running off it. */
.volume {
  position: relative; display: block; width: 100%; height: calc(var(--h) * var(--u) * 1px);
  color: var(--spine-ink); text-decoration: none; border-radius: 3px 3px 1px 1px;
  perspective: 900px; perspective-origin: 50% -70%;
  transition: translate .95s var(--spring);
}
.volume__body {
  --k: calc(var(--u) * 1px);
  position: absolute; inset: 0;
  background-color: var(--c);
  border-radius: 3px 3px 1px 1px;
  box-shadow: inset 0 3px 0 rgba(0,0,0,.16), inset 0 -2px 0 rgba(0,0,0,.2);
  transform-origin: 50% 100%; transform-style: preserve-3d;
  transition: transform .95s var(--spring);
}
.vol--s0 .volume__body { /* cloth: a pair of gilt rules at head and tail */
  background-image:
    linear-gradient(var(--gilt), var(--gilt)), linear-gradient(var(--gilt), var(--gilt)),
    linear-gradient(var(--gilt), var(--gilt)), linear-gradient(var(--gilt), var(--gilt)),
    var(--shade-spine), var(--cloth);
  background-size: calc(100% - 10 * var(--k)) 1px, calc(100% - 10 * var(--k)) 2px, calc(100% - 10 * var(--k)) 2px, calc(100% - 10 * var(--k)) 1px, 100% 100%, auto, auto;
  background-position: 50% calc(14 * var(--k)), 50% calc(18 * var(--k)), 50% calc(100% - 48 * var(--k)), 50% calc(100% - 52 * var(--k)), 0 0, 0 0, 0 0;
  background-repeat: no-repeat, no-repeat, no-repeat, no-repeat, no-repeat, repeat, repeat;
}
.vol--s1 .volume__body { /* leather: raised bands and a darker title label */
  background-color: color-mix(in srgb, var(--c) 84%, #140b05);
  background-image: var(--band), var(--band), var(--band),
    linear-gradient(100deg, transparent 28%, rgba(255,255,255,.08) 38%, transparent 52%), var(--shade-spine);
  background-size: 100% calc(6 * var(--k)), 100% calc(6 * var(--k)), 100% calc(6 * var(--k)), 100% 100%, 100% 100%;
  background-position: 0 calc(12 * var(--k)), 0 calc(27 * var(--k)), 0 calc(100% - 48 * var(--k)), 0 0, 0 0;
  background-repeat: no-repeat;
}
.vol--s2 .volume__body { /* buckram: heavier weave, volume number between rules at the head */
  background-image:
    linear-gradient(var(--gilt), var(--gilt)), linear-gradient(var(--gilt), var(--gilt)), linear-gradient(var(--gilt), var(--gilt)),
    var(--shade-spine), var(--cloth), repeating-linear-gradient(45deg, rgba(0,0,0,.05) 0 1px, transparent 1px 3px);
  background-size: calc(100% - 10 * var(--k)) 1.5px, calc(100% - 10 * var(--k)) 1.5px, calc(100% - 10 * var(--k)) 1.5px, 100% 100%, auto, auto, auto;
  background-position: 50% calc(12 * var(--k)), 50% calc(52 * var(--k)), 50% calc(100% - 50 * var(--k)), 0 0, 0 0, 0 0, 0 0;
  background-repeat: no-repeat, no-repeat, no-repeat, no-repeat, repeat, repeat, repeat;
}
.spine__title {
  position: absolute; left: 0; right: 0; top: calc(var(--t) * var(--k)); bottom: calc(var(--b) * var(--k));
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  writing-mode: vertical-rl;
  font: 600 calc(var(--fs) * var(--k)) / 1.1 var(--f-sans); letter-spacing: .12em; text-transform: uppercase; white-space: nowrap;
  color: var(--spine-ink); text-shadow: 0 1px 1px rgba(0,0,0,.35);
  overflow: hidden; text-overflow: ellipsis;
}
.spine__label { display: flex; flex-direction: column; align-items: center; justify-content: center; }
.spine__label > span { display: block; }
.vol--s1 .spine__title { overflow: visible; color: var(--gilt); }
.vol--s1 .spine__label { /* the leather label hugs its title, with a fine double gilt border */
  width: calc(100% - 10 * var(--k)); padding: calc(13 * var(--k)) 0;
  background: color-mix(in srgb, var(--c) 52%, #120a04); border-radius: 1px;
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--gilt) 75%, transparent), inset 0 0 0 3px color-mix(in srgb, var(--c) 52%, #120a04), inset 0 0 0 4px color-mix(in srgb, var(--gilt) 35%, transparent), 0 1px 1px rgba(0,0,0,.4);
}
.spine__vol {
  position: absolute; left: 0; right: 0; top: calc(17 * var(--k)); height: calc(32 * var(--k));
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  color: var(--gilt); font: 600 calc(13 * var(--k)) / 1 var(--f-serif); text-shadow: 0 1px 1px rgba(0,0,0,.35);
}
.spine__vol small { font: 600 calc(6.5 * var(--k)) / 1 var(--f-sans); letter-spacing: .16em; text-transform: uppercase; margin-bottom: calc(3 * var(--k)); }
.spine__vol { /* drawn at twice its size and scaled down, like the label, so a minimum text size cannot swell it */
  left: 50%; right: auto; width: calc(100% * 2 / var(--u, 1)); height: 64px; translate: -50% 0;
  transform-origin: 50% 0; scale: calc(var(--u, 1) / 2); font-size: 26px;
}
.spine__vol small { font-size: 13px; margin-bottom: 6px; }
/* the library's call-number sticker at the foot */
.sticker {
  position: absolute; left: 50%; bottom: calc(10 * var(--k)); translate: -50% 0; rotate: -1.2deg;
  /* sized by its own text (with a floor so the labels match), so it still fits if the phone enlarges text */
  width: max-content; min-width: min(calc(100% - 8 * var(--k)), calc(34 * var(--k))); max-width: calc(100% - 4 * var(--k));
  padding: calc(3.5 * var(--k)) calc(4 * var(--k)) calc(2.5 * var(--k));
  display: flex; flex-direction: column; align-items: center;
  background: var(--label); color: var(--label-ink); border-radius: 1.5px;
  box-shadow: 0 0 0 .5px rgba(0,0,0,.3), 0 1px 1px rgba(0,0,0,.25);
  font: 600 calc(8.5 * var(--k)) / 1.2 var(--f-mono); letter-spacing: 0; white-space: nowrap; text-shadow: none;
}
.sticker b { font-weight: 600; }
.sticker:not(.sticker--blank) {
  /* Drawn at twice its size and scaled down with the spine. A phone that enforces a minimum text size
     sees 17px text and leaves it alone, so the label keeps its shape instead of swelling over the bands. */
  transform-origin: 50% 100%; scale: calc(var(--u, 1) / 2);
  min-width: 68px; max-width: calc((100% - 4 * var(--k)) * 2 / var(--u, 1));
  padding: 7px 9px 5px; border-radius: 3px;
  box-shadow: 0 0 0 1px rgba(0,0,0,.3), 0 2px 2px rgba(0,0,0,.25);
  font-size: 17px;
}
.slot:nth-child(even) .sticker { rotate: .9deg; }
.sticker--blank {
  width: calc(100% - 6 * var(--k)); height: calc(17 * var(--k)); bottom: calc(9 * var(--k)); padding: 0;
  background-image: linear-gradient(rgba(60,50,40,.4), rgba(60,50,40,.4)), linear-gradient(rgba(60,50,40,.4), rgba(60,50,40,.4));
  background-size: 62% 1.5px, 42% 1.5px; background-position: 50% 32%, 50% 70%; background-repeat: no-repeat;
}

.volume__body::before { /* the page block on top, seen once the book tips toward you */
  content: ""; position: absolute; left: 2px; right: 2px; top: 0; height: calc(40px * var(--u));
  transform-origin: 50% 0; transform: rotateX(-90deg);
  background: linear-gradient(to bottom, rgba(0,0,0,.18), transparent 70%), repeating-linear-gradient(90deg, var(--paper) 0 1.5px, var(--paper-edge) 1.5px 2.4px);
  border-radius: 1px; opacity: 0; transition: opacity .45s var(--ease);
}
.volume::after { /* its shadow on the shelf */
  content: ""; position: absolute; inset: auto -6px -7px; height: 12px; border-radius: 50%;
  background: radial-gradient(closest-side, rgba(0,0,0,.5), transparent); opacity: 0; transition: opacity .6s var(--ease), translate .95s var(--spring);
}
.volume:hover::after, .volume:focus-visible::after { translate: 0 14px; }
.volume.is-pulled::after { translate: 0 38px; }
.volume.is-leaning { rotate: var(--lean); transform-origin: 0 100%; }
.volume:hover, .volume:focus-visible { translate: 0 -14px; }
.volume:hover .volume__body, .volume:focus-visible .volume__body { transform: translateZ(46px) rotateX(-11deg); }
.volume:active .volume__body { transform: translateZ(64px) rotateX(-15deg); }
.volume.is-pulled { translate: 0 -38px; transition-duration: .42s; transition-timing-function: cubic-bezier(.3, .6, .2, 1); }
.volume.is-pulled .volume__body { transform: translateZ(150px) rotateX(-20deg); transition-duration: .42s; transition-timing-function: cubic-bezier(.3, .6, .2, 1); }
.volume:hover .volume__body::before, .volume:focus-visible .volume__body::before, .volume.is-pulled .volume__body::before { opacity: 1; }
.volume:hover::after, .volume:focus-visible::after, .volume.is-pulled::after { opacity: 1; }
.volume:focus-visible { outline-offset: 4px; }
/* the neighbours make room */
.slot:has(+ .slot > .volume:hover) > *, .slot:has(+ .slot > .volume:focus-visible) > * { translate: -3px 0; }
.slot:has(> .volume:hover) + .slot > *, .slot:has(> .volume:focus-visible) + .slot > * { translate: 3px 0; }
.slot > .filler { transition: translate .8s var(--spring); }

/* filler books: other people's books, plain bindings with their own call numbers */
.filler {
  --k: calc(var(--u, 1) * 1px);
  position: relative; display: block; width: 100%; height: calc(var(--h) * var(--u) * 1px);
  background-color: var(--c);
  background-image: var(--shade-spine), var(--cloth);
  border-radius: 2px 2px 1px 1px; filter: saturate(.78) brightness(.86);
  box-shadow: inset 0 3px 0 rgba(0,0,0,.16);
}
.filler--f0 {
  background-image: linear-gradient(var(--gilt), var(--gilt)), linear-gradient(var(--gilt), var(--gilt)), var(--shade-spine), var(--cloth);
  background-size: calc(100% - 6 * var(--k)) 1px, calc(100% - 6 * var(--k)) 1px, 100% 100%, auto, auto;
  background-position: 50% calc(12 * var(--k)), 50% calc(15 * var(--k)), 0 0, 0 0, 0 0;
  background-repeat: no-repeat, no-repeat, no-repeat, repeat, repeat;
}
.filler--f1 {
  background-image: var(--band), var(--band), var(--shade-spine);
  background-size: 100% calc(5 * var(--k)), 100% calc(5 * var(--k)), 100% 100%;
  background-position: 0 calc(16 * var(--k)), 0 calc(34 * var(--k)), 0 0;
  background-repeat: no-repeat;
}
.slot--lean { margin-left: calc(var(--h) * .105 * var(--u) * 1px + 2px); }
.slot--lean .filler { rotate: -6deg; transform-origin: 0 100%; }

.slot--stack { width: calc(140px * var(--u)); margin-right: 6px; }
.stack { display: flex; flex-direction: column-reverse; align-items: center; width: 100%; }
.stack__book { display: block; height: calc(24px * var(--u)); width: calc(var(--sw) * var(--u) * 1px); margin-top: 1px; background: var(--c); border-radius: 2px; background-image: linear-gradient(to bottom, rgba(255,255,255,.1), rgba(0,0,0,.24)); box-shadow: inset 6px 0 0 -4px rgba(215, 189, 130, .5); }
.stack__book:nth-child(2) { translate: 6px 0; }

.slot--note { width: auto; margin-right: 10px; }
.late-note {
  width: calc(210px * var(--u)); max-width: 100%; padding: 12px 14px 14px;
  background: var(--card); color: var(--ink); border-radius: 2px;
  background-image: repeating-linear-gradient(to bottom, transparent 0 calc(1.5em - 1px), var(--card-line) calc(1.5em - 1px) 1.5em);
  background-position: 0 2.25em;
  font: italic 400 max(14px, calc(.98rem * var(--u)))/1.5 var(--f-serif);
  rotate: 4deg; transform-origin: 0 100%;
  box-shadow: 0 3px 6px var(--shadow);
}
.late-note p { margin: 0; }
.late-note .late-note__title { font: 600 .7rem/1.6 var(--f-sans); letter-spacing: .14em; text-transform: uppercase; color: var(--st-warn); margin-bottom: .25em; }

.side-case { display: none; }
@media (min-width: 1260px) {
  .side-case {
    --u: 1; display: flex; flex-direction: column; position: absolute; bottom: 110px; width: 250px; padding: 18px 12px 0;
    background: var(--case-back); border-inline: 12px solid var(--wood); filter: brightness(.8);
    box-shadow: inset 10px 0 14px -10px rgba(0,0,0,.6), inset -10px 0 14px -10px rgba(0,0,0,.6);
  }
  .side-case::before { content: ""; position: absolute; left: -16px; right: -16px; top: 0; height: 14px; background: var(--wood); box-shadow: inset 0 2px 0 var(--wood-hi); border-radius: 2px; }
  .side-case::after { content: ""; position: absolute; left: -12px; right: -12px; bottom: -48px; height: 48px; background: linear-gradient(90deg, transparent 20px, var(--wood-lo) 20px 32px, transparent 32px calc(100% - 32px), var(--wood-lo) calc(100% - 32px) calc(100% - 20px), transparent calc(100% - 20px)); }
  .side-case--left { right: calc(50% + 390px + 70px); }
  .side-case--right { left: calc(50% + 390px + 70px); }
  .side-case__row { display: flex; align-items: flex-end; gap: 2px; height: 196px; overflow: hidden; border-bottom: 12px solid var(--wood); }
  .side-case__row:nth-child(n+3) { display: none; }
  .side-case__row .filler { width: calc(var(--w) * 1px); flex: none; }
}

/* the floor: oak boards */
.floor {
  height: 150px; position: relative; z-index: 1;
  background-color: var(--floor-b);
  background-image:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 720 150' preserveAspectRatio='none'%3E%3Cg fill='%23000' fill-opacity='.18'%3E%3Crect x='86' y='2' width='2' height='12'/%3E%3Crect x='338' y='2' width='2' height='12'/%3E%3Crect x='597' y='2' width='2' height='12'/%3E%3Crect x='201' y='15' width='2' height='18'/%3E%3Crect x='475' y='15' width='2' height='18'/%3E%3Crect x='50' y='34' width='2' height='23'/%3E%3Crect x='295' y='34' width='2' height='23'/%3E%3Crect x='648' y='34' width='2' height='23'/%3E%3Crect x='158' y='58' width='2' height='28'/%3E%3Crect x='425' y='58' width='2' height='28'/%3E%3Crect x='252' y='87' width='2' height='34'/%3E%3Crect x='561' y='87' width='2' height='34'/%3E%3Crect x='100' y='122' width='2' height='28'/%3E%3Crect x='374' y='122' width='2' height='28'/%3E%3Crect x='670' y='122' width='2' height='28'/%3E%3C/g%3E%3C/svg%3E"),
    linear-gradient(to bottom,
      var(--floor-seam) 0 2px, var(--floor-a) 2px 14px, var(--floor-seam) 14px 15px,
      var(--floor-b) 15px 33px, var(--floor-seam) 33px 34px,
      var(--floor-a) 34px 57px, var(--floor-seam) 57px 58px,
      var(--floor-b) 58px 86px, var(--floor-seam) 86px 87px,
      var(--floor-a) 87px 121px, var(--floor-seam) 121px 122px,
      var(--floor-b) 122px 150px);
  background-size: 720px 150px, 100% 150px;
  background-repeat: repeat-x, no-repeat;
}
.floor::before { content: ""; position: absolute; inset: 0; background: linear-gradient(to bottom, rgba(255,255,255,.05), rgba(0,0,0,.2)); }

.foot { background: var(--foot-bg); color: var(--foot-ink); font-size: .88rem; }
.foot__inner { max-width: 62rem; margin-inline: auto; padding: 22px var(--gutter-r) calc(26px + env(safe-area-inset-bottom, 0px)) var(--gutter-l); display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .8rem 1.6rem; }
.foot p { margin: 0; }
.foot a { color: var(--foot-link); }

/* ------------------------------------------------------------------ the desk: fresh cherry under a lamp */
/* One clean board with a fine straight grain. Down each side and along the front runs a small inlaid border,
   two lines with a ring between them, and here and there someone has left their mark (see .scratches). */
.desk {
  position: relative; z-index: 1;
  padding: 34px var(--gutter-r) 46px var(--gutter-l);
  color: var(--desk-ink);
  background-color: var(--desk);
  background-image:
    radial-gradient(ellipse 60% 620px at 22% 0, var(--lamp), transparent 72%),
    linear-gradient(to bottom, rgba(0,0,0,.36), rgba(0,0,0,0) 24px),
    linear-gradient(104deg, transparent 30%, rgba(255, 226, 196, .07) 46%, transparent 62%),
    var(--grain);
  background-size: auto, auto, auto, 900px 428px;
  box-shadow: inset 0 1px 0 var(--desk-lip);
  overflow-x: clip;
}
.desk::before, .desk::after { /* the side borders, under anything laid on the desk */
  content: ""; position: absolute; z-index: -1; top: 16px; bottom: 16px; width: 26px; pointer-events: none;
  background: var(--band-v) 0 0 / 26px 44px repeat-y;
}
.desk::before { inset-inline-start: 8px; }
.desk::after { inset-inline-end: 8px; }
.desk__edge { /* the rounded front edge, with the same border running along it */
  position: relative; z-index: 1; height: 26px;
  background:
    var(--band-h) calc(50% - 22px) 0 / 44px 26px repeat-x,
    linear-gradient(to bottom, var(--desk-hi) 0 2px, var(--desk-front) 2px 55%, var(--desk-front-lo));
  box-shadow: 0 10px 18px -8px rgba(0,0,0,.45);
}
/* Cut into the desk with a knife: "Aws was here", "The kiwi is watching" and a few doodles (drawn by build.mjs).
   They sit under whatever is laid on the desk. A unit of the drawing is --cut pixels. */
.scratches { position: absolute; inset: 0; z-index: -1; overflow: hidden; pointer-events: none; user-select: none; --cut: 2.5px; }
.cut { position: absolute; display: block; width: calc(var(--w) * var(--cut)); height: calc(var(--h) * var(--cut)); overflow: visible; rotate: var(--r); }
.cut--doodle { --cut: 1.9px; rotate: var(--tilt); }
.cut__lip { fill: var(--scratch-hi); }
.cut__groove { fill: var(--scratch); }
.cut__deep { fill: none; stroke: var(--scratch-deep); stroke-width: .16; stroke-linecap: round; }
.cut--kufi { /* Arabic: an angular Kufi face, roughened so it reads as cut rather than printed */
  width: auto; height: auto; white-space: nowrap; font: 600 1.7rem/1 "Kufi", var(--f-sans);
  color: var(--scratch); text-shadow: .5px .7px 0 var(--scratch-hi); filter: url(#cut-rough);
}
.cut-defs { position: absolute; }
.cutzone--tl { top: 14px; inset-inline-start: max(36px, calc(6% + var(--d))); }
.cutzone--tr { top: 14px; inset-inline-end: max(36px, calc(6% + var(--d))); }
.cutzone--tc { top: 10px; inset-inline-start: calc(36% + var(--d)); }
.cutzone--bl { bottom: 14px; inset-inline-start: max(36px, calc(5% + var(--d))); } /* clear of the border */
.cutzone--br { bottom: 16px; inset-inline-end: max(36px, calc(5% + var(--d))); }
.cutzone--ml { top: 36%; inset-inline-start: max(40px, calc(3% + var(--d))); }
.cutzone--mr { top: 64%; inset-inline-end: max(40px, calc(3% + var(--d))); }
.cutzone--sl, .cutzone--sr { display: none; }
.cutzone--sl { top: 16%; left: 50px; }
.cutzone--sr { top: 84%; right: 50px; }
@media (min-width: 1400px) { .cutzone--sl, .cutzone--sr { display: block; } } /* room in the margins beside the book */
@media (max-width: 640px) {
  .scratches { --cut: 1.6px; }
  .cut--doodle { --cut: 1.4px; }
  .cut--kufi { font-size: 1.3rem; }
  .desk::before { inset-inline-start: 2px; } .desk::after { inset-inline-end: 2px; }
}
.page-study .desk, .page-rules .desk { min-height: calc(100dvh + 40px); }
.desk .putback { margin: 34px 0 0; text-align: center; }
.desk .putback__link { color: var(--desk-ink); }
.pencil { display: none; }
@media (min-width: 1400px) {
  .pencil {
    display: block; position: absolute; z-index: 0; top: 150px; left: calc(50% + 590px + 56px);
    width: 12px; height: 232px; rotate: 10deg; border-radius: 1px;
    background: linear-gradient(90deg, var(--pencil-lo), var(--pencil) 34%, var(--pencil-hi) 50%, var(--pencil) 66%, var(--pencil-lo));
    box-shadow: 7px 9px 8px -3px rgba(0,0,0,.4);
  }
  .pencil::before { /* sharpened cedar and graphite */
    content: ""; position: absolute; left: 0; right: 0; bottom: -30px; height: 30px;
    background: linear-gradient(to bottom, #d8c09a 0 66%, #3b3936 66%); clip-path: polygon(0 0, 100% 0, 50% 100%);
  }
  .pencil::after { /* ferrule and eraser */
    content: ""; position: absolute; left: -.5px; right: -.5px; top: -26px; height: 26px; border-radius: 2px 2px 0 0;
    background: linear-gradient(to bottom, #a8857a 0 11px, #8f8c84 11px 13px, #c1bdb3 13px 15px, #8f8c84 15px 17px, #c1bdb3 17px 19px, #8f8c84 19px 26px);
  }
}

/* ------------------------------------------------------------------ the book on the desk */
.book { --ov: 11px; --stk: 10px; position: relative; max-width: 1180px; margin: 30px auto 0; }
.book__case {
  position: relative; z-index: 1; display: flex;
  padding: var(--ov);
  background-color: var(--c);
  background-image: linear-gradient(90deg, rgba(0,0,0,.2), rgba(255,255,255,.05) 10%, rgba(255,255,255,0) 40%, rgba(0,0,0,.22) 50%, rgba(255,255,255,0) 60%, rgba(255,255,255,.05) 90%, rgba(0,0,0,.2)), var(--cloth);
  border-radius: 6px;
  box-shadow: inset 0 0 0 1px rgba(0,0,0,.22), 0 1px 1px rgba(0,0,0,.45), 0 4px 5px -1px rgba(0,0,0,.3), 0 30px 42px -20px rgba(0,0,0,.65);
}
.book__stack { /* page edges: pages already read on the left, still to read on the right */
  flex: none; align-self: stretch; margin-block: 2px 5px;
  background: repeating-linear-gradient(90deg, var(--paper) 0 1.2px, var(--paper-shade) 1.2px 2px);
  transition: width .7s var(--ease);
}
.book__stack--l { width: calc(2px + var(--stk) * var(--read)); border-radius: 3px 0 0 3px; box-shadow: inset 2px 0 2px -1px rgba(0,0,0,.25); }
.book__stack--r { width: calc(2px + var(--stk) * (1 - var(--read))); border-radius: 0 3px 3px 0; box-shadow: inset -2px 0 2px -1px rgba(0,0,0,.25); }
.book__stage { position: relative; flex: 1; min-width: 0; color: var(--ink); background: var(--paper); touch-action: pan-y; }
.book__stage::after, .fold__gutter { /* the gutter, where the pages curve into the binding */
  content: ""; position: absolute; z-index: 1; top: 0; bottom: 0; left: 50%; width: 96px; translate: -50% 0; pointer-events: none;
  background: linear-gradient(90deg, rgba(50,32,14,0), rgba(50,32,14,.07) 30%, rgba(40,24,8,.3) 49.6%, rgba(40,24,8,.3) 50.4%, rgba(50,32,14,.07) 70%, rgba(50,32,14,0));
}

/* a spread: two facing pages */
.spread { display: grid; grid-template-columns: 1fr 1fr; }
.page { position: relative; display: flex; flex-direction: column; min-width: 0; background: var(--paper); color: var(--ink); container-type: inline-size; }
.page:focus { outline: none; }
.page--l { box-shadow: inset -36px 0 36px -36px rgba(70, 45, 20, .38); }
.page--r { box-shadow: inset 36px 0 36px -36px rgba(70, 45, 20, .38); }
.page__inner { flex: 1; display: flex; flex-direction: column; padding: clamp(24px, 3.4vw, 44px) clamp(20px, 3.2vw, 44px) 20px; }
.page--l .page__inner { padding-inline-end: clamp(26px, 4vw, 56px); }
.page--r .page__inner { padding-inline-start: clamp(26px, 4vw, 56px); }
.page__body { flex: 1 0 auto; }
.runhead { margin: 0 0 1.5rem; padding-bottom: .5rem; border-bottom: 1px solid var(--paper-shade); font: 600 .64rem/1.3 var(--f-sans); letter-spacing: .16em; text-transform: uppercase; color: var(--ink-faint); }
.page--r .runhead { text-align: end; }
.folio { margin: 1.4rem 0 0; font: 400 .74rem/1 var(--f-mono); color: var(--ink-faint); font-variant-numeric: tabular-nums; }
.page--r .folio { text-align: end; }

/* inside the covers: endpapers, a bookplate and a library pocket */
.page--endpaper {
  background-color: var(--endpaper);
  background-image:
    radial-gradient(circle at 50% 50%, var(--endpaper-line) 0 1.6px, transparent 2px),
    linear-gradient(45deg, transparent 47%, color-mix(in srgb, var(--endpaper-line) 60%, transparent) 47% 53%, transparent 53%),
    linear-gradient(-45deg, transparent 47%, color-mix(in srgb, var(--endpaper-line) 60%, transparent) 47% 53%, transparent 53%);
  background-size: 22px 22px;
}
.page--endpaper .page__body { display: flex; }
.endpaper { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: space-between; gap: 28px; padding-block: 10px 0; }
.bookplate {
  width: min(240px, 82%); padding: 18px 16px 16px; text-align: center; color: var(--ink); rotate: -.7deg;
  background: var(--card); border: 1px solid var(--plate-edge);
  box-shadow: inset 0 0 0 5px var(--card), inset 0 0 0 6px color-mix(in srgb, var(--ink) 28%, transparent), 0 1px 2px rgba(0,0,0,.18);
}
.bookplate p { margin: 0; }
.bookplate__ex { font: italic 400 .92rem/1.2 var(--f-serif); margin-bottom: 10px !important; color: var(--ink-soft); }
.bookplate__kiwi { display: block; width: 64px; height: 64px; margin: 0 auto; border-radius: 6px; }
.bookplate__name { font: 600 1.12rem/1.2 var(--f-serif); margin-top: 10px !important; }
.bookplate__shelf { font: 600 .64rem/1.4 var(--f-sans); letter-spacing: .16em; text-transform: uppercase; color: var(--ink-faint); }
.pocket { position: relative; align-self: flex-end; width: min(210px, 72%); height: 232px; margin-right: 4%; rotate: 1.2deg; }
.pocket__card {
  position: absolute; left: 12px; right: 12px; top: 0; height: 214px; padding: 10px 12px;
  background: #efe5cc; color: var(--ink);
  background-image: repeating-linear-gradient(to bottom, transparent 0 21px, rgba(120, 100, 70, .3) 21px 22px);
  background-position: 0 50px;
  box-shadow: 0 1px 2px rgba(0,0,0,.22);
  font: 400 .68rem/1.5 var(--f-mono);
}
.pocket__card p { margin: 0; }
.pocket__call { font-weight: 600; }
.pocket__title { font: 600 .82rem/1.4 var(--f-serif); }
.pocket__head { margin-top: 6px !important; font: 600 .58rem/1.4 var(--f-sans) !important; letter-spacing: .16em; text-transform: uppercase; color: var(--ink-faint); }
.pocket__row { height: 22px; display: flex; align-items: center; }
.pocket__row .stamp { font-size: .6rem; }
.pocket__front {
  position: absolute; left: 0; right: 0; bottom: 0; height: 104px;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px; padding-top: 10px;
  background: var(--pocket); color: rgba(40, 30, 20, .62);
  font: 600 .58rem/1.3 var(--f-sans); letter-spacing: .14em; text-transform: uppercase; text-align: center;
  clip-path: polygon(0 0, 36% 0, 40% 9px, 60% 9px, 64% 0, 100% 0, 100% 100%, 0 100%);
  box-shadow: inset 0 -1px 0 rgba(0,0,0,.1);
}
.pocket__front span:first-child { font: 600 .74rem/1.2 var(--f-serif); letter-spacing: .02em; text-transform: none; color: rgba(40, 30, 20, .75); }
.endpaper--back { justify-content: center; text-align: center; }
.libstamp { width: 150px; height: 150px; color: var(--st-library); opacity: .5; rotate: -9deg; mix-blend-mode: multiply; }
.libstamp text { font-family: var(--f-mono); font-weight: 600; fill: currentColor; }
.libstamp__ring { font-size: 8.6px; letter-spacing: 1.2px; }
.libstamp__mid { font-size: 10px; }
.endpaper__note { max-width: 16rem; margin: 0; padding: .6rem .8rem; background: var(--card); color: var(--ink-soft); font: italic 400 .9rem/1.45 var(--f-serif); rotate: .8deg; box-shadow: 0 1px 2px rgba(0,0,0,.18); }

/* title page */
.page--title .page__body { display: flex; flex-direction: column; align-items: center; text-align: center; padding-top: clamp(4px, 2vw, 26px); }
.page--title .shelf-intro, .page--title .ai-warning { text-align: start; }
.titlepage__series { margin: 0 0 1.4rem; font: 600 .66rem/1.3 var(--f-sans); letter-spacing: .2em; text-transform: uppercase; color: var(--ink-faint); }
.titlepage__count { margin: 1.5rem 0 0; font: italic 400 .92rem/1.5 var(--f-serif); color: var(--ink-soft); max-width: 30rem; }

/* headings on plates */
.shelf-plaque {
  display: table; margin: 0 auto .6rem; padding: .32em .9em .3em; border-radius: 3px;
  font: 600 clamp(1.4rem, 1.1rem + 1.2vw, 1.85rem)/1.05 var(--f-sans); letter-spacing: .14em; text-transform: uppercase;
  color: var(--plate-ink); background: var(--plate); border: 1px solid var(--plate-edge);
  box-shadow: 0 1px 0 var(--plate-edge), 0 4px 8px -4px var(--shadow);
}
.shelf-sub { margin: .3rem 0 1.4rem; text-align: center; font: italic 400 1.06rem/1.35 var(--f-serif); color: var(--ink-soft); }
.shelf-intro { margin: 0 0 1.2rem; max-width: 62ch; }
.shelf-intro--drop::first-letter, .pg-lede--drop::first-letter { float: inline-start; font: 600 3.1em/.82 var(--f-serif); margin-block-start: .08em; margin-inline-end: .1em; color: var(--ink); }
.label-head {
  display: inline-block; margin: 0 0 .35rem; padding: .3em .65em .26em; border-radius: 2px;
  font: 600 .74rem/1.2 var(--f-sans); letter-spacing: .14em; text-transform: uppercase;
  color: var(--plate-ink); background: var(--plate); border: 1px solid var(--plate-edge);
}
.sheet .label-head { margin-top: 1.7rem; }
.label-sub { margin: .2rem 0 1rem; color: var(--ink-soft); font-size: .95rem; }
.label-sub--foot { margin-top: 1.4rem; font-style: italic; }
.kicker { margin: 0 0 .5rem; font: 600 .68rem/1.3 var(--f-sans); letter-spacing: .2em; text-transform: uppercase; color: var(--ink-faint); }
.pg-title { margin: 0 0 1rem; font: 600 clamp(1.42rem, 1.1rem + 1vw, 1.9rem)/1.18 var(--f-serif); letter-spacing: -.01em; color: var(--ink); padding-right: 1.4rem; }
.pg-title--chapter { font-size: clamp(1.6rem, 1.2rem + 1.4vw, 2.25rem); padding: 0 0 .8rem; border-bottom: 1px solid var(--paper-shade); }
.page--opener .page__body { padding-top: clamp(10px, 5vw, 64px); }
.pg-lede { margin: 0 0 1.4rem; max-width: 62ch; }
.pg-note { margin: 1rem 0 0; font-size: .95rem; color: var(--ink-soft); font-style: italic; }
.pg-ribbon { position: absolute; z-index: 2; top: -4px; inset-inline-end: 14%; width: 15px; height: 96px; background: var(--rb); clip-path: polygon(0 0, 100% 0, 100% 100%, 50% 84%, 0 100%); box-shadow: inset -3px 0 0 rgba(0,0,0,.12); }
.pg-back { margin: 1.6rem 0 0; font-size: .92rem; }
.pg-back a { color: var(--link); text-underline-offset: .18em; text-decoration-thickness: 1px; }
.pg-cont { margin: 1.2rem 0 0; text-align: end; font: italic 400 .84rem var(--f-serif); color: var(--ink-faint); }
.colophon { margin: 0 0 1rem; max-width: 60ch; font-size: .97rem; color: var(--ink-soft); }
.colophon a { color: var(--link); text-underline-offset: .18em; text-decoration-thickness: 1px; }
.colophon--links { color: var(--ink); }

/* bookmarks */
.bookmarks { list-style: none; margin: 0; padding: 0; display: grid; gap: .45rem; }
.bookmark {
  display: grid; grid-template-columns: 22px 1fr auto; gap: .8rem; align-items: start;
  padding: .55rem .4rem .55rem 0; text-decoration: none; color: var(--ink); border-radius: 2px;
}
.bookmark__ribbon { width: 16px; height: 2.6rem; margin-inline-start: 5px; background: var(--rb); clip-path: polygon(0 0, 100% 0, 100% 100%, 50% 80%, 0 100%); transition: height .6s var(--spring); }
.bookmark__text { font-size: 1.02rem; line-height: 1.4; padding-top: .35rem; }
.bookmark__page, .contents__page, .contents__endpage { font: 400 .8rem/1 var(--f-mono); color: var(--ink-faint); padding-top: .6rem; font-variant-numeric: tabular-nums; }
.bookmark:hover .bookmark__text { text-decoration: underline; text-underline-offset: .2em; text-decoration-thickness: 1px; }
.bookmark:hover .bookmark__ribbon { height: 3.2rem; }

/* contents */
.contents { list-style: none; margin: 0; padding: 0; display: grid; gap: .15rem; }
.contents__link { display: flex; flex-wrap: wrap; align-items: baseline; column-gap: .6rem; padding: .38rem .2rem; border-radius: 2px; text-decoration: none; color: var(--ink); }
.contents__num { flex: none; width: 1.6em; font: 400 .85rem/1 var(--f-mono); color: var(--ink-faint); font-variant-numeric: tabular-nums; }
.contents__title { flex: 0 1 auto; }
.contents__leader { flex: 1 1 1.5rem; border-bottom: 1.5px dotted var(--paper-shade); min-width: 1.5rem; translate: 0 -.3em; }
.contents__page { padding-top: 0; }
.contents__meta { flex-basis: 100%; padding-inline-start: calc(1.6em + .6rem); font: 400 .72rem/1.4 var(--f-mono); color: var(--ink-faint); }
.contents__link:hover .contents__title { text-decoration: underline; text-underline-offset: .2em; text-decoration-thickness: 1px; }
.contents__end { display: flex; align-items: baseline; gap: .6rem; margin: 1rem 0 0; padding-block: .3rem 0; padding-inline: calc(1.6em + .8rem) .2rem; border-top: 1px solid var(--paper-shade); font-style: italic; }
.contents__end a { color: var(--ink); text-decoration: none; flex: 1; }
.contents__end a:hover { text-decoration: underline; text-underline-offset: .2em; text-decoration-thickness: 1px; }

.ai-warning { margin-top: 1.4rem; padding: 1rem 1rem .9rem; border: 1px dashed color-mix(in srgb, var(--st-ai) 45%, transparent); border-radius: 3px; }
.ai-warning p { margin: .7rem 0 0; font-size: .95rem; color: var(--ink-soft); }

/* the price ladder at the start of a chapter */
.ladder__head { margin: 1.6rem 0 .45rem; font: 600 .68rem/1.3 var(--f-sans); letter-spacing: .16em; text-transform: uppercase; color: var(--ink-faint); }
.ladder { list-style: none; margin: 0; padding: 0; }
.ladder__link { display: flex; align-items: baseline; gap: .5rem; padding: .34rem .15rem; text-decoration: none; color: var(--ink); }
.ladder__name { font-size: .98rem; }
.ladder__leader { flex: 1; min-width: 1rem; border-bottom: 1.5px dotted var(--paper-shade); translate: 0 -.3em; }
.ladder__price { font: 600 .72rem/1 var(--f-mono); text-transform: uppercase; letter-spacing: .04em; white-space: nowrap; }
.ladder__price--free { color: var(--st-free); } .ladder__price--freemium { color: var(--st-tier); }
.ladder__price--paid { color: var(--st-paid); } .ladder__price--library { color: var(--st-library); }
.ladder__divider { margin: .55rem 0 .15rem; padding-top: .45rem; border-top: 1px solid var(--paper-shade); font: 600 .6rem/1 var(--f-sans); letter-spacing: .16em; text-transform: uppercase; color: var(--ink-faint); }
.ladder__link:hover .ladder__name { text-decoration: underline; text-underline-offset: .2em; text-decoration-thickness: 1px; }
.ladder__foot { margin: .9rem 0 0; font-size: .88rem; font-style: italic; color: var(--ink-soft); }

.endmark { margin: 1.8rem 0 0; text-align: center; }
.kiwi-mark { width: 22px; height: 22px; vertical-align: middle; border-radius: 4px; }

/* entries */
.entries, .stacklist { list-style: none; margin: 0; padding: 0; display: grid; gap: 1.6rem; }
.entry, .stackitem { display: grid; grid-template-columns: 1fr; gap: .4rem; scroll-margin-top: 16px; }
@container (min-width: 430px) {
  .entry, .stackitem { grid-template-columns: 7.2rem 1fr; gap: 1rem; }
  .entry__price { text-align: end; padding-top: .2rem; }
}
.entry__body, .stackitem__body { min-width: 0; }
.entry__name { margin: 0 0 .2rem; font: 600 1.1rem/1.3 var(--f-serif); }
.entry__name a { color: var(--link); text-decoration-thickness: 1px; text-underline-offset: .18em; }
.entry__name .ext { font-weight: 400; font-size: .85em; }
.aka { font-weight: 400; font-style: italic; color: var(--ink-faint); font-size: .92em; }
.entry__what { margin: 0 0 .55rem; }
.entry__facts { margin: 0 0 .5rem; display: grid; gap: .3rem; }
.entry__facts div { font-size: .96rem; }
.entry__facts dt { display: inline; font: 600 .68rem/1.5 var(--f-sans); letter-spacing: .12em; text-transform: uppercase; color: var(--ink-faint); }
.entry__facts dd { display: inline; margin: 0; margin-inline-start: .45em; }
.entry__stamps { margin: .6rem 0 .3rem; display: flex; flex-wrap: wrap; gap: .55rem .6rem; }
.entry__note { margin: .35rem 0 0; font-size: .92rem; color: var(--ink-soft); font-style: italic; }
.entry__checked { margin: .4rem 0 0; font: 400 .7rem/1.4 var(--f-mono); color: var(--ink-faint); }
.entry.is-flash { animation: entry-flash 1.8s var(--ease); }
@keyframes entry-flash { 0%, 30% { background: color-mix(in srgb, var(--plate) 45%, transparent); } 100% { background: transparent; } }
.stackitem__free { margin: 0 0 .4rem; font-size: .95rem; color: var(--ink-soft); }
.stackitem__free .label { font: 600 .68rem var(--f-sans); letter-spacing: .12em; text-transform: uppercase; color: var(--ink-faint); margin-inline-end: .3em; }
.stackitem__more { margin: .3rem 0 0; font-size: .92rem; }
.stackitem__more a { color: var(--link); text-underline-offset: .18em; text-decoration-thickness: 1px; }
.divider { display: flex; align-items: center; gap: .8rem; color: var(--ink-faint); font: 600 .68rem/1 var(--f-sans); letter-spacing: .16em; text-transform: uppercase; }
.divider::before, .divider::after { content: ""; flex: 1; border-top: 1px solid var(--paper-shade); }

/* tonight card */
.tonight {
  margin: 1.8rem 0 0; padding: .9rem 1.1rem 1rem; max-width: 34rem;
  background: var(--card); border-radius: 2px; rotate: -.6deg; box-shadow: 0 2px 5px rgba(60, 40, 20, .16);
  background-image: repeating-linear-gradient(to bottom, transparent 0 calc(1.55em - 1px), var(--card-line) calc(1.55em - 1px) 1.55em);
  background-position: 0 2.2em;
}
.tonight__label { margin: 0 0 .3rem; font: 600 .68rem/1.4 var(--f-sans); letter-spacing: .16em; text-transform: uppercase; color: var(--st-warn); }
.tonight__text { margin: 0; font: italic 400 1.08rem/1.55 var(--f-serif); color: var(--ink); }

/* rubber stamps */
.stamp {
  --sc: var(--st-info);
  display: inline-block; padding: .32em .55em .26em; border-radius: 2px;
  font: 600 .66rem/1.2 var(--f-mono); letter-spacing: .05em; text-transform: uppercase;
  color: var(--sc); border: 1.5px solid currentColor; outline: 1px solid color-mix(in srgb, currentColor 50%, transparent); outline-offset: 2px;
  rotate: -1.6deg; opacity: .92; mix-blend-mode: multiply;
}
.entry__stamps .stamp:nth-child(2n) { rotate: 1.2deg; }
.entry__stamps .stamp:nth-child(3n) { rotate: -.6deg; }
.stamp--price { font-size: .72rem; rotate: -2.4deg; white-space: nowrap; }
.stamp--free { --sc: var(--st-free); }
.stamp--tier { --sc: var(--st-tier); }
.stamp--paid { --sc: var(--st-paid); }
.stamp--library { --sc: var(--st-library); }
.stamp--warn { --sc: var(--st-warn); }
.stamp--soft { opacity: .8; }
.stamp--info { --sc: var(--st-info); }
.stamp--check { --sc: var(--st-check); }
.stamp--ai { --sc: var(--st-ai); }
.stamp--loud { --sc: var(--st-loud); font-size: .74rem; border-width: 2.5px; background: color-mix(in srgb, var(--st-loud) 7%, transparent); }
.stamp--big { font-size: .74rem; }

/* page corners: lift one to turn the page */
.corner { position: absolute; z-index: 2; bottom: 0; width: 56px; height: 56px; }
.corner--r { inset-inline-end: 0; } .corner--l { inset-inline-start: 0; }
.corner::before {
  content: ""; position: absolute; bottom: 0; width: 0; height: 0;
  filter: drop-shadow(-1px -1px 2px rgba(40, 25, 10, .25));
  transition: width .4s var(--spring), height .4s var(--spring);
}
.corner--r::before { right: 0; background: linear-gradient(to top left, var(--paper-shade) 0 50%, var(--paper-edge) 50%, var(--paper) 100%); }
.corner--l::before { left: 0; background: linear-gradient(to top right, var(--paper-shade) 0 50%, var(--paper-edge) 50%, var(--paper) 100%); filter: drop-shadow(1px -1px 2px rgba(40, 25, 10, .25)); }
.page:hover > .corner::before { width: 14px; height: 14px; }
.page > .corner:hover::before, .book.is-dragging .corner::before { width: 32px; height: 32px; }

/* bookmarks left in the book: ribbons standing up out of the pages */
.book__tabs { --n: 4; position: absolute; z-index: 0; left: 0; right: 0; top: 0; height: 0; }
.tab {
  position: absolute; top: -26px; left: calc(100% - 50px - (var(--n) - 1 - var(--i)) * 30px);
  width: 22px; height: 46px; padding-top: 6px; border-radius: 2px 2px 0 0;
  background: var(--rb); color: rgba(255, 248, 234, .9); text-align: center; text-decoration: none;
  font: 600 .66rem/1 var(--f-mono); box-shadow: inset -3px 0 0 rgba(0,0,0,.14);
  transition: left .8s var(--spring), translate .3s var(--ease);
}
.tab:hover, .tab:focus-visible { translate: 0 -5px; }
.tab.is-left { left: calc(28px + var(--i) * 30px); }
.tab.is-here { left: calc(50% - 11px); translate: 0 6px; }

/* turning the pages */
.pager { display: flex; align-items: center; justify-content: space-between; gap: 6px; }
.pager__btn {
  display: inline-flex; align-items: center; gap: .45em; min-height: 44px; padding: 0 12px; border: 0; border-radius: 3px;
  background: transparent; color: inherit; cursor: pointer; text-decoration: none;
  font: 600 .76rem/1 var(--f-sans); letter-spacing: .12em; text-transform: uppercase;
}
.pager__btn:disabled { opacity: .35; cursor: default; }
.pager__mid { display: inline-flex; align-items: center; min-height: 44px; padding: 0 10px; font: italic 400 .98rem/1 var(--f-serif); color: inherit; text-underline-offset: .2em; text-decoration-thickness: 1px; }
.pager--static { grid-column: 1 / -1; padding: 4px 12px 8px; border-top: 1px solid var(--paper-shade); color: var(--link); }
.pager--static .pager__btn--next { margin-inline-start: auto; }
.pager--live[hidden] { display: none !important; }

/* The bar of buttons under the book is not wanted: the page is turned by pulling it over by hand,
   by swiping, or with the arrow keys. It is taken out of view with visibility rather than display,
   which leaves the element in place and keeps every measurement the turn is worked out from exactly
   as it was. Nothing else about the book changes. */
.pager--live { visibility: hidden; }
.pager--live { /* a wooden rule on the desk; on phones it stays under your thumb */
  position: relative; z-index: 4; bottom: calc(10px + env(safe-area-inset-bottom, 0px));
  display: grid; grid-template-columns: 1fr auto auto 1fr; max-width: 540px; margin: 24px auto 0; padding: 7px 5px 4px; border-radius: 4px;
  background-color: var(--rule-bg); color: var(--desk-ink);
  background-image: repeating-linear-gradient(90deg, rgba(255,255,255,.3) 0 1px, transparent 1px 10px), repeating-linear-gradient(90deg, rgba(255,255,255,.3) 0 1px, transparent 1px 50px);
  background-size: 100% 4px, 100% 8px; background-position: 9px 0, 9px 0; background-repeat: no-repeat;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.08), 0 1px 1px rgba(0,0,0,.4), 0 10px 18px -8px rgba(0,0,0,.6);
}
.pager--live .pager__btn:hover:not(:disabled) { background: rgba(255,255,255,.08); }
.pager--live .pager__btn--next { justify-self: end; }
.pager__where { padding: 0 8px; font: 400 .74rem/1 var(--f-mono); opacity: .8; white-space: nowrap; font-variant-numeric: tabular-nums; }

/* the front cover, used when the book is laid down, opened and closed */
.cover {
  position: absolute; inset: 0; display: grid; padding: clamp(16px, 3vw, 26px);
  border-radius: 3px 7px 7px 3px; color: var(--spine-ink);
  background-color: var(--c);
  background-image: linear-gradient(90deg, rgba(0,0,0,.26), rgba(255,255,255,.06) 5%, rgba(255,255,255,0) 30%, rgba(0,0,0,.12)), var(--cloth);
  box-shadow: inset 0 0 0 1px rgba(0,0,0,.25);
}
.cover__frame {
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px; padding: 26px 16px; text-align: center;
  border: 1.5px solid color-mix(in srgb, var(--gilt) 80%, transparent); outline: 1px solid color-mix(in srgb, var(--gilt) 45%, transparent); outline-offset: 5px;
}
.cover p { margin: 0; }
.cover__series { font: 600 .68rem/1.2 var(--f-sans); letter-spacing: .24em; text-transform: uppercase; color: var(--gilt); }
.cover__title { font: 600 clamp(2rem, 1.1rem + 3.4vw, 3.6rem)/1 var(--f-serif); letter-spacing: .01em; color: var(--gilt); text-shadow: 0 1px 0 rgba(0,0,0,.4), 0 -1px 0 rgba(255,255,255,.1); text-wrap: balance; }
.cover__sub { font: italic 400 1rem/1.35 var(--f-serif); opacity: .85; max-width: 18rem; }
.cover__kiwi { width: 52px; height: 52px; margin-top: 14px; border-radius: 50%; box-shadow: 0 0 0 2px color-mix(in srgb, var(--gilt) 80%, transparent); }
.cover__call { font: 600 .64rem/1 var(--f-mono); color: var(--gilt); opacity: .75; }
.cover.vol--s1 { background-color: color-mix(in srgb, var(--c) 84%, #140b05); }
.cover.vol--s1 .cover__frame { background: color-mix(in srgb, var(--c) 52%, #120a04); }
.cover.vol--s2 .cover__frame { border-width: 3px; outline: 0; }

/* the moving parts of a page turn (built by enhance.js) */
.book__flip { position: absolute; z-index: 3; pointer-events: none; }
.book__flip:empty { display: none; }
.turn, .turn__seg { position: absolute; top: 0; height: 100%; transform-style: preserve-3d; }
.turn { left: 0; }
.turn__seg { transform-origin: 0 50%; }
.turn__face { position: absolute; inset: 0; overflow: hidden; backface-visibility: hidden; -webkit-backface-visibility: hidden; background: var(--paper); }
.turn__face--back { transform: rotateY(180deg); }
.turn__face::after { content: ""; position: absolute; inset: 0; pointer-events: none; background: rgba(28, 18, 8, var(--sh, 0)); }
.turn__face > .page, .turn__face > .book__case, .turn__face > .cover { position: absolute; top: 0; }
.book .turn__face > .page { display: flex; }
.turn--cover .turn__face { background: transparent; }
.turn__drop { position: absolute; top: 0; height: 100%; border-radius: 4px 7px 7px 4px; pointer-events: none; }
.cover--inside { border-radius: 7px 3px 3px 7px; padding: var(--ov); box-shadow: inset 0 0 0 1px rgba(0,0,0,.25); }
.cover--inside::before { content: ""; position: absolute; inset: var(--ov); background-color: var(--endpaper); background-image: radial-gradient(circle at 50% 50%, var(--endpaper-line) 0 1.6px, transparent 2px); background-size: 22px 22px; }
/* a page being turned is folded flat along a line: the part that stays, the flap lying over, the light between */
.fold__under, .fold__front, .fold__flap, .fold__clip, .fold__gloss { position: absolute; inset: 0; pointer-events: none; }
.fold__front > .page, .fold__clip > .page, .fold__blank { position: absolute; top: 0; }
.fold__clip > .page, .fold__blank { transform-origin: 0 0; }
.fold__front > .page, .fold__clip > .page, .fold__blank { will-change: transform; } /* drawn once, then only clipped and moved */
.fold__shade, .fold__band { position: absolute; inset: 0; pointer-events: none; }
.fold__blank { overflow: hidden; background: var(--paper); }
.fold__blank > .fold__ghost { position: absolute; top: 0; left: 0; transform: scaleX(-1); opacity: .08; box-shadow: none; }
.book.is-dragging, .book.is-dragging * { user-select: none; -webkit-user-select: none; cursor: grabbing; }
/* the outer edge of each page can be taken hold of with a mouse */
.book.is-live[data-mode="spread"] .page::after { content: ""; position: absolute; top: 0; bottom: 0; width: 26px; cursor: grab; }
.book.is-live[data-mode="spread"] .page--r::after { inset-inline-end: 0; }
.book.is-live[data-mode="spread"] .page--l::after { inset-inline-start: 0; }
.book.at-start .page--l::after, .book.at-end .page--r::after, .book__flip .page::after { display: none; }

/* With scripting, the stage itself lays out the open pages, so pages from two spreads can lie side by side mid-turn. */
.book.is-live .book__stage { display: grid; grid-template-columns: 1fr 1fr; align-items: stretch; transition: height .34s var(--ease); }
.book.is-live .spread { display: contents; }
.book.is-live .page { grid-row: 1; }
.book.is-live .page--l { grid-column: 1; }
.book.is-live .page--r { grid-column: 2; }
.book.is-live .book__stage > .spread > .page:not(.is-shown) { display: none; }
.book.is-live .book__stage > .spread > .page.is-measure { display: flex; position: absolute; visibility: hidden; top: 0; left: 0; width: var(--mw); }
.book.is-live .pager--static { display: none; }
.book.is-live[data-mode="single"] .book__stage { grid-template-columns: 1fr; }
.book.is-live[data-mode="single"] .page { grid-column: 1; box-shadow: inset 24px 0 24px -24px rgba(70, 45, 20, .38); }
.book.is-live[data-mode="single"] .book__stage::after { display: none; }
.book[data-mode="single"] .corner { display: none; }
.book[data-mode="single"] .pager--live { position: sticky; }
/* The book is cut to the height of the screen, using the dynamic viewport so it follows a phone's address
   bar, and each page scrolls inside itself like a reader. The whole sheet is always in view, so a turn is the
   whole page lifting at its corner. Room is left above for the ribbons and below for the page buttons.
   On a wide screen, "Full pages" in the accessibility panel lets the book grow to its pages instead. */
.book[data-fit="screen"] .pager--live { position: sticky; }
/* The book is held still while it is being read.
   Without this the case scrolls up under the top of the window and is cut off, and then the text
   inside each page starts scrolling instead, so the whole thing looks squeezed. The book is pinned
   just under the header (--book-top) and no taller than the room left below it; the pages scroll
   inside themselves only when they are longer than that, and a little room is kept under the case
   for the page buttons. */
.book.is-live[data-fit="screen"] {
  --book-top: 62px;
  --book-min: 430px;
  position: sticky; top: var(--book-top);
  display: flex; flex-direction: column;
  margin-block: 0;
}
.book.is-live[data-fit="screen"] .book__stage {
  height: clamp(var(--book-min), calc(100dvh - var(--book-top) - 300px - env(safe-area-inset-bottom, 0px)), 1000px);
  max-height: calc(100dvh - var(--book-top) - 74px - env(safe-area-inset-bottom, 0px));
  grid-template-rows: minmax(0, 1fr); transition: none;
}
.book.is-live[data-fit="screen"] .book__stage > .spread > .page {
  min-height: 0; overflow-y: auto; overscroll-behavior-y: contain; touch-action: pan-y;
  scrollbar-width: thin; scrollbar-color: var(--paper-shade) transparent;
}
.book.is-live[data-fit="screen"] .pager--live { flex: none; }
/* A pinned book cannot be taller than the window, so on a short screen it gives up height first. */
@media (max-height: 620px) {
  .book.is-live[data-fit="screen"] { --book-top: 44px; --book-min: 360px; }
}
/* ---------------------------------------------------------------- the room, at one screen
   A book on a desk does not scroll past you: you sit at it. So on a shelf the whole room is exactly
   the window, the wall header is slimmed to a plaque and the small navigation shelf and the notes step
   aside, and the book takes whatever height is left. Nothing but the open page scrolls. When the window
   is too short for all of that the room simply scrolls, which the rules further down already handle. */
@media (min-height: 580px) {
  /* the page itself is one screen: the room takes what the footer leaves, and neither of them scroll */
  body:has(.book.is-live[data-fit="screen"]) {
    height: 100dvh; display: flex; flex-direction: column; overflow: hidden;
  }
  body:has(.book.is-live[data-fit="screen"]) > .foot { flex: none; }
  body:has(.book.is-live[data-fit="screen"]) > .foot .foot__inner { padding-block: 10px 12px; }
  body:has(.book.is-live[data-fit="screen"]) > .room {
    flex: 1 1 auto; min-height: 0;
    display: flex; flex-direction: column; overflow: hidden;
  }
  .room:has(.book.is-live[data-fit="screen"]) > .wall-top { flex: none; padding-block: 12px 10px; }
  .room:has(.book.is-live[data-fit="screen"]) > .wall-top .navshelf,
  .room:has(.book.is-live[data-fit="screen"]) > .wall-top .notes { display: none; }
  .room:has(.book.is-live[data-fit="screen"]) > .desk {
    flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column;
    justify-content: center; padding-block: 6px 12px;
  }
  .room:has(.book.is-live[data-fit="screen"]) > .desk__edge { flex: none; }
  /* the book fills what the header and the way out leave, and no more */
  /* an auto inline margin in a flex column makes a box shrink to its content, so the width is stated */
  .room:has(.book.is-live[data-fit="screen"]) .book.is-live[data-fit="screen"] { flex: 1 1 auto; min-height: 0; width: 100%; }
  /* the case is allowed to give up height, and the stage takes exactly what is left of it */
  .room:has(.book.is-live[data-fit="screen"]) .book.is-live[data-fit="screen"] .book__case { flex: 1 1 auto; min-height: 0; }
  .room:has(.book.is-live[data-fit="screen"]) .book.is-live[data-fit="screen"] .book__stage { height: 100%; min-height: 0; }
  .room:has(.book.is-live[data-fit="screen"]) > .desk .putback { flex: none; margin: 14px 0 2px; padding-bottom: 0; }
  .room:has(.book.is-live[data-fit="screen"]) > .desk .putback__spine { height: 28px; }
}

.book__flip .page { overflow: hidden; } /* the copies used for a turn are scrolled to match, never by hand */
.book[data-mode="single"] .tab.is-left { left: calc(14px + var(--i) * 28px); }
.book[data-mode="single"] .tab:not(.is-left):not(.is-here) { left: calc(100% - 40px - (var(--n) - 1 - var(--i)) * 28px); }

/* Without scripting, the address chooses the open spread: #c-notes opens chapter "notes". */
.book:not(.is-live) .spread { display: none; }
.book:not(.is-live) .spread:target, .book:not(.is-live) .spread:has(:target) { display: grid; }
.book:not(.is-live) .book__stage:not(:has(:target)) .spread--first { display: grid; }
@supports not selector(:has(*)) { .book:not(.is-live) .spread { display: grid; } }

/* laying the book down: hidden until enhance.js lowers it onto the desk (and shown anyway if it never runs) */
html.arriving .book { opacity: 0; animation: kiwi-reveal 0s 2.6s forwards; }
@keyframes kiwi-reveal { to { opacity: 1; } }
.book.is-closed .book__tabs, .book.is-closed .pager--live { opacity: 0; }
.book .book__tabs, .book .pager--live { transition: opacity .4s var(--ease); }

/* house rules: a sheet of paper on the desk */
.sheet {
  position: relative; max-width: 50rem; margin: 26px auto 0; padding: clamp(26px, 5vw, 56px) clamp(20px, 5vw, 60px) 40px;
  background: var(--paper); color: var(--ink); border-radius: 2px; rotate: -.35deg;
  box-shadow: 0 1px 1px rgba(0,0,0,.3), 6px 8px 0 -2px var(--paper-edge), 6px 8px 3px -1px rgba(0,0,0,.22), 0 26px 36px -20px rgba(0,0,0,.6);
}
.sheet--small { max-width: 36rem; }
.sheet .titlepage__series { text-align: center; }

/* house rules: an old scroll on two wooden rods. It arrives rolled shut and tied, then unrolls downward. */
.scroll {
  --roll: 34px;  /* thickness of the paper rolled on each rod */
  --oh: 26px;    /* how far the rods and knobs reach past the paper */
  --knob: 21px;
  position: relative; max-width: 47rem; margin: 30px auto 0; padding: 0 var(--oh) var(--roll); /* room below for the foot roll */
  color: var(--parch-ink);
}
.scroll__roll { /* the rod, running the full width */
  position: relative; z-index: 2; height: var(--roll); margin-inline: calc(-1 * var(--oh));
  background: linear-gradient(to bottom, var(--rod-lo), var(--rod-hi) 32%, var(--rod) 62%, var(--rod-lo)) 50% 50% / calc(100% - var(--knob)) 11px no-repeat;
}
.scroll__roll::before { /* the paper wound round it */
  content: ""; position: absolute; inset-block: 0; inset-inline: calc(var(--oh) - 5px);
  border-radius: 6px / 50%;
  background:
    linear-gradient(90deg, rgba(70, 40, 12, .3), transparent 2.5%, transparent 97.5%, rgba(70, 40, 12, .3)),
    linear-gradient(to bottom, rgba(70, 40, 12, .42), rgba(255, 248, 230, 0) 20%, rgba(255, 248, 230, .38) 33%, rgba(255, 248, 230, 0) 52%, rgba(70, 40, 12, .16) 74%, rgba(70, 40, 12, .5)),
    var(--paper-grain), var(--parch);
}
.scroll__roll--head::before { box-shadow: 0 9px 10px -7px rgba(50, 25, 5, .5); }
.scroll__roll--foot::before { box-shadow: 0 -7px 9px -7px rgba(50, 25, 5, .4), 0 10px 12px -6px rgba(0, 0, 0, .45); }
.scroll__roll::after { /* turned knobs at both ends */
  content: ""; position: absolute; inset-inline: 0; top: 50%; height: var(--knob); translate: 0 -50%;
  background:
    radial-gradient(circle at 36% 30%, rgba(255, 225, 180, .55), transparent 28%) 0 0 / var(--knob) 100% no-repeat,
    radial-gradient(circle closest-side, var(--rod-hi), var(--rod) 52%, var(--rod-lo) 90%, transparent 100%) 0 0 / var(--knob) 100% no-repeat,
    radial-gradient(circle at 36% 30%, rgba(255, 225, 180, .55), transparent 28%) 100% 0 / var(--knob) 100% no-repeat,
    radial-gradient(circle closest-side, var(--rod-hi), var(--rod) 52%, var(--rod-lo) 90%, transparent 100%) 100% 0 / var(--knob) 100% no-repeat;
  filter: drop-shadow(0 3px 2px rgba(0, 0, 0, .35));
}
/* The paper is laid out at full length from the start. While it unrolls, the paper is cut off and the
   foot roll is lifted by the same share of that length, so the two can never drift apart. */
.scroll__body { position: relative; z-index: 1; }
.scroll__shadow { position: absolute; inset: 0; transform-origin: 50% 0; box-shadow: 0 2px 3px rgba(0, 0, 0, .16), 0 22px 34px -22px rgba(0, 0, 0, .6); }
.scroll__window { position: relative; }
.scroll__foot { position: absolute; z-index: 2; top: 0; bottom: 0; inset-inline: calc(-1 * var(--oh)); pointer-events: none; }
.scroll__foot .scroll__roll { position: absolute; top: 100%; inset-inline: 0; margin: 0; }
.scroll__paper {
  position: relative;
  padding: clamp(30px, 5vw, 50px) clamp(22px, 6vw, 66px) 34px;
  background:
    radial-gradient(ellipse 125% 80% at 50% 50%, transparent 55%, rgba(120, 75, 25, .24) 100%),
    radial-gradient(circle at 84% 14%, rgba(150, 100, 40, .14), transparent 9%),
    radial-gradient(ellipse 26% 14% at 12% 66%, rgba(150, 100, 40, .1), transparent 70%),
    radial-gradient(circle at 70% 88%, rgba(150, 100, 40, .1), transparent 7%),
    var(--paper-mottle), var(--paper-grain), var(--parch);
  background-size: 100% 100%, 100% 100%, 100% 100%, 100% 100%, 100% 100%, 240px 240px;
  /* a slightly torn edge down both sides */
  clip-path: polygon(1.6px 0%, 2px 2.94%, 3.3px 5.88%, 1.7px 8.82%, 1.8px 11.76%, 2.1px 14.71%, .7px 17.65%, 1.8px 20.59%, 2.3px 23.53%, 2.9px 26.47%, .3px 29.41%, 1.1px 32.35%, .3px 35.29%, 2.9px 38.24%, 2.5px 41.18%, .2px 44.12%, 3.5px 47.06%, 3.5px 50%, 2.4px 52.94%, 2.2px 55.88%, .6px 58.82%, .1px 61.76%, 1.9px 64.71%, .2px 67.65%, .7px 70.59%, .9px 73.53%, .1px 76.47%, 1.7px 79.41%, 1.6px 82.35%, 3px 85.29%, 1.9px 88.24%, 2.3px 91.18%, 1.8px 94.12%, 2.4px 97.06%, 1.6px 100%, calc(100% - 1px) 100%, calc(100% - 3.6px) 97.06%, calc(100% - 3.6px) 94.12%, calc(100% - 3px) 91.18%, calc(100% - 2.5px) 88.24%, calc(100% - 1.1px) 85.29%, calc(100% - .8px) 82.35%, calc(100% - 1px) 79.41%, calc(100% - .3px) 76.47%, calc(100% - 2.8px) 73.53%, calc(100% - 1.4px) 70.59%, calc(100% - 3px) 67.65%, calc(100% - 1.4px) 64.71%, calc(100% - 3.4px) 61.76%, calc(100% - 3.1px) 58.82%, 100% 55.88%, calc(100% - .8px) 52.94%, calc(100% - 3.3px) 50%, calc(100% - 1.7px) 47.06%, calc(100% - 3.5px) 44.12%, calc(100% - 1.4px) 41.18%, calc(100% - .3px) 38.24%, calc(100% - 2.3px) 35.29%, calc(100% - 2.8px) 32.35%, calc(100% - 1px) 29.41%, calc(100% - .3px) 26.47%, calc(100% - 1.2px) 23.53%, calc(100% - 3.5px) 20.59%, calc(100% - 2.7px) 17.65%, calc(100% - .4px) 14.71%, calc(100% - .9px) 11.76%, calc(100% - .4px) 8.82%, calc(100% - .2px) 5.88%, calc(100% - 2.9px) 2.94%, calc(100% - .6px) 0%);
}
.scroll__series { margin: 0 0 .8rem; text-align: center; font: 600 .68rem/1.3 var(--f-sans); letter-spacing: .26em; text-transform: uppercase; color: var(--rubric); }
.scroll__title { margin: 0; text-align: center; font: 600 clamp(2.05rem, 6.4vw, 2.9rem)/1.1 var(--f-serif); color: var(--parch-ink); }
.scroll__orn { /* a hairline with a diamond in the middle, in red ink */
  position: relative; width: min(15rem, 72%); height: 9px; margin: 1.25rem auto;
  background: linear-gradient(90deg, transparent, var(--rubric) 34%, var(--rubric) calc(50% - 11px), transparent calc(50% - 11px) calc(50% + 11px), var(--rubric) calc(50% + 11px), var(--rubric) 66%, transparent) 50% 50% / 100% 1px no-repeat;
}
.scroll__orn::before { content: ""; position: absolute; left: 50%; top: 50%; width: 6px; height: 6px; translate: -50% -50%; rotate: 45deg; background: var(--rubric); }
.scroll__preamble { max-width: 34rem; margin-inline: auto; text-align: center; font-style: italic; color: var(--parch-soft); }
.scroll__preamble p { margin: 0 0 .3rem; }
.rules { list-style: none; margin: 1.6rem 0 0; padding: 0; display: grid; gap: 1.2rem; }
.rules li { display: grid; grid-template-columns: 2.8rem 1fr; align-items: baseline; gap: .55rem; }
.rules__num { font: 600 1.06rem/1.4 var(--f-serif); color: var(--rubric); text-align: end; letter-spacing: .02em; }
.rules__title { margin: 0; font: 600 1.12rem/1.4 var(--f-serif); color: var(--parch-ink); }
.rules p { margin: .1rem 0 0; max-width: 60ch; color: var(--parch-soft); }

/* the kiwi pressed into red wax, with two ribbon tails */
.scroll__seal { position: relative; display: flex; justify-content: center; margin: 2.3rem 0 .6rem; }
.scroll__seal::before, .scroll__seal::after {
  content: ""; position: absolute; top: 38px; left: calc(50% - 8px); width: 16px; height: 40px;
  background: linear-gradient(90deg, var(--ribbon-lo), var(--ribbon) 45%, var(--ribbon-lo));
  clip-path: polygon(0 0, 100% 0, 100% 100%, 50% 80%, 0 100%);
  transform-origin: 50% 0; rotate: 22deg;
}
.scroll__seal::after { rotate: -18deg; height: 36px; }
.seal {
  position: relative; z-index: 1; display: grid; place-items: center; width: 66px; height: 63px;
  border-radius: 47% 53% 50% 50% / 53% 46% 54% 47%;
  background: radial-gradient(circle at 36% 28%, var(--wax-hi), var(--wax) 46%, var(--wax-lo));
  box-shadow: 0 2px 0 var(--wax-lo), 0 6px 9px -3px rgba(40, 8, 2, .5), inset 0 -2px 3px rgba(0, 0, 0, .22), inset 0 2px 2px rgba(255, 210, 190, .25);
}
.seal::before { /* where the stamp went in */
  content: ""; position: absolute; inset: 9px; border-radius: 50%;
  background: radial-gradient(circle at 50% 38%, var(--wax), var(--wax-lo) 130%);
  box-shadow: inset 0 2px 3px rgba(55, 6, 0, .6), 0 1px 0 rgba(255, 200, 180, .3);
}
.seal__kiwi { /* a kiwi slice: skin, a ring of seeds, the core */
  position: relative; width: 31px; height: 25px; border-radius: 50%; rotate: -22deg;
  box-shadow: inset 0 1.5px 2px rgba(55, 6, 0, .65), 0 1px 0 rgba(255, 200, 180, .35);
}
.seal__kiwi::before { content: ""; position: absolute; inset: 4.5px 5.5px; border-radius: 50%; border: 2px dotted rgba(55, 6, 0, .62); }
.seal__kiwi::after {
  content: ""; position: absolute; left: 50%; top: 50%; width: 9px; height: 6px; translate: -50% -50%; border-radius: 50%;
  background: rgba(255, 205, 185, .22); box-shadow: inset 0 1px 1.5px rgba(55, 6, 0, .55);
}

/* the ribbon it arrived tied with */
.scroll__tie {
  position: absolute; z-index: 3; top: -4px; left: 50%; width: 16px; height: calc(var(--roll) * 2 + 8px); margin-left: -8px;
  border-radius: 3px; visibility: hidden;
  background: linear-gradient(90deg, var(--ribbon-lo), var(--ribbon) 45%, var(--ribbon-lo));
  box-shadow: 0 2px 4px rgba(0, 0, 0, .35);
}

@media (max-width: 640px) {
  .scroll { --roll: 28px; --oh: 17px; --knob: 17px; margin-top: 22px; }
  .scroll__paper { padding: 28px 18px 26px; }
  .rules li { grid-template-columns: 2.2rem 1fr; gap: .45rem; }
}

@media (prefers-reduced-motion: no-preference) {
  .scroll__tie { animation: scroll-untie .42s cubic-bezier(.5, 0, .75, .4) .4s both; }
  .scroll__window { animation: scroll-reveal 1.6s cubic-bezier(.4, .1, .2, 1) .62s backwards; }
  .scroll__shadow { animation: scroll-stretch 1.6s cubic-bezier(.4, .1, .2, 1) .62s backwards; }
  .scroll__foot { animation: scroll-lower 1.6s cubic-bezier(.4, .1, .2, 1) .62s backwards; }
  .scroll__roll--foot::before { animation: scroll-unwind 1.6s cubic-bezier(.4, .1, .2, 1) .62s backwards; }
}
@keyframes scroll-untie { from { visibility: visible; } to { visibility: visible; opacity: 0; translate: 0 -14px; scale: 1 .9; } }
@keyframes scroll-reveal { from { clip-path: inset(0 0 100% 0); } to { clip-path: inset(0); } }
@keyframes scroll-stretch { from { scale: 1 0; } }
@keyframes scroll-lower { from { translate: 0 -100%; } }
@keyframes scroll-unwind { from { inset-block: -6px; } } /* the roll it comes off is thicker at first */

/* ...and on the little shelf, the house rules stand as a rolled scroll among the books */
.mini--scroll {
  color: var(--parch-ink); padding: 12px 0 20px; border-radius: 0;
  background:
    linear-gradient(90deg, var(--ribbon-lo), var(--ribbon) 45%, var(--ribbon-lo)) 50% calc(100% - 15px) / 100% 5px no-repeat,
    linear-gradient(90deg, rgba(70, 40, 12, .45), rgba(255, 248, 230, .4) 30%, rgba(255, 248, 230, 0) 55%, rgba(70, 40, 12, .28) 84%, rgba(70, 40, 12, .55)) 50% 50% / 100% calc(100% - 12px) no-repeat,
    linear-gradient(var(--parch), var(--parch)) 50% 50% / 100% calc(100% - 12px) no-repeat;
}
.mini--scroll .mini__title { text-shadow: none; font-family: var(--f-serif); letter-spacing: .08em; }
.mini--scroll::before, .mini--scroll::after { /* the knobs at each end */
  content: ""; position: absolute; left: 50%; right: auto; width: 13px; height: 8px; margin-left: -6.5px;
  transform: none; opacity: 1; box-shadow: none;
  background: radial-gradient(ellipse at 38% 35%, var(--rod-hi), var(--rod) 50%, var(--rod-lo));
}
.mini--scroll::before { top: 0; border-radius: 50% 50% 2px 2px / 80% 80% 2px 2px; }
.mini--scroll::after { bottom: 0; border-radius: 2px 2px 50% 50% / 2px 2px 80% 80%; }

/* put the book back */
.putback { margin: 46px 0 0; text-align: center; padding-bottom: 40px; }
.putback__link { display: inline-flex; align-items: center; gap: .7rem; padding: .5rem .8rem; font: 600 .78rem/1.2 var(--f-sans); letter-spacing: .14em; text-transform: uppercase; color: var(--wall-ink); text-decoration: none; border-radius: 3px; }
.putback__spine { width: 14px; height: 40px; background: var(--c); border-radius: 2px; box-shadow: inset 0 -10px 0 -8px var(--gilt); transition: translate .7s var(--spring); }
.putback__link:hover .putback__spine, .putback__link.is-pulled .putback__spine { translate: 0 6px; }
.putback__link:hover { text-decoration: underline; text-underline-offset: .2em; text-decoration-thickness: 1px; }
.putback__link--text { display: inline; padding: 0; font: inherit; letter-spacing: normal; text-transform: none; color: var(--link); text-decoration: underline; text-underline-offset: .18em; text-decoration-thickness: 1px; }

/* ------------------------------------------------------------------ narrow: one page at a time */
@media (max-width: 899.98px) {
  .desk { padding: 26px max(10px, env(safe-area-inset-right, 0px)) 34px max(10px, env(safe-area-inset-left, 0px)); }
  .book { --ov: 7px; --stk: 6px; margin-top: 28px; }
  .book:not(.is-live) .spread { grid-template-columns: 1fr; }
  .book:not(.is-live) .page--r { border-top: 1px dashed var(--paper-shade); }
  .book:not(.is-live) .page { box-shadow: none; }
  .book:not(.is-live) .spread--first .page--l { display: none; }
  .book:not(.is-live) .book__stage::after, .book:not(.is-live) .corner { display: none; }
  .book:not(.is-live) .tab { left: calc(100% - 40px - (var(--n) - 1 - var(--i)) * 28px); }
  .page__inner, .page--l .page__inner, .page--r .page__inner { padding: 26px clamp(16px, 4.6vw, 30px) 16px; }
}

/* ------------------------------------------------------------------ phones held in one hand */
@media (max-width: 640px) {
  .wall-top { justify-content: center; padding-top: 18px; gap: 18px; }
  .plaque__name { font-size: 1.28rem; }
  .plaque__kiwi { width: 40px; height: 40px; }
  .navshelf__books { padding: 0 4px; }
  .mini { width: calc(var(--w) * .92px); }
  .hello { padding-block: 22px 34px; }
  .opening { font-size: clamp(1.7rem, 7.4vw, 2.3rem); }
  .case { --u: .78; --side: 11px; }
  .case__row { padding-inline: 8px; --board: 12px; }
  .case__row--low { --row: 214px; }
  .case__row--low .slot--filler { display: none; }
  .slot--note { flex: 1; min-width: 0; margin-right: 0; }
  .late-note { width: 100%; rotate: 2.5deg; }
  .hall__floorline::before { height: 190px; }
  .pager__where { display: none; }
  .pager--live { grid-template-columns: 1fr auto 1fr; }
}
@media (max-width: 400px) {
  .case { --u: .7; }
  .mini { width: calc(var(--w) * .84px); }
}
@media (max-width: 350px) { .case { --u: .64; } }

/* ------------------------------------------------------------------ motion */
@media (prefers-reduced-motion: no-preference) {
  .mini.is-current { animation: mini-pull 1.2s var(--spring) .3s both; }
  .volume.is-returning { animation: vol-return 1s var(--spring) both; }
  .volume.is-returning .volume__body { animation: vol-return-body 1s var(--spring) both; }
  @view-transition { navigation: auto; }
  ::view-transition-group(root) { animation-duration: 300ms; }
}
@keyframes mini-pull { from { transform: none; translate: 0 0; } }
@keyframes vol-return { from { translate: 0 -38px; } }
@keyframes vol-return-body { from { transform: translateZ(150px) rotateX(-20deg); } }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition-duration: 0s !important; animation-duration: 0s !important; }
  .volume:hover, .volume:focus-visible { translate: none; }
  .volume .volume__body { transform: none !important; }
  .slot > * { translate: none !important; }
}

/* ------------------------------------------------------------------ the top row: language switch and accessibility */
/* Small cherry fittings on the wall, their lettering cut into the wood. The current language sits under a brass
   plate held by two screws; pick another and the plate slides along to it. */
.wall-top__tools { order: -1; flex-basis: 100%; display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-end; gap: 8px 10px; margin-bottom: -12px; }
.wall-top__tools > * { flex: none; }
.langs, .a11y-open {
  border-radius: 4px; color: var(--cherry-ink);
  background: linear-gradient(to bottom, rgba(255, 214, 178, .16), rgba(255, 214, 178, 0) 45%, rgba(0, 0, 0, .2)), var(--cherry);
  box-shadow: inset 0 1px 0 rgba(255, 214, 178, .3), inset 0 -1px 0 rgba(0, 0, 0, .35), 0 1px 0 var(--cherry-lo), 0 6px 12px -6px rgba(0, 0, 0, .6);
}
.langs { position: relative; padding: 4px; }
.langs ul { position: relative; list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(var(--n, 4), 1fr); }
.brass, .langs__pill {
  --screw: radial-gradient(circle, var(--brass-lo) 0 1.1px, rgba(255, 244, 210, .7) 1.3px 1.8px, transparent 2px);
  background:
    var(--screw) left 4px center / 6px 6px no-repeat,
    var(--screw) right 4px center / 6px 6px no-repeat,
    linear-gradient(to bottom, var(--brass-hi), var(--brass) 50%, var(--brass-lo));
  box-shadow: inset 0 1px 0 rgba(255, 250, 225, .75), inset 0 -1px 0 rgba(80, 50, 5, .5), 0 1px 2px rgba(0, 0, 0, .55);
  color: var(--brass-ink);
}
.langs__pill {
  position: absolute; top: 4px; bottom: 4px; left: 4px; width: calc((100% - 8px) / var(--n, 4));
  translate: calc(var(--i, 0) * 100%) 0; border-radius: 2px;
  transition: translate .45s var(--spring);
}
.langs a {
  display: block; padding: 7px 15px; border-radius: 2px; text-align: center; text-decoration: none; white-space: nowrap;
  font: 600 .8rem/1 var(--f-serif); letter-spacing: .05em; color: var(--cherry-ink); text-shadow: var(--cherry-cut);
  transition: color .3s var(--ease), text-shadow .3s var(--ease);
}
.langs a:hover { color: var(--cherry-hover); }
.langs a[aria-current] { color: var(--brass-ink); text-shadow: 0 1px 0 rgba(255, 244, 210, .55); } /* engraved in the brass */
.langs a:focus-visible { outline-offset: 1px; }
.langs a[lang="ar"], html[lang="ar"] .a11y-open { font-size: .92rem; } /* Naskh runs small beside Latin */

.a11y-open {
  display: inline-flex; align-items: center; gap: 7px; min-height: 34px; padding: 6px 13px 6px 10px; border: 0; cursor: pointer;
  font: 600 .8rem/1 var(--f-serif); letter-spacing: .05em; text-shadow: var(--cherry-cut);
}
.a11y-open:hover { color: var(--cherry-hover); }
.a11y-open .a11y-icon { color: var(--cherry-icon); }
.a11y-icon { flex: none; }
html:not(.js) .a11y-open { display: none; } /* the panel needs scripting; without it the browser's own settings still apply */

@media (max-width: 640px) {
  .wall-top__tools { justify-content: center; margin-bottom: -6px; }
  .langs a { padding-inline: 8px; font-size: .76rem; letter-spacing: .02em; }
  .langs a[lang="ar"] { font-size: .86rem; }
  .a11y-open--top { padding: 6px 9px; }
  .a11y-open--top .a11y-open__text { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
}

/* ------------------------------------------------------------------ notes on the wall */
/* Fun facts, jokes and notices: sticky notes, an index card taped up, a sheet held by a pin. Each page has its own
   mix (chosen when the site is built), tilted a little. They sit behind the sign and the shelf, in the gaps. */
.wall-top { position: relative; }
.wall-top > :not(.notes) { position: relative; z-index: 1; }
.notes { position: absolute; inset: 0; z-index: 0; pointer-events: none; }
.notes ul { list-style: none; margin: 0; padding: 0; }
.note {
  position: absolute; display: none; width: 10.5rem; padding: .7rem .85rem .8rem; pointer-events: auto;
  rotate: var(--r); filter: var(--note-dim, none);
  font: 500 1.14rem/1.16 var(--f-hand); color: #2a2216; text-align: start;
  box-shadow: 0 1px 1px rgba(0, 0, 0, .3), 0 12px 16px -10px rgba(0, 0, 0, .75);
}
.note__kind { display: block; margin-bottom: .3rem; font: 600 .6rem/1.2 var(--f-sans); letter-spacing: .14em; text-transform: uppercase; color: rgba(55, 38, 20, .62); }
html[lang="ar"] .note { font-size: 1.08rem; line-height: 1.45; }
html[lang="ar"] .note__kind { font-size: .72rem; }
.note--sticky { background: linear-gradient(to bottom, rgba(0, 0, 0, .07), transparent 1.1rem), var(--sticky); border-radius: 0 0 2px 2px; }
.note--sticky::after { /* its bottom corner lifting off the wall */
  content: ""; position: absolute; inset-inline-end: 0; bottom: 0; width: 38px; height: 16px;
  background: linear-gradient(to top left, rgba(0, 0, 0, .16), transparent 62%);
}
.note--c1 { --sticky: #f5e27e; }
.note--c2 { --sticky: #f5c0cb; }
.note--c3 { --sticky: #c4e4c3; }
.note--c4 { --sticky: #bfd8ef; }
.note--card { /* an index card: a heading above the red rule, the writing on blue lines, a strip of tape */
  padding-top: 1.85rem; border-radius: 1px;
  background:
    linear-gradient(#d0594e, #d0594e) 0 1.55rem / 100% 1px no-repeat,
    repeating-linear-gradient(to bottom, transparent 0 calc(1.16em - 1px), #cbd7dd calc(1.16em - 1px) 1.16em) 0 calc(1.85rem + .1em) / 100% calc(100% - 2.6rem) no-repeat,
    #fcfaf3;
}
.note--card .note__kind { position: absolute; top: .7rem; inset-inline-start: .85rem; margin: 0; }
.note--card::before {
  content: ""; position: absolute; top: -9px; left: 50%; width: 60px; height: 20px; margin-left: -30px; rotate: -4deg;
  background: rgba(236, 228, 202, .66); box-shadow: 0 1px 2px rgba(0, 0, 0, .15);
}
.note--paper { padding-top: 1.25rem; background: linear-gradient(to bottom, rgba(255, 255, 255, .35), transparent 40%), #efe5cf; border-radius: 1px; }
.note--paper::before { /* a red push pin */
  content: ""; position: absolute; top: 6px; left: 50%; width: 13px; height: 13px; margin-left: -6.5px; border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, #ff9a8a, #c8291c 58%, #7c130b); box-shadow: 1px 3px 3px rgba(0, 0, 0, .45);
}
@media (hover: hover) and (prefers-reduced-motion: no-preference) {
  .note { transition: rotate .45s var(--spring), scale .45s var(--spring); }
  .note:hover { rotate: 0deg; scale: 1.05; z-index: 2; }
}
/* in the header, in the gap between the sign and the little shelf, and beyond the edges on very wide screens */
.note--t1 { top: 72px; inset-inline-start: calc(var(--gutter-l) + 282px); }
@media (min-width: 1180px) { .note--t1 { top: 26px; } } /* clear of the switch once the header is at full width */
.note--t6 { top: 14px; inset-inline-start: calc(var(--gutter-l) + 36px); width: 9.6rem; }
.note--t2 { top: 74px; inset-inline-start: calc(var(--gutter-l) + 458px); }
.note--t3 { top: 86px; inset-inline-start: calc(var(--gutter-l) + 632px); }
.note--t4 { top: 36px; inset-inline-start: -134px; width: 7.6rem; }
.note--t5 { top: 74px; inset-inline-end: -134px; width: 7.6rem; }
@media (min-width: 980px) { .note--t1, .note--t2, .note--t6 { display: block; } }
@media (min-width: 1180px) { .note--t3 { display: block; } }
@media (min-width: 1480px) { .note--t4, .note--t5 { display: block; } }
/* on the home page, beside the opening line */
.hello { position: relative; }
.hello > :not(.notes) { position: relative; z-index: 1; }
.note--h1 { top: 18px; inset-inline-end: calc(var(--gutter-r) + 8px); width: 13rem; }
.note--h2 { top: 58px; inset-inline-end: calc(var(--gutter-r) + 246px); }
.note--h3 { bottom: 10px; inset-inline-end: calc(var(--gutter-r) + 22px); }
@media (min-width: 1000px) { .notes--hello .note { display: block; } .hello { min-height: 410px; } } /* room for a long note above a short one */
@media (max-width: 999.98px) { /* narrower: the notes come after the text, side by side */
  .notes--hello { position: static; pointer-events: auto; }
  .notes--hello ul { display: flex; flex-wrap: wrap; justify-content: center; align-items: flex-start; gap: 18px 16px; margin-top: 26px; }
  .notes--hello .note { position: relative; inset: auto; display: block; width: min(13rem, 44%); }
}
@media (max-width: 640px) { .note--h3 { display: none !important; } }

/* ------------------------------------------------------------------ the accessibility panel: a card from the catalogue */
.a11y {
  width: min(33rem, calc(100vw - 24px)); max-height: calc(100dvh - 24px); padding: 0; border: 0; border-radius: 3px;
  background: var(--card); color: var(--ink);
  box-shadow: 0 1px 1px rgba(0, 0, 0, .12), 0 30px 70px -24px rgba(0, 0, 0, .7);
}
.a11y::backdrop { background: rgba(28, 14, 8, .5); }
.a11y__card { display: block; padding: 16px 24px 18px; }
.a11y__head { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding-bottom: 8px; border-bottom: 2px solid var(--st-warn); }
.a11y__title { display: flex; align-items: center; gap: 9px; margin: 0; font: 600 1.3rem/1.2 var(--f-serif); }
.a11y__title .a11y-icon { width: 21px; height: 21px; color: var(--st-warn); }
.a11y__x { width: 36px; height: 36px; margin-inline-end: -8px; border: 0; border-radius: 50%; background: transparent; color: var(--ink-soft); font: 400 1.6rem/1 var(--f-sans); cursor: pointer; }
.a11y__x:hover { background: color-mix(in srgb, var(--ink) 8%, transparent); color: var(--ink); }
.a11y__sets { margin-bottom: 16px; }
/* each setting is a ruled line on the card: its name on the left, the choices after it */
.a11y__set { display: flow-root; margin: 0; padding: 6px 0; border: 0; border-bottom: 1px solid var(--card-line); min-width: 0; }
.a11y__set legend {
  float: inline-start; width: 8.4rem; padding: 0; margin: 0; line-height: 38px;
  font: 600 .7rem/38px var(--f-sans); letter-spacing: .14em; text-transform: uppercase; color: var(--st-warn);
}
.seg { display: flex; flex-wrap: wrap; gap: 0 20px; overflow: hidden; }
.seg label { position: relative; display: block; }
.seg input { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: pointer; }
.seg label > span { display: inline-flex; align-items: center; gap: 8px; min-height: 38px; font: 400 1rem/1.2 var(--f-serif); color: var(--ink-soft); }
.seg label > span::before { /* a ring to fill in, as on a printed form */
  content: ""; flex: none; width: 15px; height: 15px; border-radius: 50%;
  border: 1.5px solid currentColor; transition: background-color .15s var(--ease);
}
.seg label:hover > span { color: var(--ink); }
.seg input:checked + span { color: var(--ink); font-weight: 600; }
.seg input:checked + span::before { border-color: var(--ink); background: radial-gradient(circle, var(--ink) 0 3.6px, transparent 4.2px); }
.seg input:focus-visible + span { outline: 2px solid var(--focus); outline-offset: 2px; border-radius: 3px; }
.seg--glyph b { font: 600 calc(15px + var(--g) * 3.5px)/1 var(--f-serif); }
.a11y__foot { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.a11y__foot button { min-height: 40px; cursor: pointer; font: 600 .9rem/1 var(--f-serif); letter-spacing: .03em; }
.a11y__reset { padding: 8px 4px; border: 0; background: none; color: var(--ink); text-decoration: underline; text-underline-offset: .2em; text-decoration-thickness: 1px; }
.a11y__done { padding: 8px 26px; border: 0; border-radius: 3px; }
@media (max-width: 899.98px) { .a11y__set--wide { display: none; } } /* one page at a time always fits the screen */
@media (max-width: 640px) { /* a card that rises from the bottom of the screen, within reach of a thumb */
  .a11y { width: 100%; max-width: none; margin: auto 0 0; border-radius: 6px 6px 0 0; max-height: 92dvh; }
  .a11y__card { padding: 14px 18px calc(16px + env(safe-area-inset-bottom, 0px)); }
  .a11y__set legend { float: none; width: auto; line-height: 1.2; padding-top: 6px; }
}
@media (prefers-reduced-motion: no-preference) {
  .a11y[open] { animation: a11y-in .26s var(--ease); }
  .a11y[open]::backdrop { animation: a11y-fade .26s var(--ease); }
}
@keyframes a11y-in { from { opacity: 0; translate: 0 14px; } }
@keyframes a11y-fade { from { opacity: 0; } }

/* ------------------------------------------------------------------ what the panel changes */
html[data-text="1"] { --ts: 1.125; }
html[data-text="2"] { --ts: 1.25; }
html[data-text="3"] { --ts: 1.4; }
:root[data-theme="light"] { color-scheme: light; }
html[data-font="plain"] { --f-serif: "Plex Arabic", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; }
html[data-spacing="wide"] main :is(p, li, dd, dt, blockquote) { line-height: 1.95 !important; word-spacing: .1em; }
html[data-spacing="wide"]:not([lang="ar"]) main :is(p, li, dd, dt, blockquote) { letter-spacing: .02em; }
html[data-spacing="wide"][lang="ar"] main :is(p, li, dd, dt, blockquote) { line-height: 2.2 !important; }
html[data-contrast="high"] {
  --ink: #000; --ink-soft: #1b1712; --ink-faint: #3a332a; --link: #1d4429;
  --wall-ink: #fffaf0; --wall-ink-soft: #efe4d2; --desk-ink: #1a0a04; --cherry-ink: #1a0a04;
  --paper: #fffdf8; --card: #fff; --parch: #f7eed6; --parch-ink: #150c03; --parch-soft: #20160a; --rubric: #761c0f;
  --paper-grain: none; --paper-mottle: none;
}
@media (prefers-color-scheme: dark) {
  html[data-contrast="high"]:not([data-theme="light"]) { --desk-ink: #fff; --cherry-ink: #fff; --wall-ink: #fffaf0; --wall-ink-soft: #efe4d2; --foot-ink: #fff; --ink: #000; --ink-soft: #1b1712; --ink-faint: #3a332a; --paper: #f4ecdd; --card: #f7f0e3; --parch: #ece0bf; }
}
html[data-contrast="high"][data-theme="dark"] { --desk-ink: #fff; --cherry-ink: #fff; --wall-ink: #fffaf0; --wall-ink-soft: #efe4d2; --foot-ink: #fff; --ink: #000; --ink-soft: #1b1712; --ink-faint: #3a332a; --paper: #f4ecdd; --card: #f7f0e3; --parch: #ece0bf; }
/* "Reduced" motion here does what the system setting does */
html[data-motion="reduce"] *, html[data-motion="reduce"] *::before, html[data-motion="reduce"] *::after { transition-duration: 0s !important; animation-duration: 0s !important; animation-delay: 0s !important; }
html[data-motion="reduce"] :is(.scroll__tie, .scroll__window, .scroll__shadow, .scroll__foot, .mini.is-current, .a11y[open]),
html[data-motion="reduce"] .scroll__roll--foot::before { animation: none !important; }
html[data-motion="reduce"] :is(.volume:hover, .volume:focus-visible, .slot > *) { translate: none !important; }
html[data-motion="reduce"] .volume .volume__body { transform: none !important; }

/* ------------------------------------------------------------------ changing language */
/* The new page arrives quietly: nothing it would play on a first visit plays again. */
html.swapped :is(.scroll__tie, .scroll__window, .scroll__shadow, .scroll__foot, .mini.is-current),
html.swapped .scroll__roll--foot::before { animation: none !important; }
/* Where the browser can, the old page melts into the new one: the switch, sign and shelf glide to their
   places (to the other side, for Arabic) while the rest cross-fades. The pill has already slid over by then. */
@media (prefers-reduced-motion: no-preference) {
  .langs { view-transition-name: kiwi-langs; }
  .a11y-open--top { view-transition-name: kiwi-a11y; }
  .plaque { view-transition-name: kiwi-plaque; }
  .navshelf { view-transition-name: kiwi-navshelf; }
  ::view-transition-group(kiwi-langs), ::view-transition-group(kiwi-a11y),
  ::view-transition-group(kiwi-plaque), ::view-transition-group(kiwi-navshelf) { animation-duration: .5s; animation-timing-function: cubic-bezier(.22, .8, .25, 1); }
  ::view-transition-old(root), ::view-transition-new(root) { animation-duration: .32s; }
}

/* ------------------------------------------------------------------ Arabic: right to left */
/* Arabic letters join, so they are never spaced out; there is no italic, and the script wants more room. */
html[lang="ar"] * { letter-spacing: 0 !important; }
html[lang="ar"] * { font-style: normal !important; }
html[lang="ar"] :is(.shelf-intro--drop, .pg-lede--drop)::first-letter { float: none; font: inherit; margin: 0; color: inherit; } /* a drop cap would break the joined letters */
html[lang="ar"] body { font-size: calc(clamp(17px, 16px + .3vw, 18.5px) * var(--ts, 1)); line-height: 1.85; }
html[lang="ar"] .opening { line-height: 1.35; letter-spacing: 0; }
html[lang="ar"] .opening em { color: var(--wall-ink-soft); }
html[lang="ar"] :is(.runhead, .kicker, .ladder__head, .ladder__divider, .tonight__label, .label-head) { font-size: .86rem; }
html[lang="ar"] :is(.pager__btn, .stamp, .ladder__price, .contents__meta, .entry__facts dt, .stackitem__free .label, .entry__checked) { font-size: .8rem; }
html[lang="ar"] .entry__name { font-family: var(--f-serif); }
[dir="rtl"] .page--l { box-shadow: inset 36px 0 36px -36px rgba(70, 45, 20, .38); }
[dir="rtl"] .page--r { box-shadow: inset -36px 0 36px -36px rgba(70, 45, 20, .38); }
[dir="rtl"] .book.is-live[data-mode="single"] .page { box-shadow: inset -24px 0 24px -24px rgba(70, 45, 20, .38); }
[dir="rtl"] .book__stack--l { border-radius: 0 3px 3px 0; box-shadow: inset -2px 0 2px -1px rgba(0,0,0,.25); }
[dir="rtl"] .book__stack--r { border-radius: 3px 0 0 3px; box-shadow: inset 2px 0 2px -1px rgba(0,0,0,.25); }
[dir="rtl"] .corner--r::before { right: auto; left: 0; background: linear-gradient(to top right, var(--paper-shade) 0 50%, var(--paper-edge) 50%, var(--paper) 100%); filter: drop-shadow(1px -1px 2px rgba(40, 25, 10, .25)); }
[dir="rtl"] .corner--l::before { left: auto; right: 0; background: linear-gradient(to top left, var(--paper-shade) 0 50%, var(--paper-edge) 50%, var(--paper) 100%); filter: drop-shadow(-1px -1px 2px rgba(40, 25, 10, .25)); }
/* the ribbons: bookmarks already passed stand on the right, the rest wait on the left */
[dir="rtl"] .tab { left: auto; right: calc(100% - 50px - (var(--n) - 1 - var(--i)) * 30px); transition: right .8s var(--spring), translate .3s var(--ease); box-shadow: inset 3px 0 0 rgba(0,0,0,.14); }
[dir="rtl"] .tab.is-left { right: calc(28px + var(--i) * 30px); }
[dir="rtl"] .tab.is-here { right: calc(50% - 11px); }
[dir="rtl"] .book[data-mode="single"] .tab.is-left { right: calc(14px + var(--i) * 28px); }
[dir="rtl"] .book[data-mode="single"] .tab:not(.is-left):not(.is-here) { right: calc(100% - 40px - (var(--n) - 1 - var(--i)) * 28px); }
@media (max-width: 899.98px) { [dir="rtl"] .book:not(.is-live) .tab { left: auto; right: calc(100% - 40px - (var(--n) - 1 - var(--i)) * 28px); } }
[dir="rtl"] .pg-ribbon { box-shadow: inset 3px 0 0 rgba(0,0,0,.12); }