/*
  anxietyhappens.com — site.css
  Loaded after vendor/bootstrap/bootstrap.min.css. Do not edit Bootstrap's own files.
  All theming happens through CSS custom properties that override Bootstrap's variables.
*/

/* ---------- Fonts (self-hosted, see TYP-1) ---------- */

@font-face {
  font-family: "Source Serif 4";
  src: url("/fonts/serif-400.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Source Serif 4";
  src: url("/fonts/serif-600.woff2") format("woff2");
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Source Sans 3";
  src: url("/fonts/sans-400.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Source Sans 3";
  src: url("/fonts/sans-600.woff2") format("woff2");
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}

/* ---------- Design tokens (§7.2) ---------- */

:root {
  /* Palette — "clearing sky": the umbrella-in-the-rain photography's own
     emotional arc (moving through a gray sky toward clearer light) is now
     the site's dominant canvas, not just a hero decoration. --ah-paper was
     a warm cream; it's now a cool, pale sky-sage so the warm-toned
     photography (and --ah-umber/--ah-sepia, still color-matched to its
     duotone borders) reads as a supporting accent against it rather than
     blending into a same-temperature background. */
  --ah-ink: #20262b;
  --ah-slate: #41525e;
  --ah-mist: #7e96a5;
  --ah-sky: #b9cbd6;
  /* Richer sibling to --ah-sky — gradient stops, decorative accents. */
  --ah-sky-deep: #5c8296;
  --ah-paper: #e7edea;
  --ah-card: #ffffff;
  --ah-sepia: #c4a882;
  --ah-umber: #8a6a45;
  /* The genuine second accent hue the old single-warm-family palette
     lacked — muted spruce-teal, cool complement to --ah-umber. Sparingly:
     hover accents, alternating icon tint, divider gradient stops. ~4.9:1
     on --ah-paper, clears AA even for text if ever needed. */
  --ah-teal: #3f6b63;
  /* Dusty coral/blush horizon glow. Gradient-only, never a solid UI fill —
     using it as a fill would just recreate the "terracotta accent" look
     this refresh is moving away from. */
  --ah-dawn: #cf8e6c;
  /* Darker than --ah-umber specifically for inline text links — --ah-umber
     itself is ~4.1:1 on the new --ah-paper (was ~4.48:1 on the old cream),
     under the AA floor for regular text. Large/bold uses (buttons,
     active-nav) can keep --ah-umber directly — AA only requires 3:1 there. */
  --ah-umber-link: #5a4b39;
  --ah-umber-link-rgb: 90, 75, 57;
  --ah-ink-rgb: 32, 38, 43;
  /* Muted text (footer legal, eyebrow labels) — --ah-mist itself fails AA;
     --ah-slate is ~6.7:1 on the new --ah-paper, clears AA comfortably
     (was ~7.3:1/AAA on the old cream — still very safe, just not AAA). */
  --ah-text-muted: var(--ah-slate);
  /* Semantic warning color — currently only the Values Mall worksheet's
     over-$100 state. Not part of the "clearing sky" family on purpose:
     this needs to read as an alert regardless of the section tint it
     appears against. ~4.7:1 on --ah-card, clears AA for the bold text
     size it's used at. */
  --ah-danger: #a3392b;

  /* Type */
  --ah-font-serif: "Source Serif 4", Georgia, serif;
  --ah-font-sans: "Source Sans 3", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --ah-measure: 68ch;

  /* Fluid type scale (TYP-3) — no JS resizing */
  --ah-fs-base: 18px;
  --ah-fs-h1: clamp(1.9rem, 1.5rem + 2vw, 3rem);
  --ah-fs-h2: clamp(1.5rem, 1.25rem + 1.2vw, 2.1rem);
  --ah-fs-h3: clamp(1.2rem, 1.05rem + 0.6vw, 1.5rem);
  --ah-fs-hero-h2: clamp(1.7rem, 1.3rem + 1.7vw, 2.5rem);

  /* Below-h3 sizes, named by role so every size traces to one place.
     --ah-fs-sm folds in what used to be two near-identical magic numbers
     (0.9rem nav sizes, 0.875rem footer/eyebrow sizes) — the 0.025rem gap
     was imperceptible, so this is a straight consolidation, not a redesign. */
  --ah-fs-brand: 1.15rem;
  --ah-fs-lead: 1.05rem;
  --ah-fs-sm: 0.9rem;
  --ah-fs-xs: 0.8rem;

  /* Elevation scale — same color-mix pattern as --bs-border-color below,
     just applied to shadows instead of borders. */
  --ah-shadow-sm: 0 1px 3px color-mix(in srgb, var(--ah-ink) 8%, transparent);
  --ah-shadow-md: 0 6px 16px color-mix(in srgb, var(--ah-ink) 12%, transparent);
  --ah-shadow-lg: 0 6px 16px color-mix(in srgb, var(--ah-ink) 16%, transparent);
  /* Tinted "ambient light" shadow for hover states — a deliberate departure
     from the neutral-ink-only shadows above, used sparingly on interactive
     elements only. */
  --ah-shadow-glow: 0 10px 24px color-mix(in srgb, var(--ah-teal) 24%, transparent);

  /* Bootstrap variable overrides — no Sass build required (COL-1) */
  --bs-body-bg: var(--ah-paper);
  --bs-body-color: var(--ah-ink);
  --bs-body-font-family: var(--ah-font-sans);
  --bs-body-font-size: var(--ah-fs-base);
  --bs-body-line-height: 1.65;
  /* Bootstrap's actual `a{}` rule reads *-rgb via rgba(), not these hex
     vars directly — both must be set or the override silently no-ops. */
  --bs-link-color: var(--ah-umber-link);
  --bs-link-color-rgb: var(--ah-umber-link-rgb);
  --bs-link-hover-color: var(--ah-ink);
  --bs-link-hover-color-rgb: var(--ah-ink-rgb);
  --bs-link-decoration: underline;
  --bs-border-color: color-mix(in srgb, var(--ah-mist) 35%, transparent);
  --bs-primary: var(--ah-umber);
  --bs-primary-rgb: 138, 106, 69;
  --bs-secondary: var(--ah-slate);
  --bs-heading-color: var(--ah-slate);
  --bs-border-radius: 6px;
  --bs-border-radius-sm: 4px;
}

/* ---------- Base ---------- */

body {
  background: var(--ah-paper);
  color: var(--ah-ink);
}

h1, h2, h3, h4, h5, h6 {
  font-family: var(--ah-font-serif);
  color: var(--ah-slate);
  font-weight: 600;
}

h1 { font-size: var(--ah-fs-h1); }
h2 { font-size: var(--ah-fs-h2); }
h3 { font-size: var(--ah-fs-h3); }

.ah-prose {
  max-width: var(--ah-measure);
}

/* Floated bio/cover photo on About and the two book pages — pairs with
   Bootstrap's float-md-end/ms-md-4/mb-4 utilities for the responsive
   layout; this class only adds the elevation so all three floated images
   share the same shadow as the rest of the design system. */
.ah-bio-photo {
  box-shadow: var(--ah-shadow-sm);
}

/* "Horizon line" motif — a gradient bar instead of a flat rule, fading from
   the warm photography-accent hues into the cool teal accent. */
.ah-rule {
  border: 0;
  height: 1px;
  background: linear-gradient(90deg, var(--ah-umber) 0%, var(--ah-sepia) 30%, var(--ah-teal) 65%, var(--ah-teal) 100%);
  opacity: 1;
  margin: 2.5rem 0;
}

a {
  text-underline-offset: 0.15em;
}

/* Visible, high-contrast focus ring (DES-1) — never suppressed */
a:focus-visible,
button:focus-visible,
.btn:focus-visible,
.nav-link:focus-visible,
input:focus-visible {
  outline: 3px solid var(--ah-umber);
  outline-offset: 2px;
  border-radius: 2px;
}

/* ---------- Skip link (A11Y-3) ---------- */

.ah-skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 2000;
  background: var(--ah-card);
  color: var(--ah-ink);
  padding: 0.75rem 1.25rem;
  border: 2px solid var(--ah-umber);
  border-radius: var(--bs-border-radius-sm);
}

.ah-skip-link:focus {
  left: 1rem;
  top: 1rem;
}

/* ---------- Header / nav ---------- */

.ah-header {
  background: var(--ah-card);
  border-bottom: 1px solid var(--ah-sepia);
  max-height: 64px;
}

.ah-header .navbar-brand {
  font-family: var(--ah-font-serif);
  color: var(--ah-slate);
  font-weight: 600;
  font-size: var(--ah-fs-brand);
  white-space: nowrap;
}

.ah-header .container-fluid {
  max-width: 1400px;
}

.ah-header .navbar-nav {
  gap: 0.15rem;
}

.ah-header .nav-link {
  color: var(--ah-slate);
  font-size: var(--ah-fs-sm);
  white-space: nowrap;
  padding-left: 0.6rem;
  padding-right: 0.6rem;
  transition: color 150ms ease;
}

.ah-header .nav-link:hover {
  color: var(--ah-umber);
}

.ah-header .dropdown-toggle::after {
  margin-left: 0.35em;
}

.ah-header .dropdown-menu {
  border-color: var(--ah-sepia);
  border-radius: var(--bs-border-radius-sm);
  box-shadow: var(--ah-shadow-md);
  padding: 0.4rem;
}

.ah-header .dropdown-item {
  border-radius: 4px;
  font-size: var(--ah-fs-sm);
  padding: 0.5rem 0.75rem;
}

.ah-header .dropdown-item:hover,
.ah-header .dropdown-item:focus {
  background: color-mix(in srgb, var(--ah-sepia) 16%, transparent);
  color: var(--ah-ink);
}

.ah-header .btn-help {
  margin-left: 0.5rem;
}

.ah-header .nav-link[aria-current="page"],
.ah-header .nav-link.ah-active-ancestor {
  color: var(--ah-umber);
  font-weight: 600;
  border-bottom: 2px solid var(--ah-teal);
}

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

/*
  "Clearing sky" atmosphere — a sky-deep-to-dawn gradient standing in for
  the moment the photographs' overcast sky breaks toward light. This is the
  site's signature motif, echoed at lower intensity in .ah-banner and
  .ah-rule elsewhere, not a one-off decoration.
*/
.ah-hero-band {
  background-color: var(--ah-sky);
  background-image:
    linear-gradient(180deg,
      color-mix(in srgb, var(--ah-sky-deep) 55%, transparent) 0%,
      color-mix(in srgb, var(--ah-sky) 40%, transparent) 34%,
      color-mix(in srgb, var(--ah-teal) 32%, transparent) 60%,
      color-mix(in srgb, var(--ah-dawn) 22%, transparent) 84%,
      var(--ah-paper) 100%),
    url("/img/hero/hero-background-city.jpg");
  background-repeat: no-repeat;
  background-position: center top;
  background-size: cover;
  background-blend-mode: color, normal;
}

/*
  Near-solid backdrop so the H1/lead/CTA never sit directly on the hero
  photo (PRD COL-3: "never place body copy over a photograph") — the
  gradient alone only tints the photo, it doesn't guarantee text contrast.
  Opacity bumped from 92% to keep the same legibility margin now that the
  gradient behind it has more color variance.
*/
.ah-hero-lead {
  max-width: 720px;
  margin: 0 auto 2.5rem;
  padding: 2rem 2.5rem;
  text-align: center;
  background: color-mix(in srgb, var(--ah-paper) 94%, transparent);
  border-radius: 12px;
  backdrop-filter: blur(2px);
  box-shadow: var(--ah-shadow-md);
}

.ah-hero-lead h2 {
  font-size: var(--ah-fs-hero-h2);
  line-height: 1.25;
  margin-bottom: 0.75rem;
  text-wrap: balance;
}

.ah-hero-lead h2 em {
  font-style: italic;
  color: var(--ah-teal);
}

.ah-hero-lead__rule {
  width: 48px;
  height: 2px;
  background: linear-gradient(90deg, var(--ah-umber), var(--ah-teal));
  border: 0;
  margin: 0.9rem auto 1.1rem;
}

.ah-hero-lead__sub {
  color: var(--ah-slate);
  font-size: var(--ah-fs-lead);
  max-width: 52ch;
  margin: 0 auto 1.5rem;
}

.ah-btn-caps {
  text-transform: uppercase;
  letter-spacing: 0.05em;
  font-size: var(--ah-fs-xs);
  font-weight: 600;
  padding: 0.65rem 1.6rem;
}

.btn-help {
  background: var(--ah-ink);
  border-color: var(--ah-ink);
  color: var(--ah-paper);
}

.btn-help:hover, .btn-help:focus {
  background: var(--ah-slate);
  border-color: var(--ah-slate);
  color: var(--ah-paper);
}

/* ---------- Signature imagery (§5) ---------- */

.ah-hero-triptych {
  max-width: 1140px;
  margin: 0 auto;
}

.ah-hero-triptych figure {
  margin: 0;
}

.ah-hero-triptych__col {
  max-width: 320px;
}

.ah-hero-triptych img {
  width: 100%;
  height: auto;
  border: 10px solid color-mix(in srgb, var(--ah-sepia) 18%, var(--ah-card));
  outline: 1px solid var(--ah-sepia);
  box-shadow: var(--ah-shadow-lg);
  display: block;
}

@media (prefers-reduced-motion: no-preference) {
  .ah-hero-triptych figure {
    opacity: 0;
    transform: translateY(12px);
    animation: ah-rise 500ms ease-out forwards;
  }
  .ah-hero-triptych figure:nth-child(1) { animation-delay: 0ms; }
  .ah-hero-triptych figure:nth-child(2) { animation-delay: 120ms; }
  .ah-hero-triptych figure:nth-child(3) { animation-delay: 240ms; }
}

@keyframes ah-rise {
  to { opacity: 1; transform: translateY(0); }
}

/* Low-intensity echo of .ah-hero-band's atmosphere — every interior page
   carries a faint trace of the same "clearing sky", not just the homepage.
   Text-only band (no photo — see docs/handoff.md) with a hand-drawn
   umbrella watermark (.ah-banner__icon, same "no library" convention as
   the site's other icons) tinted per top-level section via the
   .ah-banner--{teal,umber,dawn} modifiers below — a quiet wayfinding cue
   on top of the breadcrumb, not just decoration. */
.ah-banner {
  position: relative;
  overflow: hidden;
  padding: 2.25rem 2rem;
  border-radius: 10px;
  background: linear-gradient(160deg,
    color-mix(in srgb, var(--ah-sky-deep) 20%, transparent) 0%,
    color-mix(in srgb, var(--ah-teal) 18%, transparent) 55%,
    color-mix(in srgb, var(--ah-dawn) 12%, transparent) 100%);
}

.ah-banner__icon {
  position: absolute;
  top: 6px;
  right: 6px;
  width: 90px;
  height: auto;
  opacity: 0.14;
  fill: none;
  stroke: currentColor;
  stroke-width: 3;
  stroke-linecap: round;
  stroke-linejoin: round;
  pointer-events: none;
}

.ah-banner__content {
  position: relative;
  z-index: 1;
  max-width: 74%;
}

.ah-banner .breadcrumb {
  font-size: var(--ah-fs-sm);
  margin-bottom: 0.75rem;
}

.ah-banner .ah-rule {
  margin: 1.5rem 0 0;
}

/* Section tints — teal for Anxiety (and the untinted-adjacent About/Privacy
   pages), umber for Therapy (CBT/ACT), dawn-toned for Books. --ah-dawn
   itself stays gradient-only per its token comment above (never a flat
   icon/rule stroke), so the dawn variant pairs it with --ah-sepia for the
   solid strokes. */
.ah-banner--teal .ah-banner__icon { color: var(--ah-teal); }
.ah-banner--teal .ah-rule {
  background: linear-gradient(90deg, var(--ah-teal) 0%, var(--ah-sky-deep) 100%);
}

.ah-banner--umber {
  background: linear-gradient(160deg,
    color-mix(in srgb, var(--ah-umber) 18%, transparent) 0%,
    color-mix(in srgb, var(--ah-sepia) 22%, transparent) 55%,
    color-mix(in srgb, var(--ah-dawn) 12%, transparent) 100%);
}
.ah-banner--umber .ah-banner__icon { color: var(--ah-umber); }
.ah-banner--umber .ah-rule {
  background: linear-gradient(90deg, var(--ah-umber) 0%, var(--ah-sepia) 100%);
}

.ah-banner--dawn {
  background: linear-gradient(160deg,
    color-mix(in srgb, var(--ah-dawn) 24%, transparent) 0%,
    color-mix(in srgb, var(--ah-sepia) 16%, transparent) 55%,
    color-mix(in srgb, var(--ah-sky-deep) 10%, transparent) 100%);
}
.ah-banner--dawn .ah-banner__icon { color: var(--ah-sepia); }
.ah-banner--dawn .ah-rule {
  background: linear-gradient(90deg, var(--ah-sepia) 0%, var(--ah-dawn) 100%);
}

@media (min-width: 992px) {
  .ah-banner {
    padding: 3rem 2.5rem;
  }
  .ah-banner__icon {
    top: 50%;
    right: 1.5rem;
    transform: translateY(-50%);
    /* Sized off the banner's own height (not a fixed px width) so it
       always fits — the banner's height varies with h1 length/wrapping
       across 24 different page titles, and a fixed width scaled via the
       icon's aspect ratio was taller than the band on short-title pages,
       getting clipped top and bottom by .ah-banner's overflow:hidden.
       Positioned fully inside the band (not bled past the edge like the
       first pass) — at this band's actual on-page width the partial-bleed
       treatment cut a visible straight line through the canopy's curves,
       which read as broken rather than intentional. */
    width: auto;
    height: 80%;
    opacity: 0.16;
  }
  .ah-banner__content {
    max-width: 65%;
  }
}

/* ---------- Cards ---------- */

.ah-card {
  background: var(--ah-card);
  border: 1px solid var(--bs-border-color);
  border-radius: var(--bs-border-radius);
  box-shadow: var(--ah-shadow-sm);
  transition: transform 200ms ease, box-shadow 200ms ease;
}

.ah-card:hover {
  transform: translateY(-3px);
  box-shadow: var(--ah-shadow-glow);
}

/* Thin top accent reusing the exact sepia->dawn gradient both book pages'
   own banners already use (.ah-banner--dawn .ah-rule) — ties this homepage
   teaser back to the pages it links to. */
.ah-card--book {
  position: relative;
  overflow: hidden;
}
.ah-card--book::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 4px;
  background: linear-gradient(90deg, var(--ah-sepia) 0%, var(--ah-dawn) 100%);
}

.ah-callout {
  border: 1px solid var(--ah-sepia);
  border-left-width: 4px;
  border-radius: var(--bs-border-radius-sm);
  background: var(--ah-card);
  padding: 1.25rem 1.5rem;
}

.ah-callout--icon {
  display: flex;
  gap: 1rem;
  align-items: flex-start;
}

.ah-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.75rem;
  height: 2.75rem;
  border-radius: 50%;
  background: color-mix(in srgb, var(--ah-sepia) 22%, var(--ah-card));
  color: var(--ah-umber);
  flex-shrink: 0;
}

/* Alternate the warm/cool accents across a card grid instead of every icon
   chip matching — Bootstrap columns are always direct children of .row, so
   this works without touching any markup. */
.row > *:nth-child(even) .ah-icon {
  background: color-mix(in srgb, var(--ah-teal) 28%, var(--ah-card));
  color: var(--ah-teal);
}

.ah-icon svg {
  width: 1.4rem;
  height: 1.4rem;
  stroke: currentColor;
  fill: none;
  stroke-width: 1.75;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.ah-callout__label {
  font-family: var(--ah-font-sans);
  font-weight: 600;
  color: var(--ah-umber);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  font-size: var(--ah-fs-xs);
}

/* Narrative aside panel ("A Story" callouts embedded in prose, e.g. the
   fight-or-flight page's saber-toothed-tiger anecdote) — reuses the site's
   own "clearing sky" gradient signature (.ah-hero-band/.ah-banner) but run
   in reverse: calm sky-deep at the top warming to umber at the bottom,
   since the story itself is that same arc (a calm morning tipping into
   alarm), not just decoration. Same low-opacity color-mix-into-card
   technique as .ah-banner, so --ah-ink text stays at very high contrast
   throughout — lightest stop is ~rgb(229,235,238), darkest ~rgb(232,225,218),
   both far lighter than --ah-paper itself. */
.ah-story {
  border-radius: var(--bs-border-radius);
  box-shadow: var(--ah-shadow-sm);
  padding: clamp(1.5rem, 3vw, 2.5rem);
  background: linear-gradient(180deg,
    color-mix(in srgb, var(--ah-sky-deep) 16%, var(--ah-card)) 0%,
    color-mix(in srgb, var(--ah-sepia) 20%, var(--ah-card)) 55%,
    color-mix(in srgb, var(--ah-umber) 20%, var(--ah-card)) 100%);
}

.ah-story p:last-child {
  margin-bottom: 0;
}

/* Serif drop cap marks the shift into narrative voice, echoing the site's
   heading font in a display role rather than a neutral delivery vehicle. */
.ah-story__open::first-letter {
  font-family: var(--ah-font-serif);
  font-size: 3.2em;
  line-height: 0.8;
  float: left;
  padding: 0.05em 0.1em 0 0;
  color: var(--ah-umber);
}

/* Quiet claw-mark watermark, same "hand-drawn inline SVG, no library"
   convention and opacity/stroke recipe as .ah-banner__icon. Floated (not
   absolutely positioned) so the opening paragraph's text wraps around it
   instead of risking the overlap .ah-banner__icon had to be fixed for. */
.ah-story__icon {
  float: right;
  width: 44px;
  height: auto;
  margin: 0.15em 0 0.5em 0.75em;
  opacity: 0.14;
  fill: none;
  stroke: var(--ah-umber);
  stroke-width: 4;
  stroke-linecap: round;
  stroke-linejoin: round;
  pointer-events: none;
}

/* "Do this now" exercise panel (e.g. Relaxation Training's Breathing Test)
   — a different register from .ah-story: this isn't a narrative or a
   citation, it's an exercise the reader performs right now, so it gets a
   calm, cool palette (sky/teal) instead of the CBT section's usual warm
   umber, plus the page's one moment of motion: a slow breathing guide
   timed close to a real relaxed breath cycle, which the reader can pace
   against whether or not they follow along. */
.ah-breathe {
  display: flex;
  align-items: center;
  gap: 1.75rem;
  margin: 1.75rem 0;
  padding: 2rem;
  border-radius: 12px;
  background: linear-gradient(160deg,
    color-mix(in srgb, var(--ah-sky-deep) 14%, var(--ah-card)) 0%,
    color-mix(in srgb, var(--ah-sky) 20%, var(--ah-card)) 60%,
    color-mix(in srgb, var(--ah-teal) 10%, var(--ah-card)) 100%);
  box-shadow: var(--ah-shadow-sm);
}

.ah-breathe__guide {
  flex: 0 0 auto;
  width: 3.5rem;
  height: 3.5rem;
  border-radius: 50%;
  background: color-mix(in srgb, var(--ah-teal) 30%, transparent);
  border: 2px solid var(--ah-teal);
  animation: ah-breathe-pulse 9s ease-in-out infinite;
}

@keyframes ah-breathe-pulse {
  0%, 100% { transform: scale(0.72); opacity: 0.55; }
  40%, 60% { transform: scale(1); opacity: 0.9; }
}

@media (prefers-reduced-motion: reduce) {
  .ah-breathe__guide {
    animation: none;
    transform: scale(0.86);
    opacity: 0.75;
  }
}

.ah-breathe__body {
  flex: 1 1 auto;
  min-width: 0;
}

.ah-breathe h3 {
  margin-top: 0;
  margin-bottom: 0.6rem;
}

.ah-breathe p {
  line-height: 1.85;
  margin-bottom: 0;
}

@media (max-width: 575.98px) {
  .ah-breathe {
    flex-direction: column;
    align-items: flex-start;
    gap: 1.25rem;
  }
}

/* "Two critical facts" numbered panels (Exposure page) — earns real
   numbering, unlike most lists on this site, because the lead-in text
   states an actual count ("There are two critical facts..."). Full-width
   stacked panels rather than a side-by-side grid, since each item is a
   full paragraph and needs the whole measure to wrap in, not a narrow
   column. */
ul.ah-facts {
  list-style: none;
  margin: 1.75rem 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 1rem;
  counter-reset: ah-fact;
}

ul.ah-facts li {
  counter-increment: ah-fact;
  display: flex;
  gap: 1.25rem;
  padding: 1.5rem 1.75rem;
  border-radius: var(--bs-border-radius);
  background: color-mix(in srgb, var(--ah-teal) 6%, var(--ah-card));
  border: 1px solid color-mix(in srgb, var(--ah-teal) 20%, transparent);
  box-shadow: var(--ah-shadow-sm);
}

ul.ah-facts li::before {
  content: counter(ah-fact);
  flex: 0 0 auto;
  font-family: var(--ah-font-serif);
  font-weight: 700;
  font-size: 2.1rem;
  line-height: 1;
  color: color-mix(in srgb, var(--ah-teal) 42%, var(--ah-card));
}

/* No number needed when there's only one fact to count. */
ul.ah-facts li:only-child::before {
  content: none;
}

ul.ah-facts li > span {
  flex: 1 1 auto;
  min-width: 0;
}

ul.ah-facts em {
  display: block;
  font-style: normal;
  font-family: var(--ah-font-serif);
  font-weight: 600;
  color: var(--ah-teal);
  font-size: 1.05rem;
  margin-bottom: 0.4rem;
}

@media (max-width: 500px) {
  ul.ah-facts li {
    flex-direction: column;
    gap: 0.5rem;
  }
  ul.ah-facts li::before {
    font-size: 1.5rem;
  }
}

/* ---------- Values Mall worksheet (act/commitment.html) ---------- */

/* "Receipt row" item language grounded in the exercise's own shopping
   metaphor (checkbox, item name, dotted price-tag leader line, price in
   serif) rather than a generic list style. Mocked up and approved as an
   Artifact (three options — live total, paper-tally, accordion) before
   implementation; this is the "live total" option. */
.ah-worksheet__store {
  background: var(--ah-card);
  border: 1px solid var(--bs-border-color);
  border-radius: 8px;
  box-shadow: var(--ah-shadow-sm);
  padding: 1.25rem 1.5rem 1.4rem;
  margin-bottom: 1.1rem;
}

.ah-worksheet__store h4 {
  font-family: var(--ah-font-serif);
  font-weight: 600;
  color: var(--ah-umber-link);
  font-size: 1.02rem;
  margin: 0 0 0.9rem;
  padding-bottom: 0.6rem;
  border-bottom: 1px dashed color-mix(in srgb, var(--ah-umber) 35%, transparent);
}

.ah-worksheet__item {
  display: flex;
  align-items: baseline;
  gap: 0.5rem;
  padding: 0.38rem 0;
}

.ah-worksheet__item input[type="checkbox"] {
  flex: 0 0 auto;
  width: 1.05rem;
  height: 1.05rem;
  accent-color: var(--ah-umber);
  align-self: center;
}

.ah-worksheet__leader {
  flex: 1 1 auto;
  border-bottom: 1px dotted var(--ah-mist);
  margin: 0 0.4rem;
  height: 0.6em;
}

.ah-worksheet__price {
  flex: 0 0 auto;
  font-family: var(--ah-font-serif);
  font-weight: 700;
  color: var(--ah-umber);
  font-size: 0.95rem;
}

/* Running total, shown after the last store as a receipt-style final tally
   — updated live by enableValuesMallTracker() in js/site.js; degrades to a
   static "$0" with JS off, which still reads fine since the checkboxes
   themselves work natively either way. */
.ah-worksheet__tracker {
  display: inline-flex;
  align-items: baseline;
  gap: 0.5rem;
  background: color-mix(in srgb, var(--ah-umber) 10%, var(--ah-card));
  border: 1px solid color-mix(in srgb, var(--ah-umber) 30%, transparent);
  border-radius: 999px;
  padding: 0.55rem 1.25rem;
  margin: 0.25rem 0 1.4rem;
}

.ah-worksheet__tracker-label {
  font-size: 0.82rem;
  color: var(--ah-slate);
}

.ah-worksheet__tracker-amount {
  font-family: var(--ah-font-serif);
  font-weight: 700;
  font-size: 1.15rem;
  color: var(--ah-umber);
}

.ah-worksheet__tracker--over .ah-worksheet__tracker-amount {
  color: var(--ah-danger);
}

.ah-worksheet__tracker-budget {
  font-size: 0.82rem;
  color: var(--ah-mist);
}

/* ---------- Prose lists (Anxiety Disorders pages) ---------- */

/* DSM diagnostic criteria — every <ol type="A"> in prose across the
   Anxiety Disorders section is one of these; framed like a citation using
   the site's clinical/therapy accent (teal), with a lettered badge
   standing in for the bare "A./B./C." browsers render by default. Mocked
   up and approved as an Artifact before implementation. */
ol.ah-criteria {
  list-style: none;
  counter-reset: ah-criteria;
  margin: 1.75rem 0;
  padding: 1.5rem 1.75rem;
  border-radius: var(--bs-border-radius);
  background: color-mix(in srgb, var(--ah-teal) 7%, var(--ah-card));
  border: 1px solid color-mix(in srgb, var(--ah-teal) 24%, transparent);
  box-shadow: var(--ah-shadow-sm);
}

ol.ah-criteria::before {
  content: "DSM Criteria";
  display: block;
  font-family: var(--ah-font-sans);
  font-weight: 700;
  font-size: var(--ah-fs-xs);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ah-teal);
  margin-bottom: 1.15rem;
}

ol.ah-criteria > li {
  counter-increment: ah-criteria;
  display: grid;
  grid-template-columns: 1.75rem 1fr;
  gap: 0.9rem;
  align-items: start;
}

ol.ah-criteria > li + li {
  margin-top: 1rem;
}

ol.ah-criteria > li::before {
  content: counter(ah-criteria, upper-alpha);
  width: 1.75rem;
  height: 1.75rem;
  border-radius: 50%;
  display: grid;
  place-items: center;
  font-family: var(--ah-font-serif);
  font-weight: 600;
  font-size: 0.85rem;
  background: color-mix(in srgb, var(--ah-teal) 18%, var(--ah-card));
  color: var(--ah-teal);
  transform: translateY(0.05rem);
}

/* A criteria item whose own body holds a nested list (e.g. GAD's "three or
   more of these symptoms" item) wraps its lead-in text and the nested list
   in this span so they form one grid cell next to the lettered badge,
   rather than each becoming its own grid item. */
.ah-criteria__body {
  display: block;
}

.ah-criteria__body > .ah-prose-list,
.ah-criteria__body > .ah-term-list {
  margin-top: 0.75rem;
  margin-bottom: 0;
}

/* Symptom / category lists — always a bare <ul> in prose. No box (most
   pages carry 1-2 of these, so boxing every one would stack too many
   panels) — a light two-column scan grid in umber, the warm complement to
   criteria's cool teal, quick to read without competing with it. */
ul.ah-prose-list {
  margin: 1.5rem 0;
  padding: 0;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.5rem 1.1rem;
}

/* Native marker instead of a hand-positioned ::before dot — browsers place
   ::marker against an item's first line automatically, so multi-line items
   (a short word or two can still wrap in a narrow column) never throw the
   marker out of alignment the way a flex `align-self` value would. */
ul.ah-prose-list li {
  list-style: disc inside;
  padding: 0.5rem 0.75rem;
  border-radius: var(--bs-border-radius-sm);
  background: color-mix(in srgb, var(--ah-umber) 6%, var(--ah-card));
}

ul.ah-prose-list li::marker {
  color: var(--ah-umber);
  font-size: 0.7em;
}

@media (max-width: 575.98px) {
  ul.ah-prose-list {
    grid-template-columns: 1fr;
  }
}

/* Symptom-cluster lists whose items are full sentences rather than short
   phrases (e.g. PTSD's three symptom types) don't fit the two-column
   .ah-prose-list scan grid — cramming a sentence into a half-width pill
   wraps badly, and an odd item count leaves a stray gap. Full-width rows
   instead, same umber accent and left-rule language as .ah-prose-list. */
ul.ah-term-list {
  list-style: none;
  margin: 1.5rem 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

ul.ah-term-list li {
  padding: 0.9rem 1.15rem;
  border-radius: var(--bs-border-radius-sm);
  background: color-mix(in srgb, var(--ah-umber) 6%, var(--ah-card));
  border-left: 3px solid var(--ah-umber);
}

/* ---------- Prev/next section navigation ---------- */

/* Why Anxiety, ACT, Anxiety Disorders, and CBT child pages' "Section
   pages" nav. Mocked up and approved as an Artifact (three options —
   staggered buttons, compact short labels, prev/next cards) before
   implementation; this is the "prev/next cards" option. Replaces plain
   outline buttons whose "Back:"/"Next:" label plus the destination's full
   title didn't fit on one line at narrow widths — long titles wrapped
   mid-word and the two buttons read as cramped. */
.ah-section-nav {
  display: grid;
  grid-template-columns: 1fr;
  gap: 0.75rem;
}

@media (min-width: 576px) {
  .ah-section-nav:has(.ah-pn-card--prev):has(.ah-pn-card--next) {
    grid-template-columns: 1fr 1fr;
  }
}

.ah-pn-card {
  display: block;
  text-decoration: none;
  border: 1px solid var(--bs-border-color);
  border-radius: var(--bs-border-radius);
  background: var(--ah-card);
  box-shadow: var(--ah-shadow-sm);
  padding: 0.85rem 1.1rem;
  transition: transform 200ms ease, box-shadow 200ms ease;
}

.ah-pn-card:hover {
  transform: translateY(-2px);
  box-shadow: var(--ah-shadow-glow);
}

.ah-pn-card--next {
  text-align: right;
}

.ah-pn-card__label {
  display: block;
  font-family: var(--ah-font-sans);
  font-weight: 700;
  font-size: var(--ah-fs-xs);
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--ah-umber);
  margin-bottom: 0.3rem;
}

.ah-pn-card__title {
  display: block;
  font-family: var(--ah-font-serif);
  font-weight: 600;
  color: var(--ah-ink);
  font-size: 1rem;
}

/* ---------- Table of contents panel (book pages) ---------- */

/* Mocked up and approved as an Artifact (three options — numbered rows,
   two-column grid, minimal editorial list) before implementation, then a
   follow-up fix once approved: the initial numbered-row version put a "01"
   ordinal next to text that already spells out "Chapter One," so the
   marker was dropped rather than trying to reconcile two competing
   numbering systems. Reuses the exact sepia->dawn gradient both book
   pages' own banners already use (.ah-banner--dawn). */
.ah-toc {
  margin: 1.75rem 0;
  border-radius: 12px;
  padding: 1.6rem 1.85rem 1.85rem;
  background: linear-gradient(160deg,
    color-mix(in srgb, var(--ah-sepia) 10%, var(--ah-card)) 0%,
    color-mix(in srgb, var(--ah-dawn) 9%, var(--ah-card)) 100%);
  box-shadow: var(--ah-shadow-sm);
  border: 1px solid color-mix(in srgb, var(--ah-sepia) 30%, transparent);
}

.ah-toc__subtitle {
  font-family: var(--ah-font-serif);
  font-style: italic;
  text-align: center;
  color: var(--ah-slate);
  margin: 0 0 1.1rem;
  padding-bottom: 0.9rem;
  border-bottom: 1px solid color-mix(in srgb, var(--ah-sepia) 45%, transparent);
}

ul.ah-toc__list {
  list-style: none;
  margin: 0;
  padding: 0;
}

ul.ah-toc__list > li {
  padding: 0.6rem 0;
  border-bottom: 1px dotted color-mix(in srgb, var(--ah-sepia) 45%, transparent);
  font-size: 0.95rem;
}

ul.ah-toc__list > li:last-child {
  border-bottom: none;
}

/* Part headers (e.g. Pure O OCD's two-part structure) — a section break
   within the flat list, not another chapter row. */
ul.ah-toc__list > li.ah-toc__part {
  font-family: var(--ah-font-serif);
  font-weight: 600;
  color: var(--ah-umber-link);
  padding: 1rem 0 0.5rem;
  border-bottom: none;
}

ul.ah-toc__list > li.ah-toc__part:first-child {
  padding-top: 0;
}

/* ---------- LLAMP step spine (The Worry Trap) ---------- */

/* The five LLAMP steps are a genuine sequence — the surrounding text calls
   them "steps" that "flow one into another" — so a connected spine makes
   that flow literally visible instead of just implied by list order.
   Mocked up and approved as an Artifact before implementation; the first
   pass put the acronym letter in each badge, which duplicated the letter
   already bold at the start of each item's own text, so the badges were
   changed to plain step numbers (1-5) instead, leaving the acronym letter
   to do its own job inline. */
ul.ah-llamp {
  list-style: none;
  margin: 1.75rem 0;
  padding: 0;
  position: relative;
}

ul.ah-llamp::before {
  content: "";
  position: absolute;
  left: 1.375rem;
  top: 1.75rem;
  bottom: 1.75rem;
  width: 2px;
  background: linear-gradient(180deg, var(--ah-umber) 0%, var(--ah-dawn) 100%);
}

ul.ah-llamp li {
  position: relative;
  display: flex;
  align-items: center;
  gap: 1.1rem;
  padding: 0.8rem 0;
}

.ah-llamp__badge {
  position: relative;
  z-index: 1;
  flex: 0 0 auto;
  width: 2.75rem;
  height: 2.75rem;
  border-radius: 50%;
  background: var(--ah-card);
  border: 2px solid var(--ah-umber);
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--ah-font-serif);
  font-weight: 700;
  font-size: 1.2rem;
  color: var(--ah-umber);
}

.ah-llamp__word strong {
  font-family: var(--ah-font-serif);
  font-weight: 700;
  font-size: 1.1em;
  color: var(--ah-umber-link);
}

/* ---------- Buttons ---------- */

/*
  Bootstrap's precompiled .btn-primary/.btn-outline-primary rules hardcode
  stock Bootstrap blue (#0d6efd) into their own --bs-btn-hover-bg/
  --bs-btn-active-bg/--bs-btn-focus-shadow-rgb custom properties — these
  aren't derived from --bs-primary at runtime, so overriding --bs-primary
  alone (above) never reached hover/active/focus states. Overriding the
  same component-scoped variables here is the correct fix, not a patch.
*/
.btn-primary {
  --bs-btn-bg: var(--ah-umber);
  --bs-btn-border-color: var(--ah-umber);
  --bs-btn-hover-bg: color-mix(in srgb, var(--ah-umber) 85%, var(--ah-ink));
  --bs-btn-hover-border-color: color-mix(in srgb, var(--ah-umber) 80%, var(--ah-ink));
  --bs-btn-active-bg: color-mix(in srgb, var(--ah-umber) 75%, var(--ah-ink));
  --bs-btn-active-border-color: color-mix(in srgb, var(--ah-umber) 70%, var(--ah-ink));
  --bs-btn-disabled-bg: var(--ah-umber);
  --bs-btn-disabled-border-color: var(--ah-umber);
  --bs-btn-focus-shadow-rgb: var(--bs-primary-rgb);
  background: linear-gradient(135deg, var(--ah-umber) 0%, color-mix(in srgb, var(--ah-umber) 78%, var(--ah-ink)) 100%);
  border-color: var(--ah-umber);
  transition: box-shadow 200ms ease, transform 200ms ease;
}

.btn-primary:hover,
.btn-primary:focus {
  box-shadow: 0 8px 20px color-mix(in srgb, var(--ah-umber) 35%, transparent);
  transform: translateY(-1px);
}

.btn-outline-primary {
  --bs-btn-color: var(--ah-umber);
  --bs-btn-border-color: var(--ah-umber);
  --bs-btn-hover-bg: var(--ah-umber);
  --bs-btn-hover-border-color: var(--ah-umber);
  --bs-btn-active-bg: color-mix(in srgb, var(--ah-umber) 85%, var(--ah-ink));
  --bs-btn-active-border-color: color-mix(in srgb, var(--ah-umber) 80%, var(--ah-ink));
  --bs-btn-disabled-color: var(--ah-umber);
  --bs-btn-disabled-border-color: var(--ah-umber);
  --bs-btn-focus-shadow-rgb: var(--bs-primary-rgb);
  color: var(--ah-umber);
  border-color: var(--ah-umber);
  transition: box-shadow 200ms ease;
}

.btn-outline-primary:hover,
.btn-outline-primary:focus {
  box-shadow: 0 6px 16px color-mix(in srgb, var(--ah-umber) 25%, transparent);
}

/* Smaller radius than .ah-card/.ah-callout is intentional — interactive
   controls read as tighter/crisper, content containers as softer. */
.btn {
  border-radius: var(--bs-border-radius-sm);
}

/* ---------- Footer ---------- */

.ah-footer {
  background: var(--ah-card);
  border-top: 1px solid var(--ah-sepia);
  color: var(--ah-slate);
}

.ah-footer a {
  color: var(--ah-slate);
  transition: color 150ms ease;
}

.ah-footer a:hover,
.ah-footer a:focus {
  color: var(--ah-teal);
}

.ah-footer__legal {
  color: var(--ah-text-muted);
  font-size: var(--ah-fs-sm);
}

/* ---------- Utility ---------- */

.ah-eyebrow {
  color: var(--ah-text-muted);
  font-size: var(--ah-fs-sm);
  letter-spacing: 0.03em;
  text-transform: uppercase;
}

/* ---------- Print (DES-2) ---------- */

@media print {
  .ah-header, .ah-footer, .ah-banner, .navbar, .offcanvas {
    display: none !important;
  }
  body {
    background: #fff;
    color: #000;
  }
  a[href^="http"]::after {
    content: " (" attr(href) ")";
    font-size: 0.85em;
    color: #555;
  }
}

/* ---------- Reduced motion (A11Y-6) ---------- */

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
  }
}