/* SaasyBits — journal
   Shared by the blog index and every post. Tokens mirror the landing page;
   keep them in sync if the brand palette moves. */

:root{
  --bg-dark:#0F0F0D;
  --bg-dark-2:#141412;
  --card-dark:#1A1A17;
  --border-dark:rgba(237,234,226,0.1);
  --text-onDark:#EDEAE2;
  --text-onDark-soft:#A8A59C;

  --accent:#B6D334;
  --accent-2:#B6D334;
  --on-accent:#0F0F0D;

  --radius-lg:16px;
  --radius-md:12px;
  --radius-sm:9px;
  --maxw:1240px;
  /* Reading measure. Post body, index list and empty state all follow it. */
  --measure:736px;
}

*{box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{
  margin:0;
  background:linear-gradient(180deg, var(--bg-dark), var(--bg-dark-2));
  color:var(--text-onDark);
  font-family:'Bricolage Grotesque', system-ui, sans-serif; line-height:1.6;
  -webkit-font-smoothing:antialiased;
  display:flex; flex-direction:column; min-height:100vh;
}
h1,h2,h3{font-family:'Bricolage Grotesque', system-ui, sans-serif; margin:0; letter-spacing:-0.02em; line-height:1.25;}
p{margin:0;}
a{color:inherit;}
.wrap{max-width:var(--maxw); margin:0 auto; padding:0 24px; position:relative; z-index:1;}

/* ---------- Brand mark ---------- */
.mark{
  width:36px; height:36px; border-radius:10px;
  background:var(--accent);
  color:var(--on-accent); display:flex; align-items:center; justify-content:center;
  font-family:'Bricolage Grotesque', system-ui, sans-serif; font-weight:800; font-size:14px;
  letter-spacing:-0.02em; flex-shrink:0;
}

/* ---------- Nav ---------- */
.nav{position:sticky; top:0; z-index:50; background:var(--bg-dark); backdrop-filter:blur(10px);}
.nav-inner{
  display:flex; align-items:center; justify-content:space-between;
  padding:14px 24px; max-width:var(--maxw); margin:0 auto;
}
.brand{
  display:flex; align-items:center; gap:10px; text-decoration:none;
  font-family:'Bricolage Grotesque', system-ui, sans-serif; font-weight:800; font-size:20px;
  letter-spacing:-0.04em; color:var(--text-onDark);
}
.brand span{color:var(--accent);}
.nav-cta{
  font-size:14px; font-weight:700; padding:10px 19px; border-radius:var(--radius-sm);
  background:var(--accent); color:var(--on-accent); text-decoration:none;
  transition:transform .15s ease, box-shadow .15s ease;
}
.nav-cta:hover{transform:translateY(-1px); box-shadow:0 6px 16px rgba(182,211,52,0.3);}

/* ---------- Blog header ---------- */
.blog-head{
  padding:clamp(38px, 4.5vw, 66px) 0 clamp(26px, 3vw, 40px);
  border-bottom:1px solid var(--border-dark);
}
.blog-head .eyebrow{
  font-family:'JetBrains Mono', ui-monospace, monospace; font-size:11.5px; font-weight:500;
  letter-spacing:0.14em; text-transform:uppercase; color:var(--accent-2);
}
.blog-head h1{
  font-size:clamp(29px, 3.6vw, 40px); font-weight:800; color:#fff;
  margin-top:11px; letter-spacing:-0.03em;
}
.blog-head .sub{
  margin-top:13px; font-size:16px; line-height:1.55;
  color:var(--text-onDark-soft); max-width:540px;
}
.blog-head .cross-link{margin-top:18px; font-size:14.5px; color:var(--text-onDark-soft);}
.blog-head .cross-link a{color:var(--accent-2); text-underline-offset:3px;}

/* ---------- Post list ----------
   An editorial index: rules between entries rather than boxes, so the page
   reads as a list of writing instead of a grid of cards. */
.blog-list{flex:1; padding:clamp(32px, 4vw, 64px) 0;}
.post-list{max-width:var(--measure);}
.post-card{
  display:block; text-decoration:none; position:relative;
  padding:26px 0; border-top:1px solid var(--border-dark);
}
.post-card:first-child{border-top:none; padding-top:4px;}
.post-meta{
  display:flex; align-items:center; gap:12px; flex-wrap:wrap;
  font-size:12.5px; color:var(--text-onDark-soft); letter-spacing:0.01em;
}
.post-tag{
  display:inline-flex; align-items:center; gap:6px;
  font-family:'JetBrains Mono', ui-monospace, monospace; font-size:11.5px; font-weight:500;
  letter-spacing:0.07em; text-transform:uppercase; color:var(--accent-2);
}
.post-tag::before{content:''; width:5px; height:5px; border-radius:50%; background:currentColor;}
/* Area pills: which part of the stack a post covers. One colour per area;
   an unknown area falls back to the neutral base. */
.post-areas{display:inline-flex; align-items:center; gap:6px; flex-wrap:wrap;}
.post-area{
  font-family:'JetBrains Mono', ui-monospace, monospace; font-size:10.5px; font-weight:500;
  letter-spacing:0.08em; text-transform:uppercase; line-height:1;
  padding:5px 9px; border-radius:999px;
  color:var(--text-onDark-soft); background:rgba(237,234,226,0.06); border:1px solid var(--border-dark);
}
.post-area-core{color:#8FB2F8; background:rgba(47,111,237,0.14); border-color:rgba(47,111,237,0.38);}
.post-area-backend{color:#5FD8C9; background:rgba(23,184,166,0.13); border-color:rgba(23,184,166,0.36);}
.post-area-frontend{color:#C0A9FB; background:rgba(139,92,246,0.14); border-color:rgba(139,92,246,0.38);}
.post-area-product{color:#F6C46E; background:rgba(245,158,11,0.13); border-color:rgba(245,158,11,0.36);}
.post-card h2{
  font-size:clamp(19px, 2vw, 22px); font-weight:800; margin-top:9px;
  line-height:1.28; letter-spacing:-0.025em; color:#fff;
  transition:color .18s ease;
}
.post-card:hover h2{color:var(--accent-2);}
.post-card .excerpt{
  margin-top:8px; font-size:15px; line-height:1.6; color:var(--text-onDark-soft);
}
/* The arrow is the only hover ornament; the title colour carries the rest. */
.post-empty{
  max-width:var(--measure); padding:26px 0;
  font-size:15px; color:var(--text-onDark-soft);
}
.post-card .more{
  display:inline-flex; align-items:center; gap:7px; margin-top:14px;
  font-size:13.5px; font-weight:700; color:var(--accent-2);
}
.post-card .more::after{
  content:'→'; transition:transform .18s ease;
}
.post-card:hover .more::after{transform:translateX(4px);}

/* ---------- Post body ----------
   Sized for a narrow column: the measure caps at --measure but the type has to hold
   up when the viewport is half a screen and the column fills it edge to edge. */
.post{flex:1; padding:clamp(32px, 4vw, 64px) 0;}
.post-inner{max-width:var(--measure); margin:0 auto;}
.post-back{
  display:inline-flex; align-items:center; gap:7px; text-decoration:none;
  font-size:13px; font-weight:600; color:var(--text-onDark-soft);
  transition:color .15s ease;
}
.post-back:hover{color:var(--accent-2);}
.post-meta-head{margin-top:22px;}
.post-title{
  font-size:clamp(28px, 3.4vw, 38px); font-weight:800; line-height:1.15;
  margin-top:12px; letter-spacing:-0.032em; color:#fff;
}
.post-lede{
  margin-top:14px; font-size:17px; line-height:1.55; color:var(--text-onDark-soft);
}
/* Rule closes the header block and opens the body. */
.post-body{
  margin-top:26px; padding-top:26px; border-top:1px solid var(--border-dark);
}
.post-body > *:first-child{margin-top:0;}
.post-body h2{
  font-size:21px; font-weight:800; margin-top:38px; letter-spacing:-0.025em;
  line-height:1.25; color:#fff;
}
.post-body h3{font-size:17px; font-weight:700; margin-top:26px; line-height:1.35; color:#fff;}
/* Body copy sits a touch below pure white so headings keep their contrast. */
.post-body p{margin-top:17px; font-size:16px; line-height:1.68; color:#CFCCC3;}
.post-body ul, .post-body ol{
  margin-top:17px; padding-left:22px; color:#CFCCC3;
  font-size:16px; line-height:1.68;
}
.post-body li{margin-top:7px;}
.post-body li::marker{color:var(--accent-2);}
.post-body a{color:var(--accent-2); text-decoration:underline; text-underline-offset:3px; text-decoration-thickness:1.5px;}
.post-body a:hover{color:#fff;}
.post-body strong{font-weight:700; color:#fff;}
.post-body hr{
  margin:44px 0 0; border:none; border-top:1px solid var(--border-dark);
}
.post-body img{display:block; width:100%; height:auto; border-radius:var(--radius-md); margin-top:30px; border:1px solid var(--border-dark); cursor:zoom-in;}
.post-body figure{margin:30px 0 0;}
.post-body figcaption{margin-top:11px; font-size:13.5px; color:var(--text-onDark-soft); text-align:center;}

/* Blog image lightbox */
.blog-lightbox{border:none; padding:0; background:transparent; max-width:none; max-height:none;}
.blog-lightbox::backdrop{background:rgba(15,15,13,0.9); backdrop-filter:blur(6px); cursor:zoom-out;}
.blog-lightbox img{display:block; width:min(94vw, 2048px); height:auto; border-radius:var(--radius-md); cursor:zoom-out;}
.post-body code{
  font-family:'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, monospace; font-size:14.5px;
  background:rgba(237,234,226,0.07); border:1px solid var(--border-dark);
  padding:2px 6px; border-radius:5px; color:#E6E3DA;
}
.post-body pre{
  margin-top:26px; padding:20px 22px; border-radius:var(--radius-md);
  background:var(--card-dark); border:1px solid var(--border-dark);
  color:var(--text-onDark); overflow-x:auto;
  font-size:14.5px; line-height:1.65;
}
.post-body pre code{background:none; border:none; padding:0; color:inherit;}
.post-body blockquote{
  margin:30px 0 0; padding:2px 0 2px 22px;
  border-left:3px solid var(--accent-2);
  font-size:17px; line-height:1.6; color:var(--text-onDark-soft); font-style:italic;
}

/* ---------- Heart ---------- */
/* An outline heart under a one-line prompt. Unclicked, the inside is dark with
   an inset shadow so it reads as pressed in; clicked, it fills with the brand
   accent. */
.post-heart{
  margin-top:44px; display:flex; flex-direction:column; align-items:center; gap:6px; text-align:center;
}
.heart-prompt{font-size:15px; color:var(--text-onDark-soft);}
.heart-btn{padding:4px 8px; cursor:pointer; background:none; border:none; color:var(--text-onDark-soft);}
.heart-svg{display:block; width:34px; height:34px; transition:transform .2s ease;}
.heart-stop-start{stop-color:var(--accent);}
.heart-stop-end{stop-color:var(--accent-2);}
.heart-fill{fill:#22221E; filter:url(#heartInset);}
.heart-outline{fill:var(--text-onDark-soft); transition:fill .15s ease;}
.heart-btn:hover:not(:disabled) .heart-svg{transform:scale(1.12);}
.heart-btn:hover:not(:disabled) .heart-outline{fill:var(--accent-2);}
.heart-btn[aria-pressed="true"]{cursor:default;}
.heart-btn[aria-pressed="true"] .heart-svg{animation:heart-pop .35s ease;}
.heart-btn[aria-pressed="true"] .heart-fill{fill:url(#heartGradient); filter:none;}
.heart-btn[aria-pressed="true"] .heart-outline{fill:url(#heartGradient);}
@keyframes heart-pop{
  0%{transform:scale(1);}
  45%{transform:scale(1.28);}
  100%{transform:scale(1);}
}

/* ---------- Share ---------- */
/* A quiet pill under the heart: the native share sheet, or copy link where
   the browser has none. */
.post-share{margin-top:18px; display:flex; justify-content:center;}
.share-btn{
  display:inline-flex; align-items:center; gap:8px; cursor:pointer;
  padding:8px 16px; border-radius:999px;
  background:rgba(237,234,226,0.04); border:1px solid var(--border-dark);
  font-family:'Bricolage Grotesque', system-ui, sans-serif; font-size:13.5px; font-weight:600; color:var(--text-onDark-soft);
  transition:color .15s ease, border-color .15s ease;
}
.share-btn:hover{color:var(--accent-2); border-color:rgba(182,211,52,0.45);}
.share-svg{
  width:16px; height:16px; fill:none; stroke:currentColor;
  stroke-width:2; stroke-linecap:round; stroke-linejoin:round;
}

/* ---------- Previous / next ---------- */
/* Two columns, older on the left and newer on the right. An empty slot holds
   its column so a lone link never drifts to the wrong side. */
.post-nav{
  margin-top:44px; padding-top:26px; border-top:1px solid var(--border-dark);
  display:grid; grid-template-columns:1fr 1fr; gap:16px;
}
.post-nav-link{
  display:flex; flex-direction:column; gap:6px; text-decoration:none;
  padding:16px 18px; border-radius:var(--radius-md);
  background:var(--card-dark); border:1px solid var(--border-dark);
  transition:border-color .15s ease;
}
.post-nav-link:hover{border-color:rgba(182,211,52,0.45);}
.post-nav-next{text-align:right;}
.post-nav-label{
  font-family:'JetBrains Mono', ui-monospace, monospace; font-size:11.5px; font-weight:500;
  letter-spacing:0.07em; text-transform:uppercase; color:var(--accent-2);
}
.post-nav-title{
  font-family:'Bricolage Grotesque', system-ui, sans-serif; font-size:15.5px; font-weight:700;
  line-height:1.35; color:#fff;
}

/* ---------- Closing CTA ---------- */
.post-cta{
  margin-top:46px; padding:28px 26px; border-radius:var(--radius-lg);
  background:var(--card-dark); border:1px solid var(--border-dark);
  text-align:center;
}
.post-cta h3{font-size:19px; font-weight:800; color:#fff;}
.post-cta p{margin-top:9px; font-size:14.5px; line-height:1.6; color:var(--text-onDark-soft); max-width:400px; margin-left:auto; margin-right:auto;}
.post-cta .nav-cta{display:inline-block; margin-top:18px;}

/* ---------- Footer ---------- */
footer{
  border-top:1px solid var(--border-dark);
  color:var(--text-onDark); padding:36px 0; margin-top:auto;
}
.footer-inner{
  display:flex; justify-content:space-between; align-items:center;
  font-size:15px; color:var(--text-onDark-soft); flex-wrap:wrap; gap:16px;
}
.footer-inner a{color:var(--text-onDark-soft); text-underline-offset:3px;}
.footer-inner a:hover{color:var(--accent);
}

@media (max-width:640px){
  .nav-inner{padding:12px 16px;}
  .brand{font-size:18px; gap:8px;}
  .nav-cta{padding:8px 14px; font-size:13px;}
  .post-card{padding:20px;}
  .post-nav{grid-template-columns:1fr;}
  .post-nav-empty{display:none;}
}
@media (min-width:1500px){
  :root{--maxw:1360px;}
}
@media (prefers-reduced-motion: reduce){
  html{scroll-behavior:auto;}
  *{transition:none !important; animation:none !important;}
}
a:focus-visible, button:focus-visible{outline:2px solid var(--accent); outline-offset:2px;}