@font-face { font-family: "Instrument Serif"; src: url("assets/fonts/InstrumentSerif-Regular.ttf") format("truetype"); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: "Manrope"; src: url("assets/fonts/Manrope-Regular.ttf") format("truetype"); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: "Manrope"; src: url("assets/fonts/Manrope-Medium.ttf") format("truetype"); font-weight: 500; font-style: normal; font-display: swap; }
:root {
  --paper: #F3F0E5;
  --evergreen: #203D35;
  --ink: #202820;
  --leaf: #D7E5B4;
  --kiln: #D45232;
  --rule: #A0AD99;
  --gutter: 4.82vw;
  --display: "Instrument Serif", Georgia, serif;
  --body: "Manrope", Arial, sans-serif;
}
* { box-sizing: border-box; }
html { scroll-padding-top: 28px; background: var(--paper); }
body { margin: 0; color: var(--evergreen); font-family: var(--body); font-weight: 400; -webkit-font-smoothing: antialiased; }
img, svg { display: block; }
img { max-width: 100%; }
a { color: inherit; text-decoration-thickness: 1px; text-underline-offset: .25em; }
a:focus-visible { outline: 2px solid var(--evergreen); outline-offset: 6px; }
::selection { background: var(--leaf); color: var(--evergreen); }
html { scrollbar-color: var(--evergreen) var(--paper); scrollbar-width: thin; }
::-webkit-scrollbar { width: 8px; }
::-webkit-scrollbar-track { background: var(--paper); }
::-webkit-scrollbar-thumb { background: var(--evergreen); border: 2px solid var(--paper); }
.skip-link { position: absolute; z-index: 10; top: 12px; left: var(--gutter); padding: 12px 18px; background: var(--evergreen); color: var(--paper); transform: translateY(-160%); }
.skip-link:focus { transform: none; outline-color: var(--evergreen); }
.masthead { height: 5.2083vw; padding: 0 var(--gutter); display: flex; align-items: center; justify-content: space-between; gap: 32px; }
.wordmark { display: block; width: 15.95vw; flex-shrink: 0; }
.wordmark img { width: 100%; height: auto; }
.masthead nav { display: flex; gap: 3.4vw; align-items: center; font-size: clamp(16px, 1.1068vw, 20px); padding-right: 1.69vw; position: relative; top: .52vw; }
.masthead nav a { padding: 10px 0; text-decoration: none; }
.masthead nav a:hover { text-decoration: underline; }
.hero { display: grid; grid-template-columns: 62.5% 37.5%; min-height: 41.54vw; border-bottom: 1px solid var(--rule); }
.hero-copy { padding: 4.4vw 2vw 3.78vw var(--gutter); }
h1, h2, h3, p { margin: 0; }
h1 { font: 400 8.8vw/1.03 var(--display); letter-spacing: -.024em; }
h1 span { display: block; white-space: nowrap; }
.hero-description { margin-top: 1.88vw; font-size: 2.34vw; line-height: 1.26; letter-spacing: -.025em; }
.email-button { display: inline-flex; align-items: center; justify-content: space-between; gap: 28px; margin-top: 2.78vw; min-width: 17.06vw; min-height: 4.56vw; padding: 1.04vw 1.89vw; color: var(--paper); background: var(--evergreen); font-size: 1.43vw; line-height: 1.3; text-decoration: none; }
.email-button svg { flex-shrink: 0; width: 2.08vw; height: auto; }
.email-button:focus-visible { outline-color: var(--evergreen); }
.brand-panel { background: var(--leaf); }
.brand-signature { width: 100%; height: 100%; position: relative; }
.brand-signature img { position: absolute; top: 10.55vw; left: 50%; transform: translateX(-50%); width: 16.93vw; height: auto; }
.brand-signature p { position: absolute; top: 26vw; left: 50%; transform: translateX(-50%); font: 400 3vw/1.1 var(--display); white-space: nowrap; letter-spacing: -.018em; }
.work { padding: 1.42vw var(--gutter) 3vw; }
.work > h2 { font: 500 .91vw/1.5 var(--body); letter-spacing: .22em; text-transform: uppercase; }
.chapters { display: grid; grid-template-columns: 31.44% 33.99% 34.57%; margin-top: 1.64vw; }
.chapter { padding-right: 2vw; }
.chapter + .chapter { border-left: 1px solid #B8C1AC; padding-left: 3.5vw; }
.chapter:last-child { padding-right: 0; }
.chapter-number { display: block; font: 400 2.86vw/1 var(--display); font-variant-numeric: lining-nums; }
.chapter:first-child .chapter-number { color: #647C43; }
.chapter:last-child .chapter-number { color: var(--kiln); }
.chapter h3 { margin-top: .27vw; font: 400 4.42vw/1.1 var(--display); letter-spacing: -.015em; }
.chapter p { margin-top: .35vw; color: var(--evergreen); font-size: 1.57vw; line-height: 1.34; letter-spacing: -.024em; }
.company { display: grid; grid-template-columns: 1.15fr 1fr; gap: 9vw; align-items: center; padding: 7vw var(--gutter); border-top: 1px solid var(--rule); }
.company h2 { font: 400 5.6vw/1.04 var(--display); letter-spacing: -.025em; }
.company > p { color: var(--ink); max-width: 38ch; font-size: clamp(20px, 1.7vw, 28px); line-height: 1.6; }
.contact { display: grid; grid-template-columns: 1.4fr 1fr; gap: 10vw; align-items: center; background: var(--evergreen); color: var(--paper); padding: 7vw var(--gutter) 7.5vw; }
.contact h2 { max-width: 17ch; font: 400 6vw/1.04 var(--display); letter-spacing: -.024em; }
.contact-invitation > p { max-width: 30ch; font-size: clamp(20px, 1.7vw, 28px); line-height: 1.55; }
.email-link { display: inline-flex; gap: 24px; align-items: center; padding: 10px 0; margin-top: 28px; font-size: clamp(20px, 1.7vw, 28px); }
.contact-address { display: block; margin-top: 14px; font-size: 16px; color: var(--leaf); }
.contact a:focus-visible { outline-color: var(--paper); }
.footer { display: flex; align-items: center; justify-content: space-between; gap: 20px; padding: 28px var(--gutter); font-size: 14px; }
.footer a { padding: 10px 0; }

@media (prefers-reduced-motion: no-preference) {
  html { scroll-behavior: smooth; }
  .email-button svg, .email-link svg { transition: transform 180ms cubic-bezier(.16, 1, .3, 1); }
  .email-button:hover svg, .email-link:hover svg { transform: translateX(4px); }
}

@media (max-width: 900px) {
  :root { --gutter: 32px; }
  .masthead { height: 88px; }
  .wordmark { width: 200px; }
  .masthead nav { gap: 24px; padding-right: 0; top: 0; font-size: 16px; }
  .hero { grid-template-columns: 1fr; }
  .hero-copy { padding: 48px var(--gutter) 56px; }
  h1 { font-size: clamp(56px, 11vw, 96px); line-height: 1.02; }
  h1 span { white-space: normal; }
  .hero-description { max-width: 35ch; margin-top: 28px; font-size: 22px; line-height: 1.5; letter-spacing: -.015em; }
  .desktop-break { display: none; }
  .email-button { margin-top: 28px; min-width: 224px; min-height: 56px; padding: 16px 24px; font-size: 17px; }
  .email-button svg { width: 28px; }
  .brand-panel { padding: 44px var(--gutter) 48px; }
  .brand-signature { display: flex; flex-direction: column; align-items: center; position: static; }
  .brand-signature img { position: static; transform: none; width: 216px; }
  .brand-signature p { position: static; transform: none; margin-top: -4px; font-size: 40px; }
  .work { padding: 32px var(--gutter) 48px; }
  .work > h2 { font-size: 14px; }
  .chapters { grid-template-columns: 1fr; margin-top: 32px; }
  .chapter { padding: 0 0 32px; }
  .chapter + .chapter { border-left: 0; border-top: 1px solid var(--rule); padding: 28px 0 32px; }
  .chapter:last-child { padding-bottom: 0; }
  .chapter-number { font-size: 34px; }
  .chapter h3 { margin-top: 8px; font-size: 52px; }
  .chapter p { max-width: 44ch; margin-top: 12px; font-size: 20px; line-height: 1.5; letter-spacing: -.015em; }
  .company { grid-template-columns: 1fr; gap: 28px; padding: 56px var(--gutter); }
  .company h2 { font-size: 60px; }
  .company > p { font-size: 21px; }
  .contact { grid-template-columns: 1fr; gap: 32px; padding: 56px var(--gutter) 60px; }
  .contact h2 { max-width: 19ch; font-size: 64px; }
  .contact-invitation > p { font-size: 21px; }
  .email-link { font-size: 21px; }
}

@media (max-width: 600px) {
  :root { --gutter: 24px; }
  .masthead { height: auto; padding: 20px var(--gutter) 12px; flex-direction: column; align-items: flex-start; gap: 10px; }
  .wordmark { width: 178px; }
  .masthead nav { font-size: 14px; gap: 26px; }
  .masthead nav a { padding: 12px 0; }
  .hero-copy { padding-top: 32px; padding-bottom: 40px; }
  h1 { font-size: clamp(48px, 14.4vw, 72px); }
  .hero-description { margin-top: 24px; font-size: 18px; }
  .brand-panel { padding-top: 28px; padding-bottom: 38px; }
  .brand-signature img { width: 192px; }
  .brand-signature p { font-size: clamp(30px, 8.7vw, 40px); }
  .chapter h3 { font-size: 48px; }
  .chapter p { font-size: 18px; }
  .company h2 { font-size: 52px; }
  .company > p, .contact-invitation > p { font-size: 18px; }
  .contact h2 { font-size: 58px; }
  .contact-address { font-size: 14px; }
  .footer { font-size: 12px; padding-top: 20px; padding-bottom: 20px; }
}