/* ==========================================================================
   Risen Christ Catholic Church - design system
   Minimalist pass: the church itself is a plain white room with a peaked
   roof, clear light and very little ornament. The site follows that: near
   white ground, hairline rules instead of shadows, one accent used sparingly,
   and photographs carrying the colour. Tokens mirror DESIGN.md.
   Static site, no build step.
   ========================================================================== */

/* -- Fonts (self-hosted, see assets/fonts) -- */
@font-face {
  font-family: 'Cormorant Garamond';
  src: url('../fonts/cormorant-400.woff2') format('woff2');
  font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'Cormorant Garamond';
  src: url('../fonts/cormorant-500.woff2') format('woff2');
  font-weight: 500; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'Cormorant Garamond';
  src: url('../fonts/cormorant-600.woff2') format('woff2');
  font-weight: 600; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'Cormorant Garamond';
  src: url('../fonts/cormorant-400i.woff2') format('woff2');
  font-weight: 400; font-style: italic; font-display: swap;
}
@font-face {
  font-family: 'Cormorant Garamond';
  src: url('../fonts/cormorant-600i.woff2') format('woff2');
  font-weight: 600; font-style: italic; font-display: swap;
}
@font-face {
  font-family: 'Work Sans';
  src: url('../fonts/worksans-400.woff2') format('woff2');
  font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'Work Sans';
  src: url('../fonts/worksans-500.woff2') format('woff2');
  font-weight: 500; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'Work Sans';
  src: url('../fonts/worksans-600.woff2') format('woff2');
  font-weight: 600; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'Work Sans';
  src: url('../fonts/worksans-700.woff2') format('woff2');
  font-weight: 700; font-style: normal; font-display: swap;
}

/* -- Tokens -- */
:root {
  /* Near white ground with a warm hint, echoing the church walls rather than
     the heavier parchment of the previous pass. */
  --paper: #FBFAF7;
  --paper-alt: #F4F2ED;
  --surface: #FFFFFF;
  --ink: #1D1B18;
  --ink-soft: #6A6459;
  --ink-faint: #9A9488;
  --accent: #28466B;
  --accent-deep: #1B334F;
  --rule: #E4E0D7;
  --rule-strong: #CFCABF;

  --font-display: 'Cormorant Garamond', 'Iowan Old Style', Georgia, serif;
  --font-body: 'Work Sans', -apple-system, BlinkMacSystemFont, sans-serif;

  --radius-interactive: 4px;
  --radius-panel: 6px;
  --radius-pill: 999px;

  --space-xs: 8px;
  --space-sm: 16px;
  --space-md: 24px;
  --space-lg: 40px;
  --space-xl: 72px;
  --space-2xl: 120px;

  --shadow-sm: 0 1px 2px rgba(29,27,24,0.05);
  --shadow-md: 0 10px 30px rgba(29,27,24,0.08);
  --shadow-lg: 0 24px 64px rgba(29,27,24,0.14);

  --ease: cubic-bezier(0.16, 1, 0.3, 1);
  --t-fast: 150ms cubic-bezier(0.4, 0, 0.2, 1);
  --t-base: 300ms var(--ease);
  --t-slow: 600ms var(--ease);

  --container: 1080px;
}

/* -- Reset -- */
*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
body {
  font-family: var(--font-body);
  font-size: 1rem;
  line-height: 1.75;
  color: var(--ink);
  background: var(--paper);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
img, picture, svg { display: block; max-width: 100%; height: auto; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }
ul, ol { list-style: none; padding: 0; }
h1, h2, h3, h4 { font-family: var(--font-display); font-weight: 600; line-height: 1.15; color: var(--ink); }
dl, dt, dd { margin: 0; }

.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0;
}
a:focus-visible, button:focus-visible, iframe:focus-visible,
input:focus-visible, select:focus-visible, textarea:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
  border-radius: 2px;
}
.skip-link {
  position: absolute; left: 12px; top: -60px; z-index: 100;
  background: var(--ink); color: var(--paper);
  padding: 10px 16px; border-radius: var(--radius-interactive);
  font-size: 0.875rem; font-weight: 600;
  transition: top var(--t-fast);
}
.skip-link:focus { top: 12px; }

/* -- Layout -- */
.container { width: 100%; max-width: var(--container); margin-inline: auto; padding-inline: var(--space-md); }
main { display: block; }
.section { padding-block: var(--space-2xl); }
.section--alt { background: var(--paper-alt); }
.section__head { max-width: 62ch; margin-bottom: var(--space-xl); }
.section__title { font-size: clamp(1.75rem, 1.4rem + 1.4vw, 2.5rem); letter-spacing: -0.005em; }
.section__lede { margin-top: var(--space-sm); color: var(--ink-soft); font-size: 1.0625rem; max-width: 58ch; }
.muted { color: var(--ink-soft); }
.prose p + p { margin-top: 1em; }
.prose p { color: var(--ink-soft); font-size: 1.0625rem; }

.label {
  display: block;
  font-family: var(--font-body);
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-faint);
  margin-bottom: var(--space-sm);
}

.link-arrow { color: var(--accent); font-weight: 500; border-bottom: 1px solid transparent; transition: border-color var(--t-fast); }
.link-arrow:hover { border-color: var(--accent); }

.tag {
  display: inline-flex; align-items: center; padding: 2px 9px;
  border: 1px solid var(--rule); border-radius: var(--radius-pill);
  color: var(--ink-soft); font-size: 0.75rem; font-weight: 500;
}

/* Two column split, collapses on narrow screens */
.split { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-xl); align-items: start; }
.split--wide { grid-template-columns: 1.15fr 1fr; }
@media (max-width: 860px) { .split, .split--wide { grid-template-columns: 1fr; gap: var(--space-lg); } }

.figure { border-radius: var(--radius-panel); overflow: hidden; border: 1px solid var(--rule); line-height: 0; }
.figure img { width: 100%; }

/* -- Buttons -- */
.btn {
  display: inline-flex; align-items: center; justify-content: center;
  padding: 12px 26px; border-radius: var(--radius-interactive);
  font-size: 0.9375rem; font-weight: 600; letter-spacing: 0.01em;
  transition: background var(--t-fast), border-color var(--t-fast), color var(--t-fast);
}
.btn--primary { background: var(--accent); color: #fff; }
.btn--primary:hover { background: var(--accent-deep); }
.btn--quiet { border: 1px solid var(--rule-strong); color: var(--ink); }
.btn--quiet:hover { border-color: var(--ink); }

/* -- Header: light and quiet, a hairline rule instead of a dark slab -- */
.site-header {
  position: sticky; top: 0; z-index: 40;
  /* Solid rather than a translucent blur: `backdrop-filter` over a long page
     of photographs is expensive to composite on every scroll frame, and a flat
     near-white bar is the quieter choice anyway. */
  background: var(--paper);
  border-bottom: 1px solid var(--rule);
}
.site-header__inner { position: relative; display: flex; align-items: center; justify-content: space-between; gap: var(--space-md); min-height: 68px; padding-block: 8px; }
.brand { display: flex; align-items: center; gap: 12px; }
.brand__mark { width: 52px; height: 52px; border-radius: var(--radius-interactive); object-fit: cover; flex-shrink: 0; }
.brand__name { display: block; font-family: var(--font-display); font-weight: 600; font-size: 1.0625rem; line-height: 1.2; color: var(--ink); }
.brand__place { display: block; font-size: 0.75rem; color: var(--ink-faint); letter-spacing: 0.02em; }

.site-nav { display: flex; align-items: center; gap: var(--space-md); }
.site-nav a {
  font-size: 0.8125rem; font-weight: 500; letter-spacing: 0.02em;
  color: var(--ink-soft);
  padding-block: 4px; border-bottom: 1px solid transparent;
  transition: color var(--t-fast), border-color var(--t-fast);
}
.site-nav a:hover { color: var(--ink); border-color: var(--rule-strong); }

.nav-toggle { display: none; flex-direction: column; justify-content: center; align-items: center; gap: 5px; width: 40px; height: 40px; flex-shrink: 0; }
.nav-toggle__bar { width: 22px; height: 1.5px; background: var(--ink); transition: transform var(--t-fast), opacity var(--t-fast); }
.nav-toggle[aria-expanded="true"] .nav-toggle__bar:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] .nav-toggle__bar:nth-child(2) { opacity: 0; }
.nav-toggle[aria-expanded="true"] .nav-toggle__bar:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

@media (max-width: 900px) {
  .nav-toggle { display: flex; }
  .site-nav {
    position: absolute; top: 100%; left: 0; right: 0;
    flex-direction: column; align-items: stretch; gap: 0;
    background: var(--paper); border-bottom: 1px solid var(--rule);
    max-height: 0; overflow: hidden; transition: max-height var(--t-base);
  }
  .site-nav.is-open { max-height: 420px; }
  .site-nav a { padding: 14px var(--space-md); border-bottom: 1px solid var(--rule); }
}

/* -- Hero: the motto leads, one photograph of the building, nothing else.
      The photo is shown at or below its native width so it stays crisp. -- */
.hero { padding-top: var(--space-2xl); }
/* Centred on purpose: the facade this hero sits above is symmetrical, and a
   centred column of quiet type reads as composed rather than accidental.
   Width is in px, not ch, because ch resolves against the 16px body size and
   would be far too narrow for the display-size motto. */
.hero__inner { max-width: 780px; text-align: center; }
.hero__kicker {
  font-size: 0.75rem; font-weight: 600; letter-spacing: 0.14em;
  text-transform: uppercase; color: var(--ink-faint); margin-bottom: var(--space-md);
}
.hero__motto {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: clamp(1.875rem, 1.2rem + 2.6vw, 3.25rem);
  line-height: 1.16;
  letter-spacing: -0.01em;
}
.hero__subtitle { margin-top: var(--space-md); margin-inline: auto; color: var(--ink-soft); font-size: 1.0625rem; max-width: 48ch; }
.hero__actions { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--space-xs); margin-top: var(--space-lg); }
/* Full-bleed by request. The source tops out at 843px wide, so this
   upscales on anything wider than that (roughly 1.7-2.3x on a typical
   1400-1900px screen) - a deliberate exception to "never upscale"
   elsewhere on the site, traded for the full-width look. Capped height
   plus object-fit: cover keeps very wide screens from turning the hero
   into an oversized banner. */
.hero__figure {
  width: 100vw;
  margin-left: 50%;
  transform: translateX(-50%);
  margin-top: var(--space-2xl);
  max-height: 640px;
  overflow: hidden;
  line-height: 0;
}
.hero__figure img { width: 100%; height: 100%; object-fit: cover; }
@media (max-width: 640px) { .hero__figure { max-height: 420px; } }
@media (max-width: 640px) { .hero { padding-top: var(--space-xl); } }

/* -- Schedule -- */
.schedule { display: flex; flex-direction: column; }
.schedule__group { display: grid; grid-template-columns: 220px 1fr; gap: var(--space-md); padding-block: var(--space-md); border-top: 1px solid var(--rule); }
.schedule__group:last-child { border-bottom: 1px solid var(--rule); }
.schedule__day { font-family: var(--font-display); font-size: 1.25rem; font-weight: 600; }
.schedule__day span { display: block; font-family: var(--font-body); font-size: 0.6875rem; font-weight: 600; color: var(--ink-faint); text-transform: uppercase; letter-spacing: 0.1em; margin-top: 3px; }
.schedule__rows { display: flex; flex-direction: column; gap: 10px; }
.schedule__row { display: flex; flex-wrap: wrap; align-items: baseline; gap: 10px; }
.schedule__time { font-weight: 600; min-width: 76px; font-variant-numeric: tabular-nums; }
.schedule__desc { color: var(--ink-soft); }
.schedule__note { color: var(--ink-faint); font-size: 0.875rem; }
@media (max-width: 640px) { .schedule__group { grid-template-columns: 1fr; gap: 8px; } }

.split { margin-top: var(--space-xl); }
.section__head + .schedule { margin-top: 0; }

/* -- Info rows -- */
.info-rows { display: flex; flex-direction: column; margin-top: var(--space-sm); }
.info-row { display: flex; justify-content: space-between; align-items: baseline; gap: var(--space-md); padding-block: 10px; border-top: 1px solid var(--rule); font-size: 0.9375rem; }
.info-row:last-child { border-bottom: 1px solid var(--rule); }
.info-row dt { color: var(--ink-soft); }
.info-row dd { font-weight: 500; text-align: right; }

/* -- Clergy: a plain list, no cards -- */
.clergy { margin-top: var(--space-xl); }
.clergy__title { font-size: 1.125rem; margin-bottom: var(--space-sm); }
.clergy__list { display: flex; flex-direction: column; }
.clergy__list li { display: flex; justify-content: space-between; align-items: baseline; gap: var(--space-md); padding-block: 12px; border-top: 1px solid var(--rule); }
.clergy__list li:last-child { border-bottom: 1px solid var(--rule); }
.clergy__name { font-family: var(--font-display); font-size: 1.125rem; font-weight: 600; }
.clergy__role { color: var(--ink-faint); font-size: 0.875rem; text-align: right; }

/* -- Bulletin viewer: cover trigger opens the week's full page set in the
      lightbox. See DESIGN.md for the missing-file handling. -- */
.bulletin-viewer__title { margin-top: 0; }
.bulletin-viewer { max-width: 300px; }
.bulletin-viewer__trigger { display: block; width: 100%; text-align: left; }
.bulletin-viewer__frame {
  display: block; position: relative; aspect-ratio: 1414 / 2000; overflow: hidden;
  border-radius: var(--radius-panel); border: 1px solid var(--rule);
  background: var(--surface);
  transition: transform var(--t-base), box-shadow var(--t-base);
}
.bulletin-viewer__tag { position: absolute; top: 10px; right: 10px; background: rgba(255,255,255,0.92); z-index: 1; }
/* `color`/`font-size` here style the alt text the browser renders when the file
   is missing. Zeroing them means the native broken-image UI never escapes the
   frame even if JS is stale, cached, or disabled; the JS placeholder below is
   the intended presentation, this is just a safe floor. */
.bulletin-viewer__cover { display: block; width: 100%; height: 100%; object-fit: cover; color: transparent; font-size: 0; }
.bulletin-viewer__placeholder {
  display: none; position: absolute; inset: 0; padding: var(--space-lg);
  align-items: center; justify-content: center; text-align: center;
  color: var(--ink-soft); font-size: 0.875rem; line-height: 1.5;
}
.bulletin-viewer__frame.is-missing .bulletin-viewer__cover { display: none; }
.bulletin-viewer__frame.is-missing .bulletin-viewer__placeholder { display: flex; }
.bulletin-viewer__trigger:hover .bulletin-viewer__frame,
.bulletin-viewer__trigger:focus-visible .bulletin-viewer__frame { transform: translateY(-3px); box-shadow: var(--shadow-md); }
.bulletin-viewer__cta {
  display: inline-flex; align-items: center; gap: 6px; margin-top: var(--space-sm);
  font-weight: 500; font-size: 0.9375rem; color: var(--accent);
}
.bulletin-viewer__cta span { display: inline-block; transition: transform var(--t-fast); }
.bulletin-viewer__trigger:hover .bulletin-viewer__cta span,
.bulletin-viewer__trigger:focus-visible .bulletin-viewer__cta span { transform: translateX(4px); }
@media (prefers-reduced-motion: reduce) {
  .bulletin-viewer__frame, .bulletin-viewer__cta span { transition: none; }
}

/* -- Bulletin archive: grouped by year, one quiet row per edition. Rows share
      the lightbox viewer with the current week's cover via data-bulletin-wrap. -- */
.archive { margin-top: var(--space-2xl); }
.archive__label { margin-bottom: var(--space-md); }
.archive__year + .archive__year { margin-top: var(--space-lg); }
.archive__year-title {
  font-family: var(--font-body); font-size: 0.8125rem; font-weight: 600;
  letter-spacing: 0.1em; color: var(--ink-faint);
  padding-bottom: 8px; border-bottom: 1px solid var(--rule-strong);
}
.archive__list { display: flex; flex-direction: column; }
.archive__trigger {
  display: flex; align-items: baseline; justify-content: space-between; gap: var(--space-md);
  width: 100%; padding-block: 14px;
  border-bottom: 1px solid var(--rule);
  transition: color var(--t-fast);
}
.archive__trigger:hover, .archive__trigger:focus-visible { color: var(--accent); }
.archive__date { font-size: 1rem; font-weight: 500; }
.archive__meta { color: var(--ink-faint); font-size: 0.8125rem; }
.archive__note { margin-top: var(--space-md); font-size: 0.875rem; }
.archive__note a { color: var(--accent); }

/* -- Mass intention form -- */
.intention { display: grid; grid-template-columns: 1.3fr 1fr; gap: var(--space-xl); align-items: start; }
@media (max-width: 860px) { .intention { grid-template-columns: 1fr; gap: var(--space-lg); } }
.intention__form { display: flex; flex-direction: column; gap: var(--space-md); }
.field { display: flex; flex-direction: column; gap: 6px; }
.field-row { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-md); }
@media (max-width: 560px) { .field-row { grid-template-columns: 1fr; } }
.field label { font-size: 0.8125rem; font-weight: 600; color: var(--ink-soft); letter-spacing: 0.02em; }
.field__optional { font-weight: 400; color: var(--ink-faint); text-transform: none; letter-spacing: 0; }
.field input, .field select, .field textarea {
  font: inherit; font-size: 0.9375rem; color: var(--ink);
  background: var(--surface);
  border: 1px solid var(--rule-strong); border-radius: var(--radius-interactive);
  padding: 10px 12px; width: 100%;
  transition: border-color var(--t-fast);
}
.field input:hover, .field select:hover, .field textarea:hover { border-color: var(--ink-faint); }
.field textarea { resize: vertical; line-height: 1.6; }
.intention__form .btn { align-self: flex-start; }
.intention__hint { font-size: 0.8125rem; max-width: 46ch; }
.intention__aside {
  border: 1px solid var(--rule); border-radius: var(--radius-panel);
  background: var(--surface); padding: var(--space-md);
}
.intention__aside h3 { font-size: 1.125rem; margin-bottom: var(--space-xs); }
.intention__aside > * + * { margin-top: var(--space-sm); }
.intention__aside .muted { font-size: 0.875rem; }

/* -- Gallery: true masonry, tile height driven by each photo's own aspect
      ratio. CSS multi-column layout, not Grid. Every tile is full column
      width; height is whatever `height: auto` produces from the image's
      real dimensions, which is where the size variety comes from rather than
      hand-assigned span classes. This is also why it cannot gap: columns
      just stack items sequentially, there is no 2D packing step to get
      wrong. (An earlier Grid version with hand-picked row+column spans hit
      a real dead-gap bug; a second Grid version with width-only spans fixed
      the gap but could not vary height. Multi-column solves both at once.)
      Photos stay interleaved rather than grouped by event, and everything
      enters staggered rather than all at once. The scattered rotation from
      the earlier pass was dropped in the minimalist pass. -- */
.mosaic-gallery {
  column-count: 4;
  column-gap: 12px;
}
.mosaic-gallery > .mosaic-gallery__item {
  position: relative;
  display: block;
  break-inside: avoid;
  margin-bottom: 12px;
  overflow: hidden;
  border-radius: var(--radius-panel);
  opacity: 0;
  transform: translateY(14px);
  transition: opacity var(--t-slow), transform var(--t-base), box-shadow var(--t-fast);
  transition-delay: calc(var(--i, 0) * 30ms);
}
.mosaic-gallery.is-visible > .mosaic-gallery__item { opacity: 1; transform: none; }
.mosaic-gallery__item:hover { box-shadow: var(--shadow-md); z-index: 3; }
.mosaic-gallery__item img { display: block; width: 100%; height: auto; }
@media (max-width: 960px) { .mosaic-gallery { column-count: 3; } }
@media (max-width: 720px) { .mosaic-gallery { column-count: 2; } }
@media (max-width: 480px) { .mosaic-gallery { column-count: 2; column-gap: 8px; } }
@media (prefers-reduced-motion: reduce) {
  .mosaic-gallery__item { transition: opacity var(--t-fast); transform: none !important; transition-delay: 0s !important; }
}

/* -- Lightbox -- */
.lightbox {
  position: fixed; inset: 0; z-index: 200; padding: var(--space-lg);
  display: flex; align-items: center; justify-content: center;
  background: rgba(29, 27, 24, 0.94);
  opacity: 0; visibility: hidden; transition: opacity var(--t-base);
}
.lightbox.is-open { opacity: 1; visibility: visible; }
.lightbox img { max-width: 100%; max-height: 100%; border-radius: var(--radius-panel); box-shadow: var(--shadow-lg); }
.lightbox img[hidden] { display: none; }
.lightbox__placeholder {
  display: none; max-width: 420px; padding: var(--space-xl) var(--space-lg);
  border-radius: var(--radius-panel); background: rgba(255,255,255,0.06);
  border: 1px solid rgba(255,255,255,0.16);
  color: #fff; text-align: center; font-size: 0.9375rem; line-height: 1.5;
}
.lightbox__placeholder.is-visible { display: block; }
.lightbox__close {
  position: absolute; top: var(--space-md); right: var(--space-md);
  width: 44px; height: 44px; border-radius: 50%;
  background: rgba(255,255,255,0.12); color: #fff;
  display: flex; align-items: center; justify-content: center; font-size: 1.5rem;
  transition: background var(--t-fast);
}
.lightbox__close:hover { background: rgba(255,255,255,0.22); }
.lightbox__nav {
  position: absolute; top: 50%; transform: translateY(-50%);
  width: 48px; height: 48px; border-radius: 50%;
  background: rgba(255,255,255,0.12); color: #fff;
  display: flex; align-items: center; justify-content: center; font-size: 1.75rem; line-height: 1;
  transition: background var(--t-fast);
}
.lightbox__nav:hover { background: rgba(255,255,255,0.22); }
.lightbox__nav--prev { left: var(--space-md); }
.lightbox__nav--next { right: var(--space-md); }
.lightbox__counter {
  position: absolute; bottom: var(--space-md); left: 50%; transform: translateX(-50%);
  padding: 6px 14px; border-radius: var(--radius-pill);
  background: rgba(255,255,255,0.12); color: #fff;
  font-size: 0.8125rem; font-weight: 500;
}
.lightbox__nav[hidden], .lightbox__counter[hidden] { display: none; }
@media (max-width: 640px) {
  .lightbox__nav { width: 40px; height: 40px; font-size: 1.375rem; }
  .lightbox__nav--prev { left: 6px; }
  .lightbox__nav--next { right: 6px; }
}
@media (prefers-reduced-motion: reduce) { .lightbox { transition: none; } }

/* -- Map -- */
.map-frame { position: relative; width: 100%; padding-top: 72%; border-radius: var(--radius-panel); overflow: hidden; border: 1px solid var(--rule); }
.map-frame iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; filter: grayscale(1) contrast(1.05); }
.visit__address { font-family: var(--font-display); font-size: 1.375rem; line-height: 1.4; margin-bottom: var(--space-sm); }

/* -- Vatican News widget: official Web Component, brings its own internal
      styling via Shadow DOM -- */
.vatican-widget { width: 100%; }

/* -- Footer -- */
.site-footer { background: var(--ink); color: #EDEAE3; padding-block: var(--space-xl) var(--space-md); }
.site-footer a { color: #EDEAE3; opacity: 0.78; transition: opacity var(--t-fast); }
.site-footer a:hover { opacity: 1; }
.site-footer__grid { display: grid; grid-template-columns: 1.3fr 1fr 1fr 1fr; gap: var(--space-lg); padding-bottom: var(--space-lg); }
.site-footer__brand { display: flex; align-items: flex-start; gap: 12px; }
.site-footer__mark { width: 52px; height: 52px; border-radius: var(--radius-interactive); object-fit: cover; flex-shrink: 0; }
.site-footer__brand p { font-family: var(--font-display); font-size: 1.0625rem; line-height: 1.3; }
.site-footer h3 { font-family: var(--font-body); font-size: 0.6875rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.12em; color: #EDEAE3; opacity: 0.5; margin-bottom: var(--space-xs); }
.site-footer__col { display: flex; flex-direction: column; gap: 6px; font-size: 0.9375rem; }
.site-footer__col p { opacity: 0.8; }
.site-footer__bottom { border-top: 1px solid rgba(255,255,255,0.14); padding-top: var(--space-md); font-size: 0.8125rem; opacity: 0.62; }
.site-footer__bottom p + p { margin-top: 6px; }
.site-footer__bottom em { font-family: var(--font-display); font-size: 1rem; font-style: italic; opacity: 0.9; }

@media (max-width: 860px) {
  .site-footer__grid { grid-template-columns: 1fr 1fr; }
  .site-footer__brand { grid-column: 1 / -1; }
}
@media (max-width: 560px) { .site-footer__grid { grid-template-columns: 1fr; } }

/* -- Scroll reveal (generic) -- */
.reveal { opacity: 0; transform: translateY(16px); transition: opacity var(--t-slow), transform var(--t-slow); }
.reveal.is-visible { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  .reveal { opacity: 1; transform: none; transition: none; }
}