:root { color:#ecece7; background:#111211; font-family:Georgia, "Times New Roman", serif; } * { box-sizing:border-box; } body { margin:0; min-width:320px; } a { color:#dfaa55; text-underline-offset:3px; } .site-header, footer { display:flex; align-items:center; justify-content:space-between; width:min(1120px, calc(100% - 48px)); margin:auto; } .site-header { height:86px; border-bottom:1px solid #31332f; } nav { display:flex; gap:24px; font-family:"Segoe UI", sans-serif; font-size:14px; } .brand { display:inline-flex; align-items:center; gap:11px; color:#ecece7; text-decoration:none; font-size:18px; } .brand-mark { display:grid; width:30px; height:30px; place-items:center; border:1px solid #c39145; background:#231d13; color:#f0b146; font:700 10px "Segoe UI", sans-serif; letter-spacing:.08em; } main { width:min(1120px, calc(100% - 48px)); margin:auto; } .intro { max-width:760px; padding:130px 0 110px; } .eyebrow { margin:0 0 18px; color:#dfaa55; font:700 11px "Segoe UI",sans-serif; letter-spacing:.12em; text-transform:uppercase; } h1 { max-width:720px; margin:0; font-size:clamp(54px, 10vw, 128px); font-weight:400; line-height:.88; letter-spacing:0; } .lede { max-width:540px; margin:30px 0; color:#bcbdb6; font:20px/1.5 "Segoe UI",sans-serif; } .button { display:inline-flex; padding:13px 18px; background:#f0b146; color:#1a160f; font:700 14px "Segoe UI",sans-serif; text-decoration:none; } .principles { display:grid; grid-template-columns:repeat(3,1fr); border-top:1px solid #31332f; } .principles article { min-height:260px; padding:26px; border-right:1px solid #31332f; } .principles article:last-child { border:0; } .principles span { color:#dfaa55; font:700 11px "Segoe UI",sans-serif; } h2 { margin:34px 0 12px; font-size:28px; font-weight:400; } .principles p, .document p { color:#bcbdb6; font:15px/1.65 "Segoe UI",sans-serif; } footer { height:100px; margin-top:70px; border-top:1px solid #31332f; color:#888b84; font:12px "Segoe UI",sans-serif; } .document { max-width:760px; padding:95px 0 40px; } .document h1 { font-size:62px; } .document h2 { margin-top:42px; } @media (max-width:700px) { .site-header, footer, main { width:min(100% - 32px, 1120px); } .intro { padding:88px 0 70px; } .principles { grid-template-columns:1fr; } .principles article { min-height:0; border-right:0; border-bottom:1px solid #31332f; } .document { padding-top:60px; } .document h1 { font-size:48px; } }