@import url('https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;600;700&family=Space+Grotesk:wght@500;600;700&display=swap');

:root {
    --charcoal: #302a26;
    --parchment: #f5ecdf;
    --terracotta: orangered;
    --ochre: #d29a4a;
    --error: #e00000;
}

* { box-sizing: border-box; }

body {
    margin: 0;
    color: var(--charcoal);
    background: var(--parchment);
    font-family: 'DM Sans', sans-serif;
    line-height: 1.6;
}

h1, h2, h3 { margin: 0; font-family: 'Space Grotesk', sans-serif; line-height: 1.15; }
h1 { font-size: clamp(2rem, 4vw, 2.5rem); letter-spacing: -0.03em; }
h2 { font-size: 1.45rem; }
p { margin: 0 0 1rem; }
a { color: var(--terracotta); font-weight: 600; text-decoration: none; }
a:hover { color: var(--charcoal); text-decoration: underline; }


/* =========================
   Page shell
   ========================= */

.container { width: min(1100px, calc(100% - 40px)); margin-inline: auto; }

.site-header { border-bottom: 1px solid var(--charcoal); background: var(--parchment); }
.site-header__inner { display: flex; align-items: center; justify-content: space-between; min-height: 78px; gap: 24px; }

.brand { display: inline-flex; align-items: center; gap: 10px; color: var(--charcoal); font-family: 'Space Grotesk', sans-serif; font-size: 1.1rem; font-weight: 700; }
.brand:hover { text-decoration: none; }
.brand__mark { display: block; width: 34px; height: 34px; object-fit: contain; }

.site-nav { display: flex; align-items: center; gap: 22px; }
.site-nav__logbutton { color: var(--charcoal); font-size: 0.92rem; border: 1px solid var(--charcoal); border-radius: 6px; padding: 4px 10px; }
.site-nav__logbutton:hover { color: var(--parchment); background: var(--charcoal); text-decoration: none; }

.page-shell { min-height: calc(100vh - 137px); padding: 48px 0 80px; }
.site-footer { padding: 0 0 28px; color: var(--charcoal); font-size: 0.85rem; }

.breadcrumb { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 22px; font-size: 0.9rem; }


/* =========================
   Feedback + alerts
   ========================= */

.messages { display: grid; gap: 10px; margin-bottom: 24px; }
.message { border: 1px solid var(--ochre); border-radius: 7px; padding: 12px 15px; background: var(--ochre); }
.message--error, .message--danger { border-color: var(--error); color: #fff7f8; background: var(--error); }
.errorlist { margin: 0 0 7px; padding: 0; color: var(--error); font-size: 0.9rem; list-style: none; }
.form-feedback { min-height: 1.5em; margin-bottom: 14px; font-weight: 600; }
.form-feedback--success { color: rgb(19, 233, 0); }
.form-feedback--error { color: red; }


/* =========================
   Accessibility
   ========================= */

.visually-hidden {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
}


@media (max-width: 760px) {
    .container { width: min(100% - 28px, 1100px); }
    .site-header__inner { min-height: 68px; }
    .site-nav { gap: 10px; }
    .page-shell { padding-top: 38px; }
}