/* ═══════════════════════════════════════════════════════════════════
   About — editorial collage, second movement.

   Same construction as intro.css: twelve invisible columns that nothing
   is drawn on, blocks placed into them by hand, and the stagger falling
   out of the two sides carrying different content and coming to rest at
   different heights. No card, no rule, no divider, no panel. The only
   edges on screen are the edges of the photograph and the one line
   thrown around a number by hand.

   Where the intro ranges its paragraph right against a picture on the
   left, this one ranges left against a picture on the right — the same
   device mirrored, so the two sections rhyme rather than repeat.

   Inherits every token from style.css.
   ═══════════════════════════════════════════════════════════════════ */

.abt{
  /* the collage gutter, matched to intro.css so the two sections sit on
     the same margins and read as one publication */
  --gut-w: clamp(1.25rem, 7.5vw, 7rem);

  position:relative; z-index:1;
  background:var(--black);
  padding:clamp(4rem,13vh,8rem) var(--gut-w) clamp(4.5rem,13vh,8rem);

  display:grid;
  grid-template-columns:repeat(12,1fr);
  column-gap:clamp(1rem,2.5vw,2.5rem);
  align-items:start;
}

/* ── placement ────────────────────────────────────────────────────── */
/* Read down the rows and the composition is legible as text: statement
   across the top, argument left against picture right, the count falling
   diagonally beneath, the two founders passing each other, the work
   ranged down the right, the signature alone at the foot. */
.abt__title    { grid-column:1 / 10; grid-row:1 }
.abt__copy     { grid-column:1 / 6;  grid-row:2 }

/* The picture heads the section, and spans the three rows the count
   falls through rather than only two: its own height then can't pile up
   in a single row and open a hole under the first figure. */
/* Centred in its span. It sat hard right, which left the arrow in
   .abt__hall running out in open page a long way short of the thing it
   points at; ranged hard left it went the other way and the arrow's box
   overlapped the frame by seventy pixels, so the line arrived on top of
   the picture rather than at it. Centred, the stroke stops just short —
   which is what pointing looks like. */
.abt__fig--p   { grid-column:7 / 13; grid-row:2 / span 2; justify-self:center }
/* The line sits under the paragraph and points across at the picture.
   Wider than the paragraph above it on purpose: the arrow is anchored to
   this block's right edge, and at the paragraph's width the stroke ran
   out in open space a third of the way to the frame. */
.abt__hall     { grid-column:1 / 8;  grid-row:3 }

/* The three figures on one line, not falling diagonally down the left.
   The diagonal was right when this section carried two full biographies
   under it: the stagger opened air where the page had plenty to fill it
   with. Those biographies are two lines each now — they belong to
   about.html — and the same stagger over the same three rows left the
   right two thirds of the page holding nothing at all. A band of three
   reads as a fact about the practice rather than as a gap. */
.abt__stat--a  { grid-column:1 / 5;  grid-row:4 }
.abt__stat--b  { grid-column:5 / 9;  grid-row:4 }
.abt__stat--c  { grid-column:9 / 13; grid-row:4 }

/* One row of three across the whole width: the two founders and the
   door to the services page beside them. The scope block used to run
   down the right on its own from the photograph to the signature, which
   is the shape a column takes when there is nothing to put next to it. */
.abt__who--a     { grid-column:1 / 5;  grid-row:5 }
.abt__who--b     { grid-column:5 / 9;  grid-row:5 }
.abt__scope-link { grid-column:9 / 13; grid-row:5 }

.abt__sign     { grid-column:1 / 8;  grid-row:6 }
.abt__cta      { grid-column:8 / 13; grid-row:6 }

/* ── the statement ────────────────────────────────────────────────── */
.abt__title{
  font-size:var(--fs-display);
  line-height:1.02;
  margin:0 0 clamp(2.5rem,8vh,5rem);
}
/* Each line is its own block so js/about.js can move it on its own axis.
   They travel horizontally, so the box has to be free to overhang its
   column — body already clips overflow-x, and the travel is capped well
   inside the gutter, so nothing can reach the edge of the page. */
.abt__line{
  display:block;
  will-change:transform;
}

/* Set in the display face at reading size, not body size: it is the
   argument, and the word-fill is its reading pace. */
.abt__copy{
  font-family:var(--display); font-weight:400;
  font-size:var(--fs-title);
  line-height:1.24;
  letter-spacing:-.005em;
  text-wrap:pretty;
  margin:0;
}

/* ── the photograph ───────────────────────────────────────────────── */
/* Same anatomy as the collage figures above: the frame clips, the image
   inside drifts. They have to be two elements — one wipes, one moves. */
.abt__fig{
  position:relative; margin:0; overflow:hidden;
  background:var(--ink);
  aspect-ratio:4/5;
  /* Parked closed, opening right → left. The intro's pair open left →
     right then right → left; starting this one from the right continues
     that alternation down the page. Percentages on every side: GSAP
     interpolates clip-path per component and mixing bare 0 with 0%
     hands it two shapes to reconcile. */
  clip-path:inset(0% 0% 0% 100%);
}
.abt__fig img{
  position:absolute; left:0; width:100%;
  /* taller than the frame and hung above it, so drift never pulls an
     edge of the photograph into view */
  top:-8%; height:116%;
  object-fit:cover;
  will-change:transform;
}
/* no-JS safety: if the script never runs, show the picture */
.no-js .abt__fig{ clip-path:none }

/* The portrait slots, when photographs land in them. They sit inside the
   founder block above the name, so they are sized here rather than
   placed on the grid — a fixed width with the ratio doing the rest. */
.abt__fig--s,
.abt__fig--a2{
  aspect-ratio:4/5;
  width:clamp(7rem,13vw,10rem);
  margin-bottom:clamp(1rem,3vh,1.6rem);
}
/* opening from opposite edges keeps the pair from reading as one gesture */
.abt__fig--a2{ clip-path:inset(0% 100% 0% 0%) }

/* ── the working method ───────────────────────────────────────────── */
/* Sized off the viewport rather than off its column: the picture is the
   largest thing in the section and has to stay inside the frame on a
   short laptop screen, where a column-width portrait would run past both
   edges of the fold. Width follows from the ratio. */
.abt__fig--p{
  /* No aspect-ratio of its own: the source is cut to 4/5, which is the
     box .abt__fig already sets, so the whole frame is photograph and
     nothing is cropped to fit it.
     Brought down from min(78vh,46vw), which on a laptop came out around
     580px tall and took very nearly the whole fold — the picture is an
     aside to the line beside it, not the subject of the section, and at
     that size it was reading as the subject. */
  height:min(58vh,34vw);
  width:auto;
  /* opens upward — the portrait slots below open sideways */
  clip-path:inset(100% 0% 0% 0%);
}

/* Fills its frame exactly. The shared rule hangs every figure 8% above
   its box and runs it 116% tall so the drift has somewhere to move; with
   no drift there is nothing to hide, and at that ratio the overhang was
   cropping fourteen per cent off each side of the board. */
.abt__fig--p img{ top:0; height:100% }

/* The written line and the arrow on one row, not stacked.
   They used to be a column: the arrow pushed to the block's right edge
   with margin-left:auto so its head would reach the picture, and the
   line ranged hard left underneath. On a block this wide that put most
   of a column between them — the arrow read as belonging to the
   photograph and the line as belonging to the paragraph above, when
   they are one gesture.

   Side by side, bottom-aligned, the arrow's tail meets the end of the
   second line and the whole thing reads the way it is drawn: the
   sentence is written, then the hand carries on into the stroke and
   points at the picture.

   justify-content:flex-end is what keeps the arrow where it was — the
   pair is pushed to the block's right edge, so the head still stops
   just short of the frame. The text takes order:-1 because the arrow
   comes first in the markup, where it belongs: the line is the content
   and the arrow is the aside, so a screen reader should meet the words
   without an aria-hidden graphic in front of them. */
.abt__hall{
  display:flex; flex-direction:row;
  align-items:flex-end;
  justify-content:flex-end;
  gap:clamp(.6rem,1.6vw,1.35rem);
  margin-top:clamp(2.5rem,8vh,4.5rem);
}
.abt__hall-t{ order:-1 }
/* The line leaves the text and sweeps up into the picture, so it sits
   above the words and pushed right — the end of the stroke has to be the
   nearest thing to what it points at. */
.abt__hall-a{
  width:clamp(140px,21vw,320px);
  height:auto;
  /* was margin-left:auto, back when this was a column — the row's
     justify-content does that job now */
  flex:0 0 auto;
  color:var(--bone);
  overflow:visible;
}
.abt__hall-a path{
  fill:none; stroke:currentColor;
  stroke-width:2; stroke-linecap:round; stroke-linejoin:round;
}
.abt__hall-t{
  font-family:var(--script);
  /* Brought down about a quarter from where it was
     (clamp(1.25rem,2.4vw,2.1rem)). It is an aside in the margin, not a
     second heading — at the old size it competed with the statement
     above it for the same eye. All three stops move together so the
     line still scales the way it did between breakpoints. */
  /* Sized up about a quarter from the Nothing You Could Do setting.
     Alex Brush draws small on its em — a low x-height under tall
     ascenders — so the same font-size reads noticeably lighter than
     the hand it replaced. This holds the optical size the layout was
     built around. */
  font-size:var(--fs-title);
  line-height:1.45;
  letter-spacing:.02em;
  /* Not uppercased: Alex Brush is a formal script whose capitals
     carry swashes drawn to run into a following lowercase letter,
     and set as caps they run into each other. See the note in
     tools/signature/build-signature.mjs. */
  /* the logo's green, as everywhere this hand is used */
  color:var(--olive);
  margin:0;
}

/* Set by js/signature.js once it has swapped the words for their own
   outlines. The font-size above is left exactly where it is: the SVG is
   sized in em, so the clamp that scaled the type between breakpoints
   goes on scaling the drawing of it, and there is nothing to recompute
   on a resize. */
.abt__hall-t.is-signed{ line-height:0 }

/* The signature SVG itself is styled globally as .sig in style.css:
   two pages carry one now, and this stylesheet is only loaded by one. */

/* ── the count ────────────────────────────────────────────────────── */
/* Three figures falling diagonally down the left, each one lower and
   further right than the last. The stagger is the whole point: a row of
   three would want a rule between them, a diagonal wants nothing. */
.abt__stat{
  display:flex; flex-direction:column; gap:.5rem;
  /* One line now, so one margin — the staggered top margins were what
     made the diagonal, and on a shared row they would just knock the
     three figures out of alignment with each other. */
  margin:clamp(3rem,9vh,5.5rem) 0 0;
  padding-top:clamp(1.4rem,4vh,2.2rem);
  border-top:1px solid var(--hair);
}

.abt__stat b{
  position:relative;
  font-family:var(--display); font-weight:400;
  font-size:var(--fs-hero); line-height:.86;
  letter-spacing:-.015em;
  /* fixed-width digits so the figures sit on a common vertical */
  font-variant-numeric:tabular-nums;
  align-self:flex-start;
}
.abt__stat i{ font-style:normal; color:var(--bronze-lt) }
/* the one entry that is a place rather than a count — smaller, so it
   reads as a peer of the numbers instead of shouting over them */
.abt__stat--c b{
  font-size:var(--fs-head);
  text-transform:uppercase; letter-spacing:.03em;
}
.abt__stat span{
  font-size:var(--fs-micro); letter-spacing:.22em; text-transform:uppercase;
  color:var(--bone-dim);
}

/* The loop thrown around the number, drawn by the scroll. Sized to the
   figure it circles and pushed out past it on every side, the way a hand
   overshoots. pointer-events:none so it never eats a tap. */
/* .abt__ring was here — see the note in index.html. */

/* ── the founders ─────────────────────────────────────────────────── */
/* No offset on the second: the two run side by side on one line and
   read as a pair, so their names have to sit on the same baseline. */
/* One margin for all three columns on this row, so they start together. */
.abt__who,
.abt__scope-link{ margin-top:clamp(3.5rem,11vh,7rem) }

.abt__name{
  font-family:var(--display); font-weight:400;
  font-size:var(--fs-title);
  letter-spacing:.03em; text-transform:uppercase;
  line-height:1.05;
}
.abt__role{
  margin:.6rem 0 clamp(.9rem,2.4vh,1.4rem);
  font-size:var(--fs-micro); letter-spacing:.2em; text-transform:uppercase;
  color:var(--bronze-lt);
}
.abt__bio{
  font-size:var(--fs-body); line-height:1.75;
  color:var(--bone-dim);
  max-width:38ch;
}

/* ── scope of work ────────────────────────────────────────────────── */
/* The contents page of a monograph: heading holding the left, the work
   ranged down the right, numerals hanging in the margin. Counters rather
   than list markers, so the numeral can be styled and positioned as a
   margin note instead of sitting in the text block. */
/* Smaller than it was when it held the full left column to itself: in a
   third of the width it has to sit with the list rather than tower over
   it. */
.abt__scope-t{
  font-size:var(--fs-title);
  line-height:1.05;
  /* No top margin of its own. This block shares a row with the two
     founders now, and its old margin was set for a column that started
     under the photograph on its own — beside them it just began the
     third column eighty pixels above the other two. The row's top
     margin belongs to the row. */
  margin:0;
}

.abt__scope-lede{
  margin:clamp(.9rem,3vh,1.5rem) 0 0;
  max-width:30ch;                 /* a note in a column, not a paragraph */
  font-size:var(--fs-body);
  line-height:1.6;
  color:var(--bone-dim);
}

/* A read-on, not a second "Start a project": the solid button already
   sits directly below this column and two of them would compete. Ruled
   underneath instead, and the rule is what moves on hover — the label
   itself stays put, because type that shifts under the cursor is harder
   to click, not easier. */
.abt__scope-cta{
  display:inline-flex; align-items:center; gap:.6rem;
  margin:clamp(1.1rem,3.5vh,1.8rem) 0 0;
  padding-bottom:.35rem;
  font-family:var(--sans);
  font-size:var(--fs-fine); letter-spacing:.14em; text-transform:uppercase;
  color:var(--bronze-lt);
  border-bottom:1px solid var(--hair);
  transition:color .25s var(--ease-out), border-color .25s var(--ease-out);
}
.abt__scope-cta svg{
  width:15px; height:15px;
  transition:transform .35s var(--ease-out);
}
.abt__scope-cta:hover{ color:var(--bronze-hi); border-bottom-color:var(--bronze) }
.abt__scope-cta:hover svg{ transform:translateX(4px) }
.abt__scope-cta:focus-visible{ outline:2px solid var(--bronze-hi); outline-offset:5px }

@media (prefers-reduced-motion:reduce){
  .abt__scope-cta svg{ transition:none }
  .abt__scope-cta:hover svg{ transform:none }
}

/* ── signature ────────────────────────────────────────────────────── */
/* The one piece of handwriting on the page. Tilted a degree and a half —
   enough to read as written rather than typeset, not enough to look like
   a mistake. */
.abt__sign{
  position:relative;
  font-family:var(--script);
  /* Sized up about a quarter from the Nothing You Could Do setting.
     Alex Brush draws small on its em — a low x-height under tall
     ascenders — so the same font-size reads noticeably lighter than
     the hand it replaced. This holds the optical size the layout was
     built around. */
  font-size:var(--fs-hero);
  line-height:1.1;
  /* the logo's green, as everywhere this hand is used */
  color:var(--olive);
  margin:clamp(4rem,13vh,8rem) 0 0;
  transform:rotate(-1.5deg);
  transform-origin:left center;
  padding-bottom:.15em;
}

/* A rule under the signature, running the full width of the section —
   one gutter to the other, under the tagline and the two buttons beside
   it, closing the row and the section with it.

   The section's content box is the viewport less its two --gut-w
   paddings, and this paragraph starts on that box's left edge, so the
   width is the whole span from here. No offset, no negative margin.

   Set as a gradient rather than a border so it gives out at both ends
   instead of stopping dead: the page draws almost no rules, and the few
   it has are edges of photographs. This one should read as the end of a
   thought rather than as a line someone put there. It is not lit, does
   not hang and does not animate — the last of those effects came out
   with it. */
.abt__sign::after{
  content:"";
  position:absolute;
  left:0;
  top:100%;
  width:calc(100vw - (2 * var(--gut-w)));
  height:1px;
  background:linear-gradient(90deg,
    color-mix(in srgb, var(--bronze) 34%, transparent) 0%,
    color-mix(in srgb, var(--bronze) 22%, transparent) 62%,
    transparent 100%);
  pointer-events:none;

  /* Levelled back out of the paragraph's tilt. The signature is set at
     -1.5° and everything drawn on it inherits that — which is right for
     a mark the width of the words, and wrong the moment it runs the
     width of the page: 1.5° over 1250px is thirty-two pixels of drift,
     and a full-width rule that climbs thirty-two pixels does not read as
     handwriting, it reads as crooked. Rotated back from the same origin
     the text turns on, so the line starts exactly where the W does. */
  transform:rotate(1.5deg);
  transform-origin:left center;
}

/* Two things on this line now, not one. It wraps so the pair stacks
   rather than crushing on a narrow window, and they sit on a shared
   centre line so the ruled link and the filled button read as a row
   rather than as one control with something stuck beside it. */
.abt__cta{
  display:flex; flex-wrap:wrap;
  align-items:center; justify-content:flex-end;
  gap:clamp(1rem,3vw,2.2rem);
  margin:clamp(4rem,13vh,8rem) 0 0;
  /* dropped onto the signature's baseline rather than its box top */
  padding-top:clamp(.5rem,3vh,2rem);
}
/* The ruled link carries its own top margin in the about section, where
   it closes a column; here it is on a line with a button and must not. */
.abt__cta-alt{ margin-top:0 }

/* ═══ responsive ══════════════════════════════════════════════════ */

/* Tablet — same collage, columns evened out so nothing gets too narrow
   to hold its own measure. */
@media (max-width:1100px){
  .abt__title  { grid-column:1 / 12 }
  .abt__copy   { grid-column:1 / 7 }
  .abt__fig--p { grid-column:7 / 13 }
  .abt__hall   { grid-column:1 / 9 }
  /* the right column has to widen here or the heading breaks badly */
  .abt__scope-link{ grid-column:8 / 13 }
  /* Four columns each is too narrow for a bio at this width, so the pair
     drops below the scope block and takes half the page each. */
  .abt__who--a { grid-column:1 / 7;  grid-row:8 }
  .abt__who--b { grid-column:7 / 13; grid-row:8 }
  .abt__sign   { grid-column:1 / 9 }
}

/* Phone — one column, in source order. Because the markup is already in
   reading order this is just a matter of switching the grid off: nothing
   overlaps and nothing is reordered. */
@media (max-width:820px){
  .abt{
    display:block;
    padding-inline:var(--gut);
  }
  .abt__title, .abt__copy, .abt__fig, .abt__fig--s, .abt__fig--a2,
  .abt__fig--p, .abt__hall,
  .abt__stat, .abt__who, .abt__scope-link,
  .abt__sign, .abt__cta{ grid-column:auto; grid-row:auto }

  /* Back to a ratio box — the viewport-height sizing is a wide-screen
     device and would leave a letterbox here — but not the full column
     with it. A portrait run edge to edge on a phone is 400-odd pixels
     tall, more than half the fold, and this picture is an aside to the
     line above it rather than the subject of the section. Held to two
     thirds and ranged left, it reads as a plate set beside the text,
     which is what it is on the wide layout too. */
  .abt__fig--p{
    height:auto;
    width:min(64%,15rem);
    /* Ranged right, as it is on the wide layout, against the line above
       it that ranges left. Written out rather than left to fall out of
       the grid rule it no longer sits in. */
    margin-left:auto;
    margin-top:clamp(2rem,7vh,3.5rem);
  }
  /* The arrow is hidden just below, so the row has nothing to push the
     line up against — left again, with everything else on the page. */
  .abt__hall{ margin-top:clamp(1.5rem,5vh,2.5rem); justify-content:flex-start }
  /* the picture is below the line here, not beside it — an arrow
     sweeping up and to the right would be pointing at nothing */
  .abt__hall-a{ display:none }

  .abt__copy{ font-size:var(--fs-sub); line-height:1.28 }

  .abt__fig{ margin-top:clamp(2rem,7vh,3.5rem); aspect-ratio:4/5 }

  /* the diagonal can't run on a single column — indent each figure a
     little further instead, so the descent survives the stack */
  /* The indents went with the diagonal. Each figure carries a rule over
     it now, and a rule that runs the full width above content stepped
     progressively right reads as three things that failed to line up. */
  .abt__stat{ margin-top:clamp(1.6rem,5vh,2.4rem) }

  .abt__who{ margin-top:clamp(2.5rem,9vh,4.5rem) }
  .abt__bio{ max-width:none }

  .abt__scope-t{ margin-top:clamp(3rem,10vh,5rem) }

  .abt__sign{ margin-top:clamp(3rem,10vh,5rem) }
  .abt__cta{ justify-content:flex-start; margin-top:clamp(1.5rem,5vh,2.5rem) }
}

/* ═══ reduced motion ══════════════════════════════════════════════ */
/* js/intro.js composes the finished state (figures open, words lit,
   strokes drawn) and stops. All that is left here is the standing tilt
   on the signature — a static transform, not an animation, but flattened
   for anyone who has asked for a calmer page. */
@media (prefers-reduced-motion:reduce){
  .abt__sign{ transform:none }
}