/* irishbands.co.uk
   Tesla style: small interface, one accent, 4px radius, 8px panels, fluid gutter column.
   Accent swapped to Irish green and used on primary buttons only. Gold appears in the
   welcome strip, the knot border and the logo, as approved. */

@font-face { font-family: "Archivo"; font-style: normal; font-weight: 400; font-display: swap; src: url(/fonts/archivo-400.woff2) format("woff2"); }
@font-face { font-family: "Archivo"; font-style: normal; font-weight: 500; font-display: swap; src: url(/fonts/archivo-500.woff2) format("woff2"); }

:root {
  --ink: #171a20;
  --body: #393c41;
  --muted: #5c5e62;
  --paper: #ffffff;
  --panel: #f4f4f4;
  --panel-hover: #eeeeee;
  --accent: #0b7a48;
  --accent-hover: #086039;
  --green: #0f5a37;
  --green-deep: #0a3f27;
  --green-ink: #08321f;
  --gold: #d9b45a;
  --gold-soft: #e8cf8a;
  --mint: #cfe3d6;
  --focus: #8e8e8e;
  --hairline: #e3e3e3;
  --gutter: 48px;
  --gap: 24px;
  --r: 4px;
  --r-panel: 8px;
  --font: "Archivo", helvetica, arial, sans-serif;
}
@media (max-width: 1199px) { :root { --gutter: 36px; } }
@media (max-width: 899px)  { :root { --gutter: 32px; } }
@media (max-width: 599px)  { :root { --gutter: 16px; } }

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
html, body { margin: 0; background: var(--paper); color: var(--ink); }
body { font: 400 14px/20px var(--font); padding-bottom: 60px; }
h1, h2, h3, p, ul, dl, dd, figure { margin: 0; }
img { max-width: 100%; height: auto; display: block; }
a { color: inherit; }
[hidden] { display: none !important; }
.container { width: calc(100% - var(--gutter) * 2); max-width: 1344px; margin: 0 auto; }
.visually-hidden { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.skip { position: absolute; left: 12px; top: -60px; z-index: 1000; background: var(--paper); color: var(--ink); padding: 10px 16px; border-radius: var(--r); font-weight: 500; }
.skip:focus { top: 12px; }
.link { text-decoration: none; box-shadow: 0 2px 0 -1px currentColor; }
a:focus-visible, button:focus-visible:not(.btn), summary:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; border-radius: var(--r); }

/* welcome strip */
.promo {
  min-height: 44px; display: flex; align-items: center; justify-content: center; gap: 4px 12px; flex-wrap: wrap;
  padding: 8px var(--gutter); background: linear-gradient(90deg, #e4c678, #f2e5c2 50%, #e8d199);
  color: var(--body); font-size: 14px; text-align: center;
}
.promo strong { font-weight: 500; color: var(--ink); }

/* green band: header plus hero */
.band {
  position: relative; color: #fff; overflow: hidden; padding-bottom: 28px;
  background:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='96' height='96' viewBox='0 0 96 96'%3E%3Cg fill='%23ffffff' fill-opacity='.05'%3E%3Cg transform='translate(24 24) rotate(-12)'%3E%3Ccircle cx='0' cy='-6' r='6'/%3E%3Ccircle cx='-6.5' cy='2' r='6'/%3E%3Ccircle cx='6.5' cy='2' r='6'/%3E%3Cpath d='M-1 4h2l2 12h-2z'/%3E%3C/g%3E%3Cg transform='translate(72 70) rotate(18)'%3E%3Ccircle cx='0' cy='-6' r='6'/%3E%3Ccircle cx='-6.5' cy='2' r='6'/%3E%3Ccircle cx='6.5' cy='2' r='6'/%3E%3Cpath d='M-1 4h2l2 12h-2z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E"),
    radial-gradient(ellipse at 50% 0%, #1d7a4c 0%, transparent 60%),
    linear-gradient(var(--green), var(--green-deep));
}
.band::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 28px;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='36' height='28' viewBox='0 0 36 28'%3E%3Cg fill='none' stroke='%23d9b45a' stroke-width='2.5'%3E%3Ccircle cx='18' cy='14' r='10'/%3E%3Ccircle cx='0' cy='14' r='10'/%3E%3Ccircle cx='36' cy='14' r='10'/%3E%3C/g%3E%3C/svg%3E") center / 36px 28px repeat-x, var(--green-ink);
  border-top: 1px solid rgba(217, 180, 90, .35);
}

.site-header { position: relative; z-index: 20; height: 64px; display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 0 var(--gutter); }
.wordmark { display: inline-flex; align-items: center; text-decoration: none; }
.wordmark img { width: 169px; height: 48px; }
.nav ul { display: flex; list-style: none; padding: 0; margin: 0; }
.nav a { height: 44px; display: inline-flex; align-items: center; padding: 0 12px; border-radius: var(--r); font-weight: 500; text-decoration: none; color: #fff; transition: background-color .33s ease; }
.nav a:hover, .nav a[aria-current="page"] { background: rgba(255, 255, 255, .12); }
.menu-btn { display: none; height: 44px; padding: 0 16px; border: 0; border-radius: var(--r); background: rgba(255, 255, 255, .12); color: #fff; font: 500 14px/16.8px var(--font); cursor: pointer; }
@media (max-width: 1199px) {
  .menu-btn { display: inline-block; }
  .nav { display: none; position: absolute; top: 60px; right: var(--gutter); left: var(--gutter); background: var(--paper); border-radius: var(--r-panel); box-shadow: 0 8px 16px rgba(0, 0, 0, .16); padding: 8px; }
  .nav.is-open { display: block; }
  .nav ul { flex-direction: column; }
  .nav a { color: var(--ink); width: 100%; }
  .nav a:hover, .nav a[aria-current="page"] { background: var(--panel); }
}

.hero { position: relative; z-index: 1; text-align: center; padding: 32px var(--gutter) 56px; display: grid; justify-items: center; }
.hero__eyebrow { font: 500 14px/20px var(--font); color: var(--gold-soft); margin-bottom: 12px; }
.hero__eyebrow span + span { color: var(--mint); font-weight: 400; }
.hero h1 { font: 500 56px/56px var(--font); text-wrap: balance; margin-bottom: 12px; }
.hero__offer { font: 400 20px/28px var(--font); color: #e4efe8; max-width: 34em; text-wrap: balance; }
.hero--page { padding: 20px var(--gutter) 48px; }
.hero--page h1 { font-size: 48px; line-height: 56px; }
.crumbs { font-size: 12px; line-height: 18px; color: var(--mint); margin-bottom: 12px; }
.crumbs a { color: #fff; text-decoration: none; box-shadow: 0 2px 0 -1px currentColor; }
@media (max-width: 599px) {
  .hero h1, .hero--page h1 { font-size: 40px; line-height: 48px; }
  .hero__offer { font-size: 17px; line-height: 24px; }
  .hero { padding: 24px var(--gutter) 44px; }
}

/* quote form */
.quote-wrap { width: min(920px, 100%); margin-top: 32px; scroll-margin-top: 24px; }
.quote {
  display: grid; grid-template-columns: 1.3fr 1fr 1.3fr auto; gap: 8px; padding: 8px;
  background: var(--paper); border-radius: var(--r-panel); box-shadow: 0 8px 16px rgba(0, 0, 0, .16); text-align: left;
}
.field { display: flex; flex-direction: column; justify-content: center; min-height: 56px; padding: 6px 14px; border-radius: var(--r); background: var(--panel); transition: box-shadow .25s, background-color .25s; min-width: 0; }
.field:focus-within { box-shadow: inset 0 0 0 2px var(--ink); background: var(--paper); }
.field label { font-size: 12px; line-height: 16px; color: var(--muted); }
.field input { width: 100%; border: 0; padding: 0; background: transparent; color: var(--ink); font: 500 14px/24px var(--font); outline: none; min-width: 0; }
.field input::placeholder { color: #8a8c90; font-weight: 400; }
.quote .btn { height: auto; min-height: 56px; padding: 0 28px; }
.quote-note { margin-top: 16px; font-size: 12px; line-height: 18px; color: var(--mint); text-align: center; }
.quote-status { margin-top: 12px; font: 500 14px/20px var(--font); color: var(--gold-soft); text-align: center; }
@media (max-width: 899px) {
  .quote { grid-template-columns: 1fr 1fr; }
  .field--email { grid-column: 1 / -1; }
  .quote .btn { grid-column: 1 / -1; min-height: 48px; }
}
@media (max-width: 599px) { .quote { grid-template-columns: 1fr; } }

/* buttons */
.btn {
  display: inline-grid; place-items: center; height: 40px; padding: 0 20px; border: 3px solid transparent; border-radius: var(--r);
  background: var(--accent); color: #fff; font: 500 14px/16.8px var(--font); text-decoration: none; cursor: pointer; white-space: nowrap;
  transition: background-color .33s ease, color .33s ease, box-shadow .33s ease;
}
.btn:hover { background: var(--accent-hover); }
.btn:focus-visible { outline: none; box-shadow: inset 0 0 0 2px currentColor; }
.btn--secondary { background: var(--paper); color: var(--body); }
.btn--secondary:hover { background: var(--panel-hover); }
.btn--tertiary { background: var(--panel); color: var(--ink); }
.btn--tertiary:hover { background: var(--panel-hover); }
.btn-row { display: flex; gap: 8px; flex-wrap: wrap; }

/* sections */
.section { padding-block: 48px; }
@media (max-width: 899px) { .section { padding-block: 32px; } }
.section__head { display: flex; justify-content: space-between; align-items: end; gap: 16px 24px; flex-wrap: wrap; margin-bottom: 24px; }
.ga { display: block; font-size: 12px; line-height: 18px; color: var(--muted); margin-bottom: 4px; }
.section h2, .h2 { font: 500 34px/44px var(--font); text-wrap: balance; }
.section__sub { font: 400 20px/28px var(--font); color: var(--muted); margin-top: 4px; }
@media (max-width: 599px) { .section h2, .h2 { font-size: 28px; line-height: 36px; } .section__sub { font-size: 17px; line-height: 24px; } }
.count { font-size: 12px; color: var(--muted); margin: -8px 0 16px; }

/* band cards */
.grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--gap); }
@media (max-width: 1023px) { .grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 599px)  { .grid { grid-template-columns: minmax(0, 1fr); } }
.card { display: flex; flex-direction: column; background: var(--panel); border-radius: var(--r-panel); overflow: hidden; }
.media { position: relative; height: 220px; background-color: #123; background-size: cover; background-position: center bottom; }
.media::after { content: ""; position: absolute; inset: 40% 0 0; background: linear-gradient(rgba(0, 0, 0, 0), rgba(0, 0, 0, .72)); }
.media__label { position: absolute; left: 20px; bottom: 16px; z-index: 1; color: #fff; font: 500 17px/20px var(--font); }
.media__tag { position: absolute; right: 12px; top: 12px; z-index: 1; font-size: 12px; line-height: 18px; color: #fff; background: rgba(0, 0, 0, .45); padding: 2px 8px; border-radius: var(--r); }
.card__body { display: flex; flex-direction: column; flex: 1 1 auto; padding: 24px; gap: 8px; }
.card h3 { font: 500 24px/28px var(--font); }
.card__line { color: var(--muted); }
.specs { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; margin: 12px 0 4px; padding-top: 16px; border-top: 1px solid var(--hairline); }
.specs dt { font-size: 12px; line-height: 18px; color: var(--muted); }
.specs dd { font: 500 17px/20px var(--font); }
.card__action { margin-top: auto; padding-top: 16px; display: flex; gap: 8px; flex-wrap: wrap; }
.card--soon .media { display: grid; place-items: center; background: linear-gradient(160deg, #e9eee9, #dfe7e1); }
.card--soon .media::after { display: none; }
.card--soon .media img { width: 72px; height: 72px; opacity: .55; }
.card--soon h3 { color: var(--muted); }

/* tones for artwork panels */
.t-glen  { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 400 220' preserveAspectRatio='none'%3E%3Cpath d='M0 150 Q80 110 160 140 T320 125 T400 135 V220 H0Z' fill='%232b6b45'/%3E%3Cpath d='M0 180 Q120 140 220 175 T400 165 V220 H0Z' fill='%23174a2e'/%3E%3C/svg%3E"), linear-gradient(#5f8fa8, #a9c3c9); }
.t-pub   { background-image: radial-gradient(circle at 30% 40%, #f0b45a 0 6%, transparent 30%), radial-gradient(circle at 72% 35%, #e79a3e 0 5%, transparent 28%), linear-gradient(160deg, #5a3417, #24140a); }
.t-barn  { background-image: repeating-linear-gradient(90deg, rgba(0, 0, 0, .12) 0 2px, transparent 2px 46px), radial-gradient(circle at 50% 20%, #ffd98a 0 4%, transparent 40%), linear-gradient(#6b4a2b, #2e1f12); }
.t-dusk  { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 400 220' preserveAspectRatio='none'%3E%3Cpath d='M0 140 Q100 100 200 135 T400 120 V220 H0Z' fill='%231f3d2c'/%3E%3C/svg%3E"), linear-gradient(#c97b4a, #f1c27d 60%, #e8a462); }
.t-night { background-image: radial-gradient(circle at 78% 22%, #f4f1dc 0 3%, transparent 4%), url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 400 220' preserveAspectRatio='none'%3E%3Cpath d='M0 155 Q140 120 260 150 T400 140 V220 H0Z' fill='%23112a1d'/%3E%3C/svg%3E"), linear-gradient(#0f2238, #24496b); }
.t-green { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 400 220' preserveAspectRatio='none'%3E%3Cpath d='M0 110 Q60 80 140 105 T300 95 T400 100 V220 H0Z' fill='%234f8a4c'/%3E%3Cpath d='M0 160 Q140 125 260 160 T400 150 V220 H0Z' fill='%232a5e33'/%3E%3C/svg%3E"), linear-gradient(#8fb3c4, #d3e0d9); }
.t-stage { background-image: radial-gradient(ellipse at 50% 0%, rgba(255, 240, 200, .75), transparent 55%), linear-gradient(#1c3550, #0b1622); }

/* panels */
.panel-row { display: grid; grid-template-columns: 1fr 1fr; gap: var(--gap); }
@media (max-width: 599px) { .panel-row { grid-template-columns: 1fr; } }
.panel { display: grid; grid-template-columns: minmax(0, 1fr) 200px; min-height: 220px; background: var(--panel); border-radius: var(--r-panel); overflow: hidden; }
.panel__copy { padding: 32px 24px 32px 48px; display: flex; flex-direction: column; }
.panel h2 { font: 500 34px/44px var(--font); margin-bottom: 8px; }
.panel p { font: 400 20px/28px var(--font); color: var(--muted); margin-bottom: 24px; }
.panel .btn { align-self: flex-start; margin-top: auto; }
.panel__img { border-radius: 0 var(--r-panel) var(--r-panel) 0; background-size: cover; background-position: center bottom; }
@media (max-width: 1023px) {
  .panel { grid-template-columns: 1fr; }
  .panel__img { display: none; }
  .panel__copy { padding: 32px; }
  .panel h2 { font-size: 28px; line-height: 36px; }
  .panel p { font-size: 17px; line-height: 24px; }
}

/* article cards: carousel on home, grid on the index */
.track { display: grid; grid-auto-flow: column; grid-auto-columns: min(560px, 78%); gap: var(--gap); overflow-x: auto; scroll-snap-type: x mandatory; padding-bottom: 8px; scrollbar-width: none; }
.track::-webkit-scrollbar { display: none; }
@media (max-width: 599px) { .track { grid-auto-columns: 86%; gap: 16px; } }
.article-card { scroll-snap-align: start; position: relative; height: 400px; border-radius: var(--r-panel); overflow: hidden; color: #fff; display: flex; flex-direction: column; justify-content: flex-end; padding: 28px; background-size: cover; background-position: center bottom; }
.article-card::before { content: ""; position: absolute; inset: 30% 0 0; background: linear-gradient(rgba(0, 0, 0, 0), rgba(0, 0, 0, .8)); }
.article-card > * { position: relative; }
.article-card__cat { font: 500 17px/20px var(--font); margin-bottom: 8px; }
.article-card h3 { font: 500 28px/36px var(--font); text-wrap: balance; margin-bottom: 8px; }
.article-card p { font-size: 14px; line-height: 20px; color: #e6e6e6; max-width: 46ch; margin-bottom: 20px; }
.article-card .btn { align-self: flex-start; }
@media (max-width: 599px) { .article-card { height: 400px; padding: 20px; } .article-card h3 { font-size: 23px; line-height: 28px; } }
.article-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--gap); }
.article-grid .article-card { height: 360px; }
@media (max-width: 699px) { .article-grid { grid-template-columns: minmax(0, 1fr); } }
.arrows { display: flex; gap: 8px; }
.arrow { width: 44px; height: 44px; border: 0; border-radius: var(--r); background: var(--panel); color: var(--ink); cursor: pointer; display: grid; place-items: center; transition: background-color .33s; }
.arrow:hover { background: var(--panel-hover); }
.arrow svg { fill: currentColor; }

/* long form copy */
.prose { max-width: 680px; font-size: 17px; line-height: 28px; color: var(--body); }
.prose > * + * { margin-top: 16px; }
.prose h2 { font: 500 28px/36px var(--font); color: var(--ink); margin-top: 40px; text-wrap: balance; }
.prose h3 { font: 500 20px/28px var(--font); color: var(--ink); margin-top: 28px; }
.prose ul { padding-left: 20px; }
.prose li + li { margin-top: 8px; }
.prose a:not(.btn) { color: var(--accent); text-decoration: none; box-shadow: 0 2px 0 -1px currentColor; }
.prose strong { color: var(--ink); font-weight: 500; }
.lede { font: 400 20px/30px var(--font); color: var(--ink); }
.layout { display: grid; grid-template-columns: minmax(0, 1fr) 320px; gap: 48px; align-items: start; }
@media (max-width: 999px) { .layout { grid-template-columns: minmax(0, 1fr); } }
.aside { position: sticky; top: 24px; background: var(--panel); border-radius: var(--r-panel); padding: 28px; display: grid; gap: 12px; }
.aside h2 { font: 500 24px/28px var(--font); }
.aside p { color: var(--muted); }
.meta { font-size: 12px; line-height: 18px; color: var(--muted); }

/* features */
.features { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--gap); }
@media (max-width: 899px) { .features { grid-template-columns: minmax(0, 1fr); } }
.feature { background: var(--panel); border-radius: var(--r-panel); padding: 28px; display: flex; flex-direction: column; gap: 8px; }
.feature h3 { font: 500 20px/28px var(--font); }
.feature p { color: var(--muted); }

/* FAQ */
.faq { max-width: 820px; display: grid; gap: 8px; }
.faq details { background: var(--panel); border-radius: var(--r-panel); }
.faq summary { list-style: none; cursor: pointer; padding: 20px 56px 20px 24px; font: 500 17px/24px var(--font); position: relative; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: ""; position: absolute; right: 24px; top: 50%; width: 10px; height: 10px; border-right: 2px solid var(--ink); border-bottom: 2px solid var(--ink); transform: translateY(-70%) rotate(45deg); transition: transform .25s; }
.faq details[open] summary::after { transform: translateY(-30%) rotate(225deg); }
.faq .answer { padding: 0 24px 24px; color: var(--body); font-size: 15px; line-height: 24px; display: grid; gap: 12px; max-width: 70ch; }

/* band page */
.split { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); gap: 48px; align-items: start; }
@media (max-width: 999px) { .split { grid-template-columns: minmax(0, 1fr); } }
.spec-table { display: grid; gap: 0; background: var(--panel); border-radius: var(--r-panel); padding: 8px 24px; }
.spec-table div { display: grid; grid-template-columns: 140px minmax(0, 1fr); gap: 16px; padding: 14px 0; border-bottom: 1px solid var(--hairline); }
.spec-table div:last-child { border-bottom: 0; }
.spec-table dt { color: var(--muted); }
.spec-table dd { font-weight: 500; }
.songs { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--gap); }
@media (max-width: 699px) { .songs { grid-template-columns: minmax(0, 1fr); } }
.songs ul { list-style: none; padding: 0; background: var(--panel); border-radius: var(--r-panel); padding: 8px 24px; }
.songs li { padding: 12px 0; border-bottom: 1px solid var(--hairline); font-size: 15px; }
.songs li:last-child { border-bottom: 0; }
.songs h3 { font: 500 17px/20px var(--font); margin-bottom: 12px; }

/* video facade and lightbox */
.video-embed { position: relative; aspect-ratio: 16 / 9; border-radius: var(--r-panel); overflow: hidden; background: var(--green-deep); }
.video-embed__poster { position: absolute; inset: 0; display: grid; place-items: center; text-align: center; color: #fff; padding: 24px;
  background: radial-gradient(ellipse at 50% 30%, rgba(255, 220, 150, .35), transparent 60%), linear-gradient(160deg, #1b6a43, #08321f); }
.video-embed__title { font: 500 24px/30px var(--font); margin-top: 72px; }
.video-embed__play { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; background: transparent; cursor: pointer; }
.video-embed__play::before { content: ""; position: absolute; left: 50%; top: 42%; width: 76px; height: 76px; margin: -38px 0 0 -38px; border-radius: 50%; background: rgba(255, 255, 255, .92); }
.video-embed__play::after { content: ""; position: absolute; left: 50%; top: 42%; margin: -14px 0 0 -8px; border-style: solid; border-width: 14px 0 14px 24px; border-color: transparent transparent transparent var(--green); }
.video-embed__play:focus-visible { outline: 3px solid var(--gold); outline-offset: -6px; }
.lightbox { position: fixed; inset: 0; z-index: 1000; background: rgba(0, 0, 0, .86); display: flex; align-items: center; justify-content: center; padding: 56px 16px 16px; }
.lightbox[hidden] { display: none; }
.lightbox__stage { width: min(1100px, 100%); aspect-ratio: 16 / 9; background: #000; border-radius: var(--r-panel); overflow: hidden; }
.lightbox__stage iframe { width: 100%; height: 100%; border: 0; display: block; }
.lightbox__close { position: absolute; top: 12px; right: 12px; height: 44px; padding: 0 16px; border: 0; border-radius: var(--r); background: var(--paper); color: var(--ink); font: 500 14px/16.8px var(--font); cursor: pointer; }
.lightbox__note { color: #fff; text-align: center; max-width: 40ch; padding: 24px; }

/* footer and fixed bar */
.site-footer { border-top: 1px solid var(--hairline); padding: 32px var(--gutter) 40px; display: grid; gap: 16px; justify-items: center; text-align: center; }
.site-footer img { width: 169px; height: 48px; }
.site-footer ul { list-style: none; padding: 0; display: flex; justify-content: center; flex-wrap: wrap; gap: 8px 20px; font: 500 12px/20px var(--font); }
.site-footer a { color: var(--muted); text-decoration: none; }
.site-footer a:hover { color: var(--ink); }
.site-footer small { font-size: 12px; color: var(--muted); }
.sticky-bar {
  position: fixed; inset: auto 0 0 0; z-index: 10; min-height: 60px; display: flex; align-items: center; justify-content: center;
  padding: 10px 24px calc(10px + env(safe-area-inset-bottom, 0px)); background: var(--paper); box-shadow: 0 -2px 8px rgba(0, 0, 0, .1);
}
.sticky-bar .btn { width: 236px; display: inline-flex; gap: 8px; justify-content: center; align-items: center; }
.sticky-bar svg { fill: currentColor; }
@media (max-width: 599px) { .sticky-bar .btn { width: 100%; } body { padding-bottom: 68px; } }

.error-page { min-height: 40vh; display: grid; place-items: center; text-align: center; gap: 16px; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; scroll-behavior: auto !important; }
}

/* photography inside cards and the video poster */
.media picture img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.video-embed__poster--photo { padding: 0; }
.video-embed__poster--photo picture img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.video-embed__poster--photo::after { content: ""; position: absolute; inset: 0; background: linear-gradient(rgba(0, 0, 0, .15), rgba(0, 0, 0, .6)); }
.video-embed__poster--photo .video-embed__title { position: absolute; left: 0; right: 0; bottom: 24px; margin: 0; z-index: 1; }

/* directory filter and band photos */
.tabs { display: inline-flex; gap: 4px; padding: 4px; border-radius: var(--r-panel); background: rgba(0, 0, 0, .05); max-width: 100%; overflow-x: auto; }
.tab { height: 40px; padding: 0 16px; border: 0; border-radius: var(--r); background: transparent; color: var(--muted); font: 500 14px/16.8px var(--font); cursor: pointer; white-space: nowrap; transition: background-color .25s, color .25s; }
.tab[aria-pressed="true"] { background: var(--paper); color: var(--ink); }
.card[hidden] { display: none !important; }
.band-photo { border-radius: var(--r-panel); overflow: hidden; }
.band-photo img { width: 100%; height: auto; display: block; }

/* Irish Bands rating */
.rating { display: flex; align-items: center; gap: 8px; font-size: 12px; line-height: 18px; color: var(--muted); }
.rating strong { font: 500 14px/18px var(--font); color: var(--ink); }
.stars { position: relative; display: inline-block; font-size: 15px; line-height: 1; letter-spacing: 2px; color: #d5d5d5; }
.stars::before { content: "★★★★★"; position: absolute; left: 0; top: 0; width: var(--r); overflow: hidden; white-space: nowrap; color: var(--gold); }

/* article photography */
.article-card__img img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.article-card > .article-card__img { position: absolute; inset: 0; }
.article-card::before { z-index: 1; }
.article-card > *:not(.article-card__img) { z-index: 2; }
.article-photo { margin-bottom: 8px; }

/* featured band */
.featured { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); background: var(--panel); border-radius: var(--r-panel); overflow: hidden; margin-bottom: 32px; }
.featured__media { position: relative; display: block; min-height: 380px; }
.featured__media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.featured__body { padding: 40px; display: flex; flex-direction: column; gap: 12px; }
.featured__tag { align-self: flex-start; font: 500 12px/18px var(--font); color: var(--green-ink); background: var(--gold-soft); padding: 3px 10px; border-radius: var(--r); }
.featured h3 { font: 500 34px/44px var(--font); }
.featured p:not(.rating) { color: var(--body); font-size: 15px; line-height: 24px; }
.featured .card__action { margin-top: auto; padding-top: 12px; }
@media (max-width: 899px) { .featured { grid-template-columns: 1fr; } .featured__media { min-height: 260px; } .featured__body { padding: 28px; } .featured h3 { font-size: 28px; line-height: 36px; } }

/* panel photos (replace the old drawn placeholders) */
.panel { grid-template-columns: minmax(0, 1fr) 280px; }
.panel__img { position: relative; overflow: hidden; background: var(--panel-hover); }
.panel__img picture, .panel__img img { display: block; width: 100%; height: 100%; }
.panel__img img { position: absolute; inset: 0; object-fit: cover; }
@media (max-width: 1199px) { .panel { grid-template-columns: minmax(0, 1fr) 200px; } }
@media (max-width: 1023px) {
  .panel { grid-template-columns: 1fr; }
  .panel__img { display: block; order: -1; aspect-ratio: 3 / 2; max-height: 220px; width: 100%; border-radius: var(--r-panel) var(--r-panel) 0 0; }
}

/* set lists */
.setlist__count { font: 500 14px/20px var(--font); color: var(--muted); white-space: nowrap; align-self: flex-end; }
.setlist { columns: 3 280px; column-gap: var(--gap); background: var(--panel); border-radius: var(--r-panel); padding: 32px 32px 8px; }
.setlist__group { break-inside: avoid-column; margin-bottom: 24px; }
.setlist__group h3 { font: 500 17px/24px var(--font); margin-bottom: 8px; padding-bottom: 8px; border-bottom: 2px solid var(--gold); display: inline-block; }
.setlist ol { list-style: none; margin: 0; padding: 0; }
.setlist li { padding: 7px 0; border-bottom: 1px solid var(--hairline); font-size: 15px; line-height: 20px; break-inside: avoid; }
.setlist li:last-child { border-bottom: 0; }
.setlist__artist { display: block; color: var(--muted); font-size: 13px; line-height: 18px; }
@media (max-width: 599px) { .setlist { padding: 24px 20px 4px; } }

/* thank you page */
.steps { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--gap); }
@media (max-width: 899px) { .steps { grid-template-columns: minmax(0, 1fr); } }
.steps li { background: var(--panel); border-radius: var(--r-panel); padding: 32px; }
.steps__n { display: inline-grid; place-items: center; width: 36px; height: 36px; border-radius: 50%; background: var(--gold); color: var(--ink); font: 500 17px/1 var(--font); margin-bottom: 16px; }
.steps h3 { font: 500 22px/28px var(--font); margin-bottom: 8px; }
.steps p { color: var(--muted); font-size: 16px; line-height: 24px; }
.thanks-note { margin-top: 24px; color: var(--muted); }
.thanks-note a { color: var(--ink); text-decoration: underline; }

/* band page quote panel (form within the page, not the header) */
.quote-panel { position: relative; overflow: hidden; border-radius: var(--r-panel); padding: 48px; color: #fff;
  background: radial-gradient(ellipse at 15% 0%, rgba(255,255,255,.08), transparent 60%), linear-gradient(var(--green), var(--green-deep)); }
.quote-panel::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 10px; background: var(--gold); opacity: .9; }
.quote-panel__copy { max-width: 680px; }
.quote-panel .ga { color: var(--gold-soft); }
.quote-panel h2 { color: #fff; }
.quote-panel__copy p { font: 400 18px/28px var(--font); color: rgba(255,255,255,.86); margin-top: 8px; }
.quote-panel .quote-wrap { margin-top: 28px; width: min(920px, 100%); }
.quote-panel .quote-note { color: rgba(255,255,255,.8); }
@media (max-width: 599px) { .quote-panel { padding: 32px 20px; } }

/* long form guide pages */
.guide > h2 { scroll-margin-top: 24px; }
.guide-fig { margin: 32px 0; }
.guide-fig img { display: block; width: 100%; height: auto; border-radius: var(--r-panel); }
.guide-fig figcaption { font-size: 14px; line-height: 20px; color: var(--muted); margin-top: 10px; }
.prose .checklist { list-style: none; padding: 0; display: grid; gap: 0; background: var(--panel); border-radius: var(--r-panel); padding: 8px 24px; }
.prose .checklist li { position: relative; padding: 14px 0 14px 36px; border-bottom: 1px solid var(--hairline); margin: 0; }
.prose .checklist li:last-child { border-bottom: 0; }
.prose .checklist li::before { content: ""; position: absolute; left: 0; top: 15px; width: 22px; height: 22px; border-radius: 50%; background: var(--accent)
  url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M9.5 16.2 5.3 12l-1.4 1.4 5.6 5.6 11-11-1.4-1.4z' fill='%23fff'/%3E%3C/svg%3E") center / 16px no-repeat; }
.timeline { list-style: none; padding: 0; margin-top: 24px; border-left: 2px solid var(--gold); }
.timeline li { display: grid; grid-template-columns: 88px minmax(0, 1fr); gap: 16px; padding: 0 0 20px 20px; position: relative; margin: 0; }
.timeline li::before { content: ""; position: absolute; left: -7px; top: 6px; width: 12px; height: 12px; border-radius: 50%; background: var(--paper); border: 2px solid var(--gold); }
.timeline__time { font: 500 15px/24px var(--font); color: var(--accent); }
.prose .timeline h3 { margin: 0; font-size: 17px; line-height: 24px; }
.timeline p { margin: 2px 0 0; font-size: 16px; line-height: 24px; }
.prose .timeline__note { font-size: 14px; line-height: 20px; color: var(--muted); }
@media (max-width: 599px) { .timeline li { grid-template-columns: 1fr; gap: 2px; } }
.prose .tip { background: var(--mint); border-radius: var(--r-panel); padding: 24px 28px; border-left: 4px solid var(--accent); }
.prose .tip h3 { margin-top: 0; }
.prose .tip p { margin-top: 8px; }
.mini-cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 12px; }
.mini-cards > div { background: var(--panel); border-radius: var(--r-panel); padding: 20px; }
.prose .mini-cards h3 { margin-top: 0; font-size: 17px; line-height: 24px; }
.mini-cards p { margin-top: 6px; font-size: 15px; line-height: 22px; }
.toc h2 { font: 500 14px/20px var(--font); text-transform: uppercase; letter-spacing: .06em; color: var(--muted); margin-bottom: 8px; }
.toc ol { list-style: none; padding: 0; margin: 0; counter-reset: toc; }
.toc li { counter-increment: toc; }
.toc a { display: grid; grid-template-columns: 24px 1fr; padding: 6px 0; font-size: 15px; line-height: 20px; color: var(--ink); text-decoration: none; }
.toc a::before { content: counter(toc); color: var(--gold); font-weight: 500; }
.toc a:hover { color: var(--accent); }
.aside__cta { border-top: 1px solid var(--hairline); padding-top: 16px; margin-top: 8px; display: grid; gap: 10px; }
.aside__cta h2 { font: 500 22px/28px var(--font); }
.aside__cta .btn { justify-self: start; }
@media (max-width: 999px) { .aside .toc { display: none; } .aside__cta { border-top: 0; padding-top: 0; margin-top: 0; } }
.article-row { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--gap); }
.article-row .article-card { height: 380px; }
@media (max-width: 999px) { .article-row { grid-template-columns: minmax(0, 1fr); } .article-row .article-card { height: 340px; } }

/* band page form: five fields plus button */
.quote--band { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.quote--band .btn { min-height: 56px; }
.field__opt { color: var(--muted); font-weight: 400; }
@media (max-width: 899px) { .quote--band { grid-template-columns: 1fr 1fr; } .quote--band .btn { grid-column: auto; } }
@media (max-width: 599px) { .quote--band { grid-template-columns: 1fr; } }
.quote-panel .quote-note { text-align: left; }

/* footer company details and contact page */
.site-footer__contact { font-size: 14px; margin: 4px 0 8px; }
.site-footer__contact a { color: var(--ink); text-decoration: none; }
.site-footer__contact a:hover { color: var(--accent); }
.site-footer small { display: block; max-width: 720px; margin: 0 auto; line-height: 18px; }
.contact-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--gap); }
@media (max-width: 899px) { .contact-grid { grid-template-columns: minmax(0, 1fr); } }
.contact-card { display: grid; gap: 6px; align-content: start; background: var(--panel); border-radius: var(--r-panel); padding: 28px; color: var(--ink); text-decoration: none; transition: background-color .2s; }
a.contact-card:hover { background: var(--panel-hover); }
.contact-card__label { font-size: 12px; line-height: 16px; color: var(--muted); text-transform: uppercase; letter-spacing: .06em; }
.contact-card__value { font: 500 20px/28px var(--font); overflow-wrap: anywhere; }

/* draft bands without a photo yet */
.photo-pending { position: absolute; inset: 0; display: grid; place-content: center; justify-items: center; gap: 10px;
  background: linear-gradient(var(--green), var(--green-deep)); color: rgba(255,255,255,.85); font: 500 14px/20px var(--font); }
.photo-pending img { width: 64px; height: 64px; filter: brightness(0) invert(1); opacity: .85; }
.band-photo .photo-pending { position: relative; aspect-ratio: 3 / 2; border-radius: var(--r-panel); }
.band-photo .photo-pending img { width: 64px; height: 64px; }