/* ==========================================================================
   COMANDANTE - static site stylesheet
   black / red / mono. built to be edited by hand.
   ========================================================================== */

/* --- fonts ---------------------------------------------------------------
   Flecha Test is used ONLY for the wordmark + section headings.
   NOTE: the trial files only contain A-Z a-z 0-9 comma period space.
   Do not set text with accents or punctuation in Flecha - it will fall back.
   ------------------------------------------------------------------------ */
@font-face{
  font-family:"Flecha";
  src:url("../fonts/FlechaTestSBlackItalic.woff") format("woff"),
      url("../fonts/FlechaTestSBlackItalic.otf") format("opentype");
  font-weight:900; font-style:italic; font-display:swap;
}
@font-face{
  font-family:"Flecha";
  src:url("../fonts/FlechaTestMBoldItalic.woff") format("woff"),
      url("../fonts/FlechaTestMBoldItalic.otf") format("opentype");
  font-weight:700; font-style:italic; font-display:swap;
}
@font-face{
  font-family:"Flecha";
  src:url("../fonts/FlechaTestSMediumItalic.woff") format("woff"),
      url("../fonts/FlechaTestSMediumItalic.otf") format("opentype");
  font-weight:500; font-style:italic; font-display:swap;
}
@font-face{
  font-family:"Flecha";
  src:url("../fonts/FlechaTestSLightItalic.woff") format("woff"),
      url("../fonts/FlechaTestSLightItalic.otf") format("opentype");
  font-weight:300; font-style:italic; font-display:swap;
}

:root{
  --red:#ff0000;
  --black:#000000;
  --white:#ffffff;
  --graphite-dk:#1c1e21;
  --graphite:#8d93a3;      /* lightened from brand 767D8F for text contrast on black */
  --graphite-brand:#767d8f;
  --beige:#d3cabe;
  --grey:#eef0fe;

  --mono:Arial;
  --display:"Flecha",Georgia,serif;

  --gutter:clamp(18px,4vw,48px);
  --maxw:1220px;
  --hair:1px solid var(--red);
}

*,*::before,*::after{box-sizing:border-box}

html{-webkit-text-size-adjust:100%}
body{
  margin:0;
  background:var(--black);
  color:var(--red);
  font-family:var(--mono);
  font-size:13px;
  line-height:1.5;
  letter-spacing:.03em;
  text-transform:uppercase;
  padding:0 var(--gutter) 0;
  overflow-x:hidden;
}
@media(min-width:900px){body{font-size:13.5px}}

img{display:block;max-width:100%;height:auto}
a{color:var(--red);text-decoration:none}
a:hover,a:focus-visible{background:var(--red);color:var(--black);outline:none}

::selection{background:var(--red);color:var(--black)}

.wrap{max-width:var(--maxw);margin:0 auto}
.lower{text-transform:none}

/* --- skip link ---------------------------------------------------------- */
.skip{position:absolute;left:-9999px;top:0;padding:8px 12px;border:var(--hair);background:var(--black)}
.skip:focus{left:var(--gutter);top:8px;z-index:200}

/* ==========================================================================
   HEADER
   ========================================================================== */
.masthead{padding:clamp(10px,1.5vw,16px) 0 0}

.mark{display:inline-block;line-height:0;border:0}
.mark:hover,.mark:focus-visible{background:none}
.mark img{width:clamp(72px,9vw,120px);transition:opacity .12s linear}
.mark .mark__red{display:none}
.mark:hover .mark__white,.mark:focus-visible .mark__white{display:none}
.mark:hover .mark__red,.mark:focus-visible .mark__red{display:block}

.wordmark{
  font-family:var(--display);
  font-weight:300;font-style:italic;
  color:var(--red);
  font-size:clamp(20px,3.5vw,40px);
  line-height:.86;
  letter-spacing:-.005em;
  margin:clamp(6px,1vw,10px) 0 0;
  text-transform:uppercase;
}
.wordmark a{display:block}
.wordmark a:hover,.wordmark a:focus-visible{background:none;color:var(--red)}

/* nav ------------------------------------------------------------------- */
.nav{margin:clamp(8px,1.2vw,14px) 0 0;padding:0;list-style:none;display:flex;flex-wrap:wrap;gap:10px}
.nav a{
  display:block;
  border:var(--hair);
  padding:7px 16px 6px;
  letter-spacing:.14em;
  font-size:13px;
}
.nav [aria-current="page"]{background:var(--red);color:var(--black)}
.nav li:first-child a{font-weight:700}
.nav li:nth-child(4) a{font-style:italic}

.rule{height:0;border:0;border-top:var(--hair);margin:clamp(26px,4vw,44px) 0 0}
.rule--dot{border-top:1px dotted var(--red)}

/* ticker ---------------------------------------------------------------- */
.ticker{
  border-top:var(--hair);border-bottom:var(--hair);
  margin-top:clamp(26px,4vw,44px);
  overflow:hidden;white-space:nowrap;padding:6px 0;
  font-size:12px;letter-spacing:.16em;color:var(--graphite)
}
.ticker__track{display:inline-block;white-space:nowrap;animation:slide 40s linear infinite}
.ticker__track span{display:inline-block}
@keyframes slide{from{transform:translateX(0)}to{transform:translateX(-50%)}}
@media(prefers-reduced-motion:reduce){
  .ticker__track{animation:none}
}

/* ==========================================================================
   TYPE
   ========================================================================== */
.h-section{
  font-family:var(--display);font-weight:700;font-style:italic;
  color:var(--white);
  font-size:clamp(30px,5.6vw,58px);line-height:.95;
  margin:clamp(34px,5vw,60px) 0 clamp(16px,2.4vw,26px);
  text-transform:uppercase;letter-spacing:0;
}
.h-sub{font-size:12px;letter-spacing:.2em;color:var(--graphite);margin:0 0 18px}
p{margin:0 0 1em}
.body-copy{max-width:56ch;text-transform:none;letter-spacing:.01em;line-height:1.62}
.body-copy--wide{max-width:70ch}
.meta{font-size:12px;letter-spacing:.12em;color:var(--graphite)}
.tag{border:var(--hair);padding:3px 8px 2px;font-size:11px;letter-spacing:.14em;display:inline-block}

/* ==========================================================================
   HOME
   ========================================================================== */
.next{
  display:flex;flex-direction:column;align-items:center;text-align:center;
  gap:clamp(14px,2.4vw,24px);
  margin-top:clamp(30px,4.5vw,54px);
}
.next__poster{border:var(--hair);padding:0;background:var(--black);max-width:420px;width:100%}
.next__poster img{width:100%;display:block}
.next__eyebrow{font-size:12px;letter-spacing:.24em;color:var(--graphite);margin:0}
.next__venue{font-size:13px;letter-spacing:.2em;color:var(--graphite);margin:0}
.next__date{
  font-family:var(--display);font-weight:900;font-style:italic;
  color:var(--white);
  font-size:clamp(40px,8vw,86px);line-height:.9;margin:0
}
.next__line{font-size:14px;letter-spacing:.05em;line-height:1.55;margin:0}
.next__line b{font-weight:400;border-bottom:var(--hair)}
.next .body-copy{text-align:center}
.next .btnrow{justify-content:center}
.dl{margin:0 0 26px;font-size:12.5px}
.dl div{display:flex;gap:14px;border-bottom:1px dotted var(--red);padding:7px 0}
.dl dt{width:11ch;flex:none;color:var(--graphite);letter-spacing:.12em}
.dl dd{margin:0}
.btnrow{display:flex;flex-wrap:wrap;gap:10px;margin-top:6px}
.btn{border:var(--hair);padding:9px 18px 8px;letter-spacing:.14em;display:inline-block}

/* ==========================================================================
   GRID OF CARDS (festa / discos)
   ========================================================================== */
.grid{
  list-style:none;margin:0;padding:0;
  display:grid;gap:clamp(16px,2.4vw,30px);
  grid-template-columns:repeat(auto-fill,minmax(210px,1fr));
}
.grid--wide{grid-template-columns:repeat(auto-fill,minmax(240px,1fr))}
.card{margin:0}
.card__btn{
  display:flex;flex-direction:column;height:100%;width:100%;text-align:left;
  background:none;border:var(--hair);color:var(--red);
  font:inherit;letter-spacing:inherit;text-transform:inherit;
  padding:0;cursor:pointer;
}
.card__btn:hover,.card__btn:focus-visible{outline:none;background:var(--red)}
.card__btn:hover .card__cap,.card__btn:focus-visible .card__cap{color:var(--black)}
.card__btn:hover img,.card__btn:focus-visible img{opacity:.82;mix-blend-mode:multiply}
.card__img{display:block;position:relative;background:var(--graphite-dk)}
.card__img img{width:100%;aspect-ratio:3/4;object-fit:cover}
.grid--discos .card__img img{aspect-ratio:1/1}
.card__cap{display:block;margin-top:auto;padding:9px 11px 11px;font-size:11.5px;letter-spacing:.1em;line-height:1.45}
.card__cap b{display:block;font-weight:400}
.card__cap em{display:block;color:var(--graphite);font-style:normal;margin-top:3px}
.card__btn:hover .card__cap em,.card__btn:focus-visible .card__cap em{color:var(--black)}
.card__plus{
  position:absolute;right:0;bottom:0;display:block;
  border-left:var(--hair);border-top:var(--hair);
  background:var(--black);color:var(--red);
  padding:3px 8px 2px;font-size:12px;letter-spacing:0
}

/* detail payload lives in the HTML, hidden until opened -------------------- */
.card__detail{display:none}

/* ==========================================================================
   MODAL (expanding poster / release)
   ========================================================================== */
.modal[hidden]{display:none}
.modal{
  position:fixed;inset:0;z-index:100;
  background:rgba(0,0,0,.94);
  padding:var(--gutter);
  overflow-y:auto;
}
.modal__inner{
  max-width:1060px;margin:0 auto;
  border:var(--hair);background:var(--black);
  padding:clamp(16px,2.6vw,30px);
  position:relative;
}
.modal__close{
  position:absolute;top:0;right:0;
  background:none;border:0;border-left:var(--hair);border-bottom:var(--hair);
  color:var(--red);font:inherit;font-size:15px;line-height:1;
  padding:10px 13px;cursor:pointer
}
.modal__close:hover,.modal__close:focus-visible{background:var(--red);color:var(--black);outline:none}
.modal__body{display:grid;gap:clamp(18px,3vw,36px);grid-template-columns:1fr}
@media(min-width:800px){.modal__body{grid-template-columns:minmax(0,45%) minmax(0,1fr)}}
.modal__art{border:var(--hair)}
.modal__art img{width:100%}
.modal__text{text-transform:none;letter-spacing:.01em}
.modal__text h2{
  font-family:var(--display);font-weight:700;font-style:italic;
  color:var(--white);
  text-transform:uppercase;letter-spacing:0;
  font-size:clamp(24px,3.4vw,40px);line-height:1;margin:0 0 4px
}
.modal__text .meta{text-transform:uppercase;margin:0 0 18px}
.modal__text p{line-height:1.62;max-width:58ch}
.modal__text h3{font-size:11.5px;letter-spacing:.2em;color:var(--graphite);text-transform:uppercase;margin:24px 0 8px;font-weight:400}
.modal__text ol,.modal__text ul{margin:0;padding:0;list-style:none;font-size:12.5px}
.modal__text ol li,.modal__text ul li{border-bottom:1px dotted var(--red);padding:6px 0;display:flex;gap:12px}
.modal__text ol{counter-reset:t}
.modal__text ol li::before{counter-increment:t;content:"A" counter(t);color:var(--graphite);flex:none;width:4ch}
.modal__nav{display:flex;gap:10px;margin-top:26px;text-transform:uppercase}
.modal__nav button{background:none;border:var(--hair);color:var(--red);font:inherit;letter-spacing:.14em;padding:8px 15px;cursor:pointer}
.modal__nav button:hover,.modal__nav button:focus-visible{background:var(--red);color:var(--black);outline:none}
.modal__nav button[disabled]{opacity:.3;cursor:default}
.modal__nav button[disabled]:hover{background:none;color:var(--red)}
body.is-locked{overflow:hidden}

/* Festa detail: the archive follows the homepage's centered event rhythm. */
.modal--event .modal__inner{max-width:760px;border:0;padding:clamp(16px,2.6vw,30px) 0}
.modal--event .modal__body{display:block}
.modal--event .modal__close{right:0;border-top:var(--hair)}
.modal--event .modal__nav{justify-content:center;margin-top:clamp(26px,4vw,42px)}
.event-detail{
  display:flex;flex-direction:column;align-items:center;text-align:center;
  gap:clamp(14px,2.4vw,24px);
}
.event-detail__eyebrow{
  color:var(--graphite);font-size:12px;letter-spacing:.24em;
  margin:0;text-transform:uppercase;
}
.event-detail h2{
  color:var(--white);font-family:var(--display);font-size:clamp(30px,6vw,62px);
  font-style:italic;font-weight:900;letter-spacing:0;line-height:.92;
  margin:0;text-transform:uppercase;
}
.event-detail > .meta{
  color:var(--graphite);font-size:13px;letter-spacing:.18em;
  margin:0;text-transform:uppercase;
}
.event-detail__poster{
  background:var(--black);border:var(--hair);max-width:420px;width:100%;
}
.event-detail__poster img{width:100%}
.event-detail__lineup,.event-detail__description{max-width:64ch;width:100%}
.event-detail h3{
  color:var(--graphite);font-size:11.5px;font-weight:400;letter-spacing:.2em;
  margin:0 0 8px;text-transform:uppercase;
}
.event-detail__lineup ul{
  display:flex;flex-wrap:wrap;justify-content:center;align-items:center;
  list-style:none;margin:0;padding:0;text-transform:uppercase;
}
.event-detail__lineup li{
  border:0;padding:0;text-decoration:underline;text-decoration-thickness:1px;
  text-underline-offset:3px;
}
.event-detail__lineup li:not(:first-child)::before{
  content:"•";display:inline-block;margin:0 10px;text-decoration:none;
}
.event-detail__description{margin-top:8px;text-align:center;text-transform:none}
.event-detail__description p{
  letter-spacing:.01em;line-height:1.62;margin:0 0 1em;text-transform:none;
}
.event-detail__source{margin:0;text-align:center;text-transform:uppercase}

/* ==========================================================================
   TRACKS / BLOG
   ========================================================================== */
.post{border-top:var(--hair);padding:clamp(22px,3.4vw,38px) 0}
.post:last-of-type{border-bottom:var(--hair)}
.post__head{display:flex;flex-wrap:wrap;gap:10px 18px;align-items:baseline;margin-bottom:14px}
.post__title{
  font-family:var(--display);font-weight:700;font-style:italic;
  color:var(--white);
  font-size:clamp(22px,3.6vw,42px);line-height:1;margin:0;
  text-transform:uppercase;letter-spacing:0
}
.post__grid{display:grid;gap:clamp(18px,3vw,34px);grid-template-columns:1fr}
@media(min-width:760px){.post__grid{grid-template-columns:minmax(0,300px) minmax(0,1fr)}}
.post__art{border:var(--hair)}
.post__art img{width:100%;aspect-ratio:3/2;object-fit:cover}
.post__tags{display:flex;flex-wrap:wrap;gap:7px;margin:18px 0 0}

/* player ---------------------------------------------------------------- */
.player{border:var(--hair);margin:0 0 18px;font-size:12px;letter-spacing:.1em}
.player__row{display:flex;align-items:stretch}
.player__btn{
  background:none;border:0;border-right:var(--hair);color:var(--red);
  font:inherit;width:52px;flex:none;cursor:pointer;font-size:13px
}
.player__btn:hover,.player__btn:focus-visible{background:var(--red);color:var(--black);outline:none}
.player__meter{flex:1;position:relative;padding:11px 12px;min-width:0}
.player__label{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;position:relative;z-index:2}
.player__bar{position:absolute;left:0;top:0;bottom:0;width:0;background:var(--red);opacity:.22;z-index:1}
.player__meter{cursor:pointer}
.player__time{border-left:var(--hair);padding:11px 12px;flex:none;font-variant-numeric:tabular-nums;color:var(--graphite)}
.embed{border:var(--hair);margin:0 0 18px}
.embed iframe{display:block;width:100%;border:0}

/* ==========================================================================
   FOOTER
   ========================================================================== */
.footer{
  margin-top:clamp(48px,7vw,96px);
  border-top:var(--hair);
  padding:22px 0 46px;
  display:grid;gap:22px;
  font-size:11.5px;letter-spacing:.13em;color:var(--graphite)
}
@media(min-width:760px){.footer{grid-template-columns:1fr auto;align-items:end}}
.footer a{color:var(--graphite)}
.footer a:hover{background:var(--red);color:var(--black)}
.footer__links{display:flex;flex-wrap:wrap;gap:8px 16px;margin:0 0 12px;padding:0;list-style:none}
.footer__stamp{border:1px solid var(--graphite);padding:9px 13px;line-height:1.7}
.footer__globe{width:64px;opacity:.5;margin-bottom:12px}

/* ==========================================================================
   NO-JS FALLBACK
   ========================================================================== */
.no-js .card__btn{height:auto;cursor:default}
.no-js .card__cap{margin-top:0}
.no-js .card__detail{display:block;border:var(--hair);border-top:0;padding:14px;text-transform:none}
.no-js .card__detail h2{font-family:var(--display);font-weight:700;font-style:italic;text-transform:uppercase;font-size:20px;margin:0 0 4px}
.no-js .card__detail h3{font-size:11px;letter-spacing:.2em;color:var(--graphite);text-transform:uppercase;margin:16px 0 6px;font-weight:400}
.no-js .card__detail ul,.no-js .card__detail ol{margin:0;padding:0;list-style:none;font-size:12px}
.no-js .card__detail li{border-bottom:1px dotted var(--red);padding:5px 0}
.no-js .card__plus,.no-js .modal__nav{display:none}

/* === editor-overrides (managed by the visual editor, do not edit by hand) === */
#main > div.next > p.next__date {
  font-family: Arial, sans-serif !important;
  font-style: normal !important;
  font-weight: 700 !important;
}

body > {
  font-weight: 400 !important;
  color: #f4ad9a !important;
}

#main > div.next > p.next__venue {
  font-family: Arial, sans-serif !important;
}

#main > div.next > div.body-copy > p {
  font-family: Arial, sans-serif !important;
}

#main > div.next {
  color: #ff0000 !important;
}

#main > h1.h-section {
  font-family: Arial, sans-serif !important;
  font-style: italic !important;
  font-weight: 300 !important;
  color: #ff0000 !important;
}

#modal > div.modal__inner > div.modal__body > article.event-detail > h2 {
  font-family: Arial, sans-serif !important;
  font-style: italic !important;
}

#main > div.profile-head > h1.profile-title {
  font-family: Arial, sans-serif !important;
  font-style: normal !important;
  font-size: 80px !important;
}

#main > p.h-sub {
  font-family: var(--display) !important;
  font-style: normal !important;
}
/* === end editor-overrides === */