/* Convexa Daily — task 031 home stylesheet from _handoff/assets/031/home.html (approved). */
@font-face{font-family:"Inter";font-style:normal;font-weight:400 700;font-display:swap;src:url("/fonts/Inter-400-700.woff2") format("woff2")}
@font-face{font-family:"Inter";font-style:normal;font-weight:800;font-display:swap;src:url("/fonts/Inter-800.woff2") format("woff2")}

/* ===== Tokens ===== */
:root{
 --s1:8px;--s2:16px;--s3:24px;--s4:32px;--s5:48px;--s6:64px;--s7:96px;
 --r-sm:8px;--r:12px;--r-lg:16px;--pill:999px;
 --container:1240px;--gutter:32px;
 --serif:"Iowan Old Style","Palatino Linotype",Palatino,"Book Antiqua",Georgia,serif;
 --sans:"Inter",system-ui,-apple-system,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
 --mono:"JetBrains Mono",ui-monospace,Menlo,Consolas,monospace;
 --t-xs:14px;--t-sm:15px;--t-base:17px;--t-lg:20px;--t-h3:20px;
 --t-h2:clamp(28px,3.2vw,40px);--t-h1:clamp(40px,5.2vw,68px);--t-kpi:clamp(56px,6.4vw,88px);--t-num:clamp(24px,2.4vw,30px);
}
[data-theme="dark"]{
 --bg:#0b1220;--bg-alt:#070c17;--panel:#111a2c;--panel-2:#18233a;--line:#22304a;--line-strong:#2e3f5e;
 --ink:#eef2f8;--ink-2:#cfd7e4;--mute:#a3afc3;--brass:#d9b36a;--on-brass:#14100a;
 --up:#4fd1a5;--down:#ff8a8a;--hi:#ffa566;--tag:#2a3550;--tag-ink:#ecdcb3;
 --kpi-bg:#111a2c;--kpi-ink:#eef2f8;--kpi-mute:#a3afc3;--kpi-up:#4fd1a5;--kpi-line:#22304a;
 --nav-bg:rgba(11,18,32,.88);--glow:rgba(217,179,106,.12);--grid:rgba(136,154,180,.16);--bar:#2f4060;
 --surf:[[0,'#0e2a4a'],[.35,'#1f6f8b'],[.6,'#4fd1a5'],[.8,'#d9b36a'],[1,'#ff9f5a']];
 --c1:#ffa566;--c2:#d9b36a;--c3:#4fd1a5;--c4:#7aa2ff;
 --cx:#6ea8ff;--cx2:#6ea8ff;--spy:#71717a;--up-m:#5cc495;--down-m:#c89a9d;
 color-scheme:dark;
}
[data-theme="light"]{
 --bg:#ffffff;--bg-alt:#f3efe4;--panel:#f6f4ee;--panel-2:#ece8dd;--line:#e2ddd0;--line-strong:#0d1526;
 --ink:#0d1526;--ink-2:#2a3446;--mute:#4f5b70;--brass:#8a6418;--on-brass:#ffffff;
 --up:#0b7a55;--down:#b4232c;--hi:#b5500f;--tag:#efe3c6;--tag-ink:#5a420e;
 --kpi-bg:rgba(47,95,179,.07);--kpi-ink:#0d1526;--kpi-mute:#3f4c63;--kpi-up:#0b7a55;--kpi-line:rgba(47,95,179,.22);
 --nav-bg:rgba(255,255,255,.92);--glow:rgba(138,100,24,.10);--grid:rgba(79,91,112,.16);--bar:#cfc7b3;
 --c1:#b5500f;--c2:#8a6418;--c3:#0b7a55;--c4:#2f5fb3;
 --cx:#1f4fa3;--cx2:#3b6fd1;--spy:#a1a1aa;--up-m:#1f8a5a;--down-m:#a0666b;
 color-scheme:light;
}
/* ===== Base ===== */
*{box-sizing:border-box}html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{margin:0;background:var(--bg);color:var(--ink);font:var(--t-base)/1.6 var(--sans);overflow-x:hidden}
a{color:inherit}img,svg{max-width:100%}
h1,h2,h3,p{margin:0}
.wrap{max-width:calc(var(--container) + 2*var(--gutter));margin:0 auto;padding:0 var(--gutter)}
.eyebrow{display:flex;align-items:center;gap:var(--s1);font:500 13px/1.4 var(--mono);letter-spacing:.12em;text-transform:uppercase;color:var(--brass)}
.eyebrow::before{content:"";flex:none;width:6px;height:6px;border:2px solid currentColor;border-radius:50%}
h2{font:500 var(--t-h2)/1.15 var(--serif);letter-spacing:-.005em}
h3{font:600 var(--t-h3)/1.3 var(--sans)}
.muted{color:var(--mute)}.up{color:var(--up)}.down{color:var(--down)}.hi{color:var(--hi)}
.up-m{color:var(--up-m)}.down-m{color:var(--down-m)}
.num{font-family:var(--mono);font-variant-numeric:tabular-nums}
.more{color:var(--brass);text-decoration:none;font-weight:600;font-size:var(--t-sm)}.more:hover{text-decoration:underline}
.btn{display:inline-flex;align-items:center;justify-content:center;min-height:48px;padding:0 var(--s3);border-radius:var(--r-sm);font-weight:600;font-size:var(--t-sm);text-decoration:none;background:var(--brass);color:var(--on-brass);border:1px solid var(--brass)}
.btn.ghost{background:transparent;color:var(--ink);border-color:var(--line-strong)}
:focus-visible{outline:2px solid var(--brass);outline-offset:3px}
.card{background:var(--panel);border:1px solid var(--line);border-radius:var(--r);padding:var(--s3)}
.stack>*+*{margin-top:var(--s2)}
section{padding:var(--s7) 0;border-bottom:1px solid var(--line)}
.sec-head{display:flex;justify-content:space-between;align-items:flex-end;gap:var(--s3);flex-wrap:wrap;margin-bottom:var(--s4)}
.sec-head .stack>*+*{margin-top:var(--s1)}
/* ===== Nav ===== */
/* Task 033: match site.css rendered header (nav 16px, Menu/pill 12px, logo mark 34px). */
nav{position:sticky;top:0;z-index:50;background:var(--nav-bg);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);border-bottom:1px solid var(--line);font-size:16px}
[data-theme="light"] nav{border-bottom:2px solid var(--ink)}
nav .wrap{display:flex;align-items:center;gap:var(--s3);height:72px;font-size:16px}
.logo{display:flex;align-items:center;gap:var(--s1);font:600 22px var(--serif);text-decoration:none;white-space:nowrap}.logo b{color:var(--brass);font-weight:600}
a.logo,a.logo:hover,a.logo:focus,a.logo:focus-visible,.logo:hover,.logo:focus-visible{text-decoration:none!important}
.logo svg{width:34px;height:34px;flex:none;display:block}
.links{display:flex;gap:var(--s3);margin-left:auto;font-size:var(--t-sm)}
.links a{position:relative;text-decoration:none;color:var(--mute);padding:var(--s1) 0}.links a:hover,.links a[aria-current]{color:var(--ink)}
.links a[aria-current]::after{content:"";position:absolute;left:50%;bottom:-6px;width:8px;height:8px;transform:translateX(-50%);border:2px solid var(--brass);border-radius:50%;background:var(--bg)}
.nav-r{display:flex;gap:var(--s1);align-items:center}
.pill{display:inline-flex;align-items:center;gap:6px;height:40px;padding:0 var(--s2);border:1px solid var(--line);border-radius:var(--pill);font-size:12px;text-decoration:none;background:transparent;color:var(--ink);cursor:pointer;font-family:inherit;font-weight:600;line-height:1}
.theme-btn,.cd-theme{display:inline-flex;width:40px;height:40px;padding:0;justify-content:center;flex:none;font-weight:600;line-height:1;font-size:12px}
/* Task 031 20:30: Menu one line on WebKit 390; same height/weight as ◐. */
.menu{display:none;white-space:nowrap;font-weight:600;height:40px;flex:none;align-items:center;line-height:1;padding:0 var(--s2);font-size:12px}
/* ===== Hero ===== */
.hero{position:relative;overflow:hidden;padding:var(--s7) 0 var(--s6);border-bottom:1px solid var(--line);background:radial-gradient(900px 420px at 85% 0%,var(--glow),transparent 70%)}
.hero .grid{position:relative;z-index:1;display:grid;grid-template-columns:minmax(0,1.3fr) minmax(0,1fr);gap:var(--s6);align-items:center}
.herobg{position:absolute;right:-40px;top:0;width:60%;height:100%;color:var(--mute);pointer-events:none}
.dateline{font:500 13px/1.4 var(--mono);letter-spacing:.12em;text-transform:uppercase;color:var(--brass)}
h1{font:500 var(--t-h1)/1.05 var(--serif);letter-spacing:-.01em;margin:var(--s2) 0 var(--s3)}
.lede{font-size:var(--t-lg);line-height:1.55;color:var(--mute);max-width:36em;margin-bottom:var(--s4)}
.ctas{display:flex;gap:var(--s2);flex-wrap:wrap}
.kpi{background:var(--kpi-bg);color:var(--kpi-ink);border:1px solid var(--kpi-line);border-radius:var(--r-lg);padding:var(--s4)}
.kpi-top{display:flex;justify-content:space-between;align-items:flex-start;gap:var(--s2)}
.kpi .lab{font-size:var(--t-sm);color:var(--kpi-mute)}
.kmark{flex:none;width:72px;height:54px;color:var(--kpi-mute)}
.kmark circle{fill:var(--bg);stroke:var(--kpi-up);stroke-width:3}.kmark path{stroke:#d9b36a}
.big{font:500 var(--t-kpi)/1 var(--serif);color:var(--kpi-up);letter-spacing:-.02em;margin:var(--s2) 0 var(--s1)}
.cmp{display:grid;grid-template-columns:1fr 1fr;gap:var(--s3);border-top:1px solid var(--kpi-line);padding-top:var(--s2);margin-top:var(--s3);font-size:var(--t-sm);color:var(--kpi-mute)}
.cmp b{display:block;color:var(--kpi-ink);font:500 22px var(--mono);margin-top:4px}
.cmp b.up,.cmp b.up-m{color:var(--up)}.cmp b.down,.cmp b.down-m{color:var(--down)}
/* ===== KPI strip ===== */
.strip{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));border-bottom:1px solid var(--line)}
[data-theme="light"] .strip-wrap{border-bottom:2px solid var(--ink)}
.strip>*{padding:var(--s3);border-right:1px solid var(--line);display:block;color:inherit}.strip>*:last-child{border-right:0}
.strip small{display:block;color:var(--mute);font-size:var(--t-xs);margin-bottom:4px}
.strip strong{display:block;font:500 var(--t-num)/1.2 var(--mono)}.strip em{font-style:normal;font-size:var(--t-xs);color:var(--mute)}
/* ===== Vol ===== */
#vol{position:relative;background:radial-gradient(1200px 600px at 50% 0%,var(--glow),transparent 70%),var(--bg-alt)}
#vol::before{content:"";position:absolute;inset:0;pointer-events:none;background-image:linear-gradient(var(--grid) 1px,transparent 1px),linear-gradient(90deg,var(--grid) 1px,transparent 1px);background-size:96px 96px;-webkit-mask:linear-gradient(transparent,#000 15%,#000 65%,transparent);mask:linear-gradient(transparent,#000 15%,#000 65%,transparent);opacity:.55}
#vol>.wrap{position:relative}
.vh{flex:1 1 560px;min-width:0;display:flex;align-items:center;gap:var(--s4)}.morph{flex:none;color:var(--mute);width:220px;height:120px}
#vol h2{font-size:clamp(32px,4vw,52px)}
.delay{display:inline-flex;gap:var(--s1);align-items:center;margin-top:var(--s1);font-size:var(--t-xs);color:var(--ink-2);background:var(--panel);border:1px solid var(--line);border-radius:var(--pill);padding:4px 12px}
.tiles{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:var(--s2);margin-bottom:var(--s3)}
.tile small{display:block;color:var(--mute);font-size:var(--t-xs)}.tile b{display:block;font:500 32px/1.2 var(--mono);margin:var(--s1) 0}.tile span{font-size:var(--t-xs)}
.surf-card{padding:var(--s1);box-shadow:0 30px 120px var(--glow);touch-action:pan-y;-webkit-user-select:none;user-select:none}
#surf,#surf *{pointer-events:none!important;touch-action:none}#surf{height:640px}
#surf .modebar,#surf .modebar-container{display:none!important}
.charts{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--s2);margin-top:var(--s2)}
.ch{height:300px;margin-top:var(--s1)}
.moved{margin-top:var(--s2)}
.three{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--s3);margin-top:var(--s2)}
.three p{color:var(--ink-2);font-size:var(--t-sm)}.three h3{margin-bottom:var(--s1)}
.src{color:var(--mute);font-size:var(--t-xs);margin-top:var(--s2)}
/* ===== Note / chart ===== */
.two{display:grid;grid-template-columns:minmax(0,1.2fr) minmax(0,1fr);gap:var(--s5);align-items:start}
.note h2{margin:var(--s1) 0 var(--s3)}
.note p{font:19px/1.7 var(--serif);color:var(--ink-2);margin-bottom:var(--s2)}
.note p:first-of-type::first-letter{font-size:64px;float:left;line-height:.9;margin:6px 10px 0 0;color:var(--brass)}
.disc{font-size:var(--t-sm);line-height:1.6;color:var(--ink-2);border-left:3px solid var(--brass);padding:4px 0 4px var(--s2);margin-top:var(--s3)}
.side>*+*{margin-top:var(--s2)}
.legend{font-size:var(--t-xs);color:var(--mute);margin-top:var(--s1);display:flex;flex-wrap:wrap;gap:var(--s1) var(--s2);align-items:center}
.glegend{display:flex;gap:var(--s3);flex-wrap:wrap;margin:var(--s1) 0;font-size:var(--t-sm)}
.glegend span{display:inline-flex;align-items:center;gap:var(--s1)}
.glegend i{width:20px;height:4px;border-radius:2px;display:inline-block}
.glegend b{font:600 var(--t-sm) var(--mono)}
#growth svg{display:block;max-width:100%;height:auto}
.js-plotly-plot,.js-plotly-plot *{pointer-events:none!important}
.ex{font:600 11px var(--mono);letter-spacing:.08em;color:var(--tag-ink);background:var(--tag);padding:2px 6px;border-radius:4px}
.regime{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:var(--s1);margin:var(--s2) 0}
.regime span{padding:10px 4px;text-align:center;border-radius:var(--r-sm);background:var(--panel-2);color:var(--mute);font-size:var(--t-xs)}
@media (max-width:560px){.regime{gap:6px}.regime span{padding:10px 2px;font-size:13px;letter-spacing:-.01em}}
.regime .on{background:var(--up);color:var(--bg);font-weight:700}
.side p{font-size:var(--t-sm);color:var(--ink-2)}
.regime-name{font:500 28px/1.2 var(--serif);margin-top:var(--s1)}
/* ===== Risk map ===== */
.week{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:var(--s2)}
.day{display:flex;flex-direction:column;position:relative;text-decoration:none;color:inherit}
.day .d{font:600 var(--t-xs) var(--mono);color:var(--mute)}
.tag{align-self:flex-start;margin:var(--s1) 0 var(--s2);font-size:13px;font-weight:700;padding:4px 10px;border-radius:var(--pill);background:var(--tag);color:var(--tag-ink)}
.day p{font-size:var(--t-sm);color:var(--ink-2)}
.day.key{border-color:var(--hi);box-shadow:inset 0 0 0 1px var(--hi);background:linear-gradient(180deg,color-mix(in srgb,var(--hi) 12%,transparent),var(--panel))}
.day.key .tag{background:var(--hi);color:var(--bg)}
/* Task 033: day tip on home (same behaviour as /risk-map/ a.wd). */
.rm-tip{display:none;position:absolute;left:50%;bottom:calc(100% + 8px);transform:translateX(-50%);width:min(280px,calc(100vw - 24px));max-width:calc(100vw - 24px);z-index:5;padding:10px 12px;font:400 13px/1.45 var(--sans);color:#fff;background:#0A0E14;border-radius:6px;box-shadow:0 4px 16px rgba(10,14,20,.18);text-align:left;font-weight:400;pointer-events:none;box-sizing:border-box}
[data-theme="dark"] .rm-tip{color:#0A0E14;background:#ECEFF3;box-shadow:0 4px 16px rgba(0,0,0,.35)}
.rm-tip b{display:block;font-weight:700;margin-bottom:2px;font-size:13px}
.rm-tip-l{display:block;font-size:12px;font-weight:600;color:rgba(255,255,255,.85);margin-bottom:6px}
[data-theme="dark"] .rm-tip-l{color:rgba(10,14,20,.7)}
a.day:hover .rm-tip,a.day:focus-visible .rm-tip,a.day.tip-open .rm-tip{display:block}
@media (max-width:560px){
  .logo{font-size:19px;gap:6px}.logo svg{width:30px;height:30px}.cmp b{white-space:nowrap}
  a.day .rm-tip,a.day:hover .rm-tip,a.day:focus-visible .rm-tip,a.day.tip-open .rm-tip{left:50%;right:auto;width:min(280px,calc(100vw - 24px));max-width:calc(100vw - 24px);bottom:auto;top:calc(100% + 6px);transform:translateX(-50%);z-index:6}
}
.note-line{color:var(--mute);font-size:var(--t-sm);margin-top:var(--s3)}
/* ===== Analysis ===== */
.cards3{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--s2)}
.cards3 .card{display:flex;flex-direction:column}.cards3 h3{margin:var(--s1) 0}.cards3 p{color:var(--ink-2);font-size:var(--t-sm);flex:1;margin-bottom:var(--s2)}
/* ===== Footer ===== */
footer{padding:var(--s6) 0 var(--s7);color:var(--mute);font-size:var(--t-sm)}
footer .disc{margin:0 0 var(--s4);max-width:900px}
.cols{display:flex;flex-wrap:wrap;gap:var(--s1) var(--s3);margin-bottom:var(--s3)}.cols a{text-decoration:none;padding:4px 0}.cols a:hover{color:var(--ink)}
.legal{color:var(--ink-2);max-width:820px}
/* ===== Motion ===== */
.draw{stroke-dasharray:1400;stroke-dashoffset:1400;animation:dr 2.4s cubic-bezier(.3,0,.2,1) .2s forwards}
.draw2{stroke-dasharray:200;stroke-dashoffset:200;animation:dr 1.8s ease .3s forwards}
@keyframes dr{to{stroke-dashoffset:0}}
@media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important;scroll-behavior:auto!important}.draw,.draw2{stroke-dashoffset:0}}
/* ===== Breakpoints: 1440 base / 1024 / 768 / 390 ===== */
@media (max-width:1180px){.links{gap:var(--s2)}.links a.opt{display:none}}
@media (max-width:1024px){
 :root{--gutter:24px}
 .links{display:none}.menu{display:inline-flex}.nav-r{margin-left:auto}
 .hero .grid{grid-template-columns:1fr;gap:var(--s5)}.herobg{width:90%;opacity:.6}
 .strip{grid-template-columns:repeat(2,minmax(0,1fr))}.strip>*:nth-child(2){border-right:0}.strip>*:nth-child(-n+2){border-bottom:1px solid var(--line)}
 .tiles{grid-template-columns:repeat(2,minmax(0,1fr))}
 .two{grid-template-columns:1fr}
 .side{display:grid;grid-template-columns:1fr 1fr;gap:var(--s2);align-items:start}.side>*+*{margin-top:0}
 #surf{height:520px}
 section{padding:var(--s6) 0}
}
@media (max-width:900px){.week{grid-template-columns:repeat(2,minmax(0,1fr))}.day.key{grid-column:1/-1;order:-1}}
@media (max-width:768px){
 .side{grid-template-columns:1fr}
 .charts,.cards3,.three{grid-template-columns:1fr}
 .week{grid-template-columns:repeat(2,minmax(0,1fr))}.day.key{grid-column:1/-1;order:-1}
 .morph{display:none}
 #surf{height:440px}
}
@media (max-width:480px){
 :root{--gutter:20px}
 nav .wrap{height:64px}.x-link{display:none}
 .hero{padding:var(--s5) 0 var(--s5)}.herobg{width:140%;right:-30%;opacity:.45}
 .kpi{padding:var(--s3)}
 .strip>*{padding:var(--s2)}
 .tiles{gap:var(--s1)}.tile{padding:var(--s2)}.tile b{font-size:24px}
 .week{grid-template-columns:1fr}
 #surf{height:380px}
 section{padding:var(--s5) 0}
 .ctas{flex-direction:column}.ctas .btn{width:100%}
}
[data-theme="light"] .herobg{display:none}.kpi-top .lab{display:flex;justify-content:space-between;align-items:baseline;width:100%;gap:var(--s2)}.lab-k{font:500 13px var(--mono);letter-spacing:.12em;text-transform:uppercase;color:var(--kpi-ink)}.kpi-sub{font-size:var(--t-sm);color:var(--kpi-mute);margin-top:var(--s1)}
/* task 031: mobile nav drawer; task 033: opaque --bg so hero does not show through */
.nav-drawer{display:none;position:fixed;inset:72px 0 auto 0;z-index:49;background:var(--bg);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);border-bottom:1px solid var(--line);padding:var(--s2) var(--gutter) var(--s3)}
.nav-drawer.open{display:block}
.nav-drawer a{display:block;padding:12px 0;text-decoration:none;color:var(--ink);border-bottom:1px solid var(--line);font-size:var(--t-sm)}
.nav-drawer a:last-child{border-bottom:0}
body.nav-open{overflow:hidden}
#growth{width:100%;min-height:240px}
.plot-host{width:100%;min-width:0}
/* map old risk tip if any */
.up{color:var(--up)}.down{color:var(--down)}.hi{color:var(--hi)}
.pos{color:var(--up)}.neg{color:var(--down)}
.ivup{color:var(--hi)}.ivdn{color:var(--up)}

/* Task 034: build-time surface PNG; theme by data-theme (◐), no WebGL. */
#surf.surf-static{height:auto!important;min-height:0}
.surf-img{display:block;width:100%;height:auto}
.surf-d{display:none}
[data-theme="dark"] .surf-l{display:none}
[data-theme="dark"] .surf-d{display:block}