/* Media Mindfulness
   Liturgical blue, Byzantine gold, quiet embroidery geometry.
   Built to feel like a Ukrainian Roman Catholic atelier, not a SaaS landing. */

:root {
  --navy: #0a1b33;
  --navy-mid: #122845;
  --navy-deep: #071426;
  --ink: #101828;
  --ink2: #3a4556;
  --ink3: #6b7585;
  --paper: #f3f4f7;
  --paper2: #e8ebf0;
  --white: #fbfbfd;
  --gold: #c9a84c;
  --gold-soft: #e8d5a3;
  --gold-ink: #7a5f1f;
  --crimson: #8b1e2d;
  --rule: #d4d8e0;
  /* --rule is a decorative hairline (1.38:1 on white) and must not be used as
     the edge of a control: WCAG 1.4.11 wants 3:1 for a UI boundary. This is
     the same family, dark enough to be a border you can find in daylight. */
  --control-edge: #9aa3b2;
  --glow: rgba(201, 168, 76, 0.22);
  --glow-blue: rgba(70, 120, 180, 0.28);
  --shadow: 0 20px 48px rgba(10, 27, 51, 0.1);
  --ease: cubic-bezier(0.22, 1, 0.36, 1);
  --nav-h: 64px;
  --sage: var(--navy-mid);
  --sage-soft: #e4eaf2;
  --signal: var(--gold);
  --hero: var(--navy-deep);
  --hero-mid: var(--navy);
}

* { margin: 0; padding: 0; box-sizing: border-box; }

html { scroll-behavior: smooth; }

html, body {
  background: var(--paper);
  color: var(--ink);
  font-family: 'Newsreader', Georgia, 'Times New Roman', serif;
  font-size: 17.5px;
  line-height: 1.62;
  -webkit-font-smoothing: antialiased;
}

a { color: inherit; }

/* Skip link. Tabbing into this site landed on the wordmark, then six nav
   links, then EN, then ES, and only then reached anything on the page: on the
   homepage "Learn the Method" was the eleventh stop, on every single page
   load. It is moved off-screen rather than hidden, because display:none and
   visibility:hidden both take it out of the tab order, which is the one thing
   it must stay in. Gold on navy so it reads against the header it lands over. */
.skip-link {
  position: absolute;
  left: 8px;
  top: -64px;
  z-index: 300;
  padding: 12px 18px;
  background: var(--gold);
  color: var(--navy-deep);
  font-family: 'Newsreader', Georgia, serif;
  font-weight: 600;
  font-size: 15px;
  text-decoration: none;
  border-radius: 2px;
  transition: top 0.15s var(--ease);
}

.skip-link:focus { top: 8px; }

/* ---- Top nav -------------------------------------------------------- */

.site-header {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 200;
  height: var(--nav-h);
  display: flex;
  align-items: center;
  background: rgba(7, 20, 38, 0.88);
  backdrop-filter: blur(14px) saturate(1.2);
  -webkit-backdrop-filter: blur(14px) saturate(1.2);
  border-bottom: 1px solid rgba(201, 168, 76, 0.35);
  color: var(--white);
}

.site-header::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: -1px;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--gold), transparent);
  opacity: 0.7;
  pointer-events: none;
}

.site-header-inner {
  width: min(1120px, 100%);
  margin: 0 auto;
  padding: 0 22px;
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 18px;
}

.site-mark {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  text-decoration: none;
  color: var(--white);
  font-family: 'Cinzel', serif;
  font-size: 14px;
  letter-spacing: 0.06em;
  font-weight: 700;
  white-space: nowrap;
  min-height: 44px;
}

/* The ornament IS the brand mark: the five-move loop from the favicon,
   gold on the navy header. One symbol in the tab, the same symbol on the
   masthead. */
.site-mark .orn {
  width: 20px;
  height: 20px;
  flex: 0 0 20px;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 64'%3E%3Ccircle cx='32' cy='32' r='18' fill='none' stroke='%23c9a84c' stroke-width='5'/%3E%3Cg fill='%23e8d5a3'%3E%3Ccircle cx='32' cy='14' r='6.6'/%3E%3Ccircle cx='49.1' cy='26.4' r='5'/%3E%3Ccircle cx='42.6' cy='46.6' r='5'/%3E%3Ccircle cx='21.4' cy='46.6' r='5'/%3E%3Ccircle cx='14.9' cy='26.4' r='5'/%3E%3C/g%3E%3C/svg%3E") center/contain no-repeat;
  opacity: 0.95;
}

.site-nav {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 4px 18px;
  flex-wrap: wrap;
}

.site-nav a {
  text-decoration: none;
  color: rgba(251, 251, 253, 0.78);
  font-family: 'Newsreader', Georgia, serif;
  font-size: 15px;
  font-weight: 600;
  letter-spacing: 0.01em;
  padding: 8px 2px;
  min-height: 44px;
  display: inline-flex;
  align-items: center;
  position: relative;
  transition: color 0.18s var(--ease);
}

.site-nav a::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 6px;
  height: 1px;
  background: var(--gold);
  transform: scaleX(0);
  transform-origin: center;
  transition: transform 0.2s var(--ease);
}

.site-nav a:hover,
.site-nav a[aria-current="page"] {
  color: var(--gold-soft);
}

.site-nav a:hover::after,
.site-nav a[aria-current="page"]::after {
  transform: scaleX(1);
}

.site-header .lang-toggle {
  position: static;
  top: auto;
  right: auto;
  z-index: auto;
  display: flex;
  gap: 2px;
  padding: 3px;
  border: 1px solid rgba(201, 168, 76, 0.35);
  border-radius: 2px;
  background: rgba(255, 255, 255, 0.04);
  font-family: 'Newsreader', Georgia, serif;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.08em;
  backdrop-filter: none;
}

.site-header .lang-toggle a {
  color: rgba(251, 251, 253, 0.7);
  text-decoration: none;
  padding: 7px 10px;
  min-height: 36px;
  display: inline-flex;
  align-items: center;
  border-radius: 0;
  transition: background 0.18s var(--ease), color 0.18s var(--ease);
}

.site-header .lang-toggle a.active {
  background: var(--gold);
  color: var(--navy-deep);
}

.site-header .lang-toggle a:hover:not(.active) {
  color: var(--gold-soft);
  background: transparent;
}

.nav-toggle {
  display: none;
  appearance: none;
  border: 1px solid rgba(201, 168, 76, 0.4);
  background: transparent;
  color: var(--gold-soft);
  width: 44px;
  height: 44px;
  cursor: pointer;
  border-radius: 2px;
  position: relative;
}

.nav-toggle span,
.nav-toggle span::before,
.nav-toggle span::after {
  content: "";
  position: absolute;
  left: 11px;
  right: 11px;
  height: 1px;
  background: currentColor;
  transition: transform 0.2s var(--ease), top 0.2s var(--ease), opacity 0.2s var(--ease);
}

/* The bars are absolute against the span, not the button, so the shared
   left/right: 11px above collapses them to zero width and only the middle
   rule ever drew: the menu button rendered as a single dash. They span
   their parent instead. */
.nav-toggle span { top: 21px; }
.nav-toggle span::before,
.nav-toggle span::after { left: 0; right: 0; }
.nav-toggle span::before { top: -7px; }
.nav-toggle span::after { top: 7px; }

body.nav-open .nav-toggle span { background: transparent; }
body.nav-open .nav-toggle span::before { top: 0; transform: rotate(45deg); }
body.nav-open .nav-toggle span::after { top: 0; transform: rotate(-45deg); }

/* ---- Hero ----------------------------------------------------------- */

.hero {
  position: relative;
  min-height: 100svh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: calc(var(--nav-h) + 48px) 28px 80px;
  overflow: hidden;
  background:
    radial-gradient(ellipse 70% 55% at 78% 18%, var(--glow), transparent 58%),
    radial-gradient(ellipse 55% 50% at 12% 78%, var(--glow-blue), transparent 55%),
    linear-gradient(168deg, var(--navy-deep) 0%, var(--navy) 48%, var(--navy-mid) 100%);
  color: var(--white);
}

.hero::before {
  content: "";
  position: absolute;
  inset: 0;
  opacity: 0.16;
  background-image:
    linear-gradient(45deg, transparent 48%, rgba(201,168,76,0.55) 49%, rgba(201,168,76,0.55) 51%, transparent 52%),
    linear-gradient(-45deg, transparent 48%, rgba(201,168,76,0.35) 49%, rgba(201,168,76,0.35) 51%, transparent 52%);
  background-size: 28px 28px;
  mask-image: radial-gradient(ellipse 65% 55% at 50% 42%, black, transparent 78%);
  pointer-events: none;
  animation: embroideryDrift 40s linear infinite;
}

.hero::after {
  content: "";
  position: absolute;
  width: 52vmax;
  height: 52vmax;
  border-radius: 50%;
  top: -18%;
  right: -12%;
  background: radial-gradient(circle, rgba(232, 213, 163, 0.12), transparent 68%);
  animation: breath 10s ease-in-out infinite;
  pointer-events: none;
}

@keyframes embroideryDrift {
  from { transform: translate3d(0, 0, 0); }
  to { transform: translate3d(-28px, -28px, 0); }
}

@keyframes breath {
  0%, 100% { opacity: 0.55; transform: scale(1); }
  50% { opacity: 0.95; transform: scale(1.05); }
}

.hero-inner {
  position: relative;
  z-index: 1;
  width: min(700px, 100%);
  text-align: center;
}

.brand {
  font-family: 'Cinzel', serif;
  font-size: clamp(40px, 7.5vw, 68px);
  font-weight: 700;
  letter-spacing: 0.02em;
  line-height: 1.05;
  margin-bottom: 18px;
  color: var(--white);
  text-shadow: 0 1px 0 rgba(0,0,0,0.25);
  animation: rise 0.9s var(--ease) both;
}

.brand-ornament {
  width: 72px;
  height: 12px;
  margin: 0 auto 22px;
  background:
    linear-gradient(90deg, transparent, var(--gold), transparent),
    linear-gradient(45deg, transparent 45%, var(--gold) 45%, var(--gold) 55%, transparent 55%) center / 12px 12px no-repeat,
    linear-gradient(-45deg, transparent 45%, var(--gold) 45%, var(--gold) 55%, transparent 55%) center / 12px 12px no-repeat;
  opacity: 0.9;
  animation: rise 0.9s var(--ease) 0.06s both;
}

.hero-line {
  font-size: clamp(19px, 2.5vw, 24px);
  line-height: 1.45;
  color: rgba(232, 213, 163, 0.92);
  max-width: 28ch;
  margin: 0 auto 34px;
  font-style: italic;
  animation: rise 0.9s var(--ease) 0.12s both;
}

.hero-cta {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  justify-content: center;
  animation: rise 0.9s var(--ease) 0.22s both;
}

@keyframes rise {
  from { opacity: 0; transform: translateY(16px); }
  to { opacity: 1; transform: none; }
}

/* The hero has to fit the screen it is standing on, and it did not. Measured:
   the wordmark, the promise, the Caravaggio, its three caption lines and the
   two buttons stack 1164px tall, and that number does not move with the
   viewport. So on a 1440x900 laptop the caption, the credit line and BOTH
   buttons sat below the fold, and on a 1080p screen the buttons were clipped
   by the bottom edge. The page's whole job is to send a catechist to the
   Method or to an Exercise, and on every laptop it was hiding both doors.

   It survived because it is invisible on a large monitor: at 1440px tall the
   untouched hero fits with room to spare, which is exactly where this was
   built and looked at.

   Below 1200px of viewport height the fixed parts tighten and the painting
   becomes the flexible one (art.css sizes it off what is left). Above that,
   nothing here applies and the hero is what it always was.

   Every selector here is scoped to .hero on purpose. ".brand" alone would
   also have caught the topbar wordmark on all six printable exercise cards,
   which share the class and share nothing else. */
@media (min-width: 860px) and (max-height: 1200px) {
  .hero { padding: calc(var(--nav-h) + 20px) 28px 28px; }
  .hero .brand-ornament { margin-bottom: 14px; }
  .hero .brand { margin-bottom: 10px; }
  /* 28ch forced the promise into three short lines in a 700px column, which
     was its own small formatting problem: a narrow ribbon of text under a
     wide wordmark. Two balanced lines read better and cost 48px less. */
  .hero .hero-line { max-width: 40ch; margin-bottom: 20px; text-wrap: balance; }
}

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 48px;
  padding: 14px 24px;
  text-decoration: none;
  font-family: 'Newsreader', Georgia, serif;
  font-size: 15px;
  font-weight: 600;
  letter-spacing: 0.04em;
  border-radius: 2px;
  transition: transform 0.2s var(--ease), background 0.2s var(--ease), border-color 0.2s var(--ease), color 0.2s var(--ease);
}

.btn:hover { transform: translateY(-1px); }

.btn-primary {
  background: var(--gold);
  color: var(--navy-deep);
}

.btn-primary:hover { background: var(--gold-soft); }

.btn-ghost {
  background: transparent;
  color: var(--white);
  border: 1px solid rgba(232, 213, 163, 0.45);
}

.btn-ghost:hover {
  border-color: var(--gold);
  color: var(--gold-soft);
  background: rgba(201, 168, 76, 0.08);
}

/* ---- Sections ------------------------------------------------------- */

.section {
  padding: 88px 28px;
  position: relative;
}

.section-inner {
  width: min(880px, 100%);
  margin: 0 auto;
}

.section h2 {
  font-family: 'Cinzel', serif;
  font-size: 22px;
  letter-spacing: 0.04em;
  text-align: center;
  color: var(--navy);
  margin-bottom: 10px;
}

.section h2 .kicker {
  display: block;
  font-family: 'Newsreader', Georgia, serif;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--gold-ink);
  margin-bottom: 10px;
}

.section .lede {
  text-align: center;
  font-size: 21px;
  line-height: 1.45;
  color: var(--ink2);
  font-style: italic;
  max-width: 34ch;
  margin: 0 auto 40px;
}

.moves {
  list-style: none;
  border-top: 1px solid var(--rule);
}

.moves li {
  display: grid;
  grid-template-columns: 140px 1fr;
  gap: 24px;
  padding: 22px 4px;
  border-bottom: 1px solid var(--rule);
  align-items: baseline;
}

.moves .step {
  font-family: 'Cinzel', serif;
  font-weight: 700;
  font-size: 15px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--crimson);
}

.moves .desc {
  font-size: 18px;
  color: var(--ink);
  line-height: 1.5;
  max-width: 52ch;
}

.moves .desc em {
  display: block;
  margin-top: 6px;
  color: var(--ink2);
  font-size: 16px;
}

.destinations {
  background:
    linear-gradient(180deg, rgba(10, 27, 51, 0.03), transparent 40%),
    var(--white);
  border-block: 1px solid var(--rule);
}

.dest-grid {
  list-style: none;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0;
  border: 1px solid var(--rule);
}

.dest-grid li {
  border-right: 1px solid var(--rule);
  border-bottom: 1px solid var(--rule);
}

.dest-grid li:nth-child(2n) { border-right: 0; }
.dest-grid li:nth-last-child(-n+2) { border-bottom: 0; }

.dest-grid a {
  display: block;
  text-decoration: none;
  padding: 26px 24px 24px;
  min-height: 100%;
  background: transparent;
  transition: background 0.2s var(--ease);
  position: relative;
}

.dest-grid a::before {
  content: "";
  position: absolute;
  left: 0;
  top: 18px;
  bottom: 18px;
  width: 2px;
  background: var(--gold);
  opacity: 0;
  transition: opacity 0.2s var(--ease);
}

.dest-grid a:hover {
  background: rgba(10, 27, 51, 0.03);
}

.dest-grid a:hover::before { opacity: 1; }

.dest-grid .label {
  font-family: 'Cinzel', serif;
  font-size: 17px;
  letter-spacing: 0.03em;
  margin-bottom: 8px;
  color: var(--navy);
}

.dest-grid .blurb {
  font-size: 15.5px;
  line-height: 1.5;
  color: var(--ink2);
  max-width: 34ch;
}

.note {
  text-align: center;
  color: var(--ink2);
  font-size: 17px;
  margin-top: 36px;
}

.pull {
  background: linear-gradient(90deg, rgba(201, 168, 76, 0.12), rgba(10, 27, 51, 0.04));
  border-left: 3px solid var(--gold);
  padding: 22px 26px;
  /* 40 above and 0 below meant the paragraph after a pull quote started on
     the quote's own bottom edge, so on about.html it read as the last line of
     the Pope Leo XIV quotation. */
  margin: 40px 0 36px;
  font-style: italic;
  font-size: 19px;
  line-height: 1.55;
  color: var(--ink);
}

.pull cite {
  display: block;
  margin-top: 10px;
  font-style: normal;
  font-size: 12px;
  color: var(--gold-ink);
  font-family: 'Newsreader', Georgia, serif;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

/* Compact page chrome */

.wrap {
  max-width: 760px;
  margin: 0 auto;
  padding: calc(var(--nav-h) + 40px) 28px 60px;
}

.eyebrow {
  font-family: 'Newsreader', Georgia, serif;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--gold-ink);
  text-align: center;
  margin-bottom: 16px;
}

.wrap h1, .page-title {
  font-family: 'Cinzel', serif;
  font-size: clamp(32px, 5vw, 44px);
  font-weight: 700;
  letter-spacing: 0.02em;
  line-height: 1.12;
  text-align: center;
  margin-bottom: 16px;
  color: var(--navy);
}

.tagline, .sub {
  font-size: 20px;
  color: var(--ink2);
  font-style: italic;
  text-align: center;
  line-height: 1.45;
  margin: 0 auto 36px;
  max-width: 36ch;
}

.cta-row {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 12px;
  margin: 40px 0;
}

.cta {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 48px;
  background: var(--navy);
  color: var(--white);
  text-decoration: none;
  padding: 14px 16px;
  text-align: center;
  font-family: 'Newsreader', Georgia, serif;
  font-size: 15px;
  font-weight: 600;
  letter-spacing: 0.04em;
  border-radius: 2px;
  transition: background 0.15s ease, transform 0.15s ease;
}

.cta:hover { background: var(--crimson); transform: translateY(-1px); }

.cta.alt {
  background: transparent;
  color: var(--navy);
  border: 1px solid var(--rule);
}

.cta.alt:hover {
  background: rgba(201, 168, 76, 0.12);
  border-color: var(--gold);
}

.site-footer {
  background: var(--navy-deep);
  color: rgba(251, 251, 253, 0.78);
  padding: 56px 28px 48px;
  border-top: 1px solid rgba(201, 168, 76, 0.35);
}

.site-footer .section-inner { width: min(880px, 100%); }

.footer-saint {
  text-align: center;
  font-style: italic;
  font-size: 15px;
  color: rgba(232, 213, 163, 0.9);
  margin-bottom: 28px;
}

.footer-saint strong {
  display: block;
  font-family: 'Newsreader', Georgia, serif;
  font-style: normal;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.18em;
  color: var(--gold);
  margin-bottom: 10px;
  text-transform: uppercase;
}

.footer-saint a {
  color: inherit;
  text-decoration: underline;
  text-decoration-color: rgba(201, 168, 76, 0.45);
  text-underline-offset: 3px;
}

.footer-saint a:hover {
  color: var(--gold-soft);
  text-decoration-color: var(--gold);
}

.nav-bottom {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 20px;
  justify-content: center;
  font-family: 'Newsreader', Georgia, serif;
  font-size: 14px;
  font-weight: 600;
  border-top: 1px solid rgba(255,255,255,0.1);
  padding-top: 24px;
}

.nav-bottom a {
  color: rgba(251, 251, 253, 0.62);
  text-decoration: none;
  min-height: 40px;
  display: inline-flex;
  align-items: center;
}

.nav-bottom a:hover { color: var(--gold-soft); }

.nav-back {
  margin-bottom: 24px;
  font-family: 'Newsreader', Georgia, serif;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.nav-back a {
  /* --ink3 measured 4.24:1 on --paper, under the 4.5:1 floor for body text. */
  color: var(--ink2);
  text-decoration: none;
}

.nav-back a:hover { color: var(--navy); }

[lang="es"] { display: none; }
body.lang-es [lang="en"] { display: none; }
body.lang-es [lang="es"] { display: revert; }
body.lang-es span[lang="es"] { display: inline; }
body.lang-es div[lang="es"] { display: block; }

@media (max-width: 900px) {
  .site-nav {
    position: fixed;
    top: var(--nav-h);
    left: 0;
    right: 0;
    display: none;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    padding: 12px 18px 20px;
    /* Opaque, not 0.97: the hero's 42px white title sat directly behind the
       open menu and ghosted through the last two rows. A nav panel is not a
       scrim, so it has nothing to gain from letting the page show through. */
    background: var(--navy-deep);
    border-bottom: 1px solid rgba(201, 168, 76, 0.35);
  }

  body.nav-open .site-nav { display: flex; }

  .site-nav a {
    padding: 14px 4px;
    border-bottom: 1px solid rgba(255,255,255,0.08);
    min-height: 48px;
  }

  .site-nav a::after { display: none; }

  .nav-toggle { display: inline-block; }

  /* minmax(0,1fr), not 1fr: a grid item's min-width defaults to its content,
     and the Spanish mark ("Conciencia de los Medios") is wide enough at 390px
     to shove the EN/ES toggle past the right edge of the screen. The toggle
     was not broken on phones; it was outside them. Let the mark truncate
     instead of the toggle vanishing. */
  .site-header-inner {
    grid-template-columns: minmax(0, 1fr) auto auto;
  }

  .site-mark {
    min-width: 0;
    overflow: hidden;
  }

  .site-mark [lang] {
    overflow: hidden;
    text-overflow: ellipsis;
  }
}

@media (max-width: 700px) {
  .moves li { grid-template-columns: 1fr; gap: 8px; padding: 18px 0; }
  .dest-grid { grid-template-columns: 1fr; }
  .dest-grid li { border-right: 0; }
  .dest-grid li:nth-last-child(-n+2) { border-bottom: 1px solid var(--rule); }
  .dest-grid li:last-child { border-bottom: 0; }
  .wrap { padding: calc(var(--nav-h) + 28px) 20px 48px; }
  .section { padding: 64px 20px; }
  .hero { padding: calc(var(--nav-h) + 36px) 20px 64px; }
  .site-mark { font-size: 13px; }
}

/* ---- The hero on a phone --------------------------------------------------
   The rescue further up this file is gated at min-width 860px, because 860 is
   where the plate is allowed out of the text column. The HEIGHT problem is not
   a desktop problem, and gating the cure on width meant no phone ever got it.
   Measured with real viewports (an iframe, because headless Chrome clamps the
   CSS viewport near 500px and cannot produce honest evidence for a 375px
   screen): an iPhone SE at 375x667 ran the hero 213px past the bottom of the
   screen, a 320x568 phone 288px past, and both buttons were off-screen on
   every phone smaller than 390x844. The painting and its caption looked
   complete, so nothing on screen suggested there was anything below it.

   Same approach as the desktop rescue: the fixed parts close up and the
   painting takes what is left. */
@media (max-width: 860px) {
  .hero { padding: calc(var(--nav-h) + 18px) 20px 26px; }
  .hero .brand-ornament { margin-bottom: 12px; }
  .hero .brand { margin-bottom: 8px; }
  .hero .hero-line { max-width: 34ch; margin-bottom: 16px; text-wrap: balance; }
  .hero .plate-hero { margin: 0 0 18px; }
  /* the painting's own cap lives in art.css, which loads after this file and
     already owns .hero .plate-hero img */
  .hero .plate-hero figcaption { margin-top: 9px; }
  .hero .plate-hero .why { margin-top: 7px; }
  .hero .plate-hero .src { margin-top: 6px; }
}

/* A phone held sideways cannot hold this hero on one screen, and no amount of
   tightening changes that: at 390px of height, the wordmark, the promise, the
   painting, three caption lines and two buttons do not fit at any type size a
   person would still read. Measured at 844x390 the hero stood 923px tall, so
   min-height:100svh was promising a screenful and delivering two and a half.

   So stop promising. min-height goes, the spacing closes up, the ornament
   steps aside, and the page scrolls a little, which is honest. Everything
   here must come after the block above, since both set .hero at the same
   specificity and the later rule is the one that wins. */
/* Under 400px the two buttons wrapped onto two rows, which cost 57px of the
   little height there is and pushed "Run an Exercise" off the screen on an
   iPhone SE. The horizontal padding is the only thing making them too wide, so
   it gives; min-height stays 48px because that is the touch floor and it was
   measured once already. The tombstone caption comes down a step too: at 320px
   the painter, title, date, chapel and city ran to three lines, and the
   interpretive line under it to three more, so six lines of caption were
   eating the screen the buttons needed. */
@media (max-width: 400px) {
  .hero-cta { flex-wrap: nowrap; }
  .hero-cta .btn { padding: 14px 12px; font-size: 15px; white-space: nowrap; }
  .hero .plate .work { font-size: 13.5px; }
  .hero .plate .why { font-size: 15px; max-width: 30ch; }
}

@media (max-height: 560px) {
  .hero { min-height: 0; padding: calc(var(--nav-h) + 12px) 20px 22px; }
  .hero .brand-ornament { display: none; }
  .hero .brand { font-size: clamp(26px, 6.5vh, 40px); margin-bottom: 6px; }
  .hero .hero-line { font-size: 16px; max-width: 60ch; margin-bottom: 12px; }
  .hero .plate-hero { margin: 0 0 14px; }
  .hero .plate-hero figcaption { margin-top: 8px; }
  .hero-cta { gap: 10px; }
}

/* The touch floor has to out-specify the rules it is correcting.
   `.site-header .lang-toggle a` sets min-height: 36px at (0,2,1); a bare
   `.lang-toggle a` here is (0,1,1) and loses, so EN/ES measured 39x36 on a
   phone even though this block was already present. Match the owner. */
@media (pointer: coarse) {
  .lang-toggle a,
  .site-header .lang-toggle a {
    min-height: 44px;
    min-width: 44px;
    justify-content: center;
    padding: 10px 12px;
  }
  .btn, .cta { min-height: 48px; }
  /* Footer nav measured 24-39px wide ("Poll" is a short word). Height alone
     is not a target; give them the width too. */
  .nav-bottom a {
    min-height: 44px;
    min-width: 44px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
  }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation: none !important;
    transition: none !important;
  }
  /* Every in-page anchor still animated a full-viewport scroll for a reader
     who asked the operating system to stop moving things. */
  html { scroll-behavior: auto !important; }
}