/* ============================================================
   Courtyard House — Alder Practice
   gallery white · charcoal lines · natural oak · terracotta
   ============================================================ */

:root{
  --paper:#FBFAF8;
  --paper-2:#F4F2ED;
  --ink:#26241F;
  --ink-soft:#6E6A60;
  --ink-faint:#9B968A;
  --line:#DEDACF;
  --line-strong:#26241F;
  --terra:#C4643B;
  --oak:#C8A87C;
  --charcoal:#2E2B27;
  --font:'Archivo','Helvetica Neue',Helvetica,Arial,sans-serif;
  --hud-bg:rgba(251,250,248,.85);
  --shadow-soft:0 18px 50px -20px rgba(38,36,31,.25);
}

*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
html,body{background:var(--paper);color:var(--ink);font-family:var(--font);
  -webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
body{overflow-x:hidden}
::selection{background:var(--terra);color:#fff}

button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}
a{color:inherit;text-decoration:none}

#status{position:fixed;width:0;height:0;overflow:hidden;clip:rect(0 0 0 0)}
.noscript{padding:2rem;font-size:.9rem}

/* ---------- header ---------- */
.site-head{position:fixed;inset:0 0 auto 0;z-index:60;display:flex;align-items:center;
  justify-content:space-between;padding:1.1rem clamp(1.2rem,3.5vw,3rem);
  pointer-events:none}
.site-head>*{pointer-events:auto}
.wordmark{font-weight:700;font-size:.95rem;letter-spacing:.14em;text-transform:uppercase}
.wordmark sup{font-size:.5em;color:var(--terra);letter-spacing:0}
.site-nav{display:flex;gap:1.6rem;font-size:.72rem;letter-spacing:.16em;text-transform:uppercase}
.site-nav a{color:var(--ink-soft);padding-bottom:2px;border-bottom:1px solid transparent;transition:color .2s,border-color .2s}
.site-nav a:hover{color:var(--ink);border-color:var(--terra)}
.site-nav .nav-cta{color:var(--terra);border-bottom:1px solid var(--terra)}
@media(max-width:900px){.site-nav{display:none}}

/* ---------- stage / sticky viewport ---------- */
#stage{height:580vh;position:relative}
#stage .sticky{position:sticky;top:0;height:100vh;height:100svh;overflow:hidden}
/* overflow:hidden on <html> (scroll lock) defeats sticky, so pin the stage
   fixed while an interior perspective is open. */
body.is-interior #stage .sticky{position:fixed;top:0;left:0;right:0;height:100vh;height:100svh}
#scene{position:absolute;inset:0;width:100%;height:100%;display:block;touch-action:pan-y}

/* ---------- hero ---------- */
#hero{position:absolute;left:clamp(1.2rem,5vw,4.5rem);bottom:clamp(7.5rem,16vh,10rem);
  max-width:min(92vw,980px);pointer-events:none;will-change:opacity,transform}
#hero .eyebrow{font-size:.72rem;font-weight:600;letter-spacing:.26em;text-transform:uppercase;
  color:var(--ink-soft);margin-bottom:1.4rem;display:flex;align-items:center;gap:.9rem}
#hero .eyebrow::before{content:"";width:2.4rem;height:1px;background:var(--terra)}
#hero h1{font-size:clamp(2.7rem,7vw,6.2rem);line-height:.98;font-weight:600;
  letter-spacing:-.025em;text-wrap:balance}
#hero h1 em{font-style:normal;color:var(--terra)}
#hero .sub{margin-top:1.5rem;font-size:clamp(1rem,1.6vw,1.3rem);color:var(--ink-soft);
  font-weight:400;letter-spacing:.01em}
#hero .hero-meta{margin-top:2.2rem;font-size:.7rem;letter-spacing:.22em;text-transform:uppercase;
  color:var(--ink-faint)}

#scroll-hint{position:absolute;left:50%;bottom:6.4rem;transform:translateX(-50%);
  display:flex;flex-direction:column;align-items:center;gap:.7rem;color:var(--ink-soft);
  font-size:.68rem;letter-spacing:.24em;text-transform:uppercase;pointer-events:none;
  transition:opacity .5s}
#scroll-hint i{width:1px;height:3.2rem;background:linear-gradient(var(--ink-soft),transparent);
  display:block;animation:hint 2.2s ease-in-out infinite}
@keyframes hint{0%,100%{transform:scaleY(.4);transform-origin:top;opacity:.4}
  50%{transform:scaleY(1);opacity:1}}

/* ---------- room labels ---------- */
#labels{position:absolute;inset:0;pointer-events:none}
.room-label{position:absolute;left:0;top:0;display:flex;flex-direction:column;align-items:center;
  gap:.15rem;padding:.55rem .7rem .6rem;pointer-events:auto;cursor:pointer;
  background:rgba(251,250,248,.72);border:1px solid rgba(38,36,31,.14);
  backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);
  transition:border-color .2s,background .2s;will-change:transform}
.room-label i{width:7px;height:7px;border-radius:50%;background:var(--terra);
  margin-bottom:.25rem;transition:transform .2s}
.room-label .rl-n{font-size:.66rem;font-weight:600;letter-spacing:.18em;text-transform:uppercase;
  color:var(--ink);white-space:nowrap}
.room-label .rl-a{font-size:.6rem;letter-spacing:.12em;color:var(--ink-soft);white-space:nowrap}
.room-label:hover,.room-label:focus-visible{border-color:var(--terra);background:rgba(251,250,248,.95)}
.room-label:hover i{transform:scale(1.5)}
.dim-label{position:absolute;left:0;top:0;pointer-events:none;font-size:.62rem;
  letter-spacing:.14em;color:var(--ink);background:rgba(251,250,248,.85);padding:0 .3rem;
  white-space:nowrap;will-change:transform}
@media(max-width:640px){
  .room-label{padding:.4rem .5rem .45rem}
  .room-label .rl-n{font-size:.58rem}
  .room-label .rl-a{display:none}
  .dim-label{display:none}
}

/* ---------- compass ---------- */
#compass{position:absolute;top:4.6rem;right:clamp(1rem,3vw,2.6rem);width:88px;text-align:center;
  pointer-events:none}
#compass svg{width:78px;height:78px;overflow:visible}
#compass .c-ring{fill:rgba(251,250,248,.7);stroke:var(--line-strong);stroke-width:1.2}
#compass .c-t{font-size:13px;font-weight:600;fill:var(--ink-soft);
  font-family:var(--font);text-anchor:middle;letter-spacing:.05em}
#compass .c-t.c-north{fill:var(--ink)}
#compass .c-n{fill:var(--terra)}
#compass-rose{transform-origin:0 0}
#sun-readout{margin-top:.55rem;font-size:.6rem;letter-spacing:.14em;color:var(--ink-soft);
  text-transform:uppercase;background:rgba(251,250,248,.7);padding:.25rem .3rem}
@media(max-width:640px){#compass{width:70px;top:4.2rem}#compass svg{width:60px;height:60px}}

/* ---------- caption ---------- */
#caption{position:absolute;left:clamp(1.2rem,3vw,3rem);bottom:8.6rem;display:flex;
  flex-direction:column;gap:.35rem;pointer-events:none;max-width:22rem}
#caption .cap-idx{font-size:.68rem;font-weight:700;letter-spacing:.2em;color:var(--terra)}
#caption .cap-name{font-size:1.05rem;font-weight:600;letter-spacing:.02em}
#caption .cap-desc{font-size:.78rem;line-height:1.5;color:var(--ink-soft)}
@media(max-width:640px){#caption{bottom:11.4rem;max-width:70vw}}

/* ---------- interior bar ---------- */
#interior-bar{position:absolute;left:clamp(1.2rem,3vw,3rem);bottom:8.6rem;z-index:8;
  display:flex;flex-direction:column;gap:.8rem;align-items:flex-start}
#interior-bar button{font-size:.72rem;font-weight:600;letter-spacing:.18em;text-transform:uppercase;
  padding:.55rem .9rem;border:1px solid var(--line-strong);background:var(--hud-bg);
  transition:background .2s,color .2s}
#interior-bar button:hover{background:var(--ink);color:var(--paper)}
#interior-bar .ib-room{display:flex;flex-direction:column}
#interior-name{font-size:1.5rem;font-weight:600;letter-spacing:-.01em}
#interior-meta{font-size:.72rem;letter-spacing:.18em;text-transform:uppercase;color:var(--ink-soft);
  margin-top:.2rem}
#interior-bar .ib-hint{font-size:.68rem;color:var(--ink-faint);letter-spacing:.06em;max-width:20rem}
@media(max-width:640px){#interior-bar{bottom:12rem}#interior-name{font-size:1.2rem}}

/* ---------- HUD ---------- */
.hud{position:absolute;left:0;right:0;bottom:0;z-index:10;display:grid;
  grid-template-columns:auto 1fr 1fr auto;gap:clamp(.8rem,2vw,2.2rem);align-items:end;
  padding:.9rem clamp(1.2rem,3vw,3rem) 1.05rem;background:var(--hud-bg);
  backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);
  border-top:1px solid var(--line)}
.hud-label{display:flex;align-items:baseline;gap:.55rem;font-size:.62rem;font-weight:600;
  letter-spacing:.22em;text-transform:uppercase;color:var(--ink-soft);margin-bottom:.5rem}
.hud-label b{font-weight:600;color:var(--ink);letter-spacing:.1em;font-variant-numeric:tabular-nums}
#cut-auto{font-size:.58rem;letter-spacing:.12em;color:var(--terra);border:1px solid currentColor;
  padding:1px 6px;border-radius:2px;text-transform:uppercase;transition:.2s}
#cut-auto.on{background:var(--terra);color:#fff}
#cut-auto:not(.on):hover{color:var(--ink)}

.presets{display:flex;flex-direction:column}
.presets .hud-label{margin-bottom:.55rem}
.presets button{font-size:.72rem;font-weight:600;letter-spacing:.16em;text-transform:uppercase;
  padding:.5rem .85rem;border:1px solid var(--line);border-bottom-color:transparent;
  background:transparent;color:var(--ink-soft);transition:.2s}
.presets button+button{border-top-width:0}
.presets button:first-child{border-radius:6px 6px 0 0}
.presets button:last-child{border-bottom-color:var(--line);border-radius:0 0 6px 6px}
.presets button:hover{color:var(--ink)}
.presets button.on{background:var(--ink);border-color:var(--ink);color:var(--paper)}
.presets button[disabled]{opacity:.35;cursor:default}

.hud-group.slider{display:flex;flex-direction:column;min-width:0}
.sl-ends{display:flex;justify-content:space-between;font-size:.56rem;letter-spacing:.1em;
  color:var(--ink-faint);margin-top:.3rem;font-variant-numeric:tabular-nums}
input[type=range]{-webkit-appearance:none;appearance:none;width:100%;height:22px;background:transparent;cursor:pointer}
input[type=range]::-webkit-slider-runnable-track{height:2px;background:linear-gradient(90deg,
  var(--ink-faint),var(--ink-soft));border-radius:1px}
input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;appearance:none;width:14px;height:14px;
  border-radius:50%;background:var(--paper);border:2px solid var(--ink);margin-top:-6px;
  transition:border-color .2s,transform .2s}
input[type=range]:hover::-webkit-slider-thumb{border-color:var(--terra);transform:scale(1.12)}
input[type=range]::-moz-range-track{height:2px;background:var(--ink-soft)}
input[type=range]::-moz-range-thumb{width:12px;height:12px;border-radius:50%;background:var(--paper);
  border:2px solid var(--ink)}
input[type=range]:disabled{opacity:.35;cursor:default}
.hud-group.slider.off{opacity:.4}
.hud-group.slider.off .hud-label b{color:var(--ink-faint)}

.schemes{display:flex;flex-direction:column}
.schemes .hud-label{margin-bottom:.55rem}
.schemes button{display:flex;align-items:center;gap:.55rem;font-size:.72rem;font-weight:600;
  letter-spacing:.12em;text-transform:uppercase;padding:.42rem .7rem;color:var(--ink-soft);
  border:1px solid transparent;transition:.2s}
.schemes button:hover{color:var(--ink)}
.schemes button.on{color:var(--ink);border-color:var(--line-strong);background:var(--paper)}
.sw{width:16px;height:16px;border-radius:2px;border:1px solid rgba(38,36,31,.25);flex:none}
.sw-a{background:linear-gradient(135deg,#EFECE3 50%,#C8A87C 50%)}
.sw-b{background:linear-gradient(135deg,#BB7350 50%,#B58A5F 50%)}

@media(max-width:1060px){
  .hud{grid-template-columns:auto 1fr auto;grid-template-areas:"presets time schemes" "presets cut schemes";}
  .presets{grid-area:presets}.schemes{grid-area:schemes}
  #time-group{grid-area:time}#cut-group{grid-area:cut}
}
@media(max-width:760px){
  .hud{grid-template-columns:1fr 1fr;grid-template-areas:"presets presets" "time schemes" "cut cut";
    gap:.7rem 1.2rem;padding-bottom:max(.9rem,env(safe-area-inset-bottom))}
  .presets{grid-area:presets;flex-direction:row}
  .presets button{flex:1;border:1px solid var(--line);border-radius:0;text-align:center;padding:.65rem .3rem}
  .presets button+button{border-top-width:1px;border-left-width:0}
  .presets button:first-child{border-radius:6px 0 0 6px}
  .presets button:last-child{border-radius:0 6px 6px 0}
  .presets .hud-label{display:none}
  .schemes button{justify-content:center}
  .schemes .hud-label{display:none}
}

/* ---------- interior mode ---------- */
body.is-interior #labels,body.is-interior #caption,body.is-interior #scroll-hint{display:none}
body.is-interior #interior-bar{display:flex}
#interior-bar[hidden]{display:none}
body.is-interior #hud .presets button{opacity:.35;pointer-events:none}
body.is-interior #cut-group{opacity:.45;pointer-events:none}

/* ---------- fallback ---------- */
.webgl-fallback{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;
  background:var(--paper);text-align:center;padding:2rem;z-index:30}
.webgl-fallback[hidden]{display:none}
.webgl-fallback h2{font-size:1.4rem;margin-bottom:.8rem}
.webgl-fallback p{color:var(--ink-soft);max-width:28rem;line-height:1.6}

/* ============ content sections ============ */
main{position:relative;z-index:2;background:var(--paper)}
.sec{max-width:1180px;margin:0 auto;padding:clamp(4.5rem,10vw,9rem) clamp(1.2rem,4vw,3rem) 0}
.sec:last-child{padding-bottom:clamp(4rem,8vw,7rem)}
.sec-head{margin-bottom:clamp(2rem,4vw,3.2rem)}
.kicker{display:flex;align-items:center;gap:.9rem;font-size:.68rem;font-weight:700;
  letter-spacing:.26em;text-transform:uppercase;color:var(--terra);margin-bottom:1.1rem}
.kicker::after{content:"";flex:0 0 3.4rem;height:1px;background:var(--terra)}
.sec h2{font-size:clamp(1.9rem,4.4vw,3.4rem);font-weight:600;letter-spacing:-.02em;
  line-height:1.04;max-width:18ch}
.lede{max-width:56ch;color:var(--ink-soft);line-height:1.65;font-size:1.02rem}
.cols{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,6fr);gap:clamp(2rem,5vw,4.5rem);
  align-items:start}
.col-text p{line-height:1.7;color:var(--ink-soft);margin-bottom:1.3rem;max-width:52ch}
.col-text p b{color:var(--ink);font-weight:600}
.facts{list-style:none;margin-top:2rem;border-top:1px solid var(--line)}
.facts li{display:flex;justify-content:space-between;gap:1rem;padding:.55rem 0;
  border-bottom:1px solid var(--line);font-size:.8rem}
.facts i{font-style:normal;color:var(--ink-faint);letter-spacing:.14em;text-transform:uppercase;
  font-size:.66rem;padding-top:.1rem}
.facts b{font-weight:600;letter-spacing:.02em;font-variant-numeric:tabular-nums;text-align:right}
.col-fig{background:var(--paper);border:1px solid var(--line);padding:clamp(.8rem,2vw,1.4rem);
  box-shadow:var(--shadow-soft)}
.col-fig figcaption{margin-top:.9rem;font-size:.68rem;letter-spacing:.14em;text-transform:uppercase;
  color:var(--ink-faint)}
#sun-svg svg,#plan-svg svg{display:block;width:100%;height:auto}
@media(max-width:900px){.cols{grid-template-columns:1fr}}

/* ---------- scheme cards ---------- */
.scheme-cards{display:grid;grid-template-columns:1fr 1fr;gap:clamp(1.2rem,3vw,2.4rem)}
@media(max-width:800px){.scheme-cards{grid-template-columns:1fr}}
.scheme-card{border:1px solid var(--line);padding:clamp(1.4rem,3vw,2.2rem);display:flex;
  flex-direction:column;gap:1.1rem;background:var(--paper);transition:border-color .25s,box-shadow .25s}
.scheme-card.on{border-color:var(--ink);box-shadow:var(--shadow-soft)}
.scheme-card header{display:flex;flex-direction:column;gap:.5rem}
.scheme-tag{font-size:.64rem;font-weight:700;letter-spacing:.26em;text-transform:uppercase;
  color:var(--terra)}
.scheme-card h3{font-size:1.45rem;font-weight:600;letter-spacing:-.01em}
.swatches{display:grid;grid-template-columns:repeat(4,1fr);gap:.5rem}
.swatch{aspect-ratio:1.35;display:flex;align-items:flex-end;padding:.45rem .5rem;
  background:var(--c);border:1px solid rgba(38,36,31,.18)}
.swatch i{font-style:normal;font-size:.56rem;letter-spacing:.1em;text-transform:uppercase;
  color:rgba(255,255,255,.95);text-shadow:0 1px 2px rgba(0,0,0,.25)}
.scheme-card p{color:var(--ink-soft);line-height:1.6;font-size:.9rem;flex:1}
.btn{align-self:flex-start;font-size:.72rem;font-weight:600;letter-spacing:.18em;
  text-transform:uppercase;padding:.75rem 1.3rem;border:1px solid var(--ink);transition:.2s}
.btn:hover{background:var(--ink);color:var(--paper)}
.btn-primary{border-color:var(--terra);background:var(--terra);color:#fff}
.btn-primary:hover{background:#ad5330;border-color:#ad5330}
.btn-primary:disabled{opacity:.5;cursor:wait}

/* ---------- spec tables ---------- */
.spec-grid{display:grid;grid-template-columns:1fr 1fr;gap:clamp(1.2rem,3vw,2.4rem)}
@media(max-width:900px){.spec-grid{grid-template-columns:1fr}}
.spec{width:100%;border-collapse:collapse;font-size:.86rem}
.spec caption{caption-side:top;text-align:left;font-size:.64rem;font-weight:700;
  letter-spacing:.26em;text-transform:uppercase;color:var(--terra);padding-bottom:.9rem}
.spec th,.spec td{text-align:left;padding:.62rem .2rem;border-bottom:1px solid var(--line);
  vertical-align:top}
.spec th{font-weight:400;color:var(--ink-faint);font-size:.66rem;letter-spacing:.16em;
  text-transform:uppercase;width:38%;padding-top:.72rem}
.spec td{font-weight:500;font-variant-numeric:tabular-nums}
.spec.rooms th[scope=row]{text-transform:none;font-size:.86rem;letter-spacing:.02em;
  color:var(--ink);font-weight:500;width:auto}
.spec .num{text-align:right;font-variant-numeric:tabular-nums}
.spec tfoot td,.spec tfoot th{border-bottom:2px solid var(--ink);font-weight:600}

/* ---------- sheet cta ---------- */
.sheet-cta{border:1px solid var(--line);padding:clamp(1.6rem,4vw,3rem);display:flex;
  flex-direction:column;gap:1.6rem;align-items:flex-start;background:var(--paper);
  box-shadow:var(--shadow-soft)}
.sheet-cta p{max-width:52ch;color:var(--ink-soft);line-height:1.65}
.sheet-note{font-size:.66rem;letter-spacing:.16em;text-transform:uppercase;color:var(--ink-faint)}

/* ---------- footer ---------- */
.site-foot{background:var(--charcoal);color:#EDEAE2;margin-top:clamp(4rem,9vw,8rem);
  padding:clamp(3rem,7vw,5.5rem) clamp(1.2rem,4vw,3rem)}
.foot-mark{font-size:clamp(1.6rem,4.5vw,3rem);font-weight:700;letter-spacing:.08em;margin-bottom:1.6rem}
.foot-mark::after{content:"";display:block;width:3.2rem;height:2px;background:var(--terra);margin-top:1rem}
.foot-note{max-width:62ch;line-height:1.7;color:#B9B4A8;font-size:.86rem}
.foot-tiny{margin-top:1.6rem;font-size:.62rem;letter-spacing:.2em;text-transform:uppercase;color:#7B766B}