/* The Nightly Oracle — shared design system for the content pages
   (About, Privacy, Contact, Shop, Guides). The interactive app in
   index.html keeps its own embedded copy of these tokens so it stays a
   single self-contained file; this stylesheet mirrors that same look. */

:root{
  color-scheme: dark;
  --bg: #0b0816;
  --bg-deep: #060410;
  --surface: #16102a;
  --surface-2: #201936;
  --ink: #ece5f7;
  --ink-dim: #a394c4;
  --ink-faint: #6f6291;
  --gold: #c9a35f;
  --gold-soft: #8a744a;
  --violet: #8a6bd6;
  --line: #2b2248;
  --shadow: 0 20px 60px rgba(0,0,0,0.45);
  --serif-display: 'Cinzel', 'Times New Roman', serif;
  --serif-body: 'Cormorant Garamond', 'Georgia', serif;
  --sans-ui: 'Jost', 'Helvetica Neue', Arial, sans-serif;
}

*{ box-sizing: border-box; }
html{ background: var(--bg); }
body{
  margin:0;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--serif-body);
  font-size: 19px;
  line-height: 1.6;
  padding-inline: 20px;
}
a{ color: var(--gold); }
h1,h2,h3{ font-family: var(--serif-display); font-weight: 600; letter-spacing: 0.02em; margin: 0; }
.eyebrow{ font-family: var(--sans-ui); text-transform: uppercase; letter-spacing: 0.18em; font-size: 12px; color: var(--ink-faint); }

/* ---------- Nav (matches index.html) ---------- */
nav.mw-nav{
  position: sticky; top: 0; z-index: 40;
  display:flex; align-items:center; justify-content:space-between; gap: 16px;
  padding: 16px 0; max-width: 920px; margin: 0 auto; flex-wrap: wrap;
  background: var(--bg);
}
.wordmark{ font-family: var(--serif-display); font-size: 20px; letter-spacing: 0.14em; color: var(--ink); text-decoration:none; display:flex; align-items:center; gap:10px; }
.wordmark .glyph{ color: var(--gold); font-size: 18px; }
.mw-links{ display:flex; gap: 4px; align-items:center; font-family: var(--sans-ui); flex-wrap: wrap; }
.mw-links a{
  font-family: var(--sans-ui); font-size: 13px; letter-spacing: 0.06em; text-transform: uppercase;
  color: var(--ink-dim); text-decoration: none; padding: 8px 14px; border-radius: 999px; border: 1px solid transparent;
}
.mw-links a:hover{ color: var(--ink); }
.mw-links a.current{ color: var(--gold); border-color: var(--gold-soft); background: rgba(201,163,95,0.08); }

main{ max-width: 920px; margin: 0 auto; padding-bottom: 60px; }
.col{ max-width: 680px; margin: 0 auto; }
.page-hero{ padding: 44px 0 12px; text-align:center; }
.page-hero h1{ font-size: clamp(30px, 5vw, 44px); margin-top: 14px; }
.page-hero p.lede{ font-family: var(--serif-body); font-style: italic; color: var(--ink-dim); font-size: 20px; max-width: 560px; margin: 16px auto 0; }

.divider{ display:flex; align-items:center; justify-content:center; gap:14px; margin: 40px 0; color: var(--gold-soft); }
.divider::before, .divider::after{ content:""; height:1px; width: 72px; background: linear-gradient(90deg, transparent, var(--line)); }
.divider::after{ background: linear-gradient(90deg, var(--line), transparent); }

/* ---------- Article / content pages ---------- */
.article{ font-size: 19px; color: var(--ink-dim); }
.article p{ margin: 0 0 20px; }
.article h2{ font-size: 26px; color: var(--ink); margin: 40px 0 14px; }
.article h3{ font-size: 20px; color: var(--gold); margin: 28px 0 10px; }
.article ul, .article ol{ margin: 0 0 20px; padding-left: 24px; }
.article li{ margin-bottom: 8px; }
.article strong{ color: var(--ink); }
.article .callout{
  background: var(--surface); border: 1px solid var(--gold-soft); border-radius: 12px;
  padding: 18px 22px; margin: 26px 0; font-size: 17px; color: var(--ink-dim);
}
.byline{ font-family: var(--sans-ui); font-size: 12px; color: var(--ink-faint); letter-spacing: 0.04em; margin-top: 8px; }

/* ---------- Guide index / cards ---------- */
.guide-grid{ display:grid; grid-template-columns: repeat(2, 1fr); gap: 18px; margin-top: 30px; }
@media (max-width: 640px){ .guide-grid{ grid-template-columns: 1fr; } }
.guide-card{
  background: var(--surface); border: 1px solid var(--line); border-radius: 14px; padding: 24px;
  text-decoration: none; color: var(--ink); display:flex; flex-direction:column; gap:8px;
}
.guide-card:hover{ border-color: var(--gold-soft); background: var(--surface-2); }
.guide-card h3{ font-size: 19px; color: var(--ink); margin: 0; }
.guide-card p{ font-family: var(--sans-ui); font-size: 13px; color: var(--ink-dim); margin: 0; line-height: 1.5; }
.guide-card .tag{ font-family: var(--sans-ui); font-size: 10px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--gold); }

/* ---------- Blog index / cards ---------- */
.blog-grid{ display:flex; flex-direction:column; gap: 16px; margin-top: 30px; }
.blog-card{
  background: var(--surface); border: 1px solid var(--line); border-radius: 14px; padding: 26px;
  text-decoration: none; color: var(--ink); display:flex; flex-direction:column; gap:8px;
}
.blog-card:hover{ border-color: var(--gold-soft); background: var(--surface-2); }
.blog-card .date{ font-family: var(--sans-ui); font-size: 10px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--gold); }
.blog-card h3{ font-size: 22px; color: var(--ink); margin: 0; }
.blog-card p{ font-family: var(--serif-body); font-size: 17px; color: var(--ink-dim); margin: 0; line-height: 1.5; }
.blog-card .read-more{ font-family: var(--sans-ui); font-size: 11px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink-faint); margin-top: 4px; }
.blog-card:hover .read-more{ color: var(--gold); }
.post-meta{ font-family: var(--sans-ui); font-size: 12px; color: var(--ink-faint); letter-spacing: 0.04em; text-align:center; margin-top: 10px; }
.post-share{ display:flex; gap: 10px; justify-content:center; flex-wrap: wrap; margin: 36px 0; }
.post-share a{
  font-family: var(--sans-ui); font-size: 11px; letter-spacing: 0.06em; text-transform: uppercase;
  color: var(--ink-dim); border: 1px solid var(--line); border-radius: 999px; padding: 8px 16px; text-decoration:none;
}
.post-share a:hover{ color: var(--gold); border-color: var(--gold-soft); }

/* ---------- Shop ---------- */
.disclosure{
  background: var(--surface); border: 1px solid var(--line); border-radius: 12px; padding: 16px 20px;
  font-family: var(--sans-ui); font-size: 13px; color: var(--ink-dim); margin: 24px 0 10px; line-height: 1.6;
}
.shop-category{ margin-top: 44px; }
.shop-category h2{ font-size: 24px; color: var(--gold); }
.product-grid{ display:grid; grid-template-columns: repeat(3, 1fr); gap: 18px; margin-top: 18px; }
@media (max-width: 780px){ .product-grid{ grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 520px){ .product-grid{ grid-template-columns: 1fr; } }
.product-card{ background: var(--surface); border: 1px solid var(--line); border-radius: 14px; padding: 20px; display:flex; flex-direction:column; gap: 10px; }
.product-card h4{ font-family: var(--serif-display); font-size: 17px; color: var(--ink); margin: 0; }
.product-card p{ font-family: var(--sans-ui); font-size: 13px; color: var(--ink-dim); margin: 0; line-height: 1.5; flex-grow: 1; }
.product-card .buy-btn{
  align-self: flex-start; font-family: var(--sans-ui); font-size: 12px; letter-spacing: 0.08em; text-transform: uppercase;
  background: linear-gradient(180deg, var(--gold), var(--gold-soft)); color: #1a1408; text-decoration: none;
  padding: 10px 18px; border-radius: 999px;
}
.product-card .buy-btn:hover{ filter: brightness(1.08); }
.product-card .placeholder-note{ font-family: var(--sans-ui); font-size: 11px; color: var(--ink-faint); font-style: italic; }

/* ---------- Forms (Contact) ---------- */
.form-field{ margin-bottom: 18px; }
.form-field label{ display:block; font-family: var(--sans-ui); font-size: 12px; letter-spacing:0.08em; text-transform:uppercase; color: var(--ink-faint); margin-bottom: 8px; }
.form-field input, .form-field textarea{
  width:100%; background: var(--surface); border: 1px solid var(--line); border-radius: 10px;
  color: var(--ink); font-family: var(--sans-ui); font-size: 15px; padding: 12px 14px;
}
.form-field textarea{ min-height: 140px; resize: vertical; }
.submit-btn{
  font-family: var(--sans-ui); font-size: 14px; letter-spacing: 0.1em; text-transform: uppercase;
  background: linear-gradient(180deg, var(--gold), var(--gold-soft)); color: #1a1408; border:none;
  padding: 14px 30px; border-radius: 999px; cursor:pointer;
}

footer{ text-align:center; padding: 44px 0 24px; font-family: var(--sans-ui); font-size: 12px; color: var(--ink-faint); }
footer .footer-links{ margin-top: 10px; display:flex; gap: 16px; justify-content:center; flex-wrap: wrap; }
footer .footer-links a{ color: var(--ink-faint); text-decoration: none; }
footer .footer-links a:hover{ color: var(--gold); }