@font-face {
  font-family: Newsreader;
  src: url('/assets/newsreader-roman.woff2') format('woff2');
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
}
@font-face {
  font-family: Newsreader;
  src: url('/assets/newsreader-italic.woff2') format('woff2');
  font-style: italic;
  font-weight: 400 700;
  font-display: swap;
}
:root {
  color-scheme: dark;
  --ink: #14212b;
  --navy: #121d29;
  --stone: #e9e5db;
  --light: #f0ebe1;
  --muted: #bfc7c5;
  --bronze: #b99b77;
  font-family: Arial, Helvetica, sans-serif;
  font-synthesis: none;
  scroll-behavior: smooth;
}
* { box-sizing: border-box; }
html { scroll-padding-top: 2rem; }
body { margin: 0; background: var(--navy); color: var(--light); }
a { color: inherit; text-decoration: none; }
img, video { display: block; max-width: 100%; }
a, button { -webkit-tap-highlight-color: transparent; }
a:focus-visible, button:focus-visible { outline: 2px solid var(--bronze); outline-offset: 5px; }
.skip-link { position: absolute; z-index: 30; top: -100px; left: 1rem; background: var(--stone); color: var(--ink); padding: 1rem; }
.skip-link:focus { top: 1rem; }

.site-header { position: absolute; z-index: 10; top: 0; left: 0; width: 100%; display: flex; justify-content: space-between; align-items: flex-start; padding: clamp(1.2rem,3vw,3rem) clamp(1.3rem,5vw,5rem); color: #f4ebda; text-shadow: 0 1px 12px #0008; }
.brand { display: flex; align-items: center; gap: 1rem; }
.brand-mark { font: 400 1.15rem Georgia, 'Times New Roman', serif; letter-spacing: -.07em; white-space: nowrap; }
.brand-mark span { color: #d3bb92; padding: 0 .16em; }
.brand-name { max-width: 10rem; font-size: .68rem; line-height: 1.35; letter-spacing: .07em; font-weight: 500; border-left: 1px solid #e7d9c688; padding-left: 1rem; }
.header-link { font-size: .78rem; letter-spacing: .05em; border-bottom: 1px solid #e5d5bf99; padding: .25rem 0 .6rem; }
.header-link span { margin-left: 1.5rem; font-size: 1rem; }

.ident { height: 100svh; min-height: 520px; position: relative; background: #06090d; overflow: hidden; }
.film-frame { position: absolute; inset: 0; background: var(--film-poster) center/cover no-repeat; }
.film-frame:after { content: ''; position: absolute; inset: 0; background: linear-gradient(180deg,rgba(4,9,14,.43),transparent 25%,transparent 72%,rgba(4,9,14,.42)); pointer-events: none; }
.film-frame video { width: 100%; height: 100%; object-fit: cover; object-position: center; }
.film-frame video[hidden] { display: none !important; }
.ident-bottom { position: absolute; bottom: 0; left: 0; right: 0; display: flex; justify-content: space-between; align-items: end; gap: 1rem; padding: 2.2rem clamp(1.3rem,5vw,5rem); font-size: .75rem; letter-spacing: .06em; text-shadow: 0 1px 10px #000; }
.film-controls, .film-choices { display: flex; align-items: center; flex-wrap: wrap; gap: .85rem; }
.film-controls { gap: .85rem 1.3rem; }
.film-control-label { color: #dfd2be; }
.film-control-rule { width: 1px; height: 1rem; background: #dfd2be99; }
.film-controls button { font: inherit; letter-spacing: inherit; color: inherit; background: none; border: 0; padding: .15rem 0 .35rem; cursor: pointer; text-shadow: inherit; }
.film-choices button { color: #d6d0c4; border-bottom: 1px solid transparent; }
.film-choices button[aria-pressed="true"] { color: #fff8eb; border-bottom-color: #d8b98d; }
#play-film, #loop-toggle, #sound-toggle { border-bottom: 1px solid #ead8bd77; }
.scroll-link { border-bottom: 1px solid #ead8bd99; padding: .15rem 0 .35rem; white-space: nowrap; }
.scroll-link span { margin-left: 1rem; font-size: 1rem; }

.page-pad { padding: clamp(5rem,8vw,8rem) clamp(1.5rem,7vw,8rem); }
.page-index { display: flex; gap: 1rem; align-items: baseline; padding-bottom: 1.2rem; border-bottom: 1px solid #ede2cf35; font-size: .78rem; letter-spacing: .035em; color: #bfc5c1; }
.page-index span:first-child { min-width: 2.2rem; color: var(--bronze); }
h1, h2, h3, p, figure { margin-top: 0; }

.studio-page { position: relative; isolation: isolate; min-height: 82svh; background: var(--navy); overflow: hidden; }
.studio-page::before { content: ''; position: absolute; z-index: -1; inset: 0 0 0 37%; background: var(--studio-scene) center/cover no-repeat; opacity: .42; mask-image: linear-gradient(90deg, transparent, #000 38%), linear-gradient(0deg, transparent, #000 34%, #000 75%, transparent); mask-composite: intersect; }
.studio-page .page-index { position: relative; }
.studio-grid { position: relative; display: grid; grid-template-columns: minmax(0, .85fr) minmax(0, 1fr); gap: clamp(3rem,8vw,9rem); align-items: start; max-width: 1300px; margin: clamp(6rem,10vw,10rem) auto 0; }
.studio-grid h1 { font: 400 clamp(2.6rem,3.65vw,4.1rem)/1.13 Georgia, 'Times New Roman', serif; letter-spacing: -.025em; max-width: 13ch; margin: 0; }
.studio-prose { max-width: 34rem; padding: .25rem 0 1.5rem; text-shadow: 0 1px 18px #07121cd9; }
.studio-prose p { font: 400 clamp(1.18rem,1.4vw,1.33rem)/1.62 Newsreader, Georgia, serif; color: #d4d9d4; margin-bottom: 2rem; }
.studio-prose p:first-child { color: #efede6; }
.studio-prose strong { font-weight: 600; color: #fffaf0; }

.path-transition { height: clamp(9rem, 18vw, 17rem); position: relative; background: var(--stone); overflow: hidden; }
.path-transition::before { content: ''; position: absolute; inset: -2px 0; background: var(--path-scene) center/cover no-repeat; opacity: .52; mask-image: linear-gradient(to bottom, transparent, #000 25%, #000 48%, transparent 100%); }

.collective-page { background: var(--stone); color: var(--ink); padding-bottom: clamp(5rem,8vw,8rem); }
.collective-page .page-index { border-color: #16263132; color: #5e6c70; }
.collective-page .page-index span:first-child { color: #826f59; }
.identity-stage { position: relative; isolation: isolate; max-width: 1300px; min-height: 42rem; margin: clamp(4rem,6vw,6rem) auto 0; }
.identity-copy { position: relative; z-index: 1; max-width: 37rem; }
.identity-copy h2 { font: 400 clamp(2.8rem,4vw,4.5rem)/1.1 Georgia, 'Times New Roman', serif; letter-spacing: -.02em; margin: 0 0 3rem; }
.identity-copy p { font: 400 clamp(1.18rem,1.4vw,1.34rem)/1.58 Newsreader, Georgia, serif; margin-bottom: 1.8rem; }
.identity-copy strong { font-weight: 600; color: #1e303c; }
.identity-copy .material-term { font-weight: 500; }
.identity-copy .material-term em { font-style: italic; }
.bust-atmosphere { position: absolute; z-index: 0; width: min(74%, 860px); max-width: none; height: auto; top: 1.5rem; right: -3.5rem; opacity: .25; mask-image: linear-gradient(90deg, transparent 0%, #000 36%), linear-gradient(to bottom, #000 55%, transparent 100%); mask-composite: intersect; pointer-events: none; }

.works-inline { display: grid; grid-template-columns: minmax(0,.75fr) minmax(0,1fr); gap: clamp(3rem,8vw,9rem); max-width: 1300px; border-top: 1px solid #16263132; padding-top: 2.25rem; margin: clamp(6rem,10vw,10rem) auto 0; }
.small-label { font-size: .78rem; color: #596669; }
.works-content h3, .works-list-title { font: 400 clamp(1.8rem,2.4vw,2.6rem)/1.2 Georgia, 'Times New Roman', serif; margin: 0 0 .5rem; }
.works-content p { font-size: 1rem; line-height: 1.6; color: #536066; margin: 0; }
.works-list { display: grid; gap: 3rem; }
.work-entry { display: grid; grid-template-columns: minmax(0,1fr) minmax(0,1fr); gap: 2rem; align-items: center; padding: 2rem 0; border-top: 1px solid #16263132; }
.work-media img, .work-media video { width: 100%; max-height: 420px; object-fit: cover; }
.work-detail h3 { font: 400 clamp(1.7rem,2.4vw,2.5rem)/1.2 Georgia, 'Times New Roman', serif; margin-bottom: 1rem; }
.work-detail p { font-size: 1rem; line-height: 1.6; }
.work-detail a { display: inline-block; font-size: .8rem; padding-bottom: .4rem; border-bottom: 1px solid #697273; margin-top: .7rem; }

.footer { background: var(--stone); color: var(--ink); padding: 0 clamp(1.5rem,7vw,8rem) 2.5rem; }
.footer-wordmark { font: 400 1.05rem/1.3 Georgia, 'Times New Roman', serif; letter-spacing: 0; border-top: 1px solid #16263132; padding-top: 1.7rem; margin-bottom: 1.3rem; }
.footer-bottom { display: flex; justify-content: space-between; flex-wrap: wrap; gap: 1rem 2.5rem; font-size: .78rem; line-height: 1.6; color: #566369; }
.footer-future, .footer-links { display: flex; gap: 1rem 2.5rem; flex-wrap: wrap; }
.footer-bottom a { color: var(--ink); }
.footer-bottom > a { white-space: nowrap; }

@media (max-width: 800px) {
  .studio-page { min-height: 0; }
  .studio-page::before { inset: 0; opacity: .25; mask-image: linear-gradient(180deg, #000, transparent 80%); }
  .studio-grid, .works-inline { grid-template-columns: 1fr; gap: 3rem; }
  .studio-grid { margin-top: 5rem; }
  .studio-grid h1 { max-width: 18ch; }
  .identity-stage { min-height: 0; }
  .identity-copy { max-width: 100%; }
  .bust-atmosphere { position: relative; width: min(100%, 650px); top: auto; right: auto; opacity: .5; mask-image: linear-gradient(to bottom, #000 55%, transparent); margin: 0 auto; }
  .works-inline { gap: 1.3rem; margin-top: 5rem; }
}
@media (max-width: 600px) {
  .site-header { padding: 1.35rem 1.4rem; }
  .brand { gap: .75rem; }
  .brand-name { font-size: .65rem; padding-left: .75rem; max-width: 7rem; }
  .header-link { font-size: .7rem; }
  .header-link span { margin-left: .45rem; }
  .ident { min-height: 580px; }
  .film-frame video.end-card { object-fit: contain; transform: scale(1.75); background: #000; }
  .ident-bottom { padding: 1.4rem; flex-direction: column; align-items: stretch; gap: 1.5rem; }
  .film-controls { gap: .65rem 1rem; font-size: .7rem; }
  .film-control-label { width: 100%; }
  .film-control-rule { display: none; }
  .scroll-link { align-self: flex-end; font-size: .7rem; }
  .scroll-link span { margin-left: .3rem; }
  .page-pad { padding: 5rem 1.5rem; }
  .studio-grid h1 { font-size: clamp(2.5rem,9vw,3.3rem); }
  .studio-prose p { font-size: 1.2rem; }
  .identity-copy h2 { font-size: 2.8rem; margin-bottom: 2rem; }
  .identity-copy p { font-size: 1.2rem; }
  .path-transition { height: 9rem; }
  .bust-atmosphere { opacity: .6; margin-top: 1rem; }
  .work-entry { grid-template-columns: 1fr; }
  .footer { padding: 0 1.5rem 2rem; }
  .footer-future { display: grid; gap: .2rem; }
}
@media (prefers-reduced-motion: reduce) {
  :root { scroll-behavior: auto; }
  .film-frame video:not(.manual-play) { display: none; }
}