/* braveenoughparent.com — design tokens + shared components.

   Tokens sampled from the live Gamma-hosted site (2026-07-19, 1280px,
   Playwright MCP `getComputedStyle` walk) plus the Gamma export markup's
   own explicit `section background-color="#..."` attributes:
     --cream       #FEF5E7  <- live "card-body-background" (dominant page bg)
     --cream-deep  #F2E4CF  <- live "navbar-view-backdrop" (header band / panel)
     --sage        #DDE6D5  <- live sample AND literal in gamma-export.txt
                                (`section background-color="#DDE6D5"`)
     --yellow      #FCEC99  <- literal in gamma-export.txt
                                (`section background-color="#FCEC99"`)
     --ink         #3A3630  <- live body-text color (warm near-black)
     --forest      #38512F  <- live heading/button/link accent (h1, CTA fill)
     --forest-light #436138 <- live callout-icon accent (gml-callout__icon);
                                reused here as the .btn hover fill
   Fonts: Lora (display) + Inter (body), matching the live site's serif
   display / sans body pairing (the live site itself renders PPMori/Source
   Sans 3 — a licensed pair we don't have rights to; Lora+Inter is the
   brief's specified faithful-enough substitute, same as inpursuit/
   leveledmeetings used Libre Baskerville+Inter in place of their own
   Gamma-served fonts).

   Contrast note (2026-07-19): unlike leveledmeetings-site (where the gold
   accent measured ~2:1 on cream and needed a --focus/--focus-ink dark-vs-
   light re-point strategy across dark sections/cards/footer), BEP's single
   accent --forest (#38512F) already clears AA on every light background
   this site uses:
     forest on cream:      8.14:1
     forest on cream-deep:  7.03:1
     forest on sage:        6.85:1
     forest on yellow:      7.37:1
   The live site is light-on-cream throughout — no dark section/card/footer
   band exists anywhere in the sampled DOM (only cream, cream-deep, sage,
   and yellow backgrounds were ever observed). So --focus defaults to
   --forest everywhere and only ONE genuine dark context exists at all:
   .hero-media, a full-bleed photo hero with a forest-tinted scrim (built
   for Task 4's home-page hero; no real photo ships until Task 3, so this
   file's index.html exercises it with a CSS gradient stand-in). --focus
   and --edge re-point to cream-friendly values only inside .hero-media —
   see the block right after :root. Full relative-luminance math for every
   shipped pair (plus the candidates this file's report rejected) is in
   .superpowers/sdd/planC-task-2-report.md via the launching session. */

:root {
  --cream: #FEF5E7;        /* page base */
  --cream-deep: #F2E4CF;   /* header band / card panels on cream */
  --edge: #EAE0CC;         /* hairline borders on cream/cream-deep — 1.21:1
                               vs cream, a decorative-divider hairline (not
                               a WCAG 1.4.11 "required" UI boundary), same
                               precedent as leveledmeetings' --edge; re-
                               pointed inside .section--sage/--yellow and
                               .hero-media below */
  --sage: #DDE6D5;          /* section tint — confirmed live + gamma-export */
  --sage-deep: #8FA97D;     /* darker sage for a visible fill/edge ON a sage
                               section (sage-on-sage is otherwise
                               indistinguishable); ink-on-it 4.65:1 (AA) */
  --yellow: #FCEC99;        /* section tint — confirmed via gamma-export */
  --yellow-deep: #BCA118;   /* darker yellow, same role as sage-deep;
                               ink-on-it 4.71:1 (AA) */
  --ink: #3A3630;           /* body text on any light bg — 9.34–11.10:1 */
  --muted: #665D50;         /* de-emphasized text (meta, captions) — 5.98:1
                               on cream, 5.17:1 on cream-deep, both AA */
  --forest: #38512F;        /* brand accent: headings, links, .btn fill,
                               focus ring — 6.85–8.14:1 on every light bg */
  --forest-light: #436138;  /* .btn hover fill; cream label stays 6.46:1 */
  --btn-ink: var(--cream);  /* theme-invariant .btn label, AA at rest+hover */
  --focus: var(--forest);   /* focus ring + skip-link chip, light context;
                               re-pointed to --cream inside .hero-media */
  --focus-ink: var(--cream);/* label color on top of the --focus chip */
  --display: "Lora", Georgia, serif;
  --body: "Inter", -apple-system, "Segoe UI", sans-serif;
}

/* The one genuine dark context on this site: a full-bleed photo hero with
   a forest-tinted scrim (see .hero-media below). Custom properties cascade
   by inheritance, so re-pointing --focus/--edge here alone flips them
   correctly for every descendant that references var(--focus)/var(--edge)
   — no competing selector, matching the leveledmeetings idiom. */
.hero-media {
  --focus: var(--cream);
  --edge: rgba(254, 245, 231, .35);
}

* { margin: 0; padding: 0; box-sizing: border-box; }
html { scroll-behavior: smooth; }
/* Base image reset: without this, an <img> with explicit width/height
   attributes (kept for layout-shift prevention) renders at its intrinsic
   HTML width even inside a narrower grid track/flex item, forcing that
   track to overflow instead of sharing space evenly with its sibling. */
img { max-width: 100%; height: auto; display: block; }

body {
  font-family: var(--body);
  color: var(--ink);
  background: var(--cream);
  font-size: 16px;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3 { font-family: var(--display); font-weight: 500; line-height: 1.25; color: var(--forest); }
p { margin: 0 0 14px; }
p:last-child { margin-bottom: 0; }
a { color: inherit; }

.wrap { max-width: 1120px; margin: 0 auto; padding: 0 24px; }

/* ---- a11y (idiom carried from nate-land-site / inpursuit-life-site /
   leveledmeetings-site, colors adjusted per the contrast note above) ---- */
.skip-link { position: absolute; left: -999px; top: 0; background: var(--focus); color: var(--focus-ink); padding: .6rem 1rem; z-index: 100; }
.skip-link:focus { left: 0; }
:focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; }
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation: none !important; transition: none !important; } html { scroll-behavior: auto; } }

/* ---- header / nav ---- */
.site-header { background: var(--cream); border-bottom: 1px solid var(--edge); }
.site-header .wrap {
  display: flex; align-items: center; gap: 20px; flex-wrap: wrap;
  padding-top: 20px; padding-bottom: 20px;
}
.brand {
  font-family: var(--display); font-weight: 700; font-size: 1.25rem;
  color: var(--forest); text-decoration: none; letter-spacing: .01em;
  margin-right: auto; display: inline-flex; align-items: center;
}
.site-nav { display: flex; align-items: center; gap: 22px; flex-wrap: wrap; }
.site-nav a { text-decoration: none; font-size: .92rem; color: var(--ink); }
.site-nav a:hover { color: var(--forest); }
.site-nav a[aria-current="page"] { color: var(--forest); font-weight: 600; }

/* ---- buttons ----
   Single dedicated fill token pair (--forest rest / --forest-light hover)
   plus a theme-invariant label ink (--btn-ink), same shape as inpursuit/
   leveledmeetings' .btn — both fills clear AA against --btn-ink (8.14:1,
   6.46:1), so the label color never needs to change between states. */
.btn {
  display: inline-block; text-decoration: none; font-weight: 600; font-size: .95rem;
  padding: 12px 26px; border-radius: 999px; margin: 0 12px 12px 0;
  background: var(--forest); color: var(--btn-ink); border: 1.5px solid var(--forest);
  transition: background .15s ease, border-color .15s ease;
}
.btn:hover { background: var(--forest-light); border-color: var(--forest-light); }
.btn--outline {
  background: transparent; color: var(--forest); border: 1.5px solid var(--forest);
}
.btn--outline:hover { background: var(--forest); color: var(--btn-ink); }
/* Inside the hero photo scrim, --forest itself is what the scrim is made
   of (see .hero-media below) — an outline button in forest-on-forest would
   vanish, and a transparent background over a *photo* has no guaranteed
   contrast floor underneath. Both problems are solved the same way
   leveledmeetings solved them on its Trust page photo hero: re-point the
   outline button to the light end of the palette, with a translucent dark
   backing of its own so it reads regardless of what's under the scrim. */
.hero-media .btn--outline {
  background: rgba(56, 81, 47, .55); color: var(--cream); border-color: var(--cream);
}
.hero-media .btn--outline:hover { background: var(--cream); color: var(--forest); }

/* ---- sections ----
   .section--sage / .section--yellow tint the page band; --edge re-points
   to the matching *-deep token so hairlines/card borders stay visible
   against a same-hue background instead of nearly disappearing (sage-on-
   sage, yellow-on-yellow). Body text stays --ink by inheritance — both
   tints are light tints (9.34:1 / 10.05:1 for ink), so nothing here ever
   needs light-colored text; that's the "light-on-cream throughout" call
   from the plan. */
.section { padding: 84px 0; }
.section--sage { background: var(--sage); --edge: var(--sage-deep); }
.section--yellow { background: var(--yellow); --edge: var(--yellow-deep); }

/* ---- hero ---- */
.hero { padding: 96px 0 90px; }
.hero h1 { font-size: clamp(2rem, 5vw, 2.9rem); color: var(--forest); max-width: 750px; margin-bottom: 24px; }
.hero p { max-width: 640px; margin-bottom: 18px; color: var(--ink); }

/* ---- full-bleed photo hero ----
   Combine as class="hero hero-media" (keeps .hero's padding/h1 sizing,
   adds a cover-sized background photo + a fixed ::before scrim). Nest
   content in .wrap so it sits above the scrim (z-index: 1). No real photo
   exists yet (Task 3) — this file's index.html demonstrates the class
   with a CSS gradient stand-in via inline `background-image`; Task 4
   swaps in a real photo URL on the same element, no CSS changes needed. */
.hero-media { position: relative; background-size: cover; background-position: center; overflow: hidden; }
.hero-media::before {
  content: ""; position: absolute; inset: 0;
  /* Forest-tinted scrim, not black — keeps the scrim in the brand's own
     accent color rather than a generic dark overlay. .90/.96 opacity
     verified against cream text: cream-on-(near-solid-forest) measures
     8.14:1, same margin as the flat forest-on-cream pairing above, so the
     scrim only needs to be dark enough to guarantee the photo underneath
     doesn't wash it out — accessibility-wise it already has huge headroom
     even before accounting for the additional darkening. */
  background: linear-gradient(180deg, rgba(56, 81, 47, .90), rgba(56, 81, 47, .96));
}
.hero-media .wrap { position: relative; z-index: 1; }
/* h1/h2/h3 default to --forest globally (see the base heading rule near
   the top of this file) — on the dark scrim that's forest-on-forest,
   invisible. Caught during 1280px verification: the "Component check —
   photo hero + scrim" h2 rendered with no visible text at all. All three
   heading levels need the override, not just h1, since .hero-media is a
   generic full-bleed-photo wrapper any page's h2/h3 might land inside. */
.hero-media h1, .hero-media h2, .hero-media h3 { color: var(--cream); }
.hero-media p { color: var(--cream); }

/* ---- grids ---- */
.grid { display: grid; gap: 24px; }
.grid-2 { grid-template-columns: repeat(2, 1fr); }
.grid-3 { grid-template-columns: repeat(3, 1fr); }
.grid-4 { grid-template-columns: repeat(4, 1fr); }

/* ---- cards ----
   Cards are always a fixed --cream-deep panel with --ink text regardless
   of which section they sit in (no .card--dark modifier exists for this
   site — there is no dark card anywhere in the source content). Keeping
   .card's fill constant sidesteps the exact specificity fight
   leveledmeetings' CLAUDE.md documents (a context rule racing a modifier
   rule): there is nothing here for a context selector to fight over,
   because no context rule targeting .card exists at all. */
.card {
  background: var(--cream-deep); border: 1px solid var(--edge); border-radius: 12px;
  padding: 28px 26px; color: var(--ink);
}
.card h3 { color: var(--forest); font-size: 1.15rem; margin-bottom: 10px; }
.card p { font-size: .95rem; }
.card ul { padding-left: 1.1em; font-size: .95rem; }
.card li { margin-bottom: 8px; }
.card li:last-child { margin-bottom: 0; }

/* ---- video embeds (YouTube page) ----
   16:9 via CSS aspect-ratio, no fixed pixel heights — the iframe fills
   its .video-card width at any viewport. .video-grid collapses to one
   column under the shared .grid-2/.grid-3/.grid-4 breakpoints above. */
.video-card iframe {
  display: block; width: 100%; aspect-ratio: 16 / 9; border: 0; border-radius: 8px;
}

/* ---- inline icons (hand-drawn, never hotlinked pictographic.ai/gamma
   assets — see tools/check.sh) ---- */
.icon { display: block; margin-bottom: 14px; color: var(--forest); }
.icon svg { display: block; }

/* ---- eyebrow label ----
   Small-caps section kicker, ported from the Gamma export's <labels><label
   variant="solid"> chips (e.g. "Why Beth", "The Approach", "Courses"). Added
   for Task 4 (home page) — first new component since Task 2's exercise
   page, so it gets its own block rather than folding into an existing one. */
.eyebrow {
  display: inline-block; font-family: var(--body); font-weight: 700;
  font-size: .78rem; letter-spacing: .08em; text-transform: uppercase;
  color: var(--forest); margin-bottom: 12px;
}
/* Inside .hero-media the flat --forest eyebrow text would sit forest-on-
   forest-scrim (near invisible) — same problem the heading override above
   solves, same fix. */
.hero-media .eyebrow { color: var(--cream); }

/* ---- note / aside callout ----
   For verbatim <aside> callouts ported from the export (e.g. the home
   page's "judgment-free zone" note) — a sage-tinted callout distinct from
   .prose blockquote (which is reserved for the 72ch reading column). */
.note {
  background: var(--sage); border-left: 3px solid var(--forest);
  border-radius: 0 8px 8px 0; padding: 18px 22px; color: var(--ink);
}
/* Inside a sage section, .note's own --sage fill vanishes into the section
   tint (sage-on-sage — only the forest border-left kept it legible). Same
   problem .section--sage already solves for --edge; solve it the same way
   here by lifting the callout to --cream so it reads as a distinct panel.
   Pair: ink (#3A3630) on cream (#FEF5E7) = 11.10:1, comfortably AAA — see
   the :root contrast note above for the source measurement. */
.section--sage .note { background: var(--cream); }

/* An <img> as a card's first child (e.g. the coaching-service cards on the
   home page) gets a consistent inset treatment — scoped to :first-child so
   it can never affect a .card with no image, i.e. every other card on the
   site today. */
.card > img:first-child { width: 100%; height: auto; border-radius: 8px; margin-bottom: 14px; }

/* ---- stats ----
   Same "always its own explicit color, never inherited from an ancestor
   section" rule leveledmeetings' CLAUDE.md flags as a lesson: .stat always
   renders on the fixed --cream-deep fill below, independent of whether its
   parent section is plain/.section--sage/.section--yellow. */
.stat {
  background: var(--cream-deep); border: 1px solid var(--edge); border-radius: 10px; padding: 26px 24px;
  color: var(--ink);
}
.stat .num { font-family: var(--display); font-size: 2.3rem; color: var(--forest); display: block; margin-bottom: 8px; }
.stat h3 { font-family: var(--body); font-weight: 700; font-size: 1rem; margin-bottom: 8px; color: var(--forest); }
.stat p { font-size: .9rem; color: var(--muted); }

/* ---- prose (72ch reading column — blog posts, longer copy) ---- */
.prose { max-width: 72ch; margin: 0 auto; }
.prose h2 { margin-top: 40px; font-size: 1.3rem; }
.prose h2:first-of-type { margin-top: 0; }
.prose h3 { margin-top: 32px; font-size: 1.1rem; color: var(--forest); }
.prose blockquote {
  margin: 20px 0; padding: 4px 22px; border-left: 3px solid var(--forest);
  background: var(--cream-deep); border-radius: 0 8px 8px 0;
}
.prose blockquote p:last-child { margin-bottom: 0; }
.prose ul, .prose ol { padding-left: 1.3em; margin: 0 0 14px; }
.prose li { margin-bottom: 6px; }
.prose li:last-child { margin-bottom: 0; }

/* ---- gallery photo ---- */
.gallery-photo {
  width: 100%; height: auto; display: block; border-radius: 12px;
  border: 1px solid var(--edge);
}

/* ---- footer ----
   Cream-deep, not dark — the whole site is light-on-cream (see the top-of-
   file contrast note), so the footer stays in the same light-context
   family as everything else and never needs a --focus/--edge re-point. */
.site-footer { background: var(--cream-deep); color: var(--ink); padding: 80px 0 40px; }
.site-footer h2 { color: var(--forest); font-size: clamp(1.6rem, 4vw, 2.2rem); margin-bottom: 16px; }
.site-footer a:not(.btn):not(.btn--outline) { color: var(--forest); text-decoration: none; }
.site-footer a:not(.btn):not(.btn--outline):hover { text-decoration: underline; }
.footer-meta {
  display: flex; align-items: center; gap: 24px; flex-wrap: wrap;
  border-top: 1px solid var(--edge); margin-top: 56px; padding-top: 26px; font-size: .9rem;
}
.footer-meta .name { font-family: var(--display); color: var(--forest); margin-right: auto; }
.copyright { margin-top: 22px; font-size: .8rem; color: var(--muted); }

@media (max-width: 900px) {
  .grid-3, .grid-4 { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 640px) {
  .section { padding: 56px 0; }
  .hero { padding: 64px 0 60px; }
  .grid-2, .grid-3, .grid-4 { grid-template-columns: 1fr; }
}