/* ---------- COCAINE GIRL — blog.css / manifesto styles ---------- */
/* Drop into /css/blog.css or /css/manifesto.css and keep the Google Fonts loaded in the page head */

/* Theme tokens */
:root{
  --bg: #ffffff;
  --surface: #ffffff;
  --text: #0f0f10;
  --muted: #6d6d71;
  --brand: #000000;       /* primary (black) - change if you want color */
  --accent: #b30f2a;      /* optional brand red/pink */
  --card-border: rgba(0,0,0,0.06);
  --radius: 12px;
  --max-width: 1100px;
  --read-width: 65ch;
  --base: 16px;
  --lh: 1.8;
  --shadow: 0 12px 30px rgba(12,12,12,0.06);
}

/* Dark-mode friendly */
@media (prefers-color-scheme: dark){
  :root{
    --bg: #0b0b0b;
    --surface: #0f0f0f;
    --text: #f3f3f4;
    --muted: #bdbdbd;
    --card-border: rgba(255,255,255,0.04);
    --shadow: 0 12px 30px rgba(0,0,0,0.55);
  }
}

/* Reset & base */
*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  font-family: "Poppins", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial;
  background:var(--bg);
  color:var(--text);
  font-size:var(--base);
  line-height:var(--lh);
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
}

/* Page container utilities */
.container{
  width:100%;
  max-width:var(--max-width);
  margin:0 auto;
  padding:0 20px;
}

/* Blog article wrapper */
.blog-article{ padding:42px 0 80px; }
.post{ margin:0 auto; padding:0 12px; }

/* Header / title */
.post-header{ margin-bottom:14px; padding:6px 0; text-align:left; }
.post-title{
  font-family: "Cinzel", serif;
  font-size: clamp(1.75rem, 4vw, 2.4rem);
  margin:0 0 6px;
  letter-spacing:0.8px;
  line-height:1.05;
}
.post-subtitle{
  margin:0 0 10px;
  color:var(--muted);
  font-weight:500;
}
.post-header .meta{
  color:var(--muted);
  font-size:0.92rem;
}

/* Hero image (responsive) */
.hero{
  margin:20px 0 30px;
  width:100%;
  display:block;
}
.hero img{
  width:100%;
  height:auto;
  display:block;
  border-radius:10px;
  object-fit:cover;
  box-shadow:var(--shadow);
}

/* Article body (reading comfort) */
.post-body{
  margin: 0 auto;
  max-width: var(--read-width);
  color:var(--text);
  font-size:1rem;
  line-height:var(--lh);
  padding-bottom:8px;
  word-wrap:break-word;
  font-feature-settings: "liga" 1;
}

/* Paragraphs and headings */
.post-body p{ margin: 0 0 1.15em; }
.post-body h2{
  font-family: "Cinzel", serif;
  font-size: clamp(1.25rem, 2.6vw, 1.6rem);
  margin: 1.25em 0 0.6em;
  letter-spacing:0.6px;
}
.post-body h3{
  font-size: clamp(1.05rem, 2.2vw, 1.1rem);
  margin: 1.05em 0 0.45em;
  font-weight:600;
}
.post-body strong{ font-weight:700; }

/* Blockquote */
.post-body blockquote{
  margin:1.1em 0;
  padding:16px 18px;
  border-left:4px solid var(--brand);
  background: rgba(0,0,0,0.02);
  border-radius:8px;
  font-style:italic;
}

/* Signature / callout */
.signature{
  margin-top:18px;
  font-weight:700;
  letter-spacing: 0.8px;
  color:var(--brand);
  line-height:1.25;
}

/* Post footer */
.post-footer{
  margin-top:28px;
  padding-top:18px;
  border-top:1px solid var(--card-border);
}
.back-to-list{
  color:var(--brand);
  text-decoration:none;
  font-weight:600;
}
.back-to-list:hover,.back-to-list:focus{ text-decoration:underline; }

/* Images in content */
.post-body img{
  max-width:100%;
  height:auto;
  border-radius:8px;
  margin: 14px 0;
  display:block;
}

/* Lists */
.post-body ul, .post-body ol{
  margin:0 0 1em 1.2em;
  padding:0;
}
.post-body li{ margin:0.45em 0; }

/* Code blocks (if ever used) */
.post-body pre{
  overflow:auto;
  padding:12px;
  border-radius:8px;
  background:#0f1724;
  color:#e6eef8;
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, "Roboto Mono", monospace;
  font-size:.9rem;
}

/* Accessibility: focus states */
:focus{ outline: none; }
:focus-visible{
  outline: 3px solid rgba(0,0,0,0.12);
  outline-offset: 3px;
  border-radius:6px;
}

/* Responsive tweaks */
@media (max-width:880px){
  .container{ padding-left:16px; padding-right:16px; }
  .post-body{ padding:0 6px; max-width:unset; }
  .post-title{ font-size: clamp(1.5rem, 6vw, 2rem); }
  .hero{ margin:16px 0 22px; }
}

/* Print-friendly */
@media print{
  body{ background:white; color:black; }
  .hero img{ display:none; }
  a::after{ content: " (" attr(href) ")"; font-size:0.9em; color:#333; }
  .post-footer, .back-to-list{ display:none; }
}

/* Tiny helpers */
.kicker{ font-size:.85rem; color:var(--muted); text-transform:uppercase; letter-spacing:0.6px; }
.center{ text-align:center; }
.hidden{display:none !important}

/* End of manifesto CSS */