/* ============================================================================
   The dark red hero and globe v2.

   Hero ground is chosen from the dock's Hero select (obs.heroground):
     V1 (a)  the light Clay hero, as it is            (no attribute)
     V2 (b)  deep to glow: dark at the top, through the brand reds into a warm glow
     V3 (c)  ember: a dark field with a red glow behind the globe
     V4 (d)  the type gradient: the colours of the gradient display type
   V2–V4 set html[data-heroground]. index.html sets it before first paint, so the
   pre-painted hero is already dark. Every version resolves into --b-ground at the
   hero's foot, so the stat band and the page below are unchanged.

   Globe v2 is a choice in the dock's artwork select (html[data-heroart="globe2"]); globe.js
   draws it with opt.v2 and reads its colours from the .globe element, set here.
   Tokens are in styles.css (--b-ember-*, --b-globe-mem, --b-globe-halo).
   ============================================================================ */

/* Only the dark part of the hero turns the nav dark; its foot is light again */
.hero-navzone { display: none; position: absolute; inset: 0 0 auto; height: 78%; pointer-events: none; }
:root[data-heroground] .hero-navzone { display: block; }

/* ---------------------------------------------------------------- text on the dark ground */
:root[data-heroground] .hero3 {
  --b-hero-ink: var(--b-on-ember); --b-hero-ink-2: var(--b-on-ember-2); --b-on-hero: var(--b-on-ember);
  --b-hero-chip: var(--b-ember-chip); --b-hero-chip-line: var(--b-ember-chip-line);
  --focus: var(--b-accent-on-dark);
  background: var(--b-ember-1); }
:root[data-heroground] .hero3 .hero2-try a:hover { border-color: var(--b-accent-on-dark); background: rgba(var(--b-ember-rgb), .5); }
:root[data-heroground] .hero3 .hsearch { box-shadow: 0 28px 60px -26px rgba(var(--b-ember-rgb), .95), 0 0 0 1px rgba(255, 255, 255, .1); }
:root[data-heroground] .hero3 .hsearch:focus-within { outline-color: var(--b-accent-on-dark); }

/* ---------------------------------------------------------------- the grounds */
/* Each ends on --b-ground: a last layer brings in the warm paper over the bottom of the hero,
   so nothing laid over the ground (the glow, the type colours) can tint the seam with the stat band */
/* V2: vertical, near-black at the top, down through the brand reds into a warm horizon */
:root[data-heroground="b"] .hero3-bg {
  background:
    linear-gradient(180deg, transparent 88%, var(--b-ember-peach) 95%, var(--b-ground) 100%),
    radial-gradient(120% 34% at 50% 100%, rgba(var(--b-ember-flare-rgb), .5), rgba(var(--b-ember-flare-rgb), 0) 70%),
    linear-gradient(180deg, var(--b-ember-0) 0%, var(--b-ember-1) 14%, var(--b-ember-2) 30%, var(--b-ember-3) 46%, var(--b-ember-4) 60%, var(--b-ember-5) 72%, var(--b-ember-glow) 82%, var(--b-ember-flare) 89%, var(--b-ember-peach) 95%, var(--b-ground) 100%); }

/* V3: a near-black field, the globe backlit by a hot glow of its own */
:root[data-heroground="c"] .hero3-bg {
  background:
    linear-gradient(180deg, transparent 80%, rgba(var(--b-ember-glow-rgb), .7) 88%, var(--b-ember-flare) 93%, var(--b-ember-peach) 97%, var(--b-ground) 100%),
    radial-gradient(circle at var(--gx, 74%) var(--gy, 64%), rgba(var(--b-ember-flare-rgb), .62) 0, rgba(var(--b-ember-glow-rgb), .62) calc(var(--gr, 440px) * .6), rgba(var(--b-ember-glow-rgb), .4) var(--gr, 440px), rgba(var(--b-ember-glow-rgb), .14) calc(var(--gr, 440px) * 1.22), rgba(var(--b-ember-glow-rgb), 0) calc(var(--gr, 440px) * 1.6)),
    linear-gradient(160deg, var(--b-ember-0) 0%, var(--b-ember-1) 60%, var(--b-ember-2) 100%); }

/* V4: the display type's gradient laid across the hero, deep under the copy, the light reds under the globe */
:root[data-heroground="d"] .hero3-bg {
  background:
    linear-gradient(180deg, transparent 86%, var(--b-ember-t1) 95%, var(--b-ground) 100%),
    radial-gradient(circle at var(--gx, 74%) var(--gy, 64%), rgba(var(--b-ember-rgb), .32) 0, rgba(var(--b-ember-rgb), .2) var(--gr, 440px), rgba(var(--b-ember-rgb), 0) calc(var(--gr, 440px) * 1.4)),
    linear-gradient(115deg, var(--b-ember-0) 0%, var(--b-ember-t5) 34%, var(--b-ember-t4) 58%, var(--b-ember-t3) 80%, var(--b-ember-t2) 100%); }

/* Stacked, the hero is tall and narrow, so the diagonal runs more nearly down it; the copy keeps the deep half */
@media (max-width: 900px) {
  :root[data-heroground="d"] .hero3-bg {
    background:
      linear-gradient(180deg, transparent 86%, var(--b-ember-t1) 95%, var(--b-ground) 100%),
      radial-gradient(circle at var(--gx, 50%) var(--gy, 80%), rgba(var(--b-ember-rgb), .32) 0, rgba(var(--b-ember-rgb), .2) var(--gr, 260px), rgba(var(--b-ember-rgb), 0) calc(var(--gr, 260px) * 1.4)),
      linear-gradient(174deg, var(--b-ember-0) 0%, var(--b-ember-t5) 38%, var(--b-ember-t4) 64%, var(--b-ember-t3) 79%, var(--b-ember-t2) 90%, var(--b-ember-t1) 97%); }
}

/* The dark hero runs a little past the screen, so its warm foot falls below the copy rather than under it */
@media (min-width: 901px) {
  :root[data-heroground] .hero3 { padding-bottom: calc(clamp(var(--sp-6), 8vh, var(--sp-12)) + clamp(var(--sp-14), 15vh, var(--sp-21))); }
  /* the extra foot is added to the height too, so the copy stays centred in the first screen (29 Oct) */
  :root[data-heroground] .hero3 { min-height: calc(max(720px, 100svh) + clamp(var(--sp-14), 15vh, var(--sp-21))); }
}

/* the drifting orb and the grain belong to the light hero */
:root[data-heroground] .hero3-bg .orb { display: none; }
:root[data-heroground] .hero3-bg::after { opacity: .12; }

/* ---------------------------------------------------------------- the globe on it */
/* Light dots that darken into the ground at the rim, the accent turned light */
:root[data-heroground] .hero3 .globe {
  --b-globe-floor: var(--b-ember-globe-floor); --b-globe-far-k: var(--b-ember-globe-far-k);
  --b-globe-rim: var(--b-ember-globe-rim); --b-globe-far: var(--b-ember-globe-far);
  --b-globe-t1: var(--b-ember-globe-t1); --b-globe-t2: var(--b-ember-globe-t2); --b-globe-t3: var(--b-ember-globe-t3);
  --b-globe-glow: var(--b-ember-globe-glow); --b-globe-air: var(--b-ember-globe-air);
  --b-globe-mem: var(--b-ember-globe-mem); --b-globe-halo: var(--b-ember-globe-halo);
  --b-accent-rgb: var(--b-ember-globe-acc);
  --b-pin-on: var(--b-ember-pin-on); --b-pin-on-core: var(--b-ember-2); --b-pin-core: var(--b-ember-pin-core);
  --b-spark: var(--b-ember-spark); --b-spark-hot: var(--b-ember-spark-hot); }
/* The veil paints the ground's colour over the globe's foot; on a ground that changes colour
   down its height that shows, so here the land is masked away instead (the same stops) */
:root[data-heroground] .hero3 .g-veil { display: none; }
:root[data-heroground] .hero3 :is(.g-land, .g-glow) {
  -webkit-mask-image: linear-gradient(to bottom, #000 var(--fade-a, 75%), transparent var(--fade-b, 100%)), linear-gradient(to bottom, #000 48.7%, rgba(0, 0, 0, .5) 70.4%, transparent 92.1%);
  mask-image: linear-gradient(to bottom, #000 var(--fade-a, 75%), transparent var(--fade-b, 100%)), linear-gradient(to bottom, #000 48.7%, rgba(0, 0, 0, .5) 70.4%, transparent 92.1%);
  -webkit-mask-composite: source-in; mask-composite: intersect; }
:root[data-heroground] .hero3 .g-haze {
  -webkit-mask-image: linear-gradient(to bottom, transparent var(--fade-a, 75%), #000 var(--fade-m, 87%), transparent var(--fade-b, 100%)), linear-gradient(to bottom, #000 48.7%, rgba(0, 0, 0, .5) 70.4%, transparent 92.1%);
  mask-image: linear-gradient(to bottom, transparent var(--fade-a, 75%), #000 var(--fade-m, 87%), transparent var(--fade-b, 100%)), linear-gradient(to bottom, #000 48.7%, rgba(0, 0, 0, .5) 70.4%, transparent 92.1%);
  -webkit-mask-composite: source-in; mask-composite: intersect; }
@media (max-width: 900px) {
  :root[data-heroground] .hero3 :is(.g-land, .g-glow) {
    -webkit-mask-image: linear-gradient(to bottom, #000 var(--fade-a, 75%), transparent var(--fade-b, 100%)), linear-gradient(to bottom, #000 66%, rgba(0, 0, 0, .5) 83%, transparent 100%);
    mask-image: linear-gradient(to bottom, #000 var(--fade-a, 75%), transparent var(--fade-b, 100%)), linear-gradient(to bottom, #000 66%, rgba(0, 0, 0, .5) 83%, transparent 100%); }
  :root[data-heroground] .hero3 .g-haze {
    -webkit-mask-image: linear-gradient(to bottom, transparent var(--fade-a, 75%), #000 var(--fade-m, 87%), transparent var(--fade-b, 100%)), linear-gradient(to bottom, #000 66%, rgba(0, 0, 0, .5) 83%, transparent 100%);
    mask-image: linear-gradient(to bottom, transparent var(--fade-a, 75%), #000 var(--fade-m, 87%), transparent var(--fade-b, 100%)), linear-gradient(to bottom, #000 66%, rgba(0, 0, 0, .5) 83%, transparent 100%); }
}
/* The globe's card: a dark glass card on the dark ground */
:root[data-heroground] .hero3 .gcard { background: rgba(var(--b-ember-rgb), .78); color: var(--b-on-ember); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .14), 0 22px 44px -22px rgba(0, 0, 0, .7); }
:root[data-heroground] .hero3 .gcard .sf-label { color: var(--b-accent-on-dark); }
:root[data-heroground] .hero3 .gcard :is(.sf-meta, .sf-title) { color: var(--b-on-ember); }
:root[data-heroground] .hero3 .gcard .sf-meta { color: var(--b-on-ember-2); }
:root[data-heroground] .hero3 .gc-go { stroke: var(--b-accent-on-dark); }

/* ---------------------------------------------------------------- globe v2 */
/* The nineteen's glow: their dots, larger, on a canvas of their own, blurred by the compositor */
.g-glow { filter: blur(7px); opacity: .5; mix-blend-mode: multiply;
  -webkit-mask-image: linear-gradient(to bottom, #000 var(--fade-a, 75%), transparent var(--fade-b, 100%)); mask-image: linear-gradient(to bottom, #000 var(--fade-a, 75%), transparent var(--fade-b, 100%)); }
:root[data-heroground] .g-glow { opacity: .95; mix-blend-mode: screen; }
/* other land steps back so the region carries the picture */
:root[data-heroart="globe2"] .hero3 .globe { --b-globe-far-k: .5; }
:root[data-heroground][data-heroart="globe2"] .hero3 .globe { --b-globe-far-k: .5; --b-globe-floor: .16; }

/* ---------------------------------------------------------------- the plate and the featured entry */
/* The relief plate is printed on warm paper; on the dark ground it is turned into light lines on the red */
/* (the blend sits on the wrapper: it is its own stacking context, so a blend on the image would see nothing) */
:root[data-heroground][data-heroart="image"] .hero-plate { mix-blend-mode: screen; opacity: .5; }
:root[data-heroground][data-heroart="image"] .hero-plate img { filter: invert(1) grayscale(1) contrast(1.15); }

/* ---------------------------------------------------------------- ground X: your own reds */
/* Top to foot between the two picked reds, then the foot red blends into the page on an eased curve
   (smoothstep, mixed in OKLCH so it stays warm), with no third colour to band between them. The blend is a
   fixed length the panel's Fade slider moves down: below the hero's foot it carries on over the top of the
   section that follows (the stat band), so the page appears just above its cards. app.js writes both halves
   (--b-hero-grad, --b-hero-band) with matching colours at the seam; the fallback is the blend at the foot. */
:root[data-heroground="x"] .hero3-bg {
  background: var(--b-hero-grad, linear-gradient(180deg, var(--b-hero-c1) 0%, var(--b-hero-c2) 100%)); }  /* = the default: the red runs past the foot */
/* (no glow behind the globe here: on a phone the globe sits at the hero's foot, and the glow showed as a line where the hero ends) */
:root[data-heroground="x"] .hero3 + * { background-image: var(--b-hero-band, none); background-repeat: no-repeat; background-size: 100% var(--b-hero-band-h, 0px); }
/* the grain shifts the ground's average tone a hair, which shows where the hero ends and the band carries on */
:root[data-heroground="x"] .hero3-bg::after { display: none; }

/* ---------------------------------------------------------------- globe styles (dark grounds only) */
:root[data-heroground][data-globestyle="pale"] .hero3 .globe {
  --b-globe-body-0: var(--b-gs-pale-body-0); --b-globe-body-1: var(--b-gs-pale-body-1);
  --b-globe-clear: 1;
  --b-globe-floor: .32; --b-globe-far-k: .72;
  --b-globe-rim: var(--b-gs-pale-rim); --b-globe-far: var(--b-gs-pale-far);
  --b-globe-t1: var(--b-gs-pale-t1); --b-globe-t2: var(--b-gs-pale-t2); --b-globe-t3: var(--b-gs-pale-t3);
  --b-globe-mem: var(--b-gs-pale-mem); --b-globe-halo: var(--b-gs-pale-halo);
  --b-globe-air: var(--b-gs-pale-air); --b-accent-rgb: var(--b-gs-pale-acc);
  --b-pin-on: var(--b-gs-pale-pin-on); --b-pin-on-core: var(--b-on-ember); --b-pin-core: var(--b-gs-pale-pin-core);
  --b-spark: var(--b-gs-pale-spark); --b-spark-hot: var(--b-gs-pale-pin-on); }
:root[data-heroground][data-globestyle="rose"] .hero3 .globe {
  --b-globe-body-0: var(--b-gs-rose-body-0); --b-globe-body-1: var(--b-gs-rose-body-1);
  --b-globe-clear: 1;
  --b-globe-floor: .34; --b-globe-far-k: .74;
  --b-globe-rim: var(--b-gs-rose-rim); --b-globe-far: var(--b-gs-rose-far);
  --b-globe-t1: var(--b-gs-rose-t1); --b-globe-t2: var(--b-gs-rose-t2); --b-globe-t3: var(--b-gs-rose-t3);
  --b-globe-mem: var(--b-gs-rose-mem); --b-globe-halo: var(--b-gs-rose-halo);
  --b-globe-air: var(--b-gs-rose-air); --b-accent-rgb: var(--b-gs-rose-acc);
  --b-pin-on: var(--b-gs-rose-pin-on); --b-pin-on-core: var(--b-gs-rose-pin-core); --b-pin-core: var(--b-gs-rose-pin-core);
  --b-spark: var(--b-gs-rose-spark); --b-spark-hot: var(--b-gs-rose-pin-on); }
:root[data-heroground][data-globestyle="glass"] .hero3 .globe {
  --b-globe-body-0: var(--b-gs-glass-body-0); --b-globe-body-1: var(--b-gs-glass-body-1);
  --b-globe-floor: .2; --b-globe-far-k: .5;
  --b-globe-rim: var(--b-gs-glass-rim); --b-globe-far: var(--b-gs-glass-far);
  --b-globe-t1: var(--b-gs-glass-t1); --b-globe-t2: var(--b-gs-glass-t2); --b-globe-t3: var(--b-gs-glass-t3);
  --b-globe-mem: var(--b-gs-glass-mem); --b-globe-halo: var(--b-gs-glass-halo);
  --b-globe-air: var(--b-gs-glass-air); --b-accent-rgb: var(--b-gs-glass-acc); }
/* On a solid sphere the nineteen's glow darkens rather than lights */
:root[data-heroground]:is([data-globestyle="pale"], [data-globestyle="rose"]) .g-glow { mix-blend-mode: multiply; opacity: .5; }

/* ---------------------------------------------------------------- the dock's hero controls */
/* Globe style only means something on a dark ground with a globe; the reds button only for ground X */
.pd-gstyle, .pd-reds-btn { display: none !important; }
:root[data-heroground]:not([data-heroart="image"]):not([data-heroart="entry"]) .pd-gstyle { display: inline-flex !important; }
:root[data-heroground="x"] .pd-reds-btn { display: inline-flex !important; }
.pd-reds-btn .pd-sw { width: 26px; height: 12px; border-radius: 999px; background: linear-gradient(90deg, var(--b-hero-c1), var(--b-hero-c2)); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .3); }

/* The picker: two reds on the primary red's line, light to dark, with what they do to the hero's text */
.pd-reds { position: fixed; right: 14px; bottom: 74px; z-index: 71; width: min(340px, calc(100vw - 28px)); padding: var(--sp-2) var(--sp-2) var(--sp-2); border-radius: 18px;
  background: rgba(var(--b-shadow), .94); color: var(--b-on-dark); box-shadow: 0 20px 44px -18px rgba(0, 0, 0, .6), inset 0 0 0 1px rgba(255, 255, 255, .1);
  -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); font: 400 13px/1.4 var(--font-text); --focus: var(--b-accent-on-dark); }
.pd-reds-h { display: flex; align-items: center; justify-content: space-between; margin: 0 0 var(--sp-1-5); font: 500 10.5px/1 var(--font-mono); letter-spacing: .1em; text-transform: uppercase; }
.pd-reds-x { width: 26px; height: 26px; border: 0; border-radius: 50%; background: rgba(255, 255, 255, .12); color: #fff; cursor: pointer; font: inherit; }
.pd-red-row { display: grid; grid-template-columns: 44px 1fr 38px; align-items: center; gap: var(--sp-1); margin-bottom: var(--sp-1); }
.pd-red-row span { font: 500 10.5px/1 var(--font-mono); letter-spacing: .08em; text-transform: uppercase; color: rgba(255, 255, 255, .72); }
.pd-red-row i { width: 26px; height: 26px; border-radius: 8px; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .25); }
.pd-red-row input { width: 100%; height: 22px; margin: 0; appearance: none; -webkit-appearance: none; border-radius: 999px; cursor: pointer;
  background: var(--b-red-line); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .2); }
.pd-red-row input::-webkit-slider-thumb { -webkit-appearance: none; width: 18px; height: 18px; border-radius: 50%; background: #fff; box-shadow: 0 0 0 3px rgba(0, 0, 0, .35); }
.pd-red-row input::-moz-range-thumb { width: 18px; height: 18px; border: 0; border-radius: 50%; background: #fff; box-shadow: 0 0 0 3px rgba(0, 0, 0, .35); }
.pd-red-row output { font: 500 10.5px/1.2 var(--font-mono); color: #fff; text-align: right; }
.pd-red-row input:focus-visible { outline: 2px solid var(--focus); outline-offset: 3px; }
.pd-reds-cr { margin: var(--sp-0-5) 0 0; color: rgba(255, 255, 255, .8); }
.pd-reds-cr b { font-weight: 600; color: #fff; }
.pd-reds-cr.is-low b { color: var(--b-accent-on-dark); }
.pd-reds-presets { display: flex; flex-wrap: wrap; gap: var(--sp-1); margin-top: var(--sp-1-5); }
.pd-reds-presets button { min-height: 26px; padding: 0 var(--sp-1); border: 0; border-radius: 999px; background: rgba(255, 255, 255, .12); color: #fff; font: 500 10.5px/1 var(--font-mono); letter-spacing: .04em; cursor: pointer; }
.pd-reds-presets button:hover { background: rgba(255, 255, 255, .22); }
/* Moves are a draft until saved; Reset goes back to the last save */
.pd-reds-act { display: flex; align-items: center; gap: var(--sp-1); margin-top: var(--sp-2); padding-top: var(--sp-1-5); border-top: 1px solid rgba(255, 255, 255, .12); }
.pd-reds-state { flex: 1; margin: 0; font-size: 12px; color: rgba(255, 255, 255, .7); }
.pd-reds-state.is-dirty { color: #fff; }
.pd-reds-act button { min-height: 30px; padding: 0 var(--sp-2); border: 0; border-radius: 999px; background: rgba(255, 255, 255, .12); color: #fff; font: 500 12px/1 var(--font-text); cursor: pointer; }
.pd-reds-act button:hover:not(:disabled) { background: rgba(255, 255, 255, .22); }
.pd-reds-act .pd-reds-save { background: var(--b-solid-ink); color: var(--b-ink); }
.pd-reds-act .pd-reds-save:hover:not(:disabled) { background: var(--b-on-ember-2); }
.pd-reds-act button:disabled { opacity: .4; cursor: default; }
/* ---------------------------------------------------------------- around the globe (ground X) */
/* Halo tones the atmosphere down (globe.js reads it as --b-globe-air-k). The fade tool's two rings (app.js) set a
   radial mask on the globe's canvases: as drawn inside the inner ring, gone outside the outer one. */
:root[data-heroground="x"] .hero3 .globe { --b-globe-air-k: var(--b-x-halo, 1); }
:root[data-heroground="x"] .hero3 { --x-ring: radial-gradient(circle at calc(var(--gx, 74%) + var(--gr, 440px) * var(--b-x-fx, 0)) calc(var(--gy, 64%) + var(--gr, 440px) * var(--b-x-fy, 0)), #000 calc(var(--gr, 440px) * var(--b-x-fin, 1.6)), transparent calc(var(--gr, 440px) * var(--b-x-fout, 1.62))); }
/* the pins and the travelling line fade with the land */
:root[data-heroground="x"] .hero3 .g-fx { -webkit-mask-image: var(--x-ring); mask-image: var(--x-ring); }
:root[data-heroground="x"] .hero3 :is(.g-land, .g-glow) {
  -webkit-mask-image: linear-gradient(to bottom, #000 var(--fade-a, 75%), transparent var(--fade-b, 100%)), linear-gradient(to bottom, #000 48.7%, rgba(0, 0, 0, .5) 70.4%, transparent 92.1%), var(--x-ring);
  mask-image: linear-gradient(to bottom, #000 var(--fade-a, 75%), transparent var(--fade-b, 100%)), linear-gradient(to bottom, #000 48.7%, rgba(0, 0, 0, .5) 70.4%, transparent 92.1%), var(--x-ring);
  -webkit-mask-composite: source-in; mask-composite: intersect; }
:root[data-heroground="x"] .hero3 .g-haze {
  -webkit-mask-image: linear-gradient(to bottom, transparent var(--fade-a, 75%), #000 var(--fade-m, 87%), transparent var(--fade-b, 100%)), linear-gradient(to bottom, #000 48.7%, rgba(0, 0, 0, .5) 70.4%, transparent 92.1%), var(--x-ring);
  mask-image: linear-gradient(to bottom, transparent var(--fade-a, 75%), #000 var(--fade-m, 87%), transparent var(--fade-b, 100%)), linear-gradient(to bottom, #000 48.7%, rgba(0, 0, 0, .5) 70.4%, transparent 92.1%), var(--x-ring);
  -webkit-mask-composite: source-in; mask-composite: intersect; }
@media (max-width: 900px) {
  :root[data-heroground="x"] .hero3 :is(.g-land, .g-glow) {
    -webkit-mask-image: linear-gradient(to bottom, #000 var(--fade-a, 75%), transparent var(--fade-b, 100%)), linear-gradient(to bottom, #000 66%, rgba(0, 0, 0, .5) 83%, transparent 100%), var(--x-ring);
    mask-image: linear-gradient(to bottom, #000 var(--fade-a, 75%), transparent var(--fade-b, 100%)), linear-gradient(to bottom, #000 66%, rgba(0, 0, 0, .5) 83%, transparent 100%), var(--x-ring);
    -webkit-mask-composite: source-in; mask-composite: intersect; }
  :root[data-heroground="x"] .hero3 .g-haze {
    -webkit-mask-image: linear-gradient(to bottom, transparent var(--fade-a, 75%), #000 var(--fade-m, 87%), transparent var(--fade-b, 100%)), linear-gradient(to bottom, #000 66%, rgba(0, 0, 0, .5) 83%, transparent 100%), var(--x-ring);
    mask-image: linear-gradient(to bottom, transparent var(--fade-a, 75%), #000 var(--fade-m, 87%), transparent var(--fade-b, 100%)), linear-gradient(to bottom, #000 66%, rgba(0, 0, 0, .5) 83%, transparent 100%), var(--x-ring);
    -webkit-mask-composite: source-in; mask-composite: intersect; }
}
.pd-reds-sub { margin: var(--sp-2) 0 var(--sp-1); padding-top: var(--sp-1-5); border-top: 1px solid rgba(255, 255, 255, .12); font: 500 10.5px/1 var(--font-mono); letter-spacing: .1em; text-transform: uppercase; color: rgba(255, 255, 255, .72); }
.pd-red-row input[data-red="halo"] { background: linear-gradient(90deg, rgba(255, 255, 255, .1), rgba(255, 255, 255, .42)); }
.pd-fade-tool { display: grid; grid-template-columns: 44px 1fr auto; align-items: center; gap: var(--sp-1); }
.pd-fade-tool > span { font: 500 10.5px/1 var(--font-mono); letter-spacing: .08em; text-transform: uppercase; color: rgba(255, 255, 255, .72); }
.pd-fade-tool button { min-height: 30px; padding: 0 var(--sp-1-5); border: 0; border-radius: 999px; background: rgba(255, 255, 255, .12); color: #fff; font: 500 12px/1 var(--font-text); cursor: pointer; }
.pd-fade-tool button:hover { background: rgba(255, 255, 255, .22); }
.pd-fade-tool [aria-pressed="true"] { background: var(--b-solid-ink); color: var(--b-ink); }
.pd-fade-out { margin: var(--sp-1) 0 0 var(--sp-7); font: 500 10.5px/1.3 var(--font-mono); letter-spacing: .03em; color: rgba(255, 255, 255, .8); }
/* The tool itself, over the globe */
.fx-tool { position: absolute; inset: 0; z-index: 5; pointer-events: none; }
.fx-svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.fx-ring { fill: none; stroke-width: 1.5; }
.fx-ring-in { stroke: rgba(255, 255, 255, .9); stroke-dasharray: 7 6; }
.fx-ring-out { stroke: rgba(255, 255, 255, .55); stroke-dasharray: 2 5; }
.fx-hit { fill: none; stroke: transparent; stroke-width: 22; pointer-events: stroke; cursor: grab; }
.fx-grip { position: absolute; transform: translate(-50%, -50%); padding: var(--sp-1) var(--sp-1-5); border-radius: 999px; pointer-events: auto; cursor: grab; touch-action: none; user-select: none; white-space: nowrap;
  background: rgba(var(--b-shadow), .94); color: #fff; font: 500 10.5px/1 var(--font-mono); letter-spacing: .06em; text-transform: uppercase;
  box-shadow: 0 8px 18px -8px rgba(0, 0, 0, .6), inset 0 0 0 1px rgba(255, 255, 255, .18); }
.fx-grip b { font-weight: 600; color: var(--b-accent-on-dark); }
.fx-grip-c { padding: var(--sp-1) var(--sp-1); cursor: move; }
.fx-grip:active { cursor: grabbing; }
.fx-grip:focus-visible { outline: none; box-shadow: 0 0 0 3px var(--b-accent-on-dark); }

/* The two lines that set the fade, dragged on the page itself (or moved with the arrow keys) */
.pd-reds-drag { margin: 2px 0 var(--sp-1); font-size: 12.5px; line-height: 1.45; color: rgba(255, 255, 255, .78); }
.pd-reds-drag b { font-weight: 600; color: #fff; }
.pd-reds-drag span { display: block; margin-top: var(--sp-0-5); font: 500 10.5px/1.3 var(--font-mono); letter-spacing: .04em; color: #fff; }
.pd-redline { position: absolute; left: 0; right: 0; z-index: 60; height: 0; border-top: 2px dashed rgba(255, 255, 255, .9);
  box-shadow: 0 1px 0 rgba(0, 0, 0, .35), 0 -1px 0 rgba(0, 0, 0, .35); cursor: ns-resize; touch-action: none; }
.pd-redline-end { border-top-style: dotted; border-top-color: rgba(var(--b-shadow), .7); box-shadow: 0 1px 0 rgba(255, 255, 255, .5); }
.pd-redline::before { content: ""; position: absolute; left: 0; right: 0; top: -12px; height: 24px; }
.pd-redline-grip { position: absolute; top: -1px; left: 16px; transform: translateY(-50%); padding: var(--sp-1) var(--sp-1-5); border-radius: 999px;
  background: rgba(var(--b-shadow), .94); color: #fff; font: 500 10.5px/1 var(--font-mono); letter-spacing: .06em; text-transform: uppercase; white-space: nowrap;
  box-shadow: 0 8px 18px -8px rgba(0, 0, 0, .6), inset 0 0 0 1px rgba(255, 255, 255, .18); cursor: ns-resize; user-select: none; }
.pd-redline-grip b { font-weight: 600; color: var(--b-accent-on-dark); }
.pd-redline:hover, .pd-redline.is-drag { border-top-color: #fff; }
.pd-redline-end:hover, .pd-redline-end.is-drag { border-top-color: rgb(var(--b-shadow)); }
.pd-redline:focus-visible { outline: none; }
.pd-redline:focus-visible .pd-redline-grip { box-shadow: 0 0 0 3px var(--b-accent-on-dark); }

@media (max-width: 760px) { .pd-reds { left: 10px; right: 10px; width: auto; bottom: 120px; } }

/* The archive heroes (ext/hero-archive.js): line-art cabinets on the right of the hero, in place of the globe */
:root[data-heroart^="arch"] .hero3 .globe { display: none; }
.hero3 .arch { position: absolute; inset: 0 0 0 auto; z-index: 0; width: min(78%, 1300px); pointer-events: none;
  /* every edge melts into the red ground, and the far (back, top-right) edges fade with depth */
  -webkit-mask-image: radial-gradient(95% 90% at 62% 46%, #000 34%, transparent 76%), linear-gradient(to top right, #000 42%, transparent 82%); -webkit-mask-composite: source-in;
  mask-image: radial-gradient(95% 90% at 62% 46%, #000 34%, transparent 76%), linear-gradient(to top right, #000 42%, transparent 82%); mask-composite: intersect; }
.hero3 .arch .arch-svg { transform: translate(var(--ax, 0), var(--ay, 0)) scale(var(--as, 1)); transform-origin: 70% 30%; }
.arch-svg { display: block; width: 100%; height: 100%; overflow: visible; }  /* moved or scaled, the cabinets are never cut at the drawing's edge */
.arch-svg polygon, .arch-svg line { stroke: rgba(255, 255, 255, .82); stroke-width: 1.1; stroke-linejoin: round; vector-effect: non-scaling-stroke; }
.arch-svg .ln.soft { stroke: rgba(255, 255, 255, .35); }
.arch-svg .ln.hatch { stroke: rgba(255, 255, 255, .12); stroke-width: .9; }
.arch-svg .ln.gnd { stroke: rgba(255, 255, 255, .26); }
.arch-svg .ln.gnd.faint { stroke: rgba(255, 255, 255, .09); }
.arch-svg .f-inset { fill: none; stroke: rgba(255, 255, 255, .28); }
.arch-svg .f-holder { fill: color-mix(in srgb, var(--b-ember-1, #1e0508) 80%, #000); stroke: rgba(255, 255, 255, .6); }
.arch-svg .f-kick { fill: color-mix(in srgb, var(--b-ember-1, #1e0508) 75%, #000); stroke: rgba(255, 255, 255, .4); }
.arch-svg .f-lock { fill: none; stroke: rgba(255, 255, 255, .6); stroke-width: 1; vector-effect: non-scaling-stroke; }
.arch-svg polygon, .arch-svg line { stroke-width: 1.25; stroke-linecap: round; }
.arch-svg .f-front { fill: var(--b-ember-1, #1e0508); }
.arch-svg .f-top { fill: color-mix(in srgb, var(--b-ember-1, #1e0508) 86%, #fff); }
.arch-svg .f-side { fill: color-mix(in srgb, var(--b-ember-1, #1e0508) 93%, #fff); }
.arch-svg .f-hole { fill: #0b0203; }
.arch-svg .f-floor { fill: color-mix(in srgb, var(--b-ember-1, #1e0508) 80%, #000); }
.arch-svg .f-wall-in { fill: color-mix(in srgb, var(--b-ember-1, #1e0508) 90%, #000); }
.arch-svg .f-file { fill: color-mix(in srgb, var(--b-ember-1, #1e0508) 88%, #fff); stroke: rgba(255, 255, 255, .7); }
.arch-svg .f-file.on { fill: color-mix(in srgb, var(--b-ember-1, #1e0508) 70%, #fff); stroke: #fff; }
.arch-svg .f-pull { fill: none; stroke: rgba(255, 255, 255, .7); }
.arch-svg .lab { fill: rgba(255, 255, 255, .92); stroke: none; }
.arch-svg .lab-t { fill: #2b1a1b; font-family: 'Caveat', 'Bradley Hand', 'Segoe Print', cursive; font-weight: 600; text-anchor: middle; }
/* Never wider than the hero (the drawing may run past its own box, but not past the page) */
.hero3 .arch { overflow: hidden; }
/* Phones and small tablets: the cabinets sit in the band under the search, full strength, edges faded */
@media (max-width: 900px) {
  /* The globe's slot under the search (styles.css) holds the cabinets instead, at the same height */
  :root[data-heroart="arch1"] .hero3 .globe-slot { height: min(96vw, 480px); }
  .hero3 .arch { inset: auto 0 0 0; width: 100%; height: min(96vw, 480px);
    -webkit-mask-image: radial-gradient(80% 75% at 50% 50%, #000 40%, transparent 92%); mask-image: radial-gradient(80% 75% at 50% 50%, #000 40%, transparent 92%); }
  .hero3 .arch .arch-svg { transform-origin: 50% 50%; }
}