/* The band's stage photographs set the palette and proportions. */
@layer band {
  :root {
    --ink: #050c12;
    --paper: #eef7f7;
    --accent: #d3c453;
    --violet: #b3a2d9;
    --muted: #aaa8b2;
    --line: #302e39;
  }

  .brand {
    font: 700 20px/.92 var(--body);
    letter-spacing: -1px;
    gap: 13px;
  }
  .brand-mark { width: 43px; height: 43px; color: var(--paper); }
  .brand-period { color: var(--paper); }
  .brand-logo { width: 88px; height: 92px; object-fit: contain; }
  .header { height: 110px; border-bottom-color: #ecebe421; }
  .section-number { color: var(--violet); }
  .hero-image {
    left: auto;
    right: max(4%, calc((100vw - 1280px) / 2 - 20px));
    top: -4%;
    width: auto;
    max-width: none;
    height: 110%;
    object-fit: contain;
    object-position: center;
    /* Fade the photograph itself, so its gray backdrop has no rectangular seam. */
    -webkit-mask-image:
      linear-gradient(90deg, transparent 0%, #000 16%, #000 82%, transparent 100%),
      linear-gradient(180deg, transparent 0%, #000 11%, #000 72%, transparent 100%);
    mask-image:
      linear-gradient(90deg, transparent 0%, #000 16%, #000 82%, transparent 100%),
      linear-gradient(180deg, transparent 0%, #000 11%, #000 72%, transparent 100%);
    -webkit-mask-composite: source-in;
    mask-composite: intersect;
  }
  .hero-shade {
    background:
      linear-gradient(90deg, #050c12 0%, #050c12eb 22%, #050c1238 48%, #050c1200 68%),
      linear-gradient(0deg, #050c12 0%, #050c1226 16%, #050c1200 36%);
  }
  .hero h1 > span { color: var(--paper); }
  .hero h1 .title-period { color: var(--accent); }
  .hero-eyebrow { color: #d5d2df; }
  .hero-side { color: #d6d3de; }
  .hero-foot { color: #aaa8b3; }
  .hero-photo-link {
    position: absolute;
    right: max(64px, calc((100vw - 1280px) / 2));
    bottom: 90px;
    display: flex;
    align-items: center;
    gap: 24px;
    padding: 11px 14px;
    border: 1px solid #ecebe457;
    background: #050c1250;
    color: var(--paper);
    font-size: 9px;
    letter-spacing: 1.5px;
  }
  .hero-photo-link:hover { border-color: var(--accent); }
  .hero-photo-link svg { width: 16px; height: 16px; }
  .manifesto-strip { border-block: 1px solid #ffffff30; }
  .marquee i { color: #5f507c; font-size: 23px; }
  .shows { background: #121218; border-block-color: #2a2733; }
  .shows-board { border-top-color: #5d5869; }
  .shows-table-head, .shows-board-footer { color: #a29cac; }
  .band { gap: 8%; }
  .band-photo { margin-right: 0; min-height: 530px; }
  .band-photo > img { object-position: 44% 50%; filter: none; }
  .band-photo::after { box-shadow: inset 0 -70px 50px -35px #000b; }
  .photo-label { bottom: 18px; left: 18px; color: #dad7e1; }
  .photo-sticker {
    display: flex;
    align-items: center;
    gap: 15px;
    right: -25px;
    bottom: 58px;
    width: 140px;
    height: auto;
    min-height: 0;
    padding: 10px;
    background: var(--ink);
    border: 1px solid #eef7f7a8;
    color: var(--ink);
    transform: rotate(-5deg);
    box-shadow: 0 2px 12px #0005;
  }
  .photo-sticker > img { width: 100%; height: auto; }
  .photo-sticker svg { position: static; width: 49px; height: 49px; }
  .photo-sticker > span { color: var(--ink); font: 700 23px/.92 var(--condensed); }
  .photos { background: #131219; border-block: 1px solid #302a3a; }
  .photos .section-heading { margin-bottom: 38px; }
  .photo-grid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 14px; }
  .gallery-photo {
    position: relative;
    padding: 0;
    grid-column: span 3;
    aspect-ratio: 1 / 1.1;
    overflow: hidden;
    background: #08080a;
    text-align: left;
  }
  .gallery-wide { grid-column: span 8; height: 410px; aspect-ratio: auto; }
  .gallery-symbol { grid-column: span 4; height: 410px; aspect-ratio: auto; }
  .gallery-photo > img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform .4s, filter .4s;
  }
  .gallery-photo:hover > img { transform: scale(1.025); filter: brightness(1.1); }
  .gallery-keys > img { object-position: 52% 50%; }
  .gallery-caption {
    position: absolute;
    inset: auto 0 0;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 10px;
    padding: 35px 16px 15px;
    background: linear-gradient(transparent, #08080af0);
    color: #e6e3ec;
    font-size: 8px;
    letter-spacing: 1.2px;
  }
  .gallery-caption > span:last-child { font-size: 20px; color: var(--accent); }
  .photos-bottom {
    display: flex;
    justify-content: space-between;
    gap: 20px;
    padding-top: 20px;
    color: #a19aa9;
    font-size: 9px;
    letter-spacing: .9px;
  }
  .photos-bottom > a { color: #dad5e2; letter-spacing: 0; font-size: 11px; }
  .photo-dialog {
    width: calc(100% - 64px);
    max-width: 1200px;
    max-height: calc(100svh - 40px);
    padding: 16px;
    background: #050c12;
    border-color: #51495e;
  }
  .photo-dialog > .dialog-close { top: 25px; right: 25px; background: #050c12c9; }
  .photo-dialog figure { margin: 0; }
  .photo-dialog figure > img { width: 100%; height: auto; max-height: calc(100svh - 135px); object-fit: contain; }
  .photo-dialog figcaption { display: flex; justify-content: space-between; align-items: center; gap: 16px; padding-top: 15px; }
  #photo-dialog-title { color: #dcd6e5; font-size: 10px; letter-spacing: 1.2px; }
  .photo-navigation { display: flex; align-items: center; gap: 16px; }
  .photo-navigation > button { width: 35px; height: 35px; border: 1px solid #5d526d; font-size: 22px; }
  .photo-navigation > button:hover { color: var(--ink); background: var(--accent); border-color: var(--accent); }
  #photo-counter { color: var(--violet); font-size: 10px; letter-spacing: 1px; white-space: nowrap; }
  .dialog { background: #17151c; border-color: #5c5368; }
  .dialog::backdrop { background: #060509e8; }
  .dialog-close { background: #17151c; }
  input, textarea, select { background: #0d0c10; border-color: #514a5c; }
  .audio-player { background: #211d29f5; border-color: #655974; }
  .footer-top .brand { font: 700 18px/.92 var(--body); }

  @media (max-width: 1100px) {
    .hero-image { left: auto; right: 2%; width: auto; }
    .hero-photo-link { right: 40px; }
    .gallery-wide, .gallery-symbol { height: 330px; }
    .band-photo { min-height: 490px; }
  }
  @media (max-width: 760px) {
    .header { height: 92px; }
    .mobile-nav { top: 92px; }
    .brand-logo { width: 76px; height: 80px; }
    .brand { font-size: 18px; gap: 10px; letter-spacing: -.8px; }
    .brand-mark { width: 35px; height: 35px; }
    .hero { height: 700px; min-height: 0; }
    .hero-image {
      left: auto;
      right: -4%;
      top: -10px;
      width: 108%;
      height: 560px;
      object-fit: cover;
      object-position: 50% 37%;
      -webkit-mask-image:
        linear-gradient(90deg, transparent 0%, #000 14%, #000 86%, transparent 100%),
        linear-gradient(180deg, transparent 0%, #000 8%, #000 59%, transparent 100%);
      mask-image:
        linear-gradient(90deg, transparent 0%, #000 14%, #000 86%, transparent 100%),
        linear-gradient(180deg, transparent 0%, #000 8%, #000 59%, transparent 100%);
    }
    .hero-shade {
      background: linear-gradient(180deg, #050c1210 0%, #050c1208 18%, #050c124a 37%, #050c12ee 63%, #050c12 76%);
    }
    .hero-content { padding-top: 300px; }
    .hero-eyebrow { position: absolute; top: 25px; margin-bottom: 0; font-size: 8px; letter-spacing: 1.5px; }
    .hero h1 { font-size: clamp(76px, 18.2vw, 138px); }
    .hero-bottom-copy { margin-top: 27px; }
    .hero-bottom-copy > p { font-size: 18px; }
    .hero-bottom-copy > p > span { font-size: 13px; }
    .hero-photo-link { top: 265px; bottom: auto; right: 20px; padding: 7px 0; border: 0; border-bottom: 1px solid #ecebe47a; background: none; gap: 14px; font-size: 7px; }
    .hero-photo-link > svg { width: 13px; height: 13px; }
    .hero-foot { bottom: 23px; font-size: 7px; }
    .marquee i { font-size: 20px; }
    .band { gap: 40px; }
    .band-photo { min-height: 0; height: 425px; margin-right: 0; }
    .photo-sticker { width: 120px; min-height: 0; padding: 10px; bottom: 48px; right: -8px; }
    .photo-sticker svg { width: 40px; height: 40px; }
    .photo-sticker > span { font-size: 21px; }
    .photo-grid { gap: 10px; }
    .gallery-photo { grid-column: span 6; aspect-ratio: 1 / 1.2; height: auto; }
    .gallery-wide { grid-column: span 12; aspect-ratio: 1.3; }
    .gallery-photo:last-child { grid-column: span 12; aspect-ratio: 1.5; }
    .gallery-caption { padding: 35px 11px 10px; font-size: 7px; letter-spacing: .5px; }
    .gallery-caption > span:last-child { font-size: 17px; }
    .photos-bottom { font-size: 7px; letter-spacing: .4px; gap: 14px; }
    .photos-bottom > a { font-size: 9px; white-space: nowrap; }
    .photo-dialog { width: calc(100% - 20px); padding: 10px; }
    .photo-dialog > .dialog-close { top: 16px; right: 16px; }
    .photo-dialog figcaption { align-items: flex-start; flex-direction: column; gap: 15px; padding-top: 12px; }
    .photo-navigation { align-self: flex-end; }
    #photo-dialog-title { font-size: 9px; }
    .footer-top .brand { font-size: 16px; }
    .footer-top .brand-mark { width: 32px; height: 32px; }
  }
  @media (max-width: 380px) {
    .hero { height: 680px; }
    .hero-content { padding-top: 290px; }
    .hero h1 { font-size: 18.2vw; }
    .hero-photo-link { top: 252px; }
    .band-photo { height: 385px; }
  }
}