:root { --ink: #13213A; --paper: #F7F6F2; --paper-2: #EEECE5; --fg: #1B2230; --muted: #5B6271; --line: #D9D6CC; --brass: #9A7424; --display: "Fraunces", Georgia, serif; --body: "IBM Plex Sans", -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; } * { box-sizing: border-box; } html, body { margin: 0; } body { background: var(--paper); color: var(--fg); font-family: var(--body); font-size: 17px; line-height: 1.55; } a { color: var(--brass); } .wrap { max-width: 980px; margin: 0 auto; padding-inline: 20px; } header.top { background: var(--ink); color: #F4F1E8; } header.top .wrap { display: flex; justify-content: space-between; align-items: center; padding-block: 18px; gap: 16px; flex-wrap: wrap; } .mark { font-family: var(--display); font-size: 1.35rem; letter-spacing: 0.01em; color: #F4F1E8; text-decoration: none; } .mark span { color: #D9B35A; } nav a { color: #D8D4C6; text-decoration: none; margin-left: 22px; font-size: 0.95rem; } nav a:hover { color: #fff; } .hero { background: var(--ink); color: #F4F1E8; padding-block: 56px 72px; } .hero h1 { font-family: var(--display); font-weight: 500; font-size: clamp(2.1rem, 5vw, 3.4rem); line-height: 1.08; margin: 0 0 18px; max-width: 18ch; text-wrap: balance; } .hero p { max-width: 56ch; font-size: 1.1rem; color: #D8D4C6; margin: 0 0 28px; } .btn { display: inline-block; background: #D9B35A; color: #13213A; text-decoration: none; font-weight: 600; padding: 12px 20px; border-radius: 6px; } .btn.ghost { background: transparent; color: #F4F1E8; border: 1px solid #5B6A8A; margin-left: 10px; } section { padding-block: 56px; } section + section { border-top: 1px solid var(--line); } h2 { font-family: var(--display); font-weight: 500; font-size: 1.9rem; margin: 0 0 18px; line-height: 1.15; } .eyebrow { font-size: 0.76rem; text-transform: uppercase; letter-spacing: 0.1em; color: var(--brass); font-weight: 600; margin-bottom: 10px; } .cols { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 28px; } @media (max-width: 760px) { .cols { grid-template-columns: 1fr; } } .cols h3 { font-family: var(--display); font-weight: 500; font-size: 1.25rem; margin: 0 0 8px; } .cols p { margin: 0; color: var(--muted); } .steps { display: grid; gap: 18px; max-width: 68ch; } .step { display: grid; grid-template-columns: 56px 1fr; gap: 14px; align-items: start; } .step .n { font-family: var(--display); font-size: 1.6rem; color: var(--brass); line-height: 1; padding-top: 2px; } .step b { display: block; margin-bottom: 2px; } .step p { margin: 0; color: var(--muted); } .terms { background: var(--paper-2); border-radius: 10px; padding: 22px 24px; max-width: 68ch; margin-top: 26px; } .terms p { margin: 0 0 8px; } .terms p:last-child { margin: 0; } .bio { display: grid; grid-template-columns: 180px minmax(0, 1fr); gap: 28px; max-width: 76ch; align-items: start; } .bio img { width: 180px; height: 180px; border-radius: 10px; object-fit: cover; display: block; } @media (max-width: 640px) { .bio { grid-template-columns: 1fr; } } .bio p { margin: 0 0 12px; } .contact { background: var(--ink); color: #F4F1E8; } .contact h2 { color: #F4F1E8; } .contact p { color: #D8D4C6; max-width: 56ch; } .contact a { color: #D9B35A; } .contact .row { display: flex; gap: 28px; flex-wrap: wrap; margin-top: 16px; font-size: 1.05rem; } footer { padding-block: 22px; color: var(--muted); font-size: 0.85rem; border-top: 1px solid var(--line); } footer .wrap { display: flex; justify-content: space-between; gap: 12px; flex-wrap: wrap; } .article { max-width: 68ch; padding-block: 48px 64px; } .article h1 { font-family: var(--display); font-weight: 500; font-size: clamp(1.9rem,4vw,2.6rem); line-height: 1.1; margin: 0 0 10px; } .article h2 { font-size: 1.4rem; margin-top: 34px; } .article p { margin: 0 0 14px; } .article .meta { color: var(--muted); font-size: 0.9rem; margin-bottom: 26px; } .article ul { padding-left: 20px; } .article li { margin-bottom: 8px; } .finding { border-left: 3px solid var(--brass); padding: 10px 16px; background: var(--paper-2); border-radius: 0 8px 8px 0; margin: 18px 0; } .src { font-size: 0.82rem; color: var(--muted); }