:root{--paper:oklch(94% .038 85);--ink:oklch(20% .012 48);--wine:oklch(34% .105 28);--muted:oklch(45% .025 55);--accent:oklch(50% .16 35);--surface:var(--paper);--text:var(--ink);--line:oklch(25% .015 50 / .22);--font-body:"DM Sans",sans-serif;--font-display:"Barlow Condensed",Impact,sans-serif;--text-xs:.75rem;--text-sm:.875rem;--text-base:clamp(1rem,.95rem + .2vw,1.125rem);--text-lg:clamp(1.35rem,1rem + .65vw,1.75rem);--text-title:clamp(3rem,2rem + 3.3vw,5.5rem);--text-hero:clamp(5rem,1rem + 7.6vw,8rem);--s1:.25rem;--s2:.5rem;--s3:.75rem;--s4:1rem;--s6:1.5rem;--s8:2rem;--s12:3rem;--s16:4rem;--s24:6rem;--s32:8rem;--gutter:clamp(1.5rem,5vw,5rem)}
html[data-theme="dark"]{--surface:oklch(20% .012 48);--text:var(--paper);--muted:oklch(76% .025 65);--line:oklch(90% .038 85 / .23);--accent:oklch(75% .13 55)}
body{background:var(--surface);color:var(--text);font-family:var(--font-body);font-size:var(--text-base);line-height:1.65}
.site-header{position:absolute;z-index:5;top:0;left:0;width:100%;display:flex;justify-content:space-between;align-items:center;padding:var(--s6) var(--gutter);color:var(--paper)}
.studio{display:flex;align-items:center;gap:var(--s3);text-decoration:none;font-size:var(--text-xs);font-weight:700;letter-spacing:.13em;line-height:1.25}
.studio>span>span{display:block;font-size:var(--text-xs);letter-spacing:.43em;margin-top:var(--s1)}
.studio-mark{width:52px;height:38px}
.header-actions{display:flex;gap:var(--s4);align-items:center}
.theme-toggle{width:44px;height:44px;border:1px solid #f7eace65;border-radius:50%;background:none;font-size:var(--text-lg)}
.menu-toggle{background:none;border:0;display:flex;align-items:center;gap:var(--s4);min-height:44px;font-size:var(--text-xs);letter-spacing:.15em;font-weight:700}
.menu-lines{width:28px;height:10px;border-top:2px solid currentColor;border-bottom:2px solid currentColor}
.hero{position:relative;min-height:760px;height:calc(100svh - 88px);max-height:1100px;background:#7c2218 url("./key-art.webp") center center/cover no-repeat;color:var(--paper);display:flex;align-items:center;justify-content:flex-end;isolation:isolate}
.hero-content{width:53%;padding:var(--s24) var(--gutter) var(--s24) var(--s8);text-align:center}
.eyebrow{font-size:var(--text-xs);font-weight:600;letter-spacing:.25em;margin-bottom:var(--s6)}
h1{font-family:var(--font-display);font-size:var(--text-hero);font-weight:800;line-height:.88;letter-spacing:-.025em;text-transform:uppercase}
h1 span{display:block}
.hero-description{font-size:var(--text-sm);line-height:1.5;margin:var(--s8) 0 var(--s6);color:var(--ink)}
.hero-tagline{display:block;font-size:clamp(1.125rem,.9rem + .6vw,1.5rem);font-weight:700;line-height:1.2;letter-spacing:-.025em;text-wrap:balance}
.hero-actions{display:flex;justify-content:center;gap:var(--s3);flex-wrap:wrap;margin-top:var(--s8)}
.pill{display:inline-flex;align-items:center;justify-content:center;gap:var(--s3);min-height:48px;padding:var(--s3) var(--s6);border-radius:50px;text-decoration:none;font-size:var(--text-xs);letter-spacing:.04em;font-weight:700;line-height:1.4;border:1px solid transparent;transition:background .2s,color .2s,transform .2s}
.primary{background:var(--paper);color:var(--ink)}
.primary:hover{background:#fff8e8;transform:translateY(-2px)}
.secondary{border-color:var(--ink);color:var(--ink);background:#f3e5c518}
.secondary:hover{background:#f3e5c560}
.play{width:0;height:0;border-top:5px solid transparent;border-bottom:5px solid transparent;border-left:8px solid currentColor}
.hero-bottom{position:absolute;bottom:var(--s6);left:var(--gutter);right:var(--gutter);display:flex;justify-content:space-between;gap:var(--s6);font-size:var(--text-xs);font-weight:600;letter-spacing:.08em;color:var(--ink)}
.hero-bottom>a{text-decoration:none;display:flex;gap:var(--s6);align-items:center;color:var(--ink);text-shadow:none}
.hero-bottom>a span{font-size:var(--text-lg)}
.credit-strip{display:flex;justify-content:center;gap:clamp(2rem,7vw,8rem);padding:var(--s6) var(--gutter);background:var(--ink);color:var(--paper);text-align:center}
.credit-strip p{font-size:var(--text-sm);font-weight:600;line-height:1.3}
.credit-strip span{display:block;font-size:var(--text-xs);font-weight:400;color:#ccbea8;letter-spacing:.1em;margin-bottom:var(--s2)}
.section{padding:var(--s24) var(--gutter)}
.section-label{display:flex;justify-content:space-between;gap:var(--s6);border-top:1px solid var(--line);padding-top:var(--s4);font-size:var(--text-xs);font-weight:600;letter-spacing:.09em}
.synopsis-grid{display:grid;grid-template-columns:1fr 1.12fr;gap:var(--s24);padding-top:var(--s16);padding-bottom:var(--s6)}
h2{font-family:var(--font-display);font-size:var(--text-title);font-weight:700;line-height:.98;letter-spacing:-.02em}
.synopsis-grid h2>span{color:var(--accent)}
.synopsis-copy{max-width:65ch}
.synopsis-copy p{margin-bottom:var(--s6);color:var(--muted)}
.synopsis-copy .lead{font-size:var(--text-lg);font-weight:500;line-height:1.5;color:var(--text)}
details{margin-top:var(--s8)}
summary{display:flex;align-items:center;justify-content:space-between;gap:var(--s4);padding:var(--s4) 0;border-top:1px solid var(--line);border-bottom:1px solid var(--line);cursor:pointer;font-size:var(--text-xs);font-weight:700;letter-spacing:.07em;list-style:none}
summary::-webkit-details-marker{display:none}
summary>span{font-size:var(--text-lg)}
details[open] summary>span{transform:rotate(45deg)}
details>div{padding-top:var(--s6)}
.trailer-section{background:var(--ink);color:var(--paper);padding:var(--s12) var(--gutter) var(--s16)}
.trailer-heading{display:flex;align-items:center;justify-content:space-between;margin-bottom:var(--s8)}
.trailer-heading h2{font-size:clamp(2rem,3vw,3rem)}
.trailer-heading>span{font-size:var(--text-xs);letter-spacing:.12em}
.trailer-art{position:relative;aspect-ratio:2.15;overflow:hidden}
.trailer-art>img{width:100%;height:100%;filter:brightness(.7);transition:filter .4s,transform .6s}
.trailer-art:hover>img{filter:brightness(.9);transform:scale(1.025)}
.trailer-play{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:var(--s4);background:none;border:0;letter-spacing:.15em;font-size:var(--text-xs);font-weight:700}
.large-play{border:1px solid #f4e7ca99;width:88px;height:88px;display:grid;place-items:center;border-radius:50%;font-size:var(--text-lg);padding-left:var(--s1);background:#20171340}
.trailer-caption{position:absolute;bottom:var(--s6);left:var(--s8);right:var(--s8);display:flex;justify-content:space-between;gap:var(--s6);font-size:var(--text-xs);letter-spacing:.08em;pointer-events:none}
.team{padding-bottom:var(--s24)}
.team-heading{display:flex;justify-content:space-between;align-items:end;gap:var(--s12);padding:var(--s12) 0}
.team-heading>p{color:var(--muted);max-width:32ch}
.team-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--s8)}
.team-grid img{width:100%;height:auto;aspect-ratio:1.12;filter:grayscale(1);background:var(--ink)}
.team-grid article:nth-child(2) img{object-position:50% 20%}
.team-grid article:nth-child(3) img{object-position:50% 30%}
.role{font-size:var(--text-xs);letter-spacing:.1em;color:var(--muted);margin-top:var(--s6);margin-bottom:var(--s2)}
.team-grid h3{font-size:var(--text-lg);font-weight:600;line-height:1.3}
.on-set{position:relative;height:560px;overflow:hidden;color:var(--paper)}
.on-set>img{width:100%;height:100%;filter:brightness(.55)}
.on-set-caption{position:absolute;left:var(--gutter);bottom:var(--s16)}
.on-set-caption>span{font-size:var(--text-xs);letter-spacing:.16em}
.on-set-caption>p{font-family:var(--font-display);font-size:var(--text-title);line-height:1;margin-top:var(--s6);font-weight:600}
.contact{background:var(--wine);color:var(--paper)}
.contact .section-label{border-color:#f4e7ca50}
.contact-grid{display:grid;grid-template-columns:1.3fr 1fr;gap:var(--s24);align-items:center;padding-top:var(--s16)}
.contact-grid>div>p{max-width:38ch}
.contact-button{background:var(--paper);color:var(--wine);margin-top:var(--s8)}
.contact-button:hover{background:#fff8e8;transform:translateY(-2px)}
.contact-note{font-size:var(--text-xs);margin-top:var(--s3);opacity:.8}
footer{padding:var(--s16) var(--gutter) var(--s6);background:var(--ink);color:var(--paper);text-align:center}
.footer-title{font-family:var(--font-display);font-size:clamp(1.75rem,3.5vw,3.5rem);font-weight:700;line-height:1;text-decoration:none}
.billing{font-size:var(--text-xs);letter-spacing:.04em;line-height:1.8;color:#cabcaa;margin:var(--s8) auto var(--s12)}
.billing strong{color:var(--paper);font-weight:600}
.footer-bottom{display:flex;justify-content:space-between;align-items:center;gap:var(--s6);border-top:1px solid #f4e7ca25;padding-top:var(--s6);font-size:var(--text-xs);letter-spacing:.06em}
.footer-bottom>a{text-decoration:none;min-height:44px;display:flex;align-items:center}
dialog{padding:var(--s8);color:var(--paper);background:var(--ink);border:0;max-width:none;box-shadow:0 20px 100px #0006}
dialog::backdrop{background:#100c0be8}
.dialog-top{display:flex;justify-content:space-between;align-items:center;gap:var(--s8);font-size:var(--text-xs);letter-spacing:.08em;padding-bottom:var(--s8)}
.dialog-top button{background:none;border:0;min-height:44px;font-size:var(--text-xs);letter-spacing:.1em}
.dialog-top h2{font-family:var(--font-body);font-size:var(--text-sm);letter-spacing:.1em;font-weight:600}
#menu-dialog{width:min(640px,100%);height:100%;max-height:100%;margin:0 0 0 auto;background:var(--wine);padding:var(--s8) var(--s12)}
#menu-dialog nav{display:flex;flex-direction:column;margin-top:var(--s8)}
#menu-dialog nav a{font-family:var(--font-display);font-size:clamp(2rem,4vw,3.5rem);font-weight:600;text-decoration:none;line-height:1.3;padding:var(--s3) 0;border-bottom:1px solid #f4e7ca30;display:flex;align-items:center;gap:var(--s6)}
#menu-dialog nav small{font-family:var(--font-body);font-size:var(--text-xs);font-weight:400}
#menu-dialog nav a:hover{color:#e9b15e}
.menu-footer{margin-top:var(--s12);font-size:var(--text-xs);letter-spacing:.1em}
#trailer-dialog{width:min(1100px,94vw)}
#video-container{aspect-ratio:16/9;background:#000}
#video-container iframe{width:100%;height:100%;border:0}
.video-help{font-size:var(--text-sm);margin-top:var(--s6);color:#cabcaa}
.video-help a{color:var(--paper)}
@media(min-width:1800px){.hero-content{padding-right:10vw}.synopsis-grid,.team-grid,.contact-grid{max-width:1500px;margin-inline:auto}}
@media(max-width:900px){.hero{min-height:700px}.hero-content{width:57%;padding-left:var(--s4)}h1{font-size:clamp(4.5rem,9.5vw,6rem)}.hero-bottom>span{max-width:30ch}.synopsis-grid{gap:var(--s12)}.credit-strip{gap:var(--s8)}.credit-strip p{font-size:var(--text-xs)}.contact-grid{gap:var(--s12)}.team-grid{gap:var(--s4)}}
@media(max-width:650px){
  .site-header{padding:var(--s4) var(--s6)}.studio-mark{width:38px}.studio{gap:var(--s2);font-size:var(--text-xs)}.studio>span>span{letter-spacing:.26em}.header-actions{gap:var(--s2)}.menu-toggle{gap:var(--s2)}.menu-toggle>span:first-child{display:none}
  .hero{height:auto;min-height:850px;max-height:none;align-items:flex-start;background-position:30% center}
  .hero::before{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(180deg,#34100800 15%,#341008b8 40%,#341008bb)}
  .hero-content{width:100%;padding:320px var(--s6) 110px;text-align:center}
  .eyebrow{margin-bottom:var(--s4)}h1{font-size:clamp(4.7rem,18vw,6.75rem);line-height:.87;text-shadow:0 1px 8px #45190d20}
  .hero-description{margin:var(--s8) 0 var(--s6);color:var(--paper)}.hero-tagline{font-size:1.25rem;line-height:1.2}.tagline-ending{display:block}.hero-actions{margin-top:var(--s6);gap:var(--s3)}.pill{padding-inline:var(--s6)}.secondary{color:var(--paper);border-color:var(--paper);background:transparent}.hero-bottom>a{color:var(--paper)}
  .hero-bottom{justify-content:center;bottom:var(--s6)}.hero-bottom>span{display:none}
  .credit-strip{flex-wrap:wrap;gap:var(--s6) var(--s8);padding:var(--s8) var(--s6)}.credit-strip p:last-child{flex-basis:100%}
  .section{padding:var(--s16) var(--s6)}.section-label>span:last-child{display:none}
  .synopsis-grid{grid-template-columns:1fr;gap:var(--s8);padding-top:var(--s8)}h2{font-size:3.5rem}.synopsis-copy .lead{font-size:1.35rem}
  .trailer-section{padding:var(--s8) var(--s6) var(--s12)}.trailer-heading h2{font-size:2.5rem}.trailer-heading>span{max-width:12ch;text-align:right}.trailer-art{aspect-ratio:1.25}.trailer-caption{left:var(--s4);right:var(--s4);bottom:var(--s4);font-size:var(--text-xs)}.trailer-caption>span:last-child{display:none}
  .team-heading{display:block;padding:var(--s8) 0}.team-heading>p{margin-top:var(--s6)}.team-grid{grid-template-columns:1fr;gap:var(--s12)}.team-grid img{aspect-ratio:1.2}.team-grid h3{font-size:1.5rem}.role{margin-top:var(--s4)}
  .on-set{height:460px}.on-set-caption{left:var(--s6);bottom:var(--s12)}.on-set-caption>p{font-size:3.25rem}
  .contact-grid{grid-template-columns:1fr;gap:var(--s8);padding-top:var(--s8)}.contact-grid h2{font-size:3.25rem}
  footer{padding:var(--s12) var(--s6) var(--s6)}.footer-bottom{flex-direction:column;gap:var(--s3)}.footer-title{font-size:2rem}.billing{margin-bottom:var(--s8)}
  #menu-dialog{padding:var(--s6)}.dialog-top{gap:var(--s4)}.dialog-top>span{max-width:20ch}#menu-dialog nav a{font-size:2.7rem}
  #trailer-dialog{padding:var(--s4);width:96vw}.video-help{font-size:var(--text-xs)}
}
