/* planetarytheurgy.com — design system
   Classical planetary magic / Renaissance Hermetic reference
   Palette: alchemist's cabinet — bottle-black + antique brass, tuned per planet
*/

@import url('https://fonts.googleapis.com/css2?family=Cinzel:wght@500;600;700&family=Cormorant+Garamond:ital,wght@0,400;0,500;0,600;1,400&family=IBM+Plex+Mono:wght@400;500&display=swap');

:root{
  --bg: #10130f;
  --surface: #161a13;
  --surface-2: #1c2118;
  --ink: #e7e1cd;
  --ink-dim: #9c9683;
  --ink-faint: #6b6858;
  --brass: #a9803f;
  --brass-bright: #cfa25a;
  --hair: #33392b;
  --hair-soft: #262b20;

  --saturn: #6b6b75;
  --jupiter: #4c7aad;
  --mars: #a3453d;
  --sun: #d1a53a;
  --venus: #6a9a5c;
  --mercury: #a39d9f;
  --moon: #ccd0e0;

  --display: 'Cinzel', serif;
  --body: 'Cormorant Garamond', serif;
  --mono: 'IBM Plex Mono', monospace;

  --max: 920px;
}

*{ box-sizing:border-box; }
html{ scroll-behavior:smooth; }
body{
  margin:0;
  background:
    radial-gradient(ellipse 1200px 600px at 50% -10%, rgba(169,128,63,0.08), transparent 60%),
    var(--bg);
  color:var(--ink);
  font-family:var(--body);
  font-size:19px;
  line-height:1.6;
}
@media (prefers-reduced-motion: reduce){ html{ scroll-behavior:auto; } *{ animation-duration:0.01ms !important; transition-duration:0.01ms !important; } }

a{ color:var(--brass-bright); text-decoration:none; border-bottom:1px solid rgba(207,162,90,0.35); }
a:hover{ border-bottom-color:var(--brass-bright); }
a:focus-visible, button:focus-visible, [tabindex]:focus-visible{
  outline:1.5px solid var(--brass-bright); outline-offset:3px;
}

h1,h2,h3{ font-family:var(--display); font-weight:600; letter-spacing:0.02em; color:var(--ink); margin:0 0 0.5em; }
h1{ font-size:2.1rem; line-height:1.25; }
h2{ font-size:1.35rem; text-transform:uppercase; letter-spacing:0.08em; font-weight:600; }
h3{ font-family:var(--body); font-style:italic; font-weight:600; font-size:1.25rem; text-transform:none; letter-spacing:0; }
p{ margin:0 0 1.1em; color:var(--ink); }
.dim{ color:var(--ink-dim); }

.eyebrow{
  font-family:var(--mono); font-size:0.72rem; letter-spacing:0.18em; text-transform:uppercase;
  color:var(--brass-bright); margin-bottom:0.7em; display:block;
}

/* nav */
.nav{
  position:sticky; top:0; z-index:20;
  background:rgba(16,19,15,0.92); backdrop-filter:blur(6px);
  border-bottom:1px solid var(--hair);
}
.nav-inner{
  max-width:var(--max); margin:0 auto; padding:14px 24px;
  display:flex; align-items:center; justify-content:space-between; gap:16px; flex-wrap:wrap;
}
.nav-mark{ font-family:var(--display); font-size:0.92rem; letter-spacing:0.08em; color:var(--ink); }
.nav-mark span{ color:var(--brass-bright); }
.nav-links{ display:flex; gap:22px; flex-wrap:wrap; font-family:var(--mono); font-size:0.74rem; letter-spacing:0.06em; text-transform:uppercase; }
.nav-links a{ color:var(--ink-dim); border-bottom:none; }
.nav-links a:hover, .nav-links a.active{ color:var(--brass-bright); }

.wrap{ max-width:var(--max); margin:0 auto; padding:0 24px; }
main{ padding-bottom:80px; }
section{ padding:56px 0; border-bottom:1px solid var(--hair-soft); }
section:last-of-type{ border-bottom:none; }

/* hero */
.hero{ padding:64px 0 40px; text-align:center; }
.hero h1{ font-size:2.6rem; max-width:680px; margin:0 auto 0.4em; }
.hero .lede{ max-width:560px; margin:0 auto; font-size:1.15rem; color:var(--ink-dim); }

/* wheel */
.wheel-wrap{ display:flex; justify-content:center; margin:36px 0 8px; }
.wheel-wrap svg{ width:min(360px, 80vw); height:auto; }
.glyph{ font-family:var(--body); font-weight:600; cursor:pointer; }
.glyph:hover .glyph-ring{ stroke-width:2.4; }
.glyph text{ fill:var(--bg); }
.glyph-label{ font-family:var(--mono); font-size:9px; letter-spacing:0.08em; fill:var(--ink-faint); }

/* ledger table */
.ledger{ width:100%; border-collapse:collapse; font-size:0.98rem; }
.ledger caption{ text-align:left; font-family:var(--mono); font-size:0.72rem; letter-spacing:0.1em; text-transform:uppercase; color:var(--ink-faint); margin-bottom:10px; }
.ledger th, .ledger td{ text-align:left; padding:10px 14px 10px 0; border-bottom:1px solid var(--hair-soft); vertical-align:top; }
.ledger th{ font-family:var(--mono); font-size:0.68rem; letter-spacing:0.08em; text-transform:uppercase; color:var(--ink-faint); font-weight:500; }
.ledger tr:last-child td{ border-bottom:none; }
.planet-cell{ display:flex; align-items:center; gap:10px; white-space:nowrap; }
.dot{ width:9px; height:9px; border-radius:50%; display:inline-block; flex:none; }

/* attestation tags */
.tag{
  font-family:var(--mono); font-size:0.62rem; letter-spacing:0.06em; text-transform:uppercase;
  padding:2px 7px; border:1px solid var(--hair); color:var(--ink-dim); white-space:nowrap; display:inline-block;
}
.tag.attested{ color:var(--sun); border-color:rgba(209,165,58,0.4); }
.tag.tradition{ color:var(--jupiter); border-color:rgba(76,122,173,0.4); }
.tag.synthesis{ color:var(--mercury); border-color:rgba(163,157,159,0.4); }

/* planet detail blocks */
.planet-block{ padding:34px 0; border-bottom:1px solid var(--hair-soft); }
.planet-block:last-child{ border-bottom:none; }
.planet-head{ display:flex; align-items:baseline; gap:14px; margin-bottom:10px; }
.planet-glyph{ font-family:var(--body); font-size:1.6rem; }
.planet-meta{ font-family:var(--mono); font-size:0.72rem; color:var(--ink-faint); letter-spacing:0.04em; margin-bottom:14px; }
.planet-meta b{ color:var(--ink-dim); font-weight:500; }

.grid-2{ display:grid; grid-template-columns:1fr 1fr; gap:32px; }
@media (max-width:640px){ .grid-2{ grid-template-columns:1fr; } .hero h1{ font-size:2rem; } }

.callout{
  background:var(--surface); border:1px solid var(--hair); padding:22px 24px; font-size:0.98rem;
}
.callout .eyebrow{ margin-bottom:8px; }

footer{
  border-top:1px solid var(--hair); padding:30px 0 50px;
  font-family:var(--mono); font-size:0.72rem; color:var(--ink-faint); letter-spacing:0.03em;
}
footer a{ color:var(--ink-dim); }
footer .foot-row{ display:flex; justify-content:space-between; gap:16px; flex-wrap:wrap; }

.card-links{ display:grid; grid-template-columns:1fr 1fr; gap:16px; margin-top:20px; }
@media (max-width:640px){ .card-links{ grid-template-columns:1fr; } }
.card-links a{ border:1px solid var(--hair); border-bottom:1px solid var(--hair); padding:18px 20px; display:block; color:var(--ink); }
.card-links a:hover{ border-color:var(--brass); background:var(--surface); }
.card-links .eyebrow{ margin-bottom:6px; }
.card-links h3{ margin:0 0 4px; }
.card-links p{ margin:0; font-size:0.95rem; color:var(--ink-dim); }