:root {
  color-scheme: light;
  --paper: #fffff0;
  --cream: #fffdd0;
  --teal: #008080;
  --ink: #005d5d;
  --gold: #cfb53b;
  --blue: #005f9e;
  --burgundy: #800020;
  --mauve: #e0b0ff;
  --olive: #808000;
  --shadow: 0 5px 15px rgb(0 128 128 / 11%);
  --serif: Georgia, 'Times New Roman', serif;
  --body: 'Palatino Linotype', Palatino, 'Book Antiqua', Georgia, serif;
  --label: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --mono: ui-monospace, 'SFMono-Regular', Consolas, monospace;
  --section-gap: clamp(4rem, 8vw, 8rem);
}
* { box-sizing: border-box; }
html { scroll-padding-top: 1.5rem; }
body {
  margin: 0;
  isolation: isolate;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--body);
  font-size: 1rem;
  line-height: 1.6;
  text-shadow: 0 1px 1px rgb(255 253 208 / 30%);
  overflow-wrap: break-word;
}
body::before {
  content: '';
  position: fixed;
  inset: 0;
  z-index: -1;
  background: url('/media/floral-paper.webp') repeat;
  background-size: 256px;
  mix-blend-mode: soft-light;
  opacity: .28;
  pointer-events: none;
}
body, button, input, textarea { font-size: 16px; }
button, input, textarea { font-family: var(--label); }
button, a, summary { -webkit-tap-highlight-color: rgb(0 128 128 / 12%); }
a { color: var(--ink); text-underline-offset: .22em; text-decoration-thickness: 1px; }
a:hover { color: var(--blue); }
button { color: var(--ink); }
a, button, summary { touch-action: manipulation; }
:focus-visible { outline: 3px solid var(--teal); outline-offset: 4px; }
a:focus-visible { border-radius: 4px; }
img { max-width: 100%; height: auto; display: block; }
h1, h2, h3 { font-family: var(--serif); color: var(--ink); }
h1 { font-size: 2.25rem; font-weight: 700; line-height: 1.18; letter-spacing: -.025em; }
h2 { font-size: 1.5rem; font-weight: 700; line-height: 1.3; letter-spacing: -.015em; }
h3 { font-size: 1.25rem; font-weight: 700; line-height: 1.35; }
p { margin: 0 0 1rem; max-width: 72ch; }
ul, ol { padding-inline-start: 1.5rem; }
li { margin-block: .5rem; font-size: 1rem; }
button, summary { cursor: pointer; }
[hidden] { display: none !important; }
[class$='-wrap'] { max-width: 1280px; margin-inline: auto; padding-inline: 1.5rem; }
[class$='-eyebrow'] {
  font-family: var(--label);
  font-size: 1rem;
  line-height: 1.45;
  letter-spacing: .06em;
  font-weight: 500;
  margin-block: 0 1.5rem;
}
[class$='-lead'] { font-size: 1.125rem; line-height: 1.6; }
[class$='-primary-link'] {
  display: inline-flex;
  align-items: center;
  justify-content: space-between;
  gap: 2rem;
  padding: .875rem 1.5rem;
  min-height: 52px;
  border: 2px solid var(--gold);
  border-radius: 12px 12px 32px 12px;
  font-family: var(--label);
  font-weight: 500;
  color: var(--paper);
  background: var(--ink);
  text-decoration: none;
  box-shadow: var(--shadow);
}
[class$='-primary-link']:hover { background: var(--blue); color: var(--paper); }
[class$='-text-link'] {
  display: inline-flex;
  min-height: 44px;
  align-items: center;
  gap: 1rem;
  font-size: 1rem;
  font-family: var(--label);
}
[class$='-skip'] {
  position: absolute;
  top: .5rem;
  left: 1rem;
  z-index: 20;
  transform: translateY(-180%);
  padding: .75rem 1rem;
  min-height: 44px;
  background: var(--paper);
  border: 2px solid var(--gold);
}
[class$='-skip']:focus { transform: none; }
code, [class$='-technical'] { font-family: var(--mono); font-size: 1rem; }
@media (max-width: 420px) {
  [class$='-wrap'] { padding-inline: 1.5rem; }
  h1 { font-size: 2.25rem; }
}