/* Flint & Flicker — shared site stylesheet */
:root{
  --bg: #0b0a0d;
  --bg-2: #14111a;
  --bg-3: #1b1720;
  --ember: #d98a3d;
  --ember-soft: #e0a35f;
  --moon: #cfd6e8;
  --text: #e9e4dc;
  --text-dim: #a89f95;
  --text-faint: #6f675f;
  --line: rgba(255,255,255,0.08);
  --line-strong: rgba(255,255,255,0.16);
  --radius: 20px;
}
*{box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{
  margin:0;
  background:var(--bg);
  color:var(--text);
  font-family: -apple-system, BlinkMacSystemFont, "Helvetica Neue", Arial, sans-serif;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
a{color:inherit; text-decoration:none;}
img{max-width:100%; display:block;}
h1,h2,h3,h4{font-family:'Cormorant Garamond', Georgia, serif; font-weight:600; line-height:1.15; text-wrap:balance; margin:0 0 .5em;}
p{margin:0 0 1em; line-height:1.7;}

/* ---------- NAV ---------- */
nav.sitenav{
  position:fixed; top:0; left:0; right:0; z-index:100;
  display:flex; align-items:center; justify-content:space-between;
  padding: 16px 5vw;
  background: rgba(11,10,13,0.6);
  backdrop-filter: blur(14px);
  border-bottom: 1px solid var(--line);
}
.brand{ display:flex; align-items:center; gap:10px; }
.brand img{ height:38px; width:auto; }
.brand span{ font-size:14px; letter-spacing:0.14em; font-weight:600; text-transform:uppercase; color:var(--text); }
.navlinks{display:flex; gap: 28px; font-size:13px; letter-spacing:0.03em; color:var(--text-dim); align-items:center;}
.navlinks a:hover{color:var(--ember-soft);}
.navlinks a.active{color:var(--ember-soft);}
.nav-toggle{ display:none; background:none; border:1px solid var(--line-strong); color:var(--text); border-radius:8px; padding:8px 10px; font-size:13px; }
@media (max-width:900px){
  .navlinks{ display:none; position:absolute; top:100%; left:0; right:0; background:var(--bg-2); flex-direction:column; gap:0; border-bottom:1px solid var(--line); }
  .navlinks.open{ display:flex; }
  .navlinks a{ padding:16px 6vw; border-top:1px solid var(--line); width:100%; }
  .nav-toggle{ display:block; }
}
main{ padding-top:78px; }

/* ---------- HERO (sub-page) ---------- */
.page-hero{
  padding: 76px 6vw 56px;
  background: radial-gradient(ellipse 70% 50% at 50% 0%, rgba(217,138,61,0.14), transparent 60%);
  border-bottom:1px solid var(--line);
}
.page-hero .wrap{ max-width:900px; margin:0 auto; }
.eyebrow{ font-size:12px; letter-spacing:0.2em; text-transform:uppercase; color:var(--ember-soft); margin-bottom:14px; }
.page-hero h1{ font-size:clamp(32px,5vw,54px); max-width:20ch; }
.page-hero .lede{ font-size:clamp(15px,1.6vw,18px); color:var(--text-dim); max-width:60ch; line-height:1.7; }

/* ---------- SECTIONS / CONTAINERS ---------- */
.container{ max-width: 1080px; margin:0 auto; padding: 64px 6vw; }
.container.narrow{ max-width:760px; }
.section-head{ max-width:680px; margin-bottom:44px; }
.section-head h2{ font-size:clamp(26px,3.6vw,38px); }
.section-head p{ color:var(--text-dim); }

/* ---------- CARDS / GRID ---------- */
.card-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:20px; }
.card-grid.two{ grid-template-columns:repeat(2,1fr); }
@media (max-width:860px){ .card-grid, .card-grid.two{ grid-template-columns:1fr; } }
.card{
  display:block;
  background:var(--bg-2); border:1px solid var(--line); border-radius:var(--radius);
  padding:30px 26px; transition:transform .3s ease, border-color .3s ease;
}
.card:hover{ transform:translateY(-4px); border-color:rgba(217,138,61,0.35); }
.card h3{ font-size:19px; margin-bottom:8px; }
.card p{ font-size:14.5px; color:var(--text-dim); margin-bottom:0; }
.card .tag{ display:inline-block; font-size:10.5px; letter-spacing:0.08em; text-transform:uppercase; color:var(--ember-soft); border:1px solid var(--line-strong); border-radius:999px; padding:3px 10px; margin-bottom:14px; }
.card.image{ padding:0; overflow:hidden; }
.card.image img{ height:200px; width:100%; object-fit:cover; }
.card.image .card-body{ padding:24px 22px; }

/* ---------- BUTTONS ---------- */
.btn{ display:inline-block; padding:13px 28px; border-radius:999px; font-size:14px; letter-spacing:0.03em; transition:transform .25s ease, box-shadow .25s ease; }
.btn-primary{ background:linear-gradient(180deg,var(--ember-soft),var(--ember)); color:#1a0f04; font-weight:600; box-shadow:0 8px 28px rgba(217,138,61,0.25); }
.btn-primary:hover{ transform:translateY(-2px); }
.btn-ghost{ border:1px solid var(--line-strong); color:var(--text); }
.btn-ghost:hover{ border-color:rgba(255,255,255,0.3); }

/* ---------- ARTICLE PROSE ---------- */
.prose{ max-width:720px; }
.prose h2{ font-size:clamp(24px,3vw,32px); margin-top:2em; }
.prose h3{ font-size:20px; margin-top:1.6em; color:var(--ember-soft); }
.prose p{ color:var(--text-dim); font-size:16px; }
.prose strong{ color:var(--text); }
.prose ul,.prose ol{ color:var(--text-dim); padding-left:1.3em; margin-bottom:1em; }
.prose li{ margin-bottom:.5em; line-height:1.6; }
.prose blockquote{ border-left:2px solid var(--ember); margin:1.5em 0; padding:.4em 0 .4em 1.4em; color:var(--text); font-style:italic; }

/* ---------- TABLES ---------- */
table.corr{ width:100%; border-collapse:collapse; font-size:14.5px; }
table.corr th{ text-align:left; font-size:11px; letter-spacing:0.08em; text-transform:uppercase; color:var(--ember-soft); padding:10px 14px; border-bottom:1px solid var(--line-strong); }
table.corr td{ padding:12px 14px; border-bottom:1px solid var(--line); color:var(--text-dim); vertical-align:top; }
table.corr tr:hover td{ background:rgba(255,255,255,0.02); }
table.corr td.name{ color:var(--text); font-weight:600; white-space:nowrap; }
.table-wrap{ overflow-x:auto; border:1px solid var(--line); border-radius:var(--radius); }
.table-wrap table.corr{ min-width:640px; }

/* ---------- FILTER / SEARCH ---------- */
.filter-bar{ display:flex; gap:12px; flex-wrap:wrap; align-items:center; margin-bottom:28px; }
.filter-bar input[type=search]{
  background:var(--bg-2); border:1px solid var(--line-strong); border-radius:999px; color:var(--text);
  padding:11px 20px; font-size:14px; flex:1; min-width:220px;
}
.filter-bar input[type=search]::placeholder{ color:var(--text-faint); }
.filter-pills{ display:flex; gap:8px; flex-wrap:wrap; }
.pill{
  background:var(--bg-2); border:1px solid var(--line-strong); border-radius:999px; padding:7px 16px;
  font-size:12.5px; color:var(--text-dim); cursor:pointer; transition:all .2s ease;
}
.pill:hover{ border-color:rgba(217,138,61,0.4); }
.pill.active{ background:var(--ember); border-color:var(--ember); color:#1a0f04; font-weight:600; }
.result-count{ font-size:12.5px; color:var(--text-faint); margin-bottom:14px; }

/* ---------- SABBAT / PHASE GRID ---------- */
.wheel-grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:18px; }
@media (max-width:860px){ .wheel-grid{ grid-template-columns:repeat(2,1fr); } }
@media (max-width:480px){ .wheel-grid{ grid-template-columns:1fr; } }
.sabbat-card{
  position:relative; border-radius:var(--radius); overflow:hidden; aspect-ratio:4/5;
  border:1px solid var(--line);
}
.sabbat-card img{ width:100%; height:100%; object-fit:cover; transition:transform .5s ease; }
.sabbat-card:hover img{ transform:scale(1.06); }
.sabbat-card .overlay{
  position:absolute; inset:0; background:linear-gradient(180deg, transparent 40%, rgba(7,6,10,0.92) 100%);
  display:flex; flex-direction:column; justify-content:flex-end; padding:20px;
}
.sabbat-card .date{ font-size:10.5px; letter-spacing:0.1em; text-transform:uppercase; color:var(--ember-soft); margin-bottom:4px; }
.sabbat-card h3{ font-size:20px; margin:0; color:#fff; }

/* ---------- MOON WIDGET EMBED WRAP ---------- */
.widget{
  background: linear-gradient(180deg, var(--bg-2), var(--bg-3));
  border: 1px solid var(--line); border-radius: 28px; padding: 44px 40px;
  display: grid; grid-template-columns: 220px 1fr; gap: 40px; align-items: center;
}
@media (max-width: 680px){ .widget{ grid-template-columns: 1fr; text-align:center; padding: 36px 26px; } .moon-stage{ margin:0 auto; } }
.moon-stage{ position: relative; width: 200px; height: 200px; }
.moon-stage canvas{ width: 100%; height: 100%; filter: drop-shadow(0 0 46px rgba(207,214,232,0.22)); animation: breathe 6s ease-in-out infinite; }
@keyframes breathe{ 0%,100%{ filter: drop-shadow(0 0 40px rgba(207,214,232,0.18)); } 50%{ filter: drop-shadow(0 0 60px rgba(207,214,232,0.32)); } }
.moon-info h2{ font-style:italic; font-size:clamp(24px,3vw,32px); margin-bottom:6px; }
.moon-info h2 em{ color:var(--ember-soft); font-style:italic; }
.moon-sub{ color:var(--text-dim); font-size:15px; margin-bottom:20px; line-height:1.6; }
.stat-row{ display:flex; gap:26px; flex-wrap:wrap; }
@media (max-width:680px){ .stat-row{ justify-content:center; } }
.stat .num{ font-variant-numeric:tabular-nums; font-size:21px; font-weight:600; display:block; }
.stat .lbl{ font-size:10.5px; letter-spacing:0.08em; text-transform:uppercase; color:var(--text-faint); margin-top:2px; display:block; }
.picker{ display:grid; grid-template-columns:repeat(8,1fr); gap:10px; margin:28px 0; }
@media (max-width:620px){ .picker{ grid-template-columns:repeat(4,1fr); } }
.pick{ background:var(--bg-2); border:1px solid var(--line); border-radius:16px; padding:12px 6px 10px; display:flex; flex-direction:column; align-items:center; gap:6px; cursor:pointer; color:var(--text-dim); font-family:inherit; transition:all .25s ease; }
.pick:hover{ transform:translateY(-3px); border-color:rgba(217,138,61,0.35); }
.pick.active{ border-color:var(--ember); background:var(--bg-3); color:var(--text); }
.pick canvas{ width:30px; height:30px; }
.pick span{ font-size:10px; text-align:center; line-height:1.25; }
.meta-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:16px; margin-top:24px; }
@media (max-width:560px){ .meta-grid{ grid-template-columns:1fr; } }
.meta-box{ background:var(--bg-2); border:1px solid var(--line); border-radius:16px; padding:16px 18px; }
.meta-box .mb-label{ font-size:10.5px; letter-spacing:0.1em; text-transform:uppercase; color:var(--ember-soft); margin-bottom:6px; }
.meta-box p{ font-size:13px; color:var(--text-dim); margin:0; }

/* ---------- SPELL / RECIPE BOX ---------- */
.box{ background:var(--bg-2); border:1px solid var(--line); border-radius:var(--radius); padding:26px 28px; margin:24px 0; }
.box .box-label{ font-size:11px; letter-spacing:0.1em; text-transform:uppercase; color:var(--ember-soft); margin-bottom:10px; }
.box h4{ font-size:18px; margin-bottom:10px; color:var(--text); }
.box p{ color:var(--text-dim); font-size:14.5px; margin-bottom:8px; }

/* ---------- BREADCRUMB ---------- */
.crumb{ font-size:12.5px; color:var(--text-faint); margin-bottom:18px; }
.crumb a:hover{ color:var(--ember-soft); }

/* ---------- FOOTER ---------- */
footer.sitefoot{ background:#07060a; padding:64px 6vw 36px; text-align:center; border-top:1px solid var(--line); }
footer.sitefoot .brand{ justify-content:center; margin-bottom:18px; }
footer.sitefoot p{ color:var(--text-dim); font-size:13px; max-width:42ch; margin:0 auto 26px; }
footer.sitefoot .navlinks{ position:static; display:flex; justify-content:center; margin-bottom:26px; background:none; border:none; }
footer.sitefoot .navlinks a{ padding:0 14px; border:none; width:auto; }
footer.sitefoot .fine{ font-size:11px; color:#5c564f; letter-spacing:0.05em; }

/* .reveal is now purely a semantic marker — always visible at rest, no
   scroll-gated opacity. Kept as a class (rather than removed from markup)
   in case a future pass wants a CSS-only, always-safe entrance treatment. */
.reveal{ opacity:1; transform:none; }