/* ============================================================
Jnane Rihane — shared design system (base.css)
Used by every page. Page-specific styles stay in the page.
============================================================ */
:root{
--ink:#071710;--pine:#0D3A1D;--green:#18592F;--gold:#B08B3E;--gold-bright:#C9A45C;
--ivory:#F3ECD9;--cream:#EBE2C8;--paper:#F7F2E4;
--line:rgba(176,139,62,.32);--line-dark:rgba(176,139,62,.26);
--serif:'Cormorant Garamond',serif;--mono:'DM Mono',monospace;--sans:'Inter',sans-serif;
--step-0:clamp(1rem,.96rem + .25vw,1.125rem);
--step-1:clamp(1.3rem,1.2rem + .6vw,1.7rem);
--step-2:clamp(1.8rem,1.5rem + 1.4vw,2.6rem);
--step-3:clamp(2.4rem,1.9rem + 2.6vw,4rem);
--step-4:clamp(3.2rem,2.2rem + 5vw,6.2rem);
--s2:16px;--s3:24px;--s4:40px;--s5:64px;--s6:104px;--s7:168px;
--r:4px;--ease:cubic-bezier(.22,1,.36,1);
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{background:var(--ivory);color:var(--ink);font-family:var(--sans);font-weight:300;font-size:var(--step-0);line-height:1.7;-webkit-font-smoothing:antialiased;overflow-x:hidden}
img{display:block;max-width:100%}
/* Every ![]()
carries width/height attributes so the browser can reserve
space (CLS≈0). Inside a ratio-locked figure those intrinsic values would
fight the layout, so the image is told to fill its box instead. */
.split figure img,.pagehero img,.gstrip .g img,.cross img,.menu-figure img,
.stay-row .fig img,.map .frame img{width:100%;height:100%;object-fit:cover}
a{color:inherit;text-decoration:none;cursor:pointer}
button{font-family:inherit;cursor:pointer}
::selection{background:var(--gold);color:var(--ink)}
a:focus-visible,button:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible{outline:2px solid var(--gold);outline-offset:3px}
section[id]{scroll-margin-top:84px}
.k{font-family:var(--mono);font-size:11px;letter-spacing:.32em;text-transform:uppercase;color:var(--gold)}
.serif{font-family:var(--serif);font-weight:400;line-height:1;letter-spacing:.005em;text-wrap:balance}
body::after{content:"";position:fixed;inset:0;z-index:200;pointer-events:none;opacity:.04;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)' opacity='.6'/%3E%3C/svg%3E")}
/* ---- loader / progress / cursor / skip ---- */
.loader{position:fixed;inset:0;z-index:400;background:var(--ink);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:16px;transition:clip-path .8s var(--ease)}
.loader img{height:84px;animation:lg 1s var(--ease) both}
.loader span{font-family:var(--mono);font-size:10px;letter-spacing:.34em;text-transform:uppercase;color:var(--gold);opacity:.85}
@keyframes lg{from{opacity:0;transform:scale(.92)}to{opacity:1;transform:scale(1)}}
.loader.done{clip-path:inset(0 0 100% 0);pointer-events:none}
.progress{position:fixed;top:0;left:0;height:2px;width:100%;z-index:120;transform-origin:0 50%;transform:scaleX(0);background:linear-gradient(90deg,var(--gold),var(--gold-bright))}
.cur{position:fixed;z-index:300;left:0;top:0;pointer-events:none;display:none}
@media (pointer:fine){.cur{display:block}}
.cur .ring{position:absolute;width:34px;height:34px;border:1px solid rgba(176,139,62,.6);border-radius:50%;transform:translate(-50%,-50%);transition:width .35s var(--ease),height .35s var(--ease),background .35s;display:grid;place-items:center}
.cur.big .ring{width:64px;height:64px;background:rgba(176,139,62,.12)}
.cur .lbl{font-family:var(--mono);font-size:9px;letter-spacing:.16em;text-transform:uppercase;color:var(--gold-bright);opacity:0;transition:opacity .25s}
.cur.lblon .lbl{opacity:1}
.skip{position:fixed;top:-60px;left:24px;z-index:300;background:var(--gold);color:var(--ink);font-family:var(--mono);font-size:12px;letter-spacing:.14em;text-transform:uppercase;padding:12px 20px;border-radius:var(--r);transition:top .3s}
.skip:focus{top:18px}
/* ---- header + full-screen menu ---- */
header.site{position:fixed;top:0;left:0;right:0;z-index:100;padding:13px clamp(20px,4vw,52px);color:var(--ivory);transition:background .45s var(--ease),color .45s,box-shadow .45s,padding .45s}
/* soft scrim gives the transparent header depth over a hero; fades once solid */
header.site::before{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;background:linear-gradient(180deg,rgba(7,23,16,.42),rgba(7,23,16,0));transition:opacity .5s var(--ease)}
header.site.solid{background:rgba(244,238,221,.92);backdrop-filter:blur(16px) saturate(1.08);color:var(--pine);box-shadow:0 1px 0 rgba(176,139,62,.3),0 12px 34px rgba(7,23,16,.07);padding-top:9px;padding-bottom:10px}
header.site.solid::before{opacity:0}
/* two-tier in a centred container: lang · [logo + nav] · book, vertically centred */
header.site .h-inner{max-width:1320px;margin:0 auto;display:flex;align-items:center;gap:16px}
header.site .h-inner>.lang{flex:1}
header.site .h-center{flex:0 0 auto;display:flex;flex-direction:column;align-items:center;gap:8px}
header.site.solid .h-center{gap:6px}
header.site .logo{flex:0 0 auto;display:block;line-height:0}
header.site .logo img{height:52px;width:auto;transition:height .4s var(--ease)}
header.site .logo .lg-dark{display:none}
header.site.solid .logo img{height:46px}
header.site.solid .lg-light{display:none}
header.site.solid .lg-dark{display:block}
header.site .nav{display:flex;justify-content:center;flex-wrap:wrap;gap:20px;font-family:var(--mono);font-size:11px;letter-spacing:.14em;text-transform:uppercase}
header.site .nav a{position:relative;padding:7px 0;opacity:.92;transition:opacity .3s,color .3s}
header.site .nav a:hover{opacity:1;color:var(--gold-bright)}
header.site .nav a[aria-current="page"]{color:var(--gold);opacity:1}
header.site .nav a::after{content:"";position:absolute;left:0;right:0;bottom:0;height:1.5px;background:var(--gold);border-radius:2px;transform:scaleX(0);transform-origin:50% 50%;transition:transform .4s var(--ease)}
header.site .nav a:hover::after,header.site .nav a[aria-current="page"]::after{transform:scaleX(1)}
header.site .h-inner>.h-right{flex:1;justify-content:flex-end}
.h-right{display:flex;align-items:center;gap:16px}
.h-sep{display:none}
.lang{display:flex;gap:2px;font-family:var(--mono);font-size:11px;letter-spacing:.12em}
.lang a{background:none;border:none;text-decoration:none;cursor:pointer;color:inherit;padding:5px 5px;opacity:.55;position:relative;transition:opacity .3s,color .3s}
.lang a:hover,.lang a:focus-visible{opacity:1;color:var(--gold-bright)}
.lang a[aria-current="true"]{opacity:1;color:var(--gold)}
.lang a[aria-current="true"]::after{content:"";position:absolute;left:5px;right:5px;bottom:2px;height:1.5px;background:var(--gold);border-radius:2px}
/* min-height 46px meets the 44px touch-target floor: padding alone gave 42. */
.btn{display:inline-flex;align-items:center;justify-content:center;text-align:center;gap:10px;min-height:46px;font-family:var(--mono);font-size:11.5px;letter-spacing:.18em;text-transform:uppercase;background:var(--gold);color:var(--ink);padding:14px 26px;border:none;border-radius:var(--r);transition:transform .3s var(--ease),background .3s;will-change:transform}
.btn:hover{transform:translateY(-2px);background:var(--gold-bright)}
.btn.ghost{background:transparent;color:currentColor;border:1px solid var(--gold)}
.btn.ghost:hover{background:var(--gold);color:var(--ink)}
.burger{display:none;background:none;border:1px solid var(--line);border-radius:var(--r);padding:12px;color:inherit;align-items:center}
.menu{position:fixed;inset:0;z-index:110;background:var(--ink);color:var(--ivory);display:grid;grid-template-columns:1.05fr .95fr;align-items:center;gap:clamp(30px,5vw,72px);padding:0 clamp(24px,7vw,110px);clip-path:inset(0 0 100% 0);transition:clip-path .6s var(--ease);visibility:hidden}
.menu.open{clip-path:inset(0 0 0 0);visibility:visible}
.menu-links a{font-family:var(--serif);font-size:clamp(2rem,6vw,4.4rem);line-height:1.16;display:flex;align-items:baseline;gap:22px;padding:6px 0;opacity:0;transform:translateY(24px)}
.menu.open .menu-links a{opacity:.85;transform:none;transition:opacity .55s var(--ease),transform .65s var(--ease),letter-spacing .4s var(--ease),color .3s;transition-delay:calc(.15s + var(--i) * .06s)}
.menu.open .menu-links a:hover{opacity:1;letter-spacing:.02em;color:var(--gold-bright)}
.menu-links a i{font-family:var(--mono);font-style:normal;font-size:11px;letter-spacing:.2em;color:var(--gold)}
.menu-figure{position:relative;border-radius:14px;overflow:hidden;aspect-ratio:4/5;box-shadow:0 30px 80px rgba(0,0,0,.45)}
.menu-figure img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0;transform:scale(1.06);transition:opacity .7s var(--ease),transform 1.5s var(--ease)}
.menu-figure img.on{opacity:1;transform:scale(1)}
.menu-figure figcaption{position:absolute;left:18px;bottom:16px;z-index:2;font-family:var(--mono);font-size:10px;letter-spacing:.2em;text-transform:uppercase;color:var(--cream)}
.menu .close{position:absolute;top:24px;right:clamp(20px,4vw,52px);background:none;border:1px solid var(--line);border-radius:50%;width:52px;height:52px;color:var(--ivory);font-size:20px}
/* ---- reveal / section shell ---- */
[data-io]{opacity:0;transform:translateY(28px);transition:opacity 1s var(--ease),transform 1s var(--ease)}
[data-io].in{opacity:1;transform:none}
.reveal-img{clip-path:inset(8% round 6px);transition:clip-path 1.3s var(--ease)}
.reveal-img.in{clip-path:inset(0 round 6px)}
.wrap{max-width:1240px;margin:0 auto;padding:var(--s7) clamp(20px,4.5vw,52px)}
.sec-head{display:flex;align-items:baseline;justify-content:space-between;gap:24px;margin-bottom:var(--s5);flex-wrap:wrap}
.sec-head h2{font-family:var(--serif);font-weight:400;font-size:var(--step-3);line-height:1.02;color:var(--pine);max-width:20ch}
.sec-head h2 .clip,[data-io] h2 .clip{display:inline-block}
.rule{display:flex;align-items:center;justify-content:center;gap:20px;margin-bottom:var(--s4)}
.rule span{height:1px;width:72px;background:var(--gold)}
/* ---- breadcrumb ---- */
/* ---- page hero banner (subpages) ---- */
.pagehero{position:relative;height:62vh;min-height:440px;overflow:hidden;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;color:var(--ivory);padding:0 24px}
.pagehero img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;animation:hz 20s var(--ease) forwards}
@keyframes hz{from{transform:scale(1.08)}to{transform:scale(1)}}
.pagehero::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(13,58,29,.34),rgba(10,26,16,.64))}
.pagehero .inner{position:relative;z-index:2}
.pagehero .k{color:var(--cream);letter-spacing:.4em;display:block;margin-bottom:20px}
.pagehero h1{font-family:var(--serif);font-weight:400;font-size:var(--step-4);line-height:1.02;max-width:16ch}
/* Pages that open with a full-bleed hero let the fixed header float over it.
Pages without one (contact, gallery, legal…) start at the very top, so their
first block must clear the ~78px solid header. */
main:not(:has(> .pagehero)) > :first-child{padding-top:calc(var(--s5) + 74px)}
/* ---- ambiance line ---- */
.ambiance{background:var(--ivory);text-align:center;padding:90px clamp(20px,5vw,48px) 30px}
.ambiance p{font-family:var(--serif);font-weight:400;font-style:italic;font-size:var(--step-2);line-height:1.35;color:var(--green);max-width:26ch;margin:0 auto;text-wrap:balance}
/* ---- facts strip ---- */
.facts-bar{background:var(--ivory);padding:36px clamp(20px,5vw,48px) 70px}
.facts-bar .row{max-width:900px;margin:0 auto;display:grid;grid-template-columns:repeat(4,1fr);gap:26px;text-align:center}
.facts-bar .row>div{border-top:1px solid var(--line);padding-top:18px}
.facts-bar b{font-family:var(--serif);font-weight:400;font-size:clamp(1.8rem,3vw,2.2rem);color:var(--green);line-height:1;display:block}
.facts-bar span{font-family:var(--mono);font-size:10.5px;letter-spacing:.18em;text-transform:uppercase;color:var(--gold);margin-top:5px;display:block}
/* ---- split block (image + text) ---- */
.split{padding:104px clamp(20px,4.5vw,52px)}
.split>.in{max-width:1240px;margin:0 auto;display:grid;grid-template-columns:1fr 1fr;gap:clamp(32px,5vw,70px);align-items:center}
.split.rev>.in>figure{order:2}
/* Source photographs are landscape. min-height stops the figure collapsing
into a strip between 1000 and 1200px; width pins it to its grid track. */
.split figure{overflow:hidden;border-radius:6px;aspect-ratio:5/4;max-height:600px;min-height:min(340px,68vw);width:100%;max-width:100%}
.split figure img{width:100%;height:100%;object-fit:cover;will-change:transform}
.split h2{font-family:var(--serif);font-weight:400;font-size:clamp(1.9rem,1.15rem + 2.1vw,4rem);line-height:1.06;color:var(--pine);margin:14px 0 22px}
.split p{max-width:52ch;color:var(--pine);opacity:.9;margin-bottom:16px}
.split.on-dark{color:var(--ivory)}
.split.on-dark h2{color:var(--ivory)}
.split.on-dark p{color:var(--cream)}
/* ---- amenities grid ---- */
.amen{background:var(--ivory);padding:100px clamp(20px,4.5vw,52px)}
.amen>.in{max-width:1100px;margin:0 auto}
.amen .grid{display:grid;grid-template-columns:repeat(3,1fr);gap:22px 40px;font-weight:300;font-size:15px;color:var(--pine)}
.amen .grid div{border-top:1px solid var(--line);padding-top:14px}
/* ---- gallery strip (3-up) ---- */
/* The strip was hard-coded to three columns, so a fourth photograph dropped
onto a row of its own and left the rest of it empty. The track count now
follows the number of children: 2fr for the lead image, 1fr for the rest. */
.gstrip{display:grid;grid-template-columns:2fr 1fr 1fr;grid-auto-rows:300px;gap:6px;padding:0 6px 6px;background:var(--ivory)}
.gstrip:has(.g:nth-child(4)){grid-template-columns:2fr 1fr 1fr 1fr}
.gstrip:has(.g:nth-child(5)){grid-template-columns:2fr 1fr 1fr 1fr 1fr}
.gstrip:has(.g:nth-child(2):last-child){grid-template-columns:1fr 1fr}
.gstrip:has(.g:only-child){grid-template-columns:1fr}
.gstrip .g{overflow:hidden}
.gstrip .g img{width:100%;height:100%;object-fit:cover;transition:transform 1.1s var(--ease)}
.gstrip .g:hover img{transform:scale(1.05)}
/* ---- price / CTA band ---- */
.cta-band{background:var(--green);color:var(--ivory);text-align:center;padding:96px clamp(20px,5vw,48px)}
.cta-band>.in{max-width:720px;margin:0 auto}
.cta-band .price{font-family:var(--mono);font-size:11px;letter-spacing:.3em;text-transform:uppercase;color:var(--gold-bright);margin-bottom:20px}
.cta-band h2{font-family:var(--serif);font-weight:400;font-size:var(--step-3);line-height:1.08;margin-bottom:22px}
.cta-band p{color:var(--cream);margin-bottom:34px}
/* ---- cross-sell ---- */
.cross{background:var(--ivory);padding:90px clamp(20px,4.5vw,52px) 110px}
.cross>.in{max-width:1100px;margin:0 auto}
.cross .lbl{text-align:center;margin-bottom:40px}
.cross .row{display:grid;grid-template-columns:repeat(3,1fr);gap:24px}
.cross a{display:block;background:#fff;border:1px solid var(--line);border-radius:6px;overflow:hidden;transition:transform .4s var(--ease),box-shadow .4s var(--ease)}
.cross a:hover{transform:translateY(-5px);box-shadow:0 26px 60px rgba(10,26,16,.12)}
.cross figure{overflow:hidden;aspect-ratio:16/10}
.cross img{width:100%;height:100%;object-fit:cover;transition:transform 1s var(--ease)}
.cross a:hover img{transform:scale(1.05)}
.cross .b{padding:20px 22px 24px}
.cross h3{font-family:var(--serif);font-weight:500;font-size:1.5rem;color:var(--pine)}
.cross .p{font-family:var(--mono);font-size:10.5px;letter-spacing:.12em;color:var(--gold);margin-top:6px}
/* ---- footer ---- */
footer.site{background:var(--ink);color:var(--cream);padding:var(--s6) clamp(20px,4.5vw,52px) 0;overflow:hidden}
footer.site .fg{max-width:1240px;margin:0 auto;display:grid;grid-template-columns:1.5fr 1fr 1fr 1.3fr;gap:44px;padding-bottom:var(--s5)}
footer.site h4,footer.site .fh,.foot .fh{font-family:var(--mono);font-weight:400;font-size:10px;letter-spacing:.26em;text-transform:uppercase;color:var(--gold);margin-bottom:20px}
footer.site a{opacity:.85;transition:opacity .3s,color .3s}
footer.site a:hover{opacity:1;color:var(--gold-bright)}
footer.site ul{list-style:none;display:flex;flex-direction:column;gap:11px;font-size:.92rem}
.news{display:flex;border:1px solid var(--line-dark);border-radius:var(--r);overflow:hidden}
.news input{flex:1;background:none;border:none;padding:13px 14px;color:var(--ivory);font-size:14px;outline:none;min-width:0}
.news button{background:var(--gold);border:none;color:var(--ink);font-family:var(--mono);font-size:11px;letter-spacing:.14em;text-transform:uppercase;padding:0 18px}
footer.site .fb{max-width:1240px;margin:0 auto;display:flex;justify-content:space-between;gap:14px;flex-wrap:wrap;padding:22px 0;border-top:1px solid var(--line-dark);font-family:var(--mono);font-size:10.5px;letter-spacing:.1em;color:var(--cream);opacity:.6}
/* ---- floating CTA + whatsapp ---- */
.fab{position:fixed;right:22px;bottom:22px;z-index:90;display:flex;gap:12px;opacity:0;transform:translateY(16px);transition:opacity .5s var(--ease),transform .5s var(--ease);pointer-events:none}
.fab.on{opacity:1;transform:none;pointer-events:auto}
.fab .wa{width:54px;height:54px;border-radius:50%;background:var(--green);border:1px solid var(--gold);color:var(--ivory);display:grid;place-items:center;box-shadow:0 12px 30px rgba(10,26,16,.4);transition:transform .3s var(--ease)}
.fab .wa:hover{transform:translateY(-2px)}
.fab .btn{box-shadow:0 12px 30px rgba(10,26,16,.4)}
/* ---- shared footer ---- */
.foot{background:var(--ink);color:var(--cream);padding:var(--s6) clamp(20px,4vw,52px) 0;overflow:hidden}
.foot-grid{max-width:1320px;margin:0 auto;display:grid;grid-template-columns:1.5fr 1fr 1.3fr;gap:44px;padding-bottom:var(--s5)}
.foot h4,.foot .fh{font-family:var(--mono);font-weight:400;font-size:10px;letter-spacing:.26em;text-transform:uppercase;color:var(--gold);margin-bottom:18px}
.foot a{opacity:.85;transition:opacity .3s,color .3s}
.foot a:hover{opacity:1;color:var(--gold-bright)}
.foot ul{list-style:none;display:flex;flex-direction:column;gap:10px;font-size:.92rem}
.foot-bar{max-width:1320px;margin:0 auto;display:flex;justify-content:space-between;gap:14px;flex-wrap:wrap;padding:22px 0;border-top:1px solid var(--line-dark);font-family:var(--mono);font-size:10.5px;letter-spacing:.1em;opacity:.6}
@media (max-width:900px){.foot-grid{grid-template-columns:1fr;gap:36px}}
/* Note: the floating WhatsApp button is `.fab .wa` (see above). An old
standalone `a.wa{position:fixed…}` rule used to live here and was leaking
its fixed positioning onto `.fab .wa`, pulling it out of the button row so
it overlapped "Book now" on every shared page. Removed. */
/* ---- mobile: full-width CTAs and centred button rows ---- */
@media (max-width:560px){
.btn{width:100%;padding-left:18px;padding-right:18px;letter-spacing:.14em}
.cta-band .btn,.help .btn,.stay-cta .btn{width:100%}
.stay-cta,.cta-band .in>div{flex-direction:column;align-items:stretch;gap:10px}
header.site .btn{width:auto;padding-left:16px;padding-right:16px}
.fab .btn{width:auto}
}
/* ---- responsive ---- */
@media (max-width:900px){header.site .nav,header.site .h-inner>.lang{display:none}.burger{display:inline-flex}}
/* Four or five tracks get too narrow before the one-column breakpoint. */
@media (max-width:1200px){
.gstrip:has(.g:nth-child(4)),.gstrip:has(.g:nth-child(5)){grid-template-columns:1fr 1fr;grid-auto-rows:260px}
}
@media (max-width:900px){
.split>.in{grid-template-columns:1fr}.split.rev>.in>figure{order:0}.split figure{aspect-ratio:4/3;max-height:none}
.amen .grid{grid-template-columns:1fr 1fr}
.cross .row{grid-template-columns:1fr}
.menu{grid-template-columns:1fr}.menu-figure{display:none}
footer.site .fg{grid-template-columns:1fr 1fr}
.gstrip{grid-template-columns:1fr;grid-auto-rows:260px}
}
@media (max-width:600px){
.facts-bar .row{grid-template-columns:1fr 1fr}
.amen .grid{grid-template-columns:1fr}
footer.site .fg{grid-template-columns:1fr}
}
@media (prefers-reduced-motion:reduce){
*,*::before,*::after{animation:none!important;transition:none!important}
[data-io],.reveal-img{opacity:1!important;transform:none!important;clip-path:none!important}
.loader{display:none}.cur{display:none!important}
.split figure img,.pagehero img{transform:none}
}
/* ---- photo-grid capping (shared) ----
A capped .ph-grid shows a 2x2 hero + 4 tiles (a clean rectangle at every
breakpoint); tiles 6+ stay in the DOM so the lightbox carousel still reaches
them. site.js adds .capped and a "+N photos" badge on the 5th tile. */
.ph-grid .ph{position:relative}
.ph-grid.capped .ph:nth-child(n+6){display:none}
.ph-grid .more-badge{display:none}
.ph-grid.capped .ph:nth-child(5) .more-badge{
display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;
position:absolute;inset:0;background:rgba(9,24,17,.52);color:#F3ECD9;
font-family:var(--mono);font-size:11px;letter-spacing:.16em;text-transform:uppercase;
pointer-events:none;transition:background .4s var(--ease)
}
.ph-grid.capped .ph:nth-child(5):hover .more-badge{background:rgba(9,24,17,.64)}
.ph-grid.capped .ph:nth-child(5) .more-badge b{
font-family:var(--serif);font-weight:400;font-size:2rem;line-height:1;letter-spacing:0;text-transform:none
}
/* ---- small phones: 360px and under ----------------------------------------
Measured on a 360px viewport: the header row came out 349px wide inside a
320px content box (logo + BOOK NOW + burger cannot shrink), pushing every
page 29px past the viewport. Tightening the gutters, the gap and the button
brings the row back inside without dropping any control. */
@media (max-width:420px){
header.site{padding-left:12px;padding-right:12px}
header.site .h-inner{gap:8px}
header.site .h-right{gap:8px}
header.site .btn{padding-left:13px;padding-right:13px;letter-spacing:.1em;font-size:11px}
header.site .logo img{height:44px}
header.site.solid .logo img{height:40px}
.burger{padding:10px}
}
/* ---- mobile legibility floor -------------------------------------------
The micro-labels are set between 9.5px and 10.5px, which reads fine on a
desktop at arm's length but is too small on a phone. Several of the
original rules are more specific than a plain class selector, so the floor
is forced here rather than restated at every call site. Scoped to <=600px,
so desktop typography is untouched. The map attribution is deliberately
left alone -- small print is the convention there. */
@media (max-width:600px){
.book-card label span,.bento .tile .cap,.bento .tile.stat span,
.bento .tile.strip span,.stay .facts,.slot dt,.filters button,
.fb span,.lbl,.cap,.facts,.bk label,.bk .price small,
.fh,.tag,.note-h,.updated,.count,p.t,.lg-toc p,.foot-bar span,
.diet-tags span,.stay-facts li,.stay-facts li span,.loader span,
.cbody .meta,.amen li span,figure cite,figure figcaption,
dl dt,label,label span{font-size:11px!important}
.btn,.btn.ghost,.row .btn{font-size:11.5px!important}
}
/* Footer links are 18px tall on a phone, well under the 44px touch floor.
Padding on the link itself widens the target without moving the layout. */
@media (max-width:600px){
footer.site .fg nav a,footer.site .fg li a{display:inline-block;padding-block:7px}
.lang a{padding:9px 8px}
}
/* The hero booking inputs carry no padding of their own, so the field itself
is a 21px target even though its label wraps a taller box. */
@media (max-width:600px){
.book-card input,.book-card select{padding-block:6px}
}
/* The two floating calls-to-action sit above the page on a phone and were
covering the last line of the footer. Reserve their height at the bottom
of the document. The page-hero eyebrow is tracked out to .4em, which wraps
awkwardly on a narrow screen; tighten it so it holds one or two clean lines. */
@media (max-width:600px){
footer.site{padding-bottom:96px}
.pagehero .k{letter-spacing:.26em}
}
/* ---- navigation over the hero -------------------------------------------
On a wide screen the header sits on open sky. The scrim was inset:0, so the
gradient had already faded to zero by the time it reached the nav row, and
11px at weight 300 with no shadow dissolved into the photograph. Extend the
scrim past the header, give the type weight and a soft shadow, and let the
logo grow on very wide screens -- without dropping a solid bar over the
picture, which is the point of the transparent header. */
header.site::before{
inset:0 0 -64px 0;
background:linear-gradient(180deg,rgba(7,23,16,.68),rgba(7,23,16,.38) 56%,rgba(7,23,16,0))
}
header.site .nav{font-size:12px;letter-spacing:.16em}
header.site .nav a{font-weight:400;opacity:1}
header.site:not(.solid) .nav a,
header.site:not(.solid) .lang a,
header.site:not(.solid) .logo img{text-shadow:0 1px 3px rgba(7,23,16,.55);
filter:drop-shadow(0 1px 3px rgba(7,23,16,.45))}
@media (min-width:1500px){
header.site .nav{font-size:12.5px;gap:26px}
header.site .logo img{height:58px}
header.site.solid .logo img{height:50px}
}
/* ---- header laid out in one row ------------------------------------------
Client note: the two-tier block (languages far left, logo and navigation
stacked in the centre) read as scattered on a wide screen. Logo hard left,
navigation centred in the space between, languages and Book now hard right. */
header.site .h-inner{gap:clamp(16px,3vw,40px)}
header.site .h-inner>.logo{flex:0 0 auto}
header.site .h-inner>.nav{flex:1 1 auto;justify-content:center}
header.site .h-inner>.h-right{flex:0 0 auto;margin-left:auto;justify-content:flex-end;gap:18px}
header.site .h-right .lang{flex:0 0 auto}
@media (max-width:900px){
header.site .h-inner>.nav,header.site .h-right .lang{display:none}
.burger{display:inline-flex}
}
/* Trois liens restaient sous le seuil du doigt sur telephone : la barre du bas
du pied de page (14 px de haut), le lien Instagram et les coordonnees
cliquables de la page contact. Le rembourrage agrandit la cible sans rien
deplacer, comme pour les liens de colonne plus haut. */
@media (max-width:600px){
footer.site .fb a{display:inline-block;padding:11px 4px}
footer.site .fb span{line-height:1}
footer.site .fg a[href*="instagram"]{padding-block:12px}
.ct-list a{display:inline-block;padding-block:11px}
}
/* Le dore de la marque (#B08B3E) donne 2,70:1 sur les fonds clairs : en
dessous du seuil de lisibilite pour un petit texte. Les etiquettes posees
sur creme ou ivoire prennent donc un dore plus profond (4,97:1). Les filets,
les pictogrammes, les boutons et tout le dore sur fond sombre gardent la
teinte d'origine — l'identite de la maison ne bouge pas.
Le prefixe « body » n'est pas decoratif : les feuilles propres a chaque page
se chargent apres celle-ci, et un simple .count s'y ferait battre. */
:root{--gold-ink:#7E6020}
body .facts-bar span,
body .stay .facts, body .stay .price,
body .stay-facts li, body .stay-price,
body .ph-more, body .ph-more a, body .count,
body .facts div span, body .bk .price small,
body .bk .alt a,
body .step .n, body .dist-row .t,
body .ct-list .lbl, body .map .cap,
body .carte-col h3, body .note-card .note-h,
body .care-card .meta, body .xp-card .meta, body .cbody .meta,
body .lg-toc p, body .lg-toc a .n, body .updated, body .lg-body h2 .sn,
body .slot .n, body .slot dt, body .lg-body dt, body .amen .grid div,
body figure cite, body .q-rot cite{color:var(--gold-ink)}
/* Contact Form 7 enveloppe chaque champ dans un et ajoute ses propres
messages. On rend le transparent pour la grille, et on habille les
messages avec la typographie de la maison plutot que celle du plugin. */
.wpcf7-form-control-wrap{display:block}
.cform form .wpcf7-form-control-wrap,
.req form .wpcf7-form-control-wrap{width:100%}
.wpcf7 form .wpcf7-response-output{
margin:18px 0 0;padding:14px 16px;border:1px solid var(--line);border-radius:var(--r);
font-family:var(--sans);font-size:.94rem;background:var(--paper);color:var(--ink)}
.wpcf7 form.sent .wpcf7-response-output{border-color:var(--green);color:var(--green)}
.wpcf7 form.invalid .wpcf7-response-output,
.wpcf7 form.failed .wpcf7-response-output{border-color:#9B3B2F;color:#9B3B2F}
.wpcf7-not-valid-tip{
display:block;margin-top:7px;font-family:var(--mono);font-size:10px;
letter-spacing:.14em;text-transform:uppercase;color:#9B3B2F}
.wpcf7-form-control.wpcf7-not-valid{border-color:#9B3B2F}
.wpcf7-spinner{margin:0 0 0 12px;vertical-align:middle}
/* Le bouton d'envoi est un bouton du design, pas un champ de formulaire.
« .req input » et « .cform input » sont plus precis que « .btn » et
l'emportaient : le bouton dore devenait un rectangle blanc. */
.req input[type="submit"].btn,
.cform input[type="submit"].btn,
.wpcf7 input[type="submit"].btn{
width:auto;cursor:pointer;
display:inline-flex;align-items:center;justify-content:center;
min-height:46px;padding:14px 26px;
font-family:var(--mono);font-size:11.5px;letter-spacing:.18em;text-transform:uppercase;
background:var(--gold);color:var(--ink);
border:none;border-radius:var(--r);
transition:transform .3s var(--ease),background .3s}
.req input[type="submit"].btn:hover,
.cform input[type="submit"].btn:hover,
.wpcf7 input[type="submit"].btn:hover{background:var(--gold-bright)}
/* Contact Form 7 pose deux elements invisibles dans le formulaire : le champ
cache et la zone de reponse. Dans une grille, un element invisible occupe
quand meme une case et decale tout : on les en sort. */
.wpcf7 form .hidden-fields-container{display:none}
.wpcf7 form:not(.sent):not(.invalid):not(.failed):not(.unaccepted):not(.spam)
.wpcf7-response-output{display:none}
.wpcf7 form .wpcf7-response-output{grid-column:1/-1}
/* Ce que Cloudbeds dit des dates choisies, glissé entre le prix et le
formulaire. C'est une information, pas une alarme : même échelle que la
note en dessous, et une pastille qui porte l'état sans mot supplémentaire.
Complet, la ligne passe à une terre cuite — le vert et l'or de la maison
ne savent pas dire non. Elle donne 6,4:1 sur le papier : lisible sans
crier. */
body .bk .bk-etat{
display:flex;align-items:baseline;gap:9px;margin-top:14px;
font-size:12.5px;line-height:1.55;color:var(--green)}
body .bk .bk-etat::before{
content:"";flex:0 0 auto;width:6px;height:6px;border-radius:50%;
background:var(--green);transform:translateY(-1px)}
body .bk .bk-etat.complet{color:#8A3B2A}
body .bk .bk-etat.complet::before{background:#8A3B2A}
body .bk .bk-etat[hidden]{display:none}
/* La mention de disponibilité sous la carte du héros.
Elle était dorée par un style en ligne — donc de la même couleur que les
mentions rassurantes qui la suivent (« meilleur tarif garanti », « taxe de
séjour »). Un avertissement noyé dans une file de promesses ne se lit pas.
Libre, elle garde l'or de la maison ; complet, elle passe à une terre cuite
éclaircie pour tenir sur une photographie sombre : 6,1:1 sur le voile du
héros, là où le #8A3B2A des pages claires tomberait à 1,4:1. L'écart avec
l'or voisin vaut ΔE 26,8 — assez pour que l'œil les sépare d'un coup. */
body .book-note #nights{color:var(--gold-bright)}
body .book-note #nights.complet{color:#F2A98F;letter-spacing:.16em}
/* Un champ légal non renseigné. Il ne disparaît pas en silence : il se montre,
en italique et dans la teinte d'alerte, pour que l'oubli se voie sur la page
plutôt que de se découvrir en contrôle. */
body .lg-body .lg-vide{font-style:italic;color:#8A3B2A}