/* Sophiology.org — "knee-deep in the numbers"
   A 1993 shooter's level: a brick wall, riveted steel plates, red status-bar numbers, yellow pick-ups.
   Black Ops One for titles, Jersey 10 for the big numbers, Jersey 15 for reading, Silkscreen for labels.
   Green is good and friendly, red-orange is bad and unfriendly. One look, whatever the host's theme. */
:root {
  color-scheme: dark;
  --wall: #4a3020;
  --steel-hi: #a8a8a8;
  --steel-lo: #1a1a1a;
  --plate: linear-gradient(135deg, #5a5a5a 0%, #3a3a3a 52%, #474747 100%);
  --plate-dk: linear-gradient(135deg, #3c3c3c 0%, #262626 55%, #313131 100%);
  --well: #120b07;
  --cell: rgba(0, 0, 0, 0.3);
  --cell-hi: rgba(255, 255, 255, 0.06);
  --ink: #f4f1ea;
  --fg: #dddad3;
  --mid: #b3aea4;
  --faint: #847f76;
  --hair: rgba(0, 0, 0, 0.45);
  --line: rgba(255, 255, 255, 0.08);
  --red: #f2291a;
  --red-dk: #a80c02;
  --yel: #f0c020;
  --on-yel: #1a0e04;
  --hover: rgba(240, 192, 32, 0.14);
  --good: #6ee065;
  --good-bg: rgba(50, 150, 40, 0.24);
  --bad: #ff6a4d;
  --bad-bg: rgba(190, 30, 10, 0.26);
  --f: "Jersey 15", "Trebuchet MS", Arial, sans-serif;
  --fn: "Jersey 10", "Jersey 15", Impact, sans-serif;
  --fl: "Silkscreen", "Courier New", monospace;
  --fd: "Black Ops One", Impact, "Arial Black", sans-serif;
  /* three kinds of heading, each with one font and one colour: titles, subtitles, labels */
  --title: #ffa31a;
  --sub: #f4f1ea;
  --lab: #f0c020;
  --sym: "Noto Sans Symbols", "Noto Sans Symbols 2", "Segoe UI Symbol", "Noto Sans Egyptian Hieroglyphs", "Noto Sans Runic", "Segoe UI Historic", "Apple Symbols", sans-serif;
  --max: 1240px;
  --mast-h: 64px;
  --hud-h: 112px;
  --gl: max(16px, env(safe-area-inset-left, 0px));
  --gr: max(16px, env(safe-area-inset-right, 0px));
  --bevel: #a8a8a8 #1a1a1a #1a1a1a #a8a8a8;
  --bevel-in: #1a1a1a #8a8a8a #8a8a8a #1a1a1a;
  --rivets: radial-gradient(circle at 11px 11px, #e6e6e6 0 1.5px, #5a5a5a 2.5px 3.5px, transparent 4px), radial-gradient(circle at calc(100% - 11px) 11px, #e6e6e6 0 1.5px, #5a5a5a 2.5px 3.5px, transparent 4px);
  --noise: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='320' height='320'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.09' numOctaves='4' seed='7'/%3E%3CfeColorMatrix values='0 0 0 .55 .08  0 0 0 .38 .04  0 0 0 .26 .02  0 0 0 0 1'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  --grit: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.3' numOctaves='3'/%3E%3CfeColorMatrix values='0 0 0 .3 .3  0 0 0 .3 .3  0 0 0 .3 .3  0 0 0 0 1'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* ------------------------------------------------------------------ base */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; font-size: 18px; background: var(--wall); }
body {
  margin: 0; color: var(--fg); font: 400 1.06rem/1.5 var(--f); text-shadow: 1px 1px 0 rgba(0, 0, 0, 0.6); padding-bottom: var(--hud-h);
  background:
    radial-gradient(ellipse 120% 340px at 50% 0, rgba(140, 14, 0, 0.75), transparent),
    linear-gradient(rgba(0, 0, 0, 0.5) 3px, transparent 3px) 0 0 / 160px 80px,
    linear-gradient(90deg, rgba(0, 0, 0, 0.5) 3px, transparent 3px) 0 0 / 160px 160px,
    linear-gradient(90deg, rgba(0, 0, 0, 0.5) 3px, transparent 3px) 80px 80px / 160px 160px,
    var(--noise), var(--wall);
}
h1, h2, h3, h4 { margin: 0; color: var(--ink); text-wrap: balance; font-weight: 400; }
p { margin: 0.5em 0; }
a { color: var(--yel); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; }
a:hover { color: #ffe27a; text-decoration-thickness: 2px; }
img, svg { max-width: 100%; }
::selection { background: var(--yel); color: var(--on-yel); text-shadow: none; }
:focus-visible { outline: 3px solid var(--yel); outline-offset: 1px; }
b, strong { color: var(--ink); font-weight: 400; letter-spacing: 0.01em; }
.label { font: 400 0.62rem/1.5 var(--fl); text-transform: uppercase; letter-spacing: 0.06em; color: var(--yel); }
.soft { color: var(--mid); }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.skip { position: absolute; left: -999px; top: 0; }
.skip:focus { left: var(--gl); top: 8px; z-index: 200; background: var(--yel); color: var(--on-yel); padding: 6px 10px; }
main [id] { scroll-margin-top: calc(var(--mast-h) + 60px); }
.sym-font { font-family: var(--sym); }
.plate, .block, .ch-index, .page-head, .detail-head, .stop, .numcard, .mega .mg-in {
  background: var(--rivets), var(--plate); border: 4px solid; border-color: var(--bevel); box-shadow: 0 7px 0 rgba(0, 0, 0, 0.45);
}

/* ------------------------------------------------------------------ type */
h1 { font: 400 clamp(2.2rem, 5vw, 3.6rem)/0.95 var(--fd); text-transform: uppercase; letter-spacing: 0.01em; }
h2 { font: 400 1.5rem/1.1 var(--fd); }
h3 { font: 700 0.66rem/1.4 var(--fl); text-transform: uppercase; letter-spacing: 0.08em; color: var(--yel); margin: 36px 0 14px; padding-top: 8px; border-top: 2px solid var(--hair); box-shadow: inset 0 1px 0 var(--line); }
h4 { font: 700 0.62rem/1.4 var(--fl); text-transform: uppercase; letter-spacing: 0.08em; color: var(--yel); }
.lede { color: var(--fg); max-width: 64ch; font-size: 1.1rem; }
/* one look for every title on the site: Black Ops One in the same molten gradient */
h1, .hero h1, .stop-t a, .block > header h2, .xp-h h1, .detail-head h1, .bk-x h3, .cal-title, .cal-dh h3, .lp-t, .mc-top b, .cat-h b, .mg-s, .numcard-head h2, .plate > h2 {
  background: linear-gradient(#fff2b0, #ffb030 45%, #e04a00); -webkit-background-clip: text; background-clip: text; color: transparent; text-shadow: none; filter: drop-shadow(2px 2px 0 #000);
}
.hero h1 em { font-style: normal; color: inherit; }
.mg-s:hover, .cat-h b:hover { filter: drop-shadow(2px 2px 0 #000) brightness(1.3); }

/* scrollbars in the same steel as the plates */
/* Chrome and Edge drop the steel ::-webkit-scrollbar styles as soon as scrollbar-color is set, so only Firefox gets it */
@supports not selector(::-webkit-scrollbar) { html { scrollbar-color: #a8a8a8 #120b07; } .subnav-in { scrollbar-color: #b8b8b8 #120b07; } }
::-webkit-scrollbar { width: 16px; height: 14px; }
::-webkit-scrollbar-track { background: #120b07; box-shadow: inset 2px 2px 0 #000, inset -1px -1px 0 #3a3a3a; }
::-webkit-scrollbar-thumb { border: 2px solid; border-color: #e0e0e0 #2a2a2a #2a2a2a #e0e0e0; background-color: #8a8a8a; }
::-webkit-scrollbar-thumb:vertical { background-image: linear-gradient(transparent calc(50% - 7px), #2a2a2a calc(50% - 7px) calc(50% - 5px), transparent calc(50% - 5px) calc(50% - 1px), #2a2a2a calc(50% - 1px) calc(50% + 1px), transparent calc(50% + 1px) calc(50% + 5px), #2a2a2a calc(50% + 5px) calc(50% + 7px), transparent calc(50% + 7px)), linear-gradient(90deg, #d0d0d0, #6a6a6a); }
::-webkit-scrollbar-thumb:horizontal { background-image: linear-gradient(90deg, transparent calc(50% - 7px), #2a2a2a calc(50% - 7px) calc(50% - 5px), transparent calc(50% - 5px) calc(50% - 1px), #2a2a2a calc(50% - 1px) calc(50% + 1px), transparent calc(50% + 1px) calc(50% + 5px), #2a2a2a calc(50% + 5px) calc(50% + 7px), transparent calc(50% + 7px)), linear-gradient(#d0d0d0, #6a6a6a); }
::-webkit-scrollbar-thumb:hover { background-color: #ffd23f; border-color: #fff0a0 #6a4a00 #6a4a00 #fff0a0; }
::-webkit-scrollbar-thumb:vertical:hover { background-image: linear-gradient(transparent calc(50% - 7px), #6a4a00 calc(50% - 7px) calc(50% - 5px), transparent calc(50% - 5px) calc(50% - 1px), #6a4a00 calc(50% - 1px) calc(50% + 1px), transparent calc(50% + 1px) calc(50% + 5px), #6a4a00 calc(50% + 5px) calc(50% + 7px), transparent calc(50% + 7px)), linear-gradient(90deg, #ffe680, #c89000); }
::-webkit-scrollbar-button { display: none; }
::-webkit-scrollbar-corner { background: #120b07; }
.ink { display: inline-block; font: 400 1em/0.86 var(--fn); color: var(--red); text-shadow: 3px 3px 0 #000; letter-spacing: 0.01em; white-space: nowrap; }
.ink-sub { display: inline-block; font: 700 0.55rem/1 var(--fl); text-transform: uppercase; letter-spacing: 0.04em; background: var(--yel); color: var(--on-yel); text-shadow: none; padding: 4px 6px; margin-left: 8px; vertical-align: top; }
.n { color: var(--ink); }
.nl { color: var(--yel); text-decoration: underline; text-decoration-thickness: 2px; text-decoration-color: rgba(240, 192, 32, 0.55); text-underline-offset: 2px; font-variant-numeric: tabular-nums; }
.script { font-family: "SBL Hebrew", "Noto Serif Hebrew", "Noto Naskh Arabic", "Times New Roman", serif; font-size: 1.25rem; }
.rune { font-family: var(--sym); font-size: 1.4rem; color: var(--ink); }
.mono-line { font-size: 0.92rem; line-height: 1.8; color: var(--mid); overflow-wrap: anywhere; font-variant-numeric: tabular-nums; }
.mono-line sub { color: var(--yel); font-size: 0.8em; margin-right: 6px; }
.tagx { display: inline-block; justify-self: start; align-self: start; font: 700 0.55rem/1 var(--fl); text-transform: uppercase; letter-spacing: 0.04em; padding: 5px 7px; white-space: nowrap; text-shadow: none; }
.tagx.mas { background: var(--yel); color: var(--on-yel); }
.tagx.wealth { background: #1f6b2a; color: #e8ffd8; border: 2px solid #6ee065; padding: 3px 6px; }
.tagx.wealth::before { content: "$ "; }
.wealth-box { margin: 18px 0 22px; padding: 14px 18px; background: linear-gradient(rgba(50, 150, 40, 0.18), rgba(50, 150, 40, 0.06)); border: 3px solid; border-color: #3a8a32 #0e2a0b #0e2a0b #3a8a32; }
.wealth-box h3 { margin: 0 0 6px; border: 0; padding: 0; box-shadow: none; color: var(--good); }
.wealth-box p { margin: 6px 0 0; max-width: 90ch; }
.wealth-box b { color: var(--ink); }
.bday.wealth { border-color: #3a8a32 #0e2a0b #0e2a0b #3a8a32; }
.bday .tagx.wealth { justify-self: start; margin: 2px 0; }
.cal-n.wealth { background: #1f6b2a; color: #e8ffd8; }
.cal-n.wealth::after { content: " $"; }.tagx.hid { border: 2px solid var(--yel); color: var(--yel); padding: 3px 6px; }

/* ------------------------------------------------------------------ masthead and menu */
.mast { position: sticky; top: env(safe-area-inset-top, 0px); z-index: 50; background: var(--grit), linear-gradient(#4a4a4a, #262626); background-blend-mode: overlay, normal; border-bottom: 4px solid; border-color: #121212; box-shadow: inset 0 -2px 0 #6a6a6a, 0 6px 0 rgba(0, 0, 0, 0.4); }
.mast-row { max-width: var(--max); margin: 0 auto; padding-left: var(--gl); padding-right: var(--gr); padding-block: 8px; display: flex; align-items: center; gap: 18px; }
.wordmark { display: grid; grid-template-columns: auto auto; column-gap: 11px; align-items: center; text-decoration: none; line-height: 1; flex: none; }
.wm-owl { grid-row: 1 / span 2; width: 42px; height: 42px; padding: 3px; background: #120a06; border: 3px solid; border-color: #2a2a2a #9a9a9a #9a9a9a #2a2a2a; box-shadow: 0 0 0 2px #0c0806; }
.wm-owl svg { display: block; width: 100%; height: 100%; }
.wordmark .wm, .wordmark .wm-sub { grid-column: 2; }
.wordmark .wm { font: 400 1.75rem/0.9 var(--fd); letter-spacing: 0.02em; background: linear-gradient(#fff2b0 0%, #ffb030 32%, #e04a00 64%, #701000 100%); -webkit-background-clip: text; background-clip: text; color: transparent; text-shadow: none; filter: drop-shadow(2px 2px 0 #200800); }
.wordmark .wm-sub { font: 400 0.48rem/1.3 var(--fl); text-transform: uppercase; letter-spacing: 0.18em; color: var(--yel); margin-top: 4px; }
.wordmark:hover .wm { filter: drop-shadow(2px 2px 0 #200800) drop-shadow(0 0 10px rgba(255, 120, 20, 0.6)); }
.menu { display: flex; align-items: stretch; gap: 10px; }
.mn { display: inline-flex; align-items: center; background: linear-gradient(#6a6a6a, #383838); border: 3px solid; border-color: #9a9a9a #161616 #161616 #9a9a9a; padding: 11px 18px 10px; font: 700 0.66rem/1 var(--fl); text-transform: uppercase; letter-spacing: 0.08em; color: #ececec; text-shadow: 2px 2px 0 #000; cursor: pointer; text-decoration: none; white-space: nowrap; }
.mn-lib::before { content: "▤"; font: 400 1rem/1 var(--sym); margin-right: 9px; color: var(--yel); }
.mn-read { background: linear-gradient(#8a2400, #3a0800); color: var(--yel); border-color: #c06030 #160400 #160400 #c06030; }
.mn-read::after { content: "▶"; font: 400 0.9rem/1 var(--fn); margin-left: 9px; }
.mn-wrap { position: relative; display: flex; }
.mn-bc { background: linear-gradient(#5a4410, #241a04); color: #ffe9a0; border-color: #b8902a #140e02 #140e02 #b8902a; }
.mn-bc::before { content: "✵"; font: 400 1rem/1 var(--sym); margin-right: 9px; color: var(--yel); }
.mn-bc:hover, .mn-bc.on, .mn-bc[aria-expanded="true"] { color: #fff6c8; border-color: #140e02 #b8902a #b8902a #140e02; }
.bc-pop { position: absolute; z-index: 60; top: calc(100% + 8px); left: 50%; transform: translateX(-50%); width: 300px; max-width: calc(100vw - 32px); display: grid; gap: 6px; padding: 12px; background: linear-gradient(#4a4a4a, #262626); border: 3px solid; border-color: var(--bevel); box-shadow: 0 8px 0 rgba(0, 0, 0, 0.5); }
.bc-pop .label { margin: 0 0 2px; }
.bc-pop a { display: grid; gap: 2px; padding: 10px 12px; background: var(--well); border: 3px solid; border-color: var(--bevel-in); color: var(--ink); text-decoration: none; }
.bc-pop a b { font: 400 1.25rem/1.1 var(--fd); color: var(--ink); }
.bc-pop a small { font-size: 0.86rem; color: var(--mid); }
.bc-pop a:hover, .bc-pop a:focus-visible { border-color: var(--yel); }
.bc-pop a:hover b { color: var(--yel); }.mn:hover, .mn[aria-expanded="true"] { color: var(--yel); border-color: #161616 #9a9a9a #9a9a9a #161616; }
.mn-read:hover, .mn-read.on { color: #fff3b0; border-color: #160400 #c06030 #c06030 #160400; }
.search { position: relative; flex: 1 1 auto; max-width: 360px; margin-left: auto; }
.search input { width: 100%; padding: 7px 12px; font: 400 1.05rem var(--f); color: var(--red); background: var(--well); border: 3px solid; border-color: var(--bevel-in); text-shadow: 1px 1px 0 #000; }
.search input::placeholder { color: #8a5a40; }
.results { position: absolute; left: 0; right: 0; top: calc(100% + 4px); background: var(--plate-dk); border: 4px solid; border-color: var(--bevel); max-height: min(70vh, 560px); overflow-y: auto; z-index: 60; box-shadow: 0 10px 0 rgba(0, 0, 0, 0.5); }
.results a { display: grid; grid-template-columns: 76px minmax(0, 1fr); gap: 0 10px; padding: 8px 12px; color: var(--fg); text-decoration: none; border-bottom: 2px solid var(--hair); }
.results a:last-child { border-bottom: 0; }
.results a:hover, .results a.on { background: var(--hover); box-shadow: inset 3px 0 0 var(--yel); }
.results .r-type { font: 400 0.5rem/2.4 var(--fl); text-transform: uppercase; letter-spacing: 0.06em; color: var(--yel); grid-row: span 2; }
.results .r-name { color: var(--ink); font-size: 1.08rem; }
.results .r-sub { font-size: 0.86rem; color: var(--mid); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mega { border-top: 2px solid #111; background: rgba(10, 6, 4, 0.92); max-height: calc(100vh - var(--mast-h) - var(--hud-h)); overflow-y: auto; }
.mega .mg-in { max-width: var(--max); margin: 14px auto 18px; padding: 22px 24px 26px; display: grid; grid-template-columns: minmax(0, 1fr); gap: 20px; width: calc(100% - 32px); }
.mg-in.all { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.mg-part { min-width: 0; }
.mg-in:not(.all) .mg-part { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 16px 24px; }
.mg-in:not(.all) .mg-h { grid-column: 1 / -1; }
.mg-h { margin: 0 0 4px; font: 700 0.62rem var(--fl); text-transform: uppercase; letter-spacing: 0.08em; color: var(--yel); display: flex; gap: 8px; align-items: center; }
.mg-h span { background: var(--red-dk); color: var(--yel); padding: 3px 6px; }
.mg-sec { border-top: 2px solid var(--hair); box-shadow: inset 0 1px 0 var(--line); padding-top: 8px; min-width: 0; }
.mg-in.all .mg-sec { margin-bottom: 12px; }
.mg-s { display: flex; gap: 8px; align-items: baseline; font: 400 1.05rem/1.1 var(--fd); color: var(--ink); text-decoration: none; }
.mg-s:hover { color: var(--yel); }
.mg-n { font: 400 1.2rem var(--fn); color: var(--red); }
.mg-sec ul { list-style: none; margin: 6px 0 0; padding: 0; display: grid; gap: 0; }
.mg-sec li a { font-size: 0.98rem; color: var(--fg); text-decoration: none; display: block; padding: 1px 0; }
.mg-sec li a:hover { color: var(--yel); }
.mg-more { color: var(--yel) !important; }

/* ------------------------------------------------------------------ layout */
main { max-width: var(--max); margin: 0 auto; padding-left: var(--gl); padding-right: var(--gr); padding-block: 0 84px; }
.jump { display: none !important; }
.page-head { margin: 30px 0 22px; padding: 22px 30px; }
#pp-root, #br-root, #cc-root, #hi-root, #so-root, main > section > .picks { background: var(--rivets), var(--plate); border: 4px solid; border-color: var(--bevel); box-shadow: 0 7px 0 rgba(0, 0, 0, 0.45); padding: 18px 26px 26px; margin-top: 22px; }
:is(#pp-root, #br-root, #cc-root, #hi-root, #so-root) > .page-head { background: none; border: 0; box-shadow: none; padding: 0; margin: 4px 0 12px; }
.page-head h1, .page-head .label { display: none; }
.page-head .lede { margin: 0; font-size: 1.14rem; color: var(--fg); max-width: 76ch; }
.ch-page > .page-head, .ch-page > div > .page-head, .ch-page > .picks, .ch-page:not(.ch-home) .hero { display: none; }
.block { margin-top: 48px; padding: 36px 40px 42px; min-width: 0; }
.block > header { display: grid; gap: 12px; margin-bottom: 30px; }
.block > header h2 { font-size: clamp(1.9rem, 3.8vw, 3rem); line-height: 0.95; text-transform: uppercase; background: linear-gradient(#fff2b0, #ffb030 45%, #e04a00); -webkit-background-clip: text; background-clip: text; color: transparent; text-shadow: none; filter: drop-shadow(2px 2px 0 #000); justify-self: start; }
.block > header p { margin: 0; max-width: 76ch; color: var(--fg); }
.block .block { background: none; border: 0; box-shadow: none; padding: 0; margin-top: 30px; }
.two { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 44px; margin-top: 22px; }
.two > * { min-width: 0; }
.note { color: var(--mid); font-size: 0.96rem; max-width: 86ch; }
.box { border: 3px solid; border-color: var(--bevel-in); padding: 14px 18px; margin: 16px 0; background: var(--cell); }
.box h3 { margin-top: 0; border-top: 0; padding-top: 0; box-shadow: none; }
.empty { color: var(--mid); padding: 16px 0; }
.loading { display: flex; align-items: center; gap: 12px; padding: 24px 0; font: 400 0.66rem var(--fl); text-transform: uppercase; letter-spacing: 0.06em; color: var(--yel); }
/* a loading bar of red pixels marching left to right */
.loading::before { content: ""; flex: none; width: 72px; height: 14px; background: repeating-linear-gradient(90deg, var(--red) 0 8px, transparent 8px 12px) 0 0 / 24px 100% repeat-x, var(--well); border: 2px solid; border-color: var(--bevel-in); animation: march 0.6s steps(3) infinite; }
@keyframes march { to { background-position: 24px 0, 0 0; } }
/* something did not arrive */
.fail { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 16px; margin: 14px 0; padding: 12px 16px; background: var(--well); border: 3px solid; border-color: var(--bevel-in); border-left: 6px solid var(--bad); }
.fail p { margin: 0; flex: 1 1 260px; }
.fail b { color: var(--bad); }
.loading::after { content: "▮"; margin-left: 6px; animation: blink 1s steps(1) infinite; color: var(--red); }
@keyframes blink { 50% { opacity: 0; } }

/* section head: the number, the name, the description; then the strip of pages */
.stop { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 0 30px; align-items: center; padding: 26px 32px; margin-top: 30px; }
.stop-n { font: 400 clamp(4.6rem, 9vw, 7.4rem)/0.8 var(--fn); color: var(--red); background: var(--well); border: 4px solid; border-color: var(--bevel-in); padding: 10px 14px 4px; text-shadow: 4px 4px 0 #000; }
.stop-part { margin: 0 0 6px; font: 700 0.6rem var(--fl); text-transform: uppercase; letter-spacing: 0.1em; color: var(--yel); }
.stop-t { font: 400 clamp(2.4rem, 5.6vw, 4.4rem)/0.92 var(--fd); text-transform: uppercase; }
.stop-t a { text-decoration: none; background: linear-gradient(#fff2b0 0%, #ffb030 32%, #e04a00 64%, #701000 100%); -webkit-background-clip: text; background-clip: text; color: transparent; filter: drop-shadow(3px 3px 0 #200800); text-shadow: none; }
.stop-b { margin: 12px 0 0; max-width: 64ch; color: var(--fg); font-size: 1.1rem; }
.stop-c { font: 700 0.58rem var(--fl); text-transform: uppercase; letter-spacing: 0.08em; color: var(--yel); text-align: right; }
.stop-c b { display: block; font: 400 3rem/0.9 var(--fn); color: var(--red); text-shadow: 3px 3px 0 #000; }
.stop.compact { grid-template-columns: auto minmax(0, 1fr) auto; padding: 14px 20px; gap: 0 16px; }
.stop { position: relative; }
.stop-side { display: grid; justify-items: end; gap: 12px; }
.stop-chg { padding: 10px 14px; background: linear-gradient(#5a5a5a, #2e2e2e); border: 3px solid; border-color: #9a9a9a #161616 #161616 #9a9a9a; color: var(--ink); font: 700 0.62rem var(--fl); text-transform: uppercase; letter-spacing: 0.08em; cursor: pointer; white-space: nowrap; }
.stop-chg:hover, .stop-chg[aria-expanded="true"] { color: var(--yel); border-color: #161616 #9a9a9a #9a9a9a #161616; }
/* the Change window drops from the button: this section's pages, then the sections of the same part */
.chg-pop { position: absolute; z-index: 40; top: calc(100% + 6px); right: 12px; width: min(560px, calc(100vw - 32px)); max-height: min(70vh, 640px); overflow-y: auto; display: grid; gap: 8px; padding: 14px 16px; background: linear-gradient(#4a4a4a, #262626); border: 3px solid; border-color: var(--bevel); box-shadow: 0 8px 0 rgba(0, 0, 0, 0.5); }
.chg-pop .label { margin: 4px 0 0; }
.chg-pages { display: flex; flex-wrap: wrap; gap: 5px; }
.chg-pages a { padding: 7px 10px 6px; background: var(--well); border: 2px solid #4e4e4e; color: var(--fg); font-size: 0.95rem; line-height: 1.1; text-decoration: none; }
.chg-pages a:hover { border-color: var(--yel); color: var(--yel); }
.chg-pages a.on { background: var(--red-dk); border-color: var(--yel); color: var(--yel); }
.chg-secs { display: grid; grid-template-columns: repeat(auto-fill, minmax(118px, 1fr)); gap: 6px; }
.chg-secs a { display: grid; grid-template-columns: 30px minmax(0, 1fr); gap: 8px; align-items: center; padding: 6px 8px; background: var(--well); border: 2px solid #4e4e4e; color: var(--ink); font-size: 0.92rem; line-height: 1.1; text-decoration: none; }
.chg-secs a:hover { border-color: var(--yel); }
.chg-secs a.on { border-color: var(--yel); background: rgba(240, 192, 32, 0.14); }
.chg-secs .pxi { width: 30px; height: 30px; }
.chg-all { justify-self: start; margin-top: 2px; }
/* Contents in the strip of pages is the little globe */
.subnav a.sn-home { display: grid; place-items: center; padding: 3px 8px; }
.subnav a.sn-home .globe { width: 28px; height: 28px; display: block; }
.subnav a.sn-home:hover .gl-land, .subnav a.sn-home.on .gl-land { animation: globe-spin 4.8s steps(32) infinite; }
.stop.compact .stop-n { font-size: 3rem; padding: 6px 10px 2px; }
.stop.compact .stop-t { font-size: 1.8rem; }
.stop.compact .stop-part { margin-bottom: 4px; }
.subnav { position: sticky; top: var(--mast-h); z-index: 20; margin: 14px 0 0; background: rgba(14, 9, 6, 0.92); border: 3px solid #111; display: flex; align-items: stretch; }
.sn-arr { flex: none; width: 36px; background: linear-gradient(#5a5a5a, #2e2e2e); border: 2px solid; border-color: #8a8a8a #141414 #141414 #8a8a8a; color: var(--yel); font: 400 1rem/1 var(--fn); cursor: pointer; text-shadow: 2px 2px 0 #000; }
.sn-arr:hover { border-color: #141414 #8a8a8a #8a8a8a #141414; color: #fff3b0; }
.subnav-in { flex: 1; min-width: 0; display: flex; gap: 6px; overflow-x: auto; padding: 8px 8px 9px; overscroll-behavior-x: contain; }
.subnav-in::-webkit-scrollbar { height: 11px; }
.subnav-in::-webkit-scrollbar-track { background: repeating-linear-gradient(90deg, #120b07 0 18px, #1c130c 18px 20px); border-top: 2px solid #000; box-shadow: inset 0 -1px 0 #3a3a3a; }
.subnav-in::-webkit-scrollbar-thumb { background: linear-gradient(90deg, transparent calc(50% - 7px), #2a2a2a calc(50% - 7px) calc(50% - 5px), transparent calc(50% - 5px) calc(50% - 1px), #2a2a2a calc(50% - 1px) calc(50% + 1px), transparent calc(50% + 1px) calc(50% + 5px), #2a2a2a calc(50% + 5px) calc(50% + 7px), transparent calc(50% + 7px)), linear-gradient(#c8c8c8, #6a6a6a); border: 2px solid; border-color: #e0e0e0 #2a2a2a #2a2a2a #e0e0e0; }
.subnav-in::-webkit-scrollbar-thumb:hover { background: linear-gradient(90deg, transparent calc(50% - 7px), #6a4a00 calc(50% - 7px) calc(50% - 5px), transparent calc(50% - 5px) calc(50% - 1px), #6a4a00 calc(50% - 1px) calc(50% + 1px), transparent calc(50% + 1px) calc(50% + 5px), #6a4a00 calc(50% + 5px) calc(50% + 7px), transparent calc(50% + 7px)), linear-gradient(#ffe680, #c89000); border-color: #fff0a0 #6a4a00 #6a4a00 #fff0a0; }
.subnav-in::-webkit-scrollbar-button { display: none; }
.subnav a { flex: none; font: 400 0.98rem/1 var(--f); color: var(--fg); text-decoration: none; padding: 9px 13px 8px; white-space: nowrap; background: linear-gradient(#4e4e4e, #2e2e2e); border: 2px solid; border-color: #7a7a7a #141414 #141414 #7a7a7a; }
.subnav a:hover { color: var(--yel); }
.subnav a.on { background: linear-gradient(#8a2400, #3a0800); color: var(--yel); }
.ch-page .block { margin-top: 30px; }
.ch-page .block > header h2 { font-size: clamp(2rem, 4.2vw, 3.2rem); line-height: 0.95; text-transform: uppercase; }
.ch-page .block > header p { font-size: 1.1rem; color: var(--fg); }
.ch-page .block .block > header h2, .block .block > header h2 { font-size: 1.5rem; }
.ch-home .block { margin-top: 30px; }
.ch-all .block { margin-top: 44px; }
.ch-root .block, .ch-root .numcards { display: none; }
.ch-detail .block { margin-top: 26px; }
.ch-index { margin-top: 22px; padding: 10px 24px 18px; }
.toc { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 34px; }
.toc li { border-bottom: 2px solid var(--hair); box-shadow: 0 1px 0 var(--line); }
.toc a { display: grid; grid-template-columns: 4rem minmax(0, 1fr); gap: 2px 12px; padding: 12px 6px 14px; color: var(--fg); text-decoration: none; }
.toc a:hover { background: var(--hover); }
.toc a:hover .toc-t { color: var(--yel); }
.toc-n { font: 400 1.9rem/1 var(--fn); color: var(--red); text-shadow: 2px 2px 0 #000; grid-row: span 2; }
.toc-t { font-size: 1.2rem; color: var(--ink); line-height: 1.15; }
.toc-d { color: var(--mid); font-size: 0.96rem; line-height: 1.35; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.pager { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 18px; margin-top: 44px; }
.pager a { display: grid; gap: 4px; padding: 14px 18px; color: var(--ink); text-decoration: none; font: 400 1.15rem/1.15 var(--fd); background: linear-gradient(#5a5a5a, #2e2e2e); border: 4px solid; border-color: var(--bevel); }
.pager a .label { font-family: var(--fl); }
.pager a.nx { text-align: right; grid-column: 2; }
.pager a:hover { color: var(--yel); border-color: var(--bevel-in); }

/* ------------------------------------------------------------------ the main four: a status bar */
.main4 { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 6px; padding: 6px; margin: 6px 0 10px; background: var(--grit), #6a6a6a; background-blend-mode: overlay; border: 4px solid; border-color: var(--bevel); }
.four-c { display: grid; align-content: start; justify-items: center; text-align: center; gap: 6px; padding: 12px 12px 14px; color: var(--fg); text-decoration: none; position: relative; min-width: 0; background: rgba(0, 0, 0, 0.22); border: 4px solid; border-color: var(--bevel-in); }
.four-c:hover { background: rgba(0, 0, 0, 0.42); }
.four-c:hover .four-l { color: var(--yel); }
.four-i { position: absolute; top: 8px; left: 10px; font: 400 1rem var(--fn); color: rgba(255, 255, 255, 0.35); }
.four-l { font: 700 0.6rem var(--fl); text-transform: uppercase; letter-spacing: 0.06em; color: #f0f0f0; text-shadow: 2px 2px 0 #000; order: 3; }
.four-v { font: 400 clamp(4.2rem, 8vw, 6.2rem)/0.82 var(--fn); color: var(--red); text-shadow: 4px 4px 0 #000; overflow-wrap: anywhere; order: 1; }
.four-v small { font-size: 0.42em; margin-left: 4px; color: var(--yel); }
.four-v .sg { font-family: var(--sym); font-size: 0.74em; }
.main5 { grid-template-columns: repeat(5, minmax(0, 1fr)); }
.main5 .four-v { font-size: clamp(3.4rem, 5.6vw, 5.4rem); }
@media (max-width: 900px) { .main5 .four-c:last-child { grid-column: 1 / -1; } }
.four-v .cz { font-family: "Noto Serif SC", "SimSun", "Songti SC", serif; font-size: 0.66em; font-weight: 700; }
.sign-ic { display: block; width: 48px; height: 48px; flex: none; overflow: visible; }
.four-c .tagx { order: 2; justify-self: center; }
.four-t { font-size: 0.94rem; color: var(--fg); line-height: 1.3; order: 4; }
.four-t b { color: var(--ink); }
.four-t .work { display: block; margin-top: 4px; font-size: 0.86rem; color: var(--mid); font-variant-numeric: tabular-nums; }

/* ------------------------------------------------------------------ good and bad, friendly and unfriendly */
.traits { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 16px; margin: 14px 0; }
.tr { padding: 14px 16px 16px; border: 3px solid; border-left-width: 8px; }
.tr h4 { display: flex; align-items: center; gap: 8px; margin-bottom: 10px; font-size: 0.66rem; }
.tr h4 span { display: inline-grid; place-items: center; width: 22px; height: 22px; font: 400 1.2rem/1 var(--fn); text-shadow: none; }
.tr ul { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 6px; }
.tr li { font-size: 1rem; padding: 3px 9px 2px; line-height: 1.25; background: rgba(0, 0, 0, 0.35); }
.tr.good { background: var(--good-bg); border-color: var(--good); }
.tr.good h4 { color: var(--good); }
.tr.good h4 span { background: var(--good); color: #0c2408; }
.tr.good li { color: var(--good); border: 1px solid rgba(110, 224, 101, 0.4); }
.tr.bad { background: var(--bad-bg); border-color: var(--bad); }
.tr.bad h4 { color: var(--bad); }
.tr.bad h4 span { background: var(--bad); color: #2a0602; }
.tr.bad li { color: var(--bad); border: 1px solid rgba(255, 106, 77, 0.4); }
.gt { color: var(--good); }
.bt { color: var(--bad); }
.meta { margin: 0; }
.meta b { font: 700 0.56rem var(--fl); text-transform: uppercase; letter-spacing: 0.06em; color: var(--yel); margin-right: 10px; }
.meta.fr b { color: var(--good); }
.meta.unfr b { color: var(--bad); }
.role { color: var(--mid); }

/* ------------------------------------------------------------------ hero (reading) and today */
.hero { display: grid; grid-template-columns: minmax(0, 1.45fr) minmax(0, 0.8fr); gap: 44px; align-items: start; padding: 32px 36px; margin-top: 30px; background: var(--rivets), var(--plate); border: 4px solid; border-color: var(--bevel); box-shadow: 0 7px 0 rgba(0, 0, 0, 0.45); }
.hero h1 { font-size: clamp(2.4rem, 5.2vw, 4rem); }
.hero h1 em { font-style: normal; color: inherit; }
.today { border: 3px solid; border-color: var(--bevel-in); background: var(--cell); padding: 14px; display: grid; gap: 8px; }
.today-big { display: grid; place-items: center; background: var(--well); border: 3px solid; border-color: var(--bevel-in); aspect-ratio: 2 / 1; margin: 4px 0; }
.today-big .ink { font-size: 7rem; }
.today-date { color: var(--ink); margin: 0; }
.today-line { margin: 0; color: var(--mid); font-size: 0.96rem; }
.unis { display: flex; gap: 22px; margin: 2px 0; }
.unis div { display: grid; }
.unis dt { font: 700 0.52rem var(--fl); text-transform: uppercase; letter-spacing: 0.06em; color: var(--yel); }
.unis dd { margin: 0; font: 400 1.8rem/1 var(--fn); color: var(--red); }
.moonline { display: flex; gap: 10px; align-items: center; color: var(--mid); font-size: 0.96rem; margin: 0; }
.moon-dark { fill: #222; stroke: var(--mid); stroke-width: 1; }
.moon-lit { fill: #f4f1ea; }
.borntoday { margin-top: 6px; border-top: 2px solid var(--hair); padding-top: 10px; }
.borntoday ul { list-style: none; margin: 6px 0 0; padding: 0; display: grid; gap: 4px; font-size: 1rem; }
.borntoday li span { color: var(--mid); }
.form { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 16px 18px; margin-top: 22px; max-width: 680px; }
.form .wide, .form .actions { grid-column: 1 / -1; }

/* diagrams */
.vortex { display: block; width: 100%; height: auto; }
.vx-ring { fill: none; stroke: rgba(255, 255, 255, 0.18); stroke-width: 1.2; }
.vx-double { fill: none; stroke: var(--mid); stroke-width: 1.3; stroke-linejoin: round; }
.vx-flow { fill: none; stroke: var(--yel); stroke-width: 3; stroke-linecap: square; stroke-dasharray: 3 97; animation: vx-flow 9s linear infinite; }
@keyframes vx-flow { to { stroke-dashoffset: -100; } }
.vx-tri { fill: var(--red); fill-opacity: 0.45; stroke: var(--red); stroke-width: 2; stroke-linejoin: round; }
.vx-path { fill: none; stroke: var(--yel); stroke-width: 3; stroke-linejoin: round; }
.vx-dot { fill: var(--mid); }
.vx-dot.g, .vx-dot.hl { fill: var(--yel); }
.vx-label { font: 400 13px var(--f); fill: var(--mid); }
.vx-label.g { fill: var(--yel); }
.fib-chord { stroke: rgba(255, 255, 255, 0.15); stroke-width: 1; }
.diagram { display: grid; place-items: center; background: var(--cell); border: 3px solid; border-color: var(--bevel-in); padding: 10px; }
.diagram svg { width: 100%; max-width: 330px; height: auto; }
.diagram-row { display: grid; grid-template-columns: minmax(0, 350px) minmax(0, 1fr); gap: 30px; align-items: start; }

/* ------------------------------------------------------------------ forms and buttons */
.field { display: grid; gap: 5px; min-width: 0; }
.field > label, legend { font: 700 0.56rem/1.4 var(--fl); text-transform: uppercase; letter-spacing: 0.06em; color: var(--yel); }
.field small { color: var(--mid); font-size: 0.9rem; }
input, select, textarea { width: 100%; min-width: 0; background: var(--well); color: var(--ink); border: 3px solid; border-color: var(--bevel-in); border-radius: 0; padding: 8px 11px; font: 400 1.08rem var(--f); caret-color: var(--red); text-shadow: 1px 1px 0 #000; }
select { cursor: pointer; }
select option { background: #1c1410; color: var(--ink); }
input[type="date"], input[type="time"] { min-height: 44px; color-scheme: dark; }
input[type="checkbox"] { width: auto; accent-color: var(--yel); }
input::placeholder, textarea::placeholder { color: #806a5a; }
input:focus, select:focus, textarea:focus { outline: none; border-color: var(--yel); box-shadow: 0 0 0 2px rgba(240, 192, 32, 0.4); }
textarea { resize: vertical; }
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 6px; background: linear-gradient(#8a2400, #3a0800); color: var(--yel); border: 3px solid; border-color: #c06030 #160400 #160400 #c06030; border-radius: 0; padding: 9px 16px 8px; font: 700 0.62rem/1.2 var(--fl); text-transform: uppercase; letter-spacing: 0.06em; cursor: pointer; text-decoration: none; text-shadow: 2px 2px 0 #000; }
.btn:hover { color: #fff3b0; border-color: #160400 #c06030 #c06030 #160400; }
.btn.line, .actions .btn:not(:first-child), .presets .btn { background: linear-gradient(#6a6a6a, #383838); color: #ececec; border-color: #9a9a9a #161616 #161616 #9a9a9a; }
.btn.line:hover, .actions .btn:not(:first-child):hover, .presets .btn:hover { color: var(--yel); border-color: #161616 #9a9a9a #9a9a9a #161616; }
.btn.sm { font-size: 0.54rem; padding: 6px 10px 5px; }
.btn.on { background: var(--yel); color: var(--on-yel); text-shadow: none; border-color: #fff0a0 #6a4a00 #6a4a00 #fff0a0; }
.textbtn { background: none; border: 0; padding: 0; font: inherit; color: var(--yel); cursor: pointer; text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 3px; text-align: left; text-shadow: inherit; }
.textbtn:hover { color: #ffe27a; }
.check { display: flex; gap: 8px; align-items: center; font-size: 1rem; }
.actions { display: flex; flex-wrap: wrap; gap: 8px 10px; align-items: center; }
.flag { font-size: 0.96rem; color: var(--mid); }
.inline { display: flex; flex-wrap: wrap; gap: 12px 16px; align-items: flex-end; margin-bottom: 18px; }
.inline .field { flex: 0 1 220px; }
.picks { display: flex; flex-wrap: wrap; gap: 4px; flex-basis: 100%; }
.pick { display: inline-grid; place-items: center; min-width: 46px; height: 46px; padding: 0 10px; background: var(--well); border: 3px solid; border-color: var(--bevel-in); color: var(--red); text-decoration: none; font: 400 1.6rem var(--fn); text-shadow: 2px 2px 0 #000; }
.pick:hover, .pick.on { border-color: var(--yel); color: var(--yel); }
.pick.sm { min-width: 38px; height: 34px; font-size: 1.2rem; }
.tabs { display: flex; flex-wrap: wrap; gap: 4px; margin: 14px 0; }
.tabs button { background: linear-gradient(#5a5a5a, #343434); color: var(--fg); border: 2px solid; border-color: #8a8a8a #141414 #141414 #8a8a8a; padding: 5px 11px 4px; font: 400 0.98rem var(--f); cursor: pointer; text-shadow: 1px 1px 0 #000; }
.tabs button:hover { color: var(--yel); }
.tabs button.on { background: linear-gradient(#8a2400, #3a0800); color: var(--yel); }

/* ------------------------------------------------------------------ inset grids (cells) */
.cells, .bdays, .angels, .syms, .catgrid, .stars4, .pillars, .lore-index, .clist, .outlook, .tattvas, .hexgrid, .aethyrs, .cores { display: grid; gap: 12px; }
.cell, .bday, .angel, .sym, .catcard, .star, .pillar, .lore-item, .citem, .outlook li, .tattvas > div, .hexgrid > div, .aethyrs span, .core { background: var(--cell); border: 3px solid; border-color: var(--bevel-in); min-width: 0; }
a.cell, .catcard, .lore-item, .citem, .core { color: var(--fg); text-decoration: none; }
a.cell:hover, .catcard:hover, .lore-item:hover, .citem:hover, .core:hover { background: var(--hover); border-color: var(--yel); }
.cells { grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); }
.cells.three { grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); margin-top: 12px; }
.cell { display: flex; flex-direction: column; gap: 7px; padding: 16px 18px 18px; }
.cell .label { color: var(--yel); }
.cell-v { font: 400 2.7rem/0.9 var(--fn); color: var(--red); text-shadow: 3px 3px 0 #000; overflow-wrap: anywhere; }
.cell-v small { font: 700 0.2em var(--fl); text-transform: uppercase; letter-spacing: 0.04em; color: var(--yel); margin-left: 6px; vertical-align: middle; text-shadow: 1px 1px 0 #000; }
.cell-v.txt { font: 400 1.25rem/1.2 var(--f); color: var(--ink); text-shadow: 1px 1px 0 #000; }
.cell-t { color: var(--fg); font-size: 0.96rem; line-height: 1.32; }

/* reading */
.cores { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.core { display: grid; align-content: start; gap: 4px; padding: 14px 16px 18px; }
.core .ink { font-size: 4.6rem; margin: 6px 0 2px; }
.core-title { color: var(--ink); font-size: 1.12rem; }
.trail { font-size: 0.86rem; line-height: 1.5; color: var(--mid); overflow-wrap: anywhere; font-variant-numeric: tabular-nums; }
.debt { font: 700 0.52rem var(--fl); text-transform: uppercase; letter-spacing: 0.05em; color: var(--bad); border: 2px solid var(--bad); padding: 3px 6px; justify-self: start; }
.reads { border-top: 2px solid var(--hair); }
.read { border-bottom: 2px solid var(--hair); box-shadow: 0 1px 0 var(--line); }
.read summary { display: grid; grid-template-columns: 4.6rem minmax(0, 1fr) auto; align-items: center; gap: 12px; padding: 10px 6px; cursor: pointer; list-style: none; }
.read summary::-webkit-details-marker { display: none; }
.read summary::after { content: "+"; font: 400 2rem/1 var(--fn); color: var(--yel); width: 1.2em; text-align: center; }
.read[open] summary::after { content: "−"; }
.read summary:hover { background: var(--hover); }
.read summary .ink { font-size: 3rem; }
.read summary .ink-sub { display: none; }
.read-name { color: var(--ink); font-size: 1.15rem; }
.read-name span { display: block; font: 700 0.52rem var(--fl); text-transform: uppercase; letter-spacing: 0.06em; color: var(--yel); }
.read-body { padding: 0 6px 20px 4.6rem; display: grid; gap: 10px; max-width: 96ch; }
.read-body p { margin: 0; }

.numlist { list-style: none; padding: 0; margin: 10px 0; display: grid; border-top: 2px solid var(--hair); }
.numlist li { position: relative; padding: 14px 0 14px 3.6rem; border-bottom: 2px solid var(--hair); box-shadow: 0 1px 0 var(--line); }
.li-n { position: absolute; left: 0; top: 6px; min-width: 2.8rem; text-align: left; color: var(--red); font: 400 1.8rem/1 var(--fn); text-shadow: 2px 2px 0 #000; }
.facts { padding-left: 1.2em; display: grid; gap: 6px; margin: 8px 0; }
.facts li::marker { color: var(--red); }
.ticks { list-style: none; margin: 0; padding: 0; display: grid; border-top: 2px solid var(--hair); }
.ticks li { display: flex; gap: 12px; align-items: baseline; padding: 8px 0; border-bottom: 2px solid var(--hair); }
.ticks li > span:first-child { width: 2em; flex: none; color: var(--faint); }
.ticks li.yes { color: var(--ink); }
.ticks li.yes > span:first-child { color: var(--on-yel); background: var(--yel); text-align: center; text-shadow: none; }
.ticks li.no { color: var(--mid); }

.namechart { display: grid; gap: 12px; }
.namerow { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 8px 18px; }
.letters { display: flex; flex-wrap: wrap; gap: 3px; }
.lt { display: grid; justify-items: center; min-width: 38px; padding: 6px 4px 5px; background: var(--well); border: 2px solid; border-color: var(--bevel-in); line-height: 1.1; }
.lt b { font: 400 1.5rem var(--fn); color: var(--ink); }
.lt i { font: 400 1.1rem var(--fn); font-style: normal; color: var(--yel); }
.lt em { font-style: normal; font-size: 0.8rem; color: var(--faint); }
.lt.v { border-color: var(--red); }
.lt.v b { color: var(--red); }
.namesum { display: grid; font-size: 0.96rem; }
.bars { display: grid; gap: 7px; margin-top: 10px; }
.bar-row { display: grid; grid-template-columns: minmax(26px, auto) minmax(0, 1fr) minmax(54px, auto); align-items: center; gap: 10px; }
.bar-k { font: 400 1.2rem var(--fn); color: var(--ink); }
.bar-k.wide { width: 96px; font: 400 1rem var(--f); }
.bar { height: 14px; background: var(--well); border: 2px solid; border-color: var(--bevel-in); }
.bar > span { display: block; height: 100%; background: linear-gradient(#b8b8b8, #6a6a6a); min-width: 2px; }
.bar-row.peak .bar > span { background: linear-gradient(#ff7040, var(--red-dk)); }
.bar-row.missing .bar-k, .bar-row.missing .bar-v { color: var(--faint); text-decoration: line-through; }
.bar-v { font-size: 0.86rem; color: var(--mid); white-space: nowrap; }

.grids { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 28px; align-items: start; }
.grids figure { margin: 0; }
.grids figcaption { margin-bottom: 8px; }
.grid3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); max-width: 240px; gap: 4px; }
.g3 { aspect-ratio: 1; background: var(--well); border: 3px solid; border-color: var(--bevel-in); display: grid; place-items: center; position: relative; }
.g3-k { position: absolute; top: 2px; left: 6px; font-size: 0.8rem; color: var(--faint); }
.g3-v { font: 400 1.6rem var(--fn); color: var(--yel); overflow-wrap: anywhere; text-align: center; padding: 0 4px; line-height: 1.05; text-shadow: 2px 2px 0 #000; }
.g3.empty { background: repeating-linear-gradient(135deg, var(--well) 0 6px, #2a1a10 6px 8px); }
.arrowlist { display: grid; gap: 8px; padding-left: 1.2em; margin: 0 0 10px; }
.arrowlist .good { color: var(--good); }
.arrowlist .bad { color: var(--bad); }

.pbar-wrap { position: relative; margin: 8px 0 32px; }
.pbar { display: flex; gap: 4px; }
.pseg { flex-basis: 0; min-width: 0; padding: 10px 12px; background: var(--cell); border: 3px solid; border-color: var(--bevel-in); display: flex; flex-direction: column; gap: 2px; }
.pseg.now { border-color: var(--yel); background: var(--hover); }
.pseg-a { font: 700 0.5rem var(--fl); color: var(--yel); text-transform: uppercase; }
.pseg-n { color: var(--ink); font-size: 1.1rem; }
.pseg-c { font-size: 0.9rem; color: var(--mid); }
.pbar-age { position: absolute; top: calc(100% + 4px); transform: translateX(-50%); font: 700 0.5rem var(--fl); color: var(--yel); white-space: nowrap; }
.pbar-age::before { content: "▲ "; }
.outlook { list-style: none; padding: 0; margin: 8px 0; grid-template-columns: repeat(auto-fill, minmax(108px, 1fr)); }
.outlook li { padding: 10px 12px; display: grid; gap: 2px; }
.outlook li.now { border-color: var(--yel); background: var(--hover); }
.oy { font: 700 0.5rem var(--fl); color: var(--yel); }
.ov { font: 400 2.4rem/0.9 var(--fn); color: var(--red); text-shadow: 2px 2px 0 #000; }
.ot { font-size: 0.88rem; color: var(--mid); line-height: 1.25; }

/* ------------------------------------------------------------------ tables */
.tw { overflow-x: auto; margin: 14px 0; background: var(--cell); border: 3px solid; border-color: var(--bevel-in); box-shadow: 0 4px 0 rgba(0, 0, 0, 0.3); }
table { border-collapse: collapse; width: 100%; font-size: 1rem; font-variant-numeric: tabular-nums; }
th, td { padding: 11px 14px; text-align: left; border-bottom: 2px solid var(--hair); vertical-align: top; line-height: 1.4; }
thead th { padding-block: 12px; font: 700 0.52rem/1.5 var(--fl); text-transform: uppercase; letter-spacing: 0.05em; color: var(--yel); white-space: nowrap; background: linear-gradient(#262626, #161616); border-bottom: 3px solid #0b0b0b; box-shadow: inset 0 -1px 0 #3c3c3c; }
tbody th { font-weight: 400; color: var(--ink); }
tbody td { color: var(--fg); }
tbody tr:nth-child(even) th, tbody tr:nth-child(even) td { background: rgba(255, 255, 255, 0.035); }
/* a numbered row: the number in large pixel type, the name beside it a little brighter */
tbody th.num { width: 1%; padding-inline: 16px 10px; font: 400 1.6rem/0.9 var(--fn); color: var(--yel); text-shadow: 2px 2px 0 #000; text-align: center; white-space: nowrap; }
tbody th.num + td { color: var(--ink); font-size: 1.08rem; }
/* calmer reading: comfortable line length and spacing for running text everywhere */
.block p, .block li, .cell-t, .defs dd, .numlist li { line-height: 1.55; }
.block > p, .block > div > p, .two p, .box p { max-width: 74ch; }
.cell-t { font-size: 0.98rem; color: var(--fg); }
.cell .label { letter-spacing: 0.08em; }
tbody tr:hover th, tbody tr:hover td { background: var(--hover); }
tr.on th, tr.on td { background: rgba(240, 192, 32, 0.22); box-shadow: inset 0 0 0 0 transparent; }
tr.on th:first-child { box-shadow: inset 4px 0 0 var(--yel); }
.wide-table { min-width: 960px; }
.gv { font: 400 1.5rem var(--fn); color: var(--red); text-shadow: 2px 2px 0 #000; }
.tag { font-size: 0.9rem; color: var(--mid); }
.kind { font: 700 0.5rem var(--fl); text-transform: uppercase; letter-spacing: 0.04em; white-space: nowrap; padding: 3px 6px; text-shadow: none; }
.kind.good { color: var(--good); background: var(--good-bg); }
.kind.warning { color: var(--bad); background: var(--bad-bg); }
.kind.mixed { color: var(--mid); background: rgba(0, 0, 0, 0.35); }
.rank { color: var(--mid); font-variant-numeric: tabular-nums; white-space: nowrap; }

/* matrix & scores: green is friendly, red is unfriendly */
.mtx { overflow-x: auto; }
.mtx .tw { background: none; border: 0; }
table.matrix { width: auto; }
table.matrix th, table.matrix td { padding: 1px; text-align: center; border: 0; background: none !important; }
.mx-h { font: 400 1.05rem var(--fn); color: var(--yel); }
.mx { width: 36px; height: 32px; border: 2px solid #111; font: 400 1.1rem var(--fn); cursor: pointer; background: #2a2a2a; color: var(--mid); text-shadow: none; }
.mx.s5 { background: #2a9a24; color: #eaffe6; }
.mx.s4 { background: #1d4d1a; color: var(--good); }
.mx.s3 { background: #2a2a2a; color: var(--mid); }
.mx.s2 { background: #5a1a10; color: var(--bad); }
.mx.s1 { background: #c22a10; color: #fff0ea; }
.mx:hover, .mx.on { outline: 3px solid var(--yel); outline-offset: 0; }
.score { font: 700 0.5rem var(--fl); text-transform: uppercase; letter-spacing: 0.04em; padding: 3px 7px; white-space: nowrap; color: var(--mid); border: 2px solid #111; background: #2a2a2a; text-shadow: none; }
.score.s5 { background: #2a9a24; color: #eaffe6; }
.score.s4 { background: #1d4d1a; color: var(--good); }
.score.s2 { background: #5a1a10; color: var(--bad); }
.score.s1 { background: #c22a10; color: #fff0ea; }
.legend { display: flex; flex-wrap: wrap; gap: 6px; margin: 10px 0; }
.pair { min-height: 4rem; }
.pair h3 { display: flex; flex-wrap: wrap; gap: 10px; align-items: baseline; }
.dr { display: inline-grid; place-items: center; width: 32px; height: 32px; font: 400 1.1rem var(--fn); background: var(--well); border: 2px solid #111; color: var(--faint); }
.dr.tri { border-color: var(--mid); color: var(--ink); }
.dr.r9 { background: var(--yel); color: var(--on-yel); border-color: var(--yel); text-shadow: none; }

/* ------------------------------------------------------------------ numbers page */
.numcards { display: grid; margin-top: 10px; }
.numcard { padding: 36px 40px 40px; margin-top: 30px; display: grid; gap: 28px; }
.numcard-head { display: flex; gap: 24px; align-items: center; margin-bottom: 18px; padding-bottom: 14px; border-bottom: 2px solid var(--hair); box-shadow: 0 1px 0 var(--line); }
.numcard-head .ink { font-size: clamp(6rem, 15vw, 10.5rem); background: var(--well); border: 4px solid; border-color: var(--bevel-in); padding: 10px 16px 0; }
.numcard-head h2 { font: 400 clamp(1.8rem, 3.6vw, 2.8rem)/0.98 var(--fd); text-transform: uppercase; background: linear-gradient(#fff2b0, #ffb030 45%, #e04a00); -webkit-background-clip: text; background-clip: text; color: transparent; text-shadow: none; filter: drop-shadow(2px 2px 0 #000); }
.numcard-head p { margin: 6px 0 0; color: var(--fg); }
.numcard-body { display: grid; grid-template-columns: minmax(0, 1.55fr) minmax(0, 1fr); gap: 30px; }
.numcard-text { display: grid; gap: 12px; align-content: start; }
.numcard-text p { margin: 0; }
.corr { margin: 0; display: grid; align-content: start; background: var(--cell); border: 3px solid; border-color: var(--bevel-in); padding: 4px 12px; }
.corr > div { display: grid; grid-template-columns: 8.6rem minmax(0, 1fr); gap: 10px; padding: 6px 0; border-bottom: 2px solid var(--hair); }
.corr > div:last-child { border-bottom: 0; }
.corr dt { font: 700 0.5rem/2.2 var(--fl); text-transform: uppercase; letter-spacing: 0.05em; color: var(--yel); }
.corr dd { margin: 0; font-size: 1rem; }
.bdays { grid-template-columns: repeat(auto-fill, minmax(290px, 1fr)); }
.bday { display: grid; grid-template-columns: 3.2rem minmax(0, 1fr); gap: 14px; padding: 16px 18px; color: var(--fg); text-decoration: none; }
a.bday:hover { border-color: var(--yel); background: var(--hover); }
.bday-x { display: grid; gap: 6px; font-size: 0.98rem; }
.bday-r { justify-self: start; font: 700 0.5rem/1 var(--fl); text-transform: uppercase; letter-spacing: 0.04em; color: var(--on-yel); background: var(--yel); padding: 3px 6px; text-shadow: none; }
.bday-n { font: 400 2.5rem/0.9 var(--fn); color: var(--red); text-shadow: 2px 2px 0 #000; }
.bday p { margin: 0; font-size: 0.96rem; color: var(--fg); }
.defs { display: grid; margin: 12px 0; border-top: 2px solid var(--hair); }
.defs > div { display: grid; grid-template-columns: minmax(110px, 13rem) minmax(0, 1fr); gap: 22px; padding: 13px 0; border-bottom: 2px solid var(--hair); box-shadow: 0 1px 0 var(--line); }
.defs dt { color: var(--yel); }
.defs dd { margin: 0; }
.angels { grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); }
.angel { padding: 12px 14px; }
.angel-n { font: 400 2.5rem/1 var(--fn); color: var(--red); letter-spacing: 0.04em; text-shadow: 2px 2px 0 #000; }
.angel p { margin: 4px 0 0; color: var(--fg); font-size: 0.96rem; }
.big-letter { font: 400 1.7rem var(--fn); color: var(--yel); }

/* ------------------------------------------------------------------ people, brands, nations */
.filters { display: grid; grid-template-columns: minmax(0, 2fr) repeat(4, minmax(0, 1fr)); gap: 12px 14px; align-items: end; margin-bottom: 14px; padding: 14px 16px; background: var(--cell); border: 3px solid; border-color: var(--bevel-in); }
.count { font: 700 0.58rem var(--fl); text-transform: uppercase; letter-spacing: 0.05em; color: var(--yel); margin: 18px 0 8px; }
.plist { background: var(--cell); border: 3px solid; border-color: var(--bevel-in); }
.prow { display: grid; grid-template-columns: 3.6rem minmax(0, 1fr) 9.5rem 4.6rem 6.4rem; gap: 14px; align-items: center; padding: 10px 14px; border-bottom: 2px solid var(--hair); color: var(--fg); text-decoration: none; }
.prow:last-child { border-bottom: 0; }
.prow.norank { grid-template-columns: minmax(0, 1fr) 9.5rem 4.6rem 6.4rem; }
.prow:hover { background: var(--hover); box-shadow: inset 4px 0 0 var(--yel); }
.prow:hover .prow-name { color: var(--yel); }
.prow-rank { font: 400 1.4rem var(--fn); color: var(--faint); text-align: right; }
.prow-name { color: var(--ink); min-width: 0; font-size: 1.1rem; }
.prow-name small { display: block; color: var(--mid); font-size: 0.92rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.prow-date { font-size: 0.96rem; color: var(--mid); font-variant-numeric: tabular-nums; }
.prow-lp { display: grid; justify-items: center; font: 400 2.2rem/0.85 var(--fn); color: var(--red); text-shadow: 2px 2px 0 #000; }
.prow-lp i { font: 700 0.42rem/1 var(--fl); font-style: normal; text-transform: uppercase; letter-spacing: 0.03em; margin-top: 4px; background: var(--yel); color: var(--on-yel); padding: 2px 4px; white-space: nowrap; text-shadow: none; }
.prow-lp.none { color: var(--faint); }
.prow-lp.odd { color: var(--yel); }
.prow-sign { font-size: 0.96rem; color: var(--mid); }
.detail-head { display: grid; grid-template-columns: minmax(0, 1fr); gap: 14px; padding: 20px 26px 22px; margin-top: 22px; }
.detail-head h1 { font-size: clamp(2.4rem, 6vw, 4.6rem); line-height: 0.92; background: linear-gradient(#fff2b0, #ffb030 40%, #e04a00 70%, #701000); -webkit-background-clip: text; background-clip: text; color: transparent; text-shadow: none; filter: drop-shadow(3px 3px 0 #200800); }
.detail-head .lede { margin: 8px 0 0; color: var(--fg); }
.detail-head .label a { text-decoration: none; }
/* ------------------------------------------------------------------ the static guide pages (/life-path-number/7/ …), which run without the app script */
.sx-nav { display: flex; flex-wrap: wrap; gap: 2px 16px; margin-left: auto; }
.sx-nav a { padding: 6px 0; font: 700 0.56rem/1.2 var(--fl); text-transform: uppercase; letter-spacing: 0.06em; color: var(--fg); text-decoration: none; }
.sx-nav a:hover, .sx-nav a[aria-current] { color: var(--yel); }
.sx-open { flex: none; }
.sx-crumbs ol { display: flex; flex-wrap: wrap; gap: 4px; margin: 18px 0 0; padding: 0; list-style: none; font-size: 0.85rem; color: var(--mid); }
.sx-crumbs li + li::before { content: "›"; margin-right: 4px; color: var(--mid); }
.sx-crumbs a { color: var(--fg); }
.sx-hero { display: grid; gap: 10px; margin-top: 12px; padding: 26px 32px 28px; }
.sx-hero h1, .sx-hero .lede, .sx-hero .label { margin: 0; }
.sx-hero .lede { max-width: 80ch; }
.sx-cta { display: flex; flex-wrap: wrap; gap: 10px; margin: 6px 0 0; }
.sx-links { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 8px; margin: 0; padding: 0; list-style: none; }
.sx-links a { display: grid; align-content: start; gap: 3px; height: 100%; padding: 10px 12px; background: var(--well); border: 2px solid #4e4e4e; color: var(--fg); text-decoration: none; }
.sx-links a:hover { border-color: var(--yel); }
.sx-links b { color: var(--ink); font-weight: 400; }
.sx-links small { color: var(--mid); font-size: 0.82rem; line-height: 1.35; }
.sx-faq details { margin: 0 0 8px; background: var(--well); border: 2px solid #4e4e4e; }
.sx-faq details[open] { border-color: var(--yel); }
.sx-faq summary { padding: 10px 14px; color: var(--ink); cursor: pointer; }
.sx-faq details p { margin: 0; padding: 0 14px 12px; max-width: 80ch; }
.sx-big { margin: 0; font: 400 5rem/1 var(--fn); color: var(--red); text-shadow: 3px 3px 0 #000; }
.sx-big small { font-size: 0.4em; color: var(--mid); }
.sx-mx table.matrix a { display: block; min-width: 34px; padding: 4px 2px; font: 400 1.05rem var(--fn); color: var(--fg); text-align: center; text-decoration: none; background: var(--well); border: 1px solid #2a2a2a; }
.sx-mx table.matrix a:hover { color: var(--yel); }
.sx-az { columns: 4 200px; column-gap: 18px; margin: 0; padding: 0; list-style: none; font-size: 0.9rem; }
.sx-az a { color: var(--fg); text-decoration: none; }
.sx-az a:hover { color: var(--yel); }
.sx-foot { grid-template-columns: minmax(0, 1fr) minmax(0, 2fr); }
.sx-foot-links { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 18px; }
.sx-foot-links h4 { margin: 0 0 8px; }
.sx-foot-links ul { display: grid; gap: 5px; margin: 0; padding: 0; list-style: none; font-size: 0.88rem; }
.sx-foot-links a { color: var(--fg); text-decoration: none; }
.sx-foot-links a:hover { color: var(--yel); }
.sx-g { font-family: "Noto Sans Symbols", "Noto Sans Symbols 2", sans-serif; }
.sx-hero h1 .sx-g { font-size: 0.8em; }
.sx-sky .actions { display: flex; gap: 10px; }
.sx-sky-out { margin-top: 20px; max-width: 760px; }
.sx-sky-out .sx-big { font-size: clamp(2.4rem, 9vw, 4rem); overflow-wrap: anywhere; }
.sx-sky-out td small { color: var(--mid); }
@media (max-width: 900px) {
  .sx-nav { display: none; }
  .sx-foot, .sx-foot-links { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 640px) {
  .sx-hero { padding: 20px 16px 22px; }
  .sx-big { font-size: 3.6rem; }
  .sx-foot { grid-template-columns: minmax(0, 1fr); }
}

/* the rest of a detail page, on its own panel */
.item-more { margin-top: 22px; padding: 24px 30px 28px; }
.item-more > :first-child, .item-more > .two:first-child > div > h3:first-child { margin-top: 0; }
.item-more > .two > div > h3:first-child { border-top: 0; box-shadow: none; padding-top: 0; }
.item-more .note { margin-bottom: 0; }
.back { display: inline-block; margin-top: 22px; font: 700 0.58rem var(--fl); text-transform: uppercase; letter-spacing: 0.06em; color: #e2e2e2; text-decoration: none; padding: 7px 11px 6px; background: linear-gradient(#6a6a6a, #383838); border: 3px solid; border-color: #9a9a9a #161616 #161616 #9a9a9a; text-shadow: 2px 2px 0 #000; }
.back:hover { color: var(--yel); }
.cc { display: inline-block; font: 700 0.48rem var(--fl); border: 2px solid var(--mid); padding: 2px 4px 1px; margin-right: 6px; color: var(--ink); vertical-align: 2px; text-shadow: none; }
.region h3 { margin-top: 24px; }
.clist { grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); }
.citem { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 0 10px; padding: 9px 12px; }
.citem b { color: var(--ink); }
.citem small { grid-column: 1; font-size: 0.88rem; color: var(--mid); }
.citem .n { grid-row: 1 / span 2; grid-column: 2; align-self: center; font: 400 1.9rem var(--fn); color: var(--red); text-shadow: 2px 2px 0 #000; }
.catgrid { grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); margin: 20px 0; }
.catcard { display: grid; gap: 6px; padding: 12px 14px 14px; }
.cat-h { display: flex; justify-content: space-between; gap: 10px; align-items: baseline; }
.cat-h b { color: var(--ink); font: 400 1.05rem/1.1 var(--fd); text-transform: uppercase; }
.cat-h span { font: 400 1.6rem var(--fn); color: var(--red); font-variant-numeric: tabular-nums; text-shadow: 2px 2px 0 #000; }
.cat-top { color: var(--mid); font-size: 0.94rem; overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }

.explore-head { display: flex; flex-wrap: wrap; gap: 8px 26px; align-items: flex-end; margin: 22px 0 16px; }
.explore-head .ink { font-size: clamp(5rem, 14vw, 9rem); overflow-wrap: anywhere; }
.explore-head > div { min-width: 0; }
.maya { display: flex; flex-wrap: wrap; gap: 6px; align-items: flex-end; margin: 6px 0 0; }
.maya-d { display: inline-flex; flex-direction: column; align-items: center; justify-content: flex-end; gap: 3px; min-width: 30px; min-height: 28px; padding: 4px; border: 2px solid var(--mid); }
.maya-dots { font-size: 7px; letter-spacing: 2px; color: var(--yel); line-height: 1; }
.maya-bar { display: block; width: 22px; height: 4px; background: var(--yel); }
.maya-shell { color: var(--mid); }
.lore-index { grid-template-columns: repeat(auto-fill, minmax(176px, 1fr)); margin-top: 14px; gap: 4px; }
.lore-item { display: flex; gap: 10px; align-items: baseline; padding: 6px 10px; }
.lore-item .n { font: 400 1.5rem var(--fn); color: var(--red); }
.lore-item span:last-child { font-size: 0.92rem; color: var(--mid); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* symbols */
.syms { grid-template-columns: repeat(auto-fill, minmax(290px, 1fr)); }
.sym { display: grid; grid-template-columns: 3.8rem minmax(0, 1fr); gap: 4px 14px; padding: 12px 14px; align-content: start; }
.sym-g { grid-row: span 3; font-family: var(--sym); font-size: 2.2rem; line-height: 1; color: var(--yel); text-align: center; display: grid; place-items: center; width: 3.6rem; height: 3.6rem; background: var(--well); border: 3px solid; border-color: var(--bevel-in); text-shadow: none; }
.sym-g.none { font-size: 0.8rem; color: var(--faint); }
.sym-g.flip { transform: scaleX(-1); }
.sym-g svg { overflow: visible; width: 40px; height: 40px; }
.sym-g .g-sym, .g-sym { font-family: var(--sym); }
.sym-g .g-heb { font-family: "SBL Hebrew", "Noto Serif Hebrew", "Times New Roman", serif; }
.sym-n { color: var(--ink); font-size: 1.08rem; }
.sym-t { font-size: 0.96rem; color: var(--fg); }
.sym-x { font: 700 0.5rem var(--fl); color: var(--yel); text-transform: uppercase; letter-spacing: 0.05em; }
.sym.hit { border-color: var(--yel); background: var(--hover); }

/* astrology and the sky */
.pillars { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.pillar { padding: 12px 14px; display: grid; gap: 4px; justify-items: start; }
.pillar-cn { font-size: 2.6rem; line-height: 1.1; color: var(--yel); font-family: "Noto Serif SC", "SimSun", "Songti SC", serif; }
.pillar.dm { border-color: var(--yel); background: var(--hover); }
.kameas { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 26px 28px; }
.kamea { margin: 0; display: grid; gap: 8px; align-content: start; min-width: 0; }
.kamea figcaption { color: var(--ink); font-size: 1.08rem; }
.kamea figcaption span { font-family: var(--sym); color: var(--yel); }
.kgrid { display: grid; grid-template-columns: repeat(var(--n), minmax(0, 1fr)); gap: 2px; background: #111; border: 3px solid; border-color: var(--bevel-in); }
.kgrid span { aspect-ratio: 1; display: grid; place-items: center; font: 400 0.92rem var(--fn); color: var(--ink); background: var(--well); }
.kamea p { margin: 0; font-size: 0.94rem; }
.cal-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; max-width: 780px; }
.cal-head h3 { margin: 0; border: 0; padding: 0; box-shadow: none; }
.calgrid { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 3px; max-width: 780px; margin-top: 12px; }
.cw { font: 700 0.48rem var(--fl); text-transform: uppercase; letter-spacing: 0.05em; text-align: center; padding: 5px 0; color: var(--yel); }
.cday { min-height: 64px; padding: 4px 6px; display: grid; grid-template-rows: auto 1fr auto; background: var(--cell); border: 2px solid; border-color: var(--bevel-in); min-width: 0; }
.cday.blank { background: transparent; border-color: transparent; }
.cday.today { border-color: var(--yel); background: var(--hover); }
.cd { font-size: 0.82rem; color: var(--mid); }
.pd { font: 400 2rem/1 var(--fn); color: var(--red); text-align: center; align-self: center; text-shadow: 2px 2px 0 #000; }
.ud { font-size: 0.72rem; color: var(--faint); text-align: right; }
.stars4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.star { padding: 14px 16px 18px; display: grid; gap: 6px; align-content: start; }
.star .ink { font-size: 5.6rem; }
.star h3 { margin: 4px 0 0; border: 0; padding: 0; box-shadow: none; }
.star p { margin: 0; font-size: 0.98rem; }
.tree-row { display: grid; grid-template-columns: minmax(0, 320px) minmax(0, 1fr); gap: 30px; align-items: start; }
.tree { display: block; width: 100%; max-width: 320px; height: auto; margin: 0 auto; }
.tree-path { stroke: rgba(255, 255, 255, 0.2); stroke-width: 1.5; }
.tree-letter circle { fill: #2a2a2a; stroke: rgba(255, 255, 255, 0.25); }
.tree-letter text { font-size: 10px; fill: var(--mid); font-family: "Times New Roman", serif; }
.tree-node { cursor: pointer; outline: none; }
.tree-node circle { fill: #1a1a1a; stroke: var(--yel); stroke-width: 2; }
.tree-node:hover circle, .tree-node.on circle { fill: var(--red-dk); }
.tree-node:hover text, .tree-node.on text { fill: var(--yel); }
.tree-node:focus-visible circle { stroke-width: 3.5; }
.tree-n { font: 400 19px var(--fn); fill: var(--ink); }
.tree-name { font: 400 8.5px var(--f); fill: var(--mid); }
.tree-daath { fill: none; stroke: rgba(255, 255, 255, 0.25); stroke-dasharray: 3 3; }
.tetractys { width: 190px; height: auto; }
.tetractys circle { fill: var(--red); }
.heptagram { width: 100%; max-width: 310px; height: auto; }
.hept-ring { fill: none; stroke: rgba(255, 255, 255, 0.2); stroke-width: 1; }
.hept-star { fill: none; stroke: var(--yel); stroke-width: 2; stroke-linejoin: round; }
.hept-glyph { font-family: var(--sym); font-size: 19px; fill: var(--ink); }
.hept-day { font: 400 10px var(--f); fill: var(--mid); text-transform: uppercase; letter-spacing: 0.06em; }

/* ------------------------------------------------------------------ leaderboards */
/* the list filters: a name box and the order on top, then rows of buttons to press */
.c-form { display: grid; gap: 12px; margin-bottom: 14px; padding: 16px 18px; background: var(--cell); border: 3px solid; border-color: var(--bevel-in); }
.cf-top { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 12px 18px; align-items: end; }
.cf-top .field > label, .cf-sel .field > label { margin-bottom: 1px; }
/* the name box with the Settings switch beside it; the order and filters fold out below */
.cf-qrow { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 8px; }
.cf-opt { display: inline-flex; align-items: center; gap: 8px; padding: 0 14px; background: var(--well); border: 3px solid; border-color: var(--bevel-in); color: var(--fg); font: 700 0.56rem var(--fl); text-transform: uppercase; letter-spacing: 0.06em; cursor: pointer; }
.cf-opt .pxi { width: 22px; height: 22px; }
.cf-opt:hover, .cf-opt:focus-visible { border-color: var(--yel); color: var(--yel); }
.cf-opt.on { background: var(--red-dk); border-color: var(--yel); color: var(--yel); }
.cf-opts { display: grid; gap: 12px; padding-top: 4px; border-top: 2px solid var(--hair); }
.cf-opts[hidden] { display: none; }
.cf-row { display: grid; grid-template-columns: 7.4rem minmax(0, 1fr); gap: 10px; align-items: center; }
.cf-l { font: 700 0.56rem/1.4 var(--fl); text-transform: uppercase; letter-spacing: 0.06em; color: var(--yel); }
.pills, .seg { display: flex; flex-wrap: wrap; gap: 5px; }
.pill { min-width: 38px; padding: 6px 9px; background: var(--well); border: 2px solid #4e4e4e; color: var(--ink); font: 400 1.05rem/1 var(--f); cursor: pointer; text-shadow: 1px 1px 0 #000; display: inline-flex; align-items: center; justify-content: center; gap: 5px; }
.pill:hover { border-color: var(--yel); color: var(--yel); }
.pill.on { background: var(--red-dk); border-color: var(--yel); color: var(--yel); }
.pill.any { font: 700 0.55rem var(--fl); text-transform: uppercase; letter-spacing: 0.05em; }
.pill.mas { color: var(--yel); border-color: #6a5410; }
.pill.hid { color: var(--yel); border-style: dashed; border-color: #6a5410; }
.pill.sg .sym-font { font-size: 1.1rem; color: var(--yel); }
.pill.sg .pl-t { font-size: 0.85rem; }
.seg .pill { font: 700 0.56rem var(--fl); text-transform: uppercase; letter-spacing: 0.04em; padding: 9px 10px; }
.cf-sel { display: flex; flex-wrap: wrap; gap: 12px 16px; }
.cf-sel .field { flex: 0 1 200px; }
/* World search: a full window over the page */
body.ws-open { overflow: hidden; }
.ws { position: fixed; inset: 0; z-index: 90; display: flex; justify-content: center; align-items: flex-start; padding: max(16px, env(safe-area-inset-top, 0px)) max(16px, env(safe-area-inset-right, 0px)) 16px max(16px, env(safe-area-inset-left, 0px)); background: rgba(6, 3, 2, 0.8); overflow-y: auto; }
.ws-panel { width: min(920px, 100%); margin-top: 4vh; display: grid; gap: 14px; padding: 20px 22px 16px; background: var(--grit), linear-gradient(135deg, #5a5a5a, #2c2c2c); background-blend-mode: overlay, normal; border: 4px solid; border-color: var(--bevel); box-shadow: 0 12px 0 rgba(0, 0, 0, 0.55); }
.ws-head { display: grid; grid-template-columns: 64px minmax(0, 1fr) auto; gap: 16px; align-items: center; }
.ws-head .globe { width: 64px; height: 64px; filter: drop-shadow(3px 3px 0 #000); }
.ws-head .gl-land { animation: globe-spin 4.8s steps(32) infinite; }
.ws-head h2 { margin: 0; border: 0; padding: 0; box-shadow: none; font: 400 2rem/1 var(--fd); color: var(--ink); text-transform: uppercase; }
.ws-head p { margin: 6px 0 0; color: var(--fg); font-size: 0.98rem; }
.ws-x { width: 42px; height: 42px; align-self: start; background: var(--well); border: 3px solid; border-color: var(--bevel-in); color: var(--ink); font: 400 1.8rem/1 var(--fn); cursor: pointer; }
.ws-x:hover { color: var(--yel); border-color: var(--yel); }
.ws-in input { width: 100%; padding: 14px 16px; font: 400 1.6rem var(--f); color: var(--red); background: var(--well); border: 4px solid; border-color: var(--bevel-in); text-shadow: 1px 1px 0 #000; }
.ws-in input:focus { outline: 3px solid var(--yel); outline-offset: 0; }
.ws-tabs { display: flex; flex-wrap: wrap; gap: 6px; }
.ws-tabs button { display: inline-flex; gap: 8px; align-items: center; padding: 8px 12px; background: var(--well); border: 2px solid #4e4e4e; color: var(--fg); font: 700 0.56rem var(--fl); text-transform: uppercase; letter-spacing: 0.05em; cursor: pointer; }
.ws-tabs button i { font: 400 1rem var(--fn); font-style: normal; color: var(--red); }
.ws-tabs button:hover { border-color: var(--yel); color: var(--yel); }
.ws-tabs button.on { background: var(--red-dk); border-color: var(--yel); color: var(--yel); }
.ws-tabs button.on i { color: var(--yel); }
.ws-out { max-height: min(60vh, 640px); overflow-y: auto; background: rgba(0, 0, 0, 0.3); border: 3px solid; border-color: var(--bevel-in); }
.ws-list { list-style: none; margin: 0; padding: 0; }
.ws-list a { display: grid; grid-template-columns: 7.5rem minmax(0, 1fr) auto; grid-template-areas: "type name lp" "type sub lp"; gap: 2px 14px; align-items: center; padding: 10px 14px; border-bottom: 2px solid var(--hair); color: var(--fg); text-decoration: none; }
.ws-list a:hover, .ws-list a.on { background: var(--hover); box-shadow: inset 4px 0 0 var(--yel); }
.ws-type { grid-area: type; font: 700 0.5rem var(--fl); text-transform: uppercase; letter-spacing: 0.06em; color: var(--yel); }
.ws-name { grid-area: name; font: 400 1.2rem/1.15 var(--fd); color: var(--ink); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ws-sub { grid-area: sub; font-size: 0.92rem; color: var(--mid); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ws-lp { grid-area: lp; display: grid; place-items: center; min-width: 46px; height: 46px; background: var(--well); border: 3px solid; border-color: var(--bevel-in); font: 400 1.6rem var(--fn); color: var(--red); text-shadow: 2px 2px 0 #000; }
.ws-lp.mst { color: var(--yel); }
/* before typing: every leaderboard of the site as a tile, its icon over its name, section by section */
.ws-lbs { display: grid; gap: 20px; padding: 16px; }
.ws-lbh { display: flex; align-items: center; gap: 10px; margin: 0 0 10px; padding: 0 0 8px; border-bottom: 2px solid var(--hair); }
.ws-lbh .pxi { width: 26px; height: 26px; }
.ws-lbh i { margin-left: auto; font: 700 0.5rem var(--fl); font-style: normal; text-transform: uppercase; letter-spacing: 0.06em; color: var(--mid); }
.ws-lbgrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(104px, 1fr)); gap: 8px; }
.ws-lb { display: grid; justify-items: center; align-content: start; gap: 7px; min-height: 104px; padding: 12px 6px 10px; background: var(--well); border: 3px solid; border-color: var(--bevel-in); color: var(--fg); text-decoration: none; }
.ws-ci { display: grid; place-items: center; width: 44px; height: 44px; }
.ws-ci .pxi { width: 44px; height: 44px; filter: drop-shadow(2px 2px 0 #000); }
.ws-lb b { max-width: 100%; font: 700 0.54rem/1.45 var(--fl); text-transform: uppercase; letter-spacing: 0.04em; text-align: center; overflow-wrap: anywhere; }
.ws-lb small { margin-top: -3px; font-size: 0.78rem; color: var(--mid); }
.ws-lb:hover, .ws-lb:focus-visible { border-color: var(--yel); color: var(--yel); }
.ws-lb:hover .pxi { transform: translateY(-2px); }
.ws-hits { display: grid; gap: 8px; padding: 14px 14px 16px; border-bottom: 3px solid var(--hair); }
.ws-picks { display: flex; flex-wrap: wrap; gap: 6px; }
.ws-picks button { padding: 6px 10px; background: var(--well); border: 2px solid #4e4e4e; color: var(--ink); font: 400 1rem var(--f); cursor: pointer; }
.ws-picks button:hover { border-color: var(--yel); color: var(--yel); }
.ws-none { padding: 18px; }
.ws-keys { margin: 0; font: 700 0.5rem var(--fl); text-transform: uppercase; letter-spacing: 0.05em; color: var(--mid); text-align: right; }
.ws-keys b { color: var(--yel); font-weight: 700; }
@media (max-width: 640px) {
  .ws-panel { margin-top: 0; padding: 14px; }
  .ws-head { grid-template-columns: 44px minmax(0, 1fr) auto; gap: 10px; }
  .ws-head .globe { width: 44px; height: 44px; }
  .ws-head h2 { font-size: 1.4rem; }
  .ws-in input { font-size: 1.2rem; padding: 10px 12px; }
  .ws-list a { grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "type lp" "name lp" "sub lp"; }
  .ws-tabs { flex-wrap: nowrap; overflow-x: auto; padding-bottom: 4px; }
  .ws-tabs button { flex: none; }
  .ws-lbs { padding: 10px; }
  .ws-lbgrid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; }
  .ws-lb { min-height: 90px; padding: 10px 3px 8px; }
  .ws-ci, .ws-ci .pxi { width: 34px; height: 34px; }
  .ws-lb b { font-size: 0.48rem; }
  .ws-keys { display: none; }
}
@media (prefers-reduced-motion: reduce) { .ws-head .gl-land { animation: none; } }/* the Life Path window: the totals behind one Life Path */
.lp-pop-bg { position: fixed; inset: 0; z-index: 80; display: grid; place-items: center; padding: 16px; padding-top: max(16px, env(safe-area-inset-top, 0px)); background: rgba(6, 3, 2, 0.72); }
.lp-pop { width: min(620px, 100%); max-height: calc(100vh - 48px); overflow-y: auto; padding: 18px 20px 20px; background: var(--grit), linear-gradient(135deg, #5a5a5a, #2e2e2e); background-blend-mode: overlay, normal; border: 4px solid; border-color: var(--bevel); box-shadow: 0 10px 0 rgba(0, 0, 0, 0.55); }
.lp-pop header { position: relative; padding-right: 44px; }
.lp-pop header .label { margin: 0; }
.lp-pop h2 { margin: 4px 0 10px; font: 400 2rem/1.1 var(--fd); color: var(--ink); text-transform: uppercase; }
.lp-pop h2 .tagx { vertical-align: middle; }
.lp-pop > p { line-height: 1.45; color: var(--fg); }
.lp-pop > p b { color: var(--yel); font-weight: 400; }
.lp-x { position: absolute; top: 0; right: 0; width: 38px; height: 38px; background: var(--well); border: 3px solid; border-color: var(--bevel-in); color: var(--ink); font: 400 1.6rem/1 var(--fn); cursor: pointer; }
.lp-x:hover { color: var(--yel); border-color: var(--yel); }
.lp-tots { margin: 12px 0 16px; background: rgba(0, 0, 0, 0.3); border: 3px solid; border-color: var(--bevel-in); padding: 4px 8px; }
.lp-tots .lb-k { font: 400 1.25rem var(--fn); }
.lp-tots .lb-k .tagx { margin-left: 8px; vertical-align: 2px; }
.tagx.kd { border: 2px solid var(--bad); color: var(--bad); padding: 3px 6px; }.lb-intro p { max-width: 96ch; margin: 18px 0 0; color: var(--fg); line-height: 1.45; }
.lb-intro b { color: var(--yel); font-weight: 400; font-family: var(--fd); }
.lb-d { margin: -4px 0 10px; font-size: 0.92rem; color: var(--mid); }
.lb-cols { display: grid; grid-template-columns: 1.6rem 8.6rem minmax(30px, 1fr) 3.4rem 2.8rem; gap: 8px; padding: 0 2px 4px; border-bottom: 2px solid var(--hair); font: 700 0.46rem var(--fl); text-transform: uppercase; letter-spacing: 0.05em; color: var(--faint); }
.lb-cols span:nth-child(1), .lb-cols span:nth-child(4), .lb-cols span:nth-child(5) { text-align: right; }
.lb-list li.me .lb-k em { font: 700 0.45rem var(--fl); font-style: normal; text-transform: uppercase; letter-spacing: 0.04em; background: var(--yel); color: var(--on-yel); padding: 2px 4px; margin-left: 6px; vertical-align: 2px; text-shadow: none; }
.lb-list li.me button { box-shadow: inset 3px 0 0 var(--yel); }.boards { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 28px; margin: 22px 0 10px; }
.boards.four { grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); margin-top: 12px; }
.lb { min-width: 0; background: var(--cell); border: 3px solid; border-color: var(--bevel-in); padding: 10px 12px 12px; }
.lb h3 { margin-top: 0; border-top: 0; padding-top: 0; box-shadow: none; }
/* the intro on the left, the choice of boards on the right */
.lb-intro { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 14px 28px; align-items: center; }
.lb-views { display: grid; gap: 7px; justify-items: start; margin-top: 18px; padding: 12px 14px; background: var(--well); border: 3px solid; border-color: var(--bevel-in); }
.lb-h { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 6px 12px; }
.lb-h h3 { margin-bottom: 8px; }
.lb-sw { display: inline-flex; border: 2px solid #4e4e4e; }
.lb-sw button { padding: 5px 9px; background: var(--well); border: 0; color: var(--mid); font: 700 0.5rem var(--fl); text-transform: uppercase; letter-spacing: 0.05em; cursor: pointer; }
.lb-sw button + button { border-left: 2px solid #4e4e4e; }
.lb-sw button:hover { color: var(--yel); }
.lb-sw button.on { background: var(--red-dk); color: var(--yel); }
.lb-side { display: grid; gap: 10px; align-content: start; align-self: start; max-width: 460px; margin-top: 18px; }
.lb-side .seg { flex-wrap: wrap; }
.lb-side .lb-views { margin-top: 0; }
@media (max-width: 900px) { .lb-intro { grid-template-columns: minmax(0, 1fr); } .lb-views, .lb-side { margin-top: 0; } }
.lb-list { list-style: none; margin: 0; padding: 0; }
.lb-list li.lb-extra { display: none; }
.lb.all .lb-list li.lb-extra { display: block; }
.lb-list button { width: 100%; display: grid; grid-template-columns: 1.6rem 8.6rem minmax(30px, 1fr) 3.4rem 2.8rem; gap: 8px; align-items: center; background: none; border: 0; border-bottom: 2px solid var(--hair); padding: 4px 2px; color: var(--fg); font: 400 1rem var(--f); text-align: left; cursor: pointer; text-shadow: 1px 1px 0 #000; }
.lb-list button:hover { background: var(--hover); }
.lb-list button.on { background: rgba(240, 192, 32, 0.22); box-shadow: inset 3px 0 0 var(--yel); }
.lb-r { font: 400 1.15rem var(--fn); color: var(--faint); text-align: right; }
.lb-k { color: var(--ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.lb-bar { height: 12px; background: var(--well); border: 2px solid; border-color: var(--bevel-in); }
.lb-bar i { display: block; height: 100%; background: linear-gradient(#c8c8c8, #6a6a6a); }
.lb-list li:first-child .lb-bar i { background: linear-gradient(#ff7040, var(--red-dk)); }
.lb-list li:first-child .lb-k { color: var(--yel); }
.lb-n { text-align: right; color: var(--red); font: 400 1.4rem var(--fn); font-variant-numeric: tabular-nums; text-shadow: 2px 2px 0 #000; }
.lb-p { font-size: 0.82rem; text-align: right; color: var(--mid); font-variant-numeric: tabular-nums; }
.lb-toggle { font-size: 0.9rem; margin: 8px 0 0; }
.more-boards { margin: 10px 0 16px; }
.more-boards summary { cursor: pointer; font: 700 0.58rem var(--fl); text-transform: uppercase; letter-spacing: 0.05em; color: var(--yel); list-style: none; display: inline-flex; gap: 8px; align-items: center; padding: 6px 0; }
.more-boards summary::-webkit-details-marker { display: none; }
.more-boards summary::before { content: "+"; font: 400 1.4rem/1 var(--fn); color: var(--red); }
.more-boards[open] summary::before { content: "−"; }
.c-chips { display: flex; flex-wrap: wrap; gap: 6px 10px; align-items: center; }
.c-chips:not(:empty) { margin: 4px 0 8px; }
.chip { background: var(--yel); color: var(--on-yel); border: 2px solid #6a4a00; padding: 3px 9px 2px; font: 400 0.96rem var(--f); cursor: pointer; text-shadow: none; }
.presets { margin: 0 0 14px; }
.switch { display: inline-flex; gap: 4px; margin: 0 0 20px; }
.switch a { padding: 7px 14px 6px; color: #e2e2e2; text-decoration: none; font: 700 0.56rem var(--fl); text-transform: uppercase; letter-spacing: 0.05em; background: linear-gradient(#6a6a6a, #383838); border: 3px solid; border-color: #9a9a9a #161616 #161616 #9a9a9a; text-shadow: 2px 2px 0 #000; }
.switch a.on { background: linear-gradient(#8a2400, #3a0800); color: var(--yel); }
.arch-line .textbtn { font-size: inherit; }

/* ------------------------------------------------------------------ arcana widgets */
.hebkeys { display: flex; flex-wrap: wrap; gap: 3px; margin: 10px 0 14px; direction: rtl; }
.hebkeys button { min-width: 40px; height: 40px; background: var(--well); color: var(--yel); border: 2px solid; border-color: var(--bevel-in); font: 1.2rem "SBL Hebrew", "Noto Serif Hebrew", "Times New Roman", serif; cursor: pointer; }
.hebkeys button:hover { border-color: var(--yel); }
.aiq { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); max-width: 420px; gap: 3px; }
.aiq > div { display: grid; justify-items: center; gap: 2px; padding: 10px 6px; background: var(--cell); border: 2px solid; border-color: var(--bevel-in); text-align: center; }
.aiq small { font-size: 0.82rem; color: var(--mid); }
.aethyrs { grid-template-columns: repeat(auto-fill, minmax(80px, 1fr)); gap: 3px; }
.aethyrs span { padding: 6px 10px; color: var(--ink); letter-spacing: 0.06em; }
.aethyrs small { font-size: 0.8rem; color: var(--yel); margin-right: 6px; }
.hexrow { display: flex; flex-wrap: wrap; gap: 14px 30px; margin: 14px 0; }
.hexcell { display: flex; gap: 14px; align-items: center; border-top: 2px solid var(--hair); padding-top: 12px; }
.hexcell > div { display: grid; gap: 1px; }
.hexcell b { color: var(--ink); }
.hexfig { width: 64px; height: 70px; fill: var(--yel); color: var(--yel); }
.hexchar { font-family: var(--sym); font-size: 1.6rem; color: var(--yel); line-height: 1; }
.hexgrid { grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); font-size: 0.96rem; gap: 3px; }
.hexgrid > div { display: grid; grid-template-columns: 2rem minmax(0, 1fr); gap: 0 8px; align-items: center; padding: 6px 10px; }
.hexgrid .hexchar { grid-row: span 2; font-size: 1.5rem; }
.hexgrid b { color: var(--red); margin-right: 4px; font-family: var(--fn); font-size: 1.15rem; }
.hexgrid small { color: var(--mid); font-size: 0.88rem; }
.tattvas { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); margin-top: 16px; }
.tattvas > div { display: grid; justify-items: center; text-align: center; gap: 2px; padding: 12px 10px; color: var(--ink); }
.tattvas span, .tattvas small { color: var(--mid); font-size: 0.9rem; }
.degrees { columns: 2; column-gap: 28px; margin: 8px 0; padding-left: 2.2em; font-size: 1rem; }
.degrees li { break-inside: avoid; padding: 2px 0; }
.degrees li::marker { color: var(--red); font-family: var(--fn); }
.pig { display: flex; flex-wrap: wrap; gap: 4px; margin: 12px 0; color: var(--yel); }
.pig-gap { width: 16px; }

/* ------------------------------------------------------------------ home: the level */
.lnd-msg { margin: 18px 0 0; min-height: 1.2em; font: 700 0.62rem var(--fl); text-transform: uppercase; letter-spacing: 0.05em; color: var(--red); text-shadow: 2px 2px 0 #000; }
.lnd-logo { text-align: center; margin: 10px 0 0; }
.lnd-logo h1 { display: block; max-width: 1000px; margin: 0 auto; background: none; filter: drop-shadow(0 0 28px rgba(255, 70, 0, 0.4)); }
.logo-svg { display: block; width: 100%; height: auto; overflow: visible; }
.lnd-tag { display: flex; justify-content: center; margin: 6px 0 0; }
.lnd-tag span { padding: 8px 10px 7px 22px; background: linear-gradient(#4e4e4e, #262626); border: 3px solid; border-color: var(--bevel); box-shadow: 0 5px 0 rgba(0, 0, 0, 0.45); font: 700 0.64rem/1 var(--fl); text-transform: uppercase; letter-spacing: 0.42em; color: var(--yel); text-shadow: 2px 2px 0 #000; }
.lnd-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr) minmax(0, 1fr); gap: 34px; margin-top: 34px; align-items: start; }
.plate { padding: 28px 28px 30px; min-width: 0; }
/* the three home panels are named in the title type, large enough to read across the room */
.plate > h2 { margin: 0 0 22px; padding-bottom: 14px; text-align: center; font: 400 clamp(1.6rem, 2.4vw, 2.1rem)/1 var(--fd); text-transform: uppercase; letter-spacing: 0.03em; border-bottom: 2px solid var(--hair); box-shadow: 0 1px 0 var(--line); }
.c-in { display: grid; grid-template-columns: minmax(0, 1fr); gap: 8px; }
.c-in input { font: 400 clamp(1.3rem, 1.9vw, 1.75rem)/1.05 var(--fn); color: var(--red); letter-spacing: 0.02em; padding: 9px 14px 7px; text-shadow: 2px 2px 0 #000; }
.c-eq { margin: 20px 0 4px; text-align: center; font-size: 1.05rem; color: var(--fg); overflow-wrap: anywhere; }
.c-eq b { color: var(--red); font: 400 1.4rem var(--fn); }
.c-count { text-align: center; color: var(--mid); font-size: 0.9rem; margin: 0 0 12px; }
.c-tots { display: grid; gap: 6px; margin-top: 6px; }
.c-tot { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: baseline; gap: 10px; background: none; border: 0; padding: 4px 8px; cursor: pointer; text-align: left; color: inherit; font: inherit; text-shadow: inherit; }
.c-tot span { font: 700 0.66rem var(--fl); text-transform: uppercase; letter-spacing: 0.06em; color: #ececec; text-shadow: 2px 2px 0 #000; }
.c-tot b { font: 400 3.1rem/0.95 var(--fn); color: var(--red); text-shadow: 3px 3px 0 #000; }
.c-tot:hover, .c-tot.on { background: rgba(0, 0, 0, 0.25); box-shadow: inset 4px 0 0 var(--yel); }
.c-tot.on span { color: var(--yel); }
.c-lets { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px 20px; margin: 20px 0 8px; }
.c-lets .w { display: flex; gap: 2px 6px; }
.c-lets span { display: grid; justify-items: center; line-height: 1; min-width: 1.1em; }
.c-lets b { font: 400 1.9rem/1 var(--fn); color: #f2f2f2; text-shadow: 2px 2px 0 #000; letter-spacing: 0.04em; }
.c-lets i { font: 400 1.25rem/1 var(--fn); font-style: normal; color: var(--yel); }
.c-chart { margin-top: 20px; background: var(--well); border: 3px solid; border-color: var(--bevel-in); padding: 10px 10px 12px; }
.c-chart-g { display: grid; grid-template-columns: repeat(13, minmax(0, 1fr)); gap: 4px 2px; text-align: center; }
.c-chart-g span { display: grid; line-height: 1.05; }
.c-chart-g b { font: 400 1.2rem var(--fn); color: #e8e8e8; }
.c-chart-g i { font: 400 1.05rem var(--fn); font-style: normal; color: var(--red); }
.c-chart-g span.hit b { color: var(--yel); }
.c-cyc { display: flex; justify-content: space-between; align-items: center; gap: 8px; margin-top: 10px; }
.c-cyc button { background: linear-gradient(#5a5a5a, #2e2e2e); border: 2px solid; border-color: #8a8a8a #141414 #141414 #8a8a8a; color: var(--yel); font: 400 1.2rem/1 var(--fn); width: 34px; height: 30px; cursor: pointer; }
.c-cyc button:hover { border-color: #141414 #8a8a8a #8a8a8a #141414; }
.c-cyc strong { font: 700 0.6rem var(--fl); text-transform: uppercase; color: var(--yel); text-align: center; letter-spacing: 0.04em; }
.c-acts { display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; margin-top: 24px; }
.land-note { margin-top: 44px; color: #e8e2d6; text-align: center; }

/* the Life Path plate */
.lp-in { display: grid; gap: 8px; }
.lp-in input { font: 400 1.5rem var(--fn); color: var(--ink); letter-spacing: 0.04em; }
.lp-big { display: flex; flex-direction: column; align-items: center; gap: 12px; margin: 26px 0 8px; text-decoration: none; }
.lp-n { font: 400 clamp(6rem, 11vw, 8.6rem)/0.8 var(--fn); color: var(--red); text-shadow: 5px 5px 0 #000; }
.lp-big:hover .lp-n { color: #ff6040; }
.lp-big .tagx { align-self: center; }
.lp-t { text-align: center; margin: 14px 0 6px; font: 400 1.35rem/1.1 var(--fd); color: var(--ink); text-transform: uppercase; }
.lp-work { text-align: center; font-size: 1.02rem; color: var(--yel); margin: 0 0 22px; }
.p-lp .tb { grid-template-columns: minmax(0, 1fr); gap: 14px; }
.p-lp .tb-c { padding: 14px 16px 16px; }
.lp-empty { text-align: center; padding: 44px 0; }

/* the small calendar */
.mc-top { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 8px; margin-bottom: 12px; }
.mc-top b { text-align: center; font: 400 1.15rem/1 var(--fd); text-transform: uppercase; color: var(--ink); }
.mc-arr { background: linear-gradient(#5a5a5a, #2e2e2e); border: 2px solid; border-color: #8a8a8a #141414 #141414 #8a8a8a; color: var(--yel); font: 400 1.1rem/1 var(--fn); width: 36px; height: 34px; cursor: pointer; }
.mc-arr:hover { border-color: #141414 #8a8a8a #8a8a8a #141414; }
.mc-grid { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 4px; padding: 8px; background: var(--well); border: 3px solid; border-color: var(--bevel-in); }
.mc-w { text-align: center; font: 700 0.5rem var(--fl); color: var(--yel); padding: 2px 0 6px; }
.mc-d { position: relative; display: grid; justify-items: center; align-content: center; aspect-ratio: 1 / 1.05; padding: 0; background: rgba(255, 255, 255, 0.05); border: 2px solid transparent; color: var(--fg); cursor: pointer; font: inherit; text-shadow: inherit; min-width: 0; }
.mc-d.blank { background: none; cursor: default; }
.mc-d i { position: absolute; top: 3px; left: 4px; font: 400 0.62rem/1 var(--f); font-style: normal; color: var(--mid); }
.mc-d b { font: 400 1.45rem/1 var(--fn); color: var(--red); text-shadow: 2px 2px 0 #000; margin-top: 8px; }
.mc-d.mst b { color: var(--yel); }
.mc-d.today { border-color: var(--red); }
.mc-d.mst { background: rgba(240, 192, 32, 0.14); }
.mc-d.sel { background: rgba(240, 192, 32, 0.22); border-color: #fff; }
.mc-d:not(.blank):hover { background: rgba(240, 192, 32, 0.14); }
.mc-moon { position: absolute; top: 3px; right: 3px; line-height: 0; }
.mc-day { margin-top: 18px; padding: 16px 18px 6px; background: var(--cell); border: 3px solid; border-color: var(--bevel-in); }
.mc-date { margin: 0 0 12px; font: 700 0.6rem/1.3 var(--fl); text-transform: uppercase; letter-spacing: 0.08em; color: var(--yel); }
.mc-head { display: flex; align-items: center; gap: 16px; padding-bottom: 12px; border-bottom: 2px solid var(--hair); }
.mc-head > div { display: grid; gap: 6px; justify-items: start; }
.mc-big { font: 400 4.2rem/0.82 var(--fn); color: var(--red); text-shadow: 3px 3px 0 #000; min-width: 1.2em; text-align: center; padding: 8px 10px 2px; background: var(--well); border: 3px solid; border-color: var(--bevel-in); cursor: help; }
.mc-tot { font: 400 1.5rem/1 var(--fn); color: var(--ink); }
.mc-facts { margin: 0; display: grid; }
.mc-facts > div { display: flex; justify-content: space-between; align-items: center; gap: 10px; padding: 9px 0; border-bottom: 2px solid var(--hair); }
.mc-facts > div:last-child { border-bottom: 0; }
.mc-facts dt { font: 700 0.52rem var(--fl); text-transform: uppercase; letter-spacing: 0.08em; color: var(--mid); }
.mc-facts dd { margin: 0; text-align: right; font-size: 1.02rem; }
.mc-facts dd a { text-decoration: none; color: var(--ink); }
.mc-facts dd a:hover { color: var(--yel); }
.mc-mo { display: flex; gap: 8px; align-items: center; justify-content: flex-end; color: var(--ink); }

/* ------------------------------------------------------------------ the status bar (HUD), always at the bottom */
.hud { position: fixed; left: 0; right: 0; bottom: 0; z-index: 45; height: var(--hud-h); padding-bottom: env(safe-area-inset-bottom, 0px); display: grid; grid-template-columns: 1.15fr 0.85fr 1fr 118px 1.15fr 0.95fr 1.05fr; background: var(--grit), #6a6a6a; background-blend-mode: overlay; border-top: 4px solid #a8a8a8; box-shadow: 0 -4px 0 #1a1a1a; padding-left: env(safe-area-inset-left, 0px); padding-right: env(safe-area-inset-right, 0px); }
.hud-s { margin: 5px 3px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; min-width: 0; background: rgba(0, 0, 0, 0.18); border: 4px solid; border-color: #2a2a2a #b8b8b8 #b8b8b8 #2a2a2a; color: inherit; text-decoration: none; position: relative; }
a.hud-s:hover { background: rgba(0, 0, 0, 0.32); }
a.hud-s:hover .hud-l { color: var(--yel); }
.hud-v { font: 400 3.5rem/0.82 var(--fn); color: var(--red); text-shadow: 3px 3px 0 #000; white-space: nowrap; }
.hud-v small { font-size: 0.4em; color: var(--yel); margin-left: 2px; }
.hud-v.hud-sg { font: 400 2.1rem/1.15 var(--sym); margin-bottom: 4px; }
.hud-q { color: var(--yel); animation: secret 1.6s steps(1) infinite; }
.hud-none { background: rgba(0, 0, 0, 0.3); }
.hud-t.hud-add { background: #1a1a1a; color: var(--yel); border: 2px solid #4a4a4a; }
a.hud-none:hover .hud-t.hud-add { background: var(--yel); color: var(--on-yel); border-color: var(--yel); }
@keyframes secret { 50% { color: #8a6a10; } }
.hud-world .globe { width: 58px; height: 58px; filter: drop-shadow(3px 3px 0 #000); margin-bottom: 2px; }
/* the land strip slides under the round mask: the globe turns west to east while the mouse is on it */
.globe .gl-land { transform: translateX(-3px); }
a.hud-world:hover .gl-land { animation: globe-spin 4.8s steps(32) infinite; }
@keyframes globe-spin { from { transform: translateX(-35px); } to { transform: translateX(-3px); } }
.gl-shade { fill: #000; opacity: 0.32; }
.gl-shine { fill: #fff; opacity: 0.55; }
.gl1 { fill: #06101e; }
.gl2 { fill: #2f74e0; }
.gl3 { fill: #3fb648; }
.hud-l { font: 700 0.5rem var(--fl); text-transform: uppercase; letter-spacing: 0.06em; color: #f0f0f0; text-shadow: 2px 2px 0 #000; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; }
.hud-t { font: 700 0.42rem/1 var(--fl); text-transform: uppercase; background: var(--yel); color: var(--on-yel); padding: 2px 5px; text-shadow: none; }
.hud-arms { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0 14px; font: 400 1.32rem/0.92 var(--fn); color: #6e6e6e; text-shadow: 2px 2px 0 #000; }
.hud-arms i { font-style: normal; }
.hud-arms i.on { color: var(--yel); }
.hud-face { background: #120a06; border-color: #2a2a2a #b8b8b8 #b8b8b8 #2a2a2a; padding: 4px; }
.hud-face svg { width: 70px; height: 70px; display: block; margin-top: -8px; }
.hud-face .hud-l { position: absolute; bottom: 2px; left: 2px; right: 2px; text-align: center; font-size: 0.4rem; }
.px1, .px5 { fill: #1a0e06; }
.px2 { fill: #7a4a1a; }
.px3 { fill: #c8a070; }
.px4 { fill: #f0c020; }
.px6 { fill: #d40000; }
.owl-eyes { animation: look 7s steps(1) infinite; }
@keyframes look { 0%, 60% { transform: translateX(0); } 61%, 74% { transform: translateX(-1px); } 75%, 88% { transform: translateX(1px); } 89% { transform: translateX(0); } }

/* ------------------------------------------------------------------ the menu: a map of every page with a finder */
.mega .mg-in.all { display: block; }
.mg-find { position: sticky; top: 0; z-index: 3; display: flex; gap: 12px; align-items: center; margin: 0 0 18px; padding: 10px 0 12px; background: #333; box-shadow: 0 3px 0 #111; }
.mg-find input { flex: 1; font: 400 1.3rem var(--f); color: var(--red); }
.mg-count { font: 700 0.55rem var(--fl); color: var(--yel); text-transform: uppercase; letter-spacing: 0.05em; white-space: nowrap; }
/* the library flows like a newspaper: sections fill four balanced columns instead of one column per part */
.mg-cols { columns: 4 230px; column-gap: 30px; }
.mg-cols .mg-part { display: block; }
.mg-cols .mg-h { break-after: avoid; margin-top: 4px; }
.mg-cols .mg-sec { break-inside: avoid; margin-bottom: 14px; }
.mg-part.hl > .mg-h { background: var(--red-dk); padding: 4px 6px; }
.mg-part .mg-sec ul { max-height: none; }
.mg-sec li a { font-size: 0.94rem; line-height: 1.25; padding: 2px 0; }
.mega.filtering .mg-sec li a { color: var(--ink); }

/* ------------------------------------------------------------------ good and bad traits: two large boxes, green and red */
.tb { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 18px; }
.tb-c { padding: 20px 22px 22px; border: 3px solid; border-left-width: 10px; min-width: 0; }
.tb-c h4 { display: flex; align-items: center; gap: 10px; margin: 0 0 16px; font: 700 0.74rem/1 var(--fl); letter-spacing: 0.1em; }
.tb-c h4 span { display: inline-grid; place-items: center; width: 28px; height: 28px; font: 400 1.5rem/1 var(--fn); text-shadow: none; }
.tb-c ul { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.tb-c li { font-size: 1.04rem; line-height: 1.25; padding: 6px 11px 5px; background: rgba(0, 0, 0, 0.38); }
.tb-g { background: var(--good-bg); border-color: var(--good); }
.tb-g h4 { color: var(--good); }
.tb-g h4 span { background: var(--good); color: #0c2408; }
.tb-g li { color: #c2f7bd; border: 1px solid rgba(110, 224, 101, 0.45); }
.tb-b { background: var(--bad-bg); border-color: var(--bad); }
.tb-b h4 { color: var(--bad); }
.tb-b h4 span { background: var(--bad); color: #2a0602; }
.tb-b li { color: #ffc4b6; border: 1px solid rgba(255, 106, 77, 0.45); }

/* ------------------------------------------------------------------ simple pages: one Life Path, one day, one sign, one number */
.xp { margin-top: 30px; padding: 34px 40px 42px; display: grid; gap: 30px; background: var(--rivets), var(--plate); border: 4px solid; border-color: var(--bevel); box-shadow: 0 7px 0 rgba(0, 0, 0, 0.45); }
.xp-nav { display: flex; flex-wrap: wrap; gap: 6px; }
.xp-nav a { display: inline-grid; place-items: center; min-width: 44px; height: 42px; padding: 0 8px; background: var(--well); border: 3px solid; border-color: var(--bevel-in); color: var(--red); text-decoration: none; font: 400 1.4rem var(--fn); text-shadow: 2px 2px 0 #000; }
.xp-nav a .sign-ic { width: 32px; height: 32px; filter: drop-shadow(2px 2px 0 #000); }
.xp-nav a:hover .sign-ic { transform: translateY(-1px); }
.xp-nav a:hover { border-color: var(--yel); color: var(--yel); }
.xp-nav a.on { border-color: var(--yel); background: var(--red-dk); color: var(--yel); }
.xp-head { display: flex; gap: 32px; align-items: center; padding-bottom: 28px; border-bottom: 2px solid var(--hair); box-shadow: 0 1px 0 var(--line); }
.xp-n { flex: none; display: grid; place-items: center; min-width: 170px; padding: 14px 20px 4px; background: var(--well); border: 4px solid; border-color: var(--bevel-in); }
.xp-n .ink { font-size: clamp(6rem, 13vw, 9.5rem); }
.xp-n.sg { padding: 10px 20px; }
.xp-n.sg .ink { font-size: clamp(4.4rem, 10vw, 7rem); line-height: 1.1; color: var(--yel); }
.xp-h { display: grid; gap: 12px; justify-items: start; min-width: 0; }
.xp-kick { margin: 0; font: 700 0.62rem/1.5 var(--fl); text-transform: uppercase; letter-spacing: 0.1em; color: var(--yel); }
.xp-h h1, .xp-h h2 { margin: 0; font: 400 clamp(2rem, 4.6vw, 3.6rem)/0.95 var(--fd); text-transform: uppercase; background: linear-gradient(#fff2b0, #ffb030 45%, #e04a00); -webkit-background-clip: text; background-clip: text; color: transparent; text-shadow: none; filter: drop-shadow(2px 2px 0 #000); }
.xp-line { margin: 2px 0 0; font-size: 1.3rem; line-height: 1.4; color: var(--ink); max-width: 46ch; }
.xp-text { display: grid; gap: 16px; max-width: 72ch; font-size: 1.14rem; line-height: 1.62; }
.xp-text p { margin: 0; }
.xp-sub { margin: 0 0 -14px; font: 700 0.6rem var(--fl); text-transform: uppercase; color: var(--yel); letter-spacing: 0.08em; }
.xp-facts { margin: 0; display: grid; border-top: 2px solid var(--hair); }
.xp-facts > div { display: grid; grid-template-columns: 11rem minmax(0, 1fr); gap: 22px; padding: 15px 0; border-bottom: 2px solid var(--hair); box-shadow: 0 1px 0 var(--line); }
.xp-facts dt { font: 700 0.58rem/2 var(--fl); text-transform: uppercase; letter-spacing: 0.08em; color: var(--yel); }
.xp-facts dd { margin: 0; font-size: 1.06rem; }
.xp-match { display: grid; gap: 12px; }
.xp-match .meta { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.xp-match .meta b { min-width: 7.5rem; }
a.cn { text-decoration: none; }
a.cn:hover { border-color: var(--yel) !important; color: var(--yel) !important; }
/* the way out of a page: three steel buttons */
.xp-links { margin: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 12px; }
.xp-links a { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 14px 18px 13px; background: linear-gradient(#5a5a5a, #2e2e2e); border: 3px solid; border-color: #9a9a9a #161616 #161616 #9a9a9a; color: #ececec; text-decoration: none; font: 700 0.6rem/1.3 var(--fl); text-transform: uppercase; letter-spacing: 0.06em; text-shadow: 2px 2px 0 #000; }
.xp-links a::after { content: "▶"; font: 400 1rem/1 var(--fn); color: var(--yel); }
.xp-links a:hover { color: var(--yel); border-color: #161616 #9a9a9a #9a9a9a #161616; }
.numcard .xp-head { padding-bottom: 26px; }
/* the key facts of a number: a row of small steel cards, label on top, value below */
.nc-facts { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 12px; }
.nc-facts span { display: grid; gap: 8px; align-content: start; padding: 14px 16px 16px; background: var(--cell); border: 3px solid; border-color: var(--bevel-in); border-top: 3px solid var(--yel); font-size: 1.04rem; line-height: 1.3; color: var(--ink); }
.nc-facts b { font: 700 0.52rem var(--fl); text-transform: uppercase; letter-spacing: 0.08em; color: var(--yel); }
.nc-more { background: var(--cell); border: 3px solid; border-color: var(--bevel-in); }
.nc-more summary { cursor: pointer; font: 700 0.6rem var(--fl); text-transform: uppercase; letter-spacing: 0.08em; color: var(--yel); list-style: none; display: flex; gap: 12px; align-items: center; padding: 14px 18px; }
.nc-more summary:hover { background: var(--hover); }
.nc-more summary::-webkit-details-marker { display: none; }
.nc-more summary::before { content: "+"; display: inline-grid; place-items: center; width: 26px; height: 26px; background: var(--red-dk); font: 400 1.4rem/1 var(--fn); color: var(--yel); }
.nc-more[open] summary::before { content: "−"; }
.nc-more .corr { margin: 0 18px 18px; }

/* ------------------------------------------------------------------ Start Reading: the whole site as one page */
.read-all main > section + section > .top-wrap > .stop { margin-top: 90px; }
.read-extra .xp { margin-top: 44px; }
#read-tail { min-height: 160px; padding: 40px 0 0; }
#read-tail .loading { text-align: center; justify-content: center; }
.read-end { max-width: 640px; margin: 20px auto 0; text-align: center; }
.read-end h2 { font: 400 clamp(2rem, 5vw, 3.2rem)/1 var(--fd); text-transform: uppercase; background: linear-gradient(#fff2b0, #ffb030 45%, #e04a00); -webkit-background-clip: text; background-clip: text; color: transparent; text-shadow: none; filter: drop-shadow(2px 2px 0 #000); margin-bottom: 10px; letter-spacing: 0; }
.royal .ticks li { padding: 12px 0; align-items: start; line-height: 1.45; }
.royal .ticks li.yes b { color: var(--yel); }
.royal .ticks li.no b { color: var(--fg); }
.royal h3 { margin-top: 30px; }

/* ------------------------------------------------------------------ the number book, special numbers, compatibility */
.bk-nav { display: flex; justify-content: space-between; gap: 12px; margin: 0 0 28px; }
.book { display: grid; gap: 28px; }
.bk-row { display: grid; grid-template-columns: 160px minmax(0, 1fr); gap: 24px 30px; align-items: start; padding: 26px 28px 28px; background: var(--cell); border: 3px solid; border-color: var(--bevel-in); }
.bk-row > .tb { grid-column: 1 / -1; }
.bk-n { display: grid; justify-items: center; align-content: center; gap: 10px; min-height: 140px; text-decoration: none; padding: 12px 6px; background: var(--well); border: 3px solid; border-color: var(--bevel-in); }
a.bk-n:hover { border-color: var(--yel); }
.bk-n .ink { font-size: 5rem; }
.bk-n .ink.long { font-size: 2.3rem; white-space: normal; text-align: center; line-height: 1; }
.bk-n .tagx { margin: 0; justify-self: center; }
.bk-r { font: 700 0.5rem var(--fl); color: var(--yel); text-transform: uppercase; letter-spacing: 0.04em; text-align: center; }
.bk-x { min-width: 0; }
.bk-x h3 { margin: 4px 0 12px; border: 0; padding: 0; box-shadow: none; font: 400 1.6rem/1.05 var(--fd); color: var(--ink); text-transform: uppercase; letter-spacing: 0; }
.bk-x p { margin: 0 0 8px; font-size: 1.08rem; line-height: 1.55; max-width: 70ch; }
.bk-go { margin-top: 12px !important; }
.nc-res { display: grid; grid-template-columns: auto auto minmax(0, 1fr); gap: 10px 20px; align-items: center; padding: 18px 22px; margin: 8px 0 14px; background: var(--cell); border: 3px solid; border-color: var(--bevel-in); border-left: 8px solid var(--mid); }
.nc-res.s5, .nc-res.s4 { border-left-color: var(--good); }
.nc-res.s2, .nc-res.s1 { border-left-color: var(--bad); }
.nc-pair { font: 400 3.2rem/1 var(--fn); color: var(--red); text-shadow: 3px 3px 0 #000; white-space: nowrap; }
.nc-pair i { font-style: normal; font-size: 0.55em; color: var(--yel); }
.nc-res p { grid-column: 1 / -1; margin: 0; font-size: 1.08rem; }
.cps { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 12px; }
.cp { display: grid; grid-template-columns: 3.4rem minmax(0, 1fr); gap: 6px 12px; align-items: center; padding: 12px 14px; background: var(--cell); border: 3px solid; border-color: var(--bevel-in); }
.cp-n { grid-row: span 2; font: 400 2.7rem/1 var(--fn); color: var(--red); text-shadow: 2px 2px 0 #000; text-align: center; }
.cn { display: inline-grid; place-items: center; min-width: 32px; height: 28px; margin: 0 3px 3px 0; padding: 0 5px; font: 400 1.2rem var(--fn); background: var(--well); }
.meta.fr .cn { color: var(--good); border: 1px solid rgba(110, 224, 101, 0.45); }
.meta.unfr .cn { color: var(--bad); border: 1px solid rgba(255, 106, 77, 0.45); }

/* ------------------------------------------------------------------ the calendar */
.lg-u, .lg-m { font: 400 1.5rem/1 var(--fn); color: var(--red); text-shadow: 2px 2px 0 #000; }
.lg-m { color: var(--yel); }
/* the home page's small calendar: its key strip, and a full or new moon as a disc behind the date */
.mc-key { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 12px; margin: 0; padding: 8px 10px; background: var(--well); border: 3px solid; border-top: 0; border-color: var(--bevel-in); font: 700 0.46rem/1.3 var(--fl); text-transform: uppercase; letter-spacing: 0.06em; color: var(--mid); }
.disc { display: inline-block; width: 14px; height: 14px; border-radius: 50%; }
.disc.full { background: radial-gradient(circle at 36% 34%, #fffdf2 0 30%, #ece6d2 60%, #c9c1a8); box-shadow: 0 0 0 1px #000; }
.disc.new { background: #000; box-shadow: 0 0 0 2px #cfc9b8; }
.mc-d b { position: relative; margin-top: 0; font: 400 1.25rem/1 var(--fn); color: var(--ink); }
.mc-d.today b { color: #ff8a70; }
.mc-d.sel b { color: var(--yel); }
.moon-disc { position: absolute; left: 50%; top: 50%; width: min(90%, 70px); aspect-ratio: 1; transform: translate(-50%, -50%); border-radius: 50%; pointer-events: none; }
.fullm .moon-disc { background: radial-gradient(circle at 36% 34%, #fffdf2 0 30%, #ece6d2 60%, #c9c1a8 100%); box-shadow: 0 0 0 2px #000, 0 0 16px rgba(255, 244, 200, 0.35); }
.newm .moon-disc { background: radial-gradient(circle at 38% 36%, #222, #000 70%); box-shadow: 0 0 0 2px #cfc9b8, 0 0 0 4px #000; }
/* no offset shadow inside a disc, so the number sits dead centre */
.mc-d.fullm b { color: #2a1d08; text-shadow: none; }
.mc-d.newm b { color: #f4f0e4; text-shadow: 0 0 3px #000; }
.mc-d.today.fullm b { color: #a01800; }
/* the calendar page's styles are at the end of this file, so they come after every older rule */
/* the day card: a framed panel with the date on its header strip, Life Path energy first and large, its name beside
   it, the rest on one quiet row */
.dc { display: grid; gap: 0; margin-top: 18px; background: var(--cell); border: 3px solid; border-color: var(--bevel-in); }
.dc-date { margin: 0; padding: 10px 14px; background: linear-gradient(#3c3c3c, #242424); border-bottom: 2px solid #111; font: 700 0.62rem var(--fl); text-transform: uppercase; letter-spacing: 0.08em; color: var(--yel); }
.dc-main { display: flex; flex-wrap: wrap; gap: 16px 20px; align-items: center; padding: 16px 14px; }
.dc-tags { display: flex; flex-wrap: wrap; gap: 6px; }
.dc-what .dc-tags .tagx { margin: 0; }
.dc-lp { flex: 0 0 auto; display: grid; justify-items: center; gap: 4px; min-width: 132px; padding: 12px 14px 10px; background: var(--well); border: 4px solid; border-color: var(--bevel-in); text-decoration: none; }
.dc-lp:hover { border-color: var(--yel); }
.dc-k { font: 700 0.5rem var(--fl); text-transform: uppercase; letter-spacing: 0.06em; color: var(--mid); }
.dc-lp b { font: 400 4.2rem/0.9 var(--fn); color: var(--red); text-shadow: 3px 3px 0 #000; white-space: nowrap; }
.dc-lp b span { font-size: 0.62em; color: var(--yel); margin-left: 2px; }
.dc-lp.mst b { color: var(--yel); }
.dc-what { flex: 1 1 220px; min-width: 0; }
.dc-what h3 { margin: 0 0 6px; border: 0; padding: 0; box-shadow: none; font: 400 1.35rem/1.15 var(--fd); color: var(--ink); text-transform: none; }
.dc-what .tagx { margin: 0 6px 6px 0; }
.dc-what p { margin: 4px 0 0; line-height: 1.4; }
.dc-tr { font-size: 0.95rem; }
.dc-tr b { font-family: var(--fn); margin-right: 4px; }
.dc-more-link { display: inline-block; margin-top: 10px; padding: 7px 10px; background: var(--well); border: 2px solid #5a5a5a; font: 700 0.52rem var(--fl); text-transform: uppercase; letter-spacing: 0.05em; color: var(--yel); text-decoration: none; }
.dc-more-link:hover { border-color: var(--yel); }
.dc-facts { display: grid; grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); gap: 0; margin: 0; padding: 0 14px 10px; border-top: 2px solid var(--hair); box-shadow: inset 0 1px 0 var(--line); }
.dc-facts div { padding: 10px 10px 2px 0; }
.dc-facts dt { font: 700 0.48rem var(--fl); text-transform: uppercase; letter-spacing: 0.06em; color: var(--mid); }
.dc-facts dd { margin: 4px 0 0; font-size: 1rem; color: var(--ink); display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.dc-facts dd small { color: var(--yel); font-size: 0.8rem; }
.dc-facts a { color: var(--ink); }.cal-day { margin-top: 38px; padding-top: 32px; border-top: 2px solid var(--hair); box-shadow: inset 0 1px 0 var(--line); }
.cal-dh { display: flex; gap: 26px; align-items: center; }
.cal-big { font: 400 5.6rem/0.85 var(--fn); color: var(--red); text-shadow: 4px 4px 0 #000; padding: 12px 20px 4px; background: var(--well); border: 4px solid; border-color: var(--bevel-in); cursor: help; }
.cal-dh h3 { margin: 0 0 8px; border: 0; padding: 0; box-shadow: none; font: 400 1.6rem/1.1 var(--fd); text-transform: uppercase; color: var(--ink); letter-spacing: 0; }
.cal-dh p { margin: 0; }
.cal-dh b { color: var(--red); font: 400 1.4rem/1 var(--fn); }
.cal-facts { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 14px; margin-top: 26px; }
.cal-facts > * { display: grid; justify-items: center; align-content: start; gap: 8px; text-align: center; padding: 18px 14px; background: var(--cell); border: 3px solid; border-color: var(--bevel-in); color: var(--fg); text-decoration: none; }
.cal-facts a:hover { border-color: var(--yel); background: var(--hover); }
.cal-facts b { font: 400 3rem/0.95 var(--fn); color: var(--red); text-shadow: 3px 3px 0 #000; }
.cal-facts b.sg { font: 400 2.4rem/1.1 var(--sym); color: var(--yel); }
.cal-facts b.mo { line-height: 0; padding: 8px 0; }
.cal-facts i { font-style: normal; color: var(--mid); font-size: 0.96rem; }

/* ------------------------------------------------------------------ footer */
.foot { background: rgba(8, 5, 3, 0.9); color: var(--fg); margin-top: 56px; border-top: 4px solid #111; box-shadow: inset 0 2px 0 #4a4a4a; }
.foot-row { max-width: var(--max); margin: 0 auto; padding-left: var(--gl); padding-right: var(--gr); padding-block: 30px 40px; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.5fr); gap: 30px; font-size: 0.96rem; }
.foot-row p { max-width: 80ch; color: var(--mid); }
.foot .foot-wm { width: min(100%, 440px); margin: 0; font: 400 2.6rem/1 var(--fd); color: var(--yel); }

/* ------------------------------------------------------------------ gematria: every cipher as a tile */
.gt-grid { display: grid; gap: 10px; }
.gt-core { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.gt-extended, .gt-math { grid-template-columns: repeat(auto-fill, minmax(178px, 1fr)); }
.gtile { display: grid; justify-items: center; align-content: start; gap: 6px; padding: 16px 10px 14px; text-align: center; background: var(--well); border: 3px solid; border-color: var(--bevel-in); color: var(--fg); cursor: pointer; font: inherit; text-shadow: inherit; min-width: 0; }
.gtile:hover { border-color: var(--yel); }
.gtile.on { border-color: var(--yel); background: linear-gradient(rgba(240, 192, 32, 0.16), rgba(240, 192, 32, 0.04)), var(--well); }
.gt-v { font: 400 2.6rem/0.9 var(--fn); color: var(--ink); text-shadow: 3px 3px 0 #000; }
.gt-core .gt-v { font-size: 4rem; color: var(--red); }
.gt-name { font: 700 0.52rem/1.3 var(--fl); text-transform: uppercase; letter-spacing: 0.06em; color: var(--yel); }
.gt-red { font-size: 0.86rem; color: var(--mid); }
.gt-note { font-size: 0.86rem; color: var(--good); line-height: 1.25; }
.g-detail { margin-top: 10px; }
.g-chips { display: flex; flex-wrap: wrap; gap: 8px; margin: 6px 0 4px; }
.chipbtn { padding: 7px 12px 6px; background: linear-gradient(#4a4a4a, #2a2a2a); border: 2px solid; border-color: #8a8a8a #141414 #141414 #8a8a8a; color: var(--ink); font: 400 1rem var(--f); cursor: pointer; text-shadow: 1px 1px 0 #000; }
.chipbtn:hover { color: var(--yel); border-color: #141414 #8a8a8a #8a8a8a #141414; }
.namerow .n { font: 400 1.6rem var(--fn) !important; color: var(--red); text-shadow: 2px 2px 0 #000; }

/* ------------------------------------------------------------------ home gematria plate: four cipher tiles, then the letters */
.c-tots { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; margin-top: 12px; }
.c-tot { display: grid; grid-template-columns: minmax(0, 1fr); justify-items: center; gap: 8px; padding: 14px 8px 12px; background: var(--well); border: 3px solid; border-color: var(--bevel-in); }
.c-tot b { order: 1; font-size: 3.4rem; line-height: 0.9; }
.c-tot span { order: 2; font-size: 0.52rem; color: var(--mid); }
.c-tot:hover, .c-tot.on { box-shadow: none; background: var(--well); border-color: var(--yel); }
.c-tot.on span { color: var(--yel); }
.c-lets { gap: 10px 16px; padding: 14px 8px; background: var(--cell); border: 3px solid; border-color: var(--bevel-in); }
/* a long word wraps onto the next line instead of running out of the plate */
.c-lets .w { gap: 3px; flex-wrap: wrap; justify-content: center; max-width: 100%; min-width: 0; }
.c-lets { max-width: 100%; overflow: hidden; }
.c-lets span { padding: 4px 3px 3px; min-width: 1.7em; background: var(--well); }
.c-lets b { font-size: 1.6rem; }
.c-lets i { font-size: 1.05rem; margin-top: 2px; }

/* ------------------------------------------------------------------ calendars: ordinary days in white, master days in gold */
.mc-d b, .cal-u, .lg-u { color: var(--ink); }
.mc-d.mst b, .cal-d.mst .cal-u, .lg-m { color: var(--yel); }
.mc-big, .cal-big { color: var(--ink); }
.mc-big.mst, .cal-big.mst { color: var(--yel); }

/* ------------------------------------------------------------------ birthday cards: the reduction as quiet text, not a yellow box */
.bday-r { justify-self: start; background: none; padding: 0; font: 400 1.1rem/1 var(--fn); letter-spacing: 0.02em; text-transform: none; color: var(--mid); text-shadow: none; }
.bday-r.mas { color: var(--yel); }

/* ------------------------------------------------------------------ sign and animal cards */
.zcards { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 14px; }
.zc { display: grid; gap: 12px; align-content: start; padding: 18px 20px 20px; background: var(--cell); border: 3px solid; border-color: var(--bevel-in); color: var(--fg); text-decoration: none; }
a.zc:hover { border-color: var(--yel); background: var(--hover); }
.zc header { display: flex; gap: 14px; align-items: center; }
.zc-g { display: grid; place-items: center; width: 3.4rem; height: 3.4rem; flex: none; background: var(--well); border: 3px solid; border-color: var(--bevel-in); font-size: 2rem; line-height: 1; color: var(--yel); }
.zc h3 { margin: 0; border: 0; padding: 0; box-shadow: none; font: 400 1.4rem/1.05 var(--fd); text-transform: uppercase; letter-spacing: 0; background: linear-gradient(#fff2b0, #ffb030 45%, #e04a00); -webkit-background-clip: text; background-clip: text; color: transparent; filter: drop-shadow(2px 2px 0 #000); }
.zc header p { margin: 4px 0 0; color: var(--mid); font-size: 0.94rem; }
.zc-f { margin: 0; font-size: 0.96rem; color: var(--fg); line-height: 1.45; }
.zc-tr { display: grid; gap: 6px; padding: 10px 12px; background: rgba(0, 0, 0, 0.25); }
.zc-tr p { margin: 0; font-size: 0.96rem; line-height: 1.45; }
.zc-tr b { display: inline-block; width: 1.1em; font: 400 1.2rem/1 var(--fn); }
.zc-more { margin: 0; font: 700 0.56rem var(--fl); text-transform: uppercase; letter-spacing: 0.08em; color: var(--yel); }

/* ------------------------------------------------------------------ calmer links everywhere */
.nl { color: var(--yel); text-decoration: none; border-bottom: 2px dotted rgba(240, 192, 32, 0.45); }
.nl:hover { border-bottom-style: solid; }
table a, table .textbtn { color: var(--ink); text-decoration: none; }
table a:hover, table .textbtn:hover { color: var(--yel); text-decoration: underline; }
.textbtn { text-decoration-thickness: 1px; }
/* ------------------------------------------------------------------ birth charts */
.bc-form { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 14px 18px; align-items: start; margin-bottom: 20px; }
.bc-form .bc-place { grid-column: span 2; position: relative; }
.chk { display: flex; align-items: center; gap: 8px; font: 400 0.95rem var(--f); color: var(--fg); text-transform: none; letter-spacing: 0; cursor: pointer; }
.chk input { width: 18px; height: 18px; accent-color: var(--yel); }
.bc-sug { position: absolute; z-index: 6; left: 0; right: 0; top: 100%; margin-top: 4px; background: var(--well); border: 3px solid; border-color: var(--bevel-in); box-shadow: 0 8px 0 rgba(0, 0, 0, 0.45); max-height: 340px; overflow-y: auto; }
.bc-sug button { display: grid; width: 100%; text-align: left; padding: 9px 12px; background: none; border: 0; border-bottom: 1px solid var(--line); color: var(--ink); font: 400 1.05rem var(--f); cursor: pointer; }
.bc-sug button span { font-size: 0.85rem; color: var(--mid); }
.bc-sug button:hover, .bc-sug button:focus-visible { background: var(--hover); color: var(--yel); }
.bc-sug p { margin: 0; padding: 10px 12px; }
.bc-more { grid-column: 1 / -1; }
.bc-more > summary { cursor: pointer; font: 700 0.58rem var(--fl); text-transform: uppercase; letter-spacing: 0.06em; color: var(--yel); padding: 6px 0; }
.bc-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 12px 16px; margin-top: 10px; }
.bc-sum { font-size: 0.98rem; color: var(--mid); border-left: 4px solid var(--red-dk); padding: 4px 0 4px 12px; margin: 0 0 18px; }
.bc-wait { padding: 16px 0; }
.bc-top { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); gap: 28px; align-items: start; }
.bc-wheelbox { min-width: 0; }
.bwheel { width: 100%; max-width: 620px; height: auto; display: block; margin: 0 auto; }
.bw-rim { fill: #140c08; stroke: #6a6a6a; stroke-width: 3; }
.bw-z { stroke: #0c0806; stroke-width: 1.5; }
.bw-fire { fill: #4a1a10; } .bw-earth { fill: #2a3018; } .bw-air { fill: #3e3618; } .bw-water { fill: #142a3e; }
.bw-sg { font: 27px var(--sym); fill: var(--yel); text-anchor: middle; dominant-baseline: central; }
.bw-tick { stroke: #8a8a8a; stroke-width: 1; }
.bw-line { fill: none; stroke: #6a6a6a; stroke-width: 1.5; }
.bw-line.soft { stroke: rgba(255, 255, 255, 0.08); }
.bw-cusp { stroke: #6a6a6a; stroke-width: 1; }
.bw-cusp.ang { stroke: var(--red); stroke-width: 2.5; }
.bw-axis { stroke: var(--red); stroke-width: 2.5; }
.bw-hn { font: 15px var(--fl); fill: #9a958c; text-anchor: middle; dominant-baseline: central; }
.bw-asp { stroke-width: 1.4; opacity: 0.85; }
.bw-asp.easy { stroke: #3fa7ff; } .bw-asp.hard { stroke: #ff4a32; } .bw-asp.minor { stroke: #8fd46a; stroke-dasharray: 4 3; opacity: 0.6; }
.bw-pt { stroke: var(--yel); stroke-width: 2; }
.bw-p text { font: 27px var(--sym); fill: var(--ink); text-anchor: middle; dominant-baseline: central; paint-order: stroke; stroke: #000; stroke-width: 3px; }
.bw-p.mn text { font-size: 22px; fill: #d8c99a; }
.bw-p text.bw-deg { font: 13px var(--fl); fill: var(--yel); stroke-width: 2px; }
.bc-key { display: flex; flex-wrap: wrap; gap: 14px; justify-content: center; font: 700 0.52rem var(--fl); text-transform: uppercase; letter-spacing: 0.05em; color: var(--mid); }
.bc-key span::before { content: ""; display: inline-block; width: 16px; height: 3px; margin-right: 6px; vertical-align: middle; }
.bc-key .easy::before { background: #3fa7ff; } .bc-key .hard::before { background: #ff4a32; } .bc-key .minor::before { background: #8fd46a; }
.bc-big3 { display: grid; gap: 14px; }
.bc-side .bc-big3 { grid-template-columns: minmax(0, 1fr); }
#charts-vedic .bc-big3, .bc-big3.row { grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); margin: 10px 0 22px; }
.bc-b { display: grid; grid-template-columns: 54px minmax(0, 1fr); grid-template-rows: auto auto 1fr; column-gap: 14px; row-gap: 2px; background: var(--cell); border: 3px solid; border-color: var(--bevel-in); padding: 14px 16px; min-width: 0; }
.bc-b > .bc-g { grid-row: 1 / span 3; }
.bc-b > b:not(.bc-g) { font: 400 1.5rem/1.1 var(--fd); color: var(--ink); }
.bc-b p { margin: 6px 0 0; font-size: 0.98rem; line-height: 1.38; color: var(--fg); }
.bc-g { display: grid; place-items: center; width: 50px; height: 50px; background: var(--well); border: 3px solid; border-color: var(--bevel-in); color: var(--yel); font-size: 1.7rem; line-height: 1; font-weight: 400; text-shadow: 2px 2px 0 #000; }
.bc-g.txt { font: 400 1.25rem var(--fn); }
.bc-tab td, .bc-tab th { white-space: nowrap; }
.bc-tab .bc-g { display: inline-grid; width: 30px; height: 30px; font-size: 1.1rem; border-width: 2px; vertical-align: middle; margin-right: 6px; }
.bc-tab .bc-g.txt { font-size: 0.9rem; }
.bc-dig { font: 700 0.5rem var(--fl); text-transform: uppercase; letter-spacing: 0.04em; padding: 3px 6px; border: 2px solid currentColor; }
.bc-dig.domicile, .bc-dig.exaltation { color: var(--good); }
.bc-dig.detriment, .bc-dig.fall { color: var(--bad); }
.bc-each { display: grid; gap: 12px; margin: 10px 0 8px; }
.bc-pl { display: grid; grid-template-columns: 54px minmax(0, 1fr); gap: 14px; align-items: start; padding: 12px 0; border-top: 2px solid var(--hair); box-shadow: inset 0 1px 0 var(--line); }
.bc-pl h4 { margin: 0 0 4px; font: 400 1.15rem/1.2 var(--fd); color: var(--ink); }
.bc-pl p { margin: 0; line-height: 1.45; max-width: 92ch; }
/* a reading as a stack of small cards; a lead in bold sits on its own line (see polish() in app.js) */
.bc-list { display: grid; gap: 6px; margin: 10px 0 16px; padding: 0; list-style: none; line-height: 1.5; max-width: 100ch; }
.bc-list > li { padding: 10px 14px 11px; background: var(--cell); border: 2px solid #3a3631; border-left: 4px solid var(--yel); }
.bc-list b { color: var(--ink); }
.bc-list > li.ld > b:first-child { display: block; margin-bottom: 2px; font-size: 1.03rem; }
.bc-list > li.ld > b:first-child small { font-weight: 400; font-size: 0.85rem; color: var(--mid); }
/* traits as chips: green the good, red the bad */
.chips { display: flex; flex-wrap: wrap; gap: 5px; margin: 8px 0 0; padding: 0; list-style: none; }
.chips li { padding: 3px 8px 2px; border: 1px solid; font-size: 0.86rem; line-height: 1.35; }
.chips.g li { color: #9be897; border-color: rgba(92, 192, 79, 0.45); background: rgba(92, 192, 79, 0.08); }
.chips.r li { color: #ff9a85; border-color: rgba(255, 106, 77, 0.45); background: rgba(255, 106, 77, 0.08); }
.bc-ax { font-family: var(--sym); }
.bc-ax.easy { color: #3fa7ff; } .bc-ax.hard { color: #ff6a4d; }
#charts-western h3, #charts-vedic h3 { margin-top: 30px; scroll-margin-top: 160px; }
#charts-western h4 { margin: 18px 0 6px; font: 700 0.6rem var(--fl); text-transform: uppercase; letter-spacing: 0.06em; color: var(--yel); }
.bc-hs { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: -4px 0 20px; }
.bc-hs .label { margin-right: 6px; }
.bc-hs button { padding: 8px 16px; background: var(--well); border: 3px solid; border-color: var(--bevel-in); color: var(--ink); font: 400 1.1rem var(--f); cursor: pointer; }
.bc-hs button:hover { border-color: var(--yel); color: var(--yel); }
.bc-hs button.on { background: var(--red-dk); border-color: var(--yel); color: var(--yel); }
/* the parts of a chart reading as tiles in themed rows, each with its planet or sign */
.bc-toc { display: grid; gap: 10px; margin: 22px 0 8px; padding: 14px 16px; background: var(--cell); border: 3px solid; border-color: var(--bevel-in); scroll-margin-top: calc(var(--mast-h) + 12px); }
.bct-g { display: grid; grid-template-columns: 9.5rem minmax(0, 1fr); gap: 10px; align-items: center; }
.bct-row { display: flex; flex-wrap: wrap; gap: 6px; }
.bc-toc button { display: inline-flex; align-items: center; gap: 9px; padding: 5px 12px 5px 5px; background: var(--well); border: 2px solid #5a5a5a; color: var(--ink); font: 400 1.02rem/1 var(--f); cursor: pointer; text-shadow: 1px 1px 0 #000; }
.bct-gl { display: grid; place-items: center; width: 28px; height: 28px; background: #0d0a08; border: 2px solid #4e4e4e; color: var(--yel); font-size: 1.05rem; line-height: 1; text-shadow: none; }
.bc-toc button:hover, .bc-toc button:focus-visible { border-color: var(--yel); color: var(--yel); }
.bc-toc button:hover .bct-gl { border-color: var(--yel); }
.bc-h { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; }
.bc-h h3 { scroll-margin-top: calc(var(--mast-h) + 12px); }
.bc-up { flex: none; padding: 4px 8px; background: none; border: 2px solid #4e4e4e; color: var(--mid); font: 700 0.5rem var(--fl); text-transform: uppercase; letter-spacing: 0.05em; cursor: pointer; }
.bc-up:hover { border-color: var(--yel); color: var(--yel); }
/* a sign's facts as tiles, with its motto and myth beneath */
.sf { display: grid; gap: 12px; margin: 22px 0; }
.sf-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; }
.sf-t { display: grid; align-content: start; gap: 6px; padding: 12px 14px; background: var(--well); border: 3px solid; border-color: var(--bevel-in); }
.sf-t b { font: 400 1.12rem/1.25 var(--f); color: var(--ink); }
.sf-q { margin: 0; padding: 14px 18px; background: var(--cell); border-left: 4px solid var(--yel); }
.sf-q p { margin: 0 0 6px; font: 400 1.4rem/1.2 var(--fd); color: var(--title); }
.sf-q footer { color: var(--fg); }
/* 20, the hidden 11, on the Life Path 11 page */
.xp-hid { margin: 18px 0; padding: 12px 16px; background: var(--cell); border: 2px dashed var(--yel); }
.xp-hid p { margin: 4px 0 0; }
.xp-hid.on { border-style: solid; }
/* percentages with a bar: green from 70, yellow from 50, red below */
.pctb, .sm-bar { display: block; height: 10px; background: #0d0a08; border: 1px solid #4e4e4e; }
.pctb i, .sm-bar i { display: block; height: 100%; background: var(--red); }
.pctb.good i, .sm-r.good .sm-bar i { background: #5cc04f; }
.pctb.mid i, .sm-r.mid .sm-bar i { background: var(--yel); }
.good > summary .sm-p, .ml.good .ml-p, .ml-lp.good, .mv-r.good .mv-p { color: #6fe36a; }
.mid > summary .sm-p, .ml.mid .ml-p, .ml-lp.mid, .mv-r.mid .mv-p { color: var(--yel); }
.bad > summary .sm-p, .ml.bad .ml-p, .ml-lp.bad, .mv-r.bad .mv-p { color: var(--red); }
/* a sign's best and hardest matches: rows that open to say why */
.sm { display: grid; gap: 12px; margin: 26px 0; }
.sm-h { display: grid; gap: 4px; padding-bottom: 10px; border-bottom: 2px solid #4e4e4e; }
.sm-h h2 { margin: 0; }
.sm-h p { margin: 0; color: var(--fg); }
.sm-two { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.sm-two h3 { margin: 0 0 8px; }
.sm-r { margin-bottom: 6px; background: var(--well); border: 2px solid #4e4e4e; }
.sm-r[open] { border-color: var(--yel); }
.sm-r summary, .ml summary, .mv-r summary, .sm-all > summary, .mn-more > summary { cursor: pointer; list-style: none; }
.sm-r summary::-webkit-details-marker, .ml summary::-webkit-details-marker, .mv-r summary::-webkit-details-marker, .sm-all > summary::-webkit-details-marker, .mn-more > summary::-webkit-details-marker { display: none; }
.sm-r summary { display: grid; grid-template-columns: 30px 7.5rem minmax(0, 1fr) 3.6rem; align-items: center; gap: 10px; padding: 6px 10px; }
.sm-r .sign-ic { width: 28px; height: 28px; }
.sm-n { font: 400 1.05rem var(--f); color: var(--ink); }
.sm-p { font: 400 1.35rem var(--fn); text-align: right; text-shadow: 1px 1px 0 #000; }
.sm-r p { margin: 0; padding: 4px 12px 12px; }
.sm-all > summary, .mn-more > summary { display: inline-block; padding: 8px 12px; background: var(--well); border: 2px solid #4e4e4e; font: 700 0.56rem var(--fl); text-transform: uppercase; letter-spacing: 0.06em; color: var(--fg); }
.sm-all > summary:hover, .mn-more > summary:hover { border-color: var(--yel); color: var(--yel); }
.sm-all[open] > summary { margin-bottom: 10px; }
/* the match: the overall score, six parts of life that open to explain themselves, and the Vedic kootas */
.mo { display: flex; align-items: center; gap: 18px; flex-wrap: wrap; margin: 22px 0 14px; }
.mo-n { font-size: 5rem; line-height: 1; }
.mo-w { margin: 2px 0; font: 400 1.6rem var(--fd); color: var(--title); }
.mo .soft { margin: 0; }
.ml-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; align-items: start; margin-bottom: 24px; }
.ml { background: var(--well); border: 3px solid; border-color: var(--bevel-in); }
.ml[open] { grid-column: 1 / -1; border-color: var(--yel); }
.ml summary { display: grid; grid-template-columns: 40px minmax(0, 1fr) auto; grid-template-areas: "i t p" "bar bar bar"; gap: 8px 12px; align-items: center; padding: 12px 14px; }
.ml summary:hover .ml-t b { color: var(--yel); }
.ml-i { grid-area: i; display: grid; place-items: center; }
.ml-i .pxi { width: 36px; height: 36px; }
.ml-t { grid-area: t; display: grid; gap: 3px; min-width: 0; }
.ml-t b { font: 400 1.15rem/1.15 var(--fd); color: var(--ink); }
.ml-t small { font: 700 0.5rem var(--fl); text-transform: uppercase; letter-spacing: 0.06em; color: var(--mid); }
.ml-p { grid-area: p; font: 400 2.1rem/1 var(--fn); text-shadow: 2px 2px 0 #000; }
.ml summary .pctb { grid-area: bar; }
.ml-b { padding: 0 14px 14px; }
.ml-b > p { margin: 0 0 10px; }
.ml-l { display: grid; gap: 8px; margin: 0; padding: 0; list-style: none; }
.ml-l li { display: grid; grid-template-columns: 3.8rem minmax(0, 1fr); gap: 12px; padding: 10px 12px; background: var(--cell); border: 2px solid #4e4e4e; }
.ml-lp { font: 400 1.45rem/1 var(--fn); text-shadow: 1px 1px 0 #000; }
.ml-l p { margin: 4px 0 0; }
.mv { margin-bottom: 20px; }
.mv-top { display: flex; flex-wrap: wrap; align-items: center; gap: 18px; margin-bottom: 12px; }
.mv-n { font: 400 3.6rem/1 var(--fn); color: var(--red); text-shadow: 2px 2px 0 #000; }
.mv-n small { font-size: 1.4rem; color: var(--mid); }
.mv-w { font: 400 1.5rem var(--fd); color: var(--title); }
.mv-top p { max-width: 72ch; margin: 4px 0 0; }
.mv-list { display: grid; gap: 6px; }
.mv-r { background: var(--well); border: 2px solid #4e4e4e; }
.mv-r[open] { border-color: var(--yel); }
.mv-r summary { display: grid; grid-template-columns: 8rem minmax(0, 1fr) 4.2rem 7rem; align-items: center; gap: 12px; padding: 8px 12px; }
.mv-k { font: 700 0.56rem var(--fl); text-transform: uppercase; letter-spacing: 0.06em; color: var(--lab); }
.mv-pair { color: var(--fg); min-width: 0; }
.mv-p { font: 400 1.4rem var(--fn); text-align: right; text-shadow: 1px 1px 0 #000; }
.mv-p small { font-size: 0.9rem; color: var(--mid); }
.mv-r p { margin: 0; padding: 0 12px 12px; }
.mn-more { margin: 10px 0 0; }
.mn-more[open] > summary { margin-bottom: 12px; }
@media (max-width: 900px) { .ml-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 640px) {
  .sf-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .sf-q p { font-size: 1.15rem; }
  .sm-two { grid-template-columns: minmax(0, 1fr); }
  .sm-r summary { grid-template-columns: 26px 5.8rem minmax(0, 1fr) 3rem; gap: 8px; }
  .mo-n { font-size: 3.4rem; }
  .mo-w { font-size: 1.25rem; }
  .ml-grid { grid-template-columns: minmax(0, 1fr); }
  .ml summary { padding: 10px 12px; }
  .ml-p { font-size: 1.7rem; }
  .mv-n { font-size: 2.6rem; }
  .mv-r summary { grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "k p" "pair pair" "bar bar"; gap: 4px 10px; }
  .mv-r .mv-k { grid-area: k; }
  .mv-r .mv-pair { grid-area: pair; font-size: 0.9rem; }
  .mv-r .mv-p { grid-area: p; }
  .mv-r .pctb { grid-area: bar; }
  .ml-l li { grid-template-columns: 3rem minmax(0, 1fr); }
}
/* the Arcana read in depth: each card as a tall numbered card beside its reading */
.ac-list { display: grid; gap: 14px; }
.ac { display: grid; grid-template-columns: 86px minmax(0, 1fr); gap: 18px; padding: 16px; background: var(--cell); border: 3px solid; border-color: var(--bevel-in); }
.ac-n { display: grid; place-items: center; height: 128px; background: #0d0a08; border: 3px solid var(--yel); box-shadow: inset 0 0 0 3px #0d0a08, inset 0 0 0 5px var(--red-dk); font: 400 2.6rem var(--fn); color: var(--red); text-shadow: 2px 2px 0 #000; }
.ac-b { display: grid; align-content: start; gap: 8px; min-width: 0; }
.ac-b h4, .ac-b p { margin: 0; }
.ac-why { color: var(--mid); font-size: 0.94rem; }
.ac-dl { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; margin: 4px 0 0; }
.ac-dl div { padding: 10px 12px; background: var(--well); border: 2px solid #4e4e4e; }
.ac-dl dt { font: 700 0.52rem var(--fl); text-transform: uppercase; letter-spacing: 0.06em; color: var(--lab); }
.ac-dl dd { margin: 6px 0 0; }
.ac-spread { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.ac-sp { display: grid; justify-items: center; align-content: start; gap: 6px; padding: 16px 12px; text-align: center; background: var(--cell); border: 3px solid; border-color: var(--bevel-in); }
.ac-sp h4, .ac-sp p { margin: 0; }
.ac-sn { display: grid; place-items: center; width: 64px; height: 92px; background: #0d0a08; border: 3px solid var(--yel); font: 400 2rem var(--fn); color: var(--red); text-shadow: 2px 2px 0 #000; }
@media (max-width: 700px) {
  .ac { grid-template-columns: minmax(0, 1fr); }
  .ac-n { width: 72px; height: 100px; }
  .ac-dl, .ac-spread { grid-template-columns: minmax(0, 1fr); }
}
/* Compare two charts: the two people side by side */
.cs-two { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; margin-bottom: 18px; }
.cs-p { display: grid; align-content: start; gap: 12px; padding: 14px 16px 0; background: var(--cell); border: 3px solid; border-color: var(--bevel-in); }
.cs-ph { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 8px; }
.cs-ph h4 { margin: 0; }
.cs-me { margin: 0 0 16px; }
.cs-p .bc-form { margin-bottom: 14px; }
.cs-p .bc-form .bc-place { grid-column: 1 / -1; }
@media (max-width: 900px) { .cs-two { grid-template-columns: minmax(0, 1fr); } }
.vc-pair { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; }
.vc-pair figure { margin: 0; min-width: 0; }
.vc-pair figcaption { margin-top: 8px; font: 700 0.56rem/1.4 var(--fl); text-transform: uppercase; letter-spacing: 0.05em; color: var(--yel); text-align: center; }
.vchart { width: 100%; max-width: 440px; display: block; margin: 0 auto; background: #140c08; }
.vc-box { fill: none; stroke: #8a8a8a; stroke-width: 3; }
.vc-line { fill: none; stroke: #8a8a8a; stroke-width: 2; }
.vc-cell { fill: none; stroke: #6a6a6a; stroke-width: 2; }
.vc-cell.lag { fill: rgba(240, 192, 32, 0.08); }
.vc-lag { stroke: var(--yel); stroke-width: 2.5; }
.vc-sn { font: 13px var(--fl); fill: #9a958c; text-anchor: middle; dominant-baseline: central; }
.vc-sl { font: 11px var(--fl); fill: #9a958c; }
.vc-title { font: 14px var(--fl); fill: var(--yel); text-anchor: middle; }
.vc-p { font: 17px var(--fn); fill: var(--ink); text-anchor: middle; dominant-baseline: central; }
.vc-p.asc { fill: var(--red); }
.vc-p.ex { fill: var(--good); }
.vc-p.deb { fill: var(--bad); }
.vc-vargas { display: flex; flex-wrap: wrap; gap: 6px; justify-content: center; margin: 14px 0 6px; }
.vc-vargas button { min-width: 48px; padding: 6px 8px; background: var(--well); border: 3px solid; border-color: var(--bevel-in); color: var(--ink); font: 400 1.05rem var(--fn); cursor: pointer; }
.vc-vargas button:hover { border-color: var(--yel); color: var(--yel); }
.vc-vargas button.on { background: var(--red-dk); border-color: var(--yel); color: var(--yel); }
.vd-list { display: grid; gap: 6px; }
.vd-md { background: var(--cell); border: 3px solid; border-color: var(--bevel-in); padding: 8px 14px; }
.vd-md.on { border-color: var(--yel); }
.vd-md summary { cursor: pointer; font-size: 1.05rem; }
.vd-md summary b { color: var(--yel); }
.vd-md p { margin: 8px 0; }
.vd-ad { columns: 3 220px; margin: 0; padding-left: 18px; font-size: 0.95rem; color: var(--fg); }
.vd-ad li.on { color: var(--yel); font-weight: 700; }
/* the year ahead */
.tr-months { display: grid; gap: 18px; }
.tr-months h4 { margin: 0 0 6px; font: 700 0.62rem var(--fl); text-transform: uppercase; letter-spacing: 0.06em; color: var(--yel); }
.tr-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.tr-list li { display: grid; grid-template-columns: 2.6rem minmax(0, 1fr); gap: 10px; align-items: baseline; line-height: 1.4; padding: 6px 0; border-bottom: 1px solid var(--line); }
.tr-d { font: 400 1.5rem/1 var(--fn); color: var(--red); text-align: right; text-shadow: 2px 2px 0 #000; }
.tr-list b { color: var(--ink); }
#charts-synastry .bc-big3.row, #charts-return .bc-side h3 { margin-top: 0; }/* ------------------------------------------------------------------ the Destiny Matrix */
.mx-top { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); gap: 28px; align-items: start; }
.mx-fig { margin: 0; min-width: 0; }
.mxsvg { width: 100%; max-width: 560px; display: block; margin: 0 auto; }
.mx-ring { fill: #140c08; stroke: #4a4a4a; stroke-width: 2; }
.mx-sq { stroke: var(--red); stroke-width: 2.5; fill: none; }
.mx-sq.anc { stroke: #8a8a8a; }
.mx-axis { stroke: #5a5a5a; stroke-width: 1.5; stroke-dasharray: 5 4; }
.mx-pt circle { fill: #2a2a2a; stroke: #b8b8b8; stroke-width: 3; }
.mx-pt text { font: 400 22px var(--fn); fill: var(--ink); text-anchor: middle; dominant-baseline: central; paint-order: stroke; stroke: #000; stroke-width: 3px; }
.mx-pt.main circle { fill: #5a0c02; stroke: var(--red); }
.mx-pt.main.a circle, .mx-pt.main.b circle { fill: #3a1a5a; stroke: #b08ae0; }
.mx-pt.main text { font-size: 26px; }
.mx-pt.anc circle { fill: #1a1a1a; stroke: #e8e4da; }
.mx-pt.in1 circle { fill: #10243a; stroke: #4a8ad0; }
.mx-pt.in2 circle { fill: #102a1a; stroke: #4aa060; }
.mx-pt.in1 text, .mx-pt.in2 text { font-size: 17px; }
.mx-pt.centre circle { fill: #4a3604; stroke: var(--yel); stroke-width: 4; }
.mx-pt.centre text { font-size: 32px; fill: var(--yel); }
.mx-lab { font: 13px var(--fl); fill: var(--yel); text-anchor: middle; dominant-baseline: central; text-transform: uppercase; }
.mx-side h3 { margin-top: 0; }
.mx-pur { display: grid; gap: 10px; margin: 0; }
.mx-pur div { background: var(--cell); border: 3px solid; border-color: var(--bevel-in); padding: 10px 14px; }
.mx-pur dt { font: 700 0.56rem var(--fl); text-transform: uppercase; letter-spacing: 0.06em; color: var(--yel); }
.mx-pur dd { margin: 4px 0 0; display: grid; gap: 4px; }
.mx-pur dd b { font: 400 1.3rem/1.1 var(--fd); color: var(--ink); }
.mx-pur dd span { font-size: 0.94rem; color: var(--fg); line-height: 1.35; }
.mx-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 12px; }
.mx-card { display: grid; grid-template-columns: 58px minmax(0, 1fr); gap: 12px; background: var(--cell); border: 3px solid; border-color: var(--bevel-in); padding: 12px 14px; }
.mx-n { display: grid; place-items: center; width: 54px; height: 54px; background: var(--well); border: 3px solid; border-color: var(--bevel-in); font: 400 2rem var(--fn); color: var(--red); text-shadow: 2px 2px 0 #000; }
.mx-card .label { margin: 0; }
.mx-card h4 { margin: 2px 0 4px; font: 400 1.2rem/1.1 var(--fd); color: var(--ink); }
.mx-card p { margin: 3px 0 0; font-size: 0.94rem; line-height: 1.35; }
.mx-tr b { font-family: var(--fn); margin-right: 4px; }/* ------------------------------------------------------------------ everyday numbers */
.stack { display: grid; gap: 12px; max-width: 640px; margin-bottom: 18px; }
.stack textarea { width: 100%; font: 400 1.1rem var(--f); color: var(--red); background: var(--well); border: 3px solid; border-color: var(--bevel-in); padding: 8px 12px; resize: vertical; }
.dgrid { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 6px; }
.dg { display: grid; gap: 2px; padding: 8px; background: var(--cell); border: 3px solid; border-color: var(--bevel-in); min-width: 0; }
.dg b { font: 400 1.8rem/1 var(--fn); color: var(--ink); }
.dg span { font-size: 0.82rem; color: var(--mid); overflow-wrap: anywhere; }
.dg.best { border-color: var(--yel); background: rgba(240, 192, 32, 0.1); }
.dg.best b { color: var(--yel); }
.dg.low { opacity: 0.45; }
.cell-v .tagx, .cell-v small.tagx { font-size: 0.55rem; vertical-align: middle; margin-left: 6px; }
td .tagx { font-size: 0.5rem; padding: 3px 5px; margin-left: 4px; }/* ------------------------------------------------------------------ responsive */
[hidden] { display: none !important; }
@media (max-width: 1080px) {
  .mg-cols { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .lnd-grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 28px; }
  .lnd-grid .p-calc { grid-column: 1 / -1; order: -1; }
  .hud { grid-template-columns: 1fr 0.8fr 104px 1fr 0.9fr 1.1fr; }
  .hud-arms-s { display: none; }
}
@media (max-width: 900px) {
  .hero, .two, .numcard-body, .tree-row, .diagram-row, .foot-row, .traits { grid-template-columns: minmax(0, 1fr); }
  .bk-row { grid-template-columns: 120px minmax(0, 1fr); }
  .bk-n .ink { font-size: 3.8rem; }
  .main4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .gt-core { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .stars4, .pillars { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .filters { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .filters .field:first-child { grid-column: 1 / -1; }
  .boards { grid-template-columns: minmax(0, 1fr); }
  .toc { grid-template-columns: minmax(0, 1fr); }
  .cores { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .xp-head { gap: 22px; }
  .xp-n { min-width: 130px; }
  :root { --hud-h: 84px; }
  .hud { grid-template-columns: 1fr 0.8fr 76px 1fr 0.9fr 0.9fr; }
  .bc-top { grid-template-columns: minmax(0, 1fr); }
  .mx-top { grid-template-columns: minmax(0, 1fr); }
  .hud-v { font-size: 2.6rem; }
  .hud-v.hud-sg { font-size: 1.8rem; }
  .hud-world .globe { width: 44px; height: 44px; }
  .hud-face svg { width: 52px; height: 52px; }
  .hud-face .hud-l { display: none; }
  .hud-t { font-size: 0.36rem; padding: 2px 3px; }
  .hud-s { margin: 4px 2px; border-width: 3px; }
}
@media (max-width: 640px) {
  html { font-size: 17px; }
  .mast { position: relative; }
  .subnav { top: 0; }
  .mast-row { gap: 8px; flex-wrap: wrap; }
  .wordmark .wm-sub { display: none; }
  .search { order: 3; flex-basis: 100%; max-width: none; margin-left: 0; }
  .wordmark .wm { font-size: 1.15rem; }
  .wordmark { column-gap: 8px; }
  .wm-owl { width: 34px; height: 34px; padding: 2px; border-width: 2px; }
  .mn-read::after { display: none; }
  .menu { margin-left: auto; gap: 6px; }
  .mn { padding: 9px 9px 8px; font-size: 0.54rem; letter-spacing: 0.04em; }
  .mn-x, .mn-lib::before, .mn-bc::before { display: none; }
  .bc-pop { left: auto; right: -60px; transform: none; }
  .mn-read::after { margin-left: 6px; }
  .mg-cols { grid-template-columns: minmax(0, 1fr); }
  .mega .mg-in { padding: 0 14px 16px; }
  .block, .plate, .xp, .numcard, .page-head { padding-left: 16px; padding-right: 16px; }
  .block { margin-top: 32px; padding-top: 26px; padding-bottom: 28px; }
  .xp, .numcard { padding-top: 24px; padding-bottom: 30px; gap: 24px; }
  .lnd-grid { grid-template-columns: minmax(0, 1fr); gap: 24px; }
  .tb { grid-template-columns: minmax(0, 1fr); gap: 14px; }
  .tb-c { padding: 16px 16px 18px; border-left-width: 8px; }
  .tb-c li { font-size: 0.98rem; }
  .xp-head { flex-wrap: wrap; gap: 18px; padding-bottom: 22px; }
  .xp-n { min-width: 0; padding: 10px 16px 2px; }
  .xp-n .ink { font-size: 5.6rem; }
  .xp-line { font-size: 1.16rem; }
  .xp-text { font-size: 1.06rem; }
  .xp-facts > div { grid-template-columns: minmax(0, 1fr); gap: 4px; }
  .xp-nav a { min-width: 38px; height: 36px; font-size: 1.15rem; }
  .xp-nav a .sign-ic { width: 26px; height: 26px; }
  .bk-row { grid-template-columns: 86px minmax(0, 1fr); gap: 16px; padding: 16px 14px 18px; }
  .bk-n { min-height: 86px; padding: 8px 2px; }
  .bk-n .ink { font-size: 3rem; }
  .bk-n .ink.long { font-size: 1.1rem; }
  .bk-n .tagx { font-size: 0.42rem; white-space: normal; text-align: center; }
  .bk-x h3 { font-size: 1.25rem; }
  .bk-x p { font-size: 1rem; }
  .bk-nav .btn { font-size: 0.5rem; padding: 7px 8px; }
  .nc-res { grid-template-columns: minmax(0, 1fr); }
  .cal-dh { gap: 16px; }
  .cal-big { font-size: 4rem; padding: 8px 12px 2px; }
  .cal-dh h3 { font-size: 1.2rem; }
  .cal-facts { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
  .sn-arr { width: 28px; }
  .form { grid-template-columns: minmax(0, 1fr); }
  .defs > div { grid-template-columns: minmax(0, 1fr); gap: 2px; }
  .stop { grid-template-columns: auto minmax(0, 1fr); padding: 16px; gap: 0 14px; margin-top: 20px; }
  .stop-c { display: none; }
  .stop-n { font-size: 3.6rem; padding: 6px 8px 2px; }
  .stop-t { font-size: 2rem; }
  .four-v { font-size: 3.2rem; }
  .four-v small { margin-left: 2px; }
  .four-c { padding: 10px 6px 12px; }
  .four-c .tagx { white-space: normal; max-width: 100%; font-size: 0.46rem; }
  .four-l { font-size: 0.5rem; letter-spacing: 0.02em; overflow-wrap: anywhere; }
  .four-t { font-size: 0.86rem; overflow-wrap: anywhere; }
  .read summary { grid-template-columns: 3.4rem minmax(0, 1fr) auto; }
  .read-body { padding-left: 0; }
  .corr > div { grid-template-columns: 7rem minmax(0, 1fr); }
  .pbar { flex-direction: column; }
  .pbar-age { display: none; }
  .pbar-wrap { margin-bottom: 16px; }
  .cday { min-height: 48px; padding: 3px; }
  .pd { font-size: 1.4rem; }
  .ud { display: none; }
  .mx { width: 28px; height: 26px; font-size: 0.9rem; }
  .dr { width: 26px; height: 26px; }
  .stars4 { grid-template-columns: minmax(0, 1fr); }
  .prow { grid-template-columns: 2.4rem minmax(0, 1fr) 3.4rem; padding: 9px 8px; }
  .prow.norank { grid-template-columns: minmax(0, 1fr) 3.4rem; }
  .prow-date, .prow-sign { display: none; }
  .filters { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .today-big .ink { font-size: 5rem; }
  .pillar-cn { font-size: 2rem; }
  .degrees { columns: 1; }
  .lb-list button { grid-template-columns: 1.4rem 7rem minmax(0, 1fr) 2.8rem 2.6rem; gap: 6px; font-size: 0.92rem; }
  .lb-cols { grid-template-columns: 1.4rem 7rem minmax(0, 1fr) 2.8rem 2.6rem; gap: 6px; }
  .cf-top, .cf-row { grid-template-columns: minmax(0, 1fr); }
  .pill.sg .pl-t { display: none; }
  .cf-sel .field { flex: 1 1 140px; }
  .c-form { padding: 12px; }
  .pager { grid-template-columns: minmax(0, 1fr); }
  .pager a.nx { grid-column: 1; }
  .ch-page .block > header h2 { font-size: 2rem; }
  .cores { grid-template-columns: minmax(0, 1fr); }
  .c-chart-g { grid-template-columns: repeat(9, minmax(0, 1fr)); }
  .hud { grid-template-columns: 1fr 0.8fr 54px 1fr 0.9fr 0.9fr; }
  .bc-form .bc-place { grid-column: auto; }
  .bct-g { grid-template-columns: minmax(0, 1fr); gap: 6px; }
  .bc-toc { padding: 12px; }
  .vc-pair { grid-template-columns: minmax(0, 1fr); }
  .dgrid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .bc-b, .bc-pl { grid-template-columns: 44px minmax(0, 1fr); column-gap: 10px; }
  .bc-g { width: 42px; height: 42px; font-size: 1.4rem; }
  .hud-v { font-size: 2.2rem; }
  .hud-world .globe { width: 38px; height: 38px; }
  .hud-lw { display: none; }
  .hud-l { font-size: 0.4rem; }
  .hud-face svg { width: 44px; height: 44px; }
}
@media (prefers-reduced-motion: reduce) {
  .vx-flow { animation: none; display: none; }
  .loading::after, .loading::before, .owl-eyes, .hud-q, a.hud-world:hover .gl-land { animation: none; }
}
/* ------------------------------------------------------------------ one type system, last so it wins
   Titles: Black Ops One in one orange. Subtitles: Black Ops One in one cream, as written. Labels: Silkscreen in one
   yellow. Numbers and body text keep the Jersey faces. Good and bad trait headings keep their green and red. */
h1, .hero h1, .stop-t a, .block > header h2, .ch-page .block > header h2, .xp-h h1, .xp-h h2, .detail-head h1, .numcard-head h2, .read-end h2, .plate > h2, .cal-title, .ws-head h2, .ln-head h2, .lp-pop h2, .page-head h1 {
  font-family: var(--fd); background: none; -webkit-background-clip: border-box; background-clip: border-box; color: var(--title); -webkit-text-fill-color: currentColor; filter: none; text-shadow: 3px 3px 0 #000;
}
h3, h4, .bk-x h3, .cal-dh h3, .dc-what h3, .zc h3, .lp-t, .mc-top b, .cat-h b, .mg-s, .bc-pl h4, .mx-card h4, .bc-tools a b, .bc-pop a b, .lb h3, .lb-h h3, #charts-western h4, .tr-months h4 {
  font-family: var(--fd); font-weight: 400; background: none; -webkit-background-clip: border-box; background-clip: border-box; color: var(--sub); -webkit-text-fill-color: currentColor; filter: none; text-shadow: 2px 2px 0 #000; letter-spacing: 0.01em;
}
h3 { font-size: 1.3rem; line-height: 1.15; text-transform: none; }
h4 { font-size: 1.05rem; line-height: 1.2; text-transform: none; }
.lb h3, .lb-h h3 { font-size: 1.15rem; }
#charts-western h4, .tr-months h4 { font-size: 1.02rem; text-transform: none; }
.mg-s:hover, .cat-h b:hover, .bc-tools a:hover b, .bc-pop a:hover b { color: var(--lab); filter: none; }
.label, thead th, .dc-k, .mc-w, .cf-l, .lb-cols, .dc-facts dt, .mc-facts dt, .dc-date, .mc-date, .xp-kick { font-family: var(--fl); color: var(--lab); }
/* trait boxes keep their meaning colours */
.tr.good h4, .tb-g h4 { color: var(--good); font-family: var(--fl); font-size: 0.7rem; text-transform: uppercase; letter-spacing: 0.1em; text-shadow: 1px 1px 0 #000; }
.tr.bad h4, .tb-b h4 { color: var(--bad); font-family: var(--fl); font-size: 0.7rem; text-transform: uppercase; letter-spacing: 0.1em; text-shadow: 1px 1px 0 #000; }
.wealth-box h3 { color: var(--good); }

/* ------------------------------------------------------------------ the owner's window */
.adm-panel { width: min(1000px, 100%); }
.adm-cols { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.3fr); gap: 20px; align-items: start; }
.adm-cols > section { padding: 16px 18px; background: var(--cell); border: 3px solid; border-color: var(--bevel-in); }
.adm-cols h3 { margin-top: 0; }
.adm-cols section h3 + div h3, .adm-cols #adm-visits h3 { margin: 22px 0 10px; }
.adm-big { margin: 4px 0 0; font: 400 clamp(3.4rem, 9vw, 5.4rem)/0.9 var(--fn); color: var(--red); text-shadow: 4px 4px 0 #000; }
.adm-sub { margin: 6px 0 12px; color: var(--fg); }
.adm-facts { display: grid; grid-template-columns: repeat(auto-fit, minmax(110px, 1fr)); gap: 8px; margin: 0; }
.adm-facts div { padding: 8px 10px; background: var(--well); border: 2px solid #3a3a3a; }
.adm-facts dt { font: 700 0.46rem var(--fl); text-transform: uppercase; letter-spacing: 0.06em; color: var(--lab); }
.adm-facts dd { margin: 4px 0 0; font: 400 1.6rem/1 var(--fn); color: var(--ink); }
.adm-cc { list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; }
.adm-cc li { display: grid; grid-template-columns: 36px minmax(0, 1fr) minmax(40px, 120px) auto; gap: 10px; align-items: center; padding: 6px 8px; background: var(--well); border: 2px solid #3a3a3a; }
.adm-cc li > span:last-child { font: 400 1.15rem var(--fn); color: var(--ink); text-align: right; }
.adm-cc li b { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.adm-cc .cc { text-align: center; }
.adm-bar { height: 10px; background: #000; border: 1px solid #3a3a3a; }
.adm-bar i { display: block; height: 100%; background: linear-gradient(#ff7040, var(--red-dk)); }
.foot-note { font-size: 0.85rem; color: var(--mid); }
@media (max-width: 760px) { .adm-cols { grid-template-columns: minmax(0, 1fr); } .adm-cc li { grid-template-columns: 34px minmax(0, 1fr) auto; } .adm-cc li .adm-bar { display: none; } }

/* ------------------------------------------------------------------ 404 */
.nf { max-width: 760px; margin: 40px auto; padding: 34px 32px 30px; display: grid; justify-items: center; gap: 10px; text-align: center; }
.nf-code { margin: 0; font: 400 clamp(5rem, 16vw, 9rem)/0.8 var(--fn); color: var(--red); text-shadow: 5px 5px 0 #000; padding: 14px 26px 4px; background: var(--well); border: 4px solid; border-color: var(--bevel-in); }
.nf h1 { margin: 14px 0 0; font-size: clamp(1.7rem, 4.6vw, 2.8rem); line-height: 1; text-transform: uppercase; }
.nf-t { margin: 0; max-width: 56ch; }
.nf-t code { font: 400 1rem var(--f); color: var(--yel); overflow-wrap: anywhere; }
.nf .c-acts { justify-content: center; }

/* ------------------------------------------------------------------ the owl's window: every section as a square icon */
button.hud-s { font: inherit; color: inherit; cursor: pointer; padding: 4px; }
.hud-face:hover { border-color: var(--yel); }
.pxi { display: block; image-rendering: pixelated; }
.ln { position: fixed; inset: 0; z-index: 90; display: flex; justify-content: center; align-items: flex-start; padding: max(16px, env(safe-area-inset-top, 0px)) max(16px, env(safe-area-inset-right, 0px)) 16px max(16px, env(safe-area-inset-left, 0px)); background: rgba(6, 3, 2, 0.82); overflow-y: auto; }
body.ln-open, body.ws-open { overflow: hidden; }
.ln-panel { width: min(1080px, 100%); margin: 3vh 0 calc(var(--hud-h) + 12px); display: grid; gap: 18px; padding: 20px 22px 24px; background: var(--grit), linear-gradient(135deg, #5a5a5a, #2c2c2c); background-blend-mode: overlay, normal; border: 4px solid; border-color: var(--bevel); box-shadow: 0 12px 0 rgba(0, 0, 0, 0.55); }
.ln-head { display: grid; grid-template-columns: 64px minmax(0, 1fr) auto; gap: 16px; align-items: center; }
.ln-head > svg { width: 64px; height: 64px; background: #120a06; border: 3px solid; border-color: var(--bevel-in); }
.ln-head h2 { margin: 0; font-size: 2rem; line-height: 1; text-transform: uppercase; }
.ln-head p { margin: 6px 0 0; color: var(--fg); font-size: 0.98rem; }
.ln-quick, .ln-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(132px, 1fr)); gap: 10px; }
.ln-part { display: grid; gap: 10px; }
.ln-ph { margin: 6px 0 0; display: flex; align-items: center; gap: 10px; font: 700 0.62rem var(--fl); text-transform: uppercase; letter-spacing: 0.1em; color: var(--lab); }
.ln-ph span { display: inline-grid; place-items: center; min-width: 34px; height: 26px; padding: 0 6px; background: var(--red-dk); color: var(--yel); border: 2px solid #000; font: 400 1.2rem/1 var(--fn); letter-spacing: 0; }
.ln-ph::after { content: ""; flex: 1; height: 2px; background: var(--hair); box-shadow: 0 1px 0 var(--line); }
/* a tile is a square steel plate with the icon set into a dark well */
.ln-t { min-height: 150px; display: grid; grid-template-rows: auto auto auto; align-content: start; justify-items: center; gap: 6px; padding: 18px 8px 12px; background: var(--rivets), linear-gradient(135deg, #575757, #333 55%, #444); border: 3px solid; border-color: var(--bevel); color: var(--ink); text-decoration: none; text-align: center; box-shadow: 0 4px 0 rgba(0, 0, 0, 0.45); }
.ln-t > svg { width: 60px; height: 60px; margin-bottom: 4px; padding: 6px; background: #120a06; border: 3px solid; border-color: var(--bevel-in); box-sizing: content-box; }
.ln-t > .globe { overflow: visible; }
.ln-t b { font: 400 0.98rem/1.05 var(--fd); color: var(--sub); text-shadow: 2px 2px 0 #000; }
.ln-t small { font: 700 0.46rem var(--fl); text-transform: uppercase; letter-spacing: 0.06em; color: var(--lab); }
.ln-t:hover, .ln-t:focus-visible { border-color: var(--yel); transform: translateY(-2px); box-shadow: 0 6px 0 rgba(0, 0, 0, 0.45); }
.ln-t:hover b { color: var(--yel); }
.ln-t:hover .gl-land { animation: globe-spin 4.8s steps(32) infinite; }
.ln-g { font: 2.4rem/1 var(--sym); color: var(--yel); }
.ln-head > div { min-width: 0; }
@media (max-width: 560px) { .ln-head { grid-template-columns: 44px minmax(0, 1fr) auto; gap: 10px; } .ln-head > svg { width: 44px; height: 44px; } .ln-head h2 { font-size: 1.35rem; overflow-wrap: anywhere; } .ln-head p { font-size: 0.88rem; } }
@media (max-width: 560px) { .ln-quick, .ln-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 7px; } .ln-t { min-height: 0; padding: 12px 4px 10px; } .ln-t > svg { width: 44px; height: 44px; padding: 4px; } .ln-t b { font-size: 0.78rem; } .ln-t small { display: none; } .ln-panel { padding: 14px 12px 18px; } }
@media (prefers-reduced-motion: reduce) { .ln-t:hover { transform: none; } .ln-t:hover .gl-land, .subnav a.sn-home .gl-land { animation: none; } }

/* ------------------------------------------------------------------ the birthday book */
.mn-book { display: inline-flex; align-items: center; gap: 8px; }
.mn-book .pxi { flex: none; width: 22px; height: 22px; max-width: none; }
.mn.mn-book { min-width: 48px; justify-content: center; }
.bk-panel { width: min(1000px, 100%); }
.bk-cols { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); gap: 24px; align-items: start; }
.bk-cols h3 { margin-top: 0; }
.bk-list { display: grid; gap: 8px; }
.bk-row { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 8px 14px; align-items: center; padding: 10px 12px; background: var(--well); border: 3px solid; border-color: var(--bevel-in); }
.bk-who { display: grid; gap: 2px; min-width: 0; }
.bk-who b { font: 400 1.15rem/1.15 var(--fd); color: var(--sub); text-shadow: 2px 2px 0 #000; }
.bk-who small { font: 700 0.48rem var(--fl); text-transform: uppercase; letter-spacing: 0.06em; color: var(--lab); }
.bk-who span { font-size: 0.92rem; color: var(--mid); overflow-wrap: anywhere; }
.bk-row .prow-lp { font-size: 2rem; }
.bk-btns { grid-column: 1 / -1; display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.bk-sure { color: var(--bad); margin-right: 6px; }
.bk-form { display: grid; gap: 12px; }
.bk-form input:not([type="checkbox"]) { width: 100%; }
.bk-msg { min-height: 1.4em; margin: 0; color: var(--good); }
.bk-empty { margin: 0; }
/* the town list in the book drops under its own field */
.bk-form .bc-place { position: relative; }
/* a birthday field with its book button: one control, the button set into the right end */
.bk-wrap { position: relative; display: flex; align-items: stretch; min-width: 0; width: 100%; }
.bk-wrap > input { flex: 1 1 auto; min-width: 0; width: auto; }
.bk-btn { flex: none; width: 46px; display: grid; place-items: center; padding: 0; margin-left: 4px; background: linear-gradient(#5a5a5a, #2e2e2e); border: 3px solid; border-color: #9a9a9a #161616 #161616 #9a9a9a; cursor: pointer; }
.bk-btn .pxi { width: 26px; height: 26px; }
.bk-btn:hover, .bk-btn[aria-expanded="true"] { border-color: #161616 #9a9a9a #9a9a9a #161616; background: linear-gradient(#4a3a10, #241a06); }
.bk-menu { position: absolute; z-index: 30; top: calc(100% + 6px); left: 0; width: min(330px, calc(100vw - 32px)); max-height: 340px; overflow-y: auto; display: grid; gap: 4px; padding: 10px; background: linear-gradient(#4a4a4a, #262626); border: 3px solid; border-color: var(--bevel); box-shadow: 0 8px 0 rgba(0, 0, 0, 0.5); text-align: left; }
.bk-menu .label { margin: 0 2px 4px; }
.bk-menu button { display: grid; gap: 2px; width: 100%; text-align: left; padding: 8px 10px; background: var(--well); border: 2px solid #3a3a3a; color: var(--ink); cursor: pointer; font: 400 1rem var(--f); }
.bk-menu button b { font: 400 1rem/1.15 var(--fd); color: var(--sub); text-shadow: 2px 2px 0 #000; }
.bk-menu button span { font-size: 0.85rem; line-height: 1.3; color: var(--mid); }
.bk-menu button:hover, .bk-menu button:focus-visible { border-color: var(--yel); outline: none; }
.bk-menu button:hover b, .bk-menu button:focus-visible b { color: var(--yel); }
.bk-menu .bk-menu-open { margin-top: 2px; background: none; border-color: transparent; font: 700 0.52rem var(--fl); text-transform: uppercase; letter-spacing: 0.06em; color: var(--lab); }
.bk-menu-empty { margin: 2px 4px 6px; }
/* the Discord door, last in the bar */
.mn.mast-dc { flex: none; gap: 9px; border-color: #8f97ff #1b1f5c #1b1f5c #8f97ff; background: linear-gradient(#5a5f8a, #2c2f4c); }
.mn.mast-dc .pxi, .mn.mast-dc .dc-logo { flex: none; width: 22px; height: 22px; max-width: none; }
.mn.mast-dc { color: #fff; background: #5865f2; border-color: #8f97ff #2a33a8 #2a33a8 #8f97ff; }
.mn.mast-dc:hover, .mn.mast-dc:focus-visible { color: #fff; border-color: #1b1f5c #8f97ff #8f97ff #1b1f5c; }
/* the book is an icon on its own; Discord keeps a short "Join" while the bar has room */
.mn-book .mn-x { display: none; }
.mn.mn-book { padding-inline: 10px; }
.mn.mast-dc { padding-inline: 12px; }
.mast-dc .mn-x { display: none; }
/* with room either side of the bar, Discord stands alone at the right edge of the screen, with its name */
@media (min-width: 1560px) {
  .mn.mast-dc { position: absolute; top: 8px; right: max(16px, env(safe-area-inset-right, 0px)); padding-inline: 16px; }
  .mast-dc .mn-x { display: inline; }
}
@media (max-width: 640px) {
  .search { flex: 1 1 calc(100% - 64px); }
  .mn.mast-dc { order: 4; padding-inline: 10px; }
}
/* a middling screen keeps the bar on one line and the search box usable */
@media (min-width: 641px) and (max-width: 1180px) {
  .mast-row { gap: 10px; }
  .menu { gap: 8px; }
  .mn { padding-inline: 12px; }
  .mn-x { display: none; }
  .search { min-width: 180px; }
}
@media (max-width: 760px) { .bk-cols { grid-template-columns: minmax(0, 1fr); } }

/* Connected: the subjects a page is tied to, as small plates */
.conn { margin: 26px 0 6px; padding-top: 14px; border-top: 2px solid var(--hair); box-shadow: inset 0 1px 0 var(--line); }
.conn .label { margin: 0 0 10px; }
.conn-g { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 8px; }
.conn-g a { display: grid; gap: 2px; padding: 9px 12px; background: var(--well); border: 2px solid #4e4e4e; color: var(--sub); text-decoration: none; }
.conn-g a b { font: 400 1rem/1.15 var(--fd); color: var(--sub); text-shadow: 2px 2px 0 #000; }
.conn-g a small { font-size: 0.85rem; line-height: 1.25; color: var(--mid); }
.conn-g a:hover, .conn-g a:focus-visible { border-color: var(--yel); }
.conn-g a:hover b { color: var(--yel); }

/* the deeper readings: soul, karma and the future spouse, one plate per finding */
.dp-list { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr)); gap: 12px; margin: 14px 0; }
.dp { padding: 14px 16px; background: var(--cell); border: 3px solid; border-color: var(--bevel-in); }
.dp h4 { margin: 0 0 4px; font-size: 1.12rem; }
.dp-s { margin: 0 0 8px; font: 700 0.5rem/1.5 var(--fl); text-transform: uppercase; letter-spacing: 0.06em; color: var(--lab); }
.dp p:last-child { margin-bottom: 0; }
.dp-when, .dp-num { max-width: 84ch; padding: 10px 14px; background: var(--well); border-left: 4px solid var(--yel); }
.dp-num { border-left-color: var(--red); }

/* what else the chart can do, right under it */
.bc-tools { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; margin: 22px 0 6px; }
.bc-tools a { display: grid; grid-template-columns: 44px minmax(0, 1fr); align-items: center; gap: 12px; padding: 12px 14px; background: var(--well); border: 3px solid; border-color: var(--bevel-in); color: var(--ink); text-decoration: none; }
.bt-i { display: grid; place-items: center; width: 44px; height: 44px; background: #0d0a08; border: 2px solid #4e4e4e; }
.bt-i .pxi { width: 32px; height: 32px; }
.bt-t { display: grid; gap: 4px; min-width: 0; }
.bc-tools a:hover .bt-i { border-color: var(--yel); }
.bc-tools a b { font: 400 1.2rem/1.1 var(--fd); color: var(--ink); }
.bc-tools a small { font-size: 0.86rem; line-height: 1.3; color: var(--mid); }
.bc-tools a:hover, .bc-tools a:focus-visible { border-color: var(--yel); }
.bc-tools a:hover b { color: var(--yel); }
@media (max-width: 900px) { .bc-tools { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* ------------------------------------------------------------------ phones: everything a size smaller, nothing shouting */
@media (max-width: 640px) {
  .mn { padding: 8px 11px 7px; font-size: 0.56rem; }
  .mn.mast-dc .dc-logo, .mn .pxi { width: 18px; height: 18px; }
  .stop-n { font-size: 2.5rem; padding: 5px 7px 1px; border-width: 3px; }
  .stop.compact .stop-n { font-size: 2.2rem; }
  .stop-t { font-size: 1.55rem; }
  #main h1 { font-size: 1.8rem; }
  #main h2 { font-size: 1.5rem; }
  #main h3 { font-size: 1.15rem; }
  .xp-n .ink { font-size: 4rem; }
  .lp-n { font-size: 4.4rem; text-shadow: 3px 3px 0 #000; }
  .c-tot b { font-size: 2.3rem; }
  .dc-lp b { font-size: 2.8rem; }
  .dc-lp b span { font-size: 1.6rem; }
  .today-big .ink { font-size: 3.6rem; }
  .read summary .ink { font-size: 2.2rem; }
  .core .ink { font-size: 3.2rem; }
  .four-v { font-size: 2.5rem; }
  .four-v .sg { font-size: 1.9rem; }
  .cell-v { font-size: 2rem; }
  .ov { font-size: 1.8rem; }
  .gt-v { font-size: 1.9rem; }
  .gt-core .gt-v { font-size: 2.7rem; }
  .prow-lp { font-size: 1.7rem; }
  .ac-n { height: 92px; font-size: 2.1rem; }
  .ws-head h2 { font-size: 1.25rem; }
  .ws-head p { font-size: 0.86rem; }
}

/* ------------------------------------------------------------------ the calendar page */
/* one framed panel: a bar with the month and its controls, the weekday names, the days (the neighbouring months'
   days faded in the gaps), and a key along the bottom. A cell holds its date in the corner and the moon's phase. */
.cal { background: var(--cell); border: 3px solid; border-color: var(--bevel-in); }
.cal-bar { display: grid; grid-template-columns: 44px minmax(0, 1fr) 44px auto; align-items: center; gap: 10px; padding: 12px 14px; background: linear-gradient(#4c4c4c, #262626); border-bottom: 3px solid #121212; }
.cal-arr { display: grid; place-items: center; width: 44px; height: 40px; padding: 0; background: var(--well); border: 3px solid; border-color: var(--bevel-in); color: var(--ink); font-size: 0.9rem; cursor: pointer; }
.cal-arr:hover, .cal-arr:focus-visible { border-color: var(--yel); color: var(--yel); }
.cal-title { margin: 0; border: 0; padding: 0; box-shadow: none; text-align: center; font: 400 clamp(1.4rem, 3vw, 2.1rem)/1 var(--fd); text-transform: uppercase; letter-spacing: 0; white-space: nowrap; }
.cal-jump { display: flex; align-items: center; gap: 8px; }
.cal-today { height: 40px; padding: 0 12px; background: var(--well); border: 3px solid; border-color: var(--bevel-in); font: 700 0.54rem var(--fl); text-transform: uppercase; letter-spacing: 0.06em; color: var(--fg); cursor: pointer; }
.cal-today:hover, .cal-today:focus-visible { border-color: var(--yel); color: var(--yel); }
.cal-jump input { width: 10.5rem; height: 40px; min-height: 0; padding: 0 8px; font-size: 0.95rem; }
.cal-grid { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 4px; padding: 10px; background: none; border: 0; }
.cal-grid .cw { margin-bottom: 4px; padding: 2px 0 8px; background: none; border-bottom: 2px solid var(--hair); text-align: center; font: 700 0.54rem var(--fl); text-transform: uppercase; letter-spacing: 0.08em; color: var(--lab); }
.cal-d { position: relative; display: flex; flex-direction: column; align-items: flex-start; min-width: 0; min-height: 84px; padding: 7px 8px 6px; background: #1c1916; border: 2px solid #34302b; box-shadow: none; color: var(--fg); font: inherit; text-align: left; text-shadow: none; cursor: pointer; }
.cal-d.out { background: none; border-color: transparent; cursor: default; }
.cal-d[data-day]:hover, .cal-d[data-day]:focus-visible { border-color: var(--yel); background: #26221d; }
.cal-date { font: 400 1.5rem/1 var(--fn); color: var(--ink); text-shadow: 2px 2px 0 #000; }
.cal-d.out .cal-date { color: #5a534b; text-shadow: none; }
.cal-ph { display: grid; justify-items: center; gap: 3px; margin: auto auto 0; }
.cal-ph svg { width: 22px; height: 22px; }
.cal-ph small { font: 700 0.42rem/1 var(--fl); text-transform: uppercase; letter-spacing: 0.04em; color: var(--mid); white-space: nowrap; }
.cal-tag { position: absolute; top: 7px; right: 7px; padding: 2px 5px; background: var(--red); color: #fff; font: 700 0.42rem/1 var(--fl); text-transform: uppercase; letter-spacing: 0.05em; }
.cal-d.today { border-color: var(--red); }
.cal-d.today .cal-date { color: #ff8a70; }
.cal-d.sel { background: #3a2f12; border-color: var(--yel); }
.cal-d.sel .cal-date { color: var(--yel); }
.cal-legend { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 18px; margin: 0; padding: 10px 14px; background: none; border: 0; border-top: 2px solid var(--hair); font: 700 0.5rem/1.3 var(--fl); text-transform: uppercase; letter-spacing: 0.06em; color: var(--mid); }
.cl-key { display: inline-flex; align-items: center; gap: 7px; color: var(--ink); }
.cl-key svg { width: 16px; height: 16px; }
.cl-hint { margin-left: auto; color: var(--yel); }
@media (max-width: 640px) {
  .cal-bar { grid-template-columns: 38px minmax(0, 1fr) 38px; gap: 8px; padding: 10px; }
  .cal-jump { grid-column: 1 / -1; justify-content: center; }
  .cal-arr { width: 38px; height: 36px; }
  .cal-title { font-size: 1.3rem; }
  .cal-today { height: 36px; }
  .cal-jump input { height: 36px; }
  .cal-grid { gap: 2px; padding: 6px; }
  .cal-grid .cw { font-size: 0.42rem; letter-spacing: 0.02em; }
  .cal-d { align-items: center; min-height: 50px; padding: 5px 2px 4px; border-width: 1px; }
  .cal-date { font-size: 1.05rem; text-shadow: 1px 1px 0 #000; }
  .cal-ph svg { width: 14px; height: 14px; }
  .cal-ph small, .cal-tag { display: none; }
  .cl-hint { margin-left: 0; }
}

/* ------------------------------------------------------------------ the Destiny Matrix lines: chains of arcana */
.mx-lines { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; margin: 10px 0 20px; }
.mx-line { display: grid; align-content: start; gap: 10px; padding: 12px 14px 14px; background: var(--cell); border: 3px solid; border-color: var(--bevel-in); }
.mx-lh { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 4px 12px; }
.mx-lh b { font: 400 1.12rem/1.15 var(--fd); color: var(--ink); }
.mx-chain { display: flex; flex-wrap: wrap; align-items: stretch; gap: 6px; margin: 0; padding: 0; list-style: none; }
.mx-chain li { display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: center; gap: 8px; padding: 6px 10px 6px 6px; background: var(--well); border: 2px solid #4e4e4e; }
.mx-chain li + li { position: relative; margin-left: 14px; }
.mx-chain li + li::before { content: "▶"; position: absolute; left: -15px; top: 50%; transform: translateY(-50%); font-size: 0.6rem; color: var(--yel); }
.mx-cn { display: grid; place-items: center; min-width: 32px; height: 32px; background: #0d0a08; border: 2px solid var(--yel); font: 400 1.15rem/1 var(--fn); color: var(--red); text-shadow: 1px 1px 0 #000; }
.mx-ct { font-size: 0.95rem; color: var(--ink); }
.mx-line > p { margin: 0; color: var(--fg); }
/* the match: strengths and challenges side by side, advice beneath, the doshas as a short list */
.sw { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; margin: 6px 0 14px; }
.sw h3 { margin: 0 0 8px; }
.sw-l { display: grid; gap: 6px; margin: 0; padding: 0; list-style: none; }
.sw-l li { display: grid; grid-template-columns: 3.6rem minmax(0, 1fr); gap: 12px; padding: 10px 12px; background: var(--cell); border: 2px solid #4e4e4e; }
.sw-l p { margin: 4px 0 0; }
.sw-adv { margin: 0 0 26px; padding: 12px 16px; background: var(--cell); border-left: 4px solid var(--yel); }
.sw-adv p:last-child { margin: 4px 0 0; }
.mv-dosha { margin-top: 12px; padding: 10px 14px; background: var(--cell); border: 2px solid #4e4e4e; }
.mv-dosha .label { margin: 0 0 6px; }
.mv-dosha ul { display: flex; flex-wrap: wrap; gap: 6px 18px; margin: 0; padding: 0; list-style: none; }
.mv-dosha li { display: inline-flex; align-items: baseline; gap: 8px; }
.mv-dosha li::before { content: "●"; font-size: 0.7rem; }
.mv-dosha li.ok::before { color: #5cc04f; }
.mv-dosha li.mid::before { color: var(--yel); }
.mv-dosha li.no::before { color: var(--red); }
.mv-c { margin: 0; padding: 0 12px 12px 30px; color: var(--mid); font-size: 0.92rem; }
@media (max-width: 760px) {
  .mx-lines, .sw { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 640px) {
  .mx-chain li { padding: 5px 8px 5px 5px; }
  .mx-cn { min-width: 28px; height: 28px; font-size: 1rem; }
  .mx-ct { font-size: 0.86rem; }
  /* the percentage rides on the title line instead of keeping a column of its own */
  .sw-l li, .ml-l li { display: block; padding: 9px 11px 10px; }
  .sw-l li > div, .ml-l li > div { display: inline; }
  .sw-l .ml-lp, .ml-l .ml-lp { display: inline-block; min-width: 2.7rem; margin-right: 6px; font-size: 1.25rem; vertical-align: -1px; }
  .bc-list > li { padding: 9px 11px 10px; }
}

/* ------------------------------------------------------------------ the match in three systems, the Life Path calculator, the charts */
.sys { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; margin: 0 0 14px; }
.sys-t { display: grid; gap: 4px; justify-items: start; padding: 12px 14px; text-align: left; background: var(--well); border: 3px solid; border-color: var(--bevel-in); color: var(--fg); cursor: pointer; }
.sys-t:hover { border-color: var(--yel); }
.sys-t > b { font: 400 2.4rem/1 var(--fn); text-shadow: 2px 2px 0 #000; }
.sys-t.good > b { color: #6fe36a; }
.sys-t.mid > b { color: var(--yel); }
.sys-t.bad > b { color: var(--red); }
.sys-t small { color: var(--mid); font-size: 0.85rem; }
.sys-sec { margin-top: 26px; padding-top: 4px; border-top: 2px solid #4e4e4e; }
.sys-a { scroll-margin-top: 90px; }
.lpc-form { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; margin-bottom: 6px; }
.lpc-form fieldset { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.4fr); gap: 10px; margin: 0; padding: 10px 14px 14px; border: 2px solid #4e4e4e; background: var(--cell); }
.lpc-form legend { padding: 0 6px; font: 700 0.56rem var(--fl); text-transform: uppercase; letter-spacing: 0.06em; color: var(--lab); }
.lpc-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.lpc-two { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; margin-bottom: 14px; }
.lpc-p { display: grid; align-content: start; gap: 10px; padding: 14px; background: var(--cell); border: 3px solid; border-color: var(--bevel-in); }
.lpc-p > p { margin: 0; }
.lpc-p .ac-dl { grid-template-columns: minmax(0, 1fr); }
.lpc-h { display: flex; align-items: center; gap: 14px; }
.lpc-h h4, .lpc-h p { margin: 0; }
.lpc-n { font-size: 3.2rem; line-height: 1; }
.ac-dl dd.fr { color: var(--good); }
.ac-dl dd.unfr { color: var(--bad); }
.vd-sw { margin: 0 0 12px; }
/* the Arcana in more depth: reversed and shadow side by side, then the question and the affirmation */
.ac-two { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.ac-two > div { padding: 10px 12px; background: var(--well); border: 2px solid #4e4e4e; border-left: 4px solid var(--red); }
.ac-two > div + div { border-left-color: var(--yel); }
.ac-two .label { margin: 0 0 4px; }
.ac-q { display: grid; gap: 6px; padding: 10px 12px; border-top: 2px dashed #4e4e4e; }
.ac-q p { margin: 0; }
.ac-q .label { display: inline-block; min-width: 10rem; margin-right: 10px; }
.ac-const { display: grid; gap: 6px; margin: 4px 0 18px; padding: 12px 14px; background: var(--cell); border: 3px solid; border-color: var(--bevel-in); }
.ac-const h4, .ac-const p { margin: 0; }
.ac-fam { display: flex; flex-wrap: wrap; gap: 6px; margin: 4px 0 0; padding: 0; list-style: none; }
.ac-fam li { display: inline-flex; align-items: center; gap: 8px; padding: 4px 10px 4px 4px; background: var(--well); border: 2px solid #4e4e4e; }
.ac-fam li b { display: grid; place-items: center; min-width: 28px; height: 28px; border: 2px solid #4e4e4e; font: 400 1.05rem/1 var(--fn); color: var(--mid); }
.ac-fam li.on { border-color: var(--yel); color: var(--ink); }
.ac-fam li.on b { border-color: var(--yel); color: var(--red); }
.ac-again .ac-n { height: 72px; font-size: 1.9rem; }
/* comparing two charts: the score up front, big, with its three supporting figures */
.vm-top { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 14px; align-items: stretch; margin: 16px 0 14px; }
.vm-score { display: grid; grid-template-columns: auto auto; grid-template-rows: auto auto auto; align-content: center; justify-content: start; column-gap: 6px; min-width: 210px; padding: 14px 22px; background: #0d0a08; border: 4px solid; border-color: var(--bevel-in); box-shadow: inset 0 0 0 3px #0d0a08, inset 0 0 0 5px var(--red-dk); }
.vm-score .ink { grid-row: 1; font-size: 6.4rem; line-height: 0.85; }
.vm-score small { grid-row: 1; align-self: end; padding-bottom: 6px; font: 400 1.6rem var(--fn); color: var(--mid); }
.vm-score .label { grid-column: 1 / -1; margin: 10px 0 0; }
.vm-score > b { grid-column: 1 / -1; font: 400 1.5rem/1.1 var(--fd); color: var(--title); }
.vm-score.good .ink { color: #6fe36a; }
.vm-score.mid .ink { color: var(--yel); }
.vm-sub { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.vm-sub > div { display: grid; align-content: start; gap: 4px; padding: 12px 14px; background: var(--well); border: 3px solid; border-color: var(--bevel-in); }
.vm-sub b { font: 400 2.4rem/1 var(--fn); color: var(--red); text-shadow: 2px 2px 0 #000; }
.vm-sub b small { font-size: 1.1rem; color: var(--mid); }
.vm-sub b.vm-w { font-size: 1.9rem; color: var(--yel); }
.vm-sub p { margin: 0; color: var(--fg); font-size: 0.92rem; }
.vm-range { margin: 0 0 12px; padding: 10px 14px; background: var(--cell); border-left: 4px solid var(--yel); }
.vm-range .label { margin: 0 0 4px; }
.vm-range p:last-child { margin: 0; }
.vm-two { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; margin-bottom: 12px; }
.vm-p { display: grid; gap: 4px; padding: 12px 14px; background: var(--cell); border: 3px solid; border-color: var(--bevel-in); }
.vm-p > b { font: 400 1.3rem/1.15 var(--fd); color: var(--ink); }
.vm-p p { margin: 0; }
.vm-who { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 14px; margin: 6px 0 4px; }
.vm-who .label { margin: 0; }
.vp-list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px; margin: 0 0 14px; padding: 0; list-style: none; }
.vp { display: grid; grid-template-columns: 34px minmax(0, 1fr); gap: 10px; padding: 9px 12px; background: var(--well); border: 2px solid #4e4e4e; }
.vp p { margin: 3px 0 0; font-size: 0.92rem; }
.vp-m { display: grid; place-items: center; width: 30px; height: 30px; border: 2px solid; font: 400 1.2rem/1 var(--fn); }
.vp.good .vp-m { color: #6fe36a; border-color: #2a9a24; }
.vp.mid .vp-m { color: var(--yel); border-color: var(--yel); }
.vp.bad .vp-m { color: var(--red); border-color: var(--red); }
.vp-must { font: 700 0.5rem var(--fl); text-transform: uppercase; letter-spacing: 0.06em; color: var(--yel); }
@media (max-width: 900px) {
  .vm-top { grid-template-columns: minmax(0, 1fr); }
  .vp-list { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 640px) {
  .vm-score .ink { font-size: 4.6rem; }
  .vm-sub { grid-template-columns: minmax(0, 1fr); }
  .vm-sub > div { grid-template-columns: auto minmax(0, 1fr); align-items: center; column-gap: 12px; }
  .vm-sub b { grid-row: span 2; font-size: 2rem; }
  .vm-two { grid-template-columns: minmax(0, 1fr); }
}
.mtx.wide .mx { width: 30px; height: 28px; font-size: 0.95rem; }
.mtx.wide th .mx-h { white-space: nowrap; }
@media (max-width: 760px) {
  .lpc-form, .lpc-two, .lpc-grid { grid-template-columns: minmax(0, 1fr); }
  .sys { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 640px) {
  .sys-t { padding: 10px 12px; }
  .sys-t > b { font-size: 1.9rem; }
  .sys-t small { font-size: 0.8rem; }
  .lpc-form fieldset { grid-template-columns: minmax(0, 1fr); }
  .ac-two { grid-template-columns: minmax(0, 1fr); }
  .ac-q .label { display: block; min-width: 0; margin: 0 0 2px; }
}