/* Pause House — First light to the Milky Way */
:root{
  --bone:#F4EFE6; --bone-2:#E9E2D2; --sand:#E5D9C3; --sky:#DCE6EA;
  --dusk:#E8B4A0; --ink:#191C22; --ink-2:#23262E; --night:#0B0D12;
  --t-dark:#2B2620; --t-mid:#5C5344; --t-soft:#8A7C63;
  --t-light:#E8DCC8; --t-lmid:#B9AA96; --t-lsoft:#77705F;
  --serif:"Fraunces",Georgia,serif; --sans:"Inter",-apple-system,sans-serif;
  --max:1200px;
}
*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
body{font-family:var(--sans);font-size:16px;line-height:1.65;color:var(--t-dark);background:var(--bone);-webkit-font-smoothing:antialiased}
img{max-width:100%;display:block}
a{color:inherit}
h1,h2,h3,.serif{font-family:var(--serif);font-weight:400;line-height:1.12;letter-spacing:.005em}
h1{font-size:clamp(2.6rem,7vw,5.2rem)}
h2{font-size:clamp(1.9rem,4.2vw,3.1rem)}
h3{font-size:clamp(1.25rem,2.2vw,1.6rem)}
.wrap{max-width:var(--max);margin:0 auto;padding:0 clamp(1.25rem,4vw,3rem)}
.label{font-size:.72rem;letter-spacing:.22em;text-transform:uppercase;color:var(--t-soft)}
.dark .label{color:var(--t-lsoft)}
section{padding:clamp(3.5rem,8vw,7rem) 0}
.dark{background:var(--ink);color:var(--t-light)}
.darkest{background:var(--night);color:var(--t-light)}
.sand{background:var(--sand)}
.sky{background:var(--sky)}
.bone2{background:var(--bone-2)}

/* nav */
nav{position:sticky;top:0;z-index:50;display:flex;align-items:center;justify-content:space-between;padding:.9rem clamp(1.25rem,4vw,3rem);background:color-mix(in srgb,var(--bone) 92%,transparent);backdrop-filter:blur(8px);border-bottom:1px solid rgba(43,38,32,.08)}
nav .logo{font-family:var(--serif);font-size:1.3rem;letter-spacing:.14em;text-decoration:none}
nav ul{display:flex;gap:clamp(1rem,3vw,2.2rem);list-style:none;align-items:center}
nav ul a{text-decoration:none;font-size:.85rem;letter-spacing:.06em;color:var(--t-mid)}
nav ul a:hover{color:var(--t-dark)}
.dark-nav{background:color-mix(in srgb,var(--ink) 92%,transparent);border-bottom-color:rgba(232,220,200,.1)}
.dark-nav .logo,.dark-nav ul a{color:var(--t-light)}
.dark-nav ul a{color:var(--t-lmid)}
@media(max-width:760px){nav{padding:.8rem 1rem}nav .logo{font-size:1.05rem;letter-spacing:.1em}nav ul{gap:1rem}nav ul .btn{display:none}}

video::-webkit-media-controls-start-playback-button{display:none!important;-webkit-appearance:none}
video::-webkit-media-controls{display:none!important}

/* buttons */
.btn{display:inline-block;padding:.85rem 1.9rem;border:1px solid currentColor;font-size:.82rem;letter-spacing:.14em;text-transform:uppercase;text-decoration:none;transition:all .25s}
.btn:hover{background:var(--t-dark);color:var(--bone);border-color:var(--t-dark)}
.dark .btn:hover,.darkest .btn:hover,.on-img .btn:hover{background:var(--bone);color:var(--ink);border-color:var(--bone)}
.btn-solid{background:var(--t-dark);color:var(--bone);border-color:var(--t-dark)}

/* hero */
.hero{position:relative;height:92vh;min-height:560px;display:flex;align-items:flex-end;overflow:hidden;background:var(--night)}
.hero video,.hero>img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.hero .veil{position:absolute;inset:0;background:linear-gradient(to top,rgba(11,13,18,.72) 0%,rgba(11,13,18,.12) 45%,rgba(11,13,18,.25) 100%)}
.hero .inner{position:relative;z-index:2;color:var(--bone);padding-bottom:clamp(2.5rem,6vw,5rem);width:100%}
.hero p.sub{font-size:clamp(1rem,1.8vw,1.25rem);color:var(--t-light);max-width:34em;margin:.9rem 0 1.8rem}

/* split panel */
.split{display:grid;grid-template-columns:1fr 1fr;min-height:78vh}
.split a.panel{position:relative;display:flex;align-items:flex-end;text-decoration:none;overflow:hidden;min-height:420px}
.split .panel img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:transform 1.2s ease}
.split .panel:hover img{transform:scale(1.04)}
.split .panel .veil{position:absolute;inset:0;background:linear-gradient(to top,rgba(11,13,18,.62),rgba(11,13,18,.05) 55%)}
.split .panel .cap{position:relative;z-index:2;color:var(--bone);padding:2.2rem}
.split .panel .cap p{color:var(--t-light);font-size:.95rem;margin:.4rem 0 1.1rem;max-width:26em}
@media(max-width:760px){.split{grid-template-columns:1fr}}

/* arc strip */
.arc{display:grid;grid-template-columns:repeat(8,1fr);gap:6px}
.arc figure img{aspect-ratio:3/4;object-fit:cover;width:100%}
.arc figcaption{font-size:.7rem;letter-spacing:.12em;text-transform:uppercase;color:var(--t-soft);text-align:center;padding-top:.5rem}
@media(max-width:760px){.arc{grid-template-columns:repeat(4,1fr)}}

/* grids & cards */
.grid2{display:grid;grid-template-columns:1fr 1fr;gap:clamp(1.5rem,4vw,4rem);align-items:center}
.grid4{display:grid;grid-template-columns:repeat(4,1fr);gap:1.25rem}
@media(max-width:900px){.grid4{grid-template-columns:repeat(2,1fr)}}
@media(max-width:760px){.grid2{grid-template-columns:1fr}}
.grid4 img{aspect-ratio:4/5;object-fit:cover;width:100%}
.grid4 h3{font-size:1.15rem;margin:.9rem 0 .3rem}
.grid4 p{font-size:.9rem;color:var(--t-mid)}
.microquote{font-style:italic;font-size:.85rem;color:var(--t-soft);margin-top:.5rem}

/* reviews */
.stars{color:var(--dusk);letter-spacing:.15em}
.rgrid{display:grid;grid-template-columns:repeat(3,1fr);gap:1.25rem;margin-top:2.5rem}
@media(max-width:900px){.rgrid{grid-template-columns:1fr}}
.rcard{padding:1.8rem;font-size:.95rem}
.rcard.light{background:#FFFDF8;border:1px solid rgba(43,38,32,.12);color:var(--t-mid)}
.rcard.night{background:var(--ink);color:var(--t-lmid)}
.rcard blockquote{font-family:var(--serif);font-size:1.06rem;line-height:1.5;font-style:italic}
.rcard.night blockquote{color:var(--t-light)}
.rcard.light blockquote{color:var(--t-dark)}
.rcard cite{display:block;font-style:normal;font-size:.78rem;letter-spacing:.08em;margin-top:1.1rem;color:var(--t-soft)}

/* galleries (house pages) */
.gal{display:grid;grid-template-columns:repeat(12,1fr);gap:10px}
.gal img{width:100%;height:100%;object-fit:cover}
.gal .w7{grid-column:span 7}.gal .w5{grid-column:span 5}.gal .w4{grid-column:span 4}.gal .w6{grid-column:span 6}.gal .w8{grid-column:span 8}.gal .w12{grid-column:1/-1}
@media(max-width:760px){.gal .w7,.gal .w5,.gal .w4,.gal .w6,.gal .w8{grid-column:1/-1}}

/* facts strip */
.facts{display:flex;flex-wrap:wrap;gap:.6rem 0;border-top:1px solid rgba(43,38,32,.15);border-bottom:1px solid rgba(43,38,32,.15);padding:1.1rem 0;font-size:.82rem;letter-spacing:.05em;color:var(--t-mid)}
.facts span:not(:last-child)::after{content:"·";margin:0 .8rem;color:var(--t-soft)}
.dark .facts{border-color:rgba(232,220,200,.18);color:var(--t-lmid)}
.dark .facts span:not(:last-child)::after{color:var(--t-lsoft)}

/* faq */
details{border-top:1px solid rgba(43,38,32,.15);padding:1rem 0}
details:last-of-type{border-bottom:1px solid rgba(43,38,32,.15)}
summary{cursor:pointer;font-family:var(--serif);font-size:1.1rem;list-style:none;display:flex;justify-content:space-between}
summary::after{content:"+";color:var(--t-soft)}
details[open] summary::after{content:"–"}
details p{padding-top:.6rem;color:var(--t-mid);max-width:60em}
.dark details{border-color:rgba(232,220,200,.18)}
.dark details p{color:var(--t-lmid)}

/* crosslink band */
.xlink{position:relative;display:block;text-decoration:none;min-height:340px;display:flex;align-items:center;overflow:hidden}
.xlink img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.xlink .veil{position:absolute;inset:0;background:rgba(11,13,18,.45)}
.xlink .cap{position:relative;z-index:2;color:var(--bone);width:100%;text-align:center}

/* footer */
footer{background:var(--night);color:var(--t-lsoft);padding:3rem 0;font-size:.83rem}
footer .wrap{display:flex;flex-wrap:wrap;gap:1rem;justify-content:space-between}
footer a{color:var(--t-lmid);text-decoration:none}
footer a:hover{color:var(--t-light)}

/* forms */
form{display:grid;gap:1rem;max-width:520px}
input,textarea{font:inherit;padding:.8rem 1rem;border:1px solid rgba(43,38,32,.25);background:#FFFDF8;width:100%}
textarea{min-height:140px}
input:focus,textarea:focus{outline:2px solid var(--dusk)}

.mt1{margin-top:1rem}.mt2{margin-top:2rem}.mt3{margin-top:3rem}
.center{text-align:center}
.lede{font-size:clamp(1.05rem,1.6vw,1.3rem);max-width:44em;color:var(--t-mid)}
.dark .lede,.darkest .lede{color:var(--t-lmid)}