*,*::before,*::after{box-sizing:border-box}:root{color-scheme:light;--bg:#f6efe1;--paper:#fbf7ee;--ink:#14245a;--text:#2c3560;--muted:#6c6a72;--rule:#ddd1bb;--accent:#14245a;--accent-soft:#e2a23b;--leaf:#6f8a4e;--heart:#d9893a;--on-accent:#fbf7ee;--shadow:0 1px 2px rgb(60 45 20 / .08),0 6px 18px rgb(60 45 20 / .08);--shadow-lift:0 2px 4px rgb(60 45 20 / .1),0 16px 34px rgb(60 45 20 / .16);--font-display:"Fraunces",Georgia,serif;--font-body:"Lora",Georgia,serif;--text-s:0.9rem;--text-m:1.05rem;--text-l:1.3rem;--text-xl:clamp(1.8rem,1.2rem + 2vw,2.6rem);--text-hero:clamp(2.6rem,1.4rem + 4.6vw,4.9rem);--leading:1.55;--space-xs:0.25rem;--space-s:0.5rem;--space-m:1rem;--space-l:2rem;--space-xl:4rem;--gutter:clamp(16px,4vw,48px);--page:1440px;--radius:12px;--radius-pill:999px;--duration:160ms;--grain:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .45 0 0 0 0 .36 0 0 0 0 .2 0 0 0 .07 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

@media (prefers-reduced-motion: reduce) {
  :root { --duration: 0ms; }
}

/* ---- 2. Elements ---- */

html { -webkit-text-size-adjust: 100%; }
html, body { overflow-x: clip; }   /* decorations run off the edge on purpose; the page never scrolls sideways */
body {
  margin: 0;
  background: var(--grain), var(--bg);
  color: var(--text);
  font: var(--text-m) / var(--leading) var(--font-body);
}

h1, h2, h3 {
  font-family: var(--font-display);
  font-variation-settings: "SOFT" 100, "opsz" 144;
  color: var(--ink);
  line-height: 1.05;
  margin: 0 0 var(--space-m);
  text-wrap: balance;
}
h1 { font-size: var(--text-hero); font-weight: 800; letter-spacing: -0.01em; }
h2 { font-size: var(--text-xl); font-weight: 750; }
h3 { font-size: var(--text-l); font-weight: 650; }
p { margin: 0 0 var(--space-m); }

a { color: var(--ink); text-underline-offset: 3px; }
a:focus-visible, button:focus-visible, input:focus-visible {
  outline: 3px solid var(--accent-soft); outline-offset: 3px;
}

img { max-width: 100%; height: auto; }

button, a.button {
  display: inline-flex; align-items: center; gap: 0.6em;
  min-height: 52px; padding: 0 1.6em;
  border: 2px solid var(--ink); border-radius: var(--radius-pill);
  background: var(--ink); color: var(--on-accent);
  font: 600 var(--text-l) / 1 var(--font-display);
  font-variation-settings: "SOFT" 100;
  text-decoration: none; cursor: pointer;
  box-shadow: var(--shadow);
  transition: transform var(--duration), box-shadow var(--duration);
}
button:hover, a.button:hover { transform: translateY(-1px); box-shadow: var(--shadow-lift); }
button svg, a.button svg { width: 1.15em; height: 1.15em; flex: none; }

input[type="search"] {
  height: 44px; padding: 0 1em;
  border: 1.5px solid var(--rule); border-radius: var(--radius-pill);
  background: var(--paper); color: var(--text);
  font: var(--text-s) var(--font-body);
}

/* ---- 3. Variants ---- */

button.ghost, a.button.ghost {
  background: var(--paper); color: var(--ink); border-color: var(--rule);
}
button.small, a.button.small { min-height: 40px; padding: 0 1em; font-size: var(--text-m); }

/* The hand-drawn doodles the layout scatters (icon set "doodle"). */
.doodle { position: absolute; pointer-events: none; }