/* shared.css — Anaya · simple & handmade */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

@font-face {
  font-family: 'Handwriting';
  src: url('fonts/handwriting.woff') format('woff'),
       url('fonts/handwriting.ttf') format('truetype');
  font-weight: normal; font-style: normal; font-display: swap;
}
/* second handwriting font — fills in the punctuation the first one lacks
   (– — : ; @ ·), scaled up to match its x-height */
@font-face {
  font-family: 'Handwriting';
  src: url('fonts/handwriting-punct.woff') format('woff'),
       url('fonts/handwriting-punct.otf') format('opentype');
  font-weight: normal; font-style: normal; font-display: swap;
  size-adjust: 122.3%;
  unicode-range: U+002D, U+2013, U+2014, U+003A, U+003B, U+0040, U+00B7;
}

:root, [data-theme="light"] {
  --bg:       #fdf9ff;
  --ink:      #2b1a40;
  --ink2:     #6b5e80;
  --plum:     #3b1f5e;
  --violet:   #6b3fa0;
  --lavender: #a67fd4;
  --rule:     #e4d8f2;
}
[data-theme="dark"] {
  --bg:       #0e0718;
  --ink:      #ece4fb;
  --ink2:     #a892c8;
  --plum:     #d9c4f5;
  --violet:   #bd93e8;
  --lavender: #8a6fb0;
  --rule:     #2a1a44;
}

html { scroll-behavior: smooth; }

body {
  font-family: 'DM Sans', system-ui, sans-serif;
  background: var(--bg);
  color: var(--ink);
  line-height: 1.72;
  min-height: 100vh;
  -webkit-font-smoothing: antialiased;
  transition: background .3s, color .3s;
}

/* faint paper grain — a little handmade texture */
body::before {
  content: ''; position: fixed; inset: 0; z-index: 0; pointer-events: none;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.035'/%3E%3C/svg%3E");
}

/* container */
.wrap {
  position: relative; z-index: 1;
  max-width: 620px;
  margin: 0 auto;
  padding: 2.4rem 1.4rem 4rem;
}

/* ---- nav ---- */
.nav {
  display: flex; flex-wrap: wrap; align-items: baseline;
  justify-content: space-between; gap: .5rem 1.2rem;
  margin-bottom: 3.2rem;
}
.nav-home {
  display: inline-flex; align-items: center; gap: .5rem;
  font-family: 'Lora', serif; font-weight: 600; font-size: 1.18rem;
  color: var(--plum); text-decoration: none; letter-spacing: -.01em;
}
.nav-home em { font-style: italic; }
.nav-home img { height: 24px; width: auto; }
.nav-links { display: flex; flex-wrap: wrap; gap: .2rem 1.15rem; }
.nav-links a {
  color: var(--ink2); text-decoration: none; font-size: .92rem;
  transition: color .15s;
}
.nav-links a:hover { color: var(--violet); text-decoration: underline; text-underline-offset: 3px; }
.nav-links a.active { color: var(--violet); }

/* ---- headings & text ---- */
.kicker {
  font-family: 'DM Mono', monospace; font-size: .68rem;
  letter-spacing: .16em; text-transform: uppercase; color: var(--lavender);
  margin-bottom: .55rem;
}
h1.title {
  font-family: 'Lora', serif; font-weight: 600;
  font-size: clamp(2rem, 5vw, 2.7rem); line-height: 1.1;
  color: var(--plum); letter-spacing: -.02em;
}
h1.title em { font-style: italic; color: var(--violet); }
.sub { color: var(--ink2); margin-top: .7rem; font-size: 1rem; max-width: 48ch; }
h2 {
  font-family: 'Lora', serif; font-weight: 600; font-size: 1.28rem;
  color: var(--plum); margin: 2.6rem 0 .5rem;
}
p { margin-bottom: 1rem; }
a { color: var(--violet); text-underline-offset: 2px; }
strong { color: var(--ink); font-weight: 600; }
/* ── HANDWRITTEN BODY TEXT ── */
.wrap p, ul.list > li {
  font-family: 'Handwriting', 'DM Sans', system-ui, sans-serif;
  font-size: 1.34rem;
  line-height: 1.64;
  -webkit-text-stroke: 0.4px currentColor;
}
.lead-in { font-size: 1.48rem; line-height: 1.52; margin: 1.6rem 0 1.2rem; }

/* ---- simple lists (no boxes) ---- */
ul.list { list-style: none; margin: .4rem 0 1.4rem; }
ul.list > li {
  position: relative; padding-left: 1.35rem; margin-bottom: .9rem;
  line-height: 1.66;
}
ul.list > li::before {
  content: '—'; position: absolute; left: 0; color: var(--lavender);
}

/* ---- dividers ---- */
.divider { text-align: center; margin: 2.8rem 0; }
.divider img { height: 22px; width: auto; opacity: .7; }
hr.rule { border: none; border-top: 1px solid var(--rule); margin: 2.4rem 0; }

/* ---- footer ---- */
footer {
  margin-top: 3.6rem; padding-top: 1.4rem; border-top: 1px solid var(--rule);
  display: flex; align-items: center; gap: .55rem;
  font-family: 'DM Mono', monospace; font-size: .74rem; color: var(--lavender);
}
footer a { color: var(--violet); text-decoration: none; }
footer a:hover { text-decoration: underline; }

/* hand-drawn butterfly, theme-aware */
.ink-dark { display: inline-block; } .ink-light { display: none; }
[data-theme="dark"] .ink-dark { display: none; } [data-theme="dark"] .ink-light { display: inline-block; }
.foot-fly { height: 20px; width: auto; }

/* ---- theme toggle ---- */
.theme-btn {
  position: fixed; bottom: 1.2rem; right: 1.2rem; z-index: 50;
  width: 36px; height: 36px; border-radius: 50%;
  border: 1px solid var(--rule); background: var(--bg); color: inherit;
  cursor: pointer; font-size: 1rem; line-height: 1;
  display: flex; align-items: center; justify-content: center;
}
.icon-sun { display: inline; } .icon-moon { display: none; }
[data-theme="dark"] .icon-sun { display: none; } [data-theme="dark"] .icon-moon { display: inline; }

/* ---- home hero ---- */
.home { text-align: center; margin: 1rem 0 1.6rem; }
.home-fly { height: 116px; width: auto; margin-bottom: 1.1rem; }
.home-name {
  font-family: 'Lora', serif; font-weight: 600;
  font-size: clamp(2.6rem, 9vw, 3.8rem); line-height: 1;
  color: var(--plum); letter-spacing: -.03em;
}
.home-name em { font-style: italic; }
.home-tag {
  font-family: 'DM Mono', monospace; font-size: .72rem; letter-spacing: .1em;
  text-transform: uppercase; color: var(--lavender); margin-top: .85rem;
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .001ms !important;
    transition-duration: .001ms !important;
    scroll-behavior: auto !important;
  }
}