/* Floating instant-photo archive. Shared spatial navigation with the previous exhibit. */
.hero.explorer-hero.archive-mode { height: max(780px, 100svh); padding: 0; background: #f0f0eb; }
.archive-mode::after { content: ''; position: absolute; inset: 0; pointer-events: none; opacity: .07; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='150' height='150'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.7' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Cpath filter='url(%23g)' opacity='.5' d='M0 0h150v150H0z'/%3E%3C/svg%3E"); }
.archive-mode .explorer-heading { position: absolute; top: 102px; left: 50%; transform: translateX(-50%); width: auto; z-index: 2; margin: 0; text-align: center; }
.archive-mode .explorer-heading .eyebrow { font-size: 9px; letter-spacing: .12em; }
.archive-mode .explorer-heading h1 { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
.archive-mode .explorer-intro { display: none; }
.archive-mode .explorer-selection { position: absolute; top: 105px; left: 32px; width: 235px; z-index: 4; padding: 0; display: block; }
.archive-mode .explorer-selection .eyebrow { padding: 0; margin-bottom: 9px; font-size: 8px; }
.archive-mode .explorer-selection h2 { font: 400 32px/1.05 var(--serif); letter-spacing: -.04em; border-bottom: 1px solid var(--ink); padding-bottom: 10px; }
.archive-mode #explorer-description { font: 11px/1.6 var(--sans); margin-top: 10px; max-width: 225px; }
.archive-mode .explorer-open { background: transparent; border: 0; border-bottom: 1px solid var(--ink); padding: 0 0 7px; margin-top: 20px; min-width: 0; min-height: 0; font-size: 9px; }
.archive-mode .explorer-open:hover { color: var(--coral); transform: none; }
.archive-mode .explorer-toolbar { position: absolute; bottom: 32px; left: 32px; right: 32px; width: auto; z-index: 5; padding-top: 16px; border-color: var(--line); }
.archive-mode .explorer-toolbar button { border: none; width: 42px; }
.archive-mode .explorer-rail { --card-width: min(49vh, 470px); position: absolute; top: 145px; bottom: 105px; width: 100%; gap: 115px; padding-block: 55px; scrollbar-width: none; scroll-snap-type: none; align-items: center; perspective: 1800px; }
.archive-mode .explorer-rail::-webkit-scrollbar { display: none; }
.archive-mode .explorer-card, .archive-mode .explorer-card.is-selected, .archive-mode .explorer-card:nth-child(even) { --archive-distance: 0; position: relative; display: block; height: calc(var(--card-width) * 1.17); border: 0; padding: 0; background: transparent; border-radius: 1px; transform-style: preserve-3d; box-shadow: none; transform: perspective(1500px) translateY(calc(var(--archive-distance) * -45px)) rotateX(8deg) rotateY(calc(-17deg - var(--archive-distance) * 14deg)) rotateZ(calc(-10deg + var(--archive-distance) * 14deg)); transition: none; }
.archive-mode .explorer-card:focus-visible { outline: 2px solid var(--coral); outline-offset: 10px; }
.archive-mode .explorer-card-top, .archive-mode .explorer-card-bottom { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
.archive-mode .explorer-art { position: absolute; inset: 0; display: block; width: 100%; height: 100%; border-radius: 1px; border: 1px solid #dfd9cb; overflow: hidden; transform: translateZ(3px); background: #faf6eb; box-shadow: 3px 5px 0 #bfb8a8, 9px 16px 22px -15px #403e3866; }
.archive-mode .explorer-art::before { content: ''; position: absolute; inset: 4% 4% 23%; background: #deddd3; box-shadow: inset 0 0 0 1px #0002; }
.archive-mode .explorer-art::after { content: ''; position: absolute; inset: 0; pointer-events: none; background: linear-gradient(118deg, #ffffff28, transparent 40%, #c5bba40c 80%); box-shadow: inset 0 0 0 1px #fff8; }
.archive-mode .explorer-art img { position: absolute; inset: 4% 4% 23%; width: 92%; height: 73%; object-fit: contain; mix-blend-mode: normal; min-height: 0; }
.archive-mode .art-0::before { background: #d4d8c9; }
.archive-mode .art-1::before { background: #d7c9b7; }
.archive-mode .art-2::before { background: #bfd0c8; }
.archive-mode .art-3::before { background: #292e28; }
.archive-mode .art-4::before { background: #d4c2b9; }
.archive-title { position: absolute; top: 81%; left: 7%; right: 7%; font: italic 400 clamp(26px, 3vw, 42px)/1.1 var(--serif); letter-spacing: -.025em; color: #292a25; text-align: left; }
.archive-imprint { position: absolute; bottom: 5%; left: 7%; width: 86%; font: 8px/1 var(--mono); letter-spacing: .06em; color: #777368; text-align: left; }
.archive-edge { position: absolute; inset: 0; border-radius: 1px; background: #c9c2b3; transform: translateZ(-3px) translate(2px, 3px); box-shadow: inset 0 0 0 1px #afa99c; }
.archive-mode .explorer-terminal { position: absolute; left: 12%; top: 22%; font: 13px/1.8 var(--mono); color: #e4e8d9; text-align: left; }
.archive-mode .explorer-terminal em { color: #eea382; }
.archive-mode .explorer-sillage { position: absolute; inset: 23% 0 auto; font: italic 400 130px/1 var(--serif); color: #4e3736; text-align: center; }
.archive-mode .explorer-sillage > span { display: none; }
.archive-mode .explorer-sillage i { font-size: 8px; margin-top: 14px; }
@media (max-width: 980px) {
 .archive-mode .explorer-heading { top: 100px; left: auto; right: 30px; transform: none; }
 .archive-mode .explorer-rail { --card-width: min(54vw, 430px); top: 245px; bottom: 100px; gap: 75px; }
 .archive-mode .explorer-selection { width: 230px; }
}
@media (max-width: 680px) {
 .hero.explorer-hero.archive-mode { height: max(740px, 100svh); min-height: 0; }
 .archive-mode .explorer-selection { top: 89px; left: 20px; width: 210px; }
 .archive-mode .explorer-selection h2 { font-size: 29px; }
 .archive-mode .explorer-heading { top: 89px; right: 16px; max-width: 80px; text-align: right; }
 .archive-mode .explorer-heading .eyebrow { font-size: 7px; line-height: 1.6; }
 .archive-mode .explorer-rail { --card-width: min(69vw, 310px); top: 255px; bottom: 95px; padding-block: 38px; gap: 34px; }
 .archive-mode .explorer-toolbar { left: 20px; right: 20px; bottom: 20px; font-size: 8px; }
 .archive-title { font-size: 26px; }
 .archive-imprint { font-size: 5.5px; letter-spacing: .02em; }
 .archive-mode .explorer-terminal { font-size: 9px; top: 18%; }
 .archive-mode .explorer-sillage { font-size: 78px; top: 22%; }
 .archive-mode .explorer-sillage i { font-size: 6px; }
}
@media (prefers-reduced-motion: reduce) {
 .archive-mode .explorer-card, .archive-mode .explorer-card.is-selected, .archive-mode .explorer-card:nth-child(even) { transform: none; }
}

/* Refined archive: central focus, receding neighbours, thin photographic stock. */
.archive-mode .explorer-rail { gap: 54px; }
.archive-mode .explorer-card, .archive-mode .explorer-card.is-selected, .archive-mode .explorer-card:nth-child(even) {
 --archive-depth: 0;
 transform: perspective(1500px) translateY(calc(var(--archive-distance) * -58px + var(--pointer-lift, 0px))) translateZ(calc(var(--archive-depth) * -130px)) rotateX(calc(4deg + var(--pointer-pitch, 0deg))) rotateY(calc(-5deg - var(--archive-distance) * 19deg + var(--pointer-yaw, 0deg))) rotateZ(calc(-3deg + var(--archive-distance) * 13deg)) scale(calc(1 - var(--archive-depth) * .075));
}
.archive-mode .explorer-art { transform: translateZ(1px); background: #faf7ef; border-color: #e6e0d4; box-shadow: 1px 1.5px 0 #d0c9bd, 4px 12px 24px -16px #35332f55; }
.archive-edge { transform: translateZ(-1px) translate(.7px, 1px); background: #dfd8ca; box-shadow: none; }
.archive-mode .explorer-art img { object-fit: cover; }
.archive-mode .explorer-art::after { opacity: .65; }
.archive-mode .explorer-toolbar { border-top: 0; }
.archive-mode .explorer-selection h2 { font-size: 30px; }
body:has(.archive-mode) .site-header { background: rgba(240,240,235,.82); border-bottom-color: transparent; }
.archive-mode .explorer-heading .eyebrow { color: #85857c; }
@media (max-width: 980px) { .archive-mode .explorer-rail { gap: 36px; } }
@media (max-width: 680px) { .archive-mode .explorer-rail { gap: 15px; } }
@media (prefers-reduced-motion: reduce) {
 .archive-mode .explorer-card, .archive-mode .explorer-card.is-selected, .archive-mode .explorer-card:nth-child(even) { transform: none; }
}

.archive-mode .explorer-art::after { background: radial-gradient(ellipse at var(--light-x, 50%) var(--light-y, 35%), #ffffff32, transparent 65%), linear-gradient(118deg, #ffffff18, transparent 45%, #c5bba408); }

/* Larger exhibition scale; preserve room for the edge metadata and controls. */
@media (min-width: 981px) {
 .archive-mode .explorer-rail { --card-width: min(58vh, 570px); top: 130px; bottom: 82px; padding-block: 38px; gap: 46px; }
}
@media (min-width: 681px) and (max-width: 980px) {
 .archive-mode .explorer-rail { --card-width: min(61vw, 480px, 49vh); top: 225px; bottom: 85px; padding-block: 30px; }
}
@media (max-width: 680px) {
 .archive-mode .explorer-rail { --card-width: min(77vw, 345px, 43vh); top: 242px; bottom: 83px; padding-block: 25px; gap: 12px; }
}

/* An irregular paper edge reveals actual project footage, rather than another card. */
.reveal-chapter { position: relative; height: 170svh; min-height: 1050px; background: #f0f0eb; --reveal-progress: 1; }
.reveal-stage { position: sticky; top: 68px; height: calc(100svh - 68px); min-height: 550px; overflow: hidden; isolation: isolate; }
.reveal-image { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transform: scale(calc(1.08 - var(--reveal-progress) * .08)); }
.reveal-shade { position: absolute; inset: 0; background: linear-gradient(transparent 28%, #0b160ebd 100%); }
.reveal-paper { position: absolute; inset: -2px 0 auto; width: 100%; height: 116%; transform: translateY(calc(var(--reveal-progress) * -100%)); pointer-events: none; }
.reveal-chapter-links { position: absolute; top: 17%; left: 50%; transform: translate(-50%, calc(var(--reveal-progress) * -100px)); display: flex; gap: 24px; width: max-content; max-width: calc(100% - 48px); opacity: calc(1 - var(--reveal-progress) * 1.2); z-index: 2; }
.reveal-chapter-links a { font: 400 clamp(1.35rem, 2.7vw, 2.6rem)/1.12 var(--serif); text-transform: uppercase; border-block: 2px solid var(--ink); padding: 6px 0; }
.reveal-caption { position: absolute; left: max(24px, calc((100vw - 1240px) / 2)); right: max(24px, calc((100vw - 1240px) / 2)); bottom: 48px; color: #faf7ed; opacity: clamp(0, calc(var(--reveal-progress) * 2.5 - .35), 1); transform: translateY(calc((1 - var(--reveal-progress)) * 45px)); }
.reveal-caption > p { font: 10px/1.5 var(--mono); letter-spacing: .1em; text-transform: uppercase; margin-bottom: 25px; }
.reveal-caption h2 { font: 400 clamp(3rem, 7.5vw, 7rem)/.95 var(--serif); letter-spacing: -.035em; }
.reveal-caption-bottom { border-top: 1px solid #ffffff70; margin-top: 32px; padding-top: 15px; display: flex; justify-content: space-between; font: 10px/1.6 var(--mono); }
.reveal-mark { position: absolute; top: 42%; color: var(--ink); font: 600 27px/1 var(--sans); opacity: calc(1 - var(--reveal-progress)); }
.mark-left { left: 20px; }.mark-right { right: 20px; }
.reveal-chapter.is-revealed .reveal-chapter-links { visibility: hidden; }
@media (max-width: 680px) {
 .reveal-stage { top: 60px; height: calc(100svh - 60px); min-height: 510px; }
 .reveal-chapter { height: 145svh; min-height: 950px; }
 .reveal-image { object-position: 51% center; }
 .reveal-chapter-links { gap: 15px; max-width: calc(100% - 32px); top: 18%; }
 .reveal-chapter-links a { font-size: 1.05rem; border-width: 1px; }
 .reveal-caption { left: 20px; right: 20px; bottom: 30px; }
 .reveal-caption h2 { font-size: 3.25rem; }
}
@media (prefers-reduced-motion: reduce) {
 .reveal-chapter { height: auto; min-height: 0; }
 .reveal-stage { position: relative; top: 0; }
 .reveal-paper, .reveal-mark { display: none; }
 .reveal-image, .reveal-caption { transform: none; opacity: 1; }
 .reveal-chapter .reveal-chapter-links { visibility: visible; opacity: 1; transform: translateX(-50%); top: 30px; color: white; }
 .reveal-chapter-links a { border-color: white; }
}

/* Submission pass: clear exit from the interactive archive. */
.browse-down { display: inline-block; border-bottom: 1px solid currentColor; padding: 8px 0; font: 11px/1.4 var(--mono); }
.archive-mode .explorer-toolbar { flex-wrap: wrap; gap: 12px 24px; }
.archive-mode .explorer-toolbar > p { margin-right: auto; }
.design-credit { margin-top: 28px; font-size: 12px !important; line-height: 1.7 !important; max-width: 60ch; }
@media (max-width: 680px) {
 .archive-mode .explorer-toolbar .browse-down { flex-basis: 100%; width: fit-content; border: 0; font-size: 10px; padding: 3px 0; }
 .archive-mode .explorer-toolbar { row-gap: 5px; }
}
