/* Cielo Rooftop Lounge. Tulum direction, phone first. */
:root{
  --sand:#f1e8d9; --sand2:#e7dac6; --paper:#f8f3e9;
  --green:#2f4438; --green-d:#243529;
  --ink:#2a211a; --dim:#6d6052; --clay:#b4522f; --clay-d:#9c4426;
  --line:rgba(42,33,26,.16); --line-2:rgba(42,33,26,.28);
  --arch:999px 999px 12px 12px;
  --tap:48px;
  --safe:env(safe-area-inset-bottom,0px);
}
*{box-sizing:border-box;margin:0;padding:0}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{background:var(--sand);color:var(--ink);font:300 17px/1.75 'Jost',system-ui,-apple-system,sans-serif;
     -webkit-font-smoothing:antialiased;overflow-x:hidden}
body:before{content:"";position:fixed;inset:0;z-index:50;pointer-events:none;opacity:.14;mix-blend-mode:multiply;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.5'/%3E%3C/svg%3E")}
img{max-width:100%;display:block}
a{color:inherit}
h1,h2,h3{font-family:'Cormorant Garamond',Georgia,serif;font-weight:300;line-height:1.04;letter-spacing:-.01em}
h1{font-size:clamp(46px,12vw,92px)}
h2,h1.pg{font-size:clamp(34px,7.4vw,58px)}
h3{font-size:clamp(22px,4.4vw,27px)}
.it{font-style:italic;color:var(--clay)}
p{color:var(--dim)}
.wrap{max-width:1180px;margin:0 auto;padding:0 20px}
section{padding:64px 0;position:relative}
/* the darker sand fades in and out instead of starting on a hard line */
.alt{background:linear-gradient(to bottom,var(--sand) 0,var(--sand2) 64px,var(--sand2) calc(100% - 64px),var(--sand) 100%)}
.deep{background:var(--green);color:#f1e5d2}
/* the grain sits over the page; lift the text of the dark sections above it so light text stays crisp */
.deep > .wrap,footer .wrap{position:relative;z-index:51}
.deep p,.deep .lead{color:rgba(241,229,210,.76)}
.deep h2,.deep h1.pg,.deep h3{color:#f1e5d2}
.eyebrow{font:400 11px/1 'Jost',sans-serif;letter-spacing:.38em;text-transform:uppercase;color:var(--clay);
         margin-bottom:18px}
.deep .eyebrow{color:#e2b77a}
.lead{color:var(--dim);font-size:17px;max-width:560px;margin-top:18px}
.center{text-align:center}
.center .lead{margin-left:auto;margin-right:auto}
.small{font-size:14px;color:var(--dim)}
.agave{width:50px;height:37px;color:var(--clay)}
.deep .agave{color:#e2b77a}
.div{display:flex;align-items:center;justify-content:center;gap:18px;padding:4px 0 26px}
.div:before,.div:after{content:"";height:1px;flex:0 1 110px;background:var(--line)}

/* buttons */
.btn{display:inline-flex;align-items:center;justify-content:center;min-height:var(--tap);padding:0 28px;
     border-radius:999px;background:var(--clay);color:#f8f3e9;border:1px solid var(--clay);text-decoration:none;
     font:400 11px/1 'Jost',sans-serif;letter-spacing:.28em;text-transform:uppercase;cursor:pointer}
.btn:hover{background:var(--clay-d);border-color:var(--clay-d)}
.btn.ghost{background:transparent;color:var(--ink);border-color:var(--line-2)}
.btn.ghost:hover{background:rgba(42,33,26,.05)}
.stickcta{position:fixed;left:50%;transform:translateX(-50%);z-index:53;box-shadow:0 6px 18px rgba(42,33,26,.28)}
.stickcta[hidden]{display:none}
.btn.tan{background:#d9c6a6;color:var(--ink);border-color:#d9c6a6}
.btn.tan:hover{background:#cbb690;border-color:#cbb690}
.deep .btn.ghost{color:#f1e5d2;border-color:rgba(241,229,210,.36)}
.deep .btn.ghost:hover{background:rgba(241,229,210,.08)}
.btn.sm{min-height:44px;padding:0 16px;font-size:10px;letter-spacing:.18em;white-space:nowrap}
.btns{display:flex;flex-wrap:wrap;gap:12px;margin-top:28px}
.center .btns{justify-content:center}

/* header */
.topbar{background:var(--green);color:#f1e5d2;text-align:center;padding:11px 16px;
        font:400 10px/1.5 'Jost',sans-serif;letter-spacing:.26em;text-transform:uppercase}
.topbar a{color:#e2b77a}
header{position:sticky;top:0;z-index:52;background:rgba(241,232,217,.94);backdrop-filter:blur(8px);
       border-bottom:1px solid var(--line)}
.navr{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:12px 20px;
      max-width:1180px;margin:0 auto}
.brand{display:flex;align-items:center;gap:10px;text-decoration:none}
.brand img{width:40px;height:51px;background:transparent}
.brand b{font-family:'Cormorant Garamond',serif;font-weight:400;font-size:21px;letter-spacing:.04em}
nav.links{display:none}
.menu-btn{display:inline-flex;align-items:center;justify-content:center;min-width:var(--tap);min-height:var(--tap);
          background:none;border:1px solid var(--line-2);border-radius:999px;padding:0 16px;color:var(--ink);
          font:400 10px/1 'Jost',sans-serif;letter-spacing:.2em;text-transform:uppercase;cursor:pointer}
.nav-head{display:none}
#menu[hidden]{display:none}
#menu{position:fixed;inset:0;z-index:60;background:var(--sand);padding:20px;display:flex;flex-direction:column}
#menu .mlist{display:flex;flex-direction:column;gap:4px;margin-top:24px}
#menu .mlist a{font-family:'Cormorant Garamond',serif;font-size:34px;text-decoration:none;padding:10px 0;
               border-bottom:1px solid var(--line)}
#menu .mfoot{margin-top:auto;padding-bottom:calc(16px + var(--safe))}

/* hero */
.hero{padding:40px 0 56px}
.hero .fig{margin-top:34px}

/* figures and photo slots */
.fig{background:linear-gradient(165deg,var(--sand2),rgba(47,68,56,.14));border:1px solid var(--line);
     border-radius:var(--arch);aspect-ratio:3/4;display:flex;align-items:center;justify-content:center;
     overflow:hidden;position:relative}
.fig .agave{width:64px;height:48px;opacity:.5}
.fig img,.fig video{width:100%;height:100%;object-fit:cover}
.fig.wide{aspect-ratio:4/3}
.fig.sq{aspect-ratio:1/1}
.deep .fig{background:linear-gradient(165deg,#36412f,#243529);border-color:rgba(241,229,210,.18)}
.deep .fig .agave{color:#e2b77a}

/* A filled slot has no frame and no hard crop. The photo fades out all the way round,
   following the arch itself and not its bounding box, so the curved shoulders go as soft
   as the sides do. The mask is a blurred arch drawn as an SVG and built by archmask() in
   tools/build.py, one per shape because the blur has to stretch evenly. The grade is eased
   so the contrast is not so deep. Empty slots keep their arch and their outline, or there
   is nothing left to see. */
.fig:has(> img),.fig:has(> video){border-color:transparent;background:none}
.fig > img,.fig > picture > img,.fig > video{
  -webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 300 400%22 preserveAspectRatio=%22none%22%3E%3Cfilter id=%22s%22 x=%22-20%25%22 y=%22-20%25%22 width=%22140%25%22 height=%22140%25%22%3E%3CfeGaussianBlur stdDeviation=%223.75%22/%3E%3C/filter%3E%3Cpath d=%22M7.5,390.7 L7.5,150.0 A142.5,142.5 0 0 1 292.5,150.0 L292.5,390.7 A1.8,1.8 0 0 1 290.7,392.5 L9.3,392.5 A1.8,1.8 0 0 1 7.5,390.7 Z%22 fill=%22%23fff%22 filter=%22url(%23s)%22/%3E%3C/svg%3E");mask-image:url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 300 400%22 preserveAspectRatio=%22none%22%3E%3Cfilter id=%22s%22 x=%22-20%25%22 y=%22-20%25%22 width=%22140%25%22 height=%22140%25%22%3E%3CfeGaussianBlur stdDeviation=%223.75%22/%3E%3C/filter%3E%3Cpath d=%22M7.5,390.7 L7.5,150.0 A142.5,142.5 0 0 1 292.5,150.0 L292.5,390.7 A1.8,1.8 0 0 1 290.7,392.5 L9.3,392.5 A1.8,1.8 0 0 1 7.5,390.7 Z%22 fill=%22%23fff%22 filter=%22url(%23s)%22/%3E%3C/svg%3E");
  -webkit-mask-size:100% 100%;mask-size:100% 100%;
  -webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;
  filter:contrast(.90) brightness(1.05) saturate(.93);
}
.fig.wide > img,.fig.wide > video{-webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 400 300%22 preserveAspectRatio=%22none%22%3E%3Cfilter id=%22s%22 x=%22-20%25%22 y=%22-20%25%22 width=%22140%25%22 height=%22140%25%22%3E%3CfeGaussianBlur stdDeviation=%225.0%22/%3E%3C/filter%3E%3Cpath d=%22M10.0,287.6 L10.0,200.0 A190.0,190.0 0 0 1 390.0,200.0 L390.0,287.6 A2.4,2.4 0 0 1 387.6,290.0 L12.4,290.0 A2.4,2.4 0 0 1 10.0,287.6 Z%22 fill=%22%23fff%22 filter=%22url(%23s)%22/%3E%3C/svg%3E");mask-image:url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 400 300%22 preserveAspectRatio=%22none%22%3E%3Cfilter id=%22s%22 x=%22-20%25%22 y=%22-20%25%22 width=%22140%25%22 height=%22140%25%22%3E%3CfeGaussianBlur stdDeviation=%225.0%22/%3E%3C/filter%3E%3Cpath d=%22M10.0,287.6 L10.0,200.0 A190.0,190.0 0 0 1 390.0,200.0 L390.0,287.6 A2.4,2.4 0 0 1 387.6,290.0 L12.4,290.0 A2.4,2.4 0 0 1 10.0,287.6 Z%22 fill=%22%23fff%22 filter=%22url(%23s)%22/%3E%3C/svg%3E")}
.fig.sq > img,.fig.sq > video{-webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 300 300%22 preserveAspectRatio=%22none%22%3E%3Cfilter id=%22s%22 x=%22-20%25%22 y=%22-20%25%22 width=%22140%25%22 height=%22140%25%22%3E%3CfeGaussianBlur stdDeviation=%223.75%22/%3E%3C/filter%3E%3Cpath d=%22M7.5,290.7 L7.5,150.0 A142.5,142.5 0 0 1 292.5,150.0 L292.5,290.7 A1.8,1.8 0 0 1 290.7,292.5 L9.3,292.5 A1.8,1.8 0 0 1 7.5,290.7 Z%22 fill=%22%23fff%22 filter=%22url(%23s)%22/%3E%3C/svg%3E");mask-image:url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 300 300%22 preserveAspectRatio=%22none%22%3E%3Cfilter id=%22s%22 x=%22-20%25%22 y=%22-20%25%22 width=%22140%25%22 height=%22140%25%22%3E%3CfeGaussianBlur stdDeviation=%223.75%22/%3E%3C/filter%3E%3Cpath d=%22M7.5,290.7 L7.5,150.0 A142.5,142.5 0 0 1 292.5,150.0 L292.5,290.7 A1.8,1.8 0 0 1 290.7,292.5 L9.3,292.5 A1.8,1.8 0 0 1 7.5,290.7 Z%22 fill=%22%23fff%22 filter=%22url(%23s)%22/%3E%3C/svg%3E")}

/* grids */
.g{display:grid;gap:20px}
.g2{grid-template-columns:1fr}
.g3{grid-template-columns:1fr}
.g4{grid-template-columns:1fr 1fr}
.g6{grid-template-columns:1fr 1fr;gap:12px}

/* night cards */
.night{text-align:center}
.night .fig{margin-bottom:18px}
.night .day{font-size:11px;letter-spacing:.3em;text-transform:uppercase;color:var(--dim)}
.night h3{margin:8px 0 4px}
.night .btns{justify-content:center;gap:10px;margin-top:16px}
/* Ticket cards: the flyer is the promoter's own art, so it is shown whole, never cropped into the arch,
   faded or colour graded. Cards sit centred, one or several, at a readable width. */
#ticketList{display:flex;flex-wrap:wrap;justify-content:center;gap:28px 24px}
#ticketList .night{width:min(100%,380px)}
#pastList{max-width:640px;margin:28px auto 0}
.pn-mon{font:400 11px/1 'Jost',sans-serif;letter-spacing:.38em;text-transform:uppercase;color:var(--clay);margin:30px 0 6px;text-align:left}
.pn-row{display:flex;flex-wrap:wrap;gap:12px 14px;align-items:center;padding:16px 0;border-top:1px solid var(--line);text-align:left}
.pn-d{width:46px;flex:none;text-align:center;font-family:'Cormorant Garamond',serif;font-size:30px;line-height:1}
.pn-d span{display:block;font:400 11px/1 'Jost',sans-serif;letter-spacing:.2em;text-transform:uppercase;color:var(--dim);margin-top:5px}
.pn-t{flex:1;min-width:0}
.pn-t h3{margin:0;font-size:24px}
.pn-t p{margin:2px 0 0;font-size:14px;color:var(--dim)}
.pn-th{flex:1 0 100%;aspect-ratio:2/1;border-radius:10px;overflow:hidden;background:var(--sand2)}
.pn-th img{display:block;width:100%;height:100%;object-fit:cover}
#ticketList .fig{aspect-ratio:auto;display:block;background:none;border:1px solid var(--line);border-radius:14px}
#ticketList .fig > img,#ticketList .fig > picture > img{height:auto;object-fit:contain;display:block;-webkit-mask-image:none;mask-image:none;filter:none}

/* the week. Day and time share the first line, what is on sits underneath, so a long
   night name never has to fight the time for room on a phone. */
.week{margin-top:38px;text-align:left;border-top:1px solid var(--line)}
.week .row{display:grid;grid-template-columns:1fr auto;gap:1px 16px;
           padding:15px 2px;border-bottom:1px solid var(--line);text-decoration:none;color:inherit}
.week a.row:hover .wname{color:var(--clay)}
.week .wday{font-size:11px;letter-spacing:.3em;text-transform:uppercase;color:var(--clay)}
.week .wtime{grid-column:2;grid-row:1;text-align:right;font-size:11px;letter-spacing:.16em;
             text-transform:uppercase;color:var(--dim);white-space:nowrap}
.week .wname{grid-column:1/-1;font-family:'Cormorant Garamond',serif;font-size:25px;line-height:1.25}
.week .wnote{display:inline-block;margin-left:10px;border:1px solid var(--line-2);border-radius:999px;
             padding:3px 10px;font:300 10px/1.4 'Jost',sans-serif;letter-spacing:.14em;
             text-transform:uppercase;color:var(--dim);vertical-align:3px}
.week .off .wday{color:var(--dim)}
.week .off .wname{font:300 17px/1.5 'Jost',sans-serif;color:var(--dim)}
@media (min-width:760px){
  .week .row{grid-template-columns:132px 1fr auto;align-items:baseline;padding:18px 2px}
  .week .wname{grid-column:2;grid-row:1}
  .week .wtime{grid-column:3}
}

/* menu rows */
.item{display:grid;grid-template-columns:1fr auto;gap:10px;align-items:baseline;padding:18px 0;
      border-bottom:1px solid var(--line)}
.item .n{font-family:'Cormorant Garamond',serif;font-size:24px;line-height:1.2}
.item .d{grid-column:1/-1;font-size:14px;color:var(--dim);margin-top:-4px}
.item .p{font-size:13px;letter-spacing:.14em;text-transform:uppercase;color:var(--clay)}

/* the client's two menu pages, stacked, as they print them */
.menupages{display:flex;flex-direction:column;gap:20px;max-width:720px;margin:34px auto 0}
.menupages img{width:100%;height:auto;border:1px solid var(--line)}
#drinks{scroll-margin-top:80px}

/* where you can sit: an editorial grid, the picture and a small spaced name under a hairline */
.spaces{grid-template-columns:1fr 1fr;gap:26px 14px}
.spaces h3{font:400 11px/1.5 'Jost',sans-serif;letter-spacing:.3em;text-transform:uppercase;text-align:center;color:var(--green);margin:16px 0 0}
.spaces h3::before{content:"";display:block;width:26px;height:1px;background:var(--clay);margin:0 auto 12px}
@media (min-width:760px){.spaces{grid-template-columns:repeat(3,1fr);gap:44px 28px}.spaces h3{font-size:12px}}
/* the booking frame at the top of the tables page */
.bookframe{display:block;width:100%;max-width:560px;margin:26px auto 0;border:0;height:760px;background:transparent}
/* the food strip and the booking start right under the header: three small photos, then a small heading with no eyebrow or paragraph */
.foodrow{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;max-width:480px;margin:0 auto}
.foodtop{padding:18px 0 0}
.booktop{padding:16px 0 6px}
.booktop .eyebrow,.booktop .lead{display:none}
.booktop h2,.booktop h1.pg{font-size:28px;margin:0}
.booktop .bookframe{margin-top:12px}
/* tables */
table.rows{width:100%;border-collapse:collapse}
table.rows td{padding:14px 0;border-bottom:1px solid var(--line);color:var(--dim);font-size:16px}
table.rows td:first-child{color:var(--ink);font-size:12px;letter-spacing:.16em;text-transform:uppercase;
                          padding-right:16px}
table.rows td:last-child{text-align:right}
.deep table.rows td{border-color:rgba(241,229,210,.18);color:rgba(241,229,210,.76)}
.deep table.rows td:first-child{color:#f1e5d2}

.tags{display:flex;flex-wrap:wrap;gap:8px;margin-top:20px}
.tag{border:1px solid var(--line-2);border-radius:999px;padding:8px 14px;font-size:10px;letter-spacing:.2em;
     text-transform:uppercase;color:var(--dim)}

/* forms */
form .f{display:grid;gap:14px;margin-top:26px}
.consent{grid-column:1/-1;display:grid;grid-template-columns:auto 1fr;gap:12px;align-items:start;margin:0;padding:14px 16px;
         background:var(--paper);border:1px solid var(--line-2);border-radius:10px;font-size:14px;line-height:1.55;
         letter-spacing:0;text-transform:none;color:var(--ink);cursor:pointer}
.consent input{width:22px;height:22px;min-height:0;margin:0;padding:0;accent-color:var(--clay);cursor:pointer}
.consent a,.legaldoc a{color:var(--clay-d);text-underline-offset:2px}
.deep form label:not(.consent){color:rgba(241,229,210,.82)}
label{display:block;font-size:11px;letter-spacing:.2em;text-transform:uppercase;color:var(--dim);
      margin-bottom:7px}
input,select,textarea{width:100%;min-height:var(--tap);background:var(--paper);border:1px solid var(--line-2);
  border-radius:10px;padding:12px 14px;font:300 17px/1.5 'Jost',sans-serif;color:var(--ink)}
textarea{min-height:120px;resize:vertical}
input:focus,select:focus,textarea:focus{outline:2px solid var(--clay);outline-offset:1px}
.hp{position:absolute;left:-9999px}
.note{font-size:13px;color:var(--dim);margin-top:14px}
.pricenote{margin-top:22px;max-width:720px;padding:16px 18px;border:1px solid var(--clay);border-radius:6px;font-size:15px;line-height:1.55;color:var(--ink,inherit)}
.pricenote strong{font-weight:500;color:var(--clay)}

/* privacy policy and terms */
.legaldoc{max-width:68ch}
.legaldoc h1{font-size:clamp(42px,8vw,68px)}
.legaldoc .updated{margin-top:12px;font-size:14px}
.legaldoc h2{font-size:clamp(26px,4.4vw,32px);line-height:1.15;margin:40px 0 12px}
.legaldoc p,.legaldoc li{font-size:17px;line-height:1.6;color:var(--ink)}
.legaldoc p{margin-top:12px}
.legaldoc ul{margin:12px 0 0;padding-left:22px}
.legaldoc li{margin-top:8px}
.legaldoc .pricenote{max-width:none;margin-top:16px}
footer .legal a{color:inherit;white-space:nowrap;text-underline-offset:2px}
footer .legal .links{display:block;margin-top:8px}
footer .legal .links a{display:inline-block;padding:6px 18px 6px 0}

/* accordion */
details{border-bottom:1px solid var(--line)}
summary{list-style:none;cursor:pointer;padding:18px 0;font-size:17px;display:flex;justify-content:space-between;
        gap:16px;align-items:center;min-height:var(--tap)}
summary::-webkit-details-marker{display:none}
summary:after{content:"+";color:var(--clay);font-size:20px}
details[open] summary:after{content:"\2212"}
details p{padding-bottom:18px;font-size:15px}

/* the convention calendar. One set of dates, read as a list or as a month. Built by the
   calendar block in site.js from the list items, so there is nothing to keep in step. */
.caltog{display:inline-flex;border:1px solid var(--line-2);border-radius:999px;overflow:hidden;margin-top:28px}
.caltog[hidden]{display:none}
.caltog button{min-height:44px;padding:0 22px;border:0;background:none;color:var(--dim);
               font:400 10px/1 'Jost',sans-serif;letter-spacing:.22em;text-transform:uppercase;cursor:pointer}
.caltog button[aria-pressed="true"]{background:var(--clay);color:#f8f3e9}
.cal{list-style:none;margin-top:26px;border-top:1px solid var(--line)}
.cal[hidden]{display:none}
.cal li[hidden]{display:none}
.cal.collapsed li.more{display:none}
.cal li{border-bottom:1px solid var(--line)}
.cal .crow{display:grid;grid-template-columns:1fr auto;gap:1px 16px;padding:11px 2px;color:inherit;text-decoration:none}
.crow:hover .cn{color:var(--clay)}
.cal .cd{grid-column:1;grid-row:1;font-size:11px;letter-spacing:.3em;text-transform:uppercase;
         color:var(--clay);font-variant-numeric:tabular-nums}
.cal .cn{grid-column:1/-1;grid-row:2;font-family:'Cormorant Garamond',serif;font-size:21px;line-height:1.2}
.cal .ca{grid-column:2;grid-row:1;font-size:13px;color:var(--dim);font-variant-numeric:tabular-nums;text-align:right}
.calview[hidden]{display:none}
.calnav{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-top:26px;
        padding:10px 0;border-top:1px solid var(--line)}
.calnav strong{font-family:'Cormorant Garamond',serif;font-weight:400;font-size:26px;letter-spacing:.01em}
.calnav button{min-width:44px;min-height:44px;border:1px solid var(--line-2);border-radius:999px;
               background:none;color:var(--ink);font-size:19px;line-height:1;cursor:pointer}
.calnav button:disabled{opacity:.3}
.calg{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));border-left:1px solid var(--line);
      border-top:1px solid var(--line)}
.calg>div{border-right:1px solid var(--line);border-bottom:1px solid var(--line);min-height:54px;min-width:0}
.calg .dow{min-height:0;padding:7px 6px;background:var(--sand2);font:400 9px/1 'Jost',sans-serif;
           letter-spacing:.18em;text-transform:uppercase;color:var(--dim)}
.calg .out{background:var(--sand2);opacity:.45}
.calg .dn{display:block;padding:5px 6px 1px;font-size:12px;color:var(--dim);font-variant-numeric:tabular-nums}
.calg .cev{display:block;margin:2px 3px 0;height:6px;border-radius:2px;background:var(--clay);
           text-decoration:none;overflow:hidden;font-size:0;color:transparent}
.calml{margin-top:4px;border-top:0}
@media (min-width:760px){
  .cal .crow{grid-template-columns:200px 1fr 136px;align-items:baseline;gap:8px 20px;padding:16px 2px}
  .cal .cn,.cal .ca{grid-row:1}
  .cal .cn{grid-column:2}
  .cal .ca{grid-column:3}
  .calg>div{min-height:94px}
  .calg .cev{height:21px;margin:2px 4px 0;padding:0 7px;border-radius:3px;font:300 11px/21px 'Jost',sans-serif;
             color:#f8f3e9;white-space:nowrap;text-overflow:ellipsis}
  .calml{display:none}
}

/* footer */
footer{background:var(--green-d);color:#f1e5d2;padding:56px 0 calc(34px + var(--safe))}
footer .cols{display:grid;grid-template-columns:1fr 1fr;gap:22px;margin-top:34px;font-size:14px}
footer .cols a{display:block;color:rgba(241,229,210,.76);text-decoration:none;padding:5px 0}
footer .cols a:hover{color:#f1e5d2}
footer .center p{color:rgba(241,229,210,.94)}
footer .legal{margin-top:34px;padding-top:20px;border-top:1px solid rgba(241,229,210,.18);
              font-size:12px;color:rgba(241,229,210,.6)}
.signup{display:flex;flex-direction:column;gap:12px;max-width:520px;margin:22px auto 0}

@media (min-width:760px){
  section{padding:96px 0}
  .g{gap:28px}
  .g2{grid-template-columns:1fr 1fr;align-items:center}
  .g3{grid-template-columns:repeat(3,1fr)}
  .g4{grid-template-columns:repeat(4,1fr)}
  .g6{grid-template-columns:repeat(6,1fr)}
  .hero{padding:72px 0 96px}
  .hero .g2{gap:56px}
  .hero .fig{margin-top:0}
  footer .cols{grid-template-columns:repeat(4,1fr)}
}
@media (min-width:960px){
  .menu-btn{display:none}
  nav.links{display:flex;gap:28px;font:400 11px/1 'Jost',sans-serif;letter-spacing:.24em;
            text-transform:uppercase}
  nav.links a{text-decoration:none;color:var(--dim)}
  nav.links a:hover,nav.links a[aria-current="page"]{color:var(--ink)}
  section{padding:112px 0}
}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}

/* Readability pass: same fonts, colors and layout, larger labels and heavier, darker text. */
:root{--dim:#54483b;--label:#984324}
body{font-weight:400;font-size:18px;line-height:1.65}
body:before{opacity:.05}
p,.lead,.small{color:var(--dim)}
.lead{font-size:18px}
.small{font-size:16px}
h1,h2{font-weight:400;line-height:1.08;text-wrap:balance}
h3{font-weight:500;line-height:1.15}
.it{color:var(--label)}
.eyebrow{font:500 13px/1.3 'Jost',sans-serif;letter-spacing:.16em;color:var(--label)}
.deep p,.deep .lead,.deep table.rows td{color:rgba(241,229,210,.94)}
.deep .it{color:#e2b77a}
.btn{font:500 14px/1 'Jost',sans-serif;letter-spacing:.1em}
.btn.sm{font-size:13px;letter-spacing:.08em}
.topbar{font:500 13px/1.45 'Jost',sans-serif;letter-spacing:.08em}
.brand b{font-weight:500;font-size:23px}
.night .day,.week .wday,.week .wtime{font-size:13px;letter-spacing:.12em;font-weight:500}
.week .wday,.item .p{color:var(--label)}
.week .wname,.item .n{font-weight:500}
.item .d{font-size:16px}
.item .p{font-size:14px;letter-spacing:.08em;font-weight:500}
.spaces h3{font:500 14px/1.4 'Jost',sans-serif;letter-spacing:.12em}
button.menu,.menu-btn,.navtog{font:500 13px/1 'Jost',sans-serif;letter-spacing:.1em}
.tag{font-size:13px;letter-spacing:.08em;font-weight:500}
.week .off .wname{font:400 17px/1.5 'Jost',sans-serif}
table.rows td:first-child{font-size:14px;letter-spacing:.08em;font-weight:500}
label{font-size:14px;letter-spacing:.06em;font-weight:500}
input,select,textarea{font:400 17px/1.5 'Jost',sans-serif}
.cal .cd{font-size:13px;letter-spacing:.12em;font-weight:500}
nav.links{font:500 13px/1 'Jost',sans-serif;letter-spacing:.1em}
.menu-btn{font:500 13px/1 'Jost',sans-serif;letter-spacing:.1em}
.week .wnote{font:500 13px/1.4 'Jost',sans-serif;letter-spacing:.06em}
.caltog button{font:500 13px/1 'Jost',sans-serif;letter-spacing:.08em}
.cal .ca{font-size:14px}
.calg .dow{font:500 12px/1 'Jost',sans-serif;letter-spacing:.06em}
.calg .dn{font-size:13px}
footer .legal{font-size:14px;color:rgba(241,229,210,.85)}
@media (min-width:760px){.spaces h3{font-size:14px}}
/* the week: the night's name carries the day, so the row is the name and its time on one line */
.week .row.nd{grid-template-columns:1fr auto;align-items:baseline;padding:12px 2px}
.week .row.nd .wname{grid-column:1;grid-row:1;font-weight:700;font-size:23px}
.week .row.nd .wtime{grid-column:2;grid-row:1}
.week .row.nd .wnote{grid-column:1/-1;grid-row:2;justify-self:start;margin:4px 0 0}
.night-block{margin-bottom:46px}
.night-block h2{font-weight:700}
/* phones: tighter, so there is less to scroll */
@media (max-width:759px){
  section{padding:28px 0}
  .alt{background:linear-gradient(to bottom,var(--sand) 0,var(--sand2) 36px,var(--sand2) calc(100% - 36px),var(--sand) 100%)}
  .g{gap:16px}
  .btns{margin-top:20px;gap:10px}
  .lead{margin-top:12px}
  .item{padding:12px 0}
  .night-block{margin-bottom:28px}
  .night-block .fig{order:-1}
  .night-block{grid-template-columns:116px 1fr;align-items:center;gap:14px}
  .night-block h2{font-size:26px}
  .night-block .lead{font-size:15px;margin-top:6px}
  .night-block .eyebrow{margin-bottom:6px}
  .tight .g3{grid-template-columns:repeat(3,1fr);gap:8px}
  .reservepics{margin-top:28px!important}
  .reservepics .fig:nth-child(n+2){display:none}
  .item .n{font-size:21px}
  .eyebrow{margin-bottom:8px}
  h2,h1.pg{line-height:1.04}
  table.rows td{padding:9px 0}
  .week{margin-top:26px}
}
/* Cielo reels, "ivoire": light, warm, clean. Ivory ground, ink type, champagne-gold hairlines, one row of big arch cards. Green only as a whisper. */
.mw{position:relative;overflow:hidden;isolation:isolate;background:linear-gradient(180deg,#f1e8d9 0,#f8f3e9 14%,#f8f3e9 86%,#f1e8d9 100%);color:#2a211a;padding:88px 0 80px;
  --gold:176,138,70;--cw:180px}
@media(min-width:700px){.mw{--cw:272px;padding:96px 0 104px}.mw .stage{margin-top:40px}.mw .strip{gap:34px;padding:58px 0 70px}}
@media(min-width:1100px){.mw{--cw:332px}}
.mw .bd,.mw .wash,.mw .beams,.mw #dust,.mw .spot,.mw .mono,.mw .palms{position:absolute;pointer-events:none}
.mw .bd{inset:0;width:100%;height:100%;object-fit:cover;z-index:-8;opacity:.78}
/* the page's own sand at the very top and bottom so the section melts in with no seam, a pool of light behind the heading */
.mw .wash{inset:0;z-index:-6;background:
  linear-gradient(to bottom,#f1e8d9 0,rgba(241,232,217,.7) 5%,rgba(241,232,217,0) 14%,rgba(241,232,217,0) 86%,rgba(241,232,217,.7) 95%,#f1e8d9 100%),
  radial-gradient(60% 46% at 50% 22%,rgba(255,252,244,.85),rgba(255,252,244,0) 72%),
  radial-gradient(70% 42% at 50% 96%,rgba(255,247,230,.55),rgba(255,247,230,0) 70%)}
.mw .beams{inset:-10% -10%;z-index:-5;opacity:1}
.mw .beams i{position:absolute;top:-20%;height:150%;width:22%;transform-origin:50% 0;
  background:linear-gradient(to bottom,rgba(255,250,236,.85),rgba(255,244,220,.28) 55%,rgba(255,244,220,0));
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 50%,transparent);mask-image:linear-gradient(90deg,transparent,#000 50%,transparent);
  animation:sway var(--t,19s) cubic-bezier(.45,0,.55,1) infinite alternate;animation-delay:var(--d,0s);opacity:0;will-change:transform,opacity}
@keyframes sway{0%{transform:rotate(var(--r0,-16deg)) translateX(0);opacity:.1}50%{opacity:var(--o,.7)}100%{transform:rotate(var(--r1,-6deg)) translateX(var(--x,40px));opacity:.15}}
/* palm shadows swaying on the plaster, a resort wall in afternoon sun */
.mw .palms{inset:0;z-index:-7;overflow:hidden}
.mw .palms svg{position:absolute;width:min(760px,86vw);height:auto;fill:rgba(92,60,30,.11);filter:blur(1.6px);will-change:transform}
.mw .palms .pl{left:-12%;top:-8%;transform-origin:8% 6%;animation:palm 13s cubic-bezier(.45,0,.55,1) infinite alternate}
.mw .palms .pr{right:-14%;top:-4%;transform:scaleX(-1);transform-origin:92% 6%;animation:palmr 16s cubic-bezier(.45,0,.55,1) infinite alternate;animation-delay:-5s}
.mw .palms .pb{display:none;right:-8%;bottom:-18%;width:min(560px,70vw);transform:rotate(168deg);transform-origin:50% 50%;opacity:.8;animation:palmb 18s cubic-bezier(.45,0,.55,1) infinite alternate;animation-delay:-9s}
@keyframes palm{from{transform:rotate(-1.8deg) translate3d(0,0,0)}to{transform:rotate(2.2deg) translate3d(10px,6px,0)}}
@keyframes palmr{from{transform:scaleX(-1) rotate(-2deg)}to{transform:scaleX(-1) rotate(2.4deg) translate3d(-8px,5px,0)}}
@keyframes palmb{from{transform:rotate(166deg)}to{transform:rotate(171deg) translate3d(-8px,0,0)}}
.mw #dust{inset:0;width:100%;height:100%;z-index:-3}
.mw .spot{left:0;top:0;width:520px;height:520px;z-index:-2;opacity:0;transition:opacity .8s;background:radial-gradient(closest-side,rgba(255,251,240,.95),rgba(255,251,240,0));will-change:transform}
.mw.hot .spot{opacity:1}
.mw .mono{left:50%;top:64px;width:min(1500px,170vw);height:auto;transform:translate(-50%,0);z-index:-1;color:rgb(var(--gold));opacity:.55;overflow:visible;
  -webkit-mask-image:linear-gradient(to bottom,#000 14%,transparent 30%);mask-image:linear-gradient(to bottom,#000 14%,transparent 30%)}
.mw .mono path{fill:none;stroke:currentColor;stroke-width:.62;stroke-dasharray:1;stroke-dashoffset:1}
.mw.in .mono path{animation:draw 5.2s cubic-bezier(.32,.72,0,1) forwards}
.mw.in .mono path+path{animation-delay:.5s}

.mw .rhead{position:relative;z-index:4;text-align:center;padding-top:8px}
.mw .logo-wrap{position:relative;width:104px;margin:0 auto}
.mw .logo-wrap:before{content:"";position:absolute;left:50%;top:48%;width:320px;height:320px;margin:-160px 0 0 -160px;border-radius:50%;
  background:radial-gradient(closest-side,rgba(255,236,196,.9),rgba(255,236,196,0));animation:breathe 7s cubic-bezier(.45,0,.55,1) infinite alternate}
@keyframes breathe{from{opacity:.55;transform:scale(1)}to{opacity:1;transform:scale(1.1)}}
.mw .logo{position:relative;width:104px;height:auto;color:#2a211a;overflow:visible}
.mw .logo .arch{stroke-dasharray:1;stroke-dashoffset:1}
.mw .logo .runner{stroke:#c9a25a;stroke-width:10;fill:none;stroke-dasharray:.07 .93;stroke-dashoffset:0;opacity:0;stroke-linecap:round}
.mw .logo .ag{opacity:0;transform:translateY(26px);transform-origin:310px 520px}
.mw .logo .sun{transform-box:fill-box;transform-origin:center;opacity:0;fill:#b4522f}
.mw.in .logo .arch{animation:draw 2.4s cubic-bezier(.32,.72,0,1) forwards}
.mw.in .logo .ag{animation:rise 1.6s .9s cubic-bezier(.32,.72,0,1) forwards}
.mw.in .logo .sun{animation:sunin 1.2s 1.5s cubic-bezier(.32,.72,0,1) forwards,sunpulse 4.8s 2.8s ease-in-out infinite}
.mw.in .logo .runner{animation:run 7s 2.6s linear infinite;opacity:.95}
@keyframes draw{to{stroke-dashoffset:0}}@keyframes rise{to{opacity:1;transform:none}}@keyframes sunin{to{opacity:1}}
@keyframes sunpulse{0%,100%{transform:scale(1)}50%{transform:scale(1.14)}}@keyframes run{to{stroke-dashoffset:-1}}
.mw .eyebrow{margin-top:18px;color:#4a3512;font-weight:600;letter-spacing:.5em;font-size:12px}
.mw h2{font-size:clamp(46px,9.4vw,92px);font-weight:300;line-height:.98;margin-top:14px;color:#2a211a}
.mw h2 .it{color:#b4522f}
.mw .lead{max-width:36ch;margin:16px auto 0;color:#6d6052}

.mw .stage{position:relative;margin-top:14px;perspective:1500px;overflow:hidden;
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 5%,#000 95%,transparent);mask-image:linear-gradient(90deg,transparent,#000 5%,#000 95%,transparent)}
.mw .strip{display:flex;gap:12px;width:max-content;padding:40px 0 48px;will-change:transform;touch-action:pan-y;cursor:grab}
.mw .strip.drag{cursor:grabbing}
.mw .cell{flex:0 0 auto;width:calc(var(--cw) + 18px);text-align:center;will-change:transform,opacity}
.mw .cell.on .frame{border-color:rgba(var(--gold),1);box-shadow:0 38px 56px -30px rgba(84,56,28,.5),0 10px 24px -14px rgba(84,56,28,.28),0 0 0 1px rgba(var(--gold),.55),0 0 34px rgba(214,170,86,.34),inset 0 0 0 1px rgba(255,255,255,.8)}
.mw .frame{transition:border-color .6s,box-shadow .6s;padding:8px;border-radius:999px 999px 24px 24px;border:1px solid rgba(var(--gold),.7);background:rgba(255,252,244,.55);
  box-shadow:0 38px 56px -30px rgba(84,56,28,.5),0 10px 24px -14px rgba(84,56,28,.28),inset 0 0 0 1px rgba(255,255,255,.7)}
.mw .reel{position:relative;display:block;width:var(--cw);aspect-ratio:9/16;overflow:hidden;border-radius:999px 999px 16px 16px;background:#d9c9a8;
  color:#f8f3e9;text-decoration:none;isolation:isolate;-webkit-tap-highlight-color:transparent}
.mw .reel video,.mw .reel img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:-2;pointer-events:none}
.mw .reel:after{content:"";position:absolute;inset:auto 0 0 0;height:30%;z-index:-1;pointer-events:none;background:linear-gradient(to top,rgba(30,22,14,.5),rgba(30,22,14,0))}
.mw .sheen{position:absolute;inset:0;z-index:1;pointer-events:none;overflow:hidden}
.mw .sheen:before{content:"";position:absolute;top:-10%;bottom:-10%;left:-60%;width:46%;transform:skewX(-14deg) translateX(0);
  background:linear-gradient(90deg,rgba(255,250,236,0),rgba(255,250,236,.28),rgba(255,250,236,0));animation:sheen 9s cubic-bezier(.45,0,.2,1) infinite;animation-delay:var(--sd,0s)}
@keyframes sheen{0%,62%{transform:skewX(-14deg) translateX(0)}100%{transform:skewX(-14deg) translateX(520%)}}
.mw .go{position:absolute;left:50%;bottom:16px;z-index:2;transform:translate(-50%,10px);opacity:0;white-space:nowrap;padding:10px 16px;border-radius:999px;
  background:rgba(42,33,26,.5);border:1px solid rgba(248,243,233,.5);font:400 10px/1 'Jost',sans-serif;letter-spacing:.26em;text-transform:uppercase;color:#f8f3e9;
  transition:opacity .6s cubic-bezier(.32,.72,0,1),transform .6s cubic-bezier(.32,.72,0,1)}
.mw .cell.on .go{opacity:1;transform:translate(-50%,0)}
.mw .reel:focus-visible{outline:2px solid #2a211a;outline-offset:6px}
.mw .cap{transition:opacity .45s;transform-origin:50% 0;margin-top:20px;opacity:var(--co,1);text-shadow:0 0 16px rgba(248,243,233,.95),0 0 4px rgba(248,243,233,.9)}
.mw .cap small{display:block;font:500 11px/1 'Jost',sans-serif;letter-spacing:.3em;text-transform:uppercase;color:#4a3512;margin-bottom:9px}
.mw .cap b{display:block;font:italic 400 clamp(22px,2.2vw,28px)/1.15 'Cormorant Garamond',Georgia,serif;color:#2a211a}
.mw .rfoot{position:relative;z-index:4;display:flex;justify-content:center;margin-top:46px}
.mw .btn.ghost{color:#2a211a;border-color:rgba(var(--gold),.85);background:rgba(255,252,244,.5)}
.mw .btn.ghost:hover{background:rgba(var(--gold),.16)}

@media (prefers-reduced-motion:reduce){
  .mw .logo .sun,.mw.in .logo .sun,.mw .logo .arch,.mw.in .logo .arch,.mw .logo .ag,.mw.in .logo .ag,.mw .logo .runner,.mw .mono path,.mw.in .mono path,.mw .spot{animation:none!important;transition:none!important}
  .mw .logo .sun{opacity:1}
  .mw .beams i,.mw .sheen:before,.mw .logo-wrap:before,.mw .palms svg{animation:none!important}
  .mw .stage{overflow-x:auto;-webkit-mask-image:none;mask-image:none;perspective:none}
  .mw .strip{transform:none!important;padding-left:20px;padding-right:20px}
  .mw .cell{transform:none!important;opacity:1!important}
  .mw .cell .go{opacity:1;transform:translate(-50%,0)}
  .mw .logo .arch,.mw .mono path{stroke-dashoffset:0}.mw .logo .ag,.mw .logo .sun{opacity:1;transform:none}.mw .logo .runner{display:none}
}
/* desktop spacing lives last so nothing above can override it */
@media(min-width:700px){.mw .strip{gap:34px;padding:58px 0 84px}.mw .stage{margin-top:40px}}

/* phones and tablets: a lighter version (fewer layers to composite, no 3D, no masks on moving content, one fewer video decoding) */
.mw.lite .palms,.mw.lite .beams,.mw.lite #dust,.mw.lite .spot{display:none}
.mw.lite .sheen{display:none}
.mw.lite .logo-wrap:before{animation:none;opacity:.8}
.mw.lite .stage{perspective:none;-webkit-mask-image:none;mask-image:none}
.mw.lite .frame{box-shadow:0 18px 26px -18px rgba(84,56,28,.4),inset 0 0 0 1px rgba(255,255,255,.7)}
.mw.lite .cell.on .frame{box-shadow:0 18px 26px -18px rgba(84,56,28,.4),0 0 0 1px rgba(var(--gold),.55),inset 0 0 0 1px rgba(255,255,255,.8)}