/* even · Privacy, Terms and Support
   Loaded after css/site.css, which brings the tokens, fonts, header, brand and footer.
   This file only lays out the reading column (about 70 characters a line) and the footer sheet.
   Cached for a year: bump ?v= on its link in privacy/, terms/ and support/ after editing it. */

/* ---------------------------------------------------------------- page */
.doc-page { background: var(--page); }
.doc { position: relative; isolation: isolate; padding: 20px 20px 0; }
/* the same soft peach light as the home hero, kept faint behind the title */
.doc::before { content: ""; position: absolute; z-index: -1; left: 0; right: 0; top: -58px; height: 420px; pointer-events: none;
  background: radial-gradient(70% 60% at 18% 20%, rgba(255, 227, 204, .75), rgba(255, 227, 204, 0) 72%); }
.doc__grid { display: grid; grid-template-columns: minmax(0, 1fr); }
.doc__body { width: 100%; max-width: 34em; margin: 0 auto; font-size: 17px; line-height: 1.65; color: var(--ink); }

/* ---------------------------------------------------------------- title */
.doc__head { padding: 8px 0 26px; border-bottom: 1px solid var(--line); margin-bottom: 26px; }
.doc__body h1 { font-family: var(--font-display); font-weight: 700; font-size: 38px; line-height: 1.08; letter-spacing: -0.015em; }
.doc__date { margin-top: 10px; font-size: 15px; font-weight: 600; color: var(--muted); }
.doc__intro { font-size: 18px; line-height: 1.6; color: var(--dark); }

/* ---------------------------------------------------------------- text */
.doc__body section { margin-top: 38px; scroll-margin-top: 16px; }
.doc__body h2 { font-family: var(--font-display); font-weight: 600; font-size: 24px; line-height: 1.2; letter-spacing: -0.005em; }
.doc__body h3 { margin-top: 26px; font-weight: 800; font-size: 17px; line-height: 1.4; }
.doc__body h2 + p, .doc__body h2 + ul { margin-top: 10px; }
.doc__body h3 + p { margin-top: 4px; }
.doc__body p + p, .doc__body ul + p, .doc__body p + ul { margin-top: 14px; }
.doc__body strong { font-weight: 800; }
.doc__body ul { margin: 0; padding: 0; list-style: none; }
.doc__body li { position: relative; padding-left: 22px; }
.doc__body li + li { margin-top: 10px; }
.doc__body li::before { content: ""; position: absolute; left: 4px; top: .7em; width: 7px; height: 7px; border-radius: 50%; background: var(--amber); }
.doc__body a { color: var(--ink); font-weight: 700; text-decoration: underline; text-decoration-color: rgba(184, 122, 14, .55); text-decoration-thickness: 1.5px; text-underline-offset: 3px; border-radius: 3px; overflow-wrap: anywhere; }
@media (hover: hover) { .doc__body a:hover { text-decoration-color: var(--amber-deep); text-decoration-thickness: 2px; } }

/* links to the other two pages, and back home */
.doc__also { margin-top: 40px; display: flex; flex-wrap: wrap; gap: 4px 10px; font-size: 16px; }
.doc__also span { color: var(--faint); }
.doc__back { margin-top: 40px; }
.doc__body .doc__back a { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; text-decoration: none; font-weight: 800; font-size: 16px; }
.doc__back svg { width: 16px; height: 16px; flex: none; transition: transform .25s var(--ease-out-expo); }
@media (hover: hover) { .doc__body .doc__back a:hover svg { transform: translateX(-3px); } }

/* ---------------------------------------------------------------- footer: its own amber sheet, like the home page's last section */
.ftr--doc { margin-top: 72px; padding-top: 34px; border-radius: 32px 32px 0 0; }
.ftr--doc .ftr__in::before { display: none; }

/* ---------------------------------------------------------------- wide screens */
@media (min-width: 960px) {
  .doc-page .hdr::before { box-shadow: 0 1px 0 rgba(38, 32, 29, .08); }
  .doc { padding: 56px var(--side) 0; }
  /* behind the title, and already clear where it meets the frosted header */
  .doc::before { top: 0; height: 420px; background: radial-gradient(620px 170px at 38% 130px, rgba(255, 227, 204, .75), rgba(255, 227, 204, 0) 72%); }
  .doc__body { font-size: 18px; line-height: 1.7; }
  .doc__head { padding: 0 0 32px; margin-bottom: 32px; }
  .doc__body h1 { font-size: 54px; line-height: 1.04; letter-spacing: -0.018em; }
  .doc__date { margin-top: 14px; font-size: 16px; }
  .doc__intro { font-size: 19px; }
  .doc__body section { margin-top: 46px; scroll-margin-top: 0; }
  .doc__body h2 { font-size: 28px; }
  .doc__body h3 { font-size: 18px; }
  .ftr--doc { margin-top: 120px; padding-top: 48px; border-radius: 48px 48px 0 0; }
}

@media (prefers-reduced-motion: no-preference) { html { scroll-behavior: smooth; } }