/* Shared header and footer. build.js links this file into every page that gets the shared chrome,
   including pages still on the old design, so each rule is scoped to the chrome's own classes and
   sets every property the chrome depends on. The tokens also serve body.site-page. */
.site-page, .site-header, .site-footer, .skip-link {
  --frog-black: #0D1117;
  --dark-slate: #161B22;
  --spot-gray: #21262D;
  --border-light: #30363D;
  --ink: #E6EDF3;
  --ink-muted: #8B949E;
  --yellow: #F5D000;
  --yellow-hover: #FFE14A;
  --blue: #2E86DE;
  --blue-text: #66B0F2;
  --vermillion: #E84320;
  --vermillion-text: #FF7A5C;
  --lavender: #7B8FC8;
  --green: #3FAE78;
  --gutter: clamp(16px, 5vw, 80px);
  --font-text: 'Schibsted Grotesk', system-ui, sans-serif;
  --font-logo: 'Outfit', 'Sora', sans-serif;
  --font-code: 'JetBrains Mono', ui-monospace, monospace; /* taste-skill-ignore: literal code only */
}

.site-header, .site-footer {
  font-family: var(--font-text);
  font-size: 1.125rem;
  line-height: 1.55;
  letter-spacing: -0.005em;
  -webkit-font-smoothing: antialiased;
}
.site-header *, .site-footer * { box-sizing: border-box; }
.site-header p, .site-footer p { margin: 0; }
.site-header a, .site-footer a {
  color: inherit;
  text-decoration-line: underline;
  text-decoration-thickness: 2px;
  text-underline-offset: 0.22em;
  transition: none;
}
.site-header a:focus-visible, .site-footer a:focus-visible, .skip-link:focus-visible {
  outline: 3px solid var(--yellow);
  outline-offset: 3px;
}
.site-footer a:focus-visible { outline-color: var(--frog-black); }

.skip-link {
  position: absolute; left: 16px; top: -80px; z-index: 10;
  padding: 10px 16px; background: var(--yellow); color: var(--frog-black);
  font: 700 1rem/1.2 var(--font-text); text-decoration: none;
}
.skip-link:focus { top: 12px; }

/* ---------- header ---------- */
.site-header { position: relative; z-index: 3; background: var(--frog-black); color: var(--ink); }
.site-header__inner {
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  width: min(100% - 2 * var(--gutter), 1280px); height: 88px; margin-inline: auto;
}
.site-header .wordmark {
  display: inline-flex; align-items: center; gap: 10px;
  color: var(--ink); text-decoration: none;
  font-family: var(--font-logo); font-weight: 900; font-size: 1.375rem; letter-spacing: 0.2em;
}
.site-header .wordmark:hover { color: var(--ink); }
.site-header .wordmark svg { display: block; width: 26px; height: 26px; }
.site-nav { display: flex; align-items: center; gap: 32px; }
.site-nav a { font-size: 1rem; font-weight: 600; text-decoration: none; }
.site-nav a:hover { color: var(--yellow); }
/* The free report is the one control the header always shows, on every screen size. */
.site-nav .site-nav__report {
  padding: 10px 16px; border-radius: 6px;
  background: var(--yellow); color: var(--frog-black); font-weight: 700; line-height: 1.2;
}
.site-nav .site-nav__report:hover { background: var(--yellow-hover); color: var(--frog-black); }

/* ---------- footer ---------- */
.site-footer { background: var(--yellow); color: var(--frog-black); overflow: clip; }
.site-footer a { color: var(--frog-black); text-decoration-color: currentColor; }
.site-footer a:hover { color: var(--frog-black); text-decoration-thickness: 3px; }
.footer-inner {
  display: grid; gap: 36px;
  width: min(100% - 2 * var(--gutter), 1280px); margin-inline: auto;
  padding-top: clamp(80px, 9vw, 136px);
}
.footer-statement { font-size: clamp(2.75rem, 1.6rem + 4.2vw, 5rem); font-weight: 800; line-height: 0.96; letter-spacing: -0.045em; }
.footer-nav { display: flex; flex-wrap: wrap; gap: 10px 28px; font-weight: 600; }
.footer-small { font-size: 0.875rem; }
.footer-wordmark {
  margin-top: clamp(40px, 6vw, 88px);
  font-family: var(--font-logo); font-weight: 900;
  font-size: 18.6vw; line-height: 0.76; letter-spacing: 0.01em;
  text-align: center; white-space: nowrap;
  transform: translateY(0.1em);
  position: relative;
}
/* Three of the frog's black spots on the wordmark. */
.footer-spot { position: absolute; left: var(--x); top: var(--y); width: var(--w); height: auto; rotate: var(--a); fill: currentColor; }

/* 44px tap targets on touch screens. */
@media (pointer: coarse) {
  .footer-nav { row-gap: 0; }
  .footer-nav a, .site-header .wordmark { padding-block: 8px; }
  .site-nav .site-nav__report { display: inline-flex; align-items: center; min-height: 44px; }
}

@media (max-width: 760px) {
  .site-nav a:not(.site-nav__report) { display: none; }
  .site-nav .site-nav__report { padding: 8px 12px; font-size: 0.875rem; text-align: center; }
  .site-header__inner { height: 68px; }
  .site-header .wordmark { font-size: 1.125rem; }
  .site-header .wordmark svg { width: 22px; height: 22px; }
}