/* Roya Library — the section that replaces All Covers.
   Version 89 · last updated 2026-09-20 17:52 PDT
   This is the v67 arrangement restored. v68 laid the section out at a fixed
   1800px and scaled it with CSS zoom; the scale did not take in the reader's
   browser while the 1800px width did, so the page ran wider than the window
   and the rail took a third of it. The four width bands below are back.
   Cut from the sandbox by build-integration.py. Do not hand-edit:
   the next build overwrites it, and the sandbox is the source. */

:root #royaLibrary{/* paper world */
  --paper:#e5dac0; --paper-2:#d8caab; --paper-edge:#c3b28d;
  --board:#12100d; --board-2:#1a1712; --board-3:#0d0b08;
  --ink:#191309; --cream:#ddd2bf; --cream-dim:#d1b377;
  --blood:#631d19; --blood-lit:#7d2923;   --gold:#c7943d; --gold-lit:#e3c88e;
  --bone:#ddd2bf; --bone-muted:#d1b377; --dust:#a99a82; --paper-dust:#c8ae78;
  --gold-lt:#e3c88e; --gold-num:#cda45f; --gold-word:#d6b472; --gold-lab:#c79a50;
  --t-num:#d7a14a; --t-pub:#d7be8d; --t-copy:#ddd2bf; --t-read:#d8b26a;
  --t-kicker:#d1ae6b; --t-ctrl:#d3b274; --t-active:#cda85f; --t-foot:#c9a461;
  /* the secondary grey the live page sets "94 stories…" in, under the wordmark */
  --t-tag:#9c9280;
  /* the quiet grey the controls take, so the gold is left to the numbers,
     the titles and the reading times */
  --t-quiet:#a2988a;
  /* the page under the Forough portraits, so the scrim over them can land on
     exactly the ground colour rather than an approximation of it */
  --over-ground:13,11,8;
  --body:#ddd2bf; --ochre:#c7943d; --ochre-muted:#9d7736;
  --oxblood:#631d19; --oxblood-lit:#d7a14a; --rule:#c7943d; --window-light:#d6ad64;
  --rule-paper:rgba(25,19,9,.28); --rule-board:rgba(199,148,61,.45);
  /* the five roles from the desktop typography spec */
  --identity:"Bebas Neue","Arial Narrow",Impact,sans-serif;
  --slab:"Rokkitt",Rockwell,Georgia,serif;
  --dw:700; --dw-big:700; --sx:1;
  --cond:"Jost",Avenir,Futura,Arial,sans-serif;
  --book:"EB Garamond",Georgia,"Times New Roman",serif;
  --nast:"Noto Naskh Arabic",Tahoma,serif;
  /* the cursive hand, for the marginalia — naskh is an upright book face and
     reads as body text at any size */
  --nastaliq:"Gulzar","Noto Nastaliq Urdu","Markazi Text","Noto Naskh Arabic",serif;
  --grain:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)' opacity='.34'/%3E%3C/svg%3E");}
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]) #royaLibrary{--paper:#d9ceb4; --paper-2:#cabc9c; --paper-edge:#a99a78;}
}
/* ── the light theme ──
   The same book, printed on paper instead of into soot. Only the tokens
   move: bone becomes ink, the ground becomes warm stock, and the press
   plate is dropped (it is a dark photograph — on a light ground it reads as a
   stain rather than a ground). */
:root[data-lt="light"] #royaLibrary{--bone:#1d1710; --bone-muted:#4a3f2e; --dust:#6d6047; --paper-dust:#8a7a5c;
  --body:#3b3122; --ochre:#8a6524; --ochre-muted:#6f5220;
  --oxblood:#631d19; --oxblood-lit:#8c2a22; --rule:#9c8354;
  --cream:#1d1710; --gold:#8a6524;
  /* the display and type colours, printed rather than lit */
  --gold-lt:#33260f; --gold-num:#7a5418; --gold-word:#5e4718; --gold-lab:#7a5c22;
  --t-num:#8a5a1e; --t-pub:#6b5733; --t-copy:#3b3122; --t-read:#7a5a20;
  --t-kicker:#6f5520; --t-ctrl:#5c4a28; --t-active:#8a6524; --t-foot:#6b5528;
  --t-tag:#4a5054;
  --t-quiet:#55504a;
  --over-ground:227,215,188;}
:root[data-lt="light"] #royaLibrary body{background-color:#cdbd9c; background-image:none}
:root[data-lt="light"] #royaLibrary .phone{background-color:#e3d7bc; background-image:none}
/* the imprint is gold foil — on cream stock it all but disappears, so in the
   light theme it is printed in ink instead. A filter, because the mark is an
   image; a second set of plates would be one more thing to keep in step. */
:root[data-lt="light"] #royaLibrary .mob-word, :root[data-lt="light"] #royaLibrary .mob-ears, :root[data-lt="light"] #royaLibrary .side-emblem{filter:brightness(.4) saturate(1.45) contrast(1.2)}
:root[data-lt="light"] #royaLibrary .lib{background-color:#e3d7bc; background-image:none; background-blend-mode:normal}
:root[data-lt="light"] #royaLibrary .lib::before{box-shadow:inset 0 0 40px 10px rgba(78,60,32,.17), inset 0 0 150px 46px rgba(78,60,32,.1);}
:root[data-lt="light"] #royaLibrary .lib::after{opacity:.5}
:root[data-lt="light"] #royaLibrary .bcard{background:rgba(255,252,243,.42); border-color:rgba(96,76,42,.38)}
:root[data-lt="light"] #royaLibrary .bcard hr, :root[data-lt="light"] #royaLibrary .side hr, :root[data-lt="light"] #royaLibrary .main-bar .rl-rule, :root[data-lt="light"] #royaLibrary .main-bar .sep, :root[data-lt="light"] #royaLibrary .abt-lab i{background:rgba(96,76,42,.45)}
:root[data-lt="light"] #royaLibrary .main-foot{border-top-color:rgba(96,76,42,.45)}
:root[data-lt="light"] #royaLibrary .side{border-right-color:rgba(96,76,42,.4)}
:root[data-lt="light"] #royaLibrary .bcard-read, :root[data-lt="light"] #royaLibrary .sortbox, :root[data-lt="light"] #royaLibrary .side-search input{border-color:rgba(96,76,42,.55)}
:root[data-lt="light"] #royaLibrary .bcard-side .bcard-act, #royaLibrary .bcard-side span{border-color:rgba(96,76,42,.32)}
:root[data-lt="light"] #royaLibrary .bcard-plate{box-shadow:0 0 26px rgba(150,110,45,.18), 0 10px 20px rgba(70,52,24,.3)}
:root[data-lt="light"] #royaLibrary .bcard-plate img{filter:saturate(.95) contrast(1.02) brightness(1)}
:root[data-lt="light"] #royaLibrary .bcard-zoom{background:rgba(247,241,226,.8); border-color:rgba(96,76,42,.5)}
:root[data-lt="light"] #royaLibrary .zoom{background:rgba(231,221,197,.95)}
:root[data-lt="light"] #royaLibrary .zoom.is-full{background:#ece2ca}
:root[data-lt="light"] #royaLibrary .zoom-nav{background:rgba(247,241,226,.75); border-color:rgba(96,76,42,.5)}
:root[data-lt="light"] #royaLibrary .zoom-strip img{border-color:rgba(96,76,42,.35)}
:root[data-lt="light"] #royaLibrary .zoom-strip{background:linear-gradient(to top, rgba(236,226,202,.95) 0, rgba(236,226,202,.75) 62%, transparent 100%)}
/* On paper the oxblood bar is the one thing dark enough to carry bone type,
   so it stays — only the resting grey and the pill move to ink values. */
:root[data-lt="light"] #royaLibrary .side-list button{color:#6d5c3e}
:root[data-lt="light"] #royaLibrary .side-list button:hover{color:#241c0f}
:root[data-lt="light"] #royaLibrary .side-list .solo{color:#8a6420}
:root[data-lt="light"] #royaLibrary .side-ct{color:#8a6420; border-color:rgba(96,76,42,.4)}
:root[data-lt="light"] #royaLibrary .side-list button[aria-pressed="true"]{background:var(--oxblood); color:#efe6d2}
:root[data-lt="light"] #royaLibrary .side-list button[aria-pressed="true"] .side-ct{color:#efe6d2;
  border-color:rgba(239,230,210,.5); background:rgba(0,0,0,.18)}
/* the light theme on the phone: the same tokens carry the type, and every
   surface that was painted dark by hand gets its paper equivalent */
:root[data-lt="light"] #royaLibrary .mob{background-color:#e3d7bc; background-image:none}
:root[data-lt="light"] #royaLibrary .mob::after{opacity:.45}
:root[data-lt="light"] #royaLibrary .mob-head{background:#efe7d3; border-bottom-color:rgba(96,76,42,.5);
  box-shadow:0 10px 18px rgba(70,52,24,.14);}
:root[data-lt="light"] #royaLibrary .mob-bar{border-bottom-color:rgba(96,76,42,.5)}
:root[data-lt="light"] #royaLibrary .mob-nav button + button::before{background:rgba(96,76,42,.35)}
:root[data-lt="light"] #royaLibrary .mob-search input, :root[data-lt="light"] #royaLibrary .pick-btn, :root[data-lt="light"] #royaLibrary .mob-ctrl .sortbox{border-color:rgba(96,76,42,.55)}
:root[data-lt="light"] #royaLibrary .mob-search input{color:#1d1710}
:root[data-lt="light"] #royaLibrary .mob-search svg, :root[data-lt="light"] #royaLibrary .pick-btn svg{stroke:#8a6524}
:root[data-lt="light"] #royaLibrary .mob-ctrl .sep{background:rgba(96,76,42,.45)}
:root[data-lt="light"] #royaLibrary .pick-list{background:#f3ead4; border-color:rgba(96,76,42,.55); box-shadow:0 18px 34px rgba(70,52,24,.3);}
:root[data-lt="light"] #royaLibrary .pick-list button{color:#4a3f2e}
:root[data-lt="light"] #royaLibrary .pick-list button + button{border-top-color:rgba(96,76,42,.18)}
:root[data-lt="light"] #royaLibrary .pick-list button:hover{color:#1d1710; background:rgba(138,101,36,.12)}
:root[data-lt="light"] #royaLibrary .pick-list button[aria-selected="true"]{color:#1d1710; background:rgba(138,101,36,.18); box-shadow:inset 2px 0 0 #8a6524;}
:root[data-lt="light"] #royaLibrary .mcard{background:rgba(255,252,243,.45); border-color:rgba(96,76,42,.38)}
:root[data-lt="light"] #royaLibrary .mcard hr{background:rgba(96,76,42,.45)}
:root[data-lt="light"] #royaLibrary .mcard-plate{box-shadow:0 0 22px rgba(150,110,45,.18), 0 8px 16px rgba(70,52,24,.28)}
:root[data-lt="light"] #royaLibrary .mcard-plate img{filter:saturate(.95) contrast(1.02) brightness(1)}
:root[data-lt="light"] #royaLibrary .mob-grid.is-rows .mcard{border-bottom-color:rgba(96,76,42,.32)}
:root[data-lt="light"] #royaLibrary .sheet{background:#e7dcc3}
:root[data-lt="light"] #royaLibrary .sheet-top{border-bottom-color:rgba(96,76,42,.5)}
:root[data-lt="light"] #royaLibrary .sheet-x{border-color:rgba(96,76,42,.45)}
:root[data-lt="light"] #royaLibrary .sheet-plate{box-shadow:0 0 28px rgba(150,110,45,.2), 0 14px 26px rgba(70,52,24,.32)}
:root[data-lt="light"] #royaLibrary .sheet-nav button{border-color:rgba(96,76,42,.45)}
:root[data-lt="light"] #royaLibrary .mob-foot{border-top-color:rgba(96,76,42,.5)}
:root[data-lt="light"] #royaLibrary .dnav{background:linear-gradient(to bottom,
    rgba(227,215,188,.90) 0%, rgba(227,215,188,.82) 46%,
    rgba(227,215,188,.48) 78%, rgba(227,215,188,0) 100%)}
:root[data-lt="light"] #royaLibrary .dnav button + button::before, :root[data-lt="light"] #royaLibrary .ab-terms::before, :root[data-lt="light"] #royaLibrary .ab-terms::after, :root[data-lt="light"] #royaLibrary .ab-rule i{background:rgba(96,76,42,.45)}
/* DEAD: .ab-card and .ab-ser are no longer emitted — .ab-ser was the All
   Series card this round replaced with .ab-serlist, .ab-card went earlier.
   Kept here rather than deleted blind: the rest of the light block is one
   long list and a wrong cut in it is invisible until someone switches theme.
   Safe to remove with .ab-cov / .ab-body / .ab-n / .ab-ti / .ab-hk / .ab-recs
   and the .ab-sers line below, all checked against the markup as unused. */
:root[data-lt="light"] #royaLibrary .ab-card, :root[data-lt="light"] #royaLibrary .ab-ser{background:rgba(255,252,243,.45); border-color:rgba(96,76,42,.38)}
/* The open series row took the same near-black wash as the cards above but
   never got their paper rule, so on this theme it came out as a grey slab
   across the page. It takes the cards' stock now, and its inner dividers the
   paper rule rather than the board's gold — a gold hairline reads as a lit
   edge, which is right on a dark ground and wrong on a light one. */
:root[data-lt="light"] #royaLibrary .ab-spanel{background:rgba(255,252,243,.45);
  border-color:rgba(96,76,42,.38)}
:root[data-lt="light"] #royaLibrary .ab-spanel > * + *{border-left-color:rgba(96,76,42,.3)}
:root[data-lt="light"] #royaLibrary .ab-cov img{border-color:rgba(96,76,42,.4)}
:root[data-lt="light"] #royaLibrary .ab-t{border-bottom-color:rgba(96,76,42,.6)}
:root[data-lt="light"] #royaLibrary .rec{background:rgba(231,221,197,.95)}
:root[data-lt="light"] #royaLibrary .rec-in{background:#e9dfc7}
/* ── the featured plate on paper ──
   The veil over this picture was already a cream — --over-ground has been a
   paper value in this theme all along. What went black was the plate itself:
   forough.webp is two lit faces at the far edges of a frame that is otherwise
   near-black, and on a lit ground that field reads as a smear across the
   words rather than as a ground behind them.

   So the plate stays and the field goes. Two soft lobes, one over each face,
   replace the base rule's edge feathering — mask-composite adds them rather
   than intersecting, so what survives is the union of the two and nothing in
   between. The middle of the block, which is where the copy sits, is clean
   stock; the tint that remains is on the faces, which is the only place it
   was ever doing any work.

   The lobes are placed in the pseudo-element's own box, and the plate fills
   that box horizontally in both layouts — cover on the desktop, 110% on the
   phone — so 6% and 94% land on the two faces either way. They are narrow
   horizontally and tall vertically: wide enough and the haze reaches the
   first words of every line, tight enough and a face stops reading as a
   face. 20% by 46% is where both hold. brightness lifts the plate off the
   stock a little, because a photograph exposed for a dark page sits heavy
   on a light one. */
:root[data-lt="light"] #royaLibrary .ab-over::before{
  filter:brightness(1.05) contrast(.97) saturate(1.04);
  -webkit-mask-image:
    radial-gradient(20% 46% at 6% 44%, #000 16%, rgba(0,0,0,.45) 42%, transparent 76%),
    radial-gradient(20% 46% at 94% 44%, #000 16%, rgba(0,0,0,.45) 42%, transparent 76%);
  mask-image:
    radial-gradient(20% 46% at 6% 44%, #000 16%, rgba(0,0,0,.45) 42%, transparent 76%),
    radial-gradient(20% 46% at 94% 44%, #000 16%, rgba(0,0,0,.45) 42%, transparent 76%);
  -webkit-mask-composite:source-over; mask-composite:add;}
:root[data-lt="light"] #royaLibrary .rec-x, :root[data-lt="light"] #royaLibrary .rec-nav, :root[data-lt="light"] #royaLibrary .ab-art{opacity:1; filter:saturate(1.05) brightness(1.02) contrast(1.06);
  -webkit-mask-image:linear-gradient(to bottom, transparent 0, transparent 8%, #000 14%, #000 86%, transparent 92%, transparent 100%);
  mask-image:linear-gradient(to bottom, transparent 0, transparent 8%, #000 14%, #000 86%, transparent 92%, transparent 100%);}
:root[data-lt="light"] #royaLibrary .ab-row::before{content:""; position:absolute; top:-11%; bottom:-11%; left:-3rem; right:0;
  z-index:1; pointer-events:none;
  background:linear-gradient(to right,
    rgb(227,215,188) 0, rgb(227,215,188) 58%,
    rgba(227,215,188,.88) 67%, rgba(227,215,188,.5) 76%,
    rgba(227,215,188,.16) 85%, transparent 94%);
  -webkit-mask-image:linear-gradient(to bottom, transparent 0, #000 8%, #000 92%, transparent 100%);
  mask-image:linear-gradient(to bottom, transparent 0, #000 8%, #000 92%, transparent 100%);}
:root[data-lt="light"] #royaLibrary .ab-rowin{z-index:2}
:root[data-lt="light"] #royaLibrary .ab-row .ab-head b, :root[data-lt="light"] #royaLibrary .ab-row .ab-name, :root[data-lt="light"] #royaLibrary .ab-row .ab-fa, :root[data-lt="light"] #royaLibrary .ab-row .ab-time, :root[data-lt="light"] #royaLibrary .ab-row .ab-gl, :root[data-lt="light"] #royaLibrary .ab-row .ab-syn{text-shadow:none}
:root[data-lt="light"] #royaLibrary .rec-nav button{border-color:rgba(96,76,42,.45)}
:root[data-lt="light"] #royaLibrary .dial-m i{border-color:rgba(96,76,42,.45)}
:root[data-lt="light"] #royaLibrary .dial-n{border-bottom-color:rgba(96,76,42,.55)}
:root[data-lt="light"] #royaLibrary .dial-l{border-left-color:rgba(96,76,42,.45)}
#royaLibrary{box-sizing:border-box}
#royaLibrary, #royaLibrary{margin:0}
#royaLibrary{/* the ground plate: one warm field behind everything, pinned to the
     viewport so it neither tiles nor stretches as the shelf runs on */
  background-color:#0b0906; color:var(--bone);
  background-image:url("bg-desk.webp");
  background-size:cover; background-position:center center;
  background-repeat:no-repeat; background-attachment:fixed;
  font-family:var(--book); font-weight:500; font-size:17px; line-height:1.48;
  -webkit-font-smoothing:antialiased;}
#royaLibrary img{max-width:100%; display:block}
#royaLibrary button{font:inherit; color:inherit; background:none; border:0; cursor:pointer; text-align:left}
#royaLibrary :focus-visible{outline:2px solid var(--gold); outline-offset:2px}
/* Texture without mix-blend-mode. A blended pseudo-element here painted the
   whole phone frame black in Chromium — the blend reached past its own
   stacking context. Plain low-opacity noise gives the same aged paper. */
#royaLibrary .grain::after{content:""; position:absolute; inset:0; background-image:var(--grain);
  opacity:.16; pointer-events:none;}
#royaLibrary .grain-lite::after{content:""; position:absolute; inset:0; background-image:var(--grain);
  opacity:.09; pointer-events:none;}
/* ══ lab chrome ══ */
/* ══ device frames ══
   The centring lives on #stage, not on .viewport. As a flex ITEM, #stage took
   its width from the max-content of the phone's subtree — about 1,900px — so
   centring it put its left edge at x = -750 and the whole frame sat off-screen
   with every computed style looking perfectly correct. Block viewport, flex
   stage, width:100%: the frame can no longer be wider than the column. */
#royaLibrary .phone{position:relative; flex:0 1 420px; min-width:0; max-width:100%;
  height:min(860px, calc(100vh - var(--labh,0px) - 5rem));
  border:10px solid #17140f; border-radius:34px;
  overflow-y:auto; overflow-x:clip; overscroll-behavior:contain;
  scrollbar-width:none;
  box-shadow:0 30px 70px rgba(0,0,0,.6);
  background-color:#0b0906; background-image:url("bg-mob.webp");
  background-size:cover; background-position:center center; background-repeat:no-repeat;}
#royaLibrary .phone::-webkit-scrollbar{display:none}
/* the shell does not scroll, so anything absolutely positioned in it is
   measured against the frame the reader can see */
#royaLibrary .phone-shell{position:relative; display:flex; flex:0 1 420px; min-width:0; max-width:100%}
#royaLibrary .phone-shell > .phone{flex:1 1 auto}
#royaLibrary .phone-over{position:absolute; inset:10px; z-index:20; border-radius:24px;
  overflow:hidden; pointer-events:none;}
#royaLibrary .phone-over > *{pointer-events:auto}
/* nothing behind an open sheet may move */
#royaLibrary .phone.is-locked{overflow:hidden}
/* ══════════ DESKTOP · Roya Library (the archive grid) ══════════ */
/* The cap was holding the whole section at 1760px. On a large display that
   left the book about a third of the window wide, and since every size on its
   page is a share of the book's own width, the type could not grow however
   much it was raised. Above 1900px the cap lifts and the page scales with the
   screen. */
#royaLibrary .lib{position:relative; max-width:1760px; margin:0 auto;
  /* the plate, and nothing over it. A press-paper tile used to sit on top at
     soft-light, from before this artwork existed; the plate has its own grain
     and the press lines in ::after add the rest, so the tile was one more file
     for a difference nobody could see. */
  background-color:transparent;
  background-image:url("bg-desk.webp");
  background-size:cover; background-position:center center;
  background-repeat:no-repeat; background-attachment:fixed;
  /* The handled-paperback perimeter — a 9-slice of worn bone paper — is gone.
     It read as two cream bars down the sides of the screen rather than as a
     deckle: an edge only works as an edge when you can see the whole sheet,
     and on a desktop you never can. The vignette below still closes the page
     in, without a colour of its own. edge.png is still used by the record
     panel, so the asset stays.

     The rail goes 13.5rem to 20.5rem. THE UNWITNESSED WARS I-V, THE BORROWED
     SUN CYCLE and COME IN, THE WATER IS LOVELY were all being cut off with an
     ellipsis, and a list of series that cannot say its own names is not a
     list of series. 20.5rem is measured, not picked: the longest name sets
     252px in this face, and the column has to carry that plus the count, the
     gap between them and its own padding, with a few pixels over so the last
     letter is not sitting against the pill. Below 980px the rail stops being
     a column at all, so the figure only ever applies where there is room. */
  display:grid; grid-template-columns:21rem minmax(0,1fr);}
@media (min-width:1900px){ #royaLibrary .lib{max-width:2160px} }
/* The vignette belongs to the archive, not to the rail: run over both, its
   left edge darkened the series list from behind and the names read through a
   wash. It now begins where the rail ends, and the rail's own rule is the line
   between the two. --vig-l is 0 wherever the rail is not a column. */
#royaLibrary .lib{--vig-l:21rem}
#royaLibrary .lib::before{content:""; position:absolute; inset:0 0 0 var(--vig-l);
  pointer-events:none; z-index:5;
  box-shadow:inset 0 0 40px 10px rgba(0,0,0,.85), inset 0 0 150px 46px rgba(0,0,0,.6);}
/* fine press lines — the spec's print-grain layer, without mix-blend-mode
   (a blended overlay here painted whole subtrees black in Chromium) */
#royaLibrary .lib::after{content:""; position:absolute; inset:0; pointer-events:none; z-index:6; opacity:.28;
  background-image:
    repeating-linear-gradient(0deg, transparent 0 3px, rgba(255,255,255,.025) 4px),
    repeating-linear-gradient(90deg, transparent 0 7px, rgba(0,0,0,.09) 8px);}
/* ── sidebar ── */
/* The left column stays put while the archive scrolls past it, so a series
   can be picked at any point in the grid. .side is the full-height cell (it
   carries the rule); .side-in is what sticks. --labh is the lab bar's height,
   measured in draw() — without it the column slides under the bar. */
#royaLibrary .side{position:relative; z-index:2; border-right:1px solid rgba(199,148,61,.42)}
#royaLibrary .side-in{position:sticky; top:var(--labh,0px); height:calc(100vh - var(--labh,0px));
  padding:.9rem .95rem .95rem; display:flex; flex-direction:column; gap:.45rem;
  overflow:hidden;}
/* Flex items shrink by default, and this column holds more than its height:
   the series list collapsed and its rows drew on top of one another. Only the
   list gives; everything else keeps its size. */
#royaLibrary .side-in > *{flex:0 0 auto}
#royaLibrary .side-in > .side-list{flex:1 1 auto; min-height:0; max-height:none}
#royaLibrary .side-mark{margin:0; font-family:var(--slab); font-weight:var(--dw-big); font-size:2rem; line-height:.92;
  letter-spacing:-.012em; text-transform:uppercase; color:var(--bone);}
/* The count, as one line rather than a stacked pair. The numeral takes the
   identity face the story numbers already wear, so it reads as a catalogue
   figure rather than a heading, and the word beside it is set small and widely
   tracked on the same baseline. Stacked, it was two lines of slab shouting the
   same thing twice; laid out this way the rail says it once. */
#royaLibrary .side-count{margin:.42rem 0 .12rem; display:flex; align-items:baseline; justify-content:center;
  gap:.46rem; font-family:var(--cond); font-weight:400; font-size:.75rem;
  line-height:1; letter-spacing:.34em; margin-right:-.34em;
  text-transform:uppercase; color:var(--t-tag);}
#royaLibrary .side-count b{font-family:var(--identity); font-weight:400; font-size:1.65rem; line-height:.82;
  letter-spacing:.02em; color:var(--gold-num);}
#royaLibrary .side hr{border:0; height:1px; background:rgba(199,148,61,.5); margin:0}
#royaLibrary .side-emblem{width:5.3rem; height:auto; margin:0 auto; display:block;
  /* the plate is printed gold; on screen it wants a little more of it */
  filter:saturate(1.2) brightness(1.12) contrast(1.04);}
#royaLibrary .side-in > .side-set{margin-top:.15rem}
#royaLibrary .side-who{margin:.3rem 0 0; padding:.3rem 0 .26rem; text-align:center;
  border-top:1px solid rgba(199,148,61,.58); border-bottom:1px solid rgba(199,148,61,.58);
  font-family:var(--cond); font-weight:400; font-size:.8125rem; letter-spacing:.2em;
  text-indent:.22em; text-transform:uppercase; color:var(--bone-muted); line-height:1.2;}
#royaLibrary .side-sub{margin:.22rem 0 0; text-align:center;
  font-family:var(--cond); font-weight:500; font-size:.8125rem; letter-spacing:.2em;
  text-transform:uppercase; color:var(--bone-muted);}
#royaLibrary .side-rights{margin:.4rem 0 0; text-align:center;
  font-family:var(--cond); font-weight:500; font-size:.5625rem; letter-spacing:.2em;
  line-height:1.6; text-transform:uppercase; color:var(--paper-dust);}
/* the wave is two-tone by class, not by currentColor, so the lit part of it
   can go out on its own when the sound is off */
#royaLibrary .side-sound .rl-bar-em{stroke:var(--ochre)}
#royaLibrary .side-sound .rl-bar-pa{stroke:var(--bone-muted)}
#royaLibrary .side-sound svg{opacity:.82; transition:opacity .25s}
#royaLibrary .side-sound:hover svg, #royaLibrary .side-sound[aria-pressed="true"] svg{opacity:1}
#royaLibrary .side-foot-rule{margin-top:.75rem !important}
#royaLibrary .side-set{display:flex; justify-content:center; gap:1.9rem; margin:.25rem 0 0}
#royaLibrary .side-tog{display:flex; flex-direction:column; align-items:center; gap:.22rem;
  color:var(--bone-muted); padding:.1rem .5rem;}
#royaLibrary .side-tog:hover{color:var(--ochre)}
#royaLibrary .side-tog svg{width:1.02rem; height:1.02rem}
#royaLibrary .side-tog span{font-family:var(--cond); font-weight:600; font-size:.5625rem; letter-spacing:.24em;
  text-transform:uppercase;}
#royaLibrary .side-clear{position:absolute; right:.4rem; top:50%; transform:translateY(-50%);
  width:1.3rem; height:1.3rem; display:grid; place-items:center;
  font-size:.75rem; color:var(--paper-dust);}
#royaLibrary .side-clear:hover{color:var(--bone)}
#royaLibrary .side-lab{font-family:var(--book); font-weight:500; font-size:.8125rem;
  letter-spacing:.22em; text-transform:uppercase; color:var(--t-quiet);}
#royaLibrary .side-list{display:flex; flex-direction:column; gap:.06rem; max-height:21rem;
           overflow-y:auto; scrollbar-width:thin; padding-bottom:.3rem}
#royaLibrary .side-list[data-more="1"]{-webkit-mask-image:linear-gradient(#000 calc(100% - 1.1rem), transparent);
  mask-image:linear-gradient(#000 calc(100% - 1.1rem), transparent);}
/* ── the series list ──
   Set to the reference: the catalogue's own slab, uppercase, with each row
   carrying the number of books in it and the open one marked by a bar across
   the whole row. The face is the slab from that reference; the colour is not
   — the resting rows are the quiet grey, because fourteen rows of cream slab
   beside the covers is a second headline down the side of the page. Grey at
   rest, and the one row that matters comes up in bone on oxblood.

   Two tracks, so the name can shrink and the figure cannot: name left,
   count right, and a long name ellipsises against its own column instead of
   pushing the number off the rail. */
#royaLibrary .side-list{gap:.12rem}
#royaLibrary .side-list button{flex:0 0 auto; display:grid;
  grid-template-columns:minmax(0,1fr) auto; align-items:center; column-gap:.6rem;
  width:100%; text-align:left; line-height:1.3;
  /* the book face, set in small capitals rather than driven to uppercase: the
     names are title case in the data, so the capital each one already has
     stands full height and the rest come up small, which is what gives the
     reference its evenness. Light, open, and quiet at rest. */
  font-family:var(--book); font-weight:400; font-size:1.06rem; letter-spacing:.075em;
  text-transform:none; font-variant-caps:small-caps;
  font-feature-settings:"smcp" 1, "kern" 1, "liga" 1;
  color:var(--t-quiet);
  padding:.3rem .55rem; margin-left:-.55rem;
  transition:color .16s, background-color .16s;}
#royaLibrary .side-nm{min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
/* the figure: tabular, so fourteen rows of numbers line up down the rail */
#royaLibrary .side-ct{flex:0 0 auto; font-family:var(--book); font-weight:500; font-size:.72rem;
  letter-spacing:.04em; font-variant-numeric:tabular-nums; color:var(--ochre-muted);
  padding:.1rem .42rem; border:1px solid rgba(199,148,61,.34); border-radius:999px;
  line-height:1.4;}
#royaLibrary .side-list button:hover{color:var(--bone)}
#royaLibrary .side-list button:hover .side-ct{color:var(--ochre); border-color:rgba(199,148,61,.6)}
/* the open row. The bar runs the full width of the rail — margin-left pulls it
   back past the column's own padding — with the pointer the reference puts at
   its head drawn rather than typed, so no glyph has to be in the font. */
#royaLibrary .side-list button[aria-pressed="true"]{color:var(--bone);
  background:var(--oxblood); position:relative;}
#royaLibrary .side-list button[aria-pressed="true"]::before{content:""; position:absolute;
  left:.14rem; top:50%; width:0; height:0; transform:translateY(-50%);
  border-top:.26rem solid transparent; border-bottom:.26rem solid transparent;
  border-left:.32rem solid var(--gold-lt);}
#royaLibrary .side-list button[aria-pressed="true"] .side-nm{padding-left:.44rem}
#royaLibrary .side-list button[aria-pressed="true"] .side-ct{color:var(--gold-lt);
  border-color:rgba(227,200,142,.55); background:rgba(0,0,0,.22)}
#royaLibrary .side-list .solo{color:var(--ochre-muted)}
#royaLibrary .side-search{position:relative}
#royaLibrary .side-search input{width:100%; padding:.42rem 1.8rem .42rem .55rem; background:transparent; color:var(--bone);
  border:1px solid rgba(199,148,61,.55); font-family:var(--book); font-weight:400; font-size:.9375rem;}
#royaLibrary .side-search input::placeholder{color:var(--paper-dust)}
#royaLibrary .side-search svg{position:absolute; right:.55rem; top:50%; transform:translateY(-50%); width:.95rem; height:.95rem; stroke:var(--bone); fill:none; stroke-width:1.6}
#royaLibrary .side-strap{display:none;}
/* ── main ── */
#royaLibrary .main{position:relative; z-index:2; padding:1.4rem 1.3rem 0; display:flex; flex-direction:column; min-width:0}
#royaLibrary .main-bar{display:flex; align-items:center; gap:1rem; padding-bottom:1.1rem}
#royaLibrary .main-bar .t{font-family:var(--cond); font-weight:500; font-size:.6875rem; letter-spacing:.3em;
  text-transform:uppercase; color:var(--t-kicker); white-space:nowrap;}
#royaLibrary .main-bar .rl-rule{flex:1; height:1px; background:rgba(199,148,61,.58)}
#royaLibrary .sortbox{display:flex; align-items:center; gap:.7rem; padding:.36rem .7rem;
  border:1px solid rgba(199,148,61,.55);
  font-family:var(--cond); font-weight:500; font-size:.6875rem; letter-spacing:.2em;
  text-transform:uppercase; color:var(--t-quiet); white-space:nowrap;}
#royaLibrary .sortbox svg{width:.8rem; height:.8rem; stroke:currentColor; fill:none; stroke-width:2}
#royaLibrary .main-bar .sep{width:1px; height:1.4rem; background:rgba(199,148,61,.58)}
#royaLibrary .viewtog{display:flex; gap:.55rem}
#royaLibrary .viewtog button{color:var(--dust); padding:.15rem}
#royaLibrary .viewtog button[aria-pressed="true"]{color:var(--t-active)}
#royaLibrary .viewtog svg{width:1.25rem; height:1.25rem; stroke:currentColor; fill:none; stroke-width:1.7}
#royaLibrary .grid{display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:1rem; padding-bottom:1.3rem}
#royaLibrary .bcard{display:grid; grid-template-columns:52% minmax(0,1fr); gap:1.1rem;
  padding:1.125rem; border:1px solid rgba(191,139,54,.55); background:rgba(11,9,6,.55);
  text-align:left; align-items:start; transition:border-color .16s;}
#royaLibrary .bcard:hover{border-color:var(--ochre)}
#royaLibrary .bcard[aria-current="true"]{border-color:var(--bone); box-shadow:inset 0 0 0 1px rgba(232,214,181,.4)}
#royaLibrary .bcard-cov{display:flex; flex-direction:column; gap:.6rem; min-width:0}
/* The plate: flat front-cover art inside a worn board frame. The frame is a
   9-slice border-image, so the wear never repeats identically corner to
   corner and never stretches out of proportion with the card. */
#royaLibrary .bcard-plate{position:relative; display:block; background:#0a0806;
  border:9px solid transparent; border-image:url(frame.png) 28 round;
  box-shadow:0 0 28px rgba(198,150,70,.17), 0 10px 20px rgba(0,0,0,.6);}
/* the spec's press treatment: a little desaturated, a little more contrast */
#royaLibrary .bcard-plate img{aspect-ratio:2/3; object-fit:cover; width:100%; display:block;
  filter:saturate(.9) contrast(1.06) brightness(.94);}
#royaLibrary .bcard-zoom{position:absolute; top:.4rem; right:.4rem; width:1.75rem; height:1.75rem;
  display:grid; place-items:center; color:var(--bone);
  background:rgba(8,7,5,.72); border:1px solid rgba(233,223,201,.46);
  opacity:.62; transition:opacity .16s, color .16s;}
#royaLibrary .bcard-plate:hover .bcard-zoom, #royaLibrary .bcard:hover .bcard-zoom, #royaLibrary .bcard:focus-within .bcard-zoom{opacity:1}
#royaLibrary .bcard-zoom:hover{color:var(--ochre); border-color:var(--ochre)}
#royaLibrary .bcard-zoom svg{width:.86rem; height:.86rem; stroke:currentColor; fill:none; stroke-width:1.7}
#royaLibrary .bcard-body{display:flex; flex-direction:column; min-width:0; height:100%}
#royaLibrary .bcard-no{font-family:var(--cond); font-weight:600; font-size:.625rem; letter-spacing:.15em;
  text-transform:uppercase; color:var(--t-pub);}
#royaLibrary .bcard-no b{font-family:var(--identity); font-weight:400; font-size:1.0625rem;
  letter-spacing:.04em; color:var(--t-num);}
#royaLibrary .bcard-ti{margin:1.3125rem 0 1.0625rem; font-family:var(--slab); font-weight:700;
  font-size:clamp(1.55rem, 1.85vw, 2.0625rem); line-height:.92; letter-spacing:-.012em;
  text-transform:uppercase; color:var(--gold-lt); text-wrap:balance;}
/* Fitting. The spec caps a title at three lines and the reference deck's
   titles are short; this catalogue's are not, so the long ones step down
   rather than stack five deep in a 164px information column. */
#royaLibrary .bcard-ti.is-mid{font-size:clamp(1.3rem, 1.52vw, 1.7rem)}
#royaLibrary .bcard-ti.is-long{font-size:clamp(1.06rem, 1.24vw, 1.38rem); line-height:1; text-wrap:pretty}
#royaLibrary .bcard hr{border:0; height:1px; background:rgba(199,148,61,.58); margin:0}
#royaLibrary .bcard-hook{margin:1.25rem 0 .8rem; font-family:var(--book); font-weight:400;
            font-size:1.125rem; line-height:1.4; color:var(--t-copy)}
#royaLibrary .bcard-meta{display:flex; gap:.55rem; flex-wrap:wrap; margin:0 0 .7rem;
  font-family:var(--cond); font-weight:600; font-size:.5625rem; letter-spacing:.24em;
  text-transform:uppercase; color:var(--dust);}
/* Read · PDF · Share now sit under the cover, not under the text. */
#royaLibrary .bcard-acts{display:flex; flex-direction:column; gap:.4rem}
#royaLibrary .bcard-read{display:flex; align-items:center; justify-content:space-between; gap:.5rem;
  padding:.36rem .55rem; border:1px solid rgba(199,148,61,.5);
  font-family:var(--cond); font-weight:600; font-size:.6875rem; letter-spacing:.3em;
  text-transform:uppercase; color:var(--t-read);}
#royaLibrary .bcard-read svg{width:1.05rem; height:.8rem; stroke:currentColor; fill:none; stroke-width:1.6; flex:0 0 auto}
#royaLibrary .bcard:hover .bcard-read{color:var(--ochre); border-color:var(--ochre)}
#royaLibrary .bcard-side{display:flex; gap:.4rem}
#royaLibrary .bcard-side .bcard-act, #royaLibrary .bcard-side span{flex:1 1 0; min-width:0;
  display:inline-flex; align-items:center; justify-content:center; gap:.28rem;
  padding:.3rem .2rem; border:1px solid rgba(199,148,61,.34);
  font-family:var(--cond); font-weight:600; font-size:.5625rem; letter-spacing:.15em;
  text-transform:uppercase; color:var(--dust);}
#royaLibrary .bcard-side svg{width:.8rem; height:.8rem; stroke:currentColor; fill:none; stroke-width:1.6; flex:0 0 auto}
#royaLibrary .bcard-side span:hover{color:var(--bone); border-color:rgba(232,214,181,.55)}
/* list mode */
#royaLibrary .grid.is-list{grid-template-columns:minmax(0,1fr)}
/* List mode is an index, not a wall of cards: the cover shrinks to a
   thumbnail and display:contents lifts the plate and the three actions out
   of the cover column so they can sit at either end of one row. */
#royaLibrary .grid.is-list .bcard{grid-template-columns:5.9rem minmax(0,1fr) 9.6rem;
  align-items:center; gap:1.3rem; padding:.85rem 1rem;}
#royaLibrary .grid.is-list .bcard-cov{display:contents}
#royaLibrary .grid.is-list .bcard-plate{border-width:7px; order:1}
#royaLibrary .grid.is-list .bcard-body{order:2}
#royaLibrary .grid.is-list .bcard-acts{order:3}
#royaLibrary .grid.is-list .bcard-ti{font-size:1.25rem; margin:.25rem 0 .45rem; max-width:none}
#royaLibrary .grid.is-list .bcard-hook{margin:0 0 .45rem}
#royaLibrary .grid.is-list .bcard-meta{margin:0}
#royaLibrary .grid.is-list .bcard hr{display:none}
#royaLibrary .grid.is-list .bcard-zoom{width:1.4rem; height:1.4rem; top:.25rem; right:.25rem}
#royaLibrary .grid.is-list .bcard-zoom svg{width:.75rem; height:.75rem}
#royaLibrary .main-foot{margin-top:auto; display:flex; align-items:center; gap:1rem; flex-wrap:wrap;
  padding:.85rem 0 1rem; border-top:1px solid rgba(199,148,61,.55);
  font-family:var(--cond); font-weight:500; font-size:.5625rem; letter-spacing:.3em;
  text-transform:uppercase; color:var(--t-foot);}
#royaLibrary .main-foot .sep{opacity:.5}
#royaLibrary .main-foot .r{margin-left:auto; color:var(--bone); font:inherit; letter-spacing:inherit; text-transform:inherit}
#royaLibrary button.main-foot .r:hover, #royaLibrary .main-foot button.r:hover{color:var(--ochre)}
/* ── the section nav, at the head of the main column ── */
#royaLibrary .dnav{display:flex; align-items:flex-start; justify-content:center; gap:3.2rem;
  padding:2rem .2rem 1.8rem;
  /* No rule of its own. The bar under it already draws one a third of an inch
     lower, and two hairlines that close together read as a printing fault
     rather than as a division. The band needs to keep type legible over
     whatever scrolls under it; the line was never doing that work. */
  position:sticky; top:var(--labh,0px); z-index:9;
  /* Was a flat #100f0d fill. Against the boarded ground and the paintings
     behind it that read as a lighter rectangle with a hard bottom edge — a
     bar laid over the page rather than part of it. What a frozen header
     actually needs is for the type to stay legible over whatever scrolls
     under it, and a blur does that without a colour of its own. The veil
     carries the ground colour, strongest where the band meets the top of
     the screen and gone by its foot, so there is no edge anywhere. */
  background:linear-gradient(to bottom,
    rgba(16,15,13,.88) 0%, rgba(16,15,13,.80) 46%,
    rgba(16,15,13,.46) 78%, rgba(16,15,13,0) 100%);
  backdrop-filter:blur(14px) saturate(.88);
  -webkit-backdrop-filter:blur(14px) saturate(.88);}
/* The pair sits at the left of the bar, out of the nav's own flow: the three
   section links are centred on the column and would shift off centre if two
   more items shared their row. Absolute against the bar, which is already a
   positioned element for its sticky. */
/* top:2rem, not top:50% with a translate. The bar's own top padding is 2rem,
   so this lines the pair up with the section labels without a transform — and
   a transform here is not free: it makes .dnav-set a containing block inside
   an already-sticky bar, and the browser's hit testing stopped agreeing with
   the painted position. The buttons looked right and could not be clicked. */
#royaLibrary .dnav-set{position:absolute; left:1.5rem; top:2rem;
  display:flex; align-items:flex-start; gap:1.7rem; z-index:2}
/* The pair is out of the nav's flow, so a narrowing window walks the centred
   links straight into it — the labels were landing on top of each other. The
   bar now keeps a lane clear on the left the width of the pair, and closes the
   gap between the links first; only when both have given what they can does
   the pair stand down to its icons alone. */
#royaLibrary .dnav{padding-left:11rem}
@media (max-width:1180px){
  #royaLibrary .dnav{gap:2rem}
}
@media (max-width:1040px){
  #royaLibrary .dnav{gap:1.4rem; padding-left:7.5rem}
  #royaLibrary .dnav-set{gap:1.1rem}
  #royaLibrary .dnav-set .side-tog span{display:none}
}
#royaLibrary .dnav-set .side-tog{padding:0}
#royaLibrary .dnav button{display:flex; flex-direction:column; gap:.34rem; padding:0 .2rem; position:relative}
/* :not(.side-tog) — the two controls are buttons too, and without this the
   hairline meant for the gaps between the three section links also drew down
   the left of Theme and of About. */
#royaLibrary .dnav button:not(.side-tog) + button:not(.side-tog)::before{content:""; position:absolute;
  left:-1.6rem; top:.1rem; bottom:.1rem; width:1px; background:rgba(199,148,61,.4);}
#royaLibrary .dnav b{font-family:var(--cond); font-weight:600; font-size:1.0625rem; letter-spacing:.2em;
  text-transform:uppercase; color:var(--ochre);}
#royaLibrary .dnav i{font-style:normal; font-family:var(--book); font-size:1.0625rem; color:var(--dust)}
#royaLibrary .dnav button:hover b{color:var(--gold-lt)}
#royaLibrary .dnav button[aria-current="true"] b{color:var(--gold-lt); box-shadow:inset 0 -2px 0 var(--gold-lt); padding-bottom:.26rem}
/* ── About and Author's Notes ── */
#royaLibrary .abt{position:relative; z-index:2; padding:1.8rem 1.4rem 1rem; min-width:0}
/* Measures widened from 56/62/60ch. On a wide desktop the column runs to
   about 1,470px and the prose was using barely a third of it, so the panel
   read as a narrow strip with the page empty either side.

   The ceiling is a COUNT OF CHARACTERS, not a share of the column: past about
   ninety the eye loses its place coming back to the left margin, and no
   amount of empty page is worth that. `ch` is the advance of a zero, which in
   these book faces runs wider than lowercase, so a ch figure buys roughly 1.2
   characters — 68ch measures out at about 85 on the line, which is where this
   stops. Filling the rest of the column wants a second column, not a longer
   line. */
#royaLibrary .ab-lede{margin:0 auto 1.3rem; max-width:78ch; text-align:center;
  font-family:var(--book); font-weight:400; font-size:1.5rem; line-height:1.48; color:var(--bone);}
#royaLibrary .ab-note{/* the live page sets this line in --faded, italic, at 1.8 — secondary to the
     statement above it. It had been inheriting the body's warm bone, which on
     a dark ground reads as one more gold paragraph. */
  /* Wider and larger, both at the user's asking — the character ceiling noted
     above is deliberately set aside here. This is two lines under the
     statement, not a page of prose; a long line costs a reader nothing when
     they only make the return sweep once. */
  margin:0 auto 1.6rem; max-width:86ch; text-align:center;
  font-family:var(--book); font-weight:400; font-style:italic;
  font-size:1.3125rem; line-height:1.66; color:var(--t-tag);}
#royaLibrary .ab-note--long{font-style:normal}
/* The dividers used to be a pseudo-element on each cell, positioned against
   the cell. Taking position:relative off the cell — which the hover note needs
   — left all of them stacked at the far left of the row, which is the stray
   line. They are drawn on the row itself now, at the two gap midpoints, which
   is where they always appeared to be. */
#royaLibrary .ab-terms{--abgap:1.6rem;
  display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:var(--abgap);
  margin:1.8rem 0 .6rem;}
#royaLibrary .ab-terms::before, #royaLibrary .ab-terms::after{content:""; position:absolute; top:.4rem; bottom:.4rem; width:1px;
  background:rgba(199,148,61,.4); pointer-events:none;}
#royaLibrary .ab-terms::before{left:calc((100% - 2*var(--abgap))/3 + var(--abgap)/2)}
#royaLibrary .ab-terms::after{left:calc((100% - 2*var(--abgap))/3*2 + var(--abgap)*1.5)}
#royaLibrary .ab-term{text-align:center; position:relative; padding:0 .5rem}
#royaLibrary .ab-ic{display:block; margin:0 auto .6rem; width:2.4rem; height:2.4rem; color:var(--ochre)}
#royaLibrary .ab-ic svg{width:100%; height:100%}
#royaLibrary .ab-t{display:inline-block; font-family:var(--cond); font-weight:600; font-size:.9375rem;
  letter-spacing:.24em; text-transform:uppercase; color:var(--ochre); cursor:help;
  border-bottom:1px dotted rgba(199,148,61,.7); padding-bottom:.1rem;}
#royaLibrary .ab-d{display:block; margin-top:.5rem; font-family:var(--book); font-size:1rem; color:var(--t-copy)}
#royaLibrary .ab-rule{display:flex; align-items:center; gap:1.1rem; margin:2.2rem 0 1.2rem}
#royaLibrary .ab-rule i{flex:1; height:1px; background:rgba(199,148,61,.5)}
/* The size of these labels is NOT set here. .ab-mark b carries it, further
   down this file, and being later it wins — so an edit made on this line does
   nothing at all to what the reader sees. */
#royaLibrary .ab-rule span{font-family:var(--cond); font-weight:600; font-size:.6875rem; letter-spacing:.3em;
  text-transform:uppercase; color:var(--ochre);}
#royaLibrary .ab-recs{display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:.9rem}
#royaLibrary .ab-card{display:grid; grid-template-columns:5.2rem minmax(0,1fr); gap:.8rem; align-items:start;
  padding:.7rem; border:1px solid rgba(191,139,54,.45); background:rgba(11,9,6,.5);
  text-align:left; transition:border-color .16s;}
#royaLibrary .ab-card:hover{border-color:var(--ochre)}
#royaLibrary .ab-cov img{aspect-ratio:2/3; object-fit:cover; width:100%; display:block;
  border:1px solid rgba(199,148,61,.4); box-shadow:0 6px 14px rgba(0,0,0,.6)}
#royaLibrary .ab-body{display:flex; flex-direction:column; min-width:0}
#royaLibrary .ab-n{font-family:var(--cond); font-weight:600; font-size:.5625rem; letter-spacing:.2em;
  text-transform:uppercase; color:var(--t-pub);}
#royaLibrary .ab-ti{margin:.3rem 0 .35rem; font-family:var(--slab); font-weight:700; font-size:1.125rem;
  line-height:1; letter-spacing:-.012em; text-transform:uppercase; color:var(--gold-lt);}
#royaLibrary .ab-hk{font-family:var(--book); font-weight:400; font-size:.9375rem; line-height:1.3; color:var(--t-copy)}
/* ── All series, as a numbered list ──
   The card grid this replaces had no order in it: three across, all the same
   size, the catalogue's own sequence gone. These are rows — the number is the
   content, the names stack into one column the eye runs down, and the line
   beside each is one sentence so every row is the same size to read.

   One grid, five tracks, declared on the row and on its header so the open
   panel can span all of them. minmax(0,…) on the two text tracks: without it
   a long series line refuses to shrink and pushes the count off the end. */
#royaLibrary .ab-serlist{border-top:1px solid var(--rule-board)}
#royaLibrary .ab-srow{border-bottom:1px solid var(--rule-board)}
#royaLibrary .ab-srow-h{display:grid; width:100%; text-align:left;
  /* 19rem, not 15: THE UNWITNESSED WARS I-V and THE BORROWED SUN CYCLE are
     the two longest names and both broke over two lines at 15, which puts
     their row out of step with every other row in the column. */
  grid-template-columns:2.6rem minmax(7rem,19rem) minmax(0,1fr) auto 1.4rem;
  align-items:center; column-gap:1.1rem; padding:.95rem .4rem; background:none; border:0;
  transition:background-color .16s;}
#royaLibrary .ab-srow-h:hover{background:rgba(199,148,61,.07)}
#royaLibrary .ab-sx{font-family:var(--cond); font-weight:300; font-size:1.375rem;
  line-height:1; color:var(--ochre-muted); font-variant-numeric:tabular-nums;}
#royaLibrary .ab-sn{font-family:var(--slab); font-weight:700; font-size:1.0625rem;
  line-height:1.1; letter-spacing:-.008em; text-transform:uppercase; color:var(--gold-lt);}
/* Up from 1.0625rem: this line is the only description of a series anyone
   reads on that table, and it was set smaller than the page around it. */
#royaLibrary .ab-sd{font-family:var(--book); font-weight:400; font-size:1.25rem;
  line-height:1.35; color:var(--t-copy); min-width:0;}
#royaLibrary .ab-sc{font-family:var(--cond); font-weight:600; font-size:.625rem;
  letter-spacing:.2em; text-transform:uppercase; color:var(--t-pub); white-space:nowrap;}
#royaLibrary .ab-sv{display:grid; place-items:center; color:var(--ochre)}
#royaLibrary .ab-sv svg{width:1.05rem; height:1.05rem; fill:none; stroke:currentColor;
  stroke-width:1.6; transform:rotate(-90deg); transition:transform .18s ease;}
#royaLibrary .ab-srow.is-open .ab-sv svg{transform:rotate(0deg)}
#royaLibrary .ab-srow.is-open .ab-sn{color:var(--ochre)}

/* the panel, in the row's own three tracks: what the series is, what is in
   it, and the way into it */
#royaLibrary .ab-spanel{display:grid;
  grid-template-columns:minmax(0,1.15fr) minmax(0,1fr) auto;
  column-gap:2rem; align-items:start;
  margin:0 .4rem 1.1rem; padding:1.1rem 1.3rem;
  border:1px solid var(--rule-board); background:rgba(11,9,6,.4);}
#royaLibrary .ab-spanel > * + *{border-left:1px solid var(--rule-board); padding-left:2rem}
#royaLibrary .ab-sp-syn{margin:0; font-family:var(--book); font-size:.9375rem;
  line-height:1.55; color:var(--t-copy)}
#royaLibrary .ab-sp-books{margin:0; padding:0; list-style:none}
#royaLibrary .ab-sp-books li + li{margin-top:.42rem}
#royaLibrary .ab-sp-books button{display:flex; gap:.9rem; width:100%; text-align:left;
  background:none; border:0; padding:0; font-family:var(--book); font-size:.9375rem;
  line-height:1.3; color:var(--bone); transition:color .16s;}
#royaLibrary .ab-sp-books button:hover{color:var(--gold-lt)}
#royaLibrary .ab-sp-x{flex:0 0 auto; font-family:var(--cond); font-weight:600; font-size:.6875rem;
  letter-spacing:.14em; color:var(--ochre-muted); font-variant-numeric:tabular-nums;
  padding-top:.18rem;}
#royaLibrary .ab-sp-go{margin:0; align-self:center}
#royaLibrary .ab-sp-go button{background:none; border:0; padding:0; white-space:nowrap;
  font-family:var(--cond); font-weight:600; font-size:.6875rem; letter-spacing:.2em;
  text-transform:uppercase; color:var(--ochre); transition:color .16s;}
#royaLibrary .ab-sp-go button:hover{color:var(--gold-lt)}
#royaLibrary .ab-sp-go span{margin-left:.5rem}
/* The Author's Notes body and the signature beneath it are the one place on
   this page where two LEFT-ALIGNED left edges are meant to line up, and they
   are set at 18px and 11px. Measured in ch they resolve to two different
   pixel widths — both are centred, so the wider one starts further left and
   "— CHEW Z" floated well inside the paragraphs it signs. One measure in rem,
   shared, is what keeps those edges together whatever the two sizes do.
   39rem measures out at 90 characters at 18px — the ceiling noted above,
   checked by counting the glyphs on the longest rendered line rather than
   trusting the ch arithmetic. */
#royaLibrary{--ab-measure:39rem}
#royaLibrary .ab-note--long{max-width:var(--ab-measure, 39rem); text-align:left; margin:0 auto 1.1rem;
  font-size:1.25rem; line-height:1.72}
#royaLibrary .ab-eyebrow{margin:0 0 1.4rem; text-align:center; font-family:var(--cond); font-weight:600;
  font-size:.6875rem; letter-spacing:.3em; text-transform:uppercase; color:var(--ochre);}
/* The signature. It was Jost 600, uppercase, tracked at .24em — the same
   setting as every eyebrow and label on the page, which made the one line the
   author actually signs read as another piece of furniture. Cormorant
   Garamond italic instead: already in the page's font link, cut fine and
   high-contrast, and the only italic here that looks written rather than set.
   No tracking, no uppercase — neither belongs on a hand. */
#royaLibrary .ab-sig{max-width:var(--ab-measure, 39rem); margin:1.9rem auto 0;
  font-family:"Cormorant Garamond","EB Garamond",Georgia,serif; font-weight:500; font-style:italic;
  font-size:1.6rem; letter-spacing:0; text-transform:none; color:var(--gold-lt);}
@media (max-width:74rem){
  /* DEAD, both of them — see the note in the light block at the top. */
  #royaLibrary .ab-recs, #royaLibrary .ab-sers{grid-template-columns:repeat(2,minmax(0,1fr))}
}
/* a note that belongs to the page rather than the operating system: the
   browser's own tooltip is a white box and there is no styling it */
/* A note that belongs to the page rather than the operating system: the
   browser's own tooltip is a white box and there is no styling it.

   It used to be sized `width:max-content` and hung off the middle of its word.
   Where max-content is not honoured the box falls back to shrink-to-fit
   against the space left in its containing block — which, for a word in a
   narrow column, is about sixty pixels, and the note comes out as a tall
   ribbon one word wide. So there is no intrinsic sizing anywhere now. The note
   is anchored to the ROW, spans it with left:0/right:0, and a max-width with
   auto margins centres it. The row is always as wide as the column, so the
   note can neither collapse nor escape it. */
#royaLibrary .ab-terms, #royaLibrary .dial{position:relative}
#royaLibrary .ab-term, #royaLibrary .dial-n{position:static}
#royaLibrary .hint{position:absolute; left:0; right:0; top:calc(100% + .7rem); transform:translateY(.3rem);
  z-index:20; width:auto; max-width:34rem; margin:0 auto; padding:.7rem .9rem;
  background:#14110c; border:1px solid rgba(199,148,61,.55);
  box-shadow:0 14px 28px rgba(0,0,0,.7);
  font-family:var(--book); font-style:normal; font-weight:400; font-size:1rem;
  line-height:1.5; letter-spacing:0; text-transform:none; color:var(--t-copy);
  opacity:0; visibility:hidden; transition:opacity .16s, transform .16s;
  pointer-events:none; text-align:left;}
#royaLibrary .ab-t:hover .hint, #royaLibrary .ab-t:focus-visible .hint, #royaLibrary .ab-t:focus .hint, #royaLibrary .keyed-l:hover .hint, #royaLibrary .keyed-l:focus-visible .hint, #royaLibrary .keyed-l:focus .hint, #royaLibrary .dial-n:hover .hint, #royaLibrary .dial-n:focus-visible .hint, #royaLibrary .dial-n:focus .hint{opacity:1; visibility:visible; transform:translateY(0);}
/* inside the frame there is no room for a 34rem measure */
#royaLibrary .mob .hint, #royaLibrary .sheet .hint{max-width:none; font-size:.9375rem; padding:.6rem .7rem; line-height:1.45}
#royaLibrary .rec .hint{max-width:28rem}
/* A cell is a third of the panel, which is a short measure for a sentence, so
   the note is allowed to run wider than the cell it belongs to — it is a
   floating note, and nothing under it is lost. The last of the three hangs
   from its right edge instead, so it cannot reach past the panel. */
#royaLibrary .keyed .hint{top:calc(100% + .5rem); left:0; right:auto; margin:0;
  width:min(26rem, calc(100vw - 4rem)); max-width:none;}
#royaLibrary .keyed-c:last-child .hint{left:auto; right:0}
/* In the record these three are the last block before the prev/next row, and
   the panel scrolls inside a fixed height — a note hung below them opens into
   the part of the panel that is already off the bottom, and reads as cut in
   half. It opens upward there, over the dials, which are the one thing on the
   panel a reader is not looking at while they are asking what Door means. */
#royaLibrary .rec .keyed .hint{top:auto; bottom:calc(100% + .5rem)}
/* on the phone a cell is already the full width of the sheet, and the block
   sits mid-scroll with room under it */
#royaLibrary .sheet .keyed .hint{left:0; right:0; width:auto}
/* ── About, laid out as the live page lays it out ── */
#royaLibrary .abt{position:relative; z-index:2; padding:2rem 2.2rem 1rem; min-width:0; overflow:hidden}
#royaLibrary .ab-marg{/* three rows climbing the left margin, clear of the statement. The origin is
     the left edge so the turn swings the block up into the gutter rather than
     across the column. */
  /* left is negative now: .abt carries 2.2rem of padding and its own
     overflow:hidden clips at the border box, so the rows can be pushed out
     into that padding without being cut. That plus the smaller size is what
     takes the hand off the statement's first lines. */
  position:absolute; left:-1.7rem; top:5.5rem; z-index:0; pointer-events:none;
  /* Larger and a shade less faded: at 1.375rem and .15 the three rows were
     a smudge rather than a hand.

     The width goes to 15rem, which is more than the type grew. The rows
     carry their own <br> and are not meant to wrap, and at 13rem — the old
     11rem scaled by the same factor as the type — the longest of them filled
     93% of the box. Gulzar arrives from Google with display=swap, so the
     first paint is a fallback whose metrics are not this one's, and 7% of
     headroom is not enough to promise. nowrap was tried here and is wrong:
     .abt clips, and this block is rtl at left:.2rem, so an over-long line
     would be cut off the LEFT edge with nothing on screen to show it. A wrap
     is a visible failure and a clip is a silent one; the box is simply wide
     enough instead. */
  width:12rem;
  font-family:var(--nastaliq); font-size:1.25rem; line-height:2.3;
  text-align:right; color:var(--paper-dust); opacity:.24; filter:blur(.75px);
  transform:rotate(-30deg); transform-origin:left center;
  direction:rtl;}
/* The marginalia only exists where there is a margin for it to climb. Widening
   the statement to 78ch took the gutter from 223px down to 143px at a 1600px
   window, and the three rows started crossing the first lines of type — a
   watermark over the words rather than beside them.

   Smaller type and a negative left have since pulled the rows back to 174px
   from the panel's edge, which clears the statement by 50px at full width and
   by 20 at 1700 — so the gate sits at 1700 rather than the 1800 it needed at
   the larger size. Below that the rows stand down; there is no gutter left to
   put them in. (If they should show at every width, the rail's empty middle is
   the other place on this page with room for them — a different design.) */
@media (max-width:1699px){ #royaLibrary .ab-marg{display:none} }
#royaLibrary .abt > :not(.ab-marg){position:relative; z-index:1}
/* Every direct child of .abt carries z-index:1, so each is its own stacking
   context: the hover note's z-index:20 was confined inside the terms row, and
   the rule below it — a later sibling at the same level — painted on top of it,
   which is why the note looked transparent. Raising the ROW is what puts the
   note in front; raising the note cannot. */
#royaLibrary .abt > .ab-terms{z-index:30}
#royaLibrary .ab-mark{display:inline-flex; align-items:center; gap:.7em;
  font-size:2rem; color:var(--ochre)}
#royaLibrary .ab-orn{width:1.7em; height:.7em; flex:0 0 auto}
/* Set exactly as .ab-gh h3 below sets Noir and Transgressive: the book face,
   weight 500, 2rem, the light gold. Nothing else — no uppercase, no tracking,
   no condensed face. The previous pass matched only the size and kept the
   letter-spaced Jost capitals, which at thirty-two pixels reads as a hoarding
   rather than as a heading; the whole style has to come across, not one
   measurement of it. */
#royaLibrary .ab-mark b{font-family:var(--book); font-weight:500; font-size:2rem;
  letter-spacing:0; text-indent:0; line-height:1.1;
  text-transform:none; color:var(--gold-lt); white-space:nowrap;}
#royaLibrary .ab-group{margin:0 0 2.4rem}
#royaLibrary .ab-gh{border-left:2px solid var(--ochre); padding:.35rem 0 .35rem 1.1rem; margin:0 0 1.2rem}
#royaLibrary .ab-gh h3{margin:0; font-family:var(--book); font-weight:500; font-size:2rem; line-height:1.1; color:var(--gold-lt)}
#royaLibrary .ab-gh p{margin:.2rem 0 0; font-family:var(--book); font-size:1rem; color:var(--dust)}
#royaLibrary .ab-row{position:relative; display:block; width:100%; text-align:left;
  padding:1.4rem 0 1.6rem; border-bottom:1px solid rgba(199,148,61,.24);
  /* not clipped: the scene is meant to run off the side of the card. Hiding the
     overflow cut it square, which is the vertical seam. The section clips it. */
  overflow:visible; isolation:isolate;}
#royaLibrary .ab-row:last-child{border-bottom:0}
/* The live page does not float the painting and wrap the text round it. The
   picture is an absolutely positioned layer BEHIND the whole card — 124% wide,
   running off the right edge, taller than the card so its top and bottom fades
   fall outside — and the words sit on its dim left side, capped at 64% so they
   never reach the bright part. Three masks intersected do that: a fade in from
   the left, a fade at top and bottom, and a radial that keeps the middle. */
#royaLibrary .ab-art{position:absolute; z-index:0; pointer-events:none;
  right:-5rem; top:-9%; height:118%; width:124%;
  /* Cropped four rem in from its own right edge, not hard against it: the
     box is 124% wide and pushed right:-5rem, so anchoring at 100% walks the
     subject off the side of the screen. Every scene on the live page is
     framed this way. */
  background-size:cover; background-position:calc(100% - 4rem) 50%; opacity:.95;
  transition:opacity .4s ease, transform 5s ease;
  -webkit-mask-image:
    linear-gradient(to right, transparent 0, rgba(0,0,0,.22) 14%, rgba(0,0,0,.62) 34%, #000 58%, #000 96%, transparent 100%),
    linear-gradient(to bottom, transparent 0, rgba(0,0,0,.3) 8%, #000 22%, #000 88%, rgba(0,0,0,.3) 96%, transparent 100%),
    radial-gradient(104% 96% at 62% 50%, #000 30%, rgba(0,0,0,.6) 66%, transparent 100%);
  mask-image:
    linear-gradient(to right, transparent 0, rgba(0,0,0,.22) 14%, rgba(0,0,0,.62) 34%, #000 58%, #000 96%, transparent 100%),
    linear-gradient(to bottom, transparent 0, rgba(0,0,0,.3) 8%, #000 22%, #000 88%, rgba(0,0,0,.3) 96%, transparent 100%),
    radial-gradient(104% 96% at 62% 50%, #000 30%, rgba(0,0,0,.6) 66%, transparent 100%);
  -webkit-mask-composite:source-in; mask-composite:intersect;}
#royaLibrary .ab-row:hover .ab-art{opacity:1; transform:scale(1.04)}
/* ── the scene art, zoomed out on the desktop ──
   The base box above is 124% of the row wide and 118% tall — about 6:1 on a
   desktop row. Seven of the nine scenes here are 3:1 (2400x800, plus
   library/art/start-94 at 1100x367), so `cover` had to scale to the WIDTH and
   threw away half the painting's height: every row showed a band across the
   middle of its picture, which is why the faces read as crops rather than as
   scenes.

   At 56% the box comes down to roughly 2.8:1, just inside 3:1, so cover
   scales to the height and a 3:1 scene is all but whole in frame — 92% of it,
   measured, against 49% before. What is still cropped is cropped sideways,
   which keeps the subject: the art spec puts it in the right third with the
   left half in shadow, so the crop and the mask both eat the shadow.

   Two rows are NOT 3:1 and are not fixed by this. assets/start-08 is
   1536x1024 and library/art/start-35 is 1100x733, both 3:2; in a 2.8:1 box
   they still scale to the width, so they go from about a quarter of the
   painting to about a half rather than to the whole of it. The answer for
   those two is a 3:1 re-export of the source, not more CSS — a box narrow
   enough to fit 3:2 would be a third the width of every other row's and
   would read as a mistake.
   right goes from -5rem to 0. .abt clips its overflow, so hanging the box
   five rem past the row threw that much of the picture's right-hand side —
   the side the subject is on — off the edge, and took the mask's own 4%
   right-hand fade with it, ending the painting on a straight vertical cut.
   That cut is most obvious in the light theme, where the scene is a dark
   block on cream. Flush with the row, the fade is inside the clip and the
   picture dissolves on all four sides.

   Scoped to .lib, the desktop page. The phone keeps the full 124%: narrowing
   it there is the documented regression that reduced every scene to a sliver,
   because a phone row is nearly as tall as it is wide. */
#royaLibrary .lib .abt .ab-art{right:0; width:56%; background-position:100% 50%}
#royaLibrary .ab-rowin{position:relative; z-index:1; display:block; min-width:0; max-width:100%}
/* the Persian title, on the books that carry one */
#royaLibrary .ab-fa{margin-left:.55rem; font-family:var(--nast); font-weight:500;
  font-size:.86em; line-height:1; letter-spacing:0; white-space:nowrap;
  color:var(--t-num); opacity:.92;}
#royaLibrary .ab-row .ab-syn{max-width:64%}
#royaLibrary .ab-row .ab-head, #royaLibrary .ab-row .ab-time{position:relative; z-index:1}
#royaLibrary .ab-row::after{content:""; display:block; clear:both}
#royaLibrary .ab-rowin{display:block}
#royaLibrary .ab-head{display:block; margin-bottom:.35rem}
#royaLibrary .ab-head b{font-family:var(--book); font-weight:500; font-size:1.5rem; color:var(--ochre)}
#royaLibrary .ab-dot{margin:0 .4rem; color:var(--ochre); opacity:.7}
#royaLibrary .ab-name{font-family:var(--book); font-weight:500; font-size:1.5rem; color:var(--bone)}
#royaLibrary .ab-gl{margin-left:.5rem; font-family:var(--book); font-style:italic; font-size:1.125rem; color:var(--bone-muted)}
#royaLibrary .ab-time{display:block; margin-bottom:.6rem; font-family:var(--cond); font-weight:600;
  font-size:.5625rem; letter-spacing:.24em; text-transform:uppercase; color:var(--ochre);}
#royaLibrary .ab-syn{margin:0; font-family:var(--book); font-weight:400; font-size:1.125rem; line-height:1.48; color:var(--t-copy)}
/* the words lie on the painting, so they carry the live page's shadows —
   without them the type greys into the brighter passages */
#royaLibrary .ab-row .ab-head b, #royaLibrary .ab-row .ab-name, #royaLibrary .ab-row .ab-fa{text-shadow:0 1px 14px rgba(5,4,3,.9)}
#royaLibrary .ab-row .ab-time{text-shadow:0 1px 10px rgba(5,4,3,.9)}
#royaLibrary .ab-row .ab-gl{text-shadow:0 1px 3px rgba(5,4,3,.98), 0 1px 14px rgba(5,4,3,.95), 0 0 26px rgba(5,4,3,.9)}
#royaLibrary .ab-row .ab-syn{text-shadow:0 1px 14px rgba(5,4,3,.95), 0 0 24px rgba(5,4,3,.8)}
#royaLibrary .ab-row:hover .ab-name{color:var(--gold-lt)}
#royaLibrary .ab-feat{margin:0 0 2.6rem; text-align:center}
#royaLibrary .ab-feat-t{margin:0 0 1.1rem; font-family:var(--book); font-weight:500; font-size:2rem; color:var(--gold-lt)}
#royaLibrary .ab-feat-t button{font:inherit; color:inherit; letter-spacing:inherit; padding:0; text-align:inherit}
#royaLibrary .ab-feat-t button:hover{color:var(--bone)}
#royaLibrary .ab-feat-t span{font-family:var(--nast); font-size:.86em; margin-left:.5rem}
#royaLibrary .ab-feat-art{display:block; margin:0 0 1.2rem}
#royaLibrary .ab-feat-art img{width:100%; display:block;
  -webkit-mask-image:linear-gradient(#000 60%, transparent 100%);
  mask-image:linear-gradient(#000 60%, transparent 100%);}
#royaLibrary .ab-feat-syn{margin:0 auto 1rem; max-width:82ch; text-align:left;
  font-family:var(--book); font-weight:400; font-size:1.125rem; line-height:1.48; color:var(--t-copy);}
/* The synopsis fills its frame instead of sitting as a narrow column with
   270px of air on either side. One column, the full width — a long measure,
   carried by larger type and more leading rather than by splitting the
   text in two. */
#royaLibrary .ab-feat-copy{margin:0 0 1.4rem; max-width:none; text-align:left}
#royaLibrary .ab-feat-p{margin:0 0 1.1rem; font-family:var(--book); font-weight:400; font-size:1.25rem; line-height:1.6; color:var(--t-copy)}
#royaLibrary .ab-feat-note{margin-top:1.3rem; font-style:italic; opacity:.72}
/* The scene behind a featured series is a PICTURE, and a picture painted onto
   the element itself stops at the element's edge — a rectangle of night with
   four hard sides sitting on a page whose own ground is lighter and textured.
   Under The Unheard House that edge fell a few lines below the dedication, so
   the foot of the text read as printed on a separate black card.
   The scene moves to a layer of its own that reaches past the block on every
   side and is masked at those four edges, so it has no edge to see: the
   painting and the veil that dims it fade out together into whatever the page
   is carrying there. The words sit above it, unchanged. */
/* ══════════════ the two series plates ══════════════
   Each series was drawn as a finished plate and each is set a different way,
   because the pictures are different objects.

   "split"  — The Unsaid. A tall crop of the wide plate stands on the left,
              holding the face and the crowd; the words keep the right. The
              plate's own title sits out past two-thirds of the picture and is
              cropped away, so the page sets the title here.
   "spread" — The Delgosh\u0101. A photograph of an open book. The words are laid
              into the left-hand page and the theatre keeps the right, so the
              plate is never cropped and its own title serves.

   Below the widths each needs, both fold: the picture becomes a banner and the
   words fall underneath it at real sizes. A spread at phone width would set
   its body at about six pixels. */
#royaLibrary .ab-feat--split, #royaLibrary .ab-feat--spread{margin:0 -.8rem 1.6rem;
  text-align:left}
#royaLibrary .ab-feat--split *, #royaLibrary .ab-feat--spread *{text-align:inherit}
#royaLibrary .pl{position:relative}
#royaLibrary .pl-art{background-image:var(--plate); background-size:cover;
  background-repeat:no-repeat; border:1px solid rgba(199,148,61,.4)}

/* ── the type, at the sizes the folded arrangement uses ── */
#royaLibrary .pl-t{margin:0; font-family:var(--book); font-weight:400; line-height:1.05;
  color:var(--gold-lt); display:flex; flex-direction:column; gap:.2rem;
  padding-bottom:.9rem; position:relative}
#royaLibrary .pl-t::after{content:""; position:absolute; left:0; bottom:0;
  width:38%; max-width:11rem; height:1px; background:rgba(199,148,61,.5)}
#royaLibrary .pl-t .ft-en{font-size:1.9rem; letter-spacing:.02em; text-transform:uppercase}
#royaLibrary .pl-t .ft-fa{font-family:var(--nast); font-weight:500; font-size:1rem;
  letter-spacing:0; color:var(--gold-word)}
#royaLibrary .pl-q{margin:0; font-family:var(--book); font-weight:400; font-style:italic;
  font-size:1.5rem; line-height:1.4; color:var(--bone); text-wrap:balance}
#royaLibrary .pl-lede{margin:0; font-family:var(--book); font-size:1.32rem; line-height:1.45;
  color:var(--t-copy)}
#royaLibrary .pl-body, #royaLibrary .pl-cols{display:flex; flex-direction:column; gap:.7rem}
#royaLibrary .pl-body p, #royaLibrary .pl-p{margin:0; font-family:var(--book); font-weight:400;
  font-size:1.1875rem; line-height:1.6; color:var(--t-copy)}
#royaLibrary .pl-cols .pl-col{display:flex; flex-direction:column; gap:.7rem}
#royaLibrary .pl-cap{margin:0; font-family:var(--book); font-style:italic; font-size:1.0625rem;
  color:var(--t-tag)}
#royaLibrary .ft-eyebrow{margin:0; font-family:var(--cond); font-weight:600; font-size:.625rem;
  letter-spacing:.3em; text-transform:uppercase; color:var(--t-pub);}
/* the folios belong to the book, so they show only when the book is shown */
#royaLibrary .pl-folio{display:none; margin:0; font-family:var(--book); color:var(--t-tag)}
#royaLibrary .ft-cta{display:inline-flex; align-items:center; gap:.85rem;
  padding:.7rem 1.4rem; background:rgba(99,29,25,.45);
  border:1px solid rgba(199,148,61,.55); color:var(--gold-lt);
  font-family:var(--cond); font-weight:600; font-size:.6875rem; letter-spacing:.24em;
  text-transform:uppercase; transition:background-color .18s, border-color .18s, color .18s;}
#royaLibrary .ft-cta:hover{background:var(--oxblood); border-color:var(--gold-lt); color:#f2e7cd}
#royaLibrary .ft-arrow{font-size:1rem; line-height:1}

/* ── folded: banner, then the words ── */
#royaLibrary .pl-words, #royaLibrary .pl-foot{display:flex; flex-direction:column;
  align-items:flex-start; gap:1rem; padding:1.4rem 1.3rem 0}
#royaLibrary .pl-foot{padding-top:1.2rem; padding-bottom:1.4rem}
#royaLibrary .ab-feat--split .pl, #royaLibrary .ab-feat--spread .pl{
  border:1px solid rgba(199,148,61,.4); background:rgba(9,8,6,.5)}
#royaLibrary .pl-art{border:0; border-bottom:1px solid rgba(199,148,61,.35)}

/* ── The Unsaid: the plate is the panel ──
   Two plates ship for this series, because one picture cannot be both shapes.
   The handset gets the upright one: it is laid along the top at full width,
   its own title set into it, and the words begin under that title on the flat
   field the picture ends in — the panel's ground is that same near-black, so
   there is no seam where the picture stops. The page gets the wide one whole,
   with the words standing in the dark field to the right of the crowd, under
   the red line. Neither is cropped; each is simply shown at its own shape.

   Both are faded off at all four edges so the picture sits on the page rather
   than being pasted onto it. */
#royaLibrary .ab-feat--split .pl{position:relative; overflow:hidden;
  container-type:inline-size; border:0; background:#0d0b09;}
/* On a handset the title stands at the top, over the picture's own ground, the
   way the Delgoshā's does — the upright plate is cut above the title it used
   to carry, so the page sets it here and the picture follows underneath. */
/* The title stands ON the picture's top rather than above it, set far enough
   down to clear the edge, with a dark wash behind it that fades out into the
   sky so the gold has something to sit on and the picture is not cut by a
   hard band. */
/* Handset only — .pl-t is display:none from 1150 up, where the plate carries
   its own title. Up from the picture: less above the words, more below them,
   so the Persian is not sitting on the artwork. */
#royaLibrary .ab-feat--split .pl-t{display:flex; position:absolute; z-index:2;
  left:0; right:0; top:0; align-items:center; text-align:center;
  /* Was 1.15rem over and 3.4rem under. The title sat down on the picture; it
     now starts higher and the wash below it runs further, so the Persian has
     air between it and the artwork instead of resting on it. */
  padding:.6rem 1.4rem 4.1rem; gap:.3rem;
  background:linear-gradient(to bottom,
    rgba(7,6,5,.94) 0%, rgba(7,6,5,.9) 46%, rgba(7,6,5,.62) 76%,
    rgba(7,6,5,.22) 92%, rgba(7,6,5,0) 100%);}
#royaLibrary .ab-feat--split .pl-t::after{display:none}
#royaLibrary .ab-feat--split .pl-t .ft-en{font-size:2rem; letter-spacing:.05em}
#royaLibrary .ab-feat--split .pl-t .ft-fa{font-size:1.05rem}
#royaLibrary .ab-feat--split .pl-art{display:block; aspect-ratio:941/1056;
  background:var(--plate-tall, var(--plate)) top center/cover no-repeat; border:0}
#royaLibrary .ab-feat--split .pl,
#royaLibrary .ab-feat--spread .pl-art{
  -webkit-mask-image:
    linear-gradient(to right, transparent 0, #000 2.6rem, #000 calc(100% - 2.6rem), transparent 100%),
    linear-gradient(to bottom, transparent 0, #000 2.2rem, #000 calc(100% - 2.2rem), transparent 100%);
  mask-image:
    linear-gradient(to right, transparent 0, #000 2.6rem, #000 calc(100% - 2.6rem), transparent 100%),
    linear-gradient(to bottom, transparent 0, #000 2.2rem, #000 calc(100% - 2.2rem), transparent 100%);
  -webkit-mask-composite:source-in; mask-composite:intersect;}
#royaLibrary .ab-feat--split .pl-words{padding:1.6rem 1.5rem 1rem; gap:1rem}
#royaLibrary .pl-way{display:flex; flex-direction:column; align-items:flex-start;
  gap:1rem; padding:0 1.5rem 2rem}

/* the book is never cropped: its title is on the page the words would take.
   It is faded off at the edges so it sits on the page rather than on a slab. */
#royaLibrary .ab-feat--spread .pl-art{aspect-ratio:var(--ratio);
  background-position:center; background-size:cover; border:0}

/* ── the Delgoshā on a handset ──
   The spread cannot be set into at this width — its title is on the same page
   the words want, and the whole book at 445px would put the body at about five
   pixels. So the handset gets the upright plate instead: the theatre stands
   under its own title and the words fall on the flat field the picture ends
   in. The panel's ground is that same field colour, so nothing seams where the
   picture stops, and the whole thing is faded off at its four edges. */
@media (max-width:1149.98px){
  #royaLibrary .ab-feat--spread .pl{position:relative; overflow:hidden; border:0;
    /* the plate is trimmed to end in its own flat field, and the panel's
       ground is that field's colour, so the words carry on with no seam */
    background:#131109 var(--plate-tall) top center/100% auto no-repeat;
    padding-top:143%;
    -webkit-mask-image:
      linear-gradient(to right, transparent 0, #000 2.2rem, #000 calc(100% - 2.2rem), transparent 100%),
      linear-gradient(to bottom, transparent 0, #000 1.8rem, #000 calc(100% - 1.8rem), transparent 100%);
    mask-image:
      linear-gradient(to right, transparent 0, #000 2.2rem, #000 calc(100% - 2.2rem), transparent 100%),
      linear-gradient(to bottom, transparent 0, #000 1.8rem, #000 calc(100% - 1.8rem), transparent 100%);
    -webkit-mask-composite:source-in; mask-composite:intersect;}
  #royaLibrary .ab-feat--spread .pl-art{display:none}
  /* the plate sets the title */
  #royaLibrary .ab-feat--spread .pl-words{padding:0 1.9rem; gap:1rem}
  #royaLibrary .ab-feat--spread .pl-foot{padding:1.2rem 1.9rem 2.2rem; gap:1rem;
    align-items:flex-start}
  #royaLibrary .ab-feat--spread .pl-foot .pl-folio{display:block; width:100%;
    text-align:center; font-size:.8125rem; opacity:.8}
}
/* the page numbers travel with the words when the book is folded */
#royaLibrary .ab-feat--spread .pl-foot .pl-folio{display:block}
#royaLibrary .ab-feat--spread .pl-folio--l{display:none}
#royaLibrary .ab-feat--spread .pl-t{position:absolute; width:1px; height:1px; margin:-1px;
  padding:0; overflow:hidden; clip-path:inset(50%); white-space:nowrap; border:0}
/* folded, the body reads as one column and the rules do the separating */
#royaLibrary .ab-feat--split .pl-body, #royaLibrary .ab-feat--split .ft-eyebrow{
  width:100%; padding-top:1rem; border-top:1px solid rgba(199,148,61,.28)}
/* the rule under the quote takes the thread's colour, as the design has it */
#royaLibrary .ab-feat--split .pl-body{border-top-color:rgba(140,42,34,.55)}
#royaLibrary .ab-feat--split .pl-q{width:100%}
#royaLibrary .ab-feat--spread .pl-q{width:100%; padding:.15rem 0 0; color:var(--gold-lt)}

/* ══ 1150px and up: the picture beside the words ══
   The panel runs about 400px narrower than the window, so this is where the
   two columns stop being too narrow to set. */
/* 1300, not 1150: below it the panel is under 900px and type measured in
   shares of that width falls under twelve pixels. There the portrait card
   above serves instead, at real reading sizes. */
/* ══ 1150 and up: the wide plate, as a band over the words ══
   The upright plate is a handset's shape; a page that wide would make it
   enormous. Here the wide plate runs the full width at its own 2.5:1 and the
   words set underneath it at real reading sizes, its own title in the band. */
@media (min-width:1150px){
  /* The wide plate runs the full width and its right half is a flat dark field
     with nothing in it. The synopsis stands there, inside the picture, which is
     what that field is for — and the label and the way in fall underneath,
     where there is room. The field cannot hold all four at twenty pixels;
     taking those two out is exactly what makes the rest fit. */
  #royaLibrary .ab-feat--split .pl{padding-top:40%; position:relative;
    background:#0d0b09 var(--plate) top center/100% auto no-repeat;}
  /* the wide plate carries the title itself */
  #royaLibrary .ab-feat--split .pl-t{display:none}
  #royaLibrary .ab-feat--split .pl-art{display:none}
  /* The words are pulled up into the picture rather than pinned inside it: the
     plate's right half and the panel's own ground are the same near-black, so
     a block that begins in the field and runs past the picture's foot reads as
     one continuous dark column. Pinning it would mean the text had to fit the
     field exactly, and at these widths it does not. The pull is measured from
     the picture's foot — the plate sets at 40% of the panel's width, and the
     words begin about three tenths of the way down it. */
  /* Everything — the line, the synopsis, the label and the way in — stands
     inside the picture here, which means the type cannot be a fixed size: the
     field is 40% of the panel's width and about two thirds of that in usable
     height, so what fits is a share of the width, not a number of pixels.
     1.26cqw is the size at which the whole block lands just inside the foot of
     the picture; the clamp stops it going over the 20px the rest of the page
     uses on a very wide screen, or under 13px on a narrow one. */
  /* 1150 to 1440: the picture's field cannot hold the whole block at a size
     anyone would read — it would have to fall under thirteen pixels — so here
     the words still sit under the picture, at the page's own size. */
  #royaLibrary .ab-feat--split .pl-words{padding:1.8rem 2rem .8rem; gap:1.15rem}
  #royaLibrary .ab-feat--split .pl-way{padding:0 2rem 2.2rem; gap:1rem}
  #royaLibrary .ab-feat--split .pl-q{font-size:1.5rem}
  /* Up from 1.4rem. Below 1440 the words stand under the picture rather than
     inside it, so nothing here has to be kept clear of the plate's foot. */
  #royaLibrary .ab-feat--split .pl-body p{font-size:1.62rem; line-height:1.58}
}

/* ══ 1440 to 1900: the whole block stands inside the picture ══
   Everything — the line, the synopsis, the label and the way in — is in the
   plate's own dark field, so the type cannot be a fixed size: the field is 40%
   of the panel's width and about two thirds of that in usable height, so what
   fits is a share of the width, not a number of pixels. 1.26cqw is the size at
   which the block lands just inside the foot of the picture; the clamp stops
   it going over the 20px the rest of the page uses on a wide screen. */
@media (min-width:1440px){
  /* pulled up further than before: the type below is larger, and the room for
     it has to come from somewhere inside the picture's own dark field */
  /* Back to 31.5% from 34%. A percentage margin resolves against WIDTH, so the
     pull puts the first line at (40 - pull)% of the panel's width from its top:
     34% put it at 6%, and the plate's painted title ends at 7.3%, so the words
     were landing on the title. 31.5% sets them at 8.5%, clear below it.
     The room the larger type needed came from lifting the title in the plate
     instead — see -wide-5 in roya-library.js. */
  #royaLibrary .ab-feat--split .pl-words{margin:-31.5% 3.5% 0 47.5%;
    padding:0; gap:.8cqw}
  #royaLibrary .ab-feat--split .pl-way{margin:.85cqw 3.5% 0 47.5%;
    padding:0 0 2rem; gap:.75cqw}
  #royaLibrary .ab-feat--split .pl-q{font-size:clamp(1rem, 1.62cqw, 1.6rem);
    line-height:1.42}
  /* Up from 1.5cqw / 1.5rem. The room came from the quote line above, which is
     gone: at a 1600 window the block was already finishing 5px BELOW the foot
     of the picture, so there was nothing spare to grow into until it went.
     Every width from 1440 up is measured — the block has to end inside the
     plate, which is painted at 40% of the panel's width. */
  #royaLibrary .ab-feat--split .pl-body p{font-size:clamp(1.02rem, 1.66cqw, 1.8rem);
    line-height:1.46}
  #royaLibrary .ab-feat--split .pl-body{padding-top:.9cqw}
  #royaLibrary .ab-feat--split .ft-eyebrow{padding-top:.9cqw}
}

/* ══ 1500 and up: the words stand in the plate's own field ══
   The red line crosses the plate at about a quarter of its height and the
   title sits above it at the right, so the words start at a third of the way
   down and keep the dark field beside the crowd. Below 1500 that field is
   under 1100px and the body would fall under twelve pixels. */
/* 1700, not 1500: the field beside the crowd is only about half the plate's
   width, so below this the banded arrangement above sets the synopsis larger
   than the plate ever could. */
@media (min-width:1900px){
  #royaLibrary .ab-feat--split .pl{aspect-ratio:var(--ratio); padding-top:0;
    background:var(--plate) center center/cover no-repeat;}
  /* margin:0 — the banded arrangement above pulls these two up into the
     picture with a negative margin, and this block shares its media query's
     lower bound, so the pull has to be undone here or it shifts the pinned
     boxes as well */
  #royaLibrary .ab-feat--split .pl-words{position:absolute; z-index:1;
    left:43.5%; right:2.5%; top:24%; margin:0;
    padding:0; gap:.94cqw; justify-content:flex-start}
  /* on the page the way in keeps the foot of the field */
  #royaLibrary .ab-feat--split .pl-way{position:absolute; z-index:1;
    left:43.5%; right:2.5%; bottom:4%; margin:0; padding:0; gap:1.1cqw}
  /* This band, not the clamp above, is what a wide screen actually gets: it
     comes later and carries a flat size, so raising the clamp alone changed
     nothing over 1900. The ceiling here is the button, pinned at 4% from the
     foot — the words have to stop above it inside the picture's dark field. */
  #royaLibrary .ab-feat--split .pl-q{font-size:1.55rem; line-height:1.45}
  /* 1.4375rem -> 1.75rem. This is the size a wide screen was actually being
     served, and it had not moved: the quote line going is what made the room,
     and the words still have to stop above the button pinned at 4%. */
  #royaLibrary .ab-feat--split .pl-body p{font-size:1.68rem; line-height:1.52}
  #royaLibrary .ab-feat--split .ft-eyebrow{font-size:max(.625rem, .82cqw)}
  #royaLibrary .ab-feat--split .ft-cta{padding:.8cqw 1.7cqw;
    font-size:max(.625rem, .75cqw); gap:1cqw}
  #royaLibrary .ab-feat--split .ft-arrow{font-size:max(.8rem, 1.1cqw)}
}

/* ══ 1150 to 1440: the theatre beside the words ══
   The book is too wide to set into at these widths and too empty to show
   whole — the left-hand page is bare, waiting for the type that only fits
   above 1440. So between the two the right-hand page is taken on its own and
   the panel is built the way The Unsaid's is, with the page setting the title
   the left-hand page would otherwise have carried. */
@media (min-width:1150px) and (max-width:1899.98px){
  #royaLibrary .ab-feat--spread .pl{display:grid; grid-template-columns:46% 1fr;
    grid-template-areas:"art words" "art foot"; align-items:start;
    background:linear-gradient(105deg, rgba(9,8,6,.62), rgba(14,11,8,.5))}
  #royaLibrary .ab-feat--spread .pl-art{grid-area:art; align-self:stretch;
    /* the words set this column's height, so the window into the plate can be
       anything from square to tall; 88% keeps the stage near its middle at
       either end rather than sliding off the right-hand edge */
    aspect-ratio:auto; min-height:26rem; background-position:88% center;
    border:0; border-right:1px solid rgba(199,148,61,.35)}
  #royaLibrary .ab-feat--spread .pl-words{grid-area:words; padding:2.3rem 2.4rem 1.1rem;
    gap:1.15rem}
  #royaLibrary .ab-feat--spread .pl-foot{grid-area:foot; align-items:flex-start;
    padding:0 2.4rem 2.4rem; gap:1.1rem}
  /* the title the left-hand page is carrying out of frame */
  /* The gap is the section default of .2rem elsewhere, which sets the Persian
     hard under the baseline of the Latin — at this size the two read as one
     crowded block rather than a title and its name. .62rem is a little over
     half the Persian's own size, which is the space a second line of a
     masthead wants; the English came down from 2.35rem to leave the pair
     sitting inside the same measure it had before. */
  #royaLibrary .ab-feat--spread .pl-t{position:static; width:auto; height:auto; margin:0;
    padding-bottom:.9rem; overflow:visible; clip-path:none; white-space:normal;
    gap:.62rem}
  #royaLibrary .ab-feat--spread .pl-t .ft-en{font-size:2rem}
  #royaLibrary .ab-feat--spread .pl-t .ft-fa{font-size:1.06rem}
  #royaLibrary .ab-feat--spread .pl-lede{font-size:1.4rem; color:var(--bone)}
  #royaLibrary .ab-feat--spread .pl-p{font-size:1.25rem; line-height:1.6}
  #royaLibrary .ab-feat--spread .pl-q{font-size:1.35rem; width:100%;
    padding:1.05rem 0; border-top:1px solid rgba(199,148,61,.45);
    border-bottom:1px solid rgba(199,148,61,.45); color:var(--gold-lt)}
  #royaLibrary .ab-feat--spread .pl-cap{width:100%; padding-top:1.1rem}
}

/* NOTE for anyone tuning the sizes below, including future me: this page is
   set in EB Garamond, which is loaded from Google Fonts by index.html. A
   sandbox that cannot reach Google Fonts falls back to Georgia, whose x-height
   is far larger — the same number of pixels then looks bigger and fills more
   of the page. Sizes tuned against that fallback come out too small on the
   live site. Always render with the real face before trusting a measurement. */
/* ══ 1900px and up: the words go onto the page ══
   The threshold is the body type, not the picture. Every size in here is a
   share of the book's own width, and the book is about 400px narrower than the
   window: at 1440 that puts the synopsis at 15px, where the banded
   arrangement above sets the same words at 20. The book page only earns its
   place once the window is wide enough to set it properly. */
@media (min-width:1900px){
  #royaLibrary .ab-feat--spread .pl{
    container-type:inline-size; border:0; background:none;
    aspect-ratio:var(--ratio); position:relative;}
  /* the insets, not the folded rules, give this box its shape here */
  #royaLibrary .ab-feat--spread .pl-art{position:absolute; inset:0; aspect-ratio:auto;
    background-position:center; border:1px solid rgba(199,148,61,.35)}
  #royaLibrary .ab-feat--spread .pl-words,
  #royaLibrary .ab-feat--spread .pl-foot{position:absolute; padding:0; gap:0}
  /* The synopsis is set at the size the Unheard House section uses — 1.25rem,
     the same as .ab-feat-p — so the three series read alike wherever they sit
     on the page. It does not scale with the book: a reader should not get a
     different size for the same prose because the window is wider. Only the
     furniture around it is still measured in shares of the book. */
  #royaLibrary .ab-feat--spread .pl-p{font-size:1.25rem; line-height:1.6}
  #royaLibrary .ab-feat--spread .pl-q{font-size:1.35rem; line-height:1.5}
  #royaLibrary .ab-feat--spread .pl-lede{font-size:1.4rem; line-height:1.45}
  #royaLibrary .ab-feat--spread .pl-cap{font-size:1.3cqw}
  #royaLibrary .ab-feat--spread .ft-cta{padding:.9cqw 1.9cqw; font-size:.98cqw; gap:1cqw}
  #royaLibrary .ab-feat--spread .ft-arrow{font-size:1.2cqw}

  /* the left page, then the line and the way in under the theatre */
  #royaLibrary .ab-feat--spread .pl-words{left:4.0%; width:44.0%; top:18.2%; bottom:5.8%;
    display:flex; gap:1.4cqw}
  #royaLibrary .ab-feat--spread .pl-lede{text-align:center; padding-bottom:.4cqw}
  #royaLibrary .ab-feat--spread .pl-cols{flex-direction:row; gap:2.2cqw; flex:1 1 auto;
    min-height:0}
  #royaLibrary .ab-feat--spread .pl-col{flex:1 1 0; min-width:0; gap:1cqw}
  #royaLibrary .ab-feat--spread .pl-col + .pl-col{padding-left:0}
  /* no rules around it: the line the series is built on simply follows the
     paragraph it belongs to, in the colour that marks it */
  #royaLibrary .ab-feat--spread .pl-q{padding:.25cqw 0 0; border:0; color:var(--gold-lt)}
  #royaLibrary .ab-feat--spread .pl-foot{left:53%; right:5%; bottom:11.5%;
    align-items:center; gap:1.1cqw; text-align:center}
  #royaLibrary .ab-feat--spread .pl-cap{width:100%; padding-bottom:1.1cqw}
  /* the page numbers, and the rule each one sits under */
  #royaLibrary .ab-feat--spread .pl-folio{display:block; position:absolute; bottom:5.2%;
    font-size:.95cqw; letter-spacing:.06em; text-align:center; padding-top:.9cqw;
    border-top:1px solid rgba(199,148,61,.26)}
  #royaLibrary .ab-feat--spread .pl-folio--l{left:4.0%; width:44.0%}
  #royaLibrary .ab-feat--spread .pl-folio--r{left:53%; right:5%}
}


/* ══════════ The Delgoshā: the book, and the words beside it ══════════
   The series is shown as the object itself — the theatre printed on a worn
   board cover — rather than as a picture with type standing on it. That
   settles the two problems the wide plate never solved: the title has a place
   the painter actually left for it (the dark band at the head of the picture),
   and the synopsis is no longer competing with the painting for the same
   ground.

   The panel's own ground is that same painting thrown far out of focus and
   taken down to about half its light. It is a 2KB image doing what a flat
   black cannot: the cover stands in light of its own colour, and the edges of
   the panel dissolve rather than stop.

   Two arrangements only, and they are the same parts turned through ninety
   degrees: on a page the cover keeps the left and the words take the right; on
   a handset the cover leads and the words fall underneath. */
/* No ground of its own. The panel used to lay the painting down behind the
   board, thrown out of focus and dimmed — and a dimmed rectangle on a page
   that already has a texture of its own is a rectangle, however softly its
   edges are faded. The board carries the picture; the page carries the ground;
   the two do not need a third thing between them. */
#royaLibrary .ab-feat--stage .pl{position:relative; border:0; background:none;
  container-type:inline-size;}
#royaLibrary .ab-feat--stage .pl-haze{display:none}
#royaLibrary .ab-feat--stage .pl-stack{position:relative; z-index:1;
  display:flex; align-items:center;}

/* ── the cover ──
   Board, not paper: a hair of radius at the corners, a spine shadow down the
   left edge and a lit edge down the right, so it reads as a thing with a
   thickness rather than an image in a box. */
#royaLibrary .ab-feat--stage .pl-cover{position:relative; flex:0 0 auto;
  aspect-ratio:var(--ratio); container-type:inline-size;
  background:#0c0a08 var(--plate) center center/cover no-repeat;
  border-radius:2px 4px 4px 2px;
  box-shadow:
    inset 9px 0 16px -10px rgba(0,0,0,.85),
    inset -2px 0 0 rgba(233,211,162,.14),
    0 18px 40px -16px rgba(0,0,0,.78),
    0 3px 10px -4px rgba(0,0,0,.6);}
/* The board is bare: no title, no strapline, no wash to hold either. Every
   line that was printed across the picture has moved off it, and the picture
   is the better for it \u2014 it was painted to be looked at, not written on. */
/* ── the words ── */
#royaLibrary .ab-feat--stage .pl-side{display:flex; flex-direction:column;
  min-width:0;}
#royaLibrary .ab-feat--stage .pl-t{display:flex; flex-direction:column;
  padding:0; margin:0; gap:.3rem;}
#royaLibrary .ab-feat--stage .pl-t::after{display:none}
#royaLibrary .ab-feat--stage .pl-words{padding:0; margin:0; align-items:inherit;}
#royaLibrary .ab-feat--stage .pl-way{padding:0; margin:0; align-items:inherit;}
/* the line the series is built on. It is the one italic on the panel and it
   sits between two hairlines, which is the only furniture here — everything
   else is spacing. */
#royaLibrary .ab-feat--stage .pl-q{width:100%; margin:0; font-style:italic;
  color:#efdcb4; line-height:1.45; position:relative;}
#royaLibrary .ab-feat--stage .pl-body{width:100%; gap:.85rem}
#royaLibrary .ab-feat--stage .pl-body p{color:#d8ccb4}
#royaLibrary .ab-feat--stage .ft-cta{white-space:nowrap}
#royaLibrary .ab-feat--stage .pl-q::before,
#royaLibrary .ab-feat--stage .pl-q::after{content:""; position:absolute;
  left:0; right:0; height:1px;}
#royaLibrary .ab-feat--stage .pl-q::before{top:0}
#royaLibrary .ab-feat--stage .pl-q::after{bottom:0}

/* ── a page: the cover keeps the left, the words take the right ──
   1150, which is where the rest of this section changes too. The pair needs
   the board at its floor (248px) plus about forty characters beside it, and
   below 1150 the panel cannot give both: at 1024 the column came out at 254px,
   which wrapped the heading, wrapped the way in, and left the board sitting in
   a half-empty panel. Under that width the handset's stack is simply the
   better page. */
@media (min-width:1150px){
  /* the padding lives on the stack, not on .pl: an element cannot query its
     own container, and .pl is the container — cqw written here would look past
     it to whatever is further up the page. */
  #royaLibrary .ab-feat--stage .pl-stack{
    padding:clamp(2.6rem, 4cqw, 4.6rem) clamp(2rem, 4cqw, 4.4rem);
    gap:clamp(2.2rem, 5cqw, 5.6rem);
    align-items:center; justify-content:flex-start;}
  #royaLibrary .ab-feat--stage .pl-shelf{flex:0 0 auto; display:flex; align-items:stretch}
  /* 30% of the panel, floored so the board never falls under a size at which
     its own title stops being type and starts being texture */
  #royaLibrary .ab-feat--stage .pl-cover{width:clamp(15.5rem, 33cqw, 26.5rem)}
  /* the board carries this line at its own foot here, so the column does not
     repeat it; on a handset it is the other way round */
  #royaLibrary .ab-feat--stage .ft-eyebrow{display:none}
  #royaLibrary .ab-feat--stage .pl-side{flex:1 1 auto; gap:1.15rem;
    align-items:flex-start; text-align:left;}
  #royaLibrary .ab-feat--stage .pl-t .ft-en{font-size:clamp(1.85rem, 3.1cqw, 3.15rem);
    letter-spacing:.055em; line-height:1.05}
  #royaLibrary .ab-feat--stage .pl-t .ft-fa{font-size:clamp(1.15rem, 1.6cqw, 1.62rem)}
  #royaLibrary .ab-feat--stage .pl-words{gap:1.3rem}
  /* Up from 1.42cqw. The old sizes were set when the cqw floor did most of the
     work, and at a 1600 window the synopsis was landing at 15.7px — correct
     arithmetic, too small to read at arm's length. The growth now comes from
     the cqw term, so a wider window gives bigger type instead of more air. */
  /* max-width gone, both here and on the body below. 60ch and 64ch froze the
     column at 712px while the side it sits in runs to 879px at a 1920 window
     and 1088px at 2200 — the empty third of the panel was the cap, not the
     layout. Sizes up with it: the board beside this is 26.5rem of cover, and
     the words were being set smaller than the page they stand on. */
  /* Up again, and the ceiling with it. The cqw term was already past 2rem at
     a 1738px panel, so the CAP was what held the type down, not the arithmetic:
     the column runs 1088px at that width and was being set at 32px. */
  #royaLibrary .ab-feat--stage .pl-q{font-size:clamp(1.4rem, 2.5cqw, 2.4rem);
    padding:1.25rem 0; max-width:none;}
  #royaLibrary .ab-feat--stage .pl-q::before,
  #royaLibrary .ab-feat--stage .pl-q::after{
    background:linear-gradient(to right, rgba(199,148,61,.5) 0%, rgba(199,148,61,.24) 46%, transparent 100%);}
  #royaLibrary .ab-feat--stage .pl-body p{font-size:clamp(1.25rem, 2.1cqw, 2.05rem);
    line-height:1.58; max-width:none;}
  #royaLibrary .ab-feat--stage .pl-way{margin-top:.45rem}
}

/* ── a handset, and every page too narrow to set the pair side by side ──
   The board is shown the way a book is shown on a table: about half the width,
   with real margin on either side of it, and the series' line standing in that
   margin a word to a line. It is the margin that makes this read as a book
   rather than as a banner — at two thirds of the width, which is where this
   started, the board touches its own rails and the panel has no air in it.

   Measured off the design: board 52%, rails about an eighth each, and the rest
   is the space between them.

   The rails are ordinary horizontal type in a column too narrow for their own
   words, not rotated type. That is what gives the stacked, one-word-a-line
   setting, and it lets the browser hyphenate UNDER-GROUND where a rotated line
   could only overflow. */
@media (max-width:1149.98px){
  #royaLibrary .ab-feat--stage .pl-stack{padding:2.6rem 1.1rem 2.8rem;
    flex-direction:column; gap:1.9rem; align-items:stretch;}
  #royaLibrary .ab-feat--stage .pl-shelf{display:flex; align-items:center;
    justify-content:center;}
  #royaLibrary .ab-feat--stage .pl-cover{flex:0 0 auto; width:62%}
  #royaLibrary .ab-feat--stage .pl-side{gap:1.2rem; align-items:center;
    text-align:center;}
  #royaLibrary .ab-feat--stage .pl-t{align-items:center; gap:.15rem}
  #royaLibrary .ab-feat--stage .pl-t .ft-en{font-size:clamp(1.7rem, 8.2cqw, 2.5rem);
    letter-spacing:.055em; line-height:1.08}
  #royaLibrary .ab-feat--stage .pl-t .ft-fa{font-size:clamp(1.1rem, 5cqw, 1.55rem)}
  #royaLibrary .ab-feat--stage .pl-words{gap:1.25rem; align-items:center}
  /* one short rule, centred, between the name and the line — the design has no
     second one under it, and the paragraphs below do not need to be fenced */
  #royaLibrary .ab-feat--stage .pl-q{font-size:clamp(1.05rem, 4.5cqw, 1.3rem);
    padding:1.15rem 0 0; max-width:34ch;}
  #royaLibrary .ab-feat--stage .pl-q::before{left:50%; right:auto;
    width:4.2rem; transform:translateX(-50%);
    background:linear-gradient(to right, transparent, rgba(199,148,61,.55), transparent);}
  #royaLibrary .ab-feat--stage .pl-q::after{display:none}
  /* the paragraphs are the one thing here that is NOT centred: centred prose is
     readable for two lines and hard work for six, and these run to four */
  /* a measure, so the prose does not run to seventy characters on a tablet */
  #royaLibrary .ab-feat--stage .pl-body{align-items:stretch; max-width:46ch;
    margin-inline:auto;}
  #royaLibrary .ab-feat--stage .pl-body p{font-size:clamp(.98rem, 4.2cqw, 1.19rem);
    line-height:1.62; text-align:left;}
  #royaLibrary .ab-feat--stage .pl-way{margin-top:.5rem; align-items:center;
    gap:1.15rem; width:100%;}
  /* the way in takes the measure of the board, so the block closes on a
     straight edge rather than on a button floating in the middle of it */
  #royaLibrary .ab-feat--stage .ft-cta{width:100%; justify-content:center;
    padding-block:.95rem;}

  /* ── three rules that have to out-rank the handset's own ──
     The phone's shared styles set .mob-sec .pl-t .ft-en, .mob-sec .pl-q and
     .mob-sec .pl-words near the foot of this file. They carry exactly the same
     specificity as the stage rules above — one id and two classes — and they
     come later, so they were quietly winning: the title was setting at a flat
     1.5rem and the line at 1.1rem whatever the clamps above say, and .pl-words
     was taking a second helping of side padding on top of the stack's.
     Qualifying by element adds a type selector, which is all it takes. */
  #royaLibrary .ab-feat--stage .pl-t span.ft-en{font-size:clamp(1.7rem, 8.2cqw, 2.5rem)}
  #royaLibrary .ab-feat--stage .pl-t span.ft-fa{font-size:clamp(1.1rem, 5cqw, 1.55rem)}
  #royaLibrary .ab-feat--stage p.pl-q{font-size:clamp(1.05rem, 4.5cqw, 1.3rem)}
  #royaLibrary .ab-feat--stage div.pl-words{padding:0}
}
/* ── on paper ──
   Where the words stand decides the ink, and that changes with the width.

   Wherever the words sit BESIDE or BELOW the picture — every handset, and the
   banded arrangements — the ground under them is paper and the ink is ink. The
   picture keeps its own dark ground and its own gold title; the paper starts
   where the picture stops.

   Wherever the words stand ON the picture — The Unsaid's field from 1700 up,
   the Delgoshā's page from 1440 up — they keep the dark theme's values,
   because ink on a night plate cannot be read at all.

   One rule throughout: the plate is carried in a custom property on the same
   element, so this theme only ever touches `background-color`, never the
   `background` shorthand, which would wipe the picture. */
:root[data-lt="light"] #royaLibrary .ab-feat--split .pl,
:root[data-lt="light"] #royaLibrary .ab-feat--spread .pl{
  background-color:#efe4ca; border-color:rgba(96,76,42,.5)}
:root[data-lt="light"] #royaLibrary .pl-art{border-color:rgba(96,76,42,.4)}

/* the title is set into the picture, so it stays gold there */
:root[data-lt="light"] #royaLibrary .ab-feat--split .pl-t{color:#e6cd95}
:root[data-lt="light"] #royaLibrary .ab-feat--split .pl-t .ft-fa{color:#dcc28c}
/* and everything under the picture takes the page */
:root[data-lt="light"] #royaLibrary .ab-feat--split .pl-q,
:root[data-lt="light"] #royaLibrary .ab-feat--spread .pl-q{color:#4a3a1d}
:root[data-lt="light"] #royaLibrary .ab-feat--split .pl-body p,
:root[data-lt="light"] #royaLibrary .ab-feat--split .pl-p,
:root[data-lt="light"] #royaLibrary .ab-feat--spread .pl-p,
:root[data-lt="light"] #royaLibrary .ab-feat--spread .pl-lede{color:#2e2618}
:root[data-lt="light"] #royaLibrary .ab-feat--split .ft-eyebrow,
:root[data-lt="light"] #royaLibrary .ab-feat--spread .ft-eyebrow{color:#8a6420}
:root[data-lt="light"] #royaLibrary .ab-feat--split .pl-cap,
:root[data-lt="light"] #royaLibrary .ab-feat--spread .pl-cap,
:root[data-lt="light"] #royaLibrary .ab-feat--spread .pl-folio{color:#6d5c3e}
:root[data-lt="light"] #royaLibrary .ab-feat--split .pl-body,
:root[data-lt="light"] #royaLibrary .ab-feat--split .ft-eyebrow{
  border-top-color:rgba(140,42,34,.45)}
:root[data-lt="light"] #royaLibrary .ft-cta{background:rgba(99,29,25,.1); color:#631d19}
:root[data-lt="light"] #royaLibrary .ft-cta:hover{background:var(--oxblood); color:#f2e7cd}

/* ── The Delgoshā on paper ──
   The panel has no ground of its own now, so on the light theme the words
   stand on the page's own paper and take the page's own ink. Only the board
   keeps its night values, because a printed board is dark whatever room it is
   held in. */
:root[data-lt="light"] #royaLibrary .ab-feat--stage .pl{background:none; border:0;
  box-shadow:none}
:root[data-lt="light"] #royaLibrary .ab-feat--stage .pl-t{color:#8a6420}
:root[data-lt="light"] #royaLibrary .ab-feat--stage .pl-t .ft-fa{color:#9b7430}
:root[data-lt="light"] #royaLibrary .ab-feat--stage .pl-q{color:#4a3a1d}
:root[data-lt="light"] #royaLibrary .ab-feat--stage .pl-body p{color:#2e2618}
:root[data-lt="light"] #royaLibrary .ab-feat--stage .pl-q::before,
:root[data-lt="light"] #royaLibrary .ab-feat--stage .pl-q::after{
  background:linear-gradient(to right, transparent, rgba(140,42,34,.5), transparent)}
:root[data-lt="light"] #royaLibrary .ab-feat--stage .ft-cta{background:rgba(99,29,25,.1);
  color:#631d19; border-color:rgba(99,29,25,.4)}
:root[data-lt="light"] #royaLibrary .ab-feat--stage .ft-cta:hover{background:var(--oxblood);
  color:#f2e7cd}

/* the Delgoshā beside its theatre: the column beside the picture takes paper
   too, and its title with it */
@media (min-width:1150px) and (max-width:1899.98px){
  :root[data-lt="light"] #royaLibrary .ab-feat--spread .pl{
    background-image:linear-gradient(105deg, rgba(255,252,243,.55), rgba(255,252,243,.3))}
  :root[data-lt="light"] #royaLibrary .ab-feat--spread .pl-t{color:#8a6420}
  :root[data-lt="light"] #royaLibrary .ab-feat--spread .pl-t .ft-fa{color:#9b7430}
}

/* ── and where the words stand on the picture, the night values hold ── */
@media (min-width:1900px){
  :root[data-lt="light"] #royaLibrary .ab-feat--spread .pl{background:none; border:0}
  :root[data-lt="light"] #royaLibrary .ab-feat--spread .pl-p,
  :root[data-lt="light"] #royaLibrary .ab-feat--spread .pl-lede{color:#e0d6c3}
  :root[data-lt="light"] #royaLibrary .ab-feat--spread .pl-q{color:#ecdfc7}
  :root[data-lt="light"] #royaLibrary .ab-feat--spread .pl-cap,
  :root[data-lt="light"] #royaLibrary .ab-feat--spread .pl-folio{color:#c8bb9e}
  :root[data-lt="light"] #royaLibrary .ab-feat--spread .ft-cta{background:rgba(99,29,25,.6);
    color:#e9d3a2; border-color:rgba(199,148,61,.62)}
}
@media (min-width:1900px){
  :root[data-lt="light"] #royaLibrary .ab-feat--split .pl{background-color:transparent}
  :root[data-lt="light"] #royaLibrary .ab-feat--split .pl-q{color:#ecdfc7}
  :root[data-lt="light"] #royaLibrary .ab-feat--split .pl-body p,
  :root[data-lt="light"] #royaLibrary .ab-feat--split .pl-p{color:#e0d6c3}
  :root[data-lt="light"] #royaLibrary .ab-feat--split .ft-eyebrow{color:#cdb37d}
  :root[data-lt="light"] #royaLibrary .ab-feat--split .pl-body,
  :root[data-lt="light"] #royaLibrary .ab-feat--split .ft-eyebrow{
    border-top-color:rgba(199,148,61,.3)}
  :root[data-lt="light"] #royaLibrary .ab-feat--split .ft-cta{background:rgba(99,29,25,.6);
    color:#e9d3a2; border-color:rgba(199,148,61,.62)}
}

#royaLibrary .ab-over{position:relative; padding:2.4rem 2rem 2rem; margin:0 -.8rem 1.2rem;
  background-image:none;}
#royaLibrary .ab-over > *{position:relative; z-index:1}
#royaLibrary .ab-over::before{content:""; position:absolute; z-index:0; pointer-events:none;
  inset:-2.2rem -2.4rem -2.7rem;
  background-image:
    radial-gradient(86% 96% at 50% 44%, rgba(var(--over-ground),0) 26%, rgba(var(--over-ground),.5) 62%, rgb(var(--over-ground)) 88%),
    var(--ab-art);
  background-size:100% 100%, cover;
  background-position:center, center;
  background-repeat:no-repeat, no-repeat;
  /* absolute lengths, not per cents: the fade band has to stay clear of the
     type whatever the block's height turns out to be */
  -webkit-mask-image:
    linear-gradient(to right, transparent 0, #000 2.8rem, #000 calc(100% - 2.8rem), transparent 100%),
    linear-gradient(to bottom, transparent 0, #000 2.6rem, #000 calc(100% - 3.1rem), transparent 100%);
  mask-image:
    linear-gradient(to right, transparent 0, #000 2.8rem, #000 calc(100% - 2.8rem), transparent 100%),
    linear-gradient(to bottom, transparent 0, #000 2.6rem, #000 calc(100% - 3.1rem), transparent 100%);
  -webkit-mask-composite:source-in; mask-composite:intersect;}
#royaLibrary .ab-over .ab-feat-t{margin-bottom:1.3rem}
#royaLibrary .ab-feat-copy.is-centred{text-align:center; max-width:76ch; margin:0 auto 1.4rem}
#royaLibrary .ab-feat-copy.is-centred .ab-feat-p{text-wrap:balance}
/* The dedication, in the hand Persian poetry is written in. Naskh is an
   upright book face and set the line as body text; Gulzar is the nastaliq the
   live page wears here, and the page is dedicating itself to a poet.
   Three things connected script needs that the Latin around it does not: no
   letter-spacing, ever (it breaks the joins); no italic (nastaliq has none,
   and a browser asked for one shears the glyphs); and a much taller line,
   because the words hang below the baseline on a diagonal. */
#royaLibrary .ab-ded{max-width:34rem; margin:1.1rem auto 0; text-align:center;
  font-family:var(--nastaliq); letter-spacing:0;
  font-feature-settings:"kern" 1, "liga" 1, "calt" 1;}
#royaLibrary .ab-ded span{display:block}
#royaLibrary .ab-ded-to{margin-bottom:.1rem; font-size:clamp(1.1875rem, 3.4vw, 1.375rem);
  line-height:2; color:var(--ochre); opacity:.92;}
#royaLibrary .ab-ded em{display:block; font-style:normal;
  font-size:clamp(1rem, 2.8vw, 1.125rem); line-height:2.1;
  color:var(--bone); opacity:.82; text-wrap:balance;}
#royaLibrary .ab-sh{margin:1.6rem 0 .9rem; font-family:var(--cond); font-weight:600; font-size:.625rem;
  letter-spacing:.24em; text-transform:uppercase; color:var(--ochre); text-align:left;
  padding-top:1.1rem; border-top:1px solid rgba(199,148,61,.34);}
#royaLibrary .ab-start{display:grid; grid-template-columns:8.4rem minmax(0,1fr); gap:1.4rem; width:100%; text-align:left; align-items:start}
#royaLibrary .ab-start-cov img{width:100%; display:block; aspect-ratio:2/3; object-fit:cover;
  border:1px solid rgba(199,148,61,.4); box-shadow:0 10px 22px rgba(0,0,0,.65)}
#royaLibrary .ab-start-body{display:flex; flex-direction:column; min-width:0}
#royaLibrary .ab-start-head{display:block; margin-bottom:.55rem}
#royaLibrary .ab-start-head b{font-family:var(--book); font-weight:500; font-size:1.5rem; color:var(--ochre)}
#royaLibrary .ab-start-en{margin-left:.5rem; font-family:var(--book); font-weight:500; font-size:1.5rem; color:var(--bone)}
#royaLibrary .ab-start-fa{margin-left:.6rem; font-family:var(--nast); font-size:1.125rem; color:var(--ochre)}
#royaLibrary .ab-start-vol{margin-left:.6rem; font-style:normal; font-family:var(--cond); font-weight:600;
  font-size:.625rem; letter-spacing:.2em; text-transform:uppercase; color:var(--dust)}
#royaLibrary .ab-start-note{font-family:var(--book); font-size:1.125rem; line-height:1.48; color:var(--t-copy)}
#royaLibrary .ab-start-time{margin-top:.7rem; font-family:var(--cond); font-weight:600; font-size:.625rem;
  letter-spacing:.24em; text-transform:uppercase; color:var(--ochre)}
#royaLibrary .ab-start:hover .ab-start-en{color:var(--gold-lt)}
#royaLibrary .ab-cycle{display:flex; flex-direction:column}
#royaLibrary .ab-cycle button{display:flex; align-items:baseline; gap:1.8rem; width:100%; text-align:left;
  padding:.7rem .2rem; border-bottom:1px solid rgba(199,148,61,.22);
  font-family:var(--book); font-size:1.125rem; color:var(--t-copy)}
#royaLibrary .ab-cycle button span{flex:0 0 2.4rem; color:var(--ochre)}
#royaLibrary .ab-cycle button:hover, #royaLibrary .ab-cycle button.rl-is-current{color:var(--gold-lt)}
#royaLibrary .ab-cycle button.rl-is-current span{text-decoration:underline; text-underline-offset:.28em}
#royaLibrary .ab-feat-books{display:flex; flex-wrap:wrap; justify-content:center; gap:.45rem}
#royaLibrary .ab-feat-books button{padding:.34rem .7rem; border:1px solid rgba(199,148,61,.4);
  font-family:var(--cond); font-weight:500; font-size:.5625rem; letter-spacing:.15em;
  text-transform:uppercase; color:var(--bone-muted);}
#royaLibrary .ab-feat-books button:hover{color:var(--gold-lt); border-color:var(--ochre)}
/* phone */
#royaLibrary .mob-sec .ab-marg{display:none}
/* ── the featured series on a phone ──
   It used to hold the scene at the top of the block and start the words
   underneath it: 8.5rem of top padding, the veil opaque by 72%, and the title
   beginning below the two faces. That read as a picture with a caption, and
   it made the tallest block on the panel — a screen of portrait at the top
   and a screen of flat ground under it — where the desktop reads as one
   thing: the words standing in the dark between the two of them.

   Three changes bring it back in line. The padding comes down so the title
   starts inside the picture rather than after it. The scene is set at 132% so
   the band is tall enough to carry the title and most of the copy. 110% is
   as far as that can go: the two faces sit at the very edges of a 3:2 plate,
   so every per cent past it takes a slice off one of them, and a face that
   is half a face stops being the thing the block is built around. What the
   band does not reach, the veil does.
   And the veil is the desktop's, a radial that stays clear over the middle —
   where the plate is already shadow, and where the type goes — and closes in
   toward the edges, with a linear under it to carry the dedication down onto
   solid ground. Nothing ends up outside the tint. */
/* ── the two plate features on a phone ──
   The plate cannot carry type at this width, so the banner rule above already
   folds them; these are the margins and the sizes that suit a handset. */
#royaLibrary .mob-sec .ab-feat--split, #royaLibrary .mob-sec .ab-feat--spread{margin:0 -.4rem 1.3rem}
#royaLibrary .mob-sec .pl-words, #royaLibrary .mob-sec .pl-foot{padding:1.2rem 1.1rem 0; gap:.9rem}
#royaLibrary .mob-sec .pl-foot{padding-top:1rem; padding-bottom:1.2rem}
#royaLibrary .mob-sec .pl-t .ft-en{font-size:1.5rem}
#royaLibrary .mob-sec .pl-q{font-size:1.1rem}
#royaLibrary .mob-sec .pl-lede{font-size:1rem}
#royaLibrary .mob-sec .ft-cta{width:100%; justify-content:center}

#royaLibrary .mob-sec .ab-over{background-image:none;
  padding:3.1rem 1rem 1.8rem; margin:0 -.4rem 1.2rem;
  -webkit-mask-image:none; mask-image:none;}
#royaLibrary .mob-sec .ab-over::before{inset:-1.2rem -1.4rem -2.2rem;
  background-image:
    radial-gradient(76% 54% at 50% 33%,
      rgba(var(--over-ground),0) 16%, rgba(var(--over-ground),.40) 56%,
      rgba(var(--over-ground),.78) 86%),
    linear-gradient(to bottom,
      rgba(var(--over-ground),0) 44%, rgba(var(--over-ground),.70) 64%,
      rgb(var(--over-ground)) 80%),
    var(--ab-art);
  background-size:100% 100%, 100% 100%, 110% auto;
  background-position:center top, center top, center top;
  -webkit-mask-image:
    linear-gradient(to right, transparent 0, #000 1.8rem, #000 calc(100% - 1.8rem), transparent 100%),
    linear-gradient(to bottom, transparent 0, #000 1.7rem, #000 calc(100% - 2.6rem), transparent 100%);
  mask-image:
    linear-gradient(to right, transparent 0, #000 1.8rem, #000 calc(100% - 1.8rem), transparent 100%),
    linear-gradient(to bottom, transparent 0, #000 1.7rem, #000 calc(100% - 2.6rem), transparent 100%);}
#royaLibrary .mob-sec .ab-over .ab-feat-t{margin-bottom:.85rem}
/* held in from both sides so the two faces are beside the words rather than
   behind them — the desktop's own arrangement, at the width a phone has */
#royaLibrary .mob-sec .ab-over .ab-feat-copy.is-centred{max-width:92%; margin-inline:auto}
/* The phone has no left gutter to climb, so the marginalia takes the empty
   half of the first category's header instead — the same three rows, the same
   faded hand, small enough to sit inside it rather than beside it. */
#royaLibrary .mob-sec .ab-gh{display:flex; align-items:center; gap:.7rem}
#royaLibrary .mob-sec .ab-gh-t{flex:1 1 auto; min-width:0}
#royaLibrary .mob-sec .ab-gh-marg{flex:0 0 auto; font-family:var(--nastaliq); font-size:.9375rem; line-height:2.1;
  text-align:right; direction:rtl; color:var(--paper-dust);
  opacity:.34; filter:blur(.3px); transform:rotate(-8deg); pointer-events:none;}
#royaLibrary .mob-sec .ab-gh h3{font-size:1.5rem}
#royaLibrary .mob-sec .ab-gh p{font-size:.9375rem}
#royaLibrary .mob-sec .ab-row{padding:1.1rem 0 1.3rem}
/* The phone does NOT narrow the picture. The live page only narrows it below
   28rem of layout, and the page opens at initial-scale=0.85 — a 393px phone
   reports 462px — so that rule almost never fires and what a phone actually
   shows is the full 124%, the same picture as the desktop. Narrowing it here
   unconditionally is what reduced every scene to a sliver: `cover` in a box
   half as wide and just as tall crops the subject straight out of frame. The
   picture keeps its width; the prose is what stays off it, capped at 64%.

   The crop does change with the width, though, and this is the page's own
   map. Wide, every scene is anchored four rem in from its right edge so the
   overhang does not walk the subject off the screen. Narrow, the box is so
   much taller relative to the file that the same anchor leaves a bare strip
   down the right, so the anchor goes back to the edge — and three paintings
   whose subject sits left of that edge step back off it by hand. */
/* The vertical fade ends higher than the base rule's 88%/96%. On a phone the
   rows stack with nothing between them but a hairline, and two scenes that
   each run to their own edge meet as one continuous picture — book 35's cloud
   bank ran straight into book 52's water. Taking the picture out by 72% and
   to nothing by 97% leaves a band of plain ground above the rule, so each
   scene ends before the next one starts. The other two masks are the base
   rule's, repeated because mask-image is one property and cannot be amended
   a layer at a time. */
#royaLibrary .mob-sec .ab-art{background-position:100% 50%;
  -webkit-mask-image:
    linear-gradient(to right, transparent 0, rgba(0,0,0,.22) 14%, rgba(0,0,0,.62) 34%, #000 58%, #000 96%, transparent 100%),
    linear-gradient(to bottom, transparent 0, rgba(0,0,0,.3) 8%, #000 22%, #000 72%, rgba(0,0,0,.22) 88%, transparent 97%),
    radial-gradient(104% 96% at 62% 50%, #000 30%, rgba(0,0,0,.6) 66%, transparent 100%);
  mask-image:
    linear-gradient(to right, transparent 0, rgba(0,0,0,.22) 14%, rgba(0,0,0,.62) 34%, #000 58%, #000 96%, transparent 100%),
    linear-gradient(to bottom, transparent 0, rgba(0,0,0,.3) 8%, #000 22%, #000 72%, rgba(0,0,0,.22) 88%, transparent 97%),
    radial-gradient(104% 96% at 62% 50%, #000 30%, rgba(0,0,0,.6) 66%, transparent 100%);}
/* 35 is the one scene whose subject is a shape rather than a figure, and a
   wing cut in half is not a wing. Three things were taking it: the box hangs
   five rem past the row, which put the right tip off the side of the screen;
   `cover` filled the box exactly, so the 87% anchor had no slack to work with
   and did nothing; and the mask's top fade was still climbing where the upper
   wings sit. The overhang comes back to two rem, the plate is set to 92% of
   the box height so it has room to be placed, and 68% down carries the pair
   clear of that fade. The whole span and the hummingbird under it are in
   frame now. */
#royaLibrary .mob-sec .ab-row[data-rec="35"] .ab-art{right:-2rem;
  background-size:auto 92%; background-position:62% 68%;}
#royaLibrary .mob-sec .ab-row[data-rec="52"] .ab-art{background-position:97% 50%}
/* 94 stays hard right, where the page steps it back to 84%: the page's file
   stops short of its own right edge and 84% closes the strip that leaves,
   while the copy the section carries is the shifted painting — it already
   reaches the edge, and stepping back walks the face and the building off it. */
#royaLibrary .mob-sec .ab-row[data-rec="94"] .ab-art{background-position:100% 50%}
#royaLibrary .mob-sec .ab-row{padding:1.4rem 0}
#royaLibrary .mob-sec .ab-rowin{max-width:none}
#royaLibrary .mob-sec .ab-head b, #royaLibrary .mob-sec .ab-name{font-size:1.25rem}
#royaLibrary .mob-sec .ab-gl{font-size:.9375rem}
#royaLibrary .mob-sec .ab-syn{font-size:1rem}
#royaLibrary .mob-sec .ab-feat-t{font-size:1.5rem}
#royaLibrary .mob-sec .ab-feat-p{font-size:1rem}
/* the phone is one column whatever the viewport says — the desktop rule is a
   viewport media query, and the phone frame lives inside a desktop viewport */
#royaLibrary .mob-sec .ab-feat-copy{margin-bottom:1.2rem}
#royaLibrary .mob-sec .ab-start{grid-template-columns:5.6rem minmax(0,1fr); gap:.9rem}
#royaLibrary .mob-sec .ab-start-head b, #royaLibrary .mob-sec .ab-start-en{font-size:1.125rem}
#royaLibrary .mob-sec .ab-start-note{font-size:1rem}
#royaLibrary .mob-sec .ab-cycle button{font-size:1rem; gap:1rem}
#royaLibrary .mob-sec .ab-ded-to{font-size:1.1875rem; line-height:2}
#royaLibrary .mob-sec .ab-ded em{font-size:1rem; line-height:2.1}
/* 1.5rem, which is what .ab-gh h3 sets on a handset. The tracking comes down
   again: at 376px of layout width RECOMMENDED SERIES is the longest label the
   section has, and .1em would leave the rules either side of it with nothing. */
#royaLibrary .mob-sec .ab-mark{gap:.42em; font-size:1.5rem}
#royaLibrary .mob-sec .ab-mark b{font-size:1.5rem; letter-spacing:0; text-indent:0}
/* the diamonds are sized off the label now, so they follow it down */
#royaLibrary .mob-sec .ab-orn{width:1.5em; height:.62em}
/* ── cover zoom ──
   The magnifier on a plate opens the front cover large, and the reader can
   walk the whole shelf from in here — the old All Covers overlay could only
   be left. */
#royaLibrary .zoom{/* the lab bar is fixed over the top of the window, so the overlay starts
     under it. On the site --labh is 0 and this is inset:0. */
  position:fixed; top:var(--labh,0px); left:0; right:0; bottom:0;
  /* above the record panel (42), which is where the enlarge control usually
     is — at 40 the record's own backdrop was painted over the picture and
     swallowed every click meant for it */
  z-index:60; background:rgba(6,5,4,.93);}
/* the picture scrolls; the close and the two arrows do not */
#royaLibrary .zoom-scroll{/* clear of the strip along the foot */
  position:absolute; inset:0 0 6.2rem; display:flex; overflow-y:auto; overflow-x:hidden;
  overscroll-behavior:contain; -webkit-overflow-scrolling:touch;}
/* margin:auto centres the block and still lets it scroll from the top when it
   is taller than the frame — justify-content:center would clip the top */
#royaLibrary .zoom-fig{margin:auto; display:flex; flex-direction:column; align-items:center;
  gap:.9rem; width:100%; padding:4rem 1.6rem 2.6rem;}
#royaLibrary .zoom-plate{position:relative; display:block; background:#0a0806; min-height:0;
  border:16px solid transparent; border-image:url(frame.png) 28 round;
  box-shadow:0 26px 60px rgba(0,0,0,.85);}
/* the magnifier is for looking at the artwork, so the pair gets the screen:
   no frame, no strip, nothing else competing with it */
#royaLibrary .zoom.is-full{background:#050403}
#royaLibrary .zoom.is-full .zoom-plate{border:0; box-shadow:none; background:none; width:100%; max-width:100rem}
#royaLibrary .zoom.is-full .zoom-plate img{
  display:block; margin:0 auto; width:auto; height:auto;
  max-width:100%; max-height:calc(100dvh - var(--labh,0px) - 9rem);}
/* ── the reader ── */
#royaLibrary .rdr{position:fixed; top:var(--labh,0px); left:0; right:0; bottom:0; z-index:70;
  background:#0c0a07; display:flex; flex-direction:column;}
#royaLibrary .phone-over .rdr{position:absolute; inset:0; top:0}
#royaLibrary .rdr-top{flex:0 0 auto; display:flex; align-items:center; justify-content:space-between; gap:1rem;
  padding:.9rem 1.1rem; border-bottom:1px solid rgba(199,148,61,.42);}
#royaLibrary .rdr-ti{font-family:var(--slab); font-weight:700; font-size:1.125rem; letter-spacing:0;
  text-transform:uppercase; color:var(--bone); min-width:0;}
#royaLibrary .rdr-x{flex:0 0 auto; width:2.2rem; height:2.2rem; display:grid; place-items:center;
  border:1px solid rgba(233,223,201,.34); color:var(--dust);}
#royaLibrary .rdr-x:hover{color:var(--bone); border-color:var(--bone)}
#royaLibrary .rdr-x svg{width:.95rem; height:.95rem; stroke:currentColor; fill:none; stroke-width:1.6}
#royaLibrary .rdr-body{flex:1 1 auto; min-height:0; overflow-y:auto; overscroll-behavior:contain; padding:2rem 1.4rem 3rem}
#royaLibrary .rdr-body > *{max-width:42rem; margin-left:auto; margin-right:auto}
#royaLibrary .rdr-line{margin:0 0 1.6rem; font-family:var(--cond); font-weight:600; font-size:.625rem;
  letter-spacing:.24em; text-transform:uppercase; color:var(--t-kicker);}
#royaLibrary .rdr-p{margin:0 0 1.1rem; font-family:var(--book); font-size:1.1875rem; line-height:1.6; color:var(--t-copy)}
#royaLibrary .rdr-note{margin:2.4rem 0 0; padding-top:1.2rem; border-top:1px solid rgba(199,148,61,.28);
  font-family:var(--cond); font-weight:400; font-size:.8125rem; line-height:1.6; color:var(--dust);}
#royaLibrary .rdr-note code{font-family:ui-monospace,Menlo,monospace; font-size:.9em; color:var(--t-quiet)}
:root[data-lt="light"] #royaLibrary .rdr{background:#e8dfc6}
#royaLibrary .zoom-x, #royaLibrary .zoom-nav{position:absolute; z-index:3}
#royaLibrary .zoom-x{top:1rem; right:1.1rem}
#royaLibrary .zoom-nav{top:50%; transform:translateY(-50%)}
#royaLibrary .zoom-nav.rot-r{left:.8rem}
#royaLibrary .zoom-nav.rot-l{right:.8rem}
#royaLibrary .zoom-plate img{display:block; max-height:58vh; width:auto; object-fit:contain}
#royaLibrary .zoom-cap{text-align:center}
#royaLibrary .zoom-cap b{display:block; font-family:var(--slab); font-weight:700; font-size:1.5rem; text-transform:uppercase;
  color:var(--bone); letter-spacing:0;}
#royaLibrary .zoom-cap i{display:block; margin-top:.3rem; font-style:normal;
  font-family:var(--cond); font-weight:500; font-size:.625rem; letter-spacing:.2em;
  text-transform:uppercase; color:var(--dust);}
#royaLibrary .zoom-nav{width:2.6rem; height:2.6rem; display:grid; place-items:center; color:var(--bone);
  border:1px solid rgba(233,223,201,.4); background:rgba(12,10,7,.7);}
#royaLibrary .zoom-nav:hover{color:var(--ochre); border-color:var(--ochre)}
#royaLibrary .zoom-nav svg{width:1.15rem; height:1.15rem; stroke:currentColor; fill:none; stroke-width:1.7}
#royaLibrary .zoom-nav.rot-r svg{transform:rotate(90deg)}
#royaLibrary .zoom-nav.rot-l svg{transform:rotate(-90deg)}
/* a close mark, not a word: the arrows either side are icons too */
#royaLibrary .zoom-x{width:2.6rem; height:2.6rem; display:grid; place-items:center;
  border:1px solid rgba(233,223,201,.4); background:rgba(12,10,7,.7); color:var(--bone);}
#royaLibrary .zoom-x svg{width:1.05rem; height:1.05rem; stroke:currentColor; fill:none; stroke-width:1.6}
#royaLibrary .zoom-x:hover{border-color:var(--bone)}
#royaLibrary .zoom-x:hover{color:var(--bone)}
/* the shelf strip: every cover, so nothing needs closing to move on */
/* every cover in the current filter, along the foot — so a reader can walk the
   shelf without closing the view. Pinned rather than scrolling with the
   picture: it is how you get to the next book, so it has to stay reachable. */
#royaLibrary .zoom-strip{position:absolute; left:0; right:0; bottom:0; z-index:3;
  display:flex; gap:.5rem; overflow-x:auto; overflow-y:hidden;
  padding:.7rem .9rem .8rem; scrollbar-width:thin;
  background:linear-gradient(to top, rgba(5,4,3,.94) 0, rgba(5,4,3,.72) 62%, transparent 100%);}
#royaLibrary .zoom-strip img{height:4.4rem; width:auto; flex:0 0 auto; display:block; cursor:pointer;
  border:1px solid rgba(233,223,201,.22); opacity:.5; transition:opacity .15s, border-color .15s;}
#royaLibrary .zoom-strip img:hover{opacity:.9}
#royaLibrary .zoom-strip img[aria-current="true"]{opacity:1; border-color:var(--ochre)}
/* ── the record ── */
#royaLibrary .dials{display:flex; flex-direction:column; gap:.5rem; margin:1.2rem 0 0}
#royaLibrary .dial{display:flex; align-items:center; gap:.9rem}
#royaLibrary .dial-n{flex:0 0 8.5rem; font-family:var(--cond); font-weight:600; font-size:.625rem;
  letter-spacing:.2em; text-transform:uppercase; color:var(--ochre);
  border-bottom:1px dotted rgba(199,148,61,.6); padding-bottom:.12rem; cursor:help;}
#royaLibrary .dial-m{display:flex; gap:.35rem; flex:0 0 auto}
#royaLibrary .dial-m i{display:block; width:2.6rem; height:.42rem;
  border:1px solid rgba(199,148,61,.45); background:transparent;}
#royaLibrary .dial-m i.on{background:var(--gold-word); border-color:var(--gold-word)}
#royaLibrary .dial-l{padding-left:.9rem; border-left:1px solid rgba(199,148,61,.45);
  font-family:var(--book); font-weight:400; font-size:1rem; color:var(--t-copy);}
#royaLibrary .keyed{display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:1.4rem; margin-top:1.4rem}
/* the note belongs to its own word, so it hangs off the cell rather than
   the row — anchored to the row it appeared centred under all three, which
   put Door's explanation under Room */
#royaLibrary .keyed-c{position:relative}
#royaLibrary .keyed-l{display:block; margin-bottom:.35rem; font-family:var(--cond); font-weight:600;
  font-size:.625rem; letter-spacing:.24em; text-transform:uppercase; color:var(--ochre);}
/* the same offer About makes: the word explains itself when you rest on it.
   A dotted rule under it is the only thing that says the note is there — set
   inline-block so the rule stops at the word rather than crossing the cell. */
#royaLibrary .keyed-l.has-hint{display:inline-block; cursor:help;
  border-bottom:1px dotted rgba(199,148,61,.7); padding-bottom:.1rem;}
#royaLibrary .keyed-l.has-hint:hover, #royaLibrary .keyed-l.has-hint:focus-visible{color:var(--gold-lt)}
#royaLibrary .keyed .hint b{display:block; margin-bottom:.3rem; font-family:var(--cond); font-weight:600;
  font-size:.625rem; letter-spacing:.24em; text-transform:uppercase; color:var(--ochre);}
#royaLibrary .keyed-t{margin:0; font-family:var(--book); font-weight:400; font-size:1rem; line-height:1.4; color:var(--t-copy)}
#royaLibrary .keyed-t b{font-weight:500; color:var(--bone)}
#royaLibrary .rec{position:fixed; inset:0; z-index:42; display:grid; place-items:center;
  padding:2rem 1.6rem; background:rgba(6,5,4,.93);}
#royaLibrary .rec-in{position:relative; width:min(62rem,94vw); max-height:88vh; overflow-y:auto;
  padding:1.6rem 1.8rem 1.8rem; background:#0f0d09;
  border:13px solid transparent; border-image:url(edge.png) 30 round;}
#royaLibrary .rec-x{position:absolute; top:1.1rem; right:1.3rem; padding:.34rem .9rem;
  border:1px solid rgba(199,148,61,.4); color:var(--dust);
  font-family:var(--cond); font-weight:600; font-size:.625rem; letter-spacing:.2em; text-transform:uppercase;}
#royaLibrary .rec-x:hover{color:var(--bone); border-color:var(--bone)}
#royaLibrary .rec-line{margin:0 6rem .9rem 0; font-family:var(--cond); font-weight:600; font-size:.6875rem;
  letter-spacing:.24em; text-transform:uppercase; color:var(--t-kicker);}
#royaLibrary .rec-cols{display:grid; grid-template-columns:minmax(0,1fr) 18rem; gap:2rem; align-items:start}
#royaLibrary .rec-syn{margin:0; font-family:var(--book); font-weight:400; font-size:1.125rem; line-height:1.48; color:var(--t-copy)}
#royaLibrary .rec-side{display:flex; flex-direction:column; gap:.7rem}
#royaLibrary .rec-plate{position:relative; display:block; background:#0a0806;
  border:9px solid transparent; border-image:url(frame.png) 28 round;
  box-shadow:0 0 28px rgba(198,150,70,.17), 0 10px 20px rgba(0,0,0,.6);}
#royaLibrary .rec-plate img{aspect-ratio:2/3; object-fit:cover; width:100%; display:block}
#royaLibrary .rec-series{font-family:var(--cond); font-weight:600; font-size:.5625rem; letter-spacing:.24em;
  text-transform:uppercase; color:var(--dust); text-align:center;}
#royaLibrary .rec-nav{display:flex; gap:.8rem; margin-top:1.5rem; padding-top:1rem; border-top:1px solid rgba(199,148,61,.4)}
#royaLibrary .rec-nav button{flex:1 1 0; display:flex; align-items:center; gap:.5rem; padding:.55rem .8rem;
  border:1px solid rgba(199,148,61,.4);
  font-family:var(--cond); font-weight:600; font-size:.625rem; letter-spacing:.2em;
  text-transform:uppercase; color:var(--bone-muted);}
#royaLibrary .rec-nav button:last-child{justify-content:flex-end; text-align:right}
#royaLibrary .rec-nav button:hover{color:var(--gold-lt); border-color:var(--ochre)}
#royaLibrary .rec-nav svg{width:.95rem; height:.95rem; stroke:currentColor; fill:none; stroke-width:1.7; flex:0 0 auto}
#royaLibrary .rec-nav .rot-r svg{transform:rotate(90deg)}
#royaLibrary .rec-nav .rot-l svg{transform:rotate(-90deg)}
@media (max-width:60rem){
  #royaLibrary .rec-cols{grid-template-columns:minmax(0,1fr)}
  #royaLibrary .rec-side{flex-direction:row; align-items:flex-end; gap:1rem}
  #royaLibrary .rec-pair{flex:0 0 12rem}
  #royaLibrary .keyed{grid-template-columns:minmax(0,1fr)}
}
/* ── desktop ABOUT (recommended + series only) ── */
#royaLibrary .abt{position:relative; z-index:2; padding:1.6rem 1.4rem 1.4rem; min-width:0}
#royaLibrary .abt h2{margin:0 0 .3rem; font-family:var(--slab); font-weight:700; font-size:1.75rem; text-transform:uppercase; color:var(--bone);
        display:flex; align-items:baseline; gap:1rem}
#royaLibrary .abt-back{font-family:var(--cond); font-weight:600; font-size:.625rem; letter-spacing:.2em;
          text-transform:uppercase; color:var(--dust)}
#royaLibrary .abt-back:hover{color:var(--ochre)}
#royaLibrary .abt .lead{margin:0 0 1.4rem; max-width:52ch; font-family:var(--book); font-weight:400; font-size:1.125rem; line-height:1.48; color:var(--t-copy)}
#royaLibrary .abt-sec{margin-bottom:1.6rem}
#royaLibrary .abt-lab{display:flex; align-items:center; gap:.9rem; margin-bottom:.8rem;
  font-family:var(--cond); font-weight:600; font-size:.625rem; letter-spacing:.2em;
  text-transform:uppercase; color:var(--ochre);}
#royaLibrary .abt-lab i{flex:1; height:1px; background:rgba(199,148,61,.58)}
#royaLibrary .abt-rec{display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:.9rem}
#royaLibrary .abt-ser{display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:.9rem}
#royaLibrary .abt-scard{padding:.9rem 1rem; border:1px solid rgba(233,223,201,.28); background:rgba(10,9,7,.5); text-align:left;}
#royaLibrary .abt-scard h3{margin:0 0 .35rem; font-family:var(--slab); font-weight:var(--dw); font-size:1.125rem; text-transform:uppercase; color:var(--bone)}
#royaLibrary .abt-scard .n{font-family:var(--cond); font-weight:500; font-size:.5625rem; letter-spacing:.2em; text-transform:uppercase; color:var(--dust)}
#royaLibrary .abt-scard p{margin:.45rem 0 0; font-family:var(--book); font-size:.9375rem; line-height:1.3; color:#cfc5ac}
#royaLibrary .abt-note{margin-top:1.2rem; padding:.7rem .9rem; border-left:2px solid var(--oxblood-lit);
  font-family:var(--book); font-size:.9375rem; line-height:1.4; color:#bdb39b;}
@media (max-width:1180px){
  #royaLibrary .grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  #royaLibrary .abt-rec{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width:980px){
  #royaLibrary .lib{grid-template-columns:minmax(0,1fr); --vig-l:0px}
  #royaLibrary .side{min-height:0; border-right:0; border-bottom:1px solid rgba(233,223,201,.28)}
  #royaLibrary .side-strap{display:none}
  #royaLibrary .grid{grid-template-columns:minmax(0,1fr)}
  #royaLibrary .abt-rec, #royaLibrary .abt-ser{grid-template-columns:minmax(0,1fr)}
}
/* ══════════ MOBILE · the Roya Library ══════════
   The same catalogue as the desktop archive, rebuilt for a phone: an identity
   band that stays put, one field and one chip row for finding a book, and a
   two-up wall of framed covers. Tapping a card opens a sheet; tapping the
   magnifier opens the 3D pair. */
#royaLibrary .mob{position:relative; min-height:100%;
  /* glass over the phone frame's plate, with a scrim so the bloom sits
     behind the type rather than competing with it */
  background-color:rgba(11,9,6,.44); background-image:none; color:var(--bone);}
#royaLibrary .mob::after{content:""; position:absolute; inset:0; pointer-events:none; z-index:6; opacity:.22;
  background-image:
    repeating-linear-gradient(0deg, transparent 0 3px, rgba(255,255,255,.025) 4px),
    repeating-linear-gradient(90deg, transparent 0 7px, rgba(0,0,0,.09) 8px);}
/* ── 1 · the frozen header ──
   Everything a reader needs to find a book stays on screen: the identity
   band, the search field and the two pickers. The masthead half of it —
   the nav, the collection heading, the imprint line — folds away on the
   first scroll, because freezing all of it would leave a phone showing
   more chrome than books. */
#royaLibrary .mob-head{position:sticky; top:0; z-index:10;
  /* solid, not 97%: at three per cent a bright cover scrolling under the
     header ghosted through it legibly */
  background:#0b0906; padding-bottom:.5rem;
  border-bottom:1px solid rgba(199,148,61,.5);
  box-shadow:0 10px 18px rgba(0,0,0,.34);}
#royaLibrary .mob-bar{/* the controls sit at the top of the bar, not on its centre line */
  display:flex; align-items:flex-start; gap:.65rem;
  /* The lockup is bottom-set against this edge, so this padding is the only
     thing between the foot of PUBLICATION and the hairline — and the wordmark
     crop is tight: its ink runs to within a pixel of the bottom of the plate,
     so at 0 the letters sat straight on the line. .4rem is the clearance. */
  padding:.5rem .7rem .4rem;
  border-bottom:1px solid rgba(199,148,61,.58);}
:root[data-mcond="1"] #royaLibrary .mob-h{display:none}
:root[data-mcond="1"] #royaLibrary .mob-nav{padding:.62rem .7rem .66rem}
:root[data-mcond="1"] #royaLibrary .mob-nav button{font-size:clamp(.625rem, 2.5vw, .8125rem)}
:root[data-mcond="1"] #royaLibrary .mob-nav button[aria-current="true"] span{margin-top:.2rem}
:root[data-mcond="1"] #royaLibrary .mob-bar{padding:.36rem .7rem .28rem}
:root[data-mcond="1"] #royaLibrary .mob-word{height:1.95rem}
:root[data-mcond="1"] #royaLibrary .mob-ears{height:1.63rem}
:root[data-mcond="1"] #royaLibrary .mob-rights{display:none}
:root[data-mcond="1"] #royaLibrary .mob-name{font-size:.72rem; letter-spacing:.16em}
:root[data-mcond="1"] #royaLibrary .side-tog span{font-size:.5625rem}
:root[data-mcond="1"] #royaLibrary .mob-search{margin-bottom:.42rem}
:root[data-mcond="1"] #royaLibrary .mob-search input{padding-top:.5rem; padding-bottom:.5rem}
/* the lockup: the wordmark, the ears and the name all on one line — set the
   way the masthead sets it, Jost light at .14em. The name used to sit on a
   second row under the mark, which is what kept the imprint small: two rows
   had to share the bar's height. On one row the mark has the whole of it.

   align-self:flex-end sets the foot of the lockup on the bar's bottom edge,
   so the emblem reaches down towards the hairline whatever the settings
   column beside it turns out to be, with the bar's .4rem of bottom padding
   as the only gap — see the note on that padding above. */
#royaLibrary .mob-lock{display:flex; flex-direction:row; align-items:center;
  gap:clamp(.45rem, 1.8vw, .8rem); flex:1 1 auto; min-width:0; align-self:flex-end}
#royaLibrary .mob-mark{display:flex; align-items:center; gap:clamp(.4rem, 1.6vw, .62rem)}
#royaLibrary .mob-name{font-family:var(--cond); font-weight:400;
  font-size:clamp(.6875rem, 2.9vw, .8125rem); letter-spacing:.2em;
  line-height:1; white-space:nowrap; color:var(--t-tag); padding-left:0;}
/* Up from 1.8rem and 1.5rem. Sized as a height, never a width — see the crop
   note at the foot of this file; the clamp is what keeps a 320px handset from
   pushing the name into the settings column. */
#royaLibrary .mob-word{height:clamp(2.6rem, 10.9vw, 3.15rem); width:auto; display:block; filter:saturate(1.2) brightness(1.12)}
#royaLibrary .mob-ears{height:clamp(2.2rem, 9.2vw, 2.65rem); width:auto; display:block; filter:saturate(1.2) brightness(1.12)}
#royaLibrary .mob-id{display:flex; flex-direction:column; gap:.16rem; min-width:0; flex:1 1 auto}
/* the settings column: two small controls, and the rights line beneath them */
#royaLibrary .mob-set{display:flex; flex-direction:column; align-items:flex-end; gap:.18rem; flex:0 0 auto}
#royaLibrary .mob-set-row{display:flex; align-items:flex-start; gap:.15rem}
#royaLibrary .mob-set .side-tog{padding:0 .3rem; gap:.14rem}
#royaLibrary .mob-set .side-tog svg{width:.82rem; height:.82rem}
#royaLibrary .mob-set .side-tog span{font-size:.5rem; letter-spacing:.2em}
#royaLibrary .mob-rights{font-style:normal; font-family:var(--cond); font-weight:400; font-size:.5rem;
  letter-spacing:.1em; line-height:1.3; text-transform:uppercase;
  color:var(--paper-dust); text-align:right; white-space:nowrap;}
#royaLibrary .mob-id i{font-style:normal; font-family:var(--cond); font-weight:400; font-size:.5625rem;
  letter-spacing:.1em; line-height:1.4; text-transform:uppercase; color:var(--paper-dust);}
#royaLibrary .mob-set{display:flex; gap:.85rem; flex:0 0 auto; margin-left:auto}
/* ── 2 · section navigation ── */
/* No rule of its own: the collection line a few millimetres under it already
   draws one, and two hairlines that close together read as a printing fault.
   The band does not need to be sticky itself — .mob-head above it already
   freezes the whole header, this row included. */
#royaLibrary .mob-nav{display:flex; align-items:stretch; padding:.85rem .7rem .9rem;}
#royaLibrary .mob-nav button{flex:1 1 0; text-align:center; padding:0 .2rem; position:relative;
  /* Up from a flat .6875rem. The three labels are the only way through the
     section on a phone and were set smaller than the collection line under
     them. The size follows the width now — the page opens at
     initial-scale=0.85, so a 393px handset lays out at 462 and reads about
     13px, a 430px one about 14px, and anything wider takes the 15px cap. The
     tracking comes in from .15em to .1em to pay for part of it.

     The .75rem floor is for a 320px handset, which lays out at 376: a third
     of that is 118px, and AUTHOR'S NOTES has taken two line boxes there
     since before this change — at the old .6875rem too. The floor is the
     largest size that does not make that wrap any worse, so the narrowest
     screens gain a point of size rather than nothing. */
  font-family:var(--cond); font-weight:600;
  font-size:clamp(.75rem, 2.85vw, .9375rem); letter-spacing:.1em;
  text-transform:uppercase; color:var(--ochre); line-height:1.3;}
#royaLibrary .mob-nav button + button::before{content:""; position:absolute; left:0; top:.1rem; bottom:.1rem; width:1px;
  background:rgba(199,148,61,.4);}
#royaLibrary .mob-nav button[aria-current="true"]{color:var(--gold-lt)}
#royaLibrary .mob-nav button[aria-current="true"] span{display:block; height:1px; margin:.28rem auto 0; width:76%; background:var(--gold-lt);}
/* ── 3 · collection heading and finding ── */
/* The same line the desktop bar carries, set the same way: light, widely
   tracked, in the quiet ochre rather than bone. In the slab at 700 it was the
   loudest thing on the screen and the first thing under the nav, which is
   precisely where the page wants to be quiet. */
#royaLibrary .mob-h{margin:1rem .7rem .55rem; font-family:var(--cond); font-weight:300;
  font-size:.6875rem; line-height:1.35; letter-spacing:.2em;
  text-transform:uppercase; color:var(--t-kicker); text-wrap:balance;}
#royaLibrary .mob-h i{font-style:normal; color:var(--t-num); letter-spacing:.24em}
#royaLibrary .mob-h i b{font-weight:300; color:var(--t-kicker)}
#royaLibrary .mob-search{position:relative; margin:0 .7rem .5rem}
#royaLibrary .mob-search input{width:100%; padding:.62rem 2.3rem .62rem .8rem; background:transparent; color:var(--bone);
  border:1px solid rgba(199,148,61,.55); font-family:var(--book); font-size:1rem;}
#royaLibrary .mob-search input::placeholder{color:var(--dust)}
#royaLibrary .mob-search svg{position:absolute; right:.8rem; top:50%; transform:translateY(-50%);
  width:1.15rem; height:1.15rem; stroke:var(--ochre); fill:none; stroke-width:1.6;}
#royaLibrary .mob-search .side-clear{right:.6rem; font-size:.875rem}
#royaLibrary .mob-ctrl{position:relative; z-index:12; display:flex; align-items:center; gap:.5rem; margin:0 .7rem .55rem}
#royaLibrary .mob-ctrl .sortbox{padding:.42rem .7rem; font-size:.625rem}
#royaLibrary .mob-ctrl .sep{width:1px; align-self:stretch; background:rgba(199,148,61,.5)}
#royaLibrary .mob-ctrl .viewtog{margin-left:0; gap:.7rem; flex:0 0 auto}
#royaLibrary .mob-ctrl .sortbox{flex:0 0 auto}
/* series picker, drawn here rather than by the OS: a native <select> hands
   its open list to the platform, which put a white menu with a blue highlight
   on top of the page. */
#royaLibrary .pickbox{position:relative; display:inline-flex; min-width:0; flex:1 1 auto}
#royaLibrary .pick-btn{display:flex; align-items:center; justify-content:space-between; gap:.5rem; width:100%;
  padding:.42rem .55rem .42rem .7rem; border:1px solid rgba(199,148,61,.55); color:var(--t-quiet);
  font-family:var(--cond); font-weight:500; font-size:.625rem; letter-spacing:.2em;
  text-transform:uppercase;}
#royaLibrary .pick-btn span{overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
#royaLibrary .pick-btn svg{width:.8rem; height:.8rem; stroke:#c99b4a; fill:none; stroke-width:2; flex:0 0 auto}
#royaLibrary .pickbox.is-open .pick-btn{border-color:var(--ochre); color:var(--gold-lt)}
#royaLibrary .pickbox.is-open .pick-btn svg{transform:rotate(180deg)}
#royaLibrary .pick-list{position:absolute; top:calc(100% + .35rem); left:0; z-index:14;
  min-width:100%; width:max-content; max-width:min(17rem, 72vw);
  max-height:16rem; overflow-y:auto; scrollbar-width:thin;
  background:#14110c; border:1px solid rgba(199,148,61,.6);
  box-shadow:0 18px 34px rgba(0,0,0,.72);}
#royaLibrary .pick-list button{display:block; width:100%; text-align:left; padding:.52rem .75rem;
  font-family:var(--cond); font-weight:400; font-size:.8125rem; letter-spacing:.08em;
  color:var(--t-tag); white-space:nowrap; overflow:hidden; text-overflow:ellipsis;}
#royaLibrary .pick-list button + button{border-top:1px solid rgba(199,148,61,.18)}
#royaLibrary .pick-list button:hover{color:var(--bone); background:rgba(199,148,61,.1)}
#royaLibrary .pick-list button[aria-selected="true"]{color:var(--gold-lt); background:rgba(199,148,61,.13); box-shadow:inset 2px 0 0 var(--ochre);}
#royaLibrary .mob-count{margin:.85rem .7rem .7rem; font-family:var(--cond); font-weight:500; font-size:.5625rem;
  letter-spacing:.2em; text-transform:uppercase; color:var(--dust);}
/* ── 4 · the cover wall ── */
#royaLibrary .mob-grid{display:grid; grid-template-columns:1fr 1fr; gap:.55rem; padding:0 .7rem 1rem}
#royaLibrary .mcard{display:flex; flex-direction:column; gap:.55rem; text-align:left; min-width:0;
  padding:.55rem; border:1px solid rgba(191,139,54,.55); background:rgba(11,9,6,.55);}
#royaLibrary .mcard[aria-current="true"]{border-color:var(--gold-lt)}
#royaLibrary .mcard-plate{position:relative; display:block; background:#0a0806;
  border:7px solid transparent; border-image:url(frame.png) 28 round;
  box-shadow:0 0 22px rgba(198,150,70,.16), 0 8px 16px rgba(0,0,0,.6);}
#royaLibrary .mcard-plate img{aspect-ratio:2/3; object-fit:cover; width:100%; display:block;
  filter:saturate(.9) contrast(1.06) brightness(.94);}
#royaLibrary .mcard-plate .bcard-zoom{opacity:.7; width:1.5rem; height:1.5rem; top:.3rem; right:.3rem}
#royaLibrary .mcard-plate .bcard-zoom svg{width:.8rem; height:.8rem}
#royaLibrary .mcard-body{display:flex; flex-direction:column; min-width:0}
#royaLibrary .mcard-no{font-family:var(--identity); font-weight:400; font-size:.9375rem;
  letter-spacing:.04em; color:var(--t-num); line-height:1;}
#royaLibrary .mcard-ti{margin:.4rem 0 .5rem; font-family:var(--slab); font-weight:700;
  font-size:1.0625rem; line-height:1; letter-spacing:-.012em;
  text-transform:uppercase; color:var(--gold-lt); text-wrap:balance;}
#royaLibrary .mcard-ti.is-long{font-size:.9375rem}
#royaLibrary .mcard hr{border:0; height:1px; background:rgba(199,148,61,.5); margin:0}
#royaLibrary .mcard-hook{margin:.5rem 0 .6rem; font-family:var(--book); font-weight:400;
  font-size:.9375rem; line-height:1.3; color:var(--t-copy);
  display:-webkit-box; -webkit-line-clamp:4; -webkit-box-orient:vertical; overflow:hidden;}
#royaLibrary .mcard-read{margin-top:auto; display:flex; align-items:center; justify-content:space-between; gap:.4rem;
  font-family:var(--cond); font-weight:600; font-size:.5625rem; letter-spacing:.2em;
  text-transform:uppercase; color:var(--t-read);}
#royaLibrary .mcard-read svg{width:.95rem; height:.7rem; stroke:currentColor; fill:none; stroke-width:1.6}
/* the row view — same markup, laid on its side. A full-width measure gives
   the long titles room the two-up cards cannot, and the reading time and
   series come out of hiding because there is space for them. */
#royaLibrary .mcard-meta{display:none; gap:.45rem; flex-wrap:wrap; margin:0 0 .55rem;
  font-family:var(--cond); font-weight:600; font-size:.5625rem; letter-spacing:.2em;
  text-transform:uppercase; color:var(--dust);}
#royaLibrary .mob-grid.is-rows{grid-template-columns:minmax(0,1fr); gap:0; padding:0 .7rem 1rem}
#royaLibrary .mob-grid.is-rows .mcard{flex-direction:row; align-items:flex-start; gap:.85rem;
  padding:.85rem .1rem; border:0; background:none;
  border-bottom:1px solid rgba(199,148,61,.3);}
#royaLibrary .mob-grid.is-rows .mcard:last-child{border-bottom:0}
#royaLibrary .mob-grid.is-rows .mcard[aria-current="true"]{border-bottom-color:var(--gold-lt); box-shadow:inset 2px 0 0 var(--ochre);
  padding-left:.6rem;}
#royaLibrary .mob-grid.is-rows .mcard-plate{flex:0 0 4.9rem; border-width:5px; box-shadow:0 6px 12px rgba(0,0,0,.55)}
#royaLibrary .mob-grid.is-rows .mcard-plate .bcard-zoom{width:1.25rem; height:1.25rem; top:.2rem; right:.2rem}
#royaLibrary .mob-grid.is-rows .mcard-plate .bcard-zoom svg{width:.68rem; height:.68rem}
#royaLibrary .mob-grid.is-rows .mcard-body{flex:1 1 auto; min-width:0}
#royaLibrary .mob-grid.is-rows .mcard-no{font-size:.875rem}
#royaLibrary .mob-grid.is-rows .mcard-ti, #royaLibrary .mob-grid.is-rows .mcard-ti.is-long{font-size:1.25rem; line-height:1; margin:.3rem 0 .45rem}
#royaLibrary .mob-grid.is-rows .mcard hr{display:none}
#royaLibrary .mob-grid.is-rows .mcard-hook{-webkit-line-clamp:2; margin:0 0 .5rem; font-size:.875rem}
#royaLibrary .mob-grid.is-rows .mcard-meta{display:flex}
#royaLibrary .mob-grid.is-rows .mcard-read{justify-content:flex-start; gap:.55rem}
/* the two reading sections, at phone scale */
#royaLibrary .mob-sec{padding:1.1rem .85rem 1.4rem}
#royaLibrary .mob-sec .ab-lede{font-size:1.125rem; margin-bottom:1.1rem}
#royaLibrary .mob-sec .ab-note{font-size:1rem; margin-bottom:1.2rem}
#royaLibrary .mob-sec .ab-terms{--abgap:.8rem; margin:1.3rem 0 .4rem}
#royaLibrary .mob-sec .ab-term{padding:0 .2rem}
#royaLibrary .mob-sec .ab-ic{width:1.8rem; height:1.8rem; margin-bottom:.4rem}
#royaLibrary .mob-sec .ab-t{font-size:.6875rem; letter-spacing:.2em}
#royaLibrary .mob-sec .ab-d{font-size:.875rem; margin-top:.35rem}
#royaLibrary .mob-sec .ab-rule{margin:1.6rem 0 .9rem; gap:.7rem}
#royaLibrary .mob-sec .ab-rule span{font-size:.625rem; letter-spacing:.24em}
#royaLibrary .mob-sec .ab-recs{grid-template-columns:minmax(0,1fr); gap:.55rem}
/* ── All series on a phone ──
   The same rows, folded. Five tracks will not fit a handset, so the number,
   the name and the count take the first line and the sentence drops under
   them, spanning from the name's own left edge so the column still reads as
   a column. The panel loses its three-across split for the same reason. */
/* Every cell is placed by hand. Left to flow, the sentence spanning columns
   2 to the end pushed the count and the chevron onto a third line of their
   own, where they read as a separate control rather than as part of the row.
   Line one is the row — number, name, count, chevron; line two is the
   sentence, indented to the name's own left edge so the column still reads
   as a column. */
#royaLibrary .mob-sec .ab-srow-h{grid-template-columns:2.1rem minmax(0,1fr) auto 1.1rem;
  column-gap:.7rem; row-gap:.28rem; padding:.8rem .2rem; align-items:baseline;}
#royaLibrary .mob-sec .ab-sx{grid-area:1/1; font-size:1.125rem}
#royaLibrary .mob-sec .ab-sn{grid-area:1/2; font-size:1rem}
#royaLibrary .mob-sec .ab-sc{grid-area:1/3}
#royaLibrary .mob-sec .ab-sv{grid-area:1/4; align-self:center}
#royaLibrary .mob-sec .ab-sd{grid-area:2/2/3/5; font-size:.875rem}
#royaLibrary .mob-sec .ab-sc{font-size:.5625rem}
#royaLibrary .mob-sec .ab-sv svg{width:.95rem; height:.95rem}
#royaLibrary .mob-sec .ab-spanel{grid-template-columns:minmax(0,1fr); row-gap:.9rem;
  margin:0 .2rem 1rem; padding:.9rem 1rem;}
#royaLibrary .mob-sec .ab-spanel > * + *{border-left:0; padding-left:0;
  border-top:1px solid var(--rule-board); padding-top:.9rem}
#royaLibrary .mob-sec .ab-sp-go{align-self:start}
#royaLibrary .mob-sec .ab-card{grid-template-columns:4.4rem minmax(0,1fr)}
#royaLibrary .mob-sec .ab-ti{font-size:1.0625rem}
#royaLibrary .mob-sec .ab-hk{font-size:.875rem}
#royaLibrary .mob-sec .ab-note--long{font-size:1rem; margin-bottom:.95rem}
/* ── 5 · the detail sheet ── */
/* The head stays put — the cover, the title and the line of facts — while the
   synopsis, the dials and the actions scroll under it. */
#royaLibrary .sheet{position:absolute; top:0; left:0; right:0; height:100%; z-index:12;
       background:#0d0b08; display:flex; flex-direction:column}
#royaLibrary .sheet-fixed{flex:0 0 auto; padding:.7rem .7rem .7rem;
  border-bottom:1px solid rgba(199,148,61,.42);
  box-shadow:0 10px 16px rgba(0,0,0,.4);}
#royaLibrary .sheet-scroll{flex:1 1 auto; min-height:0; overflow-y:auto; padding:1rem .9rem 1.6rem}
#royaLibrary .sheet-top{display:flex; align-items:center; gap:.6rem; padding-bottom:.7rem;
  border-bottom:1px solid rgba(199,148,61,.5);}
#royaLibrary .sheet-top b{font-family:var(--identity); font-weight:400; font-size:1.125rem;
  letter-spacing:.04em; color:var(--t-num);}
#royaLibrary .sheet-x{margin-left:auto; padding:.3rem .7rem; border:1px solid rgba(199,148,61,.45);
  font-family:var(--cond); font-weight:600; font-size:.5625rem; letter-spacing:.2em;
  text-transform:uppercase; color:var(--dust);}
/* the pair render carries its own shelf and table; feathering the edges lets
   it sit on the page instead of on a rectangle of somebody else's room */
#royaLibrary .rec-pair, #royaLibrary .sheet-pair{position:relative; display:block}
#royaLibrary .rec-pair img, #royaLibrary .sheet-pair img{width:100%; display:block; filter:contrast(1.04) saturate(.95);
  -webkit-mask-image:radial-gradient(92% 104% at 50% 44%, #000 30%, rgba(0,0,0,.62) 58%, transparent 80%);
  mask-image:radial-gradient(92% 104% at 50% 44%, #000 30%, rgba(0,0,0,.62) 58%, transparent 80%);}
#royaLibrary .rec-pair .bcard-zoom, #royaLibrary .sheet-pair .bcard-zoom{opacity:.75}
#royaLibrary .sheet-pair{margin:.35rem auto .35rem; width:100%}
#royaLibrary .sheet h3{margin:.2rem 0 .45rem; text-align:center; font-family:var(--slab); font-weight:700;
  font-size:1.375rem; line-height:1; letter-spacing:-.012em;
  text-transform:uppercase; color:var(--gold-lt); text-wrap:balance;}
#royaLibrary .sheet-meta{margin:0; text-align:center; display:flex; justify-content:center; gap:.5rem;
  flex-wrap:wrap; font-family:var(--cond); font-weight:600; font-size:.5625rem;
  letter-spacing:.2em; text-transform:uppercase; color:var(--dust);}
#royaLibrary .sheet p.syn{margin:0 0 1.1rem; font-family:var(--book); font-weight:400;
  font-size:1.125rem; line-height:1.48; color:var(--t-copy);}
#royaLibrary .sheet-acts{display:flex; flex-direction:column; gap:.45rem}
#royaLibrary .sheet-acts .bcard-read{font-size:.625rem}
#royaLibrary .sheet-nav{display:flex; align-items:center; gap:.6rem; margin-top:1.1rem;
  padding-top:.8rem; border-top:1px solid rgba(199,148,61,.4);}
#royaLibrary .sheet-nav button{flex:1 1 0; display:flex; align-items:center; gap:.4rem; padding:.5rem .6rem;
  border:1px solid rgba(199,148,61,.4);
  font-family:var(--cond); font-weight:600; font-size:.5625rem; letter-spacing:.2em;
  text-transform:uppercase; color:var(--bone-muted);}
#royaLibrary .sheet-nav button:last-child{justify-content:flex-end; text-align:right}
#royaLibrary .sheet-nav svg{width:.9rem; height:.9rem; stroke:currentColor; fill:none; stroke-width:1.7}
#royaLibrary .sheet-nav .rot-r svg{transform:rotate(90deg)}
#royaLibrary .sheet-nav .rot-l svg{transform:rotate(-90deg)}
/* the record blocks, at phone scale */
#royaLibrary .sheet .dials{margin:1.2rem 0 0; gap:.55rem}
#royaLibrary .sheet .dial{flex-wrap:wrap; gap:.5rem .7rem}
#royaLibrary .sheet .dial-n{flex:1 0 100%; width:fit-content; font-size:.5625rem}
#royaLibrary .sheet .dial-m i{width:2rem}
#royaLibrary .sheet .dial-l{font-size:.9375rem; padding-left:.7rem}
#royaLibrary .sheet .keyed{grid-template-columns:minmax(0,1fr); gap:.9rem; margin-top:1.3rem}
#royaLibrary .sheet .keyed-t{font-size:.9375rem}
#royaLibrary .sheet-acts{margin-top:1.3rem}
/* ── 6 · foot ── */
#royaLibrary .mob-foot{display:flex; flex-wrap:wrap; align-items:center; gap:.5rem;
  padding:.9rem .7rem 1.2rem; border-top:1px solid rgba(199,148,61,.5);
  font-family:var(--cond); font-weight:500; font-size:.5625rem; letter-spacing:.3em;
  text-transform:uppercase; color:var(--t-foot);}
#royaLibrary .mob-foot .r{margin-left:auto}
/* the cover zoom is a page overlay on desktop and a phone-frame overlay here */
/* the enlarged pair moved out of the frame and into the overlay shell with the
   sheet, so every rule that used to reach it through .phone is rescoped —
   otherwise it falls back to position:fixed and covers the whole window */
#royaLibrary .phone-over .zoom{position:absolute; inset:0; top:0}
#royaLibrary .phone-over .zoom-fig{padding:3.4rem .8rem 1.8rem; gap:.7rem}
#royaLibrary .phone-over .zoom.is-full .zoom-plate img{max-height:none}
#royaLibrary .phone-over .zoom-scroll{inset:0 0 5rem}
#royaLibrary .phone-over .zoom-strip{padding:.5rem .6rem .6rem; gap:.4rem}
#royaLibrary .phone-over .zoom-strip img{height:3.4rem}
#royaLibrary .phone-over .zoom-x{width:2.1rem; height:2.1rem; top:.7rem; right:.7rem}
#royaLibrary .phone-over .zoom-x svg{width:.9rem; height:.9rem}
#royaLibrary .phone-over .zoom-nav{width:2.1rem; height:2.1rem}
#royaLibrary .phone-over .zoom-plate{border-width:9px}
#royaLibrary .phone-over .zoom-cap b{font-size:1.0625rem}
#royaLibrary .phone-over .zoom.is-full .zoom-cap b{font-size:1rem}
@media (prefers-reduced-motion:reduce){
  #royaLibrary{transition:none !important}
}

/* ═══════════════ the section, as it sits on the site ═══════════════
   Everything above came straight from the sandbox. What follows is only
   what changes when the section stops being a page of its own: the shell it
   lives in, the phone layout at real phone width rather than in a mock
   handset, and the emblem cut out of assets/roya.png so no copy of it ships.
   ═══════════════════════════════════════════════════════════════════ */
#royaLibrary{
  position:fixed; inset:0; z-index:60; overflow-y:auto; overflow-x:hidden;
  overscroll-behavior:contain; -webkit-overflow-scrolling:touch;
  opacity:0; transition:opacity .26s ease;
}
#royaLibrary.rl-show{opacity:1}
#royaLibrary[hidden]{display:none}
body.rl-on{overflow:hidden}

/* the frame the sandbox drew round the phone was scaffolding; at real phone
   width the section IS the phone */
@media (max-width:46rem){
  #royaLibrary .phone-shell{flex:1 1 auto; width:100%; max-width:none}
  #royaLibrary .phone{
    height:auto; min-height:100vh; min-height:100dvh; border:0; border-radius:0;
    max-width:none; box-shadow:none; flex:1 1 auto;
    /* In the sandbox this box IS the scroller — a handset of a fixed height
       with the shelf running inside it — so the nav's `position:sticky`
       resolved against it. Here the box grows to the whole shelf and the
       SECTION scrolls, but `overflow-y:auto` still made this the nearest
       scroll container: a scroll container that never scrolls, so the sticky
       nav had nothing to stick to and simply left with the page. Handing the
       scrolling back to the section is what makes the header freeze.
       overflow-x stays `clip`, which clips without becoming a container. */
    overflow-y:visible; overflow-x:clip;
  }
  /* Fixed, not absolute. The sandbox hangs this off a mock handset of a known
     height; here .phone-shell grows to the whole shelf, so an absolute overlay
     inset:0 came out twenty-two THOUSAND pixels tall — the sheet and the
     enlarged cover were a screen of black with the content somewhere off the
     top, which is what a reader on a phone actually met. Fixed makes it the
     screen, which is what it was always meant to be. */
  #royaLibrary .phone-over{position:fixed; inset:0; border-radius:0}
}

/* Nothing behind an open record, sheet, cover or reader may scroll. On the
   page the section is the scroller — .phone is full height and does not
   scroll — so the section's own `.phone.is-locked` lock never applied here. */
#royaLibrary.rl-busy{overflow:hidden}

/* the imprint, cut from the one plate the repo already carries, so the section
   ships no copy of it. assets/roya.png is 520x910: the wordmark is its top
   520x453 and the ears are the 390x335 block at (65,469) — both measured
   against the sandbox's own two cuttings, not guessed. Only the CROP is set
   here. The size stays where the section sets it, as a height with the width
   following the aspect, so the header's condensed variant still governs it —
   setting a width here instead is what made the phone lockup two and a half
   times too big and pushed the bar from 67px to 106. */
#royaLibrary .side-emblem,
#royaLibrary .mob-word,
#royaLibrary .mob-ears{
  background-image:url("../assets/roya.png"); background-repeat:no-repeat;
}
#royaLibrary .side-emblem{aspect-ratio:520/910; background-size:100% 100%;     background-position:0 0}
#royaLibrary .mob-word   {aspect-ratio:520/453; background-size:100% auto;     background-position:0 0}
#royaLibrary .mob-ears   {aspect-ratio:390/335; background-size:133.333% auto; background-position:50% 81.565%}

/* the way out, matching the gallery's own close */
#royaLibrary .rl-close{
  position:fixed; top:1rem; right:1.1rem; z-index:70;
  width:2.4rem; height:2.4rem; display:grid; place-items:center;
  border:1px solid rgba(233,223,201,.34); background:rgba(12,10,7,.72); color:var(--dust);
}
#royaLibrary .rl-close:hover{color:var(--bone); border-color:var(--bone)}
#royaLibrary .rl-close svg{width:1rem; height:1rem; stroke:currentColor; fill:none; stroke-width:1.6}
/* on a phone the section's own header already owns the top right — Sound and
   Theme live there — so the way out sits at the foot instead, and on the LEFT:
   the site's back-to-the-top arrow is fixed to the bottom right at every width,
   and the two were landing on the same 38 pixels */
@media (max-width:46rem){
  #royaLibrary .rl-close{top:auto; bottom:1.1rem; left:1rem; right:auto;
    background:rgba(12,10,7,.88); box-shadow:0 10px 24px rgba(0,0,0,.55);}
}

/* ── the back-to-the-top arrow, while the section is open ──
   The section is a fixed overlay at z-index 60 and the site's own arrow is at
   45, so for as long as this section has existed the arrow has been painted
   UNDERNEATH it: shown, laid out, reported visible by every check that asked
   the element, and covered by the page on top of it. Raised over the section
   while the section is open, and left exactly as it is the rest of the time. */
body.rl-on #toTop{z-index:71}

/* An open record, cover, sheet or reader carries its own CLOSE; the
   section's stands down rather than floating a second one over it — the
   same rule the back-to-the-top arrow follows. */
#royaLibrary.rl-busy .rl-close{display:none}

/* Stage 4: the section is the site's front door. There is nothing behind it to
   go back to, so it carries no way out — the close button is the one piece of
   chrome that only makes sense while the old page is still the page. */
#royaLibrary.rl-home .rl-close{display:none}

#royaLibrary .rl-stage{display:block; min-height:100%}

/* ══════════ the series synopsis panel ══════════
   Stands between the bar and the grid on a page, and under the heading on a
   handset. It has no heading of its own — both of those already set the series
   name and the count, and a third statement of either inside the box was the
   one thing the panel did not need.

   The devices are drawn by roya-library.js against these four variables rather
   than against the dark palette, so the light theme restates the colours here
   instead of keeping a second copy of fourteen pieces of markup. */
#royaLibrary .sv{--sv-mark:rgba(199,148,61,.6); --sv-hi:#e9d3a2;
  --sv-soft:rgba(199,148,61,.45); --sv-faint:rgba(199,148,61,.32);
  --sv-rule:rgba(199,148,61,.28);
  display:flex; flex-direction:column; gap:1.1rem; margin:0 0 1.6rem;}
#royaLibrary .sv-box{display:flex; flex-direction:column; gap:1.1rem;
  padding:1.85rem 2.35rem; border:1px solid rgba(199,148,61,.26);
  background:rgba(199,148,61,.04);}
/* No measure cap. 74ch froze the paragraph at 772px however wide the panel
   got, so at a 1920px window 695px of it — very nearly half — stood empty
   beside text that had stopped. The panel is as wide as the grid under it,
   and the prose now uses that. */
#royaLibrary .sv-p{margin:0; max-width:none; font-family:var(--book);
  font-size:1.3125rem; line-height:1.54; color:var(--bone);}
/* the mark and its caption: side by side where there is room for both, and the
   caption underneath once there is not */
#royaLibrary .sv-mark{display:flex; align-items:center; gap:1.25rem;}
#royaLibrary .sv-art{flex:1 1 auto; min-width:0;}
/* The caption was 26rem and would not shrink, so on a narrower page it took
   its full 416px out of the row and left the mark with whatever remained —
   389px at a 1280px window, against 1029px at 1920. It now yields. */
#royaLibrary .sv-cap{flex:0 1 auto; max-width:21rem; font-family:var(--cond);
  font-size:.71875rem; letter-spacing:.16em; text-transform:uppercase;
  line-height:1.5; color:rgba(221,210,191,.5);}
#royaLibrary .sv-foot{display:flex; justify-content:flex-end; align-items:baseline;
  gap:.75rem; margin:0; font-family:var(--cond); font-size:.8125rem;
  letter-spacing:.2em; text-transform:uppercase;}
#royaLibrary .sv-foot b{font-weight:500; color:var(--ochre)}
#royaLibrary .sv-foot i{font-style:normal; color:rgba(199,148,61,.5)}
#royaLibrary .sv-foot span{color:rgba(221,210,191,.58)}

/* ── the marks ──
   An SVG is stretched to the row (preserveAspectRatio="none"), which is right
   for a rule or a repeat and wrong for a circle, so anything round is built
   from boxes in a flex row instead and stays round at any width. */
#royaLibrary .sv-svg{display:block; width:100%; overflow:hidden;}
#royaLibrary .sv-row{display:flex; align-items:center; width:100%;}
#royaLibrary .sv-gap{flex:1 1 0; height:1px; background:var(--sv-rule);}
#royaLibrary .sv-dot, #royaLibrary .sv-ring{flex:0 0 auto; border-radius:50%;
  box-sizing:border-box;}
#royaLibrary .sv-box2{flex:0 0 auto; box-sizing:border-box;}
#royaLibrary .sv-film{display:flex; flex-direction:column; gap:4px;
  width:100%; overflow:hidden;}
#royaLibrary .sv-film .sv-gap{height:0}
#royaLibrary .sv-perf{flex:0 0 auto; width:11px; height:7px; border-radius:1.5px;
  box-sizing:border-box; border:1px solid var(--sv-mark);}
#royaLibrary .sv-filmline{height:1px}

/* ── on a handset ──
   Scoped to .mob. The panel sits in the scrolling body beside .mob-count and
   .mob-grid, NOT inside .mob-head — that block is position:sticky, and while
   the panel was in it the synopsis froze to the top of the screen and held
   the cards below the fold with no way to scroll to them. .mob-sec is not the
   hook either: the panel is not inside one. */
#royaLibrary .mob .sv{margin:0 0 1.15rem}
#royaLibrary .mob .sv-box{padding:1.35rem 1.15rem; gap:1rem}
#royaLibrary .mob .sv-p{font-size:1.0625rem; line-height:1.52; max-width:none}
/* the caption cannot sit beside the mark at this width without taking the
   room the mark needs to be read at all, so it drops underneath it */
#royaLibrary .mob .sv-mark{flex-direction:column; align-items:stretch; gap:.56rem}
#royaLibrary .mob .sv-cap{max-width:none; font-size:.65625rem; letter-spacing:.14em}
#royaLibrary .mob .sv-foot{font-size:.75rem; gap:.6rem}
/* a belt-and-braces floor: even if this panel is ever moved into a row that
   is short of width, the mark keeps enough of it to be a mark */
#royaLibrary .sv-art{min-width:11rem}

/* ── on paper ──
   The ochre the marks are cut from is a light on a dark ground; on this theme
   it needs to be an ink on a pale one, or the whole device disappears. */
:root[data-lt="light"] #royaLibrary .sv{--sv-mark:rgba(120,88,30,.72); --sv-hi:#7c5a1c;
  --sv-soft:rgba(120,88,30,.5); --sv-faint:rgba(120,88,30,.34);
  --sv-rule:rgba(96,76,42,.3);}
:root[data-lt="light"] #royaLibrary .sv-box{background:rgba(255,252,243,.45);
  border-color:rgba(96,76,42,.34)}
:root[data-lt="light"] #royaLibrary .sv-p{color:var(--ink)}
:root[data-lt="light"] #royaLibrary .sv-cap{color:rgba(74,59,33,.72)}
:root[data-lt="light"] #royaLibrary .sv-foot span{color:rgba(74,59,33,.72)}
:root[data-lt="light"] #royaLibrary .sv-foot i{color:rgba(96,76,42,.5)}