/* ==========================================================================
   Section 1 — Who We Are
   Source of truth: design_handoff_who_we_are/README.md + who-we-are.html.
   That folder supersedes the Who We Are chapter of design_handoff_sections.

   Two things sit on top of the handoff, both because it is a standalone
   section and this one is not:

   1. The seam. The 3D card section above sinks behind this one, so .who keeps
      its negative margin and veil, and .who__frame's bed fades in rather than
      starting solid. The handoff's own 126px top padding does the rest — the
      portrait's opaque border lands well below where the bed goes solid, so
      nothing draws a line across the falling card.

   2. No top hairline. Every other section opens with one; here the seam is the
      transition, and a gold rule inside it would cut across the card.
   ========================================================================== */

.who {
  /* Carried over from the section this replaces: the card above falls behind a
     soft black edge rather than meeting a hard line. */
  --seam: 84vh;

  position: relative;
  z-index: 4;   /* over .card-3d's layered children, which go up to z-index 3 */
  margin-top: calc(var(--seam) * -1);

  /* Well inside --seam: the frame overlaps most of it, so this section is
     already climbing while the card is still sinking. */
  padding-top: calc(var(--seam) * .30);
  /* Reaches full opacity at half the seam rather than at its very end — a veil
     only ~85% opaque where the card sits lets its corner show through. */
  background: linear-gradient(to bottom,
    rgba(6, 5, 4, 0) 0,
    rgba(6, 5, 4, .68) calc(var(--seam) * .24),
    rgba(6, 5, 4, .96) calc(var(--seam) * .38),
    var(--black-deep) calc(var(--seam) * .50),
    var(--black-deep) var(--seam));
}

/* This section's top edge is a whole seam above where it visually begins, so
   the page-wide `section[id] { scroll-margin-top: 78px }` lands an #about jump
   in the middle of the card animation — a black screen with no copy. Pulling
   the landing down by the seam's own padding puts the frame at the top of the
   viewport instead, still clearing the sticky bar by 78px.

   section[id].who, not .who: the page-wide rule in topbar.css is section[id],
   which outranks a lone class and is loaded later besides. */
section[id].who {
  scroll-margin-top: calc(78px - var(--seam) * .30);
}

@media (max-width: 900px) {
  section[id].who { scroll-margin-top: calc(62px - var(--seam) * .30); }
}

/* --- The section proper ---------------------------------------------------
   The handoff's 1280 canvas: a 412px portrait column, a 112px gutter and the
   copy in what is left. */

.who__frame {
  --who-col: 412px;
  --who-gap: 112px;
  /* 644px is what 1fr resolves to on the handoff's 1280 canvas
     (1280 - 56 - 56 - 412 - 112). Naming it instead of leaving it as 1fr is
     what stops the column stretching on a wide screen: the copy inside is
     capped at 54ch, so a stretched column just parked the text against the
     photograph and left the rest of a 1920 screen empty. Capped and centred,
     the composition holds its designed proportions at any width. */
  --who-copy: 644px;
  --who-content: calc(var(--who-col) + var(--who-gap) + var(--who-copy));
  /* Left edge of that centred block, in frame coordinates — the background
     layers that have to line up with a column are positioned from it. */
  --who-inset: calc(var(--gutter) +
    max(0px, (100% - 2 * var(--gutter) - var(--who-content)) / 2));
  /* The bed has to arrive out of nothing so it never hard-cuts the card behind
     it; opaque well before the 126px padding puts any content on screen. */
  --who-bed-in: 90px;

  position: relative;
  display: grid;
  grid-template-columns: var(--who-col) minmax(0, var(--who-copy));
  column-gap: var(--who-gap);
  justify-content: center;
  align-items: center;
  padding: 126px var(--gutter) 122px;
  overflow: hidden;
  background: linear-gradient(to bottom,
    rgba(6, 5, 4, 0) 0,
    var(--black-deep) var(--who-bed-in));
}

/* --- Background layers ----------------------------------------------------
   Four of them over the bed. Together they stop the section reading as flat
   black and pull the eye toward the portrait. */

.who__bg {
  position: absolute;
  inset: 0;
  pointer-events: none;
  /* Masked with the same ramp as the bed: anything painting inside the seam
     would show through the card still falling behind it. */
  -webkit-mask-image: linear-gradient(to bottom, transparent 0, #000 var(--who-bed-in));
  mask-image: linear-gradient(to bottom, transparent 0, #000 var(--who-bed-in));
}

.who__bg > * {
  position: absolute;
  pointer-events: none;
}

/* Glows and vignette. The first is anchored just off the portrait's top-left
   corner so the light reads as spill from the same source as the frame's gold
   wash; the second is dimmer and lower-right, so the lighting is asymmetric. */
.who__glows {
  inset: 0;
  background:
    radial-gradient(30% 34% at 15% 26%, rgba(168, 112, 28, .2) 0%, rgba(6, 5, 4, 0) 68%),
    radial-gradient(46% 52% at 88% 74%, rgba(112, 78, 22, .13) 0%, rgba(6, 5, 4, 0) 68%),
    linear-gradient(to bottom,
      rgba(20, 16, 11, .9) 0%,
      rgba(6, 5, 4, 0) 26%,
      rgba(6, 5, 4, 0) 74%,
      rgba(12, 10, 7, .95) 100%);
}

/* A single large circle, mostly cropped away by the section edges, giving the
   plate something to sit against. The alpha is deliberately near-invisible —
   at 6% or above it starts reading as decoration. */
.who__ring {
  /* -190px from the canvas edge on the handoff's 1280, which is 246px left of
     where the content starts. Anchored to the content so it keeps its relation
     to the portrait once the block centres on a wider screen. */
  left: calc(var(--who-inset) - 246px);
  top: -150px;
  width: 940px;
  height: 940px;
  border-radius: 50%;
  border: 1px solid rgba(217, 169, 58, .055);
}

/* Ties the portrait into the section rather than leaving it floating. Pinned
   to the portrait column's right edge, so it tracks the gutter and the column
   width rather than a hardcoded offset. */
.who__col-rule {
  left: calc(var(--who-inset) + var(--who-col));
  top: 0;
  bottom: 0;
  width: 1px;
  background: linear-gradient(to bottom,
    rgba(217, 169, 58, 0) 0%,
    rgba(217, 169, 58, .2) 22%,
    rgba(217, 169, 58, .2) 78%,
    rgba(217, 169, 58, 0) 100%);
}

/* 1px gold lines every 62px at 115deg, masked so they fade out before reaching
   any edge. Without the mask they would end on hard diagonal cuts. */
.who__pinstripe {
  inset: 0;
  opacity: .5;
  background: repeating-linear-gradient(115deg,
    rgba(217, 169, 58, .05) 0px, rgba(217, 169, 58, .05) 1px,
    rgba(217, 169, 58, 0) 1px, rgba(217, 169, 58, 0) 62px);
  -webkit-mask-image: radial-gradient(64% 70% at 40% 46%, #000 0%, rgba(0, 0, 0, 0) 76%);
  mask-image: radial-gradient(64% 70% at 40% 46%, #000 0%, rgba(0, 0, 0, 0) 76%);
}

/* --- Portrait -------------------------------------------------------------
   Frame and name plate are one unit; the plate's missing top border is what
   fuses them. */

.who__portrait {
  position: relative;
  z-index: 2;
  display: flex;
  flex-direction: column;
}

.who__photo {
  position: relative;
  /* The handoff's 496px is the image window, not the outer box: the prototype
     came out of a design tool with the default box model, so its 1px borders
     add on top and the frame renders 498px. This project sets border-box
     globally, which would eat 2px out of the crop and shift everything the
     grid centres against. */
  box-sizing: content-box;
  height: 496px;
  overflow: hidden;
  border: 1px solid rgba(217, 169, 58, .34);
  box-shadow: 0 34px 70px rgba(0, 0, 0, .62);
}

.who__photo img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 54% 12%;
  /* Graded in CSS, not baked into the asset — the source is full colour. */
  filter: grayscale(1) sepia(.22) contrast(1.12) brightness(.92) saturate(1.12);
}

/* Darkens top and bottom so the frame's edges do not cut hard. */
.who__scrim {
  position: absolute;
  inset: 0;
  background: linear-gradient(to bottom,
    rgba(6, 5, 4, .34) 0%,
    rgba(6, 5, 4, 0) 24%,
    rgba(6, 5, 4, 0) 62%,
    rgba(6, 5, 4, .72) 100%);
}

/* Gold light wash from the top-left corner. */
.who__wash {
  position: absolute;
  inset: 0;
  mix-blend-mode: screen;
  background: linear-gradient(145deg,
    rgba(217, 169, 58, .18) 0%,
    rgba(217, 169, 58, 0) 46%);
}

/* --- Name plate ----------------------------------------------------------- */

.who__plate {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 11px;
  padding: 24px 28px 26px;
  background: linear-gradient(160deg, #100D09 0%, #0A0806 62%, #070605 100%);
  border: 1px solid rgba(217, 169, 58, .34);
  /* Shares the frame's bottom edge — this is what fuses the two. */
  border-top: none;
}

.who__plate-bar {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 2px;
  background: var(--grad-metal-bar);
}

.who__plate-row {
  display: flex;
  align-items: baseline;
  gap: 14px;
}

/* Synthetic oblique, like every other italic on the page. A real italic face
   was tried here to stop the y's hairline tail breaking up at 1x, but it is a
   different drawing — single-storey 'a', calligraphic 'Z' — and changed the
   word's character. The weight bump on mobile below is the compromise: same
   letterforms, thicker hairline. */
.who__name {
  flex: none;
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 700;
  font-size: 30px;
  line-height: 1;
  letter-spacing: -.01em;
  /* Room under the baseline for the italic y's tail, then given straight back
     so the caption's spacing is unchanged.

     The handoff's .1em is enough in Chromium — measured: removing the text
     clip entirely leaves the ink on exactly the same rows, so nothing is being
     cut there. WebKit is the one that clips a background-clip:text box tight
     to the em square and shears synthetic obliques past it, which is the one
     renderer that would slice this tail off flat. .34em costs nothing where it
     is not needed and covers the descender where it is. */
  padding-bottom: .34em;
  margin-bottom: -.34em;

  /* Flat gold here, not the metallic gradient the rest of the page uses.

     The italic y's tail narrows to a 3px hairline, and at that width almost
     every pixel is partial coverage — so it takes its colour mostly from
     whatever is behind it, which is a near-black plate. Measured on those
     exact pixels: 183 against the gradient, 222 against flat gold. That gap is
     the whole of what reads as the tail fading out before it finishes.

     The gradient stays on the price figures and the headline, where the
     strokes are thick enough to carry it. */
  background-image: none;
  -webkit-background-clip: border-box;
  background-clip: border-box;
  color: #F0DCA0;
}

.who__plate-rule {
  flex: 1;
  height: 1px;
  background: linear-gradient(90deg,
    rgba(217, 169, 58, .38) 0%,
    rgba(217, 169, 58, 0) 100%);
}

.who__role {
  font-family: var(--font-ui);
  font-weight: 500;
  font-size: 10.5px;
  line-height: 1.4;
  letter-spacing: .24em;
  text-transform: uppercase;
  color: rgba(240, 233, 220, .72);
}

/* --- Copy column ---------------------------------------------------------- */

.who__copy {
  position: relative;
  z-index: 2;
  display: flex;
  flex-direction: column;
  gap: 34px;
}

.who__headline {
  margin: 0;
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 60px;
  line-height: 1.02;
  letter-spacing: -.024em;
  color: #F7F2E6;
  text-shadow: 0 6px 40px rgba(6, 5, 4, .9);
  text-wrap: pretty;
}

.who__paras {
  display: flex;
  flex-direction: column;
  gap: 22px;
}

.who__body {
  margin: 0;
  max-width: 54ch;
  font-family: var(--font-ui);
  font-weight: 300;
  font-size: 17px;
  line-height: 1.75;
  color: rgba(246, 241, 230, .82);
  text-shadow: 0 1px 24px rgba(6, 5, 4, .9);
  text-wrap: pretty;
}

.who__body strong {
  font-weight: 500;
  color: #F7F2E6;
}

.who__body--dim { color: rgba(246, 241, 230, .6); }

/* --- Responsive ----------------------------------------------------------
   The handoff's recommended adaptation. Its gutter steps are not reproduced —
   --gutter is a page-wide token and this section follows the page. */

@media (max-width: 1180px) {
  .who__frame { --who-gap: 72px; }
}

/* Nothing to centre below the design canvas — the copy column is already
   shrinking to fit. */

@media (max-width: 980px) {
  .who__frame {
    --who-col: 340px;
    --who-gap: 56px;
  }
  .who__headline { font-size: 52px; }
  /* The gap is too tight for a rule down the middle of it. */
  .who__col-rule { display: none; }
}

@media (max-width: 860px) {
  .who__frame {
    grid-template-columns: 1fr;
    row-gap: var(--space-56);
    padding-top: 112px;
  }

  .who__portrait { max-width: 412px; }
  .who__photo { height: 470px; }
}

@media (max-width: 680px) {
  .who__frame { padding: 96px var(--gutter) var(--space-88); }

  /* Never below 38px — under that the Playfair lockup loses its authority. */
  .who__headline { font-size: clamp(38px, 9vw, 60px); }

  .who__portrait { max-width: none; }
  /* object-fit: cover scales the source to the frame's WIDTH, so the only way
     to pull the crop back off his face is a taller window: at 360px the frame
     showed 69% of the scaled image, at 460px it shows 88%. */
  .who__photo { height: 460px; }

  /* 30px is the handoff's size on its 1280 canvas. At that size the hairline
     joining the italic y's bowl to its ball terminal lands under a pixel, and
     on a 1x screen it breaks into disconnected dots — the tail reads as cut
     off. (It is not: the glyph renders complete, and at 2x it is a clean
     stroke.) 36px gives the hairline enough to hold together at 1x, and a
     caption's own name is no worse for being the larger thing in it. */
  /* 36px and one step heavier. Playfair's roman 'y' ends in a hairline curl,
     and the browser's shear thins it further; at 30px/700 on a 1x screen it
     lands under a pixel and breaks into dots, which reads as a cut-off tail.
     Neither change alters the letterform — they just give that curl enough
     ink to survive. */
  .who__name {
    font-size: 36px;
    font-weight: 800;
  }
  .who__body { font-size: 16px; }

  /* Both are texture for a wide canvas; the glows carry the section alone. */
  .who__pinstripe,
  .who__ring { display: none; }
}