/*
Theme Name: Shweta Yadav
Theme URI: https://shwetayadav.in/
Author: Shweta Yadav
Author URI: https://shwetayadav.in/
Description: Personal, human-feeling theme for an SEO, AEO, GEO and web development consultant. Includes service pages, case studies, a two-part blog (guides and biographies), contact and free-audit forms, and structured data.
Version: 1.0.0
Requires at least: 6.3
Tested up to: 6.8
Requires PHP: 7.4
License: GNU General Public License v2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: shwetayadav
*/

/* ---------- Tokens ---------- */
:root {
	--ink: #121317;
	--text: #3E4352;
	--muted: #5B6172;
	--faint: #757B8C;
	--line: #E6E9F2;
	--line-strong: #D5D9E3;
	--tint: #F3F5FE;
	--placeholder: #E4E9FD;
	--blue: #2444F0;
	--blue-dark: #1A33C2;
	--periwinkle: #C3CFFC;
	--dark-card: #1E2028;
	--on-dark: #D4D8E3;
	--on-dark-muted: #A2A8B6;
	--display: "Bricolage Grotesque", system-ui, sans-serif;
	--body: "Figtree", system-ui, sans-serif;
	--hand: "Caveat", cursive;
	--radius: 20px;
	--container: 1160px;
}

/* ---------- Base ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body {
	margin: 0;
	font-family: var(--body);
	font-size: 17px;
	line-height: 1.6;
	color: var(--ink);
	background: #fff;
	-webkit-font-smoothing: antialiased;
}
img, svg, video { max-width: 100%; height: auto; }
a { color: var(--blue); }
a:hover { color: var(--blue-dark); }
h1, h2, h3, h4 { font-family: var(--display); color: var(--ink); margin: 0; line-height: 1.12; }
p { margin: 0; }
button, input, select, textarea { font: inherit; }
:focus-visible { outline: 2px solid var(--blue); outline-offset: 2px; }

.screen-reader-text {
	border: 0; clip: rect(1px, 1px, 1px, 1px); clip-path: inset(50%);
	height: 1px; margin: -1px; overflow: hidden; padding: 0;
	position: absolute; width: 1px; word-wrap: normal !important;
}
.skip-link:focus {
	clip: auto; clip-path: none; height: auto; width: auto;
	left: 12px; top: 12px; z-index: 1000; background: #fff; color: var(--ink);
	padding: 12px 18px; border-radius: 10px; box-shadow: 0 6px 20px rgba(0,0,0,.15);
}

/* ---------- Layout ---------- */
.container { max-width: var(--container); margin: 0 auto; padding: 0 24px; }
.container--narrow { max-width: 820px; }
.section { padding: 88px 0; }
.section--sm { padding: 56px 0; }
.section--tint { background: var(--tint); }
.section--dark { background: var(--ink); color: #fff; }
.section--dark h2, .section--dark h3 { color: #fff; }
.section--blue { background: var(--blue); color: #fff; }
.section--blue h2 { color: #fff; }
.border-top { border-top: 1px solid var(--line); }

.stack { display: flex; flex-direction: column; gap: 20px; }
.stack--sm { gap: 12px; }
.stack--lg { gap: 40px; }
.split { display: flex; flex-wrap: wrap; gap: 48px; align-items: center; }
.split--top { align-items: flex-start; }
.split > * { min-width: 0; }
.split__main { flex: 3 1 540px; }
.split__side { flex: 2 1 340px; }
.split__half { flex: 1 1 440px; }
.split__narrow { flex: 1 1 300px; }
.split__wide { flex: 2 1 560px; }
.section-head { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: flex-end; gap: 20px; }

.grid { display: grid; gap: 20px; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); }
.grid--240 { grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); }
.grid--300 { grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 40px 32px; }
.grid--loose { gap: 28px 32px; }

/* ---------- Type ---------- */
.hand { font-family: var(--hand); font-weight: 600; font-size: 28px; line-height: 1.1; color: var(--blue); }
.hand--light { color: var(--periwinkle); }
.title-xl { font-weight: 800; font-size: clamp(38px, 4.8vw, 62px); line-height: 1.05; letter-spacing: -0.025em; }
.title-lg { font-weight: 800; font-size: clamp(36px, 4.4vw, 56px); line-height: 1.06; letter-spacing: -0.025em; }
.title-md { font-weight: 800; font-size: clamp(30px, 3.4vw, 44px); line-height: 1.1; letter-spacing: -0.02em; }
.title-sm { font-weight: 700; font-size: 24px; }
.lead { font-size: 19px; line-height: 1.65; color: var(--text); max-width: 620px; }
.body-lg { font-size: 18px; line-height: 1.7; color: var(--text); }
.muted { color: var(--muted); }
.small { font-size: 14px; }
.section--dark .lead, .section--dark .body-lg { color: var(--on-dark); }
.highlight { background: linear-gradient(transparent 62%, var(--periwinkle) 62%); }

/* ---------- Buttons ---------- */
.btn {
	display: inline-flex; align-items: center; justify-content: center; gap: 10px;
	min-height: 52px; padding: 14px 26px; border-radius: 12px; border: 1.5px solid transparent;
	font-family: var(--body); font-weight: 700; font-size: 16px; line-height: 1.2;
	text-decoration: none; cursor: pointer; transition: background .15s, color .15s, border-color .15s;
}
.btn--primary { background: var(--blue); color: #fff; }
.btn--primary:hover { background: var(--blue-dark); color: #fff; }
.btn--dark { background: var(--ink); color: #fff; }
.btn--dark:hover { background: #2A2D35; color: #fff; }
.btn--light { background: #fff; color: var(--ink); }
.btn--light:hover { background: var(--tint); color: var(--ink); }
.btn--outline { border-color: var(--ink); color: var(--ink); background: transparent; }
.btn--outline:hover { background: var(--ink); color: #fff; }
.btn--ghost-dark { border-color: #474C59; color: #fff; }
.btn--ghost-dark:hover { border-color: #fff; color: #fff; }
.btn--lg { min-height: 56px; font-size: 17px; padding: 16px 28px; }
.btn--block { width: 100%; }
.link-arrow { font-weight: 700; display: inline-flex; align-items: center; min-height: 44px; }
.link-plain { color: var(--ink); font-weight: 600; text-decoration: underline; min-height: 44px; display: inline-flex; align-items: center; padding: 0 8px; }
.btn-row { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; }

/* ---------- Header ---------- */
.site-header { background: #fff; border-bottom: 1px solid var(--line); position: relative; z-index: 50; }
.site-header__inner { display: flex; align-items: center; justify-content: space-between; gap: 16px 24px; padding-top: 16px; padding-bottom: 16px; flex-wrap: wrap; }
.site-logo { display: inline-flex; align-items: center; min-height: 44px; }
.site-logo img { height: 46px; width: auto; display: block; }
.site-logo__text { font-family: var(--display); font-weight: 800; font-size: 22px; color: var(--ink); text-decoration: none; }
.main-nav { display: flex; align-items: center; gap: 6px 26px; flex-wrap: wrap; }
.main-nav ul { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 6px 26px; }
.main-nav a { color: var(--ink); text-decoration: none; font-weight: 500; min-height: 44px; display: inline-flex; align-items: center; }
.main-nav a:hover, .main-nav .current-menu-item > a, .main-nav .current-menu-ancestor > a, .main-nav .current_page_parent > a { color: var(--blue); }
.main-nav .sub-menu { display: none; }
.main-nav .btn { min-height: 44px; padding: 10px 20px; color: #fff; }
.nav-toggle {
	display: none; align-items: center; justify-content: center; gap: 8px;
	min-height: 44px; min-width: 44px; padding: 8px 14px; border-radius: 12px;
	border: 1.5px solid var(--line-strong); background: #fff; color: var(--ink); font-weight: 600; cursor: pointer;
}
@media (max-width: 900px) {
	.nav-toggle { display: inline-flex; }
	.main-nav { display: none; width: 100%; flex-direction: column; align-items: stretch; gap: 4px; padding: 8px 0 12px; }
	.main-nav.is-open { display: flex; }
	.main-nav ul { flex-direction: column; gap: 0; }
	.main-nav ul a { width: 100%; border-bottom: 1px solid var(--line); padding: 6px 0; }
	.main-nav .btn { margin-top: 10px; width: 100%; }
}

/* ---------- Footer ---------- */
.site-footer { background: var(--ink); color: #C9CDD8; }
.site-footer a { color: #C9CDD8; text-decoration: none; }
.site-footer a:hover { color: #fff; }
.site-footer__grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 36px; padding: 72px 0 48px; }
.site-footer__brand img { height: 42px; width: auto; display: block; }
.site-footer__brand p { font-size: 15px; line-height: 1.7; margin-top: 16px; }
.site-footer__title { font-weight: 700; color: #fff; margin-bottom: 8px; display: block; }
.site-footer ul { list-style: none; margin: 0; padding: 0; font-size: 15px; }
.site-footer li a { min-height: 34px; display: inline-flex; align-items: center; }
.site-footer__bottom { border-top: 1px solid #2A2D35; padding: 24px 0 32px; display: flex; flex-wrap: wrap; justify-content: space-between; gap: 12px; font-size: 14px; color: var(--on-dark-muted); }
.site-footer__bottom nav, .site-footer__bottom nav ul { display: flex; flex-wrap: wrap; gap: 20px; }
.site-footer__bottom a { color: #C9CDD8; text-decoration: underline; }
.work-card > div { display: flex; flex-direction: column; gap: 8px; }

/* ---------- Cards ---------- */
.card { border: 1px solid var(--line); border-radius: var(--radius); padding: 26px; display: flex; flex-direction: column; gap: 10px; background: #fff; }
.card--flat { border: none; }
.card--tint { background: var(--tint); border: none; }
.card--dark { background: var(--dark-card); border: none; color: var(--on-dark); }
.card--dark h3 { color: #fff; }
.card h3 { font-size: 21px; }
.card p { font-size: 16px; line-height: 1.65; color: var(--text); }
.card--dark p { color: var(--on-dark); }
.rule-item { border-top: 2px solid var(--ink); padding-top: 16px; display: flex; flex-direction: column; gap: 8px; }
.rule-item h3 { font-size: 20px; }
.rule-item p { font-size: 15px; line-height: 1.65; color: var(--text); }
.label { font-size: 14px; font-weight: 700; color: var(--blue); }
.label--muted { color: var(--muted); font-weight: 600; }
.pill { display: inline-flex; align-items: center; min-height: 36px; padding: 8px 14px; border-radius: 999px; background: #fff; color: var(--ink); font-weight: 600; font-size: 14px; text-decoration: none; }
.pill:hover { background: var(--ink); color: #fff; }
.chip-list { display: flex; flex-wrap: wrap; gap: 8px; }

/* ---------- Hero (home) ---------- */
.hero { padding: 56px 0 88px; }
.hero__visual { position: relative; width: 100%; max-width: 400px; margin: 0 auto; padding-bottom: 40px; }
.hero__visual img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; border-radius: 200px 200px 24px 24px; display: block; }
.note-card { position: absolute; left: -28px; bottom: 0; background: #fff; border-radius: 16px; padding: 14px 18px; box-shadow: 0 10px 30px rgba(18,19,23,.10); transform: rotate(-3deg); max-width: 230px; }
.note-card strong { display: block; font-family: var(--hand); font-weight: 600; font-size: 22px; line-height: 1.1; color: var(--ink); }
.note-card span { font-size: 13px; color: var(--muted); }
@media (max-width: 600px) { .note-card { left: 0; } }

.trust { border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.trust__inner { display: flex; flex-wrap: wrap; align-items: center; gap: 18px 36px; padding-top: 26px; padding-bottom: 26px; }
.trust__name { font-family: var(--display); font-weight: 700; font-size: 18px; color: var(--faint); }

/* ---------- Service list (home) ---------- */
.svc-list { border-top: 1.5px solid var(--ink); }
.svc-row { display: flex; flex-wrap: wrap; gap: 12px 28px; padding: 28px 12px; border-bottom: 1px solid var(--line); color: var(--ink); text-decoration: none; transition: background .15s; }
.svc-row:hover { background: var(--tint); color: var(--ink); }
.svc-row__num { font-family: var(--display); font-weight: 700; font-size: 18px; color: var(--faint); width: 36px; }
.svc-row__body { flex: 1 1 360px; min-width: 0; display: flex; flex-direction: column; gap: 8px; }
.svc-row h3 { font-size: 26px; }
.svc-row h3 small { font-weight: 500; font-size: 18px; color: var(--muted); }
.svc-row p { color: var(--text); font-size: 16px; line-height: 1.65; }
.svc-row__arrow { font-size: 24px; align-self: center; }

/* ---------- Letter ---------- */
.letter { background: var(--blue); color: #E8ECFE; }
.letter .container { max-width: 760px; padding-top: 96px; padding-bottom: 96px; display: flex; flex-direction: column; gap: 22px; }
.letter h2 { color: #fff; font-weight: 700; font-size: clamp(28px, 3vw, 38px); line-height: 1.2; }
.letter p { font-size: 18px; line-height: 1.75; }
.letter .sign { font-family: var(--hand); font-size: 30px; color: #fff; }

/* ---------- Media ---------- */
.media { width: 100%; aspect-ratio: 16 / 10; object-fit: cover; border-radius: 20px; display: block; background: var(--placeholder); }
.media--wide { aspect-ratio: 16 / 9; border-radius: 24px; }
.work-card { display: flex; flex-direction: column; gap: 12px; color: var(--ink); text-decoration: none; }
.work-card h3 { font-size: 22px; line-height: 1.25; }
.work-card p { color: var(--text); font-size: 16px; }
.work-card:hover h3 { text-decoration: underline; }
.work-card--featured { grid-column: 1 / -1; flex-direction: row; flex-wrap: wrap; gap: 32px; align-items: center; }
.work-card--featured .media { flex: 3 1 480px; width: auto; min-width: 0; }
.work-card--featured > div { flex: 2 1 320px; min-width: 0; display: flex; flex-direction: column; gap: 12px; }
.work-card--featured h3 { font-size: 30px; }
.result { font-family: var(--display); font-weight: 700; font-size: 22px; color: var(--blue); }
.self-cover { aspect-ratio: 16 / 10; border-radius: 20px; background: var(--blue); color: #fff; display: flex; flex-direction: column; justify-content: flex-end; gap: 6px; padding: 28px; }
.self-cover strong { font-family: var(--display); font-weight: 800; font-size: 40px; line-height: 1; }

/* ---------- Testimonial ---------- */
.quote { display: flex; flex-direction: column; gap: 24px; margin: 0; }
.quote__mark { font-family: var(--display); font-size: 96px; line-height: .6; color: var(--periwinkle); height: 44px; }
.quote blockquote { margin: 0; font-family: var(--display); font-weight: 500; font-size: clamp(22px, 2.6vw, 30px); line-height: 1.4; }
.quote figcaption { font-weight: 700; }
.quote figcaption span { font-weight: 400; color: var(--muted); }

/* ---------- Steps / timelines ---------- */
.steps { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 32px; }
.steps li { display: flex; flex-direction: column; gap: 10px; }
.steps h3 { font-size: 22px; }
.steps p { color: var(--text); font-size: 16px; line-height: 1.65; }
.steps--dark { gap: 20px; }
.steps--dark li { background: var(--dark-card); border-radius: 18px; padding: 24px; gap: 8px; }
.steps--dark p { color: var(--on-dark); }
.steps--dark .step-label { font-weight: 700; color: var(--periwinkle); }
.num-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 18px; }
.num-list li { display: flex; gap: 18px; }
.num-list__n { flex: none; width: 40px; height: 40px; border-radius: 50%; background: var(--blue); color: #fff; display: flex; align-items: center; justify-content: center; font-weight: 700; }
.num-list h3 { font-family: var(--body); font-size: 19px; margin-bottom: 4px; }
.num-list p { color: var(--text); line-height: 1.7; }
.timeline { list-style: none; margin: 0 0 0 8px; padding: 0; border-left: 2px solid var(--periwinkle); }
.timeline li { position: relative; padding: 0 0 36px 32px; }
.timeline li:last-child { padding-bottom: 0; }
.timeline li::before { content: ""; position: absolute; left: -9px; top: 4px; width: 16px; height: 16px; border-radius: 50%; background: var(--blue); }
.timeline__when { font-weight: 700; color: var(--blue); margin-bottom: 6px; }
.timeline h3 { font-size: 22px; margin-bottom: 6px; }
.timeline p { color: var(--text); max-width: 640px; }

/* ---------- People ---------- */
.avatar { width: 64px; height: 64px; flex: none; border-radius: 50%; background: var(--placeholder); color: var(--blue); display: flex; align-items: center; justify-content: center; font-family: var(--display); font-weight: 700; font-size: 20px; overflow: hidden; }
.avatar img { width: 100%; height: 100%; object-fit: cover; }
.avatar--brand { background: var(--blue); color: #fff; }
.avatar--sm { width: 40px; height: 40px; font-size: 15px; }
.avatar--md { width: 48px; height: 48px; font-size: 17px; }
.person { display: flex; align-items: center; gap: 18px; background: #fff; border-radius: 18px; padding: 18px; }
.person strong { display: block; font-size: 17px; }
.person span { font-size: 15px; color: var(--muted); }

/* ---------- FAQ ---------- */
.faq { border-top: 1.5px solid var(--ink); }
.faq details { border-bottom: 1px solid var(--line); padding: 20px 0; }
.faq summary { list-style: none; cursor: pointer; display: flex; justify-content: space-between; gap: 16px; align-items: center; min-height: 44px; font-family: var(--display); font-weight: 700; font-size: 20px; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; font-size: 28px; line-height: 1; transition: transform .2s; }
.faq details[open] summary::after { transform: rotate(45deg); }
.faq details p { margin-top: 10px; font-size: 17px; line-height: 1.7; color: var(--text); }

/* ---------- Quick answer / misc blocks ---------- */
.quick-answer { background: var(--tint); border-radius: 22px; padding: 28px; display: flex; flex-direction: column; gap: 10px; }
.quick-answer h2 { font-weight: 700; font-size: 24px; }
.quick-answer p { font-size: 16px; line-height: 1.7; color: var(--text); }
.breadcrumb { font-size: 14px; color: var(--muted); display: flex; flex-wrap: wrap; gap: 8px; }
.breadcrumb a { color: var(--muted); }
.breadcrumb [aria-current] { color: var(--ink); font-weight: 600; }
.check-list { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 14px 32px; }
.check-list li { display: flex; gap: 12px; align-items: flex-start; line-height: 1.6; }
.check-list svg { flex: none; margin-top: 3px; }
.check-list--stack { display: flex; flex-direction: column; gap: 10px; }
.check-list--stack li { font-weight: 600; }
.feature-grid { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 12px; }
.feature-grid li { background: var(--tint); border-radius: 14px; padding: 16px; font-size: 15px; font-weight: 600; }
.service-block { border: 1px solid var(--line); border-radius: 24px; padding: clamp(24px, 4vw, 48px); display: flex; flex-wrap: wrap; gap: 32px; }
.service-block > div, .service-block > ul { flex: 1 1 380px; min-width: 0; }
.service-block h2 { font-size: 36px; font-weight: 800; }
.service-block h2 small { font-weight: 500; font-size: 20px; color: var(--muted); }
.price { font-family: var(--display); font-weight: 700; font-size: 28px; color: var(--blue); }
.card--dark .price { color: var(--periwinkle); }
.related-link { display: flex; justify-content: space-between; align-items: center; min-height: 44px; padding: 20px; border: 1px solid var(--line); border-radius: 16px; color: var(--ink); text-decoration: none; font-weight: 700; font-size: 17px; }
.related-link:hover { border-color: var(--ink); color: var(--ink); }
.before-after { display: flex; flex-direction: column; gap: 14px; }
.before-after > div { border-radius: 18px; padding: 22px; display: flex; flex-direction: column; gap: 8px; }
.before-after__before { background: var(--dark-card); color: var(--on-dark); }
.before-after__after { background: #fff; color: var(--text); }
.before-after small { font-size: 13px; font-weight: 700; }
.stat { background: var(--tint); border-radius: 20px; padding: 26px; }
.stat strong { display: block; font-family: var(--display); font-weight: 800; font-size: 44px; color: var(--blue); line-height: 1.1; }
.stat span { color: var(--text); }
.meta-list { margin: 8px 0 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 16px; border-top: 1px solid var(--line); padding-top: 20px; }
.meta-list dt { font-size: 13px; font-weight: 700; color: var(--muted); }
.meta-list dd { margin: 4px 0 0; font-weight: 600; }

/* ---------- CTA band ---------- */
.cta-band { background: var(--blue); color: #fff; border-radius: 28px; padding: clamp(32px, 5vw, 64px); display: flex; flex-wrap: wrap; gap: 28px; justify-content: space-between; align-items: center; }
.cta-band > div { flex: 1 1 480px; min-width: 0; display: flex; flex-direction: column; gap: 10px; }
.cta-band h2 { color: #fff; font-weight: 800; font-size: clamp(28px, 3.4vw, 44px); line-height: 1.1; }
.cta-band p { color: #E8ECFE; font-size: 18px; }
.cta-band--dark { background: var(--ink); }
.contact-band { background: var(--ink); color: var(--on-dark); }
.contact-band h2 { color: #fff; font-weight: 800; font-size: clamp(34px, 4.2vw, 56px); line-height: 1.05; letter-spacing: -0.02em; }
.contact-band__actions { flex: 1 1 300px; display: flex; flex-direction: column; gap: 12px; }

/* ---------- Forms ---------- */
.form-card { background: var(--tint); border-radius: 24px; padding: clamp(24px, 4vw, 40px); }
.form-card--white { background: #fff; box-shadow: 0 20px 50px rgba(18,19,23,.08); }
.form { display: flex; flex-direction: column; gap: 18px; }
.form__row { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 18px; }
.form label { display: flex; flex-direction: column; gap: 6px; font-weight: 600; font-size: 15px; }
.form input, .form select, .form textarea { min-height: 48px; padding: 10px 14px; border: 1.5px solid var(--line-strong); border-radius: 12px; background: #fff; font-size: 16px; color: var(--ink); width: 100%; }
.form textarea { min-height: 140px; resize: vertical; }
.form .hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.notice { border-radius: 14px; padding: 16px 18px; font-weight: 600; }
.notice--ok { background: #E7F6EC; color: #14532D; }
.notice--err { background: #FDECEC; color: #7F1D1D; }
.contact-line { display: flex; gap: 14px; align-items: center; min-height: 44px; color: var(--ink); text-decoration: none; }
.contact-line__icon { width: 44px; height: 44px; flex: none; border-radius: 12px; background: var(--tint); display: flex; align-items: center; justify-content: center; }
.contact-line small { display: block; font-size: 13px; color: var(--muted); }
.contact-line strong { font-weight: 700; }
.search-form { display: flex; gap: 8px; }
.search-form input[type="search"] { flex: 1; min-height: 50px; padding: 10px 16px; border: 1.5px solid var(--line-strong); border-radius: 12px; font-size: 16px; min-width: 0; }
.search-form button { min-height: 50px; }

/* ---------- Blog ---------- */
.tabs { display: flex; flex-wrap: wrap; gap: 10px; border-bottom: 1px solid var(--line); padding-bottom: 20px; }
.tab { min-height: 44px; padding: 10px 18px; border-radius: 999px; border: 1.5px solid var(--line-strong); background: #fff; color: var(--ink); font-weight: 600; font-size: 15px; text-decoration: none; display: inline-flex; align-items: center; cursor: pointer; }
.tab:hover { border-color: var(--ink); color: var(--ink); }
.tab.is-active, .tab[aria-pressed="true"] { background: var(--ink); color: #fff; border-color: var(--ink); }
.guide-card { display: flex; flex-direction: column; gap: 12px; color: var(--ink); text-decoration: none; }
.guide-card__cover { aspect-ratio: 16 / 10; border-radius: 18px; padding: 20px; display: flex; align-items: flex-end; overflow: hidden; background: var(--blue); }
.guide-card__cover span { font-family: var(--display); font-weight: 800; font-size: 34px; line-height: 1; color: #fff; }
.guide-card__cover--1 { background: var(--ink); } .guide-card__cover--1 span { color: var(--periwinkle); }
.guide-card__cover--2 { background: var(--periwinkle); } .guide-card__cover--2 span { color: var(--ink); }
.guide-card__cover--3 { background: var(--placeholder); } .guide-card__cover--3 span { color: var(--blue); }
.guide-card__cover--img { padding: 0; background: var(--placeholder); }
.guide-card__cover--img img { width: 100%; height: 100%; object-fit: cover; display: block; }
.guide-card h3 { font-weight: 700; font-size: 21px; line-height: 1.25; }
.guide-card:hover h3, .bio-card:hover h3 { text-decoration: underline; }
.bio-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 14px; }
.bio-card { background: #fff; border-radius: 16px; padding: 18px 20px; display: flex; gap: 14px; align-items: center; color: var(--ink); text-decoration: none; }
.bio-card h3 { font-family: var(--body); font-size: 16px; font-weight: 700; line-height: 1.35; }
.bio-card span.meta { font-size: 13px; color: var(--muted); }
.post-list-row { display: flex; flex-wrap: wrap; gap: 8px 24px; justify-content: space-between; align-items: baseline; padding: 22px 0; border-top: 1px solid var(--line); color: var(--ink); text-decoration: none; }
.post-list-row:last-child { border-bottom: 1px solid var(--line); }
.post-list-row strong { font-family: var(--display); font-weight: 700; font-size: 21px; flex: 1 1 360px; }
.post-list-row span { font-size: 14px; color: var(--muted); }
.pagination { margin-top: 32px; }
.pagination .nav-links { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; }
.pagination .page-numbers { min-width: 44px; min-height: 44px; display: inline-flex; align-items: center; justify-content: center; padding: 0 14px; border-radius: 12px; border: 1.5px solid var(--line-strong); color: var(--ink); text-decoration: none; font-weight: 600; background: #fff; }
.pagination .page-numbers.current { background: var(--ink); color: #fff; border-color: var(--ink); }

.post-header { padding-top: 40px; padding-bottom: 40px; display: flex; flex-direction: column; gap: 20px; }
.byline { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 20px; font-size: 15px; color: var(--muted); }
.byline__author { display: flex; align-items: center; gap: 10px; color: var(--ink); }
.byline__author a { color: var(--ink); font-weight: 700; }
.post-layout { display: flex; flex-wrap: wrap; gap: 56px; align-items: flex-start; padding-bottom: 72px; }
.post-layout__main { flex: 3 1 600px; min-width: 0; max-width: 740px; display: flex; flex-direction: column; gap: 32px; }
.post-layout__side { flex: 1 1 260px; min-width: 0; display: flex; flex-direction: column; gap: 24px; position: sticky; top: 24px; }
@media (max-width: 900px) { .post-layout__side { position: static; } }
.toc { border: 1px solid var(--line); border-radius: 18px; padding: 20px; display: flex; flex-direction: column; gap: 2px; }
.toc a { color: var(--ink); text-decoration: none; font-size: 15px; min-height: 36px; display: inline-flex; align-items: center; }
.toc a:hover { color: var(--blue); }
.side-box { background: var(--tint); border-radius: 18px; padding: 20px; display: flex; flex-direction: column; gap: 10px; }
.side-box a { color: var(--ink); text-decoration: none; font-weight: 600; font-size: 15px; line-height: 1.45; }
.side-box a:hover { color: var(--blue); }
.eyebrow-caps { font-size: 13px; font-weight: 700; color: var(--muted); letter-spacing: .03em; text-transform: uppercase; }
.author-box { border: 1px solid var(--line); border-radius: 20px; padding: 24px; display: flex; gap: 18px; align-items: flex-start; }
.featured-image { margin: 0; }
.featured-image img { width: 100%; height: auto; border-radius: 20px; display: block; }

/* Entry content (posts, pages, migrated content) */
.entry-content { font-size: 18px; line-height: 1.8; color: var(--text); overflow-wrap: anywhere; }
.entry-content > * + * { margin-top: 1.1em; }
.entry-content h2 { font-size: 28px; font-weight: 700; margin-top: 1.6em; scroll-margin-top: 24px; }
.entry-content h3 { font-size: 22px; font-weight: 700; margin-top: 1.4em; scroll-margin-top: 24px; }
.entry-content h4 { font-size: 19px; margin-top: 1.2em; }
.entry-content a { color: var(--blue); }
.entry-content ul, .entry-content ol { padding-left: 1.3em; }
.entry-content li + li { margin-top: .35em; }
.entry-content img { border-radius: 14px; height: auto; }
.entry-content figure { margin-left: 0; margin-right: 0; }
.entry-content figcaption { font-size: 14px; color: var(--muted); margin-top: 8px; }
.entry-content blockquote { margin: 1.4em 0; border-left: 4px solid var(--blue); padding: 4px 0 4px 20px; font-family: var(--display); font-weight: 500; font-size: 22px; line-height: 1.45; color: var(--ink); }
.entry-content table { width: 100%; border-collapse: collapse; font-size: 16px; display: block; overflow-x: auto; }
.entry-content th, .entry-content td { text-align: left; padding: 12px; border-bottom: 1px solid var(--line); vertical-align: top; }
.entry-content th { color: var(--muted); font-weight: 600; }
.entry-content iframe, .entry-content embed, .entry-content video { max-width: 100%; }
.entry-content .wp-block-image, .entry-content .wp-block-embed { margin-top: 1.4em; }
.entry-content .wp-block-gallery { display: flex; flex-wrap: wrap; gap: 12px; }
.entry-content hr { border: none; border-top: 1px solid var(--line); margin: 2em 0; }
.entry-content .rank-math-block, .entry-content .ez-toc-container, .entry-content #ez-toc-container { background: var(--tint); border: none; border-radius: 18px; padding: 20px 24px; }
.alignleft { float: left; margin: 0 1.2em 1em 0; }
.alignright { float: right; margin: 0 0 1em 1.2em; }
.aligncenter { margin-left: auto; margin-right: auto; display: block; }
.wp-caption { max-width: 100%; }
.wp-caption-text { font-size: 14px; color: var(--muted); }
.sticky, .gallery-caption, .bypostauthor { /* WordPress required classes */ }

/* Comments */
.comments { border-top: 1px solid var(--line); padding-top: 32px; display: flex; flex-direction: column; gap: 20px; }
.comment-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 18px; }
.comment-list .children { list-style: none; margin: 14px 0 0 24px; padding: 0; }
.comment-body { background: var(--tint); border-radius: 16px; padding: 18px; font-size: 16px; }
.comment-meta { font-size: 14px; color: var(--muted); margin-bottom: 6px; }
.comment-form { display: flex; flex-direction: column; gap: 12px; }
.comment-form input[type="text"], .comment-form input[type="email"], .comment-form input[type="url"], .comment-form textarea { width: 100%; min-height: 48px; padding: 10px 14px; border: 1.5px solid var(--line-strong); border-radius: 12px; font-size: 16px; }
.comment-form .submit { background: var(--blue); color: #fff; border: none; border-radius: 12px; min-height: 50px; padding: 12px 24px; font-weight: 700; cursor: pointer; }

/* ---------- Utility ---------- */
.mt-0 { margin-top: 0; }
.center { text-align: center; align-items: center; }
.hide-empty:empty { display: none; }
@media (max-width: 700px) {
	.section { padding: 64px 0; }
	.hero { padding: 32px 0 64px; }
	body { font-size: 16px; }
}
@media (prefers-reduced-motion: reduce) {
	html { scroll-behavior: auto; }
	* { transition: none !important; }
}