@font-face { font-family: Public Sans; src: url('../assets/fonts/PublicSans-400.ttf') }
@font-face { font-family: Public Sans; src: url('../assets/fonts/PublicSans-600.ttf'); font-weight: 600 }

:root {
  --paper: #f4f1e9;
  --surface: #fffdfa;
  --ink: #17211d;
  /* Long-form legal reading, so body copy sits near 7:1 rather than the 5.4:1
     the previous muted grey gave it. */
  --body: #414a45;
  --muted: #5d6761;
  --line: #c9cec8;
  --hairline: #e0ded4;
  --accent: #176a4e;
  --measure: 720px;
  --rail: 232px;
  --gutter: max(28px, calc((100vw - 1180px) / 2));
  --header: 69px;
}

* { box-sizing: border-box }

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: Public Sans, Arial, sans-serif;
  scroll-behavior: smooth;
}

@media (prefers-reduced-motion: reduce) {
  body { scroll-behavior: auto }
}

a { color: inherit; text-underline-offset: 4px }
:focus-visible { outline: 3px solid var(--accent); outline-offset: 4px }

.skip-link {
  position: fixed;
  z-index: 10;
  top: 8px;
  left: 8px;
  padding: 12px 16px;
  background: var(--accent);
  color: #fff;
  transform: translateY(-160%);
}

.skip-link:focus { transform: none }

/* Header and footer match the landing site's, so the policy does not read as a
   different property. */
.site-header {
  position: sticky;
  top: 0;
  z-index: 3;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  padding: 18px var(--gutter);
  border-bottom: 1px solid var(--line);
  background: color-mix(in srgb, var(--paper) 92%, transparent);
  backdrop-filter: blur(14px);
}

.brand {
  display: flex;
  align-items: center;
  gap: 10px;
  text-decoration: none;
  font-weight: 600;
}

.brand > span { display: grid; line-height: 1.25 }
.brand small { color: var(--muted); font-size: .7rem; font-weight: 400 }
.brand sup, footer sup { font-size: .62em; line-height: 0; vertical-align: super }

.back { font-size: .875rem; font-weight: 600; text-decoration: none }
.back:hover { color: var(--accent); text-decoration: underline }

.layout {
  display: grid;
  grid-template-columns: var(--rail) minmax(0, var(--measure));
  gap: 0 64px;
  justify-content: center;
  padding: 0 var(--gutter);
  align-items: start;
}

/* Nine sections over four screens of text needs a way in other than scrolling.
   The rail follows the reader on wide screens and sits inline above the policy
   on narrow ones. */
.contents {
  position: sticky;
  top: calc(var(--header) + 28px);
  padding: 72px 0 0;
}

.contents-heading {
  margin: 0 0 14px;
  color: var(--accent);
  font-size: .75rem;
  font-weight: 600;
  letter-spacing: .11em;
  text-transform: uppercase;
}

.contents ol {
  margin: 0;
  padding: 0;
  list-style: none;
  counter-reset: toc;
  border-top: 1px solid var(--hairline);
}

.contents li { counter-increment: toc; border-bottom: 1px solid var(--hairline) }

.contents a {
  display: grid;
  grid-template-columns: 26px 1fr;
  gap: 4px;
  padding: 9px 0;
  color: var(--body);
  font-size: .875rem;
  line-height: 1.45;
  text-decoration: none;
}

.contents a::before {
  content: counter(toc, decimal-leading-zero);
  color: var(--muted);
  font-variant-numeric: tabular-nums;
}

.contents a:hover { color: var(--accent) }

main { padding: 72px 0 96px; min-width: 0 }

h1 {
  margin: 0;
  font-size: clamp(2.5rem, 5.6vw, 4.2rem);
  line-height: 1.04;
  letter-spacing: -.05em;
  text-wrap: balance;
}

/* The two blocks the policy opens with: what this covers, then when it took
   effect and who to write to. */
main > h1 + p {
  margin: 20px 0 0;
  max-width: 46ch;
  color: var(--ink);
  font-size: 1.15rem;
  line-height: 1.6;
}

main > h1 + p + p {
  margin: 26px 0 0;
  padding: 16px 20px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-left: 3px solid var(--accent);
  font-size: .9375rem;
}

section { padding: 46px 0; border-top: 1px solid var(--line) }
section:first-of-type { margin-top: 46px }

h2 {
  margin: 0 0 18px;
  font-size: clamp(1.5rem, 2.6vw, 1.95rem);
  line-height: 1.18;
  letter-spacing: -.03em;
}

h3 { margin: 26px 0 8px; font-size: 1.0625rem }

/* Each heading is a permalink. The mark only appears on hover or focus so it
   never competes with the heading itself. */
.anchor {
  display: inline-flex;
  align-items: baseline;
  gap: .4em;
  text-decoration: none;
}

.anchor-mark { color: var(--accent); opacity: 0; font-weight: 400 }
.anchor:hover .anchor-mark, .anchor:focus-visible .anchor-mark { opacity: 1 }

p, li {
  color: var(--body);
  font-size: 1rem;
  line-height: 1.75;
}

section p { margin: 14px 0 0 }
section p:first-of-type { margin-top: 0 }

ul { display: grid; gap: 10px; margin: 16px 0 0; padding-left: 22px }

main a[href^="mailto:"] { color: var(--accent); font-weight: 600 }

.to-top { margin: 46px 0 0; padding-top: 26px; border-top: 1px solid var(--line); font-size: .875rem }
.to-top a { color: var(--accent); text-decoration: none; font-weight: 600 }
.to-top a:hover { text-decoration: underline }

footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  padding: 32px var(--gutter);
  border-top: 1px solid var(--line);
  font-size: .875rem;
}

.footer-links { display: flex; gap: 24px }
.footer-links a { text-decoration: none }
.footer-links a:hover { color: var(--accent); text-decoration: underline }

/* Anchored headings must clear the sticky header. */
:target { scroll-margin-top: calc(var(--header) + 20px) }

@media (max-width: 1080px) {
  .layout { grid-template-columns: minmax(0, var(--measure)); gap: 0 }

  .contents {
    position: static;
    padding: 56px 0 0;
    order: -1;
  }

  main { padding-top: 34px }
}

@media (max-width: 640px) {
  :root { --gutter: 20px }

  .site-header { padding: 14px var(--gutter) }
  .back span { display: none }
  .contents { padding-top: 40px }
  main { padding-bottom: 68px }
  section { padding: 34px 0 }
  section:first-of-type { margin-top: 34px }
  main > h1 + p + p { padding: 14px 16px }
  footer { flex-direction: column; align-items: flex-start; gap: 18px }
  .footer-links { flex-wrap: wrap; gap: 16px }
}