/* =============================================================
   HERO — refractive glass

   Built to the reference: one cut-out figure standing free on an ivory
   ground, faint concentric arcs behind her, a condensed display headline
   held to the left margin, and a slab of real glass low on the right that
   bends and splits what is behind it.

   The palette is the site's own crimson rather than the reference's gold,
   and none of the reference's own artwork is reproduced — the figure is the
   artist's own photograph with its background removed, and the arcs are
   drawn here as vector.

   This file owns the hero outright and loads after style.css.
   ============================================================= */

#hero.hz {
  /* Sticky, like every other chapter: this is what lets the biography climb
     over the hero instead of pushing it up the page. */
  position: sticky; top: 0;
  height: 100svh; min-height: 560px;
  display: block;
  overflow: hidden;
  padding: 0;
  /* Transparent on purpose. #flowers is a fixed layer that sits at the same
     depth as the hero and earlier in the document, so anything opaque painted
     here hides the poppies completely — which is exactly what happened. The
     ground moved to .hz-ground, which is behind both. */
  background: transparent;
}

/* the page ground, behind the poppies rather than in front of them */
.hz-ground {
  position: fixed; inset: 0; z-index: 1;
  pointer-events: none;
  background:
    radial-gradient(58% 46% at 50% 30%, rgba(201, 31, 55, .07), transparent 70%),
    radial-gradient(78% 60% at 50% 96%, rgba(125, 31, 50, .06), transparent 72%),
    linear-gradient(178deg, #FDF8F5 0%, #F9F1ED 54%, #F4E9E4 100%);
}

/* every layer sits on the same full-bleed grid, so the composition is
   described in percentages of the frame and not by document flow */
.hz-layer {
  position: absolute; inset: 0;
  pointer-events: none;
}

/* ---------- the arcs ----------
   Concentric hairlines rising from behind her head. They carry the whole
   sense of depth in the reference, and they cost about two kilobytes. */
.hz-arcs {
  z-index: 1;
  transform: translate3d(calc(var(--px) * 14px), calc(var(--py) * 9px), 0);
}
.hz-arcs svg { width: 100%; height: 100%; display: block; }

/* a warm bloom directly behind her, which is what keeps a cut-out from
   reading as a sticker */
.hz-bloom {
  z-index: 2;
  background:
    radial-gradient(30% 40% at 50% 52%, rgba(201, 31, 55, .13), transparent 72%),
    radial-gradient(46% 54% at 50% 62%, rgba(125, 31, 50, .07), transparent 78%);
  transform: translate3d(calc(var(--px) * 8px), calc(var(--py) * 5px), 0);
}

/* ---------- the figure ----------
   Free-standing: no frame, no radius, no shadow box. She is cut out, so the
   silhouette itself is the shape, and she runs off the bottom of the frame
   the way the reference figure does. A drop-shadow follows the alpha edge
   instead of a box shadow following a rectangle that is no longer there. */
.hz-figure {
  position: absolute;
  /* Sized by HEIGHT, not width. At 48vw she came out 930px tall in a 900px
     frame and lost the top of her head; anchored to the bottom and measured
     against the viewport's height she always stands inside it. Nudged right
     of centre so the headline has the left third to itself. */
  left: 53%; bottom: 0;
  height: min(84vh, 820px);
  width: auto;
  z-index: 3;
  transform: translate3d(calc(-50% + var(--px) * 5px), calc(var(--py) * 3px), 0);
  will-change: transform;
}
.hz-figure img {
  display: block; height: 100%; width: auto;
  filter: drop-shadow(0 26px 34px rgba(92, 24, 38, .16));
}
/* the hem meets the page instead of being cut off by it */
.hz-figure::after {
  content: ''; position: absolute; left: -6%; right: -6%; bottom: 0;
  height: 15%;
  background: linear-gradient(180deg, transparent, #F4E9E4 90%);
}

/* ---------- the headline ----------
   Caps, high contrast, tight leading, hung on the left margin with the
   second line indented behind an em dash — the reference's exact rhythm. */
.hz-copy {
  position: absolute;
  left: var(--pad); top: 23%;
  z-index: 6;
  max-width: min(33vw, 460px);
  pointer-events: none;
}
.hz-eyebrow {
  font-size: 11px; letter-spacing: .22em; text-transform: uppercase;
  color: rgba(23, 17, 17, .5);
  margin: 0 0 18px;
  overflow: hidden;
}
.hz-head {
  margin: 0;
  font-family: 'Playfair Display', 'Times New Roman', Georgia, serif;
  font-weight: 600;
  font-size: clamp(36px, 5.2vw, 86px);
  line-height: .94;
  letter-spacing: -.005em;
  text-transform: uppercase;
  color: #1A1113;
}
.hz-head .ln { display: block; overflow: hidden; }
.hz-head .ln.dash { padding-left: .34em; }
.hz-name {
  display: block;
  font-family: var(--sans, system-ui), sans-serif;
  font-size: 12px; letter-spacing: .26em; text-transform: uppercase;
  font-weight: 500; color: var(--crimson);
  margin-bottom: 12px;
}

/* the entrance: each line rises out of its own clipped band */
.hz-head .ln > span,
.hz-eyebrow > span {
  display: inline-block;
  animation: hz-rise .92s cubic-bezier(.16, 1, .3, 1) var(--d, 0s) both;
}
@keyframes hz-rise {
  from { transform: translateY(105%); opacity: 0; }
  to   { transform: none; opacity: 1; }
}

/* ---------- the lede ----------
   Bottom left, under a hairline rule, as the reference sets it. */
.hz-lede {
  position: absolute;
  left: var(--pad); bottom: clamp(48px, 9vh, 96px);
  z-index: 6;
  max-width: min(30vw, 360px);
  padding-top: 20px;
  border-top: 1px solid rgba(125, 31, 50, .22);
  font-size: 14px; line-height: 1.62;
  color: rgba(23, 17, 17, .62);
  animation: hz-lift .8s cubic-bezier(.16, 1, .3, 1) .5s both;
}
@keyframes hz-lift {
  from { opacity: 0; transform: translateY(14px); }
  to   { opacity: 1; transform: none; }
}

/* =============================================================
   THE GLASS
   A slab, not a frosted panel. What is behind it is displaced by the SVG
   lens defined in the markup and split into its channels along the rim,
   which is the one thing that makes it read as thick glass rather than as
   another blurred rectangle.
   ============================================================= */
.hz-glass {
  position: absolute;
  /* Pulled left so its inner half sits over the figure. A lens over an empty
     gradient displaces nothing anyone can see -- the refraction only reads
     where there is detail behind it, which is exactly how the reference
     places its panel across the figure rather than beside her. */
  /* Moved out to the right margin, where the small tile used to be. A lens
     only shows its work where there is detail behind it: out here it stands
     over open background for most of its width, so the displacement reads
     far more quietly than it did across the figure. */
  right: var(--pad); bottom: 13%;
  width: clamp(240px, 23vw, 340px);
  height: clamp(320px, 46vh, 480px);
  z-index: 5;
  border-radius: 30px;
  overflow: hidden;
  transform: translate3d(calc(var(--px) * 18px), calc(var(--py) * 12px), 0);
  will-change: transform;
  box-shadow:
    0 40px 80px -40px rgba(72, 26, 34, .34),
    inset 0 1px 0 rgba(255, 255, 255, .75),
    inset 0 0 0 1px rgba(255, 255, 255, .38);
  animation: hz-fade .9s ease .34s both;
}
@keyframes hz-fade { from { opacity: 0; } to { opacity: 1; } }

/* The refracting body. `url()` in backdrop-filter is Chromium-only, so the
   -webkit- line below it carries a plain blur for everything else: the panel
   degrades to frosted glass rather than to nothing. */
.hz-glass-body {
  position: absolute; inset: 0;
  border-radius: inherit;
  -webkit-backdrop-filter: blur(9px) saturate(1.06);
  backdrop-filter: blur(2px) url(#hzGlass) saturate(1.06);
  background: linear-gradient(150deg, rgba(255,255,255,.20), rgba(255,246,244,.10));
}

/* The chromatic rim. Opposing hues offset along one axis and held to a
   narrow band by the mask — that is what the reference's fringe is. */
.hz-glass-rim {
  position: absolute; inset: 0;
  border-radius: inherit;
  /* `screen` washes to white over an ivory page, which is why the fringe was
     invisible. `hard-light` keeps the hue and still lifts the highlight. */
  mix-blend-mode: hard-light;
  opacity: .8;
  background:
    linear-gradient(116deg, rgba(255, 40, 70, .5) 0%, rgba(255,120,60,.22) 12%, transparent 30%),
    linear-gradient(116deg, transparent 68%, rgba(40, 150, 255, .34) 88%, rgba(150, 60, 255, .42) 100%),
    linear-gradient(26deg, rgba(60, 235, 180, .3) 0%, transparent 26%);
  -webkit-mask-image: radial-gradient(124% 124% at 50% 50%, transparent 44%, #000 82%);
  mask-image: radial-gradient(124% 124% at 50% 50%, transparent 44%, #000 82%);
}

/* one travelling highlight — the only continuous motion in the scene */
.hz-glass-sheen {
  position: absolute; inset: -40%;
  background: linear-gradient(74deg, transparent 42%, rgba(255,255,255,.45) 50%, transparent 58%);
  animation: hz-sheen 9s ease-in-out infinite;
  opacity: .5;
}
@keyframes hz-sheen {
  0%, 100% { transform: translate3d(-22%, 0, 0); }
  50%      { transform: translate3d(22%, 0, 0); }
}

.hz-glass-in {
  position: absolute; inset: 0;
  display: flex; flex-direction: column; justify-content: flex-end;
  padding: 26px 26px 28px;
  z-index: 2;
}
.hz-badge {
  position: absolute; top: 22px; left: 22px;
  width: 46px; height: 46px; border-radius: 50%;
  display: grid; place-items: center;
  background: rgba(255, 252, 250, .5);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.6);
  color: var(--wine);
}
.hz-glass h2 {
  margin: 0 0 10px;
  font-family: 'Playfair Display', Georgia, serif;
  font-weight: 600; text-transform: uppercase;
  font-size: clamp(19px, 1.7vw, 26px); line-height: 1.04;
  letter-spacing: -.005em;
  color: #1A1113;
}
.hz-glass p {
  margin: 0 0 16px;
  font-size: 12.5px; line-height: 1.55;
  color: rgba(23, 17, 17, .6);
}
.hz-play {
  align-self: flex-start;
  display: inline-flex; align-items: center; gap: 9px;
  min-height: 44px; padding: 10px 18px 10px 13px;
  border-radius: 999px;
  background: #1A1113; color: #FFF9F6;
  font-size: 12.5px; letter-spacing: .02em;
  text-decoration: none;
  transition: transform .3s cubic-bezier(.16,1,.3,1), background .3s ease;
}
.hz-play:hover { transform: translateY(-2px); background: var(--wine); }
.hz-play svg { display: block; }

/* the lens map must never paint */
.hz-defs { position: absolute; width: 0; height: 0; overflow: hidden; }

/* =============================================================
   PHONE
   The slab and the tile cannot sit beside a 390px figure, so the scene
   stacks: figure, headline, then the glass full width beneath it.
   ============================================================= */
@media (max-width: 900px) {
  #hero.hz {
    display: flex; flex-direction: column;
    justify-content: flex-start; align-items: center;
    padding: 88px var(--pad) max(20px, env(safe-area-inset-bottom));
  }
  .hz-figure {
    position: relative; left: auto; bottom: auto;
    /* the desktop rule sizes her by HEIGHT; overriding only the width left an
       820px-tall image inside a 312px-wide box, which is why she overflowed
       the frame and lost her head behind the nav */
    width: min(78vw, 320px);
    height: auto;
    order: 1;
    transform: none;
  }
  .hz-figure img { width: 100%; height: auto; }
  /* the source photograph ends at her waist; on desktop that edge falls below
     the fold, on a phone it does not, so it is dissolved instead of cut */
  .hz-figure::after {
    display: block;
    left: 0; right: 0; height: 22%;
    background: linear-gradient(180deg, transparent, #FBF4F1 88%);
  }
  .hz-copy {
    position: relative; left: auto; top: auto;
    order: 2; max-width: 100%; text-align: center;
    margin-top: 8px;
  }
  .hz-head { font-size: clamp(30px, 10vw, 46px); }
  .hz-head .ln.dash { padding-left: 0; }
  .hz-eyebrow { margin-bottom: 10px; }
  .hz-glass {
    position: relative; right: auto; bottom: auto;
    order: 3;
    width: 100%; height: auto; min-height: 148px;
    margin-top: 16px;
    transform: none;
    border-radius: 22px;
  }
  .hz-glass-in { position: relative; inset: auto; padding: 18px; }
  .hz-badge { display: none; }
  .hz-glass h2 { font-size: 17px; }
  .hz-lede { display: none; }
  .hz-arcs { opacity: .55; }
}

@media (prefers-reduced-motion: reduce) {
  /* nothing moves, but everything is still there */
  .hz-glass-sheen { animation: none; }
  .hz-head .ln > span, .hz-eyebrow > span,
  .hz-lede, .hz-glass {
    animation: none;
    opacity: 1;
    transform: none;
  }
}


/* =============================================================
   HERO — second pass
   ============================================================= */

/* ---------- the headline breaks ----------
   "— ДАУЫСЫ," is wider than the column at 86px, so it wrapped and left the
   em dash stranded on a line of its own. Each line is one line by
   construction now, and the type is sized to the longest word in the
   longest language rather than to the shortest. */
.hz-head .ln > span { white-space: nowrap; }
/* two lines instead of four, so the type can carry the frame again */
.hz-head { font-size: clamp(34px, 5vw, 84px); }
.hz-copy { max-width: min(42vw, 560px); top: 21%; }

/* ---------- the slab has to stay readable ----------
   Its lower half sits over her black camzol, where dark type disappears. The
   words get their own ground -- pale, and only under them -- which is what
   the reference does too: its panel is opaque behind the copy and clear
   above it. */
.hz-glass-in::before {
  content: '';
  position: absolute; left: 0; right: 0; bottom: 0;
  height: 62%;
  background: linear-gradient(180deg, transparent, rgba(255, 250, 248, .72) 38%, rgba(255, 250, 248, .9));
  border-radius: 0 0 30px 30px;
  z-index: -1;
}
.hz-glass-in { z-index: 2; isolation: isolate; }
.hz-glass h2 { position: relative; }
.hz-glass p { color: rgba(23, 17, 17, .68); }

/* ---------- the hem ----------
   The old fade started at the middle of her torso and read as a grey smear
   over the black. It is shorter now, and it fades to the exact colour the
   page ends on rather than to a guess. */
.hz-figure::after {
  height: 9%;
  left: -4%; right: -4%;
  background: linear-gradient(180deg, transparent, #F4E9E4 94%);
}

/* ---------- the poppies ----------
   Back in the scene: the procedural blooms low in the frame and the
   photographic field along the foot of it. Only the old arc drawing and the
   old radial glow stay out -- the new arcs and bloom replaced those, and
   running both together drew the same marks twice.

   They sit under everything else: the arcs are z-index 1, the bloom 2, the
   figure 3, so the flowers land on the hero's own background behind her. */
#hero .hero-silk,
#hero .hero-glow { display: none !important; }

#hero .hero-field { display: none !important; }
/* the drawn blooms are the background now; a second soft bloom behind them
   only greys the reds */
.hz-bloom { opacity: .45; }

/* the arcs were doing the work at half strength */
/* opacity above 1 is invalid and was silently dropped; the arcs are
   strengthened at the gradient instead */
.hz-arcs { opacity: 1; }

/* ---------- the cue ----------
   It sat across her hem. Centred under the headline column instead. */
#hero .scroll-cue {
  left: var(--pad); right: auto;
  bottom: 20px;
  transform: none;
  z-index: 6;
}

@media (max-width: 900px) {
  .hz-copy { max-width: 100%; top: auto; }
  .hz-head { font-size: clamp(26px, 8.4vw, 40px); }
  .hz-glass-in::before { display: none; }
  #hero .scroll-cue { display: none; }
}

/* ---------- the fringe ----------
   A radial mask leaves the middle of each edge nearly clear and only paints
   the corners, which is why the dispersion read as almost nothing. Two
   box-shadow-shaped rings hug the whole border instead, so the split runs
   the full length of the rim the way it does in the reference. */
.hz-glass-rim {
  opacity: 1;
  -webkit-mask-image: none;
  mask-image: none;
  background: none;
  box-shadow:
    inset 2px 0 6px -1px rgba(255, 40, 90, .55),
    inset 6px 0 14px -6px rgba(255, 90, 40, .40),
    inset -2px 0 6px -1px rgba(60, 140, 255, .55),
    inset -6px 0 16px -6px rgba(150, 70, 255, .42),
    inset 0 2px 5px -1px rgba(60, 235, 190, .34),
    inset 0 -2px 6px -1px rgba(255, 70, 140, .34);
}

/* the lens costs a full re-read of the backdrop every frame; once the hero is
   half gone nobody can see it, so it stops being paid for */
#hero.far .hz-glass-body {
  backdrop-filter: blur(9px) saturate(1.06);
  -webkit-backdrop-filter: blur(9px) saturate(1.06);
}

/* ---------- archive labels ----------
   "қарау" removed at the client's request. Hidden rather than deleted from the
   markup because gallery.js keeps a reference to this node and measures it
   while the archive sequence runs. */
#gal-view { display: none !important; }

/* ---------- the slab's cover art ----------
   Painted first inside the card so the lens above it has something to bend.
   It is the reason the refraction reads again after the panel moved off the
   figure and out to the right margin. */
.hz-art {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  display: block;
  z-index: 0;
}
.hz-glass.no-art { background: linear-gradient(150deg, #F7ECE9, #F2E2DE); }

/* the copy needs a firmer ground now that a photograph sits behind it */
.hz-glass-in::before {
  background: linear-gradient(180deg, transparent, rgba(255, 250, 248, .82) 34%, rgba(255, 250, 248, .95));
}

/* play / pause on one button */
.hz-play .ic-pause { display: none; }
.hz-glass.playing .hz-play .ic-play { display: none; }
.hz-glass.playing .hz-play .ic-pause { display: block; }
.hz-play[disabled] { opacity: .45; cursor: default; }
.hz-play[disabled]:hover { transform: none; background: #1A1113; }

/* it is a <button> now, so it needs the type reset the <a> did not */
.hz-play {
  border: 0;
  font: inherit;
  cursor: pointer;
  font-size: 12.5px;
}

/* The sleeve is the thing the reader is meant to recognise, so the frosting
   is pulled back from the middle of the pane and left strong at the rim --
   which is also how a real lens behaves: clear through the centre, bending
   hardest where the glass thickens. Masking the element masks its
   backdrop-filter along with it. */
.hz-glass-body {
  -webkit-mask-image: radial-gradient(112% 112% at 50% 42%, rgba(0,0,0,0) 0%, rgba(0,0,0,.10) 42%, rgba(0,0,0,.52) 72%, #000 92%);
  mask-image: radial-gradient(112% 112% at 50% 42%, rgba(0,0,0,0) 0%, rgba(0,0,0,.10) 42%, rgba(0,0,0,.52) 72%, #000 92%);
  -webkit-backdrop-filter: blur(4px) saturate(1.06);
  backdrop-filter: blur(1px) url(#hzGlass) saturate(1.06);
}

/* ---------- the sleeve, finally legible ----------
   Behind the pane the lens and the frost turned a 600px sleeve into a red
   smear, and the scrim under the copy covered most of what was left. The
   artwork is the thing the reader is meant to recognise, so it moves in
   front of the glass and sits inset, like a record in a case: crisp, square,
   with the pane and its refracting rim framing it on all sides. */
.hz-art {
  /* left+right insets do not resolve a width once aspect-ratio is in play --
     it came out the full width of the card and hung past the right edge, so
     the width is stated outright */
  inset: 18px auto auto 18px;
  width: calc(100% - 36px); height: auto;
  aspect-ratio: 1 / 1;
  border-radius: 16px;
  z-index: 2;
  box-shadow: 0 16px 34px -18px rgba(72, 26, 34, .5);
}
.hz-glass-in {
  justify-content: flex-end;
  padding: 18px 20px 20px;
}
/* the scrim only has to carry the words under the sleeve, not half the card */
.hz-glass-in::before {
  height: 38%;
  background: linear-gradient(180deg, transparent, rgba(255, 250, 248, .88) 46%, rgba(255, 250, 248, .96));
}
.hz-glass-sheen { opacity: .28; }
.hz-badge { display: none; }
.hz-glass h2 { font-size: clamp(17px, 1.4vw, 21px); margin-bottom: 4px; }
.hz-glass p { font-size: 12px; margin-bottom: 12px; }

@media (max-width: 900px) {
  /* A bar, not a panel. The tall card put the sleeve above the words and
     took a third of the screen for one track; on a phone the player is a
     thing you glance at and tap, so it lies down: sleeve at the left, the
     name beside it, the button at the right, and the whole object about as
     tall as the buttons in the header.

     Everything is stated in pixels. The sleeve and the button are absolutely
     positioned inside a card whose own height comes from its content, and a
     percentage measured against that is the circular measurement that blew
     the portrait up on an older iPhone. */
  .hz-glass {
    min-height: 0;
    border-radius: 20px;
  }
  .hz-art {
    inset: 50% auto auto 12px;
    transform: translateY(-50%);
    width: 54px;
    height: 54px;
    border-radius: 12px;
  }
  /* left: clear of the sleeve. right: clear of the button. */
  .hz-glass-in {
    justify-content: center;
    align-items: flex-start;
    text-align: left;
    padding: 14px 68px 14px 78px;
    min-height: 78px;
  }
  .hz-glass-in::before { display: none; }
  .hz-glass h2 {
    font-size: 14.5px; line-height: 1.25; margin-bottom: 1px;
    /* one line, however long the name: the bar must not grow a second row */
    max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  }
  .hz-glass p { font-size: 11px; margin-bottom: 0; }
  /* Round and wordless. With «Тыңдау» on it the button was 99px wide and
     the name had 124px left to live in — «Шексіз махаббат» came out as
     «ШЕКСІЗ МАХАБ…». The triangle says the same thing in 44px, and it
     matches the round buttons in the header. */
  .hz-play {
    position: absolute;
    right: 12px; top: 50%;
    transform: translateY(-50%);
    margin: 0;
    width: 44px; height: 44px;
    padding: 0;
    border-radius: 50%;
    display: grid; place-items: center;
  }
  .hz-play .hz-play-label { display: none; }
  .hz-play:active { transform: translateY(-50%) scale(.94); }
}




/* the plate behind the lede went with the photographic band it was there to
   survive; the drawn blooms are pale enough to read over */
.hz-lede { background: none; }

/* =============================================================
   THE PHOTOGRAPH, FRAMED

   Back to the shot with its own background, and rounded. That changes what
   the container has to do: a cut-out needed no frame because the silhouette
   was the shape, and it ran off the bottom of the screen because there was
   no edge to see. A rectangle has four edges, so all four have to be inside
   the frame for the rounding to read at all -- it is lifted off the bottom
   and given a little height back to fit.
   ============================================================= */
.hz-figure {
  bottom: clamp(20px, 5vh, 58px);
  height: min(78vh, 748px);
  border-radius: clamp(16px, 1.5vw, 26px);
  overflow: hidden;
  /* the drop-shadow followed the cut-out's alpha; with an opaque rectangle
     it just traces the box, so it becomes a box-shadow that can sit under
     the rounded corners properly */
  box-shadow: 0 34px 70px -38px rgba(72, 26, 34, .34),
              inset 0 0 0 1px rgba(255, 255, 255, .5);
}
.hz-figure img {
  filter: none;
  border-radius: inherit;
}
/* The hem dissolve existed to hide where the cut-out was sliced off. The
   photograph now ends on its own rounded edge, so a gradient smeared across
   the bottom would only fog it. */
.hz-figure::after { display: none !important; }

@media (max-width: 900px) {
  .hz-figure {
    bottom: auto;
    border-radius: clamp(14px, 4vw, 20px);
    box-shadow: 0 22px 44px -30px rgba(72, 26, 34, .32),
                inset 0 0 0 1px rgba(255, 255, 255, .5);
  }
}

/* =============================================================
   SCROLL FIXES
   ============================================================= */

/* The poppy layer now lives inside the hero, so it is absolute to it rather
   than fixed to the viewport. The hero clips, which is what stops the blooms
   from appearing over the biography, the archive, the music or the film
   chapter -- the leak was structural, not a z-index accident. */
#hero #flowers,
#hero #flowers-front {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  overflow: hidden;
}
#hero #flowers-front { z-index: 4; }

/* the biography sticks by its bottom edge on a phone so the archive can ride
   over it; the class is set from JS after measuring, exactly as it is for
   the .stack chapters */
@media (max-width: 900px) {
  #story.pin-tall { position: sticky; height: auto; min-height: 100svh; }
  #story.can-pin  { position: sticky; top: 0; height: 100svh; min-height: 0; }
}

/* ---------- the hero stops costing once it is covered ----------
   "visibility: hidden" takes the whole scene out of paint and compositing
   without touching layout, so the sticky stack underneath is unchanged and
   nothing shifts. It is restored the instant the reader scrolls back up. */
#hero.gone { visibility: hidden; }

/* The lens is the most expensive thing on the page. Past the first tenth of
   a screen the panel is no longer being looked at, so it gives up its
   backdrop entirely -- the earlier rule still left a 9px backdrop blur
   running, and a backdrop filter can never be cached: it re-reads whatever
   is behind it on every single frame. */
#hero.far .hz-glass-body {
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  background: linear-gradient(150deg, rgba(255,255,255,.34), rgba(255,246,244,.2));
}

/* =============================================================
   THE FIGURE STANDS IN THE FLOWERS

   Three changes, one idea: she is a cut-out again, so there is no frame to
   round; the flower footage rises in FRONT of her instead of behind; and it
   closes over the bottom edge where the photograph is cropped, so she reads
   as standing in the flowers rather than in front of a picture of them.
   ============================================================= */

/* ---------- no frame ----------
   A rounded box and a drop shadow belong to a rectangle. The silhouette is
   the shape now, so both go, and she runs off the bottom of the frame where
   the flowers will meet her. */
#hero.hz .hz-figure {
  bottom: 0;
  height: min(88vh, 860px);
  border-radius: 0;
  overflow: visible;
  box-shadow: none;
}
#hero.hz .hz-figure img {
  border-radius: 0;
  /* a shadow that follows her outline rather than a box that is no longer
     there; kept light so it never reads as a cut-out sticker */
  filter: drop-shadow(0 30px 40px rgba(92, 24, 38, .18));
}
#hero.hz .hz-figure::after { display: none !important; }

/* ---------- the flower layer stops being trapped behind her ----------
   #flowers carried z-index 0, which made it a stacking context and clamped
   everything inside it below the figure however high its own z-index was.
   With no z-index of its own its positioned children take part in the
   hero's own order, so the footage can sit in front. */
#hero #flowers { z-index: auto; }

/* the copy and the slab stay above the flowers */
#hero.hz .hz-copy, #hero.hz .hz-lede { z-index: 7; }
#hero.hz .hz-glass { z-index: 6; }

@media (max-width: 900px) {
  /* on a phone she is in the flow, so the band is measured from the
     photograph's foot rather than from the section's */
  #hero.hz .hz-figure { bottom: auto; height: auto; }

  /* ---------- the portrait's size, stated rather than inferred ----------
     Reported from an iPhone 13: the photograph filled the screen with a
     face several times life size, while the same page on an iPhone 16 was
     correct. The cause is a circular chain, not a device:

        .hz-figure   height: auto   (it is in the flow here)
        .hz-reveal   height: 100%   -> of something auto
        #heroImg     height: 100%   -> of something auto, width: auto

     A percentage height against an indefinite parent is undefined; the
     browser may resolve it from the image's own proportions, or it may
     fall back to the intrinsic 1200x1800 and paint the picture at life
     size. Newer Safari and Chrome do the first, older Safari does the
     second — which is the bug, and it is luck either way.

     So on the phone layout the width leads and the height follows the
     picture. `#hero.hz` is on the selector because the rule that says
     `height: 100%; width: auto` is an id rule and would otherwise win.
     max-width is the second belt: whatever else happens, the photograph
     cannot be wider than its column. */
  /* the card below her is now a tall object; the photograph gives up a
     little width so the whole column still reads on one screen */
  #hero.hz .hz-figure { width: min(100%, 58vw); margin-left: auto; margin-right: auto; }
  #hero.hz .hz-reveal { height: auto; }
  #hero.hz .hz-reveal > #heroImg {
    width: 100%;
    height: auto;
    max-width: 100%;
  }
}

/* ---------- the portrait's second photograph ----------
   The base keeps the sizing it already had -- full height, width from the
   picture's own proportions -- and the figure takes its box from it. The
   alternate is stretched to that exact box, so the two can never disagree
   about where the edges are. */
.hz-reveal {
  position: relative;
  display: block;
  margin: 0;
  height: 100%;
  overflow: visible;
}
.hz-reveal > #heroImg {
  position: relative;
  display: block;
  height: 100%;
  width: auto;
}

/* =============================================================
   PORTRAIT ECHO — coloured silhouettes behind the figure

   Each layer is one empty box filled with a flat colour and masked by the
   portrait's own alpha, so it is her outline rather than a rectangle. The
   image is fetched once and the mask comes from the same cache entry.

   Every layer shares transform-origin: center bottom, which is what keeps
   the hem on one line as the scales grow -- centre origin would fan the
   feet apart.
   ============================================================= */

:root {
  --echo-1: #7D1F32;   /* deep burgundy, closest */
  --echo-2: #C91F37;   /* the site's crimson */
  --echo-3: #E4695C;   /* coral red */
  --echo-4: #F7CFC9;   /* the palest red-pink, furthest out */
}

/* The figure already establishes the containing block the echo needs --
   absolute on a wide screen, relative in the column layout on a phone.
   Restating it here overrode the mobile rule and took the portrait out of
   the flow, which stacked the headline and the slab on top of it. */

.hz-echo {
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  border-radius: 0;

  -webkit-mask-size: contain;
  mask-size: contain;
  -webkit-mask-position: center bottom;
  mask-position: center bottom;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;

  transform-origin: center bottom;
  /* scale, a small fixed nudge, and a parallax share that grows with depth */
  transform:
    translate3d(calc(var(--dx) + var(--px, 0) * var(--par) * 1px),
                calc(var(--dy) + var(--py, 0) * var(--par) * 0.6px), 0)
    scale(var(--s));

  opacity: 0;
  animation: hz-echo-in .68s cubic-bezier(.22, 1, .36, 1) var(--d, 0s) both;
}

@keyframes hz-echo-in {
  from {
    opacity: 0;
    transform:
      translate3d(calc(var(--dx) * .3), calc(var(--dy) * .3), 0)
      scale(calc(1 + (var(--s) - 1) * .25));
  }
  to {
    opacity: var(--a, 1);
    transform:
      translate3d(calc(var(--dx) + var(--px, 0) * var(--par) * 1px),
                  calc(var(--dy) + var(--py, 0) * var(--par) * 0.6px), 0)
      scale(var(--s));
  }
}

/* the portrait itself stays on top and untouched */
.hz-figure .hz-reveal { position: relative; z-index: 1; }

@media (max-width: 900px) {
  /* three layers is enough on a narrow screen, and the nudges shrink with it
     so nothing reaches past the edge of the page */
  .hz-echo:nth-child(1) { display: none; }
  /* the same lean, at about half the travel, so it reads on a narrow screen
     without pushing the silhouette towards the edge of the page */
  .hz-echo:nth-child(2) { --dx: -4px;  --dy: -2px; }
  .hz-echo:nth-child(3) { --dx: -7px;  --dy: -3px; }
  .hz-echo:nth-child(4) { --dx: -10px; --dy: -5px; }
}

@media (prefers-reduced-motion: reduce) {
  /* no entrance and no drift: the finished state, immediately */
  .hz-echo {
    animation: none;
    opacity: var(--a, 1);
    transform: translate3d(var(--dx), var(--dy), 0) scale(var(--s));
  }
}

/* =============================================================
   PHONE — the player moves up under the photograph

   Only below 767px. The block above this one starts at 900px and therefore
   also covers tablets, which are to stay exactly as they are, so the
   reordering lives in its own narrower query rather than editing that one.

   The order changes with flex `order` alone -- the markup is untouched and
   the player is not duplicated, so its play button and its binding to the
   CMS keep working exactly as before.

     header -> photograph -> player -> copy -> the next chapter
   ============================================================= */
@media (max-width: 767px) {
  /* 1. photograph   2. the name   3. player   4. ornament

     The player and the copy have traded places. The name is what the page is
     about, so it now follows the photograph directly; the player is a thing
     to do afterwards, and it reads better as the last object in the column
     than as an interruption between the face and the name. */
  .hz-figure   { order: 1; }
  .hz-copy     { order: 2; }
  .hz-glass    { order: 3; }
  .hz-ornament { order: 4; }

  /* The copy is what rides up onto the foot of the photograph now, so the
     name meets the figure instead of floating away from it. A negative
     margin rather than a transform: the height stays real, which is what
     keeps the hero measuring itself and the next chapter starting on time. */
  .hz-copy {
    /* clear of the photograph, not on it: at -10px the regalia line printed
       itself across the hem of the dress and neither could be read */
    margin-top: 6px;
    margin-bottom: 0;
  }

  .hz-glass {
    margin-top: 16px;
    /* a little narrower than the screen, inside the phone's own gutter */
    width: calc(100% - 32px);
    max-width: 420px;
    margin-left: auto;
    margin-right: auto;
    z-index: 6;
  }

  /* The hem dissolve exists so the cropped bottom edge of the photograph is
     not a hard line. Nothing is tucked against it any more, so it gets its
     length back and the figure ends in air rather than on a cut. */
  .hz-figure::after { height: 20%; }


  /* the mark that closes the column. `#hero` is on the selector because the
     rule that hides the ornament everywhere else sits later in this file,
     and a later rule of equal weight would win. */
  #hero .hz-ornament {
    display: block;
    width: min(216px, 56%);
    margin: 16px auto 0;
  }
  #hero .hz-ornament svg { display: block; width: 100%; height: auto; }

  /* The section must still measure itself from its content: the player and
     the copy are in normal flow, so the hero's height is real and the video
     chapter that follows starts exactly where the text ends. */
  #hero.hz {
    height: auto;
    min-height: 100svh;
    /* The column is shorter than the screen, and with flex-start every spare
       pixel piled up after the copy -- 113px of nothing between the text and
       the video on a tall phone. Centring shares that slack above and below,
       so the composition sits in the screen and the next chapter starts right
       after the words. */
    justify-content: center;
    padding-bottom: max(28px, calc(env(safe-area-inset-bottom) + 16px));
  }
}

  /* These sat outside every media query and applied to the desktop too.
     What is left of them is the type scale, and it is now where it belongs:
     inside the phone query, with the card that uses it. */

/* nothing but the phone layout ever shows the ornament */
.hz-ornament { display: none; }

/* the narrowest phones: the same layout, tighter */
@media (max-width: 380px) {
  .hz-glass { margin-top: 18px; width: calc(100% - 24px); }
  /* the narrow phone kept its own negative margin, which is why the regalia
     line still printed across the hem of the dress at 375px */
  .hz-copy { margin-top: 4px; }
  #hero .hz-ornament { width: min(210px, 66%); margin-top: 22px; }
  .hz-art { width: 48px; height: 48px; inset: 50% auto auto 10px; }
  .hz-glass-in { padding: 12px 60px 12px 68px; min-height: 72px; }
  .hz-play { right: 10px; width: 40px; height: 40px; }
  .hz-glass h2 { font-size: 13.5px; }
}