/* ============================================================
   UTAH RINK RAT — rink + firehouse
   ============================================================ */

:root{
  --ink:#0b0c0e;            /* near-black rink */
  --ink-2:#121417;          /* raised surface */
  --ink-3:#191c20;          /* card */
  --line:#2a2f36;           /* hairline */
  --ice:#f3f1ec;            /* off-white */
  --ice-dim:#b9bdc4;
  --ice-faint:#8b9199;
  --red:#d8262c;            /* fire engine */
  --red-hot:#f0383c;
  --slate:#5b7796;          /* mountain slate */
  --slate-deep:#2f4056;

  --display:"Anton",'Arial Narrow',sans-serif;
  --label:"Oswald",'Arial Narrow',sans-serif;
  --body:"Inter",system-ui,-apple-system,sans-serif;

  --wrap:1200px;
  --gut:clamp(1.15rem,4vw,2.5rem);
  --sec:clamp(3.75rem,9vw,7rem);
  --radius:3px;
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;scroll-padding-top:70px}
body{
  margin:0;background:var(--ink);color:var(--ice);
  font-family:var(--body);font-size:16px;line-height:1.65;
  -webkit-font-smoothing:antialiased;overflow-x:hidden;
}
img{max-width:100%;height:auto;display:block}
a{color:inherit}
h1,h2,h3,h4{margin:0;font-weight:400;text-transform:uppercase;line-height:.94;letter-spacing:.005em}
h1,h2,h3{font-family:var(--display)}
p{margin:0}
ul{margin:0;padding:0;list-style:none}

/* grain + hash motif -------------------------------------- */
body::before{
  content:"";position:fixed;inset:0;z-index:900;pointer-events:none;opacity:.05;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)'/%3E%3C/svg%3E");
}
.scrape{
  position:absolute;inset:0;pointer-events:none;opacity:.05;
  background-image:repeating-linear-gradient(115deg,var(--ice) 0 1px,transparent 1px 14px);
  mask-image:linear-gradient(180deg,transparent,#000 40%,transparent);
  -webkit-mask-image:linear-gradient(180deg,transparent,#000 40%,transparent);
}

/* layout -------------------------------------------------- */
.wrap{width:100%;max-width:var(--wrap);margin:0 auto;padding:0 var(--gut)}
section{position:relative}
.band{padding:var(--sec) 0;border-top:1px solid var(--line)}
.band--alt{background:var(--ink-2)}

.eyebrow{
  font-family:var(--label);font-weight:600;text-transform:uppercase;
  letter-spacing:.22em;font-size:.7rem;color:var(--red);margin:0 0 1rem;
  display:flex;align-items:center;gap:.7rem;
}
.eyebrow::after{content:"";height:1px;flex:1;background:var(--line);max-width:120px}
.eyebrow--slate{color:var(--slate)}

.h-sec{font-size:clamp(2.1rem,7.4vw,4.1rem)}
.lede{color:var(--ice-dim);font-size:clamp(1rem,2.4vw,1.15rem);max-width:56ch;margin-top:1.1rem}
.sec-head{margin-bottom:clamp(2rem,5vw,3.25rem)}

/* nav ------------------------------------------------------ */
.nav{
  position:sticky;top:0;z-index:800;background:rgba(11,12,14,.9);
  backdrop-filter:blur(10px);border-bottom:1px solid var(--line);
}
.nav__in{display:flex;align-items:center;gap:1rem;height:64px}
.brand{display:flex;align-items:center;gap:.6rem;text-decoration:none;flex:0 0 auto}
.brand svg{width:30px;height:30px;color:var(--red);flex:0 0 auto}
.brand__txt{font-family:var(--display);font-size:1.05rem;line-height:1;letter-spacing:.01em}
.brand__txt small{display:block;font-family:var(--label);font-size:.55rem;font-weight:500;
  letter-spacing:.28em;color:var(--ice-faint);margin-top:.22rem}

.nav__links{display:none;margin-left:auto;align-items:center;gap:1.6rem}
.nav__links a{
  font-family:var(--label);font-weight:500;text-transform:uppercase;letter-spacing:.14em;
  font-size:.74rem;text-decoration:none;color:var(--ice-dim);padding:.35rem 0;
  border-bottom:2px solid transparent;transition:color .18s,border-color .18s;
}
.nav__links a:hover,.nav__links a:focus-visible{color:var(--ice);border-bottom-color:var(--red)}
.nav__links a.is-cta{color:var(--ice);border-bottom-color:var(--red)}
.nav__toggle{
  margin-left:auto;background:none;border:1px solid var(--line);color:var(--ice);
  font-family:var(--label);letter-spacing:.16em;font-size:.7rem;text-transform:uppercase;
  padding:.5rem .75rem;border-radius:var(--radius);cursor:pointer;
}
.nav__drawer{display:none;border-top:1px solid var(--line);padding-top:.5rem;padding-bottom:1rem}
.nav__drawer.is-open{display:block}
.nav__drawer a{
  display:block;padding:.8rem 0;text-decoration:none;border-bottom:1px solid var(--line);
  font-family:var(--label);text-transform:uppercase;letter-spacing:.16em;font-size:.85rem;color:var(--ice-dim);
}
.nav__drawer a:last-child{border-bottom:0}
@media(min-width:900px){
  .nav__links{display:flex}
  .nav__toggle,.nav__drawer{display:none!important}
}

/* buttons -------------------------------------------------- */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:.55rem;
  font-family:var(--label);font-weight:600;text-transform:uppercase;letter-spacing:.13em;
  font-size:.82rem;padding:.95rem 1.5rem;text-decoration:none;border-radius:var(--radius);
  border:1px solid transparent;cursor:pointer;transition:transform .15s,background .18s,color .18s,border-color .18s;
}
.btn--primary{background:var(--red);color:#fff}
.btn--primary:hover{background:var(--red-hot);transform:translateY(-2px)}
.btn--ghost{border-color:#3b424b;color:var(--ice);background:transparent}
.btn--ghost:hover{border-color:var(--ice);transform:translateY(-2px)}
.btn--block{width:100%}
.btn-row{display:flex;flex-wrap:wrap;gap:.75rem;margin-top:1.9rem}
:where(a,button,input,summary):focus-visible{outline:2px solid var(--slate);outline-offset:3px}

.micro{font-family:var(--label);font-size:.72rem;letter-spacing:.16em;text-transform:uppercase;color:var(--ice-faint)}

/* hero ----------------------------------------------------- */
.hero{position:relative;overflow:hidden;border-bottom:1px solid var(--line)}
.hero__bg{position:absolute;inset:0}
.hero__bg img{width:100%;height:100%;object-fit:cover;opacity:.62;filter:grayscale(.25) contrast(1.08)}
.hero__bg::after{
  content:"";position:absolute;inset:0;
  background:linear-gradient(180deg,rgba(11,12,14,.5),rgba(11,12,14,.78) 60%,var(--ink) 100%),
             radial-gradient(70% 60% at 78% 30%,rgba(91,119,150,.22),transparent 70%);
}
.hero__in{position:relative;padding-top:clamp(3rem,9vw,5.5rem);padding-bottom:clamp(3rem,7vw,4.5rem);
  display:grid;gap:clamp(2.5rem,6vw,3.5rem)}
@media(min-width:960px){.hero__in{grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);align-items:center}}

.hero h1{font-size:clamp(3.4rem,15.5vw,8.2rem);letter-spacing:-.005em}
.hero h1 .l2{display:block;color:var(--red)}
.hero__sub{color:var(--ice-dim);font-size:clamp(1.05rem,2.9vw,1.3rem);max-width:36ch;margin-top:1.35rem;line-height:1.5}
.hero__rule{height:4px;width:88px;background:var(--red);margin:1.75rem 0 0}
.hero__premiere{margin-top:1.15rem}
.hero__premiere strong{color:var(--ice);font-weight:600}

/* emblem (hero mark) */
.emblem{
  position:relative;width:100%;max-width:530px;margin:0 auto;
  display:flex;flex-direction:column;align-items:center;gap:1.3rem;
}
.emblem__art{position:relative;width:100%;isolation:isolate}
.emblem__art::before{
  content:"";position:absolute;left:50%;top:52%;transform:translate(-50%,-50%);
  width:92%;aspect-ratio:1/1;border-radius:50%;z-index:0;
  background:radial-gradient(closest-side,
    rgba(41,132,226,.30),rgba(41,132,226,.10) 52%,rgba(41,132,226,0) 74%);
}
.emblem__art img{
  position:relative;z-index:1;display:block;width:100%;height:auto;
  filter:drop-shadow(0 22px 38px rgba(0,0,0,.72));
}
.emblem__cap{
  background:var(--ink);border:1px solid var(--line);color:var(--ice-faint);
  font-family:var(--label);font-size:.6rem;letter-spacing:.24em;text-transform:uppercase;
  padding:.32rem .7rem;white-space:nowrap;
  display:inline-flex;align-items:center;gap:.45rem;
}
/* The Flash Point mark is chrome on black - it only sits on dark surfaces. */
.emblem__cap img{display:block;width:auto;height:1.15rem;flex:none}
.foot__fpmg{display:flex;align-items:center;gap:.6rem;margin-top:.15rem}
.foot__fpmg img{display:block;width:auto;height:2.1rem;flex:none}
.foot__fpmg span{color:var(--ice-faint);font-size:.9rem;line-height:1.25}
@media(prefers-reduced-motion:no-preference){
  .emblem__art img{transition:transform .5s cubic-bezier(.2,.7,.2,1)}
  .emblem:hover .emblem__art img{transform:translateY(-5px)}
}

/* segment cards -------------------------------------------- */
.cards{display:grid;gap:1rem}
@media(min-width:620px){.cards{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(min-width:1000px){.cards{grid-template-columns:repeat(3,minmax(0,1fr))}}
.card{
  background:var(--ink-3);border:1px solid var(--line);border-top:3px solid var(--red);
  border-radius:var(--radius);padding:1.5rem 1.35rem 1.6rem;
  display:flex;flex-direction:column;gap:.7rem;transition:transform .18s,border-color .18s,background .18s;
}
.card:hover{transform:translateY(-3px);background:#1d2126;border-color:#3a4149}
.card__n{font-family:var(--label);font-size:.68rem;letter-spacing:.24em;color:var(--slate)}
.card h3{font-size:clamp(1.45rem,4.6vw,1.75rem)}
.card__meta{
  font-family:var(--label);font-size:.72rem;letter-spacing:.14em;text-transform:uppercase;
  color:var(--ice);border-top:1px solid var(--line);border-bottom:1px solid var(--line);
  padding:.5rem 0;display:flex;flex-wrap:wrap;gap:.4rem .6rem;align-items:center;
}
.tag-live{color:#fff;background:var(--red);padding:.1rem .42rem;font-size:.62rem;letter-spacing:.18em;border-radius:2px}
.card p{color:var(--ice-dim);font-size:.94rem}

/* schedule ------------------------------------------------- */
.sched{display:grid;gap:.6rem;border:1px solid var(--line);background:var(--ink-3);padding:.6rem;border-radius:var(--radius)}
@media(min-width:860px){.sched{grid-template-columns:repeat(5,minmax(0,1fr))}}
.sched__cell{
  display:flex;flex-direction:column;gap:.3rem;padding:.95rem 1rem;background:var(--ink-2);
  border-left:3px solid var(--slate-deep);align-items:flex-start;
}
.sched__cell--live{border-left-color:var(--red)}
.sched__day{font-family:var(--label);font-weight:600;font-size:.74rem;letter-spacing:.2em;color:var(--ice-faint);text-transform:uppercase}
.sched__show{font-family:var(--display);font-size:1.12rem;text-transform:uppercase;line-height:1.05}
.sched__time{font-family:var(--label);font-size:.68rem;letter-spacing:.14em;color:var(--slate);text-transform:uppercase;width:100%}
@media(min-width:860px){
  .sched__cell{flex-direction:column;align-items:flex-start;gap:.5rem;min-height:124px;justify-content:flex-start}
  .sched__show{font-size:1.22rem}
  .sched__time{margin-top:auto}
}
.sched__note{margin-top:1rem}

/* run board ------------------------------------------------ */
.split{display:grid;gap:clamp(2rem,5vw,3rem)}
@media(min-width:900px){.split{grid-template-columns:minmax(0,1fr) minmax(0,1fr);align-items:center}}
.ticket{
  border:1px solid var(--line);background:var(--ink-3);padding:clamp(1.4rem,4vw,2rem);
  border-radius:var(--radius);position:relative;
  background-image:linear-gradient(90deg,var(--red) 0 5px,transparent 5px);
}
.ticket__list{display:grid;gap:.65rem;margin-top:1.4rem}
.ticket__list li{display:flex;gap:.7rem;color:var(--ice-dim);font-size:.94rem;align-items:flex-start}
.ticket__list li::before{content:"";width:7px;height:7px;background:var(--red);flex:0 0 auto;margin-top:.55rem;transform:rotate(45deg)}

/* forms ---------------------------------------------------- */
.form{display:grid;gap:.7rem;margin-top:1.6rem;max-width:460px}
@media(min-width:520px){.form{grid-template-columns:minmax(0,1fr) auto}}
.form input{
  width:100%;background:var(--ink);border:1px solid #3b424b;color:var(--ice);
  padding:.9rem 1rem;font-family:var(--body);font-size:1rem;border-radius:var(--radius);
}
.form input::placeholder{color:var(--ice-faint)}
.form__note{grid-column:1/-1;margin-top:.2rem}
.form__ok{
  grid-column:1/-1;display:none;border:1px solid var(--red);border-left-width:3px;
  background:rgba(216,38,44,.1);padding:.8rem 1rem;font-size:.9rem;color:var(--ice);border-radius:var(--radius);
}
.form.is-done .form__ok{display:block}
.form.is-done input,.form.is-done button,.form.is-done label,.form.is-done .form__note{display:none}

/* about ---------------------------------------------------- */
.about__quote{
  font-size:clamp(1.1rem,3vw,1.4rem);line-height:1.55;color:var(--ice);
  border-left:3px solid var(--red);padding-left:clamp(1rem,3vw,1.6rem);
}
.about__quote p+p{margin-top:1rem}
.about__facts{display:grid;gap:.9rem;margin-top:2rem}
@media(min-width:560px){.about__facts{grid-template-columns:repeat(3,minmax(0,1fr));gap:1.3rem 1.4rem}}
.fact{border-top:1px solid var(--line);padding-top:.8rem}
.fact dt{font-family:var(--label);font-size:.66rem;letter-spacing:.2em;text-transform:uppercase;color:var(--slate)}
.fact dd{margin:.35rem 0 0;font-family:var(--display);font-size:1.15rem;text-transform:uppercase;line-height:1.1}
.about__img{border:1px solid var(--line);border-radius:var(--radius);overflow:hidden}
.about__img img{width:100%;filter:grayscale(.2) brightness(.85)}

/* platform links ------------------------------------------- */
.plats{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:.6rem}
@media(min-width:640px){.plats{grid-template-columns:repeat(4,minmax(0,1fr))}}
.plat{
  display:flex;align-items:center;gap:.6rem;padding:.95rem 1rem;text-decoration:none;
  border:1px solid var(--line);background:var(--ink-3);border-radius:var(--radius);
  font-family:var(--label);text-transform:uppercase;letter-spacing:.1em;font-size:.76rem;
  transition:border-color .18s,background .18s,transform .15s;color:var(--ice);
}
.plat:hover{border-color:var(--red);background:#1d2126;transform:translateY(-2px)}
.plat svg{width:17px;height:17px;flex:0 0 auto;color:var(--red)}
.plat--soon{opacity:.5;cursor:default;pointer-events:none}
.plat--soon svg{color:var(--slate)}
.plat__soon{margin-left:auto;font-size:.6rem;letter-spacing:.16em;color:var(--slate)}

/* sponsors: value points ----------------------------------- */
.value{display:grid;gap:1rem}
@media(min-width:720px){.value{grid-template-columns:repeat(2,minmax(0,1fr))}}
.value__item{border:1px solid var(--line);background:var(--ink-3);padding:1.4rem 1.3rem;border-radius:var(--radius)}
.value__item h3{font-size:1.3rem;margin-bottom:.55rem}
.value__item p{color:var(--ice-dim);font-size:.94rem}
.value__item span{font-family:var(--label);font-size:.68rem;letter-spacing:.22em;color:var(--slate);display:block;margin-bottom:.6rem}

/* sponsors: packages --------------------------------------- */
.pkgs{display:grid;gap:1rem}
@media(min-width:1040px){.pkgs{gap:0;border:1px solid var(--line);border-radius:var(--radius);overflow:hidden}}
.pkgs__head{display:none}
.pkg{
  border:1px solid var(--line);border-left:3px solid var(--slate-deep);background:var(--ink-3);
  border-radius:var(--radius);padding:1.35rem 1.25rem;display:grid;gap:.9rem;
}
.pkg--top{border-left-color:var(--red)}
@media(min-width:1040px){
  .pkg{border:0;border-top:1px solid var(--line);border-left:3px solid var(--slate-deep);border-radius:0;
    grid-template-columns:minmax(210px,1fr) 150px minmax(0,2.1fr);align-items:start;gap:1.5rem;padding:1.5rem}
  .pkg:first-of-type{border-top:0}
  .pkgs__head{display:grid;grid-template-columns:minmax(210px,1fr) 150px minmax(0,2.1fr);gap:1.5rem;
    padding:.85rem 1.5rem;background:var(--ink-2);border-bottom:1px solid var(--line);border-left:3px solid transparent}
  .pkgs__head{display:grid}
  .pkgs__head span{font-family:var(--label);font-size:.66rem;letter-spacing:.2em;text-transform:uppercase;color:var(--ice-faint)}
}
.pkg__name{font-family:var(--display);font-size:1.5rem;text-transform:uppercase;line-height:1}
.pkg__tier{font-family:var(--label);font-size:.64rem;letter-spacing:.22em;color:var(--slate);display:block;margin-bottom:.4rem}
.pkg__price{font-family:var(--display);font-size:1.7rem;color:var(--red);line-height:1;white-space:nowrap}
.pkg__price small{display:block;font-family:var(--label);font-size:.64rem;letter-spacing:.18em;color:var(--ice-faint);margin-top:.35rem}
.pkg__inc{display:grid;gap:.45rem}
.pkg__inc li{display:flex;gap:.6rem;color:var(--ice-dim);font-size:.92rem;align-items:flex-start}
.pkg__inc li::before{content:"";width:6px;height:6px;background:var(--slate);flex:0 0 auto;margin-top:.52rem;transform:rotate(45deg)}
.pkg--top .pkg__inc li::before{background:var(--red)}
.note-box{
  margin-top:1.25rem;border-left:3px solid var(--slate);background:var(--ink-2);
  padding:1rem 1.15rem;color:var(--ice-dim);font-size:.92rem;border-radius:var(--radius);
}
.note-box p+p{margin-top:.6rem}
.note-box strong{color:var(--ice)}

/* steps ---------------------------------------------------- */
.steps{display:grid;gap:1rem;counter-reset:s}
@media(min-width:760px){.steps{grid-template-columns:repeat(3,minmax(0,1fr))}}
.step{border-top:3px solid var(--red);background:var(--ink-3);padding:1.3rem 1.2rem;border-radius:var(--radius)}
.step__n{font-family:var(--display);font-size:2.1rem;color:var(--slate);line-height:1;display:block;margin-bottom:.5rem}
.step h3{font-size:1.2rem;margin-bottom:.4rem}
.step p{color:var(--ice-dim);font-size:.93rem}

/* contact -------------------------------------------------- */
.contact{border:1px solid var(--line);background:var(--ink-3);padding:clamp(1.5rem,5vw,2.5rem);border-radius:var(--radius)}
.contact__rows{display:grid;gap:.8rem;margin-top:1.5rem}
@media(min-width:700px){.contact__rows{grid-template-columns:repeat(2,minmax(0,1fr))}}
.contact__rows div{border-top:1px solid var(--line);padding-top:.7rem}
.contact__rows dt{font-family:var(--label);font-size:.64rem;letter-spacing:.2em;text-transform:uppercase;color:var(--slate)}
.contact__rows dd{margin:.3rem 0 0;font-size:1rem;word-break:break-word}
.contact__rows a{color:var(--ice);text-decoration:none;border-bottom:1px solid var(--red)}

/* footer --------------------------------------------------- */
.foot{border-top:1px solid var(--line);background:#08090a;padding:clamp(2.75rem,7vw,4rem) 0 2.25rem}
.foot__top{display:grid;gap:2rem}
@media(min-width:820px){.foot__top{grid-template-columns:minmax(0,1.2fr) minmax(0,1fr) minmax(0,1fr)}}
.foot__mark{display:flex;align-items:center;gap:.7rem;text-decoration:none}
.foot__mark svg{width:34px;height:34px;color:var(--red)}
.foot__mark .brand__txt{font-size:1.15rem}
.foot__top p{color:var(--ice-faint);font-size:.9rem;margin-top:.9rem;max-width:34ch}
.foot h4{font-family:var(--label);font-size:.68rem;letter-spacing:.22em;color:var(--ice);margin-bottom:.9rem}
.foot__links{display:grid;gap:.55rem}
.foot__links a{font-size:.92rem;color:var(--ice-dim);text-decoration:none}
.foot__links a:hover{color:var(--ice)}
.foot__bottom{margin-top:2.5rem;padding-top:1.5rem;border-top:1px solid var(--line);display:grid;gap:.9rem}
.disclaimer{color:var(--ice-faint);font-size:.79rem;line-height:1.6;max-width:75ch}
.foot__copy{font-family:var(--label);font-size:.7rem;letter-spacing:.16em;text-transform:uppercase;color:var(--ice-faint)}
.handle{color:var(--red);font-family:var(--label);letter-spacing:.14em;text-transform:uppercase;font-size:.8rem;white-space:nowrap}

/* motion --------------------------------------------------- */
.rise{opacity:0;transform:translateY(18px);transition:opacity .6s ease,transform .6s ease}
.rise.is-in{opacity:1;transform:none}
@media(prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .rise{opacity:1;transform:none;transition:none}
  .btn:hover,.card:hover,.plat:hover{transform:none}
}
.skip{position:absolute;left:-999px;top:0;background:var(--red);color:#fff;padding:.7rem 1rem;z-index:1000}
.skip:focus{left:.5rem;top:.5rem}