/* proto-pages-home.css: the home's own rules (templates/search/home.html) over the shared frame (proto-pages.css), in
   pertronixbrands.com's look through cl-site.css's tokens: the hero on the near-black bar with the H1 in the condensed
   italic capitals, the kit's vehicle band under it as a white card with the blue top edge (its --parts-band-* tokens
   set on the card, no kit class named), the Ignitor photo beside it; then the card grids, each under its heading and
   its group's one line. Square boxes, full-contrast text. On a phone the H1 a little bigger and the rest a step
   smaller (the phone clean-up, Greg 2026-10-29). */
@layer base, kit, site;

@layer site {

.pt-home { display: block; }

/* the hero */
.pt-hero { background: var(--site-dark); color: var(--site-on-dark); }
.pt-hero__in { display: grid; grid-template-columns: minmax(0, 1fr) 480px; align-items: center; gap: 48px; padding-top: 48px; padding-bottom: 48px; }
.pt-hero__h { font: italic 800 65px/.9 var(--site-font-heading); letter-spacing: -1px; text-transform: uppercase; color: var(--site-on-dark); }
.pt-hero__img { width: 480px; height: 480px; object-fit: cover; }
.pt-hero__finder {
  margin-top: 28px; background: var(--site-bg); color: var(--site-fg); border-top: 4px solid var(--site-accent);
  --parts-band-bg: var(--site-bg); --parts-band-ink: var(--site-fg); --parts-band-edge: var(--site-bg);
  --parts-band-set-bg: var(--site-bg); --parts-band-set-ink: var(--site-fg); --parts-band-set-edge: var(--site-bg);
  --parts-band-go: var(--site-accent); --parts-band-go-hover: var(--site-accent-strong); --parts-band-go-ink: var(--site-accent-fg);
  --parts-border: var(--site-fg); --parts-radius: var(--site-radius); --parts-font: var(--site-font-body);
  --parts-max: none; --parts-gut: 20px;
}
.pt-hero--picked .pt-hero__in { padding-top: 32px; padding-bottom: 32px; }

/* the body: the sections under the hero */
.pt-body { padding-bottom: 96px; }
.pt-home .pp-section:first-child { margin-top: 40px; }
.pt-home .pp-section > .pp-shead:first-child { margin-top: 0; }
/* a group's one line under its heading: who the kit is for */
.pt-who { font: 400 16px/1.4 var(--site-font-body); color: var(--site-fg); }
.pt-who + .pp-grid { margin-top: 16px; }


@media (max-width: 979.98px) {
  .pt-hero__in { grid-template-columns: 1fr; gap: 0; padding-top: 20px; padding-bottom: 20px; }
  .pt-hero__img { display: none; }
  .pt-hero__h { font-size: 42px; letter-spacing: -.6px; }
  .pt-hero__finder { margin-top: 16px; --parts-gut: 16px; }
  .pt-body { padding-bottom: 56px; }
  .pt-home .pp-section:first-child { margin-top: 28px; }
  .pt-who { margin-top: 8px; font-size: 14px; }
  .pt-who + .pp-grid { margin-top: 12px; }
}

}