/* Privacy, Terms, Shipping, Returns: the homepage's look, set for reading. */
@font-face { font-family: "Tinos"; font-style: normal; font-weight: 400; font-display: swap; src: url(/assets/fonts/tinos-latin-400-normal.woff2) format("woff2"); }
@font-face { font-family: "Tinos"; font-style: italic; font-weight: 400; font-display: swap; src: url(/assets/fonts/tinos-latin-400-italic.woff2) format("woff2"); }
@font-face { font-family: "Tinos"; font-style: normal; font-weight: 700; font-display: swap; src: url(/assets/fonts/tinos-latin-700-normal.woff2) format("woff2"); }
@font-face { font-family: "Tinos"; font-style: italic; font-weight: 700; font-display: swap; src: url(/assets/fonts/tinos-latin-700-italic.woff2) format("woff2"); }

:root { --base: #f5f5f3; --ink: #000; --paper: #fff; --cta: #ff6c2f; --seal: #ffe800; --gutter: max(20px, 6vw); }
* { box-sizing: border-box; margin: 0; padding: 0; }
html { background: var(--ink); -webkit-text-size-adjust: 100%; }
body {
  background: var(--base); color: var(--ink);
  font-family: Tinos, "Times New Roman", Times, serif; font-size: 20px; line-height: 1.45;
  -webkit-font-smoothing: antialiased; overflow-x: hidden;
}
::selection { background: var(--ink); color: var(--seal); }
a { color: inherit; text-decoration-thickness: 2px; text-underline-offset: 3px; }
a:hover, a:focus-visible { background: var(--seal); outline: none; }

/* top: the wordmark, and the page's sticker slapped on the right */
.top { position: relative; padding: 28px var(--gutter) 0; }
.home { display: inline-block; width: clamp(120px, 16vw, 200px); color: var(--ink); }
.home:hover, .home:focus-visible { background: none; }
.home svg { display: block; width: 100%; height: auto; fill: currentColor; }

.intro { padding: clamp(56px, 9vh, 110px) var(--gutter) clamp(36px, 6vh, 70px); }
h1 { font-weight: 700; font-style: italic; font-size: clamp(64px, 15vw, 220px); line-height: .92; letter-spacing: -.02em; }
.sub { font-style: italic; font-size: clamp(24px, 3vw, 44px); line-height: 1.1; margin-top: clamp(18px, 2.5vw, 34px); max-width: 17em; }
.updated { margin-top: 20px; font-size: 16px; }

/* stickers, as on the homepage */
.stk {
  position: absolute; display: grid; place-items: center; width: var(--s, 150px); aspect-ratio: 1;
  color: var(--fg, #000); font: 700 calc(var(--s, 150px) * .17) / 1 Tinos, "Times New Roman", serif;
  text-transform: uppercase; letter-spacing: .01em; text-align: center;
  transform: rotate(var(--r, -8deg)); filter: drop-shadow(5px 6px 0 rgba(0,0,0,.9));
  pointer-events: none; user-select: none;
  animation: slam .42s cubic-bezier(.2, .9, .3, 1.3) both;
}
.stk.pill { aspect-ratio: 2.1; font-size: calc(var(--s, 150px) * .19); }
.stk svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.stk span { position: relative; padding: 0 12%; }
.stk.pill span { padding: 0 6%; }
@keyframes slam {
  0% { transform: scale(3) rotate(calc(var(--r, -8deg) + 25deg)); }
  65% { transform: scale(.9) rotate(var(--r, -8deg)); }
  100% { transform: scale(1) rotate(var(--r, -8deg)); }
}
.top .stk { --s: clamp(118px, 22vw, 280px); right: var(--gutter); top: 14px; z-index: 2; }
.top .stk.pill { --s: clamp(150px, 30vw, 320px); top: 24px; }

/* the short version: a card like the email field, with a tag on it */
.tldr {
  position: relative; margin: 0 var(--gutter); max-width: 34em; padding: 56px 26px 24px;
  background: var(--paper); border: 3px solid var(--ink); box-shadow: 5px 6px 0 var(--ink);
}
.tldr .stk { --s: 140px; top: -30px; left: -14px; }
.tldr ul { list-style: none; }
.tldr li { padding-left: 1.1em; position: relative; }
.tldr li + li { margin-top: .55em; }
.tldr li::before { content: ""; position: absolute; left: 0; top: .5em; width: .5em; height: .5em; background: var(--ink); transform: rotate(45deg); }

/* the text */
.doc { padding: 0 var(--gutter) clamp(70px, 12vh, 140px); max-width: calc(34em + 2 * var(--gutter)); }
.doc h2 { font-weight: 700; font-size: clamp(28px, 2.6vw, 38px); line-height: 1.1; letter-spacing: -.01em; margin: 2.1em 0 .55em; }
.doc p + p, .doc p + ul, .doc ul + p, .doc ol + p, .doc p + ol { margin-top: .75em; }
.doc ul, .doc ol { padding-left: 1.2em; }
.doc li + li { margin-top: .4em; }
.doc strong { font-weight: 700; }
.form {
  margin-top: 1em; padding: 20px 22px; background: var(--paper); border: 3px solid var(--ink); box-shadow: 5px 6px 0 var(--ink);
  font-size: 18px; line-height: 1.6;
}
.contact { margin-top: .6em; }
.todo { background: var(--seal); padding: 0 .2em; font-style: italic; }

footer {
  background: var(--ink); color: var(--paper); padding: 34px var(--gutter); font-size: 17px;
  display: flex; justify-content: space-between; gap: 14px 24px; flex-wrap: wrap;
}
footer nav { display: flex; gap: 6px 20px; flex-wrap: wrap; }
footer a:hover, footer a:focus-visible { background: var(--paper); color: var(--ink); }
footer a[aria-current] { text-decoration: none; font-weight: 700; }

@media (prefers-reduced-motion: reduce) { .stk { animation: none; } }