/* ---------------------------------------------
   About page — reproduces the Illustrator artboard
   using exact vector paths (boxes + photo mask)
   with real, reflowable HTML text laid on top.

   .about-bio is a fixed-aspect artboard (its content
   never changes height, so it can be locked to the
   Illustrator proportions exactly) scaled uniformly by
   (container width / 3100).

   The coordinate space is 3100 wide, not the original
   Illustrator artboard's 2880 — widened specifically to
   fit .bio-copy's wider --w (2000, up from 1400) without
   its right edge running past the container. Every element
   sharing this coordinate space (photo, detail line, notch)
   got ~7% smaller in real px as a side effect (813/3100 is a
   smaller fraction of the container than 813/2880 was) — the
   tradeoff for giving the text more room in a fixed-width
   container. .bio-copy's own --x/--y/--fs are unchanged units,
   just now read against the wider 3100 denominator too.
--------------------------------------------- */

.about-bio {
  position: relative;
  container-type: inline-size;
  /* 100% minus a fixed 3rem, not padding — padding would shrink the
     cqw reference width and throw off every calc() in this file that
     positions/sizes content against it. Shrinking width directly
     instead gives a consistent 1.5rem margin on each side once the
     viewport drops below max-width (where margin:auto alone would
     otherwise have zero slack left to distribute), while leaving
     wide-viewport behavior (capped at max-width, centered) untouched. */
  width: calc(100% - 3rem);
  margin: 0 auto;
  /* Height scaled by the same 3100/2880 factor as the width
     denominator above, so the container's real aspect ratio
     (and therefore the ~58-unit-equivalent bottom margin below
     the photo) stays the same as before the widening. */
  aspect-ratio: 3100 / 1618;
  overflow: hidden;
  max-width: 1137px;
}

.about-bio__shapes {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  /*! left: 100px; */
}

.shape-cream {
  fill: var(--color-cream);
}

/* Generic helper: places a text block using the same
   3100-wide coordinate space as the SVG shapes. */
.art-text {
  position: absolute;
  left: calc(var(--x) / 3100 * 100cqw);
  top: calc(var(--y) / 3100 * 100cqw);
  width: calc(var(--w, 400) / 3100 * 100cqw);
  font-size: calc(var(--fs, 44) / 3100 * 100cqw);
  line-height: 1.32;
  color: var(--color-bg);
  margin: 0;
}

.art-text--cream {
  color: var(--color-cream);
}

/* Matches .faq__label/.reel__label/.contact__label's font-size exactly
   (clamp(2rem, 5vw, 3.5rem)) instead of scaling off the 2880-wide
   artboard coordinate space like the rest of this page's text — that
   cqw-based sizing topped out well below the other pages' labels at
   this container's max width. */
.section-label {
  left: 50%;
  /* Overrides .art-text's width, which this element otherwise
     inherits with no --w set on it — that fell back to --w's default
     (400), giving the label a fixed ~147px box regardless of "BIO"'s
     actual rendered width. With text-align left (the default) inside
     that oversized box, the text sat flush-left within it — centered
     as a box, but visibly off-center as text. width:auto makes the
     box hug the text itself, so centering the box actually centers
     what's visible. */
  width: auto;
  transform: translateX(-50%);
  font-size: clamp(2rem, 5vw, 3.5rem);
  font-weight: 400;
  letter-spacing: 0.12em;
  white-space: nowrap;
}

/* ----------------- BIO section ----------------- */

/* top: shifted down to clear .section-label (see the container
   comment above for why this coordinate space is 3100, not 2880).
   width/height are the original 813/1082 scaled up 10% — the detail
   line below (and this) were reading as too small/text was bleeding
   past the line's bottom edge, so both grew together, left/top
   anchors unchanged. */
.bio-photo {
  position: absolute;
  /*! left: calc(209 / 3100 * 100cqw); */
  top: calc(363 / 3100 * 100cqw);
  width: calc(894.3 / 3100 * 100cqw);
  height: calc(1190.2 / 3100 * 100cqw);
  clip-path: url(#photo-mask);
}

/* Matches bio-detail.json's comp size (1660x880) so the line doesn't
   distort; height follows from aspect-ratio rather than its own
   calc().

   left/width are plain cqw percentages here, not the shared
   /3100*100cqw coordinate formula everything else uses — at the
   original left (flush with .bio-copy's own --x) there was exactly
   zero room left in this artboard for the box to grow into; it was
   already sized to reach the artboard's right edge exactly.

   left+width must stay at or under 100cqw or the tail end gets
   clipped by .about-bio's overflow:hidden — width is set to leave a
   small margin under that ceiling given the current left. */
.bio-stroke {
  position: absolute;
  left: 28.4cqw;
  top: calc(363 / 3100 * 100cqw);
  width: 71cqw;
  aspect-ratio: 1660 / 880;
}

.bio-stroke svg {
  display: block;
  width: 100%;
  height: 100%;
}

.bio-photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 30% 20%;
}

.bio-copy {
  --x: 890;
  --y: 443;
  --w: 2000;
  --fs: 46.4;
  letter-spacing: 0.15em;
  line-height: 1.4em;
}

/* An invisible float that carves the same diagonal notch out
   of the text flow as the photo's slanted edge, so the
   paragraph wraps to match the vector shape without needing
   a filled box behind it. See: css-tricks.com/css-slanted-containers */
/* Not resized along with .bio-photo's 10% bump (below) — the photo's
   mask is only slanted near its top-left corner (per #photo-mask's
   path); past roughly the first ~14% of its height its left edge
   sits flush, needing no notch clearance regardless of how tall the
   photo is overall. Growing this to match the photo's new height
   made the text wrap taller (more of it sat "notched" than actually
   needed), which was quietly cancelling out the whole point of
   enlarging .bio-stroke: text's own height grew right along with it,
   so the bleed past the line's bottom edge never actually closed. */
.bio-copy__notch {
  float: left;
  width: calc(132 / 3100 * 100cqw);
  height: calc(1082 / 3100 * 100cqw);
  shape-outside: polygon(0 0, 100% 0, 0 100%);
  shape-margin: 0;
}

.bio-copy p {
  margin: 0 0 0.8em;
}

.bio-copy p:last-child {
  margin-bottom: 0;
}

/* ----------------- Small screens -----------------
   Below this width the exact vector layout gets too
   cramped to read; fall back to a simple stacked
   layout. Shapes are approximated with border-radius
   instead of the precise Illustrator paths. */

@media (max-width: 700px) {
  .about-bio {
    aspect-ratio: auto;
    container-type: normal;
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
    /* Resets the desktop calc(100% - 3rem) width trick — mobile insets
       via its own padding below instead, so keeping that too would
       double up the side margins. */
    width: 100%;
    /* Top matches .faq/.reel/.contact's own padding-top (3rem) so BIO
       sits at the same height as those pages' <h2>s. */
    padding: 3rem 1.25rem 3rem;
  }

  /* Not hidden — it has no visible content of its own (just the
     #photo-mask clipPath def), and .bio-photo below still needs to
     reference that def. Hiding it risks Safari failing to resolve
     clip-path: url(#photo-mask) on elements outside a display:none
     ancestor. It's position:absolute already, so it doesn't affect
     the flex column layout either way. */
  .bio-photo,
  .art-text {
    position: static;
    width: auto;
    height: auto;
  }

  /* Decorative desktop underline, positioned via cqw coordinates tied
     to the precise vector layout — doesn't translate to the simplified
     mobile stack, so it's hidden here like .about-bio__shapes's other
     desktop-only decoration. */
  .bio-stroke {
    display: none;
  }

  .section-label {
    font-size: 2rem;
    order: -1;
    text-align: center;
    transform: none;
  }

  /* Shortened from the desktop box's 813/1082 ratio to crop some of
     the bottom off — object-position on the img is already top-biased
     (30% 20%), so a shorter box naturally loses height off the bottom
     rather than the top. Uses the real vector mask (clipPathUnits are
     objectBoundingBox, so it scales to fit any box shape) instead of
     the border-radius approximation. */
  .bio-photo {
    aspect-ratio: 813 / 920;
    clip-path: url(#photo-mask);
    margin: 0 auto;
    max-width: 320px;
  }

  .bio-copy__notch {
    display: none;
  }

  /* No card background on mobile — text sits directly on the page's
     green background, so it needs the cream (not dark-on-cream) copy. */
  .bio-copy {
    color: var(--color-cream);
    padding: 0;
    font-size: 1rem;
  }
}