/* ============================================================
   CKA WEBSITE v2 — GLOBAL STYLESHEET
   Stack : WordPress · Astra Pro · Elementor Free
   File  : all-styles.css
   Author: Charlie Kang · charliekangauthor.com

   INSTALLATION — TWO OPTIONS:
   A) Appearance → Customize → Additional CSS → paste entire file
   B) Upload to theme folder, enqueue via functions.php
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond:ital,wght@0,300;0,400;0,500;1,300;1,400;1,500&family=DM+Mono:ital,wght@0,300;0,400;1,300&display=swap');

/* ── DESIGN TOKENS ────────────────────────────────────────── */
:root {
  --black   : #0a0907;
  --deep    : #0f0e0c;
  --surface : #161410;
  --border  : #2a2a32;
  --muted   : #3a3a42;
  --dim     : #5a5a68;
  --silver  : #8a8a9a;
  --ghost   : #b0b0bc;
  --ash     : #d0d0d8;
  --white   : #f0ede8;
  --copper     : #b87333;
  --copper-dim : rgba(184,115,51,0.30);
  --copper-glow: rgba(184,115,51,0.08);
  --font-display: 'Cormorant Garamond', Georgia, 'Times New Roman', serif;
  --font-mono   : 'DM Mono', 'Courier New', monospace;
  --font-body   : 'DM Mono', 'Courier New', monospace;
  --max-w  : 1200px;
  --nav-h  : 72px;
  --ease-out: cubic-bezier(0.22,1,0.36,1);
}

/* ── RESET ────────────────────────────────────────────────── */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0;}
html{font-size:16px;scroll-behavior:smooth;}
body{
  background:var(--black);color:var(--silver);
  font-family:var(--font-body);font-size:0.875rem;line-height:1.7;
  -webkit-font-smoothing:antialiased;overflow-x:hidden;
}
img{max-width:100%;display:block;}
a{text-decoration:none;color:inherit;}
::selection{background:var(--copper);color:var(--black);}
::-webkit-scrollbar{width:4px;}
::-webkit-scrollbar-track{background:var(--black);}
::-webkit-scrollbar-thumb{background:var(--copper);}

/* ── ASTRA PRO OVERRIDES ──────────────────────────────────── */
/* Suppress Astra theme header and footer; our custom ones take over */
.main-header-bar-wrap,.ast-masthead-custom-menu-items,
#masthead,.site-header{display:none!important;}
.ast-footer-area,.footer-widget-area,
#colophon,.site-footer{display:none!important;}
/* Remove Astra container padding that conflicts */
body.elementor-page .site-content,
body.elementor-page #primary,
.ast-container,
.ast-row{padding:0!important;max-width:100%!important;}
/* Keep Elementor sections full-width */
.elementor-section.elementor-section-stretched{width:100%!important;}
.elementor-section.elementor-section-full_width>.elementor-container{max-width:100%!important;}
/* Remove default WP body margin when admin bar hidden */
body.admin-bar{padding-top:0!important;}
/* Remove Astra page title */
.ast-page-title-area{display:none!important;}
/* Entry content reset */
.entry-content{margin:0!important;padding:0!important;}
/* Kirki remnants — remove if present */
.kirki-custom-css{display:none!important;}

/* ── KEYFRAMES ────────────────────────────────────────────── */
@keyframes fadeInUp{from{opacity:0;transform:translateY(24px);}to{opacity:1;transform:translateY(0);}}
@keyframes scrollPulse{0%,100%{opacity:0.3;transform:scaleY(1);}50%{opacity:1;transform:scaleY(1.2);}}

/* ── LAYOUT UTILITIES ─────────────────────────────────────── */
.container{max-width:var(--max-w);margin:0 auto;padding:0 40px;}
@media(max-width:600px){.container{padding:0 20px;}}
.section{padding:80px 0;}
@media(max-width:900px){.section{padding:60px 0;}}
@media(max-width:600px){.section{padding:48px 0;}}

.grid-2{display:grid;grid-template-columns:1fr 1fr;gap:64px;align-items:start;}
@media(max-width:900px){.grid-2{grid-template-columns:1fr;gap:40px;}}

/* ── TYPE UTILITIES ───────────────────────────────────────── */
.eyebrow{
  font-family:var(--font-mono);font-size:0.62rem;letter-spacing:0.20em;
  text-transform:uppercase;color:var(--copper);margin-bottom:20px;
  display:flex;align-items:center;gap:12px;
}
.eyebrow::before{content:'';width:24px;height:1px;background:var(--copper);flex-shrink:0;}
.t-label{font-family:var(--font-mono);font-size:0.6rem;letter-spacing:0.18em;text-transform:uppercase;color:var(--dim);}

/* ── ANIMATION CLASSES ────────────────────────────────────── */
.fade-in{opacity:0;transform:translateY(20px);transition:opacity 0.7s var(--ease-out),transform 0.7s var(--ease-out);}
.fade-in.visible{opacity:1;transform:translateY(0);}
.page-transition{animation:fadeInUp 0.5s var(--ease-out) both;}

/* ── BUTTONS ──────────────────────────────────────────────── */
.btn{
  display:inline-flex;align-items:center;gap:8px;
  font-family:var(--font-body);font-size:0.7rem;font-weight:500;
  letter-spacing:0.16em;text-transform:uppercase;
  padding:13px 24px;transition:all 0.3s var(--ease-out);
  cursor:pointer;border:none;outline:none;text-decoration:none;
}
.btn-primary{background:var(--copper);color:var(--black);}
.btn-primary:hover{background:#d4894a;transform:translateY(-2px);}
.btn-ghost{background:transparent;color:var(--ash);border:1px solid var(--border);}
.btn-ghost:hover{border-color:var(--copper-dim);color:var(--copper);}
.btn-arrow::after{content:'→';transition:transform 0.3s;}
.btn-arrow:hover::after{transform:translateX(4px);}

/* ── NAV ──────────────────────────────────────────────────── */
.nav{
  position:fixed;top:0;left:0;right:0;z-index:1000;
  height:var(--nav-h);
  background:rgba(10,9,7,0.92);
  backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);
  border-bottom:1px solid rgba(42,42,50,0.6);
  transition:background 0.3s;
}
.nav.scrolled{background:rgba(10,9,7,0.98);border-bottom-color:var(--border);}
.nav-inner{
  max-width:var(--max-w);margin:0 auto;padding:0 40px;
  height:100%;display:flex;align-items:center;justify-content:space-between;
}
.nav-logo{
  font-family:var(--font-display);font-size:1.25rem;font-weight:300;
  font-style:italic;color:var(--white);text-decoration:none;
  letter-spacing:0.02em;transition:color 0.3s;
}
.nav-logo:hover{color:var(--copper);}
.nav-links{display:flex;align-items:center;gap:36px;}
.nav-link{
  font-family:var(--font-body);font-size:0.65rem;letter-spacing:0.18em;
  text-transform:uppercase;color:var(--dim);text-decoration:none;
  position:relative;transition:color 0.3s;padding-bottom:2px;
}
.nav-link::after{
  content:'';position:absolute;bottom:-2px;left:0;right:0;
  height:1px;background:var(--copper);
  transform:scaleX(0);transform-origin:left;transition:transform 0.3s var(--ease-out);
}
.nav-link:hover,.nav-link.active{color:var(--white);}
.nav-link:hover::after,.nav-link.active::after{transform:scaleX(1);}
.nav-link.active{color:var(--copper);}
.nav-toggle{
  display:none;flex-direction:column;gap:5px;
  background:transparent;border:none;cursor:pointer;padding:4px;
}
.nav-toggle span{display:block;width:22px;height:1px;background:var(--ash);transition:all 0.3s;}
.nav-toggle.open span:nth-child(1){transform:translateY(6px) rotate(45deg);}
.nav-toggle.open span:nth-child(2){opacity:0;}
.nav-toggle.open span:nth-child(3){transform:translateY(-6px) rotate(-45deg);}
.nav-mobile{
  display:none;position:fixed;top:var(--nav-h);left:0;right:0;
  background:var(--deep);border-bottom:1px solid var(--border);
  padding:24px 40px;z-index:999;flex-direction:column;gap:20px;
}
.nav-mobile.open{display:flex;}
.nav-mobile .nav-link{font-size:0.75rem;}
@media(max-width:768px){
  .nav-toggle{display:flex;}
  .nav-links{display:none;}
  .nav-inner{padding:0 20px;}
  .nav-mobile{padding:24px 20px;}
}

/* ── 3D BOOK ──────────────────────────────────────────────── */
.book-3d-wrapper{perspective:1200px;cursor:pointer;display:inline-block;position:relative;}
.book-3d{
  width:220px;height:330px;position:relative;
  transform-style:preserve-3d;transition:transform 0.8s var(--ease-out);
}
.book-3d.flipped{transform:rotateY(-180deg);}
.book-face{
  position:absolute;width:220px;height:330px;
  backface-visibility:hidden;-webkit-backface-visibility:hidden;
  display:flex;flex-direction:column;align-items:center;
  justify-content:space-between;padding:32px 24px;overflow:hidden;
}
.book-face-front{
  background:linear-gradient(135deg,#1a1208 0%,#120d06 50%,#1e1510 100%);
  border-left:4px solid var(--copper);
  box-shadow:6px 8px 40px rgba(0,0,0,0.8),-2px 0 8px rgba(184,115,51,0.15),inset -4px 0 16px rgba(0,0,0,0.3);
}
.book-face-front::before{
  content:'';position:absolute;inset:0;
  background:repeating-linear-gradient(0deg,transparent,transparent 48px,rgba(184,115,51,0.035) 48px,rgba(184,115,51,0.035) 49px);
}
.book-face-front::after{
  content:'';position:absolute;top:0;bottom:0;left:12px;width:1px;
  background:linear-gradient(to bottom,transparent,rgba(184,115,51,0.25),transparent);
}
.book-face-back{
  background:linear-gradient(135deg,#0d0a06 0%,#161008 100%);
  border-right:4px solid var(--copper);
  transform:rotateY(180deg);
  box-shadow:-6px 8px 40px rgba(0,0,0,0.8),2px 0 8px rgba(184,115,51,0.1);
}
.b-series{font-family:var(--font-mono);font-size:0.5rem;letter-spacing:0.24em;text-transform:uppercase;color:var(--copper);text-align:center;position:relative;z-index:1;opacity:0.7;}
.b-title{font-family:var(--font-display);font-size:2.8rem;font-weight:500;letter-spacing:0.08em;color:var(--white);text-align:center;line-height:1;position:relative;z-index:1;text-shadow:0 2px 20px rgba(184,115,51,0.3);}
.b-rule{width:40px;height:1px;background:linear-gradient(90deg,transparent,var(--copper),transparent);margin:0 auto;}
.b-author{font-family:var(--font-mono);font-size:0.62rem;letter-spacing:0.16em;text-transform:uppercase;color:var(--dim);text-align:center;position:relative;z-index:1;}
.b-back-phrase{font-family:var(--font-display);font-size:1.4rem;font-style:italic;color:var(--ash);text-align:center;line-height:1.3;transition:opacity 0.3s;padding:0 8px;}
.b-back-copper{width:32px;height:2px;background:var(--copper);margin:16px auto;}
.book-pages{position:absolute;right:-8px;top:2px;bottom:2px;width:10px;background:linear-gradient(90deg,#c8b89a,#e8d8b8,#c8b89a,#b8a888,#d8c8a0);border-radius:0 2px 2px 0;box-shadow:2px 0 4px rgba(0,0,0,0.4);}

/* ── CAROUSEL ─────────────────────────────────────────────── */
.carousel-strip{background:var(--surface);border-top:1px solid var(--border);border-bottom:1px solid var(--border);padding:14px 0;overflow:hidden;}
.carousel-inner{display:flex;align-items:center;gap:24px;padding:0 40px;}
.carousel-strip-label{font-family:var(--font-mono);font-size:0.58rem;letter-spacing:0.22em;text-transform:uppercase;color:var(--copper);white-space:nowrap;flex-shrink:0;padding-right:16px;border-right:1px solid var(--border);}
.carousel-desktop{flex:1;overflow:hidden;position:relative;}
.carousel-desktop-track{display:flex;width:max-content;transition:transform 0.6s var(--ease-out);}
.carousel-desktop-item{font-family:var(--font-mono);font-size:0.62rem;letter-spacing:0.12em;color:var(--dim);white-space:nowrap;padding:0 32px;border-right:1px solid var(--border);flex-shrink:0;}
.carousel-desktop-item a{color:var(--dim);transition:color 0.3s;}
.carousel-desktop-item a:hover{color:var(--copper);}
.carousel-mobile{display:none;flex:1;overflow:hidden;}
.carousel-mobile-track{display:flex;transition:transform 0.5s var(--ease-out);}
.carousel-mobile-item{font-family:var(--font-mono);font-size:0.62rem;letter-spacing:0.12em;color:var(--dim);white-space:nowrap;min-width:100%;text-align:center;}
.carousel-mobile-item a{color:var(--dim);}
@media(max-width:768px){
  .carousel-desktop{display:none;}
  .carousel-mobile{display:flex;}
  .carousel-inner{padding:0 20px;}
}

/* ── FOOTER ───────────────────────────────────────────────── */
.footer{background:var(--deep);border-top:1px solid var(--border);padding:64px 0 32px;}
.footer-inner{display:grid;grid-template-columns:1.5fr 1fr 1fr;gap:48px;margin-bottom:48px;padding-bottom:40px;border-bottom:1px solid var(--border);}
.footer-logo{font-family:var(--font-display);font-size:1.4rem;font-weight:300;font-style:italic;color:var(--white);display:block;margin-bottom:12px;text-decoration:none;}
.footer-desc{font-size:0.76rem;color:var(--dim);line-height:1.8;max-width:280px;}
.footer-col-title{font-family:var(--font-mono);font-size:0.6rem;letter-spacing:0.2em;text-transform:uppercase;color:var(--copper);margin-bottom:16px;}
.footer-links{display:flex;flex-direction:column;gap:10px;}
.footer-links a{font-size:0.78rem;color:var(--dim);transition:color 0.3s;}
.footer-links a:hover{color:var(--copper);}
.footer-bottom{display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:12px;}
.footer-copy{font-size:0.68rem;color:var(--muted);}
@media(max-width:768px){
  .footer-inner{grid-template-columns:1fr;gap:32px;}
  .footer-bottom{flex-direction:column;align-items:flex-start;}
}

/* ── ARTICLE INDEX (sidebar) ──────────────────────────────── */
.article-index{margin-bottom:28px;}
.article-index-title{font-family:var(--font-mono);font-size:0.6rem;letter-spacing:0.2em;text-transform:uppercase;color:var(--copper);margin-bottom:14px;padding-bottom:10px;border-bottom:1px solid var(--border);}
.article-index-list{list-style:none;display:flex;flex-direction:column;gap:10px;}
.article-index-list li{padding-left:12px;border-left:1px solid var(--border);transition:border-color 0.3s;}
.article-index-list li:hover{border-left-color:var(--copper);}
.article-index-list a{font-size:0.76rem;color:var(--dim);line-height:1.5;transition:color 0.3s;}
.article-index-list a:hover{color:var(--ash);}