/* ===========================================================================
   hardsplit  ::  Halfway Amsterdam  ::  couplemassageamsterdam.com

   Carried over from docs/theme-picker/pool/hard-split/index.html: the cobalt
   ground, the bone type, the two-pixel bone seam that cuts every band in half,
   the League Spartan display set in uppercase at a line height under one, and
   the footer that flips the whole palette over.

   Two standing rules the owner set, kept here on purpose:
     1. Nothing moves. No @keyframes, no transition, no timed change of any
        property, nothing tied to a scroll position. A hover swaps a colour or
        an underline and it swaps at once. Because nothing moves there is no
        reduced-motion block either: it would have nothing to switch off.
     2. Nothing is drawn. The chosen design carried no drawn object, so this
        file invents none: no scene, no building, no lamp, no character. The
        page is photographs, type and flat colour. The two messenger glyphs and
        a hairline arrow are the only marks, and they came with the design.
   =========================================================================== */

@font-face {
  font-family: 'Instrument Sans';
  font-style: normal;
  font-weight: 400 700;
  font-stretch: 100%;
  font-display: swap;
  src: url('/fonts/hardsplit/instrument-sans-normal-400-700.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'League Spartan';
  font-style: normal;
  font-weight: 700 900;
  font-display: swap;
  src: url('/fonts/hardsplit/league-spartan-normal-700-900.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

:root {
  --cobalt: #1533E0;
  --cobalt-deep: #0E24A6;
  --bone: #F3EEE4;
  --dim: #CBD6FF;
  --shade: #0A0A0C;
  --seam: #F3EEE4;
  --hair: rgba(243,238,228,.38);
  --hair2: rgba(243,238,228,.20);
  --onbone: #12207C;
  --onbone-mute: #35378C;
  --bone2: #E7E0D2;
  --wrap: 1280px;
  --max: 1280px;
  --reading: 66ch;
  --pad: clamp(20px,3.2vw,52px);
  --sans: 'Instrument Sans', system-ui, -apple-system, 'Segoe UI', Helvetica, Arial, sans-serif;
  --serif: 'League Spartan', 'Instrument Sans', system-ui, Impact, sans-serif;
  /* aliases the shared static templates reference from inline styles. Same
     values as above, under the names those files already use. */
  --ink: #F3EEE4;
  --muted: #CBD6FF;
  --faint: #CBD6FF;
  --rule: rgba(243,238,228,.38);
  --cloud: #1533E0;
  --sky-3: #0E24A6;
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--cobalt);
  color: var(--bone);
  font-family: var(--sans);
  font-size: 17px;
  line-height: 1.56;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
}

img { max-width: 100%; display: block; }
a { color: inherit; }
:focus-visible { outline: 3px solid var(--bone); outline-offset: 2px; }

.wrap { max-width: var(--wrap); margin: 0 auto; padding: 0 var(--pad); }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.wrap-any { overflow-wrap: anywhere; }

.disp {
  font-family: var(--serif);
  font-weight: 900;
  text-transform: uppercase;
  line-height: .86;
  letter-spacing: -.015em;
}
.kicker {
  margin: 0 0 14px;
  font-size: .72rem;
  letter-spacing: .24em;
  text-transform: uppercase;
  font-weight: 600;
  color: var(--dim);
}
.tiny { font-size: .78rem; letter-spacing: .16em; text-transform: uppercase; font-weight: 600; color: var(--dim); }

/* ------------------------------------------------------------- the 21+ bar --- */
.age-bar {
  display: none;
  position: fixed;
  left: 0; right: 0; bottom: 0;
  z-index: 200;
  background: var(--bone);
  color: var(--onbone);
  border-top: 2px solid var(--cobalt-deep);
  padding: 11px var(--pad) calc(11px + env(safe-area-inset-bottom));
  align-items: center;
  justify-content: center;
  gap: 8px 18px;
  flex-wrap: wrap;
  font-size: 14px;
  line-height: 1.5;
}
body.age-bar-open .age-bar { display: flex; }
body.age-confirmed .age-bar { display: none; }
body.age-bar-open { padding-bottom: 66px; }
.age-bar__txt { color: var(--onbone-mute); }
.age-bar__txt b { color: var(--cobalt); font-weight: 700; letter-spacing: .06em; margin-right: 8px; }
.age-bar__ok {
  font: inherit;
  font-size: 12.5px;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  background: var(--cobalt);
  color: var(--bone);
  border: 2px solid var(--cobalt);
  padding: 8px 15px;
  cursor: pointer;
}
.age-bar__ok:hover { background: var(--cobalt-deep); border-color: var(--cobalt-deep); }

/* ------------------------------------------------------------ the top bar --- */
.mast { background: var(--cobalt); border-bottom: 2px solid var(--seam); }
.mastin {
  max-width: var(--wrap);
  margin: 0 auto;
  padding: 10px var(--pad);
  display: flex;
  align-items: center;
  gap: 18px;
  flex-wrap: wrap;
  min-height: 60px;
}
.mastbrand {
  font-family: var(--serif);
  font-weight: 800;
  font-size: 1.02rem;
  letter-spacing: .16em;
  text-transform: uppercase;
  text-decoration: none;
}
.mastbrand:hover { color: var(--dim); }
.mast nav { margin-left: auto; display: flex; gap: 18px; flex-wrap: wrap; }
.mast nav a {
  text-decoration: none;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--dim);
}
.mast nav a:hover { color: var(--bone); text-decoration: underline; text-underline-offset: 5px; }
.agetag {
  font-size: 11.5px;
  letter-spacing: .2em;
  text-transform: uppercase;
  font-weight: 600;
  color: var(--dim);
  border: 1px solid var(--hair);
  padding: 5px 10px;
  white-space: nowrap;
}
.agetag b { color: var(--bone); font-weight: 800; }
.nav-toggle {
  display: none;
  font: inherit;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--bone);
  background: transparent;
  border: 2px solid var(--hair);
  padding: 7px 13px;
  cursor: pointer;
}
.nav-toggle:hover { border-color: var(--bone); }

/* --------------------------------------- breadcrumbs and related pages --- */
/* Both blocks are injected by the build after this file, so they are matched
   with an element plus class here to win on specificity. */
nav.crumbs {
  max-width: var(--wrap);
  margin: 0 auto;
  padding: 16px var(--pad) 0;
  font-size: 12.5px;
  letter-spacing: .05em;
  text-transform: uppercase;
  font-weight: 600;
}
nav.crumbs ol { opacity: 1; gap: 4px 10px; }
nav.crumbs li { color: var(--dim); }
nav.crumbs li + li::before { content: "/"; opacity: 1; color: var(--hair); }
nav.crumbs a { color: var(--dim); border-bottom: 1px solid transparent; }
nav.crumbs a:hover { color: var(--bone); border-bottom-color: var(--bone); }
nav.crumbs [aria-current] { opacity: 1; color: var(--bone); }

aside.seo-related { max-width: var(--wrap); margin: 0 auto; padding: 10px var(--pad) 48px; }
aside.seo-related div.seo-related__in { border-top: 2px solid var(--seam); padding-top: 22px; }
aside.seo-related p.seo-related__h {
  margin: 0 0 14px;
  font-family: var(--serif);
  font-weight: 800;
  font-size: 13px;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--bone);
  opacity: 1;
}
aside.seo-related ul { gap: 0 32px; }
aside.seo-related a {
  color: var(--dim);
  border-bottom: 1px solid var(--hair2);
  font-size: 15px;
  padding: 10px 0;
}
aside.seo-related a:hover { color: var(--bone); opacity: 1; }

/* ---------------------------------------------------------------- buttons --- */
.btn, .btn-primary, .btn-ghost {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  text-decoration: none;
  font-weight: 700;
  font-size: 15.5px;
  min-height: 52px;
  padding: 0 20px;
  border: 2px solid var(--bone);
}
.btn svg, .btn-primary svg, .btn-ghost svg { width: 18px; height: 18px; flex: none; }
.btn .arr { font-size: 15px; line-height: 1; }
.btn-a, .btn-primary { background: var(--bone); color: var(--cobalt); }
.btn-a:hover, .btn-primary:hover { background: var(--dim); color: var(--cobalt-deep); }
.btn-b, .btn-ghost { background: transparent; color: var(--bone); }
.btn-b:hover, .btn-ghost:hover { background: var(--bone); color: var(--cobalt); }
.acts { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; }
.acts--top { margin-top: 22px; }

/* ------------------------------------------------------ the band and seam --- */
.band { display: grid; grid-template-columns: 1fr; width: 100%; border-top: 2px solid var(--seam); }
.band:first-child { border-top: 0; }
.half { min-width: 0; }
.field {
  background: var(--cobalt);
  padding: clamp(26px,3vw,46px) var(--pad);
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: clamp(16px,2.2vw,28px);
}
.slab { background: var(--bone); color: var(--onbone); }
.slab a { color: var(--cobalt); }
.shot { background: var(--shade); position: relative; overflow: hidden; }
.shot > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 24%; }

@media (min-width: 861px) {
  .band { grid-template-columns: 50% 50%; }
  .band--lead { min-height: 92svh; }
  .band.pl > .shot, .band.pl > .slab { border-right: 2px solid var(--seam); }
  .band.pr > .shot, .band.pr > .slab { border-left: 2px solid var(--seam); order: 2; }
  .band.pr > .field { order: 1; }
  .band--lead .shot { min-height: 92svh; }
}
@media (max-width: 860px) {
  .band > .shot { border-bottom: 2px solid var(--seam); height: 46svh; min-height: 280px; }
  .band.pr > .shot { border-bottom: 0; border-top: 2px solid var(--seam); }
  .band--lead > .shot { height: 54svh; min-height: 320px; }
  .band.pl > .slab { border-bottom: 2px solid var(--seam); }
  .band.pr > .slab { border-top: 2px solid var(--seam); }
}

/* ------------------------------------------------------------- headlines --- */
h1 { margin: 0; }
.h1 { font-size: clamp(2.3rem,7.4vw,4rem); }
@media (min-width: 861px) { .h1 { font-size: clamp(2.4rem,4vw,3.7rem); } }
.h1 span { display: block; }
.lede { margin: 0; font-size: clamp(1rem,1.15vw,1.13rem); max-width: 42ch; }
.deck { margin: 0; font-size: 1.05rem; color: var(--dim); max-width: 46ch; }
.fine { margin: 0; font-size: .9rem; color: var(--dim); max-width: 46ch; }
.taxline { margin: 0; font-size: .88rem; color: var(--dim); }

.sechead { margin: 0; }
.sechead h2 {
  margin: 0;
  font-family: var(--serif);
  font-weight: 900;
  text-transform: uppercase;
  line-height: .9;
  letter-spacing: -.01em;
  font-size: clamp(1.8rem,5.6vw,2.7rem);
}
@media (min-width: 861px) { .sechead h2 { font-size: clamp(1.8rem,3vw,2.9rem); } }
.sechead p { margin: 10px 0 0; color: var(--dim); max-width: 44ch; font-size: .98rem; }
.slab .sechead p, .slab .fine, .slab .kicker, .slab .taxline, .slab .deck { color: var(--onbone-mute); }

h2 { margin: 0; font-family: var(--serif); font-weight: 800; text-transform: uppercase; letter-spacing: -.005em; line-height: .96; font-size: clamp(1.5rem,3vw,2.1rem); }
h3 { font-family: var(--serif); font-weight: 800; text-transform: uppercase; letter-spacing: .01em; }

/* ------------------------------------------------------- the price ladder --- */
.ladder { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fit,minmax(148px,1fr)); border-top: 2px solid var(--seam); }
.ladder li { padding: 12px 10px 0 0; }
.ladder .dur { font-size: .66rem; letter-spacing: .18em; text-transform: uppercase; font-weight: 700; color: var(--dim); }
.ladder .fig { font-family: var(--serif); font-weight: 900; font-size: clamp(1.4rem,3vw,2.2rem); line-height: .95; margin-top: 4px; }
.slab .ladder { border-top-color: var(--cobalt); }
.slab .ladder .dur { color: var(--onbone-mute); }

/* ------------------------------------------------------------- flat lists --- */
.tech { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: 1fr; }
@media (min-width: 560px) { .tech { grid-template-columns: 1fr 1fr; column-gap: clamp(16px,2vw,30px); } }
.tech li { border-top: 1px solid var(--hair); padding: 10px 0 11px; }
.tech h3 { margin: 0; font-size: 1.08rem; line-height: 1.08; display: flex; align-items: baseline; gap: 10px; }
.tech h3 a { text-decoration: none; }
.tech h3 a:hover { color: var(--dim); text-decoration: underline; text-underline-offset: 4px; }
.tech .amt { margin-left: auto; font-size: .78rem; font-weight: 700; color: var(--dim); letter-spacing: .04em; white-space: nowrap; }
.tech p { margin: 3px 0 0; font-size: .85rem; color: var(--dim); line-height: 1.42; }

.steps { list-style: none; margin: 0; padding: 0; }
.steps li { border-top: 1px solid var(--hair); padding: 11px 0 12px; }
.steps h3 { margin: 0; font-size: 1.05rem; }
.steps p { margin: 2px 0 0; font-size: .9rem; color: var(--dim); max-width: 52ch; }

.places { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.places li { border: 1px solid var(--hair); padding: 7px 12px; font-size: .76rem; letter-spacing: .12em; text-transform: uppercase; font-weight: 700; }
.places a { text-decoration: none; }
.places a:hover { color: var(--dim); text-decoration: underline; text-underline-offset: 4px; }
.slab .places li { border-color: rgba(18,32,124,.3); }
.prose .places, .reading .places { margin: 0 0 18px; padding: 0; }
.prose .places li, .reading .places li { margin: 0; color: var(--bone); }

.flabel { margin: 0 0 10px; font-family: var(--serif); font-weight: 800; font-size: .74rem; letter-spacing: .2em; text-transform: uppercase; color: var(--dim); }
.slab .flabel { color: var(--onbone-mute); }
.flabel + .flabel, .flist + .flabel, .spec + .flabel, .tags + .flabel { margin-top: 22px; }
.flist { list-style: none; margin: 0; padding: 0; }
.flist li { padding: 9px 0; border-top: 1px solid var(--hair); font-size: .95rem; color: var(--dim); }
.flist li b { color: var(--bone); font-weight: 700; }
.slab .flist li { border-top-color: rgba(18,32,124,.22); color: var(--onbone-mute); }
.slab .flist li b { color: var(--onbone); }
.flist a { font-weight: 700; text-underline-offset: 3px; }
.fnote { margin: 14px 0 0; font-size: .88rem; color: var(--dim); }
.slab .fnote { color: var(--onbone-mute); }

.linklist { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill,minmax(270px,1fr)); gap: 0 32px; }
.linklist li { border-top: 1px solid var(--hair); }
.linklist a { display: block; padding: 12px 0; text-decoration: none; font-size: .98rem; color: var(--dim); }
.linklist a:hover { color: var(--bone); text-decoration: underline; text-underline-offset: 4px; }

.index { list-style: none; margin: 0; padding: 0; }
.index li { border-top: 1px solid var(--hair); }
.index li:first-child { border-top: 2px solid var(--seam); }
.index a { display: grid; grid-template-columns: minmax(0,1fr) 120px; gap: 4px 24px; padding: 18px 0; text-decoration: none; }
.index .it { font-family: var(--serif); font-weight: 800; text-transform: uppercase; font-size: 1.24rem; line-height: 1.02; }
.index a:hover .it { color: var(--dim); }
.index .id { font-size: .95rem; color: var(--dim); max-width: 66ch; }
.index .im { grid-row: 1 / span 2; text-align: right; font-size: .72rem; letter-spacing: .14em; text-transform: uppercase; color: var(--dim); }

.cards { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill,minmax(250px,1fr)); gap: 0; border-top: 2px solid var(--seam); }
.cards li { border-bottom: 1px solid var(--hair); border-right: 1px solid var(--hair); }
.cards a { display: block; text-decoration: none; padding: 18px var(--pad) 20px 0; }
.cards a:hover .nm { color: var(--dim); text-decoration: underline; text-underline-offset: 5px; }
.cards .cat { display: block; font-size: .66rem; font-weight: 700; letter-spacing: .2em; text-transform: uppercase; color: var(--dim); }
.cards .nm { display: block; margin-top: 9px; font-family: var(--serif); font-weight: 900; text-transform: uppercase; font-size: 1.5rem; line-height: .94; }
.cards .mt { display: block; margin-top: 8px; font-size: .8rem; letter-spacing: .1em; text-transform: uppercase; font-weight: 700; color: var(--dim); }

/* ---------------------------------------------------------- the rate rungs --- */
.rates { list-style: none; margin: 0; padding: 0; }
.rates li { display: flex; align-items: baseline; justify-content: space-between; gap: 14px; padding: 12px 0; border-top: 1px solid var(--hair); }
.rates .len { font-size: .93rem; color: var(--dim); }
.rates .amt { font-family: var(--serif); font-weight: 900; font-size: 1.5rem; letter-spacing: -.01em; }
.rates .amt small { font-size: .5em; font-weight: 800; color: var(--dim); margin-right: 5px; letter-spacing: .08em; }
.slab .rates li { border-top-color: rgba(18,32,124,.22); }
.slab .rates .len, .slab .rates .amt small { color: var(--onbone-mute); }

/* ------------------------------------------------------------ the roster --- */
/* Photograph one side, name the other, and the sides swap on every second row,
   which is the whole idea the chosen design was built on. */
.roster { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: 1fr; background: var(--cobalt); border-top: 2px solid var(--seam); }
.roster li { display: grid; grid-template-columns: 46% 54%; min-width: 0; }
.roster .cell { position: relative; overflow: hidden; background: var(--shade); min-height: 150px; border-right: 2px solid var(--seam); }
.roster .cell img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 16%; }
.roster .who { display: flex; flex-direction: column; justify-content: center; padding: 16px var(--pad); border-bottom: 1px solid var(--hair); }
.roster li:last-child .who { border-bottom: 0; }
.roster li:nth-child(even) { grid-template-columns: 54% 46%; }
.roster li:nth-child(even) .who { order: 1; }
.roster li:nth-child(even) .cell { order: 2; border-right: 0; border-left: 2px solid var(--seam); }
.roster a { text-decoration: none; display: block; }
.roster b { font-family: var(--serif); font-weight: 900; text-transform: uppercase; font-size: clamp(1.5rem,6.4vw,2.2rem); line-height: .9; letter-spacing: -.015em; display: block; }
.roster a:hover b { color: var(--dim); text-decoration: underline; text-underline-offset: 6px; }
.roster span { font-size: .68rem; letter-spacing: .16em; text-transform: uppercase; font-weight: 700; color: var(--dim); margin-top: 7px; display: block; }
@media (min-width: 861px) {
  .roster li, .roster li:nth-child(even) { grid-template-columns: 50% 50%; }
  .roster .cell { min-height: 27svh; }
  .roster b { font-size: clamp(1.8rem,3.4vw,3rem); }
  .roster .who { padding: 18px var(--pad); }
}

/* the plain wall of faces used on the index and the tail of an inner page */
.wall { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(6,minmax(0,1fr)); gap: 0; border-top: 2px solid var(--seam); border-left: 1px solid var(--hair); }
.wall li { border-right: 1px solid var(--hair); border-bottom: 1px solid var(--hair); }
.wall a { text-decoration: none; display: block; }
.wall .ph { display: block; aspect-ratio: 3 / 4; background: var(--shade); overflow: hidden; }
.wall img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 18%; }
.wall .nm { display: block; padding: 10px 12px 0; font-family: var(--serif); font-weight: 800; text-transform: uppercase; font-size: 1.05rem; line-height: 1; }
.wall a:hover .nm { color: var(--dim); text-decoration: underline; text-underline-offset: 4px; }
.wall .mt { display: block; padding: 5px 12px 12px; font-size: .68rem; letter-spacing: .14em; text-transform: uppercase; font-weight: 700; color: var(--dim); }
.wallfoot { margin: 18px 0 0; display: flex; justify-content: space-between; gap: 18px; flex-wrap: wrap; font-size: .9rem; color: var(--dim); }
.wallfoot a { font-weight: 700; text-underline-offset: 4px; }

/* ----------------------------------------------------------- flat strata --- */
.strata { border-top: 2px solid var(--seam); padding: clamp(30px,3.6vw,52px) 0; }
.strata:first-child { border-top: 0; }
.duo { display: grid; grid-template-columns: minmax(0,1fr) 320px; gap: 0 clamp(26px,3.4vw,56px); }
.duo--wide { grid-template-columns: minmax(0,1fr); }
.spine { min-width: 0; }
.rail { min-width: 0; border-left: 1px solid var(--hair); padding-left: clamp(18px,2vw,30px); align-self: start; }
.more { margin: 20px 0 0; font-size: .95rem; }
.more a { font-weight: 700; text-underline-offset: 4px; }

/* --------------------------------------------------------- profile blocks --- */
/* A plain grid, deliberately: a sliding gallery would be motion. */
.gallery { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); gap: 2px; }
.gallery li { margin: 0; }
.gallery .ph { display: block; aspect-ratio: 3 / 4; background: var(--shade); overflow: hidden; }
.gallery img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 18%; }
.gallery li:first-child { grid-column: span 2; grid-row: span 2; }

.spec { margin: 0; }
.spec div { display: grid; grid-template-columns: 1fr auto; gap: 8px 14px; padding: 9px 0; border-top: 1px solid var(--hair); }
.spec dt { font-size: .88rem; color: var(--dim); }
.spec dd { margin: 0; font-size: .88rem; font-weight: 700; text-align: right; }
.spec dd a { text-underline-offset: 3px; }
.slab .spec div { border-top-color: rgba(18,32,124,.22); }
.slab .spec dt { color: var(--onbone-mute); }

.tags { margin: 10px 0 0; display: flex; flex-wrap: wrap; gap: 7px; }
.tag { font-size: .78rem; border: 1px solid var(--hair); padding: 5px 10px; text-decoration: none; color: var(--dim); letter-spacing: .06em; }
a.tag:hover { border-color: var(--bone); color: var(--bone); }

/* ------------------------------------------------------------------ prose --- */
.prose { max-width: var(--reading); }
.prose--top { margin-top: 18px; }
.sechead + .gallery, .sechead + .wall, .sechead + .index, .sechead + .cards,
.sechead + .linklist, .sechead + .faq { margin-top: 20px; }
.prose > :first-child { margin-top: 0; }
.prose p, .prose li { color: var(--dim); }
.prose p { margin: 0 0 16px; }
.prose h2 { margin: 36px 0 12px; padding-top: 12px; border-top: 2px solid var(--seam); display: block; }
.prose h3 { margin: 26px 0 8px; font-size: 1.12rem; color: var(--bone); }
.prose ul, .prose ol { margin: 0 0 16px; padding-left: 20px; }
.prose li { margin: 0 0 7px; }
.prose a { color: var(--bone); font-weight: 700; text-underline-offset: 3px; }
.prose a:hover { color: var(--dim); }
.prose strong, .prose b { color: var(--bone); font-weight: 700; }
.prose blockquote { margin: 22px 0; padding: 2px 0 2px 18px; border-left: 2px solid var(--seam); color: var(--bone); }
.prose table { width: 100%; border-collapse: collapse; margin: 0 0 20px; font-size: .95rem; }
.prose th, .prose td { text-align: left; padding: 10px 14px 10px 0; border-top: 1px solid var(--hair); color: var(--dim); }
.prose thead th { border-top: 0; font-size: .7rem; letter-spacing: .16em; text-transform: uppercase; color: var(--bone); }
.independence { font-size: .92rem; color: var(--dim); border-top: 1px solid var(--hair); padding-top: 14px; }

/* --------------------------------------------------- questions the reader opens --- */
.faq { margin: 0; }
.faq details { border-top: 1px solid var(--hair); }
.faq details:first-child { border-top: 2px solid var(--seam); }
.faq summary {
  cursor: pointer;
  list-style: none;
  padding: 15px 34px 15px 0;
  font-family: var(--serif);
  font-weight: 800;
  text-transform: uppercase;
  line-height: 1.06;
  font-size: 1.05rem;
  position: relative;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; position: absolute; right: 2px; top: 12px; font-size: 1.3rem; font-weight: 400; color: var(--dim); }
.faq details[open] summary::after { content: "\2212"; }
.faq summary:hover { color: var(--dim); }
.faq .a { padding: 0 0 16px; }
.faq .a p { margin: 0; color: var(--dim); font-size: .95rem; max-width: 64ch; }
.faq .a a { color: var(--bone); font-weight: 700; }

/* ------------------------------------------------- the rate table partial --- */
.rates-card { margin: 0; }
.rates-card__title { margin: 0 0 12px; font-family: var(--serif); font-weight: 800; font-size: .74rem; letter-spacing: .2em; text-transform: uppercase; color: var(--dim); }
.rates-card__table { width: 100%; border-collapse: collapse; margin: 0 0 22px; font-size: .92rem; }
.rates-card__table caption { text-align: left; font-size: .68rem; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; color: var(--dim); padding: 0 0 8px; }
.rates-card__table th, .rates-card__table td { text-align: right; padding: 9px 0 9px 14px; border-top: 1px solid var(--hair); }
.rates-card__table th[scope="row"] { text-align: left; padding-left: 0; font-weight: 400; color: var(--dim); }
.rates-card__table thead th { border-top: 0; font-size: .66rem; letter-spacing: .16em; text-transform: uppercase; color: var(--bone); font-weight: 800; }
.rates-card__table tbody td { font-weight: 700; }
.rates-card__extra th[scope="row"], .rates-card__extra td { color: var(--dim); }
.rates-card__terms { margin: 0; font-size: .9rem; }
.rates-card__terms a { font-weight: 700; text-underline-offset: 3px; }
.rates-card__sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* ---------------------------------------------------------------- footer --- */
/* The hard inversion the chosen design ends on. */
.foot { background: var(--bone); color: var(--onbone); border-top: 2px solid var(--seam); }
.footin { max-width: var(--wrap); margin: 0 auto; padding: clamp(26px,3vw,44px) var(--pad) 0; display: grid; grid-template-columns: 1.7fr 1fr 1fr 1fr; gap: 26px; }
.fbrand { margin: 0 0 10px; font-family: var(--serif); font-weight: 900; text-transform: uppercase; font-size: 1.3rem; letter-spacing: .06em; }
.fh { margin: 0 0 10px; font-family: var(--serif); font-weight: 800; font-size: .72rem; letter-spacing: .2em; text-transform: uppercase; color: var(--onbone-mute); }
.foot ul { list-style: none; margin: 0; padding: 0; }
.foot li { margin: 0 0 7px; }
.foot p { margin: 10px 0 0; font-size: .88rem; color: var(--onbone-mute); max-width: 34em; }
.foot a { color: var(--cobalt); text-decoration: none; font-size: .88rem; font-weight: 600; border-bottom: 1px solid rgba(21,51,224,.35); }
.foot a:hover { background: var(--cobalt); color: var(--bone); border-bottom-color: var(--cobalt); }
.flegal {
  max-width: var(--wrap);
  margin: 26px auto 0;
  padding: 16px var(--pad) 26px;
  display: flex;
  justify-content: space-between;
  gap: 8px 20px;
  flex-wrap: wrap;
  font-size: .74rem;
  letter-spacing: .12em;
  text-transform: uppercase;
  font-weight: 600;
  color: var(--onbone-mute);
}
.flegal .agetag { color: var(--onbone-mute); border-color: rgba(18,32,124,.3); }
.flegal .agetag b { color: var(--cobalt); }

/* ------------------------------------------------------------ mobile dock --- */
.m-dock { display: none; }

/* ----------------------------------------- the shared static templates --- */
/* /about/, /faq/, /contact/, /booking/, /terms/, /privacy/, /dmca/,
   /age-verification/, /cancellation-policy/, /glossary/ and 404 come from the
   shared templates/ set with their own small class vocabulary. These rules put
   that vocabulary in this theme's clothes. */
.hero { border-bottom: 2px solid var(--seam); padding: clamp(30px,4vw,56px) 0 clamp(22px,3vw,34px); }
.hero > * { max-width: var(--wrap); margin-left: auto; margin-right: auto; padding-left: var(--pad); padding-right: var(--pad); }
.hero h1 { margin: 0 auto; font-family: var(--serif); font-weight: 900; text-transform: uppercase; line-height: .9; letter-spacing: -.015em; font-size: clamp(2.1rem,5vw,3.4rem); }
.hero .lede { margin: 18px auto 0; font-size: 1.08rem; color: var(--dim); max-width: none; padding-right: max(var(--pad),24%); }
.hero-small { border-bottom: 2px solid var(--seam); padding: clamp(24px,3vw,40px) 0 clamp(18px,2vw,26px); }
.hero-small > * { max-width: var(--wrap); margin-left: auto; margin-right: auto; padding-left: var(--pad); padding-right: var(--pad); }
.hero-small h1 { font-family: var(--serif); font-weight: 900; text-transform: uppercase; line-height: .92; font-size: clamp(1.9rem,4vw,2.8rem); }
.label { font-family: var(--serif); font-weight: 800; font-size: .74rem; letter-spacing: .22em; text-transform: uppercase; color: var(--dim); }
.label-top { margin: 0 auto 14px; }
.container { max-width: var(--wrap); margin: 0 auto; padding: 0 var(--pad); }
main > section:not([class]) { padding: clamp(28px,3.4vw,46px) 0; }
.reading { max-width: var(--wrap); margin: 0 auto; padding: 0 var(--pad); }
.reading > * { max-width: var(--reading); }
.reading > :first-child { margin-top: 0; }
.reading p { margin: 0 0 16px; color: var(--dim); }
.reading h2 { margin: 40px 0 12px; padding-top: 12px; border-top: 2px solid var(--seam); display: block; }
.reading h3 { margin: 28px 0 8px; font-size: 1.12rem; color: var(--bone); }
.reading h4 { margin: 22px 0 6px; font-size: 1rem; color: var(--bone); font-family: var(--serif); font-weight: 800; text-transform: uppercase; }
.reading ul, .reading ol { margin: 0 0 16px; padding-left: 20px; color: var(--dim); }
.reading li { margin: 0 0 7px; }
.reading a { color: var(--bone); font-weight: 700; text-underline-offset: 3px; }
.reading a:hover { color: var(--dim); }
.reading strong, .reading b { color: var(--bone); font-weight: 700; }
.reading table { width: 100%; border-collapse: collapse; margin: 0 0 20px; font-size: .95rem; }
.reading th, .reading td { text-align: left; padding: 10px 14px 10px 0; border-top: 1px solid var(--hair); color: var(--dim); }
.reading thead th { border-top: 0; font-size: .7rem; letter-spacing: .16em; text-transform: uppercase; color: var(--bone); }
.reading details { border-top: 1px solid var(--hair); }
.reading summary { cursor: pointer; padding: 14px 0; font-weight: 700; }
.reading summary:hover { color: var(--dim); }
/* .reading a is one class more specific than .btn-primary, so name both here or
   a button inside shared prose takes the link colour and loses its own. */
.reading a.btn-primary, .prose a.btn-primary, .reading a.btn-a, .prose a.btn-a { color: var(--cobalt); }
.reading a.btn-ghost, .prose a.btn-ghost, .reading a.btn-b, .prose a.btn-b { color: var(--bone); }
.reading a.btn-ghost:hover, .prose a.btn-ghost:hover, .reading a.btn-b:hover, .prose a.btn-b:hover { color: var(--cobalt); }
.form-row { margin: 0 0 18px; }
.form-row .label { display: block; margin: 0 0 6px; }
.form-row select, .form-row input {
  font: inherit;
  font-size: 16px;
  width: 100%;
  max-width: 420px;
  color: var(--bone);
  background: var(--cobalt-deep);
  border: 2px solid var(--hair);
  padding: 11px 12px;
}
.form-row select:focus, .form-row input:focus { border-color: var(--bone); }

/* --------------------------------------------------------- breakpoints --- */
@media (max-width: 1180px) {
  .duo { grid-template-columns: minmax(0,1fr) 280px; }
  .wall { grid-template-columns: repeat(4,minmax(0,1fr)); }
  .mast nav { gap: 14px; }
  .mast nav a { font-size: 12px; letter-spacing: .1em; }
}
@media (max-width: 980px) {
  .duo { grid-template-columns: 1fr; gap: 26px 0; }
  .rail { border-left: 0; border-top: 2px solid var(--seam); padding-left: 0; padding-top: 22px; }
  .footin { grid-template-columns: 1fr 1fr; }
  .footin > div:first-child { grid-column: 1 / -1; }
  .index a { grid-template-columns: minmax(0,1fr); }
  .index .im { grid-row: auto; text-align: left; }
}
@media (max-width: 860px) {
  .nav-toggle { display: inline-block; order: 3; margin-left: auto; }
  .agetag { order: 4; }
  .mast nav { display: none; order: 5; flex-basis: 100%; margin-left: 0; flex-direction: column; gap: 0; padding-bottom: 6px; }
  .mast nav.open { display: flex; }
  .mast nav a { padding: 11px 0; border-top: 1px solid var(--hair2); }
  .wall { grid-template-columns: repeat(3,minmax(0,1fr)); }
  .gallery { grid-template-columns: repeat(3,minmax(0,1fr)); }
}
@media (max-width: 640px) {
  .wall { grid-template-columns: repeat(2,minmax(0,1fr)); }
  .gallery { grid-template-columns: repeat(2,minmax(0,1fr)); }
  .gallery li:first-child { grid-column: span 2; grid-row: auto; }
  .footin { grid-template-columns: 1fr; }
  .linklist { grid-template-columns: 1fr; }
  .cards { grid-template-columns: 1fr; }
  .cards a { padding-right: 0; }
  .acts .btn, .acts .btn-primary, .acts .btn-ghost { flex: 1 1 auto; }
  .roster .cell { min-height: 128px; }
}
@media (max-width: 420px) {
  .flegal { flex-direction: column; }
}
/* ----------------------------------------------- shuffled grids, before JS --- */
/* public/app.js keeps the first N cards of a data-shuffle="N" grid; until it
   runs, the extra cards stay unpainted so nothing jumps when it trims them. */
[data-shuffle="8"] > :nth-child(n+9) { display: none; }
[data-shuffle="6"] > :nth-child(n+7) { display: none; }
.fnote + .flabel { margin-top: 22px; }
.rail > .fnote:first-child { margin-top: 0; }

/* ------------------------------------------------------- the phone pass --- */
/* Glued to the screen: every band already runs edge to edge on the body
   colour, copy keeps its 20px inside. Here the dock arrives at 760px, taps
   reach 44px and running copy reaches 16px. */
@media (max-width: 760px) {
  body { padding-bottom: calc(84px + env(safe-area-inset-bottom)); font-size: 16.5px; }
  body.age-bar-open { padding-bottom: calc(184px + env(safe-area-inset-bottom)); }
  .age-bar { bottom: calc(70px + env(safe-area-inset-bottom)); }
  .age-bar__ok { min-height: 44px; }
  .nav-toggle { min-height: 44px; }
  .mast nav a { min-height: 44px; display: flex; align-items: center; }
  .wrap, .field, .mastin, nav.crumbs, aside.seo-related, .footin, .flegal, .container, .reading,
  .hero > *, .hero-small > * { padding-left: 20px; padding-right: 20px; }
  .roster .who { padding-left: 20px; padding-right: 16px; }
  .roster b { font-size: clamp(1.2rem,5.6vw,2.2rem); overflow-wrap: normal; }
  .lede, .deck, .fine, .fnote, .flist li, .sechead p, .linklist a, .faq .a p, .steps p, .tech p,
  .rates .len, .spec dt, .spec dd, .index .id, .foot p, .foot a, .wallfoot, .more, .taxline,
  .prose table, .reading table, .rates-card__table, .rates-card__terms, .independence,
  .hero .lede, aside.seo-related a { font-size: 16px; }
  .prose table, .reading table { display: block; overflow-x: auto; }
  /* the shared static pages set a few lines at 14px inline; a phone reads them at 16 */
  main p[style*="font-size:14px"], main p[style*="font-size: 14px"] { font-size: 16px !important; }
  /* one long address must never widen a 320px page */
  body { overflow-wrap: break-word; }
  a[href^="mailto:"] { overflow-wrap: anywhere; }
  .m-dock {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
    position: fixed;
    left: 0; right: 0; bottom: 0;
    width: 100%;
    z-index: 160;
    padding: 10px 16px calc(10px + env(safe-area-inset-bottom));
    background: var(--cobalt);
    border-top: 2px solid var(--seam);
  }
  .m-dock--one { grid-template-columns: 1fr; }
  .m-dock a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    min-height: 48px;
    text-decoration: none;
    font-weight: 700;
    font-size: 16px;
    padding: 0 8px;
    border: 2px solid var(--bone);
  }
  .m-dock svg { width: 17px; height: 17px; flex: none; }
  .m-dock__wa { background: var(--bone); color: var(--cobalt); }
  .m-dock__tg { background: transparent; color: var(--bone); }
}

@media print {
  .m-dock, .age-bar, .mast nav, .nav-toggle { display: none; }
}

/* ---- injected by build: breadcrumbs + related pages ---- */
.crumbs{position:relative;z-index:3;max-width:var(--max,1200px);margin:0 auto;padding:14px clamp(18px,4vw,40px) 0;font-size:12.5px;line-height:1.5;letter-spacing:.02em}
.crumbs ol{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:4px 8px;opacity:.72}
.crumbs li{display:inline-flex;align-items:center;gap:8px;min-width:0}
.crumbs li+li::before{content:"/";opacity:.5}
.crumbs a{color:inherit;text-decoration:none;border-bottom:1px solid transparent}
.crumbs a:hover{border-bottom-color:currentColor}
.crumbs [aria-current]{opacity:.85;overflow-wrap:anywhere}
.seo-related{position:relative;z-index:3;max-width:var(--max,1200px);margin:0 auto;padding:clamp(28px,4vw,48px) clamp(18px,4vw,40px)}
.seo-related__in{border-top:1px solid rgba(128,128,128,.28);padding-top:22px}
.seo-related__h{margin:0 0 14px;font-size:12px;letter-spacing:.16em;text-transform:uppercase;opacity:.7}
.seo-related ul{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:10px 28px}
.seo-related a{color:inherit;text-decoration:none;display:block;padding:6px 0;border-bottom:1px solid rgba(128,128,128,.16);font-size:15px;line-height:1.4}
.seo-related a:hover{opacity:.75}