@import url('/css/dar-dhiafa-source.css');
@font-face{font-family:Archivo;src:url('/fonts/archivo-latin.woff2') format('woff2');font-weight:300 900;font-stretch:62% 125%;font-display:swap}
@font-face{font-family:Archivo;src:url('/fonts/archivo-latin-italic.woff2') format('woff2');font-style:italic;font-weight:300 900;font-stretch:62% 125%;font-display:swap}
:root{--touch-target:44px;--focus:var(--door)}
html{scroll-padding-top:100px}
body{overflow-wrap:break-word}
::selection{background:var(--door);color:var(--paper)}
a{text-underline-offset:.2em}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
.skip-link{position:fixed;top:8px;left:16px;z-index:100;background:var(--ink);color:var(--paper);padding:12px 20px;transform:translateY(-150%)}
.skip-link:focus{transform:none}
.top .wrap{gap:clamp(12px,2vw,24px);flex-wrap:wrap}
.nav{flex-wrap:wrap;min-width:0;max-width:100%}
.brand{max-width:180px;overflow-wrap:normal}
.brand{width:105px}
.brand img{max-height:48px;width:auto}
.nav a,.menu-btn,.copy{min-height:var(--touch-target);display:inline-flex;align-items:center}
.menu-btn{display:none;padding-inline:8px}
.btn{min-height:var(--touch-target);max-width:100%;min-width:0;text-align:center;overflow-wrap:anywhere}
.btn:hover{color:var(--paper)}
.book p{margin:0}
.book .btn{box-sizing:border-box}
.book .kick a{font-weight:600}
/* Preserve the mockup's display scale; let enlarged text reflow instead of clipping. */
.hero-head{display:flex;flex-wrap:wrap}
.mast{flex:1 1 65%;min-width:0;font-size:clamp(4rem,13.2vw,12.25rem);overflow-wrap:anywhere}
.hero-meta{min-width:0;max-width:100%}
.hero-head > *,.book > *,.blackbox > *{min-width:0}
.hero-img{aspect-ratio:20/23;align-self:start}
.num{font-size:clamp(2.75rem,5.4vw,5.25rem);line-height:.95;overflow-wrap:anywhere}
.num .dot::after{content:'\200b'}
.blackbox{container-type:inline-size}
.blackbox h2{overflow-wrap:anywhere;font-size:clamp(26px,10cqi,72px)}
.mbar{flex-wrap:wrap}
.mbar .btn{white-space:normal;flex-shrink:0}
.line small{flex-shrink:0}
.dhiafa-editor{padding:0!important;max-width:none!important}
.dhiafa-editor .cc-dyn-block{outline:1px dashed var(--door)}
.rates-wrap:focus-visible{outline:2px solid var(--focus);outline-offset:4px}
.rates td:first-child{font-weight:700}
@media(min-width:901px){.nav [data-visibility="mobile"]{display:none}}
@media(min-width:901px) and (max-width:1100px){.nav{gap:12px;font-size:13px}.top .btn{padding-inline:12px}.top .wrap{gap:12px}}
@media(max-width:900px){
  .menu-btn{display:inline-flex}
  .nav [data-visibility="desktop"]{display:none}
  .nav{display:none;max-height:calc(100dvh - var(--header-height,68px) - var(--booking-bar-height,76px));overflow-y:auto;flex-wrap:nowrap}
  .nav.open{display:flex}
  .menu-btn{margin-inline-start:auto}
  body{padding-bottom:var(--booking-bar-height,calc(76px + env(safe-area-inset-bottom,0px)))}
  footer{padding-bottom:28px}
  .hero-img{aspect-ratio:5/6}
  .mbar{padding-inline:max(16px,env(safe-area-inset-left,0px)) max(16px,env(safe-area-inset-right,0px))}
}
@media(max-width:620px){
  .blackbox h2{font-size:clamp(26px,10cqi,48px)}
  .access div{grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);gap:12px}
  .rcats th,.rcats td{font-size:14px}
  .mbar .btn{padding:12px 16px}
  .mbar p{font-size:12px}
  .line{gap:4px 12px}
  .line small{width:100%}
  table.rates{min-width:0}
  .rates thead{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0,0,0,0)}
  .rates,.rates tbody,.rates tr,.rates td{display:block;width:100%;box-sizing:border-box}
  .rates tr{margin-bottom:20px;border:1px solid var(--line)}
  .rates td{display:flex;justify-content:space-between;gap:12px;text-align:end;padding:12px 16px;border-bottom:1px solid var(--line)}
  .rates td:first-child{background:var(--tint);text-align:start}
  .rates td[data-label]::before{content:attr(data-label);text-align:start;font-weight:400;color:var(--muted);margin-inline-end:auto}
  .rates td:last-child{border-bottom:0}
  .season-key{font-size:14px;color:var(--muted)}
}
@media(max-width:390px){.mast{font-size:clamp(3.25rem,16.4vw,4rem)}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}*,*::before,*::after{animation:none!important;transition:none!important}}

/* Inner pages: breadcrumb, title and lede, then the content with no repeated title. */
.page-heading{padding-block:clamp(20px,3vw,36px) clamp(36px,5vw,72px)}
.crumbs ol{display:flex;flex-wrap:wrap;gap:4px 10px;margin:0 0 clamp(20px,3vw,40px);padding:0;list-style:none;font-size:13px;color:var(--muted)}
.crumbs li+li::before{content:'/';margin-inline-end:10px;color:var(--line)}
.crumbs a{text-decoration:none;display:inline-flex;min-height:var(--touch-target);align-items:center}
.crumbs a:hover{color:var(--ink);text-decoration:underline}
.crumbs li{display:inline-flex;align-items:center}
.crumbs [aria-current]{color:var(--ink)}
.page-heading-grid{container-type:inline-size;display:grid;grid-template-columns:minmax(0,1.5fr) minmax(0,1fr);gap:clamp(16px,4vw,64px);align-items:end}
.page-heading h1{font-family:var(--display);font-size:clamp(2.25rem,6.2cqi,6.5rem);font-weight:900;line-height:.92;letter-spacing:-.035em;margin:0;text-transform:uppercase;font-variation-settings:"wdth" 110;text-wrap:balance;overflow-wrap:anywhere}
.page-lede{margin:0;max-width:44ch;font-size:clamp(17px,1.5vw,20px);line-height:1.45;color:var(--muted);text-wrap:pretty}
.page-heading + .chap,.page-heading + .contact{padding-top:clamp(40px,5vw,80px)}
.eyebrow{margin:0;font-size:12px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--door)}
h2.sub{font-size:clamp(28px,3.4vw,48px);line-height:1;letter-spacing:-.02em;font-weight:900;margin-top:12px}
.nav a[aria-current="page"]{border-bottom-color:var(--ink)}
.nav.open a[aria-current="page"]{font-weight:700;border-bottom-color:var(--line)}

/* Contact block: tappable telephone and e-mail, copy and directions as secondary actions. */
.line > a:not(.copy){font-size:clamp(17px,1.6vw,20px);font-weight:600;text-decoration:none;color:var(--paper)}
.line > a:not(.copy):hover{text-decoration:underline}
.line > span{font-size:clamp(15px,1.3vw,17px);font-weight:500;user-select:text}
a.copy{text-decoration:none;display:inline-flex;align-items:center;min-height:var(--touch-target)}

/* End of inner pages: next page + direct booking. */
.next-band{border-top:1px solid var(--ink)}
.next-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:0}
.next-link{min-width:0;overflow-wrap:anywhere;display:grid;gap:8px;align-content:center;padding-block:clamp(32px,5vw,64px);padding-inline-end:clamp(16px,3vw,40px);text-decoration:none;border-inline-end:1px solid var(--line)}
.next-link small{font-size:12px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--muted)}
.next-link > span{font-family:var(--display);font-weight:900;font-size:clamp(32px,4.4vw,64px);line-height:1;letter-spacing:-.03em;text-transform:uppercase;font-variation-settings:"wdth" 110}
.next-link .arr{display:inline-block;transition:transform .2s}
.next-link:hover > span{color:var(--door)}
.next-link:hover .arr{transform:translateX(6px)}
.next-book{min-width:0;display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:16px 24px;padding-block:clamp(32px,5vw,64px);padding-inline-start:clamp(16px,3vw,40px)}
.next-book p{margin:0;max-width:30ch;color:var(--muted)}
.next-book p b{display:block;color:var(--ink);font-size:18px;margin-bottom:4px}
.next-grid > .next-book:only-child{grid-column:1/-1;padding-inline-start:0}

/* Footer */
footer{padding-block:clamp(40px,5vw,72px) 28px}
footer .foot-grid{display:grid;grid-template-columns:minmax(0,1.3fr) repeat(3,minmax(0,1fr));gap:32px clamp(24px,3vw,48px);font-size:14px;color:var(--muted);justify-content:normal}
.foot-brand b{display:block;font-family:var(--display);font-weight:900;font-size:28px;line-height:.95;letter-spacing:-.02em;text-transform:uppercase;width:min-content}
.foot-brand p{margin:14px 0 0;max-width:28ch}
.foot-h{margin:0 0 12px;font-size:12px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--ink)}
.foot-list{list-style:none;margin:0;padding:0;display:grid;gap:2px}
.foot-list a{text-decoration:none;display:inline-flex;align-items:center;min-height:32px}
.foot-list a:hover{color:var(--ink);text-decoration:underline}
.foot-list li:not(:has(a)){padding-block:6px}
.foot-note{margin:0 0 16px;max-width:26ch}
footer .foot-base{margin-top:clamp(32px,4vw,56px);padding-top:20px;background:linear-gradient(var(--line),var(--line)) var(--gutter) 0/calc(100% - 2 * var(--gutter)) 1px no-repeat;font-size:12px}
@media(max-width:1100px){footer .foot-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:900px){
  .page-heading-grid{grid-template-columns:minmax(0,1fr);gap:16px}
  .page-heading h1{font-size:clamp(1.75rem,10.5cqi,5rem)}
  .next-grid{grid-template-columns:minmax(0,1fr)}
  .next-link{border-inline-end:0;border-bottom:1px solid var(--line);padding-inline-end:0}
  .next-book{padding-inline-start:0}
  .foot-list a{min-height:var(--touch-target)}
}
@media(max-width:620px){
  footer .foot-grid{grid-template-columns:minmax(0,1fr)}
  .next-book .btn{width:100%}
}

/* Motion: the mockup's slow rise and settle, extended to inner pages and to
   content entering the viewport. dar-dhiafa.js adds .reveal only when motion
   is allowed, so without JavaScript everything is simply visible. */
@media (prefers-reduced-motion:no-preference){
  .page-heading h1{animation:rise .9s cubic-bezier(.2,.7,.1,1) both}
  .page-lede,.crumbs{animation:rise .9s .15s cubic-bezier(.2,.7,.1,1) both}
  .reveal{opacity:.001;transform:translateY(24px);transition:opacity .9s cubic-bezier(.2,.7,.1,1) var(--reveal-delay,0s),transform 1.1s cubic-bezier(.2,.7,.1,1) var(--reveal-delay,0s)}
  .reveal.is-in{opacity:1;transform:none}
  figure.big,.wide,.duo,.gallery > *{overflow:hidden}
  .reveal.big img,.reveal .big img,.reveal.wide img{transform:scale(1.06);transition:transform 1.8s cubic-bezier(.2,.7,.1,1) var(--reveal-delay,0s)}
  .reveal.is-in.big img,.reveal.is-in .big img,.reveal.is-in.wide img{transform:none}
}