/* BeckBenchers — light theme.
   Layout: masthead, rotating hero of animated motifs, then the event board:
   type tabs, event list beside a radial cascade, outcomes underneath. */
:root{
  --bg:#ffffff;         /* page */
  --navy:#0a1f6b;       /* brand navy (footer, deep accents) */
  --cyan:#7fe0ff;       /* highlight on navy */
  --panel:#f5f7fc;      /* panels */
  --panel2:#e9eef8;     /* raised panels, node fills */
  --line:#d6deeb;       /* rules and idle links */
  --line2:#b3c0d6;      /* stronger rule */
  --text:#0b1736;
  --dim:#55627a;
  --accent:#1f4fe8;     /* brand blue */
  --accent-soft:#eaf0ff;
  --exposed:#c8463a;    /* exposed */
  --benefit:#1c9573;    /* may benefit */
  --origin:#c08a14;     /* where it happens */
  --display:"Archivo","Arial Narrow",system-ui,sans-serif;
  --body:"IBM Plex Sans",system-ui,-apple-system,"Segoe UI",sans-serif;
  --mono:"IBM Plex Mono",ui-monospace,Menlo,Consolas,monospace;
  color-scheme:light;
}
*{box-sizing:border-box}
html,body{margin:0;background:var(--bg);color:var(--text)}
body{font-family:var(--body);font-size:15px;line-height:1.55}
.wrap{max-width:1200px;margin:0 auto;padding-left:max(16px,env(safe-area-inset-left,0px));padding-right:max(16px,env(safe-area-inset-right,0px))}
button{font:inherit;color:inherit}
:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.mono{font-family:var(--mono)}

/* masthead */
.mast{border-bottom:1px solid var(--line);background:var(--bg)}
.mast .wrap{display:flex;align-items:center;justify-content:space-between;gap:16px;padding-block:14px;flex-wrap:wrap}
.brand{display:flex;align-items:baseline;gap:12px;flex-wrap:wrap;text-decoration:none;color:var(--text)}
.brand b{font-family:var(--display);font-stretch:85%;font-weight:800;font-size:26px;letter-spacing:-.01em}
.brand b span{color:var(--accent)}
.brand small{font-family:var(--mono);font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:var(--dim)}
.nav{display:flex;gap:20px;font-size:14px;flex-wrap:wrap}
.nav a{color:var(--dim);text-decoration:none}
.nav a:hover,.nav a[aria-current]{color:var(--text)}

/* hero */
.hero{position:relative;height:clamp(440px,48vw,520px);overflow:hidden;border-bottom:1px solid var(--line);background:var(--bg)}
#heroCanvas{position:absolute;inset:0;width:100%;height:100%;display:block}
.hero .scrim{position:absolute;inset:0;background:linear-gradient(90deg,#ffffff 0%,rgba(255,255,255,.94) 38%,rgba(255,255,255,0) 70%);pointer-events:none}
.hero .wrap{position:relative;height:100%;display:flex;flex-direction:column;justify-content:center;gap:18px}
.copy{max-width:560px;display:flex;flex-direction:column;gap:14px}
.copy.in{animation:rise .6s ease both}
@keyframes rise{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
.eyebrow{font-family:var(--mono);font-size:12px;letter-spacing:.16em;text-transform:uppercase;color:var(--accent)}
.copy h1{margin:0;font-family:var(--display);font-stretch:75%;font-weight:800;font-size:clamp(34px,5vw,58px);line-height:1.02;letter-spacing:-.01em;text-wrap:balance}
.copy p{margin:0;color:var(--dim);font-size:17px;max-width:48ch}
.cta{align-self:flex-start;display:inline-flex;gap:8px;align-items:center;background:var(--accent);color:#ffffff;font-weight:600;border:0;border-radius:4px;padding:10px 16px;cursor:pointer;text-decoration:none}
.cta:hover{filter:brightness(1.08)}
.hero-ctl{position:absolute;left:0;right:0;bottom:18px}
.hero-ctl .wrap{height:auto;flex-direction:row;justify-content:flex-start;align-items:center;gap:14px}
.dots{display:flex;gap:6px;flex-wrap:wrap}
.dot{width:34px;height:20px;border:0;background:transparent;padding:0;cursor:pointer;display:flex;align-items:center}
.dot i{display:block;width:100%;height:3px;background:var(--line);border-radius:2px;overflow:hidden}
.dot i b{display:block;height:100%;width:0;background:var(--accent)}
.dot[aria-current="true"] i{background:var(--line2)}
.ghost{background:var(--bg);border:1px solid var(--line);color:var(--dim);border-radius:4px;padding:5px 10px;font-family:var(--mono);font-size:12px;cursor:pointer}
.ghost:hover{color:var(--text);border-color:var(--dim)}
.slide-label{font-family:var(--mono);font-size:12px;color:var(--dim);white-space:nowrap}

/* board */
.board{padding-block:48px 24px}
.board-head{display:flex;justify-content:space-between;align-items:flex-end;gap:16px;flex-wrap:wrap;margin-bottom:20px}
.board-head h2{margin:0;font-family:var(--display);font-stretch:80%;font-weight:800;font-size:clamp(28px,3.4vw,40px);line-height:1.05;text-wrap:balance}
.board-head p{margin:6px 0 0;color:var(--dim);max-width:60ch}
.badge{font-family:var(--mono);font-size:11px;letter-spacing:.08em;text-transform:uppercase;color:var(--origin);border:1px solid var(--origin);border-radius:3px;padding:4px 8px;white-space:nowrap}

.tabs{display:flex;gap:6px;overflow-x:auto;padding-bottom:6px;scrollbar-width:thin}
.tab{flex:0 0 auto;text-align:left;background:var(--bg);border:1px solid var(--line);border-radius:4px;padding:9px 14px;cursor:pointer;display:flex;flex-direction:column;gap:1px}
.tab span{font-weight:600;font-size:14px;white-space:nowrap}
.tab small{font-family:var(--mono);font-size:11px;color:var(--dim);white-space:nowrap}
.tab:hover{border-color:var(--line2);background:var(--panel)}
.tab[aria-selected="true"]{background:var(--accent-soft);border-color:var(--accent)}
.tab[aria-selected="true"] small{color:var(--accent)}
.tab-blurb{margin:12px 0 18px;color:var(--dim);font-size:14px}
.tab-blurb b{color:var(--text);font-weight:600}

.grid{display:grid;grid-template-columns:minmax(0,320px) minmax(0,1fr);gap:18px;align-items:start}
.list{display:flex;flex-direction:column;gap:8px;min-width:0}
.list h3,.panel-h{margin:0 0 2px;font-family:var(--mono);font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--dim);font-weight:500}
.h-exposed{color:var(--exposed)}
.h-benefit{color:var(--benefit)}
.ev{text-align:left;background:var(--bg);border:1px solid var(--line);border-radius:4px;padding:12px 14px;cursor:pointer;display:flex;flex-direction:column;gap:6px}
.ev:hover{background:var(--panel)}
.ev[aria-pressed="true"]{background:var(--accent-soft);border-color:var(--accent)}
.ev .meta{display:flex;justify-content:space-between;gap:8px;font-family:var(--mono);font-size:11px;color:var(--dim)}
.ev .t{font-size:14px;line-height:1.4}
.sev{font-family:var(--mono);font-size:11px;padding:1px 6px;border-radius:3px;border:1px solid currentColor;font-variant-numeric:tabular-nums}

.stage{background:var(--panel);border:1px solid var(--line);border-radius:6px;min-width:0;display:flex;flex-direction:column}
.stage-top{padding:18px 20px 0;display:flex;flex-direction:column;gap:10px}
.chips{display:flex;gap:8px;flex-wrap:wrap}
.chip{font-family:var(--mono);font-size:11px;color:var(--dim);border:1px solid var(--line);background:var(--bg);border-radius:3px;padding:2px 7px}
.chip-origin{color:var(--origin)}
.stage h3{margin:0;font-family:var(--display);font-stretch:85%;font-weight:700;font-size:clamp(20px,2.2vw,26px);line-height:1.2;text-wrap:balance}
#cascade{display:block;width:100%;height:auto}
.legend{display:flex;gap:14px;flex-wrap:wrap;font-size:12px;color:var(--dim);padding:0 20px 14px;align-items:center}
.legend span{display:inline-flex;align-items:center;gap:6px}
.sw{width:10px;height:10px;border-radius:50%;display:inline-block}
.sw-origin{background:var(--origin)}.sw-exposed{background:var(--exposed)}.sw-benefit{background:var(--benefit)}
.legend .replay{margin-left:auto}

.outcomes{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));border-top:1px solid var(--line);background:var(--bg)}
.oc{padding:14px 20px;border-right:1px solid var(--line);display:flex;flex-direction:column;gap:6px;min-width:0}
.oc:last-child{border-right:0}
.oc .big{font-family:var(--display);font-stretch:80%;font-weight:800;font-size:34px;line-height:1;font-variant-numeric:tabular-nums}
.oc .big small{font-size:14px;color:var(--dim);font-weight:500;margin-left:4px}
.bar{height:5px;background:var(--line);border-radius:3px;overflow:hidden}
.bar b{display:block;height:100%;width:0;background:var(--accent);transition:width .9s ease}
.oc ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:3px;font-size:13px}
.oc li{display:flex;gap:6px;align-items:baseline}
.oc li .k{font-family:var(--mono);font-size:11px;color:var(--dim)}
.oc .win{font-size:20px;font-weight:600}
.ideas{border-top:1px solid var(--line);padding:14px 20px 18px;display:flex;flex-direction:column;gap:6px;background:var(--bg);border-radius:0 0 6px 6px}
.ideas ul{margin:0;padding-left:18px;font-size:14px}
.ideas .nfa{font-family:var(--mono);font-size:11px;color:var(--origin)}

footer{border-top:1px solid var(--line);margin-top:24px}
footer .wrap{padding-block:20px 32px;font-size:12px;color:var(--dim);display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap}

@media (max-width:900px){.grid{grid-template-columns:minmax(0,1fr)}}
@media (max-width:760px){
  .outcomes{grid-template-columns:repeat(2,minmax(0,1fr))}
  .oc:nth-child(2n){border-right:0}
  .oc:nth-child(-n+2){border-bottom:1px solid var(--line)}
}
@media (max-width:700px){
  .hero .scrim{background:linear-gradient(180deg,rgba(255,255,255,.6) 0%,rgba(255,255,255,.93) 60%,#ffffff 100%)}
  .copy p{font-size:15px}
}
@media (max-width:520px){.dot{width:22px}.badge{white-space:normal}}
@media (prefers-reduced-motion:reduce){.copy.in{animation:none}.bar b{transition:none}}

/* ---- larger layout ---- */
.wrap{max-width:1320px}
body{font-size:16px}
.grid{grid-template-columns:minmax(0,300px) minmax(0,1fr);gap:22px}
.ev .t{font-size:15px}
.hero{height:clamp(460px,46vw,560px)}

/* stats strip */
.stats{border-bottom:1px solid var(--line);background:var(--panel)}
.stats .wrap{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:0}
.stat{padding:22px 18px;border-right:1px solid var(--line);display:flex;flex-direction:column;gap:2px;min-width:0}
.stat:first-child{padding-left:0}
.stat:last-child{border-right:0}
.stat b{font-family:var(--display);font-stretch:80%;font-weight:800;font-size:clamp(30px,3.4vw,44px);line-height:1;font-variant-numeric:tabular-nums}
.stat span{font-size:13px;color:var(--dim)}
@media (max-width:760px){.stats .wrap{grid-template-columns:repeat(2,minmax(0,1fr))}.stat{padding:16px 12px;border-right:0;border-bottom:1px solid var(--line)}.stat:first-child{padding-left:12px}}

/* section shells */
.band{background:var(--panel);border-block:1px solid var(--line)}
.band > .wrap{padding-block:56px}
.sec{padding-block:56px}
.sec-head{display:flex;flex-direction:column;gap:6px;margin-bottom:24px;max-width:70ch}
.sec-head h2{margin:0;font-family:var(--display);font-stretch:80%;font-weight:800;font-size:clamp(28px,3.4vw,40px);line-height:1.05;text-wrap:balance}
.sec-head p{margin:0;color:var(--dim)}

/* exposure */
.expo{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px}
@media (max-width:900px){.expo{grid-template-columns:minmax(0,1fr)}}
.expo-col{background:var(--bg);border:1px solid var(--line);border-radius:6px;padding:18px 20px;display:flex;flex-direction:column;gap:10px;min-width:0}
.expo-col h3{margin:0 0 4px;font-size:15px}
.brow{display:grid;grid-template-columns:minmax(0,1fr) 34px;gap:4px 10px;align-items:center;font-size:14px}
.brow .lbl{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.brow .n{font-family:var(--mono);font-size:12px;color:var(--dim);text-align:right;font-variant-numeric:tabular-nums}
.brow .tr{grid-column:1 / -1;height:6px;background:var(--panel2);border-radius:3px;overflow:hidden}
.brow .tr i{display:block;height:100%;border-radius:3px}

/* timeline */
.tl{display:flex;flex-direction:column}
.tl-year{font-family:var(--display);font-stretch:80%;font-weight:800;font-size:22px;padding:18px 0 6px;border-bottom:2px solid var(--text)}
.tl-row{display:grid;grid-template-columns:90px 190px minmax(0,1fr) 54px;gap:14px;align-items:center;padding:12px 4px;border:0;border-bottom:1px solid var(--line);background:transparent;text-align:left;cursor:pointer;width:100%}
.tl-row:hover{background:var(--panel)}
.tl-row .d{font-family:var(--mono);font-size:12px;color:var(--dim)}
.tl-row .ty{font-family:var(--mono);font-size:11px;color:var(--accent);text-transform:uppercase;letter-spacing:.08em}
.tl-row .ti{font-size:15px}
.tl-row .sev{justify-self:end}
@media (max-width:700px){.tl-row{grid-template-columns:70px minmax(0,1fr) 44px}.tl-row .ty{display:none}}

/* chokepoints */
.cp{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px}
@media (max-width:900px){.cp{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:560px){.cp{grid-template-columns:minmax(0,1fr)}}
.cp-card{background:var(--bg);border:1px solid var(--line);border-radius:6px;padding:18px 20px;display:flex;flex-direction:column;gap:6px;min-width:0}
.cp-card .k{font-family:var(--mono);font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:var(--dim)}
.cp-card h3{margin:0;font-size:18px}
.cp-card .st{display:flex;align-items:baseline;gap:8px;flex-wrap:wrap}
.cp-card .st b{font-family:var(--display);font-stretch:80%;font-weight:800;font-size:36px;line-height:1;color:var(--accent)}
.cp-card .st span{font-size:13px;color:var(--dim)}
.cp-card p{margin:2px 0 0;font-size:14px}

/* copper chain */
.chainbox{overflow-x:auto;border:1px solid var(--line);border-radius:6px;background:var(--panel)}
#chain{display:block;width:100%;min-width:760px;height:auto}
.chain-notes{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:16px;margin-top:18px}
@media (max-width:900px){.chain-notes{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:520px){.chain-notes{grid-template-columns:minmax(0,1fr)}}
.chain-notes div{display:flex;flex-direction:column;gap:4px;border-top:2px solid var(--accent);padding-top:10px;font-size:14px}
.chain-notes span{color:var(--dim)}

/* about */
.about{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,1fr);gap:40px;align-items:start}
@media (max-width:900px){.about{grid-template-columns:minmax(0,1fr)}}
.about-main{display:flex;flex-direction:column;gap:12px}
.about-main h2{margin:0;font-family:var(--display);font-stretch:80%;font-weight:800;font-size:clamp(28px,3.4vw,40px);line-height:1.05}
.about-main p{margin:0;max-width:60ch;font-size:17px}
.pillars{display:flex;flex-direction:column;gap:14px}
.pillars div{background:var(--bg);border:1px solid var(--line);border-radius:6px;padding:16px 18px;display:flex;flex-direction:column;gap:4px}
.pillars span{color:var(--dim);font-size:14px}
@media (max-width:900px){.grid{grid-template-columns:minmax(0,1fr)}}

[hidden]{display:none!important}

/* Ranking the Raters */
.tab-raters span::after{content:"NEW";font-family:var(--mono);font-size:9px;letter-spacing:.08em;color:#fff;background:var(--accent);border-radius:2px;padding:1px 4px;margin-left:6px;vertical-align:2px}
.raters{display:flex;flex-direction:column;gap:18px}
.podium{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px}
@media (max-width:760px){.podium{grid-template-columns:minmax(0,1fr)}}
.pod{border:1px solid var(--line);border-radius:6px;padding:18px 20px;background:var(--bg);display:flex;flex-direction:column;gap:8px;min-width:0}
.pod.first{background:var(--accent-soft);border-color:var(--accent)}
.pod .top{display:flex;justify-content:space-between;align-items:baseline;gap:8px}
.pod .rk{font-family:var(--display);font-stretch:80%;font-weight:800;font-size:44px;line-height:1;color:var(--accent)}
.pod .sc{font-family:var(--display);font-stretch:80%;font-weight:800;font-size:28px;font-variant-numeric:tabular-nums}
.pod .sc small{font-size:13px;color:var(--dim);font-weight:500}
.pod h4{margin:0;font-size:18px}
.pod .kv{display:flex;gap:16px;flex-wrap:wrap;font-size:13px;color:var(--dim)}
.pod .kv b{color:var(--text);font-weight:600;font-variant-numeric:tabular-nums}
.rt-bar{display:flex;justify-content:space-between;align-items:center;gap:12px;flex-wrap:wrap}
.sorts{display:flex;gap:6px;align-items:center;flex-wrap:wrap}
.sorts .mono{font-size:11px;color:var(--dim);letter-spacing:.1em;text-transform:uppercase;margin-right:4px}
.sorts .ghost[aria-pressed="true"]{border-color:var(--accent);color:var(--accent);background:var(--accent-soft)}
.rt-meta{font-size:12px;color:var(--dim)}
.rt-wrap{overflow-x:auto;border:1px solid var(--line);border-radius:6px}
.rt{width:100%;border-collapse:collapse;min-width:680px;font-size:14px}
.rt th{font-family:var(--mono);font-size:11px;letter-spacing:.08em;text-transform:uppercase;color:var(--dim);font-weight:500;text-align:left;padding:10px 14px;background:var(--panel);border-bottom:1px solid var(--line)}
.rt td{padding:10px 14px;border-bottom:1px solid var(--line);font-variant-numeric:tabular-nums}
.rt tr:last-child td{border-bottom:0}
.rt tbody tr:hover{background:var(--panel)}
.rt .num{text-align:right}
.rt .c-rank{width:48px}
.rt td.c-rank{font-family:var(--mono);color:var(--dim)}
.rt tr.top3 td.c-rank{color:var(--accent);font-weight:600}
.rt td.firm{font-weight:600}
.rt .c-score{width:34%}
.sbar{display:flex;align-items:center;gap:10px}
.sbar i{flex:1;height:8px;background:var(--panel2);border-radius:4px;overflow:hidden;display:block}
.sbar i b{display:block;height:100%;background:var(--accent);border-radius:4px;transition:width .7s ease}
.sbar span{font-family:var(--mono);font-size:13px;min-width:38px;text-align:right}
.up-t{color:var(--benefit)}.dn-t{color:var(--exposed)}.eq-t{color:var(--dim)}
.rt-note{margin:0;font-size:13px;color:var(--dim);max-width:80ch}

/* raters: distribution bar */
.dist{display:flex;height:10px;border-radius:3px;overflow:hidden;background:var(--panel2);min-width:140px}
.dist i{display:block;height:100%}
.k-up{background:var(--benefit)}.k-dn{background:var(--exposed)}.k-in{background:var(--accent)}.k-re{background:var(--line2)}
.dist-n{font-family:var(--mono);font-size:10.5px;color:var(--dim);margin-top:4px;white-space:nowrap}
.dist-key{display:flex;gap:12px;flex-wrap:wrap;font-size:11px;color:var(--dim)}
.dist-key span{display:inline-flex;align-items:center;gap:5px}
.dist-key i{width:10px;height:10px;border-radius:2px;display:inline-block}
.rt{min-width:860px}
.rt .c-dist{width:24%}
.rt td.sec{color:var(--dim);white-space:nowrap}
.pod .sc small{font-size:12px}

/* ---- blue theme: header logo + navy footer ---- */
.brand{align-items:center}
.brand img{width:40px;height:40px;border-radius:9px;display:block;align-self:center}
.brand .bw{display:flex;align-items:baseline;gap:12px;flex-wrap:wrap}
footer{background:var(--navy);border-top:0;color:#d6e4ff}
footer .wrap{color:#c9d7f5}
footer b{color:#fff}
footer .fb{color:var(--cyan)}

/* ---- site banner (same design as the LinkedIn banner) ---- */
.banner{background:linear-gradient(100deg,var(--navy) 0%,#173cc4 50%,var(--accent) 100%);color:#fff}
.banner-inner{position:relative;max-width:1320px;margin:0 auto;aspect-ratio:1320/220;container-type:inline-size;overflow:hidden}
.bmap{position:absolute;inset:0;width:100%;height:100%;display:block;max-width:none}
.blogo{position:absolute;left:max(16px,env(safe-area-inset-left,0px));top:14px}
.blogo img{display:block;width:40px;height:40px;border-radius:9px;box-shadow:0 0 0 1px rgba(255,255,255,.25)}
.banner .nav{position:absolute;right:max(16px,env(safe-area-inset-right,0px));top:20px;gap:22px}
.banner .nav a{color:#d6e4ff;text-decoration:none;font-size:14px}
.banner .nav a:hover,.banner .nav a[aria-current]{color:#fff}
.btext{position:absolute;left:58.6%;top:54%;transform:translateY(-50%);display:flex;flex-direction:column;gap:1.1cqw;text-decoration:none;color:#fff}
.btext .w{font-family:var(--display);font-weight:800;font-stretch:80%;font-size:4.8cqw;line-height:1;letter-spacing:-.005em}
.btext .w span{color:var(--cyan)}
.btext .g{font-family:var(--mono);font-size:1.06cqw;letter-spacing:.14em;text-transform:uppercase;color:#d6e4ff;line-height:1.5}
@media (max-width:760px){
  .banner-inner{aspect-ratio:auto;height:200px}
  .bmap{opacity:.45;object-fit:cover;object-position:30% 50%}
  .banner .nav{top:62px;left:max(16px,env(safe-area-inset-left,0px));right:auto;gap:14px;flex-wrap:wrap}
  .banner .nav a{font-size:13px}
  .btext{left:max(16px,env(safe-area-inset-left,0px));top:auto;bottom:18px;transform:none;gap:6px}
  .btext .w{font-size:36px}
  .btext .g{font-size:10px}
  .blogo{top:14px}
}