/* ============================================
   tinybits, shared design system
   ============================================ */

:root{
  --paper:#F5EFE3;
  --paper-deep:#ECE2CC;
  --ink:#1B2B33;
  --ink-soft:#5C6B70;
  --tide:#1C7A88;
  --line:#E1D7C0;

  --tag-food:#5F7755;
  --tag-movement:#2E8C99;
  --tag-aging:#C2954B;
  --tag-mind:#6B95A3;
  --tag-progress:#BD6A42;
  --tag-career:#1F4E5F;
  --tag-life:#8C6F4E;
}

*{box-sizing:border-box;}
@media (prefers-reduced-motion: reduce){
  *{transition:none !important; animation:none !important;}
}

body{
  margin:0;
  background:var(--paper);
  color:var(--ink);
  font-family:'Inter',-apple-system,sans-serif;
  -webkit-font-smoothing:antialiased;
  line-height:1.6;
}

a{color:var(--ink);text-decoration:none;}
a:focus-visible, button:focus-visible{outline:2px solid var(--tide);outline-offset:2px;}

.wrap{max-width:680px;margin:0 auto;padding:48px 22px 90px;}

/* ---------- Header ---------- */
.site-header{margin-bottom:36px;}
.site-name{
  font-family:'Newsreader',serif;
  font-size:40px;
  font-weight:500;
  letter-spacing:-0.01em;
  color:var(--ink);
  margin:0;
  text-decoration:none;
  display:inline-block;
}
.site-tagline{
  color:var(--ink-soft);
  font-size:15px;
  margin:6px 0 0;
}

/* ---------- Dot tally, the signature element ---------- */
.tally{
  display:flex;
  align-items:center;
  gap:7px;
  margin:22px 0 4px;
  flex-wrap:wrap;
}
.tally-dot{
  width:9px;height:9px;border-radius:50%;
  background:transparent;
  border:1.5px solid var(--line);
  flex:none;
}
.tally-dot.filled{
  background:var(--tide);
  border-color:var(--tide);
}
.tally-label{
  font-family:'IBM Plex Mono',monospace;
  font-size:11px;
  color:var(--ink-soft);
  margin-left:6px;
  letter-spacing:0.02em;
}

hr.divider{border:none;border-top:1px solid var(--line);margin:30px 0;}

.legend-row{
  display:flex;
  flex-wrap:wrap;
  gap:8px 16px;
  margin:24px 0 4px;
  padding-top:18px;
  border-top:1px solid var(--line);
}
.legend-row .tag{
  background:var(--paper-deep);
  padding:5px 10px;
  border-radius:999px;
}

/* ---------- Post tags ---------- */
.tag{
  display:inline-flex;
  align-items:center;
  gap:6px;
  font-family:'IBM Plex Mono',monospace;
  font-size:11px;
  letter-spacing:0.04em;
  text-transform:uppercase;
  color:var(--ink-soft);
}
.tag-dot{width:7px;height:7px;border-radius:50%;flex:none;}
.tag-food .tag-dot{background:var(--tag-food);}
.tag-movement .tag-dot{background:var(--tag-movement);}
.tag-aging .tag-dot{background:var(--tag-aging);}
.tag-mind .tag-dot{background:var(--tag-mind);}
.tag-progress .tag-dot{background:var(--tag-progress);}
.tag-career .tag-dot{background:var(--tag-career);}
.tag-life .tag-dot{background:var(--tag-life);}

/* ---------- Post card, homepage feed ---------- */
.post-card{
  padding:22px 0;
  border-bottom:1px solid var(--line);
}
.post-card:first-of-type{padding-top:6px;}
.post-meta{
  display:flex;align-items:center;gap:12px;margin-bottom:10px;
}
.post-date{
  font-family:'IBM Plex Mono',monospace;
  font-size:12px;
  color:var(--ink-soft);
}
.post-title{
  font-family:'Newsreader',serif;
  font-size:23px;
  font-weight:500;
  margin:0 0 8px;
}
.post-title a{display:block;}
.post-title a:hover{color:var(--tide);}
.post-excerpt{
  color:var(--ink-soft);
  font-size:15px;
  margin:0 0 10px;
}
.read-link{
  font-size:13px;
  font-weight:600;
  color:var(--tide);
  border-bottom:1px solid var(--tide);
  padding-bottom:1px;
}

/* ---------- Single post page ---------- */
.back-link{
  display:inline-block;
  font-family:'IBM Plex Mono',monospace;
  font-size:12px;
  color:var(--ink-soft);
  margin-bottom:28px;
}
.back-link:hover{color:var(--tide);}

article.post h1{
  font-family:'Newsreader',serif;
  font-size:32px;
  font-weight:500;
  line-height:1.2;
  margin:14px 0 18px;
}
article.post .post-meta{margin-bottom:22px;}
article.post p{
  font-size:16px;
  margin:0 0 18px;
  color:var(--ink);
}
article.post h2{
  font-family:'Newsreader',serif;
  font-size:21px;
  font-weight:500;
  margin:32px 0 14px;
}

/* ---------- Footer ---------- */
.site-footer{
  margin-top:50px;
  padding-top:20px;
  border-top:1px solid var(--line);
  font-size:12px;
  color:var(--ink-soft);
  font-family:'IBM Plex Mono',monospace;
}

@media (max-width:480px){
  .site-name{font-size:32px;}
  article.post h1{font-size:26px;}
}