/* Finding Balance Counseling
   Hearth, not horizon. Warm oat ground, deep indigo enclosures, brass lamplight.
   The ground is warm because the alternative reads clinical: cool blue is the
   palette of hospitals and insurers, which is the one thing a therapy practice
   cannot afford to look like. It also lets Reem's cream-paper watercolors sit in
   the page rather than on it. Body text is set in a serif because the site
   should read like a book in a chair, not a brochure. Sections are deliberately
   far apart: one idea per screenful. */

:root {
  --dusk: #f1ece3;
  --dusk-2: #e5ddd0;
  --indigo: #1f2d38;
  --ink: #2a2620;
  --ink-soft: #5c5346;
  --lamp: #b08a3c;
  --lamp-ink: #7a5c1f;        /* brass that passes AA as text on the light ground */
  --link: #2f6a70;
  --juniper: #7a6a4e;
  --hair: rgba(42, 38, 32, 0.18);

  --measure: 33rem;                    /* ~62 characters of serif */
  --gutter: clamp(1.35rem, 5vw, 3.5rem);
  --band: clamp(2.5rem, 5vw, 4.5rem);  /* the air between ideas */
  --radius: 14px;

  --serif: "Newsreader", "Iowan Old Style", Georgia, serif;
  --sans: "Karla", "Helvetica Neue", Arial, sans-serif;
}

*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background-color: var(--dusk);
  /* Paper grain, then a warm pool of light at the top of the page. */
  background-image:
    url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.82' numOctaves='3'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='180' height='180' filter='url(%23g)' opacity='0.35'/%3E%3C/svg%3E"),
    radial-gradient(130% 70% at 50% -15%, rgba(176, 138, 60, 0.14), rgba(176, 138, 60, 0) 72%);
  background-repeat: repeat, no-repeat;
  background-size: 180px 180px, 100% 48rem;
  color: var(--ink);
  font: 400 1.125rem/1.8 var(--serif);
}

h1, h2, h3 {
  font-family: var(--serif);
  font-weight: 400;
  line-height: 1.14;
  letter-spacing: -0.014em;
  margin: 0 0 0.7em;
  text-wrap: balance;
}
h1 { font-size: clamp(2.15rem, 5.4vw, 3.45rem); text-wrap: pretty; }
h2 { font-size: clamp(1.7rem, 3.4vw, 2.35rem); margin-top: 0; }
h3 { font-size: 1.35rem; }
h4 {
  font-family: var(--sans);
  font-size: 0.98rem;
  font-weight: 700;
  letter-spacing: 0;
  margin: 0 0 0.5em;
}

p, li { max-width: var(--measure); }
p { margin: 0 0 1.15em; }

a { color: var(--link); text-decoration-thickness: 1px; text-underline-offset: 0.2em; }
a:hover { color: var(--ink); }

:focus-visible { outline: 2px solid var(--lamp); outline-offset: 3px; border-radius: 3px; }

img, svg { max-width: 100%; height: auto; display: block; }

/* ---------- layout ---------- */

.shell { width: min(70rem, 100%); margin: 0 auto; padding-inline: var(--gutter); }

.band { padding-block: var(--band); }

/* Vertical rhythm. --band is the air around one idea, but every section was
   paying it twice: its own top padding plus the previous section's bottom,
   which put 304px of nothing at each seam on a 1280px screen. The gap is one
   band's worth, owned by whichever side it belongs to. */

/* Plain after plain. The first one's bottom padding used to be the whole gap,
   with nothing below it, which was fine while the seam was invisible. Now a
   hairline is drawn at the top of the second section, so all of the air sat
   above the line and the heading beneath it touched the rule. Same total gap,
   split either side, line in the middle of it. */
.band:not(.band--sand):not(.band--night):has(+ .band:not(.band--sand):not(.band--night)) {
  padding-bottom: calc(var(--band) * 0.5);
}
.band:not(.band--sand):not(.band--night) + .band:not(.band--sand):not(.band--night) {
  padding-top: calc(var(--band) * 0.5);
}

/* A change of background separates two ideas by itself. The coloured block
   still needs air inside it so the colour has somewhere to sit, but it does
   not also need a full band of air outside. */
.band--sand, .band--night { padding-block: calc(var(--band) * 0.72); }
.band:not(.band--sand):not(.band--night):has(+ .band--sand),
.band:not(.band--sand):not(.band--night):has(+ .band--night) {
  padding-bottom: calc(var(--band) * 0.6);
}
.band--sand + .band:not(.band--sand):not(.band--night),
.band--night + .band:not(.band--sand):not(.band--night) {
  padding-top: calc(var(--band) * 0.6);
}

/* The breadcrumb already separates the masthead from the page, so a full band
   of air beneath it is dead space rather than breathing room. */
main > section:first-child { padding-top: calc(var(--band) * 0.4); }

/* A hairline at every seam between sections, the same rule that sits under the
   masthead. Drawn as a pseudo-element rather than a border because some sections
   are the .shell and some contain one, and a border would take the width of
   whichever box it landed on; this way both shapes get the same line. Against a
   dark band it disappears, which is fine: there the change of background is
   already the seam. */
.band + .band, .hero + .band { position: relative; }
.band + .band::before, .hero + .band::before {
  content: "";
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  width: min(70rem, 100%);
  border-top: 1px solid var(--hair);
}

.band--sand { background: var(--dusk-2); }

/* An enclosure. Used two or three times a site, never more. */
.band--night {
  background: var(--indigo);
  color: rgba(226, 236, 242, 0.9);
}
.band--night h1, .band--night h2, .band--night h3, .band--night h4 { color: #eef4f9; }
.band--night a { color: #e0bd7e; }
.band--night a:hover { color: #fff; }
.band--night .answer--card {
  background: rgba(226, 236, 242, 0.08);
  border-left-color: var(--lamp);
}
.band--night .facts div { border-color: rgba(226, 236, 242, 0.22); }
.band--night .facts dt { color: rgba(226, 236, 242, 0.65); }
.band--night .plain li::before { background: var(--lamp); }
.band--night .note { color: rgba(226, 236, 242, 0.72); border-color: rgba(226, 236, 242, 0.35); }

.split { display: grid; gap: clamp(2rem, 5vw, 4.5rem); grid-template-columns: 1fr; }
@media (min-width: 56rem) {
  .split { grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); align-items: start; }
  .split--aside { grid-template-columns: minmax(0, 1fr) minmax(0, 16rem); }
}

.skip { position: absolute; left: -9999px; background: var(--indigo); color: var(--dusk); padding: 0.75rem 1rem; }
/* Visible to assistive technology only. Carries "opens in a new tab", which a
   sighted reader can see for themselves and a screen reader cannot. */
.vh {
  position: absolute;
  width: 1px; height: 1px;
  margin: -1px; padding: 0; border: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
}
.skip:focus { left: 1rem; top: 1rem; z-index: 20; }

/* ---------- header ---------- */

.masthead { border-bottom: 1px solid var(--hair); }
.masthead__inner {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0.75rem 2rem;
  padding-block: 1.25rem;
}
.wordmark {
  font-family: var(--serif);
  font-size: 1.4rem;
  color: var(--ink);
  text-decoration: none;
  line-height: 1.1;
}
.wordmark span {
  display: block;
  font-family: var(--sans);
  /* 0.9, not 0.72: this is the clinician's name, the one thing in the masthead
     a returning visitor looks for, and it was set smaller than the nav. */
  font-size: 0.9rem;
  letter-spacing: 0.06em;
  color: var(--ink-soft);
  margin-top: 0.3rem;
}
.nav { margin-left: auto; }
.nav ul { list-style: none; display: flex; flex-wrap: wrap; gap: 0.4rem 1.15rem; margin: 0; padding: 0; }
.nav li { max-width: none; }
.nav a { font-family: var(--sans); font-size: 0.9rem; color: var(--ink-soft); text-decoration: none; }
.nav a:hover { color: var(--ink); text-decoration: underline; }
.nav a[aria-current="page"] { color: var(--ink); border-bottom: 2px solid var(--lamp); }

.nav__toggle {
  display: none;
  margin-left: auto;
  background: none;
  border: 1px solid var(--hair);
  border-radius: 999px;
  color: var(--ink);
  font: 400 0.92rem var(--sans);
  padding: 0.4rem 1rem;
}
@media (max-width: 55.99rem) {
  .nav__toggle { display: block; }
  .nav { flex-basis: 100%; margin-left: 0; }
  .nav[data-open="false"] { display: none; }
  .nav ul { flex-direction: column; gap: 0; padding-bottom: 0.5rem; }
  .nav a { display: block; padding: 0.55rem 0; }
}

/* ---------- hero ---------- */

.hero { padding-block: clamp(3rem, 8vw, 6rem) calc(var(--band) * 0.8); }
.hero + .band:not(.band--sand):not(.band--night) { padding-top: 0; }
.hero__grid { display: grid; gap: clamp(2rem, 5vw, 4rem); grid-template-columns: 1fr; align-items: center; }
@media (min-width: 54rem) {
  .hero__grid { grid-template-columns: minmax(0, 1fr) 19rem; }
}
/* On /about/ the portrait sits level with the first line of text rather than
   floating mid-column; centring reads as intended on the home page, where
   the text column is much taller than the portrait, and as a misplacement
   here, where the two are nearly the same height. */
.hero__grid--top { align-items: start; }
/* 21rem, not 19: the emblem is square where the window it replaced was portrait, so it
   needs a little more width to carry the same visual weight beside the h1. */
.hero__art { justify-self: center; width: 100%; max-width: 19rem; }
/* The portrait is 621px wide, so 19rem is where it stops being a 2x image.
   Radius and shadow to match every other photograph on the site. */
.hero__art img { border-radius: var(--radius); box-shadow: 0 18px 44px -24px rgba(31, 45, 56, 0.5); }

/* Eyebrow: the small orienting line above a heading, as on tomsscuba.com.
   Sentence case, not tracked-out caps. */
.eyebrow {
  font-family: var(--sans);
  font-size: 0.85rem;
  color: var(--ink-soft);
  margin: 0 0 0.6rem;
  max-width: none;
}
.band--night .eyebrow { color: rgba(226, 236, 242, 0.7); }

/* Cards that are not links: personas, inclusions, pathway steps. */
.cards { display: grid; gap: 1.25rem; margin: 2rem 0; }
@media (min-width: 44rem) { .cards { grid-template-columns: 1fr 1fr; } }
/* Three cards in a two-up grid strand one on its own row beside a gap.
   54rem, not 44: three columns of this card need the wider breakpoint
   before the text starts stacking a word per line. */
@media (min-width: 54rem) { .cards--three { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.cards > div {
  background: rgba(255, 255, 255, 0.45);
  border: 1px solid var(--hair);
  border-radius: var(--radius);
  padding: 1.5rem 1.6rem;
}
.cards h3 { margin-bottom: 0.4rem; }

/* The associate roster. A face beside the text rather than above it, so six
   cards stay scannable, and sized well under each headshot's own width: the
   smallest is 532px, which is 4x at this size. */
.cards--roster > div { display: grid; grid-template-columns: 8rem minmax(0, 1fr); gap: 1.25rem; }
.cards--roster img {
  width: 8rem;
  aspect-ratio: 4 / 5;
  object-fit: cover;
  object-position: center top;
  border-radius: var(--radius);
}
/* .cards p has no margin, which is right for a one-paragraph card and wrong
   for these. */
.cards--roster p + p { margin-top: 0.8rem; }
@media (max-width: 30rem) {
  .cards--roster > div { grid-template-columns: 1fr; }
}
.cards p { margin: 0; color: var(--ink-soft); }
.band--night .cards > div {
  background: rgba(226, 236, 242, 0.07);
  border-color: rgba(226, 236, 242, 0.22);
}
.band--night .cards p { color: rgba(226, 236, 242, 0.75); }

/* "You are here" marker in the pathway block. */
.cards > div[data-here="true"] { border-color: var(--lamp); border-width: 2px; }
.cards > div[data-here="true"] h3::after {
  content: " — you are here";
  font-family: var(--sans);
  font-size: 0.8rem;
  color: var(--lamp);
}

/* ---------- direct-answer block ---------- */

/* The direct-answer passage. Plain by default: the rule and panel framed it
   apart from surrounding content, and on most pages it opens the page with
   nothing to be framed against. */
.answer {
  margin: 0 0 2.25rem;
  /* The block itself runs the shell's width: a 39rem column under a full-width
     h1 read as an indent rather than a measure. The paragraphs inside it are
     capped at 48rem, the same as the home hero, which measured about 88
     characters a line on 28 pages instead of 140. */
  max-width: none;
}
.answer p { margin: 0; max-width: 48rem; }
.answer p + p { margin-top: 0.75em; }

/* Kept where a page introduces a person and their own words follow, so the
   summary needs marking off from them. */
.answer--card {
  border-left: 3px solid var(--lamp);
  background: rgba(255, 255, 255, 0.5);
  border-radius: 0 var(--radius) var(--radius) 0;
  padding: 1.4rem 1.6rem;
}
.band--sand .answer--card { background: rgba(255, 255, 255, 0.42); }

/* ---------- facts ---------- */

.facts { margin: 0 0 2rem; max-width: 39rem; container-type: inline-size; }
.facts div { display: grid; grid-template-columns: 1fr; gap: 0.1rem 1.5rem; padding: 0.75rem 0; border-top: 1px solid var(--hair); }
.facts div:last-child { border-bottom: 1px solid var(--hair); }
@container (min-width: 30rem) { .facts div { grid-template-columns: 11rem 1fr; } }
@supports not (container-type: inline-size) {
  @media (min-width: 56rem) { .facts div { grid-template-columns: 11rem 1fr; } }
}
.facts dt { font-family: var(--sans); font-size: 0.88rem; color: var(--ink-soft); padding-top: 0.25rem; }
.facts dd { margin: 0; max-width: none; }

/* ---------- lists ---------- */

.plain { list-style: none; padding: 0; margin: 0 0 1.5rem; }
.plain li { padding: 0.3rem 0 0.3rem 1.5rem; position: relative; }
.plain li::before {
  content: "";
  position: absolute; left: 0; top: 1.05em;
  width: 0.65rem; height: 3px;
  background: var(--juniper);
  border-radius: 3px;
}

/* ---------- the book and the seven-step practice ---------- */

.lede {
  font-family: var(--serif);
  font-style: italic;
  font-size: clamp(1.15rem, 2.6vw, 1.5rem);
  color: var(--ink-soft);
  margin: 0 0 1.2rem;
}

.section-intro { max-width: 46rem; color: var(--ink-soft); }

/* Step cards on /book/. Auto-fit so seven cards never leave one orphan on a row. */
/* Capped at 50rem so three columns land near 250px. The narrowest watercolor
   is 506px, so anything wider than that starts upscaling. */
.step-cards {
  display: grid;
  gap: 1.5rem;
  grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr));
  max-width: 50rem;
  margin: 2.5rem 0;
}
.step-card {
  background: rgba(255, 255, 255, 0.45);
  border: 1px solid var(--hair);
  border-radius: var(--radius);
  overflow: hidden;
  display: flex;
  flex-direction: column;
}
.step-card img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; }
.step-card__body { padding: 1.25rem 1.4rem 1.5rem; }
.step-card__num {
  font-family: var(--sans);
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--lamp-ink);
}
.step-card h3 { margin: 0.3rem 0 0.4rem; }
.step-card p { margin: 0 0 0.6rem; color: var(--ink-soft); font-size: 0.97rem; }
.step-card__quote {
  font-family: var(--serif);
  font-style: italic;
  color: var(--link);
}
.band--night .step-card__quote { color: var(--lamp); }
.band--night .step-card__num,
.band--night .steps > li::before,
.band--night .faq summary::after { color: var(--lamp); }

/* Table captions inherit --ink-soft, which is unreadable on the indigo bands. */
.band--night caption { color: rgba(226, 236, 242, 0.72); }

/* A row of small photographs. Sized deliberately modestly: these came from a
   phone at roughly 310px, so anything larger would show it. */
/* Gallery rows carry the same hazard as .band-art did: a column that fits the
   layout can still be wider than the picture in it. Each row is capped by the
   smallest file it holds, so nothing upscales. The watercolors are 506px at
   their narrowest, which is 15rem; the trail photographs are 310px, 9.5rem. */
.photo-row {
  display: grid;
  gap: 1.1rem;
  justify-content: center;
  grid-template-columns: repeat(auto-fit, minmax(11rem, 15rem));
  margin: 2.5rem 0 0;
  /* Wide enough for four across, so a four-up row does not orphan its last
     picture on a line of its own. */
  max-width: 48rem;
}
.photo-row figure { margin: 0; }
.photo-row img {
  width: 100%;
  aspect-ratio: 4 / 5;
  object-fit: cover;
  border-radius: var(--radius);
  box-shadow: 0 14px 34px -22px rgba(31, 45, 56, 0.5);
}
/* Landscape shots crop badly to the portrait ratio above. Equal specificity to
   .photo-row img, so this has to sit after it. */
.photo-row--wide img { aspect-ratio: 4 / 3; }
/* Between tablet and desktop the four-up row would drop to 3 + 1 and orphan its
   last picture, so it pairs off instead. The three-up row still fits across. */
@media (max-width: 58rem) {
  .photo-row:not(.photo-row--wide) { grid-template-columns: repeat(2, 1fr); }
}
/* On a phone the columns fall below the 11rem minimum and auto-fit collapses to
   one, which is four full-width pictures to scroll past. Two is plenty. */
@media (max-width: 30rem) {
  .photo-row { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.7rem; }
}

/* Page art. Reem's book watercolors reused as section imagery. */
.band-art {
  width: 100%;
  max-width: 22rem;
  margin: 2.5rem auto;
  border-radius: var(--radius);
  box-shadow: 0 18px 44px -24px rgba(31, 45, 56, 0.5);
}
/* At the edges of a section the band padding already supplies the air, so the
   margin would only double it. Everywhere else a picture keeps both sides. */
.band-art:first-child { margin-top: 0; }
.band-art:last-child { margin-bottom: 0; }
/* A caption belongs to its picture and stays close to it. */
.band-art:has(+ .caption) { margin-bottom: 0.7rem; }
/* The variants change width only. Spacing is the same question for all of them. */
.band-art--wide { max-width: 34rem; }
/* Capped at the photograph's own width so it is never upscaled. */
.band-art--small { max-width: 20rem; margin-top: 0; }
/* Landscape photographs, which need the full content width rather than the
   portrait-shaped column the watercolors sit in. */
.band-art--photo { max-width: 47rem; }
/* The trail and paddock photographs are 368 to 480px on their long edge, so
   11.5rem is the widest any of them renders without softening on a 2x screen.
   Left-aligned and tight to the text because these sit inside a split column
   beside prose, not centered in a band of their own. */
/* Centred under a centred picture, rather than ranged left under its
   left edge, when the caption is a label and not a sentence. */
.caption--center { text-align: center; max-width: none; }
.band-art--inset { max-width: 11.5rem; margin: 0 0 1.4rem; }

/* A photograph that does not exist yet. Sized and positioned like the real one
   so the layout around it is already right, and loud enough that nobody mistakes
   it for a design element. Deleted along with the shortcode once the pictures
   arrive. */
.photo-slot {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 0.5rem;
  margin: 2.5rem auto;
  padding: 1.25rem;
  width: 100%;
  max-width: 22rem;
  border: 2px dashed var(--lamp);
  border-radius: var(--radius);
  background: rgba(176, 138, 60, 0.07);
  text-align: center;
}
.photo-slot--portrait { aspect-ratio: 4 / 5; }
.photo-slot--landscape { aspect-ratio: 3 / 2; max-width: 30rem; }
.photo-slot--square { aspect-ratio: 1 / 1; }
.photo-slot--wide { aspect-ratio: 21 / 9; max-width: 44rem; }
.photo-slot__tag {
  font-family: var(--sans);
  font-size: 0.72rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--lamp-ink);
}
.photo-slot__brief {
  font-family: var(--sans);
  font-size: 0.86rem;
  line-height: 1.45;
  color: var(--ink-soft);
  max-width: 22rem;
  margin-inline: auto;
}
.band--night .photo-slot { border-color: var(--lamp); background: rgba(176, 138, 60, 0.12); }
.band--night .photo-slot__tag { color: var(--lamp); }
.band--night .photo-slot__brief { color: rgba(226, 236, 242, 0.8); }
.photo-slot:first-child { margin-top: 0; }
.photo-slot:last-child { margin-bottom: 0; }
.caption {
  font-family: var(--sans);
  font-size: 0.82rem;
  color: var(--ink-soft);
  text-align: center;
  margin: 0.7rem 0 0;
}
.band--night .caption { color: rgba(226, 236, 242, 0.7); }
.caption--block { max-width: none; }

.portrait, .step-art {
  width: 100%;
  border-radius: var(--radius);
  box-shadow: 0 18px 44px -24px rgba(31, 45, 56, 0.5);
}

/* Progress through the practice. Sticky so the step you are on stays visible. */
.practice-dots {
  position: sticky;
  top: 0;
  z-index: 10;
  display: flex;
  gap: 1rem;
  justify-content: center;
  padding: 0.9rem 1rem;
  background: color-mix(in srgb, var(--dusk) 88%, transparent);
  backdrop-filter: blur(6px);
  border-bottom: 1px solid var(--hair);
}
/* The visible dot stays small; ::after gives it a 24px hit area without
   changing the layout, and the row gap is wide enough that two neighbouring
   hit areas do not overlap. WCAG 2.2 target size. */
.practice-dots__dot {
  position: relative;
  width: 0.55rem;
  height: 0.55rem;
  padding: 0;
  border: 0;
  border-radius: 99px;
  background: var(--hair);
  cursor: pointer;
  transition: width 0.25s ease, background 0.25s ease;
}
.practice-dots__dot.is-done { background: var(--juniper); }
.practice-dots__dot.is-current { width: 1.7rem; background: var(--lamp); }
.practice-dots__dot::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  width: 1.5rem;
  height: 1.5rem;
  transform: translate(-50%, -50%);
}
.practice-dots__dot:focus-visible { outline: 2px solid var(--link); outline-offset: 3px; }

.practice-step--alt { background: var(--dusk-2); }
.practice-step h2 { margin-bottom: 0.3rem; }

.step-instr {
  background: rgba(255, 255, 255, 0.45);
  border: 1px solid var(--hair);
  border-radius: var(--radius);
  padding: 1.1rem 1.3rem;
  margin: 1.2rem 0 1.5rem;
  color: var(--ink-soft);
}
.step-instr p { margin: 0; }
.step-instr .say {
  margin-top: 0.8rem;
  padding-left: 0.9rem;
  border-left: 3px solid var(--juniper);
}

/* Breathing guide. The circle is the only moving thing on the page. */
.breathe { display: flex; flex-direction: column; align-items: center; margin: 0 0 1.8rem; }
.breathe__circle {
  width: 9rem;
  height: 9rem;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: radial-gradient(circle at 50% 40%, #e8cf95, var(--lamp));
  color: #2a2213;
  font-family: var(--serif);
  font-size: 1.15rem;
  transform: scale(0.72);
  transition: transform 4s ease-in-out;
}
.breathe__circle.is-big { transform: scale(1.04); }
.breathe__label {
  font-family: var(--serif);
  font-style: italic;
  color: var(--ink-soft);
  min-height: 3rem;
  text-align: center;
  margin: 1rem 0;
}
@media (prefers-reduced-motion: reduce) {
  .breathe__circle { transition-duration: 0.4s; }
}

.timer { display: flex; flex-direction: column; align-items: center; gap: 0.8rem; margin: 0 0 1.8rem; }
.timer__num {
  font-family: var(--serif);
  font-size: 3rem;
  color: var(--link);
  margin: 0;
  font-variant-numeric: tabular-nums;
}

.emotions { border: 0; padding: 0; margin: 0 0 1.6rem; }
.emotions legend { padding: 0; color: var(--ink-soft); font-size: 0.92rem; margin-bottom: 0.6rem; }
.emotion {
  font-family: var(--sans);
  font-size: 0.9rem;
  background: transparent;
  color: var(--ink);
  border: 1px solid var(--hair);
  border-radius: 99px;
  padding: 0.5rem 1.1rem;
  margin: 0 0.4rem 0.4rem 0;
  cursor: pointer;
}
.emotion.is-chosen { background: var(--indigo); color: var(--dusk); border-color: var(--indigo); }
.emotion:focus-visible { outline: 2px solid var(--link); outline-offset: 2px; }

.prompt { margin: 0 0 1.1rem; }
.prompt label {
  display: block;
  font-family: var(--serif);
  font-size: 1.1rem;
  color: var(--indigo);
  margin-bottom: 0.4rem;
}
.prompt input,
.prompt select,
.prompt textarea {
  width: 100%;
  font: inherit;
  color: var(--ink);
  background: rgba(255, 255, 255, 0.55);
  border: 1px solid var(--hair);
  border-radius: calc(var(--radius) / 1.6);
  padding: 0.75rem 0.9rem;
  resize: vertical;
}
.prompt input:focus-visible,
.prompt select:focus-visible,
.prompt textarea:focus-visible {
  outline: none;
  border-color: var(--link);
  box-shadow: 0 0 0 3px rgba(36, 92, 121, 0.15);
}

.prompt input, .prompt select { min-height: 2.9rem; }
.prompt select { appearance: none; background-image: none; }
.request { max-width: 38rem; }
/* The phone line under the two buttons: a paragraph's top margin is zero, so
   it sat flush against the button row. */
.request .cta-row + p { margin-top: 1.1rem; }
.band--night .prompt label { color: #eef4f9; }
.band--night .prompt input,
.band--night .prompt select,
.band--night .prompt textarea {
  background: rgba(226, 236, 242, 0.08);
  border-color: rgba(226, 236, 242, 0.25);
  color: #eef4f9;
}
.band--night .prompt ::placeholder { color: rgba(226, 236, 242, 0.5); }
.band--night .saved-hint { color: var(--lamp); }

.saved-hint {
  font-family: var(--sans);
  font-size: 0.82rem;
  color: var(--juniper);
  min-height: 1.3rem;
  margin: 0 0 0.6rem;
}

.reflection { margin-bottom: 2rem; }
.reflection h3 { color: var(--indigo); }

/* Book cover. Sits in the aside column of a .split--aside on the book page. */
.cover {
  width: 100%;
  max-width: 16rem;
  margin: 0 auto;
  border-radius: calc(var(--radius) / 1.5);
  box-shadow: 0 18px 44px -20px rgba(31, 45, 56, 0.55);
}

.steps { counter-reset: step; list-style: none; padding: 0; margin: 0 0 1.5rem; }
.steps > li { counter-increment: step; position: relative; padding-left: 2.8rem; margin-bottom: 1.4rem; }
.steps > li::before {
  content: counter(step);
  position: absolute; left: 0; top: 0;
  font-family: var(--serif);
  font-size: 1.15rem;
  color: var(--lamp-ink);
  width: 1.9rem; height: 1.9rem;
  border: 1px solid var(--hair);
  border-radius: 50%;
  display: grid;
  place-items: center;
}
.band--night .steps > li::before { border-color: rgba(226, 236, 242, 0.3); }

/* ---------- buttons ---------- */

.cta {
  display: inline-block;
  font-family: var(--sans);
  font-size: 1rem;
  background: var(--indigo);
  color: #eaf2f7;
  text-decoration: none;
  padding: 0.85rem 1.7rem;
  border-radius: 2rem;
}
.cta:hover { background: var(--ink); color: #fff; }
/* One button treatment per ground: filled indigo on the light bands, filled
   light on the dark ones. The outlined variant is gone, so .cta--quiet now
   differs only by weight, not by whether it looks like a button at all. */
.cta--quiet { background: var(--indigo); color: #eaf2f7; border: 0; }
.cta--quiet:hover { background: var(--ink); color: #fff; }
.band--night .cta,
.band--night .cta--quiet { background: #eaf2f7; color: var(--indigo); border: 0; }
.band--night .cta:hover,
.band--night .cta--quiet:hover { background: #fff; color: #11202a; }
.cta-row { display: flex; flex-wrap: wrap; gap: 0.85rem; margin-top: 1.75rem; }

/* ---------- doors: the few places the site forks ---------- */

.pathways { display: grid; gap: 1.25rem; margin-top: 2.5rem; }
@media (min-width: 44rem) { .pathways { grid-template-columns: 1fr 1fr; } }
.pathways a {
  display: block;
  background: rgba(255, 255, 255, 0.45);
  border: 1px solid var(--hair);
  border-radius: var(--radius);
  padding: 1.6rem 1.75rem;
  text-decoration: none;
  color: var(--ink);
}
.pathways a:hover { background: rgba(255, 255, 255, 0.85); }
.pathways h3 { margin-bottom: 0.4rem; }
.pathways p { color: var(--ink-soft); margin: 0; font-size: 1rem; }
.band--night .pathways a {
  background: rgba(226, 236, 242, 0.07);
  border-color: rgba(226, 236, 242, 0.22);
  color: #eef4f9;
}
.band--night .pathways a:hover { background: rgba(226, 236, 242, 0.14); }
.band--night .pathways p { color: rgba(226, 236, 242, 0.75); }
/* A pathway card that runs the width of the grid, for the point that is about
   the cards beside it rather than a peer of them. The heading takes its own
   column so the prose keeps a readable measure instead of running the full
   width of the band. */
@media (min-width: 44rem) {
  .pathways > .card--wide {
    grid-column: 1 / -1;
    display: grid;
    grid-template-columns: minmax(0, 15rem) minmax(0, 1fr);
    column-gap: 2.5rem;
    align-items: start;
  }
  .pathways > .card--wide h3 { margin-bottom: 0; }
}

/* Further reading at the foot of an article. Deliberately not a card: these
   are the same posts the blog index already shows as cards, and a reader who
   has just finished one article does not need that page reprinted. */
.link-list { list-style: none; margin: 1.75rem 0 0; padding: 0; max-width: 38rem; }
.link-list li + li { border-top: 1px solid var(--hair); }
.link-list a { display: block; padding: 0.95rem 0; font-size: 1.15rem; }

/* ---------- FAQ ---------- */

/* .faq sits on the same element as .shell, which centers itself, so capping the
   section centered the whole block. Cap the children instead: the shell keeps the
   page's gutters and the questions line up with every other section's left edge. */
.faq { max-width: none; }
.faq > * { max-width: 44rem; }
.faq details { border-top: 1px solid var(--hair); }
.faq details:last-of-type { border-bottom: 1px solid var(--hair); }
.faq summary {
  cursor: pointer;
  font-size: 1.2rem;
  padding: 0.95rem 2.2rem 0.95rem 0;
  position: relative;
  list-style: none;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after {
  content: "+";
  position: absolute; right: 0.2rem; top: 0.85rem;
  font-size: 1.35rem;
  color: var(--lamp-ink);
}
.faq details[open] summary::after { content: "\2013"; }
.faq .answer-body { padding: 0 0 1.2rem; }
.faq .answer-body p:last-child { margin-bottom: 0; }

/* ---------- breathing widget ---------- */

.settle {
  border: 1px solid var(--hair);
  border-radius: var(--radius);
  background: rgba(255, 255, 255, 0.5);
  padding: 2.25rem 1.75rem;
  max-width: 22rem;
  text-align: center;
}
.settle__ring {
  width: 8.5rem; height: 8.5rem;
  margin: 0 auto 1.5rem;
  border-radius: 50%;
  border: 1px solid var(--lamp);
  background: radial-gradient(circle, rgba(176, 138, 60, 0.22), rgba(176, 138, 60, 0.06));
  display: grid;
  place-items: center;
  /* The ring rests at scale(0.72), so the label renders at 0.72 of whatever is
     set here. 1.36rem puts it on screen at the 0.98rem of the Start button
     below it; it grows with the circle through the breath, which is the point. */
  font-size: 1.36rem;
  color: var(--ink-soft);
  transform: scale(0.72);
}
.settle[data-running="true"] .settle__ring { animation: breathe 12s ease-in-out infinite; }
@keyframes breathe {
  0% { transform: scale(0.72); }
  33% { transform: scale(1); }
  50% { transform: scale(1); }
  100% { transform: scale(0.72); }
}
.settle p { max-width: none; font-size: 1rem; color: var(--ink-soft); }
.settle button {
  font: 400 0.98rem var(--sans);
  background: none;
  border: 1px solid var(--hair);
  border-radius: 2rem;
  padding: 0.55rem 1.4rem;
  color: var(--ink);
  cursor: pointer;
}
.settle button + p { margin-top: 0.95rem; }
.band--night .settle {
  background: rgba(226, 236, 242, 0.07);
  border-color: rgba(226, 236, 242, 0.22);
}
.band--night .settle__ring { color: rgba(226, 236, 242, 0.92); }
.band--night .settle p { color: rgba(226, 236, 242, 0.75); }
.band--night .settle button { color: #eef4f9; border-color: rgba(226, 236, 242, 0.4); }

/* ---------- tables (licensure guide) ---------- */

.table-wrap { overflow-x: auto; margin: 0 0 2rem; }
table { border-collapse: collapse; width: 100%; font-size: 1rem; }
caption { text-align: left; font-family: var(--sans); font-size: 0.88rem; color: var(--ink-soft); padding-bottom: 0.6rem; }
th, td { text-align: left; padding: 0.7rem 1rem 0.7rem 0; border-top: 1px solid var(--hair); vertical-align: top; }
th { font-family: var(--sans); font-size: 0.88rem; font-weight: 700; }
tbody tr:last-child td { border-bottom: 1px solid var(--hair); }

/* ---------- footer ---------- */

.footer {
  background: var(--dusk-2);
  color: var(--ink-soft);
  padding-block: clamp(3rem, 7vw, 5rem);
  font-size: 1rem;
}
.footer a { color: var(--link); }
.footer a:hover { color: var(--ink); }
.footer h4 { color: var(--ink); }
.footer__grid { display: grid; gap: 2.5rem; grid-template-columns: 1fr; }
/* auto-fit rather than a fixed three, because the section column appears on
   some pages and not others and the row should close up when it does not. */
@media (min-width: 44rem) {
  .footer__grid { grid-template-columns: repeat(auto-fit, minmax(12rem, 1fr)); }
}
/* The email address is longer than a quarter of the shell, so it ran under
   the next column once the section list made the grid four wide. */
.footer__grid a { overflow-wrap: anywhere; }
.footer ul { list-style: none; margin: 0; padding: 0; }
.footer li { margin-bottom: 0.35rem; }
.footer__legal {
  margin-top: 3rem;
  padding-top: 1.4rem;
  border-top: 1px solid var(--hair);
  font-size: 0.9rem;
  color: var(--ink-soft);
}
.footer__legal p { max-width: 46rem; }

.crumbs { font-family: var(--sans); font-size: 0.85rem; color: var(--ink-soft); padding-top: 1.5rem; }
.crumbs a { color: var(--ink-soft); }

/* Temporary build annotations. Dashed on purpose: they are provisional, and
   every one of them is meant to be gone before launch. */
.note {
  font-family: var(--sans);
  font-size: 0.92rem;
  color: var(--ink-soft);
  border: 1px dashed rgba(36, 92, 121, 0.45);
  border-radius: var(--radius);
  padding: 1rem 1.2rem;
  max-width: 39rem;
}

/* Crisis information. Permanent, and the one block on a page that has to be
   found by someone who is not reading carefully. Solid rather than dashed so it
   reads as settled; a brass rule and a warmer ground so it separates from the
   body without alarming anyone, which on a trauma practice would be the wrong
   trade. */
.crisis {
  font-family: var(--sans);
  font-size: 0.95rem;
  line-height: 1.6;
  color: var(--ink);
  background: rgba(176, 138, 60, 0.09);
  border: 1px solid rgba(176, 138, 60, 0.3);
  border-left: 4px solid var(--lamp);
  border-radius: var(--radius);
  padding: 1.05rem 1.3rem;
  max-width: 39rem;
  margin-top: 2.5rem;
}
.band--night .crisis {
  color: rgba(226, 236, 242, 0.92);
  background: rgba(176, 138, 60, 0.14);
  border-color: rgba(176, 138, 60, 0.42);
}
.band--night .crisis strong { color: #eef4f9; }

.source { font-size: 0.95rem; color: var(--ink-soft); }

@media (prefers-reduced-motion: reduce) {
  * { animation-duration: 0.001ms !important; transition-duration: 0.001ms !important; }
}

/* Face row for the associates band. Fixed-ratio circles so six photos shot at
   six different aspect ratios still line up. */
.roster {
  list-style: none;
  margin: 2rem 0 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 1.25rem 1.5rem;
}
.roster a {
  display: grid;
  justify-items: center;
  gap: 0.5rem;
  text-decoration: none;
  color: inherit;
}
.roster img {
  width: 5.5rem;
  height: 5.5rem;
  border-radius: 50%;
  object-fit: cover;
  object-position: center top;
  border: 2px solid rgba(226, 236, 242, 0.25);
  transition: border-color 0.15s ease;
}
.roster a:hover img { border-color: rgba(226, 236, 242, 0.7); }
.roster span { font-size: 0.95rem; }
.roster a:hover span { text-decoration: underline; }

/* A five-up row needs narrower tiles than the four-up default to fit five
   across; below the breakpoint above it pairs off like any other row. */
.photo-row--five { max-width: 54rem; grid-template-columns: repeat(auto-fit, minmax(8rem, 9.5rem)); }

/* Sections that are jump targets keep a little air above the heading when the
   browser lands on them, rather than butting against the top of the viewport. */
section[id] { scroll-margin-block-start: 1.5rem; }

/* A section's opening paragraph sets up the cards under it, so it tracks the
   content width rather than the narrower reading measure body copy uses. */
.intro-wide {
  max-width: none;
  /* Body copy is 1.125rem for a 33rem measure. Run that size the full content
     width and the lines get long and heavy, and here it also sat a size above
     the table it introduces. 1.02rem matches the table and reads better long. */
  font-size: 1.02rem;
}

/* Hero text uses one of two classes, by job. .answer (above) is the
   fact-stating paragraph an assistant can quote as the page's answer: body
   size, 48rem, once per page. .hero-lede is a line spoken to the reader, in
   the second person, with nothing in it a search engine needs: larger than
   body, same 48rem as .answer so the hero column is one width everywhere
   and the two stack flush on pages that have both, lede first. About 85
   characters a line at this size; a narrower 56ch read as an indent under
   a full-width h1. .intro-wide is for section intros above cards and
   tables, never a hero. Not .lede, which is the book subtitle's italic. */
.hero-lede {
  font-size: 1.2rem;
  max-width: 48rem;
}

/* The question above the two routes is a prompt the reader answers, not a
   category label, so it is sized to be read rather than skimmed past. */
/* The line that says what the two buttons under it have in common. It began
   as an .eyebrow, which is sans and small, so it read as a label on a page
   where everything else at that size is serif. Body type instead, capped at
   26rem: the measured width of the two buttons side by side, so the sentence
   and the choice it introduces form one block. */
.fork-note { max-width: 26rem; margin: 0 0 1rem; color: var(--ink); }

/* The book sits under the exercise it comes from, cover beside the pitch. Big
   enough to read as an object rather than a thumbnail. */
.book-plug {
  display: grid;
  gap: 1.5rem 2.5rem;
  grid-template-columns: 1fr;
  align-items: center;
  margin-top: 3rem;
  padding-top: 2.5rem;
  border-top: 1px solid rgba(226, 236, 242, 0.18);
}
@media (min-width: 44rem) {
  .book-plug { grid-template-columns: 13rem minmax(0, 1fr); }
}
.book-plug .cover { max-width: 13rem; margin: 0; }
.book-plug h3 { margin-bottom: 0.6rem; }

/* A card grid supplies its own top margin but nothing below it, so a closing
   paragraph sat flush against the last card. Whatever follows gets its air. */
.pathways + * { margin-top: 2rem; }
/* A button row followed by a two-column block ran its heading straight into the
   buttons. Same reason as the rule above it. */
.cta-row + .split { margin-top: 2.75rem; }
/* ...and a picture after one, which --small zeroes the top margin of. */
.cta-row + .band-art { margin-top: 2.75rem; }
/* A paragraph's own bottom margin is sized for the next paragraph, not for
   a two-column block, which needs the same air a button row gets. */
.intro-wide + .split { margin-top: 2.5rem; }
.split + .intro-wide { margin-top: 0.75rem; }

/* Stacked, the hero ran 59px past a phone's first screen, so nothing below it
   signalled there was more to read. The emblem is decorative and carries the
   cut: at 10rem the hero ends about 50px above the fold and the next band shows.
   Everything here reverts at 54rem, where the emblem sits beside the h1 and has
   the room to be big. Sharper too: 600px of artwork over 160 displayed. */
@media (max-width: 53.99rem) {
  .hero { padding-block: 2.25rem 2rem; }
  .hero__art { max-width: 10rem; }
}

/* The home page is a sequence of short sections rather than one long read, so
   the sitewide band of air reads as gaps between unrelated things. Tighter
   here only; --band drives every padding rule above, so the whole rhythm
   scales together rather than needing each seam retuned. */
.home .hero { padding-block: clamp(2.25rem, 5vw, 4rem) calc(var(--band) * 0.7); }

/* Who a service is for, tucked under its name. It was a fourth column, which
   on a phone pushed the table past the viewport and wrapped every cell to one
   or two words per line. */
.cell-note {
  display: block;
  font-family: var(--sans);
  font-size: 0.82rem;
  line-height: 1.4;
  color: var(--ink-soft);
  margin-top: 0.25rem;
  max-width: 16rem;
}

/* "Helps when" under a card's one-line description. It answers a different
   question from the line above it, so it is set apart by a rule and the sans
   face rather than by being another paragraph of the same grey. */
.pathways .card-who {
  margin-top: 0.75rem;
  padding-top: 0.7rem;
  border-top: 1px solid var(--hair);
  font-family: var(--sans);
  font-size: 0.84rem;
  line-height: 1.5;
}
.pathways .card-who strong { color: var(--ink); }
.band--night .pathways .card-who { border-top-color: rgba(226, 236, 242, 0.2); }
.band--night .pathways .card-who strong { color: #eef4f9; }

/* The "go deeper" card at the end of a grid. Full width so it reads as the way
   onward rather than as one more option in the set above it. */
.pathways a.pathway--wide { grid-column: 1 / -1; }
/* Full width means the reading measure the other cards use would leave half the
   card empty, so text in this one runs the card's own width. */
.pathways a.pathway--wide p { max-width: none; }
/* .pathways p already sets a colour, so this needs the same weight to win. */
.pathways .card-go {
  margin-top: 0.75rem;
  font-family: var(--sans);
  font-size: 0.9rem;
  color: var(--link);
  white-space: nowrap;
}
.pathways .card-go::after { content: " \2192"; }
.pathways a:hover .card-go { color: var(--ink); }
.band--night .pathways .card-go { color: #e0bd7e; }
.band--night .pathways a:hover .card-go { color: #fff; }
@media (max-width: 30rem) { .pathways .card-go { white-space: normal; } }

/* The footer used the same indigo as .band--night, so wherever a night band was
   the last section the two ran together as one block. A darker tone plus a
   hairline marks the footer as chrome rather than more page. */
/* Nearly every page ends on a dark band, so a dark footer ran straight into it.
   Light separates it outright, and marks it as chrome rather than more page. */
.footer { border-top: 1px solid var(--hair); }

/* The evidence list beside a photograph. The default split gives the two sides
   almost equal width, which squeezed each entry into a column narrow enough to
   wrap every line and doubled the section's height. The list needs the room;
   the picture does not. */
@media (min-width: 54rem) {
  .split--evidence { grid-template-columns: minmax(0, 2.3fr) minmax(0, 1fr); }
}
.split--evidence .facts { max-width: none; margin-bottom: 0; }

.text-wide { max-width: 48rem; }
.facts--wide { max-width: 48rem; }

/* A line of destinations under a hub page's lede. Sans and small so it reads as
   navigation rather than more prose, and links rather than buttons because
   choosing where to go is not the same as being asked for something. */
.jump {
  font-family: var(--sans);
  font-size: 0.95rem;
  max-width: none;
  margin-top: 1.75rem;
  color: var(--ink-soft);
}

/* Stacked, the hero's text runs long enough that the photograph would land far
   below the fold. It leads on a phone, where a face is the fastest way to say
   who this is. */
@media (max-width: 53.99rem) {
  .hero__art { order: -1; }
}

/* A subtitle belongs to the heading above it, not to the space below it. The
   default 0.7em after a 3.45rem h1 is more than two lines of the eyebrow. */
.h1--tight { margin-bottom: 0.3em; }