/* LIGHTER — cut-and-paste film website. No generated artwork, tracking, or third-party fonts. */
:root { --night:#0b1219; --midnight:#101d28; --slate:#162a39; --blue:#8abbe5; --cream:#ece6d9; --paper:#f3ede0; --ink:#17212a; --steel:#a8b8c3; --rule:rgba(222,236,244,.24); --max:1230px; }
* { box-sizing:border-box; }
html { scroll-behavior:smooth; scroll-padding-top:84px; }
body { margin:0; background:var(--night); color:var(--paper); font-family:Arial,Helvetica,sans-serif; -webkit-font-smoothing:antialiased; overflow-x:hidden; }
body.menu-open { overflow:hidden; }
img { display:block; max-width:100%; }
a { color:inherit; }
button { font:inherit; }
button,a { -webkit-tap-highlight-color:transparent; }
::selection { background:var(--blue); color:#071622; }
:focus-visible { outline:3px solid var(--blue); outline-offset:4px; }
.shell { width:min(calc(100% - 96px),var(--max)); margin-inline:auto; }
.skip-link { position:fixed; top:-90px; left:18px; z-index:300; background:var(--blue); color:var(--night); padding:14px 20px; font-weight:800; }
.skip-link:focus { top:14px; }
.site-header { position:fixed; z-index:150; top:0; left:0; width:100%; min-height:78px; border-bottom:1px solid rgba(255,255,255,.14); transition:background-color .18s; }
.site-header.scrolled, .site-header:has(.primary-nav.is-open) { background:rgba(7,14,20,.97); backdrop-filter:blur(10px); }
.nav-inner { display:flex; align-items:center; justify-content:space-between; min-height:78px; gap:20px; }
.small-logo,.footer-logo { font:900 28px/.85 Impact,'Arial Black',sans-serif; letter-spacing:.02em; text-decoration:none; }
.small-logo span,.footer-logo span { color:var(--blue); }
.primary-nav { display:flex; align-items:center; gap:25px; }
.primary-nav a { text-transform:uppercase; text-decoration:none; font-size:11px; letter-spacing:.10em; font-weight:900; padding:14px 0; white-space:nowrap; }
.primary-nav a:hover { color:var(--blue); }
.primary-nav .nav-support { color:var(--night); background:var(--blue); padding:13px 18px; }
.primary-nav .nav-support:hover { color:var(--night); background:var(--paper); }
.menu-toggle { display:none; }

/* HERO */
.hero { position:relative; min-height:760px; min-height:max(745px,100svh); background:#172737; overflow:hidden; }
.hero-background,.hero-wash { position:absolute; inset:0; }
.hero-background { background:url('assets/night-street.jpg') center 48%/cover no-repeat; filter:saturate(.75) brightness(.68) contrast(1.05); transform:scale(1.025); }
.hero-wash { background:linear-gradient(90deg,rgba(4,12,20,.95) 0%,rgba(7,14,22,.78) 52%,rgba(7,14,22,.40) 100%),linear-gradient(0deg,rgba(4,12,20,.95),transparent 34%); }
.hero-content { min-height:inherit; position:relative; z-index:1; display:flex; flex-direction:column; padding:145px 0 30px; }
.hero-overline,.hero-footline { font-size:11px; font-weight:900; letter-spacing:.145em; line-height:1.6; }
.hero-overline { display:flex; align-items:center; gap:12px; margin:0 0 28px; color:#e0e7e9; }
.blue-tick { background:var(--blue); width:35px; height:2px; flex:0 0 35px; }
.overline-star { color:var(--blue); font-size:16px; }
.hero-top { flex:1; display:flex; flex-direction:column; justify-content:center; padding-bottom:40px; }
.cutpaste { display:flex; align-items:center; white-space:nowrap; line-height:1; max-width:100%; margin:0 0 33px; padding:13px 0 14px; font-size:clamp(60px,9.6vw,139px); font-weight:900; font-family:Impact,'Arial Black','Arial Narrow',sans-serif; letter-spacing:-.025em; }
.cutpaste span:not(.dot) { display:inline-flex; justify-content:center; align-items:center; width:.91em; height:1.18em; flex-shrink:0; background:#ede7db; color:#17212a; box-shadow:2px 4px 0 rgba(5,11,18,.40); clip-path:polygon(2% 4%,100% 0,97% 95%,0 99%); }
.cutpaste .c1 { transform:rotate(-4deg) translateY(7px); background:#dfd7cb!important; }
.cutpaste .c2 { transform:rotate(3deg) translateY(-9px); background:#91c1ea!important; font-family:Georgia,serif; }
.cutpaste .c3 { transform:rotate(-3deg) translateY(9px); background:#1b3446!important; color:var(--paper)!important; }
.cutpaste .c4 { transform:rotate(4deg) translateY(-3px); }
.cutpaste .c5 { transform:rotate(-5deg) translateY(7px); background:#b0d5f5!important; font-family:Georgia,serif; }
.cutpaste .c6 { transform:rotate(3deg) translateY(-9px); background:#d8d4cb!important; }
.cutpaste .c7 { transform:rotate(-2deg) translateY(4px); background:#1b3446!important; color:var(--paper)!important; }
.cutpaste .dot { display:inline-block; flex-shrink:0; color:var(--blue); font-family:Impact,'Arial Black',sans-serif; font-size:1.16em; align-self:center; transform:translateY(.11em); }
.hero-bottom-grid { display:grid; grid-template-columns:minmax(0,1fr) minmax(165px,210px); align-items:start; gap:clamp(32px,5vw,88px); max-width:1000px; }
.hero-hook { font-family:Impact,'Arial Black',sans-serif; font-size:clamp(33px,3.3vw,48px); font-weight:900; margin:0 0 13px; line-height:1.02; letter-spacing:.008em; }
.hero-synopsis { font-size:18px; line-height:1.52; max-width:630px; color:#e0e9ee; margin:0; }
.hero-actions { display:flex; align-items:center; flex-wrap:wrap; gap:12px; margin-top:27px; }
.action { min-height:52px; display:inline-flex; justify-content:space-between; align-items:center; gap:18px; padding:14px 17px; text-transform:uppercase; font-weight:900; font-size:12px; letter-spacing:.05em; text-decoration:none; transition:background .16s, color .16s, transform .16s; }
.action span { font-size:18px; font-weight:400; }
.action:hover { transform:translateY(-2px); }
.action-blue { background:var(--blue); color:#091925; }
.action-blue:hover { background:var(--paper); }
.action-outline { border:1px solid #b2c0ca; color:#edf2f5; }
.action-outline:hover { background:rgba(255,255,255,.13); }
.quiet-link { display:inline-block; width:max-content; max-width:100%; margin-top:19px; font-size:13px; font-weight:700; color:#ceddeb; text-underline-offset:4px; }
.quiet-link:hover { color:white; }
.photo-print { width:100%; max-width:210px; margin:6px 0 0; padding:6px 6px 9px; background:#eee5d4; color:#16232d; box-shadow:10px 17px 25px rgba(0,0,0,.45); transform:rotate(5deg); align-self:start; }
.photo-print-image { aspect-ratio:1 / .99; background:#284863; position:relative; overflow:hidden; }
.photo-print-image img { position:relative; z-index:1; width:100%; height:100%; object-fit:cover; }
.photo-fallback { display:flex; position:absolute; inset:0; background:#284863; color:#f2ebdd; align-items:center; justify-content:center; flex-direction:column; gap:7px; text-align:center; font:900 clamp(18px,2.1vw,28px)/1.02 Impact,'Arial Black',sans-serif; transform:rotate(-4deg); }
.photo-fallback span { font:800 10px/1 Arial,Helvetica,sans-serif; letter-spacing:.14em; color:#b7d8ef; }
.photo-print figcaption { font-family:Arial,Helvetica,sans-serif; font-size:10px; line-height:1.25; font-weight:900; letter-spacing:.06em; padding:8px 4px 0; display:flex; justify-content:space-between; gap:7px; }
.photo-print figcaption span { color:#316a99; }
.hero-footline { display:flex; justify-content:space-between; flex-wrap:wrap; gap:12px 25px; border-top:1px solid rgba(231,241,248,.35); padding-top:14px; color:#cfdae1; font-size:10px; }
.hero-footline b { font-size:13px; color:var(--blue); padding-inline:5px; }

.info-ticker { background:var(--blue); color:#0b1c29; }
.ticker-inner { display:flex; justify-content:space-between; align-items:center; min-height:63px; gap:12px; font-size:11px; font-weight:900; letter-spacing:.08em; }
.ticker-inner span:nth-child(even) { font-size:17px; }

/* COMMON SECTION RULES */
.section { padding:99px 0 104px; }
.section-mark { display:flex; align-items:center; gap:16px; color:#bdd0dd; font-size:11px; line-height:1; letter-spacing:.15em; font-weight:900; margin-bottom:53px; }
.section-mark>span:first-child { color:var(--blue); font-size:17px; font-family:Impact,'Arial Black',sans-serif; }
.section-mark .mark-rule { width:38px; height:1px; background:var(--blue); }
.section-mark.mark-dark { color:#41535d; }
.mark-dark>span:first-child { color:#336fa4; }
.mark-dark .mark-rule { background:#336fa4; }
h2 { font:900 clamp(64px,7.1vw,110px)/.97 Impact,'Arial Black','Arial Narrow',sans-serif; letter-spacing:-.005em; margin:0; }
h2 em { font-style:normal; color:var(--blue); }
p { overflow-wrap:break-word; }
.micro-heading { margin:0 0 23px; color:var(--blue); font-size:11px; font-weight:900; letter-spacing:.13em; }

/* STORY */
.film-section { background:#0e1720; }
.film-lead { display:grid; grid-template-columns:1.02fr .95fr; gap:9%; margin-bottom:54px; align-items:start; }
.film-synopsis { padding-top:18px; color:#cbd5dc; font-size:18px; line-height:1.63; max-width:555px; }
.film-synopsis p { margin:0 0 17px; }
.film-synopsis p:first-child { color:#f1eae0; font-size:22px; line-height:1.45; font-weight:700; }
.film-synopsis span { display:block; border-top:1px solid #40505a; padding-top:19px; margin-top:28px; color:var(--blue); font-size:10px; letter-spacing:.15em; font-weight:900; }
.photo-sequence { display:grid; grid-template-columns:1.06fr .90fr 1fr; align-items:start; gap:16px; }
.sequence-frame { margin:0; min-width:0; }
.sequence-frame img { width:100%; height:265px; object-fit:cover; filter:saturate(.80) contrast(1.08); }
.sequence-frame.two { margin-top:25px; }
.sequence-frame.three { margin-top:8px; }
.sequence-frame figcaption { display:flex; justify-content:space-between; align-items:start; gap:8px; padding:12px 1px; font-size:11px; line-height:1.45; }
.sequence-frame figcaption b { font-size:11px; letter-spacing:.08em; }
.sequence-frame figcaption span { color:#95aebe; text-align:right; }
.image-context { margin:10px 0 0; color:#92a1ab; font-size:12px; }

/* RECRUITMENT — pasted notices */
.join-section { background:#e9e2d5; color:var(--ink); }
.join-header { display:grid; grid-template-columns:.96fr 1.04fr; align-items:end; gap:8%; margin-bottom:55px; }
.join-header h2 em { color:#356e9e; }
.join-intro { font-size:24px; line-height:1.32; font-weight:800; margin:0 0 18px; }
.join-small { font-size:15px; line-height:1.55; color:#48535b; margin:0; }
.application-grid { display:grid; grid-template-columns:1fr 1fr; gap:20px; }
.flyer { min-width:0; padding:29px 30px 31px; border:2px solid #192832; background:#e9e6dd; position:relative; box-shadow:8px 8px 0 #b3c1ca; display:flex; flex-direction:column; }
.flyer::before { content:""; position:absolute; width:65px; height:17px; background:rgba(134,180,208,.61); transform:rotate(-8deg); top:-9px; left:42%; }
.flyer-cast { background:#c5dced; transform:rotate(1deg); }
.flyer-crew { transform:rotate(-.7deg); }
.flyer-meta { display:flex; flex-wrap:wrap; justify-content:space-between; gap:7px; font-size:10px; font-weight:900; letter-spacing:.06em; color:#42525b; line-height:1.4; }
.open-status { background:#172838; color:#f3eada; padding:4px 7px; }
.flyer h3 { font:900 clamp(58px,6.4vw,94px)/.95 Impact,'Arial Black',sans-serif; letter-spacing:.01em; margin:36px 0 22px; }
.flyer h3 span { color:#3275ad; }
.flyer p { max-width:460px; margin:0 0 37px; font-size:17px; line-height:1.52; flex:1; }
.flyer-link { display:flex; justify-content:space-between; gap:12px; align-items:center; padding:15px 0 4px; border-top:2px solid #132734; font-size:15px; text-transform:uppercase; font-weight:900; letter-spacing:.04em; text-decoration:none; }
.flyer-link span { font-size:25px; }
.flyer-link:hover { color:#236da7; }
.local-note { display:grid; grid-template-columns:60px minmax(0,1fr) auto; align-items:center; gap:21px; margin-top:51px; border-top:2px solid #52636e; padding-top:25px; }
.local-burst { font-size:47px; color:#2c76ad; }
.local-note p { font-size:15px; line-height:1.5; max-width:660px; margin:0; }
.local-note p strong { display:block; font-size:17px; margin-bottom:4px; }
.local-note a { font-size:13px; text-transform:uppercase; font-weight:900; letter-spacing:.02em; text-underline-offset:5px; }
.local-note a:hover { color:#2e75ac; }

/* DIRECTOR */
.director-section { background:#142735; }
.director-layout { display:grid; grid-template-columns:1.08fr .85fr; gap:9%; align-items:center; }
.director-statement h2 { margin-bottom:37px; }
.director-statement p { max-width:615px; font-size:18px; line-height:1.7; margin:0 0 17px; color:#cbd9e2; }
.signature { display:flex; align-items:center; gap:16px; font-size:13px; font-weight:900; letter-spacing:.09em; margin-top:27px; }
.signature-bar { display:block; width:45px; height:3px; background:var(--blue); }
.signature small { display:block; font-size:11px; letter-spacing:.07em; color:#9db3c3; margin-top:5px; }
.notes-side { padding:11px; transform:rotate(1.6deg); background:#f0e9dc; color:#16232c; box-shadow:9px 11px 0 #07141e; }
.notes-inner { border:2px solid #193346; padding:28px 26px 22px; }
.notes-label { display:flex; justify-content:space-between; gap:8px; font-size:11px; font-weight:900; letter-spacing:.07em; border-bottom:2px solid #193346; padding-bottom:16px; }
.notes-label span { color:#3781b9; }
.note-block { border-bottom:1px solid #93a8b4; padding:17px 0 15px; }
.note-block span { color:#366d98; font-weight:900; font-size:10px; letter-spacing:.12em; }
.note-block p { font:700 clamp(19px,1.65vw,25px)/1.25 Georgia,serif; margin:9px 0 0; }
.notes-signature { font-size:10px; text-align:right; font-weight:900; letter-spacing:.06em; padding-top:23px; }

/* THE WORK */
.process-section { background:#0b131b; }
.process-head { display:grid; grid-template-columns:1fr .75fr; gap:10%; align-items:end; margin-bottom:45px; }
.process-head>p { font-size:20px; color:#c4d0d8; line-height:1.6; max-width:530px; }
.process-list { border-top:2px solid #7caed5; }
.process-item { display:grid; grid-template-columns:150px minmax(0,1fr) 58px; gap:23px; align-items:start; border-bottom:1px solid #496072; padding:26px 0; }
.process-status { display:inline-block; width:max-content; max-width:100%; padding:5px 9px; border:1px solid #a2bfd2; color:var(--blue); font-weight:900; font-size:10px; letter-spacing:.08em; }
.process-item strong { font-family:Impact,'Arial Black',sans-serif; font-size:27px; font-weight:900; letter-spacing:.03em; }
.process-item p { margin:8px 0 0; font-size:16px; color:#b9cad6; line-height:1.5; }
.process-index { font-family:Impact,'Arial Black',sans-serif; font-size:31px; text-align:right; color:#7e9bb0; }
.process-bottom { color:#a4b8c8; font-family:Georgia,serif; font-style:italic; font-size:16px; margin:30px 0 0; text-align:right; }

/* SUPPORT */
.support-section { background:#d8e5ee; color:#142532; }
.support-layout { display:grid; grid-template-columns:1fr .84fr; gap:9%; align-items:center; }
.support-layout .section-mark { margin-bottom:39px; }
.support-layout h2 em { color:#2f6c9e; }
.support-content p { font-size:18px; line-height:1.55; margin:0 0 21px; }
.support-content p:first-child { font-weight:800; font-size:23px; line-height:1.38; }
.action-ink { background:#102637; color:white; margin-top:5px; }
.action-ink:hover { background:#2c6492; }
.support-content .support-terms { margin:13px 0 0; font-size:12px; color:#4c6374; }

/* PEOPLE + CONTACT */
.people-section { background:#142330; }
.people-layout { display:grid; grid-template-columns:1.02fr .98fr; gap:10%; }
.people-list { padding-top:4px; }
.person { display:grid; grid-template-columns:43% minmax(0,1fr); gap:12px; align-items:baseline; padding:19px 0; border-bottom:1px solid var(--rule); }
.person span { font-size:11px; font-weight:900; letter-spacing:.10em; color:#aac0d0; }
.person strong { font-size:19px; font-weight:800; }
.contact { display:flex; justify-content:space-between; align-items:center; gap:25px; border-top:1px solid #6c8493; margin-top:66px; padding-top:30px; }
.contact .contact-kicker { color:var(--blue); font-size:11px; font-weight:900; letter-spacing:.12em; margin:0 0 8px; }
.contact p:not(.contact-kicker) { margin:0; color:#d5e1e9; font-size:16px; max-width:530px; line-height:1.45; }
.contact a { color:var(--blue); font-weight:900; text-transform:uppercase; font-size:13px; text-underline-offset:5px; white-space:nowrap; }

/* FOOTER */
.footer { background:#080e14; color:#a6b5c0; }
.footer-top { display:flex; justify-content:space-between; gap:25px; align-items:center; padding:41px 0 30px; border-bottom:1px solid #364656; }
.footer-logo { font-size:43px; color:var(--paper); }
.footer-top p { margin:0; font-size:11px; font-weight:900; letter-spacing:.12em; line-height:1.7; }
.footer-up { font-size:12px; font-weight:900; text-decoration:none; }
.footer-bottom { display:flex; flex-wrap:wrap; justify-content:space-between; align-items:start; gap:15px 25px; padding:23px 0 36px; font-size:10px; line-height:1.6; letter-spacing:.07em; font-weight:800; }
.footer-bottom details { position:relative; }
.footer-bottom summary { cursor:pointer; list-style:auto; }
.footer-bottom details ul { width:min(360px,calc(100vw - 48px)); position:absolute; z-index:10; right:0; bottom:100%; background:#e9e4d9; color:#172531; padding:19px 25px 19px 33px; border:1px solid #7c8c99; font-size:12px; font-weight:400; letter-spacing:0; box-shadow:0 10px 20px #0007; }
.footer-bottom li { margin:8px 0; }

@media (max-width:1080px) {
  .shell { width:min(calc(100% - 70px),var(--max)); }
  .cutpaste { font-size:clamp(62px,9.5vw,109px); }
  .hero-bottom-grid { max-width:900px; gap:30px; }
  .primary-nav { gap:17px; }
  .primary-nav a { font-size:10px; }
  .film-lead,.director-layout { gap:6%; }
  .local-note { grid-template-columns:40px 1fr; }
  .local-note a { grid-column:2; justify-self:start; }
}
@media (max-width:810px) {
  .shell { width:calc(100% - 54px); }
  .site-header,.nav-inner { min-height:69px; }
  .menu-toggle { width:46px; height:46px; display:flex; flex-direction:column; justify-content:center; align-items:center; gap:6px; cursor:pointer; background:transparent; color:white; border:1px solid #8295a4; padding:0; }
  .menu-toggle span { display:block; width:20px; height:2px; background:currentColor; }
  .has-js .primary-nav { display:none; }
  .primary-nav { position:absolute; top:69px; left:0; right:0; background:#07111b; padding:20px 28px 27px; border-bottom:1px solid #3c6074; flex-direction:column; align-items:stretch; gap:4px; }
  .primary-nav.is-open { display:flex; }
  .primary-nav a { font-size:13px; padding:15px 5px; }
  .primary-nav .nav-support { text-align:center; padding:15px; }
  .hero { min-height:790px; }
  .hero-content { padding-top:119px; }
  .hero-overline { font-size:10px; }
  .cutpaste { font-size:clamp(52px,10.4vw,82px); }
  .hero-bottom-grid { grid-template-columns:minmax(0,1fr) 155px; gap:23px; }
  .hero-synopsis { font-size:16px; }
  .action { font-size:11px; }
  .ticker-inner { flex-wrap:wrap; justify-content:center; gap:9px 15px; padding-block:13px; }
  .ticker-inner span:nth-child(even) { display:none; }
  .section { padding:76px 0 84px; }
  .film-lead,.director-layout,.process-head,.support-layout,.people-layout { grid-template-columns:1fr; gap:35px; }
  .director-layout .notes-side { width:min(100%,500px); justify-self:center; }
  .film-synopsis { padding-top:0; }
  .section-mark { margin-bottom:38px; }
  .photo-sequence { gap:9px; }
  .sequence-frame img { height:190px; }
  .sequence-frame figcaption { flex-direction:column; }
  .sequence-frame figcaption span { text-align:left; }
  .join-header { grid-template-columns:1fr; gap:25px; }
  .process-head>p { margin:0; }
}
@media (max-width:600px) {
  .shell { width:calc(100% - 36px); }
  .hero { min-height:705px; min-height:100svh; }
  .hero-background { background-position:56% center; }
  .hero-wash { background:linear-gradient(90deg,rgba(4,12,20,.95),rgba(4,12,20,.56)),linear-gradient(0deg,rgba(4,12,20,.93),transparent 50%); }
  .hero-content { padding:109px 0 24px; }
  .hero-overline { font-size:10px; line-height:1.4; gap:7px; letter-spacing:.07em; margin-bottom:30px; }
  .blue-tick { width:19px; flex-basis:19px; }
  .overline-star { font-size:12px; }
  .cutpaste { font-size:clamp(37px,11.15vw,64px); margin-bottom:27px; padding:7px 0 9px; }
  .cutpaste span:not(.dot) { width:.91em; }
  .hero-bottom-grid { grid-template-columns:minmax(0,1fr) 105px; gap:13px; }
  .hero-hook { font-size:29px; margin-bottom:11px; }
  .hero-synopsis { font-size:15px; line-height:1.47; }
  .photo-print { margin-top:7px; padding:4px 4px 6px; }
  .photo-print figcaption { font-size:9px; padding:6px 1px 0; letter-spacing:0; }
  .hero-actions { gap:8px; margin-top:26px; }
  .action { width:100%; min-height:49px; font-size:11px; letter-spacing:.02em; padding:12px 13px; }
  .quiet-link { font-size:12px; line-height:1.35; margin-top:17px; }
  .hero-footline { display:block; font-size:10px; margin-top:24px; }
  .hero-footline span { display:block; margin-top:7px; }
  .ticker-inner { flex-direction:column; padding-block:13px; font-size:10px; gap:6px; text-align:center; }
  .section { padding:65px 0 73px; }
  .section-mark { font-size:10px; gap:12px; margin-bottom:31px; }
  .section-mark .mark-rule { width:24px; }
  h2 { font-size:clamp(56px,14.6vw,85px); }
  .film-lead { margin-bottom:31px; }
  .film-synopsis { font-size:16px; line-height:1.56; }
  .film-synopsis p:first-child { font-size:19px; }
  .film-synopsis span { font-size:10px; }
  .photo-sequence { grid-template-columns:1fr; gap:20px; }
  .sequence-frame.two,.sequence-frame.three { margin-top:0; }
  .sequence-frame img { height:220px; }
  .sequence-frame figcaption { flex-direction:row; font-size:11px; padding:9px 0 0; }
  .sequence-frame figcaption span { text-align:right; }
  .image-context { font-size:11px; line-height:1.5; }
  .join-intro { font-size:20px; }
  .join-small { font-size:14px; }
  .application-grid { grid-template-columns:1fr; gap:27px; padding-inline:3px; }
  .flyer,.flyer-cast { transform:rotate(0deg); padding:22px 21px 23px; }
  .flyer h3 { font-size:clamp(51px,13.4vw,75px); margin:27px 0 18px; }
  .flyer p { font-size:16px; margin-bottom:25px; }
  .flyer-link { font-size:14px; }
  .open-status { font-size:9px; }
  .local-note { grid-template-columns:28px 1fr; gap:12px; margin-top:40px; }
  .local-burst { font-size:30px; }
  .local-note p { font-size:14px; }
  .local-note p strong { font-size:15px; }
  .director-statement p { font-size:16px; line-height:1.65; }
  .notes-side { padding:7px; transform:rotate(0deg); }
  .notes-inner { padding:20px 18px 15px; }
  .note-block p { font-size:21px; }
  .process-head>p { font-size:17px; }
  .process-item { grid-template-columns:88px minmax(0,1fr); gap:14px; padding:20px 0; }
  .process-index { display:none; }
  .process-item strong { font-size:21px; }
  .process-item p { font-size:14px; }
  .process-status { font-size:9px; }
  .process-bottom { font-size:14px; text-align:left; }
  .support-content p { font-size:16px; }
  .support-content p:first-child { font-size:20px; }
  .person { grid-template-columns:40% 1fr; gap:9px; }
  .person span { font-size:10px; }
  .person strong { font-size:16px; }
  .contact { flex-direction:column; align-items:start; margin-top:42px; }
  .contact a { white-space:normal; }
  .footer-top { display:grid; grid-template-columns:1fr 1fr; }
  .footer-up { grid-column:1/-1; }
  .footer-top p { font-size:10px; }
  .footer-bottom { display:grid; grid-template-columns:1fr; }
  .footer-bottom details ul { right:auto; left:0; }
}
@media (max-width:370px) {
  .hero-overline { font-size:9px; letter-spacing:0; }
  .cutpaste { font-size:9.7vw; }
  .hero-bottom-grid { grid-template-columns:minmax(0,1fr) 85px; gap:10px; }
  .hero-hook { font-size:24px; }
  .hero-synopsis { font-size:14px; }
  .photo-print figcaption { font-size:8px; }
  .footer-top { gap:16px; }
}
@media (prefers-reduced-motion:reduce) {
  *,*::before,*::after { scroll-behavior:auto!important; animation:none!important; transition:none!important; }
}

/* In a no-JavaScript browser, keep the full navigation visibly usable. */
@media (max-width:810px) {
  html:not(.has-js) .site-header { position:relative; background:#07111b; }
  html:not(.has-js) .nav-inner { flex-direction:column; align-items:stretch; gap:12px; padding:15px 0; }
  html:not(.has-js) .menu-toggle { display:none; }
  html:not(.has-js) .primary-nav { position:static; display:flex; flex-direction:row; flex-wrap:wrap; width:100%; padding:0; border:none; gap:8px 18px; }
  html:not(.has-js) .primary-nav a { padding:8px 0; }
  html:not(.has-js) .primary-nav .nav-support { padding:8px 12px; }
}

/* NOV 13 / HANDMADE PASS. Kept intentionally subtle: paper, misalignment, and real photographs. */
/* Tiny off-register line under the section numbers breaks up six repeated corporate-looking headers. */
.section-mark > span:first-child {position:relative; transform:rotate(-5deg); display:inline-block;}
.section-mark > span:first-child::after {content:""; position:absolute; height:2px; left:-2px; right:-2px; bottom:-7px; background:var(--blue); transform:rotate(3deg); opacity:.85;}
.join-section .section-mark > span:first-child::after,
.support-section .section-mark > span:first-child::after {background:#356e9e;}
/* Make the film images feel like snapshots spread out on an actual table rather than a three-column product gallery. */
.photo-sequence {padding:22px 12px 27px; gap:20px;}
.sequence-frame {background:#ece5d6; color:#172530; position:relative; padding:9px 9px 12px; box-shadow:7px 10px 0 rgba(0,0,0,.26); border:1px solid rgba(17,31,42,.55);}
.sequence-frame.one {transform:rotate(-1.4deg) translateY(12px);}
.sequence-frame.two {transform:rotate(2.1deg) translateY(32px);}
.sequence-frame.three {transform:rotate(-1deg) translateY(3px);}
.sequence-frame::before {content:""; position:absolute; z-index:3; width:68px; height:15px; top:-9px; left:calc(50% - 34px); background:rgba(138,187,229,.72); transform:rotate(-7deg); box-shadow:0 1px 1px #1114;}
.sequence-frame.two::before {left:13%; transform:rotate(11deg);}
.sequence-frame.three::before {left:auto; right:11%; transform:rotate(-11deg);}
.sequence-frame img {filter:saturate(.84) contrast(1.04);}
.sequence-frame figcaption {padding:12px 3px 3px; border-top:none;}
.sequence-frame figcaption b {color:#203343;}
.sequence-frame figcaption span {color:#344b59;}
/* Printed statement is slightly skewed; blue pencil-mark makes the handwritten feeling without pretending the page is handwritten. */
.notes-side {transform:rotate(-1.4deg); clip-path:polygon(.4% .5%,99.7% 0%,100% 99%,.2% 100%);}
.notes-inner {border:1px solid #193346; border-left:4px double #193346;}
.note-block:nth-of-type(3) p {text-decoration:underline; text-decoration-thickness:1px; text-decoration-color:#7caed5; text-underline-offset:6px;}
/* The actual recruitment flyers already have angled tape. Small offset keeps them related, not identical. */
.flyer-cast {margin-top:18px;}
.flyer-crew {margin-bottom:18px;}
/* The production section resembles a marked working list instead of a polished progress dashboard. */
.process-item {position:relative; padding-inline:13px;}
.process-item:nth-child(2) {background:rgba(138,187,229,.055); transform:rotate(-.3deg);}
.process-item:nth-child(3) {transform:rotate(.3deg);}
.process-status {border-style:dashed; transform:rotate(-3deg);}
.process-index {color:#5b829c;}
@media(max-width:810px) {
  .photo-sequence {gap:17px;}
  .sequence-frame.one {transform:rotate(-.8deg) translateY(4px);}
  .sequence-frame.two {transform:rotate(1.3deg) translateY(14px);}
  .sequence-frame.three {transform:rotate(-.8deg) translateY(3px);}
  .flyer-cast {margin-top:12px;}
}
@media(max-width:600px) {
  .photo-sequence {padding:18px 7px; gap:25px;}
  .sequence-frame.one {transform:rotate(-1.1deg);}
  .sequence-frame.two {transform:rotate(1.4deg);}
  .sequence-frame.three {transform:rotate(-.8deg);}
  .sequence-frame figcaption {flex-direction:column; gap:5px;}
  .sequence-frame figcaption span {text-align:left;}
  .notes-side {transform:rotate(-.35deg);}
  .flyer-cast,.flyer-crew {margin:0;}
  .process-item {padding-inline:3px; transform:none!important;}
}