.page-home .home-hero{
  position:relative;
  isolation:isolate;
  overflow:hidden;
  background:
    radial-gradient(120% 90% at 82% -10%, rgba(255,176,32,.20), transparent 58%),
    linear-gradient(162deg, var(--ink-900) 0%, var(--ink-800) 72%, var(--ink-600) 130%);
  color:var(--paper-050);
  padding:clamp(1.75rem,5vw,3.5rem) 0 clamp(1.75rem,5vw,3rem);
}
.page-home .home-hero::before{
  content:"";
  position:absolute;
  inset:0 0 auto 0;
  height:2px;
  background:linear-gradient(90deg, transparent, var(--amber-500) 45%, transparent);
  opacity:.85;
}
.page-home .home-hero__inner{
  display:grid;
  grid-template-columns:1fr;
  gap:clamp(1.25rem,4vw,2.25rem);
}
.page-home .home-hero__copy{max-width:38rem}
.page-home .home-hero__lede{
  margin:.9rem 0 0;
  color:rgba(247,249,249,.82);
}
.page-home .cover-actions{
  display:flex;
  flex-wrap:wrap;
  gap:.65rem;
  margin-top:1.4rem;
}
.page-home .cover-index{
  list-style:none;
  margin:1.6rem 0 0;
  padding:0;
  display:grid;
  gap:1px;
  background:var(--stroke-light);
  border:1px solid var(--stroke-light);
  border-radius:var(--radius-m);
  overflow:hidden;
}
.page-home .cover-index__item{
  display:grid;
  grid-template-columns:auto 1fr;
  gap:.15rem .9rem;
  align-items:baseline;
  padding:.8rem 1rem;
  background:rgba(4,33,27,.62);
}
.page-home .cover-index__num{
  grid-row:span 2;
  color:var(--amber-500);
  font-size:1.3rem;
  font-weight:800;
  line-height:1.2;
}
.page-home .cover-index__item a{
  color:var(--paper-050);
  font-weight:700;
  text-decoration:none;
  letter-spacing:.02em;
  border-bottom:1px solid transparent;
  transition:border-color .2s var(--ease), color .2s var(--ease);
}
.page-home .cover-index__item a:hover,
.page-home .cover-index__item a:focus-visible{
  color:var(--amber-200);
  border-bottom-color:var(--amber-500);
}
.page-home .cover-index__note{
  grid-column:2;
  color:rgba(247,249,249,.62);
  font-size:.82rem;
  line-height:1.5;
}
.page-home .home-hero__figure{
  margin:0;
  position:relative;
  border-radius:var(--radius-l);
  overflow:hidden;
  border:1px solid var(--stroke-light);
  aspect-ratio:4 / 3;
}
.page-home .home-hero__figure img{
  display:block;
  width:100%;
  height:100%;
  object-fit:cover;
}

.page-home .match-band{
  background:var(--ink-800);
  color:var(--paper-050);
  padding:clamp(2rem,5vw,3.25rem) 0;
  border-top:1px solid var(--stroke-light);
}
.page-home .match-band__head{
  display:flex;
  flex-wrap:wrap;
  align-items:flex-end;
  justify-content:space-between;
  gap:.75rem 1.5rem;
}
.page-home .match-band__head .eyebrow{color:var(--amber-500)}
.page-home .match-band__meta{color:rgba(247,249,249,.66);margin:0}
.page-home .match-band__track{
  list-style:none;
  margin:1.4rem 0 0;
  padding:0 0 .85rem;
  display:flex;
  gap:14px;
  overflow-x:auto;
  scroll-snap-type:x mandatory;
  -webkit-overflow-scrolling:touch;
  scrollbar-width:thin;
}
.page-home .match-card{
  flex:0 0 min(78vw,300px);
  scroll-snap-align:start;
  display:flex;
  flex-direction:column;
  gap:.4rem;
  padding:1rem 1.1rem 1.15rem;
  background:var(--paper-050);
  color:var(--text-900);
  border-radius:var(--radius-m);
  border:1px solid var(--cool-100);
}
.page-home .match-card--feature{flex-basis:min(86vw,352px)}
.page-home .match-card--feature img{
  display:block;
  width:100%;
  height:126px;
  object-fit:cover;
  border-radius:var(--radius-s);
  margin-bottom:.35rem;
}
.page-home .match-card__round{
  margin:0;
  font-size:.78rem;
  font-weight:700;
  letter-spacing:.12em;
  color:var(--ink-600);
  text-transform:uppercase;
}
.page-home .match-card__title{
  margin:0;
  font-size:1.02rem;
  line-height:1.45;
  letter-spacing:.01em;
}
.page-home .match-card__text{
  margin:0;
  font-size:.88rem;
  line-height:1.65;
  color:var(--text-muted);
}
.page-home .match-card .link-inline{
  margin-top:auto;
  padding-top:.5rem;
  font-size:.86rem;
}

.page-home .bento-section{
  background:var(--paper-050);
  padding:clamp(2.5rem,6vw,4.5rem) 0;
}
.page-home .bento-section .section-head{margin-bottom:1.5rem}
.page-home .bento{
  display:grid;
  grid-template-columns:1fr;
  gap:14px;
}
.page-home .bento__cell{
  border-radius:var(--radius-m);
  padding:1.2rem 1.25rem 1.35rem;
  transition:transform .25s var(--ease), box-shadow .25s var(--ease), border-color .25s var(--ease);
}
.page-home .bento__cell--chart{
  background:var(--paper-050);
  border:1px solid var(--cool-300);
}
.page-home .bento__cell--verdict{
  background:linear-gradient(150deg, var(--ink-800), var(--ink-900));
  color:var(--paper-050);
}
.page-home .bento__cell--tags{background:var(--amber-200)}
.page-home .bento__cell--links{
  background:var(--cool-100);
  border:1px solid var(--cool-300);
}
.page-home .bento__title{
  margin:0 0 .35rem;
  font-size:1.12rem;
  font-weight:800;
  letter-spacing:.02em;
  line-height:1.4;
}
.page-home .bento__title--sm{font-size:1rem}
.page-home .bento__text{
  margin:.55rem 0 0;
  font-size:.92rem;
  line-height:1.7;
  color:var(--text-muted);
}
.page-home .bento__cell--verdict .bento__text{color:rgba(247,249,249,.78)}
.page-home .bento__verdict{
  margin:0;
  font-size:1.18rem;
  font-weight:800;
  line-height:1.45;
  color:var(--amber-200);
  letter-spacing:.015em;
}
.page-home .bento__legend{
  display:flex;
  align-items:center;
  gap:.4rem;
  margin:.6rem 0 0;
  font-size:.78rem;
  color:var(--text-muted);
}
.page-home .bento__dot{
  width:10px;
  height:10px;
  border-radius:50%;
  display:inline-block;
}
.page-home .bento__dot--home{background:var(--amber-500);margin-left:.2rem}
.page-home .bento__dot--away{background:var(--ink-600);margin-left:.9rem}
.page-home .bento__tags{margin:.85rem 0 0;gap:.45rem}
.page-home .bento__tags .tag{
  background:rgba(4,33,27,.08);
  color:var(--ink-900);
  border-color:rgba(4,33,27,.16);
}
.page-home .bento__actions{
  display:flex;
  flex-wrap:wrap;
  gap:.6rem;
  margin-top:1rem;
}
.page-home .split-chart{
  display:block;
  width:100%;
  height:auto;
  margin:.65rem 0 .2rem;
  overflow:visible;
}
.page-home .split-chart__axis line{
  stroke:var(--cool-300);
  stroke-width:1;
  stroke-dasharray:2 3;
}
.page-home .split-chart__label{
  font-size:10px;
  font-weight:600;
  fill:var(--text-muted);
  letter-spacing:.02em;
}
.page-home .split-chart__value{
  font-size:10px;
  font-weight:700;
  fill:var(--text-900);
  font-variant-numeric:tabular-nums;
}
.page-home .split-chart__bar--home{fill:var(--amber-500)}
.page-home .split-chart__bar--away{fill:var(--ink-600)}

.page-home .directory{
  background:var(--cool-100);
  padding:clamp(2.5rem,6vw,4rem) 0;
}
.page-home .directory .section-head{margin-bottom:1.4rem}
.page-home .directory__grid{
  display:grid;
  grid-template-columns:1fr;
  gap:14px;
}
.page-home .dir-card{
  position:relative;
  background:var(--paper-050);
  border:1px solid var(--cool-300);
  border-radius:var(--radius-l);
  padding:clamp(1.25rem,3.4vw,1.9rem);
  transition:transform .25s var(--ease), border-color .25s var(--ease), box-shadow .25s var(--ease);
}
.page-home .dir-card__num{
  margin:0;
  font-size:clamp(2.4rem,7vw,3.6rem);
  font-weight:800;
  line-height:.95;
  color:var(--amber-500);
  letter-spacing:.02em;
}
.page-home .dir-card__title{
  margin:.5rem 0 .6rem;
  font-size:1.3rem;
  font-weight:800;
  letter-spacing:.03em;
}
.page-home .dir-card__text{
  margin:0;
  font-size:.95rem;
  line-height:1.75;
  color:var(--text-muted);
}
.page-home .dir-card__step{
  margin:.75rem 0 0;
  padding:.55rem .8rem;
  border-left:3px solid var(--amber-500);
  background:var(--amber-200);
  color:var(--ink-900);
  font-size:.86rem;
  line-height:1.6;
  border-radius:0 var(--radius-s) var(--radius-s) 0;
}
.page-home .dir-card .link-inline{
  display:inline-block;
  margin-top:.9rem;
  font-weight:700;
}

.page-home .recap{
  background:linear-gradient(165deg, var(--ink-900), var(--ink-800));
  color:var(--paper-050);
  padding:clamp(2.5rem,6vw,4.25rem) 0;
}
.page-home .recap__inner{
  display:grid;
  grid-template-columns:1fr;
  gap:1.75rem;
  align-items:center;
}
.page-home .recap .eyebrow{color:var(--amber-500)}
.page-home .recap__lede{
  margin:.85rem 0 0;
  color:rgba(247,249,249,.8);
}
.page-home .recap__list{
  list-style:none;
  margin:1.2rem 0 0;
  padding:0 0 0 1.1rem;
  border-left:1px solid rgba(255,225,168,.35);
  display:grid;
  gap:.7rem;
}
.page-home .recap__list li{
  position:relative;
  font-size:.92rem;
  line-height:1.65;
  color:rgba(247,249,249,.84);
}
.page-home .recap__list li::before{
  content:"";
  position:absolute;
  left:-1.45rem;
  top:.55em;
  width:7px;
  height:7px;
  border-radius:50%;
  background:var(--amber-500);
}
.page-home .recap__note{
  margin:1.1rem 0 1.3rem;
  font-size:.86rem;
  line-height:1.7;
  color:var(--text-muted);
  color:rgba(185,200,209,.85);
}
.page-home .recap__figure{
  margin:0;
  border-radius:var(--radius-l);
  overflow:hidden;
  border:1px solid var(--stroke-light);
}
.page-home .recap__figure img{
  display:block;
  width:100%;
  height:auto;
  aspect-ratio:1 / 1;
  object-fit:cover;
}
.page-home .recap__figure figcaption{
  padding:.7rem .9rem;
  font-size:.78rem;
  line-height:1.6;
  color:rgba(247,249,249,.6);
  background:rgba(4,33,27,.7);
}

.page-home .join{
  background:var(--paper-050);
  padding:clamp(2.5rem,6vw,4.25rem) 0;
}
.page-home .join__inner{
  display:grid;
  grid-template-columns:1fr;
  gap:1.75rem;
  align-items:center;
}
.page-home .join__figure{
  margin:0;
  border-radius:var(--radius-l);
  overflow:hidden;
  border:1px solid var(--cool-300);
}
.page-home .join__figure img{
  display:block;
  width:100%;
  height:auto;
  aspect-ratio:10 / 7;
  object-fit:cover;
}
.page-home .join__lede{
  margin:.85rem 0 0;
  font-size:.98rem;
  line-height:1.75;
  color:var(--text-muted);
}
.page-home .join__actions{
  display:flex;
  flex-wrap:wrap;
  gap:.6rem;
  margin-top:1.15rem;
}
.page-home .join__meta{
  margin:1rem 0 0;
  font-size:.84rem;
  line-height:1.7;
  color:var(--text-muted);
}

@media (hover:hover){
  .page-home .bento__cell:hover,
  .page-home .dir-card:hover{
    transform:translateY(-2px);
    box-shadow:var(--shadow-soft);
  }
  .page-home .dir-card:hover{border-color:var(--amber-500)}
}

@media (min-width:640px){
  .page-home .join__actions .btn{flex:0 0 auto}
}

@media (min-width:820px){
  .page-home .bento{
    grid-template-columns:repeat(6,1fr);
    gap:16px;
  }
  .page-home .bento__cell--chart{grid-column:span 4}
  .page-home .bento__cell--verdict{grid-column:span 2;display:flex;flex-direction:column;justify-content:center}
  .page-home .bento__cell--tags{grid-column:span 2}
  .page-home .bento__cell--links{grid-column:span 4}
  .page-home .directory__grid{grid-template-columns:1.35fr 1fr;gap:16px}
  .page-home .match-card--feature img{height:150px}
}

@media (min-width:900px){
  .page-home .home-hero__inner{
    grid-template-columns:1.08fr .92fr;
    align-items:stretch;
  }
  .page-home .home-hero__figure{
    aspect-ratio:auto;
    min-height:440px;
    height:100%;
  }
  .page-home .cover-index{grid-template-columns:1fr}
  .page-home .recap__inner{grid-template-columns:1.15fr .85fr;gap:2.5rem}
  .page-home .join__inner{grid-template-columns:.92fr 1.08fr;gap:2.5rem}
}

@media (prefers-reduced-motion:reduce){
  .page-home .bento__cell,
  .page-home .dir-card,
  .page-home .cover-index__item a{transition:none}
  .page-home .bento__cell:hover,
  .page-home .dir-card:hover{transform:none}
  .page-home .match-band__track{scroll-behavior:auto}
}
<<<END>>>