: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 { min-height: 82svh; background: var(--navy); }
.studio-grid { display: grid; grid-template-columns: minmax(0, .75fr) 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: 37rem; padding-top: .25rem; }
.studio-prose p { font-size: clamp(1.08rem,1.3vw,1.25rem); line-height: 1.74; color: #d4d9d4; margin-bottom: 2rem; }
.studio-prose p:first-child { color: #efede6; }

.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; }
.collective-atmosphere { position: relative; max-width: 1300px; height: clamp(17rem, 27vw, 25rem); margin: clamp(3rem, 5vw, 5rem) auto 0; background-color: #16202a; background-size: cover; background-position: center 20%; }
.collective-atmosphere::after { content: ''; position: absolute; inset: 0; box-shadow: inset 0 0 0 1px #efe8d71c; background: linear-gradient(90deg, #0c151d25, transparent 55%, #0c151d25); }
.identity-grid { display: grid; grid-template-columns: minmax(0,1fr) minmax(220px,.48fr); gap: clamp(3rem,8vw,9rem); align-items: start; max-width: 1300px; margin: clamp(4rem,6vw,6rem) auto 0; }
.identity-copy { max-width: 43rem; }
.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.2rem,1.55vw,1.5rem)/1.63 Georgia, 'Times New Roman', serif; margin-bottom: 1.8rem; }
.emblem-panel { position: relative; isolation: isolate; width: min(100%,370px); aspect-ratio: 4 / 5; margin: .4rem 0 0 auto; overflow: hidden; background: #172633; box-shadow: 0 24px 48px #15212a24; }
.emblem-panel::before { content: ''; position: absolute; z-index: 1; inset: 0; background: radial-gradient(circle at 50% 38%, #c5a77332, transparent 62%); pointer-events: none; }
.craft-still { position: absolute; z-index: 0; bottom: 0; left: 0; width: 100%; height: 53%; object-fit: cover; object-position: center; opacity: .76; mask-image: linear-gradient(transparent, #000 38%); }
.emblem-image { position: relative; z-index: 2; width: 86%; height: auto; margin: 10% auto 0; filter: drop-shadow(0 14px 15px #0008); }
.emblem-panel figcaption { position: absolute; z-index: 3; bottom: 1rem; left: 1.25rem; right: 1.25rem; margin: 0; font-size: .72rem; letter-spacing: .03em; color: #f1e8d8; text-shadow: 0 1px 9px #000; }

.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.25rem/1.3 Georgia, 'Times New Roman', serif; letter-spacing: -.01em; 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-grid, .identity-grid, .works-inline { grid-template-columns: 1fr; gap: 3rem; }
  .studio-grid { margin-top: 5rem; }
  .studio-grid h1 { max-width: 18ch; }
  .identity-grid { margin-top: 5rem; }
  .collective-atmosphere { height: clamp(17rem, 48vw, 23rem); background-position: 55% 18%; }
  .emblem-panel { width: min(100%,290px); margin: 0; }
  .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.08rem; }
  .identity-copy h2 { font-size: 2.8rem; margin-bottom: 2rem; }
  .identity-copy p { font-size: 1.22rem; }
  .collective-atmosphere { height: 16rem; background-position: 53% 16%; }
  .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; }
}