/* ============================================================================
   James blog — shared stylesheet
   One cached file for the blog index and every post. Mirrors the site design
   system (tokens/nav/footer copied verbatim from the main pages) and adds the
   long-form article + listing components. Neo-brutalist: hard offset shadows,
   no border-radius, Silkscreen labels, rust accents.
   ========================================================================== */

/* --- design tokens (verbatim from index.html / privacy.html :root) --------- */
:root{
  --cream:#FAF9F7; --sand:#F5F0E8; --paper:#F1EAE0;
  --rust:#C2522D; --rust-deep:#A8421F; --ink:#1A1A18; --ink-soft:#57534d;
  --blush:#E8A08C; --line:rgba(26,26,24,.12); --line-strong:rgba(26,26,24,.20);
  --surface-dark:#201E1B; --maxw:1140px; --measure:760px;
}

/* --- base / reset (from the main pages) ------------------------------------ */
*{box-sizing:border-box;}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%;overflow-x:hidden;}
body{margin:0;background:var(--cream);color:var(--ink);font-family:"Inter",system-ui,sans-serif;font-size:17px;line-height:1.6;-webkit-font-smoothing:antialiased;overflow-x:hidden;width:100%;}
h1,h2,h3,h4{font-family:"Bricolage Grotesque",system-ui,sans-serif;margin:0;line-height:1.1;letter-spacing:-.02em;}
p{margin:0;}
a{color:inherit;text-decoration:none;}
img{max-width:100%;height:auto;}
.wrap{max-width:var(--maxw);margin:0 auto;padding:0 28px;}
.eyebrow{font-family:"Silkscreen",monospace;font-weight:400;font-size:.68rem;letter-spacing:.14em;text-transform:uppercase;color:var(--rust);}
:focus-visible{outline:3px solid var(--rust);outline-offset:3px;border-radius:2px;}

/* --- nav (verbatim from privacy.html) -------------------------------------- */
header.nav{position:sticky;top:0;z-index:50;background:rgba(250,249,247,.86);backdrop-filter:blur(8px);border-bottom:1px solid var(--line);}
.nav-inner{display:flex;align-items:center;justify-content:space-between;height:70px;}
.brand{display:flex;align-items:center;gap:11px;}
.brand .mark{width:34px;height:40px;}
.brand .word{font-family:"Silkscreen",monospace;font-weight:700;font-size:1.15rem;letter-spacing:.02em;}
.nav-links{display:flex;align-items:center;gap:30px;}
.nav-links a{font-size:.95rem;color:var(--ink-soft);font-weight:500;}
.nav-links a:hover{color:var(--ink);}
.nav-links a[aria-current="page"]{color:var(--ink);}
.nav-cta{font-family:"Inter";font-weight:600;font-size:.9rem;padding:9px 16px;border:2px solid var(--ink);background:var(--ink);color:var(--cream);box-shadow:3px 3px 0 var(--rust);}
.nav-cta:hover{background:var(--rust);box-shadow:3px 3px 0 var(--ink);}

/* --- breadcrumb ------------------------------------------------------------ */
.crumbs{font-family:"Silkscreen",monospace;font-size:.58rem;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-soft);}
.crumbs a{color:var(--ink-soft);}
.crumbs a:hover{color:var(--rust);}
.crumbs .sep{margin:0 8px;color:var(--line-strong);}
.crumbs [aria-current="page"]{color:var(--rust);}

/* ============================================================================
   POST — article header + body
   ========================================================================== */
.post-head{background:var(--sand);border-bottom:1px solid var(--line);padding:54px 0 46px;}
.post-head .wrap{max-width:var(--measure);}
.post-head .crumbs{margin-bottom:20px;}
.post-head h1{font-weight:800;font-size:clamp(2.1rem,5vw,3.4rem);margin-top:14px;}
.post-meta{margin-top:20px;display:flex;flex-wrap:wrap;align-items:center;gap:10px;font-family:"Silkscreen",monospace;font-size:.6rem;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-soft);}
.post-meta .sep{color:var(--line-strong);}
.post-meta .author{color:var(--ink);}
.post-head .intro{margin-top:22px;max-width:64ch;color:var(--ink-soft);font-size:1.12rem;line-height:1.6;}
.post-tags{margin-top:22px;display:flex;flex-wrap:wrap;gap:8px;}
.tag{font-family:"Silkscreen",monospace;font-size:.52rem;letter-spacing:.08em;text-transform:uppercase;color:var(--ink-soft);background:var(--cream);border:1px solid var(--line-strong);padding:5px 9px;}

/* hero image under the header */
.post-hero{margin:0;background:var(--sand);}
.post-hero .wrap{max-width:var(--measure);padding-top:34px;}
.post-hero img{display:block;width:100%;border:2px solid var(--ink);box-shadow:6px 6px 0 var(--ink);}
.post-hero figcaption{margin-top:14px;font-size:.86rem;color:var(--ink-soft);}

/* article body */
.post{padding:52px 0 40px;}
.post .wrap{max-width:var(--measure);}
.post p{margin:18px 0;color:#3a3833;font-size:1.06rem;line-height:1.75;}
.post h2{font-size:clamp(1.5rem,3vw,1.9rem);font-weight:700;margin:52px 0 10px;padding-top:26px;border-top:2px solid var(--ink);}
.post h2:first-child{margin-top:0;padding-top:0;border-top:0;}
.post h3{font-size:1.22rem;font-weight:700;margin:34px 0 8px;color:var(--ink);}
.post ul,.post ol{margin:18px 0;padding-left:24px;color:#3a3833;font-size:1.06rem;line-height:1.7;}
.post li{margin:9px 0;}
.post li::marker{color:var(--rust);}
.post a{color:var(--rust);text-decoration:underline;text-underline-offset:2px;}
.post a:hover{color:var(--rust-deep);}
.post strong{color:var(--ink);font-weight:600;}
.post hr{border:0;border-top:2px solid var(--line-strong);margin:44px 0;}
.post figure{margin:34px 0;}
.post figure img{display:block;width:100%;border:2px solid var(--ink);box-shadow:5px 5px 0 var(--ink);}
.post figcaption{margin-top:12px;font-size:.86rem;color:var(--ink-soft);text-align:center;}

/* blockquote / pull-quote */
.post blockquote{margin:30px 0;padding:6px 0 6px 24px;border-left:4px solid var(--rust);font-family:"Bricolage Grotesque",system-ui,sans-serif;font-weight:500;font-size:1.32rem;line-height:1.4;letter-spacing:-.01em;color:var(--ink);}
.post blockquote p{margin:0;color:var(--ink);font-size:inherit;line-height:inherit;}
.post blockquote cite{display:block;margin-top:12px;font-family:"Silkscreen",monospace;font-size:.6rem;font-style:normal;letter-spacing:.08em;text-transform:uppercase;color:var(--ink-soft);}

/* inline + block code */
.post code{font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;font-size:.9em;background:var(--paper);border:1px solid var(--line);padding:2px 6px;}
.post pre{margin:26px 0;background:var(--surface-dark);color:#EDE7DE;border:2px solid var(--ink);box-shadow:5px 5px 0 var(--ink);padding:18px 20px;overflow-x:auto;font-size:.92rem;line-height:1.6;}
.post pre code{font-size:.92rem;background:none;border:0;padding:0;color:inherit;}

/* tables */
.table-wrap{margin:28px 0;overflow-x:auto;border:2px solid var(--ink);box-shadow:5px 5px 0 var(--ink);}
.post table{width:100%;border-collapse:collapse;font-size:.98rem;background:var(--cream);}
.post thead th{font-family:"Silkscreen",monospace;font-size:.56rem;letter-spacing:.08em;text-transform:uppercase;text-align:left;background:var(--ink);color:var(--cream);padding:12px 14px;}
.post tbody td{padding:12px 14px;border-top:1px solid var(--line);color:#3a3833;vertical-align:top;}
.post tbody tr:nth-child(even) td{background:var(--sand);}

/* TL;DR / key takeaways — answer-first block for AEO */
.tldr{margin:0 0 40px;background:var(--cream);border:2px solid var(--ink);box-shadow:5px 5px 0 var(--rust);padding:22px 24px;}
.tldr .lab{font-family:"Silkscreen",monospace;font-size:.6rem;letter-spacing:.12em;text-transform:uppercase;color:var(--rust);}
.tldr ul{margin:14px 0 0;padding-left:20px;color:var(--ink);font-size:1rem;line-height:1.6;}
.tldr li{margin:8px 0;}
.tldr li::marker{color:var(--rust);}
.tldr>p{margin:12px 0 0;color:var(--ink);font-size:1rem;}

/* table of contents */
.toc{margin:0 0 40px;background:var(--sand);border:1px solid var(--line-strong);padding:18px 22px;}
.toc .lab{font-family:"Silkscreen",monospace;font-size:.56rem;letter-spacing:.12em;text-transform:uppercase;color:var(--ink-soft);}
.toc ol{margin:12px 0 0;padding-left:20px;font-size:.98rem;}
.toc li{margin:6px 0;}
.toc a{color:var(--ink-soft);}
.toc a:hover{color:var(--rust);}

/* callout (from privacy.html) */
.callout{margin:26px 0;background:var(--cream);border:2px solid var(--ink);box-shadow:4px 4px 0 var(--ink);padding:16px 18px;}
.callout p{margin:0;color:var(--ink);}

/* FAQ — visible Q&A that mirrors the FAQPage JSON-LD */
.faq{margin:52px 0 0;padding-top:26px;border-top:2px solid var(--ink);}
.faq>h2{border:0;padding:0;margin:0 0 8px;font-size:clamp(1.5rem,3vw,1.9rem);font-weight:700;}
.faq-item{border-bottom:1px solid var(--line);padding:22px 0;}
.faq-item:last-child{border-bottom:0;}
.faq-q{font-family:"Bricolage Grotesque",system-ui,sans-serif;font-weight:700;font-size:1.14rem;letter-spacing:-.01em;color:var(--ink);margin:0 0 8px;}
.faq-a{margin:0;color:#3a3833;font-size:1.04rem;line-height:1.7;}
.faq-a a{color:var(--rust);text-decoration:underline;text-underline-offset:2px;}

/* end-of-post CTA (dark card, from privacy.html .contact-card) */
.post-cta{margin:48px 0 0;background:var(--surface-dark);color:var(--cream);border:2px solid var(--ink);box-shadow:6px 6px 0 var(--rust);padding:30px 28px;}
.post-cta .lab{font-family:"Silkscreen",monospace;font-size:.58rem;letter-spacing:.12em;text-transform:uppercase;color:var(--blush);}
.post-cta h2{border:0;padding:0;margin:12px 0 0;font-size:1.7rem;font-weight:800;color:var(--cream);}
.post-cta p{margin:12px 0 0;color:rgba(250,249,247,.72);font-size:1.02rem;}
.post-cta .btn-row{margin-top:22px;}
.post-cta .btn{display:inline-block;font-family:"Inter";font-weight:600;font-size:.98rem;padding:12px 22px;border:2px solid var(--cream);background:var(--rust);color:var(--cream);box-shadow:4px 4px 0 var(--cream);}
.post-cta .btn:hover{background:var(--cream);color:var(--ink);box-shadow:4px 4px 0 var(--blush);}

/* related posts */
.related{padding:56px 0 20px;}
.related .wrap{max-width:var(--measure);}
.related .lab{font-family:"Silkscreen",monospace;font-size:.6rem;letter-spacing:.12em;text-transform:uppercase;color:var(--rust);}
.related-grid{margin-top:22px;display:grid;grid-template-columns:1fr 1fr;gap:20px;}
.related-card{display:block;background:var(--cream);border:2px solid var(--ink);box-shadow:4px 4px 0 var(--ink);padding:18px 20px;transition:transform .12s ease,box-shadow .12s ease;}
.related-card:hover{transform:translate(-2px,-2px);box-shadow:6px 6px 0 var(--rust);}
.related-card .k{font-family:"Silkscreen",monospace;font-size:.5rem;letter-spacing:.08em;text-transform:uppercase;color:var(--rust);}
.related-card h3{margin:10px 0 0;font-size:1.1rem;font-weight:700;}
.related-card p{margin:8px 0 0;color:var(--ink-soft);font-size:.92rem;line-height:1.5;}

/* ============================================================================
   BLOG INDEX — hero + card grid
   ========================================================================== */
.blog-hero{background:var(--sand);border-bottom:1px solid var(--line);padding:70px 0 56px;}
.blog-hero .crumbs{margin-bottom:20px;}
.blog-hero h1{font-weight:800;font-size:clamp(2.4rem,6vw,4rem);}
.blog-hero .intro{margin-top:20px;max-width:56ch;color:var(--ink-soft);font-size:1.15rem;}
.blog-list{padding:60px 0 90px;}
.post-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:28px;}
.post-card{display:flex;flex-direction:column;background:var(--cream);border:2px solid var(--ink);box-shadow:5px 5px 0 var(--ink);overflow:hidden;transition:transform .12s ease,box-shadow .12s ease;}
.post-card:hover{transform:translate(-3px,-3px);box-shadow:8px 8px 0 var(--rust);}
.post-card .thumb{display:block;aspect-ratio:16/9;background:var(--paper);border-bottom:2px solid var(--ink);overflow:hidden;}
.post-card .thumb img{width:100%;height:100%;object-fit:cover;}
.post-card .body{padding:20px 22px 24px;display:flex;flex-direction:column;flex:1;}
.post-card .k{font-family:"Silkscreen",monospace;font-size:.52rem;letter-spacing:.08em;text-transform:uppercase;color:var(--rust);}
.post-card h2{margin:12px 0 0;font-size:1.32rem;font-weight:700;line-height:1.15;}
.post-card .excerpt{margin:10px 0 0;color:var(--ink-soft);font-size:.96rem;line-height:1.55;flex:1;}
.post-card .card-meta{margin-top:18px;font-family:"Silkscreen",monospace;font-size:.52rem;letter-spacing:.08em;text-transform:uppercase;color:var(--ink-soft);}
.blog-empty{border:2px dashed var(--line-strong);padding:40px;text-align:center;color:var(--ink-soft);}

/* ============================================================================
   FOOTER (verbatim from privacy.html)
   ========================================================================== */
footer{background:var(--ink);color:rgba(250,249,247,.6);padding:44px 0;}
.foot-inner{display:flex;justify-content:space-between;align-items:center;gap:20px;flex-wrap:wrap;}
.foot-inner .brand .word{color:var(--cream);}
.foot-links{display:flex;gap:24px;font-size:.9rem;flex-wrap:wrap;}
.foot-links a:hover{color:var(--cream);}
.sprite-wrap svg, .brand .mark svg{display:block;width:100%;height:auto;}

/* ============================================================================
   COOKIE-CONSENT styles (verbatim from privacy.html GA block)
   ========================================================================== */
#ga-consent{position:fixed;left:16px;right:16px;bottom:16px;z-index:9999;max-width:560px;margin:0 auto;
  background:#FAF9F7;color:#1A1A18;border:2px solid #1A1A18;box-shadow:4px 4px 0 #1A1A18;padding:18px 20px;
  font-family:"Inter",system-ui,sans-serif;font-size:14px;line-height:1.5;display:none;}
#ga-consent.show{display:block;}
#ga-consent p{margin:0 0 14px;}
#ga-consent a{color:#C2522D;text-decoration:underline;}
#ga-consent .ga-row{display:flex;gap:10px;flex-wrap:wrap;}
#ga-consent button{font-family:"Inter",sans-serif;font-weight:600;font-size:14px;padding:10px 18px;
  border:2px solid #1A1A18;cursor:pointer;}
#ga-consent .ga-accept{background:#C2522D;color:#FAF9F7;box-shadow:3px 3px 0 #1A1A18;}
#ga-consent .ga-decline{background:transparent;color:#1A1A18;box-shadow:3px 3px 0 rgba(26,26,24,.18);}
#ga-consent button:hover{transform:translate(1px,1px);}

/* ============================================================================
   RESPONSIVE — single breakpoint mirrors the site (880px), plus small-phone
   ========================================================================== */
@media(max-width:880px){
  .nav-links{display:none;}
  .wrap{padding:0 22px;}
  .related-grid{grid-template-columns:1fr;}
  .post-head{padding:42px 0 34px;}
  .post{padding:40px 0 32px;}
  .post blockquote{font-size:1.16rem;}
  .post-cta{padding:24px 22px;}
}
@media(max-width:520px){
  .wrap{padding:0 18px;}
  .post p,.post ul,.post ol{font-size:1.02rem;}
  .post-hero img,.post figure img{box-shadow:4px 4px 0 var(--ink);}
}
@media(prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important;}html{scroll-behavior:auto;}}