/* =========================================================
   PREVAIL ALTERNATIVE ASSETS: video cards + theater
   Shared by the home page's "Watch" band and /videos/.
   Reads the page's tokens (--ink, --paper, --brass, --text...)
   and its working names, so a card works on paper or inside a
   .dark section. Behaviour lives in /assets/js/videos.js.
   Nothing loads from YouTube until a visitor presses play.
   ========================================================= */

:root{
  --ease-lux:cubic-bezier(.22,1,.36,1);
  --ease-soft:cubic-bezier(.25,.1,.25,1);
  --ease-sine:cubic-bezier(.37,0,.63,1);
}
/* the same flip the home page uses, for pages that don't define it (inner pages) */
.dark{--text:var(--on-ink);--text-2:var(--on-ink-2);--text-3:var(--on-ink-3);--rule:var(--rule-ink);--rule-2:var(--rule-ink-2);
  --brass-ink:var(--brass);color:var(--text);}

/* ---------- card ---------- */
.vid-card{display:block;min-width:0;text-decoration:none;color:inherit;cursor:pointer;}
.vid-card:focus-visible{outline:2px solid var(--brass-ink);outline-offset:4px;}
.vid-media{position:relative;display:block;overflow:hidden;aspect-ratio:16/9;background:var(--ink-2);}
.vid-media img{width:100%;height:100%;object-fit:cover;filter:saturate(.94) brightness(.9);
  transition:transform 1.4s var(--ease-lux),filter 1s var(--ease-soft);}
.vid-card:hover .vid-media img,.vid-card:focus-visible .vid-media img{transform:scale(1.045);filter:saturate(1) brightness(1);}
/* a navy fall-off at the foot, for the runtime and the play button */
.vid-media::before{content:"";position:absolute;inset:0;z-index:1;pointer-events:none;
  background:linear-gradient(180deg,rgba(13,17,48,0) 42%,rgba(13,17,48,.58) 100%);transition:opacity 1s var(--ease-soft);}
.vid-card:hover .vid-media::before,.vid-card:focus-visible .vid-media::before{opacity:.65;}
/* a diagonal band of light crosses the still (videos.js adds .is-sheen) */
.vid-media::after{content:"";position:absolute;top:-25%;bottom:-25%;left:0;width:42%;z-index:2;pointer-events:none;will-change:transform;
  background:linear-gradient(90deg,rgba(255,248,230,0) 0%,rgba(255,248,230,.07) 30%,rgba(255,248,230,.26) 50%,rgba(255,248,230,.07) 70%,rgba(255,248,230,0) 100%);
  transform:translateX(-170%) skewX(-18deg);}
.vid-card.is-sheen .vid-media::after{animation:vid-sweep 1.9s var(--ease-sine);}
@keyframes vid-sweep{from{transform:translateX(-170%) skewX(-18deg)}to{transform:translateX(340%) skewX(-18deg)}}
/* a brass frame settles in on hover */
.vid-frame{position:absolute;inset:0;z-index:3;pointer-events:none;box-shadow:inset 0 0 0 1px rgba(194,160,104,0);transition:box-shadow 1s var(--ease-soft);}
.vid-card:hover .vid-frame,.vid-card:focus-visible .vid-frame{box-shadow:inset 0 0 0 1px rgba(194,160,104,.8);}

/* gold-foil play button, with its own sweep of light */
.vid-play{position:absolute;z-index:4;left:1rem;bottom:1rem;width:60px;height:60px;border-radius:50%;overflow:hidden;isolation:isolate;
  background-image:linear-gradient(120deg,#a6854b 0%,#c7a76c 30%,#ecd8a6 50%,#c2a068 70%,#a3824a 100%);background-size:220% 100%;background-position:0% 50%;
  box-shadow:inset 0 1px 0 rgba(255,247,226,.6),inset 0 -1px 0 rgba(84,58,22,.45),0 16px 36px -14px rgba(0,0,0,.65);
  transition:background-position 1.4s var(--ease-soft),transform .9s var(--ease-lux),box-shadow 1s var(--ease-soft);}
.vid-play svg{position:absolute;left:50%;top:50%;width:20px;height:20px;margin:-10px 0 0 -7px;fill:var(--ink);}
.vid-play::after{content:"";position:absolute;top:-15%;bottom:-15%;left:0;width:60%;pointer-events:none;will-change:transform;
  background:linear-gradient(90deg,rgba(255,251,238,0),rgba(255,251,238,.8) 50%,rgba(255,251,238,0));transform:translateX(-150%) skewX(-18deg);}
.vid-card.is-sheen .vid-play::after{animation:play-sheen 1.6s var(--ease-sine) .2s;}
@keyframes play-sheen{from{transform:translateX(-150%) skewX(-18deg)}to{transform:translateX(250%) skewX(-18deg)}}
.vid-card:hover .vid-play,.vid-card:focus-visible .vid-play{background-position:55% 50%;transform:scale(1.08);
  box-shadow:inset 0 1px 0 rgba(255,247,226,.75),inset 0 -1px 0 rgba(84,58,22,.45),0 20px 44px -14px rgba(0,0,0,.7),0 0 0 6px rgba(194,160,104,.16);}
.vid-time{position:absolute;z-index:4;right:.7rem;bottom:.65rem;padding:.34rem .5rem;font-family:var(--sans);font-weight:500;font-size:.75rem;line-height:1;
  letter-spacing:.06em;color:var(--on-ink);background:rgba(13,17,48,.72);font-variant-numeric:tabular-nums;}

.vid-label{display:block;margin-top:1.05rem;font-family:var(--sans);font-weight:500;font-size:.6875rem;letter-spacing:.16em;text-transform:uppercase;color:var(--brass-ink);}
.vid-title{display:block;margin-top:.45rem;font-family:var(--serif);font-weight:600;font-size:1.32rem;line-height:1.2;color:var(--text);font-variant-numeric:lining-nums;}
.vid-title span{background:linear-gradient(var(--brass-ink),var(--brass-ink)) 0 100%/0 1px no-repeat;padding-bottom:2px;transition:background-size .8s var(--ease-lux);}
.vid-card:hover .vid-title span,.vid-card:focus-visible .vid-title span{background-size:100% 1px;}
.vid-date{display:block;margin-top:.45rem;font-family:var(--sans);font-size:.8125rem;color:var(--text-3);}

/* feature: a bigger stage and a bigger play button */
.vid-feature .vid-play{left:1.5rem;bottom:1.5rem;width:84px;height:84px;}
.vid-feature .vid-play svg{width:26px;height:26px;margin:-13px 0 0 -9px;}
.vid-feature .vid-title{font-size:clamp(1.6rem,2.6vw,2.25rem);font-weight:500;line-height:1.1;margin-top:.6rem;}
/* row: thumbnail beside its text */
.vid-row{display:grid;grid-template-columns:minmax(0,11fr) minmax(0,12fr);gap:1.1rem;align-items:start;}
.vid-row .vid-label{margin-top:.1rem;}
.vid-row .vid-title{font-size:1.12rem;}
.vid-row .vid-play{left:.5rem;bottom:.5rem;width:38px;height:38px;}
.vid-row .vid-play svg{width:14px;height:14px;margin:-7px 0 0 -5px;}
.vid-row .vid-time{right:.45rem;bottom:.4rem;font-size:.6875rem;padding:.28rem .4rem;}

/* ---------- headings that catch the light once they come into view ---------- */
@supports ((-webkit-background-clip:text) or (background-clip:text)){
  /* on paper the light passes as a band of gold across dark type; on navy, as a bright band across ivory */
  .shine-text{--shine-base:var(--text);--shine-edge:#8f6f3e;--shine-hi:#c9a25f;color:transparent;-webkit-background-clip:text;background-clip:text;
    background-image:linear-gradient(100deg,var(--shine-base) 0%,var(--shine-base) 38%,var(--shine-edge) 45%,var(--shine-hi) 50%,var(--shine-edge) 55%,var(--shine-base) 62%,var(--shine-base) 100%);
    background-size:250% 100%;background-position:100% 0;padding-bottom:.14em;margin-bottom:-.14em;}
  .dark .shine-text,.legal-head .shine-text,.hero .shine-text{--shine-edge:#e9cf97;--shine-hi:#fffbef;}
  .shine-text.is-shining{animation:text-shine 2.8s var(--ease-sine);}
}
@keyframes text-shine{from{background-position:100% 0}to{background-position:0% 0}}
@media (forced-colors:active){ .shine-text{color:CanvasText;background:none;} }

/* ---------- home: "Watch" band ---------- */
.watch{background:var(--ink);padding:var(--sec-y,clamp(4.5rem,10vh,7.5rem)) 0;}
.watch-grid{display:grid;grid-template-columns:minmax(0,8fr) minmax(0,4fr);gap:2.5rem clamp(2rem,4vw,3.5rem);margin-top:clamp(2.5rem,6vh,3.5rem);
  padding-top:clamp(2rem,5vh,2.75rem);border-top:1px solid var(--rule-2);}
.watch-list{display:flex;flex-direction:column;gap:1.6rem;}
.watch-list .vid-row + .vid-row{padding-top:1.6rem;border-top:1px solid var(--rule);}
.watch-more{margin-top:clamp(2.5rem,6vh,3.25rem);}
@media (max-width:1000px){ .watch-grid{grid-template-columns:1fr;} }
@media (max-width:560px){ .vid-row{grid-template-columns:minmax(0,10fr) minmax(0,11fr);gap:.9rem;} }

/* ---------- /videos/ library ---------- */
.lib-page{flex:1;display:flex;flex-direction:column;}
.lib-page .stage{flex:none;padding-bottom:0;}
.lib{flex:1;background:var(--ink);padding:clamp(3.5rem,8vh,5rem) 0 clamp(4rem,9vh,6rem);}
.lib .wrap{max-width:var(--wrap,1240px);margin:0 auto;padding:0 var(--gut,clamp(1.25rem,4vw,3rem));}
.lib-group + .lib-group{margin-top:clamp(3.5rem,8vh,5rem);}
.lib-group .kicker{margin-bottom:1.6rem;}
.lib-feature{display:grid;grid-template-columns:minmax(0,8fr) minmax(0,4fr);gap:2rem clamp(2rem,4vw,3.5rem);align-items:end;}
.lib-feature .vid-media{grid-column:1;}
.lib-feature-meta .vid-label{margin-top:0;}
.lib-feature-meta .btn{margin-top:1.75rem;}
.lib-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:2.75rem clamp(1.25rem,2.4vw,2rem);padding-top:1.75rem;border-top:1px solid var(--rule-2);}
.lib-note{margin-top:clamp(3.5rem,8vh,4.5rem);padding-top:1.4rem;border-top:1px solid var(--rule);font-family:var(--sans);font-size:.8125rem;line-height:1.65;color:var(--text-3);max-width:80ch;}
@media (max-width:1000px){ .lib-feature{grid-template-columns:1fr;} .lib-grid{grid-template-columns:repeat(2,minmax(0,1fr));} }
@media (max-width:600px){ .lib-grid{grid-template-columns:1fr;} }

/* ---------- theater ---------- */
html.theater-open{overflow:hidden;}
.theater{position:fixed;inset:0;z-index:80;display:flex;align-items:center;justify-content:center;padding:clamp(3.75rem,8vh,5rem) clamp(1rem,4vw,3rem) clamp(1.25rem,4vh,2.5rem);
  background:rgba(8,11,32,.95);opacity:0;pointer-events:none;transition:opacity .6s var(--ease-soft);}
.theater[hidden]{display:none;}
.theater.on{opacity:1;pointer-events:auto;}
.theater-inner{position:relative;width:min(100%,1120px,calc((100svh - 13rem) * 16 / 9));opacity:0;transform:translateY(18px) scale(.985);
  transition:opacity .6s var(--ease-soft),transform .9s var(--ease-lux);}
.theater.on .theater-inner{opacity:1;transform:none;}
.theater-frame{position:relative;aspect-ratio:16/9;background:#05060f;overflow:hidden;
  box-shadow:0 50px 120px -40px rgba(0,0,0,.85),0 0 0 1px rgba(194,160,104,.4);}
.theater-poster{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;filter:brightness(.62) saturate(.9);}
.theater-frame iframe{position:absolute;inset:0;width:100%;height:100%;border:0;opacity:0;transition:opacity .9s var(--ease-soft);}
.theater-frame iframe.is-loaded{opacity:1;}
/* while the player loads: a slow brass hairline along the foot of the frame */
.theater-frame::after{content:"";position:absolute;left:0;right:0;bottom:0;height:2px;z-index:1;
  background:linear-gradient(90deg,rgba(194,160,104,0),rgba(194,160,104,.9) 50%,rgba(194,160,104,0));transform-origin:left;
  animation:theater-load 1.6s var(--ease-sine) infinite;}
.theater-frame.is-ready::after{opacity:0;animation:none;transition:opacity .6s var(--ease-soft);}
@keyframes theater-load{0%{transform:translateX(-100%)}100%{transform:translateX(100%)}}
.theater-meta{display:flex;flex-wrap:wrap;align-items:baseline;gap:.5rem 1.75rem;margin-top:1.3rem;}
.theater-label{flex:1 0 100%;font-family:var(--sans);font-weight:500;font-size:.6875rem;letter-spacing:.16em;text-transform:uppercase;color:var(--brass);}
.theater-title{flex:1 1 440px;margin:0;font-family:var(--serif);font-weight:500;font-size:clamp(1.35rem,2.4vw,1.9rem);line-height:1.15;color:var(--on-ink);font-variant-numeric:lining-nums;}
.theater-yt{font-family:var(--sans);font-size:.8125rem;color:var(--on-ink-2);text-decoration:underline;text-decoration-color:var(--brass);text-decoration-thickness:1px;
  text-underline-offset:.25em;padding:.4rem 0;white-space:nowrap;transition:color .5s var(--ease-soft);}
.theater-yt:hover{color:var(--on-ink);}
.theater-close{position:absolute;right:clamp(1rem,4vw,3rem);top:clamp(.9rem,2.5vh,1.5rem);z-index:2;display:inline-flex;align-items:center;gap:.55rem;cursor:pointer;
  font-family:var(--sans);font-weight:500;font-size:.75rem;letter-spacing:.14em;text-transform:uppercase;color:var(--on-ink);
  background:transparent;border:1px solid rgba(244,240,231,.34);border-radius:1px;padding:.75rem 1.05rem;
  transition:border-color .6s var(--ease-soft),background-color .6s var(--ease-soft);}
.theater-close:hover,.theater-close:focus-visible{border-color:var(--on-ink);background-color:rgba(244,240,231,.07);}
.theater :focus-visible{outline:2px solid var(--brass);outline-offset:3px;}

/* ---------- reduced motion: no sweeps, zooms or drift; the fades stay ---------- */
@media (prefers-reduced-motion:reduce){
  .vid-media::after,.vid-play::after{display:none;}
  .vid-card:hover .vid-media img,.vid-card:focus-visible .vid-media img,
  .vid-card:hover .vid-play,.vid-card:focus-visible .vid-play{transform:none;}
  .theater-inner,.theater.on .theater-inner{transform:none;}
  .theater-frame::after{animation:none;opacity:.6;transform:none;}
}

/* the library's "Play video" button is gold on the navy ground (reveal.js adds the sweep) */
.lib .btn-ink{position:relative;overflow:hidden;isolation:isolate;color:var(--ink);background-color:var(--brass);
  background-image:linear-gradient(110deg,#a6854b 0%,#c7a76c 28%,#e4cd99 48%,#c2a068 66%,#a3824a 100%);background-size:200% 100%;background-position:0% 50%;
  box-shadow:inset 0 1px 0 rgba(255,247,226,.55),inset 0 -1px 0 rgba(84,58,22,.4),0 10px 24px -16px rgba(194,160,104,.45);}
.lib .btn-ink:hover,.lib .btn-ink:focus-visible{background-position:55% 50%;
  box-shadow:inset 0 1px 0 rgba(255,247,226,.7),inset 0 -1px 0 rgba(84,58,22,.4),0 14px 30px -16px rgba(194,160,104,.6);}
.lib-feature-meta .vid-title{font-size:clamp(1.6rem,2.4vw,2.15rem);font-weight:500;line-height:1.12;margin-top:.6rem;}
/* 12px floor for micro-labels on phones (the site-wide WP-2 legibility rule) */
@media (max-width:640px){ .vid-label,.vid-time,.vid-row .vid-time,.theater-label{font-size:.75rem;} }