.album-sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0; }
.album-main { position: relative; isolation: isolate; display: flex; flex-direction: column; align-items: center; justify-content: center; min-height: 100svh; padding: 1rem 1.5rem calc(var(--ticker-height) + 1rem); background: #57402e url('assets/work-tabletop-v1.webp') center / cover fixed; color: #f4eee2; }
.album-main::before { content: ''; position: absolute; inset: 0; z-index: -1; pointer-events: none; background: radial-gradient(ellipse at 50% 45%, transparent 30%, #170e085c 100%); }
.album-stage { position: relative; width: min(88rem, 100%); height: calc(100svh - var(--ticker-height) - 2rem); perspective: 1800px; }
.album-book { position: absolute; inset: 0; width: min(100%, 80rem); margin-inline: auto; opacity: 0; transform: scale(.46); transform-origin: center; transition: opacity .35s ease .15s, transform .9s cubic-bezier(.2,.75,.25,1) .25s; filter: drop-shadow(0 15px 15px #190d0980); }
.album-book[hidden], .album-cover[hidden] { display: none; }
.album-stage.is-open .album-book { opacity: 1; transform: scale(1); }
.album-stage:not(.is-open) .album-book { transition-delay: 0s; }
.album-page-window { position: absolute; inset: 0; overflow: hidden; border-radius: .5rem; }
.album-spread-image { position: absolute; display: block; width: 216%; max-width: none; height: 120%; left: -111%; top: -9%; user-select: none; pointer-events: none; }
.album-cover { position: absolute; z-index: 2; inset: 0; width: min(100%, 80rem); height: 100%; margin-inline: auto; padding: 0; border: 0; border-radius: .5rem; overflow: hidden; background: transparent; color: #cfdbdf; font-family: inherit; cursor: pointer; transform: none; transform-origin: 7% 50%; transform-style: preserve-3d; backface-visibility: hidden; transition: transform .75s cubic-bezier(.22,.7,.2,1), opacity .3s ease .38s, filter .25s ease; filter: drop-shadow(8px 16px 14px #1a0c0b80); -webkit-tap-highlight-color: transparent; }
.album-cover:hover { filter: drop-shadow(10px 18px 16px #1a0c0b99) brightness(1.07); }
.album-cover:focus-visible { outline: 3px solid #f3e5c6; outline-offset: 8px; border-radius: 1rem; }
.album-stage.is-open .album-cover { transform: rotateY(-165deg); opacity: 0; pointer-events: none; }
/* Trim the bitmap's transparent padding so the leather fills the shared frame. */
.album-cover-image { position: absolute; display: block; width: 106.350711%; max-width: none; height: 113.98374%; left: -3.507109%; top: -7.479675%; object-fit: fill; pointer-events: none; user-select: none; }
.album-embossed-logo.brand-frame { position: absolute; width: min(68%, calc((100svh - var(--ticker-height) - 2rem) * .95)); left: 53%; top: 45.5%; transform: translate(-50%, -50%); aspect-ratio: 1324 / 654; overflow: hidden; pointer-events: none; }
.album-embossed-logo.brand-frame img { filter: brightness(0) drop-shadow(0 1.25px 0 #bbd0de9c) drop-shadow(0 -1px 0 #020a12cc); opacity: .7; }
.album-paper { position: absolute; left: max(6.7%, calc(44px + 1%)); right: max(10.3%, calc(44px + 1%)); top: 5%; bottom: 4%; display: flex; flex-direction: column; color: #233849; }
.album-page-heading { flex: 0 0 8%; display: flex; justify-content: center; align-items: center; margin: 0; font-family: Georgia, 'Times New Roman', serif; font-size: clamp(.8125rem, 1.2vw, 1.125rem); letter-spacing: .06em; font-weight: 400; }
.album-paper.is-contents .album-page-heading { flex-basis: 18%; font-size: clamp(1.5rem, 3vw, 2.5rem); letter-spacing: .045em; }
.album-contents { display: flex; flex: 1; min-height: 0; align-items: stretch; justify-content: center; padding-block: .5rem; overflow-y: auto; }
.album-chapter-list { display: grid; grid-auto-rows: minmax(48px, 1fr); gap: 0; width: min(90%, 42rem); height: 100%; min-height: 18rem; max-height: 34rem; margin: auto 0; padding: 0; list-style: none; }
.album-chapter-list a { display: flex; align-items: center; gap: clamp(.375rem, 1.2vw, 1rem); height: 100%; min-height: 48px; padding: .25rem 0; color: #233849; font-family: Georgia, 'Times New Roman', serif; line-height: 1.4; text-decoration: none; }
.album-chapter-order { flex: 0 0 1.5em; color: #73808a; font-size: clamp(.75rem, 1.2vw, 1rem); text-align: left; }
.album-chapter-title { font-size: clamp(1rem, 2.25vw, 1.75rem); }
.album-chapter-leader { flex: 1; min-width: .5rem; border-bottom: 1px dotted #73808a80; }
.album-chapter-page { color: #73808a; font-size: clamp(.75rem, 1.5vw, 1.125rem); font-variant-numeric: tabular-nums; }
.album-chapter-list a:hover { color: #174e7a; }
.album-chapter-list a:hover .album-chapter-leader { border-color: #174e7a; }
.album-chapter-list a:focus-visible { outline: 2px solid #174e7a; outline-offset: 5px; }
.album-contents[hidden], .album-photo-grid[hidden] { display: none; }
.album-photo-grid { flex: 1; min-height: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); grid-template-rows: repeat(3, minmax(0, 1fr)); gap: 3.2%; padding: 2.5% 1%; }
.album-photo { position: relative; display: flex; flex-direction: column; min-width: 0; min-height: 0; margin: 0; padding: 6% 6% 0; border: 0; background: #fffdf7; box-shadow: 0 2px 4px #3d301f36, 0 0 0 .5px #d3cbb9; color: #304351; cursor: zoom-in; font-family: inherit; transform: rotate(var(--photo-rotation, -1deg)); transition: transform .2s ease, box-shadow .2s ease; }
.album-photo:nth-child(3n+2) { --photo-rotation: 1deg; }
.album-photo:nth-child(3n) { --photo-rotation: -.4deg; }
.album-photo:hover { z-index: 1; transform: rotate(0) translateY(-2px) scale(1.04); box-shadow: 0 5px 10px #3d301f4d; }
.album-photo:disabled { cursor: default; opacity: .55; }
.album-photo:disabled:hover { z-index: auto; transform: rotate(var(--photo-rotation, -1deg)); box-shadow: 0 2px 4px #3d301f36, 0 0 0 .5px #d3cbb9; }
.album-photo:focus-visible { z-index: 1; outline: 3px solid #174e7a; outline-offset: 3px; transform: rotate(0); }
.album-photo-picture { display: flex; flex: 1; min-height: 0; min-width: 0; width: 100%; overflow: hidden; background: #e5e2d8; }
.album-photo-picture img { display: block; width: 100%; height: 100%; object-fit: cover; }
.album-photo-placeholder { display: flex; width: 100%; height: 100%; align-items: center; justify-content: center; background: linear-gradient(140deg, #deddd6, #f0eee6 48%, #d8d8d0); box-shadow: inset 0 0 12px #5464730d; color: #71808c; font-family: Georgia, 'Times New Roman', serif; font-size: clamp(1.25rem, 3vw, 2.5rem); font-style: italic; }
.album-photo-label { display: flex; justify-content: center; align-items: center; flex: 0 0 23%; margin: 0; min-height: 13px; font-size: clamp(.5rem, .8vw, .6875rem); line-height: 1.25; text-align: center; overflow: hidden; }
.album-photo-label span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 100%; }
.album-page-footer { flex: 0 0 auto; display: flex; flex-direction: column; align-items: center; gap: 0; margin-top: .25rem; text-align: center; font-family: Georgia, 'Times New Roman', serif; color: #73808a; font-size: .625rem; line-height: .875rem; }
.album-copyright { max-width: 100%; margin: 0; font-size: clamp(.5rem, .9vw, .625rem); line-height: inherit; }
.album-paper-number { margin: 0; font: inherit; color: inherit; }
.album-close, .album-contents-link { position: relative; display: flex; align-items: center; justify-content: center; min-width: 88px; min-height: 0; margin: 0; padding: 0; border: 0; background: transparent; color: inherit; font: inherit; text-decoration: none; cursor: pointer; }
.album-contents-link[hidden] { display: none; }
.album-close:hover, .album-contents-link:hover { text-decoration: underline; text-underline-offset: .2em; }
.album-close:focus-visible, .album-contents-link:focus-visible { outline: 2px solid #174e7a; outline-offset: 1px; }
.album-page-arrow { position: absolute; z-index: 3; top: 50%; transform: translateY(-50%); width: 44px; height: 56px; padding: 0; border: 1px solid #09244229; border-radius: .25rem; background: #f5f0e6e8; color: #092442; font: 1.125rem/1 'Segoe UI', Arial, sans-serif; cursor: pointer; transition: background .15s ease; }
.album-page-arrow--previous { left: max(0px, calc(4.5% - 22px)); }
.album-page-arrow--next { right: max(0px, calc(8.6% - 22px)); }
.album-page-arrow:hover:not(:disabled) { background: #fffdf7; }
.album-page-arrow:focus-visible { outline: 3px solid #174e7a; outline-offset: 3px; }
.album-page-arrow:disabled { opacity: .35; cursor: default; }
.album-control { min-height: 44px; min-width: 44px; padding: .5rem .875rem; border: 1px solid #f4eee250; border-radius: .25rem; background: #1c1b1a75; color: #f4eee2; font: inherit; font-size: .875rem; cursor: pointer; transition: background .15s ease; }
.album-control:hover:not(:disabled) { background: #092442dc; }
.album-control:focus-visible { outline: 3px solid #f3e5c6; outline-offset: 3px; }
.album-control:disabled { opacity: .4; cursor: default; }
.album-no-script { text-align: center; }
.album-photo-grid.is-turning, .album-contents.is-turning { animation: album-page-turn .4s ease; transform-origin: left center; }
@keyframes album-page-turn { 0% { opacity: .45; transform: perspective(1000px) rotateY(-12deg); } 100% { opacity: 1; transform: perspective(1000px) rotateY(0); } }
.album-lightbox { inset: 0 0 var(--ticker-height); margin: auto; width: min(64rem, calc(100vw - 3rem)); height: min(50rem, calc(100svh - var(--ticker-height) - 2rem)); max-width: none; max-height: calc(100svh - var(--ticker-height) - 2rem); padding: 0; border: 1px solid #d8d4c8; border-radius: .5rem; background: #f5f0e6; color: #092442; box-shadow: 0 25px 100px #0009; }
.album-lightbox::backdrop { inset: 0 0 var(--ticker-height); background: #041322de; backdrop-filter: blur(6px); }
.album-lightbox-shell { position: relative; display: flex; flex-direction: column; height: 100%; }
.album-lightbox-close { position: absolute; z-index: 1; top: .75rem; right: .75rem; width: 44px; height: 44px; border: 1px solid #fff9; border-radius: 50%; background: #092442dd; color: #fff; font: 1.75rem/1 'Segoe UI', Arial, sans-serif; cursor: pointer; }
.album-lightbox-close:focus-visible { outline: 3px solid #68a2cf; outline-offset: 3px; }
.album-lightbox-image { display: flex; flex: 1; min-height: 0; align-items: center; justify-content: center; overflow: hidden; background: #152d40; }
.album-lightbox-image img { width: 100%; height: 100%; object-fit: contain; }
.album-lightbox-image .album-photo-placeholder { color: #6c7c89; font-size: clamp(5rem, 14vw, 9rem); }
.album-lightbox-caption { flex: 0 0 auto; padding: 1rem 1.5rem 1.25rem; max-height: 55%; overflow-y: auto; }
.album-lightbox-caption h2 { margin: 0; font-family: Georgia, 'Times New Roman', serif; font-size: 1.5rem; font-weight: 400; line-height: 1.3; }
.album-lightbox-caption > p { margin: .5rem 0 0; color: #556273; font-size: .9375rem; line-height: 1.5; }
.album-lightbox-caption > p:empty { display: none; }
.album-lightbox-navigation { display: flex; align-items: center; justify-content: center; gap: 1rem; margin-top: .75rem; }
.album-lightbox-navigation .album-control { color: #092442; border-color: #09244240; background: transparent; }
.album-lightbox-navigation .album-control:hover:not(:disabled) { background: #0924420f; }
.album-lightbox-navigation .album-control:focus-visible { outline-color: #174e7a; }
.album-lightbox-navigation p { margin: 0; color: #556273; font-size: .8125rem; min-width: 6rem; text-align: center; }

@media (max-width: 700px), (max-height: 540px) and (max-width: 1000px) {
  .album-main { padding: .5rem .5rem calc(var(--ticker-height) + .5rem); background-attachment: scroll; }
  .album-stage { height: calc(100svh - var(--ticker-height) - 1rem); }
  .album-chapter-list { width: 90%; }
  .album-book { filter: drop-shadow(0 8px 8px #190d0966); }
  .album-page-heading { font-size: 1rem; }
  .album-photo-grid { gap: 3%; }
  .album-photo-placeholder { font-size: clamp(1.5rem, 7vw, 2.5rem); }
  .album-photo-label { font-size: clamp(.5rem, 2.2vw, .6875rem); min-height: 15px; }
  .album-lightbox { width: calc(100vw - 1.5rem); height: min(50rem, calc(100svh - var(--ticker-height) - 1.5rem)); max-height: calc(100svh - var(--ticker-height) - 1.5rem); }
  .album-lightbox-caption { padding: .875rem 1rem 1rem; }
  .album-lightbox-caption h2 { font-size: 1.25rem; }
}

@media (prefers-reduced-motion: reduce) {
  .album-book, .album-cover, .album-photo { transition: none; }
  .album-photo-grid.is-turning, .album-contents.is-turning { animation: none; }
}