:root{
  --text:#eaeaea; --text-dim:#b9b9b9; --bg:#0f0f10;
  --elev-1:0 6px 18px rgba(0,0,0,.25); --elev-2:0 10px 28px rgba(0,0,0,.35);
}
*{box-sizing:border-box}
html,body{margin:0;padding:0;background:var(--bg);color:var(--text);
  font-family: var(--font-body,"IBM Plex Mono"), ui-monospace, monospace}
a{color:var(--text);text-decoration:none}

/* Font variables from settings */
body[data-heading-font="IBM Plex Mono"]{ --font-heading: "IBM Plex Mono" }
body[data-heading-font="Space Grotesk"]{ --font-heading: "Space Grotesk" }
body[data-heading-font="Inter"]{ --font-heading: "Inter" }
body[data-heading-font="Crimson Pro"]{ --font-heading: "Crimson Pro" }

body[data-body-font="IBM Plex Mono"]{ --font-body: "IBM Plex Mono" }
body[data-body-font="Space Grotesk"]{ --font-body: "Space Grotesk" }
body[data-body-font="Inter"]{ --font-body: "Inter" }
body[data-body-font="Crimson Pro"]{ --font-body: "Crimson Pro" }

body[data-nav-font="IBM Plex Mono"]{ --font-nav: "IBM Plex Mono" }
body[data-nav-font="Space Grotesk"]{ --font-nav: "Space Grotesk" }
body[data-nav-font="Inter"]{ --font-nav: "Inter" }
body[data-nav-font="Crimson Pro"]{ --font-nav: "Crimson Pro" }

.page{display:grid; grid-template-columns: var(--sidebar-col,50%) 1fr; gap:28px; align-items:start}
body[data-sidebar="35"]{ --sidebar-col:35% } body[data-sidebar="40"]{ --sidebar-col:40% } body[data-sidebar="45"]{ --sidebar-col:45% } body[data-sidebar="50"]{ --sidebar-col:50% } body[data-sidebar="55"]{ --sidebar-col:55% }

.left-rail.hero{height:100vh; position:sticky; top:0; overflow:hidden; background-size:cover; background-position:center var(--bg-offset,0px)}
/* Full style */
body[data-sidebar-style="full"] .page{ display:block }
body[data-sidebar-style="full"] .left-rail.hero{ position:fixed; inset:0 auto 0 0; width:var(--sidebar-col,50%) }
body[data-sidebar-style="full"] .content-area{ padding-left: calc(var(--sidebar-col,50%) + 28px) }

/* Overlay and gradient fixed stack order */
.left-rail.hero{ position:fixed; }
.left-rail.hero .hero-bg-layer{ position:absolute; inset:0; z-index:0; }

.left-rail.hero::after{content:""; position:absolute; left:0; right:0; top:0; z-index:1; height: var(--grad-h, 30vh);
  background: linear-gradient(180deg, rgba(0,0,0,.85), rgba(0,0,0,0)); pointer-events:none; }


/* Map gradient height */
body[data-grad="20"] .left-rail.hero{ --grad-h:20vh }
body[data-grad="30"] .left-rail.hero{ --grad-h:30vh }
body[data-grad="40"] .left-rail.hero{ --grad-h:40vh }
body[data-grad="50"] .left-rail.hero{ --grad-h:50vh }

.brand-row{position:relative; z-index:2; display:flex; align-items:flex-start; justify-content:space-between; padding:16px 16px 8px;
  background: linear-gradient(180deg, rgba(0,0,0,.6), rgba(0,0,0,0)); border-bottom:1px solid rgba(255,255,255,.06)}
.brand .wordmark{font-weight:700; font-size:42px; letter-spacing:1px; color: var(--accent); font-family: var(--font-heading) }
.logo img{height:44px}

.hero-inner{position:relative; z-index:2; padding:16px; display:flex; flex-direction:column; height: calc(100% - 76px)}
.hero-fill{flex:1 1 auto; display:flex; flex-direction:column; gap:12px}

/* Sidebar feature text background for contrast */
.sidebar-feature{ background: rgba(0,0,0,.25); padding:12px; border-radius:12px; backdrop-filter: blur(2px) }
.sidebar-feature .sf-title{font-size: clamp(26px, 3vw, 36px); margin:.4rem 0 .25rem 0; font-family: var(--font-heading) }
.sidebar-feature .sf-excerpt{color:var(--text-dim); margin:0; font-family: var(--font-body) }

.hero-bottom{margin-top:auto; display:flex; flex-direction:column; gap:10px; align-items:stretch; padding-bottom:12px}
.sidebar-nav{width:100%}
.sidebar-nav ul{list-style:none;margin:0;padding:0;display:flex;gap:24px;flex-wrap:wrap}
.sidebar-nav a{color:var(--text); padding:6px 0; font-size:18px; font-family: var(--font-nav) }

.sb-sep{border:0; height:1px; background: rgba(255,255,255,.15); margin:12px 0}
.sb-footer{display:flex; align-items:center; justify-content:space-between; gap:12px; color:var(--text-dim); font-size:14px}
.sb-footer .social a{color:#fff; opacity:.9; margin-left:12px}

/* Right grid */
.right-grid{min-width:0}
.posts-grid{display:grid; grid-template-columns:1fr 1fr; gap:24px}
.posts-grid.top-pad{ padding-top:20px }
@media (max-width: 920px){ body[data-sidebar-style="full"] .content-area{ padding-left: 0 } .page{ display:block } .posts-grid{ grid-template-columns:1fr } }

.grid-card{display:flex;flex-direction:column;background:rgba(255,255,255,.02);border:1px solid rgba(255,255,255,.06);border-radius:18px;overflow:hidden;box-shadow:var(--elev-1)}
.grid-card .post-thumb img{width:100%; aspect-ratio:4/3; object-fit:cover}
.grid-card .post-content{padding:14px 16px 16px}
.post-meta-row{display:flex; align-items:center; gap:10px; color:var(--text-dim); font-size:12px}
.post-meta-row .star{color:var(--accent)}
.post-meta-row .tag-text{color:var(--text-dim)}
.post-meta-row .arrow{margin-left:auto; opacity:.7}
.grid-card .post-title{font-size: clamp(18px, 1.8vw, 22px); margin:6px 0; font-family: var(--font-heading) }
.grid-card .post-excerpt{margin:0 0 10px 0; color:var(--text-dim); display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden}
.post-byline{display:flex; align-items:center; gap:8px; font-size:12px; color:var(--text-dim)}
.post-byline .avatar{width:20px; height:20px; border-radius:50%} .dot{opacity:.5; padding:0 4px}

/* Post page */
.post-title{font-size: clamp(40px, 4.5vw, 56px); margin:.2rem 0 .6rem 0; font-family: var(--font-heading) }
.post-hero{margin:12px 0 0 0;}
.post-hero .post-hero-img{ width:90%; border-radius:18px }
@media (max-width:920px){ .post-hero .post-hero-img{ width:100% } }

/* Koenig wide/full */
.kg-width-wide img, .kg-width-full img{ display:block; height:auto }
.content-area .kg-width-wide img{ width:120%; max-width:120%; margin-left:-10% }
.content-area .kg-width-full img{ width:calc(100% + 40px); max-width:calc(100% + 40px); margin-left:-20px }
.content-area figure.kg-image-card{ margin:1.2rem 0 }

/* Tags drawer */
.tags-drawer{ position:fixed; inset:0 0 0 auto; width:min(420px,92vw); transform:translateX(100%); background:#121212; color:#fff; z-index:60; transition:transform .25s ease; padding:16px; box-shadow:var(--elev-2) }
.tags-drawer[aria-hidden="false"]{ transform:none }
.drawer-close{ position:absolute; top:8px; right:8px; border:none; background:transparent; color:#fff; font-size:28px; cursor:pointer }
.drawer-tags{ list-style:none; margin:42px 0 0 0; padding:0; display:grid; gap:8px }
.drawer-tags a{ color:#fff; text-decoration:none; display:flex; justify-content:space-between; padding:8px 6px; border-bottom:1px solid rgba(255,255,255,.06) }
.drawer-backdrop{ position:fixed; inset:0; background:rgba(0,0,0,.4); z-index:50 }

/* Buttons */
.open-tags{ font-size:18px; background:rgba(255,255,255,.06); border:1px solid rgba(255,255,255,.1); color:#fff; padding:10px 14px; border-radius:12px; cursor:pointer }

/* Sidebar feature block at bottom above menu */
.hero-bottom .sidebar-feature{ margin: 0 0 20px 0; background: rgba(0,0,0,.28); backdrop-filter: blur(2px); padding: 8px 10px; border-radius: 10px }
.hero-bottom .sf-title{ font-family: var(--font-heading, var(--font-body)); margin: 0 0 6px 0 }
.hero-bottom .sf-excerpt{ margin: 0; color: var(--text-dim) }

.search-btn{ background: transparent !important; color:#fff }
.search-btn svg{ stroke: currentColor }

/* Body font runtime mapping including Typewriter option */
body[data-body-font="IBM Plex Mono (Typewriter)"]{ --font-body: "IBM Plex Mono"; letter-spacing:.2px }
/* Nav font mapping for typewriter option */
body[data-nav-font="IBM Plex Mono (Typewriter)"]{ --font-nav: "IBM Plex Mono" }

.post-hero img{ width:90%; max-width:90%; border-radius:18px; display:block; margin:0 auto }
@media (max-width: 920px){ .post-hero img{ width:100%; max-width:100% } }

/* Sidebar nav horizontal full width */
.sidebar-nav ul{ display:flex; flex-wrap:wrap; gap:20px 28px; }
.sidebar-nav li{ list-style:none }
.sidebar-nav a{ display:inline-block; padding:4px 0 }
.sb-sep{ border:none; border-top:1px solid rgba(255,255,255,.25); margin:10px 0 10px 0 }

/* === Search icon hard-fix === */
.search-btn,
button[data-ghost-search]{
  -webkit-appearance: none !important;
  appearance: none !important;
  background: transparent !important;
  border: 0 !important;
  outline: none !important;
  box-shadow: none !important;
  padding: 0 !important;
  margin: 0 !important;
  width: 40px !important;
  height: 40px !important;
  line-height: 0 !important;
  display: grid !important;
  place-items: center !important;
  border-radius: 0 !important;
}
.search-btn:focus, .search-btn:active,
button[data-ghost-search]:focus, button[data-ghost-search]:active{
  outline: none !important;
  border: 0 !important;
  box-shadow: none !important;
  transform: none !important;
}
.search-btn svg,
button[data-ghost-search] svg{
  display:block;
  stroke:#fff !important;
  fill:none !important;
}

/* === Ghost native search modal styling (charcoal input) === */
.gh-search, .gh-search-modal, .gh-search-overlay{
  --gh-search-bg: rgba(15,15,16,.96);
  --gh-input-bg: #1a1a1a;
  --gh-input-fg: #ffffff;
}
.gh-search, .gh-search-modal{
  background: var(--gh-search-bg) !important;
}
.gh-search input,
.gh-search .gh-input,
.gh-search .search-input,
.gh-search-modal input{
  background: var(--gh-input-bg) !important;
  color: var(--gh-input-fg) !important;
  border: 1px solid rgba(255,255,255,.08) !important;
  box-shadow: none !important;
}
.gh-search ::placeholder,
.gh-search-modal ::placeholder{ color: rgba(255,255,255,.6) !important; }

/* === Anti layout shift on search open: keep a scrollbar reserved === */
html{ overflow-y: scroll; }

/* === Ghost Search modal dark theme (charcoal) === */
.gh-search, .gh-search-modal, .gh-search-overlay, .gh-portal-search {
  background: rgba(15,15,16,0.96) !important;
}
/* container panels */
.gh-search .gh-search-container,
.gh-search-modal .gh-search-container,
.gh-portal-search .gh-search-container{ background: transparent !important; }
/* input field */
.gh-search input[type="search"],
.gh-search .gh-search-input input,
.gh-search-modal input[type="search"],
.gh-portal-search input[type="search"]{
  background: #1a1a1a !important;
  color: #fff !important;
  border: 1px solid rgba(255,255,255,.12) !important;
  box-shadow: none !important;
}
.gh-search ::placeholder,
.gh-search-modal ::placeholder,
.gh-portal-search ::placeholder{ color: rgba(255,255,255,.6) !important; }
/* list items */
.gh-search .gh-search-results,
.gh-portal-search .gh-search-results{ background: transparent !important; }
.gh-search .gh-search-result, .gh-portal-search .gh-search-result{
  background: rgba(255,255,255,0.02) !important;
  border: 1px solid rgba(255,255,255,0.06) !important;
}

/* === Browse Topics restyle === */
.browse-topics {
  display: block !important;
  margin-top: 30px !important;
  padding-top: 10px;
  border-top: 1px solid rgba(255,255,255,0.2);
  text-align: center;
  background: transparent !important;
  color: inherit !important;
  font-weight: 500;
  box-shadow: none !important;
}
.browse-topics:hover {
  opacity: 0.8;
}


/* Topics row separator */
.topics-row{
  margin-top: 30px;
  padding-top: 10px;
  border-top: 1px solid rgba(255,255,255,.2);
  text-align: center;
}

/* === Browse Topics final polish === */
.browse-topics{
  border-top: none !important;       /* remove duplicate line */
  font-family: var(--font-heading, "IBM Plex Mono", ui-monospace, monospace) !important;
  font-size: clamp(18px, 2.2vw, 24px) !important;
  letter-spacing: .5px;
}
.topics-row{
  margin-top: 48px !important;       /* more distance from posts */
  padding-top: 16px !important;
  border-top: 1px solid rgba(255,255,255,.2) !important; /* single subtle line */
  text-align: center !important;
}

/* ===== v1.1.0 tweaks ===== */
/* Reduce visual footprint of each grid card by ~15% on desktop */
@media (min-width: 921px){
  .posts-grid .grid-card{
    width: 85% !important;
    margin-left: auto !important;
    margin-right: auto !important;
  }
}

/* Keep mobile at full width for readability */
@media (max-width: 920px){
  .posts-grid .grid-card{ width: 100% !important; }
}

/* Softer, more modern rounding */
.grid-card{ border-radius: 22px !important; }
.grid-card .post-thumb img{ border-radius: 18px !important; }

/* More elegant hover, slower transition */
.grid-card .post-thumb img{
  transition: transform .6s ease, filter .6s ease, opacity .6s ease !important;
}

/* v1.1.1 spacing and fonts */
.topics-row{ margin-bottom: 40px !important; }

/* apply fonts chosen in settings via data attributes */
:root{
  --font-heading: "IBM Plex Mono", ui-monospace, monospace;
  --font-body: "IBM Plex Mono", ui-monospace, monospace;
  --font-nav: "IBM Plex Mono", ui-monospace, monospace;
}
body[data-font-heading="IBM Plex Mono (Typewriter)"]{ --font-heading: "IBM Plex Mono", ui-monospace, monospace; }
body[data-font-heading="IBM Plex Mono"]{ --font-heading: "IBM Plex Mono", ui-monospace, monospace; }
body[data-font-heading="Inter"]{ --font-heading: "Inter", system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif; }
body[data-font-heading="Space Grotesk"]{ --font-heading: "Space Grotesk", system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif; }
body[data-font-heading="Crimson Pro"]{ --font-heading: "Crimson Pro", Georgia, 'Times New Roman', serif; }

body[data-font-body="IBM Plex Mono (Typewriter)"]{ --font-body: "IBM Plex Mono", ui-monospace, monospace; }
body[data-font-body="IBM Plex Mono"]{ --font-body: "IBM Plex Mono", ui-monospace, monospace; }
body[data-font-body="Inter"]{ --font-body: "Inter", system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif; }
body[data-font-body="Space Grotesk"]{ --font-body: "Space Grotesk", system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif; }
body[data-font-body="Crimson Pro"]{ --font-body: "Crimson Pro", Georgia, 'Times New Roman', serif; }

body[data-font-nav="IBM Plex Mono (Typewriter)"]{ --font-nav: "IBM Plex Mono", ui-monospace, monospace; }
body[data-font-nav="IBM Plex Mono"]{ --font-nav: "IBM Plex Mono", ui-monospace, monospace; }
body[data-font-nav="Inter"]{ --font-nav: "Inter", system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif; }
body[data-font-nav="Space Grotesk"]{ --font-nav: "Space Grotesk", system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif; }
body[data-font-nav="Crimson Pro"]{ --font-nav: "Crimson Pro", Georgia, 'Times New Roman', serif; }

/* Use variables */
body{ font-family: var(--font-body); }
.brand .wordmark, .post-title, .page-title{ font-family: var(--font-heading); }
.sidebar-nav a{ font-family: var(--font-nav); }

/* ===== v1.2.0 ===== */
/* Mini header */
.mini-header{ position:fixed; top:-70px; left:0; right:0; height:56px; background:rgba(0,0,0,.65); backdrop-filter:saturate(120%) blur(6px); border-bottom:1px solid rgba(255,255,255,.06); z-index:40; transition:transform .35s ease, top .35s ease; transform: translateY(-100%);}
.mini-header.show{ transform: translateY(0); top:0; }
.mini-header .mini-inner{ max-width:1200px; margin:0 auto; height:56px; display:flex; align-items:center; justify-content:space-between; padding:0 16px }
.mini-header .mini-brand{ color:#fff; font-weight:700; letter-spacing:.5px; text-decoration:none }
.mini-header .mini-search{ background:transparent; border:0; color:#fff; width:36px; height:36px; display:grid; place-items:center }

/* Reading mode */
body.reading-mode .left-rail.hero{ display:none !important; }
body.reading-mode .content-area{ padding-left: 0 !important; }
body.reading-mode .post-full{ max-width: 820px; margin: 0 auto; }
body.reading-mode .post-content{ font-size: 1.06rem; line-height: 1.7; }
.post-actions{ display:flex; justify-content:flex-end; margin-top:6px; }
.reading-toggle{ background:transparent; border:1px solid rgba(255,255,255,.25); color:#fff; padding:6px 10px; border-radius:999px; cursor:pointer; }
.reading-toggle[aria-pressed="true"]{ background:rgba(255,255,255,.08); }

/* Fade-in for lazy images */
img.lazy-fade{ opacity:0; transition: opacity .6s ease; }
img.lazy-fade.in{ opacity:1; }

/* Series block */
.series-block{ margin:14px 0 18px 0; padding:10px 12px; border:1px solid rgba(255,255,255,.06); background:rgba(255,255,255,.02); border-radius:12px }
.series-block .series-label{ color:var(--text-dim); font-size:.9em; display:block; margin-bottom:6px }
.series-block .series-list{ display:flex; flex-wrap:wrap; gap:10px; margin:0; padding:0; list-style:none }
.series-block .series-list a{ color:#fff; text-decoration:none; border-bottom:1px dotted rgba(255,255,255,.3) }

/* Related posts */
.related-posts{ margin:28px 0 6px 0 }
.related-title{ font-size: clamp(20px, 2.3vw, 24px); margin:8px 0 14px 0 }
.related-grid{ display:grid; grid-template-columns:1fr 1fr; gap:18px }
@media (max-width:760px){ .related-grid{ grid-template-columns:1fr } }

/* Scroll-to-top */
.scroll-top{ position:fixed; right:18px; bottom:22px; width:44px; height:44px; border-radius:50%; background:rgba(255,255,255,.1); color:#fff; border:1px solid rgba(255,255,255,.2); display:none; align-items:center; justify-content:center; z-index:30 }
.scroll-top.show{ display:flex }


/* ===== v1.2.1: Sidebar boxed style fix ===== */
body[data-sidebar-style="boxed"] .page{
  display: grid !important;
  grid-template-columns: var(--sidebar-col,50%) 1fr !important;
  gap: 28px !important;
  align-items: start !important;
}
body[data-sidebar-style="boxed"] .left-rail.hero{
  position: sticky !important;
  top: 0 !important;
  inset: auto !important;
  width: auto !important;
  border-radius: 24px !important;
  box-shadow: var(--elev-1) !important;
}
body[data-sidebar-style="boxed"] .content-area{
  padding-left: 0 !important;
}

/* v1.2.2 limit fix: default sidebar bg offset */
:root{ --sidebar-bg-offset: 0px; }


/* v1.2.2 readability tweaks */
/* Card title and excerpt: strict 2-line clamp */
.grid-card .post-title{
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow: hidden;
}
.grid-card .post-excerpt{
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow: hidden;
}



/* v1.2.2 cleanup: no underline on links */
a{ text-decoration: none !important; }
a:hover{ text-decoration: none !important; }

/* More spacing before related section */
.related-posts{ margin: 44px 0 26px 0 !important; }


/* v1.2.2 final: remove link underline site-wide */
a{ text-decoration: none !important; }
a:hover{ text-decoration: none !important; }


/* v1.2.2 final: more space before related section */
.related-posts{ margin-top: 64px !important; }


/* v1.2.2 final: mini header logo in white */
.mini-header .mini-logo{
  height: 28px;
  width: auto;
  display: block;
  filter: brightness(0) invert(1) contrast(110%);
}


/* v1.2.2 reading mode icon-only */
.reading-cta{
  display:flex;
  justify-content:flex-start;
  align-items:center;
  margin: 8px 0 8px 0;
}
.reading-toggle.icon-only{
  background: transparent !important;
  border: 0 !important;
  outline: none !important;
  box-shadow: none !important;
  padding: 4px !important;
  line-height: 0;
  cursor: pointer;
}
.reading-toggle.icon-only svg{
  display: block;
  stroke: #fff;
  fill: none;
  width: 22px;
  height: 22px;
  opacity: .9;
  transition: opacity .2s ease, transform .2s ease;
}
.reading-toggle.icon-only:hover svg{ opacity: 1; transform: translateY(-1px); }
.reading-toggle[aria-pressed="true"] svg{ opacity: 1; }


/* v1.2.2 fix: reading icon fully visible and clickable */
.reading-cta{ display:flex; align-items:center; gap:8px; margin: 10px 0 8px 0; }
.reading-toggle.icon-only{ background:transparent; border:0; padding:4px; line-height:0; cursor:pointer; }
.reading-toggle.icon-only .icon-book{ stroke:#fff; width:24px; height:24px; display:block; }
.reading-toggle.icon-only:focus { outline: 2px solid rgba(255,255,255,.25); outline-offset: 2px; }


/* v1.2.2 fix v2: reading icon + label, avoid clipping */
.reading-cta{
  display:flex;
  align-items:center;
  margin: 10px 0 12px 0;
  overflow: visible !important;
}
.reading-toggle.icon-only{
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: transparent !important;
  border: 0 !important;
  padding: 2px 4px !important;
  line-height: 1;
  color: #fff;
  cursor: pointer;
}
.reading-toggle.icon-only .icon-book{
  stroke:#fff;
  width:22px; height:22px;
  display:block;
  flex: 0 0 auto;
}
.reading-toggle.icon-only .reading-label{
  font-size: 0.92rem;
  color: #fff;
  opacity: .9;
}
.reading-toggle.icon-only:hover .reading-label{ opacity: 1; }
.reading-toggle.icon-only:focus { outline: 2px solid rgba(255,255,255,.25); outline-offset: 2px; }


/* v1.2.2 fix v3: robust reading toggle styles */
.reading-cta{ display:flex; align-items:center; margin: 10px 0 12px 0; }
.reading-toggle.icon-only{ display:inline-flex; align-items:center; gap:8px; background:transparent; border:0; padding:2px 4px; color:#fff; cursor:pointer; }
.reading-toggle.icon-only .icon-book{ width:22px; height:22px; stroke:#fff; display:block; flex:0 0 auto; }
.reading-toggle.icon-only .reading-label{ font-size:.92rem; color:#fff; opacity:.9; }
.reading-toggle.icon-only:hover .reading-label{ opacity:1; }


/* v1.2.2: reading mode text-only */
.reading-cta{ display:flex; align-items:center; margin: 10px 0 12px 0; }
.reading-toggle.text-only{
  background: transparent;
  border: 0;
  color: #fff;
  font-weight: 700;
  font-size: .95rem;
  padding: 0;
  cursor: pointer;
}
.reading-toggle.text-only:focus{ outline: 2px solid rgba(255,255,255,.25); outline-offset: 2px; }

/* ==== v1.3.2 additions ==== */
:root{ --charcoal:#1a1a1b; --charcoal-2:#121212; --accent: var(--ghost-accent-color, #b31217); }
html, body { background: var(--charcoal) !important; }
.main, .content, .site-wrapper, .grid, .post-area { background: transparent !important; }

/* Sidebar bottom fixed */
.left-rail, .site-aside, aside.sidebar, aside.left-rail { display:flex; flex-direction:column; min-height:100vh; }
.left-rail .hero-bottom, .sidebar-bottom, .sidebar__bottom { margin-top:auto; }

/* Blockquotes with accent */
.post-content blockquote { border-left:4px solid var(--accent); margin:1.25rem 0; padding:.75rem 1rem; background:rgba(255,255,255,.02); }

/* Reading area padding */
.post-content { padding-left: 50px; padding-right: 50px; }
.post-featured, .post-feature-image, .post-header + figure { margin-bottom: 50px; border-radius:12px; }

/* Primary tag accent bold */
.post-meta .tag, .post-tags a, .tag-primary, .primary-tag, .post-card-tags a { color:var(--accent) !important; font-weight:700; }

/* Card charcoal */
.post-card, .post-card-inner { background: rgba(0,0,0,.28); }

/* Titles smaller */
.post-title { font-size: clamp(1.8rem, 2.8vw, 2.8rem); line-height:1.15; }
.post-card-title, .card-title { font-size: clamp(1.2rem, 1.6vw, 1.6rem); line-height:1.2; }

/* soften blacks */
.bg-black, .bg-dark { background: var(--charcoal-2) !important; }


/* v1.3.3 tag badge */
.post-meta .tag, .post-tags a, .tag-primary, .primary-tag, .post-card-tags a, .post-card .tag, .card .tag {
  color: #fff !important;
  background: var(--accent);
  display: inline-block;
  padding: .18rem .6rem;
  border-radius: 999px;
  font-weight: 700;
  letter-spacing: .02em;
  text-transform: lowercase;
}


/* v1.3.3 fix: badge solo al primo tag (primary) in meta */
.post-header .tags a:first-child,
.post-meta .tags a:first-child,
.post-tags a:first-child,
.post-card .tags a:first-child,
.post-card-tags a:first-child,
.post-card-meta a[href*="/tag/"]:first-child {
  color:#fff !important;
  background: var(--ghost-accent-color, #b31217);
  font-weight:700;
  border-radius:999px;
  padding:.2rem .6rem;
  display:inline-block;
}
/* stile base per altri tag (non primary) se presenti */
.post-header .tags a,
.post-meta .tags a,
.post-tags a,
.post-card .tags a,
.post-card-tags a {
  border-radius:999px;
  padding:.15rem .5rem;
  background: rgba(255,255,255,0.06);
}

.tag-badge{background:var(--accent);color:#fff;border-radius:999px;padding:.15rem .55rem;font-size:.8rem;font-weight:700;display:inline-block}
.post-card .tag-badge{margin-right:.5rem}
.byline-avatar{width:26px;height:26px;border-radius:50%;object-fit:cover;margin-right:.5rem;vertical-align:middle;box-shadow:0 0 0 2px rgba(0,0,0,.4)}

/* grid meta row */
.grid-card .meta-row{display:flex;gap:.75rem;align-items:center;flex-wrap:wrap;margin-top:.8rem}
.grid-card .star{color:var(--accent, #b3131b);font-size:1rem;line-height:1}

.post-full .post-hero{margin:0 0 75px 0}

/* v1.3.5 meta row size tweak */
.grid-card .meta-row{font-size:0.75rem; opacity:.9}
.grid-card .meta-row time{opacity:.9}
.grid-card .meta-row .dot{opacity:.8}

/* v1.3.6 card meta split */
.grid-card .card-meta{margin-top:.85rem;display:flex;flex-direction:column;gap:.35rem}
.grid-card .meta-top{display:flex;gap:.6rem;align-items:center;flex-wrap:wrap}
.grid-card .meta-bottom{display:flex;gap:.5rem;align-items:center;flex-wrap:wrap;font-size:.75rem;opacity:.9}
.grid-card .star{color:var(--accent, #b3131b);font-size:1rem;line-height:1}

/* Global content padding for dignity */
.post-full .post-content, .page-full .page-content{ padding:100px; box-sizing:border-box; }
@media (max-width: 920px){
  .post-full .post-content, .page-full .page-content{ padding:40px; }
}

/* Blockquotes on pages to mirror posts */
.page-content blockquote { border-left:4px solid var(--accent); margin:1.25rem 0; padding:.75rem 1rem; background:rgba(255,255,255,.02); }

/* v1.3.7 corrections round 3 */
.post-full .post-hero, .page-full .post-hero{ margin:0 0 60px 0 !important; }
@media (max-width: 860px){ .posts-grid{ grid-template-columns: 1fr !important; } }
.grid-card .post-excerpt{ font-size: 0.8em !important; line-height:1.5; display:-webkit-box; -webkit-box-orient:vertical; -webkit-line-clamp:4; overflow:hidden; }
.post-content img, .page-content img, .kg-image, .kg-gallery-card img, .kg-bookmark-card img{ max-width:100%; height:auto; width:auto; }

/* v1.4.0 excerpt length improvements */
.grid-card .post-excerpt{
  display: block;
  -webkit-line-clamp: unset;
  -webkit-box-orient: unset;
  overflow: visible;
}

/* v1.4.0 native comments styling */
.post-comments, .page-comments{
  margin: 60px 0 20px 0;
  padding: 16px 20px;
  border-radius: 14px;
  background: rgba(255,255,255,.03);
  border: 1px solid rgba(255,255,255,.06);
}
.comments-title{ margin: 0 0 10px 0; font-family: var(--font-heading, var(--font-body)); }
.comment-count{ margin-left: 8px; opacity: .6; font-size: .95em; }

/* v1.4.0b excerpt + spacing tweaks */
.posts-grid .grid-card .post-excerpt{
  display: block !important;
  -webkit-line-clamp: unset !important;
  -webkit-box-orient: unset !important;
  overflow: visible !important;
  word-break: normal;
  overflow-wrap: normal;
  hyphens: none;
}

/* Reduce gap below featured image on posts and pages */
.post-full .post-hero, .page-full .post-hero{ margin:0 0 10px 0 !important; }

/* Reduce inner padding of content areas by ~10% */
.post-full .post-content, .page-full .page-content{ padding:90px !important; box-sizing:border-box; }
@media (max-width: 920px){
  .post-full .post-content, .page-full .page-content{ padding:36px !important; }
}