:root { --serif:"Didot","Bodoni MT","Playfair Display","Cormorant Garamond",Georgia,serif; --gold:#b99572; --bg:#fbf8f2; --card:#fffdf9; --ink:#4a4440; --muted:#7a7164; --accent:#9a6c50; --sage:#6f836d; --line:#e9e0d0; --err:#b3261e; }
* { box-sizing: border-box; }
body { margin:0; background:var(--bg); color:var(--ink); font:16px/1.6 system-ui, sans-serif; }

html { scroll-behavior:smooth; scroll-padding-top:64px; }
.hero { position:relative; text-align:center; padding:96px 16px 80px; color:var(--ink);
  background: linear-gradient(rgba(251,248,242,.55), rgba(251,248,242,.85)), url(img/hero.jpg) center/cover no-repeat, url(img/hero.svg) center/cover no-repeat, linear-gradient(135deg,#f3eadb,#fbf8f2); }
.hero .btn { margin-top:24px; }

.nav { position:sticky; top:0; z-index:10; display:flex; justify-content:space-between; align-items:center; gap:12px; padding:10px 20px; background:rgba(251,248,242,.94); backdrop-filter:blur(6px); border-bottom:1px solid var(--line); }
.nav .brand { font:400 1.25rem var(--serif); letter-spacing:.14em; text-transform:uppercase; color:var(--ink); text-decoration:none; }
.nav nav { display:flex; align-items:center; gap:18px; }
.nav nav a { color:var(--muted); text-decoration:none; font-size:.92rem; }
.nav nav a:hover { color:var(--accent); }
.btn { display:inline-block; background:var(--accent); color:#fff !important; text-decoration:none; padding:12px 26px; border-radius:999px; font-weight:600; letter-spacing:.03em; }
.btn:hover { background:#85583f; }
.btn.small { padding:7px 16px; font-size:.88rem; }
.link { color:var(--accent); text-decoration:none; font-weight:600; }
.link:hover { text-decoration:underline; }

.wrap { max-width:960px; margin:0 auto; padding:56px 20px; }
.band { background:#f3ebdb; }
.band > .wrap, .band.pad { padding-top:48px; padding-bottom:48px; }
.title { font:400 1.5rem var(--serif); letter-spacing:.16em; text-transform:uppercase; text-align:center; margin:0 0 32px; display:flex; align-items:center; justify-content:center; gap:18px; }
.title::before, .title::after { content:''; flex:0 1 90px; height:1px; background:var(--gold); }
.title.left { text-align:left; justify-content:flex-start; }
.title.left::before, .title.left::after { display:none; }
.values { max-width:960px; margin:0 auto; padding:40px 20px; display:grid; grid-template-columns:repeat(3,1fr); gap:28px; text-align:center; }
.values h3 { font:600 1.05rem var(--serif); margin:0 0 6px; color:var(--accent); }
.values p { margin:0; color:var(--muted); font-size:.95rem; }
.feature { display:grid; grid-template-columns:1fr 1fr; gap:32px; align-items:center; margin-bottom:44px; }
.feature.reverse img { order:2; }
.feature img, .about img { width:100%; aspect-ratio:4/3; object-fit:cover; border-radius:14px; display:block; box-shadow:0 8px 24px rgba(90,70,40,.12); background:#efe6d3; }
.feature h3 { font:400 1.5rem var(--serif); margin:0 0 10px; }
.feature p, .about p { color:var(--muted); }
.about { display:grid; grid-template-columns:1fr 1fr; gap:36px; align-items:center; }
.infos { display:grid; grid-template-columns:1fr 1fr; gap:24px; max-width:760px; margin:0 auto; align-items:center; }
.panel { min-width:0; background:var(--card); border:1px solid var(--line); border-radius:16px; padding:28px 28px 24px; box-shadow:0 6px 20px rgba(90,70,40,.06); }
.panel h3 { margin:0 0 18px; font:600 .8rem system-ui, sans-serif; letter-spacing:.14em; text-transform:uppercase; color:var(--accent); }
.addr { font:400 1.25rem/1.5 var(--serif); margin:0 0 22px; }
.actions { display:flex; flex-wrap:wrap; gap:10px; }
.btn.ghost { background:transparent; color:var(--accent) !important; border:1px solid var(--accent); }
.btn.ghost:hover { background:rgba(154,108,80,.1); }
.hours { list-style:none; margin:0; padding:0; }
.hours li { display:flex; justify-content:space-between; gap:16px; padding:9px 0; border-bottom:1px solid var(--line); }
.hours li:last-child { border-bottom:0; }
.hours li span:last-child { font-weight:600; white-space:nowrap; }
.info-list li { align-items:flex-start; }
.info-list li > :last-child { white-space:normal; text-align:right; font-weight:600; }
.panel { border-radius:6px; }
@media (max-width:720px) { .infos { grid-template-columns:minmax(0,1fr); } .panel { padding:22px 20px; } }
.hours li.closed span:last-child { color:var(--muted); }
details { background:var(--card); border:1px solid var(--line); border-radius:10px; padding:14px 18px; margin-bottom:10px; max-width:720px; margin-left:auto; margin-right:auto; }
summary { cursor:pointer; font-weight:600; }
details p { margin:10px 0 0; color:var(--muted); }
#reserver { max-width:680px; }
.prices { width:100%; max-width:720px; margin:0 auto; border-collapse:collapse; background:var(--card); border:1px solid var(--line); border-radius:12px; overflow:hidden; }
.prices td { padding:14px 16px; border-bottom:1px solid var(--line); }
.prices tr:last-child td { border-bottom:0; }
.prices th { padding:12px 16px; background:#f3ebdb; color:var(--accent); font:600 .8rem system-ui, sans-serif; letter-spacing:.1em; text-transform:uppercase; text-align:center; }
.prices th:first-child, .prices td:first-child { text-align:left; }
.prices .price { font:600 1.1rem var(--serif); color:var(--accent); text-align:center; white-space:nowrap; }
.prices .price a { text-decoration:none; padding:4px 10px; border-radius:6px; }
.prices .price a:hover { background:rgba(154,108,80,.12); }
.note, .hint { color:var(--muted); font-size:.9rem; text-align:center; }
.hint { text-align:left; margin:-6px 0 12px; }
@media (max-width:720px) { .prices td, .prices th { padding:12px 8px; font-size:.92rem; } }
@media (max-width:720px) {
  .nav nav a:not(.btn) { display:none; }
  .values, .feature, .about, .infos { grid-template-columns:1fr; }
  .feature.reverse img { order:0; }
  .wrap { padding:40px 16px; }
}
.hero .lotus { width:84px; height:63px; color:var(--gold); }
.hero h1 { margin:4px 0 0; font:400 3.4rem/1.1 var(--serif); letter-spacing:.06em; text-transform:uppercase; }
.hero .subtitle { display:flex; align-items:center; justify-content:center; gap:16px; margin:14px auto 0; max-width:560px; font:400 1rem var(--serif); letter-spacing:.28em; text-transform:uppercase; color:var(--muted); }
.hero .subtitle::before, .hero .subtitle::after { content:''; flex:1 1 30px; max-width:70px; height:1px; background:var(--gold); }
.hero .tagline { margin:16px 0 0; font:italic 400 1.15rem/1.5 var(--serif); letter-spacing:.02em; text-transform:none; color:var(--muted); }
.hero p { margin:6px 0 0; color:var(--muted); letter-spacing:.08em; text-transform:uppercase; font-size:.85rem; }

#form section { margin-bottom:32px; }
h2 { font:400 1.25rem var(--serif); display:flex; align-items:center; gap:10px; }
h2 span { border:1px solid var(--accent); color:var(--accent); width:28px; height:28px; border-radius:50%; display:grid; place-items:center; font:.85rem system-ui; }


.cards { display:grid; gap:10px; }
.card { text-align:left; width:100%; background:var(--card); color:inherit; border:1px solid var(--line); border-radius:12px; padding:16px 18px; cursor:pointer; font:inherit; transition:border-color .15s, box-shadow .15s; }
.card:hover { border-color:var(--accent); }
.card[aria-pressed="true"] { border-color:var(--sage); box-shadow:0 0 0 2px rgba(111,131,109,.35); background:#fbfcf9; }
.card b { display:flex; justify-content:space-between; gap:12px; font-weight:600; }
.card b span { color:var(--accent); }
.card small { color:var(--muted); display:block; margin-top:2px; }

input, textarea { width:100%; padding:11px 12px; border:1px solid var(--line); border-radius:8px; background:var(--card); color:var(--ink); font:inherit; }
input[type=date] { width:auto; margin-bottom:12px; }
label { display:block; margin-bottom:12px; font-size:.92rem; color:var(--muted); }
label input, label textarea { margin-top:4px; }

.slots { display:grid; grid-template-columns:repeat(auto-fill,minmax(80px,1fr)); gap:8px; }
.slot { padding:10px 0; border:1px solid var(--line); border-radius:8px; background:var(--card); color:var(--ink); font:inherit; cursor:pointer; }
.slot:hover { border-color:var(--accent); }
.slot[aria-pressed="true"] { background:var(--sage); color:#fff; border-color:var(--sage); }
.none { color:var(--muted); grid-column:1/-1; }

button[type=submit] { width:100%; padding:14px; border:0; border-radius:10px; background:var(--accent); color:#fff; font:600 1rem inherit; cursor:pointer; letter-spacing:.03em; }
button[type=submit]:hover { background:#85583f; }
button[type=submit]:disabled { opacity:.5; cursor:wait; }
.summary { font-weight:600; }
.error { color:var(--err); min-height:1.4em; }
.hp { position:absolute; left:-9999px; width:1px; height:1px; }
.done { text-align:center; background:var(--card); border:1px solid var(--sage); border-radius:12px; padding:32px 16px; }
.done h2 { justify-content:center; text-align:center; }
.done .check { width:56px; height:56px; margin:0 auto 12px; border-radius:50%; background:var(--sage); color:#fff; font-size:1.8rem; line-height:56px; }
.done:focus { outline:none; }
.recap { list-style:none; margin:16px auto 20px; padding:16px 20px; max-width:460px; text-align:left; background:var(--bg); border:1px solid var(--line); border-radius:10px; }
.recap li { padding:4px 0; overflow-wrap:anywhere; }
footer { text-align:center; color:var(--muted); font-size:.9rem; padding:0 16px 32px; }
button:focus-visible, input:focus-visible, textarea:focus-visible { outline:3px solid var(--accent); outline-offset:2px; }
@media (max-width:480px) { .hero { padding:48px 16px 40px; } .hero h1 { font-size:2.3rem; } .hero .subtitle { font-size:.78rem; letter-spacing:.18em; gap:10px; } .title { font-size:1.2rem; letter-spacing:.12em; gap:12px; } .title::before, .title::after { flex-basis:30px; } }