/* HER PAGE, LIFTED — her order, her words, her photographs.
   Hers, 20 September 2026: "I loved the way I had it — the fixed pictures as
   you scroll. I just needed you to sexy it up a bit like you did The
   Worshipped Woman."
   So every photograph she chose is full width and moves against the scroll, so
   it reads as fixed on a phone too, and her words rise as the page reaches
   them. Every colour and face comes from the world's own tokens — nothing
   here has taste of its own. */

.hers-page{overflow-x:hidden}
.hp{display:block}

/* a photograph of hers */
.hp-shot{position:relative;display:block;width:100vw;margin-left:calc(50% - 50vw);
  height:min(78vh,660px);overflow:hidden;background:var(--ink)}
.hp-shot img{position:absolute;left:0;top:-14%;width:100%;height:128%;
  object-fit:cover;object-position:center 46%;will-change:transform}
.hp-shot--arrive{height:min(92vh,880px)}
.hp-shot--arrive img{object-position:center 42%}
@media (max-width:820px){
  .hp-shot{height:min(58vh,480px)}
  .hp-shot--arrive{height:min(74vh,640px)}
}

/* her words */
.hp-say{max-width:min(74ch,92vw);margin:0 auto;
  padding:clamp(60px,9vw,128px) 24px;text-align:center}
.hp-say h1,.hp-say h2{font-family:var(--head,Georgia,serif);color:var(--signal,#333);
  font-weight:500;line-height:1.08;margin:0 0 .55em;text-wrap:balance}
.hp-say h1{font-size:clamp(2rem,5vw,3.4rem)}
.hp-say h2{font-size:clamp(1.7rem,3.8vw,2.6rem)}
.hp-say h3{font-family:var(--head,Georgia,serif);color:var(--ink,#111);
  font-size:clamp(1.14rem,2.1vw,1.5rem);font-weight:500;
  margin:1.7em 0 .45em;letter-spacing:.01em}
.hp-say>h3:first-child,.hp-say>h2:first-child,.hp-say>h1:first-child{margin-top:0}
.hp-say p{margin:0 0 1.05em;font-size:clamp(1rem,1.3vw,1.1rem);line-height:1.74;
  color:var(--ink,#333);opacity:.86}
.hp-say p:last-child{margin-bottom:0}

/* her verse */
.hp-verse{width:100vw;margin-left:calc(50% - 50vw);
  background:var(--signal,#333);color:var(--on-signal,#fff);
  padding:clamp(58px,9vw,124px) 24px;text-align:center}
.hp-verse p{margin:0 auto;max-width:32ch;display:flex;flex-direction:column;gap:.34em;
  font-family:var(--head,Georgia,serif);font-weight:400;
  font-size:clamp(1.16rem,2.5vw,1.7rem);line-height:1.34}
.hp-verse span{display:block}

/* her words rise as the page reaches them */
.hp-say>*,.hp-verse span{opacity:0;transform:translateY(14px);
  transition:opacity .9s ease,transform .9s cubic-bezier(.2,.6,.2,1)}
.hp-say.is-here>*,.hp-verse.is-here span{opacity:1;transform:none}
.hp-say.is-here>*:nth-child(2){transition-delay:.09s}
.hp-say.is-here>*:nth-child(3){transition-delay:.17s}
.hp-say.is-here>*:nth-child(n+4){transition-delay:.24s}
.hp-verse.is-here span:nth-child(2){transition-delay:.1s}
.hp-verse.is-here span:nth-child(3){transition-delay:.2s}
.hp-verse.is-here span:nth-child(n+4){transition-delay:.3s}

@media (prefers-reduced-motion:reduce){
  .hp-shot img{transform:none!important}
  .hp-say>*,.hp-verse span{opacity:1;transform:none;transition:none}
}

/* ══ HERS, 24 SEPTEMBER 2026 ══════════════════════════════════════════════
   "I don't want black behind them" — so a photograph of hers waits on her own
   ground, never on black.
   "There's a massive gap between the lines on the poem" — her builder made
   every line of her verse its own paragraph, so every line carried a
   paragraph's gap. A line of hers is set close now; a real paragraph still
   breathes. */
.hp-shot{background:var(--ground,#fff)}
.hp-say p.hp-line{margin:0 0 .18em;line-height:1.42}
.hp-say p.hp-line + p:not(.hp-line){margin-top:1.4em}
.hp-say p:not(.hp-line) + p.hp-line{margin-top:1.4em}
.hp-say h1 + p.hp-line,.hp-say h2 + p.hp-line,.hp-say h3 + p.hp-line{margin-top:.2em}
.hp-say h3 + h3{margin-top:.1em}

/* her name stands on her arrival rather than under it */
.hp-shot--arrive{position:relative}
.hp-say--over{position:relative;z-index:2}

/* ══ HER NAME ON HER ARRIVAL ══════════════════════════════════════════════
   Hers, 24 September 2026: "Why are there no heroes? There's nothing on top
   of the image." So it stands on the photograph — low, so a face is never
   covered, on the gentlest wash that lets it read. */
.hp-shot--hero{display:flex;align-items:flex-end}
.hp-shot--hero::after{content:"";position:absolute;inset:auto 0 0 0;height:62%;
  background:linear-gradient(transparent,rgba(12,8,10,.06) 22%,rgba(12,8,10,.52) 78%,rgba(12,8,10,.68));
  pointer-events:none}
.hp-hero{position:relative;z-index:2;width:100%;
  padding:0 clamp(22px,5vw,64px) clamp(34px,6vw,72px);text-align:center;color:#fff}
.hp-hero h1{font-family:var(--head,Georgia,serif);font-weight:500;color:#fff;
  margin:0;font-size:clamp(2.1rem,7vw,4.6rem);line-height:1;letter-spacing:.06em;
  text-shadow:0 1px 28px rgba(0,0,0,.34)}
.hp-hero p{font-family:var(--body,system-ui,sans-serif);color:rgba(255,255,255,.94);
  margin:.9em auto 0;font-size:clamp(.96rem,1.8vw,1.18rem);line-height:1.5;
  max-width:30ch;text-shadow:0 1px 20px rgba(0,0,0,.4)}
@media (max-width:820px){
  .hp-shot--hero{height:min(82vh,700px)}
  .hp-hero h1{letter-spacing:.04em}
}

/* a pale photograph must still show what is in it — the subject, not the sky */
.hp-shot--hero img{object-position:center 58%}
.hp-shot--hero::after{height:54%}