/* The red is the space between two moving, clipped pages, not a covering curtain. */
@view-transition { navigation: none; }
::view-transition { background: var(--red,#d60000); pointer-events: none; }
::view-transition-group(root) { animation: none; }
::view-transition-image-pair(root) { isolation: isolate; }
::view-transition-old(root),::view-transition-new(root) {
 mix-blend-mode: normal; animation-duration: 1s; animation-fill-mode: both;
}
::view-transition-old(root) { animation-name: page-exit; animation-timing-function: cubic-bezier(1,.02,.51,1); }
::view-transition-new(root) { animation-name: page-enter; animation-timing-function: cubic-bezier(.99,.02,.51,1); }
@keyframes page-exit {
 from { opacity: 1; transform: translateY(0); clip-path: inset(0 0 0 0); }
 to { opacity: 0; transform: translateY(-20%); clip-path: inset(0 0 100% 0); }
}
@keyframes page-enter {
 from { opacity: 0; transform: translateY(20%); clip-path: inset(100% 0 0 0); }
 to { opacity: 1; transform: translateY(0); clip-path: inset(0 0 0 0); }
}
html:not([data-page-ready]) .title-char { animation-play-state: paused; }

/* Exclusion gives the original menu its cyan lettering over the red hover. */
.menu-content { position: relative; isolation: isolate; }
.menu-cell { position: relative; isolation: isolate; overflow: hidden; color: #fff; }
.menu-index,.menu-cell[aria-current="page"] .menu-index { color: inherit; }
.menu-cell:hover,.menu-cell:focus-visible { background: var(--menu-surface); }
.menu-cell::after { content: ''; position: absolute; inset: 0; z-index: 3; pointer-events: none; background: var(--red); mix-blend-mode: exclusion; opacity: 0; transition: opacity .22s; }
.menu-cell::before { content: ''; position: absolute; inset: 4px; z-index: 4; pointer-events: none; opacity: 0;
 background: linear-gradient(#fff,#fff) top left/10px 1px no-repeat,linear-gradient(#fff,#fff) top left/1px 10px no-repeat,linear-gradient(#fff,#fff) top right/10px 1px no-repeat,linear-gradient(#fff,#fff) top right/1px 10px no-repeat,linear-gradient(#fff,#fff) bottom left/10px 1px no-repeat,linear-gradient(#fff,#fff) bottom left/1px 10px no-repeat,linear-gradient(#fff,#fff) bottom right/10px 1px no-repeat,linear-gradient(#fff,#fff) bottom right/1px 10px no-repeat;
 transition: opacity .22s; }
.menu-cell:is(:hover,:focus-visible)::before,.menu-cell:is(:hover,:focus-visible)::after { opacity: 1; }
.menu-cell:active::after { opacity: .8; }
.menu-trail { position: absolute; top: 0; left: 0; z-index: 5; pointer-events: none; image-rendering: pixelated; mix-blend-mode: exclusion; }
.menu-socials :is(button,a) { color: var(--fg); min-height: 64px; height: 64px; padding: var(--s4); transition: background .22s,color .22s; }
.social-logo { display: block; width: 26px; height: 26px; flex: none; }
.menu-socials :is(button,a):hover { color: #fff; }
.menu-socials [aria-busy="true"] { opacity: .55; pointer-events: none; }
@media(prefers-reduced-motion:reduce) { .menu-cell::before,.menu-cell::after,.menu-socials :is(button,a) { transition: none; }.menu-trail { display: none; } }

.gallery-head { display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); min-height: min(78svh,760px); padding-top: max(160px,24svh); padding-bottom: var(--s16); align-content: end; }
.gallery-head h1 { grid-column: 2/-1; max-width: 15ch; margin-bottom: var(--s8); font-size: clamp(40px,5.6vw,72px); line-height: 1.04; }
.gallery-head p { grid-column: 3/-1; max-width: 36ch; color: var(--fg-2); font-size: 15px; line-height: 1.55; }
.album-index { padding-top: 0; }
.album-ruler { position: relative; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); padding: var(--s4) 0; margin-bottom: var(--s8); display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); gap: var(--s4); font-size: 11px; color: var(--fg-3); }
.album-ruler::before { content: ''; position: absolute; top: -8px; left: 0; width: 7px; height: 7px; background: var(--red); }
.album-ruler>span:first-child { color: var(--fg-2); }
.album-ruler>span:last-child { grid-column: 3/-1; text-align: right; }
.album-row { display: grid; grid-template-columns: minmax(0,1fr) minmax(0,2fr) minmax(0,1fr); gap: var(--s6); align-items: start; padding: var(--s12) 0; border-bottom: 1px solid var(--line); }
.album-name { font-size: 18px; line-height: 1.2; font-weight: 650; }
.album-cover { position: relative; display: grid; grid-template-columns: repeat(var(--album-images),minmax(0,1fr)); aspect-ratio: 3/1; overflow: hidden; background: var(--surface); }
.album-cover>span:not(.album-open) { display: block; min-width: 0; overflow: hidden; }
.album-cover img { width: 100%; height: 100%; object-fit: cover; transition: transform .65s var(--film-ease),filter .3s; }
.album-row:hover .album-cover img,.album-row:focus-visible .album-cover img { transform: scale(1.045); filter: brightness(.8); }
.album-open { position: absolute; inset: var(--s3); display: grid; place-items: center; opacity: 0; transition: opacity .25s; }
.album-open::before,.album-open::after { content: ''; position: absolute; width: 16px; height: 16px; border-color: var(--fg); border-style: solid; }
.album-open::before { top: 0; left: 0; border-width: 1px 0 0 1px; }
.album-open::after { bottom: 0; right: 0; border-width: 0 1px 1px 0; }
.album-open>span { display: flex; align-items: center; gap: var(--s2); padding: var(--s2) var(--s3); background: rgba(13,13,13,.85); font-size: 12px; line-height: 1.5; }
.album-open svg { width: 16px; height: 16px; stroke: currentColor; stroke-width: 1.5; fill: none; }
.album-row:hover .album-open,.album-row:focus-visible .album-open { opacity: 1; }
.album-row:focus-visible { outline: 2px solid var(--red); outline-offset: 8px; }
.album-row:active .album-cover img { filter: brightness(.65); }
.album-meta { min-width: 0; }
.album-tags { display: flex; flex-wrap: wrap; gap: var(--s1); margin-bottom: var(--s3); }
.album-tags span { padding: var(--s1) var(--s2); background: var(--surface); font-size: 10px; line-height: 1.2; color: var(--fg-2); }
.album-meta p { font-size: 12px; line-height: 1.55; color: var(--fg-2); max-width: 32ch; }
.album-row-mobile-action { display: none; }
.album-detail { padding-top: 132px; }
.album-heading,.album-intro { display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); gap: var(--s6); }
.album-back { grid-column: 1/3; justify-self: start; align-self: start; display: inline-flex; align-items: center; gap: var(--s2); min-height: 44px; color: var(--fg-2); font-size: 12px; }
.album-back:hover { color: var(--fg); }.album-back:active { color: var(--red); }
.album-heading-copy { grid-column: 3/-1; min-width: 0; }
.album-heading h1 { font-size: clamp(32px,4vw,56px); line-height: 1.08; margin-top: var(--s4); }
.album-intro { margin-top: var(--s12); align-items: end; }
.album-description { grid-column: 1/2; font-size: 15px; line-height: 1.55; max-width: 30ch; color: var(--fg-2); }
.album-hero { grid-column: 3/-1; margin: 0; background: var(--surface); }
.album-hero img { width: 100%; max-height: 560px; object-fit: contain; }
.album-roll { margin-top: var(--s24); }
.album-photos { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); align-items: start; gap: var(--s8); }
.album-photos[data-album="worlds"] { grid-template-columns: repeat(2,minmax(0,1fr)); }
.album-photo { display: block; width: 100%; padding: 0; border: 0; background: transparent; text-align: left; cursor: zoom-in; }
.album-photo-frame { position: relative; display: block; overflow: hidden; background: var(--surface); }
.album-photo img { width: 100%; height: auto; transition: filter .25s; }
.album-photo:hover img { filter: brightness(.8); }
.album-photo:active img { filter: brightness(.65); }
.album-photo:focus-visible { outline: 2px solid var(--red); outline-offset: 8px; }
.album-photo .album-open { opacity: 0; }
.album-photo:hover .album-open,.album-photo:focus-visible .album-open { opacity: 1; }
.album-caption { display: flex; justify-content: space-between; gap: var(--s4); padding-top: var(--s4); font-size: 12px; line-height: 1.5; color: var(--fg-2); }
.album-caption>span:last-child { flex: none; color: var(--fg-3); }
.album-next { display: flex; justify-content: space-between; align-items: center; gap: var(--s6); margin-top: var(--s16); padding: var(--s8) 0; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); font-size: 20px; }
.album-next:hover { color: var(--red-bright); }.album-next:active { opacity: .7; }
.gallery-reserve { padding-top: var(--s16); }
@media(max-width:860px) {
 .gallery-head { min-height: 60svh; padding-top: 144px; }
 .gallery-head h1 { grid-column: 1/-1; font-size: 48px; }
 .gallery-head p { grid-column: 2/-1; }
 .album-row { grid-template-columns: 1fr 3fr; gap: var(--s6); }
 .album-meta { grid-column: 2; }.album-meta p { max-width: 50ch; }
 .album-detail { padding-top: 116px; }
 .album-description { grid-column: 1/3; }
 .album-photos { grid-template-columns: repeat(2,minmax(0,1fr)); gap: var(--s6); }
}
@media(max-width:600px) {
 .gallery-head { display: block; min-height: 0; padding-top: 140px; padding-bottom: var(--s12); }
 .gallery-head h1 { font-size: 40px; margin-bottom: var(--s6); }.gallery-head p { max-width: 36ch; font-size: 14px; }
 .album-ruler { grid-template-columns: 1fr 1fr; padding: var(--s3) 0; margin-bottom: 0; }.album-ruler>span:last-child { grid-column: 2; }
 .album-row { display: grid; grid-template-columns: 1fr; gap: var(--s6); padding: var(--s8) 0; }
 .album-name { font-size: 18px; }.album-meta { grid-column: 1; }.album-meta p { max-width: none; }
 .album-open { display: none; }.album-cover { aspect-ratio: 3/1; }
 .album-row-mobile-action { display: inline-flex; margin-top: var(--s4); min-height: 44px; align-items: center; font-size: 12px; color: var(--fg-2); text-decoration: underline; text-underline-offset: 4px; }
 .album-heading,.album-intro { grid-template-columns: 1fr; gap: var(--s6); }
 .album-back,.album-heading-copy,.album-description,.album-hero { grid-column: 1; }
 .album-heading h1 { font-size: 36px; }.album-intro { margin-top: var(--s8); }
 .album-description { max-width: none; font-size: 14px; }.album-hero img { max-height: 440px; }
 .album-roll { margin-top: var(--s16); }
 .album-photos,.album-photos[data-album="worlds"] { grid-template-columns: 1fr; gap: var(--s8); }
 .album-next { font-size: 18px; }.gallery-reserve { padding-top: var(--s12); }
}
@media(hover:none) { .album-row-mobile-action { display: inline-flex; min-height: 44px; margin-top: var(--s3); align-items: center; font-size: 12px; text-decoration: underline; text-underline-offset: 4px; } }
@media(prefers-reduced-motion:reduce) {
 @view-transition { navigation: none; }
 .album-cover img,.album-open,.album-photo img { transition: none; }
 .album-row:hover .album-cover img,.album-row:focus-visible .album-cover img { transform: none; }
}
@media print { @view-transition { navigation: none; } }

.copy-toast { position: fixed; left: 50%; bottom: max(32px,env(safe-area-inset-bottom)); z-index: 11000; max-width: calc(100% - 32px); padding: var(--s4) var(--s6); background: var(--surface-2); color: var(--fg); border: 1px solid var(--line); font-size: 14px; line-height: 1.5; text-align: center; opacity: 0; transform: translate(-50%,8px); pointer-events: none; transition: opacity .18s,transform .18s; }
.copy-toast.is-visible { opacity: 1; transform: translate(-50%,0); }
.copy-toast.is-error { pointer-events: auto; user-select: all; }
@media(prefers-reduced-motion:reduce) { .copy-toast { transition: none; } }

html[data-route-loading] { cursor: progress; }
html[data-route-loading] .menu-cell { cursor: progress; }
html[data-route-loading] main { pointer-events: none; }
.route-status { position: fixed; left: 50%; bottom: max(32px,env(safe-area-inset-bottom)); z-index: 11000; max-width: calc(100% - 32px); transform: translateX(-50%); padding: var(--s4) var(--s6); background: var(--surface-2); border: 1px solid var(--line); color: var(--fg); font-size: 14px; }