/* ==========================================================================
   NFL STREET REBORN — home page
   A recreation of the original Elementor home page, hand-written.

   Everything here is prefixed .hm- and scoped to this file, which is loaded
   ONLY by index.php. The rest of the site keeps site.css untouched. If this
   look wins, the tokens below move into site.css and the .hm- prefixes come
   off; if it does not, deleting this file and the one <link> reverts it.

   Tokens are the old Elementor kit's, read out of
   wp-content/uploads/elementor/css/post-6.css:
     primary  #E3262A    secondary #FFFFFF
     text     #E7EDF6    accent    #0B0F14
   Display font is "REBORN MARKER", which was Permanent Marker all along.
   Body font is Cutive. Both now self-hosted next to Archivo.
   ========================================================================== */

@font-face{font-family:'Reborn Marker';src:url('/assets/fonts/permanent-marker-latin-400-normal.woff2') format('woff2');font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:'Cutive';src:url('/assets/fonts/cutive-latin-400-normal.woff2') format('woff2');font-weight:400;font-style:normal;font-display:swap}

.hm{
  --hm-red:    #E3262A;
  --hm-red-hi: #ff3b3f;
  --hm-red-lo: #BD0507;
  --hm-ink:    #0B0F14;
  --hm-ink-2:  #101620;
  --hm-text:   #E7EDF6;
  --hm-dim:    #9aa4b2;
  --hm-rule:   rgba(231,237,246,.14);

  --hm-marker: 'Reborn Marker','Permanent Marker',cursive;
  --hm-body:   'Cutive','Courier New',Courier,monospace;

  background:var(--hm-ink);
  color:var(--hm-text);
  font-family:var(--hm-body);
}
.hm p{font-family:var(--hm-body);line-height:1.7}
.hm h1,.hm h2,.hm h3{
  font-family:var(--hm-marker);
  font-weight:400;
  text-transform:none;      /* the marker face carries it; caps look shouty */
  letter-spacing:0;
  transform:none;           /* no skew here — that's the Archivo Black trick */
  line-height:1.06;
}
/* width:100% matters — as a grid item, `margin:0 auto` alone makes this box
   shrink to its content instead of filling the column. */
.hm__wrap{width:100%;max-width:1140px;margin:0 auto;padding:0 22px}

/* ------------------------------------------------------------------ buttons */

.hm-btn{
  display:inline-flex;align-items:center;gap:9px;
  font-family:var(--hm-marker);font-size:clamp(19px,2.4vw,30px);line-height:1;
  padding:.55em 1.1em .62em;
  background:var(--hm-red);color:#fff;border:0;border-radius:4px;
  text-decoration:none;cursor:pointer;
  transition:background .15s ease,transform .15s ease;
}
.hm-btn:hover{background:var(--hm-red-hi);color:#fff;text-decoration:none;transform:translateY(-1px)}
.hm-btn--ghost{background:transparent;box-shadow:inset 0 0 0 2px var(--hm-red);color:#fff}
.hm-btn--ghost:hover{background:var(--hm-red)}
.hm-btn--sm{font-family:var(--hm-body);font-size:14px;letter-spacing:.04em;padding:.7em 1.3em}

/* --------------------------------------------------------------------- hero
   The original: a 100vh section with the gameplay shot as a cover background
   and a 95deg black-to-transparent wash across it, copy stacked on the left.
   Same idea, without Elementor's negative margins. */

.hm-hero{
  position:relative;isolation:isolate;
  background:var(--hm-ink);   /* shows through where the shifted photo does not reach */
  min-height:min(100svh,880px);
  display:grid;align-items:center;
  padding:clamp(40px,6vw,82px) 0;
  border-bottom:1px solid var(--hm-rule);
  overflow:hidden;
}
/* The <picture> is taken out of flow too, or it claims a grid row of its own
   and knocks the vertical centring off. */
.hm-hero > picture{position:absolute;inset:0;z-index:-2;display:block}
.hm-hero__bg{
  /* hero-wallrun.jpg: the player runs the wall from about 33% to 78% across and
     fills the frame top to bottom, so there is nothing to crop vertically —
     zooming would take his head or his foot off, and object-position only has
     ~120px of slack to play with at this size.

     So he is pushed clear of the copy with a plain translate instead: the whole
     frame slides right, the brick wall on the far right slides off, and the
     strip it uncovers on the left sits under the darkest part of the wash where
     it reads as background. Tune with one number. */
  width:100%;height:100%;object-fit:cover;object-position:50% 50%;
  transform:translateX(15%);
}
.hm-hero::before{
  content:"";position:absolute;inset:0;z-index:-1;
  background:linear-gradient(95deg,rgba(6,4,12,.96) 0%,rgba(6,4,12,.91) 30%,rgba(6,4,12,.66) 45%,rgba(6,4,12,.14) 62%,rgba(6,4,12,0) 74%);
}
/* On a phone there is no room for the copy AND the shot in the same space: any
   wash dark enough to read over buries the player. So the hero stacks instead —
   the photo gets its own band at the top, fading into the page, and the copy
   sits below it on solid ground. */
@media (max-width:760px){
  .hm-hero{
    display:block;
    min-height:0;
    padding:0 0 clamp(30px,7vw,46px);
    background:var(--hm-ink);
  }
  .hm-hero::before{display:none}          /* the full-bleed wash is not wanted here */
  .hm-hero > picture{
    position:relative;display:block;
    height:min(52svh,430px);
  }
  .hm-hero > picture::after{              /* fade the photo into the page */
    content:"";position:absolute;inset:auto 0 -1px 0;height:42%;
    background:linear-gradient(180deg,rgba(11,15,20,0),var(--hm-ink));
  }
  .hm-hero__bg{height:100%;object-position:50% 22%;transform:none}
  .hm-hero .hm__wrap{position:relative;z-index:1;margin-top:-18px}
  .hm-hero__logo{max-width:290px}
  .hm-hero h1,.hm-hero__lede{text-shadow:none}
}

/* Copy sits on the LEFT, because the wall-runner occupies the right two thirds
   of the shot. Narrower than before on purpose: the column has to stop before
   his trailing arm, around 40% of the viewport. */
.hm-hero__in{max-width:520px}
@media (max-width:760px){.hm-hero__in{max-width:none}}
.hm-hero__logo{
  display:block;width:100%;max-width:380px;height:auto;margin:0 0 16px;
  filter:drop-shadow(0 8px 30px rgba(0,0,0,.75));
}
.hm-hero h1{
  font-size:clamp(26px,4.4vw,44px);
  margin:0 0 14px;
  text-shadow:0 2px 18px rgba(0,0,0,.8);
}
.hm-hero__lede{
  font-size:clamp(15px,1.6vw,18px);color:var(--hm-text);
  max-width:46ch;margin:0 0 22px;
  text-shadow:0 1px 12px rgba(0,0,0,.9);
}
.hm-hero__actions{display:flex;flex-wrap:wrap;gap:12px;align-items:center}
.hm-hero__note{margin:18px 0 0;font-size:13px;color:var(--hm-dim)}

/* ------------------------------------------------------------------- clock */

.hm-clock{display:flex;gap:10px;flex-wrap:wrap;margin:0 0 20px}
.hm-clock__u{
  min-width:78px;padding:10px 10px 8px;text-align:center;
  background:rgba(11,15,20,.72);border:1px solid var(--hm-rule);border-radius:4px;
  backdrop-filter:blur(2px);
}
.hm-clock__u b{
  display:block;font-family:var(--hm-marker);font-size:30px;line-height:1;
  font-variant-numeric:tabular-nums;
}
.hm-clock__u span{
  display:block;margin-top:5px;font-size:10px;letter-spacing:.16em;
  text-transform:uppercase;color:var(--hm-dim);
}

/* ---------------------------------------------------------------- sections */

.hm-sec{padding:clamp(52px,7vw,92px) 0}
.hm-sec--ink{background:var(--hm-ink)}
.hm-sec--ink2{background:var(--hm-ink-2);border-top:1px solid var(--hm-rule);border-bottom:1px solid var(--hm-rule)}
.hm-sec--bleed{background:linear-gradient(180deg,var(--hm-ink) 78%,var(--hm-red-lo) 100%)}

.hm-sec__title{
  text-align:center;margin:0 0 10px;
  font-size:clamp(34px,6.4vw,74px);
  color:#fff;
}
.hm-sec__title--mid{font-size:clamp(26px,4.6vw,56px)}
.hm-sec__sub{
  text-align:center;max-width:60ch;margin:0 auto;
  color:var(--hm-dim);font-size:clamp(15px,1.7vw,20px);
}

/* ------------------------------------------------------------ feature cards
   Image + heading + button columns. The original made these a carousel on
   mobile; a stacked grid does the same job with no JavaScript.

   Two across, not four: at the 1140px wrap, four columns give each card a
   273px-wide screenshot, which is too small to read. 2x2 keeps the images big. */

.hm-cards{
  display:grid;gap:26px;margin-top:44px;
  grid-template-columns:1fr;
}
@media (min-width:760px){.hm-cards{grid-template-columns:repeat(2,1fr);gap:24px}}

.hm-card{
  display:flex;flex-direction:column;
  background:var(--hm-ink-2);
  border:1px solid var(--hm-rule);border-radius:5px;
  overflow:hidden;
}
/* height:auto is required — the width/height attributes on the <img> are a
   presentational hint, and a specified height makes aspect-ratio a no-op. */
.hm-card img{display:block;width:100%;height:auto;aspect-ratio:16/9;object-fit:cover}
.hm-card__body{padding:20px 20px 24px;display:flex;flex-direction:column;flex:1}
.hm-card h3{font-size:clamp(22px,2.4vw,28px);margin:0 0 8px;color:#fff}
.hm-card p{font-size:14px;color:var(--hm-dim);margin:0 0 20px}
.hm-card .hm-btn{align-self:flex-start;margin-top:auto}

/* --------------------------------------------------------------- launcher */

.hm-split{display:grid;gap:32px;align-items:center;grid-template-columns:1fr}
@media (min-width:900px){.hm-split{grid-template-columns:minmax(0,1.15fr) minmax(0,1fr);gap:52px}}
.hm-split img{
  display:block;width:100%;height:auto;border-radius:6px;
  border:1px solid var(--hm-rule);box-shadow:0 30px 70px rgba(0,0,0,.6);
}
.hm-split h2{font-size:clamp(28px,4.2vw,50px);margin:0 0 14px;color:#fff}
.hm-split p{color:var(--hm-dim);font-size:16px;max-width:46ch}
.hm-split ul{list-style:none;margin:0 0 24px;padding:0}
.hm-split li{
  position:relative;padding-left:20px;margin-bottom:9px;
  color:var(--hm-text);font-size:15px;
}
.hm-split li::before{
  content:"";position:absolute;left:0;top:.62em;
  width:8px;height:8px;background:var(--hm-red);border-radius:1px;
}

/* ------------------------------------------------------------------- strip
   The original used a media carousel. A scroll-snap rail keeps the same
   swipe on a phone and shows more of the set on a desktop, still no JS. */

.hm-strip{
  display:grid;grid-auto-flow:column;grid-auto-columns:min(84%,560px);
  gap:16px;margin-top:44px;padding:0 22px 12px;
  overflow-x:auto;scroll-snap-type:x mandatory;
  scrollbar-width:thin;scrollbar-color:var(--hm-red) transparent;
}
.hm-strip figure{margin:0;scroll-snap-align:center}
.hm-strip img{
  display:block;width:100%;height:auto;aspect-ratio:16/9;object-fit:cover;
  border-radius:5px;border:1px solid var(--hm-rule);
}
.hm-strip::-webkit-scrollbar{height:8px}
.hm-strip::-webkit-scrollbar-thumb{background:var(--hm-red);border-radius:4px}

/* --------------------------------------------------------------------- FAQ */

.hm-qa{max-width:840px;margin:44px auto 0;border-top:1px solid var(--hm-rule)}
.hm-qa details{border-bottom:1px solid var(--hm-rule)}
.hm-qa summary{
  list-style:none;cursor:pointer;position:relative;
  padding:18px 40px 18px 0;
  font-family:var(--hm-body);font-size:clamp(15px,1.7vw,18px);color:#fff;
}
.hm-qa summary::-webkit-details-marker{display:none}
.hm-qa summary::after{
  content:"+";position:absolute;right:4px;top:50%;transform:translateY(-50%);
  font-family:var(--hm-marker);font-size:26px;line-height:1;color:var(--hm-red);
}
.hm-qa details[open] summary::after{content:"\2013"}
.hm-qa summary:hover{color:var(--hm-red)}
.hm-qa__a{padding:0 0 22px;color:var(--hm-dim);font-size:15px}
.hm-qa__a p:last-child{margin-bottom:0}
.hm-qa__a a{color:#7fb7ff}
.hm-qa__todo{
  border:1px dashed var(--hm-red);background:rgba(227,38,42,.07);
  border-radius:4px;padding:14px 16px;color:var(--hm-text);font-size:14px;
}
.hm-qa__todo b{
  display:block;margin-bottom:5px;color:var(--hm-red-hi);
  font-size:11px;letter-spacing:.16em;text-transform:uppercase;
}
.hm-qa__more{text-align:center;margin-top:36px}

/* ------------------------------------------------------------ closing band */

.hm-band{
  position:relative;isolation:isolate;
  min-height:clamp(521px,46vw,660px);     /* 521px was the original; the Lamar
                                             art needs more room than the old 16:9 one */
  display:grid;align-items:center;
  padding:clamp(52px,8vw,90px) 0;
  border-top:1px solid var(--hm-rule);
  overflow:hidden;
}
.hm-band__bg{
  position:absolute;inset:0;z-index:-2;
  width:100%;height:100%;object-fit:cover;object-position:62% 6%;
}
.hm-band::before{
  content:"";position:absolute;inset:0;z-index:-1;
  background:linear-gradient(90deg,rgba(4,6,9,.96) 0%,rgba(4,6,9,.90) 30%,rgba(4,6,9,.52) 58%,rgba(4,6,9,.30) 100%);
}
.hm-band__in{max-width:620px}
.hm-band h2{font-size:clamp(28px,4.6vw,54px);margin:0 0 14px;color:#fff;
            text-shadow:0 2px 18px rgba(0,0,0,.8)}
.hm-band p{color:var(--hm-text);font-size:16px;max-width:39ch;
           text-shadow:0 1px 12px rgba(0,0,0,.85)}
.hm-band__actions{display:flex;flex-wrap:wrap;gap:12px;margin-top:26px}

/* ------------------------------------------------------------------- free */

.hm-free{
  border-left:4px solid var(--hm-red);padding:4px 0 4px 18px;
  max-width:62ch;color:var(--hm-dim);font-size:15px;
}
.hm-free strong{
  display:block;font-family:var(--hm-marker);font-size:22px;
  color:#fff;margin-bottom:6px;
}

@media (prefers-reduced-motion:reduce){
  .hm-btn,.hm-btn:hover{transition:none;transform:none}
}