/* olragon.css — a classless, drop-in stylesheet. Style standard HTML5 tags directly so it
   works on any semantic page (no classes required). Aesthetic: "a tended storybook garden" —
   warm manila paper, system serif for reading, a marker hand-font for accents, children's-
   drawing motifs (hand-drawn frames, wavy crayon underlines, squiggle rules), gentle motion.
   System fonts only. No deps, no build, no external requests. `:where()` keeps specificity 0
   so anything is trivial to override. */

:root {
  --paper: #f5eddc; --ink: #352a1e;
  --green: #5f8f4e; --sun: #e0a23a; --berry: #d05c48; --sky: #5a83ad;
  --accent: var(--green);
  --bg: var(--paper); --fg: var(--ink);
  --edge: color-mix(in srgb, var(--fg) 14%, transparent);
  --faint: color-mix(in srgb, var(--fg) 6%, transparent);
  --serif: "Iowan Old Style", "Palatino Linotype", Palatino, "Book Antiqua", Georgia, serif;
  --hand: "Marker Felt", "Chalkboard SE", "Comic Sans MS", "Comic Sans", cursive;
  --mono: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  --max: 44rem; --read: 36rem;
  --wobble: 230px 16px 200px 18px / 16px 190px 22px 230px;
  color-scheme: light dark;
}
@media (prefers-color-scheme: dark) { :root { --paper: #221c14; --ink: #efe4cf; } }

*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; }
html { scroll-behavior: smooth; }
:where(body) {
  background: var(--bg); color: var(--fg); font-family: var(--serif);
  font-size: 18px; line-height: 1.7; -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility; min-height: 100vh; position: relative;
}
/* faint paper grain */
body::before {
  content: ""; position: fixed; inset: 0; z-index: 0; pointer-events: none; opacity: 0.5;
  mix-blend-mode: multiply;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.035'/%3E%3C/svg%3E");
}
@media (prefers-color-scheme: dark) { body::before { mix-blend-mode: screen; opacity: 0.55; } }

/* layout: header / main / footer are direct children of body */
:where(body > header) {
  position: sticky; top: 0; z-index: 50; display: flex; align-items: baseline;
  justify-content: space-between; gap: 1rem; flex-wrap: wrap;
  max-width: var(--max); margin: 0 auto; padding: 0.8rem 1.5rem;
  background: color-mix(in srgb, var(--bg) 80%, transparent);
  backdrop-filter: saturate(140%) blur(8px); -webkit-backdrop-filter: saturate(140%) blur(8px);
  border-bottom: 1px dashed var(--edge);
}
/* brand = the header's own link; nav links live in <nav> */
:where(body > header > a) { font-family: var(--hand); font-size: 1.55rem; color: var(--green); text-decoration: none; }
:where(body > header > a:hover) { color: var(--berry); }
:where(body > header nav) { display: flex; align-items: baseline; gap: 1.15rem; font-family: var(--hand); font-size: 1.1rem; }
:where(body > header nav a) { text-decoration: none; opacity: 0.8; }
:where(body > header nav a:hover) { opacity: 1; color: var(--green); }

:where(main) { display: block; max-width: var(--max); margin: 0 auto; padding: 3rem 1.5rem 1rem; }
:where(body > footer) { max-width: var(--max); margin: 0 auto; padding: 3rem 1.5rem; font-family: var(--hand); font-size: 1.05rem; opacity: 0.55; }

/* headings */
:where(h1) { font-family: var(--serif); font-weight: 600; font-size: clamp(2rem, 6vw, 2.9rem); line-height: 1.08; letter-spacing: -0.01em; }
:where(h2) { font-family: var(--serif); font-weight: 600; font-size: 1.55rem; line-height: 1.25; margin-top: 2.4rem; }
:where(h2)::before { content: "🌿 "; }
:where(h3) { font-weight: 600; font-size: 1.2rem; margin-top: 1.9rem; }
:where(main > section + section, main > * + h2) { margin-top: 2rem; }

/* text + reading measure */
:where(main p, main ul, main ol, main blockquote, main figure, main pre, main table) { max-width: var(--read); }
:where(p + p, h1 + p, h2 + p, h3 + p, p + ul, p + ol, ul + p, ol + p, p + blockquote, blockquote + p) { margin-top: 1.15rem; }
:where(p:first-child) { margin-top: 0; }

/* links — wavy crayon underline */
:where(a) { color: var(--green); text-underline-offset: 3px; text-decoration: underline; text-decoration-style: wavy; text-decoration-color: color-mix(in srgb, var(--green) 45%, transparent); transition: color 0.15s, text-decoration-color 0.15s; }
:where(a:hover) { color: var(--berry); text-decoration-color: var(--berry); }

/* lists with sprouting markers */
:where(main ul) { list-style: none; padding-left: 1.5rem; }
:where(main ul > li) { margin-top: 0.5rem; }
:where(main ul > li)::before { content: "🌱"; margin-left: -1.5rem; margin-right: 0.55rem; font-size: 0.8em; }
:where(main ol) { padding-left: 1.6rem; }
:where(main ol > li) { margin-top: 0.5rem; }

/* quotes, code, rules */
:where(blockquote) { border-left: 3px solid color-mix(in srgb, var(--green) 50%, transparent); padding-left: 1.1rem; font-style: italic; opacity: 0.85; }
:where(blockquote > * + *) { margin-top: 0.6rem; }
:where(code) { font-family: var(--mono); font-size: 0.85em; background: var(--faint); padding: 0.1em 0.38em; border-radius: 5px; }
:where(pre) { background: var(--faint); padding: 1rem; border-radius: 0.6rem; overflow-x: auto; }
:where(pre code) { background: none; padding: 0; }
:where(small) { font-family: var(--mono); font-size: 0.7rem; text-transform: uppercase; letter-spacing: 0.06em; opacity: 0.55; }
:where(hr) { border: 0; height: 14px; margin: 2.4rem 0; background: center/120px 14px repeat-x url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='14'%3E%3Cpath d='M2 7 q 10 -7 20 0 t 20 0 t 20 0 t 20 0 t 20 0' fill='none' stroke='%235f8f4e' stroke-width='2' stroke-linecap='round'/%3E%3C/svg%3E"); opacity: 0.7; }

/* images — taped-in, hand-drawn frame */
:where(main img) { max-width: 100%; height: auto; display: block; margin: 1.5rem 0; border: 2px solid var(--edge); border-radius: var(--wobble); }

/* article (a note) */
:where(article > header) { margin-bottom: 2rem; }
:where(article > header > p) { margin-top: 0.9rem; display: flex; flex-wrap: wrap; gap: 0.7rem; }
:where(article > p:first-of-type)::first-letter { font-family: var(--hand); float: left; font-size: 3.2rem; line-height: 0.7; padding: 0.12em 0.14em 0 0; color: var(--berry); }

/* aside = gentle callout / draft banner */
:where(aside) {
  padding: 0.85rem 1.1rem; font-size: 0.95rem; max-width: var(--read);
  background: color-mix(in srgb, var(--sun) 16%, transparent);
  border: 1.5px solid color-mix(in srgb, var(--sun) 55%, transparent); border-radius: var(--wobble);
}

/* figure (used for gallery photos) */
:where(figure) { margin: 0; }
:where(figcaption) { display: flex; flex-direction: column; gap: 0.5rem; margin-top: 0.7rem; }
/* credit line (model · traced-by) */
figcaption cite { font-style: normal; font-family: var(--mono); font-size: 0.68rem; opacity: 0.85; }
/* my take — a handwritten aside (inherits the green left-rule from blockquote) */
figcaption blockquote { font-family: var(--hand); font-style: normal; font-size: 0.92rem; line-height: 1.4; opacity: 0.85; }
/* the prompt — dimmed, small; one click selects the whole thing (to copy) */
figcaption p { margin: 0; max-width: none; font-size: 0.74rem; line-height: 1.45; opacity: 0.5; cursor: pointer; user-select: all; -webkit-user-select: all; }
figcaption p:hover { opacity: 0.7; }

/* gentle grow-in motion */
@keyframes grow-in { from { opacity: 0; transform: translateY(10px) scale(0.99); } to { opacity: 1; transform: none; } }
:where(main > *) { animation: grow-in 0.55s cubic-bezier(0.2, 0.7, 0.2, 1) both; }
:where(main > *:nth-child(2)) { animation-delay: 0.08s; }
:where(main > *:nth-child(3)) { animation-delay: 0.16s; }
:where(main > *:nth-child(n+4)) { animation-delay: 0.24s; }
@media (prefers-reduced-motion: reduce) { *, body::before { animation: none !important; } :where(html) { scroll-behavior: auto; } }

/* ---- the few opt-in pieces (custom elements + a grid helper) ---- */

/* hero scene: the dragon grounded on a soft grassy knoll with a warm sun glow behind */
.scene { position: relative; display: inline-block; margin: 0.5rem 0 0.5rem; }
.scene::before { /* sun glow */
  content: ""; position: absolute; z-index: 0; left: 50%; top: 34%; width: 72%; aspect-ratio: 1;
  transform: translate(-50%, -50%); border-radius: 50%;
  background: radial-gradient(circle, color-mix(in srgb, var(--sun) 32%, transparent), transparent 68%);
}
.scene::after { /* grassy knoll the dragon sits on */
  content: ""; position: absolute; z-index: 0; left: 50%; bottom: 12px; transform: translateX(-50%);
  width: 80%; height: 24px; border-radius: 50%; background: color-mix(in srgb, var(--green) 34%, transparent); filter: blur(2.5px);
}
.scene .dragon { position: relative; z-index: 1; margin: 0; }

/* the garden dragon — hero mascot (transparent vectorized SVG), a calm breath */
.dragon { display: block; width: clamp(140px, 34vw, 220px); height: auto; margin: 0; border: 0; border-radius: 0; transform-origin: 55% 88%; animation: dragon-breathe 6s ease-in-out infinite; }
@keyframes dragon-breathe { 0%, 100% { transform: scale(1) rotate(0); } 50% { transform: scale(1.025) rotate(-0.6deg); } }
@media (prefers-reduced-motion: reduce) { .dragon { animation: none !important; } }

/* big friendly hero heading: a top-level <h1> that is the first thing in <main> */
:where(main > h1:first-child, main > section:first-child > h1) { font-family: var(--hand); font-weight: 400; font-size: clamp(2.6rem, 9vw, 4.2rem); line-height: 0.95; color: var(--green); }

/* .anim-grass — reusable. Keeps the site's original wavy crayon underline and just animates
   *over* it: on :hover a gentle ripple runs through the wave; the current page ([aria-current])
   sways continuously, like wind through grass. No grass blades — the underline itself is the line. */
.anim-grass {
  text-decoration-line: none; text-decoration-style: wavy;
  text-decoration-color: var(--green); text-underline-offset: 3px;
}
.anim-grass:hover, .anim-grass:focus-visible { text-decoration-line: underline; animation: wind 1.1s ease-in-out; }
.anim-grass[aria-current] { text-decoration-line: underline; animation: wind 3s ease-in-out infinite; }
@keyframes wind { 0%, 100% { text-underline-offset: 3px; } 50% { text-underline-offset: 6px; } }

/* language switcher (custom element) */
lang-switcher { display: inline-flex; }
.lang-switch { display: inline-flex; align-items: center; gap: 0.35rem; text-decoration: none; font-family: var(--mono); font-size: 0.72rem; opacity: 0.7; padding: 0.12rem 0.55rem; border: 1.5px solid var(--edge); border-radius: 140px 18px 120px 22px / 18px 110px 22px 130px; transition: opacity 0.15s, border-color 0.15s; white-space: nowrap; }
.lang-switch:hover { opacity: 1; border-color: var(--green); }
.lang-label { display: inline-block; white-space: pre; }

/* gallery: a wall of taped sketches — pure semantic tags (a <section> of <figure>s),
   no gallery class. The grid is keyed off the section that contains figures. */
main section:has(> figure) { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 19rem), 1fr)); gap: 2.2rem 1.7rem; margin-top: 2.5rem; max-width: none; }
main figure {
  position: relative; background: color-mix(in srgb, var(--fg) 4%, var(--bg));
  border: 1px solid var(--edge); border-radius: 6px; padding: 0.7rem 0.7rem 0.9rem;
  box-shadow: 0 9px 24px -14px color-mix(in srgb, var(--ink) 55%, transparent);
  transition: transform 0.3s cubic-bezier(0.2, 0.8, 0.2, 1), box-shadow 0.3s;
}
main section:has(> figure) > figure:nth-child(odd) { transform: rotate(-1.4deg); }
main section:has(> figure) > figure:nth-child(even) { transform: rotate(1.5deg); }
main figure::before { /* washi tape */
  content: ""; position: absolute; top: -9px; left: 50%; width: 72px; height: 22px;
  transform: translateX(-50%) rotate(-2.5deg); border-radius: 2px;
  background: color-mix(in srgb, var(--sun) 38%, #fff); opacity: 0.5; box-shadow: 0 1px 2px rgba(0, 0, 0, 0.08);
}
main figure:hover { transform: rotate(0) translateY(-5px); box-shadow: 0 18px 34px -14px color-mix(in srgb, var(--ink) 60%, transparent); z-index: 2; }
main figure img { display: block; width: 100%; margin: 0; aspect-ratio: 1/1; object-fit: cover; border: 1px solid var(--edge); border-radius: 3px; }

/* counter + bar web components */
.counter { display: inline-flex; align-items: center; gap: 0.5rem; font-family: var(--mono); border: 1.5px solid var(--edge); border-radius: 120px 14px 100px 16px / 14px 100px 16px 120px; padding: 0.2rem 0.45rem; }
.counter button { border: 0; background: none; color: inherit; font-size: 1.1rem; cursor: pointer; width: 1.7rem; height: 1.7rem; border-radius: 999px; }
.counter button:hover { background: color-mix(in srgb, var(--green) 22%, transparent); }
.counter-val { min-width: 1.6rem; text-align: center; }
.bars { margin: 1.6rem 0; }
x-bar { display: flex; align-items: center; gap: 0.75rem; margin: 0.35rem 0; font-size: 0.9rem; }
.bar-label { width: 10rem; flex-shrink: 0; text-align: right; opacity: 0.7; }
.bar-track { flex: 1; background: var(--faint); border-radius: 6px; height: 1.3rem; overflow: hidden; }
.bar-fill { display: block; height: 100%; border-radius: 6px; }
.tone-emerald, .tone-green { background: var(--green); } .tone-amber, .tone-sun { background: var(--sun); } .tone-rose, .tone-berry { background: var(--berry); } .tone-sky { background: var(--sky); }
.bar-val { width: 4rem; font-variant-numeric: tabular-nums; }
.bars-note { font-size: 0.78rem; opacity: 0.6; margin-top: 0.5rem; }