@font-face {
  font-family: "Dog Site Raleway";
  src: url("/guides/dog-photo-and-coat-care/raleway-latin.woff2") format("woff2");
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
}

body.dog-policy {
  --paper: #f5f1e7;
  --paper-light: #fffdf7;
  --navy: #062b3a;
  --ink: #082c36;
  --muted: #31515a;
  --teal: #005f60;
  --coral: #ff8069;
  --line: #bfd4ce;
}

body.dog-not-found {
  --paper: #f5f1e7;
  --ink: #082c36;
  --accent: #005f60;
}

.policy {
  box-sizing: border-box;
  margin: 0;
  color-scheme: light;
  background: var(--paper);
  color: var(--ink);
  font: 17px/1.68 "Dog Site Raleway", Raleway, sans-serif;
  caret-color: var(--teal);
}

.policy *,
.not-found * { box-sizing: border-box; }

.policy ::selection { color: var(--paper-light); background: var(--teal); }
.policy header,
.policy main,
.policy footer { margin: auto; }

.policy header {
  width: 100%;
  padding: 15px max(20px, calc((100vw - 800px) / 2));
  border: 0;
  background: var(--navy);
  color: var(--paper-light);
}

.policy header a {
  min-height: 46px;
  display: inline-flex;
  align-items: center;
  color: inherit;
  font-size: 21px;
  font-weight: 850;
  letter-spacing: -.02em;
  text-decoration: none;
}

.policy main {
  width: min(100% - 40px, 800px);
  padding: 52px 0 70px;
}

.policy h1,
.policy h2 {
  color: var(--navy);
  font-family: "Dog Site Raleway", Raleway, sans-serif;
  font-weight: 850;
  line-height: 1.08;
  letter-spacing: -.025em;
}

.policy h1 {
  max-width: 14ch;
  margin: 0 0 17px;
  font-size: clamp(42px, 7vw, 64px);
  text-wrap: balance;
}

.policy h2 { margin: 36px 0 9px; font-size: 26px; }
.policy p, .policy li { max-width: 70ch; }
.policy p { margin-block: 0 17px; }
.policy a { color: var(--teal); text-decoration-thickness: 1px; text-underline-offset: 4px; }
.policy a:hover { text-decoration-thickness: 2px; }

.policy footer {
  width: 100%;
  padding: 18px max(20px, calc((100vw - 800px) / 2)) 24px;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 14px;
  border: 0;
  background: var(--navy);
  color: #d8eae5;
  font-size: 14px;
}

.policy footer a { min-height: 44px; display: inline-flex; align-items: center; color: var(--paper-light); }
.policy a:focus-visible { outline: 3px solid var(--coral); outline-offset: 4px; }
.policy header a:focus-visible, .policy footer a:focus-visible { outline-color: var(--paper-light); }

.not-found {
  display: grid;
  min-height: 100vh;
  margin: 0;
  place-items: center;
  background: var(--paper);
  color: var(--ink);
  font: 18px/1.5 "Dog Site Raleway", Raleway, sans-serif;
}

.not-found main { max-width: 35rem; padding: 2rem; }
.not-found a { color: var(--accent); }

@media (max-width: 520px) {
  .policy header { padding-inline: 18px; }
  .policy main { width: min(100% - 36px, 800px); padding-block: 40px 56px; }
  .policy h1 { font-size: clamp(40px, 12vw, 54px); }
  .policy h2 { margin-top: 30px; font-size: 23px; }
  .policy footer { padding-inline: 18px; }
}