/* The Library (/library): every offering as a book on a shelf.
   Ported from the Library canvas (design-canvas/library/gen.py): spines on the
   shelf (A), and a book opens in place under its shelf as a photographed open
   book (3.3) with its cover tinted to the book's colour. On a phone the open
   book is its right-hand page alone. Buttons, type and colours are the site's. */

.library section { padding: 0; }
.lib { max-width: 1120px; margin: 0 auto; padding: 80px 32px 104px; }
.lib .intro { text-align: center; max-width: 660px; margin: 0 auto 64px; }
.lib .intro h1 { margin: 0 0 20px; }
.lib .lede { font-size: 1.12rem; line-height: 1.65; color: var(--ink-soft); margin: 0; }

.shelf { margin: 0 0 72px; }
.shelf-head { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; margin: 0 0 20px; padding-bottom: 12px; border-bottom: 1px solid var(--line); }
.shelf-head h2 { font-size: 2.25rem; line-height: 1.1; margin: 0; text-align: left; }
.shelf-note { font-size: .94rem; color: var(--muted); }

/* ---------- the bay and the plank ---------- */
.bay { background: var(--paper-alt); border-radius: 4px 4px 0 0; padding: 44px 40px 0;
  box-shadow: inset 0 34px 40px -30px rgba(31,43,36,.28), inset 26px 0 30px -28px rgba(31,43,36,.25), inset -26px 0 30px -28px rgba(31,43,36,.25); }
.row { position: relative; z-index: 2; display: flex; align-items: flex-end; justify-content: center; gap: 3px; min-height: 350px; }
.plank { position: relative; z-index: 1; height: 20px; background-color: #b89d64;
  background-image: linear-gradient(180deg, #d9c391 0, #d9c391 5px, #bfa46b 5px, #a98f58 100%),
    repeating-linear-gradient(90deg, rgba(90,60,20,0) 0 37px, rgba(90,60,20,.12) 37px 38px, rgba(90,60,20,0) 38px 91px, rgba(90,60,20,.09) 91px 93px);
  background-blend-mode: multiply; border-radius: 0 0 3px 3px; box-shadow: 0 16px 22px -12px rgba(31,43,36,.55); }
.bookend { width: 46px; height: 46px; margin-left: 18px; align-self: flex-end; flex: none; }

/* ---------- spines ---------- */
.book { position: relative; overflow: hidden; display: flex; flex-direction: column; align-items: center; gap: 9px;
  padding: 14px 0 10px; box-sizing: border-box; text-decoration: none; color: #e7c766;
  border-radius: 5px 5px 2px 2px / 7px 7px 2px 2px;
  background-image: linear-gradient(90deg, rgba(0,0,0,.42) 0%, rgba(0,0,0,.12) 7%, rgba(255,255,255,.16) 20%, rgba(255,255,255,.06) 36%, rgba(0,0,0,0) 55%, rgba(0,0,0,.16) 84%, rgba(0,0,0,.45) 100%),
    repeating-linear-gradient(0deg, rgba(255,255,255,.04) 0 1px, transparent 1px 3px),
    repeating-linear-gradient(90deg, rgba(0,0,0,.06) 0 1px, transparent 1px 3px);
  box-shadow: 0 1px 0 rgba(0,0,0,.25), 5px 0 9px -3px rgba(31,43,36,.35);
  transition: transform .4s cubic-bezier(.2,.7,.2,1), box-shadow .4s; }
.book:hover { transform: translateY(-6px); color: #e7c766; }
.book.is-open { transform: translateY(-10px) scale(1.04); z-index: 3; }
.book:focus-visible { outline: 3px solid var(--gold); outline-offset: 3px; }
.book img { width: 38px; height: 38px; flex: none; filter: drop-shadow(0 1px 1px rgba(0,0,0,.45)); }
.spine-title { writing-mode: vertical-rl; font-family: var(--font-head); font-size: 18px; line-height: 1; white-space: nowrap; letter-spacing: .02em;
  text-shadow: 0 -1px 0 rgba(0,0,0,.55), 0 1px 0 rgba(255,255,255,.12); flex: 0 1 auto; min-height: 0; overflow: hidden; }
.hub { display: block; width: 100%; height: 8px; flex: none; background: linear-gradient(180deg, rgba(0,0,0,.35), rgba(255,255,255,.2) 45%, rgba(0,0,0,.4));
  border-top: 1px solid rgba(231,199,102,.7); border-bottom: 1px solid rgba(231,199,102,.7); }
.hub-low { margin-top: auto; }
.spine-band { width: 100%; height: 3px; border-top: 1px solid rgba(231,199,102,.55); }
/* The season we are in glows (its "This season" tag sits above the shelf, so it is outside the clipped spine). */
.book.is-here { overflow: visible; box-shadow: 0 0 0 2px var(--gold), 0 0 34px 6px rgba(199,152,6,.45); }
.here-tag { position: absolute; top: -30px; left: 50%; transform: translateX(-50%); white-space: nowrap; font-size: 12px; letter-spacing: .14em;
  text-transform: uppercase; font-weight: 600; color: var(--gold-dark); font-family: var(--font-body); }

.book-post { background-color: #1f2b24; width: 74px; height: 300px; }
.book-podcast { background-color: #9a4a2b; width: 66px; height: 278px; }
.book-playlist { background-color: #2f4a5c; width: 70px; height: 294px; }
.book-mvp { background-color: #56653a; width: 64px; height: 276px; }
.book-replay { background-color: #947104; width: 74px; height: 306px; }
.book-vny { background-color: #3f3150; width: 70px; height: 296px; }
.book-resolution { background-color: #6b2f2a; width: 72px; height: 314px; }
.book-bundle { background-color: #1f2b24; width: 88px; height: 290px; box-shadow: inset 0 0 0 2px var(--gold), 5px 0 9px -3px rgba(31,43,36,.35); }
.book-winter { background-color: #34485c; width: 66px; height: 292px; }
.book-spring { background-color: #5a7445; width: 70px; height: 282px; }
.book-summer { background-color: #a4692a; width: 68px; height: 300px; }
.book-autumn { background-color: #7a3f22; width: 68px; height: 290px; }
/* The last book on each of the first two shelves leans on its neighbour. */
.book-mvp, .book-bundle { transform-origin: 0 100%; transform: rotate(-5deg); margin-left: 22px; }
.book-mvp:hover, .book-bundle:hover { transform: rotate(-5deg) translateY(-6px); }
.book-mvp.is-open, .book-bundle.is-open { transform: translateY(-10px) scale(1.04); }

/* ---------- the open book ---------- */
/* Hidden until opened: by library.js, or by the address (#post) without script. */
.spread { display: none; }
.spread.is-open, .spread:target { display: block; }
.spread { position: relative; max-width: 980px; margin: 40px auto 0; scroll-margin-top: 120px; }
.spread::before { content: ""; position: absolute; inset: 0; z-index: 0; background-repeat: no-repeat; background-size: 100% 100%; mix-blend-mode: multiply; pointer-events: none; }
.spread .pages { position: absolute; inset: 0; z-index: 1; }
.spread .page-l, .spread .page-r { position: absolute; box-sizing: border-box; display: flex; flex-direction: column; justify-content: center; }
.spread .page-l { align-items: center; gap: 16px; }
.spread .page-l .seal { width: 120px; height: 120px; }
.spread .page-l .owl { width: 170px; height: auto; }
.spread .page-l::after { content: "\2726"; display: block; color: var(--gold-dark); font-size: 15px; }
.spread .kind { font-size: 13px; letter-spacing: .2em; text-transform: uppercase; color: var(--gold-dark); font-weight: 500; text-align: center; }
.spread h3 { font-size: 2.1rem; line-height: 1.05; margin: 0 0 12px; }
.spread .desc { font-size: 1rem; line-height: 1.6; margin: 0 0 12px; }
.spread .note { font-size: .94rem; margin: 0 0 12px; color: var(--rust); font-weight: 500; }
.spread .price { font-family: var(--font-head); font-size: 1.45rem; margin: 14px 0 16px; }
.spread .fine { font-size: .82rem; line-height: 1.5; color: var(--muted); margin: 14px 0 0; }
.spread .actions { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; }
.spread .signup { margin: 0; }
.spread .field-label { display: block; font-size: .88rem; font-weight: 500; margin: 0 0 8px; }
.spread .signup input[type=email] { flex: 1 1 200px; min-height: 48px; padding: 0 18px; border: 1px solid #cfc6b0; border-radius: 999px; font: inherit; font-size: 1rem; background: #fff; color: var(--ink); box-sizing: border-box; }
.spread .close { position: absolute; z-index: 2; width: 44px; height: 44px; display: flex; align-items: center; justify-content: center; color: var(--ink-soft); border-radius: 50%; }
.spread .close:hover { background: rgba(148,113,4,.12); }
.spread .close:focus-visible { outline: 3px solid var(--gold); }

/* The cover's colour, laid over the photograph through a mask of the cover alone. */
.spread .tint { position: absolute; inset: 0; z-index: 0; pointer-events: none; mix-blend-mode: color;
  -webkit-mask-size: 100% 100%; mask-size: 100% 100%; -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; }
.cv-post .tint { background-color: #1f2b24; } .cv-podcast .tint { background-color: #9a4a2b; } .cv-playlist .tint { background-color: #2f4a5c; }
.cv-mvp .tint { background-color: #56653a; } .cv-replay .tint { background-color: #947104; } .cv-vny .tint { background-color: #3f3150; }
.cv-resolution .tint { background-color: #6b2f2a; } .cv-bundle .tint { background-color: #1f2b24; } .cv-winter .tint { background-color: #34485c; }
.cv-spring .tint { background-color: #5a7445; } .cv-summer .tint { background-color: #a4692a; } .cv-autumn .tint { background-color: #7a3f22; }

/* Photo book 3.3: worn leather with a red ribbon. 3.2 (ph41, brown with clean
   cream pages) is the other on Cassidy and Susan's shortlist; to switch, swap
   ph42 for ph41 in library.html and the ph41 block below. */
.ph42 { aspect-ratio: 1341 / 1062; }
.ph42::before { background-image: url(../images/library/book-42.webp); }
.ph42 .tint { -webkit-mask-image: url(../images/library/mask-42.png); mask-image: url(../images/library/mask-42.png); }
.ph42 .page-l { left: 8.2%; width: 40.27%; top: 5.74%; height: 87.57%; padding: 6% 7%; }
.ph42 .page-r { left: 48.84%; width: 40.65%; top: 5.74%; height: 87.57%; padding: 6% 7%; }
.ph42 .close { top: calc(5.74% + 6px); right: calc(10.51% + 6px); }
.ph41 { aspect-ratio: 1412 / 903; }
.ph41::before { background-image: url(../images/library/book-41.webp); }
.ph41 .tint { -webkit-mask-image: url(../images/library/mask-41.png); mask-image: url(../images/library/mask-41.png); }
.ph41 .page-l { left: 8.57%; width: 40.72%; top: 1.99%; height: 95.24%; padding: 6% 7%; }
.ph41 .page-r { left: 50.35%; width: 39.66%; top: 1.99%; height: 95.24%; padding: 6% 7%; }
.ph41 .close { top: calc(1.99% + 6px); right: calc(9.99% + 6px); }

/* ---------- the live doors ---------- */
.shelf.live { margin-top: 24px; }
.doors { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; }
.door { display: flex; flex-direction: column; align-items: center; justify-content: flex-end; gap: 8px; min-height: 250px; padding: 40px 24px 34px;
  text-align: center; text-decoration: none; color: var(--ink); background: #fffdf7; border: 1px solid var(--line); border-radius: 999px 999px 4px 4px; transition: border-color .2s; }
.door:hover { border-color: var(--gold); color: var(--ink); }
.door-when { font-size: 13px; letter-spacing: .16em; text-transform: uppercase; color: var(--gold-dark); font-weight: 500; }
.door-title { font-family: var(--font-head); font-size: 1.9rem; line-height: 1.05; }
.door-price { font-size: .94rem; color: var(--ink-soft); }
.door-go { margin-top: 10px; font-size: .94rem; font-weight: 500; color: var(--gold-dark); text-decoration: underline; text-underline-offset: 4px; }

@media (prefers-reduced-motion: reduce) { .book { transition: none; } }

/* ---------- phone ---------- */
@media (max-width: 640px) {
  .lib { padding: 48px 16px 72px; }
  .lib .intro { margin-bottom: 44px; }
  .shelf { margin-bottom: 56px; }
  .shelf-head { flex-direction: column; gap: 4px; }
  .shelf-head h2 { font-size: 1.75rem; }
  .bay { padding: 40px 8px 0; }
  .row { gap: 2px; min-height: 290px; }
  .bookend { display: none; }
  .spine-title { font-size: 16px; }
  .book { gap: 7px; padding: 11px 0 8px; }
  .book img { width: 30px; height: 30px; }
  .here-tag { top: -26px; font-size: 11px; }
  .hub { height: 6px; }
  .book-post { width: 62px; height: 246px; } .book-podcast { width: 56px; height: 226px; } .book-playlist { width: 60px; height: 244px; } .book-mvp { width: 56px; height: 222px; }
  .book-replay { width: 62px; height: 252px; } .book-vny { width: 58px; height: 244px; } .book-resolution { width: 60px; height: 258px; } .book-bundle { width: 70px; height: 236px; }
  .book-winter, .book-spring, .book-summer, .book-autumn { width: 60px; height: 240px; }
  .book-mvp, .book-bundle { margin-left: 18px; }

  /* The open book becomes its right-hand page alone. */
  .spread { aspect-ratio: auto; margin-top: 28px; }
  .spread .tint, .spread .page-l::after { display: none; }
  .ph42::before { background-image: url(../images/library/page-42.webp); }
  .ph41::before { background-image: url(../images/library/page-41.webp); }
  .spread .pages { position: relative; inset: auto; }
  .spread .page-l, .spread .page-r { position: static; width: auto; height: auto; }
  .spread .page-l { flex-direction: row; justify-content: flex-start; padding: 26px 24px 0; }
  .spread .page-l .seal { width: 56px; height: 56px; }
  .spread .page-l .owl { width: 76px; }
  .spread .page-r { padding: 18px 24px 30px; }
  .spread h3 { font-size: 2rem; }
  .spread .close { top: 10px; right: 10px; }
  .doors { grid-template-columns: minmax(0, 1fr); gap: 16px; }
  .door { min-height: 0; padding: 44px 20px 26px; }
}