@charset "UTF-8";
:root {
  --forest: #102823; --deep: #0b1e1a; --cream: #f3eee3; --paper: #e9dfca;
  --gold: #deb77d; --ink: #19372e; --muted: #52635a; --rule: #d3d3c4;
  --serif: Georgia, 'Times New Roman', serif;
  --sans: 'Avenir Next', Avenir, 'Segoe UI', sans-serif;
  color-scheme: light; font-family: var(--sans); font-size: 16px;
  color: var(--ink); background: var(--cream); font-synthesis: none;
}
* { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: 28px; }
body { margin: 0; }
a { color: inherit; text-decoration: none; }
button { font: inherit; }
img { display: block; max-width: 100%; height: auto; }
h1,h2,h3,p,figure,blockquote { margin: 0; }
h1,h2 { font-family: var(--serif); font-weight: 400; letter-spacing: -.045em; line-height: 1.1; }
h2 { font-size: clamp(2.4rem, 3.9vw, 3.8rem); }
h3 { font-family: var(--serif); font-weight: 400; font-size: 1.65rem; letter-spacing: -.025em; line-height: 1.25; }
em { font-weight: 400; }
p { line-height: 1.75; }
a,button { -webkit-tap-highlight-color: transparent; }
a:focus-visible,button:focus-visible { outline: 2px solid currentColor; outline-offset: 6px; }
.wrap { width: min(1344px, calc(100% - 96px)); margin-inline: auto; }
.section { padding-block: 100px; }
.eyebrow { font-size: .75rem; line-height: 1.55; letter-spacing: .16em; text-transform: uppercase; font-weight: 600; color: var(--gold); }
.eyebrow.dark { color: #647057; }
.text-link { display: inline-flex; align-items: center; gap: 24px; font-size: .9375rem; font-weight: 500; border-bottom: 1px solid #777c64; padding-block: 10px; }
.text-link:hover { color: var(--gold); }
.ink-link:hover { color: var(--ink); border-color: var(--ink); }
.button { display: inline-flex; align-items: center; justify-content: space-between; gap: 24px; padding: 15px 21px; min-height: 50px; background: var(--gold); color: var(--deep); border: 1px solid var(--gold); border-radius: 2px; font-size: .875rem; font-weight: 600; line-height: 1.45; transition: background .2s; }
.button:hover { background: #ecd0a3; }
.dark-button { background: var(--forest); color: var(--cream); border-color: var(--forest); }
.dark-button:hover { background: #254c3f; }
.skip-link { position: absolute; top: -100px; left: 20px; background: var(--cream); color: var(--ink); padding: 12px; z-index: 20; }
.skip-link:focus { top: 12px; }
.site-header { background: var(--forest); color: var(--cream); border-bottom: 1px solid #ffffff20; }
.header-inner { padding-block: 23px; width: min(1440px, calc(100% - 96px)); margin-inline: auto; display: flex; justify-content: space-between; align-items: center; gap: 30px; }
.brand { display: flex; align-items: center; gap: 12px; flex-shrink: 0; font-family: var(--serif); font-size: 1.42rem; letter-spacing: -.035em; }
.brand img { width: 31px; height: 39px; }
.brand sup { font: 400 .75rem var(--sans); vertical-align: super; margin-left: 3px; }
.site-header nav { display: flex; gap: 28px; font-size: .875rem; align-items: center; flex-wrap: wrap; }
.site-header nav a { padding-block: 6px; border-bottom: 1px solid transparent; }
.site-header nav a:last-child { color: var(--gold); }
.site-header nav a:hover { color: var(--gold); }
.site-header nav [aria-current] { border-color: var(--gold); }
.hero { background: var(--forest); color: var(--cream); }
.home-hero { display: grid; grid-template-columns: .85fr 1.35fr; gap: 48px; align-items: center; padding-block: 54px 44px; }
.hero-copy { min-width: 0; }
.hero h1 { font-size: clamp(3.2rem, 5vw, 5.1rem); margin-block: 22px 25px; letter-spacing: -.05em; line-height: 1.02; }
.hero h1 em { color: var(--gold); }
.hero-summary { font-size: 1.0625rem; color: #cbd8ce; max-width: 34ch; }
.hero-actions { display: flex; align-items: center; gap: 24px; flex-wrap: wrap; margin-top: 30px; }
.hero-actions .text-link { color: var(--gold); font-size: .875rem; }
.hero-artwork { width: 100%; min-width: 0; }
.splash { position: relative; width: 100%; aspect-ratio: 1672 / 941; background: #17130f; border: 1px solid #ecd0a34d; }
.splash-art { width: 100%; height: 100%; object-fit: contain; }
.parchment-logo { position: absolute; left: 8.7%; top: 25.1%; width: 24%; height: 43%; display: flex; align-items: center; justify-content: center; }
.parchment-logo>img, .parchment-logo>div { position: absolute; width: 100%; height: 100%; object-fit: contain; }
.parchment-logo svg { width: 100%; height: 100%; --ink: #211b13; --shimmer: #765224; --paper: #e8cc93; overflow: visible; }
.parchment-logo>img { visibility: visible; }
.parchment-logo[data-playing="true"]>img { visibility: hidden; }
#animated-logo { visibility: hidden; }
.parchment-logo[data-playing="true"] #animated-logo { visibility: visible; }
.art-tm { position: absolute; font-family: Arial,sans-serif; color: #f7f1df; font-size: clamp(4px, .45vw, 10px); line-height: 1; }
.art-tm-header { left: 55.1%; top: 19.4%; }
.art-tm-title { left: 64.7%; top: 35.7%; }
/* Controls are in normal document flow, outside the artwork. */
.art-controls { display: flex; justify-content: space-between; align-items: center; gap: 14px; flex-wrap: wrap; padding-top: 16px; min-height: 56px; color: #d4dcd0; }
.art-controls>span { font-family: var(--serif); font-size: 1rem; font-style: italic; }
.art-controls button { background: transparent; border: 1px solid #d4dcd060; border-radius: 2px; color: var(--cream); padding: 10px 13px; min-height: 44px; font-size: .8125rem; cursor: pointer; }
.art-controls button:hover { background: #ffffff0c; }
.art-controls button span { margin-left: 8px; }
.hero-foot { padding-block: 20px; border-top: 1px solid #ffffff24; display: flex; justify-content: space-between; gap: 24px; color: #bacabf; font-size: .8125rem; }
.home-vision { display: grid; grid-template-columns: 1.1fr 1fr; gap: 9%; }
.home-vision h2 { margin-top: 24px; }
.home-vision h2 em { color: #60715b; }
.home-vision>div+div { padding-top: 30px; }
.lead { font-family: var(--serif); font-size: 1.6rem; line-height: 1.45; color: var(--ink); letter-spacing: -.02em; }
.home-vision p:not(.lead):not(.eyebrow) { color: var(--muted); font-size: 1rem; margin-top: 18px; }
.home-vision .text-link { margin-top: 19px; }
.home-paths { display: grid; grid-template-columns: repeat(3,1fr); gap: 44px; padding-bottom: 100px; }
.path-card { border-top: 1px solid var(--rule); padding-top: 27px; display: flex; flex-direction: column; }
.chapter-number { font-family: var(--serif); font-size: 2.25rem; font-style: italic; color: #7b8b70; }
.path-card h3 { margin-block: 22px 15px; }
.path-card p { color: var(--muted); font-size: .9375rem; }
.card-link { padding-top: 25px; margin-top: auto; display: flex; gap: 20px; justify-content: space-between; font-size: .875rem; }
.path-card:hover { border-color: var(--ink); }
.path-card:hover .card-link { text-decoration: underline; text-underline-offset: 5px; }
.page-intro { background: var(--forest); color: var(--cream); padding-block: 32px 66px; }
.back-link { display: inline-flex; gap: 15px; color: #c1cec4; font-size: .8125rem; margin-bottom: 38px; }
.back-link:hover { color: var(--gold); }
.back-link span { color: #889e8f; }
.page-intro h1 { font-size: clamp(3rem, 5.7vw, 5.5rem); margin-block: 22px 26px; max-width: 20ch; line-height: 1.05; }
.page-intro h1 em { color: var(--gold); }
.page-summary { max-width: 61ch; font-size: 1.125rem; line-height: 1.7; color: #c4d3c7; }
.editorial-section { display: grid; grid-template-columns: 1fr 1.1fr; gap: 12%; }
.section-aside h2 { margin-top: 24px; }
.section-aside h2 em, .section-heading em, .next-page em { color: #60715b; }
.prose { padding-top: 32px; }
.prose p { margin-bottom: 23px; color: var(--muted); font-size: 1rem; }
.prose .lead { font-size: 1.65rem; color: var(--ink); margin-bottom: 28px; }
.prose p:last-child { margin-bottom: 0; }
.quote-band { background: var(--paper); padding-block: 70px; text-align: center; }
.quote-band .eyebrow { color: var(--muted); }
.quote-band blockquote { font-family: var(--serif); font-size: clamp(2.5rem, 4.6vw, 4.25rem); letter-spacing: -.035em; line-height: 1.16; margin-top: 25px; }
.quote-band blockquote em { color: #60715b; }
.section-heading { display: flex; justify-content: space-between; gap: 40px; }
.section-heading h2 { width: 48%; }
.three-columns { display: grid; grid-template-columns: repeat(3,1fr); gap: 46px; margin-top: 57px; }
.three-columns article { border-top: 1px solid var(--rule); padding-top: 24px; }
.three-columns h3 { margin-block: 22px 18px; }
.three-columns p { color: var(--muted); font-size: 1rem; margin-top: 15px; }
.reading-note { padding: 30px 34px; background: var(--paper); display: grid; grid-template-columns: .7fr 1.3fr; gap: 35px; border-left: 2px solid #859176; }
.reading-note h3 { font-size: 1.5rem; }
.reading-note p { color: var(--muted); font-size: .9375rem; }
.next-page { padding-block: 80px 95px; display: flex; align-items: center; justify-content: space-between; gap: 40px; }
.next-page h2 { margin-top: 22px; font-size: clamp(2.25rem, 3.6vw, 3.5rem); }
.architecture { background: var(--deep); color: var(--cream); }
.architecture-inner { display: grid; grid-template-columns: 1fr 1.1fr; gap: 12%; }
.architecture h2 { margin-block: 25px 26px; }
.architecture h2 em { color: var(--gold); }
.architecture-intro>p:not(.eyebrow) { color: #baccc0; font-size: 1rem; max-width: 39ch; }
.architecture-intro>.architecture-note { font-family: var(--serif); font-style: italic; margin-top: 34px; color: var(--gold); }
.architecture-stack { list-style: none; padding: 0; margin: 0; display: grid; gap: 14px; }
.architecture-stack li { display: flex; gap: 22px; border: 1px solid #cfdfcb40; padding: 27px 29px; background: #ffffff03; position: relative; }
.architecture-stack li+li::before { content: ''; position: absolute; top: -15px; left: 40px; height: 14px; border-left: 1px solid #cfdfcb55; }
.layer-number { color: var(--gold); font-family: var(--serif); font-style: italic; font-size: 1.0625rem; }
.layer-label { font-size: .75rem!important; color: var(--gold)!important; text-transform: uppercase; letter-spacing: .12em; margin-bottom: 9px; line-height: 1.5!important; }
.architecture-stack h3 { margin-bottom: 10px; }
.architecture-stack h3 sup { font: 400 .75rem var(--sans); margin-left: 3px; }
.architecture-stack p { font-size: .9375rem; line-height: 1.7; color: #bccfc2; }
.architecture-stack .active-layer { background: #dcc19916; border-color: #d7ba8570; }
.steps-section { padding-bottom: 20px; }
.steps-section .section-heading { border-top: 1px solid var(--rule); padding-top: 40px; }
.experience-steps { list-style: none; margin: 45px 0 0; padding: 0; display: grid; grid-template-columns: repeat(3,1fr); gap: 43px; }
.experience-steps li { display: flex; gap: 22px; }
.experience-steps li>span { font-family: var(--serif); font-style: italic; font-size: 1.5rem; color: #697b5d; }
.experience-steps h3 { font-size: 1.5rem; margin-bottom: 16px; }
.experience-steps p { font-size: 1rem; color: var(--muted); }
.two-notes { display: grid; grid-template-columns: 1fr 1fr; gap: 10%; }
.two-notes article { border-top: 1px solid var(--rule); padding-top: 28px; }
.two-notes h3 { margin-block: 20px 18px; font-size: 1.9rem; }
.two-notes p:not(.eyebrow) { font-size: 1rem; color: var(--muted); margin-top: 18px; }
.principles-layout { display: grid; grid-template-columns: .65fr 1.35fr; gap: 12%; }
.principles-layout aside>p:last-child { font-size: 1rem; color: var(--muted); margin-top: 26px; }
.side-quote { font-family: var(--serif); font-size: 2.5rem; line-height: 1.18; letter-spacing: -.035em; margin-top: 26px; }
.side-quote em { color: #60715b; }
.long-principles article { border-top: 1px solid var(--rule); display: flex; gap: 27px; padding-block: 40px 48px; }
.long-principles article:first-child { padding-top: 28px; }
.long-principles article:last-child { padding-bottom: 0; }
.principle-number { color: var(--muted); font-size: .875rem; margin-top: 9px; }
.long-principles h2 { font-size: 2.8rem; margin-bottom: 23px; }
.long-principles h2 em { color: #60715b; }
.long-principles .lead { font-size: 1.35rem; color: var(--ink); margin-bottom: 22px; }
.long-principles p { color: var(--muted); font-size: 1rem; margin-top: 18px; }
.acknowledgments h2 { margin-block: 24px; font-size: 2.75rem; }
.acknowledgments h2 em { color: #60715b; }
.closing-statement { border-top: 1px solid var(--rule); text-align: center; padding-block: 64px 100px; }
.closing-statement h2 { font-size: clamp(2.5rem, 4.5vw, 4.3rem); margin-block: 26px 34px; }
.closing-statement h2 em { color: #60715b; }
.site-footer { background: var(--deep); color: var(--cream); }
.footer-main { padding-block: 72px 55px; display: grid; grid-template-columns: 1.2fr 1fr; gap: 12%; }
.footer-main h2 { margin-top: 24px; font-size: clamp(2.5rem, 3.8vw, 3.7rem); }
.footer-main h2 em { color: var(--gold); }
.footer-credit { display: flex; align-items: center; gap: 28px; }
.footer-logo { flex-shrink: 0; width: 110px; position: relative; }
.footer-logo img { width: 100%; filter: brightness(0) invert(.88) sepia(.2); }
.footer-logo>span { position: absolute; right: -8px; top: 10px; font-size: .75rem; }
.footer-credit p { font-size: .875rem; line-height: 1.8; color: #bacabf; }
.footer-credit strong { font-weight: 500; color: var(--cream); }
.footer-navigation { display: flex; gap: 26px; flex-wrap: wrap; font-size: .875rem; color: #d1dbd2; padding-bottom: 28px; }
.footer-navigation a:hover { color: var(--gold); }
.footer-bottom { padding-block: 25px; border-top: 1px solid #ffffff24; display: flex; align-items: center; justify-content: space-between; gap: 24px; font-size: .75rem; color: #bacabf; }
.footer-bottom a { font-size: .875rem; }
.footer-bottom a span { margin-left: 12px; }
@media(min-width:1000px) and (max-height:800px) {
  .home-hero { padding-block: 32px; }
  .hero h1 { font-size: clamp(3rem, 4.5vw, 4.6rem); margin-block: 17px 20px; }
  .hero-actions { margin-top: 24px; }
  .hero-artwork { max-width: min(100%, calc((100svh - 260px) * 1672 / 941)); justify-self: end; }
}
@media(min-width:1700px) { .home-hero { padding-block: 72px 64px; } }
@media(max-width:1100px) {
  .wrap,.header-inner { width: calc(100% - 64px); }
  .site-header nav { gap: 20px; }
  .home-hero { gap: 30px; grid-template-columns: .9fr 1.1fr; }
  .hero h1 { font-size: clamp(3rem, 5vw, 4rem); }
  .hero-actions { gap: 16px; }
  .art-controls { align-items: start; }
  .section { padding-block: 80px; }
  .home-vision,.editorial-section,.architecture-inner,.principles-layout { gap: 7%; }
  .home-paths,.three-columns,.experience-steps { gap: 28px; }
  .footer-main { gap: 7%; }
  .footer-credit { display: block; }
  .footer-logo { width: 90px; margin-bottom: 24px; }
  .long-principles h2 { font-size: 2.4rem; }
}
@media(max-width:850px) {
  .header-inner { gap: 20px; flex-wrap: wrap; padding-block: 20px; }
  .site-header nav { width: 100%; justify-content: space-between; gap: 12px; border-top: 1px solid #ffffff20; padding-top: 13px; }
  .home-hero { grid-template-columns: 1fr; padding-block: 36px 30px; gap: 34px; }
  .hero h1 { font-size: clamp(3rem, 7.8vw, 4rem); line-height: 1.1; }
  .hero h1 br:nth-of-type(2) { display: none; }
  .hero h1 em::before { content: ' '; }
  .hero-summary { max-width: 46ch; }
  .hero-artwork { width: min(100%, 600px); justify-self: center; }
  .art-controls { align-items: center; }
  .hero-foot { font-size: .75rem; }
  .editorial-section { grid-template-columns: 1fr 1.2fr; }
  .home-vision h2 { font-size: 2.4rem; }
  .three-columns,.experience-steps { grid-template-columns: 1fr; gap: 34px; }
  .three-columns h3 { margin-top: 17px; }
  .experience-steps li { padding-top: 25px; border-top: 1px solid var(--rule); }
  .principles-layout { grid-template-columns: 1fr 1.7fr; }
  .side-quote { font-size: 2rem; }
}
@media(max-width:600px) {
  .wrap,.header-inner { width: calc(100% - 40px); }
  .header-inner { padding-block: 17px; }
  .brand { font-size: 1.35rem; }
  .brand img { width: 24px; height: 31px; }
  .site-header nav { gap: 7px 16px; justify-content: flex-start; font-size: .8125rem; }
  .site-header nav a { min-height: 35px; }
  .eyebrow { font-size: .75rem; letter-spacing: .115em; }
  .home-hero { gap: 30px; }
  .hero h1 { font-size: clamp(2.75rem, 9.6vw, 3.7rem); margin-block: 18px 22px; }
  .hero-summary { font-size: 1rem; }
  .hero-actions { margin-top: 23px; }
  .hero-actions .button { padding: 14px 16px; gap: 18px; }
  .art-controls { padding-top: 13px; gap: 10px; }
  .art-controls>span { font-size: .9375rem; }
  .art-controls button { font-size: .75rem; padding: 9px 10px; }
  .hero-foot { display: block; padding-block: 19px; }
  .hero-foot span { display: block; }
  .hero-foot span+span { margin-top: 6px; }
  .section { padding-block: 60px; }
  h2 { font-size: 2.4rem; }
  .home-vision,.editorial-section,.architecture-inner,.principles-layout,.two-notes { display: block; }
  .home-vision h2 { font-size: 2.25rem; line-height: 1.17; margin-top: 19px; }
  .home-vision>div+div { padding-top: 26px; }
  .lead { font-size: 1.45rem; }
  .home-paths { display: block; padding-bottom: 60px; }
  .path-card { padding-block: 26px 32px; }
  .path-card:last-child { padding-bottom: 0; }
  .path-card h3 { margin-block: 15px; }
  .chapter-number { font-size: 1.8rem; }
  .card-link { padding-top: 22px; }
  .page-intro { padding-block: 24px 46px; }
  .back-link { margin-bottom: 30px; }
  .page-intro h1 { font-size: clamp(2.65rem, 9.5vw, 3.6rem); margin-block: 21px 24px; }
  .page-summary { font-size: 1rem; }
  .section-aside h2 { margin-top: 20px; }
  .prose { padding-top: 29px; }
  .prose .lead { font-size: 1.5rem; }
  .quote-band { padding-block: 50px; }
  .quote-band blockquote { font-size: 2.45rem; }
  .section-heading { display: block; }
  .section-heading h2 { width: auto; margin-top: 22px; }
  .three-columns { margin-top: 35px; }
  .reading-note { display: block; padding: 26px 23px; }
  .reading-note p { margin-top: 16px; }
  .next-page { display: block; padding-block: 58px 64px; }
  .next-page h2 { font-size: 2.4rem; }
  .next-page .button { margin-top: 28px; }
  .architecture-stack { margin-top: 30px; }
  .architecture-stack li { padding: 24px 18px; gap: 16px; }
  .architecture-stack li+li::before { left: 26px; }
  .architecture-stack h3 { font-size: 1.45rem; }
  .architecture h2 { font-size: 2.5rem; }
  .experience-steps { margin-top: 30px; }
  .two-notes article+article { margin-top: 36px; }
  .two-notes h3 { font-size: 1.7rem; }
  .principles-layout aside { margin-bottom: 35px; }
  .side-quote { font-size: 2.4rem; }
  .long-principles article { padding-block: 30px 36px; gap: 16px; }
  .long-principles h2 { font-size: 2.35rem; }
  .long-principles .lead { font-size: 1.25rem; }
  .acknowledgments h2 { font-size: 2.5rem; }
  .closing-statement { padding-block: 52px 64px; }
  .closing-statement h2 { font-size: 2.4rem; }
  .footer-main { display: block; padding-block: 57px 36px; }
  .footer-main h2 { font-size: 2.65rem; }
  .footer-credit { display: flex; margin-top: 37px; gap: 25px; }
  .footer-logo { width: 84px; margin: 0; }
  .footer-credit p { font-size: .8125rem; }
  .footer-navigation { gap: 10px 21px; font-size: .8125rem; }
  .footer-navigation a { padding-block: 6px; }
  .footer-bottom { flex-wrap: wrap; gap: 14px; padding-block: 22px; }
  .footer-bottom>p:first-child { width: 100%; }
  .footer-bottom a { margin-left: auto; }
}
@media(prefers-reduced-motion:reduce) {
  html { scroll-behavior: auto; }
  *,*::before,*::after { transition: none!important; }
}

/* ── Film placard ────────────────────────────────────────────────────────
   A way into the films from the hero, sitting under the hero actions so it
   reads alongside the artwork rather than competing with it. The preview is
   muted, loops, and only starts once it is on screen and the viewer has not
   asked for less motion — the hero already carries an animation, and two
   things moving at once is one too many. */
.film-placard { display: inline-flex; align-items: center; gap: 16px; margin-top: 30px;
  padding: 10px 18px 10px 10px; border: 1px solid #d4dcd040; border-radius: 3px;
  background: #ffffff08; text-decoration: none; color: var(--cream);
  transition: background .2s, border-color .2s, transform .2s; }
.film-placard:hover, .film-placard:focus-visible { background: #ffffff14; border-color: var(--gold);
  transform: translateY(-1px); }
.film-placard:focus-visible { outline: 2px solid var(--gold); outline-offset: 3px; }
.placard-screen { position: relative; flex: none; width: 128px; aspect-ratio: 8 / 5;
  border-radius: 2px; overflow: hidden; background: var(--deep); display: block; }
.placard-video { width: 100%; height: 100%; object-fit: cover; display: block; }
/* A play mark so the panel reads as film even before the loop starts. */
/* The play mark sits beside the picture, in the label (never on the film). */
.placard-play { display: inline-block; width: 0; height: 0; margin-right: 8px; vertical-align: -1px;
  border-left: 9px solid var(--gold); border-top: 6px solid transparent;
  border-bottom: 6px solid transparent; opacity: .92; transition: opacity .2s; }
.film-placard:hover .placard-play { opacity: 1; }
.placard-text { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.placard-kicker { font-size: .75rem; line-height: 1.55; letter-spacing: .16em;
  text-transform: uppercase; font-weight: 600; color: var(--gold); }
.placard-title { font-family: var(--serif); font-size: 1.125rem; line-height: 1.3; }
.placard-meta { font-size: .8125rem; line-height: 1.45; color: #bacabf; }
@media (max-width: 720px) {
  .film-placard { width: 100%; }
  .placard-screen { width: 104px; }
}
@media (prefers-reduced-motion: reduce) {
  .film-placard, .film-placard:hover { transition: none; transform: none; }
}

/* The trailer: a hero film just under the opening. The frame keeps the
   film's own shape (16:10 here, 9:16 for the phone cut) and never crops it. */
.trailer-section { background: var(--deep); color: var(--cream); padding-block: 72px 80px; }
.trailer-heading { display: flex; justify-content: space-between; align-items: end; gap: 24px; flex-wrap: wrap; margin-bottom: 28px; }
.trailer-heading h2 em { color: var(--gold); }
.trailer-frame { position: relative; display: grid; place-items: center; }
.trailer-video { display: block; width: min(100%, calc(82vh * 1.6)); height: auto; max-height: 82vh; background: #000; border-radius: 3px; box-shadow: 0 24px 60px -28px rgba(0,0,0,.8); }
.trailer-video.is-vertical { width: min(100%, calc(82vh * .5625)); }
.trailer-video::cue { font-family: var(--sans); background: rgba(11,30,26,.82); }
@media (max-width: 850px) { .trailer-section { padding-block: 48px 56px; } }

/* Our own film controls, under the picture (site.js filmBar). John, 9 Oct 2026: "controls are to never appear on top of the video". */
.film-bar { display: flex; align-items: center; gap: 12px; margin: 12px auto 0; width: min(100%, 1280px); font-size: .875rem; color: var(--cream); font-variant-numeric: tabular-nums; }
.film-bar[hidden] { display: none; }
.fb-btn { background: transparent; color: var(--cream); border: 1px solid #d4dcd060; border-radius: 3px; padding: 7px 14px; min-width: 6em; font: inherit; cursor: pointer; }
.fb-btn:hover, .fb-btn:focus-visible { border-color: var(--gold); }
.fb-seek { flex: 1; min-width: 60px; accent-color: var(--gold); }