/* Ikos Residence: one shared stylesheet. Light mode only (D8). Design: direction B (D10). */

@font-face{font-family:Commissioner;font-style:normal;font-weight:300 400;font-display:swap;src:url(/assets/fonts/commissioner-latin.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:300 400;font-display:swap;src:url(/assets/fonts/commissioner-latin-ext.woff2) format("woff2");unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C4,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:Commissioner;font-style:normal;font-weight:300 400;font-display:swap;src:url(/assets/fonts/commissioner-greek.woff2) format("woff2");unicode-range:U+0370-0377,U+037A-037F,U+0384-038A,U+038C,U+038E-03A1,U+03A3-03FF}

/* Stand-in while Commissioner loads: Arial scaled to Commissioner's width and line metrics, so the
   swap does not move anything (measured from the font files: width 101.1%, ascent 100.6%,
   descent 20.4%). */
@font-face{font-family:"Commissioner Fallback";src:local("Arial"),local("ArialMT"),local("Helvetica");
  size-adjust:101.1%;ascent-override:100.6%;descent-override:20.4%;line-gap-override:0%}

:root{
  color-scheme:light;
  --bg:#eceeed;
  --ink:#26302f;
  --soft:#5f6b68;      /* secondary text, 4.75:1 on --bg */
  --line:#c9d0ce;
  --s1:#b7c4c3;
  --s2:#8fa3a3;
  --sand:#baa78b;      /* logo color, for hairlines and the leaf */
  --sand-ink:#76644a;  /* darker sand for small text, 4.88:1 on --bg */
  --todo:#f3e9c0;
  --todo-ink:#5a4a10;
  --gap:clamp(64px,9vw,96px);
  --measure:46ch;
}
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{margin:0;background:var(--bg);color:var(--ink);font:300 18px/1.8 Commissioner,"Commissioner Fallback",system-ui,sans-serif;text-align:center;padding-bottom:env(safe-area-inset-bottom,0px)}
img{display:block;max-width:100%;height:auto}
a{color:inherit;text-decoration-thickness:1px;text-underline-offset:6px}
a:hover{text-decoration-thickness:2px}
:focus-visible{outline:2px solid currentColor;outline-offset:4px}
h1,h2,h3{font-weight:300;line-height:1.18;margin:0}
h1{font-size:clamp(32px,5vw,56px);max-width:18ch;margin:0 auto}
h2{font-size:clamp(24px,3.2vw,34px);margin-bottom:14px}
h3{font-weight:400;font-size:18px;margin-bottom:4px}
p{margin:0 auto 16px;max-width:var(--measure)}
.soft{color:var(--soft)}
.todo{background:var(--todo);color:var(--todo-ink);padding:0 5px;font-size:.88em}
.skip{position:absolute;left:12px;top:-60px;z-index:50;background:var(--ink);color:var(--bg);padding:8px 14px}
.skip:focus{top:12px}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

/* Header */
.site{position:relative;z-index:5;padding:calc(22px + env(safe-area-inset-top,0px)) 20px 14px}
.logo{display:inline-block}
.logo-full{width:auto;height:clamp(96px,14vw,132px)}  /* same on every page, with or without a hero photo */
.menu{display:flex;justify-content:center;align-items:center;gap:10px clamp(16px,4vw,38px);flex-wrap:wrap;margin:14px 0 0;padding:0;list-style:none;font-size:12px;font-weight:400;letter-spacing:.2em;text-transform:uppercase;color:var(--soft)}
.menu a{text-decoration:none;display:inline-block;padding:6px 0}
.menu a:hover,.menu a[aria-current="page"]{color:var(--ink);text-decoration:underline}
.lang [aria-current="true"]{text-decoration:underline;text-underline-offset:6px}
.lang a{color:inherit}
.over-photo .site{position:absolute;inset:0 0 auto;color:#fff;text-shadow:0 1px 10px rgba(0,0,0,.45)}
.over-photo .logo-full{filter:drop-shadow(0 1px 8px rgba(0,0,0,.35))}
.over-photo .menu,.over-photo .menu a:hover,.over-photo .menu a[aria-current="page"]{color:#fff}

/* Slim bar: after scrolling past the top, the header becomes a light bar that slides away while
   reading and returns when scrolling up (site.js adds .stuck and .show). */
.logo-leaf,.bar-cta,.menu-btn,.menu-extra,.cta-short{display:none}
html{scroll-padding-top:80px}
.site.stuck{position:fixed;inset:0 0 auto;z-index:30;display:flex;align-items:center;justify-content:space-between;gap:24px;
  padding:calc(10px + env(safe-area-inset-top,0px)) clamp(20px,4vw,48px) 10px;color:var(--ink);text-shadow:none;
  background:rgba(236,238,237,.9);-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);border-bottom:1px solid var(--line);
  transform:translate3d(0,-105%,0);transition:transform .6s cubic-bezier(.16,1,.3,1)}
.site.stuck.show{transform:none}
/* the large header fades softly back into place when returning to the top */
.site.returning{animation:headIn .9s cubic-bezier(.16,1,.3,1) both}
@keyframes headIn{from{opacity:0;transform:translate3d(0,-14px,0)}to{opacity:1;transform:none}}
.site.stuck .logo-full{display:none}
.site.stuck .logo-leaf{display:block;width:auto;height:36px}
.site.stuck .menu,.over-photo .site.stuck .menu{margin:0;gap:0 clamp(16px,2.6vw,32px);color:var(--soft)}
.over-photo .site.stuck .menu a:hover,.over-photo .site.stuck .menu a[aria-current="page"]{color:var(--ink)}
.site.stuck .bar-cta{display:inline-block;font-size:12px;font-weight:400;letter-spacing:.2em;text-transform:uppercase;text-decoration:none;
  border:1px solid var(--ink);padding:11px 20px;transition:background .3s,color .3s}
.site.stuck .bar-cta:hover{background:var(--ink);color:var(--bg)}
.menu-btn{height:44px;padding:0 0 0 6px;border:0;background:transparent;color:inherit;cursor:pointer;align-items:center;gap:14px;
  font:400 11px/1 Commissioner,"Commissioner Fallback",system-ui,sans-serif;letter-spacing:.28em;text-transform:uppercase}
.menu-word{transition:opacity .3s}
.menu-lines{display:flex;flex-direction:column;justify-content:center;gap:8px;width:26px;height:44px}
.menu-lines span{display:block;width:26px;height:1px;background:currentColor;transition:transform .4s cubic-bezier(.16,1,.3,1)}
.menu-btn[aria-expanded="true"] .menu-lines span:first-child{transform:translateY(4.5px) rotate(45deg)}
.menu-btn[aria-expanded="true"] .menu-lines span:last-child{transform:translateY(-4.5px) rotate(-45deg)}
.menu-btn[aria-expanded="true"] .menu-word{opacity:0}

/* Phones and narrow tablets: the bar holds the leaf and a menu button; the menu opens as a calm
   full-screen panel with numbered links, the language switch and Request to book. */
@media (max-width:859px){
  .site.stuck nav{display:none}
  .site.stuck .menu-btn{display:flex}
  .site a,.site button{-webkit-tap-highlight-color:transparent}  /* no grey flash on tap */
  /* phone bar: Reserve on the left, the leaf in the middle, the menu on the right */
  .site.stuck{padding-left:24px;padding-right:24px}
  .site.stuck .logo{position:absolute;left:50%;top:calc(50% + env(safe-area-inset-top,0px) / 2);transform:translate(-50%,-50%)}
  /* on phones Reserve is a plain underlined word, no box */
  .site.stuck .bar-cta{font-size:11px;letter-spacing:.24em;padding:12px 0;border:0;text-decoration:underline;text-underline-offset:6px;text-decoration-thickness:1px}
  .site.stuck .bar-cta:hover{background:transparent;color:inherit;text-decoration-thickness:2px}
  .site.stuck .cta-long{display:none}
  .site.stuck .cta-short{display:inline}
  .menu-open,.menu-open body{overflow:hidden}
  /* the panel unrolls downwards from the bar like a curtain, and rolls back up on closing */
  .menu-open .site.stuck{display:block;inset:0;height:100vh;height:100dvh;padding:0;overflow-y:auto;transform:none;
    -webkit-backdrop-filter:none;backdrop-filter:none;background:var(--bg);border:0;
    clip-path:inset(0 0 0 0);transition:clip-path .75s cubic-bezier(.77,0,.18,1)}
  .menu-opening .site.stuck,.menu-closing .site.stuck{clip-path:inset(0 0 calc(100% - 64px - env(safe-area-inset-top,0px)) 0)}
  .menu-closing .site.stuck{transition-duration:.6s}
  /* logo and button keep exactly their place from the bar */
  .menu-open .site.stuck .logo{top:calc(32px + env(safe-area-inset-top,0px))}
  .menu-open .site.stuck .bar-cta{position:absolute;left:24px;top:calc(32px + env(safe-area-inset-top,0px));transform:translateY(-50%)}
  .menu-open .site.stuck .menu-btn{position:absolute;top:calc(10px + env(safe-area-inset-top,0px));right:24px}
  .menu-open .site.stuck nav{display:flex;flex-direction:column;justify-content:center;align-items:center;min-height:100%;padding:96px 24px 48px}
  /* the entries rise in one after another; on closing they fade out first */
  .menu-open .site .menu li,.menu-open .site .menu-extra{animation:menuIn .9s cubic-bezier(.16,1,.3,1) both}
  .menu-open .site .menu li:nth-child(1){animation-delay:.25s}
  .menu-open .site .menu li:nth-child(2){animation-delay:.32s}
  .menu-open .site .menu li:nth-child(3){animation-delay:.39s}
  .menu-open .site .menu li:nth-child(4){animation-delay:.46s}
  .menu-open .site .menu-extra{animation-delay:.53s}
  .menu-closing .site.stuck nav{opacity:0;transition:opacity .25s ease}
  .menu-open .site .menu{flex-direction:column;gap:34px;font-size:16px;letter-spacing:.24em;color:var(--ink)}
  .menu-open .site .menu .lang{margin-top:6px;font-size:13px}
  .menu-open .site .menu-extra{display:block;margin-top:48px}
  .menu-open .site .menu-extra p{margin:26px 0 0;font-size:15px}
}
@keyframes menuIn{from{opacity:0;transform:translate3d(0,22px,0)}to{opacity:1;transform:none}}
@media (prefers-reduced-motion:reduce){.site.stuck,.menu-open .site.stuck,.menu-lines span,.menu-word{transition:none}.menu-open .site .menu li,.menu-open .site .menu-extra{animation:none}}

/* Photos */
.ph{position:relative;overflow:hidden;background:var(--s1)}
.ph img{width:100%;height:100%;object-fit:cover}
.drift img{transform:translate3d(0,var(--y,0px),0) scale(1.12);will-change:transform}
/* touch screens (phones, tablets): photos stay still and the bar is not blurred, both costly
   while the page is scrolling, especially in Safari on iPhone */
@media (hover:none),(pointer:coarse){
  .drift img{transform:none;will-change:auto}
  .site.stuck{-webkit-backdrop-filter:none;backdrop-filter:none;background:rgba(236,238,237,.97)}
}
.hero{height:clamp(240px,46vh,460px)}
.hero.full{height:100vh;height:100svh}  /* fills the whole screen (svh: the visible part on phones) */
/* very short screens (a phone turned sideways): smaller logo and title so they never overlap */
@media (max-height:520px){
  .full-hero .logo-full{height:60px}
  .full-hero .site{padding-top:12px}
  .full-hero .menu{margin-top:6px}
  .hero.full .title{bottom:8%}
  .hero.full .title h1{font-size:clamp(26px,4vw,36px)}
  .full-hero .hero.full .title::after{display:none}
}
.hero::after{content:"";position:absolute;inset:0;z-index:1;pointer-events:none;background:linear-gradient(rgba(20,30,30,.5),rgba(20,30,30,.08) 42%,rgba(20,30,30,.12) 60%,rgba(20,30,30,.5))}
.hero:not(.full)::after{background:linear-gradient(rgba(20,30,30,.7),rgba(20,30,30,.55) 36%,rgba(20,30,30,0) 82%)}
.hero .title{position:absolute;left:0;right:0;bottom:11%;z-index:3;color:#fff;padding:0 20px;text-shadow:0 1px 18px rgba(0,0,0,.25)}
.hero .title p{margin-top:14px;letter-spacing:.2em;text-transform:uppercase;font-size:13px;font-weight:400}

/* Sections */
.head{padding:var(--gap) 20px 0}
.head h1+p{margin-top:22px}
.sec{padding:var(--gap) 20px 0}
.lead{padding:var(--gap) 20px 0}
.tiles{display:grid;gap:40px;max-width:1120px;margin:var(--gap) auto 0;padding:0 20px}
@media(min-width:860px){.tiles{grid-template-columns:repeat(3,1fr);gap:28px}}
.tiles a{display:block;text-decoration:none}
.tiles .ph{aspect-ratio:4/3;margin-bottom:16px}
@media(min-width:860px){.tiles .ph{aspect-ratio:4/5}}
.tiles h2{font-weight:400;font-size:18px;line-height:1.18;margin-bottom:4px}
.tiles a:hover h2,.tiles a:focus-visible h2{text-decoration:underline;text-underline-offset:6px}
.tiles p{margin-bottom:0}
.tiles .no{margin:4px auto 12px}
.tiles a:nth-child(2){transition-delay:.12s}
.tiles a:nth-child(3){transition-delay:.24s}
.facts{list-style:none;margin:var(--gap) auto 0;padding:28px 20px;max-width:820px;border-block:1px solid var(--line);color:var(--soft);display:flex;flex-wrap:wrap;justify-content:center;gap:6px 0}
.facts{flex-direction:column}
@media(min-width:700px){.facts{flex-direction:row}.facts li+li::before{content:"";display:inline-block;width:5px;height:5px;margin:0 18px 3px;border-radius:50%;background:var(--sand)}}
/* Guest reviews: three quiet columns on desktop, stacked on phones */
.reviews{display:grid;gap:56px;max-width:1120px;margin:34px auto 0;padding:0 20px;text-align:left}
@media(min-width:960px){.reviews{grid-template-columns:repeat(3,1fr);gap:48px}}
.review{margin:0;position:relative;padding-top:34px;border-top:1px solid var(--line)}
.review .qm{position:absolute;top:-6px;left:0;font-size:64px;line-height:1;color:var(--sand);font-weight:300}
.review blockquote{margin:0}
.review blockquote p{max-width:none;margin:0;font-size:16px;line-height:1.85;color:var(--ink)}
.review figcaption{margin-top:20px;font-size:13px;letter-spacing:.04em;color:var(--soft)}
.review .who{display:block;font-size:11px;font-weight:400;letter-spacing:.28em;text-transform:uppercase;color:var(--sand-ink);margin-bottom:2px}
.reviews .review:nth-child(2){transition-delay:.12s}
.reviews .review:nth-child(3){transition-delay:.24s}
.rv-nav,.rv-hint{display:none}
/* Narrower screens: a slider with exactly one review in view. Swipe, drag with the mouse, use
   the arrows, the dots or the keyboard; nothing moves on its own. */
@media(max-width:959px){
  .reviews{grid-auto-flow:column;grid-auto-columns:100%;gap:0;max-width:var(--measure);
    margin:34px auto 0;padding:0;width:100%;
    overflow-x:auto;overscroll-behavior-x:contain;scroll-snap-type:x mandatory;
    -webkit-overflow-scrolling:touch;scrollbar-width:none;cursor:grab}
  .reviews::-webkit-scrollbar{display:none}
  /* one steady height (the longest review), so the arrows and dots never move */
  .review{scroll-snap-align:start;scroll-snap-stop:always}
  .reviews.dragging{scroll-snap-type:none;cursor:grabbing;user-select:none}
  .reviews:focus-visible{outline:2px solid var(--ink);outline-offset:4px}
  /* every card is visible in the slider (the fade-in only works for vertical scrolling) */
  .reveal-on .reviews .review{opacity:1;transform:none;transition:none}
  .js .rv-nav{display:flex;justify-content:center;align-items:center;gap:10px;margin-top:26px}
  .rv-dots{display:flex;gap:2px}
  .rv-dots button{width:28px;height:28px;padding:0;border:0;background:transparent;cursor:pointer;position:relative}
  .rv-dots button::after{content:"";position:absolute;inset:0;margin:auto;width:7px;height:7px;border-radius:50%;background:var(--line);transition:background .3s,transform .3s}
  .rv-dots button[aria-current="true"]::after{background:var(--sand);transform:scale(1.25)}
  .rv-arrow{width:44px;height:44px;border:1px solid var(--line);border-radius:50%;background:transparent;color:var(--sand-ink);
    font:300 18px/1 Commissioner,"Commissioner Fallback",system-ui,sans-serif;cursor:pointer;transition:border-color .3s,color .3s,opacity .3s}
  .rv-arrow:hover:not(:disabled){border-color:var(--sand);color:var(--ink)}
  .rv-arrow:disabled{opacity:.3;cursor:default}
  /* the small invitation to slide: a label under the controls, gone after the first slide */
  .js .rv-hint{display:block;margin:12px auto 0;font-size:11px;font-weight:400;letter-spacing:.28em;text-transform:uppercase;
    color:var(--sand-ink);transition:opacity .6s}
  .rv-hint.used{opacity:0}
}
/* the next arrow nudges twice when the reviews first come into view */
@media (max-width:959px) and (prefers-reduced-motion:no-preference){
  .rv-next.nudge{animation:nudge 1.4s ease-in-out 2}
}
@keyframes nudge{0%,100%{transform:translateX(0)}40%{transform:translateX(7px)}60%{transform:translateX(2px)}}

/* Apartment page: photo and text rows, alternating sides */
.no{display:flex;align-items:center;justify-content:center;gap:14px;margin:0 auto 18px;font-size:12px;font-weight:400;letter-spacing:.3em;color:var(--sand-ink)}
.no::after{content:"";width:44px;height:1px;background:var(--sand)}
.leaf{width:38px;height:56px;margin:0 auto 26px}
.hero.full .title::after{content:"";display:block;width:1px;height:54px;margin:26px auto 0;background:rgba(255,255,255,.75)}
.row{display:grid;margin-top:var(--gap);align-items:center}
.row .ph{aspect-ratio:4/3}
.row .txt{padding:34px 20px 0}
.row .txt p:last-child{margin-bottom:0}
@media(min-width:860px){
  .row{grid-template-columns:56fr 44fr;margin-top:clamp(56px,6vw,96px)}
  .row .ph{aspect-ratio:auto;height:clamp(420px,72vh,720px)}
  .row .txt{padding:0 clamp(32px,6vw,96px);text-align:left}
  .row .txt p{margin-left:0;max-width:34ch}
  .row .txt .no{justify-content:flex-start}
  .row.flip{grid-template-columns:44fr 56fr}
  .row.flip .ph{order:2}
}
.more{margin-top:26px}
.faq{max-width:var(--measure);margin:10px auto 0}
.q{margin-bottom:26px}
.q p{color:var(--soft);margin-bottom:0}
.updated{margin-top:28px;font-size:15px;color:var(--soft)}

/* Gallery */
.room{padding:var(--gap) 20px 0}
.room h2{margin-bottom:28px}
.grid{list-style:none;margin:0 auto;padding:0;max-width:1280px;display:grid;gap:10px;grid-template-columns:1fr}
@media(min-width:600px) and (max-width:999px){.grid{grid-template-columns:repeat(2,1fr)}.w2{grid-column:span 2}.w2 .gi{aspect-ratio:2/1}}
@media(min-width:1000px){.grid{grid-template-columns:repeat(3,1fr);gap:14px}.w3{grid-column:span 2}.w3 .gi{aspect-ratio:auto;height:100%;position:relative}.w3 .gi img{position:absolute;inset:0}}
.gi{display:block;overflow:hidden;aspect-ratio:3/2;background:var(--s1)}
.gi img{width:100%;height:100%;object-fit:cover;transition:transform 1.2s ease,opacity .4s}
.gi:hover img{transform:scale(1.03)}
.gi:focus-visible{outline-offset:3px}

.viewer{width:100vw;height:100dvh;max-width:none;max-height:none;margin:0;padding:0;border:0;background:rgba(236,238,237,.97);color:var(--ink)}
.viewer[open]{display:flex;align-items:center;justify-content:center}
.viewer::backdrop{background:rgba(236,238,237,.97)}
.viewer figure{margin:0;padding:64px 12px 20px;width:100%;height:100%;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:14px;touch-action:pan-y}
.viewer img{max-width:min(100%,1600px);max-height:calc(100dvh - 150px);width:auto;height:auto;object-fit:contain;user-select:none;-webkit-user-drag:none}
.viewer figcaption{font-size:15px;color:var(--soft);max-width:60ch}
.viewer .v-count{color:var(--sand-ink);letter-spacing:.2em;font-size:12px}
.viewer button{position:absolute;z-index:2;font:300 34px/1 Commissioner,"Commissioner Fallback",system-ui,sans-serif;color:var(--ink);background:transparent;border:0;width:56px;height:56px;cursor:pointer}
.viewer button:hover{color:var(--sand-ink)}
.v-close{top:calc(8px + env(safe-area-inset-top,0px));right:8px}
.v-prev{left:4px;top:50%;transform:translateY(-50%)}
.v-next{right:4px;top:50%;transform:translateY(-50%)}
@media(max-width:700px){.v-prev,.v-next{top:auto;bottom:calc(6px + env(safe-area-inset-bottom,0px));transform:none}.viewer figure{padding-bottom:70px}}
@media (prefers-reduced-motion:no-preference){.viewer[open] img{animation:fade .5s ease both}}
@media (prefers-reduced-motion:reduce){.gi img{transition:none}.gi:hover img{transform:none}}

/* Contact: Request to book form. Bottom-line fields, no boxes (Appendix I) */
.rq{max-width:440px;margin:34px auto 0;text-align:left;display:grid;gap:22px}
.rq .f{display:block}
.rq label{display:block;font-size:14px;color:var(--soft)}
.rq input,.rq select,.rq textarea{display:block;width:100%;font:inherit;color:var(--ink);background:transparent;border:0;border-bottom:1px solid var(--soft);border-radius:0;padding:8px 0;margin-top:2px;min-height:44px}
.rq select{appearance:none;background:linear-gradient(45deg,transparent 50%,var(--soft) 50%) right 6px center/6px 6px no-repeat,linear-gradient(-45deg,transparent 50%,var(--soft) 50%) right 0 center/6px 6px no-repeat;padding-right:24px}
.rq textarea{resize:vertical;min-height:110px}
.rq input:focus,.rq select:focus,.rq textarea:focus{outline:none;border-bottom:2px solid var(--ink);padding-bottom:7px}
.rq [aria-invalid="true"]{border-bottom-color:#9b2c1f}
.rq .err{display:block;margin-top:4px;font-size:14px;color:#9b2c1f}
.rq .err:empty{display:none}
.rq .two{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:20px}
.rq input{min-width:0}
@media(max-width:360px){.rq .two{grid-template-columns:1fr}}
.rq .ck{display:grid;grid-template-columns:auto 1fr;gap:4px 12px;align-items:start}
.rq .ck input{width:22px;height:22px;min-height:0;margin:4px 0 0;accent-color:var(--ink)}
.rq .ck .err{grid-column:1/-1}
.rq button{justify-self:center;margin-top:6px;font:400 13px/1 Commissioner,"Commissioner Fallback",system-ui,sans-serif;letter-spacing:.2em;text-transform:uppercase;color:var(--ink);background:transparent;border:1px solid var(--ink);padding:16px 40px;cursor:pointer;transition:background .3s,color .3s}
.rq button:hover{background:var(--ink);color:var(--bg)}
.rq button:disabled{opacity:.5;cursor:wait}
.rq-msg{text-align:center;margin:0;min-height:1.8em}
.rq .small{text-align:center;font-size:14px;margin:0}
.hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.notice{display:none;max-width:440px;margin:26px auto 0;padding:16px 0;border-block:1px solid var(--sand);color:var(--ink)}
.notice:target{display:block}

/* Privacy: long text reads better left-aligned */
.legal{max-width:640px;margin:0 auto;padding:var(--gap) 20px 0;text-align:left}
.legal section{margin-bottom:44px}
.legal h2{font-size:clamp(22px,2.6vw,28px)}
.legal p{max-width:none;margin-left:0;color:var(--soft)}
.legal a{color:var(--ink)}
.legal .updated{text-align:center}

/* Reserve and footer */
.links{display:flex;justify-content:center;gap:10px 38px;flex-wrap:wrap;margin:18px 0 0}
.links a{padding:4px 0}
/* Reserve: leaf, small label, heading, one outlined button, then the direct links */
.reserve{position:relative;margin:var(--gap) auto 0;padding:72px 20px 8px;max-width:820px}
.reserve::before{content:"";position:absolute;top:0;left:20px;right:20px;height:1px;background:linear-gradient(90deg,transparent,var(--line) 20%,var(--line) 80%,transparent)}
.facts+.reserve::before{display:none}
.facts+.reserve{margin-top:0}
.eyebrow{font-size:11px;font-weight:400;letter-spacing:.28em;text-transform:uppercase;color:var(--sand-ink);margin:0 auto 14px}
.reserve h2{font-size:clamp(28px,4vw,42px);margin-bottom:16px}
.btn{display:inline-block;margin-top:18px;font:400 13px/1 Commissioner,"Commissioner Fallback",system-ui,sans-serif;letter-spacing:.2em;text-transform:uppercase;text-decoration:none;color:var(--ink);border:1px solid var(--ink);padding:18px 44px;transition:background .3s,color .3s}
.btn:hover{background:var(--ink);color:var(--bg)}
.reserve-alt{margin-top:44px}
.reserve-alt .eyebrow{margin-bottom:8px}
.reserve-alt p:last-child{margin:0 auto}
.dot{display:inline-block;width:5px;height:5px;margin:0 16px 3px;border-radius:50%;background:var(--sand)}
/* Footer: a slightly deeper band, logo, three small columns, and a quiet base line */
.foot{margin-top:var(--gap);background:#e5e8e7;color:#56625f;font-size:15px;line-height:1.9;position:relative}
.foot::before{content:"";position:absolute;top:0;left:50%;width:min(820px,calc(100% - 40px));height:1px;transform:translateX(-50%);background:linear-gradient(90deg,transparent,var(--sand),transparent)}
.foot-in{max-width:980px;margin:0 auto;padding:64px 20px calc(28px + env(safe-area-inset-bottom,0px))}
.foot p{max-width:none;margin:0}
.foot a{text-decoration-color:rgba(86,98,95,.45)}
.foot a:hover{color:var(--ink);text-decoration-color:var(--sand)}
.foot-logo{display:inline-block;margin-bottom:44px}
.foot-logo img{height:76px;width:auto}
.foot-cols{display:grid;gap:34px}
@media(min-width:700px){.foot-cols{grid-template-columns:repeat(3,1fr);gap:24px}}
.foot-h{font-size:11px;font-weight:400;letter-spacing:.28em;text-transform:uppercase;color:#6e5c42;margin-bottom:10px!important}
.foot-base{display:flex;flex-wrap:wrap;justify-content:center;gap:8px 28px;margin-top:56px;padding-top:22px;border-top:1px solid var(--line);font-size:13px;letter-spacing:.04em}
@media(min-width:700px){.foot-base{justify-content:space-between}}
.foot-top{text-decoration:none}
.foot-top:hover{text-decoration:underline}

/* Motion: soft fade on load, then reveals while scrolling (see site.js). Long, soft easing
   curves; off for reduced motion. */
@media (prefers-reduced-motion:no-preference){
  :root{--ease-out:cubic-bezier(.16,1,.3,1);--ease-curtain:cubic-bezier(.22,1,.36,1)}  /* both start quickly and settle softly */
  .js .fade{animation:fade 1.4s var(--ease-out) both}
  .js .fade.late{animation-delay:.3s}
  /* only hidden once site.js has confirmed it can reveal it again */
  .reveal-on .reveal{opacity:.01;transform:translate3d(0,26px,0);transition:opacity .8s var(--ease-out),transform 1s var(--ease-out)}
  .reveal-on .reveal.in{opacity:1;transform:none}
  /* photos: a curtain lifts from the bottom while the photo settles from a slight zoom */
  .reveal-on .rv-img{clip-path:inset(100% 0 0 0);transition:clip-path .95s var(--ease-curtain)}
  .reveal-on .rv-img.in{clip-path:inset(0 0 0 0)}
  .reveal-on .rv-img picture{transform:scale(1.12);transition:transform 1.4s var(--ease-out)}
  .reveal-on .rv-img.in picture{transform:none}
  .reveal-on .grid li.rv-img picture{transition-delay:inherit}
}
.ph picture,.gi picture{display:block;width:100%;height:100%}
@keyframes fade{from{opacity:.01}to{opacity:1}}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .drift img{transform:none!important;will-change:auto}
}

@media print{
  .skip,.menu,.reserve .links{display:none}
  .over-photo .site{position:static;color:var(--ink)}
  .hero::after{display:none}
  .hero .title{position:static;color:var(--ink);text-shadow:none;padding-top:20px}
  .hero{height:auto}
  .drift img{transform:none!important}
}