/* Interior spacing and color follow the approved homepage's mint, ink and lilac. */
.interior{--section-space:clamp(40px,5vw,76px)}
.interior-hero{padding-bottom:var(--section-space)}
.interior h2{font-size:clamp(29px,2.8vw,40px);line-height:1.2}
.section-layout{gap:clamp(28px,4.5vw,64px)}
.text-only .section-copy{grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);gap:clamp(28px,4.5vw,64px);align-items:start}
.copy-body>p{margin-top:20px}
.interior-samples figure{max-width:160px}
.interior-samples span{padding-top:14px}
.process-section .section-layout{grid-template-columns:minmax(0,1.2fr) minmax(0,.8fr);align-items:center}
.process-section .interior-photo{width:100%;max-width:420px;justify-self:end}
.process-section .interior-photo img{height:auto;max-height:none;aspect-ratio:auto;border-radius:32px}

/* Ink bands identify a substantial offer, story or event-planning section. */
.tone-ink{background:var(--ink);color:var(--mint)}
.tone-ink h2{color:var(--lilac)}
.tone-ink .content-placeholder{background:var(--mint);color:var(--ink);border-color:var(--mint)}
.tone-ink .section-aside,.tone-ink .section-details details{border-color:#b4f3e266}
.tone-ink a:is(:hover,:focus-visible){color:var(--lilac)}
.tone-ink a:focus-visible{outline-color:var(--lilac)}
.tone-ink+.tone-ink{padding-top:0}
.copy-section:not(.tone-ink)+.tone-ink,.tone-ink+.copy-section:not(.tone-ink){padding-top:var(--section-space)}

/* A personal story keeps its heading and paragraphs together. */
.about-page{background:var(--ink)}
.about-page .interior-hero{background:var(--mint);padding-bottom:clamp(40px,5vw,72px)}
.about-page .text-only{padding-block:clamp(40px,4.5vw,64px)}
.about-page .text-only+.text-only{padding-top:0}
.about-page .text-only .section-copy{display:block;max-width:680px;margin-inline:auto}
.about-page .text-only h2{font-size:clamp(29px,2.6vw,38px);text-wrap:pretty}
.about-page .text-only .copy-body>p{max-width:none}
.about-page .text-only .copy-body>p:first-child{margin-top:22px}
.about-page .process-section .interior-photo{max-width:400px}

/* The service directory shares the homepage's dark rental/offer rhythm. */
.service-directory{background:var(--ink);color:var(--mint);padding-block:24px var(--section-space)}
.service-row{gap:clamp(24px,4.5vw,64px);padding-block:28px;border-color:#b4f3e255;align-items:start}
.service-row h2{font-size:clamp(26px,2.4vw,32px);color:var(--lilac)}
.service-directory a:is(:hover,:focus-visible){color:var(--lilac)}
.service-directory a:focus-visible{outline-color:var(--lilac)}
.service-directory>.wrap>.text-link{display:inline-block;margin-top:24px}

/* Dark framing gives the Contact form a clear beginning and end. */
.contact-page-shell{background:var(--ink);color:var(--mint)}
.contact-page{padding-block:48px 64px;gap:clamp(32px,5vw,72px)}
.contact-address{border-color:#b4f3e255}
.contact-page-shell .contact-intro a:focus-visible{outline-color:var(--lilac)}
#inquiry-dialog.inline-inquiry{color:var(--ink)}
/* Safari native selects otherwise ignore the field height and padding. */
#inquiry-form select{appearance:none;background-image:linear-gradient(45deg,transparent 50%,var(--ink) 50%),linear-gradient(135deg,var(--ink) 50%,transparent 50%);background-size:6px 6px;background-position:calc(100% - 20px) center,calc(100% - 14px) center;background-repeat:no-repeat;padding-right:42px}

/* Articles retain a quiet mint reading surface beneath an ink title band. */
.blog-intro-band,.article-header-band{background:var(--ink);color:var(--mint)}
.blog-intro{padding-block:44px 52px}
.blog-intro p{max-width:55ch;font-size:20px;margin-top:22px}
.article-list{padding-top:16px;padding-bottom:64px}
.article-list article{padding-block:28px 34px}
.article-header{padding-block:36px 48px}
.article-header>.text-link{color:var(--lilac)}
.article-header a:focus-visible{outline-color:var(--lilac)}
.article-header h1{font-size:clamp(34px,4vw,56px)}
.article-body{padding-top:30px;padding-bottom:64px}
.not-found{background:var(--ink);color:var(--mint)}
.not-found a:focus-visible{outline-color:var(--lilac)}

@media(max-width:680px){
 .interior h2{font-size:29px}
 .interior-hero-layout,.section-layout,.process-section .section-layout{grid-template-columns:1fr;gap:28px}
 .text-only .section-copy{display:block}
 .process-section .interior-photo{max-width:420px;justify-self:center}
 .process-section .interior-photo img{border-radius:28px}
 .interior-samples{gap:26px}
 .about-page .text-only{padding-block:40px}
 .about-page .text-only+.text-only{padding-top:0}
 .service-row{padding-block:26px;gap:18px}
 .service-row h2{font-size:27px}
 .contact-page{padding-block:30px 48px}
 .blog-intro{padding-block:32px 38px}
 .blog-intro p{font-size:18px}
 .article-header{padding-block:28px 34px}
 .article-header h1{font-size:34px}
 .article-body{padding-top:22px}
}