/* ==========================================================================
   michaelimas.com · wwm.css
   Work with me only. Loads after site.css, everything scoped to .page-wwm.
   Never touches .nav, .menu, .footer, .social.
   --------------------------------------------------------------------------
   01  Page header (title + etymology card)
   02  Shared section grid and headings
   03  Who this is for
   04  The work (steps)
   05  Where this doesn't fit (dark)
   06  How it starts (offers, booking)
   Breakpoints (min-width): 480, 720, 900
   ========================================================================== */


/* 01  Page header ---------------------------------------------------------- */

.page-wwm .page-header {
  padding-top: clamp(9rem, 16vw, 16rem);
  padding-bottom: clamp(4rem, 8vw, 8rem);
}

.page-wwm .page-header__grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 3rem;
  align-items: end;
}

.page-wwm .page-label { margin-bottom: 2rem; }

/* Capped at 3.9rem (62.4px) below 900px, so the switch to the two-column
   header at 900px (7vw = 63px) does not shrink the title. */
.page-wwm .page-title {
  font-family: var(--font-serif);
  font-weight: 300;
  font-size: clamp(2.8rem, 9vw, 3.9rem);
  line-height: 0.95;
  letter-spacing: -0.02em;
  color: var(--charcoal);
}

.page-wwm .page-header__right { padding-bottom: 0.5rem; }

@media (min-width: 900px) {
  .page-wwm .page-header__grid {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: clamp(3rem, 6vw, 6rem);
  }
  .page-wwm .page-title { font-size: clamp(3.5rem, 7vw, 7rem); }
}


/* 02  Section grid and headings ------------------------------------------- */

.page-wwm .for-whom,
.page-wwm .how-it-works,
.page-wwm .not-for {
  padding-block: clamp(5rem, 9vw, 8rem);
}

.page-wwm .how-starts {
  padding-block: clamp(5rem, 11vw, 10rem);
}

.page-wwm .split {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 3rem;
  align-items: start;
}

@media (min-width: 900px) {
  .page-wwm .split {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.4fr);
    gap: clamp(4rem, 7vw, 8rem);
  }
}

.page-wwm .wwm-h2 {
  font-family: var(--font-serif);
  font-weight: 400;
  font-size: clamp(2rem, 3vw, 3rem);
  line-height: 1.2;
  color: var(--fg);
}

.page-wwm .wwm-h2 em {
  font-style: italic;
  font-weight: 300;
}


/* 03  Who this is for ------------------------------------------------------ */

.page-wwm .for-whom__body { max-width: 38rem; }

.page-wwm .for-whom__body p {
  font-family: var(--font-serif);
  font-size: 1.22rem;
  line-height: 1.9;
  color: var(--charcoal);
  text-wrap: pretty;
}

.page-wwm .for-whom__body p + p { margin-top: 1.5rem; }

.page-wwm .for-whom__cta { margin-top: 2.8rem; }


/* 04  The work ------------------------------------------------------------- */

.page-wwm .steps { list-style: none; }

.page-wwm .step {
  display: grid;
  grid-template-columns: 2.5rem minmax(0, 1fr);
  gap: 1rem;
  align-items: start;
  padding: 2.5rem 0;
  border-bottom: 1px solid var(--rule);
}

.page-wwm .step:first-child { border-top: 1px solid var(--rule); }

/* 24px: large text, so Stone reaches the 3 : 1 it needs. */
.page-wwm .step__num {
  font-family: var(--font-serif);
  font-weight: 300;
  font-size: 1.5rem;
  line-height: 1.2;
  color: var(--stone);
}

.page-wwm .step__title {
  margin-bottom: 0.6rem;
  font-family: var(--font-serif);
  font-weight: 400;
  font-size: 1.3rem;
  line-height: 1.35;
  color: var(--fg);
}

.page-wwm .step__body {
  max-width: 34rem;
  font-size: 1rem;
  line-height: 1.8;
  color: var(--fg-muted);
  text-wrap: pretty;
}

@media (min-width: 480px) {
  .page-wwm .step { grid-template-columns: 3rem minmax(0, 1fr); gap: 2rem; }
}


/* 05  Where this doesn't fit (data-dark) ---------------------------------- */

.page-wwm .not-for__heading {
  font-weight: 300;
  line-height: 1.18;
}

.page-wwm .not-for__heading em { color: var(--stone-light); }

.page-wwm .not-for__list { list-style: none; }

.page-wwm .not-for-item {
  display: grid;
  grid-template-columns: 2.5rem minmax(0, 1fr);
  gap: 1rem;
  align-items: baseline;
  padding: 2rem 0;
  border-bottom: 1px solid #2D2A27;
}

.page-wwm .not-for-item:first-child { border-top: 1px solid #2D2A27; }

.page-wwm .not-for-marker {
  font-family: var(--font-serif);
  font-style: italic;
  font-weight: 300;
  font-size: 1.3rem;
  color: var(--stone);
}

.page-wwm .not-for-text {
  font-family: var(--font-serif);
  font-weight: 300;
  font-size: 1.15rem;
  line-height: 1.75;
  color: #C8C2BA;
  text-wrap: pretty;
}

.page-wwm .not-for-text strong {
  display: block;
  margin-bottom: 0.4rem;
  font-family: var(--font-serif);
  font-style: normal;
  font-weight: 400;
  font-size: 1.25rem;
  line-height: 1.5;
  color: var(--parchment);
}

@media (min-width: 480px) {
  .page-wwm .not-for-item { grid-template-columns: 3rem minmax(0, 1fr); gap: 2rem; }
}


/* 06  How it starts -------------------------------------------------------- */

.page-wwm .starts-heading {
  margin-bottom: 1.5rem;
  font-weight: 300;
  font-size: clamp(2.2rem, 3.5vw, 3.5rem);
  line-height: 1.18;
}

.page-wwm .starts-sub {
  max-width: 24rem;
  font-family: var(--font-serif);
  font-style: italic;
  font-size: 1.15rem;
  line-height: 1.75;
  color: var(--fg-muted);
  text-wrap: pretty;
}

/* Offers: name and price above the detail on narrow columns, side by side
   once the column itself is wide enough (container query, so it works in
   the one-column and the two-column layout alike). */
.page-wwm .offers { container-type: inline-size; }

.page-wwm .offer {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 0.6rem;
  padding: 2rem 0;
  border-bottom: 1px solid var(--rule);
}

.page-wwm .offer:first-child { border-top: 1px solid var(--rule); }

@container (min-width: 34rem) {
  .page-wwm .offer {
    grid-template-columns: 14rem minmax(0, 1fr);
    gap: 3rem;
    align-items: baseline;
    padding: 2.5rem 0;
  }
}

.page-wwm .offer__name {
  font-family: var(--font-serif);
  font-weight: 400;
  font-size: 1.3rem;
  line-height: 1.35;
  color: var(--charcoal);
  white-space: nowrap;
}

.page-wwm .offer__price {
  margin-top: 0.3rem;
  font-family: var(--font-serif);
  font-style: italic;
  font-size: 1.05rem;
  line-height: 1.5;
  color: var(--fg-muted);
}

.page-wwm .offer__detail {
  font-size: 1rem;
  line-height: 1.75;
  color: var(--fg-muted);
  text-wrap: pretty;
}

.page-wwm .offer-meta {
  margin-top: 3rem;
  font-family: var(--font-serif);
  font-style: italic;
  font-size: 1.05rem;
  line-height: 1.8;
  color: var(--fg-muted);
}

.page-wwm .booking-block {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 1.4rem;
  margin-top: 3.5rem;
}

.page-wwm .booking-cta {
  padding: 1.1rem 2.6rem;
  font-size: 0.74rem;
}

.page-wwm .booking-alt {
  max-width: 36rem;
  font-size: 1rem;
  line-height: 1.75;
  color: var(--fg-muted);
  text-wrap: pretty;
}

.page-wwm .booking-alt .mail { color: var(--charcoal); }

/* Never broken: "60–90 minutes." (not after the dash) and "thinking harder." (no single word on the last line of the heading, also below 340px). */
.page-wwm .nowrap { white-space: nowrap; }