/* =================================================================
   Noble Blinds Sydney — HOMEPAGE-only layer
   The monograph system (tokens, sheet, masthead, plate, buttons,
   forms, calculator, cards, chrome) now lives in css/design.css and
   applies to every content page. This file holds only what exists
   nowhere else: the hero, the ticker beneath it, the paired-plate
   spread, and the calculator's homepage-only price behaviour.

   Linked LAST and ONLY from index.html.

   THE HERO IS NOT PART OF THE SYSTEM. Everything here is scoped so the
   hero image, the category strip and the floating header keep the look
   they already had. The monograph starts at the first hairline.
   ================================================================= */

/* -----------------------------------------------------------------
   1. Hero — untouched by the redesign, so its inherited chrome has to
   be restored on top of the shared layer.
   ----------------------------------------------------------------- */
body.home .hero{
  min-height:100svh;
  width:100%; max-width:none; margin:0;
  padding:8rem var(--pad) 4rem;
  border-radius:0; overflow:hidden;
  justify-content:flex-end;
}
body.home .hero::after{
  background:linear-gradient(180deg, rgba(20,20,22,.34), rgba(20,20,22,.12) 42%, rgba(20,20,22,.5));
}
@media (min-width:769px){
  body.home .hero{ justify-content:center; padding:8rem 2rem 6rem; }
  /* the header floats over the hero rather than sitting on paper */
  body.home .site-header{ background:transparent; border-bottom:none; }
}
@media (max-width:768px){
  body.home .hero{
    width:auto; max-width:none; margin:0; border-radius:0;
    min-height:100svh; padding:8rem var(--pad) 4rem;
  }
}
/* the hero keeps Noto Serif for its category strip — the only place on the
   homepage still using `--display` */
body.home .hero-cat-name{ font-family:"Noto Serif", Georgia, serif; }

/* -----------------------------------------------------------------
   2. Ticker — the six promises as metadata, flush under the hero.
   Not a decorative marquee: set in the label voice (mono caps,
   ink-soft) so it reads as a strip of facts, not a banner. The sheet
   below supplies the hairline that closes it.
   ----------------------------------------------------------------- */
.ticker{ overflow:hidden; padding:1rem 0; white-space:nowrap; }
.ticker-track{
  display:inline-flex; width:max-content; list-style:none; margin:0; padding:0;
  animation:marquee 68s linear infinite;   /* @keyframes lives in styles.css */
}
.ticker-track li{
  display:inline-flex; align-items:center;
  font-family:var(--mono); font-size:11px; font-weight:500;
  letter-spacing:.14em; text-transform:uppercase; color:var(--ink-soft);
}
.ticker-track li::after{
  content:"·"; color:var(--rule-strong);
  margin:0 clamp(1.4rem,3.4vw,2.8rem);
}
.ticker:hover .ticker-track{ animation-play-state:paused; }
@media (prefers-reduced-motion:reduce){
  .ticker{ white-space:normal; padding-inline:var(--pad); }
  .ticker-track{ animation:none; width:auto; flex-wrap:wrap; row-gap:.5rem; }
}

/* -----------------------------------------------------------------
   3. Paired plates — a monograph spread, unequal by design.
   ----------------------------------------------------------------- */
.sheet-body--plates > .plate:nth-child(1){ grid-column:1 / span 7; }
.sheet-body--plates > .plate:nth-child(2){ grid-column:8 / span 5; }

@media (max-width:1024px){
  /* the pair keeps its unequal split — 7/5 becomes 6/6 rather than stacking */
  .sheet-body--plates > .plate:nth-child(1){ grid-column:1 / span 6; }
  .sheet-body--plates > .plate:nth-child(2){ grid-column:7 / span 6; }
}
@media (max-width:760px){
  .sheet-body--plates > .plate:nth-child(1),
  .sheet-body--plates > .plate:nth-child(2){ grid-column:1 / -1; }
}

/* -----------------------------------------------------------------
   4. Calculator — the shared `--minimal` variant hides the running
   total on every step. This sheet is titled "The range, priced", so
   bring it back — but only on the step where a size has been entered.
   ----------------------------------------------------------------- */
body.home .qz:has(.qz-panel[data-panel="size"].is-active) .qz-bar-info,
body.home .qz:has(.qz-panel[data-panel="size"].is-active) .qz-bar-price{ display:flex; }
body.home .qz:has(.qz-panel[data-panel="size"].is-active) .qz-bar{ justify-content:flex-start; }

/* -----------------------------------------------------------------
   5. Online Market strip — four across on the homepage (the dedicated
   /online-market/ page sets its own denser grid).
   ----------------------------------------------------------------- */
body.home #homeDecoWrap .range-grid--dense{
  grid-template-columns:repeat(4,minmax(0,1fr)); gap:var(--gut);
}
@media (max-width:1100px){
  body.home #homeDecoWrap .range-grid--dense{ grid-template-columns:repeat(3,minmax(0,1fr)); }
}
@media (max-width:760px){
  body.home #homeDecoWrap .range-grid--dense{ grid-template-columns:repeat(2,minmax(0,1fr)); }
}