/* Elysian Villa Retreat
   Palette pulled from the logo she chose. Gold is for the mark, the rules and
   the display type only, never body copy, because gold on ivory fails contrast.
   The luxury here comes from space and typography, not from decoration. */

:root{
  --ivory:#fdfcfa;
  --paper:#ffffff;
  --shell:#f7f3ec;
  --ink:#1c1a17;
  --ink-soft:#4d463e;
  --ink-faint:#6b6059;
  --gold-l:#f4e7bd;
  --gold:#c19a45;
  --gold-d:#8a6a24;
  --blush:#f0d5d0;
  --blush-pale:#fbf1ef;
  --line:rgba(28,26,23,.13);
  --line-soft:rgba(28,26,23,.07);
  --serif:"Cormorant Garamond",Georgia,"Times New Roman",serif;
  --sans:"Inter",system-ui,-apple-system,"Segoe UI",sans-serif;
  --pad:clamp(20px,5vw,64px);
}

*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;background:var(--ivory);color:var(--ink);
  font-family:var(--sans);font-size:17px;line-height:1.72;
  -webkit-font-smoothing:antialiased;
}
img{max-width:100%;display:block}
a{color:inherit}

.wrap{max-width:1160px;margin:0 auto;padding:0 var(--pad)}
.narrow{max-width:760px;margin:0 auto}

/* ---------- type ---------- */
h1,h2,h3{font-family:var(--serif);font-weight:400;margin:0;letter-spacing:.005em}
h1{font-size:clamp(2.6rem,8vw,5.4rem);line-height:1.02}
h2{font-size:clamp(2rem,4.6vw,3.2rem);line-height:1.1}
h3{font-size:1.5rem;line-height:1.25}
p{margin:0 0 1.1em;color:var(--ink-soft)}
.lede{font-size:clamp(1.05rem,1.6vw,1.22rem);color:var(--ink-soft)}
strong{color:var(--ink);font-weight:600}

.eyebrow{
  font-family:var(--sans);font-size:.7rem;font-weight:600;
  letter-spacing:.26em;text-transform:uppercase;color:var(--gold-d);
  margin:0 0 18px;
}
.rule{width:54px;height:1.5px;background:var(--gold);margin:0 0 26px}
.rule.mid{margin-left:auto;margin-right:auto}

/* ---------- header ---------- */
.top{
  position:sticky;top:0;z-index:60;
  background:rgba(253,252,250,.94);backdrop-filter:blur(10px);
  border-bottom:1px solid var(--line-soft);
}
.top .wrap{display:flex;align-items:center;justify-content:space-between;gap:20px;padding-top:15px;padding-bottom:15px}
.brand{font-family:var(--serif);font-size:1.32rem;letter-spacing:.14em;text-transform:uppercase;text-decoration:none;white-space:nowrap}
.brand small{display:block;font-family:var(--sans);font-size:.54rem;letter-spacing:.3em;color:var(--gold-d);margin-top:3px}
.top nav{display:flex;align-items:center;gap:30px}
.top nav a{
  font-size:.78rem;letter-spacing:.14em;text-transform:uppercase;
  text-decoration:none;color:var(--ink-soft);padding:4px 0;
  border-bottom:1px solid transparent;
}
.top nav a:hover{color:var(--ink);border-bottom-color:var(--gold)}
.top nav a.cta{
  background:var(--ink);color:var(--ivory);border:1px solid var(--ink);
  padding:11px 22px;letter-spacing:.12em;
}
.top nav a.cta:hover{background:var(--gold-d);border-color:var(--gold-d);color:#fff}
@media (max-width:820px){
  .top nav a:not(.cta){display:none}
  /* 44px minimum tap target. At 10px padding this measured 41px. */
  .top nav a.cta{padding:13px 17px;font-size:.72rem}
}

/* ---------- hero ---------- */
.hero{padding:clamp(56px,9vw,110px) 0 clamp(50px,8vw,90px);text-align:center}
.hero h1{margin-bottom:26px}
/* The logo IS the h1. Reserving the aspect ratio stops the page jumping
   while a 400KB PNG loads. */
.hero-logo{margin:0 auto 18px;max-width:560px}
.hero-logo img{width:100%;height:auto;aspect-ratio:600/478}
@media (max-width:640px){.hero-logo{max-width:88vw}}
.hero .tag{
  font-family:var(--serif);font-style:italic;
  font-size:clamp(1.3rem,3vw,2rem);color:var(--gold-d);margin:0 0 34px;
}
.hero .lede{max-width:56ch;margin:0 auto 40px}
.hero-actions{display:flex;gap:14px;justify-content:center;flex-wrap:wrap}

.btn{
  display:inline-block;font:inherit;font-size:.86rem;font-weight:600;
  letter-spacing:.14em;text-transform:uppercase;
  padding:17px 38px;text-decoration:none;cursor:pointer;
  border:1px solid var(--ink);background:var(--ink);color:var(--ivory);
  transition:background .16s ease,border-color .16s ease,color .16s ease;
}
.btn:hover{background:var(--gold-d);border-color:var(--gold-d);color:#fff}
.btn.ghost{background:transparent;color:var(--ink);border-color:var(--gold)}
.btn.ghost:hover{background:var(--gold-d);color:#fff;border-color:var(--gold-d)}
.btn[disabled]{opacity:.42;cursor:not-allowed}
.btn[disabled]:hover{background:var(--ink);border-color:var(--ink);color:var(--ivory)}

/* ---------- the four steps ---------- */
.steps{border-top:1px solid var(--line);border-bottom:1px solid var(--line);background:var(--paper)}
.steps .wrap{display:grid;grid-template-columns:repeat(4,1fr);gap:0}
.step{padding:44px 26px;text-align:center;border-left:1px solid var(--line-soft)}
.step:first-child{border-left:0}
.step .n{font-family:var(--serif);font-size:1.05rem;color:var(--gold);display:block;margin-bottom:12px}
.step h3{font-size:1.32rem;margin-bottom:8px}
.step p{font-size:.9rem;margin:0;color:var(--ink-faint)}
@media (max-width:780px){
  .steps .wrap{grid-template-columns:repeat(2,1fr)}
  .step{border-top:1px solid var(--line-soft)}
  .step:nth-child(-n+2){border-top:0}
  .step:nth-child(odd){border-left:0}
}

/* ---------- generic section ---------- */
section{padding:clamp(64px,10vw,120px) 0}
section.tint{background:var(--shell)}
section.paper{background:var(--paper)}
.head{max-width:660px;margin-bottom:52px}
.head.mid{margin-left:auto;margin-right:auto;text-align:center}
.head p:last-child{margin-bottom:0}

/* ---------- vision ---------- */
.vision{display:grid;grid-template-columns:1fr 1fr;gap:clamp(36px,6vw,86px);align-items:start}
.vision blockquote{
  margin:0;padding:0 0 0 30px;border-left:2px solid var(--gold);
  font-family:var(--serif);font-size:clamp(1.3rem,2.4vw,1.75rem);
  line-height:1.42;color:var(--ink);
}
@media (max-width:860px){.vision{grid-template-columns:1fr}}

/* ---------- rooms ---------- */
.rooms{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(20px,3vw,34px)}
@media (max-width:900px){.rooms{grid-template-columns:1fr;max-width:520px;margin:0 auto}}
.room{background:var(--paper);border:1px solid var(--line-soft);display:flex;flex-direction:column}
.room .shot{
  aspect-ratio:4/3;position:relative;overflow:hidden;
  background:
    radial-gradient(120% 90% at 30% 15%, #fffdf9 0%, transparent 60%),
    linear-gradient(150deg,#f4ece0 0%,#efe4d4 44%,#e9dcc9 100%);
  display:grid;place-items:center;
}
.room .shot::after{
  content:"";position:absolute;inset:14px;border:1px solid rgba(193,154,69,.34);
}
.room .shot span{
  position:relative;font-family:var(--serif);font-size:2.7rem;
  color:rgba(138,106,36,.42);letter-spacing:.1em;
}
.room .body{padding:26px 26px 28px;display:flex;flex-direction:column;flex:1}
.room h3{margin-bottom:6px}
.room .sleeps{font-size:.74rem;letter-spacing:.18em;text-transform:uppercase;color:var(--gold-d);margin-bottom:14px}
.room p{font-size:.94rem;flex:1}
.room .rate{
  margin-top:16px;padding-top:16px;border-top:1px solid var(--line-soft);
  font-family:var(--serif);font-size:1.2rem;color:var(--ink);
}
.room .rate em{font-family:var(--sans);font-style:normal;font-size:.82rem;color:var(--ink-faint)}

/* ---------- services ---------- */
.svc{display:grid;grid-template-columns:repeat(2,1fr);gap:clamp(26px,4vw,54px)}
@media (max-width:860px){.svc{grid-template-columns:1fr}}
.svc article{border-top:1px solid var(--line);padding-top:26px}
.svc h3{margin-bottom:12px}
.svc ul{margin:0 0 14px;padding:0;list-style:none}
.svc li{position:relative;padding-left:20px;margin-bottom:7px;font-size:.95rem;color:var(--ink-soft)}
.svc li::before{
  content:"";position:absolute;left:0;top:.62em;width:5px;height:5px;
  background:var(--gold);transform:rotate(45deg);
}
.fineprint{font-size:.85rem;color:var(--ink-faint);font-style:italic;margin:0}

/* ---------- booking ---------- */
.booking{background:var(--paper);border:1px solid var(--line);padding:clamp(26px,4vw,52px)}
.bstep{border-top:1px solid var(--line-soft);padding:32px 0}
.bstep:first-of-type{border-top:0;padding-top:0}
.bstep>h3{display:flex;align-items:baseline;gap:14px;margin-bottom:6px}
.bstep>h3 .n{
  font-family:var(--sans);font-size:.68rem;font-weight:700;letter-spacing:.16em;
  color:var(--gold-d);border:1px solid var(--gold);border-radius:50%;
  width:26px;height:26px;display:inline-grid;place-items:center;flex:none;
}
.bstep .why{font-size:.92rem;color:var(--ink-faint);margin:0 0 20px 40px}
@media (max-width:640px){.bstep .why{margin-left:0}}

.grid2{display:grid;grid-template-columns:1fr 1fr;gap:18px}
.grid3{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
@media (max-width:640px){.grid2,.grid3{grid-template-columns:1fr}}

label{display:block;font-size:.76rem;font-weight:600;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-faint);margin-bottom:7px}
label .opt{font-weight:400;letter-spacing:.04em;text-transform:none;color:var(--ink-faint);opacity:.8}
input[type=text],input[type=tel],input[type=email],input[type=date],input[type=time],textarea,select{
  width:100%;font:inherit;font-size:1rem;color:var(--ink);
  background:var(--ivory);border:1px solid var(--line);
  padding:13px 14px;border-radius:0;
}
input:focus,textarea:focus,select:focus{outline:2px solid var(--gold);outline-offset:-1px;background:#fff}
textarea{min-height:96px;resize:vertical}
.err{color:#9a2f1c;font-size:.86rem;margin:7px 0 0;display:none}
.err.show{display:block}
input.bad,textarea.bad{border-color:#9a2f1c;background:#fdf6f4}

.surgery-box{
  background:var(--blush-pale);border:1px solid var(--blush);
  padding:22px 22px 24px;margin-top:6px;
}
.surgery-box .grid2{margin-top:0}

.picks{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}
@media (max-width:720px){.picks{grid-template-columns:1fr}}
.pick{
  position:relative;display:block;border:1px solid var(--line);background:var(--ivory);
  padding:20px 18px;cursor:pointer;text-align:left;
  transition:border-color .14s ease,background .14s ease,box-shadow .14s ease;
}
.pick:hover{border-color:var(--gold)}
.pick input{position:absolute;opacity:0;width:1px;height:1px}
.pick:has(input:checked){
  border-color:var(--gold-d);background:#fff;
  box-shadow:inset 0 0 0 1px var(--gold-d);
}
.pick:has(input:focus-visible){outline:2px solid var(--gold);outline-offset:2px}
.pick .name{font-family:var(--serif);font-size:1.28rem;display:block;margin-bottom:4px}
.pick .meta{font-size:.78rem;color:var(--ink-faint);display:block}

/* a room somebody already has */
.pick.is-taken{
  opacity:.62;cursor:not-allowed;border-style:dashed;background:var(--shell);
}
.pick.is-taken:hover{border-color:var(--line)}
.pick.is-taken .name{text-decoration:line-through;text-decoration-thickness:1px}
.pick-taken{
  display:inline-block;margin-top:10px;font-size:.68rem;font-weight:700;
  letter-spacing:.16em;text-transform:uppercase;color:#8a3b26;
}

/* the house is full */
.full-alert{
  border-left:5px solid var(--gold-d);background:#fbf1ee;
  padding:22px 26px;margin:22px 0 0;
}
.full-alert[hidden]{display:none}
.full-alert b.hd{
  display:block;font-family:var(--serif);font-weight:600;
  font-size:clamp(1.35rem,2.6vw,1.7rem);color:var(--ink);margin-bottom:6px;
}
.full-alert p{margin:0;font-size:.96rem}

.nights-strip{margin-top:16px}
.nights-strip[hidden]{display:none}
.ribbon{display:flex;gap:4px;margin-top:8px}
.ribbon i{flex:1;max-width:34px;height:7px;background:var(--gold);opacity:.55}
.nights-label{font-size:.8rem;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-faint)}

.sum-row{display:flex;justify-content:space-between;gap:16px;padding:7px 0;font-size:.95rem}
.sum-row span{color:var(--ink-soft)}
.sum-empty{font-size:.95rem;color:var(--ink-faint);margin:0}

.extras{display:grid;gap:12px}
.extra{
  display:flex;align-items:flex-start;gap:13px;
  border:1px solid var(--line);background:var(--ivory);padding:16px 18px;cursor:pointer;
}
.extra:hover{border-color:var(--gold)}
.extra input{margin:4px 0 0;accent-color:var(--gold-d);width:17px;height:17px;flex:none}
.extra .t{font-weight:600;font-size:.97rem;color:var(--ink)}
.extra .d{font-size:.86rem;color:var(--ink-faint)}

/* summary */
.sum{background:var(--shell);border:1px solid var(--line);padding:26px 26px 28px;margin-top:34px}
.sum h3{font-size:1.35rem;margin-bottom:16px}
.sum dl{margin:0;display:grid;grid-template-columns:auto 1fr;gap:9px 18px;font-size:.95rem}
.sum dt{color:var(--ink-faint)}
.sum dd{margin:0;text-align:right;color:var(--ink)}
.sum .total{
  margin-top:18px;padding-top:16px;border-top:1px solid var(--line);
  display:flex;justify-content:space-between;align-items:baseline;
}
.sum .total .k{font-size:.78rem;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-faint)}
.sum .total .v{font-family:var(--serif);font-size:1.8rem}
.sum-fine{font-size:.84rem;color:var(--ink-faint);margin:16px 0 0}
.sum .btn{width:100%;margin-top:20px;text-align:center}

.alert{
  border-left:4px solid var(--gold-d);background:#fbf5e9;
  padding:16px 20px;margin:18px 0 0;font-size:.95rem;color:var(--ink);
  display:none;
}
.alert.show{display:block}
.alert.warn{border-left-color:#9a2f1c;background:#fdf1ee}

/* ---------- reviews ---------- */
.revs{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(18px,3vw,30px)}
@media (max-width:900px){.revs{grid-template-columns:1fr}}
.rev{background:var(--paper);border:1px solid var(--line-soft);padding:28px 26px}
.rev .stars{color:var(--gold);letter-spacing:.18em;font-size:.95rem;margin-bottom:12px}
.rev p{font-family:var(--serif);font-size:1.16rem;line-height:1.5;color:var(--ink);margin-bottom:14px}
.rev .who{font-size:.8rem;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-faint)}

/* ---------- contact + footer ---------- */
.contact{display:grid;grid-template-columns:1fr 1fr;gap:clamp(30px,5vw,70px);align-items:start}
@media (max-width:860px){.contact{grid-template-columns:1fr}}
.cbox{border-top:1px solid var(--line);padding-top:24px}
.cbox h3{font-size:1.28rem;margin-bottom:10px}
.cbox a{color:var(--gold-d);text-decoration:none;border-bottom:1px solid rgba(193,154,69,.4)}
.cbox a:hover{border-bottom-color:var(--gold-d)}

footer{background:var(--ink);color:#cfc7bb;padding:64px 0 44px;font-size:.9rem}
footer .fgrid{display:grid;grid-template-columns:1.4fr 1fr 1fr;gap:40px;margin-bottom:44px}
@media (max-width:780px){footer .fgrid{grid-template-columns:1fr;gap:30px}}
footer .brand{color:var(--gold-l);text-decoration:none}
footer .brand small{color:rgba(244,231,189,.6)}
footer h4{font-size:.7rem;letter-spacing:.2em;text-transform:uppercase;color:var(--gold);margin:0 0 14px;font-weight:600;font-family:var(--sans)}
footer p{color:#cfc7bb}
footer a{color:#e6ddd0}
footer ul{margin:0;padding:0;list-style:none}
footer li{margin-bottom:8px}
footer li a{text-decoration:none;color:#cfc7bb}
footer li a:hover{color:var(--gold-l)}
.legal{border-top:1px solid rgba(255,255,255,.12);padding-top:26px;font-size:.8rem;color:#9a9188;line-height:1.7}
.legal p{color:inherit;margin-bottom:10px}
.legal p:last-child{margin-bottom:0}

/* ---------- modal ---------- */
.modal{
  position:fixed;inset:0;z-index:90;
  background:rgba(28,26,23,.55);backdrop-filter:blur(3px);
  display:grid;place-items:center;padding:24px;
}
.modal[hidden]{display:none}
.modal-card{
  background:var(--paper);border:1px solid var(--gold);
  max-width:520px;width:100%;padding:38px 34px 34px;text-align:center;
}
.modal-card h3{font-size:1.9rem;margin-bottom:16px}
.modal-sum{margin:0 0 18px}
.modal-sum p{margin:0 0 6px;font-size:.96rem;color:var(--ink-soft)}
.modal-card .btn{margin-top:20px}

.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.skip{position:absolute;left:-9999px;top:0;background:var(--ink);color:#fff;padding:12px 18px;z-index:100}
.skip:focus{left:8px;top:8px}

@media print{.top,.hero-actions,.booking{display:none}}