/* eyespecialist.sg — THE CLOSE-CROPPED FOLD. Geometry only, no colour.
 *
 * ADOPTED 21 AUG 2026. It was trialled as index2.php, which is deleted; the
 * home page loads this sheet itself, AFTER hero2.css, which is where the indigo
 * field, the pill fill and the hairline live. /cataract-surgery/ loads it too
 * since 22 Aug 2026, in the same position, because its fold went back to this
 * photograph — every number below is derived from the crop, not from the page,
 * so it carries over unchanged. This sheet changes one thing:
 * WHERE THE PHOTOGRAPH ENDS, because the photograph it is written for is a
 * different shape from the one site.css's hero was tuned around.
 *
 * THE PHOTOGRAPH. Same reception picture, cropped to the group: 1680x1120 of
 * the 3167x2216 master, WITH THE STRAITS SIGN PAINTED OUT — see index.php
 * for the retouch and for the measurement showing the pixels are otherwise
 * the same ones, which is what lets every number in this sheet stand. The
 * live fold uses the same master at its full 1.97:1, where the doctors occupy
 * x 0.14-0.43 and the right half of the frame is empty wall fading to white.
 * That empty wall is not incidental — it is what site.css's scrim was built
 * to fade across, and this crop does not have it. Everything below follows
 * from that one fact.
 *
 * IT MUST LOAD AFTER hero2.css. Both sheets set .hero__scrim at equal
 * specificity and this one has to win; swap the order in $page['css'] and the
 * scrim comes back between 64rem and 84rem.
 */

/* ---- THE SEAM, AT EVERY WIDE WIDTH -------------------------------------
 *
 * site.css fades the photograph into the field with a scrim, and hero2.css
 * takes that scrim off from 84rem up because on a saturated indigo field the
 * fade tints the picture rather than shading it — measured 52.5 units of blue
 * cast against the near-black hero's 19.0. Below 84rem it keeps the ramp,
 * because there the type sits ON the photograph (115px into it at 1024) and
 * the ramp is what keeps the first characters legible.
 *
 * THAT ARGUMENT DOES NOT SURVIVE THIS CROP. With the wide master, the band
 * under the ramp is empty wall; with this one it is Dr Audrey Pang. It is the
 * same failure /clinics/bedok/ recorded — "the scrim was eating her" — arriving
 * for the same reason, a photograph with no room in it for a gradient to
 * happen.
 *
 * So the scrim comes off ENTIRELY and the photograph stops where the type
 * starts instead. The edge is derived from .hero__panel's own margin-left
 * rather than fixed at 50%, which is what makes that safe at every width:
 *
 *   panel left  = clamp(gutter, 75% - 18rem, 100% - 36rem - gutter)
 *   this edge   = min(50%,                   100% - 36rem - gutter - 2rem)
 *
 * The panel's left edge is the LESSER of its two clamp arms, so subtracting a
 * further 2rem from the pinned arm clears both cases. Measured clearance
 * between the photograph's edge and the headline: 32px at 1024, 1152, 1280 and
 * 1344; 72px at 1440; 192px at 1920 — where the panel starts centring in the
 * navy half and walks away from the seam on its own. Under site.css's flat 50%
 * that same clearance is -115px at 1024 and 0 at 1280, which is exactly why
 * the scrim had to be there.
 *
 * THIS COSTS PICTURE AT NARROW DESKTOP AND IT CANNOT NOT. At 1024 the panel
 * needs 576px of a 1024px viewport, so only ~365px of photograph is ever
 * visible — with a scrim, without one, or with a hard seam. All three show the
 * same ~710 master pixels; the seam is simply the one that does not tint what
 * is left. See the object-position note for which 710.
 *
 * BELOW 64rem NOTHING HERE APPLIES. The hero stacks — photo band, then the
 * navy type block — and site.css's scrim is display:none there already. */
@media (min-width: 64rem) {
  .hero {
    --hero3-edge: min(50%, calc(100% - 36rem - var(--page-gutter) - 2rem));
  }

  .hero__media {
    inset: 0 auto 0 0;
    width: var(--hero3-edge);
  }

  /* site.css's --hero-stop and both fade rules are now dead weight, and the
   * scrim element itself is an empty div with a background. Hiding it rather
   * than re-colouring it is deliberate: a scrim that fades to the field is
   * invisible only while the two colours agree, and this way moving
   * --hero2-field cannot quietly reintroduce a seam. */
  .hero__scrim {
    display: none;
  }
}

/* ---- object-position: BOTH AXES ARE LOAD-BEARING, AT DIFFERENT WIDTHS ----
 *
 * The media box is half the viewport wide and a fixed 576px tall, so its
 * aspect ratio SWINGS ACROSS the crop's 1.5 as the viewport grows and `cover`
 * changes which axis it trims. A single-axis value is unset exactly where it
 * is needed — the trap /doctors/jayant-v-iyer/ records against its own hero.
 *
 *   viewport   media box     ratio   what `cover` trims
 *   1024       365 x 576     0.63    58% off the SIDES
 *   1152       486 x 576     0.84    44% off the sides
 *   1280       608 x 576     1.06    30% off the sides
 *   1440       720 x 576     1.25    17% off the sides
 *   1920       960 x 576     1.67    10% off top and bottom
 *    390       390 x 293     1.33    11% off the sides (stacked)
 *    768       768 x 432     1.78    16% off top and bottom (stacked)
 *
 * 12% VERTICAL — near the top, so the trim comes off the LEGS. There are only
 * 130px of headroom above the hair in this crop; at 50% the 1920 window opens
 * 20px above it and any further widening decapitates the group. Taken off the
 * bottom instead, the widest boxes cut just below the hands — a three-quarter
 * portrait, not a cut at a joint, which is what CLAUDE.md says reads as
 * accidental. It is inert from 1024 to about 1600, where the box is narrower
 * than the crop and the horizontal value is doing all the work.
 *
 * 50% HORIZONTAL, AND THE CROP IS BUILT AROUND IT. Dr Audrey Pang's shoulder
 * ends at master x 1350, and the crop runs to 1680, which is what buys her
 * 190px of air against the seam at 1440 once the window is centred. It ended at
 * 1400 for one round, which put her 50px off the indigo and read as pressed
 * against it; the owner saw that immediately.
 *
 *   THAT RIGHT EDGE WAS ORIGINALLY DERIVED AGAINST THE SIGN, which began at
 *   master x 1416 and ran to 1818 — so the crop gave her 66px of clear wall and
 *   then cut the wordmark, an accepted cost, because every window that kept the
 *   group cut it somewhere. THE SIGN IS PAINTED OUT NOW and the 1680 edge is
 *   unchanged: her clearance is what the number was really protecting, and the
 *   seam falls on plain wall instead of through a wordmark. Nothing left in the
 *   frame is clipped, so the reason to re-crop the master has gone with it.
 *
 * 25% BETWEEN 64rem AND 84rem, and it is about WHOSE FACE SURVIVES. At 1024 the
 * panel takes 576px of the viewport, so only ~365px of photograph is ever
 * visible — 709 master pixels against a group 920 wide. Two faces is the
 * ceiling there whatever this says. Centred, the window ends at x 1195 and
 * slices Dr Audrey Pang's face in half at 1024 and again at 1152; a face cut
 * down the middle is worse than a face out of frame. At 25% the window stops
 * short of her (x 952 at 1024, 1130 at 1152), so it holds Dr Jayant V Iyer and
 * Dr Jason Lee whole with her shoulder at the edge, and by 1280 all three are
 * back in frame anyway.
 *
 * BASE RULE FIRST, MEDIA QUERY LAST. Both beat site.css's two values (26% 20%
 * base, 28% 100% at 64rem) on source order, not on specificity — this sheet
 * simply loads later. A query written ABOVE the base rule would lose silently
 * while still matching, which is the .person__portrait bug this project has
 * already paid for once. */
.hero__media img {
  object-position: 50% 12%;
}

@media (min-width: 64rem) and (max-width: 83.99rem) {
  .hero__media img {
    object-position: 25% 12%;
  }
}