/* SETT EVENT 26 — internal guest LP · U(A)TOPIA */
/* Fonts are served locally by fonts.css. */

@font-face{
  font-family:'Mars Condensed';
  src:url('fonts/MarsCondensed-Regular.otf') format('opentype');
  font-weight:400;font-style:normal;font-display:swap;
}

:root{
  --goth:#302A23;
  --goth-2:#3A342C;
  --cream:#FDF8F3;
  --cheeto:#FFA748;
  --gray:#8D8882;
  --gray-lo:#68625C;
  --line:rgba(253,248,243,.16);
  --line-2:rgba(253,248,243,.30);
  --mono:'IBM Plex Mono',ui-monospace,monospace;
  --body:'Manrope',-apple-system,BlinkMacSystemFont,sans-serif;
  --disp:'Mars Condensed','League Gothic',sans-serif;
  --pad:clamp(20px,5vw,72px);
}

*{margin:0;padding:0;box-sizing:border-box}
[hidden]{display:none!important}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{
  background:var(--goth);color:var(--cream);
  font-family:var(--body);font-size:16px;line-height:1.55;
  -webkit-font-smoothing:antialiased;overflow-x:hidden;
}
img{display:block;max-width:100%}
button{font:inherit;color:inherit;background:none;border:none;cursor:pointer}
input,select,textarea{font:inherit;color:inherit}

/* paper tooth — no gradients, just tooth */
body::after{
  content:"";position:fixed;inset:0;z-index:200;pointer-events:none;opacity:.05;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* ---------- shared type ---------- */
.eyebrow{font-family:var(--mono);font-size:clamp(9.5px,1.1vw,11px);letter-spacing:.22em;text-transform:uppercase;color:var(--gray)}
.disp{font-family:var(--disp);text-transform:uppercase;line-height:.84;letter-spacing:.005em}
.rule{height:1px;background:var(--line);border:0}

/* ---------- 01 · CAPA ---------- */
/* the capa stops short of the fold on purpose: --band is what the studios
   carousel needs, so the logos are already on screen with no scroll */
.capa{--band:clamp(112px,15vh,150px);
  position:relative;min-height:calc(100svh - var(--band));display:flex;flex-direction:column;
  background:var(--goth);overflow:hidden}
.capa__photo{position:relative;flex:1 1 auto;min-height:calc(100svh - var(--band));overflow:hidden;background:var(--cream)}
.capa__bg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:65% 100%}
.capa__logo{position:absolute;top:var(--pad);left:var(--pad);z-index:4;display:block}
/* the wide source is the full frame, so the hotel needs a different anchor */
@media (min-width:1700px){.capa__bg{object-position:6% 100%}}
.capa__logo img{width:clamp(74px,8.4vw,116px);height:auto}

/* wordmark laid on the photograph, Mall Goth cut, centred */
.capa__over{position:absolute;left:var(--pad);right:var(--pad);top:9.5%;z-index:3;text-align:center}
/* ?w=bleed — the wordmark runs the full width of the frame, no side padding */
.capa--bleed .capa__over{left:0;right:0}
.capa__over .mark-img{width:var(--markw,44%);margin:0 auto}
.capa__over .mark-img img{max-height:none}

/* eyebrow rides above the wordmark */
.capa__eyebrow{
  font-family:var(--mono);text-transform:uppercase;letter-spacing:.34em;
  font-size:clamp(9.5px,.92vw,20px);color:var(--goth);opacity:.72;
  margin-bottom:clamp(14px,2.2vh,26px);
}
/* the line that has to read */
.capa__sub{
  font-family:var(--mono);text-transform:uppercase;letter-spacing:.2em;
  font-size:clamp(15px,1.85vw,50px);color:var(--goth);
  margin-top:clamp(20px,3.4vh,38px);
}

/* CTA — pink button, Setto holding it by the top edge.
   The depth is a SOLID offset layer (0 blur), not a soft shadow, so it stays
   flat-brand: it reads as a physical key, not as a drop shadow. */
.cta{
  --setto:clamp(64px,5.4vw,100px);
  --lift:clamp(5px,.52vw,9px);
  position:relative;display:inline-flex;align-items:center;justify-content:center;
  margin-top:clamp(26px,3.8vh,48px);margin-bottom:var(--lift);
  height:clamp(44px,3.4vw,60px);padding:0 clamp(24px,2.4vw,44px);
  background:var(--goth);border:1px solid var(--goth);color:var(--cream);
  border-radius:clamp(10px,.9vw,15px);
  font-family:var(--body);font-weight:700;text-transform:uppercase;
  font-size:clamp(11px,.82vw,16px);letter-spacing:.16em;line-height:1;
  cursor:pointer;overflow:visible;
  box-shadow:0 var(--lift) 0 0 var(--cheeto);
  transition:transform .12s ease,box-shadow .12s ease,background .16s,color .16s;
}
.cta:hover{background:var(--cheeto);color:var(--goth)}
.cta:active{transform:translateY(var(--lift));box-shadow:0 0 0 0 var(--cheeto)}
.cta__setto{
  position:absolute;left:50%;bottom:100%;transform:translateX(-50%);
  width:var(--setto);height:auto;
  margin-bottom:calc(var(--setto) * -.135);   /* paws sit ON the top edge */
  pointer-events:none;user-select:none;
}
.cta__arw{display:inline-block;margin-left:10px;animation:ctabob 1.4s ease-in-out infinite}
@keyframes ctabob{0%,100%{transform:translateY(0)}50%{transform:translateY(4px)}}

/* the city runs straight under this line, so it sits on a translucent
   plate of its own paper instead of fighting the photograph */
/* the frosted plate is gone. Checked against Aman's own stylesheet: zero
   backdrop-filter, zero translucent panels behind hero copy, and every small
   label runs 10-11.5px at weight 250-400 with 0.14-0.28rem of tracking.
   Same register here, straight on the photograph. */
.capa__fine{
  margin:clamp(16px,2.1vh,24px) auto 0;color:var(--goth);
  font-family:var(--mono);font-weight:400;text-transform:uppercase;
  font-size:clamp(9.5px,.76vw,15px);letter-spacing:.24em;line-height:1.9;
  opacity:.82;max-width:none;white-space:nowrap;
}
@media (max-width:760px){
  .capa__fine{white-space:normal;max-width:30ch;letter-spacing:.18em;text-wrap:balance}
}

.capa__cue{
  position:absolute;left:50%;bottom:clamp(7px,1.2vh,13px);transform:translateX(-50%);
  z-index:4;font-size:13px;color:var(--cream);text-decoration:none;
  animation:cue 2.6s ease-in-out infinite;
}
.capa__cue:hover{color:var(--cheeto)}
@keyframes cue{0%,100%{transform:translate(-50%,0)}50%{transform:translate(-50%,6px)}}

/* image wordmark — the capa and the footer both use one */
.mark-img{display:block;margin:0}
.mark-img[hidden]{display:none}
.mark-img img{width:100%;height:auto;display:block}
.mark-img--foot{margin-bottom:clamp(10px,1.6vh,18px)}
.mark-img--foot img{max-height:none}


/* ---------- STUDIOS IN THE ROOM ---------- */
/* one band straight under the photograph. each logo carries its own width,
   pre-normalised for equal optical mass; --ls scales the set without breaking it */
.studios{--ls:1;--speed:96s;
  position:relative;overflow:hidden;border-bottom:1px solid var(--line);
  padding:clamp(24px,3.4vh,38px) 0;
}
.studios__rail{display:flex;width:max-content;will-change:transform;animation:rail var(--speed) linear infinite}
.studios:hover .studios__rail{animation-play-state:paused}
.studios__track{display:flex;align-items:center;flex:0 0 auto}
.studio{display:flex;align-items:center;justify-content:center;
  padding:0 clamp(22px,2.4vw,46px);min-height:calc(54px * var(--ls))}
.studio img{height:auto;opacity:1}
@keyframes rail{from{transform:translate3d(0,0,0)}to{transform:translate3d(-50%,0,0)}}

/* edges fade into the field so logos enter and leave instead of being cut */
.studios::before,.studios::after{
  content:"";position:absolute;top:0;bottom:0;width:clamp(40px,7vw,130px);z-index:2;pointer-events:none;
}
.studios::before{left:0;background:linear-gradient(to right,var(--goth),rgba(48,42,35,0))}
.studios::after{right:0;background:linear-gradient(to left,var(--goth),rgba(48,42,35,0))}

@media (max-width:1240px){.studios{--ls:.9}}
@media (max-width:820px){.studios{--ls:.78;--speed:74s}}
@media (max-width:520px){.studios{--ls:.68;--speed:58s}}
@media (prefers-reduced-motion:reduce){
  .studios__rail{animation:none;overflow-x:auto;width:100%}
  .studios::before,.studios::after{display:none}
}

/* ---------- 02 · TRANSITION ---------- */
.bridge{
  padding:clamp(72px,14vh,170px) var(--pad);border-bottom:1px solid var(--line);
}
/* Condé Nast Traveler's own display spec, read off their stylesheet:
   weight 300, line-height ~1.06em, NEGATIVE tracking (-0.5px), sentence case.
   A block of condensed uppercase is what made this unreadable. */
.bridge p{
  font-family:var(--body);font-weight:300;text-transform:none;
  font-size:clamp(30px,4.4vw,78px);line-height:1.06;letter-spacing:-.018em;
  max-width:none;white-space:nowrap;               /* her call: one single line */
}
.bridge p.bridge__sub{
  font-family:var(--body);font-weight:400;white-space:normal;
  font-size:clamp(15px,1.36vw,25px);line-height:1.6;letter-spacing:0;
  color:var(--gray);max-width:44ch;margin-top:clamp(20px,3.2vh,36px);
  padding-top:clamp(20px,3.2vh,36px);border-top:1px solid var(--line);
}
@media (max-width:860px){
  .bridge p{white-space:normal;text-wrap:balance;font-size:clamp(27px,6.4vw,44px)}
}

/* ---------- 03 · THE DECK ----------
   Four overlapping photo panels, fanned. One opens, the others hold at a
   spine. Reference is the Appcharge x Six Senses deck she sent. The spine
   titles run horizontal and wrap in the narrow column instead of being
   clipped like the reference — "Who else is there with you" is far longer
   than "SATURDAY" and a clipped label stops being navigation.
   ------------------------------------------------------------------------ */
.deck{
  --spine:clamp(132px,12.5vw,232px);
  display:flex;align-items:stretch;
  height:clamp(560px,84svh,940px);
  background:var(--goth);border-bottom:1px solid var(--line);
}
.card{
  position:relative;flex:0 0 var(--spine);min-width:0;overflow:hidden;
  border-left:1px solid var(--line-2);
  transition:flex-basis .52s cubic-bezier(.22,.75,.2,1);
}
.card:first-child{border-left:0}
.card[data-open]{flex:1 1 auto}
.card__bg{
  position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  object-position:50% 45%;filter:grayscale(1) contrast(1.06);
  opacity:.5;transition:opacity .5s;
}
.card[data-open] .card__bg{opacity:.07}
/* the veil is what lets the copy sit straight on the photograph */
.card::after{
  content:"";position:absolute;inset:0;background:rgba(48,42,35,.42);
  transition:background .5s;pointer-events:none;
}
.card[data-open]::after{background:rgba(48,42,35,.9)}
.card:not([data-open]):hover .card__bg{opacity:.72}

/* spine — always on, always the click target */
.card__spine{
  position:absolute;inset:0;z-index:3;width:100%;
  display:flex;flex-direction:column;align-items:flex-start;justify-content:flex-start;
  text-align:left;padding:clamp(22px,3vh,40px) clamp(16px,1.5vw,26px);
  background:none;border:0;cursor:pointer;color:var(--cream);
}
.card[data-open] .card__spine{inset:0 auto auto 0;width:auto;cursor:default}
.card__n{
  display:block;font-family:var(--mono);font-size:clamp(10px,.86vw,14px);
  letter-spacing:.22em;color:var(--cheeto);margin-bottom:clamp(10px,1.4vh,18px);
}
.card__t{
  display:block;font-family:var(--body);font-weight:300;
  font-size:clamp(19px,1.62vw,30px);line-height:1.1;letter-spacing:-.014em;
  max-width:11ch;
}
.card[data-open] .card__t{max-width:none}
.card:not([data-open]) .card__spine:hover .card__t{opacity:.7}

/* body — only readable once the card is open */
.card__body{
  position:absolute;inset:0;z-index:2;overflow-y:auto;overscroll-behavior:contain;
  opacity:0;visibility:hidden;transition:opacity .3s .12s,visibility .3s .12s;
}
.card[data-open] .card__body{opacity:1;visibility:visible}
.card__inner{
  padding:clamp(84px,13vh,150px) clamp(20px,3vw,54px) clamp(34px,5vh,64px);
  min-height:100%;
}
.card__body::-webkit-scrollbar{width:6px}
.card__body::-webkit-scrollbar-thumb{background:rgba(253,248,243,.22)}

@media (max-width:900px){
  /* a fan needs width. stack them instead, spine over body. */
  .deck{flex-direction:column;height:auto}
  .card{flex:0 0 auto;border-left:0;border-top:1px solid var(--line-2);min-height:96px}
  .card:first-child{border-top:0}
  .card[data-open]{flex:0 0 auto}
  .card__spine{position:relative;inset:auto}
  .card__t{max-width:none}
  .card__body{position:relative;inset:auto;overflow:visible;height:0}
  .card[data-open] .card__body{height:auto}
  .card__inner{padding:0 clamp(18px,4vw,28px) clamp(30px,5vh,44px)}
}

/* ---------- form ---------- */
.form-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(18px,2.6vw,34px) clamp(20px,3.4vw,48px);max-width:1080px}
.f{display:flex;flex-direction:column;gap:9px;min-width:0}
.f--full{grid-column:1/-1}
.f--wide{grid-column:span 2}
.f > label{font-family:var(--mono);font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:var(--gray)}
.f input,.f select,.f textarea{
  width:100%;background:transparent;border:0;border-bottom:1px solid var(--line-2);
  padding:11px 2px 12px;font-family:var(--body);font-size:clamp(15px,1.5vw,18px);
  border-radius:0;-webkit-appearance:none;appearance:none;
}
.f textarea{resize:vertical;min-height:78px}
.f input::placeholder,.f textarea::placeholder{color:var(--gray-lo)}
.f input:focus,.f select:focus,.f textarea:focus{outline:none;border-bottom-color:var(--cheeto)}
.f select{color:var(--cream);cursor:pointer;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='11' height='7'%3E%3Cpath d='M0 0l5.5 6.4L11 0z' fill='%238D8882'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right 2px center;padding-right:24px}
.f select option{background:var(--goth);color:var(--cream)}
.f input[type="date"]::-webkit-calendar-picker-indicator{filter:invert(1) opacity(.5);cursor:pointer}
.f--bad input,.f--bad select,.f--bad textarea{border-bottom-color:var(--cheeto)}

.actions{display:flex;flex-wrap:wrap;gap:clamp(12px,1.6vw,20px);align-items:center;margin-top:clamp(34px,6vh,62px)}
.btn{
  font-family:var(--mono);font-size:clamp(10.5px,1.1vw,12px);letter-spacing:.2em;text-transform:uppercase;
  padding:16px 26px 15px;border:1px solid var(--cream);transition:background .18s,color .18s,border-color .18s;
}
.btn:hover{background:var(--cream);color:var(--goth)}
.btn--fill{background:var(--cheeto);border-color:var(--cheeto);color:var(--goth)}
.btn--fill:hover{background:var(--cream);border-color:var(--cream)}
.btn--ghost{border-color:var(--line-2);color:var(--gray)}
.btn--ghost:hover{background:transparent;border-color:var(--cream);color:var(--cream)}
.btn[disabled]{opacity:.45;pointer-events:none}
.done{font-family:var(--mono);font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:var(--cheeto);opacity:0;transition:opacity .25s}
.done[data-on]{opacity:1}

/* ---------- modal ---------- */
.modal{position:fixed;inset:0;z-index:120;display:none;padding:clamp(10px,3vh,44px) clamp(10px,3vw,44px)}
.modal[data-open]{display:block}
.modal__scrim{position:absolute;inset:0;background:rgba(24,20,16,.82)}
.modal__box{
  position:relative;max-width:1000px;margin:0 auto;background:var(--goth);
  border:1px solid var(--line-2);max-height:100%;display:flex;flex-direction:column;
}
.modal__top{display:flex;align-items:flex-start;justify-content:space-between;gap:20px;
  padding:clamp(20px,3vw,34px) clamp(20px,3vw,38px);border-bottom:1px solid var(--line)}
.modal__title{font-family:var(--disp);text-transform:uppercase;line-height:.88;font-size:clamp(26px,4vw,48px)}
.modal__note{font-family:var(--mono);font-size:clamp(10px,1.05vw,11.5px);letter-spacing:.14em;
  text-transform:uppercase;color:var(--gray);margin-top:12px;max-width:58ch;line-height:1.9}
.modal__x{font-family:var(--mono);font-size:20px;line-height:1;color:var(--gray);padding:4px 6px}
.modal__x:hover{color:var(--cheeto)}
.modal__body{padding:clamp(22px,3vw,38px);overflow-y:auto}
.modal__body .form-grid{grid-template-columns:repeat(3,minmax(0,1fr));max-width:none}

/* ---------- hotel ---------- */
.hotel{display:grid;grid-template-columns:minmax(0,1.08fr) minmax(0,1fr);gap:clamp(28px,5vw,74px);align-items:start}
.blk{padding-top:clamp(20px,3vh,30px);border-top:1px solid var(--line)}
.blk:first-child{border-top:0;padding-top:0}
.blk + .blk{margin-top:clamp(26px,4.4vh,46px)}
.blk__k{font-family:var(--mono);font-size:11px;letter-spacing:.19em;text-transform:uppercase;color:var(--cheeto);margin-bottom:14px}
.blk__v{font-size:clamp(15px,1.5vw,19px);line-height:1.6;max-width:46ch}
.blk__v strong{font-weight:600}
.addr{font-family:var(--disp);text-transform:uppercase;font-size:clamp(24px,3.4vw,44px);line-height:.9;margin-bottom:14px}
.pill-row{display:flex;flex-wrap:wrap;gap:0;margin-top:6px;border:1px solid var(--line-2);width:max-content;max-width:100%}
.pill-row div{padding:14px 22px 13px;border-right:1px solid var(--line-2)}
.pill-row div:last-child{border-right:0}
.pill-row span{display:block;font-family:var(--mono);font-size:10px;letter-spacing:.19em;text-transform:uppercase;color:var(--gray);margin-bottom:6px}
.pill-row b{font-family:var(--disp);font-size:clamp(26px,3vw,40px);line-height:.88;font-weight:400;letter-spacing:.01em}
.foot-note{font-size:clamp(13px,1.3vw,15px);color:var(--gray);margin-top:clamp(22px,3.4vh,34px);max-width:52ch}
.seals{display:flex;gap:clamp(18px,3vw,44px);align-items:center;flex-wrap:wrap;
  margin-top:clamp(34px,6vh,64px);padding-top:clamp(26px,4vh,40px);border-top:1px solid var(--line)}
.seals img{width:clamp(70px,8vw,104px);height:auto;opacity:.88}
.tbd{color:var(--cheeto)}
.link{color:var(--cream);text-decoration:none;border-bottom:1px solid var(--cheeto);padding-bottom:1px}
.link:hover{color:var(--cheeto)}

/* ---------- agenda ---------- */
.days{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:0;border:1px solid var(--line-2)}
.day{padding:clamp(20px,2.6vw,32px);border-right:1px solid var(--line-2)}
.day:last-child{border-right:0}
.day__k{font-family:var(--mono);font-size:10.5px;letter-spacing:.2em;text-transform:uppercase;color:var(--cheeto);margin-bottom:16px}
.day__t{font-family:var(--disp);text-transform:uppercase;font-size:clamp(26px,3.2vw,44px);line-height:.88;margin-bottom:14px}
.day__d{font-size:clamp(13.5px,1.35vw,16px);line-height:1.6;color:#E2DBD2}
.sessions{margin-top:clamp(32px,5vh,58px)}
.sessions__k{font-family:var(--mono);font-size:11px;letter-spacing:.19em;text-transform:uppercase;color:var(--gray);margin-bottom:clamp(16px,2.4vh,24px)}
.ses{display:grid;grid-template-columns:auto minmax(0,1fr) auto;gap:clamp(14px,2.4vw,30px);
  align-items:baseline;padding:clamp(15px,2vh,20px) 0;border-top:1px solid var(--line)}
.ses__n{font-family:var(--mono);font-size:11px;color:var(--gray-lo);letter-spacing:.1em}
.ses__t{font-family:var(--disp);text-transform:uppercase;font-size:clamp(19px,2.3vw,32px);line-height:.92}
.ses__q{display:block;font-family:var(--body);text-transform:none;font-size:clamp(13px,1.3vw,15px);
  line-height:1.5;color:var(--gray);letter-spacing:0;margin-top:8px;max-width:62ch}
.ses__f{font-family:var(--mono);font-size:9.5px;letter-spacing:.19em;text-transform:uppercase;
  color:var(--cheeto);border:1px solid var(--cheeto);padding:5px 9px 4px;white-space:nowrap}

/* ---------- room ---------- */
.room{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:1px;
  background:var(--line);border:1px solid var(--line)}
.who{background:var(--goth);padding:clamp(14px,1.8vw,22px);display:flex;flex-direction:column;gap:14px}
.who__img{aspect-ratio:1;background:var(--goth-2);overflow:hidden}
.who__img img{width:100%;height:100%;object-fit:cover;object-position:50% 22%}
.who__n{font-family:var(--disp);text-transform:uppercase;font-size:clamp(17px,1.9vw,25px);line-height:.9}
.who__c{font-family:var(--mono);font-size:9.5px;letter-spacing:.17em;text-transform:uppercase;color:var(--gray);margin-top:7px}
.who--empty .who__img{border:1px dashed var(--line-2);background:transparent}


/* ---------- outro + footer ---------- */
.outro{padding:clamp(80px,16vh,190px) var(--pad) clamp(30px,5vh,60px);border-top:1px solid var(--line)}
.outro__t{font-family:var(--body);font-weight:300;text-transform:none;
  font-size:clamp(26px,3.1vw,54px);line-height:1.06;letter-spacing:-.018em}
.foot{padding:clamp(26px,4.4vh,54px) var(--pad) clamp(24px,4vh,40px)}
.foot__meta{display:flex;justify-content:space-between;gap:24px;flex-wrap:wrap;margin-top:clamp(12px,2vh,20px);
  font-family:var(--mono);font-size:clamp(9.5px,1.05vw,11.5px);letter-spacing:.19em;
  text-transform:uppercase;color:var(--cheeto);line-height:2.05}
.foot__meta div:last-child{text-align:right}
.foot__bar{display:flex;justify-content:space-between;align-items:flex-end;gap:24px;flex-wrap:wrap;
  margin-top:clamp(26px,4.4vh,44px);padding-top:clamp(18px,3vh,26px);border-top:1px solid var(--line)}
.foot__bar img{width:clamp(62px,7vw,96px)}
.foot__nav{display:flex;gap:clamp(14px,2.4vw,30px);font-family:var(--mono);font-size:10.5px;
  letter-spacing:.17em;text-transform:uppercase;color:var(--gray)}
.foot__nav a{color:inherit;text-decoration:none}
.foot__nav a:hover{color:var(--cream)}

/* ---------- responsive ---------- */
@media (max-width:900px){
  .hotel{grid-template-columns:minmax(0,1fr)}
  .days{grid-template-columns:minmax(0,1fr)}
  .day{border-right:0;border-bottom:1px solid var(--line-2)}
  .day:last-child{border-bottom:0}
  .modal__body .form-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .ses{grid-template-columns:auto minmax(0,1fr);row-gap:10px}
  .ses__f{grid-column:2;justify-self:start}
}
@media (max-width:760px){
  .room{grid-template-columns:repeat(2,minmax(0,1fr))}
  .f--wide{grid-column:1/-1}
}
@media (max-width:620px){
  .form-grid,.modal__body .form-grid{grid-template-columns:minmax(0,1fr)}
  
  
  
  .pill-row{width:100%}
  .pill-row div{flex:1 1 auto}
  .btn{flex:1 1 auto;text-align:center}
  .foot__meta div:last-child{text-align:left}
}