/* ============================================================
   About — the story, told as a path.

   Editorial and quiet: the same paper, DM Sans and Instrument
   Serif italic as the rest of the site, one reading column, and
   a dashed line down the left that the chapter numbers sit on.
   The arrows are drawn by hand (irregular béziers, round caps)
   in the accent orange so they read as marker on paper, not as
   UI. Everything is scoped under .hm-about.
   ============================================================ */
.hm-about {
  --ab-gut: clamp(20px, 5vw, 72px);
  --ab-col: 62ch;                 /* one comfortable reading measure */
  --ab-rail: clamp(44px, 6vw, 92px);
}
/* no top padding to speak of: the sticky .ab__top header sits above this and
   the paper scrolls up under it, the same as the homepage and the archive */
.hm-about__inner {
  max-width: 1180px; margin-inline: auto;
  padding: clamp(6px, 1.6vh, 20px) var(--ab-gut) clamp(70px, 12vh, 140px);
}

/* The drawn marks. Ink, not orange, and drawn on rather than simply present:
   the same pen the homepage's "Here's how" arrow uses, at the same weight,
   on the same two-stage loop (the stroke first, its tip a beat later). */
.ab-arrow { color: var(--hm-ink); display: block; opacity: .75; }
.ab-arrow__line {
  stroke-dasharray: 100;
  animation: hm-down-draw 2.5s var(--hm-ease) infinite;
}
.ab-arrow__tip {
  stroke-dasharray: 100;
  animation: hm-down-tip 2.5s var(--hm-ease) infinite;
}
@media (prefers-reduced-motion: reduce) {
  .ab-arrow__line, .ab-arrow__tip { animation: none; stroke-dashoffset: 0; }
}

/* ---------- hero ---------- */
.ab-hero {
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, .86fr);
  gap: clamp(28px, 5vw, 72px); align-items: center;
  padding: clamp(34px, 7vh, 86px) 0 clamp(40px, 8vh, 96px);
}
.ab-hero__title {
  margin: 0; max-width: 20ch;
  font-size: clamp(31px, 4.4vw, 58px); font-weight: 500;
  line-height: 1.04; letter-spacing: -.045em; color: var(--hm-ink);
}
.ab-hero__title em {
  font-family: "Instrument Serif", Georgia, serif; font-style: italic;
  font-weight: 400; letter-spacing: -.015em;
}
/* the belief now IS the headline, so the supporting line carries the reasoning */
.hm-about .ab-hero__sub {
  margin: clamp(20px, 3vh, 30px) 0 0; max-width: 50ch;
  font-size: clamp(16px, 1.35vw, 19px); line-height: 1.62;
  letter-spacing: -.015em; color: var(--hm-gray-3);
}
.ab-hero__actions { margin-top: clamp(24px, 4vh, 38px); }

.ab-hero__portrait { position: relative; margin: 0; }
/* The portrait carries its own alpha now — her and the notes, no wall — so it
   needs no frame, no crop and no gradient mask. The drop-shadow keeps the
   cut-out from looking pasted on. */
.ab-hero__portrait img {
  width: 100%; height: auto; display: block;
  filter: drop-shadow(0 16px 24px rgba(22, 21, 21, .10));
}
/* ---------- the numbers ----------
   Set with the copy in the left column, under the two buttons and well clear
   of them. No card and no label: just the figure, its caption and a hairline
   between each — the same quiet rhythm the chapters and the note details use,
   at a size that supports the headline rather than competing with it.
   They count up every time the page opens; see countAboutStats(). */
.ab-stats {
  list-style: none; padding: 0;
  margin: clamp(42px, 6.5vh, 66px) 0 0;
  display: flex; flex-wrap: wrap; align-items: flex-start;
  gap: 0 clamp(20px, 2.4vw, 34px);
}
/* the divider belongs BETWEEN the figures, so it hangs off the later ones */
.ab-stat + .ab-stat {
  padding-left: clamp(20px, 2.4vw, 34px);
  border-left: 1px solid var(--hm-line-soft);
}
.hm-about .ab-stat__n {
  display: block; margin-bottom: 4px;
  font-size: clamp(24px, 2.3vw, 31px); font-weight: 500;
  line-height: 1; letter-spacing: -.045em; color: var(--hm-ink);
  font-variant-numeric: tabular-nums;
  transition: color .3s var(--hm-ease);
}
.ab-stat:hover .ab-stat__n { color: var(--hm-accent); }
.hm-about .ab-stat__k {
  display: block; max-width: 13ch;
  font-size: 12.5px; font-weight: 400;
  line-height: 1.35; letter-spacing: -.01em; color: var(--hm-gray-2);
}

/* ---------- awards (chapter 07) ----------
   The plaques and nothing else: no caption, no rule, no shadow pooling under
   them. Each carries a slight tilt that straightens as you reach for it. */
.ab-awards {
  list-style: none; margin: clamp(24px, 4vh, 38px) 0 clamp(8px, 1.4vh, 16px); padding: 0;
  display: flex; flex-wrap: wrap; align-items: center;
  gap: clamp(22px, 3.4vw, 52px);
}
.ab-award { border: 0; }
.ab-award img {
  display: block; height: clamp(62px, 6.4vw, 84px); width: auto; max-width: 104px;
  object-fit: contain;
  transform: rotate(var(--rot, 0deg));
  transition: transform .5s var(--hm-spring);
}
.ab-award:nth-child(1) { --rot: -3deg; }
.ab-award:nth-child(2) { --rot: 2.4deg; }
.ab-award:nth-child(3) { --rot: -1.8deg; }
.ab-award:hover img { transform: translateY(-5px) rotate(0) scale(1.05); }

/* ---------- the short version, as four sticky notes ----------
   Paper, not cards: a squared-off sheet, a strip of tape at the top, a degree
   or two of tilt and the soft double shadow a note casts when it is stuck to a
   wall. The colour stays out of it — the four papers differ only by a few
   points of warmth, so the wall reads as texture rather than as a palette. */
.ab-map { padding: clamp(10px, 2vh, 22px) 0 0; }
.ab-notes {
  list-style: none; margin: 0; padding: clamp(22px, 3.4vh, 38px) 0 0;
  display: grid; grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: clamp(16px, 2.1vw, 28px);
  /* tab row, heading row, detail row — shared by every note via subgrid below */
  grid-template-rows: auto auto 1fr;
  align-items: stretch;
}
.ab-note {
  --paper: #FBF9F4;
  --tilt: -1.4deg;
  --tape: 2deg;
  position: relative;
  display: grid; grid-row: span 3; grid-template-rows: subgrid; row-gap: 0;
  padding: clamp(26px, 2.4vw, 34px) clamp(20px, 2vw, 26px) clamp(20px, 2vw, 26px);
  background: var(--paper);
  border: 0;
  border-radius: 3px;
  /* a hairline contact shadow plus the soft cast one, so it sits ON the paper */
  box-shadow: 0 1px 1px rgba(22, 21, 21, .09),
              0 16px 28px -16px rgba(22, 21, 21, .26);
  transform: rotate(var(--tilt));
  transition: transform .5s var(--hm-spring), box-shadow .5s var(--hm-spring);
}
/* barely-there variation: warmth only, no hue */
.ab-note:nth-child(1) { --paper: #FBF9F4; --tilt: -1.6deg; --tape:  2.5deg; }
.ab-note:nth-child(2) { --paper: #F7F5F0; --tilt:  1.2deg; --tape: -3deg;   }
.ab-note:nth-child(3) { --paper: #FAF8F3; --tilt: -0.8deg; --tape:  3.5deg; }
.ab-note:nth-child(4) { --paper: #F6F4EE; --tilt:  1.7deg; --tape: -2deg;   }
/* the tab is now the strip of tape holding the note up */
.ab-note::before {
  content: ""; position: absolute; top: -10px; left: 50%;
  width: 78px; height: 20px; margin: 0; border-radius: 1px;
  transform: translateX(-50%) rotate(var(--tape));
  /* a very light gold, the same hue as the accent and the aura — enough to
     read as warm tape rather than grey, not enough to become a colour block */
  background: linear-gradient(rgba(255, 255, 255, .62), rgba(255, 255, 255, .16)),
              rgba(200, 144, 26, .22);
  box-shadow: 0 1px 2px rgba(22, 21, 21, .09);
}
/* pick one up: it straightens and lifts off the wall */
.ab-note:hover {
  transform: rotate(0) translateY(-7px) scale(1.02);
  box-shadow: 0 2px 2px rgba(22, 21, 21, .09),
              0 28px 46px -20px rgba(22, 21, 21, .32);
}
/* Subgrid hands all four notes the SAME three rows, so a one-line heading keeps
   the empty half of its row and every rule and detail block starts on one line
   across the set — which is what the mixed one- and two-line headings broke. */
.ab-note::before, .hm-about .ab-note__stage { align-self: start; }
@supports not (grid-template-rows: subgrid) {
  .ab-note { display: block; }
  .hm-about .ab-note__stage { min-height: calc(2 * 1.3em); }
}
.hm-about .ab-note__stage {
  margin: 0 0 15px;
  font-size: clamp(16px, 1.35vw, 18px); font-weight: 500; line-height: 1.3;
  letter-spacing: -.03em; color: var(--hm-ink);
}
.hm-about .ab-note__doing {
  margin: 0; padding-top: 14px;
  border-top: 1px solid rgba(22, 21, 21, .13);
  display: flex; flex-direction: column; gap: 3px;
  font-size: 13px; line-height: 1.5; letter-spacing: -.01em;
  color: rgba(22, 21, 21, .6);
}
.ab-note__doing span { display: block; }

/* ---------- the path ---------- */
.ab-story { padding-top: clamp(56px, 10vh, 116px); }

.ab-ch {
  position: relative;
  display: grid; grid-template-columns: var(--ab-rail) minmax(0, 1fr);
  padding-bottom: clamp(44px, 7vh, 88px);
}
/* The line down the rail, drawn rather than ruled: short pen strokes with the
   wander and the pressure gaps of a hand, generated at real pixel size by
   wireAboutMarks() so the nib never smears. It stops at the last chapter. */
.ab-ch__rail { position: relative; }
.ab-ch__line {
  position: absolute; left: 5px; top: 40px; bottom: calc(-1 * clamp(44px, 7vh, 88px));
  width: 22px; color: var(--hm-ink); opacity: .3;   /* pencil, not ruled line */
  pointer-events: none;
}
.ab-ch__line svg { display: block; width: 100%; height: 100%; overflow: visible; }
/* the nib: the same round-capped ink stroke the frames and arrows are drawn
   with, a shade lighter on the rail so the numbers stay the loudest thing */
.abr__pen {
  fill: none; stroke: currentColor;
  stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round;
}
.abr__pen--bold { stroke-width: 2.6; }
.ab-ch--last .ab-ch__line { display: none; }
.ab-ch__num {
  position: relative; z-index: 1;
  display: grid; place-items: center; width: 32px; height: 32px;
  border-radius: 50%; background: var(--hm-ink); color: #fff;
  font-size: 11.5px; font-weight: 500; letter-spacing: .04em;
  font-variant-numeric: tabular-nums;
}

.ab-ch__title {
  margin: 2px 0 14px; font-size: clamp(23px, 2.7vw, 34px); font-weight: 500;
  line-height: 1.08; letter-spacing: -.04em; color: var(--hm-ink);
}
.hm-about .ab-ch__body p {
  margin: 0 0 16px; max-width: var(--ab-col);
  font-size: clamp(16px, 1.25vw, 17.5px); line-height: 1.68;
  letter-spacing: -.01em; color: var(--hm-gray-3);
}
.hm-about .ab-ch__body p:last-child { margin-bottom: 0; }
.ab-ch__body em { font-style: italic; }

/* a single line that deserves its own breath */
.hm-about p.ab-beat {
  font-family: "Instrument Serif", Georgia, serif; font-style: italic;
  font-size: clamp(21px, 2.1vw, 28px); line-height: 1.32;
  letter-spacing: -.015em; color: var(--hm-ink);
  margin: clamp(20px, 3vh, 28px) 0; max-width: 40ch;
}

/* the same pen again, standing up: no solid rule, no colour block */
.ab-quote { position: relative; margin: 0 0 20px; padding-left: 24px; }
.ab-quote__rule {
  position: absolute; left: 0; top: 2px; bottom: 2px; width: 12px;
  color: var(--hm-ink); pointer-events: none;
}
.ab-quote__rule svg { display: block; width: 100%; height: 100%; overflow: visible; }
.hm-about .ab-quote p {
  font-size: clamp(19px, 1.9vw, 24px); line-height: 1.45;
  letter-spacing: -.025em; color: var(--hm-ink); margin: 0;
}
.ab-quote em {
  font-family: "Instrument Serif", Georgia, serif; font-style: italic; font-weight: 400;
}

/* ---------- pictures ---------- */
.ab-shot { position: relative; margin: 0; }
/* A drawn border on two pictures only — chapter 02's sketch and chapter 04's
   book. Always there, not a hover state, and no corner marks: the same pen as
   the project rows, used as a frame rather than as an effect. Set a little
   outside the picture so the straight strokes clear its rounded corners. */
.ab-frame {
  position: absolute;
  inset: clamp(-13px, -1.1vw, -8px);
  z-index: 2;
  pointer-events: none;
  color: var(--hm-ink);
}
.ab-frame svg { display: block; width: 100%; height: 100%; overflow: visible; }
/* drawn in full and still: the dashoffset the shared stroke style parks at
   100 is what would otherwise leave these invisible until something animates */
.ab-frame .pjf__side { stroke-dashoffset: 0; }
.ab-shot img {
  width: 100%; height: 100%; display: block; object-fit: cover;
  border-radius: 16px; background: var(--hm-card);
}
.hm-about .ab-shot figcaption {
  margin-top: 10px; font-size: 13px; letter-spacing: -.01em; color: var(--hm-gray-2);
}
/* the beat and the book share a row, so a tall figure cannot leave a column of
   empty space beside three lines of text */
.ab-aside {
  display: grid; grid-template-columns: minmax(0, 1fr) 232px;
  gap: clamp(20px, 3vw, 40px); align-items: center;
  margin: clamp(20px, 3vh, 30px) 0 0;
}
.ab-aside .ab-beat { margin: 0; }
.ab-shot--book { margin: 0; }
/* height:auto, not the shared height:100% — inside an auto-height grid item a
   percentage height resolves against nothing and the figure collapses to 0 */
.ab-shot--book img { height: auto; border-radius: 14px; }
@media (max-width: 720px) {
  .ab-aside { grid-template-columns: 1fr; gap: 22px; }
  .ab-shot--book { max-width: 220px; }
}
.ab-shot--sketch {
  max-width: 430px; margin: clamp(20px, 3vh, 30px) 0 0;
  padding: 18px 20px; background: #fff;
  border: 1.4px solid var(--hm-line-soft); border-radius: 18px;
}
.ab-shot--sketch img { object-fit: contain; border-radius: 0; background: none; }

.ab-duo, .ab-trio { display: grid; gap: clamp(12px, 1.6vw, 18px); margin: clamp(22px, 3.4vh, 32px) 0; }
.ab-duo  { grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); align-items: start; }
.ab-trio { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.ab-duo .ab-shot img  { aspect-ratio: 4 / 5; }
.ab-trio .ab-shot img { aspect-ratio: 3 / 4; }
.ab-duo .ab-shot:last-child img { aspect-ratio: 4 / 3; }

/* ---------- logo row ---------- */
.ab-logos {
  list-style: none; display: flex; flex-wrap: wrap; align-items: center;
  gap: clamp(18px, 3vw, 40px); margin: clamp(22px, 3vh, 30px) 0 0; padding: 0;
}
.ab-logos img {
  /* these marks carry a lot of fine detail (a crest, a penny-farthing), so they
     need more height than a wordmark would */
  display: block; height: clamp(30px, 3.4vw, 44px); width: auto;
  filter: grayscale(1); opacity: .72;
  transition: filter .3s var(--hm-ease), opacity .3s var(--hm-ease);
}
.ab-logos li:hover img { filter: none; opacity: 1; }

/* ---------- closing ---------- */
.ab-end { text-align: center; padding-top: clamp(30px, 6vh, 70px); }
.ab-arrow--end { width: clamp(120px, 16vw, 190px); margin: 0 auto clamp(14px, 2vh, 22px); }
.ab-end__title {
  /* room for the drawn rule under the last line before the buttons start */
  margin: 0 auto clamp(40px, 6.5vh, 68px); max-width: 30ch;
  font-size: clamp(28px, 4vw, 52px); font-weight: 500;
  line-height: 1.06; letter-spacing: -.045em; color: var(--hm-ink);
}
/* the drawn rule the homepage puts under "how I work" and "View all projects" */
.ab-mark { position: relative; display: inline-block; }
.ab-rule {
  position: absolute;
  left: -.04em; right: -.1em; top: calc(100% + .02em);
  width: auto; height: .2em;
  overflow: visible;
  color: var(--hm-ink);
}
.ab-end__title em {
  font-family: "Instrument Serif", Georgia, serif; font-style: italic; font-weight: 400;
}
.ab-end .hm-foot__actions { justify-content: center; gap: clamp(14px, 1.6vw, 20px); }

/* ---------- chapters fade up as you read. Armed by JS (.is-anim) so a script
     failure can never leave the story invisible. ---------- */
.hm-about.is-anim .ab-rev { opacity: 0; transform: translateY(20px); }
.hm-about.is-anim .ab-rev.is-in {
  opacity: 1; transform: none;
  transition: opacity .6s var(--hm-ease), transform .7s var(--hm-ease);
}

/* ---------- responsive ---------- */
@media (max-width: 900px) {
  .ab-hero { grid-template-columns: 1fr; gap: clamp(26px, 5vh, 42px); }
  .ab-hero__portrait { max-width: 480px; }
  .ab-duo { grid-template-columns: 1fr; }
  .ab-duo .ab-shot img, .ab-duo .ab-shot:last-child img { aspect-ratio: 4 / 3; }
}
@media (max-width: 860px) {
  .ab-notes { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 620px) {
  .hm-about { --ab-rail: 40px; }
  /* two notes across is still a cluster; one across is just a list */
  .ab-notes { gap: 18px; }
  /* keep room above the tape, and drop the tilt so nothing overhangs the gutter */
  .ab-note { padding: 24px 16px 16px; transform: none; }
  .ab-note::before { width: 62px; height: 17px; }
  .ab-ch__rail::before { left: 13px; }
  .ab-ch__num { width: 28px; height: 28px; font-size: 11px; }
  .ab-trio { grid-template-columns: 1fr 1fr; }
  .ab-trio .ab-shot:last-child { grid-column: 1 / -1; }
  .ab-trio .ab-shot:last-child img { aspect-ratio: 16 / 10; }
}

@media (prefers-reduced-motion: reduce) {
  .hm-about.is-anim .ab-rev, .hm-about.is-anim .ab-rev.is-in {
    opacity: 1; transform: none; transition: none;
  }
  .ab-logos img { transition: none; }
}