/* ==========================================================================
   About — Dahlia Sengupta
   A connected editorial feature: masthead with facts, a dark three-column
   inheritance spread, chaptered columns, a second-apprenticeship chapter,
   a three-part method row, the consultation split, a practice index, a
   closing sage spread, commitments and a note bar. Grids cap at three
   columns throughout so nothing on wide screens reads as a cramped row.
   Every rule is scoped to .dahlia-profile.
   ========================================================================== */

.dahlia-profile {
  --bio-forest: #1e392e;
  --bio-ivory: #f6f3ed;
  --bio-sage: #91ac91;
  --bio-olive: #737963;

  --bio-display: var(--display, "Cormorant Garamond", "Times New Roman", Georgia, serif);
  --bio-ink: var(--ink-60, #4b514a);
  --bio-quiet: #737963;

  --bio-rule: color-mix(in srgb, #1e392e 18%, transparent);
  --bio-rule-soft: color-mix(in srgb, #1e392e 11%, transparent);
  --bio-rule-dark: color-mix(in srgb, #f6f3ed 26%, transparent);

  --bio-body: clamp(1.0625rem, 1.03rem + 0.16vw, 1.125rem);  /* 17 → 18px */
  --bio-step: clamp(1.75rem, 2.6vw, 2.75rem);
  --bio-col: clamp(1.5rem, 3vw, 3rem);

  font-size: var(--bio-body);
  line-height: 1.62;
  color: var(--bio-ink);
}

/* --- local resets -------------------------------------------------------- */

.dahlia-profile h1,
.dahlia-profile h2,
.dahlia-profile h3,
.dahlia-profile p,
.dahlia-profile ol,
.dahlia-profile ul,
.dahlia-profile dl,
.dahlia-profile dt,
.dahlia-profile dd,
.dahlia-profile figure {
  margin: 0;
  padding: 0;
}

.dahlia-profile ol,
.dahlia-profile ul { list-style: none; }

.dahlia-profile h1,
.dahlia-profile h2,
.dahlia-profile h3 {
  font-family: var(--bio-display);
  font-weight: 400;
  color: var(--bio-forest);
  text-wrap: balance;
  overflow-wrap: break-word;
}

.dahlia-profile p {
  font-size: var(--bio-body);
  line-height: 1.62;
  color: var(--bio-ink);
  overflow-wrap: break-word;
}

.dahlia-profile img { max-width: 100%; }

.dahlia-profile > section { padding-block: var(--bio-step); }

.dahlia-profile .bio-eyebrow {
  font-family: var(--system, "Inter", system-ui, sans-serif);
  font-size: 0.76rem;
  line-height: 1.4;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--bio-olive);
  margin-bottom: 0.55rem;
}

.dahlia-profile .bio-cta-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.7rem 1rem;
}

/* --- shared band heading (journey, method, practice, commitments) -------- */

.dahlia-profile .bio-band {
  display: flex;
  flex-direction: column;
  margin-bottom: clamp(1.3rem, 2.2vw, 1.9rem);
}

.dahlia-profile .bio-band h2 {
  font-size: clamp(1.85rem, 1.3rem + 1.9vw, 2.6rem);
  line-height: 1.1;
  letter-spacing: -0.015em;
  max-width: 22ch;
}

.dahlia-profile .bio-band-rule {
  flex: none;
  width: 2.75rem;
  height: 2px;
  margin-top: 0.65rem;
  background: var(--bio-sage);
  transform: none;
}

.dahlia-profile .bio-lead {
  font-size: clamp(1.12rem, 1.04rem + 0.35vw, 1.3rem);
  line-height: 1.55;
  color: var(--bio-forest);
}

/* ==========================================================================
   1. Masthead
   ========================================================================== */

.dahlia-profile .bio-hero {
  padding-top: clamp(1.7rem, 3vw, 2.6rem);
  padding-bottom: clamp(1.8rem, 3.1vw, 2.7rem);
}

.dahlia-profile .bio-hero-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: clamp(1.5rem, 3.4vw, 3rem);
  align-items: center;
}

.dahlia-profile #bio-title {
  margin: 0.7rem 0 0;
  font-size: clamp(2.5rem, 1.6rem + 4.2vw, 4.5rem);
  line-height: 1.02;
  letter-spacing: -0.02em;
}

.dahlia-profile .bio-line {
  margin-top: 0.9rem;
  font-family: var(--bio-display);
  font-size: clamp(1.2rem, 1.05rem + 0.6vw, 1.55rem);
  line-height: 1.32;
  color: var(--bio-forest);
  max-width: 30ch;
}

.dahlia-profile .bio-intro {
  margin-top: 1.1rem;
  max-width: 52ch;
  line-height: 1.66;
}

.dahlia-profile .bio-hero .bio-cta-row { margin-top: clamp(1.25rem, 2.4vw, 1.9rem); }

.dahlia-profile .bio-portrait {
  width: 100%;
  max-width: 440px;
  justify-self: center;
}

.dahlia-profile .bio-portrait .photo,
.dahlia-profile .bio-portrait figure {
  width: 100%;
  max-width: 440px;
  margin: 0;
}

.dahlia-profile .bio-facts {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 14rem), 1fr));
  gap: 0.9rem clamp(1.5rem, 3vw, 3rem);
  margin-top: clamp(1.3rem, 2.4vw, 2rem);
  padding-top: clamp(0.9rem, 1.7vw, 1.2rem);
  border-top: 1px solid var(--bio-rule);
}

.dahlia-profile .bio-facts dt {
  font-family: var(--system, "Inter", system-ui, sans-serif);
  font-size: 0.72rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--bio-olive);
}

.dahlia-profile .bio-facts dd {
  margin-top: 0.3rem;
  font-family: var(--bio-display);
  font-size: 1.16rem;
  line-height: 1.35;
  color: var(--bio-forest);
}

/* ==========================================================================
   2. Roots — the dark inheritance spread
   ========================================================================== */

.dahlia-profile .bio-roots {
  background: var(--bio-forest);
  color: var(--bio-ivory);
  padding-block: clamp(2.4rem, 4.2vw, 3.9rem);
}

.dahlia-profile .bio-roots h2,
.dahlia-profile .bio-roots h3 { color: var(--bio-ivory); }
.dahlia-profile .bio-roots .bio-eyebrow { color: var(--bio-sage); }
.dahlia-profile .bio-roots p { color: color-mix(in srgb, #f6f3ed 86%, transparent); }

.dahlia-profile .bio-roots-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: clamp(1.3rem, 2.4vw, 2.1rem) var(--bio-col);
  align-content: start;
}

.dahlia-profile .bio-roots-head h2 {
  margin-top: 0.7rem;
  font-size: clamp(1.9rem, 1.3rem + 2vw, 2.85rem);
  line-height: 1.1;
  letter-spacing: -0.015em;
}

.dahlia-profile .bio-roots-lead {
  font-size: clamp(1.1rem, 1.02rem + 0.4vw, 1.3rem);
  line-height: 1.55;
  color: color-mix(in srgb, #f6f3ed 94%, transparent) !important;
  max-width: 60ch;
}

.dahlia-profile .bio-inheritance {
  padding-top: 1.1rem;
  border-top: 1px solid var(--bio-rule-dark);
}

.dahlia-profile .bio-inheritance h3 {
  margin-bottom: 0.7rem;
  font-size: clamp(1.25rem, 1.1rem + 0.55vw, 1.55rem);
  line-height: 1.22;
}

.dahlia-profile .bio-learning {
  padding-top: 1.1rem;
  border-top: 1px solid var(--bio-sage);
}

.dahlia-profile .bio-learning p {
  font-family: var(--bio-display);
  font-size: clamp(1.2rem, 1.05rem + 0.6vw, 1.5rem);
  line-height: 1.4;
  color: var(--bio-sage) !important;
}

/* ==========================================================================
   3. Journey — three chapters in three columns
   ========================================================================== */

.dahlia-profile .bio-chapters {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: clamp(1.2rem, 2.4vw, 1.9rem) var(--bio-col);
  align-items: start;
  counter-reset: bio-chapter;
}

.dahlia-profile .bio-chapters > article {
  counter-increment: bio-chapter;
  padding-top: 0.2rem;
}

.dahlia-profile .bio-chapters > article::before {
  content: counter(bio-chapter, decimal-leading-zero);
  display: block;
  margin-bottom: 0.2rem;
  font-family: var(--bio-display);
  font-size: 2.3rem;
  line-height: 1;
  letter-spacing: 0;
  color: color-mix(in srgb, #91ac91 75%, transparent);
}

.dahlia-profile .bio-chapters h3 {
  margin-bottom: 0.55rem;
  font-size: clamp(1.2rem, 1.08rem + 0.5vw, 1.45rem);
  line-height: 1.24;
}

/* ==========================================================================
   4. Professional — a second apprenticeship, set between family and method
   ========================================================================== */

.dahlia-profile .bio-professional {
  background: color-mix(in srgb, #91ac91 8%, #f6f3ed);
}

.dahlia-profile .bio-professional-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: clamp(1.3rem, 2.4vw, 2rem) var(--bio-col);
  align-items: start;
}

.dahlia-profile .bio-professional-text p + p { margin-top: 0.9rem; }

.dahlia-profile .bio-skills {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 0.85rem;
  padding: clamp(1.1rem, 2vw, 1.5rem);
  background: color-mix(in srgb, #1e392e 6%, transparent);
}

.dahlia-profile .bio-skills > div + div {
  padding-top: 0.85rem;
  border-top: 1px solid var(--bio-rule-soft);
}

.dahlia-profile .bio-skills dt {
  font-family: var(--bio-display);
  font-size: 1.08rem;
  line-height: 1.25;
  color: var(--bio-forest);
  margin-bottom: 0.3rem;
}

.dahlia-profile .bio-skills dd { font-size: 0.98rem; line-height: 1.5; }

/* ==========================================================================
   5. Method
   ========================================================================== */

.dahlia-profile .bio-method { background: var(--bio-ivory); }

.dahlia-profile .bio-method-top {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: clamp(1rem, 2.2vw, 1.8rem) var(--bio-col);
  padding-bottom: clamp(1.15rem, 2.2vw, 1.7rem);
}

.dahlia-profile .bio-method-questions {
  font-family: var(--bio-display);
  font-size: clamp(1.18rem, 1.05rem + 0.6vw, 1.5rem);
  line-height: 1.4;
  color: var(--bio-forest);
}

.dahlia-profile .bio-steps {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: clamp(1.25rem, 2.4vw, 2rem) var(--bio-col);
  counter-reset: bio-step;
  border-top: 1px solid var(--bio-rule);
  padding-top: clamp(1rem, 2vw, 1.5rem);
}

.dahlia-profile .bio-steps > li { counter-increment: bio-step; }

.dahlia-profile .bio-steps > li::before {
  content: counter(bio-step, decimal-leading-zero);
  display: block;
  margin-bottom: 0.4rem;
  font-family: var(--bio-display);
  font-size: 0.9rem;
  letter-spacing: 0.1em;
  color: var(--bio-olive);
}

.dahlia-profile .bio-steps h3 {
  margin-bottom: 0.4rem;
  font-size: clamp(1.1rem, 1.02rem + 0.35vw, 1.3rem);
  line-height: 1.25;
}

.dahlia-profile .bio-steps p { font-size: 1rem; line-height: 1.55; }

/* ==========================================================================
   6. Purpose — the consultation photograph beside the prose
   ========================================================================== */

.dahlia-profile .bio-split {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: clamp(1.5rem, 3.4vw, 3rem);
  align-items: center;
}

.dahlia-profile .bio-consultation {
  width: 100%;
  max-width: 480px;
  justify-self: center;
}

.dahlia-profile .bio-consultation .photo,
.dahlia-profile .bio-consultation figure { width: 100%; margin: 0; }

.dahlia-profile .bio-purpose h2 {
  margin: 0.6rem 0 1rem;
  font-size: clamp(1.7rem, 1.25rem + 1.5vw, 2.4rem);
  line-height: 1.12;
  max-width: 22ch;
}

.dahlia-profile .bio-purpose-text p { max-width: 58ch; }
.dahlia-profile .bio-purpose-text p + p { margin-top: 1rem; }
.dahlia-profile .bio-purpose-text p:first-of-type {
  font-size: clamp(1.08rem, 1.02rem + 0.3vw, 1.22rem);
  line-height: 1.58;
  color: var(--bio-forest);
}

/* ==========================================================================
   7. Practice
   ========================================================================== */

.dahlia-profile .bio-practice-intro {
  max-width: 72ch;
  margin-bottom: clamp(1.15rem, 2.2vw, 1.7rem);
}

.dahlia-profile .bio-examples {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: clamp(1.25rem, 2.4vw, 2rem) var(--bio-col);
}

.dahlia-profile .bio-examples > div {
  padding-top: 0.2rem;
}

.dahlia-profile .bio-examples dt {
  margin-bottom: 0.4rem;
  font-family: var(--bio-display);
  font-size: 1.18rem;
  line-height: 1.25;
  color: var(--bio-forest);
}

.dahlia-profile .bio-examples dd {
  font-size: 1rem;
  line-height: 1.55;
  color: var(--bio-ink);
}

.dahlia-profile .bio-practical-note {
  margin-top: clamp(1.3rem, 2.4vw, 1.85rem);
  padding-top: clamp(0.95rem, 1.8vw, 1.3rem);
  border-top: 1px solid var(--bio-rule);
}

.dahlia-profile .bio-practical-note p {
  color: var(--bio-quiet);
  font-style: italic;
}

/* ==========================================================================
   8. Close — across cultures, then the invitation
   ========================================================================== */

.dahlia-profile .bio-close {
  background: color-mix(in srgb, #91ac91 13%, #f6f3ed);
}

.dahlia-profile .bio-life-grid,
.dahlia-profile .bio-invite-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: clamp(1rem, 2vw, 1.7rem) var(--bio-col);
  align-content: start;
}

.dahlia-profile .bio-life-head h2 {
  margin-top: 0.6rem;
  font-size: clamp(1.5rem, 1.2rem + 1vw, 1.95rem);
  line-height: 1.16;
}

.dahlia-profile .bio-life-grid p { max-width: 54ch; }

.dahlia-profile .bio-invite-grid {
  margin-top: clamp(1.4rem, 2.6vw, 2.2rem);
  padding-top: clamp(1.15rem, 2.2vw, 1.7rem);
  border-top: 1px solid var(--bio-rule);
  align-items: start;
}

.dahlia-profile .bio-statement {
  font-size: clamp(1.9rem, 1.2rem + 2.6vw, 3.1rem);
  line-height: 1.06;
  letter-spacing: -0.015em;
  max-width: 18ch;
}

.dahlia-profile .bio-invite-grid p { max-width: 46ch; }

/* ==========================================================================
   9. Commitments
   ========================================================================== */

.dahlia-profile .bio-commit-lede {
  max-width: 68ch;
  margin-bottom: clamp(1.15rem, 2.2vw, 1.7rem);
}

.dahlia-profile #dahlia-approach {
  /* neutralise the shared block's own frame */
  margin: 0;
  padding: 0;
  background: none;
  border: 0;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: clamp(1.25rem, 2.4vw, 2rem) var(--bio-col);
}

.dahlia-profile #dahlia-approach > article {
  padding-top: 0.9rem;
  border-top: 1px solid var(--bio-rule-soft);
}

.dahlia-profile #dahlia-approach h3 {
  margin-bottom: 0.45rem;
  font-size: clamp(1.08rem, 1.02rem + 0.35vw, 1.28rem);
  line-height: 1.26;
}

.dahlia-profile #dahlia-approach p { font-size: 1rem; line-height: 1.55; }

/* ==========================================================================
   10. Note bar
   ========================================================================== */

.dahlia-profile .bio-note { padding-bottom: clamp(2rem, 3.4vw, 3rem); }

.dahlia-profile #before-booking {
  margin: 0;
  background: var(--bio-ivory);
  border: 0;
  border-top: 2px solid var(--bio-forest);
  padding: clamp(1.4rem, 3vw, 2.25rem);
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: clamp(1rem, 2.4vw, 2.25rem);
  align-items: start;
}

.dahlia-profile #before-booking h2 {
  margin-top: 0.55rem;
  font-size: clamp(1.25rem, 1.12rem + 0.6vw, 1.55rem);
  line-height: 1.22;
}

.dahlia-profile .bio-note-summary {
  margin-top: 0.7rem;
  font-family: var(--bio-display);
  font-size: 1.15rem;
  line-height: 1.4;
  color: var(--bio-forest);
  max-width: 34ch;
}

.dahlia-profile .bio-note-body p { max-width: 62ch; }
.dahlia-profile .bio-note-body p + p { margin-top: 0.8rem; }
.dahlia-profile .bio-note-action { margin-top: 1.1rem; }

/* ==========================================================================
   Responsive — 360 to 1920
   ========================================================================== */

@media (max-width: 600px) {
  .dahlia-profile > section > .wrap {
    width: auto;
    max-width: none;
    margin-inline: 0;
    padding-inline: 20px;
  }

  .dahlia-profile .bio-portrait { order: -1; }
  .dahlia-profile .bio-band-rule { display: none; }
}

@media (min-width: 560px) {
  .dahlia-profile .bio-steps { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .dahlia-profile .bio-examples { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .dahlia-profile #dahlia-approach { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .dahlia-profile .bio-skills { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (min-width: 760px) {
  .dahlia-profile .bio-hero-grid {
    grid-template-columns: minmax(0, 1.3fr) minmax(0, 0.85fr);
  }
  .dahlia-profile .bio-portrait { justify-self: end; }

  .dahlia-profile .bio-roots-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .dahlia-profile .bio-roots-lead { grid-column: 2; }
  .dahlia-profile .bio-learning { grid-column: 1 / -1; }
  .dahlia-profile .bio-learning p { max-width: 72ch; }

  .dahlia-profile .bio-chapters { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .dahlia-profile .bio-professional-grid { grid-template-columns: minmax(0, 1.3fr) minmax(0, 0.85fr); }
  .dahlia-profile .bio-skills { grid-template-columns: minmax(0, 1fr); }
  .dahlia-profile .bio-method-top { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .dahlia-profile .bio-steps { grid-template-columns: repeat(3, minmax(0, 1fr)); }

  .dahlia-profile .bio-split { grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr); }
  .dahlia-profile .bio-consultation { justify-self: start; }

  .dahlia-profile .bio-life-grid { grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr); }

  .dahlia-profile #before-booking {
    grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.4fr);
    padding: clamp(1.75rem, 3vw, 2.5rem);
  }
}

@media (min-width: 1000px) {
  .dahlia-profile .bio-roots-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .dahlia-profile .bio-roots-head { grid-column: 1; }
  .dahlia-profile .bio-roots-lead { grid-column: 2 / span 2; align-self: end; }
  .dahlia-profile .bio-learning { grid-column: 3; grid-row: 2; }

  .dahlia-profile .bio-chapters { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .dahlia-profile .bio-professional-grid { grid-template-columns: minmax(0, 1.25fr) minmax(0, 0.85fr); }
  .dahlia-profile .bio-skills { grid-template-columns: minmax(0, 1fr); }
  .dahlia-profile .bio-examples { grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr)); }
  .dahlia-profile #dahlia-approach { grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr)); }

  .dahlia-profile .bio-practical-note p { columns: 2; column-gap: var(--bio-col); }

  .dahlia-profile .bio-life-grid {
    grid-template-columns: minmax(0, 0.8fr) minmax(0, 1fr) minmax(0, 1fr);
  }
  .dahlia-profile .bio-invite-grid {
    grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr) minmax(0, 1fr);
  }
}

@media (min-width: 1500px) {
  .dahlia-profile .bio-intro { max-width: 56ch; }
  .dahlia-profile .bio-purpose-text p { max-width: 62ch; }
}

/* ==========================================================================
   Languages
   ========================================================================== */

html[lang^="hi"] .dahlia-profile,
html[lang^="hi"] .dahlia-profile p { line-height: 1.8; }

html[lang^="hi"] .dahlia-profile h1,
html[lang^="hi"] .dahlia-profile h2,
html[lang^="hi"] .dahlia-profile h3 {
  line-height: 1.32;
  letter-spacing: normal;
}

html[lang^="hi"] .dahlia-profile .bio-eyebrow,
html[lang^="hi"] .dahlia-profile .bio-facts dt {
  letter-spacing: 0.06em;
  text-transform: none;
}

html[lang^="hi"] .dahlia-profile .bio-statement,
html[lang^="es"] .dahlia-profile .bio-statement { max-width: 24ch; }

html[lang^="hi"] .dahlia-profile .bio-band h2,
html[lang^="es"] .dahlia-profile .bio-band h2 { max-width: 30ch; }

/* --- About-only spacing refinements -------------------------------------- */

/* Tablet: the third chapter would sit alone in a 2-column grid; let it run
   full width in two text columns so the row squares off. */
@media (min-width: 760px) and (max-width: 999.98px) {
  .dahlia-profile .bio-chapters > article:last-child { grid-column: 1 / -1; }
  .dahlia-profile .bio-chapters > article:last-child p {
    columns: 2;
    column-gap: var(--bio-col);
  }
}

/* Trailing note bar sits closer to the shared closing CTA. */
main[data-page="about"] > .page-closing { padding-block-start: clamp(1.8rem, 3vw, 2.8rem); }
