/* ==========================================================================
   ADNAN KABIR — about.css
   Loaded ONLY by about.html. Every selector here is new; nothing in this file
   overrides a rule used by index.html, so the homepage cannot be affected.

   The page is built mostly from existing homepage components — .hero,
   .stats__grid, .steps-list, .video, .audit__body, .case, .manifesto,
   .finale, .footer — so only the pieces with no homepage equivalent are
   defined below.
   ========================================================================== */

/* ---------- Generic section wrapper --------------------------------------
   Matches the padding/border of .audit, .cases, .resources and .notes so the
   vertical rhythm is identical to the homepage. */

.page-section {
  padding: var(--section-y) 0;
  border-bottom: 1px solid var(--rule);
}
.section-head { margin-bottom: clamp(2.5rem, 5vw, 3.5rem); }
.section-head .h2 { margin-bottom: .2em; }

/* ---------- § 01 · The Origin --------------------------------------------
   The homepage process rail goes horizontal above 1024px because it is pinned
   and scrubbed. There is no pin here, so this mirrors the rail's vertical
   (small-screen) form and holds it at every width. */

.origin__track {
  position: relative;
  display: grid;
  gap: clamp(1.5rem, 3vw, 2rem);
}
.origin__track .step__node { left: -1.75rem; top: 2rem; margin-left: -4px; }
.origin__track .step__num { margin-bottom: 1rem; }

#origin .step { 
  width: 100%; 
}

@media (min-width: 760px) {
  .origin__track { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (min-width: 1100px) {
  .origin__track { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

/* ---------- § 02 · The Record --------------------------------------------- */

.record__note {
  margin-top: clamp(2.5rem, 5vw, 3.5rem);
  padding: clamp(1.25rem, 3vw, 1.75rem);
  border: 1px dashed var(--rule-2);
  border-radius: var(--r-md);
  color: var(--ink-3);
  font-size: .9375rem;
  max-width: 68ch;
  text-wrap: pretty;
}

/* ---------- § 03 · The Conviction ----------------------------------------- */

.conviction__intro {
  margin-bottom: clamp(2rem, 4vw, 3rem);
  color: var(--ink-2);
  font-size: 1.0625rem;
  max-width: 60ch;
  text-wrap: pretty;
}

/* Same visual language as .case__block--result on the homepage. */
.pull {
  margin-top: clamp(2.5rem, 5vw, 3.5rem);
  padding: clamp(1.5rem, 3vw, 2rem);
  background: var(--accent-soft);
  border-left: 2px solid var(--accent);
  border-radius: 0 var(--r-md) var(--r-md) 0;
}
.pull__k { color: var(--accent-text); font-size: 1rem; margin-bottom: .6rem; }
.pull__title {
  font-size: clamp(1.375rem, 3vw, 2rem);
  font-weight: 700;
  margin-bottom: .5rem;
}
.pull__body { color: var(--ink-2); max-width: 52ch; text-wrap: pretty; }

/* ---------- § 04 · In His Words ------------------------------------------- */

.clip__body { color: var(--ink-2); font-size: .9375rem; text-wrap: pretty; }

/* ---------- § 05 · The Engagement ----------------------------------------- */


#clip .audit__body { align-items: center; }

.engagement__body { color: var(--ink-3); font-size: .9375rem; max-width: 46ch; }

.fit__grid {
  display: grid;
  gap: clamp(1.25rem, 2.5vw, 1.75rem);
  margin-top: clamp(3rem, 6vw, 4.5rem);
}
@media (min-width: 760px) {
  .fit__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

.fit__list { display: grid; gap: 1rem; padding-top: 1.25rem; }
.fit__list li {
  display: flex; gap: .75rem;
  font-size: .9375rem;
  color: var(--ink-2);
  text-wrap: pretty;
}
.fit__list svg {
  width: 1rem; height: 1rem; flex: none;
  margin-top: .34rem;
  fill: none; stroke-width: 2;
  stroke-linecap: round; stroke-linejoin: round;
}
.case.fit--yes {
  background-color: var(--accent-soft);
}
.case.fit--no {
  background-color: var(--elev);
  border-style: solid;
}
.fit--yes .fit__list svg { stroke: var(--accent-text); }
.fit--no  .fit__list svg { stroke: var(--ink-3); }

/* .case sets flex-direction:column for the homepage case files; these cards
   have no meta grid or result block, so they only need the header + list. */
.fit__grid .case { display: block; }

.expect { margin-top: clamp(3rem, 6vw, 4.5rem); }

#origin .lede {
  max-width: 40ch;
}