/* ============================================================
   KOOKYWEB — blog styles (loads after styles.css)
   Light theme, matches the main site. No WebGL/GSAP on blog pages.
   ============================================================ */
body { background: var(--ink); color: var(--bone); }

/* simple header for blog pages */
.bhead { position: sticky; top: 0; z-index: 50; display: flex; align-items: center; justify-content: space-between;
  padding: 16px var(--gutter); background: rgba(241,241,246,0.82); backdrop-filter: blur(14px); border-bottom: 1px solid var(--line); }
.bhead__links { display: flex; gap: 8px; align-items: center; }
.bhead__links a { font-family: var(--mono); font-size: 11px; letter-spacing: 0.1em; text-transform: uppercase; padding: 9px 13px; border-radius: 999px; color: rgba(12,12,20,0.7); transition: color 0.3s, background 0.3s; }
.bhead__links a:hover, .bhead__links a[aria-current] { color: #fff; background: var(--acid); }
@media (max-width: 680px) { .bhead__links a.hide-sm { display: none; } }

/* blog index */
.bhero { padding: clamp(70px, 12vh, 130px) var(--gutter) 40px; width: min(1100px, 100%); margin-inline: auto; }
.bhero .eyebrow { color: var(--acid); }
.bhero h1 { font-family: var(--display); font-weight: 800; font-size: clamp(2.6rem, 7vw, 5rem); line-height: 0.95; letter-spacing: -0.04em; margin: 14px 0 18px; }
.bhero p { font-size: clamp(1rem, 1.4vw, 1.2rem); max-width: 620px; color: rgba(12,12,20,0.62); font-weight: 300; }

.bgrid { width: min(1100px, 100% - var(--gutter) * 2); margin: 10px auto clamp(80px,12vh,140px); display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: 22px; }
.pcard { display: flex; flex-direction: column; background: var(--ink-2); border: 1px solid var(--line); border-radius: 20px; overflow: hidden; transition: transform 0.4s var(--ease), box-shadow 0.4s var(--ease), border-color 0.4s; }
.pcard:hover { transform: translateY(-4px); box-shadow: 0 24px 60px rgba(20,22,70,0.1); border-color: rgba(47,59,255,0.4); }
.pcard__img { aspect-ratio: 16/10; display: grid; place-items: center; position: relative; overflow: hidden; }
.pcard__img span { font-family: var(--display); font-weight: 800; font-size: 2.6rem; color: #fff; mix-blend-mode: overlay; letter-spacing: -0.04em; }
.pcard__body { padding: 22px; display: flex; flex-direction: column; gap: 12px; flex: 1; }
.pcard__meta { display: flex; gap: 10px; font-family: var(--mono); font-size: 10px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--acid); }
.pcard__meta .dot { color: var(--ash); }
.pcard h2 { font-family: var(--display); font-weight: 700; font-size: 1.35rem; line-height: 1.12; letter-spacing: -0.02em; }
.pcard p { font-size: 14.5px; color: rgba(12,12,20,0.6); font-weight: 300; line-height: 1.55; flex: 1; }
.pcard__foot { font-family: var(--mono); font-size: 10px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--ash); display: flex; justify-content: space-between; }

/* article */
.article { width: min(720px, 100% - var(--gutter) * 2); margin-inline: auto; padding-top: clamp(40px, 8vh, 90px); }
.crumb { font-family: var(--mono); font-size: 11px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--ash); margin-bottom: 22px; }
.crumb a { color: var(--acid); }
.article__cat { font-family: var(--mono); font-size: 11px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--acid); }
.article h1 { font-family: var(--display); font-weight: 800; font-size: clamp(2rem, 5vw, 3.4rem); line-height: 1.02; letter-spacing: -0.035em; margin: 14px 0 20px; }
.article__meta { display: flex; flex-wrap: wrap; gap: 16px; align-items: center; font-family: var(--mono); font-size: 11px; letter-spacing: 0.06em; text-transform: uppercase; color: var(--ash); padding-bottom: 26px; border-bottom: 1px solid var(--line); }
.article__cover { width: 100%; aspect-ratio: 16/8; border-radius: 20px; margin: 30px 0; display: grid; place-items: center; }
.article__cover span { font-family: var(--display); font-weight: 800; font-size: clamp(2rem,5vw,3.4rem); color: #fff; mix-blend-mode: overlay; letter-spacing: -0.04em; }
.prose { font-size: clamp(1.02rem, 1.15vw, 1.15rem); line-height: 1.72; color: rgba(12,12,20,0.82); font-weight: 400; }
.prose > p { margin: 0 0 22px; }
.prose h2 { font-family: var(--display); font-weight: 700; font-size: clamp(1.5rem, 3vw, 2rem); letter-spacing: -0.025em; line-height: 1.1; margin: 42px 0 14px; color: var(--bone); }
.prose h3 { font-family: var(--display); font-weight: 700; font-size: 1.25rem; letter-spacing: -0.02em; margin: 30px 0 10px; color: var(--bone); }
.prose ul, .prose ol { margin: 0 0 22px; padding-left: 22px; display: flex; flex-direction: column; gap: 9px; }
.prose li { line-height: 1.6; }
.prose a { color: var(--acid); text-decoration: underline; text-underline-offset: 3px; }
.prose strong { font-weight: 600; color: var(--bone); }
.prose blockquote { margin: 26px 0; padding: 18px 22px; border-left: 3px solid var(--acid); background: var(--ink-2); border-radius: 0 12px 12px 0; font-size: 1.1rem; }
.prose table { width: 100%; border-collapse: collapse; margin: 22px 0; font-size: 14.5px; }
.prose th, .prose td { text-align: left; padding: 11px 12px; border-bottom: 1px solid var(--line); }
.prose th { font-family: var(--mono); font-size: 10.5px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--ash); }
.prose td strong { color: var(--acid); }
.prose .key { background: var(--ink-2); border: 1px solid var(--line); border-radius: 14px; padding: 20px 22px; margin: 26px 0; }
.prose .key h3 { margin-top: 0; }

.cta-box { margin: 46px 0; padding: 30px; border-radius: 20px; background: linear-gradient(135deg, #2f3bff 0%, #5b52ff 100%); color: #fff; text-align: center; }
.cta-box h3 { font-family: var(--display); font-weight: 800; font-size: 1.5rem; letter-spacing: -0.02em; margin-bottom: 8px; color: #fff; }
.cta-box p { color: rgba(255,255,255,0.85); margin-bottom: 18px; font-weight: 300; }
.cta-box .btn { background: #fff; color: var(--ink); }
.cta-box .btn:hover { background: var(--ink); color: #fff; }

.related { width: min(1100px, 100% - var(--gutter) * 2); margin: 20px auto clamp(80px,12vh,120px); }
.related > .eyebrow { color: var(--acid); font-family: var(--mono); font-size: 11px; letter-spacing: 0.12em; text-transform: uppercase; margin-bottom: 18px; display: block; }
.related__grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 18px; }

.bfoot { border-top: 1px solid var(--line); padding: 40px var(--gutter); display: flex; justify-content: space-between; flex-wrap: wrap; gap: 16px; align-items: center; font-family: var(--mono); font-size: 11px; letter-spacing: 0.06em; text-transform: uppercase; color: var(--ash); }
.bfoot a { color: rgba(12,12,20,0.7); }
.bfoot a:hover { color: var(--acid); }