/* Light Inside Cinema. One stylesheet for every page. Brand rules live in BRAND_SHEET.md. */
:root{
  --ink:#0E0F11; --navy:#0B1626; --navy2:#13223A; --cream:#F1EDE4; --silver:#C4C8CE;
  --gold:#E8B14B; --plate:#1B2A4A; --ash:#8E96A3; --line:rgba(196,200,206,.16);
  --title:"Archivo","Oswald","Arial Narrow",Impact,sans-serif;
  --serif:"Newsreader",Georgia,serif;
  --wrap:1180px;
  /* Fine, even film grain. High frequency noise so it reads like silver halide, not blotches. */
  --grain:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='256' height='256'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='1.45' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .92 0 0 0 0 .92 0 0 0 0 .94 0 0 0 1.1 -.42'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  box-sizing:border-box;
  padding-top:env(safe-area-inset-top,0px); padding-bottom:env(safe-area-inset-bottom,0px);
}
*,*::before,*::after{box-sizing:inherit}
html{scroll-behavior:smooth; scroll-padding-top:calc(72px + env(safe-area-inset-top,0px)); background:var(--ink)}
body{margin:0; overflow-x:clip; background:var(--ink); color:var(--cream); font-family:var(--serif); font-size:1.15rem; line-height:1.6; -webkit-font-smoothing:antialiased}
img{display:block; max-width:100%}
a{color:inherit}
:focus-visible{outline:2px solid var(--gold); outline-offset:3px}
.wrap{width:min(100% - 2.5rem, var(--wrap)); margin-inline:auto; position:relative; z-index:2}
p{margin:0 0 1em; max-width:58ch}

/* Poster titles: all caps, condensed, 5 words or fewer */
.t{font-family:var(--title); font-stretch:68%; font-weight:850; text-transform:uppercase; line-height:.88; letter-spacing:.005em; margin:0}
.t-xl{font-size:clamp(4rem,12.5vw,11rem)}
.t-l{font-size:clamp(3rem,8vw,7rem)}
.t-m{font-size:clamp(1.55rem,2.5vw,2.05rem); font-stretch:75%; line-height:1}
.gold{color:var(--gold)}
.kicker{font-family:var(--title); font-stretch:80%; font-weight:600; font-size:.95rem; text-transform:uppercase; letter-spacing:.32em; color:var(--silver); margin-bottom:1.4rem}
.lede{font-size:1.4rem; line-height:1.5; margin-top:2rem}
.muted{color:var(--silver)}

/* Film grain: the signature moment */
.grain{position:relative; isolation:isolate; overflow:hidden}
.grain::after{content:""; position:absolute; inset:-60px; z-index:1; pointer-events:none; background-image:var(--grain); background-size:256px; opacity:.07; mix-blend-mode:screen}
.grain.heavy::after{opacity:.09}
@media (prefers-reduced-motion:no-preference){ .grain::after{animation:dance 1s steps(6) infinite} }
@keyframes dance{0%{transform:translate(0,0)}20%{transform:translate(-18px,11px)}40%{transform:translate(13px,-20px)}60%{transform:translate(-9px,-7px)}80%{transform:translate(21px,15px)}100%{transform:translate(0,0)}}
.navy{background:radial-gradient(120% 90% at 20% 0%, var(--navy2), var(--navy) 60%)}

/* Nav */
.nav{position:sticky; top:0; z-index:30; background:rgba(14,15,17,.92); backdrop-filter:blur(8px); -webkit-backdrop-filter:blur(8px); border-bottom:1px solid var(--line)}
.nav .wrap{display:flex; align-items:center; justify-content:space-between; height:68px; gap:1rem}
.brand{display:flex; align-items:center; gap:.75rem; text-decoration:none; color:var(--cream)}
.brand svg{width:24px; height:auto; overflow:visible}
/* The logo is a working light: the filament breathes like a tungsten practical, with a small flicker */
.brand .halo{opacity:.45}
@media (prefers-reduced-motion:no-preference){
  .brand .halo{animation:halo 5s ease-in-out infinite}
  .brand .filament{animation:filament 5s ease-in-out infinite}
  .brand svg{animation:bloom 5s ease-in-out infinite}
}
@keyframes filament{0%,100%{opacity:.55}6%{opacity:1}8%{opacity:.6}10%{opacity:1}50%{opacity:.95}}
@keyframes halo{0%,100%{opacity:.1}6%{opacity:.85}8%{opacity:.3}10%{opacity:.9}50%{opacity:.7}}
@keyframes bloom{0%,100%{filter:drop-shadow(0 0 0 rgba(232,177,75,0))}10%,50%{filter:drop-shadow(0 0 5px rgba(232,177,75,.55))}}
.wordmark{font-family:var(--title); font-stretch:100%; font-weight:600; font-size:.78rem; letter-spacing:.32em; line-height:1.25}
.wordmark span{display:block; color:var(--gold); font-size:.6rem; letter-spacing:.5em}
.links{display:flex; gap:1.8rem; font-family:var(--title); font-stretch:80%; font-weight:600; font-size:.95rem; text-transform:uppercase; letter-spacing:.14em}
.links a{text-decoration:none; color:var(--silver); padding:.4rem 0}
.links a:hover,.links a[aria-current]{color:var(--cream)}
.links a[aria-current]{box-shadow:inset 0 -2px 0 var(--gold)}
.menu{display:none; background:none; border:1px solid var(--line); color:var(--cream); font-family:var(--title); font-stretch:80%; font-weight:700; text-transform:uppercase; letter-spacing:.14em; padding:.55rem .9rem; border-radius:2px; cursor:pointer}

/* Buttons and links */
.btn{display:inline-block; font-family:var(--title); font-stretch:80%; font-weight:700; font-size:1.05rem; text-transform:uppercase; letter-spacing:.14em; text-decoration:none; padding:1rem 1.7rem; background:var(--gold); color:var(--ink); border:0; border-radius:2px; cursor:pointer}
.btn:hover{background:#f2c46a}
.link{font-family:var(--title); font-stretch:80%; font-weight:700; text-transform:uppercase; letter-spacing:.14em; color:var(--gold); text-decoration:none; border-bottom:1.5px solid currentColor; padding-bottom:2px}
.ctas{display:flex; flex-wrap:wrap; align-items:center; gap:1.6rem; margin-top:2.2rem}

/* Poster hero */
.hero{min-height:calc(100svh - 68px); display:flex; flex-direction:column; justify-content:flex-end; background:var(--ink)}
.hero.short{min-height:68svh}
.hero .bg{position:absolute; inset:0; z-index:0}
.hero .bg img{width:100%; height:100%; object-fit:cover; object-position:55% 20%; filter:grayscale(.3) contrast(1.1) brightness(.9)}
.hero .bg::after{content:""; position:absolute; inset:0; background:linear-gradient(0deg, var(--ink) 6%, rgba(11,22,38,.45) 45%, rgba(11,22,38,.1)), linear-gradient(90deg, rgba(11,22,38,.7), transparent 60%)}
.hero .wrap{padding:7rem 0 2.5rem}
/* Photo slides right on desktop so the title never covers a face */
@media (min-width:901px){
  .hero.right .bg{left:36%}
  .hero.right .bg::after{background:linear-gradient(90deg, var(--ink) 0%, rgba(14,15,17,0) 30%), linear-gradient(0deg, var(--ink) 6%, rgba(11,22,38,.4) 45%, rgba(11,22,38,.05))}
}
/* Plate: the photo has its own black side. On desktop it is pinned right at full height,
   never cropped sideways, so the face always clears the title column on the left */
@media (min-width:901px){
  .hero.plate{background:linear-gradient(180deg,var(--plate) calc(100% - 140px),var(--ink))}
  .hero.plate .bg{left:auto; right:0; bottom:auto; height:min(100%, 54vw, 840px); width:100%}
  .hero.plate .bg img{position:absolute; right:0; top:0; height:100%; width:auto; max-width:none; object-fit:fill}
  .hero.plate .bg::after{background:linear-gradient(0deg, var(--plate) 0%, rgba(27,42,74,0) 28%)}
  .hero.plate h1{font-size:clamp(4rem,7.4vw,7.4rem)}
  .hero.plate .wrap > :not(.billing){max-width:44%}
}
/* On phones the photo sits above the title instead of under it */
@media (max-width:900px){
  .hero.right .bg{bottom:auto; height:50svh}
  .hero.right .bg::after{background:linear-gradient(0deg, var(--ink) 0%, rgba(14,15,17,0) 45%)}
  .hero.right .wrap{padding-top:42svh}
}
.hero p{font-size:1.3rem; margin:1.8rem 0 0; max-width:36ch}
.billing{font-family:var(--title); font-stretch:62%; font-weight:500; text-transform:uppercase; color:var(--silver); letter-spacing:.06em; line-height:1.15; text-align:center; border-top:1px solid var(--line); margin-top:4rem; padding-top:1.4rem; font-size:clamp(.85rem,1.4vw,1.1rem)}
.billing b{font-weight:800; color:var(--cream); font-size:1.35em; letter-spacing:.02em}
.billing span{margin:0 .7em; color:var(--ash)}

section{padding:7.5rem 0; position:relative}
.split{display:grid; grid-template-columns:1fr 1fr; gap:5rem; align-items:center}
.frame{position:relative; aspect-ratio:4/5; overflow:hidden; background:var(--navy2)}
.frame img{width:100%; height:100%; object-fit:cover; filter:grayscale(.3) contrast(1.1)}

/* Numbered steps: a real sequence */
.steps{list-style:none; counter-reset:s; padding:0; margin:3.5rem 0 0; display:grid; grid-template-columns:repeat(3,1fr); border-top:1px solid var(--line)}
.steps li{counter-increment:s; padding:2rem 2rem 0 0}
.steps li + li{padding-left:2rem; border-left:1px solid var(--line)}
.steps li::before{content:"0" counter(s); display:block; font-family:var(--title); font-stretch:62%; font-weight:850; font-size:3.4rem; line-height:1; color:var(--gold); margin-bottom:1rem}
.steps p{color:var(--silver); margin-top:.8rem}

/* Ruled columns: departments, paths, team */
.cols{display:grid; grid-template-columns:repeat(3,1fr); margin-top:3.5rem; border-top:1px solid var(--line)}
.cols > *{padding:2rem 2rem 2rem 0; border-bottom:1px solid var(--line)}
.cols > *:not(:nth-child(3n+1)){padding-left:2rem; border-left:1px solid var(--line)}
.cols p{color:var(--silver); margin:.8rem 0 1.2rem}
.cols.two{grid-template-columns:1fr 1fr}
.cols.two > *:not(:nth-child(3n+1)){padding-left:0; border-left:0}
.cols.two > *:nth-child(2n){padding-left:2rem; border-left:1px solid var(--line)}

/* Record and laurel */
.record{display:grid; grid-template-columns:auto 1fr; gap:5rem; align-items:center; margin-top:3.5rem}
.award{position:relative; width:min(320px,70vw); aspect-ratio:1; display:grid; place-items:center; text-align:center; color:var(--silver)}
.laurel{position:absolute; inset:0; width:100%; height:100%}
.award div{font-family:var(--title); font-stretch:68%; text-transform:uppercase; line-height:1.05; padding:0 26%}
.award .big{display:block; font-weight:850; font-size:1.7rem; color:var(--cream)}
.award .small{display:block; font-weight:600; font-size:.85rem; letter-spacing:.2em; margin-top:.5rem}
.facts{list-style:none; padding:0; margin:0}
.facts li{padding:1.4rem 0; border-bottom:1px solid var(--line)}
.facts li:first-child{padding-top:0}
.facts .t-m{display:block; margin-bottom:.35rem; color:var(--cream)}
.facts span{color:var(--silver)}
.backed{margin-top:2rem; font-family:var(--title); font-stretch:80%; text-transform:uppercase; letter-spacing:.18em; font-size:.9rem; color:var(--ash)}
.backed b{color:var(--cream)}

/* Full bleed band */
.band{min-height:85vh; display:flex; align-items:center; text-align:center; padding:0}
.band .bg{position:absolute; inset:0; z-index:0}
.band .bg img{width:100%; height:100%; object-fit:cover; object-position:63% 25%; filter:grayscale(.6) contrast(1.1) brightness(.6)}
.band .bg::after{content:""; position:absolute; inset:0; background:rgba(11,22,38,.62)}
.band .t{margin:0 auto; max-width:12ch}
.band blockquote{margin:2rem auto 0; max-width:34ch; font-style:italic; font-size:1.35rem; color:var(--silver)}
.band cite{display:block; font-style:normal; margin-top:1rem; font-family:var(--title); font-stretch:80%; letter-spacing:.2em; text-transform:uppercase; font-size:.9rem; color:var(--gold)}
.band .note{margin:1.2rem auto 0; color:var(--ash); font-size:1rem}

/* Team */
.mono{width:96px; height:96px; display:grid; place-items:center; background:var(--navy2); font-family:var(--title); font-stretch:62%; font-weight:850; font-size:2.6rem; color:var(--gold); margin-bottom:1.2rem}
.role{font-family:var(--title); font-stretch:80%; text-transform:uppercase; letter-spacing:.16em; font-size:.85rem; color:var(--gold); margin-top:.4rem}

/* Chevron lists */
.chev{list-style:none; padding:0; margin:0}
.chev li{position:relative; padding-left:1.8rem; margin-bottom:.6rem; color:var(--silver)}
.chev li::before{content:""; position:absolute; left:0; top:.55em; width:12px; height:12px; border-left:3px solid var(--gold); border-top:3px solid var(--gold); transform:rotate(45deg) translate(2px,2px)}

/* Post listings */
.posts{display:grid; grid-template-columns:repeat(3,1fr); gap:2.5rem; margin-top:3.5rem}
.post{display:block; text-decoration:none}
.post .thumb{aspect-ratio:2/3; background:var(--navy2); overflow:hidden; margin-bottom:1rem; position:relative}
.post.wide .thumb{aspect-ratio:16/10}
.post .thumb img{width:100%; height:100%; object-fit:cover; filter:grayscale(.25) contrast(1.08); transition:transform .4s}
.post:hover .thumb img{transform:scale(1.03)}
.post .thumb .ph{position:absolute; inset:0; display:grid; place-items:center; padding:1.5rem; text-align:center}
.post h3{margin:0}
.post .date{font-family:var(--title); font-stretch:80%; text-transform:uppercase; letter-spacing:.16em; font-size:.8rem; color:var(--ash); margin-top:.5rem}
.post p{color:var(--silver); font-size:1rem; margin-top:.5rem}
.empty{margin-top:3rem; color:var(--silver)}

/* Article */
.article{max-width:720px; margin:0 auto}
.article .cover{margin:0 0 3rem; aspect-ratio:16/9; overflow:hidden}
.article .cover img{width:100%; height:100%; object-fit:cover}
.prose{font-size:1.2rem}
.prose h2,.prose h3{font-family:var(--title); font-stretch:72%; font-weight:850; text-transform:uppercase; line-height:.95; margin:2.5rem 0 1rem}
.prose h2{font-size:2.4rem} .prose h3{font-size:1.7rem}
.prose a{color:var(--gold)}
.prose img{margin:2rem 0; width:100%}
.prose blockquote{margin:2rem 0; padding-left:1.4rem; border-left:3px solid var(--gold); font-style:italic; color:var(--silver)}
.prose ul,.prose ol{padding-left:1.4rem}
.prose code{font-size:.9em; background:var(--navy2); padding:.1em .35em}

/* ---------- Photo free panels: these break up the photo sections ---------- */

/* Gold manifesto: one sentence, poster size, no photo */
.goldband{background:var(--gold); color:var(--ink); padding:7rem 0}
.goldband .kicker{color:rgba(14,15,17,.65)}
.goldband .t{color:var(--ink); margin:0; max-width:none}
.goldband .t-xl{font-size:clamp(3.4rem,10vw,9.5rem)}

/* Paper: the warm light section, like a printed call sheet */
.paper{background:#ECE6DA; color:var(--ink)}
.paper .t{color:var(--ink)}
.paper .gold{color:#8A560D}
.paper p,.paper .lede{color:#2A2A28}
.paper .link{color:#8A560D}
.paper .fine-note{color:#55524B}
.paper .fine-note a{color:#8A560D}
.paper .btn{background:var(--ink); color:var(--cream)}
.paper .btn:hover{background:#26282C}
.sheet-head{display:flex; justify-content:space-between; gap:1rem; font-family:var(--title); font-stretch:80%; font-weight:700; text-transform:uppercase; letter-spacing:.2em; font-size:.8rem; border-top:3px solid var(--ink); border-bottom:1px solid var(--ink); padding:.7rem 0; margin-bottom:3rem}
.sheet-boxes{display:grid; grid-template-columns:repeat(4,1fr); border:1.5px solid var(--ink); margin:3rem 0}
.sheet-boxes div{padding:1.1rem 1.2rem; display:flex; flex-direction:column; gap:.45rem}
.sheet-boxes div + div{border-left:1.5px solid var(--ink)}
.sheet-boxes span{font-family:var(--title); font-stretch:80%; font-weight:600; text-transform:uppercase; letter-spacing:.16em; font-size:.75rem; color:#55524B}
.sheet-boxes b{font-family:var(--title); font-stretch:72%; font-weight:850; text-transform:uppercase; font-size:1.7rem; line-height:1}
.scenes{list-style:none; margin:0; padding:0}
.scenes li{display:grid; grid-template-columns:7rem 1fr; gap:2rem; padding:1.8rem 0; border-top:1px solid rgba(14,15,17,.25)}
.scenes .sc{font-family:var(--title); font-stretch:62%; font-weight:850; font-size:2.4rem; line-height:1; color:#8A560D; text-transform:uppercase}
.scenes p{margin:.6rem 0 0; max-width:62ch}

/* End credits: centered roll, no photo */
.credits{text-align:center; padding:8rem 0; border-top:1px solid var(--line)}
.credits .t{margin:0 auto 3rem}
.roll{display:grid; grid-template-columns:1fr 1fr; column-gap:2rem; row-gap:1.1rem; max-width:760px; margin:0 auto}
.roll dt{text-align:right; font-family:var(--title); font-stretch:80%; text-transform:uppercase; letter-spacing:.18em; font-size:.85rem; color:var(--ash); padding-top:.3rem}
.roll dd{margin:0; text-align:left; font-family:var(--title); font-stretch:75%; font-weight:800; text-transform:uppercase; font-size:1.35rem; color:var(--cream)}
.roll-end{margin:3.5rem auto 0; color:var(--silver)}
.roll-end a{color:var(--gold)}

/* Portrait frames keep the face, never crop the head */
.frame.portrait{aspect-ratio:4/5; max-width:460px; justify-self:end; width:100%}
.members-head{margin-bottom:1rem}

/* Nav join button */
.links a.navjoin{background:var(--gold); color:var(--ink); padding:.55rem 1rem; border-radius:2px; box-shadow:none}
.links a.navjoin:hover{background:#f2c46a; color:var(--ink)}

/* Story: one readable column, the triad is the poster moment */
.story{max-width:720px}
.story p{font-size:1.2rem; line-height:1.7}
.story .lede{font-size:1.5rem; line-height:1.5}
.story .triad{font-size:clamp(3rem,8vw,6rem); line-height:.9; margin:3rem 0; color:var(--cream)}
.longform p{font-size:1.15rem; line-height:1.75}
.longform .lede{font-size:1.4rem; line-height:1.5}
.crisis{margin-top:3rem; padding-top:1.5rem; border-top:1px solid var(--line); font-size:1rem !important; color:var(--silver)}

/* Programs: native dropdowns, work without JavaScript */
.programs{margin-top:3rem; border-top:1px solid var(--line)}
.programs details{border-bottom:1px solid var(--line)}
.programs summary{list-style:none; cursor:pointer; display:flex; justify-content:space-between; align-items:center; gap:1rem; padding:1.8rem 0}
.programs summary::-webkit-details-marker{display:none}
.programs summary .t-m{font-size:clamp(1.9rem,3.6vw,3rem)}
.programs summary:hover .t-m{color:var(--gold)}
.plus{position:relative; width:22px; height:22px; flex:none}
.plus::before,.plus::after{content:""; position:absolute; left:0; top:10px; width:22px; height:2px; background:var(--gold); transition:transform .25s}
.plus::after{transform:rotate(90deg)}
details[open] .plus::after{transform:rotate(0)}
.program-body{padding:0 0 3rem; gap:3rem}

/* Join tiers */
.tiers{display:grid; grid-template-columns:repeat(3,1fr); margin-top:3rem; border-top:1px solid var(--line)}
.tier{padding:2.2rem 2rem 2.4rem 0; display:flex; flex-direction:column}
.tier + .tier{padding-left:2rem; border-left:1px solid var(--line)}
.tier .price{font-family:var(--title); font-stretch:62%; font-weight:850; font-size:clamp(3.4rem,6vw,5rem); line-height:.9; color:var(--gold)}
.tier .per{font-family:var(--title); font-stretch:80%; text-transform:uppercase; letter-spacing:.16em; font-size:.85rem; color:var(--ash); margin:.4rem 0 1.2rem}
.tier h3{margin-bottom:1.2rem}
.tier .chev{margin-bottom:2rem; flex:1}
.tier .btn{align-self:flex-start}
.tier .limit{font-family:var(--title); font-stretch:80%; text-transform:uppercase; letter-spacing:.16em; font-size:.8rem; color:var(--gold); margin-bottom:1rem}
.tier.featured{background:linear-gradient(180deg, rgba(232,177,75,.07), transparent 60%)}
.tiers.two{grid-template-columns:1fr 1fr}
.tier .about{margin:0 0 1.4rem; color:var(--silver)}
.paper .tiers{border-top-color:rgba(14,15,17,.3)}
.paper .tier + .tier{border-left-color:rgba(14,15,17,.3)}
.paper .tier .price{color:#8A560D}
.paper .tier .per,.paper .tier .limit{color:#55524B}
.paper .tier .about,.paper .chev li{color:#2A2A28}
.paper .tier.featured{background:linear-gradient(180deg, rgba(138,86,13,.08), transparent 60%)}
.goldband .lede,.goldband p{color:var(--ink)}
.goldband .btn{background:var(--ink); color:var(--cream)}
.goldband .btn:hover{background:#26282C}
.goldband .link{color:var(--ink)}
.goldband .fine-note,.goldband .fine-note a{color:rgba(14,15,17,.78)}
.fine-note{margin-top:2.5rem; font-size:.95rem; color:var(--ash); max-width:70ch}

/* Footer */
.foot{padding:4rem 0 3rem; border-top:1px solid var(--line)}
.foot .billing{margin-top:0; border-top:0; padding-top:0}
.footgrid{display:grid; grid-template-columns:1.4fr 1fr 1fr 1fr; gap:3rem; margin-top:3.5rem}
.footgrid h2{font-family:var(--title); font-stretch:80%; font-size:.85rem; text-transform:uppercase; letter-spacing:.2em; color:var(--gold); margin:0 0 1rem}
.footgrid a:not(.brand){display:block; text-decoration:none; color:var(--silver); font-size:1rem; margin-bottom:.45rem}
.footgrid a:hover{color:var(--cream)}
.footgrid p{color:var(--ash); font-size:.95rem; margin-top:1rem}
.fine{margin-top:3rem; font-family:var(--title); font-stretch:80%; text-transform:uppercase; letter-spacing:.14em; font-size:.75rem; color:var(--ash)}

@media (max-width:980px){
  .menu{display:block}
  .links{display:none; position:absolute; top:68px; left:0; right:0; flex-direction:column; gap:0; background:var(--ink); border-bottom:1px solid var(--line); padding:.5rem 1.25rem 1.25rem}
  .links.open{display:flex}
  .links a{padding:1rem 0; border-bottom:1px solid var(--line); font-size:1.1rem}
  .links a[aria-current]{box-shadow:none; color:var(--gold)}
  .links a.navjoin{margin-top:1rem; text-align:center; border-bottom:0; padding:1rem}
}
@media (max-width:900px){
  .split,.record{grid-template-columns:1fr; gap:3rem}
  .split .frame{order:-1; aspect-ratio:4/3}
  .steps,.cols,.cols.two{grid-template-columns:1fr}
  .steps li,.steps li + li,.cols > *,.cols > *:not(:nth-child(3n+1)),.cols.two > *:nth-child(2n){padding:1.8rem 0; border-left:0; border-bottom:1px solid var(--line)}
  .award{justify-self:center}
  .posts{grid-template-columns:1fr 1fr; gap:1.5rem}
  .footgrid{grid-template-columns:1fr 1fr}
  .goldband{padding:5rem 0}
  .sheet-boxes{grid-template-columns:1fr 1fr}
  .sheet-boxes div:nth-child(3){border-left:0}
  .sheet-boxes div:nth-child(n+3){border-top:1.5px solid var(--ink)}
  .scenes li{grid-template-columns:1fr; gap:.4rem}
  .frame.portrait{justify-self:start; max-width:none; aspect-ratio:4/5}
  .roll{grid-template-columns:1fr; row-gap:.2rem}
  .roll dt,.roll dd{text-align:center}
  .roll dd{margin-bottom:1rem}
  .sheet-head span:last-child{display:none}
  .tiers,.tiers.two{grid-template-columns:1fr}
  .paper .tier + .tier{border-left:0; border-bottom-color:rgba(14,15,17,.3)}
  .tier,.tier + .tier{padding:2rem 0; border-left:0; border-bottom:1px solid var(--line)}
  .program-body{grid-template-columns:1fr}
  section{padding:5rem 0}
  .billing span{display:block; height:.35rem; margin:0; font-size:0}
}
@media (max-width:560px){ .posts{grid-template-columns:1fr} .wordmark{display:none} .footgrid{grid-template-columns:1fr} }

/* Contact form (v1.4.0). Dark by default, with a paper version */
.lic-form{display:grid; gap:1.4rem; padding:2rem; border:1px solid var(--line); background:rgba(14,15,17,.55); border-radius:2px; position:relative; z-index:2}
.lic-form fieldset{border:0; padding:0; margin:0; min-width:0}
.lic-form legend,.lic-form .field > span{display:block; font-family:var(--title); font-stretch:80%; font-weight:600; font-size:.8rem; text-transform:uppercase; letter-spacing:.2em; color:var(--silver); margin-bottom:.6rem; padding:0}
.lic-form .field em{font-style:normal; color:var(--ash); letter-spacing:.12em; margin-left:.4rem}
.lic-form input[type=text],.lic-form input[type=email],.lic-form input[type=tel],.lic-form select,.lic-form textarea{width:100%; font:inherit; font-size:1.05rem; color:var(--cream); background:rgba(255,255,255,.04); border:1px solid rgba(196,200,206,.3); border-radius:2px; padding:.8rem .9rem}
.lic-form select{appearance:none; background-image:linear-gradient(45deg,transparent 50%,var(--gold) 50%),linear-gradient(135deg,var(--gold) 50%,transparent 50%); background-position:calc(100% - 20px) 55%,calc(100% - 14px) 55%; background-size:6px 6px; background-repeat:no-repeat; padding-right:2.4rem}
.lic-form select option{color:var(--ink)}
.lic-form textarea{resize:vertical; min-height:8rem}
.lic-form input:focus,.lic-form select:focus,.lic-form textarea:focus{outline:none; border-color:var(--gold); box-shadow:0 0 0 1px var(--gold)}
.lic-form .row.two{display:grid; grid-template-columns:1fr 1fr; gap:1.2rem}
.lic-form .choices{display:flex; flex-wrap:wrap; gap:.6rem}
.lic-form .choices.stack{display:grid; grid-template-columns:1fr 1fr; gap:.6rem}
.lic-form .choice{position:relative; cursor:pointer}
.lic-form .choice input{position:absolute; opacity:0; width:1px; height:1px}
.lic-form .choice span{display:block; height:100%; padding:.7rem 1rem; border:1px solid rgba(196,200,206,.3); border-radius:2px; font-size:1rem; line-height:1.35; color:var(--cream)}
.lic-form .choice input:checked + span{border-color:var(--gold); background:rgba(232,177,75,.12); box-shadow:inset 3px 0 0 var(--gold)}
.lic-form .choice input:focus-visible + span{outline:2px solid var(--gold); outline-offset:2px}
.lic-form .choice:hover span{border-color:var(--silver)}
.lic-form .hp{position:absolute; left:-9999px; width:1px; height:1px; overflow:hidden}
.lic-form .form-note{font-size:.95rem; color:var(--silver); margin:0}
.lic-form .form-note a{color:var(--gold)}
.lic-form .form-status:empty{display:none}
.lic-form .form-status{font-size:1rem; padding:.9rem 1rem; border-left:3px solid var(--gold); background:rgba(232,177,75,.08)}
.lic-form .form-status.err{border-left-color:#E07A5F; background:rgba(224,122,95,.1)}
.lic-form [aria-invalid=true]{border-color:#E07A5F !important}
.lic-form fieldset[aria-invalid=true] .choice span{border-color:#E07A5F}
.lic-form button[disabled]{opacity:.6; cursor:wait}
.lic-form .btn{justify-self:start}
.form-done{padding:2rem; border:1px solid var(--gold); background:rgba(232,177,75,.08); position:relative; z-index:2}
.form-done .t{margin-bottom:1rem}
@media (max-width:640px){
  .lic-form{padding:1.3rem}
  .lic-form .row.two,.lic-form .choices.stack{grid-template-columns:1fr}
  .lic-form .btn{justify-self:stretch; text-align:center}
}

/* Photo free page heads (FAQ, Contact) */
.faqhead{padding:clamp(5rem,12vw,9rem) 0 clamp(3.5rem,8vw,6rem)}
.faqlist{margin-top:2.5rem}
.faqlist summary .t-m{font-size:clamp(1.4rem,2.6vw,2.1rem)}
.faqlist .program-body p{max-width:65ch}
.paper .programs,.paper .programs details{border-color:rgba(14,15,17,.25)}
.paper .programs summary:hover .t-m{color:#8A560D}
.paper .cols,.paper .cols > *,.paper .steps,.paper .steps li{border-color:rgba(14,15,17,.22)}
.reach .t-m{margin:0 0 1rem}
.reach .t-m + p{margin-bottom:2.5rem}
.reach a{color:var(--gold)}
.paper .plus::before,.paper .plus::after{background:#8A560D}

/* Testimonial: a crew member in his own words */
.testimonial figure{margin:0}
.testimonial blockquote{margin:0; padding:0; border:0; font-style:normal; position:relative}
.testimonial blockquote::before{content:"\201C"; display:block; height:.3em; margin:.25em 0 .05em -.04em; font-family:var(--serif); font-size:8rem; line-height:.8; color:var(--gold)}
.testimonial blockquote .lede{margin-top:0; font-size:clamp(1.45rem,2.4vw,1.9rem); line-height:1.4; color:var(--cream)}
.testimonial blockquote p{color:var(--cream)}
.testimonial blockquote .aside{margin-top:1.6rem; padding-top:1.4rem; border-top:1px solid var(--line); color:var(--gold); font-size:1.2rem}
.testimonial figcaption{margin-top:2.2rem; display:flex; flex-direction:column; gap:.3rem}
.testimonial figcaption b{font-family:var(--title); font-stretch:75%; font-weight:850; text-transform:uppercase; font-size:1.6rem; letter-spacing:.02em; line-height:1}
.testimonial figcaption span{font-family:var(--title); font-stretch:80%; font-weight:600; text-transform:uppercase; letter-spacing:.18em; font-size:.8rem; color:var(--silver)}

/* The hero photo's navy side must match the page exactly, so no color filter on it */
.hero.plate .bg img{filter:none}
@media (max-width:900px){
  .hero.plate{background:linear-gradient(180deg,var(--plate) calc(100% - 120px),var(--ink))}
  .hero.plate .bg::after{background:linear-gradient(0deg, var(--plate) 0%, rgba(27,42,74,0) 45%)}
}

/* Veteran sign up (v1.5.0) */
.vet-form .form-step,.crew-form .form-step{font-family:var(--title); font-stretch:75%; font-weight:850; text-transform:uppercase; font-size:1.5rem; line-height:1; margin:1.2rem 0 0; padding-top:1.4rem; border-top:1px solid var(--line); color:var(--gold)}
.vet-form .form-step:first-of-type,.crew-form .form-step:first-of-type{margin-top:0; padding-top:0; border-top:0}
.vet-form legend em,.crew-form legend em{font-style:normal; color:var(--ash); letter-spacing:.12em; margin-left:.4rem}
.lic-form .choices.stack.three{grid-template-columns:repeat(3,1fr)}
.vet-form .file input,.vet-update .file input{width:100%; font:inherit; font-size:1rem; color:var(--cream); padding:1rem; border:1px dashed rgba(196,200,206,.45); border-radius:2px; background:rgba(255,255,255,.03); cursor:pointer}
.vet-form .file input::file-selector-button,.vet-update .file input::file-selector-button{font-family:var(--title); font-stretch:80%; font-weight:700; text-transform:uppercase; letter-spacing:.12em; background:var(--gold); color:var(--ink); border:0; border-radius:2px; padding:.6rem 1rem; margin-right:1rem; cursor:pointer}
.vet-form .consent span{font-size:1rem}
.vet-form .consent[aria-invalid=true] span{border-color:#E07A5F}
.signup-intro{position:sticky; top:100px}
.signup-intro .privacy{border-left:3px solid var(--gold); padding-left:1rem; color:var(--silver)}
.signup-intro .privacy b{color:var(--cream)}
.signup-intro a{color:var(--gold)}
@media (max-width:900px){ .signup-intro{position:static} }
@media (max-width:640px){ .lic-form .choices.stack.three{grid-template-columns:1fr 1fr} }

/* Join page: two ways in */
.paths{padding:3rem 0 6rem}
.paths-grid{display:grid; grid-template-columns:1fr 1fr; gap:1.5rem}
.path{display:flex; flex-direction:column; gap:1rem; padding:2.4rem; text-decoration:none; color:var(--cream); border:1px solid var(--line); border-radius:2px; transition:border-color .2s, transform .2s}
.path:hover{border-color:var(--gold); transform:translateY(-2px)}
.path.vet{background:radial-gradient(120% 90% at 20% 0%, var(--navy2), var(--navy) 60%)}
.path.civ{background:#16181C}
.path .kicker{margin:0}
.path .path-line{color:var(--silver); max-width:40ch; flex:1}
.path .btn{align-self:flex-start}
@media (max-width:760px){ .paths-grid{grid-template-columns:1fr; margin-top:0} .path{padding:1.8rem} }

.lic-form .field .req{font-weight:700; color:var(--ink); background:var(--gold); padding:.1rem .45rem; border-radius:2px; letter-spacing:.12em; margin-left:.4rem; font-size:.7rem}
.ask{margin:1.6rem 0 0; padding:1.2rem 1.4rem; border-left:3px solid var(--gold); background:rgba(232,177,75,.08); font-size:1.2rem; max-width:60ch; white-space:pre-wrap}

/* Dropdown menu (v1.5.2). Hover or click on desktop, accordion on phones. */
.links{align-items:center; gap:.2rem}
.dd{position:relative}
.dd-btn{display:flex; align-items:center; gap:.55rem; background:none; border:0; cursor:pointer; color:var(--silver); font:inherit; text-transform:uppercase; letter-spacing:.14em; padding:.65rem .85rem}
.dd-btn:hover,.dd.open .dd-btn,.dd:focus-within .dd-btn{color:var(--cream)}
.dd.on .dd-btn{color:var(--cream); box-shadow:inset 0 -2px 0 var(--gold)}
.caret{width:7px; height:7px; border-right:2px solid var(--gold); border-bottom:2px solid var(--gold); transform:translateY(-2px) rotate(45deg); transition:transform .2s}
.dd.open .caret{transform:translateY(1px) rotate(225deg)}
.dd-menu{display:none; position:absolute; top:100%; left:0; min-width:270px; padding:.6rem 0; background:#121418; border:1px solid var(--line); border-top:2px solid var(--gold); box-shadow:0 18px 40px rgba(0,0,0,.45); z-index:40}
.dd:last-of-type .dd-menu{left:auto; right:0}
.dd:hover .dd-menu,.dd:focus-within .dd-menu,.dd.open .dd-menu{display:block}
.links .dd-menu a{display:block; padding:.62rem 1.25rem; font-family:var(--serif); font-stretch:100%; font-weight:400; text-transform:none; letter-spacing:0; font-size:1.05rem; color:var(--cream); box-shadow:none}
.links .dd-menu a:hover{background:rgba(232,177,75,.1); color:var(--gold)}
.links .dd-menu a[aria-current]{color:var(--gold); box-shadow:inset 3px 0 0 var(--gold)}
.dd-head{display:block; margin-top:.5rem; padding:.85rem 1.25rem .3rem; border-top:1px solid var(--line); font-size:.7rem; letter-spacing:.24em; color:var(--ash)}
.links a.navjoin{margin-left:.8rem}
@media (min-width:901px) and (max-width:1120px){
  .dd-btn{padding:.6rem .55rem; letter-spacing:.1em}
  .links{font-size:.88rem}
}
@media (max-width:900px){
  .links{align-items:stretch}
  .dd{border-bottom:1px solid var(--line)}
  .dd-btn{width:100%; justify-content:space-between; padding:1rem 0; font-size:1.1rem}
  .dd.on .dd-btn{box-shadow:none; color:var(--gold)}
  .dd:hover .dd-menu,.dd:focus-within .dd-menu{display:none}
  .dd.open .dd-menu{display:block}
  .dd-menu{position:static; min-width:0; padding:0 0 .9rem; background:none; border:0; box-shadow:none}
  .links .dd-menu a{padding:.6rem 0 .6rem 1rem; border:0; font-size:1.1rem}
  .links .dd-menu a[aria-current]{box-shadow:inset 3px 0 0 var(--gold)}
  .dd-head{padding:.8rem 0 .3rem 1rem; border-top:0}
  .links a.navjoin{margin-left:0}
}

/* Consent is a real, visible check box */
.vet-form .choice.consent{display:flex; gap:.9rem; align-items:flex-start; padding:1rem 1.1rem; border:1px solid rgba(196,200,206,.3); border-radius:2px; cursor:pointer}
.vet-form .choice.consent input{position:static; opacity:1; width:1.35rem; height:1.35rem; margin:.15rem 0 0; flex:none; accent-color:var(--gold); cursor:pointer}
.vet-form .choice.consent span{display:inline; padding:0; border:0; background:none !important; box-shadow:none !important; height:auto}
.vet-form .choice.consent:has(input:checked){border-color:var(--gold); background:rgba(232,177,75,.08)}
.vet-form .choice.consent[aria-invalid=true]{border-color:#E07A5F}

/* Luke in uniform */
.luke-photo{margin:0 0 2.6rem; max-width:520px}
.luke-photo img{width:100%; border:1px solid var(--line)}
.luke-photo figcaption{margin-top:.8rem; font-family:var(--title); font-stretch:80%; font-weight:600; text-transform:uppercase; letter-spacing:.2em; font-size:.8rem; color:var(--silver)}
.mono.photo{background:none; padding:0; overflow:hidden}
.mono.photo img{width:100%; height:100%; object-fit:cover; filter:grayscale(1)}

/* Keep exploring */
.explore{padding:4rem 0 5rem; border-top:1px solid var(--line)}
.explore-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:1rem}
.explore-grid a{display:flex; flex-direction:column; gap:.6rem; padding:1.6rem; text-decoration:none; color:var(--cream); border:1px solid var(--line); border-radius:2px; transition:border-color .2s}
.explore-grid a:hover{border-color:var(--gold)}
.explore-grid a span:last-child{color:var(--silver); font-size:1rem}
.explore-grid a .t-m{color:var(--cream)}
.explore-grid a:hover .t-m{color:var(--gold)}
@media (max-width:760px){ .explore-grid{grid-template-columns:1fr} }

.dd-js .dd:focus-within:not(.open):not(:hover) .dd-menu{display:none}
@media (max-width:900px){
  .links{left:-1.25rem; right:-1.25rem; padding-left:1.25rem; padding-right:1.25rem; max-height:calc(100svh - 68px); overflow-y:auto}
}

.links a.navlink{padding:.65rem .85rem}
@media (min-width:901px) and (max-width:1120px){ .links a.navlink{padding:.6rem .55rem; letter-spacing:.1em} }
@media (max-width:900px){ .links a.navlink{padding:1rem 0; font-size:1.1rem} }

/* Hero to first section: the hero's navy settles into the section's navy, with no black band or hard edge */
.hero.plate{background:linear-gradient(180deg, var(--plate) 0, var(--plate) calc(100% - 340px), var(--navy) 100%) !important}
.hero.plate .billing{border-top-color:rgba(196,200,206,.12)}
.hero.plate + section.navy{background:radial-gradient(90% 70% at 70% 65%, var(--navy2), var(--navy) 70%)}
/* The photo melts into the background instead of ending on a line, and the grain matches the next section */
.hero.plate .bg{-webkit-mask-image:linear-gradient(180deg,#000 62%,transparent 100%); mask-image:linear-gradient(180deg,#000 62%,transparent 100%)}
.hero.plate .bg::after{background:none !important}
.hero.plate.grain::after{opacity:.07}
@media (max-width:900px){
  .hero.plate .bg{-webkit-mask-image:linear-gradient(180deg,#000 55%,transparent 100%); mask-image:linear-gradient(180deg,#000 55%,transparent 100%)}
  .hero.plate{background:linear-gradient(180deg, var(--plate) 0, var(--plate) calc(100% - 260px), var(--navy) 100%) !important}
}

/* Keep Luke's photo in proportion at every width */
.luke-photo img{height:auto}

/* Testimonial v2: poster headline, one clean quote, one size */
.testimonial .split{grid-template-columns:5fr 7fr; gap:4.5rem; align-items:center}
.testimonial .testi-head{margin:0 0 2rem}
.testimonial blockquote{border-left:3px solid var(--gold); padding:.2rem 0 .2rem 1.6rem; max-width:56ch}
.testimonial blockquote::before{content:none !important; display:none !important}
.testimonial blockquote p{font-size:clamp(1.15rem,1.6vw,1.35rem); line-height:1.6; color:var(--cream); margin:0 0 1rem}
.testimonial blockquote p:last-child{margin-bottom:0}
.testimonial figcaption{margin-top:2rem; padding-left:1.6rem; flex-direction:row; align-items:baseline; gap:1rem; flex-wrap:wrap}
.testimonial figcaption b{font-size:1.4rem}
.testimonial figcaption span::before{content:""; display:inline-block; width:28px; height:2px; background:var(--gold); vertical-align:middle; margin-right:1rem}
@media (max-width:900px){ .testimonial .split{grid-template-columns:1fr; gap:2.5rem} .testimonial .frame.portrait{max-width:420px} }
@media (max-width:900px){ .testimonial .frame.portrait{aspect-ratio:4/5; width:100%} }
/* Date and number fields match the rest of the form */
.lic-form input[type=date],.lic-form input[type=number]{width:100%; font:inherit; font-size:1.05rem; color:var(--cream); background:rgba(255,255,255,.04); border:1px solid rgba(196,200,206,.3); border-radius:2px; padding:.8rem .9rem; color-scheme:dark}
.lic-form input[type=date]:focus,.lic-form input[type=number]:focus{outline:none; border-color:var(--gold); box-shadow:0 0 0 1px var(--gold)}
.lic-form input[type=date]::-webkit-calendar-picker-indicator{filter:invert(.8) sepia(1) saturate(4) hue-rotate(5deg); cursor:pointer}

/* The member portrait always shows the full Light Inside Cinema shirt logo */
.frame.portrait.whole img{object-position:50% 62% !important}
@media (max-width:900px){
  .frame.portrait.whole{aspect-ratio:auto}
  .frame.portrait.whole img{height:auto}
}

/* Film strip (v1.6.0): a slow roll of set photos with sprocket holes and edge code */
.filmstrip{padding:0; background:#060607; border-top:1px solid #1a1b1e; border-bottom:1px solid #1a1b1e; overflow:hidden}
.filmstrip .strip{position:relative; padding:30px 0; overflow:hidden}
.filmstrip .strip::before,.filmstrip .strip::after{content:""; position:absolute; left:0; right:0; height:30px; z-index:2; pointer-events:none;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='34' height='30'%3E%3Crect x='10' y='9' width='14' height='12' rx='2.5' fill='%23ECE6DA' fill-opacity='.82'/%3E%3C/svg%3E");
  background-size:34px 30px; background-repeat:repeat-x}
.filmstrip .strip::before{top:0}
.filmstrip .strip::after{bottom:0}
.filmstrip .reel{display:flex; width:max-content}
.filmstrip .pass{display:flex; gap:14px; padding-right:14px}
.filmstrip .cell{position:relative; margin:0; width:clamp(220px,26vw,360px); aspect-ratio:3/2; overflow:hidden; background:#111; border-radius:3px}
.filmstrip .cell img{width:100%; height:100%; object-fit:cover; filter:grayscale(.25) contrast(1.06) sepia(.08)}
.filmstrip .edge{position:absolute; left:8px; bottom:6px; font-family:var(--title); font-stretch:70%; font-weight:700; font-size:.68rem; letter-spacing:.18em; color:#E8B14B; opacity:.85; text-shadow:0 1px 2px rgba(0,0,0,.7)}
@media (prefers-reduced-motion:no-preference){
  .filmstrip .reel{animation:reel 80s linear infinite}
  .filmstrip:hover .reel{animation-play-state:paused}
}
@keyframes reel{to{transform:translateX(-50%)}}
@media (prefers-reduced-motion:reduce){ .filmstrip .strip{overflow-x:auto} .filmstrip .pass[aria-hidden]{display:none} }
@media (max-width:640px){ .filmstrip .strip{padding:24px 0} .filmstrip .strip::before,.filmstrip .strip::after{height:24px; background-size:28px 24px} .filmstrip .cell{width:200px} }