:root {
  --cream: #F4EDE1; --blueprint: #2E4A6B; --amber: #F0A83C; --terracotta: #C96F4A;
  --sitegreen: #7C9A6D; --ink: #22303C; --ink-soft: #5C6B76;
}
* { box-sizing: border-box; }
body {
  margin: 0; background: var(--cream); color: var(--ink);
  font-family: 'Inter', -apple-system, sans-serif; font-size: 17px; line-height: 1.7;
  -webkit-font-smoothing: antialiased;
}
h1, h2, h3 { font-family: 'Fraunces', Georgia, serif; line-height: 1.15; }
a { color: var(--blueprint); }
.note-wrap { max-width: 720px; margin: 0 auto; padding: 0 22px; }
.note-nav { padding: 26px 0 0; font-size: .9rem; }
article { padding: 40px 0 80px; }
.kicker { font-size: .78rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--sitegreen); margin: 0 0 12px; }
h1 { font-size: clamp(1.9rem, 4.5vw, 2.7rem); font-weight: 700; letter-spacing: -.01em; margin: 0 0 14px; }
.byline { color: var(--ink-soft); font-size: .92rem; margin: 0 0 36px; }
h2 { font-size: 1.45rem; margin: 42px 0 12px; }
p { margin: 0 0 18px; }
ul, ol { margin: 0 0 18px; padding-left: 24px; }
li { margin-bottom: 8px; }
.callout {
  background: #fff; border-left: 4px solid var(--amber); border-radius: 0 14px 14px 0;
  padding: 18px 22px; margin: 26px 0; font-size: .96rem;
}
.note-cta {
  background: var(--blueprint); color: #eaf0f7; border-radius: 20px;
  padding: 30px; margin-top: 48px; text-align: center;
}
.note-cta h2 { color: #fff; margin: 0 0 8px; font-size: 1.4rem; }
.note-cta p { color: #c4d2e2; margin: 0 0 18px; font-size: .95rem; }
.note-cta a.btn {
  display: inline-block; background: var(--amber); color: var(--ink); font-weight: 700;
  padding: 13px 26px; border-radius: 999px; text-decoration: none;
}
footer { padding: 30px 0 44px; color: var(--ink-soft); font-size: .88rem; text-align: center; }