/* =====================================================================================
   Overton · theme-pro — final refinement layer (loads after theme-future.css)
   8px system · one outer margin (48) · one gutter (16) · 1px hairlines, square corners
   Type scale: 11 / 13 / 16 / 22 / 32 / 48  · mono caps tracked .16em · tabular numerals
   Motion: --e-out (enter) / --e-in (exit) · 160 / 320 / 480 ms
   ===================================================================================== */
:root{--m:48px;--g:16px;--hair:rgba(255,255,255,.16);--hair2:rgba(255,255,255,.07);--mut:#838b88;--acc:#97efca;
 --cap:.16em;--e-out:cubic-bezier(.2,.8,.2,1);--e-in:cubic-bezier(.6,0,.8,.2);--t1:.16s;--t2:.32s;--t3:.48s}
/* canvas scales to any window; letterbox is a quiet hairline field, never a void */
html{width:100%!important;height:100%!important;overflow:hidden;background:#000}
html:not(.obs-html){background:linear-gradient(rgba(255,255,255,.08) 1px,transparent 1px) 0 0/48px 48px,linear-gradient(90deg,rgba(255,255,255,.08) 1px,transparent 1px) 0 0/48px 48px;background-color:#000}
body{position:relative;transform-origin:0 0;font-variant-numeric:tabular-nums;font-feature-settings:"tnum" 1}
body.obs,html.obs-html{background:transparent!important}
body:not(.obs){background:#000}

/* ---------- vertical rhythm (layouts 1 & 3) ---------- */
body .topbar{top:16px;left:var(--m);right:var(--m);height:40px;font:500 13px var(--mono);letter-spacing:var(--cap)}
body .cams{top:64px;left:var(--m);right:var(--m);height:536px;gap:var(--g)}
body .mid,body.l3 .mid{top:616px;left:var(--m);right:var(--m);height:128px;padding:0 32px;gap:32px;border:1px solid var(--hair);background:#000}
body .feat,body.l3 .feat{top:616px;left:var(--m);right:var(--m);height:128px;border:1px solid var(--hair)}
body .brk{top:760px;left:var(--m);right:var(--m);height:104px;border:1px solid var(--hair)}
body .mkts{top:889px;left:var(--m);right:var(--m);height:56px;gap:var(--g)}
body .tk{height:48px;border-top:1px solid var(--hair)}#t1{top:952px}#t2{top:1000px;height:80px;align-items:flex-start}
body .tk.m .lab{height:48px}body .tk.m .run{height:48px;align-items:center;display:flex}
body .base{display:none}

/* ---------- layout 2: three columns on the same grid ---------- */
body.l2 .side{top:64px;height:872px;display:flex;flex-direction:column}
body.l2 .left{left:var(--m);width:352px}body.l2 .right{right:var(--m);width:352px}
body.l2 .cams{left:416px;right:416px;top:64px;height:528px}
body.l2 .mid{left:416px;right:416px;top:608px;height:128px;padding:0 24px}
body.l2 .feat{left:416px;right:416px;top:608px;height:128px}
body.l2 .brk{left:416px;right:416px;top:752px;height:104px}
body.l2 .mkts{left:416px;right:416px;top:872px;height:64px}
body.l2 #charts{flex:1;display:flex;flex-direction:column;min-height:0;margin:0}
body.l2 #charts .pmp{flex:1;display:flex;flex-direction:column;min-height:0;margin:0 0 var(--g)}body.l2 #charts .pmp:last-child{margin-bottom:0}
body.l2 #charts .pmc .pplot{flex:1;height:auto;min-height:64px}
body.l2 .right .sec,body.l2 .right>div{flex:1;margin:0;padding:0;min-height:0}
body.l2 .right{gap:var(--g)}body.l2 .left{gap:0}
body.l2 h4{font:700 11px var(--mono);letter-spacing:var(--cap);color:var(--mut);margin:0 0 8px;padding:0 0 8px;border-bottom:1px solid var(--hair)}
body.l2 .left h4::before,body.l2 .right h4::before{width:6px;height:6px;background:var(--acc)}
body.l2 .card{padding:12px 16px;margin-bottom:8px}body.l2 .card .tm{font-size:11px;margin-bottom:8px}body.l2 .card .tx{font-size:16px;line-height:1.35}
body.l2 #bu{margin-bottom:16px}

/* ---------- surfaces: one hairline, square corners, no glow ---------- */
body .cam,body .mk,body .pmc,body .events,body .card,body .live .btn,body .cam .badge{border-radius:0;box-shadow:none}
body .cam{border:1px solid var(--hair)}
body .cam .lt{padding:48px 24px 16px}
body .cam .ti{margin:8px 0 0 20px;font:500 13px var(--mono);letter-spacing:var(--cap)}
body .cam .badge{font:500 11px var(--mono);letter-spacing:var(--cap);padding:8px 8px;line-height:1}

/* ---------- mid band ---------- */
body .logo h1{font-size:48px;letter-spacing:.32em;line-height:1}body.l2 .logo h1{font-size:40px}
body .logo p{font:500 11px var(--mono);letter-spacing:var(--cap);margin-top:16px}
body .events{border:0;border-left:1px solid var(--hair);padding:0 0 0 32px;font:500 13px var(--mono);letter-spacing:.06em;line-height:1.85;gap:32px}
body .events h3,body.l3 .col h3{font:700 11px var(--mono);letter-spacing:var(--cap);margin-bottom:8px;color:var(--acc)}body .events .up h3{color:var(--mut)}
body.l3 .col{padding-left:32px;font:500 13px var(--mono);line-height:1.85}
body .live{gap:24px}body .live .t{font:700 11px var(--mono);letter-spacing:var(--cap);line-height:1.9;text-align:right}
body .live .btn{padding:0 16px;height:40px;font:700 11px var(--mono);letter-spacing:var(--cap)}

/* ---------- breaking: one treatment on every layout (flash = red fill) ---------- */
body .brk .lb,body.l2 .brk .lb,body.l3 .brk .lb{background:none;color:var(--red);font:700 13px var(--mono);letter-spacing:var(--cap);min-width:168px;padding:0 24px;border-right:1px solid var(--hair);gap:8px}
body .brk .lb::before,body.l3 .brk .lb::before{background:var(--red)}
body.l3 .brk{border-color:var(--hair)}
body .brk.flash,body.l3 .brk.flash{border-color:var(--red)}body .brk.flash .lb,body.l3 .brk.flash .lb{background:var(--red);color:#000}body .brk.flash .lb::before{background:#000}
body .brk .tx{padding:0 32px}body .brk .s{font:500 13px var(--mono);letter-spacing:var(--cap);margin-top:8px}
body.l2 .brk .lb{min-width:136px;padding:0 16px}body.l2 .brk .tx{padding:0 24px}

/* ---------- featured post ---------- */
body .feat .lb{width:136px;font:700 11px var(--mono);letter-spacing:var(--cap);gap:8px}
body .feat .tx{padding:0 32px}body .feat .u{font:500 13px var(--mono);letter-spacing:.06em}
body .feat .b{font-size:26px;line-height:1.3;margin-top:8px}body.l2 .feat .b{font-size:22px}

/* ---------- market cards ---------- */
body .mk{padding:0 24px;font:500 11px var(--mono);letter-spacing:var(--cap);color:var(--mut);border:1px solid var(--hair)}
body.l2 .mk{padding:0 16px}
body .mk .p{gap:16px}body .mk .c{font:700 13px var(--mono);letter-spacing:0}
body .mk.livefeed>span:first-child::after{content:''}
body .mk.sample>span:first-child::after{content:' · SAMPLE';font-size:11px;letter-spacing:var(--cap);color:#4b5263}

/* ---------- tickers: hairline separators only, fixed speed set in JS ---------- */
body .tk .lab{width:208px;padding-left:var(--m);font:700 11px var(--mono);letter-spacing:var(--cap);box-shadow:16px 0 16px #000}
body .tk .run{padding-left:0;animation-timing-function:linear}
body .tk .run span{padding:0 32px;border-right:1px solid var(--hair)}
body .tk .run span::before,body .tk:not(.m) .run span::before{content:none}
body .tk:not(.m) .run span{font:500 15px var(--mono);letter-spacing:var(--cap);color:#cfd5e1}
body .tk.m .run span{font:500 15px var(--mono);letter-spacing:.04em}

/* ---------- motion: shared curves, staggered entrance ---------- */
[data-el],body .brk,body .feat{transition:opacity var(--t2) var(--e-out),transform var(--t2) var(--e-out),clip-path var(--t3) var(--e-out)}
.x{transition:opacity var(--t1) var(--e-out)}
@keyframes rise{from{opacity:0;transform:translateY(8px)}}
body>.topbar{animation:rise var(--t3) var(--e-out) both}
body>.cams,body>.side.left{animation:rise var(--t3) var(--e-out) .06s both}
body>.mid,body>.side.right{animation:rise var(--t3) var(--e-out) .12s both}
body>.brk{animation:rise var(--t3) var(--e-out) .18s both}
body>.mkts{animation:rise var(--t3) var(--e-out) .24s both}
body>.tk{animation:rise var(--t3) var(--e-out) .30s both}
body.leaving{transition:opacity .28s var(--e-in)}

/* ---------- chart module refinements ---------- */
.pmc{padding:16px;background:#000}
.pmc .pmh{font:700 11px var(--mono);letter-spacing:var(--cap)}
.pmc .pq{font:500 13px var(--mono);letter-spacing:.06em;margin:8px 0 0;min-height:0}
.pmc .pbig{margin-top:8px}.pmc .pbig span{font:500 11px var(--mono);letter-spacing:var(--cap)}
.pmc .pplot{margin:8px 0;border-bottom:1px solid var(--hair);border-left:0}
.pmc .gl{stroke:var(--hair2)}
.pmc .yax{font:500 11px var(--mono);letter-spacing:0;color:var(--mut)}
.pmc .yax span{position:absolute;right:0;transform:translateY(-50%)}
.pmc .dots{position:absolute;inset:0 40px 0 0;pointer-events:none}
.pmc .dots i{position:absolute;width:7px;height:7px;margin:-3.5px 0 0 -3.5px;border-radius:50%;transition:top .9s var(--e-out),opacity .4s}
.pmc .dots i.l0{box-shadow:0 0 0 3px #000}.pmc .dots i.l0::after{content:'';position:absolute;inset:-5px;border:1px solid var(--acc);border-radius:50%;opacity:.5;animation:lv 2s steps(1) infinite}
.pmc svg{inset:0 40px 0 0;width:calc(100% - 40px)}
.pmc .plg{font:500 11px var(--mono);letter-spacing:.08em;gap:4px 16px}
.pmc .pax{font:500 11px var(--mono);letter-spacing:var(--cap);margin-top:8px}
body.l2 #charts .pmc{padding:12px 16px;margin:0;flex:1;display:flex;flex-direction:column}
body.l2 #charts .pmc .pbig b{font-size:32px}
.pmtile>.pmc{padding:24px}.pmtile .pq{font-size:16px}.pmtile .pbig b{font-size:64px}.pmtile .pmh,.pmtile .plg,.pmtile .pax,.pmtile .yax{font-size:11px}

/* ---------- Overton brand ---------- */
body .logo{display:flex;flex-direction:column;align-items:flex-start;justify-content:center}
body .logo .pwm{height:16px;width:auto;display:block;margin:0 0 16px}
body.l2 .logo .pwm{height:14px;margin-bottom:12px}
body .logo p{margin-top:12px}
body .topbar .bug{height:16px;width:auto;flex:none;margin-right:-8px;padding-right:16px;border-right:1px solid var(--hair)}
body .live .btn{background:var(--acc);color:#000;border-color:var(--acc);gap:8px}
body .live .btn::before{display:none}body .live .btn img{height:14px;width:auto}
/* white Overton icon appears on the red slab only while FLASH is active */
body .brk{display:flex}body .brk .brkbug{display:none;flex:none;height:24px;width:auto;align-self:center;margin-left:24px}
body .brk.flash .brkbug{display:block}body .brk.flash{background:var(--red)}body .brk.flash .tx{background:#000}
body .brk.flash .lb{border-right-color:rgba(0,0,0,.4)}
body.l3 .cams{height:536px}
body.l2 .right{justify-content:space-between}body.l2 .right .sec,body.l2 .right>div{flex:none}
body .brk.flash .lb{animation:none!important;background:var(--red)!important;color:#000!important}
body .events{margin-left:auto}body .mid .logo{margin-right:auto}

/* ---------- Alliance No.2 Light (licensed, local) = secondary text face. Light only: no faux bold ---------- */
@font-face{font-family:'Alliance No.2';src:url('fonts/alliance-no2-light.otf') format('opentype');font-weight:300;font-style:normal;font-display:block}
@font-face{font-family:'Alliance No.1';src:url('fonts/alliance-no1-light.otf') format('opentype');font-weight:300;font-style:normal;font-display:block}
:root{--sans:'Alliance No.2','Space Grotesk',sans-serif;--disp:'Future Earth','Alliance No.2','Space Grotesk',sans-serif}
body,body *{font-synthesis:none}
/* post text */
body .feat .b{font:300 30px/1.25 var(--sans);letter-spacing:0;color:#fff;text-transform:none}
body.l2 .feat .b{font-size:24px}
body.l2 .fp .t{font:300 17px/1.35 var(--sans);letter-spacing:0;color:#f2f4f6}
body.l2 .card .tx{font:300 20px/1.3 var(--sans);letter-spacing:0;color:#fff}
/* sublines */
body .brk .s{font:300 20px/1.2 var(--sans)!important;letter-spacing:.02em;color:#d6dbe0;margin-top:8px}
body.l2 .brk .s{font-size:17px!important}
/* titles / roles under names */
body .cam .ti{font:300 20px/1.25 var(--sans);letter-spacing:.02em;color:#e3e7ea}
body .cam .ti .h{font:500 13px var(--mono);letter-spacing:.06em;vertical-align:2px}
body.l2 .cam .ti{font-size:17px}
body.l2 .it .r{font:300 15px var(--sans);letter-spacing:.02em;color:#c9cfcc;text-transform:none}
/* body lists */
body .events>div>div:not(h3),body.l3 .col>div:not(h3){font:300 17px/1.6 var(--sans);letter-spacing:.02em;color:#eef1f0}
body #mon,body #upc,body #mon3,body #gst3{font:300 17px/1.6 var(--sans);letter-spacing:.02em;color:#eef1f0}
body .logo p{font:300 15px var(--sans);letter-spacing:.04em;color:#c9cfcc;text-transform:none}
.pmc .pq{font:300 18px/1.3 var(--sans);letter-spacing:.01em;color:#fff;text-transform:none}
.pmtile .pq{font-size:22px}
body.l3 .cam .fs{font:300 17px var(--sans);letter-spacing:.02em;color:#e3e7ea}
body.l3 #mon3>div::before,body.l3 #gst3>div::before{content:'›';display:inline-block;width:16px;color:var(--acc);font-family:var(--mono)}
body.l3 .cam .ti{font-size:18px}
/* ---------- Overton-only branding: wordmark is the show name (no separate text title) ---------- */
body .logo.wmonly h1{display:none}
body .logo.wmonly .pwm{height:44px;margin:0}
body.l2 .logo.wmonly .pwm{height:36px}
body .logo.wmonly p{margin-top:14px}

/* ---------- Slim brand bar (layouts 1/4/5): wordmark only, no event/tagline text ---------- */
body .mid.slim{justify-content:center;gap:0;padding:0 40px;background:linear-gradient(180deg,#050706 0%,#000 100%);border:1px solid var(--hair);border-top:1px solid color-mix(in srgb,var(--acc) 35%,transparent)}
body .mid.slim .logo{margin:0;flex-direction:row;align-items:center}
body .mid.slim .logo p{display:none}
body .mid.slim .logo h1{font:300 28px var(--disp);letter-spacing:.32em;text-transform:uppercase;color:#e9ecea;margin-left:24px}
body .mid.slim .logo.wmonly .pwm{height:34px;margin:0;opacity:.95}
body .mid.slim .logo:not(.wmonly) .pwm{height:26px;margin:0}