@font-face {
font-family: 'Roboto Serif';
src: url('/fonts/roboto-serif.woff2') format('woff2');
font-weight: 400 500;
font-style: normal;
font-display: swap;
}
@font-face {
font-family: 'Roboto';
src: url('/fonts/roboto.woff2') format('woff2');
font-weight: 400 500;
font-style: normal;
font-display: swap;
}
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: var(--header-h); }
:root {
--color-bg: #f7f3ec;
--color-bg-alt: #efe7d8;
--color-ink: #26221c;
--color-ink-soft: #6b6357;
--color-accent: #a8462e;
--color-line: rgba(38, 34, 28, 0.12);
--color-line-strong: rgba(38, 34, 28, 0.22);
--font-display: 'Roboto Serif', Georgia, 'Times New Roman', serif;
--font-body: 'Roboto', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
--wrap-max: 1240px;
--header-h: 88px;
}
body {
margin: 0;
background: var(--color-bg);
color: var(--color-ink);
font-family: var(--font-body);
font-size: 16px;
line-height: 1.6;
-webkit-font-smoothing: antialiased;
}
img { max-width: 100%; display: block; }
a {
color: inherit;
text-decoration: none;
}
h1, h2, h3 {
font-family: var(--font-display);
font-weight: 500;
line-height: 1.12;
margin: 0;
letter-spacing: -0.01em;
}
p { margin: 0; }
.wrap {
max-width: var(--wrap-max);
margin: 0 auto;
padding: 0 clamp(1.25rem, 4vw, 3rem);
}
.wrap-narrow { max-width: 780px; }
.skip-link {
position: absolute;
left: -999px;
top: 0;
background: var(--color-ink);
color: var(--color-bg);
padding: 0.75rem 1.25rem;
z-index: 200;
}
.skip-link:focus { left: 0; }
.kicker {
display: inline-block;
font-family: var(--font-body);
font-size: 0.78rem;
font-weight: 500;
letter-spacing: 0.14em;
text-transform: uppercase;
color: var(--color-accent);
}
.site-header {
position: fixed;
top: 0;
left: 0;
right: 0;
z-index: 100;
height: var(--header-h);
display: flex;
align-items: center;
background: rgba(247, 243, 236, 0.92);
backdrop-filter: blur(10px);
border-bottom: 1px solid var(--color-line);
transition: background-color 0.35s ease, border-color 0.35s ease;
}
.header-inner {
width: 100%;
display: flex;
align-items: center;
justify-content: space-between;
gap: 1rem;
}
.wordmark {
font-family: var(--font-display);
font-size: 1.3rem;
font-weight: 500;
letter-spacing: 0.01em;
color: var(--color-ink);
white-space: nowrap;
transition: color 0.35s ease;
}
.site-nav {
display: flex;
align-items: center;
gap: clamp(1.25rem, 2.5vw, 2.25rem);
}
.site-nav a {
color: var(--color-ink);
font-size: 0.92rem;
letter-spacing: 0.02em;
padding-bottom: 3px;
border-bottom: 1px solid transparent;
transition: color 0.35s ease, border-color 0.2s ease;
}
.site-nav a:hover,
.site-nav a[aria-current] { border-color: currentColor; }
.site-nav .ig-link {
display: inline-flex;
align-items: center;
justify-content: center;
width: 2.65rem;
height: 2.65rem;
padding: 0 0 4px;
margin: -0.75rem;
border-bottom: 0;
}
.site-nav .ig-link svg { width: 1.15rem; height: 1.15rem; }
.site-nav .ig-link:hover { opacity: 0.7; }
.nav-toggle {
display: none;
flex-direction: column;
justify-content: center;
gap: 5px;
width: 34px;
height: 34px;
background: none;
border: 0;
cursor: pointer;
padding: 0;
}
.nav-toggle span {
display: block;
height: 1px;
background: var(--color-ink);
transition: background-color 0.35s ease, transform 0.25s ease, opacity 0.25s ease;
}
body.nav-open {
position: fixed;
left: 0;
right: 0;
width: 100%;
overflow: hidden;
}
.nav-scrim {
position: fixed;
inset: 0;
z-index: 99;
background: rgba(20, 17, 13, 0.4);
opacity: 0;
visibility: hidden;
transition: opacity 0.35s ease, visibility 0s linear 0.35s;
}
body.nav-open .nav-scrim {
opacity: 1;
visibility: visible;
transition: opacity 0.35s ease, visibility 0s linear 0s;
}
body.hero-page .site-header {
background: transparent;
border-bottom-color: transparent;
backdrop-filter: none;
}
body.hero-page .wordmark {
color: #ffffff;
text-shadow: 0 1px 3px rgba(0, 0, 0, 0.75), 0 2px 12px rgba(0, 0, 0, 0.55);
}
body.hero-page .nav-toggle span { background: #ffffff; }
@media (max-width: 860px) {
body.hero-page .nav-toggle[aria-expanded="true"] span { background: var(--color-ink); }
}
@media (min-width: 861px) {
body.hero-page .site-nav a {
color: #ffffff;
text-shadow: 0 1px 3px rgba(0, 0, 0, 0.75), 0 2px 12px rgba(0, 0, 0, 0.55);
}
body.hero-page .site-nav .ig-link svg {
filter: drop-shadow(0 1px 3px rgba(0, 0, 0, 0.75));
}
}
.home-hero {
position: relative;
height: 100vh;
height: 100svh;
min-height: 560px;
overflow: hidden;
}
.home-hero img {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
object-fit: cover;
object-position: center 72%;
}
.home-hero-scrim {
position: absolute;
inset: 0;
background:
linear-gradient(180deg,
rgba(20, 17, 13, 0.622) 0px,
rgba(20, 17, 13, 0.622) 48px,
rgba(20, 17, 13, 0.622) 48.46px,
rgba(20, 17, 13, 0.622) 48.91px,
rgba(20, 17, 13, 0.622) 49.37px,
rgba(20, 17, 13, 0.622) 49.82px,
rgba(20, 17, 13, 0.622) 50.28px,
rgba(20, 17, 13, 0.622) 50.73px,
rgba(20, 17, 13, 0.622) 51.19px,
rgba(20, 17, 13, 0.622) 51.64px,
rgba(20, 17, 13, 0.622) 52.1px,
rgba(20, 17, 13, 0.622) 52.56px,
rgba(20, 17, 13, 0.622) 53.01px,
rgba(20, 17, 13, 0.6219) 53.47px,
rgba(20, 17, 13, 0.6218) 53.92px,
rgba(20, 17, 13, 0.6216) 54.38px,
rgba(20, 17, 13, 0.6213) 54.83px,
rgba(20, 17, 13, 0.6207) 55.29px,
rgba(20, 17, 13, 0.62) 55.75px,
rgba(20, 17, 13, 0.619) 56.2px,
rgba(20, 17, 13, 0.6177) 56.66px,
rgba(20, 17, 13, 0.6161) 57.11px,
rgba(20, 17, 13, 0.6141) 57.57px,
rgba(20, 17, 13, 0.6117) 58.02px,
rgba(20, 17, 13, 0.6088) 58.48px,
rgba(20, 17, 13, 0.6055) 58.93px,
rgba(20, 17, 13, 0.6018) 59.39px,
rgba(20, 17, 13, 0.5975) 59.85px,
rgba(20, 17, 13, 0.5928) 60.3px,
rgba(20, 17, 13, 0.5877) 60.76px,
rgba(20, 17, 13, 0.5821) 61.21px,
rgba(20, 17, 13, 0.576) 61.67px,
rgba(20, 17, 13, 0.5695) 62.12px,
rgba(20, 17, 13, 0.5626) 62.58px,
rgba(20, 17, 13, 0.5553) 63.03px,
rgba(20, 17, 13, 0.5476) 63.49px,
rgba(20, 17, 13, 0.5396) 63.95px,
rgba(20, 17, 13, 0.5313) 64.4px,
rgba(20, 17, 13, 0.5227) 64.86px,
rgba(20, 17, 13, 0.5138) 65.31px,
rgba(20, 17, 13, 0.5046) 65.77px,
rgba(20, 17, 13, 0.4952) 66.22px,
rgba(20, 17, 13, 0.4856) 66.68px,
rgba(20, 17, 13, 0.4758) 67.13px,
rgba(20, 17, 13, 0.4658) 67.59px,
rgba(20, 17, 13, 0.4557) 68.05px,
rgba(20, 17, 13, 0.4455) 68.5px,
rgba(20, 17, 13, 0.4351) 68.96px,
rgba(20, 17, 13, 0.4247) 69.41px,
rgba(20, 17, 13, 0.4141) 69.87px,
rgba(20, 17, 13, 0.4035) 70.32px,
rgba(20, 17, 13, 0.3929) 70.78px,
rgba(20, 17, 13, 0.3821) 71.24px,
rgba(20, 17, 13, 0.3714) 71.69px,
rgba(20, 17, 13, 0.3606) 72.15px,
rgba(20, 17, 13, 0.3498) 72.6px,
rgba(20, 17, 13, 0.339) 73.06px,
rgba(20, 17, 13, 0.3282) 73.51px,
rgba(20, 17, 13, 0.3174) 73.97px,
rgba(20, 17, 13, 0.3066) 74.42px,
rgba(20, 17, 13, 0.2959) 74.88px,
rgba(20, 17, 13, 0.2851) 75.34px,
rgba(20, 17, 13, 0.2744) 75.79px,
rgba(20, 17, 13, 0.2638) 76.25px,
rgba(20, 17, 13, 0.2532) 76.7px,
rgba(20, 17, 13, 0.2426) 77.16px,
rgba(20, 17, 13, 0.2322) 77.61px,
rgba(20, 17, 13, 0.2218) 78.07px,
rgba(20, 17, 13, 0.2114) 78.52px,
rgba(20, 17, 13, 0.2012) 78.98px,
rgba(20, 17, 13, 0.1911) 79.44px,
rgba(20, 17, 13, 0.1811) 79.89px,
rgba(20, 17, 13, 0.1712) 80.35px,
rgba(20, 17, 13, 0.1614) 80.8px,
rgba(20, 17, 13, 0.1518) 81.26px,
rgba(20, 17, 13, 0.1424) 81.71px,
rgba(20, 17, 13, 0.1331) 82.17px,
rgba(20, 17, 13, 0.1241) 82.62px,
rgba(20, 17, 13, 0.1152) 83.08px,
rgba(20, 17, 13, 0.1066) 83.54px,
rgba(20, 17, 13, 0.0982) 83.99px,
rgba(20, 17, 13, 0.09) 84.45px,
rgba(20, 17, 13, 0.0822) 84.9px,
rgba(20, 17, 13, 0.0746) 85.36px,
rgba(20, 17, 13, 0.0674) 85.81px,
rgba(20, 17, 13, 0.0605) 86.27px,
rgba(20, 17, 13, 0.0539) 86.73px,
rgba(20, 17, 13, 0.0477) 87.18px,
rgba(20, 17, 13, 0.0419) 87.64px,
rgba(20, 17, 13, 0.0365) 88.09px,
rgba(20, 17, 13, 0.0314) 88.55px,
rgba(20, 17, 13, 0.0268) 89.0px,
rgba(20, 17, 13, 0.0226) 89.46px,
rgba(20, 17, 13, 0.0188) 89.91px,
rgba(20, 17, 13, 0.0155) 90.37px,
rgba(20, 17, 13, 0.0125) 90.83px,
rgba(20, 17, 13, 0.0099) 91.28px,
rgba(20, 17, 13, 0.0077) 91.74px,
rgba(20, 17, 13, 0.0058) 92.19px,
rgba(20, 17, 13, 0.0043) 92.65px,
rgba(20, 17, 13, 0.0031) 93.1px,
rgba(20, 17, 13, 0.0022) 93.56px,
rgba(20, 17, 13, 0.0014) 94.01px,
rgba(20, 17, 13, 0.0009) 94.47px,
rgba(20, 17, 13, 0.0005) 94.93px,
rgba(20, 17, 13, 0.0003) 95.38px,
rgba(20, 17, 13, 0.0002) 95.84px,
rgba(20, 17, 13, 0.0001) 96.29px,
rgba(20, 17, 13, 0.0) 96.75px,
rgba(20, 17, 13, 0.0) 97.2px,
rgba(20, 17, 13, 0.0) 97.66px,
rgba(20, 17, 13, 0.0) 98.11px,
rgba(20, 17, 13, 0.0) 98.57px,
rgba(20, 17, 13, 0.0) 99.03px,
rgba(20, 17, 13, 0.0) 99.48px,
rgba(20, 17, 13, 0.0) 99.94px,
rgba(20, 17, 13, 0.0) 100.39px,
rgba(20, 17, 13, 0.0) 100.85px,
rgba(20, 17, 13, 0.0) 101.3px,
rgba(20, 17, 13, 0.0) 101.76px,
rgba(20, 17, 13, 0.0) 102.0px,
rgba(20, 17, 13, 0.0) 100%);
}
.home-hero-foot {
position: absolute;
left: 0;
right: 0;
bottom: 0;
padding-top: 50px;
padding-bottom: clamp(3rem, 9vh, 5rem);
}
.home-hero-scrim-foot {
position: absolute;
left: 0;
right: 0;
top: auto;
bottom: 0;
height: 100%;
max-height: 258px;
background:
linear-gradient(180deg,
rgba(20, 17, 13, 0.0) 0.0px,
rgba(20, 17, 13, 0.0) 0.36px,
rgba(20, 17, 13, 0.0) 1.11px,
rgba(20, 17, 13, 0.0) 1.85px,
rgba(20, 17, 13, 0.0) 2.59px,
rgba(20, 17, 13, 0.0) 3.33px,
rgba(20, 17, 13, 0.0) 4.07px,
rgba(20, 17, 13, 0.0) 4.81px,
rgba(20, 17, 13, 0.0002) 5.55px,
rgba(20, 17, 13, 0.0005) 6.29px,
rgba(20, 17, 13, 0.0012) 7.03px,
rgba(20, 17, 13, 0.0024) 7.77px,
rgba(20, 17, 13, 0.0042) 8.51px,
rgba(20, 17, 13, 0.0069) 9.25px,
rgba(20, 17, 13, 0.0104) 10.0px,
rgba(20, 17, 13, 0.0149) 10.74px,
rgba(20, 17, 13, 0.0204) 11.48px,
rgba(20, 17, 13, 0.0268) 12.22px,
rgba(20, 17, 13, 0.0342) 12.96px,
rgba(20, 17, 13, 0.0424) 13.7px,
rgba(20, 17, 13, 0.0515) 14.44px,
rgba(20, 17, 13, 0.0613) 15.18px,
rgba(20, 17, 13, 0.0717) 15.92px,
rgba(20, 17, 13, 0.0827) 16.66px,
rgba(20, 17, 13, 0.0942) 17.4px,
rgba(20, 17, 13, 0.1062) 18.14px,
rgba(20, 17, 13, 0.1185) 18.89px,
rgba(20, 17, 13, 0.131) 19.63px,
rgba(20, 17, 13, 0.1438) 20.37px,
rgba(20, 17, 13, 0.1569) 21.11px,
rgba(20, 17, 13, 0.17) 21.85px,
rgba(20, 17, 13, 0.1833) 22.59px,
rgba(20, 17, 13, 0.1966) 23.33px,
rgba(20, 17, 13, 0.21) 24.07px,
rgba(20, 17, 13, 0.2235) 24.81px,
rgba(20, 17, 13, 0.2369) 25.55px,
rgba(20, 17, 13, 0.2504) 26.29px,
rgba(20, 17, 13, 0.2637) 27.03px,
rgba(20, 17, 13, 0.2771) 27.78px,
rgba(20, 17, 13, 0.2903) 28.52px,
rgba(20, 17, 13, 0.3034) 29.26px,
rgba(20, 17, 13, 0.3163) 30.0px,
rgba(20, 17, 13, 0.329) 30.74px,
rgba(20, 17, 13, 0.3414) 31.48px,
rgba(20, 17, 13, 0.3535) 32.22px,
rgba(20, 17, 13, 0.3653) 32.96px,
rgba(20, 17, 13, 0.3766) 33.7px,
rgba(20, 17, 13, 0.3873) 34.44px,
rgba(20, 17, 13, 0.3974) 35.18px,
rgba(20, 17, 13, 0.4069) 35.92px,
rgba(20, 17, 13, 0.4156) 36.67px,
rgba(20, 17, 13, 0.4234) 37.41px,
rgba(20, 17, 13, 0.4303) 38.15px,
rgba(20, 17, 13, 0.4363) 38.89px,
rgba(20, 17, 13, 0.4412) 39.63px,
rgba(20, 17, 13, 0.4453) 40.37px,
rgba(20, 17, 13, 0.4483) 41.11px,
rgba(20, 17, 13, 0.4506) 41.85px,
rgba(20, 17, 13, 0.4521) 42.59px,
rgba(20, 17, 13, 0.453) 43.33px,
rgba(20, 17, 13, 0.4535) 44.07px,
rgba(20, 17, 13, 0.4537) 44.81px,
rgba(20, 17, 13, 0.4538) 45.56px,
rgba(20, 17, 13, 0.4538) 46.3px,
rgba(20, 17, 13, 0.4538) 47.04px,
rgba(20, 17, 13, 0.4538) 47.78px,
rgba(20, 17, 13, 0.4538) 48.52px,
rgba(20, 17, 13, 0.4538) 49.26px,
rgba(20, 17, 13, 0.4538) 50.0px,
rgba(20, 17, 13, 0.4538) 100%);
}
.home-hero-heading {
position: relative;
z-index: 2;
max-width: 32rem;
margin: 0 0 0 clamp(1.5rem, 5vw, 3rem);
font-family: var(--font-display);
font-weight: 500;
font-size: clamp(1.6rem, 4vw, 2.4rem);
font-variation-settings: 'opsz' 60;
line-height: 1.25;
color: #ffffff;
text-shadow: 0 1px 4px rgba(0, 0, 0, 0.4);
}
.page-header {
padding: calc(var(--header-h) + clamp(3rem, 9vh, 6rem)) 0 clamp(2.5rem, 6vh, 4rem);
}
.page-header h1 {
font-size: clamp(2.1rem, 4.5vw, 3.25rem);
margin-top: 0.5rem;
font-variation-settings: 'opsz' 60;
}
.page-header .page-lede {
margin-top: 1rem;
max-width: 62ch;
color: var(--color-ink-soft);
font-size: 1.05rem;
}
.page-header-tight {
padding-top: clamp(3rem, 7vh, 4.5rem);
}
.page-header-tight h2 {
font-size: clamp(1.6rem, 3vw, 2.1rem);
font-variation-settings: 'opsz' 40;
}
.back-link {
display: block;
width: fit-content;
font-size: 0.9rem;
color: var(--color-ink-soft);
border-bottom: 1px solid var(--color-line-strong);
}
.back-link:hover { color: var(--color-accent); border-color: var(--color-accent); }
.page-header .back-link { margin-bottom: 1.25rem; }
.cta-link {
display: inline-block;
font-family: var(--font-display);
font-size: 1.05rem;
color: var(--color-ink);
border-bottom: 1px solid var(--color-line-strong);
padding-bottom: 0.2rem;
}
.cta-link:hover { color: var(--color-accent); border-color: var(--color-accent); }
.tile-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(min(360px, 100%), 520px));
justify-content: start;
gap: clamp(1.5rem, 3vw, 2.5rem);
padding-bottom: clamp(4rem, 10vh, 6rem);
}
.tile {
display: block;
}
.tile-newrow {
grid-column: 1;
}
.tile-frame {
position: relative;
background: var(--color-bg-alt);
padding: clamp(0.75rem, 2vw, 1.25rem);
transition: background-color 0.4s ease;
}
.tile-frame img {
display: block;
width: 100%;
height: auto;
}
a.tile:hover .tile-frame { background: #e7dcc8; }
.tile-caption {
margin-top: 0.9rem;
}
.tile-caption h2 {
font-size: 1.15rem;
}
.ba-room {
display: grid;
grid-template-columns: minmax(0, 300px) 1fr;
gap: clamp(1rem, 2.5vw, 2rem);
align-items: start;
padding-bottom: clamp(3rem, 7vh, 4.5rem);
}
.ba-room + .ba-room {
border-top: 1px solid var(--color-line);
padding-top: clamp(2.5rem, 6vh, 4rem);
}
.ba-room:last-of-type { padding-bottom: clamp(4rem, 10vh, 6rem); }
.ba-room h2 {
grid-column: 1 / -1;
font-size: clamp(1.3rem, 2.5vw, 1.6rem);
margin-bottom: 0.4rem;
}
.ba-pane {
position: relative;
}
.ba-pane img {
width: 100%;
height: auto;
display: block;
}
.ba-before-stack {
display: grid;
gap: clamp(1rem, 2.5vw, 2rem);
align-content: start;
}
.ba-col {
display: flex;
flex-direction: column;
gap: clamp(1rem, 2.5vw, 1.5rem);
min-width: 0;
}
.ba-after-stack {
display: grid;
gap: clamp(1rem, 2.5vw, 2rem);
align-content: start;
}
.ba-note {
color: var(--color-ink-soft);
font-size: 0.95rem;
max-width: 60ch;
}
.ba-note b {
color: var(--color-ink);
font-weight: 500;
letter-spacing: 0.02em;
}
.ba-pane-tag {
position: absolute;
left: 0.6rem;
bottom: 0.6rem;
font-size: 0.68rem;
letter-spacing: 0.1em;
text-transform: uppercase;
color: #ffffff;
background: rgba(20, 17, 13, 0.65);
padding: 0.2rem 0.5rem;
}
.room-images {
display: grid;
gap: clamp(1rem, 2vw, 1.5rem);
padding-bottom: clamp(2.5rem, 6vh, 4rem);
}
.room-images img {
width: 100%;
height: auto;
display: block;
}
.room-images .portrait {
display: block;
width: 100%;
max-width: 760px;
margin-inline: auto;
}
.page-outro { padding-bottom: clamp(4rem, 10vh, 6rem); }
.room-copy {
max-width: 62ch;
padding-bottom: clamp(4rem, 10vh, 6rem);
}
.room-onward { margin-top: 1.75rem; }
.room-copy p {
font-size: 1.05rem;
color: var(--color-ink-soft);
}
.room-copy p + p { margin-top: 1rem; }
.about-intro p { font-size: 1.1rem; color: var(--color-ink-soft); }
.about-intro p + p { margin-top: 1.1rem; }
.about-intro .cta-link { margin-top: 1.5rem; }
.about-layout {
display: grid;
grid-template-columns: minmax(240px, 340px) 1fr;
gap: clamp(2.5rem, 6vw, 5rem);
align-items: start;
padding-bottom: clamp(4rem, 10vh, 6rem);
}
.portrait-frame {
background: var(--color-bg-alt);
border: 1px solid var(--color-line);
padding: 1.5rem;
}
.portrait-frame img { width: 100%; height: auto; display: block; }
.about-copy { max-width: 60ch; }
.about-copy p {
font-size: 1.1rem;
color: var(--color-ink-soft);
}
.about-copy p + p { margin-top: 1.25rem; }
.contact-grid {
display: grid;
grid-template-columns: 1fr 1.3fr;
gap: clamp(2.5rem, 6vw, 5rem);
padding-bottom: clamp(4rem, 10vh, 6rem);
}
.contact-block + .contact-block {
margin-top: clamp(2.5rem, 5vh, 3.5rem);
padding-top: clamp(2.5rem, 5vh, 3.5rem);
border-top: 1px solid var(--color-line);
}
.contact-block h2 {
font-size: 1.3rem;
margin-bottom: 0.6rem;
}
.contact-block p { color: var(--color-ink-soft); }
.contact-block .contact-value {
display: inline-block;
margin-top: 0.5rem;
font-family: var(--font-display);
font-size: 1.3rem;
color: var(--color-ink);
border-bottom: 1px solid var(--color-line-strong);
}
.contact-block .contact-value:hover { color: var(--color-accent); border-color: var(--color-accent); }
.form-intro {
color: var(--color-ink-soft);
margin-bottom: 1.5rem;
}
.form-error {
display: none;
margin-bottom: 1.5rem;
padding: 0.9rem 1.1rem;
border-left: 3px solid var(--color-accent);
background: var(--color-bg-alt);
}
.form-error:target { display: block; }
.form-error p { margin: 0; color: var(--color-ink); }
.form-error a {
color: var(--color-accent);
border-bottom: 1px solid var(--color-accent);
display: inline-block;
padding: 2px 0;
}
.form-error:focus { outline: none; }
.form-error:focus-visible { outline: 2px solid var(--color-accent); outline-offset: 3px; }
.inquiry-form {
display: grid;
gap: 1.1rem;
}
.form-row {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 1.1rem;
}
.inquiry-form label {
display: block;
font-size: 0.82rem;
letter-spacing: 0.03em;
color: var(--color-ink-soft);
margin-bottom: 0.4rem;
}
.inquiry-form input,
.inquiry-form select,
.inquiry-form textarea {
width: 100%;
font-family: var(--font-body);
font-size: 1rem;
color: var(--color-ink);
background: var(--color-bg);
border: 1px solid var(--color-line-strong);
padding: 0.7rem 0.8rem;
border-radius: 0;
}
.inquiry-form input:focus-visible,
.inquiry-form select:focus-visible,
.inquiry-form textarea:focus-visible {
outline: none;
border-color: var(--color-accent);
box-shadow: 0 0 0 3px rgba(168, 70, 46, 0.25);
}
.inquiry-form textarea { resize: vertical; min-height: 120px; }
.inquiry-submit {
justify-self: start;
margin-top: 0.25rem;
font-family: var(--font-body);
font-size: 0.92rem;
font-weight: 500;
letter-spacing: 0.02em;
color: var(--color-bg);
background: var(--color-ink);
border: 1px solid var(--color-ink);
padding: 0.85rem 1.75rem;
cursor: pointer;
transition: background-color 0.25s ease, color 0.25s ease;
}
.inquiry-submit:hover { background: var(--color-accent); border-color: var(--color-accent); }
.page-reading .page-header,
.page-reading .process-intro,
.page-reading .process-phase,
.page-reading .about-intro {
max-width: 60ch;
margin-inline: auto;
}
.page-reading .page-header-tight,
.page-reading .about-layout {
max-width: 954px;
margin-inline: auto;
}
.process-intro p { font-size: 1.1rem; color: var(--color-ink-soft); }
.process-intro p + p { margin-top: 1.1rem; }
.process-phases {
padding: clamp(3rem, 7vh, 5rem) 0;
}
.process-phase {
padding: clamp(2.25rem, 5vh, 3.25rem) 0;
border-top: 1px solid var(--color-line);
}
.process-phase .kicker { margin-bottom: 0.6rem; }
.process-phase h2 {
font-size: clamp(1.5rem, 2.6vw, 1.9rem);
margin-bottom: 1rem;
}
.process-phase p { color: var(--color-ink-soft); font-size: 1.02rem; }
.process-phase p + p { margin-top: 0.95rem; }
.fee-structures {
list-style: none;
margin: 0.95rem 0 0;
padding: 0;
color: var(--color-ink-soft);
font-size: 1.02rem;
}
.fee-structures li {
padding-left: 1rem;
border-left: 2px solid var(--color-line);
}
.fee-structures li + li { margin-top: 0.8rem; }
.fee-structures b {
color: var(--color-ink);
font-weight: 500;
letter-spacing: 0.02em;
}
.process-phase ol + p { margin-top: 0.95rem; }
.process-closing {
background: var(--color-ink);
color: var(--color-bg);
padding: clamp(4.5rem, 12vh, 7rem) 0;
text-align: center;
}
.process-closing .kicker { color: rgba(247, 243, 236, 0.65); }
.process-closing p {
max-width: 60ch;
margin: 1.25rem auto 0;
font-family: var(--font-display);
font-size: clamp(1.2rem, 2.2vw, 1.5rem);
line-height: 1.5;
}
.process-closing .cta-link {
display: inline-block;
margin-top: 2rem;
font-family: var(--font-display);
font-size: 1.15rem;
font-weight: 500;
color: var(--color-bg);
border-bottom: 1px solid rgba(247, 243, 236, 0.4);
padding-bottom: 0.2rem;
transition: border-color 0.25s ease, color 0.25s ease;
}
.process-closing .cta-link:hover { border-color: var(--color-bg); color: var(--color-accent); }
.hp {
position: absolute;
left: -9999px;
width: 1px;
height: 1px;
overflow: hidden;
}
.site-footer {
padding: 1.5rem 0;
border-top: 1px solid var(--color-line);
text-align: left;
}
.footer-top {
display: flex;
justify-content: space-between;
align-items: baseline;
gap: 1rem;
flex-wrap: wrap;
}
.wordmark-footer { margin: 0; }
.site-footer a { display: inline-block; padding: 0.4rem 0; }
.site-footer a:hover { color: var(--color-accent); }
.footer-meta {
display: flex;
flex-wrap: wrap;
align-items: baseline;
margin: 0.25rem 0 0;
font-size: 0.8rem;
color: var(--color-ink-soft);
}
.footer-meta .place,
.footer-meta .copyright { white-space: nowrap; }
.footer-meta .copyright { margin-left: auto; }
@media (max-width: 560px) {
.footer-meta .desc { flex: 0 0 100%; margin-bottom: 0.15rem; }
}
@media (min-width: 561px) {
.footer-meta .desc::after { content: '\00b7'; margin: 0 0.4rem; }
}
.reveal {
transition: opacity 0.7s ease, transform 0.7s ease;
}
.reveal-ready .reveal {
opacity: 0;
transform: translateY(18px);
}
.reveal-ready .reveal.is-visible {
opacity: 1;
transform: translateY(0);
}
@media (max-width: 860px) {
:root { --header-h: 64px; }
.site-header { backdrop-filter: none; }
.site-nav {
position: fixed;
inset: 0 0 0 auto;
width: min(78vw, 320px);
height: 100svh;
background: var(--color-bg);
flex-direction: column;
justify-content: center;
align-items: flex-start;
gap: 2rem;
padding: 2rem;
transform: translateX(100%);
visibility: hidden;
transition: transform 0.35s ease, visibility 0s linear 0.35s;
box-shadow: -8px 0 30px rgba(0,0,0,0.08);
}
.site-nav.is-open {
transform: translateX(0);
visibility: visible;
transition: transform 0.35s ease, visibility 0s linear 0s;
}
.site-nav.is-dragging { transition: none; }
.site-nav a { color: var(--color-ink); font-size: 1.15rem; display: block; padding: 0.5rem 0; }
.site-nav .ig-link { margin: 0 0 0 -0.75rem; }
.nav-toggle { display: flex; z-index: 101; }
.nav-toggle[aria-expanded="true"] span:nth-child(1) { transform: translateY(6px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.nav-toggle[aria-expanded="true"] span:nth-child(3) { transform: translateY(-6px) rotate(-45deg); }
.home-hero-scrim { background:
linear-gradient(180deg,
rgba(20, 17, 13, 0.6534) 0px,
rgba(20, 17, 13, 0.6534) 21px,
rgba(20, 17, 13, 0.6534) 21.7px,
rgba(20, 17, 13, 0.6534) 22.4px,
rgba(20, 17, 13, 0.6534) 23.1px,
rgba(20, 17, 13, 0.6534) 23.8px,
rgba(20, 17, 13, 0.6534) 24.5px,
rgba(20, 17, 13, 0.6534) 25.2px,
rgba(20, 17, 13, 0.6534) 25.9px,
rgba(20, 17, 13, 0.6534) 26.6px,
rgba(20, 17, 13, 0.6534) 27.3px,
rgba(20, 17, 13, 0.6534) 28.0px,
rgba(20, 17, 13, 0.6534) 28.7px,
rgba(20, 17, 13, 0.6534) 29.4px,
rgba(20, 17, 13, 0.6533) 30.1px,
rgba(20, 17, 13, 0.6531) 30.8px,
rgba(20, 17, 13, 0.6528) 31.5px,
rgba(20, 17, 13, 0.6523) 32.19px,
rgba(20, 17, 13, 0.6517) 32.89px,
rgba(20, 17, 13, 0.6508) 33.59px,
rgba(20, 17, 13, 0.6496) 34.29px,
rgba(20, 17, 13, 0.6481) 34.99px,
rgba(20, 17, 13, 0.6462) 35.69px,
rgba(20, 17, 13, 0.644) 36.39px,
rgba(20, 17, 13, 0.6413) 37.09px,
rgba(20, 17, 13, 0.6382) 37.79px,
rgba(20, 17, 13, 0.6346) 38.49px,
rgba(20, 17, 13, 0.6306) 39.19px,
rgba(20, 17, 13, 0.6261) 39.89px,
rgba(20, 17, 13, 0.6211) 40.59px,
rgba(20, 17, 13, 0.6157) 41.29px,
rgba(20, 17, 13, 0.6098) 41.99px,
rgba(20, 17, 13, 0.6034) 42.69px,
rgba(20, 17, 13, 0.5967) 43.39px,
rgba(20, 17, 13, 0.5895) 44.09px,
rgba(20, 17, 13, 0.582) 44.79px,
rgba(20, 17, 13, 0.5741) 45.49px,
rgba(20, 17, 13, 0.5658) 46.19px,
rgba(20, 17, 13, 0.5572) 46.89px,
rgba(20, 17, 13, 0.5484) 47.59px,
rgba(20, 17, 13, 0.5392) 48.29px,
rgba(20, 17, 13, 0.5298) 48.99px,
rgba(20, 17, 13, 0.5202) 49.69px,
rgba(20, 17, 13, 0.5103) 50.39px,
rgba(20, 17, 13, 0.5003) 51.09px,
rgba(20, 17, 13, 0.4901) 51.79px,
rgba(20, 17, 13, 0.4797) 52.49px,
rgba(20, 17, 13, 0.4693) 53.19px,
rgba(20, 17, 13, 0.4587) 53.89px,
rgba(20, 17, 13, 0.448) 54.58px,
rgba(20, 17, 13, 0.4372) 55.28px,
rgba(20, 17, 13, 0.4263) 55.98px,
rgba(20, 17, 13, 0.4154) 56.68px,
rgba(20, 17, 13, 0.4044) 57.38px,
rgba(20, 17, 13, 0.3934) 58.08px,
rgba(20, 17, 13, 0.3824) 58.78px,
rgba(20, 17, 13, 0.3713) 59.48px,
rgba(20, 17, 13, 0.3602) 60.18px,
rgba(20, 17, 13, 0.3492) 60.88px,
rgba(20, 17, 13, 0.3381) 61.58px,
rgba(20, 17, 13, 0.327) 62.28px,
rgba(20, 17, 13, 0.316) 62.98px,
rgba(20, 17, 13, 0.305) 63.68px,
rgba(20, 17, 13, 0.294) 64.38px,
rgba(20, 17, 13, 0.2831) 65.08px,
rgba(20, 17, 13, 0.2722) 65.78px,
rgba(20, 17, 13, 0.2613) 66.48px,
rgba(20, 17, 13, 0.2505) 67.18px,
rgba(20, 17, 13, 0.2398) 67.88px,
rgba(20, 17, 13, 0.2292) 68.58px,
rgba(20, 17, 13, 0.2187) 69.28px,
rgba(20, 17, 13, 0.2082) 69.98px,
rgba(20, 17, 13, 0.1979) 70.68px,
rgba(20, 17, 13, 0.1876) 71.38px,
rgba(20, 17, 13, 0.1775) 72.08px,
rgba(20, 17, 13, 0.1676) 72.78px,
rgba(20, 17, 13, 0.1578) 73.48px,
rgba(20, 17, 13, 0.1481) 74.18px,
rgba(20, 17, 13, 0.1386) 74.88px,
rgba(20, 17, 13, 0.1294) 75.58px,
rgba(20, 17, 13, 0.1203) 76.28px,
rgba(20, 17, 13, 0.1115) 76.97px,
rgba(20, 17, 13, 0.1029) 77.67px,
rgba(20, 17, 13, 0.0946) 78.37px,
rgba(20, 17, 13, 0.0865) 79.07px,
rgba(20, 17, 13, 0.0787) 79.77px,
rgba(20, 17, 13, 0.0713) 80.47px,
rgba(20, 17, 13, 0.0642) 81.17px,
rgba(20, 17, 13, 0.0574) 81.87px,
rgba(20, 17, 13, 0.051) 82.57px,
rgba(20, 17, 13, 0.045) 83.27px,
rgba(20, 17, 13, 0.0394) 83.97px,
rgba(20, 17, 13, 0.0341) 84.67px,
rgba(20, 17, 13, 0.0293) 85.37px,
rgba(20, 17, 13, 0.0249) 86.07px,
rgba(20, 17, 13, 0.0209) 86.77px,
rgba(20, 17, 13, 0.0173) 87.47px,
rgba(20, 17, 13, 0.0141) 88.17px,
rgba(20, 17, 13, 0.0113) 88.87px,
rgba(20, 17, 13, 0.0089) 89.57px,
rgba(20, 17, 13, 0.0069) 90.27px,
rgba(20, 17, 13, 0.0052) 90.97px,
rgba(20, 17, 13, 0.0038) 91.67px,
rgba(20, 17, 13, 0.0027) 92.37px,
rgba(20, 17, 13, 0.0019) 93.07px,
rgba(20, 17, 13, 0.0012) 93.77px,
rgba(20, 17, 13, 0.0008) 94.47px,
rgba(20, 17, 13, 0.0005) 95.17px,
rgba(20, 17, 13, 0.0002) 95.87px,
rgba(20, 17, 13, 0.0001) 96.57px,
rgba(20, 17, 13, 0.0001) 97.27px,
rgba(20, 17, 13, 0.0) 97.97px,
rgba(20, 17, 13, 0.0) 98.67px,
rgba(20, 17, 13, 0.0) 99.36px,
rgba(20, 17, 13, 0.0) 100.06px,
rgba(20, 17, 13, 0.0) 100.76px,
rgba(20, 17, 13, 0.0) 101.46px,
rgba(20, 17, 13, 0.0) 102.16px,
rgba(20, 17, 13, 0.0) 102.86px,
rgba(20, 17, 13, 0.0) 103.56px,
rgba(20, 17, 13, 0.0) 104.26px,
rgba(20, 17, 13, 0.0) 104.96px,
rgba(20, 17, 13, 0.0) 105.66px,
rgba(20, 17, 13, 0.0) 106.0px,
rgba(20, 17, 13, 0.0) 100%); }
.home-hero-foot { padding-top: 49px; }
.home-hero-scrim-foot { max-height: 243px; background:
linear-gradient(180deg,
rgba(20, 17, 13, 0.0) 0.0px,
rgba(20, 17, 13, 0.0) 0.29px,
rgba(20, 17, 13, 0.0) 0.77px,
rgba(20, 17, 13, 0.0) 1.25px,
rgba(20, 17, 13, 0.0) 1.73px,
rgba(20, 17, 13, 0.0) 2.22px,
rgba(20, 17, 13, 0.0) 2.7px,
rgba(20, 17, 13, 0.0) 3.18px,
rgba(20, 17, 13, 0.0) 3.66px,
rgba(20, 17, 13, 0.0) 4.15px,
rgba(20, 17, 13, 0.0) 4.63px,
rgba(20, 17, 13, 0.0) 5.11px,
rgba(20, 17, 13, 0.0) 5.59px,
rgba(20, 17, 13, 0.0001) 6.07px,
rgba(20, 17, 13, 0.0002) 6.56px,
rgba(20, 17, 13, 0.0003) 7.04px,
rgba(20, 17, 13, 0.0006) 7.52px,
rgba(20, 17, 13, 0.001) 8.0px,
rgba(20, 17, 13, 0.0015) 8.49px,
rgba(20, 17, 13, 0.0022) 8.97px,
rgba(20, 17, 13, 0.0032) 9.45px,
rgba(20, 17, 13, 0.0045) 9.93px,
rgba(20, 17, 13, 0.006) 10.42px,
rgba(20, 17, 13, 0.0079) 10.9px,
rgba(20, 17, 13, 0.0101) 11.38px,
rgba(20, 17, 13, 0.0126) 11.86px,
rgba(20, 17, 13, 0.0156) 12.34px,
rgba(20, 17, 13, 0.0189) 12.83px,
rgba(20, 17, 13, 0.0227) 13.31px,
rgba(20, 17, 13, 0.0268) 13.79px,
rgba(20, 17, 13, 0.0312) 14.27px,
rgba(20, 17, 13, 0.0361) 14.76px,
rgba(20, 17, 13, 0.0413) 15.24px,
rgba(20, 17, 13, 0.0469) 15.72px,
rgba(20, 17, 13, 0.0528) 16.2px,
rgba(20, 17, 13, 0.0591) 16.69px,
rgba(20, 17, 13, 0.0656) 17.17px,
rgba(20, 17, 13, 0.0724) 17.65px,
rgba(20, 17, 13, 0.0796) 18.13px,
rgba(20, 17, 13, 0.0869) 18.61px,
rgba(20, 17, 13, 0.0945) 19.1px,
rgba(20, 17, 13, 0.1024) 19.58px,
rgba(20, 17, 13, 0.1104) 20.06px,
rgba(20, 17, 13, 0.1187) 20.54px,
rgba(20, 17, 13, 0.1271) 21.03px,
rgba(20, 17, 13, 0.1357) 21.51px,
rgba(20, 17, 13, 0.1444) 21.99px,
rgba(20, 17, 13, 0.1533) 22.47px,
rgba(20, 17, 13, 0.1624) 22.96px,
rgba(20, 17, 13, 0.1716) 23.44px,
rgba(20, 17, 13, 0.1808) 23.92px,
rgba(20, 17, 13, 0.1902) 24.4px,
rgba(20, 17, 13, 0.1997) 24.88px,
rgba(20, 17, 13, 0.2093) 25.37px,
rgba(20, 17, 13, 0.2189) 25.85px,
rgba(20, 17, 13, 0.2286) 26.33px,
rgba(20, 17, 13, 0.2384) 26.81px,
rgba(20, 17, 13, 0.2482) 27.3px,
rgba(20, 17, 13, 0.258) 27.78px,
rgba(20, 17, 13, 0.2679) 28.26px,
rgba(20, 17, 13, 0.2777) 28.74px,
rgba(20, 17, 13, 0.2875) 29.23px,
rgba(20, 17, 13, 0.2973) 29.71px,
rgba(20, 17, 13, 0.307) 30.19px,
rgba(20, 17, 13, 0.3167) 30.67px,
rgba(20, 17, 13, 0.3263) 31.15px,
rgba(20, 17, 13, 0.3357) 31.64px,
rgba(20, 17, 13, 0.345) 32.12px,
rgba(20, 17, 13, 0.3541) 32.6px,
rgba(20, 17, 13, 0.363) 33.08px,
rgba(20, 17, 13, 0.3716) 33.57px,
rgba(20, 17, 13, 0.38) 34.05px,
rgba(20, 17, 13, 0.388) 34.53px,
rgba(20, 17, 13, 0.3958) 35.01px,
rgba(20, 17, 13, 0.4031) 35.5px,
rgba(20, 17, 13, 0.41) 35.98px,
rgba(20, 17, 13, 0.4165) 36.46px,
rgba(20, 17, 13, 0.4225) 36.94px,
rgba(20, 17, 13, 0.4281) 37.42px,
rgba(20, 17, 13, 0.4331) 37.91px,
rgba(20, 17, 13, 0.4376) 38.39px,
rgba(20, 17, 13, 0.4415) 38.87px,
rgba(20, 17, 13, 0.4449) 39.35px,
rgba(20, 17, 13, 0.4479) 39.84px,
rgba(20, 17, 13, 0.4503) 40.32px,
rgba(20, 17, 13, 0.4522) 40.8px,
rgba(20, 17, 13, 0.4537) 41.28px,
rgba(20, 17, 13, 0.4549) 41.77px,
rgba(20, 17, 13, 0.4557) 42.25px,
rgba(20, 17, 13, 0.4563) 42.73px,
rgba(20, 17, 13, 0.4566) 43.21px,
rgba(20, 17, 13, 0.4568) 43.69px,
rgba(20, 17, 13, 0.4569) 44.18px,
rgba(20, 17, 13, 0.457) 44.66px,
rgba(20, 17, 13, 0.457) 45.14px,
rgba(20, 17, 13, 0.457) 45.62px,
rgba(20, 17, 13, 0.457) 46.11px,
rgba(20, 17, 13, 0.457) 46.59px,
rgba(20, 17, 13, 0.457) 47.07px,
rgba(20, 17, 13, 0.457) 47.55px,
rgba(20, 17, 13, 0.457) 48.04px,
rgba(20, 17, 13, 0.457) 48.52px,
rgba(20, 17, 13, 0.457) 49.0px,
rgba(20, 17, 13, 0.457) 100%); }
.ba-room { grid-template-columns: 1fr; }
.ba-before-stack { grid-template-columns: 1fr 1fr; justify-content: start; }
.about-layout { grid-template-columns: 1fr; }
.portrait-frame { max-width: 320px; }
.contact-grid { grid-template-columns: 1fr; }
.form-row { grid-template-columns: 1fr; }
}
@media (max-width: 560px) {
.ba-before-stack { grid-template-columns: 1fr; }
.tile-grid { gap: 1.25rem; }
}
@media (prefers-reduced-motion: reduce) {
html { scroll-behavior: auto; }
.reveal, .reveal-ready .reveal { opacity: 1; transform: none; transition: none; }
.tile-frame { transition: none; }
.site-nav, .site-nav.is-open,
.nav-scrim, body.nav-open .nav-scrim,
.nav-toggle span { transition: none; }
}
.ba-onward { margin: 2.5rem 0 0; text-align: center; }