/* Shared site chrome: the footer used on every page, and the cookie banner
   its "Cookie settings" link opens. Extracted from the homepage so the two
   can never drift apart. Loaded after each page's own <style>, so it wins
   over the older per-page footer rules still sitting in those files. */

/* =================== Footer ================================== */

footer.site-footer {
  background: var(--paper);
  border-top: 1px solid var(--hairline);
  padding: 72px 0 36px;
}
.footer-grid {
  display: grid;
  grid-template-columns: 1.8fr 1fr 1fr 1.4fr;
  gap: 48px;
  margin-bottom: 56px;
}
@media (max-width: 880px) {
  .footer-grid { grid-template-columns: 1fr 1fr; gap: 36px; }
}
@media (max-width: 540px) {
  .footer-grid { grid-template-columns: 1fr; }
}
.footer-grid .brand-block img { height: 26px; width: auto; margin-bottom: 16px; }
.footer-grid .brand-block p {
  font-size: 14px;
  color: var(--muted);
  max-width: 36ch;
  line-height: 1.55;
  margin-bottom: 24px;
}
.footer-grid .socials { display: flex; gap: 12px; }
.footer-grid .socials a {
  width: 34px; height: 34px;
  border-radius: 50%;
  border: 1px solid var(--hairline);
  display: flex; align-items: center; justify-content: center;
  color: var(--muted);
  transition: color 0.15s, border-color 0.15s, background 0.15s;
}
.footer-grid .socials a:hover {
  color: var(--teal);
  border-color: var(--teal);
  background: var(--mint-pale);
}
.footer-grid .col h5 {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink);
  margin: 0 0 18px;
}
.footer-grid .col ul { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 12px; }
.footer-grid .col a {
  font-size: 14px;
  color: var(--muted);
  transition: color 0.15s;
}
.footer-grid .col a:hover { color: var(--teal); }
.footer-grid .newsletter h5 {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink);
  margin: 0 0 18px;
}
.footer-grid .newsletter p {
  font-size: 14px;
  color: var(--muted);
  line-height: 1.55;
  margin-bottom: 14px;
}
.footer-grid .newsletter form {
  display: flex;
  gap: 8px;
  border: 1px solid var(--hairline-strong);
  border-radius: var(--r-pill);
  padding: 4px 4px 4px 16px;
  background: #fff;
}
.footer-grid .newsletter input {
  flex: 1;
  border: 0;
  background: transparent;
  font-family: inherit;
  font-size: 13.5px;
  color: var(--ink);
  height: 36px;
}
.footer-grid .newsletter input:focus { outline: 0; }
.footer-grid .newsletter button {
  background: var(--ink);
  color: #fff;
  border: 0;
  border-radius: var(--r-pill);
  padding: 0 18px;
  height: 36px;
  font-size: 13px;
  font-weight: 500;
}
.footer-grid .newsletter button:hover { background: var(--teal-deep); }
.footer-bottom {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-top: 28px;
  border-top: 1px solid var(--hairline);
  flex-wrap: wrap;
  gap: 18px;
}
.footer-bottom .copy { font-size: 13px; color: var(--muted); }
.footer-bottom .legal { display: flex; gap: 24px; }
.footer-bottom .legal a { font-size: 13px; color: var(--muted); }
.footer-bottom .legal a:hover { color: var(--teal); }

.footer-grid .socials a {
.footer-grid .socials a:hover {
.footer-grid .col a {
.footer-grid .col a:hover { color: var(--teal); }
.footer-grid .col a { display: inline-block; transition: color 0.15s, transform 0.2s ease; }
.footer-grid .col a:hover { transform: translateX(3px); }
.footer-grid .socials a:hover { transform: translateY(-2px); }
.footer-grid .socials a { transition: color 0.15s, border-color 0.15s, background 0.15s, transform 0.2s ease; }

/* =================== Cookie banner =========================== */

.cookie-banner {
  position: fixed;
  left: 50%;
  bottom: 24px;
  z-index: 80;
  width: min(880px, calc(100vw - 32px));
  transform: translate(-50%, calc(100% + 48px));
  opacity: 0;
  pointer-events: none;
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 18px;
  padding: 18px 20px;
  border: 1px solid var(--hairline);
  border-radius: var(--r-lg, 16px);
  background: rgba(255, 255, 255, 0.96);
  box-shadow: var(--shadow-lg, 0 24px 60px -30px rgba(15, 26, 24, 0.35));
  backdrop-filter: blur(14px);
  transition: transform 0.28s ease, opacity 0.28s ease;
}
.cookie-banner.show { transform: translate(-50%, 0); opacity: 1; pointer-events: auto; }
.cookie-copy h2 { margin: 0 0 4px; font-size: 14px; font-weight: 600; letter-spacing: -0.01em; }
.cookie-copy p { margin: 0; color: var(--muted); font-size: 13px; line-height: 1.5; }
.cookie-copy a { color: var(--teal); font-weight: 500; }
.cookie-actions { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; justify-content: flex-end; }
.cookie-btn {
  border: 1px solid var(--hairline-strong);
  border-radius: var(--r-pill);
  background: #fff;
  color: var(--ink);
  padding: 8px 14px;
  font-weight: 500;
  font-size: 12.5px;
  cursor: pointer;
}
.cookie-btn:hover { background: var(--cream); }
.cookie-btn.accept { border-color: var(--ink); background: var(--ink); color: #fff; }
.cookie-btn.accept:hover { background: var(--teal-deep); border-color: var(--teal-deep); }
.cookie-manage {
  display: none;
  grid-column: 1 / -1;
  gap: 14px;
  align-items: center;
  padding-top: 14px;
  border-top: 1px solid var(--hairline);
}
.cookie-manage.show { display: flex; flex-wrap: wrap; }
.cookie-manage label {
  display: inline-flex; gap: 8px; align-items: center;
  font-weight: 500; color: var(--muted); font-size: 13px;
}
@media (max-width: 760px) {
  .cookie-banner { grid-template-columns: 1fr; }
  .cookie-actions { justify-content: stretch; }
  .cookie-btn { flex: 1; }
}