/* ============================================================
   feeg.ai · Tarot Lens — "The Almanac" production stylesheet
   Direction chosen 2026-08-04 from design/landing/concepts.html
   (concept II). Deliberately single-theme: the night-world of
   the brand. Palette from design/icon/README.md.
   Copy convention: no em dashes in user-visible text.
   ============================================================ */
:root {
  color-scheme: dark;
  --night: #131022;
  --night-deep: #0e0b14;
  --gold: #e0b45c;
  --gold-bright: #f0cc7e;
  --gold-ink: #c99b45;
  --ivory: #f6f1e4;
  --ivory-dim: rgba(246, 241, 228, 0.62);
  --lavender: rgba(143, 127, 184, 0.9);
  --rule: rgba(201, 155, 69, 0.4);
  --rule-faint: rgba(201, 155, 69, 0.18);
  --display: "Didot", "Bodoni MT", "Bodoni 72", "Palatino Linotype", Georgia, serif;
  --body: "Iowan Old Style", "Palatino Linotype", Palatino, Georgia, serif;
  --mono: "Cascadia Mono", Consolas, "SF Mono", "Roboto Mono", monospace;
}
* { box-sizing: border-box; }
html { margin: 0; padding: 0; }
body {
  margin: 0;
  background: var(--night);
  color: var(--ivory);
  font-family: var(--body);
  line-height: 1.65;
  padding: 2.5rem 1rem;
}
a { color: var(--gold); }
:focus-visible { outline: 2px solid var(--gold); outline-offset: 3px; }

/* ---------- the plate frame ---------- */
.plate {
  max-width: 880px;
  margin: 0 auto;
  padding: 3rem clamp(1.2rem, 5vw, 4rem);
  border: 1px solid rgba(201, 155, 69, 0.55);
  position: relative;
}
.plate::before {
  content: "";
  position: absolute;
  inset: 6px;
  pointer-events: none;
  border: 1px solid rgba(201, 155, 69, 0.28);
}
.plate--text { max-width: 760px; }

/* ---------- masthead ---------- */
.house {
  text-align: center;
  font-family: var(--mono);
  font-size: 0.62rem;
  letter-spacing: 0.34em;
  text-transform: uppercase;
  color: var(--gold-ink);
  margin: 0 0 2rem;
}
.title {
  text-align: center;
  font-family: var(--display);
  font-weight: 400;
  font-size: clamp(2.6rem, 7vw, 4.6rem);
  letter-spacing: 0.18em;
  text-transform: uppercase;
  margin: 0;
  color: var(--ivory);
  text-indent: 0.18em;
  text-wrap: balance;
}
.title--small { font-size: clamp(1.9rem, 5vw, 3rem); }
.subtitle {
  text-align: center;
  font-style: italic;
  color: var(--ivory-dim);
  font-size: 1.05rem;
  margin: 1rem auto 0;
  max-width: 44ch;
  text-wrap: balance;
}

/* ---------- engraved rules ---------- */
.rule {
  display: flex;
  align-items: center;
  gap: 1rem;
  margin: 2.6rem 0;
  color: var(--gold-ink);
}
.rule::before, .rule::after { content: ""; flex: 1; border-top: 1px solid var(--rule); }
.rule .orn { font-size: 0.9rem; letter-spacing: 0.5em; text-indent: 0.5em; }

/* ---------- plate figure (constellation) ---------- */
.plate-fig { text-align: center; }
.plate-fig svg { width: min(340px, 80vw); height: auto; }
.caption {
  font-size: 0.85rem;
  font-style: italic;
  color: var(--ivory-dim);
  max-width: 52ch;
  margin: 1rem auto 0;
}
.caption b {
  font-style: normal;
  font-weight: 400;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  font-size: 0.72rem;
  color: var(--gold-ink);
}

/* ---------- lede ---------- */
.lede {
  max-width: 58ch;
  margin: 0 auto;
  text-align: center;
  color: var(--ivory);
  font-size: 1.05rem;
}
.lede em { color: var(--gold-bright); }

/* ---------- figures, fixed 2 x 2 ---------- */
.figs {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 2.4rem 1.5rem;
  margin: 0.5rem auto 0;
  max-width: 560px;
}
@media (max-width: 420px) { .figs { grid-template-columns: 1fr; } }
.fig { text-align: center; margin: 0; }
.fig svg { width: 74px; height: 74px; }
.fig figcaption { font-size: 0.82rem; color: var(--ivory-dim); font-style: italic; margin-top: 0.5rem; }
.fig figcaption b {
  display: block;
  font-style: normal;
  font-weight: 400;
  font-size: 0.68rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--gold-ink);
  margin-bottom: 0.3rem;
}

/* ---------- prose sections ---------- */
.prose { max-width: 62ch; margin: 0 auto; }
.prose p, .prose li { color: var(--ivory-dim); }
.prose p strong, .prose li strong { color: var(--ivory); font-weight: 400; }
.prose h2 {
  font-family: var(--body);
  font-weight: 400;
  font-size: 0.78rem;
  letter-spacing: 0.26em;
  text-transform: uppercase;
  color: var(--gold-ink);
  margin: 2.6rem 0 0.8rem;
}
.prose h3 {
  font-family: var(--display);
  font-weight: 400;
  font-size: 1.15rem;
  color: var(--ivory);
  margin: 1.8rem 0 0.4rem;
}
.prose ul { padding-left: 1.2rem; }
.prose a { color: var(--gold-ink); text-decoration: none; border-bottom: 1px solid var(--rule); }
.prose a:hover { color: var(--gold); border-bottom-color: var(--gold); }
.effective {
  text-align: center;
  font-style: italic;
  color: var(--ivory-dim);
  font-size: 0.9rem;
  margin: 1.2rem 0 0;
}

/* ---------- decks table ---------- */
.table-scroll { overflow-x: auto; }
.decks { width: 100%; border-collapse: collapse; font-size: 0.92rem; }
.decks caption {
  font-family: var(--mono);
  font-size: 0.64rem;
  letter-spacing: 0.26em;
  text-transform: uppercase;
  color: var(--gold-ink);
  margin-bottom: 0.9rem;
}
.decks th, .decks td { padding: 0.6rem 0.8rem; text-align: left; }
.decks th {
  font-weight: 400;
  font-size: 0.68rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--gold-ink);
  border-bottom: 1px solid rgba(201, 155, 69, 0.5);
}
.decks td { border-bottom: 1px solid var(--rule-faint); color: var(--ivory); }
.decks td i { color: var(--ivory-dim); }
.decks .num { font-variant-numeric: tabular-nums; }

/* ---------- call to action ---------- */
.cta-row { text-align: center; margin: 1rem 0 0.5rem; }
.cta {
  display: inline-block;
  padding: 0.8rem 2rem;
  border: 1px solid var(--gold);
  color: var(--gold);
  text-decoration: none;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  font-size: 0.78rem;
  font-family: var(--body);
  background: transparent;
  transition: background 0.25s, color 0.25s;
}
a.cta:hover { background: var(--gold); color: var(--night-deep); }
.cta-note {
  text-align: center;
  font-style: italic;
  font-size: 0.85rem;
  color: var(--ivory-dim);
  margin: 0.9rem 0 0;
}

/* ---------- footer ---------- */
.foot {
  margin-top: 2.5rem;
  text-align: center;
  font-size: 0.8rem;
  color: var(--ivory-dim);
}
.foot a { color: var(--gold-ink); text-decoration: none; border-bottom: 1px solid var(--rule); }
.foot a:hover { color: var(--gold); border-bottom-color: var(--gold); }
.foot .sep { margin: 0 0.6em; color: rgba(201, 155, 69, 0.5); }

.backlink {
  display: inline-block;
  margin-top: 0.4rem;
  font-style: italic;
  font-size: 0.9rem;
}

/* ---------- print (policy pages get printed) ---------- */
@media print {
  body { background: #fff; color: #1a1a1a; padding: 0; }
  :root { color-scheme: light; }
  .plate, .plate::before { border-color: #999; }
  .prose p, .prose li, .caption, .subtitle, .effective { color: #333; }
  .prose h2, .house, .caption b { color: #6b5320; }
  .title, .prose h3 { color: #111; }
  .prose a { color: #6b5320; }
  .rule { color: #999; }
  .cta-row, .backlink { display: none; }
}