/* bornchart — Computational Almanac design system (shared).
   Light default + [data-theme="dark"]. Pair with the no-FOUC inline theme script. */
*,*::before,*::after{ box-sizing:border-box; margin:0; padding:0; }
:root{
  --paper:#F6F0E1; --surface:#FBF7EC; --sunk:#F3ECDA; --tint:#F7ECDF;
  --ink:#211C14; --body:#46412F; --muted:#6E6453;
  --line:#DED2BB; --line2:#EADFC9;
  --seal:#9E2F26; --seal-fg:#F6F0E1;
  --wood:#4C6747; --fire:#9C4A30; --earth:#74602F; --metal:#5E5D4F; --water:#43596A;
}
[data-theme="dark"]{
  --paper:#17130D; --surface:#201A12; --sunk:#1C1710; --tint:#2C2113;
  --ink:#EFE7D5; --body:#C7BDA6; --muted:#938A72;
  --line:#3A3327; --line2:#2C271E;
  --seal:#C45B4B; --seal-fg:#17130D;
  --wood:#8AA382; --fire:#CF8568; --earth:#BCA06C; --metal:#A7A597; --water:#7E9AAD;
}
html{ -webkit-text-size-adjust:100%; }
body{ background:var(--paper); color:var(--ink); font-family:'General Sans','Noto Serif SC',-apple-system,system-ui,sans-serif; line-height:1.6; -webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale; }
a{ color:inherit; text-decoration:none; }
button{ font-family:inherit; cursor:pointer; background:none; border:none; color:inherit; }
.mono{ font-family:'IBM Plex Mono','Noto Serif SC',monospace; font-variant-numeric:tabular-nums; }
.cjk{ font-family:'Noto Serif SC',serif; }
.serif{ font-family:'Fraunces','Noto Serif SC',serif; font-optical-sizing:auto; }

.site{ max-width:1280px; margin:0 auto; }
.eyebrow{ font-family:'IBM Plex Mono','Noto Serif SC',monospace; font-size:12px; letter-spacing:0.2em; text-transform:uppercase; color:var(--muted); }

/* nav */
.nav{ display:flex; align-items:center; justify-content:space-between; padding:20px 48px; border-bottom:1px solid var(--line); background:var(--surface); }
.brand{ display:flex; align-items:center; gap:12px; }
.wordmark{ font-family:'Fraunces','Noto Serif SC',serif; font-weight:500; font-size:21px; letter-spacing:-0.01em; }
.navlinks{ display:flex; align-items:center; gap:26px; font-size:15px; font-weight:500; color:var(--body); }
.navlinks a:hover{ color:var(--ink); }
.navlinks a.cur{ color:var(--ink); border-bottom:2px solid var(--seal); padding-bottom:2px; }
.cta{ background:var(--seal); color:var(--seal-fg); font-family:'IBM Plex Mono',monospace; font-size:12px; letter-spacing:0.14em; text-transform:uppercase; padding:9px 16px; border-radius:4px; display:inline-block; }
.cta:hover{ filter:brightness(0.93); }
.btn-out{ border:1px solid var(--ink); color:var(--ink); font-size:15px; font-weight:500; padding:13px 20px; border-radius:4px; display:inline-block; }
.btn-out:hover{ background:var(--surface); }
.toggle{ display:flex; align-items:center; gap:7px; cursor:pointer; }
.toggle .gl{ font-family:'IBM Plex Mono',monospace; font-size:12px; color:var(--muted); }
.toggle-track{ position:relative; width:42px; height:22px; border-radius:11px; background:var(--line); flex-shrink:0; display:inline-block; }
.toggle-knob{ position:absolute; top:2px; left:2px; width:16px; height:16px; border-radius:50%; background:var(--seal); transition:transform .22s ease; }
[data-theme="dark"] .toggle-knob{ transform:translateX(20px); }

/* article / prose */
.wrap{ max-width:760px; margin:0 auto; padding:56px 48px 72px; }
.wrap.wide{ max-width:1040px; }
.prose-eyebrow{ font-family:'IBM Plex Mono','Noto Serif SC',monospace; font-size:12px; letter-spacing:0.22em; text-transform:uppercase; color:var(--muted); margin-bottom:18px; }
.h1{ font-family:'Fraunces','Noto Serif SC',serif; font-weight:500; font-size:46px; line-height:1.06; letter-spacing:-0.015em; margin:0 0 22px; }
.h2{ font-family:'Fraunces','Noto Serif SC',serif; font-weight:500; font-size:30px; line-height:1.1; letter-spacing:-0.01em; margin:40px 0 14px; }
.h3{ font-family:'Fraunces','Noto Serif SC',serif; font-weight:500; font-size:22px; line-height:1.15; margin:28px 0 10px; }
.lead{ font-size:19px; line-height:1.55; color:var(--body); margin:0 0 22px; }
.prose p{ font-size:17px; line-height:1.7; color:var(--body); margin:0 0 18px; }
.prose ul,.prose ol{ margin:0 0 18px; padding-left:22px; color:var(--body); font-size:17px; line-height:1.7; }
.prose li{ margin:0 0 8px; }
.prose a{ color:var(--seal); border-bottom:1px solid var(--line); }
.prose a:hover{ border-color:var(--seal); }
/* buttons placed inside .prose must not inherit link styling (would hide their text) */
.prose a.cta, .prose a.cta-lg, .prose a.cta-form, .prose a.btn-primary, .prose a.btn-out{ border-bottom:none; }
.prose a.cta, .prose a.cta-lg, .prose a.cta-form, .prose a.btn-primary{ color:var(--seal-fg); }
.prose a.btn-out{ color:var(--ink); }
.prose strong{ color:var(--ink); font-weight:600; }
.prose code{ font-family:'IBM Plex Mono',monospace; font-size:0.9em; background:var(--sunk); padding:1px 5px; border-radius:3px; }
.prose hr{ border:none; border-top:1px solid var(--line); margin:34px 0; }
.divider-eyebrow{ border-top:1px solid var(--line); padding-top:18px; margin:0 0 24px; }

/* cards / panels */
.card{ border:1px solid var(--line); border-radius:6px; background:var(--surface); padding:24px 26px; }
.sunk-panel{ border:1px solid var(--line); border-radius:6px; background:var(--sunk); padding:20px 24px; }
.note{ font-family:'IBM Plex Mono',monospace; font-size:12px; color:var(--muted); line-height:1.7; }

/* forms */
.field-label{ display:block; font-size:14px; font-weight:500; color:var(--ink); margin-bottom:7px; }
.input, input[type=text].input, input[type=email].input, input[type=number].input, select.input{
  width:100%; padding:12px 14px; background:var(--surface); color:var(--ink);
  border:1px solid var(--line); border-radius:5px; font-family:inherit; font-size:16px; outline:none; }
.input:focus{ border-color:var(--seal); box-shadow:0 0 0 3px var(--tint); }
.input.mono{ font-family:'IBM Plex Mono',monospace; }
.btn-primary{ display:inline-block; width:100%; text-align:center; background:var(--seal); color:var(--seal-fg);
  font-family:'IBM Plex Mono',monospace; font-size:14px; letter-spacing:0.1em; text-transform:uppercase;
  padding:14px; border-radius:5px; border:none; cursor:pointer; }
.btn-primary:hover{ filter:brightness(0.93); }
.btn-primary:disabled{ opacity:0.6; cursor:wait; }
.hint{ font-family:'IBM Plex Mono',monospace; font-size:12px; color:var(--muted); line-height:1.6; }

/* day-master / celebrity portrait pages (set --el on <body> for element accent) */
.dm-hero{ text-align:center; padding-top:8px; }
.dm-glyph{ font-family:'Noto Serif SC',serif; font-weight:600; font-size:clamp(120px,24vw,180px); line-height:1; color:var(--el,var(--seal)); }
.dm-name{ font-family:'Fraunces','Noto Serif SC',serif; font-weight:500; font-size:clamp(36px,8vw,56px); line-height:1.05; letter-spacing:-0.015em; margin:8px 0 6px; }
.dm-who{ font-family:'IBM Plex Mono',monospace; font-size:13px; letter-spacing:0.04em; color:var(--muted); margin-bottom:8px; }
.dm-poetic{ font-family:'Fraunces','Noto Serif SC',serif; font-style:italic; font-size:clamp(19px,4vw,24px); color:var(--muted); margin-bottom:44px; }
.dm-identity{ font-family:'Fraunces','Noto Serif SC',serif; font-size:clamp(19px,4vw,24px); line-height:1.5; color:var(--ink); margin:0 auto 44px; padding-left:18px; border-left:2px solid var(--el,var(--seal)); text-align:left; max-width:600px; }
.dm-identity strong{ color:var(--ink); font-weight:600; }
.dm-sec{ margin-bottom:30px; }
.dm-sec .lbl{ font-family:'IBM Plex Mono',monospace; font-size:12px; letter-spacing:0.2em; text-transform:uppercase; color:var(--el,var(--seal)); margin-bottom:10px; }
.dm-sec p{ font-size:17px; line-height:1.7; color:var(--body); margin:0; }
.dm-cta{ border:1px solid var(--line); border-radius:6px; background:var(--surface); padding:30px 26px; margin:52px 0 44px; text-align:center; }
.dm-cta .t{ font-family:'Fraunces','Noto Serif SC',serif; font-size:clamp(24px,5vw,30px); font-weight:500; line-height:1.2; margin-bottom:10px; }
.dm-cta .t em{ color:var(--el,var(--seal)); font-style:italic; }
.nav-grid{ display:grid; grid-template-columns:repeat(2,1fr); gap:6px; margin-top:18px; }
@media(min-width:600px){ .nav-grid{ grid-template-columns:repeat(3,1fr); } }
.nav-cell{ padding:12px 10px; background:var(--surface); border:1px solid var(--line); border-radius:5px; text-align:center; font-family:'IBM Plex Mono',monospace; font-size:13px; color:var(--muted); }
.nav-cell .g{ font-family:'Noto Serif SC',serif; font-size:22px; color:var(--ink); line-height:1; display:block; margin-bottom:5px; }
.nav-cell:hover{ border-color:var(--seal); color:var(--ink); }
.nav-cell.current{ border-color:var(--seal); background:var(--tint); }
.nav-cell.current .g{ color:var(--seal); }

/* footer */
footer.foot{ border-top:1px solid var(--line); background:var(--surface); padding:30px 48px; display:flex; justify-content:space-between; align-items:center; }
.footlinks{ display:flex; flex-wrap:wrap; gap:12px 20px; font-family:'IBM Plex Mono',monospace; font-size:12px; color:var(--muted); letter-spacing:0.08em; }
.footlinks a{ white-space:nowrap; }
.footlinks a:hover{ color:var(--ink); }

/* mobile */
.nav-mobile{ display:none; }
@media(max-width:768px){
  .nav-desktop{ display:none; }
  .nav-mobile{ display:flex; align-items:center; justify-content:space-between; padding:14px 22px; border-bottom:1px solid var(--line); background:var(--surface); position:sticky; top:0; z-index:40; }
  .wrap{ padding:36px 22px 56px; }
  .h1{ font-size:34px; }
  .h2{ font-size:25px; }
  .nav{ padding:16px 22px; }
  footer.foot{ flex-direction:column; gap:14px; align-items:flex-start; padding:24px 22px; }
}
@media(prefers-reduced-motion:reduce){ *{ transition:none !important; animation:none !important; } }
.share{ display:flex; flex-wrap:wrap; align-items:center; gap:8px; margin:44px 0 6px; padding-top:22px; border-top:1px solid var(--line); }
.share-l{ font-family:'IBM Plex Mono',monospace; font-size:11px; text-transform:uppercase; letter-spacing:.1em; color:var(--muted); margin-right:4px; }
.share-b{ font-family:inherit; font-size:13px; color:var(--body); background:var(--surface); border:1px solid var(--line); border-radius:5px; padding:6px 12px; cursor:pointer; transition:border-color .15s, color .15s; text-decoration:none; line-height:1.2; }
.share-b:hover{ border-color:var(--seal); color:var(--ink); }
