/* ============================================================
   INDUSTRY SLAM 2K26 — black / orange / chrome
   mobile-first (375+), >=768 two-col, >=1024 fixed gutters
   ============================================================ */

:root{
  --black:#000;
  --bone:#f1ece2;
  --bone-dim:#c9c2b4;

  --orange:#ff6a00;
  --orange-hot:#ff3c00;
  --orange-lt:#ff9440;
  --orange-dk:#a83c00;
  --orange-deep:#5e2100;
  --red:#e01b00;

  --chrome-hi:#ffffff;
  --chrome-1:#f4f4f4;
  --chrome-2:#8a8a8a;
  --chrome-3:#dcdcdc;
  --chrome-lo:#3a3a3a;

  --gold:#e0b64a;              /* thin accent, skull only */

  --link:#ff8a2b;
  --visited:#c9601a;

  --panel:#0a0a0a;
  --panel-2:#141414;
  --edge:#2b2b2b;

  --bgtile:url("assets/sprites/bg-tile.png");

  --display:Impact,"Arial Black","Haettenschweiler","Franklin Gothic Bold",sans-serif;
  --body:"Trebuchet MS","Lucida Grande",Verdana,Arial,Helvetica,sans-serif;
  --mono:"Courier New",Courier,monospace;

  --chrome-face:linear-gradient(180deg,#ffffff 0%,#f7f7f7 14%,#cdcdcd 38%,#8a8a8a 48%,#5a5a5a 52%,#d8d8d8 62%,#f4f4f4 78%,#ffffff 100%);
  --chrome-edge:linear-gradient(150deg,#f4f4f4 0%,#dcdcdc 18%,#8a8a8a 44%,#2e2e2e 58%,#8a8a8a 78%,#f4f4f4 100%);
}

*{box-sizing:border-box}
[hidden]{display:none !important}

html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}

body{
  margin:0;
  background-color:#000;
  background-image:
    var(--bgtile),
    radial-gradient(circle at 50% 0%, rgba(255,106,0,.16) 0%, rgba(0,0,0,0) 58%),
    repeating-linear-gradient(135deg,#080808 0 8px,#030303 8px 16px);
  background-repeat:repeat, no-repeat, repeat;
  color:var(--bone);
  font-family:var(--body);
  font-size:17px;
  line-height:1.55;
  overflow-x:hidden;
}

img{max-width:100%;height:auto;display:block}

a{color:var(--link);text-decoration:underline}
a:visited{color:var(--visited)}
a:hover,a:focus{color:var(--orange-lt)}
:focus-visible{outline:3px solid var(--orange);outline-offset:2px}

/* ---------- chrome metallic type ---------- */
.chrome{
  font-family:var(--display);
  text-transform:uppercase;
  line-height:1.02;
  letter-spacing:1px;
  background:var(--chrome-face);
  -webkit-background-clip:text;
  background-clip:text;
  color:transparent;
  -webkit-text-fill-color:transparent;
  filter:
    drop-shadow(0 0 12px rgba(255,106,0,.55))
    drop-shadow(0 0 3px rgba(255,60,0,.85))
    drop-shadow(2px 3px 0 #000);
}

/* ---------- chrome bevel frame ---------- */
.bevel,.sec,.panel,.form,.card{
  border:4px solid var(--chrome-2);
  border-image:var(--chrome-edge) 1;
}

/* ---------- shell ---------- */
.wrap{max-width:980px;margin:0 auto;padding:0 12px 40px;width:100%;position:relative;z-index:3}

.sec{
  margin:18px 0;
  padding:18px 14px;
  background:linear-gradient(180deg,rgba(14,14,14,.96),rgba(3,3,3,.96));
  box-shadow:inset 0 0 34px rgba(255,106,0,.10);
}

.head{
  display:flex;
  align-items:center;
  gap:10px;
  flex-wrap:wrap;
  font-size:31px;
  margin:0 0 12px;
}
.sub-head{font-family:var(--display);font-size:23px;letter-spacing:1px;color:var(--orange);margin:4px 0 10px;text-transform:uppercase}
.sub{font-size:17px;color:var(--orange-lt);margin:0 0 14px}
p{margin:0 0 14px}
b{color:var(--bone)}

/* ---------- ticker: black bg, orange text ---------- */
.ticker{
  position:relative;
  z-index:3;
  overflow:hidden;
  background:#000;
  border-top:3px solid var(--orange-dk);
  border-bottom:3px solid var(--orange-dk);
  padding:7px 0;
  white-space:nowrap;
}
.ticker-track{display:inline-flex;min-width:200%;animation:slide 26s linear infinite}
.ticker-item{
  font-family:var(--mono);font-weight:bold;font-size:16px;letter-spacing:1px;
  color:var(--orange);padding-right:40px;
}
@keyframes slide{from{transform:translateX(0)}to{transform:translateX(-50%)}}

/* ---------- hero ---------- */
.hero{text-align:center;position:relative;overflow:hidden}
.kicker{color:var(--orange-lt);font-size:17px;margin:0 0 10px;letter-spacing:1px}

.mark-row{display:flex;align-items:center;justify-content:center;gap:10px}
h1.chrome{margin:0 0 12px;flex:1 1 auto;min-width:0}
h1.chrome .l1{display:block;font-size:24px}
h1.chrome .l2{display:block;font-size:50px;letter-spacing:2px}
h1.chrome .l3{display:block;font-size:26px;-webkit-text-fill-color:initial;color:initial;filter:none;background:none}
h1.chrome .ex{font-family:var(--body);font-size:.6em;font-style:italic}
.chrome.small{font-size:34px}

.sprite-mark.flip{transform:scaleX(-1)}

.hero-grid{display:block}
.hero-sprite{display:flex;justify-content:center;align-items:center;gap:4px;margin:6px 0 14px}

/* facts table */
.deets{
  margin:0 auto;
  padding:0;
  text-align:left;
  background:#060606;
  max-width:520px;
}
.deet{
  display:grid;
  grid-template-columns:92px 1fr;
  gap:8px;
  padding:10px;
  border-bottom:2px solid #262626;
}
.deet:last-child{border-bottom:0}
.deets dt{font-family:var(--mono);font-weight:bold;color:var(--orange);font-size:15px;letter-spacing:1px;padding-top:2px}
.deets dd{margin:0;font-size:17px;color:var(--bone)}
.gate{font-size:16px;color:var(--orange-lt)}

.countdown{font-family:var(--mono);color:var(--orange);font-size:17px;margin:14px 0 0;letter-spacing:1px;font-weight:bold}
.cta-wrap{margin:16px 0 6px}
.fineprint{font-size:16px;color:var(--bone-dim);margin:0}

/* ---------- buttons: orange, chrome bevel ---------- */
.btn{
  display:inline-block;
  min-height:52px;
  padding:14px 22px;
  font-family:var(--display);
  font-size:22px;
  letter-spacing:1px;
  text-transform:uppercase;
  text-decoration:none;
  color:#1a0700;
  background:linear-gradient(180deg,#ffb069 0%,#ff6a00 46%,#ff3c00 78%,#c02c00 100%);
  border:5px outset var(--chrome-3);
  cursor:pointer;
  text-shadow:0 1px 0 rgba(255,255,255,.35);
  box-shadow:0 0 18px rgba(255,106,0,.35);
}
.btn:visited{color:#1a0700}
.btn:hover,.btn:focus{color:#1a0700;background:linear-gradient(180deg,#ffc389 0%,#ff8127 46%,#ff5417 78%,#d63500 100%)}
.btn:active{border-style:inset}
.btn[disabled]{opacity:.55;cursor:not-allowed}
.blink{animation:blinky 1.8s steps(1,end) infinite}
@keyframes blinky{
  0%{border-color:var(--chrome-3);box-shadow:0 0 12px rgba(255,106,0,.3)}
  50%{border-color:var(--orange-hot);box-shadow:0 0 26px 5px rgba(255,60,0,.6)}
  100%{border-color:var(--chrome-3);box-shadow:0 0 12px rgba(255,106,0,.3)}
}

/* ---------- rules + flame dividers ---------- */
.rule{
  height:4px;border:0;margin:18px 0;
  background:linear-gradient(90deg,rgba(0,0,0,0),var(--orange-dk) 12%,var(--chrome-1) 50%,var(--orange-dk) 88%,rgba(0,0,0,0));
}
.divider{
  display:block;
  overflow:hidden;
  margin:2px 0;
}
.sprite-flamebar{width:100%;height:90px}

/* ---------- sprites ---------- */
.sprite{
  display:block;
  background-repeat:no-repeat;
  background-position:0 0;
  image-rendering:auto;
  flex:0 0 auto;
}
/* placeholder look until the sprite lands */
.sprite.placeholder{
  display:flex;align-items:center;justify-content:center;text-align:center;
  background:repeating-linear-gradient(45deg,#241000 0 10px,#0f0803 10px 20px);
  border:3px dashed var(--orange-dk);
  color:var(--orange);
  font-family:var(--mono);
  font-size:11px;
  line-height:1.15;
  padding:4px;
  word-break:break-word;
}
.sprite.sprite-off{display:none !important}

.sprite-hero{
  height:230px;width:230px;max-width:100%;
  border:1px solid rgba(224,182,74,.45);   /* the one gold accent */
  box-shadow:0 0 22px rgba(224,182,74,.18), inset 0 0 30px rgba(255,106,0,.10);
}
.torch{height:64px}
.torch-r{transform:scaleX(-1)}

.sprite-card{height:84px;width:84px;margin:0 auto 10px}
.card-duo{display:flex;justify-content:center;align-items:flex-end;gap:10px;margin:0 0 10px}
.card-duo .sprite-card{margin:0}
.sprite-party{height:56px;width:56px}
.sprite-uc{height:96px;width:68px;margin:12px auto}

/* small spinning skull on the RATING row */
.sprite-inline{display:inline-block;height:28px;vertical-align:-7px;margin-right:8px}

/* chrome skulls flanking the wordmark - desktop only */
.sprite-mark{display:none;height:74px}

/* burning palms flanking the section titles - desktop only */
.sprite-flank{display:none;height:34px;flex:0 0 auto}

/* badge next to the RSVP heading */
.sprite-new{display:inline-block;height:40px;flex:0 0 auto;vertical-align:-10px}

/* cooler next to the low-fills checkbox */
.sprite-opt{height:40px;flex:0 0 auto}

/* ---------- text blocks ---------- */
.lede{font-size:19px;color:var(--bone);line-height:1.45}
.cols p{max-width:62ch}
.note-box{
  background:#0b0b0b;
  padding:13px;margin:14px 0 0;font-size:17px;
  box-shadow:inset 0 0 22px rgba(255,106,0,.16);
}

/* ---------- MENU OF SACRIFICE ---------- */
.menu-board{display:grid;grid-template-columns:1fr;gap:16px}
.panel{
  position:relative;
  background:linear-gradient(180deg,#111 0%,#050505 100%);
  padding:14px;
  text-align:center;
  box-shadow:inset 0 0 30px rgba(255,106,0,.20), 0 0 0 1px #000;
}
.panel-banner{
  height:92px;margin:-14px -14px 12px;
  width:calc(100% + 28px);
  border-bottom:3px solid var(--orange-dk);
}
.panel-title{
  font-size:34px;margin:0 0 10px;letter-spacing:2px;
  display:block;
}
.panel p{margin:0;text-align:left;font-size:17px}
.panel-note{margin-top:10px !important;color:var(--bone-dim);font-size:16px !important}
.torch-orn{display:none;position:absolute;height:56px;z-index:2;pointer-events:none}
.orn-tl{top:-14px;left:-14px}
.orn-tr{top:-14px;right:-14px;transform:scaleX(-1)}

/* bar-menu cocktail list */
.menu-list{list-style:none;margin:6px 0 0;padding:0;text-align:left}
.menu-list li{
  display:flex;align-items:baseline;gap:0;
  font-family:var(--mono);font-size:16px;color:var(--bone);
  padding:6px 0;
}
.mi-name{flex:0 1 auto}
.mi-dots{flex:1 1 auto;border-bottom:2px dotted var(--orange);margin:0 8px;transform:translateY(-5px);min-width:18px}
.mi-price{flex:0 0 auto;color:var(--orange);font-weight:bold}

/* ---------- forms ---------- */
.form{background:#070707;padding:14px}
.fgrid{display:grid;grid-template-columns:1fr;gap:0}
.field{margin:0 0 14px}
.field label,.fs legend{
  display:block;font-family:var(--mono);font-weight:bold;font-size:15px;
  letter-spacing:1px;color:var(--orange);margin:0 0 5px;text-transform:uppercase;
}
.req{color:var(--red)}
input[type=text],input[type=email],input[type=tel],select,textarea{
  width:100%;
  font-family:var(--mono);
  font-size:17px;
  padding:12px 10px;
  min-height:48px;
  color:#0d0d0d;
  background:#eae7e0;
  border:3px inset #a9a9a9;
  border-radius:0;
}
textarea{min-height:96px;line-height:1.4}
select{appearance:none;background-image:linear-gradient(180deg,#f6f4ef,#d5d2ca)}
input:focus,select:focus,textarea:focus{background:#fffdf8}

.fs{border:3px solid #2c2c2c;margin:0 0 14px;padding:10px}
.opts{display:grid;gap:2px}
.opt{
  display:flex;align-items:center;gap:10px;
  min-height:46px;padding:6px 4px;cursor:pointer;
  font-size:17px;
}
.opt input{width:22px;height:22px;min-height:22px;flex:0 0 auto;accent-color:var(--orange)}
.hint{font-size:16px;color:var(--bone-dim);margin:0 0 12px}
.err{
  font-family:var(--mono);font-size:16px;color:#1a0000;background:#ff8f7f;
  border:3px outset var(--red);padding:10px;margin:0 0 12px;
}
.ok{font-family:var(--mono);font-size:16px;color:var(--orange);margin:10px 0 0}
.wire-note{
  font-family:var(--mono);font-size:15px;color:var(--orange-lt);background:#1a0800;
  border:3px solid var(--orange-hot);padding:9px 10px;
}
.hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}

.already{background:#0d0d0d;padding:12px;margin:0 0 14px}
.already p{margin:0 0 6px}
.already p:last-child{margin:0}

.youre-in{background:#0a0a0a;padding:16px;text-align:center;margin-top:14px}
.youre-in .chrome{margin:0 0 10px}
.party{display:flex;justify-content:center;gap:10px;flex-wrap:wrap;margin:0 0 10px}

/* ---------- snack board ---------- */
.board{margin:0 0 14px}
.loading{font-family:var(--mono);color:var(--bone-dim)}
.board-row{
  border:3px solid var(--chrome-lo);
  background:#0b0b0b;
  margin:0 0 8px;
  padding:10px 12px;
}
.board-row.host{background:#160800;border-color:var(--orange-dk)}
.board-item{
  font-family:var(--display);font-size:20px;letter-spacing:1px;
  color:var(--orange);text-transform:uppercase;
  display:flex;justify-content:space-between;gap:10px;align-items:baseline;
}
.board-count{font-family:var(--mono);font-size:14px;color:var(--bone-dim);letter-spacing:0}
.board-names{margin:6px 0 0;font-size:16px;color:var(--bone)}
.board-names span{display:inline-block;margin:0 10px 2px 0}
.board-empty{font-size:16px;color:#8d8d8d;margin:6px 0 0}
.board-row.mine{border-color:var(--orange);box-shadow:0 0 0 2px rgba(255,106,0,.3) inset}

/* ---------- logo wall: white-on-black, uniform height ---------- */
.marquee{overflow:hidden;border:3px solid var(--chrome-lo);background:#000;padding:12px 0}
.marquee-track{display:flex;align-items:center;gap:28px;width:max-content;animation:slide 34s linear infinite}
.logo{
  display:flex;align-items:center;justify-content:center;
  height:56px;padding:0 6px;
  opacity:.85;
  transition:opacity .2s;
  position:relative;
  font-family:var(--display);font-size:18px;letter-spacing:1px;
  color:var(--bone);text-align:center;text-transform:uppercase;
  white-space:nowrap;
}
.logo img{height:56px;width:auto;max-width:220px;object-fit:contain}
.marquee:hover .marquee-track,.marquee:focus-within .marquee-track{animation-play-state:paused}
.logo:hover,.logo:focus{opacity:1}
.rip{
  position:absolute;top:-6px;right:-10px;
  font-family:var(--mono);font-size:11px;font-weight:bold;letter-spacing:1px;
  color:#fff;background:var(--red);border:1px solid #000;padding:1px 4px;
}

/* ---------- merch ---------- */
.merch-strip{display:grid;grid-template-columns:repeat(2,1fr);gap:12px}
.merch{
  display:block;text-decoration:none;color:var(--bone);
  border:3px solid var(--chrome-lo);background:#0a0a0a;padding:8px;
}
.merch:visited{color:var(--bone)}
.merch:hover{border-color:var(--orange)}
.merch .shot{
  aspect-ratio:1/1;width:100%;
  background:repeating-linear-gradient(45deg,#1a1a1a 0 12px,#0d0d0d 12px 24px);
  border:2px solid #262626;
  display:flex;align-items:center;justify-content:center;
  overflow:hidden;
}
.merch .shot img{width:100%;height:100%;object-fit:cover}
.merch .shot span{font-family:var(--mono);font-size:13px;color:var(--orange);padding:8px;text-align:center}
.merch b{display:block;font-size:15px;color:var(--bone);margin-top:8px;line-height:1.3}

/* ---------- afterparty + photo cards ---------- */
.spot-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:14px}
.spot{
  display:block;text-decoration:none;color:var(--bone);
  border:3px solid var(--chrome-lo);background:#0a0a0a;padding:8px;
  box-shadow:inset 0 0 20px rgba(255,106,0,.10);
}
.spot:visited{color:var(--bone)}
.spot:hover,.spot:focus{border-color:var(--orange);box-shadow:inset 0 0 22px rgba(255,106,0,.24)}
.spot-shot{
  display:flex;align-items:center;justify-content:center;
  aspect-ratio:4/3;width:100%;overflow:hidden;
  background:repeating-linear-gradient(45deg,#1a0d05 0 12px,#0b0705 12px 24px);
  border:2px solid #2a2a2a;
}
.spot-shot img{width:100%;height:100%;object-fit:cover}
.shot-name{
  font-family:var(--display);font-size:20px;letter-spacing:1px;
  color:var(--orange);text-align:center;padding:8px;text-transform:uppercase;
}
.spot b{display:block;font-family:var(--display);font-size:19px;letter-spacing:1px;color:var(--bone);margin-top:8px}
.spot-go{display:block;font-family:var(--mono);font-size:14px;color:var(--orange)}

/* ---------- crew photos (mobile row / desktop gutters) ---------- */
.crew-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:14px}
.photo-frame{margin:0}
.pf-shot{
  display:flex;align-items:center;justify-content:center;
  aspect-ratio:1/1;width:100%;overflow:hidden;
  background:repeating-linear-gradient(45deg,#1a0d05 0 12px,#0b0705 12px 24px);
  border:3px solid var(--chrome-2);
  border-image:var(--chrome-edge) 1;
}
.pf-shot img{width:100%;height:100%;object-fit:cover}
.photo-frame figcaption{
  font-family:var(--display);font-size:19px;letter-spacing:2px;
  color:var(--orange);text-align:center;margin-top:6px;text-transform:uppercase;
}

/* ---------- fixed rails + gutters (desktop only) ---------- */
.rail{display:none;position:fixed;bottom:0;z-index:0;pointer-events:none;
  width:clamp(90px,calc((100vw - 720px)/2),180px);height:58vh;
  background:linear-gradient(0deg,rgba(255,60,0,.30) 0%,rgba(255,106,0,.12) 45%,rgba(0,0,0,0) 100%);
}
.rail-l{left:0}
.rail-r{right:0}
.rail-art{width:100%;height:100%;opacity:.9}
.rail-r .rail-art{transform:scaleX(-1)}

.gutter{display:none;position:fixed;top:0;height:100vh;z-index:1;
  width:calc((100vw - 776px)/2);
  flex-direction:column;align-items:center;justify-content:space-around;
  padding:24px 8px;pointer-events:none;
}
.gutter-l{left:0}
.gutter-r{right:0}
.gutter .photo-frame{width:min(170px,100%);pointer-events:auto}
.gutter-sprite{height:88px}

/* ---------- footer ---------- */
.foot{text-align:center}
.footlinks{display:flex;flex-wrap:wrap;justify-content:center;gap:8px 18px;font-family:var(--mono);font-size:16px}
.footlinks a{min-height:44px;display:inline-flex;align-items:center}
.counter{font-family:var(--mono);font-size:16px;color:var(--bone-dim);letter-spacing:1px}
#hitCounter{background:#000;border:2px solid var(--orange-dk);padding:2px 6px;color:var(--orange)}
.badge{
  display:inline-block;font-family:var(--mono);font-size:14px;color:var(--bone-dim);
  background:#080808;padding:8px 10px;
}
.ring{font-family:var(--mono);font-size:16px}
.made{font-size:15px;color:#7d7d7d;margin:6px 0 0}

.new-tag{
  font-family:var(--mono);font-size:14px;color:#1a0700;background:var(--orange);
  border:2px outset var(--chrome-3);padding:2px 6px;vertical-align:middle;
  text-shadow:none;
}

/* ============================================================
   >= 768px
   ============================================================ */
@media (min-width:768px){
  body{font-size:18px}
  .wrap{padding:0 20px 60px}
  .sec{padding:26px 24px;margin:24px 0}
  .head{font-size:44px}
  h1.chrome .l1{font-size:38px}
  h1.chrome .l2{font-size:88px}
  h1.chrome .l3{font-size:34px}
  .sprite-mark{display:block;height:96px}

  .sprite-flamebar{height:150px}

  .hero-grid{
    display:grid;grid-template-columns:260px 1fr;gap:22px;align-items:center;
    border:3px solid var(--chrome-lo);padding:16px;background:#050505;
  }
  .hero-sprite{margin:0}
  .sprite-hero{height:190px;width:190px}
  .torch{height:80px}
  .sprite-flank{display:block;height:44px}
  .sprite-new{height:52px}
  .deets{max-width:none}
  .deet{grid-template-columns:130px 1fr;padding:12px}

  .cols{display:grid;grid-template-columns:1fr 1fr;gap:0}
  .cols p{margin:0;padding:14px 18px;border:2px solid #232323;background:#070707}
  .menu-board{grid-template-columns:repeat(3,1fr);gap:20px}
  .torch-orn{display:block}
  .panel{padding:18px 14px}
  .panel-banner{margin:-18px -14px 14px;width:calc(100% + 28px);height:110px}
  .fgrid{grid-template-columns:1fr 1fr;gap:0 18px}
  .opts{grid-template-columns:repeat(2,1fr);gap:2px 18px}
  .board{display:grid;grid-template-columns:1fr 1fr;gap:0 12px}
  .board-row{margin:0 0 12px}
  .merch-strip{grid-template-columns:repeat(4,1fr)}
  .sprite-card{height:100px;width:100px}
  .sprite-uc{height:120px;width:84px}
  .logo{height:72px}
  .logo img{height:72px;max-width:250px}
  .spot-shot{aspect-ratio:16/10}
  .spot b{font-size:22px}
}

/* ============================================================
   >= 1024px : center column + fixed gutters
   ============================================================ */
@media (min-width:1024px){
  .wrap{max-width:760px;padding:0 8px 60px}
  .rail{display:block}
  .gutter{display:flex}
  .crew-row{display:none}
  .sprite-flamebar{height:160px}
}

@media (min-width:1400px){
  .gutter-sprite{height:110px}
  .gutter .photo-frame{width:min(210px,100%)}
}

/* ============================================================
   accessibility: kill every moving thing
   ============================================================ */
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{
    animation:none !important;
    transition:none !important;
  }
  .ticker-track{min-width:0}
  .marquee-track{flex-wrap:wrap;width:auto}
  .marquee{overflow:visible}
}