/**
 * Frontend Styles - IntroBanka Theme
 * 
 * Consolidated CSS from all HTML visualization files.
 * Optimized for inline loading via inc/frontend/enqueue-styles.php
 * 
 * @package IntroBanka
 * @since 1.0.0
 */

/* Core Reset & Base */
*,*::before,*::after{margin:0;padding:0;box-sizing:border-box}
html{font-size:62.5%;scroll-behavior:smooth;overflow-x:hidden;hanging-punctuation:first last;-webkit-hanging-punctuation:first last}
body{font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,sans-serif;font-size:1.6rem;line-height:1.6;background:var(--c-bg);color:var(--c-text);overflow-x:hidden;text-rendering:optimizeLegibility;-webkit-font-smoothing:antialiased;font-variant-numeric:tabular-nums;text-wrap:pretty;font-display:swap}

/* Design Tokens */
:root{
--c-bg:#FEFEFE;
--c-surface:#FFF;
--c-panel:#F7F8FA;
--c-text:#1A1A1C;
--c-text-muted:#5C5C68;
--c-line:#D4D4D8;
--c-line-subtle:#E8E8EB;
--c-accent:#D73502;
--c-accent-hover:#B62C02;
--c-accent-subtle:#FFF5F0;
--c-accent-border:rgba(215,53,2,0.28);
--c-success:#10B981;
--c-glass:rgba(255,255,255,0.72);
--c-shadow-sm:0 1px 3px rgba(0,0,0,0.06);
--c-shadow-md:0 4px 6px rgba(0,0,0,0.07);
--c-shadow-lg:0 10px 25px rgba(0,0,0,0.08);
--shadow-accent-sm:0 2px 8px rgba(215,53,2,0.25);
--shadow-accent-md:0 4px 12px rgba(215,53,2,0.35);
--shadow-accent-lg:0 4px 16px rgba(215,53,2,0.35);
--shadow-accent-glow:0 0 10px rgba(215,53,2,0.5);
--gradient-accent:linear-gradient(135deg,var(--c-accent),var(--c-accent-hover));
--gradient-placeholder:linear-gradient(135deg,var(--c-panel),var(--c-line-subtle));
--space-2xs:0.2rem;
--space-xs:0.4rem;
--space-sm:0.8rem;
--space-md:1.2rem;
--space-lg:2rem;
--space-xl:3.2rem;
--space-2xl:5rem;
--text-xs:1.2rem;
--text-sm:1.4rem;
--text-base:1.6rem;
--text-lg:1.8rem;
--text-xl:2.2rem;
--text-2xl:2.8rem;
--container:100rem;
--radius:0.8rem;
--radius-lg:1.2rem;
--radius-xl:1.6rem;
--header-height:6rem;
--ease-out:cubic-bezier(0.16,1,0.3,1);
--duration-fast:150ms;
--duration-base:250ms
}

/* Dark Theme */
:root[data-theme="dark"]{
--c-bg:#0A0A0B;
--c-surface:#141416;
--c-panel:#1C1C1F;
--c-text:#F7F7F8;
--c-text-muted:#A1A1AA;
--c-line:#2D2D32;
--c-line-subtle:#232326;
--c-accent-subtle:#3d1a0a;
--c-accent-border:rgba(215,53,2,0.4);
--c-glass:rgba(20,20,22,0.72);
--c-shadow-sm:0 1px 3px rgba(0,0,0,0.2);
--c-shadow-md:0 4px 6px rgba(0,0,0,0.25);
--c-shadow-lg:0 10px 25px rgba(0,0,0,0.3)
}
:root[data-theme="dark"] .logo-icon{box-shadow:0 2px 12px rgba(215,53,2,0.4)}
:root[data-theme="dark"] .logo:hover .logo-icon{box-shadow:0 4px 20px rgba(215,53,2,0.5)}
:root[data-theme="dark"] .info-box{box-shadow:var(--c-shadow-lg)}
:root[data-theme="dark"] .identity-card,:root[data-theme="dark"] .social-card,:root[data-theme="dark"] .news-list{box-shadow:var(--c-shadow-lg)}
:root[data-theme="dark"] .takeaway::before{background:var(--gradient-accent);box-shadow:0 2px 6px rgba(215,53,2,0.2)}
:root[data-theme="dark"] .author-info::before{box-shadow:0 2px 8px rgba(215,53,2,0.3)}

/* Accessibility */
@media(prefers-contrast:high){
:root{--c-text:#000;--c-text-muted:#404040;--c-line:#767676}
:root[data-theme="dark"]{--c-text:#FFF;--c-text-muted:#D0D0D0;--c-line:#A0A0A0}
.border{border-width:2px}
}
@media(prefers-reduced-motion:reduce){
*{animation-duration:0.01ms!important;transition-duration:0.01ms!important}
.parallax{opacity:1!important}
.logo-icon,.play-btn::before,.play-btn::after{animation:none!important}
}

/* Base Elements */
a{color:inherit;text-decoration:none}
img{display:block;max-width:100%;height:auto}
button{background:transparent;border:none;cursor:pointer;font:inherit;touch-action:manipulation}
input,textarea{font:inherit}
p{line-height:1.7;text-wrap:pretty}
h1,h2,h3{line-height:1.3;letter-spacing:-0.02em;text-wrap:pretty;font-synthesis:none;text-rendering:optimizeLegibility}
time,span[data-numeric]{font-variant-numeric:tabular-nums}

/* Icons */
.icon{display:inline-block;width:1em;height:1em;vertical-align:middle;fill:currentColor;flex-shrink:0}
.icon-lg{width:1.5em;height:1.5em}
.icon-xl{width:2em;height:2em}
.icon-2xl{width:2.5em;height:2.5em}
.icon-accent{color:var(--c-accent)}
.icon-muted{color:var(--c-text-muted);opacity:0.5}
.icon-white{color:#fff}
.icon-success{color:var(--c-success)}
.icon-sm{width:0.8em;height:0.8em}

/* Reading Progress Bar */
.reading-progress-bar{position:fixed;top:0;left:0;height:4px;background:linear-gradient(90deg,var(--c-accent),var(--c-accent-hover));z-index:9999;transition:width 200ms ease-out;box-shadow:var(--shadow-accent-glow)}
.reading-progress-circle{position:fixed;bottom:20px;right:20px;width:70px;height:70px;border-radius:50%;z-index:9998;font-size:14px;box-shadow:var(--c-shadow-lg);background:conic-gradient(var(--c-accent) 0% 0%,var(--c-line-subtle) 0% 100%);transition:all var(--duration-base)}
.reading-progress-circle:hover{transform:scale(1.05);box-shadow:0 6px 20px rgba(215,53,2,0.3)}
.reading-progress-circle .circle-inner{position:relative;width:60px;height:60px;border-radius:50%;background:var(--c-surface);display:flex;align-items:center;justify-content:center;font-size:15px;font-weight:700;color:var(--c-accent);border:2px solid var(--c-surface)}
:root[data-theme="dark"] .reading-progress-circle .circle-inner{background:var(--c-panel)}
/* Disable smooth scroll on article pages for controlled scrolling */
body.single-post html,body.single-celebrity html{scroll-behavior:auto!important}
body.single-post,body.single-celebrity{scroll-behavior:auto!important}
@media(max-width:768px){.reading-progress-circle{width:60px;height:60px;bottom:15px;right:15px}.reading-progress-circle .circle-inner{width:50px;height:50px;font-size:13px}}

/* Utilities */
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
.container{max-width:var(--container);margin-inline:auto;padding-inline:var(--space-md)}
.flex{display:flex}
.flex-center{display:flex;align-items:center;justify-content:center}
.flex-between{display:flex;align-items:center;justify-content:space-between}
.grid{display:grid}
.text-center{text-align:center}
.text-muted{color:var(--c-text-muted)}
.rounded{border-radius:var(--radius)}
.border{border:1px solid var(--c-line-subtle)}
.bg-panel{background:var(--c-panel)}
.bg-surface{background:var(--c-surface)}
.transition{transition:all var(--duration-base) var(--ease-out)}
.loading{opacity:0.5;transition:opacity var(--duration-fast)}

/* Header */
.header{position:fixed;inset-block-start:0.8rem;inset-inline:0;z-index:100;padding-inline:var(--space-md)}
.header-wrapper{max-width:var(--container);margin-inline:auto;background:var(--c-glass);backdrop-filter:blur(12px) saturate(180%);-webkit-backdrop-filter:blur(12px) saturate(180%);border-radius:var(--radius-xl);border:1px solid rgba(255,255,255,0.18);box-shadow:var(--c-shadow-lg);padding:0.6rem;transition:all var(--duration-base) var(--ease-out)}
:root[data-theme="dark"] .header-wrapper{background:rgba(20,20,22,0.72);border-color:rgba(255,255,255,0.08)}
.header-inner{block-size:calc(var(--header-height) - 1.2rem);padding-inline:var(--space-sm)}

/* Logo */
.logo{display:flex;align-items:center;gap:var(--space-lg);text-decoration:none}
.logo-icon{width:3.6rem;height:3.6rem;background:var(--gradient-accent);border-radius:1rem;display:flex;align-items:center;justify-content:center;transition:transform 400ms var(--ease-out),box-shadow 400ms var(--ease-out);box-shadow:var(--shadow-accent-sm);position:relative;overflow:hidden;contain:layout style paint;will-change:transform}
.logo-icon::before{content:'';position:absolute;inset:0;background:linear-gradient(135deg, transparent 30%, rgba(255,255,255,0.25));border-radius:inherit;pointer-events:none}
.logo-icon::after{content:'';position:absolute;inset:0;background:radial-gradient(circle at 30% 30%, rgba(255,255,255,0.3), transparent 50%);border-radius:inherit;pointer-events:none}
.logo:hover .logo-icon{transform:rotate(360deg) scale(1.1);box-shadow:var(--shadow-accent-lg)}
.logo:active .logo-icon{transform:scale(0.95);transition-duration:100ms}
.logo-icon .icon{width:2.2rem;height:2.2rem;color:#fff;transition:none}
.logo-text{font-size:var(--text-lg);font-weight:700;letter-spacing:-0.03em;color:var(--c-text);transition:color var(--duration-fast)}
.logo:hover .logo-text{color:var(--c-accent)}

/* Navigation */
.nav{gap:var(--space-xs)}
.nav-links{display:flex;gap:0.3rem;background:var(--c-panel);padding:0.3rem;border-radius:1rem;align-items:center;flex-wrap:nowrap;max-width:100%;scrollbar-width:none;-ms-overflow-style:none}
.nav-links::-webkit-scrollbar{display:none}
:root[data-theme="dark"] .nav-links{background:rgba(255,255,255,0.04)}
.nav-links > ul{display:flex;gap:0.3rem;align-items:center;flex-wrap:nowrap;list-style:none;margin:0;padding:0}
.nav-item{display:inline-flex;align-items:center}
.nav-item-wrapper{position:relative}
.nav-links a{padding:0.6rem 1.2rem;border-radius:0.6rem;font-size:var(--text-sm);font-weight:500;color:var(--c-text-muted);transition:all var(--duration-fast);line-height:1;white-space:nowrap;flex-shrink:0;text-decoration:none}
.nav-links a:hover{background:var(--c-surface);color:var(--c-text);box-shadow:var(--c-shadow-sm)}
.nav-links a.active{background:var(--c-accent);color:#fff}
.nav-links a:active{background:var(--c-accent);color:#fff;box-shadow:none}
:root[data-theme="dark"] .nav-links a:hover{background:rgba(255,255,255,0.08)}
:root[data-theme="dark"] .nav-links a:active{background:var(--c-accent);color:#fff}

/* Submenu Support */
.submenu{list-style:none;margin:0;padding:0 0 0 1.5rem;background:transparent}
.submenu .nav-item{display:block;width:100%}
.submenu a{width:100%;padding:0.6rem 1rem;border-radius:0.4rem;display:block;white-space:normal;font-size:var(--text-sm);opacity:0.85;background:rgba(0,0,0,0.03)}
:root[data-theme="dark"] .submenu a{background:rgba(255,255,255,0.03)}
@media(min-width:768px){
.submenu{position:absolute;top:calc(100% + 0.8rem);left:0;min-width:20rem;background:var(--c-surface);border:1px solid var(--c-line-subtle);border-radius:var(--radius);padding:0.5rem;box-shadow:var(--c-shadow-lg);opacity:0;visibility:hidden;transform:translateY(-1rem);transition:all var(--duration-base) var(--ease-out);z-index:9999}
:root[data-theme="dark"] .submenu{background:var(--c-panel);border-color:var(--c-line)}
.nav-item-wrapper:hover .submenu{opacity:1;visibility:visible;transform:translateY(0)}
.submenu a{padding:0.8rem 1.2rem;font-size:var(--text-base);opacity:1;background:transparent}
.submenu a:hover{background:var(--c-panel)}
:root[data-theme="dark"] .submenu a:hover{background:rgba(255,255,255,0.05)}
}

/* Theme Toggle */
.theme-btn{inline-size:4.2rem;block-size:4.2rem;border-radius:1rem;background:var(--c-panel);color:var(--c-text);font-size:var(--text-base);transition:all var(--duration-fast);border:1px solid transparent}
:root[data-theme="dark"] .theme-btn{background:rgba(255,255,255,0.04)}
.lang-btn{inline-size:4.2rem;block-size:4.2rem;border-radius:1rem;background:var(--c-panel);color:var(--c-text);font-size:1.2rem;font-weight:600;transition:all var(--duration-fast);border:1px solid transparent;text-decoration:none;display:flex;align-items:center;justify-content:center}
:root[data-theme="dark"] .lang-btn{background:rgba(255,255,255,0.04)}
.lang-btn:hover,.theme-btn:hover{background:var(--c-accent);color:#fff;border-color:var(--c-accent)}
.lang-text{line-height:1;letter-spacing:0.05em}
.theme-btn:hover{background:var(--c-surface);border-color:var(--c-accent);box-shadow:var(--c-shadow-md)}
.theme-btn:active{background:var(--c-accent);color:#fff;border-color:var(--c-accent)}
.theme-btn .icon{transition:transform var(--duration-base) var(--ease-out)}
.theme-btn:hover .icon{transform:rotate(20deg)}

/* Mobile Menu */
#menu-toggle{display:none}
.menu-btn{display:none;inline-size:4.2rem;block-size:4.2rem;border-radius:1rem;background:var(--c-panel);cursor:pointer}
:root[data-theme="dark"] .menu-btn{background:rgba(255,255,255,0.04)}
.menu-icon,.menu-icon::before,.menu-icon::after{display:block;inline-size:1.8rem;block-size:0.2rem;background:var(--c-text);transition:all var(--duration-base);border-radius:0.2rem}
.menu-icon{position:relative}
.menu-icon::before,.menu-icon::after{content:'';position:absolute}
.menu-icon::before{inset-block-start:-0.5rem}
.menu-icon::after{inset-block-start:0.5rem}
#menu-toggle:checked~.nav .menu-icon{background:transparent}
#menu-toggle:checked~.nav .menu-icon::before{inset-block-start:0;transform:rotate(45deg)}
#menu-toggle:checked~.nav .menu-icon::after{inset-block-start:0;transform:rotate(-45deg)}
#menu-toggle:checked~.nav .nav-links{display:flex;position:absolute;inset-block-start:calc(var(--header-height) - 1.2rem);inset-inline-end:0;inline-size:min(25rem,80vw);background:var(--c-glass);backdrop-filter:blur(12px);flex-direction:column;padding:var(--space-md);border-radius:var(--radius-lg);box-shadow:var(--c-shadow-lg);border:1px solid rgba(255,255,255,0.18);overflow-x:visible;overflow-y:auto;max-height:80vh}
#menu-toggle:checked~.nav .nav-links > ul{flex-direction:column;width:100%;gap:0.5rem}
#menu-toggle:checked~.nav .nav-item{width:100%}
#menu-toggle:checked~.nav .nav-links a{width:100%;text-align:left}
:root[data-theme="dark"] #menu-toggle:checked~.nav .nav-links{background:rgba(20,20,22,0.9);border-color:rgba(255,255,255,0.08)}

/* Main Content */
.main{padding-block:calc(var(--header-height) + 2.4rem) var(--space-xl);contain:layout style paint}

/* Hero Section */
.hero{background:linear-gradient(135deg,var(--c-accent-subtle) 0%,var(--c-panel) 100%);padding:var(--space-2xl) var(--space-lg);border-radius:var(--radius-lg);margin-block-end:var(--space-2xl);position:relative;overflow:hidden;min-height:480px;contain:layout}
.hero::before{content:'';position:absolute;inset:0;background:radial-gradient(circle at 70% 20%,rgba(215,53,2,0.1) 0%,transparent 50%);pointer-events:none}
.hero .hero-content{max-inline-size:60rem;position:relative}
.hero .hero-title{font-size:clamp(var(--text-xl),5vw,var(--text-2xl));font-weight:700;margin-block-end:var(--space-md);color:var(--c-text)}
.hero-desc{font-size:var(--text-lg);color:var(--c-text-muted);margin-block-end:var(--space-xl);line-height:1.6}

/* Search Bar */
.search-wrapper{max-inline-size:55rem;position:relative}
.search-bar{display:flex;align-items:center;background:var(--c-glass);backdrop-filter:blur(12px) saturate(180%);-webkit-backdrop-filter:blur(12px) saturate(180%);border-radius:6rem;border:1px solid rgba(255,255,255,0.18);box-shadow:var(--c-shadow-lg);padding:0.4rem;transition:all var(--duration-base)}
:root[data-theme="dark"] .search-bar{background:rgba(20,20,22,0.72);border-color:rgba(255,255,255,0.08)}
.search-bar:focus-within{box-shadow:0 0 0 4px var(--c-accent-subtle),var(--c-shadow-lg)}
.search-input{flex:1;padding:1.2rem 1.6rem;padding-inline-start:4.8rem;background:transparent;border:0;font-size:var(--text-base);color:var(--c-text);outline:none}
.search-input::placeholder{color:var(--c-text-muted);opacity:0.7}
.search-icon{position:absolute;inset-inline-start:2rem;inset-block-start:50%;transform:translateY(-50%);color:var(--c-text-muted);pointer-events:none;z-index:1}
.search-btn,.newsletter-btn{padding:1rem 2.4rem;margin-inline-end:0.2rem;background:var(--c-accent);color:#fff;border-radius:5rem;font-weight:600;font-size:var(--text-sm);transition:all var(--duration-fast);box-shadow:var(--shadow-accent-sm)}
.search-btn:hover,.newsletter-btn:hover{background:var(--c-accent-hover);box-shadow:var(--shadow-accent-md)}
.search-btn:active,.newsletter-btn:active{opacity:0.9}

/* Stats */
.stats{display:flex;gap:var(--space-xl);margin-block-start:var(--space-2xl)}
.stat-item{display:flex;align-items:center;gap:var(--space-sm)}
.stat-value{font-size:var(--text-xl);font-weight:700;color:var(--c-text)}
.stat-label{font-size:var(--text-sm);color:var(--c-text-muted)}

/* Section Headers */
.section-header{text-align:center;margin-block-end:var(--space-xl)}
.section-title{font-size:var(--text-2xl);font-weight:700;color:var(--c-text);margin-block-end:var(--space-sm)}
.section-desc{font-size:var(--text-base);color:var(--c-text-muted)}

/* Categories */
.categories{display:flex;gap:var(--space-sm);margin-block-end:var(--space-xl);overflow-x:auto;padding-block-end:var(--space-sm)}
.category-btn{padding:var(--space-sm) var(--space-lg);background:var(--c-surface);border:1px solid var(--c-line-subtle);border-radius:2rem;font-size:var(--text-sm);font-weight:500;color:var(--c-text-muted);white-space:nowrap;transition:all var(--duration-fast)}
.category-btn:hover{background:var(--c-panel);border-color:var(--c-accent);color:var(--c-text)}
.category-btn.active{background:var(--c-accent);border-color:var(--c-accent);color:#fff}

/* Celebrity Card */
.celeb-card{background:var(--c-surface);border-radius:var(--radius-lg);overflow:hidden;box-shadow:var(--c-shadow-sm);transition:all var(--duration-base);cursor:pointer;position:relative;border:1px solid var(--c-line-subtle);display:flex;flex-direction:column;height:100%}
.celeb-card:hover{box-shadow:var(--c-shadow-lg);border-color:var(--c-accent)}
.celeb-image,.article-thumb,.news-image{background:var(--gradient-placeholder)}
.celeb-image{aspect-ratio:16/9;position:relative;overflow:hidden;flex-shrink:0}
.celeb-thumbnail{width:100%;height:100%;object-fit:cover;display:block}
.celeb-badge{position:absolute;inset-block-start:var(--space-sm);inset-inline-end:var(--space-sm);padding:var(--space-xs) var(--space-sm);background:var(--c-glass);backdrop-filter:blur(8px);border-radius:1rem;font-size:var(--text-xs);font-weight:600;color:var(--c-text)}
.celeb-info{padding:var(--space-lg);flex:1;display:flex;flex-direction:column}
.celeb-name{font-size:var(--text-lg);font-weight:600;color:var(--c-text);margin-block-end:var(--space-md);line-height:1.3;min-height:5rem;max-height:5rem;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;text-overflow:ellipsis}
.celeb-meta{display:flex;align-items:center;gap:var(--space-md);margin-top:auto;font-size:var(--text-xs);color:var(--c-text-muted);flex-wrap:wrap;justify-content:space-around}
.celeb-category{font-weight:600;color:var(--c-text);white-space:nowrap;min-width:5rem;text-align:center;padding-inline-end:var(--space-md);border-inline-end:1px solid var(--c-line)}
.celeb-meta::before{content:'';display:none}
.celeb-category::after{content:'';display:none}
.celeb-date{white-space:nowrap;min-width:7rem;text-align:center;padding-inline-end:var(--space-md);border-inline-end:1px solid var(--c-line)}
.celeb-stat{display:flex;align-items:center;gap:var(--space-2xs);white-space:nowrap;min-width:4rem;padding:var(--space-xs) var(--space-sm);background:var(--c-accent-subtle);color:var(--c-accent);border-radius:var(--radius);font-weight:600;justify-content:center;border:none}

/* Featured Grid */
#featuredGrid{padding-block-end:3rem}

/* Article Card */
.article-card{display:grid;grid-template-columns:12rem 1fr;grid-template-rows:auto auto 1fr;gap:0 var(--space-md);padding:var(--space-md);background:var(--c-surface);border-radius:var(--radius);border:1px solid var(--c-line-subtle);transition:all var(--duration-fast)}
.article-card:hover{background:var(--c-panel);border-color:var(--c-accent)}
.article-thumb{grid-column:1;grid-row:1/4;inline-size:12rem;block-size:100%;aspect-ratio:16/9;object-fit:cover;display:block;border-radius:var(--radius)}
.article-badge{grid-column:2;grid-row:1;font-size:var(--text-xs);font-weight:600;align-self:start;text-transform:uppercase;letter-spacing:0.05em;line-height:1}
.article-date{grid-column:2;grid-row:1;font-size:var(--text-xs);color:var(--c-text-muted);align-self:start;line-height:1}
.article-card .article-badge + .article-date{display:none}
.article-author{grid-column:2;grid-row:1;font-size:var(--text-xs);color:var(--c-text-muted);justify-self:end;align-self:start}
.article-title{grid-column:2;grid-row:2;font-size:var(--text-lg);font-weight:600;color:var(--c-text);line-height:1.4;align-self:center;margin-block-start:var(--space-xs)}
.article-content{flex:1;min-inline-size:0;padding:var(--space-md);display:flex;flex-direction:column;justify-content:center}
.article-meta{display:flex;gap:var(--space-md);margin-block-end:var(--space-xs);font-size:var(--text-xs);color:var(--c-text-muted)}

/* Newsletter */
.newsletter{background:var(--c-surface);border:1px solid var(--c-line-subtle);padding:var(--space-2xl);border-radius:var(--radius-xl);text-align:center;margin-block:var(--space-2xl);position:relative;overflow:hidden;box-shadow:var(--c-shadow-lg)}
.newsletter::before{content:'';position:absolute;inset:0;background:linear-gradient(135deg,var(--c-accent-subtle) 0%,transparent 70%);opacity:0.3;pointer-events:none}
.newsletter-content{position:relative;z-index:1}
.newsletter-badge{display:inline-block;padding:0.4rem 1.2rem;background:var(--c-accent);color:#fff;border-radius:2rem;font-size:var(--text-xs);font-weight:600;text-transform:uppercase;letter-spacing:0.08em;margin-block-end:var(--space-md)}
.newsletter-title{font-size:var(--text-2xl);font-weight:700;margin-block-end:var(--space-sm);color:var(--c-text)}
.newsletter-desc{font-size:var(--text-base);margin-block-end:var(--space-xl);color:var(--c-text-muted);max-inline-size:45rem;margin-inline:auto;line-height:1.6}
.newsletter-form{display:flex;align-items:center;max-inline-size:42rem;margin-inline:auto;background:var(--c-glass);backdrop-filter:blur(8px);border-radius:6rem;border:1px solid var(--c-line-subtle);padding:0.4rem;box-shadow:var(--c-shadow-md)}
:root[data-theme="dark"] .newsletter-form{background:rgba(255,255,255,0.05);border-color:rgba(255,255,255,0.1)}
.newsletter-input{flex:1;padding:1.2rem 2rem;background:transparent;border:0;font-size:var(--text-base);color:var(--c-text);outline:none}
.newsletter-input::placeholder{color:var(--c-text-muted);opacity:0.7}

/* Footer */
.footer{background:var(--c-surface);border-block-start:1px solid var(--c-line-subtle);padding-block:var(--space-xl)}
.footer-content{display:grid;grid-template-columns:2fr 1fr 1fr;gap:var(--space-xl);margin-block-end:var(--space-xl)}
.footer-brand{max-inline-size:30rem}
.footer-logo{display:flex;align-items:center;gap:var(--space-sm);margin-block-end:var(--space-md)}
.footer-desc{font-size:var(--text-sm);color:var(--c-text-muted);line-height:1.6}
.footer-section h3{font-size:var(--text-base);font-weight:600;margin-block-end:var(--space-md);color:var(--c-text)}
.footer-links{display:flex;flex-direction:column;gap:var(--space-sm)}
.footer-links a{font-size:var(--text-sm);color:var(--c-text-muted);transition:color var(--duration-fast)}
.footer-links a:hover{color:var(--c-accent)}
.footer-bottom{padding-block-start:var(--space-xl);border-block-start:1px solid var(--c-line-subtle);display:flex;justify-content:space-between;align-items:center}
.footer-copy{font-size:var(--text-sm);color:var(--c-text-muted)}
.social-links{display:flex;gap:var(--space-sm)}
.social-link{width:3.6rem;height:3.6rem;display:flex;align-items:center;justify-content:center;background:var(--c-panel);border-radius:50%;transition:all var(--duration-fast)}
.social-link:hover{background:var(--c-accent);color:#fff}

/* Archive Hero */
.archive-hero{background:linear-gradient(135deg,var(--c-accent-subtle) 0%,var(--c-panel) 100%);padding:var(--space-2xl) var(--space-lg);border-radius:var(--radius-lg);margin-block-end:var(--space-2xl);position:relative;overflow:hidden}
.archive-hero::before{content:'';position:absolute;inset:0;background:radial-gradient(circle at 70% 20%,rgba(215,53,2,0.1) 0%,transparent 50%);pointer-events:none}
.archive-content{max-inline-size:60rem;position:relative}
.archive-title{font-size:clamp(var(--text-xl),5vw,var(--text-2xl));font-weight:700;margin-block-end:var(--space-md);color:var(--c-text)}
.archive-desc{font-size:var(--text-lg);color:var(--c-text-muted);margin-block-end:var(--space-xl);line-height:1.6}

/* Empty State */
.empty-state{padding:var(--space-2xl);text-align:center}
.empty-icon{font-size:4rem;color:var(--c-text-muted);opacity:0.3;margin-block-end:var(--space-lg)}
.empty-title{font-size:var(--text-xl);font-weight:700;color:var(--c-text);margin-block-end:var(--space-sm)}
.empty-desc{font-size:var(--text-base);color:var(--c-text-muted)}

/* Pagination */
.pagination{display:flex;align-items:center;justify-content:center;gap:var(--space-sm);margin-block-start:var(--space-2xl)}
.page-btn{inline-size:3.6rem;block-size:3.6rem;display:flex;align-items:center;justify-content:center;background:var(--c-surface);border:1px solid var(--c-line-subtle);border-radius:var(--radius);font-size:var(--text-sm);font-weight:500;transition:all var(--duration-fast)}
.page-btn:hover{background:var(--c-panel);border-color:var(--c-accent)}
.page-btn.active{background:var(--c-accent);border-color:var(--c-accent);color:#fff}
.page-btn:disabled{opacity:0.5;cursor:not-allowed}
.page-dots{padding-inline:var(--space-sm);color:var(--c-text-muted)}

/* Single Celebrity Styles */
.hero-celebrity{position:relative;width:100%;aspect-ratio:16/9;max-height:45rem;overflow:hidden;margin-bottom:var(--space-lg);border-radius:var(--radius-lg)}
.hero-image{inline-size:100%;block-size:100%;object-fit:cover;background:var(--gradient-placeholder);font-size:var(--text-xl)}
.page-featured-image{margin-bottom:var(--space-xl)}
.page-thumbnail{width:100%;height:auto;border-radius:var(--radius-lg);aspect-ratio:16/9;object-fit:cover}
.hero-image.parallax{position:absolute;top:0;left:0;width:100%;height:100%}
.hero-image img{width:100%;height:100%;object-fit:cover;object-position:center}
.hero-overlay{position:absolute;inset:0;background:linear-gradient(to top,rgba(0,0,0,0.85) 0%,rgba(0,0,0,0.3) 50%,transparent 100%)}
.hero-overlay ~ .hero-content{position:absolute;inset-block-end:0;inset-inline:0;padding:var(--space-xl) var(--space-lg);z-index:10}
.hero-overlay ~ .hero-content .hero-title{font-size:clamp(var(--text-xl),5vw,var(--text-2xl));font-weight:700;margin:0;color:#fff;text-shadow:0 2px 12px rgba(0,0,0,0.5)}
.parallax{transition:opacity var(--duration-base)}

/* Avatar */
.avatar{inline-size:clamp(4.5rem,7vw,6.5rem);block-size:clamp(4.5rem,7vw,6.5rem);border-radius:50%;overflow:hidden;position:relative;box-shadow:var(--c-shadow-md)}
.avatar::after{content:attr(data-initials);position:absolute;inset:0;display:flex;align-items:center;justify-content:center;background:var(--gradient-accent);color:#fff;font-size:clamp(1.4rem,2.5vw,2rem);font-weight:600;z-index:1}
.avatar img{width:100%;height:100%;object-fit:cover;position:relative;z-index:2}
.avatar-hero{position:absolute;inset-block-start:var(--space-sm);inset-inline-start:var(--space-sm);border:3px solid #fff;box-shadow:0 4px 12px rgba(0,0,0,0.2)}
.avatar-sm{inline-size:5rem;block-size:5rem;margin-inline:auto;margin-block-end:var(--space-xs)}
.avatar-sm::after{font-size:var(--text-base);background:linear-gradient(135deg,#6B7280,#9CA3AF)}

/* Info Boxes */
.info-box{padding:var(--space-md);background:var(--c-panel);border:1px solid var(--c-line-subtle);border-radius:var(--radius);box-shadow:var(--c-shadow-md)}
.info-title{font-size:var(--text-xs);font-weight:700;text-transform:uppercase;letter-spacing:0.08em;color:var(--c-text-muted);padding-block-end:var(--space-xs);margin-block-end:var(--space-sm);border-block-end:2px solid var(--c-line-subtle);display:flex;align-items:center}
.info-title .icon{margin-inline-end:0.5rem}
.info-text{font-size:var(--text-sm);line-height:1.65;color:var(--c-text);text-wrap:pretty;margin:0}

/* Takeaways */
#takeaways{counter-reset:takeaway-counter;list-style:none;padding:0}
.takeaway{gap:var(--space-sm);align-items:flex-start;counter-increment:takeaway-counter;position:relative}
.takeaway::before{content:counter(takeaway-counter);inline-size:2.2rem;block-size:2.2rem;background:var(--c-accent);color:#fff;font-size:1.1rem;font-weight:700;flex-shrink:0;display:flex;align-items:center;justify-content:center;border-radius:var(--radius);line-height:1;font-variant-numeric:tabular-nums}
.takeaway-text{font-size:var(--text-sm);line-height:1.5;color:var(--c-text);flex:1;text-wrap:pretty}

/* Cards */
.identity-card,.social-card{background:var(--c-surface);border-radius:var(--radius);padding:var(--space-lg);box-shadow:var(--c-shadow-md);border:1px solid var(--c-line-subtle)}
.identity-title,.social-title{font-size:var(--text-xs);font-weight:700;text-transform:uppercase;letter-spacing:0.08em;color:var(--c-text-muted);padding-block-end:var(--space-xs);margin-block-end:var(--space-lg);border-block-end:2px solid var(--c-line-subtle);display:flex;align-items:center}
.identity-title .icon,.social-title .icon{margin-inline-end:0.5rem}

/* Identity Table */
.identity-table{width:100%;border-collapse:collapse}
.identity-table tr{border-block-end:1px solid var(--c-line-subtle)}
.identity-table tr:last-child{border:0}
.identity-table td{padding:var(--space-sm) 0;font-size:var(--text-sm);vertical-align:middle}
.identity-table td:first-child{font-weight:600;color:var(--c-text-muted);width:40%}
.identity-table td:last-child{color:var(--c-text)}
.identity-table .icon{margin-inline-end:var(--space-xs);color:var(--c-accent)}

/* Social Grid */
.social-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--space-md)}
.social-item{display:flex;flex-direction:column;align-items:center;padding:var(--space-md);border-radius:var(--radius);background:var(--c-panel);transition:all var(--duration-fast);cursor:pointer;text-decoration:none;border:1px solid transparent;will-change:transform}
.social-item:hover{background:var(--c-surface);border-color:var(--c-line);box-shadow:var(--c-shadow-sm)}
.social-item:active{opacity:0.9}
.social-icon{width:3.2rem;height:3.2rem;margin-block-end:var(--space-sm);transition:all var(--duration-fast);fill:var(--c-text-muted)}
:root[data-theme="dark"] .social-icon{fill:var(--c-text)}
.social-item:hover .social-icon{transform:scale(1.1);fill:var(--c-accent)}
.social-count{font-size:var(--text-sm);color:var(--c-text);font-weight:600;font-variant-numeric:tabular-nums}

/* FAQ Section */
.faq-section{margin-block:var(--space-xl)}
.faq-title{font-size:var(--text-lg);font-weight:700;color:var(--c-text);margin-block-end:var(--space-lg);text-align:center;text-wrap:pretty}
.faq-item{background:var(--c-surface);border-radius:var(--radius);border:1px solid var(--c-line-subtle);margin-block-end:var(--space-sm);overflow:hidden}
.faq-question{width:100%;padding:var(--space-md);background:var(--c-panel);border:0;text-align:start;font-size:var(--text-base);font-weight:600;color:var(--c-text);cursor:pointer;display:flex;align-items:center;justify-content:space-between;transition:all var(--duration-fast)}
.faq-question:hover{background:var(--c-surface)}
.faq-question .icon{transition:transform var(--duration-base);color:var(--c-accent);width:2rem;height:2rem}
.faq-item.active .faq-question .icon{transform:rotate(45deg)}
.faq-answer{padding:0 var(--space-md);max-height:0;overflow:hidden;transition:all var(--duration-base) var(--ease-out)}
.faq-item.active .faq-answer{padding:var(--space-md);max-height:30rem}
.faq-answer p{font-size:var(--text-sm);line-height:1.6;color:var(--c-text);text-wrap:pretty}

/* News Section */
.news-section{margin-block:var(--space-xl)}
.news-title{font-size:var(--text-lg);font-weight:700;color:var(--c-text);margin-block-end:var(--space-lg);text-align:center;text-wrap:pretty}
.news-list{background:var(--c-surface);border-radius:var(--radius);border:1px solid var(--c-line-subtle);overflow:hidden;box-shadow:var(--c-shadow-md)}
.news-item{display:flex;gap:var(--space-lg);padding:var(--space-lg);border-block-end:1px solid var(--c-line-subtle)}
.news-item:last-child{border-block-end:0}
.news-date-box{flex-shrink:0;text-align:center;min-inline-size:6rem}
.news-month{font-size:var(--text-xs);color:var(--c-accent);text-transform:uppercase;font-weight:700;letter-spacing:0.08em;display:block}
.news-day{font-size:var(--text-xl);font-weight:700;color:var(--c-text);line-height:1;display:block;margin-block:var(--space-2xs);font-variant-numeric:tabular-nums}
.news-year{font-size:var(--text-xs);color:var(--c-text-muted);display:block;font-variant-numeric:tabular-nums}
.news-content{flex:1;min-inline-size:0}
.news-headline{font-size:var(--text-base);font-weight:600;color:var(--c-text);margin-block-end:var(--space-xs);line-height:1.4;text-wrap:pretty}
.news-meta{display:flex;align-items:center;gap:var(--space-md);margin-block-end:var(--space-xs)}
.news-source{font-size:var(--text-xs);color:var(--c-accent);font-weight:600;display:flex;align-items:center;gap:var(--space-xs)}
.news-source .icon{width:1.2rem;height:1.2rem}
.news-tag{font-size:var(--text-xs);padding:0.2rem 0.8rem;background:var(--c-accent-subtle);color:var(--c-accent);border-radius:1rem;font-weight:600}
.news-summary{font-size:var(--text-sm);color:var(--c-text-muted);line-height:1.5;text-wrap:pretty}

/* Gallery */
.gallery{margin-block-start:var(--space-xl);padding-block-start:var(--space-xl);border-block-start:1px solid var(--c-line-subtle)}
.gallery-title{font-size:var(--text-lg);font-weight:700;margin-block-end:var(--space-md);color:var(--c-text);text-wrap:pretty}
.gallery-wrapper{gap:var(--space-md);padding:var(--space-md);position:relative;box-shadow:var(--c-shadow-md);border-radius:var(--radius)}
.gallery-grid{flex:1;gap:var(--space-sm);transition:opacity var(--duration-fast)}
.gallery-item{aspect-ratio:9/16;cursor:pointer;overflow:hidden;font-size:var(--text-sm);box-shadow:var(--c-shadow-sm);transition:all var(--duration-fast);will-change:transform}
.gallery-item:hover{border-color:var(--c-accent);box-shadow:var(--c-shadow-lg);opacity:0.95}
.gallery-item:active{opacity:0.9;box-shadow:var(--c-shadow-sm)}
.gallery-nav{inline-size:3.8rem;block-size:3.8rem;border-radius:50%;flex-shrink:0;border:1px solid var(--c-line);background:var(--c-surface);color:var(--c-text);box-shadow:var(--c-shadow-md);transition:all var(--duration-fast);will-change:transform}
.gallery-nav:hover{background:var(--c-panel);border-color:var(--c-accent);box-shadow:var(--c-shadow-lg)}
.gallery-nav:hover .icon{transform:translateX(2px)}
.gallery-nav[data-dir="prev"]:hover .icon{transform:translateX(-2px)}
.gallery-nav:active{background:var(--c-accent);color:#fff;box-shadow:var(--c-shadow-sm)}

/* Related Cards */
.card{padding:var(--space-md);cursor:pointer;transition:all var(--duration-fast);contain:layout style}
.card:hover{border-color:var(--c-accent);background:var(--c-panel);box-shadow:var(--c-shadow-lg);opacity:0.98}
.card:active{box-shadow:var(--c-shadow-sm);opacity:0.95}
.card-name{font-size:var(--text-sm);font-weight:700;margin-block-end:var(--space-2xs);color:var(--c-text);text-wrap:pretty}
.card-category{font-size:var(--text-xs);color:var(--c-text-muted)}

/* Article Hero & Meta */
.article-hero{position:relative;inline-size:100%;aspect-ratio:16/9;overflow:hidden;margin-block-end:var(--space-lg);border-radius:var(--radius-lg)}
.article-hero-image{inline-size:100%;block-size:100%;object-fit:cover;background:var(--gradient-placeholder);font-size:var(--text-xl)}
.article-hero-overlay{position:absolute;inset:0;background:linear-gradient(to top,rgba(0,0,0,0.85) 0%,rgba(0,0,0,0.3) 40%,transparent 100%)}
.article-hero-content{position:absolute;inset-block-end:0;inset-inline:0;padding:var(--space-xl) var(--space-lg);color:#fff}
.article-hero-content .article-title{font-size:clamp(var(--text-lg),4vw,var(--text-2xl));font-weight:700;line-height:1.2;text-shadow:0 2px 4px rgba(0,0,0,0.3);text-wrap:pretty;color:#fff;margin:0}
.article-category{display:inline-block;padding:var(--space-xs) var(--space-md);background:var(--c-accent);color:#fff;border-radius:2rem;font-size:var(--text-xs);font-weight:700;text-transform:uppercase;letter-spacing:0.08em;margin-block-end:var(--space-md)}

/* Article Subtitle */
.article-subtitle-wrapper{display:block;padding:var(--space-md) var(--space-lg);padding-inline-start:calc(var(--space-lg) + 2.2rem);background:linear-gradient(135deg,rgba(215,53,2,0.04),rgba(247,248,250,0.8));border:1px solid rgba(215,53,2,0.12);border-radius:var(--radius-lg);margin-block:var(--space-lg) var(--space-lg);position:relative;overflow:visible}
.article-subtitle-wrapper::before{content:'★';position:absolute;top:-0.7rem;left:-0.7rem;width:2.8rem;height:2.8rem;background:var(--gradient-accent);border-radius:50%;box-shadow:0 3px 10px rgba(215,53,2,0.3);border:3px solid var(--c-surface);color:#fff;font-size:1.4rem;display:grid;place-items:center;line-height:1;z-index:1}
.article-subtitle-wrapper::after{content:'';position:absolute;inset:0;background:linear-gradient(135deg,rgba(215,53,2,0.05),transparent 60%);pointer-events:none}
.article-subtitle{font-size:var(--text-sm);line-height:1.5;margin:0;text-wrap:pretty}
:root[data-theme="dark"] .article-subtitle-wrapper{background:linear-gradient(135deg, var(--c-accent-subtle), var(--c-surface));border-color:rgba(215,53,2,0.2)}
:root[data-theme="dark"] .article-subtitle-wrapper::before{background:var(--gradient-accent);box-shadow:0 3px 10px rgba(215,53,2,0.4);border-color:var(--c-panel)}

/* Author Meta */
.article-meta{display:flex;flex-wrap:wrap;align-items:center;gap:var(--space-lg);padding:var(--space-lg);background:var(--c-surface);border:1px solid var(--c-line-subtle);border-radius:var(--radius);margin-block-end:var(--space-lg);box-shadow:var(--c-shadow-sm)}
.author-info{display:grid;grid-template-columns:auto 1fr auto;grid-template-rows:auto auto;gap:var(--space-xs) var(--space-sm);position:relative;padding-inline-start:calc(3.6rem + var(--space-sm));min-height:3.6rem;align-items:center}
.author-info::before{content:attr(data-initials);position:absolute;inset-inline-start:0;inset-block-start:0;inline-size:3.6rem;block-size:3.6rem;border-radius:50%;background:var(--gradient-accent);display:flex;align-items:center;justify-content:center;color:#fff;font-size:var(--text-sm);font-weight:700;line-height:1;letter-spacing:0.05em;transition:all var(--duration-fast) var(--ease-out);z-index:1}
.author-avatar{position:absolute;inset-inline-start:0;inset-block-start:0;inline-size:3.6rem;block-size:3.6rem;border-radius:50%;object-fit:cover;z-index:2;transition:all var(--duration-fast) var(--ease-out)}
.author-info:not([data-initials])::before{content:'AU';opacity:0.8}
@media(hover: hover){
.article-meta:hover .author-info::before{transform:scale(1.05);box-shadow:0 4px 12px rgba(215,53,2,0.3)}
.article-meta:hover .author-avatar{transform:scale(1.05);box-shadow:0 4px 12px rgba(215,53,2,0.3)}
}
.author-name{grid-column:1;grid-row:1;font-size:var(--text-sm);font-weight:600;color:var(--c-text);position:relative}
.author-bio-trigger{grid-column:2;grid-row:1;justify-self:start;display:inline-flex;align-items:center;justify-content:center;width:1.6rem;height:1.6rem;background:var(--c-panel);border:1px solid var(--c-line-subtle);border-radius:50%;cursor:pointer;transition:all var(--duration-fast);color:var(--c-text-muted)}
.author-bio-trigger:hover{background:var(--c-accent);border-color:var(--c-accent);color:#fff}
.author-bio-trigger .icon{width:1.2rem;height:1.2rem}
.author-role{grid-column:1/3;grid-row:2;font-size:var(--text-xs);color:var(--c-text-muted)}
.meta-item{display:flex;align-items:center;gap:var(--space-sm);font-size:var(--text-sm);color:var(--c-text-muted);position:relative}
.meta-item .icon{color:var(--c-accent);flex-shrink:0}
.meta-items-wrapper{display:contents}

/* Author Bio */
.author-bio-dropdown{position:absolute;inset-block-start:calc(100% + var(--space-sm));inset-inline-start:calc(3.6rem + var(--space-sm));min-width:28rem;max-width:36rem;padding:var(--space-lg);background:var(--c-surface);border:1px solid var(--c-line-subtle);border-radius:var(--radius);box-shadow:var(--c-shadow-lg);opacity:0;visibility:hidden;transform:translateY(-0.5rem);transition:all var(--duration-base) var(--ease-out);z-index:100}
.author-bio-dropdown::before{content:'';position:absolute;inset-block-start:-0.6rem;inset-inline-start:2rem;width:1.2rem;height:1.2rem;background:var(--c-surface);border:1px solid var(--c-line-subtle);border-inline-end:0;border-block-end:0;transform:rotate(45deg);z-index:-1}
.author-bio-dropdown.active{opacity:1;visibility:visible;transform:translateY(0)}
.author-bio-title{font-size:var(--text-sm);font-weight:700;color:var(--c-text);margin-block-end:var(--space-sm);display:flex;align-items:center;gap:var(--space-xs)}
.author-bio-text{font-size:var(--text-sm);line-height:1.6;color:var(--c-text-muted);margin-block-end:var(--space-md);text-wrap:pretty}
.author-bio-stats{display:flex;gap:var(--space-lg);padding-block-start:var(--space-md);border-block-start:1px solid var(--c-line-subtle)}
.author-stat{display:flex;flex-direction:column}
.author-stat-value{font-size:var(--text-sm);font-weight:600;color:var(--c-text);font-variant-numeric:tabular-nums}
.author-stat-label{font-size:var(--text-xs);color:var(--c-text-muted)}
:root[data-theme="dark"] .author-bio-dropdown{background:var(--c-surface);border-color:var(--c-line)}
:root[data-theme="dark"] .author-bio-dropdown::before{background:var(--c-surface);border-color:var(--c-line)}
@media(hover: hover) and (pointer: fine) and (min-width: 768px){
.author-info:hover .author-bio-dropdown{opacity:1;visibility:visible;transform:translateY(0)}
}

/* Article Content */
.article-content{background:var(--c-surface);padding:var(--space-xl);border-radius:var(--radius);box-shadow:var(--c-shadow-md);border:1px solid var(--c-line-subtle);margin-block:var(--space-lg);contain:layout style;word-wrap:break-word;word-break:break-word;overflow-wrap:break-word}
.article-content>*{margin-block-end:var(--space-lg)}
.article-content>*:last-child{margin-block-end:0}
.article-content h2{font-size:var(--text-xl);font-weight:700;margin-block:var(--space-xl) var(--space-lg);color:var(--c-text);text-wrap:pretty}
.article-content h3{font-size:var(--text-lg);font-weight:600;margin-block:var(--space-lg) var(--space-md);color:var(--c-text);text-wrap:pretty}
.article-content p{font-size:var(--text-base);line-height:1.8;color:var(--c-text);text-wrap:pretty;word-wrap:break-word;word-break:break-word}
.article-content ul,.article-content ol{padding-inline-start:var(--space-xl)}
.article-content li{margin-block-end:var(--space-sm);line-height:1.7;text-wrap:pretty;word-wrap:break-word;word-break:break-word}
.article-content blockquote{padding:var(--space-lg);background:var(--c-panel);border-inline-start:4px solid var(--c-accent);border-radius:var(--radius);font-style:italic;color:var(--c-text);margin-block:var(--space-lg);text-wrap:pretty;word-wrap:break-word;word-break:break-word}
.article-content a{color:var(--c-accent);background:rgba(215,53,2,0.06);padding:0.1em 0.3em;border-radius:0.3rem;text-decoration:none;font-weight:500;transition:all var(--duration-fast)}
.article-content a:hover{background:rgba(215,53,2,0.12);color:var(--c-accent-hover)}
:root[data-theme="dark"] .article-content a{background:rgba(215,53,2,0.15)}
:root[data-theme="dark"] .article-content a:hover{background:rgba(215,53,2,0.25)}
.article-content table{width:100%;border-collapse:collapse;margin-block:var(--space-xl);background:var(--c-surface);border:1px solid var(--c-line-subtle);border-radius:var(--radius);overflow:hidden;box-shadow:var(--c-shadow-sm)}
.article-content table th{background:var(--c-accent);color:#fff;padding:var(--space-md) var(--space-lg);text-align:left;font-size:var(--text-sm);font-weight:700;text-transform:uppercase;letter-spacing:0.05em;border-bottom:2px solid var(--c-accent-hover)}
.article-content table td{padding:var(--space-md) var(--space-lg);font-size:var(--text-sm);color:var(--c-text);border-bottom:1px solid var(--c-line-subtle)}
.article-content table tbody tr{transition:background var(--duration-fast)}
.article-content table tbody tr:hover{background:var(--c-panel)}
.article-content table tbody tr:last-child td{border-bottom:none}
.article-content table tbody tr:nth-child(even){background:rgba(247,248,250,0.5)}
:root[data-theme="dark"] .article-content table tbody tr:nth-child(even){background:rgba(255,255,255,0.02)}
:root[data-theme="dark"] .article-content table tbody tr:hover{background:rgba(255,255,255,0.05)}

/* Share Section */
.share-section{display:flex;align-items:center;gap:var(--space-md);padding-block-start:var(--space-xl);margin-block-start:var(--space-xl);border-block-start:1px solid var(--c-line-subtle);flex-wrap:wrap}
.share-title{font-size:var(--text-sm);font-weight:600;color:var(--c-text-muted);white-space:nowrap}
.share-buttons{display:flex;flex-wrap:wrap;gap:var(--space-sm);flex:1;justify-content:flex-start}
.share-btn{width:3.6rem;height:3.6rem;display:flex;align-items:center;justify-content:center;background:var(--c-panel);border-radius:50%;transition:all var(--duration-fast);cursor:pointer;color:var(--c-text);flex-shrink:0;will-change:transform}
.share-btn:hover{background:var(--c-accent);color:#fff;box-shadow:var(--shadow-accent-sm)}
.share-btn .icon{width:2rem;height:2rem}

/* Related News */
.related-news{margin-block:var(--space-2xl);padding-block-start:var(--space-xl);border-block-start:1px solid var(--c-line-subtle)}
.related-title{font-size:var(--text-xl);font-weight:700;color:var(--c-text);margin-block-end:var(--space-xl);text-align:center;text-wrap:pretty}
.news-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,28rem),1fr));gap:var(--space-lg)}
.news-card{background:var(--c-surface);border-radius:var(--radius);overflow:hidden;box-shadow:var(--c-shadow-sm);transition:all var(--duration-base);cursor:pointer;border:1px solid var(--c-line-subtle)}
.news-card:hover{box-shadow:var(--c-shadow-lg);border-color:var(--c-accent)}
.news-image{aspect-ratio:16/9;position:relative;overflow:hidden}
.news-badge{position:absolute;inset-block-start:var(--space-sm);inset-inline-start:var(--space-sm);padding:var(--space-xs) var(--space-sm);background:var(--c-accent);color:#fff;border-radius:2rem;font-size:var(--text-xs);font-weight:600}
.news-body{padding:var(--space-lg)}
.news-date{font-size:var(--text-xs);color:var(--c-text-muted);margin-block-end:var(--space-xs);font-variant-numeric:tabular-nums}

/* Ad Slots - Layout Shift Prevention (CLS <0.1) */
.ad-slot{min-height:280px;padding:clamp(4rem,10vw,8rem) var(--space-md);border:1px dashed var(--c-line);font-size:var(--text-sm);margin-block:var(--space-lg);border-radius:var(--radius);background:var(--c-panel);contain:layout}

/* Video Player */
.video-player{position:relative;aspect-ratio:16/9;background:#000;overflow:hidden;margin-block:var(--space-lg);cursor:not-allowed;border-radius:var(--radius);box-shadow:var(--c-shadow-lg)}
.video-player[aria-expanded="true"]{cursor:pointer}
.video-poster{position:absolute;inset:0;background-size:cover;background-position:center;filter:brightness(0.85)}
.video-overlay{position:absolute;inset:0;background:rgba(0,0,0,0.55);backdrop-filter:blur(4px)}
.play-btn{inline-size:7rem;block-size:7rem;background:rgba(255,255,255,0.12);border:3px solid rgba(255,255,255,0.35);border-radius:50%;font-size:var(--text-xl);color:rgba(255,255,255,0.8);transition:all var(--duration-base);position:relative;box-shadow:0 0 30px rgba(0,0,0,0.25);will-change:transform}
.play-btn::before{content:'';position:absolute;inset:-1rem;border:2px solid rgba(255,255,255,0.25);border-radius:50%;animation:pulse-ring 2.5s cubic-bezier(0.25,0.46,0.45,0.94) infinite}
.play-btn::after{content:'';position:absolute;inset:-2rem;border:2px solid rgba(255,255,255,0.15);border-radius:50%;animation:pulse-ring 2.5s cubic-bezier(0.25,0.46,0.45,0.94) infinite;animation-delay:0.5s}
.countdown-ring{position:absolute;inset:-0.6rem;border-radius:50%;background:conic-gradient(var(--c-accent) 0%, var(--c-line-subtle) 0% 100%);box-shadow:0 0 0 6px rgba(0,0,0,0.2);mix-blend:normal}
.video-overlay:hover .play-btn{background:rgba(255,255,255,0.18);border-color:rgba(255,255,255,0.5);transform:scale(1.05)}
.video-overlay:hover .play-btn .icon{transform:scale(1.1)}
@keyframes pulse-ring{0%{transform:scale(0.9);opacity:0.8}60%{transform:scale(1.1);opacity:0.3}100%{transform:scale(1.15);opacity:0}}
.video-player[aria-expanded="true"] .play-btn{background:var(--c-accent);border-color:var(--c-accent);color:#fff;animation:glow 2s ease-in-out infinite}
@keyframes glow{0%,100%{box-shadow:0 0 20px rgba(215,53,2,0.35)}50%{box-shadow:0 0 40px rgba(215,53,2,0.5)}}
.video-player[aria-expanded="true"] .play-btn::before,.video-player[aria-expanded="true"] .play-btn::after{animation:none;border-color:transparent}
.video-timer{margin-block-start:var(--space-md);padding:var(--space-xs) var(--space-md);background:rgba(0,0,0,0.8);border-radius:2rem;color:#fff;font-size:var(--text-sm);backdrop-filter:blur(8px)}
.video-timer .icon{margin-inline-end:var(--space-xs)}
.video-unlocked{display:none;color:var(--c-success);font-weight:700;font-size:var(--text-base)}
.video-unlocked .icon{margin-inline-end:var(--space-xs)}
.video-player[aria-expanded="true"] .video-timer{display:none}
.video-player[aria-expanded="true"] .video-unlocked{display:block;margin-block-start:var(--space-md)}
.video-controls{position:absolute;inset-inline:0;inset-block-end:0;display:flex;align-items:center;gap:var(--space-sm);padding:var(--space-sm) var(--space-md);background:linear-gradient(0deg, rgba(0,0,0,0.65), rgba(0,0,0,0.2));color:#fff}
.video-control-btn{inline-size:3.2rem;block-size:3.2rem;border-radius:50%;display:flex;align-items:center;justify-content:center;background:rgba(255,255,255,0.12);border:1px solid rgba(255,255,255,0.25);color:#fff;transition:all var(--duration-fast)}
.video-control-btn:hover{background:rgba(255,255,255,0.2)}
.video-track{flex:1;height:6px;background:rgba(255,255,255,0.25);border-radius:999px;overflow:hidden}
.video-progress{height:100%;width:0%;background:var(--c-accent)}
.video-time{font-size:var(--text-xs);min-width:4.5rem;text-align:right}

/* Focus States */
:focus-visible{outline:2px solid var(--c-accent);outline-offset:2px;border-radius:var(--radius)}
.search-input:focus-visible,.newsletter-input:focus-visible{outline:none}

/* Live Region */
.live-region{position:absolute;left:-10000px;width:1px;height:1px;overflow:hidden}

/* 404 Page */
.error-hero{text-align:center;min-height:60vh;display:flex;flex-direction:column;align-items:center;justify-content:center;max-inline-size:60rem;margin-inline:auto}
.error-number{font-size:12rem;font-weight:900;color:var(--c-accent);line-height:1;margin-block-end:var(--space-xl)}
.error-hero .archive-title{margin-block-end:var(--space-lg)}
.error-message{font-size:var(--text-lg);margin-block-end:var(--space-2xl)}
.error-search{margin-block-end:var(--space-2xl)}
.error-actions{display:flex;gap:var(--space-lg);justify-content:center;flex-wrap:wrap}
.error-action-btn{display:inline-flex;align-items:center;gap:var(--space-sm)}
.error-popular{margin-block:var(--space-2xl)}

/* Component Utilities */
.grid-span-all{grid-column:1/-1}
.grid{gap:var(--space-lg)}
.icon-3xl{width:3em;height:3em;opacity:0.3}
.celeb-thumbnail,.news-thumbnail{width:100%;height:100%;object-fit:cover;position:absolute;inset:0}
.celeb-placeholder,.news-placeholder{font-size:3rem;opacity:0.3}
.footer-logo-text{font-weight:700;font-size:var(--text-lg)}

/* Ad Slots */
.ad-slot{margin-block:var(--space-xl);text-align:center}
.ad-slot ins{display:block;margin-inline:auto}
.ad-header_ad{margin-block-end:var(--space-lg)}
.ad-content_top_ad{margin-block:var(--space-lg) var(--space-xl)}
.ad-content_middle_ad{margin-block:var(--space-2xl)}
.ad-content_bottom_ad{margin-block:var(--space-xl) var(--space-lg)}
.ad-footer_ad{margin-block-start:var(--space-xl)}
.ad-archive_ad{margin-block:var(--space-xl);grid-column:1/-1}
.ad-celebrity_profile_ad{margin-block:var(--space-2xl)}

/* Archive Layout Simplification */
.archive-hero{text-align:center}
.archive-hero .search-wrapper{max-inline-size:55rem;margin-inline:auto}
.archive-hero .stats{justify-content:center}
.archive-hero > *{max-inline-size:60rem;margin-inline:auto}
.archive-hero > h1,.archive-hero > p{margin-inline:auto}
.archive-stats{margin-block-start:var(--space-xl)}

/* Responsive */
@media(max-width:480px){
.share-section{justify-content:center}
.share-title{width:100%;text-align:center;margin-block-end:var(--space-sm)}
.share-buttons{width:100%;justify-content:center;max-width:36rem}
.share-btn{width:3.2rem;height:3.2rem}
.share-btn .icon{width:1.8rem;height:1.8rem}
.meta-items-wrapper .meta-item{font-size:1.2rem}
.meta-items-wrapper .meta-item span,
.meta-items-wrapper .meta-item time{font-size:1.2rem}
}

@media(max-width:640px){
.share-section{gap:var(--space-sm)}
.share-buttons{justify-content:center}
.author-bio-dropdown{inset-inline-start:-2rem;min-width:calc(100vw - 4rem);max-width:calc(100vw - 4rem)}
}

@media(max-width:767px){
.nav-links{display:none}
.menu-btn{display:flex}
.hero{padding:var(--space-xl) var(--space-md)}
.stats{flex-direction:row;gap:var(--space-lg);justify-content:space-between}
.stat-item{flex-direction:column;align-items:center;gap:0}
.stat-value{font-size:var(--text-lg)}
.stat-label{font-size:1.1rem}
.search-bar{flex-direction:row;padding:0.3rem}
.search-input{padding:1rem 1.2rem;padding-inline-start:3.6rem;font-size:var(--text-sm)}
.search-btn{padding:0.8rem 1.6rem;font-size:var(--text-xs)}
.search-icon{inset-inline-start:1.2rem;inset-block-start:50%;transform:translateY(-50%)}
.grid-mobile-1{grid-template-columns:1fr}
.grid-mobile-2{grid-template-columns:repeat(2,1fr)}
.article-card{flex-direction:column}
.article-thumb{inline-size:100%;aspect-ratio:16/9}
.footer-content{display:grid;grid-template-columns:1fr 1fr;gap:var(--space-xl)}
.footer-brand{grid-column:1/-1}
.footer-bottom{flex-direction:column;gap:var(--space-lg)}
.newsletter{padding:var(--space-xl) var(--space-lg)}
.newsletter-form{flex-direction:column;padding:var(--space-md);border-radius:var(--radius-xl);max-inline-size:100%}
.newsletter-input{padding:1.2rem 1.8rem;width:100%;font-size:var(--text-base)}
.newsletter-btn{padding:1.2rem 2.4rem;width:100%;margin:0;margin-block-start:var(--space-md);border-radius:5rem;font-size:var(--text-base)}
.article-hero{aspect-ratio:16/9;border-radius:0}
.article-hero-content{padding:var(--space-lg) var(--space-md)}
.article-subtitle-wrapper{padding:var(--space-sm) var(--space-md);padding-inline-start:calc(var(--space-md) + 2rem);margin-block:var(--space-md) var(--space-md)}
.article-subtitle-wrapper::before{top:-0.6rem;left:-0.6rem;width:2.4rem;height:2.4rem;font-size:1.2rem;border-width:2px}
.article-subtitle{font-size:var(--text-base);line-height:1.6;color:var(--c-text);letter-spacing:0.01em;margin:0}
.article-meta{display:block!important;padding:var(--space-md)}
.author-info{display:grid;grid-template-columns:1fr auto;grid-template-rows:auto auto;gap:var(--space-xs);width:100%;padding-block-end:var(--space-lg);margin-block-end:var(--space-lg);border-block-end:1px solid var(--c-line-subtle)}
.author-name{grid-column:1;grid-row:1}
.author-bio-trigger{grid-column:2;grid-row:1}
.author-role{grid-column:1/3;grid-row:2}
.meta-items-wrapper{display:grid!important;grid-template-columns:1fr 1fr;gap:var(--space-md);width:100%;margin-block-start:0}
.meta-items-wrapper .meta-item{margin:0;font-size:1.3rem}
.meta-items-wrapper .meta-item .icon{width:14px;height:14px}
.article-content{padding:var(--space-lg) var(--space-md)}
.info-box{padding:var(--space-sm) var(--space-md)}
.share-section{flex-direction:column;align-items:center;text-align:center;gap:var(--space-lg)}
.share-title{width:auto;margin-block-end:0}
.ad-slot{min-height:100px}
.share-buttons{justify-content:center;max-width:40rem;width:100%}
.news-grid{grid-template-columns:1fr}
.author-name-wrapper{position:static}
.author-bio-dropdown{z-index:1000}
.author-bio-dropdown.active{opacity:1!important;visibility:visible!important}
.author-bio-dropdown::before{left:var(--arrow-position,2rem)!important}
.gallery-wrapper{flex-direction:row;justify-content:center;align-items:center}
.gallery-grid{grid-template-columns:1fr;max-inline-size:30rem}
.gallery-nav{position:static}
.avatar-sm{inline-size:4rem;block-size:4rem}
.social-grid{grid-template-columns:repeat(2,1fr)}
.news-item{flex-direction:column;gap:var(--space-md)}
.news-date-box{display:flex;align-items:center;gap:var(--space-md)}
.news-month,.news-day,.news-year{display:inline}
.news-day{font-size:var(--text-lg);margin:0}
.article-content table{display:block;overflow-x:auto;-webkit-overflow-scrolling:touch;width:100%;margin-inline:-var(--space-md);padding-inline:var(--space-md);max-width:calc(100% + 2 * var(--space-md));font-size:var(--text-xs)}
.article-content table th,.article-content table td{padding:var(--space-sm) var(--space-md);white-space:nowrap}
}

@media(min-width:768px){
.nav-links{display:flex!important;position:static!important;inline-size:auto!important;padding:0.3rem!important;border:0!important;box-shadow:none!important;flex-direction:row!important;backdrop-filter:none!important}
.menu-btn{display:none}
.hero{border-radius:var(--radius-lg)}
.grid-desktop-2{grid-template-columns:repeat(2,1fr)}
.grid-desktop-3{grid-template-columns:repeat(3,1fr)}
.grid-desktop-4{grid-template-columns:repeat(4,1fr)}
.grid-auto{grid-template-columns:repeat(auto-fill,minmax(min(100%,20rem),1fr))}
.footer-content{grid-template-columns:2fr 1fr 1fr}
.footer-brand{grid-column:auto}
.meta-items-wrapper{display:contents}
.social-grid{grid-template-columns:repeat(3,1fr)}
.gallery-nav{position:absolute;inset-block-start:50%}
.gallery-nav[data-dir="prev"]{inset-inline-start:-1.9rem}
.gallery-nav[data-dir="next"]{inset-inline-end:-1.9rem}
.avatar-sm{inline-size:6rem;block-size:6rem}
.avatar-sm::after{font-size:var(--text-lg)}
.card-name{font-size:var(--text-base)}
.card-category{font-size:var(--text-sm)}
.news-grid{grid-template-columns:repeat(3,1fr)}
}

@media print{
.header,.footer,.newsletter,.search-bar,.ad-slot,.related-news,button{display:none}
.main{padding:0}
.article-content{box-shadow:none;border:none}
body{color:#000;font-size:12pt;line-height:1.5}
h2,h3{page-break-after:avoid}
}

/* Utility Classes - Extract Inline Styles */
.grid-gap-md{gap:var(--space-md)}
.grid-gap-xs{gap:var(--space-xs)}
.grid-gap-lg{gap:var(--space-lg)}
.mb-md{margin-bottom:var(--space-md)}
.mb-xl{margin-bottom:var(--space-xl)}
.my-lg{margin-block:var(--space-lg)}
.max-w-80{max-width:80rem;margin-inline:auto}
.text-center{text-align:center}
.my-2xl{margin-block:var(--space-2xl)}
.flex-col{flex-direction:column}
.icon-play-anim{transition:transform var(--duration-fast);margin-left:0.3rem}
.section-divider{margin-block-start:var(--space-xl);padding-block-start:var(--space-xl);border-block-start:1px solid var(--c-line-subtle)}
.section-title-lg{font-size:var(--text-lg);font-weight:700;margin-block-end:var(--space-md);color:var(--c-text)}

/* Breadcrumbs */
.breadcrumbs{margin-block-end:var(--space-lg)}
.breadcrumb-list{display:flex;flex-wrap:wrap;align-items:center;gap:var(--space-xs);list-style:none;font-size:var(--text-sm);color:var(--c-text-muted)}
.breadcrumb-item{display:flex;align-items:center;gap:var(--space-xs)}
.breadcrumb-item a{color:var(--c-text-muted);transition:color var(--duration-fast)}
.breadcrumb-item a:hover{color:var(--c-accent)}
.breadcrumb-item.current span{color:var(--c-text);font-weight:500}
.breadcrumb-item .separator{display:flex;align-items:center;opacity:0.4}