/* ================= page-home ================= */

.page-home{
  --hm-gap:14px;
  --hm-body-txt:rgba(27,36,33,.78);
  --hm-card-line:rgba(63,167,106,.30);
  background:var(--mist);
  color:var(--ink);
  font-family:var(--font-body);
}

.page-home .hm-kicker{
  margin:0;
  font-family:var(--font-mono);
  font-size:11px;
  letter-spacing:.08em;
  color:var(--txt-dim);
}
.page-home .hm-kicker--light{ color:var(--amber-hi); }

.page-home .hm-inline{
  color:var(--night-2);
  font-size:14px;
  text-decoration:none;
  border-bottom:1px solid var(--hm-card-line);
  padding-bottom:2px;
  transition:color var(--t) var(--ease), border-color var(--t) var(--ease);
}
.page-home .hm-inline:hover,
.page-home .hm-inline:focus-visible{
  color:var(--amber);
  border-color:var(--amber);
}

/* ---------- hero ---------- */

.page-home .hm-hero{
  position:relative;
  overflow:hidden;
  padding:26px 0 42px;
  color:var(--mist);
  background:
    radial-gradient(120% 100% at 88% -10%, rgba(63,167,106,.24), transparent 62%),
    radial-gradient(80% 70% at 6% 110%, rgba(242,160,61,.14), transparent 60%),
    linear-gradient(180deg,#0B2A22 0%,#0d3027 100%);
}

.page-home .hm-crumb{
  margin:0 0 6px;
  font-size:12px;
  letter-spacing:.06em;
  color:var(--txt-soft);
}

.page-home .hm-timeline{
  display:grid;
  grid-template-columns:auto minmax(0,1fr) auto;
  align-items:center;
  gap:12px;
  margin:16px 0 24px;
}
.page-home .hm-timeline__mark{
  font-family:var(--font-mono);
  font-size:11px;
  letter-spacing:.08em;
  color:var(--txt-soft);
}
.page-home .hm-timeline__track{
  position:relative;
  height:2px;
  border-radius:2px;
  background:linear-gradient(90deg,var(--grass) 0%,rgba(63,167,106,.22) 100%);
}
.page-home .hm-timeline__track::before,
.page-home .hm-timeline__track::after{
  content:"";
  position:absolute;
  top:50%;
  width:9px;height:9px;
  border-radius:50%;
  background:var(--grass-hi);
  box-shadow:0 0 0 4px rgba(123,215,154,.14);
  transform:translate(-50%,-50%);
}
.page-home .hm-timeline__track::before{ left:0; }
.page-home .hm-timeline__track::after{ left:100%; }
.page-home .hm-timeline__track i{
  position:absolute;
  left:50%;top:50%;
  width:9px;height:9px;
  border-radius:50%;
  background:var(--amber);
  box-shadow:0 0 0 4px rgba(242,160,61,.18);
  transform:translate(-50%,-50%);
}

.page-home .hm-hero__grid{
  display:grid;
  grid-template-columns:minmax(0,1fr);
  gap:var(--hm-gap);
}

.page-home .hm-tile{
  position:relative;
  border-radius:var(--radius-lg);
  background:var(--night-2);
  border:1px solid var(--line-soft);
  overflow:hidden;
  padding:22px;
}

/* intro */
.page-home .hm-tile--intro{
  background:transparent;
  border-color:transparent;
  padding:18px 4px 6px;
  display:flex;
  flex-direction:column;
  gap:14px;
}
.page-home .hm-h1{
  margin:0;
  font-family:var(--font-display);
  font-weight:300;
  letter-spacing:-.02em;
  line-height:1.04;
  font-size:clamp(32px,8vw,56px);
  color:var(--mist);
}
.page-home .hm-lede{
  margin:0;
  max-width:56ch;
  font-size:17px;
  line-height:1.85;
  color:var(--txt-soft);
}

/* media */
.page-home .hm-tile--media{
  padding:0;
  display:flex;
  background:#08211b;
}
.page-home .hm-tile--media img{
  width:100%;
  height:100%;
  min-height:220px;
  aspect-ratio:16/9;
  object-fit:cover;
  display:block;
}

/* countdown */
.page-home .hm-tile--count{
  padding:0;
  min-height:250px;
  display:flex;
  align-items:flex-end;
  background:#08211b;
}
.page-home .hm-tile__bg{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  object-fit:cover;
  opacity:.55;
}
.page-home .hm-tile--count::after{
  content:"";
  position:absolute;
  inset:0;
  background:linear-gradient(180deg,rgba(11,42,34,.30) 0%,rgba(11,42,34,.94) 100%);
}
.page-home .hm-count{
  position:relative;
  z-index:1;
  width:100%;
  padding:22px;
}
.page-home .hm-count__label{
  margin:0;
  font-size:13px;
  letter-spacing:.02em;
  color:var(--txt-soft);
}
.page-home .hm-count__time{
  display:flex;
  align-items:baseline;
  gap:4px;
  margin:8px 0 10px;
  font-family:var(--font-mono);
  font-size:clamp(30px,9vw,46px);
  line-height:1;
  color:var(--amber);
  letter-spacing:0;
}
.page-home .hm-count__time i{
  font-style:normal;
  font-size:.62em;
  opacity:.6;
}
.page-home .hm-count__note{
  margin:0;
  font-size:13px;
  line-height:1.7;
  color:var(--txt-soft);
}

/* version */
.page-home .hm-tile--ver{
  display:flex;
  flex-direction:column;
  gap:8px;
  justify-content:space-between;
  background:var(--night);
  border-color:var(--hm-card-line);
}
.page-home .hm-ver__num{
  margin:2px 0 0;
  font-family:var(--font-mono);
  font-size:clamp(48px,9vw,74px);
  line-height:1;
  letter-spacing:-.02em;
  color:var(--grass-hi);
}
.page-home .hm-ver__meta{
  margin:0;
  font-family:var(--font-mono);
  font-size:12px;
  letter-spacing:.04em;
  color:var(--amber-hi);
}
.page-home .hm-ver__desc{
  margin:0;
  font-size:14px;
  line-height:1.8;
  color:var(--txt-soft);
}

/* rank tile */
.page-home .hm-tile--rank{
  display:flex;
  flex-direction:column;
  gap:12px;
  background:linear-gradient(158deg,rgba(63,167,106,.20) 0%,rgba(18,56,44,.94) 100%);
  border-color:var(--hm-card-line);
}
.page-home .hm-tile__lead{
  margin:0;
  font-size:15px;
  line-height:1.8;
  color:var(--txt-soft);
}
.page-home .hm-links{
  list-style:none;
  margin:auto 0 0;
  padding:0;
  display:flex;
  flex-wrap:wrap;
  gap:8px;
}

/* ---------- toc ---------- */

.page-home .hm-toc{ display:none; }

/* ---------- .page-home ---------- */

.page-home .hm-body{
  background:var(--mist);
  padding:8px 0 0;
}

.page-home .hm-sec{
  display:grid;
  grid-template-columns:minmax(0,1fr);
  gap:14px;
  padding:44px 0;
  border-top:1px solid var(--edge);
}
.page-home .hm-sec:first-child{ border-top:0; }

.page-home .hm-sec__no{
  margin:0;
  font-family:var(--font-display);
  font-weight:300;
  font-size:clamp(52px,14vw,92px);
  line-height:.82;
  letter-spacing:-.04em;
  color:rgba(63,167,106,.34);
}

.page-home .hm-sec__main{ min-width:0; }

.page-home .hm-sec__title{
  margin:8px 0 12px;
  font-family:var(--font-display);
  font-weight:400;
  letter-spacing:-.01em;
  font-size:clamp(23px,5.4vw,38px);
  line-height:1.22;
  color:var(--night);
}
.page-home .hm-sec__body p{
  margin:0;
  max-width:64ch;
  font-size:17px;
  line-height:1.85;
  color:var(--hm-body-txt);
}
.page-home .hm-sec__foot{
  margin:20px 0 0;
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  gap:12px;
}

/* pills */
.page-home .hm-pillrows{
  display:flex;
  flex-wrap:wrap;
  gap:10px 18px;
  margin:20px 0 14px;
}
.page-home .hm-pills{
  display:flex;
  flex-wrap:wrap;
  gap:6px;
}
.page-home .hm-pill{
  display:inline-flex;
  align-items:center;
  padding:6px 14px;
  border-radius:var(--pill);
  font-size:13px;
  line-height:1.4;
  color:var(--night);
  background:rgba(63,167,106,.12);
  border:1px solid transparent;
}
.page-home .hm-pill.is-active{
  background:var(--amber);
  color:#241503;
  font-weight:600;
}
.page-home .hm-pills--soft .hm-pill{
  background:transparent;
  border-color:var(--hm-card-line);
  color:var(--hm-body-txt);
}
.page-home .hm-pills--soft .hm-pill.is-active{
  background:var(--night-2);
  border-color:var(--night-2);
  color:var(--mist);
}

/* table */
.page-home .hm-table{ margin-top:2px; }

/* lineup */
.page-home .hm-lineupwrap{
  display:grid;
  grid-template-columns:minmax(0,1fr);
  gap:14px;
  margin-top:22px;
}
.page-home .hm-lineupfig{
  margin:0;
  border-radius:var(--radius-md);
  overflow:hidden;
  background:var(--night);
}
.page-home .hm-lineupfig img{
  width:100%;
  height:auto;
  display:block;
  aspect-ratio:3/2;
  object-fit:cover;
}
.page-home .hm-lineup{
  list-style:none;
  margin:0;
  padding:0;
  display:grid;
  grid-template-columns:minmax(0,1fr);
  gap:2px;
  border-radius:var(--radius-md);
  overflow:hidden;
  background:var(--panel);
}
.page-home .hm-lineup li{
  display:flex;
  align-items:baseline;
  justify-content:space-between;
  gap:12px;
  padding:14px 18px;
  border-bottom:1px solid var(--zebra);
}
.page-home .hm-lineup li:last-child{ border-bottom:0; }
.page-home .hm-lineup__k{
  font-size:13px;
  letter-spacing:.02em;
  color:var(--txt-dim);
}
.page-home .hm-lineup__v{
  font-family:var(--font-mono);
  font-size:15px;
  color:var(--night);
}
.page-home .hm-lineup__v b{
  font-size:21px;
  font-weight:600;
  color:var(--night);
}

/* h2h */
.page-home .hm-h2h{
  list-style:none;
  margin:22px 0 0;
  padding:0;
  border-radius:var(--radius-md);
  overflow:hidden;
  background:var(--panel);
}
.page-home .hm-h2h li{
  display:grid;
  grid-template-columns:auto minmax(0,1fr) auto;
  align-items:center;
  gap:12px;
  padding:13px 18px;
  border-bottom:1px solid var(--zebra);
  transition:background var(--t) var(--ease), box-shadow var(--t) var(--ease);
}
.page-home .hm-h2h li:last-child{ border-bottom:0; }
.page-home .hm-h2h li:hover{
  background:#fff;
  box-shadow:inset 3px 0 0 var(--grass);
}
.page-home .hm-h2h__when{
  font-size:12px;
  letter-spacing:.04em;
  color:var(--txt-dim);
  white-space:nowrap;
}
.page-home .hm-h2h__score{
  font-weight:600;
  font-size:17px;
  color:var(--night);
  text-align:center;
}
.page-home .hm-h2h__tag{
  justify-self:end;
  padding:4px 10px;
  border-radius:var(--pill);
  font-size:11px;
  letter-spacing:.04em;
  color:var(--night-2);
  background:rgba(63,167,106,.16);
  white-space:nowrap;
}

/* export */
.page-home .hm-export{
  list-style:none;
  margin:22px 0 0;
  padding:0;
  display:grid;
  grid-template-columns:minmax(0,1fr);
  gap:var(--hm-gap);
}
.page-home .hm-export li{
  padding:18px 20px;
  border-radius:var(--radius-md);
  background:var(--panel);
  border:1px solid var(--zebra);
  display:flex;
  flex-direction:column;
  gap:6px;
}
.page-home .hm-export__k{
  font-family:var(--font-mono);
  font-size:15px;
  letter-spacing:.02em;
  color:var(--night);
}
.page-home .hm-export li span{
  font-size:14px;
  line-height:1.75;
  color:var(--hm-body-txt);
}

/* double */
.page-home .hm-plan{
  list-style:none;
  margin:22px 0 0;
  padding:0;
  display:grid;
  grid-template-columns:minmax(0,1fr);
  gap:2px;
  border-radius:var(--radius-md);
  overflow:hidden;
  background:var(--night);
}
.page-home .hm-plan__item{
  display:grid;
  grid-template-columns:auto minmax(0,1fr);
  align-items:center;
  gap:16px;
  padding:18px 20px;
  background:var(--night-2);
  border-bottom:1px solid var(--line-soft);
}
.page-home .hm-plan__item:last-child{ border-bottom:0; }
.page-home .hm-plan__item--gap{
  background:linear-gradient(90deg,rgba(242,160,61,.18) 0%,rgba(18,56,44,.9) 100%);
}
.page-home .hm-plan__t{
  font-family:var(--font-mono);
  font-size:clamp(22px,6vw,30px);
  line-height:1;
  color:var(--amber);
}
.page-home .hm-plan__item--gap .hm-plan__t{ color:var(--amber-hi); }
.page-home .hm-plan__c b{
  display:block;
  font-size:15px;
  color:var(--mist);
  margin-bottom:4px;
}
.page-home .hm-plan__c p{
  margin:0;
  font-size:13.5px;
  line-height:1.75;
  color:var(--txt-soft);
}

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

.page-home .hm-band{
  margin-top:8px;
  padding:48px 0 56px;
  background:
    radial-gradient(90% 80% at 90% 0%,rgba(63,167,106,.22),transparent 60%),
    linear-gradient(180deg,#0B2A22 0%,#0d3027 100%);
  color:var(--mist);
}
.page-home .hm-band__grid{
  display:grid;
  grid-template-columns:minmax(0,1fr);
  gap:24px;
  align-items:center;
}
.page-home .hm-band__title{
  margin:10px 0 14px;
  font-family:var(--font-display);
  font-weight:300;
  letter-spacing:-.02em;
  font-size:clamp(26px,7vw,44px);
  line-height:1.1;
  color:var(--mist);
}
.page-home .hm-band__p{
  margin:0 0 12px;
  max-width:58ch;
  font-size:16px;
  line-height:1.85;
  color:var(--txt-soft);
}
.page-home .hm-band__acts{
  display:flex;
  flex-wrap:wrap;
  gap:10px;
  margin-top:20px;
}
.page-home .hm-band__fig{
  margin:0;
  border-radius:var(--radius-lg);
  overflow:hidden;
  border:1px solid var(--hm-card-line);
}
.page-home .hm-band__fig img{
  width:100%;
  height:auto;
  display:block;
  aspect-ratio:5/3;
  object-fit:cover;
}

/* ---------- responsive ---------- */

@media (min-width:640px){
  .page-home .hm-export{
    grid-template-columns:repeat(2,minmax(0,1fr));
  }
  .page-home .hm-lineup{
    grid-template-columns:repeat(2,minmax(0,1fr));
  }
  .page-home .hm-lineup li:nth-last-child(2){ border-bottom:0; }
}

@media (min-width:900px){
  .page-home .hm-hero{ padding:32px 0 52px; }

  .page-home .hm-hero__grid{
    grid-template-columns:repeat(12,minmax(0,1fr));
    align-items:stretch;
  }
  .page-home .hm-tile--intro{ grid-column:1 / span 5; padding:22px 6px 22px 0; }
  .page-home .hm-tile--media{ grid-column:6 / span 7; }
  .page-home .hm-tile--count{ grid-column:1 / span 4; }
  .page-home .hm-tile--ver{ grid-column:5 / span 4; }
  .page-home .hm-tile--rank{ grid-column:9 / span 4; }

  .page-home .hm-sec{
    grid-template-columns:132px minmax(0,1fr);
    gap:32px;
    padding:62px 0;
  }
  .page-home .hm-sec__no{ font-size:96px; }

  .page-home .hm-lineupwrap{
    grid-template-columns:minmax(0,1.15fr) minmax(0,1fr);
    align-items:start;
    gap:18px;
  }
  .page-home .hm-lineup{ grid-template-columns:minmax(0,1fr); }

  .page-home .hm-export{ grid-template-columns:repeat(4,minmax(0,1fr)); }

  .page-home .hm-band__grid{
    grid-template-columns:minmax(0,1.1fr) minmax(0,1fr);
    gap:40px;
  }
  .page-home .hm-band{ padding:64px 0 72px; }
}

@media (min-width:1200px){
  .page-home .hm-toc{
    display:flex;
    flex-direction:column;
    gap:2px;
    position:fixed;
    right:14px;
    top:50%;
    transform:translateY(-50%);
    z-index:20;
  }
  .page-home .hm-toc a{
    display:flex;
    align-items:center;
    gap:8px;
    padding:6px 12px 6px 10px;
    border-radius:var(--pill);
    text-decoration:none;
    font-size:11px;
    letter-spacing:.06em;
    color:var(--txt-dim);
    transition:color var(--t) var(--ease), background var(--t) var(--ease);
  }
  .page-home .hm-toc a b{
    font-family:var(--font-mono);
    font-weight:500;
    opacity:.7;
  }
  .page-home .hm-toc a span{ display:none; }
  .page-home .hm-toc a:hover,
  .page-home .hm-toc a:focus-visible{
    background:rgba(63,167,106,.14);
    color:var(--night);
  }
  .page-home .hm-toc a[aria-current="true"]{
    background:var(--night);
    color:var(--amber-hi);
  }
  .page-home .hm-toc a[aria-current="true"] span{ display:inline; }
}

@media (min-width:1440px){
  .page-home .hm-toc{ right:26px; }
  .page-home .hm-toc a span{ display:inline; }
}

@media (prefers-reduced-motion:reduce){
  .page-home *{
    transition-duration:.01ms !important;
    animation-duration:.01ms !important;
  }
}