/* Shared styling for all Blog / "Thinking" article posts (single.php).
   Extracted from the original karnot-blog-*.html pages, which were
   identical except for text content and the hero photo — verified via
   diff before extracting (only real difference was the hero background
   image and the .lede/.cycle-line classes, which use the same rule and
   are merged into one selector below). */
:root{
  --navy-card:#0B0F17;
  --hairline:rgba(232,184,75,0.14);
  --gold-bright:#F2D37A;
  --ink:#E9E7E0;
  --ink-dim:#AAB2C2;
  --ink-faint:#7C8598;
  --ease:cubic-bezier(.16,1,.3,1);
}
body.single-post{
  margin:0;padding:0;
  background:var(--navy);
  color:var(--ink);
  font-family:'Inter',-apple-system,sans-serif;
  line-height:1.7;
  -webkit-font-smoothing:antialiased;
}
body.single-post *{ box-sizing:border-box; }
body.single-post a{ color:inherit; text-decoration:none; }
body.single-post img{ max-width:100%; display:block; }
body.single-post ::selection{ background:rgba(232,184,75,0.32); color:#fff; }
@media (prefers-reduced-motion: reduce){
  body.single-post{ scroll-behavior:auto; }
  body.single-post *{ animation-duration:0.001ms !important; transition-duration:0.001ms !important; }
}

/* ---------- reading progress ---------- */
.progress-track{ position:fixed;top:0;left:0;right:0;height:3px;background:rgba(255,255,255,0.05);z-index:19; }
.progress-fill{ height:100%;width:0%;background:linear-gradient(90deg,var(--gold),var(--gold-bright));box-shadow:0 0 8px rgba(232,184,75,0.55);transition:width 60ms linear; }

/* ---------- hero ---------- */
.hero-media{
  position:relative;overflow:hidden;height:440px;
  background-image: var(--hero-photo, none);
  background-size:cover;background-position:center;
  background-color:var(--navy-card);
}
.hero-media::after{
  content:'';position:absolute;inset:0;
  background:linear-gradient(180deg, rgba(1,3,7,0.15) 0%, rgba(1,3,7,0.6) 70%, rgba(1,3,7,0.95) 100%);
}
.hero-content{ position:absolute;left:0;right:0;bottom:0;z-index:2;padding:36px 40px 34px; }
.hero-eyebrow{
  font-weight:600;font-size:12px;letter-spacing:.24em;text-transform:uppercase;
  color:var(--gold);margin-bottom:14px;display:flex;align-items:center;gap:10px;
}
.hero-eyebrow::before{ content:'';width:22px;height:1px;background:var(--gold); }
.hero-title{
  font-family:'Playfair Display',serif;font-weight:600;font-size:clamp(26px,4vw,40px);line-height:1.2;
  color:var(--frost);text-shadow:0 2px 20px rgba(0,0,0,.4);max-width:820px;
}

/* ---------- breadcrumb ---------- */
.breadcrumb{ max-width:1180px;margin:0 auto;padding:18px 32px 0;font-size:12.5px;color:var(--ink-faint);letter-spacing:.01em; }
.breadcrumb a{ color:var(--ink-faint);transition:color .2s ease; }
.breadcrumb a:hover{ color:var(--gold-bright); }
.breadcrumb .sep{ margin:0 8px;opacity:.5; }
.breadcrumb .current{ color:var(--ink-dim); }

/* ---------- byline / meta ---------- */
.meta-bar{
  max-width:1180px;margin:26px auto 0;padding:0 32px 22px;
  display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:16px;
  border-bottom:1px solid var(--hairline);
}
.meta-facts{ font-size:12.5px;color:var(--ink-faint);line-height:1.5; }
.meta-facts strong{ color:var(--ink-dim);font-weight:500; }
.meta-actions{ display:flex;align-items:center;gap:10px; }
.icon-btn{
  width:38px;height:38px;border-radius:50%;
  display:flex;align-items:center;justify-content:center;
  background:rgba(255,255,255,0.04);border:1px solid rgba(255,255,255,0.09);
  cursor:pointer;transition:all .25s ease;color:var(--ink-dim);position:relative;
}
.icon-btn:hover{ background:rgba(232,184,75,0.12);border-color:var(--gold);color:var(--gold-bright);transform:translateY(-2px); }
.icon-btn.active{ background:rgba(232,184,75,0.18);border-color:var(--gold);color:var(--gold-bright); }
.icon-btn svg{ width:16px;height:16px; }
.tooltip{
  position:absolute;bottom:120%;left:50%;transform:translateX(-50%);
  background:var(--navy-card);color:var(--ink);font-size:11px;
  padding:5px 9px;border-radius:5px;white-space:nowrap;
  opacity:0;pointer-events:none;transition:opacity .2s ease;border:1px solid var(--hairline);
}
.icon-btn:hover .tooltip{ opacity:1; }

/* ---------- layout ---------- */
.layout{ max-width:1180px;margin:0 auto;padding:44px 32px 0;display:grid;grid-template-columns:250px 1fr;gap:56px;align-items:start; }
@media (max-width:900px){
  .layout{ grid-template-columns:1fr;gap:32px; }
  .sidebar{ order:2; }
}

/* ---------- sidebar ---------- */
.sidebar{ position:sticky;top:90px; }
.sidebar-label{
  font-weight:700;font-size:12.5px;color:var(--gold-bright);letter-spacing:.05em;
  text-transform:uppercase;padding-bottom:12px;margin-bottom:14px;
  border-bottom:2px solid var(--gold);display:inline-block;
}
.toc-heading{ font-size:11px;font-weight:600;text-transform:uppercase;letter-spacing:.1em;color:var(--ink-faint);margin:18px 0 10px; }
.toc-list{ list-style:none;margin:0;padding:0; }
.toc-list li{ margin-bottom:2px; }
.toc-list a{
  display:block;font-size:13.5px;color:var(--ink-dim);padding:8px 10px;border-radius:4px;
  border-left:2px solid transparent;transition:all .25s ease;line-height:1.4;
}
.toc-list a:hover{ color:var(--ink);background:rgba(255,255,255,0.03); }
.toc-list a.active{ color:var(--gold-bright);border-left-color:var(--gold);background:rgba(232,184,75,0.06);font-weight:500; }
.sidebar-share{ margin-top:28px;padding-top:22px;border-top:1px solid var(--hairline); }
.sidebar-share-row{ display:flex;gap:8px;margin-top:12px; }

/* ---------- article ---------- */
.article h2{
  font-family:'Playfair Display',serif;font-weight:600;font-size:24px;color:var(--gold-bright);
  margin:44px 0 16px;scroll-margin-top:90px;
}
.article > h2:first-child{ margin-top:0; }
.article p{ font-size:16.5px;color:var(--ink);opacity:.92;margin-bottom:16px;max-width:70ch; }
.lede,
.cycle-line{
  font-family:'Playfair Display',serif;font-style:italic;font-weight:600;font-size:18px;color:var(--gold-bright);
  margin:20px 0;padding:16px 22px;background:rgba(232,184,75,0.07);
  border-left:2px solid var(--gold);
  max-width:none;
}

/* ---------- inline CTA ---------- */
.inline-cta{
  margin:44px 0;padding:32px 36px;
  background:linear-gradient(135deg, rgba(232,184,75,0.09), rgba(232,184,75,0.02));
  border:1px solid rgba(232,184,75,0.22);
  display:flex;align-items:center;justify-content:space-between;gap:24px;flex-wrap:wrap;
}
.inline-cta-text h3{ font-family:'Playfair Display',serif;font-size:19px;font-weight:600;color:var(--frost);margin-bottom:6px; }
.inline-cta-text p{ font-size:13.5px;color:var(--ink-dim);margin:0;max-width:44ch; }

/* ---------- references ---------- */
.references{ margin-top:52px;padding-top:26px;border-top:1px solid var(--hairline); }
.references-title{ font-size:12px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--ink-faint);margin-bottom:12px; }
.references ol{ padding-left:20px;color:var(--ink-faint);font-size:12.5px;line-height:1.9; }
.disclaimer{ margin-top:22px;font-size:12.5px;color:var(--gold);opacity:.85;font-style:italic; }

/* ---------- tags ---------- */
.tags{ display:flex;flex-wrap:wrap;gap:8px;margin:32px 0; }
.tag{
  font-size:12px;font-weight:500;color:var(--ink-dim);background:rgba(255,255,255,0.04);
  border:1px solid rgba(255,255,255,0.08);padding:6px 14px;border-radius:999px;transition:all .25s ease;
}
.tag:hover{ border-color:var(--gold);color:var(--gold-bright); }

/* ---------- related ---------- */
.related-section{ max-width:1180px;margin:64px auto 0;padding:48px 32px 0;border-top:1px solid var(--hairline); }
.related-heading{ font-family:'Playfair Display',serif;font-size:24px;font-weight:600;color:var(--frost);margin-bottom:26px; }
.related-grid{ display:grid;grid-template-columns:repeat(3,1fr);gap:24px; }
@media (max-width:860px){ .related-grid{ grid-template-columns:1fr; } }
.related-card{
  background:var(--navy-card);border:1px solid var(--hairline);overflow:hidden;
  transition:transform .3s var(--ease),border-color .3s ease;display:block;
}
.related-card:hover{ transform:translateY(-5px);border-color:var(--gold); }
.related-thumb{ height:130px;background:linear-gradient(150deg,var(--navy-card),var(--navy));position:relative;overflow:hidden;background-size:cover;background-position:center; }
.related-thumb::after{ content:'';position:absolute;inset:0;background:radial-gradient(circle at 30% 20%, rgba(232,184,75,0.16), transparent 60%); }
.related-cat{
  position:absolute;top:12px;left:12px;z-index:2;font-size:10px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;
  color:var(--navy);background:var(--gold-bright);padding:4px 10px;border-radius:999px;
}
.related-body{ padding:18px 20px 22px; }
.related-title{ font-family:'Playfair Display',serif;font-size:16px;font-weight:600;color:var(--ink);line-height:1.4;margin-bottom:10px; }
.related-meta{ font-size:11.5px;color:var(--ink-faint); }

/* ---------- newsletter ---------- */
.newsletter{ max-width:1180px;margin:64px auto 0;padding:0 32px; }
.newsletter-box{
  background:linear-gradient(135deg,var(--navy-card),var(--navy));border:1px solid var(--hairline);
  padding:44px 48px;display:flex;align-items:center;justify-content:space-between;gap:32px;flex-wrap:wrap;
  position:relative;overflow:hidden;
}
.newsletter-box::before{ content:'';position:absolute;top:-60%;right:-10%;width:340px;height:340px;background:radial-gradient(circle, rgba(232,184,75,0.13), transparent 65%); }
.newsletter-text{ position:relative;z-index:1; }
.newsletter-text h3{ font-family:'Playfair Display',serif;font-size:22px;font-weight:600;color:var(--frost);margin-bottom:8px; }
.newsletter-text p{ font-size:13.5px;color:var(--ink-dim);max-width:42ch; }
.newsletter-form{ display:flex;gap:10px;position:relative;z-index:1; }
.newsletter-form input{
  font-size:14px;background:rgba(255,255,255,0.05);border:1px solid rgba(255,255,255,0.12);
  color:var(--ink);padding:12px 16px;border-radius:6px;width:230px;outline:none;transition:border-color .25s ease;
}
.newsletter-form input:focus{ border-color:var(--gold); }
.newsletter-form input::placeholder{ color:var(--ink-faint); }

/* ---------- floating share / back-to-top ---------- */
.float-share{ position:fixed;left:24px;top:50%;transform:translateY(-50%);display:flex;flex-direction:column;gap:10px;z-index:18; }
@media (max-width:1180px){ .float-share{ display:none; } }
@media (max-width:640px){
  .hero-media{ height:320px; }
  .hero-content{ padding:24px 20px 26px; }
  .breadcrumb{ padding:14px 20px 0; }
  .meta-bar{ padding:0 20px 18px;margin-top:18px; }
  .layout{ padding:32px 20px 0; }
  .article h2{ font-size:21px;margin:34px 0 14px; }
  .article p{ font-size:15.5px;max-width:none; }
  .inline-cta{ padding:24px 22px;margin:32px 0; }
  .related-section{ padding:36px 20px 0; }
  .newsletter{ padding:0 20px; }
  .newsletter-box{ padding:30px 24px; }
  .newsletter-form{ width:100%;flex-wrap:wrap; }
  .newsletter-form input{ width:100%;flex:1 1 auto;min-width:0; }
  .newsletter-form .btn-gold{ width:100%;text-align:center; }
}
.back-to-top{
  position:fixed;bottom:28px;right:28px;z-index:18;width:46px;height:46px;border-radius:50%;
  background:var(--navy-card);border:1px solid var(--gold);color:var(--gold-bright);
  display:flex;align-items:center;justify-content:center;cursor:pointer;
  opacity:0;pointer-events:none;transform:translateY(10px);transition:all .35s var(--ease);
  box-shadow:0 6px 20px rgba(0,0,0,.4);
}
.back-to-top.show{ opacity:1;pointer-events:auto;transform:translateY(0); }
.back-to-top:hover{ background:var(--gold);color:var(--navy); }

/* ---------- toast ---------- */
.toast{
  position:fixed;bottom:28px;left:50%;transform:translateX(-50%) translateY(20px);
  background:var(--navy-card);border:1px solid var(--gold);color:var(--ink);
  font-size:13.5px;padding:12px 22px;border-radius:8px;
  opacity:0;pointer-events:none;transition:all .35s var(--ease);z-index:200;
}
.toast.show{ opacity:1;transform:translateX(-50%) translateY(0); }

:focus-visible{ outline:2px solid var(--gold);outline-offset:3px; }