/* Sadeem (BYTE, 7 Oct 2026). Logical properties throughout; physical left/right only for the caption anchors (photos do not mirror). */
@font-face{font-family:'Sadeem Arabic Serif';font-style:normal;font-weight:400;font-display:block;src:url(fonts/sadeem-serif-ar-400.woff2) format('woff2');unicode-range:U+0600-06FF,U+0750-077F,U+0870-0891,U+0897-08E1,U+08E3-08FF,U+200C-200E,U+2010-2011,U+204F,U+2E41,U+FB50-FDFF,U+FE70-FE74,U+FE76-FEFC}
@font-face{font-family:'Hanken Grotesk';font-style:normal;font-weight:400 600;font-display:swap;src:url(fonts/HankenGrotesk-normal-400-latin.woff2) format('woff2');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:'Sadeem Arabic Sans';font-style:normal;font-weight:400;font-display:swap;src:url(fonts/sadeem-sans-ar-400.woff2) format('woff2');unicode-range:U+0600-06FF,U+0750-077F,U+0870-0891,U+0897-08E1,U+08E3-08FF,U+200C-200E,U+2010-2011,U+204F,U+2E41,U+FB50-FDFF,U+FE70-FE74,U+FE76-FEFC}
@font-face{font-family:'Sadeem Arabic Sans';font-style:normal;font-weight:500 600;font-display:swap;src:url(fonts/sadeem-sans-ar-600.woff2) format('woff2');unicode-range:U+0600-06FF,U+0750-077F,U+0870-0891,U+0897-08E1,U+08E3-08FF,U+200C-200E,U+2010-2011,U+204F,U+2E41,U+FB50-FDFF,U+FE70-FE74,U+FE76-FEFC}
@font-face{font-family:'Instrument Serif';font-style:italic;font-weight:400;font-display:swap;src:url(fonts/InstrumentSerif-italic-400-latin.woff2) format('woff2');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';font-style:normal;font-weight:400;font-display:swap;src:url(fonts/InstrumentSerif-normal-400-latin.woff2) format('woff2');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}

:root{
  --clay:#B65E3C;--clay-deep:#5E2B1B;--ochre:#D9A05B;--sand:#EDDDC3;--blush:#F2CDBB;
  --teal-deep:#0E5B63;--water:#38B2AC;--palm:#2E4A32;--lamp:#F4B24E;--night:#0B1330;--ink:#22150F;--cream:#FBF3E6;
  --pad:24px;--hdr:64px;--sp:20px;--ease:cubic-bezier(.22,.61,.36,1);
  --disp:"Instrument Serif",Georgia,serif;--body:"Hanken Grotesk",system-ui,sans-serif;
  --arsans:"Sadeem Arabic Sans","Hanken Grotesk",system-ui,sans-serif;--arserif:'Sadeem Arabic Serif',"Instrument Serif",serif;
}
@media(min-width:768px){:root{--pad:48px;--sp:40px}}
@media(min-width:1024px){:root{--pad:80px}}
@media(min-width:1200px){:root{--sp:48px}}
*{box-sizing:border-box}
[hidden]{display:none!important}
html{background:var(--night);color:var(--cream);-webkit-text-size-adjust:100%}
@media(prefers-reduced-motion:no-preference){html{scroll-behavior:smooth}}
body{margin:0;font:400 1.0625rem/1.6 var(--body);background:var(--night);overflow-x:hidden}
:lang(ar){letter-spacing:0!important;font-family:var(--arsans);line-height:1.85}
html:lang(ar) body{font-size:1rem}
a{color:inherit}
:focus-visible{outline:2px solid var(--water);outline-offset:3px}
.sr{position:absolute;inline-size:1px;block-size:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.skip{position:fixed;inset-block-start:8px;inset-inline-start:8px;z-index:100;padding:10px 16px;background:var(--cream);color:var(--ink);border-radius:4px;transform:translateY(-200%);text-decoration:none;font-weight:600}
.skip:focus{transform:none}
h1,h2,h3,h4{font-family:var(--disp);font-weight:400;margin:0}
h2:lang(ar),h3:lang(ar),h4:lang(ar),.pv:lang(ar),.sh:lang(ar){font-family:var(--arserif);line-height:1.3}

/* header */
.hdr{position:fixed;inset-inline:0;top:0;z-index:50;block-size:var(--hdr);display:flex;align-items:center;gap:8px;
  padding-inline:var(--pad);padding-block-start:env(safe-area-inset-top);transition:transform .4s var(--ease),background-color .3s}
.hdr::before{content:"";position:absolute;inset-inline:0;top:0;block-size:170%;pointer-events:none;z-index:-1;
  background:linear-gradient(to bottom,rgba(20,10,6,.5),rgba(20,10,6,0));transition:opacity .3s}
.hdr.solid{background:rgba(11,19,48,.8)}.hdr.solid::before{opacity:0}
.hdr.hide{transform:translateY(-100%)}
.logo{display:block;position:relative;inline-size:100px;block-size:42px;margin-inline-end:auto;overflow:visible}
html[lang=ar] .logo{inline-size:65px;block-size:48px}
.logo img{position:absolute;inset-block-start:50%;inset-inline-start:0;translate:0 -50%;display:block}
.logo .en{block-size:42px;inline-size:auto;overflow:visible}
.logo .ar{block-size:48px;inline-size:auto;overflow:visible}
html[lang=en] .logo .ar,html[lang=ar] .logo .en,html[lang=en] .flogo .ar,html[lang=ar] .flogo .en{display:none}
.req,.lang{min-block-size:44px;display:inline-flex;align-items:center;padding-inline:14px;font:500 .9rem/1 var(--body);text-decoration:none;color:var(--cream)}
.hdr:lang(ar) .req,.hdr:lang(ar) .lang{font-family:var(--arsans);font-weight:600;font-size:.95rem}
.req{border:1px solid rgba(251,243,230,.6);border-radius:999px;margin-inline-end:4px}
.lang{background:none;border:0;cursor:pointer;min-inline-size:44px;justify-content:center}
.req:hover,.lang:hover{color:var(--lamp)}
@media(max-width:767px){.hdr.inreq .req{visibility:hidden}}

/* frames */
.frame,.hero{position:relative;block-size:100vh;block-size:100svh;min-block-size:480px;overflow:hidden;background:var(--night)}
.frame.room{block-size:90vh;block-size:90svh}
.pic{position:absolute;inset:0;overflow:hidden}
.frame img,.hero img.bg{position:absolute;inset:0;inline-size:100%;block-size:100%;object-fit:cover;display:block}
@media(min-width:768px) and (prefers-reduced-motion:no-preference){.frame:not(.sticky) img{inset-block:-5%;block-size:110%;will-change:translate}}
.js .frame img{opacity:0;transform:scale(1.06);transition:opacity .9s var(--ease),transform .9s var(--ease)}
.js .frame.in img.ld{opacity:1;transform:none}
.f02 img{object-position:50% 50%}.f06 img{object-position:62% 50%}.f09 img{object-position:50% 40%}
@media(min-width:768px){
  .f02 img{object-position:60% 50%}.f03 img{object-position:50% 50%}.f04 img{object-position:62% 50%}.f05 img{object-position:50% 50%}
  .f06 img{object-position:70% 50%}.f07 img{object-position:50% 50%}.f08 img{object-position:40% 50%}.f09 img{object-position:50% 40%}
}
@media(min-width:1024px){.f04 img{object-position:45% 50%}}

/* hero */
.hero img.bg{object-position:50% 62%;transform-origin:50% 100%}
@media(min-width:768px){.hero img.bg{object-position:50% 55%}}
@media(prefers-reduced-motion:no-preference){.hero img.bg{animation:settle 1.8s var(--ease) both}}
@keyframes settle{from{transform:scale(1.06)}to{transform:none}}
/* scrims are short bands tuned from measured pixels (body >= 4.5:1, display >= 3:1 at the 95th-percentile brightest background) */
.hero::after{content:"";position:absolute;inset:0;pointer-events:none;background:linear-gradient(to top,rgba(20,10,6,.78),rgba(20,10,6,0) 52%),linear-gradient(to bottom,rgba(20,10,6,.78),rgba(20,10,6,.62) 26%,rgba(20,10,6,.3) 42%,rgba(20,10,6,0) 56%)}
@media(min-width:768px) and (max-width:1023px){.hero::after{background:linear-gradient(to top,rgba(20,10,6,.86),rgba(20,10,6,.5) 34%,rgba(20,10,6,0) 64%),linear-gradient(to bottom,rgba(20,10,6,.78),rgba(20,10,6,.62) 26%,rgba(20,10,6,.3) 42%,rgba(20,10,6,0) 56%)}}
.hero .hin{position:absolute;inset:0;z-index:2;padding-inline:var(--pad);display:flex;flex-direction:column;justify-content:space-between;
  padding-block:calc(var(--hdr) + 5svh) calc(28px + env(safe-area-inset-bottom))}
h1{font:400 clamp(2.75rem,9vw,7rem)/.98 var(--disp);text-wrap:balance;max-inline-size:11em;text-shadow:0 2px 24px rgba(20,10,6,.35)}
h1 em{font-style:italic}
h1:lang(ar){font-family:var(--arserif);font-size:calc(clamp(2.75rem,9vw,7rem)*.92);line-height:1.25;font-weight:400}
h1:lang(ar) em{font-style:normal;font-weight:700}
@media(max-width:767px){h1{font-size:clamp(3rem,13vw,4rem)}h1:lang(ar){font-size:calc(clamp(3rem,13vw,4rem)*.92)}}
.sub{margin:0 0 14px;font-size:1.25rem;line-height:1.45;max-inline-size:34rem}
.sub:lang(ar){font-size:1.15rem}
.cue{display:inline-flex;align-items:center;gap:10px;min-block-size:44px;font:500 .75rem/1 var(--body);text-transform:uppercase;letter-spacing:.14em;color:var(--cream);text-decoration:none}
.cue:lang(ar){font-family:var(--arsans);font-size:.85rem;font-weight:600;text-transform:none;letter-spacing:0}
.cue svg{inline-size:18px;block-size:18px}
.disc{margin:20px 0 0;font-size:.9375rem;line-height:1.45;max-inline-size:34rem}
.disc:lang(ar){font-size:.95rem}
.bottom{position:relative;display:flex;flex-direction:column;align-items:flex-start}

/* scrim bands behind captions (frames with bottom captions use .sb, top captions .st); not on the phone room plates */
.frame.sb::after,.frame.st::after{content:"";position:absolute;inset:0;pointer-events:none;z-index:1}
.frame.sb::after{background:linear-gradient(to top,rgba(20,10,6,.84),rgba(20,10,6,.6) 26%,rgba(20,10,6,.25) 46%,rgba(20,10,6,0) 62%)}
.frame.st::after{background:linear-gradient(to bottom,rgba(20,10,6,.86),rgba(20,10,6,.7) 34%,rgba(20,10,6,.35) 52%,rgba(20,10,6,0) 70%)}
@media(min-width:900px){
  .frame.room.sb::after{background:linear-gradient(to top,rgba(20,10,6,.86),rgba(20,10,6,.7) 36%,rgba(20,10,6,.38) 56%,rgba(20,10,6,0) 76%)}
  .frame.room.st::after{background:linear-gradient(to bottom,rgba(20,10,6,.9),rgba(20,10,6,.82) 46%,rgba(20,10,6,.55) 62%,rgba(20,10,6,0) 84%)}
}
@media(max-width:899px){.frame.room::after{display:none}}
/* wide-short viewports (laptops, tablet landscape): the cover crop shows more bright sky behind the captions, so the bands hold longer */
@media(min-width:1024px) and (max-height:860px){
  .frame.st::after{background:linear-gradient(to bottom,rgba(20,10,6,.88),rgba(20,10,6,.78) 52%,rgba(20,10,6,.5) 68%,rgba(20,10,6,0) 86%)}
  .hero::after{background:linear-gradient(to top,rgba(20,10,6,.8),rgba(20,10,6,0) 52%),linear-gradient(to bottom,rgba(20,10,6,.82),rgba(20,10,6,.74) 42%,rgba(20,10,6,.4) 56%,rgba(20,10,6,0) 70%)}
}
/* captions: physical anchors (photos do not mirror), local scrims, no cards */
.cap{position:absolute;z-index:2;isolation:isolate;left:var(--pad);bottom:calc(48px + env(safe-area-inset-bottom));inline-size:fit-content;max-inline-size:min(30rem,calc(100% - 2*var(--pad)));text-shadow:0 1px 14px rgba(20,10,6,.5);text-align:start}
.cap.top{bottom:auto;top:calc(var(--hdr) + 8svh)}
@media(min-width:768px){.cap.te{left:auto;right:var(--pad)}}
.cap h2{font-size:clamp(2rem,6vw,4.25rem);line-height:1.02;text-wrap:balance}
.cap h2:lang(ar){font-size:calc(clamp(2rem,6vw,4.25rem)*.92)}
.cap h2:lang(ar),.cap h3:lang(ar){line-height:1.35}
.cap h3{font-size:clamp(2.25rem,5vw,3.5rem);line-height:1.05}
.cap h3:lang(ar){font-size:calc(clamp(2.25rem,5vw,3.5rem)*.92)}
.cap .ln{margin:12px 0 0;font-size:1.125rem;line-height:1.45;max-inline-size:34ch}
.cap .ln:lang(ar){font-size:1.05rem;margin-block-start:.9rem}
.cap .eb{margin:0 0 8px;font-size:.75rem;text-transform:uppercase;letter-spacing:.14em;opacity:.9}
.cap .eb:lang(ar){font-size:.85rem;text-transform:none;letter-spacing:0;font-weight:600}
.cap .prow{display:flex;align-items:center;justify-content:space-between;gap:12px 20px;flex-wrap:wrap;margin-block-start:18px}
.price{margin:0;display:flex;align-items:baseline;flex-wrap:wrap;gap:0 8px}
.price small,.rp small{font-size:.8125rem;opacity:.85}
.pv{font:400 2rem/1.1 var(--disp);color:var(--ochre);font-variant-numeric:tabular-nums}
.pv:lang(ar){font-size:1.8rem}
.cd{display:inline-flex;align-items:center;gap:10px;min-block-size:48px;padding-inline:22px;border:1px solid rgba(251,243,230,.7);border-radius:999px;text-decoration:none;font:500 .95rem/1 var(--body);color:var(--cream);background:rgba(11,19,48,.35);transition:background-color .25s,color .25s,border-color .25s}
.cd:lang(ar){font-family:var(--arsans);font-weight:600}
.cd:hover{background:var(--lamp);color:var(--ink);border-color:var(--lamp)}
.cd svg{inline-size:18px;block-size:18px}
html[dir=rtl] .cd svg{transform:scaleX(-1)}

/* phone/tablet room plate: type on a flat surface under the photo */
@media(max-width:899px){
  .frame.room{block-size:auto;background:var(--night)}
  .frame.room .pic{position:relative;inset:auto;block-size:62vh;block-size:62svh}
  .frame.room .cap{position:static;inline-size:auto;max-inline-size:none;padding:24px var(--pad) 40px;background:var(--night);text-shadow:none}
}
@media(max-width:899px) and (min-width:768px){.frame.room .cap{padding-inline:var(--pad)}}

/* rooms heading band with index */
.breath{block-size:10vh;block-size:10svh;background:var(--night)}
.band{background:var(--night);padding:calc(var(--hdr) + 8svh) var(--pad) 6svh}
.band h2{font-size:clamp(2.25rem,7vw,5rem);line-height:1;text-wrap:balance;max-inline-size:12em}
.band h2:lang(ar){font-size:calc(clamp(2.25rem,7vw,5rem)*.92)}
.band p{margin:18px 0 0;font-size:1.25rem;max-inline-size:34rem;opacity:.9}
.band p:lang(ar){font-size:1.1rem}
.ridx{display:grid;grid-template-columns:1fr;gap:12px;margin-block-start:36px;max-inline-size:60rem}
.ri{display:grid;grid-template-columns:96px 1fr;grid-template-rows:auto auto;column-gap:16px;align-items:center;text-decoration:none;border:1px solid rgba(251,243,230,.16);border-radius:6px;overflow:hidden;min-block-size:72px;padding-inline-end:12px;transition:border-color .25s}
.ri:hover{border-color:rgba(251,243,230,.5)}
.ri img{grid-row:1/3;inline-size:96px;block-size:100%;min-block-size:72px;object-fit:cover;display:block}
.ri .rn{font:500 1rem/1.3 var(--body);align-self:end}.ri .rn:lang(ar){font-weight:600}
.ri .rp{align-self:start;font:400 1.25rem/1.2 var(--disp);color:var(--ochre)}.ri .rp:lang(ar){font-family:var(--arserif)}
.ri .rp small{font:400 .8rem var(--body);color:var(--cream);opacity:.8}
@media(min-width:768px){
  .ridx{grid-template-columns:repeat(3,1fr);gap:20px}
  .ri{grid-template-columns:1fr;column-gap:0;padding:0 0 14px;padding-inline-end:0}
  .ri img{grid-row:auto;inline-size:100%;block-size:auto;aspect-ratio:16/10}
  .ri .rn,.ri .rp{padding-inline:14px}.ri .rn{padding-block-start:12px}
}

/* night + request */
.night{position:relative;background:var(--night)}
.frame.sticky{position:sticky;top:0;z-index:0}
.frame.sticky::after{content:"";position:absolute;inset:0;pointer-events:none;background:radial-gradient(ellipse 90% 40% at 30% 14%,rgba(11,19,48,.88),rgba(11,19,48,.6) 55%,rgba(11,19,48,0) 100%)}
@media(max-width:767px){.frame.sticky::after{background:linear-gradient(to bottom,rgba(11,19,48,.92),rgba(11,19,48,.82) 40%,rgba(11,19,48,.5) 60%,rgba(11,19,48,0) 80%)}}
@media(min-width:1024px) and (max-height:860px){
  .frame.sticky::after{background:linear-gradient(to bottom,rgba(11,19,48,.92),rgba(11,19,48,.84) 46%,rgba(11,19,48,.5) 64%,rgba(11,19,48,0) 84%)}
}
.ncon{position:relative;z-index:2;margin-block-start:-100vh;margin-block-start:-100svh;padding:calc(var(--hdr) + 10svh) var(--pad) 12svh}
.nhead{max-inline-size:34rem;text-shadow:0 1px 18px rgba(11,19,48,.6)}
.nhead h2{font-size:clamp(2.25rem,7vw,5rem);line-height:1}
.nhead h2:lang(ar){font-size:calc(clamp(2.25rem,7vw,5rem)*.92)}
.nhead p{margin:14px 0 0;font-size:1.25rem}
.nhead p:lang(ar){font-size:1.1rem}
.nhead .nname{margin-block-start:10px;font-size:.95rem;max-inline-size:26rem}
.nhead .nname:lang(ar){font-size:.95rem}

.sheet{margin-block-start:30svh;max-inline-size:76rem;background:rgba(11,19,48,.94);border:1px solid rgba(251,243,230,.14);border-radius:6px;padding:24px var(--sp) 24px;scroll-margin-block-start:10svh;color:var(--cream);text-shadow:none}
@media(min-width:1200px){.sheet{padding-block:48px}@supports (backdrop-filter:blur(1px)){.sheet{background:rgba(11,19,48,.78);-webkit-backdrop-filter:blur(16px);backdrop-filter:blur(16px)}}}
@media(prefers-reduced-motion:no-preference){
  .js .sheet{opacity:0;transform:translateY(24px);transition:opacity .5s var(--ease),transform .5s var(--ease)}
  .js .sheet.in{opacity:1;transform:none}
}
.shead{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap;margin-block-end:28px}
.sh{font-size:clamp(1.9rem,4vw,2.75rem);line-height:1.1}
.sh:lang(ar){font-size:calc(clamp(1.9rem,4vw,2.75rem)*.92)}
.chip{font-size:.8rem;padding:6px 12px;border:1px solid rgba(251,243,230,.4);border-radius:999px;color:rgba(251,243,230,.85)}
.chip:lang(ar){font-size:.85rem}
.hint{margin:10px 0 0;font-size:.875rem;color:rgba(251,243,230,.78);line-height:1.5}
.step{border:0;margin:0 0 34px;padding:0;min-inline-size:0;scroll-margin-block-start:calc(var(--hdr) + 12px)}
.step.flag{outline:2px solid var(--lamp);outline-offset:10px;border-radius:6px}
.step legend{padding:0;margin-block-end:14px;font:600 .75rem/1 var(--body);text-transform:uppercase;letter-spacing:.14em;color:rgba(251,243,230,.78)}
.step legend:lang(ar){font-family:var(--arsans);font-size:.9rem;text-transform:none;letter-spacing:0}
#booking{display:block}
@media(min-width:1200px){
  #booking{display:grid;grid-template-columns:minmax(0,1fr) 22rem;column-gap:48px;align-items:start}
  .bside{position:sticky;top:calc(var(--hdr) + 24px);display:grid;gap:16px}
}
@media(max-width:1199px){.bside{display:contents}}

/* room cards */
.rcs{display:grid;gap:10px}
.rc{position:relative;display:grid;grid-template-columns:64px 1fr;align-items:center;gap:0 14px;min-block-size:72px;border:1px solid rgba(251,243,230,.25);border-radius:6px;overflow:hidden;cursor:pointer;padding-inline-end:44px;transition:border-color .25s}
.rc input{position:absolute;opacity:0;inset:0;inline-size:100%;block-size:100%;margin:0;cursor:pointer;z-index:2}
.rc .th{inline-size:64px;block-size:100%;min-block-size:72px;object-fit:cover;display:block;transition:transform .4s var(--ease)}
.rc .rb{display:grid;gap:2px;padding-block:8px}
.rc .rn{font:500 1rem/1.3 var(--body)}.rc .rn:lang(ar){font-weight:600}
.rc .rs{font-size:.8125rem;color:rgba(251,243,230,.78)}
.rc .rp{font:400 1.25rem/1.2 var(--disp);color:var(--ochre)}.rc .rp:lang(ar){font-family:var(--arserif)}
.rc .rp small{font:400 .8rem var(--body);color:var(--cream);opacity:.85}
.rc .ck{position:absolute;inset-inline-end:12px;inset-block-start:50%;translate:0 -50%;inline-size:24px;block-size:24px;padding:4px;border-radius:50%;background:var(--water);color:var(--ink);opacity:0;transform:scale(.7);transition:opacity .2s,transform .2s}
.rc:hover{border-color:rgba(251,243,230,.55)}
.rc:has(input:checked){border-color:var(--water);box-shadow:inset 0 0 0 1px var(--water)}
.rc:has(input:checked) .ck{opacity:1;transform:none}
.rc:has(input:focus-visible){outline:2px solid var(--water);outline-offset:3px}
@media(min-width:600px){
  .rcs{grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}
  .rc{grid-template-columns:1fr;padding-inline-end:0;align-items:start}
  .rc .th{inline-size:100%;block-size:auto;aspect-ratio:16/10;min-block-size:0}
  .rc:hover .th{transform:scale(1.03)}
  .rc .rb{padding:12px 14px 14px}
  .rc .ck{inset-block-start:10px;inset-inline-end:10px;translate:0 0}
}

/* calendar (dark glass) */
.sel{display:flex;align-items:center;justify-content:space-between;gap:8px;min-block-size:44px;margin-block-end:8px}
.seltxt{margin:0;min-inline-size:0;flex:1;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-weight:600;font-size:.95rem}
.seltxt.empty{font-weight:400;color:rgba(251,243,230,.78)}
.clr{flex:none;inline-size:44px;block-size:44px;display:grid;place-items:center;padding:0;border:1px solid rgba(251,243,230,.35);border-radius:50%;background:none;color:var(--cream);cursor:pointer}
.clr svg{inline-size:20px;block-size:20px}
.months{display:grid;grid-template-columns:minmax(0,1fr);gap:26px}
.months.two{grid-template-columns:repeat(2,minmax(0,1fr))}
.mh{display:flex;align-items:center;justify-content:space-between;gap:8px;min-block-size:44px}
.mh h4{flex:1;text-align:center;font-size:1.375rem;line-height:1.2}
.cn{flex:none;inline-size:44px;block-size:44px;display:grid;place-items:center;border:1px solid rgba(251,243,230,.35);border-radius:50%;background:none;color:var(--cream);cursor:pointer;padding:0}
.cn.ph{visibility:hidden;pointer-events:none}
.cn svg{inline-size:20px;block-size:20px}
html[dir=rtl] .cn svg{transform:scaleX(-1)}
.cn:disabled{opacity:.3;cursor:not-allowed}
.wk{display:grid;grid-template-columns:repeat(7,minmax(0,1fr))}
.dow{text-align:center;font-size:.8rem;line-height:1.2;padding:8px 0;font-weight:600;color:rgba(251,243,230,.72)}
.dow:lang(ar){font-size:.85rem}
.blank{min-block-size:44px}
.day{position:relative;inline-size:100%;min-block-size:44px;padding:0;border:0;background:none;color:var(--cream);font:500 1rem/1 var(--body);cursor:pointer;font-variant-numeric:tabular-nums;isolation:isolate}
@media(min-width:1200px){.day,.blank{min-block-size:48px}}
.day span{position:relative;z-index:1}
.day::before{content:"";position:absolute;inset-block:4px;inset-inline:0;z-index:0;background:transparent;transform:scaleX(0);transform-origin:left center;transition:transform .3s var(--ease);transition-delay:calc(var(--k,0)*28ms)}
html[dir=rtl] .day::before{transform-origin:right center}
.day:disabled{color:rgba(251,243,230,.28);cursor:not-allowed}
.day.bk{background:repeating-linear-gradient(135deg,transparent 0 5px,rgba(251,243,230,.16) 5px 6px);cursor:not-allowed;color:rgba(251,243,230,.82)}
.day.bk span{text-decoration:line-through;text-decoration-thickness:1px}
.day.td::after{content:"";position:absolute;z-index:1;inset-inline-start:50%;inset-block-end:6px;inline-size:4px;block-size:4px;margin-inline-start:-2px;border-radius:50%;background:var(--water)}
.day.rng::before{background:rgba(56,178,172,.22);transform:scaleX(1)}
.day.si::before,.day.so::before{background:var(--water);transform:scaleX(1)}
.day.si::before{border-start-start-radius:22px;border-end-start-radius:22px}
.day.so::before{border-start-end-radius:22px;border-end-end-radius:22px}
.day.si.alone::before{border-radius:22px}
.day.si span,.day.so span{color:var(--ink);font-weight:600}
.day.si.td::after,.day.so.td::after{background:var(--ink)}
.day:focus-visible{outline:2px solid var(--water);outline-offset:-2px;z-index:2}
@media(hover:hover){.day:not(:disabled):not(.si):not(.so):not(.bk):hover::before{background:rgba(56,178,172,.14);transform:scaleX(1)}}
.legend{display:flex;flex-wrap:wrap;gap:6px 20px;list-style:none;margin:20px 0 0;padding:0;font-size:.875rem;color:rgba(251,243,230,.85)}
.legend li{display:flex;align-items:center;gap:8px}
.lg{display:inline-block;inline-size:16px;block-size:16px;border-radius:4px;border:1px solid rgba(251,243,230,.4)}
.lg.bk{background:repeating-linear-gradient(135deg,transparent 0 3px,rgba(251,243,230,.45) 3px 4px)}
.lg.sl{background:var(--water);border-color:var(--water)}
.err{margin:8px 0 0;color:#FFB4A8;font-weight:600;font-size:.9rem}
.err:not(:empty)::before{content:"! ";font-weight:700}

/* guests, dinner switch, note */
.extras{display:flex;flex-wrap:wrap;gap:0 40px}
.stepper{display:inline-flex;align-items:center;gap:6px;border:1px solid rgba(251,243,230,.35);border-radius:999px;padding:3px}
.stepper button{inline-size:44px;block-size:44px;border-radius:50%;border:0;background:var(--cream);color:var(--ink);display:grid;place-items:center;cursor:pointer;padding:0}
.stepper svg{inline-size:20px;block-size:20px}
.stepper output{min-inline-size:48px;text-align:center;font:400 1.75rem/1 var(--disp);font-variant-numeric:tabular-nums}
.sw{display:flex;align-items:center;gap:14px;min-block-size:50px;cursor:pointer;position:relative}
.sw input{position:absolute;opacity:0;inline-size:44px;block-size:44px;margin:0;inset-inline-start:0;cursor:pointer}
.sw .trk{flex:none;inline-size:44px;block-size:26px;border-radius:999px;border:1px solid rgba(251,243,230,.5);position:relative;transition:background-color .2s,border-color .2s}
.sw .trk::after{content:"";position:absolute;inset-block-start:3px;inset-inline-start:3px;inline-size:18px;block-size:18px;border-radius:50%;background:var(--cream);transition:transform .2s var(--ease)}
.sw input:checked+.trk{background:var(--water);border-color:var(--water)}
.sw input:checked+.trk::after{background:var(--ink);transform:translateX(18px)}
html[dir=rtl] .sw input:checked+.trk::after{transform:translateX(-18px)}
.sw input:focus-visible+.trk{outline:2px solid var(--water);outline-offset:3px}
.swt{display:grid;gap:2px}.swt b{font-weight:600;font-size:1rem}.swt small{font-size:.875rem;color:rgba(251,243,230,.78)}
.notes{margin:0 0 8px}
.notes summary{display:flex;align-items:center;gap:10px;min-block-size:44px;cursor:pointer;list-style:none;font-weight:600;font-size:.95rem}
.notes summary::-webkit-details-marker{display:none}
.notes .pl{inline-size:20px;block-size:20px}
.notes .pl .v{transform-box:fill-box;transform-origin:center;transition:transform .2s}
.notes[open] .pl .v{transform:scaleY(0)}
.fld{display:block;margin-block:12px 0}
.fld span{display:block;font-size:.85rem;font-weight:600;margin-block-end:6px;color:rgba(251,243,230,.85)}
.fld input,.fld textarea{inline-size:100%;font:400 16px/1.4 var(--body);padding:12px 14px;border:1px solid rgba(251,243,230,.45);border-radius:4px;background:rgba(251,243,230,.08);color:var(--cream);min-block-size:48px;resize:vertical}
.fld input::placeholder,.fld textarea::placeholder{color:rgba(251,243,230,.62)}
.fld input:lang(ar),.fld textarea:lang(ar){font-family:var(--arsans)}
.fld input:focus-visible,.fld textarea:focus-visible{outline:2px solid var(--water);outline-offset:1px}

/* summary + send */
.sumbox{background:rgba(251,243,230,.06);border:1px solid rgba(251,243,230,.14);border-radius:4px;padding:20px}
.sthumb{display:none}
.sthumb img{inline-size:100%;block-size:auto;aspect-ratio:16/10;object-fit:cover;display:block;border-radius:3px;transition:opacity .3s}
@media(min-width:1200px) and (min-height:1000px){.sthumb{display:block;margin-block-end:16px}}
.sumbox h4{font:600 .75rem/1 var(--body);text-transform:uppercase;letter-spacing:.14em;color:rgba(251,243,230,.78);margin:0 0 10px}
.sumbox h4:lang(ar){font-family:var(--arsans);font-size:.9rem;text-transform:none;letter-spacing:0}
.rname{margin:0 0 14px;font:400 1.75rem/1.15 var(--disp)}.rname:lang(ar){font-family:var(--arserif);font-size:1.6rem}
.sempty{margin:0;font-size:.95rem;color:rgba(251,243,230,.85)}
.rows,.lines{margin:0;padding:0}
.rows>div,.lines>div{display:flex;justify-content:space-between;gap:16px;padding-block:6px;font-variant-numeric:tabular-nums}
.rows dt,.lines dt{margin:0;color:rgba(251,243,230,.78)}
.rows dd,.lines dd{margin:0;text-align:end;font-weight:500}
.lines{margin-block-start:10px;padding-block-start:10px;border-top:1px solid rgba(251,243,230,.14);font-size:.9375rem}
.lines:empty{display:none}
.stot{margin-block-start:14px;padding-block-start:14px;border-top:1px solid rgba(251,243,230,.14);display:grid;gap:2px}
.stot small{font:600 .75rem/1 var(--body);text-transform:uppercase;letter-spacing:.14em;color:rgba(251,243,230,.78)}
.stot small:lang(ar){font-family:var(--arsans);font-size:.9rem;text-transform:none;letter-spacing:0}
.stot b{font:400 2.5rem/1.1 var(--disp);color:var(--ochre);font-variant-numeric:tabular-nums}
.stot b:lang(ar){font-family:var(--arserif)}
.snote{font-size:.8125rem;color:rgba(251,243,230,.78)}
.sumbox.empty .rows,.sumbox.empty .lines,.sumbox.empty .stot,.sumbox.empty .rname{display:none}
.sumbox:not(.empty) .sempty{display:none}
.cnote2{display:none}
.send{position:relative;display:grid;gap:10px}
.bar-tot{display:none}
.status{margin:0;font-weight:600;font-size:.95rem;min-block-size:1.4em;color:var(--lamp)}
.status.ok{color:var(--cream)}
.status.warn{text-decoration:underline;text-underline-offset:3px}
.status:not(.ok)::before{content:"! ";font-weight:700}
.cta{position:relative;display:flex;align-items:center;justify-content:center;gap:12px;inline-size:100%;min-block-size:56px;padding:12px 24px;border-radius:999px;background:var(--lamp);color:var(--ink);text-decoration:none;font:600 1.05rem/1.2 var(--body);isolation:isolate}
.cta:lang(ar){font-family:var(--arsans)}
.cta svg{inline-size:22px;block-size:22px;flex:none}
.cta .l2{display:none}
.cta[aria-disabled=true]{background:rgba(251,243,230,.12);color:rgba(251,243,230,.78);cursor:not-allowed}
.cnote{margin:0}
/* below 1200: the send block is a sticky bar at the foot of the form */
@media(max-width:1199px){
  .sumbox{margin-block:8px 0}
  .cnote{display:none}.cnote2{display:block;margin-block-start:14px}
  .send{position:sticky;bottom:0;z-index:5;margin-inline:calc(var(--sp)*-1);margin-block-start:24px;padding:12px var(--sp) calc(12px + env(safe-area-inset-bottom));background:rgba(11,19,48,.97);border-top:1px solid rgba(251,243,230,.14);
    grid-template-columns:minmax(0,1fr) auto;align-items:center;gap:0 16px}
  .bar-tot{display:grid;grid-column:1;grid-row:1}
  .bar-tot small{font:600 .65rem/1.2 var(--body);text-transform:uppercase;letter-spacing:.08em;white-space:nowrap;color:rgba(251,243,230,.78)}
  .bar-tot small:lang(ar){font-family:var(--arsans);font-size:.8rem;text-transform:none;letter-spacing:0;white-space:nowrap}
  .bar-tot b{font:400 1.75rem/1.1 var(--disp);color:var(--ochre);font-variant-numeric:tabular-nums}.bar-tot b:lang(ar){font-family:var(--arserif)}
  .status{grid-column:1;grid-row:2;font-size:.8rem;font-weight:600;line-height:1.3;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
  .cta{grid-column:2;grid-row:1/3;inline-size:auto;min-block-size:48px;padding:10px 16px;font-size:.95rem;white-space:nowrap}
  .cta .l1{display:none}.cta .l2{display:inline}
}
@media(max-width:359px){.send{grid-template-columns:minmax(0,1fr)}.cta{grid-column:1;grid-row:auto;inline-size:100%}}
.ns{padding:12px 0;font-size:.95rem}
.ns p{margin:0 0 18px}

/* reveal */
.js .rv{opacity:0;transform:translateY(16px);transition:opacity .7s var(--ease),transform .7s var(--ease);transition-delay:calc(var(--i,0)*80ms)}
.js .rv.in{opacity:1;transform:none}
.xf{transition:opacity .3s}.xf.out{opacity:0}

footer{position:relative;z-index:3;padding:56px var(--pad) calc(48px + env(safe-area-inset-bottom));background:var(--night);border-top:1px solid rgba(251,243,230,.12);display:grid;gap:32px}
@media(min-width:1024px){footer{grid-template-columns:1fr 1fr;gap:64px;padding-block:72px 56px}}
footer .flogo{display:block;position:relative;block-size:48px;inline-size:fit-content;margin-block-end:20px;overflow:visible}
footer .flogo img{block-size:40px;inline-size:auto;display:block;overflow:visible}
footer .flogo .ar{block-size:48px}
footer .ds{margin:0 0 22px;font-size:.9rem;color:rgba(251,243,230,.78)}
footer .so{margin:0;font:400 1.75rem/1.2 var(--disp)}footer .so:lang(ar){font-family:var(--arserif)}
footer .d{margin:0 0 8px;font-size:.95rem;max-inline-size:34rem}
footer .s{margin:0 0 6px;color:rgba(251,243,230,.78);font-size:.875rem;max-inline-size:34rem}
footer ul{margin:20px 0 0;padding:0;list-style:none;display:flex;flex-wrap:wrap;gap:4px 18px}
footer li a{display:inline-block;padding:10px 0}

@media(prefers-reduced-motion:reduce){
  *,*::before,*::after{transition:none!important;animation:none!important}
  .js .frame img,.js .frame.in img,.js .rv,.js .sheet{opacity:1;transform:none}
  html{scroll-behavior:auto}
}