/* Colors are the app's Palette (Kinboard/Design/Theme.swift). */
@font-face {
  font-family: "Fredoka";
  src: url("/fonts/Fredoka-Bold.ttf") format("truetype");
  font-weight: 700;
  font-display: swap;
}

@font-face {
  font-family: "Patrick Hand";
  src: url("/fonts/PatrickHand-Regular.ttf") format("truetype");
  font-display: swap;
}

:root {
  --board: #d6b687;
  --paper: #f6efdc;
  --card: #fcf8ec;
  --ink: #4a3726;
  --muted: #584536;
  --brick: #a63a26;
  --link: #742314;
  --line: #7a6046;
  --shadow: #5a4022;
  --sticky: #f5dc82;
}

@media (prefers-color-scheme: dark) {
  :root {
    --board: #3a2c1e;
    --paper: #1e1913;
    --card: #2a231b;
    --ink: #f2e8d5;
    --muted: #b5a68e;
    --brick: #ee8670;
    --link: #ee8670;
    --line: #987852;
    --shadow: #0e0b08;
    --sticky: #e8c96a;
  }
}

* { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--board);
  color: var(--ink);
  font: 17px/1.6 -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  -webkit-text-size-adjust: 100%;
}

header, main, footer {
  max-width: 760px;
  margin: 0 auto;
  padding: 0 20px;
}

header {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding-top: 24px;
  padding-bottom: 20px;
}

.brand {
  display: flex;
  align-items: center;
  gap: 10px;
  font: 700 24px "Fredoka", sans-serif;
  color: var(--ink);
  text-decoration: none;
}

.brand img { width: 36px; height: 36px; border-radius: 9px; }

nav { display: flex; gap: 18px; }
nav a { color: var(--ink); font-weight: 600; text-decoration: none; }
nav a:hover, nav a[aria-current="page"] { text-decoration: underline; text-underline-offset: 4px; }

main {
  background: var(--card);
  border: 2px solid var(--line);
  border-radius: 14px;
  box-shadow: 0 4px 0 var(--shadow);
  padding: 28px 32px 32px;
}

@media (max-width: 600px) {
  main { margin: 0 12px; padding: 22px 20px 26px; }
}

h1, h2, h3 { font-family: "Fredoka", sans-serif; font-weight: 700; line-height: 1.25; }
h1 { font-size: 32px; margin: 0 0 4px; }
h2 { font-size: 22px; margin: 32px 0 8px; }
h3 { font-size: 18px; margin: 22px 0 4px; }

p, ul { margin: 0 0 14px; }
li { margin-bottom: 6px; }
a { color: var(--link); }
.updated { color: var(--muted); margin-bottom: 22px; }

.hero { text-align: center; padding: 16px 0 8px; }
.hero img { width: 112px; height: 112px; border-radius: 26px; box-shadow: 0 4px 0 var(--shadow); }
.hero h1 { font-size: 40px; margin-top: 18px; }
.hero p { font-size: 19px; color: var(--muted); max-width: 520px; margin: 8px auto 0; }

/* A sticky note pushpinned to the board, like the app's: dark ink in both light and dark mode. */
.letter {
  position: relative;
  background: var(--sticky);
  color: #2b2118;
  border-radius: 4px;
  box-shadow: 0 6px 14px rgba(0, 0, 0, 0.18);
  transform: rotate(-0.8deg);
  margin: 36px 4px 12px;
  padding: 26px 30px 24px;
  font: 21px/1.45 "Patrick Hand", "Marker Felt", cursive;
}
/* The app's PushPin (Kinboard/Design/Components.swift): a brick-red head with a white glint, centered on the top edge. */
.letter::before, .letter::after {
  content: "";
  position: absolute;
  border-radius: 50%;
}
.letter::before {
  width: 22px;
  height: 22px;
  top: -8px;
  left: calc(50% - 11px);
  background: var(--brick);
  border: 1.5px solid color-mix(in srgb, var(--line) 85%, transparent);
  box-shadow: 0 2px 3px color-mix(in srgb, var(--shadow) 35%, transparent);
}
.letter::after {
  width: 6.6px;
  height: 6.6px;
  top: -4px;
  left: calc(50% - 7px);
  background: rgba(255, 255, 255, 0.5);
}
.letter h2 { margin-top: 0; font-size: 24px; }
.letter p { margin-bottom: 12px; }
.letter .signature { font-size: 26px; margin: 18px 0 0; }

@media (max-width: 600px) {
  .letter { padding: 22px 20px 20px; font-size: 20px; margin: 30px 0 10px; }
}

footer {
  padding-top: 22px;
  padding-bottom: 36px;
  color: var(--ink);
  font-size: 15px;
  text-align: center;
}
footer a { color: var(--ink); }