:root {
  --ink: #171a16;
  --soil: #49372b;
  --moss: #50643c;
  --leaf: #74895b;
  --brick: #a24d34;
  --ochre: #c6904c;
  --cream: #f7f2e8;
  --paper: #fffbf2;
  --mist: #e7ece1;
  --line: rgba(23, 26, 22, 0.16);
  --shadow: 0 22px 70px rgba(24, 20, 16, 0.2);
  --max: 1160px;
}

* {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
}

body {
  margin: 0;
  color: var(--ink);
  background: var(--paper);
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  line-height: 1.55;
  overflow-x: hidden;
}

img {
  display: block;
  max-width: 100%;
}

a {
  color: inherit;
}

button,
input,
select,
textarea {
  font: inherit;
}

.skip-link {
  position: fixed;
  left: 1rem;
  top: -4rem;
  z-index: 100;
  padding: 0.75rem 1rem;
  background: var(--ink);
  color: white;
}

.skip-link:focus {
  top: 1rem;
}

.site-header {
  position: fixed;
  inset: 0 0 auto;
  z-index: 20;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 0.85rem clamp(1rem, 4vw, 3rem);
  color: white;
  transition: background 180ms ease, color 180ms ease, box-shadow 180ms ease;
}

.site-header.is-scrolled {
  background: rgba(255, 251, 242, 0.96);
  color: var(--ink);
  box-shadow: 0 8px 28px rgba(23, 26, 22, 0.08);
  backdrop-filter: blur(12px);
}

.brand {
  display: inline-flex;
  align-items: center;
  gap: 0.75rem;
  min-width: max-content;
  text-decoration: none;
}

.brand img {
  width: 40px;
  height: 54px;
  object-fit: contain;
  filter: drop-shadow(0 3px 10px rgba(0, 0, 0, 0.25));
}

.brand span {
  display: grid;
  line-height: 1.08;
}

.brand small {
  opacity: 0.78;
  font-size: 0.75rem;
}

.primary-nav {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: clamp(0.85rem, 2vw, 1.5rem);
  font-size: 0.92rem;
}

.primary-nav a,
.footer-links a {
  text-decoration: none;
}

.primary-nav a:hover,
.footer-links a:hover {
  text-decoration: underline;
  text-underline-offset: 0.25em;
}

.header-cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 42px;
  padding: 0.65rem 1rem;
  border: 1px solid currentColor;
  text-decoration: none;
  font-weight: 750;
}

.hero {
  position: relative;
  min-height: 92vh;
  display: grid;
  align-items: end;
  overflow: hidden;
  color: white;
  background: var(--soil);
}

.hero-media,
.hero-overlay {
  position: absolute;
  inset: 0;
}

.hero-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.hero-overlay {
  background:
    linear-gradient(90deg, rgba(14, 14, 12, 0.8), rgba(14, 14, 12, 0.34) 58%, rgba(14, 14, 12, 0.52)),
    linear-gradient(0deg, rgba(14, 14, 12, 0.38), rgba(14, 14, 12, 0.02) 42%);
}

.hero-content {
  position: relative;
  z-index: 1;
  width: min(var(--max), calc(100% - 2rem));
  margin: 0 auto;
  padding: 9rem 0 8.5rem;
}

.eyebrow,
.section-kicker,
.card-label {
  margin: 0 0 0.8rem;
  color: var(--ochre);
  font-size: 0.76rem;
  font-weight: 850;
  letter-spacing: 0;
  text-transform: uppercase;
}

.hero .eyebrow {
  color: #f0c77c;
}

h1,
h2,
h3,
p {
  margin-top: 0;
}

h1 {
  max-width: 9ch;
  margin-bottom: 1rem;
  font-family: Georgia, "Times New Roman", serif;
  font-size: clamp(4.25rem, 11vw, 9.5rem);
  font-weight: 500;
  line-height: 0.88;
}

h2 {
  font-family: Georgia, "Times New Roman", serif;
  font-size: clamp(2rem, 4.4vw, 4rem);
  font-weight: 520;
  line-height: 1;
}

h3 {
  font-size: 1.08rem;
  line-height: 1.25;
}

.hero-copy {
  max-width: 690px;
  color: rgba(255, 255, 255, 0.9);
  font-size: clamp(1.1rem, 2.2vw, 1.45rem);
}

.hero-actions,
.hero-proof {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.8rem;
}

.hero-actions {
  margin-top: 2rem;
}

.hero-proof {
  margin-top: 1.35rem;
  color: rgba(255, 255, 255, 0.82);
  font-size: 0.92rem;
}

.hero-proof span {
  padding-right: 0.9rem;
  border-right: 1px solid rgba(255, 255, 255, 0.28);
}

.hero-proof span:last-child {
  border-right: 0;
}

.button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 46px;
  padding: 0.85rem 1.05rem;
  border: 1px solid transparent;
  border-radius: 6px;
  cursor: pointer;
  text-decoration: none;
  font-weight: 850;
  transition: transform 160ms ease, box-shadow 160ms ease, background 160ms ease;
}

.button:hover,
.amount:hover,
.frequency button:hover,
.share-row button:hover,
.share-row a:hover {
  transform: translateY(-1px);
}

.button-primary {
  background: var(--ochre);
  color: #1f160f;
}

.button-support {
  background: var(--brick);
  color: white;
}

.button.full {
  width: 100%;
}

.intent-strip {
  width: min(var(--max), calc(100% - 2rem));
  margin: -4.3rem auto 0;
  position: relative;
  z-index: 3;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  box-shadow: var(--shadow);
}

.intent-strip a {
  min-height: 132px;
  padding: 1.25rem;
  background: var(--paper);
  border-right: 1px solid var(--line);
  text-decoration: none;
  color: rgba(23, 26, 22, 0.74);
}

.intent-strip a:hover {
  background: var(--mist);
}

.intent-strip a:last-child {
  border-right: 0;
}

.intent-strip span {
  display: block;
  margin-bottom: 0.45rem;
  color: var(--ink);
  font-weight: 900;
  font-size: 1.06rem;
}

.section {
  width: min(var(--max), calc(100% - 2rem));
  margin: 0 auto;
  padding: clamp(4rem, 8vw, 7rem) 0;
}

.intro-grid,
.booking-section,
.support-section,
.visit-section {
  display: grid;
  grid-template-columns: minmax(0, 0.86fr) minmax(320px, 1fr);
  gap: clamp(2rem, 6vw, 5rem);
  align-items: start;
}

.intro-copy {
  color: rgba(23, 26, 22, 0.72);
  font-size: 1.08rem;
}

.intro-copy p:last-child,
.booking-copy p:last-child,
.visit-copy p:last-child {
  margin-bottom: 0;
}

.image-band {
  width: 100%;
  background: var(--soil);
}

.image-band img {
  width: 100%;
  height: clamp(150px, 22vw, 310px);
  object-fit: cover;
}

.section-heading {
  display: grid;
  grid-template-columns: minmax(0, 1.2fr) minmax(280px, 0.8fr);
  gap: clamp(1.5rem, 4vw, 4rem);
  align-items: end;
  margin-bottom: 2rem;
}

.section-heading.compact {
  display: block;
  max-width: 820px;
}

.section-heading > p {
  color: rgba(23, 26, 22, 0.68);
  font-size: 1.05rem;
}

.offer-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1rem;
}

.offer-card {
  display: grid;
  grid-template-rows: 240px 1fr;
  overflow: hidden;
  background: #fff8ed;
  border: 1px solid var(--line);
  border-radius: 8px;
}

.offer-card img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.offer-card div {
  display: grid;
  align-content: start;
  gap: 0.7rem;
  padding: 1.15rem;
}

.offer-card p,
.program-list p,
.proof-section p,
.visit-copy p,
.booking-copy p,
.support-story p {
  color: rgba(23, 26, 22, 0.68);
}

.offer-card a {
  margin-top: auto;
  color: var(--brick);
  font-weight: 850;
  text-underline-offset: 0.25em;
}

.workshop-section {
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}

.program-list {
  display: grid;
  gap: 0;
  margin-top: 2rem;
  border-top: 1px solid var(--line);
}

.program-list article {
  display: grid;
  grid-template-columns: 56px 1fr auto;
  gap: 1.2rem;
  align-items: start;
  padding: 1.35rem 0;
  border-bottom: 1px solid var(--line);
}

.program-list span {
  color: var(--brick);
  font-weight: 900;
}

.program-list strong {
  white-space: nowrap;
  color: var(--moss);
}

.booking-section {
  align-items: center;
}

.check-list {
  display: grid;
  gap: 0.6rem;
  margin: 1.5rem 0 0;
  padding: 0;
  list-style: none;
}

.check-list li {
  padding-left: 1.35rem;
  position: relative;
}

.check-list li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.62em;
  width: 8px;
  height: 8px;
  background: var(--leaf);
}

.booking-form,
.donation-app {
  padding: clamp(1.1rem, 3vw, 1.5rem);
  background: #fffaf1;
  border: 1px solid var(--line);
  border-radius: 8px;
  box-shadow: 0 18px 50px rgba(73, 55, 43, 0.13);
}

.form-row {
  display: grid;
  gap: 0.42rem;
  margin-bottom: 0.9rem;
}

label {
  color: rgba(23, 26, 22, 0.78);
  font-weight: 800;
  font-size: 0.88rem;
}

input,
select,
textarea {
  width: 100%;
  border: 1px solid rgba(23, 26, 22, 0.22);
  border-radius: 6px;
  background: white;
  color: var(--ink);
}

input,
select {
  min-height: 44px;
  padding: 0 0.8rem;
}

textarea {
  resize: vertical;
  padding: 0.8rem;
}

input:focus,
select:focus,
textarea:focus,
button:focus-visible,
a:focus-visible {
  outline: 3px solid rgba(198, 144, 76, 0.5);
  outline-offset: 2px;
}

.split {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.8rem;
}

.form-note {
  min-height: 1.4em;
  margin: 0.8rem 0 0;
  color: rgba(23, 26, 22, 0.6);
  font-size: 0.86rem;
}

.support-section {
  width: 100%;
  max-width: none;
  padding-inline: max(1rem, calc((100% - var(--max)) / 2));
  background: #202219;
  color: white;
}

.support-section .section-kicker,
.support-section h2 {
  color: white;
}

.support-story p {
  color: rgba(255, 255, 255, 0.74);
}

.milestone-panel {
  display: grid;
  gap: 1rem;
  margin-top: 1.6rem;
  padding: 1rem;
  border: 1px solid rgba(255, 255, 255, 0.18);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.06);
}

.milestone-panel div:first-child {
  display: grid;
  gap: 0.25rem;
}

.milestone-panel span,
.milestone-panel small {
  color: rgba(255, 255, 255, 0.68);
}

.progress-list {
  display: grid;
  gap: 0.6rem;
}

.progress-list span {
  display: grid;
  grid-template-columns: minmax(80px, 1fr) 2fr;
  gap: 0.75rem;
  align-items: center;
  color: rgba(255, 255, 255, 0.72);
  font-size: 0.86rem;
}

.progress-list b {
  display: block;
  height: 10px;
  background: var(--ochre);
  border-radius: 999px;
  box-shadow: 0 0 0 999px rgba(255, 255, 255, 0.14);
  clip-path: inset(0 -999px 0 0 round 999px);
}

.donation-app {
  background: var(--paper);
  color: var(--ink);
}

.donation-header {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 1rem;
  margin-bottom: 1rem;
}

.donation-header span {
  color: rgba(23, 26, 22, 0.62);
  font-weight: 850;
  text-transform: uppercase;
  font-size: 0.78rem;
}

.donation-header strong {
  color: var(--brick);
  font-size: 1.45rem;
}

.amount-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 0.65rem;
}

.amount,
.frequency button,
.share-row button,
.share-row a {
  min-height: 42px;
  border: 1px solid rgba(23, 26, 22, 0.2);
  border-radius: 6px;
  background: white;
  color: var(--ink);
  cursor: pointer;
  text-align: center;
  text-decoration: none;
  font-weight: 850;
}

.amount.is-active,
.frequency button.is-active {
  background: var(--moss);
  border-color: var(--moss);
  color: white;
}

.custom-amount {
  display: grid;
  gap: 0.45rem;
  margin-top: 0.9rem;
}

.impact-box {
  margin: 1rem 0;
  padding: 0.9rem;
  background: var(--mist);
  border-radius: 8px;
}

.impact-box span {
  display: block;
  margin-bottom: 0.3rem;
  color: var(--moss);
  font-weight: 900;
  font-size: 0.8rem;
  text-transform: uppercase;
}

.impact-box p {
  margin: 0;
  color: rgba(23, 26, 22, 0.75);
}

.frequency {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.65rem;
  margin-bottom: 0.9rem;
}

.share-row {
  display: grid;
  grid-template-columns: 1fr 0.55fr;
  gap: 0.65rem;
  margin-top: 0.8rem;
}

.share-row button,
.share-row a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0 0.7rem;
  color: rgba(23, 26, 22, 0.82);
}

.proof-section {
  background: var(--mist);
  width: 100%;
  max-width: none;
  padding-inline: max(1rem, calc((100% - var(--max)) / 2));
}

.insight-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1rem;
  margin-top: 2rem;
}

.insight-grid article {
  padding: 1rem;
  background: rgba(255, 255, 255, 0.7);
  border: 1px solid rgba(23, 26, 22, 0.1);
  border-radius: 8px;
}

.visit-section {
  align-items: center;
}

.visit-media {
  overflow: hidden;
  border-radius: 8px;
}

.visit-media img {
  width: 100%;
  aspect-ratio: 5 / 4;
  object-fit: cover;
}

.detail-list {
  display: grid;
  gap: 0.85rem;
  margin: 1.4rem 0 0;
}

.detail-list div {
  display: grid;
  grid-template-columns: 100px 1fr;
  gap: 1rem;
  padding-bottom: 0.85rem;
  border-bottom: 1px solid var(--line);
}

.detail-list dt {
  color: var(--moss);
  font-weight: 900;
}

.detail-list dd {
  margin: 0;
}

.site-footer {
  display: flex;
  justify-content: space-between;
  gap: 2rem;
  padding: 2rem max(1rem, calc((100% - var(--max)) / 2));
  background: var(--soil);
  color: white;
}

.site-footer p {
  max-width: 520px;
  margin: 0.35rem 0 0;
  color: rgba(255, 255, 255, 0.7);
}

.footer-links {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: flex-end;
  gap: 1rem;
}

@media (max-width: 920px) {
  .site-header {
    position: absolute;
    flex-wrap: wrap;
  }

  .primary-nav {
    order: 3;
    width: 100%;
    justify-content: flex-start;
    overflow-x: auto;
    padding-bottom: 0.2rem;
  }

  .header-cta {
    min-height: 38px;
  }

  .hero {
    min-height: 88vh;
  }

  .hero-content {
    padding-top: 10rem;
  }

  .intent-strip,
  .offer-grid,
  .insight-grid {
    grid-template-columns: 1fr;
  }

  .intent-strip {
    margin-top: 0;
    width: min(100vw - 2rem, var(--max));
    box-shadow: none;
  }

  .intent-strip a {
    min-height: auto;
    border-right: 0;
    border-bottom: 1px solid var(--line);
  }

  .intro-grid,
  .section-heading,
  .booking-section,
  .support-section,
  .visit-section {
    grid-template-columns: 1fr;
  }

  .offer-card {
    grid-template-rows: 220px 1fr;
  }

  .program-list article {
    grid-template-columns: 42px 1fr;
  }

  .program-list strong {
    grid-column: 2;
  }

  .site-footer {
    display: grid;
  }

  .footer-links {
    justify-content: flex-start;
  }
}

@media (max-width: 560px) {
  .brand small {
    display: none;
  }

  .brand img {
    width: 34px;
    height: 46px;
  }

  .header-cta {
    display: none;
  }

  h1 {
    font-size: clamp(3.2rem, 19vw, 4.8rem);
  }

  h2 {
    font-size: 2rem;
  }

  .hero-content {
    width: min(100vw - 2rem, var(--max));
    padding-top: 7.5rem;
    padding-bottom: 1.5rem;
  }

  .hero .eyebrow {
    max-width: 32ch;
  }

  .hero-copy {
    max-width: 32ch;
  }

  .hero-proof span {
    width: 100%;
    border-right: 0;
    padding-right: 0;
  }

  .hero-actions {
    display: grid;
    width: 100%;
    grid-template-columns: 1fr;
    align-items: stretch;
  }

  .hero-actions .button {
    width: 100%;
    max-width: 100%;
    min-width: 0;
    padding-inline: 0.7rem;
    font-size: 0.86rem;
    text-align: center;
  }

  .section {
    width: min(100% - 1.5rem, var(--max));
    padding: 3.5rem 0;
  }

  .split,
  .amount-grid,
  .frequency,
  .share-row,
  .detail-list div {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 340px) {
  .hero-actions {
    grid-template-columns: 1fr;
  }
}

/* ── Added 2026-09-02 for the static rebuild ───────────────────────────────
   The not-open notice, the consent bar, and the Chronicles pages.
   Uses the existing tokens only — no new palette. */

.notice-bar {
  background: var(--soil);
  color: var(--cream);
  padding: 0.7rem 1.25rem;
  text-align: center;
  font-size: 0.95rem;
  line-height: 1.5;
  display: flex;
  gap: 0.5rem;
  justify-content: center;
  flex-wrap: wrap;
}
.notice-bar strong { color: var(--ochre); }

.consent-bar {
  position: fixed;
  left: 1rem;
  right: 1rem;
  bottom: 1rem;
  max-width: 34rem;
  margin: 0 auto;
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: 14px;
  box-shadow: var(--shadow);
  padding: 1rem 1.15rem;
  display: flex;
  gap: 1rem;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  z-index: 60;
}
.consent-bar p { margin: 0; font-size: 0.9rem; color: var(--ink); }
.consent-bar div { display: flex; gap: 0.5rem; }
.consent-bar button {
  font: inherit;
  font-size: 0.85rem;
  padding: 0.45rem 0.95rem;
  border-radius: 999px;
  border: 1px solid var(--line);
  background: var(--mist);
  color: var(--ink);
  cursor: pointer;
}
.consent-bar button#consentYes { background: var(--moss); color: var(--cream); border-color: var(--moss); }
.consent-bar [hidden] { display: none !important; }

/* Chronicles */
.chronicle-list { display: grid; gap: 1.1rem; padding: 0; list-style: none; margin: 2rem 0 0; }
.chronicle-list li {
  border: 1px solid var(--line);
  border-radius: 14px;
  background: var(--paper);
  padding: 1.1rem 1.3rem;
}
.chronicle-list a { font-size: 1.12rem; font-weight: 600; color: var(--soil); text-decoration: none; }
.chronicle-list a:hover { text-decoration: underline; }
.chronicle-list .meta { display: block; margin-top: 0.3rem; font-size: 0.85rem; color: var(--moss); }

.chronicle {
  max-width: 42rem;
  margin: 0 auto;
  padding: 2.5rem 1.25rem 4rem;
}
.chronicle h1 {
  /* ⚠️ The global h1 is clamp(4.25rem, 11vw, 9.5rem) with max-width:9ch — written for the ONE-WORD
     homepage hero. Every article and gallery page inherited it, so a real title rendered at up to 152px
     and wrapped at nine characters. Reset here for pages that have a sentence for a title. */
  max-width: none;
  font-size: clamp(2rem, 4.5vw, 3rem);
  line-height: 1.2;
  margin-bottom: 0.4rem;
}
.chronicle .meta { color: var(--moss); font-size: 0.9rem; margin-bottom: 2rem; }
.chronicle p { line-height: 1.75; margin: 0 0 1.35rem; font-size: 1.03rem; }
.chronicle h2, .chronicle h3 { margin: 2.4rem 0 0.8rem; color: var(--soil); }
.chronicle .back { display: inline-block; margin-bottom: 2rem; color: var(--moss); }

.chronicle .song {
  margin: 0 0 2rem;
  padding: 0.85rem 1.1rem;
  background: var(--mist);
  border-left: 3px solid var(--ochre);
  border-radius: 8px;
}
.chronicle .song a { color: var(--soil); text-decoration: none; font-weight: 600; }
.chronicle .song a:hover { text-decoration: underline; }
.chronicle-list + h2 { margin-top: 3rem; }
.chronicle h2 { border-bottom: 1px solid var(--line); padding-bottom: 0.4rem; }

/* ── Galleries ─────────────────────────────────────────────────────────────
   CSS columns rather than grid: the photographs are 62 landscape and 34
   portrait, and columns let each keep its own proportions instead of being
   cropped into a uniform box. */

.gallery-head { padding-bottom: 1.5rem; }

.gallery-grid {
  columns: 4 260px;
  column-gap: 12px;
  padding: 0 1.25rem 4rem;
  max-width: 1500px;
  margin: 0 auto;
}
.gallery-grid .tile {
  display: block;
  width: 100%;
  margin: 0 0 12px;
  padding: 0;
  border: 0;
  background: none;
  cursor: zoom-in;
  break-inside: avoid;
  border-radius: 10px;
  overflow: hidden;
  line-height: 0;
}
.gallery-grid .tile img {
  width: 100%;
  height: auto;
  display: block;
  border-radius: 10px;
  transition: transform 0.35s ease, filter 0.35s ease;
  background: var(--mist);
}
.gallery-grid .tile:hover img,
.gallery-grid .tile:focus-visible img { transform: scale(1.02); filter: brightness(1.05); }
.gallery-grid .tile:focus-visible { outline: 2px solid var(--ochre); outline-offset: 3px; }

.lightbox {
  position: fixed;
  inset: 0;
  z-index: 200;
  background: rgba(12, 10, 8, 0.94);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 2.5rem 1rem 3.5rem;
}
.lightbox[hidden] { display: none !important; }
.lightbox img {
  max-width: 100%;
  max-height: 100%;
  width: auto;
  height: auto;
  object-fit: contain;
  border-radius: 6px;
  box-shadow: 0 30px 90px rgba(0, 0, 0, 0.6);
}
.lb-close, .lb-nav {
  position: absolute;
  background: rgba(255, 255, 255, 0.09);
  color: var(--cream);
  border: 1px solid rgba(255, 255, 255, 0.18);
  cursor: pointer;
  font-family: inherit;
  line-height: 1;
  border-radius: 999px;
  transition: background 0.2s;
}
.lb-close:hover, .lb-nav:hover { background: rgba(255, 255, 255, 0.2); }
.lb-close { top: 1rem; right: 1rem; width: 42px; height: 42px; font-size: 26px; }
.lb-nav { top: 50%; transform: translateY(-50%); width: 46px; height: 62px; font-size: 30px; }
.lb-prev { left: 1rem; }
.lb-next { right: 1rem; }
.lb-count {
  position: absolute;
  bottom: 1.1rem;
  left: 50%;
  transform: translateX(-50%);
  color: rgba(247, 242, 232, 0.75);
  font-size: 0.85rem;
  letter-spacing: 0.06em;
}
@media (max-width: 640px) {
  .gallery-grid { columns: 2 140px; column-gap: 8px; padding: 0 0.75rem 3rem; }
  .gallery-grid .tile { margin-bottom: 8px; }
  .lb-nav { width: 38px; height: 52px; font-size: 24px; }
}

.gallery-index { list-style: none; padding: 0; margin: 2rem 0 0; display: grid; gap: 1.1rem; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); }
.gallery-index .gcard { display: block; text-decoration: none; border: 1px solid var(--line); border-radius: 14px; overflow: hidden; background: var(--paper); transition: transform .25s ease, box-shadow .25s ease; }
.gallery-index .gcard:hover { transform: translateY(-3px); box-shadow: var(--shadow); }
.gallery-index .gcard img { width: 100%; height: 160px; object-fit: cover; display: block; background: var(--mist); }
.gallery-index .gcard-t { display: block; padding: .8rem 1rem .1rem; font-size: 1.08rem; font-weight: 700; color: var(--soil); }
.gallery-index .gcard-m { display: block; padding: 0 1rem; font-size: .82rem; color: var(--moss); }
.gallery-index .gcard-b { display: block; padding: .4rem 1rem 1rem; font-size: .9rem; line-height: 1.5; color: var(--ink); opacity: .8; }

/* ── The top strip: notice bar + menu, stacked rather than overlapping ─────
   The header is position:fixed at top:0. The "not open yet" bar was added
   above it in normal flow, so the two fought for the same strip of screen and
   the menu sat ON the notice. Both are fixed now, and the header is offset by
   the notice bar's measured height (--notice-h, set in script) so it survives
   the notice wrapping onto two lines on a phone. (2026-09-03.) */
.notice-bar {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 30;
}
.site-header { top: var(--notice-h, 0px); }

/* ⚠️ White type on a transparent header is invisible over the cream sections.
   It only ever worked over the dark hero. The scrolled state already fixes the
   colours — this makes sure it also applies the moment anything light is behind
   it, not merely after 24px of scroll. */
.site-header:not(.is-scrolled) .brand,
.site-header:not(.is-scrolled) .primary-nav a { text-shadow: 0 1px 12px rgba(0, 0, 0, 0.55); }

/* The notice slides up out of the way once reading starts; the menu follows it. */
.notice-bar { transition: transform 240ms ease; will-change: transform; }
.notice-bar.is-tucked { transform: translateY(-100%); }
.site-header { transition: background 180ms ease, color 180ms ease, box-shadow 180ms ease, top 240ms ease; }

/* ── Menu on the built pages (galleries, chronicles) ──────────────────────
   Always solid. The homepage header is transparent over its hero and only
   gains a background on scroll; these pages have no hero, so that behaviour
   would leave white text on cream. */
.page-header {
  position: sticky;
  top: var(--notice-h, 0px);
  z-index: 20;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  flex-wrap: wrap;
  /* Match the homepage header exactly — the built pages were visibly shorter, which read as a
     different site. (Kevin, 2026-09-03: "I like the height of the menu bar.") */
  padding: 0.85rem clamp(1rem, 4vw, 3rem);
  background: rgba(255, 251, 242, 0.97);
  backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--line);
  box-shadow: 0 6px 22px rgba(23, 26, 22, 0.06);
}
.page-brand { display: inline-flex; align-items: center; gap: 0.6rem; text-decoration: none; color: var(--ink); }
.page-brand img { width: auto; height: 54px; max-width: 56px; object-fit: contain; }
.page-brand span { display: grid; line-height: 1.12; }
.page-brand strong { font-size: 1.05rem; color: var(--soil); }
.page-brand small { font-size: 0.75rem; opacity: 0.72; }
.page-nav { display: flex; gap: clamp(0.7rem, 2vw, 1.4rem); flex-wrap: wrap; font-size: 0.9rem; }
.page-nav a { color: var(--ink); text-decoration: none; opacity: 0.85; white-space: nowrap; }
.page-nav a:hover { opacity: 1; color: var(--soil); text-decoration: underline; }

/* ── the house symbol, at the head of the menu ──────────────────────────────
   Kevin, 2026-09-11: "we can put a little home symbol there, and that brings them home."
   Sized up a touch because ⌂ draws small next to 0.9rem text, and nudged off the baseline so
   it sits level with the words rather than riding above them. */
.page-nav .nav-home {
  font-size: 1.15rem;
  line-height: 1;
  position: relative;
  top: 0.06em;
  opacity: 0.7;
}
.page-nav .nav-home:hover { opacity: 1; text-decoration: none; }

/* ── "Click any photograph to enlarge." ─────────────────────────────────────
   A quiet instruction under the gallery's standfirst, not another paragraph of prose —
   so it is smaller, lighter, and set in the same green as the other small type. */
.gallery-head p.gallery-hint {
  margin-top: 0.6rem;
  font-size: 0.86rem;
  color: var(--moss);
  opacity: 0.9;
}
@media (max-width: 560px) {
  .page-header { padding: 0.55rem 0.9rem; }
  .page-nav { width: 100%; overflow-x: auto; }
}

/* ── kevinjarvis.com landing ────────────────────────────────────────────────
   ⚠️ RECOVERED 2026-09-09 from the LIVE server, not from any local file.

   These twelve rules style the front page — the name over the photograph, the
   bio column, the galleries heading. They were serving at kevinjarvis.com the
   whole time, but no copy of them existed anywhere in the vault: a
   `grep -rl hero-words --include=*.css` across the entire drive returned
   nothing. index.html was rebuilt on 2026-09-09 WITH the .hero-band markup
   while styles.css sat at its 2026-09-03 state, so locally the hero had no
   styling at all and the page looked broken next to the live one.

   Read back out of the served stylesheet via the browser's CSSOM and the raw
   file, and appended here so a rebuild can never lose them again.

   The lesson: the upload package (UPLOAD_kevinjarvis_social/) ships HTML and
   images but NO css, so styles.css has no route back from the server into the
   working folder. Edits made at upload time are invisible here. If check.py
   can compare the deploy folder against what is actually served, it should.

   The photograph does the work; the type stays out of its way. */
.hero-band { position: relative; width: 100%; overflow: hidden; line-height: 0; }
.hero-band img { width: 100%; height: clamp(230px, 46vh, 460px); object-fit: cover; object-position: center 58%; display: block; }
.hero-veil { position: absolute; inset: 0; background: linear-gradient(to bottom, rgba(12,10,8,.10) 0%, rgba(12,10,8,.18) 45%, rgba(12,10,8,.72) 100%); }
.hero-words { position: absolute; left: 0; right: 0; bottom: clamp(1.2rem, 4vh, 2.6rem); text-align: center; padding: 0 1.25rem; line-height: 1.25; }
.hero-words h1 {
  max-width: none; margin: 0 0 .45rem;
  font-family: Georgia, "Times New Roman", serif;
  font-size: clamp(2.3rem, 6.5vw, 4.2rem);
  font-weight: 400; letter-spacing: .015em; color: var(--cream);
  text-shadow: 0 2px 26px rgba(0,0,0,.55);
}
.hero-words p { margin: 0; font-size: clamp(.9rem, 1.9vw, 1.06rem); color: rgba(247,242,232,.86); letter-spacing: .04em; text-shadow: 0 1px 14px rgba(0,0,0,.6); }

.bio { max-width: 40rem; margin: 0 auto; padding: clamp(2.5rem, 7vw, 4.5rem) 1.5rem clamp(1rem, 3vw, 2rem); }
.bio p { font-size: 1.04rem; line-height: 1.85; margin: 0 0 1.4rem; color: var(--ink); }
.bio .lede { font-family: Georgia, "Times New Roman", serif; font-size: clamp(1.18rem, 2.6vw, 1.42rem); line-height: 1.62; color: var(--soil); }
.bio em { color: var(--soil); font-style: italic; }

.gallery-section {
  max-width: 1160px; margin: 0 auto; padding: clamp(1rem, 3vw, 2rem) 1.5rem 5rem;
  /* ⚠️ The menu bar is position:sticky, so an #galleries jump lands the section at viewport top —
     i.e. with "THE GALLERIES" heading hidden BEHIND the menu. Measured 2026-09-09: the header is
     82px wide-screen and 111px once the nav wraps below 560px. These values clear it with ~22px of
     air either way. If the header height changes, change these. */
  scroll-margin-top: 6.5rem;
}
@media (max-width: 560px) {
  .gallery-section { scroll-margin-top: 8.5rem; }
}
.gallery-section-t { font-family: Georgia, "Times New Roman", serif; font-size: 1.1rem; font-weight: 400; letter-spacing: .16em; text-transform: uppercase; color: var(--moss); border-bottom: 1px solid var(--line); padding-bottom: .7rem; margin: 0 0 1.6rem; }

/* The two doors at the foot of the landing page. Added 2026-09-09.
   ⚠️ auto-FIT, not auto-fill: with only two cards, .gallery-index's auto-fill leaves them huddled
   in the first two of four empty columns on a wide screen. Capped near the .bio column width above
   them so the page reads as one measure rather than two. */
.gallery-index.doors {
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 17rem), 1fr));
  max-width: 46rem; margin-left: auto; margin-right: auto; gap: 1.3rem;
}
.gallery-index.doors .gcard img { height: 190px; }
.gallery-index.doors .gcard-t { font-size: 1.22rem; }

/* The writing page's cards carry pictures as of 2026-09-09, and its section headings now use
   .gallery-section-t so they match "THE GALLERIES" on photographs.html. Several sections stack on
   one page, so the heading needs air above it — the galleries page only ever has one. */
.writing-index .gcard img { height: 150px; }
.gallery-index + .gallery-section-t { margin-top: 3.4rem; }
.writing-index .gcard-t { padding-bottom: .55rem; }
.writing-index .gcard-m { padding-bottom: .9rem; letter-spacing: .04em; }

/* ⚠️ .chronicle-hero was EMITTED BY THE BUILDER AND NEVER STYLED — no rule for it existed anywhere
   in this stylesheet. Any article that had a picture rendered it raw, full-bleed in the text
   column with square corners and no spacing. Found 2026-09-09 when pictures were added to all of
   the writing. Sits between the title and the first paragraph, so it needs air on both sides. */
.chronicle-hero {
  width: 100%; height: auto; display: block;
  margin: 1.4rem 0 2.2rem; border-radius: 12px;
  background: var(--mist);
}

/* The standfirst under an article title. Added 2026-09-09: 20 pieces opened by repeating their own
   title as an ordinary paragraph, with the real subtitle below it in the same size as the body —
   so the reader met the title three times and never saw the subtitle as one. The repeat is gone and
   this is what is left. Larger than the body, Georgia to echo the .lede on the front page, and the
   colour of the section headings so it reads as furniture rather than as the first line. */
/* ⚠️ SELECTOR MUST BEAT `.chronicle p`, which sets font-size: 1.03rem. Written as a bare
   `.chronicle-sub` this rule lost on specificity (0,1,0 against 0,1,1) and the subtitle rendered at
   exactly body size — measured 16.48px for both, which is how it was caught. */
.chronicle p.chronicle-sub {
  font-family: Georgia, "Times New Roman", serif;
  font-size: clamp(1.12rem, 2.2vw, 1.32rem);
  line-height: 1.45;
  color: var(--moss);
  margin: -0.4rem 0 1.8rem;
}
.chronicle-hero + p.chronicle-sub { margin-top: 0; }

/* The masthead line on a Connecting the Dots issue — "The Muddy Way · Vol. 2 — Connecting the
   Dots". Sits between the title and the standfirst, above the picture. Deliberately quiet: it is
   a series label, not a claim on the reader's attention. Added 2026-09-10, when that line and the
   subtitle were untangled from the single run-on paragraph markdown had joined them into.
   ⚠️ Must out-specify `.chronicle p` (0,1,1), same trap as .chronicle-sub. */
.chronicle p.chronicle-kicker {
  font-size: .82rem;
  letter-spacing: .11em;
  text-transform: uppercase;
  color: var(--moss);
  margin: 0 0 .5rem;
  line-height: 1.5;
}
.chronicle p.chronicle-kicker + p.chronicle-sub { margin-top: 0; }

/* Section breaks inside an essay. Kevin writes them as a lone em-dash on its own line; the builder
   now turns those into a real <hr>. Deliberately NOT a full-width border — in a 42rem measure that
   reads as a page division rather than a breath. A short centred rule, with more air above than
   below, so the eye pauses and then falls into the next section. Added 2026-09-10. */
.chronicle hr {
  width: 3.5rem;
  height: 1px;
  border: 0;
  background: var(--line);
  margin: 3rem auto 2.4rem;
}

/* ── The five strand cards on writing.html (2026-09-11) ──────────────────────
   The strand blurbs are different lengths, so on a wide screen the cards ended
   at different heights and the row read as ragged. The grid already stretches
   each row; the fix is to make the CARD fill the stretched cell and push its
   blurb to a common baseline, rather than letting it end wherever the text does.
   Five cards also wrap 4+1 under auto-fill at 240px; auto-fit with a wider
   minimum gives 3+2, which looks deliberate instead of orphaned. */
.gallery-index.strand-index {
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 15.5rem), 1fr));
  gap: 1.25rem;
}
.strand-index .gcard { display: flex; flex-direction: column; height: 100%; }
.strand-index .gcard img { height: 150px; flex: none; }
.strand-index .gcard-b { margin-top: auto; }