/* =============================================================
   Parallax Thinking — Appraisal page styles.
   Layered on top of parallax-tokens.css + site-v3.css.
   Six reading rhythms, all built from compositional patterns
   already on the site. No new devices invented.
   ============================================================= */

/* =============================================================
   1 · HERO — tighter than homepage, no master crop.
   Caps-small meta-line above, single-line display headline.
   Slightly quieter than the homepage hero (child page).
   ============================================================= */
.appraisal-hero {
  width: min(1240px, calc(100% - 96px));
  margin-inline: auto;
  padding: 80px 0;
}
.appraisal-hero__meta {
  font-family: var(--font-sans);
  font-weight: 500;
  font-size: 12px;
  line-height: 1;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--pt-pale-lunar);
  margin: 0 0 36px;
}
.appraisal-hero__headline {
  font-family: var(--font-serif);
  font-weight: 400;
  /* Display scale, but quieter than homepage hero (78px).
     Sized to fit on a single line in the 1240px container at
     desktop widths; brief is explicit that this headline is one
     line. No max-width, no text-wrap balance. */
  font-size: clamp(32px, 3.8vw, 52px);
  line-height: 1.18;
  letter-spacing: 0;
  color: var(--pt-deep-space);
  margin: 0;
  white-space: nowrap;
}
.appraisal-hero__stance {
  font-family: var(--font-serif);
  font-style: italic;
  font-weight: 400;
  font-size: clamp(19px, 2vw, 22px);
  line-height: 1.4;
  color: var(--pt-pale-lunar);
  margin: 32px 0 0;
  max-width: 36ch;
  text-wrap: pretty;
}

/* =============================================================
   Shared section rhythm for the appraisal page.
   Each section gets its own data-modifier; spacing is consistent.
   ============================================================= */
.appraisal-section {
  padding: 80px 0;
}
.appraisal-section__container {
  width: min(1240px, calc(100% - 96px));
  margin-inline: auto;
}
.appraisal-section__head {
  display: flex;
  flex-direction: column;
  gap: 24px;
  margin-bottom: 48px;
}
.appraisal-section__eyebrow {
  font-family: var(--font-sans);
  font-weight: 500;
  font-size: 12px;
  line-height: 1;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--pt-pale-lunar);
  margin: 0;
}
.appraisal-section__headline {
  font-family: var(--font-serif);
  font-weight: 400;
  font-size: clamp(30px, 3.2vw, 44px);
  line-height: 1.12;
  letter-spacing: 0;
  color: var(--pt-deep-space);
  margin: 0;
  max-width: 22ch;
  text-wrap: pretty;
}
.appraisal-section .body-prose + .body-prose {
  margin-top: 1.2em;
}

/* =============================================================
   2 · SIDEBAR CONTRAST — pull-quote ↔ prose.
   Mirrors homepage Section 05 (.why__grid). 4:1:7 columns.
   ============================================================= */
.appraisal-contrast .appraisal-contrast__grid {
  display: grid;
  grid-template-columns: 4fr 1fr 7fr;
  align-items: start;
}
.appraisal-contrast__stance {
  grid-column: 1;
  padding-right: 20px;
}
.appraisal-contrast__pullquote {
  font-family: var(--font-serif);
  font-style: italic;
  font-weight: 400;
  font-size: 22px;
  line-height: 1.4;
  color: var(--pt-pale-lunar);
  margin: 0;
  text-wrap: pretty;
  max-width: 22ch;
}
.appraisal-contrast__content {
  grid-column: 3;
  max-width: 56ch;
}
.appraisal-contrast__content .appraisal-section__head {
  margin-bottom: 36px;
}

/* =============================================================
   3 · SPEC SIDEBAR — prose ↔ stacked typographic spec list.
   8:4 grid. The supporting column carries a quiet table-of-contents
   for what the document contains. New typographic device on this
   page; built from existing brand primitives (hairlines + Hanken
   Medium 17px). No bullets.
   ============================================================= */
.appraisal-spec .appraisal-spec__grid {
  display: grid;
  grid-template-columns: 8fr 4fr;
  gap: 96px;
  align-items: start;
}
.appraisal-spec__content {
  max-width: 56ch;
}
.appraisal-spec__list {
  /* Sits visually aligned with the prose top edge. The headline
     above takes more vertical space, so we offset the list a touch
     so the first item lines up with the body's baseline. */
  margin: 0;
  padding: 0;
  list-style: none;
  border-top: 1px solid var(--pt-pale-lunar-30);
  /* Tiny offset so the list sits with the body, not the headline. */
  margin-top: 8px;
}
.appraisal-spec__item {
  font-family: var(--font-sans);
  font-weight: 500;
  font-size: 17px;
  line-height: 1.45;
  color: var(--pt-deep-space);
  margin: 0;
  padding: 18px 0;
  border-bottom: 1px solid var(--pt-pale-lunar-30);
  text-wrap: pretty;
}

/* =============================================================
   4 · SINGLE STATEMENT — shortest section on the page.
   No grid. Headline one tier larger. Generous whitespace.
   The page's moment of exhale.
   ============================================================= */
.appraisal-statement {
  padding: 152px 0;
}
.appraisal-statement__container {
  width: min(1240px, calc(100% - 96px));
  margin-inline: auto;
}
.appraisal-statement__inner {
  max-width: 760px;
}
.appraisal-statement__eyebrow {
  font-family: var(--font-sans);
  font-weight: 500;
  font-size: 12px;
  line-height: 1;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--pt-pale-lunar);
  margin: 0 0 32px;
}
.appraisal-statement__headline {
  font-family: var(--font-serif);
  font-weight: 400;
  font-size: clamp(40px, 4.4vw, 56px);
  line-height: 1.1;
  letter-spacing: 0;
  color: var(--pt-deep-space);
  margin: 0 0 40px;
  max-width: 18ch;
  text-wrap: balance;
}
.appraisal-statement__body {
  font-family: var(--font-sans);
  font-weight: 400;
  font-size: 18px;
  line-height: 1.6;
  color: var(--pt-deep-space);
  margin: 0;
  max-width: 52ch;
  text-wrap: pretty;
}

/* =============================================================
   5 · PRICE MOMENT — the price IS the headline.
   Largest Newsreader tier on the page. Eyebrow above. Prose
   below in tight measure. Anchored to the dominant 8-col with
   the supporting 4-col empty — the empty space is the point.
   ============================================================= */
.appraisal-price .appraisal-price__grid {
  display: grid;
  grid-template-columns: 8fr 4fr;
  gap: 96px;
  align-items: start;
}
.appraisal-price__content {
  max-width: 56ch;
}
.appraisal-price__eyebrow {
  font-family: var(--font-sans);
  font-weight: 500;
  font-size: 12px;
  line-height: 1;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--pt-pale-lunar);
  margin: 0 0 28px;
}
.appraisal-price__figure {
  font-family: var(--font-serif);
  font-weight: 400;
  font-size: clamp(72px, 8.4vw, 96px);
  line-height: 1;
  letter-spacing: 0;
  color: var(--pt-deep-space);
  margin: 0 0 48px;
}
.appraisal-price__body {
  font-family: var(--font-sans);
  font-weight: 400;
  font-size: 17px;
  line-height: 1.6;
  color: var(--pt-deep-space);
  margin: 0 0 1.2em;
  max-width: 52ch;
  text-wrap: pretty;
}
.appraisal-price__body:last-child { margin-bottom: 0; }

/* =============================================================
   6 · HOW TO START — single column, prose-led.
   Headline + body + italic closer + email as a typographic
   moment at the bottom of the section. Email sits beneath a
   Pale Lunar hairline, set in Newsreader at lede size; hover
   lifts to Solar Gold — the page's only Solar Gold instance,
   earned because it's the moment of action.
   ============================================================= */
.appraisal-start__content {
  max-width: 56ch;
}
.appraisal-start__closer {
  font-family: var(--font-serif);
  font-style: italic;
  font-weight: 400;
  font-size: 20px;
  line-height: 1.45;
  color: var(--pt-deep-space);
  margin: 1.6em 0 0;
  max-width: 38ch;
  text-wrap: pretty;
}
.appraisal-start__contact {
  margin-top: 56px;
  padding-top: 28px;
  border-top: 1px solid var(--pt-pale-lunar);
}
.appraisal-start__email {
  display: inline-block;
  font-family: var(--font-serif);
  font-weight: 400;
  font-size: clamp(24px, 2.4vw, 32px);
  line-height: 1.25;
  letter-spacing: 0;
  color: var(--pt-deep-space);
  text-decoration: none;
  /* Hover lifts to Solar Gold — the page's only accent. */
  transition: color 220ms cubic-bezier(0.2, 0, 0, 1);
}
.appraisal-start__email:hover,
.appraisal-start__email:focus-visible {
  color: var(--pt-solar-gold);
  outline: none;
}

/* =============================================================
   MOBILE — collapse splits, type one tier down, preserve rhythm.
   ============================================================= */
@media (max-width: 920px) {
  .appraisal-hero {
    width: calc(100% - 40px);
    display: flex;
    flex-direction: column;
    justify-content: center;
    height: calc(100vh - 56px);
    padding: 24px 0;
  }
  .appraisal-hero__meta { margin-bottom: 24px; }
  .appraisal-hero__headline {
    font-size: clamp(28px, 6.6vw, 40px);
    /* Allow wrapping on narrow viewports — single-line discipline
       only applies at the desktop tier where the container can hold
       the full string. */
    white-space: normal;
    text-wrap: balance;
  }
  .appraisal-hero__stance { margin-top: 24px; }

  .appraisal-section { padding: 80px 0; }
  .appraisal-section__container { width: calc(100% - 40px); }
  .appraisal-section__head { margin-bottom: 28px; gap: 18px; }
  .appraisal-section__headline { font-size: clamp(26px, 6.4vw, 32px); }

  /* Pull-quote moved to hero — collapse contrast grid to a single column. */
  .appraisal-contrast { padding-top: 80px; }
  .appraisal-contrast .appraisal-contrast__grid {
    grid-template-columns: 1fr;
    gap: 0;
  }
  .appraisal-contrast__content {
    grid-column: 1;
    padding: 0;
  }

  /* Spec sidebar collapses; the list sits below the prose. */
  .appraisal-spec .appraisal-spec__grid {
    grid-template-columns: 1fr;
    gap: 32px;
  }
  .appraisal-spec__list { margin-top: 0; }

  /* Statement section. */
  .appraisal-statement { padding: 88px 0; }
  .appraisal-statement__container { width: calc(100% - 40px); }
  .appraisal-statement__headline { font-size: clamp(32px, 8vw, 42px); }
  .appraisal-statement__body { font-size: 17px; }

  /* Price moment. */
  .appraisal-price .appraisal-price__grid {
    grid-template-columns: 1fr;
    gap: 32px;
  }
  .appraisal-price__figure { font-size: clamp(60px, 16vw, 88px); margin-bottom: 32px; }

  /* Section 6. */
  .appraisal-start__contact {
    margin-top: 40px;
    padding-top: 24px;
  }
  .appraisal-start__email { font-size: clamp(20px, 5.6vw, 26px); }
  .appraisal-start__closer { font-size: 18px; }

  .body-prose { font-size: 16px; }
}