/* Finn's Tins website. The look is the logo's own world: pure white paper, solid black ink, thick rules like
   the rings of a seal, stars, heavy condensed type. Dark mode swaps paper and ink. System fonts only, and the
   only picture on any page is the inline logo. Sizes are in rem, so the pages follow the reader's text size; the
   ones that could push a page sideways at a very large size (side padding, the logo, headings) are capped by
   the width of the screen. */

:root {
  color-scheme: light dark;
  --paper: #fff;
  --ink: #000;
  --mute: #595959;
  --band: #000;
  --on-band: #fff;
  --rule: min(0.4rem, 8px);
  --line: min(0.2rem, 4px);
  --gap: min(0.35rem, 7px);
  --display: "Avenir Next Condensed", "Arial Narrow", sans-serif-condensed, "Helvetica Neue", system-ui, sans-serif;
  --text: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
}

@media (prefers-color-scheme: dark) {
  :root {
    --paper: #000;
    --ink: #fff;
    --mute: #b3b3b3;
  }
}

*, ::before, ::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
/* On iPhone and iPad, follow the reader's Dynamic Type size, as the app does. The first test is true only on iOS:
   on a Mac the same font keyword means 13px, which would make every page too small. */
@supports (-webkit-touch-callout: none) and (font: -apple-system-body) { html { font: -apple-system-body; } }

body {
  margin: 0;
  min-height: 100vh;
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
  background: var(--paper);
  color: var(--ink);
  font: 1rem/1.55 var(--text);
  overflow-wrap: anywhere;
}

/* The seal's rings across the top: a thick rule and a thin one. */
body::before {
  content: "";
  display: block;
  flex: none;
  height: calc(var(--rule) + var(--gap) + 2px);
  border-top: var(--rule) solid var(--ink);
  border-bottom: 2px solid var(--ink);
}

.wrap { width: 100%; max-width: 46rem; margin-inline: auto; padding-inline: min(1.25rem, 5vw); }
main { flex: 1 0 auto; padding-bottom: 1rem; }
main.center { display: grid; align-content: center; }
p, ul, ol, dl { margin: 0; }
p, li, dd { text-wrap: pretty; }

a { color: inherit; text-decoration-thickness: 0.12em; text-underline-offset: 0.2em; }
a:hover { text-decoration-thickness: 0.22em; }
a:focus-visible { outline: min(0.25rem, 5px) solid; outline-offset: min(0.2rem, 4px); border-radius: 0.2rem; }

h1, h2 {
  margin: 0;
  font-family: var(--display);
  font-weight: 800;
  font-stretch: condensed;
  text-transform: uppercase;
  line-height: 0.98;
  letter-spacing: 0.01em;
  text-wrap: balance;
}
h1 { font-size: min(clamp(2.5rem, 13vw, 5rem), 16vw); }
h2 { font-size: min(clamp(1.5rem, 6.5vw, 2.1rem), 12vw); }
.lead { font-size: 1.25rem; line-height: 1.45; max-width: 30em; text-wrap: balance; }
.note { font-size: 0.9375rem; color: var(--mute); max-width: 36em; }
.note a { color: var(--ink); }

/* The logo: a seal. Rings, a ring of type, two stars, and a paw in a solid disc. */
.seal { display: block; flex: none; width: min(70vw, 16rem); height: auto; }
.seal .r1, .seal .r2 { fill: none; stroke: var(--ink); }
.seal .r1 { stroke-width: 6; }
.seal .r2 { stroke-width: 2.5; }
.seal .d, .seal use { fill: var(--ink); }
.seal .p { fill: var(--paper); }
.seal text { fill: var(--ink); font: 800 15px/1 var(--display); letter-spacing: 0.14em; text-anchor: middle; }
.seal.small { width: min(4.5rem, 24vw); }
.seal.small text { display: none; }

/* A poster page: the home page and the fallback page. */
.hero { display: grid; justify-items: center; gap: 1.25rem; padding-block: 1.75rem 0.5rem; text-align: center; }
.actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 0.75rem; }

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 3.25rem;
  padding: 0.6rem min(1.5rem, 5vw);
  border: var(--line) solid var(--ink);
  border-radius: 99rem;
  background: var(--ink);
  color: var(--paper);
  font: 800 1.125rem/1.2 var(--text);
  text-align: center;
  text-decoration: none;
}
.btn.ghost { background: var(--paper); color: var(--ink); }
.btn:focus-visible { outline-color: var(--ink); outline-offset: min(0.25rem, 5px); border-radius: 99rem; }
@media (hover: hover) {
  .btn:hover { background: var(--paper); color: var(--ink); }
  .btn.ghost:hover { background: var(--ink); color: var(--paper); }
}

/* Stars between the parts of a page. */
.stars { margin: 1.75rem 0; padding-left: 0.7em; text-align: center; letter-spacing: 0.7em; font-size: 1.1rem; }

/* Numbered steps, each in a ring. */
.steps { --ring: min(3rem, 14vw); list-style: none; padding: 0; counter-reset: step; border-top: var(--rule) solid var(--ink); margin-top: 1rem; }
.steps li { counter-increment: step; display: grid; grid-template-columns: var(--ring) 1fr; gap: 1rem; align-items: center; padding: 1rem 0; border-bottom: 2px solid var(--ink); }
.steps li::before {
  content: counter(step);
  display: grid;
  place-items: center;
  width: var(--ring);
  height: var(--ring);
  border-radius: 50%;
  background: var(--ink);
  color: var(--paper);
  font: 800 calc(var(--ring) * 0.55) / 1 var(--display);
}
.steps strong { display: block; font-family: var(--display); font-size: min(1.35rem, 8vw); font-weight: 800; letter-spacing: 0.01em; text-transform: uppercase; line-height: 1.1; }
.steps + .note, .note + .note { margin-top: 1.25rem; }

/* The pages of words: privacy and support. */
.head { display: flex; align-items: center; padding-block: 1.25rem 0; }
.page h1 { padding-top: 1.25rem; }
.page .lead { margin-top: 1rem; }
.page .actions { justify-content: flex-start; margin-top: 1.25rem; }
.chips { list-style: none; padding: 0; display: flex; flex-wrap: wrap; gap: 0.6rem; margin-top: 1.25rem; }
.chips li { border: var(--line) solid var(--ink); border-radius: 0.6rem; padding: 0.3rem 0.75rem; font: 800 1.2rem/1.1 var(--display); text-transform: uppercase; }
.facts { border: var(--rule) solid var(--ink); border-radius: 0.9rem; padding: 0.25rem min(1rem, 4vw); margin-top: 1.25rem; }
.facts div { padding: 0.6rem 0; border-top: 2px solid var(--ink); }
.facts div:first-child { border-top: 0; }
.facts dt { font-weight: 800; }
.facts dd { margin: 0; }
@media (min-width: 36rem) { .facts div { display: grid; grid-template-columns: 9rem 1fr; gap: 1rem; } }
.sec { margin-top: 2rem; padding-top: 0.9rem; border-top: var(--rule) solid var(--ink); }
.sec > * + * { margin-top: 0.75rem; }
.sec p, .sec ul { max-width: 38em; }
.sec ul { list-style: none; padding: 0; }
.sec li { position: relative; padding-left: 1.6rem; }
.sec li + li { margin-top: 0.5rem; }
.sec li::before { content: "\2605"; content: "\2605" / ""; position: absolute; left: 0; top: 0.05em; font-size: 0.9em; }

/* The bottom of every page: a black band. In dark mode the rule above it turns white, like the rules of the page. */
footer { margin-top: 2.5rem; padding-block: 1.5rem calc(1.5rem + env(safe-area-inset-bottom)); border-top: var(--rule) solid var(--ink); background: var(--band); color: var(--on-band); }
footer .wrap { display: grid; gap: 0.5rem; }
footer nav { display: flex; flex-wrap: wrap; gap: 0 1.5rem; }
footer nav a { display: inline-flex; align-items: center; min-height: 2.75rem; font-weight: 800; }
footer p { font-size: 0.9375rem; max-width: 42em; }