/* Ombrello redesign · shell (header, menu, ticker, footer, buttons). Safe to load next to ui.css. */
@font-face{font-family:"Brico";src:url(/assets/fonts/bricolage-grotesque.woff2) format("woff2");font-weight:200 800;font-display:swap}
@font-face{font-family:"Geist";src:url(/assets/fonts/geist.woff2) format("woff2");font-weight:100 900;font-display:swap}
@font-face{font-family:"GeistMono";src:url(/assets/fonts/geist-mono.woff2) format("woff2");font-weight:100 900;font-display:swap}
:root{
 --k:#0A0A09;--k2:#121211;--k3:#1B1B19;
 --bone:#ECE6DA;--bone2:#DCD5C7;--paper:#F3EFE6;
 --v:#FF4B1F;--v2:#E63A10;
 --mu:#8E897F;--mu2:#5F5B54;
 --hl:rgba(236,230,218,.16);--hl2:rgba(236,230,218,.32);
 --lk:rgba(10,10,9,.16);--lk2:rgba(10,10,9,.4);
 --disp:"Brico","Geist",ui-sans-serif,system-ui,-apple-system,"Segoe UI",Roboto,Arial,sans-serif;
 --fb:"Geist",ui-sans-serif,system-ui,-apple-system,"Segoe UI",Roboto,Arial,sans-serif;
 --fm:"GeistMono",ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
 --gut:20px;--rhh:56px;--ez:cubic-bezier(.2,.7,.1,1);
 color-scheme:dark;
}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.rskip{position:absolute;left:8px;top:-60px;z-index:300;background:var(--v);color:var(--k);padding:0 14px;min-height:44px;display:inline-flex;align-items:center;font:600 13px var(--fm)}
.rskip:focus{top:8px}
.rw{max-width:1360px;margin:0 auto;padding:0 var(--gut)}
.lab{font:500 11px/1.3 var(--fm);letter-spacing:.14em;text-transform:uppercase;color:var(--mu)}
.lab b{color:var(--bone);font-weight:500}
.vm{color:var(--v)}
.rprog{position:fixed;left:0;top:0;height:2px;width:100%;background:var(--v);transform-origin:0 50%;transform:scaleX(0);z-index:120;pointer-events:none}
.rh{color:var(--bone);position:sticky;top:0;z-index:100;background:rgba(10,10,9,.92);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);border-bottom:1px solid var(--hl)}
.rh .rw{display:flex;align-items:center;gap:16px;height:var(--rhh)}
.wm{display:flex;align-items:center;gap:10px;font:800 17px/1 var(--disp);letter-spacing:.02em;text-transform:uppercase;color:var(--bone)}
.wm svg,.wm img{width:22px;height:22px;flex:none}
.wm small{font:500 10px var(--fm);letter-spacing:.14em;color:var(--mu);margin-left:4px;display:none}
.rn{display:none;margin-left:auto;align-items:center;gap:2px}
.rn>a,.rn .rdd>button{display:flex;align-items:center;height:var(--rhh);padding:0 12px;font:500 13px var(--fb);color:var(--bone2);position:relative}
.rn>a::after,.rn .rdd>button::after{content:"";position:absolute;left:12px;right:12px;bottom:14px;height:1px;background:var(--v);transform:scaleX(0);transform-origin:0 50%;transition:transform .35s var(--ez)}
.rn>a:hover::after,.rn>a[aria-current]::after,.rn .rdd:hover>button::after,.rn .rdd.here>button::after{transform:scaleX(1)}
.rn>a[aria-current],.rn .rdd.here>button{color:var(--bone)}
.rdd{position:relative}
.rdd>button svg{width:10px;height:10px;margin-left:6px}
.ddm{position:absolute;top:100%;left:0;min-width:300px;background:var(--k);border:1px solid var(--hl);display:none}
.rdd:hover .ddm,.rdd:focus-within .ddm{display:block}
.ddm a{display:grid;grid-template-columns:56px 1fr;gap:14px;align-items:center;padding:12px;border-bottom:1px solid var(--hl)}
.ddm a:last-child{border-bottom:0}
.ddm a:hover{background:var(--k3)}
.ddm img{width:56px;height:56px;object-fit:cover}
.ddm b{display:block;font:700 18px/1.1 var(--disp);color:var(--bone)}
.ddm span{font:500 10.5px var(--fm);letter-spacing:.12em;text-transform:uppercase;color:var(--mu)}
.rhx{margin-left:auto;display:flex;align-items:center;gap:8px}

.rb{display:inline-flex;align-items:center;justify-content:center;gap:10px;min-height:48px;padding:0 20px;border:1px solid var(--hl2);background:transparent;color:var(--bone);font:600 14px/1 var(--fb);letter-spacing:.01em;transition:background .25s,color .25s,border-color .25s;white-space:nowrap;cursor:pointer}
.rb:hover{background:var(--bone);color:var(--k);border-color:var(--bone)}
.rb.vm{background:var(--v);border-color:var(--v);color:var(--k)}
.rb.vm:hover{background:var(--bone);border-color:var(--bone)}
.rb.rsm{min-height:36px;padding:0 14px;font-size:13px}
.rb svg{width:16px;height:16px;flex:none}
.rhx .xbtn{display:none}
.mtog{display:flex;align-items:center;gap:10px;height:36px;padding:0 12px;border:1px solid var(--hl2);font:500 12px var(--fm);letter-spacing:.12em;text-transform:uppercase}
.mtog i{width:14px;height:8px;position:relative;display:block}
.mtog i::before,.mtog i::after{content:"";position:absolute;left:0;right:0;height:1.5px;background:currentColor;transition:transform .3s var(--ez),top .3s var(--ez)}
.mtog i::before{top:0}
.mtog i::after{top:6.5px}
.menu-open .mtog i::before{top:3.25px;transform:rotate(45deg)}
.menu-open .mtog i::after{top:3.25px;transform:rotate(-45deg)}
#connect.rconn{min-height:36px;padding:0 14px;font:600 13px var(--fb);border:1px solid var(--hl2);background:transparent;color:var(--bone)}
#connect.rconn:hover{background:var(--bone);color:var(--k)}
.mnu{color:var(--bone);position:fixed;inset:var(--rhh) 0 0 0;z-index:99;background:var(--k);display:flex;flex-direction:column;padding:8px var(--gut) 28px;overflow-y:auto;visibility:hidden;opacity:0;transition:opacity .3s var(--ez),visibility 0s .3s}
.menu-open .mnu{visibility:visible;opacity:1;transition:opacity .3s var(--ez)}
.menu-open{overflow:hidden}
.mnu a.mi{display:flex;align-items:baseline;gap:14px;padding:14px 0;border-bottom:1px solid var(--hl);font:800 clamp(34px,10vw,64px)/1 var(--disp);letter-spacing:-.035em;color:var(--bone);transform:translateY(16px);opacity:0;transition:transform .5s var(--ez),opacity .5s var(--ez),color .2s}
.mnu a.mi small{font:500 11px var(--fm);letter-spacing:.12em;color:var(--mu);min-width:24px}
.mnu a.mi.msub{font-size:clamp(24px,7vw,40px);padding-left:38px;color:var(--bone2)}
.mnu a.mi[aria-current]{color:var(--v)}
.menu-open .mnu a.mi{transform:none;opacity:1}
.mnu-f{margin-top:auto;padding-top:24px;display:flex;justify-content:space-between;align-items:center;gap:12px;flex-wrap:wrap}
.tick{background:var(--v);color:var(--k);overflow:hidden;border-bottom:1px solid var(--k);white-space:nowrap;font:600 11px/1 var(--fm);letter-spacing:.14em;text-transform:uppercase;height:30px;display:flex;align-items:center}
.tick-t{display:inline-flex;gap:0;animation:tk 38s linear infinite;will-change:transform}
.tick-t span{padding:0 18px;display:inline-flex;align-items:center;gap:18px}
.tick-t span::after{content:"";width:6px;height:6px;background:var(--k);display:inline-block}
@keyframes tk{to{transform:translateX(-50%)}}
.rbig{font:800 clamp(40px,10vw,128px)/.9 var(--disp);letter-spacing:-.05em;margin:0;text-wrap:balance}
.rfine{font-size:13px;color:var(--mu);line-height:1.55}
@keyframes bl{50%{opacity:.15}}
.rfeed{list-style:none;margin:0;padding:0;border-top:1px solid var(--hl)}
.rfeed li{display:grid;grid-template-columns:auto 1fr auto;gap:14px;align-items:center;padding:12px 0;border-bottom:1px solid var(--hl);font:500 14px var(--fm)}
.rfeed li img{width:40px;height:40px}
.rfeed li .rp{color:var(--v)}
.rfeed li .rt{color:var(--mu);font-size:12px}
.rfaq{border-top:1px solid var(--hl)}
.rfaq details{border-bottom:1px solid var(--hl)}
.rfaq summary{list-style:none;display:grid;grid-template-columns:36px 1fr 24px;gap:10px;align-items:baseline;padding:18px 0;cursor:pointer;font:700 clamp(20px,3vw,28px)/1.15 var(--disp);letter-spacing:-.025em}
.rfaq summary::-webkit-details-marker{display:none}
.rfaq summary small{font:500 11px var(--fm);letter-spacing:.12em;color:var(--v)}
.rfaq summary i{width:14px;height:14px;position:relative;align-self:center}
.rfaq summary i::before,.rfaq summary i::after{content:"";position:absolute;left:0;right:0;top:6.5px;height:1.5px;background:currentColor;transition:transform .3s var(--ez)}
.rfaq summary i::after{transform:rotate(90deg)}
.rfaq details[open] summary i::after{transform:rotate(0)}
.rfaq .a{padding:0 0 22px 46px;color:var(--bone2);max-width:44em}
.rfaq .a a{border-bottom:1px solid var(--v)}
.rf{border-top:1px solid var(--hl);background:var(--k);padding:48px 0 22px;margin-top:0}
.rf-cta{display:grid;gap:18px;padding-bottom:36px;border-bottom:1px solid var(--hl)}
.rf-cta .rbig a{border-bottom:3px solid var(--v);transition:color .2s}
.rf-cta .rbig a:hover{color:var(--v)}
.rf-g{display:grid;grid-template-columns:1fr 1fr;gap:28px 16px;padding:28px 0}
.rf-g p{margin:0 0 12px}
.rf-g a{display:block;padding:5px 0;color:var(--bone2);font-size:14px}
.rf-g a:hover{color:var(--v)}
.rf-wm{font:800 clamp(60px,19.5vw,320px)/.8 var(--disp);letter-spacing:-.06em;color:var(--bone);margin:8px 0 18px;white-space:nowrap;overflow:hidden;user-select:none}
.rf-wm span{color:var(--v)}
.rf-b{display:flex;justify-content:space-between;gap:12px;flex-wrap:wrap;border-top:1px solid var(--hl);padding-top:16px}
.rcur{position:fixed;left:0;top:0;width:10px;height:10px;background:var(--v);z-index:400;pointer-events:none;transform:translate(-50%,-50%);transition:width .25s var(--ez),height .25s var(--ez),opacity .2s;mix-blend-mode:difference;opacity:0}
.rcur.rbig{width:44px;height:44px}
.rnf .mega{font-size:clamp(120px,42vw,560px)}
@media (min-width:640px){
 :root{--gut:28px}
 .rf-g{grid-template-columns:repeat(4,1fr)}
 .wm small{display:inline}
}
@media (min-width:1000px){
 :root{--gut:40px;--rhh:64px}
 .rn{display:flex}
 .mtog{display:none}
 .rhx .xbtn{display:inline-flex}
 .rf-cta{grid-template-columns:8fr 4fr;align-items:end}
}
.rh a,.mnu a,.rf a,.tick a,.rh a:hover,.mnu a:hover,.rf a:hover{text-decoration:none}
.rh,.mnu,.rf,.tick{font-family:var(--fb);box-sizing:border-box}
.rh *,.mnu *,.rf *,.tick *{box-sizing:border-box}
.rh button,.mnu button{font:inherit;color:inherit;background:none;border:0;padding:0;cursor:pointer}
.rh img,.mnu img,.rf img{display:block;max-width:100%}
.rf p,.mnu p{margin:0}

@media (min-width:1000px){.rn~.rhx{margin-left:8px}}

/* ---- v5: nav radar, tap targets, safe areas ---- */
.rn-radar{gap:7px}
.rn-dot{width:6px;height:6px;background:var(--v);display:inline-block;animation:bl 1.6s steps(1) infinite}
.mi-live{align-self:center;margin-left:auto;font:600 10.5px/1 var(--fm);letter-spacing:.14em;text-transform:uppercase;color:var(--v);border:1px solid currentColor;padding:6px 8px}
.wm{min-height:44px}
.mtog{height:44px;min-width:44px}
.rh .rw{padding-left:max(var(--gut),env(safe-area-inset-left));padding-right:max(var(--gut),env(safe-area-inset-right))}
.mnu{padding-left:max(var(--gut),env(safe-area-inset-left));padding-right:max(var(--gut),env(safe-area-inset-right));padding-bottom:max(28px,env(safe-area-inset-bottom))}
.rf{padding-bottom:max(22px,env(safe-area-inset-bottom))}
.rf-g a{display:flex;align-items:center;min-height:44px;padding:0}
.rf-g p{margin:0 0 4px}
.rf-b .lab{max-width:62ch}
.rf-cta .rbig{font-size:clamp(34px,9vw,112px);overflow-wrap:break-word}
.rf-cta .rbig a{white-space:nowrap}
@media (pointer:coarse){.rb.rsm{min-height:44px}}
@media (min-width:1000px){.rn>a,.rn .rdd>button{padding:0 10px}.rhx .xbtn{display:none}}
@media (min-width:1240px){.rn>a,.rn .rdd>button{padding:0 12px}.rhx .xbtn{display:inline-flex}}

/* ================= v6 · calmer scale, single follow element ================= */
.lab{font-size:10.5px;letter-spacing:.12em}
.tick{height:28px;font-size:10px;letter-spacing:.16em}
.tick-t{animation-duration:60s}
.tick-t span{padding:0 16px;gap:16px}
.tick-t span::after{width:4px;height:4px}
.rbig{font-size:clamp(30px,7vw,72px);line-height:.98;letter-spacing:-.035em}
/* header: icon-only X link */
.xic{display:none;align-items:center;justify-content:center;width:36px;height:36px;border:1px solid var(--hl);color:var(--bone2);transition:color .2s,border-color .2s}
.xic svg{width:14px;height:14px}
.xic:hover{color:var(--bone);border-color:var(--hl2)}
@media (min-width:1000px){.rhx .xic{display:inline-flex}}
.mtog{height:40px;font-size:11px;padding:0 12px;border-color:var(--hl)}
@media (pointer:coarse){.mtog{height:44px}}
/* phone menu: calmer list */
.mnu{padding-top:12px}
.mnu a.mi{font-size:clamp(26px,7.2vw,40px);letter-spacing:-.03em;padding:14px 0;gap:16px;align-items:center;min-height:56px}
.mnu a.mi small{font-size:10.5px;min-width:22px;position:relative;top:1px}
.mi-live{font-size:9.5px;padding:5px 7px}
.mnu-f{padding-top:28px;border-top:0}
/* the one follow element */
.xfol{display:inline-flex;align-items:center;gap:10px;min-height:44px;padding:0 16px;border:1px solid var(--hl2);color:var(--bone);font:500 13px/1 var(--fb);letter-spacing:.005em;white-space:nowrap;transition:background .2s,color .2s,border-color .2s}
.xfol svg{width:13px;height:13px;flex:none}
.xfol b{font-weight:600}
.xfol:hover{background:var(--bone);color:var(--k);border-color:var(--bone)}
/* footer */
.rf{padding:40px 0 22px}
.rf-top{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:center;gap:18px 24px;padding-bottom:28px;border-bottom:1px solid var(--hl)}
.rf-top .wm{font-size:16px}
.rf-fol{display:flex;flex-wrap:wrap;align-items:center;gap:12px 18px}
.rf-fol p{margin:0;font:400 14px/1.45 var(--fb);color:var(--mu)}
.rf-g{padding:24px 0 20px;gap:20px 16px}
.rf-g a{font-size:14px;color:var(--bone2)}
.rf-b{padding-top:16px;gap:8px 24px}
.rf-b span{font:400 12px/1.55 var(--fb);color:var(--mu);max-width:58ch}
@media (min-width:1000px){.rf{padding:56px 0 26px}.rf-fol p{font-size:14px}}
.rnf .mega{font-size:clamp(96px,30vw,320px)!important}
/* v6 motion: menu, header links */
.mnu{transform:translateY(-10px);transition:opacity .35s var(--ez),transform .45s var(--ez),visibility 0s .45s}
.menu-open .mnu{transform:none;transition:opacity .35s var(--ez),transform .45s var(--ez)}
.mnu a.mi{transition:transform .6s var(--ez),opacity .6s var(--ez),color .2s,padding-left .35s var(--ez)}
.mnu a.mi:active{color:var(--v)}
@media (hover:hover){.mnu a.mi:hover{color:var(--v);padding-left:6px}}
.mnu-f{opacity:0;transform:translateY(10px);transition:opacity .5s var(--ez) .25s,transform .5s var(--ez) .25s}
.menu-open .mnu-f{opacity:1;transform:none}
.xfol svg{transition:transform .35s var(--ez)}
.xfol:hover svg{transform:rotate(-8deg) scale(1.08)}
.xfol:active{transform:scale(.98)}
.wm img{transition:transform .5s var(--ez)}
.wm:hover img{transform:rotate(-8deg)}
@media (prefers-reduced-motion:reduce){.mnu,.mnu-f,.mnu a.mi{transform:none!important;transition:none!important}.tick-t{animation:none!important}}
.mtog{height:44px}
.xic{width:44px;height:44px}

/* ================= v7 · header Connect button: crisp, dark, one accent ================= */
#connect.rconn{display:inline-flex;align-items:center;justify-content:center;gap:9px;min-height:44px;height:44px;padding:0 14px;border:1px solid rgba(255,75,31,.55);background:rgba(255,75,31,.06);color:var(--bone);font:600 13px/1 var(--fb);letter-spacing:.01em;border-radius:0;box-shadow:none;position:relative;overflow:hidden;isolation:isolate;white-space:nowrap;transition:color .3s var(--ez),border-color .3s var(--ez),background .3s}
#connect.rconn::before{content:"";width:6px;height:6px;background:var(--v);flex:none;animation:bl 1.6s steps(1) infinite}
#connect.rconn::after{content:"";position:absolute;inset:0;background:var(--v);transform:scaleX(0);transform-origin:100% 50%;transition:transform .45s var(--ez);z-index:-1}
#connect.rconn:hover{color:var(--k);border-color:var(--v);background:rgba(255,75,31,.06)}
#connect.rconn:hover::after{transform:scaleX(1);transform-origin:0 50%}
#connect.rconn:hover::before{background:var(--k)}
#connect.rconn:active{transform:scale(.97)}
#connect.rconn.on{border-color:var(--hl2);background:var(--k2);font:500 12.5px/1 var(--fm);letter-spacing:0;padding:0 12px 0 6px;gap:8px}
#connect.rconn.on::before{display:none}
#connect.rconn.on::after{background:var(--bone)}
#connect.rconn .av{width:26px;height:26px;border-radius:0!important;flex:none}
#connect.rconn .eye{font:600 9.5px/1 var(--fm);letter-spacing:.12em;text-transform:uppercase;color:var(--v);border:1px solid currentColor;padding:4px 5px}
#connect.rconn span{overflow:hidden;text-overflow:ellipsis;max-width:120px}
@media (pointer:coarse){#connect.rconn{min-height:44px;height:44px}}
@media (max-width:374px){#connect.rconn{padding:0 10px;gap:7px}.rh .rw{gap:10px}.mtog{padding:0 10px}}
/* header + menu polish */
.rh{background:rgba(10,10,9,.82);-webkit-backdrop-filter:blur(14px) saturate(1.2);backdrop-filter:blur(14px) saturate(1.2)}
.rprog{background:linear-gradient(90deg,var(--v),#FF8A5C);box-shadow:0 0 12px rgba(255,75,31,.6)}
.mnu{background:radial-gradient(600px 400px at 100% 0%,rgba(255,75,31,.1),transparent 60%),var(--k)}
.mnu a.mi{position:relative}
.mnu a.mi::after{content:"";position:absolute;left:0;bottom:-1px;height:1px;width:100%;background:var(--v);transform:scaleX(0);transform-origin:0 50%;transition:transform .5s var(--ez)}
.mnu a.mi[aria-current]::after{transform:scaleX(1)}
@media (hover:hover){.mnu a.mi:hover::after{transform:scaleX(1)}}
.rf{background:linear-gradient(180deg,var(--k),#070706)}

/* v12: WL Open menu tag */
.mi-live.mi-g{color:#34D27B}
