/* Shared styling for legal pages. Same tokens and type stack as index.html —
   these are the same site, not a bolted-on annex. Kept as one file rather than
   inlined twice because a second app (MtEvidence) will want the same pages. */

:root {
  --stone:      #dedcd5;
  --stone-deep: #cdcac1;
  --ink:        #191a18;
  --ink-soft:   #6a6c65;
  --moss:       #2f4739;
  --rule:       rgba(25, 26, 24, 0.16);
}

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

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  min-height: 100vh;
  background: var(--stone);
  background-image:
    radial-gradient(120% 90% at 15% 0%, rgba(255,255,255,0.55) 0%, rgba(255,255,255,0) 60%),
    radial-gradient(100% 80% at 100% 100%, rgba(47,71,57,0.10) 0%, rgba(47,71,57,0) 65%);
  background-attachment: fixed;
  color: var(--ink);
  font-family: "Newsreader", Georgia, serif;
  font-optical-sizing: auto;
  font-size: 17px;
  line-height: 1.65;
  padding: 8vh 7vw 12vh;
}

main { width: 100%; max-width: 41rem; margin-inline: auto; }

/* — Masthead — */
.back {
  display: inline-block;
  margin: 0 0 2.4rem;
  font-family: "IBM Plex Mono", ui-monospace, monospace;
  font-size: 0.7rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--ink-soft);
  text-decoration: none;
  border-bottom: 1px solid transparent;
}
.back:hover { color: var(--moss); border-bottom-color: rgba(47,71,57,0.3); }
.back:focus-visible { outline: 2px solid var(--moss); outline-offset: 3px; }

h1 {
  margin: 0;
  font-family: "Archivo", "Helvetica Neue", Arial, sans-serif;
  font-variation-settings: "wdth" 116, "wght" 600;
  font-size: clamp(1.9rem, 6.5vw, 3rem);
  line-height: 1.05;
  letter-spacing: -0.015em;
  text-transform: uppercase;
}

.stamp {
  margin: 0.6rem 0 0;
  font-family: "IBM Plex Mono", ui-monospace, monospace;
  font-size: 0.7rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ink-soft);
}

.lede {
  margin: 2rem 0 0;
  font-size: clamp(1.1rem, 3.2vw, 1.3rem);
  line-height: 1.5;
  font-weight: 300;
  max-width: 34ch;
}
.lede em { font-style: italic; color: var(--moss); }

hr {
  border: 0;
  border-top: 1px solid var(--rule);
  margin: 2.8rem 0 2.2rem;
}

/* — Sections — */
h2 {
  margin: 3rem 0 1rem;
  font-family: "IBM Plex Mono", ui-monospace, monospace;
  font-size: 0.7rem;
  font-weight: 500;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--ink-soft);
}
h2:first-of-type { margin-top: 0; }

h3 {
  margin: 1.9rem 0 0.5rem;
  font-family: "Archivo", sans-serif;
  font-variation-settings: "wdth" 110, "wght" 600;
  font-size: 1rem;
  letter-spacing: 0.01em;
}

p { margin: 0 0 1rem; }
p:last-child { margin-bottom: 0; }

strong { font-weight: 500; color: var(--moss); }

a { color: var(--moss); text-decoration: none; border-bottom: 1px solid rgba(47,71,57,0.3); }
a:hover { border-bottom-color: var(--moss); }
a:focus-visible { outline: 2px solid var(--moss); outline-offset: 3px; }

ul { margin: 0 0 1rem; padding-left: 1.1rem; }
li { margin-bottom: 0.45rem; }
li:last-child { margin-bottom: 0; }

/* — The claim ledger: what stays, what goes — */
.ledger { list-style: none; margin: 0 0 1rem; padding: 0; }
.ledger li {
  padding: 0.9rem 0;
  border-bottom: 1px solid var(--rule);
  margin: 0;
}
.ledger li:last-child { border-bottom: 0; }
.ledger .what {
  font-family: "Archivo", sans-serif;
  font-variation-settings: "wdth" 110, "wght" 600;
  font-size: 0.95rem;
}
.ledger .note { color: var(--ink-soft); font-size: 0.95rem; display: block; }

/* — Callout for the things that actually matter — */
.callout {
  margin: 1.6rem 0;
  padding: 1.1rem 1.3rem;
  border-left: 2px solid var(--moss);
  background: rgba(47, 71, 57, 0.055);
}
.callout p { margin-bottom: 0.6rem; }
.callout p:last-child { margin-bottom: 0; }

/* — Tables of permissions — */
.perms { width: 100%; border-collapse: collapse; margin: 0 0 1rem; font-size: 0.95rem; }
.perms th {
  text-align: left;
  padding: 0.55rem 0.9rem 0.55rem 0;
  border-bottom: 1px solid var(--rule);
  font-family: "IBM Plex Mono", ui-monospace, monospace;
  font-size: 0.66rem;
  font-weight: 500;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ink-soft);
}
.perms td { padding: 0.6rem 0.9rem 0.6rem 0; border-bottom: 1px solid var(--rule); vertical-align: top; }
.perms td:first-child {
  font-family: "IBM Plex Mono", ui-monospace, monospace;
  font-size: 0.78rem;
  white-space: nowrap;
  color: var(--moss);
}
.perms tr:last-child td { border-bottom: 0; }

.scroll-x { overflow-x: auto; margin: 0 0 1rem; }

footer {
  margin-top: 3.4rem;
  padding-top: 1.4rem;
  border-top: 1px solid var(--rule);
  font-family: "IBM Plex Mono", ui-monospace, monospace;
  font-size: 0.72rem;
  line-height: 1.9;
  letter-spacing: 0.03em;
  color: var(--ink-soft);
}

@media (max-width: 30rem) {
  body { font-size: 16px; }
  .perms td:first-child { white-space: normal; }
}