/* Header and first panel: reference composition, with editable HTML copy. */
@font-face {
  font-family: 'Drafts Condensed';
  src: url('../fonts/oswald.ttf') format('truetype');
  font-style: normal;
  font-weight: 200 700;
  font-display: swap;
}
.topbar {
  height: 60px;
  padding: 0 1.6%;
  background: #030303;
  border-bottom: 0;
  gap: 24px;
}
.brand {
  flex-shrink: 0;
  display: block;
  width: 184px;
  margin-left: -12px;
  transform: none;
}
.brand img { display: block; width: 100%; height: auto; clip-path: inset(0 0 0 10%); }
.topbar nav { gap: clamp(18px, 2.8vw, 40px); }
.topbar nav a {
  position: relative;
  padding: 12px 0;
  font-family: 'Drafts Condensed', 'Arial Narrow', sans-serif;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: .02em;
}
.topbar nav a[aria-current]::after {
  content: '';
  position: absolute;
  bottom: 3px;
  height: 2px;
  left: 0;
  right: 0;
  background: #c62260;
}
.skip-link { position: fixed; left: 16px; top: -100px; z-index: 100; background: #f4e3c3; color: #080808; padding: 12px; }
.skip-link:focus { top: 8px; }
section[id] { scroll-margin-top: 76px; }
.admin-bar .topbar { top: 32px; }
.hero.paper-frame {
  container-type: inline-size;
  position: relative;
  display: block;
  isolation: isolate;
  min-height: 0;
  aspect-ratio: 984 / 499;
  margin: 0 1.8% 14px;
  padding: 0;
  border: 1px solid #211e16;
  background-color: #050504;
  background-image: radial-gradient(ellipse at center, #c4ad7b88 0 .6px, transparent 1px), radial-gradient(ellipse at center, #c4ad7b66 0 .7px, transparent 1.2px);
  background-size: 39px 47px, 67px 83px;
  background-position: 4px 12px, 24px 31px;
  overflow: hidden;
}
.hero-art {
  position: absolute;
  inset: 0;
  min-height: 0;
  display: block;
  z-index: -1;
}
.hero-art img { display: block; width: 100%; height: 100%; max-height: none; object-fit: cover; object-position: right top; filter: none; }
.hero-art img { mask-image: linear-gradient(90deg, transparent 0 28%, #000 45%); }
.hero-copy { width: 43%; padding: 1.4% 0 2% 3%; }
.hero h1 {
  font-family: Impact, 'Barlow Condensed', sans-serif;
  font-weight: 900;
  color: #c62260;
  text-align: center;
  line-height: .84;
  letter-spacing: -.035em;
  margin: 0 0 1.6cqw;
  transform: none;
  height: 25cqw;
}
.hero h1 img { display: block; width: 100%; height: 100%; object-fit: fill; clip-path: inset(3% 0 0 7%); }
.hero .sticker {
  display: block;
  width: max-content;
  max-width: 100%;
  margin: 0 auto;
  background: #e4cfab;
  color: #080808;
  padding: .1em .25em;
  font-family: 'Drafts Condensed', 'Arial Narrow', sans-serif;
  font-weight: 700;
  font-size: 3.2cqw;
  line-height: 1.1;
  transform: rotate(-6deg);
  clip-path: polygon(1% 0, 99% 2%, 100% 13%, 99% 33%, 100% 56%, 99% 73%, 100% 96%, 1% 100%, 0 81%, 1% 64%, 0 43%, 1% 24%, 0 6%);
}
.hero-copy .hero-intro {
  max-width: none;
  margin: 2.3cqw 0 1.2cqw;
  font-family: 'Drafts Condensed', 'Arial Narrow', sans-serif;
  font-weight: 600;
  font-size: 2.12cqw;
  line-height: 1.35;
  text-transform: uppercase;
  text-align: center;
  transform: rotate(-5deg);
}
.hero-intro span { display: block; }
.hero-intro span:nth-child(2) { color: #cc2466; }
.hero-copy .hero-intro--custom { font-size: 1.9cqw; overflow-wrap: anywhere; }
.hero .hero-cta {
  display: table;
  margin: 0 auto;
  padding: .55em .85em;
  background: #bd2257;
  border: 1px solid #e5ceab;
  box-shadow: 3px 3px 0 #561329;
  font-family: 'Drafts Condensed', 'Arial Narrow', sans-serif;
  font-size: 2.12cqw;
  font-weight: 600;
  transform: rotate(-5deg);
}
.hero-cta::after { content: 'ϟ'; position: absolute; left: calc(100% + 18px); top: -.15em; font: 900 2em/1 Impact, sans-serif; color: #c62260; }
.hero .hero-cta:hover { transform: rotate(-2deg); }
.hero-moon { position: absolute; width: 6.4%; height: auto; left: .3%; top: 65%; z-index: -1; mix-blend-mode: screen; }
.hero--custom .hero-art { left: 40%; }
.hero--custom .hero-art img { mask-image: none; }
.hero--custom .hero-art img { object-fit: contain; object-position: center; }
@media (min-width: 1600px) { .topbar { height: 76px; } .brand { width: 200px; } .topbar nav a { font-size: 17px; } }
@media (max-width: 1050px) {
  .topbar { gap: 16px; }
  .topbar nav { gap: 22px; }
  .brand { width: 184px; }
}
@media (min-width: 901px) { .topbar .menu-toggle { display: none; } }
@media (max-width: 900px) {
  .topbar nav { top: 60px; border-bottom: 1px solid #b9a786; gap: 0; padding: 12px 24px; }
  .topbar nav a { padding: 12px 0; font-size: 16px; }
  .topbar nav a[aria-current]::after { right: auto; width: 42px; }
  .menu-toggle { border: 0; font-size: 27px; }
  .hero.paper-frame { margin-bottom: 10px; }
  .admin-bar .topbar { top: 46px; }
}
@media (max-width: 540px) {
  .topbar { height: 58px; padding: 0 16px; }
  .brand { width: 150px; }
  .topbar nav { top: 58px; }
  .hero.paper-frame { margin: 0 6px 10px; aspect-ratio: auto; min-height: 660px; }
  .hero-copy { width: 100%; padding: 28px 20px 0; }
  .hero h1 { width: 92%; height: 52cqw; margin: 0 auto 18px; }
  .hero .sticker { font-size: 6.7cqw; }
  .hero-copy .hero-intro { font-size: 4.7cqw; margin: 22px 0 18px; }
  .hero-copy .hero-intro--custom { font-size: 4.7cqw; }
  .hero .hero-cta { font-size: 4.8cqw; }
  .hero-art { inset: auto 0 0 0; height: 280px; z-index: -2; }
  .hero-art img { object-fit: cover; object-position: 88% bottom; }
  .hero-art img { mask-image: none; }
  .hero-moon { width: 12%; top: 42%; left: 2%; }
  .hero-cta::after { left: calc(100% + 12px); }
  .hero--custom .hero-art { inset-inline: 0; }
}
@media (max-width: 600px) { .admin-bar .topbar { top: 0; } }

/* Editable content panels: preserve the existing black, cream and pink palette. */
.home-sections { margin: 0 14px; }
.home-sections .paper-frame { margin: 0 0 8px; }
.home-sections h2, .home-sections h3, .home-sections .button { font-family: 'Drafts Condensed', Impact, sans-serif; font-weight: 700; }
.home-sections h2 { font-size: clamp(1.45rem, 2.5vw, 2.2rem); line-height: 1.15; }
.home-sections p { font-family: system-ui, sans-serif; font-size: .95rem; line-height: 1.65; }
.home-sections .next-concert { grid-template-columns: minmax(180px, 28%) minmax(0, 1fr); gap: clamp(20px, 4vw, 60px); }
.home-sections .next-concert--no-poster { grid-template-columns: 1fr; }
.home-sections .poster { min-height: 0; border: 0; }
.home-sections .poster img { max-height: 380px; object-fit: contain; }
.home-sections .date { font-family: 'Drafts Condensed', Impact, sans-serif; font-size: clamp(2rem, 4.7vw, 4.8rem); text-transform: uppercase; line-height: 1.15; }
.home-sections .date span { display: inline-block; margin-left: .25em; }
.home-sections .gig h3 { font-size: clamp(1.3rem, 2.5vw, 2rem); margin: 14px 0 6px; }
.home-sections .gig-price { color: var(--pink); font-weight: 700; }
.home-sections .about-grid { grid-template-columns: minmax(200px, 25%) minmax(0, 1fr); align-items: start; }
.home-sections .members { align-items: stretch; gap: 16px; }
.home-sections .member { padding: 0; background: transparent; border: 1px solid var(--border); overflow: hidden; }
.home-sections .member-photo { aspect-ratio: 1; }
.home-sections .member-photo img { filter: none; object-fit: cover; }
.member-caption { padding: 12px 8px; }
.home-sections .member h3 { font-size: 1.65rem; overflow-wrap: anywhere; }
.home-sections .member strong { font-family: 'Drafts Condensed', sans-serif; color: var(--cream); text-transform: uppercase; }
.home-sections .member p { font-size: .8rem; margin: 8px 0 0; }
.members-empty { grid-column: 1 / -1; }
.portrait-preview { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; }
.portrait-preview img { width: 100%; height: auto; display: block; }
.home-sections .lower-grid { margin: 0; grid-template-columns: 1fr 1.15fr 1fr; gap: 8px; }
.home-sections .lower-grid .paper-frame { border-width: 3px; padding: clamp(16px, 2vw, 28px); min-width: 0; }
.home-sections .songs { columns: 2; column-gap: 18px; }
.home-sections .songs li { position: relative; padding-left: 16px; font-family: 'Drafts Condensed', sans-serif; line-height: 1.3; font-size: 1rem; }
.home-sections .songs li::before { position: absolute; left: 0; margin: 0; }
.home-sections .songs small { display: block; font-family: system-ui, sans-serif; font-size: .75rem; opacity: .8; text-transform: none; }
.gig-list { list-style: none; padding: 0; margin: 0; }
.gig-list li { display: grid; grid-template-columns: auto minmax(0, 1fr); column-gap: 14px; padding: 12px 0; border-bottom: 1px solid #373029; font-size: .95rem; }
.gig-list time { color: var(--pink); font-variant-numeric: tabular-nums; }
.gig-list small { grid-column: 2; opacity: .8; }
.gig-list span { overflow-wrap: anywhere; }
.home-sections .upcoming { margin-top: 28px; border-top: 1px solid #373029; padding-top: 20px; }
.home-sections .insta-grid { gap: 6px; }
.home-sections .button { font-size: 1.2rem; max-width: 100%; overflow-wrap: anywhere; }
.drafts-instagram-feed { margin-bottom: 20px; min-width: 0; }
.drafts-instagram-feed #sb_instagram { max-width: 100%; }
@media (max-width: 1100px) {
 .home-sections .about-grid { grid-template-columns: 1fr; }
 .home-sections .about-copy { max-width: 700px; }
 .home-sections .lower-grid { grid-template-columns: 1fr 1fr; }
 .home-sections #instagram { grid-column: 1 / -1; }
 .home-sections .insta-grid { max-width: 600px; }
}
@media (max-width: 600px) {
 .home-sections { margin: 0 6px; }
 .home-sections .section { padding: 20px 16px; }
 .home-sections .next-concert, .home-sections .lower-grid { grid-template-columns: 1fr; }
 .home-sections .poster { max-width: 260px; margin: auto; }
 .home-sections .members, .portrait-preview { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
 .home-sections #instagram { grid-column: auto; }
 .home-sections .date span { margin-left: 0; }
}

/* Layout from the three section references supplied on 23 October. */
.home-sections > #concerts,
.home-sections .lower-grid > .paper-frame {
  border: 2px solid var(--pink);
  outline: 3px solid var(--border);
  outline-offset: 2px;
  margin: 6px 4px 20px;
}
.home-sections > #concerts { padding: 28px; position: relative; }
.home-sections .next-concert { grid-template-columns: minmax(180px, 25%) minmax(0, 1fr); gap: 30px; }
.home-sections .next-concert--no-poster { grid-template-columns: 1fr; }
.home-sections #concert-title { font-size: .9rem; letter-spacing: .3em; margin-bottom: 8px; }
.home-sections #concert-title::before { content: '★'; margin-right: 14px; }
.home-sections #concert-title::after { content: '★'; margin-left: 14px; }
.home-sections .gig-place span { color: var(--pink); font-size: .8em; display: inline-block; margin-left: 10px; }
.home-sections .gig > p { max-width: 590px; }
.home-sections .all-dates { margin-top: 18px; }
.home-sections .button { transform: none; padding: 13px 22px; color: #090806; box-shadow: 5px 5px 0 #514a3b; }
.home-sections .button:hover { transform: translateY(-2px); }
.home-sections #groupe { border: 0; padding: 20px 12px 34px; }
.home-sections .about-grid { grid-template-columns: minmax(0, 44%) minmax(0, 56%); gap: 0; }
.home-sections .about-copy { padding: 0 38px 0 0; }
.home-sections .about-copy h2 { font-size: clamp(2rem, 3.7vw, 3.5rem); }
.home-sections .about-motto { color: var(--pink); font-weight: 700; }
.band-facts { display: flex; flex-wrap: wrap; gap: 12px; margin: 22px 0 0; }
.band-facts > div { padding: 10px 13px; border: 2px solid var(--pink); }
.band-facts dt { color: var(--pink); font: 600 .7rem 'Drafts Condensed', sans-serif; letter-spacing: .18em; }
.band-facts dd { margin: 3px 0 0; font: 700 1rem 'Drafts Condensed', sans-serif; }
.home-sections .members { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; }
.home-sections .member { padding: 12px; border: 2px solid var(--border); }
.home-sections .member-caption { padding: 14px 0 2px; }
.home-sections .member-caption::after { content: '★'; display: block; color: var(--pink); margin-top: 6px; }
.home-sections .member h3 { font-size: 1.8rem; }
.home-sections .member strong { letter-spacing: .07em; }
.home-sections .portrait-preview { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; }
.home-sections .portrait-preview img { border: 2px solid var(--border); padding: 12px; }
.home-sections .lower-grid { grid-template-columns: 1fr 1.25fr 1fr; gap: 18px; }
.home-sections .lower-grid > .paper-frame { border-width: 2px; padding: 24px; }
.home-sections .lower-grid h2 { font-size: clamp(1.5rem, 2.2vw, 2.2rem); }
.home-sections .songs { columns: auto; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px 18px; margin: 22px 0; }
.home-sections .songs li { margin: 0; }
.home-sections #repertoire { display: flex; flex-direction: column; }
.home-sections #repertoire > p:first-of-type { order: 1; margin-top: 18px; }
.event-type { grid-column: 2; text-align: right; font-size: .8rem; letter-spacing: .1em; color: var(--border); }
.home-sections .past-note { margin-top: 24px; }
.social-placeholder { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.social-placeholder span { aspect-ratio: 1; border: 2px solid var(--cream); display: grid; place-items: center; color: var(--pink); font-size: 1.6rem; }
.social-placeholder span:nth-child(even) { background: var(--pink); color: var(--cream); }
.home-sections .booking { border-top: 1px solid #514a3b; padding-top: 20px; margin-top: 22px; scroll-margin-top: 80px; }
.home-sections .booking h3 { color: var(--pink); font-size: .8rem; letter-spacing: .2em; }
.booking-email { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.booking-email a { padding: 5px 8px; background: #302b20; text-decoration: none; overflow-wrap: anywhere; min-width: 0; font: 700 1rem 'Drafts Condensed', sans-serif; }
.copy-email { border: 2px solid var(--pink); padding: 6px 10px; background: transparent; color: var(--pink); font: 600 .8rem 'Drafts Condensed', sans-serif; cursor: pointer; letter-spacing: .08em; }
.copy-status:empty { display: none; }
.site-footer { padding: 32px 20px; clip-path: polygon(3% 4%, 97% 0, 100% 18%, 99% 94%, 4% 100%, 0 86%, 0 18%); }
.site-footer p { margin: 0; font-family: 'Drafts Condensed', Impact, sans-serif; font-weight: 700; }
.site-footer .footer-farewell { color: var(--pink); font-size: 1.25em; margin-top: 10px; }
.home-sections #instagram { grid-column: auto; }
@media (max-width: 1000px) {
 .home-sections .about-copy { padding-right: 24px; }
 .home-sections .lower-grid { grid-template-columns: 1fr 1.2fr; }
 .home-sections #instagram { grid-column: 1 / -1; }
 .social-placeholder { max-width: 350px; }
}
@media (max-width: 700px) {
 .home-sections .about-grid { grid-template-columns: 1fr; gap: 24px; }
 .home-sections .about-copy { padding: 0; }
 .home-sections .lower-grid { grid-template-columns: 1fr; }
 .home-sections .next-concert { grid-template-columns: 1fr; }
 .home-sections .poster { max-width: 260px; margin: auto; }
 .home-sections #concert-title { letter-spacing: .18em; }
 .home-sections .gig-place span { margin-left: 0; display: block; }
 .home-sections #instagram { grid-column: auto; }
 .home-sections .lower-grid > .paper-frame { padding: 22px 18px; }
 .band-facts { gap: 8px; }
 .band-facts > div { padding: 8px; }
 .home-sections .member { padding: 7px; }
 .home-sections .member h3 { font-size: 1.5rem; }
}
.home-sections .portrait-preview img { aspect-ratio: 1; height: 100%; object-fit: cover; }

/* Next concert: poster left, editable event information right. */
.home-sections #concerts { padding: clamp(22px, 2.6vw, 38px); }
.home-sections #concerts .next-concert {
  position: relative;
  display: grid;
  grid-template-columns: minmax(200px, 25%) minmax(0, 1fr);
  gap: clamp(24px, 3vw, 44px);
  align-items: center;
}
.home-sections #concerts .poster { width: 100%; max-width: 340px; margin: 0; }
.home-sections #concerts .poster > img { display: block; width: 100%; height: auto; max-height: 470px; object-fit: contain; }
.home-sections #concert-title {
  font-size: .9rem;
  line-height: 1.4;
  letter-spacing: .28em;
  margin: 0 0 10px;
}
.home-sections #concert-title::before { content: '★'; margin-right: 14px; }
.home-sections #concert-title::after { content: '★'; margin-left: 14px; }
.home-sections #concerts .gig { min-width: 0; padding-right: 60px; }
.home-sections #concerts .date { font-size: clamp(2.6rem, 5.8vw, 5.5rem); line-height: 1.1; }
.home-sections #concerts .date span { font-size: .58em; white-space: nowrap; }
.home-sections #concerts .gig-place { margin: 10px 0 20px; text-transform: uppercase; }
.home-sections #concerts .gig > p { font-size: 1rem; line-height: 1.7; margin-bottom: 18px; }
.home-sections #concerts .all-dates { margin-top: 14px; }
.concert-lightning { position: absolute; right: 0; top: 50%; transform: translateY(-50%); color: var(--pink); font: 900 100px/1 Impact, sans-serif; pointer-events: none; }
.concert-poster-default { border: 3px solid var(--cream); padding: 18px 14px 14px; text-align: center; background: #111009; }
.home-sections .concert-poster-default p { margin: 0; font-family: 'Drafts Condensed', Impact, sans-serif; font-weight: 700; text-transform: uppercase; }
.home-sections .concert-poster-default .poster-city { font-size: .7rem; letter-spacing: .2em; overflow-wrap: anywhere; }
.concert-poster-default .poster-logo { display: block; width: 46%; height: auto; margin: 0 auto 8px; clip-path: inset(3% 0 0 7%); }
.poster-illustration { width: 76%; margin: 0 auto; aspect-ratio: 1.12; overflow: hidden; border: 1px solid var(--cream); }
.poster-illustration img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: right; }
.home-sections .concert-poster-default .poster-tagline { font-size: .7rem; letter-spacing: .2em; margin: 5px 0; }
.home-sections .concert-poster-default .poster-date { background: var(--pink); color: #080808; padding: 9px 5px; font-size: 1rem; transform: rotate(-1deg); }
@media (max-width: 1000px) and (min-width: 701px) {
 .home-sections #concerts .next-concert { grid-template-columns: minmax(170px, 27%) minmax(0, 1fr); gap: 24px; }
 .home-sections #concerts .gig { padding-right: 0; }
 .concert-lightning { display: none; }
}
@media (max-width: 700px) {
 .home-sections #concerts .next-concert { grid-template-columns: 1fr; gap: 26px; }
 .home-sections #concerts .poster { max-width: 260px; margin: 0 auto; }
 .home-sections #concerts .gig { padding: 0; }
 .home-sections #concerts .gig-place span { display: block; margin-left: 0; }
 .concert-lightning { display: none; }
}
.concert-poster-default { color: var(--cream); }
.poster-illustration img { width: 115%; max-width: none; transform: translateX(-13.04%); }

/* Musician cards from reference 10.26.44. */
.home-sections #groupe .member { display: flex; flex-direction: column; }
.home-sections #groupe .member-photo { flex: none; border: 1px solid #302b20; }
.home-sections #groupe .member-photo img { display: block; width: 100%; height: 100%; object-fit: cover; }
.home-sections #groupe .member-caption { flex: 1; padding: 14px 4px 4px; text-align: center; }
.home-sections #groupe .member h3 { color: var(--pink); background: transparent; text-transform: uppercase; line-height: 1.15; margin: 0 0 10px; }
.home-sections #groupe .member strong { display: block; color: var(--cream); font-size: .9rem; line-height: 1.5; letter-spacing: .07em; }
.home-sections #groupe .member-caption::after { margin-top: 10px; font-size: 1.1rem; }
@media (max-width: 540px) {
 .home-sections #groupe .member strong { font-size: .75rem; letter-spacing: .03em; }
 .home-sections #groupe .member-caption { padding-inline: 0; }
}

/* Compact musician cards: one row on desktop, two columns below. */
@media (min-width: 1100px) {
 .home-sections #groupe .about-grid { grid-template-columns: minmax(280px, 30%) minmax(0, 1fr); gap: 28px; }
 .home-sections #groupe .about-copy { padding: 0; }
 .home-sections #groupe .about-copy h2 { font-size: clamp(2rem, 2.8vw, 2.75rem); }
 .home-sections #groupe .members { grid-template-columns: repeat(4, minmax(0, 240px)); gap: 12px; }
 .home-sections #groupe .member { padding: 9px; }
 .home-sections #groupe .member-caption { padding: 12px 0 2px; }
 .home-sections #groupe .member h3 { font-size: 1.5rem; margin-bottom: 8px; }
 .home-sections #groupe .member strong { font-size: .8rem; letter-spacing: .03em; min-height: 2.8em; line-height: 1.4; }
 .home-sections #groupe .member-caption::after { margin-top: 6px; }
}

/* Editable live references, including events with no known date. */
.live-references { list-style: none; padding: 0; margin: 22px 0 0; }
.live-references li { position: relative; padding: 0 0 0 26px; margin-bottom: 26px; }
.live-references li::before { content: 'ϟ'; position: absolute; left: 0; top: 0; color: var(--cream); font: 700 1.6rem/1 Impact, sans-serif; }
.reference-place { display: block; font: 700 1rem/1.5 'Drafts Condensed', sans-serif; text-transform: uppercase; overflow-wrap: anywhere; }
.reference-type { display: block; margin-top: 12px; text-align: right; color: var(--border); font: 600 .8rem/1.4 'Drafts Condensed', sans-serif; text-transform: uppercase; letter-spacing: .1em; }
.home-sections #historique .past-note { margin-top: 22px; }