:root {
  color-scheme: light;
  --page: #f4f4f1;
  --surface: #fff;
  --text: #171717;
  --muted: #6c6b68;
  --line: #d5d4cf;
  --primary: #e65700;
  --primary-dark: #a63c00;
  --primary-soft: rgba(230, 87, 0, .09);
  --mono: "SFMono-Regular", Menlo, Monaco, Consolas, monospace;
  --serif: "Iowan Old Style", "Palatino Linotype", Palatino, Georgia, serif;
  --sans: ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

* { box-sizing: border-box; }
html { background: var(--page); }
body { margin: 0; color: var(--text); background: var(--page); font: 16px/1.7 var(--sans); -webkit-font-smoothing: antialiased; }
a { color: var(--primary-dark); text-underline-offset: 3px; }

.site-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: 116px;
  padding: 0 max(32px, calc((100vw - 1180px) / 2));
  border-bottom: 1px solid var(--line);
  background: var(--surface);
}

.brand { display: inline-flex; align-items: center; gap: 7px; color: var(--text); font: 500 38px/1 var(--serif); letter-spacing: -.04em; text-decoration: none; }
.brand-mark { width: 20px; height: 20px; border: 6px solid var(--primary); border-left-color: transparent; transform: rotate(45deg); }
nav { display: flex; align-items: center; gap: 26px; }
nav a { color: var(--text); font-weight: 700; text-decoration: none; }
.button-link { padding: 12px 16px; border: 1px solid rgba(230,87,0,.5); border-radius: 9px; background: var(--primary-soft); color: var(--primary-dark); }

main { display: grid; grid-template-columns: minmax(260px, 360px) minmax(0, 720px); gap: 90px; width: min(1180px, calc(100% - 64px)); margin: 0 auto; padding: 92px 0 120px; }
.page-intro { position: sticky; top: 40px; align-self: start; }
.eyebrow { margin: 0 0 20px; color: var(--primary-dark); font: 600 12px/1.4 var(--mono); letter-spacing: .15em; text-transform: uppercase; }
.eyebrow::before { display: inline-block; width: 7px; height: 7px; margin-right: 10px; border-radius: 50%; background: var(--primary); content: ""; vertical-align: 1px; }
h1 { margin: 0; font: 500 clamp(50px, 6vw, 76px)/.98 var(--serif); letter-spacing: -.05em; }
.summary { margin: 28px 0 0; color: var(--muted); font-size: 18px; }
.effective { margin: 30px 0 0; color: var(--muted); font: 600 11px/1.4 var(--mono); letter-spacing: .1em; text-transform: uppercase; }
article { overflow: hidden; border: 1px solid var(--line); border-radius: 16px; background: var(--surface); box-shadow: 0 24px 72px rgba(38,35,31,.08); }
section { padding: 34px 38px; }
section + section { border-top: 1px solid var(--line); }
h2 { margin: 0 0 13px; font-size: 25px; line-height: 1.2; letter-spacing: -.03em; }
p { margin: 0; color: var(--muted); }
p + p { margin-top: 16px; }
ul { margin: 14px 0 0; padding-left: 22px; color: var(--muted); }
li + li { margin-top: 8px; }
strong { color: var(--text); }
footer { display: flex; justify-content: space-between; gap: 30px; padding: 30px max(32px, calc((100vw - 1180px) / 2)); border-top: 1px solid var(--line); color: var(--muted); font-size: 13px; }

@media (max-width: 850px) {
  main { grid-template-columns: 1fr; gap: 48px; width: min(100% - 32px, 720px); padding-top: 60px; }
  .page-intro { position: static; }
}

@media (max-width: 560px) {
  .site-header { min-height: 94px; padding: 0 18px; }
  .brand { font-size: 30px; }
  nav > a:first-child { display: none; }
  section { padding: 28px 22px; }
  footer { flex-direction: column; padding: 26px 18px; }
}