@import url('https://fonts.googleapis.com/css2?family=DM+Mono&family=DM+Sans:wght@400;500;700&family=Playfair+Display:ital,wght@0,500;0,600;1,500;1,600&display=swap');

:root { --ink:#302722; --forest:#211c19; --paper:#f1eee4; --cream:#e6dfce; --orange:#b55d40; --line:rgba(48,39,34,.22); }
* { box-sizing:border-box; } html { scroll-behavior:smooth; } body { margin:0; color:var(--ink); background:var(--paper); font-family:'DM Sans',Arial,sans-serif; } a { color:inherit; text-decoration:none; } .skip-link { position:absolute; left:-9999px; } .skip-link:focus { left:1rem; top:1rem; z-index:20; background:white; padding:.7rem; }
.site-header { position:absolute; z-index:5; inset:0 0 auto; height:5.5rem; padding:1.1rem 5vw; display:flex; align-items:center; justify-content:space-between; color:var(--paper); } .wordmark { display:flex; align-items:center; gap:.7rem; font-family:'Playfair Display',serif; font-size:1.1rem; line-height:.85; } .wordmark small { display:block; font: .52rem/1.2 'DM Mono',monospace; letter-spacing:.16em; text-transform:uppercase; margin-top:.38rem; } .wordmark__mark { border:1px solid currentColor; width:2.1rem; height:2.1rem; border-radius:50%; display:grid; place-items:center; font-style:italic; font-size:1.3rem; } .main-nav { display:flex; gap:1.5rem; align-items:center; font-size:.82rem; } .main-nav a { opacity:.85; } .main-nav a:hover { opacity:1; } .main-nav .nav-cta { border:1px solid currentColor; padding:.6rem .8rem; opacity:1; } .menu-toggle { display:none; }
.hero { min-height:46rem; position:relative; overflow:hidden; color:var(--paper); padding:10rem 11vw 4rem; display:flex; flex-direction:column; align-items:flex-start; justify-content:center; background:radial-gradient(circle at 75% 20%,#bb7656 0 4%,transparent 4.3%),radial-gradient(circle at 68% 30%,#794839 0 12%,transparent 12.3%),radial-gradient(ellipse at 70% 45%,#4a3028 0 31%,transparent 31.3%),linear-gradient(120deg,#241b18,#4a2f27 52%,#987057); } .hero:after { content:''; position:absolute; width:34rem; height:34rem; border:1px solid rgba(241,238,228,.2); border-radius:50%; right:-9rem; bottom:-12rem; } .hero__grain { position:absolute; inset:0; opacity:.25; background-image:radial-gradient(rgba(255,255,255,.5) .55px,transparent .55px); background-size:5px 5px; mix-blend-mode:soft-light; } .eyebrow,.section-label { font: .67rem 'DM Mono',monospace; letter-spacing:.14em; text-transform:uppercase; } .hero h1 { z-index:1; margin:.9rem 0 1.2rem; font:600 clamp(3.9rem,10vw,8.8rem)/.88 'Playfair Display',serif; letter-spacing:-.07em; } em { font-weight:500; } .hero__intro { z-index:1; max-width:26rem; margin:0 0 2.3rem; line-height:1.6; font-size:1.04rem; } .round-link { z-index:1; border-bottom:1px solid rgba(241,238,228,.8); padding-bottom:.45rem; font-size:.82rem; } .round-link span { margin-left:1.5rem; } .hero__stamp { position:absolute; z-index:1; right:11vw; bottom:4rem; width:8.5rem; height:8.5rem; border:1px solid rgba(241,238,228,.65); border-radius:50%; display:flex; flex-direction:column; align-items:center; justify-content:center; transform:rotate(12deg); text-align:center; font:.55rem 'DM Mono',monospace; letter-spacing:.12em; text-transform:uppercase; } .hero__stamp strong { font:500 1.8rem 'Playfair Display',serif; letter-spacing:0; margin:.1rem 0; }
.section { padding:8rem 11vw; } .section-label { display:flex; gap:1.1rem; color:#796a60; } .section-label span { color:var(--orange); } .story { display:grid; grid-template-columns: .65fr 2fr .9fr; gap:3rem; } .story__content { max-width:38rem; } .display-copy { margin:0 0 2rem; font:500 clamp(2.1rem,4.4vw,4rem)/1.02 'Playfair Display',serif; letter-spacing:-.045em; } .body-copy { max-width:31rem; line-height:1.7; color:#695c53; } .text-link { display:inline-block; font-size:.83rem; margin-top:1.6rem; border-bottom:1px solid var(--ink); padding-bottom:.4rem; } .text-link span { margin-left:1.25rem; } .facts { display:grid; align-content:start; gap:1.3rem; } .facts div { border-top:1px solid var(--line); padding-top:.65rem; } .facts span { display:block; font:500 1.9rem 'Playfair Display',serif; } .facts small { font-size:.72rem; color:#786a60; }
.section--dark { background:var(--forest); color:var(--paper); } .section--dark .section-label { color:#c8b4a2; } .moments h2,.courtyard h2,.visit h2 { margin:2rem 0 4rem; font:600 clamp(3.5rem,7vw,7rem)/.85 'Playfair Display',serif; letter-spacing:-.07em; } .moment-grid { display:grid; grid-template-columns:repeat(3,1fr); border-top:1px solid rgba(241,238,228,.3); } .moment-grid article { min-height:15rem; padding:1.5rem 1.7rem 1rem 0; border-right:1px solid rgba(241,238,228,.3); } .moment-grid article+article { padding-left:1.7rem; } .moment-grid article:last-child { border:0; } .time { color:#dbb7a1; font:.65rem 'DM Mono',monospace; } h3 { margin:3.8rem 0 .4rem; font:500 1.8rem 'Playfair Display',serif; } .moment-grid p { font-size:.86rem; color:#d7c8bc; }
.cabinet { padding:5rem 11vw 8rem; background:#d9d0bd; } .cabinet__caption { margin:0 0 1.2rem; font:.67rem 'DM Mono',monospace; letter-spacing:.12em; text-transform:uppercase; } .drawers { display:grid; grid-template-columns:repeat(2,1fr); border:1px solid #9e8f82; } .drawer { appearance:none; border:0; border-right:1px solid #9e8f82; border-bottom:1px solid #9e8f82; text-align:left; min-height:7rem; padding:1.1rem 1.4rem; background:#d9d0bd; color:var(--ink); font:500 1.45rem 'Playfair Display',serif; cursor:pointer; transition:background .25s,transform .25s; } .drawer:nth-child(even) { border-right:0; } .drawer:nth-child(n+3) { border-bottom:0; } .drawer:hover,.drawer:focus-visible,.drawer.is-open { background:#e9e2d1; transform:translate(-.22rem,-.22rem); outline:none; box-shadow:.25rem .25rem 0 #9e8f82; } .drawer span { display:block; font:.6rem 'DM Mono',monospace; color:var(--orange); margin-bottom:.45rem; } .drawer i { display:block; overflow:hidden; max-height:0; color:#77675d; font:italic .78rem 'DM Sans',sans-serif; transition:max-height .25s,margin .25s; } .drawer.is-open i { max-height:2rem; margin-top:.5rem; }
.courtyard { position:relative; min-height:38rem; overflow:hidden; background:#c28a68; } .courtyard__shape { position:absolute; width:42rem; height:42rem; border-radius:47% 53% 42% 58% / 51% 43% 57% 49%; background:#805140; right:-7rem; top:-5rem; box-shadow:inset 0 0 0 4rem rgba(79,47,38,.28); } .courtyard__content { position:relative; max-width:35rem; } .courtyard h2 { margin-bottom:2rem; } .courtyard p { line-height:1.7; max-width:25rem; } .section--paper { background:var(--paper); } .visit h2 { margin-bottom:3rem; } .visit__grid { display:grid; grid-template-columns:1.3fr .7fr; gap:4rem; padding-top:2rem; border-top:1px solid var(--line); } .visit__large { font:500 clamp(1.7rem,3vw,2.6rem)/1.15 'Playfair Display',serif; margin:0; } .visit strong { font-size:.82rem; } .visit__grid p:not(.visit__large) { line-height:1.7; font-size:.86rem; } .muted { color:#76685f; font-size:.72rem!important; } .site-footer { padding:2rem 5vw; display:flex; justify-content:space-between; gap:1rem; background:var(--ink); color:#e0d7cf; font-size:.7rem; } .site-footer p { margin:0; }
@media (max-width:700px) { .site-header { height:4.7rem; } .menu-toggle { display:block; color:inherit; background:none; border:0; font: .72rem 'DM Mono',monospace; text-transform:uppercase; } .main-nav { display:none; position:absolute; left:0; right:0; top:4.7rem; flex-direction:column; align-items:stretch; gap:0; background:var(--forest); padding:0 5vw 1.2rem; } .main-nav.is-open { display:flex; } .main-nav a { padding:1rem 0; border-top:1px solid rgba(241,238,228,.2); } .main-nav .nav-cta { border:0; } .hero { min-height:42rem; padding:9rem 7vw 3rem; } .hero h1 { font-size:4.4rem; } .hero__stamp { right:7vw; bottom:2.3rem; width:6.8rem; height:6.8rem; } .section,.cabinet { padding:5rem 7vw; } .story { grid-template-columns:1fr; gap:2.5rem; } .facts { grid-template-columns:repeat(3,1fr); gap:.8rem; } .facts span { font-size:1.45rem; } .facts small { font-size:.62rem; } .moment-grid { grid-template-columns:1fr; } .moment-grid article,.moment-grid article+article { min-height:0; padding:1.3rem 0; border-right:0; border-bottom:1px solid rgba(241,238,228,.3); } .moment-grid article:last-child { border-bottom:0; } h3 { margin:1.5rem 0 .4rem; } .drawers { grid-template-columns:1fr; } .drawer,.drawer:nth-child(even) { border-right:0; border-bottom:1px solid #9e9b8a; } .drawer:last-child { border-bottom:0; } .courtyard { min-height:34rem; } .courtyard__shape { width:28rem; height:28rem; right:-13rem; top:5rem; } .visit__grid { grid-template-columns:1fr; gap:1rem; } .site-footer { display:block; } .site-footer p+p { margin-top:.6rem; } }