/* ============================================================
   Riad Dar Najma — design system
   Warm, editorial, hairline-based. oklch palette.
   ============================================================ */
:root{
  --bg: oklch(0.972 0.008 85);
  --band: oklch(0.95 0.014 80);
  --ink: oklch(0.24 0.012 55);
  --muted: oklch(0.52 0.012 65);
  --faint: oklch(0.68 0.009 72);
  --line: oklch(0.86 0.009 78);
  --line-soft: oklch(0.90 0.008 80);
  --accent: oklch(0.46 0.114 254);     /* zellige / majorelle blue */
  --accent-deep: oklch(0.40 0.114 254);
  --brass: oklch(0.72 0.094 78);        /* brass / saffron */
  --on-accent: oklch(0.98 0.01 85);
  --serif: "EB Garamond", Georgia, "Times New Roman", serif;
  --serif-alt: "Libre Caslon Display", Georgia, serif;
  --body: "Hanken Grotesk", system-ui, -apple-system, sans-serif;
  --maxw: 1180px;
  --pad: clamp(20px, 5vw, 64px);
  --ease: cubic-bezier(0.22, 0.61, 0.36, 1);
}
[data-accent="terracotta"]{
  --accent: oklch(0.56 0.13 41);
  --accent-deep: oklch(0.50 0.13 41);
}
[data-serif="caslon"]{ --serif: "Libre Caslon Display", Georgia, serif; }
[data-band="soft"]{ --band: oklch(0.96 0.009 82); }
[data-band="medium"]{ --band: oklch(0.95 0.014 80); }
[data-band="strong"]{ --band: oklch(0.935 0.022 78); }

*{ box-sizing:border-box; }
html{ -webkit-font-smoothing:antialiased; scroll-behavior:smooth; }
@media (prefers-reduced-motion: reduce){ html{ scroll-behavior:auto; } }
body{
  margin:0; background:var(--bg); color:var(--ink);
  font-family:var(--body); font-size:14px; line-height:1.62; font-weight:400;
}
body.locked{ overflow:hidden; }
img{ display:block; max-width:100%; }
button{ font-family:inherit; }
a{ color:inherit; }

.wrap{ max-width:var(--maxw); margin:0 auto; padding:0 var(--pad); }

/* ---- type ---- */
h1,h2,h3,h4{ font-family:var(--serif); font-weight:500; line-height:1.12; text-wrap:balance; margin:0; }
h1{ font-size:clamp(44px, 8vw, 86px); letter-spacing:-0.01em; }
h2{ font-size:clamp(30px, 4.4vw, 50px); }
h3{ font-size:clamp(21px, 2.4vw, 27px); }
p{ text-wrap:pretty; }

.eyebrow{
  font-family:var(--body); font-size:11px; font-weight:600;
  letter-spacing:0.22em; text-transform:uppercase; color:var(--accent); margin:0;
}
.section{ border-top:1px solid var(--line); padding:clamp(56px,8vw,104px) 0; position:relative; }
.section.band{ background:var(--band); }
.section-head{ display:flex; flex-direction:column; gap:14px; max-width:62ch; margin-bottom:clamp(36px,5vw,60px); }
.section-head .sub{ color:var(--muted); font-size:clamp(15px,1.6vw,17px); max-width:56ch; }

/* ---- buttons ---- */
.btn-solid,.btn-outline,.btn-ghost{
  display:inline-flex; align-items:center; justify-content:center; gap:9px;
  min-height:48px; padding:0 26px; font-size:12px; font-weight:600;
  letter-spacing:0.14em; text-transform:uppercase; cursor:pointer; text-decoration:none;
  border:1px solid var(--accent); background:var(--accent); color:var(--on-accent);
  transition:background .25s var(--ease), color .25s var(--ease), border-color .25s var(--ease);
  white-space:nowrap;
}
.btn-solid:hover{ background:var(--accent-deep); border-color:var(--accent-deep); }
.btn-outline{ background:transparent; color:var(--ink); border-color:var(--ink); }
.btn-outline:hover{ background:var(--ink); color:var(--bg); }
.btn-ghost{ background:transparent; border-color:oklch(1 0 0 / .65); color:#fff; }
.btn-ghost:hover{ background:oklch(1 0 0 / .14); border-color:#fff; }
.btn-block{ width:100%; }

.text-link{ position:relative; text-decoration:none; font-weight:500; width:fit-content; cursor:pointer; }
.text-link::after{ content:""; position:absolute; left:0; bottom:-3px; height:1px; width:100%; background:var(--accent); transform:scaleX(0); transform-origin:left; transition:transform .3s var(--ease); }
.text-link:hover::after{ transform:scaleX(1); }

.stars{ display:inline-flex; gap:3px; color:var(--brass); letter-spacing:1px; line-height:1; }
.stars.dim i{ color:var(--line); font-style:normal; }
.stars i{ font-style:normal; }

/* ============================================================ HEADER */
.hdr{ position:fixed; inset:0 0 auto 0; z-index:60; transition:background .35s var(--ease), border-color .35s var(--ease), backdrop-filter .35s var(--ease); border-bottom:1px solid transparent; }
.hdr-row{ display:flex; align-items:center; justify-content:space-between; gap:24px; height:74px; }
.hdr.scrolled{ background:oklch(0.972 0.008 85 / .82); backdrop-filter:blur(14px) saturate(1.1); border-bottom-color:var(--line); }
.wordmark{ font-family:var(--serif); font-size:23px; letter-spacing:0.02em; color:#fff; text-decoration:none; display:inline-flex; align-items:center; gap:8px; transition:color .35s var(--ease); white-space:nowrap; }
.hdr.scrolled .wordmark{ color:var(--ink); }
.wordmark .star{ color:var(--brass); font-size:15px; }
.nav{ display:flex; align-items:center; gap:30px; }
.nav a{ font-size:12.5px; letter-spacing:0.04em; text-decoration:none; color:oklch(1 0 0 / .82); transition:color .25s var(--ease); position:relative; }
.nav a:hover{ color:#fff; }
.hdr.scrolled .nav a{ color:var(--muted); }
.hdr.scrolled .nav a:hover{ color:var(--ink); }
.hdr .btn-cta{ display:inline-flex; align-items:center; min-height:42px; padding:0 20px; font-size:11px; font-weight:600; letter-spacing:0.14em; text-transform:uppercase; text-decoration:none; border:1px solid oklch(1 0 0 / .6); color:#fff; transition:.25s var(--ease); }
.hdr .btn-cta:hover{ background:#fff; color:var(--ink); }
.hdr.scrolled .btn-cta{ border-color:var(--accent); background:var(--accent); color:var(--on-accent); }
.hdr.scrolled .btn-cta:hover{ background:var(--accent-deep); }
.burger{ display:none; width:46px; height:46px; border:1px solid oklch(1 0 0 / .5); background:transparent; cursor:pointer; align-items:center; justify-content:center; flex-direction:column; gap:5px; }
.hdr.scrolled .burger{ border-color:var(--line); }
.burger span{ width:20px; height:1.5px; background:#fff; transition:.25s var(--ease); }
.hdr.scrolled .burger span{ background:var(--ink); }

/* drawer */
.scrim{ position:fixed; inset:0; background:oklch(0.2 0.02 60 / .5); backdrop-filter:blur(2px); z-index:70; opacity:0; pointer-events:none; transition:opacity .3s var(--ease); }
.scrim.show{ opacity:1; pointer-events:auto; }
.drawer{ position:fixed; top:0; right:0; bottom:0; width:min(86vw,360px); background:var(--bg); z-index:80; transform:translateX(100%); transition:transform .4s var(--ease); display:flex; flex-direction:column; padding:26px 30px; border-left:1px solid var(--line); }
.drawer.show{ transform:translateX(0); }
.drawer-top{ display:flex; align-items:center; justify-content:space-between; margin-bottom:34px; }
.drawer-top .wordmark{ color:var(--ink); }
.drawer-x{ width:42px; height:42px; border:1px solid var(--line); background:transparent; cursor:pointer; font-size:18px; color:var(--ink); }
.drawer nav{ display:flex; flex-direction:column; }
.drawer nav a{ font-family:var(--serif); font-size:24px; padding:15px 0; border-bottom:1px solid var(--line-soft); text-decoration:none; color:var(--ink); }
.drawer .btn-solid{ margin-top:26px; }

/* ============================================================ HERO */
.hero{ position:relative; height:100svh; min-height:600px; overflow:hidden; background:#1a1714; }
.hero-slide{ position:absolute; inset:0; opacity:0; transition:opacity 1.4s var(--ease); }
.hero-slide.active{ opacity:1; }
.hero-slide .img{ position:absolute; inset:0; background-size:cover; background-position:center; transform:scale(1.04); }
.hero.kb .hero-slide.active .img{ animation:kenburns 14s ease-out forwards; }
@keyframes kenburns{ from{ transform:scale(1.02) translate(0,0); } to{ transform:scale(1.16) translate(-1.5%, -1.5%); } }
.hero-scrim{ position:absolute; inset:0; background:
  radial-gradient(110% 75% at 50% 44%, oklch(0.12 0.02 60 / .5) 0%, oklch(0.12 0.02 60 / .2) 42%, transparent 72%),
  linear-gradient(180deg, oklch(0.12 0.02 60 / .58) 0%, oklch(0.12 0.02 60 / .12) 24%, transparent 46%, oklch(0.1 0.02 60 / .34) 74%, oklch(0.08 0.02 60 / .82) 100%); }
.hero[data-layout="editorial"] .hero-scrim{ background:
  linear-gradient(180deg, oklch(0.12 0.02 60 / .5) 0%, oklch(0.12 0.02 60 / .08) 22%, transparent 40%, oklch(0.1 0.02 60 / .5) 72%, oklch(0.07 0.02 60 / .9) 100%); }
.hero-inner{ position:absolute; inset:0; z-index:3; display:flex; }
.hero-content{ color:#fff; width:100%; text-shadow:0 1px 26px oklch(0.1 0.02 60 / .42); }
.hero-lead{ display:flex; flex-direction:column; }
.hero-content .eyebrow{ color:var(--brass); text-shadow:none; }
.hero-kicker{ margin:0 0 clamp(18px,2.6vh,26px); position:relative; }
.hero-content h1{ color:#fff; margin:0; font-weight:500; text-shadow:0 2px 34px oklch(0.08 0.02 60 / .5); }
.hero-content .lede{ color:oklch(1 0 0 / .9); font-size:clamp(15px,1.8vw,18px); max-width:50ch; margin:clamp(20px,2.8vh,28px) 0 0; line-height:1.65; }
.hero-rating{ display:inline-flex; align-items:center; gap:12px; font-size:11.5px; letter-spacing:0.14em; text-transform:uppercase; color:oklch(1 0 0 / .92); margin-top:clamp(22px,3vh,30px); white-space:nowrap; }
.hero-rating .stars{ font-size:14px; }
.hero-kicker{ white-space:nowrap; }
.hero-ctas{ display:flex; gap:14px; flex-wrap:wrap; margin-top:clamp(26px,3.4vh,34px); }
/* treatment A — centered */
.hero[data-layout="centered"] .hero-inner{ align-items:center; justify-content:center; text-align:center; }
.hero[data-layout="centered"] .hero-content{ max-width:900px; padding:0 var(--pad); display:flex; justify-content:center; }
.hero[data-layout="centered"] .hero-lead{ align-items:center; }
.hero[data-layout="centered"] h1{ font-size:clamp(42px, 6.6vw, 78px); max-width:15ch; }
.hero[data-layout="centered"] .hero-kicker::after{ content:""; display:block; width:34px; height:1px; background:var(--brass); margin:14px auto 0; opacity:.85; }
.hero[data-layout="centered"] .hero-ctas{ justify-content:center; }
/* treatment B — editorial bottom-left + meta column */
.hero[data-layout="editorial"] .hero-inner{ align-items:flex-end; }
.hero[data-layout="editorial"] .hero-content{ width:100%; max-width:var(--maxw); margin:0 auto; padding:0 var(--pad) clamp(64px,9vh,110px); display:grid; grid-template-columns:1.5fr .9fr; gap:40px; align-items:end; }
.hero[data-layout="editorial"] .hero-lead{ align-items:flex-start; text-align:left; }
.hero[data-layout="editorial"] .hero-meta{ border-top:1px solid oklch(1 0 0 / .3); padding-top:18px; display:flex; flex-direction:column; gap:12px; }
.hero[data-layout="editorial"] .hero-meta .mrow{ display:flex; justify-content:space-between; gap:14px; font-size:12px; letter-spacing:0.04em; color:oklch(1 0 0 / .82); padding-bottom:11px; border-bottom:1px solid oklch(1 0 0 / .16); }
.hero[data-layout="editorial"] .hero-meta .mrow span:first-child{ text-transform:uppercase; letter-spacing:0.14em; font-size:10.5px; color:oklch(1 0 0 / .6); }
.hero[data-layout="editorial"] .lede{ max-width:40ch; }

.hero-dots{ position:absolute; z-index:5; bottom:30px; left:50%; transform:translateX(-50%); display:flex; gap:11px; }
.hero[data-layout="editorial"] .hero-dots{ left:auto; right:var(--pad); transform:none; }
.hero-dots button{ width:34px; height:3px; border:none; padding:0; background:oklch(1 0 0 / .35); cursor:pointer; transition:background .3s var(--ease); }
.hero-dots button.on{ background:#fff; }
.hero-scroll{ position:absolute; z-index:5; bottom:28px; left:var(--pad); color:oklch(1 0 0 / .7); font-size:10.5px; letter-spacing:0.2em; text-transform:uppercase; display:flex; align-items:center; gap:9px; }
.hero[data-layout="editorial"] .hero-scroll{ display:none; }
.hero-scroll .bar{ width:30px; height:1px; background:oklch(1 0 0 / .5); }

/* ============================================================ ROOMS */
.rooms-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:1px; background:var(--line); border:1px solid var(--line); }
.room-card{ background:var(--bg); cursor:pointer; display:flex; flex-direction:column; text-align:left; border:none; padding:0; }
.room-card .cover{ position:relative; overflow:hidden; aspect-ratio:4/3.1; }
.room-card .cover .img{ position:absolute; inset:0; background-size:cover; background-position:center; transition:transform .9s var(--ease); }
.room-card:hover .cover .img{ transform:scale(1.06); }
.room-card .cover .num{ position:absolute; top:14px; left:14px; font-family:var(--serif); font-size:13px; color:#fff; background:oklch(0.2 0.02 60 / .4); backdrop-filter:blur(3px); width:30px; height:30px; display:flex; align-items:center; justify-content:center; }
.room-card .body{ padding:22px 22px 26px; display:flex; flex-direction:column; gap:9px; }
.room-card .meta{ display:flex; gap:8px; font-size:10.5px; letter-spacing:0.16em; text-transform:uppercase; color:var(--accent); }
.room-card .meta .dot{ color:var(--faint); }
.room-card h3{ margin-top:2px; }
.room-card .story{ color:var(--muted); font-size:13.5px; }
.room-card .detail-row{ display:flex; align-items:center; justify-content:space-between; margin-top:8px; padding-top:14px; border-top:1px solid var(--line-soft); }
.room-card .price{ font-family:var(--serif); font-size:19px; }
.room-card .price small{ font-family:var(--body); font-size:11px; color:var(--faint); letter-spacing:0.04em; }
.room-card .more{ font-size:11px; letter-spacing:0.16em; text-transform:uppercase; color:var(--ink); display:inline-flex; align-items:center; gap:7px; }
.room-card .more .arr{ transition:transform .3s var(--ease); }
.room-card:hover .more .arr{ transform:translateX(4px); }

/* room overlay */
.ov-scrim{ position:fixed; inset:0; background:oklch(0.18 0.02 60 / .55); backdrop-filter:blur(3px); z-index:90; opacity:0; pointer-events:none; transition:opacity .35s var(--ease); }
.ov-scrim.show{ opacity:1; pointer-events:auto; }
.ov-panel{ position:fixed; top:0; right:0; bottom:0; width:min(92vw,620px); background:var(--bg); z-index:100; transform:translateX(100%); transition:transform .45s var(--ease); display:flex; flex-direction:column; }
.ov-panel.show{ transform:translateX(0); }
.ov-scroll{ overflow-y:auto; flex:1; -webkit-overflow-scrolling:touch; }
.ov-hero{ position:relative; aspect-ratio:16/10; background-size:cover; background-position:center; }
.ov-hero .grad{ position:absolute; inset:0; background:linear-gradient(180deg, oklch(0.2 0.02 60 / .35), transparent 40%, transparent 70%, oklch(0.18 0.02 60 / .5)); }
.ov-close{ position:absolute; top:18px; right:18px; width:44px; height:44px; border:1px solid oklch(1 0 0 / .55); background:oklch(0.2 0.02 60 / .25); backdrop-filter:blur(4px); color:#fff; font-size:18px; cursor:pointer; z-index:3; }
.ov-hero .cap{ position:absolute; left:26px; bottom:22px; color:#fff; z-index:2; }
.ov-hero .cap .eyebrow{ color:var(--brass); }
.ov-hero .cap h2{ color:#fff; margin-top:8px; }
.ov-pad{ padding:30px clamp(22px,4vw,38px) 40px; }
.facts{ display:grid; grid-template-columns:repeat(4,1fr); border:1px solid var(--line); margin-bottom:30px; }
.facts .f{ padding:16px 14px; border-right:1px solid var(--line); display:flex; flex-direction:column; gap:5px; }
.facts .f:last-child{ border-right:none; }
.facts .f .k{ font-size:10px; letter-spacing:0.16em; text-transform:uppercase; color:var(--faint); }
.facts .f .v{ font-family:var(--serif); font-size:17px; }
.ov-section{ margin-bottom:30px; }
.ov-section > .eyebrow{ margin-bottom:13px; }
.ov-section p{ color:var(--muted); max-width:60ch; }
.amen{ list-style:none; padding:0; margin:0; display:grid; grid-template-columns:1fr 1fr; gap:9px 26px; }
.amen li{ font-size:13.5px; color:var(--ink); display:flex; gap:10px; }
.amen li::before{ content:"\2014"; color:var(--accent); }
.ov-gallery{ display:grid; grid-template-columns:repeat(3,1fr); gap:6px; }
.ov-gallery .g{ aspect-ratio:1/1; background-size:cover; background-position:center; cursor:pointer; transition:opacity .25s var(--ease); }
.ov-gallery .g:hover{ opacity:.85; }
.ov-action{ border-top:1px solid var(--line); padding:18px clamp(22px,4vw,38px); display:flex; align-items:center; justify-content:space-between; gap:18px; background:var(--bg); }
.ov-action .price{ font-family:var(--serif); font-size:22px; }
.ov-action .price small{ font-family:var(--body); font-size:11px; color:var(--faint); display:block; letter-spacing:0.04em; }

/* ============================================================ MEALS */
.meals{ display:flex; flex-direction:column; }
.meal{ display:grid; grid-template-columns:1fr 1fr; gap:clamp(28px,5vw,64px); align-items:center; padding:clamp(34px,5vw,52px) 0; border-top:1px solid var(--line-soft); }
.meal:first-child{ border-top:none; }
.meal:nth-child(even) .meal-img{ order:2; }
.meal-img{ aspect-ratio:5/4; background-size:cover; background-position:center; }
.meal-body{ display:flex; flex-direction:column; gap:14px; }
.meal-body .when{ font-size:11px; letter-spacing:0.18em; text-transform:uppercase; color:var(--brass); }
.meal-body p{ color:var(--muted); max-width:48ch; }
.meal-body .tag{ font-size:12px; color:var(--faint); font-style:italic; font-family:var(--serif); font-size:15px; }

/* ============================================================ GALLERY */
.gal-filters{ display:flex; gap:10px; flex-wrap:wrap; margin-bottom:30px; }
.gal-filters button{ font-size:11px; letter-spacing:0.14em; text-transform:uppercase; padding:10px 17px; border:1px solid var(--line); background:transparent; color:var(--muted); cursor:pointer; transition:.25s var(--ease); min-height:42px; }
.gal-filters button:hover{ border-color:var(--ink); color:var(--ink); }
.gal-filters button.on{ background:var(--ink); border-color:var(--ink); color:var(--bg); }
.masonry{ column-count:3; column-gap:8px; }
.masonry .cell{ break-inside:avoid; margin-bottom:8px; position:relative; overflow:hidden; cursor:pointer; }
.masonry .cell .img{ width:100%; background-size:cover; background-position:center; transition:transform .8s var(--ease); }
.masonry .cell:hover .img{ transform:scale(1.05); }
.masonry .cell .cap{ position:absolute; left:0; right:0; bottom:0; padding:14px; color:#fff; font-size:11px; letter-spacing:0.14em; text-transform:uppercase; background:linear-gradient(transparent, oklch(0.18 0.02 60 / .72)); opacity:0; transition:opacity .3s var(--ease); }
.masonry .cell:hover .cap{ opacity:1; }

/* lightbox */
.lightbox{ position:fixed; inset:0; z-index:120; background:oklch(0.14 0.015 60 / .96); display:flex; align-items:center; justify-content:center; opacity:0; pointer-events:none; transition:opacity .3s var(--ease); }
.lightbox.show{ opacity:1; pointer-events:auto; }
.lightbox img{ max-width:88vw; max-height:80vh; object-fit:contain; box-shadow:0 0 0 1px oklch(1 0 0 / .08); }
.lb-cap{ position:absolute; bottom:34px; left:0; right:0; text-align:center; color:oklch(1 0 0 / .8); font-size:12px; letter-spacing:0.16em; text-transform:uppercase; }
.lb-x{ position:absolute; top:24px; right:26px; width:48px; height:48px; border:1px solid oklch(1 0 0 / .35); background:transparent; color:#fff; font-size:20px; cursor:pointer; }
.lb-nav{ position:absolute; top:50%; transform:translateY(-50%); width:56px; height:56px; border:1px solid oklch(1 0 0 / .3); background:oklch(0.2 0 0 / .3); color:#fff; font-size:22px; cursor:pointer; transition:.25s var(--ease); }
.lb-nav:hover{ background:oklch(1 0 0 / .14); }
.lb-prev{ left:3vw; } .lb-next{ right:3vw; }

/* ============================================================ REVIEWS */
.reviews-grid{ display:grid; grid-template-columns:300px 1fr; gap:clamp(30px,5vw,64px); align-items:start; }
.rev-summary{ position:sticky; top:100px; display:flex; flex-direction:column; gap:18px; }
.rev-score{ font-family:var(--serif); font-size:72px; line-height:.9; }
.rev-summary .of{ color:var(--faint); font-size:13px; }
.rev-bars{ display:flex; flex-direction:column; gap:9px; margin-top:6px; }
.rev-bar{ display:grid; grid-template-columns:84px 1fr 30px; align-items:center; gap:12px; font-size:11.5px; color:var(--muted); }
.rev-bar .track{ height:4px; background:var(--line); position:relative; }
.rev-bar .fill{ position:absolute; inset:0 auto 0 0; background:var(--brass); }
.rev-list{ display:flex; flex-direction:column; }
.rev-card{ padding:26px 0; border-top:1px solid var(--line-soft); display:flex; flex-direction:column; gap:12px; }
.rev-card:first-child{ border-top:none; padding-top:0; }
.rev-card .top{ display:flex; align-items:center; justify-content:space-between; gap:14px; }
.rev-card .who{ display:flex; flex-direction:column; gap:3px; }
.rev-card .name{ font-family:var(--serif); font-size:19px; }
.rev-card .place{ font-size:11px; letter-spacing:0.12em; text-transform:uppercase; color:var(--faint); }
.rev-card .quote{ font-family:var(--serif); font-size:18px; line-height:1.5; color:var(--ink); max-width:60ch; }
.rev-card .date{ font-size:11px; color:var(--faint); letter-spacing:0.04em; }

/* ============================================================ STORY */
.story-grid{ display:grid; grid-template-columns:0.95fr 1.05fr; gap:clamp(34px,5vw,72px); align-items:center; }
.story-frame{ padding:14px; border:1px solid var(--line); }
.story-frame .img{ aspect-ratio:4/5; background-size:cover; background-position:center; }
.story-body{ display:flex; flex-direction:column; gap:18px; }
.story-body p{ color:var(--muted); max-width:54ch; }
.creds{ display:grid; grid-template-columns:1fr 1fr; gap:1px; background:var(--line); border:1px solid var(--line); margin-top:10px; }
.creds .c{ background:var(--bg); padding:18px; display:flex; flex-direction:column; gap:5px; }
.creds .c .n{ font-family:var(--serif); font-size:26px; }
.creds .c .l{ font-size:11px; letter-spacing:0.14em; text-transform:uppercase; color:var(--faint); }

/* ============================================================ RESERVATION */
.resv-grid{ display:grid; grid-template-columns:0.85fr 1.15fr; gap:clamp(34px,5vw,72px); align-items:start; }
.resv-aside{ display:flex; flex-direction:column; gap:18px; }
.resv-aside .contact-line{ display:flex; flex-direction:column; gap:12px; margin-top:8px; }
.resv-aside .contact-line a{ display:flex; flex-direction:column; gap:3px; text-decoration:none; padding-bottom:12px; border-bottom:1px solid var(--line-soft); }
.resv-aside .contact-line .k{ font-size:10.5px; letter-spacing:0.16em; text-transform:uppercase; color:var(--faint); }
.resv-aside .contact-line .v{ font-family:var(--serif); font-size:19px; color:var(--ink); }
.form{ display:grid; grid-template-columns:1fr 1fr; gap:20px 22px; }
.field{ display:flex; flex-direction:column; gap:7px; }
.field.full{ grid-column:1 / -1; }
.field label{ font-size:10.5px; letter-spacing:0.16em; text-transform:uppercase; color:var(--muted); }
.field input,.field select,.field textarea{
  font-family:var(--body); font-size:14px; color:var(--ink); background:transparent;
  border:none; border-bottom:1px solid var(--line); padding:10px 2px; outline:none;
  transition:border-color .25s var(--ease); min-height:44px;
}
.field textarea{ resize:vertical; min-height:80px; line-height:1.5; }
.field input:focus,.field select:focus,.field textarea:focus{ border-bottom-color:var(--accent); }
.field.err input,.field.err select{ border-bottom-color:oklch(0.55 0.16 28); }
.field .msg{ font-size:11px; color:oklch(0.55 0.16 28); min-height:0; }
.form .actions{ grid-column:1/-1; display:flex; align-items:center; gap:18px; flex-wrap:wrap; margin-top:6px; }
.form .note{ font-size:12px; color:var(--faint); max-width:40ch; }
.resv-confirm{ border:1px solid var(--line); padding:clamp(30px,5vw,52px); display:flex; flex-direction:column; gap:18px; align-items:flex-start; }
.resv-confirm .check{ width:54px; height:54px; border:1px solid var(--accent); color:var(--accent); display:flex; align-items:center; justify-content:center; font-size:24px; }
.resv-confirm h3{ font-size:30px; }
.resv-confirm .summary{ display:grid; grid-template-columns:repeat(2,auto); gap:10px 40px; margin-top:4px; }
.resv-confirm .summary .k{ font-size:10.5px; letter-spacing:0.14em; text-transform:uppercase; color:var(--faint); }
.resv-confirm .summary .v{ font-family:var(--serif); font-size:17px; }

/* floating buttons */
.floats{ position:fixed; right:22px; bottom:22px; z-index:55; display:flex; flex-direction:column; gap:12px; }
.float-btn{ width:54px; height:54px; border-radius:50%; border:1px solid var(--line); background:var(--bg); color:var(--ink); display:flex; align-items:center; justify-content:center; cursor:pointer; text-decoration:none; transition:.25s var(--ease); box-shadow:none; }
.float-btn:hover{ background:var(--ink); color:var(--bg); border-color:var(--ink); }
.float-btn.wa{ background:var(--accent); color:var(--on-accent); border-color:var(--accent); }
.float-btn.wa:hover{ background:var(--accent-deep); }
.float-btn svg{ width:22px; height:22px; }

/* ============================================================ FOOTER */
.ftr{ border-top:1px solid var(--line); padding:clamp(48px,6vw,76px) 0 32px; }
.ftr-grid{ display:grid; grid-template-columns:1.4fr 1fr 1fr; gap:40px; }
.ftr .wordmark{ color:var(--ink); font-size:25px; }
.ftr .tag{ color:var(--muted); margin-top:14px; max-width:34ch; }
.ftr h5{ font-size:10.5px; letter-spacing:0.18em; text-transform:uppercase; color:var(--faint); margin:0 0 16px; font-weight:600; }
.ftr-col{ display:flex; flex-direction:column; gap:11px; }
.ftr-col a{ text-decoration:none; color:var(--muted); font-size:13.5px; width:fit-content; }
.ftr-col a:hover{ color:var(--ink); }
.ftr-bottom{ display:flex; align-items:center; justify-content:space-between; gap:18px; flex-wrap:wrap; margin-top:clamp(40px,5vw,64px); padding-top:22px; border-top:1px solid var(--line-soft); }
.ftr-bottom .fine{ font-size:11.5px; color:var(--faint); }
.staff-link{ font-size:11px; letter-spacing:0.16em; text-transform:uppercase; color:var(--faint); cursor:pointer; background:none; border:none; transition:color .25s var(--ease); display:inline-flex; align-items:center; gap:7px; }
.staff-link:hover{ color:var(--accent); }
.staff-link .k{ width:5px; height:5px; background:var(--line); border-radius:50%; transition:background .25s var(--ease); }
.staff-link:hover .k{ background:var(--accent); }

/* ============================================================ REVEAL */
@media (prefers-reduced-motion: no-preference){
  .reveal{ opacity:0; transform:translateY(26px); transition:opacity .8s var(--ease), transform .8s var(--ease); }
  .reveal.in{ opacity:1; transform:none; }
  .reveal[data-d="1"]{ transition-delay:.08s; }
  .reveal[data-d="2"]{ transition-delay:.16s; }
  .reveal[data-d="3"]{ transition-delay:.24s; }
  .reveal[data-d="4"]{ transition-delay:.32s; }
  .reveal[data-d="5"]{ transition-delay:.40s; }
}

/* ============================================================ RESPONSIVE */
@media (max-width:1000px){
  .rooms-grid{ grid-template-columns:repeat(2,1fr); }
  .reviews-grid{ grid-template-columns:1fr; }
  .rev-summary{ position:static; flex-direction:row; flex-wrap:wrap; align-items:center; gap:24px; }
  .rev-bars{ flex:1; min-width:240px; }
  .story-grid{ grid-template-columns:1fr; }
  .resv-grid{ grid-template-columns:1fr; }
  .masonry{ column-count:2; }
  .hero[data-layout="editorial"] .hero-content{ grid-template-columns:1fr; }
  .hero[data-layout="editorial"] .hero-meta{ display:none; }
}
@media (max-width:720px){
  .nav,.hdr .btn-cta{ display:none; }
  .burger{ display:flex; }
  .rooms-grid{ grid-template-columns:1fr; }
  .meal{ grid-template-columns:1fr; gap:22px; }
  .meal:nth-child(even) .meal-img{ order:0; }
  .facts{ grid-template-columns:1fr 1fr; }
  .facts .f:nth-child(2){ border-right:none; }
  .facts .f:nth-child(1),.facts .f:nth-child(2){ border-bottom:1px solid var(--line); }
  .ftr-grid{ grid-template-columns:1fr; gap:30px; }
  .form{ grid-template-columns:1fr; }
  .amen{ grid-template-columns:1fr; }
  .masonry{ column-count:1; }
  .ov-action{ position:sticky; bottom:0; }
}

/* ============================================================ BACK OFFICE */
.admin{ position:fixed; inset:0; z-index:130; background:var(--bg); display:flex; flex-direction:column; overflow:hidden; }
.admin-fade{ animation:adminIn .4s var(--ease); }
@keyframes adminIn{ from{ opacity:0; } to{ opacity:1; } }

/* passcode */
.gate{ flex:1; display:flex; align-items:center; justify-content:center; padding:24px; background:var(--band); }
.gate-box{ width:min(92vw,380px); border:1px solid var(--line); background:var(--bg); padding:clamp(28px,5vw,44px); display:flex; flex-direction:column; gap:18px; }
.gate-box .star{ color:var(--brass); font-size:20px; }
.gate-box .eyebrow{ color:var(--faint); }
.gate-box h3{ font-size:26px; }
.gate-box p{ color:var(--muted); font-size:13px; margin:0; }
.gate-box input{ font-family:var(--body); font-size:20px; letter-spacing:0.3em; text-align:center; border:1px solid var(--line); background:transparent; padding:14px; outline:none; color:var(--ink); transition:border-color .25s var(--ease); }
.gate-box input:focus{ border-color:var(--accent); }
.gate-box input.bad{ border-color:oklch(0.55 0.16 28); }
.gate-box .gate-msg{ font-size:12px; color:oklch(0.55 0.16 28); min-height:14px; }
.gate-box .hint{ font-size:11px; color:var(--faint); letter-spacing:0.02em; }
.gate-back{ background:none; border:none; color:var(--faint); font-size:11px; letter-spacing:0.16em; text-transform:uppercase; cursor:pointer; margin-top:4px; }
.gate-back:hover{ color:var(--ink); }

/* admin chrome */
.admin-top{ display:flex; align-items:center; justify-content:space-between; gap:18px; padding:0 clamp(18px,3vw,30px); height:64px; border-bottom:1px solid var(--line); background:var(--band); flex-shrink:0; }
.admin-top .brand{ display:flex; align-items:baseline; gap:12px; }
.admin-top .brand .wm{ font-family:var(--serif); font-size:20px; }
.admin-top .brand .wm .star{ color:var(--brass); }
.admin-top .brand .role{ font-size:10.5px; letter-spacing:0.18em; text-transform:uppercase; color:var(--faint); border-left:1px solid var(--line); padding-left:12px; }
.admin-top .right{ display:flex; align-items:center; gap:14px; }
.admin-top .clock{ font-size:12px; color:var(--muted); }
.admin-top .exit{ font-size:11px; letter-spacing:0.14em; text-transform:uppercase; border:1px solid var(--line); background:transparent; color:var(--ink); padding:9px 15px; cursor:pointer; min-height:40px; }
.admin-top .exit:hover{ background:var(--ink); color:var(--bg); border-color:var(--ink); }

.admin-body{ flex:1; overflow-y:auto; }
.admin-inner{ max-width:1180px; margin:0 auto; padding:clamp(22px,3vw,34px) clamp(18px,3vw,30px) 60px; }

/* summary strip */
.adm-summary{ display:grid; grid-template-columns:repeat(4,1fr); border:1px solid var(--line); margin-bottom:26px; }
.adm-summary .s{ padding:20px 22px; border-right:1px solid var(--line); display:flex; flex-direction:column; gap:7px; }
.adm-summary .s:last-child{ border-right:none; }
.adm-summary .s .k{ font-size:10.5px; letter-spacing:0.16em; text-transform:uppercase; color:var(--faint); }
.adm-summary .s .v{ font-family:var(--serif); font-size:34px; line-height:1; }
.adm-summary .s .sub{ font-size:11.5px; color:var(--muted); }
.adm-summary .s .v .unit{ font-family:var(--body); font-size:14px; color:var(--faint); }

/* toolbar */
.adm-toolbar{ display:flex; align-items:center; justify-content:space-between; gap:16px; flex-wrap:wrap; margin-bottom:16px; }
.adm-search{ display:flex; align-items:center; gap:9px; border:1px solid var(--line); padding:0 14px; min-height:44px; flex:1; min-width:220px; max-width:340px; }
.adm-search input{ border:none; background:transparent; outline:none; font-family:var(--body); font-size:13.5px; color:var(--ink); width:100%; }
.adm-search svg{ width:15px; height:15px; color:var(--faint); flex-shrink:0; }
.adm-filters{ display:flex; gap:8px; flex-wrap:wrap; }
.adm-filters button{ font-size:11px; letter-spacing:0.1em; text-transform:uppercase; padding:9px 14px; border:1px solid var(--line); background:transparent; color:var(--muted); cursor:pointer; min-height:40px; transition:.2s var(--ease); }
.adm-filters button:hover{ border-color:var(--ink); color:var(--ink); }
.adm-filters button.on{ background:var(--ink); color:var(--bg); border-color:var(--ink); }
.adm-filters button .cnt{ opacity:.6; margin-left:5px; }

/* table */
.adm-table{ width:100%; border-collapse:collapse; border:1px solid var(--line); font-size:13px; }
.adm-table th{ text-align:left; font-weight:600; font-size:10.5px; letter-spacing:0.12em; text-transform:uppercase; color:var(--faint); padding:13px 16px; border-bottom:1px solid var(--line); background:var(--band); cursor:pointer; white-space:nowrap; user-select:none; }
.adm-table th .sort{ opacity:.4; margin-left:5px; font-size:9px; }
.adm-table th.active .sort{ opacity:1; color:var(--ink); }
.adm-table td{ padding:14px 16px; border-bottom:1px solid var(--line-soft); vertical-align:middle; }
.adm-table tbody tr{ cursor:pointer; transition:background .18s var(--ease); }
.adm-table tbody tr:hover{ background:var(--band); }
.adm-table tbody tr:last-child td{ border-bottom:none; }
.adm-table .g-name{ font-family:var(--serif); font-size:16px; }
.adm-table .ref{ font-size:11px; color:var(--faint); letter-spacing:0.04em; }
.adm-table .nights{ color:var(--faint); font-size:11px; }
.chan{ font-size:11px; letter-spacing:0.06em; color:var(--muted); display:inline-flex; align-items:center; gap:6px; }
.chan::before{ content:""; width:6px; height:6px; border-radius:50%; background:var(--faint); }
.chan.WhatsApp::before{ background:oklch(0.6 0.13 150); }
.chan.Web::before{ background:var(--accent); }
.chan.Booking::before{ background:var(--brass); }

.pill{ display:inline-flex; align-items:center; gap:7px; font-size:10.5px; letter-spacing:0.1em; text-transform:uppercase; padding:6px 11px; border:1px solid var(--line); color:var(--ink); white-space:nowrap; }
.pill::before{ content:""; width:6px; height:6px; border-radius:50%; background:currentColor; }
.pill.New{ color:oklch(0.5 0.13 254); border-color:oklch(0.5 0.13 254 / .4); background:oklch(0.5 0.13 254 / .07); }
.pill.Confirmed{ color:oklch(0.5 0.11 150); border-color:oklch(0.5 0.11 150 / .4); background:oklch(0.5 0.11 150 / .07); }
.pill.Checkedin{ color:oklch(0.52 0.1 78); border-color:oklch(0.52 0.1 78 / .45); background:oklch(0.52 0.1 78 / .08); }
.pill.Cancelled{ color:var(--faint); border-color:var(--line); background:transparent; }
.adm-empty{ padding:40px; text-align:center; color:var(--faint); font-size:13px; }

/* detail panel */
.adm-ov{ position:fixed; inset:0; z-index:140; }
.adm-ov-scrim{ position:absolute; inset:0; background:oklch(0.18 0.02 60 / .4); opacity:0; pointer-events:none; transition:opacity .3s var(--ease); }
.adm-ov-scrim.show{ opacity:1; pointer-events:auto; }
.adm-detail{ position:absolute; top:0; right:0; bottom:0; width:min(92vw,460px); background:var(--bg); border-left:1px solid var(--line); transform:translateX(100%); transition:transform .4s var(--ease); display:flex; flex-direction:column; }
.adm-detail.show{ transform:translateX(0); }
.adm-detail .d-top{ display:flex; align-items:flex-start; justify-content:space-between; padding:24px 26px 20px; border-bottom:1px solid var(--line); }
.adm-detail .d-top .ref{ font-size:11px; letter-spacing:0.12em; text-transform:uppercase; color:var(--faint); }
.adm-detail .d-top h3{ font-size:26px; margin-top:6px; }
.adm-detail .d-close{ width:40px; height:40px; border:1px solid var(--line); background:transparent; font-size:16px; cursor:pointer; color:var(--ink); flex-shrink:0; }
.adm-detail .d-body{ overflow-y:auto; flex:1; padding:24px 26px; display:flex; flex-direction:column; gap:22px; }
.d-facts{ display:grid; grid-template-columns:1fr 1fr; gap:1px; background:var(--line); border:1px solid var(--line); }
.d-facts .df{ background:var(--bg); padding:14px 16px; display:flex; flex-direction:column; gap:4px; }
.d-facts .df .k{ font-size:10px; letter-spacing:0.14em; text-transform:uppercase; color:var(--faint); }
.d-facts .df .v{ font-family:var(--serif); font-size:17px; }
.d-block .k{ font-size:10.5px; letter-spacing:0.16em; text-transform:uppercase; color:var(--faint); margin-bottom:9px; }
.d-block p{ color:var(--ink); margin:0; font-size:14px; }
.d-block .note-empty{ color:var(--faint); font-style:italic; }
.d-status-row{ display:flex; gap:8px; flex-wrap:wrap; }
.d-status-row button{ font-size:11px; letter-spacing:0.08em; text-transform:uppercase; padding:9px 13px; border:1px solid var(--line); background:transparent; color:var(--muted); cursor:pointer; min-height:40px; transition:.2s var(--ease); }
.d-status-row button:hover{ border-color:var(--ink); color:var(--ink); }
.d-status-row button.on{ background:var(--ink); color:var(--bg); border-color:var(--ink); }
.adm-detail .d-foot{ border-top:1px solid var(--line); padding:16px 26px; display:flex; gap:12px; }
.adm-detail .d-foot a{ flex:1; }

@media (max-width:760px){
  .adm-summary{ grid-template-columns:1fr 1fr; }
  .adm-summary .s:nth-child(2){ border-right:none; }
  .adm-summary .s:nth-child(1),.adm-summary .s:nth-child(2){ border-bottom:1px solid var(--line); }
  .adm-table .hide-sm{ display:none; }
  .adm-table th.hide-sm{ display:none; }
}