/* The reading pages (/privacy, /support): the site's tokens and type, no 3D. Same values as index.html. */
@import url("https://fonts.googleapis.com/css2?family=Newsreader:opsz,wght@6..72,400;6..72,500&display=swap");
:root {
  --ground: #4A3628; --paper: #6E4A32; --rule: #4E453E;
  --cream: #EBD5BD; --ink: #ECE6DE; --quiet: #B3A99F; --brand: #F97829; --on-brand: #1C1C1E;
  --display: Newsreader, "New York", ui-serif, Georgia, serif;
  --sans: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Segoe UI", Roboto, "Helvetica Neue", sans-serif;
  --s1: 8px; --s2: 16px; --s3: 24px; --s4: 32px; --s6: 48px; --s8: 64px;
  --h2: 64px; --slogan: 34px; --gutter: 56px;
}
@media (max-width: 1099px) { :root { --h2: 56px; --slogan: 30px; --gutter: 48px; } }
@media (max-width: 699px) { :root { --h2: 36px; --slogan: 28px; --gutter: 16px; } }
* { box-sizing: border-box; }
html { background: var(--ground); -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--ground); color: var(--ink); font: 17px/1.6 var(--sans); -webkit-font-smoothing: antialiased; }
.skip { position: fixed; left: var(--gutter); top: 12px; z-index: 60; padding: 8px 14px; color: var(--cream); background: var(--ground); transform: translateY(-200%); }
.skip:focus { transform: none; }
:focus-visible { outline: 2px solid var(--brand); outline-offset: 3px; border-radius: 4px; }
.frame { position: sticky; z-index: 50; top: 0; display: flex; justify-content: space-between; align-items: center; gap: var(--s2); padding: var(--s3) var(--gutter); background: var(--ground); }
.mark { font: 500 26px/1 var(--display); color: var(--cream); letter-spacing: -0.012em; text-decoration: none; }
.button { display: inline-block; font: 500 16px/1 var(--sans); color: var(--cream); text-decoration: none; border: 1.5px solid var(--cream); border-radius: 999px; padding: 12px 18px; white-space: nowrap; transition: background-color .12s ease-out, color .12s ease-out; }
.button:hover { background: rgba(235,213,189,.10); }
.button:active { transform: translateY(1px); }
.button.primary { color: var(--on-brand); background: var(--brand); border-color: var(--brand); }
.button.primary:hover { filter: brightness(1.06); }
.frame .button { background: var(--on-brand); }
.frame .button:hover { background: #2A2A2C; }
.page { padding: var(--s8) var(--gutter) var(--s8); }
.page .inner { max-width: 40rem; }
.page h1 { font: 500 var(--h2)/1.06 var(--display); color: var(--cream); letter-spacing: -0.012em; margin: 0 0 var(--s2); overflow-wrap: break-word; }
.page h2 { font: 500 26px/1.2 var(--display); color: var(--cream); margin: var(--s6) 0 var(--s2); }
.page p, .page li { font: 17px/1.6 var(--sans); margin: 0 0 var(--s2); }
.page .lead { font-size: 19px; }
.page .dated { color: var(--quiet); margin-bottom: var(--s4); }
.page ul, .page ol { padding-left: 1.2em; margin: 0 0 var(--s2); }
.page strong { color: var(--cream); font-weight: 600; }
.page a:not(.button) { color: var(--ink); text-decoration-color: var(--cream); text-underline-offset: 3px; text-decoration-thickness: 1px; overflow-wrap: anywhere; }
.page a:not(.button):hover, .page a:not(.button):focus-visible { color: var(--cream); text-decoration-thickness: 2px; }
.page .acts { margin: var(--s3) 0; }
.page .quiet { color: var(--quiet); }
footer.site { background: var(--paper); border-top: 1px solid var(--rule); padding: var(--s8) var(--gutter) var(--s6); color: var(--ink); font: 15px/1.5 var(--sans); }
footer .row { display: flex; justify-content: space-between; align-items: center; gap: var(--s4); flex-wrap: wrap; }
footer .row + .row { margin-top: var(--s6); }
footer .slogan { margin: 0; font: 500 var(--slogan)/1.1 var(--display); color: var(--cream); letter-spacing: -0.01em; }
footer nav a { display: inline-block; padding: 12px 0; color: var(--ink); text-decoration-color: var(--cream); text-underline-offset: 3px; text-decoration-thickness: 1px; }
footer nav a:hover, footer nav a:focus-visible { color: var(--cream); text-decoration-thickness: 2px; }
footer nav a[aria-current="page"] { color: var(--cream); text-decoration-thickness: 2px; }
footer nav .dot { padding: 0 0.45em; }
footer .copyright { margin: 0; }
@media (max-width: 699px) {
  .frame { padding-top: var(--s2); padding-bottom: var(--s2); }
  .mark { font-size: 22px; }
  .frame .button { font-size: 15px; padding: 10px 14px; }
  .page { padding-top: var(--s4); }
  footer.site { padding: var(--s6) var(--gutter); }
  footer .row { display: block; }
  footer .row > .button { margin-top: var(--s3); }
  footer nav { display: flex; flex-wrap: wrap; margin-top: var(--s3); }
  footer nav a { width: 50%; }
  footer nav .dot { display: none; }
  footer .copyright { margin-top: var(--s3); }
}