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

   v1 (2026-09-14): new page, modelled on /menopause/ (menopause.css is the
   pattern for the hero, the scrim measurement method, the ink band and the
   reading column).

   CONTRACT: every selector in this file is a kr- 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 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 shared [data-ks-reveal] fade and the
   shared control hovers already live inside the reduced-motion gate in
   /styles.css.
   ========================================================================== */

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

   dock.webp: two empty chairs and two mugs on a lake dock at first light.
   The frame is split: dark pines down the left third, and a pale sky and a
   lit, misty lake across the middle and the right. The pale half is the
   problem for cream type, so the copy column is pulled over the darker side
   where the crop allows it (phone) and the scrim carries the rest.

   CONTRAST: see the MEASURED block directly above .kr-hero__scrim.
   -------------------------------------------------------------------------- */
.kr-hero {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  background: var(--ink);
}

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

.kr-hero__img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  /* Below 720px the box is taller than 4:3, so cover scales by HEIGHT and
     the crop is purely horizontal: only the X value acts. 32% keeps the left
     chair, the pines and both mugs in frame and slides the lit lake on the
     right mostly out of it. Above 720 the band is wider than 4:3, cover
     scales by width, and the Y value below takes over. */
  object-position: 32% 50%;
}

/* MEASURED 2026-09-14 by Builder E (canvas-composite method), then
   RE-MEASURED in fix pass G. The subhead did not change here, but the three
   pages are now recorded with one method (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 375x600, object-position 32% 50%, linear .78 / .56 / .80,
            subhead 3 lines, h1 3 lines
       #CFE0D4 .ks-link--light phone number ..... 5.03:1  <- page worst case
       .82 cream wordmark sub ................... 5.30:1
       .93 cream subhead ........................ 5.33:1
       .93 cream "or call" ...................... 6.68:1
       .90 cream hero label ..................... 6.75:1
       .86 cream fact row ....................... 6.91:1
       --cream h1 ............................... 8.35:1

     720px  hero 720x547, object-position 50% 70%, linear .74 / .52 / .78,
            subhead 3 lines, h1 2 lines
       .93 cream subhead ........................ 5.07:1  <- worst at 720
       --cream h1 ............................... 5.31:1
       .90 cream hero label ..................... 5.64:1
       (phone link 6.81, everything else 7.19 and up)

     1440px hero 1440x605, object-position 50% 70%, linear .74 / .52 / .78,
            subhead 3 lines, h1 2 lines
       --cream h1 ("Arkansas") .................. 5.50:1  <- worst at 1440
       .93 cream subhead ........................ 5.66:1
       #CFE0D4 phone link ....................... 5.72:1
       (header phone 6.51, everything else 6.61 and up)

   Every pair clears 4.5:1. The first pass (.82 / .64 phone, .82 / .70 wide)
   measured 6.00 / 7.21 / 7.39 worst and flattened the frame to a green murk
   at 1440, so the mid-stops were stepped down to these. */
.kr-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%),
    linear-gradient(180deg,
      rgba(20, 38, 34, .78) 0%,
      rgba(20, 38, 34, .56) 45%,
      rgba(20, 38, 34, .80) 100%);
}

/* 80px of top padding clears the nav sitting on the photograph (76px row). */
.kr-hero__inner {
  position: relative;
  z-index: 2;
  padding-top: 80px;
  padding-bottom: 52px;
  text-align: center;
}

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

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

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

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

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

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

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

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

.kr-hero__facts {
  display: flex;
  flex-direction: column;
  align-items: center;
  margin: 18px auto 0;
  padding: 0;
  list-style: none;
}

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

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

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

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

   hero (photo) -> cream (#kr-why) -> sand (#kr-who) -> cream (#kr-affirm)
   -> sand (#kr-approach) -> cream (#kr-season) -> sand (#kr-safety)
   -> ink (#kr-tele) -> cream (.ks-faq) -> sand (.ks-start) -> ink (footer).
   No two neighbours share a ground. Padding matches .km- sections so the
   rhythm reads as one site.
   -------------------------------------------------------------------------- */
.kr-why,
.kr-affirm,
.kr-season { padding: 56px 0 60px; background: var(--cream); }

.kr-who,
.kr-approach,
.kr-safety { padding: 56px 0 60px; background: var(--sand); }

/* The reading column: one measure for the whole page, as on /menopause/. */
.kr-body {
  max-width: 680px;
  margin: 0 auto;
}

/* The section's one held beat: display face, centred, hairline rules. Not a
   quotation and carries no attribution. */
.kr-pull {
  margin: 30px 0;
  padding: 4px 0 4px 20px;
  max-width: 34rem;
  border-left: 2px solid var(--clay-text);
}

.kr-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 short quotes: a sage rule on the leading edge, no box, so a quote
   never reads as a testimonial card. Display face, supporting tier. */
.kr-quote {
  margin: 28px 0 0;
  padding: 4px 0 4px 20px;
  border-left: 2px solid var(--sage);
}

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

/* Her approach list, quoted in full with its source named. Centred between
   hairlines so the list of names is the section's anchor, not a paragraph. */
.kr-cite {
  margin: 0 0 30px;
  padding: 24px 0;
  border-top: 1px solid var(--ks-line);
  border-bottom: 1px solid var(--ks-line);
  text-align: center;
}

.kr-cite__quote { margin: 0; }

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

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

/* The affirming statement, said once and plainly: the reading face one step
   up and in --ink, so it is found at a glance without being festooned. */
.kr-affirm__line {
  margin: 0 0 20px;
  max-width: 40rem;
  font-family: var(--ks-font-display);
  font-optical-sizing: auto;
  font-weight: 400;
  font-size: clamp(1.25rem, 4.8vw, 1.5rem);
  line-height: 1.45;
  letter-spacing: -.01em;
  color: var(--ink);
  text-wrap: pretty;
}

/* Keeps a hyphenated term ("sex-positive") from breaking across a line in the
   display face, where a dangling "sex-" reads badly. */
.kr-nw { white-space: nowrap; }

/* Compact caveat line under the list (cost, insurer). Read second by design. */
.kr-note {
  margin: 28px 0 0;
  max-width: 62ch;
  font-size: .9375rem;
  line-height: 1.66;
  color: var(--body);
}

/* A section's one outbound link on its own line, with a full 44px target. */
.kr-more { margin: 22px 0 0; }

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

/* The safety note: calm, not an alarm. A clay-text rule on the leading edge
   is the only warm accent, and the line sits in --ink at the reading size. */
.kr-safety__crisis {
  margin: 28px 0 0;
  padding: 6px 0 6px 20px;
  border-left: 2px solid var(--clay-text);
}

.kr-safety__p {
  margin: 0;
  max-width: 58ch;
  font-size: 1.0625rem;
  font-weight: 600;
  line-height: 1.66;
  color: var(--ink);
}

/* The numbers carry a 44px target on a phone without changing line rhythm
   on wider screens: padding grows the hit area, negative margin cancels it. */
.kr-safety__p .ks-link {
  display: inline-block;
  padding: 10px 4px;
  margin: -10px -4px;
}

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

   BRAND.md PINNED REFERENCE rule 2. Type sits in its own column beside the
   photograph, never on it, so contrast is the flat --ink case at every width
   (the same figures menopause.css records for .km-tele):
     --cream h2 .......................... 11.22:1
     rgba(250,246,239,.90) paragraphs ..... 9.50:1
     rgba(250,246,239,.90) label .......... 9.50:1
   -------------------------------------------------------------------------- */
.kr-tele {
  padding: 56px 0 60px;
  background: var(--ink);
}

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

.kr-tele__media { margin: 0; }

.kr-tele__img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  /* lounge.webp: sofa across the middle, a laptop on the coffee table at
     x ~40-62%, the lit floor lamp at the right (x ~87%, shade y ~13-27%). X
     bites at the tall 1080 stretch (about 41-45% of the frame's width
     shows), where 65% keeps the whole laptop, both cushions' inner halves
     and the lamp's light on the wall; 70% cut the laptop at 1080. Y bites only at the stacked
     16:9 crop (720-1079), where 55% keeps the cushions, the laptop and the
     lamp's light on the wall. */
  object-position: 65% 55%;
  border-radius: var(--ks-radius);
  border: 1px solid rgba(250, 246, 239, .18);
}

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

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

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

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

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

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

  /* Wider than 4:3 from here, so cover scales by width and Y bites: 70%
     drops the empty sky and keeps both chairs and the mugs in the band. */
  .kr-hero__img { object-position: 50% 70%; }

  .kr-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, .74) 0%,
        rgba(20, 38, 34, .52) 45%,
        rgba(20, 38, 34, .78) 100%);
  }

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

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

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

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

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

  .kr-why,
  .kr-who,
  .kr-affirm,
  .kr-approach,
  .kr-season,
  .kr-safety,
  .kr-tele { padding: 84px 0 88px; }

  .kr-cite { padding: 30px 0; }

  .kr-safety__p .ks-link {
    padding: 0;
    margin: 0;
  }

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

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

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

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

  .kr-why,
  .kr-who,
  .kr-affirm,
  .kr-approach,
  .kr-season,
  .kr-safety,
  .kr-tele { padding: 104px 0 108px; }

  /* Stretch the figure to the copy column's height (the menopause.css
     2026-08-29 fix), so a short photograph never floats beside long copy. */
  .kr-tele__grid {
    grid-template-columns: 380px 1fr;
    gap: 72px;
    align-items: stretch;
  }

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

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