/* ============================================================================
 * hero-type.css — THE HERO'S SUPPORTING LOCKUP
 * ---------------------------------------------------------------------------
 * Everything under the ASCII mark: the discipline line and the three record
 * plaques. Both were set in Plex Mono and both now follow the site's `--prose`
 * face, which is the type the About paintings are set in — Palatino Linotype on
 * Windows, Iowan Old Style on macOS.
 *
 * Loaded after polish.css and pixel-worlds.css deliberately, so it wins on
 * cascade order and none of the contested files have to be touched.
 * ========================================================================== */

/* ---------------------------------------------------------------------------
 * THE DISCIPLINE LINE
 *
 * THE WEIGHT HAD TO COME DOWN WITH THE FAMILY. 800 is a sane weight for a 10px
 * mono label, where the letterforms are open and monoline and need the mass to
 * hold at that size. The same 800 on an old-style serif thickens the stems
 * until the counters close up and the line reads as a heading rather than a
 * caption — a serif carries small sizes on contrast, not on weight.
 *
 * The tracking loosens for the same reason: 0.18em was spacing monospace cells
 * that already carry their own sidebearings. Serif capitals need more air, so
 * it goes to the 0.28em the painting plates use, which is where the two
 * surfaces of the site agree.
 * ------------------------------------------------------------------------ */
.hero__disciplines,
.hero__discipline-track .hero__disciplines,
html[data-world] .hero__disciplines {
  font-family: var(--prose);
  font-weight: 500;
  letter-spacing: 0.28em;
  /* IT HAS TO FLIP WITH THE WORLD. polish.css pins this line to #0d0d0c on
     every `html[data-world]`, which is fine on the desert and invisible on the
     castle — near-black type on a near-black castle. It rides the same
     `--ascii-ink`/`--ascii-edge` pair the mark above it uses, so both flip
     together and there is one place that decides light-on-dark per world. */
  /* Cool porcelain, one step under the mark — see the ladder note on `html`.
     A hair of extra tracking reinforces the same step optically, so the line
     reads as a caption even before the colour registers. */
  color: var(--hero-discipline, var(--ink-dim));
  /* `--ascii-shadow`, not `--ascii-edge`. The variable was renamed and these
     references were left pointing at a name nothing defines — an undefined
     custom property makes the whole declaration invalid at computed-value time,
     so the halo was silently absent rather than broken-looking. Same lift the
     mark itself uses, so the hero has one shadow treatment. */
  text-shadow: 0 1px 1px var(--ascii-shadow);
}

/* The mono line was optically centred by its own uniform advance widths. A
   proportional face is not, and the trailing letter-space on the last item
   pushes the whole row a fraction left — this takes it back. */
.hero__disciplines li:last-child {
  margin-right: -0.28em;
}

/* polish.css:179 sends a hovered discipline to `var(--ink)` — near-black,
   which over the painted plate is the one direction it must not go. Hovering
   should climb the ladder toward the mark, not fall off it. */
.hero__disciplines li:hover,
html[data-world] .hero__disciplines li:hover {
  color: var(--ascii-ink);
}

/* ---------------------------------------------------------------------------
 * THE THREE RECORD FACTS — TYPE ONLY, HERE
 *
 * This block still strips every box off `.hero__pill`: no border, no
 * background, no backdrop-filter, no radius. That is DELIBERATE, not stale —
 * title-screen.css, which loads after this file, re-adds a small liquid-glass
 * pill on top of it. Two files, two jobs: this one sets the type (the figure/
 * label ladder, the shadow treatment, the responsive tracking); title-screen
 * decides whether there is a shape behind it. Read the note at the top of that
 * block before changing either — the container was removed once, by decision,
 * then explicitly asked back for these three specifically, smaller than any
 * earlier version, while the nav/mark/carousel/ventures/connect stayed exactly
 * as container-free as they already were. Resetting the properties here again
 * would just be fighting the later file.
 *
 * They are still <button>s in the markup with `aria-describedby` pointing at a
 * tooltip, so they keep their focus ring and their hover explanation.
 * ------------------------------------------------------------------------ */
.hero__pills {
  gap: clamp(20px, 2.6vw, 44px);
}

.hero__pill,
.hero__pill.glass,
html[data-world] .hero__pill,
html[data-world] .hero__pill.glass {
  display: inline-flex;
  flex-direction: row;
  align-items: baseline;
  gap: 7px;
  min-width: 0;
  min-height: 0;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: none;
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
  box-shadow: none;
  transition: opacity var(--t-fast) linear;
}

/* Shared type treatment only — the two halves take DIFFERENT rungs of the
   ladder below, which is what separates a figure from its descriptor. */
.hero__pill b,
.hero__pill i,
html[data-world] .hero__pill b,
html[data-world] .hero__pill i {
  font-family: var(--prose);
  font-weight: 500;
  font-style: normal;
  line-height: 1;
  text-transform: uppercase;
  /* `--ascii-shadow`, not `--ascii-edge`. The variable was renamed and these
     references were left pointing at a name nothing defines — an undefined
     custom property makes the whole declaration invalid at computed-value time,
     so the halo was silently absent rather than broken-looking. Same lift the
     mark itself uses, so the hero has one shadow treatment. */
  text-shadow: 0 1px 1px var(--ascii-shadow);
}

/* Lining figures: the number sits on a baseline beside capitals, and old-style
   numerals would drop below it and read as a typo rather than a refinement. */
.hero__pill b,
html[data-world] .hero__pill b {
  font-size: clamp(11px, 0.92vw, 14px);
  letter-spacing: 0.08em;
  font-variant-numeric: lining-nums;
  /* Warm ivory: the figure is the fact, and picking up the sunset's own warmth
     is what makes it read as lit rather than printed on top. */
  color: var(--hero-figure, var(--ink));
}

/* THE DESCRIPTOR IS A COLOUR STEP DOWN, NOT AN OPACITY STEP DOWN. It was once
   knocked back with `opacity: 0.72`, which was the wrong tool twice over: it
   fades the `--ascii-shadow` halo along with the glyphs, so the labels lost
   exactly the outline keeping them legible over a dark plate — and it can only
   ever produce a washed version of the SAME hue. A real colour lets the label
   go cool while the figure above it stays warm, so the pair separate by
   temperature as well as by value and neither looks faded. */
.hero__pill i,
html[data-world] .hero__pill i {
  /* 9.5px, fixed, was simply too small a target to hold a halo at this
     weight over a photograph — there weren't enough pixels in the stroke for
     the ring below to read as an outline instead of a smudge. Up to 11.5px,
     and the clamp now actually clamps instead of pinning one value. */
  font-size: clamp(9.5px, 0.7vw, 11.5px);
  font-weight: 600;
  letter-spacing: 0.2em;
  color: var(--hero-label, var(--ink-dim));
  /* Stated, not just omitted. polish.css:302 sets `opacity: 0.72` at the same
     specificity; deleting the declaration here left theirs standing, because
     removing a rule does not remove a competing one. */
  opacity: 1;
}

/* The dimmest rung at the smallest size — the hardest thing in the lockup to
   read, and now deliberately much darker than the figure beside it. Subtle
   has to stay READABLE, so what buys the subtlety is a dimmer ink over a
   near-opaque ring, not a dimmer ink on its own: the ring gives it a private
   dark ground so the tone can drop without the glyphs dissolving into the
   roof tile behind them.
   Six layers, not four: the first three build an actually-opaque 1.5px
   crust right at the glyph edge (a single blurred shadow at that radius
   never reaches full alpha at its core, so thin strokes were still letting
   the photo show through the middle of the stroke, not just the edge); the
   last three throw the wider glow that separates the glyph from a
   same-tone patch of roof tile or stone sitting directly behind it. */
/* ONE CRISP EDGE, NOT SIX LAYERS. This stacked three opaque layers and then
   three progressively wider blurs out to 11px — which is a halo by any other
   name, and it was doing to the pills what the white ring did to the chapter
   pages. --edge-crisp is the site-wide replacement. */
html[data-world]:not([data-world="blank"]) .hero__pill i {
  text-shadow: var(--edge-crisp);
}

/* Nothing moves and nothing fills in. The whole row simply comes up to full
   strength — the only affordance a line of text needs. */
.hero__pill-wrap:hover .hero__pill,
.hero__pill:focus-visible,
html[data-world] .hero__pill-wrap:hover .hero__pill,
html[data-world] .hero__pill:focus-visible {
  background: none;
  box-shadow: none;
  transform: none;
}
/* No hover restyle. The labels are already at full strength, and the feedback
   for these is the tooltip appearing — dimming type just to undim it on hover
   is the affordance the previous version was faking. */

/* The tooltip is plain type on the same edge treatment — no pane, no rule. */
.hero__pill-info {
  padding: 6px 0 0;
  border: 0;
  border-radius: 0;
  background: none;
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
  box-shadow: none;
  font: 400 clamp(9px, 0.72vw, 11px) / 1.5 var(--prose);
  letter-spacing: 0.01em;
  color: var(--ascii-ink, var(--ink-soft));
  /* `--ascii-shadow`, not `--ascii-edge`. The variable was renamed and these
     references were left pointing at a name nothing defines — an undefined
     custom property makes the whole declaration invalid at computed-value time,
     so the halo was silently absent rather than broken-looking. Same lift the
     mark itself uses, so the hero has one shadow treatment. */
  text-shadow: 0 1px 1px var(--ascii-shadow);
}

/* No local contrast panels. The backdrop is treated as one image instead. */
.hero__mark-stage {
  isolation: isolate;
}

.hero__mark-stage::before {
  display: none !important;
}

html {
  /* Dark ink on the off-white opening screen. Light ink only when a painted
     world is active — the old default was #faf8f2 here, which matched the
     field and made the mark invisible until JavaScript set data-world. */
  --ascii-ink: #11110f;
  --ascii-shadow: transparent;
  --picker-ink: #11110f;
  --picker-reverse: #faf8f2;

  /* ------------------------------------------------------------------------
   * THE HERO'S TONAL LADDER
   *
   * Four elements sit under the mark and they all used to be one flat
   * `--ascii-ink`, which is why the lockup read as one undifferentiated
   * block: a mark, a discipline line, three figures and three labels with
   * nothing separating them but size.
   *
   * They are now four steps in ONE WARM IVORY FAMILY. An earlier version put
   * the lower rungs on cool greys for separation; over a sunset plate that
   * just read as dirty, so every rung now shares the plate's own warmth and
   * the steps are made of VALUE alone:
   *
   *   mark        softest bright ivory  — subtle, not a glaring pure white
   *   figures     bright ivory          — the facts, one hair under the mark
   *   disciplines mid ivory             — steps back
   *   labels      deep ivory            — subordinate, still warm, never grey
   *
   * The steps are deliberately close. Separation on this page comes from
   * SIZE (14px figure against 9.5px label) and from the scrim below; pushing
   * the colours further apart is what produced the washed-out grey.
   * --------------------------------------------------------------------- */
  --hero-figure: #241f1a;
  --hero-discipline: #3d3730;
  --hero-label: #5b5349;
}

html[data-world="mountain"],
html[data-world="desert"],
html[data-world="beach"],
html[data-world="castle"] {
  --picker-ink: #11110f;
  --picker-reverse: #faf8f2;
}

html[data-world="blank"] {
  --ascii-ink: #11110f;
  --ascii-shadow: transparent;
  --picker-ink: #11110f;
  --picker-reverse: #faf8f2;

  /* Same warm ladder, inverted for paper: values RISE as importance falls. */
  --hero-figure: #241f1a;
  --hero-discipline: #3d3730;
  --hero-label: #5b5349;
}

html[data-world="forest"],
html[data-world="sea"],
html[data-world="pirate"] {
  --picker-ink: #faf8f2;
  --picker-reverse: #11110f;
}

html[data-world]:not([data-world="blank"]) {
  /* THE MARK IS THE MOST PROMINENT THING ON THE SCREEN, ON PURPOSE. It used to
     be held back deliberately (warm parchment, one soft shadow layer) so it
     would "sit in the plate's light" rather than stand out from it — which
     read as the mark losing to the photo behind it, not sitting confidently
     on top of it. Brighter ivory, held down by the two-layer edge above
     (not a wider blur — that's a halo again), so it stands off the scene
     instead of blending into it. */
  --ascii-ink: #f7efdc;
  --ascii-shadow: rgba(4, 3, 2, 0.85);
  --picker-ink: #faf8f2;
  --picker-reverse: #11110f;

  /* The spread is inverted against size — the SMALLEST type is the BRIGHTEST,
     because 14px needs luminance to hold its own beside a mark forty times
     its height.

     SOLD / REVENUE / VIEWS ARE NOT YELLOW. They were briefly set to --sun to
     pull them out of a grey that was genuinely too dim, which fixed the
     legibility and introduced a different problem: gold under the figures, on
     a gold sunset, made the metrics read as a highlighted callout rather than
     as captions, and it was the loudest thing on an otherwise quiet screen.
     This is a cool stone instead — clearly separated from the warm ivory
     above it by TEMPERATURE rather than by hue-shouting, and still bright
     enough (L≈0.72) to hold up where the sky is at its lightest. */
  --hero-figure: #fffaf0;
  --hero-discipline: #e6dbc6;
  --hero-label: #b9c0c7;
}

/* NO SCRIM. A dark pool behind the lockup was tried here and removed by
   decision — the photograph is the point, and every overlay tested on it
   (milky white, then dark) read as dirt on the picture. Legibility is
   carried entirely by per-glyph shadows instead: they darken only the few
   pixels touching each letterform, so the plate itself stays untouched.

   THE SMALL TYPE NEEDS A RING, NOT A DROP SHADOW. A single offset shadow
   leaves the top edge of every glyph sitting directly on whatever the photo
   is doing there, which at 9.5px is most of the letter. These stack a tight
   opaque ring with a wider soft one, so each character carries its own dark
   ground in every direction and stays readable over sunlit roof tile as well
   as over shadowed terrace. Applied to the two small rows only — the mark is
   large enough that its own single shadow is sufficient. */
html[data-world]:not([data-world="blank"]) .hero__disciplines,
html[data-world]:not([data-world="blank"]) .hero__pill b {
  text-shadow: var(--edge-crisp);
}

/* TWO LAYERS, NOT ONE — the single `0 1px 2px` shadow held up fine on a still
   frame and lost the mark's thin strokes wherever a bright cloud or roofline
   happened to be passing behind them; this is the same principle as
   --edge-crisp (site-wide, tokens.css) sized up for a mark this large: a
   near-opaque core plus one offset layer, still nowhere near a halo. */
.hero__wordmark:not(.hero__wordmark--echo) {
  color: var(--ascii-ink) !important;
  /* THIS IS WHERE THE MARK'S LEGIBILITY LIVES NOW.
   *
   * The scrim behind it was carrying that job and had to be driven dark enough
   * to bury the pixel scene to do it. Contrast at the GLYPH costs the picture
   * almost nothing by comparison: these layers only touch the pixels within a
   * few of each character, so the artwork reads everywhere the mark is not.
   *
   * Three layers, tight to loose: a hard 1px core that stops a bright pixel
   * bleeding through a thin stroke, a 2px seat, and one wider pass that gives
   * the whole mark a faint ground so it does not shimmer against high-detail
   * areas. Still nowhere near a halo — nothing here reads as glow. */
  text-shadow:
    0 0 1px var(--ascii-shadow),
    0 1px 2px var(--ascii-shadow),
    0 2px 7px color-mix(in srgb, var(--ascii-shadow) 62%, transparent) !important;
}

/* the `.hero__mark-drift { filter: none !important }` that used to sit here is
   gone — the drop-shadow it was cancelling is deleted at its source in
   scenes.css, so there is nothing left to override */

/* THIS WAS A `filter` ON THE FULL-SCREEN PHOTO LAYER, AND THAT IS WHAT WAS
 * GLITCHING ON TAB SWITCH. A filtered element needs its own GPU compositing
 * layer, re-rasterised through the filter graph rather than just copied —
 * and browsers are known to evict exactly that kind of expensive layer from
 * a backgrounded tab to free GPU memory. Switch back, and the browser has to
 * rebuild it: a visible pause, then a re-render, sometimes a blank/white
 * frame while it's mid-rebuild. A `filter` on a tiny mark or icon is free;
 * a `filter` on an element the size of the viewport is not.
 *
 * brightness(0.62) is just "mix in 38% black" — result = original*0.62 +
 * black*0.38 is algebraically the same thing brightness() computes — so a
 * flat, cheap overlay (below, on #scenery::before) gets the same dimming
 * with none of the compositing cost. saturate/contrast were minor next to
 * that and are dropped rather than approximated. */
/* THE VEIL IS NEARLY GONE. The first pass here still had a flat rgba(...,0.12)
 * base UNDER the edge falloff, so the two composited together and the top/
 * bottom bands ended up close to the original 38% this was meant to fix — the
 * middle looked better and the edges, where the nav and the metrics actually
 * sit, barely moved.
 *
 * The flat base is deleted outright. Legibility now comes from the type
 * itself — --edge-crisp site-wide, the two-layer --ascii-shadow on the mark —
 * not from dimming the picture under it. What's left is a THIN edge falloff,
 * only where the interface truly overlaps the artwork (the nav strip at the
 * very top, the discipline/metrics rows at the very bottom), and the entire
 * middle of the frame — where the mark and the scenery actually live — is
 * untouched: 0. */
html[data-world]:not([data-world="blank"]) #scenery.pixel-worlds::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 5;
  pointer-events: none;
  background:
    linear-gradient(
      180deg,
      rgba(4, 3, 2, 0.16) 0,
      rgba(4, 3, 2, 0) 14%,
      rgba(4, 3, 2, 0) 78%,
      rgba(4, 3, 2, 0.20) 100%
    );
}

/* THE NAV WAS RENDERING NEAR-BLACK ON THE PHOTOGRAPH.
 * polish.css:579 pins it to #0d0d0c through
 *   html[data-world] .chrome__nav a:not(:hover):not(:focus-visible):not([aria-current="true"])
 * — three :not() pseudo-classes, each of which counts toward specificity, so
 * that selector scores (0,5,2) and the plain rule that used to live here
 * (0,3,2) never applied. Removing the shadow on the next line of polish made
 * it worse: dark type, no halo, over a sunset.
 *
 * This repeats the same :not() chain to clear that bar, and keeps the chain
 * so hover/current states still belong to chrome.css rather than being
 * frozen by this rule. The links get the lockup's ring treatment, since they
 * sit over open sky far more often than any other type on the page.
 * ------------------------------------------------------------------------ */
html[data-world]:not([data-world="blank"])
  .chrome__nav a:not(:hover):not(:focus-visible):not([aria-current="true"]),
html[data-world]:not([data-world="blank"]) .chrome__nav a[aria-current="true"] {
  color: var(--on-art);
  text-shadow: var(--edge-crisp);
}

.hero__details {
  position: relative;
  isolation: isolate;
}

.hero__details::before {
  display: none !important;
}