/* Homepage only (src/index.html), the tidy pass of 2026-10-18: fewer blocks in the same visual language.
   Shared components and the homepage's base blocks (rp-sky, rp-keeps, rp-strip, rp-promo, rp-faqside ...) stay in
   assets/site.css; new pieces here carry the hm- prefix. */

/* hero: the pill rows are gone, so the H1 opens the text column */
.rp-sky__text>h1:first-child{margin-top:0}
/* SEO notes overlay on phones: the sticky header's note covers the top of the hero, so the hero's note starts
   below it (mockup chrome only) */
@media (max-width:639px){html.notes .rp-sky[data-seo]::before{top:7.5rem}}

/* need tiles: a square arch on phones keeps the four rows short */
@media (max-width:639px){.rp-cats--keeps .rp-cat__media img{aspect-ratio:1/1}}

/* reviews band: one row of four review cards, then the three comparisons as one row */
.hm-reviews .rp-card__body{gap:.4rem}
.hm-reviews .rp-card__title,#lists .rp-card__title{font-size:1.1rem}
@media (max-width:639px){.hm-reviews .rp-rv .rp-card__media img{aspect-ratio:16/10}}
.hm-vs{margin-top:clamp(2.25rem,1.6rem + 2vw,3.25rem)}
.hm-vs .rp-head{margin-bottom:1.1rem}
.hm-vs .rp-head h2{font-size:clamp(1.4rem,1.15rem + .9vw,1.8rem)}
.hm-vs .rp-duelrows{margin-bottom:0}
@media (min-width:1024px){.hm-vs .rp-duelrows{grid-template-columns:repeat(3,minmax(0,1fr))}}
/* the moon "vs" now sits on the photo's corner instead of a row of name chips that repeated the title */
.rp-duelrow__media{position:relative;display:block;width:6rem;height:6rem}
.rp-duelrow__media .rp-duelrow__vs{position:absolute;right:-.45rem;bottom:-.35rem;width:1.9rem;height:1.9rem;font-size:.75rem;box-shadow:0 0 0 3px #fff}

/* how we pick: the photo fills its column (no gap beside the tiles), the four counters are the tiles */
.hm-method{align-items:stretch}
.hm-method .rp-method__media{position:relative;top:auto;aspect-ratio:16/7}
.hm-method .rp-method__media img{position:absolute;inset:0;width:100%;height:100%;aspect-ratio:auto}
@media (min-width:640px) and (max-width:1023px){.hm-method .rp-method__media{aspect-ratio:16/6}}
@media (min-width:1024px){.hm-method .rp-method__media{aspect-ratio:auto;min-height:20rem}}
.hm-method__body{display:flex;flex-direction:column;justify-content:center;min-width:0}
.hm-tiles{display:grid;gap:.7rem;margin-top:1.35rem}
@media (min-width:640px){.hm-tiles{grid-template-columns:repeat(2,minmax(0,1fr))}}
.hm-tile{display:grid;grid-template-columns:2.75rem minmax(0,1fr);gap:.8rem;align-items:center;padding:.85rem 1rem;border-radius:var(--r-m);background:#fff;border:1px solid var(--line);box-shadow:var(--sh-1)}
.hm-tile__ico{display:grid;place-items:center;width:2.75rem;height:2.75rem;border-radius:14px;background:var(--lav);color:var(--act)}
.hm-tile:nth-child(2) .hm-tile__ico{background:var(--moon-soft);color:var(--moon-text)}
.hm-tile:nth-child(3) .hm-tile__ico{background:var(--block-tint);color:var(--night)}
.hm-tile:nth-child(4) .hm-tile__ico{background:var(--ok-tint);color:var(--ok)}
.hm-tile__top{display:flex;flex-wrap:wrap;align-items:baseline;gap:0 .4rem;font:700 .95rem/1.25 var(--display);color:var(--ink)}
.hm-tile__top b{font:800 clamp(1.4rem,1.2rem + .8vw,1.75rem)/1.05 var(--display)}
/* two tiles a row: the number sits on its own line in every tile, so no tile wraps differently */
@media (min-width:640px){.hm-tile{align-items:start}.hm-tile__top{display:block}.hm-tile__top b{display:block;margin-bottom:.1rem}}
.hm-tile__line{margin-top:.2rem;font-size:.875rem;line-height:1.4;color:var(--muted)}
.hm-method__link{align-self:flex-start;margin-top:1.25rem}
/* one column (below 1024): the heading opens the section, then the photo, the tiles and the button */
@media (max-width:1023px){
  .hm-method{gap:1.1rem}
  .hm-method__body{display:contents}
  .hm-method .rp-head__main{order:-1}
  .hm-method .hm-tiles{margin-top:.2rem}
  .hm-method__link{justify-self:start;margin-top:.15rem}
}

/* seasonal banners on phones: the photo becomes a narrow column, so each banner is one short row */
@media (max-width:639px){
  .hm-season .rp-promo{grid-template-rows:none;grid-template-columns:6.5rem minmax(0,1fr)}
  .hm-season .rp-promo__media{position:relative}
  .hm-season .rp-promo__media img{position:absolute;inset:0;width:100%;height:100%;aspect-ratio:auto}
  .hm-season .rp-promo__body{gap:.5rem;padding:1rem 1rem 1.1rem}
  .hm-season .rp-promo h2{font-size:1.25rem}
  .hm-season .rp-early{position:static;grid-column:1 / -1;justify-self:start;margin:0 1rem .9rem}
}
/* small phones: the banner button keeps to one line */
@media (max-width:399px){.hm-season .rp-promo{grid-template-columns:6rem minmax(0,1fr)}.hm-season .rp-btn{padding-inline:1rem}.hm-season .rp-btn .rp-ic{display:none}}

/* blog: the three rows share the lead card's height, so neither column ends early */
@media (max-width:639px){.hm-blog .rp-post--lead .rp-card__media img{aspect-ratio:16/10}}
@media (min-width:768px){
  .hm-blog .rp-blog>.rp-post--lead{align-self:stretch}
  .hm-blog .rp-blog__side{grid-template-rows:repeat(3,minmax(0,1fr))}
  .hm-blog .rp-post--row .rp-card__body{justify-content:center}
  /* when the rows are the taller column, the lead's photo takes the extra height, not a blank band in its body */
  .hm-blog .rp-post--lead .rp-card__media{flex:1 0 auto;aspect-ratio:3/2}
  .hm-blog .rp-post--lead .rp-card__media img{position:absolute;inset:0;height:100%;aspect-ratio:auto}
  .hm-blog .rp-post--lead .rp-card__body{flex:none}
}

/* FAQ: the night box runs the full height of the accordion beside it */
@media (min-width:1024px){#faq .rp-faqwrap{align-items:stretch}}