/* ==========================================================================
   Benloop — the legal pages (/privacy.html, /terms.html)
   --------------------------------------------------------------------------
   ►►► ON the design system as of 2026-07-30. Rules:
       `docs/design/DESIGN-SYSTEM.md`. This file used to declare itself
       non-compliant; it no longer is. ◄◄◄

   These two pages are plain HTML served straight out of `public/`, so they carry
   their own stylesheet rather than Tailwind. **That stays true, and the reason is
   not laziness:** `PRIVACY_URL` is `${CANONICAL_ORIGIN}/privacy.html`, and it is
   written into `consents.consent_text_url` on every single consent record. Moving
   to a Next route at `/privacy` would leave every historical record pointing at a
   dead URL — which defeats the entire reason that column exists, since it is
   there so a member can be shown exactly what they agreed to. The nicer URL is
   not worth that. Decided 2026-07-30; do not reopen it without a migration plan
   for the existing rows.

   The cost of being a static file is that the tokens below are RESTATED by hand
   rather than imported from `@theme`. Three consequences, all deliberate:

     1. Every value here is copied from `app/src/app/globals.css`. If one changes
        there, change it here. There is no build step that will catch it.
     2. The type sizes are the scale's own rem values, written out. `--text-lead`
        and friends are Tailwind tokens and cannot be referenced from here, so
        the numbers are duplicated on purpose — see the block below.
     3. `--line` was #E4DECF here and #E7E1D2 in the app for months. Fixed.

   Three things this file used to get wrong, all recorded because they were
   invisible until someone measured them:

     - `h1, h2, h3` were set in the SANS. The system says display type is always
       the serif, and this was the only place in Benloop rendering a sans-serif
       heading.
     - `body` background was pure white against the app's warm canvas, so
       clicking Privacy in the footer crossed a visible seam.
     - `--muted` (#837B6E) fails WCAG AA on every surface it is used on. The
       AA-corrected value is below.

   It also carried ~50 unused classes copied wholesale from the old marketing
   stylesheet — `.hero` with a 5.4rem display, `.summary`, `.timeline`, three
   button variants, a pricing table. All deleted. The two pages use thirteen
   classes and now that is all this file defines; a stylesheet full of rules for
   a page that does not exist is somewhere for a retired value to hide.
   ========================================================================== */

/* Self-hosted (SIL OFL 1.1), absolute so these pages work at any depth. */
@font-face{font-family:'Jost';font-style:italic;font-weight:400 500;font-display:swap;src:url(/fonts/jost-italic-400-500.woff2) format('woff2');}
@font-face{font-family:'Jost';font-style:normal;font-weight:300 600;font-display:swap;src:url(/fonts/jost-normal-300-600.woff2) format('woff2');}
@font-face{font-family:'Libre Caslon Text';font-style:italic;font-weight:400;font-display:swap;src:url(/fonts/libre-caslon-text-italic-400.woff2) format('woff2');}
@font-face{font-family:'Libre Caslon Text';font-style:normal;font-weight:400;font-display:swap;src:url(/fonts/libre-caslon-text-normal-400.woff2) format('woff2');}
@font-face{font-family:'Libre Caslon Text';font-style:normal;font-weight:700;font-display:swap;src:url(/fonts/libre-caslon-text-normal-700.woff2) format('woff2');}

:root {
  /* Surfaces and ink — mirrored from globals.css @theme. */
  --white:    #FFFFFF;
  --bone:     #F4F1E9;
  --canvas:   #F7F5EF;
  --line:     #E7E1D2;
  --dune:     #292521;
  --dune-2:   #4B443C;
  --muted:    #726A59;   /* muted-aa. The old #837B6E failed AA everywhere. */
  --gold:     #E7B33E;
  --gold-d:   #C9962A;
  --gold-bg:  #FBF3DE;
  --gold-line:#EAD196;
  --gold-ink: #574616;

  --serif: "Libre Caslon Text", Georgia, serif;
  --sans:  "Jost", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;

  /* The type scale, written out because Tailwind's `--text-*` tokens are not
     reachable from a static file. Same values, same fluid clamps. */
  --t-display:  clamp(2.6rem, 5.4vw, 3.6rem);
  --t-title:    clamp(2rem, 4vw, 2.6rem);
  --t-subtitle: clamp(1.6rem, 3vw, 1.9rem);
  --t-lead:     clamp(1.15rem, 1.6vw, 1.3rem);
  --t-body:     1rem;
  --t-small:    0.95rem;
  --t-micro:    0.72rem;

  --ease-quint: cubic-bezier(0.83, 0, 0.17, 1);
  --shadow-lift: 0 1px 20px rgba(231, 225, 210, 0.9);

  --r-pill: 100px;
  --r-card: 16px;
  --r-tile: 14px;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  font-family: var(--sans);
  font-size: var(--t-body);
  font-weight: 400;
  color: var(--dune-2);
  background: var(--canvas);
  line-height: 1.6;
  letter-spacing: -0.03em;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

img { max-width: 100%; display: block; }

a { color: var(--dune); text-decoration: none; }
a:hover { color: var(--gold-d); }

/* Display type is ALWAYS the serif, at weight 400. Not the sans, and never
   bolded — see DESIGN-SYSTEM.md section 1. */
h1, h2, h3 {
  font-family: var(--serif);
  font-weight: 400;
  margin: 0;
  color: var(--dune);
}

/* Authored focus rings, matching `.ring-focus`. The browser default is a 1px
   #E59700 that measures 2.20:1 on this canvas. */
a:focus-visible,
button:focus-visible {
  outline: 2px solid var(--dune);
  outline-offset: 2px;
  border-radius: 4px;
}

/* -------------------------------------------------------------------- nav -- */

/* A floating white pill island, matching `NavIsland`. It was a full-width
   sticky bar with a blurred translucent background, which is a different
   component from the one every other page shows. */
.nav {
  position: sticky;
  top: 0;
  z-index: 60;
  padding-top: 16px;
  pointer-events: none;
}

.wrap {
  max-width: 1120px;
  margin: 0 auto;
  padding: 0 24px;
}

.nav-inner {
  pointer-events: auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  max-width: 680px;
  margin: 0 auto;
  padding: 0 8px 0 16px;
  background: var(--white);
  border-radius: var(--r-pill);
  box-shadow: var(--shadow-lift);
}

.brand {
  font-family: var(--serif);
  font-size: var(--t-lead);
  letter-spacing: -0.02em;
  color: var(--dune);
  display: flex;
  align-items: center;
  min-height: 44px;
}

.nav-right { display: flex; align-items: center; }

/* The outline pill. `rgba(41,37,33,.28)` measured 1.7:1 against white — a border
   you can only see if you know it is there. 0.5 clears the 3:1 that WCAG wants
   for a non-text boundary. */
.btn {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: 0 20px;
  margin: 8px 0;
  border: 1px solid transparent;
  border-radius: var(--r-pill);
  font-size: var(--t-small);
  letter-spacing: -0.03em;
  cursor: pointer;
  transition: border-color 500ms var(--ease-quint), color 500ms var(--ease-quint);
}

.btn-outline {
  background: transparent;
  color: var(--dune);
  border-color: rgba(41, 37, 33, 0.5);
}

.btn-outline:hover { border-color: var(--dune); color: var(--dune); }

/* ------------------------------------------------------------------ legal -- */

.legal {
  max-width: 720px;
  margin: 0 auto;
  padding: 72px 24px 96px;
}

.label {
  display: block;
  margin-bottom: 20px;
  font-size: var(--t-micro);
  font-weight: 500;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--muted);
}

.label .dot { color: var(--gold-d); }

.legal h1 {
  font-size: var(--t-title);
  line-height: 1.1;
  letter-spacing: -0.03em;
  margin-bottom: 12px;
}

.legal .updated {
  font-size: var(--t-small);
  color: var(--muted);
  margin-bottom: 20px;
}

.legal .draft-flag {
  background: var(--gold-bg);
  border: 1px solid var(--gold-line);
  color: var(--gold-ink);
  padding: 14px 18px;
  border-radius: var(--r-tile);
  font-size: var(--t-small);
  margin: 20px 0 40px;
}

.legal h2 {
  font-size: var(--t-subtitle);
  line-height: 1.2;
  letter-spacing: -0.02em;
  margin: 48px 0 12px;
}

.legal h3 {
  font-size: var(--t-lead);
  line-height: 1.25;
  letter-spacing: -0.02em;
  margin: 32px 0 10px;
}

.legal p, .legal li { color: var(--dune-2); }
.legal ul { padding-left: 22px; }
.legal li { margin-bottom: 6px; }

/* A gold underline rather than the default. Kept: it is the one place a link
   inside body copy has to be unmistakable.
   Inline links in a sentence are deliberately NOT forced to a 44px target —
   WCAG 2.5.8 exempts targets inside a block of text, and stretching an email
   address inside a paragraph would wreck the leading. The standalone one at the
   foot of the page is a different case and gets `.btn` below. */
/* `:not(.btn)` is load-bearing — FIXED 2026-07-31.

   This rule was `.legal a`, which also matched the outline pill at the foot of
   the page. `.btn` draws its outline with the `border` shorthand on all four
   sides, and `.legal a` (specificity 0-1-1) beat `.btn-outline` (0-1-0) on
   `border-bottom` alone. The old fix set `border-bottom: 0` on `.back a`, which
   did not restore the outline — it deleted the bottom edge, so the button
   rendered as a pill open along the bottom.

   A rule that repairs the symptom of another rule's overreach is how that
   happens. Excluding buttons from the underline means the outline is never
   fought over. */
.legal a:not(.btn) { border-bottom: 2px solid var(--gold); }
.legal a:not(.btn):hover { border-color: var(--dune); }

/* The one standalone action on the page, so it takes the 44px minimum and the
   outline pill rather than being a bare underlined link. */
.legal .back { margin-top: 40px; }

/* ----------------------------------------------------------------- footer -- */

.foot {
  padding: 56px 0;
  border-top: 1px solid var(--line);
  background: var(--bone);
}

.foot-note {
  max-width: 86ch;
  margin: 0 auto;
  padding: 0 24px;
  font-size: var(--t-micro);
  line-height: 1.6;
  letter-spacing: -0.02em;
  color: var(--muted);
}

/* ------------------------------------------------------------ responsive -- */

@media (max-width: 640px) {
  .legal { padding: 48px 20px 72px; }
  .wrap { padding: 0 16px; }
  .nav-inner { padding-left: 14px; }
}

/* No motion on these pages beyond the two colour transitions above, so there is
   nothing for `prefers-reduced-motion` to switch off. If anything animated is
   ever added here, it needs the same block `globals.css` has. */