/* ============================================================
   BRENNAN PLUMMER — SITE STYLESHEET
   Design tokens: swap the values below to re-skin the site.
   ============================================================ */
:root{
  /* Color */
  --canvas-dark:#1a1512;    /* dark pew brown-black */
  --surface-dark:#26201a;
  --edge-dark:#3d3529;
  --footer-dark:#13100c;
  --cream:#f7f1e4;          /* ivory plaster */
  --cream-card:#ece0cb;
  --ink:#171310;
  --ink-soft:#5f564a;
  --paper:#f4ecdd;          /* text on dark */
  --muted:#b3a68f;          /* secondary text on dark */
  --coral:#c2833f;          /* organ-wood amber / candlelight */
  --coral-press:#9c6729;
  --coral-deep:#8a5a22;     /* links on cream (AA) */
  --glass:#2f3d6b;          /* stained-glass indigo */
  --border:#e2d6c0;
  --border-strong:#c6b596;

  /* Type */
  --font-display:"Cormorant Garamond",Georgia,"Times New Roman",serif;
  --font-body:"Inter",system-ui,-apple-system,"Segoe UI",sans-serif;

  /* Spacing — 4px base */
  --s-1:4px;--s-2:8px;--s-3:12px;--s-4:16px;--s-5:24px;
  --s-6:32px;--s-7:48px;--s-8:64px;--s-9:96px;

  /* Radius */
  --r-sm:8px;--r-md:12px;--r-lg:16px;--r-pill:999px;

  /* Layout */
  --container:1200px;
  --measure:62ch;
}

/* ---------- Base ---------- */
*,*::before,*::after{box-sizing:border-box}
body{
  margin:0;background:var(--canvas-dark);color:var(--paper);
  font-family:var(--font-body);font-size:1.0625rem;line-height:1.65;
  -webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;
}
img{max-width:100%;display:block}
h1,h2,h3{font-family:var(--font-display);font-weight:500;line-height:1.08;margin:0;text-wrap:balance}
h1{font-size:clamp(2.75rem,9vw,4.5rem);letter-spacing:-0.02em}
h2{font-size:clamp(2rem,5.5vw,3rem);letter-spacing:-0.015em}
h3{font-size:1.5rem;letter-spacing:-0.01em}
p{margin:0;text-wrap:pretty}
ul{margin:0}
a{color:var(--coral);text-decoration-thickness:1px;text-underline-offset:3px}
a:active{color:var(--coral-press)}
:focus-visible{outline:2px solid var(--coral);outline-offset:3px;border-radius:2px}
.skip-link{position:absolute;left:-9999px;top:0;background:var(--coral);color:var(--ink);
  padding:var(--s-3) var(--s-4);border-radius:0 0 var(--r-sm) 0;text-decoration:none;font-weight:500;z-index:10}
.skip-link:focus{left:0}

/* ---------- Layout primitives ---------- */
.container{max-width:var(--container);margin-inline:auto;padding-inline:var(--s-5)}
.band{padding-block:var(--s-8)}
.band--cream{background:var(--cream);color:var(--ink)}
.band--card{background:var(--cream-card);color:var(--ink)}
.band--coral{background:var(--glass);color:var(--cream)}
.band--cream a:not(.btn),.band--card a:not(.btn){color:var(--coral-deep)}
.muted{color:var(--muted)}
.band--cream .muted,.band--card .muted{color:var(--ink-soft)}
.measure{max-width:var(--measure)}
.split{display:grid;gap:var(--s-7)}
.section-head{margin-bottom:var(--s-7);max-width:var(--measure)}
.section-head p{margin-top:var(--s-4)}

.eyebrow{
  font-size:0.75rem;letter-spacing:0.125em;text-transform:uppercase;
  font-weight:500;color:var(--coral);display:block;margin-bottom:var(--s-4);
}
.band--cream .eyebrow,.band--card .eyebrow{color:var(--coral-deep)}
.band--coral .eyebrow{color:#d9ab63}

/* ---------- Header ---------- */
.site-header{border-bottom:1px solid var(--edge-dark)}
.site-header .container{
  display:flex;flex-wrap:wrap;align-items:baseline;justify-content:space-between;
  gap:var(--s-3) var(--s-6);padding-block:var(--s-4);
}
.brand{font-family:var(--font-display);font-size:1.375rem;letter-spacing:-0.01em;
  color:var(--paper);text-decoration:none}
.site-nav ul{display:flex;flex-wrap:wrap;gap:var(--s-2) var(--s-5);list-style:none;padding:0;margin:0}
.site-nav a{color:var(--muted);text-decoration:none;font-size:0.9375rem;padding-bottom:3px}
.site-nav a:hover{color:var(--paper)}
.site-nav a[aria-current="page"]{color:var(--paper);border-bottom:2px solid var(--coral)}

/* ---------- Hero ---------- */
.hero{padding-block:var(--s-8)}
.hero .lead{font-size:clamp(1.0625rem,2.5vw,1.25rem);color:var(--muted);
  max-width:var(--measure);margin-top:var(--s-5)}
.hero-actions{display:flex;flex-wrap:wrap;gap:var(--s-3);margin-top:var(--s-6)}

/* ---------- Photo hero ---------- */
.hero--photo{background-size:cover;background-position:center 30%;}
.hero--photo .lead{color:#d8d2c6}

/* ---------- Buttons ---------- */
.btn{
  display:inline-flex;align-items:center;gap:var(--s-2);
  padding:12px 22px;border-radius:var(--r-sm);border:1px solid transparent;
  font-weight:500;font-size:0.9375rem;text-decoration:none;cursor:pointer;
  font-family:var(--font-body);white-space:nowrap;
}
.btn--primary{background:var(--coral);color:var(--ink)}
.btn--primary:active{background:var(--coral-press);color:var(--cream)}
.btn--ghost{border-color:var(--edge-dark);color:var(--paper);background:transparent}
.band--cream .btn--ghost,.band--card .btn--ghost{border-color:var(--border-strong);color:var(--ink)}
.btn--dark{background:var(--canvas-dark);color:var(--paper)}
.btn--dark:active{background:#000}

/* ---------- Grids & cards ---------- */
.grid{display:grid;gap:var(--s-4)}
.card{background:var(--cream-card);border-radius:var(--r-md);padding:var(--s-6)}
.card h3{margin-bottom:var(--s-3)}
.card p{color:var(--ink-soft);font-size:0.9375rem}
.card .card-icon{color:var(--coral-deep);margin-bottom:var(--s-4)}
.card--dark{background:var(--surface-dark);border:1px solid var(--edge-dark)}
.card--dark p{color:var(--muted)}

/* ---------- Video tiles ---------- */
.card--tile{padding:0;overflow:hidden}
.card--tile .tile-media{display:block;position:relative}
.mute-btn{position:absolute;right:var(--s-3);bottom:var(--s-3);display:inline-flex;align-items:center;justify-content:center;
  width:40px;height:40px;border-radius:var(--r-pill);border:1px solid rgba(247,241,228,0.35);
  background:rgba(26,21,18,0.75);color:var(--paper);cursor:pointer;padding:0}
.mute-btn:active{background:var(--canvas-dark)}
.mute-btn .icon-on,.mute-btn.is-on .icon-off{display:none}
.mute-btn.is-on .icon-on{display:block}
.card--tile .tile-media img,.card--tile .tile-media video{width:100%;height:auto;aspect-ratio:16/9;object-fit:cover;display:block}
.card--tile .tile-body{padding:var(--s-6);display:flex;flex-direction:column;gap:var(--s-3)}
.card--tile h3{margin:0}
.card--tile .rec-link{font-weight:500;font-size:0.9375rem}

/* ---------- Stats ---------- */
.stats{display:grid;grid-template-columns:repeat(2,1fr);gap:var(--s-6) var(--s-5)}
.stat-num{font-family:var(--font-display);font-weight:500;line-height:1;
  font-size:clamp(2.5rem,7vw,3.75rem);color:var(--coral);display:block;margin-bottom:var(--s-2)}
.stat-label{color:var(--muted);font-size:0.9375rem;max-width:22ch}

/* ---------- Timeline ---------- */
.timeline{list-style:none;padding:0;margin:0;border-left:1px solid var(--edge-dark)}
.timeline li{position:relative;padding:0 0 var(--s-7) var(--s-6)}
.timeline li:last-child{padding-bottom:0}
.timeline li::before{content:"";position:absolute;left:-5px;top:7px;width:9px;height:9px;
  border-radius:50%;background:var(--coral)}
.timeline time,.timeline .tl-label{font-size:0.75rem;letter-spacing:0.125em;text-transform:uppercase;
  font-weight:500;color:var(--coral);display:block;margin-bottom:var(--s-2)}
.timeline h3{margin-bottom:var(--s-2)}
.timeline p{color:var(--muted);max-width:var(--measure)}

/* ---------- Process steps ---------- */
.steps{display:grid;gap:var(--s-6);counter-reset:step}
.step{border-top:1px solid var(--edge-dark);padding-top:var(--s-5)}
.step-num{font-family:var(--font-display);font-size:2.5rem;line-height:1;
  color:var(--coral);display:block;margin-bottom:var(--s-3)}
.step h3{margin-bottom:var(--s-2)}
.step p{color:var(--muted);font-size:0.9375rem}

/* ---------- Tables ---------- */
.table-wrap{overflow-x:auto}
table{width:100%;border-collapse:collapse;font-size:0.9375rem;min-width:680px}
caption{text-align:left;font-family:var(--font-display);font-size:1.375rem;padding-bottom:var(--s-4)}
th{font-size:0.75rem;letter-spacing:0.125em;text-transform:uppercase;font-weight:500;
  color:var(--muted);text-align:left;padding:0 var(--s-5) var(--s-3) 0;
  border-bottom:1px solid var(--edge-dark)}
td{padding:var(--s-4) var(--s-5) var(--s-4) 0;border-bottom:1px solid var(--edge-dark);
  vertical-align:top;color:var(--paper)}
td.work{font-family:var(--font-display);font-size:1.1875rem}
td .muted{display:block;font-size:0.875rem}

/* ---------- Events ---------- */
.event-list{list-style:none;padding:0;margin:0}
.event{display:grid;grid-template-columns:72px 1fr;gap:var(--s-5);
  padding-block:var(--s-5);border-bottom:1px solid var(--border)}
.event-date{text-align:center;border-right:1px solid var(--border);padding-right:var(--s-4)}
.event-date .month{font-size:0.75rem;letter-spacing:0.125em;text-transform:uppercase;
  font-weight:500;color:var(--coral-deep);display:block}
.event-date .day{font-family:var(--font-display);font-size:2.25rem;line-height:1.1;display:block}
.event h3{margin-bottom:var(--s-1)}
.event .event-meta{color:var(--ink-soft);font-size:0.9375rem}
.event .event-role{font-size:0.8125rem;letter-spacing:0.06em;text-transform:uppercase;
  color:var(--coral-deep);font-weight:500;margin-top:var(--s-2);display:inline-block}

/* ---------- Teaching calendar ---------- */
.cal{border:1px solid var(--border);border-radius:var(--r-md);padding:var(--s-5);background:var(--cream)}
.cal-head{display:flex;align-items:center;justify-content:space-between;gap:var(--s-3);margin-bottom:var(--s-4)}
.cal-head h3{font-size:1.375rem;margin:0}
.cal-nav{display:inline-flex;align-items:center;justify-content:center;width:36px;height:36px;
  border-radius:var(--r-sm);border:1px solid var(--border-strong);background:transparent;color:var(--ink);cursor:pointer;font:inherit;padding:0}
.cal-nav:active{background:var(--cream-card)}
.cal-grid{display:grid;grid-template-columns:repeat(7,1fr);gap:4px}
.cal-dow{text-align:center;font-size:0.6875rem;letter-spacing:0.1em;text-transform:uppercase;font-weight:500;color:var(--ink-soft);padding-bottom:var(--s-2)}
.cal-day{min-height:44px;border-radius:var(--r-sm);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;font-size:0.9375rem;color:var(--ink-soft)}
.cal-day--avail{background:var(--cream-card);color:var(--ink);border:0;font:inherit;cursor:pointer;padding:0}
.cal-day--avail:active{background:var(--border)}
.cal-day--sel{outline:2px solid var(--coral-deep);outline-offset:-2px}
.cal-day--avail .cal-dot{width:5px;height:5px;border-radius:50%;background:var(--coral-deep)}
.cal-day--past{opacity:0.4}
.cal-day--today{outline:2px solid var(--coral);outline-offset:-2px;font-weight:500}
.cal-legend{display:flex;flex-wrap:wrap;gap:var(--s-2) var(--s-5);margin-top:var(--s-4);font-size:0.8125rem;color:var(--ink-soft)}
.cal-legend span{display:inline-flex;align-items:center;gap:var(--s-2)}
.cal-legend .cal-dot{width:6px;height:6px;border-radius:50%;background:var(--coral-deep);display:inline-block}
.cal--embed{padding:var(--s-3)}
.cal-fallback{font-size:0.8125rem;color:var(--ink-soft);padding:var(--s-3) var(--s-2) var(--s-2)}
.slots{margin-top:var(--s-5);border-top:1px solid var(--border);padding-top:var(--s-5)}
.slots h4{font-family:var(--font-display);font-weight:500;font-size:1.25rem;margin:0 0 var(--s-2);letter-spacing:-0.01em}
.slots .slots-hint{font-size:0.8125rem;color:var(--ink-soft);margin-bottom:var(--s-4)}
.slot-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--s-2)}
@media (min-width:46rem){.slot-grid{grid-template-columns:repeat(4,1fr)}}
.slot{display:block;text-align:center;padding:9px 4px;border:1px solid var(--border-strong);border-radius:var(--r-sm);
  font-size:0.875rem;font-weight:500;color:var(--ink);text-decoration:none;background:transparent}
.slot:active{background:var(--cream-card)}

/* ---------- Wedding list ---------- */
.wedding-cols{display:grid;gap:var(--s-6)}
.wedding-list{list-style:none;padding:0;margin:var(--s-4) 0 0}
.wedding-list li{display:flex;gap:var(--s-4);align-items:baseline;padding:10px 0;border-bottom:1px solid var(--border);font-size:0.9375rem}
.wedding-list .wd{font-weight:500;color:var(--coral-deep);flex:0 0 4.5em}
.wedding-list .wv{color:var(--ink-soft)}

/* ---------- Recordings ---------- */
.rec-card{display:flex;flex-direction:column;gap:var(--s-3)}
.rec-card .rec-tag{font-size:0.75rem;letter-spacing:0.125em;text-transform:uppercase;
  font-weight:500;color:var(--coral-deep)}
.rec-card h3{font-size:1.625rem}
.rec-card .rec-meta{font-size:0.875rem;color:var(--ink-soft)}
.rec-card .rec-link{margin-top:auto;font-weight:500;font-size:0.9375rem}

/* ---------- Video embeds ---------- */
.video-card{margin:0;border-radius:var(--r-md);overflow:hidden;background:var(--surface-dark);aspect-ratio:16/9}
.video-card iframe{width:100%;height:100%;border:0;display:block}

/* ---------- FAQ ---------- */
.faq details{border-bottom:1px solid var(--edge-dark)}
.faq summary{
  cursor:pointer;list-style:none;display:flex;justify-content:space-between;
  align-items:baseline;gap:var(--s-5);padding-block:var(--s-5);
  font-family:var(--font-display);font-size:1.375rem;letter-spacing:-0.01em;
}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";font-family:var(--font-body);color:var(--coral);
  font-size:1.375rem;line-height:1;flex-shrink:0}
.faq details[open] summary::after{content:"\2212"}
.faq details p{color:var(--muted);padding:0 0 var(--s-5);max-width:var(--measure)}

/* ---------- Forms ---------- */
.form-grid{display:grid;gap:var(--s-5)}
.field label{display:block;font-size:0.875rem;font-weight:500;margin-bottom:var(--s-2)}
.field input,.field select,.field textarea{
  width:100%;padding:12px 14px;border:1px solid var(--border-strong);
  border-radius:var(--r-sm);background:#fff;color:var(--ink);font:inherit;font-size:1rem;
}
.field textarea{resize:vertical;min-height:140px}
.field input:focus-visible,.field select:focus-visible,.field textarea:focus-visible{
  outline:2px solid var(--coral-deep);outline-offset:1px}
.field .hint{font-size:0.8125rem;color:var(--ink-soft);margin-top:var(--s-2)}

/* ---------- Media ---------- */
.photo{border-radius:var(--r-lg);overflow:hidden;background:var(--surface-dark)}
.photo img{width:100%;height:100%;object-fit:cover}
figure{margin:0}
figcaption{font-size:0.8125rem;color:var(--muted);margin-top:var(--s-3)}
.band--cream figcaption,.band--card figcaption{color:var(--ink-soft)}

blockquote{margin:0;font-family:var(--font-display);font-size:clamp(1.5rem,4vw,2.25rem);
  line-height:1.25;letter-spacing:-0.01em;max-width:26ch}
blockquote+p{margin-top:var(--s-5)}

/* ---------- Quote rotation ---------- */
.quote-rotator{display:grid}
.quote-rotator blockquote{grid-area:1/1;max-width:56ch;font-size:clamp(1.25rem,3vw,1.875rem);opacity:0;animation:quoteFade 36s infinite}
.quote-rotator blockquote:nth-child(1){animation-delay:0s}
.quote-rotator blockquote:nth-child(2){animation-delay:9s}
.quote-rotator blockquote:nth-child(3){animation-delay:18s}
.quote-rotator blockquote:nth-child(4){animation-delay:27s}
@keyframes quoteFade{0%{opacity:0}2.5%{opacity:1}22.5%{opacity:1}25%{opacity:0}100%{opacity:0}}
@media (prefers-reduced-motion:reduce){
  .quote-rotator blockquote{animation:none;opacity:1}
  .quote-rotator blockquote:not(:first-child){display:none}
}

/* ---------- Contact info list ---------- */
.contact-list{list-style:none;padding:0;margin:0;display:grid;gap:var(--s-4)}
.contact-list li{display:flex;gap:var(--s-3);align-items:flex-start}
.contact-list svg{flex-shrink:0;color:var(--coral-deep);margin-top:3px}

/* ---------- Footer ---------- */
.site-footer{background:var(--footer-dark);border-top:1px solid var(--edge-dark);
  padding-block:var(--s-8) var(--s-6);color:var(--muted);font-size:0.9375rem}
.footer-grid{display:grid;gap:var(--s-7)}
.footer-brand{font-family:var(--font-display);font-size:1.375rem;color:var(--paper);
  text-decoration:none;display:inline-block;margin-bottom:var(--s-3)}
.footer-tag{max-width:34ch}
.footer-head{font-size:0.75rem;letter-spacing:0.125em;text-transform:uppercase;
  font-weight:500;color:var(--paper);margin:0 0 var(--s-4);font-family:var(--font-body)}
.footer-links{list-style:none;padding:0;margin:0;display:grid;gap:var(--s-2)}
.footer-links a{color:var(--muted);text-decoration:none}
.footer-links a:hover{color:var(--paper);text-decoration:underline}
.social{display:flex;gap:var(--s-4);margin-top:var(--s-4)}
.social a{color:var(--muted);display:inline-flex}
.social a:hover{color:var(--paper)}
.footer-bottom{margin-top:var(--s-7);padding-top:var(--s-5);border-top:1px solid var(--edge-dark);
  display:flex;flex-wrap:wrap;gap:var(--s-3) var(--s-6);justify-content:space-between;font-size:0.875rem}

/* ---------- Responsive ---------- */
@media (min-width:46rem){
  .band{padding-block:var(--s-9)}
  .hero{padding-block:var(--s-9)}
  .grid--2{grid-template-columns:repeat(2,1fr)}
  .grid--3{grid-template-columns:repeat(3,1fr)}
  .grid--4{grid-template-columns:repeat(2,1fr)}
  .stats{grid-template-columns:repeat(4,1fr)}
  .steps{grid-template-columns:repeat(3,1fr)}
  .footer-grid{grid-template-columns:2fr 1fr 1fr}
  .wedding-cols{grid-template-columns:1fr 1fr}
  .event{grid-template-columns:88px 1fr auto;align-items:start}
  .event .event-role{margin-top:0;justify-self:end}
}
@media (min-width:64rem){
  .split--5-7{grid-template-columns:5fr 7fr;align-items:start}
  .split--7-5{grid-template-columns:7fr 5fr;align-items:start}
  .split--gap-lg{gap:var(--s-9)}
}
@media (prefers-reduced-motion:no-preference){
  html{scroll-behavior:smooth}
}

/* ---------- Clip rotation arrows ---------- */
.tile-media{position:relative}
.clip-arrow{position:absolute;top:50%;transform:translateY(-50%);
  display:inline-flex;align-items:center;justify-content:center;
  width:32px;height:32px;border-radius:var(--r-pill);border:none;cursor:pointer;
  background:rgba(20,20,19,0.55);color:var(--cream)}
.clip-arrow--prev{left:8px}
.clip-arrow--next{right:8px}
.clip-arrow:active{background:rgba(20,20,19,0.8)}

.tile-media video{transition:opacity 0.3s ease}
.tile-media video.is-fading{opacity:0}
@media (prefers-reduced-motion:reduce){.tile-media video{transition:none}}

/* ---------- Choir tag ---------- */
.choir-tag{display:inline-block;margin-top:var(--s-2);padding:3px 10px;border-radius:var(--r-pill);
  font-size:0.75rem;letter-spacing:0.08em;text-transform:uppercase;font-weight:500;
  color:var(--coral-deep);border:1px solid var(--border-strong)}

/* ---------- Show-more events ---------- */
.event-more summary{cursor:pointer;list-style:none;display:inline-flex;align-items:center;gap:var(--s-2);
  margin-top:var(--s-5);padding:10px 20px;border:1px solid var(--border-strong);border-radius:var(--r-sm);
  font-weight:500;font-size:0.9375rem;color:var(--ink)}
.event-more summary::-webkit-details-marker{display:none}
.event-more summary::after{content:"\2193";color:var(--coral-deep)}
.event-more[open] summary{display:none}

/* ---------- Repertoire groups ---------- */
.rep-group{border-bottom:1px solid var(--edge-dark)}
.rep-group summary{cursor:pointer;list-style:none;display:flex;justify-content:space-between;
  align-items:baseline;gap:var(--s-5);padding-block:var(--s-5);
  font-family:var(--font-display);font-size:1.625rem;letter-spacing:-0.01em}
.rep-group summary::-webkit-details-marker{display:none}
.rep-group summary::after{content:"+";font-family:var(--font-body);color:var(--coral);font-size:1.375rem;line-height:1}
.rep-group[open] summary::after{content:"\2212"}
.rep-group .table-wrap{padding-bottom:var(--s-6)}