/* === Self-hosted fonts (latin subset), public/fonts/cutout/ ===
   Archivo Black  display, every headline and number
   Archivo        text, 400 to 700, variable
   Instrument Serif  one italic accent word per section, and its roman companion
   No third-party stylesheet is loaded on any page of this network, so the four
   faces below are the whole type system. The build rewrites this run from
   sites/erotic-massage-amsterdam.json theme.fonts.faces; keep the two in step. */
@font-face {
  font-family: 'Archivo';
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url('/fonts/cutout/archivo-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: 'Archivo Black';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('/fonts/cutout/archivo-black-normal-400.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: 'Instrument Serif';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('/fonts/cutout/instrument-serif-normal-400.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: 'Instrument Serif';
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  src: url('/fonts/cutout/instrument-serif-italic-400.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;
}

/* ============================================================================
   EROTIC MASSAGE AMSTERDAM, theme "cutout"
   Torn paper. Near-black ground, one hot pink and one acid block per screen,
   photographs cut out with a white paper edge and dropped on top of them,
   Archivo Black set very large and very tight.

   NOTHING ON ANY PAGE MOVES. No keyframe rule, no timed property, no easing,
   no script of this theme's own, nothing that fades or travels on scroll.
   A hover changes a colour or an underline and does it at once, in a single
   frame, so there is no reduced-motion block here: it would have nothing to
   say. Keep it that way when this file grows. Nothing is drawn either: every
   mark on the page is a photograph, a letter, a flat rectangle or a rule. The
   only exceptions are the two messenger glyphs in the mobile dock.

   Two jobs in one file:
     1. this theme's own pages (home, profile, technique, hub, guide, indexes)
     2. a compatibility layer for the SHARED templates it inherits: about, faq,
        contact, booking, terms, privacy, dmca, the age statement, the glossary,
        the cancellation policy and 404, which render .container / .reading /
        .hero / .btn / .label-top / .form-row.
   ============================================================================ */

:root{
  --black:#08070A;
  --black-2:#100E14;
  --pink:#FF1B8D;
  --pink-deep:#D6006F;
  --acid:#E4FF1C;
  --acid-deep:#C6E200;
  --white:#FFFFFF;
  --dim:#CFCBD4;
  --onblock:#080006;
  --onblock-2:#2A0016;
  --onacid-2:#2B3200;
  --paper:#FFFFFF;
  --line:#24212A;
  --line-2:#3A3642;
  --wa:#25D366;
  /* tokens the SHARED templates reference from inline styles: keep them declared
     so an inherited page never falls back to an invalid value */
  --ink:#FFFFFF;
  --muted:#CFCBD4;
  --faint:#A6A1AE;
  --rule:#24212A;
  --hair:#24212A;
  --cloud:#08070A;
  --sky-3:#100E14;
  --serif:'Instrument Serif', Georgia, 'Times New Roman', serif;
  --sans:'Archivo', 'Helvetica Neue', Helvetica, Arial, sans-serif;
  --display:'Archivo Black', 'Archivo', 'Arial Black', Arial, sans-serif;
  --max:1320px;
  --reading:660px;
  --gutter:20px;
  --pad:74px;
  --cut-a:polygon(5% 0%,33% 3%,61% 0%,90% 4%,100% 24%,96% 52%,100% 79%,89% 100%,58% 96%,27% 100%,5% 93%,0% 62%,3% 34%,0% 8%);
  --cut-b:polygon(0% 6%,26% 0%,55% 4%,84% 0%,100% 12%,97% 41%,100% 70%,93% 96%,66% 100%,37% 95%,11% 100%,2% 74%,5% 45%,0% 27%);
  --cut-c:polygon(8% 2%,38% 0%,68% 5%,96% 0%,100% 31%,95% 58%,100% 86%,74% 100%,45% 95%,18% 100%,3% 81%,0% 50%,4% 26%,0% 11%);
  --cut-d:polygon(2% 0%,31% 5%,59% 0%,88% 3%,100% 18%,96% 47%,100% 74%,86% 98%,55% 100%,25% 96%,6% 100%,0% 70%,4% 41%,0% 15%);
}

/* ---------- ground -------------------------------------------------------- */
*{box-sizing:border-box;}
html{-webkit-text-size-adjust:100%;}
html,body{margin:0;padding:0;max-width:100%;overflow-x:hidden;}
body{
  background:var(--black);
  color:var(--white);
  font-family:var(--sans);
  font-size:17px;
  line-height:1.55;
  -webkit-font-smoothing:antialiased;
}
main{display:block;}
img{max-width:100%;display:block;border:0;}
p{margin:0 0 14px;}
a{color:inherit;text-decoration:none;}
ul,ol{margin:0;padding:0;}
button{font:inherit;color:inherit;border-radius:0;}
table{border-collapse:collapse;width:100%;}
:focus-visible{outline:3px solid var(--acid);outline-offset:2px;}
.wrap{width:100%;max-width:var(--max);margin:0 auto;padding:0 var(--gutter);}
.sr-only,.rates-card__sr{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0;}

/* ---------- cut-out figure: clip on the inner, paper edge on the wrapper --- */
.cut{filter:drop-shadow(3px 0 0 var(--paper)) drop-shadow(-3px 0 0 var(--paper)) drop-shadow(0 3px 0 var(--paper)) drop-shadow(0 -3px 0 var(--paper)) drop-shadow(14px 18px 0 rgba(0,0,0,.55));}
.cut{--clip:var(--cut-a);}
.cut > img{display:block;width:100%;height:100%;object-fit:cover;object-position:50% 22%;clip-path:var(--clip);background:var(--black-2);}
.cut.b{--clip:var(--cut-b);}
.cut.c{--clip:var(--cut-c);}
.cut.d{--clip:var(--cut-d);}

/* ---------- display type -------------------------------------------------- */
.disp,h1,h2{
  font-family:var(--display);
  font-weight:400;
  line-height:.86;
  letter-spacing:-.035em;
  text-transform:uppercase;
  margin:0;
  overflow-wrap:break-word;
}
h1{font-size:clamp(34px,7.4vw,74px);}
h2{font-size:clamp(28px,5.4vw,52px);}
h3{font-family:var(--sans);font-weight:700;font-size:clamp(17px,2.4vw,21px);line-height:1.2;letter-spacing:-.01em;margin:0 0 10px;}
h4,h5{font-family:var(--sans);font-weight:700;font-size:15px;margin:0 0 8px;}
.ser{font-family:var(--serif);font-style:italic;text-transform:none;letter-spacing:-.01em;font-weight:400;}
.kick{
  font-family:var(--sans);
  font-weight:700;
  font-size:12px;
  letter-spacing:.2em;
  text-transform:uppercase;
  margin:0 0 12px;
}
.lede{font-size:clamp(17px,2vw,20px);line-height:1.5;font-weight:500;max-width:56ch;margin:0 0 16px;}

/* ---------- 21 bar (shared app.js raises it) ------------------------------ */
.age-bar{
  display:flex;flex-wrap:wrap;align-items:center;gap:10px 16px;
  padding:10px var(--gutter);background:var(--black-2);
  border-bottom:2px solid var(--line);font-size:13px;color:var(--dim);
}
.age-bar__txt b{color:var(--acid);letter-spacing:.14em;font-weight:700;margin-right:6px;}
.age-bar__ok{
  background:none;border:1px solid var(--line-2);color:var(--white);
  font-size:11px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;
  padding:7px 12px;cursor:pointer;
}
.age-bar__ok:hover{background:var(--acid);color:var(--onblock);border-color:var(--acid);}
body.age-confirmed .age-bar{display:none;}

/* ---------- top bar ------------------------------------------------------- */
.site-header{border-bottom:2px solid var(--line);}
.topbar{
  display:flex;align-items:center;gap:12px 20px;flex-wrap:wrap;
  padding:14px var(--gutter) 12px;max-width:var(--max);margin:0 auto;
}
.mark{font-family:var(--display);font-size:15px;letter-spacing:-.02em;text-transform:uppercase;}
.mark span{color:var(--pink);}
.agepill{
  font-size:11px;font-weight:700;letter-spacing:.16em;text-transform:uppercase;
  color:var(--acid);border:1px solid #4A5200;padding:4px 9px;white-space:nowrap;margin-left:auto;
}
.site-header nav{
  display:flex;flex-wrap:wrap;gap:4px 16px;width:100%;order:3;
  font-size:12px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;
  padding-top:10px;border-top:1px solid var(--line);
}
.site-header nav a{color:var(--dim);padding:5px 0;}
.site-header nav a:hover{color:var(--acid);}
.nav-toggle{
  display:none;background:none;border:1px solid var(--line-2);color:var(--white);
  font-size:11px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;padding:7px 11px;cursor:pointer;
}
.nav-toggle:hover{background:var(--pink);border-color:var(--pink);color:var(--white);}
@media (max-width:760px){
  .topbar{gap:8px 10px;}
  .mark{font-size:14px;}
  .nav-toggle{display:inline-block;padding:6px 9px;}
  .site-header nav{display:none;}
  .site-header nav.open{display:flex;flex-direction:column;gap:0;}
  .site-header nav.open a{border-bottom:1px solid var(--line);padding:10px 0;}
}

/* ---------- section shell ------------------------------------------------- */
.sec{padding:var(--pad) 0 calc(var(--pad) + 4px);overflow:hidden;position:relative;}
.sec--tight{padding:46px 0 50px;}
.block{position:relative;padding:44px 34px 48px;}
.block.pink{background:var(--pink);color:var(--onblock);}
.block.acid{background:var(--acid);color:var(--onblock);}
.block.paper{background:var(--white);color:var(--onblock);}
.block.tilt-l{transform:rotate(-1.1deg);}
.block.tilt-r{transform:rotate(.9deg);}
.block > *{position:relative;z-index:2;}
.block.pink .kick{color:var(--onblock-2);}
.block.acid .kick{color:var(--onacid-2);}
.block.pink p,.block.acid p,.block.paper p,
.block.pink li,.block.acid li,.block.paper li,
.block.pink dt,.block.acid dt,.block.pink dd,.block.acid dd,
.block.pink caption,.block.acid caption,
.block.pink th,.block.acid th,.block.pink td,.block.acid td,
.block.pink summary,.block.acid summary{color:var(--onblock);}
.block.pink a,.block.acid a,.block.paper a{color:var(--onblock);border-bottom:2px solid currentColor;}
.block.pink a:hover,.block.acid a:hover,.block.paper a:hover{background:var(--black);color:var(--white);border-bottom-color:var(--black);}

/* ---------- buttons ------------------------------------------------------- */
.btns{display:flex;flex-wrap:wrap;gap:12px;margin-top:20px;}
.btn{
  display:inline-block;text-decoration:none;font-weight:700;font-size:15px;
  letter-spacing:.03em;text-transform:uppercase;padding:15px 24px;border:3px solid var(--black);
  font-family:var(--sans);cursor:pointer;
}
.btn-a{background:var(--acid);color:var(--onblock);}
.btn-b{background:var(--white);color:var(--onblock);}
.btn-a:hover{background:var(--white);}
.btn-b:hover{background:var(--acid);}
.btn.onblack{border-color:var(--white);}
.btn.onblack:hover{background:var(--pink);color:var(--white);border-color:var(--pink);}
.block.pink .btn,.block.acid .btn,.block.paper .btn{border-color:var(--black);}
.block.pink .btn:hover,.block.acid .btn:hover,.block.paper .btn:hover{background:var(--black);color:var(--white);border-color:var(--black);}

/* ============================ HOME AND PROFILE: STAGE HERO ================ */
.stagehero{padding:26px 0 54px;position:relative;overflow:hidden;}
.stage{position:relative;}
.blk-pink{display:none;}
.h-word{font-size:clamp(30px,8.4vw,58px);color:var(--white);overflow-wrap:break-word;}
.h-sub{
  font-size:clamp(28px,8.4vw,58px);color:var(--onblock);background:var(--acid);
  display:inline-block;padding:5px 12px 9px;transform:rotate(-1.3deg);
  position:relative;z-index:7;margin:18px 0 0 -6px;
}
.hero-bottom{margin-top:26px;position:relative;z-index:7;}
.fig-big{position:relative;z-index:4;width:70%;max-width:330px;aspect-ratio:3/4;margin:18px -8px -24px auto;}
.lede-pink{margin-top:26px;}
.lede-pink p{color:var(--onblock);}
.arrive{color:var(--white);font-size:16px;font-weight:500;max-width:52ch;}
.arrive b{color:var(--acid);font-weight:700;}
.arrive + .arrive{margin-top:-2px;}

/* ---------- inner-page hero: type, one tilted block, no photograph -------- */
.phero{padding:34px 0 24px;position:relative;overflow:hidden;}
.phero .kick{color:var(--acid);}
.phero h1{font-size:clamp(28px,5.2vw,52px);max-width:22ch;}
.phero .h-sub{margin:16px 0 0;font-size:clamp(22px,5vw,38px);}
.phero-lede{margin-top:28px;max-width:760px;padding:30px 28px 26px;}
.phero-lede .lede{margin:0;max-width:none;color:var(--onblock);font-weight:500;}
.phero .btns{margin-top:28px;}

/* ---------- home prose, written in content/<site>/pages.json -------------- */
.home-copy .block{margin-bottom:0;}
.home-copy h2{font-size:clamp(30px,6.2vw,58px);max-width:18ch;}
.home-copy p{max-width:56ch;font-weight:500;}
.home-copy .block.pink p,.home-copy .block.acid p{color:var(--onblock);}
.home-copy .sec:nth-of-type(even) .block{transform:rotate(.9deg);}

/* ============================ TECHNIQUES ================================== */
.tech-list{display:flex;flex-wrap:wrap;gap:8px 10px;margin:22px 0 0;padding:0;list-style:none;}
.tech-list li{display:block;}
.tech-list a,.tech-list span{
  display:inline-block;font-family:var(--display);text-transform:uppercase;
  font-size:clamp(15px,3.4vw,24px);letter-spacing:-.02em;line-height:1;
  background:var(--black);color:var(--white);padding:9px 12px 10px;border-bottom:0;
}
.tech-list li:nth-child(3n) a,.tech-list li:nth-child(3n) span{background:var(--white);color:var(--onblock);}
.tech-list li:nth-child(5n){transform:rotate(-1.4deg);}
.tech-list li:nth-child(7n){transform:rotate(1.6deg);}
.tech-list a:hover{background:var(--pink);color:var(--white);}
.block .tech-list a{color:var(--white);border-bottom:0;}
.block .tech-list li:nth-child(3n) a{color:var(--onblock);}
.block .tech-list a:hover{background:var(--pink);color:var(--white);}
.tech-list .px{display:block;font-family:var(--sans);font-size:11px;font-weight:700;letter-spacing:.1em;margin-top:4px;text-transform:uppercase;}
.tech-list--big{margin-top:0;}
.tech-list--big a{font-size:clamp(18px,4.4vw,32px);padding:12px 16px 13px;background:var(--black-2);}
.tech-list--big li:nth-child(3n) a{background:var(--white);color:var(--onblock);}
.tech-list--big li:nth-child(4n) a{background:var(--acid);color:var(--onblock);}
.foot-note{font-size:15px;font-weight:500;margin-top:24px;max-width:56ch;}

/* ============================ ROSTER ====================================== */
.roster{list-style:none;margin:30px 0 0;padding:0;display:grid;grid-template-columns:repeat(2,1fr);gap:26px 12px;}
.who{position:relative;min-width:0;}
.who .cut{display:block;width:100%;aspect-ratio:3/4;}
.who .tag{
  position:relative;z-index:5;margin:-24px 0 0 -6px;display:inline-block;
  background:var(--acid);color:var(--onblock);padding:7px 10px 8px;transform:rotate(-1.4deg);
}
.who:nth-child(even) .tag{background:var(--pink);color:var(--onblock);transform:rotate(1.5deg);margin-left:8px;}
.who a:hover .tag{background:var(--white);}
.who .tag .nm{font-family:var(--display);font-size:17px;text-transform:uppercase;letter-spacing:-.02em;display:block;line-height:1;}
.who .tag .mt{font-size:12px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;display:block;margin-top:4px;}
.who:nth-child(3n) .cut{--clip:var(--cut-b);}
.who:nth-child(4n) .cut{--clip:var(--cut-c);}
.who:nth-child(5n) .cut{--clip:var(--cut-d);}
/* app.js shuffles each grid on load and keeps the first N cards: cards past N are never painted before it runs */
[data-shuffle="12"] > :nth-child(n+13){display:none;}
[data-shuffle="8"] > :nth-child(n+9){display:none;}
[data-shuffle="4"] > :nth-child(n+5){display:none;}
.roster-note{margin-top:34px;color:var(--dim);font-size:15px;max-width:58ch;}
.roster--wide{grid-template-columns:repeat(2,1fr);}

/* ============================ RATES: the profile page only ================
   Owner, 2026-09-21: a figure is shown inside a profile and nowhere else, so the
   only rate rules left in this file dress the shared partials/rates.mustache. */
.rates-card{margin-top:20px;}
.rates-card__title{color:inherit;font-family:var(--display);text-transform:uppercase;font-size:clamp(20px,3vw,28px);letter-spacing:-.02em;margin:0 0 14px;}
.rates-card__table{width:100%;max-width:760px;margin:0 0 22px;font-variant-numeric:tabular-nums;}
.rates-card__table caption{
  text-align:left;font-size:11px;font-weight:700;letter-spacing:.16em;text-transform:uppercase;
  padding:0 0 8px;color:var(--onblock-2);
}
.rates-card__table th,.rates-card__table td{
  text-align:left;padding:10px 10px 10px 0;border-top:2px solid var(--onblock);
  font-size:15px;font-weight:700;
}
.rates-card__table td{text-align:right;padding-right:0;}
.rates-card__table thead th{font-size:11px;letter-spacing:.14em;text-transform:uppercase;border-top:0;}
.rates-card__table thead th + th{text-align:right;}
.rates-card__extra th,.rates-card__extra td{font-weight:500;}
.rates-card__terms{font-size:13px;font-weight:700;margin:0;}

/* ============================ DISTRICTS / CHIPS =========================== */
.chips{list-style:none;margin:20px 0 0;padding:0;display:flex;flex-wrap:wrap;gap:8px;}
.chips li{background:var(--white);color:var(--onblock);font-weight:700;font-size:14px;padding:7px 11px;text-transform:uppercase;letter-spacing:.05em;}
.chips li:nth-child(4n){background:var(--acid);transform:rotate(-1.5deg);}
.chips li:nth-child(6n){background:var(--pink);color:var(--onblock);transform:rotate(1.4deg);}
.chips a,.block .chips a{border-bottom:0;display:block;}
.chips a:hover{color:var(--pink-deep);}

/* ---------- link lists ---------------------------------------------------- */
.linklist{list-style:none;margin:22px 0 0;padding:0;display:grid;gap:0;}
.linklist li{border-top:2px solid var(--line);}
.linklist li:last-child{border-bottom:2px solid var(--line);}
.linklist a{
  display:flex;gap:14px;align-items:baseline;padding:16px 0;
  font-family:var(--display);text-transform:uppercase;letter-spacing:-.02em;
  font-size:clamp(17px,2.8vw,26px);line-height:1.02;color:var(--white);
}
.linklist a::after{content:"\203A";font-family:var(--sans);margin-left:auto;color:var(--pink);font-size:22px;line-height:1;}
.linklist a:hover{color:var(--acid);}
.linklist .ll-note{display:block;font-family:var(--sans);font-size:14px;font-weight:500;letter-spacing:0;text-transform:none;color:var(--dim);margin-top:6px;line-height:1.5;}
.linklist--onblock a{color:var(--onblock);}
.linklist--onblock li{border-color:var(--onblock);}
.linklist--onblock li:last-child{border-color:var(--onblock);}
.linklist--onblock a:hover{color:var(--white);}
.linklist--onblock a::after{color:var(--onblock);}
.more{margin-top:22px;font-size:14px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;}
.more a{border-bottom:2px solid var(--pink);padding-bottom:2px;}
.more a:hover{color:var(--acid);border-bottom-color:var(--acid);}

/* ---------- index lists (guides, journal) --------------------------------- */
.index{list-style:none;margin:26px 0 0;padding:0;display:grid;gap:14px;}
.index li{min-width:0;}
.index a{display:block;background:var(--black-2);border:2px solid var(--line);padding:22px 22px 24px;}
.index a:hover{background:var(--pink);border-color:var(--pink);color:var(--white);}
.index li:nth-child(3n) a:hover{background:var(--acid);border-color:var(--acid);color:var(--onblock);}
.index__t{display:block;font-family:var(--display);text-transform:uppercase;letter-spacing:-.025em;line-height:1.02;font-size:clamp(19px,3vw,28px);}
.index__d{display:block;margin-top:10px;font-size:15px;font-weight:500;color:var(--dim);max-width:62ch;}
.index a:hover .index__d{color:inherit;}
.index__m{display:block;margin-top:12px;font-size:11px;font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:var(--dim);}
.index a:hover .index__m{color:inherit;}

/* ============================ PROSE ======================================= */
.prose{max-width:var(--reading);}
.prose--wide{max-width:74ch;}
.prose p{font-size:17px;line-height:1.66;color:var(--dim);}
.prose h2{margin:40px 0 14px;font-size:clamp(24px,4.4vw,40px);color:var(--white);}
.prose h3{margin:28px 0 10px;color:var(--white);}
.prose ul{margin:0 0 18px;padding-left:20px;}
.prose li{margin:0 0 8px;font-size:16px;line-height:1.6;color:var(--dim);}
.prose a{color:var(--white);border-bottom:2px solid var(--pink);}
.prose a:hover{color:var(--acid);border-bottom-color:var(--acid);}
.prose .lede{color:var(--white);}
.independence{border-top:2px solid var(--line);padding-top:16px;margin-top:26px;font-size:15px;color:var(--dim);}

/* ---------- facts panel --------------------------------------------------- */
.facts{background:var(--black-2);border:2px solid var(--line);padding:24px 22px 26px;}
.spec{margin:0;}
.spec > div{display:flex;gap:14px;justify-content:space-between;align-items:baseline;border-top:1px solid var(--line);padding:9px 0;}
.spec > div:first-child{border-top:0;padding-top:0;}
.spec dt{font-size:11px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--dim);}
.spec dd{margin:0;font-size:15px;font-weight:700;text-align:right;}
.spec dd a{border-bottom:2px solid var(--pink);}
.spec dd a:hover{color:var(--acid);border-bottom-color:var(--acid);}
.label{display:block;margin:20px 0 10px;font-size:11px;font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:var(--dim);}
.tags{display:flex;flex-wrap:wrap;gap:6px;margin:0;}
.tag-pill,.tags .tag{
  display:inline-block;background:var(--white);color:var(--onblock);
  font-size:12px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;padding:5px 9px;
}
.tags a.tag:hover{background:var(--acid);}
.cols{display:grid;gap:34px;}

/* ---------- photo run (profile) ------------------------------------------ */
.shots{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(2,1fr);gap:24px 14px;}
.shots li{min-width:0;}
.shots .cut{display:block;width:100%;aspect-ratio:3/4;}
.shots li:nth-child(2n) .cut{--clip:var(--cut-b);}
.shots li:nth-child(3n) .cut{--clip:var(--cut-c);}
.shots li:nth-child(4n) .cut{--clip:var(--cut-d);}
.shots li:nth-child(odd){transform:rotate(-.8deg);}
.shots li:nth-child(even){transform:rotate(.7deg);}

/* ---------- questions ----------------------------------------------------- */
.faq{margin-top:22px;}
.faq details{border-top:2px solid var(--line);}
.faq details:last-of-type{border-bottom:2px solid var(--line);}
.faq summary{
  list-style:none;cursor:pointer;padding:16px 34px 16px 0;position:relative;
  font-family:var(--sans);font-weight:700;font-size:16px;line-height:1.35;
}
.faq summary::-webkit-details-marker{display:none;}
.faq summary::after{content:"+";position:absolute;right:2px;top:14px;font-family:var(--display);font-size:20px;color:var(--pink);}
.faq details[open] summary::after{content:"\2013";}
.faq summary:hover{color:var(--acid);}
.faq .a{padding:0 0 18px;}
.faq .a p{margin:0;font-size:16px;line-height:1.65;color:var(--dim);max-width:66ch;}
.block.pink .faq details,.block.acid .faq details{border-color:var(--onblock);}
.block.pink .faq .a p,.block.acid .faq .a p{color:var(--onblock);}
.block.pink .faq summary::after,.block.acid .faq summary::after{color:var(--onblock);}
.block.pink .faq summary:hover,.block.acid .faq summary:hover{color:var(--white);}

/* ============================================================================
   SHARED-TEMPLATE COMPATIBILITY LAYER
   about, faq, contact, booking, terms, privacy, dmca, age statement, glossary,
   cancellation policy and 404 render markup this theme does not own. They get
   the same chrome; these rules give their markup the same language.
   ============================================================================ */
.container{max-width:var(--max);margin:0 auto;padding:0 var(--gutter);width:100%;}
.reading{max-width:var(--reading);}
.reading.container{max-width:var(--max);padding:0 var(--gutter);}
section .reading > *{max-width:var(--reading);}
section{padding:46px 0;}
.hero{max-width:var(--max);margin:0 auto;padding:46px var(--gutter) 34px;border-bottom:0;}
.hero-small{padding-top:40px;}
.hero .container{padding:0;}
.hero h1{font-size:clamp(30px,5.4vw,58px);max-width:20ch;}
.hero .label-top{color:var(--acid);}
.hero .lede{margin:24px 0 0;color:var(--dim);}
.label-top{font-size:12px;font-weight:700;letter-spacing:.2em;text-transform:uppercase;color:var(--acid);margin-bottom:14px;}
section .container > h1{margin-bottom:18px;}
section p{color:var(--dim);line-height:1.66;}
section .reading h2{margin:44px 0 14px;font-size:clamp(24px,3.2vw,36px);}
section .reading h3{margin:26px 0 8px;color:var(--white);}
/* Body links inside an inherited page, but NOT the two shared buttons: the
   shared templates put .btn.btn-primary and .btn.btn-ghost inside .reading, and
   a plain "section .reading a" outranks .btn-primary, which left white type on
   the acid ground. :not(.btn) hands the buttons back to their own rules. */
section .reading a:not(.btn){color:var(--white);border-bottom:2px solid var(--pink);}
section .reading a:not(.btn):hover{color:var(--acid);border-bottom-color:var(--acid);}
section .reading ul{padding-left:0;margin:0 0 20px;}
section .reading ul li{list-style:none;border-top:1px solid var(--line);padding:11px 0;font-size:16px;color:var(--dim);}
section .reading em{font-family:var(--serif);font-style:italic;color:var(--white);}
.btn-primary{background:var(--acid);color:var(--onblock);border:3px solid var(--acid);display:inline-block;font-weight:700;font-size:15px;letter-spacing:.03em;text-transform:uppercase;padding:15px 24px;}
.btn-primary:hover{background:var(--white);border-color:var(--white);color:var(--onblock);}
.btn-ghost{background:none;color:var(--white);border:3px solid var(--white);display:inline-block;font-weight:700;font-size:15px;letter-spacing:.03em;text-transform:uppercase;padding:15px 24px;}
.btn-ghost:hover{background:var(--pink);border-color:var(--pink);color:var(--white);}
.form-row{margin-top:18px;}
.form-row .label{margin:0 0 8px;}
.form-row select,.form-row input{
  width:100%;max-width:100%;padding:13px 12px;border:2px solid var(--line-2);
  background:var(--black-2);font-family:var(--sans);font-size:15px;color:var(--white);border-radius:0;
}
.form-row select:focus,.form-row input:focus{outline:3px solid var(--acid);outline-offset:1px;}
.no-save,.no-save img{-webkit-user-select:none;user-select:none;-webkit-touch-callout:none;}
.wrap-any{overflow-wrap:anywhere;}

/* ---------- build-injected breadcrumbs and related pages ------------------ */
nav.crumbs{
  max-width:var(--max);margin:0 auto;padding:16px var(--gutter) 0;
  font-size:11px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;
}
nav.crumbs ol{opacity:1;gap:4px 10px;}
nav.crumbs li{color:var(--dim);gap:10px;}
nav.crumbs li+li::before{content:"\203A";opacity:1;color:var(--pink);}
nav.crumbs a{color:var(--dim);border-bottom:1px solid transparent;}
nav.crumbs a:hover{color:var(--acid);border-bottom-color:var(--acid);}
nav.crumbs [aria-current]{opacity:1;color:var(--white);}
aside.seo-related{max-width:var(--max);margin:0 auto;padding:46px var(--gutter) 54px;}
aside.seo-related .seo-related__in{border-top:3px solid var(--line);padding-top:20px;}
aside.seo-related .seo-related__h{
  margin:0 0 14px;font-size:12px;font-weight:700;letter-spacing:.2em;text-transform:uppercase;
  color:var(--acid);opacity:1;
}
aside.seo-related ul{gap:0 26px;}
aside.seo-related a{
  border-bottom:1px solid var(--line);font-size:15px;font-weight:600;color:var(--dim);padding:11px 0;
}
aside.seo-related a:hover{opacity:1;color:var(--acid);}

/* ============================ FOOTER ====================================== */
.site-footer{border-top:2px solid var(--line);padding:44px 0 40px;color:var(--dim);font-size:14px;}
.site-footer__in{max-width:var(--max);margin:0 auto;padding:0 var(--gutter);display:grid;gap:30px;}
.site-footer__h{font-family:var(--display);text-transform:uppercase;font-size:15px;letter-spacing:-.01em;color:var(--white);margin:0 0 12px;}
.site-footer ul{list-style:none;display:grid;gap:7px;}
.site-footer li{line-height:1.5;}
.site-footer a{color:var(--dim);}
.site-footer a:hover{color:var(--acid);}
.site-footer__note{max-width:40ch;line-height:1.6;}
.site-footer__legal{
  max-width:var(--max);margin:34px auto 0;padding:16px var(--gutter) 0;border-top:2px solid var(--line);
  display:flex;flex-wrap:wrap;gap:8px 22px;align-items:center;font-size:12px;
}
.age21{color:var(--acid);font-weight:700;letter-spacing:.16em;text-transform:uppercase;}

/* ============================ MOBILE DOCK ================================= */
.m-dock{
  position:fixed;left:0;right:0;bottom:0;z-index:40;
  display:flex;gap:8px;padding:9px 12px calc(9px + env(safe-area-inset-bottom));
  background:var(--black);border-top:3px solid var(--pink);
}
.m-dock a{
  flex:1 1 0;text-align:center;padding:14px 8px;font-size:13px;font-weight:700;
  letter-spacing:.06em;text-transform:uppercase;border:2px solid var(--black);
  display:flex;align-items:center;justify-content:center;gap:7px;
}
.m-dock__wa{background:var(--acid);color:var(--onblock);}
.m-dock__tg{background:var(--white);color:var(--onblock);}
.m-dock__alt{background:none;color:var(--white);border-color:var(--white);}
.m-dock__wa:hover{background:var(--white);}
.m-dock__tg:hover{background:var(--acid);}
.m-dock__alt:hover{background:var(--pink);border-color:var(--pink);}
.m-dock svg{flex:none;}
@media (min-width:761px){.m-dock{display:none;}}

/* ============================ WIDER SCREENS =============================== */
@media (min-width:640px){
  .roster{grid-template-columns:repeat(3,1fr);gap:30px 14px;}
  .shots{grid-template-columns:repeat(3,1fr);}
  .index{grid-template-columns:repeat(2,1fr);}
  .site-footer__in{grid-template-columns:repeat(2,1fr);}
}
@media (min-width:900px){
  :root{--gutter:32px;--pad:94px;}
  body{font-size:18px;}
  .stagehero{padding:34px 0 70px;}
  .stage{position:relative;min-height:clamp(600px,80svh,780px);}
  .stage .blk-pink{display:block;position:absolute;z-index:1;left:37%;top:2%;width:61%;height:74%;background:var(--pink);transform:rotate(-1.5deg);}
  .stage .h-word{position:absolute;z-index:3;left:0;top:1.5%;width:33%;font-size:clamp(28px,3.1vw,44px);}
  .stage .h-sub{position:absolute;z-index:6;left:0;top:46%;font-size:clamp(32px,3.6vw,50px);margin:0;padding:6px 16px 12px;transform:rotate(1.4deg);}
  .stage .fig-big{position:absolute;z-index:4;left:38%;top:5%;width:30%;height:90%;max-width:none;margin:0;aspect-ratio:auto;}
  .stage .lede-pink{position:absolute;z-index:6;left:65%;top:4%;width:33%;padding:32px 30px 34px;margin:0;}
  .stage .hero-bottom{position:absolute;z-index:7;left:0;top:60%;width:33%;margin:0;}
  .hero-bottom .btns{gap:10px;}
  .hero-bottom .btn{font-size:13px;padding:13px 15px;}
  .block{padding:56px 52px 60px;}
  .phero-lede{padding:36px 38px 34px;}
  .phero h1{max-width:24ch;}
  .roster{grid-template-columns:repeat(4,1fr);gap:46px 0;}
  .who:nth-child(2n){margin-top:48px;margin-left:-22px;z-index:3;}
  .who:nth-child(3n){margin-top:-14px;margin-left:-14px;z-index:2;}
  .who:nth-child(4n){margin-top:30px;margin-left:-26px;z-index:4;}
  .who:nth-child(odd){transform:rotate(-.9deg);}
  .who:nth-child(even){transform:rotate(.8deg);}
  .shots{grid-template-columns:repeat(4,1fr);gap:30px 10px;}
  .index{grid-template-columns:repeat(3,1fr);}
  .cols{grid-template-columns:minmax(0,1fr) 340px;gap:48px;align-items:start;}
  .cols--flip{grid-template-columns:340px minmax(0,1fr);}
  .site-footer__in{grid-template-columns:repeat(4,1fr);gap:34px;}
  .split{display:grid;grid-template-columns:1fr 30%;gap:0 34px;align-items:center;}
  .split--flip{grid-template-columns:28% 1fr;}
  .split-fig{position:relative;z-index:5;width:114%;aspect-ratio:3/4;margin:0 -44px 0 0;}
  .split--flip .split-fig{width:116%;margin:0 0 0 -50px;}
  .split-body{min-width:0;}
  .split--flip .split-body{padding-left:30px;}
}
@media (max-width:899px){
  .split-fig{display:block;width:60%;max-width:240px;aspect-ratio:3/4;margin:24px auto -54px 0;position:relative;z-index:5;left:-14px;}
  .split--flip .split-fig{margin:-60px 0 10px auto;right:-14px;left:auto;}
}

/* ============================ THE PHONE, 760px AND BELOW ==================
   Owner, 2026-09-21: glued to the screen, no errors, fast.
   GLUED: every coloured block runs from the left edge of the glass to the right
   edge and lies flat; its copy keeps the gutter INSIDE it. The small pieces (the
   city label, the name tags, the chips, the photographs) keep their tilt, so the
   torn-paper look survives without a card floating inside a black frame.
   FAST: the paper edge and the hard shadow of a cut-out are rebuilt from two flat
   clipped layers, so no photograph on a phone goes through a filter chain.
   Still nothing here moves. */
@media (max-width:760px){
  :root{--gutter:18px;--pad:40px;}
  .stagehero{padding:20px 0 34px;}
  .sec--tight{padding:40px 0 44px;}
  #roster.sec{padding-top:34px;}
  #roster .roster{margin-top:22px;}

  .block,.phero-lede{
    margin-left:calc(var(--gutter) * -1);margin-right:calc(var(--gutter) * -1);
    padding:34px var(--gutter) 38px;max-width:none;
  }
  .block.tilt-l,.block.tilt-r,.home-copy .sec:nth-of-type(even) .block{transform:none;}
  .phero-lede{padding:26px var(--gutter) 24px;}
  .facts,.index a{
    margin-left:calc(var(--gutter) * -1);margin-right:calc(var(--gutter) * -1);
    padding-left:var(--gutter);padding-right:var(--gutter);border-left:0;border-right:0;
  }

  /* cut-out without a filter: shadow layer, paper layer, photograph */
  .cut{filter:none;position:relative;}
  .cut::before,.cut::after{content:"";position:absolute;top:0;right:0;bottom:0;left:0;clip-path:var(--clip);}
  .cut::before{background:rgba(0,0,0,.55);transform:translate(10px,13px);}
  .cut::after{background:var(--paper);}
  .cut > img{position:absolute;z-index:1;top:3px;left:3px;width:calc(100% - 6px);height:calc(100% - 6px);}

  /* tap targets: 44px and over */
  .nav-toggle{min-height:44px;min-width:64px;padding:0 14px;}
  .age-bar__ok{min-height:44px;padding:0 14px;}
  .site-header nav.open a{padding:13px 0;}
  .btns{gap:10px;}
  .btn,.btn-primary,.btn-ghost{min-height:48px;}
  .tech-list a,.tech-list span{font-size:15px;padding:15px 11px;}
  .tech-list--big a{font-size:17px;padding:14px 13px;}
  .tags a.tag{padding:13px 11px;}
  .m-dock a{min-height:50px;flex:1 1 auto;white-space:nowrap;padding-left:6px;padding-right:6px;}
  .site-footer ul{gap:0;}
  .site-footer li a{display:inline-block;padding:9px 0;}

  /* body copy never under 16px */
  .foot-note,.roster-note,.independence,.index__d,.linklist .ll-note,aside.seo-related a,.spec dd{font-size:16px;}
  .age-bar{font-size:14px;}
  section .reading p[style*="font-size:14px"]{font-size:16px !important;}

  /* the dock never covers the last lines */
  body{padding-bottom:calc(82px + env(safe-area-inset-bottom));}

  /* sections well below the fold are laid out when the reader gets near them */
  .home-copy .sec,#techniques,#planning,#guides,#write,#more,#practitioners,#questions,aside.seo-related,.site-footer{
    content-visibility:auto;contain-intrinsic-size:auto 640px;
  }
}

/* ---- 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}
