/*
Theme Name: The Jesus Cloud
Theme URI: https://thejesuscloud.com
Author: Mark Harvey
Description: A quiet, photographic theme built around a single photograph. The image is the design.
Version: 0.1.0
License: GNU General Public License v2 or later
Text Domain: jesuscloud
*/

/* ---------------------------------------------------------------
   Tokens
   The palette is pulled from the photograph itself: the near-black
   of the ocean, the Ektachrome warmth of the light breaking through.
   --------------------------------------------------------------- */
/* Palette: Calvary Chapel Chino Hills, sampled from calvarycch.org/know-jesus/
   — navy #0a2655, terracotta #d6764f, off-white #f4f5f7 — carried across the
   whole site so a visitor handed over to them never feels the seam. Darkened
   into a night register so the photograph still leads. */
:root {
  --ink:        #061024;   /* navy pushed almost to black — the dark water */
  --ink-soft:   #0a2655;   /* Calvary navy — section grounds */
  --ink-lift:   #0e3068;   /* raised panels and cards */
  --light:      #f4f5f7;   /* Calvary off-white */
  --light-dim:  #b6c2d6;
  --accent:     #d6764f;   /* Calvary terracotta */
  --accent-lit: #e08a66;
  --rule:       rgba(244, 245, 247, 0.16);

  --calvary:     #d6764f;
  --calvary-lit: #e08a66;
  --calvary-navy:#0a2655;

  --serif: Georgia, 'Iowan Old Style', 'Palatino Linotype', Palatino, 'Times New Roman', serif;
  --sans:  -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;

  /* Reading column. 34rem gave ~54 characters a line — narrow, and it made the
     story page very tall. 44rem lands around 70, inside the comfortable
     45–75 range, and takes roughly a fifth off the scroll. */
  --measure: 44rem;
  --gutter: clamp(1.25rem, 5vw, 3rem);
}

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

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; }
}

body {
  margin: 0;
  background: var(--ink);
  color: var(--light);
  font-family: var(--sans);
  font-size: clamp(1.05rem, 0.98rem + 0.35vw, 1.2rem);
  line-height: 1.7;
  -webkit-font-smoothing: antialiased;
}

img { max-width: 100%; height: auto; display: block; }
a { color: var(--accent); text-underline-offset: 0.2em; }
a:hover { color: var(--light); }

.skip-link {
  position: absolute; left: -9999px;
  background: var(--light); color: var(--ink);
  padding: .75rem 1.25rem; z-index: 100;
}
.skip-link:focus { left: 1rem; top: 1rem; }

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

/* ---------------------------------------------------------------
   Header — deliberately almost invisible over the photograph
   --------------------------------------------------------------- */
/* Solid, above the photograph rather than on it. Nothing is written over the
   picture anywhere on this site. */
.site-header {
  position: relative; z-index: 20;
  display: flex; align-items: center; justify-content: space-between;
  gap: 1rem; padding: 1.1rem var(--gutter);
  background: var(--ink);
  border-bottom: 1px solid var(--rule);
}
.site-title {
  margin: 0; font-family: var(--serif); font-weight: 400;
  font-size: 1.05rem; letter-spacing: .16em; text-transform: uppercase;
  white-space: nowrap;   /* wrapping here grew the header and pushed the nav
                            down onto the verse */
}
.site-title a { color: var(--light); text-decoration: none; }

.nav-toggle {
  display: none; background: none; border: 1px solid var(--rule);
  color: var(--light); font: inherit; font-size: .85rem;
  padding: .5rem .9rem; border-radius: 2px; cursor: pointer;
}
.site-nav ul {
  display: flex; flex-wrap: nowrap; gap: clamp(.8rem, 1.8vw, 1.7rem);
  list-style: none; margin: 0; padding: 0;
}
.site-nav a { white-space: nowrap; }
.site-nav a {
  color: var(--light); text-decoration: none;
  font-size: .82rem; letter-spacing: .1em; text-transform: uppercase;
  opacity: .82; padding: .3rem 0;
  border-bottom: 1px solid transparent;
}
.site-nav a:hover, .site-nav .current-menu-item > a { opacity: 1; border-bottom-color: var(--accent); }

/* Six items plus the wordmark need real room. Below this the inline nav is
   collapsed into the toggle rather than allowed to wrap over the photograph. */
@media (max-width: 68rem) {
  .nav-toggle { display: block; }
  .site-nav {
    position: absolute; top: 100%; right: var(--gutter); left: var(--gutter);
    background: var(--ink-soft); border: 1px solid var(--rule);
    padding: 1rem 1.25rem; display: none;
  }
  .site-nav.is-open { display: block; }
  .site-nav ul { flex-direction: column; gap: .35rem; }
  .site-nav a { display: block; padding: .55rem 0; }
}

/* ---------------------------------------------------------------
   Hero — the photograph, and almost nothing else
   --------------------------------------------------------------- */
.hero {
  position: relative;
  min-height: 100svh;
  display: grid;
  grid-template-rows: 1fr auto;
  background-color: var(--ink);
  background-size: cover;
  /* The figure sits roughly a third down the frame; the lower half is dark
     beach. Bias the crop upward so a wide viewport keeps the light in view. */
  background-position: center 30%;
  background-repeat: no-repeat;
}
/* Fallback when no photograph has been set yet: an evocation of the
   scene's tonality so layout and type can be judged before the scan lands. */
.hero.is-placeholder {
  background-image:
    radial-gradient(120% 70% at 50% 34%, rgba(244,245,247,.90) 0%, rgba(214,222,238,.5) 18%, rgba(64,84,124,.35) 42%, rgba(6,16,36,0) 66%),
    linear-gradient(180deg, #061024 0%, #0a2655 24%, #2c4a80 40%, #0a1c3c 60%, #061024 100%);
}
/* Type only ever sits in the dark water at the foot of the frame, never in the
   light. The scrim leaves the sky and the break untouched and deepens only the
   lower third, where the words live. */
/* No scrim, no overlay, no type. Which slice of the frame a screen shows depends
   on its shape, so anything set over the photograph can land in the light on
   somebody's monitor. The picture is left completely clean; every word lives
   below it on solid ground. */

/* Interior pages: a shorter band of the same photograph. */
.hero--page {
  min-height: clamp(14rem, 38svh, 26rem);
  background-position: center 34%;
}

/* The page title, immediately beneath the picture. */
.page-title {
  background: var(--ink);
  padding: clamp(1.75rem, 5vh, 2.75rem) var(--gutter) 0;
  text-align: center;
}
.page-title h1 {
  margin: 0;
  font-family: var(--serif); font-weight: 400;
  font-size: clamp(2rem, 1.5rem + 2.2vw, 3.1rem);
  line-height: 1.2;
}

.hero-inner {
  position: relative; z-index: 10;
  grid-row: 2;
  padding: 0 var(--gutter) clamp(3.5rem, 10vh, 7rem);
  text-align: center;
}
.hero-verse {
  margin: 0 auto;
  max-width: 30rem;
  font-family: var(--serif);
  font-size: clamp(1.15rem, 1rem + 0.9vw, 1.6rem);
  line-height: 1.6;
  text-shadow: 0 2px 24px rgba(0,0,0,.75);
}
.hero-ref {
  margin: .9rem 0 0;
  font-size: .78rem; letter-spacing: .22em; text-transform: uppercase;
  color: var(--light-dim);
}
.hero-cue {
  display: inline-block; margin-top: clamp(2rem, 6vh, 3.5rem);
  color: var(--light); text-decoration: none;
  font-size: .74rem; letter-spacing: .2em; text-transform: uppercase;
  opacity: .7;
}
.hero-cue::after { content: ""; display: block; width: 1px; height: 2.2rem; margin: .7rem auto 0; background: var(--light); opacity: .45; }
.hero-cue:hover { opacity: 1; color: var(--light); }

/* The front page IS the photograph. One screen, nothing under it, nothing
   competing. The scrim is lighter still here — only enough to hold the type. */
/* Front page: header, then the photograph taking every pixel that is left, then
   the words on solid dark. Together they fill the viewport exactly — one screen,
   no scrollbar, and nothing written over the picture. */
body.home { display: flex; flex-direction: column; min-height: 100svh; }
body.home #main { display: flex; flex-direction: column; flex: 1 1 auto; min-height: 0; }
.hero--full { flex: 1 1 auto; min-height: 5rem; }
/* On a short window the caption, not the picture, is what has to give. */
@media (max-height: 34rem) {
  .front-caption { padding-top: 1rem; padding-bottom: 1.1rem; }
  .front-caption .hero-verse { font-size: .95rem; }
  .hero-teaser { margin-top: .45rem; font-size: .8rem; }
}

.front-caption {
  flex: 0 0 auto;
  background: var(--ink);
  padding: clamp(1.1rem, 2.6vh, 1.7rem) var(--gutter) clamp(1.2rem, 3vh, 1.9rem);
  text-align: center;
}
.front-caption .hero-verse {
  max-width: min(92vw, 60rem);
  margin: 0 auto;
  font-size: clamp(1rem, .82rem + .66vw, 1.5rem);
  line-height: 1.45;
  text-wrap: balance;
  text-shadow: none;
}
.front-caption .hero-ref { margin-top: .4rem; font-size: .7rem; }
.front-caption .hero-actions { margin-top: clamp(.7rem, 1.6vh, 1.05rem); }
.front-caption .hero-quiet { margin-top: clamp(.6rem, 1.4vh, .85rem); }
.front-caption .btn--lg { padding: .85rem 2rem; font-size: .82rem; }
/* One line under the story link — enough of a hook to earn the click. */
.hero-teaser {
  max-width: 34rem; margin: .6rem auto 0;
  font-family: var(--serif); font-style: italic;
  font-size: clamp(.85rem, .8rem + .18vw, .98rem);
  line-height: 1.5; color: var(--light-dim);
  text-wrap: balance;
}
.hero-actions { margin-top: clamp(1.5rem, 4vh, 2.25rem); }
.hero-quiet { margin: clamp(1rem, 3vh, 1.5rem) 0 0; }
.hero-quiet a {
  color: var(--light); text-decoration: none; opacity: .72;
  font-size: .78rem; letter-spacing: .16em; text-transform: uppercase;
  border-bottom: 1px solid rgba(244,236,214,.35); padding-bottom: .15rem;
}
.hero-quiet a:hover { opacity: 1; border-bottom-color: var(--accent); }

.hero-note {
  position: absolute; z-index: 12; left: 50%; top: 1.25rem; transform: translateX(-50%);
  background: rgba(216,181,103,.94); color: #2a1f08;
  font-size: .72rem; letter-spacing: .1em; text-transform: uppercase;
  padding: .45rem 1rem; border-radius: 2px; text-align: center;
}

/* ---------------------------------------------------------------
   Sections
   --------------------------------------------------------------- */
.section { padding: clamp(4rem, 12vh, 8rem) var(--gutter); }
.section + .section { border-top: 1px solid var(--rule); }
.section--soft { background: var(--ink-soft); }

.wrap { max-width: var(--measure); margin-inline: auto; }
.wrap--wide { max-width: 62rem; margin-inline: auto; }

.eyebrow {
  margin: 0 0 1rem;
  font-size: .74rem; letter-spacing: .24em; text-transform: uppercase;
  color: var(--accent);
}
h1, h2, h3 { font-family: var(--serif); font-weight: 400; line-height: 1.25; }
h1 { font-size: clamp(2rem, 1.5rem + 2.2vw, 3.1rem); margin: 0 0 1.5rem; }
h2 { font-size: clamp(1.6rem, 1.3rem + 1.5vw, 2.35rem); margin: 0 0 1.25rem; }
h3 { font-size: 1.25rem; margin: 2.25rem 0 .75rem; }
p  { margin: 0 0 1.35rem; }
.lede { font-size: 1.16em; color: var(--light); }
.muted { color: var(--light-dim); }

blockquote {
  margin: 2.5rem 0; padding-left: 1.5rem;
  border-left: 2px solid var(--accent);
  font-family: var(--serif); font-size: 1.15em; font-style: italic;
}
blockquote cite { display: block; margin-top: .75rem; font-size: .8rem; font-style: normal; letter-spacing: .16em; text-transform: uppercase; color: var(--light-dim); }

/* Buttons */
.btn {
  display: inline-block;
  padding: .85rem 1.9rem;
  border: 1px solid var(--accent);
  color: var(--accent); text-decoration: none;
  font-size: .82rem; letter-spacing: .14em; text-transform: uppercase;
  border-radius: 2px;
  transition: background-color .18s ease, color .18s ease;
}
.btn:hover { background: var(--accent); color: var(--ink); }
.btn--solid { background: var(--accent); color: var(--ink); }
.btn--solid:hover { background: var(--light); border-color: var(--light); color: var(--ink); }
.btn-row { display: flex; flex-wrap: wrap; gap: 1rem; margin-top: 2rem; }

/* The handoff button. Matches Calvary Chino Hills' own CTA — same terracotta,
   white text, 4px corners — so arriving on their page feels like a continuation. */
.btn--calvary {
  background: var(--calvary);
  border-color: var(--calvary);
  color: #fff;
  border-radius: 4px;
}
.btn--calvary:hover { background: var(--calvary-lit); border-color: var(--calvary-lit); color: #fff; }
.btn--lg { padding: 1.05rem 2.4rem; font-size: .9rem; }

/* ---------------------------------------------------------------
   The plate — the photograph shown whole.
   The hero crops to fill the viewport; this is where the full frame
   is presented uncropped, the way it exists on the slide.
   --------------------------------------------------------------- */
.plate { padding: clamp(3rem, 9vh, 6rem) var(--gutter); text-align: center; }
.plate figure { margin: 0 auto; max-width: 74rem; }

/* Inside an entry the plate breaks out of the reading measure — the photograph
   should never be confined to a text column.
   `width:100%` would resolve against the 34rem parent, so the width is stated
   against the viewport and the block is re-centred on the page. */
.plate--inline {
  width: min(100vw - (2 * var(--gutter)), 62rem);
  max-width: none;
  margin: 0 0 2.75rem;
  padding: 0;
  position: relative;
  left: 50%;
  transform: translateX(-50%);
  text-align: center;
}
.plate img {
  width: 100%; height: auto;
  border: 1px solid var(--rule);
  box-shadow: 0 24px 70px rgba(0,0,0,.6);
}
.plate figcaption {
  margin-top: 1.25rem;
  font-size: .82rem; letter-spacing: .12em; text-transform: uppercase;
  color: var(--light-dim);
}
/* Stand-in until the scan lands, holding the frame's 3:2 proportions. */
.plate .plate-placeholder {
  aspect-ratio: 3 / 2;
  border: 1px dashed var(--rule);
  display: grid; place-items: center;
  padding: 2rem; text-align: center;
  color: var(--light-dim); font-size: .9rem;
  background:
    radial-gradient(120% 70% at 50% 38%, rgba(244,245,247,.88) 0%, rgba(214,222,238,.46) 18%, rgba(64,84,124,.32) 44%, rgba(6,16,36,0) 68%),
    linear-gradient(180deg, #061024 0%, #0a2655 24%, #2c4a80 40%, #0a1c3c 60%, #061024 100%);
}
.plate .plate-placeholder span {
  background: rgba(6,16,36,.72); padding: .6rem 1.1rem; border-radius: 2px;
}

/* The slide exhibit — evidence, so it is shown modestly and never competes
   with the photograph itself. */
.slides {
  display: grid; gap: 1.25rem;
  grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr));
  margin: 0 0 2.5rem;
}
.slides figure { margin: 0; }
.slides img { width: 100%; border: 1px solid var(--rule); border-radius: 2px; }
.slides figcaption {
  margin-top: .6rem; font-size: .76rem; letter-spacing: .08em;
  text-transform: uppercase; color: var(--light-dim);
}
/* Set inside the story, directly under the moment the shutter was pressed.
   Kept small — evidence must not compete with the photograph it authenticates. */
.entry .slides {
  max-width: 23rem; margin: 2rem auto 1rem; gap: 1rem;
  grid-template-columns: repeat(2, 1fr);
}
.entry .slides figcaption { font-size: .66rem; letter-spacing: .06em; }
.exhibit-note {
  max-width: 32rem; margin: 0 auto 2.5rem;
  text-align: center; font-size: .88rem; color: var(--light-dim);
}

/* The photograph set inside the prose, held to the reading column so it sits
   flush with the text rather than breaking out of it. */
.story-photo { margin: 2.25rem 0; }
.story-photo img { width: 100%; height: auto; border: 1px solid var(--rule); }
.story-photo figcaption {
  margin-top: .7rem; font-size: .8rem; letter-spacing: .04em;
  color: var(--light-dim);
}
/* Two photographs sharing one caption — his cars beside mine. */
.story-pair-imgs { display: grid; grid-template-columns: 1fr 1fr; gap: .75rem; }
.story-pair-imgs img { width: 100%; height: 100%; object-fit: cover; aspect-ratio: 4 / 3; border: 1px solid var(--rule); }
@media (max-width: 32rem) { .story-pair-imgs { grid-template-columns: 1fr; } }

/* ---------------------------------------------------------------
   Watch — videos and downloads
   --------------------------------------------------------------- */
.jc-videos { display: grid; gap: 3rem; margin: 2rem 0 3rem; }
.jc-video h3 { margin: 1rem 0 .4rem; font-size: 1.3rem; }
.jc-video p { margin: 0; color: var(--light-dim); }
.jc-player {
  position: relative; aspect-ratio: 16 / 9;
  background: #000; border: 1px solid var(--rule); border-radius: 2px; overflow: hidden;
}
.jc-player iframe,
.jc-player video { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }

.jc-docs-head { margin-top: 3rem; }
.jc-docs { list-style: none; margin: 1.25rem 0 0; padding: 0; display: grid; gap: 1rem; }
.jc-docs li {
  padding: 1rem 1.25rem; background: var(--ink-lift);
  border: 1px solid var(--rule); border-left: 2px solid var(--accent); border-radius: 2px;
}
.jc-docs a { font-size: 1.05rem; }
.jc-doc-kind {
  font-family: var(--sans); font-size: .66rem; letter-spacing: .12em; text-transform: uppercase;
  color: var(--ink); background: var(--light-dim); padding: .12rem .45rem; border-radius: 2px;
  margin-left: .4rem; vertical-align: .1em;
}
.jc-doc-note { display: inline-block; margin-top: .35rem; font-size: .9rem; color: var(--light-dim); }

/* ---------------------------------------------------------------
   Story submissions
   --------------------------------------------------------------- */
.jc-note {
  border-left: 3px solid var(--accent);
  background: var(--ink-lift);
  padding: 1.1rem 1.35rem;
  margin: 0 0 2rem;
}
.jc-note p { margin: 0; }
.jc-note p + p { margin-top: .6rem; font-size: .95rem; color: var(--light-dim); }
.jc-note--bad { border-left-color: #d05a52; }

.jc-form { margin: 1.5rem 0 0; }
.jc-field { display: block; margin: 0 0 1.4rem; }
.jc-field label,
.jc-check > label > span { display: block; font-size: .95rem; margin-bottom: .4rem; }
.jc-req {
  font-size: .68rem; letter-spacing: .12em; text-transform: uppercase;
  color: var(--accent); margin-left: .5rem;
}
.jc-field input,
.jc-field textarea {
  width: 100%; padding: .75rem .85rem;
  background: var(--ink); color: var(--light);
  border: 1px solid var(--rule); border-radius: 2px;
  font-family: inherit; font-size: 1rem; line-height: 1.55;
}
.jc-field textarea { resize: vertical; min-height: 11rem; }
.jc-field input:focus,
.jc-field textarea:focus { outline: 2px solid var(--accent); outline-offset: 1px; }
.jc-hint { display: block; margin-top: .4rem; font-size: .82rem; color: var(--light-dim); }

.jc-check { margin: 0 0 1.75rem; }
.jc-check > label { display: flex; gap: .6rem; align-items: flex-start; cursor: pointer; }
.jc-check input { margin-top: .3rem; flex: 0 0 auto; }
.jc-check > label > span { margin-bottom: 0; }

/* Honeypot: present for bots, gone for people and screen readers. */
.jc-hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

.jc-wall { margin-top: 2.5rem; display: grid; gap: 1.75rem; }
.jc-story {
  margin: 0; padding: 1.4rem 1.5rem;
  background: var(--ink-lift); border: 1px solid var(--rule);
  border-left: 2px solid var(--accent);
  font-style: normal; font-size: 1rem;
}
.jc-story p { margin: 0 0 .9rem; }
.jc-story p:last-of-type { margin-bottom: .9rem; }
.jc-story cite {
  display: block; font-size: .76rem; font-style: normal;
  letter-spacing: .1em; text-transform: uppercase; color: var(--light-dim);
}

/* Part sub-headings and the closing call, used on the story page. */
.entry .part-sub {
  margin: -.6rem 0 2rem;
  font-family: var(--sans); font-size: .86rem;
  letter-spacing: .04em; color: var(--accent);
}
.entry h2 {
  margin: 4rem 0 .5rem;
  padding-top: 2.25rem;
  border-top: 1px solid var(--rule);
}
.entry .choice-head {
  font-family: var(--serif); font-weight: 400; text-transform: none;
  letter-spacing: 0; font-size: clamp(1.5rem, 1.3rem + .9vw, 2rem);
  color: var(--light); margin: 3rem 0 1.25rem;
}

/* The copyright certificate — a document, so it sits on white. */
.certificate { margin: 2rem 0 1.25rem; text-align: center; }
.certificate img {
  width: 100%; max-width: 30rem; margin-inline: auto;
  border: 1px solid var(--rule); background: #fff;
}
.certificate figcaption {
  margin-top: .75rem; font-size: .74rem; letter-spacing: .06em;
  text-transform: uppercase; color: var(--light-dim);
}

/* Card grid for the section index */
.cards {
  display: grid; gap: 1.25rem;
  grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
  margin-top: 2.5rem;
}
.card {
  display: block; text-decoration: none; color: var(--light);
  background: var(--ink-lift); border: 1px solid var(--rule);
  padding: 1.75rem 1.5rem; border-radius: 2px;
  transition: border-color .18s ease, transform .18s ease;
}
.card:hover { border-color: var(--accent); transform: translateY(-2px); color: var(--light); }
.card h3 { margin: 0 0 .5rem; font-size: 1.15rem; }
.card p { margin: 0; font-size: .95rem; color: var(--light-dim); }

/* ---------------------------------------------------------------
   Page templates
   --------------------------------------------------------------- */
.entry { padding: clamp(2.5rem, 7vh, 4rem) var(--gutter) clamp(4rem, 12vh, 7rem); }
.entry .wrap > :first-child { margin-top: 0; }
.entry ul, .entry ol { padding-left: 1.35rem; margin: 0 0 1.35rem; }
.entry li { margin-bottom: .5rem; }

.placeholder-note {
  border: 1px dashed var(--rule);
  background: var(--ink-lift);
  padding: 1.25rem 1.5rem;
  font-size: .95rem;
  color: var(--light-dim);
  border-radius: 2px;
}

/* ---------------------------------------------------------------
   Footer
   --------------------------------------------------------------- */
.site-footer {
  border-top: 1px solid var(--rule);
  padding: clamp(3rem, 8vh, 4.5rem) var(--gutter);
  text-align: center;
  background: var(--ink-soft);
}
.footer-verse {
  font-family: var(--serif); font-style: italic;
  max-width: 28rem; margin: 0 auto 2rem; color: var(--light-dim);
}
.footer-nav ul { display: flex; flex-wrap: wrap; justify-content: center; gap: 1.25rem; list-style: none; margin: 0 0 2rem; padding: 0; }
.footer-nav a { color: var(--light-dim); text-decoration: none; font-size: .8rem; letter-spacing: .1em; text-transform: uppercase; }
.footer-nav a:hover { color: var(--accent); }
.colophon { font-size: .78rem; color: var(--light-dim); margin: 0; }
.colophon--fine {
  max-width: 44rem; margin: 1rem auto 0;
  font-size: .68rem; line-height: 1.6; color: rgba(182,194,214,.62);
}

/* Footer credit: the slide itself, so it is obvious on every page exactly
   which image the registration covers. */
.footer-credit {
  max-width: 40rem; margin: 0 auto 2rem;
  padding-top: 1.75rem; border-top: 1px solid var(--rule);
}
.footer-slides {
  display: flex; justify-content: center; gap: .75rem; margin-bottom: 1rem;
}
.footer-slides img {
  width: 84px; height: auto;
  border: 1px solid var(--rule); border-radius: 2px;
}
.footer-rights {
  margin: 0; font-size: .78rem; line-height: 1.65; color: var(--light-dim);
}
.footer-rights strong { color: var(--light); }