/* Shared look for the legal pages (terms.html, privacy.html) — same night-club purples as index.html, built for long reading. */
@font-face { font-family: "Lilita One"; src: url("fonts/LilitaOne-Regular.ttf") format("truetype"); font-display: swap; }
@font-face { font-family: "Nunito"; src: url("fonts/Nunito-Black.ttf") format("truetype"); font-weight: 900; font-display: swap; }
@font-face { font-family: "Saira Condensed"; src: url("fonts/SairaCondensed-ExtraBold.ttf") format("truetype"); font-weight: 800; font-display: swap; }

:root {
  --ink: #0D0326; --night: #12052F; --deep: #1C0747; --royal: #2E0B72; --plum: #3E0F9A;
  --violet: #6A1FE0; --lilac: #CBB0FF; --mist: #F6F1FF; --pink: #F0469E; --gold: #FFD23F;
  --text: #241446; --text2: #5B4A85;
  --display: "Lilita One", "Nunito", system-ui, sans-serif;
  --label: "Saira Condensed", "Arial Narrow", system-ui, sans-serif;
  --body: system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
}
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; background: var(--deep); color: var(--text); font: 16px/1.65 var(--body);
  background-image: radial-gradient(circle at 1px 1px, rgba(255,255,255,.07) 1px, transparent 1.4px); background-size: 6px 6px; }
a { color: var(--violet); }
:focus-visible { outline: 3px solid var(--gold); outline-offset: 2px; }

.bar { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px; max-width: 880px; margin: 0 auto; padding: 22px 16px 18px; }
.bar a.home { display: block; }
.bar svg { display: block; height: 30px; width: auto; }
.bar nav { display: flex; flex-wrap: wrap; gap: 4px; }
.bar nav a { font: 800 13px/1 var(--label); letter-spacing: .1em; text-transform: uppercase; text-decoration: none; color: var(--lilac);
  padding: 7px 10px; border-radius: 999px; border: 2px solid transparent; }
.bar nav a:hover { color: #fff; }
.bar nav a[aria-current="page"] { color: var(--ink); background: var(--gold); border-color: var(--ink); }

main { max-width: 880px; margin: 0 auto 40px; padding: 0 16px; }
.paper { background: #fff; border: 4px solid var(--ink); border-radius: 24px; box-shadow: 0 8px 0 var(--ink); padding: clamp(22px, 5vw, 52px); }
.paper h1 { margin: 0 0 4px; font: 400 clamp(36px, 6vw, 56px)/1.05 var(--display); color: var(--ink); }
.paper h1 + p { margin: 0 0 22px; color: var(--text2); }
.paper h2 { margin: 36px 0 10px; font: 400 clamp(22px, 3vw, 27px)/1.2 var(--display); color: var(--royal); scroll-margin-top: 16px; }
.paper p, .paper li { max-width: 72ch; }
.paper ul, .paper ol { padding-left: 1.3em; }
.paper li { margin: 6px 0; }
.paper li::marker { color: var(--pink); }
mark.ph { background: #FFE9A6; color: var(--ink); border-radius: 4px; padding: 0 3px; font-weight: 700; }

.toc { margin: 0 0 8px; padding: 16px 18px; background: var(--mist); border-radius: 14px; border: 2px solid #E4D8FF; }
.toc b { display: block; font: 800 13px/1 var(--label); letter-spacing: .14em; text-transform: uppercase; color: var(--text2); margin-bottom: 10px; }
.toc ol { margin: 0; padding: 0; list-style: none; columns: 2 220px; column-gap: 24px; }
.toc li { margin: 0 0 6px; break-inside: avoid; font-size: 15px; }
.toc a { text-decoration: none; }
.toc a:hover { text-decoration: underline; }

.tbl { overflow-x: auto; margin: 14px 0 18px; border: 2px solid #E4D8FF; border-radius: 14px; }
table { border-collapse: collapse; width: 100%; font-size: 15px; }
th, td { text-align: left; vertical-align: top; padding: 10px 14px; border-bottom: 1px solid #EEE6FF; }
th { background: var(--mist); font: 800 13px/1.3 var(--label); letter-spacing: .1em; text-transform: uppercase; color: var(--text2); }
tr:last-child td { border-bottom: 0; }

footer { max-width: 880px; margin: 0 auto; padding: 0 16px 40px; color: var(--lilac); font-size: 14px; display: flex; gap: 8px 20px; flex-wrap: wrap; justify-content: space-between; }
footer a { color: #fff; }