/* The film's own imagery continues below the opening scene. */
body{background:#0b171c}
.site-header:not(.over-hero){background:#0b171cf5;color:#f6f0e3;border-color:#e6d6af26;backdrop-filter:blur(14px)}
.site-header:not(.over-hero) nav a:hover{color:#e9c68d}
main>section:not(.hero),footer{--ink:#f6f0e3;--body:#c2cdcb;--line:#d6cbb12b;--sea:#e1bd82;--red:#efbd8b;color:var(--ink)}
main>section:not(.hero) .button{background:#e1bd82;border-color:#e1bd82;color:#152229;border-radius:2px}
main>section:not(.hero) .button:hover{background:#f1d6ac;border-color:#f1d6ac}
main>section:not(.hero) .text-link{color:#f1dfc2}
main>section:not(.hero) .text-link:hover{color:#fff}
.section-art{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:-2;pointer-events:none}
.film-introduction,.story,.family-section{position:relative;isolation:isolate;overflow:clip;background:#0b171c;border:0}
.film-introduction::before,.story::before,.family-section::before{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none}
.film-introduction .section-art{object-position:center 45%}
.film-introduction::before{background:linear-gradient(90deg,#081315cf 0%,#081315b3 45%,#08131526 100%),linear-gradient(0deg,#0b171c,transparent 45%,#0b171c33)}
.film-introduction .hero-layout{min-height:820px;padding-block:110px;gap:12%;grid-template-columns:1.15fr .85fr}
.film-introduction .hero-copy{max-width:590px}
.film-introduction h2{font-size:clamp(56px,6vw,84px)}
.film-introduction .premise{font-size:clamp(27px,2.8vw,39px);line-height:1.35;margin-block:34px 24px;max-width:580px}
.film-introduction .film-credit,.film-introduction .hero-context{color:#c2cdcb}
.film-introduction .film-credit{margin-top:20px;margin-bottom:0}
.film-introduction .film-poster{width:min(100%,350px);transform:rotate(0);filter:drop-shadow(0 22px 35px #0007)}
.film-introduction .film-poster .image-button{outline:1px solid #e6d6af33;box-shadow:none}
.film-introduction .film-poster .image-action{background:#15252b;color:#eee4d1;padding:10px 14px}
.film-introduction .film-poster figcaption{color:#c2cdcb}
.story .section-art{object-position:40% center}
.story::before{background:linear-gradient(270deg,#081315ed 0%,#081315d4 28%,#08131580 52%,#08131510 76%),linear-gradient(0deg,#0b171c 0%,transparent 28%,transparent 84%,#0b171c55)}
.story-layout{display:flex;align-items:center;min-height:830px;padding-block:125px}
.story-copy{width:44%;max-width:570px;margin-left:auto}
.story-copy h2{font-size:clamp(56px,6vw,84px)}
.story-copy .lead{font-size:clamp(24px,2.1vw,29px);line-height:1.5;margin-bottom:28px}
.story-copy>p:not(.lead){color:#e0e5de;font-size:17px;line-height:1.85}
.story-copy .text-link{margin-top:14px}
.character-section{background:linear-gradient(#0b171c,#11242b);border:0}
.character-section .section{padding-block:110px 120px}
.character-section .section-intro{margin-bottom:54px}
.character-cards{gap:24px}
.character-card{background:transparent;border:0;border-radius:0;overflow:visible}
.character-card>.portrait,.character-card>.valeria-age-pair{border:1px solid #dcc8a63d;box-shadow:0 15px 30px #0002}
.character-card-copy{padding:25px 2px 0}
.character-card-copy h3{font-size:42px;color:#f6f0e3}
.character-card-copy p{color:#c2cdcb}
.age-panel+.age-panel{border-color:#d6cbb1a6}
.family-section .section-art{object-position:center 48%;opacity:1}
.family-section::before{background:linear-gradient(90deg,#0a191ee3,#0a191e9c),linear-gradient(0deg,#0b171c,transparent 40%,#11242bb3)}
.family-layout{display:grid;grid-template-columns:.75fr 1.25fr;gap:6%;align-items:center;padding-block:90px 120px}
.family-heading{text-align:left;max-width:360px}
.family-heading h2{font-size:clamp(48px,5vw,68px)}
.family-heading p{color:#d7ddd5}
.family-heading .family-instruction{color:#b2c2c0;max-width:270px;margin-top:24px}
.family-diagram{margin:0;width:100%;--avatar:120px}
.family-lines path{stroke:#c5af86;stroke-opacity:.65}
.family-avatar{border:3px solid #c6b18c;box-shadow:0 0 0 5px #0b1b2199,0 12px 30px #0005}
.family-person:hover .family-avatar,.family-person[aria-expanded=true] .family-avatar{box-shadow:0 0 0 3px #f1dfc2,0 10px 26px #0006}
.family-name,.family-relation{background:#10242bee}
.family-name{color:#f6f0e3}
.family-relation{color:#dec8a5}
.family-info{background:#142b34;border-color:#bda57b77;box-shadow:0 18px 45px #0009}
.family-info strong{color:#f4e7d0}.family-info p{color:#e0e5de}
.footage{background:#081318;border-block:1px solid #d6cbb11f}
.footage .section{padding-block:110px 120px}
.scene{grid-template-columns:2.4fr 1fr;gap:48px;padding-block:44px;border-color:#d6cbb12b}
.scene video{border:1px solid #d6cbb133;border-radius:2px;box-shadow:0 18px 45px #0004}
.scene-copy h3{font-size:28px;color:#f6f0e3}
.scene-copy .clip-meta{color:#b3c3c5}
.making{background:#191d1c;border:0}
.making-scene{position:relative;isolation:isolate;min-height:480px;display:flex;align-items:flex-end;overflow:hidden}
.making-scene>img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center 5%;z-index:-2}
.making-scene::after{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(90deg,#101b1ee6,transparent 78%),linear-gradient(0deg,#191d1c,transparent 65%)}
.making-scene>.wrap{padding-block:85px 50px}
.making-scene h2{font-size:clamp(58px,6.5vw,88px);max-width:50%;margin-bottom:22px}
.making-scene .production-byline{margin:0;color:#e3d8c3}
.production-content{padding-top:45px}
.production-notes{gap:10%;margin-bottom:80px}
.production-notes h3{color:#f3e8d6}
.production-notes p{color:#cdd0c7}
.character-development{display:grid;grid-template-columns:1.45fr .65fr;gap:55px;align-items:center;border-top:1px solid #d6cbb129;padding-top:64px}
.character-sheet .image-button{border:1px solid #c6b18c50;border-radius:2px;box-shadow:0 18px 38px #0003}
.character-sheet .image-action{background:#17272ee8;color:#f6f0e3;box-shadow:none;border:1px solid #d6cbb144}
.character-sheet figcaption{color:#adb9b4}
.sheet-explanation{display:block;margin:0}.sheet-explanation h3{color:#f3e8d6}
.join-section{background:#0c1d24}
.join-scene{height:clamp(310px,38vw,570px);position:relative;overflow:hidden}
.join-scene img{width:100%;height:100%;object-fit:cover;object-position:center 43%}
.join-scene::after{content:"";position:absolute;inset:65% 0 0;background:linear-gradient(transparent,#0c1d24)}
.join{gap:11%;padding-top:70px;padding-bottom:110px}
.join-copy .lead{color:#e8e5d9}
.contact-email,.copy{color:#e8c48e}
.join form{background:#142a33;border:1px solid #d6cbb133;border-radius:3px;padding:36px}
.join form h3{color:#f6f0e3}
.join label span{color:#b2c3c6}
.join input,.join select,.join textarea{background:#0b1c23;border-color:#6b858a;color:#f6f0e3;color-scheme:dark}
.join input:focus,.join select:focus,.join textarea:focus{outline-color:#e1bd82}
.join .form-note{color:#bac9ca}
.join #contact-status{color:#bfe3ca}
.join details{border-color:#d6cbb133}
.join summary span{color:#e1bd82}
footer{background:#081318;border-color:#d6cbb12b}
footer .brand{color:#f6f0e3}footer p{color:#b3c3c5}
footer nav{color:#d7ddd5}.copyright{border-color:#d6cbb12b}
@media(min-width:1600px){.story-layout{min-height:920px}.film-introduction .hero-layout{min-height:900px}}
@media(max-width:1100px){
  .film-introduction .hero-layout{gap:8%;min-height:720px;padding-block:90px}
  .story-copy{width:48%}.story-layout{min-height:760px}
  .character-card-copy{padding:26px 2px 0}
  .family-layout{grid-template-columns:.65fr 1.35fr;gap:3%}
  .family-diagram{--avatar:106px}
  .scene{grid-template-columns:1.9fr 1fr;gap:32px}
  .character-development{gap:34px;grid-template-columns:1.2fr .8fr}
}
@media(max-width:760px){
  .site-header nav{scrollbar-color:#587078 #11252d}
  .film-introduction .hero-layout{grid-template-columns:1fr;gap:44px;min-height:0;padding-block:70px}
  .film-introduction::before{background:linear-gradient(90deg,#081315d1,#08131599),linear-gradient(0deg,#0b171c,transparent 65%)}
  .film-introduction .section-art{object-position:38% center}
  .film-introduction .hero-copy{max-width:100%}
  .film-introduction h2,.story-copy h2{font-size:56px}
  .film-introduction .premise{font-size:29px;margin-block:28px 22px}
  .film-introduction .film-poster{width:min(75%,300px);justify-self:center}
  .story .section-art{height:420px;object-position:30% center}
  .story::before{background:linear-gradient(0deg,#0b171c 0%,#0b171c 53%,#0b171c12 91%)}
  .story-layout{min-height:0;padding-block:330px 70px}
  .story-copy{width:100%;max-width:100%;margin-left:0}.story-copy .lead{font-size:24px}
  .story-copy>p:not(.lead){font-size:16px;line-height:1.8}
  .character-section .section,.footage .section{padding-block:70px}
  .character-section .section-intro{margin-bottom:34px}
  .character-cards{gap:34px 22px}
  .character-card-copy{padding:22px 2px 0}
  .character-card-copy h3{font-size:38px}
  .family-layout{grid-template-columns:1fr;gap:30px;padding-block:65px 80px}
  .family-heading{max-width:100%}.family-heading h2{font-size:48px}
  .family-heading .family-instruction{max-width:none;margin-top:12px}
  .family-diagram{--avatar:106px;width:min(100%,540px);margin:0 auto;height:510px}
  .family-section .section-art{object-position:32% center}
  .family-section::before{background:linear-gradient(#11242be3,#0a191eb0,#0b171c)}
  .scene{grid-template-columns:1fr;gap:26px;padding-block:34px}
  .scene-copy h3{font-size:26px}
  .making-scene{min-height:400px}
  .making-scene>img{object-position:62% center}
  .making-scene::after{background:linear-gradient(0deg,#191d1c,transparent 85%),linear-gradient(90deg,#101b1e99,transparent)}
  .making-scene>.wrap{padding-bottom:30px}
  .making-scene h2{font-size:56px;max-width:75%}
  .production-content{padding-top:30px;padding-bottom:70px}
  .production-notes{gap:30px;margin-bottom:42px}
  .character-development{grid-template-columns:1fr;gap:28px;padding-top:40px}
  .character-sheet .image-action{background:#17272e;border:0}
  .join-scene{height:340px}.join-scene img{object-position:center 43%}
  .join{padding-block:40px 70px;gap:42px}
  .join form{padding:28px 22px}
}
@media(max-width:480px){
  .character-cards{gap:42px}.character-card-copy{padding:24px 2px 0}
  .family-diagram{--avatar:90px;height:460px}
  .making-scene h2{max-width:70%;font-size:52px}
  .join-scene{height:270px}
}
