:root{
    --hero-img:url('assets/simon-radio.png');
    --day:#e1efea;         /* minted paper */
    --panel:#FDFFFE;
    --white:#112421;         /* deep teal-slate ink (var name kept for reuse) */
    --dim:#3e564e;
    --signal:#0ac2b3;        /* teal — the main colour */
    --sun:#FF7A59;           /* coral accent */
    --line:rgba(22,48,43,.3);
    --display:'Bricolage Grotesque', sans-serif;
    --body:'Albert Sans', -apple-system, sans-serif;
    --mono:'IBM Plex Mono', monospace;
    --max:70rem;
  }
  /* --- Unit convention ------------------------------------------------
     rem   -> typography, spacing, and layout sizes (1rem = 16px root).
     px    -> render details only: borders, outlines, shadows, transforms,
              radii, gradient patterns, and the media-query breakpoint.
     vw/vh -> the fluid term inside clamp(); % / fr for intrinsic sizing.
     ch    -> the frequency readout, sized to its monospace digit count.
     -------------------------------------------------------------------- */
  *{margin:0;padding:0;box-sizing:border-box;}
  html{scroll-behavior:smooth;}
  body{
    background:var(--day);
    color:var(--white);
    font-family:var(--body);
    font-size:1.0625rem;font-weight:300;line-height:1.65;
    -webkit-font-smoothing:antialiased;
  }
  a{color:inherit;text-decoration:none;}
  a:focus-visible{outline:2px solid var(--sun);outline-offset:3px;}
  .wrap{max-width:var(--max);margin:0 auto;padding:0 1.5rem;}
  .flex{
    display: flex;
  }
  /* ---------- header ---------- */
  header{
    position:sticky;top:0;z-index:20;
    background:rgba(242,250,247,.9);
    backdrop-filter:blur(10px);
    border-bottom:1px solid var(--line);
  }
  .nav{display:flex;align-items:center;justify-content:space-between;height:4.25rem;gap:1.25rem;}
  .brand{font-family:var(--display);font-weight:600;font-size:1.2rem;letter-spacing:.01em;}
  .brand span{color:var(--sun);}
  nav ul{display:flex;gap:1.625rem;list-style:none;align-items:center;}
  nav a{
    font-size:.85rem;letter-spacing:.06em;color:var(--dim);
    transition:color .2s;
  }

  .btn{
    display:inline-block;
    font-family:var(--display);font-weight:600;
    font-size:.85rem;letter-spacing:.04em;
    padding:0.75rem 1.5rem;
    background:var(--sun);
    color:#FFF8F0;
    border:1px solid var(--sun);
    border-radius:999px;
    transition:background .2s,transform .15s;
  }
  .btn:hover{background:#E85F3C;transform:translateY(-1px);}
  .btn.ghost{background:rgba(6, 110, 109, 0.45);color:var(--white);border-color:rgba(244,242,236,.35);}
  .btn.ghost:hover{border-color:var(--sun);color:var(--sun);background:rgba(242,250,247,.8);}
  .nav .btn{padding:0.625rem 1.375rem;}   /* tighter book button in the header */
  .menu-btn{display:none;background:none;border:0;cursor:pointer;color:var(--white);font-family:var(--mono);font-size:.8rem;}

  /* ---------- hero: the tuner ---------- */
  .hero{
    position:relative;isolation:isolate;overflow:hidden;
    /* min-height:calc(100svh - 4.25rem); */
    min-height:calc(90svh - 4.25rem);
    display:flex;flex-direction:column;
    border-bottom:1px solid var(--line);
  }
  .hero::before{               /* the photo — Simon holds the left third */
    content:"";position:absolute;inset:0;z-index:-3;
    background-image:var(--hero-img);
    background-size:cover;
    background-position:18% 24%;
  }
  .hero::after{                /* sunny wash: heavy right, open left */
    content:"";
    position:absolute;
    inset:0;
    z-index:-2;
    background:
      /* repeating-linear-gradient(0deg, rgba(255, 255, 255, 0.1) 0 1px, transparent 1px 3px), */
      repeating-linear-gradient(0deg, rgba(255, 255, 255, 0.1) 0 1px, transparent 1px 2px),
      linear-gradient(270deg,
        rgba(242,250,247,.94) 0%,
        rgba(242,250,247,.82) 34%,
        rgba(242,250,247,.52) 54%,
        rgba(242,250,247,0) 70%),
      linear-gradient(0deg, var(--day) 6%, rgba(242,250,247,0) 25%, rgba(255, 255, 255, 0) 100%);
  }
  .hero-main{
    width: 75%;
    flex:1;display:flex;flex-direction:column;justify-content:center;
    padding-top:clamp(1.75rem,5vh,3.5rem);
    padding-bottom:1.875rem;
  }
  .mega-row{
    display:flex;flex-direction:column;align-items:flex-end;gap:1.875rem;
  }
  .mega{
    font-family:var(--display);
    font-weight:800;
    text-transform:uppercase;
    font-size:clamp(3.2rem,9vw,8.5rem);
    line-height:.86;
    letter-spacing:-.035em;
    text-align:right;
    user-select:none;
    text-shadow: 4px 4px 0 var(--sun);
    gap: 1.2rem;
    /* flex-direction: column; */
  }
  .mega .hollow{
    color:transparent;
    -webkit-text-stroke:2px var(--white);
    text-shadow:4px 4px 0 var(--white);
    color: var(--sun)
  }
  .hero-cta{display:flex;gap:0.875rem;flex-wrap:wrap;justify-content:flex-end;}

  /* tuner readout */
  .tuner{
    display:flex;align-items:flex-start;gap:clamp(1.5rem,4vw,3.5rem);
    margin-top:auto;                       /* push tuner + dial to bottom of hero */
    flex-wrap:wrap;
    flex-direction:row-reverse;
    text-align:right;
  }
  .freq{
    font-family:var(--mono);font-weight:500;
    font-size:clamp(2.6rem,4vw,4.4rem);
    line-height:1;color:var(--signal);
    text-shadow:0 0 20px rgba(15,163,150,.35);
    flex:none;                              /* fixed size — never shrink into the name */
    width:7.2ch;
    font-variant-numeric:tabular-nums;
    text-align:left;
  }
  .freq small{
    font-size:.32em;
    letter-spacing:.2em;
    color:var(--signal);
    text-shadow:none;
    margin-left:0.5rem;
  }
  /* name + desc size to their own content, so they can never spill onto the freq or dial */
  .station{
    position:relative;
    flex:1 1 16.25rem;
    justify-content: space-between;
    align-items:end;
    width: 100%;              /* wraps below the freq when cramped, never overflows */
  }
  .station .inner{
    transition:opacity .35s ease,transform .35s ease;
    /* swap crossfade — transform only, no layout impact */
  }
  .station.swap .inner{opacity:0;transform:translateY(8px);}
  .station .name{
    font-family:var(--display);font-weight:700;
    font-size:clamp(1.7rem,4.4vw,2.6rem);
    letter-spacing:.02em;
    line-height:1.02;
  }
  .station .desc{
    color:var(--white);
    font-size:clamp(1.05rem,2.4vw,1.4rem);  /* scales down on small screens instead of forcing extra wraps */
    font-weight: bold;
    margin-top:0.375rem;
    line-height:1.25;
  }

  /* dial scale */
  .dial{
    position:relative;
    margin-top:clamp(1.375rem,3.5vh,2.25rem);
    padding:1.125rem 0 0;
    border-top:1px solid var(--line);
  }
  .dial-scale{
    position:relative;height:1.875rem;
    background:
      repeating-linear-gradient(90deg, var(--line) 0 1px, transparent 1px 12px),
      repeating-linear-gradient(90deg, rgb(24 24 24 / 54%) 0 1px, transparent 1px 60px);
    background-position:bottom;
    background-size:100% 11px,100% 20px;
    background-repeat:repeat-x;
  }
  .dial-nums{
    position:relative;height:1.2em;
    font-family:var(--mono);font-size:.7rem;color:var(--dim);
    margin-top:0.5rem;
  }
  /* each label centered on its own frequency — same 88..108 scale as the needle */
  .dial-nums span{position:absolute;transform:translateX(-50%);white-space:nowrap;}
  .dial-nums span:nth-child(1){left:0;transform:none;}        /* 88  — flush left  */
  .dial-nums span:nth-child(2){left:20%;}                     /* 92  */
  .dial-nums span:nth-child(3){left:40%;}                     /* 96  */
  .dial-nums span:nth-child(4){left:60%;}                     /* 100 */
  .dial-nums span:nth-child(5){left:80%;}                     /* 104 */
  .dial-nums span:nth-child(6){left:100%;transform:translateX(-100%);} /* 108 — flush right */
  .needle{
    position:absolute;
    top:-1.5rem;
    bottom:-0.5rem;
    left:12%;
    width:2px;
    background:var(--sun);
    /* box-shadow:0 0 14px rgba(15,163,150,.9); */
    box-shadow:0 0 14px #FF7A59e6;
    transition:left 1.1s cubic-bezier(.65,.05,.25,1);
  }
  .needle::before{
    content:"";
    position:absolute;
    top:-0.3125rem;
    left:-0.25rem;
    width:0.625rem;
    height:0.625rem;
    border-radius:50%;
    background:var(--sun);
    box-shadow:0 0 12px #FF7A59e6;
  }

  /* waveform */
  .wave-wrap{position:relative;height:clamp(5.625rem,14vh,9.375rem);}
  #wave{position:absolute;inset:0;width:100%;height:100%;display:block;}

  /* ticker */
  .ticker{
    background-color: var(--panel);
    border-top:1px solid var(--line);
    overflow:hidden;white-space:nowrap;
    padding:0.75rem 0;
    font-family:var(--mono);font-size:.74rem;letter-spacing:.18em;
    color:var(--dim);
  }
  .ticker-inner{display:inline-block;animation:marquee 26s linear infinite;}
  .ticker b{color:#E8683F;font-weight:500;margin:0 0.875rem;}
  @keyframes marquee{to{transform:translateX(-50%);}}

  .rise{opacity:0;transform:translateY(16px);animation:rise .8s ease forwards;}
  .rise.d1{animation-delay:.1s}.rise.d2{animation-delay:.2s}.rise.d3{animation-delay:.3s}
  @keyframes rise{to{opacity:1;transform:none}}
  @media (prefers-reduced-motion:reduce){
    .rise{opacity:1;transform:none;animation:none;}
    .onair i,.eq b{animation:none;}
    html{scroll-behavior:auto;}
  }

  /* ---------- sections ---------- */
  section{padding:clamp(4rem,9vh,6.875rem) 0;}
  .eyebrow{
    font-family:var(--mono);font-size:.72rem;letter-spacing:.22em;
    text-transform:uppercase;color:var(--sun);
    margin-bottom:1rem;
  }
  h2{
    font-family:var(--display);font-weight:600;
    font-size:clamp(1.9rem,4vw,2.8rem);
    letter-spacing:-.01em;
    margin-bottom:1.125rem;
  }
  .sub{color:var(--dim);max-width:38.75rem;}

  /* ---------- programme (services) ---------- */
  .programme{margin-top:3.25rem;border-top:1px solid var(--line);}
  .slot{
    display:grid;
    grid-template-columns:7.5rem 1fr 1.2fr;
    gap:1.75rem;align-items:baseline;
    padding:1.875rem 0;
    border-bottom:1px solid var(--line);
    transition:background .2s;
  }
  .slot:hover{background:rgba(244,242,236,.02);}
  .slot .tag{font-family:var(--mono);font-size:.74rem;letter-spacing:.14em;color:var(--dim);}
  .slot h3{
    font-family:var(--display);font-weight:600;
    font-size:clamp(1.3rem,2.4vw,1.7rem);letter-spacing:-.01em;
  }
  .slot p{color:var(--dim);font-size:.98rem;}

  /* ---------- listen ---------- */
  #listen{background:var(--panel);border-top:1px solid var(--line);border-bottom:1px solid var(--line);}
  .listen-grid{display:grid;grid-template-columns:1fr 1fr;gap:3.5rem;align-items:center;}
  .player{
    border:1px solid var(--line);
    border-radius:14px;
    padding:1.75rem;
    background:var(--day);
  }
  .player .track{
    font-family:var(--mono);font-size:.74rem;letter-spacing:.14em;
    color:var(--dim);margin-bottom:1.25rem;
  }
  .player-row{display:flex;align-items:center;gap:1.375rem;}
  .play{
    flex:none;width:3.625rem;height:3.625rem;border-radius:50%;
    background:var(--sun);
    display:grid;place-items:center;cursor:pointer;
    transition:transform .15s;
  }
  .play:hover{transform:scale(1.06);}
  .play svg{margin-left:0.1875rem;}
  .eq{display:flex;align-items:flex-end;gap:0.25rem;height:2.75rem;flex:1;}
  .eq b{
    flex:1;background:var(--dim);opacity:.55;border-radius:2px 2px 0 0;
    animation:eq 1.1s ease-in-out infinite alternate;
  }
  .eq b:nth-child(3n){background:var(--signal);opacity:.9;}
  @keyframes eq{from{height:18%}to{height:100%}}
  .eq b:nth-child(1){animation-delay:0s}.eq b:nth-child(2){animation-delay:.15s}
  .eq b:nth-child(3){animation-delay:.3s}.eq b:nth-child(4){animation-delay:.1s}
  .eq b:nth-child(5){animation-delay:.25s}.eq b:nth-child(6){animation-delay:.05s}
  .eq b:nth-child(7){animation-delay:.35s}.eq b:nth-child(8){animation-delay:.2s}
  .eq b:nth-child(9){animation-delay:.4s}.eq b:nth-child(10){animation-delay:.12s}
  .eq b:nth-child(11){animation-delay:.28s}.eq b:nth-child(12){animation-delay:.08s}

  /* ---------- testimonials ---------- */
  .quotes{display:grid;grid-template-columns:1fr 1fr;gap:1.75rem;margin-top:3.25rem;}
  .quote{
    border:1px solid var(--line);border-radius:14px;
    padding:2.125rem;
    background:var(--panel);
  }
  .quote p{font-size:1.08rem;line-height:1.6;}
  .quote p::before{content:"\"";color:var(--sun);font-family:var(--display);font-weight:700;margin-right:0.125rem;}
  .quote footer{
    margin-top:1.375rem;
    font-family:var(--mono);font-size:.74rem;letter-spacing:.1em;
    color:var(--dim);
  }
  .placeholder{opacity:.6;}

  /* ---------- contact ---------- */
  #book{text-align:center;}
  #book h2{font-size:clamp(2.2rem,5vw,3.4rem);}
  #book .sub{margin:0 auto 2.25rem;}
  .contact-line{
    margin-top:1.75rem;
    font-family:var(--mono);font-size:.8rem;letter-spacing:.08em;color:var(--dim);
  }
  .contact-line a{color:var(--white);border-bottom:1px solid var(--sun);}

  footer.site{border-top:1px solid var(--line);padding:2.75rem 0;}
  .foot{display:flex;justify-content:space-between;gap:1.25rem;flex-wrap:wrap;align-items:center;}
  .foot ul{list-style:none;display:flex;gap:1.5rem;}
  .foot a{font-family:var(--mono);font-size:.74rem;letter-spacing:.1em;color:var(--dim);}
  .foot a:hover{color:var(--sun);}
  .copy{font-family:var(--mono);font-size:.7rem;color:var(--dim);}

  @media (max-width:820px){
    /* stack the readout vertically: freq on top, name + desc below — never side by side */
    .tuner{flex-direction:column-reverse;align-items:flex-end;gap:0.875rem;}
    .freq{margin-top:0;}
    .station{width:100%;min-width:0;flex:none;}
    .hero::before{background-position:68% 30%;}
    .hero::after{
      background:
        linear-gradient(90deg,
          rgba(16,20,31,.92) 0%,
          rgba(16,20,31,.8) 45%,
          rgba(16,20,31,.45) 75%,
          rgba(16,20,31,.25) 100%),
        linear-gradient(0deg,
          var(--day) 0%, rgba(16,20,31,0) 18%);
    }
    nav ul{display:none;}
    .menu-btn{display:block;}
    .slot{grid-template-columns:1fr;gap:0.5rem;}
    .listen-grid{grid-template-columns:1fr;gap:2rem;}
    .quotes{grid-template-columns:1fr;}
  }