/*
  ICE CREAM SUNDAYS — site stylesheet.

  This is the ICS brand, NOT the Spacely system. No Orbit Red, no IBM Plex Mono,
  no austere documentary register. ICS is bright, playful and loud.
  Palette read off the ICS master mark and the Energy Groove era artwork.
  Single-theme by choice: the brand is a dark room with neon in it, and a light
  variant would be a different brand. Every colour is painted explicitly so the
  page holds on any host background.
*/
:root{
  --cyan:#35C6D6;
  --magenta:#EC1E79;
  --coral:#F58E52;
  --yellow:#FBCF5C;
  --sky:#9FD9EC;
  --ink:#17111A;          /* plum-biased near-black, not neutral grey */
  --ink-2:#221825;
  --ink-3:#2B1F30;
  --white:#FFF;
  --dim:#B0A5B5;
  --rule:#332738;
  --display:"Anton",Impact,"Haettenschweiler",sans-serif;
  --body:"Barlow",-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
  --wrap:1040px;
}
*{box-sizing:border-box;margin:0;padding:0}
html{
  -webkit-text-size-adjust:100%;scroll-behavior:smooth;
  color-scheme:dark;
}
body{
  background:var(--ink);
  color:var(--white);
  font-family:var(--body);
  font-size:17px;
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
}
a,button{touch-action:manipulation;-webkit-tap-highlight-color:transparent}

/* anchored sections clear the sticky nav */
section[id]{scroll-margin-top:84px}
/* archive years render on demand; ~1200px keeps the scrollbar honest */
.year{content-visibility:auto;contain-intrinsic-size:auto 1200px}

.sr-only{
  position:absolute;width:1px;height:1px;padding:0;margin:-1px;
  overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0;
}
.skip{
  position:absolute;left:16px;top:-48px;z-index:100;
  padding:10px 18px;border-radius:3px;background:var(--yellow);color:var(--ink);
  font-family:var(--display);text-transform:uppercase;font-size:14px;
  border:0;transition:top .15s ease;
}
.skip:focus-visible{top:12px}
.wrap{max-width:var(--wrap);margin:0 auto;padding:0 24px}
.narrow{max-width:820px}

/* ---------- nav ---------- */
.nav{
  position:sticky;top:0;z-index:50;
  background:rgba(23,17,26,.92);
  backdrop-filter:blur(10px);
  border-bottom:1px solid var(--rule);
}
.nav .wrap{display:flex;align-items:center;gap:18px;height:64px;flex-wrap:wrap}
.nav .mark{display:flex;align-items:center;gap:10px;border:0;flex:0 0 auto;margin-right:auto}
.nav .mark img{height:34px;width:auto;display:block}
.nav ul{list-style:none;display:flex;gap:22px;order:1}
.nav a.nav-cta{order:2}
.burger{order:3}
.burger{
  display:none;background:none;border:0;cursor:pointer;
  width:44px;height:44px;padding:10px;flex-direction:column;
  justify-content:center;gap:5px;
}
.burger span{display:block;height:3px;width:100%;background:var(--white);border-radius:2px}
.burger:focus-visible{outline:3px solid var(--yellow);outline-offset:3px;border-radius:2px}
.nav.open .burger span:nth-child(1){transform:translateY(8px) rotate(45deg)}
.nav.open .burger span:nth-child(2){opacity:0}
.nav.open .burger span:nth-child(3){transform:translateY(-8px) rotate(-45deg)}
.nav a{
  font-family:var(--display);text-transform:uppercase;font-size:15px;
  letter-spacing:.06em;color:var(--white);border:0;
  display:inline-block;padding:11px 2px;      /* ≥40px tap target */
  border-bottom:2px solid transparent;
}
.nav a.nav-cta{
  margin-left:8px;flex:0 0 auto;
  background:var(--magenta);border-radius:3px;
  padding:11px 16px;border-bottom:0;
}
.nav a.nav-cta:hover,.nav a.nav-cta:focus-visible{background:var(--cyan);color:var(--ink)}
.nav a:hover,.nav a:focus-visible{color:var(--cyan);border-bottom-color:var(--cyan)}
.nav a[aria-current="page"]{color:var(--cyan);border-bottom-color:var(--magenta)}

/* ---------- structure ---------- */
section{padding:76px 0;border-bottom:1px solid var(--rule)}
section:last-of-type{border-bottom:0}
.label{
  font-family:var(--display);font-size:14px;letter-spacing:.18em;
  text-transform:uppercase;margin-bottom:22px;
}
.c-cyan{color:var(--cyan)} .c-mag{color:var(--magenta)} .c-coral{color:var(--coral)}

h1,h2,h3{font-family:var(--display);font-weight:400;text-wrap:balance}
h1{font-size:clamp(38px,8vw,76px);line-height:.98;text-transform:uppercase}
h2{font-size:clamp(30px,6vw,52px);line-height:1.02;text-transform:uppercase}
h3{font-size:22px;text-transform:uppercase}
p{margin-top:16px;max-width:62ch}
p.lead{font-size:19px}

/* page header used on interior pages */
.page-head{
  padding:72px 0 60px;border-bottom:1px solid var(--rule);
  background:
    radial-gradient(760px 340px at 10% -20%, rgba(236,30,121,.18), transparent 62%),
    radial-gradient(680px 340px at 90% 0%, rgba(53,198,214,.14), transparent 64%);
}

/* ---------- home hero ---------- */
.hero{
  padding:80px 0 72px;border-bottom:1px solid var(--rule);
  background:
    radial-gradient(900px 420px at 12% -10%, rgba(236,30,121,.20), transparent 60%),
    radial-gradient(760px 420px at 88% 8%, rgba(53,198,214,.16), transparent 62%);
}
/*
  LOGO. ics-logo.png is the master mark, keyed off black and trimmed from
  ics-logo-canonical.png in the ICS Radio repo. Do NOT swap in
  ((PROJECTS))/ICS/51-cutout.png — that cutout has the counters in the "d", "a"
  and "y" of Sundays filled black. Replace with a vector if one is found.
*/
.hero .logo{max-width:520px;width:88%;height:auto;display:block}
.tag{margin-top:34px;font-size:clamp(17px,2.3vw,20px);max-width:40ch;font-weight:500}
.since{margin-top:8px;color:var(--dim);font-size:15px}

/* ---------- date / venue ---------- */
.date{font-family:var(--display);text-transform:uppercase;
  font-size:clamp(30px,7vw,58px);line-height:1}
.venue{margin-top:20px;font-size:19px;font-weight:600}
.venue span{display:block;color:var(--dim);font-size:16px;font-weight:400;margin-top:4px}
.why{
  margin-top:28px;padding:18px 22px;border-radius:4px;
  background:var(--ink-2);border-left:4px solid var(--magenta);color:var(--dim);
}
.why p{margin-top:0}

/* ---------- lineup chips ---------- */
.bill{margin-top:34px;list-style:none;display:flex;flex-wrap:wrap;gap:10px}
.bill li{
  font-family:var(--display);text-transform:uppercase;font-size:19px;
  padding:9px 16px;border-radius:3px;background:var(--ink-2);
  border:1px solid var(--rule);letter-spacing:.02em;
}
.bill li.open{color:var(--dim)}

/* ---------- lists ---------- */
.stack{margin-top:22px;list-style:none}
.stack li{padding:9px 0 9px 26px;position:relative;max-width:62ch}
.stack li::before{content:"";position:absolute;left:0;top:19px;
  width:11px;height:11px;border-radius:50%;background:var(--cyan)}
.stack.no li::before{background:transparent;border:2px solid var(--magenta)}

/* ---------- cards ---------- */
.grid{margin-top:34px;display:grid;gap:18px;
  grid-template-columns:repeat(auto-fit,minmax(230px,1fr))}
.card{padding:22px;border-radius:5px;background:var(--ink-2);border-top:4px solid var(--cyan)}
.card:nth-child(2){border-top-color:var(--magenta)}
.card:nth-child(3){border-top-color:var(--coral)}
.card:nth-child(4){border-top-color:var(--yellow)}
.card p{margin-top:9px;font-size:16px;color:var(--dim)}
.card h3 a{border:0}

/* ---------- archive listing ---------- */
.years{display:flex;flex-wrap:wrap;gap:10px;margin-top:26px;list-style:none}
.years a{
  font-family:var(--display);font-size:16px;text-transform:uppercase;
  padding:7px 14px;border-radius:3px;background:var(--ink-2);
  border:1px solid var(--rule);color:var(--white);
}
.years a:hover{background:var(--magenta);border-color:var(--magenta)}
.entries{list-style:none;margin-top:8px}
.entries li{
  display:grid;grid-template-columns:104px 1fr;gap:18px;
  padding:16px 0;border-bottom:1px solid var(--rule);align-items:baseline;
}
.entries time{
  color:var(--dim);font-size:14px;font-variant-numeric:tabular-nums;
  letter-spacing:.04em;
}
.entries .t{font-size:17px;font-weight:500}
.entries .x{display:block;color:var(--dim);font-size:15px;margin-top:4px;max-width:64ch}

/* ---------- event photography ---------- */
/*
  PHOTO CREDIT IS UNRESOLVED. The photographer for the _DSC frames is not
  recorded anywhere in the workspace. Add a credit line before this goes live,
  or confirm the shots are Henry's own.
*/
.shot-head{
  position:relative;overflow:hidden;border-bottom:1px solid var(--rule);
  padding:96px 0 76px;
}
.shot-head::before{
  content:"";position:absolute;inset:0;
  background:var(--head-shot) center/cover no-repeat;
  opacity:.34;
}
.shot-head::after{
  content:"";position:absolute;inset:0;
  background:linear-gradient(180deg,rgba(23,17,26,.62),rgba(23,17,26,.94));
}
.shot-head .wrap{position:relative;z-index:1}

.room-grid{
  list-style:none;margin-top:30px;display:grid;gap:14px;
  grid-template-columns:repeat(auto-fit,minmax(230px,1fr));
}
.room-grid li{margin:0}
.room-grid figure{margin:0;position:relative;border-radius:5px;overflow:hidden;background:var(--ink-2)}
.room-grid img{width:100%;height:100%;object-fit:cover;display:block;aspect-ratio:4/5}
.room-grid .wide img{aspect-ratio:3/2}
.room-grid figcaption{
  position:absolute;left:0;right:0;bottom:0;padding:26px 14px 11px;
  font-family:var(--display);text-transform:uppercase;font-size:14px;
  letter-spacing:.08em;color:var(--white);
  background:linear-gradient(180deg,transparent,rgba(23,17,26,.88));
}

/* ---------- archive grid ---------- */
.arc-grid{
  list-style:none;margin-top:30px;display:grid;gap:26px 22px;
  grid-template-columns:repeat(auto-fill,minmax(250px,1fr));
}
.arc .shot{
  aspect-ratio:1/1;border-radius:5px;overflow:hidden;
  background:var(--ink-2);border:1px solid var(--rule);
}
.arc .shot img{width:100%;height:100%;object-fit:cover;display:block}
.arc .noimg{
  display:block;width:100%;height:100%;
  background:linear-gradient(135deg,var(--ink-2),var(--ink-3));
}
.arc time{
  display:block;margin-top:12px;color:var(--dim);font-size:13px;
  letter-spacing:.06em;font-variant-numeric:tabular-nums;
}
.arc h3{
  font-size:17px;line-height:1.18;margin-top:6px;text-transform:uppercase;
  text-wrap:balance;
}
.arc p{margin-top:7px;font-size:14px;color:var(--dim);line-height:1.5;max-width:none}

/* ---------- app screenshot ---------- */
.app-shot{margin:32px 0 0;max-width:390px}
.app-shot img{
  width:100%;height:auto;display:block;border-radius:14px;
  border:1px solid var(--rule);
}
.app-shot figcaption{margin-top:10px;color:var(--dim);font-size:14px}

/* ---------- spotify embed ---------- */
.spotify{margin-top:28px;border:0;border-radius:12px;display:block;background:var(--ink-2)}

/* ---------- links + buttons ---------- */
a{color:var(--cyan);text-decoration:none;border-bottom:2px solid rgba(53,198,214,.4)}
a:hover{color:var(--white);border-bottom-color:var(--white)}
a:focus-visible{outline:3px solid var(--yellow);outline-offset:3px;border-radius:2px}
.btn{
  display:inline-block;margin-top:30px;padding:16px 30px;border:0;border-radius:3px;
  background:var(--magenta);color:var(--white);
  font-family:var(--display);text-transform:uppercase;font-size:17px;letter-spacing:.06em;
}
.btn:hover{background:var(--cyan);color:var(--ink);border-bottom-color:transparent}
.btn.ghost{background:transparent;border:2px solid var(--rule);color:var(--white)}
.btn.ghost:hover{border-color:var(--cyan);color:var(--cyan);background:transparent}

/* ---------- footer ---------- */
footer{padding:64px 0 92px;color:var(--dim);font-size:15px;border-top:1px solid var(--rule)}
footer a{color:var(--white);border-bottom-color:rgba(236,30,121,.5)}
.social{margin-bottom:24px;display:flex;flex-wrap:wrap;gap:20px}
.entity{margin-top:26px;font-size:13px;line-height:1.7}

@media (max-width:820px){
  .nav .wrap{height:56px;gap:10px;flex-wrap:nowrap}
  .burger{display:flex}
  .nav a.nav-cta{margin-left:0;padding:9px 12px;font-size:14px}
  .nav ul{
    display:none;position:absolute;left:0;right:0;top:100%;
    flex-direction:column;gap:0;
    background:var(--ink-2);border-bottom:1px solid var(--rule);
  }
  .nav.open ul{display:flex}
  .nav ul a{display:block;padding:15px 24px;border-bottom:1px solid var(--rule);font-size:17px}
}
@media (max-width:640px){
  section,.page-head{padding:56px 0}
  .hero{padding:56px 0}
  .entries li{grid-template-columns:1fr;gap:4px}
}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *{animation:none!important;transition:none!important}
}