/* v5 chrome: tokens, header, mobile menu and footer shared by every page of the English site.
   Articles and legal pages load it after site.css and article.css. Brand tokens from KI 40. */
:root{
  color-scheme:only light;
  --night:#00142f; --deep:#00214f; --navy:#004aad; --block:#00367f; --hollow:#6f9be8;
  --gold:#C9A84C; --gold-dk:#b8952f; --gold-soft:#e7d7a6;
  --paper:#F7F4EF; --white:#FFFFFF; --ink:#12161f; --body:#3a4252; --gray:#646d80; --mist:#a9bbdb;
  --line:rgba(18,22,31,.12); --line-dk:rgba(247,244,239,.16); --bad:#c2412f;
  --f-display:"Funnel Display","Funnel Sans",system-ui,sans-serif;
  --f-body:"Funnel Sans",system-ui,-apple-system,"Segoe UI",sans-serif;
  --f-mono:"IBM Plex Mono",ui-monospace,"SFMono-Regular",Menlo,monospace;
  --pad-l:max(16px,env(safe-area-inset-left,0px)); --pad-r:max(16px,env(safe-area-inset-right,0px));
}
.v5-head{position:sticky;top:0;z-index:40;background:var(--night);border-bottom:1px solid var(--line-dk);font-family:var(--f-body)}
.v5-head .bar{max-width:1080px;margin:0 auto;padding:12px var(--pad-r) 12px var(--pad-l);display:flex;align-items:center;justify-content:space-between;gap:14px}
.v5-head .mark{font-family:var(--f-display);font-weight:800;font-size:1.08rem;color:var(--paper);text-decoration:none;letter-spacing:-.01em;white-space:nowrap}
.v5-head .mark span{color:var(--gold)}
.v5-nav{display:flex;gap:4px 18px;flex-wrap:wrap;font-size:.9rem}
.v5-nav a{color:var(--mist);text-decoration:none}
.v5-nav a:hover,.v5-nav a[aria-current="page"]{color:var(--paper)}
.v5-head .hbtn{background:var(--gold);color:var(--night);text-decoration:none;font-weight:700;font-size:.86rem;padding:8px 14px;border-radius:999px;white-space:nowrap}
.hact{display:flex;align-items:center;gap:8px}
.v5-menu{display:none;position:relative}
.v5-menu summary{list-style:none;cursor:pointer;color:var(--paper);display:flex;align-items:center;justify-content:center;width:38px;height:36px;border:1px solid var(--line-dk);border-radius:999px}
.v5-menu .hb{display:grid;gap:4px;width:16px}
.v5-menu .hb i{display:block;height:2px;border-radius:1px;background:currentColor;transition:transform .2s,opacity .2s}
.v5-menu[open] .hb i:nth-child(1){transform:translateY(6px) rotate(45deg)}
.v5-menu[open] .hb i:nth-child(2){opacity:0}
.v5-menu[open] .hb i:nth-child(3){transform:translateY(-6px) rotate(-45deg)}
.v5-menu nav a.mbook{color:var(--gold);font-weight:700}
.v5-menu summary::-webkit-details-marker{display:none}
.v5-menu nav{position:absolute;right:0;top:calc(100% + 8px);background:var(--night);border:1px solid var(--line-dk);border-radius:16px;padding:10px;display:grid;min-width:200px;box-shadow:0 20px 40px -20px rgba(0,0,0,.6)}
.v5-menu nav a{color:var(--paper);text-decoration:none;padding:9px 12px;border-radius:10px}
.v5-menu nav a:hover{background:rgba(247,244,239,.08)}
@media (max-width:900px){.v5-nav{display:none}.v5-menu{display:block}.v5-head .hbtn{font-size:.8rem;padding:7px 12px}}
@media (max-width:360px){.v5-head .mark{font-size:.95rem}.v5-head .hbtn{padding:6px 10px}.hact{gap:6px}}

footer.v5-foot{background:var(--night);color:var(--mist);font-family:var(--f-body);font-size:.88rem;border-top:0;padding-block:0}
.v5-foot .bar{max-width:1080px;margin:0 auto;padding:30px var(--pad-r) 30px var(--pad-l);display:flex;flex-wrap:wrap;justify-content:space-between;gap:16px 32px;line-height:1.7}
.v5-foot b{color:var(--paper);font-weight:600}
.v5-foot a{color:var(--mist);text-decoration:none}
.v5-foot a:hover{color:var(--paper)}

/* inner pages that still use site.css: the header is no longer fixed, so the hero needs less room on top */
.page-hero{padding-top:clamp(56px,7vw,96px)!important}
.final .actions .btn{font-family:var(--f-body)}

/* ---------- interactive figures inside articles ---------- */
.ifig{margin:2em 0;background:var(--white);border:1px solid var(--line);border-radius:20px;padding:20px;display:grid;gap:14px;font-family:var(--f-body)}
.ifig .ft{font-family:var(--f-mono);font-size:.72rem;letter-spacing:.08em;text-transform:uppercase;color:var(--gold-dk)}
.ifig .fq{font-family:var(--f-display);font-weight:800;font-size:1.2rem;line-height:1.2;color:var(--ink)}
.ifig .fbtns{display:flex;flex-wrap:wrap;gap:8px}
.ifig .fbtns button{font:inherit;cursor:pointer;border:1px solid var(--line);background:var(--paper);color:var(--ink);border-radius:999px;padding:8px 14px;font-weight:600;font-size:.9rem}
.ifig .fbtns button[aria-pressed="true"]{background:var(--night);color:var(--paper);border-color:var(--night)}
.ifig .fout{background:var(--night);color:#dfe5f0;border-radius:14px;padding:16px 18px;display:grid;gap:6px;min-height:104px;align-content:center}
.ifig .fout b{font-family:var(--f-display);font-weight:800;font-size:2.2rem;line-height:1;color:var(--gold);font-variant-numeric:tabular-nums}
.ifig .fout.ok b{color:var(--paper)}
.ifig .fout span{font-size:.9rem}
.ifig .fout small{font-family:var(--f-mono);font-size:.68rem;letter-spacing:.06em;text-transform:uppercase;color:var(--mist)}
.ifig .kq{display:grid;gap:8px}
.ifig .kq label{display:flex;gap:10px;align-items:flex-start;font-size:.95rem;color:var(--body);cursor:pointer;line-height:1.4}
.ifig .kq input{margin-top:3px;accent-color:var(--navy);width:18px;height:18px;flex:0 0 auto}
.ifig .ex{font-family:var(--f-mono);font-size:.66rem;letter-spacing:.06em;text-transform:uppercase;color:var(--gray)}
.prose .ifig p{margin:0}
.ifig .qz{display:grid;gap:12px}
.ifig .qz fieldset{border:0;margin:0;padding:0;display:grid;gap:6px}
.ifig .qz legend{font-weight:700;color:var(--ink);font-size:.97rem;margin-bottom:4px;line-height:1.35}
.ifig .qz label{display:flex;gap:10px;align-items:flex-start;font-size:.93rem;cursor:pointer;line-height:1.4}
.ifig .qz input{margin-top:3px;accent-color:var(--navy);flex:0 0 auto}
.ifig .cs{display:grid;gap:12px}
.ifig .cs label{display:flex;justify-content:space-between;gap:12px;font-size:.93rem;font-weight:600;color:var(--ink)}
.ifig .cs output{font-family:var(--f-mono);color:var(--navy);white-space:nowrap}
.ifig .cs input{width:100%;accent-color:var(--navy)}
.author-box .follow{display:block;margin-top:6px;font-size:14px;color:var(--gray)}
.author-box .follow a{font-size:14px}
.final .mail a{color:inherit;text-underline-offset:3px}
button.btn{font:inherit;font-weight:600;cursor:pointer;border:0}
/* ask your own AI */
.askai{margin-top:22px;display:grid;gap:10px;max-width:62ch}
.askai p{margin:0;font-size:.95rem;line-height:1.5}
.askai .chips{display:flex;flex-wrap:wrap;gap:8px}
.askai .chips a{font-family:var(--f-body);font-weight:600;font-size:.88rem;text-decoration:none;padding:7px 14px;border-radius:999px;border:1px solid currentColor;color:inherit;white-space:nowrap}
.askai .chips a:hover{background:rgba(0,20,47,.08)}
.faq-ai{background:var(--paper);border:1px solid var(--line);border-radius:18px;padding:16px 18px;color:var(--ink)}
.faq-ai .chips a{border-color:var(--line);background:var(--white)}
.faq-ai .chips a:hover{border-color:var(--navy);background:var(--white)}
.final .askai p{margin:0;font-size:.95rem;max-width:62ch;color:inherit}
/* "Email me": the visitor picks the app (a plain mailto does nothing without a mail app) */
.mailpick{position:relative;display:inline-block}
.mailpick>summary{list-style:none;cursor:pointer;user-select:none}
.mailpick>summary::-webkit-details-marker{display:none}
.mailpick>summary::after{content:"";width:7px;height:7px;border-right:2px solid currentColor;border-bottom:2px solid currentColor;transform:translateY(-2px) rotate(45deg);margin-left:4px;transition:transform .2s}
.mailpick[open]>summary::after{transform:translateY(2px) rotate(-135deg)}
.mailpick .pick{position:absolute;left:0;top:calc(100% + 8px);z-index:30;width:250px;background:var(--white);border:1px solid var(--line);border-radius:14px;padding:6px;display:grid;box-shadow:0 18px 40px -18px rgba(0,20,47,.45);font-family:var(--f-body)}
.mailpick .pick a,.mailpick .pick button{font:inherit;font-size:.93rem;font-weight:600;color:var(--ink);text-decoration:none;text-align:left;background:none;border:0;padding:10px 12px;border-radius:10px;cursor:pointer;line-height:1.3}
.mailpick .pick a:hover,.mailpick .pick button:hover{background:var(--paper)}
.mailpick .pick small{display:block;font-weight:400;color:var(--gray);font-size:.78rem;margin-top:2px}
@media (max-width:600px){.mailpick[open]{flex-basis:100%}.mailpick .pick{position:static;margin-top:8px;width:auto;max-width:320px}}
/* ask your AI, short version on the dark hero */
.hero-ai{margin-top:20px;max-width:none;display:flex;flex-wrap:wrap;align-items:center;gap:8px 12px}
.hero-ai small{font-family:var(--f-mono);font-size:.72rem;letter-spacing:.06em;text-transform:uppercase;color:var(--mist)}
.hero-ai .chips a{color:var(--paper);border-color:rgba(247,244,239,.3);font-size:.84rem;padding:6px 12px}
.hero-ai .chips a:hover{background:rgba(247,244,239,.08);border-color:var(--paper)}