/* Styles for the static card pages (cards/). Colours match index.html. */
:root{
  --bg:#F3F5F1; --surface:#FFFFFF; --ink:#1E2A26; --muted:#55625C; --line:#D5DCD6;
  --felt:#1E5A43; --felt-ink:#EEF5F0; --felt-muted:#B9D3C5; --red:#B8322A;
  --focus:#E0A100;
  --serif:"Lora", Georgia, "Times New Roman", serif;
  --sans:"Figtree", system-ui, -apple-system, "Segoe UI", sans-serif;
  color-scheme:light;
}
@media (prefers-color-scheme:dark){
  :root{--bg:#16231F; --surface:#1F302B; --ink:#E7EEE9; --muted:#A5B3AC; --line:#34473F;
    --felt:#143B2E; --felt-muted:#9EBFAE; --red:#E2675C; color-scheme:dark}
}
*,*::before,*::after{box-sizing:border-box}
body{margin:0;background:var(--bg);color:var(--ink);font:400 1rem/1.6 var(--sans);-webkit-font-smoothing:antialiased}
h1,h2,h3{font-family:var(--serif);font-weight:500;line-height:1.15;margin:0}
p{margin:0}
a{color:inherit;text-underline-offset:.15em}
:focus-visible{outline:3px solid var(--focus);outline-offset:2px;border-radius:4px}
.wrap{max-width:46rem;margin:0 auto;padding:0 1.25rem}

.hero{background:var(--felt);color:var(--felt-ink);padding:1.25rem 0 3rem;
  background-image:radial-gradient(ellipse at 50% 0%, rgba(255,255,255,.08), transparent 60%)}
.crumbs{font-size:.92rem;color:var(--felt-muted);margin-bottom:2rem}
.crumbs a{color:var(--felt-ink)}
.hero .grid{display:grid;gap:2rem;align-items:center}
@media (min-width:44rem){.hero .grid{grid-template-columns:1fr 9.5rem}}
.hero h1{font-size:clamp(2.1rem,6.5vw,3rem);letter-spacing:-.01em}
.hero .lede{margin-top:.75rem;color:var(--felt-muted);max-width:30rem;font-size:1.05rem}

.card{justify-self:start;width:7.5rem;aspect-ratio:5/7;border-radius:.8rem;position:relative;background:#FFFDF8;color:#1E2A26;
  display:flex;align-items:center;justify-content:center;font-family:var(--serif);box-shadow:0 14px 30px rgba(0,0,0,.28)}
@media (min-width:44rem){.card{justify-self:center;width:9.5rem}}
.card.red{color:#B8322A}
.card .corner{position:absolute;font-size:1.2rem;line-height:1;text-align:center}
.card .tl{top:.55rem;left:.6rem} .card .br{bottom:.55rem;right:.6rem;transform:rotate(180deg)}
.card .big{font-size:3.6rem;line-height:1}
.card .joker{font-size:1.4rem;text-align:center;line-height:1.2}

main{padding:2.5rem 0 3rem}
section{margin-bottom:2.5rem}
section > h2{font-size:1.65rem;margin-bottom:.6rem}
section > p{max-width:38rem}
section > p + p{margin-top:.6rem}
.pair{display:grid;gap:.9rem;margin-top:1rem}
@media (min-width:36rem){.pair{grid-template-columns:1fr 1fr}}
.pair > div{background:var(--surface);border:1px solid var(--line);border-radius:.8rem;padding:1rem 1.1rem}
.pair h3{font-family:var(--sans);font-weight:700;font-size:1rem;margin-bottom:.35rem}
.pair ul{margin:0;padding-left:1.1rem} .pair li{margin-bottom:.2rem}
.small{font-size:.9rem;color:var(--muted);margin-top:.8rem}
.dates{list-style:none;margin:.6rem 0 0;padding:0;display:flex;flex-wrap:wrap;gap:.5rem}
.dates li{background:var(--surface);border:1px solid var(--line);border-radius:2rem;padding:.25rem .8rem;font-weight:600;font-size:.95rem}

.cta{background:var(--felt);color:var(--felt-ink);border-radius:.9rem;padding:1.3rem;display:flex;flex-wrap:wrap;gap:1rem;align-items:center;justify-content:space-between}
.cta p{max-width:26rem;color:var(--felt-muted)} .cta p b{color:var(--felt-ink)}
.btn{display:inline-block;font-weight:700;text-decoration:none;border-radius:.6rem;padding:.8rem 1.3rem;background:#F6F1E3;color:#163E2F}
.btn:hover{background:#fff}

.links{list-style:none;margin:.6rem 0 0;padding:0;display:grid;gap:.4rem;grid-template-columns:repeat(auto-fill,minmax(11rem,1fr))}
.links .sym{display:inline-block;width:1.2em;text-align:center}
.links .red .sym{color:var(--red)}
.suit{margin-bottom:2rem}
.suit h2{font-size:1.45rem;margin-bottom:.2rem}
.suit > p{color:var(--muted)}
.all{list-style:none;margin:.8rem 0 0;padding:0;display:grid;gap:.5rem}
.all li{background:var(--surface);border:1px solid var(--line);border-radius:.6rem;padding:.6rem .9rem}
.all a{font-weight:700}
.all span{display:block;font-size:.9rem;color:var(--muted)}

footer{border-top:1px solid var(--line);padding:1.5rem 0 2.5rem;color:var(--muted);font-size:.9rem}

/* Long-form card page sections */
.hero .nick{margin-top:.5rem;font-family:var(--serif);font-style:italic;font-size:1.3rem;color:var(--felt-ink)}
.hero .born{margin-top:.9rem;font-size:.95rem;color:var(--felt-muted)}
.toc{background:var(--surface);border:1px solid var(--line);border-radius:.8rem;padding:1rem 1.1rem;margin-bottom:2.5rem}
.toc p{font-weight:700;margin-bottom:.4rem}
.toc ul{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:.35rem .9rem;font-size:.95rem}
section{scroll-margin-top:1rem}
.ls{display:grid;gap:.9rem;margin-top:1rem}
@media (min-width:36rem){.ls{grid-template-columns:1fr 1fr}}
.ls > div{border-radius:.8rem;padding:1rem 1.1rem;border:1px solid var(--line)}
.ls h3{font-family:var(--sans);font-weight:700;font-size:1rem;margin-bottom:.35rem}
.ls p + p{margin-top:.4rem}
.ls .lite{background:color-mix(in srgb,#E0A100 12%,var(--surface))}
.ls .dark{background:color-mix(in srgb,var(--ink) 7%,var(--surface))}
.facets,.assoc{margin:1rem 0 0;display:grid;gap:.7rem}
@media (min-width:36rem){.facets{grid-template-columns:1fr 1fr}}
.facets > div,.assoc > div{background:var(--surface);border:1px solid var(--line);border-radius:.8rem;padding:.85rem 1.05rem}
.facets dt,.assoc dt{font-weight:700;margin-bottom:.15rem}
.facets dd,.assoc dd{margin:0}
@media (min-width:36rem){.assoc{grid-template-columns:1fr 1fr}}
.plain ul,.prompts ul{margin:.6rem 0 0;padding-left:1.2rem;max-width:38rem}
.plain li,.prompts li{margin-bottom:.4rem}
.prompts li{font-family:var(--serif);font-size:1.08rem}
.more{font-size:1.25rem;margin:1.6rem 0 .5rem}
#assoc > p{max-width:38rem}

/* Site footer nav */
.foot-nav{display:flex;flex-wrap:wrap;gap:.4rem 1.2rem;margin-bottom:.6rem;font-weight:600}
/* Period tables */
.tablewrap{overflow-x:auto;margin-top:.8rem}
.ptable{width:100%;border-collapse:collapse;font-size:.95rem}
.ptable th,.ptable td{text-align:left;padding:.55rem .6rem;border-bottom:1px solid var(--line);vertical-align:top}
.ptable th{font-weight:700;font-size:.9rem;color:var(--muted)}
.ptable .nowrap{white-space:nowrap}
.pdot{display:inline-block;width:.7rem;height:.7rem;border-radius:50%;margin-right:.45rem;vertical-align:.02em}
.more-link{font-weight:600}
.pager{display:flex;justify-content:space-between;gap:1rem;margin:1rem 0 2rem;font-weight:600}
/* Birthday index */
.mgrid{display:grid;gap:1.6rem;margin:2.2rem 0 2.5rem}
@media (min-width:40rem){.mgrid{grid-template-columns:1fr 1fr}}
.month-block h2{font-size:1.35rem;margin-bottom:.5rem}
.daylist{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:.3rem}
.daylist a{display:block;text-align:center;padding:.4rem 0;border:1px solid var(--line);border-radius:.45rem;background:var(--surface);text-decoration:none;font-weight:600}
.daylist a:hover{border-color:var(--ink)}
/* Guides */
.guide .plainlist{padding-left:1.2rem;max-width:40rem}
.guide .plainlist li{margin-bottom:.35rem}
.guide .formula{font-family:var(--serif);font-size:1.25rem;margin:.6rem 0}
.guide-links{padding-left:1.2rem}
.guide-cards{list-style:none;margin:2.2rem 0 2rem;padding:0;display:grid;gap:.8rem}
.guide-cards a{display:block;background:var(--surface);border:1px solid var(--line);border-radius:.8rem;padding:1rem 1.15rem;text-decoration:none;color:var(--ink)}
.guide-cards b{display:block;font-family:var(--serif);font-weight:500;font-size:1.25rem}
.guide-cards span{color:var(--muted)}
.guide-cards a:hover{border-color:var(--ink)}
.ptable .pth{display:block;color:var(--muted);font-size:.9rem;margin-top:.15rem}