/* ==========================================================================
   Kristen I. Speer, LPC, LLC - kristenspeerlpc.com
   anxiety.css - the anxiety page's own block. Loaded AFTER /styles.css.

   v1 (2026-09-14): new page, modelled on /menopause/ (SPEC-SPECIALTY-PAGES-
   2026-09-14, Builder D).

   CONTRACT: every selector in this file is a ka- class or a descendant of
   one. Nothing here defines a design token, redefines a ks- rule, or styles
   an element the shared shell owns. The page's head, nav, sticky bar, footer,
   FAQ accordion (.ks-faq / .ks-qa), list rows (.ks-list) and consult section
   (.ks-start) are the shared components from /styles.css, used as-is.

   Mobile-first: base = 375px, then min-width 720px, then min-width 1080px -
   the same two breakpoints as the shell, and no others.

   MOTION: this file adds none. The only animated things on the page are the
   shared [data-ks-reveal] opacity fade and the shared control hovers, both
   inside @media (prefers-reduced-motion: no-preference) in /styles.css.
   ========================================================================== */

/* --------------------------------------------------------------------------
   HERO

   The interior-page hero from /menopause/: photograph with the nav on it,
   sized to its content. The frame is creek.webp, a forest creek running over
   smooth stones: a dark bank on the left, a bright misty vanishing point just
   right of centre at the top, and lit water across the bottom third. Both
   bright zones sit where a centred copy column falls, but the frame is darker
   overall than /menopause/'s sunlit room, so the linear mid-stop is .54 at
   every width (menopause: .58 / .68). A first pass at .62 measured 5.49:1
   worst and turned the photograph to murk; .52 measured 4.91:1 worst at 720,
   too close to the line. .54 is the one written below.

   RE-MEASURED 2026-09-14 (fix pass G, after the subhead rewrite changed the
   line counts; headless Chrome via CDP, script .tmp/qa/fix-g-contrast.mjs,
   results in .tmp/qa/fix-g-contrast/contrast.json): the header and the hero
   copy set to visibility:hidden, the band captured once as painted
   (photograph + both scrim layers), then each text node's colour composited
   at its own alpha over EVERY pixel of that node's own line boxes, and the
   worst pixel kept. Text-shadow is NOT counted (it is hidden with the text),
   so every figure is pessimistic.

     375px  hero 375x562 (mobile emulation, object-position 38% 50%),
            subhead 3 lines, h1 2 lines
       .93 cream subhead ........................ 5.26:1  <- page worst case
       .82 cream wordmark sub ................... 5.53:1
       #CFE0D4 .ks-link--light phone number ..... 5.79:1
       .90 cream hero label ..................... 6.30:1
       --cream h1 ("Arkansas") .................. 6.62:1
       .86 cream fact row ....................... 6.82:1
       .93 cream "or call" ...................... 7.02:1
       --cream wordmark name .................... 7.55:1

     720px  hero 720x516, subhead 2 lines, h1 2 lines
       .82 cream wordmark sub ................... 5.23:1  <- worst at this width
       #CFE0D4 phone number ..................... 5.58:1
       .93 cream subhead ........................ 5.82:1
       .86 cream fact row ....................... 6.27:1
       --cream h1 ............................... 6.79:1

     1440px hero 1440x575, subhead 2 lines, h1 2 lines
       #CFE0D4 phone number ..................... 6.23:1  <- worst at this width
       .93 cream subhead ........................ 6.27:1
       --cream h1 ............................... 6.57:1
       .86 cream fact row ....................... 6.63:1
       --cream header nav links ................. 8.47:1

   Worst pair on the page: 5.23:1 (720px wordmark sub). Every pair clears 4.5:1.
   -------------------------------------------------------------------------- */
.ka-hero {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  background: var(--ink);
}

.ka-hero__media {
  position: absolute;
  inset: 0;
  z-index: 0;
}

.ka-hero__img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  /* Below 720px the band is taller than 4:3 relative to its width, so cover
     scales by HEIGHT and the crop is entirely horizontal: only the X value
     bites. 38% keeps the misty vanishing point in frame (the photograph's
     depth) while pulling the dark left bank in behind the start of each line. */
  object-position: 38% 50%;
}

.ka-hero__scrim {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(80% 68% at 50% 50%,
      rgba(20, 38, 34, .44) 0%,
      rgba(20, 38, 34, .10) 70%,
      rgba(20, 38, 34, 0) 100%),
    linear-gradient(180deg,
      rgba(20, 38, 34, .80) 0%,
      rgba(20, 38, 34, .54) 45%,
      rgba(20, 38, 34, .80) 100%);
}

/* 80px of top padding clears the nav sitting on the photograph: the header row
   measures 16 + 44 + 16 = 76px at this width, and 80 is that plus the breath. */
.ka-hero__inner {
  position: relative;
  z-index: 2;
  padding-top: 80px;
  padding-bottom: 52px;
  text-align: center;
}

.ka-hero__content {
  max-width: 46rem;
  margin: 0 auto;
}

.ka-hero__label {
  display: inline-block;
  margin: 0 0 18px;
  padding: 7px 14px;
  border: 1px solid rgba(250, 246, 239, .30);
  border-radius: var(--ks-radius-pill);
  font-size: .6875rem;
  font-weight: 600;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: rgba(250, 246, 239, .90);
}

.ka-hero__title {
  margin: 0 0 14px;
  font-size: clamp(2.125rem, 9.4vw, 2.75rem);
  font-weight: 500;
  line-height: 1.08;
  letter-spacing: -.02em;
  color: var(--cream);
  text-shadow: 0 2px 22px rgba(15, 30, 27, .55);
}

.ka-hero__subhead {
  margin: 0 auto 26px;
  max-width: 44ch;
  font-size: 1.0625rem;
  line-height: 1.6;
  color: rgba(250, 246, 239, .93);
  text-shadow: 0 1px 14px rgba(15, 30, 27, .5);
  text-wrap: balance;
}

.ka-hero__cta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 14px 18px;
}

.ka-hero__cta .ks-btn { flex: 0 0 auto; }

.ka-hero__call {
  font-size: 1rem;
  color: rgba(250, 246, 239, .93);
}

/* A standalone tap-to-call link carries a full 44px target. */
.ka-hero__call .ks-link {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
}

/* The hairline fact row: stacked with rules between at phone width, one row
   with rules between at 720 and up. */
.ka-hero__facts {
  display: flex;
  flex-direction: column;
  align-items: center;
  margin: 18px auto 0;
  padding: 0;
  list-style: none;
}

.ka-hero__fact {
  width: 100%;
  max-width: 22rem;
  padding: 9px 0;
  font-size: .8125rem;
  line-height: 1.4;
  color: rgba(250, 246, 239, .86);
}

.ka-hero__fact + .ka-hero__fact {
  border-top: 1px solid rgba(250, 246, 239, .22);
}

/* --pine on a dark photograph is invisible; the focus ring inverts here. */
.ka-hero a:focus-visible { outline-color: var(--cream); }

/* --------------------------------------------------------------------------
   SECTION GROUNDS

   hero -> cream (#ka-what) -> sand (#ka-shapes) -> cream (#ka-work) -> sand
   (#ka-counts) -> ink (#ka-tele) -> cream (.ks-faq) -> sand (.ks-start) ->
   ink (footer). No two neighbours share a ground. The last three bring their
   own padding and ground from /styles.css; these match their rhythm.
   -------------------------------------------------------------------------- */
.ka-what,
.ka-work { padding: 56px 0 60px; background: var(--cream); }

.ka-shapes,
.ka-counts { padding: 56px 0 60px; background: var(--sand); }

/* The reading column, one measure for the whole page (as .km-body). */
.ka-body {
  max-width: 680px;
  margin: 0 auto;
}

/* The section's one held beat. It is OUR line, not Kristen's, so it must not
   borrow the centred, hairline-ruled look her attributed quotes use elsewhere
   on the site (a reader could take it for something she said). Left-aligned,
   a 2px --clay-text rule on the leading edge, 20px in, no top or bottom
   rules. Her quotes on this page carry a sage rule and a byline; this one
   has neither. */
.ka-pull {
  margin: 30px 0;
  padding: 4px 0 4px 20px;
  max-width: 34rem;
  border-left: 2px solid var(--clay-text);
}

.ka-pull__p {
  margin: 0;
  font-family: var(--ks-font-display);
  font-optical-sizing: auto;
  font-weight: 400;
  font-size: clamp(1.125rem, 4.2vw, 1.4375rem);
  line-height: 1.5;
  letter-spacing: -.01em;
  color: var(--ink);
  text-wrap: pretty;
}

/* Honest closing lines. Compact tier: a caveat, read second by design. */
.ka-note {
  margin: 28px 0 0;
  max-width: 62ch;
  font-size: .9375rem;
  line-height: 1.66;
  color: var(--body);
}

/* The links line that closes #ka-counts. The two links stay inline in the
   sentence (WCAG 2.5.8's inline exception); an inline-block version was tried
   and pushed the second link onto a line of its own at 1440. */
.ka-more {
  margin: 26px 0 0;
  max-width: 62ch;
  font-size: 1rem;
  line-height: 1.75;
  color: var(--body);
}

/* --------------------------------------------------------------------------
   THE TWO HALVES  (#ka-work)

   Two short parts, each an h3, a paragraph and one of her quotes. A hairline
   separates them, so the section reads as two steps without borrowing the
   menopause page's numbered ladder (the pages should not open or proceed
   alike).
   -------------------------------------------------------------------------- */
.ka-part {
  padding: 26px 0 28px;
  border-top: 1px solid var(--ks-line);
}

.ka-part + .ka-part { padding-bottom: 30px; border-bottom: 1px solid var(--ks-line); }

.ka-part__title {
  margin: 0 0 10px;
  font-size: 1.25rem;
  line-height: 1.25;
}

.ka-part__p {
  margin: 0;
  max-width: 62ch;
  font-size: 1.0625rem;     /* reading tier - the same 17px as .ks-prose */
  line-height: 1.72;
}

.ka-approaches { margin: 28px 0 0; }

/* Her own words: a sage rule on the leading edge, no box, display face so it
   reads as her voice rather than as more of ours. Attribution under it in
   the compact tier. */
.ka-quote {
  margin: 18px 0 0;
  padding: 2px 0 2px 20px;
  border-left: 2px solid var(--sage);
}

.ka-quote__p {
  margin: 0;
  max-width: 56ch;
  font-family: var(--ks-font-display);
  font-optical-sizing: auto;
  font-size: 1.0625rem;
  line-height: 1.55;
  color: var(--ink);
  text-wrap: pretty;
}

.ka-quote__by {
  margin: 8px 0 0;
  font-size: .8125rem;
  line-height: 1.4;
  color: var(--body);
}

/* The standalone quote in #ka-counts sits between paragraphs, so it gets the
   paragraph rhythm above and below and a slightly larger face. */
.ka-quote--wide {
  margin: 26px 0 28px;
}

.ka-quote--wide .ka-quote__p { font-size: clamp(1.125rem, 4.2vw, 1.3125rem); }

/* --------------------------------------------------------------------------
   TELEHEALTH BAND  (ground: --ink - light text only)

   BRAND.md PINNED REFERENCE rule 2: a dark section holds a photograph, a
   label and real content. The type sits in its own column beside the image,
   never on it, so contrast is the flat --ink case at every width:

     --cream h2 .......................... 11.22:1
     rgba(250,246,239,.90) paragraphs ..... 9.50:1
     rgba(250,246,239,.90) label .......... 9.50:1
   -------------------------------------------------------------------------- */
.ka-tele {
  padding: 56px 0 60px;
  background: var(--ink);
}

.ka-tele__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 26px;
  align-items: center;
}

.ka-tele__media { margin: 0; }

.ka-tele__img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  /* window.webp: the mug sits just right of centre (x ~55%, y ~64%), the
     folded blanket to its left, rain on the glass above. X bites at the tall
     1080 stretch, where 55% keeps the mug centred with the blanket's edge and
     the window beside it. Y bites only at the stacked 16:9 crop (720-1079),
     where 70% keeps the mug, the blanket and the lower half of the rainy
     glass, and drops the empty top of the pane. */
  object-position: 55% 70%;
  border-radius: var(--ks-radius);
  border: 1px solid rgba(250, 246, 239, .18);
}

.ka-tele__label {
  display: inline-block;
  margin: 0 0 18px;
  padding: 7px 14px;
  border: 1px solid rgba(250, 246, 239, .30);
  border-radius: var(--ks-radius-pill);
  font-size: .6875rem;
  font-weight: 600;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: rgba(250, 246, 239, .90);
}

.ka-tele__title {
  margin: 0 0 18px;
  font-size: clamp(1.75rem, 6.6vw, 2.25rem);
  line-height: 1.15;
  color: var(--cream);
}

.ka-tele__p {
  margin: 0 0 16px;
  max-width: 60ch;
  font-size: 1.0625rem;
  line-height: 1.72;
  color: rgba(250, 246, 239, .90);
}

.ka-tele__p:last-child { margin-bottom: 0; }

.ka-tele a:focus-visible { outline-color: var(--cream); }

/* Keeps her name and credential together in the hero subhead. */
.ka-nb { white-space: nowrap; }

/* ==========================================================================
   720px and up
   ========================================================================== */
@media (min-width: 720px) {
  .ka-hero__inner {
    padding-top: 104px;
    padding-bottom: 72px;
  }

  .ka-hero__img { object-position: 50% 50%; }

  .ka-hero__title { font-size: clamp(2.75rem, 5.6vw, 3.5rem); }

  .ka-hero__subhead { font-size: 1.1875rem; }

  .ka-hero__facts {
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: center;
  }

  .ka-hero__fact {
    width: auto;
    max-width: none;
    padding: 2px 18px;
  }

  .ka-hero__fact + .ka-hero__fact {
    border-top: 0;
    border-left: 1px solid rgba(250, 246, 239, .22);
  }

  .ka-what,
  .ka-shapes,
  .ka-work,
  .ka-counts,
  .ka-tele { padding: 84px 0 88px; }

  .ka-part { padding: 32px 0 34px; }

  .ka-part + .ka-part { padding-bottom: 36px; }

  /* 720-1079: the band stays STACKED (photo above, copy below). The old
     two-column minmax(240px, 320px) 1fr layout centred a small photo against
     a narrow copy column, left ~350px of dead space and broke the h2 over
     four lines. Stacked, the photograph goes wide and short at 16:9. The
     two-column layout starts at 1080, below. */
  .ka-tele__grid { gap: 34px; }

  .ka-tele__img { aspect-ratio: 16 / 9; }
}

/* ==========================================================================
   1080px and up
   ========================================================================== */
@media (min-width: 1080px) {
  .ka-hero__inner {
    padding-top: 116px;
    padding-bottom: 84px;
  }

  .ka-hero__title { font-size: 3.75rem; }

  .ka-what,
  .ka-shapes,
  .ka-work,
  .ka-counts,
  .ka-tele { padding: 104px 0 108px; }

  /* Stretch the figure to the copy column's height (the /menopause/ fix for a
     small photo floating beside a tall column). */
  .ka-tele__grid {
    grid-template-columns: 380px 1fr;
    gap: 72px;
    align-items: stretch;
  }

  .ka-tele__media { min-height: 320px; }

  .ka-tele__img {
    height: 100%;
    aspect-ratio: auto;
  }
}