/*
Theme Name: Creators Book Blog
Theme URI: https://creatorsbook.in
Author: Creators Book
Description: Custom WordPress theme for the Creators Book blog, matching the design system (colors, type, cursor, reveal animations) of the main creatorsbook.in agency website.
Version: 1.1.0
Requires at least: 6.0
Requires PHP: 7.4
Text Domain: creatorsbook
*/

:root{
  --void:#1a0b1f;
  --smoke:#2b0a3d;
  --smoke-2:#451a58;
  --bone:#fff9e6;
  --fog:#ffffff;
  --pink:#ff2d95;
  --pink-dim:#6a1748;
  --lime:#ffd24d;
  --lime-dim:#715730;
  --ease:cubic-bezier(.16,1,.3,1);
}
*{margin:0;padding:0;box-sizing:border-box;}
html{scroll-behavior:smooth; overflow-x:hidden; width:100%;}
::selection{background:var(--pink);color:var(--void);}

body{
  background:var(--void);
  color:var(--bone);
  font-family:'Sora',sans-serif;
  overflow-x:hidden;
  cursor:auto;
}

h1,h2,h3,.display{
  font-family:'Unbounded',sans-serif;
  line-height:1.08;
  letter-spacing:-0.02em;
}
.mono{ font-family:'Space Mono',monospace; }

a{color:inherit;text-decoration:none;}
img{max-width:100%;display:block;}
button{font-family:inherit;border:none;background:none;color:inherit;cursor:pointer;}
ul{list-style:none;}

/* ===== grain overlay ===== */
.grain{
  position:fixed;inset:0;z-index:9998;pointer-events:none;
  opacity:.045;mix-blend-mode:overlay;
  background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* ===== custom cursor (disabled — using the normal OS pointer) ===== */
.cursor,.cursor-ring{ display:none; }

/* ===== nav (matches main site header) ===== */
header.site-header{
  position:fixed;top:0;left:0;width:100%;z-index:500;
  display:flex;align-items:center;justify-content:space-between;
  padding:16px 5%;
  background:linear-gradient(90deg, #481336 0%, #481336 15%, var(--void) 28%, var(--smoke) 55%, var(--smoke-2) 78%, var(--pink-dim) 100%);
  border-bottom:1px solid rgba(255,249,230,.08);
  transition:padding .3s var(--ease), background .3s var(--ease);
}
header.site-header.scrolled{ padding:10px 5%; }
.logo{ font-size:1.15rem; font-weight:800; letter-spacing:0; font-family:'Unbounded',sans-serif; text-transform:uppercase; display:flex; align-items:center; }
.logo span{ color:var(--pink); }
/* Logo asset is 315x72px (ratio 4.375:1) — sized directly off that ratio
   at every breakpoint below, with aspect-ratio locked as a safety net
   against any distortion. */
.logo img{ height:40px; width:175px; aspect-ratio:315/72; object-fit:contain; display:block; }
@media (max-width:860px){ .logo img{ height:34px; width:149px; } }
@media (max-width:600px){ .logo img{ height:32px; width:140px; } }
@media (max-width:380px){ .logo img{ height:28px; width:123px; } }
.main-nav ul{ display:flex; gap:42px; }
.main-nav ul li a{
  font-size:14px; text-transform:uppercase; letter-spacing:.06em; font-weight:500;
  position:relative; padding-bottom:4px;
}
.main-nav ul li a::after{
  content:'';position:absolute;bottom:0;left:0;width:0;height:1px;background:var(--lime);
  transition:width .3s var(--ease);
}
.main-nav ul li a:hover::after, .main-nav ul li.current-menu-item a::after{ width:100%; }
.nav-cta{
  display:flex;align-items:center;gap:8px;
  padding:11px 22px;border-radius:100px;background:var(--pink);color:var(--void);
  font-size:.78rem;font-weight:700;text-transform:uppercase;letter-spacing:.05em;
  transition:transform .35s var(--ease), box-shadow .35s var(--ease);
}
.nav-cta:hover{ transform:translateY(-2px); box-shadow:0 8px 30px rgba(255,45,149,.4); }
.burger{ display:none; width:28px; height:20px; position:relative; z-index:901; }
.burger span{ position:absolute; left:0; width:100%; height:2px; background:var(--bone); transition:transform .3s var(--ease), opacity .3s var(--ease); }
.burger span:nth-child(1){ top:0; } .burger span:nth-child(2){ top:9px; } .burger span:nth-child(3){ top:18px; }
.burger.open span:nth-child(1){ transform:translateY(9px) rotate(45deg); }
.burger.open span:nth-child(2){ opacity:0; }
.burger.open span:nth-child(3){ transform:translateY(-9px) rotate(-45deg); }

@media (max-width: 860px){
  .main-nav{ display:none; }
  .nav-cta{ display:none; }
  .burger{ display:block; }
}

/* ===== mobile menu overlay ===== */
.mobile-menu-overlay{
  position:fixed; inset:0; z-index:490; background:var(--void);
  display:flex; flex-direction:column; justify-content:center;
  padding:100px 8% 60px; overflow-y:auto;
  opacity:0; visibility:hidden; pointer-events:none; transform:translateY(-14px);
  transition:opacity .45s var(--ease), transform .45s var(--ease), visibility .45s var(--ease);
}
.mobile-menu-overlay.open{ opacity:1; visibility:visible; pointer-events:auto; transform:translateY(0); }
.mobile-menu-overlay ul{ list-style:none; display:flex; flex-direction:column; }
.mobile-menu-overlay ul li{ border-bottom:1px solid rgba(255,249,230,.1); }
.mobile-menu-overlay ul li a{
  display:block; padding:20px 0; font-family:'Unbounded',sans-serif; font-size:1.25rem;
  text-transform:uppercase; letter-spacing:.01em; color:var(--bone); opacity:0; transform:translateX(-16px);
}
.mobile-menu-overlay.open ul li a{ animation:menuItemIn .5s var(--ease) forwards; }
.mobile-menu-overlay ul li:nth-child(1) a{ animation-delay:.05s; }
.mobile-menu-overlay ul li:nth-child(2) a{ animation-delay:.1s; }
.mobile-menu-overlay ul li:nth-child(3) a{ animation-delay:.15s; }
.mobile-menu-overlay ul li:nth-child(4) a{ animation-delay:.2s; }
.mobile-menu-overlay ul li:nth-child(5) a{ animation-delay:.25s; }
.mobile-menu-overlay ul li:nth-child(6) a{ animation-delay:.3s; }
.mobile-menu-overlay ul li:nth-child(7) a{ animation-delay:.35s; }
@keyframes menuItemIn{ to{ opacity:1; transform:translateX(0); } }
.mobile-menu-overlay ul li a:hover{ color:var(--lime); }
.mobile-menu-overlay .mm-cta{
  margin-top:32px; display:flex; align-items:center; justify-content:center; gap:10px;
  padding:16px 30px; border-radius:100px; background:var(--pink); color:var(--void); font-weight:700;
  text-transform:uppercase; font-size:.85rem; letter-spacing:.05em; width:100%;
}
body.menu-open{ overflow:hidden; }
@media (min-width:861px){ .mobile-menu-overlay{ display:none; } }

/* ===== ambient blobs ===== */
.blob-field{ position:fixed; inset:0; z-index:0; pointer-events:none; overflow:hidden; }
.blob{ position:absolute; border-radius:50%; filter:blur(90px); opacity:.35; transition:transform 1.2s var(--ease); }
.blob-1{ width:520px; height:520px; background:var(--pink); top:-10%; left:-8%; }
.blob-2{ width:460px; height:460px; background:var(--lime); bottom:5%; right:-10%; opacity:.18; }
.blob-3{ width:360px; height:360px; background:#ff6a3d; top:45%; left:40%; opacity:.14; }
@media (max-width:860px){ .blob-field{ display:none; } }

/* ===== scroll progress ===== */
#scrollProgress{
  position:fixed; top:0; left:0; height:3px; width:0%; z-index:600;
  background:linear-gradient(90deg, var(--pink), var(--lime));
  box-shadow:0 0 12px rgba(255,210,77,.6);
}

/* ===== preloader ===== */
#preloader{
  position:fixed; inset:0; z-index:10000; background:var(--smoke);
  display:flex; align-items:center; justify-content:center; flex-direction:column; gap:18px;
  transition:opacity .6s var(--ease), visibility .6s var(--ease);
}
#preloader.hide{ opacity:0; visibility:hidden; pointer-events:none; }
.pre-logo{ overflow:hidden; display:flex; align-items:center; justify-content:center; }
.pre-logo img{ height:96px; width:420px; aspect-ratio:315/72; object-fit:contain; display:block; animation:preIn .6s var(--ease) forwards; }
@media (max-width:600px){ .pre-logo img{ height:64px; width:280px; } }
@media (max-width:480px){ .pre-logo img{ height:52px; width:228px; } }
@keyframes preIn{ from{ transform:translateY(100%); } to{ transform:translateY(0); } }
.pre-bar{ width:180px; height:2px; background:rgba(255,249,230,.15); border-radius:2px; overflow:hidden; }
.pre-bar span{ display:block; height:100%; width:0%; background:var(--lime); animation:preBar 1.4s var(--ease) forwards .2s; }
@keyframes preBar{ to{ width:100%; } }

/* ===== reveal on scroll ===== */
.reveal{ opacity:0; transform:translateY(40px); transition:opacity .9s var(--ease), transform .9s var(--ease); }
.reveal.in-view{ opacity:1; transform:translateY(0); }
.reveal-stagger > *{ opacity:0; transform:translateY(30px); transition:opacity .7s var(--ease), transform .7s var(--ease); }
.reveal-stagger.in-view > *{ opacity:1; transform:translateY(0); }
.reveal-stagger.in-view > *:nth-child(1){ transition-delay:.05s; }
.reveal-stagger.in-view > *:nth-child(2){ transition-delay:.15s; }
.reveal-stagger.in-view > *:nth-child(3){ transition-delay:.25s; }
.reveal-stagger.in-view > *:nth-child(4){ transition-delay:.35s; }
.reveal-stagger.in-view > *:nth-child(5){ transition-delay:.45s; }
.reveal-stagger.in-view > *:nth-child(6){ transition-delay:.55s; }

.tag{ font-size:.72rem; letter-spacing:.18em; text-transform:uppercase; color:var(--pink); margin-bottom:16px; display:inline-block; position:relative; padding-left:14px; }
.tag::before{
  content:''; position:absolute; left:0; top:50%; width:6px; height:6px; border-radius:50%;
  background:var(--pink); transform:translateY(-50%); box-shadow:0 0 8px var(--pink);
  animation:tagPulse 1.6s ease-in-out infinite;
}
@keyframes tagPulse{ 0%,100%{ opacity:1; } 50%{ opacity:.3; } }

.btn-solid, .btn-ghost{
  position:relative; padding:16px 32px; border-radius:100px; font-size:.85rem; font-weight:700;
  text-transform:uppercase; letter-spacing:.05em; overflow:hidden; display:inline-flex; align-items:center; gap:10px;
}
.btn-solid{ background:var(--lime); color:var(--void); }
.btn-ghost{ border:1px solid rgba(255,249,230,.3); color:var(--bone); }
.btn-solid:hover{ background:var(--bone); }
.btn-ghost:hover{ border-color:var(--lime); color:var(--lime); }

section{ position:relative; padding:130px 5%; }
@media (max-width:860px){ section{ padding:90px 6%; } }

/* ===== blog hero ===== */
.blog-hero{ min-height:52vh; display:flex; flex-direction:column; justify-content:center; padding:170px 5% 60px; position:relative; z-index:2; }
.blog-hero h1{ font-size:clamp(1.9rem,4.2vw,3.2rem); font-weight:800; text-transform:uppercase; max-width:900px; }
.blog-hero p{ margin-top:20px; max-width:560px; color:var(--fog); font-size:1.05rem; line-height:1.6; }

/* ===== two-column layout (main content + sidebar) ===== */
.content-wrap{
  max-width:1320px; margin:0 auto; display:grid; grid-template-columns:1fr 320px; gap:60px; align-items:start;
}
@media (max-width:1000px){
  .content-wrap{ grid-template-columns:1fr; gap:50px; }
  .sidebar{ order:2; }
}
.blog-body-section{ padding-top:0; }
.single-body-section{ padding:40px 5% 10px; }

/* ===== blog grid & cards ===== */
.blog-grid{ display:grid; grid-template-columns:repeat(2,1fr); gap:28px; }
@media (max-width:680px){ .blog-grid{ grid-template-columns:1fr; } }

.blog-card{
  background:var(--smoke); border:1px solid rgba(255,249,230,.08); border-radius:18px; overflow:hidden;
  display:flex; flex-direction:column; transition:transform .15s ease-out, border-color .3s var(--ease);
  will-change:transform;
}
.blog-card:hover{ border-color:rgba(255,210,77,.35); }
.blog-card .thumb{ aspect-ratio:16/9; overflow:hidden; background:var(--smoke-2); position:relative; }
.blog-card .thumb img{ width:100%; height:100%; object-fit:cover; transition:transform .7s var(--ease); }
.blog-card:hover .thumb img{ transform:scale(1.08); }
.blog-card .thumb .cat-badge{
  position:absolute; top:14px; left:14px; padding:6px 14px; border-radius:100px; background:rgba(26,11,31,.7);
  backdrop-filter:blur(6px); font-size:.65rem; text-transform:uppercase; letter-spacing:.08em; color:var(--lime);
  border:1px solid rgba(255,210,77,.3);
}
.blog-card .body{ padding:24px 24px 28px; display:flex; flex-direction:column; gap:12px; flex:1; }
.blog-card .meta{ font-family:'Space Mono',monospace; font-size:.72rem; color:var(--fog); text-transform:uppercase; letter-spacing:.06em; }
.blog-card h3{ font-size:1.15rem; line-height:1.3; text-transform:none; letter-spacing:-.01em; }
.blog-card h3 a:hover{ color:var(--lime); }
.blog-card p.excerpt{ color:var(--fog); font-size:.92rem; line-height:1.6; flex:1; }
.blog-card .read-more{
  margin-top:6px; font-size:.78rem; text-transform:uppercase; letter-spacing:.08em; font-weight:700; color:var(--bone);
  display:inline-flex; align-items:center; gap:8px;
}
.blog-card .read-more::after{ content:'→'; transition:transform .3s var(--ease); }
.blog-card:hover .read-more::after{ transform:translateX(4px); }

.no-posts{ text-align:center; padding:80px 0; color:var(--fog); max-width:1320px; margin:0 auto; }

/* ===== pagination ===== */
.cb-pagination{ display:flex; justify-content:center; gap:12px; margin-top:70px; flex-wrap:wrap; }
.cb-pagination a, .cb-pagination span{
  padding:10px 20px; border-radius:100px; border:1px solid rgba(255,249,230,.25);
  font-size:.78rem; text-transform:uppercase; letter-spacing:.06em; transition:all .3s var(--ease);
}
.cb-pagination a:hover, .cb-pagination .current{ background:var(--lime); border-color:var(--lime); color:var(--void); }

/* ===== sidebar widgets ===== */
.sidebar{ display:flex; flex-direction:column; gap:22px; position:sticky; top:110px; }
.widget{
  background:var(--smoke); border:1px solid rgba(255,249,230,.08); border-radius:18px; padding:26px;
}
.widget-title{
  font-family:'Space Mono',monospace; font-weight:700; font-size:.68rem; text-transform:uppercase; letter-spacing:.14em;
  margin-bottom:20px; color:var(--lime);
}
.widget-search-form{ display:flex; gap:8px; min-width:0; }
.widget-search-form input[type="search"]{
  flex:1; min-width:0; background:var(--smoke-2); border:1px solid rgba(255,249,230,.15); border-radius:10px;
  padding:12px 14px; color:var(--bone); font-family:'Sora',sans-serif; font-size:.85rem;
}
.widget-search-form input[type="search"]:focus{ outline:none; border-color:var(--lime); }
.widget-search-form button{
  flex-shrink:0; background:var(--smoke-2); border:1px solid rgba(255,249,230,.15); color:var(--fog);
  border-radius:10px; padding:0 16px; display:flex; align-items:center; transition:all .3s var(--ease);
}
.widget-search-form button:hover{ background:var(--lime); border-color:var(--lime); color:var(--void); }

/* about card */
.widget-about .about-head{ display:flex; flex-direction:column; align-items:flex-start; gap:10px; margin-bottom:16px; }
.widget-about .about-logo{ height:36px; width:158px; aspect-ratio:315/72; object-fit:contain; flex-shrink:0; }
.widget-about .about-tag{ font-size:.7rem; letter-spacing:.08em; text-transform:uppercase; color:var(--lime); }
.widget-about p{ color:var(--fog); font-size:.86rem; line-height:1.65; margin-bottom:16px; }
.widget-about .about-link{
  font-size:.76rem; font-weight:700; text-transform:uppercase; letter-spacing:.05em; color:var(--bone);
  display:inline-flex; align-items:center; gap:6px; transition:color .3s var(--ease);
}
.widget-about .about-link:hover{ color:var(--lime); }

/* categories */
.widget-categories ul{ display:grid; gap:0; }
.widget-categories li{ border-bottom:1px dashed rgba(255,249,230,.15); }
.widget-categories li:last-child{ border-bottom:none; }
.widget-categories li a{
  display:flex; justify-content:space-between; align-items:center; gap:10px;
  padding:13px 2px; font-size:.88rem; color:var(--fog); transition:color .3s var(--ease);
}
.widget-categories li a:hover{ color:var(--lime); }
.widget-categories .count{
  font-family:'Space Mono',monospace; font-size:.7rem; color:var(--lime); background:rgba(255,210,77,.1);
  border-radius:100px; min-width:26px; height:24px; display:flex; align-items:center; justify-content:center; padding:0 8px;
}

/* generic lists (fallback for widgets without special classes) */
.widget ul{ display:grid; gap:12px; }
.widget ul li a{ display:flex; justify-content:space-between; gap:10px; font-size:.88rem; color:var(--fog); transition:color .3s var(--ease); }
.widget ul li a:hover{ color:var(--lime); }
.widget .count{ font-family:'Space Mono',monospace; font-size:.72rem; color:var(--fog); }

/* recent articles */
.widget-recent-list{ display:flex; flex-direction:column; }
.widget-recent-post{ display:flex; gap:12px; padding:16px 0; border-bottom:1px dashed rgba(255,249,230,.15); }
.widget-recent-post:first-child{ padding-top:0; }
.widget-recent-post:last-child{ border-bottom:none; padding-bottom:0; }
.widget-recent-post .thumb{ width:58px; height:58px; border-radius:10px; overflow:hidden; flex-shrink:0; background:var(--smoke-2); }
.widget-recent-post .thumb img{ width:100%; height:100%; object-fit:cover; }
.widget-recent-post .meta{ min-width:0; }
.widget-recent-post .meta .cat{ font-size:.64rem; text-transform:uppercase; letter-spacing:.06em; color:var(--pink); font-weight:700; display:block; margin-bottom:4px; }
.widget-recent-post .meta a{ font-size:.85rem; line-height:1.4; font-weight:600; color:var(--bone); display:block; }
.widget-recent-post .meta a:hover{ color:var(--lime); }
.widget-recent-post .meta .date{ font-family:'Space Mono',monospace; font-size:.64rem; color:var(--fog); margin-top:4px; display:block; }

/* tags */
.widget-tags{ display:flex; flex-wrap:wrap; gap:8px; }
.widget-tags a{
  padding:7px 14px; border-radius:100px; border:1px solid rgba(255,249,230,.2); font-size:.7rem;
  text-transform:uppercase; letter-spacing:.05em; transition:all .3s var(--ease);
}
.widget-tags a:hover{ background:var(--lime); border-color:var(--lime); color:var(--void); }

/* CTA card */
.widget-cta{
  background:linear-gradient(160deg, var(--pink-dim), var(--smoke-2)); border:1px dashed rgba(255,210,77,.35);
}
.widget-cta .cta-eyebrow{ font-family:'Space Mono',monospace; font-weight:700; font-size:.68rem; text-transform:uppercase; letter-spacing:.14em; color:var(--lime); display:block; margin-bottom:12px; }
.widget-cta .cta-heading{ font-family:'Unbounded',sans-serif; font-size:1.1rem; text-transform:uppercase; color:var(--bone); margin-bottom:12px; line-height:1.25; }
.widget-cta p{ color:var(--fog); font-size:.85rem; line-height:1.65; margin-bottom:18px; }
.widget-cta .btn-solid{ padding:14px 20px; font-size:.78rem; }
.widget-cta .trust-row{ display:flex; gap:14px; flex-wrap:wrap; margin-top:14px; font-size:.7rem; color:var(--fog); }

@media (max-width:1000px){ .sidebar{ position:static; } }

/* ===== single post ===== */
.breadcrumb-bar{ padding:150px 5% 24px; border-bottom:1px solid rgba(255,249,230,.08); position:relative; z-index:2; }
.breadcrumbs{
  max-width:1320px; margin:0 auto;
  display:flex; align-items:center; flex-wrap:wrap; gap:8px; font-size:.78rem; color:var(--fog);
}
.breadcrumbs a{ color:var(--fog); transition:color .3s var(--ease); }
.breadcrumbs a:hover{ color:var(--lime); }
.breadcrumbs .sep{ color:rgba(255,249,230,.3); }
.breadcrumbs .current{ color:var(--bone); max-width:420px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }

.single-title-block{ margin-bottom:30px; max-width:100%; }
.single-title-block .tag{ margin-bottom:16px; }
.single-title-block h1{
  font-size:clamp(1.5rem, 2.6vw, 2.1rem); font-weight:700; text-transform:uppercase;
  line-height:1.2; max-width:100%; overflow-wrap:break-word; word-break:break-word;
}
.single-meta{
  display:flex; gap:22px; flex-wrap:wrap; margin-top:22px; padding-top:22px; border-top:1px solid rgba(255,249,230,.1);
  font-family:'Space Mono',monospace; font-size:.76rem; color:var(--fog); text-transform:uppercase; letter-spacing:.05em;
}
.single-featured{ margin-bottom:34px; }
.single-featured img{ width:100%; height:auto; max-height:520px; border-radius:16px; object-fit:cover; object-position:top center; display:block; }


.single-main{ max-width:740px; }
.single-content{ padding:20px 0 30px; }
.single-content p{ color:var(--bone); opacity:.92; font-size:1.05rem; line-height:1.8; margin-bottom:24px; }
.single-content h2,.single-content h3,.single-content h4,.single-content h5,.single-content h6{
  font-family:'Sora',sans-serif; font-weight:700; letter-spacing:0; line-height:1.3; color:var(--bone);
}
.single-content h2{ font-size:1.35rem; margin:38px 0 14px; text-transform:none; }
.single-content h3{ font-size:1.12rem; margin:30px 0 12px; text-transform:none; }
.single-content ul, .single-content ol{ margin:0 0 24px 22px; color:var(--bone); opacity:.92; line-height:1.8; }
.single-content li{ margin-bottom:8px; }
.single-content a{ color:var(--lime); text-decoration:underline; text-underline-offset:3px; }
.single-content blockquote{
  border-left:3px solid var(--pink); padding:6px 0 6px 24px; margin:32px 0; color:var(--fog); font-style:italic; font-size:1.1rem;
}
.single-content img{ border-radius:14px; margin:30px 0; }
.single-content pre{ background:var(--smoke); padding:20px; border-radius:12px; overflow-x:auto; margin-bottom:24px; }
.single-content code{ font-family:'Space Mono',monospace; background:var(--smoke); padding:2px 6px; border-radius:4px; font-size:.9em; }
.single-content pre code{ background:none; padding:0; }

/* ===== Gutenberg block content — bullet/numbered lists =====
   The global reset at the top of this file (`ul{list-style:none;}`) is
   there for the site's NAV menus, but it was also silently hiding the
   bullet markers on every bulleted list published from the block editor.
   These rules put the markers back for actual post content only. */
.single-content ul{ list-style:disc; }
.single-content ol{ list-style:decimal; }
.single-content ul ul, .single-content ol ul{ list-style:circle; }
.single-content ul ol, .single-content ol ol{ list-style:decimal; }
.single-content li > ul, .single-content li > ol{ margin-top:8px; margin-bottom:0; }
/* The Gallery block (and older "Gallery" formats) also renders as a <ul>,
   but it's a photo grid, not a bulleted list — keep those marker-free. */
.single-content ul.wp-block-gallery,
.single-content ul.blocks-gallery-grid{ list-style:none; margin-left:0; }

/* ===== Gutenberg block content — quotes =====
   The core Quote block wraps its text in an inner <p> and an optional
   <cite>; without this, the paragraph color rule above was quietly
   overriding the quote's own color/opacity. */
.single-content blockquote p{ color:var(--fog); opacity:1; margin-bottom:12px; }
.single-content blockquote p:last-of-type{ margin-bottom:0; }
.single-content blockquote cite{
  display:block; margin-top:10px; font-style:normal; font-size:.82rem;
  letter-spacing:.03em; text-transform:uppercase; opacity:.65; color:var(--bone);
}

/* ===== Gutenberg block content — tables =====
   The Table block had no styling at all before, so tables rendered as
   unstyled/borderless text. Wrapped in a scroll container so wide tables
   don't blow out the layout on mobile. */
.single-content .wp-block-table{ margin:30px 0; overflow-x:auto; }
.single-content table{ width:100%; border-collapse:collapse; font-size:.95rem; }
.single-content table th, .single-content table td{
  padding:12px 16px; border:1px solid rgba(255,249,230,.15); text-align:left;
  color:var(--bone); opacity:.92; vertical-align:top;
}
.single-content table thead th{
  background:var(--smoke); color:var(--fog); opacity:1;
  font-family:'Unbounded',sans-serif; font-weight:600; font-size:.85rem;
}
.single-content table tbody tr:nth-child(even){ background:rgba(255,255,255,.03); }
.single-content .wp-block-table.is-style-stripes table{ border:none; }
.single-content .wp-block-table.is-style-stripes tbody tr:nth-child(odd){ background:rgba(255,255,255,.03); }
.single-content .wp-block-table figcaption{ margin-top:10px; }

/* ===== Gutenberg block content — images & captions =====
   <figure> has a large default browser margin that was pushing captioned
   images (and galleries) out of alignment with the rest of the column. */
.single-content figure{ margin:30px 0; }
.single-content figure img{ margin:0; }
.single-content figcaption{
  font-size:.85rem; color:var(--bone); opacity:.65; text-align:center; margin-top:10px; line-height:1.5;
}
.single-content .alignleft{ float:left; margin:6px 24px 20px 0; }
.single-content .alignright{ float:right; margin:6px 0 20px 24px; }
.single-content .aligncenter{ margin-left:auto; margin-right:auto; }
.single-content::after{ content:""; display:table; clear:both; } /* clear floated images before tags/author box */

/* ===== Gutenberg block content — misc ===== */
.single-content hr{ border:none; border-top:1px solid rgba(255,249,230,.15); margin:40px 0; }
.single-content h4{ font-size:1rem; margin:24px 0 10px; font-weight:700; }
.single-content h5{ font-size:.92rem; margin:20px 0 8px; font-weight:600; }
.single-content h6{ font-size:.82rem; margin:16px 0 8px; font-weight:600; text-transform:uppercase; letter-spacing:.04em; opacity:.85; }
.single-content strong{ color:var(--fog); }

.single-tags{ display:flex; gap:10px; flex-wrap:wrap; padding-bottom:20px; }
.single-tags a{
  padding:8px 16px; border-radius:100px; border:1px solid rgba(255,249,230,.2); font-size:.72rem;
  text-transform:uppercase; letter-spacing:.06em; transition:all .3s var(--ease);
}
.single-tags a:hover{ background:var(--lime); border-color:var(--lime); color:var(--void); }

.author-box{
  margin:10px 0 0; padding:28px; border-radius:18px; background:var(--smoke);
  border:1px solid rgba(255,249,230,.08); display:flex; gap:20px; align-items:center;
}
.author-box img{ width:64px; height:64px; border-radius:50%; flex-shrink:0; object-fit:cover; }
.avatar{ object-fit:cover; }
.author-box .name{ font-weight:700; margin-bottom:6px; }
.author-box .bio{ color:var(--fog); font-size:.9rem; line-height:1.6; }

.related-posts{ max-width:1100px; margin:0 auto; padding:60px 5% 100px; }
.related-posts h3{ text-transform:uppercase; font-size:1.5rem; margin-bottom:34px; }
.related-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:24px; }
@media (max-width:800px){ .related-grid{ grid-template-columns:1fr; } }

.cb-cta-strip{
  max-width:1100px; margin:0 auto; padding:50px 5%; border-radius:24px; background:linear-gradient(120deg, var(--pink-dim), var(--smoke));
  display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap; gap:24px;
}
.cb-cta-strip h3{ font-size:1.5rem; text-transform:uppercase; max-width:480px; }

/* ===== footer ===== */
footer.site-footer{
  padding:80px 5% 30px; border-top:1px solid rgba(255,249,230,.08); position:relative; z-index:2;
  background:linear-gradient(90deg, #481336 0%, #481336 40%, var(--void) 52%, var(--smoke) 75%, var(--smoke-2) 100%);
}
.foot-grid{ display:grid; grid-template-columns:2fr 1fr 1fr; gap:40px; margin-bottom:60px; max-width:1320px; margin-left:auto; margin-right:auto; }
@media (max-width:800px){ .foot-grid{ grid-template-columns:1fr; } }
.foot-grid h4{ font-size:.75rem; text-transform:uppercase; letter-spacing:.1em; color:var(--fog); margin-bottom:18px; }
.foot-grid ul{ display:grid; gap:12px; }
.contact-list li{ display:flex; align-items:center; gap:10px; }
.contact-list svg{ flex-shrink:0; color:var(--lime); }
.contact-list a{ color:inherit; transition:color .3s var(--ease); }
.contact-list a:hover{ color:var(--lime); }
.flag-icon{ border-radius:2px; border:1px solid rgba(255,249,230,.25); flex-shrink:0; }
.foot-grid ul li a:hover{ color:var(--lime); }
.foot-logo{ font-size:1.6rem; font-weight:800; margin-bottom:16px; font-family:'Unbounded',sans-serif; text-transform:uppercase; display:flex; align-items:center; }
.foot-logo span{ color:var(--pink); }
.foot-logo img{ height:48px; width:210px; aspect-ratio:315/72; object-fit:contain; display:block; }
@media (max-width:600px){ .foot-logo img{ height:38px; width:166px; } }
.socials{ display:flex; gap:14px; margin-top:22px; perspective:600px; }
.socials a{
  width:38px; height:38px; border-radius:50%; border:1px solid rgba(255,249,230,.2);
  display:flex; align-items:center; justify-content:center;
  transition:transform .55s var(--ease), background .3s var(--ease), border-color .3s var(--ease), box-shadow .3s var(--ease), color .3s var(--ease);
  transform-style:preserve-3d; will-change:transform;
  animation:socialWobble 4.5s ease-in-out infinite;
}
.socials a:nth-child(1){ animation-delay:0s; }
.socials a:nth-child(2){ animation-delay:-1.1s; }
.socials a:nth-child(3){ animation-delay:-2.2s; }
.socials a:nth-child(4){ animation-delay:-3.3s; }
@keyframes socialWobble{
  0%,100%{ transform:rotateY(0deg) rotateX(0deg) translateY(0); }
  50%{ transform:rotateY(12deg) rotateX(-6deg) translateY(-3px); }
}
.socials a:hover{
  background:var(--lime); border-color:var(--lime); color:var(--void);
  transform:rotateY(360deg) translateY(-5px) scale(1.1);
  box-shadow:0 12px 26px rgba(255,210,77,.35);
  animation-play-state:paused;
}
.foot-bottom{
  display:flex; justify-content:space-between; align-items:center; padding-top:26px; border-top:1px solid rgba(255,249,230,.08);
  font-size:.78rem; color:var(--fog); flex-wrap:wrap; gap:14px; max-width:1320px; margin:0 auto;
}
.to-top{ display:flex; align-items:center; gap:8px; }

::-webkit-scrollbar{ width:8px; }
::-webkit-scrollbar-track{ background:var(--void); }
::-webkit-scrollbar-thumb{ background:var(--smoke-2); border-radius:10px; }

.tilt{ transition:transform .15s ease-out; will-change:transform; }

@media (prefers-reduced-motion:reduce){
  *, *::before, *::after{ animation-duration:.001ms !important; animation-iteration-count:1 !important; transition-duration:.001ms !important; }
}