/* Comfortable reading sizes, with the existing SUNdearA visual identity. */
:root {
  --body-size: clamp(1.25rem, 1.1rem + .25vw, 1.375rem);
  --reading-small: 1.125rem;
  --muted: #454f47;
}
body {font-size:var(--body-size);line-height:1.65}
.builder-story>.builder-story-copy>p:not(.eyebrow) {max-width:60ch;line-height:1.65}
.builder-story-copy {gap:1.5em}
.daylight-overview .daylight-intro>p,
.daylight-shade-note,
.water-planning,
.water-ideas dd,
.day-end-copy>p:not(.eyebrow) {font-size:var(--body-size);line-height:1.65}
.daylight-phase>p:not(.phase-label):not(.phase-detail) {font-size:var(--body-size);line-height:1.65}
.daylight-shade-note strong {color:#62402c}
.water-ideas dt,.audio-living strong {font-size:1.375rem;line-height:1.4}
.direction-list p {color:#454f47}
.eyebrow,.eyebrow.section-kicker,
.day-end .eyebrow,
.daylight-phase .phase-label,.daylight-phase .phase-detail,
.direction-list .tag,.direction-image figcaption,
.small-note,.feather-card .project-label,.feather-copy .location,
.conservation-note,.conservation-links a,
.water-image figcaption,.audio-image figcaption,
#framing-gallery figcaption,.project-viewer-header p,
footer p,footer>a:last-child,footer .footer-origin {
  font-size:var(--reading-small);
  line-height:1.6;
}
.eyebrow,.phase-label,.direction-list .tag,.project-label,.location {letter-spacing:.04em}
.small-note {color:#454f47;max-width:75ch}
.conservation-note {color:#edf0e8}
.water-planning {color:#edf0e8}
.conservation-grid {grid-template-columns:repeat(2,minmax(0,1fr));gap:28px}
.conservation-topic h3 {min-height:0;font-size:clamp(1.75rem,2vw,2rem)}
.conservation-topic>p {max-width:55ch}
.conservation-links {min-height:0;gap:12px}
.conservation-links a {min-height:48px}
.water-image figcaption,.audio-image figcaption {
  color:#fff8ee;
  background:linear-gradient(transparent,#172219e8);
}
.daybreak-bottom,.daybreak-bottom a,
.daybreak .scene-caption,.day-end .scene-caption {
  font-size:var(--reading-small);
  line-height:1.5;
}
.daybreak .scene-caption,.day-end .scene-caption {
  color:#fff8ee;
  background:#1f2925d9;
  padding:4px 10px;
  border-radius:3px;
}
.daybreak {padding-bottom:170px}
.daybreak-bottom {bottom:72px;letter-spacing:.025em;align-items:center}
.daybreak-copy>p:not(.eyebrow) {font-size:clamp(1.375rem,1.7vw,1.5rem)}
.journey-button,.daybreak .journey-button,.day-end .journey-button {
  font-size:1.25rem;line-height:1.4;min-height:64px;max-width:100%;
}
.feather-grid .feather-copy>a,.feather-grid .feather-copy>.gallery-open,
.project-gallery-toggle:not([hidden]),.gallery-close {
  font-size:var(--reading-small);line-height:1.5;min-height:48px;
}
header nav.primary-nav,header .living-links a,
header.navigation-ready .menu-toggle,header>.header-contact {font-size:1.125rem}
header>.header-contact,header.navigation-ready .menu-toggle {min-height:48px}
header .brand>span:last-child,footer .brand>span:last-child {font-size:1.125rem;letter-spacing:.04em;line-height:1.5}
 .daylight-link,.audio-partner,.project-archive-heading .eyebrow {font-size:1.125rem;line-height:1.6}
header .living-links {min-width:290px}
.contact-page .inquiry-form label {font-size:1.25rem;line-height:1.5}
.contact-page .inquiry-form label small,.contact-page .form-note,
.contact-page .inquiry-optional summary,.contact-back a {
  font-size:var(--reading-small);line-height:1.6;
}
.contact-page .inquiry-form label small {color:#e4eade;white-space:normal}
.contact-page .inquiry-form input:not([type=hidden]),
.contact-page .inquiry-form select,
.contact-page .inquiry-form textarea {
  font-size:1.25rem;line-height:1.5;min-height:60px;
}
.contact-page .inquiry-form input:not([type=hidden]),.contact-page .inquiry-form select {height:60px}
.contact-page .inquiry-form input::placeholder,.contact-page .inquiry-form textarea::placeholder {
  font-size:1.125rem;color:#4d594c;
}
.contact-page .form-note {color:#e4eade}
.contact-page .inquiry-submit {font-size:1.25rem;line-height:1.5;height:auto;min-height:60px;padding:14px 24px}
.direct-contact a {font-size:1.25rem;min-height:48px}
@media(max-width:1200px) {
  header .living-links {min-width:0}
}
@media(max-width:720px) {
  header {grid-template-columns:minmax(0,1fr) auto;gap:12px 16px;padding:18px 6%}
  header .brand {grid-column:1;grid-row:1}
  header .brand-logo {width:240px;max-width:100%;height:auto;aspect-ratio:60/13}
  header .brand>span:last-child {font-size:1.125rem;letter-spacing:.04em}
  header.navigation-ready .menu-toggle {grid-column:2;grid-row:1;justify-self:end;padding:10px 0}
  header>.header-contact {grid-column:2;grid-row:2;padding:10px 16px}
  header nav.primary-nav {grid-column:1/-1;grid-row:2;font-size:1.125rem}
  .daybreak {min-height:760px;padding-bottom:205px}
  .daybreak h1 {font-size:clamp(2.25rem,10vw,3.125rem)}
  .daybreak-bottom {align-items:flex-start;bottom:82px;gap:12px}
  .daybreak .scene-caption,.day-end .scene-caption {max-width:88%;font-size:1.125rem}
  .daybreak .journey-button,.day-end .journey-button {font-size:1.125rem;gap:16px;padding-left:18px}
  .feather-grid .feather-copy .location {min-height:0}
  .feather-card .project-label {flex-wrap:wrap}
  .conservation-grid {grid-template-columns:minmax(0,1fr)}
  footer {align-items:flex-start}
  footer .brand>span:last-child {white-space:normal}
}
@media(orientation:landscape) and (max-height:600px) and (max-width:1200px) {
  .daybreak {min-height:0;padding-bottom:190px}
  .daybreak-copy>p:not(.eyebrow) {font-size:1.25rem;line-height:1.65}
}

/* Precise pendant occlusion: keep the cord silhouette narrow so fabric reaches its edges. */
.shade-reveal{mask-image:url("/assets/shade-window-mask-2edcddabcd25.svg");-webkit-mask-image:url("/assets/shade-window-mask-2edcddabcd25.svg")}
.shade-room-lighting{mask-image:url("/assets/shade-room-mask-148a445404f3.svg");-webkit-mask-image:url("/assets/shade-room-mask-148a445404f3.svg")}

/* Keep the new progress photos prominent without lengthening the initial gallery. */
.project-gallery-toggle:not([hidden]){display:inline-flex;align-items:center;justify-content:center;min-height:48px;padding:12px 22px;margin:0 0 24px;border:1px solid #f4c6a2;background:transparent;color:#f4c6a2;font:600 1.125rem/1.5 'DM Sans',sans-serif;cursor:pointer}
.project-gallery-toggle:hover{background:#f4c6a217}
.project-gallery-toggle:focus-visible{outline:3px solid #f4c6a2;outline-offset:5px}
.gallery-collapsed #more-project-photos{display:none}

/* Header navigation now consists of the brand and menu only. */
header{grid-template-columns:minmax(0,1fr) auto}

/* Bridge the small space above the desktop hover submenu. */
@media(min-width:1201px){
  header .living-links::before{content:"";position:absolute;left:0;right:0;top:-10px;height:10px}
}

/* A quieter surface keeps the warm material palette behind comfortable reading. */
header,.contact-page header {
  background-image:linear-gradient(#f3f2ecb8,#f3f2ecb8),url("/assets/cache/concrete-texture-1000-7c12d243aa05.webp");
}
.builder-story {
  background-image:linear-gradient(#f3f2ecd6,#f3f2ecd6),url("/assets/cache/concrete-texture-1000-7c12d243aa05.webp");
}
.daylight-section,.directions {
  background-image:linear-gradient(115deg,#f4eaddd9,#f4f1e5e0 55%,#eee8eed9),url("/assets/cache/concrete-texture-1000-7c12d243aa05.webp");
}
.projects {
  background-image:linear-gradient(#e9ece5d9,#e9ece5d9),url("/assets/cache/concrete-texture-1000-7c12d243aa05.webp");
}
.journey-button .conversation-icon {width:22px;height:22px}

/* Give partner logos and their descriptive links a consistent, readable rhythm. */
.daylight-shade-note .lutron-shade-link {
  display:flex;flex-direction:column;align-items:flex-start;gap:10px;
  width:fit-content;margin-top:18px;padding:4px 0;
  font-size:var(--reading-small);line-height:1.6;text-decoration:none;
}
.lutron-shade-link img {width:118px;height:auto}
.lutron-shade-link>span {text-decoration:underline;text-underline-offset:4px}
.audio-partner {display:flex;flex-direction:column;align-items:flex-start;gap:10px}
.audio-system-credit .audio-partner-logo {padding:4px 0}

/* Make reaching Brian the simplest next step. */
.contact-page .inquiry-story .direct-contact {gap:8px}
.contact-page .inquiry-story .contact-call {
  display:flex;flex-wrap:wrap;gap:4px 12px;align-items:center;
  width:fit-content;max-width:100%;padding:10px 0;font-weight:600;
  text-decoration:underline;text-underline-offset:5px;
}
.contact-call>span {white-space:nowrap}
.contact-page .direct-contact a {overflow-wrap:anywhere}
@media(max-width:850px) {
  .contact-page .inquiry-intro>.inquiry-story {
    min-height:0;padding:24px;background-image:none;background-color:transparent;
    border-left:2px solid #dfb38c;
  }
  .contact-page .inquiry-story .eyebrow {margin-bottom:14px}
  .contact-page .inquiry-story>p:not(.eyebrow) {margin:18px 0;max-width:42ch}
  .contact-page .inquiry-story .direct-contact {margin-top:18px}
  .contact-page .inquiry-intro {gap:28px}
}
@media(max-width:550px) {
  .contact-page .inquiry-intro>.inquiry-story {padding:6px 0 6px 18px}
}

/* Match the sun's occlusion to the contemporary home's lower, stepped roof. */
.sunrise-sky-mask {clip-path:polygon(0 0,100% 0,100% 28%,97% 29%,94% 27%,91% 29%,88% 29%,86% 26.8%,83% 27%,80% 27.9%,78% 28%,76.4% 27.9%,68% 28.5%,66.4% 28.6%,66.2% 27.8%,65.6% 27.7%,65.4% 28.6%,63% 28.9%,61.5% 28.9%,60% 29.2%,57% 27%,54% 25.3%,51% 27%,48% 27%,44% 23%,41% 22%,37% 24%,33% 26%,29% 24%,26% 21%,22% 22%,18% 24%,14% 27%,0 36%)}
/* Preserve a complete sunrise, without movement, for reduced-motion visitors. */
@media(prefers-reduced-motion:reduce) {
  .daybreak.sunrise-ready .sunrise-world {display:block;transition:none}
  .daybreak.sunrise-ready .sunrise-poster {opacity:0;transition:none}
  .daybreak .sunrise-path {transform:translateY(17%)}
  .daybreak .sunrise-landscape,.daybreak .sunrise-poster img {filter:brightness(1.12) saturate(1.15) contrast(1.06)}
  .daybreak .sunrise-warmth {opacity:.44}
  .daybreak .sunrise-world::after {animation:none!important;opacity:0}
}

/* Let both scene captions sit directly over their home images. */
.daybreak .scene-caption,.day-end .scene-caption {background:none;padding:0;border-radius:0}

/* Give the concise biography more presence beside the photograph on desktop. */
@media(min-width:981px) {
  .builder-story {column-gap:6%;align-items:center}
  .builder-story-copy {gap:clamp(1.5rem,2.2vw,2.5rem)}
  .builder-story>.builder-story-copy>p:not(.eyebrow) {
    font-size:clamp(1.5rem,1.1rem + .6vw,1.875rem);
    line-height:1.6;max-width:48ch;
  }
  .builder-story>.builder-story-copy>p:first-child {
    font-size:clamp(1.75rem,1.25rem + .85vw,2.25rem);
    line-height:1.5;font-weight:500;color:var(--ink);
  }
}

/* Carry the spacious desktop reading hierarchy through every section. */
@media(min-width:981px) {
  :root {
    --body-size:clamp(1.5rem,1.1rem + .6vw,1.875rem);
    --desktop-lead:clamp(1.75rem,1.25rem + .85vw,2.25rem);
    --desktop-card-copy:clamp(1.375rem,1rem + .5vw,1.5625rem);
    --reading-small:clamp(1.125rem,.95rem + .3vw,1.25rem);
  }
  .daybreak-copy>p:not(.eyebrow),
  .day-end-copy>p:not(.eyebrow),
  .daylight-overview .daylight-intro>p,
  .water-copy .water-lead,
  .conservation-heading>p,
  .directions .section-heading>.design-intro,
  .projects .section-heading>p,
  .project-archive-heading>p {
    font-size:var(--desktop-lead);line-height:1.5;max-width:44ch;
  }
  .daylight-shade-note,.daylight-bottom>p,
  .audio-living,.conservation-topic>p,
  .feather-grid .feather-copy>p:not(.location) {
    font-size:var(--body-size);line-height:1.6;
  }
  .daylight-phase>p:not(.phase-label):not(.phase-detail),
  .direction-list p,.water-ideas dd {
    font-size:var(--desktop-card-copy);line-height:1.6;max-width:48ch;
  }
  .water-ideas dt,.audio-living strong {font-size:var(--body-size)}
  .water-planning {font-size:var(--desktop-card-copy);line-height:1.6}
  .daylight-link,.audio-partner {font-size:var(--reading-small)}
  .daylight-phase .phase-label {font-size:var(--reading-small);letter-spacing:.04em}
  .water-copy .eyebrow,.daylight-overview .eyebrow {font-size:var(--reading-small);letter-spacing:.04em}
  .daylight-feature,.conservation-heading,.directions .section-heading {column-gap:6%}
  .conservation-heading {align-items:center}
  .projects .section-heading,.project-archive-heading {
    display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:6%;align-items:center;
  }
  .projects .section-heading>p,.project-archive-heading>p {margin:0}
  .daylight-bottom {align-items:center;gap:40px}
  .daylight-bottom>p {max-width:48ch}
  .daylight-phase {padding:32px clamp(22px,2vw,36px)}
  .conservation-topic {padding:30px}
  .conservation-grid {gap:28px}
  .feather-grid {gap:32px}
  .feather-grid .feather-copy .location {min-height:0;line-height:1.5}
  .feather-grid .feather-card .feather-copy {padding-right:32px;padding-left:32px;padding-bottom:32px}
  .journey-button,.daybreak .journey-button,.day-end .journey-button {
    font-size:1.375rem;min-height:68px;
  }
  .project-gallery-toggle:not([hidden]) {font-size:var(--reading-small)}
  .project-archive .project-photo-grid .portfolio-photo-label {font-size:var(--reading-small)}
  .contact-page .inquiry-story>p:not(.eyebrow) {font-size:var(--body-size);line-height:1.6}
  .contact-page .form-guide {font-size:var(--body-size);line-height:1.5}
  .contact-page .inquiry-form label {font-size:clamp(1.375rem,1.1rem + .3vw,1.5rem)}
  .contact-page .inquiry-form input:not([type=hidden]),
  .contact-page .inquiry-form textarea,.contact-page .inquiry-form select,
  .contact-page .inquiry-submit,.contact-page .direct-contact a {font-size:1.375rem}
  .contact-page .inquiry-form input::placeholder,.contact-page .inquiry-form textarea::placeholder {font-size:var(--reading-small)}
  .contact-page .inquiry-form label small,.contact-page .inquiry-optional summary {font-size:var(--reading-small)}
  footer {gap:32px}
}
/* Give the sound copy and its image comparable room on larger screens. */
@media(min-width:1051px) {
  .audio-section {grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:6%}
  .audio-copy .water-lead {max-width:42ch}
}

/* Keep the final desktop menu dropdown inside the page. */
@media(min-width:1201px) {
  header .nav-living:last-child .living-links {left:auto;right:0}
}

/* Clear project photographs preserve detail without fading into the copy. */
.feather-grid .feather-card .feather-photo {
  position:static;display:block;flex:none;width:100%;height:auto;aspect-ratio:3/2;
  object-fit:cover;object-position:center;filter:none;mask-image:none;-webkit-mask-image:none;z-index:auto;
}
.feather-grid .feather-card .feather-photo.montebello-photo {aspect-ratio:1280/853;object-fit:contain}
.feather-grid .feather-card .feather-copy {padding-top:28px}

/* A rainwater planning tool in the conservation section's existing palette. */
.rain-calculator {
  display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);
  margin-top:40px;background:#f3f2ec;color:#202624;scroll-margin-top:140px;
}
.rain-calculator-image{position:relative;margin:0;min-width:0;overflow:hidden}
.rain-calculator-image img{display:block;width:100%;height:100%;object-fit:cover;object-position:58% center}
.rain-calculator-image figcaption{position:absolute;left:0;right:0;bottom:0;padding:60px 28px 28px;color:#fff8ee;font-size:1.25rem;line-height:1.4;background:linear-gradient(transparent,rgba(24,35,27,.9))}
.rain-calculator-body{min-width:0;padding:clamp(28px,3.3vw,56px)}
.rain-calculator .eyebrow{color:#435246;font-size:1.125rem;letter-spacing:.12em;margin:0 0 16px}
.rain-calculator :is(h1,h3){margin:0 0 20px;font-family:Manrope,sans-serif;font-size:clamp(2.25rem,3.2vw,3.5rem);line-height:1.12;letter-spacing:-.045em;font-weight:500}
.rain-intro{font-size:1.25rem;line-height:1.55;margin:0 0 28px;color:#454f47;max-width:43ch}
.rain-fields{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:22px}
.rain-field{min-width:0}
.rain-calculator label{display:block;font-size:1.25rem;font-weight:600;line-height:1.4;margin-bottom:10px}
.rain-calculator label span{font-weight:400;white-space:nowrap}
.rain-calculator input,.rain-calculator select{box-sizing:border-box;display:block;width:100%;min-height:62px;margin:0;padding:12px 16px;border:1px solid #667063;border-radius:0;background:#fffefa;color:#202624;font:inherit;font-size:1.5rem;line-height:1.4}
.rain-calculator select{font-size:1.125rem;max-width:100%;padding-right:30px}
.rain-calculator :is(input,select,summary,button,a):focus-visible{outline:3px solid #654b82;outline-offset:4px}
.rain-field-help,.rain-error{font-size:1.125rem;line-height:1.5;margin:10px 0 0;color:#454f47}
.rain-calculator .rain-error{color:#952a1c}
.rain-calculator input[aria-invalid="true"]{border:2px solid #952a1c}
.rain-reset{appearance:none;border:0;background:transparent;color:#344b3e;padding:12px 0;min-height:48px;font:inherit;font-size:1.125rem;text-decoration:underline;text-underline-offset:4px;cursor:pointer}
.rain-result-panel{margin-top:24px;padding:16px 0 24px;border-top:1px solid #b4bdb1;border-bottom:1px solid #b4bdb1}
.rain-result-heading{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:center;gap:0 16px;margin-bottom:8px}
.rain-result-label{font-size:1.125rem;line-height:1.4;margin:0;color:#435246}
.rain-result-value{font-family:Manrope,sans-serif;font-size:clamp(3rem,5vw,5.5rem);font-weight:500;letter-spacing:-.04em;line-height:1.12;margin:0 0 12px;color:#314e3b;overflow-wrap:anywhere;font-variant-numeric:tabular-nums}
.rain-gallons{font-family:"DM Sans",sans-serif;font-size:1.5rem;letter-spacing:0;display:inline-block}
.rain-assumption{font-size:1.125rem;line-height:1.5;color:#454f47;margin:0;max-width:45ch}
.rain-method{margin-top:10px;min-width:0}
.rain-method summary{cursor:pointer;font-size:1.125rem;font-weight:600;line-height:1.5;min-height:54px;padding:14px 0}
.rain-method-body{font-size:1.125rem;line-height:1.6;overflow-wrap:anywhere}
.rain-method-body p{margin:0 0 20px}
.rain-method-body label{font-size:1.125rem}
.rain-method-body select{margin-bottom:12px}
.rain-method-body a{color:#314e3b;text-underline-offset:4px;text-decoration-thickness:1px}
.rain-formula{padding:18px;background:#e5e8df}
.rain-sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap;border:0}
.rain-calculator [hidden]{display:none!important}
@media(max-width:1100px) and (min-width:801px){
  .rain-calculator{grid-template-columns:minmax(0,.65fr) minmax(0,1.35fr)}
  .rain-calculator-body{padding:28px}
  .rain-fields{gap:16px}
}
@media(max-width:800px){
  .rain-calculator{grid-template-columns:minmax(0,1fr);margin-top:28px;scroll-margin-top:100px}
  .rain-calculator-body{grid-row:1;padding:28px 24px}
  .rain-calculator-image{grid-row:2;height:300px}
  .rain-calculator-image img{object-position:center 54%}
  .rain-calculator-image figcaption{padding:60px 24px 24px}
  .rain-calculator :is(h1,h3){font-size:clamp(2.125rem,6vw,3rem)}
  .rain-result-value{font-size:clamp(3rem,10vw,4.5rem)}
}
@media(max-width:460px){
  .rain-fields{grid-template-columns:minmax(0,1fr);gap:24px}
  .rain-calculator-body{padding:28px 20px}
  .rain-intro{font-size:1.25rem}
  .rain-calculator-image{height:260px}
  }

/* The rainwater calculator has its own page, linked from Conservation. */
.rainwater-main{padding:20px 7% 80px;background:#303e34}
.rainwater-wrap{max-width:1600px;margin:0 auto}
.rainwater-back{display:inline-flex;align-items:center;min-height:48px;font-size:1.125rem;line-height:1.5;color:#f4c6a2;text-decoration:underline;text-underline-offset:5px}
.rainwater-back:focus-visible{outline:3px solid #f4c6a2;outline-offset:4px}
.rainwater-page .rain-calculator{margin-top:20px}
@media(max-width:800px){.rainwater-main{padding:12px 6% 48px}.rainwater-page .rain-calculator{margin-top:12px}}

/* Transparent partner artwork does not depend on backdrop blending. */
.audio-system-credit .audio-partner-logo {background:none;box-shadow:none}
.audio-partner-logo img {
  width:166px;height:26px;object-fit:cover;object-position:center;
  mix-blend-mode:normal;filter:none;
}
.audio-system-credit .audio-partner-logo:hover img {filter:brightness(1.12)}

/* Keep picture sources from changing the existing logo stack geometry. */
.brand-logo-stack>picture {display:contents}
header .brand .brand-logo-stack {width:fit-content;max-width:100%}
/* Phones use a clean image asset, including the gold sun's alpha mask. */
@media(max-width:720px) {
  header .brand .brand-logo-stack {width:240px;max-width:100%}
  header .brand .brand-logo-stack,
  footer .brand .brand-logo-stack {filter:none}
  .brand .brand-logo-stack .brand-logo-sun {
    mask-image:url('/assets/optimized/sundeara-logo-mobile-clean.png');
    -webkit-mask-image:url('/assets/optimized/sundeara-logo-mobile-clean.png');
  }
}