/* The Firs: own look on top of the base */
:root{
  --paper:#f2eee6;--paper-2:#e7e1d4;--ink:#1e2a23;--ink-2:#26342b;
  --ink-80:rgba(30,42,35,.82);--ink-60:rgba(30,42,35,.62);--ink-40:rgba(30,42,35,.42);--line:rgba(30,42,35,.13);
  --brass:#b5643a;
  --serif:"Instrument Serif","Times New Roman",serif;
  --sans:"Manrope",system-ui,-apple-system,"Segoe UI",sans-serif;
}
html,body{background:#f2eee6}
body{letter-spacing:-.005em}
.h2{letter-spacing:-.02em;line-height:.98}
.h2 em,.room h3 em{color:var(--brass)}
.dark .h2 em{color:#d9a37f}
.lbl{letter-spacing:.18em}
.roll{border-radius:8px;padding-left:22px}
.roll__c{border-radius:6px}
.chip{border-radius:8px}
.circle{border-radius:10px}
.nav__links{border-radius:12px}.nav__links a{border-radius:8px}
.burger{border-radius:12px}

/* hero: split layout, photo in an arched window */
.hero .frame{inset:0;border-radius:0;background:var(--paper);color:var(--ink);clip-path:none!important;transform:none!important;opacity:1!important}
.hero .shade,.hero .pblur,.hero .scrollcue,.intro-tag{display:none}
.hero .media{inset:calc(var(--frame-pad) + 76px) calc(var(--frame-pad) + 2vw) var(--frame-pad) auto;width:min(46vw,760px);border-radius:999px 999px 18px 18px;overflow:hidden;transform:none;
  clip-path:inset(100% 0 0 0 round 999px 999px 18px 18px);transition:clip-path 1.6s var(--io)}
.hero .frame.open .media{clip-path:inset(0 0 0 0 round 999px 999px 18px 18px);transform:none}
.hero .media img{object-position:50% 40%;transform:scale(1.15);transition:transform 2.4s var(--io)}
.hero .frame.open .media img{transform:scale(1)}
.hero .media .kb{animation:none}
.hero__copy{right:auto;width:48vw;padding-left:clamp(22px,4vw,64px);padding-bottom:clamp(24px,5vh,56px)}
.hero__meta{color:var(--ink-60);flex-direction:column;align-items:flex-start;gap:8px;order:0}
.hero__meta .coords{display:inline}
.hero h1{color:var(--ink);text-shadow:none;letter-spacing:-.03em;line-height:.84;margin-left:-.04em}
.hero h1 em{color:var(--brass)}
.hero__side p{color:var(--ink-80);text-shadow:none;max-width:24rem}
.hero .roll--paper{background:var(--ink);color:var(--paper)}.hero .roll--paper .roll__c{background:var(--paper);color:var(--ink)}
.hero__copy{display:flex;flex-direction:column}
.hero__copy h1{order:1;margin-bottom:clamp(22px,4vh,40px)}
.hero__row{order:2;margin-bottom:clamp(18px,3vh,30px)}
.hero__meta{order:3;margin-bottom:0}
.nav .roll--paper{background:var(--ink);color:var(--paper)}.nav .roll--paper .roll__c{background:var(--paper);color:var(--ink)}
@media(max-width:900px){
  .hero .media{inset:calc(var(--frame-pad) + 70px) var(--frame-pad) 47% var(--frame-pad);width:auto;border-radius:999px 999px 16px 16px}
  .hero .frame.open .media{clip-path:inset(0 0 0 0 round 999px 999px 16px 16px)}
  .hero .media{clip-path:inset(100% 0 0 0 round 999px 999px 16px 16px)}
  .hero__copy{width:100%;padding:0 22px 22px}
  .hero__side p{display:none}
  .hero__meta{flex-direction:row;flex-wrap:wrap;gap:6px 16px}
}

/* rooms: picture on the right */
@media(min-width:901px){.rooms__grid{grid-template-columns:1fr 1.08fr}.rooms__pic{order:2}.rooms__pic,.rooms__pic figure{border-radius:18px}}
.tags span{border-radius:6px}

/* gallery: straight, editorial */
.shot{rotate:0deg!important;border-radius:6px;box-shadow:0 30px 60px rgba(0,0,0,.35)}
.gal{border-radius:0}
.area,.book{border-radius:0;margin-top:0}

/* marquee: solid alternates instead of outlines */
.marquee__t span:nth-child(even){color:var(--brass);-webkit-text-stroke:0}
.marquee__t i{border-radius:2px;transform:rotate(45deg)}

.form{border-radius:14px}
.quotes blockquote{letter-spacing:-.01em}
.wordmark{letter-spacing:-.03em}
.wordmark em{color:var(--brass)}

/* availability calendar */
.cal{margin-bottom:8px}
.cal__top{display:flex;justify-content:space-between;align-items:center;margin-bottom:14px}
.cal__nav{display:flex;gap:6px}
.cal__btn{width:34px;height:34px;border-radius:8px;border:1px solid var(--line);display:grid;place-items:center;transition:background-color .25s}
.cal__btn:hover{background:var(--paper-2)}.cal__btn:disabled{opacity:.3;cursor:default}
.cal__btn svg{width:15px;height:15px}
.cal__months{display:grid;grid-template-columns:1fr 1fr;gap:26px}
@media(max-width:640px){.cal__months{grid-template-columns:1fr}}
.cal__title{font-family:var(--serif);font-size:22px;margin-bottom:10px}
.cal__grid{display:grid;grid-template-columns:repeat(7,1fr);gap:2px}
.cal__dow{font:600 10px/1 var(--sans);letter-spacing:.12em;color:var(--ink-40);text-align:center;padding:6px 0}
.cal__d{aspect-ratio:1;border-radius:7px;font:500 13px/1 var(--sans);font-variant-numeric:tabular-nums;color:var(--ink);transition:background-color .2s,color .2s,transform .12s}
.cal__d:not(:disabled):hover{background:var(--paper-2)}
.cal__d:active:not(:disabled){transform:scale(.94)}
.cal__d.past{color:var(--ink-40);opacity:.45}
.cal__d.bk{color:var(--ink-40);text-decoration:line-through;background:repeating-linear-gradient(135deg,transparent 0 4px,rgba(30,42,35,.07) 4px 5px)}
.cal__d.today{box-shadow:inset 0 0 0 1px var(--line)}
.cal__d.in{background:rgba(181,100,58,.14);border-radius:0;color:var(--ink)}
.cal__d.a,.cal__d.b{background:var(--ink)!important;color:var(--paper)!important;text-decoration:none}
.cal__foot{display:flex;flex-wrap:wrap;gap:8px 18px;align-items:center;margin-top:14px;font-size:12.5px;color:var(--ink-60)}
.cal__foot .k{display:inline-block;width:12px;height:12px;border-radius:3px;margin-right:6px;vertical-align:-2px}
.k--b{background:repeating-linear-gradient(135deg,var(--paper-2) 0 3px,rgba(30,42,35,.18) 3px 4px)}.k--s{background:var(--ink)}
.cal__msg{margin-left:auto;color:var(--ink)}
@media(max-width:640px){.cal__msg{margin-left:0;width:100%}}

/* chips: the tick takes no space and is hidden until chosen */
.chip{gap:0}
.chip svg{overflow:hidden;flex:none;width:0;margin-right:0;opacity:0;transition:width .35s var(--expo),margin .35s var(--expo),opacity .25s}
.chip[aria-pressed=true] svg{width:12px;margin-right:8px;opacity:1}

/* gallery: every photo, in a staggered three-column wall under the title */
.gal__stage{min-height:0}
.gal__pin{position:relative;height:auto;padding:clamp(110px,16vh,180px) var(--g) clamp(50px,8vh,90px)}
.gal__cols{position:relative;inset:auto;padding:0 var(--g) clamp(90px,12vh,150px);gap:clamp(14px,1.8vw,26px);align-items:start;pointer-events:auto}
.gal__col{gap:clamp(14px,1.8vw,26px);transform:none!important;align-items:stretch!important}
.gal__col:nth-child(2){padding-top:clamp(40px,10vh,120px)}
.gal__col:nth-child(3){padding-top:clamp(20px,5vh,60px)}
.shot{max-width:none!important;box-shadow:0 18px 40px rgba(0,0,0,.28)}
@media(max-width:760px){
  .gal__cols{grid-template-columns:1fr 1fr;gap:10px;padding-bottom:80px}
  .gal__col,.gal__col:nth-child(3){display:contents!important}
  .shot{border-radius:6px}
}

/* hero name: letters start fully below their line, so no tops peek out before the reveal */
.hero h1 .ch{padding-top:.18em;margin-top:-.18em}
.hero h1 .ch>span{transform:translateY(135%)}
.hero .in h1 .ch>span{transform:none}