/* flovelite — minimal, zero-JS blog theme for flove. One stylesheet.
   Palette echoes keys-basic: cream paper, ink navy, gold/rose. Light only. */
:root{
  --bg:#f6efdc; --panel:#fbf7ec; --ink:#0c0b18; --soft:#6f6596;
  --line:#d9cba5;
  --gold:#c39a45; --gold-hi:#eccf83; --gold-deep:#8a6a1c; --rose:#df8fa2;
  --accent:var(--gold-deep);
  --grad:linear-gradient(90deg,#c39a45,#eccf83,#df8fa2);
  --serif:'Spectral','Iowan Old Style',Georgia,serif;
  --deco:'Cinzel','Cormorant Garamond',Georgia,serif;
  --measure:66ch;
}
*{ box-sizing:border-box; }
html{ font-size:17px; -webkit-text-size-adjust:100%; }
body{
  margin:0; background:
    radial-gradient(900px 520px at 50% -8%, rgba(195,154,69,.14), transparent 60%),
    radial-gradient(700px 600px at 110% 110%, rgba(223,143,162,.08), transparent 55%),
    var(--bg);
  color:var(--ink);
  font-family:var(--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:700 1.15rem/1 var(--deco); letter-spacing:.02em; 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(--panel);
  border:1px solid var(--line); border-radius:14px;
  box-shadow:0 10px 34px rgba(12,11,24,.14);
}
.brand-drop a{
  padding:.5rem .7rem; border-radius:9px;
  font-size:.95rem; font-weight:500; color:var(--ink);
}
.brand-drop a:hover{ background:rgba(195,154,69,.14); 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:rgba(195,154,69,.1);
}

/* Feed link + empty state on category pages. */
.cat-feed{
  display:inline-block; margin-top:.6rem; font-size:.82rem; font-weight:600;
  color:var(--soft); border:1px solid var(--line); border-radius:999px;
  padding:.32rem .8rem; transition:color .18s ease, border-color .18s ease;
}
.cat-feed:hover{ text-decoration:none; color:var(--ink); border-color:var(--accent); }
.post-list .empty{ color:var(--soft); font-style:italic; }

.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:600 2rem/1.15 var(--deco); margin:.2rem 0 .1rem; }
/* 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:600 2rem/1.2 var(--deco); margin:.6rem 0 .2rem; }
.post-meta{ color:var(--soft); font-size:.88rem; margin:0 0 1.4rem; }
.tag{ background:rgba(195,154,69,.14); border-radius:999px; padding:.06em .6em; font-size:.8rem; }
.post :is(h2,h3){ font-family:var(--deco); 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(195,154,69,.14); padding:1rem; border-radius:10px; overflow-x:auto; font-size:.9rem; }
.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;
}