/* FontMaker.co - Guides hub + article + author pages */

/* Breadcrumb */
.fmco-breadcrumb { display: flex; align-items: center; gap: 8px; margin-bottom: 18px;
    font-family: var(--fmco-mono); font-size: 12px; text-transform: uppercase; letter-spacing: .06em; color: var(--fmco-text-light); }
.fmco-breadcrumb a { color: var(--fmco-text-medium); }
.fmco-breadcrumb a:hover { color: var(--fmco-primary); }

/* ---------------- Article ---------------- */
.fmco-article { padding: var(--fmco-sp-2xl) 0 var(--fmco-sp-3xl); }
.fmco-article-title { font-size: clamp(30px, 5vw, 46px); line-height: 1.08; letter-spacing: -0.03em; color: var(--fmco-ink); margin-bottom: 18px; }

.fmco-article-meta { display: flex; align-items: center; flex-wrap: wrap; gap: 9px; margin-bottom: 30px; font-size: 14px; color: var(--fmco-text-medium); }
.fmco-article-avatar { width: 40px; height: 40px; border-radius: 50%; object-fit: cover; background: var(--fmco-bg-alt); }
.fmco-article-avatar-link { line-height: 0; margin-right: 3px; }
.fmco-article-byline a { color: var(--fmco-ink); font-weight: 600; }
.fmco-article-byline a:hover { color: var(--fmco-primary); }
.fmco-article-dot { color: var(--fmco-text-light); }

.fmco-article-hero { margin: 0 0 34px; }
.fmco-article-hero img { width: 100%; height: auto; border-radius: var(--fmco-radius-lg); background: var(--fmco-bg-alt); display: block; }

/* Table of contents */
.fmco-article-toc { border: 1px solid var(--fmco-border); border-radius: var(--fmco-radius); padding: 18px 22px; margin: 0 0 34px; background: var(--fmco-bg-alt); }
.fmco-article-toc-title { display: block; font-family: var(--fmco-mono); font-size: 11px; text-transform: uppercase; letter-spacing: .1em; color: var(--fmco-text-light); margin-bottom: 10px; }
.fmco-article-toc ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 7px; }
.fmco-article-toc a { color: var(--fmco-text); font-size: 15px; }
.fmco-article-toc a:hover { color: var(--fmco-primary); }

/* Rendered Markdown body */
.fmco-article-body { font-family: var(--fmco-body); font-size: 17.5px; line-height: 1.75; color: var(--fmco-text); }
.fmco-article-body > *:first-child { margin-top: 0; }
.fmco-article-body p { margin: 0 0 22px; }
.fmco-article-body h2 { font-family: var(--fmco-display); font-weight: 700; font-size: clamp(23px, 3vw, 30px); line-height: 1.2; letter-spacing: -0.02em; color: var(--fmco-ink); margin: 46px 0 16px; scroll-margin-top: 90px; }
.fmco-article-body h3 { font-family: var(--fmco-display); font-weight: 700; font-size: 20px; color: var(--fmco-ink); margin: 32px 0 12px; scroll-margin-top: 90px; }
.fmco-article-body a { color: var(--fmco-primary); text-decoration: underline; text-underline-offset: 2px; }
.fmco-article-body a:hover { color: var(--fmco-primary-hover); }
.fmco-article-body strong { font-weight: 700; color: var(--fmco-ink); }
.fmco-article-body ul, .fmco-article-body ol { margin: 0 0 22px; padding-left: 24px; }
.fmco-article-body li { margin-bottom: 9px; }
.fmco-article-body ul li::marker { color: var(--fmco-primary); }
.fmco-article-body blockquote { margin: 26px 0; padding: 6px 20px; border-left: 3px solid var(--fmco-primary); color: var(--fmco-text-medium); font-style: italic; }
.fmco-article-body img { max-width: 100%; height: auto; border-radius: var(--fmco-radius); margin: 8px 0; }
.fmco-article-body figure { margin: 28px 0; }
.fmco-article-body figcaption { margin-top: 8px; font-size: 13.5px; color: var(--fmco-text-light); text-align: center; }
.fmco-article-body table { width: 100%; border-collapse: collapse; margin: 26px 0; font-size: 15.5px; }
.fmco-article-body th, .fmco-article-body td { border: 1px solid var(--fmco-border); padding: 10px 14px; text-align: left; }
.fmco-article-body th { background: var(--fmco-bg-alt); font-weight: 700; color: var(--fmco-ink); }

/* FAQ + CTA + related */
.fmco-article-faq { margin-top: 48px; }
.fmco-article-faq h2 { font-size: clamp(22px, 3vw, 28px); letter-spacing: -0.02em; margin-bottom: 6px; }
.fmco-article-cta { margin-top: 48px; padding: 36px 32px; border-radius: var(--fmco-radius-lg); text-align: center;
    background: linear-gradient(135deg, #4c1d95 0%, #7c3aed 60%, #a78bfa 100%); color: #fff; }
.fmco-article-cta h2 { font-size: clamp(22px, 3vw, 28px); letter-spacing: -0.02em; margin-bottom: 8px; }
.fmco-article-cta p { color: rgba(255,255,255,.85); margin-bottom: 20px; }
.fmco-article-cta .fmco-btn-primary { background: #fff; color: #4c1d95; }
.fmco-article-related { margin-top: 52px; }
.fmco-article-related > h2 { font-size: clamp(22px, 3vw, 28px); letter-spacing: -0.02em; margin-bottom: 22px; }

/* ---------------- Article cards grid (hub / related / author) ---------------- */
.fmco-articles-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 26px; margin-top: var(--fmco-sp-xl); }
.fmco-article-card { display: flex; flex-direction: column; border: 1px solid var(--fmco-border); border-radius: var(--fmco-radius-lg); overflow: hidden; background: var(--fmco-bg); transition: border-color .15s, transform .15s, box-shadow .15s; }
.fmco-article-card:hover { border-color: var(--fmco-primary-light); transform: translateY(-2px); box-shadow: 0 10px 30px rgba(20,20,40,.07); }
.fmco-article-card-media { display: block; aspect-ratio: 16 / 9; background: var(--fmco-bg-alt); overflow: hidden; }
.fmco-article-card-img { width: 100%; height: 100%; object-fit: cover; display: block; }
.fmco-article-card-body { display: flex; flex-direction: column; gap: 7px; padding: 18px 20px 22px; }
.fmco-article-card-meta { font-family: var(--fmco-mono); font-size: 11px; text-transform: uppercase; letter-spacing: .07em; color: var(--fmco-primary); }
.fmco-article-card-title { font-family: var(--fmco-display); font-weight: 700; font-size: 18px; line-height: 1.25; letter-spacing: -0.01em; color: var(--fmco-ink); }
.fmco-article-card-desc { font-size: 14.5px; line-height: 1.6; color: var(--fmco-text-medium); }

/* ---------------- Author page ---------------- */
.fmco-author-head { display: flex; align-items: center; gap: 20px; margin-bottom: 22px; }
.fmco-author-avatar { width: 96px; height: 96px; border-radius: 50%; object-fit: cover; background: var(--fmco-bg-alt); flex: 0 0 auto; }
.fmco-author-head h1 { font-size: clamp(28px, 4vw, 38px); letter-spacing: -0.02em; color: var(--fmco-ink); }
.fmco-author-role { font-family: var(--fmco-mono); font-size: 12px; text-transform: uppercase; letter-spacing: .06em; color: var(--fmco-primary); }
.fmco-author-bio { max-width: 640px; margin-bottom: 10px; }
.fmco-author-bio p { font-size: 16.5px; line-height: 1.7; color: var(--fmco-text); margin-bottom: 14px; }