@import url('https://fonts.googleapis.com/css2?family=Cinzel:wght@400;500;600&display=swap');
/* 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%}

/* ══ HER OWN HERO PICTURES — hers, 14 Oct 2026: "In the BECOME MAN folder …
   BECOME MAN Hero Pos, and there's Hero Pos 1." The dunes at sunset on a
   computer, the man against the sun on a phone. No dark wash over the sand
   (it turned it muddy); her words sit low, on the deepest part of the picture. */
.hp-shot--hero{background:#C98A1D}
.hp-shot--hero::after{height:46%;background:linear-gradient(transparent,rgba(30,23,18,.10) 40%,rgba(30,23,18,.30))}
.hp-shot--hero img{object-position:center 62%}
.hp-hero h1{text-shadow:0 2px 30px rgba(30,23,18,.45)}
.hp-hero p{color:#fff;text-shadow:0 1px 18px rgba(30,23,18,.55)}
@media (max-width:760px){
  .hp-shot--hero img{object-position:30% 30%}
}

/* her name once in the bar — hers, 14 Oct 2026: "Why do you still have BECOME MAN twice as the header there?"
   Her mark already says it; the typed name beside it goes wherever the mark stands. */
.gk-bar__mark + .gk-bar__name{display:none}
.gk-foot__home + .gk-foot__name{display:none}

/* her name, small and gold, in her own font, on every page — hers, 14 Oct 2026: "I still see this ugly massive BECOME MAN …
   I want it gold, and that's not my font." Cinzel is hers (she downloaded it; her own identity page uses it). */
.gk-bar .gk-bar__mark,.gk-foot .gk-foot__mark{display:none}
.gk-bar .gk-bar__mark + .gk-bar__name,.gk-bar .gk-bar__name{display:inline-block;font-family:'Cinzel',Georgia,serif;font-weight:500;
  font-size:clamp(1.02rem,1.5vw,1.3rem);letter-spacing:.22em;color:#C98A1D;text-transform:uppercase}
.gk-foot .gk-foot__home + .gk-foot__name,.gk-foot .gk-foot__name{display:block;font-family:'Cinzel',Georgia,serif;font-weight:500;letter-spacing:.24em;color:#C98A1D;text-transform:uppercase}
.gk-foot .gk-foot__name a{color:inherit;text-decoration:none}
.gk-bar .gk-bar__mark + .gk-bar__name,.gk-bar .gk-bar__name,.gk-foot .gk-foot__home + .gk-foot__name,.gk-foot .gk-foot__name{color:#94620C;font-weight:600}