/* ==========================================================================
   CRE42 - Consolidated Stylesheet (v12, 2026-07-29)
   Includes: v1/v2 legacy classes + v3 branded header/nav strip
   + v9 sitewide redesign: index-page design language (paper background,
   Source Serif 4 display type, larger v5 header with keyline, hairline
   card borders, dark footer), companion-workbook pill, page callout,
   700px chart width cap. First applied to demographics.html and
   demographics-us.html; propagates sitewide on deploy.
   + v10 (2026-07-29): page-level CSS consolidated out of the ten
   Inflation & Interest Rates content pages during their uniformity
   sweep (see the v10 block at the end of this file).
   + v12 (2026-07-29): .graph-image is a standard 1100x550 (2:1)
   frame with object-fit: contain, so every chart occupies an
   identical plate and chart edges align down the page. Supersedes
   the v11 height cap. .graph-image--wide drops the frame.
   All pages should reference: <link rel="stylesheet" href="styles.css?v=N">
   ========================================================================== */

@import url('https://fonts.googleapis.com/css2?family=Source+Serif+4:opsz,wght@8..60,400;8..60,600;8..60,700&display=swap');

/* CSS Variables - MIT Colors */
:root {
    --cardinal-red: #A31F34;
    --dark-gray: #2C2C2C;
    --medium-gray: #5A5A5A;
    --light-gray: #E8E8E8;
    --off-white: #F5F5F5;
    --white: #FFFFFF;
    --accent-red: #8B1A2E;
    /* v9 redesign tokens */
    --ink: #23282E;
    --body-gray: #3D434B;
    --muted: #6B7280;
    --paper: #FAF8F4;
    --card: #FFFFFF;
    --hairline: #E6DFD3;
    --gold: #C9A86A;
    --serif: 'Source Serif 4', Georgia, 'Times New Roman', serif;
    --sans: 'Helvetica Neue', Helvetica, Arial, sans-serif;
}

/* Reset & Base */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

html {
    font-size: 18px; /* Browser default is 16px; scales all rem-based elements ~12% larger */
}

body {
    font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
    line-height: 1.6;
    color: var(--dark-gray);
    background-color: var(--paper);
    font-size: 19px;
}

/* ==========================================================================
   SITE HEADER (v4 - Consolidated Red Header with Hamburger Menu)
   ========================================================================== */

.site-header {
    background-color: var(--cardinal-red);
    border-bottom: 4px solid var(--accent-red);
    box-shadow: 0 1px 0 0 rgba(201, 168, 106, 0.65);
}

.header-inner {
    max-width: 1400px;
    margin: 0 auto;
    padding: 1.2rem 1.5rem;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.header-left {
    display: flex;
    flex-direction: column;
}

/* Row 1: hamburger + CRE42 + subtitle */
.brand-row {
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

/* Hamburger button */
.hamburger-btn {
    width: 40px;
    height: 40px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 5px;
    cursor: pointer;
    border: 2px solid rgba(255,255,255,0.5);
    background: transparent;
    padding: 4px;
    border-radius: 8px;
    transition: all 0.2s;
    position: relative;
}

.hamburger-btn:hover {
    border-color: var(--white);
    background: rgba(255,255,255,0.1);
}

.hamburger-btn span {
    display: block;
    width: 20px;
    height: 2.5px;
    background: var(--white);
    border-radius: 2px;
    transition: all 0.3s;
}

/* Hamburger dropdown menu */
.hamburger-dropdown {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    background: var(--white);
    border: 1px solid var(--light-gray);
    border-radius: 8px;
    box-shadow: 0 8px 24px rgba(0,0,0,0.12);
    min-width: 200px;
    padding: 0.5rem 0;
    z-index: 500;
    margin-top: 4px;
}

.hamburger-dropdown.open {
    display: block;
}

.hamburger-dropdown a {
    display: block;
    padding: 0.65rem 1.25rem;
    color: var(--dark-gray);
    text-decoration: none;
    font-size: 0.92rem;
    font-weight: 600;
    transition: all 0.15s;
}

.hamburger-dropdown a:hover {
    background: rgba(163,31,52,0.06);
    color: var(--cardinal-red);
}

.logo-big {
    font-family: 'Courier New', monospace;
    font-size: 2.2rem;
    font-weight: 700;
    color: var(--white);
    text-decoration: none;
    line-height: 52px;
    white-space: nowrap;
}

.logo-big:hover {
    opacity: 0.85;
}

.logo-subtitle {
    font-family: var(--serif);
    font-style: italic;
    font-size: 1.12rem;
    color: rgba(255,255,255,0.85);
    font-weight: 400;
    white-space: nowrap;
}

/* Row 2: topic dropdown */
.topic-nav {
    margin-top: 0.25rem;
    display: flex;
    align-items: center;
    gap: 0.6rem;
}

.topic-nav select {
    padding: 0.4rem 0.8rem;
    font-size: 1rem;
    border: 1.5px solid rgba(255,255,255,0.55);
    border-radius: 4px;
    background: transparent;
    color: var(--white);
    font-weight: 600;
    cursor: pointer;
    min-width: 210px;
}

.topic-nav select option {
    color: var(--cardinal-red);
    background: var(--white);
}

.topic-nav select:focus {
    outline: none;
    box-shadow: 0 0 0 3px rgba(255,255,255,0.2);
}

.topic-hint {
    font-size: 1rem;
    color: rgba(255,255,255,0.6);
    font-style: italic;
    white-space: nowrap;
}

.mit-logo-link {
    display: flex;
    align-items: center;
    text-decoration: none;
    transition: opacity 0.2s;
}

.mit-logo-link:hover {
    opacity: 0.8;
}

.mit-logo-img {
    height: 72px;
    width: auto;
}

/* ==========================================================================
   LEGACY NAVIGATION (kept for backward compatibility)
   ========================================================================== */

.top-nav {
    background-color: var(--cardinal-red);
    box-shadow: 0 2px 8px rgba(0,0,0,0.1);
}

.nav-container {
    max-width: 1400px;
    margin: 0 auto;
    padding: 0 2rem;
    display: flex;
    justify-content: space-between;
    align-items: center;
    height: 60px;
}

.logo {
    font-size: 1.6rem;
    font-weight: 700;
    letter-spacing: 0;
    color: var(--white);
    text-decoration: none;
    font-family: 'Courier New', monospace;
}

.logo:hover {
    opacity: 0.9;
}

/* Dropdown Navigation */
.dropdown-nav select {
    padding: 0.6rem 1.2rem;
    font-size: 1rem;
    border: 2px solid var(--white);
    border-radius: 6px;
    background-color: var(--white);
    color: var(--cardinal-red);
    font-weight: 600;
    cursor: pointer;
    min-width: 200px;
}

.dropdown-nav select:hover {
    background-color: var(--off-white);
}

.dropdown-nav select:focus {
    outline: none;
    border-color: var(--white);
    box-shadow: 0 0 0 3px rgba(255,255,255,0.3);
}

/* ==========================================================================
   BREADCRUMB (white bar below nav)
   ========================================================================== */

.breadcrumb-container {
    background-color: var(--white);
    border-bottom: 1px solid var(--light-gray);
}

.breadcrumb {
    max-width: 1400px;
    margin: 0 auto;
    padding: 0.75rem 2rem;
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.95rem;
}

.breadcrumb a {
    color: var(--cardinal-red);
    text-decoration: none;
    transition: opacity 0.2s;
}

.breadcrumb a:hover {
    opacity: 0.7;
}

.breadcrumb-sep {
    color: var(--medium-gray);
    opacity: 0.6;
}

.breadcrumb-current {
    color: var(--medium-gray);
}

/* Legacy breadcrumb classes (v1 - inline in nav bar) */
.breadcrumb-separator {
    color: var(--white);
    opacity: 0.7;
    font-size: 0.9rem;
    padding: 0 0.25rem;
}

.breadcrumb-link {
    color: var(--white);
    text-decoration: none;
    font-size: 1rem;
    transition: opacity 0.3s;
}

.breadcrumb-link:hover {
    opacity: 0.8;
    text-decoration: underline;
}

/* ==========================================================================
   MAIN CONTAINER
   ========================================================================== */

.main-container {
    max-width: 1400px;
    margin: 0 auto;
    padding: 0 1.5rem;
}

/* ==========================================================================
   HOMEPAGE - Tile Navigation (v2 compact style)
   ========================================================================== */

.tile-navigation-compact {
    background-color: var(--white);
    border-radius: 12px;
    padding: 1.5rem;
    margin: 2rem 0 1rem;
    box-shadow: 0 2px 8px rgba(0,0,0,0.08);
}

.site-title {
    font-size: 1.8rem;
    color: var(--cardinal-red);
    text-align: center;
    margin-bottom: 1.2rem;
    font-weight: 700;
}

/* Row category labels */
.row-label {
    font-size: 0.82rem;
    font-weight: 700;
    color: var(--cardinal-red);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-bottom: 0.5rem;
    margin-top: 0.25rem;
}

.row-label + .tiles-row {
    margin-top: 0;
}

.tiles-row + .row-label {
    margin-top: 1.15rem;
}

.tiles-row {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 0.8rem;
    margin-bottom: 0.8rem;
}

.tiles-row:last-child {
    margin-bottom: 0;
}

.tile-small {
    background-color: var(--off-white);
    border: 2px solid var(--light-gray);
    border-radius: 8px;
    padding: 0.8rem;
    text-decoration: none;
    color: var(--dark-gray);
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    transition: all 0.25s ease;
    cursor: pointer;
    font-size: 0.95rem;
    font-weight: 600;
    min-height: 80px;
}

.tile-small:hover {
    transform: translateY(-2px);
    border-color: var(--cardinal-red);
    box-shadow: 0 4px 12px rgba(163, 31, 52, 0.2);
    background-color: var(--white);
}

.tile-small.tile-placeholder {
    background-color: transparent;
    border: 2px dashed var(--light-gray);
    cursor: default;
    color: var(--light-gray);
}

.tile-small.tile-placeholder:hover {
    transform: none;
    box-shadow: none;
}

/* Legacy tile navigation (v1) */
.tile-navigation {
    background-color: var(--white);
    border-radius: 12px;
    padding: 1.5rem;
    margin: 1.5rem 0;
    box-shadow: 0 2px 8px rgba(0,0,0,0.08);
}

.tile-row {
    margin-bottom: 1rem;
}

.tile-row:last-child {
    margin-bottom: 0;
}

.tiles-grid {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 0.75rem;
}

.tile {
    background-color: var(--off-white);
    border: 2px solid var(--light-gray);
    border-radius: 10px;
    padding: 0.75rem 1rem;
    text-decoration: none;
    color: var(--dark-gray);
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    transition: all 0.25s ease;
    cursor: pointer;
    font-size: 0.95rem;
    font-weight: 600;
    min-height: 50px;
}

.tile:hover {
    transform: translateY(-3px);
    border-color: var(--cardinal-red);
    box-shadow: 0 4px 12px rgba(163, 31, 52, 0.2);
    background-color: var(--white);
}

.tile.tile-placeholder {
    background-color: transparent;
    border: 2px dashed var(--light-gray);
    cursor: default;
    color: var(--light-gray);
    font-size: 1.2rem;
}

.tile.tile-placeholder:hover {
    transform: none;
    box-shadow: none;
    border-color: var(--light-gray);
    background-color: transparent;
}

/* ==========================================================================
   CHARTS OF THE DAY (Homepage)
   ========================================================================== */

.charts-of-day {
    background-color: var(--white);
    border-radius: 12px;
    padding: 2rem;
    margin: 2rem 0;
    box-shadow: 0 2px 8px rgba(0,0,0,0.08);
}

.section-title {
    font-size: 1.8rem;
    color: var(--cardinal-red);
    margin-bottom: 1.5rem;
    font-weight: 700;
}

.charts-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 2rem;
}

.chart-card {
    background-color: var(--off-white);
    border-radius: 8px;
    overflow: hidden;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.chart-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 6px 20px rgba(0,0,0,0.12);
}

.chart-card img {
    width: 100%;
    height: auto;
    display: block;
}

.chart-info {
    padding: 1.5rem;
}

.chart-info h3 {
    color: var(--dark-gray);
    font-size: 1.3rem;
    margin-bottom: 0.75rem;
}

.chart-info p {
    color: var(--medium-gray);
    font-size: 0.95rem;
    margin-bottom: 1rem;
    line-height: 1.5;
}

.chart-link {
    color: var(--cardinal-red);
    text-decoration: none;
    font-weight: 600;
    font-size: 0.95rem;
    transition: opacity 0.2s;
}

.chart-link:hover {
    opacity: 0.7;
}

/* ==========================================================================
   ARTICLES SECTION (Homepage)
   ========================================================================== */

.articles-section {
    background-color: var(--white);
    border-radius: 12px;
    padding: 2rem;
    margin: 2rem 0 3rem;
    box-shadow: 0 2px 8px rgba(0,0,0,0.08);
}

.articles-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
    gap: 1.5rem;
}

.article-card {
    border-left: 4px solid var(--cardinal-red);
    padding: 1.5rem;
    background-color: var(--off-white);
    border-radius: 4px;
    transition: all 0.3s ease;
}

.article-card:hover {
    background-color: var(--light-gray);
    transform: translateX(4px);
}

.article-date {
    color: var(--medium-gray);
    font-size: 0.85rem;
    margin-bottom: 0.5rem;
    font-weight: 600;
}

.article-card h3 {
    color: var(--dark-gray);
    font-size: 1.2rem;
    margin-bottom: 0.75rem;
}

.article-card p {
    color: var(--medium-gray);
    font-size: 0.95rem;
    line-height: 1.6;
    margin-bottom: 1rem;
}

.article-link {
    color: var(--cardinal-red);
    text-decoration: none;
    font-weight: 600;
    font-size: 0.9rem;
    transition: opacity 0.2s;
}

.article-link:hover {
    opacity: 0.7;
}

.article-link.disabled {
    color: var(--medium-gray);
    cursor: not-allowed;
}

.article-link.disabled:hover {
    opacity: 1;
}

/* Legacy headlines section (v1) */
.headlines-section {
    background-color: var(--white);
    border-radius: 12px;
    padding: 2rem;
    margin-bottom: 3rem;
    box-shadow: 0 2px 8px rgba(0,0,0,0.08);
}

.headlines-title {
    font-size: 1.8rem;
    color: var(--cardinal-red);
    margin-bottom: 1.5rem;
    font-weight: 700;
}

.headlines-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
    gap: 1.5rem;
}

.headline-card {
    border-left: 4px solid var(--cardinal-red);
    padding: 1.5rem;
    background-color: var(--off-white);
    border-radius: 4px;
    transition: all 0.3s ease;
    cursor: pointer;
}

.headline-card:hover {
    background-color: var(--light-gray);
    transform: translateX(4px);
}

.headline-card h3 {
    color: var(--dark-gray);
    font-size: 1.2rem;
    margin-bottom: 0.5rem;
}

.headline-date {
    color: var(--medium-gray);
    font-size: 0.85rem;
    margin-bottom: 0.75rem;
}

.headline-excerpt {
    color: var(--medium-gray);
    font-size: 0.95rem;
    line-height: 1.6;
}

/* ==========================================================================
   LANDING PAGE (Force pages like inflation.html)
   ========================================================================== */

.landing-hero {
    background-color: var(--card);
    border: 1px solid var(--hairline);
    border-radius: 12px;
    padding: 2.5rem;
    margin: 2rem 0;
    box-shadow: 0 1px 3px rgba(35,40,46,0.05);
}

.landing-title {
    font-family: var(--serif);
    font-size: 2.5rem;
    color: var(--ink);
    margin-bottom: 0.35rem;
    font-weight: 600;
    letter-spacing: -0.005em;
}

/* Short cardinal accent rule under page and landing titles (v9) */
.title-rule {
    width: 72px;
    height: 5px;
    background: var(--cardinal-red);
    margin: 0 0 1.4rem;
}

.landing-intro {
    font-size: 1.15rem;
    color: var(--dark-gray);
    line-height: 1.8;
    max-width: 900px;
}

/* Landing page hero flex layout (text left, images right) */
.landing-hero-flex {
    display: flex;
    align-items: stretch;
    gap: 2.5rem;
}

.landing-hero-text {
    flex: 1 1 58%;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

.landing-hero-text .landing-intro {
    margin: 0;
    max-width: none;
}

.landing-hero-image {
    flex: 0 1 40%;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    gap: 0.75rem;
}

.landing-hero-image img {
    width: 100%;
    aspect-ratio: 5 / 3;
    object-fit: cover;
    border-radius: 8px;
    box-shadow: 0 2px 10px rgba(0,0,0,0.12);
}

.placeholder-image {
    width: 100%;
    aspect-ratio: 5 / 3;
    background: var(--light-gray);
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--medium-gray);
    font-size: 0.85rem;
    font-style: italic;
    border: 2px dashed #CCCCCC;
}

@media (max-width: 900px) {
    .landing-hero-flex {
        flex-direction: column;
    }
    .landing-hero-image {
        flex: 1 1 100%;
        max-width: 80%;
        margin: 0 auto;
    }
}

/* Article Section (landing page content blocks) */
.article-section {
    background-color: var(--card);
    border: 1px solid var(--hairline);
    border-radius: 12px;
    padding: 2rem;
    margin: 2rem 0;
    box-shadow: 0 1px 3px rgba(35,40,46,0.05);
}

.section-heading {
    font-family: var(--serif);
    font-size: 1.55rem;
    color: var(--ink);
    margin-bottom: 1.5rem;
    padding-bottom: 0.75rem;
    border-bottom: 1px solid var(--hairline);
    font-weight: 700;
}

/* Article List Grid (3-column tile cards on landing pages) */
.article-list-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1.5rem;
}

.article-list-item {
    padding: 1.2rem;
    background-color: var(--off-white);
    border-radius: 6px;
    border-left: 3px solid var(--cardinal-red);
    transition: all 0.3s ease;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.article-list-item:hover {
    background-color: var(--light-gray);
    transform: translateX(3px);
    box-shadow: 0 2px 8px rgba(0,0,0,0.1);
}

.article-list-link {
    text-decoration: none;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.article-list-title {
    font-size: 1rem;
    font-weight: 700;
    color: var(--cardinal-red);
    line-height: 1.4;
}

.article-list-title.coming-soon {
    color: var(--medium-gray);
    font-style: italic;
}

.article-list-desc {
    font-size: 0.9rem;
    color: var(--medium-gray);
    line-height: 1.6;
}

/* Data Sources Grid (landing pages) */
.data-sources-section {
    background-color: var(--card);
    border: 1px solid var(--hairline);
    border-radius: 12px;
    padding: 2rem;
    margin: 2rem 0 3rem;
    box-shadow: 0 1px 3px rgba(35,40,46,0.05);
}

.sources-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1.5rem;
}

.source-item {
    padding: 1rem;
    background-color: #FBF9F5;
    border: 1px solid var(--hairline);
    border-radius: 6px;
    font-size: 0.9rem;
    line-height: 1.6;
}

.source-item strong {
    color: var(--dark-gray);
}

.source-item a {
    color: var(--cardinal-red);
    text-decoration: none;
    border-bottom: 1px solid transparent;
    transition: border-bottom 0.2s;
}

.source-item a:hover {
    border-bottom: 1px solid var(--cardinal-red);
}

/* ==========================================================================
   CONTENT / TILE PAGES (family-formation, inflation-by-decade, etc.)
   ========================================================================== */

.content-page {
    background-color: var(--card);
    border: 1px solid var(--hairline);
    border-radius: 12px;
    padding: 2rem 2.5rem;
    margin: 2rem 0;
    box-shadow: 0 1px 3px rgba(35,40,46,0.05);
}

.page-title {
    font-family: var(--serif);
    font-size: 2.3rem;
    font-weight: 600;
    color: var(--ink);
    line-height: 1.25;
    letter-spacing: -0.005em;
    margin-bottom: 0.35rem;
}

.page-content {
    line-height: 1.8;
}

.page-content h2 {
    font-family: var(--serif);
    color: var(--ink);
    font-weight: 600;
    font-size: 1.7rem;
    margin: 2.2rem 0 1rem;
}

.page-content h3 {
    font-family: var(--serif);
    color: var(--ink);
    font-weight: 600;
    font-size: 1.35rem;
    margin: 1.5rem 0 1rem;
}

.page-content h4 {
    color: var(--cardinal-red);
    font-size: 1.15rem;
    font-weight: 700;
    margin: 1.6rem 0 0.8rem;
}

/* Reset h4 styling inside methodology and callout sections */
.methodology-content h4,
.methodology-toggle h4,
.callout-box h4,
details h4 {
    color: var(--dark-gray);
    text-decoration: none;
}

.page-content p {
    margin-bottom: 1.2rem;
    color: var(--dark-gray);
    line-height: 1.75;
    font-size: 1.065rem;
}

.page-content strong {
    color: var(--dark-gray);
    font-weight: 700;
}

.page-content a {
    color: var(--cardinal-red);
    text-decoration: none;
    border-bottom: 1px solid transparent;
    transition: border-bottom 0.3s ease;
}

.page-content a:hover {
    border-bottom: 1px solid var(--cardinal-red);
}

.page-content ul {
    margin: 0.5rem 0 1.5rem 1.5rem;
    color: var(--dark-gray);
}

.page-content ul li {
    margin-bottom: 0.6rem;
    line-height: 1.7;
}

/* Key Points / Bullets */
.key-points {
    margin: 2rem 0;
}

.bullet-item {
    margin-bottom: 1.5rem;
    padding-left: 1.5rem;
    position: relative;
}

.bullet-item::before {
    content: "\25B8";
    color: var(--cardinal-red);
    font-size: 1.2rem;
    position: absolute;
    left: 0;
}

.bullet-title {
    font-weight: 700;
    color: var(--dark-gray);
    display: block;
    margin-bottom: 0.5rem;
}

.bullet-text {
    color: var(--medium-gray);
    line-height: 1.7;
}

/* Graph / Chart Container */
.graph-container {
    margin: 2.5rem auto;
    text-align: center;
    max-width: 100%;
}

/* STANDARD CHART FRAME (v12, 2026-07-29). Every chart occupies an identical
   1100x550 (2:1) plate, whatever the shape of the underlying image. The image
   is centred inside with object-fit: contain, so nothing is cropped or
   stretched; off-ratio charts simply carry white margin inside the frame.
   This supersedes the v11 height cap, which equalised height but left widths
   ranging 513-1229px, so chart edges never lined up down the page. Charts
   authored at 2:1 per CLAUDE.md 11.2 fill the frame exactly. Genuine
   exceptions opt out with .graph-image--wide. */
.graph-image {
    width: 100%;
    max-width: 1100px;
    aspect-ratio: 2 / 1;
    object-fit: contain;
    height: auto;
    display: block;
    margin: 0 auto;
    background: #fff;
    border-radius: 8px;
    border: 1px solid var(--hairline);
    box-shadow: 0 2px 8px rgba(35,40,46,0.08);
}

/* Opt-out for charts that genuinely need their own shape: stacked multi-panel
   figures, portrait infographics, tall ranked bar lists. Drops the frame; the
   chart then renders at its natural aspect ratio up to the container width. */
.graph-image--wide {
    aspect-ratio: auto;
    max-width: 100%;
    max-height: none;
}

.graph-caption {
    margin-top: 1rem;
    font-size: 0.95rem;
    color: var(--medium-gray);
    font-style: italic;
}

/* Data Sources (tile pages) */
.data-sources {
    margin-top: 3rem;
    padding-top: 2rem;
    border-top: 1px solid var(--hairline);
}

.data-sources h3 {
    font-family: var(--serif);
    color: var(--ink);
    font-size: 1.3rem;
    margin-bottom: 1rem;
}

.data-sources p {
    color: var(--medium-gray);
    margin-bottom: 0.8rem;
}

.data-sources a {
    color: var(--cardinal-red);
    text-decoration: none;
    border-bottom: 1px solid transparent;
    transition: border-bottom 0.3s ease;
}

.data-sources a:hover {
    border-bottom: 1px solid var(--cardinal-red);
}

/* ==========================================================================
   TILE NAVIGATION: Floating Prev/Next Buttons (v5)
   Both buttons: red bg, white text on top, arrow below, fixed size
   ========================================================================== */

.tile-nav-prev,
.tile-nav-next {
    position: fixed;
    bottom: 2rem;
    z-index: 1000;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.15rem;
    width: 100px;
    height: 72px;
    text-decoration: none;
    border-radius: 8px;
    transition: all 0.25s ease;
    background-color: var(--cardinal-red);
    color: var(--white);
    box-shadow: 0 4px 16px rgba(163, 31, 52, 0.35);
}

.tile-nav-prev:hover,
.tile-nav-next:hover {
    background-color: var(--accent-red);
    box-shadow: 0 6px 24px rgba(163, 31, 52, 0.45);
    transform: translateY(-2px);
}

.tile-nav-next {
    right: calc(50% - 700px - 100px - 0.75rem);
}

.tile-nav-prev {
    left: calc(50% - 700px - 100px - 0.75rem);
}

.tile-nav-label {
    font-size: 0.72rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.6px;
    line-height: 1.25;
    color: var(--white);
}

.tile-nav-arrow {
    font-size: 1.15rem;
    line-height: 1;
    margin-top: 0.15rem;
    color: var(--white);
}

/* ==========================================================================
   DOCUMENT LINKS
   ========================================================================== */

.document-links {
    margin: 0.75rem 0;
    padding: 0.6rem 1rem;
    background-color: var(--off-white);
    border-radius: 6px;
    border-left: 4px solid var(--cardinal-red);
}

.document-links h3 {
    color: var(--cardinal-red);
    font-size: 1rem;
    margin: 0 0 0.3rem 0;
}

.document-links p {
    margin: 0;
    font-size: 0.9rem;
}

.document-links a {
    color: var(--cardinal-red);
    text-decoration: none;
    font-weight: 600;
    border-bottom: 1px solid transparent;
    transition: border-bottom 0.2s;
}

.document-links a:hover {
    border-bottom: 1px solid var(--cardinal-red);
}

/* ==========================================================================
   FOOTNOTES
   ========================================================================== */

.footnote-ref {
    font-size: 0.75rem;
    vertical-align: super;
    color: var(--cardinal-red);
    text-decoration: none;
    font-weight: 600;
    cursor: pointer;
}

.footnote-ref:hover {
    text-decoration: underline;
}

.footnotes-section {
    margin-top: 2rem;
    padding-top: 1.5rem;
    border-top: 1px solid var(--hairline);
}

.footnotes-section h3 {
    color: var(--medium-gray);
    font-size: 1rem;
    margin-bottom: 0.75rem;
}

.footnote-item {
    font-size: 0.88rem;
    color: var(--medium-gray);
    line-height: 1.7;
    margin-bottom: 0.75rem;
    padding-left: 1.5rem;
    text-indent: -1.5rem;
}

.footnote-item strong {
    color: var(--cardinal-red);
}

/* ==========================================================================
   METHODOLOGY ACCORDION
   ========================================================================== */

.methodology-section {
    margin-top: 2rem;
}

.methodology-section details {
    border: 1px solid var(--hairline);
    border-radius: 8px;
    padding: 0;
    overflow: hidden;
}

.methodology-section summary {
    padding: 1rem 1.5rem;
    background-color: var(--off-white);
    font-weight: 700;
    color: var(--dark-gray);
    cursor: pointer;
    font-size: 1rem;
    transition: background-color 0.2s;
}

.methodology-section summary:hover {
    background-color: var(--light-gray);
}

.methodology-section details[open] summary {
    border-bottom: 1px solid var(--light-gray);
}

.methodology-content {
    padding: 1.5rem;
    font-size: 0.92rem;
    line-height: 1.7;
    color: var(--medium-gray);
}

.methodology-content h4 {
    color: var(--dark-gray);
    font-size: 1rem;
    margin: 1rem 0 0.5rem;
}

.methodology-content p {
    margin-bottom: 0.8rem;
}

/* ==========================================================================
   FOOTER
   ========================================================================== */

footer {
    background-color: #22262B;
    color: rgba(255,255,255,0.75);
    text-align: center;
    padding: 1.6rem 1.5rem;
    margin-top: 2rem;
    border-top: 4px solid var(--cardinal-red);
}

footer .foot-affil {
    font-size: 0.78rem;
    font-weight: 700;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: rgba(255,255,255,0.9);
    margin-bottom: 0.3rem;
}

footer .foot-copy {
    font-size: 0.85rem;
}

/* ==========================================================================
   RESPONSIVE
   ========================================================================== */

@media (max-width: 1024px) {
    .tiles-row {
        grid-template-columns: repeat(3, 1fr);
    }

    .tiles-grid {
        grid-template-columns: repeat(3, 1fr);
    }

    .charts-grid {
        grid-template-columns: 1fr;
    }

    .article-list-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .sources-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .graph-container {
        max-width: 95%;
    }
}

@media (max-width: 768px) {
    /* v4 Header responsive */
    .header-inner {
        padding: 0.7rem 1rem;
    }

    .logo-big {
        font-size: 1.35rem;
        line-height: 36px;
    }

    .logo-subtitle {
        display: none;
    }

    .hamburger-btn {
        width: 36px;
        height: 36px;
    }

    .mit-logo-img {
        height: 38px;
    }

    .topic-nav select {
        min-width: 140px;
        font-size: 0.78rem;
    }

    .topic-hint {
        display: none;
    }

    /* Legacy nav responsive */
    .nav-container {
        height: auto;
        min-height: 60px;
        flex-direction: column;
        padding: 1rem;
        gap: 1rem;
    }

    .tiles-row {
        grid-template-columns: repeat(2, 1fr);
        gap: 0.6rem;
    }

    .tile-small {
        padding: 0.6rem;
        min-height: 50px;
        font-size: 0.85rem;
    }

    .tiles-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 0.5rem;
    }

    .tile {
        padding: 0.6rem 0.75rem;
        min-height: 45px;
        font-size: 0.85rem;
    }

    .articles-grid,
    .headlines-grid {
        grid-template-columns: 1fr;
    }

    .article-list-grid {
        grid-template-columns: 1fr;
    }

    .sources-grid {
        grid-template-columns: 1fr;
    }

    .graph-container {
        max-width: 100%;
    }

    .landing-title {
        font-size: 1.8rem;
    }

    .landing-intro {
        font-size: 1rem;
    }

    .page-title {
        font-size: 1.6rem;
    }

    .content-page {
        padding: 1.5rem 1.25rem;
    }

    .tile-nav-prev,
    .tile-nav-next {
        bottom: 1rem;
        width: 54px;
        height: 54px;
        border-radius: 50%;
    }
    .tile-nav-prev { left: 0.75rem; }
    .tile-nav-next { right: 0.75rem; }
    .tile-nav-label { display: none; }
    .tile-nav-arrow { font-size: 1.3rem; margin: 0; }
}

/* Small phone: circle nav buttons */
@media (max-width: 480px) {
    .tile-nav-prev,
    .tile-nav-next {
        width: 46px;
        height: 46px;
        bottom: 1rem;
    }
    .tile-nav-prev { left: 0.75rem; }
    .tile-nav-next { right: 0.75rem; }
}

/* Wide screens: fallback when buttons would go offscreen */
@media (max-width: 1650px) {
    .tile-nav-prev { left: 0.75rem; }
    .tile-nav-next { right: 0.75rem; }
}

/* ============================================================
   CRE42 v8 additions (2026-05-25)
   Sub-page support and parent-landing sub-button nav.
   See protocol-changelog and CLAUDE.md §6.6 amendments.
   ============================================================ */

/* ── Sub-page intro framing copy ─────────────────────────── */
.framing-copy {
    font-size: 1.02rem;
    line-height: 1.7;
    color: var(--dark-gray);
    margin: 0 0 1.5rem;
}

/* ── Bridge text between paired charts (e.g. METR p50→p80) ── */
.between-charts-line {
    font-style: italic;
    color: var(--medium-gray);
    font-size: 0.95rem;
    margin: 1rem 0 0.5rem;
    text-align: center;
}

/* ── Saturation / data table convention ──────────────────── */
.sat-table {
    width: 100%;
    border-collapse: collapse;
    margin: 1.5rem 0 0.5rem;
    font-size: 0.91rem;
}
.sat-table th {
    background: var(--cardinal-red);
    color: #fff;
    padding: 0.55rem 0.75rem;
    text-align: left;
    font-weight: 600;
    font-size: 0.88rem;
}
.sat-table td {
    padding: 0.55rem 0.75rem;
    border-bottom: 1px solid var(--light-gray);
    vertical-align: top;
    color: var(--dark-gray);
    line-height: 1.45;
}
.sat-table tr:nth-child(even) td {
    background: var(--off-white);
}
.sat-table tr.unsaturated td {
    background: #fff8f8;
    font-style: italic;
}
.sat-table-caption {
    font-size: 0.82rem;
    color: var(--medium-gray);
    font-style: italic;
    margin: 0.3rem 0 1.5rem;
    line-height: 1.5;
}

/* ── Expandable dropdown panels (timeline, revolutions) ──── */
.expand-panel {
    margin: 1.5rem 0;
    border-radius: 6px;
    overflow: hidden;
    border: 1px solid var(--light-gray);
}
.expand-panel summary {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    padding: 0.8rem 1.2rem;
    background: var(--off-white);
    font-size: 1rem;
    font-weight: 600;
    color: var(--cardinal-red);
    cursor: pointer;
    list-style: none;
    transition: background 0.2s;
    border-bottom: 1px solid transparent;
}
.expand-panel summary:hover { background: #F0E8E9; }
.expand-panel summary::-webkit-details-marker { display: none; }
.expand-panel summary .arrow {
    display: inline-block;
    transition: transform 0.2s;
    font-size: 0.8rem;
}
.expand-panel[open] summary { border-bottom: 1px solid var(--light-gray); }
.expand-panel[open] summary .arrow { transform: rotate(90deg); }
.expand-content {
    padding: 1rem 1.2rem;
    background: #fff;
}
.expand-content h4 {
    color: var(--cardinal-red);
    font-size: 1.05rem;
    margin: 1.2rem 0 0.5rem;
}
.expand-content h4:first-child { margin-top: 0.5rem; }
.timeline-entry {
    margin-bottom: 1rem;
    line-height: 1.7;
    font-size: 0.95rem;
}
.timeline-entry strong { color: var(--dark-gray); }

/* ── Industrial-revolutions–style reference table ────────── */
.rev-table {
    width: 100%;
    border-collapse: collapse;
    margin: 0.5rem 0;
    font-size: 0.92rem;
}
.rev-table th {
    background: var(--cardinal-red);
    color: #fff;
    padding: 0.55rem 0.75rem;
    text-align: left;
}
.rev-table td {
    padding: 0.55rem 0.75rem;
    border-bottom: 1px solid var(--light-gray);
}
.rev-table tr:nth-child(even) td { background: var(--off-white); }

/* ── Footnote back-link ──────────────────────────────────── */
.footnote-backref {
    color: var(--cardinal-red);
    text-decoration: none;
    margin-left: 0.3rem;
}

/* ============================================================
   PARENT LANDING PAGE: tile sub-button nav
   (shared CSS — tile-card grid CSS itself remains inlined
   on each landing page per §6.6)
   ============================================================ */

/* Sub-nav dropdown panel beneath a parent tile's chevron */
.tile-subnav {
    max-height: 0;
    overflow: hidden;
    background: #ededed;
    transition: max-height 0.3s ease, padding 0.3s ease;
}

/* Hover on the whole tile-card opens the sub-nav (desktop) */
/* max-height must clear the tallest sub-nav. Each .tile-subbtn is 74px
   + 8px gap (~82px per row) plus 22px panel padding, so 5 rows = 424px
   (the old 400px clipped the 5th button) and 8 rows = 670px.
   900px leaves headroom for future rows without clipping. */
.tile-card:hover .tile-subnav {
    max-height: 900px;
    padding: 10px 12px 12px;
    border-top: 1px solid #eee;
}

/* Click fallback — JS toggles .force-open which overrides hover state.
   Useful for touch devices that can't hover */
.tile-subnav.force-open {
    max-height: 900px;
    padding: 10px 12px 12px;
    border-top: 1px solid #eee;
}

/* Sub-button: gray bg, red border/text, 10% smaller than parent tile */
.tile-subbtn {
    display: flex;
    align-items: center;
    height: 74px;
    padding: 0 16px;
    margin-bottom: 8px;
    background: #ededed;
    border: 1.5px solid var(--cardinal-red);
    border-radius: 7px;
    text-decoration: none;
    transition: background 0.12s, transform 0.1s;
}
.tile-subbtn:last-child { margin-bottom: 0; }
.tile-subbtn:hover {
    background: #e0e0e0;
    transform: translateX(2px);
}
.tile-subbtn-num {
    flex: 0 0 auto;
    margin-right: 12px;
    font-size: 14.5px;
    font-weight: 700;
    color: var(--cardinal-red);
    opacity: 0.55;
}
.tile-subbtn-text {
    font-size: 14.5px;
    font-weight: 700;
    color: var(--cardinal-red);
    line-height: 1.4;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* Inert 24px white strip beneath tiles that have no sub-nav —
   maintains visual height parity with chevron-equipped tiles */
.tile-bottom-strip {
    height: 24px;
    background: #fff;
    border-top: 1px solid #eee;
}


/* ============================================================
   CRE42 v9 additions (2026-07-25)
   Companion-workbook pill and cross-page callout banner.
   First applied to demographics-us.html.
   ============================================================ */

/* ── Companion Excel workbook pill (replaces .document-links box) ── */
.workbook-links {
    display: flex;
    flex-wrap: wrap;
    gap: 0.6rem;
    margin: 0 0 1.6rem;
}

.workbook-link {
    display: inline-flex;
    align-items: center;
    gap: 0.55rem;
    padding: 0.5rem 1.1rem;
    background: var(--cardinal-red);
    border: 1.5px solid var(--cardinal-red);
    border-radius: 999px;
    color: #fff;
    font-weight: 700;
    font-size: 0.92rem;
    text-decoration: none;
    box-shadow: 0 2px 6px rgba(163,31,52,0.25);
    transition: background 0.15s, transform 0.12s;
}

.workbook-link:hover {
    background: var(--accent-red);
    transform: translateY(-1px);
}

/* Guard against .page-content link underline styling */
.page-content .workbook-link,
.page-content .workbook-link:hover {
    border-bottom: none;
    color: #fff;
}

.workbook-link svg {
    width: 15px;
    height: 15px;
    flex: 0 0 auto;
}

/* ── Cross-page callout banner (e.g. state pyramids jump) ── */
.page-callout {
    background: #FBF9F5;
    border: 1px solid var(--hairline);
    border-left: 4px solid var(--cardinal-red);
    padding: 0.85rem 1.1rem;
    margin: 2rem 0;
    display: flex;
    align-items: center;
    justify-content: space-between;
    border-radius: 0 8px 8px 0;
}

.page-callout-title {
    font-size: 1rem;
    font-weight: 700;
    color: var(--ink);
}

.page-callout-btn {
    background: var(--cardinal-red);
    color: #fff;
    font-size: 0.82rem;
    font-weight: 700;
    padding: 0.5rem 1rem;
    border-radius: 6px;
    text-decoration: none;
    white-space: nowrap;
    margin-left: 1rem;
}

.page-callout-btn:hover {
    background: var(--accent-red);
}

.page-content .page-callout-btn,
.page-content .page-callout-btn:hover {
    border-bottom: none;
    color: #fff;
}


/* ============================================================
   CRE42 v10 additions (2026-07-29)
   Inflation & Interest Rates uniformity sweep: page-level CSS
   that was duplicated inline across the inflation content pages,
   consolidated here per CLAUDE.md 5.1. Sources of these rules:
   inflation-national-debt.html, inflation-debt-balance-sheet.html,
   inflation-debt-total-us-debt.html, inflation-debt-interest-deficit.html.
   The .kw-tile-* hub grid stays inline on inflation-debt-overview.html
   per CLAUDE.md 6.9.
   ============================================================ */

/* -- Related topics block (was inline on four debt pages) -- */
.related-topics {
    margin: 2rem 0 0;
    padding: 1.5rem;
    background-color: var(--off-white);
    border-radius: 6px;
    border-left: 3px solid var(--medium-gray);
}
.related-topics h3 {
    color: var(--dark-gray);
    font-size: 1.1rem;
    margin-bottom: 0.75rem;
}
.related-topics ul {
    list-style: none;
    margin: 0;
    padding: 0;
}
.related-topics ul li {
    margin-bottom: 0.5rem;
    line-height: 1.6;
}
.related-topics ul li a {
    color: var(--cardinal-red);
    text-decoration: none;
    font-weight: 500;
}
.related-topics ul li a:hover { text-decoration: underline; }
.related-topics ul li span {
    color: var(--medium-gray);
    font-style: italic;
}

/* -- Next-page call to action (was inline on inflation-national-debt.html) -- */
.next-tile-cta {
    margin: 2.5rem 0 1.5rem;
    padding: 1.25rem 1.5rem;
    background: linear-gradient(135deg, #fdf6f6, #fff);
    border: 1px solid var(--cardinal-red);
    border-radius: 6px;
    text-align: center;
}
.next-tile-cta a {
    color: var(--cardinal-red);
    font-weight: 700;
    font-size: 1.05rem;
    text-decoration: none;
}
.next-tile-cta a:hover { text-decoration: underline; }
.next-tile-cta .cta-subtitle {
    display: block;
    font-size: 0.85rem;
    color: var(--medium-gray);
    margin-top: 0.35rem;
    font-weight: 400;
}

/* -- Data-table extensions used by the debt pages -- */
.table-scroll { overflow-x: auto; }
.sat-table td.num,
.sat-table th.num { text-align: right; white-space: nowrap; }
.sat-table tr.total-row td {
    font-weight: 700;
    border-top: 2px solid var(--cardinal-red);
}
.page-content h3.key-obs { color: var(--cardinal-red); }

/* -- Expand-panel body text (extends the shared .expand-panel rules above) -- */
.expand-content p {
    margin: 0 0 1.1rem;
    line-height: 1.7;
}
.expand-content p:last-child { margin-bottom: 0; }
.expand-content h4 + p { margin-top: 0; }
.expand-content u {
    text-decoration: underline;
    text-decoration-color: var(--dark-gray);
    text-underline-offset: 3px;
    font-weight: 600;
}

/* -- Exit-scenario block (inflation-debt-total-us-debt.html) -- */
.exit-block { margin: 1rem 0; }
.exit-block p { margin: 0 0 1rem; line-height: 1.7; }
#detailTable td,
#detailTable th { font-size: 0.83rem; padding: 0.32rem 0.5rem; }

/* -- Interactive deficit model (inflation-debt-interest-deficit.html) -- */
.lab-controls {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 0.9rem 1.4rem;
    margin: 0.4rem 0 1.1rem;
}
.lab-controls label {
    font-size: 0.9rem;
    font-weight: 600;
    color: var(--dark-gray);
    display: block;
    margin-bottom: 0.15rem;
}
.lab-controls .val { color: var(--cardinal-red); font-weight: 700; }
.lab-controls input[type=range] { width: 100%; accent-color: var(--cardinal-red); }
.lab-verdict {
    background: #f3f4f6;
    border-left: 3px solid var(--cardinal-red);
    padding: 0.7rem 1rem;
    margin: 0.9rem 0;
    font-size: 0.95rem;
    line-height: 1.6;
}
.lab-note { font-size: 0.85rem; color: var(--medium-gray); line-height: 1.5; }
#labTable td,
#labTable th { font-size: 0.82rem; padding: 0.3rem 0.5rem; }

/* -- Collapsible methodology block (was inline on inflation-national-debt.html) -- */
.methodology-toggle summary {
    cursor: pointer;
    font-weight: 600;
    color: var(--cardinal-red);
    font-size: 1.1rem;
    padding: 0.5rem 0;
}
.methodology-toggle summary::before {
    content: "\25B8 ";
    color: var(--cardinal-red);
}
.methodology-toggle[open] summary::before { content: "\25BE "; }
.methodology-toggle .methodology-content { margin-top: 1rem; }

/* -- Emphasised figure inside a .sat-table (inflation-by-category.html) -- */
.sat-table td.hi {
    font-weight: 700;
    color: var(--cardinal-red);
}

/* -- Reference / subtotal row in a .sat-table (inflation-by-category.html) -- */
.sat-table tr.reference td { font-style: italic; }

/* -- Page subtitle (was referenced by two inflation pages with no rule anywhere) -- */
.page-subtitle {
    font-size: 0.95rem;
    color: var(--medium-gray);
    font-style: italic;
    margin: -0.4rem 0 1.4rem;
    line-height: 1.5;
}

/* ============================================================
   v13 (2026-07-29): PROPRIETARY-DATA NOTICE ON THE TITLE RULE.
   Replaces the full-width all-caps red box, which outshouted the
   page title. The notice now rides on the title rule: same line as
   the accent bar, lock glyph, red lead-in, sentence-case body. It
   wraps under the rule on narrow screens.
   ============================================================ */
.title-rule-row {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.5rem 0.85rem;
    margin: 0 0 1.4rem;
}
.title-rule-row .title-rule { margin: 0; flex: 0 0 auto; }

.prop-notice {
    display: inline-flex;
    align-items: flex-start;
    gap: 0.45rem;
    font-size: 0.85rem;
    line-height: 1.45;
    color: #3F4650;
}
.prop-notice::before {
    content: "";
    display: inline-block;
    width: 1px;
    height: 15px;
    margin-top: 2px;
    background: var(--hairline, #E6DFD3);
    margin-right: 0.25rem;
    flex: 0 0 auto;
}
.prop-notice svg {
    width: 13px;
    height: 13px;
    flex: 0 0 auto;
    margin-top: 3px;
    color: var(--cardinal-red);
}
.prop-notice strong { color: var(--cardinal-red); font-weight: 700; }

@media (max-width: 700px) {
    .prop-notice::before { display: none; }
    .prop-notice { width: 100%; }
}