/* certanta.com blog: loaded after /assets/site.css on /blog/ pages only.
   Index pages stay obsidian; articles sit on a sand "paper" sheet for long reading. */

/* ---- index + category pages ---- */
.list{max-width:860px;margin:0 auto;padding:72px 24px 96px}
.list h1{font-family:var(--font-serif);font-size:clamp(2.1rem,4.4vw,2.9rem);margin-bottom:12px}
.list .sub{color:var(--ob-text);font-size:1.04rem;max-width:60ch;margin-bottom:40px}
.list .sub a{color:var(--accent-jade)}
.list .crumb{margin-bottom:14px}
.list .card{display:block;padding:26px 28px;margin-bottom:16px;transition:border-color .2s,transform .2s}
.list .card:hover{border-color:rgba(0,210,133,.45);transform:translateY(-2px)}
.list .card h2{font-family:var(--font-serif);font-size:1.4rem;margin:8px 0 8px;color:#fff}
.list .card p{color:var(--ob-text);font-size:.97rem}
.list .card .date{font-family:var(--font-mono);font-size:.76rem;letter-spacing:.06em;color:var(--ob-copper)}
.list .card-cat{border-left:3px solid var(--accent-jade)}
.cat-head{font-family:var(--font-mono);font-size:.76rem;letter-spacing:.12em;color:var(--ob-muted);margin:40px 0 12px}
.crumb{font-family:var(--font-mono);font-size:.76rem;letter-spacing:.08em;color:var(--ob-muted)}
.crumb a:hover{color:var(--accent-jade)}

/* ---- article: sand paper on obsidian ---- */
.post{--paper:#F5F5F0;--ink:#1D2320;--ink-soft:#3A4540;--ink-muted:#5F6A65;--rule:#DEDDD3;
  max-width:820px;margin:48px auto 80px;padding:56px 64px 60px;background:var(--paper);color:var(--ink);
  border-radius:16px;box-shadow:0 40px 100px -40px rgba(0,0,0,.9),0 0 0 1px rgba(255,255,255,.04);line-height:1.7}
.post .crumb{color:var(--ink-muted)}
.post .crumb a{color:inherit;text-decoration:none}
.post .crumb a:hover{color:var(--accent-jade-text)}
.post h1{font-family:var(--font-serif);font-size:clamp(2rem,4.2vw,2.85rem);line-height:1.12;margin:16px 0 16px;color:#0B0D10;font-weight:700}
.post h2{font-family:var(--font-serif);font-size:1.55rem;margin:42px 0 14px;color:#0B0D10}
.post h3{font-family:var(--font-display);font-size:1.12rem;margin:28px 0 10px;color:#0B0D10;letter-spacing:0}
.byline{display:flex;flex-wrap:wrap;gap:8px 18px;align-items:center;font-size:.88rem;color:var(--ink-muted);margin-bottom:36px;padding-bottom:22px;border-bottom:1px solid var(--rule)}
.byline .mono{font-family:var(--font-mono);font-size:.76rem;letter-spacing:.05em}
.byline a{font-weight:600;color:var(--ink)}
.byline a:hover{color:var(--accent-jade-text)}
.post p{margin:0 0 18px;color:var(--ink-soft);font-size:1.04rem}
.post ul,.post ol{margin:0 0 18px 22px;color:var(--ink-soft);font-size:1.04rem}
.post li{margin-bottom:8px}
.post li::marker{color:var(--accent-copper)}
.post strong,.post li strong{color:var(--ink)}
.post a:not(.btn){color:var(--accent-jade-text);text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:3px}
.post a:not(.btn):hover{color:#005C44}
.post :focus-visible{outline-color:var(--accent-copper)}
.post .callout{background:#FFFFFF;border:1px solid var(--rule);border-left:3px solid var(--accent-jade);border-radius:10px;padding:18px 20px;margin:28px 0;font-size:1rem;color:var(--ink-soft)}
.post blockquote{margin:26px 0;padding:6px 0 6px 22px;border-left:3px solid var(--accent-copper)}
.post blockquote p{font-family:var(--font-serif);font-style:italic;font-size:1.14rem;line-height:1.55;color:var(--ink)}
.post .fine{font-size:.86rem;color:var(--ink-muted);font-style:italic;margin-top:36px}

/* FAQ accordion (both the .faq wrapper and details.faq forms) */
.post .faq{margin-top:8px}
.post :is(.faq details,details.faq){background:none;border:0;border-bottom:1px solid var(--rule);border-radius:0;box-shadow:none;padding:0;margin:0}
.post .faq details:first-of-type,.post details.faq:first-of-type{border-top:1px solid var(--rule)}
.post :is(.faq details,details.faq) summary{list-style:none;cursor:pointer;padding:16px 32px 16px 0;position:relative;font-weight:600;color:var(--ink);font-size:1.03rem;line-height:1.45}
.post :is(.faq details,details.faq) summary::-webkit-details-marker{display:none}
.post :is(.faq details,details.faq) summary::after{content:"";position:absolute;right:6px;top:50%;width:9px;height:9px;margin-top:-6px;
  border-right:2px solid var(--accent-copper);border-bottom:2px solid var(--accent-copper);transform:rotate(45deg);transition:transform .18s ease}
.post :is(.faq details,details.faq)[open] summary::after{transform:rotate(-135deg);margin-top:-2px}
.post :is(.faq details,details.faq) > p{margin:0 0 18px;color:var(--ink-muted);font-size:.99rem}

/* closing call to action: a piece of obsidian inside the paper */
.post .cta{background:var(--ob-base);color:var(--ob-sand);border-radius:12px;padding:30px;margin-top:46px;
  background-image:radial-gradient(420px 200px at 100% 0,rgba(0,210,133,.14),transparent 70%),radial-gradient(380px 200px at 0 100%,rgba(224,123,46,.12),transparent 70%)}
.post .cta h2{color:#fff;margin:0 0 8px;font-size:1.45rem}
.post .cta p{color:var(--ob-text);margin:0 0 18px;font-size:1rem}

/* blog footer keeps its short single-row link list */
footer .foot{align-items:center}
footer .foot-links{display:flex;flex-wrap:wrap;gap:8px 22px}
footer .foot-links a{margin:0}

@media(max-width:760px){
  .post{margin:0 auto;padding:36px 22px 44px;border-radius:0;box-shadow:none}
  .post h2{font-size:1.38rem}
}
@media(prefers-reduced-motion:reduce){
  .post :is(.faq details,details.faq) summary::after{transition:none}
  .list .card:hover{transform:none}
}