/* ==================================================================
   ASTRA ENSEMBLE — Design System
   Air spacing (one idea per band, huge gaps, modest type)
   + Cool Stone palette and selective asymmetry.
   Type: Newsreader (editorial serif) + Libre Franklin (functional).
   ================================================================== */


:root{
  --ink:      #15181c;
  --slate:    #222a32;
  --paper:    #f4f4f2;
  --paper-2:  #eaebe8;
  --grey:     #63676b;
  --bronze:   #9a7440;      /* as approved — underlines, decoration */
  --bronze-tx:#7d5c2b;      /* small text on paper only */
  --bronze-lt:#c79f66;

  --on-ink:   rgba(244,244,242,.72);
  --on-paper: rgba(21,24,28,.66);
  --hair:     rgba(21,24,28,.13);
  --hair-lt:  rgba(244,244,242,.18);

  --serif: 'Newsreader', Georgia, serif;
  --sans:  'Libre Franklin', Helvetica, Arial, sans-serif;

  /* the spacing system is the design */
  --air-xl: clamp(4rem, 8vh, 6.5rem);
  --air-l:  clamp(2.25rem, 4vh, 3.25rem);
  --air-m:  1.75rem;
  --air-s:  1rem;

  --measure: 42rem;
  --gutter: clamp(1.25rem, 4vw, 4rem);
  --max: min(90rem, 92vw);
}

*,*::before,*::after{box-sizing:border-box;}
html{-webkit-text-size-adjust:100%; scroll-behavior:smooth;}
body{
  margin:0; background:var(--paper); color:var(--ink);
  font-family:var(--sans); font-weight:400; font-size:1.0625rem; line-height:1.8;
  -webkit-font-smoothing:antialiased; overflow-x:hidden;
}
img{display:block; max-width:100%;}
a{color:inherit; text-decoration:none;}
p{margin:0;} h1,h2,h3{margin:0; font-weight:400;}
::selection{background:var(--ink); color:var(--paper);}
:focus-visible{outline:1.5px solid var(--bronze); outline-offset:4px; border-radius:1px;}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms !important; transition-duration:.01ms !important;
    scroll-behavior:auto !important;}
}

.skip{position:absolute; left:-9999px; top:0; z-index:200; background:var(--bronze);
  color:#fff; padding:.75rem 1.25rem; font-size:.75rem; letter-spacing:.14em; text-transform:uppercase;}
.skip:focus{left:1rem; top:1rem;}

/* ---------------- structure ---------------- */
.band{padding-block:var(--air-xl);}
.band + .band{padding-top:clamp(3rem,6vh,5rem);}
.band--tight{padding-block:var(--air-l);}
.band--tint{background:var(--paper-2);}
.band--ink{background:var(--ink); color:var(--paper);}
.wrap{max-width:var(--max); margin-inline:auto; padding-inline:var(--gutter);}

.label{font-family:var(--sans); font-size:.75rem; font-weight:500; letter-spacing:.26em;
  text-transform:uppercase; color:var(--bronze-tx);}
.band--ink .label{color:var(--bronze-lt);}
.lede{font-family:var(--serif); font-weight:400; font-size:clamp(1.25rem,2vw,1.625rem); line-height:1.5;}
.body{color:var(--on-paper);}
.band--ink .body{color:var(--on-ink);}
.prose p + p{margin-top:var(--air-m);}
.prose{max-width:54rem;}

/* centred passage */
.passage{max-width:var(--measure); margin-inline:auto; text-align:center;}
.passage > * + *{margin-top:var(--air-m);}
.passage .label{margin-bottom:var(--air-l); display:block;}

/* asymmetric passage — used sparingly so the page keeps a spine */
.offset{display:grid; grid-template-columns:1fr 1.35fr; gap:clamp(2rem,7vw,7rem); align-items:start;}
@media (max-width:56rem){ .offset{grid-template-columns:1fr; gap:var(--air-l);} }

.link{display:inline-block; font-size:.9375rem; font-weight:400; letter-spacing:.06em;
  border-bottom:1px solid var(--bronze); padding-bottom:.3125rem; transition:border-color .3s ease;}
.link:hover{border-color:var(--ink);}
.band--ink .link{border-color:var(--bronze-lt);}
.band--ink .link:hover{border-color:var(--paper);}
.link--muted{border-color:var(--hair);}
.links{display:flex; gap:var(--air-m); flex-wrap:wrap;}
.links--center{justify-content:center;}

/* full-bleed plate */
.plate{margin:0;}
.plate img{width:100%; height:clamp(20rem,60vh,42rem); object-fit:cover;
  object-position:var(--focal,center 58%);}
.plate--tall img{height:clamp(20rem,52vh,34rem); aspect-ratio:auto; object-fit:cover;}
.plate figcaption{font-family:var(--sans); font-size:.75rem; letter-spacing:.12em;
  text-transform:uppercase; color:var(--grey); padding:var(--air-s) var(--gutter) 0;
  max-width:var(--max); margin-inline:auto;}

/* ---------------- masthead ---------------- */
.masthead{position:fixed; inset:0 0 auto 0; z-index:50;
  display:flex; justify-content:space-between; align-items:center;
  padding:1.75rem var(--gutter); color:var(--paper);
  transition:background .4s ease, padding .4s ease, border-color .4s ease;
  border-bottom:1px solid transparent;}
.masthead.solid{background:var(--ink); padding-block:.9375rem;
  border-bottom-color:var(--hair-lt);}
.masthead .mark{font-family:var(--serif); font-size:1.1875rem; letter-spacing:.14em;
  text-transform:uppercase; white-space:nowrap;}
.masthead nav{display:flex; gap:1.75rem;}
.masthead nav a{font-size:.75rem; letter-spacing:.14em; text-transform:lowercase; opacity:.86;}
.masthead nav a:hover, .masthead nav a[aria-current="page"]{opacity:1;}
.masthead nav a[aria-current="page"]{border-bottom:1px solid var(--bronze-lt); padding-bottom:.25rem;}
.nav-toggle{display:none; background:none; border:0; color:currentColor; padding:.375rem; cursor:pointer;}
.nav-toggle svg{width:1.375rem; height:1.375rem; stroke:currentColor; fill:none; stroke-width:1.4;}
@media (max-width:60rem){
  /* bar joins the document flow and scrolls away with the page */
  .masthead{position:static; background:var(--ink); flex-wrap:wrap;
    padding:1rem var(--gutter); border-bottom:1px solid var(--hair-lt);}
  .masthead.solid{padding:1rem var(--gutter);}
  .nav-toggle{display:block;}
  /* menu is a plain expanding block, not an overlay */
  .masthead nav{flex:0 0 100%; display:none; flex-direction:column; align-items:flex-start;
    gap:0; padding-top:.5rem; margin-top:.75rem; border-top:1px solid var(--hair-lt);}
  .masthead nav.open{display:flex;}
  .masthead nav a{font-size:1.0625rem; letter-spacing:.14em; opacity:1;
    padding-block:.875rem; width:100%; border-bottom:1px solid var(--hair-lt);}
  .masthead nav a:last-child{border-bottom:0;}
  .masthead nav a[aria-current="page"]{color:var(--bronze-lt); border-bottom-color:var(--hair-lt);}
  /* heroes no longer sit under a floating bar, so reclaim the top padding */
  .opening .wrap{padding-block:var(--air-l) var(--air-l);}
  .page-hero .wrap{padding-block:var(--air-xl) var(--air-l);}
  .opening{min-height:clamp(22rem,70vw,34rem);}
  .page-hero{min-height:clamp(16rem,52vw,26rem);}
}

/* ---------------- persistent ticket rail ---------------- */
.rail{position:fixed; inset:auto 0 0 0; z-index:40; transform:translateY(101%);
  transition:transform .5s cubic-bezier(.22,.61,.36,1);
  background:var(--ink); color:var(--paper);
  display:flex; align-items:center; justify-content:space-between; gap:1.5rem;
  padding:.875rem var(--gutter); border-top:1px solid var(--hair-lt);}
.rail.up{transform:translateY(0);}
.rail .nm{font-family:var(--serif); font-size:1.0625rem;}
.rail .what{display:flex; align-items:baseline; gap:1rem; flex-wrap:wrap;}
.rail .wh{font-size:.75rem; letter-spacing:.1em; text-transform:uppercase; color:var(--on-ink);}
.rail .link{border-color:var(--bronze-lt); font-size:.8125rem; white-space:nowrap;}
@media (max-width:44rem){ .rail .wh{display:none;} }

/* ---------------- opening (home hero) ---------------- */
.opening{position:relative; min-height:100svh; display:flex; align-items:flex-end;
  isolation:isolate; overflow:hidden; color:var(--paper);}
.opening .bg{position:absolute; inset:0; z-index:-2; background-size:cover;
  background-position:var(--focal,center 58%);}
.opening::after{content:''; position:absolute; inset:0; z-index:-1;
  background:linear-gradient(180deg,rgba(21,24,28,.34) 0%,rgba(21,24,28,.12) 38%,rgba(21,24,28,.58) 74%,rgba(21,24,28,.88) 100%);}
.opening .wrap{width:100%; padding-block:0 clamp(3rem,8vh,5.5rem);}
.opening h1{font-family:var(--serif); font-weight:300; font-size:clamp(2rem,4.6vw,3.75rem);
  line-height:1.14; max-width:22ch; text-shadow:0 1px 30px rgba(0,0,0,.35);}
.opening h1 em{font-style:normal; color:#e4d3ba;}
.opening .tag{margin-bottom:var(--air-m); font-size:.75rem; letter-spacing:.24em;
  text-transform:uppercase; color:rgba(244,244,242,.8);}
.opening .links{margin-top:var(--air-l);}
.opening .link{border-color:rgba(244,244,242,.45);}
.opening .link:hover{border-color:var(--paper);}

/* ---------------- page hero (sub-pages) ---------------- */
.page-hero{position:relative; min-height:62svh; display:flex; align-items:flex-end;
  isolation:isolate; color:var(--paper); background-size:cover;
  background-position:var(--focal,center 58%);}
.page-hero::after{content:''; position:absolute; inset:0; z-index:-1;
  background:linear-gradient(180deg,rgba(21,24,28,.30) 0%,rgba(21,24,28,.52) 62%,rgba(21,24,28,.86) 100%);}
.page-hero .wrap{width:100%; padding-block:8rem clamp(2.5rem,6vh,4rem);}
.page-hero h1{font-family:var(--serif); font-weight:300; font-size:clamp(1.875rem,4vw,3.25rem);
  line-height:1.14; max-width:24ch; text-shadow:0 1px 30px rgba(0,0,0,.35);}
.page-hero .tag{margin-bottom:var(--air-s); font-size:.75rem; letter-spacing:.24em;
  text-transform:uppercase; color:rgba(244,244,242,.8);}
@media (min-aspect-ratio:3/2){
  .page-hero{min-height:clamp(20rem, 34vw, 62svh);}
}

/* ---------------- concert facts ---------------- */
.facts{margin:0; padding:0; list-style:none; border-top:1px solid var(--hair);}
.facts li{display:grid; grid-template-columns:7rem 1fr; gap:1rem; padding-block:.8125rem;
  border-bottom:1px solid var(--hair); font-size:.9375rem;}
.facts .k{font-size:.6875rem; letter-spacing:.16em; text-transform:uppercase;
  color:var(--grey); padding-top:.3rem;}
.band--ink .facts, .band--ink .facts li{border-color:var(--hair-lt);}
h2.title{font-family:var(--serif); font-weight:300; font-size:clamp(1.875rem,3.4vw,2.875rem); line-height:1.1;}

/* ---------------- season list ---------------- */
.season{border-top:1px solid var(--hair);}
.season ul{margin:0; padding:0;}
.season li{list-style:none; display:grid; grid-template-columns:8rem 1fr auto;
  gap:clamp(1rem,3vw,2.5rem); align-items:baseline; padding-block:var(--air-m);
  border-bottom:1px solid var(--hair);}
.season .when{font-size:.8125rem; letter-spacing:.12em; text-transform:uppercase; color:var(--grey);}
.season h3{font-family:var(--serif); font-weight:400; font-size:1.375rem;}
.season .where{font-size:.875rem; color:var(--on-paper); margin-top:.25rem;}
.season .st{font-size:.6875rem; letter-spacing:.16em; text-transform:uppercase; color:var(--grey);}
.season .st.now{color:var(--bronze-tx);}
@media (max-width:56rem){ .season li{grid-template-columns:1fr;} .season .st{margin-top:.5rem;} }

/* ---------------- season entries (season page) ---------------- */
.entry{display:grid; grid-template-columns:1.1fr 1fr; gap:clamp(2rem,5vw,4.5rem);
  align-items:center; padding-block:var(--air-l); border-top:1px solid var(--hair);}
.entry:last-of-type{border-bottom:1px solid var(--hair);}
.entry-poster img{width:100%; aspect-ratio:16/9; object-fit:cover;}
.entry h2{font-family:var(--serif); font-weight:300; font-size:clamp(1.625rem,3vw,2.25rem);}
.entry .st{font-size:.6875rem; letter-spacing:.18em; text-transform:uppercase; color:var(--bronze-tx);
  margin-bottom:var(--air-s); display:block;}
@media (max-width:56rem){ .entry{grid-template-columns:1fr;} }

/* ---------------- posters ---------------- */
.posters{display:grid; grid-template-columns:repeat(3,1fr); gap:.5rem;}
.posters img{width:100%; aspect-ratio:16/9; object-fit:cover;}
@media (max-width:48rem){ .posters{grid-template-columns:1fr;} }

/* ---------------- quotation ---------------- */
.quote{max-width:54rem; margin-inline:auto; text-align:center;}
.quote p{font-family:var(--serif); font-weight:400; font-style:normal;
  font-size:clamp(1.375rem,2.6vw,2rem); line-height:1.42;}
.quote .src{margin-top:var(--air-m); font-size:.75rem; letter-spacing:.2em;
  text-transform:uppercase; color:var(--grey);}
.press-mark{height:3rem; width:auto; margin:var(--air-m) auto 0; display:block;}

/* ---------------- aims ---------------- */
.aims{list-style:none; margin:0; padding:0;}
.aims li{border-top:1px solid var(--hair); padding-block:var(--air-m);}
.aims li:last-child{border-bottom:1px solid var(--hair);}
.aims .n{font-size:.6875rem; letter-spacing:.16em; color:var(--bronze-tx); display:block; margin-bottom:.5rem;}
.aims .t{font-family:var(--serif); font-size:1.25rem;}

/* ---------------- roster ---------------- */
.roster{list-style:none; margin:0; padding:0; border-top:1px solid var(--hair);}
.roster li{display:grid; grid-template-columns:4rem 1fr; gap:1rem; align-items:baseline;
  padding-block:var(--air-m); border-bottom:1px solid var(--hair);}
.roster .pt{font-size:.6875rem; letter-spacing:.18em; text-transform:uppercase; color:var(--bronze-tx);}
.roster .who{font-family:var(--serif); font-size:1.25rem;}

/* ---------------- video ---------------- */
.video{position:relative; aspect-ratio:16/9; background:#000; overflow:hidden;}
.video iframe{position:absolute; inset:0; width:100%; height:100%; border:0;}
.videos{display:grid; grid-template-columns:1.6fr 1fr; gap:clamp(1rem,2.5vw,2rem); align-items:start;}
.videos .side{display:grid; gap:clamp(1rem,2.5vw,2rem);}
@media (max-width:56rem){ .videos{grid-template-columns:1fr;} }

/* ---------------- gallery masonry ---------------- */
.masonry{column-count:3; column-gap:.5rem;}
.masonry figure{break-inside:avoid; margin:0 0 .5rem; overflow:hidden; background:var(--ink);}
.masonry img{width:100%; height:auto;}
@media (max-width:60rem){ .masonry{column-count:2;} }
@media (max-width:36rem){ .masonry{column-count:1;} }

/* ---------------- rates ---------------- */
.rates{list-style:none; margin:0; padding:0; display:grid; grid-template-columns:repeat(4,1fr);}
.rates li{border-top:1px solid var(--hair-lt); padding-block:var(--air-m); padding-right:1rem;}
.rates .amt{font-family:var(--serif); font-size:1.5rem; color:var(--bronze-lt);}
.rates .nm{font-size:.6875rem; letter-spacing:.18em; text-transform:uppercase;
  color:rgba(244,244,242,.55); margin-top:.375rem;}
@media (max-width:56rem){ .rates{grid-template-columns:1fr 1fr;} }

/* ---------------- contact ---------------- */
.contact-block + .contact-block{margin-top:var(--air-l);}
.contact-block h2{font-size:.6875rem; font-weight:500; letter-spacing:.2em;
  text-transform:uppercase; color:var(--bronze-lt); margin-bottom:.5rem;}
.contact-block .big{font-family:var(--serif); font-size:1.375rem;}

/* ---------------- enrol ---------------- */
.enrol form{display:flex; gap:.75rem; align-items:stretch; max-width:30rem;
  margin:var(--air-l) auto 0;}
.band--ink .enrol form{border-color:var(--hair-lt);}
.enrol input{flex:1; min-width:0; border:1px solid var(--hair); background:transparent;
  font-family:var(--sans); font-size:1rem; font-weight:300; color:inherit;
  padding:.8125rem 1rem; text-align:left; border-radius:0;}
.enrol input:focus{outline:0; border-color:var(--bronze);}
.band--ink .enrol input{border-color:rgba(244,244,242,.42); color:var(--paper);}
.band--ink .enrol input::placeholder{color:rgba(244,244,242,.55);}
.enrol input::placeholder{color:var(--grey);}
.enrol input:focus{outline:0;}
.enrol button{flex:0 0 auto; border:1px solid var(--ink); background:var(--ink); color:var(--paper);
  cursor:pointer; font-family:var(--sans); font-size:.8125rem; font-weight:400;
  letter-spacing:.12em; text-transform:lowercase; padding:.8125rem 1.75rem;
  transition:background .3s ease, border-color .3s ease, color .3s ease;}
.enrol button:hover{background:var(--bronze); border-color:var(--bronze);}
.band--ink .enrol button{background:var(--bronze-lt); border-color:var(--bronze-lt); color:var(--ink);}
.band--ink .enrol button:hover{background:var(--paper); border-color:var(--paper);}
.band--ink .enrol button{color:var(--bronze-lt);}
.enrol .fine{margin-top:var(--air-m); font-size:.75rem; color:var(--grey);}
.enrol .done{display:none; font-family:var(--serif); font-size:1.125rem; color:var(--bronze);
  margin-top:var(--air-l);}
.enrol .done.show{display:block;}

/* ---------------- footer ---------------- */
.site-footer{background:var(--ink); color:var(--paper);
  padding-block:var(--air-l) calc(var(--air-l) + 4.5rem);}
.site-footer .top{display:grid; grid-template-columns:1.6fr 1fr 1fr; gap:var(--air-l);
  padding-bottom:var(--air-l); border-bottom:1px solid var(--hair-lt);}
.site-footer .mark{font-family:var(--serif); font-size:1.375rem; letter-spacing:.12em; text-transform:uppercase;}
.site-footer .about{color:var(--on-ink); font-size:.9375rem; max-width:30ch; margin-top:var(--air-s);}
.site-footer h2{font-size:.6875rem; font-weight:500; letter-spacing:.2em; text-transform:uppercase;
  color:var(--bronze-lt); margin-bottom:var(--air-s);}
.site-footer ul{list-style:none; margin:0; padding:0; display:grid; gap:.625rem;}
.site-footer a{font-size:.9375rem; color:var(--on-ink);}
.site-footer a:hover{color:var(--paper);}
.site-footer .bottom{padding-top:var(--air-m); display:flex; justify-content:space-between;
  gap:1rem; flex-wrap:wrap; font-size:.75rem; color:rgba(244,244,242,.42);}
@media (max-width:56rem){ .site-footer .top{grid-template-columns:1fr 1fr;} }

/* ---------------- reveal ---------------- */
/* Reveal-on-scroll is progressive enhancement only.
   Content is visible by default; the .js-anim class (set by main.js before
   first paint) is what opts into the hidden-then-fade behaviour. Without it
   — JS blocked, failed, or still loading — everything simply shows. */
.rv{opacity:1; transform:none;}
.js-anim .rv{opacity:0; transform:translateY(1rem);
  transition:opacity .9s ease, transform .9s ease;}
.js-anim .rv.in{opacity:1; transform:none;}
@media (prefers-reduced-motion:reduce){
  .js-anim .rv{opacity:1; transform:none;}
}

/* ==================================================================
   STRUCTURE — "hard features": bordered cards, grids, rules, tables.
   Photography moves into defined containers instead of floating
   full-bleed between short passages.
   ================================================================== */

/* section head with a rule — gives every block a visible top edge */
.head{display:grid; gap:var(--air-s); padding-top:var(--air-s);
  border-top:2px solid var(--ink); margin-bottom:var(--air-l);}
.band--ink .head{border-top-color:var(--paper);}
.head .row{display:flex; justify-content:space-between; align-items:baseline;
  gap:1.5rem; flex-wrap:wrap;}
.head h2{font-family:var(--serif); font-weight:300;
  font-size:clamp(1.75rem,2.6vw,2.75rem); line-height:1.12; max-width:42ch;}
.head .intro{max-width:66rem; color:var(--on-paper); margin-top:.5rem;}
.band--ink .head .intro{color:var(--on-ink);}

/* card grid — hairline-separated cells, no rounded corners */
.cards{display:grid; grid-template-columns:repeat(4,1fr); gap:1px; background:transparent;}

.card{background:var(--paper); padding:var(--air-m) clamp(1.125rem,2vw,1.625rem) var(--air-m);}
.band--tint .card{background:var(--paper-2);}
.band--ink .card{background:var(--ink);}
.card .n{font-size:.6875rem; letter-spacing:.18em; color:var(--bronze-tx); display:block;
  margin-bottom:var(--air-s);}
.band--ink .card .n{color:var(--bronze-lt);}
.card h3{font-family:var(--serif); font-weight:400; font-size:1.1875rem; margin-bottom:.625rem;}
.card p{font-size:.9375rem; line-height:1.7; color:var(--on-paper); max-width:34ch;}
.band--ink .card p{color:var(--on-ink);}
.cards--3{grid-template-columns:repeat(3,1fr);}
.cards--2{grid-template-columns:repeat(2,1fr);}
@media (max-width:60rem){ .cards,.cards--3{grid-template-columns:repeat(2,1fr);} }
@media (max-width:38rem){ .cards,.cards--3,.cards--2{grid-template-columns:1fr;} }

/* feature: photo bound to text in a defined two-column block */
.feature{display:grid; grid-template-columns:1fr 1fr; gap:0;
  border-top:1px solid var(--hair); border-bottom:1px solid var(--hair);}
.feature > .media img{width:100%; height:100%; min-height:22rem; object-fit:cover;
  object-position:var(--focal,center 58%);}
.feature > .text{padding:var(--air-l) clamp(1.5rem,3vw,3rem);}
.feature--reverse > .media{order:2;}
.feature .caption{font-size:.6875rem; letter-spacing:.12em; text-transform:uppercase;
  color:var(--grey); margin-top:var(--air-s);}
@media (max-width:56rem){
  .feature{grid-template-columns:1fr;}
  .feature--reverse > .media{order:0;}
  .feature > .text{padding-inline:0;}
}

/* data table — programme details, specs, anything itemised */
.table{width:100%; border-collapse:collapse; font-size:.9375rem;}
.table th,.table td{text-align:left; padding:.8125rem 1rem .8125rem 0;
  border-bottom:1px solid var(--hair); vertical-align:top;}
.band--ink .table th,.band--ink .table td{border-bottom-color:var(--hair-lt);}
.table th{width:8.5rem; font-size:.6875rem; font-weight:500; letter-spacing:.16em;
  text-transform:uppercase; color:var(--grey);}
.table tr:first-child th,.table tr:first-child td{border-top:1px solid var(--hair);}
.band--ink .table tr:first-child th,.band--ink .table tr:first-child td{border-top-color:var(--hair-lt);}

/* testimonial cards — bordered, not floating */
.testimonials{display:grid; grid-template-columns:repeat(3,1fr); gap:1px; background:var(--hair);}
.band--ink .testimonials{background:var(--hair-lt);}
.testimonial{background:var(--paper); padding:var(--air-m) clamp(1.125rem,2vw,1.625rem);
  border-top:2px solid var(--bronze);}
.band--tint .testimonial{background:var(--paper-2);}
.band--ink .testimonial{background:var(--ink);}
.testimonial blockquote{margin:0; font-family:var(--serif); font-weight:400; font-style:normal;
  font-size:clamp(1.1875rem,1.7vw,1.4375rem); line-height:1.42;}
.testimonial .src{margin-top:var(--air-s); font-size:.6875rem; letter-spacing:.18em;
  text-transform:uppercase; color:var(--grey);}
.band--ink .testimonial .src{color:rgba(244,244,242,.55);}
@media (max-width:56rem){ .testimonials{grid-template-columns:1fr;} }

/* mosaic — photography in a structured grid rather than full-bleed */
.mosaic{display:grid; grid-template-columns:repeat(4,1fr); grid-auto-rows:11vw; gap:.375rem;}
.mosaic a{display:block; overflow:hidden; background:var(--ink);}
.mosaic img{width:100%; height:100%; object-fit:cover; object-position:var(--focal,center 58%);
  transition:opacity .4s ease;}
.mosaic a:hover img{opacity:.86;}
.m-2x2{grid-column:span 2; grid-row:span 2;}
.m-2x1{grid-column:span 2;}
@media (max-width:56rem){
  .mosaic{grid-template-columns:repeat(2,1fr); grid-auto-rows:30vw;}
  .m-2x2{grid-column:span 2; grid-row:span 1;}
}

/* stat strip */
.stats{display:grid; grid-template-columns:repeat(4,1fr); gap:1px; background:var(--hair);
  margin-top:var(--air-l);}
.band--ink .stats{background:var(--hair-lt);}
.stats div{background:var(--paper); padding:var(--air-m) 1.25rem;}
.band--tint .stats div{background:var(--paper-2);}
.band--ink .stats div{background:var(--ink);}
.stats .n{font-family:var(--serif); font-size:1.75rem; color:var(--ink);}
.band--ink .stats .n{color:var(--bronze-lt);}
.stats .l{font-size:.6875rem; letter-spacing:.16em; text-transform:uppercase;
  color:var(--grey); margin-top:.375rem;}
@media (max-width:56rem){ .stats{grid-template-columns:1fr 1fr;} }

/* concert row with poster thumbnail — structured, scannable */
.bill{border-top:2px solid var(--ink);}
.band--ink .bill{border-top-color:var(--paper);}
.bill ul{margin:0; padding:0; list-style:none;}
.bill li{display:grid; grid-template-columns:11rem 6.5rem 1fr auto;
  gap:clamp(1rem,2.5vw,2rem); align-items:center; padding-block:var(--air-m);
  border-bottom:1px solid var(--hair);}
.band--ink .bill li{border-bottom-color:var(--hair-lt);}
.bill .thumb img{width:11rem; aspect-ratio:16/9; object-fit:cover;}
.bill .date{font-size:.8125rem; letter-spacing:.1em; text-transform:uppercase; color:var(--grey);}
.bill .date b{display:block; font-family:var(--serif); font-weight:400; font-size:1.5rem;
  color:var(--ink); letter-spacing:0; margin-top:.125rem;}
.band--ink .bill .date b{color:var(--paper);}
.bill h3{font-family:var(--serif); font-weight:400; font-size:1.3125rem;}
.bill .venue{font-size:.875rem; color:var(--on-paper); margin-top:.25rem;}
.band--ink .bill .venue{color:var(--on-ink);}
.bill .note{font-size:.75rem; color:var(--grey); margin-top:.25rem;}
@media (max-width:60rem){
  .bill li{grid-template-columns:6.5rem 1fr;}
  .bill .thumb{display:none;}
  .bill .link{grid-column:2; justify-self:start; margin-top:.5rem;}
}


/* ---------- more architecture: numbered heads, vertical rules, gridded tables ---------- */
.head{position:relative;}



/* vertical rule between asymmetric columns */
.offset--ruled > *:last-child{border-left:1px solid var(--hair);
  padding-left:clamp(1.5rem,3vw,3rem);}
.band--ink .offset--ruled > *:last-child{border-left-color:var(--hair-lt);}
@media (max-width:56rem){
  .offset--ruled > *:last-child{border-left:0; padding-left:0;
    border-top:1px solid var(--hair); padding-top:var(--air-m);}
}

/* tables gain a vertical rule and tighter grid */
.table th{border-right:1px solid var(--hair); padding-right:1.25rem;}
.band--ink .table th{border-right-color:var(--hair-lt);}
.table td{padding-left:1.25rem;}

/* cards gain a top accent and a corner index */
.card{position:relative; border-top:2px solid transparent;
  box-shadow:0 0 0 1px var(--hair);}
.card:hover{border-top-color:var(--bronze);}

/* framed block — a hard container for standout content */
.framed{border:1px solid var(--hair); padding:clamp(1.5rem,3vw,2.5rem);}
.band--ink .framed{border-color:var(--hair-lt);}

/* structured gallery grid replaces ragged masonry columns */
.grid-gallery{display:grid; grid-template-columns:repeat(6,1fr); grid-auto-rows:9.5vw; gap:.375rem;}
.grid-gallery a{display:block; overflow:hidden; background:var(--ink);}
.grid-gallery img{width:100%; height:100%; object-fit:cover;
  object-position:var(--focal,center 55%); transition:opacity .4s ease;}
.grid-gallery a:hover img{opacity:.85;}
.g-2x2{grid-column:span 2; grid-row:span 2;}
.g-3x2{grid-column:span 3; grid-row:span 2;}
.g-2x1{grid-column:span 2;}
.g-3x1{grid-column:span 3;}
@media (max-width:60rem){
  .grid-gallery{grid-template-columns:repeat(2,1fr); grid-auto-rows:28vw;}
  .g-2x2,.g-3x2,.g-2x1,.g-3x1{grid-column:span 2; grid-row:span 1;}
}

/* video facade — a real thumbnail that loads the player on click.
   YouTube blocks embeds from file:// origins, so this also degrades gracefully. */
.vf{position:relative; aspect-ratio:16/9; overflow:hidden; background:var(--ink); cursor:pointer;
  border:0; padding:0; width:100%; display:block;}
.vf img{width:100%; height:100%; object-fit:cover; object-position:var(--focal,center 55%);}
.vf::after{content:''; position:absolute; inset:0; background:rgba(21,24,28,.32); transition:background .3s ease;}
.vf:hover::after{background:rgba(21,24,28,.14);}
.vf .play{position:absolute; inset:50% auto auto 50%; transform:translate(-50%,-50%); z-index:2;
  width:3.75rem; height:3.75rem; border:1px solid rgba(244,244,242,.8); border-radius:50%;
  display:grid; place-items:center;}
.vf .play::before{content:''; width:0; height:0; margin-left:.25rem;
  border-left:.75rem solid var(--paper); border-top:.5rem solid transparent; border-bottom:.5rem solid transparent;}
.vf .cap{position:absolute; inset:auto auto 1rem 1rem; z-index:2; color:var(--paper);
  font-size:.6875rem; letter-spacing:.16em; text-transform:uppercase;}

/* the press logo was rendering at 32px and illegible */
.press-logo img{height:3rem;}
.m-1x1{grid-column:span 1;}
@media (max-width:56rem){ .m-1x1{grid-column:span 1;} }

/* ---------- marquee: the landing page's featured event, not a spec table ---------- */
.marquee{display:grid; grid-template-columns:1.25fr 1fr; gap:0;
  border:1px solid var(--hair); background:var(--paper);}
.band--tint .marquee{background:var(--paper-2);}
.marquee .art img{width:100%; height:100%; min-height:20rem; object-fit:cover;}
.marquee .info{padding:clamp(1.75rem,3.5vw,3rem); display:flex; flex-direction:column;
  justify-content:center;}
.marquee .tag{font-size:.6875rem; letter-spacing:.2em; text-transform:uppercase;
  color:var(--bronze-tx); margin-bottom:var(--air-s);}
.marquee h2{font-family:var(--serif); font-weight:300;
  font-size:clamp(2.25rem,4.4vw,3.5rem); line-height:1.04;}
.marquee .when{display:flex; gap:2.25rem; flex-wrap:wrap; margin-top:var(--air-m);
  padding-top:var(--air-m); border-top:1px solid var(--hair);}
.marquee .when div{min-width:0;}
.marquee .when .k{font-size:.625rem; letter-spacing:.18em; text-transform:uppercase;
  color:var(--grey); display:block; margin-bottom:.25rem;}
.marquee .when .v{font-family:var(--serif); font-size:1.1875rem;}
.marquee .cta{margin-top:var(--air-l); display:flex; gap:var(--air-m); flex-wrap:wrap;}
@media (max-width:56rem){ .marquee{grid-template-columns:1fr;} }

/* ---------- constellation motif: back, used twice ---------- */
.constellation{display:block; width:min(16rem,54%); height:2rem; margin:0 auto;}
.constellation circle{fill:var(--bronze);}
.constellation line{stroke:var(--bronze); stroke-width:.75; opacity:.45;}
.band--ink .constellation circle{fill:var(--bronze-lt);}
.band--ink .constellation line{stroke:var(--bronze-lt);}
.divider{padding-block:var(--air-l);}

/* wordmark: full ensemble name, letterspaced */
.masthead .mark{letter-spacing:.22em; font-size:1.0625rem;}
@media (max-width:34rem){ .masthead .mark{font-size:.875rem; letter-spacing:.16em;} }

/* ---------- hero at prototype weight: headline + event meta in the image ---------- */

.opening .wrap{padding-block:0 clamp(3.5rem,9vh,6rem);}
.hero-grid{display:grid; grid-template-columns:1fr auto; gap:clamp(2rem,6vw,6rem);
  align-items:end;}
.hero-head h1{max-width:24ch;}
.hero-meta{min-width:15rem; max-width:20rem; padding-bottom:.5rem;}
.hero-meta .row{border-top:1px solid rgba(244,244,242,.28); padding-top:.75rem; margin-top:.75rem;}
.hero-meta .row:first-child{border-top:0; margin-top:0; padding-top:0;}
.hero-meta .k{font-size:.625rem; letter-spacing:.22em; text-transform:uppercase;
  color:var(--bronze-lt); display:block; margin-bottom:.375rem;}
.hero-meta .nm{font-family:var(--serif); font-size:1.5rem; line-height:1.1; display:block;}
.hero-meta .dt{font-size:.8125rem; letter-spacing:.06em; color:rgba(244,244,242,.78);
  display:block; margin-top:.375rem;}
.hero-meta .link{margin-top:1rem;}
@media (max-width:64rem){
  .hero-grid{grid-template-columns:1fr; gap:var(--air-m);}
  .hero-meta{max-width:none; padding-bottom:0;}
}

/* marquee on the ink band — supports the hero instead of competing with it */
.band--ink .marquee{background:transparent; border-color:var(--hair-lt);}
.band--ink .marquee .tag{color:var(--bronze-lt);}
.band--ink .marquee .when{border-top-color:var(--hair-lt);}
.band--ink .marquee .when .k{color:rgba(244,244,242,.55);}

/* ---------- buttons: real targets, not underlined text ---------- */
.btn{display:inline-flex; align-items:center; justify-content:center; min-height:2.875rem;
  padding:.6875rem 1.5rem; border:1px solid var(--ink); background:transparent; color:var(--ink);
  font-family:var(--sans); font-size:.8125rem; font-weight:400; letter-spacing:.1em;
  text-transform:lowercase; white-space:nowrap; cursor:pointer;
  transition:background .3s ease, color .3s ease, border-color .3s ease;}
.btn:hover{background:var(--ink); color:var(--paper);}
.btn--solid{background:var(--ink); color:var(--paper);}
.btn--solid:hover{background:var(--bronze); border-color:var(--bronze); color:var(--paper);}
.btn--quiet{border-color:var(--hair); color:var(--on-paper);}
.btn--quiet:hover{border-color:var(--ink); background:transparent; color:var(--ink);}
.band--ink .btn{border-color:rgba(244,244,242,.42); color:var(--paper);}
.band--ink .btn:hover{background:var(--paper); color:var(--ink);}
.band--ink .btn--solid{background:var(--bronze-lt); border-color:var(--bronze-lt); color:var(--ink);}
.opening .btn{border-color:rgba(244,244,242,.5); color:var(--paper);}
.opening .btn:hover{background:var(--paper); color:var(--ink);}
.opening .btn--solid{background:var(--paper); border-color:var(--paper); color:var(--ink);}
.opening .btn--solid:hover{background:var(--bronze-lt); border-color:var(--bronze-lt);}
.btns{display:flex; gap:.75rem; flex-wrap:wrap;}

/* hero: less crop now that the source is pre-cut to 1.9:1 */
/* height tracks the 2:1 image so cover-fit barely crops; floor for phones, ceiling for laptops */
.opening{min-height:clamp(26rem, 50vw, 88svh);}
.opening .bg{background-position:center center;}

/* ---------- season blocks on the homepage ---------- */
.feat{display:grid; grid-template-columns:1.15fr 1fr; gap:clamp(1.75rem,4vw,3.5rem);
  align-items:center; padding-bottom:var(--air-l); border-bottom:1px solid var(--hair);}
.feat .art img{width:100%; aspect-ratio:16/9; object-fit:cover;}
.feat .tag{font-size:.6875rem; letter-spacing:.2em; text-transform:uppercase;
  color:var(--bronze-tx); display:block; margin-bottom:var(--air-s);}
.feat h3{font-family:var(--serif); font-weight:300; font-size:clamp(1.875rem,3.6vw,2.75rem);
  line-height:1.06;}
.feat .where{margin-top:var(--air-s); font-family:var(--serif); font-size:1.1875rem;}
.feat .desc{margin-top:var(--air-m); color:var(--on-paper); max-width:44ch;}
.feat .btns{margin-top:var(--air-l);}
@media (max-width:56rem){ .feat{grid-template-columns:1fr;} }

.dates{list-style:none; margin:var(--air-l) 0 0; padding:0;
  display:grid; grid-template-columns:1fr 1fr; gap:1px; background:var(--hair);}
.dates li{background:var(--paper); padding:var(--air-m) clamp(1.125rem,2vw,1.75rem) var(--air-l);
  display:grid; gap:var(--air-s);}
.band--tint .dates li{background:var(--paper-2);}
.dates .thumb img{width:100%; aspect-ratio:16/9; object-fit:cover;}
.dates .tag{font-size:.6875rem; letter-spacing:.2em; text-transform:uppercase; color:var(--grey);}
.dates h3{font-family:var(--serif); font-weight:400; font-size:1.5rem;}
.dates .where{font-size:.9375rem; color:var(--on-paper);}
@media (max-width:48rem){ .dates{grid-template-columns:1fr;} }

/* press quote: the Voces8 line leads and gets its own measure */
.quote{max-width:64rem;}
.quote .pull{font-family:var(--serif); font-weight:500; font-style:normal;
  font-size:clamp(1.375rem,2.5vw,2rem); line-height:1.32; text-wrap:balance;
  max-width:34ch; margin-inline:auto; color:var(--ink);}
.quote .sub{margin-top:var(--air-m); font-size:1.0625rem; color:var(--on-paper);
  max-width:56ch; margin-inline:auto; text-wrap:balance;}
.band--ink .quote .sub{color:var(--on-ink);}

/* roster: name first, part second */
.roster-table td{border-bottom:1px solid var(--hair); padding-block:.9375rem;}
.roster-table .nm{font-family:var(--serif); font-size:1.1875rem; border-right:0; width:auto;}
.roster-table .pt{font-size:.6875rem; letter-spacing:.16em; text-transform:uppercase;
  color:var(--bronze-tx); text-align:right; padding-left:1rem; width:14rem;}
@media (max-width:34rem){ .roster-table .pt{width:auto;} }

/* quote-led Why Astra cards */
.card h3{text-wrap:balance; font-weight:500;}
.card p em{font-style:normal; display:block; margin-top:.625rem; font-size:.75rem;
  letter-spacing:.1em; text-transform:uppercase; color:var(--grey);}


/* press quote paired with a photograph */
.quote-pair{display:grid; grid-template-columns:.85fr 1fr; gap:clamp(1.75rem,4vw,4rem);
  align-items:center;}
.quote-pair .shot img{width:100%; height:auto; aspect-ratio:4/5; object-fit:cover;
  object-position:var(--focal,center 40%);}
.quote-pair .words{text-align:left;}
.quote-pair .words .pull{margin-inline:0; max-width:34ch;}
.quote-pair .words .sub{margin-inline:0; max-width:46ch;}
.quote-pair .words .press-mark{margin-inline:0;}
@media (max-width:56rem){ .quote-pair{grid-template-columns:1fr;} }


/* gold emphasis in headings — used sparingly, on the operative phrase */
.head h2 em, .feat h3 em, .marquee h2 em{font-style:normal; font-weight:600; color:var(--bronze-tx);}
.band--ink .head h2 em{color:var(--bronze-lt);}
.stats .n{color:var(--bronze-tx);}
.feat .where{color:var(--bronze-tx);}
.dates .tag{color:var(--bronze-tx);}
.quote .pull{color:var(--ink);}
.quote .src{color:var(--bronze-tx);}

/* constellation, worked in more places */
.constellation--sm{width:min(9rem,40%); height:1.25rem;}
.head::after{content:''; position:absolute; top:-2px; left:0; width:4.5rem; height:2px;
  background:var(--bronze);}
.band--ink .head::after{background:var(--bronze-lt);}
/* star node on every section label */
.label{display:inline-flex; align-items:center; gap:.5rem;}
.label::before{content:''; width:.3125rem; height:.3125rem; border-radius:50%;
  background:currentColor; flex:none;}
/* faint constellation field on the dark bands */
.band--ink{background-image:
  radial-gradient(circle at 14% 22%, rgba(207,169,99,.16) 0 1.4px, transparent 1.6px),
  radial-gradient(circle at 76% 16%, rgba(207,169,99,.13) 0 1.1px, transparent 1.3px),
  radial-gradient(circle at 38% 74%, rgba(207,169,99,.10) 0 1.2px, transparent 1.4px),
  radial-gradient(circle at 88% 64%, rgba(207,169,99,.14) 0 1.5px, transparent 1.7px);
  background-repeat:no-repeat;}


/* three donor levels, not four */
.rates--3{grid-template-columns:repeat(3,1fr);}
@media (max-width:56rem){ .rates--3{grid-template-columns:1fr;} }

/* card eyebrows are now words, not numbers */
.card .n{font-size:.6875rem; letter-spacing:.14em; text-transform:uppercase;}
.rates--3{grid-template-columns:repeat(3,1fr);}
@media (max-width:56rem){ .rates--3{grid-template-columns:1fr;} }

.band--ink .card{box-shadow:0 0 0 1px var(--hair-lt);}
/* same guard for the testimonial grid */
.testimonials{background:transparent;}
.band--ink .testimonials{background:transparent;}
.testimonial{box-shadow:0 0 0 1px var(--hair);}
.band--ink .testimonial{box-shadow:0 0 0 1px var(--hair-lt);}
/* season entries: top-align the poster with its label instead of centring it */
.entry{align-items:start;}
.entry .entry-poster{position:sticky; top:6rem;}
@media (max-width:56rem){ .entry .entry-poster{position:static;} }


/* <picture> is a wrapper element — it has to inherit the img's box */
picture{display:block;}
.plate picture, .plate picture img{width:100%;}
.mosaic picture, .grid-gallery picture{display:block; width:100%; height:100%;}
.feature > .media picture{display:block; height:100%;}
.quote-pair .shot picture{display:block;}
.entry-poster picture, .feat .art picture, .marquee .art picture{display:block;}
/* explicit width/height attributes must not override the CSS box */
img[width]{max-width:100%; height:auto;}
.plate img[width], .mosaic img[width], .feature > .media img[width],
.grid-gallery img[width], .vf img[width]{height:100%;}
.plate--tall img[width]{height:clamp(20rem,52vh,34rem);}
.quote-pair .shot img[width]{height:auto;}


/* WebP hero backgrounds (progressive enhancement) */
@supports (background-image: image-set(url('a.webp') type('image/webp'))) {
  [style*="audience-clapping-hero.jpg"]{background-image:image-set(url('../images/audience-clapping-hero.webp') type('image/webp'),url('../images/audience-clapping-hero.jpg') type('image/jpeg')) !important;}
  [style*="behind-ensemble-hero.jpg"]{background-image:image-set(url('../images/behind-ensemble-hero.webp') type('image/webp'),url('../images/behind-ensemble-hero.jpg') type('image/jpeg')) !important;}
  [style*="duo-sopranos-hero.jpg"]{background-image:image-set(url('../images/duo-sopranos-hero.webp') type('image/webp'),url('../images/duo-sopranos-hero.jpg') type('image/jpeg')) !important;}
  [style*="ensemble-kazoo-hero.jpg"]{background-image:image-set(url('../images/ensemble-kazoo-hero.webp') type('image/webp'),url('../images/ensemble-kazoo-hero.jpg') type('image/jpeg')) !important;}
  [style*="ensemble-triptych-hero.jpg"]{background-image:image-set(url('../images/ensemble-triptych-hero.webp') type('image/webp'),url('../images/ensemble-triptych-hero.jpg') type('image/jpeg')) !important;}
  [style*="nave-chandeliers-hero.jpg"]{background-image:image-set(url('../images/nave-chandeliers-hero.webp') type('image/webp'),url('../images/nave-chandeliers-hero.jpg') type('image/jpeg')) !important;}
  [style*="tenor-profile-hero.jpg"]{background-image:image-set(url('../images/tenor-profile-hero.webp') type('image/webp'),url('../images/tenor-profile-hero.jpg') type('image/jpeg')) !important;}
}


/* ---------- mobile refinements ---------- */
@media (max-width:34rem){
  /* the letterspaced wordmark was wrapping to two lines in the footer */
  .site-footer .mark{font-size:1.125rem; letter-spacing:.08em;}
  .masthead .mark{font-size:.9375rem; letter-spacing:.14em;}
  /* stack the footer columns rather than squeezing three across */
  .site-footer .top{grid-template-columns:1fr; gap:var(--air-m);}
  /* the ticket rail is the one persistent CTA — keep it compact */
  .rail{padding-block:.75rem;}
  .rail .nm{font-size:.9375rem;}
  /* full-width buttons read better than side-by-side at this width */
  .btns .btn{flex:1 1 auto; justify-content:center;}
  /* tables: labels above values instead of a cramped fixed column */
  .table th{width:auto; display:block; border-right:0; padding:0 0 .25rem;}
  .table td{display:block; padding:0 0 .875rem;}
  .table tr{display:block; border-bottom:1px solid var(--hair); padding-block:.75rem;}
  .table tr:first-child th, .table tr:first-child td{border-top:0;}
  .table th, .table td{border-bottom:0;}
  .roster-table .pt{text-align:left; padding-left:0;}
}


/* ---------------- home hero art ---------------- */
.opening .bg{background-image:url('../images/home-hero.jpg');}
@supports (background-image: image-set(url('a.webp') type('image/webp'))){
  .opening .bg{background-image:image-set(
    url('../images/home-hero.webp') type('image/webp'),
    url('../images/home-hero.jpg')  type('image/jpeg'));}
}

/* phones: a portrait crop of the same frame, and less text over it */
@media (max-width:48rem){
  .opening{min-height:clamp(30rem,118vw,44rem);}
  .opening .bg{background-image:url('../images/home-hero-m.jpg');
    background-position:center 42%;}
  .opening::after{background:linear-gradient(180deg,
    rgba(21,24,28,.62) 0%, rgba(21,24,28,.30) 34%,
    rgba(21,24,28,.55) 70%, rgba(21,24,28,.92) 100%);}
  /* drop the second sentence and the repeated admission line */
  .h1-tail, .dt--opt{display:none;}
  .opening h1{font-size:clamp(1.75rem,7.6vw,2.5rem); max-width:18ch;}
  .opening .tag{font-size:.6875rem; letter-spacing:.18em;}
  /* meta sits under the buttons in the dark base of the frame */
  .hero-grid{gap:var(--air-s);}
  .hero-meta{max-width:none;}
  .hero-meta .nm{font-size:1.25rem;}
  .hero-meta .dt{font-size:.8125rem;}
  .opening .btns{margin-top:var(--air-m);}
}
@media (max-width:48rem) and (prefers-reduced-data: no-preference){
  @supports (background-image: image-set(url('a.webp') type('image/webp'))){
    .opening .bg{background-image:image-set(
      url('../images/home-hero-m.webp') type('image/webp'),
      url('../images/home-hero-m.jpg')  type('image/jpeg'));}
  }
}
@media (max-width:30rem){
  .tag-tail{display:none;}
}

/* ---------------- give block: the first thing on the Support page ---------------- */
.give{border:1px solid var(--hair); background:var(--paper-2);
  padding:clamp(1.5rem,3.5vw,3rem);}
.band--ink .give{border-color:var(--hair-lt); background:rgba(244,244,242,.04);}
.give .kicker{font-size:.6875rem; letter-spacing:.2em; text-transform:uppercase;
  color:var(--bronze-tx); display:block; margin-bottom:var(--air-s);}
.band--ink .give .kicker{color:var(--bronze-lt);}
.give h2{font-family:var(--serif); font-weight:400;
  font-size:clamp(1.75rem,3.4vw,2.5rem); line-height:1.1; max-width:26ch;}
.give p.why{margin-top:var(--air-s); color:var(--on-paper); max-width:52ch;}
.band--ink .give p.why{color:var(--on-ink);}

/* tier chips — each one is a direct link to the donation form */
.tiers-pick{display:grid; grid-template-columns:repeat(3,1fr); gap:.75rem;
  margin-top:var(--air-m); list-style:none; padding:0;}
.tiers-pick a{display:flex; flex-direction:column; gap:.25rem; align-items:flex-start;
  border:1px solid var(--hair); padding:.875rem 1rem; background:var(--paper);
  transition:border-color .25s ease, background .25s ease;}
.tiers-pick a:hover{border-color:var(--bronze); background:var(--paper-2);}
.tiers-pick .amt{font-family:var(--serif); font-size:1.5rem;}
.tiers-pick .nm{font-size:.6875rem; letter-spacing:.16em; text-transform:uppercase;
  color:var(--bronze-tx);}
@media (max-width:34rem){ .tiers-pick{grid-template-columns:1fr;}
  .tiers-pick a{flex-direction:row; align-items:baseline; justify-content:space-between;} }

/* the primary action, deliberately the largest control on the page */

.give .btns{margin-top:var(--air-m); align-items:center;}
.give .fine{margin-top:var(--air-s); font-size:.8125rem; color:var(--grey);}


/* ==================================================================
   PRIMARY CTA — deliberately breaks the site's quiet link language.
   Deep brass fill (#86642f) with white label = 5.42:1, passes AA.
   ================================================================== */
.btn--cta{
  background:#86642f; border:1px solid #86642f; color:#fff;
  min-height:3.75rem; padding:1.125rem 2.75rem;
  font-family:var(--sans); font-size:1.0625rem; font-weight:500;
  letter-spacing:.02em; text-transform:none; white-space:nowrap;
  display:inline-flex; align-items:center; justify-content:center; gap:.625rem;
  box-shadow:0 2px 0 0 rgba(0,0,0,.22);
  transition:background .25s ease, transform .15s ease, box-shadow .15s ease;
}
.btn--cta::after{content:'\2192'; font-size:1.125rem; line-height:1;
  transition:transform .25s ease;}
.btn--cta:hover{background:#6f5227; transform:translateY(-1px);
  box-shadow:0 4px 0 0 rgba(0,0,0,.22);}
.btn--cta:hover::after{transform:translateX(.25rem);}
.btn--cta:active{transform:translateY(1px); box-shadow:0 1px 0 0 rgba(0,0,0,.22);}
.band--ink .btn--cta{background:var(--bronze-lt); border-color:var(--bronze-lt); color:var(--ink);}
.band--ink .btn--cta:hover{background:#dcb877;}
@media (max-width:34rem){
  .btn--cta{width:100%; padding-inline:1.5rem; font-size:1rem;}
}

/* the give panel goes dark so the brass CTA is the loudest thing on the page */
.give{background:var(--ink); border-color:var(--ink); color:var(--paper);}
.give .kicker{color:var(--bronze-lt);}
.give h2{color:var(--paper); font-size:clamp(1.875rem,3.6vw,2.75rem);}
.give p.why{color:var(--on-ink);}
.give .fine{color:rgba(244,244,242,.6);}
.give .fine a{color:var(--bronze-lt);}
.tiers-pick a{background:transparent; border-color:rgba(244,244,242,.28); color:var(--paper);}
.tiers-pick a:hover{border-color:var(--bronze-lt); background:rgba(244,244,242,.06);}
.tiers-pick .nm{color:var(--bronze-lt);}
.give .btns{margin-top:var(--air-l); gap:1rem;}

/* four tier bands; amounts are ranges so they need more room per cell */
.tiers-pick--4{grid-template-columns:repeat(4,1fr);}
.tiers-pick--4 .amt{font-size:1.1875rem;}
@media (max-width:60rem){ .tiers-pick--4{grid-template-columns:repeat(2,1fr);} }
@media (max-width:34rem){ .tiers-pick--4{grid-template-columns:1fr;} }

/* CTA row sitting on a page hero */
.page-hero .btns{margin-top:var(--air-m);}
.page-hero .btn--light{border-color:rgba(244,244,242,.5); color:var(--paper);}
.page-hero .btn--light:hover{background:var(--paper); color:var(--ink);}

/* tier amounts are ranges, not single figures — give them room */
.rates .amt{font-size:1.1875rem; line-height:1.2;}
@media (max-width:72rem){ .rates{grid-template-columns:repeat(2,1fr);} }
@media (max-width:34rem){ .rates{grid-template-columns:1fr;} }