:root { --ink: #18252a; --muted: #627277; --paper: #f5f2ea; --card: #fffdf8; --accent: #cf5b38; --green: #3c7869; --line: #dfd8cc; }
* { box-sizing: border-box; }
body { margin: 0; color: var(--ink); background: radial-gradient(circle at top right, #e4efe8 0, transparent 35%), var(--paper); font-family: Georgia, 'Times New Roman', serif; }
button, input { font: inherit; }
.login-shell { min-height: 100vh; display: grid; place-items: center; padding: 24px; }
.login-card { width: min(100%, 430px); padding: 42px; background: var(--card); border: 1px solid var(--line); box-shadow: 14px 14px 0 #d6e2da; }
.eyebrow { margin: 0 0 14px; color: var(--accent); font: 700 0.78rem/1.2 Arial, sans-serif; letter-spacing: .12em; text-transform: uppercase; }
h1 { margin: 0 0 16px; font-size: clamp(2.5rem, 7vw, 5.5rem); line-height: .95; letter-spacing: 0; }
.login-card h1 { font-size: 3rem; }
.muted { color: var(--muted); line-height: 1.6; }
form { margin-top: 28px; }
label { display: block; margin-bottom: 8px; font: 700 .85rem Arial, sans-serif; }
input { width: 100%; padding: 13px 14px; border: 1px solid #b9b0a3; background: white; }
button { border: 0; padding: 13px 20px; color: white; background: var(--accent); cursor: pointer; }
form button { width: 100%; margin-top: 16px; }
.error { color: #a52f2f; font: 700 .9rem Arial, sans-serif; }
.topbar { display: flex; align-items: center; justify-content: space-between; padding: 22px max(24px, calc((100vw - 1120px) / 2)); background: var(--ink); color: white; font: 700 1rem Arial, sans-serif; }
.topbar form { margin: 0; }
.button-secondary { width: auto; margin: 0; padding: 9px 14px; background: transparent; border: 1px solid #a8b6b4; }
.long-page { width: min(100% - 48px, 1120px); margin: 0 auto; padding: 80px 0 120px; }
.hero { max-width: 820px; padding: 60px; background: #dfece5; }
.hero p:last-child { max-width: 620px; color: #405653; font-size: 1.25rem; line-height: 1.6; }
.hero-green { background: #d9e7de; }
.content-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 24px; margin: 42px 0; }
article, .copy { padding: 30px; border-top: 3px solid var(--accent); background: var(--card); }
article p, .copy p { color: var(--muted); line-height: 1.75; }
.copy { max-width: 820px; }
code { color: var(--accent); }
@media (max-width: 680px) { .login-card { padding: 30px; } .hero { padding: 32px 24px; } .content-grid { grid-template-columns: 1fr; } .long-page { width: min(100% - 32px, 1120px); padding-top: 40px; } }