/* ==========================================================================
   about.css — the About page only. Loaded third, after tokens.css and
   site.css. Declares no html font-size: tokens.css owns the rem cascade.

   Sections, in the order copy/about.md fixes the heading hierarchy:
     intro · what I do now · how I work · before this · credentials ·
     capabilities
   The SiteNav and the ContactFooter are shared chrome and live in site.css.

   Every duration, easing and colour here is a token from tokens.css. No raw
   ms value, no raw colour.

   .skip and the .section__title / .section__link furniture used to be
   restated here, because they started life in home.css. They are site chrome
   and now live in site.css; this page gets them from there.
   ========================================================================== */

/* --- Links inside running prose ------------------------------------------ */
/* site.css has .link-accent, which announces itself by sitting where a link
   is expected — the hero's email, the footer's details — and changes only on
   hover. Inside a paragraph that is not enough to find: it leaves a link with
   no affordance at all at rest, for a mouse or anything else. This is the
   underlined variant for running text, and it belongs in site.css the moment
   a second page needs one. */
.link-inline {
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-decoration-color: var(--line-strong);
  text-underline-offset: .22em;
  transition: color var(--t-hover) var(--ease-out), text-decoration-color var(--t-hover) var(--ease-out);
}
.link-inline:hover { color: var(--accent); text-decoration-color: var(--accent); }

/* --- Intro ---------------------------------------------------------------- */
/* The heading is the name alone — Q1 answered in the first glance — and the
   sentence beneath it carries the applications headline next to the held
   title, which is what keeps the headline from reading as a job title
   (AC-A2). The padding clears the fixed nav so it never covers the first line
   of the heading (00-shared.md AC-5). */
.intro {
  padding-top: calc(var(--nav-h) + 4.5rem);
  padding-bottom: calc(var(--section) * .6);
}

.intro__name {
  margin-top: 2rem;
  font-family: var(--font-display);
  font-weight: 400;
  font-size: var(--fs-h1);
  line-height: var(--lh-h1);
  letter-spacing: var(--track-heading);
  text-transform: uppercase;
  white-space: nowrap;
  --rv-dur: var(--t-heading);
}
@media (min-width: 1024px) {
  .intro__name { font-size: var(--fs-display); line-height: var(--lh-display); }
}

.intro__body {
  margin-top: 3rem;
  max-width: 44rem;
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
  --rv-dur: var(--t-body);
}

.intro__lead { font-size: var(--fs-lead); line-height: var(--lh-lead); }

/* --- Long-form prose ------------------------------------------------------ */
/* Body text on this page stays at full foreground strength rather than
   dropping to --muted. It is the longest reading passage on the site and
   G-N8 records that no contrast target has been set for either token set, so
   the most legible of the two available choices is the right default here;
   --muted is kept for labels, periods and attribution lines. */
.prose {
  margin-top: 3.5rem;
  max-width: 44rem;
  display: flex;
  flex-direction: column;
  gap: 1.75rem;
}

/* A figure and the employer and period it belongs to, bound into the one unit
   a visitor reads together (AC-A21, 00-shared.md AC-35). */
.block {
  display: flex;
  flex-direction: column;
  gap: .75rem;
  border-left: 2px solid var(--accent);
  padding-left: 1.5rem;
}

.source {
  font-size: var(--fs-eyebrow);
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: var(--track-eyebrow-tight);
  color: var(--muted);
}

/* --- How I work ----------------------------------------------------------- */
/* Five cells, so the 1px-gap grid the home page uses for its three principles
   would leave a filled empty cell on the last row. Borders per cell instead. */
.tenets {
  margin-top: 4rem;
  display: grid;
  gap: 2.5rem 2rem;
  --rv-dur: var(--t-list);
}
@media (min-width: 640px) { .tenets { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1024px) { .tenets { grid-template-columns: repeat(3, 1fr); } }

.tenet {
  display: flex;
  flex-direction: column;
  gap: .75rem;
  border-top: 1px solid var(--line-strong);
  padding-top: 1.5rem;
}

.tenet__n {
  font-size: var(--fs-eyebrow);
  font-weight: 500;
  letter-spacing: var(--track-stat);
  color: var(--accent);
}
.tenet__t { font-size: var(--fs-h3); line-height: var(--lh-h3); font-weight: 600; }
.tenet p:not(.tenet__n):not(.tenet__t) { color: var(--muted); }

/* --- Before this ---------------------------------------------------------- */
.jobs {
  margin-top: 4rem;
  display: flex;
  flex-direction: column;
  --rv-dur: var(--t-card);
}

.job {
  border-top: 1px solid var(--line);
  padding-block: 2.5rem;
}
.job:last-child { border-bottom: 1px solid var(--line); }

/* The period sits inside the heading, so every figure in the block below has
   its employer and period in the unit a visitor reads as one. */
.job__title {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: .5rem 1.25rem;
  font-size: var(--fs-h3);
  line-height: var(--lh-h3);
  font-weight: 600;
}

.job__when {
  font-size: var(--fs-eyebrow);
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: var(--track-eyebrow-tight);
  color: var(--muted);
}

.job__body {
  margin-top: 1.75rem;
  max-width: 48rem;
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
}

.job__org { color: var(--muted); }

/* The three Andersen titles are one progression. Listed with their own
   periods as well as narrated, because AC-A1 asks for the periods and the
   prose gives start months only. */
.steps {
  display: flex;
  flex-direction: column;
  gap: .6rem;
  border-left: 2px solid var(--accent);
  padding-left: 1.5rem;
}
.steps li { display: grid; gap: .15rem; }
@media (min-width: 640px) {
  .steps li { grid-template-columns: 11rem 1fr; gap: 1rem; align-items: baseline; }
}

.steps__when {
  font-size: var(--fs-eyebrow);
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: var(--track-eyebrow-tight);
  color: var(--muted);
}
.steps__what { font-weight: 500; }

.tools {
  border-top: 1px solid var(--line);
  padding-top: 1.25rem;
  font-size: var(--fs-eyebrow);
  line-height: 1.8;
  color: var(--muted);
}

/* --- Credentials ---------------------------------------------------------- */
.creds__grid {
  margin-top: 4rem;
  display: grid;
  gap: 3rem 2.5rem;
  --rv-dur: var(--t-list);
}
@media (min-width: 768px) { .creds__grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1024px) { .creds__grid { grid-template-columns: repeat(3, 1fr); } }

.cred {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  border-top: 1px solid var(--line-strong);
  padding-top: 1.5rem;
}

/* An h3 styled as a label. It is still a heading in the outline; the page's
   own section headings carry the weight. */
.cred__title {
  font-size: var(--fs-eyebrow);
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: var(--track-stat);
  color: var(--muted);
}

.cred__lead { font-size: var(--fs-lead); line-height: var(--lh-lead); }

.cred__when {
  font-size: var(--fs-eyebrow);
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: var(--track-eyebrow-tight);
  color: var(--muted);
}

.cred__detail { color: var(--muted); }

.cred__list { display: flex; flex-direction: column; }

.cred__list li {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: baseline;
  gap: .25rem 1rem;
  border-bottom: 1px solid var(--line);
  padding-block: .7rem;
}
.cred__list li:first-child { padding-top: 0; }

.cred__list li span {
  flex: none;
  font-size: var(--fs-eyebrow);
  letter-spacing: var(--track-eyebrow-tight);
  color: var(--muted);
}

/* Plain text in the page, not behind a control of any kind (AC-A28). */
.langs { display: grid; grid-template-columns: repeat(2, 1fr); gap: .8rem 1.5rem; }
.langs li { display: flex; align-items: baseline; gap: .6rem; }
.langs li span {
  font-size: var(--fs-eyebrow);
  font-weight: 500;
  letter-spacing: var(--track-stat);
  color: var(--accent);
}

/* --- Capabilities --------------------------------------------------------- */
.caps__grid {
  margin-top: 4rem;
  display: grid;
  /* min() on the track floor, not a bare 22rem: below about 400px the floor
     would exceed the container and the longest capability line would be
     clipped by main's overflow-x rather than wrapping (00-shared.md AC-16). */
  grid-template-columns: repeat(auto-fit, minmax(min(22rem, 100%), 1fr));
  gap: 2.5rem;
  --rv-dur: var(--t-list);
}

.cap {
  display: flex;
  flex-direction: column;
  gap: .75rem;
  border-top: 1px solid var(--line-strong);
  padding-top: 1.25rem;
}

.cap dt { font-size: var(--fs-lead); line-height: var(--lh-lead); font-weight: 600; }
.cap dd { color: var(--muted); }

/* --- Narrow screens ------------------------------------------------------- */
/* Nothing on this page depends on two columns: every grid above collapses to
   one, and these drop the display sizes so no line is clipped at 375px
   (00-shared.md AC-16, AC-18, AC-40 on this page). */
@media (max-width: 640px) {
  .intro { padding-top: calc(var(--nav-h) + 2.5rem); }
  .intro__name { margin-top: 1.5rem; }
  .intro__body { margin-top: 2rem; }
  .intro__lead { font-size: var(--fs-body); line-height: var(--lh-body); }
  .prose { margin-top: 2.5rem; }
  .tenet__t { font-size: var(--fs-lead); line-height: var(--lh-lead); }
  .job__title { font-size: var(--fs-lead); line-height: var(--lh-lead); }
  .cred__lead { font-size: var(--fs-body); line-height: var(--lh-body); }
  .langs { grid-template-columns: 1fr; }
}