/* Fonts are served from this site, never from a third party */
@font-face{font-family:"Cormorant Garamond";font-style:normal;font-weight:300;font-display:swap;src:url(fonts/cormorant-garamond-latin-300-normal.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:"Cormorant Garamond";font-style:normal;font-weight:300;font-display:swap;src:url(fonts/cormorant-garamond-latin-ext-300-normal.woff2) format("woff2");unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:"Cormorant Garamond";font-style:normal;font-weight:300;font-display:swap;src:url(fonts/cormorant-garamond-cyrillic-300-normal.woff2) format("woff2");unicode-range:U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116}
@font-face{font-family:"Cormorant Garamond";font-style:normal;font-weight:400;font-display:swap;src:url(fonts/cormorant-garamond-latin-400-normal.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:"Cormorant Garamond";font-style:normal;font-weight:400;font-display:swap;src:url(fonts/cormorant-garamond-latin-ext-400-normal.woff2) format("woff2");unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:"Cormorant Garamond";font-style:normal;font-weight:400;font-display:swap;src:url(fonts/cormorant-garamond-cyrillic-400-normal.woff2) format("woff2");unicode-range:U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116}
@font-face{font-family:"Hanken Grotesk";font-style:normal;font-weight:400;font-display:swap;src:url(fonts/hanken-grotesk-latin-400-normal.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:"Hanken Grotesk";font-style:normal;font-weight:400;font-display:swap;src:url(fonts/hanken-grotesk-latin-ext-400-normal.woff2) format("woff2");unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:"Hanken Grotesk";font-style:normal;font-weight:500;font-display:swap;src:url(fonts/hanken-grotesk-latin-500-normal.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:"Hanken Grotesk";font-style:normal;font-weight:500;font-display:swap;src:url(fonts/hanken-grotesk-latin-ext-500-normal.woff2) format("woff2");unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:"Noto Serif Display";font-style:normal;font-weight:300;font-display:swap;src:url(fonts/noto-serif-display-latin-300-normal.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:"Noto Serif Display";font-style:normal;font-weight:300;font-display:swap;src:url(fonts/noto-serif-display-greek-300-normal.woff2) format("woff2");unicode-range:U+0370-0377,U+037A-037F,U+0384-038A,U+038C,U+038E-03A1,U+03A3-03FF}
@font-face{font-family:"Noto Serif Display";font-style:normal;font-weight:400;font-display:swap;src:url(fonts/noto-serif-display-latin-400-normal.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:"Noto Serif Display";font-style:normal;font-weight:400;font-display:swap;src:url(fonts/noto-serif-display-greek-400-normal.woff2) format("woff2");unicode-range:U+0370-0377,U+037A-037F,U+0384-038A,U+038C,U+038E-03A1,U+03A3-03FF}
@font-face{font-family:"Commissioner";font-style:normal;font-weight:400;font-display:swap;src:url(fonts/commissioner-latin-400-normal.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:"Commissioner";font-style:normal;font-weight:400;font-display:swap;src:url(fonts/commissioner-greek-400-normal.woff2) format("woff2");unicode-range:U+0370-0377,U+037A-037F,U+0384-038A,U+038C,U+038E-03A1,U+03A3-03FF}
@font-face{font-family:"Commissioner";font-style:normal;font-weight:400;font-display:swap;src:url(fonts/commissioner-cyrillic-400-normal.woff2) format("woff2");unicode-range:U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116}
@font-face{font-family:"Commissioner";font-style:normal;font-weight:500;font-display:swap;src:url(fonts/commissioner-latin-500-normal.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:"Commissioner";font-style:normal;font-weight:500;font-display:swap;src:url(fonts/commissioner-greek-500-normal.woff2) format("woff2");unicode-range:U+0370-0377,U+037A-037F,U+0384-038A,U+038C,U+038E-03A1,U+03A3-03FF}
@font-face{font-family:"Commissioner";font-style:normal;font-weight:500;font-display:swap;src:url(fonts/commissioner-cyrillic-500-normal.woff2) format("woff2");unicode-range:U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116}
/* Hotel Nefeli. Single light theme by design.
   Layout: photographs carry every page, edge to edge; text sits in a narrow,
   left-aligned column on a 12-column grid; a clay hairline is the only ornament.
   Palette (31 Oct 2026): warm paper, deep green ink, sage green for actions, clay from the roofs for hairlines,
   cream on dark. Bronze and the olive-black ink are retired with the old logo. */
:root{
  --paper:#FAF8F2;      /* warm plaster white */
  --ink:#2F3A30;        /* deep green ink, the logo colour */
  --ink-body:#3B4640;   /* running text */
  --ink-2:#56625B;      /* labels and captions */
  --green:#4F5E47;      /* the one accent: booking action, footer (sage, dark enough for white text) */
  --green-2:#3E4B38;
  --clay:#C8805E;       /* hairlines only, never a fill: the roof tiles */
  --line:#E3E4DD;
  --on-dark:#F4ECDE;    /* cream, the room wall */
  --on-dark-2:#B4BEB3;
  --serif:"Cormorant Garamond","Nefeli Serif Fallback",Garamond,"Iowan Old Style","Palatino Linotype",Georgia,serif;
  --sans:"Hanken Grotesk","Helvetica Neue",Helvetica,Arial,system-ui,sans-serif;
  --caps:"Hanken Grotesk","Helvetica Neue",Helvetica,Arial,system-ui,sans-serif;   /* small tracked labels: the sans, not an inscription face */
  --gutter:clamp(20px,5vw,72px);
  --gap:clamp(84px,11vw,168px);
  --head:72px;
  --bar:76px;
  color-scheme:light;
  background:var(--paper);
  color:var(--ink);
  padding-top:env(safe-area-inset-top,0px);
  padding-bottom:env(safe-area-inset-bottom,0px);
  -webkit-text-size-adjust:100%;
  text-size-adjust:100%;
  scroll-padding-top:calc(var(--head) + 24px);
}
@font-face{font-family:"Nefeli Serif Fallback";src:local("Georgia"),local("Times New Roman");size-adjust:86%;ascent-override:92%;descent-override:28%}
@view-transition{navigation:auto}
*,*::before,*::after{box-sizing:border-box}
body{margin:0;background:var(--paper);color:var(--ink);font:400 1.0625rem/1.7 var(--sans);-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;font-kerning:normal;overflow-x:clip;overflow-wrap:break-word}
img{display:block;max-width:100%;height:auto}
picture{display:block}
p,dd,li{text-wrap:pretty}
/* Long words (German, Dutch, Polish, Greek, Russian) break cleanly instead of overflowing or leaving ragged holes */
:root:not([data-lang="en"]):not(:lang(en)) body{hyphens:auto;hyphenate-limit-chars:10 4 4}
.display,.h2,.btn,.nav a,.cval{hyphens:manual}
@media (max-width:520px){:root:not([data-lang="en"]):not(:lang(en)) :is(.display,.h2){hyphens:auto}}
h1,h2,h3,p,ul,dl,dd,figure{margin:0}
ul{padding:0;list-style:none}
[hidden]{display:none!important}
:focus-visible{outline:2px solid var(--green);outline-offset:3px}
.site-head.top :focus-visible,.hero :focus-visible,.foot :focus-visible{outline-color:#fff}

/* Greek needs faces that carry the Greek alphabet */
:root[data-lang="el"]{--serif:"Noto Serif Display","Cormorant Garamond",Georgia,serif;--sans:Commissioner,"Hanken Grotesk","Helvetica Neue",Arial,system-ui,sans-serif}
:root[data-lang="el"] .display{font-size:clamp(2.1rem,1.2rem + 3.7vw,4.3rem);line-height:1.12}
:root[data-lang="el"] .h2{font-size:clamp(1.85rem,1.35rem + 2vw,2.85rem);line-height:1.16}
:root[data-lang="el"] .statement{font-size:clamp(1.45rem,1.1rem + 1.6vw,2.25rem);line-height:1.4}
:root[data-lang="el"] .h3,:root[data-lang="el"] .cval{font-size:clamp(1.3rem,1.15rem + .5vw,1.55rem)}
:is(a,button)[lang="el"],:is(a,button)[lang="ru"]{font-family:Commissioner,var(--sans)}
/* Russian: the serif carries Cyrillic; the sans does not, so Commissioner steps in */
:root[data-lang="ru"]{--sans:Commissioner,"Hanken Grotesk","Helvetica Neue",Arial,system-ui,sans-serif}
:root[data-lang="ru"] .display{font-size:clamp(2.2rem,1.25rem + 4vw,4.7rem);line-height:1.08}

.skip{position:absolute;left:-999px;top:8px;z-index:100;background:var(--paper);color:var(--ink);padding:10px 16px}
.skip:focus{left:16px}
.wrap{width:100%;max-width:1360px;margin-inline:auto;padding-inline:var(--gutter)}

/* Type */
.display,.h2,.h3,.statement,.cval,.next a,.sheet nav a{font-variant-numeric:lining-nums;font-feature-settings:"lnum" 1,"kern" 1}
.display{font:300 clamp(2.5rem,1.4rem + 4.6vw,5.25rem)/1.04 var(--serif);letter-spacing:-.005em;text-wrap:balance}
.h2{font:300 clamp(2.15rem,1.5rem + 2.4vw,3.4rem)/1.08 var(--serif);text-wrap:balance}
.h3{font:400 clamp(1.5rem,1.3rem + .7vw,1.85rem)/1.2 var(--serif)}
.statement{font:400 clamp(1.7rem,1.2rem + 2vw,2.7rem)/1.32 var(--serif);max-width:23em;text-wrap:pretty}
@media (min-width:900px){.statement{font-weight:300}}
.muted{color:var(--ink-2)}
.small{font-size:.9375rem;line-height:1.6}
.link{color:var(--ink);text-decoration:underline;text-decoration-color:var(--clay);text-decoration-thickness:1px;text-underline-offset:.4em;align-self:flex-start}
.link:hover{text-decoration-color:currentColor}

/* The one filled control */
.btn{display:inline-flex;align-items:center;justify-content:center;min-height:46px;padding:0 26px;background:var(--green);color:#fff;font:500 .9375rem/1 var(--sans);letter-spacing:.02em;border:0;border-radius:2px;cursor:pointer;text-decoration:none;white-space:nowrap;transition:background-color .2s,color .2s}
.btn:hover{background:var(--green-2)}
.btn.ghost{background:transparent;color:var(--ink);box-shadow:inset 0 0 0 1px var(--ink)}
.btn.ghost:hover{background:var(--ink);color:var(--paper)}

/* Header */
/* Two layers sit behind the menu and cross-fade as the opening photograph scrolls away (--p runs from 1 to 0):
   over the photograph a dark veil, strong behind the letters and gone just below them;
   over the page a pane of frosted glass with a soft shadow, so the header lifts off the white page. */
.site-head{--p:0;position:fixed;inset:0 0 auto 0;z-index:50;isolation:isolate;padding-top:env(safe-area-inset-top,0px);color:var(--ink);transition:color .3s ease}
.site-head::before,.site-head::after{content:"";position:absolute;z-index:-1;pointer-events:none}
.site-head::before{inset:0 0 auto 0;height:calc(100% + 84px);opacity:var(--p);background:linear-gradient(rgba(10,20,14,.8) 0,rgba(10,20,14,.72) 46%,rgba(10,20,14,.46) 66%,rgba(10,20,14,.2) 83%,rgba(10,20,14,.06) 94%,rgba(10,20,14,0) 100%)}
.site-head::after{inset:0;opacity:calc(1 - var(--p));background:rgba(255,255,255,.8);-webkit-backdrop-filter:blur(22px) saturate(1.6);backdrop-filter:blur(22px) saturate(1.6);border-bottom:1px solid rgba(47,58,48,.09);box-shadow:0 14px 34px -20px rgba(47,58,48,.42)}
.site-head.top{--p:1;color:#fff}
.head-in{display:flex;align-items:center;gap:clamp(20px,3vw,44px);height:var(--head)}
/* The wordmark is drawn, not typed: NEFELI with its own N */
.word{display:inline-flex;align-items:center;min-height:44px;color:inherit;text-decoration:none}
.wm{display:block;overflow:visible}
.site-head.top .wm{filter:drop-shadow(0 1px 12px rgba(10,20,14,.35))}
.nav{display:none;gap:clamp(18px,2.2vw,32px);margin-left:auto}
.nav a{color:inherit;text-decoration:none;font-size:.9375rem;white-space:nowrap;padding:6px 0;background:linear-gradient(currentColor,currentColor) 0 100%/0 1px no-repeat;transition:background-size .25s}
.nav a{transition:background-size .35s cubic-bezier(.2,.6,.2,1),opacity .3s ease}
.nav a:hover,.nav a[aria-current="page"]{background-size:100% 1px}
@media (hover:hover){.nav:hover a:not(:hover){opacity:.6}}
.tools{display:flex;align-items:center;gap:clamp(16px,2vw,24px);margin-left:auto}
/* Language: a globe with the current code; the menu lists each language in its own name */
.langsel{position:relative}
.lang-btn{display:inline-flex;align-items:center;gap:8px;border:0;background:none;color:inherit;font:500 .9375rem/1 var(--sans);letter-spacing:.05em;min-height:44px;padding:0 2px;cursor:pointer}
.lang-btn svg{flex:none}
.lang-menu{position:absolute;right:-18px;top:calc(100% + 4px);z-index:70;min-width:200px;padding:8px 0;background:var(--paper);color:var(--ink);border:1px solid var(--line);box-shadow:0 22px 44px -22px rgba(47,58,48,.4);text-shadow:none}
.lang-menu a{display:flex;align-items:center;justify-content:space-between;gap:18px;width:100%;min-height:44px;padding:0 20px;color:var(--ink);font:400 1rem/1 var(--sans);text-decoration:none;transition:background-color .2s,padding-left .3s cubic-bezier(.2,.6,.2,1)}
.lang-menu a:hover{background:#F0F1EB;padding-left:26px}
.lang-menu a[aria-current="true"]{font-weight:500}
.lang-menu a[aria-current="true"]::after{content:"";width:20px;height:1px;background:var(--clay)}
.langlist{display:flex;align-items:flex-start;gap:14px}
.langlist svg{flex:none;margin-top:13px}
.langlist ul{display:flex;flex-wrap:wrap;gap:0 22px}
.langlist a{display:inline-flex;align-items:center;color:inherit;font:400 1rem/1 var(--sans);min-height:44px;text-decoration:none}
.langlist a[aria-current="true"]{text-decoration:underline;text-decoration-color:var(--clay);text-decoration-thickness:1px;text-underline-offset:.45em}
.foot-lang{margin-top:18px;color:var(--on-dark)}
.foot .foot-lang li{padding:0}
.foot .langlist ul{display:flex;gap:0 22px}
.tools .btn{display:none}
/* Menu button: three lines that fold into a cross, and back */
.menu-btn{display:inline-flex;align-items:center;gap:12px;border:0;background:none;color:inherit;font:500 .9375rem/1 var(--sans);min-height:44px;padding:0;cursor:pointer}
.menu-btn .m-close,.menu-btn[aria-expanded="true"] .m-open{display:none}
.menu-btn[aria-expanded="true"] .m-close{display:inline}
.bars{position:relative;display:block;width:26px;height:18px;flex:none}
.bars i{position:absolute;left:0;top:8px;width:100%;height:1.5px;border-radius:1px;background:currentColor;transition:transform .45s cubic-bezier(.3,.7,.2,1),opacity .25s ease}
.bars i:nth-child(1){transform:translateY(-7px)}
.bars i:nth-child(3){transform:translateY(7px)}
.menu-btn[aria-expanded="true"] .bars i:nth-child(1){transform:rotate(45deg)}
.menu-btn[aria-expanded="true"] .bars i:nth-child(2){opacity:0;transform:scaleX(.2)}
.menu-btn[aria-expanded="true"] .bars i:nth-child(3){transform:rotate(-45deg)}
.page .site-head.open{color:var(--ink);text-shadow:none}
.site-head.open::before{opacity:0}
.site-head.open::after{opacity:1;background:var(--paper);box-shadow:none;border-bottom-color:var(--line)}
.site-head.top .btn{background:#fff;color:var(--green)}
.site-head.top .btn:hover{background:var(--on-dark)}
@media (min-width:1080px){
  .nav{display:flex}
  .tools{margin-left:0}
  .tools .btn{display:inline-flex}
  .menu-btn{display:none}
  /* On the home page the dates bar is the booking action while the photo is on screen */
  .home .site-head.top .btn{visibility:hidden;opacity:0}
}

/* Menu (phones and tablets) */
/* The sheet opens under the header, so the wordmark, the language and the cross stay where they are */
.sheet{position:fixed;inset:0;z-index:49;background:var(--paper);overflow-y:auto;padding:calc(env(safe-area-inset-top,0px) + var(--head)) var(--gutter) calc(env(safe-area-inset-bottom,0px) + 32px);opacity:0;transition:opacity .35s ease}
.menu-open .sheet{opacity:1}
.sheet nav{display:grid;margin-top:24px}
.sheet nav a{font:300 clamp(2rem,1.5rem + 2.4vw,2.6rem)/1.15 var(--serif);color:var(--ink);text-decoration:none;padding:14px 0;border-bottom:1px solid var(--line);
  background:linear-gradient(var(--clay),var(--clay)) 0 50%/0 1px no-repeat;opacity:0;transform:translateY(16px);
  transition:opacity .5s ease var(--w,0ms),transform .7s cubic-bezier(.2,.6,.2,1) var(--w,0ms),padding-left .35s cubic-bezier(.2,.6,.2,1),background-size .35s cubic-bezier(.2,.6,.2,1),color .3s}
.menu-open .sheet nav a{opacity:1;transform:none}
.sheet nav a:nth-child(1){--w:60ms}.sheet nav a:nth-child(2){--w:110ms}.sheet nav a:nth-child(3){--w:160ms}
.sheet nav a:nth-child(4){--w:210ms}.sheet nav a:nth-child(5){--w:260ms}.sheet nav a:nth-child(6){--w:310ms}
.sheet nav a[aria-current="page"]{color:var(--ink-2)}
.sheet nav a:active{padding-left:30px;background-size:18px 1px}
@media (hover:hover){
  .sheet nav a:hover{padding-left:30px;background-size:18px 1px}
  .sheet nav:hover a:not(:hover){color:var(--ink-2)}
}
.sheet-foot{display:grid;gap:14px;margin-top:32px;color:var(--ink-2)}
.sheet-foot .mark{margin-top:18px;color:var(--ink)}
.locked{overflow:hidden}

/* Home hero: one photograph, one line, one action */
.hero{position:relative;height:calc(100svh - var(--bar));max-height:860px;min-height:480px;color:#fff;background:var(--green-2);overflow:hidden}
.hero > picture img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:50% 45%}
/* A slow film over the opening photograph: it fades in once it can play, and can be paused */
.hero-video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:50% 45%;opacity:0;transition:opacity .9s ease;pointer-events:none}
.hero-video.on{opacity:1}
.hero .hero-pause{top:auto;bottom:18px;right:var(--gutter);z-index:3;transform:none}
.hero .hero-pause:active{transform:scale(.94)}
.hero-pause .i-play,.hero-pause[aria-pressed="true"] .i-pause{display:none}
.hero-pause[aria-pressed="true"] .i-play{display:block}
@media (max-width:1079px){.hero-text p{padding-right:60px}}
@media (min-width:1080px){.hero .hero-pause{bottom:154px;right:max(var(--gutter),calc((100% - 1360px) / 2 + var(--gutter)))}}
.hero::after,.phero::after{content:"";position:absolute;inset:auto 0 0 0;height:70%;z-index:1;pointer-events:none;background:linear-gradient(rgba(10,20,14,0) 0,rgba(10,20,14,.25) 30%,rgba(10,20,14,.48) 58%,rgba(10,20,14,.66) 100%)}
.hero-text,.phero .wrap,.site-head.top{text-shadow:0 1px 18px rgba(10,20,14,.35)}
.site-head.top .btn{text-shadow:none}
.hero-in{position:absolute;inset:auto 0 0 0;z-index:2}
.hero-in.lift{z-index:60}   /* an open calendar sits above the header's veil */
.hero-text{padding-bottom:clamp(28px,5vw,52px)}
.hero-text p{margin-top:14px;max-width:32em;text-wrap:balance}
@media (min-width:1080px){
  .hero{height:100svh;max-height:1040px;min-height:600px}
}

/* Dates bar */
.bookbar{display:none}
.f{display:flex;flex-direction:column;gap:2px;min-width:0}
.f label,.nights{font-size:.875rem;color:var(--ink-2)}
.lrow{display:flex;justify-content:space-between;gap:12px;align-items:baseline}
.nights{white-space:nowrap}
.f{position:relative}
.dbtn{display:flex;align-items:center;gap:10px;width:100%;min-height:30px;border:0;background:none;padding:0;margin:0;color:var(--ink);font:400 1.0625rem/1.4 var(--sans);text-align:left;cursor:pointer;white-space:nowrap}
.dbtn::after{content:"";position:absolute;inset:0}
.dbtn svg{flex:none;color:var(--ink-2)}
.dbtn:focus-visible{outline:2px solid var(--green);outline-offset:4px}
.dbtn[aria-expanded="true"] .dval{box-shadow:0 1px 0 var(--clay)}
/* Calendar: arrival first, then departure; the stay is shaded between them */
.cal{background:var(--paper);color:var(--ink);text-shadow:none}
.cal-top{display:flex;align-items:center;justify-content:space-between;gap:16px;min-height:48px}
.cal-hint{font:400 1.45rem/1.2 var(--serif);white-space:nowrap}
.cal-nav{display:flex;gap:8px;flex:none}
.cal-nav button{display:grid;place-items:center;width:44px;height:44px;border-radius:50%;border:1px solid var(--line);background:none;color:var(--ink);cursor:pointer;transition:background-color .2s,border-color .2s}
.cal-nav button:hover{background:#F0F1EB;border-color:#CFD2C8}
.cal-nav button:disabled{color:#B5BAB3;cursor:default;background:none}
.cal-months{display:grid;gap:28px clamp(28px,4vw,48px);margin-top:10px}
.cal-title{font:500 1rem/1.4 var(--sans);text-align:center;padding-bottom:8px}
.cal-title::first-letter{text-transform:uppercase}
.cal-grid{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));row-gap:2px}
.cal-wd{font-size:.875rem;line-height:1;color:var(--ink-2);text-align:center;padding:8px 0 10px}
.cal-d{position:relative;height:44px;border:0;border-radius:0;background:none;padding:0;color:var(--ink);font:400 1rem/1 var(--sans);font-variant-numeric:tabular-nums;cursor:pointer}
@media (hover:hover){.cal-d:hover:not(:disabled):not(.s):not(.e){box-shadow:inset 0 0 0 1px var(--green);border-radius:22px}}
.cal-d:disabled{color:#A7ADA6;cursor:default}
.cal-d.today::after{content:"";position:absolute;left:50%;bottom:7px;width:14px;height:1px;margin-left:-7px;background:var(--clay)}
.cal-d.in{background:#E6EBE2}
.cal-d.s,.cal-d.e{background:var(--green);color:#fff;font-weight:500}
.cal-d.s{border-radius:22px 0 0 22px}
.cal-d.e{border-radius:0 22px 22px 0}
.cal-d.solo{border-radius:22px}
.cal-d:focus-visible{outline:2px solid var(--green);outline-offset:2px;z-index:1}
.cal-foot{display:flex;align-items:center;justify-content:space-between;gap:16px;margin-top:14px;padding-top:14px;border-top:1px solid var(--line)}
.cal-sum{font-size:1rem;color:var(--ink-body)}
.cal-done{min-width:132px}
.cal-done:disabled{background:#E3E4DD;color:#7C857E;cursor:default}
.f input,.f select{-webkit-appearance:none;appearance:none;border:0;border-radius:0;background:transparent;color:var(--ink);font:400 1.0625rem/1.4 var(--sans);padding:0;margin:0;width:100%;min-height:30px}
.f input:focus-visible,.f select:focus-visible{outline:2px solid var(--green);outline-offset:4px}
@media (min-width:1080px){
  .bookbar{position:relative;display:grid;grid-template-columns:1fr 1fr 1fr auto;background:var(--paper);color:var(--ink)}
  .bookbar .cal{position:absolute;left:0;bottom:calc(100% + 12px);z-index:5;width:min(760px,100%);padding:20px 30px 28px;box-shadow:0 34px 70px -30px rgba(10,20,14,.7)}
  .bookbar .cal-months{grid-template-columns:repeat(2,minmax(0,1fr))}
  .bookbar .cal .cal-done{height:auto;min-height:48px;padding:0 30px;border-radius:2px;font-size:.9375rem}
  .bookbar .cal{padding-bottom:22px}
  /* on a low window the day rows shrink so the whole calendar still fits between the menu and the dates bar */
  .bookbar .cal-d{height:clamp(29px,calc((max(100svh,600px) - 436px) / 6),44px)}
  .bookbar .f{padding:12px 26px;border-right:1px solid var(--line);justify-content:center}
  .bookbar .btn{height:100%;min-height:64px;padding:0 40px;border-radius:0;font-size:1rem}
}

/* Booking dialog */
.dlg{border:0;padding:0;margin:auto auto 0;width:100%;max-width:none;max-height:none;background:transparent;color:var(--ink)}
.dlg::backdrop{background:rgba(47,58,48,.5)}
.dlg form{background:var(--paper);padding:28px var(--gutter) calc(28px + env(safe-area-inset-bottom,0px));display:grid;gap:22px;max-height:92svh;overflow-y:auto}
.dlg-head{display:flex;align-items:baseline;justify-content:space-between;gap:16px}
.close{border:0;background:none;color:var(--ink-2);font:500 .9375rem/1 var(--sans);min-height:44px;padding:0;cursor:pointer}
.dlg-fields{display:grid;grid-template-columns:1fr 1fr;border-top:1px solid var(--line)}
.dlg-fields .f{padding:14px 0;border-bottom:1px solid var(--line)}
.dlg-fields .f-out{padding-left:16px;border-left:1px solid var(--line)}
@media (max-width:520px){.dlg-fields .dbtn svg{display:none}}
.dlg-fields .f-out .dbtn::after{left:0}
.dlg-fields .f-g,.dlg-fields .cal{grid-column:1/-1}
/* While the calendar is open the window shows the dates only; guests and the availability button return after "Done" */
.dlg-fields .cal{padding:10px 0 0}
.dlg .picking .f-g,.dlg .picking > .go,.dlg .picking > .small{display:none}
.dlg form.picking{padding-bottom:0}
.dlg .cal-foot{position:sticky;bottom:0;z-index:2;background:var(--paper);padding-bottom:calc(20px + env(safe-area-inset-bottom,0px))}
@media (min-width:700px){.dlg .picking .cal-d{height:clamp(30px,calc((92svh - 455px) / 6),44px)}}
/* On phones the open calendar is laid out to fit one screen: dates, month and "Done", with nothing to scroll */
@media (max-width:699px){
  .dlg form.picking{max-height:100svh;gap:10px;padding-top:10px}
  .dlg .picking .dlg-head .h2{font-size:1.6rem}
  .dlg .picking .dlg-fields .f{padding-block:9px}
  .dlg .picking .cal{padding-top:4px}
  .dlg .picking .cal-top{min-height:44px}
  .dlg .picking .cal-months{margin-top:4px}
  .dlg .picking .cal-title{padding-bottom:2px}
  .dlg .picking .cal-wd{padding:6px 0}
  .dlg .picking .cal-grid{row-gap:1px}
  .dlg .picking .cal-d{height:clamp(30px,calc((100svh - 334px - env(safe-area-inset-bottom,0px)) / 6),44px)}
  .dlg .picking .cal-foot{margin-top:8px;padding-top:10px;padding-bottom:calc(12px + env(safe-area-inset-bottom,0px))}
  .dlg .picking .cal-done{min-height:48px}
}
.dlg .btn{min-height:54px;font-size:1rem}
.dlg .small{color:var(--ink-body)}
@media (min-width:700px){
  .dlg{margin:auto;width:min(520px,calc(100% - 48px))}
  .dlg form{padding:36px 40px 40px}
}

/* Page rhythm */
main{padding-bottom:var(--gap)}
.sec{margin-top:var(--gap)}
.plain main{padding-top:calc(var(--head) + clamp(48px,8vw,112px))}

/* Intro */
.intro{display:grid;gap:44px}
.facts > div{display:flex;justify-content:space-between;gap:24px;padding:13px 0;border-top:1px solid var(--line);font-size:.9375rem}
.facts > div:last-child{border-bottom:1px solid var(--line)}
.facts dt{color:var(--ink-2)}
.facts dd{text-align:right}
@media (min-width:1000px){
  .intro{grid-template-columns:repeat(12,minmax(0,1fr));column-gap:clamp(24px,3vw,48px);align-items:end}
  .intro .statement{grid-column:1/9}
  .intro .facts{grid-column:10/13}
}

/* Picture and text */
.feature{display:grid;gap:26px}
.feature > *{min-width:0}
.feature img{width:100%;object-fit:cover}
.feature.a img{aspect-ratio:4/3}
.feature.b img{aspect-ratio:4/5}
.feature.c img{aspect-ratio:3/2}
.txt{display:flex;flex-direction:column;gap:18px}
.txt p{max-width:33em;color:var(--ink-body)}
.cap{margin-top:12px;font-size:.875rem;line-height:1.5;color:var(--ink-2)}
@media (min-width:860px){
  .feature{grid-template-columns:repeat(12,minmax(0,1fr));column-gap:clamp(24px,3vw,48px);align-items:end}
  .feature > *{grid-row:1}
  .feature.a > figure{grid-column:1/8}
  .feature.a .txt{grid-column:9/13}
  .feature.b > figure{grid-column:8/13}
  .feature.b .txt{grid-column:2/7}
  .feature.c > figure{grid-column:5/13}
  .feature.c .txt{grid-column:1/5}
  .txt{padding-bottom:6px}
}
/* Tablets: the text column next to a photo gets 5 columns instead of 4, so a line holds about 45 characters, not 35 */
@media (min-width:860px) and (max-width:1099px){
  .feature.a > figure{grid-column:1/7}
  .feature.a .txt{grid-column:8/13}
  .feature.d .slider{grid-column:7/13}
  .feature.d .txt{grid-column:1/6}
}

/* Photo gallery: one photograph at a time. Swipe it, or use the arrows, which are always on screen. */
.slider{position:relative;min-width:0}
.track{display:flex;overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none;-ms-overflow-style:none;overscroll-behavior-x:contain}
.track::-webkit-scrollbar{display:none}
.track > figure{flex:0 0 100%;scroll-snap-align:start;scroll-snap-stop:always}
.slider .track img{width:100%;aspect-ratio:4/3;object-fit:cover}
.slider.wide .track img{aspect-ratio:3/2;max-height:min(76svh,720px)}
/* Arrows and counter are smoked glass: the photograph shows through, the arrow stays readable on light and dark pictures */
.sl,.sl-count{background:rgba(16,28,22,.64);-webkit-backdrop-filter:blur(14px) saturate(1.5);backdrop-filter:blur(14px) saturate(1.5);color:#fff;border:1px solid rgba(255,255,255,.34);box-shadow:inset 0 1px 0 rgba(255,255,255,.28),0 6px 20px -8px rgba(10,20,14,.5)}
.sl{position:absolute;top:50%;transform:translateY(-50%);display:grid;place-items:center;width:44px;height:44px;border-radius:50%;cursor:pointer;transition:background-color .2s,transform .2s}
.sl:hover{background:rgba(16,28,22,.6)}
.sl:active{transform:translateY(-50%) scale(.94)}
.sl:focus-visible{outline:2px solid #fff;outline-offset:2px}
.sl-prev{left:12px}
.sl-next{right:12px}
.sl-count{position:absolute;right:12px;bottom:12px;padding:4px 12px;border-radius:999px;font-size:.875rem;line-height:1.4;font-variant-numeric:tabular-nums}
.track:focus-visible{outline:2px solid var(--green);outline-offset:3px}
@media (min-width:860px){
  .sl{width:48px;height:48px}
  .sl-prev{left:18px}
  .sl-next{right:18px}
  .sl-count{right:18px;bottom:18px}
  .feature.a .slider{grid-column:1/8}
  .feature.d .slider{grid-column:6/13}
  .feature.d .txt{grid-column:1/5}
}

/* The one colour moment: deep green under a full-width photograph */
.band{background:var(--green);color:var(--on-dark);padding-block:clamp(48px,6vw,92px)}
.band .under{margin-top:0}
.band .txt p,.band .link{color:var(--on-dark)}
.band :focus-visible{outline-color:#fff}

/* Room types: a tall photograph, a name, the facts */
.cards{display:grid;gap:clamp(44px,5vw,56px) clamp(20px,2.6vw,40px);margin-top:clamp(32px,4vw,56px)}
.card{display:flex;flex-direction:column;gap:14px;min-width:0}
.card img{width:100%;aspect-ratio:4/5;object-fit:cover}
.card .h3{margin-top:8px}
.card p{color:var(--ink-body)}
.card .facts{margin-top:auto;padding-top:6px}
@media (min-width:720px){.cards{grid-template-columns:repeat(3,minmax(0,1fr))}.cards.two{grid-template-columns:repeat(2,minmax(0,1fr));max-width:900px}}
.card .link{margin-top:6px}
.card-pic{display:block;overflow:hidden}
.card-pic img{transition:transform 1.2s cubic-bezier(.2,.6,.2,1)}
@media (hover:hover){.card:hover .card-pic img{transform:scale(1.035)}}

/* Questions that open and close */
.accs{border-top:1px solid var(--line)}
.acc{border-bottom:1px solid var(--line)}
.acc summary{display:flex;align-items:center;justify-content:space-between;gap:20px;min-height:72px;padding:14px 0;cursor:pointer;list-style:none}
.acc summary::-webkit-details-marker{display:none}
.acc summary:focus-visible{outline:2px solid var(--green);outline-offset:2px}
.acc-i{position:relative;flex:none;width:38px;height:38px;border:1px solid #CFD2C8;border-radius:50%;color:var(--ink);transition:background-color .3s,border-color .3s,color .3s}
.acc-i::before,.acc-i::after{content:"";position:absolute;left:50%;top:50%;width:12px;height:1.5px;margin:-.75px 0 0 -6px;background:currentColor;transition:transform .45s cubic-bezier(.3,.7,.2,1)}
.acc-i::after{transform:rotate(90deg)}
.acc[open] .acc-i{background:var(--green);border-color:var(--green);color:#fff}
.acc[open] .acc-i::after{transform:rotate(0deg)}
@media (hover:hover){.acc summary:hover .acc-i{border-color:var(--ink)}}
.acc-b{padding:0 58px 26px 0;color:var(--ink-body);max-width:38em}
@supports (interpolate-size:allow-keywords){
  .acc{interpolate-size:allow-keywords}
  .acc::details-content{block-size:0;overflow:clip;transition:block-size .5s cubic-bezier(.2,.6,.2,1),content-visibility .5s allow-discrete}
  .acc[open]::details-content{block-size:auto}
}

/* Room page: the facts and text on the left, the booking card staying in view on the right */
.crumb{margin-bottom:14px;font-size:.9375rem}
.rsec{margin-top:clamp(48px,6vw,84px)}
.rsec > .h2{margin-bottom:22px}
.amen dt{align-self:start}
.ticks li{position:relative;padding:5px 0 5px 24px;color:var(--ink-body)}
.ticks li::before{content:"";position:absolute;left:0;top:1.1em;width:12px;height:1px;background:var(--clay)}
.rcard{display:none}
@media (min-width:1080px){
  .rlayout{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:clamp(24px,3vw,48px);align-items:start}
  .rmain{grid-column:1/8}
  .rcard{display:block;grid-column:9/13;position:sticky;top:calc(var(--head) + 28px)}
  .rcard form{display:grid;gap:18px;padding:26px 28px 28px;background:#fff;border:1px solid var(--line);box-shadow:0 34px 60px -44px rgba(47,58,48,.5)}
  .rcard .dlg-fields{grid-template-columns:1fr}
  .rcard .dlg-fields .f-out{padding-left:0;border-left:0}
  .rcard .btn.go{min-height:52px;font-size:1rem}
  /* the calendar opens beside the card, two months wide, like the one on the home page */
  .rcard form{position:relative}
  .rcard .dlg-fields .cal{position:absolute;right:calc(100% + 18px);top:-1px;z-index:5;width:640px;padding:20px 28px 22px;border:1px solid var(--line);box-shadow:0 34px 70px -34px rgba(47,58,48,.55)}
  .rcard .cal-months{grid-template-columns:repeat(2,minmax(0,1fr))}
  .rcard .cal-d{height:clamp(30px,calc((100svh - 380px) / 6),42px)}
  .rcard .cal-done{min-height:48px}
  /* the card is the booking action while it is on screen */
  .site-head.nobook .tools .btn{visibility:hidden;opacity:0}
}

/* Guest score and reviews */
.said{display:grid;gap:18px}
.score-n{font:300 clamp(4.5rem,3rem + 6vw,7.5rem)/1 var(--serif);font-variant-numeric:lining-nums;font-feature-settings:"lnum" 1;letter-spacing:-.01em}
.score-of{font:400 1.0625rem/1 var(--sans);letter-spacing:0;color:var(--ink-2);margin-left:14px}
.score > p:last-child{margin-top:8px;color:var(--ink-body)}
.quotes{display:grid;gap:clamp(16px,2vw,28px);margin-top:clamp(32px,4vw,56px)}
.quote{display:flex;flex-direction:column;gap:16px;padding:26px 26px 24px;border:1px solid var(--line);background:#fff}
.quote .tag{align-self:flex-start;margin:0}
.quote blockquote{margin:0;font:400 clamp(1.3rem,1.15rem + .5vw,1.5rem)/1.4 var(--serif);color:var(--ink)}
.quote figcaption{margin-top:auto}
@media (min-width:860px){
  .said{grid-template-columns:repeat(12,minmax(0,1fr));column-gap:clamp(24px,3vw,48px);align-items:end}
  .said .h2{grid-column:1/6}
  .said .score{grid-column:6/13}
  .quotes{grid-template-columns:repeat(3,minmax(0,1fr))}
}

/* Edge-to-edge photograph with text beneath */
.bleed img{width:100%;aspect-ratio:4/3;object-fit:cover}
.under{display:grid;gap:18px;margin-top:clamp(28px,4vw,56px)}
@media (min-width:700px){.bleed img{aspect-ratio:16/8}}
@media (min-width:1200px){.bleed img{aspect-ratio:16/7}}
@media (min-width:860px){
  .under{grid-template-columns:repeat(12,minmax(0,1fr));column-gap:clamp(24px,3vw,48px);align-items:start}
  .under .h2{grid-column:1/6}
  .under .txt{grid-column:7/12}
}

/* Inner page head */
.phero{position:relative;height:clamp(380px,64svh,680px);color:#fff;background:var(--green-2);overflow:hidden}
.phero > picture img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.phero .wrap{position:absolute;inset:auto 0 0 0;z-index:2;padding-bottom:clamp(28px,4vw,52px)}
.lead{margin-top:clamp(40px,6vw,88px)}
.ptitle{display:grid;gap:clamp(24px,3vw,40px)}
.leadfig{margin-top:clamp(40px,6vw,80px)}
.leadfig img{width:100%}

/* Two-column text block: heading left, body right */
.block{display:grid;gap:22px}
.block > *{min-width:0}
.block .txt p{max-width:36em}
@media (min-width:860px){
  .block{grid-template-columns:repeat(12,minmax(0,1fr));column-gap:clamp(24px,3vw,48px);align-items:start}
  .block > .h2{grid-column:1/6}
  .block > .txt,.block > .rows,.block > .list,.block > .accs{grid-column:6/13}
}

/* Rows and lists */
.rows > div{display:grid;gap:6px;padding:22px 0;border-top:1px solid var(--line)}
.rows > div:last-child{border-bottom:1px solid var(--line)}
.rows dd,.rows p{color:var(--ink-body);max-width:36em}
@media (min-width:640px){.rows > div{grid-template-columns:minmax(0,5fr) minmax(0,8fr);gap:28px;align-items:baseline}}
.list{columns:1;column-gap:clamp(24px,3vw,48px)}
.list li{padding:13px 0;border-top:1px solid var(--line);break-inside:avoid;color:var(--ink-body)}
@media (min-width:640px){.list{columns:2}}
.tag{font-size:.875rem;color:var(--ink-2);border:1px solid var(--line);padding:3px 10px;border-radius:2px;margin-left:10px;vertical-align:middle;font-family:var(--sans);white-space:nowrap}

/* Photo sets */
.set{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(8px,1.2vw,18px)}
.set img{width:100%;aspect-ratio:3/2;object-fit:cover}
.set .wide{grid-column:1/-1}
.set .wide img{aspect-ratio:16/9}

/* Contact */
.cval{font:400 clamp(1.4rem,1.2rem + .8vw,1.8rem)/1.25 var(--serif);color:var(--ink);text-decoration:none;overflow-wrap:anywhere;user-select:all}
.copy{border:0;background:none;color:var(--ink-2);font:400 .875rem/1 var(--sans);padding:10px 0;margin-left:14px;cursor:pointer;text-decoration:underline;text-decoration-color:var(--clay);text-underline-offset:.4em}
.form{display:grid;gap:0;border-top:1px solid var(--line)}
.form .f{padding:14px 0;border-bottom:1px solid var(--line)}
.form textarea{-webkit-appearance:none;appearance:none;border:0;background:transparent;color:var(--ink);font:400 1.0625rem/1.6 var(--sans);padding:0;width:100%;min-height:120px;resize:vertical}
.form textarea:focus-visible{outline:2px solid var(--green);outline-offset:4px}
.form .btn{justify-self:start;margin-top:24px}
.form-msg{margin-top:18px;color:var(--ink-2)}
.cdates-box{padding-top:14px}
.cdates-box .cd-label{font-size:.875rem;color:var(--ink-2)}
.cdates-box .dlg-fields{border-top:0}
.cdates-box .dlg-fields .f label{font-size:.8125rem}
.dclear{border:0;background:none;color:var(--ink);font:400 .875rem/1 var(--sans);padding:12px 0;margin:-12px 0;cursor:pointer;text-decoration:underline;text-decoration-color:var(--clay);text-underline-offset:.4em}
.dclear:focus-visible{outline:2px solid var(--green);outline-offset:4px}

/* Next page */
.closing{padding-top:36px;border-top:1px solid var(--line)}
.card.offer.live figure{aspect-ratio:4/3;background:#E6EBE2;overflow:hidden}.card.offer.live figure img{width:100%;height:100%;object-fit:cover;display:block}
.foot-legal{margin:0;display:flex;flex-wrap:wrap;gap:0 .5em}
.next{display:grid;gap:6px;padding-top:36px;border-top:1px solid var(--line)}
.next a{font:300 clamp(2.1rem,1.5rem + 2.4vw,3.4rem)/1.06 var(--serif);color:var(--ink);text-decoration:none;justify-self:start;background:linear-gradient(var(--clay),var(--clay)) 0 100%/0 1px no-repeat;transition:background-size .3s}
.next a:hover{background-size:100% 1px}

/* Footer: the one dark layer */
.foot{background:var(--green);color:var(--on-dark);padding-block:clamp(56px,8vw,104px) calc(36px + env(safe-area-inset-bottom,0px));position:relative;isolation:isolate;overflow:hidden}
/* The garden from above, barely there: breaks the flat green without becoming a picture */
/* the bay at night, under a deep green veil: lights across the water at the top, calm green where the text sits */
.foot::before{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;
  background:linear-gradient(180deg,rgba(52,64,48,.62) 0%,rgba(70,84,63,.88) 40%,rgba(79,94,71,.97) 75%,#4F5E47 100%),url(img/night-bay-1800.webp) center 22%/cover no-repeat}
@media (max-width:700px){.foot::before{background:linear-gradient(180deg,rgba(52,64,48,.6) 0%,rgba(70,84,63,.86) 50%,#4F5E47 100%) 0 0/100% 560px no-repeat,url(img/night-bay-1200.webp) 30% 0/auto 560px no-repeat,var(--green)}}
@media (prefers-reduced-data:reduce){.foot::before{display:none}}
.foot a{color:inherit;text-decoration:none}
.foot li a,.foot-base a{background:linear-gradient(currentColor,currentColor) 0 calc(100% - 3px)/0 1px no-repeat;transition:background-size .35s cubic-bezier(.2,.6,.2,1),color .3s}
.foot li a:hover,.foot-base a:hover{background-size:100% 1px;color:#fff}
.foot .langlist a,.foot .langlist a:hover{background:none}
.foot .langlist a:hover{color:#fff}
.langlist a{transition:opacity .25s}
@media (hover:hover){.langlist ul:hover a:not(:hover){opacity:.6}}
.foot-grid{display:grid;gap:44px}
.fg-brand .wm{display:block;height:30px;width:auto}
.foot address{font-style:normal;display:grid;gap:2px;margin-top:22px;line-height:1.55}
.foot address span:first-child{color:#fff}
.fk{margin:0 0 16px;font:500 .75rem/1 var(--sans);letter-spacing:.16em;text-transform:uppercase;color:var(--on-dark-2)}
.foot .fg-write{background:none;color:#fff;box-shadow:inset 0 0 0 1px rgba(243,242,235,.45);min-height:48px;padding:0 24px}
.foot .fg-write:hover{background:rgba(243,242,235,.1);box-shadow:inset 0 0 0 1px #fff}
.foot .fg-lines{margin-top:18px}
.foot .fg-lines a{display:inline-flex;align-items:center;gap:12px;color:var(--on-dark);background-position:29px calc(100% - 3px)}
.foot .fg-lines svg{flex:none;opacity:.75}
.foot .social{display:flex;gap:12px;margin-top:22px}
.foot .soc{width:46px;height:46px;display:grid;place-items:center;border-radius:50%;box-shadow:inset 0 0 0 1px rgba(243,242,235,.3);color:var(--on-dark);transition:background-color .3s,box-shadow .3s,color .3s}
.foot .soc:hover{background:rgba(243,242,235,.1);box-shadow:inset 0 0 0 1px rgba(243,242,235,.7);color:#fff}
.fg-nav ul{grid-template-columns:1fr 1fr;column-gap:24px}
.mark{display:block;flex:none}
.lockup{display:inline-flex;flex-direction:column;align-items:flex-start;gap:14px}
.lockup .mark{margin-bottom:10px;color:var(--on-dark)}
.lockup .word{min-height:0}

.foot ul{display:grid;gap:4px}
.foot li{padding-block:5px}
.foot li a{display:inline-block;padding-block:5px;margin-block:-5px}
.foot .dim{color:var(--on-dark-2)}
.foot-base{display:flex;flex-wrap:wrap;gap:12px 28px;align-items:center;justify-content:space-between;margin-top:clamp(48px,6vw,80px);padding-top:22px;border-top:1px solid rgba(243,242,235,.16);font-size:.875rem;color:var(--on-dark-2)}
@media (min-width:760px){.foot-grid{grid-template-columns:1.25fr 1fr 1.25fr;gap:56px}.fg-nav ul{column-gap:40px}}
@media (min-width:1080px){.foot{padding-bottom:32px}}

/* Booking bar on phones and tablets: the single booking action there */
/* a floating pill of tinted glass: the page shows through around and behind it, in portrait and landscape alike */
.mbar{position:fixed;inset:auto 0 0 0;z-index:45;display:flex;justify-content:center;padding:0 var(--gutter) calc(14px + env(safe-area-inset-bottom,0px));pointer-events:none;transition:transform .45s cubic-bezier(.2,.7,.2,1),opacity .3s ease}
.mbar .btn{pointer-events:auto;width:auto;min-width:min(250px,100%);height:52px;min-height:0;padding:0 36px;border-radius:999px;font-size:1rem;letter-spacing:.03em;color:#fff;
  background:rgba(47,58,48,.8);-webkit-backdrop-filter:blur(18px) saturate(1.6);backdrop-filter:blur(18px) saturate(1.6);
  box-shadow:0 14px 34px -14px rgba(16,24,18,.55),inset 0 1px 0 rgba(255,255,255,.22),inset 0 0 0 1px rgba(255,255,255,.14)}
.mbar .btn:active{transform:scale(.98)}
@supports not ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){.mbar .btn{background:var(--green)}}
.mbar.away{transform:translateY(140%);opacity:0}
@media (min-width:1080px){.mbar{display:none}}

/* One orchestrated moment: the photograph settles as the page opens */
@media (prefers-reduced-motion:no-preference){
  .hero > picture img,.phero > picture img{animation:settle 1.8s cubic-bezier(.2,.6,.2,1) both}
  .hero-text,.phero .wrap{animation:rise 1.1s cubic-bezier(.2,.6,.2,1) .25s both}
  @keyframes settle{from{transform:scale(1.045)}to{transform:none}}
  @keyframes rise{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:none}}
}
/* As the page is scrolled, each piece rises a little and fades in, once */
/* the entrance: slow, soft, on its own compositor layer so big serif text doesn't stutter on iPhone Safari */
.anim .rv{opacity:0;transform:translate3d(0,18px,0);transition:opacity 1.5s cubic-bezier(.33,0,.2,1) var(--d,0ms),transform 1.8s cubic-bezier(.16,1,.3,1) var(--d,0ms);will-change:opacity,transform;backface-visibility:hidden}
.anim .rv.ph{transform:translate3d(0,12px,0)}
.anim .rv.in{opacity:1;transform:translate3d(0,0,0)}
@media print{.anim .rv{opacity:1;transform:none}}
@media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}.anim .rv{opacity:1;transform:none}}

/* Photographs open large */
main img[data-full]{cursor:zoom-in}
.lb{border:0;padding:0;margin:0;width:100%;height:100%;max-width:none;max-height:none;background:var(--green-2);color:var(--on-dark)}
.lb[open]{display:grid;grid-template-rows:auto minmax(0,1fr) auto}
.lb::backdrop{background:var(--green-2)}
.lb > img{width:100%;height:100%;object-fit:contain;padding-inline:var(--gutter)}
.lb-bar{display:flex;align-items:center;justify-content:space-between;gap:20px;min-height:68px;padding-inline:var(--gutter);font-size:.9375rem}
.lb-cap{color:var(--on-dark);max-width:44em}
.lb-nav{display:flex;gap:26px;flex:none}
.lb button{border:0;background:none;color:var(--on-dark);font:500 .9375rem/1 var(--sans);min-height:44px;padding:0;cursor:pointer}
.lb button:focus-visible{outline:2px solid #fff;outline-offset:4px}
@media (max-width:600px){.lb-bar:last-child{flex-direction:column;align-items:flex-start;gap:4px;padding-block:14px}}
.site-head.open .wm{filter:none}

/* Phone menu: the secondary pages under the main ones */
.sheet-more{display:flex;flex-wrap:wrap;gap:4px 26px;margin-top:22px}
.sheet-more a{display:inline-flex;align-items:center;min-height:44px;color:var(--ink);text-decoration:underline;text-decoration-color:var(--clay);text-decoration-thickness:1px;text-underline-offset:.4em}

/* Member code */
.linkbtn{border:0;background:none;padding:0;color:var(--ink);font:inherit;cursor:pointer;text-decoration:underline;text-decoration-color:var(--clay);text-decoration-thickness:1px;text-underline-offset:.4em;min-height:44px}
.member{display:grid;gap:8px;justify-items:start}
.m-on{display:flex;align-items:center;gap:8px;color:var(--ink);flex-wrap:wrap}
.m-on .linkbtn{min-height:32px}
.m-dot{width:8px;height:8px;border-radius:50%;background:var(--green)}
.m-form{display:grid;gap:6px;width:100%;min-width:0}
.m-form label{font-size:.875rem;color:var(--ink-2)}
.m-row{display:flex;gap:10px}
.m-input{flex:1 1 0;width:0;min-width:0;min-height:46px;padding:0 14px;border:1px solid #CFD2C8;border-radius:2px;background:#fff;color:var(--ink);font:500 1rem/1 var(--sans);letter-spacing:.08em;text-transform:uppercase}
.m-input:focus-visible{outline:2px solid var(--green);outline-offset:2px}
.m-err{color:#8A3B2E}
.dlg .member,.rcard .member{margin-top:-6px}

/* Forms: a consent box, and the messages after sending */
.form .check{display:grid;grid-template-columns:auto 1fr;gap:12px;align-items:start;padding:16px 0}
.form .check input{width:22px;height:22px;margin:2px 0 0;accent-color:var(--green)}
.form .check label{font-size:.9375rem;color:var(--ink-body);line-height:1.55}
.form .check a{color:var(--ink);text-decoration-color:var(--clay);text-underline-offset:.3em}
.form-msg.ok{color:var(--green);font-weight:500}

/* Offers */
.offer .btn{align-self:flex-start;margin-top:auto}
.offer p{flex:0 0 auto}
.terms{margin-top:28px}

/* Home: rooms as three tiles, the same row of photographs a guest compares at a glance */
.sec-head{display:flex;flex-wrap:wrap;align-items:flex-end;justify-content:space-between;gap:18px 40px}
.sec-head > div{display:grid;gap:16px;max-width:36em}
.sec-head p{color:var(--ink-body)}
.tiles{margin-top:clamp(28px,4vw,48px)}
.rtile{display:flex;flex-direction:column;gap:10px;color:var(--ink);text-decoration:none;min-width:0}
.rtile figure{overflow:hidden}
.rtile img{width:100%;aspect-ratio:4/5;object-fit:cover;transition:transform 1.2s cubic-bezier(.2,.6,.2,1)}
.rt-name{margin-top:8px;font:400 clamp(1.4rem,1.25rem + .6vw,1.75rem)/1.2 var(--serif)}
.rowlink{white-space:nowrap;margin-left:.5em}
.rt-from{font-size:.9375rem;color:var(--ink-2)}
.rt-name{background:linear-gradient(var(--clay),var(--clay)) 0 100%/0 1px no-repeat;align-self:flex-start;transition:background-size .35s cubic-bezier(.2,.6,.2,1)}
@media (hover:hover){.rtile:hover img{transform:scale(1.035)}.rtile:hover .rt-name{background-size:100% 1px}}
.tiles + .cap{margin-top:16px}
/* On phones a row like this is swiped; the next card peeks in so it is clear there is more */
.swipe{display:grid;grid-auto-flow:column;grid-auto-columns:80%;gap:14px;overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none;margin-inline:calc(-1 * var(--gutter));padding-inline:var(--gutter);scroll-padding-inline:var(--gutter)}
.swipe::-webkit-scrollbar{display:none}
.swipe > *{scroll-snap-align:start}
@media (min-width:720px){.swipe{grid-auto-flow:row;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(16px,2vw,28px);overflow:visible;margin-inline:0;padding-inline:0}}
.quotes.swipe{display:grid}
/* Book direct: three reasons, one invitation */
.block > .direct-cta,.ptitle .direct-cta,.txt .direct-cta{display:flex;flex-wrap:wrap;align-items:center;gap:16px 28px;margin-top:8px}
.ptitle .direct-cta{margin-top:24px}
@media (min-width:860px){.block > .direct-cta{grid-column:6/13}}

/* Rooms page: the three room types come first; their heading is for screen readers only */
.vh{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.sec.first{margin-top:clamp(40px,6vw,80px)}
.feature .ticks{margin-top:4px}
/* Room page booking card: the room and its price on top */
.rc-head{display:grid;gap:4px}
.rc-price{font:400 clamp(1.45rem,1.3rem + .5vw,1.7rem)/1.2 var(--serif);color:var(--ink);margin-top:4px}
.rcard .link.small{justify-self:start}
/* A word for non-members inside the booking window */
.m-nudge{color:var(--ink-body)}
.m-nudge a{color:var(--ink);text-decoration-color:var(--clay);text-underline-offset:.35em}
.member.is-member .m-nudge{display:none}

/* Members’ club invitation: appears once, late and quietly, and stays away for a month when closed */
.invite{position:fixed;z-index:46;left:var(--gutter);right:var(--gutter);bottom:calc(var(--bar) + 12px + env(safe-area-inset-bottom,0px));display:grid;gap:8px;padding:22px 24px 20px;background:var(--paper);border:1px solid var(--line);box-shadow:0 30px 60px -28px rgba(47,58,48,.5);opacity:0;transform:translateY(16px);transition:opacity .5s ease,transform .6s cubic-bezier(.2,.6,.2,1)}
.invite.on{opacity:1;transform:none}
.invite-k{font:500 .72rem/1 var(--caps);letter-spacing:.26em;text-transform:uppercase;color:var(--ink-2)}
.invite-t{font:400 1.6rem/1.15 var(--serif);color:var(--ink)}
.invite .small{color:var(--ink-body);max-width:30em}
.invite-a{display:flex;flex-wrap:wrap;align-items:center;gap:12px 22px;margin-top:8px}
.invite-no{white-space:nowrap}
.invite-x{position:absolute;top:6px;right:6px;width:44px;height:44px;border:0;background:none;color:var(--ink-2);font:300 1.6rem/1 var(--sans);cursor:pointer}
@media (min-width:1080px){.invite{left:28px;right:auto;bottom:28px;width:360px}}
@media (prefers-reduced-motion:reduce){.invite{transform:none}}
.rc-head .h3{font:500 .875rem/1.3 var(--sans);letter-spacing:.1em;text-transform:uppercase;color:var(--ink-2)}
.rc-price{font-size:clamp(1.6rem,1.4rem + .6vw,1.9rem)}

/* Icons: thin line drawings in the label colour, always beside a word, never alone */
.ic{flex:none;display:block;color:var(--ink-2)}
.facts dt{display:flex;align-items:center;gap:10px}
.rows dt.muted{display:flex;align-items:center;gap:10px}
.ticks.icons li{padding-left:34px}
.ticks.icons li::before{display:none}
.ticks.icons .ic{position:absolute;left:0;top:calc((1.7em - 20px) / 2 + 5px)}
.acc-q{display:flex;align-items:center;gap:14px}
.band .ic{color:var(--on-dark-2)}

@media (min-width:860px){.block > .facts{grid-column:6/13}}
.rows dt.h3 .ic{display:inline-block;vertical-align:-.12em;margin-right:12px}

/* About us: family photo placeholder until the real portrait arrives */
.fam-ph{margin:0;aspect-ratio:4/5;background:#EDEFE7;border:1px solid var(--line);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:18px;padding:28px;text-align:center;color:var(--ink-2)}
.fam-ph .mark{opacity:.5}
.fam-ph p{margin:0;font-size:15px;max-width:22ch}
.intro-txt{display:grid;grid-template-columns:minmax(0,1fr);gap:22px;justify-items:start}
.intro-txt > *{grid-column:1}
@media (min-width:1000px){.intro .intro-txt{grid-column:1/9}}

/* "Best rate" promise: where people decide between us and the booking sites */
.bb-note{display:none}
@media (min-width:1080px){
  .bb-note{display:flex;justify-content:flex-end;align-items:center;gap:8px;margin:0 0 12px;padding-right:84px;color:#fff;font-size:.9375rem;text-shadow:0 1px 14px rgba(10,20,14,.55)}   /* room for the film's pause button on the right */
}
.best{display:flex;align-items:center;gap:8px;margin:14px 0 0;color:var(--ink)}
.tick{flex:none}

/* QA pass: hover feedback on the two controls that had none, and 44 px tap areas on small links (no visual change) */
.lang-btn:hover .code{text-decoration:underline;text-decoration-color:var(--clay);text-decoration-thickness:1px;text-underline-offset:.3em}
.link,.m-nudge a,.check a,.linkbtn.small{padding-top:.55em;padding-bottom:.55em;margin-top:-.55em;margin-bottom:-.55em}
.m-nudge a,.check a{display:inline-block}
/* Language offer: same card as the invitation, shown at once, one line */
.langbar{padding:18px 56px 18px 22px}
.langbar .small{margin:0 0 2px}
.langbar .invite-a{margin-top:6px}

/* Guest scores: one line, each linked to its source */
.scores{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:26px 24px}
.scores li{display:flex;flex-direction:column;gap:4px}
.sc-n{margin:0;font:300 2.6rem/1 var(--serif);font-variant-numeric:lining-nums;font-feature-settings:"lnum" 1;color:var(--ink)}
.sc-of{display:block;font:400 .9375rem/1.3 var(--sans);color:var(--ink-2);margin-top:6px}
.sc-src{font-size:1rem;color:var(--ink);text-decoration:underline;text-decoration-color:var(--clay);text-decoration-thickness:1px;text-underline-offset:.35em;align-self:flex-start}
a.sc-src:hover{text-decoration-color:currentColor}
span.sc-src{text-decoration:none}
@media (min-width:720px){.scores{grid-template-columns:repeat(4,minmax(0,1fr))}.scores.n2{grid-template-columns:repeat(2,minmax(0,1fr))}.scores.n3{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media (min-width:860px){.block > .scores{grid-column:6/13}}
/* Quick room tiles on the rooms page: phones only */
.only-phone{display:none}
@media (max-width:719px){.only-phone{display:block;margin-top:10px}}
.rlist{display:grid;border-top:1px solid var(--line)}
.rrow{display:flex;align-items:center;gap:14px;padding:12px 0;border-bottom:1px solid var(--line);color:inherit;text-decoration:none;min-height:64px}
.rrow img{width:72px;height:72px;object-fit:cover;flex:none;border-radius:2px}
.rr-txt{display:flex;flex-direction:column;gap:2px;flex:1;min-width:0}
.rr-name{font:400 1.2rem/1.2 var(--serif);color:var(--ink)}
.rrow svg{flex:none;color:var(--ink-2)}
.rrow:active{background:#F3F1EA}
/* The drawn map (contact, corfu) */
.map{margin:0;max-width:600px}.map-stage{position:relative;overflow:hidden;border-radius:8px;background:#E4ECEE;aspect-ratio:690/640}
.map-stage > svg{position:absolute;inset:0;width:100%;height:100%;display:block;transform-origin:0 0}
.map-stage > .map-k{opacity:0;pointer-events:none}.map.z .map-k{pointer-events:auto}.map.z .map-i{pointer-events:none}
.map-i .hotel{transition:opacity .25s}.map.z .map-i .hotel{opacity:0}
.map .sea-fill{fill:#E4ECEE}.map .land{fill:#F7F4EC;stroke:#C9C2B0;stroke-width:.9;stroke-linejoin:round}.map .land.dim{fill:#EFEBE1;stroke:#D6D0C0}.map .lake{fill:#E4ECEE;stroke:#D6D0C0;stroke-width:.6}
.map text{font-size:13px;fill:var(--ink-2);font-family:var(--sans)}.map text.sea{font-size:12px;fill:#7E929B;font-style:italic;letter-spacing:.06em}
.map .mp{fill:#9A9483}.map .hotel circle{fill:var(--green)}.map .hotel .halo{fill:var(--green);opacity:.14}
.map .hotel line{stroke:var(--green);stroke-width:1}.map .hotel text{font-size:15px;font-weight:500;fill:var(--ink)}.map .hotel text.sub{font-size:12.5px;font-weight:400;fill:var(--ink-2)}
.map figcaption{margin-top:16px}.map-btns{display:flex;flex-wrap:wrap;gap:10px}.map-btns .btn{min-height:44px;padding:0 20px;font-size:.9rem}

/* contact: phone and e-mail look like what they are, links you can tap */
.rows a.cval{text-decoration:underline;text-decoration-color:var(--clay);text-decoration-thickness:1px;text-underline-offset:.32em}
.rows a.cval:hover{text-decoration-color:currentColor}

/* the map: our drawing, with one way out to Google for directions */
.map{position:relative}
.map-open{position:absolute;top:12px;right:12px;display:inline-flex;align-items:center;gap:8px;min-height:40px;padding:0 16px;border-radius:999px;background:rgba(255,255,255,.92);color:var(--ink);font:500 .875rem/1 var(--sans);text-decoration:none;box-shadow:0 6px 20px -8px rgba(30,40,32,.35),inset 0 0 0 1px rgba(47,58,48,.12);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);transition:background-color .2s,color .2s}
.map-open:hover{background:var(--green);color:#fff}.map-open svg{width:14px;height:14px;flex:none}
/* back to the top: a quiet round button on desktop, a footer link on phones (the Book pill owns the bottom there) */
.totop{position:fixed;right:28px;bottom:28px;z-index:44;width:48px;height:48px;display:grid;place-items:center;border-radius:50%;color:var(--ink);background:rgba(250,248,242,.82);-webkit-backdrop-filter:blur(14px) saturate(1.4);backdrop-filter:blur(14px) saturate(1.4);box-shadow:0 10px 26px -12px rgba(30,40,32,.45),inset 0 0 0 1px rgba(47,58,48,.14);opacity:0;transform:translateY(10px);pointer-events:none;transition:opacity .35s ease,transform .35s ease,background-color .2s,color .2s}
.totop.on{opacity:1;transform:none;pointer-events:auto}
.totop:hover{background:var(--green);color:#fff}
.totop-link{display:none}
@media (max-width:1079px){.totop{display:none}.foot .totop-link{display:inline-block;margin-right:1.2em;color:var(--on-dark)}}

/* Kommeno close-up */
.map-k .sand{fill:#EDE2C6;stroke:#DCCCA4;stroke-width:.7}
.map-k .rd-minor path{fill:none;stroke:#E2DACA;stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round}
.map-k .rd-major path{fill:none;stroke:#D5C8AA;stroke-width:5;stroke-linecap:round;stroke-linejoin:round}
.map-k text.place{font-size:14px;fill:#8C8677;letter-spacing:.04em}.map-k text.sea{font-size:15px}
.map-k .hotel text{font-size:17px}
.kp{cursor:pointer;outline:none;color:#F7F4EC}.kp circle{fill:var(--green);stroke:#fff;stroke-width:2.5;transition:fill .2s}
.kp-private circle{fill:#A39C8A}.kp-swan circle,.kp-chapel circle{fill:#6F8790}
.kp:hover circle,.kp:focus-visible circle,.kp.on circle{fill:var(--clay)}
.kp:focus-visible circle{stroke:var(--ink);stroke-width:3}
.map-tip{position:absolute;z-index:3;max-width:min(280px,calc(100% - 16px));padding:11px 14px 12px;border-radius:12px;background:rgba(255,255,255,.96);box-shadow:0 10px 30px -10px rgba(30,40,32,.4),inset 0 0 0 1px rgba(47,58,48,.1);font:400 .875rem/1.45 var(--sans);color:var(--ink-2)}
.map-tip b{display:block;font-weight:600;color:var(--ink);font-size:.875rem;margin-bottom:2px}
.map-ctl{position:absolute;left:12px;bottom:12px;z-index:2}
.map-zoom{display:inline-flex;align-items:center;min-height:40px;padding:0 16px;border:0;border-radius:999px;background:var(--green);color:#fff;font:500 .875rem/1 var(--sans);cursor:pointer;box-shadow:0 6px 20px -8px rgba(30,40,32,.45);transition:background-color .2s}
.map-zoom:hover{background:var(--green-2)}.map-zoom[data-out]{background:rgba(255,255,255,.92);color:var(--ink);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);box-shadow:0 6px 20px -8px rgba(30,40,32,.35),inset 0 0 0 1px rgba(47,58,48,.12)}
.map-k .kscale path{fill:none;stroke:#8C8677;stroke-width:1.5}.map-k .kscale text{font-size:12px;fill:#8C8677}
@media (max-width:600px){.map-open{position:static;margin-top:12px;box-shadow:inset 0 0 0 1px rgba(47,58,48,.18)}.map-ctl{left:10px;bottom:10px}.map-zoom{min-height:38px;padding:0 14px;font-size:.8125rem}}
.map-tip span{display:block}.map-tip-go{display:inline-flex;align-items:center;min-height:36px;margin-top:6px;color:var(--ink);font-weight:500;text-decoration:underline;text-decoration-color:var(--clay);text-underline-offset:3px}
.map-k .m{display:none}
@media (max-width:600px){
.map-stage{aspect-ratio:330/398}
.map-k .m{display:inline}.map-k .d{display:none}
.map-k .kp circle{stroke-width:2}.map-tip{max-width:min(250px,calc(100% - 16px));padding:10px 12px 8px;font-size:.8125rem;line-height:1.4}.map-tip b{font-size:.8125rem}.map-tip-go{min-height:32px;margin-top:2px}
.map-i text{font-size:19px}.map-i text.sea{font-size:17px}.map-i .hotel text{font-size:21px}.map-i .hotel text.sub{font-size:17px}
.map-k text.place{font-size:12px}.map-k .hotel text{font-size:15px}
}
.map-i text,.map-i .mp{transition:opacity .25s}.map.z .map-i text,.map.z .map-i .mp{opacity:0}
@media (max-width:600px){.map.z .map-ctl{left:auto;bottom:auto;top:10px;right:10px}}