body[data-theme="monochrome"] .experience-intro{display:grid;grid-template-columns:1fr 1fr;gap:8vw;padding:clamp(4rem,7vw,7rem) 5vw;background:#fff;color:#10110f;border-bottom:1px solid #d9dad5}.experience-intro h2{font-family:var(--display);font-size:clamp(2.8rem,5.2vw,5.5rem);line-height:.98;letter-spacing:-.06em;font-weight:520;margin:0}.experience-intro h2 span{color:#c8ae3f}.experience-line{font-size:clamp(1.1rem,1.8vw,1.45rem);margin:24px 0 0;max-width:30ch}.experience-copy{align-self:center;max-width:590px}.experience-copy p{font-size:1.05rem;line-height:1.65;color:#50524d;margin:0 0 20px}.experience-copy p:first-child{font-size:1.2rem;color:#10110f}.experience-copy a{display:inline-flex;gap:32px;margin-top:8px;padding-bottom:8px;border-bottom:1px solid #10110f;font-size:.9rem}.experience-copy a span{color:#10110f}@media(max-width:760px){body[data-theme="monochrome"] .experience-intro{grid-template-columns:1fr;gap:30px;padding:55px 6vw}.experience-intro h2{font-size:clamp(2.8rem,11vw,4.5rem)}.experience-copy p{font-size:1rem}}

/* Give the portrait a separate visual lane across desktop widths. */
@media (min-width:901px){
  body[data-theme="monochrome"] .hero-copy{width:min(49%,760px)}
  body[data-theme="monochrome"] .hero-copy h1{font-size:clamp(4rem,6vw,6.4rem);line-height:.98}
  body[data-theme="monochrome"] .hero-copy .lede{max-width:min(34vw,30rem)}
  body[data-theme="monochrome"] .hero-portrait{width:min(51vw,880px)}
}

/* Home hero only: mobile reading order is heading, portrait, then introduction. */
@media (max-width:900px){
  body[data-theme="monochrome"] .hero{
    grid-template-columns:minmax(0,1fr);
    gap:0;
    padding:6.5rem 0 2rem;
  }
  body[data-theme="monochrome"] .hero-copy{
    display:contents;
    opacity:1;
    transform:none;
  }
  body[data-theme="monochrome"] .hero-copy h1{
    grid-row:1;
    min-width:0;
    margin:0;
    padding:0 1.5rem;
    line-height:1.02;
  }
  body[data-theme="monochrome"] .hero-portrait{
    grid-row:2;
    width:100%;
    height:clamp(420px,95vw,650px);
    margin:1.5rem 0 0;
    overflow:hidden;
  }
  body[data-theme="monochrome"] .hero-portrait picture img{
    width:100%;
    height:100%;
    object-fit:contain;
    object-position:center bottom;
    transform:none;
  }
  body[data-theme="monochrome"] .hero-copy .lede{
    grid-row:3;
    min-width:0;
    max-width:42rem;
    margin:1.5rem 0 0;
    padding:0 1.5rem;
  }
  body[data-theme="monochrome"] .mobile-actions{grid-row:4}
}
@media (max-width:620px){
  body[data-theme="monochrome"] .hero{padding-top:6.5rem}
  body[data-theme="monochrome"] .hero-copy h1{
    padding:0 1.25rem;
    font-size:clamp(3.5rem,14vw,4.7rem);
  }
  body[data-theme="monochrome"] .hero-portrait{
    height:clamp(390px,110vw,560px);
    margin-top:1.25rem;
  }
  body[data-theme="monochrome"] .hero-copy .lede{
    margin-top:1.25rem;
    padding:0 1.25rem;
  }
}

/* Tablets need a composed flow: heading, portrait, copy, then actions. */
@media (min-width:621px) and (max-width:1200px){
  body[data-theme="monochrome"] .hero{
    display:grid;
    grid-template-columns:minmax(0,1fr);
    gap:0;
    min-height:0;
    padding:6rem 0 2.5rem;
    overflow:hidden;
  }
  body[data-theme="monochrome"] .hero-copy{
    display:contents;
    opacity:1;
    transform:none;
  }
  body[data-theme="monochrome"] .hero-copy h1{
    grid-row:1;
    width:auto;
    max-width:16ch;
    margin:0;
    padding:0 clamp(1.5rem,5vw,4rem);
    font-size:clamp(3.5rem,6.5vw,5rem);
    line-height:1.02;
  }
  body[data-theme="monochrome"] .hero-portrait{
    position:relative;
    grid-row:2;
    right:auto;
    bottom:auto;
    width:100%;
    height:clamp(410px,57vw,590px);
    margin:1rem 0 0;
    overflow:hidden;
    pointer-events:none;
  }
  body[data-theme="monochrome"] .hero-portrait picture img{
    width:100%;
    height:100%;
    max-width:100%;
    object-fit:contain;
    object-position:center bottom;
    transform:none;
  }
  body[data-theme="monochrome"] .hero-copy .lede{
    grid-row:3;
    width:auto;
    max-width:42rem;
    margin:1rem 0 0;
    padding:0 clamp(1.5rem,5vw,4rem);
    font-size:1.1rem;
    line-height:1.55;
  }
  body[data-theme="monochrome"] .hero-copy>.actions{display:none}
  body[data-theme="monochrome"] .mobile-actions{
    display:flex;
    grid-row:4;
    justify-self:start;
    width:auto;
    margin:1.5rem 0 0;
    padding:0 clamp(1.5rem,5vw,4rem);
  }
  body[data-theme="monochrome"] .scroll-cue,
}