/* Keeler design system v1.2: shared type, theme tokens and display switches. */
@font-face{font-family:"Bricolage Grotesque";src:url(fonts/bricolage-grotesque-latin-wght-normal.woff2) format("woff2");font-weight:200 800;font-display:swap}
@font-face{font-family:Figtree;src:url(fonts/figtree-latin-wght-normal.woff2) format("woff2");font-weight:300 900;font-display:swap}
@font-face{font-family:"JetBrains Mono";src:url(fonts/jetbrains-mono-latin-wght-normal.woff2) format("woff2");font-weight:100 800;font-display:swap}
@font-face{font-family:OpenDyslexic;src:url(fonts/opendyslexic-latin-400-normal.woff2) format("woff2");font-weight:400;font-display:swap}
@font-face{font-family:OpenDyslexic;src:url(fonts/opendyslexic-latin-700-normal.woff2) format("woff2");font-weight:700 900;font-display:swap}

:root{--f-display:"Bricolage Grotesque",Figtree,system-ui,sans-serif;--f-body:Figtree,system-ui,"Helvetica Neue",Arial,sans-serif;--f-mono:"JetBrains Mono",ui-monospace,Menlo,Consolas,monospace;
/* dark is the default */
color-scheme:dark;--brand:#FF6A13;--brand-hi:#FFA63D;--paper:#0f1620;--ink:#e8edf1;--muted:#9aabb9;--rule:#263444;--blue:#FF9A4D;--on-action:#0a1018;--marker:#FF8A3D;--stage:#0a1018;--stagetext:#e9eef3;--stage-2:#c3ced9;--hud:#8fa1b2;--grid:#24364a;--signal:#35D0DE;--signal-text:#35D0DE;--logo-filter:brightness(0) invert(1);--glass:rgba(10,16,24,.88);--glass-line:#1c2a3a}
@media (prefers-color-scheme:light){:root:not([data-theme]){color-scheme:light;--paper:#f5f7f9;--ink:#13202c;--muted:#566676;--rule:#cfd8df;--blue:#B04600;--on-action:#fff;--stage:#e3ebf1;--stagetext:#13202c;--stage-2:#34475a;--hud:#44596b;--grid:#b4c3cf;--signal:#00808F;--signal-text:#00697A;--logo-filter:brightness(0);--glass:rgba(245,247,249,.9);--glass-line:#cbd6de}}
:root[data-theme=light]{color-scheme:light;--paper:#f5f7f9;--ink:#13202c;--muted:#566676;--rule:#cfd8df;--blue:#B04600;--on-action:#fff;--stage:#e3ebf1;--stagetext:#13202c;--stage-2:#34475a;--hud:#44596b;--grid:#b4c3cf;--signal:#00808F;--signal-text:#00697A;--logo-filter:brightness(0);--glass:rgba(245,247,249,.9);--glass-line:#cbd6de}
:root[data-theme=dark]{color-scheme:dark}

/* Dyslexia-friendly: OpenDyslexic, looser spacing, no tight tracking */
html.dys{--f-display:OpenDyslexic,"Comic Sans MS",sans-serif;--f-body:OpenDyslexic,"Comic Sans MS",sans-serif;--f-mono:OpenDyslexic,"Comic Sans MS",sans-serif}
html.dys body{font-size:15.5px;line-height:1.85;letter-spacing:.02em;word-spacing:.1em}
html.dys h1,html.dys h2,html.dys h3,html.dys .serif{letter-spacing:0;line-height:1.3}
html.dys .hero h1{font-size:clamp(1.9rem,4.2vw,3.1rem)}
html.dys p,html.dys dd,html.dys li{max-width:none}

/* Display switches */
.tb{display:flex;gap:8px;align-items:center}
.tb button{font:inherit;font-family:var(--f-mono);font-size:.74rem;font-weight:600;letter-spacing:.04em;color:var(--stagetext);background:transparent;border:1px solid color-mix(in srgb,var(--stagetext) 38%,transparent);padding:6px 11px;cursor:pointer;display:inline-flex;gap:8px;align-items:center;min-height:34px}
.tb button:hover{border-color:var(--marker);color:var(--marker)}
.tb button[aria-pressed=true]{background:var(--marker);border-color:var(--marker);color:#0a1018}
.tb button:focus-visible{outline:3px solid var(--marker);outline-offset:2px}
.tb svg{width:15px;height:15px;flex:none}
.tb .tl{min-width:2.9em;text-align:left}
.tb .aa{font-family:var(--f-display);font-weight:800;font-size:.9rem;letter-spacing:0}
html.dys .tb button{font-size:.7rem}
@media (max-width:820px){.tb .lbl{display:none}.tb button{padding:6px 9px}}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
html.dys .hero{padding-top:190px}@media (max-width:820px){html.dys .hero{padding-top:230px}}

/* Mobile menu: hamburger button injected by ui.js; nav becomes a dropdown panel under the header */
.bg{display:none}
@media (max-width:820px){
header{position:relative}
header .wrap{flex-wrap:nowrap!important;align-items:center}
header .wrap{justify-content:flex-start!important}header .tb{margin-left:auto;order:1}header .bg{order:2}header .wrap>a.name{order:0}
.bg{display:inline-flex;flex-direction:column;justify-content:center;gap:4px;width:40px;height:36px;padding:0 9px;margin:0 0 0 8px;background:transparent;border:1px solid color-mix(in srgb,var(--stagetext) 38%,transparent);color:var(--stagetext);cursor:pointer;flex:none}
.bg:hover{border-color:var(--marker)}
.bg:focus-visible{outline:3px solid var(--marker);outline-offset:2px}
.bg i{display:block;height:2px;background:currentColor;transition:transform .2s,opacity .2s}
header.nav-open .bg i:nth-child(1){transform:translateY(6px) rotate(45deg)}
header.nav-open .bg i:nth-child(2){opacity:0}
header.nav-open .bg i:nth-child(3){transform:translateY(-6px) rotate(-45deg)}
header .wrap>nav{display:none!important;position:absolute;top:100%;left:0;right:0;width:auto!important;flex-direction:column;flex-wrap:nowrap!important;overflow:visible!important;padding:6px 16px 18px!important;background:var(--stage);border-bottom:1px solid var(--glass-line);box-shadow:0 18px 30px rgba(0,0,0,.25)}
header.nav-open .wrap>nav{display:flex!important}
header .wrap>nav a{display:block!important;margin:0!important;padding:14px 0!important;font-size:1.05rem!important;border-bottom:1px solid var(--glass-line);white-space:normal!important}
header .wrap>nav a::after{display:none!important}
header .wrap>nav a.on,header .wrap>nav a[aria-current]{color:var(--marker)}
header .wrap>nav a.nav-cta{display:inline-block!important;align-self:flex-start;margin:16px 0 0!important;padding:10px 20px!important;border-bottom:0;font-weight:700}
header.site a.m-cta,header .wrap>a.m-cta{display:none!important}
}

/* Bigger site name in the header; the K mark keeps its original size */
header a.name{font-size:1.6rem!important;letter-spacing:-.02em}
@media (max-width:820px){header a.name{font-size:1.25rem!important}}

/* K mark a touch smaller, mark and name centred on one line */
header a.name{display:inline-flex!important;align-items:center;line-height:1}
header a.name svg{width:26px!important;height:26px!important;flex:none;margin-right:10px!important}
@media (max-width:820px){header a.name svg{width:24px!important;height:24px!important;margin-right:9px!important}}