/* YBN base + landing styles. Colours: tokens only (see tokens.css). */
*,*::before,*::after{box-sizing:border-box}
*{margin:0}
dialog{margin:auto}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;scroll-padding-top:5rem}
body{font-family:var(--font-body);font-size:1.0625rem;line-height:1.55;background:var(--bg);color:var(--text);overflow-x:hidden}
img,video,svg{display:block;max-width:100%}
a{color:inherit}
button,input{font:inherit;color:inherit}
:focus-visible{outline:3px solid var(--text);outline-offset:3px}
.on-dark :focus-visible,.strip :focus-visible,.block--secondary :focus-visible{outline-color:var(--on-secondary)}
.skip{position:absolute;left:1rem;top:-4rem;background:var(--secondary);color:var(--on-secondary);padding:.75rem 1rem;z-index:100}
.skip:focus{top:1rem}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.icon{width:1.5em;height:1.5em;flex:none}

.display{font-family:var(--font-display);font-weight:800;line-height:.92;letter-spacing:-.025em;text-wrap:balance}
.eyebrow{font-weight:700;font-size:.8125rem;letter-spacing:.14em;text-transform:uppercase;color:var(--text-muted)}
.wrap{width:min(100% - 2rem,84rem);margin-inline:auto}

/* ---------- buttons (44px min target) ---------- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:.6rem;min-height:2.75rem;padding:.6rem 1.4rem;border:0;border-radius:3rem;font-weight:700;text-decoration:none;cursor:pointer;background:var(--secondary);color:var(--on-secondary);transition:transform .15s}
.btn:hover{transform:translate(-2px,-2px)}
.btn--accent{background:var(--accent);color:var(--on-accent)}
.btn--ghost{background:transparent;color:var(--text);box-shadow:inset 0 0 0 2px var(--text)}
.btn[disabled],.btn[aria-disabled="true"]{opacity:.55;cursor:not-allowed;transform:none}

/* ---------- header ---------- */
.site-header{position:sticky;top:0;z-index:50;background:var(--bg);border-bottom:2px solid var(--text)}
.site-header .wrap{display:flex;align-items:center;gap:1rem;min-height:4rem}
.brand{display:flex;align-items:center;gap:.6rem;text-decoration:none;font-family:var(--font-display);font-weight:800;font-size:1.6rem;letter-spacing:-.03em;min-height:2.75rem}
.brand svg{width:2.4rem;height:2.4rem}
.brand .bub{color:var(--accent)}
.brand .mic{color:var(--on-accent)}
.nav{margin-left:auto;display:flex;align-items:center;gap:.25rem}
.nav a,.nav summary{display:inline-flex;align-items:center;gap:.35rem;min-height:2.75rem;padding:0 .8rem;font-weight:600;text-decoration:none;cursor:pointer;list-style:none;border-radius:.5rem}
.nav summary::-webkit-details-marker{display:none}
.nav a:hover,.nav summary:hover{background:var(--surface)}
.menu{position:relative}
.menu[open] summary{background:var(--surface)}
.menu__panel{position:absolute;right:0;top:calc(100% + .4rem);min-width:16rem;background:var(--secondary);color:var(--on-secondary);padding:.5rem;border-radius:.75rem;box-shadow:.4rem .4rem 0 var(--accent)}
.menu__panel a{display:flex;flex-direction:column;align-items:flex-start;gap:0;padding:.75rem 1rem;border-radius:.5rem}
.menu__panel a:hover{background:var(--bg);color:var(--text)}
.menu__panel small{font-weight:400;opacity:.9}
.nav .btn{margin-left:.5rem}
.nav-toggle{display:none}
@media (max-width:1020px){
  .nav-toggle{display:inline-flex;margin-left:auto;min-width:2.75rem;min-height:2.75rem;align-items:center;justify-content:center;background:var(--secondary);color:var(--on-secondary);border:0;border-radius:.6rem;font-weight:700;padding:0 1rem}
  .nav{display:none;position:absolute;left:0;right:0;top:100%;flex-direction:column;align-items:stretch;background:var(--bg);padding:.75rem 1rem 1rem;border-bottom:2px solid var(--text);margin:0}
  .nav.is-open{display:flex}
  .menu__panel{position:static;box-shadow:none;margin-top:.25rem}
  .nav .btn{margin:.5rem 0 0}
}

/* ---------- hero (concept C: jersey numeral) ----------
   The stage is a size container: every dimension inside is in cqw, so the numeral, TV and headline
   keep the same proportions from 320px phones to 4K. Above 84rem the stage stops growing and centres;
   the navy strip bleeds off the left edge. */
.hero{position:relative;overflow:hidden;isolation:isolate;padding-block:clamp(1rem,3vw,2.5rem) 0}
.hero__box{width:min(100% - 2rem,84rem);margin-inline:auto;container-type:inline-size}
.hero__stage{display:grid;grid-template-columns:repeat(12,1fr);position:relative}
.hero__num{grid-area:1/1/3/8;font-size:40cqw;color:var(--accent);line-height:.76;margin-left:-.05em;user-select:none;z-index:0}
.hero .tvwrap{grid-area:1/6/4/13;z-index:3;padding:1cqw 2cqw 0 0;align-self:start}
.strip{grid-area:3/1/4/10;position:relative;background:var(--secondary);color:var(--on-secondary);z-index:2;margin-top:-6cqw;padding:4cqw 4cqw 4cqw 0}
.strip::before,.strip::after{content:"";position:absolute;top:0;bottom:0;background:var(--secondary)}
.strip::before{right:calc(100% - 1px);width:100vw}                                           /* bleed off the left edge */
.strip::after{left:calc(100% - 1px);width:3.5cqw;clip-path:polygon(0 0,100% 0,0 100%)}        /* slanted right end */
.strip h1{font-size:5.2cqw;max-width:40cqw}
.hero__sub{grid-area:4/1/5/7;position:relative;z-index:2;padding:2.5cqw 0 4cqw;font-size:clamp(1.05rem,1.9cqw,1.5rem);max-width:34rem}
.hero__cta{display:flex;flex-wrap:wrap;gap:.75rem;margin-top:1.25rem}
.hero__ticker{margin-top:0}

@container (max-width:52rem){
  .hero__stage{display:block}
  .hero__num{font-size:50cqw;margin-bottom:-9cqw;position:relative}
  .hero .tvwrap{position:relative;padding:0 2cqw 0 0}
  .strip{margin-top:-3cqw;padding:13cqw 0 6cqw}
  .strip::after{width:100vw;clip-path:none}
  .strip h1{font-size:clamp(2.3rem,11.5cqw,4.2rem);max-width:none}
  .hero__sub{padding:6cqw 0 8cqw;font-size:clamp(1.05rem,4.4cqw,1.3rem)}
}


.tv{position:relative;border:clamp(.6rem,1.6vw,1.1rem) solid var(--secondary);border-radius:clamp(1rem,2.6vw,2rem);background:var(--secondary);box-shadow:.9rem .9rem 0 var(--accent);transform:rotate(1.8deg);overflow:hidden}
.tv__screen{position:relative;aspect-ratio:16/10;background:var(--surface);overflow:hidden}
.tv__screen video,.tv__screen img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0;transition:opacity .6s}
.tv__screen .is-on{opacity:1}
.onair{position:absolute;left:.9rem;top:.9rem;z-index:2;display:inline-flex;align-items:center;gap:.5rem;background:var(--accent);color:var(--on-accent);font-weight:700;font-size:.8rem;letter-spacing:.14em;padding:.35rem .8rem;border-radius:3rem}
.onair i{width:.7rem;height:.7rem;border-radius:50%;background:var(--on-accent);animation:blink 1.6s steps(2,jump-none) infinite}
@keyframes blink{50%{opacity:.25}}
.bug{position:absolute;right:.9rem;top:.9rem;z-index:2;background:var(--secondary);color:var(--on-secondary);font-weight:700;font-size:.8rem;letter-spacing:.08em;padding:.35rem .7rem;border-radius:.4rem}
.tv__bar{position:absolute;left:0;right:0;bottom:0;z-index:2;display:flex;background:var(--secondary);color:var(--on-secondary)}
.tv__bar button{flex:1;min-height:2.75rem;display:flex;flex-direction:column;justify-content:center;align-items:flex-start;gap:.1rem;padding:.35rem .75rem;border:0;border-right:1px solid var(--on-secondary);background:transparent;color:inherit;font-size:.78rem;font-weight:600;cursor:pointer;position:relative;text-align:left}
.tv__bar button:last-child{border-right:0}
.tv__bar button span{opacity:.9;font-weight:400}
.tv__bar button::after{content:"";position:absolute;left:0;top:0;height:3px;width:0;background:var(--accent)}
.tv__bar button[aria-current="true"]::after{width:100%;transition:width var(--clip-ms,15s) linear}
.tv__bar button[aria-current="true"]{background:var(--bg);color:var(--text)}
.tv-pause{position:absolute;right:.6rem;bottom:3.6rem;z-index:3;width:2.75rem;height:2.75rem;border-radius:50%;border:0;background:var(--accent);color:var(--on-accent);display:grid;place-items:center;cursor:pointer}

.ticker{background:var(--accent);color:var(--on-accent);font-weight:700;overflow:hidden;white-space:nowrap;height:3.25rem;display:flex;align-items:center}
.ticker__label{flex:none;background:var(--secondary);color:var(--on-secondary);height:100%;display:flex;align-items:center;padding:0 1.25rem;letter-spacing:.14em;font-size:.85rem;position:relative;z-index:1}
.ticker__track{display:flex;gap:3rem;padding-left:3rem;animation:scroll 40s linear infinite;will-change:transform}
.ticker__track span{display:inline-flex;align-items:center;gap:3rem}
.ticker__track span::after{content:"";width:.6rem;height:.6rem;background:var(--on-accent);transform:rotate(45deg)}
@keyframes scroll{to{transform:translateX(-50%)}}


/* ---------- sections ---------- */
section{padding-block:clamp(4rem,9vw,8rem)}
.sec-head{display:grid;gap:.75rem;margin-bottom:2.5rem;max-width:44rem}
.sec-head h2{font-size:clamp(2.4rem,5.5vw,4.6rem)}
.sec-head p{font-size:1.2rem}


.block{padding:clamp(1.5rem,3vw,2.75rem);border-radius:.4rem;position:relative;overflow:hidden}
.block--secondary{background:var(--secondary);color:var(--on-secondary)}
.block--accent{background:var(--accent);color:var(--on-accent)}
.block--surface{background:var(--surface);color:var(--text)}
.block h3{font-size:clamp(1.8rem,3.4vw,2.8rem);margin:.75rem 0 1rem}
.block .icon{width:2.5rem;height:2.5rem}
.block--accent .tag,.block--surface .tag{display:inline-block;border:2px solid currentColor;border-radius:3rem;padding:.1rem .7rem;font-weight:700;font-size:.85rem;margin:.2rem .3rem .2rem 0}

/* partners */
.partners{background:var(--surface)}
.partners .sec-head{margin-inline:auto;text-align:center;justify-items:center}
.partners__row{display:grid;grid-template-columns:repeat(4,1fr);gap:clamp(1rem,3vw,2.5rem) clamp(1rem,3vw,2.5rem);align-items:center}
.logo-cell{--cell:clamp(6rem,11vw,8.5rem);height:var(--cell);display:grid;place-items:center;padding:.5rem 1rem}
/* third-party logos: one grey, one size box. multiply drops their white backgrounds into the section tint */
.logo-cell img{width:auto;height:auto;max-width:100%;max-height:calc(var(--cell) - 1.25rem);object-fit:contain;filter:grayscale(1);mix-blend-mode:multiply;opacity:.85}
@media (max-width:760px){.partners__row{grid-template-columns:repeat(2,1fr)}}


/* signup */
.signup{background:var(--accent);color:var(--on-accent)}
.signup__in{display:grid;grid-template-columns:1.1fr 1fr;gap:3rem;align-items:end}
.signup h2{font-size:clamp(2.4rem,5vw,4.2rem)}
.signup form{display:grid;gap:.75rem}
.signup label{font-weight:700}
.signup .row{display:flex;gap:.6rem;flex-wrap:wrap}
.signup input[type=email]{flex:1 1 14rem;min-height:3rem;padding:.5rem 1rem;border:3px solid var(--on-accent);border-radius:3rem;background:var(--bg);color:var(--text)}
.signup .msg{min-height:1.5rem;font-weight:600}
.signup :focus-visible{outline-color:var(--on-accent)}
@media (max-width:760px){.signup__in{grid-template-columns:1fr}}

.site-footer{background:var(--bg);padding-block:2.5rem;border-top:2px solid var(--text)}
.site-footer .wrap{display:flex;flex-wrap:wrap;gap:1.5rem;justify-content:space-between;align-items:center}


@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation:none!important;transition:none!important;scroll-behavior:auto!important}
  .ticker__track{overflow-x:auto}
}

/* ---------- student creator pathways ---------- */
.paths{display:grid;grid-template-columns:repeat(12,1fr);gap:1.25rem;align-items:stretch}
.path{display:flex;flex-direction:column;gap:.9rem}
.path h3{margin:0;font-size:clamp(1.8rem,3.2vw,2.7rem)}
.path .sub{font-weight:700;letter-spacing:.1em;text-transform:uppercase;font-size:.8rem}
.path .chips{margin-top:auto;padding-top:1rem;display:flex;flex-wrap:wrap;gap:.4rem}
.path .chips span{border:2px solid currentColor;border-radius:3rem;padding:.1rem .7rem;font-weight:700;font-size:.85rem}
.pa1{grid-column:1/8}.pa2{grid-column:8/13}.pa3{grid-column:1/6}.pa4{grid-column:6/13}.pa5{grid-column:1/13}
.pa5 .chips{margin-top:0}
@media (max-width:860px){.paths>*{grid-column:1/-1!important}}

/* our story */
.story{background:var(--bg)}
.story__in{display:grid;grid-template-columns:1.3fr 1fr;gap:clamp(1.5rem,5vw,5rem);align-items:end}
.story h2{font-size:clamp(2.8rem,7vw,6.5rem)}
.story p{font-size:1.25rem;max-width:30rem}
.story .btn{margin-top:1.5rem}
@media (max-width:760px){.story__in{grid-template-columns:1fr}}

/* goals */
.goals__list{display:grid;gap:2.5rem}
.goal{display:grid;grid-template-columns:5rem 1fr;gap:1.5rem;align-items:start;max-width:62rem}
.goal:nth-child(2){margin-left:clamp(0rem,8vw,7rem)}
.goal:nth-child(3){margin-left:clamp(0rem,16vw,14rem)}
.goal__n{display:grid;place-items:center;width:4.5rem;height:4.5rem;background:var(--accent);color:var(--on-accent);font-family:var(--font-display);font-weight:800;font-size:1.9rem;border-radius:.4rem}
.goal h3{font-size:clamp(1.6rem,3vw,2.4rem);margin-bottom:.6rem}
.goal p{max-width:46rem}
@media (max-width:600px){.goal{grid-template-columns:1fr}.goal__n{width:3.5rem;height:3.5rem}}

/* programs */
.programs{background:var(--surface)}
.programs .block--surface{background:var(--bg)}
.pr1{grid-column:1/8}.pr2{grid-column:8/13}.pr3{grid-column:1/13}
@media (max-width:860px){.progs>*{grid-column:1/-1!important}}

/* contact */
.contact__in{display:grid;grid-template-columns:1.2fr 1fr;gap:clamp(2rem,6vw,6rem);align-items:start}
.contact h2{font-size:clamp(2.4rem,5vw,4.2rem);margin-bottom:1.5rem}
.form{display:grid;gap:.5rem}
.form label{font-weight:700;margin-top:.5rem}
.form input,.form textarea{width:100%;min-height:3rem;padding:.6rem .9rem;border:3px solid var(--text);border-radius:.5rem;background:var(--bg);color:var(--text);font:inherit}
.form .btn{justify-self:start;margin-top:.75rem}
.form .msg{min-height:1.5rem;font-weight:600}
.hours{background:var(--secondary);color:var(--on-secondary);padding:clamp(1.5rem,3vw,2.5rem);border-radius:.4rem}
.hours h3{font-size:2rem;margin-bottom:1rem}
.hours dl{display:grid;gap:.1rem;margin-bottom:1.25rem}
.hours dl>div{display:grid;grid-template-columns:4rem 1fr;border-bottom:1px solid var(--on-secondary);padding:.5rem 0}
.hours dt{font-weight:700}
@media (max-width:760px){.contact__in{grid-template-columns:1fr}}

/* language toggle */
.lang-toggle{min-width:2.75rem;padding:.4rem .9rem;margin-left:.25rem;letter-spacing:.06em}

/* pathway cards link into the student platform */
.path-go{align-self:flex-start;margin-top:.9rem}
.block--secondary .path-go{background:var(--accent);color:var(--on-accent)}
.block--accent .path-go{background:var(--text);color:var(--bg)}
.block--surface .path-go{background:var(--secondary);color:var(--on-secondary)}