:root {
  --cream: #f7f4ec;
  --cream-strong: #ece6d8;
  --navy: #0b1f3a;
  --navy-soft: #31445d;
  --ink: #101010;
  --line: #c9c1b4;
  --serif: "Cormorant Garamond", Georgia, serif;
  --mono: "DM Mono", "Courier New", monospace;
}
* { box-sizing: border-box; }
html { min-height: 100%; }
body { min-height: 100vh; margin: 0; color: var(--ink); background: var(--cream); font-family: var(--serif); font-size: 18px; line-height: 1.5; }
a { color: inherit; text-decoration: none; }
.site-header { width: min(1180px, calc(100% - 80px)); margin: 0 auto; border-bottom: 1px solid var(--line); }
.header-main { min-height: 190px; display: flex; align-items: center; gap: 31px; padding: 20px 0; }
.profile-link { display: block; width: 150px; height: 150px; flex: 0 0 150px; }
.profile-photo { display: block; width: 150px; height: 150px; border: 2px solid var(--navy); border-radius: 50%; object-fit: cover; object-position: center; }
.headline { padding: 7px 0; color: var(--navy); }
.headline p { margin: 0; }
.headline-title { font-size: clamp(37px, 4vw, 62px); font-weight: 600; letter-spacing: -.058em; line-height: .78; }
.headline-subtitle { margin-top: 12px !important; font: 500 clamp(13px, 1.5vw, 18px)/1.15 var(--mono); letter-spacing: .035em; text-transform: uppercase; }
.headline-statement { max-width: 570px; margin-top: 11px !important; color: black; font-size: clamp(18px, 2vw, 26px); line-height: 1.05; }
.headline-statement u { text-underline-offset: 4px; text-decoration-thickness: 1px; }
.desktop-menu { display: flex; min-height: 48px; align-items: center; gap: clamp(18px, 3vw, 48px); padding: 13px 20px 14px; color: var(--navy); background: var(--cream-strong); border-top: 1px solid #ddd4c5; }
.menu-label { margin-right: auto; font: 500 11px/1 var(--mono); letter-spacing: .12em; text-transform: uppercase; }
.desktop-menu a { padding: 3px 0; color: var(--navy-soft); font: 400 12px/1.2 var(--mono); letter-spacing: .015em; transition: color 170ms ease; }
.desktop-menu a:hover, .desktop-menu a.active { color: var(--navy); }
.desktop-menu a.active::before { content: "— "; }
main { width: min(1180px, calc(100% - 80px)); min-height: calc(100vh - 238px); margin: 0 auto; padding: clamp(56px, 8vw, 125px) 0 95px; }
.eyebrow { margin: 0 0 20px; color: var(--navy-soft); font: 400 11px/1.2 var(--mono); letter-spacing: .12em; text-transform: uppercase; }
.hero { min-height: min(62vh, 630px); display: flex; flex-direction: column; justify-content: center; border-bottom: 1px solid var(--line); }
.hero h1, .contact-page h1 { max-width: 900px; margin: 0; color: var(--ink); font-size: clamp(56px, 8vw, 122px); font-style: italic; font-weight: 400; letter-spacing: -.066em; line-height: .84; }
.intro { max-width: 620px; margin: 34px 0 0; color: #3e4145; font-size: clamp(21px, 2vw, 29px); line-height: 1.16; }
.fundamentals { padding-top: 14px; }
.section-heading { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 28px; align-items: end; padding-bottom: 25px; border-bottom: 2px solid var(--navy); }
.section-heading h1 { margin: 0; color: var(--navy); font-size: clamp(48px, 6vw, 88px); font-weight: 500; letter-spacing: -.058em; line-height: .88; }
.section-heading > p { max-width: 260px; margin: 0; color: var(--navy-soft); font-size: 17px; line-height: 1.2; }
.articles { margin-top: 8px; }
.article { display: grid; grid-template-columns: 140px minmax(185px, .85fr) minmax(0, 1.65fr); gap: 27px; padding: 32px 0 35px; border-bottom: 1px solid var(--line); }
.article-meta { color: var(--navy-soft); font: 400 11px/1.45 var(--mono); letter-spacing: .03em; text-transform: uppercase; }
.article-category { display: block; margin-top: 8px; color: var(--navy); }
.article h2 { margin: 0; color: var(--navy); font-size: clamp(29px, 2.7vw, 43px); font-weight: 500; letter-spacing: -.042em; line-height: .94; }
.article p { max-width: 560px; margin: 2px 0 0; color: #30353a; font-size: 19px; line-height: 1.39; }
.contact-page { max-width: 940px; padding-top: clamp(18px, 3vw, 45px); }
.contact-page h1 { color: var(--navy); }
.contact-intro { max-width: 570px; margin: 31px 0 55px; color: #3e4145; font-size: clamp(21px, 2vw, 28px); line-height: 1.18; }
.contact-form {
    max-width: 640px;
    display: flex;
    flex-direction: column;
    gap: 28px;
    padding-top: 30px;
    border-top: 2px solid var(--navy);
}

.cf-turnstile {
    margin-top: 4px;
}
.form-field { width: 100%; }
.form-field label { color: var(--navy); font: 400 11px/1.2 var(--mono); letter-spacing: .1em; text-transform: uppercase; }
.form-field input { width: 100%; appearance: none; border: 0; border-bottom: 1px solid #8d8a82; border-radius: 0; outline: none; padding: 7px 0 10px; color: var(--navy); background: transparent; font: 400 25px/1.05 var(--serif); }
.form-field input:focus { border-bottom-color: var(--navy); }
.contact-form button { width: max-content; grid-column: 1 / -1; margin-top: 14px; border: 1px solid var(--navy); padding: 14px 20px; color: var(--cream); background: var(--navy); cursor: pointer; font: 400 12px/1 var(--mono); letter-spacing: .04em; }
.contact-form button:hover, .contact-form button:focus { color: var(--navy); background: transparent; }
.contact-form button span { margin-left: 15px; font-size: 16px; }
.mobile-nav { display: none; }
@media (min-width: 761px) and (max-width: 980px) { .site-header, main { width: min(100% - 48px, 880px); } .header-main { min-height: 160px; gap: 23px; } .profile-link, .profile-photo { width: 130px; height: 130px; flex-basis: 130px; } .headline-title { font-size: 44px; } .headline-subtitle { font-size: 12px; } .headline-statement { font-size: 21px; } .desktop-menu { gap: 20px; } .section-heading { display: block; } .section-heading > p { margin-top: 18px; } .article { display: block; padding: 27px 0 29px; } .article-meta { margin-bottom: 14px; } .article-category { display: inline; margin: 0 0 0 10px; } .article h2 { font-size: 36px; } .article p { margin-top: 15px; } }
@media (max-width: 760px) { body { padding-bottom: calc(76px + env(safe-area-inset-bottom)); } .site-header { width: 100%; margin: 0; border-bottom: 1px solid var(--line); } .header-main { min-height: 74px; padding: 14px 20px; gap: 12px; } .profile-link, .profile-photo { width: 40px; height: 40px; flex: 0 0 40px; } .profile-photo { border-width: 1px; } .headline { padding: 0; } .headline-title { display: inline; font-size: 25px; line-height: 1; } .headline-title::after { content: " "; } .headline-subtitle { display: inline; margin: 0 !important; font: 500 10px/1 var(--mono); letter-spacing: .02em; text-transform: uppercase; } .headline-statement { display: none; } .desktop-menu { display: none; } main { width: 100%; min-height: auto; padding: 38px 22px 55px; } .hero { min-height: calc(100svh - 150px); } .hero h1, .contact-page h1 { font-size: clamp(55px, 16vw, 78px); line-height: .86; } .intro { margin-top: 26px; font-size: 22px; } .fundamentals { padding-top: 7px; } .section-heading { display: block; padding-bottom: 21px; } .section-heading h1 { font-size: 52px; } .section-heading > p { margin-top: 20px; } .article { display: block; padding: 27px 0 29px; } .article-meta { margin-bottom: 14px; } .article-category { display: inline; margin: 0 0 0 10px; } .article h2 { font-size: 34px; } .article p { margin-top: 15px; font-size: 18px; line-height: 1.42; } .contact-page { padding-top: 9px; } .contact-intro { margin: 26px 0 43px; font-size: 22px; } .contact-form { display: block; padding-top: 24px; } .form-field { margin-bottom: 28px; } .form-field input { font-size: 24px; } .contact-form button { width: 100%; margin-top: 2px; } .mobile-nav { position: fixed; z-index: 20; right: 0; bottom: 0; left: 0; display: grid; grid-template-columns: repeat(3, 1fr); padding: 8px 7px calc(8px + env(safe-area-inset-bottom)); border-top: 1px solid #d5cdbd; background: var(--cream-strong); } .mobile-nav a { display: flex; min-height: 51px; flex-direction: column; align-items: center; justify-content: center; gap: 4px; color: var(--navy-soft); font: 400 9px/1 var(--mono); letter-spacing: .02em; text-align: center; } .mobile-nav a.active, .mobile-nav a:hover, .mobile-nav a:focus { color: var(--navy); } .nav-icon { width: 18px; height: 18px; stroke: currentColor; stroke-width: 1.5; fill: none; stroke-linecap: round; stroke-linejoin: round; } }

.form-field textarea {
    display: block;
    width: 100%;
    min-height: 150px;
    resize: vertical;

    appearance: none;
    -webkit-appearance: none;

    padding: 10px 0;
    border: 0;
    border-bottom: 1px solid #8d8a82;
    border-radius: 0;
    outline: none;

    color: var(--navy);
    background: transparent;

    font: 400 25px/1.3 var(--serif);
    transition: border-color 160ms ease;
}

.form-field textarea::placeholder {
    color: #8d8a82;
    opacity: 1;
}

.form-field textarea:focus {
    border-bottom-color: var(--navy);
}