/* PURE Brand Guide — shared shell styles. Tokens = fable.css brand canon (the existing standard). */
:root{--navy:#172e55;--navy-2:#122544;--navy-3:#0e1c33;--navy-4:#091222;--navy2:#0e1c33;
--gold:#dccaaf;--gold-2:#b0a28c;--gold-ink:#847969;--gold-50:#f8f4ef;--gold-100:#f1eadf;--gold-200:#eadfcf;
--green:#117f39;--green-soft:#e3f1e8;--blue:#29abe2;--blue-soft:#d4eef9;--slate:#5a6b86;--slate-soft:#e7ebf1;
--red:#ed1c24;--red-soft:#ffe8e8;--hair:#e3ddd2;--t2:#404040;--t3:#8e8e8e;
--disp:Montserrat,sans-serif;--ui:"Open Sans",sans-serif;--word:"Cinzel",serif;
--sh:5px 5px 10px 0 rgba(0,0,0,.10);--shadow:5px 5px 10px 0 rgba(0,0,0,.10);--shadow-hi:8px 12px 24px rgba(9,18,34,.13)}
*{box-sizing:border-box}html,body{margin:0}
body{font-family:var(--ui);background:var(--gold-50);color:var(--t2);font-size:14.5px;line-height:1.7}
.ico{width:1.2em;height:1.2em;display:inline-block;vertical-align:-.18em;fill:none;stroke:currentColor;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round}
.bg-tb{background:var(--navy);color:#fff;padding:12px 24px;display:flex;align-items:center;gap:13px;position:sticky;top:0;z-index:20}
.bg-tb::after{content:"";position:absolute;left:0;right:0;bottom:0;height:2px;background:linear-gradient(90deg,transparent,var(--gold) 18%,var(--gold) 82%,transparent);opacity:.65}
.bg-tb a.home{color:var(--gold);text-decoration:none;font:800 12px var(--disp)}
.bg-tb .logo{width:30px;height:30px;border-radius:8px;background:var(--gold);color:var(--navy);display:grid;place-items:center;font:800 16px var(--disp)}
.bg-tb b{font:800 17px var(--disp)}.bg-tb .sp{flex:1}.bg-tb .ed{font-size:11px;color:var(--gold);font-weight:600}
.bg-wrap{display:grid;grid-template-columns:218px 1fr;gap:0;max-width:1180px;margin:0 auto}
@media(max-width:820px){.bg-wrap{grid-template-columns:1fr}.bg-nav{position:static!important;height:auto!important;border-right:none!important;border-bottom:1px solid var(--hair)}}
.bg-nav{position:sticky;top:55px;height:calc(100vh - 55px);overflow-y:auto;padding:22px 14px;border-right:1px solid var(--hair);background:#fff}
.bg-nav .grp{font:800 10px var(--disp);letter-spacing:.06em;text-transform:uppercase;color:var(--gold-ink);margin:16px 10px 6px}
.bg-nav a{display:flex;align-items:center;gap:9px;padding:9px 11px;border-radius:9px;text-decoration:none;color:var(--t2);font-size:13.5px;font-weight:600;margin-bottom:2px}
.bg-nav a:hover{background:var(--gold-50)}
.bg-nav a.cur{background:var(--navy);color:var(--gold)}
.bg-nav a .ico{width:1.1em;height:1.1em;opacity:.85}
.bg-main{padding:34px 40px 80px;min-width:0}
@media(max-width:560px){.bg-main{padding:24px 20px 60px}}
.bg-main .crumb{font-size:12px;color:var(--t3);margin-bottom:6px}
.bg-main h1{font:800 32px var(--disp);color:var(--navy);margin:0 0 6px;letter-spacing:-.01em}
.bg-main .lead{font-size:15px;color:var(--t3);max-width:680px;margin:0 0 26px;line-height:1.6}
.bg-main h2{font:800 13px var(--disp);letter-spacing:.05em;text-transform:uppercase;color:var(--gold-ink);margin:34px 0 14px;padding-bottom:8px;border-bottom:1px solid var(--hair)}
.bg-main h3{font:800 17px var(--disp);color:var(--navy);margin:22px 0 8px}
.bg-main p{max-width:720px}.bg-main a{color:var(--gold-ink);font-weight:700}
.card{background:#fff;border:1px solid var(--hair);border-radius:14px;box-shadow:var(--shadow);padding:20px 22px;margin-bottom:16px}
.cards{display:grid;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));gap:14px;margin:6px 0 10px}
.navcard{background:#fff;border:1px solid var(--hair);border-left:3px solid var(--gold);border-radius:13px;box-shadow:var(--shadow);padding:17px 19px;text-decoration:none;color:var(--t2);display:block;transition:transform .15s,box-shadow .15s,border-color .15s}
.navcard:hover{transform:translateY(-3px);box-shadow:var(--shadow-hi);border-left-color:var(--navy)}
.navcard .ic{width:42px;height:42px;border-radius:11px;background:var(--gold-50);display:grid;place-items:center;color:var(--navy);margin-bottom:11px}
.navcard .ic .ico{width:22px;height:22px}
.navcard b{font:800 15.5px var(--disp);color:var(--navy);display:block}.navcard p{font-size:12.5px;color:var(--t3);margin:4px 0 0;max-width:none}
.do{border-left:3px solid var(--green)}.dont{border-left:3px solid var(--red)}
.do h3,.dont h3{margin-top:0}.do h3{color:var(--green)}.dont h3{color:var(--red)}
.swatchrow{display:flex;flex-wrap:wrap;gap:12px;margin:6px 0 12px}
.swatch{border:1px solid var(--hair);border-radius:11px;overflow:hidden;width:128px;box-shadow:var(--shadow)}
.swatch .chip{height:64px}.swatch .lab{padding:8px 10px;background:#fff}.swatch .lab b{font:800 12px var(--disp);color:var(--navy);display:block}.swatch .lab code{font-size:11px;color:var(--t3)}
.pill{display:inline-block;font:800 9px var(--disp);letter-spacing:.04em;border-radius:360px;padding:3px 9px;margin-left:6px}
.pill.canon{background:var(--green-soft);color:var(--green)}
.codeblock{background:var(--navy2);color:#cdd6e3;border-radius:11px;padding:14px 16px;font-family:ui-monospace,monospace;font-size:12.5px;line-height:1.6;overflow-x:auto;margin:10px 0}
.codeblock .k{color:var(--gold)}
.note{font-size:12px;color:var(--t3);background:var(--gold-50);border-radius:10px;padding:11px 14px;margin:12px 0}
.foot{margin-top:36px;padding-top:18px;border-top:1px solid var(--hair);font-size:11px;color:var(--t3);display:flex;justify-content:space-between;flex-wrap:wrap;gap:10px}
.tnav{display:flex;justify-content:space-between;gap:12px;margin-top:30px}
.tnav a{flex:1;background:#fff;border:1px solid var(--hair);border-radius:12px;padding:13px 16px;text-decoration:none;box-shadow:var(--shadow)}
.tnav a .d{font-size:11px;color:var(--t3)}.tnav a b{font:800 14px var(--disp);color:var(--navy);display:block}
.tnav a.next{text-align:right}