/* Olluva site. Same palette and type as the app: warm paper, plum ink, a serif for headings. */
:root {
  --canvas: #faf7f2; --sunken: #f1e9de; --ink: #28242c; --ink-2: #69636d;
  --accent: #302238; --on-accent: #fff; --highlight: #b4566a; --hairline: rgba(40, 36, 44, .12);
}
@media (prefers-color-scheme: dark) {
  :root {
    --canvas: #16111a; --sunken: #1f1825; --ink: #f3edf5; --ink-2: #b9afbf;
    --accent: #d9c8f0; --on-accent: #1e1524; --highlight: #e9a9b6; --hairline: rgba(255, 255, 255, .14);
  }
}
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0; background: var(--canvas); color: var(--ink);
  font: 17px/1.6 -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
}
.wrap { max-width: 44rem; margin: 0 auto; padding: 0 1.5rem; }
header.site { padding: 1.5rem 0; }
header.site .wrap { display: flex; align-items: center; justify-content: space-between; gap: 1rem; flex-wrap: wrap; }
.brand { font: 600 1.35rem/1 "New York", "Iowan Old Style", Georgia, serif; color: var(--ink); text-decoration: none; }
nav a { color: var(--ink-2); text-decoration: none; margin-left: 1.25rem; font-size: .95rem; }
nav a:first-child { margin-left: 0; }
nav a:hover, nav a[aria-current="page"] { color: var(--ink); }
h1, h2, h3 { font-family: "New York", "Iowan Old Style", Georgia, serif; font-weight: 600; line-height: 1.2; }
h1 { font-size: clamp(2rem, 6vw, 3rem); margin: 2rem 0 1rem; }
h2 { font-size: 1.4rem; margin: 2.5rem 0 .5rem; }
h3 { font-size: 1.1rem; margin: 1.5rem 0 .25rem; }
p, li { color: var(--ink); }
.lead { font-size: 1.2rem; color: var(--ink-2); }
.muted { color: var(--ink-2); }
a { color: var(--accent); }
ul { padding-left: 1.2rem; }
li { margin: .35rem 0; }
table { width: 100%; border-collapse: collapse; margin: 1rem 0; font-size: .95rem; }
th, td { text-align: left; vertical-align: top; padding: .6rem .75rem .6rem 0; border-bottom: 1px solid var(--hairline); }
th { color: var(--ink-2); font-weight: 600; font-size: .8rem; text-transform: uppercase; letter-spacing: .06em; }
.notice { background: var(--sunken); border-radius: 14px; padding: 1rem 1.25rem; margin: 1.5rem 0; }
.notes { display: flex; justify-content: center; margin: 3rem 0 1rem; min-height: 15rem; position: relative; }
.note {
  width: 12.5rem; height: 12.5rem; border-radius: 5px; display: grid; place-items: center; text-align: center;
  padding: 1.25rem; position: absolute; color: #302238;
  font: 1.45rem/1.3 "Bradley Hand", "Segoe Print", "Comic Sans MS", cursive;
  box-shadow: 0 1px 2px rgba(48, 34, 56, .1), 0 14px 26px rgba(48, 34, 56, .16);
}
.note.a { background: #e9e2f5; transform: translate(-7rem, -1rem) rotate(-9deg); font-family: "New York", Georgia, serif; font-size: 1.2rem; }
.note.b { background: #f9e4e4; transform: translate(7rem, -1.6rem) rotate(8deg); color: #b4566a; }
.note.c { background: #fff9ec; transform: translate(0, 1.4rem) rotate(-2deg); }
@media (max-width: 34rem) { .note.a { transform: translate(-4.5rem, -1rem) rotate(-9deg); } .note.b { transform: translate(4.5rem, -1.6rem) rotate(8deg); } }
.points { display: grid; gap: 1.25rem; margin: 2rem 0; }
.points h3 { margin: 0 0 .15rem; }
.points p { margin: 0; color: var(--ink-2); }
footer.site { border-top: 1px solid var(--hairline); margin-top: 4rem; padding: 1.5rem 0 3rem; font-size: .9rem; color: var(--ink-2); }
footer.site a { color: var(--ink-2); margin-right: 1rem; }
footer.site p { color: var(--ink-2); }