/* ==========================================================
   I AM ONE WORLD NATION — unified stylesheet
   Design source: IAMOWN_Design_Schema.xlsx (Design System tab)
   Palette: cream / beige / gold, sampled live from the correctly-
   styled pages (Homepage, Ashram, Grants hub) on 2 Aug 2026.
   ========================================================== */

:root {
  --gold-pale:     #EAE0C8;   /* large display headings */
  --beige:         #A88F5A;   /* fixed beige for Heightened Orientation links — darkened from #EAE0C8 (Peter's note: original felt faded, ~1.3:1 contrast; this reads ~3:1, still soft but legible) — never overridden per section */
  --text-dark:     #5A523E;   /* body headings + paragraph text */
  --text-darker:   #332E1E;   /* darkened for the 3 pillar-nav buttons (6 Aug 2026, Peter's note — text was too hard to read) */
  --text-light:    #8A8168;
  --accent-mint:   #BAFFF5;   /* active-tab / accent highlight (existing site accent) */
  --gold-accent:   #C9A227;   /* small gold accent for dividers / active breadcrumb */
  --cream:         #FBF8F1;
  --cream-wash:    #F6F1E4;
  --ivory:         #FDFCF8;   /* very soft ivory — all body content apart from the banner */
  --white:         #FFFFFF;
  --border:        rgba(90,82,62,0.16);
  --shadow:        none;   /* removed — was creating a visible darker halo in the side margins vs. the ivory shell */
}

/* ==========================================================
   THREEFOLD FLAME — per-section accent overrides (3 Aug 2026)
   Beige/gold (the :root defaults above) remains the shared base
   on every page, site-wide, unchanged. Layered on top, each of the
   three pillar sections carries its own accent, applied purely by
   overriding --gold-pale / --gold-accent on a body class — every
   component rule that already reads those two variables (nav
   active states, pill-nav current/hover, article-title colour,
   pdf-resource-links, hero gradient wash, etc.) re-colours itself
   automatically with no rule-by-rule duplication.
   ========================================================== */
body.section-grants {
  --gold-pale:   #D9E8F3;   /* pale blue wash — Grants (matches #26619C already live on the CCA disclaimer links) */
  --gold-accent: #26619C;
}
body.section-ashram {
  /* Third pass on the yellow (7 Aug 2026) — Peter's own pick, sampled from
     a button he saw elsewhere. Same ~46° hue as the old mustard, but much
     brighter/more saturated (255,208,51 vs 240,215,0) — reads as a clean
     bright yellow rather than a dull mustard. Pale wash is a light tint of
     the same hue for consistency. */
  --gold-pale:   #FFF3CC;   /* pale wash — the Ashram (Rules + Formulae) */
  --gold-accent: #FFD033;
}
body.section-ascension {
  --gold-pale:   #F3D9E1;   /* pale pink wash — the Ascension Flame */
  --gold-accent: #C97897;
}

* { margin:0; padding:0; box-sizing:border-box; }
html { scroll-behavior: smooth; }

body {
  font-family: 'EB Garamond', serif;
  background: var(--white);   /* pure white — the live site's hero/grant images carry their own
                                  alpha-fade edges baked into the PNGs, designed to blend into a
                                  white page background; an ivory backdrop broke that blend. */
  color: var(--text-dark);
  font-weight: 400;
  line-height: 1.7;
}

/* ===== 1200px centered page shell (agreed container width) =====
   Holds everything BELOW the header banner (hero, sections, footer
   banner). Background is soft ivory — the banner itself now lives
   outside this shell so it can run the full width of the browser. */
.page-shell {
  max-width: 1200px;
  margin: 0 auto;
  background: var(--white);
  box-shadow: var(--shadow);
  overflow: hidden;
}

img { max-width:100%; display:block; }
a { color: inherit; }

/* ===== HEADER / NAV — full-bleed banner, sits OUTSIDE .page-shell so its
   background runs edge-to-edge of the browser window. Nav content itself
   still reads as centered because of text-align/flex centering. ===== */
.site-header {
  text-align:center;
  padding: 40px 40px 24px;
  /* Exact gradient sampled from the live site's computed CSS: solid white
     for the outer ~64% of the band, fading to gold-pale right at the
     content edge — the "outward fade" reads as white at the true top of
     the page, colour concentrating where the banner meets the content. */
  background: linear-gradient(180deg, var(--white) 64%, var(--gold-pale) 100%);
}
.site-header .brand {
  display:inline-block;
  font-family:'Cinzel Decorative', serif;
  font-size:40px;
  font-weight:600;
  color: var(--gold-pale);
  text-decoration:none;
  letter-spacing:0.02em;
  -webkit-text-stroke: 0.5px var(--text-dark);
}
/* Moved out of .site-header (5 Aug 2026, Peter's note) — on the live site
   the 3 main pillar links sit below the banner, not inside it. Now its own
   centered band directly under the header, in the plain white body area. */
nav.primary-nav {
  max-width:1200px;
  margin: 0 auto;
  padding: 18px 40px 22px;
  display:flex;
  justify-content:center;
  gap: 16px;
  background: var(--white);
}
/* Fixed pill buttons for the 3 main Pillars (Grants/Ashram/Ascension Flame)
   — per Peter's decision (3 Aug 2026): no hover-dropdown, real buttons
   instead, unified beige/gold palette (no mint/teal/green anywhere). The
   live site has no true equivalent here (it's a hover-dropdown, not a pill,
   by default), so this is built to match the DNA of the confirmed-real pill
   elements sampled elsewhere on the site (no border, shadow-only edge)
   rather than a separately-invented style. */
nav.primary-nav a {
  font-family:'Cinzel', serif;
  font-size:12px;
  letter-spacing:0.1em;
  text-transform:uppercase;
  text-decoration:none;
  color: var(--text-darker);
  padding: 8px 18px;
  border-radius: 16px;
  border: none;
  background: linear-gradient(180deg, var(--white) 0%, var(--cream-wash) 100%);
  box-shadow: inset 0 -2px 5px rgba(90,82,62,0.10);
  transition: background 0.2s, color 0.2s, box-shadow 0.2s;
}
nav.primary-nav a:hover {
  color: var(--gold-accent);
  box-shadow: inset 0 0 8px rgba(201,162,39,0.3);
}
nav.primary-nav a.active {
  background: linear-gradient(180deg, var(--gold-pale) 0%, var(--cream-wash) 100%);
  color: var(--text-darker);
  box-shadow: inset 0 -2px 5px rgba(90,82,62,0.15);
}
/* Home page only: the 3 pillar buttons carry their own accent tint,
   since no single pillar is "active" here — Home is the gateway to all three. */
body.section-home nav.primary-nav a.home-tint-grants { background: linear-gradient(180deg, #D9E8F3 0%, var(--cream-wash) 100%); }
body.section-home nav.primary-nav a.home-tint-grants:hover { color:#26619C; box-shadow: inset 0 0 8px rgba(38,97,156,0.3); }
body.section-home nav.primary-nav a.home-tint-ashram { background: linear-gradient(180deg, #FFF3CC 0%, var(--cream-wash) 100%); }
body.section-home nav.primary-nav a.home-tint-ashram:hover { color:#9C7A00; box-shadow: inset 0 0 8px rgba(255,208,51,0.35); }
body.section-home nav.primary-nav a.home-tint-ascension { background: linear-gradient(180deg, #F3D9E1 0%, var(--cream-wash) 100%); }
body.section-home nav.primary-nav a.home-tint-ascension:hover { color:#C97897; box-shadow: inset 0 0 8px rgba(201,120,151,0.3); }

/* ===== HERO ===== */
.hero {
  text-align:center;
  padding: 40px 60px 28px;
}
.hero-image-slot {
  width:100%;
  max-width:520px;
  height:320px;
  margin:0 auto 32px;
  border-radius:4px;
  background: radial-gradient(circle at center, var(--cream) 0%, var(--cream-wash) 70%);
  display:flex;
  align-items:center;
  justify-content:center;
  font-family:'Cinzel', serif;
  font-size:11px;
  letter-spacing:0.15em;
  text-transform:uppercase;
  color: var(--text-light);
  border: 1px dashed var(--border);
  overflow:hidden;
}
/* When a real image is present (hotlinked from the live site for preview —
   swap for a locally-hosted copy before go-live), drop the placeholder
   styling and let the image fill the frame. */
.hero-image-slot.has-image {
  border:none;
  background:none;
  padding:0;
}
.hero-image-slot.has-image img {
  width:100%;
  height:100%;
  object-fit:cover;
}

/* Homepage + Grants hero images only (per Peter's note, 3 Aug 2026): the
   live site's images carry a soft alpha-transparency fade baked into the
   PNG itself, designed to bleed into a white page background. Forcing them
   into a fixed-height cropped box (object-fit:cover) was cutting that fade
   off. This modifier drops the crop and lets the image display at its own
   natural proportions so the fade reads correctly against the (now white)
   background. Does not apply to Ashram hero images (out of scope). */
.hero-image-slot.hero-natural {
  max-width: 560px;
  max-height: 320px;
  height: auto;
  border: none;
  background: none;
  padding: 0;
  overflow: visible;
  display: flex;
  justify-content: center;
}
.hero-image-slot.hero-natural img {
  width: auto;
  height: auto;
  max-width: 100%;
  max-height: 320px;
  object-fit: contain;
}
.hero-quote {
  font-family:'EB Garamond', serif;
  font-style:italic;
  font-size:19px;
  line-height:1.8;
  color: var(--text-dark);
  max-width:720px;
  margin: 0 auto 48px;
}

/* ===== SECTIONS ===== */
.section {
  padding: 0 60px 36px;
  max-width: 900px;
  margin: 0 auto;
}
.section h1.page-title {
  /* Reduced ~30% from 34px so it no longer competes with the brand banner
     heading above it, which uses the same Cinzel family at 40px. */
  font-family:'Cinzel', serif;
  font-size:24px;
  font-weight:600;
  color: var(--text-dark);
  text-align:center;
  margin-bottom: 26px;
}
.section h2 {
  /* Same font family/treatment as the "Condition One" style, sized down
     further so it reads as a quiet sub-label and never competes with the
     H1 above it. */
  font-family:'Cinzel', serif;
  font-size:15px;
  font-weight:400;
  letter-spacing:0.1em;
  text-transform:uppercase;
  color: var(--gold-accent);
  text-align:center;
  margin: 28px 0 12px;
}
.section h2:first-child { margin-top:0; }
.section p {
  font-size:19px;
  line-height:1.75;
  color: var(--text-dark);
  text-align:center;
  margin-bottom: 14px;
}
.section ul.plain-list {
  list-style:none;
  text-align:center;
  margin: 14px 0;
}
.section ul.plain-list li {
  font-size:18px;
  line-height:1.8;
}

/* ===== ACCORDION (5 utility panels) ===== */
.accordion { max-width: 900px; margin: 24px auto 0; border-top:1px solid var(--border); }
.accordion-item { border-bottom:1px solid var(--border); }
.accordion-header {
  width:100%;
  background:none;
  border:none;
  cursor:pointer;
  padding: 22px 12px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  font-family:'Cinzel', serif;
  font-size:14px;
  letter-spacing:0.12em;
  text-transform:uppercase;
  color: var(--text-dark);
  text-align:left;
}
.accordion-header .icon { font-size:18px; color: var(--gold-accent); transition: transform 0.25s; }
.accordion-item.open .accordion-header .icon { transform: rotate(45deg); }
.accordion-body {
  max-height:0;
  overflow:hidden;
  transition: max-height 0.35s ease;
  padding: 0 12px;
}
.accordion-item.open .accordion-body { max-height: 3000px; padding-bottom: 28px; }
.accordion-body h3 {
  font-family:'Cinzel', serif;
  font-size:13px;
  font-weight:400;
  letter-spacing:0.1em;
  text-transform:uppercase;
  color: var(--gold-accent);
  margin: 20px 0 8px;
}
.accordion-body p { font-size:17px; line-height:1.85; color:var(--text-dark); margin-bottom:14px; text-align:left; }
.accordion-body .love-gift-link {
  display:inline-block;
  margin-top: 10px;
  padding: 12px 28px;
  font-family:'Cinzel', serif;
  font-size:11px;
  letter-spacing:0.12em;
  text-transform:uppercase;
  border-radius:2px;
  text-decoration:none;
}
.accordion-body .love-gift-link.todo {
  background: #FDE9E7;
  color:#8A1F11;
  border:1px dashed #C0392B;
}
.prose .love-gift-link {
  display:inline-block;
  margin-top: 10px;
  padding: 12px 28px;
  font-family:'Cinzel', serif;
  font-size:11px;
  letter-spacing:0.12em;
  text-transform:uppercase;
  border-radius:2px;
  text-decoration:none;
  background: var(--gold-accent);
  color: var(--ivory);
  border: 1px solid var(--gold-accent);
}
.prose .love-gift-link:hover {
  background: var(--ivory);
  color: var(--gold-accent);
}

/* ===== GRANT / SUB-PAGE ARTICLE ===== */
.article-eyebrow {
  /* Repositioned from above the H1 to directly beneath it (5 Aug 2026,
     Peter's direction) and restyled from a bold uppercase gold label into
     a quiet side-note — still a real <h2> for genuine SEO value, just no
     longer visually shouting. Small, plain-case, softly italic, muted
     tan (--text-light) rather than the assertive --gold-accent. */
  text-align:center;
  font-family:'EB Garamond', serif;
  font-style:italic;
  font-weight:400;
  font-size:14px;
  letter-spacing:0.01em;
  text-transform:none;
  color: var(--text-light);
  margin: 2px 0 14px;
}
.article-title {
  /* Reduced ~30% from 38px — same Cinzel Decorative family as the brand
     banner (40px) was clashing with it directly below. */
  text-align:center;
  font-family:'Cinzel Decorative', serif;
  font-size:26px;
  font-weight:600;
  color: var(--gold-pale);
  -webkit-text-stroke: 0.4px var(--text-dark);
  /* Top margin added (5 Aug 2026) now that this is the first element under
     the nav — previously the now-relocated .article-eyebrow supplied this
     gap from above; H1 needs its own now that the eyebrow sits below it. */
  margin: 28px 0 8px;
}
.article-tagline {
  text-align:center;
  font-family:'EB Garamond', serif;
  font-style:italic;
  font-size:19px;
  color: var(--text-dark);
  max-width:700px;
  margin: 0 auto 36px;
}
.hero-image-slot.article-hero {
  /* Standardized banner/hero depth across Ashram Rule/Formula and Grants
     sub-pages (item 3, 4 Aug 2026) — the live site's own banner heights
     vary wildly page-to-page (222px-384px, confirmed via getComputedStyle),
     so rather than copy that inconsistency, every article-type page now
     uses one consistent depth, leaving predictable room for the SEO text
     to be added beneath it later. */
  max-width:640px;
  height:320px;
  margin: 0 auto 32px;
}

/* Ashram Rule "Law of Tension" quotes — the single-sentence italic
   mantric quote that appears beneath the hero image on Rule One-Four. */
.rule-quote {
  text-align:center;
  font-family:'EB Garamond', serif;
  font-style:italic;
  font-weight:600;
  font-size:21px;
  line-height:1.7;
  color: var(--text-dark);
  max-width:640px;
  margin: 0 auto 34px;
}

/* Editorial clarifying note (Ashram Rules Five-Seven): explains the shift
   from the Rule One-Four Coda architecture to the Point of Origin / Christ
   Intelligence / Christ Life transmissions used from Rule Five onward. */
.architecture-note {
  max-width: 700px;
  margin: 0 auto 32px;
  padding: 18px 26px;
  border: 1px solid var(--border);
  border-radius: 4px;
  background: var(--cream);
}
.architecture-note p {
  font-size: 15px;
  line-height: 1.75;
  font-style: italic;
  color: var(--text-light);
  text-align: left;
  margin: 0;
}
.media-card { max-width:640px; margin:0 auto 24px; padding:20px 24px; border:1px solid var(--border); border-radius:6px; background:var(--cream); }
.media-card p.media-label { font-family:'Cinzel', serif; font-size:12px; letter-spacing:0.08em; text-transform:uppercase; color:var(--text-light); margin:0 0 12px; text-align:center; }
.media-card audio, .media-card video { width:100%; display:block; accent-color: var(--gold-accent); border-radius:4px; }
.media-card p.media-caption { font-style:italic; color:var(--text-light); font-size:13px; text-align:center; margin:10px 0 0; }
.callout-link { text-decoration:none; color:var(--gold-accent); font-weight:700; border-bottom:1px solid transparent; transition: border-color 0.2s; }
.callout-link:hover { border-bottom-color: var(--gold-accent); }
.scroll-home-bar { position:fixed; bottom:18px; right:18px; display:flex; flex-direction:column; align-items:flex-end; gap:4px; z-index:500; }
.scroll-home-bar a { font-family:'Cinzel', serif; font-size:10px; letter-spacing:0.08em; text-transform:uppercase; color:var(--text-light); background:var(--cream); border:1px solid var(--border); border-radius:14px; padding:5px 12px; text-decoration:none; box-shadow:0 2px 6px rgba(0,0,0,0.08); }
.scroll-home-bar a:hover { color:var(--gold-accent); border-color:var(--gold-accent); }
@media (max-width:600px) { .scroll-home-bar a { font-size:9px; padding:4px 10px; } }

/* Utility page titles (Return to the Field, Stewardship, etc.) — deliberately
   smaller and plainer than .article-title so they don't visually compete
   with the main brand header at the top of every page. */
.utility-title {
  text-align:center;
  font-family:'Cinzel', serif;
  font-size:26px;
  font-weight:600;
  color: var(--text-dark);
  /* Top margin added (5 Aug 2026) — see .article-title note; same relocation
     of .article-eyebrow to beneath the H1 on Utility pages. */
  margin: 28px 0 8px;
}
.prose { max-width: 780px; margin: 0 auto; padding: 0 40px 8px; }
.prose p { font-size:19px; line-height:1.85; color:var(--text-dark); margin-bottom:20px; text-align:left; }
.prose p:first-of-type { font-size:20px; }
.prose h3 {
  font-family:'Cinzel', serif;
  font-size:14px;
  font-weight:400;
  letter-spacing:0.1em;
  text-transform:uppercase;
  color: var(--gold-accent);
  margin: 32px 0 10px;
}
/* Internal cross-links between Grant essays (e.g. a mention of "True
   Constitution" inside another Grant's text, linking through to it). */
.prose a {
  color: var(--gold-accent);
  text-decoration: underline;
  text-decoration-color: var(--border);
  text-underline-offset: 2px;
}
.prose a:hover { text-decoration-color: var(--gold-accent); }
ul.prose-list { margin: 0 0 20px 0; padding-left: 0; list-style:none; }
ul.prose-list li {
  font-size:18px;
  line-height:1.8;
  color:var(--text-dark);
  padding-left:26px;
  position:relative;
  margin-bottom:10px;
}
ul.prose-list li::before {
  content:'\2726';
  position:absolute;
  left:0;
  color:var(--gold-accent);
  font-size:13px;
  top:4px;
}

/* PDF resource links row — pill buttons, unified beige/gold palette
   (per Peter's decision, 3 Aug 2026: same pill shape as the Ashram
   Rule/Formula nav, no mint/teal/magenta, applied to both Grants and
   Ashram PDF links for consistency). "Heightened Orientation" (or the
   equivalent first/primary link) reads with a filled gold-pale pill to
   carry a touch of hierarchy; the remaining Coda-family links are plain
   bordered pills. */
.pdf-resource-links {
  max-width:780px;
  margin: 8px auto 24px;
  padding: 0 40px;
  display:flex;
  flex-wrap:wrap;
  gap:10px;
  justify-content:center;
  align-items:center;
}
.pdf-resource-links a {
  text-decoration:none;
  transition: background 0.2s, box-shadow 0.2s, color 0.2s;
}
/* "Heightened Orientation" — sampled live (4 Aug 2026): this is NOT a pill on
   the live site at all. It's a plain, prominent heading-style link (EB
   Garamond, 21px/600, no radius/padding/shadow/background). Reproduced
   exactly in shape; colour follows our per-section accent instead of the
   live site's fixed teal. */
.pdf-resource-links a.pdf-primary {
  font-family:'Cinzel', serif;
  font-size:15px;
  font-weight:400;
  letter-spacing:0.08em;
  text-transform:uppercase;
  color: var(--beige);
  width:100%;
  text-align:center;
  margin-bottom:6px;
}
.pdf-resource-links a.pdf-primary:hover { text-decoration:underline; }
/* Coda Manuscript / Coda Companion Manuscript / Coda Heart Chamber — sampled
   live (4 Aug 2026): true pills, border-radius 13px, padding 8px 16px,
   transparent background, no border — the pill "edge" comes only from an
   inset box-shadow, not a solid fill/border. Reproduced exactly; shadow +
   text colour use our per-section accent instead of the live site's fixed
   gold. */
.pdf-resource-links a.pdf-secondary {
  font-family:'Cinzel', serif;
  font-size:18px;
  font-weight:500;
  letter-spacing:0.02em;
  text-transform:none;
  padding: 8px 16px;
  border-radius: 13px;
  background: transparent;
  color: var(--gold-accent);
  box-shadow: inset 0 -5px 4px 0 var(--gold-pale);
}
.pdf-resource-links a.pdf-secondary:hover { box-shadow: inset 0 0 10px 0 var(--gold-accent); }

/* External discourse link line */
.explore-more {
  text-align:center;
  font-family:'Cinzel', serif;
  font-size:12px;
  letter-spacing:0.1em;
  text-transform:uppercase;
  color: var(--text-light);
  margin-bottom: 36px;
}
.explore-more a { color: var(--gold-accent); text-decoration:none; }

/* Grants sub-nav strip (footer of every grant page + hub) */
nav.grants-subnav {
  max-width:1000px;
  margin: 0 auto 20px;
  padding: 14px 24px 0;
  border-top:1px solid var(--border);
  display:flex;
  flex-wrap:wrap;
  gap: 10px 22px;
  justify-content:center;
}
nav.grants-subnav a {
  font-family:'Cinzel', serif;
  font-size:12px;
  letter-spacing:0.05em;
  color: var(--text-dark);
  text-decoration:none;
  padding: 6px 4px;
}
nav.grants-subnav a:hover { color: var(--gold-accent); }
nav.grants-subnav a.current { color: var(--gold-accent); border-bottom:1px solid var(--gold-accent); }

/* Real pill/chip buttons — Ashram Rule One-Seven row + Formula 1-7 row.
   Pill shape confirmed live via getComputedStyle (3 Aug 2026); recoloured
   to the site's unified beige/gold palette per Peter's decision (no mint,
   no green, no per-section accent colours anywhere). Rounded on all
   corners here (rather than the live site's bottom-only rounding, which
   is tied to its hover-dropdown behaviour that we're not copying). */
nav.pill-nav {
  max-width:1000px;
  margin: 0 auto 4px;
  padding: 2px 24px 0;
  display:flex;
  flex-wrap:wrap;
  gap: 10px;
  justify-content:center;
}
/* Rule / Formula / Conception pill row — sampled live (4 Aug 2026): no
   border at all, the edge comes purely from the inset box-shadow; padding
   8px 16px; font 14px/500. Radius kept fully-rounded (18px) rather than the
   live site's bottom-only 13px rounding — that bottom-only shape is a
   byproduct of the hover-dropdown widget we deliberately didn't copy, and
   Peter confirmed 3 Aug he prefers the full pill. */
nav.pill-nav a {
  font-family:'Cinzel', serif;
  font-size:11px;
  font-weight:500;
  letter-spacing:0.05em;
  text-transform:uppercase;
  text-decoration:none;
  color: var(--text-dark);
  padding: 6px 13px;
  border-radius: 14px;
  border: none;
  background: linear-gradient(180deg, var(--white) 0%, var(--cream-wash) 100%);
  box-shadow: inset 0 -2px 5px rgba(90,82,62,0.10);
  transition: background 0.2s, color 0.2s, box-shadow 0.2s;
}
nav.pill-nav a:hover {
  color: var(--gold-accent);
  box-shadow: inset 0 0 8px rgba(201,162,39,0.3);
}
nav.pill-nav a.current {
  background: linear-gradient(180deg, var(--gold-pale) 0%, var(--cream-wash) 100%);
  color: var(--text-dark);
  box-shadow: inset 0 -2px 5px rgba(90,82,62,0.15);
}

/* Second pill-nav row on a page (the sub-nav — Formula/Chamber/Cycle links
   under the top-level Conception/Posit/Grant row) — per Peter's note
   (7 Aug 2026): these felt like too much solid colour as filled pills. Now
   plain text links, taking on the section's own accent colour (blue for
   Grants, yellow for Ashram, pink for the Ascension Flame) only on hover/
   current, rather than a filled background. */
nav.pill-nav + nav.pill-nav a {
  background: none;
  box-shadow: none;
  color: var(--text-dark);
  text-decoration: underline;
  text-decoration-color: transparent;
  text-underline-offset: 3px;
  padding: 6px 10px;
}
nav.pill-nav + nav.pill-nav a:hover {
  color: var(--gold-accent);
  box-shadow: none;
  text-decoration-color: var(--gold-accent);
}
nav.pill-nav + nav.pill-nav a.current {
  background: none;
  color: var(--gold-accent);
  box-shadow: none;
  text-decoration-color: var(--gold-accent);
}

/* Utility page nav strip — links to the 5 standalone Utility pages,
   appears on every page site-wide (replaces the old accordion). */
nav.utility-nav {
  max-width:1000px;
  margin: 4px auto 0;
  padding: 14px 24px 4px;
  border-top:1px solid var(--border);
  display:flex;
  flex-wrap:wrap;
  gap: 10px 22px;
  justify-content:center;
}
nav.utility-nav a {
  font-family:'Cinzel', serif;
  font-size:11px;
  letter-spacing:0.08em;
  text-transform:uppercase;
  color: var(--text-dark);
  text-decoration: underline;
  text-decoration-color: var(--border);
  text-underline-offset: 3px;
  padding: 6px 4px;
}
nav.utility-nav a:hover { color: var(--gold-accent); text-decoration-color: var(--gold-accent); }
nav.utility-nav a.current { color: var(--gold-accent); text-decoration-color: var(--gold-accent); }

/* Grants hub grid */
.grants-grid {
  max-width:1000px;
  margin: 0 auto 8px;
  padding: 0 40px;
  display:grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 18px;
}
.grants-grid a {
  display:block;
  text-align:center;
  padding: 22px 14px;
  border:1px solid var(--border);
  border-radius:4px;
  text-decoration:none;
  font-family:'Cinzel', serif;
  font-size:13px;
  letter-spacing:0.04em;
  color: var(--text-dark);
  background: var(--cream);
  transition: background 0.2s, border-color 0.2s;
}
.grants-grid a:hover { background: var(--gold-pale); border-color: var(--gold-accent); }
.grants-grid .num { display:block; font-size:11px; color:var(--gold-accent); letter-spacing:0.15em; margin-bottom:6px; }

@media (max-width: 900px) {
  .grants-grid { grid-template-columns: 1fr 1fr; }
  .prose, .pdf-resource-links { padding-left:24px; padding-right:24px; }
}
@media (max-width: 560px) {
  .grants-grid { grid-template-columns: 1fr; }
}

/* ===== FOOTER — full-bleed banner to match the header, sits OUTSIDE
   .page-shell so it also runs edge-to-edge of the browser window. ===== */
footer.site-footer {
  text-align:center;
  padding: 26px 40px 24px;
  /* Mirrors the header: solid gold-pale for the ~49% nearest the content
     (top of the footer band), fading to white toward the true bottom
     edge of the page — same "outward fade" principle, sampled from the
     live site's computed CSS (0deg = bottom-up gradient direction). */
  background: linear-gradient(0deg, var(--gold-pale) 49%, var(--white) 100%);
  border-top:1px solid var(--border);
}
footer.site-footer .footer-quote {
  font-family:'EB Garamond', serif;
  font-style:italic;
  font-size:15px;
  color: var(--text-light);
  max-width:640px;
  margin:0 auto 18px;
}
footer.site-footer .footer-copy {
  font-family:'Cinzel', serif;
  font-size:10px;
  letter-spacing:0.1em;
  color: var(--text-light);
}

/* ===== BUTTONS ===== */
.btn {
  display:inline-block;
  font-family:'Cinzel', serif;
  font-size:11px;
  letter-spacing:0.12em;
  text-transform:uppercase;
  text-decoration:none;
  padding: 13px 26px;
  border-radius:2px;
  border:1px solid var(--gold-accent);
  color: var(--text-dark);
  transition: background 0.2s;
}
.btn:hover { background: var(--gold-pale); }

/* ===== RESPONSIVE ===== */
@media (max-width: 900px) {
  .site-header { padding:28px 20px 20px; }
  .site-header .brand { font-size:28px; }
  nav.primary-nav { gap:12px 16px; flex-wrap:wrap; padding:14px 20px 18px; }
  .hero { padding:40px 24px 24px; }
  .section { padding:0 24px 40px; }
  .prose { padding: 0 24px 8px; }
  .hero-image-slot.article-hero { height:240px; }
}
@media (max-width: 480px) {
  .site-header .brand { font-size:22px; }
}