/* Film pages — film/<page>/index.html (loaded after style.css) */

.film-body .nav { position: sticky; }
.film-body .nav-toggle { display: none; }
@media (max-width: 860px) {
  .film-body .film-nav { position: static; flex-direction: row; gap: 18px; opacity: 1; transform: none; pointer-events: auto; background: none; padding: 0; margin-left: auto; backdrop-filter: none; }
  .film-body .film-nav a { font: 400 14px/1 var(--sans); color: var(--muted); padding: 0; border: 0; }
}
@media (max-width: 520px) { .film-body .film-nav a:first-child { display: none; } }
@media (max-width: 420px) { .film-body .film-nav a:nth-child(2) { display: none; } }
.film-body .brand { white-space: nowrap; }

/* Hero */
.fh {
  position: relative; overflow: hidden; isolation: isolate;
  padding: clamp(40px, 6vw, 90px) max(var(--gutter), calc((100vw - var(--maxw)) / 2 + var(--gutter))) clamp(50px, 7vw, 100px);
  display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); gap: clamp(30px, 5vw, 80px); align-items: center;
}
.fh-ambient { position: absolute; inset: -20% -40%; z-index: -1; background-size: cover; background-position: center; filter: blur(90px) saturate(1.3); opacity: .38; -webkit-mask-image: linear-gradient(#000 55%, transparent); mask-image: linear-gradient(#000 55%, transparent); }
.fh-art { margin: 0; justify-self: center; animation: rise 1s var(--ease) both; }
.fh-art img { width: 100%; height: 100%; object-fit: contain; border-radius: 4px; box-shadow: 0 0 0 1px rgba(230, 200, 142, .35), 0 0 0 9px #0b0c10, 0 0 0 10px rgba(230, 200, 142, .2), 0 60px 120px -40px #000; }
.fh-copy { animation: rise 1s .15s var(--ease) both; }
.fh h1 { font-size: clamp(46px, 6vw, 92px); }
.fh-artist { font: italic 500 clamp(24px, 2.4vw, 32px)/1.2 var(--serif); color: var(--gold-2); margin: 14px 0 4px; }
.fh-place { color: var(--muted); margin: 0; font-size: 15px; }
.fh-hook { margin: 26px 0 32px; font-size: 18px; color: rgba(243, 236, 224, .85); }
.fh-actions { display: flex; gap: 12px; flex-wrap: wrap; }
@media (max-width: 860px) {
  .fh { grid-template-columns: 1fr; }
}
/* Width follows the painting's ratio so tall works never exceed the screen height */
.fh-art { width: min(100%, calc(76vh * var(--r, 1))); }
@media (max-width: 860px) { .fh-art { width: min(100%, calc(60vh * var(--r, 1))); } }

/* Player */
.film-watch { max-width: var(--maxw); margin: 0 auto; padding: 0 var(--gutter) clamp(70px, 9vw, 120px); scroll-margin-top: 90px; }
.player { position: relative; aspect-ratio: 16 / 9; border-radius: 18px; overflow: hidden; background: #000; box-shadow: 0 60px 140px -40px #000, 0 0 0 1px rgba(255, 255, 255, .06); cursor: pointer; }
.player > img { width: 100%; height: 100%; object-fit: cover; filter: brightness(.55); transition: transform 1.2s var(--ease), filter .6s; }
.player:hover > img { transform: scale(1.03); filter: brightness(.68); }
.player iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.player-note { position: absolute; left: 0; right: 0; top: calc(50% + 64px); text-align: center; margin: 0; font-size: 14px; letter-spacing: .06em; color: var(--muted); }

/* Facts + story */
.film-main { max-width: var(--maxw); margin: 0 auto; padding: 0 var(--gutter) clamp(90px, 11vw, 150px); display: grid; grid-template-columns: 320px minmax(0, 1fr); gap: clamp(40px, 7vw, 120px); align-items: start; }
.film-facts { position: sticky; top: 100px; }
.film-facts dl { margin: 0 0 26px; }
.film-facts dl div { display: grid; grid-template-columns: 100px 1fr; gap: 12px; padding: 12px 0; border-bottom: 1px solid var(--line); font-size: 14.5px; }
.film-facts dt { color: var(--muted); }
.film-facts dd { margin: 0; }
.film-story { max-width: 720px; }
.film-story h2 { font-size: clamp(30px, 3vw, 42px); margin: 46px 0 18px; }
.film-story p { font: 400 clamp(19px, 1.6vw, 22px)/1.62 var(--serif); color: rgba(243, 236, 224, .9); margin: 0 0 1.1em; }
.film-story > p.eyebrow { font: 500 12px/1 var(--sans); color: var(--gold); margin-bottom: 26px; }
.film-story p:first-of-type:not(.eyebrow)::first-letter, .film-story .eyebrow + p::first-letter { float: left; font-size: 4.4em; line-height: .82; padding: 6px 10px 0 0; color: var(--gold-2); }
.film-story blockquote { margin: 50px 0 0; padding: 30px 0 0; border-top: 1px solid var(--line); font: italic 500 clamp(26px, 2.6vw, 36px)/1.3 var(--serif); color: var(--gold-2); }
@media (max-width: 900px) {
  .film-main { grid-template-columns: 1fr; }
  .film-facts { position: static; }
}

/* Shop */
.film-shop .section-head h2 { font-size: clamp(40px, 5.4vw, 80px); }
.sizes { display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 8px; }
.sizes button { text-align: left; padding: 12px 14px; border-radius: 14px; border: 1px solid var(--line); transition: all .3s; }
.sizes button b { display: block; font-weight: 600; font-size: 14.5px; }
.sizes button small { color: var(--muted); font-size: 12px; }
.sizes button:hover:not(:disabled) { border-color: #1d1915; }
.sizes button.on { background: #1d1915; color: var(--paper); border-color: #1d1915; }
.sizes button.on small { color: rgba(243, 236, 224, .7); }
.sizes button:disabled { opacity: .45; cursor: not-allowed; }
.kit-teaser { margin-top: 26px; display: flex; gap: 16px; align-items: center; padding: 14px; border-radius: 16px; background: var(--paper-2); }
.kit-teaser img { width: 64px; height: 64px; object-fit: cover; border-radius: 10px; filter: grayscale(1) contrast(1.3) brightness(1.25); }
.kit-teaser b { display: block; font-size: 15px; }
.kit-teaser span { font-size: 13.5px; color: var(--muted); }

/* More */
.film-more { padding-bottom: clamp(70px, 9vw, 120px); }
.film-pager { max-width: var(--maxw); margin: 50px auto 0; padding-inline: var(--gutter); display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.film-pager a { padding: 22px 24px; border: 1px solid var(--line); border-radius: 16px; font: 500 clamp(20px, 2vw, 28px)/1.15 var(--serif); transition: background .3s; }
.film-pager a:last-child { text-align: right; }
.film-pager a:hover { background: rgba(255, 255, 255, .05); }
.film-pager small { display: block; font: 500 11px/1 var(--sans); letter-spacing: .18em; text-transform: uppercase; color: var(--gold); margin-bottom: 10px; }