/* flovelite — minimal, zero-JS blog theme for flove. One stylesheet, system
   fonts, light + dark. Palette echoes the flove sprout gradient. */
:root{
  --bg:#fdfbf7; --ink:#1a1820; --soft:#6b6577; --line:rgba(26,24,32,.1);
  --accent:#ff5a6e;
  --grad:linear-gradient(90deg,#ff3344,#ff8a3a,#ffd633);
  --measure:66ch;
}
@media (prefers-color-scheme:dark){
  :root{ --bg:#141218; --ink:#ece9f0; --soft:#9d97a8; --line:rgba(255,255,255,.12); --accent:#ff8aae; }
}
*{ box-sizing:border-box; }
html{ font-size:17px; -webkit-text-size-adjust:100%; }
body{
  margin:0; background:var(--bg); color:var(--ink);
  font-family:ui-sans-serif,system-ui,-apple-system,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  line-height:1.65; text-rendering:optimizeLegibility;
}
a{ color:inherit; text-decoration:none; }
a:hover{ text-decoration:underline; text-decoration-color:var(--accent); text-underline-offset:3px; }
.wrap{ max-width:var(--measure); margin:0 auto; padding:0 1.3rem; }

.site-head{
  max-width:var(--measure); margin:0 auto; padding:1.6rem 1.3rem .9rem;
  display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:.6rem;
}

/* Brand = logo + "flove blog", doubling as a click-to-open CSS-only menu (0-JS). */
.brand-menu{ position:relative; }
.brand{
  display:inline-flex; align-items:center; gap:.42rem;
  font-weight:700; font-size:1.15rem; letter-spacing:.01em; cursor:pointer;
}
.brand::-webkit-details-marker{ display:none; }   /* Safari */
.brand{ list-style:none; }                         /* strip the ▸ disclosure triangle */
.brand::after{
  content:"▾"; color:var(--soft); font-size:.7em; font-weight:600;
  margin-left:.1rem; transition:transform .18s ease;
}
.brand-menu[open] .brand::after{ transform:rotate(180deg); }
.brand-mark{ display:inline-flex; }
.brand-mark .logo{ display:block; }
.brand-sub{ color:var(--soft); font-weight:500; }

.brand-drop{
  position:absolute; top:calc(100% + .55rem); left:0; z-index:30;
  min-width:11.5rem; display:flex; flex-direction:column; gap:.1rem;
  padding:.4rem; background:var(--bg);
  border:1px solid var(--line); border-radius:14px;
  box-shadow:0 10px 34px rgba(0,0,0,.14);
}
.brand-drop a{
  padding:.5rem .7rem; border-radius:9px;
  font-size:.95rem; font-weight:500; color:var(--ink);
}
.brand-drop a:hover{ background:var(--line); text-decoration:none; }
.post-meta .cat{ font-weight:600; color:var(--ink); }
.post-meta .cat:hover{ text-decoration:underline; }

/* Categories as a tab strip above the post list on the home. */
.home-cats{
  display:flex; flex-wrap:wrap; gap:.15rem; margin:1.6rem 0 0;
  border-bottom:1.5px solid var(--line);
}
.home-cats a{
  font-size:.9rem; font-weight:600; color:var(--soft);
  padding:.5rem .95rem; margin-bottom:-1.5px;
  border:1.5px solid transparent; border-bottom:none;
  border-radius:11px 11px 0 0;
  transition:color .18s ease, background .18s ease, border-color .18s ease;
}
.home-cats a:hover{
  text-decoration:none; color:var(--ink);
  border-color:var(--line); border-bottom-color:transparent;
  background:color-mix(in srgb, var(--accent) 8%, transparent);
}

.site-nav a{ color:var(--soft); font-size:.92rem; }

/* Slogan + intro are collapsed by default; the "About" menu link (→ #about)
   reveals them via :target — zero-JS. */
.intro{ display:none; }
.intro:target{
  display:block; scroll-margin-top:1rem;
  padding:1.1rem 0 1rem; margin-bottom:.4rem; border-bottom:1px solid var(--line);
  animation:intro-in .25s ease;
}
@keyframes intro-in{ from{ opacity:0; transform:translateY(-4px); } to{ opacity:1; transform:none; } }
.intro h1{ font-size:2rem; margin:.2rem 0 .1rem; line-height:1.15; }
/* Homepage heading is the tagline (the words "flove blog" live only in the header). */
.intro h1.tagline{
  font-size:1.9rem; font-style:italic; font-weight:600;
  color:var(--ink); margin:.2rem 0 1rem;
}
.tagline{ color:var(--soft); margin:.1rem 0 1rem; font-style:italic; }

.post-list{ list-style:none; margin:1.2rem 0 0; padding:0; }
.post-list li{ padding:1rem 0; border-top:1px solid var(--line); }
.post-link{ display:flex; align-items:baseline; justify-content:space-between; gap:1rem; }
.post-title{ font-weight:650; font-size:1.15rem; }
.post-list time{ color:var(--soft); font-size:.85rem; white-space:nowrap; font-variant-numeric:tabular-nums; }
.post-sum{ color:var(--soft); margin:.35rem 0 0; font-size:.95rem; }

.post h1{ font-size:2rem; line-height:1.2; margin:.6rem 0 .2rem; }
.post-meta{ color:var(--soft); font-size:.88rem; margin:0 0 1.4rem; }
.tag{ background:var(--line); border-radius:999px; padding:.06em .6em; font-size:.8rem; }
.post :is(h2,h3){ margin-top:2rem; line-height:1.25; }
.post p{ margin:1rem 0; }
.post img{ max-width:100%; height:auto; border-radius:12px; }
.post pre{ background:rgba(0,0,0,.05); padding:1rem; border-radius:10px; overflow-x:auto; font-size:.9rem; }
@media (prefers-color-scheme:dark){ .post pre{ background:rgba(255,255,255,.06); } }
.post code{ font-family:ui-monospace,SFMono-Regular,Menlo,monospace; font-size:.9em; }
.post blockquote{ margin:1.2rem 0; padding:.2rem 0 .2rem 1.1rem; border-left:3px solid; border-image:var(--grad) 1; color:var(--soft); }

.back{ margin:2.5rem 0 0; }
.site-foot{
  max-width:var(--measure); margin:3rem auto 2rem; padding:1.4rem 1.3rem 0;
  border-top:1px solid var(--line); color:var(--soft); font-size:.85rem; text-align:center;
}