/* =====================================================================
   PVCA Season 4 — UI Uplift v2
   Loaded AFTER the original styles.css. Overrides only — no rules
   in the original are deleted; everything here is additive.

   ────────────────────────────────────────────────────────────────────
   FOR DEVS
   ────────────────────────────────────────────────────────────────────
   • To revert any single override, remove or comment out that rule.
   • To revert the ENTIRE uplift, remove these two lines from the HTML:
       <link rel="stylesheet" href="styles-v2.css?v=…" />
       <script src="v2-reveal.js?v=…" defer></script>
   • New custom properties live under the --v2-* namespace so they don't
     clash with the original tokens in styles.css.
   • All animations honor `prefers-reduced-motion: reduce`.
   • SVG icons are inlined as data URIs (no extra HTTP requests).

   OFF-LIMITS (do not touch per brief):
     • The PVCA crest logo (.hero-ilu img)
     • The trophy image     (.hero-trophy img)
     • The red background colour ramp on .hero-bg

   ────────────────────────────────────────────────────────────────────
   TABLE OF CONTENTS
   ────────────────────────────────────────────────────────────────────
     PASS 1  · Nav, hero surrounds, CTAs, countdown
     PASS 1  · Partners (cream editorial band)
     PASS 1  · Section heads, nominees, jury, footer
     PASS 1  · Tablet (≤1024) + mobile (≤760) breakpoints
     PASS 1  · Modals (vote, contest, category, success)
     PASS 1  · Inner pages (page-hero, terms, cine, gallery)
     PASS 1  · Hero entrance + scroll-reveal animations
     PASS 2  · Per-section polish — deeper refinements on
                nominee cards, jury cards, all-categories tile grid,
                video carousel, gallery, contest band
     PASS 3  · Background texture — subtle SVG film-grain overlay
     PASS 4  · Loading / skeleton shimmer for CMS-driven images
     PASS 5  · Iconography — SVG icons replacing emoji anchors

   COMPANION SCRIPT
     v2-reveal.js — runs the scroll-reveal observer, hero entrance
     sequencer, and image shimmer wrapper. ~110 lines, no deps.
   ===================================================================== */

:root {
  --v2-bg-dark:    #1a0506;
  --v2-paper:      #f5ecd3;
  --v2-paper-2:    #ebdfc5;
  --v2-ink-deep:   #2a0908;
  --v2-ink-paper:  #2a1410;
  --v2-rule:       rgba(212, 166, 74, 0.28);
  --v2-rule-soft:  rgba(212, 166, 74, 0.14);
  --v2-shadow-lg:  0 30px 80px -30px rgba(0,0,0,0.55);
  --v2-shadow-md:  0 14px 36px -16px rgba(0,0,0,0.5);
}

/* ─── Global typography polish ────────────────────────────────── */
body {
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
}

/* ──────────────────────────────────────────────────────────────
   NAV — editorial, restrained, monospace eyebrow
   ────────────────────────────────────────────────────────────── */
.nav {
  padding: 18px 40px;
  background: rgba(20, 4, 6, 0.82);
  backdrop-filter: blur(12px) saturate(130%);
  border-bottom: 1px solid rgba(212, 166, 74, 0.10);
  transition: padding .35s var(--easing), background .35s var(--easing),
              backdrop-filter .35s var(--easing), border-color .35s var(--easing);
}
.nav::before { display: none; }      /* kill old underline */
.nav.scrolled {
  padding: 10px 40px;
  background: rgba(12, 6, 6, 0.94);
  backdrop-filter: blur(22px) saturate(140%);
  border-bottom: 1px solid var(--v2-rule-soft);
}

/* Dark theme — deeper tint */
body.theme-dark .nav {
  background: rgba(14, 3, 6, 0.88);
  border-bottom-color: rgba(255, 200, 100, 0.12);
}

.nav-brand { gap: 14px; }
.nav-brand .crest {
  width: 38px; height: 38px;
  border-color: var(--v2-rule);
  box-shadow: 0 0 0 4px rgba(0,0,0,0.18);
}
.nav-brand .crest::after { display: none; }
.nav-brand .crest-text .kn {
  font-family: var(--font-headline);
  font-size: 15px;
  font-weight: 600;
  letter-spacing: 0;
  color: var(--ivory);
}
.nav-brand .crest-text .en {
  font-size: 9.5px;
  letter-spacing: 0.22em;
  color: var(--gold);
  opacity: 0.9;
}

.nav-links { gap: 2px; }
.nav-link {
  padding: 10px 14px;
  font-size: 13px;
  font-weight: 500;
  letter-spacing: 0.02em;
  color: rgba(255, 240, 214, 0.78);
  transition: color .2s var(--easing);
}
.nav-link:hover { color: var(--gold-bright); }
.nav-link::after {
  content: ""; position: absolute;
  left: 14px; right: 14px; bottom: 4px;
  height: 1px;
  background: var(--gold-bright);
  transform: scaleX(0); transform-origin: center;
  transition: transform .25s var(--easing);
}
.nav-link:hover::after { transform: scaleX(1); }
.nav-link.active { color: var(--gold-bright); }
.nav-link.active::after {
  transform: scaleX(1); height: 1px; bottom: 4px; left: 14px; right: 14px;
  background: var(--gold-bright);
}

.lang-toggle {
  margin-left: 10px;
  padding: 3px;
  border-radius: 999px;
  border: 1px solid var(--v2-rule);
  background: rgba(0,0,0,0.18);
}
.lang-toggle button {
  padding: 5px 12px;
  font-size: 11px;
  letter-spacing: 0.08em;
  border-radius: 999px;
}
.lang-toggle button.on {
  background: var(--gold);
  color: var(--v2-ink-deep);
}

.nav-cta {
  padding: 10px 20px;
  font-size: 12px;
  letter-spacing: 0.12em;
  background: var(--gold-bright);
  color: var(--v2-ink-deep);
  border: 1px solid var(--gold-bright);
  border-radius: 999px;
  text-transform: uppercase;
  font-weight: 700;
}
.nav-cta::before { display: none; }
.nav-cta:hover {
  background: #ffd685;
  border-color: #ffd685;
  box-shadow: 0 8px 24px -8px rgba(240, 200, 112, 0.6);
  transform: translateY(-1px);
}

/* ──────────────────────────────────────────────────────────────
   HERO — keep red bg, kill orange beams, refine surrounds
   ────────────────────────────────────────────────────────────── */
.hero {
  padding: 110px 0 36px;
}

/* Soften the existing hero gradient — remove orange "spotlight" tint
   from the bg layers, keep the red ramp. */
.hero-bg {
  background:
    radial-gradient(ellipse 70% 50% at 50% 8%, rgba(255, 196, 79, 0.22), transparent 62%),
    radial-gradient(ellipse 100% 90% at 50% 110%, rgba(0,0,0,0.55), transparent 65%),
    linear-gradient(180deg, #c80812 0%, #a3000a 50%, #5e0307 100%);
}
/* keep the subtle film-strip texture override (already in styles.css) */

/* KILL the orange spotlight beams entirely — they're the most "print-ad"
   element on the page. Replace with a soft top vignette only. */
.spotlights { display: none; }

/* Subtle vignette/edge fade on the hero — modern, restrained */
.hero::after {
  content: "";
  position: absolute; inset: 0;
  pointer-events: none;
  z-index: -1;
  background:
    radial-gradient(ellipse 80% 60% at 50% 0%, rgba(255, 215, 130, 0.10), transparent 55%),
    radial-gradient(ellipse 110% 70% at 50% 100%, rgba(0,0,0,0.35), transparent 55%);
}

/* Hero grid — give the columns more breathing room */
.hero-grid {
  grid-template-columns: 1.15fr 0.9fr;
  gap: 36px;
  align-items: center;
}

/* ============================================================
   TROPHY — Option 3: Spotlight reveal & gold dust
   The trophy lifts from darkness, a hard radial spotlight blooms
   behind it, gold dust drifts upward past the frame, and four
   sparkles twinkle on the wreath area at offset intervals. All
   pure CSS, looped infinite. JSX provides 12 .trophy-dust spans
   with inline custom-property positioning (--x, --sway) and 4
   .trophy-spark .s1-.s4 anchors.
   ============================================================ */
.hero-trophy {
  position: relative;
  isolation: isolate;
  overflow: hidden;
}

/* Trophy image — lifts from below, brightens as it arrives, then
   settles with a tiny upward float. The drop-shadow grounds it. */
.hero-trophy img {
  position: relative;
  z-index: 3;
  filter: drop-shadow(0 18px 24px rgba(0, 0, 0, 0.7));
  animation: hero-trophy-lift 9s ease-out infinite;
  will-change: transform, filter, opacity;
}
@keyframes hero-trophy-lift {
  0%   { transform: translateY(28px); filter: drop-shadow(0 18px 24px rgba(0,0,0,0.9)) brightness(0.4); opacity: 0; }
  14%  { opacity: 1; }
  25%  { transform: translateY(0);    filter: drop-shadow(0 18px 24px rgba(0,0,0,0.7)) brightness(1); }
  80%  { transform: translateY(-4px); opacity: 1; }
  100% { transform: translateY(-4px); opacity: 1; }
}

/* Hard radial spotlight behind the trophy — pulses gently to keep
   the stage feeling alive. mix-blend-mode: screen so it adds light
   on top of the maroon hero backdrop without darkening it. */
.hero-trophy .trophy-spot {
  position: absolute;
  left: 50%;
  top: 55%;
  width: 110%;
  aspect-ratio: 1;
  transform: translate(-50%, -50%);
  background: radial-gradient(closest-side,
    rgba(255, 230, 160, 0.55) 0%,
    rgba(255, 210, 130, 0.22) 30%,
    rgba(255, 210, 130, 0.08) 50%,
    transparent 70%);
  filter: blur(6px);
  z-index: 1;
  animation: hero-trophy-spot 6s ease-in-out infinite;
  mix-blend-mode: screen;
  pointer-events: none;
}
@keyframes hero-trophy-spot {
  0%, 100% { opacity: 0.85; transform: translate(-50%, -50%) scale(1); }
  50%      { opacity: 1.0;  transform: translate(-50%, -50%) scale(1.04); }
}

/* Gold dust — small embers that drift upward past the trophy.
   Position/size/timing come from inline CSS custom properties set
   in the JSX, so we don't have to rely on :nth-child indexing
   (which would shift if we ever add/remove sibling layers). */
.hero-trophy .trophy-dust {
  position: absolute;
  left: 50%;
  bottom: 6%;
  border-radius: 50%;
  background: rgba(255, 230, 160, 0.95);
  box-shadow: 0 0 6px rgba(255, 210, 130, 0.9);
  z-index: 4;
  opacity: 0;
  animation-name: hero-trophy-dust;
  animation-timing-function: linear;
  animation-iteration-count: infinite;
  pointer-events: none;
}
@keyframes hero-trophy-dust {
  0%   { transform: translate(calc(-50% + var(--x, 0%)), 0) scale(0.6); opacity: 0; }
  10%  { opacity: 1; }
  50%  { transform: translate(calc(-50% + var(--x, 0%) + var(--sway, 0px)), -260px) scale(1); }
  90%  { opacity: 0.9; }
  100% { transform: translate(calc(-50% + var(--x, 0%)), -540px) scale(0.4); opacity: 0; }
}

/* Sparkle twinkles on the wreath area — four anchor points with
   staggered delays so they fire at different beats in the loop.
   Each is a small radial dot with two crossed light streaks
   (::before horizontal, ::after vertical) for a four-point star. */
.hero-trophy .trophy-spark {
  position: absolute;
  z-index: 6;
  width: 14px; height: 14px;
  opacity: 0;
  background: radial-gradient(circle at 50% 50%, white 0%, rgba(255, 230, 160, 0.9) 25%, transparent 60%);
  border-radius: 50%;
  pointer-events: none;
  filter: blur(0.4px);
  mix-blend-mode: screen;
}
.hero-trophy .trophy-spark::before,
.hero-trophy .trophy-spark::after {
  content: "";
  position: absolute;
  left: 50%; top: 50%;
  width: 26px;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(255, 240, 200, 0.9), transparent);
  transform: translate(-50%, -50%);
}
.hero-trophy .trophy-spark::after {
  transform: translate(-50%, -50%) rotate(90deg);
}
.hero-trophy .trophy-spark.s1 { left: 28%; top: 22%; animation: hero-trophy-twinkle 4.2s ease-in-out infinite; animation-delay: 0.6s; }
.hero-trophy .trophy-spark.s2 { left: 22%; top: 44%; animation: hero-trophy-twinkle 4.2s ease-in-out infinite; animation-delay: 2.1s; }
.hero-trophy .trophy-spark.s3 { left: 40%; top: 18%; animation: hero-trophy-twinkle 4.2s ease-in-out infinite; animation-delay: 3.4s; }
.hero-trophy .trophy-spark.s4 { left: 34%; top: 56%; animation: hero-trophy-twinkle 4.2s ease-in-out infinite; animation-delay: 1.4s; }

@keyframes hero-trophy-twinkle {
  0%, 100% { opacity: 0; transform: scale(0.4); }
  50%      { opacity: 1; transform: scale(1.1); }
}

/* Reduced motion: hold everything in the settled state.
   Trophy stays in place at full opacity, spot stays lit, dust and
   sparkles pause out of view. */
@media (prefers-reduced-motion: reduce) {
  .hero-trophy img,
  .hero-trophy .trophy-spot,
  .hero-trophy .trophy-dust,
  .hero-trophy .trophy-spark {
    animation: none !important;
  }
  .hero-trophy img    { transform: none; opacity: 1; }
  .hero-trophy .trophy-spot { opacity: 0.85; }
  .hero-trophy .trophy-dust { opacity: 0; }
  .hero-trophy .trophy-spark { opacity: 0; }
}

/* Hero text column — tighten alignment */
.hero-text { gap: 20px !important; }
.hero-ilu {
  max-width: 520px;
  border: 2px solid var(--gold-bright);
  border-radius: 18px;
  padding: 14px;
  background: #fe0f22 !important;
  box-shadow:
    0 0 0 1px rgba(0, 0, 0, 0.3),
    0 12px 36px -16px rgba(240, 200, 112, 0.45),
    inset 0 0 24px rgba(240, 200, 112, 0.08);
}
.hero-ilu::after { display: none; }   /* kill the corner mask cut-out — too busy */

/* Headline-sponsor plate at the top-right corner of the red ILU.
   The Casagrand mark is dark text on transparent — it needs a white
   plate to stay legible against the red. Equal padding around the
   logo gives the "white margin all around" the brand team asked for.
   Width scales by breakpoint so the plate stays proportional to the
   ILU as it shrinks down to tablet (420px) and mobile (280px). */
/* Outer wrapper: positions the badge cluster horizontally over the
   white wordmark text of the PVCA logo (ಪ್ರಜಾ_ವಾಣಿ · ಕನ್ನಡ ಸಿನಿ ಸಮ್ಮಾನ),
   which sits in the RIGHT half of the ILU because the floral / film-
   strip decoration occupies the left half. left: 68% + translateX
   centres the block on the wordmark column rather than the ILU's
   geometric centre. */
.hero-ilu-sponsor {
  position: absolute;
  top: 28px;
  left: 68%;
  transform: translateX(-50%);
  z-index: 5;
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  pointer-events: none;
}
/* White plate around the Casagrand mark — equal padding on all sides
   so the dark wordmark has consistent breathing room. */
.hero-ilu-sponsor-plate {
  background: #fff;
  padding: 5px 7px;
  border-radius: 3px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.18);
}
/* Higher specificity (.hero-ilu .hero-ilu-sponsor-plate img → 0,2,1)
   so this rule wins against `.hero-ilu img` (0,1,1) even after the
   direct-child fix in styles.css — belt and suspenders. */
.hero-ilu .hero-ilu-sponsor-plate img {
  display: block;
  width: 120px;
  height: auto;
}
/* "Presents" sits OUTSIDE the plate, centered below it, in white
   so it reads cleanly against the red ILU backdrop. */
.hero-ilu-sponsor .presents {
  font-family: var(--font-headline, serif);
  font-style: italic;
  font-size: 13px;
  font-weight: 500;
  letter-spacing: 0.02em;
  color: #fff;
  line-height: 1;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.4);
}
@media (max-width: 980px) {
  .hero-ilu-sponsor-plate { padding: 5px 8px; }
  .hero-ilu .hero-ilu-sponsor-plate img { width: 102px; }
  .hero-ilu-sponsor .presents { font-size: 11px; }
}
@media (max-width: 640px) {
  .hero-ilu-sponsor { top: 20px; gap: 3px; }
  .hero-ilu-sponsor-plate { padding: 4px 6px; border-radius: 3px; }
  .hero-ilu .hero-ilu-sponsor-plate img { width: 84px; }
  .hero-ilu-sponsor .presents { font-size: 9px; }
}

/* Dark theme: richer gold border */
body.theme-dark .hero-ilu {
  border-color: var(--v2-dark-gold-1);
  box-shadow:
    0 0 0 1px rgba(0, 0, 0, 0.4),
    0 16px 44px -16px rgba(255, 200, 100, 0.55),
    inset 0 0 28px rgba(255, 200, 100, 0.12);
}

.hero-tagline {
  margin: 18px auto 0 !important;
  max-width: 460px !important;
  font-size: 15px;
  letter-spacing: 0.01em;
  color: rgba(255, 240, 214, 0.86);
  text-wrap: pretty;
}

/* CTA bar — clean, restrained, gold-rule top */
.hero-cta-bar {
  margin-top: 40px;
  padding-top: 28px;
  border-top: 1px solid var(--v2-rule-soft);
  gap: 12px;
}
.hero-cta-bar::before {
  width: 80px; height: 1px;
  background: var(--gold-bright);
  top: -1px;
}

/* Buttons — modern, less shimmer */
.btn-primary {
  padding: 14px 28px;
  font-size: 12px;
  letter-spacing: 0.16em;
  background: var(--gold-bright);
  color: var(--v2-ink-deep);
  border: 1px solid var(--gold-bright);
  border-radius: 999px;
  box-shadow: 0 8px 24px -10px rgba(240, 200, 112, 0.5);
  text-transform: uppercase;
}
.btn-primary::before { display: none; }
.btn-primary:hover {
  background: #ffd685;
  border-color: #ffd685;
  box-shadow: 0 14px 36px -12px rgba(240, 200, 112, 0.7);
}
.btn-ghost {
  padding: 14px 28px;
  font-size: 12px;
  letter-spacing: 0.16em;
  border: 1px solid rgba(255, 240, 214, 0.32);
  border-radius: 999px;
  color: var(--ivory);
  text-transform: uppercase;
  background: transparent;
}
.btn-ghost:hover {
  border-color: var(--gold-bright);
  color: var(--gold-bright);
  background: transparent;
}

/* ─── COUNTDOWN — clean unit cards ─────────────────────────── */
.countdown-wrap {
  margin: 36px auto 0;
  max-width: 680px;
  padding: 18px 22px 16px;
  border: 1px solid var(--v2-rule);
  background: rgba(0, 0, 0, 0.22);
  border-radius: 14px;
  position: relative;
}
.countdown-wrap::before,
.countdown-wrap::after { display: none; }

.countdown-label {
  margin-bottom: 14px;
  padding-bottom: 12px;
  border-bottom: 1px solid var(--v2-rule-soft);
}
.countdown-label .l {
  font-size: 10.5px;
  letter-spacing: 0.22em;
  color: var(--gold);
}
.countdown-label .when {
  font-family: var(--font-headline);
  font-size: 12.5px;
  letter-spacing: 0.06em;
  color: rgba(255, 240, 214, 0.78);
}

.countdown { gap: 8px; }
.countdown .unit {
  background: rgba(255, 240, 214, 0.04);
  border: 1px solid var(--v2-rule-soft);
  border-right-width: 1px;
  border-radius: 10px;
  padding: 10px 4px 8px;
  gap: 4px;
}
.countdown .unit .n {
  font-family: var(--font-headline);
  font-weight: 700;
  font-size: 30px;
  color: var(--ivory);
  text-shadow: none;
  letter-spacing: 0;
  line-height: 1;
}
.countdown .unit .l {
  font-size: 9.5px;
  letter-spacing: 0.2em;
  color: var(--gold);
  opacity: 0.85;
}

/* ──────────────────────────────────────────────────────────────
   PARTNERS — cream editorial band (modern, web-friendly)
   ────────────────────────────────────────────────────────────── */
.partners {
  padding: 56px 0 64px;
  background: linear-gradient(180deg, var(--v2-paper) 0%, var(--v2-paper-2) 100%);
  border-top: 1px solid rgba(0,0,0,0.06);
  border-bottom: 1px solid rgba(0,0,0,0.06);
}
.partners-head { margin-bottom: 32px; }
.partners-head .flourish,
.partners-head .t {
  color: var(--v2-ink-paper);
}
.partners-head .flourish {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.32em;
  text-transform: uppercase;
  color: #8a6724;
  display: inline-flex;
  align-items: center;
  gap: 14px;
}
.partners-head .flourish::before,
.partners-head .flourish::after {
  content: ""; width: 28px; height: 1px;
  background: rgba(138, 103, 36, 0.45);
}
.partners-head .t {
  font-family: var(--font-display);
  font-size: 24px;
  font-weight: 600;
  margin-top: 10px;
  color: var(--v2-ink-paper);
}

.partner-item .partner-type {
  font-family: var(--font-mono);
  font-size: 9px;
  letter-spacing: 0.28em;
  color: #8a6724;
  text-transform: uppercase;
  margin-bottom: 10px;
  /* Centred dot + text. Tiny gold dot before the label echoes the
     eyebrow language used across the site. */
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
}
.partner-item .partner-type::before {
  content: "";
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: var(--gold);
  flex-shrink: 0;
}
.partner-card {
  background: #fff;
  border: 1px solid rgba(0,0,0,0.06);
  border-radius: 12px;
  /* Generous inner padding so self-branded logos (Akshaya black box,
     Canara blue, Sudarshan gradient) become "framed plaques within
     a plaque" rather than overwhelming the row. Bare logos like HMD
     still fill the card via object-fit. */
  padding: 18px 22px;
  min-height: 108px;
  box-shadow:
    0 1px 0 rgba(0,0,0,0.04),
    0 10px 28px -18px rgba(0,0,0,0.20),
    inset 0 0 0 1px rgba(255,255,255,0.6);
  transition: transform .25s var(--easing), box-shadow .25s var(--easing), border-color .25s var(--easing);
  position: relative;
  overflow: hidden;
}
/* Gold hairline at the bottom of every card — editorial signature
   that reads as an "exhibit wall." Always visible; on hover it
   thickens and brightens. The pseudo sits 1px ABOVE the border so it
   doesn't get clipped by the 12px border-radius at the bottom corners. */
.partner-card::after {
  content: "";
  position: absolute;
  left: 8%;
  right: 8%;
  bottom: 0;
  height: 2px;
  background: linear-gradient(90deg, transparent, var(--gold) 20%, var(--gold) 80%, transparent);
  transform-origin: center;
  transition: opacity .35s var(--easing), height .35s var(--easing), left .35s var(--easing), right .35s var(--easing);
  opacity: 0.65;
  pointer-events: none;
}
.partner-card:hover {
  /* Subtle 3px lift + pronounced gold border + warmer ambient shadow.
     White plate stays white — no background swap. */
  transform: translateY(-3px);
  border-color: rgba(212, 166, 74, 0.65);
  box-shadow:
    0 1px 0 rgba(0,0,0,0.04),
    0 20px 44px -16px rgba(212, 166, 74, 0.35),
    inset 0 0 0 1px rgba(255,255,255,0.85);
}
.partner-card:hover::after {
  left: 4%;
  right: 4%;
  opacity: 1;
  height: 3px;
}
.partner-card .logo-text {
  color: var(--v2-ink-paper);
  font-family: var(--font-display);
}
/* Static (non-clickable) partner — no URL field in the CMS. Show
   default cursor so the card doesn't pretend to be a link, but keep
   the same hover lift/hairline for visual consistency. */
.partner-item-static {
  cursor: default;
}
/* Fill the card's content area. The generous padding (18×22) IS the
   visual frame — it keeps self-branded logos (Akshaya, Canara,
   Sudarshan) from touching the card edges so they read as framed
   plaques. Bare-glyph logos scale up to fill the same content area. */
.partner-card img {
  width: 100%;
  height: 100%;
  max-width: none;
  max-height: none;
  object-fit: contain;
  display: block;
}

.partner-arrow {
  background: #fff;
  border: 1px solid rgba(0,0,0,0.10);
  color: var(--v2-ink-paper);
  width: 36px; height: 36px;
  border-radius: 999px;
  box-shadow: 0 2px 8px rgba(0,0,0,0.06);
  /* align-self:center centres on the full partner-item height (label + card).
     The label area is ~22px tall, so shift down by half that to visually
     centre the arrow on the card box only. */
  margin-top: 11px;
}
.partner-arrow:hover {
  background: var(--gold-bright);
  border-color: var(--gold-bright);
  color: var(--v2-ink-deep);
}
.partner-dot {
  background: rgba(138, 103, 36, 0.25);
}
.partner-dot.on { background: var(--gold-deep); }

/* ──────────────────────────────────────────────────────────────
   SECTION SCAFFOLD — let it breathe, modern editorial rhythm
   ────────────────────────────────────────────────────────────── */
.section { padding: 120px 0; }

.section-head {
  margin-bottom: 56px;
  gap: 14px;
}
.section-head::before {
  content: "";
  display: block;
  width: 56px; height: 2px;
  background: linear-gradient(90deg, transparent, var(--gold-bright) 50%, transparent);
  border-radius: 2px;
}
.section-num {
  font-size: 10.5px;
  letter-spacing: 0.32em;
  color: var(--gold);
}
.section-title {
  font-family: var(--font-headline);
  font-size: clamp(34px, 4.6vw, 56px);
  font-weight: 700;
  line-height: 1.05;
  letter-spacing: -0.01em;
  color: var(--ivory);
}
.section-title .label {
  font-size: 10.5px;
  letter-spacing: 0.32em;
  color: var(--gold);
  opacity: 0.85;
  margin-top: 16px;
}
.section-lede {
  font-size: 15.5px;
  line-height: 1.65;
  color: rgba(255, 240, 214, 0.72);
  max-width: 620px;
  text-wrap: pretty;
}

.eyebrow {
  font-size: 10.5px;
  letter-spacing: 0.28em;
}
.eyebrow .dot {
  width: 5px; height: 5px;
}

/* ──────────────────────────────────────────────────────────────
   NOMINEES — tighten cards, refine category chips
   ────────────────────────────────────────────────────────────── */
.nominees-grid {
  gap: 22px;
}

.nominee-card,
.nom-card {
  border-radius: 14px;
  border: 1px solid var(--v2-rule-soft);
  background: rgba(255, 240, 214, 0.03);
  transition: transform .25s var(--easing),
              border-color .25s var(--easing),
              box-shadow .25s var(--easing);
}
.nominee-card:hover,
.nom-card:hover {
  transform: translateY(-3px);
  border-color: var(--v2-rule);
  box-shadow: var(--v2-shadow-md);
}

/* Category tabs — refined pill row instead of underline rail */
/* Independent category pills laid out in an equal-width grid.
   - Desktop (>1100px): 6 equal columns — all 6 popular categories in one row
   - Tablet  (700-1100): 3 columns — 2 rows
   - Mobile  (<700)   : 2 columns — 3 rows
   Every pill in a row has identical width because each grid cell is `1fr`. */
.cat-tabs {
  display: grid;
  grid-template-columns: repeat(4, 1fr);   /* desktop: 4 per row */
  gap: 12px 14px;
  border-bottom: 0;
  margin: 0 auto 36px;
  padding: 0;
  background: transparent;
  border: 0;
  border-radius: 0;
  max-width: 100%;
}
/* Tablet + mobile: 2 pills per row. */
@media (max-width: 1100px) {
  .cat-tabs { grid-template-columns: repeat(2, 1fr); gap: 14px 12px; }
}

/* Group pills (All N Categories section): responsive 4/2/1 layout.
   - Desktop (>1100px): 4 per row
   - Tablet  (700-1100): 2 per row
   - Mobile  (<700)   : 1 per row (lengthy names like
     "Driving the Industry" would wrap awkwardly in 2-col on phones)
   Attribute selector `[role]` bumps specificity to beat the
   responsive @media rules above for the base .cat-tabs class. */
.cat-tabs.group-tabs[role] {
  grid-template-columns: repeat(4, 1fr);
}
@media (max-width: 1100px) {
  .cat-tabs.group-tabs[role] {
    grid-template-columns: repeat(2, 1fr);
  }
}
@media (max-width: 700px) {
  .cat-tabs.group-tabs[role] {
    grid-template-columns: 1fr;
  }
}
/* (Previously forced `display: flex; width: fit-content` so the
   inline-flex oval would shrink-wrap. Now that .cat-tabs is a grid
   with explicit column counts at every breakpoint, no override is
   needed — let the parent's grid layout flow naturally.) */
.cat-tab {
  /* width: 100% — buttons don't `justify-self: stretch` by default in
     a grid cell (browser UA stylesheets keep them content-sized). With
     explicit width, each pill fills its 1fr cell so all pills in a row
     have identical width. */
  width: 100%;
  padding: 10px 18px;
  border-radius: 999px;
  font-size: 12.5px;
  letter-spacing: 0.04em;
  color: rgba(255, 240, 214, 0.78);
  background: rgba(0, 0, 0, 0.25);
  border: 1px solid var(--v2-rule-soft);
  transition: all .2s var(--easing);
}
.cat-tab:hover {
  color: var(--ivory);
  background: rgba(255, 240, 214, 0.08);
  border-color: var(--v2-rule);
}
.cat-tab.on {
  background: var(--gold-bright);
  color: var(--v2-ink-deep);
  border-color: var(--gold-bright);
}
.cat-tab.on::after { display: none; }
.cat-tab .en {
  font-size: 9px;
  letter-spacing: 0.18em;
  opacity: 0.7;
  margin-top: 2px;
}
/* Active-pill contrast lock:
   - Force dark ink for both the main label (text node) and the .en
     eyebrow span. Some older CSS at the same specificity sets the
     active color to var(--gold-bright) (same as background), which
     makes the main label vanish into the pill. We win by combining
     a literal hex color, !important, and high specificity. */
.cat-tabs .cat-tab.on {
  color: #2a0908 !important;
  -webkit-text-fill-color: #2a0908;
}
.cat-tabs .cat-tab.on .en {
  color: #2a0908 !important;
  opacity: 1 !important;
}

.see-all {
  border-radius: 999px;
  padding: 13px 26px;
  font-size: 12px;
  letter-spacing: 0.14em;
  border: 1px solid rgba(255, 240, 214, 0.28);
  color: var(--ivory);
  transition: all .25s var(--easing);
}
.see-all:hover {
  border-color: var(--gold-bright);
  color: var(--gold-bright);
  background: transparent;
}

.chip, .category-chip, .cat-chip {
  border-radius: 999px;
  padding: 8px 16px;
  font-size: 12px;
  letter-spacing: 0.04em;
  transition: all .2s var(--easing);
}

/* ──────────────────────────────────────────────────────────────
   JURY — slimmer, refined portrait card
   ────────────────────────────────────────────────────────────── */
/* Clear the brick-wall divider trick from the original — each card is
   its own standalone tile with gap-based spacing instead. */
.jury-grid {
  gap: 20px;
  background: transparent;
  border: none;
}

.jury-card {
  background: transparent !important;
  border: 1px solid var(--v2-rule-soft);
  border-radius: 14px;
  transition: transform .25s var(--easing),
              border-color .25s var(--easing),
              background .25s var(--easing),
              box-shadow .25s var(--easing);
}
.jury-card:hover {
  transform: translateY(-3px);
  background: transparent !important;
  border-color: var(--v2-rule);
  box-shadow: var(--v2-shadow-md);
}
.jury-card .avatar::after {
  inset: -4px;
  border: 1px solid var(--v2-rule);
}
.jury-card h4 {
  font-size: 18px;
  margin-top: 14px;
  letter-spacing: 0;
}
.jury-card .role {
  font-size: 9.5px;
  letter-spacing: 0.22em;
  color: var(--gold-bright);
  margin-top: 8px;
}
.jury-card .bio {
  font-size: 12.5px;
  line-height: 1.55;
  color: rgba(255, 240, 214, 0.72);
  margin-top: 10px;
}

/* ──────────────────────────────────────────────────────────────
   CONTEST BAND — modern, less ornamental
   ────────────────────────────────────────────────────────────── */
.contest-band {
  margin-top: 100px;
  padding: 56px 56px;
  border-radius: 18px;
  border: 1px solid var(--v2-rule);
  background:
    radial-gradient(ellipse 60% 100% at 100% 50%, rgba(255, 196, 79, 0.12), transparent 65%),
    linear-gradient(180deg, rgba(38, 7, 6, 0.6), rgba(23, 4, 4, 0.85));
  box-shadow: var(--v2-shadow-lg);
}
.contest-band::after { display: none; }   /* kill the giant ★ */
.contest-band h3 {
  font-size: clamp(26px, 3vw, 36px);
  font-weight: 700;
  letter-spacing: -0.005em;
  margin-bottom: 14px;
  color: var(--ivory);
  text-wrap: balance;
}
.contest-band p {
  font-size: 15px;
  line-height: 1.6;
  color: rgba(255, 240, 214, 0.78);
}

/* ──────────────────────────────────────────────────────────────
   GALLERY — cleaner editorial collage
   ────────────────────────────────────────────────────────────── */
.gallery-meta-bar {
  margin-top: 56px;
  padding: 30px 36px;
  border-radius: 16px;
  border: 1px solid var(--v2-rule);
  background: rgba(38, 7, 6, 0.55);
}

/* ──────────────────────────────────────────────────────────────
   FOOTER — editorial close
   ────────────────────────────────────────────────────────────── */
.foot {
  padding: 96px 0 36px;
  background: linear-gradient(180deg, rgba(38, 7, 6, 0.55) 0%, #1a0506 80%);
  border-top: 1px solid var(--v2-rule-soft);
}
.foot-top { gap: 56px; padding-bottom: 48px; }
.foot-brand .crest-row .crest {
  border: 1px solid var(--v2-rule);
}
.foot-brand h5 {
  font-family: var(--font-headline);
  font-size: 18px;
  font-weight: 700;
  letter-spacing: 0;
}
.foot-brand .sub {
  font-size: 10px;
  letter-spacing: 0.28em;
}
.foot-brand p {
  font-size: 13.5px;
  line-height: 1.65;
  color: rgba(255, 240, 214, 0.7);
}

.foot h6 {
  font-size: 10.5px;
  letter-spacing: 0.28em;
  color: var(--gold);
  margin-bottom: 20px;
}
.foot ul { gap: 12px; }
.foot a {
  font-size: 13.5px;
  color: rgba(255, 240, 214, 0.78);
  transition: color .2s var(--easing);
}
.foot a:hover { color: var(--gold-bright); }

.foot-bottom {
  padding-top: 28px;
  margin-top: 0;
  border-top: 1px solid var(--v2-rule-soft);
  font-size: 12px;
  letter-spacing: 0.04em;
  color: rgba(255, 240, 214, 0.55);
}
.foot-bottom .links { gap: 24px; }

/* ──────────────────────────────────────────────────────────────
   GENERIC POLISH
   ────────────────────────────────────────────────────────────── */

/* Section spacing rhythm — let it breathe */
section { scroll-margin-top: 88px; }

/* Reduce the heaviness of red-soft borders site-wide */
hr, .divider { border-color: var(--v2-rule-soft); }

/* Soft, restrained card hover for any *.card */
.card { transition: transform .25s var(--easing), box-shadow .25s var(--easing); }
.card:hover { transform: translateY(-2px); box-shadow: var(--v2-shadow-md); }

/* ──────────────────────────────────────────────────────────────
   SPARKLES — keep but tone down
   ────────────────────────────────────────────────────────────── */
.sparkle {
  opacity: 0.55 !important;
}

/* ──────────────────────────────────────────────────────────────
   STAGE / LINK MICRO — focus states
   ────────────────────────────────────────────────────────────── */
:focus-visible {
  outline: 2px solid var(--gold-bright);
  outline-offset: 2px;
  border-radius: 4px;
}

/* ============================================================
   MODALS — Vote flow + Contest flow + Category detail + Success
   Standard theme: cinema-red palette matching the page hero.
   Dark theme overrides live in styles-v2-dark.css.
   ============================================================ */
.modal-backdrop {
  background:
    radial-gradient(ellipse 60% 45% at 50% 10%, rgba(255, 204, 82, 0.12), transparent 60%),
    rgba(20, 4, 6, 0.78);
  backdrop-filter: blur(10px) saturate(120%);
  padding: 32px 20px;
}
.modal {
  max-width: 680px;
  max-height: 88vh;
  border-radius: 18px;
  border: 1px solid var(--v2-rule);
  background:
    radial-gradient(ellipse 100% 40% at 50% 0%, rgba(255, 196, 79, 0.16), transparent 65%),
    linear-gradient(180deg, #b8050f 0%, #8a040b 60%, #5e0307 100%);
  /* Removed the duplicate `0 0 0 1px var(--v2-rule)` shadow that
     stacked on top of the border — that stack rendered as a doubled
     stroke at the rounded corners (the curve picked up both layers
     with slightly different anti-aliasing), giving the appearance of
     a thicker outline at corners vs. straight edges. */
  box-shadow:
    0 40px 100px -20px rgba(0,0,0,0.6),
    inset 0 1px 0 rgba(240, 200, 112, 0.18);
  overflow-y: auto;
  overflow-x: hidden;
  animation: v2-slide-up .35s var(--easing);
}
@keyframes v2-slide-up {
  from { transform: translateY(16px); opacity: 0; }
  to   { transform: translateY(0); opacity: 1; }
}
.modal-h {
  /* Force sticky to top of the scrolling .modal even on iOS Safari.
     The base position: sticky comes from styles.css; reinforced with
     !important here in case ancestor stacking contexts (modal portal
     inside body scroll-lock) break the default. */
  position: sticky !important;
  top: 0 !important;
  padding: 22px 28px;
  /* Opaque enough that scrolled body content cannot bleed through the sticky header.
     Original v2 had 0.55 opacity here which caused the z-index bleed in the vote popup. */
  background:
    linear-gradient(180deg, rgba(184, 5, 15, 0.97), rgba(122, 3, 8, 0.97));
  border-bottom: 1px solid var(--v2-rule-soft);
  z-index: 10;
}

/* Universal floating close button — rendered by the Modal component
   for every popup. Sits at the modal's top-right corner with
   position: absolute, so it stays clickable regardless of scroll
   position OR whether the modal-h sticky behavior holds up.
   Belt-and-suspenders to the existing .modal-h .x button. */
/* Zero-height sticky band that pins to the top of the .modal scroll
   container. The actual close button is absolutely positioned inside
   this band, so it stays locked to the modal's top-right corner even
   when the body scrolls. height: 0 means the wrap occupies no flow,
   so clicks pass through to whatever is below the (visually empty)
   wrap by default — no pointer-events trickery needed, which avoids
   stacking-context corner cases that can break hover detection on
   absolute-positioned children. */
.modal-close-float-wrap {
  position: sticky;
  top: 0;
  z-index: 20;
  height: 0;
}
.modal-close-float {
  position: absolute;
  top: 12px;
  right: 14px;
  width: 36px;
  height: 36px;
  border-radius: 999px;
  border: 1px solid var(--v2-rule);
  background: rgba(10, 5, 5, 0.86);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  cursor: pointer;
  font-size: 0;
  pointer-events: auto;
  transition: background .2s var(--easing), border-color .2s var(--easing), transform .2s var(--easing);
}
.modal-close-float::before,
.modal-close-float::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 14px;
  height: 2px;
  background: var(--gold);
  border-radius: 2px;
  transition: background .2s var(--easing), transform .2s var(--easing);
}
.modal-close-float::before {
  transform: translate(-50%, -50%) rotate(45deg);
}
.modal-close-float::after {
  transform: translate(-50%, -50%) rotate(-45deg);
}
/* Hover state: bright gold fill with ink-coloured X arms. Uses
   !important on background/border to win against any base button or
   styles.css reset that may load after this file in the prod bundle
   cascade. The X arms swap to dark ink for legibility on the gold fill. */
.modal-close-float:hover,
.modal-close-float:focus-visible {
  background: #f0c870 !important;
  border-color: #f0c870 !important;
  transform: scale(1.06);
}
.modal-close-float:hover::before,
.modal-close-float:focus-visible::before {
  background: #1a0205 !important;
  transform: translate(-50%, -50%) rotate(45deg) scale(1.12);
}
.modal-close-float:hover::after,
.modal-close-float:focus-visible::after {
  background: #1a0205 !important;
  transform: translate(-50%, -50%) rotate(-45deg) scale(1.12);
}
.modal-close-float:active {
  transform: scale(0.95);
}
/* Mobile: modal-h has smaller padding (16px), so nudge the button up
   and in to stay vertically centered with the title text. */
@media (max-width: 760px) {
  .modal-close-float {
    top: 9px;
    right: 10px;
    width: 34px;
    height: 34px;
  }
}
/* Hide the in-header X on viewports where the float button works
   reliably (desktop). On mobile (≤760px), some Android Chrome
   builds drop the sticky-inside-overflow float button into the
   wrong stacking layer — there we KEEP the original .modal-h .x
   as the visible close affordance and hide the float instead.
   Belt-and-suspenders: at least one X is always reachable. */
@media (min-width: 761px) {
  .modal-h .x {
    display: none !important;
  }
}
@media (max-width: 760px) {
  .modal-close-float-wrap {
    display: none !important;
  }
}
.modal-foot {
  z-index: 2;
}
.modal-h .crumbs {
  font-size: 10.5px;
  letter-spacing: 0.26em;
  color: var(--gold);
}
.modal-h .x {
  width: 34px; height: 34px;
  border-radius: 999px;
  border: 1px solid var(--v2-rule-soft);
  background: rgba(0,0,0,0.2);
  transition: all .2s var(--easing);
}
.modal-h .x:hover {
  border-color: var(--gold-bright);
  background: rgba(212, 166, 74, 0.08);
  color: var(--gold-bright);
}
.modal-body { padding: 32px 28px; }
.modal-body h3 {
  font-family: var(--font-headline);
  font-size: 22px;
  font-weight: 700;
  letter-spacing: -0.005em;
}
.modal-body p {
  font-size: 14px;
  line-height: 1.65;
  color: rgba(255, 240, 214, 0.74);
}
.modal-foot {
  padding: 18px 28px;
  background: linear-gradient(180deg, rgba(122, 3, 8, 0.97), rgba(54, 6, 5, 0.97));
  border-top: 1px solid var(--v2-rule-soft);
}

/* Rounded corners + raised disabled opacity to match v2 button theme. */
.btn-block { border-radius: 10px; }
.btn-block:disabled { opacity: 0.62; }

.modal-body .step-progress { gap: 6px; margin-bottom: 28px; }
.modal-body .step-progress span {
  height: 3px;
  border-radius: 999px;
}

/* Vote rail pills */
.vote-rail-pill {
  border-radius: 999px;
  padding: 8px 14px 8px 10px;
  font-size: 12px;
  border-color: var(--v2-rule-soft);
  transition: all .2s var(--easing);
}
.vote-rail-pill .dot {
  width: 22px; height: 22px;
  border-radius: 999px;
  border-color: var(--v2-rule-soft);
}
.vote-rail-pill.current {
  background: rgba(240, 200, 112, 0.12);
  border-color: var(--gold-bright);
  box-shadow: 0 0 0 1px var(--gold-bright), 0 6px 20px -8px rgba(240, 200, 112, 0.4);
}
.vote-rail-pill.done { border-color: var(--gold); }
.vote-rail-pill.done .dot,
.vote-rail-pill.current .dot {
  background: var(--gold-bright);
  border-color: var(--gold-bright);
  color: var(--v2-ink-deep);
}

/* Category detail modal — refined */
.cat-detail .cd-head .n {
  font-family: var(--font-headline);
  font-size: 56px;
  font-weight: 700;
  -webkit-text-stroke: 0;
  color: var(--v2-rule);
}
.cat-detail .cd-head .count {
  font-size: 10.5px;
  letter-spacing: 0.28em;
}
.cat-detail h3 {
  font-family: var(--font-headline);
  font-size: 26px;
  font-weight: 700;
  letter-spacing: -0.005em;
}
.cat-detail .en {
  font-size: 10.5px;
  letter-spacing: 0.28em;
}
.cat-detail .nom-list {
  border-top: 1px solid var(--v2-rule-soft);
}
.cat-detail .nom-row {
  padding: 18px 4px;
  border-color: var(--v2-rule-soft);
  transition: background .2s var(--easing), padding .2s var(--easing);
  grid-template-columns: 1fr auto;
  gap: 18px;
}
.cat-detail .nom-row:hover {
  background: rgba(212, 166, 74, 0.04);
  padding-left: 14px;
}
.cat-detail .nom-row .body {
  display: flex !important;
  flex-direction: column !important;
  gap: 2px;
  min-width: 0;
}
.cat-detail .nom-row .name {
  font-family: var(--font-headline);
  font-size: 15.5px;
  font-weight: 600;
  letter-spacing: -0.005em;
  color: var(--ivory);
}
.cat-detail .nom-row .sub {
  font-size: 12.5px;
  color: rgba(255, 240, 214, 0.65);
  font-style: italic;
  line-height: 1.4;
}
/* Vote percentage chip (or "—" while voting is closed) */
.cat-detail .nom-row .nom-pct {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.14em;
  padding: 6px 12px;
  border-radius: 999px;
  border: 1px solid var(--v2-rule-soft);
  background: rgba(212, 166, 74, 0.04);
  color: var(--gold);
  font-variant-numeric: tabular-nums;
  align-self: center;
  white-space: nowrap;
  min-width: 56px;
  text-align: center;
}
/* When voting hasn't opened (—), tone down further so it doesn't shout */
.cat-detail .nom-row .nom-pct:not(:has(*)):empty,
.cat-detail .nom-row .nom-pct {
  /* Apply muted style when content is the em-dash placeholder.
     We don't have :contains, so style universally and let real % shine
     via additional rule below if needed. */
}

/* Success state */
.success-modal {
  max-width: 500px;
  text-align: center;
}
.success-modal .star-big {
  width: 80px; height: 80px;
  color: var(--gold-bright);
  text-shadow: 0 0 30px rgba(240, 200, 112, 0.5);
}
.success-modal .star-big::before {
  border-color: var(--v2-rule);
}
.success-modal .id {
  font-size: 11px;
  letter-spacing: 0.22em;
  padding: 8px 16px;
  border-radius: 999px;
  background: rgba(212, 166, 74, 0.08);
}

/* Phase / coming-soon banner — clean accent */
.phase-banner {
  background: rgba(38, 7, 6, 0.4);
  border: 1px solid var(--v2-rule-soft);
  border-radius: 12px;
  margin-bottom: 32px;
}
.phase-banner .ic {
  border-radius: 999px;
  background: rgba(0,0,0,0.25);
}
.phase-banner .ic.gold {
  border-color: var(--gold-bright);
  color: var(--gold-bright);
}

/* ============================================================
   INNER PAGES — page hero
   ============================================================ */
.page-hero {
  padding: 96px 0 80px;
  border-bottom: 1px solid var(--v2-rule-soft);
}
.page-hero-bg {
  background:
    radial-gradient(ellipse 70% 50% at 50% 0%, rgba(255, 196, 79, 0.10), transparent 60%),
    radial-gradient(ellipse 100% 100% at 50% 100%, rgba(0,0,0,0.4), transparent 60%),
    linear-gradient(180deg, #1a0506 0%, #0e0808 100%);
}
.page-hero-inner { gap: 18px; }
.page-hero-title {
  font-family: var(--font-headline);
  font-size: clamp(36px, 5vw, 60px);
  font-weight: 700;
  letter-spacing: -0.015em;
  line-height: 1.05;
  color: var(--ivory);
}
.page-hero-lede {
  font-size: 16px;
  line-height: 1.65;
  color: rgba(255, 240, 214, 0.74);
  max-width: 680px;
  text-wrap: pretty;
}
.page-hero-back {
  padding: 9px 16px;
  border-radius: 999px;
  border: 1px solid var(--v2-rule-soft);
  font-size: 11.5px;
  letter-spacing: 0.16em;
  background: rgba(0,0,0,0.18);
  transition: all .25s var(--easing);
}
.page-hero-back:hover {
  border-color: var(--gold-bright);
  color: var(--gold-bright);
  background: rgba(212, 166, 74, 0.06);
}

/* ============================================================
   TERMS PAGE
   ============================================================ */
.terms-container { gap: 56px; padding: 80px 0; }
.terms-toc {
  padding: 24px;
  border-radius: 14px;
  border: 1px solid var(--v2-rule-soft);
  background: rgba(255, 240, 214, 0.025);
}
.terms-toc a {
  padding: 9px 12px;
  border-radius: 8px;
  border-left: 2px solid transparent;
  font-size: 13px;
  color: rgba(255, 240, 214, 0.78);
  transition: all .2s var(--easing);
}
.terms-toc a:hover,
.terms-toc a.active {
  color: var(--gold-bright);
  background: rgba(212, 166, 74, 0.08);
  border-left-color: var(--gold-bright);
}
.terms-toc .n {
  font-size: 10.5px;
  letter-spacing: 0.18em;
}
.terms-meta { border-top-color: var(--v2-rule-soft); }
.terms-meta .k {
  font-size: 10px;
  letter-spacing: 0.24em;
}
/* Clear the bulk dark background set in styles.css for these elements */
.terms-intro,
.terms-defs,
.terms-note {
  background: transparent;
}
.terms-defs {
  border: 1px solid var(--v2-rule-soft);
  border-radius: 14px;
  overflow: hidden;
}
.terms-def {
  border-bottom-color: var(--v2-rule-soft);
}

.terms-intro {
  font-family: var(--font-headline);
  font-size: clamp(16px, 1.6vw, 19px);
  font-weight: 500;
  color: rgba(255, 240, 214, 0.92);
  line-height: 1.55;
}
.terms-sec {
  padding: 36px 0;
  border-color: var(--v2-rule-soft);
}
.terms-sec-num {
  font-family: var(--font-headline);
  font-size: 36px;
  font-weight: 800;
  color: var(--v2-rule);
  -webkit-text-stroke: 0;
}
.terms-sec-head h2 {
  font-family: var(--font-headline);
  font-size: clamp(22px, 2.4vw, 28px);
  font-weight: 700;
  letter-spacing: -0.005em;
}
.terms-block {
  background: rgba(212, 166, 74, 0.04);
  border-left: 2px solid var(--gold-bright);
  border-radius: 0 10px 10px 0;
  padding: 18px 22px;
}
.terms-note {
  background: rgba(255, 240, 214, 0.025);
  border: 1px solid var(--v2-rule-soft);
  border-radius: 10px;
}
.terms-note-label {
  font-size: 10px;
  letter-spacing: 0.24em;
}
.terms-def {
  border-color: var(--v2-rule-soft);
}
.terms-def dt {
  font-size: 10px;
  letter-spacing: 0.20em;
}

/* ============================================================
   PROCESS PAGE — tile/step polish
   ============================================================ */

/* Separate tiles with spacing instead of the original 1px gap/bridge effect */
.proc-tiles {
  gap: 20px;
  background: transparent;
  border: none;
}
.proc-tile {
  border-radius: 14px;
  border: 1px solid var(--v2-rule-soft);
  background: transparent;
  transition: border-color .3s var(--easing), background .3s var(--easing);
}
.proc-tile:hover {
  border-color: var(--v2-rule);
  background: rgba(255, 240, 214, 0.04);
}

/* ============================================================
   CINE CORNER — card refinements
   ============================================================ */
.cine-grid { gap: 22px; }
.cine-card {
  background: rgba(15, 3, 3, 0.65);
  border: 1px solid var(--v2-rule-soft);
  border-radius: 14px;
  transition: transform .3s var(--easing), border-color .3s var(--easing), background .3s var(--easing), box-shadow .3s var(--easing);
}
.cine-card:hover {
  background: rgba(26, 6, 6, 0.55);
  border-color: var(--v2-rule);
  transform: translateY(-4px);
  box-shadow: var(--v2-shadow-md);
}

/* ============================================================
   VIDEO GALLERY — restraint
   ============================================================ */
.video-card {
  border-radius: 14px;
  border: 1px solid var(--v2-rule-soft);
}
.video-card:hover {
  border-color: var(--gold);
  box-shadow: 0 18px 44px rgba(0,0,0,0.4);
}
.video-card .v-cap {
  font-family: var(--font-headline);
  font-weight: 600;
  font-size: 14px;
  line-height: 1.3;
}
.video-arrow,
.hero-arrow {
  border-radius: 999px;
  border-color: var(--v2-rule-soft);
}
.video-arrow:hover,
.hero-arrow:hover {
  background: var(--gold-bright);
  border-color: var(--gold-bright);
  color: var(--v2-ink-deep);
}

/* ============================================================
   FIELDS — generic form inputs (used in vote + contest flows)
   ============================================================ */
.field input,
.field select,
.field textarea {
  border-radius: 10px;
  border-color: var(--v2-rule-soft);
  background: rgba(0,0,0,0.18);
  padding: 12px 14px;
  font-size: 14px;
  transition: border-color .2s var(--easing), box-shadow .2s var(--easing);
}
.field input:focus,
.field select:focus,
.field textarea:focus {
  border-color: var(--gold-bright);
  box-shadow: 0 0 0 3px rgba(240, 200, 112, 0.15);
  outline: 0;
}
.field label {
  font-size: 10.5px;
  letter-spacing: 0.24em;
  color: var(--gold);
}

/* Multiple-choice / pick options used in vote + contest flow */
.nom-pick, .mcq-opt {
  border-radius: 12px;
  border-color: var(--v2-rule-soft);
  background: rgba(255, 240, 214, 0.03);
  transition: all .2s var(--easing);
}
.nom-pick:hover, .mcq-opt:hover {
  border-color: var(--v2-rule);
  background: rgba(212, 166, 74, 0.05);
  transform: translateY(-1px);
}
.nom-pick.on, .mcq-opt.on {
  border-color: var(--gold-bright);
  background: rgba(240, 200, 112, 0.10);
  box-shadow: 0 0 0 1px var(--gold-bright);
}

/* ============================================================
   TABLET BREAKPOINT — 760px to 1024px
   ============================================================ */
@media (max-width: 1024px) {
  .nav { padding: 14px 24px; }
  .nav.scrolled { padding: 8px 24px; }
  .nav-links { gap: 0; }
  .nav-link { padding: 8px 10px; font-size: 12.5px; }

  .hero { padding: 96px 0 28px; }
  .hero-grid { grid-template-columns: 1fr; gap: 20px; }
  .hero-text { order: 1; text-align: center; }
  .hero-trophy { order: 2; max-width: 360px; margin: 0 auto; }
  .hero-tagline { margin: 16px auto 0 !important; max-width: 520px !important; }

  .countdown-wrap { max-width: 100%; }

  .section { padding: 88px 0; }
  .section-head { margin-bottom: 44px; }

  .partners { padding: 44px 0 52px; }

  .nominees-grid { grid-template-columns: repeat(2, 1fr) !important; gap: 18px; }
  .jury-grid { grid-template-columns: repeat(3, 1fr) !important; gap: 18px; }

  .contest-band { padding: 44px 36px; margin-top: 72px; }
  .contest-band h3 { font-size: clamp(22px, 3.4vw, 30px); }

  .terms-container { grid-template-columns: 1fr; gap: 32px; }
  .terms-toc { position: static; max-height: none; }

  .cine-grid { grid-template-columns: repeat(2, 1fr) !important; }

  .modal { max-width: 560px; }
}

/* ============================================================
   MOBILE BREAKPOINT — under 760px
   ============================================================ */
@media (max-width: 760px) {
  /* Remove left/right vignette edges — on a narrow screen 18% each side
     eats too much content area. Keep only the top radial glow + centre vignette. */
  body::after {
    background:
      radial-gradient(ellipse at 50% 12%, transparent 0%, rgba(255, 184, 45, 0.08) 28%, transparent 42%),
      radial-gradient(ellipse at center, transparent 30%, rgba(39, 0, 0, 0.42) 100%);
  }

  /* Hide desktop nav links on mobile (already in styles.css but reinforce) */
  .nav { padding: 12px 18px; }
  .nav.scrolled { padding: 8px 18px; }
  .nav-links { display: none; }
  .nav-cta { display: none; }   /* let burger menu carry the CTA */
  .nav-burger { display: flex; }

  .nav-brand .crest-text .kn { font-size: 13px; }
  .nav-brand .crest-text .en { font-size: 8.5px; letter-spacing: 0.18em; }
  .nav-brand .crest { width: 34px; height: 34px; }

  /* Mobile menu refinement */
  .mobile-menu {
    background: linear-gradient(180deg, #1a0506 0%, #0e0808 100%);
  }
  .mobile-menu .m-links a {
    font-family: var(--font-headline);
    font-size: 18px;
    font-weight: 600;
    padding: 10px 0;
    border-bottom: 1px solid var(--v2-rule-soft);
  }
  .mobile-menu .m-cta-row .nav-cta { display: inline-flex; }

  .hero { padding: 80px 0 24px; }
  .hero-tagline { font-size: 14px; padding: 0 16px; }

  .hero-cta-bar {
    flex-direction: column;
    width: 100%;
    margin-top: 28px;
    padding-top: 22px;
  }
  .hero-cta-bar .btn-primary,
  .hero-cta-bar .btn-ghost {
    width: 100%;
    text-align: center;
    padding: 14px 20px;
  }

  .countdown-wrap { padding: 14px 16px 12px; margin: 28px 12px 0; }
  .countdown { gap: 6px; }
  .countdown .unit { padding: 8px 2px 6px; }
  .countdown .unit .n { font-size: 24px; }
  .countdown .unit .l { font-size: 8.5px; letter-spacing: 0.18em; }
  .countdown-label { flex-direction: column; gap: 4px; align-items: flex-start; }

  .partners { padding: 36px 0 44px; }
  .partners-head .t { font-size: 19px; }
  .partner-card { padding: 18px 14px; min-height: 80px; }

  .section { padding: 64px 0; }
  .section-head { margin-bottom: 32px; gap: 12px; }
  .section-title { font-size: clamp(28px, 7vw, 38px) !important; }
  .section-lede { font-size: 14.5px; padding: 0 8px; }

  .nominees-grid { grid-template-columns: 1fr !important; gap: 14px; }
  .jury-grid { grid-template-columns: repeat(2, 1fr) !important; gap: 14px; }
  .jury-card { padding: 24px 16px 20px; }
  .jury-card .avatar { width: 101px; height: 101px; }
  .jury-card h4 { font-size: 15.5px; }

  /* Mobile-specific pill sizing (gap is set by the main .cat-tabs
     media query at the top of the file). */
  .cat-tab { padding: 9px 12px; font-size: 12px; }
  .cat-tab .en { display: none; }

  .contest-band {
    padding: 32px 22px;
    margin-top: 56px;
    border-radius: 14px;
  }
  .contest-band h3 { font-size: 22px; }
  .contest-band p { font-size: 14px; }

  .cine-grid { grid-template-columns: 1fr !important; }

  .gallery-collage { grid-template-columns: repeat(2, 1fr) !important; gap: 10px; }

  /* Modals — full-bleed on mobile.
     iOS / Android Chrome viewport quirks:
     - 100vh on iOS includes the area BEHIND the URL bar, so a modal
       with min-height: 100vh + align-items: flex-end would have its
       TOP edge hidden behind the URL bar — including the .modal-h
       (crumb + close X). Switching to 100dvh (dynamic viewport
       height) keeps the modal entirely inside the actually-visible
       area and adapts as the URL bar shows/hides on scroll.
     - viewport-fit=cover is set in the HTML so the page extends
       under the notch / Dynamic Island. Add safe-area-inset-top to
       .modal-h padding so the crumb + X clear the notch, and
       safe-area-inset-bottom to .modal-foot so the submit button
       clears the home indicator. */
  .modal-backdrop { padding: 0; }
  .modal {
    max-width: 100%;
    min-height: 100dvh;
    max-height: 100dvh;
    border-radius: 0;
    border-left: 0;
    border-right: 0;
  }
  .modal-h {
    padding: calc(16px + env(safe-area-inset-top)) 18px 16px;
  }
  .modal-body { padding: 22px 18px; }
  .modal-foot {
    padding: 14px 18px calc(14px + env(safe-area-inset-bottom));
  }
  .modal-body h3 { font-size: 19px; }

  /* Footer */
  .foot { padding: 64px 0 28px; }
  .foot-top { grid-template-columns: 1fr; gap: 36px; }
  .foot-bottom { flex-direction: column; gap: 14px; align-items: flex-start; }

  .terms-container { padding: 48px 0; gap: 28px; }
  .terms-sec { padding: 28px 0; }
  .terms-sec-num { font-size: 28px; }
  .terms-sec-head h2 { font-size: 20px; }
}

/* ============================================================
   SMALL MOBILE — under 420px
   ============================================================ */
@media (max-width: 420px) {
  .container { padding: 0 16px; }
  .section-title { font-size: clamp(26px, 7.5vw, 32px) !important; }
  .hero-tagline { font-size: 13.5px; }
  .countdown .unit .n { font-size: 22px; }
}

/* ============================================================
   ENTRANCE + SCROLL-REVEAL ANIMATIONS
   ============================================================ */
@keyframes v2-fade-up {
  from { opacity: 0; transform: translateY(24px); }
  to   { opacity: 1; transform: translateY(0); }
}
@keyframes v2-fade {
  from { opacity: 0; }
  to   { opacity: 1; }
}

/* Scroll-reveal: applied by v2-reveal.js. Elements start hidden,
   then JS adds .is-visible to trigger the transition.
   Using CSS transitions (not keyframes) so html-to-image and other
   DOM-snapshot tools render the final state cleanly. */
.v2-reveal {
  opacity: 0;
  transform: translateY(28px);
  transition: opacity .7s var(--easing), transform .7s var(--easing);
  will-change: opacity, transform;
}
.v2-reveal.is-visible {
  opacity: 1;
  transform: translateY(0);
}

/* Hero entrance — marked with v2-hero-* by the reveal script.
   Initial hidden state, JS adds .is-visible to fade in with stagger. */
.v2-hero-item {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity .8s var(--easing), transform .8s var(--easing);
  will-change: opacity, transform;
}
.v2-hero-item.is-visible {
  opacity: 1;
  transform: translateY(0);
}
.v2-hero-item.v2-hero-trophy {
  transform: scale(0.96);
  transition: opacity .9s var(--easing), transform .9s var(--easing);
}
.v2-hero-item.v2-hero-trophy.is-visible {
  transform: scale(1);
}

/* Stagger children inside a revealed grid (works for jury / nominees / partners).
   Using CSS transitions on inner elements with a transition-delay. */
.v2-reveal-stagger > * {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity .65s var(--easing), transform .65s var(--easing);
  will-change: opacity, transform;
}
.v2-reveal-stagger.is-visible > *  { opacity: 1; transform: translateY(0); }
.v2-reveal-stagger.is-visible > *:nth-child(1)  { transition-delay: 0.00s; }
.v2-reveal-stagger.is-visible > *:nth-child(2)  { transition-delay: 0.06s; }
.v2-reveal-stagger.is-visible > *:nth-child(3)  { transition-delay: 0.12s; }
.v2-reveal-stagger.is-visible > *:nth-child(4)  { transition-delay: 0.18s; }
.v2-reveal-stagger.is-visible > *:nth-child(5)  { transition-delay: 0.24s; }
.v2-reveal-stagger.is-visible > *:nth-child(6)  { transition-delay: 0.30s; }
.v2-reveal-stagger.is-visible > *:nth-child(7)  { transition-delay: 0.36s; }
.v2-reveal-stagger.is-visible > *:nth-child(8)  { transition-delay: 0.42s; }
.v2-reveal-stagger.is-visible > *:nth-child(n+9){ transition-delay: 0.48s; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; }
  .v2-reveal, .v2-hero-item, .v2-reveal-stagger > * { opacity: 1; transform: none; }
}

/* ============================================================
   PASS 2 — Per-section polish
   Deeper refinements on: nominee cards, jury cards,
   all-categories tile grid, video carousel, gallery, contest band
   ============================================================ */

/* ── Nominee card — refined poster + body ───────────────────── */
.nom-card {
  background: linear-gradient(180deg, rgba(255, 240, 214, 0.04), rgba(255, 240, 214, 0.02));
  border-radius: 14px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}
.nom-poster {
  aspect-ratio: 2/3;
  background:
    radial-gradient(ellipse 80% 50% at 50% 0%, rgba(212, 166, 74, 0.08), transparent 65%),
    linear-gradient(180deg, rgba(74, 16, 11, 0.6), rgba(23, 4, 4, 0.95));
}
.nom-poster .stripe {
  background:
    repeating-linear-gradient(135deg,
      rgba(212, 166, 74, 0.035) 0,
      rgba(212, 166, 74, 0.035) 10px,
      transparent 10px, transparent 22px);
}
.nom-poster .glyph {
  font-family: var(--font-headline);
  font-size: 96px;
  font-weight: 700;
  color: rgba(212, 166, 74, 0.12);
  letter-spacing: -0.02em;
}
.nom-poster .badge {
  top: 14px; left: 14px;
  padding: 5px 10px;
  border-radius: 999px;
  border: 1px solid var(--v2-rule-soft);
  background: rgba(0, 0, 0, 0.55);
  backdrop-filter: blur(8px);
  font-size: 9px;
  letter-spacing: 0.24em;
}
.nom-card:hover .nom-poster::after {
  background: radial-gradient(ellipse 80% 60% at 50% 30%, rgba(240, 200, 112, 0.16), transparent 65%);
}
.nom-body {
  padding: 20px 18px 18px;
  gap: 6px;
}
.nom-cat {
  font-size: 9.5px;
  letter-spacing: 0.24em;
  color: var(--gold);
}
.nom-name {
  font-family: var(--font-headline);
  font-size: 18px;
  font-weight: 600;
  letter-spacing: -0.005em;
  text-wrap: balance;
}
.nom-sub {
  font-size: 12.5px;
  color: rgba(255, 240, 214, 0.6);
  font-style: normal;
  line-height: 1.45;
}

/* ── Jury card — quote-card treatment with subtle accent ────── */
.jury-card {
  position: relative;
  padding: 36px 24px 28px;
}
.jury-card::before {
  /* hairline gold accent at top */
  content: "";
  position: absolute;
  top: -1px; left: 50%;
  transform: translateX(-50%);
  width: 36px; height: 2px;
  background: var(--gold-bright);
  border-radius: 0 0 2px 2px;
  opacity: 0;
  transition: opacity .25s var(--easing), width .25s var(--easing);
}
.jury-card:hover::before {
  opacity: 1;
  width: 56px;
}
.jury-card .avatar {
  width: 119px;
  height: 119px;
  position: relative;
}
.jury-card .avatar::after {
  inset: -5px;
  border-color: var(--v2-rule);
  opacity: 0.6;
  transition: opacity .25s var(--easing), inset .25s var(--easing);
}
.jury-card:hover .avatar::after {
  inset: -7px;
  opacity: 1;
}
.jury-card h4 {
  font-family: var(--font-headline);
  font-size: 17px;
  font-weight: 700;
  letter-spacing: -0.005em;
  margin-top: 16px;
  margin-bottom: 6px;
}
.jury-card .role {
  font-size: 9.5px;
  letter-spacing: 0.24em;
  color: var(--gold-bright);
  margin-bottom: 10px;
}
.jury-card .bio {
  font-size: 12.5px;
  line-height: 1.6;
  color: rgba(255, 240, 214, 0.7);
  text-wrap: pretty;
}

/* ── All-categories tile grid — modern editorial grid ───────── */
.all-cats {
  border: 0;
  background: transparent;
  gap: 12px;
  display: grid;
}
.cat-tile {
  background: transparent !important;
  border: 1px solid var(--v2-rule-soft);
  border-radius: 12px;
  padding: 24px 22px;
  min-height: 140px;
  transition: all .25s var(--easing);
}
.cat-tile:hover {
  background: rgba(212, 166, 74, 0.04);
  border-color: var(--v2-rule);
  transform: translateY(-2px);
  box-shadow: var(--v2-shadow-md);
}
.cat-tile .n {
  font-family: var(--font-headline);
  font-size: 32px;
  font-weight: 700;
  color: var(--v2-rule);
  letter-spacing: -0.01em;
}
.cat-tile:hover .n {
  color: var(--gold-bright);
}
.cat-tile .title {
  font-family: var(--font-headline);
  font-size: 16px;
  font-weight: 600;
  letter-spacing: -0.005em;
}
.cat-tile .en {
  font-size: 9px;
  letter-spacing: 0.2em;
}
.cat-tile .count {
  font-size: 11.5px;
  color: rgba(255, 240, 214, 0.5);
  margin-top: 10px;
}
.cat-tile-arrow {
  font-size: 14px;
  opacity: 0.4;
  transition: all .25s var(--easing);
}
.cat-tile:hover .cat-tile-arrow {
  opacity: 1;
  transform: translate(4px, -4px);
  color: var(--gold-bright);
}

.all-cats-head {
  margin: 88px 0 32px;
  align-items: baseline;
}
.all-cats-head h3 {
  font-family: var(--font-headline);
  font-size: clamp(22px, 2.4vw, 30px);
  font-weight: 700;
  letter-spacing: -0.005em;
}
.all-cats-head .gold-rule {
  height: 1px;
  background: linear-gradient(90deg, var(--v2-rule), transparent);
}

.cat-group-h .eyebrow { font-size: 11.5px; }
.cat-group-count {
  border-radius: 999px;
  border: 1px solid var(--v2-rule);
  padding: 5px 12px;
  font-size: 10.5px;
  letter-spacing: 0.18em;
  background: rgba(212, 166, 74, 0.06);
}

/* ── Video carousel — restrained, modern ─────────────────────── */
.video-gallery-head {
  margin-bottom: 28px;
  padding-bottom: 18px;
  border-bottom: 1px solid var(--v2-rule-soft);
}
.video-gallery-sub {
  font-family: var(--font-body);
  font-size: 14.5px;
  color: rgba(255, 240, 214, 0.74);
  line-height: 1.55;
}
.video-count {
  font-size: 11px;
  letter-spacing: 0.22em;
  color: var(--gold);
}
.video-card .v-cap {
  font-family: var(--font-headline);
  font-weight: 600;
  font-size: 14px;
  line-height: 1.3;
  letter-spacing: -0.005em;
}
.video-card .v-meta {
  margin-top: 8px;
  font-family: var(--font-mono);
  font-size: 9.5px;
  letter-spacing: 0.16em;
}
.video-card .play {
  background: rgba(255, 255, 255, 0.92);
  color: var(--v2-ink-deep);
  width: 54px; height: 54px;
  font-size: 18px;
  box-shadow: 0 8px 24px rgba(0,0,0,0.3);
  border: 0;
  /* ▶ glyph: nudge 2px right for optical centre */
  padding-left: 2px;
  /* position button 4px below the card's vertical centre */
  transform: translate(-50%, calc(-50% + 8px));
}
.video-card:hover .play {
  background: var(--gold-bright);
  color: var(--v2-ink-deep);
  box-shadow: 0 12px 32px -8px rgba(240, 200, 112, 0.5);
  transform: translate(-50%, calc(-50% + 4px)) scale(1.06);
}

/* ── Gallery collage — wider rhythm ─────────────────────────── */
.gallery-collage {
  gap: 16px;
}
.gallery-collage > * {
  border-radius: 14px;
  overflow: hidden;
  border: 1px solid var(--v2-rule-soft);
  transition: transform .35s var(--easing), box-shadow .35s var(--easing);
}
.gallery-collage > *:hover {
  transform: scale(1.012);
  box-shadow: var(--v2-shadow-md);
}

/* ── Contest banner ──────────────────────────────────────────── */
.contest-band {
  background:
    radial-gradient(circle 360px at 100% 50%, rgba(255, 196, 79, 0.10), transparent 70%),
    linear-gradient(135deg, rgba(76, 7, 5, 0.85), rgba(23, 4, 4, 0.95));
  border-radius: 20px;
  padding: 56px 64px;
  display: grid;
  grid-template-columns: 1.4fr 1fr;
  gap: 40px;
  align-items: center;
}
.contest-band::before,
.contest-band::after { display: none; }

.contest-band .body { max-width: none; }
.contest-band .body .eyebrow {
  background: rgba(212, 166, 74, 0.10);
  border: 1px solid var(--v2-rule-soft);
  border-radius: 999px;
  padding: 6px 14px;
  display: inline-flex; align-items: center; gap: 8px;
  font-size: 10.5px;
}
.contest-band h3 {
  font-family: var(--font-headline);
  font-size: clamp(26px, 3.2vw, 38px);
  font-weight: 700;
  letter-spacing: -0.015em;
  line-height: 1.1;
  text-wrap: balance;
  margin-top: 16px;
}
.contest-band p {
  font-size: 15px;
  line-height: 1.65;
  margin-bottom: 24px;
}
.contest-band > .btn-primary {
  justify-self: start;
  align-self: center;
}

@media (max-width: 1024px) {
  .contest-band { grid-template-columns: 1fr; padding: 44px 36px; }
}
@media (max-width: 640px) {
  .contest-band { padding: 32px 24px; }
}

/* ============================================================
   PASS 3 — Background texture
   Subtle film-grain overlay across the page. Reduces gradient
   banding and adds a warm filmic quality without being heavy.
   Uses an inline SVG <feTurbulence> noise as a data URI so it
   loads with the stylesheet — no extra HTTP request.
   ============================================================ */
body::before {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 9998;
  opacity: 0.06;
  mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml;utf8,<svg viewBox='0 0 240 240' xmlns='http://www.w3.org/2000/svg'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 0.95   0 0 0 0 0.9   0 0 0 0 0.78   0 0 0 0.5 0'/></filter><rect width='100%25' height='100%25' filter='url(%23n)'/></svg>");
  background-size: 240px 240px;
}

/* The hero already has a vignette of its own; tone the grain there
   slightly so it doesn't fight the trophy glow. */
.hero { isolation: isolate; }

/* Hide the grain on print */
@media print {
  body::before { display: none; }
}

/* ============================================================
   PASS 4 — Loading / skeleton shimmer
   Applied automatically by v2-reveal.js to images inside cards
   (jury avatars, nominee posters, gallery photos, video thumbs,
   partner logos). The image container shows a subtle shimmer
   until the image loads, then fades in.
   ============================================================ */
@keyframes v2-shimmer {
  0%   { background-position: -200% 0; }
  100% { background-position: 200% 0; }
}

/* The wrapper around any <img> that's still loading.
   The script wraps eligible <img>s in a .v2-img-slot and applies
   .v2-loading until the image's load event fires. */
.v2-img-slot {
  position: relative;
  overflow: hidden;
  background: rgba(255, 240, 214, 0.04);
}

/* Fill-parent cases: when the parent has an explicit/grid-stretched
   size and the <img> is supposed to cover it (object-fit: cover), the
   slot must also be 100% × 100% — otherwise the img's `height: 100%`
   resolves to its intrinsic aspect ratio because the slot has no
   height of its own, leaving empty space inside the parent box
   (visible bug in gallery collage: landscape photos showed maroon
   space below them in portrait/square grid cells).
   Partner-card is excluded on purpose — its logos are intrinsically
   smaller than the card (max-width:170px, centered), so the slot must
   stay auto-sized there. */
.gc-tile > .v2-img-slot,
.nom-poster > .v2-img-slot,
.jury-card .avatar > .v2-img-slot,
.video-card > .v2-img-slot,
.cine-card .img > .v2-img-slot {
  width: 100%;
  height: 100%;
}
.v2-img-slot.v2-loading::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(90deg,
      transparent 0%,
      rgba(240, 200, 112, 0.10) 50%,
      transparent 100%);
  background-size: 200% 100%;
  animation: v2-shimmer 1.4s ease-in-out infinite;
  z-index: 1;
}
.v2-img-slot > img {
  position: relative;
  z-index: 2;
  opacity: 0;
  transition: opacity .45s var(--easing);
}
.v2-img-slot.v2-loaded > img {
  opacity: 1;
}

/* Skeleton placeholder for text rows (used during CMS load) */
.v2-skeleton {
  background: linear-gradient(
    90deg,
    rgba(255, 240, 214, 0.04) 0%,
    rgba(240, 200, 112, 0.10) 50%,
    rgba(255, 240, 214, 0.04) 100%);
  background-size: 200% 100%;
  animation: v2-shimmer 1.4s ease-in-out infinite;
  border-radius: 6px;
  color: transparent;
  pointer-events: none;
  user-select: none;
}
.v2-skeleton-line {
  height: 12px;
  margin: 8px 0;
  display: block;
}
.v2-skeleton-line.lg { height: 18px; }
.v2-skeleton-line.sm { height: 9px; }
.v2-skeleton-pill {
  display: inline-block;
  height: 24px;
  width: 80px;
  border-radius: 999px;
}

/* ============================================================
   PASS 5 — Iconography
   Swap prominent emoji/character icons for crisp inline SVG.
   Uses ::before background-image with data-URI SVG so we don't
   touch any JSX. The character inside the original element is
   hidden via font-size: 0 (kept for accessibility tools that
   read the underlying text node).
   ============================================================ */

/* Star — used in success modal, phase banner (winners), footer crest fallback */
.star-big,
.phase-banner .ic.gold,
.foot-brand .crest-row .crest:not(:has(img)) {
  font-size: 0 !important;
  position: relative;
}
.star-big::before,
.phase-banner .ic.gold::before,
.foot-brand .crest-row .crest:not(:has(img))::before {
  content: "";
  position: absolute;
  inset: 0;
  background: center / 60% no-repeat url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23f0c870'><path d='M12 2l2.6 7.4H22l-6 4.6 2.3 7.4L12 16.8l-6.3 4.6L8 14 2 9.4h7.4z'/></svg>");
}
.star-big {
  display: inline-block;
}
.star-big::before {
  /* size for big-star (success modal) */
  background-size: 70% auto;
  filter: drop-shadow(0 0 18px rgba(240, 200, 112, 0.5));
}

/* Hourglass — used in phase banner (coming soon) */
.phase-banner .ic:not(.gold) {
  font-size: 0 !important;
  position: relative;
}
.phase-banner .ic:not(.gold)::before {
  content: "";
  position: absolute;
  inset: 0;
  background: center / 55% no-repeat url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23e8c97a' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'><path d='M5 22h14M5 2h14M7 2v3a5 5 0 0 0 5 5 5 5 0 0 0 5-5V2M7 22v-3a5 5 0 0 1 5-5 5 5 0 0 1 5 5v3'/></svg>");
}

/* Arrow (NE) — used on cat-tile right side and result rows */
.cat-tile-arrow {
  font-size: 0 !important;
  width: 22px; height: 22px;
  display: inline-block;
  background: center / contain no-repeat url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23d4a64a' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'><path d='M7 17 17 7M9 7h8v8'/></svg>");
  transition: transform .25s var(--easing), filter .25s var(--easing);
}
.cat-tile:hover .cat-tile-arrow {
  filter: brightness(1.5) saturate(1.2);
}

/* Close ✕ button — modal headers, photo modal */
.modal-h .x,
.pm-x {
  font-size: 0 !important;
  position: relative;
}
/* X drawn with two CSS-rotated lines — no SVG data URI parsing,
   no font glyph dependency. ::before = one diagonal, ::after = other. */
.modal-h .x::before,
.pm-x::before,
.modal-h .x::after,
.pm-x::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 14px;
  height: 2px;
  background: var(--ivory);
  border-radius: 2px;
  inset: auto;
  font-size: 0;
  line-height: 0;
  transition: background .2s var(--easing), transform .2s var(--easing);
}
.modal-h .x::before,
.pm-x::before {
  transform: translate(-50%, -50%) rotate(45deg);
}
.modal-h .x::after,
.pm-x::after {
  transform: translate(-50%, -50%) rotate(-45deg);
}
.modal-h .x:hover::before,
.pm-x:hover::before {
  transform: translate(-50%, -50%) rotate(45deg) scale(1.1);
  background: var(--gold-bright);
}
.modal-h .x:hover::after,
.pm-x:hover::after {
  transform: translate(-50%, -50%) rotate(-45deg) scale(1.1);
  background: var(--gold-bright);
}

/* Check ✓ — vote-rail-pill done state, nom-pick selected */
.vote-rail-pill.done .dot,
.checklist-cat .status:not(.empty) {
  /* keep the existing ✓ character but bump weight via font */
  font-weight: 700;
}

/* Carousel arrows ‹ › — SVG icon replacement via ::before.
   Only .partner-arrow needs position:relative (it lives in a flex row).
   .hero-arrow and .pm-arrow are position:absolute in the original — overriding
   them to relative pulls both arrows into normal flow and stacks them at the
   left edge of the container. Those two only need font-size:0. */
.partner-arrow {
  font-size: 0 !important;
  position: relative;
}
.hero-arrow,
.pm-arrow {
  font-size: 0 !important;
}
/* Chevron drawn with two CSS borders on a rotated square — no SVG
   data URI to mis-parse, no font glyph. The square has top + left
   borders only, then rotates: -45deg → left-pointing `<`, 135deg →
   right-pointing `>`. Works in every browser, always visible. */
.partner-arrow::before,
.hero-arrow::before,
.pm-arrow::before {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 9px;
  height: 9px;
  border-top: 2px solid currentColor;
  border-left: 2px solid currentColor;
  /* Slight nudge so the rotated square's visual centre matches the
     button centre (the rotation origin is the square's center, but
     the visible mass of `<` is offset to the right). */
  transform: translate(calc(-50% + 2px), -50%) rotate(-45deg);
  transition: transform .2s var(--easing), border-color .2s var(--easing);
}
/* right-pointing chevron — every "next" arrow */
.partners-wrap .partner-arrow:last-child::before,
.hero-arrow.r::before,
.pm-arrow.r::before,
.video-arrow.r::before {
  transform: translate(calc(-50% - 2px), -50%) rotate(135deg);
}

/* small inline spinner (used inside submit button) — refine */
.spinner {
  width: 14px;
  height: 14px;
  border-radius: 999px;
  border: 2px solid rgba(255, 240, 214, 0.25);
  border-top-color: var(--gold-bright);
  animation: v2-spin .8s linear infinite;
  display: inline-block;
  vertical-align: -2px;
  margin-right: 8px;
}
@keyframes v2-spin {
  to { transform: rotate(360deg); }
}

/* ============================================================
   PASS 6 — Active-section nav highlight
   v2-reveal.js watches each anchored section and toggles
   `.v2-nav-active` on the matching nav-link as the user scrolls.
   ============================================================ */
.nav-link.v2-nav-active {
  color: var(--gold-bright) !important;
}
.nav-link.v2-nav-active::after {
  transform: scaleX(1) !important;
  background: var(--gold-bright);
}
/* Mobile menu mirror: when the matching nav item is the current
   sub-page, tint it gold so the user has the same "you are here"
   cue inside the hamburger menu. */
.mobile-menu .m-links a.v2-nav-active {
  color: var(--gold-bright) !important;
}

/* Tech Jury modal grid: 2 per row at ALL sizes — including mobile.
   Replaced the inline-style `auto-fit, minmax(180px, 1fr)` that was
   collapsing to 1 per row because the cards' inner padding + bio
   text were pushing each card's intrinsic width past 180px.
   gap shrinks on narrow phones so two cards still fit comfortably. */
.tech-jury-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 16px;
}
@media (max-width: 520px) {
  .tech-jury-grid {
    gap: 10px;
  }
}

/* Scroll progress bar — pinned to top edge, fills as the page scrolls.
   Updated by v2-reveal.js via a CSS custom property. */
.v2-progress {
  position: fixed;
  top: 0; left: 0;
  height: 2px;
  width: 100%;
  z-index: 200;
  pointer-events: none;
  background: transparent;
}
.v2-progress::before {
  content: "";
  display: block;
  height: 100%;
  width: var(--v2-progress, 0%);
  background: linear-gradient(90deg, var(--gold), var(--gold-bright));
  box-shadow: 0 0 10px rgba(240, 200, 112, 0.5);
  transition: width .12s linear;
}

/* ============================================================
   PASS 7 — Accessibility
   Skip-to-content link, refined focus rings, better-contrast
   selection, improved focus order inside modals.
   ============================================================ */

/* Skip-to-content — visually hidden until focused via Tab */
.v2-skip-link {
  position: fixed;
  top: -100px;
  left: 16px;
  z-index: 9999;
  padding: 12px 18px;
  background: var(--gold-bright);
  color: var(--v2-ink-deep);
  font-family: var(--font-headline);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.06em;
  border-radius: 8px;
  text-decoration: none;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.4);
  transition: top .2s var(--easing);
}
.v2-skip-link:focus,
.v2-skip-link:focus-visible {
  top: 16px;
  outline: 2px solid var(--ink);
  outline-offset: 2px;
}

/* Text selection — readable */
::selection {
  background: rgba(240, 200, 112, 0.4);
  color: var(--ivory);
}

/* Refined focus ring — keyboard only */
:focus-visible {
  outline: 2px solid var(--gold-bright);
  outline-offset: 3px;
  border-radius: 6px;
  transition: outline-offset .15s var(--easing);
}
button:focus-visible,
.nav-link:focus-visible,
.nav-cta:focus-visible,
.btn-primary:focus-visible,
.btn-ghost:focus-visible {
  outline-offset: 4px;
}

/* Make sure mouse clicks don't show the ring */
:focus:not(:focus-visible) { outline: none; }

/* ============================================================
   PASS 8 — Print stylesheet
   Used primarily for the terms page (and the contest entry pass).
   Cleans the dark theme into print-friendly black-on-white.
   ============================================================ */
@media print {
  :root {
    color-scheme: light;
  }
  html, body {
    background: white !important;
    color: #1a0a08 !important;
    font-size: 11pt;
    line-height: 1.5;
  }
  body::before { display: none; }   /* kill grain */
  .nav, .foot, .nav-cta, .nav-burger,
  .partners, .contest-band, .v2-progress, .v2-skip-link,
  .mobile-menu, .modal-backdrop {
    display: none !important;
  }
  /* Print-friendly section breaks */
  .section, .terms-sec, .page-hero {
    page-break-inside: avoid;
    background: white !important;
    border-color: rgba(0, 0, 0, 0.15) !important;
    color: #1a0a08 !important;
  }
  /* Type — switch to a serif stack for print readability */
  .page-hero-title,
  .section-title,
  .terms-sec-head h2,
  .terms-intro,
  h1, h2, h3, h4, h5 {
    color: #1a0a08 !important;
    font-family: "Noto Serif Kannada", Georgia, serif !important;
  }
  p, li, dd, .terms-list > li, .section-lede, .page-hero-lede {
    color: #1a0a08 !important;
  }
  /* Lists / numerals — print legibility */
  .terms-sec-num {
    color: rgba(0, 0, 0, 0.4) !important;
    font-weight: 800 !important;
  }
  .terms-list > li::before {
    color: rgba(0, 0, 0, 0.55) !important;
  }
  .terms-block {
    background: rgba(0, 0, 0, 0.04) !important;
    border-left: 2px solid #b9040b !important;
    border-radius: 0 !important;
  }
  .terms-note {
    background: rgba(0, 0, 0, 0.03) !important;
    border: 1px solid rgba(0, 0, 0, 0.12) !important;
  }
  /* Show URLs after links for print reference */
  a[href^="http"]::after,
  a[href^="mailto"]::after {
    content: " (" attr(href) ")";
    font-size: 9pt;
    color: rgba(0, 0, 0, 0.55);
    word-break: break-all;
  }
  /* Don't break inside grouped content */
  .terms-def, .terms-block, .terms-note { page-break-inside: avoid; }
  /* Page margins (print-friendly) */
  @page { margin: 18mm 16mm; }
}

/* ============================================================
   PASS 9 — Section divider motif
   A subtle "&" or fleuron between major homepage sections.
   Uses an SVG so it's crisp; spaced with the existing section
   rhythm so it doesn't push layouts around.
   ============================================================ */
.section + .section::before {
  content: "";
  display: block;
  width: 56px;
  height: 18px;
  margin: -60px auto 60px;
  opacity: 0.65;
  background: center / contain no-repeat url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 56 18' fill='none' stroke='%23d4a64a' stroke-width='1' stroke-linecap='round'><line x1='0' y1='9' x2='18' y2='9'/><line x1='38' y1='9' x2='56' y2='9'/><circle cx='28' cy='9' r='3.2'/><circle cx='28' cy='9' r='1.2' fill='%23d4a64a'/></svg>");
}
/* The very first .section after the hero gets no divider — it sits
   directly against the partners band. */
.partners + .section::before { display: none; }

/* On mobile, divider stays but with reduced spacing */
@media (max-width: 760px) {
  .section + .section::before {
    margin: -36px auto 36px;
    transform: scale(0.85);
  }
}

/* ============================================================
   PASS 10 — Theme switcher pill (Standard / Dark)
   Floats in the bottom-right corner. Injected by v2-reveal.js.
   ============================================================ */
.v2-theme-switch {
  display: none !important;   /* hidden from normal users; default is Standard theme */
  position: fixed;
  bottom: 20px;
  right: 20px;
  z-index: 150;
  display: inline-flex;
  padding: 4px;
  background: rgba(14, 8, 8, 0.78);
  backdrop-filter: blur(14px) saturate(140%);
  border: 1px solid var(--v2-rule);
  border-radius: 999px;
  box-shadow: 0 10px 28px rgba(0, 0, 0, 0.4);
  font-family: var(--font-headline);
}
.v2-theme-switch button {
  padding: 8px 14px;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  border: 0;
  border-radius: 999px;
  background: transparent;
  color: rgba(255, 240, 214, 0.74);
  cursor: pointer;
  transition: color .2s var(--easing), background .2s var(--easing);
}
.v2-theme-switch button:hover {
  color: var(--ivory);
}
.v2-theme-switch button.on {
  background: var(--gold-bright);
  color: var(--v2-ink-deep);
  box-shadow: 0 4px 14px -4px rgba(240, 200, 112, 0.5);
}

@media (max-width: 760px) {
  .v2-theme-switch { bottom: 14px; right: 14px; }
  .v2-theme-switch button { padding: 7px 11px; font-size: 10px; letter-spacing: 0.1em; }
}

/* ── Subtle "S | D" theme toggle in the footer (internal QA) ──
   Deliberately understated — sits in the foot-bottom row near the
   copyright. Public users default to Standard and won't really
   notice this. Hover/active gently brighten. */
.v2-theme-mini {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.18em;
  color: rgba(255, 240, 214, 0.32);   /* very faint until hover */
  user-select: none;
}
.v2-theme-mini button {
  padding: 2px 6px;
  border: 0;
  background: transparent;
  color: inherit;
  font: inherit;
  letter-spacing: inherit;
  cursor: pointer;
  transition: color .2s var(--easing);
}
.v2-theme-mini:hover {
  color: rgba(255, 240, 214, 0.55);
}
.v2-theme-mini button:hover {
  color: var(--ivory);
}
.v2-theme-mini button.on {
  color: var(--gold);
}
.v2-theme-mini span {
  opacity: 0.5;
  font-weight: 300;
}

/* Hide switcher when printing */
@media print {
  .v2-theme-switch { display: none !important; }
}

/* ──────────────────────────────────────────────────────────────
   GALLERY LIGHTBOX — v2 theme alignment
   The original uses pitch-black backdrop, tall rectangular arrows,
   and ::before/::after CSS-cross for the close button. This block
   brings all three in line with the v2 round-button style.
   ────────────────────────────────────────────────────────────── */

/* Warmer dark backdrop — less pitch-black, matches the site's ink tone */
.gallery-lightbox-backdrop {
  background: rgba(8, 2, 2, 0.72);
}

/* Lightbox box — warm dark, softly rounded, gold border */
.gallery-lightbox {
  background: rgba(18, 4, 4, 0.97);
  border-color: rgba(212, 166, 74, 0.30);
  border-radius: 12px;
}

/* Close button — round pill, gold border, ✕ via ::before (same technique as .story-modal .pm-x) */
.gallery-lightbox .pm-x {
  width: 34px; height: 34px;
  border-radius: 999px;
  border: 1px solid rgba(212, 166, 74, 0.40);
  background: rgba(255, 240, 214, 0.06);
  color: var(--ivory);
  display: flex; align-items: center; justify-content: center;
  transition: background .2s var(--easing), border-color .2s var(--easing), color .2s var(--easing);
}
.gallery-lightbox .pm-x:hover {
  background: var(--gold-bright);
  border-color: var(--gold-bright);
  color: var(--ink);
}
/* X drawn with two CSS-rotated lines — same approach as story-modal. */
.gallery-lightbox .pm-x::before,
.gallery-lightbox .pm-x::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 14px;
  height: 2px;
  background: var(--gold);
  border-radius: 2px;
  inset: auto;
  font-size: 0;
  line-height: 0;
  transition: background .2s var(--easing);
}
.gallery-lightbox .pm-x::before {
  transform: translate(-50%, -50%) rotate(45deg);
}
.gallery-lightbox .pm-x::after {
  transform: translate(-50%, -50%) rotate(-45deg);
  display: block;
}
.gallery-lightbox .pm-x:hover::before,
.gallery-lightbox .pm-x:hover::after {
  background: var(--ink);
}

/* Story modal (Cine Corner popup) — round close button.
   Button has no text content. We inject the ✕ glyph via ::before as a
   normal flex item (position:static) so the flex centering picks it up.
   ::after is suppressed to prevent the duplicate CSS-line from styles.css. */
.story-modal .pm-x {
  width: 34px; height: 34px;
  border-radius: 999px;
  border: 1px solid rgba(212, 166, 74, 0.50);
  background: rgba(10, 3, 3, 0.82);
  color: var(--gold);
  backdrop-filter: blur(8px);
  display: flex; align-items: center; justify-content: center;
  transition: background .2s var(--easing), border-color .2s var(--easing), color .2s var(--easing);
}
.story-modal .pm-x:hover {
  background: var(--gold-bright);
  border-color: var(--gold-bright);
  color: var(--ink);
}
/* X drawn with two CSS-rotated lines — no SVG data URI, no font glyph.
   ::before is one diagonal, ::after the other. */
.story-modal .pm-x::before,
.story-modal .pm-x::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 14px;
  height: 2px;
  background: var(--gold);
  border-radius: 2px;
  /* override anything the general .pm-x::before rule sets */
  inset: auto;
  font-size: 0;
  line-height: 0;
  transition: background .2s var(--easing);
}
.story-modal .pm-x::before {
  transform: translate(-50%, -50%) rotate(45deg);
}
.story-modal .pm-x::after {
  transform: translate(-50%, -50%) rotate(-45deg);
  display: block;  /* the general rule disables ::after — re-enable here */
}
.story-modal .pm-x:hover::before,
.story-modal .pm-x:hover::after {
  background: var(--ink);
}

/* Nav arrows — round pill, centred vertically on the photo */
.gallery-lightbox .pm-arrow {
  width: 44px; height: 44px;
  border-radius: 999px;
  top: 50%; left: auto; right: auto;
  transform: translateY(-50%);
  background: rgba(255, 240, 214, 0.08);
  border: 1px solid rgba(212, 166, 74, 0.40);
  color: var(--ivory);
  font-size: 22px !important;
  display: flex; align-items: center; justify-content: center;
  backdrop-filter: blur(6px);
  transition: background .2s var(--easing), border-color .2s var(--easing), color .2s var(--easing);
}
.gallery-lightbox .pm-arrow:hover {
  background: var(--gold-bright);
  border-color: var(--gold-bright);
  color: var(--ink);
}
/* Drop the border-chevron ::before — font glyphs ‹ › are used instead */
.gallery-lightbox .pm-arrow::before { display: none; }
.gallery-lightbox .pm-arrow.l { left: 14px; }
.gallery-lightbox .pm-arrow.r { right: 14px; }
.gallery-lightbox .pm-play { border-radius: 999px; }

@media (max-width: 700px) {
  .gallery-lightbox .pm-arrow { width: 38px; height: 38px; font-size: 18px !important; }
  .gallery-lightbox .pm-arrow.l { left: 8px; }
  .gallery-lightbox .pm-arrow.r { right: 8px; }
}