html,body{margin:0} img{max-width:100%} [hidden]{display:none!important}

/* Layout: one property, one long page. Fixed section order; content comes from the PROPERTY block in the script.
   Identity follows the property brochure: deep navy, cream, gold, Didone display; photos in white frames. */
:root{
  --acc-l:#1F4B6B; --acc-d:#9CC0DE; --gold-l:#B9975B; --gold-d:#D6B072;
  --bg:#F8F5EE; --surface:#FFFFFF; --ink:#1B3550; --muted:#5D6A77; --line:#E4DDCF;
  --sand:#EDE7DA; --accent:var(--acc-l); --gold:var(--gold-l); --on-accent:#FFFFFF;
  --deep:var(--acc-l); --on-deep:#F8F5EE; --frame:#FFFFFF;
  --volet:#2F6C94; --volet-soft:#A9C7E8; color-scheme:light;
  --accent-soft:color-mix(in srgb, var(--accent) 8%, var(--bg));
  --f-display:"Bodoni Moda", "Didot", "Bodoni 72", Georgia, serif;
  --f-body:"Mulish", "Avenir Next", "Helvetica Neue", Arial, sans-serif;
  --nav-h:120px; --wrap:1180px;
}

*{box-sizing:border-box}
html{scroll-behavior:smooth}
@media (prefers-reduced-motion: reduce){ html{scroll-behavior:auto} *{transition:none!important;animation:none!important} }
body{background:var(--bg); color:var(--ink); font-family:var(--f-body); font-size:16px; line-height:1.65; -webkit-font-smoothing:antialiased}
a{color:inherit}
:focus-visible{outline:2px solid var(--accent); outline-offset:3px; border-radius:2px}
.wrap{max-width:var(--wrap); margin:0 auto; padding-inline:20px}
h1,h2,h3{font-family:var(--f-display); font-weight:400; line-height:1.1; text-wrap:balance; margin:0}
h2{font-size:clamp(2rem,4vw,2.9rem)}
h3{font-size:1.45rem}
p{margin:0}
.eyebrow{font-size:.72rem; letter-spacing:.24em; text-transform:uppercase; color:var(--volet); font-weight:600}
.rule{width:44px; height:1px; background:var(--gold); border:0; margin:4px 0 0}
.framed{border:6px solid var(--frame); box-shadow:0 4px 14px rgba(10,30,50,.10)}
.muted{color:var(--muted)}
section{padding-block:clamp(56px,8vw,104px)}
section[id]{scroll-margin-top:var(--nav-h)}
.sec-head{display:grid; gap:12px; margin-bottom:40px; max-width:640px}
.louvre{background-image:repeating-linear-gradient(180deg, var(--accent) 0 2px, transparent 2px 10px)}

/* Nav */
.nav{position:sticky; top:env(safe-area-inset-top,0px); z-index:20; background:color-mix(in srgb, var(--bg) 92%, transparent); backdrop-filter:blur(10px); border-bottom:1px solid var(--line)}
.nav .wrap{height:var(--nav-h); display:flex; align-items:center; gap:24px}
.brand{display:flex; align-items:center; gap:16px; text-decoration:none; height:92%; min-width:0}
.brand img{height:100%; width:auto; display:block; background:#fff; border-radius:2px}
@media (max-width:980px){ .brand .word{display:none} }
.brand .word{display:grid; line-height:1.1}
.brand .word b{font-family:var(--f-display); font-weight:400; font-size:1.45rem; white-space:nowrap}
.brand .word span{font-size:.68rem; letter-spacing:.18em; text-transform:uppercase; color:var(--muted)}
.brand .mark{width:46px; height:58px; border:1.5px solid var(--accent); border-radius:3px; flex:none; opacity:.9}
.links{display:flex; gap:38px; margin-left:auto; align-items:center}
.links a{text-decoration:none; font-size:.8rem; letter-spacing:.14em; text-transform:uppercase; font-weight:600; color:var(--muted); white-space:nowrap; padding-block:6px; border-bottom:1px solid transparent}
.links a:hover{border-bottom-color:var(--volet)}
.nav .lang, .nav .book-top{flex:none}
.links a:hover{color:var(--ink)}
.lang{display:flex; border:1px solid var(--line); border-radius:999px; overflow:hidden}
.lang a,.lang button{text-decoration:none; border:0; background:none; font:inherit; font-size:.75rem; font-weight:600; letter-spacing:.08em; padding:6px 10px; cursor:pointer; color:var(--muted)}
.lang a[aria-current="page"]{background:var(--ink); color:var(--bg)}
.btn{display:inline-flex; align-items:center; justify-content:center; gap:8px; text-decoration:none; font:inherit; font-weight:600; font-size:.9rem; letter-spacing:.04em; padding:13px 22px; border-radius:2px; border:1.5px solid var(--accent); background:var(--accent); color:var(--on-accent); cursor:pointer}
.btn:hover{filter:brightness(1.08)}
.btn.ghost{background:transparent; color:var(--ink); border-color:var(--line)}
.btn.ghost:hover{border-color:var(--ink)}
.menu-btn{display:none; margin-left:auto}
.mobile-menu{display:none}
@media (max-width:1100px){
  :root{--nav-h:84px}
  .links{display:none}
  .menu-btn{display:inline-flex; padding:10px 14px}
  .nav .book-top{display:none}
  .mobile-menu.open{display:grid; gap:4px; padding:8px 20px 18px; border-top:1px solid var(--line)}
  .mobile-menu a{padding:10px 0; text-decoration:none; text-transform:uppercase; font-size:.85rem; letter-spacing:.06em}
  .brand .mark{width:34px; height:44px}
  .brand .word b{font-size:1.15rem}
}

/* Media slots: real photo on top, designed placeholder underneath if the file is missing */
.media{position:relative; overflow:hidden; background:var(--sand); border-radius:2px; max-width:100%}
.media::before{content:""; position:absolute; inset:0; opacity:.12}
.media.ph::before{background-image:repeating-linear-gradient(180deg, var(--accent) 0 2px, transparent 2px 10px)}
.media .ph-label{position:absolute; inset:auto 0 0 0; padding:12px 14px; font-size:.72rem; letter-spacing:.14em; text-transform:uppercase; color:var(--muted)}
.media img{position:absolute; inset:0; width:100%; height:100%; object-fit:cover; display:block}

/* Hero */
.hero{position:relative; isolation:isolate; background:var(--deep); color:var(--on-deep); min-height:clamp(560px,82vh,780px); display:flex; align-items:flex-end; padding-block:clamp(96px,12vw,140px) clamp(40px,5vw,64px)}
.hero-bg{position:absolute; inset:0; z-index:-2}
.hero-bg img{width:100%; height:100%; object-fit:cover; object-position:center 60%; display:block}
.hero::before{content:""; position:absolute; inset:0; z-index:-1;
  background:linear-gradient(180deg, color-mix(in srgb, var(--deep) 35%, transparent) 0%, color-mix(in srgb, var(--deep) 15%, transparent) 35%, color-mix(in srgb, var(--deep) 88%, transparent) 100%),
             linear-gradient(90deg, color-mix(in srgb, var(--deep) 55%, transparent) 0%, transparent 70%)}
.hero .wrap{width:100%}
/* Split variant: navy panel like the brochure cover, photo framed on the right */
.hero.split{min-height:0; display:block; padding-block:clamp(44px,6vw,84px)}
.hero.split::before, .hero.split .hero-bg{display:none}
.hero.split .wrap{display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1.05fr); gap:clamp(28px,5vw,64px); align-items:center}
.hero.split h1{text-shadow:none}
.hero-photo{border:6px solid var(--frame); box-shadow:0 4px 14px rgba(0,0,0,.18); aspect-ratio:4/3; overflow:hidden; max-width:100%}
.hero-photo img{width:100%; height:100%; object-fit:cover; display:block}
@media (max-width:900px){ .hero.split .wrap{grid-template-columns:1fr} .hero.split .hero-photo{order:-1} }
.hero-copy{display:grid; gap:20px; min-width:0; max-width:720px}
.hero .eyebrow{color:var(--on-deep); opacity:.8}
.hero h1{font-size:clamp(3rem,7vw,5.6rem); line-height:1; text-shadow:0 2px 24px rgba(8,20,32,.35)}
.hero h1 em{display:block; font-style:normal; font-size:.5em; color:var(--gold-d); margin-top:.25em}
.hero .tag{font-size:.78rem; letter-spacing:.26em; text-transform:uppercase; opacity:.85}
.facts{display:grid; grid-template-columns:repeat(auto-fit,minmax(104px,1fr)); gap:0; border-block:1px solid color-mix(in srgb, var(--on-deep) 22%, transparent)}
.fact{padding:14px 14px 14px 0; display:grid; align-content:start; gap:2px; border-right:1px solid color-mix(in srgb, var(--on-deep) 22%, transparent)}
.fact + .fact{padding-left:14px}
.fact:last-child{border-right:0}
@media (max-width:600px){ .fact{border-right:0; padding-left:0 !important} }
.fact b{font-family:var(--f-display); font-weight:400; font-size:1.7rem; font-variant-numeric:tabular-nums}
.fact span{font-size:.68rem; letter-spacing:.1em; line-height:1.4; text-transform:uppercase; opacity:.75}
.cta-row{display:flex; flex-wrap:wrap; gap:12px}
.hero .btn{background:var(--on-deep); border-color:var(--on-deep); color:var(--deep)}
.hero .btn.ghost{background:transparent; color:var(--on-deep); border-color:color-mix(in srgb, var(--on-deep) 40%, transparent)}

/* Story */
.story .wrap{display:grid; grid-template-columns:5fr 7fr; gap:clamp(28px,6vw,80px)}
.story-body{display:grid; gap:18px; max-width:62ch; font-size:1.06rem}
.signature{font-family:var(--f-display); font-size:clamp(1.5rem,2.6vw,2rem); line-height:1.35; color:var(--accent)}
@media (max-width:860px){ .story .wrap{grid-template-columns:1fr} }

/* Spaces */
.spaces{background:var(--surface); border-block:1px solid var(--line)}
.space-grid{display:grid; grid-template-columns:repeat(auto-fit,minmax(min(100%,220px),1fr)); gap:28px}
.space{display:grid; gap:14px; align-content:start}
.space .media{aspect-ratio:4/3}
.space p{color:var(--muted); font-size:.95rem}

/* Amenities */
.amen{display:grid; grid-template-columns:repeat(auto-fill,minmax(210px,1fr)); gap:0; border-top:1px solid var(--line); margin-top:48px}
.amen li{list-style:none; display:flex; gap:12px; align-items:center; padding:14px 0; border-bottom:1px solid var(--line); font-size:.95rem; padding-right:12px}
.amen svg{flex:none; width:20px; height:20px; stroke:var(--accent)}
.amen ul{display:contents; margin:0; padding:0}
@media (max-width:600px){ .amen{grid-template-columns:repeat(2,minmax(0,1fr)); column-gap:14px} .amen li{font-size:.86rem; gap:8px; padding-right:0; align-items:flex-start} .amen svg{margin-top:3px} }

/* Gallery */
.gallery{display:grid; grid-template-columns:repeat(4,1fr); grid-auto-rows:180px; gap:10px}
.gallery button{all:unset; cursor:zoom-in; display:block; position:relative}
.gallery button:focus-visible{outline:2px solid var(--accent); outline-offset:3px}
.gallery .media{height:100%}
.gallery button:nth-child(1){grid-column:span 2; grid-row:span 2}
.gallery .media img{transition:transform .5s ease}
.gallery button:hover .media img{transform:scale(1.04)}
@media (max-width:760px){ .gallery{grid-template-columns:repeat(2,1fr); grid-auto-rows:140px} }
dialog.lb{border:0; padding:0; background:transparent; max-width:min(1000px,92vw); width:100%}
dialog.lb::backdrop{background:rgba(8,12,18,.88)}
dialog.lb .media{aspect-ratio:3/2}
dialog.lb .bar{display:flex; justify-content:space-between; align-items:center; color:#E7ECF1; padding:12px 2px; gap:12px; font-size:.9rem}
dialog.lb .bar button{all:unset; cursor:pointer; padding:6px 10px; border:1px solid rgba(231,236,241,.35); border-radius:2px; color:#E7ECF1}

/* Location */
.loc .wrap{display:grid; grid-template-columns:1fr 1fr; gap:clamp(28px,5vw,64px); align-items:start}
.dist{display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:0 28px}
.dist div{display:grid; grid-template-columns:5.5rem 1fr; gap:12px; padding:16px 0; border-bottom:1px solid var(--line); align-items:center}
.dist b{font-family:var(--f-display); font-weight:400; font-size:1.5rem; color:var(--gold); white-space:nowrap; font-variant-numeric:tabular-nums}
.dist span{font-size:.88rem; line-height:1.35}
@media (max-width:520px){ .dist{grid-template-columns:1fr} }
.illu{display:block; margin-inline:auto; max-width:100%; height:auto}
.illu-house{width:min(100%,560px); margin-top:56px}
.illu-cap{text-align:center; font-size:.7rem; letter-spacing:.22em; text-transform:uppercase; color:var(--muted); margin-top:18px}
.waves{display:block; width:100%; height:auto; margin-top:56px; opacity:.9}
.space .icon{width:52px; height:52px; display:block}
.space-head{display:flex; align-items:center; gap:14px}
.carfree{display:grid; gap:8px; margin-bottom:10px}
.carfree h3{font-size:1.25rem}
.loc .media{aspect-ratio:16/9}
@media (max-width:860px){ .loc .wrap{grid-template-columns:1fr} }

/* Reviews */
.reviews{background:var(--surface); border-block:1px solid var(--line)}
.rev-grid{display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:20px}
@media (max-width:1000px){ .rev-grid{grid-template-columns:repeat(2,minmax(0,1fr))} }
@media (max-width:600px){ .rev-grid{grid-template-columns:1fr} }
.rev{border:1.5px dashed var(--line); padding:24px; display:grid; gap:10px; border-radius:2px; color:var(--muted); font-size:.92rem}
.rev .stars{letter-spacing:.2em; color:var(--accent)}
.scores{display:flex; flex-wrap:wrap; gap:0; margin:-12px 0 40px; border-block:1px solid var(--line)}
.scores div{display:grid; padding:16px 32px 16px 0; margin-right:32px; border-right:1px solid var(--line)}
.scores div:last-child{border-right:0}
@media (max-width:600px){ .scores{display:grid; grid-template-columns:repeat(3,minmax(0,1fr))} .scores div{padding:14px 8px 14px 0; margin-right:0; border-right:0} .scores b{font-size:1.6rem} }
.scores b{font-family:var(--f-display); font-weight:400; font-size:2rem; line-height:1.1}
.scores span{font-size:.72rem; letter-spacing:.14em; text-transform:uppercase; color:var(--muted)}
.rev-card{margin:0; display:flex; flex-direction:column; gap:14px; padding:28px; background:var(--bg); border:1px solid var(--line); border-radius:2px}
.rev-top{display:flex; justify-content:space-between; align-items:baseline; gap:12px}
.rev-score{color:var(--volet); letter-spacing:.12em; font-weight:700}
.rev-src{font-size:.7rem; letter-spacing:.16em; text-transform:uppercase; color:var(--muted)}
.rev-title{font-family:var(--f-display); font-size:1.15rem; line-height:1.35}
.rev-text{font-size:.95rem; flex:1}
.rev-card cite{font-style:normal; display:grid; gap:2px; padding-top:14px; border-top:1px solid var(--line); font-size:.85rem}
.rev-card cite span{color:var(--muted)}

/* Experiences */
.experiences{background:var(--deep); color:var(--on-deep)}
.experiences .eyebrow{color:var(--on-deep); opacity:.75}
.exp-grid{display:grid; grid-template-columns:repeat(auto-fill,minmax(min(100%,300px),1fr)); gap:44px 36px}
.exp{display:grid; grid-template-columns:10px 1fr; gap:16px; align-items:start}
.exp::before{content:""; width:7px; height:7px; border-radius:50%; background:var(--volet-soft); margin-top:12px}
.exp-body{display:grid; gap:6px; min-width:0}
.exp.has-img{grid-template-columns:1fr; gap:16px; align-content:start}
.exp.has-img::before{display:none}
.exp.has-img .media{aspect-ratio:5/3; border:5px solid var(--frame); box-shadow:0 4px 14px rgba(0,0,0,.18)}
.exp .d{font-size:.7rem; letter-spacing:.16em; text-transform:uppercase; color:var(--volet-soft); font-weight:700}
.exp h3{font-size:1.3rem}
.exp p{opacity:.82; font-size:.93rem}
.mapcard{display:flex; justify-content:space-between; align-items:center; gap:16px; padding:20px 22px; border:1px solid var(--line); text-decoration:none; background:var(--bg)}
.mapcard:hover{border-color:var(--accent)}
.mapcard b{font-family:var(--f-display); font-weight:400; font-size:1.15rem}

/* Rates & booking */
.rates .wrap{display:grid; grid-template-columns:1fr 1fr; gap:clamp(28px,5vw,64px); align-items:start}
.price{font-family:var(--f-display); font-size:clamp(2.4rem,5vw,3.4rem); line-height:1}
.price small{font-family:var(--f-body); font-size:.95rem; color:var(--muted)}
.ticks{display:grid; gap:10px; margin:22px 0 0; padding:0}
.ticks li{list-style:none; display:flex; gap:10px}
.ticks li::before{content:""; flex:none; width:10px; height:5px; margin-top:9px; border-left:2px solid var(--accent); border-bottom:2px solid var(--accent); transform:rotate(-45deg)}
.bookcard{background:var(--surface); border:1px solid var(--line); padding:clamp(22px,4vw,36px); display:grid; gap:18px; border-radius:2px}
.cal{display:grid; grid-template-columns:repeat(7,1fr); gap:4px; font-size:.78rem; text-align:center; font-variant-numeric:tabular-nums}
.cal span{padding:7px 0; border-radius:2px; background:var(--bg)}
.cal span.h{background:none; color:var(--muted); font-size:.68rem; letter-spacing:.06em}
.cal span.off{color:var(--muted); text-decoration:line-through; opacity:.55}
.cal span.sel{background:var(--accent); color:var(--on-accent)}
.policies{display:grid; grid-template-columns:repeat(auto-fit,minmax(120px,1fr)); gap:0; border-top:1px solid var(--line)}
.policies div{padding:12px 12px 0 0; display:grid; gap:2px; align-content:start}
.policies span{font-size:.7rem; letter-spacing:.12em; text-transform:uppercase; color:var(--muted)}
.policies b{font-weight:600; font-size:.95rem; line-height:1.4}
.wa{display:flex; flex-wrap:wrap; gap:6px 12px; align-items:center; font-size:.92rem; color:var(--muted)}
.wa a{font-weight:600; color:var(--ink)}
@media (max-width:860px){ .rates .wrap{grid-template-columns:1fr} }

/* FAQ */
.faq-list{display:grid; border-top:1px solid var(--line); max-width:820px}
details{border-bottom:1px solid var(--line)}
summary{cursor:pointer; list-style:none; padding:20px 36px 20px 0; position:relative; font-family:var(--f-display); font-size:1.25rem}
summary::-webkit-details-marker{display:none}
summary::after{content:"+"; position:absolute; right:4px; top:16px; font-family:var(--f-body); font-size:1.4rem; color:var(--accent)}
details[open] summary::after{content:"–"}
details p{padding:0 0 22px; color:var(--muted); max-width:65ch}

/* Footer */
footer{background:var(--deep); color:var(--on-deep); padding-block:72px 0; position:relative}
footer a{color:inherit; text-decoration:none}
.ft-top{display:grid; grid-template-columns:auto 1fr auto; gap:28px 40px; align-items:center; padding-bottom:48px; border-bottom:1px solid color-mix(in srgb, var(--on-deep) 16%, transparent)}
.ft-logo{width:84px; height:auto; background:#fff; padding:6px; border-radius:2px; display:block}
.ft-closing{font-family:var(--f-display); font-size:clamp(1.3rem,2.4vw,1.75rem); line-height:1.35}
.ft-closing span{color:var(--gold-d)}
.ft-cta{display:flex; flex-direction:column; gap:10px; align-items:flex-end}
.ft-cta .btn{background:var(--on-deep); border-color:var(--on-deep); color:var(--deep)}
.ft-cta small{font-size:.75rem; opacity:.7}
.ft-cols{display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:40px; padding-block:48px}
footer h4{margin:0 0 18px; font-size:.7rem; letter-spacing:.22em; text-transform:uppercase; font-weight:700; color:var(--volet-soft)}
.ft-row{display:flex; gap:12px; align-items:flex-start; padding:7px 0; font-size:.93rem; line-height:1.45}
.ft-row svg{flex:none; width:18px; height:18px; margin-top:2px; stroke:var(--gold); fill:none; stroke-width:1.5; stroke-linecap:round; stroke-linejoin:round}
a.ft-row:hover span{text-decoration:underline; text-underline-offset:3px}
.copy{border:1px solid color-mix(in srgb, var(--on-deep) 30%, transparent); background:none; color:inherit; font:inherit; font-size:.68rem; letter-spacing:.1em; text-transform:uppercase; padding:3px 8px; border-radius:2px; cursor:pointer; margin-left:6px}
.copy:hover{border-color:var(--on-deep)}
.socials{display:flex; gap:10px; margin-top:4px}
.socials a{width:42px; height:42px; display:grid; place-items:center; border:1px solid color-mix(in srgb, var(--on-deep) 30%, transparent); border-radius:50%; transition:background .2s, border-color .2s}
.socials a:hover{background:var(--on-deep); border-color:var(--on-deep)}
.socials a:hover svg{stroke:var(--deep)}
.socials svg{width:18px; height:18px; stroke:var(--on-deep); fill:none; stroke-width:1.5; stroke-linecap:round; stroke-linejoin:round}
.ft-tag{font-size:.85rem; opacity:.75; margin-top:14px; max-width:30ch}
footer .bottom{padding-block:20px; border-top:1px solid color-mix(in srgb, var(--on-deep) 16%, transparent); display:flex; flex-wrap:wrap; gap:8px 24px; justify-content:space-between; align-items:center; font-size:.78rem; opacity:.8}
footer .bottom a:hover{text-decoration:underline}
.totop{display:inline-flex; gap:6px; align-items:center}
@media (max-width:860px){ .ft-top{grid-template-columns:1fr; justify-items:start} .ft-cta{align-items:flex-start} .ft-cols{grid-template-columns:1fr; gap:28px} }

/* Conversion: trust line, mid-stay card, sticky booking bar */
.trust{display:flex; flex-wrap:wrap; gap:6px 18px; margin-top:16px; font-size:.82rem; color:var(--muted)}
.trust b{color:var(--ink); font-weight:700}
.midstay{margin-top:28px; padding:22px 24px; border:1px solid var(--line); background:var(--bg); display:grid; gap:8px}
.midstay h3{font-size:1.2rem}
.midstay p{font-size:.92rem; color:var(--muted)}
.midstay a{font-weight:700; color:var(--accent); text-decoration:none}
.midstay a:hover{text-decoration:underline}
/* Song player: visible, never autoplays */
.song{display:inline-flex; align-items:center; gap:12px; padding:6px 18px 6px 6px; border:1px solid color-mix(in srgb, var(--on-deep) 30%, transparent); border-radius:999px; background:transparent; color:var(--on-deep); font:inherit; cursor:pointer; justify-self:start; max-width:100%; text-align:left}
.song:hover{border-color:var(--on-deep)}
.song .pp{flex:none; width:38px; height:38px; border-radius:50%; background:var(--on-deep); display:grid; place-items:center}
.song .pp svg{width:14px; height:14px; fill:var(--deep)}
.song .meta{display:grid; gap:5px; min-width:0}
.song .ttl{font-size:.82rem; font-weight:600; letter-spacing:.02em; white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.song .ttl small{font-weight:400; opacity:.7; margin-left:6px; font-variant-numeric:tabular-nums}
.song .bar{height:2px; width:150px; max-width:100%; background:color-mix(in srgb, var(--on-deep) 25%, transparent); border-radius:2px; overflow:hidden}
.song .bar i{display:block; height:100%; width:0; background:var(--gold)}
.song[aria-pressed="true"] .eq{display:inline-flex}
.eq{display:none; gap:2px; align-items:flex-end; height:10px; margin-left:8px; vertical-align:middle}
.eq b{width:2px; background:var(--gold); animation:eq 1s ease-in-out infinite}
.eq b:nth-child(2){animation-delay:.2s} .eq b:nth-child(3){animation-delay:.4s}
@keyframes eq{0%,100%{height:3px}50%{height:10px}}
.song-mini{position:fixed; left:20px; bottom:calc(20px + env(safe-area-inset-bottom,0px)); z-index:24; background:var(--deep); box-shadow:0 6px 18px rgba(10,30,50,.2); display:none}
.song-mini.show{display:inline-flex}
@media (max-width:860px){ .song-mini{left:16px; bottom:calc(84px + env(safe-area-inset-bottom,0px))} .song .bar{width:110px} }

.stickybar{position:fixed; left:0; right:0; bottom:0; z-index:25; display:none; align-items:center; justify-content:space-between; gap:12px;
  padding:10px 16px calc(10px + env(safe-area-inset-bottom,0px)); background:var(--surface); border-top:1px solid var(--line); box-shadow:0 -6px 20px rgba(10,30,50,.08)}
.stickybar .p{display:grid; line-height:1.2}
.stickybar .p b{font-family:var(--f-display); font-weight:400; font-size:1.25rem}
.stickybar .p span{font-size:.72rem; color:var(--muted)}
.stickybar .acts{display:flex; gap:8px}
.stickybar .btn{padding:11px 16px}
.wa-btn{width:44px; height:44px; display:grid; place-items:center; border:1px solid var(--line); border-radius:50%}
.wa-btn svg{width:20px; height:20px; stroke:var(--accent); fill:none; stroke-width:1.6; stroke-linecap:round; stroke-linejoin:round}
.wa-float{position:fixed; right:20px; bottom:calc(84px + env(safe-area-inset-bottom,0px)); z-index:24; background:var(--surface); box-shadow:0 6px 18px rgba(10,30,50,.14)}
@media (max-width:860px){ .stickybar.show{display:flex} .wa-float{display:none} body{padding-bottom:72px} }

/* Fill-in markers and template mode */

/* Price asterisk + active menu + cookie banner */
.ast{font-size:.55em; vertical-align:top; margin-left:2px; color:var(--muted)}
.links a.active{color:var(--ink); border-bottom:2px solid var(--accent)}
.mobile-menu a.active{color:var(--accent); font-weight:700}
.ck{position:fixed; left:max(16px,env(safe-area-inset-left,0px)); right:max(16px,env(safe-area-inset-right,0px)); bottom:calc(16px + env(safe-area-inset-bottom,0px)); z-index:40; max-width:640px; margin-inline:auto; background:var(--surface); color:var(--ink); border:1px solid var(--line); border-radius:4px; box-shadow:0 10px 30px rgba(10,30,50,.22); padding:18px 20px; display:none}
.ck.show{display:block}
.ck b{display:block; font-family:var(--f-display); font-weight:500; font-size:1.05rem; margin-bottom:4px}
.ck p{margin:0 0 14px; font-size:.86rem; line-height:1.5; color:var(--muted)}
.ck .acts{display:flex; gap:10px; flex-wrap:wrap}
.ck .btn{min-height:44px; padding:10px 22px; cursor:pointer}
footer .bottom .ck-open{cursor:pointer}
@media (max-width:860px){ .ck{bottom:calc(84px + env(safe-area-inset-bottom,0px))} }