/* Komopa site — palette lifted from Komopa/Views/KomopaTheme.swift so the
   site and the app cannot drift apart:
     cream #FCF2E3   plum #855285   candy pink #ED619E
     panel face #FEF7E9   panel glow #FCE4D7   panel rim #F79BB3
   Plum titles, lavender (plum at 75%) subtext — the app's own rule. */

:root {
  /* Tells the browser this page is light-only, so it renders scrollbars and
     form controls to match and never applies its own auto-darkening. */
  color-scheme: light;

  --cream: #FCF2E3;
  --panel: #FEF7E9;
  --glow: #FCE4D7;
  --rim: #F79BB3;
  --plum: #855285;
  --plum-soft: rgba(133, 82, 133, 0.75);
  --pink: #ED619E;
  --ink: #4A2E4A;
}

/* There is deliberately NO prefers-color-scheme: dark block. Komopa's own
   screens look the same in Light and Dark because they are painted
   explicitly, so a site that inverted would be the only Komopa surface
   that changes with the reader's settings — and its dark palette would
   have to be invented, since the app has none to copy. Cream everywhere,
   including whatever machine an App Review reviewer is using. */

* { box-sizing: border-box; }

body {
  margin: 0;
  padding: 0 1.25rem 4rem;
  background: var(--cream);
  color: var(--ink);
  font-family: Fredoka, "Trebuchet MS", "Segoe UI", system-ui, sans-serif;
  font-size: 1.0625rem;
  line-height: 1.65;
  -webkit-text-size-adjust: 100%;
}

.wrap { max-width: 44rem; margin: 0 auto; }

header.site {
  padding: 2.5rem 0 1.5rem;
  text-align: center;
}

header.site .logo {
  font-size: 2.25rem;
  font-weight: 600;
  color: var(--pink);
  letter-spacing: 0.02em;
  margin: 0;
}

header.site .tagline {
  color: var(--plum-soft);
  margin: 0.35rem 0 0;
}

nav.site {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin: 1.25rem 0 0;
}

nav.site a {
  display: inline-block;
  padding: 0.4rem 1rem;
  border-radius: 999px;
  background: var(--panel);
  border: 2px solid var(--rim);
  color: var(--plum);
  text-decoration: none;
  font-weight: 500;
  font-size: 0.95rem;
}

nav.site a:hover, nav.site a:focus { background: var(--glow); }
nav.site a[aria-current="page"] { background: var(--pink); border-color: var(--pink); color: #fff; }

main { padding-top: 1rem; }

h1 { color: var(--plum); font-size: 1.9rem; font-weight: 600; margin: 1.5rem 0 0.25rem; }
h2 { color: var(--plum); font-size: 1.25rem; font-weight: 600; margin: 2rem 0 0.5rem; }
h3 { color: var(--pink); font-size: 1.05rem; font-weight: 600; margin: 1.5rem 0 0.35rem; }

.updated { color: var(--plum-soft); font-size: 0.9rem; margin: 0 0 1.5rem; }

p { margin: 0 0 1rem; }
ul { margin: 0 0 1rem; padding-left: 1.4rem; }
li { margin-bottom: 0.4rem; }
strong { color: var(--plum); font-weight: 600; }
a { color: var(--pink); }

.panel {
  background: var(--panel);
  border: 2px solid var(--rim);
  border-radius: 1.25rem;
  padding: 1.25rem 1.5rem;
  margin: 1.5rem 0;
}

.panel.calm { border-color: var(--glow); background: var(--glow); }
.panel h2:first-child, .panel h3:first-child { margin-top: 0; }
.panel :last-child { margin-bottom: 0; }

.contact { text-align: center; font-size: 1.1rem; }
.contact a { font-weight: 600; text-decoration: none; }
.contact a:hover { text-decoration: underline; }

footer.site {
  margin-top: 3rem;
  padding-top: 1.5rem;
  border-top: 2px solid var(--glow);
  text-align: center;
  color: var(--plum-soft);
  font-size: 0.875rem;
}

footer.site a { color: var(--plum-soft); }