/* ══════════════════════════════════════════════════════════════
   Card Show Popup — Cobra Lounge
   Palette + type pulled straight off the poster artwork.
   ══════════════════════════════════════════════════════════════ */

:root{
  /* poster palette */
  --orange:      #F69709;
  --orange-lt:   #FBBF3C;
  --orange-dk:   #C9740A;
  --purple:      #BC8FFE;
  --purple-dk:   #7C4DD6;
  --red:         #C71C2B;
  --red-deep:    #970000;
  --maroon:      #2E0000;
  --maroon-dk:   #180000;
  --ink:         #0F0F0F;
  --green:       #07D99D;
  --green-lt:    #8FFF73;
  --paper:       #FFF6E6;

  --display: "Bebas Neue", "Haettenschweiler", "Arial Narrow", sans-serif;
  --body: "Archivo", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;

  --gut: clamp(1.25rem, 4vw, 4rem);
  --maxw: 78rem;

  --ease-spring: cubic-bezier(.2,1.5,.35,1);
}

*,*::before,*::after{ box-sizing:border-box; }
html{ scroll-behavior:smooth; -webkit-text-size-adjust:100%; }
@media (prefers-reduced-motion: reduce){ html{ scroll-behavior:auto; } }

body{
  margin:0;
  background:var(--maroon-dk);
  color:var(--paper);
  font-family:var(--body);
  font-size:clamp(1rem,.94rem + .3vw,1.15rem);
  line-height:1.55;
  overflow-x:clip;
}
img{ max-width:100%; height:auto; display:block; }
a{ color:inherit; }

.vh{
  position:absolute; width:1px; height:1px; padding:0; margin:-1px;
  overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0;
}
.skip{
  position:absolute; left:-999px; top:0; z-index:200;
  background:var(--ink); color:#fff; padding:.75rem 1.25rem; font-weight:800;
}
.skip:focus{ left:.5rem; top:.5rem; }

:where(a,button,[tabindex]):focus-visible{
  outline:3px solid var(--green); outline-offset:3px; border-radius:2px;
}

/* ─────────────────────────── buttons ─────────────────────────── */
.btn{
  --bg: var(--ink);
  --fg: #fff;
  display:inline-flex; align-items:center; gap:.5em;
  background:var(--bg); color:var(--fg);
  font-family:var(--display); letter-spacing:.04em;
  font-size:clamp(1.05rem,.95rem + .5vw,1.5rem); line-height:1;
  padding:.62em 1.1em .5em;
  border:3px solid var(--ink); border-radius:.2em;
  text-decoration:none; white-space:nowrap; cursor:pointer;
  box-shadow:4px 5px 0 rgba(0,0,0,.55);
  transition:transform .28s var(--ease-spring), box-shadow .28s var(--ease-spring),
             background-color .2s ease, color .2s ease;
}
.btn:hover,.btn:focus-visible{
  transform:translate(-2px,-3px) rotate(-1.2deg);
  box-shadow:7px 9px 0 rgba(0,0,0,.6);
}
.btn:active{ transform:translate(2px,2px); box-shadow:1px 2px 0 rgba(0,0,0,.6); }
.btn--sm{ font-size:1.05rem; padding:.5em .9em .38em; box-shadow:3px 4px 0 rgba(0,0,0,.5); }
.btn--lg{ font-size:clamp(1.2rem,1rem + .9vw,1.9rem); }
.btn--ghost{ --bg:rgba(255,246,230,.66); --fg:var(--ink); border-color:var(--ink); box-shadow:4px 5px 0 rgba(0,0,0,.35); }
.btn--ghost:hover{ --bg:var(--ink); --fg:#fff; }

/* ─────────────────────────── nav ─────────────────────────── */
.nav{
  position:fixed; inset:0 0 auto 0; z-index:100;
  display:flex; align-items:center; gap:1rem;
  padding:.7rem clamp(.9rem,3vw,2rem);
  /* Always a solid dark bar — same over the hero as it is down the page. */
  background:var(--ink);
  border-bottom:3px solid #000;
  transition:box-shadow .35s ease;
}
/* once content is running underneath, lift it off the page */
.nav.is-stuck{ box-shadow:0 10px 24px rgba(0,0,0,.55); }
.nav__brand{ flex:0 0 auto; }
.nav__brand img{ height:1.5rem; width:auto; }
.nav .btn{ flex:0 0 auto; }
.nav__meta{
  margin:0 auto 0 0; min-width:0;
  font-family:var(--display); letter-spacing:.05em;
  font-size:clamp(.95rem,.85rem + .4vw,1.3rem); color:var(--orange-lt);
  display:flex; gap:.45em; white-space:nowrap; overflow:hidden;
}
.nav__meta b{ color:#fff; font-weight:400; }
.nav__sep{ opacity:.45; }
/* shed the meta line a segment at a time so the bar never wraps or pushes
   the button off the edge */
@media (max-width:40rem){ .nav__venue,.nav__sep--venue{ display:none; } }
@media (max-width:27rem){ .nav__time,.nav__sep{ display:none; } .nav__meta{ font-size:.95rem; } }

/* ══════════════════════════ HERO ══════════════════════════ */
.hero{
  position:relative; isolation:isolate;
  min-height:100svh;
  display:grid; place-items:center;
  padding:clamp(3.75rem,8vh,5.5rem) clamp(.85rem,3vw,4rem) clamp(3rem,7vh,5rem);
  /* Width of the lock-up. Above phone size the 74vw term keeps a margin
     around it: without that the stage fills a 768px window edge to edge and
     the bursts have nowhere to sit but on top of the banner. Past ~1100px
     the 90vh term is always smaller, so desktop is unaffected. */
  --stage-w:min(100%,var(--maxw),90vh);
  background:
    radial-gradient(125% 92% at 50% 30%, var(--orange-lt) 0%, var(--orange) 48%, var(--orange-dk) 100%);
  overflow:hidden;
}
/* halftone dot veil, lifted straight off the poster texture */
.hero::after{
  content:""; position:absolute; inset:0; z-index:6; pointer-events:none;
  background:url("../assets/elements/texture-halftone-dots.webp") 0 0/clamp(180px,22vw,320px) auto;
  mix-blend-mode:multiply; opacity:.12;
}

.hero__bg{ position:absolute; inset:0; pointer-events:none; z-index:0; }

/* The lock-up stage: same width as the title block, stretched to the full
   content height. Every cast member and burst is positioned as a percentage
   of THIS box rather than the viewport, so the group stays crowded around the
   centre on a 2560px monitor exactly like it does on the poster. The
   horizontal percentages are lifted from the poster itself — each element's
   Figma x, measured against the title group's box (x 333, width 2835). */
.hero__stage{
  grid-area:1/1; justify-self:center; align-self:stretch;
  width:var(--stage-w);
  position:relative; pointer-events:none;
}
.hero__stage--cast{ z-index:2; }      /* behind the title, as on the poster */
.hero__stage--badges{ z-index:3; }    /* over the cast, under the copy */

.lyr{ position:absolute; will-change:transform; }

/* the sunburst fans out from a point behind the title, so it turns
   about its own apex rather than its bounding box */
.lyr--rays{
  left:50%; top:48%; width:min(148vw,165vh); max-width:none;
  transform-origin:50% 100%;
}
.lyr--burst{
  left:50%; top:47%; width:min(96vw,118vh); max-width:none;
  filter:drop-shadow(0 18px 40px rgba(0,0,0,.32));
}

/* Sized and placed close to the poster's own ratios so the cast crowds the
   title instead of orbiting it.       poster x    poster width */
.lyr--pika{   left:-15%; top:-6%;    width:58%; }   /*  -13.8%      74%  */
.lyr--mantle{ left:65%;  top:-3%;    width:32%; }   /*   63.3%    38.6%  */
.lyr--mickey{ left:77%;  top:38%;    width:21%; }   /*   80.2%    23.7%  */
.lyr--jordan{ left:-21%; bottom:-8%; top:auto; width:50%; } /* -27%  75.7% */

.hero__type{
  grid-area:1/1; position:relative; z-index:4;
  width:var(--stage-w);
  display:grid; justify-items:center; align-content:center; text-align:center;
  gap:clamp(.15rem,.5vh,.45rem);
}

.hero__kicker{
  margin:0; font-family:var(--display); color:#fff;
  font-size:clamp(1.15rem,.85rem + 2vw,2.75rem);
  letter-spacing:.045em; line-height:1;
  /* the Mantle card passes behind this line, same as on the poster, so the
     lettering carries the poster's black keyline to stay readable over it */
  text-shadow:
    -2px -2px 0 var(--ink), 2px -2px 0 var(--ink),
    -2px  2px 0 var(--ink), 2px  2px 0 var(--ink),
    0 .14em .12em rgba(0,0,0,.6);
}

.hero__title{ margin:0; position:relative; width:100%; display:grid; justify-items:center; }
.lyr--cardshow,.lyr--popup,.lyr--cobra{ position:relative; }
/* Each word is tilted inside its own box, so the alpha bounds leave a wedge
   of empty space above and below the lettering. These negative margins close
   that wedge and stack the words the way they sit on the poster. */
.lyr--cardshow{ width:100%; }
.lyr--popup{ width:62%; margin-top:-10%; z-index:2; }
.lyr--cobra{ width:76%; margin-top:-11%; z-index:3;
  filter:drop-shadow(0 12px 20px rgba(0,0,0,.4)); }

.hero__where{ margin:-4% 0 0; }
.tag-purple{
  display:inline-block;
  font-family:var(--display); color:var(--ink);
  font-size:clamp(1rem,.8rem + 1.2vw,1.9rem); letter-spacing:.04em; line-height:1;
  padding:.5em .95em .38em;
  background:linear-gradient(100deg,var(--purple) 0%, #D9BEFF 55%, var(--purple-dk) 100%);
  border:3px solid var(--ink);
  transform:skewX(-11deg) rotate(-2deg);
  box-shadow:5px 6px 0 rgba(0,0,0,.5);
}
.tag-purple > *{ display:inline-block; transform:skewX(11deg); }

.hero__cta{
  display:flex; flex-wrap:wrap; gap:.7rem; justify-content:center;
  margin-top:clamp(.35rem,1.1vh,.85rem);
}

/* comic bursts */
.badge{ position:absolute; will-change:transform; }
.badge--free{ left:-15%; top:52%; width:32%; }      /* poster -14.5%, 42.3% */
.badge--free > img:first-child{ width:100%; }
.badge__txt{
  position:absolute; left:50%; top:48%; width:66%;
  transform:translate(-50%,-50%);
}
.badge--welcome{ left:80%; bottom:4%; width:29%; }

@media (min-width:40rem){ .hero{ --stage-w:min(100%,var(--maxw),90vh,74vw); } }

/* ── phones only ──
   Scoped to 40rem, not 52rem: this treatment assumes a tall portrait frame
   with room below the buttons. A 768px tablet is short and wide, so it wants
   the proportional stage layout above, where everything scales with the
   title instead of being re-stacked. */
@media (max-width:40rem){
  /* pull the type block up so the cast and bursts get their own band
     across the bottom instead of colliding with the buttons */
  .hero{ padding-top:10vh; padding-bottom:15vh; }
  .lyr--pika{   left:-6%;  top:-3%;   width:46%; }
  .lyr--mantle{ left:69%;  top:-1%;   width:32%; }
  .lyr--mickey{ left:72%;  top:auto; bottom:-2%; width:28%; }
  .lyr--jordan{ left:-10%; bottom:-4%; width:44%; }
  .badge--free{    left:-3%; top:auto; bottom:21%; width:32%; }
  .badge--welcome{ left:71%; bottom:21%; width:31%; }
  .lyr--rays{ width:210vw; }
  .lyr--burst{ width:132vw; }
  .hero__cta .btn{ font-size:1.15rem; }
}
@media (max-height:36rem) and (min-width:40rem){
  .lyr--pika,.lyr--jordan,.lyr--mickey,.badge--free,.badge--welcome{ opacity:.6; }
}

.scroller{
  position:absolute; z-index:7; left:50%; bottom:clamp(.75rem,2.5vh,2rem);
  display:grid; justify-items:center; gap:.35rem;
  font-family:var(--display); letter-spacing:.22em; font-size:.85rem;
  color:var(--ink); text-decoration:none; text-transform:uppercase;
}
.scroller i{
  width:2px; height:2rem; background:var(--ink); display:block;
  animation:drip 1.6s var(--ease-spring) infinite;
  transform-origin:top;
}
@keyframes drip{ 0%,100%{ transform:scaleY(.35); opacity:.35 } 45%{ transform:scaleY(1); opacity:1 } }

/* ══════════════════════════ DETAILS ══════════════════════════ */
.sec-title{
  font-family:var(--display); font-weight:400; line-height:.9;
  font-size:clamp(2.6rem,1.4rem + 6vw,7rem);
  letter-spacing:.01em; margin:0 0 clamp(1.5rem,4vw,3rem);
  color:#fff; text-shadow:0 .06em 0 var(--red-deep), 0 .1em .3em rgba(0,0,0,.5);
}
.sec-title--center{ text-align:center; }

.details{
  position:relative;
  overflow:hidden;          /* ::after (the torn edge) bleeds -5% either side */
  padding:clamp(3.5rem,10vh,8rem) var(--gut) clamp(4rem,11vh,9rem);
  background:
    radial-gradient(105% 78% at 50% 0%, #B80C10 0%, var(--red-deep) 32%, var(--maroon) 72%, var(--maroon-dk) 100%);
}
.details::before{
  content:""; position:absolute; inset:0; pointer-events:none;
  background:url("../assets/elements/texture-halftone-dots.webp") 0 0/clamp(150px,18vw,260px) auto;
  mix-blend-mode:overlay; opacity:.09;
}
/* torn top edge that echoes the poster's ellipse cut */
.details::after{
  content:""; position:absolute; left:-5%; right:-5%; top:-1px; height:clamp(40px,7vw,110px);
  background:var(--orange-dk);
  border-radius:0 0 55% 55%/0 0 100% 100%;
  transform:translateY(-52%);
}
.details__inner{ position:relative; z-index:1; max-width:var(--maxw); margin-inline:auto; }

.facts{
  display:grid; gap:clamp(.9rem,2vw,1.5rem);
  grid-template-columns:repeat(auto-fit,minmax(15rem,1fr));
}
.fact{
  position:relative;
  background:linear-gradient(160deg,#1B0303 0%,#0B0000 100%);
  border:3px solid #000;
  border-radius:.35rem;
  padding:clamp(1.1rem,2.5vw,1.9rem);
  box-shadow:6px 8px 0 rgba(0,0,0,.5);
  display:flex; flex-direction:column; align-items:flex-start; gap:.35rem;
}
.fact--date{ background:linear-gradient(160deg,var(--red) 0%, #7E0E19 100%); }
.fact--cost{ background:linear-gradient(160deg,#1C6B57 0%, #06301F 100%); }
.fact__label{
  margin:0; font-family:var(--display); letter-spacing:.2em; text-transform:uppercase;
  font-size:.9rem; color:var(--orange-lt);
}
.fact__big{
  margin:0; font-family:var(--display); line-height:.92; letter-spacing:.01em;
  font-size:clamp(1.9rem,1.15rem + 2.6vw,3rem); color:#fff;
}
.fact__sub{ margin:0 0 .5rem; font-size:.98rem; opacity:.9; }
.fact .btn{ margin-top:auto; }

.doing{
  list-style:none; margin:clamp(2rem,5vw,3.5rem) 0 0; padding:0;
  display:grid; gap:clamp(.9rem,2vw,1.4rem);
  grid-template-columns:repeat(auto-fit,minmax(14rem,1fr));
}
.doing li{
  border-top:4px solid var(--orange); padding-top:.9rem;
  display:grid; gap:.3rem;
}
.doing b{
  font-family:var(--display); font-weight:400; letter-spacing:.04em;
  font-size:clamp(1.8rem,1.2rem + 2vw,2.8rem); line-height:1; color:var(--orange-lt);
}
.doing span{ opacity:.86; }

/* ══════════════════════════ LOOT ══════════════════════════ */
.loot{
  position:relative;
  padding:clamp(3.5rem,9vh,7rem) 0;
  background:
    radial-gradient(70% 55% at 50% 45%, rgba(246,151,9,.18) 0%, rgba(246,151,9,0) 70%),
    linear-gradient(180deg,var(--maroon-dk) 0%, #2B0303 55%, var(--maroon-dk) 100%);
  overflow:hidden;
}
.loot::before{
  content:""; position:absolute; inset:0; pointer-events:none;
  background:url("../assets/elements/texture-halftone-dots.webp") 0 0/clamp(150px,18vw,260px) auto;
  mix-blend-mode:overlay; opacity:.07;
}
.loot > *{ position:relative; z-index:1; }

.loot__head{ padding-inline:var(--gut); max-width:var(--maxw); margin-inline:auto; text-align:center; }
.loot__ask{
  margin:0 0 .2rem; font-family:var(--display); letter-spacing:.22em; text-transform:uppercase;
  font-size:clamp(.9rem,.8rem + .5vw,1.25rem); color:var(--orange-lt);
}
.loot__head .sec-title{ margin-bottom:clamp(1rem,2.5vw,1.5rem); }
.loot__lede{ max-width:44rem; margin:0 auto clamp(1.5rem,3.5vw,2.25rem); opacity:.85; }

.chips{
  list-style:none; margin:0 0 clamp(2.25rem,5vw,3.5rem); padding:0;
  display:flex; flex-wrap:wrap; gap:.5rem; justify-content:center;
}
.chips li{
  font-family:var(--display); letter-spacing:.08em; line-height:1;
  font-size:clamp(.95rem,.9rem + .3vw,1.2rem);
  padding:.45em .85em .32em;
  color:var(--paper);
  border:2px solid rgba(255,246,230,.28); border-radius:99px;
  background:rgba(0,0,0,.3);
}
.chips li:nth-child(5n+1){ color:var(--orange-lt); border-color:rgba(251,191,60,.45); }
.chips li:nth-child(5n+3){ color:var(--green-lt); border-color:rgba(143,255,115,.35); }

/* ── the ticker ──
   One long flex track holding the deck twice. It slides exactly one deck
   width, so the hand-off is invisible and the cards appear to stream in from
   the left forever. */
.ticker{
  position:relative;
  /* The track is thousands of px wide. The mask only hides its edges — this
     is what actually keeps it out of the document's scroll width. */
  overflow:hidden;
  -webkit-mask-image:linear-gradient(90deg,transparent 0,#000 5%,#000 95%,transparent 100%);
  mask-image:linear-gradient(90deg,transparent 0,#000 5%,#000 95%,transparent 100%);
}
.ticker__track{
  display:flex; align-items:center;
  width:max-content;
  padding:clamp(2.5rem,5vw,4rem) 0;
  animation:ticker-run 72s linear infinite;
}
@keyframes ticker-run{
  from{ transform:translate3d(-50%,0,0); }
  to  { transform:translate3d(0,0,0); }
}
.ticker:hover .ticker__track,
.ticker:focus-within .ticker__track{ animation-play-state:paused; }

/* Spacing lives on the card as margin, NOT as `gap` on the track. With gap,
   half the track width lands mid-gap at the deck hand-off and the loop jumps;
   a per-card margin makes each deck exactly half the track. */
.ticker__card{
  margin:0 clamp(.9rem,2vw,1.9rem) 0 0; flex:0 0 auto;
  transition:transform .5s var(--ease-spring), filter .4s ease;
  filter:drop-shadow(0 14px 22px rgba(0,0,0,.6));
}
.ticker__card img{
  height:clamp(9rem,18vw,15rem); width:auto;
  border-radius:clamp(4px,.9vw,10px);
  background:#120202;
}
/* every card sits at its own angle and height so the row reads as a scatter
   across a table rather than a filmstrip */
.ticker__card:nth-child(7n+1){ transform:rotate(-9deg)  translateY(-18px) scale(1.04); }
.ticker__card:nth-child(7n+2){ transform:rotate(6deg)   translateY(20px)  scale(.94); }
.ticker__card:nth-child(7n+3){ transform:rotate(-3deg)  translateY(-6px); }
.ticker__card:nth-child(7n+4){ transform:rotate(12deg)  translateY(14px)  scale(1.02); }
.ticker__card:nth-child(7n+5){ transform:rotate(-7deg)  translateY(26px)  scale(.96); }
.ticker__card:nth-child(7n+6){ transform:rotate(2.5deg) translateY(-22px) scale(1.05); }
.ticker__card:nth-child(7n+7){ transform:rotate(-13deg) translateY(8px)   scale(.93); }
.ticker__card:hover{
  transform:rotate(0deg) translateY(-18px) scale(1.1);
  filter:drop-shadow(0 26px 34px rgba(0,0,0,.75));
}

@media (prefers-reduced-motion: reduce){
  .ticker{ overflow-x:auto; }
  .ticker__track{ animation:none; transform:none; }
  .ticker__card{ transform:none !important; }
}

/* ══════════════════════════ DEALERS ══════════════════════════ */
.dealers{
  padding:clamp(3rem,8vh,6rem) var(--gut) clamp(4rem,10vh,7rem);
  background:var(--maroon-dk);
  display:grid; justify-items:center; gap:clamp(2rem,5vw,3.5rem);
}
/* Just the poster's lettering — the full dealer bar also carried both logos,
   which the cards below already show. */
.dealers__title{ margin:0; width:min(100%,32rem); }
.dealers__title img{ width:100%; filter:drop-shadow(0 12px 20px rgba(0,0,0,.6)); }
.dealers__list{
  list-style:none; margin:0; padding:0;
  display:grid; gap:clamp(1rem,2.5vw,2rem);
  grid-template-columns:repeat(auto-fit,minmax(13rem,1fr));
  width:min(100%,var(--maxw));
}
.dealers__list li{
  background:#000; border:3px solid #1E1E1E; border-radius:.35rem;
  padding:clamp(1.2rem,3vw,2rem);
  display:grid; gap:.9rem; justify-items:center; align-content:center; text-align:center;
  min-height:11rem;
  box-shadow:5px 7px 0 rgba(0,0,0,.5);
  transition:transform .45s var(--ease-spring), border-color .3s ease;
}
.dealers__list li:hover{ transform:translateY(-6px) rotate(-1deg); border-color:var(--orange); }
.dealers__list img{ width:min(7rem,55%); }
.dealers__list span{ font-family:var(--display); letter-spacing:.1em; font-size:1.1rem; color:var(--orange-lt); }
.dealers__more b{
  font-family:var(--display); font-weight:400; font-size:2.4rem; line-height:1; color:#fff;
}
.dealers__more span{ color:var(--paper); opacity:.7; letter-spacing:0; font-family:var(--body); font-size:.95rem; }

/* ══════════════════════════ HOSTS ══════════════════════════ */
.hosts{
  position:relative;
  padding:clamp(3.5rem,9vh,6rem) var(--gut) clamp(2.5rem,6vh,4rem);
  background:#000;
  clip-path:polygon(0 clamp(18px,3.5vw,60px), 100% 0, 100% 100%, 0 100%);
  margin-top:-1px;
}
/* the orange keyline that runs under the poster's bottom banner */
.hosts::before{
  content:""; position:absolute; left:0; right:0; top:0; height:clamp(22px,4vw,68px);
  background:linear-gradient(90deg,var(--orange) 0%, var(--red) 55%, var(--orange) 100%);
  clip-path:polygon(0 clamp(18px,3.5vw,60px), 100% 0, 100% 6px, 0 calc(clamp(18px,3.5vw,60px) + 6px));
}
.hosts__grid{
  max-width:var(--maxw); margin-inline:auto;
  display:grid; gap:clamp(2rem,5vw,4rem);
  grid-template-columns:minmax(0,1.6fr) minmax(0,1fr);
  align-items:center;
}
@media (max-width:52rem){
  .hosts__grid{ grid-template-columns:1fr; justify-items:center; text-align:center; }
}
.hosts__col{ display:grid; gap:clamp(1rem,2.5vw,1.75rem); }

.hosts__label{
  margin:0; font-family:var(--display); letter-spacing:.3em; text-transform:uppercase;
  font-size:clamp(1rem,.9rem + .5vw,1.35rem); color:var(--orange-lt);
}
.hosts__row{
  display:flex; flex-wrap:wrap; align-items:center;
  gap:clamp(1.75rem,5vw,3.5rem);
}
@media (max-width:52rem){ .hosts__row{ justify-content:center; } }

.host{ display:grid; gap:.45rem; justify-items:center; text-decoration:none;
  transition:transform .45s var(--ease-spring), filter .3s ease; }
.host:hover{ transform:translateY(-6px) scale(1.06) rotate(-1.5deg); filter:drop-shadow(0 0 18px rgba(246,151,9,.5)); }
.host img{ height:clamp(3.4rem,6vw,5.5rem); width:auto; }
.host--expo img{ height:clamp(2rem,3.6vw,3.1rem); }
.host--gem img{ height:clamp(1.9rem,3.2vw,2.7rem); }
.host em{ font-style:normal; font-family:var(--display); letter-spacing:.12em; font-size:.95rem; color:var(--orange-lt); }

.hosts__addr{ margin:0; font-size:.98rem; line-height:1.7; color:var(--paper); opacity:.8; }
.hosts__addr b{
  display:block; font-family:var(--display); font-weight:400; letter-spacing:.04em;
  font-size:clamp(1.4rem,1.1rem + 1vw,2rem); color:#fff; opacity:1;
}

.poster-dl{
  display:grid; gap:.55rem; justify-items:center; text-decoration:none; justify-self:end;
  transition:transform .5s var(--ease-spring);
}
@media (max-width:52rem){ .poster-dl{ justify-self:center; } }
.poster-dl:hover{ transform:translateY(-9px) rotate(-2deg) scale(1.03); }
.poster-dl img{
  width:min(17rem,62vw); border:5px solid #fff;
  box-shadow:0 22px 44px rgba(0,0,0,.8), 0 0 0 1px rgba(255,255,255,.15);
}
.poster-dl span{ font-family:var(--display); letter-spacing:.14em; font-size:1.15rem; color:var(--orange-lt); }
.poster-dl em{ font-style:normal; font-size:.8rem; letter-spacing:.02em; opacity:.55; }

.hosts__note{ margin:0; font-size:.85rem; font-style:italic; opacity:.5; }

/* ══════════════════════════ motion states ══════════════════════════ */
/* only hide pre-animation when JS is actually driving the page */
.js [data-fx],
.js [data-reveal],
.js .ticker{ opacity:0; }
.no-motion .scroller i{ animation:none; }
@media (prefers-reduced-motion: reduce){ .scroller i{ animation:none; } }