/* ============================================================
   BUGGED OUT! - Document, Bristol
   Legal pages (privacy.html). Same tokens and faces as style.css,
   but this is a reading document, not a landing page: the job is a
   comfortable measure, a clear heading hierarchy and nothing else.

   Written fresh rather than inherited: the UKG Brunch source page
   pulled a 779-line whole-site stylesheet in for one document, and
   it depended on a display face this build does not ship.
   ============================================================ */

@font-face {
  font-family: "Figtree";
  src: url("/assets/fonts/Figtree-var.woff2?v=20260804-11") format("woff2");
  font-weight: 300 900; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Archivo";
  src: url("/assets/fonts/Archivo-var.woff2?v=20260804-11") format("woff2");
  font-weight: 100 900; font-style: normal; font-display: swap;
}

:root {
  --acid:      #E9F41C;
  --ink:       #050502;
  --concrete:  #DCDCD8;
  --ink-muted: rgba(5, 5, 2, 0.66);
  --ink-line:  rgba(5, 5, 2, 0.14);

  --font:      "Figtree", "Helvetica Neue", Helvetica, Arial, sans-serif;
  --font-util: "Archivo", "Helvetica Neue", Helvetica, Arial, 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);
  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 16px 8px 10px;
  background: var(--ink);
  color: #EAEAEA;
  text-decoration: none;
  transition: background-color 0.15s ease;
}
.legal__back:hover { background: #16160F; }
.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-size: clamp(30px, 5.4vw, 46px);
  font-weight: 800;
  line-height: 0.98;
  letter-spacing: -0.034em;
}
.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, 5, 2, 0.5);
}

/* ============================================================
   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;
  }
}