/* ==========================================================================
   Celliara Homepage V2 — the existing homepage, refined (staging prototype)

   Loaded only when template-homepage-v2.php renders (home.css is untouched and
   not loaded). Same publication as the Review, Best Of, Compare, Category Hub,
   Guide and Directory V2 families (tokens copied, not imported). The hero
   artwork stays the one bold element; everything around it is quiet: ivory
   serif headings under a short gold rule, fine borders, charcoal surfaces.
   Namespace: .hp2 / .hp2-*.
   ========================================================================== */

/* Metric-matched fallbacks: while Cormorant Garamond and Inter load, the local fallback is scaled to the same
   average advance width (measured 2026-10-13 on the homepage copy), so line breaks do not change when the web
   fonts swap in: no layout shift in the hero. The first installed source in each family wins. */
@font-face { font-family: "hp2 serif fb"; src: local("Times New Roman"), local("TimesNewRomanPSMT"), local("Liberation Serif"), local("Tinos"); size-adjust: 96.4%; }
@font-face { font-family: "hp2 serif fb noto"; src: local("Noto Serif"), local("NotoSerif-Regular"); size-adjust: 82.2%; }
@font-face { font-family: "hp2 serif fb dejavu"; src: local("DejaVu Serif"), local("DejaVuSerif"); size-adjust: 78.6%; }
@font-face { font-family: "hp2 sans fb"; src: local("Arial"), local("ArialMT"), local("Liberation Sans"), local("Arimo"); size-adjust: 106%; }
@font-face { font-family: "hp2 sans fb roboto"; src: local("Roboto"), local("Roboto-Regular"); size-adjust: 106.7%; }
@font-face { font-family: "hp2 sans fb dejavu"; src: local("DejaVu Sans"), local("DejaVuSans"); size-adjust: 94.3%; }

.page-homepage-v2 {
  --hp2-ink: #050504;
  --hp2-card: #0f0f0d;
  --hp2-card-hover: #14140f;
  --hp2-line: rgba(255, 255, 255, 0.1);
  --hp2-card-line: rgba(255, 255, 255, 0.13);
  --hp2-gold: #c8a86a;
  --hp2-gold-bright: #e2c88e;
  --hp2-gold-line: rgba(200, 168, 106, 0.4);
  --hp2-ivory: #f1ecdf;
  --hp2-copy: #d3ccbd;
  --hp2-muted: #a0998a;

  --hp2-serif: "Cormorant Garamond", "hp2 serif fb", "hp2 serif fb noto", "hp2 serif fb dejavu", serif;
  --hp2-sans: Inter, "hp2 sans fb", "hp2 sans fb roboto", "hp2 sans fb dejavu", sans-serif;

  --hp2-wide: 1320px;
  --hp2-gutter: clamp(18px, 4vw, 48px);
  --hp2-ease: cubic-bezier(0.2, 0.7, 0.2, 1);

  background: var(--hp2-ink);
  color: var(--hp2-copy);
  font-family: var(--hp2-sans);
}

html:has(> body.page-homepage-v2) {
  color-scheme: dark;
}

html:has(> body.page-homepage-v2),
body.page-homepage-v2 {
  overflow-x: clip !important;
}

.page-homepage-v2 #page.site.grid-container {
  --max-width: none;
}

.page-homepage-v2 .hp2 {
  margin-inline: calc(-1 * var(--spacing-md, 16px));
  display: block;
  background: var(--hp2-ink);
  color: var(--hp2-copy);
  font-size: 1.0625rem;
  line-height: 1.65;
  font-variant-numeric: lining-nums;
  -webkit-font-smoothing: antialiased;
}

.hp2 *,
.hp2 *::before,
.hp2 *::after {
  box-sizing: border-box;
}

/* Site chrome styles bare elements (p/h2 margins, every <section> padded). Reset at low specificity. */
html :where(.hp2) p,
html :where(.hp2) ul,
html :where(.hp2) ol,
html :where(.hp2) dl,
html :where(.hp2) dd,
html :where(.hp2) h1,
html :where(.hp2) h2,
html :where(.hp2) h3 {
  margin: 0;
}

html :where(.hp2) ul,
html :where(.hp2) ol {
  list-style: none;
  padding: 0;
}

html :where(.hp2) section,
html :where(.hp2) header {
  padding: 0;
}

.hp2 a {
  color: inherit;
  text-decoration: none;
}

.hp2 a:focus-visible {
  outline: 2px solid var(--hp2-gold-bright);
  outline-offset: 3px;
  border-radius: 2px;
}

.hp2-wrap {
  width: 100%;
  max-width: calc(var(--hp2-wide) + 2 * var(--hp2-gutter));
  margin-inline: auto;
  padding-inline: var(--hp2-gutter);
}

/* ── Buttons: the homepage's pill CTAs, kept ─────────────────────────────── */
.hp2-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 48px;
  padding: 0 1.6em;
  border-radius: 999px;
  font-size: 0.9375rem;
  font-weight: 600;
  letter-spacing: 0.01em;
  transition: background-color 0.2s var(--hp2-ease), border-color 0.2s var(--hp2-ease), color 0.2s var(--hp2-ease), box-shadow 0.2s var(--hp2-ease);
}

.hp2 .hp2-btn--primary {
  background: var(--hp2-gold);
  color: #14110a;
  box-shadow: 0 0 18px rgba(200, 168, 106, 0.16);
}

.hp2 .hp2-btn--primary:hover {
  background: var(--hp2-gold-bright);
  box-shadow: 0 0 26px rgba(200, 168, 106, 0.24);
}

.hp2 .hp2-btn--secondary {
  border: 1px solid var(--hp2-gold-line);
  color: var(--hp2-gold-bright);
}

.hp2 .hp2-btn--secondary:hover {
  border-color: var(--hp2-gold);
  background: rgba(200, 168, 106, 0.08);
}

.hp2-btn--block {
  width: 100%;
}

/* ── Hero ────────────────────────────────────────────────────────────────── */
.hp2-hero {
  position: relative;
  padding-block: clamp(28px, 5vw, 72px) clamp(40px, 6vw, 88px);
  overflow: hidden;
}

.hp2-hero__grid {
  display: grid;
  grid-template-areas: "title" "art" "deck" "line" "actions" "commitments";
  align-items: center;
}

/* Phones: the copy column dissolves so the artwork sits between the headline and the deck. */
.hp2-hero__copy {
  display: contents;
}

.hp2-hero__title {
  grid-area: title;
  font-family: var(--hp2-serif);
  font-weight: 500;
  font-size: clamp(2.35rem, 4.6vw + 0.6rem, 4.5rem);
  line-height: 1.04;
  letter-spacing: -0.01em;
  color: var(--hp2-ivory);
  text-wrap: balance;
  max-width: 13em;
}

.hp2-hero__deck {
  grid-area: deck;
  font-size: clamp(1.0625rem, 0.4vw + 0.95rem, 1.1875rem);
  line-height: 1.6;
  color: var(--hp2-copy);
  max-width: 34em;
  margin-top: 4px;
}

.hp2-hero__line {
  grid-area: line;
  margin-top: 18px;
  font-size: 0.9375rem;
  font-weight: 500;
  color: var(--hp2-gold);
  max-width: 34em;
  text-wrap: pretty;
}

.hp2-hero__actions {
  grid-area: actions;
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 28px;
}

.hp2-hero__commitments {
  grid-area: commitments;
  display: flex;
  flex-wrap: wrap;
  gap: 8px 0;
  margin-top: 28px;
  font-size: 0.8125rem;
  color: var(--hp2-muted);
}

.hp2-hero__commitments {
  column-gap: 18px;
}

.hp2-hero__commitments li {
  padding-left: 12px;
  border-left: 1px solid var(--hp2-gold-line);
}

.hp2-nowrap {
  white-space: nowrap;
}

.hp2-hero__art {
  grid-area: art;
  position: relative;
  margin-inline: calc(-1 * var(--hp2-gutter));
  height: clamp(210px, 66vw, 360px);
  margin-block: 4px 8px;
}

.hp2-hero__art img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 46% 42%;
  /* Dissolves every edge into the page: no visible frame or seam. */
  -webkit-mask-image: radial-gradient(closest-side ellipse at 55% 50%, #000 58%, rgba(0, 0, 0, 0.55) 80%, transparent 100%);
  mask-image: radial-gradient(closest-side ellipse at 55% 50%, #000 58%, rgba(0, 0, 0, 0.55) 80%, transparent 100%);
}

@media (max-width: 479px) {
  .hp2-hero__actions .hp2-btn {
    width: 100%;
  }
}

@media (min-width: 768px) {
  .hp2-hero__grid {
    grid-template-areas: "copy art";
    grid-template-columns: minmax(0, 13fr) minmax(0, 11fr);
    gap: clamp(24px, 4vw, 64px);
  }

  .hp2-hero__copy {
    display: block;
    grid-area: copy;
  }

  .hp2-hero__deck {
    margin-top: 24px;
  }

  .hp2-hero__art {
    margin: 0 calc(-1 * var(--hp2-gutter)) 0 0;
    height: auto;
    aspect-ratio: 3 / 4;
    max-height: 800px;
  }

  .hp2-hero__art img {
    object-position: 58% 40%;
    -webkit-mask-image: radial-gradient(closest-side ellipse at 52% 48%, #000 62%, rgba(0, 0, 0, 0.5) 84%, transparent 100%);
    mask-image: radial-gradient(closest-side ellipse at 52% 48%, #000 62%, rgba(0, 0, 0, 0.5) 84%, transparent 100%);
  }
}

/* ── Sections: fine rule between, serif heading under a short gold rule ──── */
.hp2-section {
  padding-block: clamp(44px, 7vw, 104px);
  border-top: 1px solid var(--hp2-line);
}

.hp2-head {
  margin-bottom: clamp(24px, 3vw, 40px);
}

.hp2-head__title {
  font-family: var(--hp2-serif);
  font-weight: 500;
  font-size: clamp(1.95rem, 2vw + 1.2rem, 2.75rem);
  line-height: 1.1;
  color: var(--hp2-ivory);
  text-wrap: balance;
}

.hp2-head__title::before {
  content: "";
  display: block;
  width: 36px;
  height: 1px;
  margin-bottom: 18px;
  background: var(--hp2-gold);
}

.hp2-head__deck {
  margin-top: 14px;
  max-width: 40em;
  color: var(--hp2-copy);
}

.hp2-routes {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 28px;
  margin-top: clamp(24px, 3vw, 36px);
  font-size: 0.9375rem;
  font-weight: 600;
}

.hp2-routes a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  color: var(--hp2-gold-bright);
}

.hp2-routes a::after,
.hp2-cat__cue::after,
.hp2-text__cue::after {
  content: "\2192";
  margin-left: 0.4em;
}

.hp2-routes a:hover {
  text-decoration: underline;
  text-underline-offset: 4px;
}

/* ── Explore by device: device categories (compact) ─────────────────────── */
.hp2-cats__list {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}

@media (max-width: 359px) {
  .hp2-cats__list {
    grid-template-columns: minmax(0, 1fr);
  }
}

@media (min-width: 768px) {
  .hp2-cat {
    padding: 20px 22px 18px;
  }
}

@media (min-width: 1024px) {
  .hp2-cats__list {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 12px;
  }
}

.hp2-cat {
  display: flex;
  flex-direction: column;
  height: 100%;
  min-height: 44px;
  padding: 16px 16px 14px;
  border: 1px solid var(--hp2-card-line);
  border-radius: 4px;
  background: var(--hp2-card);
  transition: border-color 0.2s var(--hp2-ease), background-color 0.2s var(--hp2-ease);
}

.hp2-cat__name {
  font-family: var(--hp2-serif);
  font-weight: 600;
  font-size: clamp(1.2rem, 0.8vw + 1rem, 1.45rem);
  line-height: 1.15;
  color: var(--hp2-ivory);
}

.hp2-cat__line {
  margin-top: 4px;
  font-size: clamp(0.8125rem, 0.3vw + 0.75rem, 0.9375rem);
  line-height: 1.5;
  color: var(--hp2-muted);
}

.hp2-cat__cue {
  margin-top: auto;
  padding-top: 10px;
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--hp2-gold);
}

.hp2-cat:hover {
  border-color: var(--hp2-gold-line);
  background: var(--hp2-card-hover);
}

.hp2-cat:hover .hp2-cat__cue {
  text-decoration: underline;
  text-underline-offset: 4px;
}

/* ── Strong places to start: three focused product cards ────────────────── */
.hp2-disclosure {
  margin: -8px 0 20px;
  max-width: 60em;
  font-size: 0.8125rem;
  line-height: 1.55;
  color: var(--hp2-muted);
}

.hp2-disclosure a {
  color: var(--hp2-copy);
  text-decoration: underline;
  text-underline-offset: 3px;
}

.hp2-picks__list {
  display: grid;
  gap: 16px;
}

@media (min-width: 1024px) {
  .hp2-picks__list {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 20px;
  }
}

.hp2-pick__card {
  display: flex;
  flex-direction: column;
  height: 100%;
  border: 1px solid var(--hp2-card-line);
  border-radius: 4px;
  background: var(--hp2-card);
  overflow: hidden;
}

.hp2-pick__stage {
  position: relative;
  overflow: hidden;
  aspect-ratio: 4 / 3;
  background: radial-gradient(ellipse at 50% 55%, #1b1a15 0%, #0f0f0d 72%);
  border-bottom: 1px solid var(--hp2-line);
}

@media (max-width: 639px) {
  .hp2-pick__stage {
    aspect-ratio: 16 / 9;
  }

  .hp2-pick__stage img {
    padding: 4% 10%;
  }

  .hp2-pick__body {
    padding: 18px 18px 16px;
  }
}

.hp2-pick__media {
  position: absolute;
  inset: 0;
  display: block;
}

/* The card clips overflow, so the focus ring sits just inside the stage. */
.hp2 .hp2-pick__media:focus-visible {
  outline-offset: -4px;
}

.hp2-pick__media img {
  transition: transform 0.35s var(--hp2-ease);
}

.hp2-pick__media:hover img {
  transform: scale(1.025);
}

.hp2-pick__title-link {
  /* Inline vertical padding enlarges the touch target to 44px+ without moving the line box. */
  padding-block: 7px;
  transition: color 0.2s var(--hp2-ease);
}

.hp2-pick__title-link:hover {
  color: var(--hp2-gold-bright);
  text-decoration: underline;
  text-decoration-color: var(--hp2-gold-line);
  text-decoration-thickness: 1px;
  text-underline-offset: 5px;
}

.hp2-pick__stage img {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
  padding: 7% 12%;
}

.hp2-pick__body {
  display: flex;
  flex: 1;
  flex-direction: column;
  padding: 22px 24px 24px;
}

.hp2-pick__award {
  margin-bottom: 10px;
  font-size: 0.8125rem;
  line-height: 1.45;
  color: var(--hp2-muted);
}

.hp2-pick__award span {
  font-weight: 600;
  color: var(--hp2-gold);
}

.hp2-pick__award a {
  color: var(--hp2-copy);
  text-decoration: underline;
  text-decoration-color: var(--hp2-gold-line);
  text-underline-offset: 3px;
}

.hp2-pick__award a:hover {
  color: var(--hp2-ivory);
  text-decoration-color: var(--hp2-gold);
}

.hp2-pick__name {
  font-family: var(--hp2-serif);
  font-weight: 600;
  font-size: 1.6rem;
  line-height: 1.12;
  color: var(--hp2-ivory);
}

.hp2-pick__score {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 2px 6px;
  margin-top: 10px;
}

.hp2-pick__value {
  font-family: var(--hp2-serif);
  font-weight: 600;
  font-size: 2.1rem;
  line-height: 1;
  color: var(--hp2-gold);
}

.hp2-pick__denom {
  font-size: 0.875rem;
  color: var(--hp2-muted);
}

.hp2-pick__band {
  margin-left: 6px;
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  color: var(--hp2-copy);
}

.hp2-pick__summary {
  margin-top: 12px;
  font-size: 0.9375rem;
  line-height: 1.6;
  color: var(--hp2-copy);
}

.hp2-pick__actions {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  margin-top: auto;
  padding-top: 20px;
}

.hp2-pick__buy {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  font-size: 0.875rem;
  color: var(--hp2-copy);
}

.hp2-pick__buy strong {
  margin-right: 0.3em;
  font-weight: 600;
  color: var(--hp2-ivory);
}

.hp2-pick__buy:hover {
  text-decoration: underline;
  text-underline-offset: 4px;
}

@media (min-width: 640px) and (max-width: 1023px) {
  .hp2-pick__card {
    display: grid;
    grid-template-columns: minmax(0, 2fr) minmax(0, 3fr);
  }

  .hp2-pick__stage {
    aspect-ratio: auto;
    min-height: 100%;
    border-bottom: 0;
    border-right: 1px solid var(--hp2-line);
  }
}

/* ── Routine fit ─────────────────────────────────────────────────────────── */
.hp2-routine__list {
  display: grid;
  gap: 16px;
}

@media (min-width: 900px) {
  .hp2-routine__list {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 20px;
  }
}

.hp2-routine__item {
  display: flex;
  flex-direction: column;
  padding: 22px 24px 20px;
  border: 1px solid var(--hp2-card-line);
  border-top: 2px solid var(--hp2-gold);
  border-radius: 4px;
  background: var(--hp2-card);
}

.hp2-routine__tech {
  font-family: var(--hp2-serif);
  font-weight: 600;
  font-size: 1.5rem;
  line-height: 1.15;
  color: var(--hp2-ivory);
}

.hp2-routine__facts {
  margin-top: 14px;
}

.hp2-routine__fact {
  padding-block: 10px;
  border-top: 1px solid var(--hp2-line);
}

.hp2-routine__fact dt {
  font-size: 0.8125rem;
  font-weight: 600;
  color: var(--hp2-ivory);
}

.hp2-routine__fact dd {
  margin-top: 2px;
  font-size: 0.9375rem;
  line-height: 1.55;
  color: var(--hp2-copy);
}

.hp2-routine__link {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  margin-top: auto;
  padding-top: 6px;
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--hp2-gold-bright);
}

.hp2-routine__link:hover {
  text-decoration: underline;
  text-underline-offset: 4px;
}

.hp2-routine__note {
  margin-top: 20px;
  max-width: 48em;
  font-size: 0.9375rem;
  color: var(--hp2-muted);
}

/* ── Text cards: comparisons, guides, library ────────────────────────────── */
.hp2-grid {
  display: grid;
  gap: 14px;
}

@media (min-width: 768px) {
  .hp2-grid--two {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 18px;
  }

  .hp2-grid--three {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 18px;
  }
}

@media (min-width: 1024px) {
  .hp2-grid--three {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

@media (min-width: 1100px) {
  .hp2-grid--compact {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}

.hp2-text__link {
  display: flex;
  flex-direction: column;
  height: 100%;
  padding: 22px 24px 18px;
  border: 1px solid var(--hp2-card-line);
  border-radius: 4px;
  background: var(--hp2-card);
  transition: border-color 0.2s var(--hp2-ease), background-color 0.2s var(--hp2-ease);
}

.hp2-text__label {
  font-size: 0.8125rem;
  font-weight: 600;
  color: var(--hp2-gold);
}

.hp2-text__title {
  margin-top: 6px;
  font-family: var(--hp2-serif);
  font-weight: 600;
  font-size: 1.5rem;
  line-height: 1.15;
  color: var(--hp2-ivory);
}

.hp2-text__summary {
  margin-top: 10px;
  font-size: 0.9375rem;
  line-height: 1.6;
  color: var(--hp2-copy);
}

.hp2-text__foot {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 8px 16px;
  margin-top: auto;
  padding-top: 16px;
  font-size: 0.875rem;
}

.hp2-text__meta {
  color: var(--hp2-muted);
}

.hp2-text__cue {
  margin-left: auto;
  font-weight: 600;
  color: var(--hp2-gold);
}

.hp2-text__link:hover {
  border-color: var(--hp2-gold-line);
  background: var(--hp2-card-hover);
}

.hp2-text__link:hover .hp2-text__cue {
  text-decoration: underline;
  text-underline-offset: 4px;
}

/* ── How we work ─────────────────────────────────────────────────────────── */
.hp2-trust__list {
  display: grid;
  gap: 24px;
}

@media (min-width: 640px) {
  .hp2-trust__list {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 28px 32px;
  }
}

@media (min-width: 1100px) {
  .hp2-trust__list {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}

.hp2-trust__item {
  padding-left: 18px;
  border-left: 1px solid var(--hp2-gold-line);
}

.hp2-trust__title {
  font-family: var(--hp2-serif);
  font-weight: 600;
  font-size: 1.35rem;
  line-height: 1.2;
  color: var(--hp2-ivory);
}

.hp2-trust__item p {
  margin-top: 8px;
  font-size: 0.9375rem;
  line-height: 1.6;
  color: var(--hp2-copy);
}

/* ── Where to go next ────────────────────────────────────────────────────── */
.hp2-onward {
  padding-bottom: clamp(64px, 8vw, 120px);
}

.hp2-onward__list {
  display: grid;
  gap: 12px;
}

@media (min-width: 640px) {
  .hp2-onward__list {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (min-width: 1024px) {
  .hp2-onward__list {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 16px;
  }
}

.hp2-onward__tile {
  display: flex;
  flex-direction: column;
  gap: 6px;
  height: 100%;
  padding: 22px 24px;
  border: 1px solid var(--hp2-gold-line);
  border-radius: 4px;
  transition: border-color 0.2s var(--hp2-ease), background-color 0.2s var(--hp2-ease);
}

.hp2-onward__label {
  font-family: var(--hp2-serif);
  font-weight: 600;
  font-size: 1.55rem;
  line-height: 1.1;
  color: var(--hp2-ivory);
}

.hp2-onward__label::after {
  content: "\2192";
  margin-left: 0.35em;
  font-family: var(--hp2-sans);
  font-size: 0.75em;
  color: var(--hp2-gold);
}

.hp2-onward__text {
  font-size: 0.9375rem;
  line-height: 1.55;
  color: var(--hp2-copy);
}

.hp2-onward__tile:hover {
  border-color: var(--hp2-gold);
  background: rgba(200, 168, 106, 0.05);
}

@media (prefers-reduced-motion: reduce) {
  .hp2 *,
  .hp2 *::before,
  .hp2 *::after {
    transition: none !important;
  }
  .hp2-pick__media:hover img {
    transform: none;
  }
}