/* Billy's Memorial Photo Book: shared by memorial.html (#photos) and the walkway lectern overlay (walk.html).
   Locked art direction: warm night page, cream paper, EB Garamond for words, amber for the ONE primary action, sky-blue focus. */
.pbk, .book-dialog, .pbk-viewer {
  --pb-page: #16130f; --pb-ink: #f3ead9; --pb-muted: #c7b9a3; --pb-border: #4a3f33; --pb-amber: #e7a54b; --pb-amber-2: #f2bc6a; --pb-on-amber: #20160b; --pb-focus: #8fd3ff;
  --paper: #efe6d4; --paper-2: #e6dbc5; --paper-ink: #2a2017; --paper-muted: #6a5843; --board: #2e2117; --board-dark: #1d150e; --foil: #e2b46c;
  --pb-serif: "Memorial Serif", "EB Garamond", "Iowan Old Style", Palatino, Georgia, serif;
  --pb-ui: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --pb-ease: cubic-bezier(.2,.7,.2,1);
}
.pbk { container-type: inline-size; position: relative; color: var(--pb-ink); font-family: var(--pb-serif); --max-h: 78vh; }
.pbk [hidden] { display: none !important; }
.pbk p { margin: 0; }
.pbk-sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; }
.pbk :focus-visible, .pbk-viewer :focus-visible, .book-dialog :focus-visible { outline: 3px solid var(--pb-focus); outline-offset: 3px; }

/* buttons */
.pbk-btn { display: inline-flex; align-items: center; justify-content: center; gap: .4rem; min-height: 48px; min-width: 48px; padding: .55rem 1.15rem;
  font: 600 1rem var(--pb-ui); letter-spacing: .01em; border-radius: 4px; border: 1px solid transparent; cursor: pointer; text-decoration: none; white-space: nowrap; }
.pbk-btn--amber { background: var(--pb-amber); color: var(--pb-on-amber); border-color: var(--pb-amber); }
.pbk-btn--amber:hover { background: var(--pb-amber-2); }
.pbk-btn--line { background: rgba(20,16,12,.55); color: var(--pb-ink); border-color: #9c8b74; }
.pbk-btn--line:hover { border-color: var(--pb-ink); }
.pbk-link { background: none; border: 0; padding: 0 .2rem; min-height: 44px; font: .95rem var(--pb-ui); color: var(--pb-muted); text-decoration: underline; text-decoration-color: rgba(199,185,163,.45); text-underline-offset: .22em; cursor: pointer; }
.pbk-link:hover { color: var(--pb-ink); text-decoration-color: currentColor; }

/* ---------------- the closed book ---------------- */
.pbk__cover { display: grid; grid-template-columns: auto minmax(0, 25rem); gap: clamp(2rem, 6vw, 5rem); align-items: center; justify-content: center; padding: clamp(.5rem, 2vw, 1.5rem) 0; }
.pbk__board { width: clamp(220px, 24vw, 310px); aspect-ratio: 3 / 4; border-radius: 3px 7px 7px 3px; padding: 14px 14px 14px 26px; position: relative;
  background: linear-gradient(90deg, var(--board-dark) 0 13px, rgba(0,0,0,.0) 13px 17px), radial-gradient(120% 90% at 30% 18%, #3d2b1c, var(--board) 58%, var(--board-dark));
  box-shadow: inset 2px 0 0 rgba(255,220,170,.06), 4px 4px 0 -2px var(--paper), 7px 8px 0 -3px var(--paper-2), 0 26px 60px rgba(0,0,0,.6), 0 0 80px rgba(231,165,75,.09); }
.pbk__board-inner { height: 100%; border: 1px solid rgba(226,180,108,.45); outline: 1px solid rgba(226,180,108,.16); outline-offset: -6px; border-radius: 2px;
  display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; padding: 1rem .8rem; color: var(--foil); }
.pbk__board-title { font-size: clamp(1.55rem, 2.4vw, 2.05rem); line-height: 1.12; color: #f0c98a; }
.pbk__board-rule { display: block; width: 46px; height: 1px; margin: 1rem 0; background: rgba(226,180,108,.6); }
.pbk__board-name { font-size: .98rem; letter-spacing: .16em; text-transform: uppercase; color: #ead9bb; }
.pbk__board-dates { margin-top: .3rem !important; font-size: .95rem; letter-spacing: .24em; }
.pbk__cover-kicker { font: 600 .8rem var(--pb-ui); letter-spacing: .16em; text-transform: uppercase; color: var(--pb-amber); margin-bottom: .7rem !important; }
.pbk__cover-lead { font-size: clamp(1.35rem, 2.4vw, 1.75rem); line-height: 1.3; }
.pbk__cover-actions { display: flex; flex-wrap: wrap; gap: .6rem; margin-top: 1.5rem; }

/* ---------------- the open book: boards, two cream leaves, a gutter ---------------- */
.pbk__open { --lh: min(calc((100cqw - 34px) / 2 * 1.3), var(--max-h), 780px); --lw: calc(var(--lh) / 1.3); --pad: clamp(16px, calc(var(--lw) * .085), 40px);
  display: flex; flex-direction: column; align-items: center; }
.pbk[data-layout="single"] .pbk__open { --lh: min(calc((100cqw - 14px) * 1.3), var(--max-h)); --pad: 14px; }
.pbk__book { position: relative; display: flex; padding: 12px 12px 18px; border-radius: 6px; touch-action: pan-y;
  background: linear-gradient(180deg, #35271b, var(--board-dark));
  box-shadow: 0 1px 0 rgba(255,220,170,.06) inset, 0 30px 70px rgba(0,0,0,.55), 0 0 100px rgba(231,165,75,.07); }
.pbk__leaf { position: relative; width: var(--lw); height: var(--lh); overflow: hidden; color: var(--paper-ink);
  background: radial-gradient(130% 90% at 50% 40%, rgba(255,252,244,.5), rgba(255,252,244,0) 70%), var(--paper); }
.pbk__leaf--l { border-radius: 3px 0 0 3px; box-shadow: -3px 3px 0 -1px var(--paper-2), -5px 5px 0 -2px #d6c8ad; }
.pbk__leaf--r { border-radius: 0 3px 3px 0; box-shadow: 3px 3px 0 -1px var(--paper-2), 5px 5px 0 -2px #d6c8ad; }
.pbk__leaf--l::after, .pbk__leaf--r::after { content: ""; position: absolute; top: 0; bottom: 0; width: 13%; pointer-events: none; }
.pbk__leaf--l::after { right: 0; background: linear-gradient(270deg, rgba(70,48,24,.24), rgba(70,48,24,.06) 40%, rgba(70,48,24,0)); }
.pbk__leaf--r::after { left: 0; background: linear-gradient(90deg, rgba(70,48,24,.26), rgba(70,48,24,.06) 40%, rgba(70,48,24,0)); }
.pbk__gutter { width: 2px; background: linear-gradient(180deg, rgba(40,26,14,.55), rgba(40,26,14,.35)); }
.pbk[data-layout="single"] .pbk__gutter { display: none; }
.pbk[data-layout="single"] .pbk__leaf--l { border-radius: 3px; box-shadow: 3px 3px 0 -1px var(--paper-2), 5px 5px 0 -2px #d6c8ad; }
.pbk[data-layout="single"] .pbk__leaf--l::after { display: none; }
.pbk[data-layout="single"] .pbk__book { padding: 7px 7px 13px; }
.pbk__rail { position: absolute; left: 12px; right: 12px; bottom: 7px; height: 2px; background: rgba(226,180,108,.16); border-radius: 1px; overflow: hidden; }
.pbk[data-layout="single"] .pbk__rail { left: 7px; right: 7px; bottom: 5px; }
.pbk__rail span { display: block; height: 100%; width: 0; background: var(--foil); transition: width .35s var(--pb-ease); }

/* a page holding one photograph, mounted with four paper corners */
.pbk__page { margin: 0; height: 100%; display: flex; flex-direction: column; align-items: center; justify-content: center; padding: var(--pad) var(--pad) calc(var(--pad) + 1.4rem); }
.pbk__photo { display: block; padding: 0; border: 0; background: none; cursor: zoom-in; border-radius: 1px; }
.pbk__mount { position: relative; display: block; background: #fbf8f0; padding: 7px; box-shadow: 0 1px 2px rgba(0,0,0,.22), 0 12px 26px rgba(40,25,10,.25); }
.pbk__mount img { display: block; width: auto; height: auto; max-width: calc(var(--lw) - 2 * var(--pad) - 14px); max-height: calc(var(--lh) - 2 * var(--pad) - 1.4rem - 14px - var(--cap-h, 0px)); background: #d9cdb6; }
.pbk__page:has(.pbk__caption) { --cap-h: 3.2rem; }
.pbk__mount::after { content: ""; position: absolute; inset: -3px; pointer-events: none; opacity: .8;
  background: linear-gradient(135deg, #3a2a1c 0 12px, transparent 12px) top left / 22px 22px no-repeat, linear-gradient(225deg, #3a2a1c 0 12px, transparent 12px) top right / 22px 22px no-repeat,
    linear-gradient(45deg, #3a2a1c 0 12px, transparent 12px) bottom left / 22px 22px no-repeat, linear-gradient(315deg, #3a2a1c 0 12px, transparent 12px) bottom right / 22px 22px no-repeat; }
.pbk__photo:hover .pbk__mount { box-shadow: 0 1px 2px rgba(0,0,0,.22), 0 16px 32px rgba(40,25,10,.32); }
.pbk__photo:focus-visible { outline-offset: 6px; box-shadow: 0 0 0 9px var(--paper), 0 0 0 12px var(--pb-page); }
.pbk__caption { margin-top: .9rem; max-width: 30ch; text-align: center; font-size: 1.02rem; line-height: 1.35; color: var(--paper-ink); }
.pbk__folio { position: absolute; left: 0; right: 0; bottom: calc(var(--pad) * .55); text-align: center; font-size: .92rem; letter-spacing: .14em; color: #8a765c; }

/* the title leaf that faces photograph 1 */
.pbk__title { height: 100%; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; padding: var(--pad); color: var(--paper-ink); }
.pbk__title-name { font-size: clamp(1.6rem, calc(var(--lw) * .085), 2.4rem); line-height: 1.1; }
.pbk__title-rule { display: block; width: 44px; height: 1px; margin: 1.1rem 0; background: #b07a3a; }
.pbk__title-full { font-size: 1rem; letter-spacing: .18em; text-transform: uppercase; color: #4a3a2a; }
.pbk__title-dates { margin-top: .35rem !important; letter-spacing: .24em; color: #8a5a22; }
.pbk__title-count { margin-top: 2.2rem !important; font-style: italic; color: var(--paper-muted); }

/* controls under the book (on the night, not on the paper) */
.pbk__controls { width: min(100%, calc(2 * var(--lw) + 26px)); display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: .75rem; margin-top: 1.1rem; }
.pbk[data-layout="single"] .pbk__controls { width: 100%; }
.pbk__prev { justify-self: start; } .pbk__next { justify-self: end; }
.pbk__where { font-size: 1.12rem; color: var(--pb-ink); text-align: center; white-space: nowrap; font-variant-numeric: lining-nums; }
.pbk__where:focus { outline: none; } .pbk__where:focus-visible { outline: 3px solid var(--pb-focus); }
.pbk__links { display: flex; flex-wrap: wrap; justify-content: center; gap: 0 1.1rem; margin-top: .35rem !important; }
.pbk__hint { font: .82rem var(--pb-ui); color: #9d8f7b; text-align: center; }

/* turning: the new leaves settle in from the side they came from (a few pixels, a quarter-second). Reduced motion: an instant swap. */
@keyframes pbk-next { from { opacity: .3; transform: translateX(14px); } to { opacity: 1; transform: none; } }
@keyframes pbk-prev { from { opacity: .3; transform: translateX(-14px); } to { opacity: 1; transform: none; } }
@keyframes pbk-fade { from { opacity: .3; } to { opacity: 1; } }
@keyframes pbk-rise { from { transform: translateY(8px); } to { transform: none; } } /* overlays: motion only, so content is never held invisible by a stalled animation */
@keyframes pbk-open { from { opacity: .3; transform: scale(.985); } to { opacity: 1; transform: none; } }
.pbk__book.is-next .pbk__leaf > * { animation: pbk-next .28s var(--pb-ease) both; }
.pbk__book.is-prev .pbk__leaf > * { animation: pbk-prev .28s var(--pb-ease) both; }
.pbk__book.is-jump .pbk__leaf > * { animation: pbk-fade .22s ease-out both; }
.pbk__book.is-next .pbk__leaf--r > *, .pbk__book.is-prev .pbk__leaf--l > * { animation-delay: .05s; }
.pbk[data-state="open"] .pbk__open, .pbk[data-state="cover"] .pbk__cover, .pbk[data-state="contents"] .pbk__contents { animation: pbk-open .3s var(--pb-ease); }

/* contents: a numbered index of all 21 */
.pbk__contents-head { display: flex; align-items: center; justify-content: space-between; gap: 1rem; flex-wrap: wrap; margin: 0 0 1rem; }
.pbk__contents-title { margin: 0; font: 600 .85rem var(--pb-ui); letter-spacing: .14em; text-transform: uppercase; color: var(--pb-amber); }
.pbk__contents-title:focus { outline: none; }
.pbk__grid { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: clamp(8px, 1.4vw, 16px); }
.pbk__grid-item { scroll-margin-top: 90px; }
.pbk__tile { display: flex; flex-direction: column; align-items: center; gap: .35rem; width: 100%; padding: 0; border: 0; background: none; cursor: pointer; color: var(--pb-muted); }
.pbk__tile-mat { position: relative; display: block; width: 100%; aspect-ratio: 4 / 5; overflow: hidden; background: var(--paper); border-radius: 2px; box-shadow: 0 6px 16px rgba(0,0,0,.4); outline: 2px solid transparent; outline-offset: 2px; transition: outline-color .2s; }
.pbk__tile-mat img { position: absolute; inset: 5px; width: calc(100% - 10px); height: calc(100% - 10px); object-fit: cover; object-position: 50% 30%; background: #d9cdb6; }
.pbk__tile:hover .pbk__tile-mat { outline-color: rgba(242,188,106,.55); }
.pbk__tile-num { font: 400 1rem var(--pb-serif); letter-spacing: .06em; }
.pbk__tile[aria-current="true"] .pbk__tile-mat { outline-color: var(--pb-amber); }
.pbk__tile[aria-current="true"] .pbk__tile-num { color: var(--pb-amber-2); font-weight: 600; }
.pbk__tile:focus-visible { outline-offset: 4px; }

/* ---------------- larger viewer ---------------- */
.pbk-viewer { width: 100vw; height: 100dvh; max-width: 100vw; max-height: 100dvh; margin: 0; padding: 0; border: 0; background: #0e0b08; color: var(--pb-ink);
  display: grid; grid-template-rows: auto minmax(0, 1fr) auto; font-family: var(--pb-serif); }
.pbk-viewer:not([open]) { display: none; }
.pbk-viewer::backdrop { background: rgba(8,6,4,.92); }
.pbk-viewer[open] { animation: pbk-rise .2s ease-out; }
.pbk-viewer__bar { display: flex; justify-content: space-between; align-items: center; gap: 1rem; padding: .75rem 1rem; }
.pbk-viewer__count { margin: 0; font-size: 1.3rem; white-space: nowrap; }
.pbk-viewer__figure { margin: 0; min-height: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: .6rem; padding: 0 1rem; touch-action: pan-y; }
.pbk-viewer__figure img { display: block; min-height: 0; max-width: 100%; max-height: 100%; width: auto; height: auto; border: 8px solid #fbf8f0; box-shadow: 0 10px 40px rgba(0,0,0,.6); background: #2a2219; }
.pbk-viewer__caption { margin: 0; font-size: 1.05rem; color: var(--pb-muted); text-align: center; }
.pbk-viewer__nav { display: flex; justify-content: space-between; align-items: center; gap: .75rem; padding: .75rem 1rem 1rem; }
.pbk-viewer__links { display: flex; flex-wrap: wrap; justify-content: center; gap: 0 1.2rem; }
.pbk-viewer__orig { font: .95rem var(--pb-ui); color: var(--pb-amber-2); min-height: 44px; display: inline-flex; align-items: center; }

/* ---------------- the walkway overlay (lectern → book → back to the same spot) ---------------- */
.book-dialog { width: 100vw; height: 100dvh; max-width: 100vw; max-height: 100dvh; margin: 0; padding: 0; border: 0; color: var(--pb-ink); font-family: var(--pb-serif);
  background: radial-gradient(90% 60% at 50% 0%, rgba(231,165,75,.10), rgba(231,165,75,0) 70%), linear-gradient(180deg, #1c1712, #120f0b);
  display: grid; grid-template-rows: auto minmax(0, 1fr); overflow: hidden; }
.book-dialog:not([open]) { display: none; }
.book-dialog::backdrop { background: rgba(8,6,4,.7); }
.book-dialog[open] { animation: pbk-rise .25s ease-out; }
.book-dialog .pbk[data-state] .pbk__open, .book-dialog .pbk[data-state] .pbk__cover, .book-dialog .pbk[data-state] .pbk__contents { animation: none; } /* the overlay itself rises; no second fade inside it */
.book-dialog__bar { display: flex; justify-content: space-between; align-items: center; gap: .6rem; padding: .7rem 1rem; border-bottom: 1px solid rgba(74,63,51,.6); }
.book-dialog__title { margin: 0; font-size: 1.2rem; font-weight: 400; color: var(--pb-ink); white-space: nowrap; min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.book-dialog__close { flex: 0 0 auto; }
.book-dialog__body { overflow: auto; padding: clamp(.8rem, 2.5vh, 1.6rem) clamp(.5rem, 2vw, 1.5rem) 1.2rem; overscroll-behavior: contain; }
.book-dialog .pbk { --max-h: calc(100dvh - 235px); margin: 0 auto; max-width: 1240px; }
.book-dialog .pbk__cover { min-height: calc(100dvh - 140px); }

@media (max-width: 760px) {
  .pbk__cover { grid-template-columns: 1fr; justify-items: center; text-align: center; gap: 1.3rem; padding: 0; }
  .pbk__board { width: min(56vw, 210px); padding: 10px 10px 10px 20px; }
  .pbk__board-title { font-size: 1.4rem; } .pbk__board-name { font-size: .82rem; } .pbk__board-dates { font-size: .82rem; }
  .pbk__board-rule { margin: .7rem 0; }
  .pbk__cover-kicker { margin-bottom: .4rem !important; }
  .pbk__cover-lead { font-size: 1.25rem; }
  .pbk__cover-actions { justify-content: center; margin-top: 1rem; }
  .pbk__cover-actions .pbk-btn { flex: 1 1 100%; }
  .pbk__controls { gap: .4rem; margin-top: .8rem; }
  .pbk__controls .pbk-btn { padding: .5rem .8rem; }
  .pbk__where { font-size: 1rem; }
  .pbk__hint { display: none; }
  .pbk__grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
  .pbk-viewer__bar { padding: .6rem .75rem; } .pbk-viewer__count { font-size: 1.1rem; }
  .pbk-viewer__nav { flex-wrap: wrap; justify-content: space-between; }
  .pbk-viewer__links { display: flex; flex-wrap: wrap; justify-content: center; gap: 0 1.2rem; }
.pbk-viewer__orig { order: 3; flex: 1 1 100%; justify-content: center; }
  .pbk-viewer__figure img { border-width: 5px; }
  .book-dialog__title { font-size: 1.05rem; }
  .book-dialog__bar { padding: .55rem .75rem; } .book-dialog__close { padding-left: .7rem; padding-right: .7rem; font-size: .92rem; }
  .book-dialog .pbk { --max-h: calc(100dvh - 205px); }
}
@media (max-width: 380px) { .pbk__controls .pbk-btn { padding: .5rem .6rem; font-size: .95rem; } }
@media (prefers-reduced-motion: reduce) {
  .pbk *, .pbk__contents *, .pbk-viewer, .pbk-viewer *, .book-dialog, .lectern-cue { animation: none !important; transition: none !important; }
  .pbk[data-state] .pbk__open, .pbk[data-state] .pbk__cover, .pbk[data-state] .pbk__contents { animation: none !important; }
}

/* ---- walkway: the lectern's small "Photo Book" label (projected over the 3D book by scene.js). Quiet: cream serif on a dark
   hairline tag with a small pointer, never brighter than the mural. It is the pointer/touch/keyboard control for the lectern. */
.lectern-cue { position: absolute; left: 0; top: 0; z-index: 4; margin: 0 0 0 10px; padding: .32rem .7rem .36rem; display: inline-flex; align-items: center; gap: .4rem;
  font: 400 .98rem/1.1 "Memorial Serif", "EB Garamond", Georgia, serif; letter-spacing: .02em; color: #f3ead9; white-space: nowrap; cursor: pointer;
  background: rgba(22,19,15,.72); border: 1px solid rgba(199,185,163,.42); border-radius: 3px; box-shadow: 0 2px 10px rgba(0,0,0,.35);
  opacity: .9; transition: opacity .2s ease, border-color .2s ease, background-color .2s ease; will-change: transform; -webkit-tap-highlight-color: transparent; }
.lectern-cue::before { content: ""; width: .5rem; height: .5rem; border-radius: 50%; background: #e7a54b; opacity: .75; box-shadow: 0 0 5px rgba(231,165,75,.45); }
.lectern-cue::after { content: ""; position: absolute; left: -5px; top: 50%; width: 8px; height: 8px; transform: translateY(-50%) rotate(45deg);
  background: inherit; border-left: inherit; border-bottom: inherit; } /* small pointer toward the book */
.lectern-cue[hidden] { display: none; }
.lectern-cue.is-far { opacity: .72; font-size: .88rem; }
.lectern-cue:hover, .lectern-cue.is-hover, .lectern-cue:focus-visible { opacity: 1; border-color: rgba(231,165,75,.75); background: rgba(30,24,18,.86); }
.lectern-cue:focus-visible { outline: 3px solid #8fd3ff; outline-offset: 3px; }
@media (pointer: coarse) { .lectern-cue { padding: .5rem .85rem; font-size: 1rem; min-height: 44px; } }
@media (prefers-reduced-motion: reduce) { .lectern-cue { transition: none; } }