/* ===================================================================
   CCA WEBSITE — STYLES

   Board members: the only line here you might ever change is --navy
   below. It is the main color of buttons, links and the dark bands.
   Everything else can be left alone.
   =================================================================== */

/* --- 1. TOKENS ---------------------------------------------------- */

/* The palette is taken straight from the CCA logo. If you ever need to
   re-theme the site, --navy is the one line that matters most. */

:root {
  /* Brand — sampled from the logo. */
  --navy: #04137E;        /* the ocean. Primary colour: buttons, links, bands. */
  --navy-deep: #020D5C;   /* pressed / hover state of anything navy */
  --yellow: #FFF300;      /* the CcA letters. NAVY BACKGROUNDS ONLY — see below. */

  /* The four map pins. These are GRAPHIC colours: rules, dots, markers.
     Only --pin-green has enough contrast to ever be used for text. */
  --pin-red: #FD3C42;
  --pin-cyan: #3AE8FC;
  --pin-orange: #F9B204;
  --pin-green: #227A22;

  /* Kept for older rules that still say --accent. */
  --accent: var(--navy);
  --accent-soft: #E7EAF6;

  /* Surfaces. Cooler than the old cream, so the logo's yellow reads true. */
  --paper: #FAFAF8;
  --paper-deep: #EDEFF5;
  --ink: #16181F;
  --ink-soft: #5A5F70;

  /* On navy bands. */
  --on-navy: #FFFFFF;
  --on-navy-soft: #B9C0E8;

  --rule: rgba(4, 19, 126, 0.14);
  --rule-on-navy: rgba(255, 255, 255, 0.22);

  --font-display: "Bricolage Grotesque", "Helvetica Neue", Helvetica, Arial,
    sans-serif;
  --font-body: "Karla", -apple-system, BlinkMacSystemFont, "Segoe UI",
    Helvetica, Arial, sans-serif;

  --radius: 14px;

  /* THE GLOBE ON THE HOME PAGE HERO.
     These three lines are safe to play with. All are in "rem", where
     1rem = 16px, so 21rem is 336px. Change a number, save, refresh.

       --globe-size  how big it is.
       --globe-gap   how far it sits to the RIGHT of the middle of the
                     page. Increase this to push it away from the text.
       --globe-top   how far DOWN from the top of the hero it sits.
                     Decrease this to lift it.

     If you make it much bigger or move it much further right, check a
     narrower window too — there is less room than you think. */
  --globe-size: 20rem;
  --globe-gap: 11rem;
  --globe-top: 7rem;

  /* The smaller globe shown beside the headline on phones and tablets.
     The headline reserves exactly this much room, so the two stay in step. */
  --globe-phone: min(9rem, 25vw);

  /* The logo's map pin, as a reusable mask. */
  --pin-shape: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 24'%3E%3Cpath d='M8 24s8-9.1 8-16A8 8 0 0 0 0 8c0 6.9 8 16 8 16z' fill='black'/%3E%3C/svg%3E");

  --measure: 34rem;

  --space-1: 0.5rem;
  --space-2: 1rem;
  --space-3: 1.5rem;
  --space-4: 2rem;
  --space-5: 3rem;
  --space-6: 4.5rem;
  --space-7: 6rem;
  --space-8: 8rem;
}

/* CONTRAST RULE — please keep to this.
   --yellow on white is about 1.1:1: invisible. It is legible only on navy.
   --pin-cyan and --pin-orange are the same story. Use pin colours for
   shapes and rules, never for words on a light background. */

/* --- 2. RESET ----------------------------------------------------- */

*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: 1.0625rem;
  line-height: 1.65;
  overflow-x: hidden;
}

img,
svg,
iframe {
  max-width: 100%;
}

img {
  height: auto;
  display: block;
}

/* --- 3. TYPOGRAPHY ------------------------------------------------ */

h1,
h2,
h3 {
  font-family: var(--font-display);
  font-weight: 600;
  line-height: 1.08;
  letter-spacing: -0.02em;
  margin: 0 0 var(--space-3);
  font-variation-settings: "opsz" 40;
}

h1 {
  font-size: clamp(2.4rem, 7vw, 5.25rem);
}

h2 {
  font-size: clamp(2rem, 4.2vw, 3rem);
}

h3 {
  font-size: clamp(1.3rem, 2.2vw, 1.6rem);
  line-height: 1.2;
}

p {
  margin: 0 0 var(--space-3);
  max-width: var(--measure);
}

a {
  color: var(--accent);
  text-decoration-thickness: 1px;
  text-underline-offset: 0.18em;
}

a:hover {
  text-decoration-thickness: 2px;
}

.eyebrow {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-family: var(--font-body);
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--navy);
  margin: 0 0 var(--space-2);
}

/* The map pin from the logo, redrawn as a small CSS marker. Sections can
   re-colour it by setting --pin. */
.eyebrow::before {
  content: "";
  flex: none;
  width: 0.62em;
  height: 0.95em;
  background: var(--pin, var(--navy));
  -webkit-mask: var(--pin-shape) center / contain no-repeat;
  mask: var(--pin-shape) center / contain no-repeat;
}

.lede {
  font-size: clamp(1.15rem, 2vw, 1.4rem);
  line-height: 1.5;
  color: var(--ink-soft);
  max-width: 38rem;
}

.rule {
  border: 0;
  border-top: 1px solid var(--rule);
  margin: 0;
}

/* --- 4. LAYOUT ---------------------------------------------------- */

.wrap {
  width: min(100% - 2.5rem, 68rem);
  margin-inline: auto;
}

.section {
  padding-block: var(--space-4);
}

.section--deep {
  background: var(--paper-deep);
}

/* A full-bleed navy band. Used sparingly — one per page at most, or the
   colour stops meaning anything. Everything inside flips to light text. */
.section--navy {
  background: var(--navy);
  color: var(--on-navy);
  --pin: var(--yellow);
  --rule: var(--rule-on-navy);
}

.section--navy h1,
.section--navy h2,
.section--navy h3 {
  color: var(--on-navy);
}

.section--navy .eyebrow {
  color: var(--yellow);
}

.section--navy p {
  color: var(--on-navy-soft);
}

.section--navy a {
  color: var(--yellow);
}

/* Prose-only sections: no photo, no grid, just a heading and text.
   Left to themselves the heading runs the full 68rem while the paragraphs
   stop at --measure, and a callout spans wide again — three widths in one
   block, which reads as a mistake. Everything here shares one column, so
   the reading measure looks like the decision it is. The column stays left
   aligned with every other section; only its width changes. */
.section--prose .wrap > * {
  max-width: 38rem;
}

.section--prose p {
  max-width: 100%;
}

.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  background: var(--ink);
  color: var(--paper);
  padding: var(--space-2) var(--space-3);
  z-index: 100;
}

.skip-link:focus {
  left: var(--space-2);
  top: var(--space-2);
}

/* --- 5. FOCUS ----------------------------------------------------- */

:focus-visible {
  outline: 3px solid var(--accent);
  outline-offset: 3px;
  border-radius: 2px;
}

/* --- 6. HEADER AND NAV -------------------------------------------- */

.site-header {
  border-bottom: 1px solid var(--rule);
  background: var(--paper);
  position: sticky;
  top: 0;
  z-index: 50;
}

.site-header__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  padding-block: var(--space-2);
}

.logo {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  font-family: var(--font-display);
  font-size: 1.05rem;
  font-weight: 600;
  line-height: 1.1;
  color: var(--ink);
  text-decoration: none;
  letter-spacing: -0.01em;
}

.logo__mark {
  flex: none;
  width: 30px;
  height: 22px;
}

.logo__img {
  height: 40px;
  width: auto;
}

.nav-toggle {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  min-height: 44px;
  padding: 0 var(--space-2);
  border: 1px solid var(--rule);
  border-radius: 999px;
  background: transparent;
  color: var(--ink);
  font-family: var(--font-body);
  font-size: 0.95rem;
  cursor: pointer;
}

.nav-panel {
  display: none;
}

.nav-panel__list {
  list-style: none;
  margin: 0;
  padding: 0;
}

.nav-panel__list a {
  color: var(--ink);
  text-decoration: none;
}

.nav-panel__list a[aria-current="page"] {
  color: var(--accent);
  text-decoration: underline;
  text-underline-offset: 0.3em;
}

/* The Join CCA button sits inside the nav list, so the plain-link rule
   above would otherwise win on specificity and paint its label ink-dark
   on the accent fill. Keep the button's own contrast. */
.nav-panel__list a.btn,
.nav-panel__list a.btn:hover {
  color: var(--paper);
  text-decoration: none;
}

/* Mobile: the panel is a full-screen sheet. */
@media (max-width: 47.99rem) {
  .nav-panel[data-open="true"] {
    display: block;
    position: fixed;
    inset: 0;
    background: var(--paper);
    z-index: 60;
    padding: var(--space-4) 1.25rem;
    overflow-y: auto;
  }

  .nav-panel__close {
    position: absolute;
    top: var(--space-3);
    right: 1.25rem;
    min-width: 44px;
    min-height: 44px;
    border: 1px solid var(--rule);
    border-radius: 999px;
    background: transparent;
    color: var(--ink);
    font-size: 1.1rem;
    cursor: pointer;
  }

  .nav-panel__list {
    margin-top: var(--space-6);
  }

  .nav-panel__list li + li {
    border-top: 1px solid var(--rule);
  }

  .nav-panel__list a {
    display: block;
    padding: var(--space-3) 0;
    font-family: var(--font-display);
    font-size: 1.9rem;
  }

  /* The sheet's link rule (.nav-panel__list a) is more specific than .btn,
     so it was forcing display:block — which made justify-content inert —
     along with no side padding and the 1.9rem link size. The button has to
     restate all of it to look like a button. */
  .nav-panel .btn {
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    width: 100%;
    margin-top: var(--space-4);
    padding: var(--space-2) var(--space-3);
    font-family: var(--font-body);
    font-size: 1.15rem;
  }

  body[data-nav-open="true"] {
    overflow: hidden;
  }
}

/* Desktop: the panel is an inline row and the toggle disappears. */
@media (min-width: 48rem) {
  .nav-toggle {
    display: none;
  }

  .nav-panel {
    display: block;
  }

  .nav-panel__close {
    display: none;
  }

  .nav-panel__list {
    display: flex;
    align-items: center;
    gap: var(--space-4);
  }

  .nav-panel__list a {
    font-size: 1rem;
  }
}

/* --- 7. BUTTONS --------------------------------------------------- */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  min-height: 44px;
  padding: 0 var(--space-3);
  border-radius: 999px;
  border: 1px solid var(--accent);
  background: var(--accent);
  color: var(--paper);
  font-family: var(--font-body);
  font-size: 1rem;
  font-weight: 700;
  text-decoration: none;
  cursor: pointer;
}

.btn:hover {
  background: var(--navy-deep);
  border-color: var(--navy-deep);
  color: #FFFFFF;
}

/* On a navy band the primary button inverts: yellow fill, navy label. */
.section--navy .btn,
.site-footer .btn {
  background: var(--yellow);
  border-color: var(--yellow);
  color: var(--navy);
}

.section--navy .btn:hover,
.site-footer .btn:hover {
  background: #FFFFFF;
  border-color: #FFFFFF;
  color: var(--navy);
}

.btn--ghost {
  background: transparent;
  color: var(--ink);
  border-color: var(--rule);
}

.btn--ghost:hover {
  background: transparent;
  border-color: var(--ink);
  color: var(--ink);
}

/* Shown when site-data.js still holds an unreplaced placeholder. */
.btn[data-cca-unset="true"],
a[data-cca-unset="true"] {
  background: transparent;
  border-color: var(--rule);
  border-style: dashed;
  color: var(--ink-soft);
  cursor: not-allowed;
  text-decoration: none;
}

.btn-row {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
}

/* --- 8. FOOTER ---------------------------------------------------- */

.site-footer {
  background: var(--navy);
  color: var(--on-navy);
  padding-block: var(--space-6) var(--space-4);
  margin-top: var(--space-7);
  --rule: var(--rule-on-navy);
  --pin: var(--yellow);
}

.site-footer h2 {
  color: var(--on-navy);
}

.site-footer__grid {
  display: grid;
  gap: var(--space-4);
  grid-template-columns: 1fr;
}

@media (min-width: 48rem) {
  .site-footer__grid {
    grid-template-columns: 1.4fr 1fr 1fr;
    gap: var(--space-5);
  }
}

.site-footer h2 {
  font-size: 1.5rem;
  margin-bottom: var(--space-1);
}

.site-footer ul {
  list-style: none;
  margin: 0;
  padding: 0;
}

.site-footer li + li {
  margin-top: 0.4rem;
}

.site-footer a {
  color: var(--on-navy);
  text-decoration: none;
}

.site-footer a:hover {
  text-decoration: underline;
}

.footer-label {
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--yellow);
  margin: 0 0 var(--space-2);
}

.site-footer__fine {
  font-size: 0.85rem;
  color: var(--on-navy-soft);
  margin: var(--space-2) 0 0;
}

/* --- 9. HOME ------------------------------------------------------ */

.hero {
  position: relative;
  padding-block: var(--space-4) var(--space-6);
  overflow: hidden;
}

@media (min-width: 64rem) {
  .hero {
    padding-block: var(--space-7) var(--space-6);
  }
}

.hero__motif {
  /* Narrow screens: pinned to the top right, beside the headline. Its
     right edge lines up with the text column's. --globe-phone is the one
     number to change if it wants to be bigger or smaller here. */
  display: block;
  position: absolute;
  top: var(--space-4);
  right: 1.25rem;
  width: var(--globe-phone);
  z-index: 0;
}

/* Only the eyebrow and the headline reach the globe's height, so only they
   need to keep clear of it. The lede and buttons below use the full width. */
.hero__org,
.hero h1 {
  padding-right: calc(var(--globe-phone) + 0.75rem);
}

@media (min-width: 64rem) {
  .hero__org,
  .hero h1 {
    padding-right: 0;
  }
}

@media (min-width: 64rem) {
  .hero__motif {
    display: block;
    margin: 0;
    position: absolute;
    top: 50%;
    right: 4%;
    transform: translateY(-50%);
    width: min(var(--globe-size), 32%);
    pointer-events: none;
    z-index: 0;
  }
}

/* Wide screens only: tuck the globe into the ragged whitespace beside the
   headline, top-aligned with it. Anchored to the centre line rather than
   the viewport edge so it keeps its distance from the text column as the
   window grows. Below this width there is not enough clear space, so it
   stays parked at the right edge above. */
@media (min-width: 80rem) {
  .hero__motif {
    top: var(--globe-top);
    left: calc(50% + var(--globe-gap));
    right: auto;
    transform: none;
  }
}

.hero__inner {
  position: relative;
  z-index: 1;
  max-width: 40rem;
}

.hero h1 {
  margin-bottom: var(--space-3);
}

.hero__org {
  font-family: var(--font-body);
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-soft);
  margin-bottom: var(--space-3);
}

.hero .btn-row {
  margin-top: var(--space-4);
}

/* Two-column text block used by "Who is CCA for?" */
.split {
  display: grid;
  gap: var(--space-4);
  grid-template-columns: 1fr;
}

@media (min-width: 48rem) {
  .split {
    grid-template-columns: 1fr 1fr;
    gap: var(--space-6);
  }
}

.split__closing {
  font-family: var(--font-display);
  font-size: clamp(1.5rem, 3.4vw, 2.2rem);
  line-height: 1.15;
  margin-top: var(--space-5);
  padding-top: var(--space-4);
  border-top: 1px solid var(--rule);
  max-width: none;
}

/* --- CATEGORY COLOURS ---------------------------------------------
   The logo has four map pins; the site has four kinds of gathering.
   Position decides colour, and the order is the same on Home and on
   Events, so Community Nights is always cyan, Open Houses always green,
   and so on. If you reorder one list, reorder the other to match. */

.do-list > li:nth-child(1),
.activity-grid > li:nth-child(1) { --pin: var(--pin-cyan); }
.do-list > li:nth-child(2),
.activity-grid > li:nth-child(2) { --pin: var(--pin-green); }
.do-list > li:nth-child(3),
.activity-grid > li:nth-child(3) { --pin: var(--pin-red); }
.do-list > li:nth-child(4),
.activity-grid > li:nth-child(4) { --pin: var(--pin-orange); }

/* "What We Do" — an editorial list, deliberately NOT icon cards. The
   leading numeral is now a pin, echoing the four pins on the globe. */
.do-list {
  list-style: none;
  margin: 0;
  padding: 0;
}

.do-list > li {
  display: grid;
  grid-template-columns: 2.75rem 1fr;
  gap: var(--space-2);
  padding-block: var(--space-4);
  border-top: 1px solid var(--rule);
}

.do-list > li::before {
  content: "";
  width: 1.05rem;
  height: 1.6rem;
  margin-top: 0.3rem;
  background: var(--pin, var(--navy));
  -webkit-mask: var(--pin-shape) center / contain no-repeat;
  mask: var(--pin-shape) center / contain no-repeat;
}

.do-list h3,
.do-list p {
  grid-column: 2;
}

.do-list h3 {
  margin-bottom: 0.4rem;
}

.do-list p {
  margin: 0;
  color: var(--ink-soft);
}

@media (min-width: 48rem) {
  .do-list > li {
    grid-template-columns: 4rem 16rem 1fr;
    align-items: start;
    gap: var(--space-4);
  }

  .do-list h3 {
    margin: 0;
  }

  /* Three columns at this width, so the paragraph gets its own. */
  .do-list p {
    grid-column: 3;
  }
}

/* Photo slot with a motif fallback when no file has been added yet. */
.photo-band {
  /* The band sits between two sections rather than inside one, so its
     margin stacks on their padding instead of collapsing into it. Any
     margin here is added to the 72px the sections already provide, which
     is why this was reading as a 144px gap. Zero keeps the photo on the
     same vertical rhythm as every other section boundary. */
  margin-block: 0;
}

.photo-slot {
  position: relative;
  border-radius: var(--radius);
  /* The home banner. 16:9 rather than a wider cinematic strip: real group
     photos come off phones around 3:2, and anything wider crops people off
     at the waist. The other pages override this below. */
  aspect-ratio: 16 / 9;
  background: var(--accent-soft);
  border: 1px solid var(--rule);
  overflow: hidden;
  display: grid;
  place-items: center;
}

.photo-slot img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.photo-slot__fallback {
  width: min(9rem, 34%);
  opacity: 0.5;
}

.photo-slot[data-has-photo="true"] .photo-slot__fallback {
  display: none;
}

.closing-cta {
  text-align: center;
  padding-block: var(--space-7);
}

.closing-cta h2 {
  max-width: 20ch;
  margin-inline: auto;
}

.closing-cta .btn-row {
  justify-content: center;
}

/* Calendar embed frame, shared by Home and Events. */
.calendar-frame {
  border: 1px solid var(--rule);
  border-radius: var(--radius);
  background: var(--paper);
  padding: var(--space-1);
  overflow: hidden;
}

.calendar-frame iframe {
  display: block;
  width: 100%;
  border: 0;
  height: 34rem;
}

@media (max-width: 47.99rem) {
  .calendar-frame iframe {
    height: 26rem;
  }
}

.calendar-fallback {
  padding: var(--space-5) var(--space-3);
  text-align: center;
  color: var(--ink-soft);
}

/* --- 10. ABOUT ---------------------------------------------------- */

.pullquote {
  font-family: var(--font-display);
  font-size: clamp(1.8rem, 4.4vw, 3rem);
  line-height: 1.12;
  letter-spacing: -0.015em;
  color: var(--ink);
  margin: 0 0 var(--space-4);
  padding-left: var(--space-3);
  /* border-left: 4px solid var(--pin-red); */
  border-left: 4px solid var(--pin-green);
  max-width: 24ch;
}

.about-mission {
  display: grid;
  gap: var(--space-5);
  grid-template-columns: 1fr;
  align-items: start;
}

@media (min-width: 48rem) {
  .about-mission {
    grid-template-columns: 1.1fr 1fr;
    gap: var(--space-6);
  }
}

.about-mission .photo-slot {
  aspect-ratio: 4 / 3;
}

.values {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 0;
  grid-template-columns: 1fr;
}

.values > li {
  padding-block: var(--space-3);
  border-top: 1px solid var(--rule);
}

.values h3 {
  margin-bottom: 0.3rem;
}

.values p {
  margin: 0;
  color: var(--ink-soft);
}

@media (min-width: 48rem) {
  .values > li {
    display: grid;
    grid-template-columns: 14rem 1fr;
    gap: var(--space-4);
    align-items: baseline;
  }
}

.cck-note {
  background: var(--accent-soft);
  border-left: 3px solid var(--accent);
  padding: var(--space-3);
  margin-top: var(--space-4);
}

.cck-note p {
  margin: 0;
  max-width: none;
}

/* --- 11. GET INVOLVED --------------------------------------------- */

.involved-step {
  display: grid;
  gap: var(--space-2);
  grid-template-columns: 1fr;
  padding-block: var(--space-5);
  border-top: 1px solid var(--rule);
}

@media (min-width: 48rem) {
  .involved-step {
    grid-template-columns: 16rem 1fr;
    gap: var(--space-5);
  }
}

.involved-step h2 {
  font-size: clamp(1.5rem, 2.6vw, 2rem);
  margin: 0;
}

.involved-step p {
  margin-bottom: var(--space-3);
}

.involved-lead {
  display: grid;
  gap: var(--space-5);
  grid-template-columns: 1fr;
  align-items: center;
}

@media (min-width: 48rem) {
  .involved-lead {
    grid-template-columns: 1fr 1fr;
    gap: var(--space-6);
  }
}

.involved-lead .photo-slot {
  aspect-ratio: 4 / 3;
}

.contact-list {
  list-style: none;
  margin: 0;
  padding: 0;
}

.contact-list li {
  padding-block: var(--space-2);
  border-top: 1px solid var(--rule);
}

/* --- 12. MOTION ---------------------------------------------------- */

/* The class is added by main.js, so sections stay visible if JS is off. */
.reveal {
  opacity: 0;
  transform: translateY(14px);
  transition: opacity 250ms ease-out, transform 250ms ease-out;
}

.reveal[data-revealed="true"] {
  opacity: 1;
  transform: none;
}

@media (prefers-reduced-motion: reduce) {
  .reveal,
  .reveal[data-revealed="true"] {
    opacity: 1;
    transform: none;
    transition: none;
  }

  *,
  *::before,
  *::after {
    animation-duration: 0.001ms !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }
}

/* --- 13. ACTIVITY GRID (Events page) ------------------------------- */

/* Four activities in a 2x2 grid, each with its own drop-in photo slot.
   Add a photo by putting a correctly named file in assets/photos/ --
   no code change. A missing file falls back to the circles motif. */

.activity-grid {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-4);
}

@media (min-width: 48rem) {
  .activity-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: var(--space-5) var(--space-4);
  }
}

.activity {
  display: flex;
  flex-direction: column;
}

.activity .photo-slot {
  aspect-ratio: 3 / 2;
  margin-bottom: var(--space-2);
}

.activity h3 {
  margin: 0 0 0.4rem;
}

.activity p {
  margin: 0;
  color: var(--ink-soft);
  max-width: none;
}

.activity__index {
  font-family: var(--font-body);
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  color: var(--navy);
  margin: 0 0 var(--space-1);
  padding-top: var(--space-2);
  border-top: 3px solid var(--pin, var(--navy));
}

/* --- 14. EVENT GALLERY (Events page) ------------------------------- */

/* One row of photos per past event. Rows are built by main.js from the
   gallery list in site-data.js, so adding an event never touches HTML. */

.activity__more {
  margin-top: var(--space-2);
}

.activity__more a {
  font-family: var(--font-body);
  font-size: 0.9rem;
  font-weight: 700;
}

.gallery-event + .gallery-event {
  margin-top: var(--space-5);
  padding-top: var(--space-5);
  border-top: 1px solid var(--rule);
}

.gallery-event__head {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: var(--space-2);
  margin-bottom: var(--space-3);
}

.gallery-event__head h3 {
  margin: 0;
}

.gallery-event__when {
  font-family: var(--font-body);
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--accent);
  margin: 0;
}

.gallery-row {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(13rem, 1fr));
  gap: var(--space-2);
}

/* A real button, so keyboard and screen readers get it for free. */
.gallery-photo {
  display: block;
  width: 100%;
  padding: 0;
  border: 0;
  background: var(--paper-deep);
  cursor: zoom-in;
  overflow: hidden;
}

.gallery-photo img {
  display: block;
  width: 100%;
  /* Phone photos arrive in both orientations. A ragged row of mixed
     heights reads as broken, so every thumbnail is cropped to the same
     shape; the lightbox shows the whole picture uncropped. */
  aspect-ratio: 4 / 3;
  object-fit: cover;
  transition: transform 220ms ease, opacity 220ms ease;
}

.gallery-photo:hover img,
.gallery-photo:focus-visible img {
  transform: scale(1.03);
  opacity: 0.92;
}

/* --- Lightbox ------------------------------------------------------ */

.lightbox {
  position: fixed;
  inset: 0;
  z-index: 100;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--space-4);
  /* The existing ink color at low opacity -- not a new palette value. */
  background: rgba(31, 27, 24, 0.9);
}

.lightbox[hidden] {
  display: none;
}

.lightbox img {
  display: block;
  max-width: 100%;
  max-height: calc(100vh - var(--space-7));
  width: auto;
  height: auto;
  object-fit: contain;
}

.lightbox__caption {
  position: absolute;
  left: var(--space-4);
  right: var(--space-4);
  bottom: var(--space-2);
  text-align: center;
  font-family: var(--font-body);
  font-size: 0.85rem;
  color: var(--paper);
  margin: 0;
}

.lightbox__close {
  position: absolute;
  top: var(--space-2);
  right: var(--space-2);
  width: 2.75rem;
  height: 2.75rem;
  padding: 0;
  border: 1px solid rgba(250, 246, 239, 0.4);
  border-radius: 50%;
  background: transparent;
  color: var(--paper);
  font-size: 1.4rem;
  line-height: 1;
  cursor: pointer;
}

.lightbox__close:hover {
  background: rgba(250, 246, 239, 0.14);
}

body[data-lightbox-open] {
  overflow: hidden;
}

@media (prefers-reduced-motion: reduce) {
  .gallery-photo img {
    transition: none;
  }
  .gallery-photo:hover img,
  .gallery-photo:focus-visible img {
    transform: none;
  }
}