/* Shared styles for Snailgram's text pages (terms, articles, responsible disclosure).
   Same colours as the card studio: lettuce, ballpoint blue, postmark red, airmail blue, envelope and iron-gall ink. */
:root {
  color-scheme: light;
  --cobalt: #2b3bd1;
  --sun: #cdec5c;
  --tomato: #ffb547;
  --cotton: #f2ecdf;
  --desk: #dde3fa;
  --ink: #1a1f3a;
  --ink-soft: #5a5d72;
  --line: #e2d9c6;
  --grain: 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='.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .11 0 0 0 0 .09 0 0 0 0 .27 .1 0 0 0 -.025'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  background: var(--cotton);
  color: var(--ink);
  font-family: "DM Sans", system-ui, sans-serif;
  font-size: 17px;
  line-height: 1.65;
}

* { box-sizing: border-box; }
body { margin: 0; background: var(--cotton); -webkit-font-smoothing: antialiased; }
a { color: var(--cobalt); text-underline-offset: 4px; }
:focus-visible { outline: 2px solid var(--cobalt); outline-offset: 3px; border-radius: 4px; }
.wrap { width: min(760px, 100% - 32px); margin-inline: auto; }

.banner { margin: 0; padding: 8px 16px; background: var(--cobalt); color: #fffdf8; font: 700 13px/1.4 "DM Sans", system-ui, sans-serif; letter-spacing: .02em; text-align: center; }
.top { background: var(--grain), var(--sun); }
.top .wrap { display: flex; align-items: center; justify-content: space-between; gap: 16px; width: auto; padding-inline: clamp(16px, 3vw, 40px); min-height: 76px; }
.brand { display: flex; align-items: center; gap: 10px; min-height: 44px; color: var(--ink); text-decoration: none; }
.brand svg { width: 40px; height: 40px; }
.brand span { font-family: "Fraunces", Georgia, serif; font-weight: 800; font-size: 25px; letter-spacing: -.03em; font-variation-settings: "SOFT" 100, "WONK" 1; }
.word > span { display: inline-block; transition: transform .35s cubic-bezier(.34, 1.56, .64, 1); }
.word > span:nth-child(odd) { transform: translateY(-.05em) rotate(-6deg); }
.word > span:nth-child(even) { transform: translateY(.05em) rotate(5deg); }
.word > span:nth-child(3n) { color: #2b3bd1; }
@media (hover: hover) { a:hover > .word > span { transform: none; } }
.back { display: inline-flex; align-items: center; min-height: 44px; font-weight: 600; font-size: 15px; color: var(--ink); }

main { padding-block: clamp(48px, 8vw, 96px); }
h1 {
  margin: 0 0 12px;
  font-family: "Fraunces", Georgia, serif;
  font-weight: 500;
  font-size: clamp(38px, 6vw, 60px);
  line-height: 1.04;
  letter-spacing: -.02em;
  color: var(--cobalt);
  font-variation-settings: "SOFT" 0, "WONK" 0;
}
h2 { margin: 44px 0 8px; font-size: 21px; line-height: 1.3; }
p, ul { margin: 0 0 14px; color: var(--ink-soft); }
ul { padding-left: 1.2em; }
li { margin-bottom: 6px; }
.updated { font-size: 14px; }
.empty { margin-top: 32px; padding: 40px 28px; background: var(--grain), var(--desk); border-radius: 28px; text-align: center; }
.btn { display: inline-flex; align-items: center; min-height: 48px; padding: 12px 24px; border-radius: 999px; background: var(--cobalt); color: #fffdf8; font-weight: 700; font-size: 15px; text-decoration: none; box-shadow: 0 8px 18px -8px rgba(43, 59, 209, .7); }

/* The homepage footer: a big snailgram wordmark on night ink, over an airmail postcard of links. */
footer { background: linear-gradient(90deg, #2b3bd1, #cdec5c 50%, #e5482b) top / 100% 10px no-repeat, var(--grain), var(--ink); color: var(--cotton); padding-block: clamp(68px, 9vw, 108px) 32px; overflow: hidden; }
footer .wrap { width: min(1200px, 100% - 32px); }
.footer-mark { display: flex; align-items: center; gap: .14em; font-size: min(17vw, 240px); line-height: .85; color: var(--cotton); text-decoration: none; position: relative; z-index: 1; }
.footer-mark svg { width: .62em; height: .62em; flex: none; }
.footer-mark span { font-family: "Fraunces", Georgia, serif; font-weight: 800; letter-spacing: -.05em; font-variation-settings: "SOFT" 100, "WONK" 1; }
.footer-mark .word > span:nth-child(3n) { color: var(--sun); }
/* The links sit on the back of an airmail postcard, tucked under the wordmark:
   the message on the left, address lines on the right, a snail stamp franked in the corner. */
.footer-cols {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.25fr);
  gap: 28px clamp(32px, 5vw, 72px);
  padding: clamp(28px, 4vw, 52px);
  border: 10px solid transparent;
  border-image: repeating-linear-gradient(-45deg, #e5482b 0 14px, #fffdf8 14px 28px, var(--cobalt) 28px 42px, #fffdf8 42px 56px) 10;
  background: var(--grain), #fffdf8;
  color: var(--ink);
  rotate: -1.5deg;
  box-shadow: 0 2px 4px rgba(0, 0, 0, .2), 0 40px 60px -30px rgba(0, 0, 0, .7);
}
.footer-cols::before {
  content: ""; position: absolute; top: clamp(18px, 3vw, 34px); right: clamp(18px, 3vw, 34px); width: 84px; height: 102px; rotate: 4deg;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 84 102'%3E%3Crect width='84' height='102' fill='%23ffb547'/%3E%3Crect x='11' y='11' width='62' height='80' fill='%23fffdf8' stroke='%231a1f3a' stroke-width='1.5'/%3E%3Ctext x='17' y='27' font-family='Georgia,serif' font-size='11' font-weight='700' fill='%231a1f3a'%3EAUS%3C/text%3E%3Ctext x='67' y='84' text-anchor='end' font-family='Georgia,serif' font-size='13' font-weight='700' fill='%23e5482b'%3E1%C2%A2%3C/text%3E%3Cg transform='translate(17 34) scale(.47)'%3E%3Cpath d='M6 84 C6 77 12 75 20 75 L62 75 C70 75 74 69 75 61 L77 44 C78 36 83 32 89 33 C95 34 97 40 96 47 L93 71 C91 84 83 90 70 90 L12 90 C8 90 6 88 6 84 Z' fill='%232b3bd1' stroke='%231a1f3a' stroke-width='5' stroke-linejoin='round'/%3E%3Cpath d='M82 36 L74 15 M91 35 L95 13' stroke='%231a1f3a' stroke-width='5' stroke-linecap='round'/%3E%3Ccircle cx='73' cy='13' r='7' fill='%23fffdf8' stroke='%231a1f3a' stroke-width='4.5'/%3E%3Ccircle cx='74.5' cy='13.5' r='2.6' fill='%231a1f3a'/%3E%3Ccircle cx='95.5' cy='11' r='7' fill='%23fffdf8' stroke='%231a1f3a' stroke-width='4.5'/%3E%3Ccircle cx='97' cy='11.5' r='2.6' fill='%231a1f3a'/%3E%3Ccircle cx='40' cy='47' r='32' fill='%23cdec5c' stroke='%231a1f3a' stroke-width='5'/%3E%3Cpath d='M40 47 a3.5 3.5 0 0 1 7 0 a7 7 0 0 1 -14 0 a10.5 10.5 0 0 1 21 0 a14 14 0 0 1 -28 0 a17.5 17.5 0 0 1 35 0' fill='none' stroke='%232b3bd1' stroke-width='5.5' stroke-linecap='round'/%3E%3C/g%3E%3C/svg%3E") center / 100% 100%;
  /* Perforated edges: bites out of every side. */
  --r: 4px;
  mask: radial-gradient(var(--r), #0000 97%, #000) round calc(-1.5 * var(--r)) calc(-1.5 * var(--r)) / calc(3 * var(--r)) calc(3 * var(--r)), linear-gradient(#000 0 0) no-repeat 50% / calc(100% - 3 * var(--r)) calc(100% - 3 * var(--r));
}
.footer-cols::after {
  content: ""; position: absolute; top: clamp(30px, 4.4vw, 50px); right: clamp(64px, 7vw, 84px); width: 190px; height: 86px; rotate: -9deg; opacity: .5; pointer-events: none;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 90' fill='none' stroke='%231a1f3a' stroke-width='2.5'%3E%3Cpath d='M2 22 q12 -8 24 0 t24 0 t24 0 t24 0 M2 36 q12 -8 24 0 t24 0 t24 0 t24 0 M2 50 q12 -8 24 0 t24 0 t24 0 t24 0 M2 64 q12 -8 24 0 t24 0 t24 0 t24 0'/%3E%3Ccircle cx='150' cy='45' r='38'/%3E%3Ccircle cx='150' cy='45' r='30'/%3E%3Ctext x='150' y='42' text-anchor='middle' font-family='Georgia,serif' font-size='11' font-weight='700' letter-spacing='1.5' fill='%231a1f3a' stroke='none'%3ESLOW%3C/text%3E%3Ctext x='150' y='56' text-anchor='middle' font-family='Georgia,serif' font-size='11' font-weight='700' letter-spacing='1.5' fill='%231a1f3a' stroke='none'%3EINK%3C/text%3E%3C/svg%3E") center / contain no-repeat;
}
.footer-tagline { align-self: start; max-width: 8ch; font-family: "Fraunces", Georgia, serif; font-variation-settings: "SOFT" 100, "WONK" 1; font-size: clamp(36px, 5vw, 64px); font-weight: 600; line-height: .98; letter-spacing: -.02em; color: var(--cobalt); rotate: -3deg; transform-origin: left; }
/* A snail's dotted trail wanders off after the message. */
.footer-tagline::after { content: ""; display: block; width: min(300px, 26vw); aspect-ratio: 6; margin-top: 28px; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 480 80'%3E%3Cpath d='M4 40 C80 10 160 70 240 40 S400 10 476 40' fill='none' stroke='%232b3bd1' stroke-width='6' stroke-linecap='round' stroke-dasharray='0 17'/%3E%3C/svg%3E") left / contain no-repeat; }
.footer-links { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); align-content: end; column-gap: 28px; padding: 132px 0 4px clamp(24px, 4vw, 56px); border-left: 2px solid var(--line); font-size: 15px; font-weight: 700; }
/* Each link is an address line; pointing at one sweeps a highlighter across it. */
.footer-links a { display: block; padding: 14px 6px 6px; border-bottom: 1.5px solid #a39d8c; color: var(--ink); text-decoration: none; background: linear-gradient(var(--sun) 0 0) left bottom / 0 100% no-repeat; transition: background-size .35s var(--ease, ease), translate .35s var(--spring, ease); }
.footer-links a:hover, .footer-links a[aria-current="page"] { background-size: 100% 100%; translate: 4px 0; }
@media (max-width: 720px) {
  .footer-cols { grid-template-columns: 1fr; margin-top: 8px; padding: 24px 20px; rotate: -1deg; }
  .footer-cols::before { width: 63px; height: 76px; --r: 3px; }
  .footer-cols::after { top: 20px; right: 64px; width: 128px; height: 58px; }
  /* Stamp and postmark get the top row to themselves, like a real postcard. */
  .footer-tagline { max-width: 6.5ch; padding-top: 72px; font-size: 40px; }
  .footer-tagline::after { width: 180px; margin-top: 16px; }
  .footer-links { grid-template-columns: 1fr; padding: 0; border-left: 0; }
}
.footer-small { display: flex; justify-content: space-between; align-items: center; gap: 12px 32px; flex-wrap: wrap; margin-top: clamp(40px, 6vw, 64px); padding-top: 20px; border-top: 1px solid rgba(242, 236, 223, .16); font-size: 14px; color: #a9aec4; }
.footer-mark:focus-visible { outline-color: var(--sun); }
.contact-email { margin: 24px 0 8px; font-family: "Fraunces", Georgia, serif; font-size: clamp(24px, 4vw, 32px); font-weight: 500; }
.contact-email a { text-decoration-thickness: 2px; }

/* Site search: a quiet magnifier in every header, as on Unopost and unofax, and on search.html a round field with results laid out like index cards. */
.search-link { display: grid; place-items: center; width: 44px; height: 44px; margin-left: auto; color: var(--ink-soft); transition: color .3s; }
.search-link svg { width: 20px; height: 20px; }
.search-link:hover, .search-link[aria-current="page"] { color: var(--ink); }
.visually-hidden { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.search-form { display: flex; gap: 10px; margin: 28px 0 16px; }
.search-form input { flex: 1; min-width: 0; min-height: 52px; padding: 12px 22px; border: 2px solid var(--ink); border-radius: 999px; background: #fffdf8; font: inherit; color: var(--ink); }
.search-form input:focus-visible { outline-offset: 2px; }
.search-form .btn { min-height: 52px; border: 0; font-family: inherit; cursor: pointer; }
.search-status { font-size: 15px; }
.search-status:empty { display: none; }
.search-results { display: grid; gap: 14px; margin: 20px 0 40px; padding: 0; list-style: none; }
.search-results li { margin: 0; }
.search-results a { display: block; padding: 18px 22px; border-radius: 20px; background: #fffdf8; color: var(--ink-soft); text-decoration: none; box-shadow: 0 1px 0 var(--line), 0 12px 26px -20px rgba(26, 31, 58, .6); transition: translate .25s cubic-bezier(.34, 1.56, .64, 1); }
.search-results a:hover { translate: 4px 0; }
.search-results strong { display: block; margin-bottom: 4px; font-family: "Fraunces", Georgia, serif; font-size: 21px; font-weight: 600; line-height: 1.25; color: var(--cobalt); }
.search-results .snippet { display: block; font-size: 15px; line-height: 1.55; }
.search-results .where { display: block; margin-top: 8px; font-size: 13px; font-weight: 700; color: var(--ink); }
.search-results mark { padding: 0 2px; border-radius: 3px; background: var(--sun); color: var(--ink); }
.search-browse { font-size: 15px; }