/* Lesbian Dominatrix, London (/lesbian-dominatrix-london).

   Built on duos.css, the design language locked for mistressaria.com on
   2026-10-13. This file only holds what is different about this page: its
   photographs, the heading set inside the hero, the floating heading box over
   the sticky scene, the list of things you might want, and the closing notes. */

/* ───────────────────────────────────────────────────────── hero ── */
.women .hero__photo--a{background-image:url("/ma/img/aria-latex-sofa-boots.jpg");background-position:62% 45%}
.women .hero__photo--b{background-image:url("/ma/img/aria-red-light-silhouette.jpg");background-position:50% 50%}
.women .hero__fore{background-image:url("/ma/img/aria-backlit-wall-latex.jpg");background-position:78% 40%;opacity:.3}
.women-h1{margin:0}
.women-h1 .kicker,.women-h1 .display{display:block}
.women .hero__copy .lede{max-width:44rem;font-size:clamp(1rem,1.35vw,1.16rem)}

/* ──────────────────────────────────────────── cream statement ── */
.women .statement blockquote{font-size:clamp(1.6rem,2.9vw,3rem)}
.statement__more{max-width:40rem;margin-top:2.2rem}
.statement__more p{color:#2a2323;font-size:1.08rem}
.statement .button:hover,.statement .button:focus-visible{color:var(--ink)}
.women .float img{object-position:50% 30%}

/* ───────────────────────────── the sticky scene and its floating heading ── */
/* The motion layer fades whole sections in as they arrive. This one is
   several screens tall, so that fade would still be blurring the heading
   while it is being read; the section shows at once instead. */
.women .scene[data-duo-reveal]{animation:none;opacity:1;filter:none;transform:none}
.scene .chapter{min-height:auto;padding-top:clamp(3rem,9vh,6rem);padding-bottom:clamp(3rem,9vh,6rem)}
.scene .chapter + .chapter{border-top:0}
.scene__intro{min-height:100svh !important;padding-top:clamp(6rem,14vh,9rem) !important}
/* The heading sits in a glass box that hangs out over the photograph, with
   a gold frame behind it that drifts with the pointer. */
.scene__box{position:relative;z-index:3;margin:0 0 3rem calc(-1 * clamp(3rem,9vw,9rem));max-width:36rem;
  padding:clamp(2rem,3.6vw,3.2rem);background:rgba(20,15,15,.5);border:1px solid rgba(241,234,223,.16);
  backdrop-filter:blur(18px) saturate(1.2);-webkit-backdrop-filter:blur(18px) saturate(1.2);box-shadow:0 40px 100px rgba(0,0,0,.5)}
.scene__box::before{content:"";position:absolute;inset:1.2rem -1.2rem -1.2rem 1.2rem;z-index:-1;border:1px solid rgba(202,166,107,.6);pointer-events:none;
  transform:translate3d(calc((var(--cx) - 50) * .14px),calc((var(--cy) - 50) * .14px),0)}
.scene__box .title{margin:0;font-size:clamp(2.1rem,4vw,3.9rem)}
.scene .body-copy{max-width:36rem}
.scene .body-copy p{color:rgba(241,234,223,.84)}

/* Her list keeps its hyphens, in gold, with room around each one. */
.wants{list-style:none;margin:0;padding:0;max-width:36rem}
.wants li{position:relative;padding:1.6rem 0 1.6rem 2.6rem;font-size:1.12rem;line-height:1.75;color:rgba(241,234,223,.9);
  border-top:1px solid rgba(241,234,223,.1)}
.wants li:first-child{border-top:0}
.wants li::before{content:"-";position:absolute;left:0;top:1.35rem;color:var(--gold-hi);font:400 1.9rem/1 var(--serif)}
.wants li:hover::before{color:var(--cream)}
.scene__after{margin-top:2.6rem;padding-top:2.4rem;border-top:1px solid rgba(202,166,107,.35)}

/* ─────────────────────────────────────────────── editorial ── */
.women .shot--a img{object-position:50% 40%}

/* ─────────────────────────────────────── full-bleed quote ── */
.women-break .break__photo{background-image:url("/ma/img/aria-amber-latex-arch.jpg");background-position:50% 35%}
.women-break__inner{position:relative;z-index:2}
.women-break .kicker{margin-bottom:1.6rem}
.women-break blockquote{max-width:24ch;font-size:clamp(1.9rem,4vw,4.2rem);line-height:1.08}

/* ─────────────────────────────── first time: glass over a photograph ── */
.women-first .p-together__photo{background-image:url("/ma/img/aria-latex-catsuit-back.jpg");background-position:50% 25%}
.women-first .glass--b{margin-top:-1rem}

/* ────────────────────────────────────────────── closing ── */
.women-closing{grid-template-columns:1fr;align-items:start;gap:clamp(3rem,6vw,5rem)}
.women-closing .closing__photo{background-image:url("/ma/img/aria-white-suit-red-gloves.jpg");background-position:50% 40%}
.women-notes{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(1rem,3vw,2.4rem);max-width:60rem}
.women-note{padding:clamp(1.6rem,3vw,2.4rem);background:rgba(20,15,15,.4);border:1px solid rgba(241,234,223,.14);
  backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px)}
.women-note:nth-child(2){margin-top:clamp(1.5rem,4vw,3.5rem)}
.women-note__title{margin:0 0 1rem;font:400 clamp(1.5rem,2.4vw,2.2rem)/1.08 var(--serif);letter-spacing:-.02em}
.women-note p{margin:0;font-size:1.02rem;line-height:1.7;color:rgba(241,234,223,.82)}
.women-book .body-copy{max-width:40rem;color:rgba(241,234,223,.82);margin-top:1.4rem}

/* Links inside her copy: gold, never browser blue. */
.women .body-copy a,.women-note a,.women .foot a{color:var(--gold-hi);text-underline-offset:4px;text-decoration-color:rgba(217,191,117,.5)}
.women .foot a{text-decoration:none}

/* ─────────────────────────────────────────────── phone ── */
@media (max-width:980px){
  .scene__box{margin-left:0}
  .scene__box::before{inset:.8rem -.5rem -.8rem .8rem}
  /* The floating photograph would drift up over the button on one column. */
  .women .statement .float{transform:none !important;margin-top:2.5rem}
  .scene__intro{min-height:auto !important;padding-top:0 !important}
  .women-notes{grid-template-columns:1fr}
  .women-note:nth-child(2){margin-top:0}
}
@media (prefers-reduced-motion:reduce){
  .scene__box::before{transform:none}
}