/* Korkunova legal pages (/terms/, /privacy/): one centred reading column under the shared site header, followed by
   the site footer. Every rule is scoped under body.page-legal so the other pages never move. Below 1100 the column
   is fluid with px type; from 1100 it scales with the page like the rest of the site (--u = 100cqw / 2048, from
   style.css), so nothing is capped on a wide screen. */

:root {
  --lg-cream: #F9F1EB;
  --lg-ink-h1: #313335;
  --lg-ink-h2: #373638;
  --lg-ink-body: #3A3938;
  --lg-rose: #B57F78;
  --lg-rule: #D9C7B4;
  --lg-link: #8E5F59;
}

/* body is a size container, so its background does not reach the canvas: html carries it too. */
html:has(> body.page-legal) { background: var(--lg-cream); }
body.page-legal { background: var(--lg-cream); }
body.page-legal .site-header, body.page-legal .nav { background: var(--lg-cream); }

body.page-legal .legal-main { padding: 40px 20px 64px; }
body.page-legal .legal-inner { max-width: 680px; margin: 0 auto; }

body.page-legal .legal-head { text-align: center; padding-bottom: 28px; border-bottom: 1px solid var(--lg-rule); }
body.page-legal .legal-eyebrow {
  font-family: var(--sans); font-size: 13px; letter-spacing: 0.3em; margin-right: -0.3em; color: var(--lg-rose);
}
body.page-legal .legal-title {
  margin-top: 12px; font-family: var(--serif); font-weight: 300; font-size: clamp(40px, 9vw, 60px); line-height: 1.08;
  color: var(--lg-ink-h1);
}
body.page-legal .legal-updated {
  margin-top: 14px; font-family: var(--book); font-style: italic; font-size: 17px; color: var(--lg-ink-body);
}

body.page-legal .legal-body {
  margin-top: 28px; font-family: var(--book); font-size: 18px; line-height: 1.65; color: var(--lg-ink-body);
}
body.page-legal .legal-body h2 {
  margin: 36px 0 10px; font-family: var(--serif); font-weight: 500; font-size: 19px; line-height: 1.25;
  letter-spacing: 0.12em; text-transform: uppercase; color: var(--lg-ink-h2);
}
body.page-legal .legal-body h2:first-child { margin-top: 0; }
body.page-legal .legal-body p + p { margin-top: 14px; }
body.page-legal .legal-body a {
  color: var(--lg-link); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 0.18em;
}
body.page-legal .legal-body a:hover { color: var(--lg-ink-h1); }
body.page-legal .legal-body a:focus-visible { outline: 2px solid var(--lg-ink-h1); outline-offset: 3px; }

@media (min-width: 1100px) {
  body.page-legal .legal-main { padding: calc(96 * var(--u)) 0 calc(150 * var(--u)); }
  body.page-legal .legal-inner { max-width: none; width: calc(1180 * var(--u)); }
  body.page-legal .legal-head { padding-bottom: calc(52 * var(--u)); }
  body.page-legal .legal-eyebrow { font-size: max(13px, calc(19 * var(--u))); }
  body.page-legal .legal-title { margin-top: calc(18 * var(--u)); font-size: calc(104 * var(--u)); }
  body.page-legal .legal-updated { margin-top: calc(22 * var(--u)); font-size: max(17px, calc(26 * var(--u))); }
  body.page-legal .legal-body { margin-top: calc(56 * var(--u)); font-size: max(18px, calc(28 * var(--u))); }
  body.page-legal .legal-body h2 { margin: calc(64 * var(--u)) 0 calc(16 * var(--u)); font-size: max(20px, calc(32 * var(--u))); }
  body.page-legal .legal-body h2:first-child { margin-top: 0; }
  body.page-legal .legal-body p + p { margin-top: calc(22 * var(--u)); }
}