/* What every shelf shares (Books at /shelf/, and Music, Shows & Movies and Games at /shelf/<kind>/): the site's
   rice paper and ink, the top (Shelf, and a button for each kind), the frosted glass the rows stand on, a section's order
   and its shuffle, and the card that opens on one thing. Each shelf's page adds its own things and how they stand. Colors are tokens; the dark set is
   repeated for both ways of choosing night. */
:root {
  --page: #efe6d2; --card: #f6efe0; --ink: #2b241e; --muted: #75695b; --line: rgba(43, 36, 30, .22); --lift: rgba(43, 36, 30, .18);
  --seal: #b33a26; --seal-ink: #f7eee0; --glass: rgba(251, 246, 236, .5); --glass-edge: rgba(255, 255, 255, .55); --shade: rgba(33, 26, 20, .32); --cast: rgba(33, 26, 20, .2); --veil: rgba(34, 27, 22, .55); --dim: 1;
  --unread: grayscale(1) sepia(.15) contrast(.72) brightness(1.14);   /* something still being read (or played, or watched), grayed out */
  --grain: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .33 0 0 0 0 .26 0 0 0 0 .18 .7 0 0 0 -.3'/%3E%3C/filter%3E%3Cfilter id='m'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.018' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .5 0 0 0 0 .4 0 0 0 0 .25 .16 0 0 0 -.05'/%3E%3C/filter%3E%3Crect width='240' height='240' filter='url(%23m)'/%3E%3Crect width='240' height='240' filter='url(%23g)'/%3E%3C/svg%3E");
  --brush: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 400 10' preserveAspectRatio='none'%3E%3Cpath d='M1 5.8C28 3.4 90 2.7 160 3.2S300 2.9 360 3.5C382 3.7 395 4.3 399 5.3C392 6.5 368 7 328 7.1C258 7.4 188 7.9 118 7.5C68 7.2 24 7.7 1 5.8Z'/%3E%3C/svg%3E");
}
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) {
  --page: #191613; --card: #221e1a; --ink: #ece3d1; --muted: #a99e8e; --line: rgba(236, 227, 209, .2); --lift: rgba(0, 0, 0, .45);
  --seal: #e0765c; --seal-ink: #1c1511; --glass: rgba(44, 38, 33, .5); --glass-edge: rgba(255, 255, 255, .07); --shade: rgba(0, 0, 0, .6); --cast: rgba(0, 0, 0, .45); --veil: rgba(8, 6, 5, .7); --dim: .84;
  --unread: grayscale(1) contrast(.8) brightness(.62);
  --grain: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .95 0 0 0 0 .9 0 0 0 0 .8 .45 0 0 0 -.2'/%3E%3C/filter%3E%3Crect width='240' height='240' filter='url(%23g)'/%3E%3C/svg%3E"); } }
:root[data-theme="dark"] {
  --page: #191613; --card: #221e1a; --ink: #ece3d1; --muted: #a99e8e; --line: rgba(236, 227, 209, .2); --lift: rgba(0, 0, 0, .45);
  --seal: #e0765c; --seal-ink: #1c1511; --glass: rgba(44, 38, 33, .5); --glass-edge: rgba(255, 255, 255, .07); --shade: rgba(0, 0, 0, .6); --cast: rgba(0, 0, 0, .45); --veil: rgba(8, 6, 5, .7); --dim: .84;
  --unread: grayscale(1) contrast(.8) brightness(.62);
  --grain: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .95 0 0 0 0 .9 0 0 0 0 .8 .45 0 0 0 -.2'/%3E%3C/filter%3E%3Crect width='240' height='240' filter='url(%23g)'/%3E%3C/svg%3E"); }
*, *::before, *::after { box-sizing: border-box; }
html { background: var(--page); }
body { margin: 0; min-height: 100vh; background: var(--page) var(--grain); color: var(--ink); font: 19px/1.5 'EB Garamond', Georgia, 'Times New Roman', serif;
  padding: 36px 20px calc(env(safe-area-inset-bottom, 0px) + 56px); }
main { max-width: 1040px; margin: 0 auto; }
a { color: inherit; }
:focus-visible { outline: 2px solid var(--seal); outline-offset: 3px; border-radius: 2px; }

/* ---------- the top: Shelf, and a button for each kind of thing it holds (shelf.js writes them) ---------- */
h1 { font-size: clamp(40px, 7vw, 60px); font-weight: 500; line-height: 1.05; margin: 0; letter-spacing: -.01em; }
/* Like the home page's rooms, each kind is its own object in its own type, and moves (and sounds) when touched. The one
   being shown is underlined in ink; the rest carry a "soon" sticker until they have something on them. */
.kinds { display: flex; flex-wrap: wrap; align-items: center; gap: 22px 28px; margin: 26px 0 0; }
.kind { position: relative; display: inline-flex; align-items: center; height: 40px; margin: 0; padding: 0; border: 0; background: none; color: inherit; font: inherit;
  text-decoration: none; cursor: pointer; -webkit-tap-highlight-color: transparent; }
.kind:focus-visible { outline: 2px solid var(--seal); outline-offset: 6px; border-radius: 6px; }
/* the ink under the shelf you're on: going to another shelf, it slides across to that one (the view transition below) */
.kind .ink { position: absolute; left: 2px; right: 2px; bottom: -14px; height: 6px; background: var(--ink); opacity: .5; view-transition-name: shelf-ink;
  -webkit-mask: var(--brush) center / 100% 100% no-repeat; mask: var(--brush) center / 100% 100% no-repeat; }
.kind .soon { position: absolute; z-index: 2; top: -9px; right: -11px; padding: 3px 5px 2px; border-radius: 2px; background: var(--seal); color: var(--seal-ink);
  font: 500 10.5px/1 'EB Garamond', Georgia, serif; letter-spacing: .14em; text-transform: uppercase; transform: rotate(9deg); box-shadow: 0 1px 2px rgba(0, 0, 0, .3); pointer-events: none; }
.kind.nudge .soon { animation: nudge .5s ease; }
@keyframes nudge { 30% { transform: rotate(-4deg) scale(1.15); } 60% { transform: rotate(14deg); } }

/* Books: a clothbound board, green buckram with a gilt title and rule. Touched, the cover swings open on its hinge. */
.kind.cloth { perspective: 260px; }
.kind.cloth .page { position: absolute; inset: 1px 0 1px 3px; border-radius: 1px 3px 3px 1px; filter: brightness(var(--dim));
  background: repeating-linear-gradient(transparent 0 7px, rgba(60, 45, 30, .16) 7px 8px) 16px 9px / calc(100% - 28px) 22px no-repeat, #f6eedb;
  box-shadow: 1px 1px 0 #e3d8c0, 2px 2px 0 #d3c6aa, 0 7px 12px -6px rgba(0, 0, 0, .4); }
.kind.cloth .board { position: relative; display: flex; align-items: center; height: 40px; padding: 0 17px 0 25px; border-radius: 2px 4px 4px 2px; transform-origin: 0 50%;
  background: linear-gradient(90deg, rgba(0, 0, 0, .34) 0 8px, rgba(255, 255, 255, .1) 8px 9px, rgba(0, 0, 0, .12) 9px 11px, transparent 11px),
    repeating-linear-gradient(0deg, rgba(255, 255, 255, .045) 0 1px, transparent 1px 2px), repeating-linear-gradient(90deg, rgba(0, 0, 0, .07) 0 1px, transparent 1px 2px), #2c5140;
  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .25), 0 1px 1px rgba(0, 0, 0, .15), 0 7px 12px -6px rgba(0, 0, 0, .4); transition: transform .6s cubic-bezier(.3, .9, .3, 1); }
.kind.cloth .board::before { content: ""; position: absolute; inset: 5px 6px 5px 15px; border: 1px solid rgba(217, 180, 96, .7); border-radius: 1px; }
.kind.cloth .board span { position: relative; padding-top: 2px; font: 700 17px/1 Cinzel, 'Trajan Pro', Georgia, serif; letter-spacing: .09em; color: #d7b25f;
  background: linear-gradient(#f6e2a3, #c89b3f 55%, #efd489); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent;
  filter: drop-shadow(0 1px 0 rgba(0, 0, 0, .5)); }
.kind.cloth.go .board { transform: rotateY(-58deg); }

/* Music: a cassette, a mixtape labeled in marker. Touched, its reels turn. */
.kind.tape { gap: 7px; padding: 0 8px; border-radius: 6px;
  background: radial-gradient(circle at 5px 5px, #6d6d74 1.3px, transparent 1.8px), radial-gradient(circle at calc(100% - 5px) 5px, #6d6d74 1.3px, transparent 1.8px),
    radial-gradient(circle at 5px calc(100% - 5px), #6d6d74 1.3px, transparent 1.8px), radial-gradient(circle at calc(100% - 5px) calc(100% - 5px), #6d6d74 1.3px, transparent 1.8px),
    linear-gradient(#3d3d44, #25252a);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .14), inset 0 -3px 0 rgba(0, 0, 0, .3), 0 4px 1px rgba(0, 0, 0, .12), 0 10px 14px -6px rgba(0, 0, 0, .45); }
.kind.tape .label { display: flex; align-items: center; height: 29px; padding: 6px 11px 0; border-radius: 2px; color: #1f2a55; font: 400 19px/1 'Permanent Marker', 'Marker Felt', cursive;
  background: linear-gradient(#e2573a 0 3px, #f0b43f 3px 6px, transparent 6px), repeating-linear-gradient(transparent 0 8px, rgba(70, 110, 170, .22) 8px 9px) 0 11px, #f5eedb;
  filter: brightness(var(--dim)); }
.kind.tape .label span { transform: rotate(-2deg); }
/* a reel: its hub's six teeth, the tape wound round it (more on the left), and the dark window behind */
.kind.tape .reel { position: relative; display: block; width: 18px; height: 18px; border-radius: 50%; --wound: 7.4px;
  background: radial-gradient(circle, #1b1b1f 0 1.7px, transparent 2px 4.6px, #b8ad96 4.8px 5.4px, #5b4330 5.6px var(--wound), #151518 calc(var(--wound) + .3px)),
    repeating-conic-gradient(#efe7d3 0 38deg, #1b1b1f 38deg 60deg); box-shadow: inset 0 0 0 1px #0d0d10; }
.kind.tape .reel + .label + .reel { --wound: 6px; }
.kind.tape.go .reel { animation: spin .5s linear 2; }
@keyframes spin { to { transform: rotate(-1turn); } }

/* Shows & Movies: a cinema marquee, its name in lights between two rows of bulbs. Touched, the bulbs chase. */
.kind.marquee { padding: 1px 17px 0; border-radius: 4px; background: radial-gradient(ellipse at 50% 40%, #3a1f19, #1c1210 75%); color: #fff2d2;
  font: 400 18px/1 Limelight, 'Didot', Georgia, serif; letter-spacing: .03em; text-shadow: 0 0 6px rgba(255, 206, 120, .75), 0 0 1px #fff;
  box-shadow: inset 0 0 0 2px #8c2a22, inset 0 0 0 3px #3b0f0b, 0 4px 1px rgba(0, 0, 0, .12), 0 10px 14px -6px rgba(0, 0, 0, .45); }
.kind.marquee::before, .kind.marquee::after { content: ""; position: absolute; inset: 0 5px; pointer-events: none;
  --bulb: radial-gradient(circle, #fff6d8 0 1.1px, rgba(255, 200, 100, .75) 1.6px, transparent 2.6px);
  background: var(--bulb) 0 1px / 14px 7px repeat-x, var(--bulb) 0 calc(100% - 1px) / 14px 7px repeat-x; }
.kind.marquee::after { background-position: 7px 1px, 7px calc(100% - 1px); }
.kind.marquee span { position: relative; }
.kind.marquee.go::before { animation: chase .8s steps(1) 1; }
.kind.marquee.go::after { animation: chase .8s steps(1) -.1s 1; }
@keyframes chase { 0%, 25%, 50%, 75% { opacity: 1; } 12.5%, 37.5%, 62.5%, 87.5% { opacity: .12; } }

/* Games: a game cartridge, gray plastic with grip ridges and a label. Touched, it's pushed into the slot and pops up.
   The label's top padding centres the word's capitals (and their shadow) in the dark below its stripes. */
.kind.cart { filter: drop-shadow(0 1px .5px rgba(0, 0, 0, .2)) drop-shadow(0 6px 5px rgba(0, 0, 0, .22)); }
.kind.cart .shell { display: flex; align-items: center; height: 40px; padding: 8px 9px 5px; filter: brightness(var(--dim));
  clip-path: polygon(0 3px, 3px 0, calc(100% - 10px) 0, 100% 10px, 100% calc(100% - 4px), calc(100% - 4px) 100%, 4px 100%, 0 calc(100% - 4px));
  background: repeating-linear-gradient(90deg, rgba(0, 0, 0, .16) 0 1px, rgba(255, 255, 255, .35) 1px 2px, transparent 2px 5px) 6px 2px / calc(100% - 20px) 4px no-repeat,
    linear-gradient(#cfccc5, #a9a59d); }
.kind.cart .label { display: grid; place-items: center; height: 100%; padding: 5px 9px 0; border-radius: 2px; color: #fff; font: 400 16px/1 Bungee, Impact, sans-serif;
  text-shadow: 2px 2px 0 #d8412f; background: linear-gradient(#e8452f 0 3px, #f3b632 3px 5px, #2b8ad0 5px 7px, transparent 7px), #1f1c26;
  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .4); }
.kind.cart.go .shell { animation: insert .55s cubic-bezier(.3, .9, .3, 1); }
@keyframes insert { 30% { transform: translateY(5px) scaleY(.97); } 45% { transform: translateY(4px); } 75% { transform: translateY(-2px); } }

@media (hover: hover) {
  .kind.cloth:hover .board { transform: rotateY(-58deg); }
  .kind.tape:hover .reel { animation: spin .5s linear 2; }
  .kind.marquee:hover::before { animation: chase .8s steps(1) infinite; }
  .kind.marquee:hover::after { animation: chase .8s steps(1) -.1s infinite; }
  .kind.cart:hover .shell { animation: insert .55s cubic-bezier(.3, .9, .3, 1); }
}

/* ---------- a section of a shelf (a year of books, the artists): its heading, and a count beside it ---------- */
.group { margin-top: 50px; }
.group h2 { font-size: 26px; font-weight: 500; line-height: 1.2; margin: 0; }
.group h2 .count { margin-left: 8px; font-size: 17px; font-weight: 400; font-style: italic; color: var(--muted); }

/* ---------- a section's order (Shelf.order): the Feed's toggle, at the top right beside the heading: the section's own
   order as an icon, or shuffled (each press of Shuffle deals them again) ---------- */
.group .head { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 16px; }
.order { display: flex; gap: 4px; margin-left: auto; padding: 4px; border-radius: 999px; background: var(--glass); box-shadow: inset 0 0 0 1px var(--glass-edge), 0 6px 14px -8px var(--lift);
  -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); }
.order button { display: inline-flex; align-items: center; gap: 7px; padding: 5px 15px 6px; border: 0; border-radius: 999px; background: none; color: var(--muted);
  font: 500 16px/1 'EB Garamond', Georgia, serif; letter-spacing: .02em; cursor: pointer; }
.order button[aria-pressed="true"] { background: var(--ink); color: var(--page); }
.order svg { position: relative; top: 1px; width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }   /* the words sit a pixel high, where Garamond looks centred, and the icon stays level with them */
.order .only { padding-inline: 14px; }   /* an icon alone (the calendar): its page in the middle, its rings standing up off the top */
.order .only svg { top: 0; stroke-width: 1.5; }
.order .dots { stroke-width: 1.9; }   /* the calendar's days */
.order button:active svg { transform: rotate(-12deg); }
.dealt > li { transition: transform .55s cubic-bezier(.25, .9, .3, 1); }

/* ---------- a row's glass: each row stands on its own pane of frosted glass (as the home page's cards do), drawn behind
   it by shelf.js to fit however many things the screen's width puts in it ---------- */
.case { position: relative; margin-top: 14px; }
.pane { position: absolute; border-radius: 12px; background: var(--glass); -webkit-backdrop-filter: blur(10px) saturate(1.15); backdrop-filter: blur(10px) saturate(1.15);
  box-shadow: inset 0 1px 0 var(--glass-edge), 0 0 0 1px var(--line), 0 1px 2px var(--lift), 0 14px 26px -18px var(--lift); pointer-events: none; }

/* ---------- the card: the thing large on the left (#art, the shelf's own), and everything about it (#info) ---------- */
.card { padding: 0; border: 0; background: none; max-width: none; max-height: none; width: min(980px, calc(100vw - 32px)); overflow: visible; color: var(--ink); }
.sheet:focus { outline: none; }
.card::backdrop { background: var(--veil); backdrop-filter: blur(3px); }
.sheet { position: relative; display: grid; grid-template-columns: minmax(200px, 330px) 1fr; gap: 10px 38px; padding: 34px 38px 26px; border-radius: 12px;
  background: var(--card) var(--grain); box-shadow: 0 0 0 1px var(--line), 0 30px 80px rgba(0, 0, 0, .35); max-height: calc(100dvh - 32px); overflow: auto; }
/* The close button: a drawn ×, centred in a faint round chip that sits the same distance in from the top and the right
   (the button itself is bigger than the chip, for fingers). No tap flash on phones, and no hover color left behind. */
.card .x { position: absolute; z-index: 2; top: 10px; right: 10px; width: 44px; height: 44px; display: grid; place-items: center; padding: 0; margin: 0;
  appearance: none; border: 0; background: none; color: var(--muted); cursor: pointer; border-radius: 50%; -webkit-tap-highlight-color: transparent; }
.card .x::before { content: ""; position: absolute; inset: 6px; border-radius: 50%; background: color-mix(in srgb, var(--ink) 7%, transparent); transition: background .15s; }
.card .x svg { position: relative; width: 12px; height: 12px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; transition: color .15s; }
@media (hover: hover) { .card .x:hover { color: var(--seal); } .card .x:hover::before { background: color-mix(in srgb, var(--ink) 11%, transparent); } }
@media (max-width: 760px) { .card .x { top: 6px; right: 6px; } }
.art { display: grid; place-items: center; align-self: start; padding: 26px 0 30px; }
/* the thing on the card is a toy (Shelf.toy): drag to turn it */
.art { touch-action: pan-y; cursor: grab; user-select: none; -webkit-user-select: none; -webkit-touch-callout: none; }
.art img { -webkit-user-drag: none; pointer-events: none; }   /* so a drag turns the thing instead of picking up its picture */
.art:active { cursor: grabbing; }
.art .b3d { transition: transform .35s cubic-bezier(.2, .8, .2, 1); }
.art .hint { margin: 10px 0 0; font-size: 14px; font-style: italic; color: var(--muted); transition: opacity .6s; }
.art.turned .hint { opacity: 0; }
.info { min-width: 0; }
.info .kicker { margin: 0; padding-right: 34px; font-size: 14px; letter-spacing: .12em; text-transform: uppercase; color: var(--muted); }
.info h2 { margin: 4px 0 0; font-size: clamp(30px, 4.2vw, 42px); font-weight: 500; line-height: 1.08; }
.info h2 small { display: block; font-size: .5em; font-style: italic; color: var(--muted); margin-top: 4px; }
.info .by { margin: 6px 0 0; font-size: 21px; }
/* The words stand on frosted glass, as the rows on the shelf do, so the paper's grain doesn't run under them: the facts
   and the blurb on one pane (Shelf.about), then a pane for each part (Shelf.part: worth knowing, the tracks, …). */
.info .part { margin: 14px 0 0; padding: 14px 18px 16px; border-radius: 10px; background: var(--glass);
  -webkit-backdrop-filter: blur(10px) saturate(1.15); backdrop-filter: blur(10px) saturate(1.15);
  box-shadow: inset 0 1px 0 var(--glass-edge), 0 0 0 1px var(--line), 0 1px 2px var(--lift), 0 14px 26px -18px var(--lift); }
.info .about { margin-top: 20px; }
.facts { display: grid; grid-template-columns: repeat(auto-fill, minmax(112px, 1fr)); gap: 10px 20px; margin: 0; }
.facts dt { font-size: 12px; letter-spacing: .12em; text-transform: uppercase; color: var(--muted); }
.facts dd { margin: 1px 0 0; font-size: 18.5px; line-height: 1.25; }
.info .blurb { margin: 0; font-size: 19px; line-height: 1.5; }
.facts + .blurb { margin-top: 14px; padding-top: 13px; border-top: 1px solid var(--line); }
.info h3 { margin: 0 0 8px; font-size: 13px; font-weight: 500; letter-spacing: .14em; text-transform: uppercase; color: var(--muted); }
/* worth knowing: each fact set off by a small seal-red diamond */
.info .known { list-style: none; margin: 0; padding: 0; }
.info .known li { position: relative; margin: 7px 0 0; padding-left: 20px; line-height: 1.45; }
.info .known li:first-child { margin-top: 0; }
.info .known li::before { content: ""; position: absolute; left: 3px; top: .6em; width: 6px; height: 6px; background: var(--seal); opacity: .8; transform: rotate(45deg); }
/* A thing's links are small panes of the same glass, set on the paper so they frost its grain: a hairline edge, a lit top
   edge and a soft shadow; pointed at, they lift and their edge and words turn seal red. */
.info .links { display: flex; flex-wrap: wrap; gap: 10px; margin: 16px 0 0; }
.info .links a { display: inline-flex; align-items: center; gap: 8px; padding: 7px 15px 8px 12px; border: 0; border-radius: 999px; font-size: 17px; line-height: 1.2;
  color: var(--ink); text-decoration: none; background: var(--glass); -webkit-backdrop-filter: blur(10px) saturate(1.15); backdrop-filter: blur(10px) saturate(1.15);
  box-shadow: inset 0 1px 0 var(--glass-edge), 0 0 0 1px var(--line), 0 1px 2px var(--lift), 0 8px 16px -12px var(--lift); transition: transform .2s ease, box-shadow .2s ease, color .15s; }
.info .links a:hover, .info .links a:focus-visible { color: var(--seal); transform: translateY(-2px); outline: none;
  box-shadow: inset 0 1px 0 var(--glass-edge), 0 0 0 1.5px var(--seal), 0 2px 4px var(--lift), 0 14px 22px -14px var(--lift); }
.info .links svg { width: 15px; height: 15px; flex: none; fill: none; stroke: currentColor; stroke-width: 1.4; stroke-linecap: round; stroke-linejoin: round; }
.info .links small { font-size: 14px; color: var(--muted); }
.step { grid-column: 1 / -1; display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: 20px; padding-top: 12px; border-top: 1px solid var(--line); font-size: 17px; }
.step button { appearance: none; border: 0; background: none; color: inherit; font: inherit; cursor: pointer; padding: 6px 2px; }
.step button:hover { color: var(--seal); }
.step span { color: var(--muted); font-size: 15px; }
@media (max-width: 760px) {
  .card { width: 100vw; }
  .sheet { grid-template-columns: 1fr; padding: 22px 20px 18px; border-radius: 12px 12px 0 0; max-height: 100dvh; }
  .art { padding: 18px 0 6px; }
}
html:has(.card[open]) { overflow: hidden; }

/* ---------- going from one shelf to another ---------- */
/* The two pages cross-fade (the site's bar, the paper and the top look the same on both, so they hold still) while the
   ink under the kinds slides from the old shelf to the new one. Browsers without cross-page view transitions just go. */
@view-transition { navigation: auto; }
::view-transition-group(shelf-ink) { animation-duration: .5s; animation-timing-function: cubic-bezier(.3, .8, .25, 1); }
::view-transition-old(root), ::view-transition-new(root) { animation-duration: .3s; }

@media (prefers-reduced-motion: reduce) {
  @view-transition { navigation: none; }
  .art .b3d { transition: none; }
  .kind.cloth .board { transition: none; }
  .kind, .kind *, .kind::before, .kind::after { animation: none !important; }
  .dealt > li { transition: none; }
}