/* Gardens of AI. Light, warm, quiet. One green, one terracotta, used sparingly. */
:root {
  --paper: #fbf9f4;
  --card: #ffffff;
  --ink: #33372f;
  --soft: #6f7569;
  --line: #e7e3d8;
  --leaf: #5f7d5a;
  --leaf-wash: #eef3e8;
  --clay: #c0764f;
  --clay-wash: #fbefe7;
  --serif: "Iowan Old Style", "Palatino Linotype", Palatino, "Book Antiqua", Georgia, serif;
  --sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Inter, Roboto, "Helvetica Neue", sans-serif;
  --mono: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
}
* { box-sizing: border-box; }
html { background: var(--paper); }
body {
  margin: 0; color: var(--ink); font: 18px/1.7 var(--sans);
  background:
    radial-gradient(900px 400px at 100% -10%, var(--leaf-wash), transparent 70%),
    radial-gradient(700px 300px at -10% 0%, var(--clay-wash), transparent 70%);
  background-repeat: no-repeat;
  -webkit-font-smoothing: antialiased;
}
main, header.site, footer.site { max-width: 42rem; margin: 0 auto; padding: 0 1.25rem; }
a { color: var(--leaf); text-decoration-color: color-mix(in srgb, var(--leaf) 35%, transparent); text-underline-offset: 3px; }
a:hover { color: var(--clay); text-decoration-color: currentColor; }

header.site { padding-top: 2rem; padding-bottom: 1rem; display: flex; justify-content: space-between; align-items: center; }
header.site nav a { color: var(--soft); text-decoration: none; font-size: .95rem; }
header.site nav a:hover { color: var(--clay); }
.brand { display: inline-flex; gap: .5rem; align-items: center; font: 600 1rem var(--serif); color: var(--ink); text-decoration: none; letter-spacing: .01em; }
footer.site { margin-top: 5rem; padding-bottom: 3rem; color: var(--soft); font-size: .85rem; border-top: 1px solid var(--line); padding-top: 1.5rem; }

h1, h2, h3, h4 { font-family: var(--serif); font-weight: 600; line-height: 1.25; letter-spacing: -.01em; }
.accent { color: var(--clay); font-style: italic; }

.intro { padding: 3rem 0 2rem; }
.intro h1 { font-size: clamp(2.4rem, 6vw, 3.4rem); margin: 0 0 .75rem; }
.intro p { color: var(--soft); font-size: 1.1rem; max-width: 32rem; margin: 0; }

.card { padding: 1.5rem 0; border-top: 1px solid var(--line); }
.card h2 { font-size: 1.5rem; margin: .2rem 0 .4rem; }
.card h2 a { color: var(--ink); text-decoration: none; background: linear-gradient(var(--clay-wash), var(--clay-wash)) 0 85%/0 40% no-repeat; transition: background-size .3s; }
.card h2 a:hover { background-size: 100% 40%; color: var(--ink); }
.card p { margin: 0; color: var(--soft); }
.meta { font-size: .8rem; text-transform: uppercase; letter-spacing: .08em; color: var(--soft); margin: 0; }

.post header { padding: 2.5rem 0 1rem; }
.post h1 { font-size: clamp(2rem, 5vw, 2.8rem); margin: .4rem 0 .8rem; }
.tag { display: inline-block; font-size: .75rem; padding: .1rem .6rem; margin: 0 .3rem .3rem 0; border-radius: 99px; background: var(--leaf-wash); color: var(--leaf); }
.draft { display: inline-block; font-size: .75rem; padding: .1rem .6rem; border-radius: 99px; background: var(--clay-wash); color: var(--clay); margin: 0 0 .5rem; }

.prose h2 { font-size: 1.6rem; margin: 2.8rem 0 .6rem; }
.prose h2::before { content: ""; display: block; width: 2rem; height: 3px; border-radius: 2px; background: var(--clay); margin-bottom: .9rem; opacity: .7; }
.prose h3 { font-size: 1.2rem; margin: 2rem 0 .4rem; }
.prose p, .prose li { max-width: 38rem; }
.prose ul, .prose ol { padding-left: 1.3rem; }
.prose li { margin: .3rem 0; }
.prose li::marker { color: var(--leaf); }
.prose strong { font-weight: 600; }
.prose hr { border: 0; text-align: center; margin: 3rem 0; }
.prose hr::after { content: "· · ·"; color: var(--clay); letter-spacing: .6em; }
.prose blockquote { margin: 1.5rem 0; padding: .2rem 1.2rem; border-left: 3px solid var(--leaf); color: var(--soft); font-family: var(--serif); font-size: 1.1rem; font-style: italic; }
.prose img { max-width: 100%; border-radius: 10px; }

code { font: .85em var(--mono); background: var(--leaf-wash); padding: .1em .35em; border-radius: 4px; }
pre { background: var(--card); border: 1px solid var(--line); border-radius: 10px; padding: 1rem 1.2rem; overflow-x: auto; font-size: .85rem; line-height: 1.55; }
pre code { background: none; padding: 0; }

.table { overflow-x: auto; margin: 1.5rem 0; border: 1px solid var(--line); border-radius: 10px; background: var(--card); }
table { border-collapse: collapse; width: 100%; font-size: .9rem; }
th, td { text-align: left; padding: .55rem .9rem; border-bottom: 1px solid var(--line); }
th { font-weight: 600; color: var(--soft); font-size: .78rem; text-transform: uppercase; letter-spacing: .06em; }
tr:last-child td { border-bottom: 0; }

.callout { margin: 1.8rem 0; padding: 1rem 1.3rem; border-radius: 10px; background: var(--leaf-wash); }
.callout.clay { background: var(--clay-wash); }
.callout p { margin: .4rem 0; }
.callout-title { font-family: var(--serif); font-weight: 600; color: var(--leaf); }
.callout.clay .callout-title { color: var(--clay); }

.back { margin-top: 3rem; }
::selection { background: var(--clay-wash); }

/* --- Home page tree ------------------------------------------------------------------------- */
main:has(.hero) { max-width: 64rem; }
main:has(.hero) .posts { max-width: 42rem; margin: 0 auto; }
.hero { text-align: center; padding-top: 1.5rem; }
.hero-text { max-width: 34rem; margin: 0 auto; position: relative; z-index: 2; }
.hero h1 { font-size: clamp(2.6rem, 7vw, 4.2rem); margin: .2rem 0 .6rem; letter-spacing: -.02em; }
.hero-text p { color: var(--soft); margin: 0; }
.eyebrow { font-size: .78rem; text-transform: uppercase; letter-spacing: .14em; color: var(--leaf) !important; }
.section-title { font-size: .8rem; font-family: var(--sans); text-transform: uppercase; letter-spacing: .14em; color: var(--soft); font-weight: 600; text-align: left; }

.tree { position: relative; margin: 1.5rem auto 2.5rem; max-width: 56rem; }
.tree-svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }

.branches path { stroke-dasharray: 1; stroke-dashoffset: 1; animation: draw 1.1s cubic-bezier(.45, .05, .35, 1) forwards; animation-delay: calc(var(--l) * .28s); }
@keyframes draw { to { stroke-dashoffset: 0; } }

.leaves ellipse { transform-box: fill-box; transform-origin: center; opacity: 0; animation: unfurl .7s ease-out forwards; animation-delay: calc(var(--l) * .28s + .4s); }
@keyframes unfurl { from { opacity: 0; scale: .2; } to { opacity: .92; scale: 1; } }
.leaf.t0 { fill: #9db58f; } .leaf.t1 { fill: #b9cca8; } .leaf.t2 { fill: #7f9f75; }
.leaf.t3 { fill: #d3e0c6; } .leaf.t4 { fill: #a9c29a; }
.blossom { fill: #f4d6c4; }

.sway, .blooms { transform-origin: 50% 95%; animation: sway 9s ease-in-out infinite alternate; animation-delay: 3s; }
.sway { transform-box: view-box; }
@keyframes sway { from { rotate: -.5deg; } to { rotate: .6deg; } }

.shadow { fill: #e4dfd2; opacity: .7; }
.grass path { stroke: #a9c29a; stroke-width: 2; fill: none; stroke-linecap: round; }
.pollen { fill: #e8b9a0; opacity: 0; animation: drift 14s linear infinite; animation-delay: calc(var(--p) * -0.8s + 3s); }
@keyframes drift { 0% { opacity: 0; translate: 0 0; } 20% { opacity: .7; } 100% { opacity: 0; translate: 40px -140px; } }

/* A bloom: a bud on the branch tip, and a label that opens on hover. */
.bloom { position: absolute; transform: translate(-50%, -50%); text-decoration: none; color: var(--ink); z-index: 3;
  opacity: 0; animation: bloom-in .8s ease-out forwards; animation-delay: calc(2.6s + var(--i) * .25s); }
@keyframes bloom-in { from { opacity: 0; scale: .4; } to { opacity: 1; scale: 1; } }
.bud { display: block; width: 26px; height: 26px; border-radius: 50%; position: relative;
  background: radial-gradient(circle at 35% 35%, #fff6ef, #e8a988 55%, var(--clay)); box-shadow: 0 0 0 5px rgb(251 239 231 / .8), 0 6px 18px rgb(192 118 79 / .35); transition: scale .3s; }
.bud::after { content: ""; position: absolute; inset: -5px; border-radius: 50%; border: 2px solid var(--clay); opacity: 0; animation: ripple 3.2s ease-out infinite; animation-delay: calc(3.5s + var(--i) * .4s); }
@keyframes ripple { 0% { opacity: .55; scale: 1; } 100% { opacity: 0; scale: 2.4; } }
.label { position: absolute; top: 50%; translate: 0 -50%; width: max-content; max-width: 15rem; text-align: left;
  padding: .55rem .9rem; border-radius: 12px; background: rgb(255 255 255 / .88); backdrop-filter: blur(6px);
  border: 1px solid var(--line); box-shadow: 0 8px 28px rgb(60 70 50 / .1); transition: opacity .3s, scale .3s, box-shadow .3s;
  opacity: 0; scale: .92; pointer-events: none; }
.bloom:hover .label, .bloom:focus-visible .label { opacity: 1; scale: 1; pointer-events: auto; }
.bloom.right .label { left: calc(100% + 14px); }
.bloom.left .label { right: calc(100% + 14px); }
.label-date { display: block; font-size: .68rem; text-transform: uppercase; letter-spacing: .1em; color: var(--soft); }
.label-title { display: block; font: 600 1rem/1.3 var(--serif); }
.bloom:hover .bud, .bloom:focus-visible .bud { scale: 1.2; }
.bloom:hover .label, .bloom:focus-visible .label { box-shadow: 0 10px 34px rgb(192 118 79 / .22); border-color: #f0d4c3; }
.bloom:hover .label-title { color: var(--clay); }

@media (max-width: 640px) {
  .label { display: none; }   /* the list below carries the titles on small screens */
  .bud { width: 20px; height: 20px; }
}
@media (prefers-reduced-motion: reduce) {
  .branches path, .leaves ellipse, .bloom, .sway, .blooms, .pollen, .bud::after { animation: none; stroke-dashoffset: 0; opacity: 1; }
  .pollen { opacity: 0; }
}

figure { margin: 2rem 0; }
figure img { display: block; width: 100%; height: auto; border-radius: 14px; border: 1px solid var(--line); }
figcaption { margin-top: .6rem; font: italic .9rem/1.5 var(--serif); color: var(--soft); text-align: center; }
main:has(.post) { max-width: 46rem; }
.comments { margin-top: 4rem; padding-top: 2rem; border-top: 1px solid var(--line); }
.comments h2 { font-size: 1.4rem; margin: 0 0 .3rem; }
.comments-note { color: var(--soft); font-size: .9rem; margin: 0 0 1.5rem; }