/* Homepage redesign (Red Light-inspired), 2026-10-05 */
.h-wrap{max-width:calc(1240px + 8vw);margin:0 auto;padding:0 4vw}
.h-title{position:relative;margin:0 0 26px;padding-top:16px;font:800 clamp(26px,2.6vw,36px)/1 var(--font-display);text-transform:uppercase;letter-spacing:.02em}
.h-title:before{content:"";position:absolute;top:0;left:0;width:44px;height:5px;background:var(--accent)}
.h-more{display:inline-block;margin-top:14px;font:700 11px var(--font-ui);letter-spacing:.14em;text-transform:uppercase;border-bottom:2px solid currentColor;padding-bottom:2px}
.h-all{margin:32px 0 0}
.ap-btn{display:inline-flex;align-items:center;justify-content:center;font:700 12px var(--font-ui);letter-spacing:.1em;text-transform:uppercase;text-decoration:none;padding:11px 18px;border:2px solid var(--ink);color:var(--ink);background:transparent;white-space:nowrap}
.ap-btn.sm{padding:5px 10px;font-size:10.5px;border-width:1.5px}
.ap-btn:hover,.ap-btn:focus-visible{background:var(--accent);border-color:var(--ink);color:var(--ink)}

/* banner: each slide is that artist's page header (artist.css .ap-hero), plus a pull quote */
.h-banner{position:relative;height:min(68vh,640px);min-height:440px;overflow:hidden;background:var(--ink)}
.h-slide{position:absolute!important;inset:0;margin:0!important;display:block;opacity:0;transition:opacity 1.2s ease;text-decoration:none}
.h-slide.on{opacity:1;z-index:1}
.h-banner .ap-hero-in{height:100%!important;min-height:0!important;max-width:calc(1376px + 8vw)}
.h-banner .ap-hero.tall .ap-hero-img{max-height:100%;height:100%}
.h-banner .ap-hero.wide .ap-hero-in{display:block;max-width:none;padding:0}
.h-banner .ap-hero.wide .ap-hero-img{height:100%;width:auto;max-width:100%;margin:0 auto}
.h-banner .ap-hero.wide::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,rgba(0,0,0,.55) 0,rgba(0,0,0,.25) 45%,transparent 70%);pointer-events:none}
/* three parts: name left | photo | quote right */
.h-banner .ap-hero.tall .ap-hero-in{display:grid;grid-template-columns:minmax(0,1fr) auto minmax(0,1fr);align-items:center;gap:3vw}
.h-banner .ap-hero.tall .ap-hero-img{max-width:44vw;justify-self:center}
.h-copy{position:relative;z-index:2;align-self:center}
.ap-hero.wide .h-copy{position:absolute;left:4vw;bottom:9%;z-index:3;max-width:min(620px,40%)}
.h-banner .ap-hero .ap-name{position:static!important;margin:0!important}
.h-banner .ap-hero.wide::before{content:"";position:absolute;inset:0;z-index:1;background:linear-gradient(270deg,rgba(0,0,0,.6) 0,rgba(0,0,0,.2) 32%,transparent 50%);pointer-events:none}
.h-quote{position:relative;z-index:3;display:block;justify-self:end;max-width:24ch;text-align:left;
  font:700 clamp(22px,2.3vw,36px)/1.2 var(--font-display);letter-spacing:-.01em}
.ap-hero.wide .h-quote{position:absolute;right:4vw;top:50%;transform:translateY(-50%);max-width:min(440px,30%)}
/* a yellow bar marks the quote instead of quotation marks (Ben 2026-10-06, option 2 of 3) */
.h-quote .mark,.h-quote .close{display:none}
.h-quote:not(.plain){border-left:4px solid var(--accent);padding-left:22px}
.ap-hero.light .h-quote:not(.plain){border-left-color:var(--ink)}
.ap-hero.dark .h-quote{color:#fff;text-shadow:0 1px 16px rgba(0,0,0,.45)}
.ap-hero.light .h-quote{color:var(--ink)}
.h-quote cite{display:block;margin-top:18px;font:700 clamp(14px,1vw,17px) var(--font-ui);letter-spacing:.18em;text-transform:uppercase;font-style:normal;opacity:.9}
.h-quote cite:before{content:"— "}
.h-banner .ap-name{text-decoration:none!important;position:relative!important}
.h-banner .ap-name:before{content:"";position:absolute;left:0;top:-18px;width:64px;height:6px;background:var(--accent);opacity:0;transition:opacity .2s}
.h-slide:hover .ap-name:before,.h-slide:focus-visible .ap-name:before{opacity:1}
.h-count{position:absolute;right:4vw;bottom:22px;z-index:3;display:flex;align-items:center;gap:12px;background:var(--ink);padding:6px;font:700 13px var(--font-ui);letter-spacing:.12em;color:#fff}
.h-count button{background:none;border:1.5px solid rgba(255,255,255,.6);color:#fff;width:34px;height:34px;cursor:pointer;font-size:15px}
.h-count button:hover{background:var(--accent);color:var(--ink);border-color:var(--accent)}

/* alternating news rows */
.h-news{background:#e9e9ea;padding:72px 0}
.h-row{display:grid;grid-template-columns:1fr 1fr;text-decoration:none;color:var(--ink);background:#fff}
.h-row-img{display:block;aspect-ratio:16/9;overflow:hidden;background:var(--ink)}
.h-row-img img,.h-row-img video{width:100%;height:100%;object-fit:cover;object-position:center 22%;display:block}
.h-row-text{display:flex;flex-direction:column;justify-content:center;align-items:flex-start;padding:28px 40px}
.h-row.flip .h-row-img{order:2}
.h-row-text .d{font:700 11px var(--font-ui);letter-spacing:.14em;text-transform:uppercase;color:var(--ink-soft)}
.h-row-text .t{margin:8px 0 0;font:800 clamp(18px,1.6vw,24px)/1.15 var(--font-display);text-transform:uppercase}
.h-row-text .x{margin-top:10px;font:15px/1.55 var(--font-body);color:#3a3a3c}
.h-row:hover .t{text-decoration:underline;text-decoration-color:var(--accent);text-decoration-thickness:4px;text-underline-offset:4px}

/* shows */
.h-shows{padding:72px 0}
.h-dates{list-style:none;margin:0;padding:0;border-top:2px solid var(--ink)}
.h-dates li{display:grid;grid-template-columns:90px 1.1fr 1.6fr 84px;gap:20px;align-items:center;padding:14px 0;border-bottom:1px solid var(--line)}
.h-dates .d{font:800 20px/1 var(--font-display)}.h-dates .d small{display:block;margin-top:4px;font:700 10px var(--font-ui);letter-spacing:.12em;color:var(--ink-soft)}
.h-dates .a{font:700 14px var(--font-ui);letter-spacing:.08em;text-transform:uppercase}
.h-dates .v{font:15px/1.35 var(--font-body)}.h-dates .v small{display:block;font-size:13px;color:var(--ink-soft)}

/* roster strip */
.h-roster{background:#fff;padding:72px 0 88px}
.h-head{display:flex;justify-content:space-between;align-items:flex-start}
.h-cards{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px}
.h-cards .roster-name{font-size:clamp(16px,1.5vw,22px);bottom:16%}

@media(max-width:900px){
  .h-banner{height:auto;min-height:0}
  .h-slide{position:absolute!important}.h-slide.on{position:relative!important}
  .h-banner .ap-hero-in{flex-direction:column;align-items:flex-start;padding:18px 16px 64px!important;gap:14px}
  .h-banner .ap-hero-img,.h-banner .ap-hero.wide .ap-hero-img{order:2;width:100%;height:auto;max-height:none}
  .h-copy,.ap-hero.wide .h-copy{position:static;max-width:none;order:1}
  .h-banner .ap-hero.tall .ap-hero-in{display:flex}
  .h-quote,.ap-hero.wide .h-quote{position:static;transform:none;order:3;max-width:none;font-size:22px}
  .h-banner .ap-hero.wide::before{display:none}
  .h-banner .ap-hero.tall .ap-hero-img{max-width:100%}
  .h-banner .ap-name{font-size:48px!important}
  .h-banner .ap-hero.wide .ap-hero-in{display:flex}
  .h-banner .ap-hero.wide::after{display:none}
  .ap-hero.wide.dark .ap-name,.ap-hero.wide.dark .h-quote{color:#fff}
  .h-row{grid-template-columns:1fr}.h-row.flip .h-row-img{order:0}.h-row-text{padding:20px}
  .h-dates li{grid-template-columns:70px 1fr auto;gap:12px}.h-dates .a{grid-column:2}.h-dates .v{grid-column:2}.h-dates li>a,.h-dates li>span:last-child{grid-row:1/3;grid-column:3}
  .h-cards{grid-template-columns:repeat(2,minmax(0,1fr))}
  .h-news,.h-shows,.h-roster{padding:48px 0}
}
.h-dates li>a{justify-self:end}
.h-quote.long{font-size:clamp(18px,1.6vw,26px);max-width:28ch}
.h-banner .ap-hero.tall .ap-hero-in{padding-top:28px;padding-bottom:72px}
.h-banner .ap-hero.tall .ap-hero-img{max-height:calc(100% - 20px)}
.h-quote.plain{font:800 clamp(24px,2.4vw,38px)/1.15 var(--font-display);text-transform:none}
/* nudge wide photos right so the name clears the subject (per-act --shift) */
.h-banner .ap-hero.wide .ap-hero-img{transform:translateX(var(--shift,6%))}
.h-banner .ap-hero.tall .ap-hero-img{transform:translateX(calc(var(--shift,6%) / 2))}
.h-banner .ap-hero.wide::before{background:linear-gradient(270deg,rgba(0,0,0,.72) 0,rgba(0,0,0,.45) 22%,rgba(0,0,0,.12) 40%,transparent 52%)!important}
.ap-hero.light.wide::before{background:linear-gradient(270deg,rgba(255,255,255,.85) 0,rgba(255,255,255,.5) 26%,transparent 50%)!important}
/* name | photo | quote: wide photos are narrowed to the middle with soft edges, so the
   name and the quote each sit on plain colour, never on the subject */
.h-banner .ap-hero.wide .ap-hero-img{position:absolute;top:0;left:50%;height:100%;width:auto;max-width:var(--imgw-wide,62%);object-fit:contain;
  transform:translateX(calc(-50% + var(--shift,0%)));margin:0;
  -webkit-mask-image:linear-gradient(90deg,transparent 0,#000 14%,#000 86%,transparent 100%);mask-image:linear-gradient(90deg,transparent 0,#000 14%,#000 86%,transparent 100%)}
.h-banner .ap-hero.wide .h-copy{max-width:min(520px,30%)}
.ap-hero.wide .h-quote{max-width:min(360px,24%)!important}
.h-banner .ap-hero.wide::before{background:linear-gradient(270deg,rgba(0,0,0,.35) 0,transparent 30%)!important}
.h-banner .ap-hero.tall .ap-hero-img{max-width:var(--imgw,40vw)}
.h-banner .ap-hero{background:linear-gradient(90deg,var(--edge-l) 0,var(--edge-l) 22%,var(--edge-r) 78%,var(--edge-r) 100%)!important}

/* phone: banner stacks name, photo, quote (last in file so it wins over the desktop rules) */
@media (max-width:900px){
  .h-banner{height:auto!important;min-height:0!important}
  .h-banner .ap-hero-in,.h-banner .ap-hero.tall .ap-hero-in,.h-banner .ap-hero.wide .ap-hero-in{display:flex!important;flex-direction:column;align-items:flex-start;gap:14px;height:auto!important;padding:20px 16px 72px!important}
  .h-banner .h-copy,.h-banner .ap-hero.wide .h-copy{position:static!important;max-width:none!important;order:1}
  .h-banner .ap-hero .ap-hero-img,.h-banner .ap-hero.wide .ap-hero-img,.h-banner .ap-hero.tall .ap-hero-img{position:static!important;order:2;transform:none!important;width:100%!important;max-width:100%!important;height:auto!important;max-height:none!important;-webkit-mask-image:none;mask-image:none}
  .h-banner .h-quote,.h-banner .ap-hero.wide .h-quote{position:static!important;transform:none!important;order:3;max-width:none!important;font-size:22px;justify-self:start}
  .h-banner .ap-name,.h-banner .ap-name.long{font-size:44px!important;padding:0!important;display:block}
  .h-banner .ap-hero.wide::before,.h-banner .ap-hero.wide::after{display:none}
  .h-banner .ap-hero.wide.dark .ap-name,.h-banner .ap-hero.wide.dark .h-quote{color:#fff}
}
/* name sized to its column: the longest word must fit in ~26% of the width at any screen size */
.h-banner .ap-name{font-size:clamp(44px,6.6vw,128px);line-height:.92;white-space:normal}
.h-banner .ap-hero.wide .h-copy{max-width:30%!important}
.h-banner .ap-hero.tall .ap-hero-in{grid-template-columns:30% minmax(0,1fr) 28%!important}

/* tall photos: three fixed columns; the photo never leaves the middle one */
.h-banner .ap-hero.tall .ap-hero-in{grid-template-columns:30% minmax(0,1fr) 26%!important;gap:2.5vw!important;align-items:center!important}
.h-banner .ap-hero.tall .ap-hero-img{max-width:100%!important;max-height:calc(100% - 40px)!important;height:auto!important;width:auto!important;transform:none!important;justify-self:center}
.h-banner .ap-hero.tall .h-copy{align-self:center}
.h-banner .ap-hero.tall .h-quote{justify-self:start;max-width:100%}
.h-banner .ap-hero.wide .h-copy,.h-banner .ap-hero.tall .h-copy{width:30%;max-width:30%!important}
.h-banner .ap-hero.tall .h-copy{width:100%;max-width:100%!important;min-width:0}
.h-banner .ap-hero.tall .ap-name{max-width:100%}
@media (max-width:900px){.h-banner .ap-hero .h-copy{width:auto;max-width:none!important}}
.h-banner .ap-name{display:block;overflow-wrap:normal;word-break:keep-all}
/* one name size for every act: The Bar-Kays' size (Ben 2026-10-06: "keep it that size for all
   artists"). A long word widens its own name column (home2.js sets --namew) instead of shrinking. */
.h-banner .ap-hero.wide .h-copy{width:max(30%,var(--namew,0px));max-width:none!important}
@media (max-width:900px){.h-banner .ap-hero.wide .h-copy{width:auto}}
/* per-act zoom (home_zoom): enlarges the photo from a point below centre, so the empty space above
   the heads goes first (Ben 2026-10-06: "zoom in a bit more" on Making Movies). Desktop only. */
@media (min-width:901px){.h-banner .ap-hero .ap-hero-img{scale:var(--zoom,1);transform-origin:var(--zoom-at,center 70%)}}
/* bigger photos on tall slides (Ben 2026-10-06: Rizo, Rosie, Texmaniacs "too small"): the photo
   runs the full banner height and the quote column is only as wide as its quote needs */
@media (min-width:901px){
  .h-banner .ap-hero.tall .ap-hero-in{grid-template-columns:max(30%,var(--namew,0px)) minmax(0,1fr) fit-content(22%)!important;gap:2vw!important;height:100%!important;padding-top:0!important;padding-bottom:0!important}
  .h-banner .ap-hero.tall .ap-hero-img{max-height:max(440px,min(68vh,640px))!important}
  .h-banner .ap-hero.tall .ap-hero-in{max-width:none!important;margin:0!important}  /* same 4vw edges as the wide slides */
}
/* quote under the name, photo fills the rest at full height: for wide group photos beside a long
   name (Ben 2026-10-06: Los Texmaniacs "way too small") */
@media (min-width:901px){
  .h-banner .ap-hero.tall.qunder .ap-hero-in{grid-template-columns:max(30%,var(--namew,0px)) minmax(0,1fr)!important;grid-template-rows:1fr auto auto 1fr;column-gap:3vw!important;row-gap:0!important}
  .h-banner .ap-hero.tall.qunder .h-copy{grid-column:1;grid-row:2}
  .h-banner .ap-hero.tall.qunder .h-quote{grid-column:1;grid-row:3;margin-top:28px;justify-self:start}
  .h-banner .ap-hero.tall.qunder .ap-hero-img{grid-column:2;grid-row:1/5;align-self:center;justify-self:end}
}