/* SADDLE & CHROME (Saturday · Noche de Rodeo) — the palette of the night's logo
   (logos/noche-de-rodeo.webp) on near-black saddle leather: tan saddle stitching,
   chrome studs and conchos, carved logo lettering and the logo's paw in oxblood. */
@import url('https://fonts.googleapis.com/css2?family=Rye&family=Oswald:wght@400;500;600&display=swap');

@keyframes saddleRise{0%{transform:translate(0,0);opacity:0}8%{opacity:1}70%{opacity:.6}100%{transform:translate(4vw,-105vh);opacity:0}}
@keyframes saddleSwing{0%,100%{transform:rotate(-1.3deg)}50%{transform:rotate(1deg)}}

body.theme-saddle{
  /* sampled from the logo */
  --carve:#e19046; --carve-hi:#f4b46a; --tan:#be854c; --outline:#2a1406; --ink:#140a05;
  --paw:#7a2210; --ember:#f08a3c; --cream:#f6dcb0;
  /* leather + chrome */
  --leather:url(img/leather.svg) 0 0/220px,linear-gradient(180deg,#2a180d,#1b100a);
  --leather-tan:url(img/leather.svg) 0 0/220px,linear-gradient(180deg,#8a5528,#65391a);
  --leather-ox:url(img/leather.svg) 0 0/220px,linear-gradient(180deg,#5e1a09,#3c0f05);
  --stud:radial-gradient(circle at 38% 34%,#fffaf2 0 1px,#d8cdc1 2px,#7d6f62 4.4px,#1c130d 5.4px,transparent 6px);
  --stitch:1.5px dashed rgba(225,144,70,.75);
  --accent:var(--carve); --accent-fg:var(--ink); --panel:#1b100a; --glow:rgba(240,138,60,.4); --gold:var(--carve-hi);
  --fg-sub:rgba(246,220,176,.7); --fg-dim:rgba(246,220,176,.45); --border:rgba(225,144,70,.14);
  background-color:#0f0805;
  background-image:radial-gradient(50% 45% at 20% 40%,rgba(225,144,70,.09),transparent 70%),
    radial-gradient(120% 90% at 50% 50%,transparent 50%,rgba(0,0,0,.78) 100%),url(img/leather.svg);
  background-size:auto,auto,260px;

  /* backdrop: studded belts top and bottom, a low warm glow, a few embers */
  .deco .d1,.deco .d3{left:0;right:0;height:12px;background:var(--stud) 0 0/24px 12px repeat-x;opacity:.9}
  .deco .d1{top:0}
  .deco .d3{bottom:0}
  .deco .d2{left:-10%;right:-10%;bottom:-25vh;height:60vh;background:radial-gradient(50% 50% at 50% 70%,rgba(225,110,40,.2),transparent 75%)}
  .deco .d4,.deco .d5{left:0;bottom:-2vh;width:3px;height:3px;border-radius:50%;background:var(--ember);animation:saddleRise 14s linear infinite;opacity:.7}
  .deco .d4{box-shadow:8vw -4vh 2px #f08a3c,23vw -16vh 1px #ffb15a,37vw -8vh 2px #f08a3c,52vw -22vh 1px #ff9a44,
    66vw -6vh 2px #ffb15a,79vw -18vh 1px #f08a3c,93vw -10vh 2px #ff9a44}
  .deco .d5{animation-duration:19s;animation-delay:-9s;width:2px;height:2px;
    box-shadow:14vw -12vh 1px #ffcf8a,30vw -26vh 1px #ffb15a,45vw -3vh 1px #ffcf8a,60vw -20vh 1px #ffb15a,74vw -28vh 1px #ffcf8a,88vw -6vh 1px #ffb15a}

  /* chrome */
  .brand{background:none;color:var(--cream);animation:none;font-family:'Rye',serif;font-weight:400;letter-spacing:.06em}
  .brand b{color:var(--carve);font-weight:400}
  .pill{font:500 11px/1 'Oswald',sans-serif;letter-spacing:.14em;color:var(--cream);background:var(--leather);border:1px solid #0a0503;
    outline:var(--stitch);outline-offset:-5px;box-shadow:inset 0 1px 0 rgba(255,220,170,.08),0 3px 8px rgba(0,0,0,.5);
    backdrop-filter:none;-webkit-backdrop-filter:none}
  .pill:hover{color:#fff;background:var(--leather);filter:brightness(1.15)}
  .pill.sound-on{color:#1a0e06;background:var(--leather-tan);outline-color:rgba(42,20,6,.6);box-shadow:0 0 16px rgba(225,144,70,.45)}
  .tab{font:400 13px/1 'Rye',serif;letter-spacing:.08em;color:rgba(246,220,176,.5);background:var(--leather);border:1px solid #0a0503;
    border-radius:12px;outline:1px dashed rgba(225,144,70,.3);outline-offset:-6px;padding-left:26px;padding-right:26px}
  .tab .tab-date{font-family:'Oswald',sans-serif;font-weight:500}
  .tab.active{color:var(--cream);border-color:#0a0503;outline:var(--stitch);outline-offset:-6px;
    background:var(--stud) 8px 50%/12px 12px no-repeat,var(--stud) calc(100% - 8px) 50%/12px 12px no-repeat,var(--leather-ox);
    box-shadow:0 0 26px rgba(163,52,26,.45),inset 0 1px 0 rgba(255,200,160,.12)}
  .tab.active .tab-date{color:var(--carve-hi)}

  /* hero (the logo replaces the text title, see base.css) */
  .night-hero{align-items:center}
  .nh-kicker{font:500 12px/1 'Oswald',sans-serif;letter-spacing:.34em;text-transform:uppercase;color:var(--carve)}
  .nh-slot{font:500 12px/1 'Oswald',sans-serif;letter-spacing:.1em;text-transform:uppercase;color:var(--cream);padding:10px 16px;border-radius:10px;
    background:var(--leather);outline:var(--stitch);outline-offset:-5px;box-shadow:0 6px 14px rgba(0,0,0,.5),inset 0 1px 0 rgba(255,220,170,.06)}
  .nh-slot b{font:400 13px/1 'Rye',serif;color:var(--carve)}
  .nh-slot em{color:rgba(190,133,76,.75);font-size:10px}

  .night-logo{display:block;width:clamp(260px,30vw,430px);height:auto;margin:-6px 0 2px -12px;transform-origin:50% 6%;
    animation:saddleSwing 7s ease-in-out infinite;filter:drop-shadow(0 16px 22px rgba(0,0,0,.8)) drop-shadow(0 0 36px rgba(225,144,70,.16))}
  .info{gap:12px}

  /* DJ info: carved logo lettering on leather */
  .eyebrow{font:500 12px/1 'Oswald',sans-serif;letter-spacing:.3em;color:var(--carve)}
  .dj-name{font-family:'Rye',serif;color:var(--carve);letter-spacing:.01em;line-height:1;
    -webkit-text-stroke:6px var(--outline);paint-order:stroke fill;text-shadow:0 5px 0 #000,0 0 30px rgba(225,144,70,.22)}
  .info .dj-name{font-size:clamp(2.4rem,4.6vw,4.2rem)}
  .slash{height:0;width:150px;border-radius:0;background:none;box-shadow:none;border-top:3px dashed var(--carve)}
  .dj-time{font:500 21px/1 'Oswald',sans-serif;letter-spacing:.08em;color:var(--cream)}
  .genre{font-family:'Oswald',sans-serif;background:var(--leather-ox);color:var(--cream);outline:1px dashed rgba(246,220,176,.5);outline-offset:-3px;box-shadow:none}

  /* portrait: stitched saddle-leather panel with chrome conchos */
  .portrait{border-radius:28px;background:var(--leather);border:1px solid #0a0503;outline:2px dashed rgba(225,144,70,.8);outline-offset:-14px;
    box-shadow:0 20px 50px rgba(0,0,0,.7),inset 0 0 70px rgba(0,0,0,.65),inset 0 1px 0 rgba(255,220,170,.06)}
  .portrait::before{display:block;clip-path:none;animation:none;filter:none;transform:none;inset:22px;z-index:4;
    background:var(--stud) 0 0/16px 16px no-repeat,var(--stud) 100% 0/16px 16px no-repeat,var(--stud) 0 100%/16px 16px no-repeat,var(--stud) 100% 100%/16px 16px no-repeat}
  .portrait::after{display:none}
  .p-img{left:26px;top:26px;width:calc(100% - 52px);height:calc(100% - 52px);border-radius:16px;mix-blend-mode:normal;filter:sepia(.25) contrast(1.1) brightness(.95)}
  .p-duotone{display:none}
  .p-grad{background:radial-gradient(90% 80% at 50% 45%,transparent 50%,rgba(0,0,0,.45) 100%)}
  .p-fallback{background:none;gap:12px}
  .p-fallback::before{content:'';position:absolute;left:50%;top:50%;width:min(64%,330px);aspect-ratio:1;
    transform:translate(-28%,-60%) rotate(14deg);background:url(img/paw.svg) center/contain no-repeat;opacity:.95;
    filter:brightness(1.18) drop-shadow(0 1px 0 rgba(255,200,160,.12)) drop-shadow(0 -1px 0 rgba(0,0,0,.6))}
  .p-fallback b{position:relative;font:400 clamp(64px,8vw,120px)/1 'Rye',serif;letter-spacing:.02em;color:var(--carve);
    -webkit-text-stroke:9px var(--outline);paint-order:stroke fill;text-shadow:0 7px 0 #000}
  .p-fallback span{position:relative;font:500 10px/1 'Oswald',sans-serif;letter-spacing:.32em;color:var(--carve);background:rgba(0,0,0,.6);
    padding:7px 11px;border-radius:5px;outline:1px dashed rgba(225,144,70,.5);outline-offset:-3px}

  /* roster: stitched leather patches; the pick turns oxblood with a chrome rim and a tan paw */
  .card{border-radius:16px;background:var(--leather);border:1px solid #0a0503;outline:1px dashed rgba(225,144,70,.35);outline-offset:-6px;
    box-shadow:0 6px 14px rgba(0,0,0,.5)}
  .card .fb{background:none;font-family:'Rye',serif;color:rgba(225,144,70,.55);-webkit-text-stroke:3px var(--ink);paint-order:stroke fill}
  .card .cn{font-family:'Oswald',sans-serif;background:linear-gradient(transparent,rgba(0,0,0,.85));color:var(--fg-dim)}
  .card.sel{border-color:#0a0503;outline:1.5px dashed var(--carve-hi);background:var(--leather-ox);transform:translateY(-5px);
    box-shadow:0 0 0 2px #8a7d70,0 0 0 3px #1c130d,0 0 24px rgba(163,52,26,.6)}
  .card.sel::after{content:'';position:absolute;right:5px;top:5px;width:18px;height:18px;background:var(--carve);transform:rotate(18deg);
    -webkit-mask:url(img/paw.svg) center/contain no-repeat;mask:url(img/paw.svg) center/contain no-repeat}
  .card.sel .fb{color:var(--carve)}
  .card.sel .cn{color:var(--cream)}
  .footer{border-top:1px dashed rgba(225,144,70,.3)}
  .credit,.hint{font-family:'Oswald',sans-serif;color:rgba(246,220,176,.4)}
}
@media (max-width:760px){
  body.theme-saddle{
    .tab{padding-left:8px;padding-right:8px;font-size:12px;letter-spacing:.03em}
    .tab.active{background:var(--leather-ox)}
    .night-hero{padding-bottom:4px}
    .info{padding:0 0 8px;gap:0}
    .night-logo{width:min(62vw,290px);align-self:center;margin:0 auto}
    .portrait{border-radius:22px;outline-offset:-10px}
    .portrait::before{inset:16px}
    .p-img{left:18px;top:18px;width:calc(100% - 36px);height:calc(100% - 36px)}
    .p-grad{background:linear-gradient(180deg,transparent 42%,rgba(10,5,3,.9) 100%)}
    .p-fallback{justify-content:flex-start;padding-top:20%}
    .p-fallback::before{width:58%;top:34%}
    .p-fallback b{font-size:76px;-webkit-text-stroke:7px var(--outline)}
    .p-overlay{padding:20px 32px 34px}
    .portrait .dj-name{-webkit-text-stroke:5px var(--outline);text-shadow:0 4px 0 #000}
    .deco .d5{display:none}
  }
}
@media (prefers-reduced-motion: reduce){
  body.theme-saddle .night-logo,body.theme-saddle .deco i{animation:none}
}