/* One restrained warm grade, shared by both lighter films and their posters. */
[data-film-preset="discovery"], [data-film-preset="botanical"], [data-film-preset="precision"], [data-film-preset="daylightlab"], [data-film-preset="sequence"], [data-film-preset="daylight"], [data-film-preset="microscope"] {
  --film-grade: saturate(.88) sepia(.12) contrast(.97) brightness(1.035);
}
[data-film-preset="discovery"] .film-media video,
[data-film-preset="discovery"] .film-poster,
[data-film-preset="botanical"] .film-media video,
[data-film-preset="botanical"] .film-poster,
[data-film-preset="precision"] .film-media video,
[data-film-preset="precision"] .film-poster,
[data-film-preset="daylightlab"] .film-media video,
[data-film-preset="daylightlab"] .film-poster,
[data-film-preset="sequence"] .film-media video,
[data-film-preset="sequence"] .film-poster,
[data-film-preset="daylight"] .film-media video,
[data-film-preset="daylight"] .film-poster,
[data-film-preset="microscope"] .film-media video,
[data-film-preset="microscope"] .film-poster { filter: var(--film-grade); }
:is([data-film-preset="discovery"], [data-film-preset="botanical"], [data-film-preset="precision"], [data-film-preset="daylightlab"], [data-film-preset="sequence"], [data-film-preset="daylight"], [data-film-preset="microscope"]) .film-shade {
  background: linear-gradient(180deg, rgba(38,30,23,.22), rgba(38,30,23,0) 30%, rgba(38,30,23,.06) 52%, rgba(38,30,23,.70));
}
[data-film-preset="discovery"] { --film-grade:saturate(.88) sepia(.12) contrast(.97) brightness(.96); }
.page-hero.dark-hero:is([data-film-preset="discovery"], [data-film-preset="botanical"], [data-film-preset="precision"], [data-film-preset="daylightlab"], [data-film-preset="sequence"], [data-film-preset="daylight"], [data-film-preset="microscope"]) .film-shade {
  background: linear-gradient(90deg, rgba(38,30,23,.69), rgba(38,30,23,.36) 43%, rgba(38,30,23,.10) 72%), linear-gradient(180deg, rgba(38,30,23,.38), transparent 28%, rgba(38,30,23,.48));
}
:is([data-film-preset="discovery"], [data-film-preset="botanical"], [data-film-preset="precision"], [data-film-preset="daylightlab"], [data-film-preset="sequence"], [data-film-preset="daylight"], [data-film-preset="microscope"]) .requests { background: rgba(35,30,25,.70); }
:is([data-film-preset="discovery"], [data-film-preset="botanical"], [data-film-preset="precision"], [data-film-preset="daylightlab"], [data-film-preset="sequence"], [data-film-preset="daylight"], [data-film-preset="microscope"]) .film-toggle { background: rgba(35,30,25,.48); }

.film-controls { display:flex; align-items:center; gap:8px; }
.xp-film-controls { position:absolute; right:var(--gutter); bottom:24px; z-index:5; }
.film-sound { color:#fff; background:rgba(35,30,25,.48); border:1px solid rgba(255,255,255,.5); border-radius:24px; height:40px; padding:0 16px; font-size:12px; backdrop-filter:blur(8px); }
.film-sound:focus-visible { outline:2px solid white; outline-offset:3px; }
.music-credit { font-size:11px; color:var(--muted); padding-top:20px; }
.music-credit a { text-decoration:underline; text-underline-offset:3px; }
/* On a film the credit hangs under the sound controls, right-aligned, on the footage. */
.film-controls:not(.xp-film-controls) { position:relative; }
.film-controls .music-credit { position:absolute; top:calc(100% + 8px); right:0; width:max-content; max-width:calc(100vw - 2 * var(--gutter)); margin:0; padding:0; text-align:right; font-size:12px; line-height:18px; color:rgb(255 255 255 / .85); text-shadow:0 1px 8px rgb(0 0 0 / .45); }
.film-controls .music-credit[hidden] { display:none; }
.film-controls .music-credit a { color:#fff; }
/* Private review page: uncropped footage with no readability overlay. */
.video-options { padding-top:32px; padding-bottom:72px; }
.video-options h1 { font-size:clamp(32px,3.7vw,50px); font-weight:400; line-height:1.08; letter-spacing:-.045em; margin:12px 0; }
.video-options .intro { color:var(--muted); max-width:900px; font-size:15px; line-height:1.6; }
.video-options .eyebrow { font-family:var(--mono); font-size:10px; letter-spacing:.08em; text-transform:uppercase; }
.compare-toolbar { display:flex; align-items:center; flex-wrap:wrap; gap:10px; margin:24px 0 20px; }
.compare-toolbar .btn { min-height:40px; padding:10px 17px; font-size:12px; }
.grade-control { margin-left:auto; display:flex; align-items:center; gap:8px; font-size:12px; }
.grade-control input { accent-color:#20201e; }
.compare-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:24px; }
.compare-panel { min-width:0; }
.compare-heading { display:flex; align-items:center; justify-content:space-between; gap:12px; margin-bottom:10px; }
.compare-heading label { font-family:var(--mono); font-size:11px; }
.compare-heading select { min-width:0; flex:1; margin-left:12px; background:white; border:1px solid var(--line); padding:10px 30px 10px 12px; font:inherit; font-size:13px; color:var(--ink); }
.compare-video { width:100%; aspect-ratio:16/9; object-fit:contain; display:block; background:#e9e7e2; }
[data-warm="true"] .compare-video, [data-warm="true"] .shot-track img { filter:saturate(.88) sepia(.12) contrast(.97) brightness(1.035); }
.compare-meta { display:flex; justify-content:space-between; align-items:center; gap:12px; margin:14px 0 8px; }
.compare-meta p { font-size:12px; color:var(--muted); }
.compare-meta .btn { font-size:12px; min-height:38px; padding:9px 15px; }
.compare-description { min-height:42px; font-size:13px; line-height:1.55; color:var(--muted); }
.shot-track { display:flex; overflow-x:auto; gap:6px; margin:14px 0 6px; padding-bottom:8px; }
.shot-track button { flex:0 0 84px; border:1px solid var(--line); padding:0; background:white; text-align:left; }
.shot-track img { width:82px; aspect-ratio:16/9; object-fit:cover; display:block; }
.shot-track span { display:block; font-family:var(--mono); font-size:9px; padding:4px 6px; }
.shot-track button[aria-current="true"] { border-color:#20201e; box-shadow:0 0 0 1px #20201e; }
.compare-timeline { display:flex; gap:14px; align-items:center; margin:20px 0 8px; }
.compare-timeline input { width:100%; accent-color:#242421; }
.compare-timeline output { font:11px var(--mono); white-space:nowrap; min-width:102px; }
.review-note { font-size:12px; line-height:1.6; color:var(--muted); }
.film-review-actions { margin-top:24px; border-top:1px solid var(--line); padding-top:20px; display:flex; align-items:center; justify-content:space-between; gap:24px; }
.film-review-actions p { font-size:13px; max-width:410px; }
.film-review-actions .btn-row { margin:0; flex-wrap:wrap; }
.review-credits { border-top:1px solid var(--line); margin-top:28px; padding-top:18px; font-size:12px; line-height:1.7; color:var(--muted); }
.review-credits a { text-decoration:underline; text-underline-offset:3px; }
.review-credits details { margin-top:12px; }
.review-credits ul { columns:2; padding:12px 0 0 18px; }
.compare-error { color:#9e3024; font-size:13px; }
@media(max-width:760px) {
 .video-options { padding-top:24px; }
 .compare-grid { grid-template-columns:1fr; gap:26px; }
 .grade-control { margin-left:0; width:100%; }
 .film-review-actions { align-items:flex-start; flex-direction:column; }
 .compare-description { min-height:0; }
 .review-credits ul { columns:1; }
}
body[data-page="video-options"] .video-options { padding-top:100px; }
body[data-page="video-options"] .video-options .eyebrow { margin-bottom:14px; }
@media(max-width:760px) { body[data-page="video-options"] .video-options { padding-top:88px; } }
.music-choice { display:flex; align-items:center; gap:8px; font-size:11px; }
.music-choice select { background:white; border:1px solid var(--line); font:inherit; color:var(--ink); height:40px; max-width:210px; padding:0 8px; }
@media(max-width:760px) { .music-choice { width:100%; } }
.film-controls .film-sound { width:auto; min-width:90px; flex-shrink:0; white-space:nowrap; display:block; }

.compare-frame { position:relative; }
.compare-frame .compare-video { cursor:pointer; }
.preview-play { position:absolute; left:50%; top:50%; transform:translate(-50%,-50%); padding:14px 22px; border:1px solid rgba(0,0,0,.12); border-radius:28px; color:#20201e; background:rgba(255,255,255,.94); box-shadow:0 2px 16px rgba(0,0,0,.12); font-family:inherit; font-size:14px; font-weight:500; white-space:nowrap; }
.preview-play[hidden] { display:none; }
.preview-play:focus-visible { outline:3px solid #366e5d; outline-offset:4px; }

.footage-library { margin-top:40px; padding-top:30px; border-top:1px solid var(--line); }
.footage-library h2 { font-size:28px; letter-spacing:-.035em; font-weight:400; margin-bottom:10px; }
.footage-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:24px; margin-top:24px; }
.footage-grid article { min-width:0; }
.footage-grid video { display:block; width:100%; aspect-ratio:16/9; object-fit:contain; background:#eee; }
[data-warm="true"] .footage-grid video { filter:saturate(.88) sepia(.12) contrast(.97) brightness(1.035); }
.footage-grid h3 { font-size:14px; font-weight:500; margin:10px 0 6px; }
.footage-grid a { font-size:11px; color:var(--muted); text-decoration:underline; }
@media(max-width:760px) { .footage-grid { grid-template-columns:1fr; } }

[data-warm="true"] [data-film-preset="discovery"] .compare-video, [data-warm="true"] [data-film-preset="discovery"] .shot-track img { filter:var(--film-grade); }

.clip-play { display:inline-block; margin:0 10px 8px 0; padding:6px 10px; background:white; border:1px solid var(--line); font:inherit; font-size:11px; cursor:pointer; }

/* Film controls as in the reference: 38px square icon buttons on a light smoke ground. */
.film .film-controls .film-sound, .film .film-controls .film-toggle, .film .film-toggle { width:38px; min-width:0; height:38px; padding:0; display:grid; place-items:center; border:0; border-radius:6px; background:rgb(0 0 0 / .2); color:#fff; font-size:0; backdrop-filter:none; -webkit-backdrop-filter:none; }
.film .film-controls .film-sound:hover, .film .film-controls .film-toggle:hover, .film .film-toggle:hover { background:rgb(0 0 0 / .32); }
.film .film-controls svg, .film .film-toggle svg { width:16px; height:16px; }
.film .film-controls .film-sound:disabled { opacity:.5; cursor:default; }

/* Experts hero as in the reference: near-black ground, 90vh, the footage untinted by side
   gradients, and only a blurred 128px shade under the transparent header. Controls sit top right. */
.page-hero.dark-hero { background:#171310; min-height:max(560px, 90vh); }
.page-hero.dark-hero:is([data-film-preset], .ref-expert-hero) .film-shade {
  inset:0 0 auto; height:128px; background:rgb(0 0 0 / .4); -webkit-backdrop-filter:blur(4px); backdrop-filter:blur(4px);
  -webkit-mask-image:linear-gradient(#000, rgb(0 0 0 / .55) 35%, rgb(0 0 0 / .2) 70%, transparent);
  mask-image:linear-gradient(#000, rgb(0 0 0 / .55) 35%, rgb(0 0 0 / .2) 70%, transparent);
}
.page-hero.dark-hero .xp-film-controls { top:80px; bottom:auto; right:var(--gutter); }
/* The reference's hero footage is low-key; grade the lab footage down to the same tone so the copy
   stays legible without the side gradients the reference does not use. */
.page-hero.dark-hero[data-film-preset] { --film-grade: saturate(.86) sepia(.14) contrast(1.02) brightness(.56); }