/* =====================================================================
   ChaplainUSA site system  ·  Oct 2026
   One design language for the whole site, taken from the Gravitas homepage:
   Cormorant Garamond for reading and headlines, small gold Montserrat labels,
   raised neumorphic surfaces on the shared ivory ground, and a hero card that
   ends in an inset sub-navigation of raised pills.

   Pages opt in with <body class="gx"> and load, in this order, after their own CSS:
     <link href="/assets/fonts/fonts-7c20b7f415d9.css" rel="stylesheet">
     <link rel="stylesheet" href="/site-system.css?v=1">
   The global header, menus and breadcrumbs keep Nunito Sans (as on Gravitas).
   ===================================================================== */

:root {
  /* colour (Gravitas) */
  --gx-ink: #10283d;
  --gx-night: #071727;
  --gx-slate: #415363;
  --gx-gold: #87662d;
  --gx-gold-deep: #76531b;
  --gx-ground: var(--site-ground, #f0eee8);
  --gx-border: var(--site-border, #d7d1c5);
  --gx-shadow: var(--site-shadow, #d3cdbf);

  /* type */
  --gx-serif: 'Cormorant Garamond', Georgia, 'Times New Roman', serif;
  --gx-sans: 'Montserrat', system-ui, sans-serif;
  --gx-ui: 'Nunito Sans', system-ui, sans-serif;
  --gx-h1: clamp(2.75rem, 5.2vw, 4.5rem);
  --gx-h2: clamp(2.25rem, 4.2vw, 3.5rem);
  --gx-h3: clamp(1.5rem, 2.2vw, 2.125rem);
  --gx-lead: clamp(1.4rem, 2.1vw, 1.75rem);
  --gx-body: 1.25rem;
  --gx-small: 1.0625rem;

  /* relief */
  --gx-raise: 6px 6px 12px var(--gx-shadow), -6px -6px 12px #fff;
  --gx-raise-sm: 3px 3px 6px var(--gx-shadow), -3px -3px 6px #fff;
  --gx-inset: inset 2px 2px 5px var(--gx-shadow), inset -3px -3px 7px #fff;
  --gx-r: 20px;
  --gx-hero-pad: clamp(28px, 5.5vw, 72px);
  /* every full-width panel (hero card, night bands) shares one centred, fluid frame */
  --gx-frame: min(1320px, calc(100% - 2 * clamp(12px, 2vw, 28px)));
}

/* ---------- reading type ---------- */
body.gx { background: var(--gx-ground); color: var(--gx-ink); font: 400 var(--gx-body)/1.5 var(--gx-serif); -webkit-font-smoothing: antialiased; }
body.gx main { font-family: var(--gx-serif); }
body.gx main :is(p, li, dd, dt, address, blockquote, figcaption, td, th) { font-family: var(--gx-serif); }
body.gx main :is(h1, h2, h3, h4) { font-family: var(--gx-serif); font-weight: 500; letter-spacing: -.02em; color: var(--gx-ink); text-wrap: balance; }
body.gx main h1 { font-size: var(--gx-h1); line-height: 1.06; }
body.gx main h2 { font-size: var(--gx-h2); line-height: 1.08; }
body.gx main h3 { font-size: var(--gx-h3); line-height: 1.15; }
body.gx main :is(h1, h2) em { font-style: italic; color: var(--gx-gold); }
body.gx main strong { font-weight: 700; }
body.gx main a { text-underline-offset: .18em; }

/* the label above a headline */
body.gx main .eyebrow { font: 700 .8125rem/1.6 var(--gx-sans) !important; letter-spacing: .14em !important; text-transform: uppercase; color: var(--gx-gold) !important; margin: 0 0 18px; }

/* a lead paragraph */
body.gx main .gx-lead { font-size: var(--gx-lead); line-height: 1.4; }

/* ---------- controls ---------- */
body.gx main :is(.button, .btn, .gx-btn) {
  display: inline-flex; align-items: center; justify-content: center; gap: .6em;
  min-height: 46px; padding: 13px 24px; border-radius: var(--gx-r);
  font: 600 .875rem/1.4 var(--gx-sans); letter-spacing: .06em; text-transform: uppercase; text-decoration: none;
  background: var(--gx-ground); color: var(--gx-ink); border: 1px solid var(--gx-border); box-shadow: var(--gx-raise-sm);
  transition: box-shadow .15s cubic-bezier(.22,.61,.36,1), color .15s;
}
body.gx main :is(.button, .btn, .gx-btn):hover { background: var(--gx-ground); color: var(--gx-gold-deep); }
body.gx main :is(.button, .btn, .gx-btn):active { box-shadow: var(--gx-inset); }
body.gx main .text-link { font: 600 .8125rem/1.5 var(--gx-sans); letter-spacing: .08em; text-transform: uppercase; text-decoration: none; color: var(--gx-ink); border-bottom: 1px solid var(--gx-gold); padding-bottom: 3px; }
body.gx main .text-link:hover { color: var(--gx-gold-deep); }
body.gx :is(a, button, input, summary):focus-visible { outline: 3px solid var(--gx-gold-deep); outline-offset: 4px; }

/* ---------- the hero card and its sub-navigation ---------- */
body.gx .gx-hero {
  box-sizing: border-box; width: var(--gx-frame) !important; max-width: none !important; margin: 28px auto 0 !important;
  padding: var(--gx-hero-pad) var(--gx-hero-pad) 0 !important;
  background: var(--gx-ground); border-radius: var(--gx-r); box-shadow: var(--gx-raise); overflow: hidden;
}
body.gx .gx-subnav {
  grid-column: 1 / -1; display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 14px 22px;
  margin: clamp(36px, 5vw, 56px) calc(var(--gx-hero-pad) * -1) 0; padding: 22px 28px;
  background: var(--gx-ground); box-shadow: var(--gx-inset);
}
body.gx .gx-subnav a {
  display: inline-flex; align-items: center; justify-content: center; min-height: 44px; padding: 12px 20px;
  font: 600 .875rem/1.4 var(--gx-sans); letter-spacing: .06em; text-transform: uppercase; text-decoration: none;
  color: var(--gx-ink); background: var(--gx-ground); border: 1px solid var(--gx-border); border-radius: var(--gx-r); box-shadow: var(--gx-raise-sm);
  transition: box-shadow .15s, color .15s;
}
body.gx .gx-subnav a:hover, body.gx .gx-subnav a:active { box-shadow: var(--gx-inset); color: var(--gx-gold-deep); }
@media (max-width: 800px) {
  body.gx .gx-subnav { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; padding: 20px; }
  body.gx .gx-subnav a { padding: 12px 8px; text-align: center; }
}

/* ---------- surfaces ---------- */
body.gx .gx-frame { box-sizing: border-box; width: var(--gx-frame); margin-inline: auto; }
body.gx .gx-card { background: var(--gx-ground); border-radius: var(--gx-r); box-shadow: var(--gx-raise); padding: clamp(28px, 4vw, 48px); }
body.gx .gx-well { background: var(--gx-ground); border-radius: var(--gx-r); box-shadow: var(--gx-inset); padding: clamp(24px, 3.5vw, 40px); }

/* ---------- the shared shell keeps its interface face ---------- */
body.gx .site-header, body.gx .site-header *, body.gx .mobile-menu, body.gx .mobile-menu *, body.gx [class*="crumb"], body.gx [class*="crumb"] * { font-family: var(--gx-ui); }
body.gx footer { font-family: var(--gx-sans); }

@media (prefers-reduced-motion: reduce) { body.gx * { transition: none !important; } }

/* Lean on Me thumbnails (blog and homepage cards): crop to each illustration's subject, matching the post banners (Oct 17) */
img[src$="/survivor-network/illustrations/01.png"] { object-position: 50% 0%; }
img[src$="/survivor-network/illustrations/02.png"] { object-position: 50% 65%; }
img[src$="/survivor-network/illustrations/03.png"] { object-position: 50% 58%; }
img[src$="/survivor-network/illustrations/04.png"] { object-position: 50% 68%; }
img[src$="/survivor-network/illustrations/05.png"] { object-position: 50% 53%; }
img[src$="/survivor-network/illustrations/06.png"] { object-position: 50% 68%; }
img[src$="/survivor-network/illustrations/07.png"] { object-position: 50% 50%; }
img[src$="/survivor-network/illustrations/08.png"] { object-position: 50% 42%; }
img[src$="/survivor-network/illustrations/09.png"] { object-position: 50% 65%; }
img[src$="/survivor-network/illustrations/10.png"] { object-position: 50% 60%; }