@import url('https://fonts.googleapis.com/css2?family=Anton&family=Inter+Tight:wght@500;700;800&family=Spectral:ital,wght@0,400;0,700;1,400&display=swap');

/* home-new: ported from the partner's texas-bdsm.com homepage design.
   Everything is scoped under .nv so the brand's other pages are untouched. */
:root{
  --nv-ink0:#0b0709; --nv-ink1:#120c0f;
  --nv-line:rgba(236,190,170,.13); --nv-line2:rgba(236,190,170,.28);
  --nv-red:#e8112d; --nv-hot:#ff3049; --nv-ox:#4d0f1a; --nv-glow:rgba(232,17,45,.38);
  --nv-gold:#d9a441; --nv-gold-hi:#f3cd77; --nv-gold-deep:#a3762a;
  --nv-bone:#f1eae1; --nv-mute:#b6a79e; --nv-dim:#9b8a80;
  --nv-disp:'Anton',Impact,sans-serif;
  --nv-body:'Spectral',Georgia,serif;
  --nv-ui:'Inter Tight',system-ui,-apple-system,sans-serif;
  --nv-hairline:linear-gradient(90deg,transparent,var(--nv-red) 30%,var(--nv-gold) 70%,transparent);
  --nv-ease:cubic-bezier(.22,.61,.36,1);
}
/* Brand tokens for library-built pages (locations etc.) -- the homepage's dark palette in the library's names */
:root{
  --color-bg:#0b0709;
  --color-surface:#120c0f;
  --color-surface-soft:#1a1115;
  --color-text:#f1eae1;
  --color-text-soft:#c2b4ab;
  --color-heading:#f1eae1;
  --color-primary:#e8112d;
  --color-primary-dark:#b00d22;
  --color-on-primary:#ffffff;
  --color-scrim:#0b0709;
  --color-on-scrim:#f1eae1;
  --color-rule:rgba(236,190,170,.18);
  --color-focus:#f3cd77;
  --font-heading:'Anton',Impact,'Arial Narrow',sans-serif;
  --font-body:'Spectral',Georgia,serif;
  --space-1:.25rem;--space-2:.5rem;--space-3:.75rem;--space-4:1rem;--space-5:1.5rem;--space-6:2rem;--space-8:3rem;--space-12:5rem;
  --container-max:76rem;
  font-synthesis:none;
}
body:has(.masthead-nav){margin:0;background:var(--color-bg);color:var(--color-text);font-family:var(--font-body);line-height:1.7;-webkit-font-smoothing:antialiased}
body:has(.masthead-nav) h1,body:has(.masthead-nav) h2,body:has(.masthead-nav) h3{font-family:var(--font-heading);font-weight:400;letter-spacing:.015em;text-transform:uppercase}

body:has(.nv){margin:0;background:var(--nv-ink0)}
.nv{min-height:100vh;background:var(--nv-ink0);color:var(--nv-mute);font-family:var(--nv-body);font-size:17px;line-height:1.85;overflow-x:clip;-webkit-font-smoothing:antialiased}
.nv *,.nv *::before,.nv *::after{box-sizing:border-box}
.nv h1,.nv h2,.nv h3,.nv p,.nv ul,.nv ol{margin:0;padding:0}
.nv img{max-width:100%;display:block}
.nv ::selection{background:var(--nv-red);color:#fff}
.nv a{color:var(--nv-hot)}
.nv a:focus-visible,.nv summary:focus-visible{outline:2px solid var(--nv-gold-hi);outline-offset:3px}
.nv .skip{position:absolute;left:-999px;top:0;z-index:400;background:var(--nv-bone);color:var(--nv-ink0);padding:.6rem 1rem}
.nv .skip:focus{left:1rem;top:1rem}

/* header */
.nv .nv-header{position:sticky;top:0;z-index:200;background:rgba(11,7,9,.92);backdrop-filter:blur(12px);border-bottom:1px solid var(--nv-line)}
.nv .wrap{max-width:1220px;margin:0 auto;padding:0 clamp(1.1rem,4vw,2.4rem)}
.nv .nav{display:flex;align-items:center;justify-content:space-between;height:76px;gap:1rem}
.nv .logo img{height:60px;width:auto}
.nv .nav-links{display:flex;gap:2rem}
.nv .nav-links a{font-family:var(--nv-ui);font-size:.72rem;font-weight:700;letter-spacing:.22em;text-transform:uppercase;color:var(--nv-mute);text-decoration:none;transition:color .2s}
.nv .nav-links a:hover{color:var(--nv-bone)}
.nv .nav-actions{display:flex;align-items:center;gap:.7rem}
.nv .btn{display:inline-flex;align-items:center;justify-content:center;gap:.6rem;min-height:44px;font-family:var(--nv-ui);font-size:.85rem;font-weight:800;letter-spacing:.05em;text-transform:uppercase;text-decoration:none;border-radius:12px;transition:transform .16s ease,box-shadow .16s ease,filter .2s}
.nv .btn-login{border:1px solid var(--nv-line2);color:var(--nv-bone);padding:.65rem 1.3rem}
.nv .btn-login:hover{border-color:var(--nv-hot);color:var(--nv-hot)}
.nv .btn-join{background:linear-gradient(135deg,var(--nv-hot),var(--nv-red));color:#fff;padding:.65rem 1.4rem;box-shadow:0 6px 24px var(--nv-glow)}
.nv .btn-join:hover{transform:translateY(-1px);filter:brightness(1.07)}

/* hero */
.nv .hero{position:relative;min-height:min(88vh,820px);display:flex;align-items:center;isolation:isolate;overflow:hidden;border-bottom:1px solid var(--nv-line)}
.nv .hero-art{position:absolute;inset:0;z-index:0}
.nv .hero-art img{width:100%;height:100%;object-fit:cover;object-position:right top}
.nv .hero-shade{position:absolute;inset:0;z-index:1;background:
  linear-gradient(90deg,rgba(10,10,10,.95) 0%,rgba(10,10,10,.82) 34%,rgba(10,10,10,.3) 56%,rgba(10,10,10,0) 74%),
  linear-gradient(180deg,rgba(10,10,10,.28) 0%,transparent 22%,rgba(10,10,10,.94) 97%),
  radial-gradient(55% 55% at 82% 88%,rgba(126,13,24,.3),transparent 70%)}
.nv .hero-inner{position:relative;z-index:2;width:100%;padding-top:clamp(3.5rem,8vw,6rem);padding-bottom:clamp(3.5rem,7vw,5.5rem)}
.nv .hero-left>*{animation:nvFadeUp .8s var(--nv-ease) both}
.nv .hero-left>*:nth-child(2){animation-delay:.12s}
.nv .hero-left>*:nth-child(3){animation-delay:.24s}
.nv .hero-left>*:nth-child(4){animation-delay:.36s}
.nv .hero-left>*:nth-child(5){animation-delay:.48s}
@keyframes nvFadeUp{from{opacity:0;transform:translateY(24px)}to{opacity:1;transform:none}}
.nv .eyebrow{display:flex;align-items:center;gap:.8rem;font-family:var(--nv-ui);font-size:.76rem;font-weight:800;letter-spacing:.3em;text-transform:uppercase;color:var(--nv-hot);margin-bottom:1rem}
.nv .eyebrow::before{content:"";width:34px;height:2px;background:var(--nv-red);flex:none}
.nv h1{font-family:var(--nv-disp);font-weight:400;font-size:clamp(3.1rem,9vw,6.6rem);line-height:.96;letter-spacing:.012em;color:var(--nv-bone);text-transform:uppercase;margin-bottom:1.2rem;text-shadow:0 4px 40px rgba(0,0,0,.6)}
.nv h1 .rd{background:linear-gradient(105deg,var(--nv-hot) 20%,var(--nv-red) 60%,var(--nv-gold) 130%);-webkit-background-clip:text;background-clip:text;color:transparent}
.nv .tag{font-family:var(--nv-ui);font-size:clamp(1rem,2vw,1.2rem);line-height:1.6;color:#cfc9c7;font-weight:500;margin-bottom:2.4rem;max-width:36rem}
.nv .meet-row{display:grid;grid-template-columns:repeat(3,1fr);gap:1rem;max-width:920px}
.nv .meet{position:relative;display:flex;align-items:center;gap:.9rem;justify-content:space-between;padding:1.25rem 1.4rem;border-radius:16px;font-family:var(--nv-disp);font-size:clamp(1.05rem,1.7vw,1.3rem);letter-spacing:.03em;text-transform:uppercase;color:#fff;text-decoration:none;transition:transform .18s var(--nv-ease),filter .25s}
.nv .meet:hover{transform:translateY(-4px);filter:brightness(1.06)}
.nv .meet .sym{font-size:1.5rem;line-height:1}
.nv .meet .lbl{flex:1;text-align:left}
.nv .meet .arr{font-size:1.3rem}
.nv .meet.women{background:linear-gradient(135deg,var(--nv-ox),var(--nv-red));box-shadow:0 10px 34px var(--nv-glow)}
.nv .meet.men{background:linear-gradient(135deg,#1b1b1b,#2a2a2a);border:1px solid rgba(232,17,45,.55)}
.nv .meet.lgbt{background:linear-gradient(135deg,var(--nv-gold-deep),var(--nv-gold));color:#191104}
.nv .assure{margin-top:1.8rem;font-family:var(--nv-ui);font-size:.8rem;font-weight:800;letter-spacing:.24em;text-transform:uppercase;color:var(--nv-dim)}
.nv .assure b{color:var(--nv-gold)}

/* keyword strip (still, not scrolling) */
.nv .strip{border-bottom:1px solid var(--nv-line);background:var(--nv-ink1);padding:1.05rem 0}
.nv .strip ul{list-style:none;display:flex;flex-wrap:wrap;justify-content:center;gap:.4rem 1.6rem}
.nv .strip li{font-family:var(--nv-ui);font-size:.72rem;font-weight:700;letter-spacing:.3em;text-transform:uppercase;color:var(--nv-dim);white-space:nowrap}
.nv .strip li:nth-child(even){color:var(--nv-gold-deep)}

/* sections */
.nv section.block{padding:clamp(4rem,9vw,7.5rem) 0;position:relative}
.nv .s-dark{background:var(--nv-ink0)}
.nv .s-panel{background:var(--nv-ink1);border-top:1px solid var(--nv-line);border-bottom:1px solid var(--nv-line)}
.nv .s-glow-r::before{content:"";position:absolute;inset:0;background:radial-gradient(55% 40% at 18% 0%,rgba(232,17,45,.09),transparent 70%);pointer-events:none}
.nv .s-glow-g::before{content:"";position:absolute;inset:0;background:radial-gradient(55% 40% at 82% 0%,rgba(217,164,65,.08),transparent 70%);pointer-events:none}
.nv .kicker{display:flex;align-items:center;gap:14px;font-family:var(--nv-ui);font-size:.68rem;font-weight:700;letter-spacing:.34em;text-transform:uppercase;color:var(--nv-hot);margin-bottom:16px}
.nv .kicker::before{content:"";width:38px;height:1px;background:var(--nv-red);flex:none}
.nv .kicker.center{justify-content:center}
.nv .kicker.center::after{content:"";width:38px;height:1px;background:var(--nv-red);flex:none}
.nv .kicker.gold{color:var(--nv-gold)}
.nv .kicker.gold::before,.nv .kicker.gold.center::after{background:var(--nv-gold)}
.nv h2{font-family:var(--nv-disp);font-weight:400;font-size:clamp(2rem,4.6vw,3.3rem);line-height:1.02;letter-spacing:.014em;color:var(--nv-bone);text-transform:uppercase;margin-bottom:1rem}
.nv h2 .rd{color:var(--nv-hot)}
.nv h2 .gd{color:var(--nv-gold)}
.nv .center-text{text-align:center}
.nv .sub{font-style:italic;color:var(--nv-mute);max-width:44em}
.nv .center-text .sub{margin:0 auto}
.nv .orn{display:flex;align-items:center;justify-content:center;gap:12px;margin:1.6rem 0 0}
.nv .orn i{width:5px;height:5px;border-radius:50%;background:var(--nv-red);box-shadow:0 0 8px var(--nv-glow)}

/* guide */
.nv .guide-grid{display:grid;grid-template-columns:250px 1fr;gap:clamp(2rem,4.5vw,4.5rem);align-items:start;margin-top:2.6rem}
.nv .toc{position:sticky;top:100px;border:1px solid var(--nv-line);border-radius:2px;background:var(--nv-ink1);padding:1.4rem 1.3rem}
.nv .toc-title{font-family:var(--nv-ui);font-size:.66rem;font-weight:700;letter-spacing:.3em;text-transform:uppercase;color:var(--nv-dim);margin-bottom:1rem}
.nv .toc a{display:flex;gap:.7rem;font-family:var(--nv-ui);font-size:.74rem;font-weight:700;letter-spacing:.06em;color:var(--nv-mute);text-decoration:none;padding:.44rem 0;border-bottom:1px solid var(--nv-line)}
.nv .toc a b{color:var(--nv-gold-deep)}
.nv .toc a:hover{color:var(--nv-hot)}
.nv .toc .toc-cta{display:block;margin-top:1.1rem;text-align:center;letter-spacing:.16em;text-transform:uppercase;color:#fff;padding:.8rem 1rem;border:1px solid var(--nv-hot);border-radius:2px;background:linear-gradient(180deg,#ff2740,#d20d26)}
.nv .chapter{margin-bottom:3.4rem}
.nv .chapter:last-child{margin-bottom:0}
.nv .ch-num{font-family:var(--nv-ui);font-size:.66rem;font-weight:700;letter-spacing:.34em;text-transform:uppercase;color:var(--nv-dim);margin-bottom:.5rem;display:flex;align-items:center;gap:12px}
.nv .ch-num::after{content:"";flex:1;max-width:70px;height:1px;background:var(--nv-line2)}
.nv .chapter h3{font-family:var(--nv-disp);font-weight:400;font-size:clamp(1.45rem,2.6vw,2rem);letter-spacing:.02em;text-transform:uppercase;color:var(--nv-bone);margin-bottom:1rem}
.nv .chapter p{margin-bottom:1.15rem}
.nv .dropcap::first-letter{font-family:var(--nv-disp);font-size:3.4em;line-height:.82;float:left;padding:.06em .12em 0 0;color:var(--nv-hot)}
.nv .city-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:16px;margin:1.4rem 0}
.nv .city{background:var(--nv-ink1);border:1px solid var(--nv-line);border-radius:2px;padding:26px 24px}
.nv .city h4{font-family:var(--nv-disp);font-weight:400;font-size:1.18rem;letter-spacing:.03em;text-transform:uppercase;color:var(--nv-bone);margin:0 0 .6rem;display:flex;align-items:center;gap:.55rem}
.nv .city .pin{color:var(--nv-hot);font-size:.8rem}
.nv .city p{font-size:.95rem;line-height:1.75;margin:0}

/* categories */
.nv .cat-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:16px;margin-top:2.6rem}
.nv .cat{position:relative;display:block;text-decoration:none;background:var(--nv-ink0);border:1px solid var(--nv-line);border-radius:2px;padding:26px 24px 22px;transition:border-color .3s,transform .3s}
.nv .cat::before{content:"";position:absolute;top:0;left:0;bottom:0;width:2px;background:linear-gradient(180deg,var(--nv-red),var(--nv-gold));opacity:0;transition:opacity .3s}
.nv .cat:hover{border-color:var(--nv-line2);transform:translateY(-3px)}
.nv .cat:hover::before{opacity:1}
.nv .cat h3{font-family:var(--nv-body);font-weight:700;font-size:1.22rem;color:var(--nv-bone);margin-bottom:.5rem}
.nv .cat:hover h3{color:var(--nv-gold-hi)}
.nv .cat p{font-size:.94rem;line-height:1.7;color:var(--nv-mute)}
.nv .cat-go{display:inline-block;margin-top:.9rem;font-family:var(--nv-ui);font-size:.66rem;font-weight:700;letter-spacing:.2em;text-transform:uppercase;color:var(--nv-gold)}

/* roles */
.nv .roles-grid{list-style:none;display:grid;grid-template-columns:repeat(auto-fit,minmax(170px,1fr));gap:12px;margin-top:2.2rem}
.nv .role{display:flex;align-items:center;gap:12px;padding:15px 16px;border:1px solid var(--nv-line);border-radius:2px;background:rgba(18,12,15,.45)}
.nv .role-ico{display:inline-flex;align-items:center;justify-content:center;width:34px;height:34px;border-radius:2px;font-size:.95rem;flex:none;color:#fff;background:linear-gradient(145deg,#ff2740,#8e0f1f)}
.nv .role:nth-child(even) .role-ico{color:#1d1305;background:linear-gradient(145deg,var(--nv-gold-hi),var(--nv-gold-deep))}
.nv .role-body{display:flex;flex-direction:column;line-height:1.35}
.nv .role-body b{font-family:var(--nv-ui);font-size:.78rem;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--nv-bone)}
.nv .role-body i{font-size:.8rem;color:var(--nv-dim)}

/* why */
.nv .feat-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(290px,1fr));gap:16px;margin-top:2.2rem}
.nv .feat{background:var(--nv-ink1);border:1px solid var(--nv-line);border-radius:2px;padding:30px 26px}
.nv .feat-ico{display:inline-flex;align-items:center;justify-content:center;width:42px;height:42px;border-radius:2px;color:#fff;font-size:1.05rem;margin-bottom:1.1rem;background:linear-gradient(145deg,#ff2740,#8e0f1f)}
.nv .feat:nth-child(even) .feat-ico{color:#1d1305;background:linear-gradient(145deg,var(--nv-gold-hi),var(--nv-gold-deep))}
.nv .feat h3{font-family:var(--nv-ui);font-size:.86rem;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--nv-bone);margin-bottom:.6rem}
.nv .feat p{font-size:.95rem;line-height:1.75}

/* faq */
.nv .faq{max-width:820px;margin:2.4rem auto 0}
.nv .faq details{border:1px solid var(--nv-line);border-radius:2px;background:var(--nv-ink1);margin-bottom:10px}
.nv .faq details[open]{border-color:var(--nv-line2);box-shadow:inset 2px 0 0 var(--nv-red)}
.nv .faq summary{cursor:pointer;list-style:none;display:flex;justify-content:space-between;align-items:center;gap:1rem;padding:1.05rem 1.3rem;font-family:var(--nv-ui);font-size:.9rem;font-weight:700;letter-spacing:.03em;color:var(--nv-bone)}
.nv .faq summary::-webkit-details-marker{display:none}
.nv .faq summary::after{content:"+";font-family:var(--nv-disp);color:var(--nv-hot);font-size:1.2rem;transition:transform .25s}
.nv .faq details[open] summary::after{transform:rotate(45deg)}
.nv .faq .a{padding:0 1.3rem 1.15rem;font-size:.96rem;line-height:1.8}

/* final */
.nv .final{text-align:center;overflow:hidden}
.nv .final::before{content:"";position:absolute;inset:0;background:radial-gradient(60% 50% at 50% 100%,rgba(232,17,45,.13),transparent 70%);pointer-events:none}
.nv .final .meet-row{margin:2.4rem auto 0;max-width:460px;grid-template-columns:1fr}
.nv .final .assure{position:relative}

/* footer + mobile join bar */
.nv .nv-footer{border-top:1px solid var(--nv-line);background:var(--nv-ink1);padding:2.6rem 0 2.6rem}
.nv .foot-top{display:flex;align-items:center;justify-content:space-between;gap:1.4rem;flex-wrap:wrap;margin-bottom:1.4rem}
.nv .foot-top img{height:36px;width:auto}
.nv .foot-top nav{display:flex;gap:1.2rem 1.6rem;flex-wrap:wrap}
.nv .foot-top nav a{font-family:var(--nv-ui);font-size:.7rem;font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:var(--nv-mute);text-decoration:none;padding:.3rem 0}
.nv .foot-top nav a:hover{color:var(--nv-hot)}
.nv .legal{font-size:.8rem;line-height:1.8;color:var(--nv-dim)}
.nv .joinbar{display:none}

@media (max-width:900px){
  .nv .nav-links{display:none}
  .nv .guide-grid{grid-template-columns:1fr}
  .nv .toc{position:static}
}
@media (max-width:820px){
  .nv .meet-row{grid-template-columns:1fr;max-width:440px}
  .nv .joinbar{position:fixed;left:0;right:0;bottom:0;z-index:180;display:flex;align-items:center;justify-content:space-between;gap:1rem;padding:.7rem clamp(1rem,4vw,2rem);background:rgba(11,7,9,.96);border-top:1px solid var(--nv-line)}
  .nv .jb-txt{display:flex;flex-direction:column;line-height:1.3;font-family:var(--nv-ui);font-size:.68rem;color:var(--nv-dim)}
  .nv .jb-txt b{font-size:.8rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--nv-bone)}
  .nv .jb-btn{font-family:var(--nv-ui);font-size:.76rem;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:#fff;text-decoration:none;padding:.75rem 1.4rem;border-radius:2px;border:1px solid var(--nv-hot);background:linear-gradient(180deg,#ff2740,#d20d26);white-space:nowrap}
  .nv .nv-footer{padding-bottom:6rem}
}
@media (max-width:600px){
  .nv .btn-login{display:none}
  .nv .btn-join{padding:.55rem 1rem;font-size:.75rem;white-space:nowrap}
  .nv .logo img{height:44px;width:auto}
  .nv .eyebrow{letter-spacing:.2em}
  .nv .hero-art img{object-position:70% center}
  .nv .hero-shade{background:linear-gradient(180deg,rgba(10,10,10,.55) 0%,rgba(10,10,10,.8) 45%,rgba(10,10,10,.96) 100%)}
}
@media (prefers-reduced-motion:reduce){
  .nv .hero-left>*{animation:none}
  .nv *{transition:none!important}
}
.nv .cat .dash{color:var(--nv-hot)}

/* === pattern-tokens:start (generated - edit outside these markers) === */
/*
   Role tokens the design patterns require. A var() this
   sheet does not define is discarded at compute time, so
   the rule is lost rather than falling back to anything.
   Regenerated in place; anything you add here is replaced.
*/
:root {
  /* Shape: the brand's own scale, under the names the patterns use. */
  --card-radius: 0.75rem;
  --btn-radius: 0.5rem;
  --chip-radius: 999px;
  --card-shadow: none;
  --transition-slow: 400ms ease;
  --card-border: 1px solid color-mix(in srgb, var(--color-text) 12%, transparent);

  /* 0.92 quieter, 1.15 louder. Display type only. */
  --type-scale: 1;
}
/* === pattern-tokens:end === */

/* === pattern masthead-nav@14 (library v299; appended by page_assemble.py -- adopt a newer version by replacing this block, never by adding a second) === */
/* masthead-nav - tokens only, selectors prefixed. The menu inside
   .masthead-nav-links is styled by structure - ul, li, a - so the list the
   platform generates for {{menu.navigation}} and a list written by hand take
   the same rules. */
.masthead-nav {
  overflow-wrap: var(--long-words, break-word);
}
.masthead-nav :is(h1, h2, h3, h4) {
  overflow-wrap: var(--long-words, anywhere);
}
@supports (hyphenate-limit-chars: 20 8 8) {
  .masthead-nav {
    hyphens: var(--long-word-hyphens, manual);
    hyphenate-limit-chars: 20 8 8;
  }
}

/* Each ground names its own inks, and every rule below reads the pair rather
   than a token, so nothing here knows which ground it is on. */
.masthead-nav--plain {
  --masthead-nav-ground: var(--color-bg);
  --masthead-nav-ink: var(--color-text);
  --masthead-nav-edge: var(--color-rule);
  --masthead-nav-cta-face: var(--color-primary);
  --masthead-nav-cta-ink: var(--color-on-primary);
  --masthead-nav-panel-face: var(--color-surface);
  --masthead-nav-panel-ink: var(--color-text);
  --masthead-nav-ring: var(--color-focus);
}
.masthead-nav--soft {
  --masthead-nav-ground: var(--color-surface-soft);
  --masthead-nav-ink: var(--color-text);
  --masthead-nav-edge: var(--color-rule);
  --masthead-nav-cta-face: var(--color-primary);
  --masthead-nav-cta-ink: var(--color-on-primary);
  --masthead-nav-panel-face: var(--color-surface);
  --masthead-nav-panel-ink: var(--color-text);
  --masthead-nav-ring: var(--color-focus);
}
.masthead-nav--brand {
  --masthead-nav-ground: var(--color-primary);
  --masthead-nav-ink: var(--color-on-primary);
  --masthead-nav-edge: color-mix(in srgb, var(--color-on-primary) 35%, transparent);
  --masthead-nav-cta-face: var(--color-on-primary);
  --masthead-nav-cta-ink: var(--color-primary);
  --masthead-nav-panel-face: var(--color-primary);
  --masthead-nav-panel-ink: var(--color-on-primary);
  --masthead-nav-ring: var(--color-on-primary);
}

/* ---- the bar ---- */
/* One number for every tap target here, and for the room the drawer keeps.
   Clipped sideways, never scrolled: a faded submenu is laid out where it
   will open, and one past the edge would otherwise widen the page. */
.masthead-nav {
  --masthead-nav-tap: 2.75rem;
  background: var(--masthead-nav-ground);
  color: var(--masthead-nav-ink);
  border-block-end: 1px solid var(--masthead-nav-edge);
  overflow-x: clip;
}
/* edge: every rung keeps the 1px border and changes only what paints it, so
   the bar is the same height on all three and --page-header-height holds. */
.masthead-nav--rule {
  border-block-end-color: var(--masthead-nav-edge);
}
.masthead-nav--shadow {
  border-block-end-color: transparent;
  box-shadow: var(--card-shadow);
}
.masthead-nav--flush {
  border-block-end-color: transparent;
}
.masthead-nav--static {
  position: static;
}
/* The z-index orders the drawer's scrim, panel and button against each other
   rather than against the page. `sticky` is no containing block for a fixed
   child, so the drawer still pins to the viewport. */
.masthead-nav--pinned,
.masthead-nav--compact {
  position: sticky;
  inset-block-start: 0;
  z-index: 40;
}
/* The containing block for the small-screen menu and for the controls when
   they are parked in the corner on --centred. */
.masthead-nav-inner {
  position: relative;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-3);
  max-width: var(--container-max);
  margin-inline: auto;
  padding: var(--space-3) var(--space-4);
}
.masthead-nav-mark {
  display: flex;
  align-items: center;
  flex: 0 1 auto;
  min-width: 0;
  margin-inline-end: auto;
}
/* The set height is the floor: `height: auto` under a `max-height` alone
   resolves a viewBox-only SVG to 0x0. object-fit stops the cap distorting it. */
.masthead-nav-logo {
  display: block;
  width: auto;
  height: var(--logo-height, 2.75rem);
  max-width: 100%;
  object-fit: contain;
}
/* mark: how the brand mark meets the ground behind it. */
.masthead-nav--direct .masthead-nav-mark {
  padding: 0;
}
.masthead-nav--plate .masthead-nav-mark {
  padding: var(--space-2) var(--space-3);
  border-radius: var(--card-radius);
  background: var(--color-bg);
}
.masthead-nav--mono .masthead-nav-logo {
  filter: brightness(0) invert(1);
}

/* ---- the small-screen disclosure ---- */
.masthead-nav-disclosure {
  flex: 0 0 auto;
}
.masthead-nav-toggle {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  min-height: var(--masthead-nav-tap);
  padding-inline: var(--space-3);
  border: 1px solid var(--masthead-nav-edge);
  border-radius: var(--btn-radius);
  color: var(--masthead-nav-ink);
  font-family: var(--font-heading);
  font-size: calc(0.9375rem * var(--type-scale, 1));
  font-weight: var(--weight-display, 700);
  cursor: pointer;
  /* Both lines are needed to drop the default triangle. */
  list-style: none;
}
.masthead-nav-toggle::-webkit-details-marker {
  display: none;
}
/* Three bars: the element is the middle one, the pseudo-elements the others.
   The fold into a cross is a state change, so reduced motion keeps it. */
.masthead-nav-toggle-icon {
  position: relative;
  flex: 0 0 auto;
  width: var(--masthead-nav-bar-width, 1rem);
  height: var(--masthead-nav-bar, 2px);
  background: currentColor;
}
.masthead-nav-toggle-icon::before,
.masthead-nav-toggle-icon::after {
  content: "";
  position: absolute;
  inset-inline: 0;
  height: var(--masthead-nav-bar, 2px);
  background: currentColor;
}
.masthead-nav-toggle-icon::before {
  top: calc(-1 * var(--masthead-nav-bar-gap, 5px));
}
.masthead-nav-toggle-icon::after {
  top: var(--masthead-nav-bar-gap, 5px);
}
.masthead-nav-disclosure[open] .masthead-nav-toggle-icon {
  background: transparent;
}
.masthead-nav-disclosure[open] .masthead-nav-toggle-icon::before {
  top: 0;
  transform: rotate(45deg);
}
.masthead-nav-disclosure[open] .masthead-nav-toggle-icon::after {
  top: 0;
  transform: rotate(-45deg);
}
/* burger: how the bars are drawn. Every rung folds into the same cross. */
.masthead-nav--three {
  --masthead-nav-bar: 2px;
  --masthead-nav-bar-gap: 5px;
}
.masthead-nav--two {
  --masthead-nav-bar-gap: 4px;
}
.masthead-nav--two .masthead-nav-toggle-icon {
  background: transparent;
}
.masthead-nav--bold {
  --masthead-nav-bar: 3px;
  --masthead-nav-bar-gap: 6px;
  --masthead-nav-bar-width: 1.25rem;
}
/* boxed: the element is the shape, a tap target square in the join
   control's own pair, and draws the middle bar as a centred gradient. */
.masthead-nav--boxed .masthead-nav-toggle {
  border: 0;
}
.masthead-nav--boxed.masthead-nav--icon .masthead-nav-toggle {
  padding-inline: 0;
}
.masthead-nav--boxed .masthead-nav-toggle-icon {
  width: var(--masthead-nav-tap);
  height: var(--masthead-nav-tap);
  border-radius: var(--btn-radius);
  color: var(--masthead-nav-cta-ink);
  background: linear-gradient(currentColor, currentColor) center / 1rem 2px no-repeat,
              var(--masthead-nav-cta-face);
}
.masthead-nav--boxed .masthead-nav-toggle-icon::before,
.masthead-nav--boxed .masthead-nav-toggle-icon::after {
  inset-inline: calc(50% - 0.5rem);
}
.masthead-nav--boxed .masthead-nav-toggle-icon::before {
  top: calc(50% - 6px);
}
.masthead-nav--boxed .masthead-nav-toggle-icon::after {
  top: calc(50% + 4px);
}
.masthead-nav--boxed .masthead-nav-disclosure[open] .masthead-nav-toggle-icon {
  background: var(--masthead-nav-cta-face);
}
.masthead-nav--boxed .masthead-nav-disclosure[open] .masthead-nav-toggle-icon::before,
.masthead-nav--boxed .masthead-nav-disclosure[open] .masthead-nav-toggle-icon::after {
  top: calc(50% - 1px);
}
/* toggle=icon: the word leaves the box, never the accessibility tree - never
   display: none. With no word in it the box needs a square floor, and the
   bars stand bare: no frame, the tap area and the focus ring kept. */
.masthead-nav--icon .masthead-nav-toggle {
  justify-content: center;
  min-width: var(--masthead-nav-tap);
  border: 0;
}
.masthead-nav--icon .masthead-nav-toggle-text {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  clip-path: inset(50%);
  white-space: nowrap;
}

/* ---- the menu: whatever list sits inside the nav landmark ---- */
.masthead-nav-links ul {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
  margin: 0;
  padding: 0;
  list-style: none;
}
.masthead-nav-links li {
  margin: 0;
}
.masthead-nav-links a,
.masthead-nav-links button {
  display: flex;
  align-items: center;
  min-height: var(--masthead-nav-tap);
  margin: 0;
  padding: var(--space-2) 0;
  border: 0;
  background: none;
  color: inherit;
  font-family: var(--font-heading);
  font-size: calc(1rem * var(--type-scale, 1));
  font-weight: var(--weight-display, 700);
  text-align: start;
  text-decoration: none;
  cursor: pointer;
}
.masthead-nav-links a[href]:hover,
.masthead-nav-links button:hover {
  text-decoration: underline;
  text-underline-offset: 0.3em;
}
/* A parent with children and no URL of its own arrives as an <a> with no
   href. It is a label, not a link, so it must not offer a pointer. */
.masthead-nav-links li:has(> ul) > a:not([href]) {
  cursor: default;
}
.masthead-nav-links ul ul {
  padding-inline-start: var(--space-4);
  border-inline-start: 1px solid var(--masthead-nav-edge);
}
.masthead-nav-links ul ul a,
.masthead-nav-links ul ul button {
  font-size: calc(0.9375rem * var(--type-scale, 1));
  font-weight: 500;
}

/* ---- the tray: the menu and the controls, both inside the disclosure ---- */
/* No `display` here: one would force the tray open on --panel, which opens
   and shuts natively. Each rung turns it on where it wants it laid out. */
.masthead-nav-tray {
  flex-direction: column;
  gap: var(--space-4);
}

/* ---- login and join ---- */
.masthead-nav-controls {
  display: flex;
  align-items: center;
  gap: var(--space-4);
}
.masthead-nav-login {
  display: flex;
  align-items: center;
  color: inherit;
  font-family: var(--font-heading);
  font-size: calc(0.9375rem * var(--type-scale, 1));
  font-weight: var(--weight-display, 700);
  text-decoration: none;
  padding-block: var(--space-2);
}
.masthead-nav-login:hover {
  text-decoration: underline;
  text-underline-offset: 0.3em;
}
.masthead-nav-join {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 1 1 auto;
  min-height: var(--masthead-nav-tap);
  padding-inline: var(--space-5);
  border-radius: var(--btn-radius);
  background: var(--masthead-nav-cta-face);
  color: var(--masthead-nav-cta-ink);
  font-family: var(--font-heading);
  font-size: calc(0.9375rem * var(--type-scale, 1));
  font-weight: var(--weight-display, 700);
  text-decoration: none;
}
.masthead-nav-join:hover {
  text-decoration: underline;
  text-underline-offset: 0.2em;
}
/* The ring is the ground's own, so one rule is right on all three. */
.masthead-nav a:focus-visible,
.masthead-nav button:focus-visible,
.masthead-nav summary:focus-visible {
  outline: 3px solid var(--masthead-nav-ring);
  outline-offset: 2px;
}

/* ---- small screens ---- */
@media (width < 60rem) {
  /* A wide wordmark at --logo-height is most of a phone across. Without this
     cap it takes the whole row and pushes the menu button onto a second one. */
  .masthead-nav-mark {
    max-width: 45%;
    min-width: var(--masthead-nav-tap);
    min-height: var(--masthead-nav-tap);
  }
  /* A wordless button is one tap wide, so the mark may take the rest of the
     row. --row has no button and --minimal a wider join control: both 45%. */
  .masthead-nav--drawer.masthead-nav--icon:not(.masthead-nav--minimal) .masthead-nav-mark,
  .masthead-nav--panel.masthead-nav--icon:not(.masthead-nav--minimal) .masthead-nav-mark {
    max-width: calc(100% - var(--masthead-nav-tap) - var(--space-3));
  }
  /* A long label ellipsises; border-box holds the padding inside the cap. */
  .masthead-nav-toggle {
    box-sizing: border-box;
    max-width: 100%;
  }
  .masthead-nav--labelled .masthead-nav-toggle-text {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  /* One button, two words, and only ever one of them in the box. */
  .masthead-nav-toggle-text--close {
    display: none;
  }
  .masthead-nav-disclosure[open] .masthead-nav-toggle-text {
    display: none;
  }
  .masthead-nav-disclosure[open] .masthead-nav-toggle-text--close {
    display: inline;
  }
  /* The controls lead the sheet, and follow the menu in the markup so the
     bar is read in the order it is drawn. --row has no sheet and is left. */
  .masthead-nav--drawer .masthead-nav-controls,
  .masthead-nav--panel .masthead-nav-controls {
    order: -1;
    flex-direction: column;
    align-items: stretch;
    gap: var(--space-3);
  }
  /* A row in a menu here, not a word in the bar: it takes a menu target. */
  .masthead-nav-login {
    min-height: var(--masthead-nav-tap);
  }
  /* menu-side moves the button, and the drawer it opens, to the same edge.
     Scoped to the rungs that HAVE a button: on --row the disclosure is the
     whole menu, so ordering it puts the navigation above the brand. */
  .masthead-nav--drawer.masthead-nav--side-end .masthead-nav-disclosure,
  .masthead-nav--panel.masthead-nav--side-end .masthead-nav-disclosure {
    order: 0;
  }
  .masthead-nav--drawer.masthead-nav--side-start .masthead-nav-disclosure,
  .masthead-nav--panel.masthead-nav--side-start .masthead-nav-disclosure {
    order: -1;
  }
  /* No start margin: 45% and 55% add up exactly, so anything added breaks
     the line and drops the mark to a second row. */
  .masthead-nav--side-start .masthead-nav-mark {
    margin-inline-end: auto;
  }
  /* A join control stretched over a tablet is a bar, not a button. */
  /* Definite, not max-width: an auto margin here cancels the stretch. */
  .masthead-nav--panel .masthead-nav-controls {
    width: min(20rem, 100%);
  }
  .masthead-nav--panel.masthead-nav--menu-end .masthead-nav-controls {
    align-self: flex-end;
  }
}

/* menu=drawer: a panel fixed to the inline-end edge, over a dimmed page. */
@media (width < 60rem) {
  /* The drawer is fixed to the viewport and the button that shuts it is not,
     so a scroll parts them and leaves an open menu with no way out. Pinned on
     both sticky rungs: this is not the sticky axis and does not fold into it. */
  .masthead-nav--drawer:has(.masthead-nav-disclosure[open]) {
    position: sticky;
    inset-block-start: 0;
    z-index: 40;
  }
  /* 45% for the mark and the rest for the button, gap included, so the two
     share one row: flexbox breaks lines before it shrinks anything. */
  .masthead-nav--drawer .masthead-nav-disclosure,
  .masthead-nav--panel .masthead-nav-disclosure {
    max-width: calc(55% - var(--space-3));
  }
  /* Laid out open or shut, so it has somewhere to slide FROM. Engines hide a
     closed <details> two ways, one unreachable from the child, so both are
     needed. `visibility` keeps it out of the tab order - never use opacity. */
  .masthead-nav--drawer .masthead-nav-tray {
    display: flex;
  }
  .masthead-nav--drawer .masthead-nav-disclosure::details-content {
    content-visibility: visible;
    block-size: auto;
  }
  .masthead-nav--drawer .masthead-nav-tray {
    position: fixed;
    inset-block: 0;
    z-index: 41;
    width: min(20rem, 82vw);
    overflow-y: auto;
    overscroll-behavior: contain;
    /* Block-start padding is the header's first row, computed - the button
       sits on the drawer, so anything less puts it over the first item. */
    padding: calc(var(--space-3)
                  + max(var(--masthead-nav-tap), var(--logo-height, 2.75rem))
                  + var(--space-4))
             var(--space-4) var(--space-6);
    background: var(--masthead-nav-panel-face);
    color: var(--masthead-nav-panel-ink);
    box-shadow: var(--card-shadow);
    visibility: hidden;
  }
  /* `translate` is the one place a logical property cannot carry the meaning,
     so each side states its own, and its own :dir(rtl). */
  .masthead-nav--drawer.masthead-nav--side-end .masthead-nav-tray {
    inset-inline-end: 0;
    border-inline-start: 1px solid var(--masthead-nav-edge);
    translate: 100% 0;
  }
  .masthead-nav--drawer.masthead-nav--side-end .masthead-nav-tray:dir(rtl) {
    translate: -100% 0;
  }
  .masthead-nav--drawer.masthead-nav--side-start .masthead-nav-tray {
    inset-inline-start: 0;
    border-inline-end: 1px solid var(--masthead-nav-edge);
    translate: -100% 0;
  }
  .masthead-nav--drawer.masthead-nav--side-start .masthead-nav-tray:dir(rtl) {
    translate: 100% 0;
  }
  .masthead-nav--drawer .masthead-nav-disclosure[open] .masthead-nav-tray {
    visibility: visible;
    translate: none;
  }
  /* The backdrop belongs to the disclosure: in the panel it would be inside
     the box it has to sit behind. */
  .masthead-nav--drawer .masthead-nav-disclosure::before {
    content: "";
    position: fixed;
    inset: 0;
    z-index: 40;
    background: color-mix(in srgb, var(--color-scrim) 62%, transparent);
    visibility: hidden;
    opacity: 0;
  }
  .masthead-nav--drawer .masthead-nav-disclosure[open]::before {
    visibility: visible;
    opacity: 1;
  }
  /* The button stays where it was pressed, above both the backdrop and the
     panel. The panel's block-start padding keeps the first item out of it. */
  .masthead-nav--drawer .masthead-nav-disclosure[open] .masthead-nav-toggle {
    position: relative;
    z-index: 42;
  }
}

/* menu=panel: the menu drops out of the button, over what is below. */
@media (width < 60rem) {
  /* A shut <details> contains its own layout, so this sheet is laid out
     against the button until it opens - `visibility` keeps that box out. */
  .masthead-nav--panel .masthead-nav-tray {
    position: absolute;
    inset-inline: 0;
    top: 100%;
    z-index: 20;
    max-height: 70svh;
    overflow-y: auto;
    padding: var(--space-4);
    background: var(--masthead-nav-ground);
    border-block-end: 1px solid var(--masthead-nav-edge);
    box-shadow: var(--card-shadow);
    visibility: hidden;
  }
  /* Scoped to [open], unlike the drawer's: this sheet does not slide, and a
     `display` that applied while shut would hold it open. */
  .masthead-nav--panel .masthead-nav-disclosure[open] .masthead-nav-tray {
    display: flex;
    visibility: visible;
  }
}

/* ---- menu=row: no button, the menu is a scrolling row beside the mark ---- */
@media (width < 60rem) {
  .masthead-nav--row .masthead-nav-toggle {
    display: none;
  }
  /* Both declarations open the panel: engines hide a closed <details> in two
     different ways, and one of them cannot be reached from the child. */
  .masthead-nav--row .masthead-nav-tray {
    display: flex;
  }
  .masthead-nav--row .masthead-nav-disclosure::details-content {
    content-visibility: visible;
    block-size: auto;
  }
  .masthead-nav--row .masthead-nav-mark {
    margin-inline-end: 0;
  }
  .masthead-nav--row .masthead-nav-disclosure {
    flex: 1 1 auto;
    min-width: 0;
  }
  .masthead-nav--row .masthead-nav-tray {
    gap: var(--space-2);
  }
  .masthead-nav--row .masthead-nav-links {
    min-width: 0;
  }
  .masthead-nav--row .masthead-nav-join {
    flex: 0 1 auto;
  }
  .masthead-nav--row .masthead-nav-links > ul {
    flex-direction: row;
    flex-wrap: nowrap;
    align-items: center;
    gap: var(--space-4);
    overflow-x: auto;
    scrollbar-width: none;
  }
  .masthead-nav--row .masthead-nav-links > ul::-webkit-scrollbar {
    display: none;
  }
  .masthead-nav--row .masthead-nav-links > ul > li {
    flex: 0 0 auto;
  }
  /* One row, so a submenu cannot nest under its parent; its children run on
     beside it instead. */
  .masthead-nav--row .masthead-nav-links li:has(> ul) {
    display: flex;
    align-items: center;
    gap: var(--space-4);
  }
  .masthead-nav--row .masthead-nav-links ul ul {
    flex-direction: row;
    gap: var(--space-4);
    padding-inline-start: var(--space-4);
  }
}

/* ---- wide screens: the menu is always open and sits in the bar ---- */
@media (min-width: 60rem) {
  .masthead-nav-toggle {
    display: none;
  }
  /* Both declarations open the panel: engines hide a closed <details> in two
     different ways, and one of them cannot be reached from the child. */
  .masthead-nav-tray {
    display: flex;
  }
  .masthead-nav-disclosure::details-content {
    content-visibility: visible;
    block-size: auto;
  }
  .masthead-nav-tray {
    flex-direction: row;
    align-items: center;
    gap: var(--space-6);
  }
  .masthead-nav-links {
    flex: 1 1 auto;
    min-width: 0;
  }
  .masthead-nav-inner {
    flex-wrap: nowrap;
    gap: var(--space-6);
    padding-block: var(--space-4);
  }
  /* The mark must not shrink here: the logo is sized from its height at this
     width, so a shrinking box would let the image spill over the first menu
     item instead of taking room from it. */
  .masthead-nav-mark {
    flex: 0 0 auto;
  }
  .masthead-nav-logo {
    max-width: none;
  }
  .masthead-nav-disclosure {
    flex: 1 1 auto;
    min-width: 0;
  }
  .masthead-nav-controls {
    flex: 0 0 auto;
  }
  .masthead-nav-join {
    flex: 0 0 auto;
  }
  .masthead-nav-links > ul {
    flex-direction: row;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-2) var(--space-5);
  }
  .masthead-nav-links > ul > li {
    position: relative;
  }
  .masthead-nav-links > ul > li > a,
  .masthead-nav-links > ul > li > button {
    white-space: nowrap;
  }
  /* The tap floor holds here too: 1024 is a tablet held sideways. Padding
     inside it, so a one-row bar keeps the join control's height. */
  .masthead-nav-mark,
  .masthead-nav-login,
  .masthead-nav-links > ul > li > a,
  .masthead-nav-links > ul > li > button {
    box-sizing: border-box;
    min-width: var(--masthead-nav-tap);
    min-height: var(--masthead-nav-tap);
  }
  /* Faded rather than removed: a submenu taken out of the layout cannot be
     focused, so a keyboard could never open it. */
  .masthead-nav-links ul ul {
    position: absolute;
    top: 100%;
    inset-inline-start: 0;
    z-index: 30;
    min-width: 12rem;
    padding: var(--space-2);
    border: var(--card-border);
    border-inline-start: var(--card-border);
    border-radius: var(--card-radius);
    background: var(--masthead-nav-panel-face);
    color: var(--masthead-nav-panel-ink);
    box-shadow: var(--card-shadow);
    opacity: 0;
    pointer-events: none;
  }
  .masthead-nav-links > ul > li:hover > ul,
  .masthead-nav-links > ul > li:focus-within > ul {
    opacity: 1;
    pointer-events: auto;
  }
  /* The last two items sit nearest the edge, so their panels hang from
     their end edge instead. */
  .masthead-nav-links > ul > li:nth-last-child(-n + 2) > ul {
    inset-inline-start: auto;
    inset-inline-end: 0;
  }
  .masthead-nav-links ul ul a,
  .masthead-nav-links ul ul button {
    min-height: var(--masthead-nav-tap);
    padding-inline: var(--space-2);
  }
  /* A third level sits inside its parent's panel, and takes the pointer
     only when that panel does. */
  .masthead-nav-links ul ul ul {
    position: static;
    min-width: 0;
    padding: 0 0 0 var(--space-3);
    border: 0;
    border-inline-start: 1px solid var(--masthead-nav-edge);
    border-radius: 0;
    box-shadow: none;
    opacity: 1;
    pointer-events: inherit;
  }
  /* A chevron marks the items that carry children. */
  .masthead-nav-links > ul > li:has(> ul) > a::after,
  .masthead-nav-links > ul > li:has(> ul) > button::after {
    content: "";
    display: inline-block;
    width: 0.4em;
    height: 0.4em;
    margin-inline-start: var(--space-2);
    border-inline-end: 2px solid currentColor;
    border-block-end: 2px solid currentColor;
    transform: translateY(-0.15em) rotate(45deg);
  }

  /* overflow: what happens to items that do not fit the row. */
  .masthead-nav--wrap .masthead-nav-links > ul {
    flex-wrap: wrap;
  }
  /* --more folds the items past the room into a last item the behaviour
     library builds. Without the library this rung is --wrap, so the property
     below is the whole switch. */
  .masthead-nav--more .masthead-nav-links > ul {
    --hub-overflow: more;
  }
  .masthead-nav--scroll .masthead-nav-links > ul {
    flex-wrap: nowrap;
    overflow-x: auto;
    scrollbar-width: none;
    padding: var(--space-2) var(--space-3);
    mask-image: linear-gradient(to right, transparent, currentColor var(--space-3),
                                currentColor calc(100% - var(--space-3)), transparent);
  }
  .masthead-nav--scroll .masthead-nav-links > ul::-webkit-scrollbar {
    display: none;
  }
  .masthead-nav--scroll .masthead-nav-links > ul > li {
    flex: 0 0 auto;
  }
  /* A scrolling row clips anything that pops out of it, so its submenus run
     on beside their parent instead. */
  .masthead-nav--scroll .masthead-nav-links > ul > li:has(> ul) {
    display: flex;
    align-items: center;
    gap: var(--space-4);
  }
  .masthead-nav--scroll .masthead-nav-links ul ul {
    position: static;
    flex-direction: row;
    min-width: 0;
    padding: 0 0 0 var(--space-3);
    border: 0;
    border-inline-start: 1px solid var(--masthead-nav-edge);
    border-radius: 0;
    background: none;
    color: inherit;
    box-shadow: none;
    opacity: 1;
    pointer-events: auto;
  }
  .masthead-nav--scroll .masthead-nav-links > ul > li:has(> ul) > a::after,
  .masthead-nav--scroll .masthead-nav-links > ul > li:has(> ul) > button::after {
    content: none;
  }

  /* submenu: --dropdown is the panel under its own item, above. --mega is one
     panel the width of the bar, its items in columns. */
  .masthead-nav--dropdown .masthead-nav-links > ul > li {
    position: relative;
  }
  .masthead-nav--mega .masthead-nav-links > ul > li {
    position: static;
  }
  .masthead-nav--mega .masthead-nav-links > ul > li > ul {
    display: block;
    inset-inline: 0;
    min-width: 0;
    padding: var(--space-5) var(--space-6);
    border-radius: 0 0 var(--card-radius) var(--card-radius);
    columns: 12rem;
    column-gap: var(--space-6);
  }
  .masthead-nav--mega .masthead-nav-links > ul > li > ul > li {
    break-inside: avoid;
  }
  .masthead-nav--mega .masthead-nav-links > ul > li > ul a,
  .masthead-nav--mega .masthead-nav-links > ul > li > ul button {
    padding-inline: 0;
  }

  /* layout=inline - mark, menu, controls, one row. */
  .masthead-nav--inline .masthead-nav-inner {
    justify-content: space-between;
  }
  .masthead-nav--inline .masthead-nav-links > ul {
    justify-content: flex-start;
  }

  /* layout=centred - mark on its own line, menu centred under it, controls
     parked in the corner so the mark stays optically centred. */
  .masthead-nav--centred .masthead-nav-inner {
    flex-wrap: wrap;
    gap: var(--space-3);
    padding-block: var(--space-5);
  }
  .masthead-nav--centred .masthead-nav-mark {
    margin-inline: auto;
  }
  .masthead-nav--centred .masthead-nav-disclosure {
    flex: 1 0 100%;
  }
  /* Centred by auto margins on the end items, not justify-content: a row
     wider than its box centres by pushing its first items off the left edge,
     where no scroll can reach them. */
  .masthead-nav--centred .masthead-nav-links > ul > li:first-child {
    margin-inline-start: auto;
  }
  .masthead-nav--centred .masthead-nav-links > ul > li:last-child {
    margin-inline-end: auto;
  }
  .masthead-nav--centred .masthead-nav-controls {
    position: absolute;
    inset-block-start: var(--space-5);
    inset-inline-end: var(--space-4);
  }

  /* Last in the block on purpose: it has to outrank --centred's taller
     padding, and the two selectors weigh the same. */
  .masthead-nav--pinned .masthead-nav-inner,
  .masthead-nav--compact .masthead-nav-inner {
    padding-block: var(--space-3);
  }
  .masthead-nav--pinned.masthead-nav--centred .masthead-nav-controls,
  .masthead-nav--compact.masthead-nav--centred .masthead-nav-controls {
    inset-block-start: var(--space-3);
  }
}

/* sticky=compact: once the page has scrolled, the bar tightens and the mark
   comes down a fifth. The behaviour library sets the attribute. */
.masthead-nav--compact[data-hub-shrink="scrolled"] .masthead-nav-inner {
  padding-block: var(--space-2);
}
.masthead-nav--compact[data-hub-shrink="scrolled"] .masthead-nav-logo {
  height: calc(var(--logo-height, 2.75rem) * 0.8);
}

/* ---- nav=minimal: no menu, the mark and the controls at every width ---- */
.masthead-nav--full .masthead-nav-links {
  display: block;
}
.masthead-nav--minimal .masthead-nav-links {
  display: none;
}
.masthead-nav--minimal .masthead-nav-tray {
  justify-content: flex-end;
}
/* These outweigh the menu rungs' rules, which name two classes and the
   tray: this rung has no sheet to slide, drop or scroll. */
@media (width < 60rem) {
  .masthead-nav--minimal .masthead-nav-toggle {
    display: none;
  }
  /* The join control does not shorten as a menu button's word does, so the
     row never breaks here: the mark gives way instead. */
  .masthead-nav--minimal .masthead-nav-inner {
    flex-wrap: nowrap;
  }
  .masthead-nav--minimal .masthead-nav-inner .masthead-nav-disclosure {
    order: 0;
    flex: 0 0 auto;
    max-width: none;
  }
  .masthead-nav--minimal .masthead-nav-inner .masthead-nav-disclosure::details-content {
    content-visibility: visible;
    block-size: auto;
  }
  .masthead-nav--minimal .masthead-nav-inner .masthead-nav-disclosure::before {
    content: none;
  }
  .masthead-nav--minimal .masthead-nav-disclosure .masthead-nav-tray {
    display: flex;
    position: static;
    width: auto;
    max-height: none;
    padding: 0;
    border: 0;
    background: none;
    box-shadow: none;
    visibility: visible;
    translate: none;
  }
  .masthead-nav--minimal .masthead-nav-controls {
    order: 0;
    width: auto;
    flex-direction: row;
    align-items: center;
  }
  /* The join control is the point of a page with no menu; the login link
     returns above 60rem. */
  .masthead-nav--minimal .masthead-nav-login {
    display: none;
  }
}

/* ---- menu-align: which edge the small-screen menu is set against ----
   Below 60rem only: above it `layout` already decides where the menu sits. */
@media (width < 60rem) {
  .masthead-nav--menu-start .masthead-nav-tray {
    text-align: start;
  }
  .masthead-nav--menu-start .masthead-nav-links a,
  .masthead-nav--menu-start .masthead-nav-links button,
  .masthead-nav--menu-start .masthead-nav-login {
    justify-content: flex-start;
  }
  .masthead-nav--menu-centre .masthead-nav-tray {
    text-align: center;
  }
  .masthead-nav--menu-centre .masthead-nav-links a,
  .masthead-nav--menu-centre .masthead-nav-links button,
  .masthead-nav--menu-centre .masthead-nav-login {
    justify-content: center;
  }
  .masthead-nav--menu-centre .masthead-nav-links ul ul {
    align-items: center;
    padding-inline: 0;
    border-inline: none;
  }
  .masthead-nav--menu-end .masthead-nav-tray {
    text-align: end;
  }
  .masthead-nav--menu-end .masthead-nav-links a,
  .masthead-nav--menu-end .masthead-nav-links button,
  .masthead-nav--menu-end .masthead-nav-login {
    justify-content: flex-end;
  }
  /* The rule moves with the items, or it is left down the empty side. */
  .masthead-nav--menu-end .masthead-nav-links ul ul {
    align-items: flex-end;
    padding-inline: 0 var(--space-4);
    border-inline: none;
    border-inline-end: 1px solid var(--masthead-nav-edge);
  }
}

/* No easing keyword follows --transition-fast below: brands ship that token
   with an easing in it, and a second keyword makes the declaration invalid. */
@media (prefers-reduced-motion: no-preference) {
  .masthead-nav-toggle-icon,
  .masthead-nav-toggle-icon::before,
  .masthead-nav-toggle-icon::after {
    transition: transform var(--transition-fast),
                background var(--transition-fast),
                top var(--transition-fast);
  }
  .masthead-nav-links ul ul {
    transition: opacity var(--transition-fast);
  }
  /* `visibility` is in the list so the panel stays on screen while it leaves. */
  .masthead-nav--drawer .masthead-nav-tray {
    transition: translate var(--transition-fast),
                visibility var(--transition-fast);
  }
  .masthead-nav--drawer .masthead-nav-disclosure::before {
    transition: opacity var(--transition-fast),
                visibility var(--transition-fast);
  }
  .masthead-nav--compact .masthead-nav-inner {
    transition: padding var(--transition-fast);
  }
  .masthead-nav--compact .masthead-nav-logo {
    transition: height var(--transition-fast);
  }
}
/* Belt and braces if a brand reintroduces a transition on these. */
@media (prefers-reduced-motion: reduce) {
  .masthead-nav-toggle-icon,
  .masthead-nav-toggle-icon::before,
  .masthead-nav-toggle-icon::after {
    transition: none;
  }
  .masthead-nav-links ul ul {
    transition: none;
  }
  .masthead-nav--drawer .masthead-nav-tray,
  .masthead-nav--drawer .masthead-nav-disclosure::before,
  .masthead-nav--compact .masthead-nav-inner,
  .masthead-nav--compact .masthead-nav-logo {
    transition: none;
  }
}
/* === /pattern masthead-nav@14 === */

/* === pattern signup-card@8 (library v299; appended by page_assemble.py -- 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 signup-card@8 === */

/* === pattern hero-stated@7 (library v299; appended by page_assemble.py -- adopt a newer version by replacing this block, never by adding a second) === */
/* hero-stated v1 - tokens only, selectors prefixed */
.hero-stated {
  overflow-wrap: var(--long-words, break-word);
}
.hero-stated :is(h1, h2, h3, h4) {
  overflow-wrap: var(--long-words, anywhere);
}
@supports (hyphenate-limit-chars: 20 8 8) {
  .hero-stated {
    hyphens: var(--long-word-hyphens, manual);
    hyphenate-limit-chars: 20 8 8;
  }
}
/* Each ground names its own ink, and every rule below reads the pair rather
   than a token, so nothing here knows which ground it is on. */
.hero-stated--plain {
  --hero-stated-ground: var(--color-bg);
  --hero-stated-ink: var(--color-text-soft);
  --hero-stated-title-ink: var(--color-heading);
  --hero-stated-btn-face: var(--color-primary);
  --hero-stated-btn-ink: var(--color-on-primary);
  --hero-stated-ring: var(--color-focus);
}
.hero-stated--brand {
  --hero-stated-ground: var(--color-primary);
  --hero-stated-ink: var(--color-on-primary);
  --hero-stated-title-ink: var(--color-on-primary);
  --hero-stated-btn-face: var(--color-on-primary);
  --hero-stated-btn-ink: var(--color-primary);
  --hero-stated-ring: var(--color-on-primary);
}
.hero-stated--deep {
  --hero-stated-ground: var(--color-scrim);
  --hero-stated-ink: var(--color-on-scrim);
  --hero-stated-title-ink: var(--color-on-scrim);
  --hero-stated-btn-face: var(--color-primary);
  --hero-stated-btn-ink: var(--color-on-primary);
  --hero-stated-ring: var(--color-on-scrim);
}
.hero-stated {
  padding-block: var(--space-12);
  padding-inline: var(--space-4);
  background: var(--hero-stated-ground);
  color: var(--hero-stated-ink);
}
.hero-stated-inner {
  max-width: var(--container-max);
  margin-inline: auto;
}
.hero-stated-eyebrow {
  font-size: 0.8125rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  margin: 0 0 var(--space-4);
}
.hero-stated-title {
  font-family: var(--font-heading);
  /* On the plain ground this is --color-heading, which the contract promises
   at the large-text bar against --color-bg; the clamp floor is 40px. On the
   other two grounds it is that ground's own ink. */
  color: var(--hero-stated-title-ink);
  font-size: calc(clamp(2.5rem, 7vw, 4.5rem) * var(--type-scale, 1));
  font-weight: var(--weight-display, 700);
  letter-spacing: calc(-0.03em + var(--heading-tracking, 0) * 1em);
  line-height: calc(1.02 * var(--heading-leading, 1));
  max-width: 10.75em;
  margin: 0 0 var(--space-5);
  text-wrap: balance;
}
@supports (line-height: 1cap) {
  .hero-stated-title {
    line-height: calc(max(1.02em, 1.45cap) * var(--heading-leading, 1));
  }
}
.hero-stated-sub {
  font-size: clamp(1.0625rem, 1.7vw, 1.25rem);
  line-height: 1.55;
  max-width: 46ch;
  margin: 0 0 var(--space-6);
}
.hero-stated-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  /* 52px: on a page whose opener carries no image, this is what the eye
   lands on after the words. */
  min-height: 52px;
  padding: var(--space-3) var(--space-6);
  border-radius: var(--btn-radius);
  background: var(--hero-stated-btn-face);
  color: var(--hero-stated-btn-ink);
  font-size: 1.0625rem;
  font-weight: 700;
  line-height: 1.5;
  text-decoration: none;
}
.hero-stated-btn:hover {
  text-decoration: underline;
  text-underline-offset: 0.2em;
}
/* The ring is the ground's own, so one rule is right on all three. */
.hero-stated-btn:focus-visible {
  outline: 3px solid var(--hero-stated-ring);
  outline-offset: 4px;
}
.hero-stated--centred .hero-stated-inner {
  text-align: center;
}
.hero-stated--centred .hero-stated-title,
.hero-stated--centred .hero-stated-sub {
  margin-inline: auto;
}
@media (min-width: 48rem) {
  .hero-stated {
    padding-inline: var(--space-8);
  }
}

/* Holding a signup-card in place of the join button. */
.hero-stated--centred .signup-card {
  margin-inline: auto;
}
/* Wide: the words on the left, the card on the right, and the first step
   above the fold. */
@media (min-width: 60rem) {
  .hero-stated:has(.signup-card) {
    padding-block: var(--space-6) var(--space-8);
  }
  .hero-stated-inner:has(.signup-card) {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 24rem;
    column-gap: var(--space-8);
    align-items: start;
  }
  .hero-stated-inner:has(.signup-card) > :not(.hero-stated-cta) {
    grid-column: 1;
  }
  .hero-stated-inner:has(.signup-card) > .hero-stated-cta {
    grid-column: 2;
    grid-row: 1 / span 6;
  }
}
/* === /pattern hero-stated@7 === */

/* === pattern prose-column@7 (library v299; appended by page_assemble.py -- adopt a newer version by replacing this block, never by adding a second) === */
/* prose-column v1 - tokens only, selectors prefixed */
.prose-column {
  overflow-wrap: var(--long-words, break-word);
}
.prose-column :is(h1, h2, h3, h4) {
  overflow-wrap: var(--long-words, anywhere);
}
@supports (hyphenate-limit-chars: 20 8 8) {
  .prose-column {
    hyphens: var(--long-word-hyphens, manual);
    hyphenate-limit-chars: 20 8 8;
  }
}
.prose-column {
  --prose-column-measure: 68ch;
  width: min(100% - 2 * var(--space-4), var(--prose-column-measure));
  margin-inline: auto;
  padding-block: var(--space-6);
  color: var(--color-text);
  font-size: 1.0625rem;
  line-height: 1.7;
}
.prose-column > :first-child {
  margin-top: 0;
}
.prose-column > :last-child {
  margin-bottom: 0;
}
.prose-column p {
  margin: 0 0 var(--space-5);
}
.prose-column h2,
.prose-column h3 {
  font-family: var(--font-heading);
  letter-spacing: calc(-0.02em + var(--heading-tracking, 0) * 1em);
  line-height: calc(1.2 * var(--heading-leading, 1));
  text-wrap: balance;
}
@supports (line-height: 1cap) {
  .prose-column h2,
  .prose-column h3 {
    line-height: calc(max(1.2em, 1.45cap) * var(--heading-leading, 1));
  }
}
/* --color-heading on an h2 only: the clamp floor is 28px, above the size the
   token is promised at, and the column paints no ground of its own. */
.prose-column h2 {
  color: var(--color-heading);
  font-size: calc(clamp(1.75rem, 3vw, 2.25rem) * var(--type-scale, 1));
  font-weight: var(--weight-display, 700);
  margin: var(--space-8) 0 var(--space-4);
}
/* h3 is under the size the heading token covers, so it takes the body ink. */
.prose-column h3 {
  color: var(--color-text);
  font-size: calc(1.25rem * var(--type-scale, 1));
  font-weight: var(--weight-display, 700);
  margin: var(--space-6) 0 var(--space-3);
}
.prose-column ul,
.prose-column ol {
  margin: 0 0 var(--space-5);
  padding-inline-start: var(--space-6);
}
.prose-column li {
  margin-bottom: var(--space-2);
}
.prose-column li::marker {
  color: var(--color-text-soft);
}
.prose-column a {
  /* Inherit: the underline carries the affordance, on every ground and in
   every ink. See the README. */
  color: inherit;
  text-decoration: underline;
  text-underline-offset: 0.18em;
}
.prose-column a:hover {
  text-decoration-thickness: 2px;
}
.prose-column a:focus-visible {
  outline: 3px solid var(--color-focus);
  outline-offset: 2px;
}
.prose-column blockquote {
  margin: var(--space-6) 0;
  padding-inline-start: var(--space-5);
  /* The rule is decoration beside a quote the <blockquote> already marks up,
   so a brand may set it as soft as it likes. */
  border-inline-start: 3px solid var(--color-rule);
}
.prose-column blockquote p {
  font-size: 1.1875rem;
  line-height: 1.55;
  margin-bottom: var(--space-3);
}
.prose-column cite {
  color: var(--color-text-soft);
  font-size: 0.9375rem;
  font-style: normal;
}
/* A table is wider than a phone and says so: it scrolls inside its own box
   rather than making the page scroll sideways. */
.prose-column figure {
  margin: var(--space-6) 0;
  overflow-x: auto;
}
.prose-column table {
  border-collapse: collapse;
  width: 100%;
  min-width: 28rem;
  font-size: 0.9375rem;
}
.prose-column caption {
  color: var(--color-text-soft);
  font-size: 0.875rem;
  text-align: start;
  margin-bottom: var(--space-3);
}
.prose-column th,
.prose-column td {
  text-align: start;
  padding: var(--space-3);
  border-bottom: 1px solid var(--color-rule);
  vertical-align: top;
}
.prose-column thead th {
  background: var(--color-surface-soft);
  border-bottom-width: 2px;
}
.prose-column tbody th {
  font-weight: 700;
}
.prose-column td {
  color: var(--color-text-soft);
}
.prose-column thead th:first-child {
  border-start-start-radius: var(--card-radius);
}
.prose-column thead th:last-child {
  border-start-end-radius: var(--card-radius);
}
/* === /pattern prose-column@7 === */

/* === pattern heading-block@10 (library v299; appended by page_assemble.py -- adopt a newer version by replacing this block, never by adding a second) === */
/* heading-block v4 - tokens only, selectors prefixed */
.heading-block {
  overflow-wrap: var(--long-words, break-word);
}
.heading-block :is(h1, h2, h3, h4) {
  overflow-wrap: var(--long-words, anywhere);
}
@supports (hyphenate-limit-chars: 20 8 8) {
  .heading-block {
    hyphens: var(--long-word-hyphens, manual);
    hyphenate-limit-chars: 20 8 8;
  }
}
.heading-block {
  /* Same gutter idiom as every other pattern. */
  width: min(100% - 2 * var(--space-4), 45rem);
  margin-inline: auto;
  margin-block-end: var(--space-8);
  text-align: start;
}
.heading-block-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  margin: 0 0 var(--space-4);
  /* --color-text: --color-primary carries no stated ratio. */
  color: var(--color-text);
  font-size: 0.8125rem;
  line-height: 1;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
/* Hairline rules either side of the label. Decorative only - the label's own
   words carry the meaning. */
.heading-block-eyebrow::before,
.heading-block-eyebrow::after {
  content: "";
  display: block;
  width: var(--space-5);
  height: 2px;
  border-radius: var(--chip-radius);
  background: color-mix(in srgb, var(--color-primary) 45%, transparent);
}
.heading-block-title {
  margin: 0;
  font-family: var(--font-heading);
  font-size: calc(clamp(2rem, 1.4rem + 2.6vw, 3.6rem) * var(--type-scale, 1));
  line-height: calc(1.02 * var(--heading-leading, 1));
  letter-spacing: calc(-0.035em + var(--heading-tracking, 0) * 1em);
  font-weight: var(--weight-display, 700);
  color: var(--color-heading);
  text-wrap: balance;
}
@supports (line-height: 1cap) {
  .heading-block-title {
    line-height: calc(max(1.02em, 1.45cap) * var(--heading-leading, 1));
  }
}
.heading-block-intro {
  max-width: 42rem;
  margin: var(--space-4) 0 0;
  font-size: 1.0625rem;
  line-height: 1.65;
  color: var(--color-text-soft);
}
/* Tablet up: centred. Phones keep it left. */
@media (min-width: 48rem) {
  .heading-block {
    text-align: center;
  }
  .heading-block-intro {
    margin-inline: auto;
  }
}
/* === /pattern heading-block@10 === */

/* === pattern member-grid@7 (library v299; appended by page_assemble.py -- 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;
}
/* === /pattern member-grid@7 === */

/* === pattern source-note@2 (library v299; appended by page_assemble.py -- adopt a newer version by replacing this block, never by adding a second) === */
/* source-note v2 - tokens only, selectors prefixed */
.source-note {
  overflow-wrap: var(--long-words, break-word);
}
.source-note :is(h1, h2, h3, h4) {
  overflow-wrap: var(--long-words, anywhere);
}
@supports (hyphenate-limit-chars: 20 8 8) {
  .source-note {
    hyphens: var(--long-word-hyphens, manual);
    hyphenate-limit-chars: 20 8 8;
  }
}
.source-note {
  margin: var(--space-2) 0 var(--space-4);
  font-size: 0.75rem;
  font-weight: 400;
  line-height: 1.45;
  max-width: 60ch;
  text-wrap: pretty;
}
/* === /pattern source-note@2 === */

/* === pattern link-cluster@8 (library v299; appended by page_assemble.py -- adopt a newer version by replacing this block, never by adding a second) === */
/* link-cluster v1 - tokens only, selectors prefixed */
.link-cluster {
  overflow-wrap: var(--long-words, break-word);
}
.link-cluster :is(h1, h2, h3, h4) {
  overflow-wrap: var(--long-words, anywhere);
}
@supports (hyphenate-limit-chars: 20 8 8) {
  .link-cluster {
    hyphens: var(--long-word-hyphens, manual);
    hyphenate-limit-chars: 20 8 8;
  }
}
/* Each ground names its own ink and pill face; every rule reads the pair. */
.link-cluster--plain {
  --link-cluster-ground: var(--color-bg);
  --link-cluster-ink: var(--color-text);
  --link-cluster-quiet: var(--color-text-soft);
  --link-cluster-title-ink: var(--color-heading);
  --link-cluster-face: var(--color-surface);
  --link-cluster-ring: var(--color-focus);
  --link-cluster-edge: var(--color-rule);
}
.link-cluster--soft {
  --link-cluster-ground: var(--color-surface-soft);
  --link-cluster-ink: var(--color-text);
  --link-cluster-quiet: var(--color-text-soft);
  --link-cluster-title-ink: var(--color-text);
  --link-cluster-face: var(--color-surface);
  --link-cluster-ring: var(--color-focus);
  --link-cluster-edge: var(--color-rule);
}
.link-cluster--brand {
  --link-cluster-ground: var(--color-primary);
  --link-cluster-ink: var(--color-primary);
  --link-cluster-quiet: var(--color-on-primary);
  --link-cluster-title-ink: var(--color-on-primary);
  --link-cluster-face: var(--color-on-primary);
  --link-cluster-ring: var(--color-on-primary);
  --link-cluster-edge: transparent;
}
.link-cluster {
  padding-block: var(--space-8);
  padding-inline: var(--space-4);
  background: var(--link-cluster-ground);
}
.link-cluster-inner {
  max-width: var(--container-max);
  margin-inline: auto;
  text-align: center;
}
.link-cluster-title {
  font-family: var(--font-heading);
  color: var(--link-cluster-title-ink);
  font-size: calc(clamp(1.75rem, 2.8vw, 2.25rem) * var(--type-scale, 1));
  font-weight: var(--weight-display, 700);
  letter-spacing: calc(-0.02em + var(--heading-tracking, 0) * 1em);
  line-height: calc(1.2 * var(--heading-leading, 1));
  margin: 0 0 var(--space-3);
  text-wrap: balance;
}
@supports (line-height: 1cap) {
  .link-cluster-title {
    line-height: calc(max(1.2em, 1.45cap) * var(--heading-leading, 1));
  }
}
.link-cluster-intro {
  color: var(--link-cluster-quiet);
  font-size: 1rem;
  line-height: 1.6;
  max-width: 46ch;
  margin: 0 auto var(--space-5);
}
.link-cluster-list {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--space-2);
  list-style: none;
  margin: 0;
  padding: 0;
}
/* The pill is a target before it is a shape: 44px is the floor, and the
   horizontal padding is what keeps two short place names apart. */
.link-cluster-link {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: var(--space-2) var(--space-4);
  border: 1px solid var(--link-cluster-edge);
  border-radius: var(--chip-radius);
  /* The face alone does not separate a pill from the ground on a brand whose
   surface and surface-soft are nearly the same colour, so the edge is drawn
   on the two grounds where that can happen. */
  background: var(--link-cluster-face);
  color: var(--link-cluster-ink);
  font-size: 0.9375rem;
  font-weight: 700;
  line-height: 1.3;
  text-decoration: none;
}
.link-cluster-link:hover {
  text-decoration: underline;
  text-underline-offset: 0.2em;
}
.link-cluster-link:focus-visible {
  outline: 3px solid var(--link-cluster-ring);
  outline-offset: 3px;
}
/* === /pattern link-cluster@8 === */

/* === pattern cta-band@7 (library v299; appended by page_assemble.py -- adopt a newer version by replacing this block, never by adding a second) === */
/* cta-band - tokens only, selectors prefixed */
.cta-band {
  overflow-wrap: var(--long-words, break-word);
}
.cta-band :is(h1, h2, h3, h4) {
  overflow-wrap: var(--long-words, anywhere);
}
@supports (hyphenate-limit-chars: 20 8 8) {
  .cta-band {
    hyphens: var(--long-word-hyphens, manual);
    hyphenate-limit-chars: 20 8 8;
  }
}

/* Each rung names its own ground, ink, control pair and ring, and every rule
   below reads those rather than a token, so nothing here knows which ground it
   is on. The ring is per rung and not --color-focus everywhere: on --brand and
   --deep that token is a brand colour landing on a brand colour, and it
   disappears into the band on every sample brand. See the README. */
.cta-band--plain {
  --cta-band-ground: var(--color-bg);
  --cta-band-ink: var(--color-text);
  --cta-band-btn-face: var(--color-primary);
  --cta-band-btn-ink: var(--color-on-primary);
  --cta-band-ring: var(--color-focus);
}
.cta-band--soft {
  --cta-band-ground: var(--color-surface-soft);
  --cta-band-ink: var(--color-text);
  --cta-band-btn-face: var(--color-primary);
  --cta-band-btn-ink: var(--color-on-primary);
  --cta-band-ring: var(--color-focus);
}
.cta-band--brand {
  --cta-band-ground: var(--color-primary);
  --cta-band-ink: var(--color-on-primary);
  --cta-band-btn-face: var(--color-on-primary);
  --cta-band-btn-ink: var(--color-primary);
  --cta-band-ring: var(--color-on-primary);
}
.cta-band--deep {
  --cta-band-ground: var(--color-scrim);
  --cta-band-ink: var(--color-on-scrim);
  --cta-band-btn-face: var(--color-on-scrim);
  --cta-band-btn-ink: var(--color-scrim);
  --cta-band-ring: var(--color-on-scrim);
}
.cta-band {
  padding-block: var(--space-12);
  padding-inline: var(--space-4);
  background: var(--cta-band-ground);
  color: var(--cta-band-ink);
  text-align: center;
}
.cta-band-inner {
  max-width: var(--container-max);
  margin-inline: auto;
}
.cta-band-eyebrow {
  font-size: 0.8125rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  margin: 0 0 var(--space-4);
}
/* Not --color-heading: that token is promised against --color-bg, and three of
   the four rungs paint a ground of their own. */
.cta-band-title {
  font-family: var(--font-heading);
  color: var(--cta-band-ink);
  font-size: calc(clamp(2rem, 4.5vw, 3.25rem) * var(--type-scale, 1));
  font-weight: var(--weight-display, 700);
  letter-spacing: calc(-0.02em + var(--heading-tracking, 0) * 1em);
  line-height: calc(1.1 * var(--heading-leading, 1));
  margin: 0 0 var(--space-4);
  text-wrap: balance;
}
@supports (line-height: 1cap) {
  .cta-band-title {
    line-height: calc(max(1.1em, 1.45cap) * var(--heading-leading, 1));
  }
}
.cta-band-lead {
  font-size: 1.0625rem;
  line-height: 1.6;
  max-width: 46ch;
  margin: 0 auto var(--space-6);
}
.cta-band-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  /* 48px target, above the 44px AAA floor. */
  min-height: 48px;
  padding: var(--space-3) var(--space-6);
  border-radius: var(--btn-radius);
  background: var(--cta-band-btn-face);
  color: var(--cta-band-btn-ink);
  font-weight: 700;
  line-height: 1.5;
  text-decoration: none;
}
.cta-band-btn:hover {
  text-decoration: underline;
  text-underline-offset: 0.2em;
}
/* The offset leaves a band-coloured gap, putting the guaranteed pair either
   side of the ring. */
.cta-band-btn:focus-visible {
  outline: 3px solid var(--cta-band-ring);
  outline-offset: 4px;
}
/* === /pattern cta-band@7 === */

/* === pattern colophon@3 (library v299; appended by page_assemble.py -- adopt a newer version by replacing this block, never by adding a second) === */
/* colophon v3 - tokens only, selectors prefixed */
.colophon {
  overflow-wrap: var(--long-words, break-word);
}
.colophon :is(h1, h2, h3, h4) {
  overflow-wrap: var(--long-words, anywhere);
}
@supports (hyphenate-limit-chars: 20 8 8) {
  .colophon {
    hyphens: var(--long-word-hyphens, manual);
    hyphenate-limit-chars: 20 8 8;
  }
}
.colophon {
  border-top: 1px solid var(--color-rule);
  padding-block: var(--space-8) var(--space-6);
  font-size: 0.875rem;
  color: var(--color-text-soft);
}
.colophon--plain {
  background: var(--color-bg);
}
.colophon--soft {
  background: var(--color-surface);
}
.colophon-inner {
  width: 92%;
  max-width: var(--container-max);
  margin-inline: auto;
  display: grid;
  gap: var(--space-4);
}
/* layout: --line is the centred stack at every width; --columns spreads the
   three groups across the row from 60rem up and is the same stack below. */
.colophon--line .colophon-inner,
.colophon--columns .colophon-inner {
  justify-items: center;
  text-align: center;
}
/* mark: the brand mark above everything else, or nothing at all. */
.colophon--none .colophon-mark {
  display: none;
}
.colophon--logo .colophon-mark {
  display: inline-flex;
  margin-block-end: var(--space-2);
}
/* The set height is the floor: `height: auto` under a `max-height` alone
   resolves a viewBox-only SVG to 0x0. A tenth over the header's height, so
   the footer mark reads as a signature and not a repeat of the bar. */
.colophon-logo {
  display: block;
  width: auto;
  height: calc(var(--logo-height, 2.75rem) * 1.1);
  max-width: 100%;
  object-fit: contain;
}
/* The platform decides the menu's own markup, so its rules reach it by
   descent rather than by a generated class name. */
.colophon-menu ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--space-2) var(--space-6);
}
.colophon-legal {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--space-2) var(--space-6);
}
.colophon-menu a,
.colophon-legal a {
  color: var(--color-text-soft);
  text-decoration: none;
}
.colophon-menu a:hover,
.colophon-legal a:hover {
  color: var(--color-text);
  text-decoration: underline;
  text-underline-offset: 0.2em;
}
.colophon a:focus-visible {
  outline: 2px solid var(--color-focus);
  outline-offset: 2px;
}
.colophon-copyright {
  margin: 0;
}
@media (min-width: 60rem) {
  .colophon--columns .colophon-inner {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    justify-items: start;
    align-items: start;
    text-align: start;
    gap: var(--space-6) var(--space-8);
  }
  /* A brand with no managed footer menu deletes the nav: two columns then,
     not two columns and a hole. */
  .colophon--columns .colophon-inner:not(:has(.colophon-menu)) {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .colophon--columns .colophon-mark {
    grid-column: 1 / -1;
  }
  .colophon--columns .colophon-menu ul,
  .colophon--columns .colophon-legal {
    flex-direction: column;
    justify-content: flex-start;
    gap: var(--space-2);
  }
  .colophon--columns .colophon-copyright {
    justify-self: end;
    text-align: end;
  }
}
/* === /pattern colophon@3 === */

/* === pattern crumb-trail@2 (library v299; appended by page_assemble.py -- adopt a newer version by replacing this block, never by adding a second) === */
/* crumb-trail v2 - tokens only, selectors prefixed */
.crumb-trail {
  overflow-wrap: var(--long-words, break-word);
}
.crumb-trail :is(h1, h2, h3, h4) {
  overflow-wrap: var(--long-words, anywhere);
}
@supports (hyphenate-limit-chars: 20 8 8) {
  .crumb-trail {
    hyphens: var(--long-word-hyphens, manual);
    hyphenate-limit-chars: 20 8 8;
  }
}
.crumb-trail {
  box-sizing: border-box;
  margin-inline: auto;
  padding-block: var(--space-3) var(--space-2);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-2);
  font-size: 0.875rem;
  line-height: 1.5;
  color: var(--color-text-soft);
}
.crumb-trail--page {
  width: min(100% - 2 * var(--space-4), var(--container-max));
}
/* 52rem is the article column, held by the article masthead, the contents
   list and the author block. Any other number puts a second left edge on
   the page. */
.crumb-trail--column {
  width: min(100% - 2 * var(--space-4), 52rem);
}
.crumb-trail-link {
  color: var(--color-text-soft);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 0.18em;
}
.crumb-trail-link:hover {
  color: var(--color-text);
}
.crumb-trail-link:focus-visible {
  outline: 2px solid var(--color-focus);
  outline-offset: 2px;
}
.crumb-trail-separator {
  color: var(--color-text-soft);
}
.crumb-trail-current {
  color: var(--color-text);
  font-weight: 600;
}
/* === /pattern crumb-trail@2 === */

/* bdsm-nevada: source line under the member block, held to the page width */
.source-note{box-sizing:border-box;max-width:var(--container-max);margin-inline:auto;padding-inline:var(--space-5)}

/* bdsm-nevada inner pages: shorter photo hero, card beside the words, breadcrumb, article column */
.nv .hero--page{min-height:min(70vh,640px)}
.nv .hero--card{min-height:0}
.nv .hero-grid{display:grid;grid-template-columns:minmax(0,1fr);gap:2.4rem;align-items:center}
@media (min-width:960px){.nv .hero--card .hero-grid{grid-template-columns:minmax(0,1.1fr) minmax(0,26rem)}}
.nv .hero-side{position:relative;z-index:2}
.nv .hero--card .tag{margin-bottom:1.2rem}
.nv .crumbs{font-family:var(--nv-ui);font-size:.74rem;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--nv-dim);margin-bottom:1.4rem}
.nv .crumbs a{color:var(--nv-mute);text-decoration:none;border-bottom:1px solid var(--nv-line2)}
.nv .crumbs a:hover{color:var(--nv-bone)}
.nv .crumbs span[aria-current]{color:var(--nv-gold)}
.nv .nv-article{max-width:46rem;margin:0 auto}
.nv .nv-article .nv-lede{font-size:1.2rem;line-height:1.75;color:var(--nv-bone);margin-bottom:2.2rem}
.nv .nv-article h2{font-size:clamp(1.5rem,3vw,2.1rem);margin:2.6rem 0 .9rem}
.nv .nv-article p{margin-bottom:1.15rem}
.nv .nv-article a{color:var(--nv-gold);text-decoration:none;border-bottom:1px solid rgba(217,164,65,.4)}
.nv .nv-article a:hover{color:var(--nv-gold-hi)}

/* bdsm-nevada: sign-up card in its own band, in the homepage's lettering */
.nv .card-band-grid{display:grid;grid-template-columns:minmax(0,1fr);gap:2.4rem;align-items:center}
@media (min-width:900px){.nv .card-band-grid{grid-template-columns:minmax(0,1fr) minmax(0,27rem);gap:4rem}}
.nv .card-band .sub{margin-bottom:1.4rem}
.nv .signup-card{font-family:var(--nv-ui);background:var(--nv-ink0);border:1px solid var(--nv-line2);border-radius:16px;box-shadow:0 18px 50px rgba(0,0,0,.5),0 0 30px rgba(232,17,45,.08)}
.nv .signup-card :is(button,input,select,label,legend,p,span,a){font-family:var(--nv-ui)}
.nv .signup-card :is(h2,h3,legend){letter-spacing:.02em}

/* === nv-guides:start === */
/* bdsm-nevada: safety hub, safety guides and the BDSM A–Z (2026-10-09). All scoped under .nv */

/* hero: photo held to the right, so a centred subject stays clear of the words */
@media (min-width:821px){
  .nv .hero--aside .hero-art{left:42%}
  .nv .hero--aside .hero-art::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,var(--nv-ink0) 0%,rgba(11,7,9,0) 45%)}
  .nv .hero--aside .hero-left{max-width:min(44rem,54%)}
}

/* shared prose column for the guides */
.nv .sg-col{max-width:46rem;margin:0 auto}
.nv .sg-lede{font-size:clamp(1.15rem,2vw,1.3rem);line-height:1.75;color:var(--nv-bone);margin-bottom:1.6rem}
.nv .sg-col p{margin-bottom:1.15rem}
.nv .sg-col h2{font-size:clamp(1.6rem,3.2vw,2.3rem);margin:0 0 1rem}
.nv .sg-col h3{font-family:var(--nv-ui);font-size:.92rem;font-weight:800;letter-spacing:.08em;text-transform:uppercase;color:var(--nv-bone);margin:1.8rem 0 .5rem}
.nv .sg-col a,.nv .sg-link,.nv .az-term dd a,.nv .sf-path-note a,.nv .faq .a a{color:var(--nv-gold);text-decoration:none;border-bottom:1px solid rgba(217,164,65,.45)}
.nv .sg-col a:hover,.nv .sg-link:hover,.nv .az-term dd a:hover,.nv .sf-path-note a:hover,.nv .faq .a a:hover{color:var(--nv-gold-hi)}
.nv .sg-bullets{list-style:none;margin:0 0 1.3rem}
.nv .sg-bullets li{position:relative;padding-left:1.5rem;margin-bottom:.6rem}
.nv .sg-bullets li::before{content:"";position:absolute;left:.1rem;top:.72em;width:7px;height:7px;background:var(--nv-red);transform:rotate(45deg)}
.nv .sg-defs{margin:1.4rem 0 0;border-top:1px solid var(--nv-line)}
.nv .sg-defs div{padding:1.2rem 0;border-bottom:1px solid var(--nv-line)}
.nv .sg-defs dt{font-family:var(--nv-disp);font-weight:400;font-size:1.35rem;letter-spacing:.03em;text-transform:uppercase;color:var(--nv-bone);margin-bottom:.3rem}
.nv .sg-defs dd{margin:0}
.nv .nv-callout{margin:2.2rem 0 0;padding:1.7rem clamp(1.2rem,3vw,1.9rem) 1.4rem;border:1px solid var(--nv-line2);border-left:3px solid var(--nv-red);background:var(--nv-ink1)}
.nv .nv-callout h3{margin-top:0;color:var(--nv-gold)}
.nv .nv-callout p:last-child{margin-bottom:0}

/* /safety: the promise, set large */
.nv .sf-promise{max-width:54rem;margin:0 auto;text-align:center}
.nv .sf-promise blockquote{margin:0;font-family:var(--nv-body);font-style:italic;font-size:clamp(1.55rem,3.6vw,2.6rem);line-height:1.35;color:var(--nv-bone)}
.nv .sf-promise .sf-rule{display:block;width:140px;height:2px;margin:2.2rem auto;background:var(--nv-hairline)}
.nv .sf-promise .sf-after{max-width:40rem;margin:0 auto;color:var(--nv-mute)}

/* /safety: protections, a label column beside each group's list */
.nv .sf-index{margin-top:2.6rem;border-top:1px solid var(--nv-line)}
.nv .sf-group{display:grid;grid-template-columns:minmax(0,1fr);gap:1.2rem 3.4rem;padding:2.6rem 0;border-bottom:1px solid var(--nv-line)}
@media (min-width:900px){
  .nv .sf-group{grid-template-columns:16rem minmax(0,1fr)}
  .nv .sf-group-head{position:sticky;top:100px;align-self:start}
}
.nv .sf-group-head h3{font-family:var(--nv-disp);font-weight:400;font-size:clamp(1.5rem,2.6vw,2rem);line-height:1.05;letter-spacing:.02em;text-transform:uppercase;color:var(--nv-bone);margin-bottom:.6rem}
.nv .sf-group-head p{font-size:.95rem;line-height:1.7;font-style:italic;color:var(--nv-dim)}
.nv .sf-list{display:grid;gap:1.7rem;margin:0}
@media (min-width:640px){.nv .sf-list{grid-template-columns:repeat(2,minmax(0,1fr));gap:2rem 2.6rem}}
.nv .sf-item dt{font-family:var(--nv-ui);font-size:.84rem;font-weight:800;letter-spacing:.1em;text-transform:uppercase;color:var(--nv-bone);margin-bottom:.45rem}
.nv .sf-item dd{margin:0;font-size:.97rem;line-height:1.75}
.nv .sf-item .sf-means{display:block;margin-top:.55rem;font-size:.92rem;color:var(--nv-mute)}
.nv .sf-item .sf-means b{font-family:var(--nv-ui);font-size:.64rem;font-weight:800;letter-spacing:.2em;text-transform:uppercase;color:var(--nv-gold);margin-right:.45rem}
.nv .sf-standards{list-style:none;display:flex;flex-wrap:wrap;justify-content:center;gap:.8rem 2.2rem;margin:2.6rem 0 0;font-family:var(--nv-ui);font-size:.84rem;line-height:1.5;color:var(--nv-dim);text-align:center}
.nv .sf-standards b{color:var(--nv-bone);font-weight:700}

/* /safety: the four guides, in the order they're needed */
.nv .sf-path{list-style:none;margin:2.6rem 0 0;display:grid;gap:12px;counter-reset:sfp}
@media (min-width:700px){.nv .sf-path{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (min-width:700px) and (max-width:1099px){.nv .sf-path li:last-child:nth-child(odd){grid-column:1/-1}}
@media (min-width:1100px){.nv .sf-path{grid-template-columns:repeat(5,minmax(0,1fr))}}
.nv .sf-path li{counter-increment:sfp}
.nv .sf-path a{display:flex;flex-direction:column;height:100%;padding:24px 22px 22px;border:1px solid var(--nv-line);border-radius:2px;background:var(--nv-ink0);text-decoration:none;transition:border-color .3s,transform .3s}
.nv .sf-path a::before{content:"0" counter(sfp);font-family:var(--nv-disp);font-size:2.6rem;line-height:1;color:var(--nv-red);margin-bottom:1rem}
.nv .sf-path a:hover{border-color:var(--nv-line2);transform:translateY(-3px)}
.nv .sf-path .when{font-family:var(--nv-ui);font-size:.64rem;font-weight:800;letter-spacing:.22em;text-transform:uppercase;color:var(--nv-gold);margin-bottom:.45rem}
.nv .sf-path b{font-family:var(--nv-body);font-size:1.25rem;font-weight:700;line-height:1.3;color:var(--nv-bone);margin-bottom:.45rem}
.nv .sf-path .d{font-size:.93rem;line-height:1.65;color:var(--nv-mute)}
.nv .sf-path-note{margin-top:1.8rem;text-align:center;font-size:.98rem}
.nv .sf-where{display:grid;gap:1.6rem 3rem;margin-top:2rem}
@media (min-width:820px){.nv .sf-where{grid-template-columns:repeat(2,minmax(0,1fr))}}
.nv .sf-where h3{font-family:var(--nv-ui);font-size:.86rem;font-weight:800;letter-spacing:.12em;text-transform:uppercase;color:var(--nv-gold);margin-bottom:.5rem}

/* consent: the negotiation, question by question */
.nv .neg{list-style:none;margin:1.8rem 0 0;counter-reset:neg;border-top:1px solid var(--nv-line)}
.nv .neg li{counter-increment:neg;display:grid;grid-template-columns:3.4rem minmax(0,1fr);gap:.9rem;padding:1.25rem 0;border-bottom:1px solid var(--nv-line)}
.nv .neg li::before{content:counter(neg,decimal-leading-zero);font-family:var(--nv-disp);font-size:1.7rem;line-height:1.15;color:var(--nv-gold)}
.nv .neg b{display:block;font-family:var(--nv-body);font-size:1.16rem;font-weight:700;color:var(--nv-bone);margin-bottom:.25rem}
.nv .neg span{display:block;font-size:.97rem}

/* consent: the traffic light */
.nv .tl{list-style:none;margin:2.2rem 0 0;display:grid;gap:12px}
.nv .tl li{display:grid;grid-template-columns:auto minmax(0,1fr);gap:1.3rem;align-items:center;padding:1.4rem 1.5rem;border:1px solid var(--nv-line);border-radius:2px;background:var(--nv-ink0)}
.nv .tl .lamp{width:58px;height:58px;border-radius:50%;flex:none}
.nv .tl .tl-g .lamp{background:radial-gradient(circle at 35% 35%,#8af0ad,#2f9e57 70%);box-shadow:0 0 26px rgba(63,191,106,.45)}
.nv .tl .tl-y .lamp{background:radial-gradient(circle at 35% 35%,#ffe58a,#d9a020 70%);box-shadow:0 0 26px rgba(242,194,48,.4)}
.nv .tl .tl-r .lamp{background:radial-gradient(circle at 35% 35%,#ff7a88,var(--nv-red) 70%);box-shadow:0 0 26px var(--nv-glow)}
.nv .tl b{display:block;font-family:var(--nv-disp);font-weight:400;font-size:clamp(1.5rem,3vw,2rem);line-height:1.1;letter-spacing:.03em;text-transform:uppercase;color:var(--nv-bone);margin-bottom:.25rem}
.nv .tl span{display:block;font-size:.98rem}

/* spacing helpers for the guide column */
.nv .sg-col .tl,.nv .sg-col .neg,.nv .sg-col .sg-defs{margin-bottom:2.2rem}
.nv .sg-col h2.sg-sub{margin-top:3.4rem}
.nv .sg-col h2+p.kicker{margin-top:0}
.nv .sg-col .ac-plan+.sg-after,.nv .sg-after{margin-top:1.6rem}
.nv .sg-col h2:not(:first-child){margin-top:3rem}
.nv .sg-col .kicker+h2{margin-top:0}

/* tables: the yes/no/maybe example and the frameworks side by side */
.nv .nv-table-wrap{overflow-x:auto;margin:1.8rem 0 0;border:1px solid var(--nv-line);border-radius:2px;background:var(--nv-ink0)}
.nv .nv-table-wrap:focus-visible{outline:2px solid var(--nv-gold-hi);outline-offset:3px}
.nv .nv-table{width:100%;min-width:30rem;border-collapse:collapse;font-size:.95rem;line-height:1.6}
.nv .nv-table caption{caption-side:top;text-align:left;padding:1rem 1.2rem;font-family:var(--nv-ui);font-size:.68rem;font-weight:800;letter-spacing:.2em;text-transform:uppercase;color:var(--nv-dim);border-bottom:1px solid var(--nv-line)}
.nv .nv-table th,.nv .nv-table td{padding:.9rem 1.2rem;text-align:left;vertical-align:top;border-bottom:1px solid var(--nv-line)}
.nv .nv-table thead th{font-family:var(--nv-ui);font-size:.7rem;font-weight:800;letter-spacing:.16em;text-transform:uppercase;color:var(--nv-gold);background:var(--nv-ink1)}
.nv .nv-table tbody th{font-family:var(--nv-ui);font-size:.9rem;font-weight:700;color:var(--nv-bone)}
.nv .nv-table tbody tr:last-child>*{border-bottom:0}
.nv .nv-table .mk{font-family:var(--nv-ui);font-size:.78rem;font-weight:800;letter-spacing:.12em;text-transform:uppercase;white-space:nowrap}
.nv .nv-table .mk-yes{color:#7fe0a2}
.nv .nv-table .mk-maybe{color:#f2c94c}
.nv .nv-table .mk-no{color:var(--nv-hot)}

/* meeting: from first message to first scene */
.nv .stages{list-style:none;margin:2.6rem 0 0;position:relative}
.nv .stages::before{content:"";position:absolute;left:23px;top:10px;bottom:10px;width:2px;background:linear-gradient(180deg,var(--nv-red),var(--nv-gold))}
.nv .stage{position:relative;padding:0 0 2.8rem 4.6rem}
.nv .stage:last-child{padding-bottom:0}
.nv .stage .node{position:absolute;left:0;top:0;width:48px;height:48px;border-radius:50%;display:flex;align-items:center;justify-content:center;background:var(--nv-ink0);border:2px solid var(--nv-red);font-family:var(--nv-disp);font-size:1.2rem;color:var(--nv-bone)}
.nv .stage .when{font-family:var(--nv-ui);font-size:.66rem;font-weight:800;letter-spacing:.24em;text-transform:uppercase;color:var(--nv-gold);margin-bottom:.35rem;padding-top:.2rem}
.nv .stage h3{font-family:var(--nv-disp);font-weight:400;font-size:clamp(1.45rem,2.8vw,2rem);line-height:1.05;letter-spacing:.02em;text-transform:uppercase;color:var(--nv-bone);margin-bottom:.8rem}
.nv .stage p{margin-bottom:.9rem}
.nv .stage a{color:var(--nv-gold);text-decoration:none;border-bottom:1px solid rgba(217,164,65,.45)}

/* meeting: the safe call, a note to send a friend */
.nv .safecall{max-width:36rem;margin:2.6rem auto 0;padding:2.1rem clamp(1.3rem,4vw,2.2rem) 1.6rem;background:var(--nv-bone);color:#241a1c;border-radius:4px;box-shadow:0 22px 60px rgba(0,0,0,.55);transform:rotate(-.7deg)}
.nv .safecall h3{font-family:var(--nv-disp);font-weight:400;font-size:1.8rem;letter-spacing:.03em;text-transform:uppercase;color:#241a1c;margin-bottom:.25rem}
.nv .safecall .sc-sub{font-family:var(--nv-ui);font-size:.84rem;line-height:1.5;color:#5a4646;margin-bottom:1.1rem}
.nv .safecall dl{margin:0}
.nv .safecall dl div{display:grid;grid-template-columns:8.4rem minmax(0,1fr);gap:1rem;padding:.75rem 0;border-bottom:1px dashed rgba(36,26,28,.35)}
.nv .safecall dl div:last-child{border-bottom:0}
.nv .safecall dt{font-family:var(--nv-ui);font-size:.68rem;font-weight:800;letter-spacing:.16em;text-transform:uppercase;color:#8e0f1f;padding-top:.2rem}
.nv .safecall dd{margin:0;font-size:.98rem;line-height:1.55;color:#2c2023}
@media (max-width:520px){.nv .safecall dl div{grid-template-columns:minmax(0,1fr);gap:.15rem}}

/* meeting: red flags */
.nv .flags{list-style:none;margin:2rem 0 0;border-top:1px solid var(--nv-line)}
@media (min-width:760px){.nv .flags{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));column-gap:3rem}}
.nv .flags li{display:grid;grid-template-columns:1.5rem minmax(0,1fr);gap:.8rem;padding:1.15rem 0;border-bottom:1px solid var(--nv-line)}
.nv .flags li::before{content:"✕";font-family:var(--nv-ui);font-weight:800;color:var(--nv-hot);line-height:1.6}
.nv .flags b{display:block;font-family:var(--nv-ui);font-size:.95rem;font-weight:700;color:var(--nv-bone);margin-bottom:.2rem}
.nv .flags span{display:block;font-size:.94rem;line-height:1.7}

/* aftercare: what it can look like, in three columns */
.nv .ac-menu{display:grid;gap:16px;margin-top:2.4rem}
@media (min-width:820px){.nv .ac-menu{grid-template-columns:repeat(3,minmax(0,1fr))}}
.nv .ac-col{padding:1.8rem 1.6rem 1.4rem;background:var(--nv-ink0);border:1px solid var(--nv-line);border-top:3px solid var(--nv-red)}
.nv .ac-col:nth-child(2){border-top-color:var(--nv-gold)}
.nv .ac-col:nth-child(3){border-top-color:var(--nv-bone)}
.nv .ac-col h3{font-family:var(--nv-disp);font-weight:400;font-size:1.45rem;letter-spacing:.03em;text-transform:uppercase;color:var(--nv-bone);margin-bottom:.8rem}
.nv .ac-col ul{list-style:none;margin:0}
.nv .ac-col li{padding:.6rem 0;border-bottom:1px solid var(--nv-line);font-size:.97rem;line-height:1.6}
.nv .ac-col li:last-child{border-bottom:0}
.nv .drop-pair{display:grid;gap:16px;margin:1.8rem 0 1.6rem}
@media (min-width:760px){.nv .drop-pair{grid-template-columns:repeat(2,minmax(0,1fr))}}
.nv .drop-pair section{padding:1.6rem 1.5rem;border:1px solid var(--nv-line2);background:var(--nv-ink1)}
.nv .drop-pair h3{margin-top:0}
.nv .drop-pair p{margin:0}

/* aftercare: write it down */
.nv .ac-plan{margin:2rem 0 0;padding:2.2rem clamp(1.3rem,4vw,2.6rem) 1.6rem;border:1px solid var(--nv-line2);background:linear-gradient(180deg,rgba(217,164,65,.07),rgba(217,164,65,0) 80%)}
.nv .ac-plan p{font-family:var(--nv-body);font-size:clamp(1.08rem,2vw,1.28rem);line-height:2.05;color:var(--nv-bone);margin-bottom:.5rem}
.nv .ac-plan .blank{display:inline-block;min-width:8em;border-bottom:1px solid var(--nv-gold);color:var(--nv-dim);font-size:.8em;font-style:italic;padding:0 .3em;line-height:1.5}

/* scams: one card per script */
.nv .scams{display:grid;gap:16px;margin-top:2.4rem}
@media (min-width:880px){.nv .scams{grid-template-columns:repeat(2,minmax(0,1fr))}}
.nv .scam{padding:2rem clamp(1.3rem,3vw,1.9rem) 1.6rem;background:var(--nv-ink0);border:1px solid var(--nv-line);border-radius:2px}
.nv .scam h3{font-family:var(--nv-disp);font-weight:400;font-size:clamp(1.4rem,2.4vw,1.75rem);line-height:1.05;letter-spacing:.02em;text-transform:uppercase;color:var(--nv-bone)}
.nv .scam .line{margin:1rem 0 .4rem;padding-left:1rem;border-left:2px solid var(--nv-red);font-family:var(--nv-body);font-style:italic;font-size:1.12rem;line-height:1.6;color:var(--nv-bone)}
.nv .scam dl{margin:0}
.nv .scam dt{font-family:var(--nv-ui);font-size:.64rem;font-weight:800;letter-spacing:.22em;text-transform:uppercase;color:var(--nv-gold);margin-top:1rem}
.nv .scam dd{margin:.3rem 0 0;font-size:.96rem;line-height:1.72}

/* A–Z: letter bar, start-here row, letters */
.nv section.az-body{padding-top:0}
.nv .az-bar{position:sticky;top:76px;z-index:150;background:rgba(11,7,9,.95);backdrop-filter:blur(10px);border-bottom:1px solid var(--nv-line)}
.nv .az-bar ul{list-style:none;display:flex;flex-wrap:wrap;justify-content:center;gap:2px;padding:.55rem 0}
.nv .az-bar a{display:inline-flex;align-items:center;justify-content:center;min-width:32px;height:34px;padding:0 .25rem;font-family:var(--nv-disp);font-size:1.05rem;color:var(--nv-bone);text-decoration:none;border-radius:2px;transition:background .2s,color .2s}
.nv .az-bar a:hover{background:var(--nv-red);color:#fff}
.nv .az-start{display:grid;gap:1.2rem 2.4rem;align-items:center;padding:2rem clamp(1.3rem,4vw,2.4rem);border:1px solid var(--nv-line2);background:var(--nv-ink1)}
@media (min-width:900px){.nv .az-start{grid-template-columns:minmax(0,1fr) minmax(0,1.7fr)}}
.nv .az-start h2{font-size:clamp(1.5rem,3vw,2.1rem);margin:0 0 .4rem}
.nv .az-start p{font-size:.97rem}
.nv .az-start ol{list-style:none;margin:0;display:flex;flex-wrap:wrap;gap:.6rem}
.nv .az-start a{display:inline-flex;align-items:center;gap:.55rem;min-height:44px;padding:.5rem 1.05rem;border:1px solid var(--nv-line2);border-radius:999px;font-family:var(--nv-ui);font-size:.84rem;font-weight:700;color:var(--nv-bone);text-decoration:none;transition:border-color .2s,color .2s}
.nv .az-start a b{font-family:var(--nv-disp);font-weight:400;color:var(--nv-red)}
.nv .az-start a:hover{border-color:var(--nv-hot);color:var(--nv-hot)}
.nv .az-letter{display:grid;grid-template-columns:minmax(0,1fr);gap:.8rem 3rem;padding:2.6rem 0;border-bottom:1px solid var(--nv-line);scroll-margin-top:140px}
@media (min-width:900px){
  .nv .az-letter{grid-template-columns:7rem minmax(0,1fr)}
  .nv .az-letter>h2{position:sticky;top:150px;align-self:start}
}
.nv .az-letter>h2{font-size:clamp(3.4rem,7vw,5.4rem);line-height:.9;color:var(--nv-red);margin:0}
.nv .az-terms{margin:0;display:grid;gap:1.7rem}
@media (min-width:760px){.nv .az-terms{grid-template-columns:repeat(2,minmax(0,1fr));gap:1.9rem 2.6rem}}
.nv .az-term{scroll-margin-top:150px}
.nv .az-term dt{display:flex;flex-wrap:wrap;align-items:baseline;gap:.35rem .7rem;font-family:var(--nv-body);font-size:1.2rem;font-weight:700;line-height:1.35;color:var(--nv-bone);margin-bottom:.4rem}
.nv .az-tag{font-family:var(--nv-ui);font-size:.6rem;font-weight:800;letter-spacing:.2em;text-transform:uppercase;color:var(--nv-gold);border:1px solid rgba(217,164,65,.45);border-radius:2px;padding:.12rem .45rem}
.nv .az-term dd{margin:0;font-size:.97rem;line-height:1.75}
.nv .az-key{list-style:none;display:flex;flex-wrap:wrap;gap:.5rem 1.2rem;margin:1.4rem 0 0;font-size:.9rem;color:var(--nv-dim)}
.nv .az-key li{display:flex;align-items:baseline;gap:.5rem}
/* the platform's menu (hs-canvas-nav) in the homepage's lettering, with a dark drawer (2026-10-09) */
/* a backdrop blur on the header would trap the fixed menu drawer inside the header, so the header is solid */
.nv .nv-header{-webkit-backdrop-filter:none;backdrop-filter:none;background:rgba(11,7,9,.97)}
.nv .logo{flex:none}
.nv .logo img{max-width:none}
.nv .btn{white-space:nowrap}
.nv .nav .hs-canvas-nav{flex:1 1 auto;min-width:0;color:var(--nv-bone);--hs-canvas-nav-mobile-bg:var(--nv-ink1);--hs-canvas-nav-shadow:0 20px 60px rgba(0,0,0,.6)}
.nv .nav .hs-canvas-nav__menu--desktop{gap:1.7rem}
.nv .nav .hs-canvas-nav__link{font-family:var(--nv-ui);font-size:.72rem;font-weight:700;letter-spacing:.18em;text-transform:uppercase;color:var(--nv-mute);text-decoration:none;transition:color .2s}
.nv .nav .hs-canvas-nav__link:hover{color:var(--nv-bone);opacity:1}
.nv .nav .hs-canvas-nav__toggle{min-width:44px;min-height:44px;align-items:center;color:var(--nv-bone)}
.nv .nav .hs-canvas-nav__toggle span{width:26px;height:2px}
.nv .nav .hs-canvas-nav__overlay{background:rgba(0,0,0,.6)}
.nv .nav .hs-canvas-nav__drawer{border-left:1px solid var(--nv-line)}
.nv .nav .hs-canvas-nav__close{color:var(--nv-bone);min-width:44px;min-height:44px}
.nv .nav .hs-canvas-nav__cta{font-family:var(--nv-ui);font-size:.85rem;font-weight:800;letter-spacing:.06em;text-transform:uppercase;border-radius:12px;min-height:48px}
.nv .nav .hs-canvas-nav__cta--primary{background:linear-gradient(135deg,var(--nv-hot),var(--nv-red));color:#fff}
.nv .nav .hs-canvas-nav__cta--secondary{color:var(--nv-bone);border-color:var(--nv-line2)}
.nv .nav .hs-canvas-nav__menu--mobile .hs-canvas-nav__link{font-family:var(--nv-disp);font-size:1.7rem;font-weight:400;letter-spacing:.03em;color:var(--nv-bone)}
.nv .nav .hs-canvas-nav__menu--mobile .hs-canvas-nav__link:hover{color:var(--nv-hot)}
/* the platform's "More" overflow control and its panel, in the same lettering as the links (2026-10-09) */
.nv .nav .hs-canvas-nav{--hs-canvas-nav-border:var(--nv-line)}
.nv .nav .hs-canvas-nav__summary{font-family:var(--nv-ui);font-size:.72rem;font-weight:700;letter-spacing:.18em;text-transform:uppercase;color:var(--nv-mute);gap:.45rem;transition:color .2s}
.nv .nav .hs-canvas-nav__summary:hover{color:var(--nv-bone);opacity:1}
.nv .nav .hs-canvas-nav__summary::after{width:6px;height:6px;border-width:0 1.5px 1.5px 0;margin-top:-3px}
.nv .nav .hs-canvas-nav__menu--desktop>.hs-canvas-nav__item>.hs-canvas-nav__details>.hs-canvas-nav__submenu{background:var(--nv-ink1);border:1px solid var(--nv-line);border-radius:12px;padding:.9rem 1.2rem;gap:.75rem;box-shadow:0 20px 60px rgba(0,0,0,.6)}
.nv .nav .hs-canvas-nav__menu--mobile .hs-canvas-nav__summary{font-family:var(--nv-disp);font-size:1.7rem;font-weight:400;letter-spacing:.03em;color:var(--nv-bone)}
.nv .nav .hs-canvas-nav__menu--mobile .hs-canvas-nav__summary::after{width:10px;height:10px;border-width:0 2px 2px 0}
.nv .nav .hs-canvas-nav__menu--mobile .hs-canvas-nav__submenu .hs-canvas-nav__link{font-size:1.3rem;color:var(--nv-mute)}
@media (min-width:1024px) and (max-width:1180px){.nv .logo img{height:48px}.nv .nav .hs-canvas-nav__menu--desktop{gap:1.2rem}.nv .nav-actions .btn{padding-left:1rem;padding-right:1rem}}
@media (max-width:600px){.nv .logo img{height:40px}}

/* topic pages (2026-10-09) */
.nv .tp-trio{display:grid;gap:16px;margin-top:2.2rem}
@media (min-width:860px){.nv .tp-trio{grid-template-columns:repeat(3,minmax(0,1fr))}}
.nv .tp-trio>div{padding:1.9rem 1.6rem 1.6rem;border:1px solid var(--nv-line);background:var(--nv-ink0)}
.nv .tp-trio .tp-big{display:block;font-family:var(--nv-disp);font-size:clamp(2.4rem,4.4vw,3.4rem);line-height:1;color:var(--nv-red);margin-bottom:.6rem}
.nv .tp-trio h3{font-family:var(--nv-ui);font-size:.86rem;font-weight:800;letter-spacing:.12em;text-transform:uppercase;color:var(--nv-bone);margin-bottom:.6rem}
.nv .tp-trio p{font-size:.97rem;line-height:1.75}
.nv .tp-trio a{color:var(--nv-gold);text-decoration:none;border-bottom:1px solid rgba(217,164,65,.45)}
.nv .tp-cards{list-style:none;margin:2.2rem 0 0;display:grid;gap:12px}
@media (min-width:640px){.nv .tp-cards{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (min-width:1000px){.nv .tp-cards{grid-template-columns:repeat(3,minmax(0,1fr))}}
.nv .tp-cards li{padding:1.5rem 1.4rem;border:1px solid var(--nv-line);border-left:3px solid var(--nv-gold-deep);background:var(--nv-ink1)}
.nv .tp-cards b{display:block;font-family:var(--nv-body);font-size:1.15rem;color:var(--nv-bone);margin-bottom:.3rem}
.nv .tp-cards span{display:block;font-size:.95rem;line-height:1.7}
.nv .tp-cards a{color:var(--nv-gold);text-decoration:none;border-bottom:1px solid rgba(217,164,65,.45)}
.nv .tp-rights{list-style:none;margin:2.4rem 0 0;counter-reset:tpr;display:grid;gap:0;border-top:1px solid var(--nv-line)}
.nv .tp-rights li{counter-increment:tpr;display:grid;grid-template-columns:4.6rem minmax(0,1fr);align-items:center;gap:1rem;padding:1.15rem 0;border-bottom:1px solid var(--nv-line);font-family:var(--nv-body);font-size:clamp(1.15rem,2.2vw,1.45rem);line-height:1.45;color:var(--nv-bone)}
.nv .tp-rights li::before{content:counter(tpr);font-family:var(--nv-disp);font-size:clamp(2.2rem,4vw,3rem);line-height:1;color:var(--nv-red)}
.nv .tp-scale{list-style:none;margin:2.4rem 0 0;position:relative;display:grid;gap:10px}
.nv .tp-scale::before{content:"";position:absolute;left:0;top:0;bottom:0;width:4px;border-radius:4px;background:linear-gradient(180deg,var(--nv-gold),var(--nv-red),var(--nv-ox))}
.nv .tp-scale li{margin-left:1.6rem;padding:1.1rem 1.3rem;border:1px solid var(--nv-line);background:var(--nv-ink0)}
.nv .tp-scale b{display:block;font-family:var(--nv-disp);font-weight:400;font-size:1.35rem;letter-spacing:.03em;text-transform:uppercase;color:var(--nv-bone);margin-bottom:.2rem}
.nv .tp-scale span{display:block;font-size:.96rem}
.nv .tp-bubbles{list-style:none;margin:1.6rem 0 1.4rem;display:grid;gap:12px}
.nv .tp-bubbles li{position:relative;max-width:34rem;padding:1rem 1.25rem;border-radius:18px 18px 18px 4px;background:var(--nv-ink1);border:1px solid var(--nv-line2);font-family:var(--nv-ui);font-size:.98rem;line-height:1.55;color:var(--nv-bone)}
.nv .tp-bubbles li:nth-child(even){margin-left:auto;border-radius:18px 18px 4px 18px;background:rgba(232,17,45,.12);border-color:rgba(232,17,45,.35)}
.nv .tp-ticket{max-width:40rem;margin:2.4rem auto 0;border:2px dashed var(--nv-gold-deep);border-radius:6px;background:var(--nv-ink1);padding:2rem clamp(1.2rem,4vw,2.2rem) 1.4rem}
.nv .tp-ticket h3{font-family:var(--nv-disp);font-weight:400;font-size:1.7rem;letter-spacing:.03em;text-transform:uppercase;color:var(--nv-gold);margin-bottom:.3rem}
.nv .tp-ticket>p{font-size:.95rem;margin-bottom:1rem}
.nv .tp-ticket dl{margin:0}
.nv .tp-ticket dl div{display:grid;grid-template-columns:8rem minmax(0,1fr);gap:1rem;padding:.75rem 0;border-top:1px solid var(--nv-line)}
.nv .tp-ticket dt{font-family:var(--nv-ui);font-size:.7rem;font-weight:800;letter-spacing:.18em;text-transform:uppercase;color:var(--nv-bone);padding-top:.25rem}
.nv .tp-ticket dd{margin:0;font-size:.97rem}
@media (max-width:520px){.nv .tp-ticket dl div{grid-template-columns:minmax(0,1fr);gap:.2rem}}
.nv .tp-pull{max-width:50rem;margin:0 auto;text-align:center;font-family:var(--nv-body);font-style:italic;font-size:clamp(1.5rem,3.4vw,2.4rem);line-height:1.35;color:var(--nv-bone)}
.nv .tp-pull+.sf-rule{display:block;width:140px;height:2px;margin:2rem auto 0;background:var(--nv-hairline)}
.nv .tp-related{display:flex;flex-wrap:wrap;gap:.6rem;margin-top:1.6rem}
.nv .tp-related a{display:inline-flex;align-items:center;min-height:44px;padding:.5rem 1.05rem;border:1px solid var(--nv-line2);border-radius:999px;font-family:var(--nv-ui);font-size:.82rem;font-weight:700;color:var(--nv-bone);text-decoration:none}
.nv .tp-related a:hover{border-color:var(--nv-hot);color:var(--nv-hot)}
.nv .tp-split{display:grid;gap:2rem 3.4rem;margin-top:1.6rem}
@media (min-width:860px){.nv .tp-split{grid-template-columns:repeat(2,minmax(0,1fr))}}
.nv .tp-split h3{font-family:var(--nv-disp);font-weight:400;font-size:1.5rem;letter-spacing:.03em;text-transform:uppercase;color:var(--nv-bone);margin-bottom:.8rem}

/* profile guide (2026-10-09): rewrites side by side, a mock profile with blanks, a pre-publish checklist */
.nv .rw{display:grid;gap:12px;margin:1.6rem 0 0}
.nv .rw-row{display:grid;grid-template-columns:minmax(0,1fr);gap:0;border:1px solid var(--nv-line);background:var(--nv-ink0)}
@media (min-width:760px){.nv .rw-row{grid-template-columns:11rem minmax(0,1fr) minmax(0,1fr)}}
.nv .rw-row>*{padding:1rem 1.2rem}
.nv .rw-row .rw-what{font-family:var(--nv-ui);font-size:.72rem;font-weight:800;letter-spacing:.16em;text-transform:uppercase;color:var(--nv-bone);border-bottom:1px solid var(--nv-line)}
@media (min-width:760px){.nv .rw-row .rw-what{border-bottom:0;border-right:1px solid var(--nv-line)}}
.nv .rw-row .rw-no,.nv .rw-row .rw-yes{font-family:var(--nv-body);font-size:1rem;line-height:1.6}
.nv .rw-row .rw-no{color:var(--nv-dim);text-decoration:line-through;text-decoration-color:rgba(255,48,73,.6)}
.nv .rw-row .rw-yes{color:var(--nv-bone);border-top:1px solid var(--nv-line)}
@media (min-width:760px){.nv .rw-row .rw-yes{border-top:0;border-left:1px solid var(--nv-line)}}
.nv .rw-row .rw-no::before,.nv .rw-row .rw-yes::before{display:block;font-family:var(--nv-ui);font-size:.6rem;font-weight:800;letter-spacing:.2em;text-transform:uppercase;text-decoration:none;margin-bottom:.3rem}
.nv .rw-row .rw-no::before{content:"Instead of";color:var(--nv-hot)}
.nv .rw-row .rw-yes::before{content:"Try";color:var(--nv-gold)}
.nv .pf-mock{max-width:40rem;margin:2.2rem auto 0;border:1px solid var(--nv-line2);border-radius:16px;background:var(--nv-ink0);overflow:hidden;box-shadow:0 18px 50px rgba(0,0,0,.45)}
.nv .pf-top{display:flex;align-items:center;gap:1rem;padding:1.3rem 1.5rem;border-bottom:1px solid var(--nv-line);background:var(--nv-ink1)}
.nv .pf-avatar{flex:none;width:56px;height:56px;border-radius:50%;background:linear-gradient(145deg,var(--nv-ox),var(--nv-red));display:flex;align-items:center;justify-content:center;font-family:var(--nv-disp);font-size:1.3rem;color:#fff}
.nv .pf-top b{display:block;font-family:var(--nv-ui);font-size:1.05rem;color:var(--nv-bone)}
.nv .pf-top .pf-sub{display:block;margin-top:.15rem;font-family:var(--nv-ui);font-size:.85rem;color:var(--nv-dim)}
.nv .pf-top .gap{display:inline}
.nv .pf-body{padding:1.3rem 1.5rem 1.1rem}
.nv .pf-body h3{font-family:var(--nv-ui);font-size:.68rem;font-weight:800;letter-spacing:.2em;text-transform:uppercase;color:var(--nv-gold);margin:0 0 .35rem}
.nv .pf-body p{font-family:var(--nv-body);font-size:1rem;line-height:1.7;margin:0 0 1rem;color:var(--nv-bone)}
.nv .pf-body .gap{color:var(--nv-dim);font-style:italic;border-bottom:1px dashed var(--nv-gold-deep)}
.nv .pf-cap{padding:.8rem 1.5rem;border-top:1px solid var(--nv-line);font-family:var(--nv-ui);font-size:.78rem;color:var(--nv-dim)}
.nv .chk{list-style:none;margin:1.6rem 0 0;display:grid;gap:0;border-top:1px solid var(--nv-line)}
@media (min-width:760px){.nv .chk{grid-template-columns:repeat(2,minmax(0,1fr));column-gap:2.6rem}}
.nv .chk li{display:grid;grid-template-columns:1.8rem minmax(0,1fr);gap:.7rem;padding:.95rem 0;border-bottom:1px solid var(--nv-line);font-size:.98rem}
.nv .chk li::before{content:"";width:20px;height:20px;margin-top:.25rem;border:2px solid var(--nv-gold);border-radius:4px}
/* safewords guide (2026-10-09) */
.nv .sw-call{margin:1.8rem 0 0;padding:1rem clamp(1.1rem,3vw,1.8rem);border:1px solid var(--nv-line2);border-left:3px solid var(--nv-gold);background:var(--nv-ink0)}
.nv .sw-call p{display:grid;grid-template-columns:5.4rem minmax(0,1fr);gap:.8rem;align-items:baseline;margin:0;padding:.5rem 0;font-family:var(--nv-body);font-size:1.18rem;line-height:1.5;color:var(--nv-bone)}
.nv .sw-call p b{font-family:var(--nv-ui);font-size:.64rem;font-weight:800;letter-spacing:.2em;text-transform:uppercase;color:var(--nv-dim)}
.nv .sw-call p.sw-top b{color:var(--nv-gold)}
.nv .sw-call p.sw-top span{font-style:italic}
.nv .sw-call p.sw-cue{display:block;padding:.35rem 0;font-family:var(--nv-ui);font-size:.74rem;letter-spacing:.08em;color:var(--nv-dim);text-align:center;border-top:1px dashed var(--nv-line);border-bottom:1px dashed var(--nv-line)}
.nv .sw-call .c-g{color:#7fe0a2;font-weight:600}
.nv .sw-call .c-y{color:#f2c94c;font-weight:600}
.nv .sw-note{margin:.6rem 0 1.4rem;font-family:var(--nv-ui);font-size:.78rem;color:var(--nv-dim)}
.nv .sw-sq{list-style:none;margin:1.8rem 0;padding:0;display:grid;gap:12px}
@media (min-width:700px){.nv .sw-sq{grid-template-columns:repeat(3,minmax(0,1fr))}}
.nv .sw-sq li{position:relative;padding:1.2rem 1.2rem 1.1rem;border:1px solid var(--nv-line);border-top:3px solid var(--nv-gold);background:var(--nv-ink0)}
.nv .sw-sq li.sw-sq-ok{border-top-color:#7fe0a2}
.nv .sw-sq li.sw-sq-stop{border-top-color:var(--nv-red)}
.nv .sw-sq b{display:block;font-family:var(--nv-disp);font-size:1.5rem;font-weight:400;letter-spacing:.02em;text-transform:uppercase;line-height:1.1;color:var(--nv-bone);margin-bottom:.4rem}
.nv .sw-sq span{display:block;font-size:.97rem}
.nv .sw-two{display:grid;gap:16px;margin-top:2rem}
@media (min-width:760px){.nv .sw-two{grid-template-columns:repeat(2,minmax(0,1fr));gap:24px}}
.nv .sw-two>div{padding:1.6rem clamp(1.2rem,3vw,1.9rem);border:1px solid var(--nv-line2);background:var(--nv-ink0)}
.nv .sw-two>div:first-child{border-top:3px solid var(--nv-gold)}
.nv .sw-two>div:last-child{border-top:3px solid var(--nv-red)}
.nv .sw-two h3{margin-top:0}
.nv .sw-two p{margin-bottom:0}

/* /bdsm-contract: the fill-in agreement */
.nv .ct-doc{max-width:42rem;margin:2.2rem auto 0;padding:2.2rem clamp(1.2rem,4vw,2.6rem) 1.6rem;border:1px solid var(--nv-line2);border-radius:16px;background:var(--nv-ink0);box-shadow:0 18px 50px rgba(0,0,0,.45);position:relative}
.nv .ct-doc::before{content:"";position:absolute;inset:10px;border:1px solid var(--nv-line);border-radius:10px;pointer-events:none}
.nv .ct-head{font-family:var(--nv-disp);font-size:clamp(1.6rem,3.4vw,2.2rem);letter-spacing:.04em;text-transform:uppercase;color:var(--nv-bone);text-align:center;margin:0 0 .4rem}
.nv .ct-sub{font-family:var(--nv-ui);font-size:.92rem;text-align:center;color:var(--nv-mute);margin:0 0 1.6rem}
.nv .ct-clauses{list-style:none;margin:0;padding:0;border-top:1px solid var(--nv-line)}
.nv .ct-clauses li{display:grid;grid-template-columns:2.4rem minmax(0,1fr);gap:.8rem;padding:1rem 0;border-bottom:1px solid var(--nv-line)}
.nv .ct-n{font-family:var(--nv-disp);font-size:1.15rem;color:var(--nv-gold);line-height:1.6}
.nv .ct-clauses h3{font-family:var(--nv-ui);font-size:.8rem;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--nv-bone);margin:0 0 .3rem}
.nv .ct-clauses p{margin:0;font-size:.98rem;line-height:1.7}
.nv .ct-doc .gap{color:var(--nv-dim);font-style:italic;border-bottom:1px dashed var(--nv-gold-deep)}
.nv .ct-sign{margin:1.4rem 0 .6rem;font-size:.95rem;text-align:center}

/* /bdsm-checklist: yes / maybe / no tables, tickable, printable */
.nv .yn-group{margin-top:1.8rem}
.nv .yn-table th[scope="row"]{font-weight:600;width:55%}
.nv .yn-table thead th:not(:first-child),.nv .yn-table td{text-align:center;width:15%}
.nv .yn-box{display:inline-flex;align-items:center;justify-content:center;min-width:44px;min-height:44px;cursor:pointer}
.nv .yn-box input{appearance:none;-webkit-appearance:none;width:22px;height:22px;margin:0;border:2px solid var(--nv-gold);border-radius:5px;background:transparent;cursor:pointer;display:grid;place-content:center}
.nv .yn-box input::before{content:"";width:12px;height:12px;border-radius:2px;transform:scale(0);background:var(--nv-gold-hi)}
.nv .yn-box input:checked::before{transform:scale(1)}
.nv .yn-box input:focus-visible{outline:2px solid var(--nv-gold-hi);outline-offset:3px}
.nv .yn-table td:nth-child(3) .yn-box input{border-color:var(--nv-mute)}
.nv .yn-table td:nth-child(4) .yn-box input{border-color:var(--nv-hot)}
.nv .yn-table td:nth-child(4) .yn-box input::before{background:var(--nv-hot)}
.nv .yn-sr{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
.nv .yn-note{margin-top:1rem;padding:1rem 1.2rem;border-left:3px solid var(--nv-gold);background:rgba(217,164,65,.06);font-size:.95rem}
@media print{
  .nv .nv-header,.nv .hero,.nv .joinbar,.nv .nv-footer,.nv .final,.nv .tp-related,.nv .faq,.nv section.block:not(:has(.yn-group)){display:none!important}
  body:has(.nv),.nv{background:#fff!important;color:#000!important}
  .nv .yn-table,.nv .yn-table th,.nv .yn-table td,.nv .yn-table caption{color:#000!important;background:#fff!important;border-color:#999!important}
  .nv .yn-table a{color:#000!important;text-decoration:none}
  .nv .yn-box input{border-color:#000!important}
  .nv .yn-box input::before{background:#000!important}
  .nv .yn-group{break-inside:avoid}
  .nv .yn-note{display:none}
}
/* === nv-guides:end === */