:root {
  color-scheme: light;
  --paper: #f7f0e5;
  --paper-deep: #ead8bb;
  --ink: #171514;
  --muted: #625d57;
  --line: #c8b89e;
  --white: #fffdf9;
}

* { box-sizing: border-box; }

html { font-family: ui-serif, Georgia, Cambria, "Times New Roman", serif; background: var(--paper); color: var(--ink); }
body { margin: 0; min-height: 100vh; }
a { color: inherit; text-underline-offset: 4px; }

.shell { width: min(760px, calc(100% - 36px)); margin: 0 auto; }
.site-header { display: flex; align-items: center; justify-content: space-between; gap: 24px; padding: 22px 0; border-bottom: 1px solid var(--line); }
.brand { display: flex; align-items: center; gap: 12px; text-decoration: none; font-family: ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; font-weight: 800; letter-spacing: -0.02em; }
.brand img { width: 46px; height: 46px; border-radius: 11px; }
.nav { display: flex; gap: 18px; font: 650 0.9rem/1.3 ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; }
.nav a { text-decoration: none; }
.nav a:hover, .nav a:focus-visible { text-decoration: underline; }

main { padding: 72px 0 80px; }
.eyebrow { margin: 0 0 14px; font: 800 0.75rem/1.2 ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; letter-spacing: 0.14em; text-transform: uppercase; }
h1 { max-width: 680px; margin: 0; font-size: clamp(2.6rem, 8vw, 5rem); line-height: 0.98; letter-spacing: -0.055em; }
.lede { max-width: 630px; margin: 25px 0 0; color: var(--muted); font-size: 1.18rem; line-height: 1.65; }

.cards { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; margin-top: 42px; }
.card { min-height: 185px; padding: 25px; border: 1px solid var(--line); border-radius: 18px; background: color-mix(in srgb, var(--white) 70%, transparent); text-decoration: none; }
.card:hover, .card:focus-visible { background: var(--white); border-color: var(--ink); }
.card h2 { margin: 0; font-size: 1.45rem; }
.card p { margin: 12px 0 22px; color: var(--muted); font: 1rem/1.55 ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; }
.arrow { font: 800 1rem/1 ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; }

.article { max-width: 680px; }
.article h1 { font-size: clamp(2.7rem, 7vw, 4.6rem); }
.acknowledgments h1 { font-size: clamp(2rem, 6.5vw, 4.6rem); overflow-wrap: anywhere; }
.article h2 { margin: 42px 0 12px; font-size: 1.55rem; letter-spacing: -0.025em; }
.article p, .article li { color: #383431; font: 1.04rem/1.7 ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; }
.article ul { padding-left: 22px; }
.meta { margin-top: 18px; color: var(--muted); font: 0.9rem/1.5 ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; }
.contact { display: inline-flex; margin-top: 10px; padding: 13px 17px; border: 1px solid var(--ink); border-radius: 999px; background: var(--ink); color: var(--white); font: 750 0.95rem/1 ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; text-decoration: none; }
.contact:hover, .contact:focus-visible { background: transparent; color: var(--ink); }
.note { margin-top: 38px; padding: 20px 22px; border-left: 4px solid var(--ink); background: var(--paper-deep); }
.note p { margin: 0; }

footer { padding: 25px 0 35px; border-top: 1px solid var(--line); color: var(--muted); font: 0.84rem/1.5 ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; }

@media (max-width: 620px) {
  .site-header { align-items: flex-start; }
  .brand span { max-width: 110px; }
  .nav { gap: 12px; padding-top: 7px; }
  main { padding-top: 52px; }
  .cards { grid-template-columns: 1fr; }
}