/* =====================================================================
   Anita Key v11: the front door on computers, magazine-style character
   pages, and small alignment fixes. Text never under 19px.
   ===================================================================== */

/* ---------- front door on a computer: the photo melts into the room ---------- */
@media (min-width:980px){
  .title{grid-template-columns:minmax(0,1.2fr) minmax(0,1fr)}
  .title .bgimg{grid-column:1;grid-row:1;width:calc(100% + 14vw);min-height:100svh;z-index:0;
    -webkit-mask-image:linear-gradient(90deg,#000 0%,#000 58%,rgba(0,0,0,.55) 76%,transparent 100%),linear-gradient(180deg,#000 82%,transparent 100%);
    -webkit-mask-composite:source-in;mask-image:linear-gradient(90deg,#000 0%,#000 58%,rgba(0,0,0,.55) 76%,transparent 100%);}
  .title .veil{display:block;left:0;right:0;width:auto;z-index:1;pointer-events:none}
  html[data-theme=maison] .title .veil{background:radial-gradient(120% 90% at 28% 45%,transparent 45%,rgba(18,10,13,.35) 100%)}
  html[data-theme=doll] .title .veil{background:radial-gradient(120% 90% at 28% 45%,transparent 50%,rgba(255,227,240,.35) 100%)}
  .title .tc{grid-column:2;grid-row:1;z-index:2}
  .title .dust{z-index:1}
}

/* ---------- loyalty path: numbers sit exactly in their circles ---------- */
.lnum{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;padding:0;width:64px;height:64px}
.lnum b{display:block;line-height:1;font-size:calc(26px*var(--ts));font-variant-numeric:lining-nums tabular-nums}
.lnum span{display:block;line-height:1;font-size:calc(19px*var(--ts))}
.lstop{grid-template-columns:64px minmax(0,1fr)}
.ltl:before{left:35px}
@media (min-width:700px){.lstop{grid-template-columns:80px minmax(0,1fr)}.lnum{width:80px;height:80px}.lnum b{font-size:calc(32px*var(--ts))}.ltl:before{left:43px}}

/* ---------- Anita: numbers, class and traits each with their own look ---------- */
.anitaside>*+*{margin-top:26px}
.specs .kicker,.traits .kicker{margin-bottom:12px}
.specrow{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.spec{padding:20px 8px 18px;text-align:center;position:relative}
.spec+.spec:before{content:"";position:absolute;left:0;top:22%;bottom:22%;width:1px;background:linear-gradient(transparent,var(--acc),transparent);opacity:.7}
.spec:nth-child(4):before{display:none}
.spec:nth-child(n+4){border-top:1px solid color-mix(in srgb,var(--line) 60%,transparent)}
.spec b{display:block;font-family:var(--h);font-weight:var(--hw);font-size:calc(clamp(44px,11vw,58px)*var(--ts));line-height:1;color:var(--acc);font-variant-numeric:lining-nums}
.spec span{display:block;margin-top:8px;font-size:calc(19px*var(--ts));color:var(--ink2);line-height:1.25}
.cartouche{position:relative;text-align:center;padding:40px 26px 30px;border-radius:28px;background:radial-gradient(120% 100% at 50% 0%,color-mix(in srgb,var(--acc) 16%,transparent),transparent 60%),var(--panel);border:1px solid var(--acc);box-shadow:inset 0 0 0 6px var(--panel),inset 0 0 0 7px color-mix(in srgb,var(--acc) 45%,transparent),var(--sh)}
.cartouche .orn{position:absolute;top:-24px;left:50%;transform:translateX(-50%);width:48px;height:48px;border-radius:50%;display:grid;place-items:center;background:var(--acc);color:var(--accInk);box-shadow:0 0 0 6px var(--bg)}
.cartouche .orn .ic{width:24px;height:24px}
.cartouche .kicker{justify-content:center}
.cartouche .kicker:before{display:none}
.cartouche .classname{font-size:calc(clamp(38px,9vw,50px)*var(--ts));font-style:italic;margin:6px 0 12px}
html[data-theme=doll] .cartouche .classname{font-style:normal}
.cartouche .cdesc{margin:0 auto;max-width:440px;color:var(--ink2);font-size:calc(20px*var(--ts));line-height:1.55}
.traits ul{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:minmax(0,1fr)}
.traits li{display:grid;grid-template-columns:52px minmax(0,1fr);gap:10px;align-items:baseline;padding:14px 4px;border-bottom:1px solid color-mix(in srgb,var(--line) 70%,transparent);font-size:calc(21px*var(--ts));line-height:1.35}
.traits li:first-child{border-top:1px solid color-mix(in srgb,var(--line) 70%,transparent)}
.traits .tn{font-family:var(--h);font-weight:var(--hw);font-style:italic;font-size:calc(24px*var(--ts));color:var(--acc)}
@media (min-width:980px){.traits ul{grid-template-columns:repeat(2,minmax(0,1fr));column-gap:28px}.traits li:nth-child(2){border-top:1px solid color-mix(in srgb,var(--line) 70%,transparent)}}

/* ---------- client profile: a dossier, not a form ---------- */
.dossier{position:relative;overflow:hidden;padding-top:34px;background:radial-gradient(100% 70% at 50% 0%,color-mix(in srgb,var(--acc) 14%,transparent),transparent 65%),var(--panel)}
.dossier .crest{width:124px;height:124px;margin:0 auto 14px;border-radius:50%;display:grid;place-items:center;background:conic-gradient(from 200deg,var(--acc),var(--acc2),var(--acc));padding:4px;box-shadow:0 0 0 8px color-mix(in srgb,var(--acc) 12%,transparent)}
.dossier .crest .avatar{width:100%;height:100%;border:0;background:var(--panel)}
.dossier .crest .avatar .ic{width:54px;height:54px}
.dossier .classname{font-size:calc(clamp(32px,8vw,42px)*var(--ts));font-style:italic}
html[data-theme=doll] .dossier .classname{font-style:normal}
.statcard .bars .b{padding:12px 0;margin:0;border-bottom:1px solid color-mix(in srgb,var(--line) 60%,transparent)}
.statcard .bars .b .lab b{font-family:var(--h);font-weight:var(--hw);font-size:calc(26px*var(--ts));color:var(--acc)}
.statcard .bars .b.fav .lab span{color:var(--ink);font-weight:600}
.statcard .bars .b .lab .ic{width:18px;height:18px;color:var(--love,var(--acc));vertical-align:-2px}
.statcard .bar{height:8px}
.tastecard .tround+.tround{margin-top:16px;padding-top:14px;border-top:1px dashed var(--line)}
.tastecard h4{font-family:var(--h);font-weight:var(--hw);font-style:italic;font-size:calc(24px*var(--ts));margin:0 0 10px;color:var(--acc)}
.detailscard{position:relative;border-style:dashed}
.detailscard .seal{position:absolute;top:18px;right:18px;width:52px;height:52px;border-radius:50%;display:grid;place-items:center;border:1px solid var(--acc);color:var(--acc);transform:rotate(-8deg)}
.detailscard .seal .ic{width:24px;height:24px}

@media (min-width:980px){.title h1 .l{margin-bottom:24px}}
.lcard .pill.done{background:transparent;color:var(--acc);border-color:var(--acc)}

/* ---------- messages: photos and documents ---------- */
.composer.withatt{grid-template-columns:auto minmax(0,1fr) auto}
.attbtn{width:54px;padding:0;min-height:54px}
.attbtn .ic{width:24px;height:24px}
.attbtn.busy{opacity:.5;pointer-events:none}
.att{display:block;margin:2px 0 8px;padding:0;border:0;background:none;cursor:pointer;color:inherit}
.att.img{width:min(240px,60vw);border-radius:14px;overflow:hidden;background:rgba(0,0,0,.2)}
.att.img img{display:block;width:100%;height:auto;max-height:320px;object-fit:cover}
.att .attwait{display:grid;place-items:center;height:160px}
.att.doc{display:inline-flex;align-items:center;gap:10px;padding:10px 14px;border-radius:14px;border:1px solid currentColor;text-decoration:none;font-weight:600;font-size:calc(19px*var(--ts))}
.att.doc .ic{width:22px;height:22px}
/* ---------- profile: STI test ---------- */
.sticard{position:relative;margin-top:14px;background:radial-gradient(100% 80% at 100% 0%,rgba(80,170,120,.12),transparent 60%),var(--panel)}
.sticard .seal{position:absolute;top:18px;right:18px;width:52px;height:52px;border-radius:50%;display:grid;place-items:center;border:1px solid #5fae84;color:#5fae84}
.sticard .seal .ic{width:24px;height:24px}
.stistate{display:flex;gap:12px;align-items:flex-start;padding:14px 16px;border-radius:16px;border:1px solid #5fae84;background:rgba(95,174,132,.1);font-size:calc(19px*var(--ts))}
.stistate .ic{flex:0 0 26px;width:26px;height:26px;color:#5fae84}
.stistate.old{border-color:var(--nev,#d0464f);background:color-mix(in srgb,var(--nev,#d0464f) 10%,transparent)}
.stistate.old .ic{color:var(--nev,#d0464f)}
.stithumb{width:160px;border-radius:12px;overflow:hidden;border:1px solid var(--line)}
.stithumb img{display:block;width:100%}

/* ---------- owner's view ribbon ---------- */
#ownerbar{position:fixed;left:12px;bottom:12px;z-index:70;display:flex;align-items:center;gap:10px;max-width:calc(100vw - 24px);padding:8px 8px 8px 14px;border-radius:999px;background:var(--acc);color:var(--accInk);font-weight:600;font-size:calc(19px*var(--ts));box-shadow:0 10px 30px -10px rgba(0,0,0,.6)}
#ownerbar .ic{width:20px;height:20px;flex:0 0 20px}
#ownerbar span{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
#ownerbar button{flex:0 0 auto;min-height:40px;padding:6px 14px;border-radius:999px;border:0;background:var(--accInk);color:var(--acc);font:inherit;cursor:pointer}
#ownerbar.guest{background:var(--panel2);color:var(--ink);border:1px solid var(--acc)}
#ownerbar.guest button{background:var(--acc);color:var(--accInk)}
@media (max-width:520px){#ownerbar span{display:none}}

/* ---------- framing with zoom: the focus point stays put, the photo grows around it ---------- */
.ph.fx,.bgimg.fx,.portrait img.fx,.lp img.fx{transform-origin:var(--fm,var(--fd,50% 22%));scale:var(--zm,1)}
@media (min-width:980px){.ph.fx,.bgimg.fx,.portrait img.fx,.lp img.fx{transform-origin:var(--fd,var(--fm,50% 22%));scale:var(--zd,var(--zm,1))}}
.tile.photo,.setc,.portrait,.lp,.interlude,.banner,.hubhero,.title{overflow:hidden}

/* ---------- front door on a phone: "Barcelona · Adults only" on one line ---------- */
@media (max-width:760px){
  .title .kicker{letter-spacing:.08em;gap:0}
  .title .kicker:before{display:none}
  html:not([lang=fr]) .title .kicker{white-space:nowrap}
  html[lang=fr] .title .kicker{text-wrap:balance}
}

/* ---------- front door: choices on top, photo bigger ---------- */
.doorbar{position:relative;z-index:5;background:var(--panel);border-bottom:1px solid var(--line)}
.doorbar .in{max-width:1200px;margin:0 auto;padding:10px 16px;display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:10px 18px}
.dgroup{display:flex;align-items:center;gap:12px;flex-wrap:wrap}
.dlab{font-family:var(--h);font-style:italic;font-size:calc(21px*var(--ts));color:var(--ink2)}
html[data-theme=doll] .dlab{font-style:normal;font-weight:700}
.doorbar .seg button{min-height:44px}
.flags{display:flex;gap:6px}
.flags button{display:inline-flex;align-items:center;gap:8px;min-height:44px;padding:6px 12px;border-radius:999px;border:1px solid var(--line);background:var(--panel2);color:var(--ink);font:inherit;font-weight:600;font-size:calc(19px*var(--ts));cursor:pointer}
.flags button svg{width:26px;height:18px;border-radius:3px;box-shadow:0 0 0 1px rgba(0,0,0,.15)}
.flags button[aria-pressed=true]{border-color:var(--acc);box-shadow:0 0 0 2px var(--acc)}
.flags .lc{display:none}
.doorbar .tsize button{width:44px;height:44px}
.whoami{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin:16px 0 0;font-size:calc(19px*var(--ts));color:var(--ink2)}
.whoami .ic{width:20px;height:20px}
.linkbtn{border:0;background:none;padding:6px 4px;color:var(--acc);font:inherit;font-weight:700;text-decoration:underline;text-underline-offset:3px;cursor:pointer}
@media (max-width:760px){
  .doorbar .in{padding:10px 14px;gap:10px}
  .dstyle{width:100%;justify-content:space-between}
  .dlang{width:100%;justify-content:space-between}
  .flags .ln{display:none}.flags .lc{display:inline}
  .flags button{padding:6px 10px}
  .title .bgimg{height:68svh}
  .title .veil{height:68svh}
  .title .tc{margin-top:-60px}
}
@media (min-width:980px){
  .title{min-height:calc(100svh - 66px)}
  .title .bgimg{min-height:calc(100svh - 66px)}
}
@media (max-width:380px){.flags .lc{display:none}.flags button{padding:6px 9px}}

/* ---------- "whole photo": no cropping, the empty space is a soft blurred copy ---------- */
.fx.fitm::before,.fx.fitm::after,.fx.fitd::before,.fx.fitd::after{content:none}
@media (max-width:979px){
  .fx.fitm{background-image:none!important}
  .fx.fitm::before{content:"";position:absolute;inset:-14%;background:var(--img) center/cover no-repeat;filter:blur(30px) brightness(.62) saturate(1.1)}
  .fx.fitm::after{content:"";position:absolute;inset:0;background:var(--img) no-repeat;background-size:contain;background-position:var(--fm,50% 50%)}
}
@media (min-width:980px){
  .fx.fitd{background-image:none!important}
  .fx.fitd::before{content:"";position:absolute;inset:-14%;background:var(--img) center/cover no-repeat;filter:blur(30px) brightness(.62) saturate(1.1)}
  .fx.fitd::after{content:"";position:absolute;inset:0;background:var(--img) no-repeat;background-size:contain;background-position:var(--fd,var(--fm,50% 50%))}
}
.fx.fitm,.fx.fitd{overflow:hidden}
.title .bgimg.fx.fitm,.title .bgimg.fx.fitd{position:relative}
/* whole photo: no extra overscan or parallax enlargement, so truly nothing is cut */
@media (max-width:979px){.hubhero .ph.fitm,.banner .ph.fitm,.interlude .ph.fitm{inset:0!important;height:100%!important;transform:none!important}}
@media (min-width:980px){.hubhero .ph.fitd,.banner .ph.fitd,.interlude .ph.fitd{inset:0!important;height:100%!important;transform:none!important}}
/* look thumbnails: a frame that keeps zoomed photos inside */
.lt .ltw{display:block;width:112px;height:112px;border-radius:18px;overflow:hidden;border:2px solid var(--line);transition:transform .45s var(--house),border-color .2s}
.lt .ltw img{display:block;width:100%;height:100%;border:0;border-radius:0;box-shadow:none;transform:none}
.lt[aria-pressed=true] .ltw{border-color:var(--acc);box-shadow:0 0 0 3px var(--acc);transform:translateY(-3px)}
.lt[aria-pressed=true] img{border:0;box-shadow:none;transform:none}
.ltw img.fx{transform-origin:var(--fm,var(--fd,50% 22%));scale:var(--zm,1)}
@media (min-width:980px){.ltw img.fx{transform-origin:var(--fd,var(--fm,50% 22%));scale:var(--zd,var(--zm,1))}}

/* ---------- v14 front door bar: the same two rows in every language and style ---------- */
.doorbar .in{display:block;padding:10px 16px}
.drow1,.drow2{display:flex;align-items:center;justify-content:space-between;gap:10px;flex-wrap:nowrap}
.drow2{margin-top:8px}
.drow1 .dlab{flex:1 1 auto;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-size:calc(20px*var(--ts))}
html[data-theme=doll] .drow1 .dlab{font-size:calc(19px*var(--ts));font-weight:700}
.drow1 .tsize{flex:0 0 auto}
.drow2 .seg{flex:0 1 auto}
.drow2 .seg button{padding:6px 16px}
.drow2 .flags{flex:0 0 auto}
@media (max-width:760px){
  .flags .ln{display:none}
  .flags button{width:46px;height:46px;min-height:46px;padding:0;justify-content:center;border-radius:50%}
  .flags button svg{width:26px;height:18px}
  .drow2 .seg button{padding:6px 13px}
  .doorbar .tsize button{width:42px;height:42px}
  /* the photo and the name "Anita Key" always fit on the first screen */
  .title .bgimg,.title .veil{height:calc(100svh - 128px - 150px);min-height:300px}
  .title .tc{margin-top:-96px}
}
@media (min-width:761px){
  .doorbar .in{display:flex;align-items:center;justify-content:space-between;gap:18px;max-width:1200px;margin:0 auto}
  .drow1,.drow2{gap:16px}.drow2{margin-top:0}
  .drow1{order:1;flex:1 1 auto;justify-content:flex-start}.drow1 .tsize{order:3}
  .flags .ln{display:inline}.flags .lc{display:none}
}
.whoami{margin:12px 0 0}
.whoami .linkbtn{font-size:calc(19px*var(--ts));font-weight:600;opacity:.85}

/* ---------- quick exit, on every screen ---------- */
#quickexit{position:fixed;right:12px;bottom:calc(12px + env(safe-area-inset-bottom));z-index:80;display:inline-flex;align-items:center;gap:6px;min-height:44px;padding:6px 14px 6px 10px;border-radius:999px;border:1px solid var(--line);background:color-mix(in srgb,var(--panel) 88%,transparent);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);color:var(--ink);font:inherit;font-weight:600;font-size:calc(19px*var(--ts));cursor:pointer;box-shadow:0 8px 24px -10px rgba(0,0,0,.5)}
#quickexit .ic{width:18px;height:18px}
body:has(.summary) #quickexit,body:has(.composer) #quickexit{bottom:calc(92px + env(safe-area-inset-bottom))}
@media (max-width:400px){.drow2 .seg button{padding:6px 9px}.drow2 .flags{gap:4px}.flags button{width:41px;height:41px;min-height:41px}.flags button svg{width:24px;height:17px}.doorbar .in{padding:10px 12px}}
@media (max-width:360px){.drow2 .seg button{padding:6px 7px}.flags button{width:38px;height:38px;min-height:38px}.drow2{gap:6px}}
@media (max-width:760px){.title .bgimg,.title .veil{height:calc(100svh - 128px - 215px)}}

/* ---------- v14 main room on a phone: a portrait-shaped photo, less zoomed, fade only at its foot ---------- */
@media (max-width:760px){
  .hubhero{--heroh:min(128vw,70svh);display:block;min-height:0}
  .hubhero .ph{position:relative;inset:auto!important;top:0;height:var(--heroh)!important;transform:translateY(calc(var(--py,0px) * .4))}
  .hubhero .shade{bottom:auto;height:var(--heroh)}
  html[data-theme=maison] .hubhero .shade{background:linear-gradient(180deg,rgba(18,10,13,.35) 0%,rgba(18,10,13,0) 16%,rgba(18,10,13,0) 58%,rgba(18,10,13,.75) 88%,var(--bg) 100%)}
  html[data-theme=doll] .hubhero .shade{background:linear-gradient(180deg,rgba(255,227,240,.3) 0%,rgba(255,227,240,0) 16%,rgba(255,227,240,0) 58%,rgba(255,227,240,.8) 88%,var(--bg) 100%)}
  .hubhero .inner{margin-top:-118px;padding:0 22px 40px}
  .hubhero .scrollcue{display:none}
}
@media (max-width:760px){
  .hubhero .ph{-webkit-mask-image:linear-gradient(180deg,#000 0%,#000 66%,transparent 100%);mask-image:linear-gradient(180deg,#000 0%,#000 66%,transparent 100%)}
  html[data-theme=maison] .hubhero .shade{background:linear-gradient(180deg,rgba(18,10,13,.35) 0%,rgba(18,10,13,0) 16%,rgba(18,10,13,0) 55%,rgba(18,10,13,.55) 82%,rgba(18,10,13,0) 100%)}
  html[data-theme=doll] .hubhero .shade{background:linear-gradient(180deg,rgba(255,227,240,.3) 0%,rgba(255,227,240,0) 16%,rgba(255,227,240,0) 55%,rgba(255,227,240,.6) 82%,rgba(255,227,240,0) 100%)}
}

/* ---------- v15 big photos between sections: bigger, clean edges, readable words ---------- */
.interlude{height:min(78svh,128vw);margin:40px 0}
@media (min-width:980px){.interlude{height:min(82svh,60vw)}}
.interlude .shade{background:linear-gradient(180deg,transparent 0%,transparent 52%,rgba(10,4,7,.35) 68%,rgba(10,4,7,.78) 100%)!important}
html[data-theme=doll] .interlude .shade{background:linear-gradient(180deg,transparent 0%,transparent 52%,rgba(40,8,30,.3) 68%,rgba(40,8,30,.72) 100%)!important}
.interlude q{bottom:clamp(28px,7%,64px);color:#fff!important;font-size:calc(clamp(30px,7.5vw,54px)*var(--ts));line-height:1.18;text-shadow:0 2px 3px rgba(0,0,0,.55),0 4px 28px rgba(0,0,0,.6);max-width:900px;margin:0 auto;padding:0 28px}

/* ---------- v16: page photos are seen whole, the title sits under them ---------- */
.banner{display:block;min-height:0;margin-bottom:0}
.banner .ph{position:relative;inset:auto!important;top:0;height:min(112vw,60svh)!important;transform:translateY(calc(var(--py,0px) * .35))!important;
  -webkit-mask-image:linear-gradient(180deg,#000 0%,#000 78%,transparent 100%);mask-image:linear-gradient(180deg,#000 0%,#000 78%,transparent 100%)}
.banner .shade{display:none}
.banner .inner{margin-top:-28px;padding:0 20px 6px}
.banner h2{text-shadow:none}
.banner .kicker{white-space:normal}
@media (min-width:980px){
  .banner .ph{height:min(62svh,46vw)!important}
  .banner .inner{margin-top:-36px;padding:0 32px 10px}
}
/* the quick exit lives in the top bar on every inner page */
#tb-exit .ic{width:20px;height:20px}
@media (min-width:980px){
  .banner{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,6fr);align-items:end;gap:48px;max-width:1200px;margin:0 auto;padding:28px 32px 0}
  .banner .ph{height:min(72svh,660px)!important;border-radius:26px;-webkit-mask-image:none;mask-image:none;transform:none!important;box-shadow:0 30px 60px -30px rgba(0,0,0,.6)}
  .banner .inner{margin:0;padding:0 0 34px;max-width:none}
  .banner h2{font-size:calc(clamp(48px,4.6vw,76px)*var(--ts))}
}
/* booking: a chosen card answers before moving on */
.setc.picked,.lp.picked{animation:pick .42s var(--house)}
@keyframes pick{0%{transform:scale(1)}40%{transform:scale(.97)}100%{transform:scale(1.01)}}