/* ==========================================================================
   BLOG POST LAYOUT (2.4.0)
   Loads only on single posts. No title band: the page opens straight into

     [ contents 25% ] [ article 50% ] [ sidebar 25% ]

   Tablets: article + sidebar, contents folded above the text.
   Phones: one column.
   Every text colour below is paired with its own background so nothing
   blends in.
   ========================================================================== */

.postwrap{background:var(--tint-2);padding:24px 0 64px}

.blog-grid{display:grid;gap:32px;grid-template-columns:minmax(0,1fr);align-items:start}
.col-left{display:none}
.col-main{min-width:0}
.colstack{display:flex;flex-direction:column;gap:18px}

/* ------------------------------------------------- post header ------ */
.posthead .crumb{margin:0}
.posttitle{font-family:var(--head);font-weight:700;color:var(--heading);font-size:clamp(30px,2.6vw,46px);line-height:1.12;letter-spacing:-.015em;margin:16px 0 0;text-wrap:balance;scroll-margin-top:calc(var(--headh) + 24px)}

/* Category, published and updated on one line */
.postline{display:flex;flex-wrap:wrap;align-items:center;gap:10px 18px;margin-top:18px}
.postcats{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:8px}
.postcats a{display:inline-flex;align-items:center;min-height:32px;padding:0 14px;border-radius:999px;background:var(--heading);color:#fff;border:2px solid var(--accent);font-size:13px;font-weight:700;letter-spacing:.01em;transition:background .15s,color .15s}
.postcats a:hover{background:var(--accent);color:var(--dark)}
.postdates{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:6px 18px}
.postdates li{display:inline-flex;align-items:center;gap:7px;font-size:14px;color:var(--ink2)}
.postdates time{font-weight:600;color:var(--ink)}
.postline svg,.pa-read svg{width:16px;height:16px;flex:none;fill:none;stroke:var(--brand);stroke-width:2;stroke-linecap:round;stroke-linejoin:round}

/* Author photo, name, reading time */
.postauthor{display:flex;align-items:center;gap:14px;margin-top:18px;padding:14px 0 0;border-top:1px solid var(--line)}
.pa-photo{flex:none;display:block;width:52px;height:52px;border-radius:50%;padding:2px;background:linear-gradient(135deg,var(--accent),var(--brand))}
.pa-photo img{width:48px;height:48px;border-radius:50%;object-fit:cover;border:2px solid #fff;display:block}
.pa-body{min-width:0;display:flex;flex-wrap:wrap;align-items:center;gap:4px 18px}
.pa-name{margin:0;font-size:15.5px;font-weight:500;color:var(--ink2)}
.pa-name a,.pa-name strong{color:var(--heading);font-weight:700}
.pa-name a:hover{text-decoration:underline;text-underline-offset:3px}
.pa-read{margin:0;display:inline-flex;align-items:center;gap:7px;font-size:14px;font-weight:600;color:var(--ink2)}

/* Featured image */
.postimg{margin:24px 0 0;border-radius:18px;overflow:hidden;background:var(--fill);aspect-ratio:16/9;box-shadow:0 26px 50px -34px rgba(13,57,34,.6)}
.postimg img{width:100%;height:100%;object-fit:cover;display:block}

/* ------------------------------------------- table of contents ------ */
.toc-card{background:#fff;border:1px solid rgba(13,57,34,.1);border-radius:18px;padding:20px 16px 16px;box-shadow:0 16px 36px -30px rgba(13,57,34,.5)}
.toc-head{margin:0 0 10px 4px;font-family:var(--head);font-size:17px;font-weight:700;color:var(--heading)}
.toc-progress{height:4px;border-radius:4px;background:var(--icon-bg);margin:0 4px 12px;overflow:hidden}
.toc-progress span{display:block;height:100%;width:0;border-radius:4px;background:linear-gradient(90deg,var(--brand),var(--accent));transition:width .1s linear}
.toc{list-style:none;margin:0;padding:0}
.toc li{margin:0}
.toc a{display:block;padding:8px 12px;border-left:2px solid var(--line);font-size:14px;line-height:1.45;color:var(--ink2);text-decoration:none;transition:color .15s,background .15s,border-color .15s}
.toc a:hover{color:var(--heading);background:var(--tint-2);border-left-color:var(--brand-200)}
.toc a.active{color:var(--heading);font-weight:700;background:var(--brand-50);border-left-color:var(--brand)}
/* The H1 entry on top */
.toc .toc-h1{margin-bottom:6px;padding-bottom:6px;border-bottom:1px solid var(--line)}
.toc .toc-h1 a{border-left-color:transparent;font-family:var(--head);font-size:15px;font-weight:700;color:var(--heading)}
.toc .toc-h1 a.active{border-left-color:var(--accent)}
.col-left .toc{max-height:calc(100vh - var(--headh-s) - 160px);overflow-y:auto;overscroll-behavior:contain;scrollbar-width:thin}

/* Contents folded, for tablets and phones */
.toc-fold{margin-top:24px;background:#fff;border:1px solid rgba(13,57,34,.12);border-radius:16px}
.toc-fold summary{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:15px 18px;cursor:pointer;list-style:none;font-family:var(--head);font-size:16.5px;font-weight:700;color:var(--heading)}
.toc-fold summary::-webkit-details-marker{display:none}
.toc-fold summary::after{content:"";width:9px;height:9px;border-right:2px solid var(--heading);border-bottom:2px solid var(--heading);transform:rotate(45deg);transition:transform .2s}
.toc-fold[open] summary::after{transform:rotate(-135deg)}
.toc-fold .toc{padding:0 14px 14px}

/* ---------------------------------------------------- article ------ */
.article{margin-top:32px;font-size:17.5px;line-height:1.78;color:var(--body)}
.article > *:first-child{margin-top:0}
.article h2{font-family:var(--head);font-size:clamp(24px,1.9vw,30px);line-height:1.2;font-weight:700;color:var(--heading);letter-spacing:-.01em;margin:44px 0 12px;scroll-margin-top:calc(var(--headh) + 24px)}
.article h3{font-family:var(--head);font-size:21px;line-height:1.3;font-weight:700;color:var(--heading);margin:30px 0 8px;scroll-margin-top:calc(var(--headh) + 24px)}
.article h4{font-size:18px;color:var(--ink);margin:24px 0 6px}
.article p{margin:16px 0}
.article ul,.article ol{margin:16px 0;padding-left:22px}
.article li{margin:9px 0;line-height:1.65}
.article li::marker{color:var(--brand);font-weight:700}
.article strong{color:var(--ink)}
.article img{border-radius:14px;margin:24px 0}
.article a{color:var(--brand-ink);font-weight:600;text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:3px}
.article a:hover{color:var(--heading);text-decoration-thickness:2px}
.article blockquote{margin:28px 0;padding:20px 24px;border-left:4px solid var(--brand);border-radius:0 14px 14px 0;background:var(--tint-2);color:var(--ink2);font-family:var(--head);font-size:19px;line-height:1.55}
.article blockquote p{margin:0}
.article figure{margin:26px 0}
.article figcaption{font-size:13.5px;color:var(--body);margin-top:8px;text-align:center}
.article table{width:100%;border-collapse:collapse;margin:26px 0;font-size:15px;display:block;overflow-x:auto}
.article th,.article td{border:1px solid var(--line2);padding:12px 14px;text-align:left;vertical-align:top}
.article thead th,.article tr:first-child th{background:var(--dark);color:#fff;font-weight:700;border-color:var(--dark)}
.article tbody tr:nth-child(even) td{background:var(--tint-2)}
.article code{background:var(--tint-2);color:var(--heading);padding:2px 6px;border-radius:6px;font-size:.9em}
.article hr{border:0;height:1px;background:var(--line2);margin:36px 0}

/* Tags */
.posttags{display:flex;flex-wrap:wrap;align-items:center;gap:8px;margin-top:36px;padding-top:22px;border-top:1px solid var(--line)}
.pt-label{font-size:14px;font-weight:700;color:var(--ink);margin-right:4px}
.posttags .chip{margin:0;font-size:13.5px;padding:6px 13px;background:#fff;color:var(--ink2);border:1px solid var(--line2);border-radius:999px}
.posttags .chip:hover{border-color:var(--brand);color:var(--heading);background:var(--brand-50)}

/* --------------------------------------------------- author box ------ */
.authorbox{display:grid;grid-template-columns:auto minmax(0,1fr);gap:22px;align-items:start;margin-top:36px;padding:28px;border-radius:20px;background:var(--tint-2);border:1px solid var(--brand-200)}
.ab-photo{width:92px;height:92px;border-radius:50%;padding:3px;background:linear-gradient(135deg,var(--accent),var(--brand))}
.ab-photo img{width:86px;height:86px;border-radius:50%;object-fit:cover;border:3px solid #fff;display:block}
.ab-kicker{margin:0;font-size:13.5px;font-weight:600;color:var(--brand)}
.ab-name{margin:2px 0 0;font-family:var(--head);font-size:23px;font-weight:700;line-height:1.2}
.ab-name a{color:var(--heading)}
.ab-name a:hover{text-decoration:underline;text-underline-offset:4px}
.ab-bio{margin:10px 0 0;font-size:15.5px;line-height:1.7;color:var(--ink2)}
.ab-links{display:flex;flex-wrap:wrap;align-items:center;gap:12px 20px;margin-top:16px}
.ab-all{font-size:15px;font-weight:700;color:var(--heading);text-decoration:underline;text-underline-offset:3px}
.ab-all:hover{color:var(--brand)}
@media (max-width:600px){
  .authorbox{grid-template-columns:1fr;justify-items:center;text-align:center;padding:24px 20px}
  .ab-links{justify-content:center}
}

/* ------------------------------------------------------ sidebar ------ */
.sidecta{position:relative;overflow:hidden;padding:26px 24px;border-radius:20px;background:linear-gradient(145deg,var(--dark) 0%,var(--dark-deep) 100%);color:var(--on-dark);box-shadow:0 26px 50px -30px rgba(13,57,34,.8)}
.sidecta::before{content:"";position:absolute;width:260px;height:260px;right:-120px;top:-120px;border-radius:50%;background:radial-gradient(circle,rgba(180,232,48,.22),transparent 65%);pointer-events:none}
.sidecta > *{position:relative}
.sc-title{margin:0;font-family:var(--head);font-size:22px;line-height:1.25;font-weight:700;color:#fff}
.sc-text{margin:10px 0 0;font-size:15px;line-height:1.65;color:var(--on-dark)}
.sidecta .btn{margin-top:18px;background:var(--accent);color:var(--dark);border-color:var(--accent)}
.sidecta .btn:hover{background:#c4f04a;border-color:#c4f04a;color:var(--dark)}

.sidecard{padding:22px 20px;border-radius:20px;background:#fff;border:1px solid rgba(13,57,34,.1);box-shadow:0 16px 36px -30px rgba(13,57,34,.5)}
.side-head{margin:0 0 12px;font-family:var(--head);font-size:18px;font-weight:700;color:var(--heading)}
.poppost{display:flex;gap:12px;align-items:center;padding:12px 0;border-top:1px solid var(--line);color:var(--ink)}
.poppost:first-of-type{border-top:0;padding-top:0}
.pthumb{width:64px;height:52px;border-radius:10px;overflow:hidden;background:var(--icon-bg);flex:none}
.pthumb img{width:100%;height:100%;object-fit:cover}
.ptext{display:flex;flex-direction:column;gap:3px;min-width:0}
.ptitle{font-size:14px;font-weight:700;line-height:1.4;color:var(--ink);display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
.pdate{font-size:12.5px;color:var(--body)}
.poppost:hover .ptitle{color:var(--brand);text-decoration:underline;text-underline-offset:3px}

/* ------------------------------------------ three clear columns ------ */
/* Each column is its own panel: contents card, article sheet, sidebar.
   Left and right scroll on their own when taller than the screen. */
.col-main{background:#fff;border:1px solid rgba(13,57,34,.1);border-radius:22px;padding:24px 18px 28px;box-shadow:0 20px 44px -36px rgba(13,57,34,.55)}
.side-scroll{scrollbar-width:thin;scrollbar-color:var(--brand-200) transparent}
.side-scroll::-webkit-scrollbar,.col-left .toc::-webkit-scrollbar{width:6px}
.side-scroll::-webkit-scrollbar-thumb,.col-left .toc::-webkit-scrollbar-thumb{background:var(--brand-200);border-radius:6px}
.col-left .toc{scrollbar-color:var(--brand-200) transparent}

/* ---------------------------------------------------- breakpoints ------ */
@media (min-width:600px){
  .col-main{padding:32px 32px 36px}
}
@media (min-width:768px){
  .postwrap{padding:32px 0 80px}
  .blog-grid{grid-template-columns:minmax(0,1fr) 260px;gap:20px}
  .col-right{position:sticky;top:calc(var(--headh-s) + 20px)}
  .side-scroll{max-height:calc(100vh - var(--headh-s) - 40px);overflow-y:auto;overscroll-behavior:contain;padding:2px 6px 16px 2px;margin-right:-6px}
}
@media (min-width:1200px){
  /* Slim contents and sidebar, the article takes all the rest */
  .blog-grid{grid-template-columns:220px minmax(0,1fr) 250px;gap:20px}
  .col-left{display:block;position:sticky;top:calc(var(--headh-s) + 20px)}
  .toc-fold{display:none}
  .col-main{padding:32px 34px 40px}
}
@media (min-width:1600px){
  .blog-grid{grid-template-columns:240px minmax(0,1fr) 270px;gap:24px}
  .col-main{padding:40px 44px 48px}
}

/* Cards in a scrolling column never shrink or get cut off */
.side-scroll > *,.colstack > *{flex-shrink:0}

/* Author details from the user profile */
.pa-title{display:block;margin-top:1px;font-size:13px;font-weight:500;color:var(--ink2)}
.ab-title{margin:4px 0 0;font-size:14.5px;font-weight:600;color:var(--brand)}
.ab-li{gap:8px}
.ab-li svg{width:16px;height:16px;flex:none}
/* Wider reading column: comfortable line length */
.article{max-width:none}


/* Author photo and name link to the author page */
a.ab-photo,a.pa-photo{display:block;transition:transform .2s}
a.ab-photo:hover,a.pa-photo:hover{transform:scale(1.04)}
.ab-name a{color:var(--heading);text-decoration:none}
.ab-name a:hover{text-decoration:underline;text-underline-offset:4px}
.pa-name a{text-decoration:underline;text-decoration-color:var(--brand-200);text-underline-offset:3px}
.pa-name a:hover{text-decoration-color:var(--brand)}
.toc a{font-size:13.5px}