/* =========================================================
   AXELID — Design Tokens
   Palette: Ink #12132B · Flame #FF5A36 · Gold #FFC857 · Cloud #F5F6FA · Slate #5B6478
   Display: Space Grotesk · Body: Inter · Utility/data: JetBrains Mono
   ========================================================= */

:root{
	--ink:#12132B;
	--ink-soft:#1B1D3D;
	--flame:#FF5A36;
	--flame-dark:#E0431F;
	--gold:#FFC857;
	--cloud:#F5F6FA;
	--white:#FFFFFF;
	--slate:#5B6478;
	--slate-light:#8A93A6;
	--border:#E7E8F1;

	--font-display:'Space Grotesk', sans-serif;
	--font-body:'Inter', sans-serif;
	--font-mono:'JetBrains Mono', monospace;

	--radius-sm:10px;
	--radius-md:18px;
	--radius-lg:28px;

	--shadow-sm:0 4px 16px rgba(18,19,43,0.06);
	--shadow-md:0 12px 40px rgba(18,19,43,0.10);
	--shadow-lg:0 24px 64px rgba(18,19,43,0.16);

	--container:1200px;
}

@media (prefers-reduced-motion: reduce){
	*{ animation-duration:0.01ms !important; animation-iteration-count:1 !important; transition-duration:0.01ms !important; scroll-behavior:auto !important; }
}

*{ box-sizing:border-box; }
html{ scroll-behavior:smooth; -webkit-text-size-adjust:100%; }
html, body{ max-width:100%; overflow-x:hidden; }
body{
	margin:0;
	font-family:var(--font-body);
	color:var(--ink);
	background:var(--white);
	line-height:1.6;
	-webkit-font-smoothing:antialiased;
}
img{ max-width:100%; height:auto; display:block; }
iframe, video, embed, object, table{ max-width:100%; }
a{ color:inherit; text-decoration:none; }
h1,h2,h3,h4{ font-family:var(--font-display); line-height:1.12; margin:0 0 .5em; letter-spacing:-0.01em; word-wrap:break-word; }
p{ margin:0 0 1em; color:var(--slate); }
ul{ margin:0; padding:0; list-style:none; }
button{ font-family:inherit; cursor:pointer; }
:focus-visible{ outline:3px solid var(--flame); outline-offset:2px; }
.screen-reader-text{ position:absolute !important; left:-9999px; }

.container{ max-width:var(--container); margin:0 auto; padding:0 24px; }
.section{ padding:96px 0; }
@media (max-width:768px){ .section{ padding:64px 0; } }
@media (max-width:480px){ .container{ padding:0 16px; } .section{ padding:48px 0; } }

/* ---------------- Generic content (post/page body, CPT descriptions) ---------------- */
.page-content{ font-size:16px; color:var(--slate); }
.page-content > *:first-child{ margin-top:0; }
.page-content h1,.page-content h2,.page-content h3,.page-content h4{ color:var(--ink); margin-top:1.5em; }
.page-content ul,.page-content ol{ list-style:revert; padding-left:1.3em; margin:0 0 1.2em; }
.page-content li{ margin-bottom:.4em; }
.page-content img{ border-radius:var(--radius-md); margin:1.2em 0; }
.page-content figure{ margin:1.2em 0; }
.page-content blockquote{ margin:1.6em 0; padding:4px 0 4px 20px; border-left:3px solid var(--flame); font-style:italic; color:var(--ink); }
.page-content a{ color:var(--flame); text-decoration:underline; text-underline-offset:2px; }
.page-content pre{ overflow-x:auto; background:var(--cloud); padding:16px; border-radius:var(--radius-sm); }
.page-content table{ width:100%; border-collapse:collapse; display:block; overflow-x:auto; -webkit-overflow-scrolling:touch; }
.page-content th,.page-content td{ padding:10px 14px; border:1px solid var(--border); text-align:left; }

.eyebrow{
	display:inline-block;
	font-family:var(--font-mono);
	font-size:12px;
	font-weight:500;
	letter-spacing:0.14em;
	color:var(--flame);
	margin-bottom:14px;
}
.eyebrow.center{ display:block; text-align:center; }

.section-head{ max-width:640px; margin-bottom:56px; }
.section-head h2{ font-size:clamp(28px,4vw,42px); }
.section-head--split{ display:flex; justify-content:space-between; align-items:flex-end; max-width:none; gap:24px; flex-wrap:wrap; }

/* ---------------- Buttons ---------------- */
.btn{
	display:inline-flex; align-items:center; gap:8px;
	padding:14px 26px; border-radius:999px;
	font-weight:600; font-size:15px;
	border:1px solid transparent;
	transition:transform .25s ease, box-shadow .25s ease, background .25s ease;
	white-space:nowrap;
}
.btn-sm{ padding:10px 18px; font-size:14px; }
.btn-primary{ background:var(--flame); color:var(--white); box-shadow:0 8px 24px rgba(255,90,54,0.35); }
.btn-primary:hover{ background:var(--flame-dark); transform:translateY(-2px); }
.btn-gold{ background:var(--gold); color:var(--ink); box-shadow:0 8px 24px rgba(255,200,87,0.35); }
.btn-gold:hover{ transform:translateY(-2px); }
.btn-ghost{ border-color:var(--border); color:var(--ink); }
.btn-ghost:hover{ border-color:var(--ink); background:var(--cloud); }

/* ---------------- Header ---------------- */
.site-header{
	position:sticky; top:0; z-index:100;
	background:rgba(255,255,255,0.85);
	backdrop-filter:blur(12px);
	border-bottom:1px solid var(--border);
}
.header-inner{ display:flex; align-items:center; justify-content:space-between; padding:16px 24px; gap:16px; flex-wrap:nowrap; }
.site-branding{ min-width:0; flex-shrink:1; }
.site-branding img{ max-height:40px; width:auto; }
.site-title{ font-family:var(--font-display); font-weight:700; font-size:22px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; max-width:44vw; }
.nav-menu{ display:flex; gap:32px; }
.nav-menu a{ font-weight:500; font-size:15px; position:relative; padding:6px 0; }
.nav-menu a::after{ content:''; position:absolute; left:0; bottom:0; width:0; height:2px; background:var(--flame); transition:width .25s ease; }
.nav-menu a:hover::after{ width:100%; }
.header-actions{ display:flex; align-items:center; gap:16px; flex-shrink:0; }
.header-phone{ font-family:var(--font-mono); font-size:14px; display:none; }
@media (min-width:1024px){ .header-phone{ display:inline; } }
.menu-toggle{ display:none; flex-direction:column; gap:5px; background:none; border:none; padding:6px; flex-shrink:0; }
.menu-toggle span{ width:22px; height:2px; background:var(--ink); }
.mobile-nav-cta{ display:none; }

@media (max-width:900px){
	.primary-nav{ position:fixed; inset:72px 0 0 0; background:var(--white); transform:translateX(100%); transition:transform .3s ease; padding:32px 24px; overflow-y:auto; z-index:99; }
	.primary-nav.is-open{ transform:translateX(0); }
	.nav-menu{ flex-direction:column; gap:20px; }
	.menu-toggle{ display:flex; }
	.header-phone{ display:none; }
	.mobile-nav-cta{ display:inline-flex; margin-top:28px; }
}

/* Very small phones: the header CTA button competes with the logo and the
   hamburger for space, so it moves into the mobile nav panel instead. */
@media (max-width:480px){
	.header-inner{ padding:14px 16px; gap:10px; }
	.header-actions{ gap:10px; }
	.header-actions .btn-primary{ display:none; }
	.site-title{ font-size:19px; max-width:52vw; }
}

/* ---------------- Hero ---------------- */
.hero{ position:relative; background:var(--ink); color:var(--white); overflow:hidden; padding:100px 0 0; }
@media (max-width:600px){ .hero{ padding-top:56px; } }
.hero-glow{ position:absolute; top:-200px; right:-150px; width:600px; height:600px; background:radial-gradient(circle, rgba(255,90,54,0.35), transparent 70%); filter:blur(20px); pointer-events:none; }
.hero-grid{ position:relative; display:grid; grid-template-columns:1.1fr 0.9fr; gap:48px; align-items:center; padding-bottom:80px; }
.hero-copy h1{ font-size:clamp(36px,5.5vw,64px); color:var(--white); }
.hero-subtitle{ color:rgba(255,255,255,0.72); font-size:18px; max-width:520px; }
.hero-actions{ display:flex; gap:16px; margin-top:32px; flex-wrap:wrap; }
.hero .btn-ghost{ border-color:rgba(255,255,255,0.3); color:var(--white); }
.hero .btn-ghost:hover{ background:rgba(255,255,255,0.08); border-color:var(--white); }

.hero-visual{ position:relative; height:380px; }
.dash-card{ position:absolute; background:var(--ink-soft); border:1px solid rgba(255,255,255,0.08); border-radius:var(--radius-lg); padding:24px; box-shadow:var(--shadow-lg); }
.dash-card--main{ inset:20px 0 60px 20px; width:320px; color:var(--white); }
.dash-row{ display:flex; justify-content:space-between; font-family:var(--font-mono); font-size:13px; padding:8px 0; border-bottom:1px solid rgba(255,255,255,0.08); }
.dash-pill{ padding:2px 10px; border-radius:999px; font-weight:600; }
.dash-pill.up{ background:rgba(255,200,87,0.15); color:var(--gold); }
.dash-chart{ margin-top:16px; color:var(--flame); }
.dash-card--float{ right:0; bottom:0; width:220px; display:flex; flex-direction:column; gap:6px; animation:float 4s ease-in-out infinite; }
.dash-float-label{ font-family:var(--font-mono); font-size:11px; color:var(--slate-light); }
.dash-float-value{ font-family:var(--font-display); font-size:26px; font-weight:700; color:var(--gold); }
@keyframes float{ 0%,100%{ transform:translateY(0);} 50%{ transform:translateY(-10px);} }

@media (max-width:900px){
	.hero-grid{ grid-template-columns:1fr; padding-bottom:56px; }
	.hero-visual{ height:280px; }
	.dash-card--main{ width:auto; right:20px; }
}
@media (max-width:480px){
	.hero-visual{ height:240px; }
	.dash-card{ padding:18px; }
	.dash-card--main{ inset:16px 0 76px 0; }
	.dash-card--float{ width:180px; padding:16px; }
	.dash-float-value{ font-size:22px; }
	.hero-actions{ gap:12px; }
	.hero-actions .btn{ flex:1 1 auto; justify-content:center; }
}

/* ---------------- Ticker (signature element) ---------------- */
.ticker{ background:var(--flame); color:var(--white); overflow:hidden; border-top:1px solid rgba(255,255,255,0.15); }
.ticker-track{ display:flex; width:max-content; animation:ticker-scroll 28s linear infinite; }
.ticker-item{ font-family:var(--font-mono); font-size:13px; letter-spacing:0.04em; padding:14px 40px; display:flex; align-items:center; gap:10px; white-space:nowrap; border-right:1px solid rgba(255,255,255,0.25); }
.ticker-item strong{ font-family:var(--font-display); font-weight:700; font-size:15px; }
@keyframes ticker-scroll{ from{ transform:translateX(0);} to{ transform:translateX(-50%);} }

/* ---------------- Services / bento ---------------- */
.bento-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:24px; }
.service-card{ position:relative; background:var(--cloud); border-radius:var(--radius-md); padding:32px; overflow:hidden; transition:transform .3s ease, box-shadow .3s ease, border-color .3s ease; border:1px solid var(--border); }
.service-card:hover{ transform:translateY(-6px); box-shadow:var(--shadow-md); border-color:var(--flame); }
.service-card.bento-wide{ grid-column:span 3; display:grid; grid-template-columns:auto 1fr auto; align-items:center; gap:24px; }
.service-bg{ position:absolute; inset:0; opacity:0.08; z-index:0; }
.service-bg img{ width:100%; height:100%; object-fit:cover; }
.service-top{ position:relative; z-index:1; display:flex; align-items:center; justify-content:space-between; margin-bottom:18px; }
.service-icon{
	font-size:24px !important; width:48px !important; height:48px !important; line-height:48px !important;
	color:var(--white); background:linear-gradient(135deg, var(--flame), var(--flame-dark));
	border-radius:14px; display:inline-flex; align-items:center; justify-content:center;
	box-shadow:0 8px 20px rgba(255,90,54,0.28);
}
.service-index{ font-family:var(--font-mono); font-size:13px; color:var(--slate-light); letter-spacing:.05em; }
.service-category{ position:relative; z-index:1; display:inline-block; font-family:var(--font-mono); font-size:11px; letter-spacing:.08em; color:var(--flame); text-transform:uppercase; background:rgba(255,90,54,0.08); padding:4px 10px; border-radius:999px; margin-bottom:12px; }
.service-card h3{ position:relative; z-index:1; font-size:20px; margin-top:0; }
.service-card p{ position:relative; z-index:1; font-size:15px; margin-bottom:16px; }
.service-link{ position:relative; z-index:1; font-weight:600; font-size:14px; color:var(--ink); display:inline-flex; gap:6px; transition:gap .25s ease, color .25s ease; }
.service-card:hover .service-link{ gap:10px; color:var(--flame); }
.service-card.bento-wide .service-top{ margin-bottom:0; }
.service-card.bento-wide h3, .service-card.bento-wide p{ margin-top:0; margin-bottom:0; }
@media (max-width:900px){
	.bento-grid{ grid-template-columns:1fr 1fr; }
	.service-card.bento-wide{ grid-column:span 2; grid-template-columns:1fr; text-align:left; }
}
@media (max-width:600px){ .bento-grid{ grid-template-columns:1fr; } .service-card.bento-wide{ grid-column:span 1; } }

/* ---------------- Partners ---------------- */
.partners-section{ padding-top:80px; padding-bottom:80px; background:var(--cloud); }
@media (max-width:768px){ .partners-section{ padding-top:56px; padding-bottom:56px; } }
.partner-grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:20px; }
.partner-card{
	position:relative;
	background:var(--white);
	border:1px solid var(--border);
	border-radius:var(--radius-md);
	padding:28px 20px;
	display:flex; flex-direction:column; align-items:center; gap:10px; text-align:center;
	transition:transform .3s ease, box-shadow .3s ease, border-color .3s ease;
}
.partner-card:hover{ transform:translateY(-4px); box-shadow:var(--shadow-md); border-color:var(--ink); }
.partner-card-link{ position:absolute; inset:0; border-radius:inherit; }
.partner-logo{ height:56px; display:flex; align-items:center; justify-content:center; }
.partner-logo img{ max-height:56px; width:auto; object-fit:contain; filter:grayscale(1) opacity(0.75); transition:filter .3s ease; }
.partner-card:hover .partner-logo img{ filter:none; }
.partner-monogram{
	width:56px; height:56px; border-radius:16px;
	display:flex; align-items:center; justify-content:center;
	font-family:var(--font-display); font-weight:700; font-size:22px; color:var(--white);
	background:linear-gradient(135deg, var(--ink), var(--ink-soft));
	transition:background .3s ease;
}
.partner-card:hover .partner-monogram{ background:linear-gradient(135deg, var(--flame), var(--flame-dark)); }
.partner-name{ font-family:var(--font-display); font-weight:600; font-size:15px; color:var(--ink); }
.partner-tag{ font-family:var(--font-mono); font-size:11px; letter-spacing:.05em; color:var(--slate-light); text-transform:uppercase; }
.partner-note{ text-align:center; font-size:13px; color:var(--slate-light); margin-top:32px; max-width:640px; margin-left:auto; margin-right:auto; }
@media (max-width:900px){ .partner-grid{ grid-template-columns:repeat(3,1fr); } }
@media (max-width:600px){ .partner-grid{ grid-template-columns:repeat(2,1fr); } }

/* ---------------- Process ---------------- */
.process-section{ background:var(--cloud); }
.process-grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:24px; }
.process-step{ background:var(--white); border-radius:var(--radius-md); padding:28px; border:1px solid var(--border); }
.process-num{ font-family:var(--font-mono); color:var(--flame); font-size:14px; font-weight:600; }
.process-step h3{ margin-top:12px; font-size:19px; }
@media (max-width:900px){ .process-grid{ grid-template-columns:1fr 1fr; } }
@media (max-width:600px){ .process-grid{ grid-template-columns:1fr; } }

/* ---------------- Portfolio ---------------- */
.portfolio-grid{ display:grid; grid-template-columns:repeat(2,1fr); gap:24px; }
.portfolio-card{ display:block; border-radius:var(--radius-md); overflow:hidden; background:var(--cloud); position:relative; box-shadow:var(--shadow-sm); transition:transform .3s ease; }
.portfolio-card:hover{ transform:translateY(-6px); }
.portfolio-thumb{ aspect-ratio:16/10; overflow:hidden; background:var(--ink); }
.portfolio-thumb img{ width:100%; height:100%; object-fit:cover; transition:transform .4s ease; }
.portfolio-card:hover .portfolio-thumb img{ transform:scale(1.06); }
.portfolio-meta{ padding:20px 24px; }
.portfolio-client{ font-family:var(--font-mono); font-size:12px; color:var(--flame); text-transform:uppercase; letter-spacing:.06em; }
.portfolio-meta h3{ margin-top:6px; font-size:20px; }
.empty-note{ padding:32px; background:var(--cloud); border-radius:var(--radius-md); text-align:center; grid-column:1/-1; }
@media (max-width:768px){ .portfolio-grid{ grid-template-columns:1fr; } }

/* ---------------- Filters (portfolio archive) ---------------- */
.filter-bar{ display:flex; gap:12px; flex-wrap:wrap; margin-bottom:40px; }
.filter-bar a{ padding:8px 18px; border-radius:999px; border:1px solid var(--border); font-size:14px; font-weight:500; }
.filter-bar a.active, .filter-bar a:hover{ background:var(--ink); color:var(--white); border-color:var(--ink); }

/* ---------------- Testimonials (auto-scrolling marquee, left-to-right) ---------------- */
.testimonial-slider{ overflow:hidden; -webkit-mask-image:linear-gradient(90deg, transparent, #000 5%, #000 95%, transparent); mask-image:linear-gradient(90deg, transparent, #000 5%, #000 95%, transparent); }
.testimonial-track{ display:flex; width:max-content; gap:24px; padding:4px 0 8px; animation:testimonial-scroll 60s linear infinite; }
.testimonial-slider:hover .testimonial-track{ animation-play-state:paused; }
@keyframes testimonial-scroll{ from{ transform:translateX(-50%);} to{ transform:translateX(0);} }
.testimonial-card{ flex:0 0 340px; width:340px; background:var(--cloud); border-radius:var(--radius-md); padding:28px; margin:0; }
.stars{ color:var(--border); font-size:16px; margin-bottom:12px; }
.star.filled{ color:var(--gold); }
.testimonial-card blockquote{ margin:0 0 20px; font-size:16px; color:var(--ink); }
.testimonial-card figcaption{ display:flex; align-items:center; gap:12px; }
.testimonial-card figcaption img{ width:44px; height:44px; border-radius:50%; object-fit:cover; }
.testimonial-name{ display:block; font-weight:600; font-size:14px; }
.testimonial-company{ display:block; font-size:13px; color:var(--slate-light); }
@media (max-width:600px){ .testimonial-card{ flex-basis:280px; width:280px; } }
@media (prefers-reduced-motion: reduce){ .testimonial-track{ animation:none; flex-wrap:wrap; width:auto; } }

/* ---------------- CTA ---------------- */
.cta-section{ background:var(--ink); }
.cta-inner{ text-align:center; max-width:640px; }
.cta-inner h2{ color:var(--white); font-size:clamp(26px,4vw,38px); }
.cta-inner p{ color:rgba(255,255,255,0.7); margin-bottom:28px; }

/* ---------------- Page hero (interior pages) ---------------- */
.page-hero{ background:var(--ink); color:var(--white); padding:120px 0 64px; text-align:left; }
.page-hero h1{ color:var(--white); font-size:clamp(32px,5vw,48px); }
.page-hero-subtitle{ color:rgba(255,255,255,0.7); max-width:600px; }
@media (max-width:600px){ .page-hero{ padding:88px 0 44px; } }

/* ---------------- Footer ---------------- */
.site-footer{ background:var(--ink); color:rgba(255,255,255,0.75); }
.footer-grid{ display:grid; grid-template-columns:1.4fr 1fr 1fr 1fr 1.2fr; gap:32px; padding:80px 24px 56px; }
.footer-title{ font-family:var(--font-display); font-weight:700; font-size:22px; color:var(--white); }
.footer-tagline{ color:rgba(255,255,255,0.6); font-size:14px; margin-top:12px; }
.widget-title{ color:var(--white); font-size:15px; margin-bottom:16px; font-family:var(--font-display); }
.footer-menu li, .footer-contact li{ margin-bottom:10px; font-size:14px; }
.footer-menu a{ color:rgba(255,255,255,0.7); }
.footer-menu a:hover{ color:var(--gold); }
.footer-contact a{ color:rgba(255,255,255,0.7); }
.footer-social{ display:flex; gap:14px; margin-top:16px; flex-wrap:wrap; }
.footer-social li a{ font-size:13px; color:rgba(255,255,255,0.7); border:1px solid rgba(255,255,255,0.2); padding:6px 14px; border-radius:999px; }
.footer-social li a:hover{ border-color:var(--gold); color:var(--gold); }
.newsletter-form{ display:flex; gap:8px; margin-top:16px; }
.newsletter-form input{ flex:1; padding:10px 14px; border-radius:999px; border:1px solid rgba(255,255,255,0.2); background:rgba(255,255,255,0.05); color:var(--white); font-size:14px; }
.newsletter-form input::placeholder{ color:rgba(255,255,255,0.4); }
.footer-bottom{ border-top:1px solid rgba(255,255,255,0.1); }
.footer-bottom-inner{ display:flex; justify-content:space-between; align-items:center; padding:24px; font-size:13px; flex-wrap:wrap; gap:12px; }
.footer-legal{ display:flex; gap:20px; }
.footer-legal a:hover{ color:var(--gold); }
@media (max-width:1024px){ .footer-grid{ grid-template-columns:1fr 1fr; } }
@media (max-width:600px){ .footer-grid{ grid-template-columns:1fr; } }

/* ---------------- Generic content blocks reused across interior pages ---------------- */
.card-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:24px; }
@media (max-width:900px){ .card-grid{ grid-template-columns:1fr 1fr; } }
@media (max-width:600px){ .card-grid{ grid-template-columns:1fr; } }
.info-card{ background:var(--cloud); border-radius:var(--radius-md); padding:28px; }
.info-card h3{ font-size:18px; }
.service-thumb{ border-radius:var(--radius-sm); overflow:hidden; aspect-ratio:16/10; margin-bottom:16px; }
.service-thumb img{ width:100%; height:100%; object-fit:cover; }

/* Accordion (FAQ) */
.accordion-item{ border-bottom:1px solid var(--border); }
.accordion-trigger{ width:100%; display:flex; justify-content:space-between; align-items:center; padding:22px 0; background:none; border:none; text-align:left; font-family:var(--font-display); font-size:18px; font-weight:600; }
.accordion-trigger .plus{ transition:transform .3s ease; font-size:22px; color:var(--flame); }
.accordion-item.is-open .plus{ transform:rotate(45deg); }
.accordion-panel{ max-height:0; overflow:hidden; transition:max-height .3s ease; }
.accordion-panel-inner{ padding-bottom:22px; color:var(--slate); }

/* Stat strip (about page etc) */
.stat-strip{ display:grid; grid-template-columns:repeat(4,1fr); gap:24px; text-align:center; }
.stat-strip .stat-value{ font-family:var(--font-display); font-size:36px; font-weight:700; color:var(--flame); }
.stat-strip .stat-label{ font-family:var(--font-mono); font-size:12px; color:var(--slate); letter-spacing:.05em; }
@media (max-width:768px){ .stat-strip{ grid-template-columns:1fr 1fr; } }

/* Contact page */
.contact-grid{ display:grid; grid-template-columns:1fr 1fr; gap:48px; align-items:start; }
.contact-form input, .contact-form textarea, .contact-form select{
	width:100%; padding:14px 16px; border-radius:var(--radius-sm); border:1px solid var(--border); font-family:inherit; font-size:15px; margin-bottom:16px;
}
.contact-form label{ font-size:13px; font-weight:600; display:block; margin-bottom:6px; }
@media (max-width:900px){ .contact-grid{ grid-template-columns:1fr; } }

/* ---------------- Blog layout with sidebar ---------------- */
.blog-layout{ display:grid; grid-template-columns:1fr 320px; gap:48px; align-items:start; }
.blog-layout-main{ min-width:0; }
.blog-sidebar{ display:flex; flex-direction:column; gap:24px; position:sticky; top:96px; }
.sidebar-card{ background:var(--cloud); border-radius:var(--radius-md); padding:24px; }
.sidebar-card-title{ font-size:16px; margin:0 0 16px; }
.sidebar-post-list{ display:flex; flex-direction:column; gap:14px; }
.sidebar-post{ display:flex; align-items:center; gap:12px; }
.sidebar-post-thumb{ flex-shrink:0; width:56px; height:56px; border-radius:var(--radius-sm); overflow:hidden; display:block; background:var(--ink); }
.sidebar-post-thumb img{ width:100%; height:100%; object-fit:cover; }
.sidebar-post-thumb-fallback{ display:flex; align-items:center; justify-content:center; width:100%; height:100%; background:linear-gradient(135deg, var(--ink), var(--ink-soft)); }
.sidebar-post-thumb-fallback .dashicons{ font-size:20px; width:20px; height:20px; color:rgba(255,255,255,0.4); }
.sidebar-post-rank{ flex-shrink:0; width:32px; font-family:var(--font-mono); font-weight:700; font-size:16px; color:var(--flame); }
.sidebar-post-meta{ min-width:0; display:flex; flex-direction:column; gap:2px; }
.sidebar-post-title{ font-size:14px; font-weight:600; color:var(--ink); display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; }
.sidebar-post-title:hover{ color:var(--flame); }
.sidebar-post-date{ font-family:var(--font-mono); font-size:11px; color:var(--slate-light); }
.sidebar-post-empty{ font-size:13px; color:var(--slate-light); }
@media (max-width:1024px){
	.blog-layout{ grid-template-columns:1fr 260px; gap:32px; }
}
@media (max-width:900px){
	.blog-layout{ grid-template-columns:1fr; }
	.blog-sidebar{ position:static; flex-direction:row; flex-wrap:wrap; }
	.blog-sidebar .sidebar-card{ flex:1 1 260px; }
}
@media (max-width:600px){ .blog-sidebar{ flex-direction:column; } }

/* ---------------- Author box ---------------- */
.author-box{ display:flex; gap:16px; align-items:flex-start; background:var(--cloud); border-radius:var(--radius-md); padding:24px; margin:40px 0; }
.author-box img{ border-radius:50%; flex-shrink:0; }
.author-box-label{ font-family:var(--font-mono); font-size:11px; letter-spacing:.06em; text-transform:uppercase; color:var(--flame); }
.author-box-name{ margin:4px 0 8px; font-size:18px; }
.author-box-bio{ font-size:14px; margin:0; }
.post-author-link{ color:inherit; font-weight:600; }
.post-author-link:hover{ color:var(--flame); }

/* ---------------- Comments ---------------- */
.comments-area{ max-width:760px; }
.comments-area > h3{ font-size:22px; margin-bottom:24px; }
.comment-list{ display:flex; flex-direction:column; gap:20px; }
.comment-list .children{ list-style:none; margin:20px 0 0; padding-left:32px; display:flex; flex-direction:column; gap:20px; }
.comment-body{ background:var(--cloud); border-radius:var(--radius-md); padding:20px 24px; }
.comment-author .avatar{ border-radius:50%; float:left; margin-right:14px; }
.comment-author .fn{ font-style:normal; font-weight:600; color:var(--ink); }
.comment-metadata{ display:block; font-family:var(--font-mono); font-size:11px; color:var(--slate-light); margin-bottom:8px; }
.comment-metadata a{ color:inherit; }
.comment-content p{ margin:0 0 .6em; font-size:15px; }
.comment-reply-link{ font-size:13px; font-weight:600; color:var(--flame); }
.comment-respond{ margin-top:40px; }
.comment-respond .comment-reply-title{ font-size:20px; margin-bottom:16px; }
.comment-form p{ margin-bottom:16px; }
.comment-form label{ display:block; font-size:13px; font-weight:600; margin-bottom:6px; }
.comment-form input[type="text"],
.comment-form input[type="email"],
.comment-form input[type="url"],
.comment-form textarea{
	width:100%; padding:14px 16px; border-radius:var(--radius-sm); border:1px solid var(--border); font-family:inherit; font-size:15px;
}
.comment-form .form-submit{ margin-bottom:0; }
.comment-form input#submit{
	display:inline-flex; align-items:center; gap:8px; padding:14px 26px; border-radius:999px; font-weight:600; font-size:15px;
	border:1px solid transparent; background:var(--flame); color:var(--white); cursor:pointer;
}
.comment-form input#submit:hover{ background:var(--flame-dark); }
@media (max-width:600px){ .comment-list .children{ padding-left:16px; } }

/* ---------------- Newsletter form notices ---------------- */
.form-notice{ font-size:13px; margin-top:10px; padding:8px 14px; border-radius:999px; display:inline-block; }
.form-notice--ok{ background:rgba(255,200,87,0.18); color:var(--gold); }
.form-notice--err{ background:rgba(255,90,54,0.15); color:#FFB199; }

/* ---------------- Back to top ---------------- */
.back-to-top{
	position:fixed; right:24px; bottom:24px; z-index:90;
	width:48px; height:48px; border-radius:50%; border:none;
	background:var(--ink); color:var(--white); font-size:18px;
	display:flex; align-items:center; justify-content:center;
	box-shadow:var(--shadow-md); cursor:pointer;
	opacity:0; visibility:hidden; transform:translateY(12px);
	transition:opacity .25s ease, transform .25s ease, background .25s ease;
}
.back-to-top.is-visible{ opacity:1; visibility:visible; transform:translateY(0); }
.back-to-top:hover{ background:var(--flame); }
@media (max-width:600px){ .back-to-top{ right:16px; bottom:16px; width:44px; height:44px; } }

/* Blog cards */
.blog-section{ background:var(--cloud); }
.blog-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:28px; }
.blog-card{ display:block; }
.blog-card .thumb{ border-radius:var(--radius-md); overflow:hidden; aspect-ratio:16/10; margin-bottom:16px; }
.blog-card .thumb img{ width:100%; height:100%; object-fit:cover; transition:transform .4s ease; }
.blog-card:hover .thumb img{ transform:scale(1.05); }
.blog-thumb-fallback{ display:flex; align-items:center; justify-content:center; background:linear-gradient(135deg, var(--ink), var(--ink-soft)); }
.blog-thumb-fallback .dashicons{ font-size:36px; width:36px; height:36px; color:rgba(255,255,255,0.35); }
.blog-meta{ font-family:var(--font-mono); font-size:12px; color:var(--slate-light); margin-bottom:8px; }
.blog-card h3{ font-size:19px; }
@media (max-width:900px){ .blog-grid{ grid-template-columns:1fr 1fr; } }
@media (max-width:600px){ .blog-grid{ grid-template-columns:1fr; } }

/* 404 */
.error-404{ text-align:center; padding:140px 0; }
.error-404 h1{ font-size:120px; color:var(--flame); margin:0; }
@media (max-width:600px){
	.error-404{ padding:80px 0; }
	.error-404 h1{ font-size:72px; }
}