:root { --ink: #243833; --muted: #63716b; --paper: #f7f5ef; --sage: #dce5db; --line: #d6d8d0; --coral: #d87b62; } * { box-sizing: border-box; } html { scroll-behavior: smooth; } body { margin: 0; background: var(--paper); color: var(--ink); font-family: "DM Sans", sans-serif; font-size: 16px; line-height: 1.6; } a { color: inherit; text-decoration: none; } .container { width: min(1120px, calc(100% - 48px)); margin: auto; } .header { min-height: 92px; display: flex; align-items: center; justify-content: space-between; gap: 24px; } .brand { font-family: "Newsreader", serif; font-size: 26px; line-height: 1; letter-spacing: -.04em; } .brand span { font-style: italic; } nav { display: flex; gap: 28px; font-size: 14px; } nav a, .header-contact { border-bottom: 1px solid transparent; } nav a:hover, .header-contact:hover { border-color: currentColor; } .header-contact { font-size: 14px; font-weight: 600; } .header-contact span { color: var(--coral); font-size: 18px; } .hero { min-height: 605px; display: grid; grid-template-columns: 1fr .85fr; align-items: center; gap: 80px; padding: 76px 4.5vw 92px; width: min(1320px, 100%); } .eyebrow { color: #718078; font-size: 11px; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; margin: 0 0 18px; } h1, h2, h3 { font-weight: 400; line-height: 1.04; letter-spacing: -.045em; margin: 0; font-family: "Newsreader", serif; } h1 { font-size: clamp(52px, 6vw, 86px); max-width: 690px; } h1 em { font-style: italic; color: #4f796d; } h2 { font-size: clamp(38px, 4vw, 60px); } .lead { font-size: 19px; line-height: 1.55; color: #53625b; max-width: 520px; margin: 31px 0; } .button { display: inline-flex; align-items: center; gap: 24px; padding: 15px 22px; color: white; background: var(--ink); font-size: 14px; font-weight: 600; border-radius: 2px; transition: background .2s, transform .2s; } .button:hover { background: #44655c; transform: translateY(-2px); } .button span { color: #e8c0a8; font-size: 20px; } .hero-art { height: 434px; background: #e5e9df; position: relative; overflow: hidden; border-radius: 190px 190px 0 0; } .sun { position: absolute; width: 170px; height: 170px; right: 17%; top: 20%; border-radius: 50%; background: #edb09b; } .arch { position: absolute; border: 1px solid #839c8b; border-bottom: 0; border-radius: 180px 180px 0 0; bottom: -1px; } .arch-one { width: 74%; height: 60%; left: -14%; } .arch-two { width: 50%; height: 40%; right: -11%; } .stem { position: absolute; width: 1px; background: #5a806b; transform-origin: bottom; bottom: -15px; } .stem-one { height: 260px; left: 43%; transform: rotate(24deg); } .stem-two { height: 180px; left: 54%; transform: rotate(-31deg); } .section { padding: 118px 0; } .about { border-top: 1px solid var(--line); } .about-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10%; } .about-grid > div { color: #56635d; } .about-grid p { margin: 0 0 20px; } .about-grid .intro { color: var(--ink); font-family: "Newsreader", serif; font-size: 27px; line-height: 1.3; letter-spacing: -.025em; } .education { font-size: 14px; padding-top: 10px; border-top: 1px solid var(--line); } .services { background: var(--sage); } .services h2 { margin-bottom: 68px; } .service-list { border-top: 1px solid #b8c6b8; } .service-list article { display: grid; grid-template-columns: 70px 1fr 1fr; padding: 27px 0; border-bottom: 1px solid #b8c6b8; gap: 20px; } .service-list span { font-size: 12px; color: #688070; } h3 { font-size: 29px; } .service-list p { font-size: 14px; color: #53655b; margin: 4px 0; max-width: 360px; } .service-note { font-size: 14px; margin: 22px 0 0; } .booking { display: grid; grid-template-columns: 1fr 1fr; align-items: center; gap: 10%; } .booking h2 { margin-bottom: 15px; } .booking > div > p:not(.eyebrow) { color: #56635d; } .contact-details { display: flex; flex-direction: column; gap: 5px; margin-top: 32px; font-size: 14px; } .contact-details a { text-decoration: underline; text-underline-offset: 4px; } .widget-card { padding: 42px; background: #fffdf9; border: 1px solid #e8e2d9; box-shadow: 10px 10px 0 #e9ddd2; } .widget-card h3 { margin: 7px 0 14px; } .widget-card p:not(.widget-label) { font-size: 14px; margin: 0 0 26px; } .widget-label { color: #718078; font-size: 11px; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; margin: 0; } .journal { display: flex; justify-content: space-between; align-items: end; gap: 64px; padding: 82px 0; border-top: 1px solid var(--line); } .journal > div:last-child { max-width: 360px; color: #56635d; } .text-link { display: inline-block; margin-top: 8px; color: var(--ink); font-weight: 600; font-size: 14px; border-bottom: 1px solid var(--ink); } footer { background: var(--ink); color: #f6f3ed; padding: 50px 0; } .footer-inner { display: flex; align-items: center; gap: 32px; flex-wrap: wrap; font-size: 13px; } .footer-inner p { color: #c2ccc5; margin: 0; } .footer-inner a:not(.brand) { border-bottom: 1px solid #b6c5bc; } .copyright { margin-left: auto !important; } .articles { min-height: calc(100vh - 204px); padding: 120px 0; } .articles h1 { margin-bottom: 26px; }
.location { background: #ebe7dd; } .location-grid { display: grid; grid-template-columns: .8fr 1.2fr; gap: 10%; align-items: center; } .location h2 { margin-bottom: 24px; } .location address { font-family: "Newsreader", serif; font-size: 29px; line-height: 1.2; font-style: normal; letter-spacing: -.03em; } .location p:not(.eyebrow) { color: #56635d; font-size: 14px; max-width: 330px; margin: 25px 0 0; } .map { display: block; width: 100%; height: 400px; border: 0; filter: saturate(.65) contrast(.9); }
.about-portrait { width: 172px; height: 172px; overflow: hidden; border-radius: 50%; margin: 0 0 34px; background: #e5e9df; } .about-portrait img { width: 100%; height: 100%; object-fit: cover; object-position: center; } .journal { align-items: start; } .journal-list { width: min(100%, 640px); } .journal-article { display: block; padding: 32px 0; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); } .journal-article h2 { font-size: clamp(30px, 3vw, 44px); max-width: 560px; } .journal-article > p:not(.eyebrow) { max-width: 520px; margin: 15px 0 8px; color: #56635d; } .all-articles { margin-top: 22px; }
.article { max-width: 820px; padding: 80px 0 110px; } .article h1 { max-width: 780px; margin: 26px 0; } .back-link { display: inline-block; margin-bottom: 80px; font-size: 14px; border-bottom: 1px solid var(--ink); } .article-lead { max-width: 670px; color: #53625b; font-family: "Newsreader", serif; font-size: 27px; line-height: 1.35; letter-spacing: -.025em; } .article-body { max-width: 650px; margin: 65px auto; } .article-body h2 { font-size: 36px; margin: 58px 0 18px; } .article-body p { color: #485850; margin: 0 0 20px; } .article-note { margin-top: 48px; padding: 24px 28px; background: var(--sage); } .article-note p { margin: 0; } .article-cta { padding: 42px; background: #ebe7dd; } .article-cta h2 { font-size: 42px; margin-bottom: 14px; } .article-cta > p:not(.eyebrow) { max-width: 480px; color: #53625b; } .article-list { min-height: calc(100vh - 204px); padding: 100px 0; } .article-card { display: block; max-width: 760px; padding: 38px; background: #e5e9df; transition: transform .2s, background .2s; } .article-card:hover { background: #dce5db; transform: translateY(-3px); } .article-card h1 { font-size: clamp(38px, 4vw, 54px); max-width: 620px; } .article-card > p:not(.eyebrow) { color: #53625b; max-width: 480px; margin: 17px 0 7px; }
@media (max-width: 700px) { .container { width: min(100% - 32px, 1120px); } .header { min-height: 74px; } nav { display: none; } .hero { min-height: auto; padding: 60px 16px 76px; display: block; } .hero-art { height: 290px; margin-top: 52px; } .section { padding: 75px 0; } .about-grid, .booking, .location-grid { grid-template-columns: 1fr; gap: 36px; } .services h2 { margin-bottom: 42px; } .service-list article { grid-template-columns: 32px 1fr; gap: 8px 14px; } .service-list article p { grid-column: 2; margin-top: 2px; } .widget-card { padding: 29px; } .map { height: 300px; } .journal { display: block; padding: 65px 0; } .journal > div:last-child { margin-top: 30px; } .footer-inner { display: block; } .footer-inner > * { display: block; margin: 14px 0 !important; } .copyright { padding-top: 18px; } }