/* Approved Approach / About palette and editorial rhythm. */
:root{--zen-ink:#f7f4ee;--zen-copper:#b88764;--zen-muted:#c5c9c0;--zen-charcoal:#20251f}
html{scroll-padding-top:28px}body{background:var(--zen-charcoal)}
:is(.cinematic-home,.cinematic-projects,.ac-page,.ar-page,.ci-page,.cj-page) h1,
:is(.cinematic-home,.cinematic-projects,.ac-page,.ar-page,.ci-page,.cj-page) h2{font-family:Georgia,serif;font-weight:400;letter-spacing:0;line-height:1.08}
:is(.cin-purpose-copy,.cin-about-copy,.cin-material-copy,.cin-closing-copy)>p{font:16px/1.75 Arial,sans-serif;color:var(--zen-muted)}
:is(.cinematic-home,.cinematic-projects) .cin-label{color:var(--zen-copper);letter-spacing:.2em;line-height:1.8}
.cinematic-home .cin-purpose.brand-world{background:radial-gradient(ellipse at 25% 25%,#30352a,#20251f 75%)}
.cinematic-home .cin-selected,.cinematic-projects .cin-project-group{background:linear-gradient(135deg,#272c24,#1d231e)}
.cinematic-home .cin-about{background:linear-gradient(135deg,#293026,#20251f)}
.cinematic-home .cin-materials{background:radial-gradient(ellipse at 20% 30%,#3a362b80,transparent 70%),#232920}
.cinematic-projects .cin-feature{background:#232820}
.cinematic-projects .cin-feature-copy{background:linear-gradient(135deg,#2c3227,#20251f)}
.cinematic-projects .cin-grid article{min-width:0}.cinematic-projects .cin-grid h3{line-height:1.2;letter-spacing:0}
.cj-page{--cj-copper:#b88764;background:#20251f}.cj-page .cj-body{background:radial-gradient(ellipse at 50% 35%,#30332b,#20251f 80%)}
:is(.cin-footer,.ac-footer,.ar-footer,.ci-footer,.cj-footer,.zen-unified-footer){background:#1b211c;border-color:#b8876440}
:is(.cin-footer,.ac-footer,.ar-footer,.ci-footer,.cj-footer,.zen-unified-footer) a:has(>img[alt="ZEN Development"])>img{width:180px;max-width:100%;height:auto}
:is(header.zen-site-header,header:has(>nav[aria-label="Primary navigation"])){color:var(--zen-ink);background:linear-gradient(180deg,#101b2166,transparent)}
:is(header.zen-site-header,header:has(>nav[aria-label="Primary navigation"])) a:hover{color:#cfa584}
:is(a,button,summary,input,textarea):focus-visible{outline:2px solid #c99c78;outline-offset:5px}
.ci-page input,.ci-page textarea{font-size:16px}
.ci-page .contact-form button{min-height:44px}
.zen-skip-link{position:fixed;top:12px;left:12px;z-index:1000;transform:translateY(-160%);padding:14px 20px;background:#f7f4ee;color:#20251f;font:14px Arial,sans-serif}.zen-skip-link:focus{transform:none}
@media(max-width:760px){
 :is(header.zen-site-header,header:has(>nav[aria-label="Primary navigation"]))>details>nav,
 :is(header.zen-site-header,header:has(>nav[aria-label="Primary navigation"]))>nav[aria-label="Mobile navigation"]{background:#202820f5!important;color:#f7f4ee!important;backdrop-filter:blur(16px);padding:20px 6vw!important;border-top:1px solid #b8876440;display:grid!important;gap:4px!important;min-width:260px;box-shadow:0 18px 40px #0004;z-index:30}
 :is(header.zen-site-header,header:has(>nav[aria-label="Primary navigation"]))>details:not([open])>nav{display:none!important}
 nav[aria-label="Mobile navigation"] a{min-height:44px;display:flex;align-items:center;font:11px/1.5 Arial,sans-serif;letter-spacing:.18em;text-transform:uppercase}
 .zen-mobile-menu summary{list-style:none}.zen-mobile-menu summary::-webkit-details-marker{display:none}
 :is(.cin-footer,.ac-footer,.ar-footer,.ci-footer,.cj-footer,.zen-unified-footer) nav{flex-wrap:wrap;gap:18px}
 .cinematic-home .cin-card-meta{gap:14px}.cinematic-home .cin-card-meta h3{font-size:26px;line-height:1.2}
 .cinematic-projects .cin-project-hero h1{font-size:clamp(38px,10vw,49px)}
 .cinematic-projects .cin-grid-small{grid-template-columns:repeat(2,minmax(0,1fr))}
 .cinematic-projects .cin-grid .cin-link{min-height:44px}
}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto!important}*,*:before,*:after{scroll-behavior:auto!important}.cin-about-photo{filter:none!important;clip-path:none!important}.cin-photo img{transform:none!important}}
/* The opening keeps the same ivory logo at every breakpoint. */
.dusk-opening-home header .logo-sketch{display:none!important;opacity:0!important}
.dusk-opening-home header .logo:not(.logo-sketch){opacity:1!important}
.ac-compare{display:none!important}
@media(max-width:760px){
 :is(header.zen-site-header,header:has(>nav[aria-label="Primary navigation"]))>details{position:static!important}
 :is(header.zen-site-header,header:has(>nav[aria-label="Primary navigation"]))>details>nav{position:absolute!important;top:96px!important;left:0!important;right:0!important;width:auto!important;transform:none!important}
 header nav[aria-label="Mobile navigation"] a{box-sizing:border-box!important;display:flex!important;align-items:center!important;min-height:44px!important;padding:8px 0!important;margin:0!important;border:0!important;font:11px/1.5 Arial,sans-serif!important;letter-spacing:.2em!important;color:#f7f4ee!important;text-transform:uppercase!important}
 header nav[aria-label="Mobile navigation"] a[aria-current="page"]{color:#caa17f!important}
}
@media(min-width:761px){
 .cj-hero:after{content:'';position:absolute;inset:0;z-index:1;pointer-events:none;background:linear-gradient(180deg,#101b214d,transparent 58%)}
 .cj-hero-title,.cj-hero-note{z-index:2;color:#f7f4ee!important}
}
header nav[aria-label="Primary navigation"] a[aria-current="page"]{color:#caa17f!important}

/* Whole-site review: readable tablet headings and shared footer controls. */
@media(min-width:761px) and (max-width:1100px){
 .ci-conversation-copy h2{font-size:clamp(26px,3.25vw,36px)}
 .cj-materials h2{font-size:clamp(24px,3.25vw,36px)}
}
:is(.cin-footer,.ac-footer,.ar-footer,.ci-footer,.cj-footer,.zen-unified-footer) nav{font:10px/1.5 Arial,sans-serif;letter-spacing:.2em;text-transform:uppercase}
:is(.cin-footer,.ac-footer,.ar-footer,.ci-footer,.cj-footer,.zen-unified-footer) nav a{display:inline-flex;align-items:center;min-height:44px}

.pj-switcher details nav a{box-sizing:border-box;min-height:44px;align-items:center}

/* Shared navigation: copper rollover with a left-to-right pencil-thin rule. */
:is(header.zen-site-header,header:has(>nav[aria-label="Primary navigation"])) nav a,
:is(.cin-footer,.ac-footer,.ar-footer,.ci-footer,.cj-footer,.zen-unified-footer) nav a{position:relative!important;text-decoration:none!important;transition:color .25s ease!important}
:is(header.zen-site-header,header:has(>nav[aria-label="Primary navigation"])) nav a:after,
:is(.cin-footer,.ac-footer,.ar-footer,.ci-footer,.cj-footer,.zen-unified-footer) nav a:after{content:''!important;position:absolute!important;left:0!important;right:0!important;bottom:0!important;height:1px!important;background:var(--zen-copper)!important;opacity:1!important;transform:scaleX(0)!important;transform-origin:left center!important;transition:transform .3s ease!important;pointer-events:none}
:is(header.zen-site-header,header:has(>nav[aria-label="Primary navigation"])) nav a:is(:hover,:focus-visible),
:is(.cin-footer,.ac-footer,.ar-footer,.ci-footer,.cj-footer,.zen-unified-footer) nav a:is(:hover,:focus-visible){color:var(--zen-copper)!important}
:is(header.zen-site-header,header:has(>nav[aria-label="Primary navigation"])) nav a:is(:hover,:focus-visible):after,
:is(.cin-footer,.ac-footer,.ar-footer,.ci-footer,.cj-footer,.zen-unified-footer) nav a:is(:hover,:focus-visible):after{transform:scaleX(1)!important}
/* Active-page styles must not change the footer link's baseline or hit area. */
.cinematic-projects .cin-footer nav a[href="/projects"],
.cj-page .cj-footer nav a[href="/projects"],
.ac-page .ac-footer nav a[href="/approach"],
.ar-page .ar-footer nav a[href="/about"],
.ci-page .ci-footer nav a[href="/contact"],
:is(.cin-footer,.ac-footer,.ar-footer,.ci-footer,.cj-footer,.zen-unified-footer) nav a[aria-current="page"]{color:var(--zen-copper)!important}
:is(.cin-footer,.ac-footer,.ar-footer,.ci-footer,.cj-footer,.zen-unified-footer) nav{align-items:center!important}
:is(.cin-footer,.ac-footer,.ar-footer,.ci-footer,.cj-footer,.zen-unified-footer) nav a{box-sizing:border-box!important;display:inline-flex!important;align-items:center!important;height:44px!important;min-height:44px!important;padding:0!important;margin:0!important;border:0!important;line-height:1.5!important;transform:none!important;vertical-align:middle!important}
@media(prefers-reduced-motion:reduce){
 :is(header.zen-site-header,header:has(>nav[aria-label="Primary navigation"])) nav a,
 :is(.cin-footer,.ac-footer,.ar-footer,.ci-footer,.cj-footer,.zen-unified-footer) nav a,
 :is(header.zen-site-header,header:has(>nav[aria-label="Primary navigation"])) nav a:after,
 :is(.cin-footer,.ac-footer,.ar-footer,.ci-footer,.cj-footer,.zen-unified-footer) nav a:after{transition:none!important}
}

/* Every approved page ends with the same shared footer. */
:is(.cin-footer,.ac-footer,.ar-footer,.ci-footer,.cj-footer){display:none!important}
.zen-unified-footer{box-sizing:border-box;width:100%;position:relative;background:#1b211c;color:var(--zen-ink);padding:0 clamp(24px,5vw,96px);border-top:1px solid #b8876440;font-family:Arial,sans-serif}
.zen-footer-main{display:flex;justify-content:space-between;align-items:center;gap:32px;min-height:148px;padding:32px 0;box-sizing:border-box}
.zen-footer-logo{display:block;flex:none;line-height:0}.zen-footer-logo img{display:block;width:180px;height:auto}
.zen-unified-footer nav{display:flex;align-items:center;gap:28px;margin:0;padding:0}
.zen-unified-footer nav a{color:var(--zen-ink);font:10px/1.5 Arial,sans-serif;letter-spacing:.2em;text-transform:uppercase}
.zen-footer-bottom{display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:24px;border-top:1px solid #b8876426;min-height:68px;padding:20px 0;box-sizing:border-box;font:8px/1.8 Arial,sans-serif;letter-spacing:.18em;text-transform:uppercase;color:#c5c9c0}
.zen-footer-bottom small{font:inherit}.zen-footer-bottom>span:last-child{text-align:right}
@media(max-width:760px){.zen-footer-main{align-items:flex-start;flex-direction:column;gap:20px;padding:32px 0}.zen-unified-footer nav{gap:12px 24px;flex-wrap:wrap}.zen-footer-bottom{grid-template-columns:1fr;gap:8px;padding:22px 0}.zen-footer-bottom>span:last-child{text-align:left}}

/* Quiet contrast support for navigation over bright skies and busy foliage. */
:is(header.zen-site-header,header:has(>nav[aria-label="Primary navigation"])){background:linear-gradient(180deg,rgba(16,22,20,.72) 0%,rgba(16,22,20,.42) 56%,rgba(16,22,20,0) 100%)!important}
header nav[aria-label="Primary navigation"] a{ text-shadow:0 1px 7px rgba(0,0,0,.35) }
header nav[aria-label="Primary navigation"] a:is([aria-current="page"],:hover,:focus-visible){color:#d4a17a!important}
header nav[aria-label="Primary navigation"] a:after{background:#d4a17a!important}

/* Blind emboss below the signatures, aligned to the paper rather than the viewport. */
figure.cin-note{margin:0;line-height:0}
figure.cin-note>.zen-note-paper{display:block;width:100%;height:auto;max-width:100%;object-fit:contain}
:is(.zen-signed-note,.ar-card)::after{content:"";position:absolute;z-index:2;left:8.3%;bottom:1.8%;width:13%;aspect-ratio:3;display:block;background:url("/images/zen-embossed-stamp.svg") center/contain no-repeat;pointer-events:none;opacity:.95}

figure.cin-note{width:clamp(200px,26vw,390px)}
.ar-card{width:29%}
@media(max-width:760px){figure.cin-note{width:230px;max-width:49%}.ar-card{width:48%}}

/* Extra paper beneath the embossed mark; retain the original paper texture. */
figure.cin-note{--note-width:clamp(200px,26vw,390px);width:var(--note-width);padding-bottom:calc(var(--note-width)*.09);background:#eee8d8 url("/images/home-handwriting/home-possibility-card-v1-1536.webp") center/100% 100% no-repeat}
.ar-card{padding-bottom:2.61vw;background:#eee8d8 url("/media/optimized/card-69204673-1536.webp") center/100% 100% no-repeat}
:is(.zen-signed-note,.ar-card)::after{bottom:7.5%;width:13%}
@media(max-width:760px){figure.cin-note{--note-width:min(230px,49vw)}.ar-card{padding-bottom:4.32vw}}

/* Architectural serif shared by every page heading. */
@font-face{font-family:"ZEN Architectural";src:url("/fonts/zen-marcellus.ttf") format("truetype");font-weight:400;font-style:normal;font-display:swap}
body :is(h1,h2,h3,h4,h5,h6){font-family:"ZEN Architectural",serif!important;font-weight:400!important;letter-spacing:0.005em}
/* Keep the homepage headline clear of the chimney at the lower position. */
body.dusk-opening-home .hero-frame #build-opening{top:calc(clamp(120px,11svh,160px) + 22px)}
body.dusk-opening-home.immersive-direction .build-hero #build-opening h1{font-size:clamp(40px,4vw,74px)}
@media(max-width:560px){body.dusk-opening-home .hero-frame #build-opening{top:128px}body.dusk-opening-home.immersive-direction .build-hero #build-opening h1{font-size:34px}}

/* Shared interaction language: copper feedback without disturbing parallax. */
body :is(a,button,summary){transition:color .25s ease,background-color .25s ease,border-color .25s ease,box-shadow .25s ease;cursor:pointer}
body a:is(:hover,:focus-visible){color:#d4a17a!important}
body :is(a.cin-link,a.ac-link,a.ar-link,a.cj-link,a.ci-email,a.pj-collection){background-image:linear-gradient(#d4a17a,#d4a17a);background-position:left bottom;background-repeat:no-repeat;background-size:0 1px;transition:color .25s ease,background-size .3s ease}
body :is(a.cin-link,a.ac-link,a.ar-link,a.cj-link,a.ci-email,a.pj-collection):is(:hover,:focus-visible){background-size:100% 1px}
body .cin-home-card h3{transition:color .25s ease}
body .cin-home-card:is(:hover,:focus-visible) h3{color:#d4a17a}
/* Photo brightening accompanies copper text, without a card outline. */
body a:has(img):not(:is(header a,.zen-unified-footer a)) img{transition:filter .35s ease}
body a:has(img):not(:is(header a,.zen-unified-footer a)):is(:hover,:focus-visible) img{filter:brightness(1.08)}
body :is(button,summary,a.button):not(:disabled):is(:hover,:focus-visible){color:#e1b18c!important;background-color:#b8876426;border-color:#d4a17a}
body :is(input,textarea,select):not([type="hidden"]){transition:border-color .25s ease,background-color .25s ease}
body :is(input,textarea,select):not([type="hidden"]):is(:hover,:focus){border-color:#b88764}
body a:active,body :is(button,summary):not(:disabled):active{color:#edc5a4!important}
@media(prefers-reduced-motion:reduce){body :is(a,button,summary,input,textarea,select),body a img,body .cin-home-card :is(h3,.cin-photo){transition:none!important}}
body a:focus-visible{outline:2px solid #c99c78;outline-offset:5px}
body a:has(img):not(:is(header a,.zen-unified-footer a)):focus-visible{outline:none!important}
body button:disabled{cursor:default}
body :is(.cin-feature,.cin-grid article):has(a:is(:hover,:focus-visible)) :is(h2,h3){color:#d4a17a;transition:color .25s ease}
