/* Public data and zodiac pages: approved Open Design direction. */
.public-site {
  --pd-ink: #142126;
  --pd-paper: #f4f4ef;
  --pd-white: #fbfbf7;
  --pd-ember: #d45a45;
  --pd-ember-ink: #a33d2e;
  --pd-brass: #a9916c;
  --pd-fog: #8ba0a3;
  --pd-rule: #d8d5cc;
  --pd-soft: #425458;
}

.public-site :is(.compare-page, .model-detail, .compare-timeline, .horoscope-wrap, .horoscope-detail-wrap) {
  color: var(--pd-ink);
}

/* Compare: a dated decision tool, with a compact catalogue rather than card chrome. */
.public-site .compare-page {
  max-width: 1120px;
  margin-top: -3rem;
  padding-bottom: 6rem;
}

.public-site .compare-masthead {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1.45fr) minmax(300px, .55fr);
  gap: clamp(2rem, 6vw, 5rem);
  align-items: end;
  padding: clamp(3.25rem, 7vw, 5.75rem) 0 clamp(3rem, 6vw, 5rem);
  border: 0;
  color: var(--pd-paper);
}

.public-site .compare-masthead::before,
.public-site .compare-missing::before,
.public-site .model-detail-hero::before,
.public-site .compare-timeline > .page-header::before,
.public-site .horoscope-wrap > .page-header::before,
.public-site .horoscope-detail-wrap > .page-header::before {
  content: "";
  position: absolute;
  z-index: -1;
  inset: 0;
  background: var(--pd-ink);
  box-shadow: 0 0 0 100vmax var(--pd-ink);
  clip-path: inset(0 -100vmax);
}

.public-site .compare-title {
  max-width: 10ch;
  color: var(--pd-paper);
  font-family: var(--font-display);
  font-size: clamp(3.8rem, 8vw, 7rem);
  font-weight: 400;
  letter-spacing: -.065em;
  line-height: .9;
}

.public-site .compare-masthead-aside {
  display: block;
  max-width: 36ch;
  margin: 0;
}

.public-site .compare-deck {
  color: #c7d0cd;
  font-size: 1.05rem;
  line-height: 1.6;
}

.public-site .compare-freshness {
  display: grid;
  gap: .45rem;
  margin-top: 1.4rem;
  padding-top: 1rem;
  border-top: 1px solid var(--pd-brass);
}

.public-site .compare-freshness span,
.public-site .compare-freshness a {
  color: var(--pd-fog);
  font-size: .78rem;
  font-weight: 500;
  letter-spacing: 0;
  text-transform: none;
}

.public-site .compare-freshness a {
  color: var(--pd-paper);
  text-decoration: underline;
  text-decoration-color: var(--pd-brass);
  text-underline-offset: .3em;
}

.public-site .compare-filter-panel {
  margin-top: 2.25rem;
  padding: 1.2rem 0 1rem;
  border-color: var(--pd-rule);
}

.public-site .filter-title,
.public-site .compare-section-hd h2 {
  color: var(--pd-ink);
  font-family: var(--font-body);
  font-weight: 650;
}

.public-site .filter-title { font-size: 1rem; }
.public-site .filter-reset {
  min-height: 44px;
  color: var(--pd-soft);
  border-color: var(--pd-rule);
}

.public-site .filter-label {
  color: var(--pd-soft);
  font-size: .78rem;
  font-weight: 500;
  letter-spacing: 0;
  text-transform: none;
}

.public-site .filter-chips { gap: .2rem .9rem; }
.public-site .filter-chip {
  min-height: 44px;
  padding: .45rem 0 .3rem;
  border: 0;
  border-bottom: 2px solid transparent;
  border-radius: 0;
  color: var(--pd-soft);
  background: transparent;
  font-size: .8rem;
  font-weight: 500;
}

.public-site .filter-chip:hover { border-color: var(--pd-rule); }
.public-site .filter-chip.is-active,
.public-site .filter-chip[aria-pressed="true"] {
  border-color: var(--pd-ember);
  background: transparent;
  color: var(--pd-ink);
}

.public-site .compare-top-picks,
.public-site .compare-catalog { padding-top: clamp(3rem, 6vw, 4.75rem); }

.public-site .compare-top-picks-head,
.public-site .compare-catalog-head {
  grid-template-columns: minmax(180px, .45fr) minmax(300px, 1fr);
  align-items: baseline;
  border-bottom: 1px solid var(--pd-ink);
}

.public-site .compare-section-hd h2 {
  font-size: clamp(1.65rem, 3vw, 2.15rem);
  letter-spacing: -.035em;
}

.public-site .compare-section-lead,
.public-site .filter-hint { color: var(--pd-soft); }

.public-site .top-grid { border-color: var(--pd-ink); }
.public-site .top-grid .model-card {
  padding-top: 1.5rem;
  padding-bottom: 1.6rem;
}
.public-site .top-grid .model-card + .model-card { border-color: var(--pd-rule); }

.public-site .card-head h3 {
  color: var(--pd-ink);
  font-family: var(--font-display);
  font-size: clamp(1.35rem, 2vw, 1.7rem);
  font-weight: 500;
}

.public-site .provider,
.public-site .verdict,
.public-site .fit-lines > div,
.public-site .stats,
.public-site .meta-pill { color: var(--pd-soft); }

.public-site .pick-badge,
.public-site .fit-lines .bad .fit-mark { color: var(--pd-ember-ink); }
.public-site .fit-mark { color: #547563; }
.public-site .model-metrics { border-color: var(--pd-rule); }
.public-site .model-metrics strong { color: var(--pd-ink); }

.public-site .compare-catalog-columns,
.public-site .compare-grid[data-card-grid] .model-card { border-color: var(--pd-rule); }

.public-site .compare-grid[data-card-grid] .model-card {
  grid-template-columns: minmax(155px, .68fr) minmax(220px, 1.08fr) minmax(220px, 1fr) minmax(185px, .88fr);
  gap: 1.35rem;
  padding: 1.15rem 0 1.25rem;
}

.public-site .compare-grid[data-card-grid] .model-card:hover { background: rgba(251, 251, 247, .55); }
.public-site .card-detail-cta { color: var(--pd-ember-ink); }
.public-site .compare-methodology { border-color: var(--pd-ink); }
.public-site .compare-methodology summary { min-height: 52px; align-items: center; }
.public-site .compare-missing {
  position: relative;
  z-index: 0;
  min-height: 52vh;
  margin-top: 0;
  padding: clamp(3.25rem, 7vw, 5.75rem) 0 clamp(3rem, 6vw, 5rem);
  border: 0;
  color: var(--pd-paper);
}
.public-site .compare-missing .compare-kicker { color: var(--pd-brass); }
.public-site .compare-missing h1 { color: var(--pd-paper); }
.public-site .compare-missing p:last-child { color: #c7d0cd; }

/* Model detail: evidence remains explicit, but reads like an editorial report. */
.public-site .model-detail {
  max-width: 840px;
  padding-bottom: 7rem;
}

.public-site .model-detail-hero {
  position: relative;
  z-index: 0;
  margin: -3rem 0 3.5rem;
  padding: clamp(3rem, 7vw, 5.25rem) 0 clamp(2.75rem, 6vw, 4.5rem);
  color: var(--pd-paper);
}

.public-site .model-detail .detail-back,
.public-site .model-detail .detail-provider { color: var(--pd-fog); }
.public-site .model-detail .detail-back:hover { color: var(--pd-paper); }
.public-site .model-detail .detail-kicker { color: var(--pd-brass); }
.public-site .model-detail .detail-kicker::before { background: var(--pd-brass); }
.public-site .model-detail .detail-h1 {
  color: var(--pd-paper);
  font-size: clamp(3.2rem, 7vw, 5.8rem);
  line-height: .94;
  letter-spacing: -.055em;
}

.public-site .model-detail .detail-meta-pill {
  border-color: rgba(244, 244, 239, .25);
  border-radius: 0;
  background: transparent;
  color: #c7d0cd;
}

.public-site .model-detail .detail-headline {
  max-width: 66ch;
  color: var(--pd-paper);
  font-size: 1.15rem;
}

.public-site .model-detail .detail-verdict {
  max-width: 68ch;
  margin-bottom: 0;
  border-left-color: var(--pd-ember);
  border-radius: 0;
  background: rgba(255, 255, 255, .06);
  color: #d7ddda;
}
.public-site .model-detail .detail-verdict-label { color: var(--pd-brass); }

.public-site .model-detail .detail-section {
  padding: 1.65rem 0 2rem;
  border: 0;
  border-bottom: 1px solid var(--pd-rule);
  border-radius: 0;
  background: transparent;
}

.public-site .model-detail .detail-section-h2 {
  color: var(--pd-brass);
  font-size: .75rem;
  letter-spacing: .05em;
}

.public-site .model-detail .detail-prose {
  max-width: 70ch;
  font-size: 1.02rem;
}

.public-site .model-detail .detail-stat-cell {
  padding: 1rem 0;
  border: 0;
  border-top: 1px solid var(--pd-rule);
  border-radius: 0;
  background: transparent;
}

.public-site .model-detail .detail-stat-cell strong {
  color: var(--pd-ink);
  font-size: 1.65rem;
}

.public-site .model-detail .detail-fit-grid div {
  padding: 1rem 1.1rem;
  border-radius: 0;
}

.public-site .model-detail .detail-source-list li {
  border: 0;
  border-bottom: 1px solid var(--pd-rule);
  border-radius: 0;
  background: transparent;
}

/* Timeline: it honestly stays empty until two snapshots exist. */
.public-site .compare-timeline { padding-bottom: 6rem; }
.public-site .compare-timeline > .page-header {
  position: relative;
  z-index: 0;
  margin: -3rem 0 2rem;
  padding: clamp(3rem, 7vw, 5rem) 0 clamp(2.75rem, 6vw, 4rem);
  border: 0;
}
.public-site .compare-timeline .page-title,
.public-site .compare-timeline .page-title em { color: var(--pd-paper); }
.public-site .compare-timeline .page-eyebrow { color: var(--pd-brass); }
.public-site .compare-timeline .page-subtitle { color: #c7d0cd; }
.public-site .compare-timeline .tl-empty {
  max-width: 740px;
  padding: 3rem 0;
  border: 0;
  border-top: 1px solid var(--pd-brass);
  border-bottom: 1px solid var(--pd-rule);
  border-radius: 0;
  color: var(--pd-soft);
  font-family: var(--font-display);
  font-size: clamp(1.6rem, 3vw, 2.5rem);
  line-height: 1.35;
}
.public-site .compare-timeline .tl-events {
  gap: 0;
  border: 0;
  border-top: 1px solid var(--pd-rule);
  border-radius: 0;
  background: transparent;
}
.public-site .compare-timeline .tl-event {
  border-bottom: 1px solid var(--pd-rule);
  background: transparent;
}

/* Horoscope: a zodiac directory with brass symbols and one strong ember verdict. */
.public-site .horoscope-wrap { max-width: 1040px; padding-bottom: 7rem; }
.public-site .horoscope-wrap > .page-header,
.public-site .horoscope-detail-wrap > .page-header {
  position: relative;
  z-index: 0;
  margin: -3rem 0 3.5rem;
  padding: clamp(3.25rem, 7vw, 5.25rem) 0 clamp(3rem, 6vw, 4.5rem);
  border: 0;
}
.public-site .horoscope-wrap .page-title,
.public-site .horoscope-detail-wrap .page-title { color: var(--pd-paper); }
.public-site .horoscope-wrap .page-eyebrow,
.public-site .horoscope-detail-wrap .page-eyebrow,
.public-site .horoscope-detail-wrap .horoscope-back { color: var(--pd-brass); }
.public-site .horoscope-wrap .page-lede { max-width: 62ch; color: #c7d0cd; }

.public-site .horoscope-pick-label,
.public-site .horoscope-block-label {
  color: var(--pd-brass);
  letter-spacing: .06em;
}

.public-site .horoscope-grid {
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 0;
  border-top: 1px solid var(--pd-rule);
  border-left: 1px solid var(--pd-rule);
}

.public-site .horoscope-card {
  grid-template-columns: 3rem minmax(0, 1fr);
  min-height: 152px;
  padding: 1.35rem;
  border: 0;
  border-right: 1px solid var(--pd-rule);
  border-bottom: 1px solid var(--pd-rule);
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}
.public-site .horoscope-card:hover {
  border-color: var(--pd-rule);
  background: var(--pd-white);
  box-shadow: none;
  transform: none;
}
.public-site .horoscope-card-icon,
.public-site .horoscope-sign-icon,
.public-site .horoscope-nav-icon { filter: sepia(.35) saturate(.8); }
.public-site .horoscope-card-name {
  color: var(--pd-ink);
  font-size: 1.45rem;
  font-weight: 500;
}
.public-site .horoscope-card-range { color: var(--pd-soft); }
.public-site .horoscope-unavailable {
  border-left-color: var(--pd-ember);
  border-radius: 0;
  background: rgba(212, 90, 69, .08);
}

.public-site .horoscope-detail-wrap { max-width: 760px; padding-bottom: 7rem; }
.public-site .horoscope-sign-identity { margin-top: 1.75rem; }
.public-site .horoscope-sign-range { color: var(--pd-fog); }
.public-site .horoscope-claim {
  margin-bottom: 2.5rem;
  padding: 0 0 2.25rem;
  border: 0;
  border-bottom: 1px solid var(--pd-brass);
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}
.public-site .horoscope-claim p {
  color: var(--pd-ink);
  font-size: clamp(1.35rem, 3vw, 1.85rem);
  line-height: 1.55;
}
.public-site .horoscope-verdict {
  margin: 0 0 1.75rem;
  padding: 1.5rem 1.65rem;
  border-left-color: var(--pd-ember);
  border-radius: 0;
  background: rgba(212, 90, 69, .08);
}
.public-site .horoscope-verdict .horoscope-block-label { color: var(--pd-ember-ink); }
.public-site .horoscope-verdict p { font-size: 1.1rem; }
.public-site .horoscope-share {
  border-radius: 0;
  border-color: var(--pd-ink);
  background: transparent;
}
.public-site .horoscope-signs-nav { margin-top: 4rem; border-color: var(--pd-rule); }
.public-site .horoscope-signs-list {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 0;
  border-top: 1px solid var(--pd-rule);
  border-left: 1px solid var(--pd-rule);
}
.public-site .horoscope-signs-list li { min-width: 0; }
.public-site .horoscope-signs-list a {
  width: 100%;
  min-height: 52px;
  padding: .55rem .7rem;
  border: 0;
  border-right: 1px solid var(--pd-rule);
  border-bottom: 1px solid var(--pd-rule);
  border-radius: 0;
  color: var(--pd-soft);
}
.public-site .horoscope-signs-list a:hover { background: var(--pd-white); }
.public-site .horoscope-signs-list a[aria-current="page"] {
  border-color: var(--pd-rule);
  box-shadow: inset 0 -3px var(--pd-ember);
  color: var(--pd-ink);
}

@media (max-width: 1080px) {
  .public-site .compare-grid[data-card-grid] .model-card {
    grid-template-columns: minmax(180px, .7fr) minmax(0, 1.3fr);
  }
}

@media (max-width: 820px) {
  .public-site .compare-masthead { grid-template-columns: 1fr; gap: 2rem; }
  .public-site .compare-masthead-aside { max-width: 62ch; }
  .public-site .compare-top-picks-head,
  .public-site .compare-catalog-head { grid-template-columns: 1fr; gap: .65rem; }
  .public-site .horoscope-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .public-site .horoscope-signs-list { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

@media (max-width: 680px) {
  .public-site .compare-page,
  .public-site .model-detail-hero,
  .public-site .compare-timeline > .page-header,
  .public-site .horoscope-wrap > .page-header,
  .public-site .horoscope-detail-wrap > .page-header { margin-top: -2rem; }

  .public-site .compare-masthead { padding-top: 2.6rem; }
  .public-site .compare-title { font-size: clamp(3.2rem, 17vw, 4.8rem); }
  .public-site .filter-row { display: block; padding: .55rem 0; }
  .public-site .filter-label { display: block; padding: 0 0 .3rem; }
  .public-site .filter-chips {
    flex-wrap: nowrap;
    gap: 1rem;
    overflow-x: auto;
    padding-bottom: .15rem;
    scrollbar-width: thin;
    -webkit-overflow-scrolling: touch;
  }
  .public-site .filter-chip { flex: 0 0 auto; }
  .public-site .compare-grid[data-card-grid] .model-card {
    grid-template-columns: 1fr;
    grid-template-areas: "identity" "reading" "fit" "evidence";
    gap: .9rem;
  }
  .public-site .model-detail .detail-h1 { font-size: clamp(3rem, 16vw, 4.4rem); }
  .public-site .model-detail .detail-stats-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .public-site .tl-event { grid-template-columns: 5rem minmax(0, 1fr); gap: .75rem; padding-inline: 0; }
  .public-site .horoscope-grid,
  .public-site .horoscope-signs-list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .public-site .horoscope-card { min-height: 136px; }
  .public-site .horoscope-sign-identity { align-items: flex-start; }
}

@media (max-width: 390px) {
  .public-site .horoscope-card {
    grid-template-columns: 1fr;
    grid-template-areas: "icon" "name" "range";
    min-height: 156px;
  }
  .public-site .horoscope-signs-list { grid-template-columns: 1fr 1fr; }
}

@media (prefers-reduced-motion: reduce) {
  .public-site .model-card,
  .public-site .filter-chip,
  .public-site .horoscope-card { transition: none; }
}