/* */

:root{
  --m-lit:#FFF1D6; --m-mid:#F2D9A8; --m-shade:#C9A67A; --m-vein:#E6CFA4;
  --g-hi:#FFE36B; --g-mid:#F5C518; --g-lo:#B8860B; --g-key:#7F5A1A;
  --teal:#1FA5A0; --teal-d:#0F6E6B; --teal-dd:#0A3B3F; --royal:#2E6FD8; --royal-d:#1E3F8F;
  --terra:#D9653B; --crimson:#D6333F; --ink:#1A1512; --text-w:#3A2E22; --text-w2:#6B5840; --shade-tint:rgba(91,95,168,.18);
  /* remap the site's existing tokens so every inline rule that uses var(--x) follows the new language */
  --bg:#FFF1D6; --bg2:#F7E6C4; --panel:#FFF8E8; --panel2:#F6E7C8;
  --gold:#F5C518; --gold2:#B8860B; --gold3:#8A5F0B;
  --cyan:#0F6E6B; --blueLine:rgba(31,165,160,.28);
  --text:#3A2E22; --muted:#6B5840; --faint:#8C7657; --line:rgba(184,134,11,.35);
  --green:#2F7A3A; --red:#D6333F; --ember:#D9653B; --violet:#6E5FA8;
}

/* ---------- page ground: sunlit marble with faint veins and a warm golden-hour wash ---------- */
html body{
  background:
    radial-gradient(1200px 520px at 78% -8%, rgba(255,227,107,.35), transparent 62%),
    radial-gradient(900px 500px at -10% 30%, rgba(31,165,160,.08), transparent 60%),
    repeating-linear-gradient(115deg, rgba(201,166,122,.10) 0 1px, transparent 1px 140px),
    linear-gradient(180deg, #FFF6E2 0%, #FFF1D6 40%, #F6E3BF 100%) !important;
  color:var(--text-w) !important;
}
body .subpage{color:var(--text-w)}
body h1, body h2, body h3, body .serif{color:var(--ink)}
body .gold{background:linear-gradient(180deg,#D99A0E,#B8860B 55%,#7F5A1A);-webkit-background-clip:text;background-clip:text;color:transparent}
body .kicker{color:var(--teal-d) !important; letter-spacing:.28em}
body a{color:inherit}
body p, body li, body td{color:var(--text-w)}
::selection{background:rgba(31,165,160,.25)}

/* ---------- nav: crest-teal band, gold trim, meander under it ---------- */
body .nav{
  background:linear-gradient(180deg,#0F6E6B 0%, #0A4E4D 100%) !important;
  border-bottom:0 !important; box-shadow:0 6px 24px rgba(10,59,63,.25) !important; backdrop-filter:none !important;
}
body .nav::after{ /* Greek key band */
  content:""; position:absolute; left:0; right:0; bottom:-10px; height:10px; pointer-events:none;
  background:
    linear-gradient(180deg,#F5C518 0 2px, transparent 2px 8px, #B8860B 8px 10px),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='10' viewBox='0 0 20 10'%3E%3Cpath d='M0 9V3h8v4H4V5' fill='none' stroke='%23B8860B' stroke-width='1.4'/%3E%3Cpath d='M10 9V3h8v4h-4V5' fill='none' stroke='%23B8860B' stroke-width='1.4'/%3E%3C/svg%3E") repeat-x center/20px 10px,
    #FFF1D6;
}
body .nav .wordmark{background:linear-gradient(180deg,#FFF8E7 0%,#FFE36B 55%,#F5C518 100%);-webkit-background-clip:text;background-clip:text;color:transparent}
body .navlinks{color:#D8F1EE !important}
body .navlinks a:hover, body .navlinks a[aria-current=page]{color:#FFE36B !important}
body .nav .small-btn{background:rgba(255,248,231,.10) !important;border-color:rgba(255,227,107,.45) !important;color:#FFF8E7 !important}
body .nav .small-btn.primary, body .btn.primary, body .btn-play{
  background:linear-gradient(180deg,#FFE36B 0%,#F5C518 55%,#B8860B 100%) !important; color:#3A2400 !important;
  border:1px solid #7F5A1A !important; box-shadow:0 2px 0 #7F5A1A, 0 8px 24px rgba(184,134,11,.35), inset 0 1px 0 rgba(255,255,255,.7) !important;
  text-shadow:0 1px 0 rgba(255,241,214,.6); animation:none !important;
}
body .rc-pill{background:rgba(255,248,231,.12) !important;color:#E9FBF8 !important;border-color:rgba(255,227,107,.35) !important}
body .rc-chip{background:linear-gradient(135deg,rgba(255,227,107,.28),rgba(15,110,107,.55)) !important;color:#FFF8E7 !important;border-color:#F5C518 !important}

/* ---------- buttons (outside the nav) ---------- */
body .btn, body .small-btn{
  background:linear-gradient(180deg,#FFF8E8,#F2D9A8) !important; color:var(--ink) !important;
  border:1px solid #B8860B !important; box-shadow:0 2px 0 #C9A67A, inset 0 1px 0 #fff !important;
}
body .btn:hover, body .small-btn:hover{border-color:#F5C518 !important; box-shadow:0 2px 0 #B8860B, 0 0 0 3px rgba(245,197,24,.25) !important}

/* ---------- panels & cards: marble slabs with a gold keyline ---------- */
body .panel, body .rl-card, body .rl-side, body .rl-art, body .m-card, body .m-wallet, body .m-cats,
body .cx-card, body .cx-row, body .cx-box, body .ev-card, body .ev-day, body .ev-att1, body .rk-p, body .modal-card,
body .section .rl-meta, body .rl-hero .rl-stats > *, body .gd-toc a{
  background:linear-gradient(180deg,#FFFCF3 0%, #FFF3DB 100%) !important;
  border:1px solid rgba(184,134,11,.55) !important;
  box-shadow:0 1px 0 #fff inset, 0 10px 28px -12px rgba(91,95,168,.35), 0 2px 0 rgba(201,166,122,.6) !important;
  color:var(--text-w) !important;
}
body .rk-p.r1, body .ev-day.today{border-color:#F5C518 !important; box-shadow:0 0 0 2px rgba(245,197,24,.45), 0 12px 30px -10px rgba(184,134,11,.55) !important}
body .rk-p .medal{box-shadow:0 2px 0 #7F5A1A}
body .rk-p b, body .ev-big, body .rk-t td:last-child, body .ev-att1 b, body .cx-n b{color:var(--g-key) !important}
body .rk-p span, body .ev-sub, body .rk-upd, body .ev-tz, body .rk-note{color:var(--text-w2) !important}
body .rk-tabs button, body .rk-tabs button[aria-selected=false]{background:#FFF8E8 !important;color:var(--text-w) !important;border-color:rgba(184,134,11,.45) !important}
body .rk-tabs button[aria-selected=true]{background:linear-gradient(180deg,#1FA5A0,#0F6E6B) !important;color:#FFF8E7 !important;border-color:#0A3B3F !important}
body table th{color:var(--teal-d) !important; border-color:rgba(184,134,11,.45) !important}
body table td{border-color:rgba(201,166,122,.35) !important; color:var(--text-w)}
body .rk-t td:first-child{color:var(--teal-d) !important}
body .ev-t{color:var(--ink) !important}.ev-t.past{color:#A8957A !important}.ev-t.now{color:var(--green) !important}
body main span.ev-live{background:var(--teal-d) !important;color:#fff !important}
body .rl-tag{background:rgba(31,165,160,.12) !important;color:var(--teal-d) !important;border-color:rgba(31,165,160,.4) !important}

/* inputs */
body input, body select, body textarea{
  background:#FFFCF4 !important; color:var(--ink) !important; border:1px solid rgba(184,134,11,.55) !important;
}
body input:focus, body select:focus{border-color:var(--teal) !important; box-shadow:0 0 0 3px rgba(31,165,160,.2) !important}
body input::placeholder{color:#A8957A}

/* item icons keep their dark teal medallion ground (icons are painted for it; STYLE §5) */
body .m-card img, body .cx-row img, body .ev-rw img, body .ev-att1 img, body img[src*="/icons/"]{
  background:radial-gradient(circle at 50% 40%, #1A5B5F, #0A3B3F 70%) !important; border-radius:12px;
  border:1px solid #B8860B !important; box-shadow:0 0 0 2px #FFF1D6, 0 0 0 3px rgba(184,134,11,.5);
}

/* ---------- section ornament: small gilded crest + short gold rule, placed BEFORE the kicker, aligned with the heading
   (works for centred and left-aligned section heads; no line through text) ---------- */
body main .section-head .kicker::before{
  content:""; display:inline-block; vertical-align:-7px; width:24px; height:24px; margin-right:10px;
  background:url("/assets/brand/badge-128.png") center/24px 24px no-repeat;
}
body main .section-head .kicker::after{
  content:""; display:inline-block; vertical-align:middle; width:48px; height:1px; margin-left:12px;
  background:linear-gradient(90deg,#B8860B,transparent);
}

/* ---------- footer: deep teal band with meander on top ---------- */
body footer{
  position:relative; margin-top:40px; background:linear-gradient(180deg,#0A4E4D,#0A3B3F) !important;
  border-top:0 !important; color:#CFEAE6 !important;
}
body footer::before{
  content:""; position:absolute; left:0; right:0; top:-10px; height:10px;
  background:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='10' viewBox='0 0 20 10'%3E%3Cpath d='M0 9V3h8v4H4V5' fill='none' stroke='%23B8860B' stroke-width='1.4'/%3E%3Cpath d='M10 9V3h8v4h-4V5' fill='none' stroke='%23B8860B' stroke-width='1.4'/%3E%3C/svg%3E") repeat-x center/20px 10px,
    #FFF1D6;
}
body footer a, body footer .foot-links a{color:#E9FBF8 !important}
body footer a:hover{color:#FFE36B !important}
body footer .wordmark{background:linear-gradient(180deg,#FFF8E7,#FFE36B 55%,#F5C518);-webkit-background-clip:text;background-clip:text;color:transparent}

/* ---------- mall / codex specifics that were hard-coded dark ---------- */
body .m-drawer{background:linear-gradient(180deg,#FFF8E8,#F2D9A8) !important;border-left:2px solid #B8860B !important}
body .m-price, body .m-price span{color:var(--g-key) !important}
body .m-msg.ok{color:var(--green) !important} body .m-msg.err{color:var(--crimson) !important}
body .cx-tabs button[aria-selected=true], body .cx-tab.on{background:linear-gradient(180deg,#1FA5A0,#0F6E6B) !important;color:#fff !important}
body .rl-msg.ok{color:var(--green) !important} body .rl-msg.err{color:var(--crimson) !important}

/* guide article images: gold-framed plates */
body .rl-art img, body .subpage article img, body .subpage .rl-art figure img{
  border:1px solid #B8860B; border-radius:10px; box-shadow:0 0 0 3px #FFF8E8, 0 0 0 4px rgba(184,134,11,.45), 0 14px 30px -14px rgba(91,95,168,.5);
}


/* ---------- v1.1 fixes from tools/contrast_audit.mjs + design review ---------- */
/* the old site paints the page from a FIXED body:before layer (dark radial) and a .hero-scrim; neutralise both */
html body:before{background:
    radial-gradient(1200px 520px at 78% -8%, rgba(255,227,107,.35), transparent 62%),
    radial-gradient(900px 500px at -10% 30%, rgba(31,165,160,.08), transparent 60%),
    repeating-linear-gradient(115deg, rgba(201,166,122,.10) 0 1px, transparent 1px 140px),
    linear-gradient(180deg, #FFF6E2 0%, #FFF1D6 40%, #F6E3BF 100%) !important}
body .hero-scrim, body .hero:before{background:transparent !important}
body .skip:focus{background:var(--teal-dd) !important;color:#fff !important}
/* all remaining dark card classes of the old theme -> marble slabs */
body .rl-kv div, body .rl-tier, body .hero-card, body .step, body .mile, body .doc-card, body .download-card, body .final-card,
body .utility li, body .toc, body .doc-section, body .sigils-compact .pillar, body .statusbar, body .live-pill{
  background:linear-gradient(180deg,#FFFCF3 0%, #FFF3DB 100%) !important;
  border:1px solid rgba(184,134,11,.55) !important; color:var(--text-w) !important;
  box-shadow:0 1px 0 #fff inset, 0 10px 28px -12px rgba(91,95,168,.35) !important}
body .modal{background:rgba(26,21,18,.45) !important}
/* text tokens that were hard-coded for a dark page */
body .rl-card .n, body .rl-card > div:first-child, body .m-cats h4, body .m-cats .g, body .m-card .c, body .kicker{color:var(--teal-d) !important}
body .rl-card p, body .rl-card span, body .panel p, body .m-head p, body .rl-meta, body .rl-news span, body .section-head p,
body .m-card .n + *, body .m-cats a span, body .rl-kv span{color:var(--text-w2) !important}
body .rl-card h3, body .rl-card b, body .m-card .n, body .m-card h3, body .m-cats a, body .rl-news b, body .rl-news a{color:var(--ink) !important}
body .m-card .p, body .m-card .price, body .m-price b{color:var(--ink) !important}
body .m-card .p i, body .m-price i, body .m-coin{box-shadow:0 0 0 1px #7F5A1A !important}
body [class*="hc"], body .m-price small{color:var(--g-key)}
/* secondary buttons = teal outline, primary stays gold; stat tiles are flat (not button-like) */
body .btn:not(.primary):not(.btn-play), body .small-btn:not(.primary){
  background:transparent !important; color:var(--teal-d) !important; border:1.5px solid var(--teal-d) !important; box-shadow:none !important}
body .nav .small-btn:not(.primary){color:#FFF8E7 !important;border-color:rgba(255,248,231,.7) !important}
body .rl-stats > *{box-shadow:none !important; background:rgba(255,252,243,.7) !important}
body .rl-stats b, body .rl-stats strong{color:var(--teal-d) !important} body .rl-stats span, body .rl-stats small{color:var(--text-w2) !important}
/* mall Add buttons = solid crest teal (primary conversion action) */
body [data-add], body .m-add{background:linear-gradient(180deg,#1FA5A0,#0F6E6B) !important;color:#fff !important;border:1px solid #0A3B3F !important;box-shadow:0 2px 0 #0A3B3F !important}
body .m-cats a.on, body .m-cats a[aria-current]{background:rgba(31,165,160,.14) !important; box-shadow:inset 3px 0 0 var(--teal) !important}
/* hero H1: ink + gold (on light) */
body h1 .gold, body h2 .gold{background:linear-gradient(180deg,#C98A00,#9A6A07 60%,#6E4A06);-webkit-background-clip:text;background-clip:text;color:transparent}
/* nav: thinner meander, clearer status dot */
body .nav::after{height:7px;bottom:-7px}
body .rc-pill.up i{background:#7dffad !important;box-shadow:0 0 0 2px rgba(255,255,255,.35),0 0 10px #7dffad !important}
/* rl-tag chips sat on black in the audit because their parent had no bg; give them their own */
body .rl-tag{background:#E4F4F2 !important}


/* ---------- v1.2: component text colours hard-coded for the dark theme (from contrast_audit per page) ---------- */
/* generic: on marble, light text inside content is never right. Content text -> warm ink; links -> crest teal. */
body main p, body main li, body main td, body main dd, body main span:not(.gold):not(.rl-tag):not(.cx-tag):not(.medal):not(.ev-live),
body main time, body main small{color:var(--text-w) !important}
body main a:not(.btn):not(.small-btn):not([data-add]):not(.m-add){color:var(--teal-d) !important}
body main a:not(.btn):not(.small-btn):hover{color:var(--royal-d) !important;text-decoration:underline}
body main b, body main strong, body main h2, body main h3, body main h4, body main dt + dd{color:var(--ink) !important}
body main .serif:not(h1){color:var(--ink) !important}
body main dt, body main .cx-crumb, body main .cx-sub, body main .m-note, body main .cx-count, body main .m-count,
body main .rl-side h4, body main .ev-k, body main .rl-card .n{color:var(--teal-d) !important}
body main .rl-side h4{letter-spacing:.14em}
body main time, body main .rl-news time{color:var(--text-w2) !important}
/* hero paragraph on marble */
body main .rl-hero p, body main .wrap > p{color:var(--text-w) !important}
/* tags: crest teal chip; boss = crimson chip */
body main .cx-tag{background:#E4F4F2 !important;color:var(--teal-d) !important;border:1px solid rgba(15,110,107,.35) !important}
body main .cx-tag.boss{background:#FBE3E4 !important;color:#A3212B !important;border-color:rgba(214,51,63,.45) !important}
/* codex tabs */
body main .cx-tabs a{color:var(--text-w) !important;background:#FFF8E8 !important;border:1px solid rgba(184,134,11,.4) !important}
body main .cx-tabs a.on:not(.btn):not(.small-btn):not([data-add]):not(.m-add){background:linear-gradient(180deg,#1FA5A0,#0F6E6B) !important;color:#fff !important;border-color:#0A3B3F !important}
/* events */
body main .ev-day h3{color:var(--teal-d) !important} body main .ev-day.today h3{color:#8A5F0B !important}
body main .ev-rw a{color:var(--ink) !important;background:#FFF8E8 !important;border-color:rgba(184,134,11,.45) !important}
body main .ev-rw b{color:#8A5F0B !important}
/* nav active link on teal: bright gold (the global --gold3 remap made it dark) */
body .navlinks a[aria-current=page], body .navlinks a[style*="gold3"]{color:#FFE36B !important}
/* mall drawer totals sat on the old dark footer strip; marble it */
body .m-drawer footer, body .m-drawer header{background:transparent !important;color:var(--text-w) !important}
body .m-drawer footer::before{display:none}
body .m-tot span{color:var(--ink) !important}
body .m-coin{color:#3A2400 !important;background:radial-gradient(circle at 35% 30%,#FFF3B0,#F5C518 50%,#B8860B) !important}
/* account forms: the log-in box keeps a dark panel from the old css */
body .rl-box{background:linear-gradient(180deg,#FFFCF3,#FFF3DB) !important;border:1px solid rgba(184,134,11,.55) !important}
body .rl-box .btn{color:#fff !important;background:linear-gradient(180deg,#1FA5A0,#0F6E6B) !important;border-color:#0A3B3F !important}
/* topup price labels */
body main .rl-tier span{color:var(--text-w2) !important}
/* footer is teal; its text must stay light (override the generic main rules above - footer is outside main anyway) */

body .m-drawer:not(.open){box-shadow:none !important}
body main .rl-news a{border:0 !important;box-shadow:none !important;background:transparent !important}

/* old dark-theme leftovers: grid overlay, section hairline, heavy black text-shadow on headings */
html body:after{display:none !important}
body .section:before{display:none !important}
body h1, body h2{text-shadow:0 1px 0 rgba(255,255,255,.6) !important}

@media (prefers-reduced-motion:reduce){ body *{animation:none !important} }