/* ==========================================================================
   CRE42 - Consolidated Stylesheet (v3)
   Includes: v1/v2 legacy classes + v3 branded header/nav strip
   All pages should reference: <link rel="stylesheet" href="styles.css">
   ========================================================================== */

/* 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;
}

/* 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(--off-white);
    font-size: 19px;
}

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

.site-header {
    background-color: var(--cardinal-red);
}

.header-inner {
    max-width: 1400px;
    margin: 0 auto;
    padding: 0.85rem 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: 1.65rem;
    font-weight: 700;
    color: var(--white);
    text-decoration: none;
    line-height: 40px;
    white-space: nowrap;
}

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

.logo-subtitle {
    font-size: 0.88rem;
    color: rgba(255,255,255,0.7);
    font-weight: 600;
    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.25rem 0.6rem;
    font-size: 0.82rem;
    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: 170px;
}

.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: 0.82rem;
    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: 52px;
    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(--white);
    border-radius: 12px;
    padding: 2.5rem;
    margin: 2rem 0;
    box-shadow: 0 2px 8px rgba(0,0,0,0.08);
    border-left: 6px solid var(--cardinal-red);
}

.landing-title {
    font-size: 2.5rem;
    color: var(--cardinal-red);
    margin-bottom: 1rem;
    font-weight: 700;
}

.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(--white);
    border-radius: 12px;
    padding: 2rem;
    margin: 2rem 0;
    box-shadow: 0 2px 8px rgba(0,0,0,0.08);
}

.section-heading {
    font-size: 1.6rem;
    color: var(--cardinal-red);
    margin-bottom: 1.5rem;
    padding-bottom: 0.75rem;
    border-bottom: 2px solid var(--light-gray);
    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(--white);
    border-radius: 12px;
    padding: 2rem;
    margin: 2rem 0 3rem;
    box-shadow: 0 2px 8px rgba(0,0,0,0.08);
}

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

.source-item {
    padding: 1rem;
    background-color: var(--off-white);
    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(--white);
    border-radius: 12px;
    padding: 2rem;
    margin: 2rem 0;
    box-shadow: 0 2px 8px rgba(0,0,0,0.08);
}

.page-title {
    font-size: 2.2rem;
    color: var(--cardinal-red);
    margin-bottom: 1.5rem;
    border-bottom: 3px solid var(--cardinal-red);
    padding-bottom: 1rem;
}

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

.page-content h2 {
    color: var(--cardinal-red);
    font-size: 1.8rem;
    margin: 2rem 0 1rem;
}

.page-content h3 {
    color: var(--dark-gray);
    font-size: 1.4rem;
    margin: 1.5rem 0 1rem;
}

.page-content h4 {
    color: var(--cardinal-red);
    font-size: 1.2rem;
    margin: 1.2rem 0 0.8rem;
    text-decoration: underline;
    text-underline-offset: 4px;
}

/* 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%;
}

.graph-image {
    width: 100%;
    height: auto;
    border-radius: 8px;
    box-shadow: 0 4px 12px rgba(0,0,0,0.1);
}

.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: 2px solid var(--light-gray);
}

.data-sources h3 {
    color: var(--cardinal-red);
    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(--light-gray);
}

.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(--light-gray);
    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: var(--dark-gray);
    color: var(--light-gray);
    text-align: center;
    padding: 1.5rem;
    margin-top: 2rem;
}

/* ==========================================================================
   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) */
.tile-card:hover .tile-subnav {
    max-height: 400px;
    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: 400px;
    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;
}