:root { color-scheme: dark; font-family: Arial, Helvetica, sans-serif; background: #101213; color: #efefed; }
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; min-width: 320px; }
button, a { -webkit-tap-highlight-color: transparent; }
a { color: inherit; text-decoration: none; }
button { font: inherit; }
.skip { position: absolute; z-index: 10; top: -5rem; left: 1rem; padding: .7rem 1rem; background: #fff; color: #111; }
.skip:focus { top: 1rem; }
.site-header { display: flex; align-items: start; justify-content: space-between; gap: 1.5rem; padding: 2.15rem max(3vw, 1.25rem) 2.2rem; border-bottom: 1px solid #45484a; }
.identity { display: flex; flex-direction: column; gap: .42rem; }
.name { font-size: clamp(1.05rem, 1.45vw, 1.45rem); font-weight: 600; letter-spacing: -.025em; }
.profession { color: #aeb0af; font-size: .88rem; }
.header-right { display: flex; gap: clamp(2rem, 7vw, 9rem); align-items: center; font-size: .88rem; }
.section-label { letter-spacing: .025em; }
.language { display: flex; align-items: center; gap: .36rem; color: #777d7d; }
.language button { padding: .25rem; border: 0; color: #777d7d; background: none; cursor: pointer; }
.language button[aria-pressed="true"] { color: #f4f4f1; }
.language button:focus-visible, .name:focus-visible { outline: 2px solid #fff; outline-offset: 5px; }
.project-intro { padding: clamp(3.7rem, 8vw, 9rem) max(3vw, 1.25rem) clamp(3rem, 6vw, 6rem); }
.eyebrow { display: flex; align-items: center; gap: .9rem; margin: 0 0 clamp(2rem, 4vw, 4rem); text-transform: uppercase; letter-spacing: .16em; font-size: .72rem; color: #b2b5b3; }
.eyebrow-rule { display: inline-block; width: 1.8rem; height: 1px; background: #b2b5b3; }
.title-row { display: flex; justify-content: space-between; align-items: end; gap: 1rem; }
h1 { margin: 0; font-size: clamp(3.5rem, 9vw, 10rem); line-height: .89; font-weight: 500; letter-spacing: -.075em; max-width: 11ch; }
h2 { margin: 0; font-size: clamp(3.5rem, 9vw, 10rem); line-height: .89; font-weight: 500; letter-spacing: -.075em; max-width: 12ch; }
.project + .project { border-top: 1px solid #45484a; }
.credits { display: flex; flex-wrap: wrap; column-gap: clamp(2.5rem, 8vw, 9rem); row-gap: 1rem; margin-top: clamp(3.3rem, 6vw, 7rem); }
.credits p { display: flex; flex-direction: column; gap: .45rem; margin: 0; font-size: .98rem; }
.credit-label { color: #939896; font-size: .76rem; text-transform: uppercase; letter-spacing: .13em; }
.frames { display: grid; gap: clamp(4rem, 9vw, 10rem); padding-bottom: clamp(5rem, 11vw, 11rem); }
.frame { margin: 0; }
.frame img { display: block; width: 100%; height: auto; aspect-ratio: 2/1; object-fit: cover; background: #242829; }
.frame figcaption { margin: 1rem max(3vw, 1.25rem) 0; color: #9da2a1; font-size: .75rem; letter-spacing: .06em; font-variant-numeric: tabular-nums; }
.frame figcaption span { color: #5a6060; padding: 0 .2rem; }
footer { display: flex; justify-content: space-between; gap: 1rem; padding: 2rem max(3vw, 1.25rem) 3rem; border-top: 1px solid #45484a; color: #aeb0af; font-size: .8rem; }
@media (max-width: 700px) {
  .site-header { padding-top: 1.4rem; }
  .header-right { gap: .7rem; align-items: end; flex-direction: column-reverse; }
  .project-intro { padding-top: 4.2rem; }
  h1, h2 { font-size: clamp(3.4rem, 14vw, 6rem); }
  .credits { display: grid; gap: 1.45rem; }
  .frames { gap: 4.6rem; }
  footer { flex-direction: column; }
}
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

.section-label:hover, .category-list a:hover { color: #fff; text-decoration: underline; text-underline-offset: .3em; }
.home-page { overflow-x: hidden; }
.home-page .site-header { border-bottom-color: #35393a; }
.home-intro { display: flex; justify-content: space-between; align-items: end; gap: 3rem; padding: clamp(4rem, 9vw, 9rem) max(3vw, 1.25rem) clamp(3.5rem, 7vw, 7rem); }
.home-intro .eyebrow { margin-bottom: clamp(2rem, 4vw, 4rem); }
.home-intro h1 { max-width: 11ch; font-size: clamp(3.8rem, 9vw, 10rem); }
.home-aside { max-width: 21rem; margin: 0 1vw .2rem 0; line-height: 1.55; color: #aeb0af; font-size: clamp(.9rem, 1.2vw, 1.1rem); }
.poster-section { border-top: 1px solid #45484a; padding: 2rem 0 clamp(5rem, 10vw, 10rem); }
.rail-heading { display: flex; justify-content: space-between; align-items: end; gap: 1rem; margin: 0 max(3vw, 1.25rem) 1.7rem; }
.rail-heading h2 { max-width: none; font-size: 1rem; letter-spacing: .01em; font-weight: 500; line-height: 1.25; }
.rail-heading p { margin: .4rem 0 0; color: #959a99; font-size: .8rem; }
.rail-controls { display: flex; gap: .45rem; }
.rail-controls button { display: grid; place-items: center; width: 2.75rem; height: 2.75rem; border: 1px solid #5b6061; border-radius: 50%; background: transparent; color: #efefed; cursor: pointer; font-size: 1.2rem; }
.rail-controls button:hover { background: #efefed; color: #101213; }
.rail-controls button:focus-visible, .poster-rail:focus-visible, .poster-link:focus-visible, .category-list a:focus-visible { outline: 2px solid #fff; outline-offset: 4px; }
.poster-rail { display: flex; gap: clamp(.75rem, 1.5vw, 1.5rem); overflow-x: auto; overscroll-behavior-inline: contain; scroll-snap-type: x mandatory; scrollbar-width: thin; scrollbar-color: #858b8a transparent; padding: 0 max(3vw, 1.25rem) 2rem; margin: 0; list-style: none; cursor: grab; }
.poster-rail.is-dragging { cursor: grabbing; scroll-snap-type: none; user-select: none; }
.poster-card { flex: 0 0 clamp(220px, 25vw, 390px); min-width: 0; scroll-snap-align: start; }
.poster-link { display: block; position: relative; }
.poster-link img { display: block; width: 100%; aspect-ratio: 7 / 10; height: auto; object-fit: contain; background: #202425; pointer-events: none; }
.poster-link:not(.poster-pending):hover img { filter: brightness(.83); }
.poster-meta { display: flex; justify-content: space-between; gap: 1rem; color: #949a99; font-size: .72rem; letter-spacing: .04em; margin-top: 1rem; }
.poster-title { display: block; margin-top: .45rem; max-width: calc(100% - 2rem); font-size: clamp(1rem, 1.3vw, 1.3rem); letter-spacing: -.025em; }
.poster-arrow { position: absolute; right: 0; bottom: 0; font-size: 1.15rem; }
.poster-status { display: block; margin-top: .65rem; color: #858a89; font-size: .72rem; }
.poster-pending { cursor: default; }
.categories { display: flex; justify-content: space-between; gap: 2rem; padding: 2rem max(3vw, 1.25rem) 4rem; border-top: 1px solid #45484a; }
.categories-label { color: #aeb0af; font-size: .8rem; }
.category-list { display: flex; flex-wrap: wrap; gap: clamp(1.2rem, 4vw, 5rem); font-size: clamp(1.25rem, 2vw, 2rem); }
.category-list span { color: #767d7d; }
@media (max-width: 700px) {
  .home-intro { display: block; padding-bottom: 4rem; }
  .home-intro h1 { font-size: clamp(3.8rem, 14vw, 6rem); }
  .home-aside { margin-top: 2.5rem; }
  .poster-card { flex-basis: min(71vw, 340px); }
  .categories { flex-direction: column; }
  .category-list { flex-direction: column; gap: 1.2rem; }
}

.fiction-page { background: #171510; }
.fiction-page .frame img { background: #28231d; }
.fiction-page .eyebrow-rule { background: #c3a889; }

.commercial-page { background: #121a19; }
.commercial-page .frame img { background: #202b29; }
.commercial-page .eyebrow-rule { background: #9db8b0; }
.single-frame { padding-bottom: clamp(5rem, 10vw, 10rem); }

.home-page .poster-section { border-top: 0; padding-top: clamp(2rem, 3vw, 3rem); }

.contact-mail { color: #efefed; }
.contact-mail:hover { text-decoration: underline; text-underline-offset: .25em; }
.contact-mail:focus-visible { outline: 2px solid #fff; outline-offset: 5px; }