:root{
  /* Bold Modern Astro palette: cosmic teal + coral on midnight */
  --ink:#0a1620;
  --midnight:#071019;
  --panel:#0f2230;
  --panel-2:#143040;
  --teal:#19e3c2;
  --teal-deep:#0bb39a;
  --coral:#ff6b5e;
  --coral-deep:#ff4d6d;
  --amber:#ffcf5c;
  --plum:#7b4bff;
  --cream:#f4fbf9;
  --muted:#9fc0c4;
  --line:rgba(255,255,255,.10);
  --line-strong:rgba(255,255,255,.18);
  --radius:22px;
  --shadow-lg:0 30px 70px -20px rgba(0,0,0,.65);
  --shadow-glow:0 0 0 1px rgba(25,227,194,.25), 0 22px 50px -18px rgba(25,227,194,.35);
  --grad-hero:linear-gradient(135deg,#19e3c2 0%,#0bb39a 35%,#7b4bff 100%);
  --grad-coral:linear-gradient(135deg,#ff6b5e 0%,#ff4d6d 100%);
  --grad-warm:linear-gradient(135deg,#ffcf5c 0%,#ff6b5e 100%);
  --display:'Fraunces',Georgia,serif;
  --body:'Sora',-apple-system,sans-serif;
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{
  font-family:var(--body);
  background:
    radial-gradient(1200px 600px at 80% -10%, rgba(123,75,255,.28), transparent 60%),
    radial-gradient(900px 500px at -10% 10%, rgba(25,227,194,.22), transparent 55%),
    radial-gradient(700px 700px at 50% 120%, rgba(255,107,94,.18), transparent 60%),
    var(--midnight);
  color:var(--cream);
  line-height:1.6;
  overflow-x:hidden;
  -webkit-font-smoothing:antialiased;
  /* mobile tab-bar clearance is owned by the footer (Joe's rule), not body */
}
a{color:inherit;text-decoration:none}
img,svg{display:block}
.wrap{max-width:1240px;margin:0 auto;padding:0 18px}

/* ---------- Stars background ---------- */
.starfield{position:fixed;inset:0;z-index:0;pointer-events:none;opacity:.7}
.starfield i{position:absolute;width:2px;height:2px;background:#fff;border-radius:50%;opacity:.5;animation:tw 4s infinite ease-in-out}
@keyframes tw{0%,100%{opacity:.15;transform:scale(.7)}50%{opacity:.9;transform:scale(1.3)}}

/* ---------- Top bar ---------- */
.topbar{position:sticky;top:0;z-index:9000;
  background:rgba(7,16,25,.82);backdrop-filter:blur(14px);
  border-bottom:1px solid var(--line);}
.topbar-inner{display:flex;align-items:center;gap:14px;height:66px}
.burger{display:inline-flex;flex-direction:column;gap:5px;background:none;border:0;cursor:pointer;padding:8px;margin-left:auto;order:9}
.burger span{width:26px;height:3px;background:var(--cream);border-radius:3px;transition:.25s}
.brand{display:flex;flex-direction:column;line-height:1}
.brand .word{font-family:var(--display);font-weight:700;font-size:1.5rem;letter-spacing:-.02em}
.brand .word b{color:var(--teal)}
.brand .tag{font-size:.62rem;color:var(--muted);letter-spacing:.04em;margin-top:3px;font-weight:400}
.nav-desktop{display:none;margin-left:auto;gap:4px;align-items:center}
.nav-desktop a{font-size:.84rem;font-weight:500;padding:9px 13px;border-radius:999px;color:var(--muted);transition:.2s}
.nav-desktop a:hover{color:var(--cream);background:rgba(25,227,194,.12)}
.topbar-cta{margin-left:auto;display:none;align-items:center;gap:10px} /* desktop only; mobile uses burger */
.btn-mini{background:var(--grad-coral);color:#fff;font-weight:600;font-size:.8rem;padding:9px 16px;border-radius:999px;border:0;cursor:pointer;box-shadow:0 8px 24px -8px var(--coral)}
/* Topbar "My Signs" star (favourites access, site-wide) */
.topbar-fav{order:8;position:relative;display:inline-flex;align-items:center;justify-content:center;width:40px;height:40px;border-radius:999px;color:var(--amber);border:1px solid var(--line-strong);background:rgba(255,255,255,.04);transition:.2s;margin-left:8px}
.topbar-fav:hover{border-color:var(--amber);background:rgba(255,207,92,.12)}
.topbar-fav svg{width:20px;height:20px}
.fav-count{position:absolute;top:-5px;right:-5px;min-width:18px;height:18px;padding:0 4px;border-radius:999px;background:var(--coral);color:#fff;font-size:.64rem;font-weight:700;line-height:1;display:flex;align-items:center;justify-content:center;font-family:var(--body)}
@media(max-width:1039px){.topbar-fav{margin-left:auto}.burger{margin-left:8px}}
/* Favorites mega-menu panel (opened by the topbar ★) */
.ds-fav-panel{z-index:10050;width:min(94vw,420px);max-height:72vh;overflow-y:auto;
  background:linear-gradient(180deg,var(--panel),var(--midnight));border:1px solid var(--line-strong);
  border-radius:16px;box-shadow:var(--shadow-lg);padding:14px;animation:fade .2s ease}
.ds-fav-h{font-family:var(--display);font-weight:600;font-size:1.1rem;color:var(--amber);margin-bottom:8px}
.ds-fav-empty{color:var(--muted);font-size:.9rem;line-height:1.5;padding:2px 2px 4px}
.ds-fav-sec{font-size:.68rem;font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:var(--teal);margin:14px 0 8px}
.ds-fav-favs{display:grid;gap:8px}
.ds-fav-row{display:flex;align-items:center;justify-content:space-between;gap:10px;background:rgba(255,207,92,.08);
  border:1px solid rgba(255,207,92,.25);border-radius:12px;padding:8px 12px}
.ds-fav-nm{font-family:var(--display);font-weight:600;color:var(--cream)}
.ds-fav-links a,.ds-fav-clinks a{color:var(--teal);font-size:.8rem;font-weight:600;margin-left:10px}
.ds-fav-links a:hover,.ds-fav-clinks a:hover{color:var(--cream)}
.ds-fav-grid{display:grid;gap:3px}
.ds-fav-cell{display:flex;align-items:center;gap:10px;padding:7px 8px;border-radius:10px;transition:background .15s}
.ds-fav-cell:hover{background:rgba(255,255,255,.04)}
.ds-fav-pin{flex:0 0 auto;width:28px;height:28px;border-radius:50%;border:1px solid var(--line-strong);
  background:rgba(255,255,255,.05);color:var(--muted);font-size:.95rem;line-height:1;cursor:pointer;transition:.2s}
.ds-fav-pin:hover{border-color:var(--amber);color:var(--amber)}
.ds-fav-pin.on{background:rgba(255,207,92,.18);border-color:var(--amber);color:var(--amber)}
.ds-fav-cnm{flex:1 1 auto;font-weight:500;color:var(--cream);font-size:.92rem}
.ds-fav-clinks{flex:0 0 auto;white-space:nowrap}
.ds-fav-foot{display:block;margin-top:12px;padding-top:10px;border-top:1px solid var(--line);color:var(--amber);font-weight:600;font-size:.85rem}

/* ---------- Off-canvas ---------- */
.scrim{position:fixed;inset:0;background:rgba(2,8,12,.6);backdrop-filter:blur(3px);z-index:10000;opacity:0;pointer-events:none;transition:.3s}
.scrim.open{opacity:1;pointer-events:auto}
.offcanvas{position:fixed;top:0;right:0;height:100%;width:min(86vw,340px);z-index:10001;
  background:linear-gradient(180deg,var(--panel),var(--midnight));
  border-left:1px solid var(--line-strong);
  transform:translateX(105%);transition:transform .32s cubic-bezier(.22,1,.36,1);
  padding:22px 20px;overflow-y:auto;box-shadow:var(--shadow-lg)}
.offcanvas.open{transform:translateX(0)}
.offcanvas .oc-head{display:flex;justify-content:space-between;align-items:center;margin-bottom:18px}
.offcanvas .close{background:none;border:0;color:var(--cream);font-size:1.6rem;cursor:pointer;line-height:1}
.offcanvas nav a{display:flex;align-items:center;gap:12px;padding:13px 12px;border-radius:14px;font-weight:500;font-size:1rem;color:var(--cream);border:1px solid transparent}
.offcanvas nav a:hover{background:rgba(25,227,194,.10);border-color:var(--line)}
.offcanvas nav a .dot{width:8px;height:8px;border-radius:50%;background:var(--teal)}
.oc-sub{margin-top:18px;padding-top:16px;border-top:1px solid var(--line);font-size:.78rem;color:var(--muted)}

/* ---------- Segmented control ---------- */
.seg-shell{position:sticky;top:66px;z-index:8000;background:rgba(7,16,25,.7);backdrop-filter:blur(10px);border-bottom:1px solid var(--line);padding:12px 0}
.seg{display:inline-flex;background:var(--panel);border:1px solid var(--line-strong);border-radius:999px;padding:5px;gap:4px;box-shadow:inset 0 1px 0 rgba(255,255,255,.05)}
.seg button{border:0;background:none;color:var(--muted);font-family:var(--body);font-weight:600;font-size:.9rem;padding:9px 22px;border-radius:999px;cursor:pointer;transition:.25s}
.seg button.active{color:var(--midnight);background:var(--grad-hero);box-shadow:0 8px 22px -8px var(--teal)}
.seg-shell .wrap{display:flex;justify-content:center}

/* ---------- Views ---------- */
.view{display:none;position:relative;z-index:1}
.view.active{display:block;animation:fade .5s ease}
@keyframes fade{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}

/* ---------- Ad slots (reserved min-heights = CLS-safe) ---------- */
.ad{margin:28px auto;display:block;position:relative;overflow:hidden;border-radius:14px}
.ad-leader{width:100%;max-width:728px;min-height:90px}
.ad-rect{width:100%;max-width:336px;min-height:280px}
.ad-sky{width:300px;min-height:600px}
@media(max-width:560px){.ad-leader{max-width:320px;min-height:100px}}
/* Google Auto Ads — give inline-injected ads top/bottom breathing room.
   Google sets margin:0 inline on the <ins>, so !important is required. Our MANUAL
   .ad slots carry their own vertical margin (above), so zero out the inner <ins>
   to avoid doubling the gap inside the slot box. */
.google-auto-placed{margin-top:1.5em;margin-bottom:1.5em}
ins.adsbygoogle{margin-top:1.5em!important;margin-bottom:1.5em!important;display:block}
.ad ins.adsbygoogle{margin:0!important}

/* ---------- Proxy: normalize the interactive engine's legacy 1990s HTML for the dark theme ----------
   The fetched birth-chart / compatibility / prevision fragments are raw <table>/<font>/bgcolor markup.
   Scope every override to .proxy-result so the rest of the site is untouched. */
.proxy-result [bgcolor]{background:transparent!important}                 /* kill #000080 / #E6E6E6 form chrome */
.proxy-result font{font-family:inherit!important;font-size:inherit!important;color:inherit!important}
.proxy-result img[src*="klee.gif"]{display:none}                          /* drop 12px decorative clover bullets */
.proxy-result img{max-width:100%;height:auto}                            /* chart graphics never overflow */
.proxy-result h1,.proxy-result h3{font-family:var(--display);color:var(--cream);font-weight:600;letter-spacing:-.01em}
.proxy-result h1{font-size:1.4rem;margin:24px 0 10px}
.proxy-result h3{font-size:1.25rem;margin:24px 0 8px}
/* tables: padded + readable, no colliding columns, horizontal scroll on phones */
.proxy-result table{border-collapse:collapse;max-width:100%;margin:12px 0;background:transparent!important}
.proxy-result th,.proxy-result td{padding:6px 20px 6px 0;text-align:left;vertical-align:top;border:0;color:#dcebe9}
.proxy-result th{font-weight:600;color:var(--cream)}
/* form controls themed to the site */
.proxy-result form{margin:18px 0}
.proxy-result input[type="text" i],.proxy-result select{background:var(--panel);color:var(--cream);border:1px solid var(--line-strong);border-radius:10px;padding:7px 10px;font:inherit;max-width:100%}
.proxy-result select[size]{min-width:240px}
.proxy-result input[type="submit" i],.proxy-result input[type="button" i]{background:var(--grad-hero);color:#06121a;border:0;border-radius:999px;padding:9px 24px;font:inherit;font-weight:700;cursor:pointer;margin-top:8px}
.proxy-result input[type="checkbox" i],.proxy-result input[type="radio" i]{accent-color:var(--teal);width:auto}
.proxy-result hr{border:0;border-top:1px solid var(--line);margin:20px 0}
@media(max-width:600px){
  .proxy-result table{display:block;overflow-x:auto;-webkit-overflow-scrolling:touch}
  .proxy-result th,.proxy-result td{padding:5px 12px 5px 0}
}

/* ---------- Modern astro forms (engine entry/relay forms .astro-form, proxied + direct) ---------- */
.astro-form{width:100%;max-width:640px;margin:18px 0;display:grid;gap:18px}
.astro-form .af-head{font-family:var(--display);font-size:1.2rem;font-weight:600;color:var(--cream);margin:0}
.astro-form .af-field{display:flex;flex-direction:column;gap:7px}
.astro-form label{font-weight:600;color:var(--cream)}
.astro-form .af-cols{display:grid;grid-template-columns:1fr 1fr;gap:14px 28px}
.astro-form .af-inline{display:flex;flex-wrap:wrap;gap:12px;align-items:center}
.astro-form input[type="text" i],.astro-form select{background:var(--panel);color:var(--cream);border:1px solid var(--line-strong);border-radius:10px;padding:11px 13px;font:inherit;width:100%;max-width:100%;box-sizing:border-box}
.astro-form .af-inline select{width:auto;flex:1 1 100px;min-width:100px}
.astro-form select[size]{height:auto;max-height:230px;padding:5px;scrollbar-width:thin;scrollbar-color:var(--line-strong) var(--panel)}
.astro-form select[size] option{padding:9px 11px;border-radius:7px;margin:1px 2px;color:var(--cream)}
.astro-form select[size] option:checked{background:var(--teal-deep) linear-gradient(0deg,var(--teal-deep),var(--teal-deep));color:#06121a;font-weight:600}
.astro-form select[size]::-webkit-scrollbar{width:11px}
.astro-form select[size]::-webkit-scrollbar-track{background:var(--panel);border-radius:8px}
.astro-form select[size]::-webkit-scrollbar-thumb{background:var(--line-strong);border-radius:8px;border:3px solid var(--panel)}
.astro-form input[type="radio" i],.astro-form input[type="checkbox" i]{width:auto;accent-color:var(--teal)}
.astro-form .af-hint{color:var(--muted);font-size:.85rem;margin:0;line-height:1.5}
.astro-form .af-warn{color:var(--coral);font-size:.85rem;margin:0}
.astro-form .af-warn:empty{display:none}
.astro-form .af-check{display:flex;gap:9px;align-items:flex-start;font-weight:400;color:#dcebe9;font-size:.95rem;cursor:pointer}
.astro-form .af-check input{flex:0 0 auto;margin-top:3px}
.astro-form .af-submit{justify-self:start;background:var(--grad-hero);color:#06121a;border:0;border-radius:999px;padding:13px 34px;font-weight:700;font-size:1.02rem;cursor:pointer}
.astro-form .af-submit:hover{filter:brightness(1.06)}
@media(max-width:520px){.astro-form .af-cols{grid-template-columns:1fr}}

/* ---------- Layout grid w/ sidebar ---------- */
.shell{display:grid;grid-template-columns:1fr;gap:26px;padding:26px 0 40px}
.aside{display:none}
@media(min-width:1040px){
  .shell{grid-template-columns:minmax(0,1fr) 300px}
  .aside{display:block}
  .aside .sticky{position:sticky;top:150px;display:flex;flex-direction:column;gap:22px}
}

/* ---------- HERO ---------- */
.hero{position:relative;padding:40px 0 8px}
.hero-date{display:inline-flex;align-items:center;gap:9px;font-weight:600;font-size:.82rem;letter-spacing:.05em;
  text-transform:uppercase;color:var(--teal);background:rgba(25,227,194,.10);
  border:1px solid rgba(25,227,194,.3);padding:8px 16px;border-radius:999px;
  opacity:0;animation:rise .7s .05s forwards}
.hero h1{font-family:var(--display);font-weight:600;font-size:clamp(2.6rem,8vw,5.4rem);line-height:.98;
  letter-spacing:-.025em;margin:20px 0 0;max-width:14ch}
.hero h1 .l1{display:block;opacity:0;animation:rise .8s .12s forwards}
.hero h1 .l2{display:block;opacity:0;animation:rise .8s .22s forwards;
  background:var(--grad-hero);-webkit-background-clip:text;background-clip:text;color:transparent;font-style:italic}
.hero h1 .l3{display:block;opacity:0;animation:rise .8s .32s forwards}
.hero-sub{margin-top:22px;max-width:48ch;color:var(--muted);font-size:1.05rem;opacity:0;animation:rise .8s .42s forwards}
.hero-actions{margin-top:26px;display:flex;gap:12px;flex-wrap:wrap;opacity:0;animation:rise .8s .52s forwards}
.btn{font-weight:600;font-size:.95rem;padding:14px 26px;border-radius:999px;border:0;cursor:pointer;transition:transform .2s,box-shadow .2s}
.btn-primary{background:var(--grad-coral);color:#fff;box-shadow:0 14px 34px -12px var(--coral)}
.btn-primary:hover{transform:translateY(-3px) scale(1.02)}
.btn-ghost{background:rgba(255,255,255,.05);color:var(--cream);border:1px solid var(--line-strong)}
.btn-ghost:hover{background:rgba(255,255,255,.10);transform:translateY(-3px)}
@keyframes rise{from{opacity:0;transform:translateY(26px)}to{opacity:1;transform:none}}

.hero-orbit{position:absolute;top:-30px;right:-40px;width:min(46vw,440px);height:min(46vw,440px);
  pointer-events:none;opacity:0;animation:fade 1.2s .4s forwards}
.hero-orbit .ring{position:absolute;inset:0;border-radius:50%;border:1px solid var(--line);}
.hero-orbit .ring2{inset:14%;border-style:dashed;animation:spin 60s linear infinite}
.hero-orbit .ring3{inset:30%;animation:spin 40s linear infinite reverse}
.hero-orbit .blob{position:absolute;inset:24%;border-radius:50%;
  background:var(--grad-hero);filter:blur(2px);opacity:.85;
  box-shadow:0 0 80px 10px rgba(25,227,194,.4);animation:float 7s ease-in-out infinite}
.hero-orbit .glyph{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;color:#06121a;animation:float 7s ease-in-out infinite}
.hero-orbit .glyph svg{width:42%;height:42%}
@keyframes spin{to{transform:rotate(360deg)}}
@keyframes float{0%,100%{transform:translateY(-6px)}50%{transform:translateY(10px)}}
@media(max-width:880px){.hero-orbit{position:relative;margin:30px auto 0;right:auto;top:auto;width:min(70vw,320px);height:min(70vw,320px)}}

/* ---------- Pinned strip ---------- */
.pinned{margin:30px 0 6px;background:linear-gradient(120deg,rgba(255,207,92,.10),rgba(255,107,94,.08));
  border:1px solid rgba(255,207,92,.25);border-radius:var(--radius);padding:16px 18px;display:flex;align-items:center;gap:16px;flex-wrap:wrap}
.pinned .lab{display:flex;align-items:center;gap:8px;font-weight:700;font-family:var(--display);font-size:1.05rem;color:var(--amber)}
.pinned .chips{display:flex;gap:8px;flex-wrap:wrap}
.pin-chip{display:inline-flex;align-items:center;gap:7px;background:rgba(255,255,255,.06);border:1px solid var(--line-strong);
  padding:7px 13px;border-radius:999px;font-size:.84rem;font-weight:500}
.pin-chip svg{width:15px;height:15px;color:var(--teal)}
.pinned .hint{font-size:.78rem;color:var(--muted);margin-left:auto}

/* ---------- Section headings ---------- */
.sec-head{display:flex;align-items:flex-end;justify-content:space-between;gap:16px;margin:46px 0 22px;flex-wrap:wrap}
.sec-head h2{font-family:var(--display);font-weight:600;font-size:clamp(1.7rem,4vw,2.6rem);letter-spacing:-.02em;line-height:1}
.sec-head h2 em{font-style:italic;background:var(--grad-hero);-webkit-background-clip:text;background-clip:text;color:transparent}
.sec-head p{color:var(--muted);font-size:.9rem;max-width:40ch}
.sec-link{font-size:.85rem;font-weight:600;color:var(--teal);white-space:nowrap}

/* ---------- Sign grid ---------- */
.sign-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:14px}
@media(min-width:620px){.sign-grid{grid-template-columns:repeat(3,1fr)}}
@media(min-width:980px){.sign-grid{grid-template-columns:repeat(4,1fr)}}
.sign-card{position:relative;background:linear-gradient(160deg,var(--panel),var(--ink));
  border:1px solid var(--line);border-radius:20px;padding:18px 16px 16px;overflow:hidden;cursor:pointer;
  transition:transform .28s cubic-bezier(.22,1,.36,1),border-color .28s,box-shadow .28s}
.sign-card::after{content:"";position:absolute;inset:0;border-radius:20px;padding:1px;pointer-events:none;
  background:var(--grad-hero);-webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);
  -webkit-mask-composite:xor;mask-composite:exclude;opacity:0;transition:opacity .3s}
.sign-card:hover{transform:translateY(-7px) rotate(-.6deg);box-shadow:var(--shadow-glow);border-color:transparent}
.sign-card:hover::after{opacity:1}
.sign-art{width:58px;height:58px;border-radius:16px;display:flex;align-items:center;justify-content:center;
  background:var(--grad-hero);margin-bottom:14px;transition:transform .35s}
.sign-card:nth-child(3n) .sign-art{background:var(--grad-coral)}
.sign-card:nth-child(3n+2) .sign-art{background:var(--grad-warm)}
.sign-card:hover .sign-art{transform:rotate(-10deg) scale(1.08)}
.sign-art svg{width:30px;height:30px;color:#06121a}
.sign-card h3{font-family:var(--display);font-weight:600;font-size:1.18rem;letter-spacing:-.01em}
.sign-card .range{font-size:.74rem;color:var(--muted);margin-top:2px;letter-spacing:.02em}
.star{position:absolute;top:12px;right:12px;z-index:2;background:rgba(255,255,255,.06);border:1px solid var(--line-strong);
  border-radius:50%;width:34px;height:34px;display:flex;align-items:center;justify-content:center;cursor:pointer;transition:.2s}
.star svg{width:17px;height:17px;color:var(--muted);transition:.2s}
.star:hover{transform:scale(1.15);border-color:var(--amber)}
.star.on{background:rgba(255,207,92,.18);border-color:var(--amber)}
.star.on svg{color:var(--amber);fill:var(--amber)}

/* ---------- Today's sky / feature cards ---------- */
.feature-row{display:grid;grid-template-columns:1fr;gap:18px;margin-top:8px}
@media(min-width:780px){.feature-row{grid-template-columns:1.3fr 1fr}}
.card{background:linear-gradient(160deg,var(--panel),var(--ink));border:1px solid var(--line);border-radius:var(--radius);padding:26px;position:relative;overflow:hidden}
.card.glow{box-shadow:var(--shadow-lg)}
.sky-card{background:
  radial-gradient(400px 200px at 90% -10%,rgba(123,75,255,.4),transparent),
  linear-gradient(160deg,var(--panel-2),var(--ink))}
.sky-card .kicker,.kicker{font-size:.72rem;font-weight:700;letter-spacing:.18em;text-transform:uppercase;color:var(--teal)}
.sky-card h3{font-family:var(--display);font-weight:600;font-size:1.8rem;margin:10px 0 12px;letter-spacing:-.02em}
.sky-card p{color:var(--muted)}
.sky-stats{display:flex;gap:22px;margin-top:20px;flex-wrap:wrap}
.sky-stats div b{display:block;font-family:var(--display);font-size:1.4rem;color:var(--cream)}
.sky-stats div span{font-size:.72rem;color:var(--muted);text-transform:uppercase;letter-spacing:.08em}

.teaser-card{background:linear-gradient(155deg,rgba(255,107,94,.16),rgba(123,75,255,.12)),var(--ink)}
.teaser-card h3{font-family:var(--display);font-weight:600;font-size:1.6rem;margin:8px 0 10px;letter-spacing:-.02em}
.teaser-card .phrase{font-style:italic;color:var(--amber);font-family:var(--display);font-size:1.15rem;margin-bottom:8px}
.teaser-card p{color:var(--muted);font-size:.95rem}
.teaser-card .btn{margin-top:18px}

/* ---------- Editor card ---------- */
.editor-card{display:grid;grid-template-columns:1fr;gap:22px;align-items:center;
  background:linear-gradient(120deg,var(--panel-2),var(--ink));border:1px solid var(--line-strong);
  border-radius:28px;padding:30px;margin-top:18px;overflow:hidden;position:relative}
@media(min-width:720px){.editor-card{grid-template-columns:160px 1fr}}
.editor-portrait{width:140px;height:140px;border-radius:24px;background:var(--grad-hero);
  display:flex;align-items:center;justify-content:center;font-family:var(--display);font-size:3rem;color:#06121a;font-weight:700;
  box-shadow:var(--shadow-glow);margin:0 auto}
.editor-card h3{font-family:var(--display);font-weight:600;font-size:1.7rem;letter-spacing:-.02em}
.editor-card .role{color:var(--teal);font-weight:600;font-size:.85rem;margin:4px 0 12px}
.editor-card p{color:var(--muted)}
.editor-card .ec-link{display:inline-block;margin-top:14px;font-weight:600;color:var(--amber);border-bottom:2px solid rgba(255,207,92,.4)}
.editor-portrait{padding:0;text-decoration:none;overflow:hidden}
.editor-portrait img,.editor-portrait picture{display:block;width:100%;height:100%;object-fit:cover;border-radius:inherit}
.editor-card h3 a{color:inherit}
/* Author bio page */
.author-portrait{float:right;margin:0 0 1em 1.5em;max-width:240px}
.author-portrait img{display:block;width:240px;height:auto;border-radius:16px;box-shadow:var(--shadow-glow)}
.author-portrait figcaption{font-size:.85rem;color:var(--muted);margin-top:6px;text-align:center}
.author-gallery{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:14px;margin:18px 0 28px;clear:both}
.author-gallery figure{margin:0;overflow:hidden;border-radius:14px;border:1px solid var(--line);background:var(--panel-2)}
.author-gallery img{display:block;width:100%;height:200px;object-fit:cover;transition:transform .4s ease}
.author-gallery figure:hover img{transform:scale(1.04)}
.author-gallery figcaption{padding:8px 10px;font-size:.82rem;line-height:1.4;color:var(--muted)}
@media(max-width:480px){.author-gallery{grid-template-columns:repeat(2,1fr);gap:8px}.author-gallery img{height:150px}.author-portrait{float:none;margin:0 auto 1em;max-width:200px}.author-portrait img{width:200px}}

/* ---------- Reading view (daily/weekly) ---------- */
.article{max-width:760px}
.crumbs{font-size:.78rem;color:var(--muted);margin:8px 0 18px}
.crumbs a:hover{color:var(--teal)}
.art-art{display:flex;align-items:center;gap:18px;margin-bottom:14px}
.art-art .badge{width:74px;height:74px;border-radius:20px;background:var(--grad-warm);display:flex;align-items:center;justify-content:center;box-shadow:var(--shadow-glow)}
.art-art .badge svg{width:40px;height:40px;color:#06121a}
.art-art .meta .kick{font-size:.72rem;font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:var(--teal)}
.art-art .meta .rng{color:var(--muted);font-size:.85rem}
.article h1{font-family:var(--display);font-weight:600;font-size:clamp(2.2rem,6vw,3.6rem);line-height:1;letter-spacing:-.025em;margin:6px 0 6px}
.phrase-line{font-family:var(--display);font-style:italic;font-size:1.4rem;color:var(--amber);margin:10px 0 18px}
.byline{display:flex;align-items:center;gap:10px;font-size:.85rem;color:var(--muted);margin-bottom:24px;flex-wrap:wrap}
.byline .av{width:34px;height:34px;border-radius:50%;background:var(--grad-hero);display:flex;align-items:center;justify-content:center;font-weight:700;color:#06121a;font-size:.8rem;font-family:var(--display)}
.byline a{color:var(--teal);font-weight:600}

.tldr{background:linear-gradient(155deg,rgba(25,227,194,.12),rgba(123,75,255,.10));
  border:1px solid rgba(25,227,194,.3);border-radius:18px;padding:20px 22px;margin:22px 0}
.tldr .kicker{color:var(--teal)}
.tldr ul{list-style:none;margin-top:12px;display:grid;gap:9px}
.tldr li{display:flex;gap:10px;font-size:.95rem}
.tldr li::before{content:"✦";color:var(--teal);font-weight:700}

.prose p{font-size:1.08rem;margin-bottom:18px;color:#dcebe9}
.prose p::first-letter{}
.prose h2{font-family:var(--display);font-weight:600;font-size:clamp(1.5rem,3.5vw,2rem);letter-spacing:-.02em;margin:34px 0 12px;color:var(--cream)}
.prose h3{font-family:var(--display);font-weight:600;font-size:1.3rem;letter-spacing:-.01em;margin:26px 0 10px;color:var(--cream)}
.prose a{color:var(--teal);font-weight:500;border-bottom:1px solid rgba(25,227,194,.3)}
.prose a:hover{border-bottom-color:var(--teal)}
.prose strong{color:var(--cream);font-weight:600}
.prose ul,.prose ol{margin:0 0 18px 0;padding-left:0;list-style:none;display:grid;gap:10px}
.prose ul li{position:relative;padding-left:26px;font-size:1.04rem;color:#dcebe9}
.prose ul li::before{content:"✦";position:absolute;left:0;color:var(--teal);font-weight:700}
.prose ol{counter-reset:n}
.prose ol li{position:relative;padding-left:30px;font-size:1.04rem;color:#dcebe9;counter-increment:n}
.prose ol li::before{content:counter(n);position:absolute;left:0;top:0;color:var(--teal);font-weight:700;font-family:var(--display)}
.prose hr{border:0;border-top:1px solid var(--line);margin:30px 0}

/* ---------- Forms (interactive landing pages) ---------- */
.ds-form legend{font-family:var(--display);color:var(--cream)}
.ds-form label{color:var(--muted)}
.ds-form input,.ds-form select,.ds-form textarea{
  background:var(--panel);color:var(--cream);
  border:1px solid var(--line-strong);border-radius:10px;
  font-family:var(--body);outline:none;transition:border-color .2s,box-shadow .2s}
.ds-form input::placeholder{color:var(--muted)}
.ds-form input:focus,.ds-form select:focus,.ds-form textarea:focus{
  border-color:var(--teal);box-shadow:0 0 0 3px rgba(25,227,194,.18)}
.ds-form option{background:var(--midnight);color:var(--cream)}
.prose blockquote{border-left:3px solid var(--teal);margin:22px 0;padding:6px 0 6px 20px;color:var(--muted);font-style:italic}

.editorial{background:linear-gradient(155deg,rgba(255,207,92,.13),rgba(255,107,94,.10));
  border:1px solid rgba(255,207,92,.3);border-left:5px solid var(--amber);
  border-radius:14px;padding:20px 22px;margin:26px 0}
.editorial .kicker{color:var(--amber)}
.editorial p{margin-top:10px;color:#f0e6cf;font-size:.98rem;font-style:italic}

/* sign switcher */
.switcher{display:flex;gap:8px;overflow-x:auto;padding:6px 2px 14px;margin:8px 0}
.switcher::-webkit-scrollbar{height:6px}
.switcher::-webkit-scrollbar-thumb{background:var(--line-strong);border-radius:6px}
.sw-chip{flex:0 0 auto;display:inline-flex;align-items:center;gap:7px;background:var(--panel);border:1px solid var(--line);
  padding:9px 15px;border-radius:999px;font-size:.85rem;font-weight:500;cursor:pointer;transition:.2s}
.sw-chip svg{width:15px;height:15px;color:var(--teal)}
.sw-chip:hover{border-color:var(--teal);transform:translateY(-2px)}
.sw-chip.active{background:var(--grad-hero);color:#06121a;border-color:transparent;font-weight:700}
.sw-chip.active svg{color:#06121a}

.cta-band{background:var(--grad-coral);border-radius:22px;padding:26px;margin:28px 0;
  display:flex;align-items:center;justify-content:space-between;gap:18px;flex-wrap:wrap;box-shadow:0 22px 50px -20px var(--coral)}
.cta-band h3{font-family:var(--display);font-weight:600;font-size:1.5rem;color:#fff}
.cta-band p{color:rgba(255,255,255,.85);font-size:.9rem}
.cta-band .btn{background:#fff;color:var(--coral-deep);font-weight:700}

/* ratings */
.ratings{display:flex;gap:26px;margin:22px 0;flex-wrap:wrap}
.rating b{display:block;font-size:.72rem;text-transform:uppercase;letter-spacing:.1em;color:var(--muted);margin-bottom:4px}
.stars{font-size:1.3rem;color:var(--amber);letter-spacing:2px}
.stars .off{color:rgba(255,255,255,.18)}

/* weekly sections */
.wsection{margin:22px 0}
.wsection h3{font-family:var(--display);font-weight:600;font-size:1.35rem;letter-spacing:-.01em;margin-bottom:6px;display:flex;align-items:center;gap:10px}
.wsection h3 i{width:30px;height:30px;border-radius:9px;display:inline-flex;align-items:center;justify-content:center;background:var(--grad-hero)}
.wsection:nth-of-type(2n) h3 i{background:var(--grad-coral)}
.wsection:nth-of-type(3n) h3 i{background:var(--grad-warm)}
.wsection h3 i svg{width:16px;height:16px;color:#06121a}
.wsection p{color:#dcebe9}

.facts{background:linear-gradient(160deg,var(--panel-2),var(--ink));border:1px solid var(--line-strong);border-radius:20px;padding:24px;margin:26px 0}
.facts h3{font-family:var(--display);font-weight:600;font-size:1.3rem;margin-bottom:16px}
.facts-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:14px}
@media(min-width:560px){.facts-grid{grid-template-columns:repeat(4,1fr)}}
.fact{background:rgba(255,255,255,.04);border:1px solid var(--line);border-radius:14px;padding:14px}
.fact span{font-size:.68rem;text-transform:uppercase;letter-spacing:.1em;color:var(--muted)}
.fact b{display:block;font-family:var(--display);font-size:1.05rem;margin-top:5px;color:var(--cream)}

.archive{display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin:24px 0;background:var(--panel);border:1px solid var(--line);border-radius:16px;padding:16px 18px}
.archive label{font-size:.8rem;color:var(--muted);font-weight:600}
.archive select{background:var(--ink);color:var(--cream);border:1px solid var(--line-strong);border-radius:10px;padding:10px 14px;font-family:var(--body);font-size:.9rem;cursor:pointer}

/* ---------- Footer ---------- */
footer{margin-top:50px;border-top:1px solid var(--line);background:rgba(7,16,25,.6);padding:40px 0 calc(78px + env(safe-area-inset-bottom));position:relative;z-index:1} /* bottom pad clears the fixed mobile tab bar + browser chrome */
.foot-grid{display:grid;grid-template-columns:1fr 1fr;gap:26px 28px} /* 2 cols on mobile */
.foot-brand{grid-column:1 / -1} /* brand spans both columns */
@media(min-width:760px){.foot-grid{grid-template-columns:2fr 1fr 1fr}.foot-brand{grid-column:auto}}
.foot-brand .word{font-family:var(--display);font-weight:700;font-size:1.4rem}
.foot-brand .word b{color:var(--teal)}
.foot-brand p{color:var(--muted);font-size:.85rem;margin-top:8px;max-width:38ch}
footer h4{font-size:.78rem;text-transform:uppercase;letter-spacing:.12em;color:var(--teal);margin-bottom:12px}
footer ul{list-style:none;display:grid;gap:9px}
footer ul a{color:var(--muted);font-size:.9rem}
footer ul a:hover{color:var(--cream)}
.disclaimer{margin-top:30px;padding-top:20px;border-top:1px solid var(--line);color:var(--muted);font-size:.78rem;display:flex;justify-content:space-between;align-items:center;gap:10px 18px;flex-wrap:wrap}
.legal-links{display:flex;gap:8px 16px;flex-wrap:wrap}
.legal-links a{color:var(--muted);position:relative}
.legal-links a:not(:last-child)::after{content:"·";position:absolute;right:-10px;color:var(--line-strong)}
.legal-links a:hover{color:var(--teal)}
.legal-meta{color:var(--muted)}

/* ---------- Mobile bottom tab bar ---------- */
.tabbar{position:fixed;bottom:0;left:0;right:0;z-index:9001;display:flex;
  background:rgba(7,16,25,.92);backdrop-filter:blur(14px);border-top:1px solid var(--line-strong);
  padding:8px 4px env(safe-area-inset-bottom);}
.tabbar a{flex:1;display:flex;flex-direction:column;align-items:center;gap:3px;color:var(--muted);font-size:.62rem;font-weight:600;padding:5px 2px;cursor:pointer}
.tabbar a svg{width:21px;height:21px}
.tabbar a.active{color:var(--teal)}
.tabbar a:active{transform:scale(.92)}
@media(min-width:1040px){.tabbar{display:none}body{padding-bottom:0}}

.nav-desktop{display:none}
@media(min-width:1040px){.nav-desktop{display:flex}.burger{display:none}.topbar-cta{display:flex;margin-left:auto}.tabbar{display:none}footer{padding-bottom:30px}}