:root{
  --section-room:calc(100dvh - var(--headheight,64px));
  --section-gutter:max(4vw,calc((100vw - 1440px)/2));
}
#app>section{
  box-sizing:border-box;
  min-height:0;
  height:var(--section-room);
  scroll-margin-top:var(--headheight,64px);
  overflow:auto;
  scrollbar-width:thin;
}
#app :is(.project,.locality,.plots,.galleryBlock,.houseAbout,.familyStory,.method,.purchase){
  padding:clamp(14px,3vh,42px) var(--section-gutter);
}
#app :is(.project,.locality,.houseAbout,.familyStory,.method){align-content:center}
#app :is(.project,.houseAbout,.familyStory)>figure{min-width:0;max-height:100%;min-height:0;margin:0}
#app :is(.project,.houseAbout,.familyStory)>figure img{
  display:block;width:100%;height:auto;max-height:calc(var(--section-room) - 8vh);object-fit:contain;
}
#app .plots{
  display:grid;
  grid-template-columns:minmax(225px,.7fr) minmax(0,1.75fr);
  grid-template-rows:minmax(0,1fr) auto;
  column-gap:clamp(18px,3vw,48px);
  align-content:center;align-items:center;
}
.plots .choiceIntro{grid-row:1 / 3;align-self:center}
#app .plots .atlas{
  margin:0;width:100%;max-width:none;max-height:100%;align-self:end;
  position:relative;display:block;border:1px solid #aba27a;border-radius:6px;
  background:#f3efd9;
}
#app .atlas svg{
  display:block;width:100%;height:auto;max-height:calc(var(--section-room) - 18vh);
}
#app .plots>small{grid-column:2;align-self:start;margin:6px 0;text-align:left}
.plots .atlas{grid-row:1}
#app .plots{grid-template-rows:auto auto;align-content:center}
body .estate-plan .zv-hit{fill:#f7e9be;fill-opacity:.055;stroke:#7f642a;stroke-width:2.3}
body .estate-plan .zv-pin{fill:#f8d477;stroke:#fff8db;stroke-width:3}
body .estate-plan .zv-numeral{fill:#241c0c}
body .estate-plan [data-home]:is(:hover,:focus-visible) .zv-hit{stroke:#50361a;stroke-width:4;fill:#fff0a6;fill-opacity:.32}
.estate-plan{filter:saturate(1.24) brightness(1.05)}
body .openSitePlan{
  position:absolute;right:7px;top:7px;
  width:36px;height:36px;display:grid;place-items:center;padding:0;
  border:1px solid #ae9455;border-radius:4px;box-shadow:0 1px 5px #241c1025;
}
.openSitePlan svg{width:18px!important;height:18px!important}
#app .galleryBlock{display:flex;flex-direction:column;justify-content:center;gap:8px}
#app .galleryBlock video{max-height:calc(var(--section-room) - 180px);width:auto;max-width:100%;margin:auto}
#app .albumTile img{max-height:calc(var(--section-room) - 190px)}
#app .purchase{display:flex;flex-direction:column;justify-content:center}
#app .residenceView{display:grid;grid-template-rows:auto minmax(0,1fr) auto;gap:clamp(5px,1vh,12px)}
#app .residenceView .viewTop{margin:0}
#app .sceneBody{min-height:0;display:grid;grid-template-rows:minmax(0,1fr) auto}
#app .scenePhoto{height:auto;min-height:0}
#app .reviewSurface{overflow:auto;min-height:0}
.planDialog{
  box-sizing:border-box;width:min(97vw,1600px);max-width:97vw;
  height:min(94dvh,1050px);max-height:94dvh;padding:0;border:1px solid #b7a16b;
  border-radius:8px;background:#faf7ec;color:#282c24;
}
.planDialog[open]{display:grid;grid-template-rows:auto minmax(0,1fr)}
.planDialog::backdrop{background:#14241ed1}
.planControls{display:flex;align-items:center;gap:8px;padding:10px 14px;background:#fcf8ed;border-bottom:1px solid #c9bf9c}
.planControls h2{font:normal clamp(21px,2.5vw,34px) var(--serif);margin:0 auto 0 0}
.planControls button{min-height:36px;min-width:38px;padding:.2rem .6rem;border-radius:4px}
.planViewport{overflow:auto;overscroll-behavior:contain;background:#f0ecda}
.planScale{display:flex;align-items:center;min-height:100%}
.planScale .estate-plan{width:100%;height:auto;display:block;max-height:none;flex:none}
@media(max-width:800px){
  :root{--section-gutter:5vw}
  #app :is(.project,.locality,.houseAbout,.familyStory){
    display:grid;grid-template-columns:1fr;grid-template-rows:minmax(0,1fr) auto;
    align-content:stretch;align-items:center;gap:clamp(7px,2vh,16px);
  }
  #app .locality{grid-template-rows:auto minmax(0,1fr)}
  #app .locality>figure{min-height:0;margin:0;width:100%;max-width:none;align-self:center}
  #app :is(.project,.houseAbout,.familyStory)>figure{width:100%;height:100%;display:grid;align-content:center}
  #app :is(.project,.houseAbout,.familyStory)>figure img{max-height:100%;height:100%;object-fit:contain}
  #app .projectText{padding:0}
  #app .locality p,#app .method p{line-height:1.42}
  #app .plots{display:flex;flex-direction:column;justify-content:center;align-items:stretch;gap:8px}
  #app .plots .choiceIntro{align-self:auto}
  #app .plots .atlas{align-self:auto}
  #app .plots>small{grid-column:auto}
  #app .plots .choiceIntro p{line-height:1.42}
  #app .method{display:flex;flex-direction:column;justify-content:center;gap:12px}
  #app .method article{margin:0 0 9px}
  #app .method blockquote,#app .purchase blockquote{margin:10px 0;font-size:clamp(18px,2.5vh,24px)}
  #app .method h3,#app .phaseGrid h3{font-size:1.2rem;margin:.25em 0}
  #app .purchase .phaseGrid{gap:6px}
  #app .purchase .phaseGrid article{padding:5px 0}
  #app .galleryBlock .categoryTabs{flex-wrap:nowrap;overflow-x:auto;scrollbar-width:thin}
  #app .galleryBlock .categoryTabs button{flex:none}
  #app .walkFoot{padding:0;margin:0;gap:4px 8px}
}
@media(max-height:540px) and (orientation:landscape){
  #app :is(.project,.locality,.houseAbout,.familyStory,.method){display:grid;grid-template-columns:1fr 1fr;grid-template-rows:minmax(0,1fr)}
  #app .project .projectText h1,#app .locality h2,#app .choiceIntro h2{font-size:clamp(22px,4vw,35px);margin:4px 0}
  #app :is(.projectText,.choiceIntro) p{margin:4px 0;line-height:1.35}
  #app .plots{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.3fr);grid-template-rows:auto auto}
}
#app :is(.method,.phaseGrid) details{border:0;padding:0;margin:0}
#app :is(.method,.phaseGrid) summary{display:list-item;cursor:pointer;color:var(--ink);padding:.4rem 0}
#app :is(.method,.phaseGrid) summary h3{display:inline}
#app .finalPanel{
  display:grid;grid-template-columns:minmax(0,1fr);grid-template-rows:auto minmax(0,1fr);
  height:100%;min-height:0;
}
#app .finalPanel>.reviewStep{overflow:auto;min-height:0;display:flex;flex-direction:column;justify-content:flex-start}
#app .finalPanel>.reviewStep[hidden]{display:none}
.reviewNav{display:flex;gap:4px;overflow-x:auto;padding:6px 8px;background:#ede9dc;border-bottom:1px solid #cdc7b7}
.reviewNav button{flex:1 0 auto;border-radius:3px;min-height:36px;padding:.3rem .5rem}
@media(max-width:800px){.reviewNav{padding:4px;gap:3px}.reviewNav button{padding:.3rem .35rem;font-size:.82rem}}
@media(max-height:740px) and (max-width:800px){
  #app .finalFields{padding:7px 9px;gap:4px}
  #app .finalFields>small,.finalFields .viewContact{margin:2px 0}
  #app .viewContact a{margin:1px}
  #app .finalFields #status:empty{display:none}
}