/* ═══════════════════════════════════════════════════════════════════
   About — the practice, and the two people who are it.

   Not css/about.css. That one dresses the collage section on the home
   page (.abt__*); this is the page that section is an introduction to,
   and it is prefixed .ab__* so the two can never reach into each other.

   The page is built around one pair of photographs. Everything above
   them is type on a dark ground and everything below them is type on a
   dark ground; the founders are the only bright thing in the whole
   scroll, which is what makes them read as the subject rather than as
   two headshots someone was obliged to include.
   ═══════════════════════════════════════════════════════════════════ */

.ab{
  --maxw:72rem;
  --mat:clamp(.55rem,.8vw,.8rem);      /* the board around a portrait */
  --r:18px;
  /* The gutter of the statement grid, named up here because the drawing
     above the statement is measured off the same grid and the two have
     to agree. Change it in one place or the sheet stops lining up with
     the column it introduces. */
  --say-gap:clamp(2rem,6vw,4.5rem);
  position:relative;
  padding:calc(var(--navh) + clamp(3rem,9vh,6rem)) var(--gut) clamp(4rem,12vh,7rem);
}

/* ── the opening ──────────────────────────────────────────────────── */

/* The opening is a two-column spread on a wide screen, and it is laid
   out on the same track as the statement below it: .9fr of words, the
   same gutter, 1.1fr of everything else. That is what puts the drawing's
   left edge exactly where the heading's column stops, and puts it on the
   same line as the paragraph it introduces further down the page.

   Below 821px it collapses to one column, the same width the statement
   collapses to, and the drawing simply follows the words. */
.ab__open{
  max-width:var(--maxw);
  margin:0 auto clamp(3.5rem,10vh,6rem);
}
@media (min-width:821px){
  .ab__open{
    display:grid;
    grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);
    gap:var(--say-gap);
    align-items:start;              /* both columns start at the same line */
  }
}

.ab__head{
  margin:0;
}
.ab__eyebrow,
.ab__kicker{
  margin:0 0 clamp(.9rem,2vh,1.3rem);
  font-family:var(--sans);
  font-size:var(--fs-micro); font-weight:400;
  letter-spacing:.32em; text-transform:uppercase;
  color:var(--bronze-lt);
}
.ab__title{
  margin:0;
  font-family:var(--display); font-weight:400;
  font-size:var(--fs-display);
  line-height:1.04;
  color:var(--bone);
}
.ab__title em,
.ab__h2 em,
.ab__quote em{ font-style:normal; color:var(--bronze-lt) }

.ab__lede{
  margin:clamp(1.2rem,3vh,1.8rem) 0 0;
  max-width:46ch;
  font-family:var(--sans);
  font-size:var(--fs-body);
  line-height:1.65;
  color:var(--bone-dim);
}

.ab__h2{
  margin:0;
  font-family:var(--display); font-weight:400;
  font-size:var(--fs-major);
  line-height:1.08;
  color:var(--bone);
}

/* ── the sheet ────────────────────────────────────────────────────── */
/* The drawing between the opening and the statement.

   It is framed differently from the two portraits below it, and the
   difference is the subject. A photograph needs a mount board: it has
   its own light in it and the board is what stops that light running
   into the page. A drawing is already on paper the colour of this page,
   so a board around it would be a second sheet under the first. What it
   needs instead is an edge — one hairline and the shadow of a thing
   lying on a surface — and a corner cut tighter than a portrait's,
   because it is a sheet and sheets have corners.

   It sits in the second track of .ab__open, so its left edge is the
   line the heading's column stops at and the line the statement's
   paragraph starts at further down. Held to a size well inside that
   track rather than filling it: the drawing is a note in the margin of
   the opening, not the subject of it, and at full column width it
   became a poster the title had to compete with. */

.ab__sheet{
  margin:0;
  display:grid;
  justify-items:start;          /* ranged to the column's own left edge */
  gap:clamp(.7rem,1.8vh,1rem);
}

.ab__sheet-p,
.ab__sheet-c{ width:min(100%, 24rem) }

.ab__sheet-p{
  position:relative;
  overflow:hidden;
  border:1px solid rgba(139,98,57,.28);
  border-radius:10px;
  background:var(--ink);
  box-shadow:0 24px 56px -30px rgba(74,59,41,.18);

  /* Parked shut, opening upward — the same gesture the portraits make,
     because it is the same object arriving. js/about-page.js takes it
     from here, and .no-js below unshuts it if that file never runs. */
  clip-path:inset(100% 0% 0% 0%);
}
.no-js .ab__sheet-p{ clip-path:none }

.ab__sheet-p img{
  display:block;
  width:100%; height:auto;      /* the whole sheet: a drawing is not cropped */
  will-change:transform;
}

.ab__sheet-c{
  margin:0;
  font-family:var(--sans);
  font-size:var(--fs-fine); line-height:1.5;
  letter-spacing:.02em;
  color:var(--bone-dim);
}

/* One column. The drawing falls in under the lede and takes the width
   of the page, with a gap of its own now that nothing sits beside it. */
@media (max-width:820px){
  .ab__sheet{
    justify-items:stretch;
    margin-top:clamp(2rem,6vh,3rem);
  }
  /* Still held to a size. On a tablet the column is 700-odd pixels and
     a drawing filling it stands 620px tall — a screenful of furniture
     before the practice has said anything about itself. */
  .ab__sheet-p,
  .ab__sheet-c{ width:min(100%, 28rem) }
}

/* ── the statement ────────────────────────────────────────────────── */
/* Quote on the left at display size, three short columns on the right.
   The quote is set large enough to be read as a claim rather than as a
   heading, and the columns are the only place on this page where the
   measure is deliberately short — three narrow columns of 40-odd
   characters read faster than one wide one, which is the point of a
   passage nobody came here to study. */

.ab__say{
  max-width:var(--maxw);
  margin:0 auto clamp(3.5rem,10vh,6rem);
  display:grid;
  grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);
  gap:var(--say-gap);
  align-items:start;
}
.ab__quote{
  margin:0;
}
.ab__quote p{
  margin:0;
  font-family:var(--display-hi);
  font-weight:400; font-style:italic;
  font-size:var(--fs-head);
  line-height:1.18;
  color:var(--bone);
}
.ab__cols{
  display:grid; gap:clamp(1.1rem,3vh,1.6rem);
}
.ab__cols p{
  margin:0;
  max-width:52ch;
  font-family:var(--sans);
  font-size:var(--fs-body);
  line-height:1.75;
  color:var(--bone-dim);
}

@media (max-width:820px){
  .ab__say{ grid-template-columns:1fr; gap:clamp(1.6rem,5vh,2.4rem) }
}

/* ── the marker ───────────────────────────────────────────────────── */
/* A phrase struck through with a highlighter as it comes into view.

   The stripe is a background, not a pseudo-element, and that is the
   whole reason this works: a marked phrase can break across two lines,
   and an absolutely positioned ::before would only ever cover the first
   of the two boxes. A background paints on every fragment, and
   box-decoration-break:clone gives each fragment its own rounded ends
   and its own left edge to sweep from — which is exactly what a pen
   does when it runs out of line and starts again on the next one.

   It animates background-size, which is a paint, not a composite. That
   is a rule worth breaking for six short phrases and not for much else;
   at this count the repaint is a few hundred pixels of text.

   A wash rather than a solid. The ink is the logo's green at roughly a
   quarter strength, so what lands behind the words is a stain rather
   than a block of paint sitting on top of them — the phrase is picked
   out, not boxed in. It was solid --bronze-dp and read as a label, then
   a bronze wash, which was the page's own colour marking the page's own
   colour; the green is the one hue on the site that is not already
   doing something else, so the pen reads as a pen.

   Mixed from --olive rather than written out as its own rgba, because
   that value has moved more than once and a highlight that quietly
   stops matching the brand is worse than no highlight. The literal
   above it is the fallback for anything without color-mix.

   Translucent also means the type can stay light the whole way through.
   A solid pale stripe would need the text to flip dark to stay
   readable, and it cannot flip until the stripe has passed under it —
   so for the length of the sweep the words already covered would be
   dark on dark. Here the text only brightens, from bone-dim to full
   bone, as the pen goes over it: the phrase ends up easier to read than
   it started, which is what a highlighter is for. */
.ab__cols mark{
  --hl:rgba(175,204,88,.32);
  --hl:color-mix(in srgb, var(--olive) 32%, transparent);
  --hl-ink:var(--bone);

  /* <mark> is not a neutral wrapper: every browser ships it with a
     yellow background-color and its own text colour. Painting a
     gradient over that is not enough — the gradient is what sweeps, so
     for as long as it is at 0% width the phrase sits there as a solid
     yellow block, and a translucent ink never hides it afterwards
     either. Both defaults have to be cleared, not covered. */
  background-color:transparent;

  background-image:linear-gradient(var(--hl), var(--hl));
  background-repeat:no-repeat;
  background-position:0 0;
  background-size:0% 100%;      /* the pen has not started */

  color:inherit;
  border-radius:.3em;
  padding:.06em .16em;
  margin:0 -.04em;              /* the padding back out of the measure */
  -webkit-box-decoration-break:clone;
          box-decoration-break:clone;

  /* The stroke. It was .95s, which is about how long a hand actually
     takes to draw a line that length — and reading it back, that is the
     problem: you watch the pen instead of the phrase. Under half a
     second it registers as emphasis rather than as an event, which is
     what a highlighter is. The colour lifts a little quicker again, so
     the words are bright by the time the stripe reaches their end. */
  transition:
    background-size .44s var(--ease-out),
    color .3s var(--ease-out);
}
.ab__cols mark.is-lit{
  background-size:100% 100%;
  color:var(--hl-ink);
}
/* No script, no observer to light them — so they arrive already
   marked rather than never marked at all. */
.no-js .ab__cols mark{ background-size:100% 100%; color:var(--hl-ink) }

/* ── the count ────────────────────────────────────────────────────── */

.ab__facts{
  list-style:none;
  max-width:var(--maxw);
  margin:0 auto clamp(4rem,12vh,7rem); padding:clamp(1.6rem,4vh,2.4rem) 0 0;
  border-top:1px solid var(--hair);
  display:grid;
  grid-template-columns:repeat(auto-fit, minmax(9rem, 1fr));
  gap:clamp(1.6rem,4vw,3rem);
}
.ab__facts li{ display:flex; flex-direction:column; gap:.35rem }
.ab__facts b{
  font-family:var(--display); font-weight:400;
  font-size:var(--fs-title);
  line-height:1; color:var(--bone);
  font-variant-numeric:tabular-nums;
}
.ab__facts i{ font-style:normal; color:var(--bronze-lt) }
.ab__facts span{
  font-family:var(--sans); font-size:var(--fs-fine);
  letter-spacing:.16em; text-transform:uppercase;
  color:var(--bone-dim);
}

/* ── the founders ─────────────────────────────────────────────────── */

.ab__team{
  max-width:var(--maxw);
  margin:0 auto clamp(4rem,12vh,7rem);
}
.ab__team-h{ margin:0 0 clamp(2rem,6vh,3.2rem) }

.ab__who{
  display:grid;
  grid-template-columns:repeat(2, minmax(0,1fr));
  gap:clamp(1.6rem,5vw,4rem);
}
@media (max-width:820px){
  .ab__who{ grid-template-columns:1fr; gap:clamp(2.5rem,8vh,4rem) }
}

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

/* The mount board again — the same frame the services card and the
   project plates carry, so a photograph is framed the same way wherever
   it turns up on this site. These two are the only portraits on it, and
   the frame is what stops a pale studio backdrop from reading as a hole
   cut in the page. */
.ab__fig{
  position:relative;
  margin:0 0 clamp(1.1rem,3vh,1.6rem);
  padding:var(--mat);
  aspect-ratio:4/5;
  /* Held well inside its column rather than filling it. At full column
     width these ran to 544px on a laptop and took the whole fold each —
     which made the page a pair of posters with captions. Ranged left at
     this size they are portraits beside a piece of writing, and the
     writing under them keeps the wider measure. */
  width:min(100%, 20rem);
  overflow:hidden;
  background:var(--ink);
  border:1px solid rgba(139,98,57,.26);
  border-radius:var(--r);
  box-shadow:
    0 26px 60px -28px rgba(74,59,41,0.145),
    inset 0 1px 0 rgba(255,255,255,.9);

  /* Parked shut, opening upward. js/about-page.js takes it from here. */
  clip-path:inset(100% 0% 0% 0%);
}
.no-js .ab__fig{ clip-path:none }

.ab__fig picture{
  display:block; position:relative;
  width:100%; height:100%;
  border-radius:calc(var(--r) - var(--mat));   /* concentric with the frame */
  overflow:hidden;
}
/* Headroom for the drift. js/about-page.js travels this photograph
   `p * 10 * depth` pixels against its frame, and the deepest of the two
   is 1.12 — so it asks for 11.2px in either direction and the picture
   has to have that much to give at both edges or the frame shows through
   at the end of the travel. Shahnawaz's portrait is 4:5 and so is the
   frame, which means cover fits it exactly and there is nothing spare.
   Half the extra height is taken off the top so the overflow sits evenly
   above and below, and `picture` clips both. 14px rather than the 11.2
   the sum asks for: the JS is free to change its numbers and a couple of
   spare pixels at each edge is cheaper than going back to find this.

   It cannot be done with transform — the drift writes `img.style
   .transform` on every frame and would overwrite anything set here. */
.ab__fig img{
  --ab-drift:14px;

  display:block;
  width:100%;
  height:calc(100% + var(--ab-drift) * 2);
  margin-top:calc(var(--ab-drift) * -1);
  object-fit:cover;
  object-position:50% 22%;    /* framed on the face, not on the middle */
  will-change:transform;
}
/* The frame inside the frame, above the photograph so the line keeps
   one weight the whole way round. */
.ab__fig picture::after{
  content:''; position:absolute; inset:0; z-index:2;
  border:1px solid rgba(74,59,41,.16);
  border-radius:inherit;
  pointer-events:none;
}
/* Sits the portrait down onto the board. These were shot on a pale grey
   backdrop and the page is nearly black; without this the bottom edge
   of the photograph is the brightest line on the screen. */
.ab__fig picture::before{
  content:''; position:absolute; inset:0; z-index:1;
  background:linear-gradient(to top, var(--media-scrim), transparent 42%);
  pointer-events:none;
}

/* Smaller again on a phone, where the column is the whole screen and a
   portrait at the full width of it is a page on its own. It has to be
   declared after the rule above rather than up with the other phone
   rules: both selectors are one class, so the later one wins, and up
   there it would have been the earlier one. */
@media (max-width:820px){
  .ab__fig{ width:min(100%, 15rem) }
}

.ab__name{
  margin:0;
  font-family:var(--display); font-weight:400;
  font-size:var(--fs-title);
  line-height:1.1;
  color:var(--bone);
}
.ab__role{
  margin:.5rem 0 0;
  font-family:var(--sans);
  font-size:var(--fs-fine); letter-spacing:.14em; text-transform:uppercase;
  color:var(--bronze-lt);
}
.ab__text{
  margin:clamp(.9rem,2.2vh,1.2rem) 0 0;
  max-width:46ch;
  font-family:var(--sans);
  font-size:var(--fs-body);
  line-height:1.75;
  color:var(--bone-dim);
}

/* No hover zoom on these two, for two reasons. The photograph already
   moves: js/about-page.js drifts it inside its frame as the page
   scrolls, and a hover scale would be writing `transform` on the same
   element the drift is writing it on — one of them would win and it
   would be whichever ran last.

   The other reason is that they are people. A project plate can grow
   under the cursor; enlarging somebody's face because a pointer passed
   over it is a different gesture, and not one this page wants to make. */

/* ── the method ───────────────────────────────────────────────────── */

.ab__how{
  max-width:var(--maxw);
  margin:0 auto clamp(4rem,12vh,7rem);
}
.ab__how-h{ margin:0 0 clamp(2rem,6vh,3.2rem) }

.ab__rail{ position:relative }

/* A rule under the five steps, drawn across by the scroll. Horizontal
   here, where the projects page draws its line down a chapter — the
   steps run left to right, so the line has to as well or it would be
   describing a different journey from the one on the page. */
.ab__rail-l{
  position:absolute; left:0; right:0; top:calc(.9rem + 1px);
  height:1px;
  background:rgba(139,98,57,.16);
}
.ab__rail-l i{
  display:block; width:100%; height:100%;
  background:var(--bronze-lt);
  transform:scaleX(0);
  transform-origin:left center;
  will-change:transform;
}

.ab__steps{
  list-style:none; margin:0; padding:0;
  display:grid;
  grid-template-columns:repeat(5, minmax(0,1fr));
  gap:clamp(1rem,2.5vw,2rem);
}
.ab__step{ position:relative; padding-top:clamp(1.6rem,4vh,2.2rem) }
/* The node where the step meets the rule. */
.ab__step::before{
  content:'';
  position:absolute; left:0; top:.9rem;
  width:7px; height:7px;
  margin-top:-3px;
  border-radius:50%;
  background:var(--ink);
  border:1px solid var(--bronze-lt);
}
.ab__step-n{
  display:block;
  font-family:var(--display);
  font-size:var(--fs-micro); letter-spacing:.18em;
  font-variant-numeric:tabular-nums;
  color:var(--bronze);
}
.ab__step-t{
  margin:.5rem 0 0;
  font-family:var(--display); font-weight:400;
  font-size:var(--fs-sub);
  line-height:1.1;
  color:var(--bone);
}
.ab__step-c{
  margin:.55rem 0 0;
  font-family:var(--sans);
  font-size:var(--fs-fine); line-height:1.6;
  color:var(--bone-dim);
}

@media (max-width:900px){
  .ab__steps{ grid-template-columns:repeat(2, minmax(0,1fr)); gap:clamp(1.4rem,4vh,2rem) }
  /* Two columns and a wrapped grid: a rule drawn across the top of the
     first row would be describing only the first two steps. */
  .ab__rail-l{ display:none }
  .ab__step::before{ display:none }
  .ab__step{ padding-top:0; border-top:1px solid var(--hair); padding-block:clamp(1rem,3vh,1.4rem) 0 }
}
@media (max-width:520px){
  .ab__steps{ grid-template-columns:1fr }
}

.ab__how-l{
  display:flex; flex-wrap:wrap;
  gap:clamp(.8rem,2vw,1.2rem);
  margin:clamp(2rem,6vh,3rem) 0 0;
}

/* ── links and the ask ────────────────────────────────────────────── */

/* Three pills, and they press like every other pill on the site — the
   dot on the left blooms out and floods them, the label crosses. The
   whole gesture is THE HOVER BUTTON in css/style.css; what belongs here
   is only what these three do not share with .btn: their own padding,
   their own border, and the ::before the fill needs, which .btn already
   had and these did not.

   All three, not just the ask. .ab__link is the pair under the method —
   the full scope of services, see it built — and they are the same
   shape, the same border and the same 999px as .ab__cta below them. They
   were left out of this at first and it showed immediately: they had the
   room made for the dot and no dot in it.

   The left padding is 2.5, not 1.35, for the same reason .btn's is 2.6 —
   the dot is a real thing sitting at rest and it needs the room. */
.ab__link,
.ab__cta{
  position:relative;
  display:inline-flex; align-items:center; gap:.7rem;
  padding:.8rem 1.35rem .8rem 2.5rem;
  border:1px solid rgba(139,98,57,.32);
  border-radius:999px;
  overflow:hidden;
  font-family:var(--sans); font-size:var(--fs-fine);
  letter-spacing:.14em; text-transform:uppercase;
  color:var(--bone); text-decoration:none;
  transition:border-color .3s var(--ease-out), color .3s var(--ease-out),
             transform .16s var(--ease-out);
}
.ab__link > *,
.ab__cta > *{ position:relative; z-index:1 }
.ab__link::before,
.ab__cta::before{
  content:""; position:absolute; inset:0; z-index:0;
  background:linear-gradient(100deg,var(--bronze),var(--bronze-dp));
}
.ab__link svg,
.ab__cta svg{
  width:17px; height:17px;
  fill:none; stroke:currentColor; stroke-width:1.5;
  stroke-linecap:round; stroke-linejoin:round;
  transition:transform .4s var(--ease-out);
}
.ab__link:focus-visible,
.ab__cta:focus-visible{ outline:2px solid var(--bronze-hi); outline-offset:4px }
@media (hover:hover) and (pointer:fine){
  /* The eight-per-cent bronze tint these used to take is gone. It was
     the strongest thing a button could do before there was a fill to do
     it with, and holding both would be two answers to one press. */
  .ab__link:hover,
  .ab__cta:hover{ border-color:transparent; color:#fff }
  /* Kept, and only reached when js/hoverbtn.js has not run — with it,
     the whole face travels and .hb:hover .hb__face svg turns this off.
     It is the same gesture at the only scale that was available before,
     and it is the right thing to fall back to. */
  .ab__link:hover svg,
  .ab__cta:hover svg{ transform:translateX(4px) }
}
/* Pressed, so the control answers the finger before the page does. */
.ab__link:active,
.ab__cta:active{ transform:scale(.97) }

.ab__cta{
  padding:.95rem 1.6rem .95rem 2.75rem;
  border-color:rgba(139,98,57,.5);
}

/* ── the sign-off ─────────────────────────────────────────────────── */

.ab__sign{
  max-width:var(--maxw);
  margin:0 auto;
  padding-top:clamp(2.5rem,7vh,4rem);
  border-top:1px solid var(--hair);
  display:flex; flex-wrap:wrap;
  align-items:flex-end; justify-content:space-between;
  gap:clamp(1.5rem,4vw,3rem);
}
/* The font-size is left alone once js/signature.js has swapped the words
   for their outlines: the SVG is sized in em, so this clamp goes on
   scaling the drawing of the line exactly as it scaled the type. */
.ab__sign-t{
  margin:0;
  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-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 — and the drawn
     outlines inherit it, js/signature.js fills them with currentColor */
  color:var(--olive);
}
.ab__sign-t.is-signed{ line-height:0 }

/* ═══ reduced motion ══════════════════════════════════════════════ */
/* js/about-page.js composes the finished state and stops. What is left
   here is the standing hover on a portrait. */
@media (prefers-reduced-motion:reduce){
  .ab__link, .ab__cta, .ab__link svg, .ab__cta svg{ transition:none }
  .ab__link:active, .ab__cta:active{ transform:none }
}