/* Dubrovnik library principle: tactile depth and photographic curiosity, not literal furniture. */
:root {
  /* Shadow leather, binding red and walnut sampled from the owner's library photographs. */
  --album-night: #190b0b;
  --album-leather: #332027;
  --album-oxblood: #7d2f33;
  --album-paper: #e8dcc7;
  --album-paper-deep: #cbb99a;
  --album-brass: #b79a69;
  --album-rule: rgba(196, 163, 111, .38);
}

/* Earlier architectural study (superseded by the fragment entrance below). */
.collection-environment .cover.cover { background: #140e0d; }
.entrance-space { position: absolute; inset: 0; overflow: hidden; background: radial-gradient(ellipse at 70% 45%, #6d5340 0, #36241d 35%, #140e0d 72%); }
.entrance-space__light { position: absolute; left: 59%; top: 13%; width: 24%; height: 59%; border: 1.1rem solid #32251e; border-top-width: 1.6rem; background: linear-gradient(180deg, #dedcd0, #e5d8b7 55%, #ae8865); box-shadow: 0 0 0 1px #8b7051, 0 0 0 2.8rem rgba(81,58,42,.5), 0 0 110px 35px rgba(216,184,126,.18); }
.entrance-space__light::before { position: absolute; inset: 0; content: ""; background: linear-gradient(90deg, transparent 48%, #44352a 48%, #44352a 51%, transparent 51%), linear-gradient(180deg, transparent 64%, #44352a 64%, #44352a 66%, transparent 66%); }
.entrance-space__plane { position: absolute; top: 0; bottom: 0; width: 26%; background: repeating-linear-gradient(180deg, transparent 0, transparent 8.8rem, rgba(197,148,94,.18) 8.85rem, #100b0a 9rem, #100b0a 9.7rem), linear-gradient(90deg, #100b0a, #39241c 70%, #211612); box-shadow: inset -1px 0 rgba(196,149,95,.3); }
.entrance-space__plane--left { left: 0; clip-path: polygon(0 0, 100% 13%, 100% 78%, 0 100%); }
.entrance-space__plane--right { right: 0; width: 13%; background-color: #211511; clip-path: polygon(0 13%, 100% 0, 100% 100%, 0 78%); }
.entrance-space__floor { position: absolute; inset: 68% 0 0; background: linear-gradient(180deg, rgba(100,66,45,.08), #241115 77%, #29171b), radial-gradient(ellipse at 70% 0, rgba(231,205,152,.35), transparent 60%); clip-path: polygon(26% 0, 87% 0, 100% 100%, 0 100%); }
.collection-environment .cover.cover .cover__veil { background: linear-gradient(90deg, rgba(14,9,9,.55), transparent 55%), linear-gradient(0deg, #29171b, transparent 28%); }
.collection-environment .cover.cover .cover__copy { max-width: 47rem; }
.collection-environment .rooms-entrance { background: radial-gradient(ellipse at 72% 0, rgba(177,130,82,.13), transparent 32rem), #29171b; }
@media (max-width: 600px) {
  .entrance-space__light { left: 36%; top: 15%; width: 47%; height: 43%; border-width: .6rem; box-shadow: 0 0 0 1px #8b7051, 0 0 0 1.25rem rgba(81,58,42,.5), 0 0 65px rgba(216,184,126,.18); }
  .entrance-space__plane--left { width: 22%; }
  .entrance-space__plane--right { width: 10%; }
  .entrance-space__floor { top: 57%; }
  .collection-environment .cover.cover .cover__veil { background: linear-gradient(0deg, #29171b, rgba(20,12,12,.6) 32%, transparent 55%); }
}

body { color: var(--album-paper); background: var(--album-night); }

/* The original window becomes architecture and daylight behind the entrance. */
.collection-environment { position: relative; isolation: isolate; overflow: clip; background: var(--album-night); }
.collection-window { position: absolute; z-index: -2; top: 23rem; left: 31%; right: 9%; height: 48rem; overflow: hidden; pointer-events: none; mask-image: linear-gradient(180deg, transparent, #000 15%, #000 55%, transparent); }
.collection-window img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 54% 45%; transform: scale(1.65); transform-origin: 55% 48%; filter: none; }
.collection-window::after { position: absolute; inset: 0; content: ""; background: linear-gradient(90deg, #190b0b, rgba(25,11,11,.35) 40%, rgba(25,11,11,.15) 65%, #190b0b), linear-gradient(180deg, rgba(25,11,11,.3), rgba(41,23,27,.5)); }
.collection-interior { position: absolute; z-index: -1; top: 23rem; inset-inline: 0; height: 65rem; overflow: hidden; pointer-events: none; mask-image: linear-gradient(180deg, transparent, #000 8%, #000 60%, transparent); }
.collection-interior img { width: 100%; height: 100%; object-fit: cover; object-position: center 42%; mask-image: linear-gradient(90deg, #000, #000 24%, transparent 49%, transparent 68%, #000 94%); }
.collection-interior::after { position: absolute; inset: 0; content: ""; background: linear-gradient(90deg, rgba(25,11,11,.62), rgba(25,11,11,.3) 24%, transparent 55%, rgba(25,11,11,.7)), linear-gradient(180deg, rgba(25,11,11,.35), transparent 28%, #29171b 83%); }

/* The one Collection cover becomes a compact, atmospheric album exterior. */
.cover { min-height: clamp(22.2rem, 38.5svh, 28.7rem); background: linear-gradient(180deg, #190b0b, rgba(25,11,11,.96) 48%, rgba(25,11,11,.72)); border-bottom: 0; }
.cover::before { position: absolute; inset: 0; z-index: 1; content: ""; pointer-events: none; background: radial-gradient(ellipse at 30% 0, rgba(232,220,199,.045), transparent 62%), linear-gradient(135deg, transparent 30%, rgba(0,0,0,.17)); }
.cover::after { position: absolute; inset: 1rem; z-index: 1; content: ""; pointer-events: none; border: 1px solid rgba(210,175,119,.18); box-shadow: inset 0 0 0 3px rgba(17,9,8,.18); }
.cover > img { left: auto; right: 2%; top: -9%; width: min(51%, 48rem); height: 120%; object-fit: cover; object-position: center 34%; opacity: .3; filter: none; -webkit-mask-image: linear-gradient(90deg, transparent, #000 29%, #000 72%, transparent); mask-image: linear-gradient(90deg, transparent, #000 29%, #000 72%, transparent); }
.cover__veil { z-index: 1; background: linear-gradient(90deg, rgba(21,12,11,.32), rgba(21,12,11,.22) 57%, rgba(21,12,11,.5)), linear-gradient(0deg, rgba(16,9,8,.45), transparent 80%); }
.cover__copy { min-height: clamp(22.2rem, 38.5svh, 28.7rem); justify-content: center; padding: 5.4rem 4.8vw 2.1rem; }
.cover h1 { font-size: clamp(3.6rem, 6.3vw, 7.2rem); color: #f0e4cf; text-shadow: 0 2px 22px rgba(0,0,0,.35); }
.cover__copy > strong { margin-top: 1.5rem; color: #d7c4a6; }
.cover__open { bottom: 1.3rem; color: #ead8b6; }
.cover__open b { border-color: var(--album-rule); border-radius: 0; }
.collection-header { color: #e9ddc8; }

/* Open album: dark, warm gutters hold the existing photographic doorways. */
.rooms-entrance { position: relative; margin: 0; padding-top: clamp(4.5rem, 7vw, 7rem); color: #eadfc9; background: linear-gradient(180deg, transparent, rgba(41,23,27,.12) 24%, #29171b 80%); border: 0; }
.rooms-entrance__heading { border-bottom-color: var(--album-rule); }
.rooms-entrance__meta { color: #c8b590; }
.room-doors { gap: clamp(.8rem, 1.3vw, 1.3rem); padding: .4rem; background: rgba(18,11,13,.48); border-top: 1px solid rgba(232,220,199,.1); }
.room-door { border: 5px solid #332027; background: var(--album-night); box-shadow: 0 2px 0 #080506, inset 0 0 0 1px rgba(236,208,161,.13); }
.room-door--new-york, .room-door--places-travel { border-color: #453039; }
.room-door--business, .room-door--objects-artifacts { border-color: #291b20; }
.room-door::after { position: absolute; inset: 0; content: ""; pointer-events: none; box-shadow: inset 0 0 0 1px rgba(240,219,184,.21), inset 0 2px 4px rgba(0,0,0,.32); }
.room-door:hover, .room-door:focus-visible { outline-color: var(--album-brass); box-shadow: 0 2px 0 #100b0a, 0 19px 33px rgba(0,0,0,.35); }
.room-door img { filter: none; }
.room-door__shade { background: linear-gradient(0deg, rgba(11,8,7,.78), rgba(11,8,7,.12) 54%, transparent); }
.room-door__label small { color: #f1e5d3; }
.room-door__arrow { border-color: rgba(221,194,150,.8); }
.rooms-entrance__all { justify-content: flex-end; border-top-color: var(--album-rule); }
.rooms-entrance__all > span { color: #c4af90; }
.rooms-entrance__all a { color: #ecddbf; border-bottom-color: var(--album-rule); }

/* Room walls are album leaves: warm shadows outside, restrained print stock within. */
.room-hero { border-bottom: 5px solid var(--album-leather); }
.discovery { margin: 0 clamp(.35rem, 1.1vw, 1rem); background: #29171b; border: 1px solid rgba(232,220,199,.12); border-bottom: 0; }
.discovery__heading { color: #c6ae88; border-bottom-color: var(--album-rule); }
.wall-grid { gap: clamp(.8rem, 1.4vw, 1.45rem); }
.wall-cover { grid-template-rows: 12rem minmax(7rem, 1fr); color: #261b17; background: var(--album-paper); border: 6px solid #71615a; box-shadow: 0 2px 1px rgba(0,0,0,.38), 0 12px 24px rgba(0,0,0,.3), inset 0 0 0 1px rgba(55,35,25,.15); }
.wall-cover:hover, .wall-cover:focus-visible { box-shadow: 0 2px 1px rgba(0,0,0,.38), 0 23px 35px rgba(0,0,0,.32); outline-color: var(--album-brass); }
.wall-cover__image { background: #1a1310; }
.wall-cover__image img, .wall-cover:hover img, .wall-cover:focus-visible img { filter: none; }
.wall-cover__number { color: #8c603f; }
.wall-cover small { color: #625448; }
.wall-cover--ink { color: #f0e2c9; background: var(--album-leather); border-color: #58434a; }
.wall-cover--ink .wall-cover__number { color: #c7a77b; }
.wall-cover--ink small { color: #d4c1a6; }
.wall-cover--wide { grid-template-rows: minmax(0, 1fr); }
.room-return { color: #e6d6b9; background: var(--album-night); border-top: 1px solid var(--album-rule); }
footer { color: #bdaa8d; background: var(--album-night); border-top-color: var(--album-rule); }

/* The authentic room owns the entrance; identity stays in its quiet, dark corner. */
.collection-environment .cover { min-height: 100svh; background: #190b0b; }
.collection-environment .cover > img { inset: 0; width: 100%; height: 100%; max-width: none; opacity: 1; object-position: center 48%; mask-image: none; -webkit-mask-image: none; }
.collection-environment .cover::before, .collection-environment .cover::after { content: none; }
.collection-environment .cover__veil { background: linear-gradient(90deg, rgba(12,8,7,.66), rgba(12,8,7,.22) 39%, transparent 72%), linear-gradient(0deg, rgba(12,8,7,.7), transparent 26%), linear-gradient(180deg, rgba(12,8,7,.48), transparent 22%); }
.collection-environment .cover__copy { min-height: 100svh; justify-content: flex-end; padding: 8rem 5vw 9rem; max-width: 43rem; }
.collection-environment .cover h1 { font-size: clamp(3.4rem, 5.1vw, 5.8rem); text-shadow: 0 2px 14px rgba(0,0,0,.55); }
.collection-environment .cover__copy > strong { font-weight: 400; color: #f0e4cf; margin-top: 1.35rem; }
.collection-environment .cover__open { bottom: 3rem; right: 5vw; }
.collection-environment .collection-interior, .collection-environment .collection-window { top: 100svh; }

@media (max-width: 820px) {
  .cover > img { right: -10%; width: 75%; opacity: .21; }
  .cover__copy { padding: 6rem 6vw 3.4rem; }
  .wall-cover:not(.wall-cover--wide) { grid-template-rows: 10.5rem minmax(7rem, 1fr); }
}
@media (max-width: 600px) {
  .cover, .cover__copy { min-height: 25.4rem; }
  .cover h1 { font-size: clamp(3.1rem, 13vw, 5rem); }
  .cover__copy > strong { max-width: 23ch; margin-top: 1.2rem; }
  .cover > img { right: -24%; width: 95%; opacity: .17; }
  .cover__open { right: 5vw; bottom: 1.7rem; }
  .cover__open span { display: inline; }
  .collection-window { top: 25.4rem; left: 12%; right: -18%; height: 43rem; }
  .collection-window img { object-position: 55% 45%; transform: scale(1.6); }
  .collection-window::after { background: linear-gradient(90deg, #190b0b, rgba(25,11,11,.5) 48%, rgba(25,11,11,.35)), linear-gradient(180deg, rgba(25,11,11,.6), transparent 30%, #29171b 85%); }
  .collection-interior { top: 25.4rem; height: 52rem; }
  .collection-interior img { width: 180%; max-width: none; object-position: left center; mask-image: linear-gradient(90deg, #000, #000 16%, transparent 46%); }
  .rooms-entrance { padding-top: 4.2rem; }
  .rooms-entrance, .discovery { margin-left: 0; margin-right: 0; border-left: 0; border-right: 0; }
  .room-door { border-width: 4px; }
  .wall-cover { border-width: 4px; }
  .wall-cover:not(.wall-cover--wide) { grid-template-rows: 9rem minmax(7rem, 1fr); }
  .wall-cover--wide { grid-template-rows: 12rem minmax(7rem, 1fr); }
  .collection-environment .cover > img { width: 100%; right: 0; opacity: 1; object-position: 43% center; }
  .collection-environment .cover__copy { min-height: 100svh; padding: 7rem 6vw 8.5rem; }
  .collection-environment .cover h1 { font-size: clamp(3rem, 12vw, 4.6rem); }
  .collection-environment .cover__veil { background: linear-gradient(0deg, rgba(12,8,7,.82), rgba(12,8,7,.22) 54%, transparent 77%), linear-gradient(180deg, rgba(12,8,7,.5), transparent 22%); }
  .collection-environment .cover__open { bottom: 2.4rem; }
}

/* Superseded fragment experiment; active quiet entrance is scoped below. */
.collection-environment.fragment-entrance .cover.cover,
.collection-environment.fragment-entrance .cover.cover .cover__copy { min-height: 60svh; }
.collection-environment.fragment-entrance .cover.cover { background: #211315; }
.entrance-fragments { position: absolute; inset: 0; overflow: hidden; }
.entrance-fragments > div { position: absolute; overflow: hidden; }
.entrance-fragments img { display: block; max-width: none; filter: none; }
.entrance-fragments__timber { inset: 0 30% 35% 0; mask-image: linear-gradient(180deg, #000, transparent 95%); opacity: .5; }
.entrance-fragments__timber img { width: min(100vw, 1000px); height: auto; transform: translateY(-8%); }
.entrance-fragments__window { right: 4%; top: 6%; width: min(39vw, 530px); height: 86%; mask-image: linear-gradient(90deg, transparent, #000 24%, #000 82%, transparent); }
.entrance-fragments__window img { width: 100%; height: 100%; object-fit: cover; object-position: 49% center; }
.entrance-fragments__leather { right: 20%; bottom: -4%; width: min(42vw, 610px); height: 42%; mask-image: radial-gradient(ellipse, #000 28%, transparent 73%); opacity: .8; }
.entrance-fragments__leather img { width: 100%; height: auto; transform: translateY(-56%); }
.collection-environment.fragment-entrance .cover.cover .cover__veil { background: linear-gradient(90deg, rgba(27,14,16,.55), rgba(27,14,16,.12) 60%, transparent), linear-gradient(0deg, #29171b, transparent 30%); }
.collection-environment.fragment-entrance .cover.cover .cover__copy { justify-content: center; padding: 5.8rem 5vw 4.8rem; max-width: 57%; }
.collection-environment.fragment-entrance .cover h1 { font-size: clamp(3rem, 4.8vw, 5rem); }
.collection-environment.fragment-entrance .cover__open { bottom: 1.7rem; right: 5vw; }
@media (max-width: 600px) {
  .entrance-fragments__window { width: 58%; right: -11%; top: 0; height: 75%; opacity: .72; }
  .entrance-fragments__timber { right: 0; opacity: .38; }
  .entrance-fragments__timber img { width: 610px; }
  .entrance-fragments__leather { width: 75%; right: -5%; bottom: -5%; }
  .collection-environment.fragment-entrance .cover.cover .cover__copy { max-width: 100%; padding: 5.8rem 6vw 4.6rem; }
  .collection-environment.fragment-entrance .cover h1 { font-size: clamp(2.6rem, 10.5vw, 3.8rem); }
  .collection-environment.fragment-entrance .cover__copy > strong { margin-top: .9rem; }
  .collection-environment.fragment-entrance .cover.cover .cover__veil { background: linear-gradient(90deg, rgba(27,14,16,.65), rgba(27,14,16,.25)), linear-gradient(0deg, #29171b, transparent 40%); }
}

/* Retained baseline entrance; portal treatment below is isolated. */
.collection-environment.quiet-entrance .cover.cover,
.collection-environment.quiet-entrance .cover.cover .cover__copy { min-height: 0; }
.collection-environment.quiet-entrance .cover.cover { background: linear-gradient(125deg, #1c1010, #382027 68%, #29171b); }
.collection-environment.quiet-entrance .cover.cover .cover__veil { display: none; }
.collection-environment.quiet-entrance .cover.cover .cover__copy { max-width: none; padding: 7rem 5vw 4rem; justify-content: center; }
.collection-environment.quiet-entrance .cover h1 { font-size: clamp(3rem, 5.3vw, 5.5rem); }
.collection-environment.quiet-entrance .cover__copy > strong { max-width: none; margin-top: 1.25rem; }
.collection-environment.quiet-entrance .cover__open { bottom: 3rem; right: 5vw; }
@media (max-width: 600px) {
  .collection-environment.quiet-entrance .cover.cover .cover__copy { padding: 6rem 6vw 5.5rem; }
  .collection-environment.quiet-entrance .cover h1 { font-size: clamp(2.5rem, 10.5vw, 3.6rem); }
  .collection-environment.quiet-entrance .cover__copy > strong { max-width: 28ch; font-size: 1rem; margin-top: 1rem; }
  .collection-environment.quiet-entrance .cover__open { bottom: 1.65rem; }
}

/* Retained portal experiment, superseded by the owner's supplied-image preview. */
.collection-environment.portal-entrance .cover.cover { min-height: 36rem; background: radial-gradient(ellipse at 71% 50%, #684333, #382027 45%, #180e0e 85%); overflow: hidden; }
.collection-environment.portal-entrance .cover.cover .cover__veil { display: none; }
.collection-environment.portal-entrance .cover.cover .cover__copy { min-height: 36rem; max-width: 42%; padding: 7rem 5vw 4rem; justify-content: center; }
.collection-environment.portal-entrance .cover h1 { font-size: clamp(2.4rem, 3.4vw, 3.8rem); }
.collection-environment.portal-entrance .cover__copy > strong { max-width: 27ch; font-size: 1.15rem; line-height: 1.55; font-weight: 400; }
.archive-portal { position: absolute; z-index: 2; left: 48%; right: 7%; top: 5.7rem; bottom: 2.3rem; padding: 1.6rem 1.9rem 3rem; border-radius: 42% 42% 9% 9% / 33% 33% 8% 8%; background: linear-gradient(125deg, #a47b51, #4b3024 35%, #28191a 67%, #946b47); box-shadow: 0 22px 55px #120909, inset 0 0 0 1px #b5946755, inset 0 0 24px #140d0d; text-decoration: none; color: #f0e4cf; }
.archive-portal__beyond { position: relative; display: block; height: 100%; overflow: hidden; border-radius: 42% 42% 8% 8% / 34% 34% 8% 8%; background: #bdae99; box-shadow: inset 0 0 35px #120909; }
.archive-portal__beyond img { position: absolute; object-fit: cover; filter: none; }
.archive-portal__ny { inset: 0; width: 100%; height: 100%; object-position: center; }
.archive-portal__music { left: -5%; bottom: -8%; width: 51%; height: 64%; object-position: 66% center; border: 7px solid #29171b; transform: rotate(-7deg); box-shadow: 7px 5px 18px #140d0d99; }
.archive-portal__food { right: -7%; bottom: -15%; width: 40%; height: 49%; border: 6px solid #493027; transform: rotate(8deg); box-shadow: -7px 0 18px #140d0d99; }
.archive-portal__invitation { position: absolute; bottom: 1rem; left: 0; right: 0; text-align: center; font-size: .65rem; letter-spacing: .16em; text-transform: uppercase; }
.archive-portal__invitation b { margin-left: 1rem; font-size: 1.2rem; font-weight: 400; }
.archive-portal:focus-visible { outline: 2px solid #e8dcc7; outline-offset: 6px; }
@media (max-width: 600px) {
  .collection-environment.portal-entrance .cover.cover { min-height: 39rem; }
  .collection-environment.portal-entrance .cover.cover .cover__copy { min-height: 0; max-width: none; padding: 6rem 6vw 1rem; }
  .collection-environment.portal-entrance .cover h1 { font-size: 2.4rem; }
  .collection-environment.portal-entrance .cover__copy > strong { margin-top: .7rem; font-size: .95rem; max-width: 30ch; }
  .archive-portal { left: 12%; right: 12%; top: 19rem; bottom: 1.4rem; padding: 1rem 1rem 2.8rem; }
}

/* Owner-selected library screenshot. Private preview pending licensed clean original. */
.collection-environment.library-image-entrance .cover.cover { min-height: 64svh; background: #29171b; }
.collection-environment.library-image-entrance .cover.cover > img { inset: 0; width: 100%; height: 100%; max-width: none; opacity: 1; object-fit: cover; object-position: center; mask-image: none; -webkit-mask-image: none; }
.collection-environment.library-image-entrance .cover.cover .cover__veil { background: linear-gradient(90deg, rgba(28,13,15,.64), rgba(28,13,15,.08) 64%), linear-gradient(0deg, #29171b, rgba(41,23,27,.65) 12%, transparent 45%), linear-gradient(180deg, rgba(20,11,12,.42), transparent 25%); }
.collection-environment.library-image-entrance .cover.cover .cover__copy { min-height: 64svh; max-width: 55rem; padding: 7rem 5vw 5rem; justify-content: flex-end; }
.collection-environment.library-image-entrance .cover h1 { font-size: clamp(3rem, 4.8vw, 5rem); }
.collection-environment.library-image-entrance .cover__copy > strong { font-size: 1.15rem; font-weight: 400; max-width: none; margin-top: 1rem; }
.collection-environment.library-image-entrance .cover__open { right: 5vw; bottom: 2.2rem; }
@media (max-width: 600px) {
  .collection-environment.library-image-entrance .cover.cover .cover__copy { padding: 6rem 6vw 5rem; }
  .collection-environment.library-image-entrance .cover h1 { font-size: clamp(2.6rem, 11vw, 3.5rem); }
  .collection-environment.library-image-entrance .cover__copy > strong { max-width: 28ch; font-size: 1rem; }
  .collection-environment.library-image-entrance .cover.cover > img { object-position: 56% center; }
}