/* Money-back stamp and stamped reader quotes, shared by index.html and
   checkout.html. Each page places them with its own inline rules.

   The stamp is live SVG text: to change the terms, edit the arc text and the
   number inside each <a class="guarantee-stamp"> in the page, not this file.
   Fonts are named outright because the two pages define --display differently. */

:root {
  --stamp-red: #B23A2E;
  --stamp-ink: #1C1A17;
  --stamp-muted: #7A736A;
  --stamp-display: 'Instrument Serif', 'Times New Roman', Georgia, serif;
  --stamp-text: 'Instrument Sans', -apple-system, 'Helvetica Neue', Arial, sans-serif;
  --stamp-serif: 'Newsreader', Georgia, serif;
  /* A tile of noise used as a mask, so the red reads as inked rather than printed. */
  --stamp-texture: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' seed='7' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 -6 4.6'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* The stamp */
.guarantee-stamp {
  display: block;
  width: 136px;
  color: var(--stamp-red);
  text-decoration: none;
  transform: rotate(-11deg);
  transition: transform .2s ease;
}
.guarantee-stamp:hover { transform: rotate(-11deg) scale(1.04); }
.guarantee-stamp:focus-visible { outline: 2px solid var(--stamp-ink); outline-offset: 6px; border-radius: 50%; }
.guarantee-stamp svg {
  display: block;
  width: 100%;
  height: auto;
  overflow: visible;
  -webkit-mask-image: var(--stamp-texture);
  mask-image: var(--stamp-texture);
  -webkit-mask-size: 180px;
  mask-size: 180px;
}
.guarantee-stamp circle { fill: none; stroke: currentColor; }
.guarantee-stamp .stamp-ring { stroke-width: 6; }
.guarantee-stamp .stamp-rule { stroke-width: 1.8; }
.guarantee-stamp rect, .guarantee-stamp text { fill: currentColor; }
.stamp-arc { font: 700 11.4px/1 var(--stamp-text); letter-spacing: .13em; text-transform: uppercase; }
.stamp-days { font: 400 84px/1 var(--stamp-display); stroke: currentColor; stroke-width: 1.6px; paint-order: stroke; }
.stamp-unit { font: 700 12.5px/1 var(--stamp-text); letter-spacing: .2em; text-transform: uppercase; }

/* A reader's name, stamped in the same ink */
.stamp-name {
  display: inline-block;
  padding: 5px 9px 4px;
  border: 2px solid var(--stamp-red);
  color: var(--stamp-red);
  font: 700 11.5px/1 var(--stamp-text);
  letter-spacing: .14em;
  text-transform: uppercase;
  transform: rotate(-2deg);
  transform-origin: left center;
  -webkit-mask-image: var(--stamp-texture);
  mask-image: var(--stamp-texture);
  -webkit-mask-size: 180px;
  mask-size: 180px;
}

/* Reader quotes */
.reader-quote { margin: 0; }
.reader-quote blockquote {
  margin: 0 0 20px;
  color: var(--stamp-ink);
  font: italic 400 clamp(19px, 1.6vw, 22px)/1.5 var(--stamp-serif);
  text-wrap: pretty;
}
.reader-quote blockquote::before {
  display: block;
  margin-bottom: 6px;
  color: var(--stamp-red);
  content: '\201C';
  font: normal 400 54px/.62 var(--stamp-display);
}
.reader-quote--lead blockquote { font-size: clamp(26px, 2.5vw, 36px); line-height: 1.32; letter-spacing: -.005em; }
.reader-quote--lead blockquote::before { font-size: 76px; }
.reader-role { display: block; margin-top: 10px; color: var(--stamp-muted); font: 400 13px/1.45 var(--stamp-text); }

@media (prefers-reduced-motion: reduce) {
  .guarantee-stamp { transition: none; }
  .guarantee-stamp:hover { transform: rotate(-11deg); }
}