:root {
  color-scheme: light;
  --cream: #f5f1e8;
  --evergreen: #173c33;
  --secondary: #526159;
  --gold: #9a804e;
  --rule: #d5d5c8;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  color: var(--evergreen);
  background: var(--cream);
  font-synthesis: none;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
}

* { box-sizing: border-box; }
body { margin: 0; }
p { margin: 0; }
::selection { color: var(--cream); background: var(--evergreen); }

.page-shell {
  width: min(1320px, calc(100% - 112px));
  min-height: 100vh;
  min-height: 100svh;
  margin-inline: auto;
  display: flex;
  flex-direction: column;
}

.site-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  padding-block: 34px 28px;
  border-bottom: 1px solid var(--rule);
}

.wordmark {
  display: flex;
  align-items: center;
  gap: 15px;
  font-family: "Iowan Old Style", "Baskerville", "Palatino Linotype", Georgia, serif;
  font-size: 29px;
  letter-spacing: -.025em;
  white-space: nowrap;
}

.firm { font-style: italic; }
.brand-mark {
  width: 37px;
  height: 42px;
  display: grid;
  place-items: center;
  padding-top: 1px;
  border: 1px solid var(--gold);
  font-size: 27px;
  font-style: normal;
}

.practice-label, .eyebrow, .notice-label, .domain {
  font-size: 11px;
  font-weight: 500;
  line-height: 1.5;
  letter-spacing: .16em;
  text-transform: uppercase;
}

.practice-label { color: var(--secondary); }
.hero {
  flex: 1;
  display: grid;
  grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr);
  align-items: center;
  column-gap: 40px;
  padding-block: 78px 86px;
}

.hero-copy { position: relative; z-index: 1; }
.eyebrow {
  display: flex;
  align-items: center;
  gap: 12px;
  color: var(--secondary);
  margin-bottom: 26px;
}

.eyebrow span { width: 30px; height: 1px; background: var(--gold); }
h1 {
  max-width: 720px;
  margin: 0;
  font-family: "Iowan Old Style", "Baskerville", "Palatino Linotype", Georgia, serif;
  font-size: clamp(64px, 7.45vw, 108px);
  font-weight: 400;
  letter-spacing: -.055em;
  line-height: 1.02;
  text-wrap: balance;
}

.introduction {
  margin-top: 29px;
  font-size: 17px;
  line-height: 1.7;
  letter-spacing: .005em;
  color: var(--secondary);
}

.launch-notice {
  margin-top: 48px;
  padding-left: 21px;
  border-left: 1px solid var(--gold);
}

.notice-label { margin-bottom: 9px; font-size: 10px; }
.launch-notice > p:last-child { color: var(--secondary); font-size: 14px; line-height: 1.75; }
.hero-art { width: 100%; max-width: 490px; justify-self: end; margin-top: 22px; }
.hero-art svg { display: block; width: 100%; height: auto; overflow: visible; }
.site-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  padding-block: 23px 29px;
  border-top: 1px solid var(--rule);
  color: var(--secondary);
  font-size: 11px;
  line-height: 1.6;
}

.domain { font-size: 10px; letter-spacing: .13em; }
.skip-link {
  position: fixed;
  z-index: 10;
  top: 12px;
  left: 12px;
  padding: 12px 18px;
  transform: translateY(-150%);
  color: var(--cream);
  background: var(--evergreen);
}
.skip-link:focus { transform: none; outline: 2px solid var(--gold); outline-offset: 3px; }

@media (min-width: 1600px) {
  .hero { padding-block: 100px; }
}

@media (max-width: 1000px) {
  .page-shell { width: calc(100% - 72px); }
  .hero { column-gap: 16px; padding-block: 72px; }
  h1 { font-size: clamp(60px, 7.5vw, 78px); }
  .hero-art { width: 112%; max-width: none; }
}

@media (max-width: 700px) {
  .page-shell { width: calc(100% - 44px); }
  .site-header { gap: 14px; padding-block: 24px; }
  .wordmark { gap: 10px; font-size: 24px; }
  .brand-mark { width: 29px; height: 34px; font-size: 22px; }
  .practice-label { max-width: 100px; font-size: 9px; letter-spacing: .13em; text-align: right; }
  .hero { grid-template-columns: 1fr; gap: 22px; padding-block: 58px 28px; }
  .eyebrow { font-size: 9px; margin-bottom: 23px; }
  h1 { max-width: 540px; font-size: clamp(55px, 12vw, 78px); line-height: 1.04; }
  .introduction { margin-top: 25px; font-size: 15px; }
  .launch-notice { margin-top: 34px; padding-left: 17px; }
  .launch-notice > p:last-child { font-size: 13px; }
  .hero-art { justify-self: center; width: min(100%, 340px); margin-top: 0; }
  .site-footer { padding-block: 21px 24px; font-size: 10px; gap: 12px; }
  .domain { font-size: 9px; }
}

@media (max-width: 360px) {
  .page-shell { width: calc(100% - 32px); }
  .wordmark { gap: 8px; font-size: 22px; }
  h1 { font-size: 51px; }
  .notice-break { display: none; }
}

@media (prefers-contrast: more) {
  :root { --secondary: #173c33; --rule: #7b8275; }
}