/* Template: small hotel / guesthouse. Mood: boutique Mediterranean, slow, warm. */
:root{
  --font-head:"Literata",Georgia,serif; --font-body:"Commissioner",system-ui,sans-serif;
  --bg:#F7F1E8; --surface:#FFFCF7; --surface-2:#EFE6D8; --text:#1E2A30; --muted:#5E6A6E; --line:#E3D7C5;
  --brand:#1D4E63; --brand-ink:#fff; --accent:#9A4424; --sand:#E9DCC7;
  --radius:4px; --radius-sm:3px; --head-weight:400; --head-tracking:-.015em;
  --shadow:0 2px 6px rgba(30,42,48,.05),0 18px 50px rgba(30,42,48,.10);
}
body{font-weight:350;letter-spacing:.005em}
h1,h2{font-weight:400}
.eyebrow{font:600 .74rem var(--font-body);letter-spacing:.22em;color:var(--accent)}
.btn{border-radius:2px;letter-spacing:.08em;text-transform:uppercase;font-size:.8rem;font-weight:700;padding:1.05em 1.8em}
.btn--sand{background:var(--sand);border-color:var(--sand);color:var(--text)}
.section{padding:120px 0}
@media (max-width:700px){.section{padding:76px 0}}
.rule{display:flex;align-items:center;gap:18px;color:var(--accent);font:600 .74rem var(--font-body);letter-spacing:.22em;text-transform:uppercase;margin-bottom:1.2rem}
.rule::after{content:"";flex:1;height:1px;background:var(--line);max-width:120px}

/* Header: transparent over the hero on the home page */
.site-header{background:rgba(247,241,232,.86)}
.brand{font-weight:500;font-size:1.35rem}
.brand small{letter-spacing:.24em}
.nav a{font-weight:500;font-size:.9rem}
.nav a[aria-current=page]{color:var(--text);box-shadow:inset 0 -2px 0 var(--accent)}

/* Hero */
.gh-hero{position:relative;min-height:min(92vh,860px);display:flex;align-items:flex-end;color:#fff;overflow:hidden;isolation:isolate}
.gh-hero>img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:-2;animation:kb 26s ease-out both}
@keyframes kb{from{transform:scale(1.12)}to{transform:scale(1)}}
.gh-hero::before{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(180deg,rgba(12,28,36,.15) 0%,rgba(12,28,36,.05) 35%,rgba(12,28,36,.72) 100%)}
.gh-hero .wrap{width:100%;padding-bottom:150px}
.gh-hero .eyebrow{color:#F3D9C6}
.gh-hero h1{color:#fff;font-size:clamp(2.8rem,7.2vw,6rem);line-height:1.02;max-width:12ch;margin-bottom:.3em}
.gh-hero p{font-size:1.2rem;max-width:32em;color:rgba(255,255,255,.9)}
.book-card{position:relative;z-index:3;margin:-96px auto 0;max-width:1080px;background:var(--surface);box-shadow:var(--shadow);display:grid;grid-template-columns:repeat(3,1fr) auto;align-items:stretch}
.book-card>div{padding:20px 24px;border-right:1px solid var(--line)}
.book-card label{display:block;font:700 .7rem var(--font-body);letter-spacing:.18em;text-transform:uppercase;color:var(--muted);margin-bottom:6px}
.book-card input,.book-card select{width:100%;border:0;background:transparent;font:500 1.05rem var(--font-body);color:var(--text);padding:2px 0}
.book-card input:focus,.book-card select:focus{outline:2px solid var(--brand);outline-offset:4px}
.book-card .btn{border-radius:0;height:100%;padding:0 2.2em;font-size:.82rem}
@media (max-width:820px){.book-card{grid-template-columns:1fr 1fr;margin:-70px 16px 0}.book-card>div:nth-child(2){border-right:0}.book-card>div{border-bottom:1px solid var(--line)}.book-card .btn{grid-column:1/-1;padding:1.2em}}
@media (prefers-reduced-motion:reduce){.gh-hero>img{animation:none}}

/* Intro statement */
.statement{display:grid;grid-template-columns:1.3fr 1fr;gap:80px;align-items:end}
.statement p.big{font:400 clamp(1.6rem,3vw,2.4rem)/1.32 var(--font-head);letter-spacing:-.01em;margin:0}
.stats{display:grid;grid-template-columns:repeat(3,1fr);gap:22px;border-top:1px solid var(--line);padding-top:26px}
.stats b{display:block;font:400 2.8rem/1 var(--font-head);color:var(--brand)}
.stats span{font-size:.85rem;color:var(--muted)}
@media (max-width:860px){.statement{grid-template-columns:1fr;gap:40px}}

/* Room cards */
.rooms{display:grid;grid-template-columns:repeat(3,1fr);gap:28px}
.room{display:flex;flex-direction:column;text-decoration:none;color:inherit}
.room .ph{overflow:hidden;aspect-ratio:3/4;margin-bottom:18px}
.room .ph img{width:100%;height:100%;object-fit:cover;transition:transform 1.2s cubic-bezier(.2,.7,.2,1)}
.room:hover .ph img{transform:scale(1.06)}
.room h3{font:400 1.6rem var(--font-head);margin-bottom:.25em}
.room .meta{font-size:.88rem;color:var(--muted);display:flex;gap:14px;flex-wrap:wrap}
.room .from{margin-top:14px;display:flex;justify-content:space-between;align-items:baseline;border-top:1px solid var(--line);padding-top:12px}
.room .from b{font:400 1.5rem var(--font-head);color:var(--brand)}
.room .from span{font:700 .72rem var(--font-body);letter-spacing:.16em;text-transform:uppercase;color:var(--accent)}
@media (max-width:900px){.rooms{grid-template-columns:1fr}.room .ph{aspect-ratio:4/3}}

/* Direct-booking band */
.direct{background:var(--brand);color:#fff;position:relative;overflow:hidden}
.direct h2{color:#fff}
.direct .lead{color:rgba(255,255,255,.8)}
.direct-grid{display:grid;grid-template-columns:1.1fr 1fr;gap:64px;align-items:center}
.vs{background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.18);padding:30px}
.vs-row{display:flex;justify-content:space-between;align-items:baseline;padding:14px 0;border-bottom:1px solid rgba(255,255,255,.14)}
.vs-row:last-child{border:0}
.vs-row s{color:rgba(255,255,255,.78)}
.vs-row b{font:400 1.7rem var(--font-head)}
.vs-row.save b{color:#F3D9C6}
.vs small{display:block;color:rgba(255,255,255,.78);font-size:.8rem;margin-top:10px}
@media (max-width:860px){.direct-grid{grid-template-columns:1fr;gap:36px}}

/* Mosaic gallery */
.mosaic{display:grid;grid-template-columns:repeat(6,1fr);grid-auto-rows:160px;gap:10px}
.mosaic img{width:100%;height:100%;object-fit:cover}
.mosaic .a{grid-column:span 3;grid-row:span 3}.mosaic .b{grid-column:span 3;grid-row:span 2}
.mosaic .c,.mosaic .d{grid-column:span 1;grid-row:span 1}
@media (max-width:760px){.mosaic{grid-template-columns:repeat(2,1fr);grid-auto-rows:130px}.mosaic .a,.mosaic .b,.mosaic .c,.mosaic .d{grid-column:span 1;grid-row:span 1}.mosaic .a{grid-column:span 2;grid-row:span 2}}

/* Reviews strip */
.reviews{display:grid;grid-auto-flow:column;grid-auto-columns:min(420px,85%);gap:22px;overflow-x:auto;scroll-snap-type:x mandatory;padding-bottom:16px}
.reviews figure{scroll-snap-align:start;margin:0;background:var(--surface);padding:34px;border:1px solid var(--line)}
.reviews blockquote{margin:0 0 20px;font:400 1.25rem/1.45 var(--font-head)}
.reviews figcaption{font-size:.88rem;color:var(--muted)}
.reviews figcaption b{color:var(--text);display:block}
.score{display:flex;align-items:baseline;gap:14px;margin-bottom:34px}
.score b{font:400 4.2rem/1 var(--font-head);color:var(--brand)}

/* Page header for inner pages */
.page-head{padding:96px 0 56px;border-bottom:1px solid var(--line)}
.page-head h1{font-size:clamp(2.6rem,6vw,4.8rem);max-width:14ch}
.page-head .lead{font-size:1.2rem}

/* Room detail */
.rd{display:grid;grid-template-columns:1.25fr 1fr;gap:64px;padding:96px 0;border-bottom:1px solid var(--line)}
.rd:nth-of-type(even) .rd-media{order:2}
.rd-media{display:grid;grid-template-columns:2fr 1fr;grid-template-rows:1fr 1fr;gap:10px;aspect-ratio:4/3}
.rd-media img{width:100%;height:100%;object-fit:cover}
.rd-media img:first-child{grid-row:span 2}
.chips{display:flex;flex-wrap:wrap;gap:8px;margin:18px 0}
.chips span{border:1px solid var(--line);padding:.35em .8em;font-size:.82rem;border-radius:999px;background:var(--surface)}
.amen{list-style:none;padding:0;margin:22px 0;display:grid;grid-template-columns:1fr 1fr;gap:10px 18px;font-size:.95rem}
.amen li{display:flex;align-items:center;gap:10px}
.amen svg{width:20px;height:20px;color:var(--brand);flex:none}
.rates{width:100%;border-collapse:collapse;margin:20px 0 26px;font-size:.95rem}
.rates td{padding:10px 0;border-bottom:1px solid var(--line)}
.rates td:last-child{text-align:right;font:400 1.2rem var(--font-head);color:var(--brand)}
@media (max-width:900px){.rd{grid-template-columns:1fr;gap:32px;padding:64px 0}.rd:nth-of-type(even) .rd-media{order:0}}

/* Area */
.places{display:grid;grid-template-columns:repeat(3,1fr);gap:28px}
.place img{aspect-ratio:4/3;object-fit:cover;width:100%;margin-bottom:14px}
.place h3{font:400 1.35rem var(--font-head);margin-bottom:.2em}
.place .dist{font:700 .72rem var(--font-body);letter-spacing:.16em;text-transform:uppercase;color:var(--accent)}
.place p{color:var(--muted);font-size:.95rem;margin:.4em 0 0}
.routes{width:100%;border-collapse:collapse}
.routes td{padding:16px 0;border-bottom:1px solid var(--line);vertical-align:top}
.routes td:first-child{font:400 1.2rem var(--font-head);width:40%}
.routes td:last-child{text-align:right;color:var(--muted)}
@media (max-width:900px){.places{grid-template-columns:1fr 1fr}}
@media (max-width:560px){.places{grid-template-columns:1fr}}

/* Booking page */
.bk{display:grid;grid-template-columns:1.5fr 1fr;gap:40px;align-items:start;padding:64px 0 120px}
.bk-step{background:var(--surface);border:1px solid var(--line);padding:30px;margin-bottom:22px}
.bk-step h2{font-size:1.5rem;display:flex;align-items:center;gap:14px;margin-bottom:22px}
.bk-step h2 i{font:700 .78rem var(--font-body);font-style:normal;width:28px;height:28px;border-radius:50%;display:grid;place-items:center;background:var(--brand);color:#fff}
.room-pick{display:grid;gap:12px}
.room-pick label{display:grid;grid-template-columns:96px 1fr auto;gap:16px;align-items:center;border:1.5px solid var(--line);padding:10px;cursor:pointer;transition:border-color .15s,background .15s}
.room-pick img{width:96px;height:72px;object-fit:cover}
.room-pick input{position:absolute;opacity:0}
.room-pick label:has(input:checked){border-color:var(--brand);background:color-mix(in srgb,var(--brand) 6%,var(--surface))}
.room-pick label:has(input:focus-visible){outline:3px solid var(--brand);outline-offset:2px}
.room-pick label:has(input:disabled){opacity:.45;cursor:not-allowed}
.room-pick b{font:400 1.15rem var(--font-head);display:block}
.room-pick small{color:var(--muted)}
.room-pick .rp-price{text-align:right;font:400 1.25rem var(--font-head);color:var(--brand);white-space:nowrap}
.room-pick .rp-price small{display:block;font:500 .74rem var(--font-body)}
.guests{display:flex;flex-wrap:wrap;gap:22px 40px}
.guests>div{display:flex;align-items:center;gap:14px}
.guests span{font-weight:600}
.guests small{display:block;color:var(--muted);font-weight:400}
.toggle{display:flex;align-items:center;gap:12px;margin-top:20px;cursor:pointer}
.toggle input{width:20px;height:20px;accent-color:var(--brand)}
.summary{position:sticky;top:92px;background:var(--text);color:#F7F1E8;padding:32px}
.summary h2{color:#fff;font-size:1.6rem}
.sum-row{display:flex;justify-content:space-between;gap:12px;padding:10px 0;border-bottom:1px solid rgba(255,255,255,.12);font-size:.95rem}
.sum-row span:first-child{color:rgba(247,241,232,.7)}
.sum-total{display:flex;justify-content:space-between;align-items:baseline;padding:20px 0 6px}
.sum-total b{font:400 2.6rem/1 var(--font-head);color:#fff}
.sum-ota{display:flex;justify-content:space-between;font-size:.9rem;color:rgba(247,241,232,.6)}
.sum-save{margin:16px 0 20px;background:#F3D9C6;color:var(--text);padding:12px 14px;font-weight:700;display:flex;justify-content:space-between}
.summary .empty{color:rgba(247,241,232,.7);font-size:.95rem}
.summary .btn{width:100%;background:#F3D9C6;border-color:#F3D9C6;color:var(--text)}
.summary .note{font-size:.78rem;color:rgba(247,241,232,.6);margin:12px 0 0}
.bk-form{display:none}
.bk-form.show{display:grid}
.confirm{display:none;text-align:center;padding:30px 10px}
.confirm.show{display:block}
.confirm .ref{font:400 2rem var(--font-head);color:#F3D9C6;letter-spacing:.06em;margin:.3em 0}
@media (max-width:980px){.bk{grid-template-columns:1fr}.summary{position:static}}

/* Footer */
.site-footer{background:#14262E}
.site-footer h2{font-family:var(--font-head);font-weight:400;font-size:1.2rem;letter-spacing:0;text-transform:none}
.site-footer .big-brand{font:400 clamp(2.4rem,6vw,4.4rem)/1 var(--font-head);color:#F7F1E8;margin:0 0 40px;grid-column:1/-1}
@media (max-width:820px){.book-card>div:nth-child(3){grid-column:1/-1;border-right:0}}
/* Phone: live total bar on the booking page */
.bk-bar{display:none}
@media (max-width:980px){
  body[data-page=book] .fab{display:none}
  .bk-bar{position:fixed;left:0;right:0;bottom:0;z-index:40;display:flex;align-items:center;justify-content:space-between;gap:12px;padding:12px 16px calc(12px + env(safe-area-inset-bottom));background:var(--text);color:#F7F1E8;box-shadow:0 -8px 30px rgba(0,0,0,.18)}
  .bk-bar b{font:400 1.5rem var(--font-head);color:#fff;display:block;line-height:1.1}
  .bk-bar small{color:rgba(247,241,232,.7);font-size:.8rem}
  .bk-bar .btn{background:#F3D9C6;border-color:#F3D9C6;color:var(--text);padding:.9em 1.2em}
  body[data-page=book] .site-footer{padding-bottom:110px}
}