/* ============================================================
   christophleide.com blog theme
   Mirrors the main site's design system (Jost + wire-color chips).
   ============================================================ */

:root{
  --bg:#f7f6f3; --surface:#ffffff; --ink:#14181d; --muted:#6b7280; --rule:#e4e0d8;
  /* 480V wire color code: Brown·Orange·Yellow phases, Gray neutral, Green ground */
  --w-brown:#9b541b; --w-orange:#ec7a14; --w-yellow:#f2c40c; --w-gray:#8a8a8a; --w-green:#16a04f;
  --accent:var(--w-orange);            /* the blog is the orange chip */
}

/* topic color tokens (--c fill, --ct text) */
.t-brown { --c:var(--w-brown);  --ct:#fff; }
.t-orange{ --c:var(--w-orange); --ct:#fff; }
.t-yellow{ --c:var(--w-yellow); --ct:#1c1c1c; }
.t-gray  { --c:var(--w-gray);   --ct:#fff; }
.t-green { --c:var(--w-green);  --ct:#fff; }

*,*::before,*::after{ margin:0; padding:0; box-sizing:border-box; }
html{ scroll-behavior:smooth; -webkit-text-size-adjust:100%; }
body{
  font-family:'Jost', system-ui, sans-serif;
  background:var(--bg); color:var(--ink);
  -webkit-font-smoothing:antialiased;
  line-height:1.6; min-height:100dvh;
  display:flex; flex-direction:column;
}
a{ color:inherit; text-decoration:none; }
img{ max-width:100%; height:auto; display:block; }

/* ---- header / top bar (mirrors site subpages) ---- */
.topbar{
  display:flex; align-items:center; justify-content:space-between;
  gap:1.25rem; padding:0.9rem clamp(1.25rem,4vw,3rem); flex-wrap:wrap;
  border-bottom:1px solid var(--rule); background:var(--surface);
  position:sticky; top:0; z-index:10;
}
.brand{ display:flex; align-items:center; gap:0.6rem; }
.avatar{ width:36px; height:36px; border-radius:50%; background:var(--w-gray); overflow:hidden; flex:none; }
.avatar img{ width:100%; height:100%; object-fit:cover; object-position:50% 14%; transform:scale(1.5); transform-origin:50% 22%; }
.brand__name{ font-weight:600; font-size:1.2rem; line-height:1; }

.chipnav{ display:flex; align-items:center; gap:0.4rem; flex-wrap:wrap; }
.chipnav a{
  color:var(--ct); background:var(--c);
  font-size:0.76rem; font-weight:500; padding:0.32rem 0.7rem; border-radius:8px;
  box-shadow:0 1px 2px rgba(20,24,29,.1);
  transition:transform .15s, filter .2s, box-shadow .2s, opacity .2s;
}
.chipnav a:hover{ transform:translateY(-1px); filter:brightness(1.06); }
.chipnav a:not(.is-active){ opacity:0.5; }
.chipnav a:not(.is-active):hover{ opacity:1; }
.chipnav a.is-active{ box-shadow:0 0 0 2px var(--bg), 0 0 0 4px var(--c); }

/* ---- main + footer scaffolding ---- */
.site-main{ flex:1 0 auto; width:100%; }

.site-footer{
  display:flex; flex-wrap:wrap; gap:0.4rem 1rem;
  justify-content:space-between; align-items:center;
  padding:0.85rem clamp(1.25rem,4vw,3rem);
  font-size:0.76rem; color:var(--muted);
  border-top:1px solid var(--rule);
}
.site-footer a{ color:var(--muted); transition:color .2s; }
.site-footer a:hover{ color:var(--ink); }
.legal{ display:flex; align-items:center; gap:0.55rem; flex-wrap:wrap; }
.legal .sep{ opacity:0.45; }

/* ---- page head ---- */
.page-head{ max-width:820px; margin:0 auto; padding:clamp(2.5rem,8vh,4.5rem) clamp(1.25rem,4vw,2rem) 0.5rem; }
.page-title{ font-weight:500; font-size:clamp(1.9rem,5vw,2.8rem); line-height:1.1; letter-spacing:-0.01em; }
.page-sub{ color:#4a5058; margin-top:0.6rem; font-size:1.05rem; line-height:1.5; max-width:62ch; }

/* ---- post grid (mirrors site tool-cards) ---- */
.post-grid{
  max-width:820px; margin:0 auto;
  padding:1.4rem clamp(1.25rem,4vw,2rem) 4rem;
  display:grid; grid-template-columns:repeat(auto-fit,minmax(280px,1fr)); gap:1rem;
}
.post-card{
  background:var(--surface); border:1px solid var(--rule); border-top:4px solid var(--accent);
  border-radius:16px; overflow:hidden; box-shadow:0 1px 2px rgba(20,24,29,.06);
  display:flex; flex-direction:column; transition:transform .15s, box-shadow .2s;
}
.post-card:hover{ transform:translateY(-2px); box-shadow:0 10px 24px -14px rgba(20,24,29,.45); }
.post-card__img{ aspect-ratio:16/9; background-size:cover; background-position:center; background-color:#ece8e1; }
.post-card__body{ padding:1.3rem 1.4rem; display:flex; flex-direction:column; flex:1; }
.post-card__tag{ align-self:flex-start; font-size:0.7rem; font-weight:600; text-transform:uppercase; letter-spacing:0.04em; color:var(--accent); margin-bottom:0.5rem; }
.post-card__title{ font-size:1.22rem; font-weight:700; line-height:1.25; margin-bottom:0.5rem; }
.post-card__excerpt{ color:#4a5058; font-size:0.94rem; line-height:1.5; flex:1; }
.post-card__meta{ margin-top:1rem; font-size:0.78rem; color:var(--muted); }

.empty{ max-width:820px; margin:0 auto; padding:3rem clamp(1.25rem,4vw,2rem); color:var(--muted); }

/* ---- pagination ---- */
.pagination{
  max-width:820px; margin:0 auto; padding:0 clamp(1.25rem,4vw,2rem) 4rem;
  display:flex; justify-content:space-between; align-items:center; gap:1rem; font-size:0.9rem;
}
.pagination .nav-link{ padding:0.5rem 1.1rem; border:1.5px solid var(--rule); border-radius:999px; font-weight:500; transition:border-color .2s; }
.pagination .nav-link:hover{ border-color:var(--ink); }
.pagination .page-number{ color:var(--muted); }

/* ---- single article ---- */
.article{ max-width:760px; margin:0 auto; padding:clamp(2rem,6vh,3.5rem) clamp(1.25rem,4vw,2rem) 0.5rem; }
.article__tag{ display:inline-block; font-size:0.72rem; font-weight:700; text-transform:uppercase; letter-spacing:0.05em; color:var(--accent); margin-bottom:0.8rem; }
.article__title{ font-weight:600; font-size:clamp(2rem,5.2vw,3rem); line-height:1.12; letter-spacing:-0.015em; }
.article__sub{ color:#4a5058; font-size:1.18rem; line-height:1.45; margin-top:0.9rem; }
.article__meta{ display:flex; flex-wrap:wrap; gap:0.4rem 1.1rem; margin-top:1.2rem; font-size:0.85rem; color:var(--muted); }
.article__feature{ max-width:1080px; margin:2rem auto 0; padding:0 clamp(1.25rem,4vw,2rem); }
.article__feature img{ width:100%; border-radius:16px; }
.article__feature figcaption{ text-align:center; font-size:0.82rem; color:var(--muted); margin-top:0.6rem; }

/* ---- rendered content (Koenig) ---- */
.gh-content{
  display:grid;
  grid-template-columns:
    [full-start] minmax(1rem,1fr)
    [wide-start] minmax(0,140px)
    [main-start] min(720px, calc(100% - 2rem))
    [main-end] minmax(0,140px)
    [wide-end] minmax(1rem,1fr) [full-end];
  padding:1.6rem 0 3rem;
  font-size:1.08rem; line-height:1.75; color:#23272d;
}
.gh-content > *{ grid-column:main-start/main-end; margin-top:1.5rem; }
.gh-content > :first-child{ margin-top:0; }
.gh-content .kg-width-wide{ grid-column:wide-start/wide-end; }
.gh-content .kg-width-full{ grid-column:full-start/full-end; }
.gh-content .kg-width-full img{ border-radius:0; }

.gh-content h2{ font-size:1.7rem; font-weight:600; line-height:1.2; margin-top:2.6rem; letter-spacing:-0.01em; }
.gh-content h3{ font-size:1.35rem; font-weight:600; margin-top:2.1rem; }
.gh-content h4{ font-size:1.12rem; font-weight:600; margin-top:1.7rem; }
.gh-content a{ color:var(--accent); text-decoration:underline; text-underline-offset:2px; }
.gh-content ul, .gh-content ol{ padding-left:1.4rem; }
.gh-content li + li{ margin-top:0.4rem; }
.gh-content blockquote{ border-left:3px solid var(--accent); padding-left:1.2rem; color:#4a5058; font-style:italic; }
.gh-content img{ border-radius:12px; }
.gh-content figcaption{ text-align:center; font-size:0.82rem; color:var(--muted); margin-top:0.5rem; }
.gh-content pre{ background:var(--ink); color:#f7f6f3; padding:1rem 1.2rem; border-radius:12px; overflow:auto; font-size:0.9rem; line-height:1.55; }
.gh-content code{ font-family:ui-monospace,SFMono-Regular,Menlo,monospace; font-size:0.92em; background:#ece8e1; padding:0.12em 0.4em; border-radius:5px; }
.gh-content pre code{ background:none; padding:0; }
.gh-content hr{ border:none; border-top:1px solid var(--rule); }

/* ---- comments (Ghost native) — the post is where membership lives ---- */
.article-comments{ max-width:760px; margin:0 auto; padding:2rem clamp(1.25rem,4vw,2rem) 4rem; border-top:1px solid var(--rule); }

/* ---- mobile ---- */
@media (max-width:680px){
  /* softer wire shades, matching the site's mobile palette */
  body{ --w-brown:#835432; --w-orange:#d4762a; --w-yellow:#d9b021; --w-green:#3f8f5b; }
  .site-footer{ justify-content:center; text-align:center; }
  .chipnav{ gap:0.35rem; }
}