@font-face {
  font-family: "Little Now Serif";
  src: url("/assets/fonts/playfair-display-medium.woff2") format("woff2");
  font-style: normal;
  font-weight: 500;
  font-display: swap;
}

/*
  Caveat, cut down to Latin-1 and the punctuation block. The home page loads the
  whole face because three other places on it are written by hand; here the only
  hand-written thing is one line in the footer, and the full file is 109 KB
  against this one's 48. Regenerate it if that line ever needs a character
  outside those ranges, because a missing glyph falls back per character and
  nothing reports it:

    pyftsubset caveat-semibold.woff2 --unicodes="U+0020-007E,U+00A0-00FF,U+2010-2027" \
      --flavor=woff2 --output-file=caveat-semibold-latin.woff2
*/
@font-face {
  font-family: "Little Now Hand";
  src: url("/assets/fonts/caveat-semibold-latin.woff2") format("woff2");
  font-style: normal;
  font-weight: 600;
  font-display: swap;
}

:root {
  --paper: #f2e8d6;
  --ivory: #ebdec7;
  --card: #f9efdc;
  --ink: #211e1a;
  --ink-soft: #5c564c;
  --clay-deep: #9d4a32;
  --blue: #5e98cf;
  --focus: #32658f;
  --sage-deep: #60654b;
  --yellow: #f0b03d;
  --line: #d7c5a6;
  --serif: "Little Now Serif", Georgia, "Times New Roman", serif;
  --sans: ui-rounded, "Avenir Next", Avenir, "Segoe UI", sans-serif;
  --hand: "Little Now Hand", "Comic Sans MS", cursive;
  --ink-faint: #686253;
}

* {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
}

body {
  min-width: 320px;
  margin: 0;
  background-color: var(--paper);
  background-image: url("/assets/brand/paper-grain.webp");
  background-size: 171px 171px;
  color: var(--ink);
  font-family: var(--sans);
  font-size: 17px;
  line-height: 1.68;
  -webkit-font-smoothing: antialiased;
}

a {
  color: var(--clay-deep);
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
}

a:hover {
  text-decoration-thickness: 2px;
}

a:focus-visible,
button:focus-visible,
[tabindex="0"]:focus-visible {
  outline: 3px solid var(--focus);
  outline-offset: 4px;
}

.contact-card a:focus-visible {
  outline-color: var(--yellow);
}

.skip-link {
  position: fixed;
  top: 14px;
  left: 14px;
  z-index: 20;
  min-height: 44px;
  padding: 9px 16px;
  border-radius: 999px;
  background: var(--ink);
  color: var(--card);
  font-size: 14px;
  font-weight: 750;
  translate: 0 -180%;
  transition: translate 160ms ease;
}

.skip-link:focus {
  translate: 0 0;
}

.legal-header {
  width: min(1120px, calc(100% - 48px));
  margin: 0 auto;
  padding: 30px 0 22px;
  border-bottom: 1px solid var(--line);
}

.legal-header-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 28px;
}

.brand {
  display: block;
  width: 174px;
  border-radius: 6px;
}

.brand img {
  display: block;
  width: 100%;
  height: auto;
}

.legal-nav {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px 22px;
}

.legal-nav a {
  min-height: 44px;
  display: inline-flex;
  align-items: center;
  color: var(--ink-soft);
  font-size: 14px;
  font-weight: 700;
  text-decoration: none;
}

.legal-nav a[aria-current="page"],
.legal-nav a:hover {
  color: var(--ink);
  text-decoration: underline;
  text-underline-offset: 5px;
}

.legal-shell {
  width: min(760px, calc(100% - 48px));
  margin: 0 auto;
  padding: 72px 0 96px;
}

.legal-kicker {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 0 0 16px;
  color: var(--clay-deep);
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.13em;
  text-transform: uppercase;
}

.legal-kicker::before {
  width: 28px;
  height: 3px;
  border-radius: 999px;
  background: var(--clay-deep);
  content: "";
}

h1,
h2,
h3 {
  font-family: var(--serif);
  font-weight: 500;
}

h1 {
  margin: 0;
  font-size: clamp(2.7rem, 8vw, 4.6rem);
  letter-spacing: -0.038em;
  line-height: 0.99;
}

.legal-lede {
  max-width: 690px;
  margin: 24px 0 0;
  color: var(--ink-soft);
  font-size: 1.08rem;
}

.updated {
  margin: 18px 0 0;
  color: var(--sage-deep);
  font-size: 14px;
  font-weight: 750;
}

.summary-card {
  position: relative;
  margin: 48px 0 0;
  padding: 30px;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: 22px;
  background: color-mix(in srgb, var(--card) 94%, transparent);
  box-shadow: 0 22px 55px rgba(74, 53, 32, 0.08);
}

.summary-card::after {
  position: absolute;
  right: -46px;
  bottom: -52px;
  width: 120px;
  height: 120px;
  border: 13px solid color-mix(in srgb, var(--yellow) 80%, transparent);
  border-radius: 50%;
  content: "";
  rotate: -11deg;
}

.summary-card h2 {
  margin: 0 0 12px;
  border: 0;
  padding: 0;
  font-size: 1.65rem;
}

.summary-card p:last-child,
.summary-card ul:last-child {
  margin-bottom: 0;
}

.contents {
  margin: 28px 0 0;
  padding: 18px 22px;
  border-left: 3px solid var(--blue);
  background: rgba(249, 239, 220, 0.56);
}

.contents strong {
  display: block;
  margin-bottom: 8px;
  font-size: 14px;
}

.contents ul {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 6px 24px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.contents a {
  display: inline-flex;
  min-height: 32px;
  align-items: center;
}

.legal-section {
  scroll-margin-top: 28px;
}

.legal-section h2 {
  margin: 56px 0 16px;
  padding-top: 30px;
  border-top: 1px solid var(--line);
  font-size: clamp(1.65rem, 4vw, 2.05rem);
  letter-spacing: -0.018em;
  line-height: 1.16;
}

.legal-section h3 {
  margin: 30px 0 10px;
  font-size: 1.25rem;
  line-height: 1.25;
}

p,
ul,
ol,
dl,
table {
  margin: 0 0 18px;
}

ul,
ol {
  padding-left: 1.25rem;
}

li {
  margin-bottom: 8px;
}

strong {
  font-weight: 760;
}

.notice {
  margin: 24px 0;
  padding: 20px 22px;
  border-left: 4px solid var(--clay-deep);
  border-radius: 0 12px 12px 0;
  background: rgba(249, 239, 220, 0.72);
}

.notice p:last-child {
  margin-bottom: 0;
}

.data-list {
  display: grid;
  gap: 12px;
  margin: 24px 0;
}

.data-item {
  padding: 20px 22px;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: rgba(249, 239, 220, 0.58);
}

.data-item h3 {
  margin: 0 0 7px;
  font-family: var(--sans);
  font-size: 1rem;
  font-weight: 800;
}

.data-item p:last-child {
  margin-bottom: 0;
}

.table-wrap {
  margin: 24px 0;
  overflow-x: auto;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: rgba(249, 239, 220, 0.58);
}

table {
  width: 100%;
  min-width: 620px;
  border-collapse: collapse;
  font-size: 15px;
}

th,
td {
  padding: 16px 18px;
  border-bottom: 1px solid var(--line);
  text-align: left;
  vertical-align: top;
}

th {
  color: var(--ink-soft);
  font-size: 12px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

tr:last-child td {
  border-bottom: 0;
}

code {
  padding: 0.12em 0.35em;
  border-radius: 4px;
  background: rgba(33, 30, 26, 0.07);
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 0.88em;
}

.contact-card {
  margin-top: 32px;
  padding: 28px;
  border-radius: 18px;
  background: var(--ink);
  color: var(--card);
}

.contact-card h2,
.contact-card h3 {
  margin-top: 0;
  color: inherit;
}

.contact-card a {
  color: var(--card);
  font-weight: 800;
}

/*
  The same footer the home page ends on, so the five pages read as one site.
  Kept in step with the .site-footer block in index.html by hand: there is no
  shared stylesheet between them, and there never was.
*/
.legal-footer {
  position: relative;
  overflow: hidden;
  border-top: 1px solid var(--line);
  background: var(--ivory);
}

.footer-watermark {
  position: absolute;
  top: 50%;
  right: -66px;
  width: 300px;
  height: auto;
  opacity: 0.09;
  pointer-events: none;
  transform: translateY(-50%) rotate(-7deg);
}

.legal-footer-inner {
  position: relative;
  width: min(1120px, calc(100% - 48px));
  margin: 0 auto;
  display: grid;
  justify-items: center;
  gap: 22px;
  padding: 60px 0 40px;
  text-align: center;
}

.footer-mark {
  display: block;
  width: 176px;
  height: auto;
}

.footer-said {
  max-width: 22ch;
  margin: 0;
  color: var(--ink);
  font-family: var(--hand);
  font-size: 30px;
  line-height: 1.2;
}

.footer-rule {
  width: 46px;
  height: 1px;
  background: rgba(33, 30, 26, 0.2);
}

.legal-footer-nav {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 10px 30px;
}

.legal-footer-nav a {
  display: inline-flex;
  min-height: 26px;
  align-items: center;
  border-bottom: 1.5px solid transparent;
  color: var(--ink-soft);
  font-size: 14px;
  font-weight: 620;
  text-decoration: none;
  transition: color 180ms ease, border-color 180ms ease;
}

/*
  clay-deep, not clay. Plain clay measures 2.77:1 against the ivory this footer
  sits on. clay-deep is 4.57 here and 5.00 against the card the chips lift to.
*/
.legal-footer-nav a:hover {
  border-color: var(--clay-deep);
  color: var(--clay-deep);
}

.footer-social {
  display: flex;
  gap: 10px;
}

/*
  Icon only, so the label is written out on each link. 44px because that is the
  smallest target a thumb should have to find. Scoped to .footer-social to match
  index.html, where .social-link is also worn by a wide icon-and-word pill.
*/
.footer-social .social-link {
  display: inline-flex;
  width: 44px;
  height: 44px;
  align-items: center;
  justify-content: center;
  border: 1px solid rgba(33, 30, 26, 0.18);
  border-radius: 999px;
  color: var(--ink-soft);
  text-decoration: none;
  transition: color 180ms ease, border-color 180ms ease, background 180ms ease;
}

.footer-social .social-link:hover {
  border-color: var(--clay-deep);
  background: var(--card);
  color: var(--clay-deep);
}

.social-icon {
  flex: none;
}

.footer-fine {
  position: relative;
  margin: 0;
  padding-bottom: 30px;
  color: var(--ink-faint);
  font-size: 12.5px;
  text-align: center;
}

@media (max-width: 760px) {
  .legal-header,
  .legal-shell,
  .legal-footer-inner {
    width: min(100% - 32px, 760px);
  }

  .legal-header-inner {
    align-items: flex-start;
    flex-direction: column;
  }

  .legal-header-inner {
    gap: 14px;
  }

  .legal-nav {
    gap: 0 18px;
  }

  .legal-shell {
    padding: 52px 0 74px;
  }

  .contents ul {
    grid-template-columns: 1fr;
  }

  .summary-card,
  .contact-card {
    padding: 24px 20px;
  }

  .legal-footer-inner {
    gap: 20px;
    padding: 44px 0 32px;
  }

  .footer-said {
    font-size: 26px;
  }

  .footer-watermark {
    right: -104px;
    width: 210px;
    opacity: 0.05;
  }
}

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

  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    scroll-behavior: auto !important;
    transition-duration: 0.01ms !important;
  }
}

@media print {
  body {
    background: #fff;
    color: #000;
    font-size: 11pt;
  }

  .skip-link,
  .legal-nav,
  .legal-footer {
    display: none;
  }

  .legal-header,
  .legal-shell {
    width: 100%;
  }

  .legal-shell {
    padding: 32px 0;
  }

  .summary-card,
  .data-item,
  .contact-card {
    box-shadow: none;
    background: #fff;
    color: #000;
  }
}

/*
  The contact form.

  Every control here is at least 44px tall and carries a border dark enough to
  be seen against the paper: a 1px hairline in --line measures about 1.3:1
  against the page, which is a box a sighted parent can miss entirely and which
  fails WCAG 1.4.11 outright. The field is only a field if you can find it.
*/
.contact-form {
  display: grid;
  gap: 22px;
  margin: 32px 0 12px;
  padding: 28px 26px;
  border: 1px solid var(--line);
  border-radius: 18px;
  background: rgba(249, 239, 220, 0.72);
}

/*
  `display: grid` above outranks the browser's own rule for the hidden
  attribute, so without this the form stays on screen after it is sent and the
  parent sees their message still sitting there. The home page learned this
  first; the same line is in index.html.
*/
.contact-form[hidden],
.contact-sent[hidden] {
  display: none;
}

.field {
  display: grid;
  gap: 7px;
}

.field label {
  font-size: 15px;
  font-weight: 800;
}

.field-optional {
  color: var(--ink-soft);
  font-weight: 600;
}

.field-hint {
  margin: 0;
  color: var(--ink-soft);
  font-size: 14px;
  line-height: 1.5;
}

.contact-form input,
.contact-form select,
.contact-form textarea {
  width: 100%;
  min-height: 48px;
  padding: 12px 14px;
  border: 1.5px solid rgba(92, 86, 76, 0.75);
  border-radius: 12px;
  background: var(--card);
  color: var(--ink);
  font-family: inherit;
  /* 16px or larger, or iOS Safari zooms the page in when the field is tapped
     and leaves the parent scrolled sideways on a form they cannot see all of. */
  font-size: 16px;
  line-height: 1.5;
}

.contact-form textarea {
  min-height: 172px;
  resize: vertical;
}

.contact-form input:focus-visible,
.contact-form select:focus-visible,
.contact-form textarea:focus-visible {
  outline: 3px solid var(--focus);
  outline-offset: 2px;
}

.contact-form .notice {
  margin: 0;
}

.form-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 14px 20px;
}

.contact-submit {
  min-height: 52px;
  padding: 14px 30px;
  border: 0;
  border-radius: 999px;
  background: var(--ink);
  color: var(--card);
  font-family: inherit;
  font-size: 16px;
  font-weight: 800;
  cursor: pointer;
}

.contact-submit:hover {
  background: var(--clay-deep);
}

.contact-submit[disabled] {
  cursor: progress;
  opacity: 0.72;
}

/*
  Empty until something happens, and it holds no space when it is empty, so the
  form does not carry a gap waiting for a failure that may never come.
*/
.form-status {
  margin: 0;
  font-size: 15px;
  font-weight: 700;
}

.form-status:empty {
  display: none;
}

.form-status.is-error {
  color: var(--clay-deep);
}

.form-status:focus-visible {
  outline: 3px solid var(--focus);
  outline-offset: 4px;
}

/*
  Shown in place of the form once the message is away, and focused, because the
  form it replaces is where the parent was looking.
*/
.contact-sent {
  margin: 32px 0;
  padding: 28px 26px;
  border-radius: 18px;
  background: var(--ink);
  color: var(--card);
}

.contact-sent h2 {
  margin-top: 0;
  color: inherit;
}

.contact-sent p:last-child {
  margin-bottom: 0;
}

.contact-sent a {
  color: var(--card);
  font-weight: 800;
}

.contact-sent:focus-visible {
  outline: 3px solid var(--yellow);
  outline-offset: 4px;
}

/* Never seen, never tabbed to, never read out. Only a bot fills it in. */
.honeypot {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  margin: -1px !important;
  overflow: hidden !important;
  clip: rect(0, 0, 0, 0) !important;
  white-space: nowrap !important;
  border: 0 !important;
}

/* A blank form on paper is nothing. The confirmation is a receipt, so it stays. */
@media print {
  .contact-form {
    display: none;
  }
}