/* Shared styling for the three policy pages. Kept out of styles.css so the
   shop's stylesheet stays about the shop.

   The brief for these pages was the same as for everything else here: say it
   plainly. So they read as prose at a comfortable measure rather than as
   numbered clauses, and the one thing most people actually came for sits in a
   box at the top so nobody has to read the rest to find it. */

.policy { padding: 56px 0 88px; }

.policy-wrap { max-width: 72ch; }

.policy h1 { font-size: clamp(2.1rem, 4.6vw, 3.2rem); }

.policy-lede {
  font-size: 1.12rem;
  line-height: 1.55;
  color: var(--ink);
  max-width: 62ch;
  margin: 0 0 1.1em;
}

.policy-meta {
  font-family: var(--ui);
  font-size: .74rem;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--faint);
  margin: 0 0 2.4em;
}

.policy h2 {
  font-size: clamp(1.35rem, 2.4vw, 1.75rem);
  margin-top: 2.2em;
  padding-top: .7em;
  border-top: 2px solid var(--ink);
}

.policy h3 {
  font-family: var(--ui);
  font-size: .82rem;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--muted);
  margin: 2em 0 .6em;
}

.policy p { max-width: 68ch; margin: 0 0 1.15em; }

.policy ul { max-width: 68ch; padding-left: 1.1em; margin: 0 0 1.15em; }
.policy li { margin-bottom: .5em; }

.policy a { color: var(--rust); text-underline-offset: 3px; }
.policy a:hover { color: var(--ink); }

/* The at-a-glance box. Most people want one answer and then to leave. */
.policy-summary {
  background: var(--card);
  border: 2px solid var(--ink);
  padding: 26px 28px 22px;
  margin: 0 0 2.4em;
}

.policy-summary-h {
  font-family: var(--ui) !important;
  font-size: .76rem !important;
  font-weight: 700;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--faint);
  border-top: none !important;
  padding-top: 0 !important;
  margin: 0 0 1.2em !important;
}

.policy-summary dl { margin: 0; }

.policy-summary dt {
  font-family: var(--display);
  font-weight: 600;
  font-size: 1.02rem;
  letter-spacing: -0.01em;
  margin-top: 1.1em;
}
.policy-summary dt:first-of-type { margin-top: 0; }

.policy-summary dd {
  margin: .3em 0 0;
  color: var(--muted);
  max-width: 62ch;
}

/* The trading address. Published because an online seller legally has to give a
   geographic one — set as a block so it reads as a postal address rather than
   getting lost mid-sentence. */
.policy-address {
  font-family: var(--ui);
  font-size: .94rem;
  line-height: 1.7;
  background: var(--card);
  border-left: 3px solid var(--ink);
  padding: 16px 20px;
  margin: 0 0 1.15em;
  max-width: 68ch;
}

.policy-quote {
  margin: 0 0 1.15em;
  padding: 16px 20px;
  border-left: 3px solid var(--gold);
  background: var(--card);
  max-width: 68ch;
}
.policy-quote p { margin: 0; color: var(--muted); font-size: .96rem; }

.policy-footnote {
  margin-top: 2.6em;
  padding-top: 1.2em;
  border-top: 1px solid var(--line);
  font-size: .9rem;
  color: var(--muted);
}

.policy-back {
  margin-top: 2.2em;
  font-family: var(--ui);
  font-weight: 700;
  font-size: .88rem;
}

.site-footer .footer-row nav a { margin-left: 18px; }

@media (max-width: 700px) {
  .policy { padding: 36px 0 64px; }
  .policy-summary { padding: 20px 20px 18px; }
}