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

   v1 (2026-09-14): new page, SPEC-SPECIALTY-PAGES-2026-09-14.md Builder C.
   Modelled on /menopause.css (same hero method, same ink band, same reading
   column), with its own photograph, its own quote treatments and a crisis
   note near the top of the content.

   CONTRACT: every selector in this file is a kd- 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,
   list rows (.ks-list), FAQ accordion (.ks-faq / .ks-qa) and consult block
   (.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 of
   which already live 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 meadow.webp (1200x900: a misty meadow,
   a split-rail fence, the sun rising behind a wooded hill). It is the
   brightest of the specialty-page frames: the whole upper half is pale sky
   and lit mist, with the sun itself at dead centre, directly behind where a
   centred copy column sits. The first scrim tried (mid-stops .66 phone / .70
   wide, crop at 50% 68%) measured 6.6:1 at worst but buried the photograph in
   dark grass; the numbers below are the lighter pass that lets the mist and
   the fence read while still clearing 4.5:1 with room to spare. The mid-stop
   is .52 on a phone and .56 from 720 (menopause.css: .58 / .68).

   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 375x628, linear mid-stop .52, subhead 4 lines, h1 3 lines
       .86 cream fact row ("Adults 18 and over") .. 5.07:1  <- page worst case
       .82 cream wordmark sub ..................... 5.10:1
       --cream h1 ................................. 5.15:1
       .93 cream subhead .......................... 5.31:1
       .90 cream hero label ....................... 5.43:1
       #CFE0D4 .ks-link--light phone number ....... 6.01:1
       .93 cream "or call" ........................ 7.41:1

     720px  hero 720x547, linear mid-stop .56, subhead 3 lines, h1 2 lines
       #CFE0D4 .ks-link--light phone number ....... 5.32:1  <- worst at 720
       .82 cream wordmark sub ..................... 5.36:1
       .86 cream fact row ......................... 5.48:1
       .90 cream hero label ....................... 5.62:1
       --cream h1 ................................. 6.01:1
       .93 cream subhead .......................... 6.51:1

     1440px hero 1440x605, linear mid-stop .56, subhead 3 lines, h1 2 lines
       .82 cream wordmark sub ..................... 5.40:1  <- worst at 1440
       .90 cream hero label ....................... 5.46:1
       --cream h1 ................................. 6.19:1
       #CFE0D4 phone number ....................... 6.73:1
       .93 cream subhead .......................... 6.90:1
       header nav links and tel ................... 7.13:1 and up

   Worst pair on the page: 5.07:1 (375px fact row). Every pair clears 4.5:1.
   -------------------------------------------------------------------------- */
.kd-hero {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  background: var(--ink);
}

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

.kd-hero__img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  /* Below 720px cover scales by HEIGHT (the phone band is taller than 4:3
     is wide), so the crop is horizontal only and the Y value does nothing,
     and the same holds at 720 (720x547 is still narrower than 4:3). Only
     once the band is wider than 4:3 (1440x605) does cover scale by width and
     this value bite: 50% 40% keeps the tree line and the mist in the band
     with the fence rails running under the copy. 50% 68% was tried first
     and read as a band of dark grass. */
  object-position: 50% 40%;
}

.kd-hero__scrim {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(78% 66% at 50% 50%,
      rgba(20, 38, 34, .42) 0%,
      rgba(20, 38, 34, .10) 70%,
      rgba(20, 38, 34, 0) 100%),
    linear-gradient(180deg,
      rgba(20, 38, 34, .78) 0%,
      rgba(20, 38, 34, .52) 45%,
      rgba(20, 38, 34, .76) 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. */
.kd-hero__inner {
  position: relative;
  z-index: 2;
  padding-top: 80px;
  padding-bottom: 52px;
  text-align: center;
}

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

.kd-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);
}

.kd-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);
}

.kd-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);
}

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

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

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

.kd-hero__call .ks-link {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
}

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

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

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

.kd-hero a:focus-visible { outline-color: var(--cream); }

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

   hero (photo) -> cream (#kd-what) -> sand (#kd-shapes) -> cream (#kd-reach)
   -> sand (#kd-work) -> cream (#kd-between) -> ink (#kd-tele) -> cream (FAQ,
   shared) -> sand (consult, shared) -> ink (footer). No two neighbours share
   a ground.
   -------------------------------------------------------------------------- */
.kd-what,
.kd-reach,
.kd-between { padding: 56px 0 60px; background: var(--cream); }

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

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

/* --------------------------------------------------------------------------
   HER PORTAL SENTENCE  (#kd-what)
   A quoted aside, not a banner: the display face at the supporting size, a
   sage rule on the leading edge, the attribution under it in the label tier.
   -------------------------------------------------------------------------- */
.kd-quote {
  margin: 28px 0 0;
  padding: 2px 0 2px 20px;
  border-left: 2px solid var(--sage);
}

.kd-quote__block { margin: 0; }

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

.kd-quote__cite {
  margin-top: 10px;
  font-size: .8125rem;
  line-height: 1.5;
  color: var(--body);
}

/* --------------------------------------------------------------------------
   THE CRISIS NOTE  (#kd-what, near the top of the content)

   Calm, not an alarm: no red, no icon, no box. The same treatment as the
   safety note on /relationships/ (.kr-safety__crisis), so the site's two
   safety notes read as one thing: a 2px --clay-text rule on the leading edge,
   20px in, the ink heading at list-title size, body text in --body. The
   clay rule is the one warm accent in the reading column, which is what lets
   it be found without shouting.
   Contrast: --ink h3 on --cream 11.2:1; --body text on --cream >= 7:1;
   .ks-link (--pine) on --cream passes as it does site-wide.
   -------------------------------------------------------------------------- */
.kd-safe {
  margin: 36px 0 0;
  padding: 6px 0 6px 20px;
  border-left: 2px solid var(--clay-text);
}

.kd-safe__title {
  margin: 0 0 8px;
  font-size: 1.1875rem;
  line-height: 1.25;
  color: var(--ink);
}

.kd-safe__p {
  margin: 0 0 10px;
  max-width: 60ch;
  font-size: 1rem;
  line-height: 1.66;
  color: var(--body);
}

.kd-safe__p:last-child { margin-bottom: 0; }

/* 988 and 911 are the two actions in the note: set in the heavier weight so
   the numbers are the first thing the eye lands on. They are inline links in
   a sentence, which WCAG 2.5.8 exempts from the 24px target minimum. */
.kd-safe__p .ks-link { font-weight: 600; }

/* --------------------------------------------------------------------------
   SHORT CLOSING LINES AND THE ONE SECTION LINK
   -------------------------------------------------------------------------- */
.kd-note {
  margin: 28px 0 0;
  max-width: 62ch;
  font-size: .9375rem;
  line-height: 1.66;
  color: var(--body);
}

.kd-more { margin: 22px 0 0; }

.kd-more .ks-link {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
}

/* --------------------------------------------------------------------------
   HER QUOTE 3  (#kd-reach) - the section's one held beat, in the homepage's
   quiet-band idiom (.ks-voice): display face, centred, hairlines above and
   below, attribution in small caps.
   -------------------------------------------------------------------------- */
.kd-pull {
  margin: 4px auto 32px;
  padding: 26px 0 24px;
  max-width: 36rem;
  border-top: 1px solid var(--ks-line);
  border-bottom: 1px solid var(--ks-line);
  text-align: center;
}

.kd-pull__block { margin: 0; }

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

.kd-pull__cite {
  margin-top: 16px;
  font-size: .6875rem;
  font-weight: 600;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--body);
}

/* --------------------------------------------------------------------------
   IN HER WORDS  (#kd-work) - three of her sentences as hairline rows, the
   site's one list grammar (BRAND.md PINNED REFERENCE rule 3). The small label
   above each is ours and only says what the sentence is about.
   -------------------------------------------------------------------------- */
.kd-words {
  margin: 30px 0 30px;
}

.kd-words__label {
  margin: 0 0 12px;
  font-size: .75rem;
  font-weight: 600;
  letter-spacing: .13em;
  text-transform: uppercase;
  color: var(--clay-text);
}

.kd-words__list {
  margin: 0;
  padding: 0;
  list-style: none;
  border-bottom: 1px solid var(--ks-line);
}

.kd-words__row {
  padding: 18px 0;
  border-top: 1px solid var(--ks-line);
}

.kd-words__on {
  margin: 0 0 6px;
  font-size: .8125rem;
  font-weight: 600;
  line-height: 1.4;
  color: var(--body);
}

.kd-words__q {
  margin: 0;
  max-width: 56ch;
  font-family: var(--ks-font-display);
  font-optical-sizing: auto;
  font-size: 1.125rem;
  line-height: 1.5;
  color: var(--ink);
  text-wrap: pretty;
}

/* The medical rail: a sage rule on the leading edge, supporting tier, as
   .km-approach carries it on /menopause/. */
.kd-rail {
  margin: 28px 0 0;
  padding: 4px 0 4px 20px;
  border-left: 2px solid var(--sage);
}

.kd-rail__p {
  margin: 0;
  max-width: 60ch;
  font-size: 1rem;
  line-height: 1.66;
  color: var(--body);
}

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

   BRAND.md PINNED REFERENCE rule 2. 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
   -------------------------------------------------------------------------- */
.kd-tele {
  padding: 56px 0 60px;
  background: var(--ink);
}

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

.kd-tele__media { margin: 0; }

.kd-tele__img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  /* The lake frame's weight is the dark treeline and its reflection, left
     of centre; keep that in when the 1080 stretch crops it to a tall box.
     At the stacked 16:9 crop (720-1079) only Y bites, and 50% keeps the
     horizon and the reflection in the band. */
  object-position: 42% 50%;
  border-radius: var(--ks-radius);
  border: 1px solid rgba(250, 246, 239, .18);
}

.kd-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);
}

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

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

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

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

  .kd-hero__scrim {
    background:
      radial-gradient(78% 66% at 50% 50%,
        rgba(20, 38, 34, .44) 0%,
        rgba(20, 38, 34, .12) 70%,
        rgba(20, 38, 34, 0) 100%),
      linear-gradient(180deg,
        rgba(20, 38, 34, .80) 0%,
        rgba(20, 38, 34, .56) 45%,
        rgba(20, 38, 34, .78) 100%);
  }

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

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

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

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

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

  .kd-what,
  .kd-shapes,
  .kd-reach,
  .kd-work,
  .kd-between,
  .kd-tele { padding: 84px 0 88px; }

  .kd-pull { padding: 32px 0 30px; }

  /* 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. */
  .kd-tele__grid { gap: 34px; }

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

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

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

  .kd-what,
  .kd-shapes,
  .kd-reach,
  .kd-work,
  .kd-between,
  .kd-tele { padding: 104px 0 108px; }

  /* Stretch the figure to the copy column, as .km-tele does, so the two
     columns end level however the copy wraps. */
  .kd-tele__grid {
    grid-template-columns: 380px 1fr;
    gap: 72px;
    align-items: stretch;
  }

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

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

/* Keeps "15-minute" on one line in running copy (at 390 the browser broke it
   after the hyphen, leaving "15-" alone at a line end), and keeps her name
   and credential together in the hero subhead ("Kristen I. / Speer, LPC"
   split at 390). */
.kd-nb { white-space: nowrap; }