@font-face {
  font-family: "Newsreader";
  src: url("assets/fonts/newsreader-variable.woff2") format("woff2");
  font-weight: 400 700;
  font-display: swap;
}

@font-face {
  font-family: "Manrope";
  src: url("assets/fonts/manrope-variable.woff2") format("woff2");
  font-weight: 400 800;
  font-display: swap;
}

:root {
  --ink: #121210;
  --paper: #f2eee4;
  --accent: #d64a32;
  --gold: #e4b469;
  --muted: #625e55;
  --rule: rgb(18 18 16 / 20%);
  --focus: #0969a2;
  --gutter: clamp(1.25rem, 5vw, 5rem);
}

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; background: var(--paper); color: var(--ink); font: 1.0625rem/1.7 "Manrope", Arial, sans-serif; }
a { color: inherit; text-decoration-thickness: .08em; text-underline-offset: .2em; }
a:focus-visible { outline: 3px solid var(--focus); outline-offset: 4px; }
img { display: block; max-width: 100%; }
.skip-link { position: fixed; top: .75rem; left: .75rem; z-index: 20; padding: .7rem 1rem; transform: translateY(-180%); background: var(--ink); color: var(--paper); }
.skip-link:focus { transform: translateY(0); }
.legal-header { display: flex; align-items: center; justify-content: space-between; gap: 1rem; min-height: 5rem; padding: 1rem var(--gutter); border-bottom: 1px solid var(--rule); }
.legal-brand { display: inline-flex; align-items: center; gap: .75rem; font-weight: 800; letter-spacing: .08em; text-decoration: none; text-transform: uppercase; }
.legal-brand__mark { display: grid; width: 2.5rem; height: 2.5rem; place-items: center; border: 1px solid var(--accent); color: var(--accent); font: 600 1.5rem/1 "Newsreader", Georgia, serif; }
.legal-back { min-height: 2.75rem; display: inline-flex; align-items: center; font-weight: 750; }
.legal-main { width: min(58rem, 100%); margin: 0 auto; padding: clamp(4rem, 9vw, 8rem) var(--gutter); }
.legal-kicker { margin: 0 0 1rem; color: var(--accent); font-size: .75rem; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; }
.legal-main h1, .legal-main h2, .legal-main h3 { font-family: "Newsreader", Georgia, serif; text-wrap: balance; }
.legal-main h1 { margin: 0 0 1.25rem; font-size: clamp(3rem, 8vw, 6.5rem); line-height: .92; letter-spacing: -.05em; }
.legal-main h2 { margin: 3.5rem 0 1rem; padding-top: 1.25rem; border-top: 1px solid var(--rule); font-size: clamp(1.8rem, 4vw, 2.8rem); line-height: 1.05; }
.legal-main h3 { margin: 2rem 0 .6rem; font-size: 1.45rem; }
.legal-lead { max-width: 45rem; color: var(--muted); font: 1.4rem/1.45 "Newsreader", Georgia, serif; }
.legal-note { margin: 2rem 0; padding: 1.25rem; border-left: .35rem solid var(--accent); background: #e9e3d7; }
.legal-main li + li { margin-top: .65rem; }
.credits-grid { display: grid; gap: 2rem; margin-top: 2.5rem; }
.credit-card { display: grid; grid-template-columns: minmax(9rem, .35fr) minmax(0, .65fr); border-top: 1px solid var(--rule); padding-top: 1.5rem; gap: 1.5rem; }
.credit-card img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; }
.credit-card h2 { margin-top: 0; padding-top: 0; border-top: 0; }
.legal-footer { padding: 2rem var(--gutter); background: var(--ink); color: var(--paper); }
.legal-footer nav { display: flex; flex-wrap: wrap; gap: .75rem 1.5rem; }
.legal-footer a { min-height: 2.75rem; display: inline-flex; align-items: center; }
@media (max-width: 40rem) { .legal-header { align-items: flex-start; flex-direction: column; } .credit-card { grid-template-columns: 1fr; } .legal-main { font-size: 1rem; } }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }