/* hero */
.hero{padding-block:clamp(40px,6vw,88px) clamp(64px,9vw,120px)}
.hero .wrap{display:grid;grid-template-columns:minmax(0,1.2fr) minmax(0,.8fr);align-items:center;gap:clamp(28px,6vw,96px)}
.eyebrow{font:500 .8rem/1.3 var(--f-body);letter-spacing:.14em;text-transform:uppercase;color:var(--ink-3);margin-bottom:28px}
h1{font-weight:700;font-size:clamp(2.4rem,5vw,4.1rem);line-height:1.02;letter-spacing:-.045em}
h1 .acc{color:var(--accent)}
.hero-sub{font-size:clamp(1.1rem,1.5vw,1.28rem);color:var(--ink-2);max-width:44ch;margin:28px 0 40px}
.hero-cta{display:flex;flex-wrap:wrap;gap:12px}

/* photo block (placeholder frame until the real photo arrives) */
.photo{position:relative;max-width:100%}
.photo-frame{position:relative;aspect-ratio:4/5;width:100%;display:grid;place-items:center}
/* .photo-frame::after{content:"";position:absolute;inset:14px -14px -14px 14px;border:1px solid var(--field);z-index:-1} */
/* real photo: fills the same 4:5 frame */
.photo-frame img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block}
.monogram{font:200 clamp(5rem,12vw,9rem)/1 var(--f-display);color:var(--band-2);letter-spacing:-.06em;-webkit-text-stroke:0}
/* the letters are generated content: purely decorative (the frame has role=img and its own label),
   so they are not document text and not subject to text contrast checks */
.monogram::before{content:attr(data-mono)}
.ph-note{position:absolute;left:16px;bottom:14px;right:16px;font-size:13px;color:var(--ink-3);line-height:1.35}
.cap{margin-top:18px;font-size:15px;color:var(--ink-3);line-height:1.45}
.cap strong{display:block;color:var(--ink);font:600 17px/1.3 var(--f-display);letter-spacing:-.01em}

@media (prefers-reduced-motion:no-preference){
  .hero-copy>*{animation:rise .9s cubic-bezier(.16,1,.3,1) both}
  .hero-copy>:nth-child(2){animation-delay:.07s}
  .hero-copy>:nth-child(3){animation-delay:.14s}
  .hero-copy>:nth-child(4){animation-delay:.21s}
  .photo{animation:rise 1.1s .1s cubic-bezier(.16,1,.3,1) both}
}

/* responsive */
@media (max-width:860px){
  .hero .wrap{grid-template-columns:minmax(0,1fr)}
  /* the reference also sets margin-top:12px;margin-right:14px here, but its inline style="margin:0" on the figure overrides them, so they are left out to match the rendered result */
  .photo{width:min(78%,340px)}
}