/* Yesteryear (Google Fonts, OFL) — self-hosted so the site stays request-free
   for third parties, as the footer promises. Display use only: it is a script
   face with a small x-height and is unreadable at body sizes. */
@font-face {
  font-family: "Yesteryear";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("/fonts/yesteryear-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: "Yesteryear";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("/fonts/yesteryear-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

:root {
  --bg: #fdf6ec;
  --panel: #fffdf9;
  --ink: #2f2118;
  --muted: #7d6a5b;
  --line: #e6d7c3;
  --sauce: #b3321f;
  --sauce-dark: #8d2416;
  --cheese: #f0b429;
  /* One repeat of the pan, top to bottom. Mixed against the page ground rather
     than laid over it as a translucent wash: a drip hangs over the *next* band,
     so a translucent one would pick that band up and land a shade off the layer
     it fell from. Mixed here, a layer is one flat colour wherever it appears.
     The percentages stay small — this is texture, not UI signal. */
  --layer-besciamella: color-mix(in srgb, #ffffff 85%, var(--bg));
  --layer-pasta: color-mix(in srgb, #f0b429 7%, var(--bg));
  --layer-ragu: color-mix(in srgb, #b3321f 9%, var(--bg));
  --layer-cheese: color-mix(in srgb, #f0b429 16%, var(--bg));
  --radius: 10px;
  --display: "Yesteryear", "Brush Script MT", cursive;
}

@media (prefers-color-scheme: dark) {
  :root {
    --bg: #1a1512;
    --panel: #241d18;
    --ink: #f2e7db;
    --muted: #a8968a;
    --line: #3a2f26;
    --sauce: #e0533a;
    --sauce-dark: #c23e28;
    /* Tints glow on the dark ground, so roughly half the strength. Besciamella
       still has to be the lightest layer, so it mixes towards the ink cream
       rather than pure white. Only the percentages change here — each mix picks
       up the dark --bg above on its own. */
    --layer-besciamella: color-mix(in srgb, #f2e7db 7%, var(--bg));
    --layer-pasta: color-mix(in srgb, #f0b429 4%, var(--bg));
    --layer-ragu: color-mix(in srgb, #e0533a 8%, var(--bg));
    --layer-cheese: color-mix(in srgb, #f0b429 9%, var(--bg));
  }
}

* { box-sizing: border-box; }

body {
  margin: 0;
  padding: 0 1.25rem 4rem;
  background: var(--bg);
  color: var(--ink);
  font: 16px/1.65 Georgia, "Iowan Old Style", "Times New Roman", serif;
}

/* No link styling existed, so links rendered default blue — wrong against the
   warm palette and poor contrast on the dark ground. Hover thickens the rule
   rather than shifting the colour, which would darken on the dark theme. */
a {
  color: var(--sauce);
  text-underline-offset: 2px;
  text-decoration-thickness: 1px;
}

a:hover { text-decoration-thickness: 2px; }

.site-header {
  max-width: 46rem;
  margin: 0 auto;
  padding: 3rem 0 1.5rem;
  text-align: center;
  border-bottom: 4px double var(--line);
}

.site-header h1 {
  margin: 0;
  /* Yesteryear runs small and has long ascenders, so it needs more size and
     leading than the serif it replaces. */
  font-family: var(--display);
  font-size: clamp(2.75rem, 8vw, 4.25rem);
  font-weight: 400;
  line-height: 1.15;
  letter-spacing: 0;
  color: var(--sauce);
}

/* The icon rides with the script face without inheriting its metrics. */
.site-header h1 .logo {
  height: 0.55em;
  width: auto;
  vertical-align: 0.04em;
  margin-right: 0.1em;
}

.logo { filter: saturate(1.1); }

/* The icon is drawn with a near-black outline, which all but vanishes on the
   dark background, so lift it with a light halo. */
@media (prefers-color-scheme: dark) {
  .logo { filter: saturate(1.1) drop-shadow(0 0 1px rgba(242, 231, 219, 0.6)); }
}

.tagline {
  margin: 0.35rem 0 0;
  color: var(--muted);
  font-style: italic;
}

main { max-width: 46rem; margin: 0 auto; }

.controls {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.85rem 1.5rem;
  margin: 2rem 0 1.5rem;
  padding: 1.25rem;
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: var(--radius);
}

.field { display: flex; align-items: center; gap: 0.5rem; }
.field-check { flex: 1 1 100%; }

.controls label {
  font-family: system-ui, -apple-system, sans-serif;
  font-size: 0.9rem;
  color: var(--muted);
}

.controls input[type="number"] {
  width: 5rem;
  padding: 0.4rem 0.5rem;
  font: inherit;
  color: var(--ink);
  background: var(--bg);
  border: 1px solid var(--line);
  border-radius: 6px;
}

/* The lasagna's opinion of your paragraph count, next to the input. */
.mood {
  display: flex;
  align-items: center;
  gap: 0.4rem;
}

.mood-face {
  font-size: 1.35rem;
  line-height: 1;
  /* Colour emoji ignore the serif stack and vary wildly in metrics. */
  font-family: "Apple Color Emoji", "Segoe UI Emoji", "Noto Color Emoji", sans-serif;
}

.mood-face.is-new { animation: mood-pop 0.28s ease-out; }

.mood-note {
  font: italic 0.82rem system-ui, -apple-system, sans-serif;
  color: var(--muted);
  white-space: nowrap;
}

@keyframes mood-pop {
  0% { transform: scale(0.6) rotate(-12deg); }
  60% { transform: scale(1.18) rotate(4deg); }
  100% { transform: scale(1) rotate(0); }
}

@media (prefers-reduced-motion: reduce) {
  .mood-face.is-new { animation: none; }
}

/* On narrow screens the note crowds the checkboxes out; the face still says it. */
@media (max-width: 30rem) {
  .mood-note { display: none; }
}

.controls input[type="checkbox"] {
  width: 1.05rem;
  height: 1.05rem;
  accent-color: var(--sauce);
}

.btn {
  padding: 0.5rem 1rem;
  font: 600 0.9rem system-ui, -apple-system, sans-serif;
  color: var(--ink);
  background: var(--bg);
  border: 1px solid var(--line);
  border-radius: 6px;
  cursor: pointer;
  transition: transform 0.08s ease, background 0.15s ease;
}

.btn:hover { background: var(--line); }
.btn:active { transform: translateY(1px); }

.btn-primary {
  margin-left: auto;
  padding: 0.35rem 1.35rem;
  font: 400 1.45rem/1.2 var(--display);
  color: #fff;
  background: var(--sauce);
  border-color: var(--sauce-dark);
}

.btn-primary:hover { background: var(--sauce-dark); }

.output-bar {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  margin-bottom: 0.75rem;
}

.stats {
  flex: 1;
  font: 0.82rem system-ui, -apple-system, sans-serif;
  color: var(--muted);
}

.output-actions { display: flex; gap: 0.5rem; }

/* The output is a pan of lasagna seen from the side: paragraphs stack edge to
   edge on a repeating four-layer cycle. Padding replaces the old margin so the
   bands touch — separated tints read as zebra-striped rows, touching ones read
   as a cross-section. Only the plain-text view gets the pan; the HTML view is a
   code block and carries its own chrome. */
.output.is-pan {
  border: 1px solid var(--line);
  border-radius: var(--radius);
  overflow: hidden;
}

.output p {
  margin: 0;
  padding: 0.9rem 1.1rem;
  /* Anchors the besciamella drips hanging over the layer below. */
  position: relative;
}

/* A besciamella melt covers the seam under it; every other seam is dry and
   keeps its hairline. */
.output p + p { border-top: 1px solid var(--line); }
.output p:nth-child(4n + 2) { border-top: none; }

/* Besciamella spills onto the pasta beneath it, and is lifted a step so the
   drips paint over that band rather than under it. */
.output p:nth-child(4n + 1) { z-index: 1; }

/* Thin and quick to run, so it scallops in shallow, even waves. The drips are a
   pseudo-element, which keeps the type above them perfectly crisp. */
.output p:nth-child(4n + 1)::after {
  content: "";
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  height: 0.3rem;
  background-image:
    radial-gradient(ellipse 0.55rem 0.3rem at 50% 0, var(--layer-besciamella) 98%, transparent 100%);
  background-size: 0.95rem 100%;
  background-repeat: repeat-x;
  /* The drips overhang the next paragraph, so let clicks and selections of its
     first line pass straight through. */
  pointer-events: none;
}

/* Nothing below the bottom layer to run onto, and a drip there would only be
   sliced flat by the pan's clipped corner. */
.output p:last-child::after { content: none; }

/* Besciamella on top: it opens the pan and every repeat below it. */
.output p:nth-child(4n + 1) { background: var(--layer-besciamella); }
.output p:nth-child(4n + 2) { background: var(--layer-pasta); }
.output p:nth-child(4n + 3) { background: var(--layer-ragu); }
.output p:nth-child(4n)     { background: var(--layer-cheese); }

.output pre {
  margin: 0;
  padding: 1rem;
  overflow-x: auto;
  font: 0.85rem/1.6 ui-monospace, SFMono-Regular, Menlo, monospace;
  white-space: pre-wrap;
  word-break: break-word;
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: var(--radius);
}

.api {
  margin-top: 3rem;
  padding: 1rem 1.25rem;
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  font-family: system-ui, -apple-system, sans-serif;
  font-size: 0.9rem;
}

.api summary {
  font-family: var(--display);
  font-size: 1.5rem;
  font-weight: 400;
  cursor: pointer;
  color: var(--sauce);
}

.api pre {
  padding: 0.85rem;
  overflow-x: auto;
  font: 0.8rem/1.6 ui-monospace, SFMono-Regular, Menlo, monospace;
  background: var(--bg);
  border: 1px solid var(--line);
  border-radius: 6px;
}

.api-curl-bar {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  margin: 1.25rem 0 0.5rem;
}

.api-curl-bar span { flex: 1; color: var(--muted); }

/* curl lines get long once every option is on, so wrap instead of scrolling. */
.api pre code { white-space: pre-wrap; overflow-wrap: anywhere; }

.muted { color: var(--muted); }

/* About panel: same card as the API block, but body copy in the reading serif
   so it stays part of the page rather than part of the tooling. */
.about {
  margin-top: 1.5rem;
  padding: 1.25rem 1.5rem 1.5rem;
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: var(--radius);
}

.about h2 {
  margin: 0 0 0.5rem;
  font-family: var(--display);
  font-size: 1.9rem;
  font-weight: 400;
  line-height: 1.2;
  color: var(--sauce);
}

.about p { margin: 0 0 0.9rem; }
.about p:last-child { margin-bottom: 0; }

/* The one word the whole section is really about, pulled out like a quote. */
.about-prego {
  padding-left: 0.9rem;
  border-left: 3px solid var(--cheese);
  font-style: italic;
}

.about-prego strong {
  font-style: normal;
  color: var(--sauce);
}

.site-footer {
  max-width: 46rem;
  margin: 3rem auto 0;
  padding-top: 1.5rem;
  border-top: 1px solid var(--line);
  font: 0.82rem system-ui, -apple-system, sans-serif;
  color: var(--muted);
  text-align: center;
}

.site-footer .source {
  margin: 0.6rem 0 0;
}

.site-footer .source a {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
}

.gh-mark { flex: none; }

.site-footer .credit {
  margin: 0.4rem 0 0;
  font-size: 0.78rem;
}