/* Black Impala. Four colours from the place, three typefaces, one rolling sun.
   Bone 60, Impala Black 30, Boma Clay 10, a pinch of Ochre. */
:root{
  --bone:#E8E4D8;
  --black:#2B2926;
  --clay:#B9714A;
  --ochre:#A67C35;
  --rule:rgba(43,41,38,.22);
  --display:"Libre Caslon Display","Libre Caslon Text",Georgia,"Times New Roman",serif;
  --label:"Libre Caslon Text",Georgia,"Times New Roman",serif;
  --body:"Courier Prime","Courier New",Courier,monospace;
  --gut:clamp(20px,4vw,64px);
  --g:clamp(12px,2vw,28px);
  color-scheme:light;
}
*{box-sizing:border-box}
html{background:var(--bone)}
@media (prefers-reduced-motion:no-preference){html{scroll-behavior:smooth}}
body{margin:0;background:var(--bone);color:var(--black);font-family:var(--body);font-size:clamp(15px,1.05vw,18px);line-height:1.6;-webkit-font-smoothing:antialiased}
img{display:block;max-width:100%;height:auto}
a{color:inherit}
a:focus-visible,button:focus-visible{outline:2px solid var(--clay);outline-offset:4px}
p{margin:0;max-width:62ch}
h1,h2,h3{margin:0;font-weight:400}
figure{margin:0}
figcaption{margin-top:10px}
[id]{scroll-margin-top:124px}
.wrap{padding-inline:var(--gut)}
.tech{font-family:var(--body);font-size:12px;letter-spacing:.12em;text-transform:uppercase;line-height:1.7}
.label{font-family:var(--label);font-size:clamp(13px,.95vw,16px);letter-spacing:.18em;text-transform:uppercase;font-weight:400}
.display{font-family:var(--display);font-weight:400;text-transform:uppercase;letter-spacing:.02em;line-height:.98;text-wrap:balance}
.lede{font-family:var(--body);text-transform:none;letter-spacing:0;line-height:1.5;font-size:clamp(18px,1.55vw,24px);max-width:none;text-wrap:balance}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.on-black{background:var(--black);color:var(--bone)}
.on-clay{background:var(--clay)}
.on-ochre{background:var(--ochre)}
.line{fill:none;stroke:currentColor;stroke-width:2.5px;stroke-linecap:round;stroke-linejoin:round;overflow:visible}
.line path{vector-effect:non-scaling-stroke}
.solid{fill:currentColor}

/* ---------- the bar ---------- */
:root{--bar-h:148px;--bar-top:148px}
html.scrolled{--bar-h:88px}
.bar{position:fixed;inset:0 0 auto 0;z-index:20;display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:16px;height:var(--bar-h);padding:0 var(--gut);background:var(--bone);border-bottom:1px solid var(--rule)}
.logo{display:block;line-height:0;justify-self:center}
.logo svg{height:calc(var(--bar-h) - 16px);width:auto;overflow:visible;transition:height .4s cubic-bezier(.3,.7,.2,1)}
.logo .bar-sun{fill:var(--black)}
.logo-name{fill:var(--bone)}
.bar .menu-btn{justify-self:start}
.bar .book{justify-self:end;text-decoration:none;color:var(--black);background:var(--clay);padding:7px 14px 6px;transition:background .25s ease,color .25s ease}
.bar .book:hover{background:var(--black);color:var(--bone)}
body:not(.home) main{margin-top:calc(var(--bar-top) - 64px)}
.bar{transition:height .4s cubic-bezier(.3,.7,.2,1),background .3s ease,border-color .3s ease}
.home .bar{background:transparent;border-bottom-color:transparent}
.home .bar.on{background:var(--bone);border-bottom-color:var(--rule)}

.bar-mark{display:block;line-height:0}
.bar-mark svg{height:17px;width:auto;fill:var(--black);overflow:visible}
.bar-sun{transform-box:fill-box;transform-origin:center}
.menu-btn{display:inline-block;font-family:var(--body);font-size:12px;line-height:1.7;letter-spacing:.12em;text-transform:uppercase;background:none;border:1px solid var(--black);color:var(--black);padding:6px 12px 5px;cursor:pointer}
.menu{position:fixed;inset:0;z-index:19;background:var(--clay);padding:calc(var(--bar-h) + 28px) var(--gut) 36px;display:grid;align-content:start;gap:clamp(28px,6vh,56px);overflow:hidden}
.menu[hidden]{display:none}
.menu nav,.menu p{position:relative;z-index:1}
.menu ol{list-style:none;margin:0;padding:0;display:grid;gap:4px}
.menu a{text-decoration:none}
.menu ol a{display:flex;gap:14px;align-items:baseline}
.menu .display{font-size:clamp(40px,11vw,72px)}
.menu [aria-current=page] .display{color:var(--bone)}
.menu-sun{position:absolute;z-index:0;width:96vw;height:auto;right:-40vw;bottom:-40vw;color:var(--black)}
body.menu-open{overflow:hidden}
.foot-mark{display:block;line-height:0;margin-bottom:10px}
.foot-mark svg{height:15px;width:auto;fill:var(--bone)}
.bar-nav{display:flex;align-items:center;gap:clamp(14px,2.2vw,34px)}
.bar-nav a{text-decoration:none}
.bar-nav a:hover,.bar-nav a[aria-current=page]{text-decoration:underline;text-underline-offset:5px}
.bar-nav .book{color:var(--black);background:var(--clay);padding:7px 14px 6px;transition:background .25s ease,color .25s ease}
.bar-nav .book:hover{background:var(--black);color:var(--bone);text-decoration:none}
.inner main{padding-top:58px}

@media (min-width:821px) and (prefers-reduced-motion:no-preference){
}

/* ---------- inner page openings: one colour field, one black shape cropped by the edge ---------- */
.open{position:relative;overflow:hidden;min-height:min(54vh,580px);display:grid;align-content:end;padding-block:clamp(96px,9vw,140px) clamp(32px,3.6vw,56px)}
.open .shape{position:absolute;pointer-events:none}
.open .kicker{margin-bottom:clamp(18px,2vw,28px)}
.open h1{font-size:clamp(56px,8vw,190px);position:relative;z-index:1}
.open .sub{position:relative;z-index:1;margin-top:clamp(22px,2.4vw,36px);display:grid;grid-template-columns:repeat(12,1fr);gap:24px}
.open .sub>*{grid-column:1/8}

/* ---------- the grid every gallery is built on ---------- */
.grid{display:grid;grid-template-columns:repeat(12,1fr);column-gap:var(--g);row-gap:var(--rg,0px)}
.f{grid-column:var(--c,1/-1);grid-row:var(--row,auto);margin-top:var(--mt,0);align-self:var(--a,start);position:relative;z-index:var(--z,auto)}
.f img{width:100%;aspect-ratio:var(--r,auto);object-fit:cover;object-position:var(--p,50% 50%)}
.f figcaption{display:flex;gap:1.4ch;align-items:baseline;flex-wrap:wrap}
.word{grid-column:var(--c);grid-row:var(--row,auto);margin-top:var(--mt,0);align-self:var(--a,start);font-family:var(--display);text-transform:uppercase;line-height:.9;font-size:var(--fs,clamp(48px,7vw,130px));letter-spacing:.01em;z-index:2;position:relative}
.word.clay{color:var(--clay)}

/* ---------- section heads ---------- */
.head{display:grid;grid-template-columns:repeat(12,1fr);gap:24px;padding-top:clamp(72px,10vw,170px);padding-bottom:clamp(32px,4vw,64px)}
.head .num{grid-column:1/-1}
.head h2{grid-column:1/11;font-size:clamp(44px,6.6vw,120px)}
.head p{grid-column:1/8;margin-top:22px}
.head .lede{grid-column:1/11;margin-top:22px}

/* ---------- home ---------- */
/* home: one screen, the way in. A photograph on Clay, and the four symbols as doors. */
/* home opens on the sun: a window on Clay with the name inside. As the page moves, it travels up into the bar. */
body.home{--bar-h:88px}
.logo .bar-sun{transform-box:view-box;transform-origin:631.5px 629.5px}
.logo-photo{transform-box:view-box;transform-origin:631.5px 629.5px}
.logo-scrim{fill:var(--black);opacity:.34}
.logo-window{opacity:0}
.home .logo svg{transition:none}
body.menu-open.home .logo svg{transform:none!important}
body.menu-open .logo-window{opacity:0!important}
.opener{height:200vh;height:200svh;background:var(--clay)}
.opener-stage{position:sticky;top:0;height:100vh;height:100svh;overflow:hidden}
.opener-sun{position:absolute;inset:0;display:grid;place-items:center}
.opener-sun svg{height:min(74vh,90vw);width:auto;overflow:visible}
.opener-sun .bar-sun{fill:var(--black);transform-box:view-box;transform-origin:631.5px 629.5px}
.opener-sun .logo-window{opacity:1}
.js-hero .opener-sun{display:none}
.opener-l,.opener-r{position:absolute;bottom:clamp(22px,4vh,44px);margin:0}
.opener-l{left:var(--gut);color:var(--black)}
.opener-r{right:var(--gut);color:var(--black);text-decoration:none;border-bottom:1px solid currentColor;padding-bottom:3px}
.opener-r:hover{color:var(--bone)}
.home .bar:not(.on) .book{background:var(--black);color:var(--bone)}
/* the photographs tile in underneath */
/* they rise over the opening screen while the sun is on its way up */
#look{scroll-margin-top:var(--bar-h)}
.look{position:relative;z-index:1;background:var(--bone);margin-top:-100vh;margin-top:-100svh;max-width:none;padding-block:clamp(8px,1vw,16px) clamp(48px,6vw,96px)}
.tiles{columns:4;column-gap:clamp(8px,1vw,16px)}
.tiles figure{break-inside:avoid;margin:0 0 clamp(8px,1vw,16px)}
.tiles a{display:block;overflow:hidden}
.tiles img{width:100%;height:auto;display:block;transition:transform 1.2s cubic-bezier(.2,.7,.2,1)}
@media (hover:hover){.tiles a:hover img{transform:scale(1.03)}}
/* then the words, on the same Bone as the rest of the page */
.say{padding-block:clamp(16px,2vw,32px) clamp(64px,8vw,130px)}
.say-grid{display:grid;grid-template-columns:repeat(12,1fr);gap:clamp(28px,4vw,64px) 24px}
.say h2{grid-column:1/10;font-size:clamp(30px,4.4vw,78px);line-height:1;margin:0}
.say-copy{grid-column:7/12;display:grid;gap:18px;justify-items:start}
.say-copy p{margin:0;max-width:44ch}
.say .more{text-decoration:none;border-bottom:2px solid var(--clay);padding-bottom:4px}
.say-line{grid-column:1/-1;color:var(--clay);font-size:clamp(34px,6.4vw,118px);line-height:.95;margin:clamp(20px,3vw,48px) 0 0}
@media (min-width:821px){.home .bar-nav a:not(.book){display:none}}
.welcome{display:grid;grid-template-columns:repeat(12,1fr);gap:24px;padding-block:clamp(72px,10vw,170px) clamp(40px,5vw,80px)}
.welcome h1,.welcome h2{grid-column:1/9;font-size:clamp(44px,6.4vw,120px)}
.welcome .lede{grid-column:1/11;margin-top:clamp(24px,3vw,44px)}
.welcome .unwind{font-size:clamp(26px,2.7vw,46px);line-height:1.05;color:var(--clay);margin-top:6px}
.welcome .copy{grid-column:5/11;margin-top:clamp(24px,3vw,44px);display:grid;gap:22px;justify-items:start}
.more{display:inline-block;text-decoration:none;border-bottom:1px solid currentColor;padding-bottom:2px}
.more:hover{border-bottom-width:2px}
.more.clay{border-bottom:2px solid var(--clay)}

.doors{list-style:none;margin:0;padding:0 0 clamp(64px,8vw,140px)}
.doors li{border-top:1px solid var(--rule)}
.doors li:last-child{border-bottom:1px solid var(--rule)}
.doors a{display:grid;grid-template-columns:6ch 1fr minmax(120px,22vw);gap:24px;align-items:center;padding-block:clamp(14px,1.6vw,24px);text-decoration:none}
.doors .display{font-size:clamp(40px,6vw,110px)}
.doors img{width:100%;aspect-ratio:3/2;object-fit:cover;filter:grayscale(1);transition:filter .3s ease}
.doors a:hover img,.doors a:focus-visible img{filter:none}
@media (hover:none){.doors img{filter:none}}
.doors a:hover .display{color:var(--clay)}

.words{display:grid;grid-template-columns:repeat(12,1fr);column-gap:24px;padding-block:clamp(80px,10vw,180px);border-top:1px solid var(--rule)}
.words blockquote{margin:0;font-family:var(--label);font-style:italic;text-transform:none;letter-spacing:0;line-height:1.3;text-wrap:balance}
.words blockquote::before{content:"\201C";color:var(--clay)}
.words blockquote::after{content:"\201D"}
.score{grid-column:1/-1;display:grid;grid-template-columns:repeat(12,1fr);gap:24px;align-items:end;margin-bottom:clamp(40px,6vw,100px)}
.score .n{grid-column:1/8;font-family:var(--display);color:var(--clay);font-size:clamp(130px,19vw,340px);line-height:.8;margin:0}
.score-copy{grid-column:8/13;display:grid;gap:12px;padding-bottom:clamp(6px,1vw,18px)}
.lead-quote{grid-column:2/12;margin:0 0 clamp(48px,7vw,120px)}
.lead-quote blockquote{font-size:clamp(24px,2.7vw,46px)}
.lead-quote figcaption{margin-top:20px}
.voices{grid-column:1/-1;list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(12,1fr);column-gap:24px;row-gap:clamp(36px,5vw,80px)}
.voices li{grid-column:var(--c);margin-top:var(--mt,0);display:grid;gap:12px;align-content:start}
.voices blockquote{font-size:clamp(19px,1.65vw,27px)}
.all-reviews{grid-column:1/-1;display:flex;flex-wrap:wrap;gap:8px 24px;margin-top:clamp(48px,6vw,100px)}
.all-reviews a{text-decoration:none;border-bottom:1px solid currentColor;padding-bottom:2px}
.all-reviews a:hover{color:var(--clay)}

.find{display:grid;grid-template-columns:repeat(12,1fr);gap:24px;padding-bottom:clamp(80px,10vw,160px);align-items:end}
.find figure{grid-column:1/9}
.find figure img{width:100%;aspect-ratio:16/9;object-fit:cover}
.find .addr{grid-column:9/13;display:grid;gap:16px}
.find .addr .lede{font-size:clamp(18px,1.55vw,24px)}

/* ---------- the house: room tour ---------- */
.count{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(16px,3vw,48px);align-items:start}
.count figure{display:grid;gap:14px}
.count .n{font-family:var(--display);font-size:clamp(150px,21vw,380px);line-height:.8;margin:0}
.count .n.zero{color:var(--clay)}
.count .c2{margin-top:clamp(40px,9vw,170px)}
.count .c3{margin-top:clamp(80px,18vw,340px)}
.count img{width:100%;object-fit:cover}
.c1 img{aspect-ratio:4/3}.c2 img{aspect-ratio:4/5}.c3 img{aspect-ratio:3/2}
.also{display:grid;grid-template-columns:repeat(12,1fr);gap:24px;padding-block:clamp(48px,6vw,96px)}
.also ul{grid-column:4/12;list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:10px 0}
.also li{font-family:var(--display);text-transform:uppercase;font-size:clamp(26px,3vw,52px);line-height:1.05}
.also li:not(:last-child)::after{content:"\00B7";color:var(--clay);margin-inline:.4em}

.tour{display:grid;grid-template-columns:repeat(6,1fr);gap:clamp(8px,1.2vw,18px);padding-bottom:clamp(64px,8vw,140px);align-items:start}
.tour a{display:grid;gap:10px;text-decoration:none}
.tour a:nth-child(2){margin-top:clamp(20px,3vw,50px)}
.tour a:nth-child(3){margin-top:clamp(40px,6vw,100px)}
.tour a:nth-child(4){margin-top:clamp(20px,3vw,50px)}
.tour a:nth-child(6){margin-top:clamp(20px,3vw,50px)}
.tour img{width:100%;aspect-ratio:9/16;object-fit:cover;transition:transform .4s ease}
.tour a:hover img{transform:translateY(-6px)}
.tour .t{display:flex;gap:1.2ch}
.tour .t span:first-child{color:var(--clay)}

.room{padding-block:clamp(72px,9vw,160px) clamp(40px,5vw,80px);border-top:1px solid var(--rule)}
.room-head{display:grid;grid-template-columns:repeat(12,1fr);gap:24px;margin-bottom:clamp(36px,5vw,80px)}
.room-head .num{grid-column:1/-1;display:flex;gap:2ch}
.room-head .num span:first-child{color:var(--clay)}
.room-head h2{grid-column:1/12;font-size:clamp(56px,9vw,170px);margin-top:12px}
.room-head .lede{grid-column:1/10;margin-top:clamp(18px,2vw,30px)}
.room-head p:not(.lede){grid-column:1/7;margin-top:18px}
.sub-room{display:grid;grid-template-columns:repeat(12,1fr);gap:24px;margin:clamp(56px,7vw,120px) 0 clamp(24px,3vw,44px)}
.sub-room h3{grid-column:1/8;font-size:clamp(36px,4.4vw,80px)}
.sub-room p{grid-column:1/7;margin-top:14px}
.next{display:flex;justify-content:flex-end;padding-top:clamp(28px,3vw,48px)}
.next a{text-decoration:none}
.next a:hover span:last-child{text-decoration:underline;text-underline-offset:4px}

.hand{display:grid;grid-template-columns:repeat(12,1fr);gap:24px;padding-block:clamp(64px,8vw,140px);border-top:1px solid var(--rule)}
.hand h2{grid-column:1/6;grid-row:1;font-size:clamp(40px,5.4vw,96px)}
.hand p{grid-column:1/6;grid-row:2;align-self:start;margin-top:8px}
.mats{grid-column:7/13;grid-row:1/4;display:grid;grid-template-columns:repeat(4,1fr);gap:clamp(8px,1.2vw,16px);align-items:start}
.mats figure:nth-child(2){margin-top:clamp(30px,5vw,80px)}.mats figure:nth-child(3){margin-top:clamp(60px,10vw,160px)}.mats figure:nth-child(4){margin-top:clamp(90px,15vw,240px)}
.mats img{width:100%;aspect-ratio:9/20;object-fit:cover}

/* ---------- the farm ---------- */
.namesake{position:relative;overflow:hidden}
.namesake img{width:100%;height:min(100vh,1000px);object-fit:cover;object-position:50% 45%}
.namesake .over{position:absolute;inset:auto var(--gut) clamp(28px,4vw,64px) var(--gut);color:var(--bone);display:grid;gap:14px}
.namesake .over .display{font-size:clamp(48px,9vw,170px)}
.who figcaption .af{font-size:14px}
.note{display:grid;grid-template-columns:repeat(12,1fr);gap:24px;padding-block:clamp(48px,6vw,96px)}
.note p{grid-column:4/11}
.grid-note{display:grid;grid-template-columns:repeat(12,1fr);gap:24px;padding-bottom:clamp(64px,8vw,140px)}
.grid-note>p{grid-column:1/7}
.hide{grid-column:8/13;display:grid;gap:14px}
.hide img{width:100%;aspect-ratio:2/1;object-fit:cover;object-position:28% 72%}
.birds .f img{filter:none}

/* ---------- the area ---------- */
.km{font-family:var(--display);text-transform:uppercase;font-size:clamp(150px,22vw,400px);line-height:.8;margin:0}
.todo{list-style:none;margin:0;padding:0;display:grid;gap:0}
.todo li{display:grid;grid-template-columns:repeat(12,1fr);gap:24px;padding-block:clamp(18px,2vw,30px);border-top:1px solid var(--rule);align-items:baseline}
.todo li:last-child{border-bottom:1px solid var(--rule)}
.todo .label{grid-column:1/5;font-size:clamp(15px,1.2vw,20px)}
.todo p{grid-column:5/11}

/* ---------- stay: dates and contact ---------- */
.dates{display:grid;grid-template-columns:repeat(12,1fr);gap:24px;padding-block:clamp(40px,5vw,80px) clamp(64px,8vw,140px)}
.cal{grid-column:1/9}
.pick{grid-column:9/13;align-self:start;position:sticky;top:90px;display:grid;gap:18px}
.cal-nav{display:flex;justify-content:flex-end;gap:8px;margin-bottom:-34px;position:relative;z-index:1}
.cal-nav button{font:inherit;background:none;border:0;width:44px;height:44px;cursor:pointer;color:var(--black)}
.cal-nav button:hover:not(:disabled){background:rgba(43,41,38,.06)}
.cal-nav button:disabled{opacity:.25;cursor:default}
.months{display:grid;grid-template-columns:1fr 1fr;gap:clamp(20px,3vw,48px)}
.month h3{font-family:var(--label);text-transform:uppercase;letter-spacing:.18em;font-size:15px;margin-bottom:12px}
.dow,.days{display:grid;grid-template-columns:repeat(7,1fr)}
.dow span{font-size:11px;letter-spacing:.12em;text-transform:uppercase;text-align:center;padding-bottom:8px}
.days button{font-family:var(--body);font-size:15px;aspect-ratio:1/1;border:0;background:none;color:var(--black);cursor:pointer;position:relative;padding:0}
.days button:hover:not(:disabled){outline:1px solid var(--black);outline-offset:-1px}
.days button:disabled{cursor:default}
.days .past{opacity:.28}
.days .taken{color:rgba(43,41,38,.38);text-decoration:line-through;text-decoration-thickness:1px}
.days .in-range{background:rgba(185,113,74,.18)}
.days .start,.days .end{background:var(--clay);color:var(--black);text-decoration:none}
.days .out-only{color:var(--black);text-decoration:none}
.pick .sum{font-family:var(--body);text-transform:none;letter-spacing:0;font-size:clamp(17px,1.35vw,21px);line-height:1.45;min-height:2.2em;margin:0}
.pick .book{display:block;text-align:center;text-decoration:none;padding:16px 16px 15px;background:var(--clay);color:var(--black);transition:background .25s ease,color .25s ease}
.pick .book:hover{background:var(--black);color:var(--bone)}
.pick .alt{margin:0;font-size:14px;line-height:1.6}
.pick #clear{background:none;border:0;padding:0;text-align:left;text-decoration:underline;cursor:pointer;color:inherit;justify-self:start}
.note-s{font-size:13px;line-height:1.5;opacity:.75;max-width:56ch;margin:22px 0 0}
.price{display:grid;gap:6px;margin:0;padding-bottom:18px;border-bottom:1px solid var(--rule)}
.price .display{font-size:clamp(30px,2.8vw,48px)}
.facts{margin:0}
.facts>div{display:grid;grid-template-columns:minmax(9ch,34%) 1fr;gap:16px;padding-block:13px;border-bottom:1px solid var(--rule);align-items:baseline}
.facts>div:first-child{border-top:1px solid var(--rule)}
.facts dd{margin:0}
.faq>.tech{display:block;padding-bottom:13px}
.faq .q{border-top:1px solid var(--rule)}
.faq .q:last-child{border-bottom:1px solid var(--rule)}
.faq summary{list-style:none;cursor:pointer;display:flex;justify-content:space-between;align-items:baseline;gap:20px;padding-block:14px 13px}
.faq summary::-webkit-details-marker{display:none}
.faq summary h3{font-family:var(--body);text-transform:none;letter-spacing:0;font-weight:400;font-size:clamp(16px,1.2vw,19px);line-height:1.45;margin:0}
.faq summary::after{content:"+";font-family:var(--body);font-size:18px;line-height:1;flex:none}
.faq .q[open] summary::after{content:"\2212"}
@media (hover:hover){.faq summary:hover h3{text-decoration:underline;text-underline-offset:4px}}
.faq summary:focus-visible{outline:2px solid var(--clay);outline-offset:2px}
.faq .q p{margin:0;padding:0 40px 18px 0;max-width:58ch}
.stay{display:grid;grid-template-columns:repeat(12,1fr);gap:24px;padding-bottom:clamp(80px,10vw,160px)}
.stay .facts{grid-column:1/6}
.stay .faq{grid-column:7/13}
.stay.know{align-items:start}
.stay .copy{grid-column:7/13;display:grid;gap:22px;align-content:start;justify-items:start}
.contact-big{grid-column:1/7;display:grid;gap:18px;align-content:start}
.contact-big > a{font-family:var(--body);text-transform:none;letter-spacing:0;font-size:clamp(20px,2vw,32px);text-decoration:none;line-height:1.1;display:block}
.contact-big > a:hover{text-decoration:underline;text-decoration-color:var(--clay);text-underline-offset:6px;text-decoration-thickness:2px}

/* ---------- endings: a photograph with one shape drawn over it ---------- */
.ending{position:relative;overflow:hidden;height:min(100vh,960px);width:100%}
.ending img{width:100%;height:100%;object-fit:cover}
.ending svg{position:absolute;left:50%;top:50%;height:min(58vh,560px);width:auto;max-width:70vw;transform:translate(-50%,-50%);color:var(--bone)}
.turn{display:flex;justify-content:space-between;align-items:end;gap:24px;padding-block:clamp(36px,4vw,64px)}
.turn a{text-decoration:none;display:grid;gap:8px;justify-items:end;text-align:right}
.turn .display{font-size:clamp(40px,6vw,110px)}
.turn a:hover .display{color:var(--clay)}
footer.foot{display:grid;grid-template-columns:repeat(12,1fr);gap:24px;padding:40px var(--gut) 44px;background:var(--black);color:var(--bone)}
.foot .a{grid-column:1/5;display:grid;gap:6px}
.foot .b{grid-column:5/9;display:grid;gap:6px}
.foot .c{grid-column:9/13;display:grid;gap:6px;justify-items:end;text-align:right}
.foot a{text-decoration:none}
.foot a:hover{text-decoration:underline}

/* ---------- small screens ---------- */
@media (max-width:1099px){.tiles{columns:3}}
@media (max-width:599px){.tiles{columns:2}}
@media (max-width:820px){
  .say h2,.say-copy,.say-line{grid-column:1/-1}
  .opener-l,.opener-r{font-size:10px}
  .opener-l{max-width:calc(50% - var(--gut) - 10px)}
  .opener-l br{display:none}
  body.home{--bar-h:76px}
  .bar-nav a:not(.book){display:none}
  .bar-nav{gap:10px}
  .menu-btn{display:inline-block}
  .bar-mark svg{height:15px}
  .f{grid-column:var(--cm,1/-1);margin-top:var(--mtm,0);grid-row:auto}
  .word{grid-column:1/-1;margin-top:24px;grid-row:auto;font-size:min(var(--fs,48px),9.5vw);overflow-wrap:anywhere}
  .display{overflow-wrap:break-word}
  .grid{row-gap:var(--rgm,24px)}
  .welcome h1,.welcome h2,.welcome .lede,.welcome .copy{grid-column:1/-1}
  :root{--bar-h:112px;--bar-top:112px}
  html.scrolled{--bar-h:76px}
  
  .head h2,.head p,.head .lede{grid-column:1/-1}
  .doors a{grid-template-columns:4ch 1fr 96px;gap:12px}
  .score .n,.score-copy,.lead-quote{grid-column:1/-1}
  .voices li{grid-column:1/-1;margin-top:0}
  .voices li:nth-child(even){padding-left:12vw}
  .find figure,.find .addr{grid-column:1/-1}
  .count{grid-template-columns:1fr 1fr}
  .count .c3{grid-column:1/3;margin-top:24px;width:70%;justify-self:end}
  .count .c2{margin-top:80px}
  .also ul{grid-column:1/-1}
  .tour{grid-template-columns:repeat(3,1fr);row-gap:28px}
  .tour a:nth-child(n){margin-top:0}
  .tour a:nth-child(3n+2){margin-top:30px}
  .room-head h2,.room-head .lede,.room-head p:not(.lede){grid-column:1/-1}
  .sub-room h3,.sub-room p{grid-column:1/-1}
  .hand h2,.hand p,.mats{grid-column:1/-1;grid-row:auto}
  .mats figure:nth-child(n){margin-top:0}
  .open .sub>*{grid-column:1/-1}
  .open{min-height:min(66vh,560px)}
  .note p,.grid-note>p,.hide{grid-column:1/-1}
  .todo .label,.todo p{grid-column:1/-1}
  .dates .cal,.dates .pick{grid-column:1/-1}
  .pick{position:static}
  .months{grid-template-columns:1fr}
  .months .month:nth-child(2){display:none}
  .stay .facts,.stay .copy,.stay .faq{grid-column:1/-1}
  .stay .faq{margin-top:28px}
  .cal-nav{margin-bottom:-38px}
  .foot .a,.foot .b,.foot .c{grid-column:1/-1;justify-items:start;text-align:left}
  .ending{height:auto;aspect-ratio:3/4}
  .turn>.tech{display:none}
  .turn{justify-content:flex-end}
  .contact-big{grid-column:1/-1}
  .contact-big > a{font-size:clamp(20px,6.4vw,46px)}
  .contact-big > a[href^="tel"]{white-space:nowrap}
}
@media (prefers-reduced-motion:reduce){
}

/* ---------- the bath on the home page, with a guest's line ---------- */
.f figcaption.cap{display:grid;gap:8px;justify-items:start}
.said{display:block;font-family:var(--label);font-style:italic;text-transform:none;letter-spacing:0;line-height:1.3;font-size:clamp(18px,1.45vw,23px);max-width:24em;text-wrap:balance}
.said .tech{display:block;margin-top:8px;font-style:normal}
.said .q{color:var(--clay)}

/* ---------- motion: slow, and only what the place would do ----------
   The sun rises and rolls. Pictures arrive as you reach them. Each page ends with its shape drawn by hand. */
@media (prefers-reduced-motion:no-preference){
  /* pages cross-fade into each other; the bar stays put */
  @view-transition{navigation:auto}
  .bar{view-transition-name:bar}
  ::view-transition-old(root),::view-transition-new(root){animation-duration:.5s}

  /* pictures and words arrive once, as you reach them */
  .js .rv{opacity:0;transform:translateY(22px);transition:opacity 1s ease var(--d,0ms),transform 1.2s cubic-bezier(.2,.7,.2,1) var(--d,0ms)}
  .js .word.rv{transform:translateX(-36px)}
  .js .word.rv[style*="text-align:right"]{transform:translateX(36px)}
  .js .rv.flat{transform:none}
  .js .rv.in{opacity:1;transform:none}

  /* each page opening settles into place */
  @keyframes settle{from{opacity:0;transform:translateY(26px)}}
  @keyframes arrive{from{opacity:0}}
  .open .shape{animation:arrive 1.4s ease backwards}
  .open .kicker{animation:settle .9s cubic-bezier(.2,.7,.2,1) .1s backwards}
  .open h1{animation:settle 1s cubic-bezier(.2,.7,.2,1) .2s backwards}
  .open .sub,.open .sub + p{animation:settle 1s cubic-bezier(.2,.7,.2,1) .38s backwards}
  .open .shape{will-change:transform}

  /* photos lean in a touch when you point at one that leads somewhere */
  .f a img{transition:transform 1.2s cubic-bezier(.2,.7,.2,1)}
  .f a{display:block;overflow:hidden}
  .f a:hover img{transform:scale(1.025)}
  .f figcaption a{display:inline;overflow:visible}
}
@media (min-width:821px) and (prefers-reduced-motion:no-preference){
}
.scrolly{overflow-x:clip}
.scrolly.live>.f,.scrolly.live>.word{will-change:transform,opacity}
@media print{.js .rv,.scrolly>*{opacity:1!important;transform:none!important}}