/* legal.css: shared styles for terms & privacy pages */
@font-face {
  font-family: 'Mathem';
  src: url('fonts/mathem.ttf') format('truetype');
  font-weight: 400 700;
  font-display: swap;
}
:root {
  color-scheme: light dark;
  --paper: #FAF9F4;
  --ink: #1C1B19;
  --soft: #4B4A45;
  --faded: #9C998F;
  --faded-2: #C7C4BA;
  --accent: #E5484D;
  --rule: rgba(28,27,25,0.10);
  --select: rgba(229,72,77,0.16);
  --ph-bg: rgba(229,72,77,0.09);
  --ph-line: rgba(229,72,77,0.5);
  --link-line: rgba(229,72,77,0.35);
}
@media (prefers-color-scheme: dark) {
  :root {
    --paper: #14130F;
    --ink: #ECEAE0;
    --soft: #B4B0A6;
    --faded: #807C72;
    --faded-2: #565249;
    --accent: #F06A6E;
    --rule: rgba(236,234,224,0.13);
    --select: rgba(240,106,110,0.22);
    --ph-bg: rgba(240,106,110,0.14);
    --ph-line: rgba(240,106,110,0.55);
    --link-line: rgba(240,106,110,0.45);
  }
}
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: 'Newsreader', Georgia, 'Times New Roman', serif;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
a { color: inherit; }
.wm { font-family: 'Mathem', cursive; line-height: 1; }
.hand { font-family: 'Mathem', cursive; }
.dot { color: var(--accent); }
::selection { background: var(--select); }

.wrap { width: min(680px, 90vw); margin: 0 auto; }

/* top bar */
.topbar {
  display: flex; align-items: baseline; justify-content: space-between;
  padding-top: 30px;
}
.topbar .back { font-family: 'Mathem', cursive; font-size: 23px; color: var(--faded); text-decoration: none; transition: color .2s ease; white-space: nowrap; }
.topbar .back:hover { color: var(--ink); }
.topbar .wm { text-decoration: none; }

/* document head */
.dochead { padding-top: 60px; padding-bottom: 14px; }
.dochead h1 {
  font-family: 'Mathem', cursive;
  font-weight: 600;
  font-size: clamp(46px, 9vw, 68px);
  margin: 0 0 6px;
  line-height: 1;
  letter-spacing: -0.5px;
}
.dochead .meta {
  font-family: 'Mathem', cursive;
  font-size: 21px; color: var(--faded);
}
.lede {
  font-size: 19px; line-height: 1.6; color: var(--soft);
  margin: 18px 0 0; max-width: 60ch;
}

hr.div { border: none; border-top: 1px solid var(--rule); margin: 40px 0; }

/* sections */
.doc { padding-bottom: 90px; }
.doc section { padding-top: 38px; scroll-margin-top: 24px; }
.doc h2 {
  font-family: 'Mathem', cursive;
  font-weight: 600;
  font-size: 33px;
  line-height: 1.1;
  margin: 0 0 4px;
  display: flex; align-items: baseline; gap: 12px;
}
.doc h2 .num { color: var(--accent); font-size: 26px; min-width: 1.4em; }
.doc p { font-size: 18px; line-height: 1.68; color: var(--soft); margin: 12px 0; max-width: 64ch; }
.doc p strong { color: var(--ink); font-weight: 600; }
.doc ul { margin: 12px 0; padding-left: 22px; max-width: 64ch; }
.doc li { font-size: 18px; line-height: 1.62; color: var(--soft); margin: 7px 0; }
.doc a.link { color: var(--accent); text-decoration: none; border-bottom: 1px solid var(--link-line); }
.doc a.link:hover { border-bottom-color: var(--accent); }
.ph { background: var(--ph-bg); border-bottom: 1px dashed var(--ph-line); padding: 0 3px; border-radius: 2px; font-style: normal; }

/* table of contents */
.toc { margin-top: 30px; }
.toc-title { font-family: 'Mathem', cursive; font-size: 21px; color: var(--faded); margin-bottom: 8px; }
.toc ol { margin: 0; padding-left: 20px; columns: 2; column-gap: 34px; }
.toc li { font-size: 16px; line-height: 1.7; color: var(--soft); }
.toc a { text-decoration: none; transition: color .2s ease; }
.toc a:hover { color: var(--accent); }

/* footer */
.foot {
  border-top: 1px solid var(--rule);
  padding: 28px 0 56px;
  display: flex; flex-wrap: wrap; gap: 14px; align-items: baseline; justify-content: space-between;
}
.foot nav { display: flex; gap: 22px; font-family: 'Mathem', cursive; font-size: 21px; color: var(--faded); }
.foot a { text-decoration: none; transition: color .2s ease; white-space: nowrap; }
.foot a:hover { color: var(--ink); }
.foot .copy { font-family: 'Mathem', cursive; font-size: 18px; color: var(--faded-2); width: 100%; }

@media (max-width: 560px) {
  .toc ol { columns: 1; }
}