/* =========================================================================
   Meridian Women's Chorus — site.css
   Design direction: "Ink & Noon"
   The logo is a hand-cut linocut sun. The palette is the printed program:
   ink, brass sun, petrol twilight, warm paper.
   ========================================================================= */

/* ---------- Tokens ---------- */
:root {
  /* Color */
  --ink:          #1c1b22;
  --ink-soft:     #4a4753;
  --petrol:       #14424e;
  --petrol-mid:   #1d5a69;
  --petrol-deep:  #0b2a32;
  --brass:        #b9821b;
  --brass-text:   #7d5406;
  --brass-bright: #e9b44c;
  --paper:        #f7f4ee;
  --paper-pure:   #fffdf9;
  --paper-shade:  #ebe4d7;
  --line:         #d8cfbe;

  /* Type */
  --font-display: "Fraunces", "Iowan Old Style", "Palatino Linotype", Palatino, Georgia, "Times New Roman", serif;
  --font-body: "Public Sans", "Segoe UI", system-ui, -apple-system, "Helvetica Neue", Arial, sans-serif;

  --step--1: clamp(0.875rem, 0.84rem + 0.18vw, 0.95rem);
  --step-0:  clamp(1.0625rem, 1.02rem + 0.22vw, 1.1875rem);
  --step-1:  clamp(1.25rem, 1.17rem + 0.4vw, 1.5rem);
  --step-2:  clamp(1.5rem, 1.36rem + 0.7vw, 2rem);
  --step-3:  clamp(1.875rem, 1.6rem + 1.35vw, 2.75rem);
  --step-4:  clamp(2.25rem, 1.75rem + 2.5vw, 4rem);

  /* Space */
  --gutter: clamp(1.25rem, 4vw, 3rem);
  --measure: 68ch;
  --wrap: 1180px;
  --wrap-narrow: 780px;

  --radius: 3px;
  --radius-lg: 6px;
  --shadow: 0 1px 2px rgba(11, 42, 50, 0.06), 0 8px 24px -12px rgba(11, 42, 50, 0.22);
  --focus: 3px solid var(--brass-text);
}

/* ---------- Reset ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body, h1, h2, h3, h4, p, ul, ol, figure, blockquote, dl, dd { margin: 0; }
ul[class], ol[class] { list-style: none; padding: 0; }
img, picture, svg, video { max-width: 100%; display: block; }
/* width/height attributes are there to reserve space and stop layout shift.
   Without this they would also fix the rendered height and squash the image. */
img { height: auto; }

/* A class that sets `display` beats the browser's [hidden] rule, which would
   leave "hidden" elements on screen. Nothing should outrank hidden. */
[hidden] { display: none !important; }
input, button, textarea, select { font: inherit; color: inherit; }
button { cursor: pointer; }

html { scroll-behavior: smooth; scroll-padding-top: 6rem; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
  }
}

body {
  background: var(--paper);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: var(--step-0);
  line-height: 1.65;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  overflow-x: hidden;
}

/* ---------- Focus & skip link ---------- */
:focus { outline: var(--focus); outline-offset: 2px; }
:focus:not(:focus-visible) { outline: none; }
:focus-visible { outline: var(--focus); outline-offset: 2px; border-radius: 2px; }
.on-dark :focus-visible,
.site-footer :focus-visible,
.hero :focus-visible { outline-color: var(--brass-bright); }

.skip-link {
  position: absolute;
  left: 1rem;
  top: -100%;
  z-index: 999;
  background: var(--brass-bright);
  color: var(--petrol-deep);
  padding: 0.75rem 1.25rem;
  font-weight: 700;
  border-radius: 0 0 var(--radius) var(--radius);
  text-decoration: none;
  transition: top 0.15s ease-out;
}
.skip-link:focus { top: 0; }

.visually-hidden {
  position: absolute !important;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%);
  white-space: nowrap; border: 0;
}

/* ---------- Typography ---------- */
h1, h2, h3, h4, .display {
  font-family: var(--font-display);
  font-weight: 600;
  line-height: 1.12;
  font-variation-settings: "SOFT" 30, "WONK" 1, "opsz" 40;
  letter-spacing: -0.012em;
  text-wrap: balance;
}
h1 { font-size: var(--step-4); }
h2 { font-size: var(--step-3); }
h3 { font-size: var(--step-2); }
h4 { font-size: var(--step-1); }

p, li { text-wrap: pretty; }
p + p { margin-top: 1em; }

a { color: var(--brass-text); text-decoration-thickness: 1px; text-underline-offset: 0.2em; }
a:hover { color: var(--petrol); text-decoration-thickness: 2px; }

.eyebrow {
  font-size: var(--step--1);
  text-transform: uppercase;
  letter-spacing: 0.14em;
  font-weight: 700;
  color: var(--brass-text);
  display: flex;
  align-items: center;
  gap: 0.6rem;
  margin-bottom: 0.85rem;
}
.eyebrow .rays { flex: none; width: 1.15em; height: 1.15em; }
.eyebrow .rays circle { fill: currentColor; }
.eyebrow .rays path { fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; }
.on-dark .eyebrow { color: var(--brass-bright); }

.lede {
  font-size: var(--step-1);
  line-height: 1.5;
  color: var(--ink-soft);
  max-width: 46ch;
}
.on-dark .lede,
.hero .lede,
.page-banner .lede { color: rgba(247, 244, 238, 0.92); }

/* ---------- Layout ---------- */
.wrap { width: min(100% - (var(--gutter) * 2), var(--wrap)); margin-inline: auto; }
.wrap-narrow { width: min(100% - (var(--gutter) * 2), var(--wrap-narrow)); margin-inline: auto; }
main { flex: 1 0 auto; }

.section { padding-block: clamp(3rem, 8vw, 6rem); }
.section-tight { padding-block: clamp(2rem, 5vw, 3.5rem); }
.section-petrol { background: var(--petrol-deep); color: var(--paper); }
.section-shade { background: var(--paper-shade); }
/* Links in running text on the dark sections — rare in the source, but an
   editor can add one anywhere (page-edit.js), and the default brass is
   unreadable on petrol. */
.page-banner a:not(.btn), .section-petrol a:not(.btn), .hero a:not(.btn) { color: var(--brass-bright); }
.page-banner a:not(.btn):hover, .section-petrol a:not(.btn):hover, .hero a:not(.btn):hover { color: var(--paper-pure); }
.section-head { max-width: 60ch; margin-bottom: clamp(1.75rem, 4vw, 2.75rem); }

.grid { display: grid; gap: clamp(1.5rem, 3vw, 2.5rem); }
@media (min-width: 48em) {
  .grid-2 { grid-template-columns: repeat(2, 1fr); }
  .grid-3 { grid-template-columns: repeat(3, 1fr); }
}
@media (min-width: 64em) {
  .grid-sidebar { grid-template-columns: minmax(0, 1.7fr) minmax(16rem, 1fr); gap: clamp(2rem, 5vw, 4rem); }
}

/* ---------- Header ---------- */
.site-header {
  background: var(--petrol-deep);
  color: var(--paper);
  position: sticky;
  top: 0;
  z-index: 100;
  border-bottom: 1px solid rgba(233, 180, 76, 0.28);
}
.header-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 0.5rem 1rem;
  padding-block: 0.6rem;
}
/* Without JavaScript the toggle cannot work, so the nav stays visible. */
html:not(.js) .nav-toggle { display: none; }
.brand { display: flex; align-items: center; gap: 0.75rem; text-decoration: none; color: inherit; padding: 0.25rem; }
/* Overrides the site-wide a:hover (var(--petrol), a dark teal) which reads
   as almost no contrast at all against this header's near-black background. */
.brand:hover, .brand:focus-visible { color: var(--brass-bright); }
.brand img { height: clamp(2.1rem, 5vw, 2.6rem); width: auto; }
.brand-text { display: none; }
@media (min-width: 30em) { .brand-text { display: block; } }
.brand-text .name {
  font-family: var(--font-display);
  font-size: 1.05rem;
  line-height: 1.05;
  font-weight: 600;
  letter-spacing: -0.01em;
}
.brand-text .place {
  font-size: 0.72rem;
  text-transform: uppercase;
  letter-spacing: 0.16em;
  color: var(--brass-bright);
}

.nav-toggle {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  background: transparent;
  color: var(--paper);
  border: 1px solid rgba(247, 244, 238, 0.45);
  border-radius: var(--radius);
  padding: 0.6rem 0.9rem;
  min-height: 44px;
  font-size: 0.9rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
.nav-toggle:hover { background: rgba(233, 180, 76, 0.16); border-color: var(--brass-bright); }
.nav-toggle .bars { width: 1.1rem; height: 0.8rem; position: relative; }
.nav-toggle .bars span {
  position: absolute; left: 0; right: 0; height: 2px; background: currentColor;
}
.nav-toggle .bars span:nth-child(1) { top: 0; }
.nav-toggle .bars span:nth-child(2) { top: 50%; transform: translateY(-50%); }
.nav-toggle .bars span:nth-child(3) { bottom: 0; }
.nav-toggle[aria-expanded="true"] { background: rgba(233, 180, 76, 0.18); border-color: var(--brass-bright); }

.site-nav ul { display: flex; flex-wrap: wrap; gap: 0.15rem; list-style: none; margin: 0; padding: 0; }
.site-nav a {
  display: block;
  padding: 0.65rem 0.7rem;
  color: var(--paper);
  text-decoration: none;
  font-size: 0.95rem;
  border-radius: var(--radius);
  border-bottom: 2px solid transparent;
}
.site-nav a:hover { background: rgba(233, 180, 76, 0.14); color: var(--brass-bright); }
.site-nav a[aria-current="page"] { border-bottom-color: var(--brass-bright); color: var(--brass-bright); font-weight: 700; }

@media (max-width: 61.99em) {
  .site-nav { flex-basis: 100%; padding-bottom: 0.5rem; }
  html.js .site-nav { display: none; }
  html.js .site-nav.is-open { display: block; }
  .site-nav ul { flex-direction: column; gap: 0; }
  .site-nav a {
    padding: 0.85rem 0.5rem;
    min-height: 44px;
    border-bottom: 1px solid rgba(247, 244, 238, 0.14);
    border-radius: 0;
  }
  .site-nav a[aria-current="page"] {
    border-bottom-color: rgba(247, 244, 238, 0.14);
    box-shadow: inset 3px 0 0 var(--brass-bright);
    padding-left: 0.9rem;
  }
}
@media (min-width: 62em) {
  .nav-toggle { display: none; }
  .site-nav { display: block !important; }
}

/* ---------- Buttons ---------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  min-height: 48px;
  padding: 0.7rem 1.4rem;
  border-radius: var(--radius);
  border: 2px solid transparent;
  font-weight: 700;
  font-size: 1rem;
  text-decoration: none;
  letter-spacing: 0.01em;
  transition: background-color 0.15s ease, color 0.15s ease, border-color 0.15s ease, transform 0.15s ease;
}
.btn:hover { transform: translateY(-1px); }
.btn-primary { background: var(--brass-bright); color: var(--petrol-deep); border-color: var(--brass-bright); }
.btn-primary:hover { background: #f4c66d; color: var(--petrol-deep); border-color: #f4c66d; }
.btn-solid { background: var(--petrol); color: var(--paper-pure); border-color: var(--petrol); }
.btn-solid:hover { background: var(--petrol-deep); color: var(--paper-pure); border-color: var(--petrol-deep); }
.btn-ghost { border-color: currentColor; color: inherit; background: transparent; }
.btn-ghost:hover { background: rgba(233, 180, 76, 0.16); color: inherit; }
.btn-ink, .btn-ink:hover { color: var(--petrol); }
.btn-small { min-height: 40px; padding: 0.4rem 0.9rem; font-size: 0.9rem; }
.btn-row { display: flex; flex-wrap: wrap; gap: 0.85rem; margin-top: 1.75rem; }

/* ---------- Hero (signature: the ray field) ---------- */
.hero {
  position: relative;
  background: var(--petrol-deep);
  color: var(--paper);
  overflow: hidden;
  isolation: isolate;
}
.hero::after {
  /* horizon glow: the sun at its meridian */
  content: "";
  position: absolute;
  inset: auto 0 -30% 0;
  height: 60%;
  background: radial-gradient(60% 100% at 30% 100%, rgba(233, 180, 76, 0.20), transparent 70%);
  z-index: -1;
  pointer-events: none;
}
.hero-rays {
  position: absolute;
  top: 42%;
  left: 50%;
  width: min(210vw, 1900px);
  aspect-ratio: 1;
  transform: translate(-50%, -50%);
  z-index: -1;
  opacity: 0.4;
  pointer-events: none;
  /* Hollow out the middle: the logo has its own rays and the two sets
     must not tangle. What is left reads as a halo around the page. */
  -webkit-mask-image: radial-gradient(circle at center, transparent 0 33%, #000 45%, #000 70%, transparent 88%);
  mask-image: radial-gradient(circle at center, transparent 0 33%, #000 45%, #000 70%, transparent 88%);
}
@media (min-width: 60em) {
  .hero-rays { left: 34%; top: 50%; width: min(150vw, 1500px); }
}
@media (max-width: 59.99em) {
  /* On a phone the rays would sit behind the paragraph text. Pull them up
     behind the logo and quieten them down. */
  .hero-rays { top: 26%; opacity: 0.22; }
}
/* Animation lives inside rays.svg so each ray can extend on its own delay. */
.hero-inner {
  position: relative;
  display: grid;
  gap: clamp(2rem, 5vw, 3.5rem);
  padding-block: clamp(2.5rem, 7vw, 5rem);
  align-items: center;
}
@media (min-width: 60em) {
  .hero-inner { grid-template-columns: minmax(0, 1fr) minmax(20rem, 27rem); }
}
.hero-logo {
  width: min(100%, 30rem);
  margin-bottom: clamp(1.25rem, 3vw, 1.75rem);
  filter: drop-shadow(0 10px 30px rgba(0, 0, 0, 0.35));
}
.hero h1 { margin: 0; line-height: 0; }
.hero-tagline {
  font-family: var(--font-display);
  font-size: var(--step-2);
  font-style: italic;
  font-weight: 400;
  line-height: 1.25;
  max-width: 26ch;
  color: var(--paper);
  margin-bottom: 1rem;
}
.hero-tagline em { font-style: normal; font-weight: 700; color: var(--brass-bright); }
.hero .hero-meta {
  margin-top: 1.5rem;
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem 1.5rem;
  font-size: var(--step--1);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: rgba(247, 244, 238, 0.75);
}

/* Next-concert card */
.card-concert {
  background: var(--paper-pure);
  color: var(--ink);
  border-radius: var(--radius-lg);
  padding: clamp(1.5rem, 3vw, 2rem);
  box-shadow: 0 24px 60px -30px rgba(0, 0, 0, 0.7);
  border-top: 5px solid var(--brass);
}
.card-concert .when {
  font-family: var(--font-display);
  font-size: var(--step-2);
  line-height: 1.1;
  margin: 0.35rem 0 0.15rem;
}
.card-concert dl { margin: 1.25rem 0 0; display: grid; grid-template-columns: auto 1fr; gap: 0.5rem 1rem; font-size: var(--step--1); }
.card-concert dt { font-weight: 700; text-transform: uppercase; letter-spacing: 0.08em; color: var(--ink-soft); }
.card-concert dd { margin: 0; }

/* ---------- Cards ---------- */
.card {
  background: var(--paper-pure);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  padding: clamp(1.25rem, 3vw, 1.85rem);
  height: 100%;
  display: flex;
  flex-direction: column;
}
.card h3 { margin-bottom: 0.5rem; }
.card p { color: var(--ink-soft); }
.card .btn { margin-top: auto; align-self: flex-start; }
.card > * + * { margin-top: 0.85rem; }
/* height:100% only makes sense when a .card is itself a grid/flex item being
   stretched to match its row (e.g. the home page's 3-up cards). Nested
   after another element in normal flow — like the FAQ card that follows a
   photo inside the Sing With Us sidebar — it instead makes the card try to
   be as tall as its whole parent measured from the top, overshooting the
   parent's own bottom edge by roughly the height of whatever came before
   it, which is what was bleeding into the footer. */
aside .card { height: auto; }

.card-link {
  display: block;
  text-decoration: none;
  color: inherit;
  transition: transform 0.15s ease, box-shadow 0.15s ease, border-color 0.15s ease;
}
.card-link:hover { transform: translateY(-3px); box-shadow: var(--shadow); border-color: var(--brass); color: inherit; }
.card-link:hover h3 { color: var(--brass-text); }

/* ---------- People ---------- */
.person {
  display: grid;
  gap: clamp(1rem, 3vw, 2rem);
  padding-block: clamp(1.75rem, 4vw, 2.5rem);
  border-top: 1px solid var(--line);
}
.person:first-of-type { border-top: 0; }
@media (min-width: 40em) {
  .person { grid-template-columns: minmax(9rem, 15rem) minmax(0, 1fr); align-items: start; }
}
.person img { border-radius: var(--radius-lg); width: 100%; height: auto; background: var(--paper-shade); }
.person .role {
  font-size: var(--step--1);
  text-transform: uppercase;
  letter-spacing: 0.12em;
  font-weight: 700;
  color: var(--brass-text);
  margin-bottom: 0.2rem;
}
.person h3 { margin-bottom: 0.75rem; }
.person-body > * + * { margin-top: 0.9rem; }
.no-photo {
  aspect-ratio: 4 / 5;
  display: grid;
  place-items: center;
  background: var(--paper-shade);
  border-radius: var(--radius-lg);
  color: var(--petrol);
  padding: 1rem;
}
.no-photo img { width: 62%; opacity: 0.35; background: none; }

.roster { display: flex; flex-wrap: wrap; gap: 0.6rem; list-style: none; padding: 0; margin: 1rem 0 0; }
.roster li {
  background: var(--paper-shade);
  border-radius: 100px;
  padding: 0.4rem 1rem;
  font-size: var(--step--1);
}

/* ---------- Timeline (a real chronology, so it is dated) ---------- */
.timeline { list-style: none; margin: 0; padding: 0; position: relative; }
.timeline::before {
  content: "";
  position: absolute;
  left: 0.45rem;
  top: 0.6rem;
  bottom: 0.6rem;
  width: 2px;
  background: linear-gradient(var(--brass), var(--line));
}
.timeline > li { position: relative; padding: 0 0 2rem 2.5rem; }
.timeline > li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.45rem;
  width: 1rem;
  height: 1rem;
  border-radius: 50%;
  background: var(--paper);
  border: 3px solid var(--brass);
}
.timeline > li:last-child { padding-bottom: 0; }
.timeline .year {
  font-family: var(--font-display);
  font-size: var(--step-1);
  font-weight: 700;
  color: var(--petrol);
  display: block;
  line-height: 1.1;
}
.timeline .who { font-weight: 700; }
.section-petrol .timeline .year { color: var(--brass-bright); }
.section-petrol .timeline > li::before { background: var(--petrol-deep); }

/* ---------- Prose (used by blog posts and long text pages) ---------- */
.prose { max-width: var(--measure); }
.prose > * + * { margin-top: 1.1em; }
.prose h2 { font-size: var(--step-2); margin-top: 2em; clear: both; }
.prose h3 { font-size: var(--step-1); margin-top: 1.6em; clear: both; }
.prose ul, .prose ol { padding-left: 1.4em; }
.prose li + li { margin-top: 0.4em; }
.prose blockquote {
  border-left: 4px solid var(--brass);
  padding: 0.35em 0 0.35em 1.2em;
  margin-left: 0;
  font-family: var(--font-display);
  font-size: var(--step-1);
  font-style: italic;
  color: var(--petrol);
}
.prose hr { clear: both; border: 0; border-top: 1px solid var(--line); margin-block: 2.5em; }
.prose code {
  background: var(--paper-shade);
  padding: 0.1em 0.35em;
  border-radius: var(--radius);
  font-size: 0.9em;
}
.prose table { width: 100%; border-collapse: collapse; }
.prose th, .prose td { border: 1px solid var(--line); padding: 0.6em 0.8em; text-align: left; }
.prose th { background: var(--paper-shade); }

/* Figures: images, embeds and carousels share the alignment system */
.prose figure,
.mc-figure {
  margin: 1.6em 0;
  background: transparent;
}
.mc-figure { position: relative; border-radius: var(--radius-lg); overflow: hidden; }
.mc-figure img { border-radius: var(--radius-lg); width: 100%; height: auto; display: block; }
.prose figcaption {
  font-size: var(--step--1);
  color: var(--ink-soft);
  padding-top: 0.6rem;
  line-height: 1.45;
}
/* A caption on a picture reads as a scrim over its own bottom edge, the way
   a captioned photo in a magazine or gallery does, rather than as a line of
   text floating underneath it. */
.mc-figure figcaption {
  position: absolute; left: 0; right: 0; bottom: 0;
  background: linear-gradient(to top, rgba(11, 42, 50, 0.88), rgba(11, 42, 50, 0.75) 70%, transparent);
  color: var(--paper);
  padding: 1.75rem 1rem 0.7rem;
  font-size: var(--step--1);
  line-height: 1.4;
}

/* Alignment / text-wrap options set by the editor */
.mc-figure.align-center { margin-inline: auto; width: 100%; }
.mc-figure.align-full { width: 100%; }
.mc-figure.align-left,
.mc-figure.align-right { width: min(50%, 22rem); }

@media (min-width: 45em) {
  .mc-figure.align-left  { float: left;  margin: 0.4em 2rem 1.4rem 0; }
  .mc-figure.align-right { float: right; margin: 0.4em 0 1.4rem 2rem; }
}
@media (max-width: 44.99em) {
  /* On narrow screens wrapped text becomes unreadable — stack instead */
  .mc-figure.align-left,
  .mc-figure.align-right { float: none; width: 100%; margin-inline: 0; }
}
.mc-figure.align-full {
  width: 100%;
}
@media (min-width: 75em) {
  .prose .mc-figure.align-full { width: calc(100% + 8rem); margin-left: -4rem; }
}

/* Responsive video embeds */
.mc-embed { position: relative; width: 100%; aspect-ratio: 16 / 9; background: var(--petrol-deep); border-radius: var(--radius-lg); overflow: hidden; }
.mc-embed iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }

/* ---------- Accessible carousel ---------- */
.mc-carousel { border: 1px solid var(--line); border-radius: var(--radius-lg); padding: 0.75rem; background: var(--paper-pure); }
.mc-carousel .carousel-track { list-style: none; margin: 0; padding: 0; }
.mc-carousel .carousel-slide { margin: 0; position: relative; border-radius: var(--radius); overflow: hidden; }
.mc-carousel .carousel-slide[hidden] { display: none; }
@media (prefers-reduced-motion: no-preference) {
  .mc-carousel .carousel-slide:not([hidden]) { animation: slide-in 0.28s ease-out; }
  @keyframes slide-in { from { opacity: 0; } to { opacity: 1; } }
}
.mc-carousel img { border-radius: var(--radius); width: 100%; height: auto; display: block; }
.mc-carousel .slide-caption {
  position: absolute; left: 0; right: 0; bottom: 0;
  background: linear-gradient(to top, rgba(11, 42, 50, 0.88), rgba(11, 42, 50, 0.75) 70%, transparent);
  color: var(--paper);
  padding: 1.5rem 0.85rem 0.6rem;
  font-size: var(--step--1);
  line-height: 1.4;
}
.carousel-controls {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding-top: 0.75rem;
}
.carousel-btn {
  min-width: 44px; min-height: 44px;
  display: grid; place-items: center;
  border: 1px solid var(--line);
  background: var(--paper);
  border-radius: var(--radius);
  color: var(--petrol);
}
.carousel-btn:hover { background: var(--brass-bright); border-color: var(--brass); color: var(--petrol-deep); }
.carousel-btn svg { width: 1.1rem; height: 1.1rem; fill: currentColor; }
.carousel-status { font-size: var(--step--1); color: var(--ink-soft); font-variant-numeric: tabular-nums; }
.carousel-dots { display: flex; gap: 0.3rem; margin-left: auto; flex-wrap: wrap; }
.carousel-dots button {
  width: 24px; height: 24px;
  display: grid; place-items: center;
  background: none; border: 0; border-radius: 50%; padding: 0;
}
.carousel-dots button::before {
  content: ""; width: 9px; height: 9px; border-radius: 50%;
  background: var(--line); border: 1px solid var(--ink-soft);
}
.carousel-dots button[aria-current="true"]::before { background: var(--brass); border-color: var(--brass-text); }

/* ---------- Blog listing ---------- */
.post-list { display: grid; gap: clamp(1.25rem, 3vw, 2rem); }
@media (min-width: 46em) { .post-list { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 70em) { .post-list { grid-template-columns: repeat(3, 1fr); } }
.post-card-wrap { position: relative; }
.post-card-edit-badge {
  position: absolute; top: 0.6rem; right: 0.6rem; z-index: 2;
  background: var(--petrol-deep); color: var(--paper);
  padding: 0.35rem 0.75rem; border-radius: var(--radius);
  font-size: var(--step--2); font-weight: 700; text-decoration: none;
  min-height: 32px; display: inline-flex; align-items: center;
}
.post-card-edit-badge:hover { background: var(--brass-text); color: var(--paper); }
.post-card { display: flex; flex-direction: column; overflow: hidden; padding: 0; }
.post-card .thumb { aspect-ratio: 16 / 9; object-fit: cover; width: 100%; background: var(--paper-shade); position: relative; }
.post-card .thumb-static img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.post-card .thumb-carousel .thumb-slide {
  position: absolute; inset: 0;
  opacity: 0; transition: opacity 0.8s ease;
}
.post-card .thumb-carousel .thumb-slide.is-active { opacity: 1; }
.post-card .thumb-carousel .thumb-slide img { width: 100%; height: 100%; object-fit: cover; display: block; }
/* Same treatment as the full carousel's caption, scaled down for a card. */
.post-card .thumb-caption {
  position: absolute; left: 0; right: 0; bottom: 0;
  background: linear-gradient(to top, rgba(11, 42, 50, 0.88), rgba(11, 42, 50, 0.75) 70%, transparent);
  color: var(--paper);
  padding: 1.25rem 0.75rem 0.5rem;
  font-size: var(--step--2);
  line-height: 1.35;
  display: block;
}
.post-card .post-card-body { padding: clamp(1.1rem, 2.5vw, 1.5rem); display: flex; flex-direction: column; gap: 0.6rem; flex: 1; }
.post-card h3 { font-size: var(--step-1); }
.post-meta {
  font-size: var(--step--1);
  color: var(--ink-soft);
  display: flex;
  flex-wrap: wrap;
  gap: 0.3rem 0.9rem;
  align-items: center;
}
.tag {
  display: inline-block;
  background: var(--paper-shade);
  color: var(--petrol);
  border-radius: 100px;
  padding: 0.15rem 0.7rem;
  font-size: 0.78rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  font-weight: 700;
}
.badge-draft { background: #f6e2c0; color: #6a4400; }

.tag-chips { display: flex; flex-wrap: wrap; gap: 0.5rem; }
.tag-chips:not(:empty) { margin-bottom: 0.75rem; }
.tag-chip {
  display: inline-flex; align-items: center; gap: 0.3rem;
  background: var(--paper-shade); color: var(--petrol);
  border-radius: 100px; padding: 0.3rem 0.3rem 0.3rem 0.9rem;
  font-size: 0.85rem; font-weight: 600;
}
.tag-chip button {
  display: inline-flex; align-items: center; justify-content: center;
  width: 32px; height: 32px; border-radius: 50%;
  background: transparent; border: 0; color: var(--petrol);
  font-size: 1.1rem; line-height: 1; padding: 0;
}
.tag-chip button:hover { background: var(--brass-bright); color: var(--petrol-deep); }

.post-header { border-bottom: 1px solid var(--line); padding-bottom: 1.5rem; margin-bottom: 2rem; }
.post-header h1 { font-size: var(--step-3); margin-bottom: 0.75rem; }

.empty-state {
  border: 2px dashed var(--line);
  border-radius: var(--radius-lg);
  padding: clamp(2rem, 5vw, 3rem);
  text-align: center;
  color: var(--ink-soft);
}

/* ---------- Forms ---------- */
.field { margin-bottom: 1.25rem; }
.field label { display: block; font-weight: 700; margin-bottom: 0.35rem; }
.field .hint { font-size: var(--step--1); color: var(--ink-soft); margin-bottom: 0.4rem; }
.field input[type="text"],
.field input[type="email"],
.field input[type="password"],
.field input[type="url"],
.field input[type="date"],
.field select,
.field textarea {
  width: 100%;
  padding: 0.7rem 0.85rem;
  min-height: 48px;
  border: 2px solid var(--line);
  border-radius: var(--radius);
  background: var(--paper-pure);
  color: var(--ink);
}
.field textarea { min-height: 9rem; resize: vertical; }
.field input:focus-visible, .field textarea:focus-visible, .field select:focus-visible { border-color: var(--brass-text); }
.field .error { color: #9a1b1b; font-weight: 700; font-size: var(--step--1); margin-top: 0.35rem; }
.field input[aria-invalid="true"], .field textarea[aria-invalid="true"] { border-color: #9a1b1b; }
.required-mark { color: #9a1b1b; }

.notice {
  border-radius: var(--radius);
  padding: 0.9rem 1.1rem;
  border-left: 5px solid var(--brass);
  background: var(--paper-shade);
  margin-bottom: 1.25rem;
}
.notice-error { border-left-color: #9a1b1b; background: #fbeaea; color: #6d1414; }
.notice-success { border-left-color: #1d6b3f; background: #e6f2ea; color: #14512f; }
.notice:empty { display: none; }

/* ---------- Footer ---------- */
.site-footer {
  background: var(--petrol-deep);
  color: var(--paper);
  padding-block: clamp(2.5rem, 6vw, 4rem) 1.5rem;
  margin-top: auto;
}
.footer-grid { display: grid; gap: 2rem; }
@media (min-width: 46em) { .footer-grid { grid-template-columns: 1.4fr 1fr 1fr; } }
.site-footer h2 {
  font-size: var(--step--1);
  text-transform: uppercase;
  letter-spacing: 0.14em;
  font-family: var(--font-body);
  font-weight: 700;
  color: var(--brass-bright);
  margin-bottom: 0.9rem;
}
.site-footer a { color: var(--paper); text-decoration-color: rgba(247, 244, 238, 0.4); }
.site-footer a:hover { color: var(--brass-bright); }
.site-footer ul { list-style: none; padding: 0; margin: 0; }
.site-footer li + li { margin-top: 0.5rem; }
.footer-logo { width: 15rem; max-width: 100%; margin-bottom: 1rem; }
.footer-bottom {
  margin-top: 2.5rem;
  padding-top: 1.25rem;
  border-top: 1px solid rgba(247, 244, 238, 0.18);
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem 1.5rem;
  justify-content: space-between;
  font-size: var(--step--1);
  color: rgba(247, 244, 238, 0.75);
}
.social-row { display: flex; gap: 0.6rem; flex-wrap: wrap; margin-top: 1rem; }
.social-row a {
  display: inline-flex; align-items: center; gap: 0.5rem;
  min-height: 44px; padding: 0.5rem 0.9rem;
  border: 1px solid rgba(247, 244, 238, 0.35);
  border-radius: var(--radius);
  text-decoration: none;
  font-size: 0.9rem;
}
.social-row a:hover { border-color: var(--brass-bright); background: rgba(233, 180, 76, 0.14); }
.social-row svg { width: 1.15rem; height: 1.15rem; fill: currentColor; flex: none; }

/* ---------- Page banner (interior pages) ---------- */
.page-banner {
  background: var(--petrol);
  color: var(--paper);
  padding-block: clamp(2rem, 5vw, 3.25rem);
  position: relative;
  overflow: hidden;
}
.page-banner::before {
  content: "";
  position: absolute;
  right: -6rem; top: 50%;
  width: 22rem; height: 22rem;
  transform: translateY(-50%);
  background: url("../img/meridian-sun-paper.png") no-repeat center / contain;
  opacity: 0.07;
  pointer-events: none;
}
.page-banner h1 { font-size: var(--step-3); }
.page-banner p { margin-top: 0.75rem; max-width: 52ch; color: rgba(247, 244, 238, 0.85); }

/* Breadcrumb */
.breadcrumb { font-size: var(--step--1); padding-block: 0.9rem; }
.breadcrumb ol { list-style: none; display: flex; flex-wrap: wrap; gap: 0.4rem; padding: 0; margin: 0; }
.breadcrumb li + li::before { content: "/"; margin-right: 0.4rem; color: var(--ink-soft); }

/* ---------- Utilities ---------- */
.stack > * + * { margin-top: 1rem; }
.stack-lg > * + * { margin-top: 1.75rem; }
.text-center { text-align: center; }
.mt-0 { margin-top: 0; }
.callout {
  background: var(--paper-pure);
  border: 1px solid var(--line);
  border-left: 5px solid var(--brass);
  border-radius: var(--radius);
  padding: clamp(1.1rem, 3vw, 1.6rem);
}
.section-petrol .callout { background: rgba(247, 244, 238, 0.07); border-color: rgba(247, 244, 238, 0.2); border-left-color: var(--brass-bright); }
.contact-line { font-size: var(--step-1); font-weight: 700; }

/* ---------- Contact page ---------- */
.contact-primary {
  display: grid;
  gap: clamp(1.75rem, 4vw, 3rem);
  background: var(--paper-pure);
  border: 1px solid var(--line);
  border-top: 5px solid var(--brass);
  border-radius: var(--radius-lg);
  padding: clamp(1.25rem, 4vw, 2.75rem);
  box-shadow: var(--shadow);
}
@media (min-width: 52rem) {
  .contact-primary { grid-template-columns: minmax(0, 1.5fr) minmax(15rem, 1fr); align-items: center; }
}
.contact-primary h2 { font-size: var(--step-2); }
.contact-email {
  margin-top: 0.75rem;
  font-family: var(--font-display);
  font-size: clamp(1.2rem, 0.7rem + 2.6vw, 2.5rem);
  line-height: 1.2;
  overflow-wrap: anywhere;
}
.contact-email a { color: var(--petrol); text-decoration-thickness: 2px; }
.contact-email a:hover { color: var(--brass-text); }
.contact-note { margin-top: 0.75rem; color: var(--ink-soft); max-width: 46ch; }
.contact-primary .btn-row { margin-top: 1.5rem; margin-bottom: 2rem; gap: 1.25rem; }
.contact-copied { margin-top: 0.75rem; font-size: var(--step--1); font-weight: 700; color: var(--petrol); }
.contact-copied:empty { display: none; }
.contact-topics h3 { font-size: var(--step-1); margin-bottom: 0.85rem; }
.contact-topics ul { list-style: none; padding: 0; margin: 0; }
.contact-topics li { padding-block: 0.75rem; border-top: 1px solid var(--line); }
.contact-topics li:last-child { border-bottom: 1px solid var(--line); }
.contact-topics li { font-weight: 700; color: var(--brass-text); }
.contact-topics span { font-weight: 400; }
.contact-topics span { color: var(--ink-soft); }
.contact-address { font-style: normal; color: var(--ink-soft); }
.contact-social { margin-top: clamp(1.5rem, 3vw, 2.25rem); text-align: center; }

/* ---------- High contrast / forced colors ---------- */
@media (forced-colors: active) {
  .btn, .card, .carousel-btn, .nav-toggle { border: 1px solid ButtonText; }
  .hero-rays, .page-banner::before, .hero::after { display: none; }
  .site-nav a[aria-current="page"] { border-bottom: 2px solid Highlight; }
}

/* ---------- Print ---------- */
@media print {
  .site-header, .site-footer, .skip-link, .carousel-controls, .btn-row { display: none !important; }
  body { background: #fff; color: #000; }
  .hero, .page-banner, .section-petrol { background: #fff !important; color: #000 !important; }
  a[href^="http"]::after { content: " (" attr(href) ")"; font-size: 0.8em; }
}

/* ---------- Definition list used for the join details ---------- */
.join-details { margin-top: 1.25rem; display: grid; gap: 0; }
.join-details > div {
  display: grid;
  gap: 0.2rem 1.5rem;
  padding-block: 0.9rem;
  border-bottom: 1px solid var(--line);
}
@media (min-width: 34em) {
  .join-details > div { grid-template-columns: minmax(9rem, 12rem) 1fr; }
}
.join-details dt { font-weight: 700; color: var(--petrol); }
.join-details dd { margin: 0; }

/* Width and height attributes prevent layout shift; they must not set real height. */
.prose img, .post-card .thumb, #post-cover { height: auto; }