/* Shared stylesheet for the Card Library pages. Same palette/fonts as
   the main app (index.html) but trimmed down to what a static content
   page needs — no interactive-component styles. */
:root{
  --bg-0:#120c24;
  --bg-1:#1c1440;
  --bg-2:#241a4f;
  --gold:#c6a15b;
  --gold-soft:#e3caa0;
  --ivory:#ede6d6;
  --ivory-dim:#b9b0c9;
  --plum:#7a4b6b;
  --line: rgba(198,161,91,0.35);
  --surf-35: rgba(18,12,36,0.35);
  --surf-50: rgba(18,12,36,0.5);
}
@media (prefers-color-scheme: light){
  :root{
    --bg-0:#f7f2e7;
    --bg-1:#ffffff;
    --bg-2:#fdfaf3;
    --gold:#9c7233;
    --gold-soft:#7a5820;
    --ivory:#2c2340;
    --ivory-dim:#6f6580;
    --plum:#8a4f74;
    --line: rgba(156,114,51,0.3);
    --surf-35: rgba(156,114,51,0.06);
    --surf-50: rgba(156,114,51,0.08);
  }
}
*{box-sizing:border-box;}
html,body{margin:0;padding:0;}
body{
  min-height:100vh;
  background:
    radial-gradient(ellipse 60% 40% at 20% -10%, rgba(122,75,107,0.35), transparent 60%),
    radial-gradient(ellipse 70% 50% at 100% 10%, rgba(198,161,91,0.12), transparent 60%),
    radial-gradient(ellipse 90% 70% at 50% 100%, rgba(36,26,79,0.9), transparent 70%),
    var(--bg-0);
  color:var(--ivory);
  font-family:'Inter',sans-serif;
  display:flex;
  justify-content:center;
  padding:40px 20px 70px;
}
@media (prefers-color-scheme: light){
  body{
    background:
      radial-gradient(ellipse 60% 40% at 20% -10%, rgba(138,79,116,0.10), transparent 60%),
      radial-gradient(ellipse 70% 50% at 100% 10%, rgba(156,114,51,0.10), transparent 60%),
      radial-gradient(ellipse 90% 70% at 50% 100%, rgba(255,255,255,0.9), transparent 70%),
      var(--bg-0);
  }
}
.wrap{ width:100%; max-width:760px; }

.crumbs{ font-size:12px; color:var(--ivory-dim); margin-bottom:22px; }
.crumbs a{ color:var(--gold-soft); text-decoration:none; }
.crumbs a:hover{ text-decoration:underline; }

.eyebrow{
  font-family:'Inter',sans-serif;
  letter-spacing:0.3em;
  text-transform:uppercase;
  font-size:11px;
  color:var(--gold-soft);
  opacity:0.8;
  margin-bottom:8px;
}
h1{
  font-family:'Cinzel',serif;
  font-weight:600;
  font-size:clamp(26px,5vw,36px);
  margin:0 0 6px;
  letter-spacing:0.02em;
  background:linear-gradient(180deg,var(--gold-soft),var(--gold));
  -webkit-background-clip:text; background-clip:text; color:transparent;
}
.subtitle{ font-family:'Cormorant Garamond',serif; font-size:19px; color:var(--ivory-dim); margin:0 0 26px; }

.card-hero{ display:flex; gap:22px; align-items:flex-start; flex-wrap:wrap; margin-bottom:28px; }
.card-hero img{
  width:150px; height:auto; border-radius:10px;
  border:1px solid var(--line);
  box-shadow:0 10px 30px rgba(0,0,0,0.35);
  flex:0 0 auto;
}
.kw-row{ display:flex; flex-wrap:wrap; gap:6px; margin:10px 0 4px; }
.kw{
  font-size:12px; padding:5px 11px; border-radius:20px;
  background:rgba(198,161,91,0.12); border:1px solid var(--line); color:var(--ivory-dim);
}

.meaning-block{
  margin-bottom:22px; padding:20px 22px;
  border:1px solid var(--line); border-left:3px solid var(--gold);
  border-radius:10px; background:rgba(36,26,79,0.4);
}
@media (prefers-color-scheme: light){ .meaning-block{ background:var(--surf-35); } }
.meaning-block h2{ font-family:'Cinzel',serif; font-size:15px; letter-spacing:0.06em; text-transform:uppercase; color:var(--gold-soft); margin:0 0 10px; }
.meaning-block.reversed h2{ color:var(--plum); }
.meaning-block p{ font-family:'Cormorant Garamond',serif; font-size:18px; line-height:1.65; margin:0; }

h2.section-heading{
  font-family:'Cinzel',serif; font-size:16px; letter-spacing:0.04em;
  color:var(--gold-soft); margin:34px 0 6px;
}
.section-sub{ font-size:13px; color:var(--ivory-dim); margin:0 0 14px; font-family:'Inter',sans-serif; }

.pos-table{ width:100%; border-collapse:collapse; margin-bottom:22px; font-size:14.5px; }
.pos-table caption{
  text-align:left; font-family:'Inter',sans-serif; font-size:12px; letter-spacing:0.05em;
  text-transform:uppercase; color:var(--gold-soft); opacity:0.85; padding-bottom:8px;
}
.pos-table th{ text-align:left; font-family:'Inter',sans-serif; font-size:11px; letter-spacing:0.05em; text-transform:uppercase; color:var(--ivory-dim); padding:6px 10px; border-bottom:1px solid var(--line); }
.pos-table td{ padding:10px 10px; border-bottom:1px solid var(--line); font-family:'Cormorant Garamond',serif; font-size:16.5px; line-height:1.45; vertical-align:top; }
.pos-table td.pos-name{ font-family:'Inter',sans-serif; font-size:13px; color:var(--ivory); white-space:nowrap; padding-top:12px; }
.pos-table .overflow-wrap{ overflow-x:auto; }

.cta-row{ margin:32px 0; text-align:center; }
.cta-btn{
  display:inline-block; padding:13px 26px; border-radius:10px;
  background:linear-gradient(135deg,var(--gold-soft),var(--gold));
  color:var(--bg-1); font-family:'Cinzel',serif; font-weight:600; font-size:14px;
  text-decoration:none; letter-spacing:0.02em;
}
.cta-sub{ font-size:12px; color:var(--ivory-dim); margin-top:8px; font-family:'Inter',sans-serif; }

.card-nav{ display:flex; justify-content:space-between; gap:14px; margin:30px 0; font-size:13px; }
.card-nav a{ color:var(--gold-soft); text-decoration:none; }
.card-nav a:hover{ text-decoration:underline; }
.card-nav .next{ text-align:right; margin-left:auto; }

footer{ text-align:center; margin-top:40px; font-size:12px; color:var(--ivory-dim); opacity:0.55; font-family:'Inter',sans-serif; }
footer a{ color:var(--gold-soft); }

/* ---- Hub / index page ---- */
.hub-intro{ font-family:'Cormorant Garamond',serif; font-size:18px; line-height:1.6; color:var(--ivory-dim); margin-bottom:30px; }
.hub-grid{ display:grid; grid-template-columns:repeat(auto-fill, minmax(130px, 1fr)); gap:14px; }
.hub-card{
  display:flex; flex-direction:column; align-items:center; gap:8px; text-align:center;
  padding:14px 10px; border:1px solid var(--line); border-radius:10px;
  background:var(--surf-35); text-decoration:none; color:var(--ivory);
  transition:border-color .15s, background .15s;
}
.hub-card:hover{ border-color:var(--gold); background:rgba(198,161,91,0.1); }
.hub-card img{ width:64px; height:auto; border-radius:6px; }
.hub-card span{ font-family:'Cinzel',serif; font-size:13px; letter-spacing:0.01em; }
.hub-note{ font-size:13px; color:var(--ivory-dim); margin-top:26px; font-family:'Inter',sans-serif; }