/* 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%}

/* ══ ABOVE THE FOLD IS FOR SELLING ════════════════════════════════════════
   Hers, 24 September 2026: "Let's use that real estate above the fold to sell
   it" and "I want red and pink." Her own line, in her pink through red — and
   it is given real dark to stand on, because pink on a busy photograph fights
   the photograph and neither wins. */
.hp-shot--hero{height:min(94vh,900px)}
.hp-shot--hero img{object-position:center 26%}
.hp-shot--hero::after{height:56%;
  background:linear-gradient(transparent,rgba(8,3,6,.24) 24%,rgba(8,3,6,.78) 62%,rgba(8,3,6,.93))}
.hp-hero{padding-bottom:clamp(40px,7vw,84px)}
.hp-hero h1{
  font-size:clamp(1.75rem,5vw,3.3rem);
  line-height:1.06;letter-spacing:.008em;font-weight:600;
  max-width:17ch;margin:0 auto;
  background:linear-gradient(172deg,#FF93C0 0%,#FF4D85 26%,#F51349 58%,#C20030 100%);
  -webkit-background-clip:text;background-clip:text;
  -webkit-text-fill-color:transparent;color:transparent;
  filter:drop-shadow(0 2px 0 rgba(120,0,26,.55))
         drop-shadow(0 4px 26px rgba(0,0,0,.75));
  padding-bottom:.06em}
.hp-hero--sell p{display:block;color:#fff;margin:1.15em auto 0;
  font-family:var(--body,system-ui,sans-serif);font-weight:600;
  font-size:clamp(.78rem,1.5vw,.95rem);letter-spacing:.26em;text-transform:uppercase;
  text-shadow:0 1px 14px rgba(0,0,0,.85)}
@media (max-width:820px){
  .hp-shot--hero{height:min(88vh,760px)}
  .hp-hero h1{font-size:clamp(1.62rem,7.4vw,2.5rem);max-width:15ch}
}
@supports not (-webkit-background-clip: text){
  .hp-hero h1{color:#FF4D85;-webkit-text-fill-color:#FF4D85;
    text-shadow:0 2px 0 #C20030,0 4px 22px rgba(0,0,0,.8)}
}

/* ——— the four rites: what she is selling ——— */
.hp-rite{text-align:center}
.hp-rite h3{
  font-size:clamp(1.5rem,6vw,2.6rem);line-height:1.05;font-weight:600;
  letter-spacing:.06em;margin:0 0 .35em;
  background:linear-gradient(168deg,#FFA8C8 0%,#FF4D85 30%,#F51349 62%,#C20030 100%);
  -webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;
  filter:drop-shadow(0 2px 0 rgba(120,0,26,.45));}
.hp-rite .hp-said{
  font-size:.82rem;letter-spacing:.22em;text-transform:none;opacity:.6;
  margin:0 0 1.4em;font-style:italic}
.hp-rite .hp-who{
  font-size:.78rem;letter-spacing:.3em;text-transform:uppercase;
  color:#FF4D85;margin:0 0 1em;font-weight:600}
.hp-rite p:last-child{
  font-size:clamp(1.05rem,4.4vw,1.35rem);line-height:1.5;max-width:22ch;
  margin-left:auto;margin-right:auto}

/* ——— her verse, and the line it all closes on ——— */
.hp-verse .hp-line{
  font-size:clamp(1.15rem,4.8vw,1.7rem);line-height:1.45;text-align:center;
  max-width:26ch;margin:0 auto;font-weight:500}
.hp-close{text-align:center}
.hp-close h2{
  font-size:clamp(1.35rem,5.2vw,2.4rem);line-height:1.12;font-weight:600;
  max-width:19ch;margin:0 auto;
  background:linear-gradient(172deg,#FFA8C8 0%,#FF4D85 28%,#F51349 60%,#C20030 100%);
  -webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;
  filter:drop-shadow(0 2px 0 rgba(120,0,26,.45));}

/* ══ HERS, 24 SEPTEMBER 2026, LATE ════════════════════════════════════════
   "The image of the boy is useless — make it so we can see the boy. Move the
   words to the left and don't have them in the gradient pink to red. Have it
   red with a pink underline. Get rid of all the black writing. We've got to
   bring in this tenderness and this colour. I refuse to have dark stuff for
   the boys."
   So: the photograph is no longer half-covered by a dark wash, her line
   stands to the left on light, and every heading on this world is her red
   with pink beneath it. Nothing here is black and nothing here is dark. */

/* — the boy is visible — */
.hp-shot--hero{height:min(88vh,860px);align-items:flex-end}
.hp-shot--hero img{top:-7%;height:114%;object-position:62% 30%}
.hp-shot--hero::after{
  height:100%;inset:0;
  background:linear-gradient(104deg,
    rgba(255,255,255,.96) 0%,
    rgba(255,244,248,.90) 26%,
    rgba(255,240,246,.46) 48%,
    rgba(255,240,246,.10) 64%,
    transparent 78%);}
@media (max-width:820px){
  .hp-shot--hero{height:min(78vh,660px)}
  .hp-shot--hero img{object-position:58% 26%}
  .hp-shot--hero::after{
    background:linear-gradient(176deg,
      rgba(255,255,255,.95) 0%,
      rgba(255,243,247,.84) 20%,
      rgba(255,240,246,.30) 38%,
      transparent 56%);}
}

/* — her line, to the left, red, with pink under it — */
.hp-shot--hero{align-items:flex-start}
.hp-hero{text-align:left;color:inherit;
  padding:clamp(30px,7vw,72px) clamp(22px,5vw,64px) 0;
  max-width:min(100%,30ch)}
@media (min-width:821px){
  .hp-shot--hero{align-items:center}
  .hp-hero{max-width:min(52%,22ch);padding-top:0}
}
.hp-hero h1,.hp-hero--sell h1{
  display:inline;
  font-family:var(--head,Georgia,serif);font-weight:600;
  font-size:clamp(1.85rem,6.4vw,3.6rem);line-height:1.1;letter-spacing:.005em;
  color:var(--signal,#C40B2A);
  background:none;-webkit-background-clip:border-box;background-clip:border-box;
  -webkit-text-fill-color:currentColor;filter:none;text-shadow:none;
  box-shadow:inset 0 -.14em 0 0 #FFA8C8;
  -webkit-box-decoration-break:clone;box-decoration-break:clone;
  padding:0 .06em .04em}
.hp-hero p{color:var(--signal-deep,#9E0822);opacity:.92;text-shadow:none;
  margin:1.1em 0 0;max-width:26ch;font-weight:500}

/* — no black writing anywhere in her page — */
.hp-say h1,.hp-say h2,.hp-say h3,.hp-rite h3,.hp-close h2{
  color:var(--signal,#C40B2A);
  background:none;-webkit-text-fill-color:currentColor;filter:none}
.hp-say h2,.hp-say h3,.hp-rite h3,.hp-close h2{
  text-decoration:underline;text-decoration-color:#FFA8C8;
  text-decoration-thickness:.1em;text-underline-offset:.22em}
.hp-say p{color:#5A1026;opacity:1}
.hp-rite .hp-who{color:#E8407A}
.hp-rite .hp-said{color:#9E0822;opacity:.7}

/* — the close, plain red with pink beneath — */
.hp-close h2{font-size:clamp(1.4rem,5.4vw,2.5rem);max-width:19ch}

/* ══ HERS, 24 SEPTEMBER 2026 ══════════════════════════════════════════════
   "Not a pink underline. I mean under the word, under the letters themselves.
   So fucking big, make it classy."
   So the rule is a hairline that hugs the letterforms rather than a bar slung
   underneath them, and her headings are set large. */

.hp-hero h1,.hp-hero--sell h1{
  box-shadow:none;padding:0;
  font-size:clamp(2.2rem,8.4vw,4.8rem);line-height:1.04;font-weight:500;
  letter-spacing:.005em;
  text-decoration:underline;text-decoration-color:#FF9FC0;
  text-decoration-thickness:2px;text-underline-offset:.1em;
  text-decoration-skip-ink:auto}
.hp-hero{max-width:min(100%,17ch)}
@media (min-width:821px){.hp-hero{max-width:min(54%,15ch)}}

.hp-say h2,.hp-say h3,.hp-rite h3,.hp-close h2{
  text-decoration:underline;text-decoration-color:#FF9FC0;
  text-decoration-thickness:2px;text-underline-offset:.1em;
  text-decoration-skip-ink:auto}

.hp-say h2{font-size:clamp(1.85rem,6.6vw,3.3rem);line-height:1.08;
  font-weight:500;letter-spacing:.004em;max-width:20ch;margin-left:auto;margin-right:auto}
.hp-rite h3{font-size:clamp(1.7rem,7vw,3rem);letter-spacing:.055em;font-weight:500}
.hp-close h2{font-size:clamp(1.7rem,6.6vw,3.1rem);max-width:18ch}
.hp-verse .hp-line{font-size:clamp(1.3rem,5.4vw,2.1rem);max-width:24ch}

/* ══ "I'm getting all the background and the lamp, not the boy" ═══════════
   The crop is his now, and her words no longer sit across his face. On a
   phone they stand at the foot of the photograph on a light wash; his face
   and the red of his shirt are left completely clear. Nothing dark. */
@media (max-width:820px){
  .hp-shot--hero{height:min(86vh,740px);align-items:flex-end}
  .hp-shot--hero img{top:0;height:100%;object-position:52% 0%}
  .hp-shot--hero::after{inset:0;height:100%;
    background:linear-gradient(to top,
      rgba(255,255,255,.97) 0%,
      rgba(255,246,249,.94) 26%,
      rgba(255,242,247,.52) 40%,
      rgba(255,242,247,.12) 50%,
      transparent 60%);}
  .hp-hero{padding:0 22px clamp(26px,6vw,44px);max-width:100%}
  .hp-hero h1{font-size:clamp(2rem,8vw,2.9rem)}
  .hp-hero p{margin-top:.8em}
}

/* her closing line reads as a line, not as seven underlined ones */
.hp-close h2{font-size:clamp(1.3rem,5.1vw,2.6rem);max-width:24ch;line-height:1.18}

/* ══ HERS, 24 SEPTEMBER 2026 ══════════════════════════════════════════════
   "I don't want an underline. I want red on the top and then a layer
   underneath of pink. Not an underline. And I never said big — I said you've
   given me headings that are way too big. I want them classy."
   So every heading is her red with a pink layer sitting just beneath it,
   offset, the way a letterpress second pass sits under the first. No rules,
   no underlines, and set small enough to be elegant. */

.hp-hero h1,.hp-hero--sell h1,
.hp-say h1,.hp-say h2,.hp-say h3,.hp-rite h3,.hp-close h2{
  text-decoration:none!important;box-shadow:none!important;
  background:none;-webkit-text-fill-color:currentColor;filter:none;
  color:var(--signal,#C40B2A);
  text-shadow:.055em .065em 0 #FFAFCB;}

/* classy, not large */
.hp-hero h1,.hp-hero--sell h1{
  display:block;font-weight:500;letter-spacing:.012em;
  font-size:clamp(1.45rem,3.1vw,2.35rem);line-height:1.18;padding:0}
.hp-say h2{font-size:clamp(1.25rem,2.5vw,1.85rem);line-height:1.2;
  font-weight:500;letter-spacing:.012em;max-width:22ch}
.hp-rite h3{font-size:clamp(1.2rem,2.4vw,1.75rem);letter-spacing:.08em;
  font-weight:500;margin-bottom:.4em}
.hp-close h2{font-size:clamp(1.2rem,2.4vw,1.8rem);max-width:26ch;line-height:1.24}
.hp-verse .hp-line{font-size:clamp(1.05rem,2vw,1.4rem);max-width:30ch}

/* — the hero holds inside the screen on a computer — */
@media (min-width:821px){
  .hp-shot--hero{height:min(84vh,780px);align-items:center}
  .hp-shot--hero img{object-position:58% 16%}
  .hp-hero{max-width:min(46%,20ch);padding:0 0 0 clamp(28px,5vw,72px)}
  .hp-shot--hero::after{
    background:linear-gradient(100deg,
      rgba(255,255,255,.95) 0%,
      rgba(255,246,249,.88) 30%,
      rgba(255,242,247,.42) 48%,
      transparent 66%);}
}
.hp-hero p{font-size:clamp(.82rem,1.3vw,.95rem);letter-spacing:.14em;
  max-width:24ch;margin-top:1.2em}

/* her own line stands white on her red — the deep red set for the rest of
   the page must never reach it */
.hp-verse{color:#fff}
.hp-verse p,.hp-verse .hp-line{color:#fff;text-shadow:none}

/* her headings break across two or three lines, never a stack of single words */
.hp-say h2{max-width:30ch}
.hp-close h2{max-width:32ch}
@media (min-width:821px){
  .hp-hero{max-width:none;width:min(50%,26ch)}
  .hp-hero h1{text-wrap:balance}
}
@media (max-width:820px){
  .hp-hero{max-width:none;width:100%}
  .hp-hero h1{font-size:clamp(1.4rem,6.2vw,2.1rem);max-width:15ch}
}

/* her face is narrow, so ch is no measure here — her line gets real width */
@media (min-width:821px){.hp-hero{width:min(48%,460px)}}
@media (max-width:820px){.hp-hero h1{max-width:none}}

/* ══ HERS, 24 SEPTEMBER 2026 ═════════════════════════════════════════════
   "I don't want a shadow. I just want a line underneath. It looks blurry
   like that. I said classy."
   So: no shadow anywhere. Her heading is red, and a single fine pink line
   sits beneath it. And her line breaks across the width it is given rather
   than stacking one word at a time. */

.hp-hero h1,.hp-hero--sell h1,
.hp-say h1,.hp-say h2,.hp-say h3,.hp-rite h3,.hp-close h2{
  text-shadow:none!important;text-decoration:none!important;
  box-shadow:none!important;color:var(--signal,#C40B2A)}

.hp-say h2::after,.hp-rite h3::after,.hp-close h2::after{
  content:"";display:block;height:1px;width:64px;background:#FFAFCB;
  margin:.72em auto 0}
.hp-hero h1::after{
  content:"";display:block;height:1px;width:96px;background:#FF9FC0;
  margin:.72em 0 0}

/* — her line fills the width it is given — */
.hp-hero{width:auto}
@media (min-width:821px){
  .hp-hero{width:min(52%,520px)}
  .hp-hero h1{font-size:clamp(1.5rem,2.5vw,2.1rem);line-height:1.22;
    text-wrap:pretty;hyphens:none}
}
@media (max-width:820px){
  .hp-hero{width:100%}
  .hp-hero h1{font-size:clamp(1.35rem,5.4vw,1.85rem);line-height:1.24}
}

/* — bright, never deep: her ruling of 24 September carried into her page — */
.hp-hero h1,.hp-hero--sell h1,
.hp-say h1,.hp-say h2,.hp-say h3,.hp-rite h3,.hp-close h2{color:#F5123F}
.hp-say h2::after,.hp-rite h3::after,.hp-close h2::after,.hp-hero h1::after{background:#FF7EB0}
.hp-say p{color:#D01440}
.hp-rite .hp-said{color:#FF5C93;opacity:1}
.hp-rite .hp-who{color:#FF3D7F}
.hp-hero p{color:#F5123F;opacity:1}
.hp-verse{background:#F5123F}

/* her heading and the line under it start at the same left edge — the h1 was
   being centred inside its own column by an inherited auto margin */
.hp-hero h1,.hp-hero--sell h1{margin-left:0;margin-right:0;max-width:none;width:100%}
.hp-hero p{margin-left:0;margin-right:0;max-width:34ch}

/* — the hero is a mother and her boy: both faces stay in frame, her words
     stand on the white of the bed — */
.hp-shot--hero img{object-position:58% 42%}
@media (max-width:820px){.hp-shot--hero img{object-position:64% 40%}}

/* her line stands up again — classy, never timid */
@media (min-width:821px){
  .hp-hero{width:min(54%,600px)}
  .hp-hero h1{font-size:clamp(2rem,3.4vw,3rem);line-height:1.14;letter-spacing:.01em}
  .hp-hero h1::after{width:130px;margin-top:.6em}
}
@media (max-width:820px){
  .hp-hero h1{font-size:clamp(1.65rem,6.8vw,2.3rem);line-height:1.16}
  .hp-hero h1::after{width:104px}
}
.hp-hero p{font-size:clamp(.86rem,1.35vw,1rem);letter-spacing:.15em}

/* ——— what each rite actually is ——— */
.hp-rite .hp-kanji{font-family:var(--kanji,'Shippori Mincho',serif);
  font-size:clamp(1.6rem,4.4vw,2.3rem);color:#FF7EB0;margin:.1em 0 .35em;line-height:1}
.hp-rite .hp-means{font-family:var(--head,Georgia,serif);
  font-size:clamp(1.02rem,2vw,1.35rem);line-height:1.45;color:#F5123F;
  max-width:26ch;margin:1.1em auto .9em}
.hp-rite .hp-holds{font-size:clamp(.95rem,1.25vw,1.05rem);line-height:1.72;
  color:#D01440;max-width:44ch;margin:0 auto}
.hp-rite .hp-holds em{font-style:italic}
.hp-say .hp-shape{max-width:52ch;margin:1.6em auto 0;
  font-size:clamp(.95rem,1.25vw,1.05rem);line-height:1.76}
.hp-say .hp-shape strong{color:#F5123F;font-weight:600}

/* her statement runs the whole width of the screen — the page's own column
   was cutting the red band short */
.hp-say.hp-verse{max-width:none;width:100vw;margin-left:calc(50% - 50vw);
  padding:clamp(64px,9vw,132px) 24px}
.hp-verse .hp-line{font-size:clamp(1.15rem,2.4vw,1.75rem);max-width:32ch;
  line-height:1.5;margin:0 auto}

/* ══ YOUNG, VIBRANT, FRESH — HERS, 24 SEPTEMBER 2026 ═════════════════════
   A sans wants the opposite handling to a serif: heavy weight, tight
   tracking, big and close, sentence case where it is a sentence. Nothing
   here is delicate and nothing here whispers. */

.hp-hero h1,.hp-hero--sell h1,
.hp-say h1,.hp-say h2,.hp-rite h3,.hp-close h2{
  font-family:var(--head);font-weight:800;letter-spacing:-.025em;
  color:#F5123F;text-transform:none}

.hp-hero h1,.hp-hero--sell h1{line-height:1.02}
@media (min-width:821px){
  .hp-hero h1{font-size:clamp(2.4rem,4.4vw,4rem)}
  .hp-hero h1::after{width:150px;height:3px;margin-top:.5em}
  .hp-hero{width:min(54%,620px)}
}
@media (max-width:820px){
  .hp-hero h1{font-size:clamp(1.95rem,8.6vw,2.9rem)}
  .hp-hero h1::after{width:110px;height:3px}
}
.hp-hero p{font-family:var(--body);font-weight:700;letter-spacing:.14em}

.hp-say h2{font-size:clamp(1.65rem,3.6vw,2.7rem);line-height:1.04;max-width:18ch}
.hp-say h2::after,.hp-close h2::after,.hp-rite h3::after{height:3px;width:76px;margin-top:.7em}
.hp-close h2{font-size:clamp(1.55rem,3.4vw,2.6rem);line-height:1.06;max-width:20ch}

/* a rite's name is a piece of type, not a label */
.hp-rite h3{font-size:clamp(1.8rem,4.4vw,3.1rem);letter-spacing:.02em;
  font-weight:800;margin-bottom:.22em}
.hp-rite .hp-kanji{font-family:var(--kanji);font-weight:700;color:#FF7EB0;
  font-size:clamp(1.5rem,3.6vw,2.1rem);letter-spacing:.08em}
.hp-rite .hp-said{font-family:var(--body);font-weight:600;font-style:normal;
  letter-spacing:.2em;font-size:.76rem;text-transform:uppercase;color:#FF5C93}
.hp-rite .hp-who{font-family:var(--body);font-weight:800;letter-spacing:.16em;
  font-size:.8rem;color:#F5123F}
.hp-rite .hp-means{font-family:var(--head);font-weight:600;letter-spacing:-.015em;
  font-size:clamp(1.15rem,2.3vw,1.6rem);line-height:1.22;max-width:24ch;color:#F5123F}
.hp-rite .hp-holds{font-family:var(--body);font-weight:400}

.hp-verse .hp-line{font-family:var(--head);font-weight:800;letter-spacing:-.025em;
  line-height:1.1;font-size:clamp(1.45rem,3.4vw,2.5rem);max-width:20ch}

/* her name in the bar, in the same voice */
.ss-bar__name,.ss-bar a.ss-bar__name{font-family:var(--name);font-weight:800;
  letter-spacing:-.01em}

/* ══ "WHAT CAN WE DO TO MAKE THIS SITE POP?" — 24 SEPTEMBER 2026 ═════════
   Three faults answered at once. The rites had six type sizes stacked in one
   block and said the same idea four times; the page was white, photograph,
   white, photograph all the way down, which is why nothing popped.
   So: each rite is now ONE piece — his photograph with his name laid across
   it, and under it a band of her colour carrying one sentence nobody else
   says. Bright red and hot pink alternate down the page, so a person
   scrolling meets colour rather than more white. */

.rite{display:block;width:100vw;margin-left:calc(50% - 50vw)}
.rite__shot{position:relative;height:min(64vh,560px);overflow:hidden;background:#FFF}
.rite__shot img{position:absolute;inset:0;width:100%;height:100%;
  object-fit:cover;object-position:center 34%}
.rite__shot::after{content:"";position:absolute;inset:auto 0 0 0;height:56%;
  background:linear-gradient(transparent,rgba(180,0,40,.10) 30%,rgba(140,0,32,.44));
  pointer-events:none}
.rite__name{position:absolute;left:clamp(20px,5vw,60px);bottom:clamp(18px,3.4vw,38px);
  margin:0;z-index:2;color:#fff;font-family:var(--head);font-weight:800;
  font-size:clamp(2.4rem,8vw,5.5rem);line-height:.92;letter-spacing:-.035em;
  text-transform:none}

.rite__say{padding:clamp(30px,5vw,58px) clamp(20px,5vw,60px)}
.rite--red .rite__say{background:#F5123F;color:#fff}
.rite--pink .rite__say{background:#FF7EB0;color:#fff}
.rite__who{margin:0 0 .7em;font-family:var(--body);font-weight:800;
  font-size:.78rem;letter-spacing:.2em;text-transform:uppercase;
  color:rgba(255,255,255,.88)}
.rite__line{margin:0;font-family:var(--head);font-weight:600;
  font-size:clamp(1.25rem,2.9vw,2.1rem);line-height:1.18;letter-spacing:-.02em;
  max-width:28ch;color:#fff}
@media (min-width:900px){
  .rite{display:grid;grid-template-columns:1.15fr 1fr;align-items:stretch}
  .rite__shot{height:min(74vh,640px)}
  .rite__say{display:flex;flex-direction:column;justify-content:center}
  .rite--pink{direction:rtl}
  .rite--pink>*{direction:ltr}
}

/* — the shape of a year, said once, in three — */
.shape{width:100vw;margin-left:calc(50% - 50vw);background:#FFF1F6;
  padding:clamp(52px,7vw,100px) clamp(20px,5vw,60px);text-align:center}
.shape h2{font-family:var(--head);font-weight:800;color:#F5123F;
  font-size:clamp(1.8rem,4.2vw,3.2rem);line-height:1.02;letter-spacing:-.03em;margin:0}
.shape__lead{margin:.9em auto 0;max-width:30ch;color:#F5123F;
  font-family:var(--head);font-weight:600;letter-spacing:-.015em;
  font-size:clamp(1.05rem,2.2vw,1.5rem);line-height:1.3}
.shape__three{list-style:none;margin:clamp(30px,4vw,56px) auto 0;padding:0;
  display:grid;gap:18px;max-width:960px}
@media (min-width:820px){.shape__three{grid-template-columns:repeat(3,1fr);gap:22px}}
.shape__three li{background:#fff;border-radius:2px;padding:26px 22px;
  font-family:var(--body);font-size:.98rem;line-height:1.6;color:#D01440;text-align:left}
.shape__three b{display:block;font-family:var(--head);font-weight:800;
  font-size:1.35rem;letter-spacing:-.02em;color:#F5123F;margin-bottom:.35em}
.shape__foot{margin:clamp(26px,3.4vw,44px) 0 0;font-family:var(--body);
  font-weight:800;letter-spacing:.2em;text-transform:uppercase;
  font-size:.8rem;color:#FF5C93}

/* — the mother and her boy sit to the right; her words take the bed — */
.hp-shot--hero img{object-position:62% 46%}
@media (max-width:820px){.hp-shot--hero img{object-position:70% 42%}}

/* — one size for her words, never six — */
.hp-say p{font-size:clamp(1rem,1.35vw,1.12rem);line-height:1.66}

/* ══ HERS, 24 SEPTEMBER 2026 ═════════════════════════════════════════════
   "Get my statement fully across the bottom. I think we want more what the
   word means. There's no kanji — I liked the kanji being pink on it."
   So the kanji is back, hot pink, standing above his name on his own
   photograph; what the word means sits above what the year is; and her
   statement runs the whole width of the screen rather than a column in the
   middle of it. */

.rite__kanji{position:absolute;z-index:2;
  left:clamp(20px,5vw,60px);bottom:calc(clamp(18px,3.4vw,38px) + 1.02em);
  font-family:var(--kanji);font-weight:700;color:#FF7EB0;
  font-size:clamp(1.5rem,3.6vw,2.4rem);line-height:1;letter-spacing:.1em;
  text-shadow:0 2px 18px rgba(120,0,30,.45)}
.rite__name{bottom:clamp(18px,3.4vw,38px)}

.rite__means{margin:0 0 .85em;font-family:var(--head);font-weight:800;
  letter-spacing:-.025em;line-height:1.12;
  font-size:clamp(1.3rem,3vw,2.2rem);max-width:22ch;color:#fff}
.rite__line{font-family:var(--body);font-weight:500;letter-spacing:0;
  font-size:clamp(1rem,1.5vw,1.18rem);line-height:1.6;max-width:36ch;
  color:rgba(255,255,255,.94)}

/* her statement, the whole way across */
.hp-say.hp-verse{padding:clamp(56px,7vw,110px) clamp(20px,4vw,52px)}
.hp-verse .hp-line{max-width:none;width:100%;
  font-size:clamp(1.25rem,3.9vw,3.1rem);line-height:1.14;letter-spacing:-.03em}

/* the kanji stands above his name rather than on top of it */
.rite__shot{display:flex;flex-direction:column;justify-content:flex-end;
  padding:0 clamp(20px,5vw,60px) clamp(18px,3.4vw,38px)}
.rite__kanji,.rite__name{position:static;left:auto;bottom:auto;z-index:2}
.rite__kanji{margin:0 0 .18em}

/* ══ "NOW YOU'VE GOT THE KANJI SITTING BEHIND THE WORD" ══════════════════
   It was reading as a watermark behind his name rather than as its own
   thing. So it stands clear above the name with a pink rule under it, at a
   size that says it was put there on purpose. No glow, nothing faint. */
.rite__shot{padding-bottom:clamp(20px,3.6vw,42px)}
.rite__kanji{display:block;width:max-content;z-index:3;
  font-size:clamp(1.9rem,4.4vw,3rem);line-height:1;letter-spacing:.14em;
  color:#FF7EB0;text-shadow:none;
  margin:0 0 clamp(14px,1.6vw,22px);
  padding:0 0 clamp(8px,1vw,12px);
  border-bottom:2px solid #FF7EB0}
.rite__name{z-index:3;margin:0}