/* =========================================================
   INEVITABLE — Ghost theme stylesheet
   Mirrors andrewsridhar.com design tokens exactly.
   Add post-page typography on top.
   ========================================================= */

*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}

:root{
  --bg:#0B0A0F;--bgr:#131218;--bgc:#1A191F;--bgw:#110F0D;
  --t:#F0EBE3;--td:#9A9498;--tm:#6B6569;--ts:#B0ACAA;
  --a:#C17F59;--al:#D4A07A;--ag:rgba(193,127,89,.08);--ab:rgba(193,127,89,.15);
  --br:rgba(240,235,227,.06);
  --sf:'Cormorant Garamond',Georgia,serif;
  --ss:'Outfit',-apple-system,sans-serif;
  --mw:1200px;
  --mw-narrow:720px;
  --sp:clamp(64px,9vw,110px)
}

html{scroll-behavior:smooth}
body{font-family:var(--ss);font-weight:300;color:var(--t);background:var(--bg);line-height:1.7;font-size:17px;-webkit-font-smoothing:antialiased;overflow-x:hidden}
a{color:var(--al);text-decoration:none;transition:color .2s}
a:hover{color:var(--t)}

.c{max-width:var(--mw);margin:0 auto;padding:0 clamp(24px,5vw,48px)}
.c-narrow{max-width:var(--mw-narrow)}

/* ===== NAV (matches index.html) ===== */
nav{position:fixed;top:0;left:0;right:0;z-index:100;background:rgba(11,10,15,.88);backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);border-bottom:1px solid var(--br)}
.ni{max-width:var(--mw);margin:0 auto;padding:0 clamp(24px,5vw,48px);display:flex;align-items:center;justify-content:space-between;height:72px}
.nn{font-family:var(--sf);font-size:20px;font-weight:500;color:var(--t);letter-spacing:.02em}
.nl{display:flex;align-items:center;gap:24px}
.nl a{font-size:13px;font-weight:400;letter-spacing:.06em;text-transform:uppercase;color:var(--td)}
.nl a:hover{color:var(--t)}
.nc{color:var(--a)!important;border:1px solid rgba(193,127,89,.4);padding:8px 18px;border-radius:4px;font-weight:500!important}
.nc:hover{background:var(--ag);border-color:var(--a);color:var(--al)!important}
.nh{display:none;flex-direction:column;gap:5px;cursor:pointer;padding:4px}
.nh span{display:block;width:24px;height:1.5px;background:var(--td)}

/* ===== MAIN offset for fixed nav ===== */
main{padding-top:72px}

/* ===== SECTIONS + shared type (matches index.html) ===== */
section{padding:var(--sp) 0}
.sl{font-size:13px;font-weight:500;letter-spacing:.18em;text-transform:uppercase;color:var(--a);margin-bottom:20px}
.sh{font-family:var(--sf);font-size:clamp(30px,4.2vw,52px);font-weight:400;line-height:1.14;letter-spacing:-.01em;color:var(--t);margin-bottom:24px}
.ss{font-size:18px;color:var(--td);max-width:620px;line-height:1.75}

/* ===== BUTTONS ===== */
.btn{display:inline-flex;align-items:center;gap:8px;font-family:var(--ss);font-size:14px;font-weight:500;letter-spacing:.04em;text-transform:uppercase;padding:16px 32px;border-radius:4px;transition:all .3s;cursor:pointer;border:none}
.bp{background:var(--a);color:var(--bg)}
.bp:hover{background:var(--al);color:var(--bg);transform:translateY(-1px)}
.bg{background:transparent;color:var(--td);border:1px solid rgba(240,235,227,.15)}
.bg:hover{color:var(--t);border-color:rgba(240,235,227,.35);transform:translateY(-1px)}

/* ===== BLOG CARD (matches index.html exactly) ===== */
.blog-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:24px;margin-top:32px}
.blog-card{background:var(--bgr);border:1px solid var(--br);border-radius:8px;padding:28px;transition:border-color .3s;display:block;color:inherit}
.blog-card:hover{border-color:var(--ab);color:inherit}
.blog-tags{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:14px}
.blog-tag{font-size:11px;font-weight:600;letter-spacing:.1em;text-transform:uppercase;color:var(--a)}
.blog-tag-secondary{font-size:11px;font-weight:400;letter-spacing:.08em;text-transform:uppercase;color:var(--tm)}
.blog-card h4{font-family:var(--sf);font-size:21px;font-weight:500;color:var(--t);margin-bottom:10px;line-height:1.3}
.blog-card p{font-size:15px;color:var(--tm);line-height:1.6;margin-bottom:14px}
.rl{font-size:13px;font-weight:500;letter-spacing:.05em;text-transform:uppercase;color:var(--a)}

/* ===== POST PAGE ===== */
.post{padding:48px 0 0}

.post-header{padding:32px 0 40px;text-align:left}
.post-meta{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:20px}
.post-title{font-family:var(--sf);font-size:clamp(34px,5vw,60px);font-weight:500;line-height:1.1;letter-spacing:-.015em;color:var(--t);margin-bottom:20px}
.post-subtitle{font-family:var(--sf);font-size:clamp(19px,2.2vw,24px);font-weight:400;font-style:italic;line-height:1.5;color:var(--td);margin-bottom:28px;max-width:620px}
.post-byline{font-size:13px;color:var(--tm);letter-spacing:.04em;display:flex;gap:12px;align-items:center;flex-wrap:wrap}
.post-byline time{color:var(--td)}
.post-byline-sep{opacity:.5}

.post-feature-image{margin:0 0 48px;border-radius:8px;overflow:hidden;border:1px solid var(--br)}
.post-feature-image img{width:100%;height:auto;display:block}
.post-feature-image figcaption{font-size:13px;color:var(--tm);padding:12px 16px;background:var(--bgr);font-style:italic;text-align:center}

/* ---- PROSE (post body typography) ---- */
.post-content{font-size:18px;line-height:1.8;color:var(--td);padding-bottom:60px}
.post-content > *{max-width:100%}

.post-content p{margin-bottom:1.3em;color:var(--td)}
.post-content p strong{color:var(--t);font-weight:500}
.post-content p em{color:var(--ts);font-style:italic}

.post-content h2,.post-content h3,.post-content h4{font-family:var(--sf);color:var(--t);font-weight:500;letter-spacing:-.01em;margin:2em 0 .6em;line-height:1.22}
.post-content h2{font-size:clamp(26px,3.2vw,34px)}
.post-content h3{font-size:clamp(22px,2.6vw,27px)}
.post-content h4{font-size:clamp(19px,2.2vw,22px);font-weight:600}

.post-content ul,.post-content ol{margin:0 0 1.4em 1.3em;color:var(--td)}
.post-content li{margin-bottom:.5em;padding-left:6px}
.post-content ul li::marker{color:var(--a)}
.post-content ol li::marker{color:var(--a);font-weight:500}

.post-content a{color:var(--al);border-bottom:1px solid rgba(193,127,89,.3);transition:color .2s,border-color .2s}
.post-content a:hover{color:var(--t);border-bottom-color:var(--t)}

.post-content blockquote{font-family:var(--sf);font-size:clamp(20px,2.3vw,24px);font-style:italic;line-height:1.55;color:var(--t);border-left:2px solid var(--a);padding:8px 0 8px 28px;margin:1.8em 0;background:rgba(193,127,89,.03);border-radius:0 6px 6px 0}
.post-content blockquote p{color:var(--t)}
.post-content blockquote p:last-child{margin-bottom:0}
.post-content blockquote cite,.post-content blockquote .kg-quote-attribution{display:block;font-family:var(--ss);font-size:13px;color:var(--tm);font-style:normal;letter-spacing:.04em;margin-top:10px}

.post-content hr{border:none;border-top:1px solid var(--br);margin:2.4em auto;width:30%}

.post-content img,.post-content figure img{max-width:100%;height:auto;border-radius:8px;margin:1.4em auto;display:block;border:1px solid var(--br)}
.post-content figure{margin:1.8em 0}
.post-content figcaption{font-size:13px;color:var(--tm);text-align:center;margin-top:10px;font-style:italic}

/* Ghost Koenig editor — wide and full-bleed image cards */
.post-content .kg-width-wide{margin-left:calc(50% - 50vw + clamp(24px,5vw,48px));margin-right:calc(50% - 50vw + clamp(24px,5vw,48px));max-width:calc(100vw - clamp(48px,10vw,96px));width:calc(100vw - clamp(48px,10vw,96px))}
.post-content .kg-width-full{margin-left:calc(50% - 50vw);margin-right:calc(50% - 50vw);max-width:100vw;width:100vw}
.post-content .kg-width-wide img,.post-content .kg-width-full img{border-radius:0;border-left:none;border-right:none}

.post-content code{font-family:'SF Mono',Menlo,Consolas,monospace;font-size:.88em;background:var(--bgc);color:var(--al);padding:2px 7px;border-radius:4px;border:1px solid var(--br)}
.post-content pre{background:var(--bgc);border:1px solid var(--br);border-radius:8px;padding:20px 24px;margin:1.6em 0;overflow-x:auto;font-size:14px;line-height:1.6}
.post-content pre code{background:none;padding:0;border:none;color:var(--ts)}

.post-content kbd{font-family:var(--ss);font-size:.85em;background:var(--bgc);border:1px solid var(--br);border-bottom-width:2px;padding:2px 8px;border-radius:4px;color:var(--t)}

.post-content .kg-bookmark-card{border:1px solid var(--br);border-radius:8px;background:var(--bgr);padding:20px;margin:1.6em 0;display:flex;gap:20px;text-decoration:none}
.post-content .kg-bookmark-card:hover{border-color:var(--ab)}

/* Newsletter block at bottom of post */
.post-footer{padding-bottom:32px}
.post-newsletter{background:var(--bgr);border:1px solid var(--br);border-left:3px solid var(--a);border-radius:0 8px 8px 0;padding:clamp(32px,4vw,48px);margin:0 0 20px;text-align:center}
.post-newsletter-kicker{font-size:13px;font-weight:500;letter-spacing:.18em;text-transform:uppercase;color:var(--a);margin-bottom:14px}
.post-newsletter h3{font-family:var(--sf);font-size:clamp(24px,3vw,32px);font-weight:500;color:var(--t);margin-bottom:12px;line-height:1.25}
.post-newsletter p{font-size:16px;color:var(--td);line-height:1.7;max-width:480px;margin:0 auto 24px}

/* ===== RELATED POSTS ===== */
.related-posts{padding:48px 0 var(--sp);background:var(--bgr);border-top:1px solid var(--br)}

/* ===== BLOG INDEX hero spacing ===== */
.blog-index{padding:60px 0 var(--sp)}

/* ===== PAGINATION (Ghost default helper) ===== */
.pagination{display:flex;justify-content:space-between;align-items:center;margin-top:56px;padding-top:28px;border-top:1px solid var(--br);font-size:13px;letter-spacing:.06em;text-transform:uppercase;color:var(--tm)}
.pagination a{color:var(--a);font-weight:500}
.pagination a:hover{color:var(--al)}
.pagination .page-number{color:var(--td)}

/* ===== FOOTER (matches index.html) ===== */
footer{border-top:1px solid var(--br);padding:48px 0}
.fi{display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:24px}
.fl{font-family:var(--sf);font-size:18px;font-weight:500;color:var(--t)}
.fk{display:flex;gap:28px}
.fk a{font-size:13px;color:var(--tm);letter-spacing:.04em}
.fk a:hover{color:var(--t)}
.fc{width:100%;font-size:12px;color:var(--tm);margin-top:24px;opacity:.6}

/* ===== REVEAL ANIMATION (matches index.html) ===== */
.rv{opacity:0;transform:translateY(24px);transition:opacity .7s ease,transform .7s ease}
.rv.v{opacity:1;transform:translateY(0)}

/* ===== RESPONSIVE ===== */
@media(max-width:960px){
  .blog-grid{grid-template-columns:1fr 1fr}
}
@media(max-width:680px){
  .nl{display:none}
  .nl.open{display:flex;flex-direction:column;position:absolute;top:72px;left:0;right:0;background:rgba(11,10,15,.97);backdrop-filter:blur(20px);padding:24px;gap:20px;border-bottom:1px solid var(--br)}
  .nh{display:flex}
  .fi{flex-direction:column;text-align:center}
  .blog-grid{grid-template-columns:1fr}
  .post-content{font-size:17px}
}