/* =====================================================================
   THE CAPITAL MEMO — design system
   Fonts: Playfair Display (headings) + Inter (body)
   Palette: warm paper bg, black ink, #464646 meta, #372b1b brown, #fff1de cream
   ===================================================================== */

:root {
    --bg: #ffffff;            /* page background */
    --panel: #ffffff;         /* cards */
    --ink: #000000;           /* primary text */
    --muted: #464646;         /* meta text */
    --brand: #372b1b;         /* dark brown button */
    --brand-hover: #55432a;   /* button hover */
    --cream: #fff1de;         /* light hover / accent */
    --line: rgba(0,0,0,0.12);
    --radius: 12px;
    --radius-btn: 6px;
    --shadow-card: 1px -1px 6px rgba(0,0,0,0.10);
    --font-serif: "Playfair Display", Georgia, "Times New Roman", serif;
    --font-sans: "Inter", system-ui, -apple-system, Segoe UI, Roboto, sans-serif;
    --container: 1440px;
    --container-pad: 72px;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
    margin: 0;
    background: var(--bg);
    color: var(--ink);
    font-family: var(--font-sans);
    font-size: 16px;
    line-height: 1.4;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}
img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
h1, h2, h3, h4 { font-family: var(--font-serif); font-weight: 500; margin: 0; color: var(--ink); }

.site-wrapper { display: flex; flex-direction: column; min-height: 100vh; }
.site-main { flex: 1 0 auto; }
.container { width: 100%; max-width: var(--container); margin: 0 auto; padding-left: var(--container-pad); padding-right: var(--container-pad); }

/* ---------------------------------------------------------------- Buttons */
.btn {
    display: inline-flex; align-items: center; justify-content: center;
    font-family: var(--font-sans); font-weight: 500; font-size: 18px; line-height: 1.45;
    padding: 8px 20px; border-radius: var(--radius-btn); border: 0; cursor: pointer;
    transition: background .15s ease, color .15s ease, border-color .15s ease;
}
.btn--dark { background: var(--brand); color: #fff; }
.btn--dark:hover { background: var(--brand-hover); }
.btn--light { background: var(--panel); color: var(--ink); border: 1px solid var(--line); }
.btn--light:hover { background: var(--cream); border-color: var(--cream); }

/* Text button (Load More) — pill/plain link style variants resolved with header/section designs */
.btn--load { display: flex; width: max-content; margin: 40px auto 0; }

/* ---------------------------------------------------------------- Cards */
.article-card {
    background: var(--panel);
    border-radius: var(--radius);
    padding: 16px;
    box-shadow: var(--shadow-card);
    overflow: hidden;
}
.article-card__media {
    position: relative;
    border-radius: var(--radius);
    overflow: hidden;
    background: #e9e4dc;
}
.article-card__media img { width: 100%; height: 100%; object-fit: cover; }
.article-card__title { font-family: var(--font-serif); font-weight: 500; color: var(--ink); }
.article-card__excerpt {
    font-family: var(--font-sans); font-weight: 400; color: var(--ink);
    margin: 0; overflow: hidden;
    display: -webkit-box; -webkit-box-orient: vertical;
}
.article-card__meta { display: flex; gap: 16px; align-items: center; }
.article-card__cat, .article-card__read {
    font-family: var(--font-sans); font-weight: 300; font-size: 12px; line-height: 1.4; color: var(--muted);
}
.article-card__sep { display: inline-block; width: 1px; height: 12px; background: var(--muted); opacity: .5; }

/* Big card — image left, text right */
.article-card--big { display: flex; gap: 24px; align-items: center; }
.article-card--big .article-card__media { flex-shrink: 0; width: 612px; max-width: 48%; aspect-ratio: 612 / 341; }
.article-card--big .article-card__body { flex: 1 1 0; min-width: 0; display: flex; flex-direction: column; gap: 16px; }
.article-card--big .article-card__title { font-size: clamp(26px, 2.6vw, 36px); line-height: 1.3; letter-spacing: 0.36px; }
.article-card--big .article-card__excerpt { font-size: 18px; line-height: 1.4; letter-spacing: 0.18px; -webkit-line-clamp: 5; }
.article-card--big .article-card__text { display: flex; flex-direction: column; gap: 12px; }

/* Small card — image top, text below */
.article-card--sm { display: flex; flex-direction: column; gap: 16px; }
.article-card--sm .article-card__media { width: 100%; aspect-ratio: 384 / 198; }
.article-card--sm .article-card__body { display: flex; flex-direction: column; gap: 16px; }
.article-card--sm .article-card__title { font-size: 24px; line-height: 1.4; letter-spacing: 0.24px; }
.article-card--sm .article-card__excerpt { font-size: 16px; line-height: 1.4; letter-spacing: 0.16px; -webkit-line-clamp: 3; }
.article-card--sm .article-card__text { display: flex; flex-direction: column; gap: 12px; }

/* Card hover lift */
.article-card { transition: box-shadow .18s ease, transform .18s ease; }
a.article-card:hover, .article-card a:hover ~ .article-card { }
a.article-card:hover { box-shadow: 2px 2px 14px rgba(0,0,0,0.14); transform: translateY(-2px); }

/* ---------------------------------------------------------------- Layout: grids + archive + post */
/* Main Intelligence Feed — Figma 2666:754 */
.feed { padding: 80px 0; }
.feed .container { display: flex; flex-direction: column; gap: 44px; }
.feed__head { display: flex; align-items: center; gap: 67px; }
.feed__title { font-family: var(--font-serif); font-weight: 500; font-size: clamp(30px, 3.4vw, 40px); line-height: 1.3; letter-spacing: 0.4px; color: var(--ink); flex-shrink: 0; max-width: 526px; }
.feed__divider { flex-shrink: 0; width: 1px; height: 80px; background: var(--line); }
.feed__sub { flex: 1 1 0; min-width: 0; font-family: var(--font-sans); font-weight: 400; font-size: clamp(18px, 2vw, 22px); line-height: 1.4; letter-spacing: 0.22px; color: var(--ink); margin: 0; }
.feed__content { display: flex; flex-direction: column; gap: 36px; align-items: center; }
.feed__updates { display: flex; flex-direction: column; gap: 24px; width: 100%; }
.feed__grid { width: 100%; }
.feed__more { margin: 0; }
@media (max-width: 900px) {
    .feed__head { flex-direction: column; align-items: flex-start; gap: 16px; }
    .feed__divider { display: none; }
    .feed__title { max-width: none; }
}

/* The 2026 Asset Resilience Index — Figma 2666:767 */
.scarcity { position: relative; overflow: hidden; background: var(--brand); color: #fff; padding: 80px 0; }
.scarcity__inner { position: relative; display: flex; align-items: center; justify-content: space-between; gap: 48px; }
.scarcity__globe { position: absolute; left: -210px; top: 50%; margin-top: -210px; width: 420px; height: 420px; z-index: 0; pointer-events: none; }
.scarcity__globe img { width: 100%; height: 100%; display: block; animation: cm-spin 40s linear infinite; transform-origin: 50% 50%; }
@keyframes cm-spin { to { transform: rotate(360deg); } }
.scarcity__text { position: relative; z-index: 2; flex: 0 1 520px; display: flex; flex-direction: column; gap: 12px; }
.scarcity__title { font-family: var(--font-serif); font-weight: 500; font-size: clamp(30px, 3.4vw, 40px); line-height: 1.3; letter-spacing: 0.4px; color: #fff; }
.scarcity__sub { font-family: var(--font-sans); font-weight: 400; font-size: clamp(18px, 2vw, 22px); line-height: 1.4; letter-spacing: 0.22px; color: #fff; margin: 0; }
.scarcity__chart { position: relative; z-index: 1; flex: 0 1 720px; min-width: 0; }
.scarcity__chart img { width: 100%; height: auto; display: block; }
@media (prefers-reduced-motion: reduce) { .scarcity__globe img { animation: none; } }
@media (max-width: 900px) {
    .scarcity__inner { flex-direction: column; align-items: flex-start; gap: 32px; }
    .scarcity__text { flex-basis: auto; }
    .scarcity__chart { flex-basis: auto; width: 100%; }
    .scarcity__globe { left: -260px; opacity: 0.5; }
}

/* Resource Sovereignty — Figma 2666:841 */
.resource { position: relative; overflow: hidden; background: var(--brand); padding: 80px 0; }
.resource__bg { position: absolute; inset: 0; z-index: 0; background-size: cover; background-position: center; }
.resource .container { position: relative; z-index: 1; }
.resource__card { width: 681px; max-width: 100%; background: rgba(0,0,0,0.4); -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px); border-radius: 12px; padding: 36px; display: flex; flex-direction: column; gap: 36px; color: #fff; }
.resource__header { display: flex; flex-direction: column; gap: 12px; }
.resource__eyebrow { font-family: var(--font-sans); font-weight: 400; font-size: 18px; letter-spacing: 0.08em; text-transform: uppercase; margin: 0; }
.resource__title { font-family: var(--font-serif); font-weight: 500; font-size: clamp(30px, 3.4vw, 40px); line-height: 1.3; letter-spacing: 0.4px; color: #fff; }
.resource__body { font-family: var(--font-sans); font-weight: 300; font-size: clamp(17px, 2vw, 20px); line-height: 1.4; letter-spacing: 0.2px; margin: 0; }
.resource__stat { display: flex; align-items: flex-end; gap: 16px; }
.resource__stat-num { font-family: var(--font-sans); font-weight: 500; font-size: 32px; letter-spacing: 0.32px; line-height: 1.4; }
.resource__stat-label { font-family: var(--font-sans); font-weight: 500; font-size: 18px; letter-spacing: 0.18px; line-height: 1.4; max-width: 306px; }
@media (max-width: 640px) { .resource__card { padding: 28px; gap: 24px; } }

/* The Capital Toolkit — flip cards — Figma 2666:850 */
.toolkit { padding: 80px 0 60px; }
.toolkit .container { display: flex; flex-direction: column; gap: 44px; }
.toolkit__head { display: flex; align-items: center; gap: 67px; }
.toolkit__title { font-family: var(--font-serif); font-weight: 500; font-size: clamp(30px, 3.4vw, 40px); line-height: 1.3; letter-spacing: 0.4px; color: var(--ink); flex-shrink: 0; max-width: 526px; }
.toolkit__divider { flex-shrink: 0; width: 1px; height: 80px; background: var(--line); }
.toolkit__sub { flex: 1 1 0; min-width: 0; font-family: var(--font-sans); font-weight: 400; font-size: clamp(18px, 2vw, 22px); line-height: 1.4; letter-spacing: 0.22px; color: var(--ink); margin: 0; }
.toolkit__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }

.flip-card { perspective: 1200px; height: 277px; }
.flip-card__inner { position: relative; width: 100%; height: 100%; transition: transform .6s cubic-bezier(.22,.61,.36,1); transform-style: preserve-3d; }
.flip-card.is-flipped .flip-card__inner { transform: rotateY(180deg); }
.flip-card__front, .flip-card__back { position: absolute; inset: 0; border-radius: 12px; overflow: hidden; -webkit-backface-visibility: hidden; backface-visibility: hidden; display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 40px 32px; }
.flip-card__front { background-size: cover; background-position: center; background-color: var(--brand); }
.flip-card__scrim { position: absolute; inset: 0; z-index: 0; background: linear-gradient(rgba(55,43,27,0.30), rgba(55,43,27,0.30)), radial-gradient(ellipse 62% 68% at 50% 50%, rgba(55,43,27,0.88), rgba(55,43,27,0) 100%); }
.flip-card__content { position: relative; z-index: 1; display: flex; flex-direction: column; align-items: center; gap: 16px; text-align: center; }
.flip-card__title { font-family: var(--font-serif); font-weight: 500; font-size: 26px; line-height: 1.3; letter-spacing: 0.26px; color: #fff; }
.flip-card__btn { margin: 0; }
.flip-card__back { transform: rotateY(180deg); background: var(--brand); color: #fff; padding: 24px; text-align: center; cursor: pointer; overflow-y: auto; justify-content: center; }
.flip-card__back-text { font-family: var(--font-sans); font-weight: 400; font-size: 14px; line-height: 1.5; color: #fff; margin: 0; }
@media (max-width: 900px) {
    .toolkit__head { flex-direction: column; align-items: flex-start; gap: 16px; }
    .toolkit__divider { display: none; }
    .toolkit__title { max-width: none; }
    .toolkit__grid { grid-template-columns: 1fr; }
}

/* Join The Sovereign Reserve — Figma 2666:871 */
.reserve { padding: 60px 0 80px; }
.reserve__inner { display: flex; align-items: center; gap: 67px; }
.reserve__content { flex: 0 0 526px; max-width: 526px; display: flex; flex-direction: column; gap: 24px; }
.reserve__title { font-family: var(--font-serif); font-weight: 500; font-size: clamp(30px, 3.4vw, 40px); line-height: 1.3; letter-spacing: 0.4px; color: var(--ink); }
.reserve__sub { font-family: var(--font-sans); font-weight: 400; font-size: 18px; line-height: 1.4; letter-spacing: 0.18px; color: var(--ink); margin: 0; }
.reserve__divider { flex-shrink: 0; align-self: stretch; width: 1px; background: var(--line); }
.reserve__form { flex: 1 1 0; min-width: 0; display: flex; flex-direction: column; gap: 8px; }
.reserve__input { width: 100%; border: 1px solid var(--ink); border-radius: 6px; padding: 10px 16px; background: var(--panel); font-family: var(--font-sans); font-size: 16px; line-height: 1.4; color: var(--ink); }
.reserve__input::placeholder { color: var(--muted); }
.reserve__submit { width: 100%; }
.reserve__success, .reserve__error { display: none; margin: 4px 0 0; font-family: var(--font-sans); font-size: 15px; line-height: 1.4; }
.reserve__success { color: var(--brand); font-weight: 500; }
.reserve__error { color: #b3261e; }
.reserve__form.success .reserve__input, .reserve__form.success .reserve__submit { display: none; }
.reserve__form.success .reserve__success { display: block; }
.reserve__form .reserve__error:not(:empty) { display: block; }
@media (max-width: 900px) {
    .reserve__inner { flex-direction: column; align-items: stretch; gap: 28px; }
    .reserve__content { flex-basis: auto; max-width: none; }
    .reserve__divider { display: none; }
}

/* Kinetic Asset Highlights — Figma 2666:978 */
.highlights { padding: 80px 0; }
.highlights .container { display: flex; flex-direction: column; gap: 44px; }
.highlights__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
.highlight-card { background: var(--panel); border-radius: 12px; box-shadow: var(--shadow-card); padding: 16px; display: flex; flex-direction: column; gap: 16px; overflow: hidden; }
.highlight-card__media { width: 100%; aspect-ratio: 384 / 337; border-radius: 12px; overflow: hidden; background: #e9e4dc; }
.highlight-card__media img { width: 100%; height: 100%; object-fit: cover; display: block; }
.highlight-card__body { display: flex; flex-direction: column; gap: 16px; }
.highlight-card__head { display: flex; flex-direction: column; gap: 4px; }
.highlight-card__title { font-family: var(--font-serif); font-weight: 500; font-size: 24px; line-height: 1.4; letter-spacing: 0.24px; color: var(--ink); }
.highlight-card__eyebrow { font-family: var(--font-sans); font-weight: 300; font-size: 12px; line-height: 1.4; color: var(--muted); margin: 0; }
.highlight-card__text { font-family: var(--font-sans); font-weight: 400; font-size: 16px; line-height: 1.4; letter-spacing: 0.16px; color: var(--ink); margin: 0; }
@media (max-width: 980px) { .highlights__grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 640px) { .highlights__grid { grid-template-columns: 1fr; } }

/* The Memo — Stewardship / Live Signal / Forecast — Figma 2666:961 */
.memo-index { padding: 80px 0; }
.memo-index .container { display: flex; gap: 24px; align-items: stretch; }
.idx-card { flex: 0 0 306px; background: var(--panel); border-radius: 12px; box-shadow: 1px -1px 3px rgba(0,0,0,0.1); padding: 16px; display: flex; flex-direction: column; gap: 36px; justify-content: center; }
.idx-card__title { font-family: var(--font-serif); font-weight: 600; font-size: 24px; letter-spacing: 0.24px; line-height: 1.3; color: var(--ink); }
.idx-card__list { display: flex; flex-direction: column; gap: 20px; }
.idx-card__list p { font-family: var(--font-sans); font-weight: 400; font-size: 16px; line-height: 1.4; letter-spacing: 0.16px; color: var(--ink); margin: 0; }
.idx-card__list strong { font-weight: 700; }

/* Live Signal (animated) */
.signal { position: relative; flex: 0 0 636px; min-width: 0; border-radius: 12px; overflow: hidden; background: linear-gradient(160deg, #5a4a2c 0%, #453619 100%); }
.signal__grid { position: absolute; inset: 0; background-image: linear-gradient(rgba(255,255,255,0.07) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,0.07) 1px, transparent 1px); background-size: 56px 56px; }
.signal__inner { position: relative; z-index: 1; min-height: 447px; display: flex; flex-direction: column; align-items: center; justify-content: space-between; padding: 40px 24px; text-align: center; }
.signal__label, .signal__status { font-family: var(--font-sans); font-weight: 400; font-size: 14px; letter-spacing: 0.2em; color: rgba(255,255,255,0.5); display: inline-flex; align-items: center; gap: 8px; }
.signal__dot { width: 7px; height: 7px; border-radius: 50%; background: #7ed957; box-shadow: 0 0 0 0 rgba(126,217,87,0.6); animation: signalPulse 1.6s ease-out infinite; }
@keyframes signalPulse { 0% { box-shadow: 0 0 0 0 rgba(126,217,87,0.5); } 70% { box-shadow: 0 0 0 8px rgba(126,217,87,0); } 100% { box-shadow: 0 0 0 0 rgba(126,217,87,0); } }
.signal__lines { list-style: none; margin: 0; padding: 0; flex: 1; display: flex; flex-direction: column; gap: 24px; align-items: center; justify-content: center; }
.signal__lines li { font-family: var(--font-sans); font-weight: 400; font-size: 20px; line-height: 1.4; color: rgba(255,255,255,0.55); transition: color .4s ease, transform .4s ease, text-shadow .4s ease; }
.signal__lines li.is-active { color: #fff; font-weight: 700; transform: scale(1.03); text-shadow: 0 0 12px rgba(255,255,255,0.25); }
@media (prefers-reduced-motion: reduce) { .signal__dot { animation: none; } .signal__lines li { transition: none; } }
@media (max-width: 900px) {
    .memo-index .container { flex-direction: column; }
    .idx-card, .signal { flex-basis: auto; width: 100%; }
    .signal__inner { min-height: 380px; }
}

/* The Memo (Insights) hero — Figma 2666:943 */
.memo-hero { position: relative; overflow: hidden; background: var(--brand); }
.memo-hero__bg { position: absolute; inset: 0; z-index: 0; background-size: cover; background-position: center bottom; }
.memo-hero__scrim { position: absolute; inset: 0; z-index: 1; background: linear-gradient(180deg, rgba(20,15,8,0.55) 0%, rgba(20,15,8,0.35) 60%, rgba(20,15,8,0.45) 100%); }
.memo-hero__inner { position: relative; z-index: 2; display: flex; align-items: center; gap: 67px; padding-top: 160px; padding-bottom: 160px; }
.memo-hero__lead { flex: 0 0 526px; max-width: 526px; display: flex; flex-direction: column; gap: 24px; color: #fff; }
.memo-hero__title { font-family: var(--font-serif); font-weight: 500; font-size: clamp(30px, 3.4vw, 40px); line-height: 1.3; letter-spacing: 0.4px; color: #fff; }
.memo-hero__sub { font-family: var(--font-sans); font-weight: 400; font-size: 18px; line-height: 1.4; letter-spacing: 0.18px; color: #fff; margin: 0; }
.memo-hero__divider { flex-shrink: 0; align-self: stretch; width: 1px; background: rgba(255,255,255,0.5); }
.memo-hero__body { flex: 1 1 0; min-width: 0; font-family: var(--font-sans); font-weight: 400; font-size: 18px; line-height: 1.4; letter-spacing: 0.18px; color: #fff; margin: 0; }
@media (max-width: 900px) {
    .memo-hero__inner { flex-direction: column; align-items: flex-start; gap: 24px; padding-top: 130px; padding-bottom: 80px; }
    .memo-hero__lead { flex-basis: auto; max-width: none; }
    .memo-hero__divider { display: none; }
}

/* Legal page — Figma 2549:8352 */
.legal { background: var(--bg); padding: 80px 0; }
.legal__title { font-family: var(--font-sans); font-weight: 400; font-size: clamp(28px, 3vw, 36px); line-height: 1.4; letter-spacing: 0.36px; text-align: left; color: #111827; margin: 0 0 36px; }
.legal__content { font-family: var(--font-sans); font-size: 16px; line-height: 1.4; color: #111827; }
.legal__content > p:first-child { text-align: left; color: #7e7e7e; font-size: 12px; letter-spacing: 0.12px; margin: 0 0 24px; }
.legal__content h2 { font-family: var(--font-sans); font-weight: 400; font-size: 18px; letter-spacing: 0.18px; line-height: 1.4; text-align: left; color: #111827; margin: 28px 0 16px; }
.legal__content h3, .legal__content h4 { font-family: var(--font-sans); font-weight: 400; font-size: 16px; line-height: 1.4; text-align: left; color: #111827; margin: 14px 0 4px; }
.legal__content p { font-family: var(--font-sans); font-weight: 300; font-size: 16px; letter-spacing: 0.16px; line-height: 1.4; text-align: left; color: #111827; margin: 0 0 12px; }
.legal__content ul, .legal__content ol { text-align: left; margin: 0 0 12px; padding-left: 22px; }
.legal__content li { font-weight: 300; margin: 0 0 6px; }
.legal__content strong { font-weight: 400; }
.legal__content a { color: var(--brand); text-decoration: underline; }

.archive { padding: 40px 0 60px; }
.card-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
@media (max-width: 980px) { .card-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 640px) { .card-grid { grid-template-columns: 1fr; } }

.archive__head { text-align: center; margin: 20px 0 32px; display: flex; flex-direction: column; gap: 12px; align-items: center; }
.archive__title { font-family: var(--font-serif); font-size: clamp(30px, 4vw, 44px); }
.archive__sub { font-family: var(--font-sans); font-size: 18px; color: var(--muted); margin: 0; max-width: 640px; }

.post { padding: 80px 0 40px; }
.post__feedhead { margin-bottom: 44px; }
/* Post hero card — Figma 2549:8198 */
.post-hero { display: flex; gap: 24px; align-items: center; background: transparent; border: 0; border-radius: 12px; box-shadow: none; overflow: hidden; margin-bottom: 56px; }
.post-hero__media { flex-shrink: 0; width: 636px; max-width: 49%; aspect-ratio: 636 / 355; border-radius: 12px; overflow: hidden; background: #e9e4dc; }
.post-hero__media img { width: 100%; height: 100%; object-fit: cover; }
.post-hero__body { flex: 1 1 0; min-width: 0; display: flex; flex-direction: column; gap: 16px; padding-right: 8px; }
.post-hero__meta { display: flex; align-items: center; gap: 16px; font-family: var(--font-sans); font-weight: 300; font-size: 12px; line-height: 1.4; color: var(--muted); }
.post-hero__title { font-family: var(--font-serif); font-weight: 500; font-size: clamp(28px, 3vw, 36px); line-height: 1.3; letter-spacing: 0.36px; color: var(--ink); margin: 0; }
.post-hero__summary { font-family: var(--font-sans); font-weight: 400; font-size: 18px; line-height: 1.4; letter-spacing: 0.18px; color: var(--ink); margin: 0; }
/* Article body (centered column) */
.post__content { max-width: 856px; margin: 0 auto; font-family: var(--font-sans); font-size: 18px; line-height: 1.7; color: var(--ink); }
/* Related Intelligence */
.related { padding: 20px 0 60px; }
.related .container { display: flex; flex-direction: column; gap: 44px; }
@media (max-width: 900px) {
    .post-hero { flex-direction: column; align-items: stretch; }
    .post-hero__media { width: 100%; max-width: none; aspect-ratio: 16 / 9; }
    .post-hero__body { padding: 0 0 4px; }
    .post-hero__title { font-size: 28px; }
}
.post__content p { margin: 0 0 1.2em; }
.post__content h2, .post__content h3 { font-family: var(--font-serif); margin: 1.6em 0 .5em; }
.post__content img { border-radius: var(--radius); margin: 1.4em 0; }
.post__content a { color: var(--brand); text-decoration: underline; }

/* Koenig editor cards */
.post__content .kg-width-wide { position: relative; width: 85vw; max-width: 1100px; left: 50%; transform: translateX(-50%); }
.post__content .kg-width-full { position: relative; width: 100vw; max-width: 100vw; left: 50%; transform: translateX(-50%); border-radius: 0; }
.post__content .kg-width-full img { border-radius: 0; }
.post__content figure { margin: 1.6em 0; }
.post__content figcaption { text-align: center; font-size: 14px; color: var(--muted); margin-top: .6em; }
.post__content .kg-image { border-radius: var(--radius); }
.post__content .kg-embed-card, .post__content .kg-gallery-container { margin: 1.6em 0; }

.error { text-align: center; padding: 100px 0; display: flex; flex-direction: column; gap: 16px; align-items: center; }
.error__code { font-family: var(--font-serif); font-size: 72px; }
.error__msg { color: var(--muted); margin: 0; }

/* ---------------------------------------------------------------- Header — Figma 2290:9293 */
.site-header { position: relative; z-index: 20; background: var(--brand); }
.site-header__inner { display: flex; align-items: center; justify-content: space-between; gap: 24px; height: 74px; padding: 16px var(--container-pad); max-width: var(--container); margin: 0 auto; }
.site-header__left { display: flex; align-items: center; gap: 36px; }
.site-logo { display: inline-flex; align-items: center; }
.site-logo img { height: 42px; width: auto; display: block; }

/* Nav pill (white rounded container) */
.site-nav { display: flex; align-items: center; }
.nav-pill { list-style: none; display: flex; flex-direction: row; flex-wrap: nowrap; align-items: center; gap: 12px; margin: 0; padding: 0 16px; background: #fff; border-radius: 12px; }
.nav-pill li { display: flex; white-space: nowrap; }
.site-nav__menu { display: flex; flex-direction: row; align-items: center; }
.site-nav__cta { display: none; }
.nav-pill a { font-family: var(--font-sans); font-weight: 500; font-size: 16px; line-height: 1.4; color: var(--ink); padding: 10px; transition: color .15s ease; }
.nav-pill a:hover, .nav-pill .nav-current a { color: #776142; }
.site-nav__toggle { display: none; align-items: center; justify-content: center; width: 40px; height: 40px; background: #fff; border: 1px solid var(--line); border-radius: 8px; cursor: pointer; flex-direction: column; gap: 4px; }
.site-nav__toggle span { display: block; width: 18px; height: 2px; background: var(--ink); }
/* Desktop: force inline row nav (guards against any mobile-rule leakage) */
@media (min-width: 761px) {
    .site-nav__toggle { display: none !important; }
    .site-nav__menu { position: static; flex-direction: row; display: flex; }
    .nav-pill { flex-direction: row; flex-wrap: nowrap; }
    .site-nav__cta { display: none; }
}

/* Transparent overlay header on Home + Insights (solid elsewhere) */
.site-wrapper { position: relative; }
.home-template .site-header,
.page-insights .site-header,
.page-the-memo .site-header,
.tag-insights .site-header { position: absolute; top: 0; left: 0; right: 0; background: transparent; border-bottom: 0; }
.home-template .site-header__cta.btn--light,
.page-insights .site-header__cta.btn--light,
.page-the-memo .site-header__cta.btn--light,
.tag-insights .site-header__cta.btn--light { border-color: transparent; }

/* ---------------------------------------------------------------- Hero — Figma 2290:9303 */
.hero { position: relative; overflow: hidden; display: flex; flex-direction: column; }
.hero__bg { position: absolute; inset: 0; background-size: cover; background-position: center; z-index: 0; }
.hero__scrim { position: absolute; inset: 0; z-index: 1; background: linear-gradient(180deg, rgba(20,15,8,0.45) 0%, rgba(20,15,8,0.18) 30%, rgba(20,15,8,0.28) 100%); }
.hero__inner { position: relative; z-index: 2; width: 100%; max-width: var(--container); margin: 0 auto; display: flex; flex-direction: column; align-items: center; gap: 28px; padding: 150px 237px 120px; text-align: center; }
.hero__text { display: flex; flex-direction: column; gap: 24px; width: 100%; color: #fff; }
.hero__title { font-family: var(--font-serif); font-weight: 500; font-size: clamp(32px, 4vw, 44px); line-height: 1.25; color: #fff; }
.hero__sub { font-family: var(--font-sans); font-weight: 300; font-size: 18px; line-height: 1.4; margin: 0; color: #fff; }
.hero__form { width: min(746px, 100%); }
.hero__field { display: flex; gap: 8px; align-items: stretch; }
.hero__input { flex: 1 1 0; min-width: 0; -webkit-backdrop-filter: blur(5px); backdrop-filter: blur(5px); background: rgba(66,56,46,0.7); border: 1px solid #fff; border-radius: 6px; padding: 10px 16px; font-family: var(--font-sans); font-size: 16px; color: #fff; }
.hero__input::placeholder { color: rgba(255,255,255,0.85); }
.hero__submit { flex-shrink: 0; white-space: nowrap; }
.hero__success, .hero__error { display: none; margin: 12px 0 0; font-family: var(--font-sans); font-size: 15px; line-height: 1.4; color: #fff; }
.hero__error { color: #ffd9d0; }
.hero__form.success .hero__field { display: none; }
.hero__form.success .hero__success { display: block; }
.hero__form .hero__error:not(:empty) { display: block; }

/* ---------------------------------------------------------------- Ticker (TradingView) — Figma 2290:9313 */
.ticker { position: relative; z-index: 2; background: var(--brand); padding: 2px 0; min-height: 46px; display: flex; align-items: center; }
.ticker .tradingview-widget-container { width: 100%; }
.ticker .tradingview-widget-container iframe { filter: invert(1) hue-rotate(180deg); }
.ticker .tv-ticker-item-tape span, .ticker .tv-ticker-item-tape__short-name { color: #ffffff !important; }
/* Static fallback ticker (used in preview / if widget unavailable) */
.ticker__fallback { display: flex; width: 100%; overflow: hidden; }
.ticker__item { padding: 10px 24px; border-right: 1px solid #949494; font-family: var(--font-sans); font-size: 20px; line-height: 1.4; color: #fff; white-space: nowrap; }

/* ---------------------------------------------------------------- Header (placeholder, refined w/ Figma) */

/* ---------------------------------------------------------------- Footer — Figma 2666:881 */
.site-footer { background: var(--brand); color: #fff; }
.site-footer__inner { display: flex; flex-direction: column; gap: 24px; padding-top: 80px; padding-bottom: 80px; }
.site-footer__tagline { font-family: var(--font-sans); font-weight: 400; font-size: 22px; line-height: 1.4; color: #fff; margin: 0; max-width: 420px; }
.site-footer__bottom { display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; }
.site-footer__copy { font-family: var(--font-sans); font-size: 12px; line-height: 1.4; color: #fff; margin: 0; }
.site-footer__links { display: flex; align-items: center; gap: 24px; flex-wrap: wrap; }
.site-footer__links a { font-family: var(--font-sans); font-size: 12px; line-height: 1.4; color: #fff; padding: 10px; transition: color .15s ease; }
.site-footer__links a:hover { color: var(--cream); }
@media (max-width: 560px) {
    .site-footer__tagline { max-width: none; }
    .site-footer__bottom { flex-direction: column; align-items: flex-start; gap: 12px; }
    .site-footer__links { justify-content: flex-start; margin-left: -10px; }
}

/* ---------------------------------------------------------------- Responsive */
@media (max-width: 1080px) {
    .hero__inner { padding: 130px 48px 100px; }
}
@media (max-width: 980px) {
    .article-card--big { flex-direction: column; align-items: stretch; }
    .article-card--big .article-card__media { width: 100%; max-width: none; aspect-ratio: 16 / 9; }
    .article-card--big .article-card__title { font-size: 26px; }
}
@media (max-width: 760px) {
    /* Mobile: only the burger shows in the bar, pinned to the right edge */
    .site-header__cta { display: none; }
    .site-header__left { width: 100%; justify-content: space-between; }
    .site-nav__toggle { display: flex; }
    .site-nav__menu {
        position: absolute; top: 100%; left: 0; right: 0; width: 100%;
        flex-direction: column; align-items: stretch; gap: 12px;
        padding: 20px var(--container-pad); border-radius: 0;
        background: #fff; box-shadow: 0 12px 28px rgba(0,0,0,0.14); display: none;
    }
    .site-header.is-open .site-nav__menu { display: flex; }
    /* Transparent header goes solid while the menu is open */
    .home-template .site-header.is-open,
    .page-insights .site-header.is-open,
    .page-the-memo .site-header.is-open,
    .tag-insights .site-header.is-open { background: var(--brand); }
    .nav-pill { flex-direction: column; align-items: stretch; gap: 4px; padding: 0; background: transparent; border-radius: 0; }
    .nav-pill a { padding: 10px 4px; font-size: 20px; }
    .site-nav__cta { display: inline-flex; width: 100%; }
    .hero__field { flex-direction: column; }
    .hero__submit { width: 100%; }
    .ticker__item { font-size: 16px; padding: 10px 16px; }
}
@media (max-width: 640px) {
    :root { --container-pad: 24px; }
    .hero__inner { padding: 120px 24px 80px; }
    .hero__title { font-size: 30px; }
}