/*
 * marronnage.css
 * Styles for the Marronnage Archive page (page-marronnage.php)
 * Inherits all Istwanou design tokens from theme.css
 */

/* ── GOOGLE FONTS (parchment set) ──────────────────────────── */
@import url('https://fonts.googleapis.com/css2?family=Spectral:ital,wght@0,300;0,400;0,700;1,300;1,400&family=Spectral+SC:wght@300;400&display=swap');

/* ── PAGE TOKENS ────────────────────────────────────────────── */
.marron-page {
    --mp-sand:  #ede8d5;
    --mp-sepia: #2c1f0e;
    --mp-rust:  #8c2b18;
    --mp-gold:  #b8872a;
    --mp-warm:  #f7f3e8;
    --mp-line:  #c8ba96;
    --mp-deep:  #1a1108;
    --mp-navy:  #0D1B2A;
    background: var(--mp-sand);
    color: var(--mp-sepia);
    font-family: 'Spectral', Georgia, serif;
}

/* ── MASTHEAD ────────────────────────────────────────────────── */
.marron-masthead {
    text-align: center;
    padding: 40px 48px 28px;
    border-bottom: 1px solid var(--mp-line);
    background: var(--mp-warm);
}
.marron-mast-ornament {
    display: flex;
    align-items: center;
    gap: 16px;
    justify-content: center;
    margin-bottom: 16px;
}
.mmo-line {
    flex: 1;
    height: 1px;
    background: var(--mp-gold);
    max-width: 120px;
}
.mmo-diamond {
    width: 8px;
    height: 8px;
    background: var(--mp-gold);
    transform: rotate(45deg);
}
.marron-mast-eyebrow {
    font-family: 'Spectral SC', serif;
    font-size: 9px;
    letter-spacing: .6em;
    color: var(--mp-gold);
    margin-bottom: 12px;
    display: block;
}
.marron-mast-title {
    font-family: var(--font-heading);
    font-size: clamp(30px, 6vw, 66px);
    font-weight: 600;
    color: var(--mp-sepia);
    line-height: 1;
    letter-spacing: .06em;
    margin-bottom: 6px;
}
.marron-mast-title-accent { color: var(--mp-rust); }
.marron-mast-rule-double {
    border-top: 3px solid var(--mp-sepia);
    border-bottom: 1px solid var(--mp-sepia);
    padding: 4px 0;
    margin: 14px 0;
}
.marron-mast-subtitle {
    font-family: 'Spectral', serif;
    font-style: italic;
    font-size: 15px;
    color: #777;
    letter-spacing: .12em;
}

/* ── STAT BAR ───────────────────────────────────────────────── */
.marron-stat-bar {
    display: flex;
    justify-content: center;
    gap: 0;
    background: var(--mp-sepia);
    padding: 16px 48px;
    flex-wrap: wrap;
}
.marron-stat {
    text-align: center;
    padding: 0 36px;
    border-right: 1px solid rgba(255,255,255,.15);
}
.marron-stat:last-child { border-right: none; }
.msn {
    font-family: var(--font-heading);
    font-size: clamp(18px, 3vw, 28px);
    font-weight: 600;
    color: #fff;
    line-height: 1;
}
.msl {
    font-family: 'Spectral SC', serif;
    font-size: 8px;
    letter-spacing: .4em;
    color: rgba(255,255,255,.4);
    margin-top: 4px;
}
.marron-stat--accent .msn { color: #e8a060; }

/* ── TWO-COLUMN LAYOUT ──────────────────────────────────────── */
.marron-layout {
    display: grid;
    grid-template-columns: 260px 1fr;
    align-items: start;
}

/* ── SIDEBAR ────────────────────────────────────────────────── */
.marron-sidebar {
    background: var(--mp-warm);
    border-right: 1px solid var(--mp-line);
    padding: 28px 24px;
}
.marron-sb-section { margin-bottom: 28px; }
.marron-sb-title {
    font-family: var(--font-heading);
    font-size: 10px;
    letter-spacing: .4em;
    text-transform: uppercase;
    color: var(--mp-sepia);
    margin-bottom: 14px;
    padding-bottom: 8px;
    border-bottom: 1px solid var(--mp-line);
    display: flex;
    align-items: center;
    gap: 8px;
}
.marron-sb-title::before {
    content: '';
    width: 6px;
    height: 6px;
    background: var(--mp-rust);
    display: inline-block;
    transform: rotate(45deg);
    flex-shrink: 0;
}
.marron-nation-entry {
    display: flex;
    align-items: center;
    padding: 7px 0;
    border-bottom: 1px solid rgba(0,0,0,.06);
    cursor: pointer;
    gap: 8px;
    transition: color .15s;
}
.marron-nation-entry:hover .mne-name,
.marron-nation-entry.active .mne-name { color: var(--mp-rust); }
.mne-name {
    font-family: 'Spectral', serif;
    font-size: 14px;
    color: var(--mp-sepia);
    flex: 1;
    transition: color .15s;
}
.mne-bar { width: 48px; height: 2px; background: var(--mp-line); flex-shrink: 0; }
.mne-fill { height: 2px; background: var(--mp-gold); }
.mne-count {
    font-family: 'Spectral SC', serif;
    font-size: 9px;
    letter-spacing: .1em;
    color: var(--mp-gold);
    width: 36px;
    text-align: right;
    flex-shrink: 0;
}
.marron-filter-pills {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
}
.mfp {
    font-family: 'Spectral SC', serif;
    font-size: 8px;
    letter-spacing: .2em;
    padding: 4px 10px;
    border: 1px solid var(--mp-line);
    background: transparent;
    cursor: pointer;
    color: #888;
    transition: all .12s;
}
.mfp:hover { border-color: var(--mp-sepia); color: var(--mp-sepia); }
.mfp.active { background: var(--mp-sepia); color: var(--mp-warm); border-color: var(--mp-sepia); }

/* ── MAIN COLUMN ────────────────────────────────────────────── */
.marron-main { padding: 0; }
.marron-records {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 16px;
    padding: 20px 20px 24px;
}
.marron-main-header {
    padding: 18px 36px;
    border-bottom: 1px solid var(--mp-line);
    background: var(--mp-warm);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    flex-wrap: wrap;
}
.marron-result-count {
    font-family: 'Spectral SC', serif;
    font-size: 9px;
    letter-spacing: .3em;
    color: var(--mp-gold);
    white-space: nowrap;
}
.marron-search {
    font-family: 'Spectral', serif;
    font-style: italic;
    font-size: 14px;
    border: 1px solid var(--mp-line);
    padding: 6px 12px;
    background: var(--mp-sand);
    color: var(--mp-sepia);
    width: 240px;
    outline: none;
    transition: border-color .15s;
}
.marron-search:focus { border-color: var(--mp-sepia); }

/* Advanced filters toggle */
.marron-adv-toggle {
    padding: 8px 36px;
    border-bottom: 1px solid var(--mp-line);
    background: var(--mp-warm);
}
.marron-adv-btn {
    font-family: 'Spectral SC', serif;
    font-size: 9px;
    letter-spacing: .3em;
    color: var(--mp-gold);
    background: transparent;
    border: none;
    cursor: pointer;
    padding: 0;
    transition: color .15s;
}
.marron-adv-btn:hover { color: var(--mp-rust); }
.marron-adv-panel {
    display: block;
    padding: 20px 36px;
    border-bottom: 1px solid var(--mp-line);
    background: var(--mp-warm);
}
.marron-adv-panel.closed { display: none; }
.marron-adv-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    gap: 20px;
}
.mag-label {
    font-family: 'Spectral SC', serif;
    font-size: 9px;
    letter-spacing: .4em;
    color: var(--mp-gold);
    margin-bottom: 10px;
    display: block;
    padding-bottom: 6px;
    border-bottom: 1px solid var(--mp-line);
}
.mag-chips { display: flex; flex-wrap: wrap; gap: 4px; }
.mac {
    font-family: 'Spectral SC', serif;
    font-size: 8px;
    letter-spacing: .15em;
    padding: 3px 8px;
    border: 1px solid var(--mp-line);
    background: transparent;
    cursor: pointer;
    color: #888;
    transition: all .1s;
}
.mac:hover { border-color: var(--mp-sepia); color: var(--mp-sepia); }
.mac.active { background: var(--mp-sepia); color: var(--mp-warm); border-color: var(--mp-sepia); }

/* Active filter tags */
.marron-active-tags {
    display: flex;
    gap: 6px;
    flex-wrap: wrap;
    padding: 8px 36px;
    background: var(--mp-sand);
    min-height: 36px;
    align-items: center;
}
.marron-active-tag {
    font-family: 'Spectral SC', serif;
    font-size: 8px;
    letter-spacing: .12em;
    padding: 3px 8px;
    background: var(--mp-sepia);
    color: var(--mp-warm);
    display: flex;
    align-items: center;
    gap: 4px;
    cursor: pointer;
}
.marron-active-tag:hover { background: var(--mp-rust); }

/* Records */
.marron-loading {
    padding: 48px 36px;
    text-align: center;
}
.ml-text {
    font-family: 'Spectral', serif;
    font-style: italic;
    font-size: 15px;
    color: #888;
}
.marron-record {
    padding: 22px 36px;
    margin: 10px 16px;
    background: var(--mp-warm);
    cursor: pointer;
    transition: background .15s, box-shadow .15s;
    box-shadow: 0 2px 8px rgba(44,31,14,.10), 0 1px 2px rgba(44,31,14,.06);
    border-left: 3px solid transparent;
}
.marron-record:nth-child(even) { background: var(--mp-sand); }
.marron-record:hover {
    background: #f0e8ca;
    box-shadow: 0 4px 16px rgba(44,31,14,.14), 0 2px 4px rgba(44,31,14,.08);
    border-left-color: var(--mp-gold);
}
.marron-record.open {
    background: #e8ddb8;
    box-shadow: 0 4px 20px rgba(44,31,14,.16), 0 2px 6px rgba(44,31,14,.10);
    border-left-color: var(--mp-rust);
}
.marron-rec-top {
    display: flex;
    align-items: baseline;
    gap: 12px;
    margin-bottom: 8px;
}
.marron-rec-date {
    font-family: 'Spectral SC', serif;
    font-size: 9px;
    letter-spacing: .3em;
    color: var(--mp-rust);
}
.marron-rec-id {
    font-family: 'Spectral SC', serif;
    font-size: 8px;
    letter-spacing: .2em;
    color: var(--mp-line);
}
.marron-rec-body {
    font-family: 'Spectral', serif;
    font-size: 14px;
    line-height: 1.75;
    color: var(--mp-sepia);
    overflow: hidden;
    display: -webkit-box;
    -webkit-line-clamp: 4;
    -webkit-box-orient: vertical;
    flex: 1;
    margin-bottom: 10px;
}
.marron-record.open .marron-rec-body { -webkit-line-clamp: unset; flex: unset; }
.marron-rec-tags {
    display: flex;
    gap: 6px;
    margin-top: 10px;
    flex-wrap: wrap;
}
.marron-rtag {
    font-family: 'Spectral SC', serif;
    font-size: 8px;
    letter-spacing: .18em;
    padding: 2px 8px;
    border: 1px solid var(--mp-line);
}
.marron-rtag-n { border-color: var(--mp-rust); color: var(--mp-rust); }
.marron-rtag-t { border-color: var(--mp-gold); color: var(--mp-gold); }
.marron-rec-expand {
    font-family: 'Spectral', serif;
    font-style: italic;
    font-size: 12px;
    color: var(--mp-rust);
    cursor: pointer;
    margin-top: 6px;
    display: inline-block;
    background: none;
    border: none;
    padding: 0;
}
.marron-rec-expand:hover { text-decoration: underline; }
.marron-rec-full {
    display: none;
    margin-top: 14px;
    padding-top: 14px;
    border-top: 1px dashed var(--mp-line);
}
.marron-record.open .marron-rec-full { display: block; }
.marron-lang-tabs {
    display: flex;
    gap: 0;
    margin-bottom: 10px;
    border-bottom: 1px solid var(--mp-line);
    overflow: hidden;
    width: 100%;
}
.marron-lt {
    font-family: 'Spectral SC', serif;
    font-size: 9px;
    letter-spacing: .15em;
    padding: 6px 14px;
    cursor: pointer;
    color: var(--mp-gold);
    border-bottom: 2px solid transparent;
    background: none;
    border-top: none;
    border-left: none;
    border-right: none;
    transition: all .15s;
    white-space: nowrap;
}
.marron-lt:hover { color: var(--mp-sepia); }
.marron-lt.active { color: var(--mp-rust); border-bottom-color: var(--mp-rust); }
.marron-rec-text {
    font-family: 'Spectral', serif;
    font-style: italic;
    font-size: 15px;
    line-height: 1.8;
    color: var(--mp-sepia);
}
.marron-load-more-row {
    padding: 16px 20px;
    background: var(--mp-warm);
    border-top: 1px solid var(--mp-line);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}
.marron-load-more-btn {
    font-family: var(--font-heading);
    font-size: 9px;
    letter-spacing: .4em;
    background: transparent;
    border: 1px solid var(--mp-sepia);
    color: var(--mp-sepia);
    padding: 9px 24px;
    cursor: pointer;
    transition: all .15s;
}
.marron-load-more-btn:hover { background: var(--mp-sepia); color: var(--mp-warm); }
.marron-page-btn {
    font-family: 'Spectral SC', serif;
    font-size: 9px;
    letter-spacing: .3em;
    background: transparent;
    border: 1px solid var(--mp-line);
    color: var(--mp-sepia);
    padding: 8px 18px;
    cursor: pointer;
    transition: all .15s;
    white-space: nowrap;
}
.marron-page-btn:hover:not([disabled]) {
    border-color: var(--mp-sepia);
    background: var(--mp-sepia);
    color: var(--mp-warm);
}
.marron-page-btn[disabled] {
    opacity: .3;
    cursor: default;
}
.marron-page-info {
    font-family: 'Spectral SC', serif;
    font-size: 9px;
    letter-spacing: .25em;
    color: var(--mp-gold);
    text-align: center;
    flex: 1;
}

/* ── DID YOU KNOW ────────────────────────────────────────────── */
.marron-dyk-section {
    background: var(--mp-navy);
    border-top: 4px solid var(--mp-gold);
    padding: 44px 48px;
}
.marron-dyk-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    margin-bottom: 32px;
    flex-wrap: wrap;
    gap: 16px;
}
.marron-dyk-eyebrow {
    font-family: 'Spectral SC', serif;
    font-size: 9px;
    letter-spacing: .5em;
    color: var(--mp-gold);
    display: block;
    margin-bottom: 6px;
}
.marron-dyk-title {
    font-family: var(--font-heading);
    font-size: 22px;
    font-weight: 600;
    color: #fff;
    letter-spacing: .05em;
    margin: 0;
}
.marron-dyk-subtitle {
    font-family: 'Spectral', serif;
    font-style: italic;
    font-size: 14px;
    color: rgba(255,255,255,.45);
    margin-top: 4px;
    display: block;
}
.marron-dyk-cta {
    font-family: 'Spectral SC', serif;
    font-size: 9px;
    letter-spacing: .4em;
    color: var(--mp-gold);
    border: 1px solid var(--mp-gold);
    padding: 10px 22px;
    cursor: pointer;
    background: transparent;
    transition: all .15s;
    white-space: nowrap;
    flex-shrink: 0;
}
.marron-dyk-cta:hover { background: var(--mp-gold); color: var(--mp-navy); }

/* Carousel */
.marron-carousel-track {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1px;
    background: rgba(255,255,255,.08);
}
.marron-dyk-card {
    background: rgba(255,255,255,.04);
    border-top: 2px solid var(--mp-gold);
    padding: 28px 26px;
    min-height: 170px;
    transition: background .2s;
}
.marron-dyk-card:hover { background: rgba(255,255,255,.08); }
.marron-dc-category {
    font-family: 'Spectral SC', serif;
    font-size: 8px;
    letter-spacing: .45em;
    color: var(--mp-gold);
    margin-bottom: 12px;
    display: block;
    opacity: .7;
}
.marron-dc-stat {
    font-family: var(--font-heading);
    font-size: clamp(22px, 3.5vw, 38px);
    font-weight: 600;
    color: #fff;
    line-height: 1;
    margin-bottom: 10px;
}
.marron-dc-stat.red   { color: #e87a7a; }
.marron-dc-stat.gold  { color: var(--mp-gold); }
.marron-dc-fact {
    font-family: 'Spectral', serif;
    font-size: 14px;
    line-height: 1.75;
    color: rgba(255,255,255,.65);
}
.marron-dc-fact em { font-style: italic; color: rgba(255,255,255,.85); }

.marron-carousel-controls {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-top: 18px;
}
.mcc-progress {
    font-family: 'Spectral SC', serif;
    font-size: 9px;
    letter-spacing: .3em;
    color: rgba(255,255,255,.3);
}
.mcc-dots { display: flex; gap: 6px; }
.mcc-dot {
    width: 6px; height: 6px;
    border-radius: 50%;
    background: rgba(255,255,255,.2);
    cursor: pointer;
    transition: background .15s;
}
.mcc-dot.active { background: var(--mp-gold); }
.mcc-arrows { display: flex; gap: 8px; }
.mcc-arrow {
    width: 32px; height: 32px;
    background: transparent;
    border: 1px solid rgba(255,255,255,.2);
    color: rgba(255,255,255,.6);
    cursor: pointer;
    font-size: 14px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all .15s;
}
.mcc-arrow:hover { border-color: var(--mp-gold); color: var(--mp-gold); }

/* ── FULL STATS PANEL ────────────────────────────────────────── */
.marron-stats-panel { display: none; }
.marron-stats-panel.open { display: block; }
.marron-stats-panel-header {
    background: var(--mp-sepia);
    padding: 18px 40px;
    display: flex;
    align-items: center;
    justify-content: space-between;
}
.msph-title {
    font-family: var(--font-heading);
    font-size: 14px;
    font-weight: 600;
    color: #fff;
    letter-spacing: .06em;
}
.msph-close {
    font-family: 'Spectral SC', serif;
    font-size: 9px;
    letter-spacing: .3em;
    color: rgba(255,255,255,.6);
    cursor: pointer;
    border: 1px solid rgba(255,255,255,.2);
    padding: 6px 14px;
    background: transparent;
    transition: all .15s;
}
.msph-close:hover { background: rgba(255,255,255,.1); }
.marron-stats-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    gap: 1px;
    background: var(--mp-line);
}
.marron-so-stat {
    background: var(--mp-warm);
    padding: 18px 20px;
}
.marron-so-cat {
    font-family: 'Spectral SC', serif;
    font-size: 8px;
    letter-spacing: .35em;
    color: var(--mp-gold);
    margin-bottom: 6px;
    display: block;
}
.marron-so-num {
    font-family: var(--font-heading);
    font-size: 22px;
    font-weight: 600;
    color: var(--mp-rust);
    line-height: 1;
    margin-bottom: 4px;
}
.marron-so-label {
    font-family: 'Spectral', serif;
    font-size: 13px;
    line-height: 1.55;
    color: var(--mp-sepia);
}

/* ── RESPONSIVE ─────────────────────────────────────────────── */
@media (max-width: 960px) and (min-width: 769px) {
    .marron-records { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .marron-record.open { grid-column: 1 / -1; }
}

@media (max-width: 768px) {
    .marron-layout { grid-template-columns: 1fr; }
    .marron-sidebar { border-right: none; border-bottom: 1px solid var(--mp-line); }
    .marron-records { grid-template-columns: 1fr; }
    .marron-record.open { grid-column: 1; }
    .marron-carousel-track { grid-template-columns: 1fr; }
    .marron-stat-bar { padding: 12px 16px; }
    .marron-stat { padding: 0 16px; }
    .marron-masthead { padding: 28px 20px 20px; }
    .marron-dyk-section { padding: 32px 20px; }
    .marron-stats-grid { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); }
}

/* ── ABOUT SECTION ───────────────────────────────────────────── */
.marron-about {
    background: var(--mp-warm);
    border-top: 4px solid var(--mp-rust);
    border-bottom: 1px solid var(--mp-line);
    padding: 52px 64px;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
}
.marron-about > * {
    width: 100%;
    max-width: 760px;
}
.marron-about-eyebrow {
    font-family: 'Spectral SC', serif;
    font-size: 9px;
    letter-spacing: .55em;
    color: var(--mp-gold);
    display: block;
    margin-bottom: 24px;
}
.marron-about-lede {
    font-family: var(--font-heading);
    font-size: clamp(22px, 3vw, 30px);
    font-weight: 600;
    color: var(--mp-rust);
    line-height: 1.25;
    margin-bottom: 36px;
    max-width: 720px;
}
.marron-about-always { width: 100%; }
.marron-reveal-block { width: 100%; }
.marron-about-p {
    font-family: 'Spectral', serif;
    font-size: 17px;
    line-height: 1.9;
    color: #3a2810;
    margin-bottom: 18px;
    text-align: left;
}
.marron-about-p:last-child { margin-bottom: 0; }
.marron-about-p em { font-style: italic; }
.marron-about-drop::first-letter {
    font-family: var(--font-heading);
    font-size: 60px;
    font-weight: 600;
    float: left;
    line-height: .82;
    margin: 6px 10px 0 0;
    color: var(--mp-rust);
}
.marron-about-pull {
    border-left: 3px solid var(--mp-rust);
    padding: 2px 0 2px 22px;
    margin: 4px 0 18px;
    text-align: left;
}
.marron-about-pull p {
    font-family: 'Spectral', serif;
    font-style: italic;
    font-size: 18px;
    line-height: 1.75;
    color: var(--mp-rust);
}
.marron-about-divider {
    display: flex;
    align-items: center;
    gap: 14px;
    margin: 28px 0;
}
.mad-line { flex: 1; height: 1px; background: var(--mp-line); }
.mad-diamond {
    width: 6px; height: 6px;
    background: var(--mp-gold);
    transform: rotate(45deg);
    flex-shrink: 0;
}

/* Reveal buttons */
.marron-reveal-btn {
    display: flex;
    align-items: center;
    gap: 14px;
    cursor: pointer;
    margin-top: 28px;
    border: none;
    background: none;
    padding: 0;
    max-width: 740px;
    width: 100%;
}
.mrb-line {
    flex: 1;
    height: 1px;
    background: var(--mp-line);
    transition: background .2s;
}
.marron-reveal-btn:hover .mrb-line { background: var(--mp-rust); }
.mrb-label {
    font-family: 'Spectral SC', serif;
    font-size: 9px;
    letter-spacing: .45em;
    color: var(--mp-gold);
    white-space: nowrap;
    transition: color .2s;
}
.marron-reveal-btn:hover .mrb-label { color: var(--mp-rust); }
.mrb-arrow {
    width: 20px; height: 20px;
    border: 1px solid var(--mp-line);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    color: var(--mp-gold);
    font-size: 11px;
    transition: all .2s;
}
.marron-reveal-btn:hover .mrb-arrow { border-color: var(--mp-rust); color: var(--mp-rust); }
.marron-reveal-btn.open .mrb-arrow { transform: rotate(180deg); }

/* Reveal blocks */
.marron-reveal-block {
    max-width: 740px;
    overflow: hidden;
    max-height: 0;
    opacity: 0;
    transition: max-height .6s cubic-bezier(.4,0,.2,1), opacity .45s ease;
}
.marron-reveal-block.open {
    max-height: 2400px;
    opacity: 1;
}

/* Signature */
.marron-about-sig {
    font-family: 'Spectral SC', serif;
    font-size: 9px;
    letter-spacing: .4em;
    color: var(--mp-gold);
    margin-top: 28px;
    display: none;
    max-width: 740px;
}
.marron-about-sig.visible { display: block; }

@media (max-width: 768px) {
    .marron-about { padding: 36px 24px; }
}