:root {
  --night: #1a120c; --gold: #c89a4b; --parch: #f1dfb8; --ink: #2b1a10; --warn: #f0a868;
  --card-bg: #1a120c; --card-edge: #c89a4b; --card-text: #f1dfb8;
}
.dust-creek:is([data-tone="1"], [data-tone="2"]) { --night: #0b1f38; --gold: #9cc3f0; --parch: #e8f1ff; }
* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; background: var(--night); color: var(--parch); overflow: hidden; }
body { font-family: "IM Fell English", Georgia, serif; }

/* come from the library's dive (index.html): its plate under the page, placed like the canvas's picture, until the reader draws over it */
html.landing { background: var(--plate) center / var(--fit, cover) no-repeat var(--night); } html.landing body { background: transparent; }
#scene { position: fixed; inset: 0; width: 100vw; height: 100vh; object-fit: cover; cursor: pointer; display: block; }

#satchel { position: fixed; top: 14px; right: 16px; display: flex; gap: 8px; z-index: 2; }
.slot { width: 38px; height: 38px; border-radius: 50%; border: 1.5px solid var(--gold); background: color-mix(in srgb, var(--night) 80%, transparent);
  display: grid; place-items: center; color: var(--gold); box-shadow: 0 2px 8px rgba(0,0,0,.4); }
.slot.empty { opacity: .35; }

/* the text and the cards float in two compact panels, so the picture between them stays clear */
#band { position: fixed; left: 0; right: 0; bottom: 0; z-index: 1; display: flex; gap: 20px; align-items: flex-end; justify-content: space-between;
  padding: 0 max(16px, 3vw) 20px; pointer-events: none;
  opacity: 0; transform: translateY(24px); transition: opacity .6s ease, transform .6s ease; }
#band.in { opacity: 1; transform: none; }
#band.in > * { pointer-events: auto; }
.story { position: relative; max-width: 58ch; max-height: calc(100vh - 110px); overflow-y: auto; overscroll-behavior: contain; padding: 16px 20px 12px; border-radius: 8px;
  background: color-mix(in srgb, var(--night) 84%, transparent); box-shadow: 0 8px 24px rgba(0,0,0,.45); backdrop-filter: blur(3px); }
#hide-band { position: absolute; top: 10px; right: 10px; font: 12px "Special Elite", monospace; color: var(--gold); background: none; border: 1px solid var(--gold); border-radius: 4px; padding: 3px 7px; cursor: pointer; }
#hide-band:hover, #hide-band:focus-visible { background: var(--night); }
#show-band { position: fixed; left: max(16px, 3vw); bottom: 20px; z-index: 1; font: 13px "Special Elite", monospace; color: var(--gold); cursor: pointer;
  background: color-mix(in srgb, var(--night) 84%, transparent); border: 1px solid var(--gold); border-radius: 4px; padding: 7px 12px; display: none; }
body.band-hidden #band { opacity: 0; transform: translateY(110%); }
body.band-hidden #band > * { pointer-events: none; }
body.band-hidden #show-band { display: block; }
#title { font-family: "Rye", serif; font-weight: normal; font-size: clamp(22px, 2.4vw, 30px); margin: 0 90px 8px 0; color: var(--gold); letter-spacing: .5px; }
#text p { margin: 0 0 8px; font-size: clamp(15px, 1.15vw, 18px); line-height: 1.42; }
#text .found { font-style: italic; color: var(--gold); }
#text em { font-style: italic; color: color-mix(in srgb, var(--parch) 80%, var(--gold)); }

#hand { display: flex; gap: 12px; padding-bottom: 6px; }
.card { --r: calc((var(--i) - 1) * 4deg); width: 156px; height: 262px; padding: 7px; border-radius: 7px; cursor: pointer;
  display: flex; flex-direction: column; font: inherit; text-align: center;
  background: var(--card-bg); border: 2px solid var(--card-edge); color: var(--card-text); box-shadow: 0 10px 22px rgba(0,0,0,.55);
  transform: rotate(var(--r)) translateY(0); transition: transform .25s ease, box-shadow .25s ease;
  animation: deal .55s cubic-bezier(.2,.9,.3,1.2) both; animation-delay: calc(var(--i) * 110ms + 150ms); }
.card:hover, .card:focus-visible { transform: rotate(0deg) translateY(-14px); box-shadow: 0 18px 30px rgba(0,0,0,.6); outline: none; }
.card:focus-visible { border-color: #fff; }
@keyframes deal { from { opacity: 0; transform: translateY(120px) rotate(calc(var(--r) - 12deg)); } }
.card .num { font-family: "Rye", serif; font-size: 15px; color: var(--card-edge); }
.card .art { flex: 1; margin: 5px 0; border: 1px solid var(--card-edge); overflow: hidden; position: relative; }
.card .art canvas { position: absolute; inset: 0; width: 100%; height: 100%; }
.card .ttl { font-family: "Rye", serif; font-size: 16px; letter-spacing: .3px; line-height: 1.15; }
.card .sub { font-size: 15px; line-height: 1.2; margin-top: 4px; min-height: 2.4em; }
.card .need svg { width: 13px; height: 13px; vertical-align: -2px; }
#text .found svg { width: 18px; height: 18px; vertical-align: -3px; }
.card .need { font-family: "Special Elite", monospace; font-size: 12.5px; line-height: 1.2; color: var(--warn); margin-top: 3px; }
.dust-creek .card:is(.tone-1, .tone-2) { --card-bg: #0b1f38; --card-edge: #9cc3f0; --card-text: #e8f1ff; }
.card.locked { cursor: not-allowed; }
.card.locked .art, .card.locked .ttl, .card.locked .sub { filter: grayscale(.9) brightness(.6); } /* the reason it is locked stays bright */
.card.locked:hover { transform: rotate(var(--r)); }
.card.locked .art::after { content: ""; position: absolute; inset: 0; background: repeating-linear-gradient(-35deg, transparent 0 12px, rgba(0,0,0,.35) 12px 14px); }

#to-gallery, #to-shelf { position: fixed; top: 20px; left: 16px; z-index: 2; font-family: "Special Elite", monospace; font-size: 13px; color: var(--gold); text-decoration: none;
  padding: 6px 10px; border: 1px solid var(--gold); border-radius: 4px; background: color-mix(in srgb, var(--night) 70%, transparent); }
#to-gallery:hover, #to-gallery:focus-visible, #to-shelf:hover, #to-shelf:focus-visible { background: var(--night); }
#to-shelf { top: 56px; }

/* the gallery: every scene on one page */
html.gallery-mode, html.gallery-mode body { overflow: auto; height: auto; }
.gallery-mode #scene, .gallery-mode #band, .gallery-mode #satchel, .gallery-mode #to-gallery, .gallery-mode #to-shelf, .gallery-mode #show-band { display: none !important; }
#gallery { padding: 32px max(16px, 4vw) 48px; max-width: 1500px; margin: 0 auto; }
#gallery header { margin-bottom: 24px; }
#gallery h1 { font-family: "Rye", serif; font-weight: normal; color: var(--gold); font-size: clamp(28px, 4vw, 44px); margin: 0 0 6px; }
#gallery header p { margin: 0 0 12px; font-size: 17px; }
#gallery .touch { display: none; }
@media (hover: none) { #gallery .touch { display: inline; } #gallery .hover { display: none; } }
#gallery header a { font-family: "Special Elite", monospace; color: var(--gold); }
.grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 330px), 1fr)); gap: 18px; }
.tile { position: relative; display: block; aspect-ratio: 16 / 9; border: 2px solid var(--gold); border-radius: 6px; overflow: hidden; background: #0e0a07;
  color: #f1dfb8; text-decoration: none; box-shadow: 0 8px 18px rgba(0,0,0,.45); transition: transform .2s ease; }
.dust-creek .tile:is(.tone-1, .tone-2) { border-color: #9cc3f0; }
.tile:hover, .tile:focus-visible { transform: translateY(-4px); outline: none; }
.tile:focus-visible { border-color: #fff; }
.tile canvas { position: absolute; inset: 0; width: 100%; height: 100%; }
.tile .num, .tile .ttl, .tile .end { position: absolute; font-family: "Rye", serif; text-shadow: 0 1px 6px rgba(0,0,0,.9); }
.tile .num { top: 8px; left: 10px; font-size: 15px; color: var(--gold); }
.dust-creek .tile:is(.tone-1, .tone-2) .num { color: #9cc3f0; }
.tile .ttl { left: 10px; right: 10px; bottom: 8px; font-size: 18px; }
.tile .end { top: 8px; right: 10px; font-family: "Special Elite", monospace; font-size: 12px; text-transform: uppercase; letter-spacing: 1px; }
.tile::after { content: ""; position: absolute; inset: 55% 0 0; background: linear-gradient(transparent, rgba(0,0,0,.6)); pointer-events: none; }
.tile .ttl, .tile .num, .tile .end { z-index: 1; }

/* phones held upright: the picture across the top, the text and the cards under it */
@media (orientation: portrait) {
  html, body { overflow: auto; }
  #scene { position: relative; height: auto; aspect-ratio: 16 / 9; }
  html.landing { background-position: top; background-size: 100% auto; }
  #to-gallery, #to-shelf { top: 12px; left: 10px; font-size: 11px; padding: 4px 7px; }
  #to-shelf { top: 42px; }
  #band { position: relative; flex-direction: column; align-items: stretch; padding: 18px 16px 28px; background: var(--night); }
  .story { max-width: none; max-height: none; overflow: visible; padding: 0; background: none; box-shadow: none; backdrop-filter: none; }
  #hide-band, #show-band { display: none !important; }
  body.band-hidden #band { opacity: 1; transform: none; }
  #hand { justify-content: center; flex-wrap: wrap; }
  .card { width: 42vw; max-width: 156px; height: calc(min(42vw, 156px) * 1.68); }
}
@media (prefers-reduced-motion: reduce) { .card { animation: none; } #band { transition: none; } }

/* Corbenic: gold on vellum, then verdigris, then blood */
.corbenic { --night: #1c140b; --gold: #d2a94a; --parch: #f3e6c6; --card-bg: #1c140b; --card-edge: #d2a94a; --card-text: #f3e6c6; font-family: "EB Garamond", Georgia, serif; }
.corbenic[data-tone="1"] { --night: #141a14; --gold: #8fae8c; --parch: #e4e6d4; }
.corbenic[data-tone="2"] { --night: #170807; --gold: #c2463a; --parch: #f0dcd2; }
.corbenic .card.tone-1 { --card-bg: #141a14; --card-edge: #8fae8c; --card-text: #e4e6d4; }
.corbenic .card.tone-2 { --card-bg: #170807; --card-edge: #c2463a; --card-text: #f0dcd2; }
.corbenic .tile.tone-1 { border-color: #8fae8c; }
.corbenic .tile.tone-2 { border-color: #c2463a; }
.corbenic #title, .corbenic .card .ttl, .corbenic .tile :is(.ttl, .end), .corbenic #gallery h1 { font-family: "Grenze Gotisch", serif; font-weight: 500; }
/* roman numerals in a gothic hand are hard to tell apart */
.corbenic :is(.card, .tile) .num { font-family: "EB Garamond", serif; font-weight: 600; letter-spacing: 1px; }

/* a manuscript page is shown whole, border and all, on the dark of the table */
.corbenic #scene { object-fit: contain; }

/* Canicule: riso inks on newsprint, pink and yellow, then blue night, then red */
.canicule { --night: #1b1530; --gold: #ff48b0; --parch: #f5efe2; --card-bg: #1b1530; --card-edge: #ff48b0; --card-text: #f5efe2; font-family: "Courier Prime", "Courier New", monospace; }
.canicule[data-tone="1"] { --night: #0e1a33; --gold: #4aa8ff; --parch: #eaf2ff; }
.canicule[data-tone="2"] { --night: #1e0c12; --gold: #f15060; --parch: #fbe9ea; }
.canicule .card.tone-1 { --card-bg: #0e1a33; --card-edge: #4aa8ff; --card-text: #eaf2ff; }
.canicule .card.tone-2 { --card-bg: #1e0c12; --card-edge: #f15060; --card-text: #fbe9ea; }
.canicule .tile.tone-1 { border-color: #4aa8ff; } .canicule .tile.tone-2 { border-color: #f15060; }
.canicule #title, .canicule .card .ttl, .canicule .tile :is(.num, .ttl), .canicule #gallery h1 { font-family: "Anton", sans-serif; font-weight: normal; text-transform: uppercase; letter-spacing: 1px; }
.canicule #text p { font-size: clamp(14px, 1.05vw, 17px); }

/* Les Grands Bois: pencils on cream paper, autumn, then night, then deeper night */
.grands-bois { --night: #2a2118; --gold: #e0a458; --parch: #f6eedc; --card-bg: #2a2118; --card-edge: #e0a458; --card-text: #f6eedc; font-family: "Nunito", system-ui, sans-serif; }
.grands-bois[data-tone="1"] { --night: #141c2e; --gold: #9fb4e0; --parch: #e8ecf6; }
.grands-bois[data-tone="2"] { --night: #0e1424; --gold: #c7b3e0; --parch: #ece8f6; }
.grands-bois .card.tone-1 { --card-bg: #141c2e; --card-edge: #9fb4e0; --card-text: #e8ecf6; }
.grands-bois .card.tone-2 { --card-bg: #0e1424; --card-edge: #c7b3e0; --card-text: #ece8f6; }
.grands-bois .tile.tone-1 { border-color: #9fb4e0; } .grands-bois .tile.tone-2 { border-color: #c7b3e0; }
.grands-bois #title, .grands-bois .card .ttl, .grands-bois .tile :is(.num, .ttl), .grands-bois #gallery h1 { font-family: "Caveat", cursive; font-weight: 600; }
.grands-bois #title { font-size: clamp(28px, 3vw, 38px); }
.grands-bois .card .ttl { font-size: 21px; }

/* the library: the site's front page, a painted Long Room and its reading table */
.library { --night: #120c08; }
.library #hall { position: fixed; left: 0; top: 0; width: 100%; height: 100%; display: block; opacity: 0; transition: opacity .7s ease; }
.library #hall.ready { opacity: 1; }
.library header { position: fixed; top: 16px; left: 18px; z-index: 2; pointer-events: none; text-shadow: 0 1px 8px rgba(0,0,0,.8); }
.library h1 { margin: 0; font-weight: normal; font-size: 22px; color: var(--gold); letter-spacing: .5px; }
.library .lede { margin: 2px 0 0; font-size: 14px; opacity: .8; }
.library .books { position: fixed; inset: 0; z-index: 1; pointer-events: none; }
/* each book a link over its painted self: the hit area is its silhouette, the ring its outline */
.library .book { position: absolute; left: 0; top: 0; display: block; color: var(--parch); text-decoration: none; outline: none; }
.library .book svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.library .book polygon { fill: transparent; stroke: none; }
.library.at-table:not(.diving) .book polygon { pointer-events: all; cursor: pointer; }
.library .book:focus-visible polygon { stroke: #fff4d8; stroke-width: 2; stroke-linejoin: round; filter: drop-shadow(0 0 3px rgba(0,0,0,.9)); }
.library .cap { position: absolute; left: 50%; top: calc(100% + 10px); width: max-content; max-width: 230px; transform: translateX(-50%); text-align: center;
  font-size: 15px; line-height: 1.25; text-shadow: 0 1px 6px #000, 0 0 2px #000; opacity: 0; transition: opacity .2s ease; pointer-events: none; }
.library .cap b { display: block; font-weight: normal; font-size: 21px; color: var(--book); }
.library .book:is(:hover, :focus-visible) .cap { opacity: 1; }
.library.diving .cap { opacity: 0 !important; }
.book.dust { --book: #e0b060; } .book.dust b { font-family: "Rye", serif; font-size: 19px; }
.book.grail { --book: #e2b85a; } .book.grail b { font-family: "Grenze Gotisch", serif; font-weight: 500; font-size: 24px; }
.book.riso { --book: #ff6cc0; } .book.riso b { font-family: "Anton", sans-serif; text-transform: uppercase; letter-spacing: 1px; }
.book.pencil { --book: #f0b468; } .book.pencil b { font-family: "Caveat", cursive; font-weight: 600; font-size: 27px; }
.library .controls { position: fixed; right: 16px; bottom: 16px; z-index: 2; display: flex; gap: 8px; }
.library .controls button { font: 12px "Special Elite", monospace; color: var(--gold); cursor: pointer; padding: 5px 9px; border: 1px solid color-mix(in srgb, var(--gold) 60%, transparent); border-radius: 4px;
  background: color-mix(in srgb, var(--night) 70%, transparent); }
.library .controls button:hover, .library .controls button:focus-visible { background: var(--night); border-color: var(--gold); }
.library .controls button:focus-visible { outline: 2px solid #fff4d8; outline-offset: 2px; }
.library .controls button[hidden] { display: none; }
.library #style span { opacity: .5; } .library #style[aria-pressed="false"] .oil, .library #style[aria-pressed="true"] .broken { opacity: 1; }
.library.diving :is(header, .controls) { opacity: 0; transition: opacity .3s ease; }
/* no room (no JS, or its pictures failed to load): the four books as a plain list, in their own letters */
.library.plain { overflow: auto; }
.library.plain :is(#hall, .controls, .book svg) { display: none; }
.library.plain :is(header, .books) { position: static; max-width: 34em; margin: 0 auto; padding: 56px 20px 0; text-align: left; pointer-events: auto; }
.library.plain .books { display: grid; gap: 26px; padding-top: 36px; padding-bottom: 56px; }
.library.plain .book { position: static; }
.library.plain .cap { position: static; display: block; width: auto; max-width: none; transform: none; text-align: left; font-size: 17px; opacity: 1; pointer-events: auto; }
.library.plain .cap b { margin-bottom: 3px; }
.library.plain .book:hover b { text-decoration: underline; text-underline-offset: 4px; }
.library.plain .book:focus-visible { outline: 2px solid #fff4d8; outline-offset: 6px; border-radius: 2px; }
/* the dive: the book built again in CSS 3D, a box that rises, opens, riffles its leaves and grows into its first picture */
.dive { position: fixed; inset: 0; z-index: 3; pointer-events: none; overflow: hidden; }
.dive :is(.tome, .cover, .rb, .lb, .leaf, .st) { position: absolute; left: 0; top: 0; transform-origin: 0 0; transform-style: preserve-3d; }
.dive :is(i, .front, .page) { position: absolute; left: 0; top: 0; display: block; transform-origin: 0 0; backface-visibility: hidden; }
/* the boards' edges and the spine, in the cover's own leather; the page block's edges, leaf on leaf */
.dive .lea { background: linear-gradient(color-mix(in srgb, var(--leather) 80%, #000), color-mix(in srgb, var(--leather) 62%, #000)); }
.dive .spine { background: linear-gradient(to right, color-mix(in srgb, var(--leather) 45%, #000), color-mix(in srgb, var(--leather) 85%, #000) 40%, color-mix(in srgb, var(--leather) 60%, #000)); }
.dive .ed { background: linear-gradient(rgba(70,50,25,.08), rgba(70,50,25,.4)), repeating-linear-gradient(#ece0c0, #ad9a70 3px, #ece0c0 6px); }   /* darker toward the back board */
.dive .ed.v { background: linear-gradient(to right, rgba(70,50,25,.08), rgba(70,50,25,.4)), repeating-linear-gradient(to right, #ece0c0, #ad9a70 3px, #ece0c0 6px); }
/* the paste-down inside the front cover, the leather turned in round it */
.dive .pd { background: linear-gradient(to left, #b9a47e, #e6d6b2 10%, #eadcbc); box-shadow: inset 0 0 0 12px var(--leather); }
/* a page: the paper darkening into the gutter, printed lines between its margins, a drop cap on some. It is cut in strips, each
   given its slice (--x from the page's left edge; --W its width): the right page's (its spine on the left, like a recto), a leaf's
   recto and verso, the left pile's top (a verso). ::after is the shade a turning strip takes, or the shadow a leaf casts on it */
.dive .pg { overflow: hidden; background: linear-gradient(to right, #8c7450, #c4ae87 14px, #ecdcba 40px, #f3e6c8 64px) calc(0px - var(--x)) 0 / 64px 100% no-repeat, #f3e6c8; }
.dive .page img { position: absolute; box-shadow: 0 0 0 1px rgba(60,40,20,.35); }
.dive .tx { --lines: repeating-linear-gradient(rgba(84,70,52,.5) 0 6px, transparent 6px 17px); overflow: hidden;
  background: var(--lines) calc(var(--m0) - var(--x)) 64px / calc(var(--W) - var(--m0) - var(--m1)) calc(100% - 160px) no-repeat,
    linear-gradient(to var(--to), #8c7450, #c4ae87 14px, #e8d9b8 40px, #f1e6cb 64px) calc(0px - var(--x)) 0 / calc(var(--W) + 2px) 100% no-repeat, #f1e6cb; }
.dive .re { --m0: 52px; --m1: 42px; --to: right; } .dive .vo { --m0: 42px; --m1: 52px; --to: left; }
.dive :is(.tx, .pg)::after { content: ""; position: absolute; inset: 0; background: #22150a; opacity: 0; }
.dive .dc::before { content: "L"; position: absolute; left: calc(50px - var(--x)); top: 58px; width: 60px; height: 62px; padding-left: 2px; background: #f1e6cb; color: #7a2418; font: 64px/1 "IM Fell English", Georgia, serif; }
/* a phone held upright: the room is a band across the screen (library.ts), the title over it in the dark */
@media (orientation: portrait) {
  .library header { top: auto; left: 16px; right: 16px; bottom: calc(100% - var(--band, 40%) + 20px); text-align: center; }
  .library h1 { font-size: 30px; } .library .lede { font-size: 15px; margin-top: 6px; }
  .library .cap { max-width: 150px; font-size: 13px; } .library .cap b { font-size: 17px; }
}
/* a touch screen has no hover to name a book: at the table each shows its title under it, no wider than itself */
@media (hover: none) {
  .library.at-table .cap { opacity: 1; font-size: 0; top: calc(100% + 6px); max-width: 100%; }
  .library.at-table .cap b { font-size: 16px; line-height: 1.1; } .library.at-table .book.pencil b { font-size: 20px; line-height: .9; }
}