/* Our Story film player: burgundy website surround; original film picture retained. */
.sf { --sf-gold: #d9b878; --sf-gold-2: #f3d79c; --sf-ctl: 76px;
    position: relative; overflow: hidden; isolation: isolate; color: #fff;
    padding: clamp(80px, 9vw, 140px) 0 clamp(72px, 8vw, 120px);
    background: radial-gradient(ellipse 70% 50% at 50% 0%, rgba(176,141,87,.16), transparent 72%), radial-gradient(ellipse 50% 40% at 100% 100%, rgba(var(--brand-glow-rgb),.22), transparent 70%), linear-gradient(180deg, var(--burgundy-deep) 0%, var(--burgundy-dark) 100%);
    border-top: 1px solid rgba(201,168,118,.22); }
.sf::before { content: ""; position: absolute; left: 50%; top: 0; width: 1px; height: 54px; background: linear-gradient(180deg, rgba(217,184,120,.8), transparent); }
.sf-head { position: relative; z-index: 2; margin-bottom: clamp(36px, 4.4vw, 64px); text-align: center; }
.sf-head .kicker { justify-content: center; }
.sf-head h2 { max-width: 15ch; margin: 0 auto 22px; color: #fff; text-wrap: balance; }
.sf-head .lead { margin: 0 auto; color: rgba(255,255,255,.72); text-wrap: balance; }

/* ---------- stage ---------- */
.sf-player { position: relative; z-index: 2; }
.sf-stage { position: relative; width: min(100%, 1680px, calc((100svh - var(--header, 84px)) * 16 / 9)); aspect-ratio: 16 / 9; margin: 0 auto; overflow: hidden; isolation: isolate;
    background: var(--burgundy-dark); box-shadow: 0 40px 120px rgba(0,0,0,.55), 0 0 0 1px rgba(217,184,120,.12); user-select: none; -webkit-user-select: none; -webkit-tap-highlight-color: transparent; touch-action: manipulation; }
.sf-stage:focus { outline: none; }
.sf-stage:focus-visible { outline: 2px solid var(--brass, #b08d57); outline-offset: 4px; }
.sf-stage:fullscreen, .sf-stage:-webkit-full-screen { width: 100vw; height: 100vh; max-width: none; aspect-ratio: auto; box-shadow: none; }
.sf-stage.is-pfs { position: fixed; inset: 0; z-index: 9999; width: 100vw; height: 100vh; height: 100dvh; max-width: none; aspect-ratio: auto; box-shadow: none; }
body.sf-lock { overflow: hidden; }
.sf-stage.is-idle { cursor: none; }

.sf-fallback { position: absolute; inset: 0; z-index: 0; background: radial-gradient(ellipse 46% 60% at 66% 46%, var(--burgundy) 0%, var(--burgundy-deep) 55%, var(--burgundy-dark) 100%); }
.sf-fallback i { position: absolute; left: 66%; top: 46%; width: 21%; aspect-ratio: 1; border-radius: 50%; translate: -50% -50%; rotate: -14deg; scale: 1 .82;
    border: 3px solid rgba(214,172,92,.5); box-shadow: 0 0 60px rgba(214,172,92,.22), inset 0 0 38px rgba(214,172,92,.16); animation: sfSpin 14s linear infinite; }
@keyframes sfSpin { to { rotate: 346deg; } }
.sf-canvas { position: absolute; inset: 0; z-index: 1; width: 100%; height: 100%; display: block; opacity: 0; transition: opacity 1s ease; }
.sf.is-ready .sf-canvas { opacity: 1; }
.sf.is-ready .sf-fallback { opacity: 0; transition: opacity 1s ease .4s; }
.sf-scrim { position: absolute; inset: 0; z-index: 2; pointer-events: none;
    background: linear-gradient(0deg, rgba(3,6,12,.62) 0%, rgba(3,6,12,0) 34%), radial-gradient(ellipse 100% 100% at 50% 50%, transparent 62%, rgba(3,6,12,.4) 100%); }
.sf-player[data-state="poster"] .sf-scrim { background: linear-gradient(90deg, rgba(3,6,12,.72) 0%, rgba(3,6,12,.38) 38%, rgba(3,6,12,0) 62%), linear-gradient(0deg, rgba(3,6,12,.5) 0%, rgba(3,6,12,0) 30%); }

/* ---------- poster ---------- */
.sf-poster { position: absolute; inset: 0; z-index: 4; display: flex; align-items: center; justify-content: flex-start; padding: 0 clamp(24px, 6vw, 110px);
    background: none; border: 0; color: #fff; font: inherit; text-align: center; cursor: pointer; transition: opacity .7s ease, visibility .7s; -webkit-appearance: none; appearance: none; }
.sf-poster:focus-visible { outline: 2px solid var(--brass, #b08d57); outline-offset: -8px; }
.sf-poster-in { display: flex; flex-direction: column; align-items: center; gap: clamp(14px, 1.6vw, 22px); width: min(36%, 420px); }
.sf-playbtn { position: relative; display: grid; place-items: center; width: clamp(88px, 8.4vw, 120px); aspect-ratio: 1; border-radius: 50%; color: var(--sf-gold-2);
    border: 1px solid rgba(231,196,128,.75); background: radial-gradient(circle at 34% 28%, rgba(255,236,190,.26), rgba(var(--brand-deep-rgb),.62) 62%); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
    box-shadow: inset 0 0 0 1px rgba(255,255,255,.05), 0 20px 56px rgba(0,0,0,.5), 0 0 46px rgba(217,184,120,.24); transition: transform .6s cubic-bezier(.16,1,.3,1), box-shadow .45s, border-color .45s, color .3s; }
.sf-playbtn svg { width: 34%; height: 34%; margin-left: 5%; filter: drop-shadow(0 0 10px rgba(243,215,156,.5)); }
.sf-playbtn i { position: absolute; inset: -1px; border-radius: 50%; border: 1px solid rgba(231,196,128,.5); animation: sfRipple 3.4s cubic-bezier(.2,.6,.3,1) infinite; pointer-events: none; }
.sf-playbtn i + i { animation-delay: 1.7s; }
@keyframes sfRipple { from { transform: scale(1); opacity: .8; } to { transform: scale(1.7); opacity: 0; } }
.sf-poster:hover .sf-playbtn, .sf-poster:focus-visible .sf-playbtn { transform: scale(1.07); border-color: #f3d79c; color: #fff; box-shadow: inset 0 0 0 1px rgba(255,255,255,.08), 0 24px 64px rgba(0,0,0,.55), 0 0 70px rgba(243,215,156,.42); }
.sf-poster-title { font: 500 clamp(26px, 2.7vw, 40px)/1.08 var(--serif, "Cormorant Garamond", serif); letter-spacing: .005em; color: #fff6e4; text-shadow: 0 2px 24px rgba(0,0,0,.6); }
.sf-poster-meta { display: inline-flex; align-items: center; gap: 10px; font: 500 11.5px/1 var(--sans, Inter, sans-serif); letter-spacing: .18em; text-transform: uppercase; color: rgba(255,255,255,.74); text-shadow: 0 1px 12px rgba(0,0,0,.7); }
.sf-poster-meta svg { width: 17px; height: 17px; color: var(--sf-gold); flex: none; }
.sf-poster-meta em { width: 3px; height: 3px; border-radius: 50%; background: var(--sf-gold); flex: none; }
.sf-player:not([data-state="poster"]) .sf-poster { opacity: 0; visibility: hidden; pointer-events: none; }
.sf.is-loading .sf-playbtn { animation: sfPulse 1.2s ease-in-out infinite; }
@keyframes sfPulse { 50% { box-shadow: inset 0 0 0 1px rgba(255,255,255,.05), 0 20px 56px rgba(0,0,0,.5), 0 0 80px rgba(243,215,156,.5); } }

/* ---------- subtitles: speaker tag (when a line starts), chapter + process-stage kicker, and the sentence being spoken ---------- */
.sf-subs { position: absolute; left: 0; right: 0; bottom: calc(var(--sf-ctl) + clamp(12px, 2.6%, 30px)); z-index: 3; padding: 0 clamp(18px, 8vw, 160px); display: flex; flex-direction: column; align-items: center; gap: clamp(6px, .85vw, 11px);
    text-align: center; pointer-events: none; transition: opacity .6s ease; }
.sf-stage[data-ended] .sf-subs { opacity: 0; }
.sf-tag { display: inline-flex; align-items: center; gap: 12px; margin: 0; min-height: 22px; opacity: 0; transform: translateY(6px); transition: opacity .6s ease, transform .8s cubic-bezier(.16,1,.3,1); }
.sf-tag.is-in { opacity: 1; transform: none; }
.sf-tag i { width: 34px; height: 1px; background: linear-gradient(90deg, rgba(217,184,120,.1), #e8c98c); transform: scaleX(0); transform-origin: 100% 50%; }
.sf-tag.is-in i { transform: none; transition: transform .9s cubic-bezier(.16,1,.3,1) .1s; }
.sf-tag-role { font: 500 italic clamp(15px, 1.45vw, 21px)/1 var(--serif, "Cormorant Garamond", serif); letter-spacing: .02em; color: #f3dfb4; text-shadow: 0 1px 14px rgba(0,0,0,.85); }
.sf-tag em { padding-left: 12px; border-left: 1px solid rgba(217,184,120,.42); font: 500 9.5px/1 var(--sans, Inter, sans-serif); font-style: normal; letter-spacing: .34em; text-transform: uppercase; color: var(--sf-gold); text-shadow: 0 1px 12px rgba(0,0,0,.85); }
.sf-tag.is-brand em { display: none; }
.sf-kicker { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 4px 12px; margin: 0; font: 500 10.5px/1.3 var(--sans, Inter, sans-serif); letter-spacing: .26em; text-transform: uppercase; color: var(--sf-gold); text-shadow: 0 1px 14px rgba(0,0,0,.85); opacity: 0; }
.sf-subs.has-kick .sf-kicker { animation: sfKick 1s ease .8s both; }
@keyframes sfKick { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
.sf-kicker b { font-weight: 500; color: rgba(255,255,255,.55); }
.sf-stagelabel { padding-left: 12px; border-left: 1px solid rgba(217,184,120,.42); font-size: 11.5px; letter-spacing: .1em; text-transform: none; color: rgba(255,246,228,.74); }
.sf-subs.no-stage .sf-stagelabel { display: none; }
.sf-sub { margin: 0 auto; max-width: 34em; min-height: calc(2 * 1.22em); font: 500 clamp(18px, 2.15vw, 33px)/1.22 var(--serif, "Cormorant Garamond", serif); letter-spacing: .004em; color: #fff6e4;
    text-shadow: 0 2px 22px rgba(0,0,0,.85), 0 0 2px rgba(0,0,0,.5); text-wrap: balance; opacity: 0; transition: opacity .55s ease; }
.sf-sub.is-in { opacity: 1; }
.sf-w { display: inline-block; white-space: nowrap; }
.sf-sub.enter .sf-w { animation: sfW .8s cubic-bezier(.16,1,.3,1) both; animation-delay: calc(var(--i) * 38ms); }
@keyframes sfW { from { opacity: 0; transform: translateY(.4em); filter: blur(4px); } to { opacity: 1; transform: none; filter: blur(0); } }
.sf-subs.cc-off .sf-tag, .sf-subs.cc-off .sf-sub { opacity: 0 !important; }
.sf-cc[aria-pressed="false"] { color: rgba(255,255,255,.5); }

/* ---------- end card ---------- */
.sf-end { position: absolute; left: 0; right: 0; bottom: calc(var(--sf-ctl) + clamp(10px, 2.4%, 26px)); z-index: 5; display: flex; justify-content: center; align-items: center; gap: 14px; flex-wrap: wrap; padding: 0 20px;
    animation: sfEnd 1.1s cubic-bezier(.16,1,.3,1) both; }
@keyframes sfEnd { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }
.sf-replay { display: inline-flex; align-items: center; gap: 10px; padding: 15px 24px; background: rgba(var(--brand-deep-rgb),.65); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); border: 1px solid rgba(231,196,128,.55); border-radius: 0; color: #fff;
    font: 500 13px/1 var(--sans, Inter, sans-serif); letter-spacing: .1em; text-transform: uppercase; cursor: pointer; transition: background .25s, color .25s, border-color .25s; }
.sf-replay svg { width: 18px; height: 18px; color: var(--sf-gold-2); transition: transform .6s cubic-bezier(.16,1,.3,1); }
.sf-replay:hover { background: rgba(243,215,156,.14); border-color: #f3d79c; }
.sf-replay:hover svg { transform: rotate(-200deg); }

/* ---------- controls ---------- */
.sf-controls { position: absolute; left: 0; right: 0; bottom: 0; z-index: 6; padding: 34px clamp(14px, 2.2vw, 30px) 12px;
    background: linear-gradient(0deg, rgba(3,6,12,.86) 0%, rgba(3,6,12,.5) 55%, rgba(3,6,12,0) 100%); transition: opacity .55s ease, transform .55s cubic-bezier(.16,1,.3,1); }
@media (min-width: 721px) and (max-width: 1700px) { .sf-controls { padding-right: 96px; } }   /* leaves the site's floating chat button clear of the full-screen control */
.sf-player[data-state="poster"] .sf-controls { opacity: 0; visibility: hidden; transform: translateY(10px); pointer-events: none; }
.sf-stage.is-idle .sf-controls { opacity: 0; transform: translateY(12px); pointer-events: none; }
.sf-bar { display: flex; flex-direction: column; gap: 2px; }
.sf-progress { display: flex; gap: 3px; align-items: flex-end; }
.sf-seg { position: relative; flex: var(--w, 1) 1 0; min-width: 0; padding: 10px 0 8px; background: none; border: 0; cursor: pointer; font: inherit; color: inherit; -webkit-appearance: none; appearance: none; }
.sf-seg:focus-visible { outline: 2px solid var(--brass, #b08d57); outline-offset: 1px; }
.sf-seg-track { display: block; height: 3px; background: rgba(255,255,255,.22); overflow: hidden; transition: height .2s ease, background .2s; }
.sf-seg:hover .sf-seg-track, .sf-seg:focus-visible .sf-seg-track, .sf-seg.is-drag .sf-seg-track { height: 6px; background: rgba(255,255,255,.3); }
.sf-seg-fill { display: block; width: 100%; height: 100%; background: linear-gradient(90deg, #c9a05a, #f6dca2); transform-origin: 0 50%; transform: scaleX(var(--p, 0)); }
.sf-seg-tip { position: absolute; bottom: calc(100% + 2px); left: 50%; translate: calc(-50% + var(--dx, 0px)) 6px; opacity: 0; pointer-events: none; white-space: nowrap; padding: 8px 12px 7px; font: 500 11px/1 var(--sans, Inter, sans-serif); letter-spacing: .14em; text-transform: uppercase;
    background: rgba(var(--brand-deep-rgb),.94); border: 1px solid rgba(217,184,120,.38); color: #fff; transition: opacity .2s ease, translate .25s cubic-bezier(.16,1,.3,1); z-index: 2; }
.sf-seg-tip b { margin-right: 9px; color: var(--sf-gold); font-weight: 500; }
.sf-seg:hover .sf-seg-tip, .sf-seg:focus-visible .sf-seg-tip { opacity: 1; translate: calc(-50% + var(--dx, 0px)) 0; }
.sf-seg:first-child .sf-seg-tip { left: 0; translate: 0 6px; } .sf-seg:first-child:hover .sf-seg-tip, .sf-seg:first-child:focus-visible .sf-seg-tip { translate: 0 0; }
.sf-seg:last-child .sf-seg-tip { left: auto; right: 0; translate: 0 6px; } .sf-seg:last-child:hover .sf-seg-tip, .sf-seg:last-child:focus-visible .sf-seg-tip { translate: 0 0; }

.sf-btns { display: flex; align-items: center; gap: 4px; }
.sf-btn { display: grid; place-items: center; width: 44px; height: 44px; padding: 0; background: none; border: 0; border-radius: 50%; color: #fff; cursor: pointer; transition: background .2s, color .2s; -webkit-appearance: none; appearance: none; }
.sf-btn svg { width: 23px; height: 23px; }
.sf-btn:hover { background: rgba(255,255,255,.1); color: var(--sf-gold-2); }
.sf-btn:focus-visible { outline: 2px solid var(--brass, #b08d57); outline-offset: 0; }
.sf-toggle .sf-i-pause, .sf-mute .sf-i-muted { display: none; }
.sf-player[data-state="playing"] .sf-toggle .sf-i-play { display: none; }
.sf-player[data-state="playing"] .sf-toggle .sf-i-pause { display: grid; }
.sf-mute[aria-pressed="true"] .sf-i-sound { display: none; }
.sf-mute[aria-pressed="true"] .sf-i-muted { display: grid; }
.sf-mute.is-off { display: none; }
.sf-time { margin-left: 10px; font: 400 12.5px/1 var(--sans, Inter, sans-serif); letter-spacing: .06em; font-variant-numeric: tabular-nums; color: rgba(255,255,255,.88); white-space: nowrap; }
.sf-time i { margin: 0 6px; font-style: normal; opacity: .45; }
.sf-time span { opacity: .62; }
.sf-now { margin: 0 14px 0 auto; font: 500 10.5px/1 var(--sans, Inter, sans-serif); letter-spacing: .24em; text-transform: uppercase; color: rgba(255,255,255,.55); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sf-fs { margin-left: 0; }

.sr { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* ---------- transcript (also the static / no-WebGL presentation of the film) ---------- */
.sf-note { margin: 14px auto 0; text-align: center; font: 400 11.5px/1.4 var(--sans, Inter, sans-serif); letter-spacing: .06em; color: rgba(255,255,255,.5); }
.sf-list-wrap { display: block; margin-top: clamp(24px, 3.4vw, 44px); position: relative; z-index: 2; text-align: center; }
.sf-transcript > summary { list-style: none; cursor: pointer; display: inline-flex; align-items: center; gap: 12px; padding: 12px 2px; font: 500 12px/1 var(--sans, Inter, sans-serif); letter-spacing: .22em; text-transform: uppercase; color: rgba(255,255,255,.78); border-bottom: 1px solid rgba(217,184,120,.4); transition: color .25s; }
.sf-transcript > summary::-webkit-details-marker { display: none; }
.sf-transcript > summary::after { content: "+"; font-size: 17px; letter-spacing: 0; color: var(--sf-gold); }
.sf-transcript[open] > summary::after { content: "\2013"; }
.sf-transcript > summary:hover, .sf-transcript > summary:focus-visible { color: var(--sf-gold-2); outline: none; }
.sf-list { list-style: none; margin: clamp(26px, 3.4vw, 44px) 0 0; padding: 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: 0 clamp(24px, 4vw, 56px); text-align: left; }
.sf-list li { border-top: 1px solid rgba(217,184,120,.28); }
.sf-list button { display: grid; grid-template-columns: auto 1fr; gap: 6px 16px; align-items: baseline; width: 100%; padding: 20px 0 24px; text-align: left; background: none; border: 0; color: #fff; cursor: pointer; font: inherit; }
.sf-list button:hover strong { color: var(--sf-gold-2); }
.sf-list-no { font: 500 11px/1 var(--sans, Inter, sans-serif); letter-spacing: .2em; color: var(--sf-gold); }
.sf-list strong { font: 500 24px/1.1 var(--serif, "Cormorant Garamond", serif); transition: color .3s; }
.sf-list-stage { grid-column: 2; font: 500 10.5px/1.45 var(--sans, Inter, sans-serif); letter-spacing: .14em; text-transform: uppercase; color: var(--sf-gold); }
.sf-list-who { grid-column: 2; margin-top: 4px; font: italic 500 16px/1.2 var(--serif, "Cormorant Garamond", serif); color: #f3dfb4; }
.sf-list-cap { grid-column: 2; font-size: 14.5px; line-height: 1.6; color: rgba(255,255,255,.7); }
.sf-voice-note { margin: 26px 0 0; font: 400 12px/1.4 var(--sans, Inter, sans-serif); letter-spacing: .05em; color: rgba(255,255,255,.5); }

/* ---------- small screens: a taller 4:5 stage, poster block moves under the ring ---------- */
@media (max-width: 720px) {
    .sf { --sf-ctl: 98px; }
    .sf-head { text-align: left; } .sf-head .kicker { justify-content: flex-start; } .sf-head h2, .sf-head .lead { margin-left: 0; margin-right: 0; }
    .sf-stage { width: 100%; aspect-ratio: 4 / 5; max-height: calc(100svh - var(--header, 68px) - 8px); box-shadow: none; }
    .sf-poster { align-items: flex-end; justify-content: center; padding: 0 20px 9%; }
    .sf-poster-in { width: 100%; gap: 13px; }
    .sf-playbtn { width: 78px; }
    .sf-poster-title { font-size: 28px; }
    .sf-poster-meta { font-size: 10.5px; letter-spacing: .14em; gap: 8px; }
    .sf-player[data-state="poster"] .sf-scrim { background: linear-gradient(0deg, rgba(3,6,12,.82) 0%, rgba(3,6,12,.45) 34%, rgba(3,6,12,0) 60%); }
    .sf-controls { padding: 28px 12px 8px; }
    .sf-btn { width: 42px; height: 42px; }
    .sf-now { display: none; }
    .sf-fs { margin-left: auto; }
    .sf-kicker { font-size: 9.5px; letter-spacing: .2em; gap: 2px 8px; }
    .sf-stagelabel { flex-basis: 100%; padding-left: 0; border-left: 0; font-size: 10px; letter-spacing: .06em; }
    .sf-subs { padding: 0 16px; gap: 5px; }
    .sf-tag { gap: 9px; min-height: 18px; } .sf-tag i { width: 22px; } .sf-tag-role { font-size: 15px; } .sf-tag em { font-size: 8.5px; padding-left: 9px; }
    .sf-sub { font-size: clamp(15.5px, 4.3vw, 20px); max-width: 21em; line-height: 1.22; min-height: calc(3 * 1.22em); }
    .sf-sub.is-long { font-size: clamp(14px, 3.95vw, 18.4px); max-width: 23.4em; }
    .sf-end { flex-direction: column-reverse; gap: 10px; bottom: 52px; }
    .sf-end .btn { padding: 14px 22px; }
    .sf-replay { padding: 10px 14px; border-color: transparent; background: none; }
    .sf-stage[data-ended] .sf-controls { opacity: 0; pointer-events: none; }
    .sf-list { grid-template-columns: 1fr; }
    .sf-seg-tip { display: none; }
}
@media (max-width: 1024px) and (min-width: 721px) { .sf-list { grid-template-columns: repeat(2, 1fr); } }

@media (prefers-reduced-motion: reduce) {
    .sf-playbtn i, .sf-fallback i, .sf.is-loading .sf-playbtn { animation: none; }
    .sf-subs, .sf-sub, .sf-tag, .sf-controls, .sf-poster, .sf-seg-track, .sf-canvas { transition: none; }
    .sf-subs.has-kick .sf-kicker, .sf-sub.enter .sf-w { animation: none; opacity: 1; transform: none; filter: none; }
    .sf-tag i { transition: none; transform: none; }
    .sf-end { animation: none; }
}