/* =========================================================
   Iron Grip - Heroes Night Out
   Comic panels sitting on a neon night city. Original artwork only.
   Fully isolated from the site-wide stylesheet and every other event -
   own tokens, own components, own fonts.
   ========================================================= */

/* ---------- 1. Design tokens ---------- */
:root{
  --night:     #05060d;
  --night-2:   #0a0f1f;
  --night-3:   #131b33;
  --panel:     #111a33;
  --line:      #1e2a4d;
  --cyan:      #2ee6ff;
  --magenta:   #ff2fb9;
  --beam:      #ffd447;
  --text:      #f2f4ff;
  --muted:     #9aa3c7;
  --red:       #ED1C24;
  --cream:     #f4f1ea;

  --ink:      #12121a;
  --paper:    #f4f1ea;
  --pow:      #ffd447;

  --maxw:1100px;
  --band-pad-desktop: 72px;
  --band-pad-mobile: 44px;
}

/* ---------- 2. Base ---------- */
*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%;background:var(--night);overflow-x:hidden}
[id]{scroll-margin-top:84px}

body{
  margin:0;
  font-family:'Outfit',system-ui,-apple-system,Segoe UI,Roboto,sans-serif;
  font-size:16px;line-height:1.6;
  color:var(--text);
  background:var(--night);
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
img{max-width:100%;height:auto;display:block}
a{color:inherit}
h1,h2,h3{margin:0 0 .5em;line-height:1.05}
p{margin:0 0 1rem}

.wrap{width:100%;max-width:var(--maxw);margin-inline:auto;padding-inline:clamp(1.1rem,5vw,2.4rem)}

.display{font-family:'Bungee',cursive;font-weight:400;letter-spacing:.01em;text-transform:uppercase}

/* ---------- 3. Buttons (chunky inked) ---------- */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:.55rem;
  font-family:'Bungee',cursive;font-weight:400;letter-spacing:.02em;text-transform:uppercase;
  text-decoration:none;cursor:pointer;white-space:nowrap;
  border:5px solid var(--ink);border-radius:0;
  box-shadow:7px 7px 0 var(--ink);
  transition:transform .12s ease, box-shadow .12s ease;
}
.btn--primary{
  color:var(--ink);
  background:var(--pow);
}
.btn--primary:hover{transform:translate(-2px,-2px);box-shadow:9px 9px 0 var(--ink)}
.btn--primary:active{transform:translate(3px,3px);box-shadow:3px 3px 0 var(--ink)}
.btn--primary:disabled{
  cursor:not-allowed;color:var(--muted);background:var(--night-3);
  box-shadow:4px 4px 0 var(--line);border-color:var(--line);
}
.btn--primary:disabled:hover{transform:none;box-shadow:4px 4px 0 var(--line)}

.btn--sm{font-size:.78rem;padding:.5rem .9rem;border-width:3px;box-shadow:4px 4px 0 var(--ink)}
.btn--lg{font-size:1.05rem;padding:1rem 1.7rem}
.btn--block{width:100%}

.btn__label{display:inline-flex;align-items:center;gap:.55rem}
.btn__loading{display:none;align-items:center;gap:.55rem}
.btn.is-loading{pointer-events:none;cursor:progress}
.btn.is-loading .btn__label{display:none}
.btn.is-loading .btn__loading{display:inline-flex}
.btn__loading .spinner{width:1.1em;height:1.1em;border-radius:0;
  border:3px solid rgba(18,18,26,.25);border-top-color:var(--ink);animation:btn-spin .7s linear infinite}
@keyframes btn-spin{to{transform:rotate(360deg)}}

.btn:focus-visible,a:focus-visible,input:focus-visible,button:focus-visible,textarea:focus-visible,select:focus-visible{
  outline:3px solid var(--cyan);outline-offset:3px;
}

/* header keeps its own pill shape - not a "panel", exempted from radius rule */
.badge-logo{display:inline-flex;align-items:center}
.badge-logo img{height:58px;width:auto}

/* ---------- 4. Sticky header ---------- */
.site-header{
  position:sticky;top:0;z-index:50;
  background:rgba(5,6,13,.9);
  backdrop-filter:blur(10px);
  border-bottom:3px solid var(--ink);
}
.site-header__inner{display:flex;align-items:center;justify-content:space-between;gap:1rem;padding-block:.6rem}

/* ---------- 5. Hero ---------- */
.hero{
  position:relative;overflow:hidden;isolation:isolate;
  min-height:clamp(600px,94dvh,820px);
  display:flex;align-items:flex-end;
  padding-top:clamp(170px,30vw,400px);
  padding-bottom:clamp(2rem,5vw,3.4rem);
}
.hero__sky{
  position:absolute;inset:0;z-index:0;
  background:linear-gradient(180deg,var(--night) 0%,var(--night) 45%,#170a22 78%,#2a0f2e 100%);
}
.hero__skyline{position:absolute;left:0;right:0;bottom:0;width:100%;height:46%;z-index:1;pointer-events:none}
.hero__skyline--front{z-index:2;height:34%}
.hero__beam{position:absolute;inset:0;z-index:1;width:100%;height:100%;pointer-events:none}

/* Bloom: a DOM-anchored glow behind the panel's top edge, so it always
   registers with the lineup regardless of viewport height. The SVG beam
   above only needs to travel roughly toward this point. */
.hero__bloom{
  position:absolute;left:50%;bottom:100%;
  width:min(420px,120%);height:260px;
  transform:translate(-50%,15%);
  background:radial-gradient(ellipse 50% 50% at 50% 100%,
    rgba(255,212,71,.7) 0%, rgba(255,212,71,.38) 26%,
    rgba(255,212,71,.15) 50%, rgba(255,212,71,0) 74%);
  filter:blur(4px);
  pointer-events:none;z-index:0;
}

/* Artwork is portrait (taller than wide), so it is sized by height to fit
   the hero's reserved top space rather than by hero width - a literal
   width-based fraction would make it far taller than the hero itself. */
.hero__lineup{
  position:absolute;left:50%;bottom:100%;z-index:2;
  height:clamp(150px,28vw,380px);
  transform:translate(-50%,10px);
  pointer-events:none;
}
.hero__lineup img{display:block;height:100%;width:auto}

.hero__content{position:relative;z-index:4;max-width:min(880px,92vw);
  display:flex;flex-direction:column;align-items:flex-start}

.hero__title-panel{
  position:relative;
  background:var(--magenta);
  border:5px solid var(--ink);
  box-shadow:8px 8px 0 var(--ink);
  transform:rotate(-2deg);
  padding:1.1rem 1.4rem 1.3rem;
  margin:0 0 1.4rem -6px;
}
.hero__title-panel::before{
  content:"";position:absolute;inset:0;pointer-events:none;
  background-image:radial-gradient(var(--ink) 1.4px, transparent 1.5px);
  background-size:7px 7px;
  opacity:.22;
}
.hero__title{
  position:relative;z-index:1;
  font-family:'Bungee',cursive;font-weight:400;text-transform:uppercase;
  margin:0;line-height:.95;text-align:left;
}
.hero__title-line1{
  display:block;color:var(--ink);
  font-size:clamp(3rem,8.5vw,6.5rem);
}
.hero__title-line2{
  display:block;color:var(--pow);
  -webkit-text-stroke:2px var(--ink);
  paint-order:stroke fill;
  font-size:clamp(4rem,12vw,9.5rem);
  margin:.08em 0 0 .5em;
}

.hero__sub{
  display:inline-block;max-width:44ch;
  font-size:clamp(1.2rem,2.2vw,1.7rem);color:#fff;font-weight:600;text-align:left;
  background:var(--ink);border:4px solid var(--ink);box-shadow:7px 7px 0 var(--pow);
  padding:.9rem 1.2rem;margin:0 0 1.5rem;
}

.hero__chips{display:flex;flex-wrap:wrap;gap:.6rem;justify-content:flex-start;margin:0 0 1.7rem}
.chip{display:inline-flex;align-items:center;color:var(--ink);font-weight:700;font-size:clamp(1rem,1.4vw,1.25rem);
  padding:.5rem .85rem;border:3px solid var(--ink);border-radius:0;
  box-shadow:4px 4px 0 var(--ink);transform:rotate(-1deg)}
.chip:nth-child(even){transform:rotate(1.2deg)}
.chip--yellow, .chip:nth-child(odd){background:var(--pow)}
.chip--cyan, .chip:nth-child(even){background:var(--cyan)}

.hero__content .btn--lg{font-size:clamp(1.25rem,2vw,1.6rem)}

.hero__status-strip{
  display:flex;align-items:center;flex-wrap:wrap;gap:0;
  background:var(--night-2);border:3px solid var(--ink);
  box-shadow:5px 5px 0 var(--ink);
}
.hero__spots{font-family:'Bungee',cursive;font-weight:400;text-transform:uppercase;
  font-size:clamp(1rem,1.4vw,1.2rem);letter-spacing:.02em;color:var(--pow);margin:0;
  padding:.7rem 1rem;border-right:3px solid var(--ink)}
.hero__spots.is-full{color:var(--red)}
.hero__countdown{font-size:clamp(1rem,1.4vw,1.2rem);font-weight:700;color:var(--text);margin:0;padding:.7rem 1rem}

/* ---------- 6. Generic band / section ---------- */
.section{padding-block:var(--band-pad-desktop);position:relative;overflow:hidden}
.section--dark{background:var(--night-2)}

.band-skyline{position:absolute;left:0;right:0;width:100%;height:70px;z-index:0;pointer-events:none;opacity:.9}
.band-skyline--top{top:0}
.band-skyline--bottom{bottom:0;transform:scaleY(-1)}

.band-content{position:relative;z-index:2}

.section__title-tab{
  display:inline-block;position:relative;
  background:var(--night-2);border:4px solid var(--ink);
  box-shadow:6px 6px 0 var(--ink);
  padding:.6rem 1.1rem;margin:0 0 1rem 0;
  transform:rotate(-1.5deg);
  z-index:3;
}
.section__title{
  font-family:'Bungee',cursive;font-weight:400;text-transform:uppercase;
  font-size:clamp(1.32rem,3.45vw,1.73rem);color:var(--pow);
  margin:0;text-align:left;
}
.section--bright .section__title-tab{background:var(--paper)}
.section--bright .section__title{color:var(--ink)}

.section__lead{color:var(--muted);max-width:56ch;margin:0 0 2rem;text-align:left;font-weight:600;font-size:1.0625rem}
.section--bright .section__lead{color:var(--ink)}

/* ---------- 6b. Diagonal band edges (clip-path) ---------- */
.slant-top{clip-path:polygon(0 34px, 100% 0, 100% 100%, 0 100%)}
.slant-bottom{clip-path:polygon(0 0, 100% 0, 100% calc(100% - 34px), 0 100%)}
.slant-both{clip-path:polygon(0 34px, 100% 0, 100% calc(100% - 34px), 0 100%)}
.slant-top-rev{clip-path:polygon(0 0, 100% 34px, 100% 100%, 0 100%)}
.slant-bottom-rev{clip-path:polygon(0 0, 100% 0, 100% 100%, 0 calc(100% - 34px))}

/* ---------- 7. Comic panel primitive ---------- */
.panel{
  position:relative;
  border:5px solid var(--ink);
  border-radius:0;
  box-shadow:7px 7px 0 var(--ink);
  background:var(--paper);
  color:var(--ink);
}
.panel--dark{background:var(--night-3);color:var(--text);border-color:var(--ink)}
.panel--rot-a{transform:rotate(-2deg)}
.panel--rot-b{transform:rotate(1.5deg)}
.panel--rot-c{transform:rotate(-1deg)}

.halftone{position:relative}
.halftone::before{
  content:"";position:absolute;inset:0;pointer-events:none;z-index:1;
  background-image:radial-gradient(var(--ink) 1.4px, transparent 1.5px);
  background-size:7px 7px;
  opacity:.22;
}

/* ---------- 8. The Mission ---------- */
.mission-grid{list-style:none;margin:0;padding:0;
  display:grid;grid-template-columns:1fr;gap:1.3rem;}
.mission-card{
  padding:1.4rem 1.3rem;margin:0;
}
.mission-card__icon{display:flex;align-items:center;justify-content:center;width:56px;height:56px;
  border:4px solid var(--ink);margin-bottom:1rem;color:var(--ink)}
.mission-card__icon svg{width:32px;height:32px}
.mission-card--cyan .mission-card__icon{background:var(--cyan)}
.mission-card--magenta .mission-card__icon{background:var(--magenta)}
.mission-card--yellow .mission-card__icon{background:var(--pow)}
.mission-card h3{font-family:'Bungee',cursive;font-weight:400;font-size:1.15rem;text-transform:uppercase;
  color:var(--text);letter-spacing:.01em;text-align:left}
.mission-card p{color:var(--muted);margin:0;font-size:1.0625rem;font-weight:600;text-align:left}

/* ---------- 9. Dress code band ---------- */
.dress-code{
  position:relative;isolation:isolate;
  background:var(--pow);
  padding-block:var(--band-pad-desktop);
}
.dress-code__content{position:relative;z-index:2;text-align:left;max-width:56ch}
.dress-code__kicker{font-family:'Bungee',cursive;font-weight:400;letter-spacing:.1em;
  font-size:.8rem;color:var(--ink);margin:0 0 .6rem}
.dress-code__title{font-family:'Bungee',cursive;font-weight:400;text-transform:uppercase;
  font-size:clamp(1.7rem,6vw,2.8rem);color:var(--ink);margin:0 0 .8rem;line-height:1.05}
.dress-code__sub{color:var(--ink);max-width:44ch;margin:0;font-weight:700;font-size:1.0625rem}

/* ---------- 10. Sound-effect bursts (exactly three) ---------- */
.sfx{position:absolute;z-index:6;pointer-events:none;
  width:clamp(90px,12vw,140px);height:clamp(90px,12vw,140px);
  display:flex;align-items:center;justify-content:center;}
.sfx svg{position:absolute;inset:0;width:100%;height:100%}
.sfx__label{position:relative;font-family:'Bungee',cursive;font-weight:400;
  color:var(--ink);font-size:clamp(1.1rem,2.6vw,1.6rem);letter-spacing:.02em}
.sfx--pow{transform:rotate(-8deg)}
.sfx--zap{transform:rotate(6deg)}
.sfx--bam{transform:rotate(-6deg)}

/* ---------- 11. Details ---------- */
.details-stack{display:flex;flex-direction:column;gap:1.1rem;max-width:720px}
.info-panel{
  display:flex;flex-direction:column;gap:.2rem;
  padding:1rem 1.3rem;
}
.info-panel__label{font-family:'Bungee',cursive;font-weight:400;font-size:.72rem;
  text-transform:uppercase;letter-spacing:.06em;opacity:.75}
.info-panel__value{font-size:1.15rem;font-weight:700}
.info-panel--wide{max-width:none}
.info-panel .btn{margin-top:.6rem;align-self:flex-start}

/* ---------- 12. Last year gallery ---------- */
.last-year{overflow:visible !important}
.last-year-grid{
  position:relative;
  display:grid;grid-template-columns:1fr;
  gap:2.6rem 0;
  padding-block:1rem 2.4rem;
}
.last-year-photo{margin:0}
.last-year-photo__frame{
  display:block;width:100%;padding:0;border:5px solid var(--ink);cursor:pointer;
  box-shadow:8px 8px 0 var(--ink);background:var(--paper);
}
.last-year-photo__frame img{display:block;width:100%;aspect-ratio:4/3;object-fit:cover}
.last-year-photo--a{transform:rotate(-3deg);z-index:2}
.last-year-photo--b{transform:rotate(2deg) scale(1.06);z-index:3;margin-top:-1.4rem}
.last-year-photo--c{transform:rotate(-1.5deg);z-index:1;margin-bottom:-3rem}

/* ---------- 13. Booking band ---------- */
.booking{background:var(--magenta);position:relative;isolation:isolate}
.countdown-band{margin:0 0 2.2rem;max-width:640px}
.countdown-band__label{font-family:'Bungee',cursive;font-weight:400;text-transform:uppercase;
  font-size:clamp(.85rem,2.6vw,1.05rem);color:var(--ink);margin:0 0 1.2rem}
.countdown-band__digits{display:flex;flex-wrap:wrap;gap:.7rem}
.countdown-digit{
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  width:72px;padding:.7rem 0;background:var(--paper);border:4px solid var(--ink);
  box-shadow:5px 5px 0 var(--ink);
}
.countdown-digit span{font-family:'Bungee',cursive;font-weight:400;font-size:1.5rem;color:var(--ink)}
.countdown-digit small{font-size:.62rem;text-transform:uppercase;letter-spacing:.06em;color:var(--ink);opacity:.7;margin-top:.2rem}

.booking-form{background:var(--paper);border:5px solid var(--ink);
  box-shadow:9px 9px 0 var(--ink);
  padding:clamp(1.2rem,4vw,2rem);max-width:680px;color:var(--ink)}
.field{margin-bottom:1rem}
.field label{display:block;font-family:'Bungee',cursive;font-weight:400;font-size:1rem;
  text-transform:uppercase;letter-spacing:.03em;margin-bottom:.4rem;color:var(--ink)}
.req{color:var(--magenta)}
.field input,.field select,.field textarea{width:100%;font:inherit;font-weight:600;color:var(--ink);
  background:var(--cream);border:3px solid var(--ink);border-radius:0;padding:.8rem 1rem;min-height:48px}
.field textarea{min-height:64px;resize:vertical;line-height:1.5}
.field input:focus,.field select:focus,.field textarea:focus{border-color:var(--magenta);outline:none;
  box-shadow:0 0 0 3px rgba(255,47,185,.25)}
.field select{appearance:none;-webkit-appearance:none;cursor:pointer;padding-right:2.6rem;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2312121a' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right 1rem center;background-size:18px}
.field ::placeholder{color:#6b6f80;opacity:1}

.child-blocks{display:flex;flex-direction:column;gap:1.2rem;margin-bottom:0}
.child-card{background:var(--cream);border:4px solid var(--ink);
  padding:1.1rem 1.1rem .9rem}
.child-card__title{font-family:'Bungee',cursive;font-weight:400;text-transform:uppercase;
  font-size:.8rem;color:var(--ink);margin:0 0 .8rem;letter-spacing:.02em}
.child-card__row{display:grid;grid-template-columns:1fr;gap:.9rem;margin-bottom:.9rem}

.booking-form__hint{font-size:1.0625rem;color:var(--ink);margin:-.3rem 0 1.1rem;font-weight:600;opacity:.8}

.qty-row{display:flex;align-items:center;justify-content:space-between;gap:1rem;
  background:var(--cream);border:3px solid var(--ink);padding:.6rem .7rem .6rem 1rem}
.qty-row__label{font-weight:700;font-size:.92rem;color:var(--ink)}
.qty-stepper{display:flex;align-items:center;gap:.6rem;flex:none}
.qty-stepper button{width:44px;height:44px;border:3px solid var(--ink);background:var(--pow);
  font-family:'Bungee',cursive;font-size:1.2rem;color:var(--ink);cursor:pointer;line-height:1}
.qty-stepper button:hover{transform:translate(-1px,-1px)}
.qty-stepper button:active{transform:translateY(1px)}
.qty-stepper input{width:44px;text-align:center;border:none;background:transparent;font-weight:700;font-size:1.05rem;
  min-height:auto;padding:0;color:var(--ink)}
.qty-stepper input:focus{outline:none;box-shadow:none}

/* Party pack picker (mirrors Pajama Night's radio-card structure) */
.pack-lead{font-weight:700;color:var(--ink);margin:0 0 .9rem;font-size:.92rem}
.pack-picker{display:flex;flex-wrap:wrap;gap:.8rem;margin-bottom:1rem}
.pack-card{
  position:relative;flex:1 1 140px;
  background:var(--paper);border:4px solid var(--ink);
  box-shadow:5px 5px 0 var(--ink);
  padding:.6rem;display:flex;flex-direction:column;gap:.5rem;
}
.pack-card--none{flex:0 1 96px;align-items:center;justify-content:center;text-align:center}
.pack-card:has(input:checked){background:var(--pow)}
.pack-card__photo{display:block;width:100%;padding:0;border:3px solid var(--ink);cursor:pointer;background:none}
.pack-card__photo img{display:block;width:100%;aspect-ratio:4/3;object-fit:cover}
.pack-card__pick{display:flex;flex-wrap:wrap;align-items:baseline;gap:.4rem;cursor:pointer}
.pack-card--none .pack-card__pick{flex-direction:column;align-items:center;gap:.3rem}
.pack-card__name{font-family:'Bungee',cursive;font-weight:400;text-transform:uppercase;
  font-size:.78rem;color:var(--ink)}
.pack-card__price{font-family:'Bungee',cursive;font-weight:400;color:var(--magenta);font-size:.78rem}
.pack-card__note{flex-basis:100%;color:var(--ink);font-size:.72rem;font-weight:600;opacity:.75}

.pack-picker--compact .pack-card{flex:1 1 90px}
.pack-picker--compact .pack-card__photo img{aspect-ratio:1/1}

.order-summary{margin:1.3rem 0 1.1rem;background:var(--ink);
  border:4px solid var(--ink);padding:.9rem 1rem}
.order-row{display:flex;justify-content:space-between;align-items:baseline;gap:1rem;font-size:1.0625rem}
.order-row--total{font-family:'Bungee',cursive;font-weight:400;font-size:1.3rem;color:var(--pow);
  text-transform:uppercase;letter-spacing:.02em}

.consent-row{margin:0 0 1.1rem}
.consent-check{display:flex;align-items:flex-start;gap:.6rem;cursor:pointer;
  font-size:.85rem;color:var(--ink);font-weight:600;line-height:1.45}
.consent-check input{width:20px;height:20px;min-width:20px;min-height:auto;flex:none;
  margin-top:.15rem;accent-color:var(--magenta);cursor:pointer}
.consent-check a{color:var(--ink);text-decoration:underline}

.form-success{margin-top:1rem;padding:.9rem 1rem;background:var(--cream);
  border:3px solid var(--ink);color:var(--ink);font-weight:600;font-size:1.0625rem}

/* ---------- 14. Footer ---------- */
.site-footer{background:var(--night-2);color:var(--muted);padding-block:2.2rem;border-top:3px solid var(--ink)}
.site-footer__inner{display:flex;flex-direction:column;gap:.35rem;align-items:flex-start}
.site-footer__name{font-family:'Bungee',cursive;font-weight:400;text-transform:uppercase;
  font-size:1.1rem;color:var(--text);margin:0 0 .3rem}
.site-footer p{margin:0;font-size:1.0625rem}
.site-footer a{color:var(--muted);text-decoration:underline;text-underline-offset:2px}
.site-footer a:hover{color:var(--cyan)}

/* ---------- 15. Lightbox ---------- */
.lightbox{position:fixed;inset:0;z-index:200;background:rgba(5,6,13,.94);
  display:flex;align-items:center;justify-content:center;padding:2rem}
.lightbox[hidden]{display:none}
.lightbox img{max-width:min(92vw,900px);max-height:88vh;border:4px solid var(--ink)}
.lightbox__close{position:absolute;top:1.2rem;right:1.2rem;width:44px;height:44px;
  border:3px solid var(--ink);background:var(--pow);color:var(--ink);font-size:1.4rem;line-height:1;
  cursor:pointer}
.lightbox__close:hover{transform:translate(-1px,-1px)}

/* ---------- 16. Scroll-reveal (progressive enhancement) ---------- */
@media (prefers-reduced-motion: no-preference){
  /* Opacity-only: panels carry their own permanent rotate() transform, and
     `transform` isn't additive across classes, so a translateY here would
     silently overwrite (not combine with) each panel's rotation. */
  .reveal{opacity:0;transition:opacity .7s ease}
  .reveal.is-visible{opacity:1}

  @keyframes beam-pulse{0%,100%{opacity:.9}50%{opacity:1}}
  .hero__beam{animation:beam-pulse 5s ease-in-out infinite}
  .hero__bloom{animation:beam-pulse 5s ease-in-out infinite}
}

/* ---------- 17. Tablet (>=768px) ---------- */
@media (min-width:768px){
  .mission-grid{grid-template-columns:repeat(12,1fr)}
  .mission-card:nth-child(1){grid-column:span 7}
  .mission-card:nth-child(2){grid-column:span 5;margin-top:1.6rem}
  .mission-card:nth-child(3){grid-column:span 4}
  .mission-card:nth-child(4){grid-column:span 4;margin-top:-.8rem}
  .mission-card:nth-child(5){grid-column:span 4}

  .details-list{grid-template-columns:repeat(2,1fr);column-gap:2.5rem}
  .last-year-grid{grid-template-columns:repeat(3,1fr);align-items:start;gap:1.4rem}
  .last-year-photo--b{margin-top:-2.4rem}
  .last-year-photo--c{margin-bottom:-4.5rem}
  .child-card__row{grid-template-columns:1fr 1fr}
}

/* ---------- 18. Desktop (>=1024px) ---------- */
@media (min-width:1024px){
  .site-footer__inner{flex-direction:row;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:.5rem 1.5rem}
  .site-footer__name{margin:0}
}

/* ---------- 19. Small screens ---------- */
@media (max-width:600px){
  .countdown-digit{width:62px}
}

@media (max-width:480px){
  .section{padding-block:var(--band-pad-mobile)}
  .dress-code{padding-block:var(--band-pad-mobile)}
  .panel--rot-a,.panel--rot-b,.panel--rot-c,
  .hero__title-panel,.chip,.section__title-tab,
  .last-year-photo--a,.last-year-photo--b,.last-year-photo--c{transform:rotate(1deg) !important}
  .last-year-photo--b{margin-top:0}
  .last-year-photo--c{margin-bottom:0}
  .last-year-photo--b, .last-year-photo--b.panel{transform:rotate(1deg) scale(1) !important}
  .panel,.btn,.chip,.hero__title-panel,.section__title-tab,
  .last-year-photo__frame,.countdown-digit,.pack-card{box-shadow:4px 4px 0 var(--ink) !important}
  .mission-card,.info-panel,.child-card,.pack-card{margin-left:0;margin-top:0 !important}
  .mission-grid .mission-card{grid-column:auto !important}
  .slant-top,.slant-bottom,.slant-both,.slant-top-rev,.slant-bottom-rev{clip-path:none}

  .hero{padding-top:min(44vh,280px)}
  .hero__lineup{height:min(40vh,260px);transform:translate(-50%,6px)}
  .hero__bloom{width:min(260px,90vw);height:190px}
  .hero__lamp{transform-box:fill-box;transform-origin:50% 100%;transform:scale(.7)}
}

/* ---------- 20. Reduced motion ---------- */
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .reveal{opacity:1;transform:none}
}