/* Tidesong "Folk Print" — the same two inks as the app.
   See ../tidesong-5c-theme.md */
:root {
  --bg: #f2ecdc;
  --card: #faf6ea;
  --ink: #2b4d9b;
  --ink-tint: rgba(43, 77, 155, 0.10);
  --body: #6d6a5c;
  --meta: #8d8a7a;
}
@media (prefers-color-scheme: dark) {
  :root { --bg: #14304e; --card: #1b3a5c; --ink: #f2ecdc; --body: #d9d3c1; --meta: #97a3b5; }
}
* { box-sizing: border-box; margin: 0; padding: 0; }
html { -webkit-text-size-adjust: 100%; }
body {
  background: var(--bg);
  color: var(--body);
  font: 500 17px/1.65 Quicksand, ui-rounded, system-ui, sans-serif;
  padding: 0 22px 80px;
}
.wrap { max-width: 660px; margin: 0 auto; }
h1, h2, h3, .display {
  font-family: 'Londrina Solid', Quicksand, sans-serif;
  font-weight: 400;
  color: var(--ink);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  line-height: 1.1;
}
h1 { font-size: clamp(38px, 9vw, 62px); }
h2 { font-size: 26px; margin: 44px 0 12px; }
h3 { font-size: 18px; margin: 26px 0 8px; }
p, li { margin-bottom: 14px; }
ul { padding-left: 22px; }
a { color: var(--ink); text-decoration-thickness: 2px; text-underline-offset: 3px; }
strong { font-weight: 700; color: var(--ink); }
header { padding: 70px 0 0; }
.tagline { font-size: 19px; margin-top: 14px; max-width: 30ch; }
.squiggle { display: block; margin-top: 4px; overflow: visible; }
.card {
  background: var(--card);
  border: 2px solid var(--ink);
  border-radius: 18px;
  padding: 22px;
  margin: 16px 0;
}
.tag {
  display: inline-block;
  font-family: 'Londrina Solid', sans-serif;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  font-size: 12px;
  color: var(--ink);
  background: var(--ink-tint);
  border-radius: 999px;
  padding: 4px 11px;
  margin: 0 6px 6px 0;
}
.pill {
  display: inline-block;
  font-family: 'Londrina Solid', sans-serif;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  background: var(--ink);
  color: var(--bg);
  border-radius: 999px;
  padding: 14px 30px;
  text-decoration: none;
  font-size: 18px;
  margin-top: 22px;
}
.pill:active { transform: translateY(1px); }
.dots { text-align: center; margin: 46px 0; }
.dots i { display: inline-block; width: 5px; height: 5px; border-radius: 50%;
  background: var(--ink); opacity: .5; margin: 0 5px; }
.dots i:nth-child(3) { opacity: 1; }
footer {
  margin-top: 60px; padding-top: 26px; border-top: 2px solid var(--ink);
  font-size: 14px; color: var(--meta);
}
footer a { margin-right: 18px; }
.meta { color: var(--meta); font-size: 14px; }
.mark { width: 18px; height: 18px; vertical-align: -3px; margin-right: 8px; }