/* Brand fonts: Google's own latin files, declared here so no font stylesheet holds up the first paint */
@font-face { font-family: 'Grenze Gotisch'; font-style: normal; font-weight: 500 800; font-display: swap; src: url(https://fonts.gstatic.com/s/grenzegotisch/v20/Fh4sPjjqNDz1osh_jX9YfjudpDhNHa-IeLT4.woff2) format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: 'Cinzel'; font-style: normal; font-weight: 600 700; font-display: swap; src: url(https://fonts.gstatic.com/s/cinzel/v26/8vIJ7ww63mVu7gt79mT7PkRXMw.woff2) format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: 'EB Garamond'; font-style: normal; font-weight: 400 700; font-display: swap; src: url(https://fonts.gstatic.com/s/ebgaramond/v33/SlGUmQSNjdsmc35JDF1K5GR1SDk_YAPI.woff2) format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: 'EB Garamond'; font-style: italic; font-weight: 400; font-display: swap; src: url(https://fonts.gstatic.com/s/ebgaramond/v33/SlGFmQSNjdsmc35JDF1K5GRwUjcdlttVFm-rI7e8QL99U6i1hGFJRvw.woff2) format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }

/* Mistress Slaves - "The Chapel". Black, blood red, antique gold, bone.
   Signature: the pointed gothic arch (each page carries the #arch clip in an inline svg).
   Everything is scoped under .ms; the platform's patterns read the tokens below. */
:root{
  --ms-void:#070509; --ms-ink:#0d090e; --ms-panel:#140e14; --ms-panel-2:#1b1219;
  --ms-blood:#7e0c1e; --ms-blood-hi:#b5142c; --ms-gold:#b8935a; --ms-gold-hi:#e1c38a; --ms-gold-lo:#7a5f33;
  --ms-bone:#efe6d8; --ms-ash:#b9adb2; --ms-quiet:#93878d; --ms-line:rgba(184,147,90,.3);
  --ms-goth:'Grenze Gotisch','Cinzel',Georgia,serif; --ms-caps:'Cinzel',Georgia,serif; --ms-book:'EB Garamond',Georgia,serif;
  --ms-wrap:1200px;

  /* the platform's design contract */
  --color-bg:var(--ms-void); --color-surface:#170f15; --color-surface-soft:#24161f;
  --color-text:var(--ms-bone); --color-text-soft:#cbbfc4; --color-heading:var(--ms-bone);
  --color-primary:var(--ms-blood-hi); --color-primary-dark:var(--ms-blood); --color-on-primary:#ffffff;
  --color-scrim:rgba(7,5,9,.82); --color-on-scrim:var(--ms-bone); --color-rule:rgba(184,147,90,.32); --color-focus:var(--ms-gold-hi);
  --font-heading:var(--ms-goth); --font-body:var(--ms-book);
  --space-1:.25rem; --space-2:.5rem; --space-3:.75rem; --space-4:1rem; --space-5:1.5rem; --space-6:2rem; --space-8:3rem; --space-12:6rem;
  --container-max:75rem;
  --btn-radius:2px; --card-radius:2px; --chip-radius:2px;
  --card-shadow:0 30px 60px rgba(0,0,0,.55); --card-border:1px solid rgba(184,147,90,.32);
  --logo-height:66px; /* logo_fit.py: 66px keeps the lettering at 24px+ (working/logo-fit.json) */
  --type-scale:1; --heading-leading:1; --heading-tracking:0; --weight-display:700;
  --transition-fast:150ms ease; --transition-slow:400ms ease;
}

*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:var(--ms-void);color:var(--ms-ash);font:400 19px/1.65 var(--ms-book);-webkit-font-smoothing:antialiased;
  background-image:radial-gradient(rgba(184,147,90,.045) 1px,transparent 1.5px);background-size:26px 26px}
img{display:block;max-width:100%}
a{color:inherit}
h1,h2,h3,h4{font-family:var(--font-heading);font-weight:var(--weight-display,700);color:var(--color-heading);line-height:calc(1.15 * var(--heading-leading,1));letter-spacing:calc(-0.02em + var(--heading-tracking,0) * 1em)}
:focus-visible{outline:2px solid var(--ms-gold-hi);outline-offset:3px}
@media (prefers-reduced-motion:reduce){*{transition:none!important;scroll-behavior:auto!important}}

.ms .wrap{width:min(var(--ms-wrap),100% - 2.4rem);margin-inline:auto}
.ms .skip{position:absolute;left:-999px;top:0;background:var(--ms-gold);color:var(--ms-void);padding:.6rem 1rem;z-index:99}
.ms .skip:focus{left:1rem}

/* ---------- buttons ---------- */
.ms .btn{display:inline-flex;align-items:center;justify-content:center;gap:.55rem;font:700 .8rem/1 var(--ms-caps);letter-spacing:.16em;text-transform:uppercase;text-decoration:none;padding:1rem 1.5rem;border:1px solid transparent;white-space:nowrap;transition:background .2s,border-color .2s,color .2s}
.ms .btn-blood{background:linear-gradient(180deg,var(--ms-blood-hi),var(--ms-blood));color:var(--ms-bone);border-color:#4a0712;box-shadow:inset 0 1px 0 rgba(255,255,255,.12)}
.ms .btn-blood:hover{background:linear-gradient(180deg,#cf1934,#8f0e22)}
.ms .btn-ghost{border-color:var(--ms-line);color:var(--ms-bone)}
.ms .btn-ghost:hover{border-color:var(--ms-gold)}

/* ---------- header, with the platform's menu in the house lettering ---------- */
.ms .ms-top{position:sticky;top:0;z-index:30;background:rgba(7,5,9,.97);border-bottom:1px solid var(--ms-line)}
.ms .ms-top .wrap{display:flex;align-items:center;gap:1.6rem;min-height:92px;padding:.6rem 0}
.ms .ms-top .logo{flex:none}
.ms .ms-top .logo img{height:var(--logo-height);width:auto;max-width:45vw;object-fit:contain;object-position:left center}
.ms .ms-top .acts{display:flex;gap:.6rem;margin-left:auto}
.ms .ms-top .hs-canvas-nav{flex:1 1 auto;min-width:0;color:var(--ms-bone);--hs-canvas-nav-mobile-bg:var(--ms-ink);--hs-canvas-nav-shadow:0 20px 60px rgba(0,0,0,.6);--hs-canvas-nav-border:var(--ms-line)}
.ms .ms-top .hs-canvas-nav + .acts{margin-left:0}
.ms .ms-top .hs-canvas-nav__menu--desktop{gap:1.6rem;justify-content:flex-end}
.ms .ms-top .hs-canvas-nav__link,.ms .ms-top .hs-canvas-nav__summary{font-family:var(--ms-caps);font-size:.74rem;font-weight:600;letter-spacing:.16em;text-transform:uppercase;color:var(--ms-ash);text-decoration:none}
.ms .ms-top .hs-canvas-nav__link:hover,.ms .ms-top .hs-canvas-nav__summary:hover{color:var(--ms-gold-hi);opacity:1}
.ms .ms-top .hs-canvas-nav__toggle{min-width:44px;min-height:44px;align-items:center;color:var(--ms-bone)}
.ms .ms-top .hs-canvas-nav__overlay{background:rgba(0,0,0,.65)}
.ms .ms-top .hs-canvas-nav__drawer{border-left:1px solid var(--ms-line)}
.ms .ms-top .hs-canvas-nav__close{color:var(--ms-bone);min-width:44px;min-height:44px}
.ms .ms-top .hs-canvas-nav__cta--primary{background:linear-gradient(180deg,var(--ms-blood-hi),var(--ms-blood));color:#fff}
.ms .ms-top .hs-canvas-nav__cta--secondary{color:var(--ms-bone);border-color:var(--ms-line)}
.ms .ms-top .hs-canvas-nav__menu--mobile .hs-canvas-nav__link,.ms .ms-top .hs-canvas-nav__menu--mobile .hs-canvas-nav__summary{font-family:var(--ms-goth);font-size:1.7rem;letter-spacing:0;text-transform:none;color:var(--ms-bone)}
.ms .ms-top .hs-canvas-nav__menu--desktop>.hs-canvas-nav__item>.hs-canvas-nav__details>.hs-canvas-nav__submenu{background:var(--ms-ink);border:1px solid var(--ms-line);padding:.9rem 1.2rem;gap:.75rem}

/* ---------- the arch (signature) ---------- */
.ms .arch{clip-path:url(#arch)}
.ms .arch-frame{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;overflow:visible}
.ms .arch-frame path{fill:none;stroke:var(--ms-gold);stroke-width:1.5;vector-effect:non-scaling-stroke}
.ms .arch-frame .inner{stroke:rgba(184,147,90,.45);stroke-width:1}

/* ---------- small type ---------- */
.ms .eyebrow{font:700 .74rem/1.2 var(--ms-caps);letter-spacing:.32em;text-transform:uppercase;color:var(--ms-gold);display:flex;align-items:center;gap:.9rem;margin:0 0 1rem}
.ms .eyebrow::before{content:"";height:1px;width:2rem;background:currentColor;flex:none}
.ms .eyebrow::after{content:"";height:1px;flex:1;max-width:5rem;background:currentColor}
.ms .orn{display:flex;align-items:center;justify-content:center;gap:1rem;color:var(--ms-gold);margin:0 auto 1.4rem;max-width:18rem}
.ms .orn::before,.ms .orn::after{content:"";height:1px;flex:1;background:linear-gradient(90deg,transparent,var(--ms-gold))}
.ms .orn::after{background:linear-gradient(90deg,var(--ms-gold),transparent)}
.ms .orn b{width:9px;height:9px;transform:rotate(45deg);border:1px solid var(--ms-gold);display:block}
.ms .crumbs{font:600 .7rem/1.4 var(--ms-caps);letter-spacing:.16em;text-transform:uppercase;color:var(--ms-quiet);margin:0 0 1.2rem}
.ms .crumbs a{color:var(--ms-ash);text-decoration:none}
.ms .crumbs a:hover{color:var(--ms-gold-hi)}
.ms .red{color:var(--ms-blood-hi)}
.ms .gold{color:var(--ms-gold-hi)}

/* ---------- opener: the sign-up card on the left, the picture in its arch on the right ---------- */
.ms .ms-hero{position:relative;padding:clamp(2.6rem,5vw,4.5rem) 0 0;overflow:hidden;
  background:radial-gradient(55% 70% at 78% 40%,rgba(126,12,30,.55),transparent 70%),radial-gradient(40% 50% at 10% 90%,rgba(126,12,30,.25),transparent 70%)}
.ms .ms-hero > .wrap{display:grid;grid-template-columns:1fr 1fr;gap:clamp(2rem,5vw,5rem);align-items:center}
.ms .ms-hero h1{font-weight:800;font-size:clamp(3rem,6vw,5.6rem);line-height:.94;letter-spacing:.005em;color:var(--ms-bone);margin:0 0 .3em;text-shadow:0 4px 30px rgba(0,0,0,.6)}
.ms .ms-hero h1 .red{color:var(--ms-blood-hi)}
.ms .ms-hero h1 small{display:block;font-size:.42em;line-height:1.1;margin-top:.35em;color:var(--ms-gold-hi);font-weight:700}
.ms .ms-hero .lede{font-size:1.16rem;line-height:1.6;color:#d8cbd0;margin:0 0 1.6rem;max-width:32rem}
.ms .ms-hero .lede em{color:var(--ms-gold-hi)}
.ms .hero-words .signup-card{max-width:34rem;position:relative}
.ms .hero-words .signup-card-form{background:linear-gradient(180deg,rgba(27,18,25,.97),rgba(14,9,14,.97));border:1px solid var(--ms-line);box-shadow:var(--card-shadow)}
.ms .hero-words .signup-card-title{font-size:1.9rem}
.ms .hero-art{position:relative;aspect-ratio:5/7;max-height:78vh;justify-self:center;width:min(100%,520px)}
.ms .hero-art img{width:100%;height:100%;object-fit:cover;object-position:50% 18%}
.ms .hero-art .glow{position:absolute;inset:-8% -12%;background:radial-gradient(50% 45% at 50% 45%,rgba(181,20,44,.35),transparent 70%);z-index:-1}
.ms .hero-art .arch-frame{inset:-14px;width:calc(100% + 28px);height:calc(100% + 28px)}
.ms .hero-art--wide{aspect-ratio:4/5}

/* the meet buttons: always there */
.ms .meet{position:relative;margin-top:clamp(2.4rem,5vw,3.6rem);border-top:1px solid var(--ms-line);border-bottom:1px solid var(--ms-line);background:rgba(7,5,9,.75)}
.ms .meet .wrap{display:grid;grid-template-columns:repeat(4,minmax(0,1fr))}
.ms .meet a{display:flex;align-items:center;justify-content:space-between;gap:1rem;padding:1.5rem 1.4rem;text-decoration:none;border-left:1px solid var(--ms-line);transition:background .2s}
.ms .meet a:last-child{border-right:1px solid var(--ms-line)}
.ms .meet a:hover{background:rgba(126,12,30,.45)}
.ms .meet .k{display:block;font:600 .66rem/1 var(--ms-caps);letter-spacing:.2em;text-transform:uppercase;color:var(--ms-gold);margin-bottom:.55rem}
.ms .meet b{display:block;font:700 1.6rem/1 var(--ms-goth);color:var(--ms-bone)}
.ms .meet i{font-style:normal;font:400 1.3rem/1 var(--ms-book);color:var(--ms-gold)}

/* choose your country */
.ms .lands{padding:clamp(3rem,6vw,4.5rem) 0 0}
.ms .lands h2{text-align:center;font-weight:800;font-size:clamp(2rem,3.6vw,3rem);margin:0 0 1.6rem}
.ms .lands ul{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:12px}
.ms .lands a{display:block;text-align:center;text-decoration:none;padding:1.2rem .6rem 1.1rem;border:1px solid var(--ms-line);background:linear-gradient(180deg,rgba(27,18,25,.7),rgba(7,5,9,.4));transition:border-color .2s,background .2s}
.ms .lands a:hover{border-color:var(--ms-gold);background:rgba(126,12,30,.35)}
.ms .lands b{display:block;font:700 1.5rem/1.05 var(--ms-goth);color:var(--ms-bone)}
.ms .lands span{display:block;margin-top:.45rem;font:600 .64rem/1.3 var(--ms-caps);letter-spacing:.16em;text-transform:uppercase;color:var(--ms-gold)}

/* ---------- argument: heading beside prose ---------- */
.ms .why{padding:clamp(5rem,9vw,8rem) 0}
.ms .why > .wrap{display:grid;grid-template-columns:1fr 1.1fr;gap:clamp(2rem,6vw,6rem);align-items:center}
.ms .why h2{font-weight:800;font-size:clamp(2.6rem,4.8vw,4.4rem);line-height:.98;margin:0}
.ms .prose p{margin:0 0 1.15rem;color:#d4c7cc}
.ms .prose .dropcap::first-letter{font:800 4.2em/.78 var(--ms-goth);float:left;margin:.06em .1em 0 0;color:var(--ms-blood-hi)}
.ms .prose .sig{font-style:italic;font-size:1.2rem;line-height:1.4;color:var(--ms-gold-hi);margin:1.6rem 0 0}
.ms .prose a{color:var(--ms-gold-hi);text-decoration-color:rgba(225,195,138,.45);text-underline-offset:3px}

/* ---------- members, in arched windows (the platform fills the grid) ---------- */
.ms .ms-members{padding:clamp(4.5rem,8vw,7rem) 0;background:linear-gradient(180deg,transparent,rgba(126,12,30,.18) 50%,transparent)}
.ms .section-head{text-align:center;margin-bottom:2.6rem}
.ms .section-head h2{font-weight:800;font-size:clamp(2.4rem,4.4vw,3.8rem);line-height:1;margin:0 0 .6rem}
.ms .section-head p{margin:0 auto;max-width:36rem}
.ms .ms-members .member-grid .mem-card img{clip-path:url(#arch)}
.ms .member-grid--blur .mem-card img{filter:blur(7px) saturate(.85)}
.ms .ms-members .cta{display:flex;justify-content:center;gap:.8rem;margin-top:2rem;flex-wrap:wrap}

/* ---------- where members are (country pages) ---------- */
.ms .places{padding:clamp(4rem,7vw,6rem) 0;border-top:1px solid var(--ms-line)}
.ms .places > .wrap{display:grid;grid-template-columns:.9fr 1.1fr;gap:clamp(2rem,6vw,6rem);align-items:start}
.ms .places h2{font-weight:800;font-size:clamp(2.2rem,4vw,3.4rem);line-height:1;margin:0 0 1rem}
.ms .places ul{list-style:none;margin:0;padding:0;columns:2;column-gap:2rem}
.ms .places li{break-inside:avoid;padding:.55rem 0 .55rem 1.4rem;border-bottom:1px solid var(--ms-line);position:relative;color:var(--ms-bone)}
.ms .places li::before{content:"";position:absolute;left:.1rem;top:1.05rem;width:7px;height:7px;transform:rotate(45deg);background:var(--ms-blood-hi)}

/* ---------- the house rules ---------- */
.ms .rules{padding:clamp(5rem,9vw,8rem) 0;border-top:1px solid var(--ms-line)}
.ms .rules .list{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));border:1px solid var(--ms-line)}
.ms .rule{padding:2.4rem 2rem 2.2rem;border-right:1px solid var(--ms-line);background:linear-gradient(180deg,rgba(27,18,25,.6),transparent)}
.ms .rule:last-child{border-right:0}
.ms .rule .n{font:800 3.4rem/1 var(--ms-goth);color:var(--ms-blood-hi);display:block;margin-bottom:.9rem}
.ms .rule h3{font:700 1.05rem/1.3 var(--ms-caps);letter-spacing:.12em;text-transform:uppercase;color:var(--ms-bone);margin:0 0 .8rem}
.ms .rule p{margin:0;color:#cdbfc5}

/* ---------- photo band ---------- */
.ms .band{position:relative;min-height:600px;display:grid;align-items:center;overflow:hidden;border-top:1px solid var(--ms-line);border-bottom:1px solid var(--ms-line)}
.ms .band > img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:75% 30%;opacity:.6}
.ms .band::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,rgba(7,5,9,.97) 0,rgba(7,5,9,.86) 45%,rgba(7,5,9,.2) 100%)}
.ms .band > .wrap{position:relative;z-index:2;padding:5rem 0}
.ms .band h2{font-weight:800;font-size:clamp(2.4rem,4.4vw,3.8rem);line-height:1;margin:0 0 1.4rem;max-width:32rem}
.ms .band ul{list-style:none;margin:0;padding:0;max-width:33rem}
.ms .band li{padding:.85rem 0 .85rem 2rem;border-top:1px solid var(--ms-line);position:relative;color:#d6c9ce}
.ms .band li::before{content:"";position:absolute;left:.2rem;top:1.3rem;width:8px;height:8px;transform:rotate(45deg);background:var(--ms-blood-hi)}
.ms .band li b{color:var(--ms-bone);font-weight:500}
.ms .band .note{margin:1.4rem 0 0;max-width:33rem;font-style:italic;color:var(--ms-gold-hi)}

/* ---------- long reading (guides and niche pages) ---------- */
.ms .read{padding:clamp(4rem,8vw,6.5rem) 0}
.ms .read > .wrap{display:grid;grid-template-columns:minmax(0,1fr) 300px;gap:clamp(2rem,6vw,5rem);align-items:start}
.ms .read article{max-width:44rem}
.ms .read h2{font-weight:800;font-size:clamp(2rem,3.4vw,2.8rem);line-height:1.04;margin:2.6rem 0 1rem}
.ms .read h2:first-child{margin-top:0}
.ms .read h3{font:700 1rem/1.35 var(--ms-caps);letter-spacing:.12em;text-transform:uppercase;color:var(--ms-bone);margin:2rem 0 .7rem}
.ms .read p,.ms .read li{color:#d4c7cc}
.ms .read ul,.ms .read ol{padding-left:1.2rem;margin:0 0 1.2rem}
.ms .read li{margin-bottom:.5rem}
.ms .read li::marker{color:var(--ms-blood-hi)}
.ms .read aside{position:sticky;top:96px;border:1px solid var(--ms-line);background:linear-gradient(180deg,rgba(27,18,25,.85),rgba(14,9,14,.85));padding:1.6rem 1.4rem}
.ms .read aside h2{font-size:1.7rem;margin:0 0 .6rem}
.ms .read aside p{font-size:1rem;margin:0 0 1rem}
.ms .read aside .btn{width:100%;margin-top:.5rem}
.ms .pull{margin:2.2rem 0;padding:1.4rem 0 1.4rem 1.6rem;border-left:2px solid var(--ms-blood-hi);font-style:italic;font-size:1.3rem;line-height:1.45;color:var(--ms-gold-hi)}
.ms .warn{margin:2rem 0;padding:1.4rem 1.5rem;border:1px solid rgba(181,20,44,.6);background:rgba(126,12,30,.18)}
.ms .warn h3{margin-top:0;color:var(--ms-bone)}
.ms .warn p:last-child{margin-bottom:0}

/* ---------- questions ---------- */
.ms .faq{padding:clamp(5rem,9vw,8rem) 0;border-top:1px solid var(--ms-line)}
.ms .faq > .wrap{display:grid;grid-template-columns:.8fr 1.2fr;gap:clamp(2rem,6vw,6rem)}
.ms .faq h2{font-weight:800;font-size:clamp(2.4rem,4vw,3.4rem);line-height:1;margin:0;position:sticky;top:110px}
.ms details{border-top:1px solid var(--ms-line)}
.ms details:last-of-type{border-bottom:1px solid var(--ms-line)}
.ms summary{list-style:none;cursor:pointer;padding:1.4rem 3rem 1.4rem 0;position:relative;font:700 .95rem/1.4 var(--ms-caps);letter-spacing:.1em;text-transform:uppercase;color:var(--ms-bone)}
.ms summary::-webkit-details-marker{display:none}
.ms summary::after{content:"+";position:absolute;right:.3rem;top:50%;transform:translateY(-50%);font:400 1.6rem/1 var(--ms-book);color:var(--ms-gold)}
.ms details[open] summary::after{content:"\2013"}
.ms details p{margin:0 0 1.4rem;color:#d0c3c8;max-width:40rem}

/* ---------- more to read: links to the other pages ---------- */
.ms .next{padding:clamp(3.5rem,6vw,5rem) 0;border-top:1px solid var(--ms-line)}
.ms .next h2{font-weight:800;font-size:clamp(1.9rem,3vw,2.5rem);margin:0 0 1.4rem}
.ms .next ul{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}
.ms .next a{display:block;height:100%;text-decoration:none;padding:1.3rem 1.3rem 1.2rem;border:1px solid var(--ms-line);transition:border-color .2s,background .2s}
.ms .next a:hover{border-color:var(--ms-gold);background:rgba(126,12,30,.3)}
.ms .next b{display:block;font:700 1.4rem/1.1 var(--ms-goth);color:var(--ms-bone);margin-bottom:.4rem}
.ms .next span{display:block;font-size:.98rem;color:var(--ms-ash)}

/* ---------- close: one more arch, and the meet buttons again ---------- */
.ms .close{padding:clamp(5rem,9vw,8rem) 0 clamp(5rem,9vw,7rem);text-align:center;background:radial-gradient(45% 60% at 50% 45%,rgba(126,12,30,.5),transparent 70%)}
.ms .close .portal{position:relative;width:min(300px,70vw);aspect-ratio:3/4;margin:0 auto 2.4rem}
.ms .close .portal .pane{position:absolute;inset:0;background:radial-gradient(70% 60% at 50% 70%,rgba(181,20,44,.55),rgba(13,9,14,.95) 75%)}
.ms .close .portal h2{position:absolute;inset:auto 0 22%;margin:0;font-weight:800;font-size:clamp(2.4rem,4.6vw,3.6rem);line-height:.95}
.ms .close .portal h2 em{font-style:normal;display:block;color:var(--ms-gold-hi);font-size:.62em;margin-top:.25em}
.ms .close p{margin:0 auto 1.8rem;max-width:30rem}
.ms .close .row{display:flex;justify-content:center;flex-wrap:wrap;gap:.7rem}
.ms .close small{display:block;margin-top:1.2rem;font:600 .68rem/1 var(--ms-caps);letter-spacing:.24em;text-transform:uppercase;color:var(--ms-quiet)}

/* ---------- footer and the phone join bar ---------- */
.ms .ms-foot{border-top:1px solid var(--ms-line);padding:2.6rem 0 6rem;background:#050307;font-size:.9rem}
.ms .ms-foot .wrap{display:flex;flex-wrap:wrap;align-items:center;gap:1.4rem 2rem}
.ms .ms-foot img{height:56px;width:auto}
.ms .ms-foot nav{display:flex;flex-wrap:wrap;gap:1.2rem}
.ms .ms-foot nav a{text-decoration:none;color:var(--ms-ash)}
.ms .ms-foot nav a:hover{color:var(--ms-gold-hi)}
.ms .ms-foot .legal{flex-basis:100%;margin:0;opacity:.65}
.ms .joinbar{display:none}

/* ---------- added 21 Oct: picture crops, answer paragraphs, help, guides, glossary ---------- */
.ms .hero-art img.fx-l{object-position:30% 18%}
.ms .hero-art img.fx-r{object-position:70% 18%}
.ms .hero-art img.fx-mid{object-position:50% 50%}
.ms .answer{font-size:1.16rem;line-height:1.62;color:var(--ms-bone)}
.ms .read a,.ms .faq a,.ms .helpline a,.ms .gloss a{color:var(--ms-gold-hi);text-decoration-color:rgba(225,195,138,.45);text-underline-offset:3px}
.ms .byline{font:600 .7rem/1.3 var(--ms-caps);letter-spacing:.18em;text-transform:uppercase;color:var(--ms-gold);margin:0 0 1.6rem}
.ms .band--plain{background:radial-gradient(55% 80% at 88% 45%,rgba(126,12,30,.5),transparent 70%),var(--ms-void)}
.ms .helpline{padding:clamp(3.5rem,6vw,5rem) 0;border-top:1px solid var(--ms-line)}
.ms .helpline h2{font-weight:800;font-size:clamp(1.9rem,3vw,2.6rem);line-height:1.04;margin:0 0 1rem}
.ms .helpline p{color:#d4c7cc;max-width:46rem}
.ms .read table{width:100%;border-collapse:collapse;margin:0 0 1.6rem;font-size:1rem}
.ms .read th,.ms .read td{text-align:left;vertical-align:top;padding:.75rem .8rem .75rem 0;border-bottom:1px solid var(--ms-line)}
.ms .read th{font:700 .72rem/1.2 var(--ms-caps);letter-spacing:.14em;text-transform:uppercase;color:var(--ms-gold)}
.ms .read td:first-child{color:var(--ms-bone);padding-right:1.4rem}
.ms .gloss{padding:clamp(4rem,8vw,6.5rem) 0}
.ms .gloss .intro{max-width:46rem}
.ms .gloss .jump{display:flex;flex-wrap:wrap;gap:10px;margin:1.6rem 0 1rem;padding:0;list-style:none}
.ms .gloss .jump a{display:block;padding:.65rem 1rem;border:1px solid var(--ms-line);text-decoration:none;font:700 .72rem/1 var(--ms-caps);letter-spacing:.16em;text-transform:uppercase;color:var(--ms-bone)}
.ms .gloss .jump a:hover{border-color:var(--ms-gold);background:rgba(126,12,30,.3)}
.ms .gloss h2{font-weight:800;font-size:clamp(2rem,3.4vw,2.8rem);line-height:1;margin:3rem 0 1rem;scroll-margin-top:110px}
.ms .gloss dl{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:0 2.6rem;margin:0}
.ms .gloss dl > div{padding:1.1rem 0 1.2rem;border-top:1px solid var(--ms-line)}
.ms .gloss dt{font:700 1.45rem/1.1 var(--ms-goth);color:var(--ms-bone);margin:0 0 .45rem;scroll-margin-top:110px}
.ms .gloss dd{margin:0;color:#d4c7cc}

/* ---------- header fit (21 Oct, after the menu went live): the logo is 5.3:1, so the five links need room ---------- */
@media (min-width:1024px){
  .ms .ms-top .wrap{gap:1.2rem}
  .ms .ms-top .logo img{max-width:240px}
  .ms .ms-top .hs-canvas-nav__menu--desktop{gap:1.15rem;flex-wrap:nowrap}
  .ms .ms-top .hs-canvas-nav__menu--desktop>.hs-canvas-nav__item>.hs-canvas-nav__link{font-size:.7rem;letter-spacing:.12em;white-space:nowrap}
}
@media (min-width:1024px) and (max-width:1280px){
  .ms .ms-top .wrap{gap:1rem}
  .ms .ms-top .logo img{max-width:190px}
  .ms .ms-top .hs-canvas-nav__menu--desktop{gap:.8rem}
  .ms .ms-top .hs-canvas-nav__menu--desktop>.hs-canvas-nav__item>.hs-canvas-nav__link{font-size:.64rem;letter-spacing:.06em}
  .ms .ms-top .acts{gap:.45rem}
  .ms .ms-top .acts .btn{padding-left:.9rem;padding-right:.9rem;font-size:.66rem}
}
@media (max-width:1023px){
  .ms .ms-top .hs-canvas-nav__toggle{margin-left:auto;margin-right:.2rem}
}
@media (max-width:520px){
  .ms .ms-top .logo img{max-width:40vw}
}

/* ---------- the live sign-up card adds a members row above the first question: hold its room too, or the page jumps
   (measured on the live page 21 Oct: the first question moves +64px on a phone, +52px from 60rem). Same 3s hold as the pattern's. */
@media (scripting: enabled){
  .ms .signup-card:not(.hub-signup-live) .signup-card-form::before{animation:ms-card-hold 0s 3s backwards}
}
@media (scripting: enabled) and (min-width:60rem){
  .ms .signup-card:not(.hub-signup-live) .signup-card-form::before{animation-name:ms-card-hold-wide}
}
@keyframes ms-card-hold{from{min-height:108px}}
@keyframes ms-card-hold-wide{from{min-height:96px}}

/* ---------- full hero picture (21 Oct, partner: "is it possible to use a full hero image ... the fuller image would look
   better"): no arch window on any screen; from 901px the photo fills the right of the hero, header to meet bar, and melts
   into the page on every side, the way the BDSM state sites' heroes do. */
.ms .hero-art .arch-frame{display:none}
.ms .hero-art img.arch{clip-path:none}
@media (min-width:901px){
  .ms .ms-hero > .wrap{position:relative;grid-template-columns:minmax(0,34rem) 1fr}
  .ms .hero-words{position:relative;z-index:2}
  .ms .hero-art{position:absolute;z-index:1;top:calc(-1 * clamp(2.6rem,5vw,4.5rem));bottom:0;right:0;width:min(60%,780px);max-height:none;aspect-ratio:auto;justify-self:auto}
  .ms .hero-art img{object-position:50% 12%;-webkit-mask-image:linear-gradient(90deg,transparent 0,#000 30%,#000 66%,transparent 100%),linear-gradient(180deg,transparent 0,#000 8%,#000 74%,transparent 100%);-webkit-mask-composite:source-in;mask-image:linear-gradient(90deg,transparent 0,#000 30%,#000 66%,transparent 100%),linear-gradient(180deg,transparent 0,#000 8%,#000 74%,transparent 100%);mask-composite:intersect}
  .ms .hero-art .glow{inset:8% 8% 14% 22%}
}

@media (max-width:1060px){
  .ms .meet .wrap{grid-template-columns:repeat(2,minmax(0,1fr))}
  .ms .meet a:nth-child(2){border-right:1px solid var(--ms-line)}
  .ms .meet a:nth-child(n+3){border-top:1px solid var(--ms-line)}
  .ms .lands ul{grid-template-columns:repeat(3,minmax(0,1fr))}
}
@media (max-width:900px){
  .ms .ms-top .wrap{min-height:72px}
  .ms .ms-hero{padding-top:0}
  .ms .ms-hero > .wrap{grid-template-columns:1fr;gap:0;width:100%}
  .ms .hero-art{grid-row:1;width:100%;max-height:none;aspect-ratio:auto;height:min(46vh,430px)}
  .ms .hero-art .arch-frame{display:none}
  .ms .hero-art img{clip-path:none}
  .ms .hero-art::after{content:"";position:absolute;inset:0;background:linear-gradient(0deg,var(--ms-void) 0,rgba(7,5,9,.55) 35%,rgba(7,5,9,0) 65%)}
  .ms .hero-words{grid-row:2;padding:0 1.2rem;margin-top:-7.5rem;position:relative;z-index:2}
  .ms .ms-hero h1{font-size:3rem}
  .ms .ms-hero .lede{font-size:1.05rem;margin-bottom:1.2rem}
  .ms .hero-words .signup-card{max-width:none}
  .ms .meet{margin-top:2rem}
  .ms .meet .wrap{width:100%}
  .ms .meet a{padding:1rem .9rem}
  .ms .meet b{font-size:1.35rem}
  .ms .why > .wrap,.ms .faq > .wrap,.ms .places > .wrap,.ms .read > .wrap{grid-template-columns:1fr}
  .ms .faq h2{position:static}
  .ms .read aside{position:static}
  .ms .rules .list,.ms .next ul,.ms .gloss dl{grid-template-columns:1fr}
  .ms .rule{border-right:0;border-bottom:1px solid var(--ms-line)}
  .ms .rule:last-child{border-bottom:0}
  .ms .band::after{background:linear-gradient(0deg,rgba(7,5,9,.97) 0,rgba(7,5,9,.88) 60%,rgba(7,5,9,.55) 100%)}
  .ms .lands ul{grid-template-columns:repeat(2,minmax(0,1fr))}
  .ms .joinbar{display:flex;position:fixed;left:0;right:0;bottom:0;z-index:40;align-items:center;justify-content:space-between;gap:1rem;padding:.7rem 1rem;background:rgba(5,3,7,.96);border-top:1px solid var(--ms-line)}
  .ms .joinbar p{margin:0;font:700 1.15rem/1.1 var(--ms-goth);color:var(--ms-bone)}
  .ms .joinbar p span{display:block;font:500 .78rem/1.3 var(--ms-book);color:var(--ms-ash)}
}
@media (max-width:600px){
  .ms .places ul{columns:1}
}
@media (max-width:520px){
  .ms .ms-top .acts .btn-ghost{display:none}
}

/* the svg that carries the #arch clip takes no space */
.ms-defs{position:absolute;width:0;height:0;overflow:hidden}

/* === pattern signup-card@8 (library v307; pinned by hand for the Mistress Slaves build -- adopt a newer version by replacing this block, never by adding a second) === */
/* signup-card v8 - tokens only, selectors prefixed */
/* The card sits in an opener's call-to-action place: it takes a width of its
   own and leaves the page's layout to the opener. */
.signup-card {
  /* Answer rows: over the 44px floor, sized for a thumb. */
  --signup-card-target: 56px;
  width: 100%;
  max-width: 24rem;
  text-align: left;
}
.signup-card-form {
  min-width: 0;
  margin: 0;
  padding: var(--space-4) var(--space-4) var(--space-5);
  background: var(--color-surface);
  color: var(--color-text);
  border: var(--card-border);
  border-radius: var(--card-radius);
  box-shadow: var(--card-shadow);
}
/* --color-text, not --color-heading: a heading on a card is not on the page ground. */
.signup-card-title,
.signup-card-q {
  margin: 0;
  padding: 0;
  font-family: var(--font-heading);
  font-weight: var(--weight-display, 700);
  line-height: calc(1.2 * var(--heading-leading, 1));
  letter-spacing: calc(-0.005em + var(--heading-tracking, 0) * 1em);
  color: var(--color-text);
}
@supports (line-height: 1cap) {
  .signup-card-title,
  .signup-card-q {
    line-height: calc(max(1.2em, 1.45cap) * var(--heading-leading, 1));
  }
}
.signup-card-title {
  font-size: calc(clamp(1.375rem, 1.2rem + .8vw, 1.75rem) * var(--type-scale, 1));
}
.signup-card-q {
  margin-bottom: var(--space-3);
  font-size: calc(1.1875rem * var(--type-scale, 1));
}
/* A new step's question takes focus for screen readers; it is not a control,
so it draws no ring. */
.signup-card-q:focus {
  outline: none;
}
.signup-card-step {
  min-width: 0;
  margin: var(--space-6) 0 0;
  padding: 0;
  border: 0;
}
.signup-card-title + .signup-card-step {
  margin-top: var(--space-4);
}
.signup-card-help {
  margin: calc(-1 * var(--space-2)) 0 var(--space-3);
  font-size: .9375rem;
  color: var(--color-text-soft);
}
/* Answers: the input is inside its label, so the whole row is the target. */
.signup-card-opts {
  display: grid;
  gap: var(--space-3);
  margin: 0;
  padding: 0;
  list-style: none;
}
/* Two "I am" answers side by side while both fit; an answer whose longest
   word is wider than half the card takes the whole row, and so does the
   other. width: 100% is not the width: it caps the automatic minimum at the
   row, so a word wider than the row breaks inside its tile. Each half gives
   up half the gap and 1px, or two halves rounded up wrap. */
.signup-card-opts--two {
  display: flex;
  flex-wrap: wrap;
}
.signup-card-opt {
  min-width: 0;
}
.signup-card-opts--two > .signup-card-opt {
  flex: 1 1 calc(50% - var(--space-3) / 2 - 1px);
  width: 100%;
  min-width: auto;
}
.signup-card-opts--two .signup-card-opt-face {
  gap: var(--space-2);
}
.signup-card-opt label {
  position: relative;
  display: block;
  cursor: pointer;
}
/* Off-screen but focusable, so the row takes the keyboard and the group is
still announced. display: none would remove both. */
.signup-card-opt input,
.signup-card-other input {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  border: 0;
  overflow: hidden;
  white-space: nowrap;
  clip-path: inset(50%);
}
.signup-card-opt-face {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  min-height: var(--signup-card-target);
  padding: var(--space-3) var(--space-4);
  background: var(--color-surface);
  /* The border is the only thing marking this as a control. */
  border: 2px solid color-mix(in srgb, var(--color-text) 22%, var(--color-surface));
  border-radius: var(--btn-radius);
  font-weight: 700;
  line-height: 1.25;
}
/* A word wider than a whole row breaks rather than leave its tile. */
.signup-card-opt-face > span:first-child {
  min-width: 0;
  overflow-wrap: break-word;
}
.signup-card-opt:hover .signup-card-opt-face {
  border-color: color-mix(in srgb, var(--color-primary) 70%, var(--color-surface));
}
.signup-card-opt input:checked + .signup-card-opt-face {
  border-color: var(--color-primary);
  background: color-mix(in srgb, var(--color-primary) 9%, var(--color-surface));
}
.signup-card-tick {
  flex: none;
  display: grid;
  place-items: center;
  width: 22px;
  height: 22px;
  border: 2px solid color-mix(in srgb, var(--color-text) 35%, var(--color-surface));
  border-radius: 50%;
}
.signup-card-opt input:checked + .signup-card-opt-face .signup-card-tick {
  background: var(--color-primary);
  border-color: var(--color-primary);
  color: var(--color-on-primary);
}
.signup-card-opt input:checked + .signup-card-opt-face .signup-card-tick::before,
.signup-card-other input:checked + span .signup-card-tick::before {
  content: "";
  width: 5px;
  height: 10px;
  margin-top: -2px;
  border: solid currentColor;
  border-width: 0 2.5px 2.5px 0;
  transform: rotate(45deg);
}
/* The third answer to "who are you": a real choice, drawn small. */
.signup-card-other {
  position: relative;
  display: inline-flex;
  margin-top: var(--space-2);
  cursor: pointer;
}
.signup-card-other > span {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  min-height: 44px;
  padding: 0 var(--space-1);
  font-weight: 600;
  text-decoration: underline;
  text-underline-offset: 3px;
}
.signup-card-other .signup-card-tick {
  display: none;
}
.signup-card-other input:checked + span {
  text-decoration: none;
}
.signup-card-other input:checked + span .signup-card-tick {
  display: grid;
  background: var(--color-primary);
  border-color: var(--color-primary);
  color: var(--color-on-primary);
}
/* Fields. 16px text, or iOS zooms the page on focus. */
.signup-card-dob {
  display: grid;
  grid-template-columns: 1fr 1fr 1.4fr;
  gap: var(--space-2);
  /* A label that wraps must not push its box out of line with the others. */
  align-items: end;
}
.signup-card-field {
  display: grid;
  gap: var(--space-1);
  min-width: 0;
}
.signup-card-field > span {
  font-size: .9375rem;
  font-weight: 700;
}
.signup-card-field input,
.signup-card-field select {
  box-sizing: border-box;
  width: 100%;
  min-height: 52px;
  padding: 0 var(--space-3);
  font: inherit;
  font-size: 1rem;
  color: var(--color-text);
  background: var(--color-surface);
  border: 2px solid color-mix(in srgb, var(--color-text) 30%, var(--color-surface));
  border-radius: var(--btn-radius);
}
.signup-card-consent {
  display: grid;
  grid-template-columns: 24px 1fr;
  gap: var(--space-3);
  align-items: start;
  margin-top: var(--space-4);
  font-size: .875rem;
}
.signup-card-consent input {
  width: 22px;
  height: 22px;
  margin: 2px 0 0;
  accent-color: var(--color-primary);
}
.signup-card-consent a,
.signup-card-foot a {
  color: var(--color-text);
  font-weight: 700;
  text-underline-offset: 2px;
}
.signup-card-actions {
  display: grid;
  gap: var(--space-3);
  margin-top: var(--space-6);
}
.signup-card-submit {
  width: 100%;
  min-height: var(--signup-card-target);
  padding: 0 var(--space-5);
  border: 0;
  border-radius: var(--btn-radius);
  background: var(--color-primary);
  color: var(--color-on-primary);
  font-family: var(--font-body);
  font-size: 1.0625rem;
  font-weight: 700;
  cursor: pointer;
}
.signup-card-submit:hover {
  background: var(--color-primary-dark);
}
.signup-card-note {
  margin: 0;
  text-align: center;
  font-size: .875rem;
  color: var(--color-text-soft);
}
.signup-card-foot {
  margin: var(--space-4) 0 0;
  padding-top: var(--space-4);
  border-top: 1px solid var(--color-rule);
  text-align: center;
  font-size: .9375rem;
  color: var(--color-text-soft);
}
.signup-card-opt input:focus-visible + .signup-card-opt-face,
.signup-card-other input:focus-visible + span,
.signup-card-field input:focus-visible,
.signup-card-field select:focus-visible,
.signup-card-consent input:focus-visible,
.signup-card-submit:focus-visible,
.signup-card-consent a:focus-visible,
.signup-card-foot a:focus-visible {
  outline: 3px solid var(--color-focus);
  outline-offset: 2px;
}
/* Built by the behaviour. Nothing below is in the authored page; the
behaviour adds it, and these rules draw it. */
.signup-card-form {
  scroll-margin-top: var(--space-2);
}
.signup-card-top {
  display: grid;
  grid-template-columns: 44px 1fr auto;
  align-items: center;
  gap: var(--space-3);
  min-height: 44px;
}
.signup-card-back {
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  margin-left: calc(-1 * var(--space-2));
  padding: 0;
  background: none;
  border: 0;
  border-radius: var(--btn-radius);
  color: var(--color-text);
  cursor: pointer;
}
.signup-card-back::before {
  content: "";
  width: 10px;
  height: 10px;
  margin-left: 4px;
  border: solid currentColor;
  border-width: 0 0 2.5px 2.5px;
  transform: rotate(45deg);
}
.signup-card-bar {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: 1fr;
  gap: var(--space-1);
}
.signup-card-seg {
  position: relative;
  height: 6px;
  overflow: hidden;
  border-radius: var(--chip-radius);
  background: color-mix(in srgb, var(--color-text) 14%, var(--color-surface));
}
.signup-card-seg::before {
  content: "";
  position: absolute;
  inset: 0 auto 0 0;
  width: 0;
  background: var(--color-primary);
}
.signup-card-seg[data-hub-signup-done]::before {
  width: 100%;
}
.signup-card-seg[data-hub-signup-now]::before {
  width: 35%;
}
.signup-card-seg::after {
  content: "";
  position: absolute;
  inset: 0;
  transform: translateX(-100%);
  background: linear-gradient(90deg, transparent, color-mix(in srgb, var(--color-surface) 70%, transparent), transparent);
}
.signup-card-count {
  font-size: .875rem;
  color: var(--color-text-soft);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
/* The members: faces in the card on a phone, a row beside it when wide. */
.signup-card-members {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  min-height: 52px;
  margin-top: var(--space-3);
  padding: var(--space-2) var(--space-3);
  border-radius: var(--chip-radius);
  background: color-mix(in srgb, var(--color-primary) 7%, var(--color-surface));
}
.signup-card-faces {
  display: flex;
  flex: none;
  padding-left: var(--space-2);
}
.signup-card-face {
  width: 2.25rem;
  height: 2.25rem;
  margin-left: calc(-1 * var(--space-2));
  overflow: hidden;
  border: 2px solid var(--color-surface);
  border-radius: 50%;
  background: var(--color-surface-soft);
}
.signup-card-face img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 1;
  object-fit: cover;
}
.signup-card-members p {
  margin: 0;
  font-size: .875rem;
  font-weight: 700;
  line-height: 1.35;
}
.signup-card-summary {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  margin: var(--space-2) 0 0;
  font-size: .875rem;
  color: var(--color-text-soft);
}
.signup-card-summary::before {
  content: "";
  flex: none;
  width: 5px;
  height: 9px;
  margin: 0 var(--space-1) 2px;
  border: solid var(--color-primary);
  border-width: 0 2px 2px 0;
  transform: rotate(45deg);
}
/* Several answers to "looking for": a square tick, not a round one. */
.signup-card-opt input[type="checkbox"] + .signup-card-opt-face .signup-card-tick {
  border-radius: min(var(--btn-radius), 6px);
}
/* Interests. */
.signup-card-chips {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  margin: 0;
  padding: 0;
  list-style: none;
}
.signup-card-chip label {
  position: relative;
  display: block;
  cursor: pointer;
}
.signup-card-chip input {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  border: 0;
  overflow: hidden;
  white-space: nowrap;
  clip-path: inset(50%);
}
.signup-card-chip span {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  min-height: 44px;
  padding: 0 var(--space-4);
  background: var(--color-surface);
  border: 2px solid color-mix(in srgb, var(--color-text) 22%, var(--color-surface));
  border-radius: var(--chip-radius);
  font-size: .9375rem;
  font-weight: 600;
}
.signup-card-chip span::before {
  content: "+";
  font-weight: 400;
  color: var(--color-text-soft);
}
.signup-card-chip input:checked + span {
  background: var(--color-primary);
  border-color: var(--color-primary);
  color: var(--color-on-primary);
}
.signup-card-chip input:checked + span::before {
  content: "";
  width: 5px;
  height: 9px;
  margin-right: 2px;
  border: solid currentColor;
  border-width: 0 2px 2px 0;
  transform: rotate(45deg) translateY(-1px);
}
.signup-card-chip input:disabled + span {
  cursor: not-allowed;
  border-style: dashed;
  color: var(--color-text-soft);
}
.signup-card-more {
  min-height: 44px;
  margin-top: var(--space-2);
  padding: 0 var(--space-1);
  background: none;
  border: 0;
  color: var(--color-text);
  font: inherit;
  font-weight: 600;
  text-decoration: underline;
  text-underline-offset: 3px;
  cursor: pointer;
}
.signup-card-tally {
  margin: var(--space-3) 0 0;
  font-size: .875rem;
  color: var(--color-text-soft);
}
/* The date of birth: the reward, and the wheel where a page asks for one. */
.signup-card-reward {
  display: inline-flex;
  margin: var(--space-3) 0 0;
  padding: var(--space-1) var(--space-3);
  border-radius: var(--chip-radius);
  background: color-mix(in srgb, var(--color-primary) 10%, var(--color-surface));
  font-size: .9375rem;
  font-weight: 700;
}
.signup-card-wheels {
  display: grid;
  grid-template-columns: 1fr 1.4fr 1.3fr;
  gap: var(--space-2);
}
.signup-card-wheel-col {
  display: grid;
  gap: var(--space-1);
  min-width: 0;
}
.signup-card-wheel-label {
  font-size: .9375rem;
  font-weight: 700;
  text-align: center;
}
/* The band is the background, so it stays put while the rows scroll. Five
44px rows show, two of them spacers above and below: keep the band's 88px
and 132px in step with that. */
.signup-card-wheel {
  height: 220px;
  margin: 0;
  padding: 0;
  overflow-y: auto;
  overscroll-behavior: contain;
  scroll-snap-type: y mandatory;
  scrollbar-width: none;
  list-style: none;
  border-radius: var(--btn-radius);
  background: linear-gradient(transparent 88px, color-mix(in srgb, var(--color-primary) 12%, var(--color-surface)) 88px 132px, transparent 132px);
  mask-image: linear-gradient(to bottom, transparent, var(--color-text) 30%, var(--color-text) 70%, transparent);
}
.signup-card-wheel::-webkit-scrollbar {
  width: 0;
  height: 0;
}
.signup-card-wheel li {
  display: grid;
  place-items: center;
  height: 44px;
  scroll-snap-align: center;
  font-size: 1.0625rem;
  font-variant-numeric: tabular-nums;
  color: var(--color-text-soft);
  cursor: pointer;
}
.signup-card-wheel li[aria-selected="true"] {
  color: var(--color-text);
  font-weight: 700;
}
/* Errors say what is missing; a dashed edge marks where, never colour alone. */
.signup-card-error {
  margin: var(--space-3) 0 0;
  padding: var(--space-2) var(--space-3);
  border-left: 4px solid var(--color-text);
  background: var(--color-surface-soft);
  font-size: .9375rem;
  font-weight: 600;
}
.signup-card-opt input[aria-invalid] + .signup-card-opt-face,
/* Where the visitor lives: country, postal code or region, town. One rhythm
   between them, wide enough that a focus ring never meets the next label. */
.signup-card-lists {
  display: grid;
  gap: var(--space-4);
}
.signup-card-step > .signup-card-field + .signup-card-field,
.signup-card-step > .signup-card-field + .signup-card-postal,
.signup-card-step > .signup-card-field + .signup-card-lists,
.signup-card-step > .signup-card-postal + .signup-card-lists {
  margin-top: var(--space-4);
}
/* The towns offered as the visitor types: a raised list over the card, under
   the field, so the card keeps its height. */
.signup-card-place {
  position: relative;
}
.signup-card-places {
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  z-index: 3;
  margin: var(--space-1) 0 0;
  padding: var(--space-1);
  background: var(--color-surface);
  border: 1px solid var(--color-rule);
  border-radius: var(--btn-radius);
  box-shadow: var(--card-shadow);
}
/* How many towns there are, and that the list goes on. */
.signup-card-places-count {
  margin: 0;
  padding: var(--space-1) var(--space-3);
  font-size: .8125rem;
  color: var(--color-text-soft);
}
/* Four and a half rows: the cut row says the list scrolls. */
.signup-card-places-list {
  max-height: calc(4.5 * 44px);
  margin: 0;
  padding: 0;
  overflow-y: auto;
  overscroll-behavior: contain;
  list-style: none;
}
.signup-card-places li {
  display: flex;
  align-items: center;
  min-height: 44px;
  padding: 0 var(--space-3);
  border-radius: var(--btn-radius);
  cursor: pointer;
}
.signup-card-places li:hover,
.signup-card-places li[aria-selected="true"] {
  background: var(--color-surface-soft);
  box-shadow: inset 3px 0 0 var(--color-primary);
}
.signup-card-field input[aria-invalid],
.signup-card-field select[aria-invalid] {
  border-style: dashed;
  border-color: var(--color-text);
}
.signup-card-next {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  width: 100%;
  min-height: var(--signup-card-target);
  padding: 0 var(--space-5);
  border: 0;
  border-radius: var(--btn-radius);
  background: var(--color-primary);
  color: var(--color-on-primary);
  font-family: var(--font-body);
  font-size: 1.0625rem;
  font-weight: 700;
  cursor: pointer;
}
.signup-card-next::after {
  content: "";
  width: 8px;
  height: 8px;
  border: solid currentColor;
  border-width: 2.5px 2.5px 0 0;
  transform: rotate(45deg);
}
.signup-card-next:hover {
  background: var(--color-primary-dark);
}
/* The encouraging line after an answer, under the summary of answers so far. */
.signup-card-cheer {
  margin: var(--space-2) 0 0;
  font-size: .9375rem;
  font-weight: 600;
  color: var(--color-text);
}
/* A line under a location field: the place a postal code was read as, or a
   warning, set apart from the field rather than tucked under it. */
.signup-card-place-note {
  margin: var(--space-2) 0 0;
  font-size: .9375rem;
  color: var(--color-text-soft);
}
.signup-card-lists > .signup-card-place-note {
  margin-top: calc(-1 * var(--space-2));
}
.signup-card-place-note[data-hub-signup-warn] {
  color: var(--color-text);
  font-weight: 600;
}
/* The link between a postal code and the region and town lists. */
.signup-card-switch {
  display: block;
  min-height: 44px;
  margin-top: var(--space-2);
  padding: 0;
  background: none;
  border: 0;
  color: var(--color-text);
  font: inherit;
  font-size: .9375rem;
  text-decoration: underline;
  text-underline-offset: 3px;
  cursor: pointer;
}
.signup-card-skip {
  justify-self: center;
  min-height: 44px;
  padding: 0 var(--space-3);
  background: none;
  border: 0;
  color: var(--color-text);
  font: inherit;
  font-weight: 600;
  text-decoration: underline;
  text-underline-offset: 3px;
  cursor: pointer;
}
.signup-card-finish {
  padding: var(--space-8) var(--space-2);
  text-align: center;
}
.signup-card-finish svg {
  display: block;
  margin: 0 auto;
  color: var(--color-primary);
}
.signup-card-finish p {
  margin: var(--space-4) 0 0;
  font-size: 1.125rem;
  font-weight: 700;
}
.signup-card-finish small {
  display: block;
  margin-top: var(--space-2);
  font-size: .9375rem;
  color: var(--color-text-soft);
}
.signup-card-back:focus-visible,
.signup-card-next:focus-visible,
.signup-card-skip:focus-visible,
.signup-card-switch:focus-visible,
.signup-card-more:focus-visible,
.signup-card-wheel:focus-visible,
.signup-card-chip input:focus-visible + span {
  outline: 3px solid var(--color-focus);
  outline-offset: 2px;
}
/* A short phone: the same card, tighter, so Next stays in view. */
@media (max-width: 59.99rem) and (max-height: 760px) {
  .signup-card {
    --signup-card-target: 48px;
  }
  .signup-card-form {
    padding-top: var(--space-3);
  }
  .signup-card-step {
    margin-top: var(--space-4);
  }
  .signup-card-opts {
    gap: var(--space-2);
  }
  .signup-card-actions {
    margin-top: var(--space-4);
  }
}
@media (prefers-reduced-motion: no-preference) {
  .signup-card-opt-face,
  .signup-card-field input,
  .signup-card-chip span {
    transition: border-color var(--transition-fast) ease-out, background-color var(--transition-fast) ease-out, transform var(--transition-fast) ease-out;
  }
  .signup-card-opt:active .signup-card-opt-face,
  .signup-card-chip:active span {
    transform: scale(.97);
  }
  .signup-card-opt input:checked + .signup-card-opt-face .signup-card-tick,
  .signup-card-chip input:checked + span {
    animation: signup-card-pop .34s cubic-bezier(.3, 1.6, .5, 1);
  }
  .signup-card-seg::before {
    transition: width .5s cubic-bezier(.2, .8, .2, 1);
  }
  @keyframes signup-card-pop {
    from {
      transform: scale(.6);
    }
  }
}
/* Wide: a tighter card, so a first step and its button sit above the fold. */
@media (min-width: 60rem) {
  .signup-card {
    --signup-card-target: 48px;
  }
  .signup-card-form {
    padding: var(--space-5);
  }
  .signup-card-q {
    font-size: calc(1.125rem * var(--type-scale, 1));
  }
  .signup-card-opts {
    grid-template-columns: 1fr 1fr;
    gap: var(--space-2);
  }
  .signup-card-opt-face {
    padding: var(--space-2) var(--space-3);
    font-size: .9375rem;
  }
  /* A tighter card beside the words, so a first step and its button sit above
  the fold on a laptop. */
  .signup-card-top {
    min-height: 36px;
  }
  .signup-card-members {
    min-height: 44px;
    margin-top: var(--space-2);
    padding-block: var(--space-1);
  }
  .signup-card-step {
    margin-top: var(--space-4);
  }
  .signup-card-step[data-hub-signup-part="seeking"] {
    margin-top: var(--space-4);
  }
  .signup-card-q {
    margin-bottom: var(--space-2);
  }
  .signup-card-help {
    margin-bottom: var(--space-2);
  }
  .signup-card-other {
    margin-top: 0;
  }
  .signup-card-actions {
    margin-top: var(--space-4);
  }
  .signup-card-foot {
    margin-top: var(--space-3);
    padding-top: var(--space-3);
  }
}
/* Before the behaviour library takes the card over, the card is drawn at
   its first step where scripts run, so the page does not jump when it does.
   The animations move nothing: each holds a state for 3s, and if the library
   has not come by then every question shows. */
@media (scripting: enabled) {
  .signup-card:not(.hub-signup-live) :is(.signup-card-title, .signup-card-note, fieldset.signup-card-step:not(:first-of-type)) {
    animation: signup-card-wait 0s 3s backwards;
  }
  /* The row the progress bar takes. */
  .signup-card:not(.hub-signup-live) .signup-card-form::before {
    content: "";
    display: block;
    animation: signup-card-bar 0s 3s backwards;
  }
  /* "Looking for" first: its help line, and no summed answer. */
  .signup-card:not(.hub-signup-live) [data-hub-signup-part="seeking"]:first-of-type::before {
    content: "";
    display: block;
    font-size: .9375rem;
    animation: signup-card-help 0s 3s backwards;
  }
  .signup-card:not(.hub-signup-live) [data-hub-signup-part="seeking"]:first-of-type .signup-card-opt:has(input[name="lf"]:is([value="3"], [value="5"], [value="6"], [value="7"], [value="17"], [value="18"], [value="19"], [value="20"], [value="21"], [value="22"], [value="23"])) {
    animation: signup-card-wait 0s 3s backwards;
  }
}
/* From 60rem "I am" and "looking for" are the first step together. */
@media (scripting: enabled) and (min-width: 60rem) {
  .signup-card:not(.hub-signup-live) [data-hub-signup-part="iam"]:first-of-type + [data-hub-signup-part="seeking"] {
    animation: none;
  }
  .signup-card:not(.hub-signup-live) :is([data-hub-signup-part="seeking"]:first-of-type, [data-hub-signup-part="iam"]:first-of-type + [data-hub-signup-part="seeking"])::before {
    content: "";
    display: block;
    font-size: .9375rem;
    animation: signup-card-help-wide 0s 3s backwards;
  }
  .signup-card:not(.hub-signup-live) [data-hub-signup-part="iam"]:first-of-type + [data-hub-signup-part="seeking"] .signup-card-opt:has(input[name="lf"]:is([value="3"], [value="5"], [value="6"], [value="7"], [value="17"], [value="18"], [value="19"], [value="20"], [value="21"], [value="22"], [value="23"])) {
    animation: signup-card-wait 0s 3s backwards;
  }
}
@keyframes signup-card-wait {
  from {
    display: none;
  }
}
@keyframes signup-card-bar {
  from {
    min-height: 44px;
  }
}
@keyframes signup-card-help {
  from {
    content: "\a0";
    margin: calc(-1 * var(--space-2)) 0 var(--space-3);
  }
}
@keyframes signup-card-help-wide {
  from {
    content: "\a0";
    margin: calc(-1 * var(--space-2)) 0 var(--space-2);
  }
}

/* === pattern member-grid@7 (library v307; pinned by hand for the Mistress Slaves build -- adopt a newer version by replacing this block, never by adding a second) === */
/* member-grid v1 - tokens only, selectors prefixed.
   Everything below .member-grid is markup the PLATFORM writes, so these class
   names are a contract with it, not ours to rename. */
.member-grid {
  overflow-wrap: var(--long-words, break-word);
}
.member-grid :is(h1, h2, h3, h4) {
  overflow-wrap: var(--long-words, anywhere);
}
@supports (hyphenate-limit-chars: 20 8 8) {
  .member-grid {
    hyphens: var(--long-word-hyphens, manual);
    hyphenate-limit-chars: 20 8 8;
  }
}
.member-grid {
  display: block;
  padding-inline: var(--space-4);
}
.member-grid .lp-grid,
.member-grid .lp-members__empty {
  max-width: var(--container-max);
  margin-inline: auto;
}
.member-grid .lp-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(9rem, 1fr));
  gap: var(--space-4);
  list-style: none;
  margin-block: 0;
  padding: 0;
}
.member-grid .mem-card {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
  min-width: 0;
  position: relative;
}
.member-grid .mem-card img,
.member-grid .mem-card__initial {
  display: block;
  width: 100%;
  aspect-ratio: 1 / 1;
  object-fit: cover;
  border-radius: var(--card-radius);
  background: var(--color-surface);
}
.member-grid .mem-card__initial {
  display: grid;
  place-items: center;
  font-family: var(--font-heading);
  font-size: calc(2rem * var(--type-scale, 1));
  color: var(--color-primary);
  background: color-mix(in srgb, var(--color-primary) 12%, var(--color-surface));
}
.member-grid .mem-card .badge {
  position: absolute;
  top: var(--space-2);
  inset-inline-start: var(--space-2);
  padding: 0.15rem var(--space-2);
  border-radius: var(--chip-radius);
  background: var(--color-primary);
  color: var(--color-on-primary);
  font-size: 0.8rem;
  font-weight: 700;
  line-height: 1.4;
}
.member-grid .mem-card__name {
  margin: var(--space-2) 0 0;
  font-family: var(--font-heading);
  font-size: calc(1rem * var(--type-scale, 1));
  font-weight: 700;
  color: var(--color-text);
  overflow-wrap: anywhere;
}
.member-grid .mem-card__where,
.member-grid .mem-card__line {
  margin: 0;
  font-size: 0.85rem;
  line-height: 1.5;
  color: var(--color-text-soft);
  overflow-wrap: anywhere;
}
/* Two lines and no more. A blurb is member-written and has no length limit,
   so without this one card sets the height of the whole row. */
.member-grid .mem-card__line {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  overflow: hidden;
}
/* 44px, not the 24px WCAG floor: on a phone this is the card's only control
   and it sits between two photographs. */
.member-grid .mem-card__cta {
  display: flex;
  align-items: center;
  min-height: 44px;
  margin-top: auto;
  color: var(--color-primary);
  font-size: 0.85rem;
  font-weight: 700;
  text-decoration: none;
}
.member-grid .mem-card__cta:hover {
  text-decoration: underline;
}
.member-grid .mem-card__cta:focus-visible {
  outline: 2px solid var(--color-focus);
  outline-offset: 2px;
  border-radius: var(--chip-radius);
}
/* The join tile is the platform's last li and carries no photograph, so it
   needs a body of its own or it collapses to a link on the baseline. A grid
   item stretches to its row, so the floor is for the row it lands in ALONE -
   it is the last of an unknown number, so it wraps by itself often. */
.member-grid .mem-card--join {
  display: grid;
  place-items: center;
  min-height: 9rem;
  padding: var(--space-4);
  border: var(--card-border);
  border-radius: var(--card-radius);
  background: color-mix(in srgb, var(--color-primary) 8%, var(--color-surface));
  text-align: center;
}
.member-grid .mem-card--join .mem-card__cta {
  justify-content: center;
  margin: 0;
}
.member-grid .lp-members__empty {
  margin-block: 0;
  padding: var(--space-5) var(--space-4);
  border: 1px dashed color-mix(in srgb, var(--color-primary) 30%, transparent);
  border-radius: var(--card-radius);
  background: var(--color-surface);
  color: var(--color-text-soft);
  font-size: 0.9rem;
  line-height: 1.6;
}

/* card: how much furniture sits around the photograph */
.member-grid--plain .mem-card {
  padding: 0;
}
.member-grid--framed .mem-card {
  padding: var(--space-3);
  border: var(--card-border);
  border-radius: var(--card-radius);
  background: var(--color-surface);
  box-shadow: var(--card-shadow);
}
.member-grid--framed .mem-card .badge {
  top: var(--space-4);
  inset-inline-start: var(--space-4);
}
.member-grid--portrait .mem-card img,
.member-grid--portrait .mem-card__initial {
  aspect-ratio: 3 / 4;
}

/* flow: a wrapping grid, or one row the reader swipes. The rail never moves
   on its own - the visitor drives it, the same bargain gallery-scroll makes. */
.member-grid--grid .lp-grid {
  grid-template-columns: repeat(auto-fill, minmax(9rem, 1fr));
}
/* marquee is the rail plus a behaviour. With no behaviour library it IS the
   rail, so it takes every rail rule and adds nothing of its own. */
.member-grid--rail,
.member-grid--marquee {
  padding-inline: 0;
}
.member-grid--rail .lp-grid,
.member-grid--marquee .lp-grid {
  display: flex;
  padding-inline: var(--space-4);
  gap: var(--space-4);
  overflow-x: auto;
  overscroll-behavior-x: contain;
  scroll-snap-type: x mandatory;
  scroll-padding-inline: var(--space-4);
  scrollbar-width: none;
  padding-block: var(--space-2);
  max-width: none;
}
.member-grid--rail .lp-grid::-webkit-scrollbar,
.member-grid--marquee .lp-grid::-webkit-scrollbar {
  display: none;
}
.member-grid--rail .mem-card,
.member-grid--marquee .mem-card {
  flex: 0 0 auto;
  width: min(42vw, 11rem);
  scroll-snap-align: start;
}
.member-grid--rail .lp-grid:focus-visible,
.member-grid--marquee .lp-grid:focus-visible {
  outline: 2px solid var(--color-focus);
  outline-offset: 2px;
}
/* The carousel's controls stay hidden while the marquee moves the row, and
   show once its stop control is pressed. */
.member-grid--marquee:has(.hub-marquee-running):not(:has(.hub-marquee-control[aria-pressed="true"])) .hub-carousel-controls {
  display: none;
}

/* controls: where the previous and next arrows sit, read by the behaviour
   library from these properties. phone: whether a phone shows them. */
.member-grid--top {
  --hub-carousel-controls: top;
  --hub-carousel-look: round;
}
.member-grid--edges {
  --hub-carousel-controls: edges;
  --hub-carousel-look: round;
}
.member-grid--arrows {
  --hub-carousel-phone: show;
}
.member-grid--swipe {
  --hub-carousel-phone: hide;
}
.member-grid--marquee {
  --hub-marquee-look: round;
}
/* The pair keeps to the column the heading above it sits in. */
.member-grid .hub-carousel-controls--top {
  max-width: var(--container-max);
  margin-inline: auto;
  padding-inline: var(--space-4);
}
/* Over a photograph the arrows need a ground of their own. */
.member-grid .hub-carousel-controls--edges .hub-carousel-control {
  border: 0;
  background: var(--color-bg);
  color: var(--color-text);
  box-shadow: var(--card-shadow);
}
/* The marquee's stop control shares the arrows' row, at its end. */
.member-grid--marquee {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  align-items: center;
}
.member-grid--marquee .lp-grid,
.member-grid--marquee .lp-members__empty {
  flex: 0 0 100%;
}
.member-grid--marquee .hub-carousel-controls--top {
  margin-inline: 0;
  padding-inline: 0 var(--space-2);
}
.member-grid--marquee .hub-marquee-control {
  margin: 0 var(--space-4) var(--space-3) 0;
}

@media (min-width: 48rem) {
  .member-grid .lp-grid {
    gap: var(--space-5);
  }
  .member-grid--grid .lp-grid {
    grid-template-columns: repeat(auto-fill, minmax(11rem, 1fr));
  }
  .member-grid--rail .mem-card,
  .member-grid--marquee .mem-card {
    width: 13rem;
  }
  .member-grid .mem-card--join {
    min-height: 11rem;
  }
}

@media (prefers-reduced-motion: no-preference) {
  .member-grid--rail .lp-grid,
  .member-grid--marquee .lp-grid {
    scroll-behavior: smooth;
  }
  .member-grid .mem-card__cta {
    transition: color var(--transition-fast);
  }
}

/* With scripting off nothing can build the previous and next controls, and
   the hidden scroll bar would leave a mouse no way along the row, so both
   rows wrap like the grid rung. */
@media (scripting: none) {
  .member-grid--rail .lp-grid,
  .member-grid--marquee .lp-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(9rem, 1fr));
    overflow-x: visible;
    max-width: var(--container-max);
  }
  .member-grid--rail .mem-card,
  .member-grid--marquee .mem-card {
    width: auto;
  }
}
@media (scripting: none) and (min-width: 48rem) {
  .member-grid--rail .lp-grid,
  .member-grid--marquee .lp-grid {
    grid-template-columns: repeat(auto-fill, minmax(11rem, 1fr));
  }
}
.member-grid:not(.member-grid--moving):not(.member-grid--marquee) {
  --hub-motion: none;
}