/* DESERT SUNSET (Thursday) — dusk over the mesas. The page is the sky going from
   violet to gold, the stage is an arched window, the roster sits on the silhouettes. */
@import url('https://fonts.googleapis.com/css2?family=Smokum&family=Alfa+Slab+One&family=Work+Sans:wght@500;600;700&display=swap');

@keyframes sunsetSunrise{from{transform:translate(-50%,10%)}to{transform:translate(-50%,0)}}

body.theme-sunset{
  --plum:#160a1f; --violet:#3b1b5a; --magenta:#a8326e; --orange:#f0743a; --sun:#ffc55c; --cream:#fff1dc;
  --accent:var(--orange); --accent-fg:var(--plum); --panel:#2a1238; --glow:rgba(240,116,58,.5); --gold:var(--sun);
  --fg-sub:rgba(255,241,220,.78); --fg-dim:rgba(255,241,220,.52); --border:rgba(255,241,220,.14);
  background:linear-gradient(180deg,#140a2a 0%,var(--violet) 28%,#7a2766 50%,var(--magenta) 60%,var(--orange) 74%,var(--sun) 86%);
  background-attachment:fixed;

  .deco .d1{inset:0 0 50% 0;opacity:.7;background-image:
    radial-gradient(1.2px 1.2px at 12% 14%,#fff 60%,transparent 62%),radial-gradient(1px 1px at 30% 6%,#fff 60%,transparent 62%),
    radial-gradient(1.2px 1.2px at 58% 12%,#fff 60%,transparent 62%),radial-gradient(1px 1px at 74% 4%,#fff 60%,transparent 62%),
    radial-gradient(1.2px 1.2px at 88% 18%,#fff 60%,transparent 62%),radial-gradient(1px 1px at 42% 24%,#fff 60%,transparent 62%)}
  .deco .d2{left:47%;bottom:10vh;width:52vh;aspect-ratio:1;border-radius:50%;transform:translateX(-50%);
    background:linear-gradient(180deg,#fff0b0 0%,var(--sun) 40%,var(--orange) 100%);box-shadow:0 0 120px rgba(255,197,92,.55);
    -webkit-mask:linear-gradient(180deg,#000 52%,transparent 52% 56%,#000 56% 64%,transparent 64% 69%,#000 69% 76%,transparent 76% 82%,#000 82%);
    mask:linear-gradient(180deg,#000 52%,transparent 52% 56%,#000 56% 64%,transparent 64% 69%,#000 69% 76%,transparent 76% 82%,#000 82%);
    animation:sunsetSunrise 2.4s cubic-bezier(.16,1,.3,1) both}
  .deco .d3{left:0;right:0;bottom:0;height:30vh;background-image:url(img/mesa-far.svg);background-size:100% 100%}
  .deco .d4{left:0;right:0;bottom:0;height:22vh;background-image:url(img/mesa-near.svg);background-size:100% 100%}
  .deco .d5{left:6%;bottom:13vh;width:90px;height:110px;background-image:url(img/cactus.svg)}
  .deco .d6{right:2%;bottom:6vh;width:44px;height:54px;background-image:url(img/cactus.svg);transform:scaleX(-1)}

  /* chrome */
  .brand{background:none;color:var(--cream);animation:none}
  .brand b{color:var(--sun)}
  .pill{font-family:'Work Sans',sans-serif;background:rgba(22,10,31,.42);color:var(--cream);box-shadow:inset 0 0 0 1px rgba(255,241,220,.2)}
  .pill.sound-on{background:var(--sun);color:var(--plum);box-shadow:0 0 18px rgba(255,197,92,.6)}
  .tab{font-family:'Work Sans',sans-serif;font-weight:700;background:rgba(22,10,31,.35);border-color:rgba(255,241,220,.12);color:var(--fg-dim)}
  .tab.active{background:linear-gradient(90deg,var(--orange),var(--magenta));border-color:transparent;color:var(--cream);
    box-shadow:0 8px 24px rgba(168,50,110,.45)}
  .tab.active .tab-date{color:rgba(255,241,220,.85)}

  /* hero */
  .nh-kicker{font:600 12px/1 'Work Sans',sans-serif;letter-spacing:.3em;text-transform:uppercase;color:var(--sun)}
  .nh-t1{font:400 30px/1 'Smokum',serif;color:var(--cream);letter-spacing:.04em}
  .nh-t2{font:400 70px/1 'Smokum',serif;color:var(--cream);letter-spacing:.03em;text-shadow:3px 3px 0 var(--magenta),6px 6px 0 rgba(22,10,31,.5)}
  .nh-slot{font:600 12px/1 'Work Sans',sans-serif;letter-spacing:.06em;text-transform:uppercase;color:var(--cream);padding:9px 14px;border-radius:999px;
    background:rgba(22,10,31,.45);box-shadow:inset 0 0 0 1px rgba(255,197,92,.45);backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px)}
  .nh-slot b{font-family:'Alfa Slab One',serif;font-weight:400;color:var(--sun)}
  .nh-slot em{color:var(--fg-dim);font-size:10px}

  /* portrait: an arched window onto the desert */
  .portrait{border-radius:999px 999px 28px 28px;background:linear-gradient(180deg,#2a1238 0%,#5a1f55 55%,#c4505a 100%);
    outline:2px solid rgba(255,241,220,.55);outline-offset:-12px;box-shadow:0 24px 50px rgba(22,10,31,.55)}
  .portrait::before,.portrait::after{display:none}
  .p-img{mix-blend-mode:normal;filter:contrast(1.05) saturate(1.05)}
  .p-duotone{opacity:.16}
  .p-grad{background:linear-gradient(180deg,transparent 55%,rgba(22,10,31,.75) 100%)}
  .p-fallback{background:url(img/mesa-near.svg) center bottom/100% 18% no-repeat,radial-gradient(70% 45% at 50% 100%,rgba(255,197,92,.55),transparent 70%);justify-content:center;padding-bottom:6%;gap:10px}
  .p-fallback::before{content:'';width:46%;max-width:220px;aspect-ratio:120/64;background:url(img/hat-plum.svg) center/contain no-repeat;order:-1;
    filter:drop-shadow(0 6px 10px rgba(22,10,31,.4))}
  .p-fallback b{font:400 clamp(44px,5vw,80px)/1 'Alfa Slab One',serif;color:var(--cream);text-shadow:3px 3px 0 var(--magenta);letter-spacing:.02em}
  .p-fallback span{font-family:'Work Sans',sans-serif;font-weight:600;color:rgba(255,241,220,.75)}

  /* DJ info */
  .eyebrow{font-family:'Work Sans',sans-serif;color:var(--sun)}
  .dj-name{font-family:'Alfa Slab One',serif;color:var(--cream);letter-spacing:.005em;line-height:.95;
    text-shadow:0 3px 0 var(--magenta),0 10px 30px rgba(22,10,31,.45)}
  .info .dj-name{font-size:clamp(2.6rem,5.6vw,5rem)}
  .slash{height:6px;background:linear-gradient(90deg,var(--sun),var(--orange),var(--magenta));box-shadow:none}
  .dj-time{font:400 20px/1 'Alfa Slab One',serif;color:var(--sun);text-shadow:0 2px 0 rgba(22,10,31,.4)}
  .genre{font-family:'Work Sans',sans-serif;background:var(--cream);color:var(--plum)}

  /* roster: little arches on the mesa */
  .card{border-radius:999px 999px 14px 14px;background:rgba(22,10,31,.7);border-color:rgba(255,241,220,.16)}
  .card .fb{background:none;color:rgba(255,241,220,.45);font-family:'Alfa Slab One',serif}
  .card .cn{font-family:'Work Sans',sans-serif;background:linear-gradient(transparent,rgba(22,10,31,.9))}
  .card.sel{border-color:var(--sun);box-shadow:0 0 22px rgba(255,197,92,.55)}
  .card.sel .fb,.card.sel .cn{color:var(--sun)}
  .footer{border-top-color:rgba(255,241,220,.12)}
  .credit,.hint{color:rgba(255,241,220,.45)}
}
@media (max-width:760px){
  body.theme-sunset{
    .nh-t1{font-size:20px}
    .nh-t2{font-size:46px}
    .portrait{border-radius:999px 999px 22px 22px}
    .deco .d2{width:80vw;bottom:12vh}
    .deco .d5{width:60px;height:74px}
    .deco .d6{display:none}
  }
}