/* Personal Courage: About area
   Our approach, Meet the team, Insurance, Contact, Blog (index + posts) and Accessibility.
   Builds on the tokens and components in /assets/css/site.css (including the shared .more
   disclosure, which is styled there and not restyled here).

   Calm standard (docs/CALM-STANDARD.md): generous whitespace, one decorative motif per page
   (the hero), no icon or chip clusters, a readable measure, left-aligned body text.

   Area-scoped class prefixes:
   .belief .principle* .name-story  (approach)   .profile* .team-foot* .creds  (team)
   .ins-*  (insurance)   .contact-*  (contact)   .blog-* .post-*  (blog)   .a11y-*
   Text/background pairs used here are role tokens from site.css: on-dark and on-dark-muted on the
   band; text, muted, label and heading on surface, page and tint. Both themes are checked by
   tools/check-contrast.py. */

/* ======================================================================
   Shared bits
   ====================================================================== */
/* Single-column tracks can't be widened by a long unbreakable string (e.g. the email address)
   on small phones. The multi-column media rules further down override this. */
.profiles, .ins-grid, .contact-grid, .contact-start, .a11y-layout { grid-template-columns: minmax(0, 1fr); }
main a[href^="mailto:"] { overflow-wrap: anywhere; }

/* A quiet row of text links (inside disclosures and at the end of short blocks: Our Approach's fold-out). The team cards use
   it stacked, one link per line, under a label (.about-links--stacked, in the Meet the team section below). */
.about-links { display: flex; flex-wrap: wrap; gap: 0 1.5rem; margin: 0.75rem 0 0; padding: 0; list-style: none; }

/* ======================================================================
   Our approach
   ====================================================================== */
.belief {
  padding: clamp(1.75rem, 1.25rem + 2vw, 2.75rem);
  border-radius: var(--radius-lg);
  background: var(--color-band);
  color: var(--color-on-dark);
}
.belief__text {
  max-width: 14ch;
  margin: 0 0 0.9rem;
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 500;
  font-size: var(--step-3);
  line-height: 1.12;
  color: var(--color-on-dark);
}
.belief__sub { max-width: 30ch; margin: 0; color: var(--color-on-dark-muted); font-size: var(--step-1); line-height: 1.5; }

.principles {
  display: grid;
  gap: clamp(2rem, 1.5rem + 2vw, 3rem) clamp(2rem, 4vw, 4.5rem);
  margin: 0;
  padding: 0;
  list-style: none;
}
@media (min-width: 860px) {
  .principles { grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: start; }
}
.principle { padding-top: 1.25rem; border-top: 1px solid var(--color-border); }
.principle__num {
  display: block;
  margin-bottom: 0.4rem;
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 500;
  font-size: var(--step-1);
  line-height: 1;
  color: var(--color-label);
}
.principle__title { font-size: var(--step-2); margin: 0 0 0.45em; }
.principle > p { max-width: var(--measure); margin-bottom: 0; }

.name-story { max-width: var(--measure); }
.name-story h2 { font-size: var(--step-3); }
.name-story > :last-child { margin-bottom: 0; }

/* ======================================================================
   Meet the team
   ====================================================================== */
.profiles { display: grid; gap: clamp(1rem, 0.75rem + 1vw, 1.5rem); }
@media (min-width: 960px) {
  /* Cards in a row share one height, so a shorter bio never leaves a hole beside a longer one. */
  .profiles { grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: stretch; }
}
.profile {
  display: grid;
  grid-template-columns: 76px minmax(0, 1fr);
  grid-template-areas: "photo head" "body body";
  gap: 1rem 1.1rem;
  align-items: center;
  align-content: start; /* a card stretched to its row's height keeps the spare space at the bottom */
  padding: clamp(1.25rem, 1rem + 1vw, 1.75rem);
  background: var(--color-surface);
  border: 1px solid rgba(var(--edge-rgb), 0.07);
  border-radius: var(--radius);
  box-shadow: var(--shadow-sm);
  scroll-margin-top: calc(var(--header-h) + 1rem);
}
@media (min-width: 560px) {
  .profile {
    grid-template-columns: 112px minmax(0, 1fr);
    grid-template-areas: "photo head" "photo body";
    gap: 0.6rem 1.75rem;
    align-items: start;
  }
}
.profile .headshot { grid-area: photo; width: 100%; max-width: none; margin: 0; }
.profile__head { grid-area: head; min-width: 0; }
.profile__body { grid-area: body; min-width: 0; }
.profile__name { font-size: var(--step-2); margin: 0 0 0.2em; line-height: 1.2; }
.profile__creds {
  display: block;
  margin-top: 0.3em;
  font-family: var(--font-body);
  font-size: 0.6em;
  font-weight: 650;
  letter-spacing: 0.02em;
  color: var(--color-label);
  /* Credentials always sit on their own line under the name, so every card reads the same and a
     long list (Stephani's four) never leaves a comma hanging after the name. The comma stays for
     screen readers (visually hidden), so the heading still reads "Name, credentials". */
}
.profile__role { margin: 0; font-size: 0.9375rem; font-weight: 600; color: var(--color-muted); }
.profile__summary { margin: 0; max-width: var(--measure); }
/* The availability badge under the name and role line (components.availabilityBadge: .profile__status, .chip--status,
   .chip--accepting, .chip--waitlist, .chip--not-accepting) is styled in site.css (section 8, chips) since 2026-10-04,
   when the service pages' "Who You Might Work With" cards began showing it too. */
/* "View <first name>'s Psychology Today profile": the site's quiet arrow link, only when the address is set. */
.profile__pt { margin: 0.35rem 0 0; }

/* The related links at the end of each bio, in two labelled groups, Services then Specialties (card #91;
   docs/briefs/team-links-grouped-2026-10-22.md; Tim, 2026-10-22: "A. Grouped, with labels"). Each group is a small label (the
   site's uppercase label, in its tokens) over a list with one link per line (the arrow links are 44px tall, so the list needs
   no gap of its own). The groups stack, Services first: on phones, and on the page card at every width, whose body beside the
   photo is 390px at 1280 while Stephani's two groups side by side need 494px (measured in
   docs/reviews/team-links-grouped-2026-10-22/built/). Inside the focused card they sit side by side from 640px (the rule is
   in the dialog's 640px block below): the Services column at least as wide as its widest link, so a service name never
   wraps, and Specialties taking the rest; equal halves when the names allow. A group with no links is not built. */
.profile__links { display: grid; grid-template-columns: minmax(0, 1fr); gap: 1rem 2rem; margin: 0.75rem 0 0; }
.profile__links-label { margin: 0; font-family: var(--font-body); font-size: 0.75rem; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: var(--color-label); }
.about-links--stacked { flex-direction: column; gap: 0; margin: 0; }

/* "Read more" brings the card forward (card #60; docs/briefs/team-card-forward-2026-10-21.md; Tim, 2026-10-21). With
   scripting on, /assets/js/team-cards.js turns each card's "Read more about <first name>" into a button that opens a
   native <dialog> holding the whole card, photo included; without it the <details class="more"> above works as built.
   The trigger: the disclosure's look (.more__summary, site.css) on a <button>, so only the button chrome is reset here,
   and the .more wrapper's margin is copied, so the words sit exactly where the disclosure's did. */
.profile__more { margin: 0.75rem 0 0; border: 0; background: none; font-family: inherit; font-size: inherit; line-height: inherit; letter-spacing: inherit; text-align: left; appearance: none; }
/* The focused card: the site's surface, text, border, radius and shadow. No padding of its own: the card inside carries
   it, so a click whose target is the dialog itself is a click on the dimmed area (team-cards.js closes on it). It scrolls
   inside when a bio is long, at most 40rem wide and 85% of the window tall on computers; the phone sheet is below. */
.profile-dialog {
  box-sizing: border-box;
  width: min(40rem, calc(100% - 2rem));
  max-width: none;
  max-height: 85vh;
  max-height: 85dvh;
  padding: 0;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  background: var(--color-surface);
  color: var(--color-text);
  box-shadow: var(--shadow-lg);
  overflow: auto;
  overscroll-behavior: contain;
}
.profile-dialog::backdrop { background: rgba(0, 39, 76, 0.6); }
/* The page behind it does not scroll, and does not shift: the gutter stays where the scrollbar was. */
html.profile-dialog-open { overflow: hidden; scrollbar-gutter: stable; }
/* The lift and zoom (docs/BRIEF.md "Motion": within 200 ms): the card from slightly smaller and transparent to full size,
   the backdrop fading in, both in the site's --dur (180 ms), eased out. Closing is instant. The backdrop's timing is
   written out because a ::backdrop did not read custom properties in every browser. */
.profile-dialog[open] { animation: profile-dialog-in var(--dur) var(--ease) both; }
.profile-dialog[open]::backdrop { animation: profile-dialog-dim 180ms ease-out both; }
@keyframes profile-dialog-in { from { opacity: 0; transform: translateY(16px) scale(0.96); } to { opacity: 1; transform: none; } }
@keyframes profile-dialog-dim { from { opacity: 0; } to { opacity: 1; } }
@media (prefers-reduced-motion: reduce) {
  .profile-dialog[open], .profile-dialog[open]::backdrop { animation: none; }
}
/* The Close button sits at the top right and stays there while the card scrolls under it: a sticky bar of no height and
   no padding (the button's offset is its own margin), so the card starts at the dialog's very top, keeps its own top
   padding, and a card of the sheet's height is exactly the sheet; at rest the button floats over the card's own top
   padding, with the surface behind it. Once the content has scrolled, the strip below takes over. */
.profile-dialog__bar {
  position: sticky; top: 0; z-index: 1;
  display: flex;
  justify-content: flex-end;
  height: 0;
}
.profile-dialog__close {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: none;
  width: 44px;
  height: 44px;
  margin: 0.75rem 0.75rem 0 0;
  padding: 0;
  border: 1px solid var(--color-border);
  border-radius: 50%;
  background: var(--color-surface);
  color: var(--color-heading);
  cursor: pointer;
}
.profile-dialog__close:hover { background: var(--color-tint); border-color: var(--color-border-strong); }
.profile-dialog__close:focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; }
/* The strip behind the button once the content has scrolled (card #95; Tim, 2026-10-22: "let's fix the × button over the
   bio text"; docs/briefs/dialog-close-strip-2026-10-22.md). team-cards.js keeps profile-dialog--scrolled on the dialog while
   its scrollTop is above 0 and takes it off at the top. Under that class alone, the bar's pseudo-element draws a solid strip
   across the card's top: the surface colour, with the border hairline along its bottom edge, laid over the strip's area
   (the bar is the sticky, positioned box it is placed in) and painted under the button (z-index -1 inside the bar's own
   stacking context, which its z-index 1 makes), so the text scrolls beneath the strip and never shows behind or beside
   the button. The strip is 12px above and below the 44px button: its 0.75rem margin, then as much again. The bar itself
   keeps no height, padding, background or border in any state, so nothing in the card moves when the strip comes or goes,
   and at rest nothing is drawn: the card looks exactly as it did. No fade in or out: the text must never show under the
   button, not even for the site's 180 ms, so there is nothing for reduced motion to switch off either. */
.profile-dialog--scrolled .profile-dialog__bar::before {
  content: '';
  position: absolute;
  top: 0; right: 0; left: 0;
  z-index: -1;
  height: calc(44px + 1.5rem);
  background: var(--color-surface);
  border-bottom: 1px solid var(--color-border);
}
/* The card inside: the card's own rules, without the box (the dialog is the box). Phones: the photo at the top, then the
   name, then the body; the name row keeps clear of the Close button. The headshot keeps site.css's square, face-centred
   crop (never cut), at 128px here. Focus lands on the name heading when the dialog opens (tabindex -1), with the ring
   for keyboard users. */
.profile-dialog .profile {
  grid-template-columns: minmax(0, 1fr);
  grid-template-areas: "photo" "head" "body";
  gap: 1rem;
  align-items: start;
  padding: clamp(1.25rem, 1rem + 1vw, 1.75rem);
  border: 0;
  border-radius: 0;
  background: none;
  box-shadow: none;
  scroll-margin-top: 0;
}
.profile-dialog .profile .headshot { width: 128px; max-width: 128px; margin: 0; }
.profile-dialog .profile__head { padding-right: 3rem; }
/* The summary reads as wide as the bio under it (the page card keeps its measure, .profile__summary above). */
.profile-dialog .profile__summary { max-width: none; }
.profile-dialog .profile__name:focus-visible { outline: 3px solid var(--focus); outline-offset: 4px; border-radius: var(--radius-xs); }
.profile-dialog .profile__bio { margin-top: 1rem; }
.profile-dialog .profile__bio > :last-child { margin-bottom: 0; }
@media (min-width: 640px) {
  .profile-dialog .profile { grid-template-columns: 128px minmax(0, 1fr); grid-template-areas: "photo head" "body body"; gap: 1.25rem 1.75rem; align-items: center; }
  .profile-dialog .profile__body { align-self: start; }
  /* The two link groups side by side (card #91; the comment at .profile__links above). */
  .profile-dialog .profile__links { grid-template-columns: minmax(max-content, 1fr) minmax(0, 1fr); }
}
/* Phones (under 640px, the site's breakpoint): a full-screen sheet, the full visible height (100dvh, 100vh where dvh is
   unknown), no rounded outer corners, the safe areas respected; the content scrolls inside, the Close button stays at
   the top. The card fills the sheet (at least its height, padding included): on a sheet there is no outside, and a tap
   on the dialog's own box is the dimmed-area close (team-cards.js), so a short bio must leave no bare sheet below it. */
@media (max-width: 639.98px) {
  .profile-dialog {
    width: 100%;
    max-width: none;
    height: 100vh;
    height: 100dvh;
    max-height: 100vh;
    max-height: 100dvh;
    margin: 0;
    border: 0;
    border-radius: 0;
    box-shadow: none;
  }
  .profile-dialog__close { margin: calc(0.75rem + env(safe-area-inset-top, 0px)) calc(0.75rem + env(safe-area-inset-right, 0px)) 0 0; }
  /* The strip takes in the top safe area, as the button's margin does (card #95). */
  .profile-dialog--scrolled .profile-dialog__bar::before { height: calc(44px + 1.5rem + env(safe-area-inset-top, 0px)); }
  .profile-dialog .profile { min-height: 100%; box-sizing: border-box; padding: calc(1.25rem + env(safe-area-inset-top, 0px)) calc(1.25rem + env(safe-area-inset-right, 0px)) calc(1.5rem + env(safe-area-inset-bottom, 0px)) calc(1.25rem + env(safe-area-inset-left, 0px)); }
}
/* Windows high contrast: the dialog keeps a visible border (the phone sheet drops its own), the Close button its own, and
   the strip a visible bottom edge (card #95). */
@media (forced-colors: active) {
  .profile-dialog { border: 2px solid CanvasText; }
  .profile-dialog__close { border: 1px solid ButtonText; }
  .profile-dialog--scrolled .profile-dialog__bar::before { border-bottom-color: CanvasText; }
}

.team-foot { margin-top: clamp(1.75rem, 1.25rem + 1.5vw, 2.5rem); max-width: 860px; }
.team-foot__careers { display: flex; flex-wrap: wrap; align-items: center; gap: 0.25rem 0.75rem; margin: 0.5rem 0 0; color: var(--color-muted); }
.creds { display: grid; gap: 1rem; margin: 0.5rem 0 1rem; }
@media (min-width: 720px) { .creds { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.1rem 2rem; } }
.creds dt { margin: 0; font-weight: 700; color: var(--color-heading); }
.creds abbr { text-decoration: none; }
.creds dd { margin: 0.25rem 0 0; color: var(--color-muted); font-size: 0.9375rem; }
.team-foot__creds abbr { text-decoration: none; font-weight: 650; }

/* ======================================================================
   Insurance
   ====================================================================== */
.ins-grid { display: grid; gap: clamp(1rem, 0.75rem + 1vw, 1.5rem); }
@media (min-width: 960px) {
  .ins-grid { grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr); align-items: start; }
}
.ins-panel {
  padding: clamp(1.35rem, 1rem + 1.5vw, 2.25rem);
  background: var(--color-surface);
  border: 1px solid rgba(var(--edge-rgb), 0.07);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
}
.ins-panel--quiet { background: transparent; border-color: var(--color-border); box-shadow: none; }
.ins-panel__title { font-size: var(--step-2); margin: 0 0 1rem; }
.ins-panel > p { max-width: 60ch; }
.ins-panel > :last-child { margin-bottom: 0; }
.ins-panel__note { margin: 1.25rem 0 0; }
.ins-panel__link a { display: inline-flex; align-items: center; min-height: 44px; font-weight: 650; }

/* ======================================================================
   Contact
   ====================================================================== */
.contact-crisis { align-self: center; }
.contact-crisis .crisis__links a { font-size: 1.0625rem; }

.contact-grid { display: grid; gap: clamp(1rem, 0.75rem + 1vw, 1.5rem); }
@media (min-width: 640px) and (max-width: 1023.98px) {
  .contact-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .contact-grid > :first-child { grid-column: 1 / -1; }
}
@media (min-width: 1024px) { .contact-grid { grid-template-columns: 1.15fr 1fr 1fr; } }
.contact-panel {
  padding: clamp(1.35rem, 1rem + 1.25vw, 2rem);
  border-radius: var(--radius-lg);
  background: var(--color-page);
  border: 1px solid rgba(var(--edge-rgb), 0.07);
}
.contact-panel__title {
  margin: 0 0 1rem;
  font-family: var(--font-body);
  font-size: 0.8125rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--color-label);
}
.contact-panel .contact-list a { font-weight: 650; }
.contact-privacy { margin: 1.25rem 0 0; max-width: 70ch; color: var(--color-muted); font-size: 0.9375rem; }

.contact-start { display: grid; gap: 2rem; }
@media (min-width: 900px) {
  .contact-start { grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); align-items: center; gap: clamp(2.5rem, 5vw, 5rem); }
}
.contact-start__head { margin-bottom: 1rem; }
.contact-start__list { display: grid; gap: 0.75rem; margin: 0; padding: 0; list-style: none; }
.contact-start__list li { max-width: 60ch; }
.contact-start .quote blockquote p { font-size: var(--step-2); }

/* ======================================================================
   Blog index
   ====================================================================== */
.blog-list { display: grid; gap: 1.25rem; max-width: 760px; margin: 0; padding: 0; list-style: none; }
.blog-item { gap: 0.6rem; padding: clamp(1.5rem, 1.1rem + 1.5vw, 2.25rem); }
.blog-item .post-meta { margin: 0; }
.blog-item__title { font-size: var(--step-3); line-height: 1.15; margin: 0; }
.blog-item__excerpt { margin: 0; color: var(--color-muted); max-width: 60ch; }

/* ======================================================================
   Blog post
   ====================================================================== */
.post-title { font-size: var(--step-4); max-width: 22ch; }
.post-header .post-meta { gap: 0.25rem 0.6rem; margin-top: 1.25rem; padding-top: 1.1rem; border-top: 1px solid var(--color-border); }
.post-header .post-meta > span + span::before { content: '\00B7'; margin-right: 0.6rem; }

.post-prose > p:first-child { font-size: var(--step-1); line-height: 1.55; color: var(--color-text); }
.post-prose strong { color: var(--color-heading); }

.post-about {
  margin-top: var(--space-2xl);
  padding: clamp(1.35rem, 1rem + 1.5vw, 2.25rem);
  border-radius: var(--radius);
  background: var(--color-surface);
  border: 1px solid rgba(var(--edge-rgb), 0.07);
  border-left: 4px solid var(--amber-400);
}
.post-about__title { font-size: var(--step-2); margin-bottom: 0.4em; }
.post-about p { color: var(--color-muted); max-width: 60ch; }
.post-about__links { --cluster-gap: 0 1.75rem; }
.post-back { margin: 1.75rem 0 0; }
.post + .cta-band-wrap { padding-top: 0; }

/* ======================================================================
   Accessibility statement
   ====================================================================== */
.a11y-layout { display: grid; gap: var(--space-xl); }
.a11y-aside .contact-list a { overflow-wrap: anywhere; }
@media (min-width: 1024px) {
  .a11y-layout { grid-template-columns: minmax(0, 1fr) minmax(0, 400px); gap: clamp(3rem, 5vw, 5rem); align-items: start; }
  .a11y-aside { position: sticky; top: calc(var(--header-h) + 1.5rem); }
}
.a11y-prose > h2:first-child { margin-top: 0; }
.a11y-list li + li { margin-top: 0.6rem; }
.a11y-aside .contact-panel { background: var(--color-surface); }
.a11y-aside .contact-list { font-size: 0.9375rem; }
.a11y-aside__rule { margin: 1.25rem 0; }
.a11y-aside .nap { margin-bottom: 0; }
.a11y-aside__more { margin: 1rem 0 0; }

/* ======================================================================
   Print
   ====================================================================== */
@media print {
  .profile, .ins-panel { box-shadow: none; }
}