/* Concept A — "How Andrew Learned to See" — editorial timeline.
   Prefix: frm-  (formation). Distinct visual treatment: a coral spine
   running down a reading column, numbered chapters as nodes, the final
   chapter elevated on a coral wash. */

/* ── Hero ── */
.frm-hero { padding-block: clamp(56px, 8vw, 104px) clamp(36px, 5vw, 64px); }
.frm-hero__grid {
  display: grid; grid-template-columns: 1.18fr 0.82fr;
  gap: var(--nf-space-section-gap); align-items: center;
}
.frm-hero__text { display: flex; flex-direction: column; gap: clamp(20px, 2.4vw, 28px); }
.frm-hero__title {
  font-family: var(--font-display); font-weight: var(--fw-extrabold);
  text-transform: uppercase; letter-spacing: var(--tracking-title);
  font-size: clamp(44px, 6.4vw, 88px); line-height: 0.96; color: var(--nf-navy); margin: 0;
}
.frm-hero__lead {
  font-size: clamp(17px, 1.5vw, 21px); line-height: 1.7; color: var(--nf-ink-600);
  max-width: 42ch; margin: 0; text-wrap: pretty;
}
.frm-hero__media {
  position: relative; overflow: hidden; aspect-ratio: 4/5;
  border-radius: var(--radius-lg); border-bottom-left-radius: var(--radius-curve);
  background: var(--nf-navy); margin: 0; box-shadow: var(--shadow-md);
}
.frm-hero__media img { width: 100%; height: 100%; object-fit: cover; object-position: center 74%; display: block; transform: scale(1.22); transform-origin: center 40%; }
.frm-hero__rotlabel {
  position: absolute; top: 18px; left: 16px;
  writing-mode: vertical-rl; transform: rotate(180deg);
  font-family: var(--font-display); font-weight: var(--fw-semibold);
  text-transform: uppercase; letter-spacing: var(--tracking-label);
  font-size: var(--text-xs); color: rgba(255,255,255,0.92);
  text-shadow: 0 1px 8px rgba(7,37,118,0.45); pointer-events: none;
}

/* ── The timeline ── */
.frm-line { padding-block: clamp(40px, 6vw, 80px) clamp(56px, 8vw, 104px); }
.frm-track { list-style: none; margin: 0 auto; padding: 0; max-width: 760px; position: relative; }
/* the spine */
.frm-track::before {
  content: ""; position: absolute; left: 23px; top: 12px; bottom: 12px; width: 2px;
  background: linear-gradient(var(--nf-coral), rgba(235,144,130,0.35));
}
.frm-chapter {
  position: relative; padding-left: clamp(58px, 7vw, 78px);
  padding-bottom: clamp(40px, 5.5vw, 64px);
}
.frm-chapter:last-child { padding-bottom: 0; }
.frm-chapter__node {
  position: absolute; left: 16px; top: 7px; width: 16px; height: 16px; border-radius: 50%;
  background: var(--nf-paper); border: 3px solid var(--nf-coral); z-index: 1;
}
.frm-chapter__node--end { background: var(--nf-coral); }
.frm-chapter__num {
  font-family: var(--font-display); font-weight: var(--fw-semibold);
  text-transform: uppercase; letter-spacing: var(--tracking-label);
  font-size: var(--text-xs); color: var(--nf-coral-700); margin-bottom: 10px;
}
.frm-chapter__title {
  font-family: var(--font-display); font-weight: var(--fw-extrabold);
  text-transform: uppercase; letter-spacing: var(--tracking-title);
  font-size: clamp(21px, 2.5vw, 31px); line-height: 1.1; color: var(--nf-navy);
  margin: 0 0 14px; text-wrap: balance;
}
.frm-chapter__body {
  font-size: var(--text-md); line-height: 1.78; color: var(--nf-ink-600); margin: 0;
  max-width: 54ch; text-wrap: pretty;
}
.frm-chapter__body em { color: var(--nf-navy); font-style: italic; }
.frm-chapter__body--cont { margin-top: 1.1em; }

/* the elevated conclusion */
.frm-chapter--end { padding-bottom: 0; }
.frm-conclusion {
  background: var(--nf-white);
  border: 1px solid var(--nf-hairline);
  box-shadow: 0 2px 16px rgba(7,37,118,0.06);
  border-radius: var(--radius-lg); border-bottom-left-radius: var(--radius-curve);
  padding: clamp(28px, 3.4vw, 44px) clamp(28px, 3.6vw, 48px);
  display: flex; flex-direction: column; gap: clamp(12px, 1.4vw, 16px);
}
.frm-conclusion__label {
  font-family: var(--font-display); font-weight: var(--fw-semibold);
  text-transform: uppercase; letter-spacing: var(--tracking-label);
  font-size: var(--text-xs); color: var(--nf-coral);
}
.frm-conclusion__title {
  font-family: var(--font-display); font-weight: var(--fw-extrabold);
  text-transform: uppercase; letter-spacing: var(--tracking-title);
  font-size: clamp(24px, 3vw, 38px); line-height: 1.06; color: var(--nf-navy); margin: 0;
  text-wrap: balance;
}
.frm-conclusion__body {
  font-size: var(--text-md); line-height: 1.74; color: var(--nf-ink); margin: 0;
  max-width: 52ch; text-wrap: pretty;
}

/* ── Endorsement — independent validation, a voice on the same line ── */
.frm-endorse { padding-block: clamp(8px, 2vw, 24px) clamp(8px, 2vw, 20px); }
/* Constrain the shared .nf-perspective card to match the timeline track width */
.frm-endorse .nf-perspective {
  max-width: 760px;
  margin-inline: auto;
  margin-top: 0;
}
/* The shared arcs motif is sized for a narrow column (60% width); on this
   wide card that balloons to ~450px. Cap it to a corner accent. */
.frm-endorse .nf-perspective__arcs { width: min(240px, 34%); right: -48px; bottom: -56px; }
.frm-endorse__inner {
  max-width: 760px; margin: 0 auto; padding: 0 0 0 44px;
  position: relative;
}
/* a short coral spine — the same line the timeline ran down, now carrying another voice */
.frm-endorse__inner::before {
  content: ""; position: absolute; left: 23px; top: 6px; bottom: 6px;
  width: 2px; background: var(--nf-coral);
}
.frm-endorse__tick {
  position: absolute; left: 17px; top: 6px; width: 14px; height: 14px;
}
.frm-endorse__tick::before,
.frm-endorse__tick::after {
  content: ""; position: absolute; background: var(--nf-coral);
}
.frm-endorse__tick::before { left: 6px; top: 0; width: 2px; height: 14px; }
.frm-endorse__tick::after { left: 0; top: 6px; width: 14px; height: 2px; }
.frm-endorse__quote {
  margin: 0; font-size: clamp(1.18rem, 1.05rem + 0.6vw, 1.5rem);
  line-height: 1.56; color: var(--nf-ink); text-wrap: pretty; max-width: 56ch;
  font-weight: var(--fw-medium);
}
.frm-endorse__by {
  margin-top: clamp(18px, 2vw, 24px); display: flex; flex-direction: column; gap: 3px;
}
.frm-endorse__name {
  font-family: var(--font-display); font-weight: var(--fw-semibold);
  text-transform: uppercase; letter-spacing: var(--tracking-label);
  font-size: var(--text-sm); color: var(--nf-navy);
}
.frm-endorse__role {
  font-size: var(--text-sm); color: var(--nf-ink-600);
}

/* ── Human coda ── */
.frm-coda { padding-block: 0 clamp(64px, 9vw, 116px); }
.frm-coda__inner {
  max-width: 760px; margin: 0 auto; padding-top: clamp(36px, 5vw, 56px);
  border-top: 1px solid var(--nf-hairline);
  display: flex; flex-direction: column; gap: 14px;
}
.frm-coda__label {
  font-family: var(--font-display); font-weight: var(--fw-semibold);
  text-transform: uppercase; letter-spacing: var(--tracking-label);
  font-size: var(--text-xs); color: var(--nf-coral-700);
}
.frm-coda__body {
  font-size: var(--text-base); line-height: 1.74; color: var(--nf-ink-600); margin: 0;
  max-width: 60ch; text-wrap: pretty;
}

@media (max-width: 920px) {
  .frm-hero__grid { grid-template-columns: 1fr; gap: 36px; }
  .frm-hero__media { aspect-ratio: 3/2; max-height: 380px; order: -1; }
  /* the desktop zoom crops the face out of the landscape frame — reset it
     and centre the crop window on the head */
  .frm-hero__media img { transform: none; object-position: center 38%; }
}