/* ==========================================================================
   SPOTLIGHTS GROUP — page-specific CSS (V1)
   Covers: spotlights.html (index/hub) + adobe-max.html, sephoria.html,
   ign-live.html, street-art-alive.html (case-study detail pages).
   Source of truth: Figma file 1L78PvvlnqBfvCR1pQvS4e, page "Magic Box V1",
   frames 17:2, 18:2, 20:2, 19:2, 24:2.
   Loaded after css/site.css (which is frozen — do not edit it here).
   ========================================================================== */

/* ---------------------------------------------------------------------------
   SPOTLIGHTS INDEX — dark hero (frame 17:2, node 17:12)
   --------------------------------------------------------------------------- */
.spot-hero{
  position:relative;
  height:100svh;
  min-height:640px;
  color:#fff;
  background:var(--ink);
  overflow:hidden;
  display:flex;
  align-items:center;
}
.spot-hero img.bg{
  position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  opacity:.62;
}
/* directional scrim instead of flat image dimming: copy stays legible while
   the tunnel photo keeps its punch on the right */
.spot-hero-scrim{
  position:absolute;inset:0;z-index:1;
  background:
    linear-gradient(90deg, rgba(24,18,22,.82) 0%, rgba(24,18,22,.46) 44%, rgba(24,18,22,0) 72%),
    linear-gradient(0deg, rgba(24,18,22,.55) 0%, rgba(24,18,22,0) 32%);
}
/* the content block IS a .wrap — container math keeps the headline on the
   same left edge as the nav logo and every section below (the old rule
   carried its own edge padding and drifted off-grid on wide screens) */
.spot-hero-content{
  position:relative;z-index:2;
  /* the hero is a flex container, and a flex item shrink-wraps: without an
     explicit width the .wrap collapses to its 720px content and its auto
     margins centre THAT — floating the headline off the container grid */
  width:100%;
  padding-block:120px 80px;
}
.spot-hero-content h1,
.spot-hero-content p{max-width:720px}
.spot-hero-cta{display:flex;gap:14px;flex-wrap:wrap;margin-top:34px}
/* scroll cue moved to site.css as the shared .scroll-cue component */
.spot-hero-content .eyebrow{color:var(--yellow);display:block;margin-bottom:22px}
.spot-hero-content h1{
  font-family:var(--serif);font-weight:400;
  font-size:clamp(40px,7.2vw,92.2px);
  line-height:1.02;
  color:var(--cream);
}
.spot-hero-content h1 em{font-style:italic}
.spot-hero-content p{
  font-family:var(--serif);font-size:21px;line-height:1.5;
  color:rgba(255,250,240,.78);
  max-width:562px;margin-top:28px;
}

/* ---- "All Activations" grid (reuses .spotlights-grid / .spotlight-card from home) ---- */
/* T7: the cream sheet sits directly after the dark .spot-acts section in normal
   flow now (no pin to ride over), so the rounded-top/shadow hand-off is a plain
   always-on rule — a small negative margin equal to the radius is enough to let
   the dark background show through the rounded corners. */
.spot-index-section{
  position:relative;z-index:1;
  background:var(--cream);
  padding:96px 0 120px;
  /* client (Aug 6): straight section dividers site-wide */
  border-radius:0;
  margin-top:0;
}
.spot-index-head{
  display:grid;
  grid-template-columns:1.1fr .9fr;
  gap:clamp(40px,6vw,96px);
  align-items:end;
  margin-bottom:56px;
}
.spot-index-head .eyebrow{display:block;margin-bottom:18px}
.spot-index-head h2{font-family:var(--serif);font-weight:400;font-size:58px;line-height:1.08}
/* the CTA card lives inside this cream sheet — it was sitting flush against
   the video wall with no breathing room at all */
.spot-index-section .cs-cta-outer{margin-top:clamp(72px,9vw,120px)}
/* client (Aug 6): the intro paragraph read as a stray block floating in the
   corner — set it in the site's serif, seat it on the headline's baseline,
   and rule it off like the rest of the editorial furniture */
.spot-index-head .copy{
  font-family:var(--serif);font-size:17px;line-height:1.55;
  color:rgba(36,42,47,.66);
  max-width:44ch;
  align-self:end;
  border-top:1px solid rgba(36,42,47,.16);
  padding-top:14px;
}

/* ---------------------------------------------------------------------------
   CASE-STUDY DETAIL HERO (frames 18:2 / 20:2 / 19:2 / 24:2)
   --------------------------------------------------------------------------- */
.cs-hero{
  position:relative;
  min-height:666px;
  color:#fff;
  background:var(--ink);
  overflow:hidden;
  display:flex;
  align-items:center;
}
.cs-hero img.bg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:0}
.cs-hero .scrim{
  position:absolute;inset:0;z-index:1;
  background:
    linear-gradient(90deg, rgba(24,8,18,.66) 0%, rgba(24,8,18,.22) 62%),
    linear-gradient(0deg, rgba(24,8,18,.78) 0%, rgba(0,0,0,0) 58%);
}
/* client (rev 3, Aug 11): IGN's hero photo is uniformly busy — its copy zone
   gets a much deeper wash so the headline reads on desktop and mobile */
.cs-hero--deep .scrim{
  background:
    linear-gradient(90deg, rgba(24,8,18,.86) 0%, rgba(24,8,18,.62) 44%, rgba(24,8,18,.28) 78%),
    linear-gradient(0deg, rgba(24,8,18,.82) 0%, rgba(24,8,18,.18) 62%);
}
@media (max-width:900px){
  /* stacked mobile copy spans the full busy frame — flat wash + deeper foot */
  .cs-hero--deep .scrim{
    background:
      linear-gradient(rgba(24,8,18,.52), rgba(24,8,18,.52)),
      linear-gradient(0deg, rgba(24,8,18,.85) 0%, rgba(24,8,18,.25) 72%);
  }
}
.cs-hero-content{
  position:relative;z-index:2;
  /* client (Aug 6): the hero copy sits inside the site's content container,
     exactly like /spotlights — not hugging the viewport edge. The copy
     itself still measures 800px. */
  width:100%;
  max-width:calc(var(--container) + (var(--edge) * 2));  /* the .wrap formula */
  margin-inline:auto;
  padding:150px var(--edge) 90px;
}
.cs-hero-content h1,
.cs-hero-content p{max-width:800px}
.cs-hero-content .eyebrow{color:var(--yellow);display:block;margin-bottom:20px}
.cs-hero-content h1{
  font-family:var(--serif);font-weight:400;
  font-size:clamp(38px,6.6vw,86.4px);
  line-height:1.02;
}
.cs-hero-content h1 em{font-style:italic;color:var(--yellow)}
.cs-hero-content p{
  font-family:var(--serif);font-size:21px;line-height:1.5;
  color:rgba(255,255,255,.9);
  max-width:524px;margin-top:26px;
}
.cs-hero-badge{
  display:inline-flex;align-items:center;
  margin-top:24px;
  height:25px;padding:0 14px;
  border:1px solid rgba(255,255,255,.35);
  border-radius:100px;
  font-family:var(--label);font-weight:700;
  font-size:9.5px;letter-spacing:.16em;
  color:rgba(255,255,255,.7);
  width:fit-content;
}

/* ---------------------------------------------------------------------------
   THE BRIEF — content column + yellow "fact card" sidebar
   --------------------------------------------------------------------------- */
.brief-section{padding:88px 0 96px}
.brief-grid{
  display:grid;
  grid-template-columns:1fr 340px;
  gap:64px;
  align-items:start;
}
.brief-content .eyebrow{display:block;margin-bottom:18px}
.brief-content h2{
  font-family:var(--serif);font-weight:400;
  font-size:clamp(34px,4.2vw,58px);
  line-height:1.08;
  margin-bottom:34px;
}
.brief-content h2 em{font-style:italic;color:var(--burgundy)}
.brief-content p{
  font-family:var(--serif);font-size:21px;line-height:1.5;
  color:rgba(36,42,47,.78);
  max-width:62ch;
}
.brief-content p + p{margin-top:22px}
.brief-content .brief-placeholder{
  color:rgba(36,42,47,.4);
  font-style:normal;
}
.brief-tags{
  display:flex;flex-wrap:wrap;gap:0 32px;
  margin-top:34px;
}
.brief-tags span{
  font-family:var(--label);font-weight:700;
  font-size:10.5px;letter-spacing:.21em;
  color:var(--burgundy);
  white-space:nowrap;
}

.fact-card{
  background:var(--yellow);
  border-radius:24px;
  padding:46px 40px 40px;
}
.fact-card.fact-card--wide{max-width:100%}
.fact-card .fc-brand{
  display:flex;flex-direction:column;align-items:center;gap:10px;
  padding-bottom:22px;
  border-bottom:0;  /* deck skin: hairlines are yellow, via site.css */
  margin-bottom:20px;
}
.fact-card .fc-brand-logos{display:flex;align-items:center;gap:8px}
.fact-card .fc-brand-logos img{height:18px;width:auto}
.fact-card .fc-brand .fc-x{font-family:var(--serif);font-style:italic;opacity:.8;font-size:15px}
.fact-card .fc-brand-name{
  display:block;
  text-align:center;
  font-family:var(--label);font-weight:700;
  font-size:23px;letter-spacing:.1em;
  color:var(--ink);
}
.fact-card .fc-stats{
  font-family:var(--label);font-weight:700;
  font-size:13.5px;letter-spacing:.08em;line-height:1.55;
  color:var(--ink);
  text-align:center;
  margin-bottom:20px;
}
.fact-card .fc-solutions-label{
  display:block;text-align:center;
  font-family:var(--label);font-weight:700;
  font-size:10.5px;letter-spacing:.24em;
  color:var(--burgundy);
  margin-bottom:2px;
}
.fact-card ul.fc-list{margin-top:6px}
.fact-card ul.fc-list li{
  text-align:center;
  padding:18px 0;
  border-top:1px solid rgba(36,42,47,.14);
}
.fact-card ul.fc-list li:last-child{padding-bottom:0}
.fact-card ul.fc-list .fc-title{
  display:block;
  font-family:var(--label);font-weight:700;
  font-size:11.5px;letter-spacing:.18em;
  color:var(--ink);
  margin-bottom:6px;
}
.fact-card ul.fc-list .fc-sub{
  display:block;
  font-family:var(--cond);
  font-size:11px;line-height:1.5;
  color:rgba(36,42,47,.8);
}

/* ---------------------------------------------------------------------------
   THE FOOTPRINT — "Spaces used." cream-soft strip of dcards
   --------------------------------------------------------------------------- */
.footprint-section{background:#F7F0E2;padding:88px 0}
.footprint-section .section-head{margin-bottom:0 0 44px}
.footprint-grid{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:19px;
  margin-top:44px;
}
.footprint-grid.footprint-grid--3{grid-template-columns:repeat(3,1fr)}
.dcard{
  background:#fff;
  border:1px solid rgba(36,42,47,.12);
  border-radius:20px;
  padding:31px 26px 26px;
}
.dcard .dc-label{
  display:block;
  font-family:var(--label);font-weight:700;
  font-size:10.5px;letter-spacing:.24em;
  color:var(--burgundy);
  margin-bottom:14px;
}
.dcard h3{font-family:var(--serif);font-weight:400;font-size:23px;margin-bottom:20px}
.dcard .dc-sub{
  display:block;
  font-family:var(--cond);font-size:12.5px;
  color:rgba(36,42,47,.68);
  margin-bottom:8px;
}
.dcard .dc-size{
  display:block;
  font-family:var(--serif);font-size:21px;
  color:var(--burgundy);
}

/* ---------------------------------------------------------------------------
   THE FULL STORY — placeholder narrative section
   --------------------------------------------------------------------------- */
.story-section{padding:96px 0 88px}
.story-grid{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:56px;
  align-items:start;
}
.story-head .eyebrow{display:block;margin-bottom:20px}
.story-head h2{
  font-family:var(--serif);font-weight:400;
  font-size:clamp(30px,3.8vw,50px);
  line-height:1.1;
  margin-bottom:16px;
}
.story-head h2 em{font-style:italic;color:var(--burgundy)}
.story-head .story-placeholder-label{
  display:block;
  font-family:var(--label);font-weight:700;
  font-size:10.5px;letter-spacing:.19em;
  color:rgba(36,42,47,.45);
}
.story-copy p{
  font-family:var(--cond);font-size:14.5px;line-height:1.75;
  color:rgba(36,42,47,.68);
}
.story-copy p + p{margin-top:18px}

/* ---------------------------------------------------------------------------
   INSIDE THE BUILD — gallery grid
   --------------------------------------------------------------------------- */
.gallery-section{padding:0 0 96px}
.gallery-section .section-head{margin-bottom:44px}
.gallery-grid{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  grid-template-rows:260px 260px;
  gap:19px;
}
.gallery-grid img{width:100%;height:100%;object-fit:cover;border-radius:18px;display:block}
.gallery-grid .g-tall{grid-row:1 / span 2}

/* ---------------------------------------------------------------------------
   PREV / NEXT spotlight nav
   --------------------------------------------------------------------------- */
.spotlight-nav{
  display:flex;align-items:stretch;justify-content:space-between;
  /* padding-block only: this element also carries .wrap, and a padding
     shorthand zeroes wrap's horizontal edge padding — which is exactly what
     pushed the old text links out to the viewport edges */
  padding-block:8px 96px;
  gap:14px;flex-wrap:wrap;
}
/* prev/next as bordered cards, not bare text floating at the container edges */
.sp-nav{
  flex:0 1 400px;
  display:flex;flex-direction:column;gap:7px;
  padding:22px 28px;
  border:1px solid rgba(36,42,47,.16);
  border-radius:16px;
  transition:border-color .25s ease, transform .25s ease, box-shadow .25s ease;
}
.sp-nav--next{margin-left:auto;text-align:right;align-items:flex-end}
.sp-nav-k{
  font-family:var(--label);font-weight:700;
  font-size:10.5px;letter-spacing:.2em;text-transform:uppercase;
  color:var(--burgundy);
}
.sp-nav-n{
  font-family:var(--serif);font-weight:400;
  font-size:clamp(20px,2vw,27px);line-height:1.12;
  color:var(--ink);
}
.sp-nav:hover{
  border-color:rgba(154,30,27,.55);
  transform:translateY(-2px);
  box-shadow:0 16px 32px -20px rgba(36,42,47,.4);
}
@media (max-width:640px){
  .sp-nav{flex-basis:100%}
  .sp-nav--next{margin-left:0}
}
@media (prefers-reduced-motion:reduce){
  .sp-nav{transition:none}
  .sp-nav:hover{transform:none}
}

/* ---------------------------------------------------------------------------
   "LET'S MAKE MAGIC" case-study CTA panel (contact variant)
   --------------------------------------------------------------------------- */
.cs-cta-outer{
  max-width:var(--container);
  margin:0 auto 96px;
  /* matched to the home page's CTA: 15px gradient frame, 38px radius, and
     the same 95deg gradient — the 9px/36px version read as a thinner,
     duller border next to index.html's */
  border-radius:38px;
  padding:15px;
  overflow:hidden;
  background-image:linear-gradient(95deg,#8F6686 0%,#9A1E1B 32%,#C4571F 66%,#FFB71B 100%);
}
.cs-cta-inner{
  background:var(--cream);
  border-radius:27px;
  padding:56px;
  display:grid;
  grid-template-columns:.75fr 1.25fr;
  gap:40px;
  align-items:center;
}
.cs-cta-headline{
  font-family:var(--serif);font-weight:400;
  font-size:clamp(52px,6.4vw,88px);
  line-height:.92;
  color:var(--burgundy);
  letter-spacing:-.02em;
}
.cs-cta-right .site-logo{margin-bottom:26px}
.cs-cta-right .cs-cta-line{
  font-family:var(--serif);font-size:24px;line-height:1.3;
  color:var(--ink);
  padding-bottom:22px;
  border-bottom:1px solid var(--ink);
  max-width:440px;
}
.cs-cta-contact{
  display:flex;gap:64px;
  margin-top:26px;
}
.cs-cta-contact .cc-label{
  display:block;
  font-family:var(--label);font-weight:700;
  font-size:13.5px;color:var(--ink);
  margin-bottom:6px;
}
.cs-cta-contact .cc-sub{
  display:block;
  font-family:var(--cond);font-size:13px;
  color:rgba(36,42,47,.65);
  line-height:1.7;
}
.cs-cta-buttons{display:flex;gap:14px;margin-top:32px;flex-wrap:wrap}
.cs-cta-address{
  display:block;margin-top:26px;
  font-family:var(--cond);font-weight:600;font-size:10.5px;
  letter-spacing:.18em;text-transform:uppercase;
  color:rgba(36,42,47,.7);
}

/* ---------------------------------------------------------------------------
   RESPONSIVE
   --------------------------------------------------------------------------- */
@media (max-width:900px){
  .spot-hero-content,.cs-hero-content{padding-top:140px}
  .spot-index-head{grid-template-columns:1fr}
  .brief-grid{grid-template-columns:1fr}
  .fact-card{max-width:520px}
  .footprint-grid,.footprint-grid.footprint-grid--3{grid-template-columns:repeat(2,1fr)}
  .story-grid{grid-template-columns:1fr}
  .gallery-grid{grid-template-columns:repeat(2,1fr);grid-template-rows:repeat(3,220px)}
  .gallery-grid .g-tall{grid-row:auto}
  .cs-cta-inner{grid-template-columns:1fr;padding:40px}
  .cs-cta-headline{font-size:56px}
  .cs-cta-contact{gap:40px}
}
@media (max-width:480px){
  .spot-hero{min-height:100svh}
  .footprint-grid,.footprint-grid.footprint-grid--3{grid-template-columns:1fr;gap:12px}
  /* single-column footprint cards were four near-empty white slabs — pulled
     in to tight ruled rows so the list scans like the rest of the site */
  .dcard{padding:20px 20px 18px}
  .dcard .dc-label{margin-bottom:8px}
  /* the whole card taps through to the floor, not just the small label
     (client, Aug 9) — the link stretches invisibly over the card */
  .dcard{position:relative}
  .dcard .dc-label::after{content:'';position:absolute;inset:0}
  .dcard:active{background:rgba(36,42,47,.04)}
  .dcard h3{margin-bottom:10px;font-size:21px}
  .gallery-grid{grid-template-columns:1fr;grid-template-rows:repeat(6,240px)}
  .brief-content h2,.spot-index-head h2{font-size:36px}
  .brief-content p{font-size:18px}
  .cs-hero-content h1,.spot-hero-content h1{font-size:40px}
  .cs-cta-headline{font-size:44px}
  .cs-cta-contact{flex-direction:column;gap:18px}
  /* fc-brand-logos: the two ribbon logos don't shrink to fit a flex row this
     narrow (combined natural width ~283px vs ~198px available at 320px),
     pushing the second logo ~21px past the viewport edge. Scaling height
     down (both images keep their aspect ratio since width follows height)
     brings the pair back under the available width without distorting them. */
  .fact-card .fc-brand-logos img{height:14px}
}

/* ==========================================================================
   REAL-SITE REFINEMENT (v1.5) — ADDED BLOCK, appended per project brief.
   Everything above this line is the original V1 group stylesheet and is
   otherwise untouched. Covers: spotlights.html, adobe-max.html,
   sephoria.html, ign-live.html, street-art-alive.html.
   ========================================================================== */

/* ---- shared nav "active" state -----------------------------------------
   .nav-links a.is-active is only defined in css/company-group.css, which
   these five pages don't load. Ported here so "Spotlights" reads yellow
   in the header nav, matching every other section of the site. ---------- */
.nav-links a.is-active{color:var(--yellow)}

/* ---- case-study hero fills the viewport (comment #83) -------------------
   Overrides the fixed min-height:666px set earlier in this file. Content
   stays anchored the same way (flex + align-items:center, existing hero
   art/scrim/color treatment untouched) — only the box now fills the
   screen like index.html's own hero. --------------------------------- */
.cs-hero{min-height:100svh}

/* ---------------------------------------------------------------------------
   SPOTLIGHTS-GRID / SPOTLIGHT-CARD — ported from index.html's own
   page-scoped <style> block. spotlights.html's "All Activations" grid
   uses this exact markup (.spotlights-grid > a.spotlight-card > img.bg +
   .scrim + .frame-line + .sc-body), but the component was previously only
   defined inside index.html's inline <style> (and, separately, inside
   css/services-group.css for services.html) — never in this shared group
   file. As a result the cards on spotlights.html rendered completely
   unstyled: no fixed height, no cover image, no scrim/frame, no hover
   state. This is the same visual treatment as the home page, so it is
   reproduced verbatim rather than redesigned.
   --------------------------------------------------------------------------- */
.spotlights-grid{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:19px;
}
.spotlight-card{
  position:relative;
  height:440px;
  border-radius:28px;
  overflow:hidden;
  background:var(--ink);
  color:#fff;
  display:block;
}
.spotlight-card img.bg{
  position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:0;
  transition:transform .8s cubic-bezier(.2,.6,.2,1);
}
.spotlight-card:hover img.bg{transform:scale(1.05)}
.spotlight-card .scrim{
  position:absolute;inset:0;z-index:1;
  background:linear-gradient(0deg, rgba(18,12,16,.92) 0%, rgba(18,12,16,.38) 55%, rgba(18,12,16,.18) 100%);
}
.spotlight-card .frame-line{
  position:absolute;inset:22px;z-index:2;
  border:1px solid rgba(255,255,255,.38);
  border-radius:16px;
  pointer-events:none;
  transition:border-color .3s ease;
}
.spotlight-card:hover .frame-line{border-color:rgba(255,255,255,.62)}
.spotlight-card .sc-body{position:relative;z-index:3;height:100%;padding:78px 32px 32px;display:flex;flex-direction:column}
.spotlight-card .eyebrow{color:var(--yellow);font-size:11px;margin-bottom:16px}
.spotlight-card h3{
  font-family:var(--serif);
  font-weight:400;
  font-size:48px;
  line-height:1.05;
  margin-bottom:auto;
}
.spotlight-card .sc-sub{
  font-family:var(--serif);
  font-size:19px;
  color:rgba(255,255,255,.92);
  margin-top:24px;
}
.spotlight-card .sc-stat{
  font-family:var(--label);
  font-weight:700;
  font-size:10.5px;
  letter-spacing:.16em;
  color:rgba(255,255,255,.85);
  margin-top:22px;
}
.spotlight-card .sc-link{
  font-family:var(--label);
  font-weight:700;
  font-size:11px;
  letter-spacing:.14em;
  text-transform:uppercase;
  color:var(--yellow);
  margin-top:14px;
  display:inline-flex;
  align-items:center;
  gap:8px;
  transition:gap .25s ease;
}
.spotlight-card:hover .sc-link{gap:13px}

@media (max-width:900px){
  .spotlights-grid{grid-template-columns:repeat(2,1fr)}
}
@media (max-width:480px){
  .spotlights-grid{grid-template-columns:1fr}
  .spotlight-card{height:340px}
}


/* ---------------------------------------------------------------------------
   CASE-STUDY STAT RAIL — deck-sourced facts as pill chips under the hero copy
   --------------------------------------------------------------------------- */
.cs-stats{display:flex;flex-wrap:wrap;margin-top:30px}
.cs-stats span{
  font-family:var(--label);
  font-weight:700;
  font-size:10.5px;
  letter-spacing:.16em;
  text-transform:uppercase;
  color:rgba(255,250,240,.92);
  border:1px solid rgba(255,250,240,.35);
  border-radius:100px;
  padding:9px 18px;
  margin:0 10px 10px 0;
}
a.dc-label{transition:color .2s ease}
a.dc-label:hover{color:var(--burgundy)}


/* ==========================================================================
   THE WORK — vertical activations (T7 redesign)
   Each activation is a plain two-column row in normal document flow; its
   entrance uses the site's shared .rv/.rv-left/.rv-right/.rv-zoom reveal
   grammar (js/site.js + the rules above in this file's REAL-SITE block),
   so motion always plays on a fixed CSS-transition clock, never scroll
   position. Odd acts run image-left/text-right; .spot-act--flip mirrors it.
   ========================================================================== */
.spot-acts{position:relative;z-index:2;background:var(--ink);color:var(--cream);padding:132px 0 56px}
.spot-acts-head{margin-bottom:64px}
.spot-acts-head .eyebrow{color:var(--yellow)}
.spot-act{padding:56px 0}
.spot-act + .spot-act{border-top:1px solid rgba(255,250,240,.14)}
.spot-act-in{
  position:relative;
  display:grid;grid-template-columns:1.15fr 1fr;
  gap:clamp(28px,4.5vw,70px);align-items:center;
}
.spot-act--flip .spot-act-in{grid-template-columns:1fr 1.15fr}
/* ghost chapter numeral, sitting behind the row at the outer content edge —
   same watermark-numeral idea as the rest of the site's chaptered sections,
   just static now: no JS needs to update it since nothing is pinned */
.spot-act-num{
  position:absolute;top:-34px;left:0;z-index:0;
  font-family:var(--serif);font-weight:400;line-height:.8;
  font-size:clamp(90px,10vw,168px);
  color:transparent;
  -webkit-text-stroke:1px rgba(255,250,240,.16);
  user-select:none;pointer-events:none;
}
.spot-act--flip .spot-act-num{left:auto;right:0}
.spot-act-media{
  position:relative;z-index:1;
  border-radius:18px;overflow:hidden;
  box-shadow:0 44px 90px -38px rgba(0,0,0,.8);
}
.spot-act-media img{display:block;width:100%;height:clamp(320px,52vh,560px);object-fit:cover}
.spot-act-info{position:relative;z-index:1}
.spot-act-info .eyebrow{color:var(--yellow);display:block;margin-bottom:18px}
.spot-act-info h2{
  font-family:var(--serif);font-weight:400;
  font-size:clamp(38px,4.4vw,64px);line-height:1.0;letter-spacing:-.01em;
  color:var(--cream);
}
.spot-act-info h2 em{font-style:italic;color:var(--yellow)}
.spot-act-info p{
  font-family:var(--serif);font-size:19px;line-height:1.55;
  color:rgba(255,250,240,.78);
  max-width:44ch;margin-top:20px;
}
.spot-act-stat{
  display:block;margin-top:24px;
  font-family:var(--label);font-weight:600;font-size:11.5px;
  letter-spacing:.22em;text-transform:uppercase;
  color:rgba(255,250,240,.6);
}
.spot-act-info .btn{margin-top:28px}

@media (max-width:900px){
  .spot-acts{padding:100px 0 32px}
  .spot-act{padding:40px 0}
  .spot-act-in,.spot-act--flip .spot-act-in{grid-template-columns:1fr}
  /* flipped acts put the text first in the DOM (image-right on desktop);
     stacked on a phone every act should read image-then-story the same way */
  .spot-act--flip .spot-act-media{order:-1}
  .spot-act-num{display:none}
  .spot-act-media img{height:clamp(220px,40vh,360px)}
  /* client, Aug 9: phone heroes fill the viewport like desktop */
  .spot-hero{height:auto;min-height:100svh}
  .spot-hero-content{padding-block:150px 90px}
}


/* ---------------------------------------------------------------------------
   PAST EVENTS VIDEO WALL — YouTube selection (per events.magicboxla.com),
   playing in an on-brand modal
   --------------------------------------------------------------------------- */
.vid-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:19px}
.vid-card{
  position:relative;display:block;
  aspect-ratio:3/4;border-radius:20px;overflow:hidden;
  border:0;padding:0;cursor:pointer;background:var(--ink);
}
.vid-card img{
  position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  transition:transform .9s cubic-bezier(.2,.6,.2,1);
}
/* T8: Revolt has no matching in-repo photo yet, so its card fills the same
   box with the brand gradient instead of an unrelated/guessed image. .grain
   (site.css) sets position:relative; this rule wins on that one property
   because it loads after site.css, so the placeholder still fills the card
   like .vid-card img does. */
.vid-card-ph{position:absolute;inset:0}
/* T8 fix (client-flagged): the bare gradient read as a missing/broken image
   next to its three photographic siblings. Rather than invent a Revolt photo
   or relabel the card, it now carries the same outlined-serif "ghost type"
   watermark .spot-act-num already uses higher on this page, corner-anchored
   like that numeral so it never collides with the centered .vid-pill label
   -- an honest, on-brand placeholder tile instead of empty space. */
.vid-card-ph-mark{
  position:absolute;top:24px;left:24px;z-index:0;
  font-style:italic;font-weight:400;line-height:1;
  font-size:clamp(26px,4.6vw,36px);
  color:transparent;
  -webkit-text-stroke:1px rgba(255,250,240,.45);
  user-select:none;
}
.vid-card::after{
  content:"";position:absolute;inset:0;
  background:linear-gradient(0deg, rgba(20,14,18,.42) 0%, rgba(20,14,18,.05) 45%);
  transition:background .4s ease;
}
.vid-card:not(.is-pending):hover img{transform:scale(1.05)}
.vid-pill{
  position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);z-index:2;
  display:inline-flex;align-items:center;gap:10px;
  padding:11px 20px;border-radius:100px;
  background:rgba(255,250,240,.94);color:var(--ink);
  font-family:var(--label);font-weight:700;
  font-size:10.5px;letter-spacing:.2em;text-transform:uppercase;
  white-space:nowrap;
  transition:background .3s ease, transform .3s ease;
}
.vid-pill i{
  width:0;height:0;display:block;
  border-style:solid;border-width:5px 0 5px 8px;
  border-color:transparent transparent transparent var(--ink);
}
.vid-card:not(.is-pending):hover .vid-pill{background:var(--yellow);transform:translate(-50%,-50%) scale(1.05)}
.vid-card:focus-visible{outline:3px solid var(--yellow);outline-offset:3px}

/* T8: pending state (data-yt not filled in yet) — no play icon, muted pill,
   card is a disabled <button> so it isn't reachable by keyboard or click */
.vid-card.is-pending{cursor:default}
.vid-card.is-pending:disabled{opacity:1}
.vid-card.is-pending .vid-pill{background:rgba(255,250,240,.72);color:rgba(36,42,47,.75)}
.vid-card.is-pending .vid-pill i{display:none}

.vid-modal{
  position:fixed;inset:0;z-index:200;
  display:flex;align-items:center;justify-content:center;
  padding:4vw;
  background:rgba(20,14,18,.86);
  -webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);
  opacity:0;transition:opacity .3s ease;
}
/* the browser's default [hidden]{display:none} rule loses to the author
   display:flex above -- without this override, a "hidden" modal still
   renders as a full-viewport, pointer-events:auto layer at opacity 0,
   silently eating clicks aimed at whatever happens to sit underneath it
   (confirmed live: the four .vid-card buttons a few sections down were
   entirely unclickable by mouse as a result). JS still only flips [hidden]
   off/on at the moments it always did (open()/close() in js/spotlights.js),
   so this is a pure display-when-closed fix, nothing else changes. */
.vid-modal[hidden]{display:none}
.vid-modal.is-open{opacity:1}
.vid-modal-frame{position:relative;width:min(1080px,100%)}
.vid-embed{
  aspect-ratio:16/9;border-radius:18px;overflow:hidden;
  background:#000;box-shadow:0 50px 110px -40px rgba(0,0,0,.9);
}
.vid-embed iframe{width:100%;height:100%;border:0;display:block}
.vid-close{
  position:absolute;right:0;top:-52px;
  width:40px;height:40px;border-radius:100px;border:0;cursor:pointer;
  background:rgba(255,250,240,.14);color:var(--cream);
  font-size:22px;line-height:1;
  transition:background .25s ease;
}
.vid-close:hover{background:rgba(255,250,240,.3)}
@media (max-width:900px){
  .vid-grid{grid-template-columns:repeat(2,1fr)}
}
@media (max-width:480px){
  .vid-grid{grid-template-columns:1fr}
  .vid-card{aspect-ratio:16/10}
}
@media (prefers-reduced-motion:reduce){
  .vid-card img,.vid-pill,.vid-modal{transition:none}
}