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

   v2 (2026-09-13): adds .km-rel, the relationships section that sits between
   #km-work and #km-tele. Two rules and one link line; no token, no ks- rule
   and no new breakpoint. Nothing else in this file changed but the two
   comments that referenced PENDING.md #4, now that the consult format is
   sourced (RESEARCH.md In-person session 2026-09-13).

   CONTRACT: every selector in this file is a km- 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) and consult card (.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 thing on the page is 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. There is nothing here for a reduced-motion user to opt out of.
   ========================================================================== */

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

   The interior-page variant of the homepage hero: the same photograph-with-
   the-nav-on-it composition, sized to its content instead of to the viewport.

   THE PHOTOGRAPH IS NOT THE EMDR PAGE'S. /emdr/ uses path.webp (misty trail);
   this page uses interior.webp (a lit room, an armchair, a folded blanket) so
   the two specialty pages do not open on the same frame. That swap is why
   every scrim number below differs from emdr.css - interior.webp is the
   brighter of the two, with a blown-out curtain down its right edge and a
   sunlit cream wall behind the copy column, so the mid-stops are DARKER here
   (.58 phone / .68 wide) where emdr.css could afford .50 / .62.

   CONTRAST MEASURED 2026-08-30 (real Chrome, the real pixels, same method as
   emdr.css): the photo drawn to a canvas at the element's exact painted
   geometry (object-fit cover + object-position resolved), the BRIGHTEST pixel
   inside each text element's own box taken as the worst case, both scrim
   layers composited over it in paint order - radial first, linear under it, as
   the background list paints. Text-shadow is NOT counted, so every figure
   below is pessimistic.

     375px  hero 375x600, linear mid-stop .58
       .82 cream wordmark sub .................. 10.06:1
       .90 cream hero label ..................... 9.31:1
       .86 cream fact row ....................... 7.02:1
       .93 cream "or call" ...................... 6.56:1
       --cream h1 ............................... 5.86:1
       .93 cream subhead ........................ 5.55:1
       #CFE0D4 .ks-link--light phone number ..... 5.14:1  <- page worst case

     720px  hero 720x516, linear mid-stop .68
       worst pair (--cream h1) .................. 6.27:1

     1905px hero 1905x640, linear mid-stop .68
       worst pair (--cream h1) .................. 7.74:1

   Every pair clears 4.5:1, and the copy column is held to 46rem centred, so it
   never leaves the radial's strong zone. The phone case is the tight one, as
   it is on /emdr/: cover scales by HEIGHT there, so the band shows the frame's
   full vertical extent including the lit wall behind the chair.
   -------------------------------------------------------------------------- */
.km-hero {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  background: var(--ink);
}

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

.km-hero__img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  /* 4:3 original in a band roughly 16:9 or wider. Centred, unlike the EMDR
     page: this frame's subject (chair, blanket, plant) sits mid-height, and
     dropping the crop would cut the chair off at the arms.

     The same geometry note the EMDR page carries applies here, because the
     source is the same 1200x900 shape: below 720px the hero box is 375x565,
     cover scales by HEIGHT (565/900 = .628) to 753x565, so the crop is
     entirely HORIZONTAL and the Y offset is 0 for any value written here.
     The phone band shows the photograph's full height regardless, which is
     why the phone fix lives in the scrim below, where it can act. Above 720
     the box is short enough that cover scales by width and this value bites. */
  object-position: 50% 50%;
}

.km-hero__scrim {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(78% 66% at 50% 52%,
      rgba(20, 38, 34, .42) 0%,
      rgba(20, 38, 34, .10) 70%,
      rgba(20, 38, 34, 0) 100%),
    /* .58, not the EMDR page's .50: interior.webp carries a sunlit wall and a
       white curtain where that frame carried mist, so the phone crop needs the
       extra weight to hold the h1 and subhead over 4.5:1. */
    linear-gradient(180deg,
      rgba(20, 38, 34, .82) 0%,
      rgba(20, 38, 34, .58) 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. */
.km-hero__inner {
  position: relative;
  z-index: 2;
  padding-top: 80px;
  padding-bottom: 52px;
  text-align: center;
}

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

/* The pill label, in the band's idiom rather than the hero badge's - there is
   no availability dot to carry here, only the subject of the page. */
.km-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);
}

/* Smaller than the homepage h1 by design: that one is the site's title card,
   this one is a page heading on an article. */
.km-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);
  /* The same tight darkening the scrim does, held close to the letterform, so
     the serif's thin strokes never sit on a lit patch of mist. */
  text-shadow: 0 2px 22px rgba(15, 30, 27, .55);
}

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

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

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

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

/* A standalone tap-to-call link carries a full 44px target, as it does in the
   homepage hero and the footer invite. */
.km-hero__call .ks-link {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
}

/* (.km-hero__fine is gone: the single fine-print line it styled was replaced
   by the fact row below.) */

/* The hairline fact row, in the homepage hero's grammar (.ks-hero__trust):
   the three things a person checks before reading any further, on rules
   instead of in a sentence. Every entry was already in the fine print this
   replaces. The consult entry now carries its format (video, phone optional:
   RESEARCH.md In-person session 2026-09-13); the "usually Friday afternoons"
   tendency stays out of a hero. Stacked with rules between at phone width, one row
   with rules between at 720 and up. */
.km-hero__facts {
  display: flex;
  flex-direction: column;
  align-items: center;
  margin: 18px auto 0;
  padding: 0;
  list-style: none;
}

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

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

/* --pine on a dark photograph is invisible; the focus ring inverts here, the
   same way it does inside the header and the footer. */
.km-hero a:focus-visible { outline-color: var(--cream); }

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

   cream -> sand -> cream -> sand -> ink -> cream (FAQ) -> sand (consult) ->
   ink (footer). The fourth stop is .km-rel, added in v2 between #km-work
   (cream) and #km-tele (ink): sand there keeps the alternation unbroken, and
   it is the same ground #km-helps uses two sections earlier, with a cream
   band between them. The last two stops are the shared .ks-faq and .ks-start,
   which bring their own padding and ground; the five below match their rhythm
   so the alternation reads as one page.
   -------------------------------------------------------------------------- */
.km-what,
.km-process { padding: 56px 0 60px; background: var(--cream); }

.km-helps,
.km-rel { padding: 56px 0 60px; background: var(--sand); }

/* The reading column. Everything on this page is prose, a short list or four
   steps - there is no two-column section outside the telehealth band - so one
   measure governs the lot. Matches .ks-start__inner's 680px. */
.km-body {
  max-width: 680px;
  margin: 0 auto;
}

/* PACING: .km-what ran 1,341px of unbroken prose at 375px with nothing to
   rest on. One sentence is lifted out of the middle of it and set in the
   homepage's quiet-band idiom (.ks-voice): display face, centred, hairline
   rules above and below. It is not a quotation and carries no attribution -
   it is the same sentence that stood in the paragraph above it, promoted to
   the section's one held beat. No fact is added. */
.km-pull {
  margin: 30px auto;
  padding: 26px 0;
  max-width: 34rem;
  border-top: 1px solid var(--ks-line);
  border-bottom: 1px solid var(--ks-line);
  text-align: center;
}

.km-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;
}

/* Her own words, demoted the same way the homepage demotes the colleague
   endorsement: a sage rule on the leading edge, no box. The page's only
   boxed surface stays the consult card, as on the homepage. */
.km-approach {
  margin: 28px 0 0;
  padding: 4px 0 4px 20px;
  border-left: 2px solid var(--sage);
}

.km-approach__p {
  margin: 0;
  max-width: 60ch;
  font-size: 1rem;          /* supporting tier - see BODY TYPE SCALE in styles.css */
  line-height: 1.66;
  color: var(--body);
}

/* The honest closing line under the specialty list and under the steps.
   Compact tier: it is a caveat, read second by design. */
.km-note {
  margin: 28px 0 0;
  max-width: 62ch;
  font-size: .9375rem;
  line-height: 1.66;
  color: var(--body);
}

/* The relationships section's closing link, in the same idiom the Specialties
   hub gives its deep-page links (.sp-area__more): its own line and a full 44px
   target rather than a link buried in the last sentence. It is that section's
   one action, and a thumb has to be able to find it. The href points at the
   hub's #sp-relationships until relationships is ruled a page of its own. */
.km-rel__more {
  margin: 22px 0 0;
}

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

/* --------------------------------------------------------------------------
   THE FOUR STEPS  (BRAND.md PINNED REFERENCE rule 5)

   An <ol>, so the order is in the markup rather than in the decoration: the
   numerals are aria-hidden and a screen reader announces "1 of 4" from the
   list itself. The rule between the markers is drawn per item and suppressed
   on the last one, so it stops at the final numeral instead of running past
   it into the paragraph below.
   -------------------------------------------------------------------------- */
.km-steps {
  margin: 32px 0 0;
  padding: 0;
  list-style: none;
}

.km-step {
  position: relative;
  padding: 0 0 28px 48px;
}

.km-step:last-child { padding-bottom: 0; }

.km-step::before {
  content: "";
  position: absolute;
  left: 15px;
  top: 36px;
  bottom: 0;
  width: 1px;
  background: var(--ks-line);
}

.km-step:last-child::before { content: none; }

.km-step__num {
  position: absolute;
  left: 0;
  top: 2px;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 31px;
  height: 31px;
  border: 1px solid var(--ks-line);
  border-radius: 50%;
  background: var(--cream);
  font-size: .8125rem;
  font-weight: 600;
  line-height: 1;
  color: var(--pine);
}

.km-step__title {
  margin: 0 0 8px;
  font-size: 1.1875rem;
  line-height: 1.25;
}

.km-step__body {
  margin: 0;
  max-width: 60ch;
  font-size: 1rem;          /* supporting tier */
  line-height: 1.66;
  color: var(--body);
}

/* Her quote inside step 1. Compact tier and the display face, so it reads as
   a quoted aside rather than as a second paragraph of instruction. */
.km-step__quote {
  margin: 12px 0 0;
  max-width: 56ch;
  font-family: var(--ks-font-display);
  font-optical-sizing: auto;
  font-size: 1rem;
  line-height: 1.55;
  color: var(--ink);
}

/* --------------------------------------------------------------------------
   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 here is the flat --ink case at every width and does
   not depend on which pixels the photograph happens to put underneath:

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

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

.km-tele__media { margin: 0; }

.km-tele__img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  border-radius: var(--ks-radius);
  border: 1px solid rgba(250, 246, 239, .18);
}

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

/* Not .ks-sec__title: that class inherits the h2 base colour (--ink), which is
   this band's own ground. Same size ramp, cream ink. */
.km-tele__title {
  margin: 0 0 18px;
  font-size: clamp(1.75rem, 6.6vw, 2.25rem);
  line-height: 1.15;
  color: var(--cream);
}

.km-tele__p {
  margin: 0 0 16px;
  max-width: 60ch;
  font-size: 1.0625rem;     /* reading tier - the same 17px as .ks-prose */
  line-height: 1.72;
  color: rgba(250, 246, 239, .90);
}

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

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

/* ==========================================================================
   720px and up
   ========================================================================== */
@media (min-width: 720px) {
  /* The nav row grows to 22 + 44 + 22 = 88px here. */
  .km-hero__inner {
    padding-top: 104px;
    padding-bottom: 72px;
  }

  /* The wide band is short and the copy sits over one bright horizontal slice
     of the room - the sunlit wall above the chair - so the mid-stop goes up
     again here rather than down. */
  .km-hero__scrim {
    background:
      radial-gradient(78% 66% at 50% 52%,
        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, .82) 0%,
        rgba(20, 38, 34, .68) 45%,
        rgba(20, 38, 34, .80) 100%);
  }

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

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

  /* One row, rules between, as the homepage's credential row runs. */
  .km-hero__facts {
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: center;
  }

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

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

  .km-what,
  .km-helps,
  .km-process,
  .km-rel,
  .km-tele { padding: 84px 0 88px; }

  /* REVISED 2026-09-14 (review fix): the band stays stacked until 1080. The
     old image-left grid here set a 320px photograph against a narrow copy
     column that ran four heading lines and left dead space around the
     centred image. Stacked, the photograph goes wide and short (16/9) so it
     does not stand ~490px tall above the copy. The two-column layout and
     its stretch live in the 1080 rule below. */
  .km-tele__grid { gap: 36px; }

  .km-tele__img {
    aspect-ratio: 16 / 9;
    object-fit: cover;
  }

  .km-steps { margin-top: 40px; }

  .km-step { padding-bottom: 32px; }
}

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

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

  .km-what,
  .km-helps,
  .km-process,
  .km-rel,
  .km-tele { padding: 104px 0 108px; }

  /* REVISED 2026-08-29: this was align-items: center with a fixed 4/3 ratio,
     which left a 380x285 photograph floating in the middle of a 588x540 text
     column - the abandoned-column problem the homepage's help grid was fixed
     for (styles.css .ks-help__grid, "align-items: stretch, not start").
     Same fix, same reasoning: stretch the figure and let object-fit: cover
     absorb the ratio change, so the two columns end level however the copy
     wraps. RE-MEASURED after the change: media 380x598, body 548x598. */
  .km-tele__grid {
    grid-template-columns: 380px 1fr;
    gap: 72px;
    align-items: stretch;
  }

  .km-tele__media { min-height: 320px; }   /* a floor, so short copy cannot squash it */

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