:root { --ink: #17191c; --bg: #f6f5f1; --accent: #f2b705; --line: #cfcdc6; --err: #b3261e; }
* { box-sizing: border-box; }
body { margin: 0; font: 17px/1.6 system-ui, -apple-system, "Segoe UI", sans-serif; color: var(--ink); background: var(--bg); }
.wrap { max-width: 52rem; margin: 0 auto; padding: 0 1.25rem; }
.skip { position: absolute; left: -999px; } .skip:focus { left: 1rem; top: 1rem; background: var(--accent); padding: .5rem 1rem; }
.site-header { background: var(--ink); color: #fff; } .site-header .wrap { display: flex; flex-wrap: wrap; gap: .75rem 1.5rem; align-items: center; padding-block: .9rem; }
.site-header a { color: #fff; text-decoration: none; } .site-header nav a { margin-right: 1rem; font-size: .95rem; } .site-header a:hover, .site-header a:focus-visible { text-decoration: underline; }
.brand { font-weight: 800; letter-spacing: .02em; text-transform: uppercase; }
main { padding-block: 2rem 3rem; } h1 { font-size: 2rem; line-height: 1.15; } h2 { margin-top: 2rem; font-size: 1.35rem; }
a { color: inherit; } :focus-visible { outline: 3px solid var(--ink); outline-offset: 2px; }
.btn { display: inline-block; background: var(--accent); color: var(--ink); border: 2px solid var(--ink); padding: .65rem 1.2rem; font: inherit; font-weight: 700; text-decoration: none; cursor: pointer; min-height: 2.75rem; }
.btn:hover { background: var(--ink); color: #fff; }
.field { margin-bottom: 1.1rem; } label { display: block; font-weight: 700; margin-bottom: .3rem; } .hint { font-size: .9rem; color: #55575b; margin: .25rem 0 0; }
input[type=text], input[type=email], input[type=url], textarea, input[type=file] { width: 100%; padding: .6rem .7rem; border: 2px solid var(--ink); background: #fff; font: inherit; min-height: 2.75rem; }
textarea { min-height: 9rem; } input[readonly] { background: #ecebe6; }
.errors { border: 2px solid var(--err); background: #fff; padding: .75rem 1rem; margin-bottom: 1.25rem; color: var(--err); } .errors ul { margin: .4rem 0 0; }
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.cards { display: grid; gap: 1rem; grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr)); padding: 0; list-style: none; } .card { background: #fff; border: 2px solid var(--ink); padding: 1rem 1.2rem; }
.site-footer { border-top: 1px solid var(--line); padding-block: 1.25rem; font-size: .95rem; color: #55575b; }
dt { font-weight: 700; margin-top: 1rem; } dd { margin: .2rem 0 0; }