/* mistressaria.com — its own stylesheet.

   Shares no file with the True Power Dynamic pages. The two sites must not
   look like each other any more than they read like each other, so nothing
   here is imported from public/styles.css and nothing there imports this.

   Layout language is the one approved in MA_DESIGN_DIRECTION.md §2: oversized
   name as a graphic, split rows with no gutter, one pill CTA per section, a
   full-width colour band, and no ornament. */

:root{
  /* Every image on the site arrives through a variable, one line each, so a
     photograph can be swapped without touching a rule. */
  --gate-image:url("/ma/img/aria-gate-red-blinds.jpeg");
  --hero-image:url("/ma/img/aria-hero-window-city.jpg");
  --split-image:url("/ma/img/aria-latex-catsuit-back.jpg");
  --knee-image:url("/ma/img/aria-latex-sofa-boots.jpg");
  --couples-image:url("/ma/img/aria-latex-bed-reach.jpg");

  --ink:#0b0203;
  --paper:#f4f1ee;
  --wine:#5c1420;
  --band:#7d2230;
  --sand:#e8d9cf;
  --sans:"Helvetica Neue",Arial,sans-serif;
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{background:var(--paper);color:#151112;font-family:var(--sans);-webkit-font-smoothing:antialiased}
body[data-gate="locked"]{overflow:hidden}
img{max-width:100%;display:block}

/* ─────────────────────────────────────────────────────── 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;background:var(--gate-image) 50% 40%/cover no-repeat}
.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)}

/* ───────────────────────────────────────────────────────────── hero ── */
.hero{position:relative;min-height:100svh;display:flex;flex-direction:column;justify-content:space-between;overflow:hidden}
.hero__image{position:absolute;inset:0;z-index:-2;background:var(--hero-image) 62% 40%/cover no-repeat}
.hero__shade{position:absolute;inset:0;z-index:-1;
  background:linear-gradient(to bottom,rgba(11,2,3,.55) 0%,rgba(11,2,3,0) 30%,rgba(11,2,3,.18) 60%,rgba(11,2,3,.72) 100%)}

.topbar{
  display:flex;align-items:center;justify-content:space-between;gap:24px;
  padding:clamp(20px,3.4vh,34px) clamp(20px,4vw,52px);
}
.monogram{font-weight:200;font-size:13px;letter-spacing:.34em;text-transform:uppercase;color:#fff;text-decoration:none}
.nav{display:flex;gap:clamp(14px,2.2vw,34px)}
.nav a{
  color:#fff;text-decoration:none;font-size:11px;font-weight:400;
  letter-spacing:.2em;text-transform:uppercase;padding-bottom:3px;
  border-bottom:1px solid transparent;transition:border-color .3s ease;
}
.nav a:hover,.nav a[aria-current]{border-bottom-color:#fff}

/* Her name as the graphic: oversized, thin, tracked, running past the frame.
   Set the way public/styles.css:332 already sets it — Helvetica Neue 200,
   uppercase, tracked. No webfont. A script face was tried and rejected. */
.hero__name{
  font-weight:200;color:#fff;text-transform:uppercase;
  font-size:clamp(1.1rem,2.6vw,1.9rem);line-height:1.2;letter-spacing:.3em;
  margin:0 0 -.02em 0;padding:0 clamp(20px,4vw,52px) clamp(6px,1.4vh,14px);
  text-shadow:0 6px 40px rgba(11,2,3,.6);
}
/* Her name stays the graphic. The words around it are the searchable half. */
.hero__name-em{
  display:block;font-size:clamp(4.2rem,22vw,19rem);line-height:.86;
  letter-spacing:.16em;margin-left:-.06em;margin-top:clamp(2px,.6vh,8px);
  text-shadow:0 10px 60px rgba(11,2,3,.5);
}

/* ─────────────────────────────────────────────────────── split row ── */
.split{display:grid;grid-template-columns:1fr 1fr;background:var(--paper)}
.split__copy{
  padding:clamp(48px,8vw,120px) clamp(28px,5vw,86px);
  display:flex;flex-direction:column;justify-content:center;
}
.split__image{background:var(--split-image) 50% 35%/cover no-repeat;min-height:60vh}
/* The photograph takes the left half instead, so consecutive sections do not
   march down the page in one column. */
.split--flip .split__copy{order:2}
.split--flip .split__image{order:1}
.split--knee .split__image{background-image:var(--knee-image);background-position:50% 50%}
/* Her practices, listed in the split column rather than run into a paragraph,
   so a reader scanning for one of them finds it. */
.inline-list{list-style:none;margin:0;padding:0}
.inline-list li{
  font-size:14px;line-height:1.75;color:#3a3436;margin-bottom:11px;
  padding-left:22px;position:relative;
}
.inline-list li::before{content:"";position:absolute;left:0;top:.68em;width:11px;height:1px;background:var(--wine)}
.inline-list a{color:#3a3436;text-decoration:underline;text-underline-offset:3px;text-decoration-color:rgba(92,20,32,.45)}
.inline-list a:hover{color:var(--wine)}
.split--couples .split__image{background-image:var(--couples-image);background-position:50% 30%}
/* The opening address, full width and centred, before the page splits. */
.opening{
  background:var(--paper);text-align:center;
  padding:clamp(56px,10vw,130px) clamp(28px,6vw,110px) clamp(40px,7vw,90px);
}
.opening p{
  max-width:34ch;margin:0 auto;font-size:clamp(1.15rem,2.4vw,1.75rem);
  line-height:1.5;color:#241d1f;
}
.opening p + p{margin-top:clamp(20px,3vh,32px)}
h2{
  font-size:clamp(1.5rem,3vw,2.4rem);font-weight:700;letter-spacing:-.01em;
  text-transform:uppercase;margin-bottom:clamp(22px,4vh,40px);
}
.lede{font-size:12px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;margin-bottom:20px}
.split__copy p{text-align:justify;font-size:14px;line-height:1.85;color:#3a3436;margin-bottom:20px}
.pill{
  align-self:flex-start;margin-top:clamp(18px,3vh,34px);
  display:inline-block;background:var(--ink);color:#fff;text-decoration:none;
  border-radius:999px;padding:20px 54px;font-size:11px;letter-spacing:.24em;text-transform:uppercase;
  transition:background .3s ease;
}
.pill:hover{background:var(--wine)}

/* ────────────────────────────────────────────────────── quote band ── */
.band{background:var(--band);padding:clamp(52px,9vw,120px) clamp(28px,6vw,110px)}
.band p{
  color:var(--sand);font-size:clamp(1.05rem,2.5vw,2rem);font-weight:700;
  line-height:1.35;letter-spacing:.01em;text-transform:uppercase;max-width:24ch;
}

/* Fades up as you reach it. Fails open: anything already on screen shows at
   once, and everything shows after two seconds whatever the observer does.
   A reveal animation must never be the reason copy cannot be read. */
[data-reveal]{opacity:0;transform:translateY(26px);transition:opacity 1.1s ease,transform 1.1s ease}
[data-reveal].is-visible{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){[data-reveal]{opacity:1;transform:none;transition:none}}

/* ─────────────────────────────────────── the way back to the hub ── */
/* A spoke carries a static link to its own canonical hub in the markup;
   ma.js rewrites it to whichever hub this visitor actually arrived on. With
   JavaScript off the static link is still correct, just not personal. */
.backlink{
  display:block;padding:clamp(18px,3vh,28px) clamp(20px,4vw,52px);
  font-size:10px;letter-spacing:.24em;text-transform:uppercase;
  color:#6a5f62;text-decoration:none;border-bottom:1px solid rgba(11,2,3,.08);
}
.backlink:hover{color:var(--wine)}

/* ─────────────────────────────────────────────── landing pages ── */
/* A hub that answers one query. Shorter hero than the front door, because the
   visitor arrived with a question and the answer should be near the top. */
.pagehero{
  position:relative;min-height:62svh;display:flex;flex-direction:column;
  justify-content:space-between;overflow:hidden;
}
.pagehero__image{position:absolute;inset:0;z-index:-2;background-size:cover;background-repeat:no-repeat}
.pagehero__shade{position:absolute;inset:0;z-index:-1;
  background:linear-gradient(to bottom,rgba(11,2,3,.62) 0%,rgba(11,2,3,.15) 34%,rgba(11,2,3,.30) 62%,rgba(11,2,3,.80) 100%)}
.pagehero--couples .pagehero__image{background-image:var(--couples-image);background-position:50% 28%}
.pagehero--women .pagehero__image{background-image:var(--knee-image);background-position:50% 45%}
/* Reusing the catsuit photograph until this page has one of its own. */
.pagehero--discipline .pagehero__image{background-image:var(--split-image);background-position:50% 30%}
.pagehero__title{
  font-weight:200;color:#fff;text-transform:uppercase;letter-spacing:.13em;
  font-size:clamp(1.9rem,6.5vw,4.6rem);line-height:1;
  padding:0 clamp(20px,4vw,52px) clamp(26px,4vh,48px);
  text-shadow:0 10px 60px rgba(11,2,3,.55);max-width:18ch;
}

/* The body of a landing page: one narrow column, generous leading. */
.prose{background:var(--paper);padding:clamp(48px,8vw,110px) clamp(24px,5vw,52px)}
.prose__inner{max-width:64ch;margin:0 auto}
.prose h2{
  font-size:clamp(1.15rem,2.4vw,1.7rem);margin:clamp(38px,6vh,64px) 0 clamp(16px,2.4vh,24px);
}
.prose h2:first-child{margin-top:0}
.prose p{font-size:15px;line-height:1.9;color:#332d2f;margin-bottom:20px}
.prose ul{list-style:none;margin:0 0 24px;padding:0}
.prose li{
  font-size:15px;line-height:1.85;color:#332d2f;margin-bottom:14px;
  padding-left:26px;position:relative;
}
.prose li::before{content:"";position:absolute;left:0;top:.72em;width:12px;height:1px;background:var(--wine)}
.prose .pill{margin-top:clamp(26px,4vh,44px)}
/* Her own words, set apart from the explanatory copy around them. */
.prose blockquote{
  margin:clamp(28px,4vh,44px) 0;padding-left:clamp(18px,3vw,28px);
  border-left:2px solid var(--wine);
}
.prose blockquote p{font-size:clamp(1rem,2vw,1.25rem);line-height:1.6;color:#241d1f;margin-bottom:12px}
.prose blockquote p:last-child{margin-bottom:0}

.pagehero--london .pagehero__image{background-image:var(--hero-image);background-position:62% 35%}
.pagehero--enquire .pagehero__image{background-image:var(--couples-image);background-position:50% 22%}

/* ─────────────────────────────────────────── the enquiry form ── */
/* Defined with two classes so it beats the centred .plain__inner that is
   declared further down this file. */
.plain .plain__inner--form{max-width:38rem;text-align:left}
.field{margin-bottom:22px}
.field label,.check label{
  display:block;font-size:11px;letter-spacing:.16em;text-transform:uppercase;
  color:#4a4245;margin-bottom:9px;
}
.field .opt{text-transform:none;letter-spacing:0;color:#8a7f82}
.field input,.field select,.field textarea{
  width:100%;font-family:inherit;font-size:15px;line-height:1.6;color:#151112;
  background:#fff;border:1px solid rgba(11,2,3,.18);border-radius:0;
  padding:13px 14px;transition:border-color .25s ease;
}
.field textarea{resize:vertical;min-height:150px}
.field input:focus,.field select:focus,.field textarea:focus{
  outline:none;border-color:var(--wine);box-shadow:0 0 0 3px rgba(92,20,32,.10);
}
.hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.check{display:flex;align-items:flex-start;gap:11px;margin-bottom:16px}
.check input{margin-top:3px;width:16px;height:16px;accent-color:var(--wine);flex:0 0 auto}
.check label{margin:0;text-transform:none;letter-spacing:0;font-size:14px;line-height:1.6;color:#3a3436}
.pill--submit{border:0;cursor:pointer;font-family:inherit;width:100%;text-align:center;margin-top:12px}
.formnote{margin-top:16px;font-size:14px;line-height:1.7;min-height:1.2em}
.formnote--bad{color:var(--wine)}
.formnote--good{color:#1f5136;font-size:15px}

/* ──────────────────────────────────── testimonials and enquiry ── */
.plain{
  background:var(--paper);padding:clamp(52px,9vw,120px) clamp(28px,6vw,110px);
  border-top:1px solid rgba(11,2,3,.08);
}
.plain__inner{max-width:62ch;margin:0 auto;text-align:center}
.plain p{font-size:14px;line-height:1.85;color:#3a3436;margin-bottom:20px}
.plain .pill{align-self:center}
.awaiting{
  display:inline-block;font-size:10px;letter-spacing:.24em;text-transform:uppercase;
  color:var(--wine);border:1px solid rgba(92,20,32,.3);border-radius:999px;
  padding:10px 22px;margin-top:8px;
}

footer{background:var(--ink);color:rgba(255,255,255,.6);text-align:center;
  padding:clamp(34px,6vh,64px) 20px;font-size:9px;letter-spacing:.26em;text-transform:uppercase}

@media (max-width:820px){
  .split{grid-template-columns:1fr}
  .split__image{min-height:70vh;order:-1}
  /* On one column the photograph always leads, so the flip has nothing to do. */
  .split--flip .split__copy{order:2}
  .split--flip .split__image{order:1}
  .nav{display:none}
  .hero__name{letter-spacing:.1em}
}