/* ALLOW-VOICE-LINT: stylesheet; double hyphens are CSS custom property syntax */
/* The Sideline Live: shared system. World = Sound On (cobalt drench, white signal, amber peaks). */
:root{
  --deep:#031536;
  --deep-2:#04204F;
  --cobalt:#0049AC;
  --cobalt-up:#2F76E4;
  --white:#F7FAFF;
  --soft:#D9E5F8;
  --dim:#B4C7E6;
  --amber:#FFB02E;
  --meter-g:#3ED47C;
  --meter-r:#FF4D3D;
  --tally:#FF4D3D;
  --green:#074831;
  --green-2:#0A5A3E;
  --line:rgba(180,199,230,.24);
  --panel:rgba(2,12,32,.45);
  --panel-2:rgba(2,12,32,.65);
  --disp:'Big Shoulders Display',sans-serif;
  --body:'Hanken Grotesk',system-ui,sans-serif;
  --mono:'Spline Sans Mono',ui-monospace,monospace;
  --ease:cubic-bezier(.16,.84,.3,1);
}
*{box-sizing:border-box;margin:0;padding:0}
html{scrollbar-color:#1d4d97 var(--deep);scrollbar-width:thin;-webkit-text-size-adjust:100%}
html,body{overflow-x:clip}
body{
  background:var(--deep);
  color:var(--white);font-family:var(--body);font-size:16.5px;line-height:1.62;
  -webkit-font-smoothing:antialiased;min-height:100svh;
}
/* the drench: painted on a fixed layer so it never seams at the viewport edge or stretches on iOS */
body::before{content:"";position:fixed;inset:0;z-index:-1;pointer-events:none;background:linear-gradient(180deg,var(--deep) 0%,var(--deep-2) 34%,var(--cobalt) 120%)}
::selection{background:#fff;color:var(--cobalt)}
:focus-visible{outline:2px solid #fff;outline-offset:3px;border-radius:2px}
::-webkit-scrollbar{width:10px;background:var(--deep)}
::-webkit-scrollbar-thumb{background:#1d4d97;border:2px solid var(--deep);border-radius:6px}
a{color:inherit}
img{max-width:100%;display:block}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}
input,select{font:inherit;color:inherit}
input::placeholder{color:var(--dim)}
.wrap{max-width:1220px;margin:0 auto;padding:0 clamp(20px,4vw,48px)}
.mono{font-family:var(--mono);font-size:12px;letter-spacing:.05em}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.tnum{font-variant-numeric:tabular-nums}

/* ============ nav ============ */
.bar{
  position:fixed;inset:0 0 auto 0;z-index:50;display:flex;align-items:center;gap:14px;
  padding:12px clamp(16px,3vw,36px);
  background:linear-gradient(rgba(3,21,54,.94) 40%,rgba(3,21,54,0));
}
.bar .brand{display:flex;align-items:center;gap:10px;text-decoration:none;flex:none}
.bar .brand img{width:34px;height:34px}
.bar .brand b{font-size:14px;font-weight:700;white-space:nowrap}
.bar nav{margin-left:auto;display:flex;gap:2px}
.bar nav a{color:var(--dim);text-decoration:none;font-size:13.5px;font-weight:600;padding:8px 12px;border-radius:4px;transition:color .16s,background .16s;white-space:nowrap}
.bar nav a:hover{color:var(--white);background:rgba(255,255,255,.08)}
.bar nav a[aria-current="page"]{color:var(--white);box-shadow:inset 0 -2px 0 var(--amber)}
.bar .menu{display:none;margin-left:auto;width:42px;height:42px;border-radius:8px;border:1px solid var(--line);place-items:center}
.bar .menu svg{width:20px;height:20px;stroke:#fff;fill:none;stroke-width:2;stroke-linecap:round}
.bar .menu .x{display:none}
.bar.open .menu .x{display:block}.bar.open .menu .h{display:none}
@media (max-width:960px){
  .bar nav{display:none;position:absolute;left:0;right:0;top:100%;flex-direction:column;gap:0;padding:8px 16px 18px;background:rgba(3,21,54,.98);border-bottom:1px solid var(--line)}
  .bar.open nav{display:flex}
  .bar nav a{padding:13px 10px;font-size:16px;border-bottom:1px solid var(--line);border-radius:0}
  .bar nav a[aria-current="page"]{box-shadow:none;color:var(--amber)}
  .bar .menu{display:grid}
}

/* ============ buttons ============ */
.btn{
  display:inline-flex;align-items:center;gap:9px;font-weight:700;font-size:14.5px;text-decoration:none;
  padding:14px 22px;border-radius:100px;border:1px solid transparent;white-space:nowrap;
  transition:transform .18s cubic-bezier(.2,.9,.2,1),background .18s,border-color .18s,color .18s;
}
.btn svg{width:15px;height:15px;stroke:currentColor;fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;flex:none}
.btn.white{background:#fff;color:var(--cobalt)}
.btn.white:hover{transform:translateY(-2px);background:var(--white)}
.btn.ghost{border-color:rgba(255,255,255,.4);color:#fff}
.btn.ghost:hover{transform:translateY(-2px);border-color:#fff}
.btn.amber{background:var(--amber);color:#1d1405}
.btn.amber:hover{transform:translateY(-2px);background:#ffc155}
.btn.sm{padding:10px 16px;font-size:13.5px}
.cta-row{display:flex;gap:12px;flex-wrap:wrap}

/* ============ section furniture ============ */
section.block{padding:clamp(76px,10vw,132px) 0;position:relative}
section.block.tight{padding-top:0}
h1.sec,h2.sec,h3.sec{
  font-family:var(--disp);font-weight:700;text-transform:uppercase;
  font-size:clamp(34px,4.4vw,64px);line-height:.98;letter-spacing:.015em;margin-bottom:10px;text-wrap:balance;
}
.lede{color:var(--dim);max-width:60ch;margin-bottom:40px;font-size:16px}
.lede a{color:var(--white)}
.stamp{font-family:var(--mono);color:var(--amber);font-size:12px;letter-spacing:.06em}
.rule{height:1px;background:var(--line)}

/* page hero (inner pages) */
.phero{position:relative;padding:clamp(120px,16vh,170px) 0 clamp(36px,5vw,60px);overflow:hidden}
.phero h1{
  font-family:var(--disp);font-weight:800;text-transform:uppercase;
  font-size:clamp(56px,9vw,132px);line-height:.9;letter-spacing:.005em;text-wrap:balance;
}
.phero .sub{margin-top:22px;max-width:58ch;color:var(--soft);font-size:clamp(16px,1.5vw,18.5px)}
.phero .sub b{color:var(--white)}
.phero canvas.wave{position:absolute;inset:0;width:100%;height:100%;opacity:.55}
.phero .inner{position:relative;z-index:2}

/* ============ shared components ============ */
/* archive rows */
.rows{border-top:1px solid var(--line)}
.row{
  display:grid;grid-template-columns:78px minmax(0,1fr) 120px auto;gap:16px;align-items:center;
  padding:13px 8px;border-bottom:1px solid var(--line);text-decoration:none;transition:background .16s;
}
.row:hover,.row:focus-visible{background:rgba(255,255,255,.05)}
.row .n{font-family:var(--mono);color:var(--dim);font-size:13px}
.row .t{font-weight:600}
.row .t small{display:block;font-weight:400;color:var(--dim);font-size:13.5px;margin-top:1px}
.row .wv{display:flex;gap:2px;align-items:center;height:22px}
.row .wv i{width:3px;background:var(--dim);opacity:.7;border-radius:1px}
.row:hover .wv i{background:var(--amber);opacity:1}
.row .go{color:var(--dim);transition:transform .16s,color .16s}
.row:hover .go{transform:translateX(3px);color:#fff}
.row .d{font-family:var(--mono);color:var(--dim);font-size:12px;text-align:right;white-space:nowrap}

/* frequency bands */
.freqs{display:grid;gap:14px}
.freq{
  position:relative;display:grid;grid-template-columns:minmax(0,1.2fr) minmax(0,1fr);gap:20px;align-items:center;
  border-radius:12px;overflow:hidden;text-decoration:none;min-height:230px;border:1px solid transparent;
  transition:transform .3s cubic-bezier(.2,.9,.25,1),box-shadow .3s;
}
.freq:hover{transform:translateY(-3px);box-shadow:0 30px 50px -30px rgba(0,0,0,.7)}
.freq .txt{padding:clamp(24px,3vw,42px);position:relative;z-index:2}
.freq h3{font-family:var(--disp);font-weight:800;text-transform:uppercase;font-size:clamp(30px,3.4vw,48px);line-height:.95}
.freq p{margin-top:10px;max-width:46ch;font-size:15px}
.freq .band{position:relative;z-index:2;height:100%;min-height:150px}
.freq canvas{position:absolute;inset:0;width:100%;height:100%}
.freq.her{background:linear-gradient(100deg,#052E1F,#074831 55%,#0A5A3E);color:#EAF6F0}
.freq.her p{color:#BFE3D2}
.freq.shorts{background:linear-gradient(100deg,#1A1140,#3A1F86 55%,#5A2AAB);color:#F0EAFB}
.freq.shorts p{color:#D4C6F1}
.freq .open{display:inline-flex;align-items:center;gap:8px;margin-top:16px;font-family:var(--mono);font-size:12px;letter-spacing:.06em}
.freq .open svg{width:13px;height:13px;stroke:currentColor;fill:none;stroke-width:2;stroke-linecap:round;transition:transform .18s}
.freq:hover .open svg{transform:translateX(3px)}

/* jumbotron (socials) */
.jumbo{background:linear-gradient(180deg,rgba(3,21,54,0) 0%,rgba(2,10,30,.55) 30%,rgba(0,42,113,.55) 100%)}
.jumbogrid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px}
.jcell{
  position:relative;border-radius:8px;overflow:hidden;text-decoration:none;
  border:1px solid rgba(157,180,216,.3);background:#000;aspect-ratio:4/5;
  transition:transform .3s cubic-bezier(.2,.9,.25,1),box-shadow .3s;
}
.jcell:hover{transform:translateY(-6px);box-shadow:0 26px 46px -20px rgba(0,0,0,.8)}
.jcell img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.jcell::before{content:"";position:absolute;inset:0;z-index:2;pointer-events:none;background:repeating-linear-gradient(0deg,rgba(3,10,26,.25) 0 2px,transparent 2px 5px)}
.jcell .cap{position:absolute;z-index:3;left:0;right:0;bottom:0;padding:14px;background:linear-gradient(transparent,rgba(2,8,22,.94) 55%)}
.jcell .cap .k{font-family:var(--mono);font-size:11px;font-weight:500;letter-spacing:.14em;color:var(--amber)}
.jcell .cap b{display:block;font-size:14px;line-height:1.35;margin-top:4px}
/* the feed: Orla's own posts, square like the grid they came from. Her episode cards carry
   their own lettering, so the caption waits for hover or focus and only the date sits on top. */
.jcell.ig{aspect-ratio:1/1}
.jcell.ig::before{opacity:.45}
.jcell.ig .cap{padding:10px 12px;background:linear-gradient(transparent,rgba(2,8,22,.9) 45%)}
.jcell.ig .cap b{display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden;max-height:0;opacity:0;transition:max-height .3s var(--ease),opacity .25s}
.jcell.ig:hover .cap b,.jcell.ig:focus-visible .cap b{max-height:5.6em;opacity:1}
.jcell.ig:focus-visible{outline:2px solid var(--amber);outline-offset:3px}
.anthems{display:flex;justify-content:space-between;align-items:center;gap:16px;flex-wrap:wrap;margin-top:14px;padding:18px 22px;border:1px solid var(--line);border-radius:12px;background:var(--panel)}
.anthems b{font-family:var(--disp);font-weight:800;text-transform:uppercase;font-size:22px;letter-spacing:.02em;margin-right:12px}
.anthems .txt span{color:var(--dim);font-size:14.5px}
.anthems .soon{font-family:var(--mono);font-size:11px;letter-spacing:.12em;color:var(--dim);border:1px dashed rgba(157,180,216,.55);border-radius:4px;padding:4px 8px;white-space:nowrap}
.screens{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px;margin-top:22px}
.screen{
  display:flex;align-items:center;gap:12px;text-decoration:none;padding:16px 18px;border-radius:10px;
  border:1px solid var(--line);background:var(--panel);transition:border-color .2s,background .2s,transform .2s;
}
.screen:hover{border-color:rgba(255,255,255,.5);background:var(--panel-2);transform:translateY(-2px)}
.screen svg{width:22px;height:22px;stroke:currentColor;fill:none;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round;flex:none}
.screen b{display:block;font-size:14.5px}
.screen small{display:block;color:var(--dim);font-size:12.5px}

/* desk: booking strip faders */
.strips{display:grid;grid-template-columns:repeat(4,1fr);gap:12px}
.strip{border:1px solid var(--line);border-radius:10px;padding:16px 12px 18px;background:var(--panel);text-align:center}
.strip .slot{position:relative;display:block;height:130px;width:6px;margin:0 auto;background:rgba(255,255,255,.14);border-radius:3px}
.strip .fader{
  position:absolute;left:50%;transform:translate(-50%,0);bottom:0;width:26px;height:14px;border-radius:3px;
  background:#fff;box-shadow:0 3px 8px rgba(0,0,0,.5);transition:bottom 1s cubic-bezier(.2,.85,.25,1);
}
.strip.in .fader{bottom:var(--lvl)}
.strip b{display:block;margin-top:14px;font-size:13px;letter-spacing:.02em}
.strip small{color:var(--dim);font-size:12.5px;line-height:1.4;display:block;margin-top:3px}
.quote{border-top:2px solid var(--amber);padding-top:16px;margin:24px 0;max-width:520px}
.quote p{font-size:clamp(18px,1.9vw,22px);line-height:1.45;font-weight:500}
.quote cite{display:block;margin-top:8px;color:var(--dim);font-style:normal;font-size:14px}
.credits{color:var(--dim);font-size:14.5px}
.credits b{color:var(--white)}

/* abroad band + partners */
.abroadband{display:flex;align-items:center;gap:26px;flex-wrap:wrap;justify-content:space-between;border:1px solid var(--line);border-radius:12px;padding:clamp(22px,3vw,36px);background:var(--panel)}
.abroadband h3{font-family:var(--disp);font-weight:800;text-transform:uppercase;font-size:clamp(24px,2.6vw,36px)}
.abroadband p{color:var(--dim);max-width:52ch;margin-top:6px}
.names{font-family:var(--mono);font-size:12.5px;color:#CFE0FB;line-height:2}
.names b{color:var(--amber);font-weight:500}
.partners{display:flex;gap:26px;flex-wrap:wrap;align-items:center;color:var(--dim);font-size:14px}
.partners b{color:var(--white);font-weight:600}
.partners a{text-decoration:none}
.partners a:hover b{text-decoration:underline;text-underline-offset:3px}

/* rotator: a set of photos that crossfade in one box. Runs only on screen, holds under a
   pointer or focus, stops for good once a dot is pressed, and stays on the first photo for
   anyone who asked for reduced motion. */
.rota{position:relative;overflow:hidden}
.rota img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0;visibility:hidden;transition:opacity 1.1s var(--ease),visibility 0s linear 1.1s}
.rota img.on{opacity:1;visibility:visible;transition:opacity 1.1s var(--ease),visibility 0s}
.rota .rdots{position:absolute;z-index:4;right:14px;bottom:14px;display:flex;gap:7px;padding:6px 8px;border-radius:100px;background:rgba(3,14,38,.62)}
.rota .rdots:empty{display:none}
.rota .rdot{width:8px;height:8px;border-radius:50%;background:rgba(255,255,255,.5);padding:0;transition:background .2s,transform .2s}
.rota .rdot[aria-current="true"]{background:var(--amber);transform:scale(1.15)}
.rota .rdot:focus-visible{outline:2px solid #fff;outline-offset:2px}
.rota .osd{transition:opacity .3s}

/* LED board */
.ledband{position:relative;overflow:hidden;background:#020a1c;border-block:1px solid var(--line)}
.ledband canvas{display:block;width:100%}


/* footer */
footer{border-top:1px solid var(--line);padding:44px 0 62px;background:rgba(2,9,22,.6);margin-top:auto}
footer .cols{display:flex;justify-content:space-between;gap:30px;flex-wrap:wrap}
footer .sig{display:flex;align-items:center;gap:12px}
footer .sig img{width:44px;height:44px}
footer .sig small{display:block;color:var(--dim)}
footer nav{display:flex;gap:18px;flex-wrap:wrap}
footer nav a{color:var(--dim);text-decoration:none;font-size:14px}
footer nav a:hover{color:#fff}
footer .fine{margin-top:28px;color:#7E96BF;font-size:12.5px;max-width:78ch}
footer .fine a{color:#A9BEE0}

/* reveals */
.rv{opacity:1;transform:none}
.js .rv{opacity:0;transform:translateY(26px);transition:opacity .7s var(--ease),transform .7s var(--ease)}
.js .rv.in{opacity:1;transform:none}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.001s !important;transition-duration:.001s !important;scroll-behavior:auto !important}
  .js .rv{opacity:1;transform:none}
}
/* settle: review captures only (?settle in the URL) */
.settle .rv,.settle .strip,.settle .snap{opacity:1 !important;transform:none !important}
.settle .w{opacity:1 !important;transform:none !important;filter:none !important}
.settle svg path{stroke-dashoffset:0 !important}
.settle .silence .flat::before{transform:none !important}
.settle .strip .fader{bottom:var(--lvl) !important}
.settle .spine .track,.settle .cutdeck .spacer{height:0 !important}
/* full-page captures cannot scroll a fixed layer, so settle stretches the drench over the document instead */
.settle body{position:relative}
.settle body::before{position:absolute}
@media (max-width:960px){
  .freq{grid-template-columns:1fr}
  .freq .band{min-height:110px}
  .jumbogrid{grid-template-columns:repeat(2,1fr)}
  .screens{grid-template-columns:repeat(2,1fr)}
  .row{grid-template-columns:56px minmax(0,1fr) auto}
  .row .wv,.row .d{display:none}
}
@media (max-width:560px){
  .strips{grid-template-columns:repeat(2,1fr)}
  .screens{grid-template-columns:1fr 1fr}
}