/* Duos and double domination, mistressaria.com.

   Built from the layering the live site already uses (public/styles.css,
   .hero__visual / __veil / __grain / ::before brush / __title-layer /
   __foreground): two photographs breathing into one another, a cursor-lit
   veil, real grain, brushed paint strokes, oversized type set between image
   layers, and photographs that overlap the copy and each other. Nothing here
   is a box of text on a flat ground. */

:root{
  --ink:#100d0d;
  --ink-2:#1b1414;
  --cream:#f1eadf;
  --paper:#f7f2e9;
  --gold:#caa66b;
  --gold-hi:#d9bf75;
  --red:#9f1f25;
  --line:rgba(241,234,223,.16);
  --serif:Georgia,"Times New Roman",serif;
  --sans:"Helvetica Neue",Arial,sans-serif;
  --cx:50;               /* pointer, 0 to 100, set by duo.js */
  --cy:40;
  --grain:url("/ma/duos-grain.svg");
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body.duo{margin:0;background:var(--ink);color:var(--cream);font-family:var(--sans);overflow-x:clip;-webkit-font-smoothing:antialiased}
.duo img{display:block;max-width:100%}
.duo a{color:inherit}

/* Grain over the whole page, the way film grain sits over a photograph. */
.duo::after{
  content:"";position:fixed;inset:-50%;z-index:90;pointer-events:none;
  background-image:var(--grain);opacity:.085;mix-blend-mode:overlay;
  animation:grainShift 1.2s steps(6) infinite;
}
@keyframes grainShift{
  0%{transform:translate(0,0)}20%{transform:translate(-3%,2%)}40%{transform:translate(2%,-3%)}
  60%{transform:translate(-2%,-1%)}80%{transform:translate(3%,3%)}100%{transform:translate(0,0)}
}

/* ───────────────────────────────────────────────────────── topbar ── */
.topbar{
  position:fixed;inset:0 0 auto 0;z-index:80;display:flex;align-items:center;justify-content:space-between;
  gap:1rem;padding:1rem clamp(1rem,4vw,3rem);
  background:linear-gradient(180deg,rgba(10,8,8,.6),rgba(10,8,8,.08) 76%,transparent);
  text-shadow:0 1px 18px rgba(0,0,0,.5);backdrop-filter:blur(8px);
}
.brand-mark{font:200 clamp(1.15rem,2.2vw,1.6rem) var(--sans);letter-spacing:.18em;text-transform:uppercase;text-decoration:none}
.nav-links{display:flex;gap:clamp(.7rem,2vw,1.4rem);font-size:.74rem;letter-spacing:.1em;text-transform:uppercase}
.nav-links a{text-decoration:none;position:relative;padding:.3rem 0}
.nav-links a[aria-current]{color:var(--gold-hi)}

/* ───────────────────────────────────────────── shared type ── */
.kicker{margin:0 0 1rem;color:var(--gold);font-size:.7rem;font-weight:700;letter-spacing:.2em;text-transform:uppercase}
.display{margin:0;font:400 clamp(2.9rem,7.4vw,7.6rem)/.9 var(--serif);letter-spacing:-.05em}
.title{margin:0;font:400 clamp(2.2rem,5vw,5rem)/.98 var(--serif);letter-spacing:-.035em}
.lede{max-width:40rem;margin:1.6rem 0 0;font-size:clamp(1.05rem,1.6vw,1.3rem);line-height:1.6;color:rgba(241,234,223,.86)}
.body-copy p{font-size:1.06rem;line-height:1.75;margin:0 0 1.2rem}

.button{
  display:inline-flex;align-items:center;justify-content:center;min-height:3.1rem;padding:.8rem 1.4rem;
  border:1px solid var(--gold);background:var(--gold);color:var(--ink);text-decoration:none;
  font-size:.72rem;font-weight:700;letter-spacing:.13em;text-transform:uppercase;
  transform:translate3d(var(--mx,0),var(--my,0),0);
  transition:transform .5s cubic-bezier(.16,1,.3,1),background .3s ease,color .3s ease,box-shadow .4s ease;
}
.button:hover,.button:focus-visible{background:transparent;color:var(--cream);box-shadow:0 14px 40px rgba(0,0,0,.35)}
.button--ghost{background:transparent;color:var(--cream)}
.button--ghost:hover,.button--ghost:focus-visible{background:var(--cream);color:var(--ink)}
.buttons{display:flex;flex-wrap:wrap;gap:.8rem;margin-top:2rem}

/* ─────────────────────────────────────────────── brush strokes ── */
/* The same torn-edge paint marks the live hero uses, cut with clip-path and
   nudged by the pointer so they sit at a different depth from the copy. */
.brush{position:absolute;pointer-events:none;z-index:1}
.brush--cream{
  width:72vw;height:9rem;
  background:linear-gradient(92deg,transparent 0 4%,rgba(246,239,225,.06) 8%,rgba(246,239,225,.42) 38%,rgba(246,239,225,.08) 78%,transparent);
  clip-path:polygon(0 42%,10% 20%,28% 35%,42% 12%,69% 36%,100% 22%,96% 76%,68% 60%,51% 84%,30% 63%,13% 82%,0 70%);
  transform:translateX(calc((var(--cx) - 50) * .25px)) rotate(-8deg);
}
.brush--gold{
  width:64vw;height:7.5rem;
  background:linear-gradient(96deg,transparent 0,rgba(185,150,75,.05) 8%,rgba(217,191,117,.34) 42%,rgba(185,150,75,.08) 72%,transparent);
  clip-path:polygon(0 52%,18% 22%,34% 44%,53% 16%,70% 38%,100% 20%,92% 70%,74% 58%,61% 86%,43% 61%,21% 79%,0 67%);
  transform:translateY(calc((var(--cy) - 50) * .2px)) rotate(-11deg);
}
.brush--ink{
  width:58vw;height:8rem;
  background:linear-gradient(96deg,transparent,rgba(16,13,13,.07) 12%,rgba(16,13,13,.16) 45%,rgba(16,13,13,.04) 80%,transparent);
  clip-path:polygon(0 48%,13% 18%,34% 40%,59% 14%,83% 38%,100% 20%,96% 70%,79% 56%,62% 86%,42% 60%,19% 78%,0 66%);
  transform:translateX(calc((var(--cx) - 50) * -.2px)) rotate(-14deg);
}

/* ───────────────────────────────────────────────────────── hero ── */
.hero{position:relative;min-height:100svh;display:grid;align-items:end;overflow:hidden;isolation:isolate;
  padding:9rem clamp(1.2rem,6vw,6rem) clamp(3.5rem,9vh,6rem);background:#0b0909}
.hero__stage{position:absolute;inset:0;z-index:0}
.hero__stage > *{position:absolute;inset:0}
/* Two photographs breathing in and out of one frame: two women, one room. */
.hero__photo{background-size:cover;background-position:center;transform:scale(1.08) translate3d(0,calc(var(--scroll,0) * .18px),0)}
.hero__photo--a{background-image:url("/ma/img/aria-window-latex-sunlight.jpg");background-position:60% 30%;animation:breatheA 16s ease-in-out infinite}
.hero__photo--b{background-image:url("/ma/img/aria-window-latex-full-length.jpg");background-position:30% 30%;mix-blend-mode:lighten;opacity:0;animation:breatheB 16s ease-in-out infinite}
@keyframes breatheA{0%,100%{opacity:1;filter:saturate(.8) brightness(.72)}50%{opacity:.55;filter:saturate(.6) brightness(.6)}}
@keyframes breatheB{0%,100%{opacity:.08}50%{opacity:.62}}
.hero__veil{
  background:
    radial-gradient(circle at calc(var(--cx) * 1%) calc(var(--cy) * 1%),rgba(217,191,117,.22),transparent 15rem),
    linear-gradient(90deg,rgba(8,7,7,.94) 0%,rgba(8,7,7,.62) 38%,rgba(8,7,7,.12) 70%,rgba(8,7,7,.4)),
    linear-gradient(0deg,rgba(8,7,7,.9),transparent 55%);
}
/* Her title set huge and thin, blended in between the photographs and the
   foreground so the image passes over and under the letters. */
.hero__word{
  display:grid;align-content:center;justify-items:end;padding:0 clamp(1rem,4vw,4rem);
  color:rgba(255,255,255,.6);font:200 clamp(5rem,17vw,17rem)/.78 var(--sans);text-transform:uppercase;
  letter-spacing:.04em;mix-blend-mode:overlay;pointer-events:none;
  transform:translate3d(calc((var(--cx) - 50) * -.35px),calc(var(--scroll,0) * -.12px),0);
}
.hero__word span{display:block}
.hero__fore{
  background:url("/ma/img/aria-latex-rope-from-behind.jpg") 72% 30%/cover;opacity:.34;
  filter:grayscale(.5) contrast(1.2) brightness(.8);mix-blend-mode:multiply;pointer-events:none;
  -webkit-mask-image:radial-gradient(ellipse 30% 55% at 78% 50%,#000 0 30%,transparent 70%);
          mask-image:radial-gradient(ellipse 30% 55% at 78% 50%,#000 0 30%,transparent 70%);
  transform:translate3d(calc((var(--cx) - 50) * .3px),calc(var(--scroll,0) * .32px),0);
}
.hero .brush--cream{left:-14vw;top:16vh}
.hero .brush--gold{right:-18vw;bottom:9vh}
.hero__copy{position:relative;z-index:3;max-width:58rem;text-shadow:0 2px 30px rgba(0,0,0,.45)}
.hero__copy .display{max-width:13ch}
.scroll-cue{position:absolute;z-index:3;right:clamp(1.2rem,6vw,6rem);bottom:clamp(2rem,6vh,4rem);
  writing-mode:vertical-rl;font-size:.62rem;letter-spacing:.3em;text-transform:uppercase;color:rgba(241,234,223,.6)}
.scroll-cue::after{content:"";display:block;width:1px;height:4rem;margin:1rem auto 0;background:linear-gradient(var(--gold),transparent);animation:cue 2.4s ease-in-out infinite}
@keyframes cue{0%{transform:scaleY(0);transform-origin:top}50%{transform:scaleY(1);transform-origin:top}51%{transform-origin:bottom}100%{transform:scaleY(0);transform-origin:bottom}}

/* ─────────────────────────────────────── cream statement + float ── */
.statement{position:relative;isolation:isolate;overflow:hidden;color:var(--ink);
  background:radial-gradient(circle at 8% 12%,rgba(185,150,75,.2),transparent 28rem),linear-gradient(135deg,#fffdf8,#f4ede1 50%,#ebe2d4);
  padding:clamp(5rem,12vw,11rem) clamp(1.2rem,8vw,8rem) clamp(7rem,16vw,14rem)}
.statement .brush--ink{left:-10vw;top:12%}
.statement .brush--gold{right:-14vw;bottom:10%;opacity:.9}
.statement__ghost{position:absolute;z-index:0;left:-2vw;bottom:-3vw;font:400 clamp(8rem,26vw,24rem)/.8 var(--serif);color:rgba(16,13,13,.045);letter-spacing:-.06em;white-space:nowrap;pointer-events:none;
  transform:translate3d(calc(var(--scroll,0) * -.08px),0,0)}
.statement__inner{position:relative;z-index:2;display:grid;grid-template-columns:minmax(0,1.25fr) minmax(0,.75fr);gap:clamp(2rem,6vw,6rem);align-items:center}
.statement blockquote{margin:0;font:400 clamp(1.9rem,4.2vw,4.4rem)/1.06 var(--serif);letter-spacing:-.035em}
/* A photograph that sits proud of the page: offset gold frame behind, deep
   shadow, and its own scroll speed. */
.float{position:relative;margin:0}
.float::before{content:"";position:absolute;inset:1.4rem -1.4rem -1.4rem 1.4rem;border:1px solid rgba(185,150,75,.65);z-index:-1;
  transform:translate3d(calc((var(--cx) - 50) * .12px),calc((var(--cy) - 50) * .12px),0)}
.float img{width:100%;aspect-ratio:3/4;object-fit:cover;box-shadow:0 40px 90px rgba(16,13,13,.35);filter:saturate(.9)}
[data-depth]{transform:translate3d(0,calc(var(--depth-y,0) * 1px),0);will-change:transform}

/* ───────────────────────── the two chapters: sticky, layered photographs ── */
.chapters{position:relative;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);
  background:radial-gradient(circle at 85% 10%,rgba(159,31,37,.32),transparent 32rem),radial-gradient(circle at 10% 90%,rgba(202,166,107,.12),transparent 30rem),linear-gradient(160deg,#211313,#0d0b0b 70%)}
.chapters__visual{position:sticky;top:0;height:100svh;overflow:hidden}
.chapters__visual figure{position:absolute;margin:0;inset:0;opacity:0;transform:scale(1.08);filter:blur(6px);
  transition:opacity 1.2s ease,transform 1.8s cubic-bezier(.16,1,.3,1),filter 1.2s ease}
.chapters__visual figure.is-on{opacity:1;transform:scale(1);filter:none}
.chapters__visual img{width:100%;height:100%;object-fit:cover}
.chapters__visual::after{content:"";position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(90deg,transparent 55%,rgba(13,11,11,.92)),linear-gradient(0deg,rgba(13,11,11,.55),transparent 40%)}
.chapters__label{position:absolute;z-index:2;left:clamp(1.2rem,4vw,3rem);bottom:clamp(1.2rem,5vh,3rem);
  font:200 clamp(3rem,7vw,7rem)/.85 var(--sans);text-transform:uppercase;letter-spacing:.06em;color:rgba(241,234,223,.85);mix-blend-mode:overlay}
.chapters__text{position:relative}
.chapter{min-height:100svh;display:grid;align-content:center;padding:clamp(4rem,10vh,8rem) clamp(1.4rem,6vw,6rem);position:relative}
.chapter + .chapter{border-top:1px solid var(--line)}
.chapter .title{margin-bottom:2rem}
.chapter .body-copy{color:rgba(241,234,223,.82);max-width:34rem}
.chapter__mark{position:absolute;right:clamp(1rem,4vw,3rem);top:clamp(3rem,10vh,6rem);font:400 clamp(6rem,12vw,11rem)/1 var(--serif);color:rgba(202,166,107,.08);pointer-events:none}

/* ─────────────────────────────────────────────── image break ── */
.break{position:relative;min-height:88svh;display:grid;place-items:center;overflow:hidden;isolation:isolate;text-align:center;padding:6rem clamp(1.2rem,8vw,8rem)}
.break__photo{position:absolute;inset:-12% 0;z-index:-2;background:url("/ma/img/aria-red-light-silhouette.jpg") center/cover;
  transform:translate3d(0,calc(var(--depth-y,0) * 1px),0) scale(1.05)}
.break::before{content:"";position:absolute;inset:0;z-index:-1;background:radial-gradient(ellipse at 50% 50%,rgba(10,8,8,.25),rgba(10,8,8,.88) 75%)}
.break .brush--cream{left:-8vw;top:30%;opacity:.55}
.break blockquote{position:relative;z-index:2;max-width:22ch;margin:0 auto;font:400 clamp(2.2rem,5.4vw,5.6rem)/1.02 var(--serif);letter-spacing:-.04em}

/* ───────────────────────────────────────────────────── roster ── */
.roster{position:relative;overflow:hidden;isolation:isolate;padding:clamp(6rem,12vw,11rem) clamp(1.2rem,5vw,5rem) clamp(7rem,14vw,12rem);
  background:radial-gradient(circle at calc(var(--cx) * 1%) 30%,rgba(202,166,107,.1),transparent 30rem),linear-gradient(180deg,#0d0b0b,#151010 60%,#0d0b0b)}
.roster__ghost{position:absolute;z-index:-1;top:clamp(2rem,6vw,5rem);left:50%;transform:translateX(-50%);white-space:nowrap;
  font:400 clamp(5rem,15vw,15rem)/1 var(--serif);color:rgba(241,234,223,.035);letter-spacing:-.05em;pointer-events:none}
.roster__head{position:relative;max-width:46rem;margin:0 auto clamp(3.5rem,8vh,6rem);text-align:center}
.roster__head p{color:rgba(241,234,223,.72);font-size:1.06rem;line-height:1.7;margin:1.4rem 0 0}
.roster__grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:clamp(1rem,2.2vw,2rem);max-width:1320px;margin:0 auto;align-items:start}
/* Staggered, so the four read as a hang of portraits rather than a row. */
.roster__grid .portrait:nth-child(even){margin-top:clamp(3rem,8vw,7rem)}

.portrait{position:relative;display:block;text-decoration:none;color:var(--cream);
  transform:perspective(1100px) rotateX(var(--rx,0deg)) rotateY(var(--ry,0deg)) translate3d(0,var(--lift,0),0);
  transition:transform .7s cubic-bezier(.16,1,.3,1)}
.portrait:hover,.portrait:focus-visible{--lift:-8px}
.portrait:focus-visible{outline:1px solid var(--gold);outline-offset:10px}
.portrait__frame{position:relative;aspect-ratio:4/5;overflow:hidden;box-shadow:0 30px 70px rgba(0,0,0,.5)}
.portrait__frame::after{content:"";position:absolute;inset:0;pointer-events:none;opacity:0;transition:opacity .6s ease;
  background:radial-gradient(circle 12rem at var(--px,50%) var(--py,50%),rgba(217,191,117,.28),transparent 70%)}
.portrait:hover .portrait__frame::after{opacity:1}
.portrait__tag{display:block;margin:1.3rem 0 .5rem;color:var(--gold);font-size:.62rem;font-weight:700;letter-spacing:.24em;text-transform:uppercase}
.portrait__name{margin:0;font:400 clamp(1.5rem,2.3vw,2.1rem)/1.05 var(--serif);letter-spacing:-.02em}
.portrait__line{margin:.6rem 0 0;font-size:.95rem;line-height:1.6;color:rgba(241,234,223,.7)}
.portrait__more{display:inline-flex;align-items:center;gap:.8rem;margin-top:1rem;font-size:.64rem;letter-spacing:.24em;text-transform:uppercase}
.portrait__more::after{content:"";width:1.6rem;height:1px;background:var(--gold);transition:width .5s cubic-bezier(.16,1,.3,1)}
.portrait:hover .portrait__more::after,.portrait:focus-visible .portrait__more::after{width:3.6rem}

/* The photograph frame the owner approved, kept as it was, with gold light. */
.photo-ph{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:.8rem;text-align:center;
  background:radial-gradient(120% 80% at 50% 110%,rgba(125,34,48,.85),rgba(125,34,48,0) 60%),linear-gradient(160deg,#1a0609,#0b0203 70%);
  color:rgba(244,241,238,.8);transition:transform 1.4s cubic-bezier(.16,1,.3,1)}
.photo-ph::before{content:"";position:absolute;inset:0;background-image:var(--grain);opacity:.12;mix-blend-mode:overlay}
.photo-ph::after{content:"";position:absolute;inset:14px;border:1px solid rgba(202,166,107,.28)}
.portrait:hover .photo-ph,.portrait:focus-visible .photo-ph{transform:scale(1.06)}
.photo-ph__mark{font:200 clamp(2rem,4.6vw,3.4rem)/1 var(--sans);letter-spacing:.3em;text-indent:.3em;opacity:.55}
.photo-ph__note{font-size:.56rem;letter-spacing:.3em;text-transform:uppercase;opacity:.72}

/* ───────────────────────────────────────────── editorial collage ── */
.editorial{position:relative;overflow:hidden;isolation:isolate;color:var(--ink);
  background:radial-gradient(circle at 90% 8%,rgba(185,150,75,.18),transparent 26rem),linear-gradient(135deg,#fffdf8,#f2eadd 60%,#e9dfcf);
  padding:clamp(5rem,11vw,10rem) clamp(1.2rem,6vw,6rem)}
.editorial .brush--ink{right:-12vw;top:6%}
.editorial__grid{position:relative;z-index:2;display:grid;grid-template-columns:repeat(12,1fr);grid-auto-rows:minmax(4.2vw,auto);gap:1rem}
.editorial__copy{grid-column:1 / 7;grid-row:1 / 9;align-self:center;padding-right:clamp(0rem,3vw,3rem)}
.editorial__copy .title{margin-bottom:2rem}
.editorial__copy .body-copy p{color:#2a2323}
.editorial__copy .body-copy p + .title{margin-top:3.5rem}
.shot{position:relative;margin:0;overflow:hidden;box-shadow:0 34px 80px rgba(16,13,13,.28)}
.shot img{width:100%;height:100%;object-fit:cover;transition:transform 1.2s cubic-bezier(.16,1,.3,1)}
.shot:hover img{transform:scale(1.05)}
.shot--a{grid-column:7 / 12;grid-row:1 / 7}
.shot--b{grid-column:9 / 13;grid-row:6 / 11;z-index:2;outline:10px solid #f4ede1}
.shot--c{grid-column:6 / 9;grid-row:8 / 12;z-index:1}

/* ──────────────────────────────────────────────────── closing CTA ── */
.closing{position:relative;overflow:hidden;isolation:isolate;display:grid;grid-template-columns:minmax(0,1fr) auto;gap:clamp(2rem,6vw,6rem);align-items:end;
  padding:clamp(6rem,12vw,11rem) clamp(1.2rem,7vw,7rem)}
.closing__photo{position:absolute;inset:0;z-index:-2;background:url("/ma/img/aria-backlit-wall-latex.jpg") 70% 30%/cover;filter:grayscale(.3) brightness(.42);animation:slowBreath 22s ease-in-out infinite alternate}
@keyframes slowBreath{from{transform:scale(1.04)}to{transform:scale(1.14) translateY(-2%)}}
.closing::before{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(90deg,rgba(13,11,11,.95),rgba(13,11,11,.55) 60%,rgba(13,11,11,.75))}
.closing .body-copy{max-width:40rem;color:rgba(241,234,223,.8);margin-top:1.6rem}
.closing .aside{font-size:.95rem;color:rgba(241,234,223,.62)}
.closing .aside a{color:var(--gold-hi);text-underline-offset:4px;text-decoration-color:rgba(217,191,117,.5)}

footer.foot{padding:2.6rem 1rem;text-align:center;font-size:.6rem;letter-spacing:.26em;text-transform:uppercase;color:rgba(241,234,223,.45);border-top:1px solid var(--line);background:#0b0909}

/* ───────────────────────────────────────────────── profile pages ── */
.p-hero{position:relative;min-height:100svh;display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);overflow:hidden;isolation:isolate;
  background:radial-gradient(circle at calc(var(--cx) * 1%) calc(var(--cy) * 1%),rgba(217,191,117,.12),transparent 26rem),linear-gradient(150deg,#1d1212,#0b0909 65%)}
.p-hero__ghost{position:absolute;z-index:0;right:-2vw;top:50%;transform:translate3d(calc((var(--cx) - 50) * -.3px),-50%,0);
  font:200 clamp(10rem,30vw,30rem)/.8 var(--sans);color:rgba(241,234,223,.04);pointer-events:none}
.p-hero__portrait{position:relative;z-index:1;margin:clamp(6rem,14vh,9rem) 0 clamp(3rem,8vh,5rem) clamp(1.2rem,6vw,6rem)}
.p-hero__portrait .frame{position:relative;height:100%;min-height:62svh;box-shadow:0 50px 110px rgba(0,0,0,.6)}
.p-hero__portrait::before{content:"";position:absolute;inset:-1.6rem 1.6rem 1.6rem -1.6rem;border:1px solid rgba(202,166,107,.5);
  transform:translate3d(calc((var(--cx) - 50) * .16px),calc((var(--cy) - 50) * .16px),0)}
.p-hero__aria{position:absolute;z-index:3;right:-3.5rem;bottom:-3rem;width:clamp(9rem,15vw,14rem);margin:0;box-shadow:0 30px 70px rgba(0,0,0,.6);outline:8px solid #120e0e}
.p-hero__aria img{aspect-ratio:3/4;object-fit:cover;width:100%}
.p-hero__copy{position:relative;z-index:2;align-self:center;padding:clamp(7rem,14vh,9rem) clamp(1.2rem,6vw,6rem) 4rem clamp(4rem,8vw,8rem)}
.p-hero .brush--gold{right:-20vw;top:22%}
.p-hero .brush--cream{left:30vw;bottom:6vh;opacity:.5}
.p-hero .display{font-size:clamp(2.8rem,6.4vw,6.6rem)}

.p-story{position:relative;overflow:hidden;isolation:isolate;color:var(--ink);
  background:radial-gradient(circle at 8% 12%,rgba(185,150,75,.2),transparent 28rem),linear-gradient(135deg,#fffdf8,#f4ede1 50%,#ebe2d4);
  padding:clamp(5rem,12vw,11rem) clamp(1.2rem,9vw,9rem)}
.p-story .brush--ink{left:-8vw;bottom:8%}
.p-story__inner{position:relative;z-index:2;max-width:62rem}
.p-story .ph-note{font-size:clamp(1.5rem,3vw,2.6rem);line-height:1.25;letter-spacing:-.02em;border-left-width:2px}

.p-together{position:relative;overflow:hidden;isolation:isolate;padding:clamp(6rem,12vw,11rem) clamp(1.2rem,6vw,6rem)}
.p-together__photo{position:absolute;inset:-10% 0;z-index:-2;background:url("/ma/img/aria-latex-corset-profile.jpg") 50% 30%/cover;filter:brightness(.5) saturate(.85);
  transform:translate3d(0,calc(var(--depth-y,0) * 1px),0) scale(1.05)}
.p-together::before{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(90deg,rgba(13,11,11,.2),rgba(13,11,11,.85) 60%)}
.p-together__panels{display:grid;grid-template-columns:repeat(12,1fr);gap:1.2rem}
.glass{padding:clamp(2rem,4vw,3.4rem);background:rgba(20,15,15,.42);border:1px solid rgba(241,234,223,.14);
  backdrop-filter:blur(18px) saturate(1.2);-webkit-backdrop-filter:blur(18px) saturate(1.2);box-shadow:0 40px 100px rgba(0,0,0,.45)}
.glass .title{font-size:clamp(1.9rem,3.4vw,3.4rem);margin-bottom:1.6rem}
.glass--a{grid-column:6 / 12}
.glass--b{grid-column:3 / 9;margin-top:-2rem}

.p-pair{position:relative;min-height:90svh;display:grid;place-items:center;overflow:hidden;isolation:isolate;text-align:center;padding:6rem clamp(1.2rem,8vw,8rem)}
.p-pair .photo-ph{z-index:-2;transform:translate3d(0,calc(var(--depth-y,0) * 1px),0) scale(1.1)}
.p-pair .photo-ph__mark{font-size:clamp(5rem,16vw,14rem);opacity:.12}
.p-pair .photo-ph__note{position:absolute;top:2rem;left:50%;transform:translateX(-50%);white-space:nowrap}
.p-pair blockquote{position:relative;max-width:22ch;margin:0;font:400 clamp(2rem,4.8vw,4.8rem)/1.05 var(--serif);letter-spacing:-.035em}

.p-more{position:relative;overflow:hidden;isolation:isolate;padding:clamp(5rem,10vw,9rem) clamp(1.2rem,5vw,5rem);background:linear-gradient(180deg,#0d0b0b,#171111)}
.p-more__head{display:flex;justify-content:space-between;align-items:end;gap:2rem;max-width:1180px;margin:0 auto 3.5rem}
.p-more__head a{font-size:.66rem;letter-spacing:.24em;text-transform:uppercase;color:var(--gold-hi);text-decoration:none}
.p-more__grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(1rem,2.2vw,2rem);max-width:1180px;margin:0 auto;align-items:start}
.p-more__grid .portrait:nth-child(2){margin-top:clamp(2rem,6vw,5rem)}

/* ───────────────────────────────────────────────────── responsive ── */
@media (max-width:980px){
  .nav-links{display:none}
  .statement__inner{grid-template-columns:1fr}
  .float{max-width:24rem;margin-left:auto}
  .chapters{grid-template-columns:1fr}
  .chapters__visual{position:relative;height:auto}
  .chapters__visual figure{position:relative;opacity:1;transform:none;filter:none;display:none}
  .chapters__visual figure.is-on{display:block}
  .chapters__visual figure img{height:70svh}
  .chapters__label{display:none}
  .chapter{min-height:auto}
  .roster__grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .roster__grid .portrait:nth-child(even){margin-top:3rem}
  .editorial__grid{grid-template-columns:repeat(6,1fr)}
  .editorial__copy{grid-column:1 / -1;grid-row:auto;padding:0}
  .shot--a{grid-column:1 / 5;grid-row:auto;aspect-ratio:3/4}
  .shot--b{grid-column:3 / 7;grid-row:auto;margin-top:-30%;aspect-ratio:3/4}
  .shot--c{display:none}
  .closing{grid-template-columns:1fr}
  .p-hero{grid-template-columns:1fr}
  .p-hero__portrait{margin:6rem 3.5rem 2rem 1.2rem}
  .p-hero__portrait .frame{min-height:60svh}
  .p-hero__aria{right:-2.5rem}
  .p-hero__copy{padding:3rem 1.2rem 4rem}
  .glass--a,.glass--b{grid-column:1 / -1;margin-top:0}
  .p-more__grid{grid-template-columns:repeat(3,minmax(0,1fr))}
}
@media (max-width:600px){
  .hero__word{font-size:clamp(4rem,30vw,8rem);justify-items:center;align-content:start;padding-top:22vh}
  .scroll-cue{display:none}
  .roster__grid{gap:1.4rem .9rem}
  .portrait__name{font-size:1.3rem}
  .portrait__line{font-size:.85rem}
  .photo-ph__mark{font-size:1.6rem}
  .photo-ph__note{font-size:.5rem;letter-spacing:.2em}
  .p-more__grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .p-more__grid .portrait:nth-child(2){margin-top:3rem}
  .p-more__head{flex-direction:column;align-items:start}
}
@media (prefers-reduced-motion:reduce){
  .duo::after,.hero__photo,.closing__photo,.scroll-cue::after{animation:none}
  .hero__photo--b{opacity:.3}
  [data-depth],.hero__word,.hero__fore,.brush,.portrait,.button,.break__photo,.p-together__photo{transform:none !important}
  .chapters__visual figure{transition:none}
}

/* Decorative layers of the profile hero live in one stage, like the main
   hero, so the motion layer's hero rules move the stage as a whole. */
.p-hero__stage{position:absolute;inset:0;z-index:0;pointer-events:none}
.p-hero__stage .brush{z-index:0}

/* ── fixes after the first render ─────────────────────────────────── */
/* The motion layer adds its own ghost "ARIA"; these heroes already
   carry their own oversized word, and two of them fight. */
.duo .duo-motion-ghost{display:none}

.statement{padding-top:clamp(4rem,8vw,7rem);padding-bottom:clamp(5rem,10vw,9rem)}
.float{max-width:30rem;justify-self:end;width:100%}
.float img{object-position:50% 35%}

/* Desktop only: the phone layout for the collage is set in the 980px block. */
@media (min-width:981px){
  .shot--a{grid-column:7 / 12;grid-row:1 / 7}
  .shot--b{grid-column:9 / 13;grid-row:5 / 10}
  .shot--c{grid-column:7 / 10;grid-row:9 / 13}
}

.p-together__photo{filter:brightness(.68) saturate(.9)}
.p-together{min-height:90svh;display:grid;align-items:center}
.p-pair{min-height:72svh}
.p-pair .photo-ph__note{font-size:.62rem;opacity:.85}

@media (max-width:980px){
  /* On one column the sticky scene cannot swap photographs as you read, so
     each chapter carries its own photograph above its words instead. */
  .chapters__visual{display:none}
  .chapter::before{
    content:"";display:block;height:62svh;margin:0 calc(-1 * clamp(1.4rem,6vw,6rem)) 2.6rem;
    background:var(--chapter-img) center 30%/cover;box-shadow:inset 0 -120px 80px -40px #120d0d;
  }
  .chapter{padding-top:0}
  .float{max-width:19rem}
  .shot--c{display:none}
}
@media (max-width:600px){
  .portrait__more{letter-spacing:.16em}
  .portrait__more::after{width:1rem}
}
.float img{height:auto}

/* ── mistressaria.com, 2026-10-13 ─────────────────────────────────── */
/* No italics anywhere: the owner reads them as an AI tell. Belt and braces
   in case a browser default or a later edit brings one back. */
.duo em,.duo i,.duo cite,.duo blockquote,.duo address{font-style:normal}

/* The opening statement is her own longer paragraph now, so it is set a
   size down to keep the photograph and the words side by side. */
.statement blockquote{font-size:clamp(1.6rem,3.1vw,3.2rem);line-height:1.16;letter-spacing:-.025em}

/* mistressaria.com keeps its navigation on a phone (see public/ma/ma.css):
   a phone that lands on a page must still have a way out of it. */
@media (max-width:980px){
  .topbar{flex-wrap:wrap;gap:.5rem 1rem}
  .nav-links{display:flex;order:2;width:100%;gap:1.1rem;overflow-x:auto;-webkit-overflow-scrolling:touch;scrollbar-width:none;font-size:.66rem;padding-bottom:.2rem}
  .nav-links::-webkit-scrollbar{display:none}
  .nav-links a{white-space:nowrap;flex:0 0 auto}
}

/* The page heading is set bold, uppercase and sans, the way mistressaria.com
   sets its headings (public/ma/ma.css h2), at the size of this hero.
   Owner, 2026-10-13: "put it in something bold to match the rest of the
   website. It looks better." Applies to the profile pages' heading too. */
.display{font:700 clamp(2.5rem,6vw,6.2rem)/.94 var(--sans);letter-spacing:-.015em;text-transform:uppercase}
.hero__copy .display{max-width:14ch}
.p-hero .display{font-size:clamp(2.4rem,5.2vw,5.4rem)}
/* A placeholder inside a heading, kicker or card tag takes that line's own
   type, so the bold heading reads as one heading. */
.display .ph,.kicker .ph,.portrait__tag .ph{font-family:inherit}

/* ── the three women, 2026-10-13 ──────────────────────────────────── */
@media (min-width:981px){
  .roster__grid{grid-template-columns:repeat(3,minmax(0,1fr));max-width:1120px}
  .p-more__grid{grid-template-columns:repeat(2,minmax(0,1fr));max-width:820px}
}
.p-more__grid .portrait:nth-child(2){margin-top:clamp(2rem,6vw,5rem)}

/* Her photograph, once the file is in img/: laid over the placeholder frame
   by duo.js, so a missing file never shows as a broken image. */
.photo-real{position:absolute;inset:0;z-index:2;width:100%;height:100%;object-fit:cover;object-position:50% 30%;transition:transform 1.4s cubic-bezier(.16,1,.3,1)}
.portrait:hover .photo-real,.portrait:focus-visible .photo-real{transform:scale(1.06)}
.p-pair__frame{position:absolute;inset:0;z-index:-2;overflow:hidden}
.p-pair__frame::after{content:"";position:absolute;inset:0;z-index:3;background:radial-gradient(ellipse at 50% 55%,rgba(10,8,8,.35),rgba(10,8,8,.85) 78%)}

.p-story__text{margin:0;font:400 clamp(1.5rem,3vw,2.6rem)/1.28 var(--serif);letter-spacing:-.02em;color:var(--ink)}
.glass .body-copy p{color:rgba(241,234,223,.86)}
.p-more__head a{max-width:14rem;text-align:right}

/* Her own words, credited to her, under the large quote on her page. */
.p-pair cite{display:block;margin-top:1.6rem;font:700 .7rem/1 var(--sans);letter-spacing:.22em;text-transform:uppercase;color:var(--gold)}
.p-story__text + .p-story__text{margin-top:1.4rem}

/* The two new photographs, 2026-10-14. */
.float img{object-position:42% 40%}
.shot--a img{object-position:50% 62%}

/* The site's own age gate, from ma.css, so these pages need only this file. */
body[data-gate="locked"]{overflow:hidden}
/* ─────────────────────────────────────────────────────── age gate ── */
/* Lenina Crowne's shape, decided 2026-09-04: no panel, no checkbox. The
   button press is the age confirmation, and the text above it says so. */
.gate{
  position:fixed;inset:0;z-index:100;text-align:center;
  display:flex;flex-direction:column;align-items:center;justify-content:space-between;
  padding:clamp(38px,7vh,86px) 5vw clamp(52px,9vh,104px);
  transition:opacity .7s ease,visibility .7s ease;
}
body[data-gate="open"] .gate{opacity:0;visibility:hidden}
.gate__image{position:absolute;inset:0;z-index:-2;width:100%;height:100%;object-fit:cover;object-position:50% 40%}
.gate__shade{position:absolute;inset:0;z-index:-1;
  background:linear-gradient(to bottom,rgba(26,2,6,.66) 0%,rgba(26,2,6,.10) 26%,rgba(26,2,6,.10) 52%,rgba(26,2,6,.80) 100%)}
.gate__panel{width:min(680px,86vw)}
/* The photograph puts her face and the light across her eyes in the upper
   third, so the disclaimer and the button are weighted below it rather than
   sitting across her mouth. */
.gate__panel--text{padding-top:clamp(40px,16vh,190px)}

.wordmark{
  font-weight:200;line-height:1;letter-spacing:.22em;text-indent:.22em;
  text-transform:uppercase;color:#fff;text-shadow:0 6px 44px rgba(20,0,3,.72);
  font-size:clamp(2.6rem,11vw,7rem);
}
.wordmark .kicker{
  display:block;font-size:clamp(9px,1.1vw,12px);font-weight:300;
  letter-spacing:.42em;text-indent:.42em;color:rgba(255,255,255,.78);
  margin-bottom:clamp(12px,1.8vh,20px);
}
.gate__text{
  max-width:46ch;margin:0 auto clamp(24px,3.6vh,40px);
  font-size:clamp(11px,1.05vw,13px);line-height:1.8;color:rgba(255,255,255,.9);
  text-shadow:0 2px 18px rgba(20,0,3,.7);
}
.gate__enter{
  border:0;background:#0b0203;color:#fff;font-family:inherit;font-size:12px;
  letter-spacing:.34em;text-transform:uppercase;padding:18px 58px;cursor:pointer;
  transition:letter-spacing .35s ease;
}
.gate__enter:hover{letter-spacing:.42em}
.gate__foot{font-size:8px;letter-spacing:.26em;text-transform:uppercase;color:rgba(255,255,255,.5)}

.gate .wordmark{font-family:var(--sans)}
.gate .wordmark .kicker{margin:0 0 clamp(12px,1.8vh,20px);color:rgba(255,255,255,.78);font-weight:300;font-size:clamp(9px,1.1vw,12px);letter-spacing:.42em}