/* The existing cinematic palette and type system, with quieter project navigation. */
[hidden] { display: none !important; }
main:focus { outline: none; }
.journey-header { min-height: 76px; background: var(--ink); }
.journey-header nav { gap: clamp(18px, 2.6vw, 38px); }
.journey-header nav a { min-width: 44px; justify-content: center; text-decoration-skip-ink: auto; }
.journey-header a[aria-current] { text-decoration: underline; text-decoration-color: var(--accent); text-underline-offset: 9px; text-decoration-thickness: 2px; }
.hero-index-link, .project-detail-link, .text-link, .source-link, .back-to-work {
  font-family: var(--display); font-size: 12px; font-weight: 500; line-height: 1.5; letter-spacing: .08em; text-transform: uppercase;
  display: inline-flex; min-height: 44px; align-items: center; text-decoration: underline; text-underline-offset: 6px; text-decoration-color: var(--titanium);
}
.hero-index-link { margin-top: 12px; }
.project-detail-link { margin-top: 12px; }
.project-facts { display: flex; flex-wrap: wrap; gap: 18px 40px; margin: 0 0 28px; }
.project-facts div { min-width: 0; }
.project-facts dt, .project-credits dt { color: var(--titanium); font-family: var(--mono); font-size: 10px; font-weight: 400; letter-spacing: .12em; line-height: 1.6; text-transform: uppercase; }
.project-facts dd, .project-credits dd { margin: 6px 0 0; font-size: 15px; line-height: 1.5; }
.scene-copy .project-facts { margin-bottom: 26px; }
.scene-copy .project-facts dt { color: var(--paper); }
.scene-copy .project-facts dd { color: var(--paper); }
.scene-copy .project-facts div:first-child { display: none; } /* Discipline is already in the chapter label. */
.scene-copy .project-facts:has(div:only-child) { display: none; }
.opening { min-height: max(820px, calc(var(--type-hero) * 2.04 + 540px)); }
.film-story { height: 100svh; min-height: 680px; }
.film-story .scene-copy { padding-top: 0; }
.scene-copy .scene-next { margin-top: 30px; }
.selection-heading h2 { font-size: clamp(40px, 5vw, 72px); }
.collection-invitation { margin-top: 36px; padding-top: 28px; }
.collection-invitation p { font-size: 24px; font-weight: 400; }
.still-caption span { font-size: 10px; letter-spacing: .06em; }
.work-index { padding: clamp(56px, 7vw, 104px) 8%; background: var(--panel); }
.index-heading { margin-bottom: 36px; display: grid; grid-template-columns: 1.4fr 1fr; gap: 18px 6%; align-items: end; }
.index-heading>.eyebrow { grid-column: 1/-1; color: var(--titanium); }
.index-heading h2 { margin: 0; font-size: clamp(40px, 4.6vw, 72px); }
.index-heading p { margin: 0; color: var(--muted); font-size: 16px; line-height: 1.6; }
.work-list { list-style: none; margin: 0; padding: 0; }
.work-list li { border-top: 1px solid var(--line); }
.work-list li:last-child { border-bottom: 1px solid var(--line); }
.work-list a { display: grid; grid-template-columns: 36px minmax(0, 1.65fr) minmax(140px, .85fr) 24px; align-items: center; gap: 20px; padding: 26px 0; min-height: 80px; }
.work-number, .work-discipline { font-family: var(--mono); font-size: 11px; line-height: 1.6; color: var(--muted); }
.work-number { color: var(--titanium); }
.work-title { font-family: var(--display); font-size: clamp(19px, 2vw, 30px); font-weight: 400; line-height: 1.25; letter-spacing: -.02em; }
.work-open { font-size: 24px; text-align: right; }
.work-list a:hover .work-title, .work-list a:focus-visible .work-title { color: var(--titanium); }
.closing-note { padding-top: 72px; padding-bottom: 72px; }
.closing-note>p { max-width: 42ch; }
.journey .contact { padding-top: 48px; padding-bottom: 64px; }
.contact h2 { font-size: clamp(48px, 6.5vw, 104px); margin: 48px 0 36px; }
.contact-bottom { flex-wrap: wrap; gap: 24px; }
.contact-bottom>p { max-width: 40ch; }
.contact-status { border-left: 1px solid var(--titanium); padding-left: 20px; }
.contact-address { flex-basis: 100%; color: var(--muted); overflow-wrap: anywhere; text-decoration: underline; text-underline-offset: 5px; }
.site-footer { border-top: 1px solid var(--line); }
.site-footer nav { display: flex; flex-wrap: wrap; gap: 12px 24px; }
.site-footer a, .site-footer button { min-height: 44px; display: inline-flex; align-items: center; }
.site-footer .footer-brand { display: block; }
.site-footer .footer-brand span { display: block; }

/* Project pages: real HTML routes and full compositions; media loads on intent. */
.project-page .journey-header { background: var(--ink); border-bottom: 1px solid var(--line); }
.project-intro { padding: 144px 8% 40px; }
.project-intro>.back-to-work { margin-bottom: 36px; color: var(--muted); }
.project-intro>.eyebrow { display: block; color: var(--titanium); }
.project-intro h1 { max-width: 18ch; font-family: var(--display); font-size: clamp(48px, 6vw, 96px); font-weight: 300; line-height: 1.04; letter-spacing: -.035em; margin: 22px 0 32px; }
.project-intro .project-facts { margin-bottom: 0; }
.project-description { max-width: 52ch; font-size: 18px; line-height: 1.65; color: var(--muted); margin: 28px 0 0; }
.project-page .project-film { margin: 0 4%; }
.film-launch { display: block; position: relative; width: 100%; aspect-ratio: 16/9; background: var(--panel); overflow: hidden; }
.film-launch>img { display: block; width: 100%; height: 100%; object-fit: contain; }
.film-launch-label { position: absolute; left: 4%; bottom: 6%; display: flex; align-items: center; gap: 16px; padding: 12px 20px 12px 12px; background: #0a0a0be6; font-size: 12px; font-family: var(--display); letter-spacing: .1em; text-transform: uppercase; }
.source-link { margin-top: 12px; color: var(--muted); }
.project-context { padding: 0 8% 64px; }
.project-context>.project-description { margin: 36px 0; }
.project-credits { display: grid; grid-template-columns: 1fr 2fr; gap: 32px; border-top: 1px solid var(--line); margin-top: 32px; padding-top: 28px; }
.project-credits h2 { font-size: 24px; font-weight: 400; margin: 0; letter-spacing: -.02em; }
.project-credits dl { margin: 0; display: flex; flex-wrap: wrap; gap: 24px 48px; }
.image-note { color: var(--muted); font-size: 15px; line-height: 1.65; margin-top: 32px; max-width: 64ch; }
.image-note summary { min-height: 44px; cursor: pointer; display: list-item; padding: 10px 0; color: var(--paper); }
.image-note summary:focus-visible { outline: 2px solid var(--titanium); outline-offset: 5px; }
.collection-grid { margin: 0 6%; display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 36px 24px; align-items: start; }
.collection-photo { display: block; min-width: 0; }
.collection-photo .still-image { aspect-ratio: auto; background: transparent; }
.collection-photo .still-image img { width: 100%; height: auto; object-fit: contain; }
.collection-photo:first-child { grid-column: 1/-1; }
.collection-photo:first-child img { max-height: 78svh; width: 100%; object-fit: contain; }
.collection-photo:has(img[width="2048"][height="618"]) { grid-column: 1/-1; }
.next-work { background: var(--panel); padding: 48px 8% 56px; }
.next-work>.eyebrow { color: var(--titanium); }
.next-work>a:not(.back-to-work) { display: flex; align-items: start; justify-content: space-between; gap: 30px; margin: 22px 0; font-family: var(--display); font-size: clamp(32px, 4vw, 64px); font-weight: 400; line-height: 1.1; letter-spacing: -.025em; }
.next-work .back-to-work { color: var(--muted); }
/* Visible controls and quiet, stable photo stage, including a panoramic original. */
.journey .project-dialog .gallery-stage>img { height: min(62svh, 720px); aspect-ratio: auto; min-height: 160px; max-height: none; object-fit: contain; }
.gallery-thumbnail:focus-visible { outline: 2px solid var(--paper); outline-offset: -4px; opacity: 1; }
.gallery-thumbnails { padding-top: 8px; padding-bottom: 20px; }
.journey .project-dialog .gallery-arrow { top: auto; bottom: 12px; transform: none; }
.gallery-original { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 12px 24px; padding: 0 25px 18px; font-size: 12px; color: var(--muted); }
.gallery-original a { text-decoration: underline; text-underline-offset: 5px; min-height: 44px; display: inline-flex; align-items: center; }
.media-error { padding: 20px; color: var(--paper); background: var(--panel); line-height: 1.6; }
.media-error a { text-decoration: underline; }
.project-dialog .dialog-close { position: sticky; float: right; top: 8px; margin: 8px 8px -52px 0; }
.modal-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 18px 28px; }
.modal-meta a { min-height: 44px; }
@media (max-width: 900px) {
 .journey-header { min-height: var(--mobile-header); }
 .opening { min-height: 0; }
 .film-story { height: auto; min-height: 0; }
 .hero-index-link { margin-top: 4px; }
 .project-detail-link { margin-top: 4px; }
 .scene-copy .scene-next { margin-top: 16px; }
 .scene-copy .project-facts { gap: 12px 24px; margin-bottom: 18px; }
 .project-intro { padding: 112px 6% 32px; }
 .project-intro>.back-to-work { margin-bottom: 24px; }
 .project-context { padding-left: 6%; padding-right: 6%; }
 .work-index { padding-left: 6%; padding-right: 6%; }
 .work-list a { gap: 14px; grid-template-columns: 26px minmax(0,1.5fr) minmax(130px,.8fr) 20px; }
 .collection-grid { gap: 28px 18px; }
}
@media (max-width: 600px) {
 .journey-header { gap: 12px; }
 .journey-header nav { gap: clamp(12px, 3.5vw, 18px); font-size: 11px; letter-spacing: .07em; }
 .identity { font-size: 11px; letter-spacing: .08em; }
 .opening-intro>.eyebrow { font-size: 10px; letter-spacing: .08em; }
 .opening-intro p { font-size: 16px; }
 .opening-foot { gap: 16px; }
 .project-detail-link { margin-top: 2px; }
 .scene-copy h2 { margin: 18px 0; }
 .scene-copy .project-facts dd { font-size: 14px; }
 .scene-copy .project-facts dt { font-size: 10px; }
 .index-heading { display: block; margin-bottom: 28px; }
 .index-heading h2 { margin: 20px 0 16px; }
 .work-list a { grid-template-columns: 22px minmax(0,1fr) 18px; gap: 8px 14px; padding: 20px 0; }
 .work-number { grid-row: 1/3; align-self: start; padding-top: 3px; }
 .work-title { font-size: 22px; }
 .work-discipline { grid-column: 2; font-size: 10px; }
 .work-open { grid-column: 3; grid-row: 1/3; font-size: 22px; }
 .closing-note { padding-top: 48px; padding-bottom: 48px; }
 .contact h2 { font-size: 48px; margin: 32px 0 24px; }
 .contact-bottom { display: flex; flex-direction: column; align-items: stretch; gap: 20px; }
 .contact-button { margin-top: 0; }
 .contact-status { font-size: 15px; }
 .site-footer nav { flex-basis: 100%; gap: 6px 22px; }
 .site-footer { gap: 16px; }
 .site-footer .back-top { width: auto; margin-left: auto; }
 .project-intro h1 { font-size: clamp(40px,11vw,60px); max-width: 18ch; }
 .project-intro .project-facts { gap: 18px 32px; }
 .project-description { font-size: 16px; }
 .project-page .project-film { margin-inline: 0; }
 .project-page .source-link { margin-left: 6%; }
 .film-launch-label { left: 4%; bottom: 7%; gap: 10px; padding: 8px 12px 8px 8px; font-size: 10px; }
 .film-launch-label .play-disc { width: 32px; height: 32px; }
 .collection-grid { grid-template-columns: minmax(0,1fr); margin: 0 6%; gap: 28px; }
 .collection-photo:first-child img { max-height: none; }
 .project-credits { grid-template-columns: 1fr; gap: 20px; }
 .project-context { padding-bottom: 40px; }
 .next-work { padding: 40px 6%; }
 .journey .project-dialog .gallery-stage>img { height: 54svh; min-height: 160px; }
 .gallery-original { padding-inline: 16px; }
 .journey .gallery-stage>img { aspect-ratio: auto; }
}
@media (max-width: 1000px) and (max-height: 600px) and (orientation: landscape) {
 .opening { min-height: 100svh; }
 .film-story { min-height: 100svh; }
 .journey .project-dialog .gallery-stage>img { height: calc(100svh - 100px); }
}
@media (prefers-reduced-motion: reduce) {
 html { scroll-behavior: auto; }
 .opening-intro, .opening-foot { animation: none; }
}

.film-loading-poster { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; }
.film-player:not(.player-ready) iframe { opacity: 0; pointer-events: none; }
.film-player.player-ready .film-loading-poster { display: none; }
#film-status { max-width: 44ch; }
@media(max-width:360px) { .journey .film-player { min-height: 200px; } }
@media (min-width: 901px) {
 .opening, .no-motion .opening { display: flex; flex-direction: column; justify-content: space-between; gap: 40px; height: auto; min-height: 100svh; padding: clamp(120px, 17svh, 180px) 8% 40px; }
 .opening-intro, .opening-foot { position: relative; inset: auto; width: 100%; }
 .opening-foot>div:first-child { display: grid; grid-template-columns: auto auto; column-gap: 28px; align-items: center; }
 .opening-foot>div:first-child>.eyebrow, .opening-foot h2 { grid-column: 1/-1; }
 .opening-foot .project-detail-link { margin-top: 0; }
}
/* Text is available immediately; the shared media plane carries the motion. */
.opening-intro, .opening-foot { animation: none; }
/* Silent native preview: reveal only after its first presented frame. */
.opening-video video { display: block; width: 100%; height: 100%; object-fit: cover; pointer-events: none; }
.opening-video video::-webkit-media-controls { display: none !important; }
.opening-video video::-webkit-media-controls-start-playback-button { display: none !important; }
.opening-video.is-playing+.opening-poster { transition-duration: .15s; }
.no-motion .opening { background-image: linear-gradient(0deg,#0a0a0be8,#0a0a0b55),url('/assets/films/brandon-kim-poster.jpg'); }