*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

:root {
  --amber:      #d97706;
  --amber-dark: #b45309;
  --amber-bg:   #fffbeb;
  --amber-glow: rgba(217,119,6,.1);
  --text:       #111827;
  --muted:      #6b7280;
  --light:      #9ca3af;
  --border:     #e5e7eb;
  --surface:    #f9fafb;
  --bg:         #ffffff;
}

html { font-size: 16px; }

body {
  font-family: 'Inter', sans-serif;
  background: var(--bg);
  color: var(--text);
  line-height: 1.6;
  border-top: 3px solid var(--amber);
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

/* ── Header ── */
header {
  display: flex; align-items: center; justify-content: space-between;
  padding: 18px 32px;
  border-bottom: 1px solid var(--border);
  position: sticky; top: 0; z-index: 100;
  background: var(--bg);
}
.logo { font-family: 'Bricolage Grotesque', sans-serif; font-size: 18px; font-weight: 800; color: var(--text); text-decoration: none; letter-spacing: -.02em; display: inline-flex; align-items: center; }
.logo svg { margin-right: 10px; }
.logo span { color: var(--amber); }
.logo .tld  { color: var(--text); margin-left: 2px; }
.header-tag {
  font-size: 13px; font-weight: 500; color: var(--muted);
  text-decoration: underline; text-decoration-color: var(--border);
  text-underline-offset: 3px; text-decoration-thickness: 1px;
  transition: color .15s, text-decoration-color .15s;
}
.header-tag:hover { color: var(--text); text-decoration-color: var(--muted); }

/* ── Footer ── */
footer {
  border-top: 1px solid var(--border); padding: 20px 32px;
  display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 12px;
}
.footer-left { display: flex; flex-direction: column; gap: 3px; }
.footer-sources { font-size: 12px; color: var(--light); }
.footer-sources a { color: var(--light); text-decoration: underline; text-underline-offset: 2px; }
.footer-sources a:hover { color: var(--muted); }
.footer-disclaimer { font-size: 12px; color: var(--light); }
.footer-nav { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px 16px; }
.footer-nav a { font-size: 12px; color: var(--light); text-decoration: none; }
.footer-nav a:hover { color: var(--muted); }

site-header, site-footer { display: contents; }

@media (max-width: 600px) {
  header { padding: 16px 20px; position: relative; }
  .header-tag {
    position: absolute; right: 20px; top: 50%; transform: translateY(-50%);
  }
  footer { flex-direction: column; padding: 20px; }
}