/* =====================================================================
   Angry Chicken Comics — styles
   Palette pulled from the logo: fire red, mustard yellow, ink black,
   aged cream. Layout = comic-book pages built from framed panels.
   ===================================================================== */

/* Self-hosted fonts (SIL Open Font License — see /fonts) */
@font-face{font-family:'Bangers'; font-style:normal; font-weight:400; font-display:swap;
  src:url('fonts/bangers-latin-400-normal.woff2') format('woff2'); unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'Bangers'; font-style:normal; font-weight:400; font-display:swap;
  src:url('fonts/bangers-latin-ext-400-normal.woff2') format('woff2'); unicode-range:U+0100-02AF,U+0304,U+0308,U+0329,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20CF,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:'Inter'; font-style:normal; font-weight:400; font-display:swap; src:url('fonts/inter-latin-400-normal.woff2') format('woff2')}
@font-face{font-family:'Inter'; font-style:normal; font-weight:500; font-display:swap; src:url('fonts/inter-latin-500-normal.woff2') format('woff2')}
@font-face{font-family:'Inter'; font-style:normal; font-weight:600; font-display:swap; src:url('fonts/inter-latin-600-normal.woff2') format('woff2')}
@font-face{font-family:'Inter'; font-style:normal; font-weight:700; font-display:swap; src:url('fonts/inter-latin-700-normal.woff2') format('woff2')}
@font-face{font-family:'Inter'; font-style:normal; font-weight:800; font-display:swap; src:url('fonts/inter-latin-800-normal.woff2') format('woff2')}

:root{
  --red:#d7261e;
  --red-deep:#9e1510;
  --yellow:#f5b81e;
  --yellow-light:#ffd54a;
  --cream:#f3e3be;
  --paper:#fbf4e4;
  --ink:#121014;
  --ink-2:#1d1a20;
  --black:#0b0a0c;
  --gray:#6b6560;

  --border:4px;
  --shadow: 10px 10px 0 var(--black);
  --shadow-sm: 6px 6px 0 var(--black);
  --radius:6px;

  --font-display:'Bangers', 'Impact', 'Arial Black', sans-serif;
  --font-body:'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;

  --max:1180px;
  --gutter:clamp(16px, 4vw, 40px);
}

*{box-sizing:border-box}
html{scroll-behavior:smooth; -webkit-text-size-adjust:100%; overflow-x:hidden}
body{
  margin:0;
  font-family:var(--font-body);
  color:var(--ink);
  background:var(--ink);
  line-height:1.55;
  overflow-x:hidden;
}
img{max-width:100%; height:auto; display:block}
a{color:inherit}
h1,h2,h3,h4,p{margin:0}

.skip{position:absolute; left:-999px; top:8px; background:var(--yellow); color:var(--ink); padding:8px 12px; border:3px solid var(--black); z-index:999}
.skip:focus{left:8px}

/* ---------- type ---------- */
.display{
  font-family:var(--font-display);
  font-weight:400;
  letter-spacing:.02em;
  line-height:.95;
  text-transform:uppercase;
}
.display--xl{font-size:clamp(2.9rem, 7.6vw, 5.1rem)}
.display--lg{font-size:clamp(2.4rem, 6vw, 4.6rem)}
.display--md{font-size:clamp(1.6rem, 3.4vw, 2.6rem)}
h3.display{font-size:clamp(1.5rem, 2.6vw, 2rem)}
h4.display{font-size:1.4rem}

.hl-red{color:var(--red)}
.hl-yellow{color:var(--yellow)}
.lede{font-size:clamp(1.05rem, 1.6vw, 1.25rem); max-width:38ch; margin-top:1.2rem; font-weight:500}

/* ---------- halftone / paper textures ---------- */
.page{
  position:relative;
  padding:clamp(56px, 9vw, 120px) var(--gutter);
  overflow-x:clip;
}
.page > *{position:relative; z-index:1}
.page::before{
  content:""; position:absolute; inset:0; z-index:0; pointer-events:none;
}
.page--dark{background:var(--ink); color:var(--paper)}
.page--dark::before{
  background-image:radial-gradient(rgba(255,255,255,.07) 1.2px, transparent 1.3px);
  background-size:14px 14px;
}
.page--paper{background:var(--paper)}
.page--paper::before{
  background-image:radial-gradient(rgba(18,16,20,.08) 1.1px, transparent 1.2px);
  background-size:11px 11px;
  mask-image:linear-gradient(180deg, rgba(0,0,0,.9), rgba(0,0,0,.25));
  -webkit-mask-image:linear-gradient(180deg, rgba(0,0,0,.9), rgba(0,0,0,.25));
}
.page--red{background:var(--red)}
.page--red::before{
  background-image:radial-gradient(rgba(0,0,0,.22) 1.6px, transparent 1.7px);
  background-size:16px 16px;
}

/* ---------- panels (the comic frames) ---------- */
.panel{
  position:relative;
  background:var(--paper);
  color:var(--ink);
  border:var(--border) solid var(--black);
  box-shadow:var(--shadow);
  padding:clamp(22px, 3vw, 36px);
  border-radius:var(--radius);
}
.panel--black{background:var(--ink-2); color:var(--paper); border-color:var(--paper)}
.panel--red{background:var(--red); color:#fff}
.panel--red .caption{background:var(--yellow)}
.panel--wide{margin-top:clamp(28px, 4vw, 48px)}
.panel--center{text-align:center}
.panel--center .btn{margin-top:1rem}

.tilt-l{transform:rotate(-1deg)}
.tilt-r{transform:rotate(1deg)}
@media (max-width:700px){.tilt-l,.tilt-r{transform:none}}

/* caption boxes (the yellow narration boxes) */
.caption{
  display:inline-block;
  font-family:var(--font-display);
  text-transform:uppercase;
  letter-spacing:.06em;
  font-size:.95rem;
  background:var(--yellow);
  color:var(--ink);
  border:3px solid var(--black);
  padding:4px 12px;
  box-shadow:4px 4px 0 var(--black);
}
.caption--tl{position:absolute; top:-14px; left:-10px; transform:rotate(-2deg)}

/* speech bubbles */
.bubble{
  position:relative;
  background:#fff;
  border:var(--border) solid var(--black);
  border-radius:30px;
  padding:20px 24px;
  font-size:clamp(1.05rem, 1.8vw, 1.3rem);
  font-weight:600;
  line-height:1.35;
}
.bubble::after,.bubble::before{
  content:""; position:absolute; bottom:-26px; right:40px;
  border-left:18px solid transparent; border-right:0 solid transparent;
  border-top:28px solid var(--black);
}
.bubble::before{bottom:-19px; right:43px; border-top-color:#fff; z-index:1; border-left-width:14px; border-top-width:22px}
.bubble--left::after,.bubble--left::before{right:auto; left:40px; border-left:0 solid transparent; border-right:18px solid transparent}
.bubble--left::before{left:43px; border-right-width:14px}

/* bursts (POW!-style shapes) */
.burst{
  position:absolute; width:150px; height:150px;
  display:grid; place-items:center; z-index:4;
  filter:drop-shadow(5px 5px 0 var(--black));
  animation:wobble 5s ease-in-out infinite;
}
.burst.small{width:118px; height:118px}
.burst svg{position:absolute; inset:0; width:100%; height:100%}
.burst svg use{stroke:var(--black); stroke-width:6; stroke-linejoin:round}
.burst--yellow svg use{fill:var(--yellow)}
.burst--red svg use{fill:var(--red)}
.burst span{
  position:relative; font-family:var(--font-display); text-transform:uppercase;
  font-size:1.5rem; line-height:.9; text-align:center; transform:rotate(-8deg); color:var(--ink);
  letter-spacing:.03em;
}
.burst.small span{font-size:1.25rem}
.burst--red span{color:#fff; text-shadow:2px 2px 0 var(--black)}
@keyframes wobble{0%,100%{transform:rotate(-4deg) scale(1)}50%{transform:rotate(4deg) scale(1.04)}}

/* things that break the frame */
.popout{position:absolute; z-index:5}
.popout--tr{top:-48px; right:-40px}
.popout--tl{top:-40px; left:-36px}
.popout--br{bottom:-44px; right:-30px}

/* ---------- buttons ---------- */
.btn{
  display:inline-block;
  font-family:var(--font-display);
  text-transform:uppercase;
  letter-spacing:.06em;
  font-size:1.25rem;
  padding:12px 24px;
  border:var(--border) solid var(--black);
  border-radius:var(--radius);
  box-shadow:var(--shadow-sm);
  text-decoration:none;
  cursor:pointer;
  transition:transform .12s ease, box-shadow .12s ease;
  color:var(--ink);
  background:var(--paper);
  line-height:1.1;
}
.btn:hover{transform:translate(-2px,-2px); box-shadow:8px 8px 0 var(--black)}
.btn:active{transform:translate(3px,3px); box-shadow:2px 2px 0 var(--black)}
.btn--red{background:var(--red); color:#fff}
.btn--yellow{background:var(--yellow); color:var(--ink)}
.btn--ghost{background:transparent}
.btn--ghost.btn--light{color:var(--paper); border-color:var(--paper); box-shadow:6px 6px 0 var(--red)}
.btn--sm{font-size:1rem; padding:8px 16px; box-shadow:4px 4px 0 var(--black)}
.btn--lg{font-size:1.5rem; padding:14px 34px}
.actions{display:flex; flex-wrap:wrap; gap:14px 18px; margin-top:1.6rem}

/* ---------- nav ---------- */
.nav{
  position:sticky; top:0; z-index:50;
  background:var(--black);
  border-bottom:var(--border) solid var(--yellow);
}
.nav__inner{
  max-width:var(--max); margin:0 auto; padding:10px var(--gutter);
  display:flex; align-items:center; justify-content:space-between; gap:20px;
}
.nav__brand{display:flex; align-items:center; gap:12px; text-decoration:none; color:var(--paper)}
.nav__brand img{width:52px; height:52px}
.nav__word{font-family:var(--font-display); font-size:1.7rem; letter-spacing:.04em; text-transform:uppercase; line-height:1}
.nav__word em{font-style:normal; color:var(--yellow)}
.nav__links{display:flex; align-items:center; gap:clamp(12px, 2vw, 26px)}
.nav__links a:not(.btn){
  color:var(--paper); text-decoration:none; font-weight:700; font-size:.95rem; letter-spacing:.02em;
  padding:6px 2px; border-bottom:3px solid transparent;
}
.nav__links a:not(.btn):hover{border-bottom-color:var(--red)}
.nav__toggle{display:none; background:none; border:3px solid var(--paper); border-radius:6px; width:46px; height:42px; padding:6px; cursor:pointer; flex-direction:column; justify-content:space-between}
.nav__toggle span{display:block; height:4px; background:var(--paper); border-radius:2px; transition:transform .2s, opacity .2s}
@media (max-width:860px){
  .nav__toggle{display:flex}
  .nav__links{
    display:none; position:absolute; left:0; right:0; top:100%;
    background:var(--black); border-bottom:var(--border) solid var(--yellow);
    flex-direction:column; align-items:stretch; padding:14px var(--gutter) 22px; gap:6px;
  }
  .nav__links a:not(.btn){font-size:1.15rem; padding:10px 4px; border-bottom:2px solid rgba(255,255,255,.12)}
  .nav__links .btn{margin-top:10px; text-align:center}
  .nav.is-open .nav__links{display:flex}
  .nav.is-open .nav__toggle span:nth-child(1){transform:translateY(10px) rotate(45deg)}
  .nav.is-open .nav__toggle span:nth-child(2){opacity:0}
  .nav.is-open .nav__toggle span:nth-child(3){transform:translateY(-10px) rotate(-45deg)}
}

/* ---------- hero ---------- */
.hero{
  background:var(--ink);
  color:var(--paper);
  padding-top:clamp(64px, 9vw, 110px);
  padding-bottom:clamp(64px, 9vw, 110px);
  overflow:hidden;
}
.speedlines{
  position:absolute; inset:-20% -10%; z-index:0; pointer-events:none; opacity:.9;
  background:
    repeating-conic-gradient(from 0deg at 72% 48%, rgba(255,255,255,.06) 0deg 1.4deg, transparent 1.4deg 6deg),
    radial-gradient(circle at 72% 48%, rgba(215,38,30,.35), transparent 42%);
}
.hero__grid{
  max-width:var(--max); margin:0 auto;
  display:grid; gap:clamp(28px, 4vw, 44px);
  grid-template-columns:minmax(0, 1.8fr) minmax(0, 1fr);
  grid-template-rows:auto auto;
  align-items:stretch;
}
.panel--hero{
  grid-row:1 / span 2;
  z-index:3;
  padding-right:clamp(24px, 21vw, 290px);
  min-height:420px;
  display:flex; flex-direction:column; justify-content:center;
}
.panel--hero .line{display:block}
.line--red{color:var(--red)}
.line--yellow{color:var(--yellow); -webkit-text-stroke:1px var(--black)}
.hero__logo{
  position:absolute; right:-100px; top:50%;
  width:clamp(260px, 28vw, 380px); height:auto;
  transform:translateY(-50%) rotate(8deg);
  filter:drop-shadow(0 18px 0 rgba(0,0,0,.28)) drop-shadow(0 0 40px rgba(245,184,30,.25));
  animation:float 6s ease-in-out infinite;
}
@keyframes float{0%,100%{transform:translateY(-50%) rotate(8deg)}50%{transform:translateY(calc(-50% - 14px)) rotate(10deg)}}
.panel--burst{background:var(--cream); padding-left:clamp(22px, 7vw, 96px)}
.panel__big{font-family:var(--font-display); text-transform:uppercase; font-size:clamp(1.4rem, 2.2vw, 1.9rem); line-height:1.05; margin-top:14px; padding-right:40px}
.panel__small{margin-top:10px; font-weight:600; color:var(--gray); font-size:.95rem}
.panel--bubble{background:var(--yellow); padding-left:clamp(22px, 7vw, 96px); display:flex; flex-direction:column; justify-content:center; gap:34px}
.panel--bubble .panel__small{color:var(--ink); text-align:right}

@media (max-width:900px){
  .hero__grid{grid-template-columns:minmax(0,1fr)}
  .panel--hero{grid-row:auto; padding-right:clamp(22px, 3vw, 36px); padding-bottom:230px; min-height:0}
  .hero__logo{right:50%; top:auto; bottom:-110px; width:300px; transform:translateX(50%) rotate(6deg); animation:none}
  .hero__grid > .panel--burst{margin-top:70px}
}

/* ---------- ticker ---------- */
.ticker{
  background:var(--yellow); color:var(--ink);
  border-top:var(--border) solid var(--black); border-bottom:var(--border) solid var(--black);
  overflow:hidden; white-space:nowrap; position:relative; z-index:2;
}
.ticker__track{display:inline-flex; align-items:center; gap:28px; padding:12px 0; animation:ticker 40s linear infinite; will-change:transform}
.ticker span{font-family:var(--font-display); text-transform:uppercase; font-size:1.35rem; letter-spacing:.05em}
.ticker i{font-style:normal; color:var(--red); font-size:1.1rem}
@keyframes ticker{to{transform:translateX(-50%)}}

/* ---------- section heads ---------- */
.section-head{max-width:var(--max); margin:0 auto clamp(40px, 5vw, 64px)}
.section-head .caption{margin-bottom:14px}
.section-head p{margin-top:14px; max-width:60ch; font-size:1.1rem; font-weight:500}
.page--dark .section-head p{color:rgba(251,244,228,.8)}
.sub-head{max-width:var(--max); margin:clamp(36px,5vw,56px) auto 26px; color:var(--red)}
.sub-head:first-of-type{margin-top:0}

/* ---------- strips (panel grids) ---------- */
.strip{
  max-width:var(--max); margin:0 auto;
  display:grid; gap:clamp(32px, 4.5vw, 52px) clamp(28px, 3.5vw, 40px);
}
.strip--3{grid-template-columns:repeat(3, minmax(0,1fr))}
.strip--4{grid-template-columns:repeat(4, minmax(0,1fr))}
.page .panel--wide{max-width:var(--max); margin-left:auto; margin-right:auto}
@media (max-width:980px){.strip--4{grid-template-columns:repeat(2, minmax(0,1fr))}}
@media (max-width:820px){.strip--3{grid-template-columns:repeat(2, minmax(0,1fr))}}
@media (max-width:560px){.strip--3,.strip--4{grid-template-columns:1fr}}

/* cards (What We Carry) */
.card{padding-top:86px; margin-top:24px}
.card__badge{width:128px; height:128px; top:-52px; left:-28px; transform:rotate(-8deg); filter:drop-shadow(6px 6px 0 rgba(0,0,0,.35)); transition:transform .25s ease}
.card:hover .card__badge{transform:rotate(-2deg) scale(1.06)}
.card h3{margin-bottom:10px}
.card p{font-size:.98rem}
.card--shop{padding-top:clamp(22px, 3vw, 36px)}
.tag{display:inline-block; font-family:var(--font-display); text-transform:uppercase; letter-spacing:.08em; font-size:.9rem; background:var(--ink); color:var(--yellow); padding:3px 10px; border-radius:3px; margin-bottom:12px}

/* rooms (Explore the Store) */
.strip--rooms{grid-template-columns:repeat(6, minmax(0,1fr)); grid-auto-rows:minmax(180px, auto)}
.room{padding-top:30px}
.room--a{grid-column:span 3; background:var(--cream)}
.room--b{grid-column:span 3; background:var(--yellow)}
.room--c{grid-column:span 2; background:var(--ink-2); color:var(--paper); border-color:var(--paper)}
.room--c .room__num{color:var(--red)}
.room--d{grid-column:span 2; background:var(--red); color:#fff}
.room--d .room__num{color:var(--yellow)}
.room--e{grid-column:span 2; background:var(--paper)}
.room--f{grid-column:span 6; background:var(--cream); padding-right:150px}
.room__num{position:absolute; top:-18px; right:16px; font-family:var(--font-display); font-size:3.2rem; color:var(--red); -webkit-text-stroke:2px var(--black); text-shadow:4px 4px 0 var(--black); line-height:1}
.room--b .room__num{color:#fff}
.room h3{margin-bottom:8px}
@media (max-width:900px){
  .strip--rooms{grid-template-columns:repeat(2, minmax(0,1fr))}
  .room--a,.room--b,.room--c,.room--d,.room--e{grid-column:span 1}
  .room--f{grid-column:span 2}
}
@media (max-width:560px){
  .strip--rooms{grid-template-columns:1fr}
  .room--a,.room--b,.room--c,.room--d,.room--e,.room--f{grid-column:span 1}
  .room--f{padding-right:clamp(22px,3vw,36px); padding-bottom:70px}
}

/* events */
.event{padding-top:40px}
.event__day{position:absolute; top:-16px; left:14px; font-family:var(--font-display); text-transform:uppercase; letter-spacing:.08em; background:var(--red); color:#fff; border:3px solid var(--black); padding:3px 12px; box-shadow:4px 4px 0 var(--black); font-size:1.05rem}
.event h4{font-family:var(--font-display); text-transform:uppercase; font-size:1.45rem; line-height:1; letter-spacing:.02em; margin-bottom:8px}
.event p{font-size:.95rem; color:var(--gray); font-weight:500}
.event--mini{padding:18px 20px; background:var(--cream); display:flex; align-items:center; min-height:76px}
.event--mini h4{margin:0; font-size:1.3rem}
.event--mini::before{content:"★"; color:var(--red); margin-right:12px; font-size:1.2rem}
.note{margin-top:12px; font-size:.85rem; opacity:.85}
.panel--red p{margin-top:10px; font-size:1.05rem}

/* story */
.strip--story{grid-template-columns:repeat(3, minmax(0,1fr))}
.story{padding-top:34px; background:var(--cream)}
.story p{font-size:1rem}
.story--wide{grid-column:1 / -1; background:var(--paper); padding-right:clamp(24px, 24vw, 320px); padding-top:40px}
.story--wide .bubble{max-width:620px}
.sig{margin-top:34px; font-weight:700; color:var(--red)}
.story__logo{right:-70px; bottom:-60px; width:clamp(220px, 26vw, 330px); transform:rotate(-7deg); filter:drop-shadow(0 14px 0 rgba(0,0,0,.35))}
@media (max-width:820px){.strip--story{grid-template-columns:1fr}}
@media (max-width:900px){
  .story--wide{padding-right:clamp(22px, 3vw, 36px); padding-bottom:180px}
  .story__logo{right:50%; transform:translateX(50%) rotate(-5deg); bottom:-80px; width:230px}
}

.values{max-width:var(--max); margin:clamp(70px, 9vw, 110px) auto 0; display:flex; flex-wrap:wrap; justify-content:center; gap:14px 18px}
.value{border:3px solid var(--yellow); color:var(--yellow); padding:8px 18px; border-radius:999px; font-size:1.15rem; letter-spacing:.06em; transform:rotate(-1deg)}
.value:nth-child(even){transform:rotate(1.2deg); border-color:var(--red); color:var(--paper)}

/* club form */
.panel--form{max-width:860px; margin:0 auto; padding:clamp(28px,4vw,52px); background:var(--paper)}
.panel--form .caption{margin-bottom:16px}
.panel--form > p{margin-top:14px; font-size:1.08rem; font-weight:500; max-width:60ch}
.form{margin-top:28px; display:grid; gap:18px}
.form__row{display:grid; gap:8px; border:0; padding:0; margin:0; min-width:0}
.form label, .form legend{font-weight:800; text-transform:uppercase; letter-spacing:.05em; font-size:.85rem}
.req{color:var(--red)}
.form input[type=text], .form input[type=email]{
  font:inherit; font-size:1.05rem; padding:12px 14px; border:3px solid var(--black); border-radius:var(--radius);
  background:#fff; box-shadow:inset 3px 3px 0 rgba(0,0,0,.08); width:100%;
}
.form input:focus{outline:3px solid var(--yellow); outline-offset:2px}
.chips{display:flex; flex-wrap:wrap; gap:10px; margin-top:4px}
.chips label{position:relative; cursor:pointer; text-transform:none; letter-spacing:0; font-size:.95rem; font-weight:700}
.chips input{position:absolute; opacity:0; inset:0}
.chips span{display:inline-block; padding:8px 14px; border:3px solid var(--black); border-radius:999px; background:#fff; transition:background .15s, color .15s}
.chips input:checked + span{background:var(--red); color:#fff}
.chips input:focus-visible + span{outline:3px solid var(--yellow); outline-offset:2px}
.form .btn{justify-self:start; margin-top:6px}
.fine{font-size:.8rem; color:var(--gray)}
.hidden-field{display:none}

/* visit */
.visit{max-width:var(--max); margin:0 auto; display:grid; gap:clamp(28px,4vw,44px); grid-template-columns:minmax(0,1fr) minmax(0,1.2fr); align-items:stretch}
.visit__info{background:var(--cream)}
.visit__info address{font-style:normal; font-size:1.25rem; font-weight:600; margin-top:12px; line-height:1.4}
.visit__phone{margin-top:8px; font-family:var(--font-display); font-size:2rem; letter-spacing:.04em}
.visit__phone a{text-decoration:none; color:var(--red)}
.visit__info h4{margin-top:26px}
.hours{margin-top:6px; color:var(--gray); font-weight:500}
.visit__map{padding:0; overflow:hidden; min-height:380px; background:var(--ink-2)}
.visit__map iframe{position:absolute; inset:0; width:100%; height:100%; border:0; filter:grayscale(.2) contrast(1.05)}
@media (max-width:820px){.visit{grid-template-columns:1fr} .visit__map{min-height:320px}}

/* footer */
.footer{background:var(--black); color:var(--paper); border-top:var(--border) solid var(--red); padding:48px var(--gutter) 40px}
.footer__inner{max-width:var(--max); margin:0 auto; display:grid; grid-template-columns:auto 1fr; gap:20px 28px; align-items:center}
.footer__name{font-size:1.6rem; color:var(--yellow)}
.footer__tag{margin-top:6px; color:rgba(251,244,228,.75); max-width:60ch}
.socials{display:flex; flex-wrap:wrap; gap:16px; margin-top:14px}
.socials a{color:var(--paper); text-decoration:none; font-weight:700; border-bottom:3px solid var(--red)}
.footer__legal{grid-column:1 / -1; font-size:.85rem; color:rgba(251,244,228,.6); border-top:1px solid rgba(255,255,255,.12); padding-top:20px; margin-top:8px}
.footer__legal a{color:var(--yellow); text-decoration:none}
@media (max-width:560px){.footer__inner{grid-template-columns:1fr}}

/* ---------- reveal on scroll ---------- */
.reveal{opacity:0; transform:translateY(26px) var(--tilt, rotate(0)); transition:opacity .6s ease, transform .6s cubic-bezier(.2,.8,.2,1)}
.reveal.tilt-l{--tilt:rotate(-1deg)}
.reveal.tilt-r{--tilt:rotate(1deg)}
.reveal.in{opacity:1; transform:translateY(0) var(--tilt, rotate(0))}
.delay-1{transition-delay:.08s}.delay-2{transition-delay:.16s}.delay-3{transition-delay:.24s}
@media (max-width:700px){.reveal.tilt-l,.reveal.tilt-r{--tilt:rotate(0)}}
.no-js .reveal{opacity:1; transform:none}

@media (prefers-reduced-motion: reduce){
  html{scroll-behavior:auto}
  .reveal{opacity:1; transform:none; transition:none}
  .hero__logo,.burst,.ticker__track{animation:none}
}

/* small screens: keep bursts inside the viewport */
@media (max-width:600px){.popout--tr{right:-14px; top:-40px} .popout--tl{left:-14px} .popout--br{right:-10px} .burst{width:120px;height:120px} .burst.small{width:100px;height:100px} .burst span{font-size:1.25rem} .burst.small span{font-size:1.05rem}}
@media (max-width:600px){
  .panel:has(> .popout--tr){padding-top:84px}
  .panel--hero{padding-top:clamp(22px,3vw,36px)}
  .room--f{padding-bottom:90px}
}
.panel:not(.panel--hero):has(> .caption--tl){padding-top:40px}
@media (max-width:600px){
  .panel:has(> .popout--tl){padding-top:84px}
}
@media (max-width:600px){
  .panel.panel:has(> .popout--tr), .panel.panel:has(> .popout--tl){padding-top:88px}
  .panel.panel--hero{padding-top:clamp(22px,3vw,36px)}
}

@media (max-width:900px){.panel--burst,.panel--bubble{padding-left:clamp(22px,3vw,36px)}}
.room--a{padding-right:120px; padding-bottom:40px}
@media (max-width:600px){.room--a{padding-right:clamp(22px,3vw,36px); padding-bottom:80px}}