/* The library: a shelf, a card catalogue, and a reading desk */

/* Title with the room's scene beside it, on the right, on every screen size */
.lib-hero { display: flex; align-items: center; gap: 20px 40px; }
.lib-hero .intro { flex: 1 1 auto; min-width: 0; }
.lib-art { flex: 0 0 auto; width: clamp(130px, 36vw, 250px); display: grid; }
.lib-art .scene {
  grid-area: 1 / 1; width: 100%; height: auto; opacity: 0; visibility: hidden;
  transition: opacity .5s ease, visibility .5s;
}
[data-style="manor"] .scene-manor, [data-style="highrise"] .scene-highrise, [data-style="villa"] .scene-villa { opacity: 1; visibility: visible; }
@media (max-width: 560px) { .lib-hero { gap: 14px; align-items: flex-start; } }

/* Decorative shelf of book spines under the title. Book colours per style: */
.shelf { --b1: var(--door); --b2: color-mix(in srgb, var(--door) 55%, var(--panel));
         --b3: color-mix(in srgb, var(--accent) 70%, var(--bg)); --b4: color-mix(in srgb, var(--muted) 45%, var(--bg)); }
[data-style="highrise"] .shelf { --b1: #5d72b8; --b2: #e9dfc6; --b3: #f2b84b; --b4: #d77f66; --b5: #4e8f8f; }
.shelf {
  display: flex; align-items: flex-end; gap: 3px; height: 92px; padding: 0 4px;
  border-bottom: 6px solid var(--accent); overflow: hidden;
}
.shelf span {
  flex: 0 0 auto; width: 18px; height: 78%; border-radius: 2px 2px 0 0;
  background: var(--b1); box-shadow: inset -3px 0 0 rgba(0,0,0,.18), inset 0 10px 0 -7px var(--accent);
  transition: background-color .5s ease;
}
.shelf span:nth-child(3n+1) { background: var(--b2); }
.shelf span:nth-child(4n+2) { background: var(--b3); width: 14px; }
.shelf span:nth-child(5n) { height: 92%; width: 24px; }
.shelf span:nth-child(7n+3) { height: 66%; }
.shelf span:nth-child(6n+4) { height: 86%; background: var(--b4); }
.shelf span:nth-child(11n+8) { background: var(--b5, var(--b1)); }
.shelf span:nth-child(9n+6) { transform: rotate(-9deg); transform-origin: bottom left; margin: 0 6px; }
[data-style="highrise"] .shelf span { border-radius: 0; box-shadow: inset -2px 0 0 rgba(0,0,0,.25); }
[data-style="villa"] .shelf span { border-radius: 5px 5px 0 0; }

/* The catalogue: each story is a tall, narrow card that stands like a book on a shelf */
.catalogue, .shelf-row { --card: var(--panel); --card-r: 10px; }
.catalogue {
  list-style: none; margin: 0; padding: 0;
  display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 24px 16px;
}
[data-style="highrise"] :is(.catalogue, .shelf-row) { --card-r: 4px; }
[data-style="villa"] :is(.catalogue, .shelf-row) { --card: #fbf6ea; --card-r: 14px; }
.catalogue li { display: flex; }
.card {
  flex: 1; min-height: 380px; display: flex; flex-direction: column; gap: 8px; padding: 14px 14px 12px; text-decoration: none;
  background: var(--card); border: 1px solid var(--line); border-radius: var(--card-r);
  transition: transform .25s ease, border-color .25s ease, background-color .5s ease;
}
/* a thin accent band across the top, like the head of a book */
.card::before { content: ""; height: 2px; margin-bottom: 8px; background: var(--accent); border-radius: 2px; }
.card .top { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.card .no { white-space: nowrap; }
.card .kind { max-width: 100%; }
.card .no { font-family: var(--display); font-size: 16px; color: var(--accent); }
.card .kind { font-family: var(--mono); font-size: 11px; letter-spacing: .12em; text-transform: uppercase; color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* Long titles (8-10 words) wrap over up to 6 short lines, then end in … */
.card .name { margin-top: 6px; font-family: var(--display); font-size: 17px; line-height: 1.25; overflow-wrap: anywhere; transition: color .25s ease;
  display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 6; line-clamp: 6; overflow: hidden; }
.card .blurb { margin-bottom: auto; padding-top: 4px; font-size: 13.5px; line-height: 1.45; color: var(--muted);
  display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 8; line-clamp: 8; overflow: hidden; }
/* Read out instead of the long opening above */
.sr { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.card { position: relative; }
.card .cols { display: flex; flex-direction: column; gap: 2px; padding-top: 6px; font-family: var(--mono); font-size: 11px; line-height: 1.3; color: var(--accent); }
.card .meta { display: flex; flex-wrap: wrap; gap: 2px 10px; padding-top: 8px; border-top: 1px solid var(--line); font-family: var(--mono); font-size: 11.5px; color: var(--muted); }
.card:hover { transform: translateY(-4px); border-color: var(--accent); }
.card:hover .name { color: var(--accent); }
.card:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
[data-style="highrise"] .card::before { height: 3px; border-radius: 0; margin: -14px -14px 8px; }
[data-style="highrise"] .card .no { font-family: var(--mono); font-size: 13px; }
/* Phones: same two-column grid, but shorter cards */
@media (max-width: 560px) {
  .catalogue { gap: 14px 12px; }
  .card { min-height: 0; gap: 6px; padding: 12px 12px 10px; }
  .card::before { margin-bottom: 4px; }
  .card .top { flex-direction: row; flex-wrap: wrap; align-items: baseline; gap: 0 8px; }
  [data-style="highrise"] .card::before { margin: -12px -12px 6px; }
  .card .name { margin-top: 4px; font-size: 16px; -webkit-line-clamp: 5; line-clamp: 5; }
  .card .blurb { font-size: 13px; -webkit-line-clamp: 4; line-clamp: 4; }
}

/* All stories: a box that scrolls on its own, about two rows of cards tall */
.catalogue-box {
  max-height: 840px; overflow-y: auto; padding: 12px 10px 14px; margin: 0 -10px;
  border: 1px solid var(--line); border-radius: 14px; scrollbar-width: thin; scrollbar-color: var(--line) transparent;
}
.catalogue-box.more {
  -webkit-mask-image: linear-gradient(to bottom, #000 calc(100% - 64px), transparent);
  mask-image: linear-gradient(to bottom, #000 calc(100% - 64px), transparent);
}
.catalogue-box:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
.catalogue-box.open { max-height: none; overflow: visible; padding: 0; margin: 0; border: 0; }
@media (max-width: 560px) { .catalogue-box { max-height: 600px; padding: 10px 8px 12px; margin: 0 -8px; } }
@media (prefers-reduced-motion: no-preference) { .catalogue-box { scroll-behavior: smooth; } }

/* Filters: one row by kind, one by collection */
.filters { display: flex; flex-direction: column; gap: 10px; }
.chip-label { min-width: 5.5em; font-family: var(--mono); font-size: 13px; color: var(--muted); }
@media (max-width: 560px) { .chip-label { min-width: 0; flex-basis: 100%; } }

/* Collection shelves: a heading, then a row of cards on a plank that scrolls sideways */
.shelves { display: flex; flex-direction: column; gap: 36px; }
.coll-head { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 4px 20px; align-items: baseline; }
.coll-name { grid-column: 1; margin: 0; font-family: var(--display); font-weight: 500; font-size: clamp(22px, 3vw, 30px); line-height: 1.15; }
.coll-name a { text-decoration: none; }
.coll-name a:hover { color: var(--accent); }
.coll-desc { grid-column: 1; margin: 0; font-size: 16px; line-height: 1.45; color: var(--muted); }
.coll-all {
  grid-column: 2; grid-row: 1 / span 2; align-self: center; display: inline-flex; align-items: center; min-height: 44px; white-space: nowrap;
  font-family: var(--mono); font-size: 14px; color: var(--accent); text-decoration: none;
}
.coll-all:hover { text-decoration: underline; }
@media (max-width: 560px) {
  .coll-head { grid-template-columns: minmax(0, 1fr); }
  .coll-all { grid-column: 1; grid-row: auto; }
}
.shelf-scroll {
  margin: 4px -6px 0; padding: 10px 6px 0; overflow-x: auto; overscroll-behavior-x: contain;
  scroll-snap-type: x proximity; scrollbar-width: thin; scrollbar-color: var(--line) transparent;
  border-bottom: 6px solid var(--accent);
}
.shelf-scroll.more {
  -webkit-mask-image: linear-gradient(to right, #000 calc(100% - 56px), transparent);
  mask-image: linear-gradient(to right, #000 calc(100% - 56px), transparent);
}
.shelf-scroll:focus-visible { outline: 2px solid var(--accent); outline-offset: 4px; }
.shelf-row { list-style: none; margin: 0; padding: 0 0 14px; display: flex; gap: 16px; }
.shelf-row li { flex: 0 0 172px; display: flex; scroll-snap-align: start; }
@media (max-width: 560px) { .shelf-row li { flex-basis: 150px; } .shelf-row { gap: 12px; } }
@media (prefers-reduced-motion: no-preference) { .shelf-scroll { scroll-behavior: smooth; } }

/* Reading a story */
.story { width: 100%; max-width: 720px; margin: 0 auto; display: flex; flex-direction: column; gap: 28px; }
.story-head { display: flex; flex-direction: column; gap: 14px; }
.story-body { font-size: var(--read-size); line-height: var(--read-lh); }
.story-body p { margin: 0 0 1.1em; }
.story-body strong { font-weight: 600; }
.story-body > p:first-of-type::first-letter {
  float: left; font-family: var(--display); font-size: 3.7em; line-height: .82; padding: .08em .1em 0 0; color: var(--accent);
}
[data-style="highrise"] .story-body > p:first-of-type::first-letter { float: none; font: inherit; padding: 0; color: inherit; }
.story-body.verse > p:first-of-type::first-letter { float: none; font: inherit; padding: 0; color: inherit; }
.story-body.verse p { margin-bottom: 1.4em; }
.story-body > p:first-of-type + * { clear: left; }
.story-body hr.break { border: 0; margin: 1.6em 0; text-align: center; color: var(--accent); }
.story-body hr.break::after { content: var(--ornament); letter-spacing: .4em; }
.story-end { text-align: center; color: var(--accent); font-size: 22px; letter-spacing: .3em; }
.story-end::after { content: var(--ornament); }

/* A story's collections, under the back link */
.coll-tags { display: flex; flex-wrap: wrap; gap: 8px; margin-top: -8px; }
.coll-tag {
  display: inline-flex; align-items: center; gap: 6px; min-height: 44px; padding: 0 16px; border-radius: 999px;
  border: 1px solid var(--accent); font-family: var(--mono); font-size: 13px; color: var(--accent); text-decoration: none;
}
.coll-tag:hover { background: color-mix(in srgb, var(--accent) 12%, transparent); }

/* The end of a story in a series: continue, then the contents */
.series { display: flex; flex-direction: column; gap: 28px; }
.series-box { display: flex; flex-direction: column; gap: 12px; }
.continue {
  display: flex; flex-direction: column; gap: 4px; padding: 18px 22px; border-radius: 12px; text-decoration: none;
  background: var(--door); color: var(--door-ink); border: 1px solid var(--accent); transition: transform .2s ease;
}
.continue:hover { transform: translateY(-2px); }
.continue .dir { font-family: var(--mono); font-size: 12px; letter-spacing: .12em; text-transform: uppercase; }
.continue .part { font-size: 15px; opacity: .85; }
.continue .name { font-family: var(--display); font-size: 22px; line-height: 1.2; }
.series-end { margin: 0; font-style: italic; color: var(--muted); }
.series-box .eyebrow { margin-top: 8px; }
.contents { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.contents a, .contents .here {
  display: flex; gap: 14px; align-items: baseline; min-height: 44px; padding: 10px 14px;
  border: 1px solid var(--line); border-radius: 8px; text-decoration: none;
}
.contents a:hover { border-color: var(--accent); }
.contents .here { background: var(--panel); border-color: var(--accent); color: var(--accent); }
.contents .n { min-width: 1.5em; font-family: var(--mono); font-size: 14px; color: var(--accent); }
.contents .t { font-family: var(--display); font-size: 17px; line-height: 1.3; }
[data-style="highrise"] .continue, [data-style="highrise"] .contents a, [data-style="highrise"] .contents .here { border-radius: 4px; }