/* Alternate heroes on the installation render (js/hero-mockups.js, ?hero=a…h). a is the site's hero (index.html's head
   sets .hero-m.hero-m--a); ?hero=poster turns all of this off. The render's darks: its ceiling #0a0a0a, its floor #0d0d0e → #24262b at the corners. */

.hero-m #hero { height: 100vh; background: #0a0a0b; }
.hero-m--f #hero, .hero-m--g #hero { height: 260vh; }
.hero-m--still.hero-m--f #hero, .hero-m--still.hero-m--g #hero { height: 100vh; }
.hero-m .hero-inner, .hero-m .clip-cluster { display: none; }
.hero-m .hero-stage { display: block; padding: 0; overflow: hidden; }

.hm { --p: 0; position: absolute; inset: 0; color: var(--fg); }
.hm-img { display: block; }
.hm-title {
  font-family: var(--hero); font-weight: 400; line-height: 1; letter-spacing: 0.01em;
  font-size: clamp(56px, 8vw, 132px);
}
/* the tagline and SCROLL DOWN in the face js/hero-mockups.js tagFace sets (?tag): --tag-face, -style, -weight, -case
   (capitals for the woodcut faces, as written for the italics), -track (letter-spacing, scaled), -size (scaled) */
.hm-tag {
  font-family: var(--tag-face, var(--display)); font-style: var(--tag-style, normal); font-weight: var(--tag-weight, 700);
  text-transform: var(--tag-case, uppercase); line-height: 1.12;
}
.hm-tag span { display: block; }
.hm-tag .t-md { font-size: calc(var(--tag-size, 1) * clamp(15px, 1.5vw, 25px)); letter-spacing: calc(var(--tag-track, 1) * 0.16em); }
.hm-tag .t-lg { font-size: calc(var(--tag-size, 1) * clamp(18px, 2vw, 32px)); letter-spacing: calc(var(--tag-track, 1) * 0.08em); }
.hm-tag .t-sm { font-size: calc(var(--tag-size, 1) * clamp(12px, 1.05vw, 17px)); letter-spacing: calc(var(--tag-track, 1) * 0.3em); text-transform: none; margin: 3px 0; }
/* one line: "A meditation on THE LOS ANGELES AQUEDUCT FROM HEADWATERS TO THE OCEAN" */
.hm-tag--line { text-align: center; }
.hm-tag--line span { display: inline; }
.hm-tag--line .t-md, .hm-tag--line .t-lg { font-size: calc(var(--tag-size, 1) * clamp(13px, 1.35vw, 22px)); letter-spacing: calc(var(--tag-track, 1) * 0.16em); }
.hm-tag--line .t-sm { font-size: calc(var(--tag-size, 1) * clamp(11px, 1vw, 16px)); letter-spacing: calc(var(--tag-track, 1) * 0.2em); margin: 0 0.15em; }
.hm .poster-cue {
  font-size: calc(var(--tag-size, 1) * clamp(18px, 1.8vw, 28px)); margin-top: 0;
  font-family: var(--tag-face, var(--hero)); font-style: var(--tag-style, normal); font-weight: var(--tag-weight, 400);
  letter-spacing: calc(var(--tag-track, 1) * 0.08em);
}
/* SCROLL DOWN's options (js/hero-mockups.js CUES, ?cue; the user, 2026-11-10: subtler) */
html[data-cue] .hm .hm-cue { opacity: 0.82; }
html[data-cue=small] .hm .hm-cue { font: italic 500 clamp(15px, 1.25vw, 20px) / 1 'Cormorant Garamond', var(--display); letter-spacing: 0.06em; opacity: 0.72; }
html[data-cue=small] .hm .hm-cue img { height: 0.75em; }
html[data-cue=caps] .hm .hm-cue { font: 500 clamp(12px, 0.95vw, 15px) / 1 'Alegreya Sans SC', var(--mono); letter-spacing: 0.32em; opacity: 0.7; gap: 0.9em; }
html[data-cue=caps] .hm .hm-cue img { height: 1.1em; }
html[data-cue=mincho] .hm .hm-cue { font: 700 clamp(11px, 0.85vw, 14px) / 1 'Shippori Mincho B1', var(--display); letter-spacing: 0.42em; opacity: 0.7; gap: 1em; }
html[data-cue=mincho] .hm .hm-cue img { height: 1.2em; }
html[data-cue=line] .hm .hm-cue { flex-direction: column; gap: 10px; font: 500 clamp(11px, 0.85vw, 14px) / 1 'Alegreya Sans SC', var(--mono); letter-spacing: 0.36em; opacity: 0.7; }
html[data-cue=bare] .hm .hm-cue { flex-direction: column; gap: 10px; font: italic 500 clamp(16px, 1.3vw, 21px) / 1 'Cormorant Garamond', var(--display); letter-spacing: 0.05em; opacity: 0.75; }
html[data-cue=line] .hm-cue-word { padding-left: 0.36em; }   /* the tracking's trailing space, so the word sits centred over the line */
.hm-cue-line { display: none; }
html[data-cue=line] .hm-cue-line, html[data-cue=bare] .hm-cue-line {
  display: block; width: 1px; height: 34px; background: linear-gradient(to bottom, transparent, currentColor 30%, currentColor 70%, transparent);
  background-size: 100% 200%; animation: cue-line 3.6s ease-in-out infinite; opacity: 0.6;
}
@keyframes cue-line { 0% { background-position: 0 100%; } 100% { background-position: 0 -100%; } }
@media (prefers-reduced-motion: reduce) { .hm-cue-line { animation: none !important; } }
/* a face from the panel's Old West / Woodcut / Italic rows over whichever option (?face; after the options' rules, so it wins) */
html[data-cue][data-cue-face] .hm .hm-cue { font-family: var(--cue-face); font-style: var(--cue-style); font-weight: var(--cue-weight); }
.hm-picker.hm-cue-picker { bottom: auto; top: 64px; }   /* clear of SCROLL DOWN at the bottom */

/* the tagline faces' panel sits above the hero mockups' when both are open */
.hm-picker.hm-tag-picker { bottom: auto; top: 64px; }
.hm-cap {
  position: absolute; right: 12px; bottom: 10px; z-index: 2;
  font: 10px/1 var(--mono); letter-spacing: 0.2em; text-transform: uppercase; color: rgba(240, 236, 228, 0.55);
}
/* the poster, as today (cloned from .hero-inner) */
.hm-poster-title { font-family: var(--hero); font-size: clamp(64px, 9vw, 150px); line-height: 1; margin: 18px 0 0; }
.hm-poster .poster-cue { margin-top: 20px; }

/* ─── a · Full bleed ─────────────────────────────────────────────────────────
   The site's hero: the shared rules for a, f and g first (a full width, held to its floor), then a's own. */
/* Held to its floor (the user liked it there, 2026-10-30), unless that would take the silhouette's head (28.6% down
   the render) off the top, as on very wide screens: then it comes down to keep the head 20px from the top and the
   floor gives way instead. --s: the render's height on screen (1448 × 1086 covering the screen) */
.hm-a .hm-img, .hm-f .hm-img, .hm-g .hm-img {
  --s: max(75vw, 100vh);
  position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover;
  object-position: 50% min(0px, max(100vh - var(--s), 20px - 0.286 * var(--s)));
}
/* a: the floor fades out over the last quarter screen into the page's own ground (the old map), so the hero runs on into
   the next page (the user, 2026-10-30); the shade behind the type eases off at the very bottom too */
.hero-m--a #hero { background: none; }
.hm-a .hm-img {
  -webkit-mask-image: linear-gradient(to bottom, #000 calc(100% - 26vh), transparent);
  mask-image: linear-gradient(to bottom, #000 calc(100% - 26vh), transparent);
}
.hm.hm-a .hm-shade { background: linear-gradient(to top, rgba(6, 6, 7, 0), rgba(6, 6, 7, 0.55) 10%, rgba(6, 6, 7, 0) 38%); }
.hm-a .hm-shade, .hm-f .hm-shade, .hm-g .hm-shade { position: absolute; inset: 0; background: linear-gradient(to top, rgba(6, 6, 7, 0.72), rgba(6, 6, 7, 0) 36%); }
.hm-a .hm-title, .hm-f .hm-title, .hm-g .hm-title { position: absolute; left: 4.5vw; bottom: 5.5vh; font-size: clamp(56px, 10vw, 168px); text-shadow: 0 2px 30px rgba(0, 0, 0, 0.5); }
.hm-a .hm-foot, .hm-f .hm-foot, .hm-g .hm-foot {
  position: absolute; right: 4.5vw; bottom: 5.5vh;
  display: flex; flex-direction: column; align-items: flex-end; gap: 14px; text-align: right;
}
.hm-a .hm-cap, .hm-f .hm-cap, .hm-g .hm-cap { top: 64px; bottom: auto; }   /* under the masthead */
/* a, on every screen as on a phone (the user, 2026-11-02: WATERFALL! at the top and the tagline at the bottom "looks way
   better than the left right thing"): the whole render, fit to the screen's height and centred, so its dark ceiling is
   above the figure for the title; where the screen is wider than the render, its sides fade into the dark */
.hm.hm-a { background: linear-gradient(to bottom, #0a0a0b calc(100% - 26vh), rgba(10, 10, 11, 0)); }
.hm-a .hm-img {
  inset: 0 auto 0 50%; width: auto; max-width: none; height: 100%; object-fit: fill; object-position: 0 0; transform: translateX(-50%);
  -webkit-mask-image: linear-gradient(to bottom, #000 calc(100% - 26vh), transparent), linear-gradient(to right, transparent, #000 9%, #000 91%, transparent);
  -webkit-mask-composite: source-in;
  mask-image: linear-gradient(to bottom, #000 calc(100% - 26vh), transparent), linear-gradient(to right, transparent, #000 9%, #000 91%, transparent);
  mask-composite: intersect;
}
/* wider than a phone, the render comes down a little, its ceiling fading up into the dark, so the title is clear of it */
@media (min-width: 641px) {
  .hm-a .hm-img {
    top: 7vh; height: 93vh;
    -webkit-mask-image: linear-gradient(to bottom, transparent, #000 9vh, #000 calc(100% - 26vh), transparent), linear-gradient(to right, transparent, #000 9%, #000 91%, transparent);
    mask-image: linear-gradient(to bottom, transparent, #000 9vh, #000 calc(100% - 26vh), transparent), linear-gradient(to right, transparent, #000 9%, #000 91%, transparent);
  }
}
.hm-a .hm-title { left: 0; right: 0; top: calc(34px + 3.4vh); bottom: auto; text-align: center; font-size: clamp(56px, 11.5vh, 160px); }
.hm-a .hm-foot { left: 4.5vw; right: 4.5vw; bottom: 5vh; align-items: center; text-align: center; gap: 12px; }
.hm-a .hm-foot .hm-tag span { display: inline; }
.hm-a .hm-foot .hm-tag :is(.t-md, .t-lg) { font-size: calc(var(--tag-size, 1) * clamp(14px, 1.45vw, 24px)); letter-spacing: calc(var(--tag-track, 1) * 0.14em); }
.hm-a .hm-foot .hm-tag .t-sm { font-size: calc(var(--tag-size, 1) * clamp(12px, 1.1vw, 18px)); letter-spacing: calc(var(--tag-track, 1) * 0.16em); margin: 0 0.12em; }

/* ─── b · Out of the dark ────────────────────────────────────────────────────
   The whole render, its edges fading into black; its ceiling and floor run into the title and the tagline. */
.hm-b { display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 2vh 4vw 3vh; }
.hm-b .hm-title { position: relative; z-index: 1; font-size: clamp(48px, 6.4vw, 108px); margin-bottom: -5.5vh; }
.hm-b .hm-plate { position: relative; width: min(100vw, 89vh); aspect-ratio: 4 / 3; }
.hm-b .hm-plate .hm-img {
  width: 100%; height: 100%;
  -webkit-mask-image: linear-gradient(to right, transparent, #000 14%, #000 86%, transparent), linear-gradient(to bottom, transparent, #000 12%, #000 88%, transparent);
  -webkit-mask-composite: source-in;
  mask-image: linear-gradient(to right, transparent, #000 14%, #000 86%, transparent), linear-gradient(to bottom, transparent, #000 12%, #000 88%, transparent);
  mask-composite: intersect;
}
.hm-b .hm-plate .hm-cap { right: 15%; bottom: 13%; }
.hm-b .hm-tag { position: relative; z-index: 1; margin-top: -4.5vh; }
.hm-b .poster-cue { margin-top: 1.6vh; }

/* ─── c · Poster + plate ─────────────────────────────────────────────────────
   Today's poster; the render where the clips were, framed like a print. */
.hm-c { display: flex; align-items: center; justify-content: space-between; gap: 4vw; padding: 90px 4vw 70px 5vw; }
.hm-c .hm-poster { flex: none; }
.hm-c .hm-poster-title { font-size: clamp(56px, 6.6vw, 118px); }
.hm-c .poster-tagline .t-md { font-size: clamp(16px, 1.7vw, 28px); }
.hm-c .poster-tagline .t-lg { font-size: clamp(20px, 2.1vw, 34px); }
.hm-c .poster-tagline .t-sm { font-size: clamp(12px, 1.05vw, 17px); }
.hm-c .hm-plate { position: relative; margin: 0; flex: 0 1 auto; width: min(54vw, 90vh); aspect-ratio: 4 / 3; padding: 8px; border: 1px solid rgba(240, 236, 228, 0.45); }
.hm-c .hm-plate .hm-img { width: 100%; height: 100%; object-fit: cover; }
.hm-c .hm-plate .hm-cap { position: absolute; right: 0; bottom: -20px; }

/* ─── d · Cinema ─────────────────────────────────────────────────────────────
   A letterbox crop of the render (about 2.4 : 1): the mountains, the silhouette, the figure to the knee. */
.hm-d { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2.4vh; }
.hm-d .hm-title { font-size: clamp(48px, 6.4vw, 108px); }
.hm-d .hm-band { position: relative; width: 100%; height: min(41.8vw, 62vh); }
.hm-d .hm-band .hm-img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 50%; }

/* ─── e · Broadside ──────────────────────────────────────────────────────────
   The render as an engraved plate in the site's two inks, set in the poster's rules. */
.hm-e { display: flex; align-items: center; justify-content: center; padding: 3vh 4vw; background: var(--bg); }
.hm-sheet { display: flex; flex-direction: column; align-items: center; width: min(92vw, 80vh); }
.hm-e .hm-title { font-size: clamp(52px, 7vw, 112px); margin: 1.6vh 0 0; }
.hm-e .poster-rule.ornament { margin: 1.2vh 0 1.6vh; }
.hm-e .hm-plate { position: relative; width: 100%; aspect-ratio: 4 / 3; border: 1px solid var(--fg); padding: 5px; }
.hm-e .hm-plate .hm-img { width: 100%; height: 100%; object-fit: cover; filter: url(#hm-duotone) contrast(1.18); }
.hm-e .hm-hatch {
  position: absolute; inset: 5px; pointer-events: none;
  background: repeating-linear-gradient(0deg, rgba(13, 17, 23, 0.4) 0 1px, transparent 1px 3px);
}
.hm-e .hm-plate .hm-cap { right: 12px; bottom: 12px; color: rgba(240, 236, 228, 0.7); }
.hm-e .hm-tag { margin: 1.8vh 0 1.4vh; white-space: nowrap; }
.hm-e .hm-tag :is(.t-md, .t-lg) { font-size: clamp(12px, 1.15vw, 19px); letter-spacing: 0.12em; }
.hm-e .hm-tag .t-sm { font-size: clamp(10px, 0.9vw, 14px); letter-spacing: 0.14em; }
.hm-e .poster-cue { margin-top: 1.6vh; }

/* ─── f · Reveal ─────────────────────────────────────────────────────────────
   --p (0–1, js/hero-mockups.js) runs down the pinned track: the poster, then the room coming up out of the dark,
   then a's type. */
.hm-f .hm-img { opacity: clamp(0, calc((var(--p) - 0.12) / 0.45), 1); transform: scale(calc(1.1 - 0.1 * min(1, var(--p) / 0.6))); }
.hm-f .hm-shade { opacity: clamp(0, calc((var(--p) - 0.12) / 0.45), 1); }
.hm-f .hm-poster { position: absolute; left: 50%; top: 50%; translate: -50% -50%; opacity: clamp(0, calc(1 - var(--p) / 0.28), 1); transform: translateY(calc(var(--p) * -10vh)); }
.hm-f .hm-title, .hm-f .hm-foot, .hm-f .hm-cap { opacity: clamp(0, calc((var(--p) - 0.55) / 0.3), 1); }
.hm-f .hm-cue { pointer-events: none; }

/* ─── g · Push in ────────────────────────────────────────────────────────────
   Starts on a; the pinned track moves into the silhouette (48% down the render; at object-position 48% it stays
   48% down the screen, whatever the crop). The render is 1448 px wide: soft by the end. */
.hm-g .hm-img { object-position: 50% 48%; transform-origin: 50% 48%; transform: scale(calc(1 + var(--p) * 0.95)); }
.hm-g .hm-title, .hm-g .hm-foot, .hm-g .hm-shade, .hm-g .hm-cap { opacity: clamp(0, calc(1 - var(--p) / 0.22), 1); }

/* ─── h · Split ──────────────────────────────────────────────────────────────── */
.hm-h { display: grid; grid-template-columns: 56fr 44fr; }
.hm-side { position: relative; overflow: hidden; }
.hm-side .hm-img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 70%; }
.hm-right { display: flex; align-items: center; justify-content: center; padding: 80px 3vw 60px; }
.hm-h .hm-poster-title { font-size: clamp(52px, 6.2vw, 112px); }
.hm-h .poster-tagline .t-md { font-size: clamp(15px, 1.6vw, 26px); }
.hm-h .poster-tagline .t-lg { font-size: clamp(18px, 2vw, 32px); }
.hm-h .poster-tagline .t-sm { font-size: clamp(11px, 1vw, 16px); }

/* the panel, bottom right (the menu's is in the middle) */
.mockup-picker.hm-picker, .mockup-picker.hm-picker.is-folded { left: auto; right: 14px; transform: none; max-width: min(560px, calc(100vw - 24px)); }
.hm-picker a.mp-btn { color: inherit; text-decoration: none; }

/* ─── Phones ─────────────────────────────────────────────────────────────── */
@media (max-width: 640px) {
  /* a, f, g: the full render is height-fit here (nothing off its ceiling): the title on the ceiling, the rest on the floor */
  .hm-a .hm-title, .hm-f .hm-title, .hm-g .hm-title { left: 0; right: 0; top: 7vh; bottom: auto; text-align: center; font-size: clamp(52px, 15vw, 72px); }
  .hm-a .hm-foot, .hm-f .hm-foot, .hm-g .hm-foot { left: 16px; right: 16px; bottom: 4vh; align-items: center; text-align: center; gap: 10px; }
  .hm-a .hm-foot .hm-tag span, .hm-f .hm-foot .hm-tag span, .hm-g .hm-foot .hm-tag span { display: inline; }
  .hm-a .hm-foot .hm-tag :is(.t-md, .t-lg), .hm-f .hm-foot .hm-tag :is(.t-md, .t-lg), .hm-g .hm-foot .hm-tag :is(.t-md, .t-lg) { font-size: calc(var(--tag-size, 1) * 13px); letter-spacing: calc(var(--tag-track, 1) * 0.14em); }
  .hm-a .hm-foot .hm-tag .t-sm, .hm-f .hm-foot .hm-tag .t-sm, .hm-g .hm-foot .hm-tag .t-sm { font-size: calc(var(--tag-size, 1) * 11px); letter-spacing: calc(var(--tag-track, 1) * 0.16em); margin: 0 0.1em; }
  .hm-a .hm-shade, .hm-f .hm-shade, .hm-g .hm-shade { background: linear-gradient(to top, rgba(6, 6, 7, 0.8), rgba(6, 6, 7, 0) 30%); }
  .hm.hm-a .hm-shade { background: linear-gradient(to top, rgba(6, 6, 7, 0), rgba(6, 6, 7, 0.65) 10%, rgba(6, 6, 7, 0) 32%); }
  .hm-a .hm-cap, .hm-f .hm-cap, .hm-g .hm-cap { top: 18vh; }

  .hm-b .hm-title, .hm-d .hm-title { font-size: clamp(48px, 14vw, 68px); }
  .hm-b .hm-title { margin-bottom: -3vh; }
  .hm-b .hm-plate { width: 120vw; }
  .hm-b .hm-tag { margin-top: -3vh; padding: 0 16px; }
  .hm-d .hm-band { height: 58vh; }
  .hm-d .hm-tag { padding: 0 16px; }

  /* c, h stack, so the hero grows past one screen */
  .hero-m--c #hero, .hero-m--h #hero { height: auto; min-height: 100vh; }
  .hero-m--c .hero-stage, .hero-m--h .hero-stage { position: relative; height: auto; min-height: 100vh; }
  .hm-c, .hm-h { position: relative; }
  .hm-c { flex-direction: column; justify-content: flex-start; padding: 80px 16px 48px; gap: 36px; }
  .hm-c .hm-plate { width: 100%; }
  .hm-h { grid-template-columns: 1fr; grid-template-rows: 56vh auto; }
  .hm-right { padding: 36px 16px 48px; }

  .hm-sheet { width: 100%; }
  .hm-e .hm-title { font-size: clamp(48px, 14vw, 68px); }
  .hm-e .hm-tag { padding: 0 4px; white-space: normal; }
}

/* The hero's opening (js/hero-reveal.js, the site's default since 2026-11-03; ?reveal=off skips it, ?reveal adds Replay): the render fades in once it has loaded (so a first visit never
   shows it drawing in), then the words and the menu come in shortly after. .rv-pre: all held back; .rv-img: the render in.
   (A swipe out from the silhouette was tried first and dropped: it would stutter on a first visit, the user.) */
.rv .hm-a .hm-img { transition: opacity 0.7s ease; }
.rv-pre:not(.rv-img) .hm-a .hm-img { opacity: 0; transition: none; }
.rv .hm-a :is(.hm-title, .hm-foot, .hm-cap, .hm-shade), .rv .site-menu { transition: opacity 0.6s ease, transform 0.6s ease; }
.rv-pre .hm-a :is(.hm-title, .hm-foot, .hm-cap, .hm-shade), .rv-pre .site-menu { opacity: 0 !important; pointer-events: none; transition: none; }
.rv-pre .hm-a .hm-title { transform: translateY(-10px); }
.rv-pre .hm-a .hm-foot { transform: translateY(10px); }
.rv .hm-a .hm-foot { transition-delay: 0.2s; }
.rv .hm-a .hm-cap, .rv .site-menu { transition-delay: 0.4s; }
.rv-replay { position: fixed; left: 14px; bottom: 14px; z-index: 70; padding: 6px 10px; border: 1px solid var(--rule); background: rgba(13, 17, 23, 0.92);
  color: var(--fg); font: 10px/1 var(--mono); letter-spacing: 0.12em; text-transform: uppercase; cursor: pointer; opacity: 0.75; }
.rv-replay:hover { opacity: 1; }