/* eyespecialist.sg — draft A, LIGHTER NAVY HERO · THE STRAITS MARK'S OWN BLUE.
 *
 * ADOPTED 20 AUG 2026, AND THE TRIAL FILE IT WAS NAMED FOR IS GONE. The "2"
 * paired this sheet with index2.php — a hero variant that set $hero_variant
 * and required the home page rather than copying it, so the only difference
 * between the two URLs was this file. That variant won and was folded into
 * index.php, which loads this sheet itself. THE NAME IS NOW HISTORICAL: there
 * is no /index2.php, and nothing to do with index2.html either, which was the
 * warm-cream draft and shared no token, no class name and no stylesheet with
 * this.
 *
 * An override sheet, not a draft.
 *
 * It must be loaded AFTER site.css and after home.css. Nothing here is more
 * specific than it has to be; it wins on source order.
 *
 * THE CLINIC PAGES LOAD THIS TOO, so the name is now narrower than the file.
 * /clinics/bedok/ takes the same field, at the owner's request, and loads this
 * sheet rather than restating its two values — one source for the colour, so
 * moving --hero2-field moves both. Load it AFTER clinic.css there. It now sets
 * `display` on .hero__scrim as well as `background` — the 84rem hard seam below
 * is the same rule clinic.css already carries for .hero--clinic, so the two
 * agree rather than fight; clinic.css's copy is redundant while this sheet is
 * loaded and must stay anyway, because Bedok needs the seam whether or not this
 * field is adopted. THE "TWO HERO BLUES ON THE LIVE SITE" PROBLEM THIS
 * PARAGRAPH USED TO WARN ABOUT IS OVER: all four live URLs — /,
 * /clinics/bedok/, /cataract-surgery/ and /doctors/jayant-v-iyer/ — load this
 * file, so the field is single-sourced across the whole site and moving
 * --hero2-field moves every fold at once.
 *
 * STILL TO DO: fold these rules into site.css's hero block and move the two
 * custom properties into tokens.css, then drop /css/hero2.css from all four
 * pages' $page['css'] as you go. On the home page hero3.css goes with it — it
 * loads after this one and overrides the scrim rule below.
 *
 * THE ARGUMENT, and it is a different one from hero4/hero5. Those two answer
 * "the hero is too dark" by inverting it — white or greige field, ink type.
 * This one keeps the cinematic dark fold and simply stops it being nearly
 * black: --color-ink-deep is oklch(20% 0.05 258), which is navy in name and
 * near-black in practice, and it is the only dark mass on a page that runs
 * light from the specialists section down. Lifting it 14 points of lightness
 * and giving it the mark's own chroma keeps the photograph reading as
 * cinematic while the band stops reading as a lid.
 *
 * THE HUE IS SAMPLED, NOT GUESSED, and it is the same sample hero4/hero5 use
 * for their headline. img/straits-eye-centre.png carries TWO blues: a bright
 * cyan wave at hue 226 · L 70% · C 0.118 (44% of the artwork) and a deeper
 * indigo wave at hue 268 · L 51% · C 0.123 (28%). --color-accent sits at hue
 * 250, between them. This field is THE INDIGO WAVE ITSELF, at 34% lightness
 * instead of 51% and with its chroma left almost intact (0.115 of 0.123) —
 * so the fold is literally the logo's colour taken down to a navy, rather
 * than a navy that happens to be blue. That is the whole brief.
 *
 * WHAT IT IS NOT: a pastel tint of the brand blue. Lightness went DOWN from
 * the mark and chroma stayed up; the pale-sky field that was rejected as
 * "baby blue" moved both the other way. Those are opposite operations on both
 * axes and this one produces a saturated indigo navy, not a wash.
 *
 * MEASURED on the field (#1F3172), converted OKLCH → sRGB and read as WCAG
 * ratios rather than eyeballed:
 *
 *                                current (#07162C)   this (#1F3172)   floor
 *   h1, pills, ghost label            16.63              11.05         4.5
 *   lede and locality strip           10.39               6.90         4.5
 *   green ticks (graphic)             10.23               6.80         3
 *   focus ring (graphic)               8.79               5.84         3
 *   pill hairline (see below)           1.81               1.83         —
 *
 * Nothing is near a floor and nothing needs a new value except the hairline.
 * THE HAIRLINE IS THE ONE THING THAT BREAKS, and it breaks silently: the pill
 * outlines and the lede's top rule are --color-rule-dark, oklch(38% 0.03 258),
 * which is only 1.81:1 against near-black to begin with. Against a 34% field
 * it falls to 1.19, and at a 38% field it reaches EXACTLY the field's own
 * luminance and disappears — then inverts above it. So the field cannot be
 * lightened much past this without the pills losing their edges, and the
 * hairline gets its own value here rather than being left to fade out.
 *
 * ABOUT ONE MORE STEP OF LIGHTNESS EXISTS. Past ~L 38 the hairline problem is
 * unfixable by nudging (the rule would have to become lighter than the type it
 * sits beside), and the photograph's scrim stops reading as shadow and starts
 * reading as a blue veil over the reception wall — which is the rule CLAUDE.md
 * states outright: the photograph is never tinted.
 *
 * Every colour here resolves through a token. No inline hex, oklch() or rgb()
 * outside this :root block — house rule, no exceptions.
 */

:root {
  /* The field. The Straits mark's indigo wave, taken from L 51% down to 34%
   * with its chroma left alone. Flat, not a wash: site.css's scrim fades the
   * photograph into ONE colour, and a gradient field would need the mask
   * treatment hero5.css uses instead. One value to change if he wants it
   * deeper or lighter — but re-read the hairline note above first. */
  --hero2-field: oklch(34% 0.115 268);

  /* The pill outlines and the lede's top rule. --color-rule-dark is tuned to
   * near-black and measures 1.19:1 here, which is a hairline you cannot see.
   * This restores the relationship it has on --color-ink-deep — 1.83 against
   * that field's 1.81 — rather than picking a value that looks about right.
   * Same hue as the field, so the outline reads as the field lit rather than
   * as a grey laid on it. */
  --hero2-rule: oklch(48% 0.05 268);

  /* The pill fill. 10% white over the field — light enough that the label's
   * contrast barely moves, heavy enough that the pill has a surface. */
  --hero2-pill: oklch(97% 0.006 258 / 0.10);
}

.hero {
  background: var(--hero2-field);
}

.hero__lede {
  border-top-color: var(--hero2-rule);
}

/* THE PILLS TAKE A FILL, at the owner's request — a 10% white wash over the
 * field, so they read as a raised surface rather than as an outline drawn on
 * it. Four colourways were rendered on the real fold; previews/hero-pills.html
 * keeps all four:
 *
 *   outlined (was)     clean, but the hairline is nearly invisible on this
 *                      field and the pills sit flat.
 *   PAPER FILL         rejected twice over. It makes three white slabs the
 *                      brightest objects in the fold and they pull the eye off
 *                      the headline — which is the argument CLAUDE.md already
 *                      records against filled pills on the near-black hero, and
 *                      it does not go away on a lighter field. Worse, a filled
 *                      pill READS AS A BUTTON and these are not clickable.
 *   deeper inset       handsome, pills recede — but it puts dark blocks back
 *                      into a fold that was lightened on purpose.
 *   10% WHITE          shipped.
 *
 * Translucent rather than a flat token because it has to sit on whatever the
 * field is: move --hero2-field and the pills follow it instead of drifting to
 * a colour that no longer relates. It is the only place in draft A besides the
 * hero scrim where an alpha value is used, and for the same reason. */
.hero__points li {
  border-color: var(--hero2-rule);
  background: var(--hero2-pill);
}

/* The ghost button's hover fills white and knocks the label out in the field's
 * colour. site.css uses --color-ink-deep there, which on this fold would be a
 * second, darker navy appearing for the duration of a hover.
 *
 * Scoped to .hero, and that scope now matters in a way it did not when this
 * was written. On /clinics/bedok/ the "Call …" action IS a .btn--ghost inside
 * the hero, so it takes this value — which is right, it sits on this field.
 * The same page's closing band uses a plain .btn on paper and is untouched. */
.hero .btn--ghost:hover {
  color: var(--hero2-field);
}

@media (min-width: 64rem) {
  /* The scrim, restated only to change the colour it fades TO. Everything
   * about the geometry is site.css's and must stay that way: --hero-stop is
   * derived from .hero__panel's margin-left so full opacity arrives before
   * the type does, and the 0.6 multiplier starts the ramp clear of the
   * doctors and of The Straits Eye Centre sign on the reception wall. Change
   * either number here and the two files disagree about where the fade is.
   *
   * The last stop is the flat field colour, fully opaque. It must not be an
   * alpha value: at 0.97 the scrimmed photograph stays fractionally lighter
   * than the field beside it and draws a visible vertical seam at the photo's
   * edge. That has happened here before. */
  .hero__scrim {
    background: linear-gradient(
      to right,
      transparent calc(var(--hero-stop) * 0.6),
      var(--hero2-field) var(--hero-stop)
    );
  }
}

/* ---- THE SCRIM COMES OFF FROM 84rem UP ---------------------------------
 *
 * The owner's read was that the colour is right but the transition is not, and
 * the diagnosis is measured rather than aesthetic: THE FADE WAS TINTING THE
 * PHOTOGRAPH. The scrim dissolves a lit white reception wall into a saturated
 * mid-lightness indigo, and every intermediate mixture of those two is a pale
 * periwinkle — so the wall read as being behind blue glass rather than as being
 * in shadow. Blue cast on the wall, b - (r+g)/2 over pixels still bright enough
 * to read as photograph, where a neutral shadow scores 0-12:
 *
 *                                    peak    over the Straits sign
 *   the near-black hero on /         19.0            14.5
 *   this field, linear fade          52.5            35.0
 *   this field, no scrim              5.5             5.5
 *
 * Nearly three times the veil, and the ramp starts at 0.6 x stop = 432px at
 * 1440 while the sign runs x 383-565, so THE PRACTICE'S OWN MARK sat under a
 * wash reaching 46%. That is the same fault the fixed-18% ramp was fixed for,
 * resurfacing because the field got lighter — the cast scales with the field's
 * chroma, so it arrived with the colour and not with the geometry.
 *
 * DEEPENING THE FIELD DOES NOT FIX IT, and that is the instinct to resist: at
 * L 27% the cast only falls to 40.5, still double the near-black hero, and the
 * colour that was the whole point of this variant is spent. The veil is CHROMA,
 * not darkness.
 *
 * So the photograph now runs complete to the 50% line and the field begins
 * there — a hard seam, which is how draft B's poster hero works and how
 * /clinics/bedok/ has worked since its own scrim was found to be eating the
 * team. It reads as deliberate rather than as an unfinished fade, and it is the
 * one treatment that cannot tint the photograph at all.
 *
 * 84rem AND NOT LOWER, and the number is measured on this page, not inherited
 * from Bedok. The panel's left edge is min(75% - 18rem, 100% - 36rem - gutter)
 * and the seam is at 50%; those cross at exactly 1280px, where the headline
 * would start on the same pixel the photograph ends. Clearance between the
 * photo's edge and the type: 1024 -115px · 1280 0 · 1344 +29 · 1440 +72 ·
 * 1920 +192. 84rem is the first step with real air in it — the same crossing
 * Bedok measured, because it is the same panel expression.
 *
 * BELOW 84rem THE SCRIM STAYS AND IS LOAD-BEARING: the type sits ON the
 * photograph there (115px into it at 1024), so without it the first characters
 * land on somebody's shoulder. THE CONSEQUENCE IS THAT 1024-1343 KEEPS THE
 * LINEAR RAMP AND KEEPS THE VEIL WITH IT. That band is not fixed by this rule
 * and is a live item.
 *
 * IF THE FADE IS EVER WANTED BACK — here or in that band — the value that works
 * is not a different stop but a different colour to fade THROUGH: a shade at the
 * field's own lightness with its chroma cut to about a third,
 * oklch(34% 0.035 264), carried to full opacity by 0.96 x stop before resolving
 * to the field. Measured 17.5 peak / 10.0 over the sign — below the near-black
 * hero on both — with no luminance step at the seam. Do NOT reach for a dark
 * shade instead: near-black ramps clean the cast up but leave a 24-unit dark
 * trough 48px wide just before the seam, which reads as a smudge.
 *
 * This selector is deliberately unscoped, so it takes /clinics/bedok/ too. That
 * page already sets the identical rule on .hero--clinic in clinic.css; the two
 * agree, and clinic.css keeps its copy because Bedok needs the seam whether or
 * not this field is ever adopted. */
@media (min-width: 84rem) {
  .hero__scrim {
    display: none;
  }
}