@import url("https://fonts.googleapis.com/css2?family=Manrope:wght@400;500;600;700&family=Source+Serif+4:opsz,wght@8..60,400;8..60,500;8..60,600;8..60,700&display=swap");

:root {
  --ledger-night: #241c26;
  --ledger-plum: #493147;
  --ledger-plum-soft: #5d4058;
  --ledger-paper: #f4eee4;
  --ledger-paper-deep: #ede3d6;
  --ledger-sheet: #fbf8f2;
  --ledger-ink: #2d2525;
  --ledger-ink-strong: #20191b;
  --ledger-muted: #766b65;
  --ledger-muted-dark: #5f534e;
  --ledger-gold: #c39a58;
  --ledger-gold-deep: #9d753b;
  --ledger-rose: #c88f9d;
  --ledger-rule: #d7cabc;
  --ledger-rule-strong: #b9a896;
  --ledger-shadow: 0 14px 28px rgba(36, 28, 38, 0.09);
  --ledger-shadow-lift: 0 18px 34px rgba(36, 28, 38, 0.13);
  --cream: var(--ledger-paper);
  --paper: var(--ledger-sheet);
  --paper-soft: var(--ledger-sheet);
  --paper-glass: var(--ledger-sheet);
  --ink: var(--ledger-ink);
  --ink-strong: var(--ledger-ink-strong);
  --muted: var(--ledger-muted);
  --line: var(--ledger-rule);
  --rose: var(--ledger-rose);
  --blush: var(--ledger-paper-deep);
  --moss: #6c7157;
  --gold: var(--ledger-gold);
  --plum: var(--ledger-plum);
  --midnight: var(--ledger-night);
  --ember: #b96743;
  --shadow: var(--ledger-shadow);
  --shadow-lift: var(--ledger-shadow-lift);
  --radius-lg: 0;
  --radius-md: 0;
  --radius-sm: 0;
}

* {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
  scroll-padding-top: 96px;
}

body {
  margin: 0;
  min-height: 100vh;
  overflow-x: hidden;
  background: var(--ledger-paper) !important;
  color: var(--ledger-ink);
  font-family: Manrope, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif !important;
  font-size: 16px;
  line-height: 1.6;
  font-variant-emoji: text;
  text-rendering: optimizeLegibility;
}

body::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background:
    linear-gradient(90deg, rgba(36, 28, 38, 0.035) 1px, transparent 1px) 0 0 / 96px 96px,
    linear-gradient(180deg, rgba(36, 28, 38, 0.025) 1px, transparent 1px) 0 0 / 96px 96px;
}

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

img,
svg {
  max-width: 100%;
}

img {
  display: block;
  height: auto;
}

button,
input,
select,
textarea {
  font: inherit;
}

[hidden],
[data-show-when-locked][hidden],
[data-show-when-unlocked][hidden],
.article-row[hidden] {
  display: none !important;
}

.container,
.shell,
.nav-inner {
  width: min(1240px, calc(100% - 32px)) !important;
  margin-left: auto !important;
  margin-right: auto !important;
}

main.container,
main.shell {
  padding-bottom: 4.5rem;
}

h1,
h2,
h3,
h4,
.brand,
.card-title,
.article-card-title,
.tarot-card-name,
.birthday-person-name,
.kicker,
.mini-kicker,
.section-kicker {
  font-family: "Source Serif 4", Georgia, "Times New Roman", serif !important;
  font-weight: 600;
}

h1,
h2,
h3 {
  color: var(--ledger-ink-strong);
  letter-spacing: 0;
  overflow-wrap: break-word;
}

h1 {
  margin: 0.2em 0 0.28em;
  font-size: clamp(3.75rem, 7vw, 6.5rem) !important;
  line-height: 0.88 !important;
  max-width: 10.5ch;
}

h2 {
  font-size: clamp(2.15rem, 4.2vw, 4rem) !important;
  line-height: 0.98 !important;
}

h3 {
  font-size: clamp(1.5rem, 2.2vw, 2rem) !important;
  line-height: 1.08 !important;
}

p {
  margin-top: 0;
}

strong {
  color: var(--ledger-ink-strong);
}

/* Masthead and navigation */
.nav,
.top {
  position: sticky;
  top: 0;
  z-index: 40;
  background: var(--ledger-night) !important;
  color: var(--ledger-paper);
  border-bottom: 5px solid var(--ledger-gold) !important;
  box-shadow: none !important;
  backdrop-filter: none !important;
}

.nav-inner,
.topbar {
  min-height: 72px;
  padding: 0 !important;
  display: grid !important;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: center;
  gap: 2rem;
  border-bottom: 1px solid rgba(255, 255, 255, 0.14);
}

.brand {
  display: inline-flex !important;
  align-items: center;
  gap: 0.7rem;
  min-width: max-content;
  color: var(--ledger-paper) !important;
  font-size: 1.75rem !important;
  line-height: 1;
  letter-spacing: 0.02em !important;
  text-transform: none !important;
}

.brand-mark {
  width: auto !important;
  height: auto !important;
  display: inline !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  color: var(--ledger-gold) !important;
  font-size: 1.15rem;
}

.nav-links,
.nav {
  font-family: Manrope, ui-sans-serif, system-ui, sans-serif;
}

.nav-links {
  display: flex !important;
  flex-wrap: wrap;
  justify-content: flex-end;
  align-items: center;
  gap: 0 !important;
  min-width: 0;
}

.nav-links a,
.nav a {
  display: inline-flex;
  align-items: center;
  min-height: 42px;
  padding: 0.35rem 0.72rem !important;
  border: 0 !important;
  border-left: 1px solid rgba(255, 255, 255, 0.12) !important;
  border-radius: 0 !important;
  background: transparent !important;
  color: #d8ccd5 !important;
  font-size: 0.72rem !important;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  transition: color 150ms ease, background 150ms ease;
}

.nav-links a:hover,
.nav-links a.active,
.nav a:hover,
.nav a.active {
  background: var(--ledger-plum) !important;
  color: #fff !important;
  text-decoration: none;
}

.nav-toggle {
  display: none;
  justify-self: end;
  border: 1px solid rgba(255, 255, 255, 0.34);
  border-radius: 0;
  background: transparent;
  color: #fff;
  padding: 0.5rem 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-size: 0.75rem;
  cursor: pointer;
}

/* Editorial tokens */
.kicker,
.mini-kicker,
.section-kicker,
.guidance-eyebrow,
.quick-path-kicker,
.birthday-kicker,
.hero-date-label,
.ad-label,
.article-side {
  display: inline-flex;
  width: fit-content;
  align-items: center;
  gap: 0.4rem;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  color: var(--ledger-gold) !important;
  font-family: Manrope, ui-sans-serif, system-ui, sans-serif !important;
  font-size: 0.72rem !important;
  font-weight: 700 !important;
  letter-spacing: 0.13em !important;
  line-height: 1.35;
  text-transform: uppercase;
}

.dek,
.deck,
.lead-note,
.plain-note,
.hero-card p,
.section-header p,
.today-head p,
.lead-copy p,
.article-card p,
.footer-note,
.note-card p,
.key-point,
.product-copy p,
.status-card p,
.feature-card p,
.step-card p,
.summary,
.insight-summary,
.why-list,
.ritual-list,
.tarot-support-copy,
.moon-phase-copy,
.sign-meta,
.sign-detail-copy {
  color: var(--ledger-muted) !important;
}

.dek,
.deck,
.hero-card > p,
.hero-copy > p,
.head-copy p,
.cover-copy p {
  font-family: "Source Serif 4", Georgia, "Times New Roman", serif !important;
  font-size: clamp(1.15rem, 1.7vw, 1.42rem) !important;
  line-height: 1.44 !important;
}

.button,
.read-link,
.article-link,
.secondary-link,
.quick-path-link,
.link-row,
.back-link,
.text-link {
  color: var(--ledger-plum) !important;
  font-weight: 700;
  text-decoration: none !important;
}

.button {
  min-height: 44px;
  justify-content: center;
  padding: 0.78rem 1.05rem !important;
  border: 1px solid var(--ledger-night) !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  background: transparent !important;
  color: var(--ledger-night) !important;
  font-size: 0.78rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  transition: background 150ms ease, color 150ms ease, border-color 150ms ease;
}

.button:hover {
  transform: none !important;
  background: var(--ledger-night) !important;
  color: var(--ledger-paper) !important;
}

.button-primary,
.cta-row .button {
  background: var(--ledger-night) !important;
  color: var(--ledger-paper) !important;
  border-color: var(--ledger-night) !important;
}

.button-primary:hover,
.cta-row .button:hover {
  background: var(--ledger-gold) !important;
  color: var(--ledger-night) !important;
  border-color: var(--ledger-gold) !important;
}

.button-secondary {
  background: transparent !important;
  color: var(--ledger-night) !important;
}

/* Hero and leading layouts */
.hero,
.cover,
.page-head {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) minmax(340px, 0.78fr) !important;
  gap: 0 !important;
  align-items: stretch;
  padding: 0 !important;
  margin-top: 0 !important;
  border-left: 1px solid var(--ledger-rule);
  border-right: 1px solid var(--ledger-rule);
  border-bottom: 1px solid var(--ledger-night);
}

.hero-card,
.head-copy,
.cover-copy {
  min-height: 520px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: clamp(2rem, 4.5vw, 4rem) !important;
  background: var(--ledger-sheet) !important;
  border: 0 !important;
  border-right: 1px solid var(--ledger-rule) !important;
  border-radius: 0 !important;
  box-shadow: none !important;
}

.hero-image,
.head-image,
.portrait,
.lead-photo {
  min-height: 520px;
  border: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  background-color: var(--ledger-paper-deep);
  background-size: cover;
  background-repeat: no-repeat;
}

.about-hero {
  display: grid !important;
  grid-template-columns: minmax(280px, 0.72fr) minmax(0, 1.28fr) !important;
  min-height: 560px;
  padding: 0 !important;
  overflow: hidden;
}

.about-hero img {
  width: 100%;
  min-height: 560px;
  height: 100%;
  object-fit: cover;
  border-right: 1px solid var(--ledger-rule);
}

.about-hero-copy {
  align-self: center;
  padding: clamp(2rem, 4.5vw, 4rem) !important;
}

.hero-pills,
.article-meta,
.meta,
.card-meta,
.product-meta,
.jump-links,
.hero-actions,
.cta-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.55rem;
  align-items: center;
}

.hero-pills span,
.article-meta span,
.meta span,
.card-meta span,
.product-meta span,
.jump-links a,
.collective-reading-tone,
.vibe-pill,
.featured-vibe,
.tarot-card-orientation {
  display: inline-flex;
  align-items: center;
  gap: 0.32em; /* flex collapses whitespace between text and inline links (e.g. "By <a>") */
  min-height: 34px;
  padding: 0.42rem 0.65rem !important;
  border: 1px solid var(--ledger-rule) !important;
  border-radius: 0 !important;
  background: transparent !important;
  color: var(--ledger-muted-dark) !important;
  font-size: 0.78rem !important;
  font-weight: 600;
  letter-spacing: 0.04em;
}

.hero-date-row,
.edition,
.lead-note {
  margin-top: 1.5rem !important;
  padding-top: 1rem !important;
  padding-left: 0 !important;
  border-top: 1px solid var(--ledger-rule) !important;
  border-left: 0 !important;
}

.live-dot {
  background: var(--ledger-gold) !important;
  box-shadow: none !important;
}

/* Sections and surfaces */
.section {
  padding: 2.4rem 0 0 !important;
}

.section-header,
.editorial-head,
.reading-top,
.today-head,
.tarot-panel-head {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) minmax(260px, 0.62fr);
  gap: 2rem;
  align-items: end;
  margin: 0 0 1.15rem !important;
  padding-bottom: 1rem;
  border-bottom: 2px solid var(--ledger-night);
}

.section-header-centered {
  display: block !important;
  text-align: center;
  /* The shared header rule above forces margin: 0 0 1.15rem, which defeats
     any page-level margin-auto centring (e.g. the tarot explainer). */
  margin-left: auto !important;
  margin-right: auto !important;
}

.section-header h2,
.editorial-head h2,
.reading-top h2,
.today-head h2 {
  margin: 0 !important;
}

.section-header p,
.editorial-head p,
.reading-top p {
  margin: 0 !important;
  font-family: "Source Serif 4", Georgia, "Times New Roman", serif;
  font-size: 1.16rem;
  line-height: 1.48;
}

.section-header-centered > div,
.section-header-centered p {
  /* site.css caps the intro paragraph at 60ch but never auto-centres it;
     centre the child div and any nested paragraph so the centred header
     actually looks centred (the paragraph is a direct child on the homepage
     but nested inside the div on the tarot page). */
  margin-left: auto !important;
  margin-right: auto !important;
}

.hero-card,
.intro-card,
.section-card,
.note-card,
.product-card,
.status-card,
.step-card,
.feature-card,
.article-card,
.premium-card,
.member-card,
.library-card,
.insight-card,
.quick-path-card,
.featured-panel,
.today-panel,
.guidance-card,
.moon-phase-card,
.tarot-panel,
.tarot-card-face,
.tarot-detail-card,
.tarot-reflection,
.footer-note,
.ad-card,
.card,
.birthday-person,
.key-point,
.vignette-card {
  border-radius: 0 !important;
  background: var(--ledger-sheet) !important;
  border: 1px solid var(--ledger-rule) !important;
  box-shadow: none !important;
  overflow: visible;
}

.section-card,
.intro-card,
.note-card,
.status-card,
.step-card,
.feature-card,
.premium-card,
.member-card,
.footer-note,
.ad-card,
.card,
.tarot-panel,
.today-panel,
.featured-panel {
  padding: clamp(1.2rem, 2.4vw, 1.8rem) !important;
}

.section-card,
.today-panel,
.tarot-panel,
.featured-panel,
.future-box,
.horoscope-grid-wrap {
  border-top: 2px solid var(--ledger-night) !important;
}

.library-card,
.insight-card,
.article-card,
.product-card,
.quick-path-card,
.sign-card,
.feature,
.reading,
.article-row {
  transition: background 150ms ease, border-color 150ms ease, color 150ms ease;
}

.library-card:hover,
.insight-card:hover,
.article-card:hover,
.product-card:hover,
.quick-path-card:hover,
.sign-card:hover,
.feature:hover,
.reading:hover,
.article-row:hover {
  transform: none !important;
  background: var(--ledger-paper-deep) !important;
  border-color: var(--ledger-rule-strong) !important;
  box-shadow: none !important;
}

.footer-note {
  margin: 1.5rem 0 3rem !important;
  border-top: 2px solid var(--ledger-night) !important;
}

footer,
.foot {
  margin-top: 3rem !important;
  padding: 2rem 0 !important;
  border-top: 5px solid var(--ledger-gold) !important;
  background: var(--ledger-night) !important;
  color: #d8ccd5 !important;
}

footer a,
.foot a {
  color: var(--ledger-paper) !important;
  font-weight: 700;
}

/* Homepage ledger */
.today-panel {
  display: grid;
  /* Single column: the page's inline stylesheet still declares a legacy
     two-column template that pushed the guidance wrap beside the heading. */
  grid-template-columns: minmax(0, 1fr) !important;
  gap: 1.2rem;
}

.today-head {
  /* Stack kicker, headline, and summary; the shared section-header rule
     would otherwise split them into two columns. */
  grid-template-columns: minmax(0, 1fr);
  padding: 0 0 1rem !important;
}

.tarot-panel-head {
  /* Same stacking fix: kicker, headline, and intro are single-column. */
  grid-template-columns: minmax(0, 1fr);
}

.guidance-grid-wrap {
  display: grid;
  grid-template-columns: minmax(0, 2fr) minmax(280px, 0.85fr);
  gap: 1rem;
  padding: 0 !important;
}

.guidance-cards,
.sign-detail-grid,
.compat-notes,
.compat-angles {
  display: grid;
  gap: 0;
}

.guidance-card {
  padding: 1rem 0 !important;
  border-width: 0 0 1px !important;
}

.guidance-card:first-child {
  border-top: 1px solid var(--ledger-rule) !important;
}

.moon-phase-card {
  padding: 1.15rem !important;
  background: var(--ledger-night) !important;
  color: var(--ledger-paper) !important;
  border-color: var(--ledger-night) !important;
}

.moon-phase-card h3,
.moon-phase-card p {
  color: var(--ledger-paper) !important;
}

.moon-phase-graphic {
  margin: 0.7rem auto;
}

.collective-reading-inline,
.collective-reading-hope {
  border-color: var(--ledger-rule) !important;
  border-style: solid !important;
  border-width: 1px 0 0 !important;
}

.collective-reading-inline h3 {
  /* Light text on the plum panel; the global heading color is dark ink. */
  color: var(--ledger-paper) !important;
}

.collective-reading-head-row {
  /* Span every row so the column divider runs the full panel height. */
  grid-row: 1 / -1;
}

.collective-reading-tone {
  /* The shared pill rule paints this dark; keep it legible on plum. */
  color: #e9d7c4 !important;
  border-color: rgba(255, 255, 255, 0.28) !important;
}

.horoscope-grid-wrap,
.future-box {
  padding: 0 !important;
  background: transparent !important;
  border-width: 0 !important;
}

.horoscope-grid,
.reading-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0 !important;
  border-top: 2px solid var(--ledger-night);
  border-left: 1px solid var(--ledger-rule);
}

.sign-card,
.reading {
  --accent: var(--ledger-plum);
  position: relative;
  min-height: 0;
  display: grid;
  gap: 0.75rem;
  padding: 1.2rem !important;
  border-width: 0 1px 1px 0 !important;
  border-color: var(--ledger-rule) !important;
  background: var(--ledger-sheet) !important;
  overflow: hidden;
}

.sign-card::before {
  content: "";
  position: absolute;
  inset: 0 0 auto;
  height: 4px;
  background: var(--accent);
  opacity: 1;
}

.sign-card[data-element="Fire"] {
  --accent: #b96743;
}

.sign-card[data-element="Earth"] {
  --accent: #6c7157;
}

.sign-card[data-element="Air"] {
  --accent: var(--ledger-gold);
}

.sign-card[data-element="Water"] {
  --accent: var(--ledger-plum);
}

.sign-title,
.featured-sign {
  margin: 0 !important;
  color: var(--ledger-ink-strong) !important;
}

.sign-kicker,
.vibe-pill {
  color: var(--accent) !important;
}

.icon-badge,
.glyph,
.zodiac b {
  width: auto !important;
  height: auto !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  color: var(--accent, var(--ledger-plum)) !important;
  font-family: "Source Serif 4", "Segoe UI Symbol", serif !important;
  font-size: 2.35rem !important;
  line-height: 1;
}

.sign-detail-grid {
  /* Each .sign-detail is its own label/copy row, so the wrapper must be a single column
     (the page's inline stylesheet still declares a legacy two-column template). */
  grid-template-columns: minmax(0, 1fr) !important;
}

.sign-detail {
  display: grid;
  grid-template-columns: 88px minmax(0, 1fr);
  gap: 0.75rem;
  padding-top: 0.65rem;
  border-top: 1px solid var(--ledger-rule);
}

.sign-detail:first-child {
  border-top: 0;
  padding-top: 0.15rem;
}

.sign-detail-grid .sign-detail-label,
.sign-detail-grid .sign-detail-copy {
  padding: 0;
  border-bottom: 0;
}

.sign-detail-label,
.birthday-people-title {
  color: var(--ledger-gold) !important;
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.featured-panel,
.birthday {
  display: grid;
  grid-template-columns: minmax(260px, 0.7fr) minmax(0, 1.3fr);
  gap: 0;
  background: var(--ledger-paper-deep) !important;
}

.birthday-people-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0;
  border-top: 1px solid var(--ledger-rule);
  border-left: 1px solid var(--ledger-rule);
}

.birthday-person {
  padding: 0.9rem !important;
  border-width: 0 1px 1px 0 !important;
}

/* Insights, listings, and recommendations */
.library-grid,
.insights-grid,
.products-grid,
.articles-grid,
.steps-grid,
.editorial-grid,
.quick-path-grid,
.feature-row {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0 !important;
  border-top: 2px solid var(--ledger-night);
  border-left: 1px solid var(--ledger-rule);
}

.quick-path-grid,
.steps-grid {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.library-card,
.insight-card,
.product-card,
.article-card,
.step-card,
.feature-card,
.quick-path-card,
.feature {
  border-width: 0 1px 1px 0 !important;
}

.library-card img,
.insight-card img,
.article-card img,
.product-image,
.feature-image,
.thumb {
  width: 100%;
  background-color: var(--ledger-paper-deep);
  border-bottom: 1px solid var(--ledger-rule) !important;
}

.library-card img,
.insight-card img,
.article-card img {
  height: 300px;
  object-fit: cover;
}

.product-card {
  display: grid;
  grid-template-rows: 285px auto;
}

.library-copy,
.insight-card-copy,
.article-copy,
.product-copy,
.feature-copy {
  padding: 1.2rem !important;
  display: grid;
  gap: 0.85rem;
}

.card-title,
.article-card-title {
  margin: 0 !important;
  color: var(--ledger-ink-strong) !important;
  font-size: clamp(1.45rem, 2.1vw, 2rem) !important;
  line-height: 1.08 !important;
}

.summary,
.insight-summary,
.why-list,
.ritual-list,
.premium-list,
.standards-list,
.birthday-notes {
  margin: 0;
  padding-left: 1.15rem;
  display: grid;
  gap: 0.45rem;
}

.summary li::marker,
.insight-summary li::marker,
.why-list li::marker,
.ritual-list li::marker,
.premium-list li::marker,
.standards-list li::marker,
.birthday-notes li::marker {
  color: var(--ledger-gold);
}

.article-directory {
  border-top: 2px solid var(--ledger-night) !important;
}

.article-row {
  display: grid !important;
  grid-template-columns: 170px minmax(0, 1fr) 180px;
  gap: 1.5rem;
  align-items: center;
  padding: 1.1rem 0 !important;
  border-bottom: 1px solid var(--ledger-rule) !important;
}

.thumb {
  height: 112px !important;
  background-size: cover;
  background-position: center;
}

.article-row h3 {
  margin: 0 0 0.25rem !important;
}

.world {
  display: grid !important;
  grid-template-columns: minmax(260px, 0.75fr) minmax(0, 1.25fr);
  background: var(--ledger-night) !important;
  color: var(--ledger-paper) !important;
}

.world-title {
  padding: clamp(2rem, 4vw, 3rem) !important;
  border-right: 1px solid rgba(255, 255, 255, 0.16);
}

.world-copy {
  padding: clamp(2rem, 4vw, 3rem) !important;
  color: #efe6df !important;
  font-family: "Source Serif 4", Georgia, "Times New Roman", serif !important;
  font-size: clamp(1.2rem, 1.8vw, 1.45rem);
}

.world h2,
.world p {
  color: var(--ledger-paper) !important;
}

.status-card {
  background: var(--ledger-plum) !important;
  color: var(--ledger-paper) !important;
  border-color: var(--ledger-plum) !important;
}

.status-card p {
  color: var(--ledger-paper) !important;
}

.step-number {
  width: auto !important;
  height: auto !important;
  display: inline-block !important;
  margin: 0 0 0.8rem !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  color: var(--ledger-gold) !important;
  font-family: "Source Serif 4", Georgia, serif;
  font-size: 2.1rem;
  line-height: 1;
}

/* Long-form articles */
main > .hero + .article-card,
article.article-card {
  width: min(900px, 100%);
  margin: 1rem auto 3rem !important;
  padding: clamp(1.3rem, 3vw, 2rem) !important;
  background: var(--ledger-sheet) !important;
  border-top: 2px solid var(--ledger-night) !important;
}

article.article-card p {
  font-family: "Source Serif 4", Georgia, "Times New Roman", serif !important;
  font-size: 1.12rem;
  line-height: 1.72;
  color: var(--ledger-ink) !important;
}

article.article-card h2 {
  margin: 2rem 0 0.8rem !important;
  padding-top: 0.8rem;
  border-top: 1px solid var(--ledger-rule);
}

.hero-copy {
  padding: clamp(1.5rem, 3.6vw, 2.6rem) !important;
}

.pull-quote,
blockquote {
  margin: 1.5rem 0 !important;
  padding: 1rem 0 1rem 1.1rem !important;
  border-width: 0 0 0 3px !important;
  border-style: solid !important;
  border-color: var(--ledger-gold) !important;
  background: transparent !important;
  border-radius: 0 !important;
  color: var(--ledger-plum) !important;
  font-family: "Source Serif 4", Georgia, "Times New Roman", serif !important;
  font-size: clamp(1.35rem, 2.4vw, 1.9rem) !important;
  line-height: 1.34 !important;
}

.key-points {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0 !important;
  margin: 0 0 1.6rem !important;
  border-top: 2px solid var(--ledger-night);
  border-left: 1px solid var(--ledger-rule);
}

.key-point {
  padding: 1rem !important;
  border-width: 0 1px 1px 0 !important;
  color: var(--ledger-muted) !important;
}

.key-point strong {
  display: block;
  margin-bottom: 0.35rem;
  color: var(--ledger-plum) !important;
  font-family: "Source Serif 4", Georgia, "Times New Roman", serif !important;
  font-size: 1.05rem;
}

.note-card {
  border-left: 3px solid var(--ledger-gold) !important;
}

.vignette-card {
  margin: 1.5rem 0 !important;
  padding: clamp(1.2rem, 2.6vw, 1.7rem) !important;
  border-top: 2px solid var(--ledger-gold) !important;
  background: var(--ledger-paper-deep) !important;
}

.vignette-note {
  margin-top: 1rem;
  padding-top: 1rem;
  border-top: 1px solid var(--ledger-rule);
  color: var(--ledger-plum) !important;
  font-style: italic;
}

.article-pager {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 0.75rem;
  padding-top: 1rem;
  border-top: 1px solid var(--ledger-rule);
}

/* Tarot and compatibility controls */
.tarot-card-layout {
  display: grid;
  grid-template-columns: minmax(220px, 320px) minmax(0, 1fr);
  gap: 1.4rem;
}

.tarot-card-face {
  width: min(100%, 320px);
  padding: 1rem !important;
  justify-items: center;
  text-align: center;
  border-color: var(--ledger-gold) !important;
}

.tarot-card-figure {
  margin: 0 !important;
  overflow: hidden;
  border: 1px solid var(--ledger-rule) !important;
  border-radius: 0 !important;
  background: var(--ledger-paper-deep) !important;
}

.tarot-card-figure img {
  aspect-ratio: 2 / 3.45;
  width: 100%;
  object-fit: cover;
}

.tarot-card-numeral {
  color: var(--ledger-gold-deep) !important;
  font-family: "Source Serif 4", Georgia, serif !important;
  letter-spacing: 0.08em;
}

.tarot-detail-card,
.tarot-reflection {
  margin-top: 0.9rem;
  padding: 1rem !important;
  border-left: 3px solid var(--ledger-gold) !important;
}

.compat-picker {
  display: flex;
  flex-wrap: wrap;
  align-items: end;
  gap: 1rem;
  margin-top: 1.25rem;
}

.compat-select-group {
  display: grid;
  gap: 0.4rem;
}

.compat-select-group label,
.preference-controls label {
  color: var(--ledger-gold) !important;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

select,
.compat-select-group select,
.preference-controls select {
  min-height: 44px;
  min-width: 210px;
  padding: 0.65rem 0.85rem !important;
  border: 1px solid var(--ledger-rule-strong) !important;
  border-radius: 0 !important;
  background: var(--ledger-sheet) !important;
  color: var(--ledger-ink-strong) !important;
  box-shadow: none !important;
  cursor: pointer;
}

.compat-notes {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.compat-angles {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

/* Consent and utility controls */
.preference-panel {
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(260px, 0.9fr);
  gap: 1rem;
}

.preference-controls {
  padding: 1rem !important;
  border: 1px solid var(--ledger-rule) !important;
  border-radius: 0 !important;
  background: var(--ledger-paper-deep) !important;
}

.no-results {
  display: none;
  padding: 2rem 0;
  color: var(--ledger-muted);
  font-family: "Source Serif 4", Georgia, serif;
  font-size: 1.5rem;
}

.no-results.show {
  display: block;
}

.reveal {
  opacity: 1;
  transform: none;
}

.reveal.is-visible {
  opacity: 1;
  transform: none;
}

/* Prototype-compatible classes for future production pages */
.topbar small {
  justify-self: end;
  color: #cdbfc8;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.11em;
  text-transform: uppercase;
}

.rail,
.section-index {
  padding: clamp(1.4rem, 3vw, 2rem) !important;
  background: var(--ledger-paper-deep) !important;
  border-right: 1px solid var(--ledger-rule) !important;
}

.rail ol,
.section-index .filters {
  margin: 0;
  padding: 0;
  list-style: none;
}

.rail li,
.section-index button {
  border-top: 1px solid var(--ledger-rule) !important;
}

.section-index button,
.zodiac {
  border-radius: 0 !important;
  background: transparent !important;
  color: var(--ledger-muted) !important;
  cursor: pointer;
}

.section-index button:hover,
.section-index button.active,
.zodiac:hover,
.zodiac.on {
  background: var(--ledger-gold) !important;
  color: var(--ledger-night) !important;
}

.ticker,
.edition-line {
  background: var(--ledger-plum) !important;
  color: var(--ledger-paper) !important;
  border-bottom: 1px solid var(--ledger-night);
}

.ticker-track {
  display: flex;
  overflow-x: auto;
  scrollbar-width: none;
}

.zodiac {
  min-width: 86px;
  flex: 1 1 0;
  padding: 0.75rem 0.6rem !important;
  border: 0 !important;
  border-left: 1px solid rgba(255, 255, 255, 0.15) !important;
  color: #e8dfe5 !important;
  text-align: center;
}

.dashboard,
.lead-story,
.world,
.birthday {
  border-left: 1px solid var(--ledger-rule);
  border-right: 1px solid var(--ledger-rule);
  border-bottom: 1px solid var(--ledger-night);
}

.dashboard,
.lead-story {
  display: grid !important;
  grid-template-columns: minmax(0, 1.4fr) minmax(320px, 0.6fr);
  background: var(--ledger-sheet) !important;
}

.dashboard {
  /* The homepage dashboard has a single child (.today-panel); the two-column
     template above would leave an empty right-hand column. */
  grid-template-columns: minmax(0, 1fr);
}

.lead-story {
  /* Keep the insights lead story at its designed photo/copy ratio. */
  grid-template-columns: minmax(0, 1.15fr) minmax(320px, 0.85fr);
}

.masthead-image img,
.lead-photo img,
.selection-media img {
  /* Fill the frame without letting the image's natural height inflate the row. */
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.guidance,
.lead-copy,
.birthday-copy,
.birthday-title {
  padding: clamp(1.5rem, 3.5vw, 3rem) !important;
}

.moon {
  padding: clamp(1.5rem, 3.5vw, 3rem) !important;
  background: var(--ledger-night) !important;
  color: var(--ledger-paper) !important;
}

.moon h3,
.moon p {
  color: var(--ledger-paper) !important;
}

.moon-orb {
  width: 150px;
  aspect-ratio: 1;
  border-radius: 50%;
  margin: 1.5rem auto;
  background: linear-gradient(90deg, #0f0c13 0 88%, #e7d7a9 88%);
}

/* Ultrawide canvas */
@media (min-width: 1700px) {
  .container,
  .shell,
  .nav-inner {
    width: min(1800px, calc(100% - 80px)) !important;
  }

  h1 {
    font-size: clamp(5rem, 5.2vw, 7rem) !important;
  }

  .hero,
  .cover,
  .page-head {
    grid-template-columns: minmax(0, 1fr) minmax(460px, 0.62fr) !important;
  }

  .hero-card,
  .hero-image,
  .head-copy,
  .head-image,
  .cover-copy,
  .portrait {
    min-height: 650px;
  }

  .horoscope-grid,
  .reading-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }

  .library-grid,
  .insights-grid,
  .articles-grid,
  .products-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .insights-grid .insight-card:first-child {
    grid-column: span 2;
  }
}

/* Mobile editorial navigation and layout */
@media (max-width: 900px) {
  html {
    scroll-padding-top: 82px;
  }

  .container,
  .shell,
  .nav-inner {
    width: min(100% - 24px, 1240px) !important;
  }

  .nav-inner,
  .topbar {
    min-height: 64px;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 0.75rem;
    padding: 0.75rem 0 !important;
  }

  .brand {
    min-width: 0;
    font-size: 1.5rem !important;
  }

  .topbar small {
    display: none;
  }

  .nav-toggle {
    display: inline-flex;
  }

  .nav-links {
    grid-column: 1 / -1;
    justify-content: flex-start;
    flex-wrap: nowrap;
    width: 100%;
    overflow-x: auto;
    padding: 0.55rem 0 0;
    scrollbar-width: none;
  }

  .nav-links::-webkit-scrollbar {
    display: none;
  }

  .nav-links a,
  .nav a {
    flex: 0 0 auto;
    min-height: 38px;
    padding: 0.4rem 0.65rem !important;
    border-top: 1px solid rgba(255, 255, 255, 0.12) !important;
    white-space: nowrap;
  }

  .hero,
  .cover,
  .page-head,
  .dashboard,
  .lead-story,
  .world,
  .birthday,
    .featured-panel,
  .preference-panel,
  .guidance-grid-wrap,
  .about-hero {
    grid-template-columns: 1fr !important;
  }

  .hero-card,
  .head-copy,
  .cover-copy {
    min-height: auto;
    padding: 2.2rem 1.35rem !important;
    border-right: 0 !important;
    border-bottom: 1px solid var(--ledger-rule) !important;
  }

  .hero-image,
  .head-image,
  .portrait,
  .lead-photo {
    min-height: 390px !important;
  }

  .about-hero img {
    min-height: 390px;
    border-right: 0;
    border-bottom: 1px solid var(--ledger-rule);
  }

  h1 {
    font-size: clamp(3rem, 16vw, 4.35rem) !important;
    max-width: 9.5ch;
  }

  h2 {
    font-size: clamp(2rem, 10vw, 3.2rem) !important;
  }

  .section-header,
  .editorial-head,
  .reading-top,
  .today-head,
  .tarot-panel-head {
    grid-template-columns: 1fr;
    gap: 0.65rem;
  }

  .horoscope-grid,
  .reading-grid,
  .library-grid,
  .insights-grid,
  .products-grid,
  .articles-grid,
  .steps-grid,
  .editorial-grid,
  .quick-path-grid,
  .feature-row,
  .key-points,
  .compat-notes,
  .compat-angles,
  .birthday-people-grid {
    grid-template-columns: 1fr !important;
  }

  .tarot-card-layout {
    grid-template-columns: 1fr;
  }

  .tarot-card-face {
    justify-self: center;
  }

  .article-row {
    grid-template-columns: 100px minmax(0, 1fr);
    gap: 1rem;
  }

  .article-side {
    grid-column: 2;
    text-align: left !important;
  }

  .thumb {
    height: 96px !important;
  }

  .product-card {
    grid-template-rows: 250px auto;
  }

  .sign-detail {
    grid-template-columns: 1fr;
    gap: 0.2rem;
  }

  .section-index .filters,
  .ticker-track {
    display: flex;
    overflow-x: auto;
  }

  .section-index button,
  .zodiac {
    flex: 0 0 auto;
  }

    .world-title,
  .birthday-title {
    border-right: 0 !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.16);
  }

  .birthday-title {
    border-bottom-color: var(--ledger-rule);
  }
}

@media (max-width: 640px) {
  .container,
  .shell,
  .nav-inner {
    width: min(100% - 22px, 1240px) !important;
  }

  .hero-card,
  .hero-copy,
  .section-card,
  .intro-card,
  .note-card,
  .status-card,
  .step-card,
  .feature-card,
  .premium-card,
  .member-card,
  .footer-note,
  .tarot-panel,
  .today-panel,
  article.article-card {
    padding: 1.05rem !important;
  }

  .hero-image,
  .head-image,
  .portrait,
  .lead-photo {
    min-height: 320px !important;
  }

  .library-card img,
  .insight-card img,
  .article-card img {
    height: 240px;
  }

  .home-hero h1 {
    max-width: 11ch;
    font-size: clamp(2.65rem, 12.5vw, 3.4rem) !important;
    line-height: 0.93 !important;
  }

  .product-card {
    grid-template-rows: 225px auto;
  }

  .compat-picker,
  .hero-actions,
  .cta-actions {
    align-items: stretch;
  }

  .button,
  select,
  .compat-select-group,
  .compat-select-group select {
    width: 100%;
  }
}

/* Long-form article heroes: the legacy article layout nests the image inside
   .hero-card (image stacked above copy). On wide canvases that produced a
   sprawling single column with a large empty right-hand side. Cap the hero at
   the editorial measure and pair image and copy side by side. */
.hero:has(> .hero-card > .hero-image) {
  width: min(1240px, 100%);
  margin-left: auto !important;
  margin-right: auto !important;
}

@media (min-width: 901px) {
  .hero:has(> .hero-card > .hero-image) .hero-card {
    display: grid !important;
    grid-template-columns: minmax(300px, 0.8fr) minmax(0, 1.2fr);
    align-items: stretch;
    padding: 0 !important;
    overflow: hidden;
  }

  .hero:has(> .hero-card > .hero-image) .hero-card > .hero-image {
    height: 100%;
    min-height: 520px;
    border-right: 1px solid var(--ledger-rule) !important;
  }

  .hero:has(> .hero-card > .hero-image) .hero-copy {
    align-self: center;
    padding: clamp(2rem, 4vw, 3.5rem) !important;
  }
}

/* Keyboard focus visibility — the legacy inline styles never defined focus
   states, so keyboard users had no visible cursor position. */
a:focus-visible,
button:focus-visible,
select:focus-visible,
input:focus-visible,
textarea:focus-visible,
[tabindex]:focus-visible {
  outline: 2px solid var(--ledger-gold-deep) !important;
  outline-offset: 2px;
}

.nav-links a:focus-visible,
.nav a:focus-visible,
.zodiac:focus-visible {
  outline-color: var(--ledger-gold) !important;
  outline-offset: -2px;
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    scroll-behavior: auto !important;
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

/* Heroes without a dedicated image panel (disclaimer, privacy, unlock,
   members) must be single-column; the generic two-column hero template
   assumes a copy+image pair and otherwise leaves an empty right column. */
.hero:not(:has(> .hero-image, > .head-image, > .portrait)) {
  grid-template-columns: minmax(0, 1fr) !important;
}

.hero:not(:has(> .hero-image, > .head-image, > .portrait)) h1 {
  max-width: 26ch;
}

/* Homepage cover: three columns (edition rail | copy | portrait).
   Placed last so it beats the generic two-column .hero/.cover template
   at every breakpoint. */
.cover {
  grid-template-columns: 210px minmax(0, 1fr) minmax(340px, 0.78fr) !important;
}

.edition-rail h2 {
  font-size: 1.15rem !important;
  line-height: 1.15 !important;
}

@media (min-width: 1700px) {
  .cover {
    grid-template-columns: 240px minmax(0, 1fr) minmax(460px, 0.62fr) !important;
  }
}

@media (max-width: 960px) {
  /* The edition rail is hidden below 960px; stack the remaining two panels. */
  .cover {
    grid-template-columns: 1fr !important;
  }

  /* Mobile navigation: one horizontally scrollable strip of links under the
     brand. The pages' older inline CSS turns the list into a centred vertical
     stack behind a Menu toggle, while the base ledger rules keep it visible —
     the combination rendered as an unusable staircase. The links are always
     visible here, so the toggle is redundant. */
  .nav-toggle {
    display: none !important;
  }

  .nav-links {
    grid-column: 1 / -1;
    display: flex !important;
    flex-direction: row !important;
    /* Wrap instead of hidden horizontal scrolling so every link is always
       visible — a hidden-scrollbar strip gave no hint that more items existed. */
    flex-wrap: wrap !important;
    justify-content: flex-start !important;
    align-items: stretch;
    width: 100%;
    overflow-x: visible;
    padding: 0.55rem 0 0.35rem !important;
  }

  .nav-links a {
    flex: 0 0 auto;
    min-height: 38px;
    white-space: nowrap;
    border-top: 1px solid rgba(255, 255, 255, 0.12) !important;
  }
}