/* ============================================================
   WAH LEEDS - legal pages (privacy.html). Same palette and display face
   as style.css, but a reading document: light ground, comfortable
   measure, the back link as a black pill like the sign-up button.
   ============================================================ */

@font-face {
  font-family: "Big Shoulders Display";
  src: url("/assets/fonts/BigShouldersDisplay-900.woff2?v=20261003-1") format("woff2");
  font-weight: 900; font-style: normal; font-display: swap;
}

:root {
  --acid:      #FFFFFF;   /* back-link arrow: white on the black pill */
  --ink:       #000000;
  --concrete:  #FFFFFF;
  --ink-muted: rgba(0, 0, 0, 0.76);
  --ink-line:  rgba(0, 0, 0, 0.14);

  --font:      "Big Shoulders Display", Impact, "Arial Narrow", sans-serif;
  --font-util: "Helvetica Neue", Helvetica, Arial, "Nimbus Sans", "Liberation Sans", sans-serif;
}

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

html { background: var(--concrete); }
body.legal-wrap {
  margin: 0;
  /* flat wall, no tiled grain - see the BACKGROUND note in style.css */
  background: var(--concrete);
  color: var(--ink);
  font-family: var(--font-util);
  font-size: 16px;
  line-height: 1.62;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

.legal {
  max-width: 74ch;
  margin: 0 auto;
  padding: clamp(22px, 4vw, 52px) clamp(18px, 5vw, 32px) clamp(48px, 8vw, 96px);
}

/* --- back link: an acid chip, the one loud element on the page --- */
.legal__back {
  display: inline-flex;
  align-items: center;
  gap: 11px;
  margin: 0 0 clamp(26px, 4vw, 40px);
  padding: 8px 18px 8px 12px;
  border-radius: 999px;
  background: var(--ink);
  color: #EAEAEA;
  text-decoration: none;
  transition: background-color 0.15s ease;
}
.legal__back:hover { background: #0E4C55; }
.legal__back-arrow {
  display: flex;
  flex: 0 0 auto;
  width: 18px; height: 18px;
  color: var(--acid);
}
.legal__back-arrow svg { width: 100%; height: 100%; }
.legal__back-label { display: flex; align-items: baseline; gap: 7px; }
.legal__back-text {
  font-family: var(--font-util);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: rgba(234, 234, 234, 0.66);
}
.legal__back-brand {
  font-family: var(--font);
  font-size: 15px;
  font-weight: 800;
  letter-spacing: -0.02em;
  color: #EAEAEA;
}

/* --- document type --- */
.legal h1 {
  margin: 0 0 clamp(20px, 3vw, 30px);
  font-family: var(--font);
  font-size: clamp(28px, 5vw, 42px);
  font-weight: 800;
  text-transform: uppercase;
  line-height: 0.98;
  letter-spacing: -0.01em;
}
.legal h2 {
  margin: clamp(30px, 4.4vw, 44px) 0 12px;
  padding-top: 14px;
  border-top: 1px solid var(--ink-line);
  font-family: var(--font-util);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ink);
}
.legal h3 {
  margin: 24px 0 8px;
  font-size: 17px;
  font-weight: 700;
  letter-spacing: -0.01em;
}
.legal p {
  margin: 0 0 13px;
  color: var(--ink-muted);
  /* the source document is one long run of bullet-prefixed paragraphs; a
     comfortable measure matters more here than any styling */
  max-width: 72ch;
}
.legal p strong { color: var(--ink); font-weight: 700; }
.legal a { color: var(--ink); text-decoration: underline; text-underline-offset: 2px; }
.legal a:hover { text-decoration-thickness: 2px; }

.legal__meta {
  margin: clamp(34px, 5vw, 52px) 0 0;
  padding-top: 16px;
  border-top: 1px solid var(--ink-line);
  font-family: var(--font-util);
  font-size: 11px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: rgba(5, 7, 8, 0.62);
}

/* ============================================================
   ACCESSIBILITY
   ============================================================ */
a:focus-visible {
  outline: 2px solid var(--ink);
  outline-offset: 3px;
}
.legal__back:focus-visible { outline-color: var(--ink); }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation: none !important;
    transition: none !important;
  }
}