/* Home page sections — extends main.css with home-specific layout. */

/* ─── HERO ────────────────────────────────────────────────────────── */
.home-hero {
  display: grid;
  grid-template-columns: 6fr 5fr;
  border-bottom: 0.5px solid var(--navy);
}
@media (max-width: 860px) {
  .home-hero { grid-template-columns: 1fr; }
}
.home-hero__copy {
  padding: clamp(2.5rem, 6vw, 4.5rem) var(--gutter) clamp(2.5rem, 5vw, 3.5rem);
  border-right: 0.5px solid var(--navy);
}
@media (max-width: 860px) {
  .home-hero__copy { border-right: 0; border-bottom: 0.5px solid var(--navy); }
}
.home-hero__eyebrow { margin-bottom: 1.5rem; }
.home-hero__title {
  font-family: var(--serif);
  font-style: italic;
  font-weight: 500;
  font-size: clamp(2.4rem, 5.5vw, 4rem);
  line-height: 1.02;
  letter-spacing: -0.018em;
  color: var(--ink);
  margin: 0 0 1.25rem;
  max-width: 18ch;
}
.home-hero__lead {
  font-size: clamp(0.98rem, 1.4vw, 1.1rem);
  max-width: 42ch;
  color: var(--ink-soft);
  margin: 0 0 1.75rem;
  line-height: 1.55;
}
.home-hero__cta { display: flex; gap: 0.6rem; flex-wrap: wrap; }

/* Bottom-left of the copy block, below the CTAs. Muted and small on purpose —
   if it starts competing with the CTAs or the ASTM line, it's too big. */
.home-hero__stamp {
  margin-top: 2rem;
  color: var(--navy);
  opacity: 0.55;
}
.home-hero__stamp .usa-stamp { width: 44px; height: 44px; }

.home-hero__art {
  background: var(--paper-deep);
  position: relative;
  overflow: hidden;
  min-height: 320px;
}

/* The archival product photograph (commit 82) fills the Plate 01 panel edge to
   edge — no paper mount. Absolute inset:0 resolves against the panel's padding
   box, so the photo covers the full cell however tall the copy column makes it. */
.home-hero__photo {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  /* The tape measure runs corner-to-corner through the middle of the frame, so a
     centred crop keeps the scale reference at every width — verified at 1440,
     1024 and 390. In the measured layouts the crop is always horizontal (the
     panel is narrower than the photo's 1.329 ratio), so the vertical term is
     insurance for a short-copy layout, not something in play today. */
  object-position: center 44%;
}
@media (max-width: 860px) {
  /* Stacked, so nothing else sets the panel's height — pin it to the photo's own
     aspect ratio. That fills the panel with effectively no crop on mobile, where
     a cover-crop would otherwise be at its most aggressive. */
  .home-hero__art { aspect-ratio: 3650 / 2746; min-height: 0; }
}

/* Retained for future homepage variations — commit 81 removed the #home-hero-3d
   mount point from the template but deliberately kept static/js/home-hero.js.
   These rules are inert until that mount is rendered again. */
#home-hero-3d {
  position: absolute;
  inset: 0;
  overflow: hidden;
  cursor: grab;
}
#home-hero-3d:active { cursor: grabbing; }
#home-hero-3d canvas { display: block; width: 100%; height: 100%; }
.home-hero__art-label { z-index: 1; }
.home-hero__art-label {
  position: absolute;
  top: 1rem; right: 1rem;
  font-family: var(--mono);
  font-size: 0.65rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  /* Sits on the photograph now rather than on brand paper (commit 82), so it
     carries its own alpha instead of a blanket opacity — that keeps the halo
     below at full strength, which is what separates it from the film grain.
     Still deliberately quiet: a plate number, not a caption. */
  color: rgba(30, 42, 61, 0.82);
  text-shadow: 0 1px 5px rgba(244, 236, 219, 0.8);
}

/* ─── CATEGORY STRIP ────────────────────────────────────────────── */
.cat-strip {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
}
@media (max-width: 760px) {
  .cat-strip { grid-template-columns: 1fr; }
}
.cat-tile {
  padding: clamp(1.75rem, 3vw, 2.25rem) var(--gutter);
  border-right: 0.5px solid var(--navy);
  background: var(--paper-warm);
  transition: background 0.18s;
}
.cat-tile:last-child { border-right: 0; }
@media (max-width: 760px) {
  .cat-tile { border-right: 0; border-bottom: 0.5px solid var(--navy); }
}
.cat-tile:hover { background: var(--paper-deep); }
.cat-tile--dark {
  background: var(--navy);
  color: var(--paper);
}
.cat-tile--dark:hover { background: var(--ink); }
.cat-tile__num {
  font-family: var(--mono);
  font-size: 0.7rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--brass);
  margin-bottom: 0.5rem;
}
.cat-tile__title {
  font-family: var(--serif);
  font-style: italic;
  font-size: clamp(1.4rem, 2.2vw, 1.75rem);
  line-height: 1;
  letter-spacing: -0.01em;
  margin: 0 0 0.5rem;
}
.cat-tile__body {
  font-size: 0.88rem;
  line-height: 1.55;
  opacity: 0.85;
  max-width: 30ch;
}

/* ─── TRUST SIGNALS ──────────────────────────────────────────────── */
.trust {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: clamp(1.5rem, 3vw, 2.5rem);
  padding-top: clamp(2.25rem, 4vw, 3.5rem);
  padding-bottom: clamp(2.25rem, 4vw, 3.5rem);
}
@media (max-width: 760px) {
  .trust { grid-template-columns: 1fr; }
}
.trust__num {
  font-family: var(--mono);
  font-size: 0.68rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--brass);
  margin-bottom: 0.5rem;
}
.trust__title {
  font-family: var(--serif);
  font-style: italic;
  font-size: 1.15rem;
  line-height: 1.25;
  margin: 0 0 0.4rem;
}
.trust__body {
  font-size: 0.85rem;
  line-height: 1.55;
  opacity: 0.78;
}

/* ─── LARGE DIAMETER BAND ───────────────────────────────────────── */
/* Compact by design: the small-tube buyer should flick past it and land
   on "Ready to ship" — one viewport max on mobile. */
.ld-band {
  padding-top: clamp(2rem, 4vw, 3rem);
  padding-bottom: clamp(2rem, 4vw, 3rem);
}
.ld-band__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem 2.5rem;
  flex-wrap: wrap;
}
.ld-band__title {
  color: var(--paper);
  margin: 0.5rem 0 0.5rem;
}
.ld-band__body {
  font-size: 0.9rem;
  line-height: 1.55;
  opacity: 0.85;
  max-width: 56ch;
  margin: 0;
}
.ld-band__cta {
  border-color: var(--paper);
  color: var(--paper);
  flex-shrink: 0;
}
.ld-band__cta:hover {
  background: var(--brass);
  border-color: var(--brass);
  color: var(--paper);
}

/* ─── POPULAR CUTS ───────────────────────────────────────────────── */
.popular__head {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  margin-bottom: 1.5rem;
  flex-wrap: wrap;
  gap: 1rem;
}
.popular__viewall {
  font-family: var(--mono);
  font-size: 0.72rem;
  letter-spacing: 0.13em;
  text-transform: uppercase;
}
.popular__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0.75rem;
}
@media (max-width: 760px) {
  .popular__grid { grid-template-columns: 1fr 1fr; }
}

/* ─── STORY ─────────────────────────────────────────────────────── */
.story {
  display: grid;
  grid-template-columns: 1fr 2fr;
  gap: clamp(2rem, 4vw, 3.5rem);
}
@media (max-width: 860px) {
  .story { grid-template-columns: 1fr; }
}
.story__year {
  font-family: var(--serif);
  font-weight: 400;
  font-size: clamp(4rem, 10vw, 7.5rem);
  line-height: 0.85;
  letter-spacing: -0.03em;
  color: var(--brass);
}
.story__sub {
  font-family: var(--mono);
  font-size: 0.7rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--navy);
  margin-top: 0.4rem;
}
.story__lead {
  font-family: var(--serif);
  font-style: italic;
  font-size: clamp(1.15rem, 2vw, 1.4rem);
  line-height: 1.35;
  letter-spacing: -0.005em;
  margin: 0 0 1rem;
}
.story__body {
  font-size: 1rem;
  line-height: 1.55;
  opacity: 0.88;
  max-width: 60ch;
}

/* ─── HERO COPY (commit 83 positioning) ────────────────────────────
   The left column now carries eyebrow → H1 → sublede → two body paragraphs →
   CTAs → aside, so it balances the archival photo instead of leaving the
   column half empty. Everything stays left-aligned: centred text reads
   awkwardly against a hard-edged photo on the right. */
.home-hero__sublede {
  font-size: clamp(1.1rem, 1.75vw, 1.35rem);
  line-height: 1.35;
  font-weight: 500;
  color: var(--ink);
  max-width: 34ch;
  margin: 0 0 1.25rem;
}
.home-hero__lead { margin-bottom: 1rem; }
/* The operational line is the shortest thing in the column — mono-ish weight
   and a rule above set it apart from the narrative paragraph without another
   heading. */
.home-hero__lead--ops {
  max-width: 38ch;
  padding-top: 0.9rem;
  border-top: 0.5px solid var(--rule);
  color: var(--ink);
  margin-bottom: 1.6rem;
}
.home-hero__aside { margin-bottom: 0.25rem; }
.home-hero__stamp { margin-top: 1.5rem; }

@media (max-width: 860px) {
  /* Stacked, so the column is full-width — let the measure grow with it
     rather than staying pinned to the desktop ch limits. */
  .home-hero__sublede,
  .home-hero__lead--ops { max-width: none; }
}