@font-face {
  font-family: "Fredoka";
  font-style: normal;
  font-weight: 500 600;
  font-display: swap;
  src: url("../fonts/fredoka-latin.woff2") format("woff2");
}

:root {
  color-scheme: light;
  --ink: #2a2230;
  --muted: #5e5566;
  --bg: #fbf9f7;
  --card: #ffffff;
  --line: #e8e2e5;
  --field: #d8d0d5;
  --accent: #6a4c8c;
  --accent-dark: #553b73;
  --accent-soft: #f3eef8;
  --ok: #2c6e4f;
  --error: #b3261e;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; color: var(--ink); background: var(--bg); font-size: 17px; line-height: 1.6; -webkit-font-smoothing: antialiased; }
a { color: var(--accent); text-underline-offset: 3px; }
a:hover { color: var(--accent-dark); }
img { display: block; max-width: 100%; }
h1, h2, h3 { margin: 0 0 .5em; color: var(--ink); line-height: 1.2; }
h1 { font-size: clamp(34px, 4.6vw, 48px); font-weight: 750; letter-spacing: -.02em; }
h2 { font-size: clamp(25px, 3vw, 30px); font-weight: 700; letter-spacing: -.01em; }
h3 { font-size: 19px; font-weight: 650; }
p { margin: 0 0 1em; }
.wrap { width: min(1080px, calc(100% - 40px)); margin-inline: auto; }
.skip-link { position: absolute; top: -100px; left: 16px; z-index: 10; padding: 8px 14px; border-radius: 8px; background: var(--ink); color: #fff; }
.skip-link:focus { top: 12px; }

/* Cursor (computers only): the usual arrow, and the usual pointing hand over anything clickable, in the
   site's purple instead of black. The click points are the arrow's tip (2, 2) and the fingertip (7, 1).
   Redraw with tools/make_cursors.py. */
html {
  cursor: url("../images/cursor-arrow.png") 2 2, auto;
  cursor: -webkit-image-set(url("../images/cursor-arrow.png") 1x, url("../images/cursor-arrow-2x.png") 2x) 2 2, auto;
  cursor: image-set(url("../images/cursor-arrow.png") 1x, url("../images/cursor-arrow-2x.png") 2x) 2 2, auto;
}
a, button, summary, .button {
  cursor: url("../images/cursor-hand.png") 7 1, pointer;
  cursor: -webkit-image-set(url("../images/cursor-hand.png") 1x, url("../images/cursor-hand-2x.png") 2x) 7 1, pointer;
  cursor: image-set(url("../images/cursor-hand.png") 1x, url("../images/cursor-hand-2x.png") 2x) 7 1, pointer;
}
input, textarea { cursor: text; }

/* Header and footer */
.site-header { border-bottom: 1px solid var(--line); }
.site-header .wrap { min-height: 84px; display: flex; align-items: center; justify-content: space-between; gap: 20px; }
.brand { display: inline-flex; flex-direction: column; align-items: center; gap: 3px; color: var(--ink); font-family: "Fredoka", ui-rounded, -apple-system, sans-serif; font-size: 21px; font-weight: 500; line-height: 1; text-decoration: none; white-space: nowrap; }
.brand:hover { color: var(--ink); }
.brand-accent { color: var(--accent); font-weight: 600; }
.brand-mark { width: 48px; height: 48px; flex: none; }
.brand-mark svg { display: block; width: 100%; height: 100%; }
.main-nav { display: flex; align-items: center; gap: 24px; margin-left: auto; font-size: 15px; font-weight: 600; }
.main-nav a { color: var(--muted); text-decoration: none; }
.main-nav a:hover { color: var(--ink); }
/* "Fun Stuff" drop-down: a button in the menu that opens a short list of links. On computers it opens when
   the mouse points at it (nav.js); on phones and with a keyboard it opens with a tap or Enter. */
.nav-menu { position: relative; }
.nav-menu-toggle { display: inline-flex; align-items: center; gap: 5px; padding: 0; border: 0; background: none; color: var(--muted); font: inherit; }
.nav-menu-toggle:hover, .nav-menu.is-open .nav-menu-toggle { color: var(--ink); }
.nav-menu-caret { width: 12px; height: 12px; flex: none; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.nav-menu.is-open .nav-menu-caret { transform: rotate(180deg); }
.nav-menu-list { display: none; position: absolute; top: calc(100% + 12px); right: 0; z-index: 20; min-width: 160px; padding: 6px; border: 1px solid var(--line); border-radius: 8px; background: var(--card); box-shadow: 0 12px 24px #2a22301a; }
.nav-menu.is-open .nav-menu-list { display: block; }
/* An invisible strip that joins the button to its list, so the list stays open while the mouse moves down to it */
.nav-menu-list::before { content: ""; position: absolute; left: 0; right: 0; bottom: 100%; height: 14px; }
.main-nav .nav-menu-list a { display: block; padding: 9px 12px; border-radius: 6px; color: var(--ink); white-space: nowrap; }
.main-nav .nav-menu-list a:hover { background: var(--accent-soft); }
.nav-cta { flex: none; padding: 9px 16px; border-radius: 8px; background: var(--accent); color: #fff; font-size: 15px; font-weight: 600; text-decoration: none; }
.nav-cta:hover { background: var(--accent-dark); color: #fff; }
.nav-toggle { display: none; width: 38px; height: 38px; place-items: center; padding: 0; border: 0; border-radius: 8px; background: none; color: var(--ink); }
.nav-toggle svg { width: 24px; height: 24px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; }
.nav-toggle .icon-close, .nav-open .nav-toggle .icon-menu { display: none; }
.nav-open .nav-toggle .icon-close { display: inline; }
.site-footer { border-top: 1px solid var(--line); padding: 28px 0 40px; color: var(--muted); font-size: 14px; }
.site-footer .wrap { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px 24px; }

/* Buttons */
.button { min-height: 48px; display: inline-flex; align-items: center; justify-content: center; padding: 12px 22px; border: 0; border-radius: 8px; background: var(--accent); color: #fff; font: inherit; font-size: 16px; font-weight: 650; text-decoration: none; }
.button:hover { background: var(--accent-dark); color: #fff; }
.button:disabled { opacity: .6; cursor: wait; }

/* Home: headline + contact form */
.hero { padding: 64px 0 72px; }
.hero-grid { display: grid; grid-template-columns: minmax(0, 1fr) 460px; grid-template-rows: auto 1fr; grid-template-areas: "intro form" "points form"; column-gap: 64px; }
.hero-intro { grid-area: intro; padding-top: 28px; }
.hero-intro h1 { text-wrap: balance; }
.hero-intro p { max-width: 520px; color: var(--muted); font-size: 20px; }
.hero-grid .contact-card { grid-area: form; }
.hero-points { grid-area: points; display: grid; align-content: start; gap: 12px; max-width: 500px; margin: 8px 0 0; padding: 0; list-style: none; }
.hero-points li { position: relative; padding-left: 30px; }
.hero-points li::before { position: absolute; left: 5px; top: .3em; width: 6px; height: 12px; border: solid var(--accent); border-width: 0 2.5px 2.5px 0; transform: rotate(45deg); content: ""; }

/* Contact form */
.contact-card { padding: 28px; border: 1px solid var(--line); border-radius: 14px; background: var(--card); box-shadow: 0 1px 2px #2a22300a, 0 12px 32px #2a22300f; scroll-margin-top: 24px; }
.contact-card h2 { margin-bottom: 6px; font-size: 24px; }
.contact-card > p { color: var(--muted); font-size: 16px; }
.contact-form { display: grid; gap: 6px; margin-top: 18px; }
.contact-form label { margin-top: 10px; font-size: 14px; font-weight: 650; }
.contact-form label:first-of-type { margin-top: 0; }
.contact-form input, .contact-form textarea { width: 100%; padding: 12px 14px; border: 1px solid var(--field); border-radius: 8px; background: #fff; color: var(--ink); font: inherit; font-size: 16px; }
.contact-form textarea { min-height: 140px; resize: vertical; }
.contact-form input:focus, .contact-form textarea:focus { border-color: transparent; outline: 2px solid var(--accent); outline-offset: 0; }
.contact-form ::placeholder { color: #9a909f; }
.contact-form .button { width: 100%; margin-top: 16px; }
.contact-honeypot { display: none; }
.contact-status { margin: 8px 0 0; font-size: 15px; font-weight: 600; }
.contact-status:empty { display: none; }
.contact-status[data-tone="ok"] { color: var(--ok); }
.contact-status[data-tone="error"] { color: var(--error); }
.contact-note { margin: 10px 0 0; color: var(--muted); font-size: 13px; text-align: center; }
.contact-setup { margin-top: 16px; padding: 16px 18px; border: 1.5px dashed #cdbfe0; border-radius: 10px; background: var(--accent-soft); font-size: 14px; }
.contact-setup ol { margin: 0 0 10px; padding-left: 20px; }
.contact-setup li { margin-bottom: 6px; }
.contact-setup p { margin-bottom: 8px; }
.contact-setup .ed, .contact-key-note .ed { display: inline-block; min-width: 260px; margin-top: 4px; padding: 4px 8px; background: #fff; font-family: ui-monospace, Menlo, monospace; font-size: 13px; }
.contact-key-note { margin: 10px 0 0; color: var(--muted); font-size: 12px; }
.contact-section { padding: 56px 0 80px; border-top: 1px solid var(--line); }
.contact-section .contact-card { max-width: 600px; }

/* Home sections */
.section { padding: 64px 0; border-top: 1px solid var(--line); }
.section > .wrap > h2 { margin-bottom: 28px; }
.help-grid, .steps { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 32px; }
.help-grid h3, .steps h3 { margin-bottom: 6px; }
.help-grid p, .steps p { margin: 0; color: var(--muted); }
.steps { margin: 0; padding: 0; list-style: none; counter-reset: step; }
.steps li { counter-increment: step; }
.steps li::before { width: 32px; height: 32px; display: grid; place-items: center; margin-bottom: 12px; border-radius: 50%; background: var(--accent-soft); color: var(--accent); font-size: 15px; font-weight: 750; content: counter(step); }
.section-head { display: flex; align-items: end; justify-content: space-between; gap: 16px 24px; margin-bottom: 24px; }
.section-head h2 { margin: 0; }
.section-head p { margin: 6px 0 0; color: var(--muted); }
.section-head > a { font-weight: 600; white-space: nowrap; }
.final-cta { padding: 56px 0 72px; border-top: 1px solid var(--line); }
.final-cta .wrap { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 16px 24px; }
.final-cta h2 { margin: 0; }

/* Examples */
.examples-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 28px; }
.example { min-width: 0; color: inherit; text-decoration: none; scroll-margin-top: 24px; }
a.example:hover { color: inherit; }
a.example:hover h3 { color: var(--accent); }
.example-image { aspect-ratio: 4 / 3; display: grid; place-items: center; overflow: hidden; border: 1px solid var(--line); border-radius: 10px; background: #fff; }
.example-image img { width: 100%; height: 100%; object-fit: cover; }
.example h2, .example h3 { margin: 12px 0 4px; font-size: 18px; font-weight: 650; letter-spacing: 0; }
.example p { margin: 0; color: var(--muted); font-size: 15px; }
.example .example-meta { margin-top: 12px; font-size: 13px; }

/* Inner pages */
.page-intro { padding: 56px 0 32px; }
.page-intro p { max-width: 640px; color: var(--muted); font-size: 19px; }
.page-body { padding-bottom: 64px; }
.prose { max-width: 700px; }
.prose p { font-size: 18px; }
.prose .lede { color: var(--ink); font-size: 21px; }
.notfound { padding-bottom: 96px; }

/* Notes */
.notes-list { max-width: 760px; border-top: 1px solid var(--line); }
.note-row { display: block; padding: 20px 0; border-bottom: 1px solid var(--line); color: inherit; text-decoration: none; }
.note-row:hover .note-title { color: var(--accent); }
.note-date { display: block; color: var(--muted); font-size: 14px; }
.note-title { display: block; margin-top: 2px; font-size: 20px; font-weight: 650; line-height: 1.3; }
.note-excerpt { display: block; margin-top: 4px; color: var(--muted); }
.notes-empty h2 { font-size: 22px; }
.notes-empty p { color: var(--muted); }
.article { max-width: 720px; padding: 48px 0 80px; }
.back-link { display: inline-block; margin-bottom: 28px; font-size: 15px; font-weight: 600; text-decoration: none; }
.article-meta { margin-bottom: 8px; color: var(--muted); font-size: 14px; }
.article h1 { font-size: clamp(32px, 4.4vw, 42px); }
.article-deck { margin-bottom: 36px; color: var(--muted); font-size: 20px; }
.article-body { font-size: 18px; line-height: 1.75; }
.article-body h2 { margin-top: 36px; font-size: 24px; }
.article-body li { margin-block: 6px; }
.article-end { margin-top: 48px; padding-top: 24px; border-top: 1px solid var(--line); }
.article-end p { font-size: 20px; font-weight: 650; }

/* Messages and the private-preview page (local only) */
.flash-wrap { margin-top: 12px; }
.flash { padding: 10px 14px; border-radius: 8px; background: var(--accent-soft); }
.flash-error { color: var(--error); }
.preview-page { min-height: 100vh; display: grid; place-items: center; padding: 24px; }
.preview-card { width: min(440px, 100%); padding: 32px; border: 1px solid var(--line); border-radius: 14px; background: #fff; }
.preview-card form { display: grid; gap: 8px; margin-top: 20px; }
.preview-card input { min-height: 46px; padding: 10px 12px; border: 1px solid var(--field); border-radius: 8px; font: inherit; }

@media (max-width: 860px) {
  .hero { padding: 36px 0 48px; }
  .hero-grid { grid-template-columns: 1fr; grid-template-rows: none; grid-template-areas: "intro" "form" "points"; }
  .hero-intro { padding-top: 0; }
  .hero-intro p { font-size: 18px; }
  .hero-grid .contact-card { margin: 8px 0 28px; }
  .help-grid, .steps { grid-template-columns: 1fr; gap: 24px; }
  .section { padding: 48px 0; }
  .section-head { display: block; }
  .section-head > a { display: inline-block; margin-top: 10px; }
}
@media (max-width: 640px) {
  .wrap { width: calc(100% - 32px); }
  .brand { font-size: 18px; }
  .brand-mark { width: 40px; height: 40px; }
  .contact-card { padding: 20px; }
  .examples-grid { grid-template-columns: 1fr; gap: 32px; }
  .page-intro { padding: 40px 0 24px; }
  .final-cta .button { width: 100%; }
}
/* Phones: menu button on the left, logo in the middle, Contact on the right, links in a drop-down */
@media (max-width: 720px) {
  .site-header { position: relative; }
  /* align-items: end + the small margins put the buttons' bottoms on the line of "okie dokie data" */
  .site-header .wrap { display: grid; grid-template-columns: 1fr auto 1fr; align-items: end; gap: 0; min-height: 72px; padding: 10px 0; }
  .nav-toggle { display: grid; grid-column: 1; justify-self: start; margin: 0 0 -1px -11px; }
  .brand { grid-column: 2; }
  .nav-cta { grid-column: 3; justify-self: end; margin-bottom: 2px; padding: 6px 11px; font-size: 13px; line-height: 20px; }
  .main-nav { display: none; position: absolute; top: 100%; left: 0; right: 0; z-index: 20; flex-direction: column; align-items: stretch; gap: 0; margin: 0; padding: 4px 20px 12px; border-block: 1px solid var(--line); background: var(--bg); box-shadow: 0 12px 24px #2a22301a; font-size: 17px; }
  .nav-open .main-nav { display: flex; }
  /* Home headline centered under the centered logo, with even line lengths */
  .hero-intro { text-align: center; }
  .hero-intro p { margin-inline: auto; text-wrap: balance; }
  .main-nav a { padding: 13px 0; border-bottom: 1px solid var(--line); color: var(--ink); }
  .main-nav a:last-child { border-bottom: 0; }
  /* On phones the Fun Stuff list opens in place, indented under its row */
  .nav-menu-toggle { width: 100%; justify-content: space-between; padding: 13px 0; color: var(--ink); text-align: left; }
  .nav-menu-caret { width: 14px; height: 14px; }
  .nav-menu-list::before { content: none; }
  .nav-menu-list { position: static; min-width: 0; padding: 0 0 4px 16px; border: 0; border-top: 1px solid var(--line); border-radius: 0; background: none; box-shadow: none; }
  .main-nav .nav-menu-list a { padding: 12px 0; border-radius: 0; white-space: normal; }
  .main-nav .nav-menu-list a:hover { background: none; }
}
@media (max-width: 640px) {
  .main-nav { padding-inline: 16px; }
}
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

/* FAQ */
.faq { max-width: 760px; border-top: 1px solid var(--line); }
.faq-item { border-bottom: 1px solid var(--line); }
.faq-item summary { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 18px 0; font-size: 18px; font-weight: 650; line-height: 1.35; list-style: none; }
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary::after { flex: none; color: var(--accent); font-size: 26px; font-weight: 400; line-height: 1; content: "+"; }
.faq-item[open] summary::after { content: "−"; }
.faq-item summary:hover { color: var(--accent); }
.faq-item summary:focus-visible { outline: 2px solid var(--accent); outline-offset: 4px; border-radius: 4px; }
.faq-item p { max-width: 680px; margin: 0 0 20px; color: var(--muted); }
.faq-item-editing { padding: 16px 0; }
.faq-item-editing h3 { margin-bottom: 6px; font-size: 18px; }
.faq-item-editing p { margin-bottom: 0; }
.ed-faq-add { margin-top: 20px; }

/* About page */
.about { padding: 48px 0 56px; overflow-x: clip; }
.about-heading { position: relative; display: inline-block; margin: 0 0 20px; padding: 18px 0; font-family: "Fredoka", ui-rounded, -apple-system, sans-serif; font-weight: 600; }
.about-heading::before { content: ""; position: absolute; z-index: -1; left: -26px; top: 50%; width: 92px; height: 92px; border-radius: 50%; background: #fbe3eb; transform: translateY(-50%); }
/* Three sparkles around the pink circle, in the logo colors. The box is the circle plus 14px on every side. */
.about-heading::after { content: ""; position: absolute; z-index: -1; left: -40px; top: 50%; width: 120px; height: 120px; transform: translateY(-50%); background:
  url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23F2C94C' d='M12 0C13 7 17 11 24 12C17 13 13 17 12 24C11 17 7 13 0 12C7 11 11 7 12 0Z'/%3E%3C/svg%3E") 4px 6px / 22px no-repeat,
  url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23B79BE3' d='M12 0C13 7 17 11 24 12C17 13 13 17 12 24C11 17 7 13 0 12C7 11 11 7 12 0Z'/%3E%3C/svg%3E") 92px 88px / 14px no-repeat,
  url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23F09AB8' d='M12 0C13 7 17 11 24 12C17 13 13 17 12 24C11 17 7 13 0 12C7 11 11 7 12 0Z'/%3E%3C/svg%3E") 84px 0 / 11px no-repeat; }
.about-grid { display: grid; grid-template-columns: 200px minmax(0, 620px); gap: 30px; align-items: start; }
.about-photo { width: 200px; height: 200px; border-radius: 50%; object-fit: cover; border: 6px solid var(--accent-soft); }
.about-text p { margin: 0 0 14px; font-size: 17px; }
.about-hello { font-family: "Fredoka", ui-rounded, -apple-system, sans-serif; font-size: 22px !important; font-weight: 600; }
.about-links { margin: 18px 0 0; padding: 0; list-style: none; }
.about-links li { margin: 4px 0; }
.about-favs { margin: 48px 0 0 230px; max-width: 620px; }
.about-favs h2 { font-size: 20px; font-weight: 600; }
.about-favs ul { columns: 2; column-gap: 32px; margin: 0; padding: 0; list-style: none; color: var(--muted); font-size: 15px; }
.about-favs li { margin-bottom: 8px; break-inside: avoid; }
.about-contact .contact-card { max-width: 620px; margin-left: 230px; }
@media (max-width: 720px) {
  /* Photo and "about me" side by side, the rest of the text full width below them */
  .about-grid { grid-template-columns: auto minmax(0, 1fr); column-gap: 14px; row-gap: 0; align-items: center; }
  .about-text { display: contents; }
  .about-text > :not(.about-heading) { grid-column: 1 / -1; }
  .about-heading { margin: 0 0 0 26px; justify-self: start; }
  .about-photo { width: clamp(96px, 30vw, 130px); height: clamp(96px, 30vw, 130px); border-width: 5px; }
  .about-text .about-hello { margin-top: 22px; }
  .about-favs { margin-left: 0; }
  .about-contact .contact-card { margin-left: 0; }
}

/* Examples page: one example per row, with the details next to the picture */
.examples-list { display: grid; gap: 56px; }
.examples-list .example { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: 20px 36px; align-items: start; }
.examples-list .example > .ed-row { grid-column: 1 / -1; }
.work-contact .wrap { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); column-gap: 36px; }
.work-contact .contact-card { grid-column: 2; max-width: none; }
.examples-list .example .example-meta { margin-top: 0; }
.examples-list .example h2 { margin: 6px 0 6px; font-size: 22px; }
.example-details { margin: 18px 0 0; }
.example-details div { margin-bottom: 12px; }
.example-details dt { color: var(--ink); font-size: 15px; font-weight: 650; }
.example-details dd { margin: 2px 0 0; color: var(--muted); font-size: 15px; }
@media (max-width: 760px) {
  .examples-list { gap: 44px; }
  .examples-list .example { grid-template-columns: 1fr; }
  .work-contact .wrap { grid-template-columns: 1fr; }
  .work-contact .contact-card { grid-column: 1; }
}