/* ══════════════════════════════════════════════════════
   SyncBy!App — Blog / article design system
   Extends the shared "deck" system (css/deck.css).
   Understated, numbers-forward, honest. Animated via js/article.js (GSAP).
   ══════════════════════════════════════════════════════ */

/* ── Blog index ─────────────────────────────────────── */
.blog-hero { padding-top: clamp(7rem, 13vw, 9.5rem); padding-bottom: clamp(1.5rem, 4vw, 2.5rem); }
.blog-hero h1 { font-family: var(--display); font-size: clamp(2.2rem, 5vw, 3.4rem); font-weight: 700; letter-spacing: -0.04em; line-height: 1.06; }
.blog-hero h1 .accent { color: var(--amber); }
.blog-hero .lead { margin-top: 1rem; }

.filter-bar {
    display: flex; flex-wrap: wrap; gap: 0.5rem;
    margin-top: 1.8rem;
}

.blog-search {
    position: relative;
    display: flex; align-items: center;
    margin-top: 1rem;
    max-width: 26rem;
}
.blog-search .search-icon {
    position: absolute; left: 1rem;
    color: var(--ink-faint);
    pointer-events: none;
    transition: color .15s;
}
.blog-search input {
    width: 100%;
    font-family: var(--mono); font-size: 0.82rem; letter-spacing: 0.01em; color: var(--ink);
    background: #fff; border: 1px solid var(--line); border-radius: var(--radius);
    padding: 0.68rem 2.5rem 0.68rem 2.5rem;
    outline: none;
    transition: border-color .15s, box-shadow .15s;
}
.blog-search input::placeholder { color: var(--ink-faint); }
.blog-search input::-webkit-search-cancel-button,
.blog-search input::-webkit-search-decoration { -webkit-appearance: none; appearance: none; display: none; }
.blog-search input:focus { border-color: var(--amber-bright); box-shadow: 0 0 0 4px var(--amber-wash); }
.blog-search input:focus + .search-clear ~ .search-icon,
.blog-search:focus-within .search-icon { color: var(--amber); }
.search-clear {
    position: absolute; right: 0.55rem;
    display: flex; align-items: center; justify-content: center;
    width: 1.6rem; height: 1.6rem;
    border: none; border-radius: 8px; background: transparent; color: var(--ink-faint);
    cursor: pointer;
    transition: background .15s, color .15s;
}
.search-clear[hidden] { display: none; }
.search-clear:hover { background: var(--paper-2); color: var(--ink); }
.filter-btn {
    font-family: var(--mono); font-size: 0.72rem; letter-spacing: 0.04em;
    text-transform: uppercase;
    border: 1px solid var(--line); background: #fff; color: var(--ink-soft);
    border-radius: 999px; padding: 0.4rem 0.9rem; cursor: pointer;
    transition: border-color .15s, background .15s, color .15s;
}
.filter-btn:hover { border-color: var(--amber-bright); color: var(--ink); }
.filter-btn[aria-pressed="true"] { background: var(--ink); color: var(--paper); border-color: var(--ink); }

.card-grid {
    display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.1rem;
    margin-top: 2rem;
}
@media (max-width: 900px) { .card-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 620px) { .card-grid { grid-template-columns: 1fr; } }

.blog-card {
    display: flex; flex-direction: column; gap: 0.7rem;
    background: #fff; border: 1px solid var(--line); border-radius: var(--radius);
    padding: 1.35rem 1.3rem 1.4rem;
    text-decoration: none; color: inherit;
    transition: transform .16s cubic-bezier(.2,1,.4,1), border-color .16s, box-shadow .16s;
}
.blog-card:hover { transform: translateY(-3px); border-color: var(--amber-bright); box-shadow: 0 14px 34px rgba(33,26,18,.08); }
.blog-card .cat {
    font-family: var(--mono); font-size: 0.62rem; letter-spacing: .12em; text-transform: uppercase;
    color: var(--amber);
}
.blog-card h2 { font-family: var(--display); font-size: 1.08rem; font-weight: 600; letter-spacing: -0.02em; line-height: 1.22; max-width: none; }
.blog-card p { font-size: 0.85rem; color: var(--ink-soft); line-height: 1.5; }
.blog-card .card-meta {
    margin-top: auto; display: flex; align-items: center; gap: 0.6rem;
    font-family: var(--mono); font-size: 0.64rem; letter-spacing: .06em;
    color: var(--ink-faint); text-transform: uppercase;
}
.blog-card .card-meta .dot { width: 4px; height: 4px; border-radius: 50%; background: var(--line); }
.blog-card.is-hidden { display: none; }

/* ── Article page ───────────────────────────────────── */
.article-hero { padding-top: clamp(7rem, 13vw, 9.5rem); padding-bottom: clamp(1.2rem, 3vw, 2rem); position: relative; }
.article-hero::before {
    content: ''; position: absolute; inset: 0; z-index: -1;
    background: radial-gradient(ellipse 65% 42% at 50% -5%, var(--amber-wash) 0%, transparent 70%);
}
.article-hero .wrap { max-width: 46rem; }
.article-hero h1 {
    font-family: var(--display); font-size: clamp(2rem, 4.6vw, 3.15rem);
    font-weight: 700; letter-spacing: -0.04em; line-height: 1.07; margin-top: 0.4rem;
    max-width: 20ch;
}
.article-hero .deck {
    color: var(--ink-soft); font-size: clamp(1rem, 1.8vw, 1.15rem);
    margin-top: 1.1rem; max-width: 46ch; line-height: 1.55;
}
.article-meta {
    display: flex; flex-wrap: wrap; align-items: center; gap: 0.9rem;
    margin-top: 1.5rem;
    font-family: var(--mono); font-size: 0.68rem; letter-spacing: .05em;
    color: var(--ink-faint); text-transform: uppercase;
}
.article-meta .sep { width: 4px; height: 4px; border-radius: 50%; background: var(--line); }
.evidence-key {
    display: inline-flex; align-items: center; gap: 0.35rem;
    border: 1px solid var(--line); background: #fff; border-radius: 999px;
    padding: 0.2rem 0.6rem; color: var(--ink-soft);
}
.evidence-key b { color: var(--green); font-weight: 600; }

/* article prose — extends deck .prose but wider rhythm */
.article-body { max-width: 46rem; margin: 0 auto; }
.article-body .slide { padding-top: clamp(2.2rem, 5vw, 3.2rem); padding-bottom: clamp(2.2rem, 5vw, 3.2rem); }
.article-body p { color: var(--ink-soft); font-size: 1.02rem; line-height: 1.7; margin-top: 1.1rem; }
.article-body p:first-child { margin-top: 0; }
.article-body p b, .article-body p strong { color: var(--ink); font-weight: 600; }
.article-body h2 { font-family: var(--display); font-size: clamp(1.4rem, 3vw, 1.9rem); font-weight: 700; letter-spacing: -0.03em; margin-top: 0.2rem; }
.article-body h3 { font-family: var(--display); font-size: 1.18rem; font-weight: 600; letter-spacing: -0.02em; margin-top: 1.9rem; }
.article-body ul { margin: 1rem 0 0 1.2rem; color: var(--ink-soft); font-size: 1.0rem; }
.article-body li { margin-top: 0.45rem; line-height: 1.6; }
.article-body a.inline { color: var(--amber); font-weight: 600; }
.article-body a.inline:hover { text-decoration: underline; }

/* section tag reused from deck (.slide-tag) */

/* ── Reveal animation (GSAP adds .reveal; CSS defines rest state) ── */
.reveal { opacity: 0; transform: translateY(18px); }
.reveal.is-in { opacity: 1; transform: none; }

/* ── Pinned stat scene — the big animated figure (video-liftable) ── */
.stat-scene {
    background: var(--paper-2);
    border-top: 1px solid var(--line); border-bottom: 1px solid var(--line);
    text-align: center;
}
.stat-scene .wrap { max-width: 52rem; }
.stat-figure {
    font-family: var(--display); font-weight: 700; letter-spacing: -0.04em;
    font-size: clamp(3.4rem, 13vw, 8rem); line-height: 0.95;
    color: var(--amber); font-variant-numeric: tabular-nums;
}
.stat-figure .unit { color: var(--ink); font-size: 0.42em; margin-left: 0.1em; }
.stat-caption { font-size: clamp(1rem, 2vw, 1.25rem); color: var(--ink); margin-top: 0.8rem; font-weight: 500; max-width: 30ch; margin-inline: auto; }
.stat-source { font-family: var(--mono); font-size: 0.68rem; color: var(--ink-faint); margin-top: 0.8rem; letter-spacing: .04em; }

/* ── Inline key-stat chips (animated counters) ── */
.stat-row { display: flex; flex-wrap: wrap; gap: 0.9rem; margin-top: 1.6rem; }
.key-stat {
    flex: 1 1 8rem; background: #fff; border: 1px solid var(--line); border-radius: 12px;
    padding: 1rem 1.1rem;
}
.key-stat .num {
    font-family: var(--display); font-weight: 700; letter-spacing: -0.03em;
    font-size: clamp(1.7rem, 4vw, 2.3rem); color: var(--amber);
    font-variant-numeric: tabular-nums; line-height: 1;
}
.key-stat .num .unit { color: var(--ink); font-size: 0.55em; margin-left: 0.08em; }
.key-stat .lbl { font-size: 0.8rem; color: var(--ink-soft); margin-top: 0.4rem; line-height: 1.4; }

/* ── Myth vs Fact split card ── */
.myth-fact { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; margin-top: 1.6rem; }
@media (max-width: 680px) { .myth-fact { grid-template-columns: 1fr; } }
.mf-col { border: 1px solid var(--line); border-radius: var(--radius); padding: 1.3rem 1.3rem 1.4rem; background: #fff; }
.mf-col .k { font-family: var(--mono); font-size: 0.64rem; letter-spacing: .12em; text-transform: uppercase; display: inline-flex; align-items: center; gap: 0.4rem; }
.mf-col.myth .k { color: #b42318; }
.mf-col.myth { background: #fdf5f4; border-color: #f2d4cf; }
.mf-col.fact .k { color: var(--green); }
.mf-col.fact { background: var(--amber-wash); border-color: var(--amber-bright); }
.mf-col h3 { font-family: var(--display); font-size: 1.05rem; font-weight: 600; letter-spacing: -0.015em; margin: 0.5rem 0 0.4rem; }
.mf-col p { font-size: 0.9rem; color: var(--ink-soft); line-height: 1.55; margin: 0; }

/* ── Honest callout — deliberately NOT amber; a calm, trustworthy tone ── */
.honest-callout {
    margin-top: 1.8rem;
    border: 1px solid #cfd8e3; background: #f5f8fc; border-radius: var(--radius);
    padding: 1.3rem 1.4rem;
    position: relative;
}
.honest-callout .k {
    font-family: var(--mono); font-size: 0.64rem; letter-spacing: .12em; text-transform: uppercase;
    color: #35618e; display: inline-flex; align-items: center; gap: 0.45rem;
}
.honest-callout h3 { font-family: var(--display); font-size: 1.08rem; font-weight: 600; letter-spacing: -0.015em; margin: 0.5rem 0 0.4rem; color: var(--ink); }
.honest-callout p { font-size: 0.92rem; color: #445; line-height: 1.6; margin: 0.5rem 0 0; }
.honest-callout p:first-of-type { margin-top: 0; }

/* ── Where SyncBy fits — soft, specific ── */
.fit-note {
    margin-top: 1.8rem;
    border: 1px solid var(--line); border-left: 3px solid var(--amber-bright);
    background: #fff; border-radius: 10px; padding: 1.15rem 1.3rem;
}
.fit-note .k { font-family: var(--mono); font-size: 0.62rem; letter-spacing: .12em; text-transform: uppercase; color: var(--amber); }
.fit-note p { font-size: 0.92rem; color: var(--ink-soft); line-height: 1.6; margin-top: 0.4rem; }

/* ── TL;DR takeaways ── */
.takeaways { margin-top: 2rem; background: var(--ink); color: var(--paper); border-radius: var(--radius); padding: 1.6rem 1.6rem 1.7rem; }
.takeaways .k { font-family: var(--mono); font-size: 0.64rem; letter-spacing: .14em; text-transform: uppercase; color: var(--amber-bright); }
.takeaways ul { margin: 0.9rem 0 0; list-style: none; padding: 0; }
.takeaways li { position: relative; padding-left: 1.5rem; margin-top: 0.6rem; font-size: 0.95rem; line-height: 1.5; color: #efe9e0; }
.takeaways li::before { content: '→'; position: absolute; left: 0; color: var(--amber-bright); font-weight: 700; }

/* ── Footnote markers + sources ── */
sup.fn { font-family: var(--mono); font-size: 0.62em; line-height: 0; }
sup.fn a {
    color: var(--amber); font-weight: 600; text-decoration: none;
    padding: 0 0.1em; border-radius: 3px;
}
sup.fn a:hover { background: var(--amber-wash); text-decoration: underline; }

.sources { margin-top: 1.4rem; }
.sources h2 { font-family: var(--display); font-size: 1.25rem; font-weight: 700; letter-spacing: -0.02em; }
.sources ol { margin: 1rem 0 0; padding: 0; list-style: none; counter-reset: src; }
.sources li {
    counter-increment: src; position: relative; padding-left: 2.4rem;
    margin-top: 0.9rem; font-size: 0.85rem; color: var(--ink-soft); line-height: 1.5;
}
.sources li::before {
    content: counter(src); position: absolute; left: 0; top: 0.05rem;
    width: 1.7rem; height: 1.7rem; border-radius: 6px;
    background: #fff; border: 1px solid var(--line);
    font-family: var(--mono); font-size: 0.7rem; font-weight: 600; color: var(--ink-faint);
    display: flex; align-items: center; justify-content: center;
}
.sources li a { color: var(--amber); font-weight: 600; word-break: break-word; }
.sources li a:hover { text-decoration: underline; }
.sources .tier {
    font-family: var(--mono); font-size: 0.6rem; letter-spacing: .06em; text-transform: uppercase;
    border-radius: 4px; padding: 0.05rem 0.4rem; margin-right: 0.4rem;
    border: 1px solid var(--line); color: var(--ink-faint); white-space: nowrap;
}
.tier-study    { color: #2f7d5b; border-color: #bfe3ce; background: #f0faf4; }
.tier-standard { color: #35618e; border-color: #cfe0f2; background: #f2f8fd; }
.tier-industry { color: #8a5a12; border-color: #ecd9b6; background: #fdf6e9; }
.tier-estimate { color: #7a6f60; border-color: var(--line); background: var(--paper-2); }

/* ── prev/next + share row ── */
.article-foot-nav { display: flex; justify-content: space-between; gap: 1rem; flex-wrap: wrap; margin-top: 2.2rem; }
.afn-link { font-family: var(--mono); font-size: 0.72rem; color: var(--ink-soft); border: 1px solid var(--line); background: #fff; border-radius: 10px; padding: 0.7rem 1rem; text-decoration: none; max-width: 48%; }
.afn-link:hover { border-color: var(--amber-bright); color: var(--ink); }
.afn-link .dir { color: var(--amber); display: block; font-size: 0.62rem; letter-spacing: .1em; text-transform: uppercase; margin-bottom: 0.2rem; }

.src-flash { animation: src-flash 1.4s ease-out; }
@keyframes src-flash {
    0%, 15% { background: var(--amber-wash); box-shadow: 0 0 0 3px var(--amber-wash); }
    100%    { background: transparent; box-shadow: 0 0 0 3px transparent; }
}

@media (prefers-reduced-motion: reduce) {
    .reveal { opacity: 1 !important; transform: none !important; }
}