/*
Theme Name: Kyon
Theme URI: https://kyonsuites.com
Author: PLATEAU
Author URI: https://plateaustudio.uk
Description: Kyon · rooms above the sea on Kythnos. A Dimi Cosmos project.
Version: 0.1.1
Requires at least: 6.4
Requires PHP: 8.1
Text Domain: kyon
*/

@font-face{font-family:"Instrument Sans";src:url(assets/fonts/instrument-sans-latin.woff2) format("woff2");font-weight:400 700;font-display:swap;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:"Instrument Sans";src:url(assets/fonts/instrument-sans-latin-ext.woff2) format("woff2");font-weight:400 700;font-display:swap;unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+1E00-1E9F,U+2020,U+20A0-20AB,U+20AD-20C4,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:"Instrument Serif";src:url(assets/fonts/instrument-serif-latin.woff2) format("woff2");font-weight:400;font-style:normal;font-display:swap;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:"Instrument Serif";src:url(assets/fonts/instrument-serif-latin-ext.woff2) format("woff2");font-weight:400;font-style:normal;font-display:swap;unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+1E00-1E9F,U+2020,U+20A0-20AB,U+20AD-20C4,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:"Instrument Serif";src:url(assets/fonts/instrument-serif-italic-latin.woff2) format("woff2");font-weight:400;font-style:italic;font-display:swap;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:"Instrument Serif";src:url(assets/fonts/instrument-serif-italic-latin-ext.woff2) format("woff2");font-weight:400;font-style:italic;font-display:swap;unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+1E00-1E9F,U+2020,U+20A0-20AB,U+20AD-20C4,U+2113,U+2C60-2C7F,U+A720-A7FF}

:root{
  --olive:#5C6339; --ink:#2B2E1E; --body:#4A4C3C; --sage:#7C8A55;
  --cream:#FBF3D0; --paper:#FFFDF7; --sand:#F3ECDD; --line:#E3DCCB; --rose:#B3264A;
  --serif:"Instrument Serif",Georgia,serif; --sans:"Instrument Sans",system-ui,sans-serif;
  --m:40px; --gap:20px; --radius:6px;
  --h1:clamp(3.4rem,8vw,7rem); --h2:clamp(2.6rem,6vw,6rem); --h3:clamp(1.6rem,2.6vw,2.6rem);
}
@media (max-width:760px){:root{--m:20px;--gap:12px}}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
html,body{overflow-x:clip}
body{margin:0;background:var(--paper);color:var(--body);font:400 1.0625rem/1.6 var(--sans);-webkit-font-smoothing:antialiased}
img,svg,video,iframe{display:block;max-width:100%;height:auto}
a{color:inherit;text-underline-offset:.2em}
h1,h2,h3,h4,p,ul,figure{margin:0}
h1,h2,h3{font-family:var(--serif);font-weight:400;color:var(--ink);line-height:1;letter-spacing:-.01em;text-wrap:balance}
p,li{text-wrap:pretty}
.visually-hidden{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
.skip{position:absolute;left:-999px}.skip:focus{left:var(--m);top:8px;z-index:99;background:var(--cream);padding:8px 12px}

.wrap{padding-inline:var(--m)}
.narrow{max-width:1130px;margin-inline:auto}
.eyebrow{font:500 .8125rem/1.2 var(--sans);letter-spacing:.18em;text-transform:uppercase;color:var(--sage);margin-bottom:12px}
.lede{font:400 1.1875rem/1.6 var(--sans);color:var(--body);max-width:36rem}
.italic,.note{font:italic 400 1.25rem/1.4 var(--serif);color:var(--olive)}
.section{padding-block:clamp(72px,10vw,140px)}
.section--sand{background:var(--sand)}
.section-head{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:end;gap:var(--gap);margin-bottom:clamp(24px,4vw,48px)}
.section-head h2{font-size:var(--h2)}
.link{font:500 1rem/1 var(--sans);color:var(--ink);text-decoration:none;white-space:nowrap}
.link:hover{text-decoration:underline}
.swipe{display:none;font:500 .8125rem var(--sans);color:var(--sage)}

/* buttons */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:.5em;min-height:50px;padding:0 28px;border-radius:100px;font:500 1rem/1 var(--sans);text-decoration:none;border:1.2px solid transparent;transition:background .2s,color .2s}
.btn--primary{background:var(--olive);color:var(--cream)}
.btn--primary:hover{background:var(--ink)}
.btn--light{background:var(--cream);color:var(--ink)}
.btn--light:hover{background:#fff}
.btn--outline{border-color:var(--ink);color:var(--ink)}
.btn--outline:hover{background:var(--ink);color:var(--cream)}
.btn--block{width:100%}

/* header */
.site-header{position:absolute;inset:0 0 auto 0;z-index:20;display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:var(--gap);padding:28px var(--m);color:var(--cream)}
.site-header--solid{position:relative;color:var(--ink);border-bottom:1px solid var(--line)}
.brand{display:block;width:150px;color:inherit}
.nav{display:flex;justify-content:center;gap:clamp(20px,3vw,48px);font:500 1rem var(--sans)}
.nav a{text-decoration:none}.nav a:hover{text-decoration:underline}
.header-end{display:flex;align-items:center;gap:24px;font:500 .875rem var(--sans)}
.site-header .btn{min-height:44px;padding:0 22px}
@media (max-width:760px){
  .site-header{grid-template-columns:1fr auto;padding:20px var(--m) 12px}
  .brand{width:108px}
  .lang{display:none}
  .site-header .btn{min-height:38px;padding:0 16px;font-size:.875rem}
  .nav{grid-column:1/-1;grid-row:2;justify-content:space-between;gap:0;font-size:.9375rem}
}

/* hero */
.hero{position:relative;min-height:min(100svh,900px);display:flex;align-items:end;color:var(--cream);background:var(--ink)}
.hero__media{position:absolute;inset:0}
.hero__media img{width:100%;height:100%;object-fit:cover}
.hero__media::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(0,0,0,.25) 0,rgba(0,0,0,0) 30%,rgba(0,0,0,.55) 100%)}
.hero__body{position:relative;padding:0 var(--m) clamp(40px,6vw,72px);max-width:1000px}
.hero .eyebrow{color:var(--cream)}
.hero h1{font-size:var(--h1);color:var(--cream);margin-bottom:24px}
.hero .lede{color:var(--cream);margin-bottom:32px}
.hero__cta{display:flex;flex-wrap:wrap;align-items:center;gap:20px}
.hero__cta small{font-size:.9375rem;opacity:.85}
.earlybird{padding:24px var(--m);font:italic 400 1.25rem var(--serif);color:var(--olive);border-bottom:1px solid var(--line)}

/* intro */
.intro{display:grid;grid-template-columns:minmax(0,560px) minmax(0,640px);justify-content:space-between;gap:var(--gap);padding-inline:max(var(--m),calc((100% - 1290px)/2))}
.intro h2{font-size:clamp(2.4rem,5vw,4rem);margin-bottom:56px}
.intro .sign{font:italic 400 2rem var(--serif);color:var(--olive);margin-top:56px}
.intro figure img{width:100%;aspect-ratio:640/680;object-fit:cover;border-radius:var(--radius)}
@media (max-width:900px){.intro{grid-template-columns:1fr}.intro h2{margin-bottom:24px}.intro .sign{margin-top:24px}}

/* carousels */
.track{display:grid;grid-auto-flow:column;gap:var(--gap);overflow-x:auto;scroll-snap-type:x mandatory;scroll-padding-inline:var(--m);scrollbar-width:none;padding-inline:var(--m);margin-inline:calc(var(--m)*-1);overscroll-behavior-x:contain}
.track::-webkit-scrollbar{display:none}
.track>*{scroll-snap-align:start}
.track--5{grid-auto-columns:calc((100% - 4*var(--gap))/5)}
.track--4{grid-auto-columns:calc((100% - 3*var(--gap))/4)}
.track--3{grid-auto-columns:calc((100% - 2*var(--gap))/3)}
@media (max-width:760px){
  .swipe{display:inline}
  .track--5,.track--4{grid-auto-columns:64%}
  .track--3{grid-auto-columns:80%}
}

/* walkthrough cards */
.walk{position:relative;display:block;aspect-ratio:9/16;border-radius:var(--radius);overflow:hidden;color:var(--cream);text-decoration:none;background:var(--line)}
.walk img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:transform .6s}
.walk:hover img{transform:scale(1.03)}
.walk::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(0,0,0,0) 55%,rgba(0,0,0,.55))}
.walk__play{position:absolute;z-index:1;left:50%;top:50%;width:56px;height:56px;margin:-28px 0 0 -28px}
.walk__meta{position:absolute;z-index:1;left:16px;right:16px;bottom:14px}
.walk__name{display:block;font:400 2rem/1 var(--serif)}
.walk__cta{font:500 .8125rem var(--sans)}

/* room cards */
.rooms-grid{display:grid;grid-template-columns:repeat(6,1fr);gap:var(--gap)}
.rooms-grid .room-card{grid-column:span 2}
.rooms-grid .room-card:nth-child(4),.rooms-grid .room-card:nth-child(5){grid-column:span 3}
.room-card{position:relative;display:block;text-decoration:none;color:inherit}
.room-card__img{display:block;aspect-ratio:440/560;border-radius:var(--radius);overflow:hidden;background:var(--line)}
.rooms-grid .room-card:nth-child(n+4) .room-card__img{aspect-ratio:670/560}
.room-card__img img{width:100%;height:100%;object-fit:cover;transition:transform .6s}
.room-card:hover .room-card__img img{transform:scale(1.03)}
.room-card__mark{position:absolute;top:16px;right:16px;width:64px}
.room-card__label{display:block;margin-top:18px;font:500 .8125rem var(--sans);letter-spacing:.18em;text-transform:uppercase;color:var(--sage)}
.room-card__name{display:block;font:400 2.6rem/1.1 var(--serif);color:var(--ink)}
.room-card__meta{display:block;font-size:.9375rem}
@media (max-width:760px){
  .rooms-grid{display:grid;grid-template-columns:none;grid-auto-flow:column;grid-auto-columns:78%;overflow-x:auto;scroll-snap-type:x mandatory;scroll-padding-inline:var(--m);scrollbar-width:none;padding-inline:var(--m);margin-inline:calc(var(--m)*-1)}
  .rooms-grid .room-card,.rooms-grid .room-card:nth-child(n){grid-column:auto;scroll-snap-align:start}
  .rooms-grid .room-card:nth-child(n+4) .room-card__img{aspect-ratio:440/560}
  .room-card__mark{width:40px;top:12px;right:12px}
}

/* built */
.built{display:grid;grid-template-columns:minmax(0,555px) 1fr 1fr;gap:var(--gap);padding-inline:max(var(--m),calc((100% - 1290px)/2))}
.built h2{font-size:clamp(2.2rem,4vw,3.6rem);margin-bottom:56px}
.built figure img{aspect-ratio:325/432;object-fit:cover;border-radius:var(--radius);width:100%}
.built figcaption{margin-top:12px;font:400 1.375rem var(--serif);color:var(--ink)}
@media (max-width:900px){.built{grid-template-columns:1fr 1fr}.built>div{grid-column:1/-1}.built h2{margin-bottom:24px}}

/* experiences */
.pill{display:inline-block;padding:7px 14px;border-radius:100px;background:var(--olive);color:var(--cream);font:500 .75rem var(--sans);letter-spacing:.18em;vertical-align:middle}
.exp-head{display:flex;flex-wrap:wrap;align-items:center;gap:20px}
.exp img{aspect-ratio:325/406;object-fit:cover;border-radius:var(--radius);width:100%}
.exp h3{font-size:2rem;margin-top:20px}
.exp p{font-size:.9375rem}

/* island */
.island{position:relative;min-height:760px;display:grid;grid-template-columns:1fr minmax(0,555px);align-items:end;gap:var(--gap);padding:var(--m)}
.island>img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.island .card{position:relative;background:rgba(255,253,247,.9);border-radius:var(--radius);padding:40px}
.island .card h2{font-size:2.5rem;margin-bottom:24px}
.map{position:relative;background:rgba(243,236,221,.9);border-radius:var(--radius);padding:24px;color:var(--olive)}
.map svg{width:100%;height:auto}
.map .lbl{font:500 15px var(--sans);fill:var(--ink)}
.map .kyon{font:italic 400 20px var(--serif);fill:var(--ink)}
@media (max-width:900px){.island{grid-template-columns:1fr;min-height:0;padding-top:320px}}

/* review */
.review{text-align:center;padding-inline:var(--m)}
.review blockquote{margin:0 auto;max-width:900px;font:italic 400 clamp(1.8rem,3.4vw,2.9rem)/1.15 var(--serif);color:var(--ink)}
.review cite{display:block;margin-top:32px;font:400 .875rem var(--sans);font-style:normal}

/* walkthrough section spacing */
.walkthrough .note{margin-top:20px}

/* room page */
.crumb{padding:24px var(--m) 18px;font-size:.875rem}
.crumb a{text-decoration:none}
.gallery-hero{display:grid;grid-template-columns:2fr 1fr;grid-template-rows:1fr 1fr;gap:var(--gap);padding-inline:var(--m);height:min(62vw,620px)}
.gallery-hero img{width:100%;height:100%;object-fit:cover;border-radius:var(--radius)}
.gallery-hero img:first-child{grid-row:1/3}
.room-top{display:grid;grid-template-columns:minmax(0,670px) minmax(0,440px);justify-content:space-between;gap:var(--gap);padding:70px var(--m) 0}
.room-title{display:flex;align-items:center;gap:20px}
.room-title h1{font-size:var(--h1)}
.room-title img{width:64px}
.named{font:italic 400 1.75rem/1.3 var(--serif);color:var(--olive);margin:12px 0 24px}
.specs{display:grid;grid-template-columns:1fr 1fr;column-gap:var(--gap);margin-top:56px}
.specs div{border-top:1px solid var(--line);padding:12px 0}
.specs dt{font:500 .75rem var(--sans);letter-spacing:.18em;text-transform:uppercase;color:var(--sage)}
.specs dd{margin:4px 0 0;color:var(--ink)}
.amenities{columns:3;column-gap:var(--gap);padding:0;list-style:none;margin-top:16px}
.amenities li::before{content:"· "}
.book-box .btn{width:100%}
.book-box p{margin-top:14px;font-size:.9375rem}
.book-box .note{font-size:1.25rem}
.room-content{padding-inline:var(--m)}
.room-content .wp-block-gallery,.room-content .wp-block-image{margin-block:var(--gap)}
.room-content img{border-radius:var(--radius)}
.plan{margin:var(--m);background:var(--cream);border-radius:var(--radius);aspect-ratio:1360/560;display:grid;place-items:center;text-align:center;padding:24px}
.good{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--gap)}
.good h3{font:500 1.125rem var(--sans);color:var(--ink);margin-bottom:8px}
.sticky-book{display:none}
@media (max-width:900px){
  .gallery-hero{grid-template-columns:1fr;grid-template-rows:auto;height:auto;padding:0}
  .gallery-hero img{border-radius:0;aspect-ratio:390/460}.gallery-hero img:not(:first-child){display:none}
  .room-top{grid-template-columns:1fr;padding-top:32px}
  .room-title img{width:40px}
  .amenities{columns:2}
  .good{grid-template-columns:1fr}
  .book-box{display:none}
  .sticky-book{display:flex;position:sticky;bottom:0;z-index:30;justify-content:space-between;align-items:center;padding:12px var(--m);background:var(--paper);border-top:1px solid var(--line)}
}

/* footer */
.site-footer{background:var(--olive);color:var(--cream);padding:90px var(--m) 32px}
.site-footer a{text-decoration:none}.site-footer a:hover{text-decoration:underline}
.footer-grid{display:grid;grid-template-columns:1.6fr 1fr 1fr auto;gap:var(--gap);align-items:start}
.footer-logo{width:358px;max-width:100%;color:var(--cream)}
.footer-grid ul{list-style:none;padding:0;display:grid;gap:12px}
.footer-base{display:flex;flex-wrap:wrap;justify-content:space-between;gap:12px;margin-top:80px;font-size:.875rem}
.footer-base .endorse{font:italic 400 1.5rem var(--serif)}
.footer-base .credit{opacity:.7}
@media (max-width:900px){.footer-grid{grid-template-columns:1fr}.footer-logo{width:214px}.footer-base{margin-top:40px;flex-direction:column}}

/* generic pages */
.page-head{padding:120px var(--m) 40px}
.page-head h1{font-size:var(--h2)}
.entry{padding:0 var(--m) 120px;max-width:820px}
.entry>*+*{margin-top:1.2em}
.entry h2{font-size:2.4rem;margin-top:1.6em}