.page-home{
  --home-gap: clamp(12px, 1.6vw, 18px);
  --home-pad: clamp(44px, 6vw, 84px);
  color: var(--mist);
  background: var(--ink);
}
.page-home h1,
.page-home h2,
.page-home h3{
  font-family: var(--font-display);
  font-weight: 800;
  line-height: 1.05;
  letter-spacing: -.02em;
  color: var(--paper);
  margin: 0;
}
.page-home p{ margin: 0; }
.page-home ul,
.page-home ol{ margin: 0; padding: 0; list-style: none; }

/* ---------- hero ---------- */
.page-home .home-hero{
  position: relative;
  overflow: hidden;
  border-bottom: 1px solid var(--line);
  background:
    radial-gradient(115% 75% at 84% 4%, rgba(201,255,61,.17), transparent 60%),
    radial-gradient(85% 60% at 98% 96%, rgba(255,122,60,.15), transparent 62%),
    linear-gradient(158deg, #0A0D0C 0%, #12231D 58%, #0A0D0C 100%);
}
.page-home .home-hero::before{
  content: "";
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(90deg, rgba(168,180,174,.10) 1px, transparent 1px),
    linear-gradient(0deg, rgba(168,180,174,.06) 1px, transparent 1px);
  background-size: 92px 92px;
  -webkit-mask-image: linear-gradient(180deg, #000 0%, rgba(0,0,0,.22) 60%, transparent 88%);
  mask-image: linear-gradient(180deg, #000 0%, rgba(0,0,0,.22) 60%, transparent 88%);
  pointer-events: none;
}

.page-home .home-context{
  position: relative;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 10px;
  padding-top: clamp(18px, 3vw, 26px);
  font-size: .68rem;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--steel-dim);
}
.page-home .home-context i{
  display: inline-block;
  width: 5px;
  height: 5px;
  background: var(--lime);
}

.page-home .home-hero-inner{
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: clamp(28px, 4vw, 40px);
  padding-block: clamp(22px, 4vw, 40px) clamp(44px, 5vw, 68px);
}
.page-home .home-hero-copy{ min-width: 0; }

.page-home .home-title{
  margin-top: 14px;
  font-size: clamp(2.15rem, 7.2vw, 4.4rem);
}
.page-home .home-title em{
  font-style: normal;
  color: var(--lime);
}

.page-home .home-lead{
  margin-top: 20px;
  max-width: 46ch;
  font-size: clamp(.95rem, 1.3vw, 1.06rem);
  line-height: 1.8;
  color: var(--steel);
}

.page-home .home-actions{
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 28px;
}

.page-home .home-hero-stats{
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
  margin-top: 32px;
  padding-top: 20px;
  border-top: 1px solid var(--line);
}
.page-home .home-stat{ min-width: 0; }
.page-home .home-stat-num{
  display: block;
  font-family: var(--font-mono);
  font-size: clamp(1.02rem, 2.3vw, 1.45rem);
  font-weight: 600;
  letter-spacing: -.01em;
  color: var(--lime);
}
.page-home .home-stat-label{
  display: block;
  margin-top: 5px;
  font-size: .72rem;
  line-height: 1.5;
  color: var(--steel-dim);
}

.page-home .home-hero-list{
  margin-top: 26px;
  border: 1px solid var(--line);
  background: rgba(18,35,29,.72);
}
.page-home .home-hero-item{
  display: grid;
  gap: 6px;
  padding: 12px 14px;
  border-top: 1px solid var(--line);
}
.page-home .home-hero-item:first-child{ border-top: 0; }
.page-home .home-hero-item-top{
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}
.page-home .home-hero-time{
  font-family: var(--font-mono);
  font-size: .84rem;
  color: var(--paper);
}
.page-home .home-hero-teams{
  font-family: var(--font-display);
  font-size: 1.1rem;
  color: var(--paper);
  letter-spacing: -.01em;
}
.page-home .home-hero-teams i{
  font-style: normal;
  font-size: .78rem;
  color: var(--lime);
  padding: 0 6px;
}
.page-home .home-hero-meta{
  font-family: var(--font-mono);
  font-size: .7rem;
  letter-spacing: .06em;
  color: var(--steel-dim);
}

.page-home .home-hero-visual{
  position: relative;
  margin: 0;
  border: 1px solid var(--line);
  background: var(--surface);
  overflow: hidden;
  clip-path: polygon(0 2.5%, 100% 0, 100% 97.5%, 0 100%);
}
.page-home .home-hero-visual img{
  display: block;
  width: 100%;
  max-width: 100%;
  height: auto;
  aspect-ratio: 16 / 10;
  object-fit: cover;
  filter: saturate(.92) contrast(1.05);
}
.page-home .home-hero-visual::after{
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(200deg, rgba(10,13,12,.10) 28%, rgba(10,13,12,.74) 100%);
  pointer-events: none;
}
.page-home .home-visual-tag{
  position: absolute;
  left: 14px;
  bottom: 16px;
  z-index: 2;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 10px;
  border: 1px solid var(--line);
  background: rgba(10,13,12,.82);
  font-family: var(--font-mono);
  font-size: .64rem;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--mist);
}
.page-home .home-visual-tag::before{
  content: "";
  width: 6px;
  height: 6px;
  background: var(--lime);
}

/* ---------- shared band ---------- */
.page-home .home-band{
  position: relative;
  padding-block: var(--home-pad);
  border-bottom: 1px solid var(--line);
}
.page-home .home-head{
  display: grid;
  gap: 12px;
  max-width: 66ch;
  margin-bottom: clamp(24px, 3vw, 36px);
}
.page-home .home-head h2{ font-size: clamp(1.55rem, 4vw, 2.4rem); }
.page-home .home-head p:not(.eyebrow){
  color: var(--steel);
  font-size: .95rem;
  line-height: 1.78;
}

/* ---------- schedule tape ---------- */
.page-home .home-tape{
  background: linear-gradient(180deg, #0A0D0C 0%, #0E1A16 100%);
}
.page-home .home-tape-visual{
  position: relative;
  margin-bottom: 24px;
  border: 1px solid var(--line);
  overflow: hidden;
  background: var(--surface);
}
.page-home .home-tape-visual img{
  display: block;
  width: 100%;
  max-width: 100%;
  height: 100%;
  aspect-ratio: 12 / 5;
  object-fit: cover;
}
.page-home .home-tape-visual::after{
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(90deg, rgba(10,13,12,.85) 0%, rgba(10,13,12,.15) 55%, rgba(201,255,61,.14) 100%);
  pointer-events: none;
}

.page-home .home-chips{
  display: flex;
  gap: 8px;
  overflow-x: auto;
  padding-bottom: 8px;
  margin-bottom: 20px;
}
.page-home .home-chip{
  flex: 0 0 auto;
  padding: 8px 14px;
  border: 1px solid var(--line);
  background: var(--surface);
  font-family: var(--font-mono);
  font-size: .74rem;
  letter-spacing: .1em;
  color: var(--steel);
  text-decoration: none;
  transition: color .18s ease, border-color .18s ease, background .18s ease;
}
.page-home .home-chip:hover,
.page-home .home-chip:focus-visible{
  color: var(--lime);
  border-color: var(--lime);
}
.page-home .home-chip--active{
  background: var(--lime);
  border-color: var(--lime);
  color: var(--ink);
  font-weight: 600;
}
.page-home .home-chip--active:hover,
.page-home .home-chip--active:focus-visible{
  background: var(--lime-dark);
  border-color: var(--lime-dark);
  color: var(--ink);
}

.page-home .home-tape-track{
  display: flex;
  gap: 14px;
  max-width: 100%;
  overflow-x: auto;
  padding: 4px var(--gutter) 16px;
  scroll-snap-type: x proximity;
  scrollbar-color: var(--surface-2) transparent;
}
.page-home .home-day{
  flex: 0 0 auto;
  width: min(84vw, 340px);
  display: flex;
  flex-direction: column;
  gap: 10px;
  scroll-snap-align: start;
}
.page-home .home-day-head{
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px;
  padding-bottom: 8px;
  border-bottom: 1px solid var(--line);
}
.page-home .home-day-name{
  font-size: 1.2rem;
  letter-spacing: -.01em;
}
.page-home .home-day-count{
  font-family: var(--font-mono);
  font-size: .7rem;
  letter-spacing: .1em;
  color: var(--steel-dim);
}

.page-home .home-match{
  position: relative;
  display: grid;
  gap: 8px;
  padding: 14px 14px 12px;
  border: 1px solid var(--line);
  background: var(--surface);
  transition: background .2s ease, border-color .2s ease;
}
.page-home .home-match::before{
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 3px;
  background: var(--line);
  transition: background .2s ease;
}
.page-home .home-match:hover{
  background: var(--surface-2);
  border-color: rgba(201,255,61,.42);
}
.page-home .home-match:hover::before{ background: var(--lime); }
.page-home .home-match-top{
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}
.page-home .home-match-league{
  font-size: .72rem;
  letter-spacing: .1em;
  color: var(--steel);
}
.page-home .home-match-time{
  font-family: var(--font-mono);
  font-size: .84rem;
  color: var(--lime);
}
.page-home .home-match-teams{
  font-family: var(--font-display);
  font-size: 1.05rem;
  color: var(--paper);
  letter-spacing: -.01em;
}
.page-home .home-match-teams i{
  font-style: normal;
  font-size: .74rem;
  color: var(--steel-dim);
  padding: 0 5px;
}
.page-home .home-match-meta{
  font-family: var(--font-mono);
  font-size: .68rem;
  letter-spacing: .06em;
  color: var(--steel-dim);
}

/* ---------- bento ---------- */
.page-home .home-bento{
  background:
    radial-gradient(70% 50% at 8% 0%, rgba(255,122,60,.10), transparent 62%),
    var(--ink);
}
.page-home .home-bento-grid{
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--home-gap);
}
.page-home .bento{
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 22px 20px 20px;
  border: 1px solid var(--line);
  background: var(--surface);
  text-decoration: none;
  color: var(--mist);
  overflow: hidden;
  transition: background .24s ease, border-color .24s ease;
}
.page-home .bento::after{
  content: "";
  position: absolute;
  left: 20px;
  right: 20px;
  bottom: 0;
  height: 1px;
  background: var(--lime);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform .35s ease;
}
.page-home .bento:hover,
.page-home .bento:focus-visible{
  background: var(--surface-2);
  border-color: rgba(201,255,61,.42);
}
.page-home .bento:hover::after,
.page-home .bento:focus-visible::after{ transform: scaleX(1); }
.page-home .bento-num{
  font-family: var(--font-mono);
  font-size: .72rem;
  letter-spacing: .18em;
  color: var(--steel-dim);
  transition: color .2s ease;
}
.page-home .bento:hover .bento-num,
.page-home .bento:focus-visible .bento-num{ color: var(--lime); }
.page-home .bento-title{ font-size: clamp(1.25rem, 3vw, 1.6rem); }
.page-home .bento-text{
  color: var(--steel);
  font-size: .92rem;
  line-height: 1.75;
}
.page-home .bento-list{
  display: grid;
  gap: 6px;
  margin-top: 2px;
}
.page-home .bento-list li{
  position: relative;
  padding-left: 14px;
  font-size: .84rem;
  line-height: 1.6;
  color: var(--mist-2);
}
.page-home .bento-list li::before{
  content: "";
  position: absolute;
  left: 0;
  top: .58em;
  width: 6px;
  height: 1px;
  background: var(--lime);
}
.page-home .bento-link{
  margin-top: auto;
  padding-top: 6px;
  font-family: var(--font-mono);
  font-size: .72rem;
  letter-spacing: .12em;
  color: var(--orange);
}
.page-home .bento--a{
  background:
    linear-gradient(165deg, rgba(201,255,61,.10) 0%, transparent 58%),
    var(--surface);
}

/* ---------- follow ---------- */
.page-home .home-follow{
  background: linear-gradient(180deg, var(--surface) 0%, #0D1B16 100%);
}
.page-home .home-follow-layout{
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 28px;
}
.page-home .home-steps{
  display: grid;
  gap: 18px;
}
.page-home .home-step{
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 14px;
  padding-top: 16px;
  border-top: 1px solid var(--line);
}
.page-home .home-step-num{
  font-family: var(--font-mono);
  font-size: .76rem;
  letter-spacing: .12em;
  color: var(--lime);
  padding-top: 4px;
}
.page-home .home-step h3{
  font-size: 1.12rem;
  margin-bottom: 6px;
}
.page-home .home-step p{
  color: var(--steel);
  font-size: .92rem;
  line-height: 1.75;
}
.page-home .home-follow-media{
  margin: 0;
}
.page-home .home-follow-media img{
  display: block;
  width: 100%;
  max-width: 100%;
  height: auto;
  border: 1px solid var(--line);
  background: var(--surface-2);
}
.page-home .home-follow-media .caption{
  display: block;
  margin-top: 10px;
}

/* ---------- column ---------- */
.page-home .home-column{
  background: var(--ink);
}
.page-home .home-column-layout{
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 20px;
}
.page-home .home-column-media{
  margin: 0;
  border: 1px solid var(--line);
  background: var(--surface);
}
.page-home .home-column-media img{
  display: block;
  width: 100%;
  max-width: 100%;
  height: auto;
  aspect-ratio: 10 / 7;
  object-fit: cover;
}
.page-home .home-posts{
  display: grid;
  gap: 14px;
  align-content: start;
}
.page-home .home-post{
  display: grid;
  gap: 8px;
  padding: 18px 18px 16px;
  border: 1px solid var(--line);
  border-top: 3px solid var(--orange);
  background: var(--surface);
  text-decoration: none;
  color: var(--mist);
  transition: background .2s ease, border-color .2s ease, transform .2s ease;
}
.page-home .home-post:hover,
.page-home .home-post:focus-visible{
  background: var(--surface-2);
  border-color: rgba(255,122,60,.42);
  border-top-color: var(--orange);
  transform: translateY(-2px);
}
.page-home .home-post-meta{
  display: flex;
  align-items: center;
  gap: 10px;
}
.page-home .home-post-meta .mono{
  font-size: .68rem;
  letter-spacing: .12em;
  color: var(--steel-dim);
}
.page-home .home-post h3{ font-size: 1.2rem; }
.page-home .home-post p{
  color: var(--steel);
  font-size: .92rem;
  line-height: 1.72;
}
.page-home .home-post-link{
  font-family: var(--font-mono);
  font-size: .72rem;
  letter-spacing: .12em;
  color: var(--orange);
}
.page-home .home-inline-link{
  display: inline-flex;
  align-items: center;
  gap: 6px;
  justify-self: start;
  font-family: var(--font-mono);
  font-size: .74rem;
  letter-spacing: .12em;
  color: var(--lime);
  text-decoration: none;
  padding-bottom: 2px;
  border-bottom: 1px solid transparent;
  transition: border-color .2s ease, color .2s ease;
}
.page-home .home-inline-link:hover,
.page-home .home-inline-link:focus-visible{
  border-bottom-color: var(--lime);
}

/* ---------- version ---------- */
.page-home .home-version{
  background: linear-gradient(180deg, #0E1A16 0%, var(--ink) 100%);
}
.page-home .home-version-layout{
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 28px;
}
.page-home .home-version-copy h2{
  margin-top: 12px;
  font-size: clamp(1.5rem, 3.6vw, 2.2rem);
}
.page-home .home-version-copy p:not(.eyebrow){
  margin-top: 14px;
  color: var(--steel);
  font-size: .94rem;
  line-height: 1.78;
}
.page-home .home-version-copy .home-inline-link{ margin-top: 20px; }

.page-home .home-folds{
  display: grid;
  gap: 0;
  align-content: start;
}
.page-home .home-fold{
  border: 1px solid var(--line);
  background: var(--surface);
}
.page-home .home-fold + .home-fold{ margin-top: -1px; }
.page-home .home-fold summary{
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 15px 16px;
  cursor: pointer;
  list-style: none;
  font-family: var(--font-display);
  font-size: 1.05rem;
  letter-spacing: -.01em;
  color: var(--paper);
}
.page-home .home-fold summary::-webkit-details-marker{ display: none; }
.page-home .home-fold summary::after{
  content: "+";
  margin-left: auto;
  font-family: var(--font-mono);
  font-size: 1rem;
  color: var(--lime);
}
.page-home .home-fold[open] summary::after{ content: "–"; }
.page-home .home-fold[open] summary{ border-bottom: 1px solid var(--line); }
.page-home .fold-idx{
  font-family: var(--font-mono);
  font-size: .7rem;
  letter-spacing: .14em;
  color: var(--lime);
}
.page-home .home-fold-body{
  padding: 14px 16px 16px;
}
.page-home .home-fold-body p{
  color: var(--steel);
  font-size: .9rem;
  line-height: 1.78;
}

/* ---------- cta ---------- */
.page-home .home-cta-band{
  padding-block: var(--home-pad);
  background:
    radial-gradient(80% 60% at 90% 100%, rgba(201,255,61,.08), transparent 62%),
    var(--ink);
}
.page-home .home-cta-title{
  font-size: clamp(1.5rem, 3.6vw, 2.2rem);
  margin-bottom: 24px;
}
.page-home .home-cta-grid{
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 16px;
}
.page-home .home-cta-card{
  display: grid;
  gap: 12px;
  align-content: start;
  padding: 26px 22px;
  border: 1px solid var(--line);
  background: var(--surface);
}
.page-home .home-cta-card h3{ font-size: 1.32rem; }
.page-home .home-cta-card p:not(.eyebrow){
  color: var(--steel);
  font-size: .92rem;
  line-height: 1.75;
}
.page-home .home-cta-card .btn{
  justify-self: start;
  margin-top: 4px;
}
.page-home .home-cta-card--lime{
  background:
    linear-gradient(160deg, rgba(201,255,61,.12) 0%, transparent 56%),
    var(--surface);
  border-left: 3px solid var(--lime);
}
.page-home .home-cta-card--orange{
  background:
    linear-gradient(160deg, rgba(255,122,60,.12) 0%, transparent 56%),
    var(--surface);
  border-left: 3px solid var(--orange);
}

/* ---------- responsive ---------- */
@media (min-width: 640px){
  .page-home .home-bento-grid{ grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .page-home .bento--a{ grid-column: span 2; }
}
@media (min-width: 900px){
  .page-home .home-hero-inner{
    grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr);
    align-items: center;
    gap: clamp(32px, 4vw, 60px);
    padding-block: clamp(30px, 4vw, 52px) clamp(56px, 6vw, 88px);
  }
  .page-home .home-follow-layout{
    grid-template-columns: minmax(0, 1.08fr) minmax(0, .92fr);
    gap: 44px;
    align-items: start;
  }
  .page-home .home-column-layout{
    grid-template-columns: minmax(0, .85fr) minmax(0, 1.15fr);
    gap: 32px;
    align-items: start;
  }
  .page-home .home-version-layout{
    grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr);
    gap: 48px;
    align-items: start;
  }
  .page-home .home-cta-grid{ grid-template-columns: 1.1fr .9fr; }
  .page-home .home-tape-visual img{ aspect-ratio: 24 / 5; }
}
@media (min-width: 1024px){
  .page-home .home-bento-grid{
    grid-template-columns: repeat(12, minmax(0, 1fr));
  }
  .page-home .bento--a{ grid-column: span 7; }
  .page-home .bento--b{ grid-column: span 5; }
  .page-home .bento--c{ grid-column: span 5; }
  .page-home .bento--d{ grid-column: span 7; }
}

@media (prefers-reduced-motion: reduce){
  .page-home .bento,
  .page-home .bento::after,
  .page-home .home-post,
  .page-home .home-match,
  .page-home .home-match::before,
  .page-home .home-chip{ transition: none; }
  .page-home .home-post:hover{ transform: none; }
}