/*
Theme Name: DT Microblog
Theme URI: https://dreamtyme.org/
Author: Abby (Dreamtyme)
Description: A Tumblr-style, single-column microblog theme for the Dreamtyme Petz Collective.
Version: 0.3 (cleaned)
Text Domain: dt-microblog
*/

/* Web fonts */
@import url('https://fonts.googleapis.com/css2?family=Chicle&family=Raleway:wght@400;500;600;700;800&display=swap');

/* ========================
   DESIGN TOKENS
   ======================== */
:root{
  --muted:#5f6c67;
  --paper:#f7f4ef;
  --card:#ffffff;
  --edge:rgba(0,0,0,.08);
  --radius:16px;

  --shadow:0 6px 18px rgba(0,0,0,.06);
  --shadow-soft:0 10px 22px rgba(0,0,0,.05);

  /* ink family (warm brown charcoal) */
  --ink:#4b3d33;
  --ink-soft:#7b6a5b;

  /* brand: neutral cocoa-brown */
  --brand:#6b5a4c;
  --brand-strong:#56493e;
  --brand-ink:#2e241d;
  --brand-chip:#f3ede7;
  --brand-chip-strong:#ebe1d9;

  --ring:#b88966; /* focus ring */
}

/* ========================
   BASE
   ======================== */
html,body{height:100%}

body{
  margin:0;
  color:var(--ink);
  font:16px/1.6 Raleway, system-ui, -apple-system, Segoe UI, Roboto, sans-serif;

  /* final background: lined paper + faint grain + warm gradient */
  background:
    repeating-linear-gradient(90deg, rgba(75,61,51,.01) 0 1px, transparent 1px 3px),
    repeating-linear-gradient(0deg,  rgba(75,61,51,.01) 0 1px, transparent 1px 3px),
    linear-gradient(to bottom, rgba(75,61,51,.04) 1px, transparent 1px) repeat-y,
    radial-gradient(60% 40% at 50% -10%, #eef5f2 0%, #faf8f4 60%, #f6f2ec 100%);
  background-size: 3px 3px, 3px 3px, 100% 28px, auto;
  background-attachment: fixed;
}

.container{max-width:820px; margin:0 auto; padding:24px 16px}
a{color:var(--brand); text-decoration:none}
a:hover{text-decoration:underline}

/* Accessible focus styles */
:where(a, button, .chip, .button):focus-visible{
  outline:3px solid var(--ring);
  outline-offset:2px;
  border-radius:10px;
}

/* ========================
   LAYOUT
   ======================== */
.site-tagline{margin:0 0 14px; color:var(--muted); font-size:14px}
.feed{display:grid; gap:16px}
.meta{display:flex; gap:8px; align-items:center; flex-wrap:wrap; color:var(--muted); font-size:13px; margin-bottom:8px}
.pagination{display:flex; justify-content:space-between; margin:14px 0 6px}

/* post card (consolidated) */
.post{
  background:var(--card);
  border:1px solid #d5c4b5;   /* soft light brown outline */
  border-radius:var(--radius);
  box-shadow:var(--shadow-soft);
  padding:16px 18px;
  margin:14px 0;
  font-size:14px;             /* match tagline size */
  transition: transform .25s ease, box-shadow .25s ease;
}
.post:hover{
  transform: translateY(-2px);
  box-shadow: 0 6px 14px rgba(0,0,0,.10);
}

.post-hd{
  display:flex; align-items:center;
  color:#5f6c67; font-weight:700;
  padding-bottom:.4rem; margin-bottom:.8rem;
  border-bottom:2px dotted rgba(90,130,110,.25); /* your 2px dotted */
}
.post-title{margin:.25rem 0 .5rem; font-weight:800; color:var(--ink)}
.post-body p{margin:.6rem 0}

/* content niceties */
.post-body img{max-width:100%; height:auto; border-radius:10px; display:block; margin:.5rem auto;}
.post-body figure{margin:.6rem 0}
.post-body figure figcaption{font-size:.875rem; color:var(--muted); margin-top:.25rem}
.post-body blockquote{
  margin:.75rem 0; padding:.75rem 1rem;
  background:#faf5f1; border-left:4px solid var(--brand-strong);
  color:var(--brand-ink); border-radius:8px;
}
.post-body code{font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; background:#f3efe9; padding:.1rem .3rem; border-radius:4px}
.post-body pre{background:#23201d; color:#f5efe7; padding:1rem; border-radius:10px; overflow:auto}

/* ========================
   FILTER CHIPS
   ======================== */
.chips{display:flex; gap:.4rem; margin:16px 0 20px; flex-wrap:wrap}
.chip{
  display:inline-block; padding:.3rem .55rem;
  border:1px solid rgba(0,0,0,.08);
  border-radius:8px;                    /* gently rounded, not pills */
  font-size:.8rem; font-weight:600;
  text-decoration:none;
  background:var(--brand-chip); color:var(--brand-strong);
  box-shadow:0 2px 8px rgba(0,0,0,.06);
}
.chip:hover{background:var(--brand-chip-strong)}
.chip.active{background:#e7d7c8; border-color:rgba(0,0,0,.12)}

/* ========================
   META BADGE
   ======================== */
.badge{
  display:inline-block;
  margin-left:.6rem;
  margin-top:-10px;                 /* your raised badge */
  padding:.15rem .4rem;
  font-size:.5rem;
  font-weight:400;                  /* no bold per your note */
  text-transform:uppercase;
  letter-spacing:.6px;
  border-radius:8px;
  background:#efe4db; color:var(--brand-ink);
}

/* ========================
   PAGER
   ======================== */
.pagination{display:flex; justify-content:space-between; align-items:center; margin:22px 0 40px}
.pagination a{font-weight:800; text-decoration:none; color:var(--brand)}
.pagination a:hover{text-decoration:underline}

/* ========================
   BUTTONS (kept minimal)
   ======================== */
.post-link{ margin-top:.5rem }
.button{
  display:inline-block; padding:.2rem .4rem; border-radius:10px;
  background:#e7d7c8; color:var(--brand-ink); font-weight:800; text-decoration:none;
  border:1px solid rgba(0,0,0,.12); box-shadow:0 2px 8px rgba(0,0,0,.06)
}
.button:hover{ background:#e0cdbd }

/* ========================
   TITLE: outline + shadow + responsive size
   ======================== */
.site-title{
  font-family:'Chicle', cursive;
  font-size:clamp(2.2rem, 6vw, 4rem);
  line-height:1.05;
  text-align:center;
  color:var(--ink-soft);
  margin:24px 0 12px;
  -webkit-text-stroke:1px #000; text-stroke:1px #000;
  text-shadow:0 2px 0 rgba(0,0,0,.22), 0 4px 10px rgba(0,0,0,.16);
  display:flex; align-items:center; justify-content:center; gap:.5rem;
}
.site-title i{
  font-size:.85em;
  -webkit-text-stroke:1px #000; text-stroke:1px #000;
  text-shadow:0 2px 0 rgba(0,0,0,.22), 0 4px 10px rgba(0,0,0,.16);
}
/* Fallback for browsers without text-stroke */
@supports not (-webkit-text-stroke: 1px black){
  .site-title, .site-title i{
    text-shadow:
      0 0 1px #000,
      1px 0 0 #000, -1px 0 0 #000,
      0 1px 0 #000, 0 -1px 0 #000,
      1px 1px 0 #000, -1px -1px 0 #000,
      0 4px 10px rgba(0,0,0,.16);
  }
}
@media (max-width:420px){ .site-title{ gap:.35rem } }

/* ========================
   COLLECTIVE BADGES
   ======================== */
.collective-badges{
  display:flex; flex-wrap:wrap; justify-content:center; gap:10px;
  margin: -25px auto 12px;          /* your nudge up */
  padding:25px 0 10px;
}
.site-badge{
  display:inline-flex; align-items:center; gap:6px;
  min-width:125px; height:20px; padding:0 10px;
  font-family:'Raleway', sans-serif; font-size:10px; font-weight:600; letter-spacing:.5px;
  text-transform:uppercase; text-decoration:none;
  border:1px dotted rgba(0,0,0,0.25); border-radius:0; color:var(--ink);
  background:#ccc; text-shadow:0 1px 0 rgba(0,0,0,0.25);
  transition: transform .12s ease, box-shadow .18s ease, filter .18s ease;
}
.site-badge i{
  font-size:.9rem; color:#fff; text-shadow:0 1px 0 rgba(0,0,0,0.25);
  width:18px; height:18px; display:inline-grid; place-items:center; background:rgba(255,255,255,0.25);
}
.site-badge:hover{ transform:translateY(-1px); filter:brightness(1.07); box-shadow:0 0 8px rgba(0,0,0,0.12) }

/* Individual site color schemes */
.badge-dreamtyme { background: linear-gradient(to bottom, #cfcac5, #b8b3ae); color: #3a3530; }
.badge-abbyspetz { background: linear-gradient(to bottom, #b7a2f7, #9261BF); color: #eeeeee; }
.badge-deco      { background: linear-gradient(to bottom, #c77272, #b35c5c); color: #eeeeee; }
.badge-breeds    { background: linear-gradient(to bottom, #607b8a, #4e6780); color: #eeeeee; }
.badge-warehouse { background: linear-gradient(to bottom, #3f8b7c, #2f6f62); color: #eeeeee; }
.badge-whimsy    { background: linear-gradient(to bottom, #ffc3e3, #ffb5da); color: #6b2e4d; }
.badge-whimsy i  { color:#ffffff; background: rgba(255, 255, 255, 0.28); }

/* ========================
   UTILITIES
   ======================== */
.sr-only{
  position:absolute!important; width:1px!important; height:1px!important; padding:0!important; margin:-1px!important;
  overflow:hidden!important; clip:rect(0,0,0,0)!important; white-space:nowrap!important; border:0!important
}
@media (prefers-reduced-motion: reduce){
  *{animation:none!important; transition:none!important; scroll-behavior:auto!important}
}