/* Voices of Recovery Movement: inner page compositions (loaded after site.css) */

/* ---------- Quieter icons: no circles behind them ---------- */
.contact-list li { grid-template-columns: 1.75rem minmax(0, 1fr); }
.contact-list .bi, .notice__icon { width: auto; height: auto; display: block; background: none; border-radius: 0; font-size: 1.25rem; line-height: 1.4; color: var(--clay); }
.theme-ink .contact-list .bi { background: none; }

/* ---------- Reel: a row of photographs of different heights, each captioned with one word ---------- */
.reel { display: grid; gap: clamp(.75rem, .5rem + 1vw, 1.25rem); grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: end; margin-top: clamp(2.5rem, 2rem + 2.5vw, 4.5rem); }
.reel__item { margin: 0; display: grid; gap: .7rem; }
.reel__media { overflow: hidden; background: var(--sand); }
.reel__media img { width: 100%; height: 100%; object-fit: cover; transition: transform 1.4s var(--ease-out); }
.reel__item:hover .reel__media img { transform: scale(1.04); }
.reel__item figcaption { display: flex; gap: .6rem; align-items: baseline; font-size: 0.9375rem; color: var(--muted); }
.reel__item figcaption b { color: var(--ink); font-weight: 700; }
.reel__item:nth-child(1) .reel__media { aspect-ratio: 4 / 5; }
.reel__item:nth-child(2) .reel__media { aspect-ratio: 1; }
.reel__item:nth-child(3) .reel__media { aspect-ratio: 1; }
.reel__item:nth-child(4) .reel__media { aspect-ratio: 4 / 5; }
@media (min-width: 900px) {
  .reel { grid-template-columns: 1.25fr .85fr 1fr .9fr; }
  .reel__item:nth-child(1) .reel__media { aspect-ratio: 4 / 5; }
  .reel__item:nth-child(2) .reel__media { aspect-ratio: 3 / 4; }
  .reel__item:nth-child(3) .reel__media { aspect-ratio: 5 / 4; }
  .reel__item:nth-child(4) .reel__media { aspect-ratio: 2 / 3; }
  .reel__item:nth-child(even) { transform: translateY(clamp(1.5rem, 3vw, 3rem)); }
}
.theme-ink .reel__media, .page-hero--dark .reel__media { background: rgba(247,243,236,0.06); }
.theme-ink .reel__item figcaption, .page-hero--dark .reel__item figcaption { color: rgba(247,243,236,0.86); }
.theme-ink .reel__item figcaption b, .page-hero--dark .reel__item figcaption b { color: var(--paper); }
.page-hero:has(.reel) { padding-bottom: clamp(4rem, 3rem + 4vw, 7rem); }

/* ---------- Collage, mirrored ---------- */
@media (min-width: 900px) {
  .collage--flip .collage__a { grid-column: 6 / 13; grid-row: 1 / 10; }
  .collage--flip .collage__b { grid-column: 2 / 6; grid-row: 2 / 7; margin: 0 clamp(1rem, 2vw, 2rem) 0 0; }
  .collage--flip .collage__c { grid-column: 1 / 3; grid-row: 1 / 4; }
  .collage--flip .collage__note { grid-column: 1 / 7; grid-row: 6 / 11; margin: 0 clamp(-3rem, -3vw, -1rem) 0 0; }
}
.collage__note.theme-ink footer { color: rgba(247,243,236,0.86); }
.collage__note.theme-ink .scribble { color: var(--clay-light); }

/* ---------- Print: portrait photograph with a caption plate laid over its corner ---------- */
.print { position: relative; margin: 0; }
.print__plate {
  position: absolute; left: clamp(-1.25rem, -2vw, -.5rem); bottom: clamp(1.25rem, 3vw, 2.5rem); z-index: 3; max-width: min(78%, 19rem);
  padding: 1rem 1.2rem; background: var(--ink); color: var(--paper); display: grid; gap: .25rem; font-size: 0.9375rem; line-height: 1.45;
}
.print__plate b { font-size: 1.05rem; }
.print__plate span { color: rgba(247,243,236,0.86); }
@media (max-width: 640px) { .print__plate { left: .75rem; bottom: .75rem; } }

/* ---------- Sticky split: photograph holds still while a list scrolls past ---------- */
.sticky-split { display: grid; gap: clamp(2.5rem, 2rem + 3vw, 5rem); }
@media (min-width: 960px) {
  .sticky-split { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); align-items: start; }
  .sticky-split__media { position: sticky; top: calc(var(--header-h) + 2rem); }
  .sticky-split--right { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); }
  .sticky-split--right .sticky-split__media { order: 2; }
}
.sticky-split__media .arch { aspect-ratio: 4 / 5; }

/* Ruled list of roles or channels */
.role-list { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--line); }
.role-list > li { display: grid; gap: .45rem 2rem; padding: clamp(1.4rem, 1.2rem + .6vw, 1.9rem) 0; border-bottom: 1px solid var(--line); }
@media (min-width: 700px) { .role-list > li { grid-template-columns: minmax(0, .85fr) minmax(0, 1.35fr); align-items: baseline; } }
.role-list h3 { font-weight: 700; font-size: clamp(1.2rem, 1.1rem + .4vw, 1.45rem); line-height: 1.25; letter-spacing: -.01em; }
.role-list p { color: var(--muted); }
.role-list .link-arrow { margin-top: .6rem; }
.theme-ink .role-list, .theme-ink .role-list > li { border-color: rgba(247,243,236,0.16); }
.theme-ink .role-list p { color: rgba(247,243,236,0.86); }

/* ---------- Filmstrip: three captioned photographs, the middle one dropped ---------- */
.filmstrip { display: grid; gap: clamp(1rem, .75rem + 1.5vw, 2rem); grid-template-columns: repeat(2, minmax(0, 1fr)); margin-top: clamp(3rem, 2.5rem + 3vw, 5.5rem); }
.filmstrip__item { margin: 0; display: grid; gap: .9rem; align-content: start; }
.filmstrip__media { aspect-ratio: 4 / 5; overflow: hidden; background: var(--sand); }
.filmstrip__media img { width: 100%; height: 100%; object-fit: cover; transition: transform 1.4s var(--ease-out); }
.filmstrip__item:hover .filmstrip__media img { transform: scale(1.04); }
.filmstrip__item figcaption { display: grid; gap: .2rem; }
.filmstrip__item figcaption b { font-size: 1.1rem; }
.filmstrip__item figcaption span { color: var(--muted); font-size: 1rem; }
.filmstrip__item:nth-child(3) { grid-column: 1 / -1; }
.filmstrip__item:nth-child(3) .filmstrip__media { aspect-ratio: 16 / 9; }
@media (min-width: 800px) {
  .filmstrip { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .filmstrip__item:nth-child(3) { grid-column: auto; }
  .filmstrip__item:nth-child(3) .filmstrip__media { aspect-ratio: 4 / 5; }
  .filmstrip__item:nth-child(2) { margin-top: clamp(2.5rem, 5vw, 5.5rem); }
}
.theme-ink .filmstrip__media { background: rgba(247,243,236,0.06); }
.theme-ink .filmstrip__item figcaption span { color: rgba(247,243,236,0.86); }

/* ---------- Visit: a street scene with the address laid across it ---------- */
.visit { display: grid; margin-top: clamp(2.5rem, 2rem + 2.5vw, 4.5rem); }
.visit__media { margin: 0; aspect-ratio: 4 / 3; overflow: hidden; background: var(--sand); }
.visit__media img { width: 100%; height: 100%; object-fit: cover; }
.visit__plate { position: relative; z-index: 2; margin: -3rem 1rem 0; padding: clamp(1.6rem, 1.2rem + 2vw, 3rem); display: grid; gap: 1.4rem; align-content: start; }
.visit__plate h2 { font-weight: 700; font-size: clamp(1.7rem, 1.3rem + 1.6vw, 2.6rem); line-height: 1.08; letter-spacing: -.015em; }
.visit__facts { display: grid; gap: 1rem; margin: 0; }
.visit__facts div { display: grid; gap: .15rem; padding-top: 1rem; border-top: 1px solid rgba(247,243,236,0.16); }
.visit__facts dt { font-size: 0.875rem; color: var(--sage); }
.visit__facts dd { margin: 0; font-size: 1.08rem; }
.visit__facts a { color: var(--paper); }
.visit__facts a:hover { color: var(--clay-light); }
@media (min-width: 900px) {
  .visit { grid-template-columns: repeat(12, minmax(0, 1fr)); align-items: center; }
  .visit__media { grid-column: 1 / 9; grid-row: 1; aspect-ratio: 16 / 10; }
  .visit__plate { grid-column: 8 / 13; grid-row: 1; margin: 0; }
}

/* ---------- Donate: photo-led gift tiers ---------- */
.tier__media { margin: -2rem -2rem .5rem; aspect-ratio: 16 / 10; overflow: hidden; background: var(--sand); }
.tier__media img { width: 100%; height: 100%; object-fit: cover; transition: transform 1.4s var(--ease-out); }
.tier:hover .tier__media img { transform: scale(1.04); }
.tier { overflow: hidden; }

/* ---------- Founder quote ---------- */
.founder-quote { font-weight: 600; font-size: clamp(1.4rem, 1.15rem + 1vw, 2rem); line-height: 1.25; letter-spacing: -.012em; color: var(--ink); padding-left: 1.25rem; border-left: 3px solid var(--clay); text-wrap: balance; }

/* ---------- Small print block beside a sticky heading ---------- */
.side-print { margin: clamp(1.5rem, 2vw, 2.5rem) 0 0; max-width: 26rem; }
.side-print .frame { aspect-ratio: 4 / 3; }
.side-print figcaption { margin-top: .7rem; font-size: 0.9375rem; color: var(--muted); }
.reel__media, .filmstrip__media, .visit__media, .tier__media { position: relative; }
.visit__plate .scribble { color: var(--clay-light); }


/* Phones: reel captions as a simple line under each photo */
@media (max-width: 699px) {
  .reel__item figcaption { display: block; font-size: .875rem; line-height: 1.45; }
  .reel__item figcaption b { display: block; }
}