/* Hermitage House. Cream page, espresso text, gold painted strokes.
   Each apartment room sets its own colors through the .t-* classes below. */
:root{
  color-scheme: light;
  --cream:#F5EFE3; --cream-deep:#EBE2D0;
  --espresso:#3A2A20; --espresso-soft:#5C4A3E;
  --sage:#7E8C6A; --green:#55664B; --walnut:#8A5A34;
  --blush:#D3A79B; --blush-tint:#EBD3CB; --blue:#A9BECF;
  --gold:#B9975B; --marigold:#D7A03C;
  --display:"Young Serif", Georgia, "Times New Roman", serif;
  --body:"Hanken Grotesk", "Helvetica Neue", Arial, sans-serif;
  --wrap:1120px;
}
*{box-sizing:border-box}
[hidden]{display:none!important}
html{scroll-behavior:smooth}
body{overflow-x:hidden;background:var(--cream);color:var(--espresso);font-family:var(--body);font-size:17px;line-height:1.65;margin:0}
img{display:block;max-width:100%}
p{margin:0}
a{color:inherit}
.wrap{max-width:var(--wrap);margin-inline:auto;padding-inline:20px}
.band{padding-block:56px}
.stack{display:flex;flex-direction:column;gap:18px}
.measure{max-width:62ch}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%)}

/* top bar and menu */
.top{display:flex;justify-content:space-between;align-items:center;gap:16px;padding-block:18px;position:relative}
.mark{font-family:var(--display);font-size:22px;text-decoration:none}
.menu{position:static}
.menu summary{list-style:none;cursor:pointer;width:44px;height:44px;display:grid;place-content:center;gap:6px;border-radius:3px}
.menu summary::-webkit-details-marker{display:none}
.menu summary i{display:block;width:26px;height:2px;background:var(--espresso)}
.menu summary:focus-visible,.btn:focus-visible,button:focus-visible,a:focus-visible{outline:3px solid var(--gold);outline-offset:3px}
.menu nav{position:absolute;right:20px;top:64px;z-index:20;background:var(--cream);border:1px solid rgba(58,42,32,.25);border-radius:3px;padding:10px 0;min-width:230px;display:flex;flex-direction:column}
.menu nav a,.menu nav span{padding:10px 22px;text-decoration:none;font-size:17px}
.menu nav a:hover{background:var(--cream-deep)}
.menu nav span{font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:var(--espresso-soft);padding-bottom:2px}
.menu nav a.sub{padding-left:36px}

h1,h2,h3{font-family:var(--display);font-weight:400;line-height:1.1;margin:0;text-wrap:balance}
h1{font-size:clamp(40px,6vw,72px)}
h2{font-size:clamp(26px,3.6vw,40px)}
h3{font-size:21px}
.eyebrow{font-size:13px;letter-spacing:.14em;text-transform:uppercase;color:var(--espresso-soft)}
.brushed{position:relative;display:inline-block;isolation:isolate}
.brushed svg{display:none}
.brushed::before{content:"";position:absolute;z-index:-1;left:-8%;top:-62%;width:116%;height:230%;background:var(--st,var(--gold));opacity:calc(var(--so,1)*.8);-webkit-mask:url(img/stroke.webp) center/100% 100% no-repeat;mask:url(img/stroke.webp) center/100% 100% no-repeat;transition:background-color .35s}
.rule{display:block;width:120px;height:12px;overflow:visible}
.rule path{fill:none;stroke:var(--ln,var(--gold));stroke-width:5;stroke-linecap:round;filter:url(#brush)}
.dots{line-height:1.9}
.dots span+span::before{content:"\00B7";margin-inline:.55em;font-weight:600}
.note{font-size:14px;opacity:.85}
.btn{display:inline-block;font:inherit;font-size:16px;font-weight:500;text-decoration:none;color:var(--cream);background:var(--green);border:0;border-radius:3px;padding:11px 20px;cursor:pointer}
.btn:hover{background:var(--espresso)}

/* homepage */
.home-hero{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:48px;align-items:center;padding-block:20px 56px}
.home-hero .photo{aspect-ratio:5/4;border-radius:3px;overflow:hidden}
.home-hero .photo img{width:100%;height:100%;object-fit:cover}
.home-hero h1{font-size:clamp(38px,4.6vw,58px)}
.lede{font-size:20px;line-height:1.55}
.pick{background:var(--cream-deep)}
.cards{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:20px}
.card{background:var(--cream);border-radius:3px;overflow:hidden;display:flex;flex-direction:column;text-decoration:none}
.card .ph{aspect-ratio:3/2}
.card .ph img{width:100%;height:100%;object-fit:cover}
.card .tx{padding:22px;display:flex;flex-direction:column;gap:10px;align-items:flex-start}
.split{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:28px 56px;align-items:start}
.blocks{display:flex;flex-direction:column;gap:28px}
.blocks>div{display:flex;flex-direction:column;gap:8px}
.tint{background:var(--cream-deep)}
.map{border:0;width:100%;aspect-ratio:16/10;border-radius:3px;display:block;background:var(--cream-deep)}
.story{background:var(--blush-tint)}
.close{font-family:var(--display);font-size:clamp(24px,3.6vw,38px);line-height:1.25;max-width:24ch;text-wrap:balance}
.sign{font-family:var(--display);font-size:22px}

.home-top{display:flex;flex-direction:column;gap:14px;padding-block:28px 8px}
.around{list-style:none;margin:0;padding:0;columns:2;column-gap:56px}
.around li{display:flex;gap:12px;align-items:flex-start;padding-block:7px;break-inside:avoid}
.around .ics{display:flex;gap:4px;flex:none;padding-top:2px}
.ic{width:24px;height:24px;display:block}
.around a{font-weight:500;text-underline-offset:3px}
.painted{position:relative;display:inline-block;isolation:isolate}
.paint{position:absolute;z-index:-1;left:-6%;width:112%;top:-4%;height:108%;overflow:visible}
.paint path{fill:none;stroke-width:26;stroke-linecap:round;filter:url(#brush)}
.deco{pointer-events:none;user-select:none}
.masthead{position:relative}
.d-mast{position:absolute;right:4%;bottom:6px;width:120px;opacity:.75}
.d-puff{width:96px;opacity:.7;margin-left:6px}
.d-soon{width:110px;opacity:.7}
.contact .wrap{position:relative}
.d-foot{position:absolute;right:20px;top:0;width:130px;opacity:.5}
.map{aspect-ratio:16/7}
.look{text-decoration:underline;text-underline-offset:4px;font-weight:500}
.on-home .mark{visibility:hidden}
.masthead{display:flex;flex-direction:column;align-items:center;gap:18px;text-align:center;padding-block:8px 36px}
.masthead h1{font-family:"Tinos","Liberation Serif","Times New Roman",serif;font-size:clamp(62px,16.5vw,150px);line-height:1;letter-spacing:0}
.masthead .painted{display:inline-flex;flex-direction:column;align-items:center}
.masthead .house{display:block;width:2.8em;height:1em;margin-top:-.147em;overflow:visible;mix-blend-mode:multiply}
.masthead .wh{position:absolute;z-index:-1;left:-12%;top:-8%;width:124%;height:112%;object-fit:fill;max-width:none}
.masthead .paint path{stroke-width:44px}
.masthead .rule{width:160px}
.masthead .eyebrow{font-size:14px;letter-spacing:.22em}
.preview .slide{aspect-ratio:16/9}
.preview figcaption{position:absolute;left:14px;bottom:14px;background:rgba(245,239,227,.92);color:var(--espresso);font-size:14px;font-weight:500;padding:6px 12px;border-radius:3px}
.apt-title{position:relative;font-family:"Allura","Snell Roundhand","Brush Script MT",cursive;font-weight:400;font-size:clamp(46px,12.5vw,92px);line-height:1;height:2.52em;width:6.5em;max-width:100%;margin:0}
.apt-title .wash{position:absolute;left:-.29em;top:.1em;width:6.73em;height:2.34em;max-width:none;object-fit:fill}
.apt-title .scr{position:absolute;left:.19em;top:.885em;z-index:2}
.apt-title .numeral{position:absolute;left:2.42em;top:.02em;width:3.365em;height:2.346em;overflow:visible;mix-blend-mode:multiply;z-index:1}
.card h3{font-size:26px}
.apt-head{padding-block:0 14px}
/* apartment pages: swipeable rooms */
.gal{padding-block:26px 28px;background:var(--bg);color:var(--ink,var(--espresso));transition:background-color .35s,color .35s}
.gal .brushed path,.gal .rule path{transition:stroke .35s}
.tabs{display:flex;flex-wrap:wrap;gap:6px 6px;padding-bottom:18px}
.tabs button{font:inherit;font-size:15px;color:inherit;background:none;border:1px solid transparent;border-radius:3px;padding:7px 12px;cursor:pointer;opacity:.75}
.tabs button[aria-pressed="true"]{border-color:currentColor;opacity:1}
.stage{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,4fr);gap:28px 44px;align-items:start}
.frame{position:relative}
.track{display:flex;overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none;border-radius:3px;overscroll-behavior-x:contain}
.track::-webkit-scrollbar{display:none}
.slide{flex:0 0 100%;scroll-snap-align:center;aspect-ratio:4/3;position:relative;display:grid;place-items:center;background:rgba(30,27,25,.08);margin:0}
.slide img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.slide.soon span{font-size:13px;letter-spacing:.14em;text-transform:uppercase;opacity:.75;border:1.5px dashed currentColor;border-radius:3px;padding:26px 34px}
.arrow{position:absolute;top:50%;transform:translateY(-50%);width:44px;height:44px;border-radius:50%;border:0;background:rgba(245,239,227,.92);color:var(--espresso);font-size:22px;line-height:1;cursor:pointer}
.arrow.prev{left:10px}.arrow.next{right:10px}
.arrow:disabled{opacity:.3;cursor:default}
.count{font-size:13px;letter-spacing:.1em;padding-top:10px;opacity:.8;font-variant-numeric:tabular-nums}
.room-info{display:flex;flex-direction:column;gap:16px;padding-bottom:28px}
.t-living{--bg:#D9DECB;--st:#8A5A34;--so:.55;--ln:#55664B}
.t-kitchen{--bg:#55664B;--ink:#F5EFE3;--st:#B9975B;--so:.85;--ln:#B9975B}
.t-primary{--bg:#EBD3CB;--st:#7E8C6A;--so:.7;--ln:#7E8C6A}
.t-second{--bg:#D5E0EA;--st:#7F9BB8;--so:.85;--ln:#3A2A20}
.t-bath1{--bg:#DCDEDB;--st:#55664B;--so:.6;--ln:#1E1B19}
.t-bath2{--bg:#EDE6D6;--st:#B9975B;--so:.85;--ln:#1E1B19}
.a1-bed{--bg:#D5E0EA;--st:#7F9BB8;--so:.85;--st2:#D7A03C;--ln:#7F9BB8}
.a1-work{--bg:#F3DDD4;--st:#C9A24E;--so:.8;--st2:#7F8FA3;--ln:#7F8FA3}
.a1-dine{--bg:#F0E2C6;--st:#D3A79B;--so:.85;--st2:#7F9BB8;--ln:#7F9BB8}
.a1-living{--bg:#DADBDC;--st:#D7A03C;--so:.8;--st2:#D7A03C;--ln:#7F9BB8}
.a1-kitchen{--bg:#E6ECF2;--st:#B9975B;--so:.85;--ln:#D7A03C}
.a1-bath{--bg:#EDE6D6;--st:#7F9BB8;--so:.8;--ln:#7F9BB8}

.cal-bar{display:flex;align-items:center;gap:10px}
.cal-bar button{width:44px;height:44px;border-radius:50%;border:1px solid rgba(58,42,32,.35);background:none;color:var(--espresso);font-size:22px;line-height:1;cursor:pointer}
.cal-bar button:disabled{opacity:.3;cursor:default}
.cal-key{display:flex;align-items:center;gap:8px;margin-left:auto;font-size:14px}
.cal-key span{display:inline-block;width:16px;height:16px;border-radius:3px;margin-left:10px}
.k-open{border:1px solid rgba(58,42,32,.35)} .k-taken{background:rgba(58,42,32,.16)}
.cal-months{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:28px 56px}
.cal-month h3{font-size:20px;padding-bottom:10px}
.cal-grid{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:4px;font-variant-numeric:tabular-nums}
.cal-grid span{aspect-ratio:1/1;display:grid;place-items:center;font-size:15px;border-radius:3px}
.cal-grid .dow{font-size:12px;letter-spacing:.08em;text-transform:uppercase;color:var(--espresso-soft);aspect-ratio:auto;padding-bottom:4px}
.cal-grid .open{border:1px solid rgba(58,42,32,.22)}
.cal-grid .taken{background:rgba(58,42,32,.13);color:rgba(58,42,32,.5);text-decoration:line-through}
.cal-grid .past{color:rgba(58,42,32,.28)}
.policy h1{font-size:clamp(34px,5.4vw,60px)}
.policy h2{font-size:24px}
.policy ul{margin:0;padding-left:20px;display:flex;flex-direction:column;gap:8px;max-width:62ch}
.facts{background:var(--cream-deep)}
.facts dl{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:20px 28px;margin-block:0;padding-block:28px}
.facts dt{font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:var(--green)}
.facts dd{margin:4px 0 0;font-family:var(--display);font-size:22px;line-height:1.2}
.pair{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:20px;align-items:start}
.panel{padding:32px;border-radius:3px;display:flex;flex-direction:column;gap:16px}
.pets{background:var(--blush-tint)}
.rules{background:var(--blue)}
.rules ul{margin:0;padding-left:20px;display:flex;flex-direction:column;gap:8px}

.contact{background:#E6CC94;color:var(--espresso)}
.contact{--st:#7E8C6A;--so:.9}
.addr{display:flex;flex-wrap:wrap;align-items:center;gap:12px 16px}
.addr span{font-family:var(--display);font-size:clamp(20px,3.4vw,30px);overflow-wrap:anywhere;user-select:all}
.contact button{font:inherit;font-size:15px;font-weight:500;color:var(--espresso);background:var(--cream);border:0;border-radius:3px;padding:10px 18px;cursor:pointer}
.foot{font-size:13px;letter-spacing:.14em;text-transform:uppercase;opacity:.85}

@media (max-width:820px){
  .band{padding-block:40px}
  .home-hero,.split,.pair,.stage,.cards{grid-template-columns:minmax(0,1fr)}
  .home-hero{gap:24px}
  .facts dl{grid-template-columns:repeat(2,minmax(0,1fr))}
  .arrow{display:none}
  .panel{padding:24px}
  .around{columns:1}
  .cal-months{grid-template-columns:minmax(0,1fr)}
  .d-mast{width:84px;right:0;bottom:-6px}
  .d-puff{display:none}
  .d-foot{width:90px}
  .map{aspect-ratio:4/3}
  .tabs{flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none;margin-inline:-20px;padding-inline:20px}
  .tabs::-webkit-scrollbar{display:none}
  .tabs button{white-space:nowrap}
}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}.gal,.gal *{transition:none!important}}
@media (max-width:560px){.slide{aspect-ratio:1/1}.preview .slide{aspect-ratio:4/3}}

.sq{display:grid;place-items:center;width:30px;height:30px;border-radius:6px;margin:-3px 0 0 -3px}
.sq .ic{width:20px;height:20px}
.apt-cta{margin:0 0 22px}
#expect{--st:#8FA9C2;--so:.85}
.story{--st:#D7A03C;--so:.8}
.contact{--st:#7E8C6A;--so:.9}
#calendar,#cal-1{--st:#8FA9C2;--so:.85}
.inapt{--st:#D7A03C;--so:.8}
#cal-2{--st:#A9B79A;--so:.9}
body:has(.t-living) #calendar{--st:#A9B79A;--so:.9}
body:has(.t-living) .inapt{--st:#D3A79B;--so:.9}
.cal-page .band{padding-top:8px}

/* request a stay */
.reqform{display:flex;flex-direction:column;gap:16px;max-width:620px}
.reqform label{display:flex;flex-direction:column;gap:6px;font-size:14px;font-weight:500}
.reqform input[type=text],.reqform input[type=email],.reqform input[type=tel],.reqform input[type=date],.reqform input[type=number],.reqform select,.reqform textarea{font:inherit;font-size:17px;padding:11px 12px;border:1px solid rgba(58,42,32,.35);border-radius:3px;background:#fff;color:var(--espresso);width:100%;min-height:46px}
.reqform .two{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px}
.reqform .pick{display:flex;gap:10px;flex-wrap:wrap}
.reqform .pick label{flex-direction:row;align-items:center;gap:8px;font-size:16px;font-weight:400;border:1px solid rgba(58,42,32,.35);border-radius:3px;padding:10px 14px;background:#fff;flex:1;min-width:150px}
.reqform .check{flex-direction:row;align-items:center;gap:10px;font-weight:400;font-size:16px}
.reqform hr{border:0;border-top:1px solid rgba(58,42,32,.2);margin:4px 0}
.reqform .hp{position:absolute;left:-9999px;height:0;overflow:hidden}
.reqform .quote{background:var(--cream-deep);border-radius:3px;padding:16px 18px;display:flex;flex-direction:column;gap:6px}
.reqform .quote strong{font-family:"Young Serif",serif;font-weight:400;font-size:26px}
.reqform .quote small{color:var(--espresso-soft)}
.reqmsg{font-weight:500}.reqmsg.err{color:#8C2B1E}.reqmsg.ok{color:var(--green)}
@media (max-width:480px){.reqform .two{grid-template-columns:minmax(0,1fr)}}

.btn.alt{background:none;color:var(--espresso);border:1.5px solid var(--espresso)}
.apt-cta .btn+.btn{margin-left:10px}
.btn.alt:hover{color:var(--cream);background:var(--espresso)}

.picker{display:flex;flex-direction:column;gap:14px}
.picker .cal-grid .open{cursor:pointer;background:#fff}
.picker .cal-grid .open:hover{border-color:var(--green)}
.picker .cal-grid .inrange{background:rgba(85,102,75,.2);border-color:transparent}
.picker .cal-grid .sel{background:var(--green);color:var(--cream);border-color:var(--green)}
.picker .cal-grid .out{background:var(--green);color:var(--cream);border-color:var(--green);cursor:pointer}
.cal-key .k-pick{background:var(--green)}

.reqform .curate{display:flex;flex-direction:column;gap:14px;background:var(--cream-deep);border-radius:3px;padding:16px 18px}
.reqform .chips{display:flex;flex-wrap:wrap;gap:8px}
.reqform .chips label{flex-direction:row;align-items:center;font-size:15px;font-weight:400;border:1px solid rgba(58,42,32,.35);border-radius:999px;padding:8px 14px;background:#fff;cursor:pointer;gap:0}
.reqform .chips input{position:absolute;opacity:0;width:0;height:0}
.reqform .chips label:has(input:checked){background:var(--green);color:var(--cream);border-color:var(--green)}
.reqform .chips label:has(input:focus-visible){outline:2px solid var(--espresso);outline-offset:2px}

.reqthanks{display:flex;flex-direction:column;gap:14px;max-width:520px}
.reqthanks img{width:220px;height:220px;border-radius:3px}