
.vc {
  --vc-ink: rgba(236, 230, 218, 0.94);
  --vc-dim: rgba(236, 230, 218, 0.58);
  --vc-faint: rgba(236, 230, 218, 0.26);
  --vc-warm: #ffc98a;
  --vc-hot: #ff9f52;
  --vc-line: rgba(255, 179, 92, 0.55);
  --p: 0;
  --lvl: 0;
  margin: 0;
  max-width: 40rem;
  font-family: "Inter Tight", system-ui, sans-serif;
}
.vc-paper {
  --vc-ink: #1b211e;
  --vc-dim: #4b5550;
  --vc-faint: rgba(27, 33, 30, 0.22);
  --vc-warm: #8a591c;
  --vc-hot: #b8711d;
  --vc-line: rgba(138, 89, 28, 0.6);
}

.vc-row { display: flex; align-items: center; gap: 14px; }

.vc-play {
  flex: none; display: inline-flex; align-items: center; gap: 10px;
  min-height: 44px; padding: 0 16px 0 8px; border-radius: 999px;
  border: 1px solid var(--vc-line); background: rgba(255, 179, 92, 0.06);
  color: var(--vc-ink); font: 500 11.5px/1 "Inter Tight", system-ui, sans-serif; letter-spacing: 0.14em; text-transform: uppercase;
  cursor: pointer; text-shadow: none;
  transition: border-color 200ms cubic-bezier(.2,.8,.2,1), background 200ms cubic-bezier(.2,.8,.2,1), box-shadow 300ms cubic-bezier(.2,.8,.2,1), scale 120ms ease;
}
.vc-paper .vc-play { background: rgba(138, 89, 28, 0.05); }
.vc-play:hover, .vc-play:focus-visible { border-color: var(--vc-hot); background: rgba(255, 179, 92, 0.13); box-shadow: 0 0 34px -8px rgba(255, 150, 70, 0.55); }
.vc-paper .vc-play:hover, .vc-paper .vc-play:focus-visible { background: rgba(138, 89, 28, 0.1); box-shadow: 0 6px 24px -14px rgba(138, 89, 28, 0.7); }
.vc-play:focus-visible { outline: 2px solid var(--vc-warm); outline-offset: 3px; }
.vc-play:active { scale: 0.97; }
.vc-play[hidden] { display: none; }

.vc-ico { position: relative; flex: none; width: 28px; height: 28px; border-radius: 50%; border: 1px solid var(--vc-line); display: grid; place-items: center; }
.vc-ico i { display: block; width: 0; height: 0; border-style: solid; border-width: 5.5px 0 5.5px 9px; border-color: transparent transparent transparent var(--vc-warm); translate: 1.5px 0; transition: border-width 160ms ease, translate 160ms ease; }
.vc[data-state="playing"] .vc-ico i, .vc[data-state="loading"] .vc-ico i { width: 9px; height: 11px; border-width: 0 3px; border-color: transparent var(--vc-warm); translate: 0 0; }
.vc[data-state="loading"] .vc-ico::after { content: ""; position: absolute; inset: -4px; border-radius: 50%; border: 1px solid transparent; border-top-color: var(--vc-warm); animation: vc-spin 900ms linear infinite; }
@keyframes vc-spin { to { rotate: 360deg; } }
.vc[data-state="playing"] .vc-ico { box-shadow: 0 0 calc(6px + var(--lvl) * 26px) rgba(255, 159, 82, calc(0.25 + var(--lvl) * 0.55)); }
.vc-dur { font: 400 10.5px/1 "IBM Plex Mono", ui-monospace, monospace; letter-spacing: 0.06em; color: var(--vc-dim); }

.vc-native { height: 40px; max-width: 100%; }

.vc-wave { position: relative; flex: 1 1 auto; min-width: 120px; height: 38px; }
.vc-wave svg { position: absolute; inset: 0; width: 100%; height: 100%; display: block; overflow: visible; }
.vc-bars rect { fill: var(--vc-faint); }
.vc-bars rect.in { fill: color-mix(in srgb, var(--vc-warm) 45%, transparent); }
.vc-lit { clip-path: inset(0 calc((1 - var(--p)) * 100%) 0 0); }
.vc-lit rect { fill: var(--vc-warm); }
.vc[data-state="playing"] .vc-lit { filter: drop-shadow(0 0 calc(1px + var(--lvl) * 7px) rgba(255, 159, 82, calc(0.35 + var(--lvl) * 0.5))); }
.vc-paper[data-state="playing"] .vc-lit { filter: none; }
.vc-head { position: absolute; top: -3px; bottom: -3px; left: calc(var(--p) * 100%); width: 1px; background: var(--vc-warm); opacity: 0; transition: opacity 200ms ease; box-shadow: 0 0 8px var(--vc-hot); }
.vc[data-state="playing"] .vc-head, .vc[data-state="paused"] .vc-head, .vc[data-state="loading"] .vc-head { opacity: 1; }

.vc-span { position: absolute; left: var(--x0); width: calc(var(--x1) - var(--x0)); top: -9px; height: 5px; border: 1px solid var(--vc-line); border-bottom: 0; }
.vc-span-l { position: absolute; left: 50%; bottom: 7px; translate: -50% 0; white-space: nowrap; font: 400 9.5px/1 "IBM Plex Mono", ui-monospace, monospace; letter-spacing: 0.1em; text-transform: uppercase; color: var(--vc-dim); }

.vc-cap { margin: 12px 0 0; font: 400 12px/1.5 "IBM Plex Mono", ui-monospace, monospace; letter-spacing: 0.02em; color: var(--vc-dim); }
.vc-who { display: block; margin-bottom: 4px; }
.vc-q { display: block; font: italic 400 clamp(16px, 1.25vw, 19px)/1.42 "Instrument Serif", Georgia, serif; letter-spacing: 0; color: var(--vc-dim); quotes: "\201C" "\201D"; }
.vc-q span { transition: color 140ms ease, text-shadow 300ms ease; }
.vc-q .is-said { color: var(--vc-ink); }
.vc-q .is-now { color: var(--vc-warm); text-shadow: 0 0 18px rgba(255, 159, 82, 0.45); }
.vc-paper .vc-q .is-now { text-shadow: none; }
.vc-sr, .vc-live { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }

@media (prefers-reduced-motion: reduce) {
  .vc-play, .vc-q span, .vc-head, .vc-ico i { transition: none; }
  .vc[data-state="loading"] .vc-ico::after { animation: none; border-top-color: transparent; }
  .vc[data-state="playing"] .vc-lit, .vc[data-state="playing"] .vc-ico { filter: none; box-shadow: none; }
}
@media (forced-colors: active) {
  .vc-bars rect { fill: GrayText; }
  .vc-lit rect { fill: Highlight; }
  .vc-q .is-now { color: Highlight; }
}

.film-gate .vc { margin-top: clamp(14px, 2.4vh, 24px); max-width: 34rem; }
.film-gate .vc-cap { margin-top: 8px; }
.film-gate .vc-q { font-size: clamp(15px, min(1.2vw, 2.2vh), 18px); }
.film-gate .vc + .film-gate-f { margin-top: 6px; }
@media (min-aspect-ratio: 4/5) and (max-height: 700px) {
  .film-gate .vc-q { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
  .film-gate .vc-cap { margin: 0; }
}
@media (max-aspect-ratio: 4/5) {
  .film-gate .vc { max-width: none; margin-top: 14px; }
  .film-gate .vc-span-l { display: none; }
  .film-gate .vc-wave { min-width: 80px; }
}
@media (max-aspect-ratio: 4/5) and (max-height: 900px) {
  .film-gate .vc-q { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
  .film-gate .vc-cap { margin: 0; }
}

.cv-sec { --cv-ink: #1b211e; --cv-soft: #4b5550; --cv-faint: #5f6a64; --cv-bronze: #8a591c; --cv-rule: #cfc9b8; }
.cv-on-dark { padding: clamp(64px, 9vw, 140px) clamp(16px, 4vw, 48px); }
.cv-panel {
  position: relative; max-width: 82rem; margin: 0 auto; padding: clamp(28px, 5vw, 72px);
  color: var(--cv-ink); border-radius: 3px;
  background:
    radial-gradient(90% 70% at 18% 0%, rgba(255, 214, 160, .38), transparent 62%),
    radial-gradient(60% 60% at 100% 100%, rgba(138, 89, 28, .07), transparent 70%),
    #EFE9DC;
  box-shadow: 0 50px 140px -50px rgba(0, 0, 0, .9), 0 0 0 1px rgba(211, 161, 90, .28), 0 0 90px -30px rgba(255, 170, 90, .28);
}
.cv-head { max-width: 46rem; }
.cv-k { display: flex; align-items: center; gap: 12px; margin: 0 0 14px; font: 400 11px/1.3 "IBM Plex Mono", ui-monospace, monospace; letter-spacing: .16em; text-transform: uppercase; color: var(--cv-bronze); }
.cv-k::before { content: ""; width: 30px; height: 1px; background: var(--cv-bronze); }
.cv-h { margin: 0; font: 400 clamp(30px, 3.6vw, 52px)/1.02 "Instrument Serif", Georgia, serif; letter-spacing: -.012em; color: var(--cv-ink); text-wrap: balance; }
.cv-h em { font-style: italic; color: var(--cv-bronze); }
.cv-intro { margin: 18px 0 0; max-width: 40em; font: 400 clamp(15.5px, 1.2vw, 18px)/1.6 "Inter Tight", system-ui, sans-serif; color: var(--cv-soft); }
.cv-list { list-style: none; margin: clamp(28px, 4vw, 52px) 0 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 17rem), 1fr)); gap: clamp(20px, 2.6vw, 36px); }
.cv-card { display: flex; flex-direction: column; padding-top: 18px; border-top: 1px solid var(--cv-rule); position: relative; }
.cv-card::before { content: ""; position: absolute; left: 0; top: -1px; width: 44px; height: 1px; background: var(--cv-bronze); transform-origin: 0 50%; transition: width 420ms cubic-bezier(.16, 1, .3, 1); }
.cv-card:hover::before, .cv-card:focus-within::before { width: 100%; }
.cv-lang { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin: 0 0 6px; }
.cv-lang-n { font: italic 400 clamp(30px, 2.8vw, 40px)/1 "Instrument Serif", Georgia, serif; color: var(--cv-bronze); }
.cv-kind { font: 400 10.5px/1 "IBM Plex Mono", ui-monospace, monospace; letter-spacing: .14em; text-transform: uppercase; color: var(--cv-faint); }
.cv-t { margin: 8px 0 8px; font: 500 17px/1.3 "Inter Tight", system-ui, sans-serif; color: var(--cv-ink); }
.cv-said { margin: 0 0 8px; font: 400 15.5px/1.55 "Inter Tight", system-ui, sans-serif; color: var(--cv-ink); text-wrap: pretty; }
.cv-pub { margin: 0 0 16px; font: 400 13px/1.5 "Inter Tight", system-ui, sans-serif; color: var(--cv-soft); }
.cv-go { margin: auto 0 0; display: flex; flex-wrap: wrap; align-items: center; gap: 6px 16px; }
.cv-link, .cv-more {
  display: inline-flex; align-items: center; gap: 6px; min-height: 44px;
  font: 500 13px/1 "Inter Tight", system-ui, sans-serif; letter-spacing: .02em; color: var(--cv-ink);
  text-decoration: underline; text-decoration-color: var(--cv-bronze); text-underline-offset: .32em; text-decoration-thickness: 1px;
  transition: color 160ms ease, text-underline-offset 180ms cubic-bezier(.2, .8, .2, 1);
}
.cv-link:hover, .cv-more:hover { color: var(--cv-bronze); text-underline-offset: .42em; }
.cv-link span, .cv-more span { display: inline-block; transition: translate 200ms cubic-bezier(.2, .8, .2, 1); }
.cv-link:hover span, .cv-more:hover span { translate: 2px -2px; }
.cv-link:focus-visible, .cv-more:focus-visible { outline: 2px solid var(--cv-bronze); outline-offset: 3px; }
.cv-host { flex-basis: 100%; font: 400 11px/1.3 "IBM Plex Mono", ui-monospace, monospace; letter-spacing: .04em; color: var(--cv-faint); }
.cv-foot { margin: clamp(26px, 3.4vw, 44px) 0 0; padding-top: 18px; border-top: 1px solid var(--cv-rule); }
.cv-foot a { display: inline-flex; align-items: center; min-height: 44px; font: 500 14px/1.3 "Inter Tight", system-ui, sans-serif; color: var(--cv-ink); text-decoration: underline; text-decoration-color: var(--cv-bronze); text-underline-offset: .3em; }
.cv-on-paper .cv-list { margin-top: 2rem; }
@media (prefers-reduced-motion: reduce) { .cv-card::before, .cv-link, .cv-more, .cv-link span, .cv-more span { transition: none; } }
@media (forced-colors: active) { .cv-panel { border: 1px solid CanvasText; } .cv-card::before { background: CanvasText; } }

.film-gate-lede .gate-short { display: none; }
@media (max-aspect-ratio: 4/5) and (max-width: 699px) {
  .film-gate-lede .gate-long { display: none; }
  .film-gate-lede .gate-short { display: inline; }
}
@media (max-aspect-ratio: 4/5) and (max-height: 900px) {
  .film-gate .vc + .film-gate-f { display: none; }
}
@media (max-aspect-ratio: 4/5) and (max-width: 699px) {
  .film-gate-h { font-size: clamp(28px, min(8.8vw, 6vh), 52px); }
}

@media (min-aspect-ratio: 4/5) and (max-height: 600px) {
  .film-gate .vc + .film-gate-f { display: none; }
  .film-gate .vc { margin-top: 10px; }
}
@media (min-aspect-ratio: 4/5) and (max-height: 820px) {
  body.no-gl .film-gate .vc .vc-q { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
  body.no-gl .film-gate .vc + .film-gate-f { display: none; }
  body.no-gl .film-contour { margin-top: 64px; }
  body.no-gl .film-gate { padding-top: calc(28px + env(safe-area-inset-top)); }
  body.no-gl .film-gate .vc { margin-top: 12px; }
  body.no-gl .film-gate .vc .vc-who.vc-sr { position: static; width: auto; height: auto; overflow: visible; clip-path: none; white-space: normal; display: block; margin: 0; font: 400 11.5px/1.5 "IBM Plex Mono", ui-monospace, monospace; letter-spacing: .02em; color: var(--vc-dim); }
}

@media (min-width: 1200px) and (min-aspect-ratio: 4/5) {
  .film-gate-copy {
    max-width: min(1240px, 100%);
    display: grid; grid-template-columns: minmax(0, 38em) minmax(22rem, 27rem); column-gap: clamp(36px, 4.5vw, 84px);
    grid-template-areas: "k k" "h h" "lede voice" "f voice"; align-items: start;
  }
  .film-gate-copy > .film-gate-k { grid-area: k; }
  .film-gate-copy > .film-gate-h { grid-area: h; }
  .film-gate-copy > .film-gate-lede { grid-area: lede; }
  .film-gate-copy > .film-gate-f { grid-area: f; }
  .film-gate-copy > .vc { grid-area: voice; max-width: none; margin-top: calc(clamp(12px, 2.6vh, 26px) + 14px); padding-left: clamp(18px, 1.8vw, 28px); border-left: 1px solid rgba(255, 179, 92, 0.28); }
  body.no-gl .film-gate-copy > .vc { margin-top: calc(clamp(12px, 2.6vh, 26px) + 14px); }
  .film-gate .vc + .film-gate-f { margin-top: clamp(8px, 1.6vh, 16px); }
  .film-gate .vc-wave { min-width: 110px; }
  .film-gate .vc-cap { margin-top: 12px; }
  .film-gate-quick { align-self: start; margin-top: calc(clamp(16px, 3.4vh, 36px) + 4px); }
}
@media (min-width: 1200px) and (min-aspect-ratio: 4/5) and (max-height: 800px) {
  .film-gate { --gate-top: calc(62px + env(safe-area-inset-top) + clamp(8px, 2.4vh, 64px)); }
  .film-gate-h { font-size: clamp(36px, min(5.4vw, 8.4vh), 88px); }
  .film-gate-lede { margin-top: clamp(10px, 2vh, 26px); }
  .film-gate-act { margin-top: clamp(12px, 2.4vh, 36px); }
  .film-gate-quick { margin-top: calc(clamp(12px, 2.4vh, 36px) + 4px); }
}
@media (min-width: 1200px) and (min-aspect-ratio: 4/5) and (max-height: 700px) {
  .film-gate-note { display: none; }
}
