/* ============================================================
   ABOUT — page-specific styles only
   ============================================================
   The card, its margins, section rhythm, rules and reveal come
   from case-study.css. Only what is unique to this page is here.

   Laid out as a single narrative column rather than a
   two-column composition: name and role, then the copy, then
   where to find me.

   The whole page is meant to sit in one screen, so the vertical
   spacing is measured in vh rather than rem — it compresses on a
   short window instead of pushing content below the fold.
   ============================================================ */

/* ============================================================
   INTRO
   ============================================================ */

.ab-hero-card {
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: clamp(1.125rem, 3.8vh, 3.25rem) var(--card-pad)
           clamp(1.125rem, 3.8vh, 3.25rem) calc(var(--card-pad) + var(--body-indent));
}

.ab-meta {
  display: flex;
  align-items: baseline;
  gap: 1rem;
  margin-bottom: clamp(1.25rem, 3.5vh, 2.5rem);
}

.ab-index {
  font-family: var(--font-sans);
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-3);
}

.ab-name {
  color: var(--ink-3) !important;
}

.ab-title {
  font-family: var(--font-sans);
  font-size: clamp(2.25rem, 5vw, 4rem);
  font-weight: 500;
  line-height: 1;
  letter-spacing: -0.02em;
  color: var(--ink-1);
  margin: 0;
  max-width: 16ch;
}

.ab-prose {
  display: flex;
  flex-direction: column;
  gap: clamp(0.75rem, 2.2vh, 1.5rem);
  max-width: 58ch;
}

/* the opening line carries a little more weight, the way the
   case studies lead with a lede */
.ab-prose p:first-of-type {
  font-size: clamp(1.25rem, 1.8vw, 1.5rem);
  font-weight: 500;
  line-height: 1.45;
  color: var(--ink-1);
}

.ab-links {
  display: flex;
  gap: 0.625rem;
  flex-wrap: wrap;
  margin-top: clamp(0.5rem, 1.5vh, 1rem);
}

/* the shared section padding is tuned for long case studies;
   this page only has one section, so it runs tighter */
.ab-card-section {
  padding-block: clamp(1.125rem, 3.8vh, 3.25rem);
}

.ab-next {
  padding: clamp(0.5rem, 2vh, 1.75rem) var(--gutter) clamp(0.375rem, 1.25vh, 1rem);
}

/* trim the tail below the card */
.ab-main {
  padding-bottom: clamp(0.5rem, 2.5vh, 2.5rem);

  /* The page is meant to sit in one screen, so the card should take the
     height the sticky nav and the footer link leave over rather than
     stopping at the height of its own text and leaving a band of bare
     ground beneath it. 3.75rem is that nav: a 36px button plus its
     0.75rem of padding top and bottom. svh rather than vh so mobile
     browser chrome sliding in and out does not change it. */
  display: flex;
  flex-direction: column;
  min-height: calc(100vh - 3.75rem);
  min-height: calc(100svh - 3.75rem);
}

/* The lower half of the card absorbs the slack: the copy stays put
   under the rule and the card simply runs further down the screen. */
.ab-content-card {
  flex: 1 1 auto;
}

/* ============================================================
   RESPONSIVE
   ============================================================ */

@media (max-width: 768px) {
  .ab-hero-card {
    padding: clamp(1.125rem, 3.5vh, 3rem) var(--space-3);
  }

  .ab-title { max-width: none; }
}