/* Blessed Homes Rentals. Hand-written, no framework. Tokens first, one left rail, two label sizes, fluid type. */
@font-face{font-family:"Fraunces";src:url("../fonts/fraunces-600-opsz.d36b534b44.woff2") format("woff2");font-weight:600;font-style:normal;font-display:optional}
@font-face{font-family:"Inter";src:url("../fonts/inter-400.192b70fe09.woff2") format("woff2");font-weight:400;font-style:normal;font-display:optional}
@font-face{font-family:"Inter";src:url("../fonts/inter-600.c96618b033.woff2") format("woff2");font-weight:600;font-style:normal;font-display:optional}

:root{
  --paper:#fafaf7;
  --paper-2:#f1efe8;
  --card:#ffffff;
  --ink:#1a1a1a;
  --muted:#4f4d47;
  --line:#d6d2c6;
  --accent:#2e5b4c;
  --accent-ink:#ffffff;
  --tint:#e6eee9;
  --tint-ink:#22443a;
  --rail:clamp(16px,4vw,48px);
  --max:72rem;
  --fs-label:.78rem;
  --fs-meta:.9rem;
  --fs-body:clamp(1.0625rem,1rem + .25vw,1.1875rem);
  --fs-lede:clamp(1.0625rem,.98rem + .45vw,1.3rem);
  --fs-h1:clamp(2.4rem,1.45rem + 3.9vw,4.1rem);
  --fs-h2:clamp(1.75rem,1.3rem + 1.8vw,2.6rem);
  --fs-h3:clamp(1.125rem,1.02rem + .45vw,1.3rem);
  --gap:clamp(1.25rem,1rem + 1vw,2rem);
  --sec:clamp(3.25rem,2.4rem + 3vw,5.5rem);
  --radius:8px;
}

html{color-scheme:light;-webkit-text-size-adjust:100%;scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{transition:none !important;animation:none !important}
}
*,*::before,*::after{box-sizing:border-box}
body{margin:0;background:var(--paper);color:var(--ink);font-family:"Inter",system-ui,-apple-system,"Segoe UI",sans-serif;font-size:var(--fs-body);line-height:1.6;display:flex;flex-direction:column;min-height:100vh}
img{max-width:100%;height:auto}
main{flex:1 0 auto;width:100%}
p{margin:0 0 1em;max-width:68ch;text-wrap:pretty}
a{color:var(--accent);text-decoration-thickness:1px;text-underline-offset:3px}
h1,h2,h3{margin:0;line-height:1.15;color:var(--ink);text-wrap:balance}
h1,h2{font-family:"Fraunces",Georgia,"Times New Roman",serif;font-weight:600;letter-spacing:-.01em}
h1{font-size:var(--fs-h1)}
h2{font-size:var(--fs-h2)}
h3{font-family:"Inter",system-ui,sans-serif;font-size:var(--fs-h3);font-weight:600;line-height:1.3}
:focus-visible{outline:3px solid var(--ink);outline-offset:3px}

.wrap{max-width:var(--max);margin-inline:auto;padding-inline:var(--rail)}
.skip{position:absolute;left:var(--rail);top:-120px;z-index:10;background:var(--ink);color:var(--paper);padding:.75rem 1rem;border-radius:var(--radius);text-decoration:none}
.skip:focus{top:.75rem}
.label{font-size:var(--fs-label);font-weight:600;color:var(--muted);letter-spacing:.02em;margin:0 0 .5rem}
.meta{font-size:var(--fs-meta);color:var(--muted)}
.src{font-size:var(--fs-meta);color:var(--muted);margin:0}
.src a{color:var(--accent)}
.nw{white-space:nowrap}

/* preview notice (preview builds only) */
.preview{background:var(--ink);color:var(--paper);font-size:var(--fs-meta)}
.preview .wrap{padding-block:.5rem}
.preview summary{cursor:pointer;min-height:44px;display:flex;align-items:center;gap:.5rem;flex-wrap:wrap}
.preview summary:focus-visible{outline-color:var(--paper)}
.preview p{margin:.25rem 0 0;max-width:none}

/* header */
.site-head{border-bottom:1px solid var(--line);background:var(--paper)}
.site-head .wrap{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:.5rem 1.5rem;padding-block:.6rem}
.brand{display:inline-flex;min-height:44px;align-items:center;text-decoration:none}
.brand img{display:block;height:52px;width:auto}
.site-nav ul{display:flex;flex-wrap:wrap;list-style:none;margin:0 0 0 -.6rem;padding:0;gap:0 .15rem}
.site-nav a{display:inline-flex;align-items:center;min-height:44px;padding:0 .6rem;color:var(--ink);text-decoration:none;border-radius:6px}
.site-nav a:hover{text-decoration:underline;text-underline-offset:4px}
@media (max-width:39.99rem){
.site-nav{flex:1 1 100%}
.site-nav ul{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:0;margin:0 0 0 -.2rem;width:100%}
.site-nav a{min-height:44px;padding:.3rem .2rem;font-size:.9rem;line-height:1.25;justify-content:flex-start;text-align:left}
}

/* buttons */
.actions{display:flex;flex-wrap:wrap;gap:.75rem;margin:1.5rem 0 0}
.btn{display:inline-flex;align-items:center;justify-content:center;min-height:48px;padding:.7rem 1.25rem;border:2px solid var(--ink);border-radius:var(--radius);font:600 1rem/1.2 "Inter",system-ui,sans-serif;text-decoration:none;color:var(--ink);background:transparent}
.btn:hover{text-decoration:underline;text-underline-offset:4px}
.btn--primary{background:var(--accent);border-color:var(--accent);color:var(--accent-ink)}

/* hero */
.hero{padding-block:var(--sec) calc(var(--sec) * .6)}
.hero .wrap{display:grid;gap:var(--gap)}
@media (min-width:60rem){.hero .wrap{grid-template-columns:minmax(0,1fr) minmax(0,1.15fr);align-items:center}}
.hero h1{margin:0 0 1rem}
.lede{font-size:var(--fs-lede);max-width:34rem}

/* photos: full strength, captions under them, never text over them */
figure{margin:0}
.photo img{display:block;width:100%;height:auto;border-radius:var(--radius);background:var(--paper-2)}
.photo figcaption{margin-top:.6rem;font-size:var(--fs-meta);color:var(--muted);max-width:62ch;text-wrap:pretty}

/* sections */
.sec{padding-block:var(--sec)}
.sec--tint{background:var(--paper-2)}
.sec__head{display:grid;gap:.75rem;margin-bottom:var(--gap)}
.sec__head p{color:var(--muted)}
.sec__head--wide{max-width:50rem}

/* problem figures */
.stats{display:grid;gap:var(--gap);list-style:none;margin:0;padding:0}
@media (min-width:40rem){.stats{grid-template-columns:repeat(2,minmax(0,1fr))}}
.stat{display:flex;flex-direction:column;gap:.6rem;background:var(--card);border:1px solid var(--line);border-radius:var(--radius);padding:clamp(1.25rem,1rem + 1vw,2rem)}
.stat__fig{font-family:"Fraunces",Georgia,serif;font-weight:600;font-size:clamp(2rem,1.4rem + 2.2vw,3rem);line-height:1.05;color:var(--accent);margin:0}
.stat__text{margin:0;max-width:none}
.stat .src{margin-top:auto;padding-top:.75rem;border-top:1px solid var(--line)}
.stats + .meta{margin-top:1.25rem}

/* homes */
.homes{display:grid;gap:var(--gap);list-style:none;margin:0;padding:0}
@media (min-width:58rem){.homes{grid-template-columns:repeat(2,minmax(0,1fr));align-items:stretch}}
.home{display:flex;flex-direction:column;gap:1rem;background:var(--card);border:1px solid var(--line);border-radius:var(--radius);padding:clamp(1.25rem,1rem + 1vw,1.75rem)}
.home__tag{align-self:flex-start;font-size:var(--fs-label);font-weight:600;color:var(--tint-ink);background:var(--tint);padding:.3rem .7rem;border-radius:999px}
.home__icon{display:block;width:96px;height:auto;color:var(--accent)}
.home p{max-width:none}
.specs{list-style:none;margin:0;padding:0;display:grid;gap:.55rem;max-width:68ch}
.specs li{position:relative;padding-left:1.7rem;max-width:none}
.specs li::before{content:"";position:absolute;left:.2rem;top:.5rem;width:.6rem;height:.35rem;border-left:2px solid var(--accent);border-bottom:2px solid var(--accent);transform:rotate(-45deg)}
.home__status{padding:.9rem;border-radius:var(--radius);background:var(--paper-2);font-size:var(--fs-meta)}
.home__status p{margin:0;max-width:none}
.home .photo{margin-top:.25rem}
@media (min-width:58rem){
.home--wide{grid-column:1 / -1;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);column-gap:var(--gap);align-items:start}
.home--wide>*:not(.photo){grid-column:2}
.home--wide .photo{grid-column:1;grid-row:1 / span 6;margin:0}
}

/* build */
.build-points{display:grid;gap:var(--gap);list-style:none;margin:0 0 var(--gap);padding:0}
@media (min-width:52rem){.build-points{grid-template-columns:repeat(3,minmax(0,1fr))}}
.build-points li{display:grid;gap:.5rem;border-top:3px solid var(--accent);padding-top:1rem}
.build-points p{margin:0;max-width:none}
.spec-table{margin:0;border-top:1px solid var(--line)}
.spec-table .row{display:grid;gap:.2rem;padding:.9rem 0;border-bottom:1px solid var(--line)}
@media (min-width:40rem){.spec-table .row{grid-template-columns:13rem minmax(0,1fr);gap:1rem;align-items:baseline}}
.spec-table dt{font-weight:600}
.spec-table dd{margin:0}
.spec-table .src{margin:0;display:block}
@media (min-width:60rem){.spec-table .src{display:inline}}
.not-done{margin-top:1.25rem;font-weight:600}

/* village and tour */
.figs{display:grid;gap:var(--gap);margin:0;padding:0}
@media (min-width:58rem){.figs{grid-template-columns:repeat(2,minmax(0,1fr))}.figs figure:first-child{grid-column:1 / -1}.figs--pair figure:first-child{grid-column:auto}}
.figs--pair{margin-block:var(--gap)}
.tour-band{background:var(--accent);color:var(--accent-ink);padding-block:var(--sec)}
.tour-band h2{color:#ffffff}
.tour-band p{color:#ffffff;max-width:60ch}
.tour-band :focus-visible{outline-color:#ffffff}
.tour-band .btn{border-color:#ffffff;background:#ffffff;color:var(--accent)}
.tour-band .src{color:#ffffff}
.tour-band .src a{color:#ffffff}
.tour-band .wrap{display:grid;gap:1rem}
.tour-band .actions{margin-top:.5rem}

/* questions and contact */
.faq{display:grid;gap:var(--gap);margin:0;padding:0;list-style:none;max-width:52rem}
.faq h3{margin:0 0 .3rem}
.faq p{margin:0;max-width:none}
.contact-box{display:grid;gap:.75rem;max-width:48rem;background:var(--card);border:1px solid var(--line);border-radius:var(--radius);padding:clamp(1.25rem,1rem + 1vw,2rem)}
.contact-box p{margin:0;max-width:none}

/* footer */
.site-foot{background:var(--paper-2);border-top:1px solid var(--line);padding-block:clamp(2.25rem,2rem + 2vw,3.5rem)}
.site-foot .wrap{display:grid;gap:1.25rem}
.site-foot .brand img{height:44px}
.site-foot ul{display:flex;flex-wrap:wrap;list-style:none;margin:0;padding:0;gap:.25rem 1.25rem}
.site-foot ul a{display:inline-flex;align-items:center;min-height:44px;color:var(--ink)}
.site-foot p{margin:0;max-width:70ch}
.site-foot .meta{margin:0}

/* sources and 404 */
.doc{padding-block:var(--sec)}
.doc__lede{color:var(--muted);max-width:56rem;margin-bottom:var(--gap)}
.doc h2{font-size:clamp(1.5rem,1.2rem + 1vw,2rem);margin:0 0 var(--gap)}
.doc h3{margin:1.75rem 0 .9rem}
.doc section + section{margin-top:clamp(2.5rem,2rem + 2vw,4rem)}
.src-list{list-style:none;margin:0;padding:0;display:grid;gap:1.1rem}
.src-list li{border-top:1px solid var(--line);padding-top:1rem;max-width:none}
.src-list p{margin:0;max-width:none;overflow-wrap:anywhere}
.src-list a{overflow-wrap:anywhere}
.src-list .tag{display:inline-block;font-size:var(--fs-label);font-weight:600;color:var(--tint-ink);background:var(--tint);padding:.15rem .5rem;border-radius:999px;margin-bottom:.35rem}
.src-list .sources-note{color:var(--muted);font-size:var(--fs-meta)}
.src-list .link-line{font-size:var(--fs-meta);margin-top:.3rem}
.nf{padding-block:var(--sec)}
.nf__actions{margin-top:1.5rem}
.nf h1{margin:0 0 .75rem}

/* inside a studio, under the home cards */
.studio__h{margin:clamp(2.5rem,5vw,4rem) 0 .5rem}
.studio__p{max-width:65ch;margin:0 0 var(--gap)}
.figs--studio + .actions{margin-top:var(--gap)}

/* inside/: the 360 viewer (Pannellum), its markers, the spot buttons and the flat copies */
.inside{padding-block:clamp(2rem,1.5rem + 2vw,3.5rem) var(--sec)}
.inside h1{margin:0 0 .75rem;font-size:var(--fs-h2)}
.inside .lede{max-width:44rem}
.pano{margin:var(--gap) 0 0}
/* .pano > .pano__view outranks pannellum.css (.pnlm-container sets height:100%, which is 0 in a figure) */
.pano>.pano__view{position:relative;width:100%;height:clamp(340px,64vh,760px);border-radius:var(--radius);overflow:hidden;background:#20201e}
.pano__view:focus-visible{outline:3px solid var(--ink);outline-offset:3px}
.pano figcaption{margin-top:.6rem;font-size:var(--fs-meta);color:var(--muted);max-width:72ch}
.pano__nojs{color:#ffffff;padding:1.25rem;margin:0}
.pano__badge{position:absolute;left:.6rem;bottom:.6rem;z-index:3;margin:0;padding:.3rem .65rem;border-radius:999px;background:rgba(20,20,18,.78);color:#ffffff;font-size:.8rem;font-weight:600;line-height:1.3;pointer-events:none}
.spot{width:44px;height:44px;cursor:pointer}
.spot__ring{display:block;width:44px;height:44px;border-radius:50%;border:3px solid #ffffff;background:rgba(46,91,76,.62);box-shadow:0 1px 6px rgba(0,0,0,.45)}
.spot:hover .spot__ring,.spot:focus-visible .spot__ring{background:rgba(46,91,76,.92)}
.spot:focus-visible{outline:3px solid #ffffff;outline-offset:2px;border-radius:50%}
.spot__label{position:absolute;top:50px;left:50%;transform:translateX(-50%);white-space:nowrap;padding:.2rem .6rem;border-radius:999px;background:rgba(20,20,18,.82);color:#ffffff;font-size:.85rem;font-weight:600;line-height:1.35}
@media (pointer:coarse){.pano__view .pnlm-controls-container{transform:scale(1.55);transform-origin:0 0}}
.spots{margin-top:1.25rem}
.spots h2{margin:0 0 .5rem;font-family:"Inter",system-ui,sans-serif}
.spots ul{display:flex;flex-wrap:wrap;gap:.5rem;list-style:none;margin:0 0 .5rem;padding:0}
.spots button{min-height:44px;padding:.5rem 1rem;border:2px solid var(--accent);border-radius:999px;background:var(--card);color:var(--accent);font:600 .95rem/1.2 "Inter",system-ui,sans-serif;cursor:pointer}
.spots button[aria-pressed="true"]{background:var(--accent);color:var(--accent-ink)}
.spots button:hover{text-decoration:underline;text-underline-offset:3px}
.inside__notes{margin-top:var(--gap);max-width:68ch}
.inside__flat{margin-top:var(--sec)}
.inside__flat h2{margin:0 0 .75rem}
@media (min-width:58rem){.figs--flat{grid-template-columns:repeat(2,minmax(0,1fr))}.figs--flat figure:first-child{grid-column:auto}}

/* buildings/: product pages (exterior renders, specs, the owner hall, the 360 tour) */
.product .home__tag{display:inline-block;margin:0 0 1rem}
.product .lede{max-width:52rem}
.figs--product{margin:var(--gap) 0 .75rem}
@media (min-width:58rem){.figs--product{grid-template-columns:repeat(2,minmax(0,1fr))}.figs--product figure:first-child{grid-column:auto}}
.product__sec{margin-top:var(--sec);max-width:72rem}
.product__sec h2{margin:0 0 .75rem}
.product__sec>p{max-width:68ch}
.product__sec .specs{margin:1rem 0}
.product__sec .home__status{margin-top:1rem;max-width:68ch}
.spots__group{font-size:var(--fs-label);font-weight:600;color:var(--muted);margin:.75rem 0 .35rem}
.home__more{margin:.25rem 0 0}
.homes--products{margin-top:var(--gap)}
.product-card__h{font-family:"Fraunces",Georgia,serif;font-size:var(--fs-h2)}
.product-card__h a{color:var(--ink);text-decoration:none}
.product-card__h a:hover{text-decoration:underline}