/* The Old Roads — natal + love pages. Night/gold + Cormorant identity; the chart palette (--nat-*) overrides it live. */
:root{
  --night:#0D0E13;--panel:#161820;--panel-2:#1B1E28;--moonlight:#F5F6FB;--dim:#BEC3D4;--faint:#8D93A6;
  --gold:#D8B45A;--sage:#93A98C;--silver:#AFBAD2;--nile:#3E7C8A;--rose:#C98A8A;--line:rgba(211,214,223,.16);--radius:14px;
  --nat-bg:var(--night);--nat-panel:var(--panel);--nat-ink:var(--moonlight);--nat-dim:var(--dim);
  --nat-primary:var(--gold);--nat-primary-soft:rgba(216,180,90,.2);--nat-primary-text:var(--gold);
  --nat-accent:var(--silver);--nat-accent-text:var(--silver);--nat-rel:var(--rose);--nat-rel-text:var(--rose);--nat-career:var(--nile);--nat-career-text:var(--nile);--nat-roots:var(--sage);--nat-roots-text:var(--sage);
  --disp:'Cormorant Garamond',Georgia,serif;--body:'Jost',system-ui,sans-serif;--mono:'IBM Plex Mono',ui-monospace,monospace;
}
:root[data-theme="light"]{
  --night:#F1E9D8;--panel:#FBF6EA;--panel-2:#EBE1CD;--moonlight:#2A2620;--dim:#6E6656;--faint:#8a806b;
  --gold:#A9781B;--sage:#5c7053;--silver:#7c5f86;--nile:#2f6b78;--rose:#b56b6b;--line:rgba(42,38,32,.18);
}
*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth;background:var(--nat-bg)}
body{background:var(--nat-bg);color:var(--nat-ink);font-family:var(--body);font-weight:300;line-height:1.7;font-size:17px;-webkit-font-smoothing:antialiased;overflow-x:hidden;transition:background-color 1.4s ease,color .6s ease;position:relative}
body::before{content:"";position:fixed;inset:0;pointer-events:none;z-index:0;background:radial-gradient(70% 55% at 88% -5%,color-mix(in oklab,var(--nat-primary) 22%,transparent),transparent 70%),radial-gradient(60% 50% at 0% 100%,color-mix(in oklab,var(--nat-accent) 12%,transparent),transparent 70%);transition:opacity 1.4s}
main,.top,footer{position:relative;z-index:1}
a{color:var(--nat-primary-text)}
.wrap{max-width:1120px;margin:0 auto;padding:0 20px}
.eyebrow{font-family:var(--mono);font-size:11px;letter-spacing:.22em;text-transform:uppercase;color:var(--nat-primary-text)}
h1,h2,h3,h4{font-family:var(--disp);font-weight:500;line-height:1.08}
h1{font-size:clamp(42px,9vw,92px);letter-spacing:-.015em;line-height:1.02}
h1 em{font-style:italic;color:var(--nat-primary-text);font-weight:400}
h2{font-size:clamp(30px,5.4vw,50px)}
h3{font-size:26px}
.lede{font-family:var(--disp);font-size:clamp(20px,3.4vw,27px);line-height:1.4;color:var(--nat-dim);max-width:34ch}
.small{font-size:14px}.muted{color:var(--nat-dim)}
.mono{font-family:var(--mono)}
/* top bar */
.top{display:flex;justify-content:space-between;align-items:center;padding:14px 0;gap:10px;flex-wrap:wrap}
.top nav{display:flex;gap:18px;flex-wrap:wrap}
.top a{font-family:var(--mono);font-size:11px;letter-spacing:.16em;text-transform:uppercase;text-decoration:none;color:var(--nat-dim);padding:10px 0;display:inline-block}
.top a:hover,.top a[aria-current]{color:var(--nat-primary-text)}
.tbtn{width:44px;height:44px;border-radius:50%;border:1px solid var(--line);background:transparent;color:var(--nat-primary-text);font-size:18px;cursor:pointer}
/* hero: the wheel bleeds */
.hero{position:relative;padding:clamp(34px,8vw,90px) 0 clamp(40px,8vw,90px);overflow-x:clip;overflow-y:visible}
.hero .copy{position:relative;z-index:2;max-width:640px}
.hero .heroWheel{position:absolute;z-index:1;right:max(-22vw,-300px);top:-4vw;width:min(96vw,900px);aspect-ratio:1;color:var(--nat-primary-text);opacity:.8;pointer-events:none;animation:slowturn 240s linear infinite;transform-origin:50% 50%;-webkit-mask-image:radial-gradient(closest-side,#000 70%,transparent 100%);mask-image:radial-gradient(closest-side,#000 72%,transparent 100%)}
@keyframes slowturn{to{transform:rotate(360deg)}}
@media(prefers-reduced-motion:reduce){.hero .heroWheel{animation:none}}
.hero .heroWheel.ghost{opacity:.62}
@media(max-width:700px){.hero .heroWheel{width:150vw;right:-62vw;top:60px}}
.top nav{flex:1 1 auto}
@media(max-width:560px){.top nav .lbl{display:none}.top nav a:last-child{display:none}.top{flex-wrap:nowrap}.top nav{gap:12px;flex-wrap:wrap}.top a{font-size:10px;letter-spacing:.1em}}
.hero .copy p+p{margin-top:14px}
.hero .cta{display:flex;gap:12px;flex-wrap:wrap;margin-top:26px;align-items:center}
.btn{background:var(--nat-primary);color:#101010;border:none;border-radius:999px;padding:14px 26px;min-height:48px;font-family:var(--body);font-weight:500;font-size:16px;cursor:pointer;text-decoration:none;display:inline-block}
.btn:hover{filter:brightness(1.07)}
.btn.line{background:transparent;border:1px solid var(--nat-primary);color:var(--nat-primary-text)}
.ghostbtn{background:transparent;border:1px solid var(--line);color:var(--nat-dim);border-radius:999px;padding:10px 16px;min-height:44px;cursor:pointer;font-family:var(--mono);font-size:11px;letter-spacing:.1em;text-transform:uppercase;margin-top:10px}
/* arc dividers */
.arcdiv{display:block;margin:0 auto;width:min(360px,70%);color:var(--nat-primary-text);opacity:.8}
.arcdiv.flip{transform:scaleY(-1)}
.divwrap{padding:12px 0}
/* form */
.formband{padding:36px 0 56px;display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:clamp(24px,5vw,72px);align-items:start}
@media(max-width:860px){.formband{grid-template-columns:1fr}}
.formband .why p{color:var(--nat-dim)}
.formband .why p+p{margin-top:12px}
.bf label,.fl{display:block;font-family:var(--mono);font-size:10.5px;letter-spacing:.16em;text-transform:uppercase;color:var(--nat-roots-text);margin:16px 0 6px}
.bf label i{opacity:.65;text-transform:none;letter-spacing:.04em;font-style:normal}
.bf input,select{width:100%;background:transparent;border:0;border-bottom:1px solid var(--line);border-radius:0;color:var(--nat-ink);font-family:var(--body);font-size:18px;padding:10px 2px;min-height:46px;color-scheme:dark light}
:root[data-theme="light"] .bf input{color-scheme:light}
.bf input:focus{outline:none;border-bottom-color:var(--nat-primary);box-shadow:0 1px 0 var(--nat-primary)}
.bf .g2{display:grid;grid-template-columns:1fr 1fr;gap:18px}
@media(max-width:420px){.bf .g2{grid-template-columns:1fr}}
.bf .chk{display:flex;gap:10px;align-items:flex-start;text-transform:none;letter-spacing:0;font-family:var(--body);font-size:14.5px;color:var(--nat-dim);margin-top:12px;min-height:44px}
.bf .chk input{width:22px;height:22px;min-height:0;flex:0 0 auto;margin-top:3px;accent-color:var(--nat-primary)}
.bf .chk em{opacity:.8}
.citybox{position:relative}
.citylist{list-style:none;position:absolute;left:0;right:0;top:100%;z-index:20;background:var(--nat-panel);border:1px solid var(--line);border-radius:12px;box-shadow:0 18px 40px rgba(0,0,0,.35);overflow:hidden}
.citylist li{display:flex;justify-content:space-between;gap:10px;padding:12px 14px;cursor:pointer;min-height:44px;align-items:center}
.citylist li:hover,.citylist li:focus{background:var(--nat-primary-soft)}
.citylist li span{font-family:var(--mono);font-size:11px;color:var(--faint)}
.cityinfo{font-family:var(--mono);font-size:11.5px;color:var(--nat-roots-text);min-height:20px;margin-top:6px}
.adv{margin-top:12px}.adv summary{font-size:14px;color:var(--nat-dim);cursor:pointer;min-height:44px;display:flex;align-items:center}
.err{color:#e08a7a;font-size:14.5px;min-height:22px;margin-top:10px}
:root[data-theme="light"] .err{color:#a8402e}
.fine{font-size:13px;color:var(--faint);margin-top:14px}
.sample{font-family:var(--mono);font-size:11px;letter-spacing:.1em;text-transform:uppercase;margin-left:6px}
/* stage */
#results{display:none}
body.charted #results{display:block}
.sumline{display:flex;flex-wrap:wrap;gap:6px 30px;align-items:baseline;border-top:1px solid var(--line);border-bottom:1px solid var(--line);padding:18px 0;margin:6px 0 0}
.sumline div{display:flex;flex-direction:column;gap:2px}
.sumline small{font-family:var(--mono);font-size:10px;letter-spacing:.16em;text-transform:uppercase;color:var(--faint)}
.sumline b{font-family:var(--disp);font-weight:500;font-size:clamp(24px,5vw,34px);line-height:1.1}
.sumline .rx{color:var(--nat-dim);font-size:.7em}
.stage{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);gap:clamp(20px,4vw,60px);padding:36px 0;align-items:start}
@media(max-width:900px){.stage{grid-template-columns:1fr}}
.wheelbox{position:relative}
.wheel{width:100%;height:auto;display:block;aspect-ratio:1}
.wheel .wsg{font-family:'Segoe UI Symbol','Apple Symbols','Noto Sans Symbols',serif;font-size:21px}
.wheel .wpg{font-family:'Segoe UI Symbol','Apple Symbols','Noto Sans Symbols',serif;font-size:17px}
.wheel .whn{font-family:var(--mono);font-size:9.5px}.wheel .wdg{font-family:var(--mono);font-size:8px}
.wheel .wax{font-family:var(--mono);font-size:10px;letter-spacing:.06em}.wheel .wrx{font-family:var(--disp);font-size:11px;font-weight:600}
.wheel .wpl{cursor:pointer;outline:none}.wheel .wpl:focus circle,.wheel .wpl:hover circle{stroke-width:2}
.wheelbar{display:flex;gap:8px;flex-wrap:wrap;margin-top:12px;align-items:center}
.seg{display:inline-flex;border:1px solid var(--line);border-radius:999px;padding:3px}
.seg button{border:0;background:none;color:var(--nat-dim);font-family:var(--mono);font-size:10.5px;letter-spacing:.12em;text-transform:uppercase;padding:0 14px;min-height:40px;border-radius:999px;cursor:pointer}
.seg button.on{background:var(--nat-primary);color:#101010}
.probe{border-left:2px solid var(--nat-primary);padding:4px 0 4px 16px;min-height:84px}
.probe h3{margin-bottom:6px}
/* ledger (why this colour) */
.ledger{list-style:none;display:grid;gap:0}
.ledger li{display:grid;grid-template-columns:54px 1fr;gap:16px;padding:16px 0;border-top:1px solid var(--line)}
.ledger .sw{width:54px;height:54px;border-radius:50% 50% 50% 8px;border:1px solid var(--line)}
.ledger b{font-family:var(--disp);font-size:21px;font-weight:500;display:block;line-height:1.2}
.ledger em{font-style:normal;color:var(--nat-dim);font-size:14.5px;display:block}
.ledger code{display:block;font-family:var(--mono);font-size:11.5px;color:var(--nat-dim);margin-top:6px;word-break:break-word;line-height:1.5}
.ledger small{font-family:var(--mono);font-size:11px;color:var(--faint);display:block;margin-top:4px}
.ledgerhead{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:clamp(20px,5vw,70px)}
@media(max-width:860px){.ledgerhead{grid-template-columns:1fr}}
.ribbon{display:flex;height:34px;border-radius:999px;overflow:hidden;margin:18px 0;border:1px solid var(--line)}
.ribbon span{flex:1}
/* editorial reading */
.ed{display:grid;grid-template-columns:minmax(0,3fr) minmax(0,8fr);gap:clamp(16px,4vw,56px);padding:34px 0;border-top:1px solid var(--line)}
@media(max-width:760px){.ed{grid-template-columns:1fr;gap:10px}}
.ed .k{position:sticky;top:12px;align-self:start}
@media(max-width:760px){.ed .k{position:static}}
.ed .k h2{font-size:clamp(28px,4vw,38px)}
.ed .k .num{font-family:var(--mono);font-size:11px;letter-spacing:.2em;color:var(--nat-primary-text);display:block;margin-bottom:8px}
.ed .b p{font-size:clamp(17px,2.1vw,19px);max-width:62ch}
.ed .b p+p{margin-top:14px}
.ed .b .pull{font-family:var(--disp);font-style:italic;font-size:clamp(22px,2.8vw,30px);line-height:1.3;color:var(--nat-ink);max-width:34ch;border-left:2px solid var(--nat-primary);padding-left:18px;margin:0 0 18px}
.entry{display:grid;grid-template-columns:62px 1fr;gap:16px;padding:20px 0;border-top:1px dashed var(--line)}
.entry:first-child{border-top:0;padding-top:0}
.entry .gl{font-family:'Segoe UI Symbol','Apple Symbols',serif;font-size:44px;line-height:1;text-align:center}
.entry p{font-size:17px}
.deepen{margin-top:20px;display:flex;gap:12px;flex-wrap:wrap;align-items:center}
.deeptext{margin-top:16px;border-left:2px solid var(--nat-accent);padding-left:16px;color:var(--nat-ink);white-space:pre-line}
/* tables as ruled ledgers */
.tw{overflow-x:auto;-webkit-overflow-scrolling:touch}
table{border-collapse:collapse;width:100%;min-width:520px;font-size:15px}
th{font-family:var(--mono);font-size:10px;letter-spacing:.14em;text-transform:uppercase;color:var(--faint);text-align:left;font-weight:400;padding:8px 10px;border-bottom:1px solid var(--line)}
td{padding:11px 10px;border-bottom:1px solid var(--line);vertical-align:middle}
td .dot{display:inline-block;width:11px;height:11px;border-radius:50%;margin-right:8px;vertical-align:-1px}
td .g{font-family:'Segoe UI Symbol','Apple Symbols',serif;font-size:18px;margin-right:6px}
td .rxm{font-family:var(--disp);font-weight:600;margin-left:4px}
td.n{font-family:var(--mono);font-size:13px;white-space:nowrap}
.bars{display:grid;gap:12px}
.bar{display:grid;grid-template-columns:76px 1fr 34px;gap:12px;align-items:center;font-family:var(--mono);font-size:12px}
.bar i{display:block;height:10px;border-radius:999px;background:var(--bc);width:calc(var(--w)*1%);min-width:3px;transition:width 1s cubic-bezier(.2,.8,.2,1)}
.bar .tr{background:color-mix(in oklab,var(--nat-ink) 8%,transparent);border-radius:999px}
.moonrow{display:flex;gap:18px;align-items:center;color:var(--nat-primary-text)}
.moonrow .moonlabel{color:var(--nat-ink)}
/* watermark on new elements */
.wm{position:relative}
.wm::after{content:"𓂀 The Old Roads";position:absolute;right:8px;bottom:6px;font-family:var(--mono);font-size:9px;letter-spacing:.2em;text-transform:uppercase;color:var(--nat-dim);opacity:.4;pointer-events:none}
/* dawn wash when the palette changes */
#dawn{position:fixed;inset:0;z-index:0;pointer-events:none;opacity:0;background:radial-gradient(circle at 50% 38%,var(--dawn,#D8B45A) 0%,transparent 62%);mix-blend-mode:screen}
:root[data-theme="light"] #dawn{mix-blend-mode:multiply}
#dawn.go{animation:dawn 2.4s ease-out}
@keyframes dawn{0%{opacity:0;transform:scale(.4)}35%{opacity:.5}100%{opacity:0;transform:scale(1.6)}}
footer{padding:50px 0 80px;text-align:center;color:var(--nat-dim);font-size:14px;border-top:1px solid var(--line);margin-top:40px}
footer .sig{font-family:var(--disp);font-style:italic;font-size:19px;color:var(--nat-ink);margin-bottom:10px}
#toast{position:fixed;left:50%;bottom:22px;transform:translateX(-50%);background:var(--nat-primary);color:#101010;padding:10px 18px;border-radius:999px;font-weight:500;opacity:0;transition:.25s;pointer-events:none;z-index:99}
#toast.on{opacity:1}
.empty{display:grid;place-items:center;text-align:center;padding:30px 10px;color:var(--faint)}
.empty svg{width:min(220px,60%);color:var(--nat-primary-text);opacity:.6;margin-bottom:12px}
.loading{font-family:var(--mono);font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:var(--nat-dim)}
:focus-visible{outline:2px solid var(--nat-primary);outline-offset:2px}