/* Mirrors the tokens in ../styles.css so the legal pages and the landing page
   read as one site. The four values below have no counterpart there because
   nothing on the landing page needs a hairline, a raised surface or inline
   code; they are derived from the same warm ground. */
:root {
  --ground: #f7f3ea;
  --raised: #fdfaf4;
  --line: #e7ddcd;
  --code-wash: #fae8dd;

  --ink: #1c1811;
  --ink-strong: #161009;
  --muted: #6b6153;
  --faint: #8a8073;
  --accent: #00616a;
  --on-accent: #fbf9f5;
  --accent-hover: #004d55;
  --accent-active: #003f46;

  --gutter: clamp(24px, 8vw, 112px);
}

*,
*::before,
*::after {
  box-sizing: border-box;
}

body {
  margin: 0;
  /* The landing page's first gradient stop. A viewport gradient would stretch
     oddly down a page this long, so these pages take the flat colour. */
  background: var(--ground);
  color: var(--ink);
  font-family: 'Hanken Grotesk', Helvetica, Arial, sans-serif;
  font-size: 16px;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

.wrap {
  max-width: 46rem;
  margin: 0 auto;
  padding: clamp(40px, 8vh, 72px) var(--gutter) 5rem;
}

.site-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding-bottom: 1.75rem;
  border-bottom: 1px solid var(--line);
}

.brand {
  display: inline-flex;
  align-items: center;
  gap: 0.42em;
  font-size: 22px;
  text-decoration: none;
}

/* Cropped to the artwork's own bounds so the mark scales off the wordmark's
   font-size instead of the SVG's empty padding. */
.brand-mark {
  flex: none;
  height: 1.18em;
  width: auto;
  overflow: visible;
  /* The silhouette is filled with currentColor so one property tints it. */
  color: var(--accent);
}

.brand-mark-tooth {
  fill: currentColor;
}

/* Painted rather than cut out. The chevrons sit wholly inside the tooth, so
   their only contrast relationship is against the orange behind them, never
   against whatever the mark is placed on. */
.brand-mark-chevrons {
  fill: none;
  stroke: var(--on-accent);
  stroke-width: 10;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.wordmark {
  font-size: 1em;
  font-weight: 600;
  letter-spacing: -0.03em;
  color: var(--ink);
}

.header-link {
  font-size: 14px;
  color: var(--muted);
  text-decoration: none;
}

.header-link:hover {
  color: var(--accent);
}

h1 {
  margin: 2.5rem 0 0.6rem;
  font-family: 'Newsreader', Georgia, serif;
  font-size: clamp(32px, 5vw, 44px);
  font-weight: 500;
  line-height: 1.05;
  letter-spacing: -0.02em;
  color: var(--ink-strong);
}

h2 {
  margin: 2.75rem 0 0.5rem;
  font-family: 'Newsreader', Georgia, serif;
  font-size: 25px;
  font-weight: 500;
  line-height: 1.25;
  letter-spacing: -0.02em;
  color: var(--ink-strong);
}

.effective {
  margin: 0 0 2rem;
  font-size: 14px;
  color: var(--faint);
}

p,
li {
  color: var(--muted);
  text-wrap: pretty;
}

ul {
  padding-left: 1.25rem;
}

li {
  margin-bottom: 0.4rem;
}

strong {
  color: var(--ink);
  font-weight: 600;
}

a {
  color: var(--accent);
}

a:hover {
  color: var(--accent-hover);
}

code {
  padding: 0.1em 0.35em;
  background: var(--code-wash);
  border-radius: 3px;
  font-size: 0.9em;
  color: var(--accent-active);
}

.callout {
  margin: 1.25rem 0;
  padding: 1rem 1.25rem;
  background: var(--raised);
  border: 1px solid var(--line);
  border-radius: 8px;
}

.callout p {
  margin: 0;
}

.site-footer {
  margin-top: 4rem;
  padding-top: 1.5rem;
  border-top: 1px solid var(--line);
  font-size: 13px;
  color: var(--faint);
}

.site-footer p {
  margin: 0.35rem 0;
  color: var(--faint);
}