/* LIVE FROM THE TIDES — /live
   ═══════════════════════════════════════════════════════════════════════

   The Dark Tides broadcast deck. Black water, aged wood, brass and one red.

   FOUR THINGS TO KNOW BEFORE EDITING.

   • ELEMENT RESETS ARE WRAPPED IN :where(). `.lv-body p{margin:0}` is
     specificity (0,1,1) and would beat every single-class rule further down
     the file, which is exactly the bug that cost a cycle on the treasure
     hunt stylesheet. Anything added here that sets a margin on a bare p, h1
     to h4, ul, figure or img keeps that shape.

   • THE HERO SWAPS WHOLESALE AT 1024px. Above it the painted comp carries
     the headline and the four buttons, and real anchors are laid over the
     painted buttons in percentages of the artwork. Below it the comp is not
     used at all — its type is unreadable at phone widths — and a portrait
     plate takes over with real HTML text. Exactly one hero image is fetched
     per breakpoint; the <picture> media queries and the preload media bands
     in live.html mirror each other and must be changed together.

   • EVERY DECORATIVE ABSOLUTE LAYER IS pointer-events:none. A positioned
     <picture> or scrim still takes clicks even when its <img> sits at a
     negative z-index, which silently swallows the CTAs under it.

   • DESKTOP OVERRIDES GO AT THE END. Same-specificity rules resolve by
     order, so a min-width block inserted above the base rules loses.

   Motion is deliberately small: a lantern that breathes, a red pulse on the
   live badge, a fade-and-rise on reveal, and nothing else. All of it is off
   under prefers-reduced-motion. */

:root{
  --lv-red:      #b3262b;
  --lv-red-lt:   #e03a3a;
  --lv-brass:    #c89b3c;
  --lv-brass-lt: #e3be72;
  --lv-parch:    #efe3c8;
  --lv-ink:      #05070a;
  --lv-ink-2:    #090c11;
  --lv-panel:    #0c1016;
  --lv-hair:     rgba(200,155,60,.22);
  --lv-hair-2:   rgba(239,227,200,.10);
  --lv-shadow:   0 18px 48px rgba(0,0,0,.55);
  --lv-gut:      clamp(16px, 4vw, 56px);
  --lv-max:      1480px;
  --lv-round:    3px;
}

/* ── the page ────────────────────────────────────────────────────────── */

.lv-body{
  margin:0;
  background:var(--lv-ink);
  color:var(--lv-parch);
  font-family:var(--ui,'Jost',system-ui,sans-serif);
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
.lv-body :where(h1,h2,h3,h4,p,ul,ol,figure,blockquote){margin:0}
.lv-body :where(ul,ol){padding:0;list-style:none}
.lv-body :where(img){display:block;max-width:100%;height:auto}
/* `height:auto` is load-bearing. Every <img> here carries width/height
   attributes to reserve its box and stop layout shift, and Chrome turns
   those into a presentational height. A rule that sets `aspect-ratio` but
   not `height` therefore loses: the attribute height stays definite and the
   ratio is ignored, which is how the shore photographs first rendered at
   their source aspect instead of 4:3. */
.lv-body :where(a){color:inherit}

.lv-wrap{width:min(var(--lv-max),100%);margin-inline:auto;padding-inline:var(--lv-gut)}

.lv-vh{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;
  overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap;border:0}

[id]{scroll-margin-top:calc(var(--bar,88px) + 16px)}

/* Shared section furniture. */
.lv-sec{position:relative;padding-block:clamp(44px,6vw,92px)}
.lv-sec--tight{padding-block:clamp(30px,4vw,56px)}

.lv-head{display:flex;flex-wrap:wrap;align-items:flex-end;gap:14px 24px;
  margin-bottom:clamp(20px,2.6vw,34px)}
.lv-head__text{min-width:0}
.lv-h2{font-family:var(--display,Georgia,serif);font-weight:600;
  font-size:clamp(25px,3.4vw,44px);line-height:1.06;letter-spacing:.01em;
  color:#f5ecd8;text-shadow:0 2px 18px rgba(0,0,0,.6)}
.lv-sub{margin-top:9px;font-size:clamp(11px,1vw,13px);letter-spacing:.2em;
  text-transform:uppercase;color:rgba(239,227,200,.6)}
.lv-head__aside{margin-left:auto}

/* A hairline with a brass diamond in the middle — the site's ornament. */
.lv-rule{display:flex;align-items:center;gap:12px;margin:14px 0 0;color:var(--lv-brass)}
.lv-rule::before,.lv-rule::after{content:'';height:1px;flex:1 1 0;
  background:linear-gradient(90deg,transparent,rgba(200,155,60,.55),transparent)}
.lv-rule i{display:block;width:7px;height:7px;transform:rotate(45deg);
  background:var(--lv-brass);box-shadow:0 0 10px rgba(200,155,60,.6)}

/* ── buttons ─────────────────────────────────────────────────────────── */

.lv-btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;
  min-height:48px;padding:13px 22px;border-radius:var(--lv-round);
  border:1px solid rgba(200,155,60,.55);
  background:linear-gradient(180deg,rgba(14,18,25,.94),rgba(6,9,13,.96));
  color:var(--lv-brass-lt);text-decoration:none;cursor:pointer;
  font-family:var(--display,Georgia,serif);font-weight:600;
  font-size:clamp(12px,.92vw,14px);letter-spacing:.14em;text-transform:uppercase;
  text-align:center;
  transition:border-color .2s ease,box-shadow .2s ease,color .2s ease,
             background .2s ease,transform .2s ease}
.lv-btn:hover{border-color:var(--lv-brass-lt);color:#f8eed6;
  box-shadow:0 0 24px rgba(200,155,60,.26);transform:translateY(-1px)}
.lv-btn:focus-visible{outline:2px solid var(--lv-brass-lt);outline-offset:3px}
.lv-btn svg{width:17px;height:17px;flex:none}

.lv-btn--red{border-color:rgba(224,58,58,.7);color:#ffeaea;
  background:linear-gradient(180deg,#8e1d22,#5d1216)}
.lv-btn--red:hover{border-color:#ff6b6b;color:#fff;
  background:linear-gradient(180deg,#a82227,#6d151a);
  box-shadow:0 0 26px rgba(224,58,58,.34)}
.lv-btn--ghost{background:rgba(255,255,255,.03);border-color:var(--lv-hair-2);
  color:var(--lv-parch)}
.lv-btn--ghost:hover{border-color:rgba(200,155,60,.6);color:var(--lv-brass-lt)}
.lv-btn--sm{min-height:44px;padding:11px 16px;font-size:11.5px;letter-spacing:.11em}

/* ── the live badge ──────────────────────────────────────────────────── */

.lv-badge{display:inline-flex;align-items:center;gap:8px;
  padding:6px 11px;border-radius:2px;background:var(--lv-red);
  color:#fff;font-family:var(--ui,sans-serif);font-weight:600;
  font-size:11px;letter-spacing:.18em;text-transform:uppercase;line-height:1}
.lv-badge i{width:7px;height:7px;border-radius:50%;background:#fff;
  animation:lv-pulse 2.2s ease-in-out infinite}
@keyframes lv-pulse{
  0%,100%{opacity:1;box-shadow:0 0 0 0 rgba(255,255,255,.55)}
  50%    {opacity:.55;box-shadow:0 0 0 5px rgba(255,255,255,0)}
}

/* ════════════════════════════════════════════════════════════════════════
   1 — HERO
   ════════════════════════════════════════════════════════════════════════ */

.lv-hero{position:relative;isolation:isolate;background:#04060a;overflow:hidden}

/* PHONE AND TABLET — portrait plate, real HTML type.

   ONE <picture> serves both treatments. Two elements, one hidden per
   breakpoint, is the classic way to ship two hero images to every visitor:
   an <img> inside `display:none` still downloads in Chrome. So the element
   never changes — only where it sits and how it fits. */
.lv-hero__art{position:absolute;inset:0;z-index:-2;pointer-events:none}
.lv-hero__art img{width:100%;height:100%;object-fit:cover;object-position:54% 30%}
.lv-hero__scrim{position:absolute;inset:0;z-index:-1;pointer-events:none;
  background:
    linear-gradient(180deg,rgba(4,6,10,.80) 0%,rgba(4,6,10,.34) 26%,rgba(4,6,10,.72) 62%,#04060a 100%),
    radial-gradient(70% 50% at 20% 78%,rgba(200,110,30,.16),transparent 70%)}

.lv-hero__in{position:relative;padding:calc(var(--bar,88px) + clamp(26px,7vw,60px))
  var(--lv-gut) clamp(30px,6vw,56px);
  min-height:clamp(520px,86svh,760px);
  display:flex;flex-direction:column;justify-content:flex-end;gap:clamp(16px,3vw,26px)}

.lv-hero__where{position:absolute;top:calc(var(--bar,88px) + 14px);right:var(--lv-gut);
  text-align:right;font-family:var(--display,Georgia,serif);
  font-size:clamp(10px,1.5vw,13px);letter-spacing:.17em;text-transform:uppercase;
  line-height:1.6;color:#f2e6cd;text-shadow:0 2px 14px rgba(0,0,0,.85)}
.lv-hero__where b{display:block;font-weight:600}
.lv-hero__where span{color:rgba(239,227,200,.82)}

.lv-hero h1{font-family:var(--display,Georgia,serif);font-weight:700;
  font-size:clamp(40px,12.5vw,86px);line-height:.94;letter-spacing:.005em;
  color:#f6edd9;text-shadow:0 4px 30px rgba(0,0,0,.8)}
.lv-hero h1 span{display:block}
.lv-hero__sup{font-family:var(--display,Georgia,serif);
  font-size:clamp(14px,4vw,22px);letter-spacing:.13em;text-transform:uppercase;
  color:#e7d9b8;text-shadow:0 2px 16px rgba(0,0,0,.8)}
.lv-hero__lead{font-size:clamp(11px,2.9vw,14px);letter-spacing:.24em;
  text-transform:uppercase;color:rgba(239,227,200,.74)}
.lv-hero__rule{max-width:300px}

.lv-hero__cta{display:grid;grid-template-columns:1fr 1fr;gap:10px;max-width:520px}
/* The painted buttons and the HTML buttons are never both present: below
   1024 the hotspots are gone, above it the HTML row is. One set of links at
   every width, so nothing invisible can take a tab stop. */
.lv-hero__hot{display:none}
.lv-hero__cta .lv-btn{width:100%;padding-inline:12px;letter-spacing:.09em}

.lv-hero__script{font-family:var(--display,Georgia,serif);font-style:italic;
  font-size:clamp(15px,4.4vw,24px);line-height:1.25;color:var(--lv-brass-lt);
  text-shadow:0 2px 16px rgba(0,0,0,.8)}
.lv-hero__script span{display:block}

/* The lantern that breathes. Drawn, not loaded. */
.lv-hero__lamp{position:absolute;left:-6%;bottom:6%;width:min(42vw,340px);
  aspect-ratio:1;z-index:-1;pointer-events:none;
  background:radial-gradient(circle at 50% 50%,rgba(255,176,74,.30),transparent 62%);
  animation:lv-flicker 6.5s ease-in-out infinite}
@keyframes lv-flicker{
  0%,100%{opacity:.85;transform:scale(1)}
  38%    {opacity:1;transform:scale(1.045)}
  61%    {opacity:.78;transform:scale(.985)}
}

/* ════════════════════════════════════════════════════════════════════════
   2 — BROADCAST + CAPTAIN'S DISPATCH
   ════════════════════════════════════════════════════════════════════════ */

.lv-deck{background:
  linear-gradient(180deg,#04060a 0%,#070a0f 40%,#05070b 100%)}
.lv-deck__grid{display:grid;gap:clamp(18px,2.4vw,28px)}

/* — the player — */
.lv-stage{min-width:0}
.lv-stage__frame{position:relative;border:1px solid var(--lv-hair);
  border-radius:var(--lv-round);background:#000;box-shadow:var(--lv-shadow);
  overflow:hidden}
.lv-stage__frame::after{content:'';position:absolute;inset:0;pointer-events:none;
  border-radius:inherit;box-shadow:inset 0 0 0 1px rgba(255,255,255,.04),
    inset 0 30px 60px rgba(0,0,0,.35)}

.lv-stage__ratio{position:relative;aspect-ratio:16/9;width:100%}
.lv-stage__ratio iframe{position:absolute;inset:0;width:100%;height:100%;border:0}

/* The facade: a poster and a play button. The iframe is only created when
   somebody asks for it, so the page costs nothing until then. */
.lv-facade{position:absolute;inset:0;width:100%;height:100%;padding:0;border:0;
  background:#04060a;cursor:pointer;display:block}
.lv-facade img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  opacity:.9;transition:opacity .25s ease,transform .5s ease}
.lv-facade::after{content:'';position:absolute;inset:0;
  background:linear-gradient(180deg,rgba(0,0,0,.45),transparent 34%,rgba(0,0,0,.55))}
.lv-facade:hover img{opacity:1;transform:scale(1.015)}
.lv-facade:focus-visible{outline:2px solid var(--lv-brass-lt);outline-offset:-4px}

/* The Facebook facade has no platform thumbnail behind it — Facebook
   publishes none we can read without a token — so it shows our own holding
   card instead of a fabricated still, and the card must not eat the click. */
.lv-facade--fb .lv-hold{position:absolute;inset:0;pointer-events:none}
.lv-facade--fb .lv-hold__in{background:rgba(4,6,10,.55);gap:16px}
.lv-facade--fb:hover .lv-hold img{opacity:.85}
/* In the stack, not floating over it — and brass, not red: a red rounded
   rectangle with a white triangle in it IS the YouTube mark, and this card
   is about to open Facebook. */
.lv-facade--fb .lv-facade__play{position:static;translate:none;left:auto;top:auto;
  background:linear-gradient(180deg,#c89b3c,#8a6520);
  box-shadow:0 8px 22px rgba(0,0,0,.5)}
.lv-facade--fb:hover .lv-facade__play{background:linear-gradient(180deg,#e3be72,#a88030)}
.lv-facade--fb .lv-facade__play svg{fill:#120d05}

.lv-facade__play{position:absolute;left:50%;top:50%;translate:-50% -50%;z-index:2;
  width:clamp(62px,7vw,88px);height:clamp(44px,4.9vw,62px);border-radius:12px;
  background:rgba(179,38,43,.94);display:grid;place-items:center;
  box-shadow:0 10px 30px rgba(0,0,0,.5);transition:background .2s ease,transform .2s ease}
.lv-facade:hover .lv-facade__play{background:#e03a3a;transform:scale(1.06)}
.lv-facade__play svg{width:30%;height:44%;fill:#fff}

.lv-stage__bar{position:absolute;left:0;right:0;top:0;z-index:2;
  display:flex;align-items:center;gap:12px;padding:12px clamp(12px,1.4vw,18px);
  background:linear-gradient(180deg,rgba(3,5,8,.86),transparent);
  pointer-events:none}
.lv-stage__bar h3{font-family:var(--display,Georgia,serif);font-weight:500;
  font-size:clamp(12px,1.25vw,17px);line-height:1.25;color:#f2e6cd;min-width:0;
  text-shadow:0 2px 10px rgba(0,0,0,.9)}

/* The holding card: no video id anywhere, so nothing pretends to be live. */
/* `z-index:0` is not decoration. The two layers below sit at negative
   z-index, and without a stacking context here they paint behind
   .lv-stage__frame's black background instead of behind the card — which is
   exactly how the holding card first rendered as an empty black box. */
.lv-hold{position:absolute;inset:0;z-index:0;isolation:isolate;
  display:grid;place-items:center;text-align:center;padding:22px;overflow:hidden}
.lv-hold img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  opacity:.72;z-index:-2;pointer-events:none}
.lv-hold::before{content:'';position:absolute;inset:0;z-index:-1;pointer-events:none;
  background:radial-gradient(58% 58% at 50% 46%,rgba(200,155,60,.16),transparent 72%),
             linear-gradient(180deg,rgba(4,6,10,.62),rgba(4,6,10,.5) 45%,rgba(4,6,10,.86))}
.lv-hold__in{display:grid;gap:12px;justify-items:center;max-width:34ch;
  padding:clamp(16px,2.4vw,28px) clamp(20px,3vw,40px);
  border:1px solid rgba(200,155,60,.3);border-radius:2px;
  background:rgba(4,6,10,.62);backdrop-filter:blur(3px);
  -webkit-backdrop-filter:blur(3px);box-shadow:0 18px 40px rgba(0,0,0,.5)}
.lv-hold p{font-family:var(--display,Georgia,serif);
  font-size:clamp(17px,2.2vw,27px);letter-spacing:.06em;text-transform:uppercase;
  color:#f2e6cd}
.lv-hold small{font-size:11.5px;letter-spacing:.2em;text-transform:uppercase;
  color:rgba(239,227,200,.56)}

/* ── the unlock countdown ────────────────────────────────────────────── */

/* Tabular figures, or the clock jitters sideways every second as the digit
   widths change — the one detail that makes a countdown feel cheap. */
.lv-count{display:inline-flex;flex-direction:column;align-items:center;gap:6px;
  padding:12px 20px;border:1px solid rgba(200,155,60,.34);border-radius:2px;
  background:rgba(4,6,10,.5)}
.lv-count__label{font-size:10.5px;letter-spacing:.22em;text-transform:uppercase;
  color:rgba(239,227,200,.6);text-align:center}
.lv-count__clock{font-family:var(--display,Georgia,serif);font-weight:600;
  font-size:clamp(22px,3vw,34px);line-height:1;letter-spacing:.06em;
  color:var(--lv-brass-lt);text-shadow:0 0 20px rgba(200,155,60,.28);
  font-variant-numeric:tabular-nums;font-feature-settings:'tnum' 1}
.lv-count.is-open{font-family:var(--display,Georgia,serif);
  font-size:clamp(13px,1.4vw,16px);color:var(--lv-brass-lt);
  letter-spacing:.04em;text-transform:none;padding:14px 20px;text-align:center}

/* The 16:9 frame is only ~200px tall on a 390px phone, and the card had a
   two-line headline, a countdown and the event name in it — the last line
   was clipped clean off. Below 600px the card gives up everything that is
   said elsewhere on the page. Measured, not guessed: the sweep asserts the
   card's bottom stays inside the frame at 390 and 360. */
@media (max-width:600px){
  .lv-hold{padding:10px}
  .lv-hold__in{padding:10px 14px;gap:8px;max-width:none}
  .lv-hold p{font-size:15px;line-height:1.25}
  .lv-hold small{display:none}
  .lv-count{padding:7px 12px;gap:2px}
  .lv-count__label{font-size:9px;letter-spacing:.13em}
  .lv-count__clock{font-size:19px}
  .lv-count.is-open{font-size:12px;padding:8px 10px}
}

/* The compact one under a playing video: a single line, not a panel. */
.lv-stage__note .lv-count{flex-direction:row;align-items:baseline;gap:9px;
  padding:0;border:0;background:none}
.lv-stage__note .lv-count__clock{font-size:14px;letter-spacing:.04em;
  text-shadow:none}
.lv-stage__note .lv-count.is-open{padding:0;font-size:12px}

.lv-stage__note{display:flex;flex-wrap:wrap;align-items:center;gap:8px 14px;
  margin-top:12px;font-size:11.5px;letter-spacing:.14em;text-transform:uppercase;
  color:rgba(239,227,200,.5)}
.lv-stage__note a{color:var(--lv-brass-lt);text-decoration:none;
  border-bottom:1px solid rgba(200,155,60,.4)}
.lv-stage__note a:hover{color:#f8eed6}

/* — the dispatch — */
.lv-disp{position:relative;min-width:0;
  border:1px solid var(--lv-hair);border-radius:var(--lv-round);
  background:
    linear-gradient(180deg,rgba(18,14,9,.92),rgba(9,7,5,.96)),
    repeating-linear-gradient(94deg,rgba(255,255,255,.017) 0 3px,transparent 3px 9px);
  box-shadow:var(--lv-shadow);
  display:flex;flex-direction:column;overflow:hidden}
.lv-disp__top{padding:clamp(16px,1.8vw,22px) clamp(16px,1.8vw,22px) 0;text-align:center}
.lv-disp__top h2{font-family:var(--display,Georgia,serif);font-weight:600;
  font-size:clamp(19px,2.1vw,27px);letter-spacing:.02em;color:var(--lv-brass-lt);
  text-shadow:0 0 22px rgba(200,155,60,.22)}
.lv-disp__list{flex:1 1 auto;overflow-y:auto;max-height:min(58vh,430px);
  padding:clamp(12px,1.5vw,18px) clamp(14px,1.8vw,22px);
  display:flex;flex-direction:column;gap:2px;
  scrollbar-width:thin;scrollbar-color:rgba(200,155,60,.4) transparent}
.lv-disp__list::-webkit-scrollbar{width:6px}
.lv-disp__list::-webkit-scrollbar-thumb{background:rgba(200,155,60,.35);border-radius:3px}

.lv-up{display:grid;grid-template-columns:auto 1fr;gap:6px 14px;align-items:baseline;
  padding:9px 8px;border-radius:2px;text-decoration:none;
  border-bottom:1px solid rgba(239,227,200,.06);
  transition:background .18s ease}
.lv-up:last-child{border-bottom:0}
a.lv-up:hover{background:rgba(200,155,60,.07)}
.lv-up__time{font-family:var(--display,Georgia,serif);font-size:13px;
  letter-spacing:.04em;color:rgba(239,227,200,.6);white-space:nowrap}
.lv-up__text{font-family:var(--display,Georgia,serif);font-size:clamp(13px,1.05vw,15.5px);
  line-height:1.45;color:#eee0c3;display:flex;align-items:baseline;gap:8px}
.lv-up__text svg{width:14px;height:14px;flex:none;translate:0 2px;
  fill:none;stroke:var(--lv-brass);stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
.lv-up.is-latest .lv-up__text{color:#fff6e2}
.lv-up.is-latest .lv-up__time{color:var(--lv-brass-lt)}
.lv-up.is-latest{background:linear-gradient(90deg,rgba(200,155,60,.12),transparent)}

.lv-disp__empty{padding:26px 10px 30px;text-align:center;display:grid;gap:10px;
  justify-items:center}
.lv-disp__empty p{font-family:var(--display,Georgia,serif);font-size:15px;
  color:rgba(239,227,200,.72);max-width:26ch;line-height:1.5}
.lv-disp__foot{padding:0 clamp(14px,1.8vw,22px) clamp(16px,1.8vw,22px);
  display:grid}
.lv-disp__foot .lv-btn{width:100%}

/* The brass lamp in the dispatch corner. */
.lv-disp__lamp{position:absolute;right:-30px;top:-30px;width:190px;height:190px;
  pointer-events:none;z-index:0;
  background:radial-gradient(circle at 60% 40%,rgba(255,176,74,.22),transparent 62%);
  animation:lv-flicker 7.5s ease-in-out infinite}

/* ════════════════════════════════════════════════════════════════════════
   3 — THE ADVENTURE FEED
   ════════════════════════════════════════════════════════════════════════ */

.lv-feed{background:linear-gradient(180deg,#05070b,#080b11 45%,#05070b)}

.lv-follow{display:flex;align-items:center;gap:12px;flex-wrap:wrap}
.lv-follow__label{font-size:11px;letter-spacing:.2em;text-transform:uppercase;
  color:rgba(239,227,200,.55)}
.lv-follow__set{display:flex;gap:8px}
.lv-follow__set a{display:grid;place-items:center;width:44px;height:44px;
  border:1px solid var(--lv-hair-2);border-radius:var(--lv-round);
  color:rgba(239,227,200,.8);background:rgba(255,255,255,.02);
  transition:color .18s ease,border-color .18s ease,box-shadow .18s ease}
.lv-follow__set a:hover{color:var(--lv-brass-lt);border-color:rgba(200,155,60,.6);
  box-shadow:0 0 16px rgba(200,155,60,.2)}
.lv-follow__set svg{width:19px;height:19px;fill:currentColor}

.lv-rail{position:relative}
.lv-rail__track{display:grid;grid-auto-flow:column;
  grid-auto-columns:minmax(232px,268px);gap:clamp(12px,1.4vw,18px);
  overflow-x:auto;overscroll-behavior-x:contain;
  scroll-snap-type:x mandatory;scroll-padding-inline:2px;
  padding:4px 2px 16px;
  scrollbar-width:thin;scrollbar-color:rgba(200,155,60,.35) transparent}
.lv-rail__track::-webkit-scrollbar{height:6px}
.lv-rail__track::-webkit-scrollbar-thumb{background:rgba(200,155,60,.3);border-radius:3px}

.lv-card{scroll-snap-align:start;min-width:0;display:flex;flex-direction:column;
  border:1px solid var(--lv-hair-2);border-radius:var(--lv-round);
  background:linear-gradient(180deg,rgba(16,20,27,.9),rgba(7,10,14,.95));
  text-decoration:none;overflow:hidden;
  transition:transform .22s var(--ease,ease),border-color .22s ease,box-shadow .22s ease}
a.lv-card:hover{transform:translateY(-3px);border-color:rgba(200,155,60,.45);
  box-shadow:0 14px 34px rgba(0,0,0,.5)}
.lv-card__shot{position:relative;aspect-ratio:16/10;background:#080b10;overflow:hidden}
.lv-card__shot img{width:100%;height:100%;object-fit:cover;
  transition:transform .4s ease;opacity:.94}
a.lv-card:hover .lv-card__shot img{transform:scale(1.04);opacity:1}
.lv-card__plat{position:absolute;left:10px;top:10px;display:grid;place-items:center;
  width:30px;height:30px;border-radius:50%;background:rgba(5,7,10,.82);
  border:1px solid rgba(255,255,255,.12);color:#fff}
.lv-card__plat svg{width:15px;height:15px;fill:currentColor}
.lv-card__plat[data-p="youtube"]{background:rgba(179,38,43,.92);border-color:rgba(255,255,255,.2)}
.lv-card__plat[data-p="facebook"]{background:rgba(24,54,96,.92)}
.lv-card__plat[data-p="instagram"]{background:rgba(70,30,66,.92)}
.lv-card__plat[data-p="tiktok"]{background:rgba(10,10,12,.92)}
.lv-card__dur{position:absolute;right:8px;bottom:8px;padding:3px 7px;border-radius:2px;
  background:rgba(4,6,9,.82);font-size:11px;letter-spacing:.06em;color:#e9dcbe}
.lv-card__body{padding:13px 14px 16px;display:grid;gap:5px}
.lv-card__body h3{font-family:var(--display,Georgia,serif);font-weight:500;
  font-size:15.5px;line-height:1.3;color:#f2e6cd}
.lv-card__body p{font-size:13px;line-height:1.45;color:rgba(239,227,200,.6)}
.lv-card__cat{margin-top:3px;font-size:10px;letter-spacing:.18em;text-transform:uppercase;
  color:rgba(200,155,60,.72)}

.lv-rail__arrow{display:none}

.lv-empty{border:1px dashed var(--lv-hair-2);border-radius:var(--lv-round);
  padding:34px 22px;text-align:center;color:rgba(239,227,200,.6);
  font-family:var(--display,Georgia,serif);font-size:15px;line-height:1.5}

/* ════════════════════════════════════════════════════════════════════════
   4 — TREASURE HUNT COMMAND CENTRE + FROM THE FESTIVAL
   ════════════════════════════════════════════════════════════════════════ */

.lv-cmd{background:linear-gradient(180deg,#05070b,#070a0e)}
.lv-cmd__grid{display:grid;gap:clamp(18px,2.4vw,28px)}

.lv-hunt{position:relative;overflow:hidden;border-radius:var(--lv-round);
  border:1px solid rgba(120,92,48,.5);box-shadow:var(--lv-shadow);
  padding:clamp(22px,3vw,36px);color:#2a1d0f;
  background:#cbb58c}
.lv-hunt__bg{position:absolute;inset:0;z-index:0;pointer-events:none}
.lv-hunt__bg img{width:100%;height:100%;object-fit:cover;opacity:.92}
.lv-hunt__bg::after{content:'';position:absolute;inset:0;
  background:radial-gradient(120% 90% at 20% 10%,rgba(255,244,214,.34),transparent 60%),
             linear-gradient(180deg,rgba(60,42,20,.06),rgba(40,26,10,.22))}
.lv-hunt__in{position:relative;z-index:1;display:grid;gap:16px;
  grid-template-columns:minmax(0,1fr);align-items:start}
.lv-hunt h2{font-family:var(--display,Georgia,serif);font-weight:700;
  font-size:clamp(22px,2.8vw,34px);line-height:1.1;color:#2b1c0b}
.lv-hunt__stage{margin-top:6px;font-family:var(--display,Georgia,serif);
  font-size:clamp(13px,1.3vw,16px);letter-spacing:.2em;text-transform:uppercase;
  color:#5e451f}
.lv-hunt__count{margin-top:16px;font-size:clamp(13px,1.3vw,15px);letter-spacing:.16em;
  text-transform:uppercase;color:#3b2a13;font-weight:500}

.lv-track{display:flex;align-items:center;gap:0;margin-top:12px;max-width:340px}
.lv-track__dot{position:relative;width:20px;height:20px;border-radius:50%;flex:none;
  border:2px solid #6b5124;background:transparent}
.lv-track__dot.is-on{background:radial-gradient(circle at 36% 32%,#e8c368,#8a6520);
  border-color:#4c380f;box-shadow:0 0 10px rgba(140,100,30,.5)}
.lv-track__link{flex:1 1 auto;height:2px;
  background:repeating-linear-gradient(90deg,#6b5124 0 6px,transparent 6px 10px)}
.lv-track__link.is-on{background:#6b5124}

.lv-hunt__cta{display:flex;flex-wrap:wrap;gap:10px;margin-top:20px}
.lv-hunt .lv-btn{border-color:rgba(60,42,18,.6);color:#f4e6c6;
  background:linear-gradient(180deg,#2c1f10,#160f07)}
.lv-hunt .lv-btn:hover{border-color:#2b1c0b;color:#fff5e0;
  background:linear-gradient(180deg,#3b2a15,#20160b);box-shadow:0 0 22px rgba(80,55,20,.4)}
.lv-hunt .lv-btn--ghost{background:rgba(43,28,11,.08);color:#2b1c0b;
  border-color:rgba(60,42,18,.45)}
.lv-hunt .lv-btn--ghost:hover{background:rgba(43,28,11,.16);color:#170f06}
.lv-hunt__note{margin-top:16px;max-width:52ch;font-size:13.5px;line-height:1.55;
  color:#4a3418}
.lv-hunt__token{justify-self:center;width:clamp(118px,14vw,156px);height:auto;
  filter:drop-shadow(0 12px 26px rgba(40,26,8,.45))}

/* — from the festival — */
.lv-fest{border:1px solid var(--lv-hair-2);border-radius:var(--lv-round);
  background:linear-gradient(180deg,rgba(13,17,23,.92),rgba(6,9,13,.96));
  padding:clamp(18px,2.2vw,28px);box-shadow:var(--lv-shadow)}
.lv-fest__grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));
  gap:clamp(10px,1.2vw,16px)}
.lv-tile{display:flex;flex-direction:column;gap:8px;margin:0;
  text-decoration:none;min-width:0}
.lv-tile img{width:100%;aspect-ratio:4/5;object-fit:cover;opacity:.9;
  border-radius:var(--lv-round);border:1px solid var(--lv-hair-2);
  transition:transform .4s ease,opacity .3s ease,border-color .2s ease}
a.lv-tile:hover img{transform:translateY(-3px);opacity:1;
  border-color:rgba(200,155,60,.55)}
.lv-tile figcaption,.lv-tile span{text-align:center;
  font-family:var(--display,Georgia,serif);font-size:clamp(11.5px,1vw,14px);
  line-height:1.25;color:rgba(242,230,205,.88)}
a.lv-tile:hover span{color:var(--lv-brass-lt)}

/* ════════════════════════════════════════════════════════════════════════
   5 — SHOTS FROM THE SHORE
   ════════════════════════════════════════════════════════════════════════ */

.lv-shore{position:relative;overflow:hidden;
  background:#0a0805}
.lv-shore__bg{position:absolute;inset:0;z-index:0;pointer-events:none}
.lv-shore__bg img{width:100%;height:100%;object-fit:cover;opacity:.55}
.lv-shore__bg::after{content:'';position:absolute;inset:0;
  background:linear-gradient(180deg,rgba(5,6,8,.7),rgba(5,6,8,.45) 40%,rgba(5,6,8,.86))}
.lv-shore .lv-wrap{position:relative;z-index:1}

/* Phone: a swipeable strip. Nothing rotated, nothing overlapping. */
.lv-shots{display:grid;grid-auto-flow:column;grid-auto-columns:min(74vw,300px);
  gap:14px;overflow-x:auto;scroll-snap-type:x mandatory;overscroll-behavior-x:contain;
  padding:6px 2px 18px;
  scrollbar-width:thin;scrollbar-color:rgba(200,155,60,.35) transparent}
.lv-shots::-webkit-scrollbar{height:6px}
.lv-shots::-webkit-scrollbar-thumb{background:rgba(200,155,60,.3);border-radius:3px}
.lv-shot{scroll-snap-align:center;margin:0;padding:8px 8px 34px;
  background:linear-gradient(180deg,#efe6d2,#ded2b8);
  border:1px solid rgba(0,0,0,.35);
  box-shadow:0 16px 34px rgba(0,0,0,.55);border-radius:2px;cursor:pointer}
.lv-shot img{width:100%;aspect-ratio:4/3;object-fit:cover;background:#111}
.lv-shot figcaption{margin-top:8px;font-family:var(--display,Georgia,serif);
  font-size:12px;color:#4a3d25;text-align:center;line-height:1.35}

.lv-shore__note{margin-top:18px;text-align:center;
  font-family:var(--display,Georgia,serif);font-style:italic;
  font-size:clamp(15px,2vw,21px);line-height:1.4;color:var(--lv-brass-lt)}
.lv-shore__note span{display:block}
.lv-shore__note small{display:block;margin-top:8px;font-style:normal;
  font-size:12px;letter-spacing:.2em;color:rgba(239,227,200,.5)}

/* the lightbox */
.lv-box{position:fixed;inset:0;z-index:140;display:grid;place-items:center;
  padding:clamp(12px,4vw,40px);background:rgba(3,5,8,.92);
  backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px)}
.lv-box[hidden]{display:none}
.lv-box img{max-width:min(1100px,100%);max-height:82vh;object-fit:contain;
  border:1px solid var(--lv-hair);box-shadow:0 30px 70px rgba(0,0,0,.7)}
.lv-box__cap{margin-top:12px;text-align:center;font-size:13px;
  color:rgba(239,227,200,.7);font-family:var(--display,Georgia,serif)}
.lv-box__btn{position:absolute;display:grid;place-items:center;
  width:48px;height:48px;border:1px solid var(--lv-hair-2);border-radius:50%;
  background:rgba(8,11,16,.8);color:var(--lv-parch);cursor:pointer;font-size:22px;
  line-height:1;font-family:var(--ui,sans-serif)}
.lv-box__btn:hover{color:var(--lv-brass-lt);border-color:rgba(200,155,60,.6)}
.lv-box__close{top:14px;right:14px}
.lv-box__prev{left:12px;top:50%;translate:0 -50%}
.lv-box__next{right:12px;top:50%;translate:0 -50%}

/* ════════════════════════════════════════════════════════════════════════
   6 — JOIN THE CREW
   ════════════════════════════════════════════════════════════════════════ */

.lv-crew{position:relative;overflow:hidden;background:#06080b}
.lv-crew__bg{position:absolute;inset:0;z-index:0;pointer-events:none}
.lv-crew__bg img{width:100%;height:100%;object-fit:cover;opacity:.85}
.lv-crew__bg::after{content:'';position:absolute;inset:0;
  background:linear-gradient(180deg,rgba(5,7,10,.72),rgba(5,7,10,.42) 42%,rgba(5,7,10,.92)),
             linear-gradient(90deg,rgba(5,7,10,.86),rgba(5,7,10,.22) 58%,transparent),
             radial-gradient(52% 58% at 76% 46%,rgba(200,155,60,.2),transparent 70%)}
.lv-crew .lv-wrap{position:relative;z-index:1}
.lv-crew__grid{display:grid;gap:clamp(20px,3vw,40px);align-items:center}
.lv-crew__kick{font-family:var(--display,Georgia,serif);
  font-size:clamp(14px,1.7vw,20px);letter-spacing:.06em;color:rgba(239,227,200,.72)}
.lv-crew h2{margin-top:6px;font-family:var(--display,Georgia,serif);font-weight:700;
  font-size:clamp(30px,5.4vw,60px);line-height:1.02;color:#f6edd9;
  text-shadow:0 4px 26px rgba(0,0,0,.6)}
.lv-crew__body{margin-top:14px;max-width:46ch;font-size:clamp(14px,1.2vw,16px);
  line-height:1.6;color:rgba(239,227,200,.76)}
.lv-crew__cta{margin-top:22px}
.lv-crew__art{position:relative;display:grid;place-items:center}
.lv-crew__art img{width:clamp(150px,26vw,290px);height:auto;
  filter:drop-shadow(0 22px 44px rgba(0,0,0,.6))}
.lv-crew__art::before{content:'';position:absolute;width:76%;aspect-ratio:1;
  border-radius:50%;background:radial-gradient(circle,rgba(200,155,60,.24),transparent 66%)}

.lv-perks{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));
  gap:14px;margin-top:clamp(26px,3.4vw,44px);
  padding-top:clamp(20px,2.6vw,30px);border-top:1px solid var(--lv-hair-2)}
.lv-perks li{display:grid;justify-items:center;gap:8px;text-align:center}
.lv-perks svg{width:24px;height:24px;fill:none;stroke:var(--lv-brass);
  stroke-width:1.4;stroke-linecap:round;stroke-linejoin:round}
.lv-perks span{font-size:11px;letter-spacing:.17em;text-transform:uppercase;
  color:rgba(239,227,200,.72)}

/* ════════════════════════════════════════════════════════════════════════
   7 — FOLLOW THE NEXT VOYAGE
   ════════════════════════════════════════════════════════════════════════ */

.lv-voy{background:linear-gradient(180deg,#05070b,#04060a)}
.lv-chart{position:relative;border:1px solid var(--lv-hair);border-radius:var(--lv-round);
  overflow:hidden;box-shadow:var(--lv-shadow);
  background:
    radial-gradient(90% 120% at 12% 92%,rgba(24,44,62,.9),transparent 62%),
    radial-gradient(80% 100% at 88% 8%,rgba(16,32,46,.85),transparent 60%),
    linear-gradient(180deg,#071018,#040a10)}
.lv-chart__in{position:relative;aspect-ratio:16/11;width:100%}
.lv-chart svg{position:absolute;inset:0;width:100%;height:100%}
.lv-chart__port{position:absolute;translate:-50% -50%;display:grid;gap:5px;
  justify-items:center;text-align:center;width:max-content;max-width:38vw}
.lv-chart__x{width:24px;height:24px;display:grid;place-items:center}
.lv-chart__x svg{position:static;width:100%;height:100%;
  stroke:var(--lv-red-lt);stroke-width:2.4;stroke-linecap:round;fill:none;
  filter:drop-shadow(0 0 8px rgba(224,58,58,.55))}
.lv-chart__port b{font-family:var(--display,Georgia,serif);font-weight:600;
  font-size:clamp(11px,1.25vw,16px);letter-spacing:.11em;text-transform:uppercase;
  color:#f2e6cd;text-shadow:0 2px 10px rgba(0,0,0,.9);white-space:nowrap}
.lv-chart__port em{font-style:normal;font-size:clamp(9.5px,1vw,12px);
  letter-spacing:.14em;color:rgba(239,227,200,.6)}
.lv-chart__port[data-state="now"] b{color:var(--lv-brass-lt)}

.lv-chart__script{position:absolute;right:clamp(10px,3%,34px);bottom:clamp(10px,4%,30px);
  text-align:right;font-family:var(--display,Georgia,serif);font-style:italic;
  font-size:clamp(12px,1.7vw,22px);line-height:1.3;color:var(--lv-brass-lt);
  text-shadow:0 2px 14px rgba(0,0,0,.9);pointer-events:none}
.lv-chart__script span{display:block}

.lv-chart__rose{position:absolute;left:clamp(8px,3%,30px);bottom:clamp(8px,4%,26px);
  width:clamp(44px,7vw,84px);opacity:.5;pointer-events:none}
.lv-chart__rose svg{position:static;width:100%;height:auto;
  fill:none;stroke:var(--lv-brass);stroke-width:1.1}

/* ── the footer ──────────────────────────────────────────────────────── */

.lv-foot{border-top:1px solid var(--lv-hair-2);background:#04060a;
  padding:clamp(28px,4vw,44px) 0 clamp(34px,5vw,56px);text-align:center}
.lv-foot__brand{display:inline-flex;flex-direction:column;gap:5px;
  text-decoration:none;color:#f2e6cd;font-family:var(--display,Georgia,serif)}
.lv-foot__brand b{font-size:17px;letter-spacing:.06em}
.lv-foot__brand small{font-size:11px;letter-spacing:.18em;text-transform:uppercase;
  color:rgba(239,227,200,.5)}
.lv-foot p{margin-top:14px;font-size:12.5px;color:rgba(239,227,200,.45);
  letter-spacing:.06em}
.lv-foot nav{display:flex;flex-wrap:wrap;justify-content:center;gap:6px 20px;
  margin-top:16px}
.lv-foot nav a{min-height:44px;min-width:44px;display:inline-flex;
  align-items:center;justify-content:center;padding-inline:8px;
  font-size:12px;letter-spacing:.14em;text-transform:uppercase;
  color:rgba(239,227,200,.6);text-decoration:none}
.lv-foot nav a:hover{color:var(--lv-brass-lt)}

/* ── reveal on scroll ────────────────────────────────────────────────── */

.lv-rise{opacity:0;transform:translateY(16px);
  transition:opacity .6s var(--ease,ease),transform .6s var(--ease,ease)}
.lv-rise.is-in{opacity:1;transform:none}

/* ════════════════════════════════════════════════════════════════════════
   WIDER SCREENS — every min-width block lives below here, in order.
   ════════════════════════════════════════════════════════════════════════ */

@media (min-width:600px){
  .lv-hero__cta{grid-template-columns:repeat(4,minmax(0,1fr));max-width:none}
  .lv-perks{grid-template-columns:repeat(4,minmax(0,1fr))}
  .lv-fest__grid{grid-template-columns:repeat(3,minmax(0,1fr))}
}

@media (min-width:760px){
  .lv-hunt__in{grid-template-columns:minmax(0,1fr) auto;gap:24px;align-items:center}
  .lv-hunt__token{justify-self:end}

  /* The captain's table. Photographs laid down, not a grid — but still in
     the flow, still keyboard reachable, and never overlapping enough to
     hide a face. */
  .lv-shots{display:flex;flex-wrap:wrap;justify-content:center;
    align-items:center;gap:0;overflow:visible;padding:18px 0 26px}
  /* No captions once the photographs overlap: the neighbour clips the line
     halfway through and it reads as a bug. The alt text is still on every
     image and the lightbox shows it in full. */
  .lv-shot{padding-bottom:26px}
  .lv-shot figcaption{display:none}
  .lv-shot{width:clamp(146px,15.5vw,224px);margin:0 -13px;
    transition:transform .3s var(--ease,ease),box-shadow .3s ease,z-index 0s}
  .lv-shot:nth-child(6n+1){transform:rotate(-5.5deg) translateY(6px)}
  .lv-shot:nth-child(6n+2){transform:rotate(3deg) translateY(-8px)}
  .lv-shot:nth-child(6n+3){transform:rotate(-2deg) translateY(10px)}
  .lv-shot:nth-child(6n+4){transform:rotate(4.5deg)}
  .lv-shot:nth-child(6n+5){transform:rotate(-3.5deg) translateY(-6px)}
  .lv-shot:nth-child(6n+6){transform:rotate(2.5deg) translateY(8px)}
  .lv-shot:hover,.lv-shot:focus-within{transform:rotate(0) translateY(-10px) scale(1.04);
    z-index:3;box-shadow:0 26px 52px rgba(0,0,0,.66)}
}

@media (min-width:900px){
  .lv-hero__cta{max-width:none}
  .lv-crew__grid{grid-template-columns:minmax(0,1.25fr) minmax(0,.75fr)}
  .lv-fest__grid{grid-template-columns:repeat(5,minmax(0,1fr))}
}

@media (min-width:1000px){
  .lv-deck__grid{grid-template-columns:minmax(0,7fr) minmax(300px,3fr)}
  /* Each column keeps its own height. Stretched, the parchment ran on for
     300px of nothing below the hunt's last line. */
  .lv-cmd__grid{grid-template-columns:minmax(0,1fr) minmax(0,1fr);align-items:start}
  .lv-chart__in{aspect-ratio:21/9}

  .lv-rail__arrow{position:absolute;top:calc(50% - 26px);z-index:3;
    display:grid;place-items:center;width:46px;height:46px;border-radius:50%;
    border:1px solid var(--lv-hair);background:rgba(6,9,13,.88);
    color:var(--lv-parch);cursor:pointer;
    transition:color .2s ease,border-color .2s ease,opacity .2s ease}
  .lv-rail__arrow:hover{color:var(--lv-brass-lt);border-color:rgba(200,155,60,.6)}
  .lv-rail__arrow[disabled]{opacity:.25;cursor:default}
  .lv-rail__arrow svg{width:18px;height:18px;fill:none;stroke:currentColor;
    stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
  .lv-rail__arrow--prev{left:-14px}
  .lv-rail__arrow--next{right:-14px}
}

/* ── the painted hero, 1024 and up ───────────────────────────────────── */

/* Above 1024 the artwork carries the headline, the subtitle, the date and
   the four buttons, because that is how John drew it. The real <h1> is not
   deleted — it is moved off-screen, so the page still has a heading for a
   crawler and a screen reader while the painting does the talking. Only the
   date is drawn as HTML over the art: the comp's painted date was patched
   out so a new festival never ships with last festival's dates in a JPEG. */
@media (min-width:1024px){
  /* The artwork letters the date into its top-right corner, so unlike the
     home page this hero must NOT run under the fixed header — the bar would
     sit straight on top of it. Below 1024 the plate is a background and
     running under the bar is exactly what it should do. */
  .lv-hero{min-height:0;padding-top:var(--bar)}
  .lv-hero__art{position:relative;inset:auto;z-index:auto;display:block;width:100%}
  .lv-hero__art img{width:100%;height:auto;object-fit:fill;object-position:50% 50%}
  .lv-hero__scrim,.lv-hero__lamp{display:none}
  /* Both overlays are measured against the ARTWORK, not the section — the
     section now carries var(--bar) of top padding, and `inset:0` on a child
     resolves against the padding box, which would push every percentage
     down by the height of the header. */
  .lv-hero__in{position:absolute;inset:var(--bar) 0 0 0;padding:0;min-height:0;display:block}
  /* The h1, the subtitle and the script line are clipped rather than
     deleted: the artwork letters them, but the page still needs a real
     heading for a crawler and a screen reader. The button row IS deleted —
     the hotspots below take over, and a clipped link is a tab stop that
     lands nowhere a sighted visitor can see. */
  .lv-hero__in > *:not(.lv-hero__where){position:absolute!important;
    width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap;
    margin:-1px;padding:0;border:0}
  .lv-hero__cta{display:none!important}

  .lv-hero__where{position:absolute;top:2.2%;right:1.1%;left:auto;
    width:13.6%;text-align:center;font-size:clamp(11px,1.02vw,19px);
    letter-spacing:.1em;line-height:1.55;text-shadow:0 2px 12px rgba(0,0,0,.7)}

  /* Real anchors over the painted buttons. The numbers are measured off the
     2172x724 artwork: the brass frames sit at x=68/376/676/994 and the row
     runs y=552 to 646. Expressed as percentages so they stay glued at every
     width. Verified at 2560, 1920, 1600, 1440, 1280 and 1024. */
  .lv-hero__hot{display:block;position:absolute;inset:var(--bar) 0 0 0;z-index:2}
  .lv-hero__hot a{position:absolute;top:76.24%;height:12.98%;
    border-radius:2px;font-size:0;line-height:0;color:transparent;overflow:hidden;
    box-shadow:0 0 0 0 rgba(200,155,60,0);
    transition:box-shadow .2s ease,background .2s ease}
  .lv-hero__hot a::after{content:'';position:absolute;left:0;right:0;
    top:50%;translate:0 -50%;height:max(100%,48px)}
  .lv-hero__hot a:hover{background:rgba(255,255,255,.07);
    box-shadow:0 0 22px rgba(200,155,60,.35)}
  .lv-hero__hot a:focus-visible{outline:2px solid var(--lv-brass-lt);outline-offset:2px}
  .lv-hero__hot a[data-hot="watch"]{left:3.13%;width:13.72%}
  .lv-hero__hot a[data-hot="watch"]:hover{background:rgba(255,80,80,.14);
    box-shadow:0 0 22px rgba(224,58,58,.4)}
  .lv-hero__hot a[data-hot="shorts"]{left:17.31%;width:13.26%}
  .lv-hero__hot a[data-hot="hunt"]{left:31.12%;width:14.18%}
  .lv-hero__hot a[data-hot="crew"]{left:45.76%;width:14.27%}
}

@media (min-width:1280px){
  .lv-hunt{padding:clamp(28px,3.2vw,44px)}
  .lv-fest{padding:clamp(22px,2.4vw,32px)}
}

/* ── reduced motion ──────────────────────────────────────────────────── */

@media (prefers-reduced-motion:reduce){
  .lv-body *,.lv-body *::before,.lv-body *::after{
    animation-duration:.001ms!important;animation-iteration-count:1!important;
    transition-duration:.001ms!important;scroll-behavior:auto!important}
  .lv-rise{opacity:1;transform:none}
  .lv-shot{transform:none!important}
}