/* ============================================================
   content.css — shared styles for SEO content pages
   (pillar + Hebrew-month pages). Extends the Jewish Zodiac
   journal article system so reference pages match the brand.
   ============================================================ */

:root {
  --bg: #f0e6d2;
  --bg-2: #ebdfc6;
  --bg-3: #d9c9a8;
  --ink: #1a1612;
  --gold: #a8884a;
  --gold-2: #8a6e34;
  --gold-3: #c4a468;
  --muted: #5a4226;
  --muted-2: #5d4d34;
  --line: rgba(26,22,18,0.18);
  --line-strong: rgba(26,22,18,0.5);
  --accent: #6b4f2c;
  --cream: #faf6ed;
  --wax-red: #5e3a1f;
  --font-display: 'Cinzel', 'Trajan Pro', 'Times New Roman', serif;
  --font-body:    'Cormorant Garamond', 'EB Garamond', Georgia, 'Times New Roman', serif;
  --font-hebrew:  'Frank Ruhl Libre', 'David Libre', 'Times New Roman', serif;
}
* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; background: var(--bg); color: var(--ink); font-family: var(--font-body); line-height: 1.72; font-size: 19px; }
strong, b { font-weight: 500; font-style: italic; }
body {
  background-color: var(--bg);
  background-image:
    url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='60' height='60' viewBox='0 0 60 60'><circle cx='10' cy='15' r='0.4' fill='%231a1612' fill-opacity='0.05'/><circle cx='35' cy='8' r='0.3' fill='%231a1612' fill-opacity='0.04'/><circle cx='50' cy='40' r='0.5' fill='%231a1612' fill-opacity='0.06'/><circle cx='22' cy='50' r='0.3' fill='%231a1612' fill-opacity='0.05'/><circle cx='5' cy='35' r='0.35' fill='%231a1612' fill-opacity='0.04'/><circle cx='42' cy='22' r='0.3' fill='%231a1612' fill-opacity='0.05'/></svg>"),
    radial-gradient(ellipse at 50% 0%, rgba(168,136,74,0.06), transparent 50%),
    radial-gradient(ellipse at 50% 100%, rgba(107,79,44,0.06), transparent 50%);
  background-repeat: repeat, no-repeat, no-repeat;
  background-size: 60px 60px, 100% 100%, 100% 100%;
  min-height: 100vh;
  position: relative;
}
body::before {
  content: ''; position: fixed; inset: 0; pointer-events: none; z-index: 0;
  background:
    linear-gradient(to bottom, rgba(26,22,18,0.10), transparent 28px),
    linear-gradient(to top,    rgba(26,22,18,0.10), transparent 28px),
    linear-gradient(to right,  rgba(26,22,18,0.06), transparent 24px),
    linear-gradient(to left,   rgba(26,22,18,0.06), transparent 24px);
}

/* === NAV STRIP === */
.nav-strip { position: relative; z-index: 5; border-bottom: 1px solid rgba(26,22,18,0.10); }
.nav-strip-inner {
  max-width: 1280px; margin: 0 auto;
  display: flex; align-items: center; justify-content: space-between;
  padding: 22px 32px;
}
.nav-brand { display: flex; align-items: center; gap: 12px; text-decoration: none; }
.nav-brand .nav-mono { width: 32px; height: 32px; }
.nav-brand .nav-mark { font-family: var(--font-display); font-size: 14px; letter-spacing: 7px; color: var(--ink); font-weight: 400; }
.nav-links { display: flex; gap: 28px; }
.nav-links a {
  font-family: var(--font-display); font-size: 11px; letter-spacing: 4px; text-transform: uppercase;
  color: var(--ink); text-decoration: none; opacity: 0.8; transition: opacity 0.2s, color 0.2s;
}
.nav-links a:hover { opacity: 1; color: var(--gold-2); }
.nav-links a.current { color: var(--gold-2); opacity: 1; }
@media (max-width: 720px) {
  .nav-strip-inner { padding: 18px 22px; }
  .nav-links { display: none; }
  .nav-brand .nav-mark { font-size: 12px; letter-spacing: 5px; }
}

/* === ARTICLE / PAGE BODY === */
.article { max-width: 760px; margin: 0 auto; padding: 64px 28px 96px; position: relative; z-index: 1; }
.breadcrumb {
  font-family: var(--font-display); font-size: 10px; letter-spacing: 3.5px; text-transform: uppercase;
  color: var(--muted-2); margin-bottom: 36px;
}
.breadcrumb a { color: var(--muted-2); text-decoration: none; border-bottom: 0.5px solid transparent; transition: border-color 0.2s, color 0.2s; }
.breadcrumb a:hover { color: var(--gold-2); border-bottom-color: var(--gold-2); }
.breadcrumb .sep { color: var(--gold-3); margin: 0 12px; }
.article-eyebrow {
  display: inline-flex; align-items: center; gap: 14px;
  font-family: var(--font-display); font-size: 11px; letter-spacing: 5px; text-transform: uppercase;
  color: var(--gold-2); margin-bottom: 28px;
}
.article-eyebrow::before { content: ''; display: inline-block; width: 36px; height: 0.5px; background: var(--gold-2); }
.article-title {
  font-family: var(--font-body); font-weight: 500;
  font-size: clamp(34px, 5.4vw, 56px); line-height: 1.14;
  color: var(--ink); margin: 0 0 22px;
}
.article-title .ital { font-style: italic; font-weight: 400; display: block; }
.article-hebrew { font-family: var(--font-hebrew); font-size: 24px; color: var(--gold); letter-spacing: 0.5px; margin: 18px 0 28px; }
.article-lede {
  font-family: var(--font-body); font-style: italic; font-size: 22px; line-height: 1.55;
  color: var(--ink); margin: 0 0 18px; opacity: 0.95;
}

/* === ATTRIBUTES PANEL (month profile at a glance) === */
.attr-grid {
  display: grid; grid-template-columns: repeat(2, 1fr); gap: 0;
  border-top: 0.5px solid var(--line); border-bottom: 0.5px solid var(--line);
  margin: 38px 0 48px;
}
.attr {
  padding: 16px 20px; border-bottom: 0.5px solid var(--line);
}
.attr:nth-child(odd) { border-right: 0.5px solid var(--line); }
.attr:last-child, .attr:nth-last-child(2):nth-child(odd) { border-bottom: 0; }
.attr .k {
  font-family: var(--font-display); font-size: 10px; letter-spacing: 3px; text-transform: uppercase;
  color: var(--gold-2); display: block; margin-bottom: 6px;
}
.attr .v { font-family: var(--font-body); font-size: 19px; color: var(--ink); }
.attr .v .he { font-family: var(--font-hebrew); color: var(--gold); margin-left: 6px; }
@media (max-width: 560px) { .attr-grid { grid-template-columns: 1fr; } .attr:nth-child(odd) { border-right: 0; } }

/* === PROSE === */
.prose p { margin: 0 0 22px; }
.prose p.lead-para::first-letter {
  font-family: var(--font-display); font-size: 64px; font-weight: 500;
  float: left; line-height: 0.92; padding: 6px 12px 0 0; color: var(--gold-2);
}
.prose h2 {
  font-family: var(--font-body); font-weight: 500; font-style: italic;
  font-size: 30px; line-height: 1.25; margin: 56px 0 18px; color: var(--ink);
}
.prose h2::before {
  content: ''; display: block; width: 48px; height: 0.5px; background: var(--gold-2); margin-bottom: 22px;
}
.prose h3 {
  font-family: var(--font-display); font-size: 12px; letter-spacing: 3.5px; text-transform: uppercase;
  color: var(--gold-2); margin: 32px 0 12px; font-weight: 500;
}
.prose em { font-style: italic; color: var(--accent); }
.prose a { color: var(--gold-2); text-decoration: none; border-bottom: 0.5px solid var(--gold-3); transition: color 0.2s, border-color 0.2s; }
.prose a:hover { color: var(--ink); border-bottom-color: var(--ink); }
.prose ul { margin: 0 0 22px; padding-left: 22px; }
.prose li { margin-bottom: 8px; }

.pullquote {
  margin: 40px -8px; padding: 26px 32px;
  border-left: 2px solid var(--gold-2);
  background: rgba(168,136,74,0.06);
  font-family: var(--font-body); font-style: italic; font-size: 22px; line-height: 1.55;
  color: var(--ink);
}
.pullquote .attr {
  display: block; margin-top: 12px;
  font-family: var(--font-display); font-style: normal; font-size: 10px; letter-spacing: 3px; text-transform: uppercase;
  color: var(--muted-2);
}
.hebrew-inline { font-family: var(--font-hebrew); font-size: 20px; color: var(--gold); }
.source-pin {
  font-family: var(--font-display); font-size: 10px; letter-spacing: 2.5px; text-transform: uppercase;
  color: var(--muted-2); margin: -8px 0 22px; padding-left: 14px; border-left: 0.5px solid var(--gold-3);
}
.source-pin a { color: var(--muted-2); border: 0; text-decoration: underline; text-underline-offset: 2px; }
.source-pin a:hover { color: var(--gold-2); }

.rule { display: flex; align-items: center; gap: 16px; margin: 56px 0 36px; opacity: 0.7; }
.rule::before, .rule::after { content: ''; flex: 1; height: 0.5px; background: var(--gold-3); }
.rule-mark { font-family: var(--font-display); font-size: 11px; letter-spacing: 6px; color: var(--gold-2); }

/* === FAQ === */
.faq { margin: 48px 0 8px; }
.faq-q {
  font-family: var(--font-body); font-style: italic; font-weight: 500; font-size: 22px;
  color: var(--ink); margin: 28px 0 8px;
}
.faq-a { font-family: var(--font-body); font-size: 18px; color: var(--muted); margin: 0; }

/* === PILLAR SIGN GRID === */
.sign-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 16px; margin: 40px 0; }
.sign-card {
  display: block; padding: 22px 24px; background: var(--bg-2); border: 0.5px solid var(--line);
  text-decoration: none; transition: border-color 0.2s, background 0.2s; border-top: 2px solid var(--gold-3);
}
.sign-card:hover { border-color: var(--gold-2); background: var(--cream); }
.sign-card .month { font-family: var(--font-display); font-size: 12px; letter-spacing: 3px; text-transform: uppercase; color: var(--gold-2); }
.sign-card .sign { font-family: var(--font-body); font-style: italic; font-size: 24px; color: var(--ink); margin: 6px 0 2px; }
.sign-card .meta { font-family: var(--font-body); font-size: 15px; color: var(--muted-2); }
.sign-card .he { font-family: var(--font-hebrew); font-size: 20px; color: var(--gold); float: right; }

/* === CTA === */
.end-cta {
  margin-top: 72px; padding: 48px 36px; text-align: center;
  background: var(--bg-2); border: 0.5px solid var(--line);
  border-top: 2px solid var(--gold-2);
}
.end-cta .eyebrow {
  font-family: var(--font-display); font-size: 11px; letter-spacing: 4px; text-transform: uppercase;
  color: var(--gold-2); margin-bottom: 16px;
}
.end-cta h3 {
  font-family: var(--font-body); font-weight: 500; font-style: italic;
  font-size: 32px; line-height: 1.3; margin: 0 0 14px; color: var(--ink);
}
.end-cta p {
  font-family: var(--font-body); font-style: italic; font-size: 18px;
  color: var(--muted); margin: 0 auto 28px; max-width: 480px;
}
.end-cta .btn {
  display: inline-block; padding: 16px 38px;
  background: var(--ink); color: var(--cream);
  font-family: var(--font-display); font-size: 12px; letter-spacing: 4px; text-transform: uppercase;
  text-decoration: none; border: none; cursor: pointer;
  transition: background 0.2s;
}
.end-cta .btn:hover { background: var(--gold-2); }

/* === FURTHER READING === */
.further { margin-top: 64px; padding-top: 36px; border-top: 0.5px solid var(--line); }
.further .eyebrow {
  font-family: var(--font-display); font-size: 11px; letter-spacing: 4px; text-transform: uppercase;
  color: var(--gold-2); margin-bottom: 22px;
}
.further-item { display: block; margin-bottom: 22px; padding: 18px 22px; background: var(--bg-2); border: 0.5px solid var(--line); text-decoration: none; transition: border-color 0.2s, background 0.2s; }
.further-item:hover { border-color: var(--gold-2); background: var(--cream); }
.further-item .ttl { font-family: var(--font-body); font-style: italic; font-size: 22px; color: var(--ink); margin: 0 0 6px; }
.further-item .dek { font-family: var(--font-body); font-size: 15px; color: var(--muted-2); margin: 0; }

/* === FOOTER === */
.site-foot {
  max-width: 1280px; margin: 80px auto 0; padding: 36px 32px;
  border-top: 0.5px solid var(--line);
  display: flex; justify-content: space-between; align-items: center; gap: 24px; flex-wrap: wrap;
  font-family: var(--font-display); font-size: 10px; letter-spacing: 3px; text-transform: uppercase;
  color: var(--muted-2);
}
.site-foot a { color: var(--muted-2); text-decoration: none; border-bottom: 0.5px solid transparent; }
.site-foot a:hover { color: var(--gold-2); border-bottom-color: var(--gold-2); }

/* ── month-hero (illuminated SVG emblem on each Hebrew-month page) ───────── */
.month-hero {
  margin: 26px 0 34px;
  border: 1px solid var(--sand, #d9c9a8);
  background: var(--cream, #faf6ed);
  border-radius: 4px;
  overflow: hidden;
  box-shadow: 0 1px 4px rgba(26, 22, 18, 0.07);
}
.month-hero .mh-svg { display: block; width: 100%; height: auto; }
.month-hero figcaption {
  font-family: var(--font-body);
  font-style: italic;
  font-size: 15px;
  line-height: 1.5;
  color: var(--muted, #5a4226);
  text-align: center;
  padding: 12px 22px 16px;
  border-top: 1px solid var(--sand, #d9c9a8);
}
@media (max-width: 600px) {
  .month-hero figcaption { font-size: 13.5px; padding: 10px 14px 13px; }
}

/* ── name-grid (Hebrew Names hub) ───────────────────────────────────────── */
.name-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
  gap: 12px;
  margin: 28px 0;
}
.name-card {
  display: flex; flex-direction: column; align-items: center; text-align: center;
  gap: 4px; padding: 18px 12px;
  border: 1px solid var(--sand, #d9c9a8); border-radius: 4px;
  background: var(--cream, #faf6ed); text-decoration: none;
  transition: border-color .15s, box-shadow .15s, transform .15s;
}
.name-card:hover { border-color: var(--gold, #a8884a); box-shadow: 0 2px 8px rgba(26,22,18,.08); transform: translateY(-1px); }
.name-card .nc-he { font-family: var(--font-hebrew); font-size: 30px; color: var(--gold, #a8884a); line-height: 1.1; }
.name-card .nc-en { font-family: var(--font-display); font-size: 15px; letter-spacing: 2px; text-transform: uppercase; color: var(--ink, #1a1612); }
.name-card .nc-meta { font-family: var(--font-body); font-style: italic; font-size: 12.5px; color: var(--muted, #5a4226); line-height: 1.35; }

/* ===== Phase 1 — free-tier reorg ===== */
.hero-different { margin-top: 1.1rem; max-width: 40rem; }
.hero-different .hd-eyebrow { font-size: .72rem; letter-spacing: .16em; opacity: .7; margin-bottom: .35rem; }
.hero-different .hd-body { font-size: .98rem; line-height: 1.5; opacity: .92; }

.ss-block { margin: 1.15rem 0; }
.ss-block-label { font-size: .72rem; letter-spacing: .16em; text-transform: uppercase; opacity: .65; margin-bottom: .35rem; }
.ss-name-line { font-size: 1.35rem; line-height: 1.3; }
.ss-name-en { font-weight: 600; }
.ss-name-he { font-size: 1.5rem; }
.ss-name-translit { opacity: .75; }
.ss-name-meaning { font-style: italic; opacity: .85; }
.ss-name-sub { margin-top: .4rem; font-size: .98rem; line-height: 1.5; opacity: .9; }
.ss-soul-pattern-text { font-size: 1.05rem; line-height: 1.55; }

.bsig-row { display: flex; flex-wrap: wrap; gap: .4rem .55rem; }
.bsig-badge { font-size: .86rem; padding: .25rem .55rem; border: 1px solid rgba(180,150,80,.4); border-radius: 999px; white-space: nowrap; max-width: 100%; }
.bsig-label { opacity: .65; }
.ss-challenge-text { font-size: 1rem; line-height: 1.5; }
.ss-open-loop-text { font-size: 1.02rem; line-height: 1.55; font-style: italic; opacity: .95; }

/* intention prompt */
.sb-intention { margin: 1rem 0; }
.sb-intention-label { display: block; font-size: .95rem; margin-bottom: .4rem; opacity: .9; }
.sb-intention-input { width: 100%; padding: .6rem .7rem; font: inherit; border: 1px solid rgba(180,150,80,.4); border-radius: .5rem; background: var(--cream, #faf6ed); color: inherit; resize: vertical; }
.sb-intention-skip { margin-top: .45rem; background: none; border: none; font: inherit; font-size: .85rem; opacity: .65; cursor: pointer; text-decoration: underline; color: inherit; }

/* sealed bullets + trust */
.sb-bullets { margin: .8rem 0; padding-left: 1.1rem; line-height: 1.7; }
.sb-trust { margin-top: .9rem; font-size: .85rem; line-height: 1.45; opacity: .7; }

/* intention echo atop unlocked reading */
.sealed-intention-echo { margin: 0 0 1.1rem; padding: .7rem .9rem; border-left: 3px solid rgba(180,150,80,.7); background: rgba(180,150,80,.07); font-size: .95rem; color: var(--ink, #1a1612); }
.sealed-intention-echo .sie-label { font-weight: 600; }

/* reaction form */
.sealed-reaction { margin-top: 2rem; padding-top: 1.4rem; border-top: 1px solid rgba(180,150,80,.25); }
.sealed-reaction .sr-eyebrow { font-size: .72rem; letter-spacing: .16em; opacity: .7; }
.sealed-reaction .sr-title { font-size: 1.1rem; margin: .35rem 0 .8rem; }
.sr-input { width: 100%; margin-bottom: .55rem; padding: .55rem .7rem; font: inherit; border: 1px solid rgba(180,150,80,.35); border-radius: .5rem; background: var(--cream, #faf6ed); color: inherit; resize: vertical; }
.sr-explore-label { font-size: .9rem; margin: .35rem 0; opacity: .85; }
.sr-explore { display: flex; flex-wrap: wrap; gap: .4rem; margin-bottom: .8rem; }
.sr-chip { font: inherit; font-size: .85rem; padding: .3rem .65rem; border: 1px solid rgba(180,150,80,.45); border-radius: 999px; background: none; color: inherit; cursor: pointer; }
.sr-chip.is-on { background: rgba(180,150,80,.25); border-color: rgba(180,150,80,.8); }
.sr-submit { font: inherit; padding: .5rem 1.1rem; border-radius: .5rem; border: 1px solid rgba(180,150,80,.6); background: rgba(180,150,80,.18); color: inherit; cursor: pointer; }
.sr-thanks { margin-top: .6rem; font-style: italic; opacity: .85; }

@media (max-width: 520px) {
  .ss-name-line { font-size: 1.2rem; }
  .bsig-badge { font-size: .8rem; }
}

/* ===== Phase 2 — relationship ring ===== */
#relType { width: 100%; padding: .55rem .7rem; font: inherit; border: 1px solid rgba(180,150,80,.4); border-radius: .5rem; background: var(--cream, #faf6ed); color: inherit; }
.rel-paywall { margin: 1.4rem 0 .4rem; padding: 1.1rem; border: 1px solid rgba(180,150,80,.35); border-radius: .6rem; background: rgba(180,150,80,.06); }
.rel-paywall-eyebrow { font-size: .72rem; letter-spacing: .16em; opacity: .65; margin-bottom: .4rem; }
.rel-paywall-lede { font-size: .98rem; line-height: 1.55; margin-bottom: .9rem; }
.rel-bundle-row { display: flex; flex-wrap: wrap; gap: .5rem; align-items: center; }
.rel-bundle-alt { font: inherit; font-size: .9rem; padding: .45rem .8rem; border-radius: .5rem; border: 1px solid rgba(180,150,80,.5); background: none; color: inherit; cursor: pointer; }
.rel-bundle-alt:hover { background: rgba(180,150,80,.12); }
.rel-restore { margin-top: .6rem; background: none; border: none; font: inherit; font-size: .85rem; opacity: .65; cursor: pointer; text-decoration: underline; color: inherit; }
.rel-paywall-msg { margin-top: .55rem; font-size: .9rem; min-height: 1.1rem; }
.rel-paywall-msg.is-error { color: #9b2c2c; }