/*
Theme Name: EIDOS Foundation
Theme URI: https://eidos.test
Author: baobab.work
Description: Custom theme for the EIDOS Foundation website. Loads only its own assets and integrates with WordPress minimally for content management.
Version: 0.0.7
Requires at least: 6.0
Requires PHP: 7.4
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: eidos
*/

@font-face {
    font-family: 'Mark Pro';
    src: url('fonts/MarkPro.woff2') format('woff2');
    font-weight: 400;
    font-style: normal;
}

@font-face {
    font-family: 'Mark Pro';
    src: url('fonts/MarkPro-Medium.woff2') format('woff2');
    font-weight: 500;
    font-style: normal;
}

/* ── Figma design tokens ("20 245", "30", "k", "w", "245 20", ".25", "high_4") ── */
:root {
    --c-bg: #141414;
    --c-surface: #1e1e1e;
    --c-black: #000000;
    --c-white: #ffffff;
    --c-light: #f5f5f5;
    --c-divider: #404042;
    --c-accent: #9bebff;

    --color-page: var(--c-bg);
    --color-pill: var(--c-black);
    --color-menu-bg: var(--c-black);
    --color-chip: var(--c-surface);
    --color-chip-hover: #2a2a2a;
    --color-text: var(--c-white);
    --color-sep: var(--c-divider);
    --color-overlay: rgba(0, 0, 0, 0.9);
    --color-gallery-bg: rgba(0, 0, 0, 0.7);
    --color-track: rgba(255, 255, 255, 0.2);
    --color-tile: var(--c-bg);
    --color-copyright: var(--c-light);
    --color-knob: #bfbfbf;
}

body.light {
    --color-page: var(--c-light);
    --color-pill: var(--c-white);
    --color-menu-bg: var(--c-white);
    --color-chip: var(--c-light);
    --color-chip-hover: #e8e8e8;
    --color-text: var(--c-black);
    --color-sep: rgba(0, 0, 0, 0.15);
    --color-overlay: rgba(0, 0, 0, 0.64);
    --color-gallery-bg: rgba(0, 0, 0, 0.1);
    --color-track: rgba(0, 0, 0, 0.1);
    --color-tile: #c4c4c4;
    --color-copyright: var(--c-surface);
}

*,
*::before,
*::after {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

html,
body {
    width: 100%;
    height: 100%;
    background: var(--color-page);
    overflow: hidden;
    font-family: 'Mark Pro', 'Helvetica Neue', Arial, sans-serif;
}

/* ──────────────────────────────────────────
    PARALLAX IMAGE GRID
────────────────────────────────────────── */
.grid-bg {
    position: fixed;
    inset: 0;
    overflow: hidden;
}

.grid-track {
    display: flex;
    gap: 160px;
    /* 480px pitch – 320px col = 160px gap */
    width: max-content;
    padding: 20px 0;
    will-change: transform;
}

.col {
    display: flex;
    flex-direction: column;
    gap: 122px;
    width: 320px;
    flex-shrink: 0;
}

.col.offset-a {
    margin-top: 20px;
}

.col.offset-b {
    margin-top: 122px;
}

.col.offset-c {
    margin-top: 450px;
}

.tile {
    width: 320px;
    flex-shrink: 0;
    border-radius: 8px;
    overflow: hidden;
    background: var(--color-tile);
}

.tile img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: filter 0.4s ease;
}

.tile {
    cursor: pointer;
}

.tile:hover img {
    filter: brightness(1.2);
}

.tile.tall {
    height: 410px;
}

.tile.short {
    height: 205px;
}

/* Mobile: photo grid per Figma (Meniu_mobil) — desktop grid scaled to ~0.278
    (89px columns). Every dimension scales by the same factor, so the parallax
    loop math (derived from the rendered column width in script.js) stays in sync. */
@media (max-width: 768px) {
    .grid-track {
        gap: 44.5px;
    }

    .col {
        width: 89px;
        gap: 34px;
    }

    .col.offset-a {
        margin-top: 5.6px;
    }

    .col.offset-b {
        margin-top: 34px;
    }

    .col.offset-c {
        margin-top: 125px;
    }

    .tile {
        width: 89px;
    }

    .tile.tall {
        height: 114px;
    }

    .tile.short {
        height: 57px;
    }
}

/* ──────────────────────────────────────────
    DARK OVERLAY
────────────────────────────────────────── */
.overlay {
    position: fixed;
    inset: 0;
    background: var(--color-overlay);
    pointer-events: none;
    z-index: 5;
    /* transition added via JS after logo reveal to avoid flash on load */
}

/* ──────────────────────────────────────────
    CENTERED LOGO
────────────────────────────────────────── */
.title-wrap {
    position: fixed;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    pointer-events: none;
    padding: 0 20px;
    z-index: 10;
}

.title-logo {
    width: calc(100vw - 40px);
    height: auto;
    opacity: 0;
    transform: translateY(50px);
    animation: logo-reveal 1.6s cubic-bezier(0.16, 1, 0.3, 1) 0.4s forwards;
}

@keyframes logo-reveal {
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* ──────────────────────────────────────────
    NAVIGATION
────────────────────────────────────────── */
#nav {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    height: 90px;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 50;
    padding: 20px;
    pointer-events: none;
}

.nav-logo-mark {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 30px;
    height: 30px;
    pointer-events: all;
}

.nav-bar {
    width: min(614px, calc(100vw - 40px));
    height: 50px;
    background: var(--color-pill);
    border-radius: 8px;
    padding: 10px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    pointer-events: all;
}

.menu-btn {
    background: var(--color-chip);
    border-radius: 2px;
    padding: 0 5.725px 0 10px;
    height: 30px;
    display: flex;
    align-items: center;
    font-size: 14.25px;
    font-weight: 500;
    letter-spacing: 4.275px;
    color: var(--color-text);
    border: none;
    cursor: pointer;
    font-family: inherit;
    transition: background 0.2s;
}

.menu-btn:hover {
    background: var(--color-chip-hover);
}

.nav-icon {
    background: var(--color-chip);
    border-radius: 2px;
    width: 30px;
    height: 30px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    color: var(--color-text);
}

.nav-icon svg {
    display: block;
}

/* The outlined half fills in on hover, completing the circle */
.nav-icon svg path:last-child {
    fill: transparent;
    transition: fill 0.3s ease;
}

.nav-icon:hover svg path:last-child {
    fill: currentColor;
}

/* ──────────────────────────────────────────
    COPYRIGHT
────────────────────────────────────────── */
.copyright {
    /* Figma: cap-trimmed text at y1050–1060, i.e. caps 20px from bottom.
        With 19px line-height the glyphs sit ~5px above the box bottom. */
    position: fixed;
    bottom: 15px;
    left: 20px;
    color: var(--color-copyright);
    font-size: 14.25px;
    font-weight: 400;
    letter-spacing: 4.275px;
    text-transform: uppercase;
    opacity: 0;
    transition: opacity 0.9s ease;
    z-index: 10;
    pointer-events: none;
}

/* ──────────────────────────────────────────
    MENU OVERLAY — rounded panel inset 20px
────────────────────────────────────────── */
/* Invisible backdrop: catches taps in the gap around the panel */
#menu-backdrop {
    position: fixed;
    inset: 0;
    z-index: 199;
    display: none;
}

#menu-backdrop.open {
    display: block;
}

#menu-overlay {
    position: fixed;
    inset: 20px;
    background: var(--color-menu-bg);
    border-radius: 8px;
    z-index: 200;
    display: flex;
    flex-direction: column;
    padding: 20px;
    overflow: hidden;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.5s cubic-bezier(0.16, 1, 0.3, 1);
}

#menu-overlay.open {
    opacity: 1;
    pointer-events: all;
}

.menu-header {
    flex-shrink: 0;
    height: 30px;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

/* Menu body — bottom-anchored content, columns scale with the viewport
    (910 : 600 : 290 of the 1840px design grid) */
.menu-body {
    margin-top: auto;
    height: 680px;
    max-height: calc(100% - 50px);
    border-top: 0.5px solid var(--color-sep);
    display: flex;
    gap: 20px;
    overflow: hidden;
}

/* Left region: big nav rows + contact/follow */
.menu-left {
    flex: 910 1 0;
    min-width: 0;
    display: flex;
    flex-direction: column;
}

.menu-nav-row {
    height: 100px;
    display: flex;
    align-items: center;
    border-bottom: 0.5px solid var(--color-sep);
    font-size: clamp(40px, 3.96vw, 76px);
    font-weight: 400;
    color: var(--color-text);
    text-decoration: none;
    opacity: 0;
    transform: translateY(30px);
    transition: opacity 0.7s ease, transform 0.7s cubic-bezier(0.16, 1, 0.3, 1);
}

.menu-nav-row:nth-child(1) {
    transition-delay: 0.1s;
}

.menu-nav-row:nth-child(2) {
    transition-delay: 0.16s;
}

.menu-nav-row:nth-child(3) {
    transition-delay: 0.22s;
}

#menu-overlay.open .menu-nav-row {
    opacity: 1;
    transform: translateY(0);
}

/* Per-letter roll-up reveal (Eidos→Home, Foundation→About),
    per Figma Text_anim_W components: letters cascade left to right */
.roll {
    display: inline-grid;
    overflow: hidden;
    line-height: 1.1;
}

.roll .word {
    grid-area: 1 / 1;
    white-space: pre;
}

.roll .word span {
    display: inline-block;
    transition: transform 0.45s cubic-bezier(0.16, 1, 0.3, 1);
    transition-delay: calc(var(--i) * 35ms);
}

.roll .word.alt span {
    transform: translateY(115%);
}

.menu-nav-row:hover .roll .word.base span {
    transform: translateY(-115%);
}

.menu-nav-row:hover .roll .word.alt span {
    transform: translateY(0);
}

/* Mobile: hover isn't available, so after the menu opens the labels flip to
    their alt word (Home, About) on a timer — see openMenu() in script.js. */
.roll.show-alt .word.base span {
    transform: translateY(-115%);
}

.roll.show-alt .word.alt span {
    transform: translateY(0);
}

.menu-spacer {
    flex: 1;
}

.menu-contact-follow {
    display: flex;
    gap: 20px;
    opacity: 0;
    transform: translateY(20px);
    transition: opacity 0.7s ease 0.25s, transform 0.7s cubic-bezier(0.16, 1, 0.3, 1) 0.25s;
}

#menu-overlay.open .menu-contact-follow {
    opacity: 1;
    transform: translateY(0);
}

.menu-contact {
    flex: 600 1 0;
    min-width: 0;
}

.menu-follow {
    flex: 290 1 0;
    min-width: 0;
}

.contact-heading,
.follow-heading {
    font-size: 14.25px;
    font-weight: 500;
    letter-spacing: 4.275px;
    line-height: 30px;
    color: var(--color-text);
}

.contact-divider,
.follow-divider {
    height: 0.5px;
    background: var(--color-sep);
}

.contact-item,
.follow-link {
    font-size: 14.25px;
    font-weight: 400;
    letter-spacing: 4.275px;
    color: var(--color-text);
    text-decoration: none;
    display: flex;
    align-items: center;
    height: 30px;
    border-bottom: 0.5px solid var(--color-sep);
}

.contact-item:hover,
.follow-link:hover {
    opacity: 0.6;
}

/* Big EIDOS TALKS card (EP.1) */
.menu-talks-main {
    flex: 600 1 0;
    min-width: 0;
    display: flex;
    flex-direction: column;
    padding-top: 20px;
    opacity: 0;
    transform: translateY(30px);
    transition: opacity 0.7s ease 0.2s, transform 0.7s cubic-bezier(0.16, 1, 0.3, 1) 0.2s;
}

#menu-overlay.open .menu-talks-main {
    opacity: 1;
    transform: translateY(0);
}

.talks-card-big {
    flex: 1;
    display: block;
    background: var(--c-accent);
    border-radius: 8px;
    position: relative;
    overflow: hidden;
    text-decoration: none;
}

.card-tags {
    position: absolute;
    top: 10px;
    left: 10px;
    display: flex;
    gap: 10px;
}

.card-tag {
    background: var(--c-surface);
    padding: 0 5.725px 0 10px;
    height: 30px;
    display: inline-flex;
    align-items: center;
    border-radius: 4px;
    font-size: 14.25px;
    font-weight: 500;
    letter-spacing: 4.275px;
    color: var(--c-white);
    white-space: nowrap;
}

.card-tag.left {
    position: absolute;
    top: 10px;
    left: 10px;
}

.card-tag.right {
    position: absolute;
    top: 10px;
    right: 10px;
}

/* Narrow panels: keep tags inside the shrinking cards */
@media (max-width: 1680px) {
    .card-tag {
        font-size: 12px;
        letter-spacing: 3.6px;
    }

    .menu-ep-stack .ep-card .card-tag.left:has(+ .card-tag.right) {
        display: none;
    }
}

/* Right column: EP.2 card + VIEW EIDOS TALKS card */
.menu-ep-stack {
    flex: 290 1 0;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 20px;
    padding-top: 20px;
    opacity: 0;
    transform: translateY(30px);
    transition: opacity 0.7s ease 0.3s, transform 0.7s cubic-bezier(0.16, 1, 0.3, 1) 0.3s;
}

#menu-overlay.open .menu-ep-stack {
    opacity: 1;
    transform: translateY(0);
}

.ep-card {
    flex: 1;
    display: block;
    background: var(--c-accent);
    border-radius: 8px;
    position: relative;
    overflow: hidden;
    text-decoration: none;
}

/* ── Mobile menu: stacked sections, vertical scroll (Figma Meniu_mobil) ──
    Panel inset 20px + padding 10px so the CLOSE chip and theme toggle sit
    exactly where the MENU chip and toggle are when the menu is closed
    (nav: 20px edge + 10px bar padding = 30px). */
@media (max-width: 768px) {
    #menu-overlay {
        inset: 20px;
        padding: 10px;
    }

    .menu-header {
        height: 30px;
    }

    .menu-body {
        margin-top: 80px;
        flex: 1;
        height: auto;
        max-height: none;
        flex-direction: column;
        gap: 0;
        overflow-y: auto;
        overflow-x: hidden;
        scrollbar-width: none;
    }

    .menu-body::-webkit-scrollbar {
        display: none;
    }

    /* Flatten the left column so contact/follow can reorder after the cards */
    .menu-left {
        display: contents;
    }

    .menu-nav-row {
        height: 40px;
        font-size: 28px;
    }

    .menu-spacer {
        display: none;
    }

    /* Per Figma: cards 330×150, 10px apart, 40px below the nav rows */
    .menu-talks-main {
        flex: none;
        width: 100%;
        padding-top: 40px;
    }

    .menu-ep-stack {
        flex: none;
        width: 100%;
        padding-top: 10px;
        gap: 10px;
    }

    .talks-card-big,
    .ep-card {
        flex: none;
        aspect-ratio: 330 / 150;
    }

    /* Tags sit side by side top-left on every card */
    .ep-card {
        display: flex;
        align-items: flex-start;
        gap: 10px;
        padding: 10px;
    }

    .ep-card .card-tag.left,
    .ep-card .card-tag.right {
        position: static;
    }

    .menu-ep-stack .ep-card .card-tag.left:has(+ .card-tag.right) {
        display: inline-flex;
    }

    .card-tag {
        font-size: 14.25px;
        letter-spacing: 4.275px;
    }

    /* View-all card becomes a full-width dark bar (Figma VIEW PROJECT) */
    .menu-ep-stack .ep-card:last-child {
        aspect-ratio: auto;
        height: 30px;
        padding: 0;
        align-items: center;
        justify-content: center;
        background: var(--c-surface);
        border-radius: 4px;
    }

    .menu-ep-stack .ep-card:last-child .card-tag {
        background: none;
        padding: 0;
    }

    /* Contact + follow move below the cards */
    .menu-contact-follow {
        order: 2;
        flex-direction: column;
        gap: 40px;
        margin-top: 40px;
        padding-bottom: 10px;
    }

    .menu-contact,
    .menu-follow {
        flex: none;
        width: 100%;
    }
}

/* ──────────────────────────────────────────
    GALLERY CAROUSEL
────────────────────────────────────────── */
#gallery {
    position: fixed;
    inset: 0;
    background: var(--color-gallery-bg);
    backdrop-filter: blur(5px);
    -webkit-backdrop-filter: blur(5px);
    z-index: 30;
    /* below nav (50) so MENU stays clickable */
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.3s ease;
    /* Reserve horizontal drags for the swipe handler (no browser back-swipe);
       vertical panning still passes through. */
    touch-action: pan-y;
}

#gallery.open {
    opacity: 1;
    pointer-events: all;
}

/* Spread image wrapper — maintains 1226:786 aspect, clamps to viewport */
#gallery-spread-wrap {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    height: min(786px, 72.8vh);
    /* 786 / 1080 */
    aspect-ratio: 1226 / 786;
    max-width: min(90vw, calc(100vw - 140px));
    /* keep clear of the arrows */
    border-radius: 8px;
    overflow: hidden;
}

#gallery-spread {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    pointer-events: none;
}

/* Prev / Next arrows */
.gallery-arrow {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    background: var(--c-surface);
    border: none;
    border-radius: 4px;
    padding: 0;
    height: 30px;
    display: flex;
    align-items: center;
    font-size: 14.25px;
    font-weight: 500;
    color: var(--c-white);
    cursor: pointer;
    font-family: inherit;
    transition: background 0.2s, opacity 0.2s;
}

.gallery-arrow:hover {
    background: #2a2a2a;
}

#gallery-prev {
    left: 20px;
}

#gallery-prev svg {
    transform: rotate(180deg);
}

#gallery-next {
    right: 20px;
}

/* ── Mobile: wide container with 20px side margins, image contained (not
   cropped), arrows hidden — navigation is by swipe (script.js) + dots. */
@media (max-width: 768px) {
    #gallery-spread-wrap {
        width: calc(100vw - 40px);
        height: calc(100vh - 160px);
        max-width: none;
        aspect-ratio: auto;
    }

    #gallery-spread {
        object-fit: contain;
    }

    /* Arrows move to the bottom corners, aligned with the dots row */
    .gallery-arrow {
        top: auto;
        bottom: 20px;
        transform: none;
    }
}

/* Caption — Figma: y953 of 1080 = 88.24%, white in both themes */
#gallery-caption {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    bottom: 65px;
    text-align: center;
    color: var(--c-white);
    font-size: 0;
    font-weight: 500;
    letter-spacing: 4.275px;
    line-height: 0;
    white-space: nowrap;
    pointer-events: none;
}

#gallery-caption p {
    font-size: 14.25px;
    line-height: 19px;
}

/* Progress indicator — positioned at bottom center */
#gallery-progress {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    bottom: 20px;
}

/* ── Light theme — per Figma ph_c_1 overrides in Homepage_02_w ── */
body.light .gallery-arrow {
    background: var(--c-light);
    color: var(--c-black);
}

body.light .gallery-arrow:hover {
    background: var(--c-white);
}

body.light #gallery-caption {
    mix-blend-mode: difference;
}

body.light .nav-logo-mark img {
    filter: invert(1);
}

/* Hero wordmark starts white through the intro reveal (legible over the dark
   overlay) and flips to black once it settles over the now-light page
   background. JS adds .settled in sync with the Phase 3 overlay fade. */
body.light .title-logo {
    filter: invert(0);
}

body.light .title-logo.settled {
    filter: invert(1);
}
/* ═══════════════════════════════════════════════
    SUBPAGES (projects + all future inner pages)
    Everything below is scoped — the homepage is
    untouched by these rules.
═══════════════════════════════════════════════ */

/* ── Extra tokens for inner pages ── */
:root {
    --c-grey: #808083;
    --color-card-media: var(--c-surface);
    --color-filter-chip: var(--c-surface);
    --color-filter-chip-hover: #2a2a2a;
    /* a_tab hover (Variant2): white on dark theme, black on light */
    --color-tab-hover-bg: var(--c-white);
    --color-tab-hover-text: var(--c-black);
    /* ABOUT / ETYMOLOGY tag pills */
    --color-tag-pill: var(--c-divider);
    /* slider controls (arrows + dots) */
    --color-ctrl-bg: var(--c-surface);
    --color-ctrl-fg: var(--c-light);
    --color-ctrl-dot: #bfbfbf;
    --color-ctrl-active-pill: var(--c-bg);
    /* body copy on inner pages (Figma 245/20) */
    --color-body: var(--c-light);
    /* manifesto section */
    --color-manifesto-bg: var(--c-black);
    --color-manifesto-text: var(--c-white);
    /* episode chips */
    --color-episode-season: var(--c-divider);
    --color-episode-num: var(--c-white);
}

body.light {
    --color-card-media: #bfbfbf;
    --color-filter-chip: #bfbfbf;
    --color-filter-chip-hover: #b0b0b0;
    --color-tab-hover-bg: var(--c-white);
    --color-tab-hover-text: var(--c-black);
    --color-tag-pill: #bfbfbf;
    --color-ctrl-bg: #bfbfbf;
    --color-ctrl-fg: var(--c-bg);
    --color-ctrl-dot: var(--c-bg);
    --color-ctrl-active-pill: #ABABAB;
    --color-body: var(--c-bg);
    --color-manifesto-bg: var(--c-grey);
    --color-manifesto-text: var(--c-white);
    --color-episode-season: #bfbfbf;
    --color-episode-num: var(--c-white);
}

/* Subpages scroll normally (homepage locks overflow) */
html:has(body.subpage) {
    height: auto;
    overflow: visible;
    overflow-x: clip;
}

body.subpage {
    height: auto;
    min-height: 100vh;
    overflow: visible;
    overflow-x: clip;
}

.nav-logo-mark a {
    display: block;
    width: 30px;
    height: 30px;
}

main.page {
    padding: 0 20px 20px;
}

/* ──────────────────────────────────────────
    PAGE HEAD — title + divider + filters
────────────────────────────────────────── */
.page-head {
    padding-top: 215px;
}

.page-title {
    font-size: clamp(44px, 4.45vw, 85.5px);
    font-weight: 500;
    line-height: 1.3;
    letter-spacing: -0.06em;
    color: var(--color-text);
}

.page-divider {
    height: 0.5px;
    background: var(--color-sep);
}

.filters {
    padding-top: 20px;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.filter {
    display: flex;
    align-items: flex-start;
    gap: 10px;
}

.filter-btn {
    background: var(--color-filter-chip);
    border: none;
    border-radius: 2px;
    height: 30px;
    padding: 0 5.725px 0 10px;
    display: flex;
    align-items: center;
    font-family: inherit;
    font-size: 14.25px;
    font-weight: 500;
    letter-spacing: 4.275px;
    color: var(--color-text);
    cursor: pointer;
    flex-shrink: 0;
    transition: background 0.2s;
}

/* Main trigger hover per Figma a_tab Variant2: full inversion */
.filter-btn:hover,
.filter.open .filter-btn {
    background: var(--color-tab-hover-bg);
    color: var(--color-tab-hover-text);
}

/* Options reveal inline, sliding down into a clipped row
    (per Figma anim frames: chips offset upward + opacity 0) */
.filter-options {
    display: flex;
    gap: 10px;
    height: 30px;
    overflow: hidden;
}

.filter-option {
    background: var(--color-filter-chip);
    border: none;
    border-radius: 2px;
    height: 30px;
    padding: 0 5.725px 0 10px;
    display: flex;
    align-items: center;
    gap: 10px;
    font-family: inherit;
    font-size: 14.25px;
    font-weight: 500;
    letter-spacing: 4.275px;
    color: var(--color-text);
    cursor: pointer;
    white-space: nowrap;
    opacity: 0;
    transform: translateY(-30px);
    pointer-events: none;
    transition: opacity 0.3s ease, transform 0.45s cubic-bezier(0.16, 1, 0.3, 1), background 0.2s;
}

.filter-option:hover,
.filter-option.active {
    background: var(--color-tab-hover-bg);
    color: var(--color-tab-hover-text);
}

.filter.open .filter-option {
    opacity: 1;
    transform: translateY(0);
    pointer-events: auto;
}

.filter.open .filter-option:nth-child(2)  { transition-delay: 0.04s; }
.filter.open .filter-option:nth-child(3)  { transition-delay: 0.08s; }
.filter.open .filter-option:nth-child(4)  { transition-delay: 0.12s; }
.filter.open .filter-option:nth-child(5)  { transition-delay: 0.16s; }
.filter.open .filter-option:nth-child(6)  { transition-delay: 0.2s; }
.filter.open .filter-option:nth-child(7)  { transition-delay: 0.24s; }
.filter.open .filter-option:nth-child(8)  { transition-delay: 0.28s; }
.filter.open .filter-option:nth-child(9)  { transition-delay: 0.32s; }
.filter.open .filter-option:nth-child(10) { transition-delay: 0.36s; }

.filter-option .dot {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    border: 1px solid currentColor;
    flex-shrink: 0;
}

.filter-option.active .dot {
    background: currentColor;
}

/* ──────────────────────────────────────────
    PROJECTS GRID
    Identical markup for every card; the large
    card is driven purely from CSS below.
────────────────────────────────────────── */
.projects-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    column-gap: 20px;
    row-gap: 80px;
    align-items: start;
    margin-top: 67px;
}

/* Hover per Figma (Frame 117 / Variant2): the whole card lifts 10px
    and the tag chips invert — no image zoom or brightness change */
.project-card {
    display: block;
    text-decoration: none;
    color: var(--color-text);
    transition: transform 0.45s cubic-bezier(0.16, 1, 0.3, 1);
}

.project-card:hover {
    transform: translateY(-10px);
}

.project-card.hidden {
    display: none;
}

/* The featured card (Unfinished Residency) spans two columns */
.projects-grid > .project-card:nth-child(5) {
    grid-column: span 2;
}

.card-media {
    position: relative;
    aspect-ratio: 613 / 600;
    border-radius: 8px;
    overflow: hidden;
    background: var(--color-card-media);
}

.projects-grid > .project-card:nth-child(5) .card-media {
    aspect-ratio: 1247 / 910;
}

.card-media img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.card-chips {
    position: absolute;
    top: 10px;
    left: 10px;
    right: 10px;
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

.card-chip {
    background: var(--c-white);
    color: var(--c-black);
    height: 30px;
    padding: 0 5.725px 0 10px;
    display: inline-flex;
    align-items: center;
    border-radius: 4px;
    font-size: 14.25px;
    font-weight: 500;
    letter-spacing: 4.275px;
    white-space: nowrap;
    transition: background 0.3s ease, color 0.3s ease;
    text-transform: uppercase;
}

.project-card:hover .card-chip {
    background: var(--c-black);
    color: var(--c-light);
}

.card-text {
    margin-top: 20px;
    max-width: 613px;
}

.card-title {
    font-size: clamp(15px, 1.094vw, 21px);
    font-weight: 400;
    line-height: 1.334;
    letter-spacing: 0.3em;
    text-transform: uppercase;
}

/* Per Figma render: description is sentence case with normal tracking —
    only the title carries the 30% letter-spacing */
.card-desc {
    margin-top: 20px;
    font-size: clamp(15px, 1.094vw, 21px);
    font-weight: 400;
    line-height: 1.334;
    letter-spacing: normal;
    color: var(--c-grey);
}

.grid-empty {
    margin-top: 67px;
    font-size: 14.25px;
    font-weight: 500;
    letter-spacing: 4.275px;
    color: var(--c-grey);
}

/* ──────────────────────────────────────────
    BACK TO TOP
────────────────────────────────────────── */
.back-top-wrap {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
    margin-top: 140px;
}

.back-top-wrap .back-top {
    grid-column: 2;
    width: fit-content;
    justify-self: center;
}

.back-top {
    background: var(--color-filter-chip);
    border: none;
    border-radius: 4px;
    height: 30px;
    padding: 0 5.725px 0 10px;
    display: flex;
    align-items: center;
    font-family: inherit;
    font-size: 14.25px;
    font-weight: 400;
    letter-spacing: 4.275px;
    color: var(--color-text);
    cursor: pointer;
    transition: background 0.2s;
}

.back-top:hover {
    background: var(--color-tab-hover-bg);
    color: var(--color-tab-hover-text);
}

/* ──────────────────────────────────────────
    FOOTER — wordmark + copyright columns
────────────────────────────────────────── */
.site-footer {
    margin-top: 140px;
    padding-bottom: 15px;
}

.footer-logo {
    display: block;
    width: 100%;
    height: auto;
}

body.light .footer-logo {
    filter: invert(1);
}

.footer-cols {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
    margin-top: 20px;
}

.footer-col {
    border-top: 0.5px solid var(--color-sep);
    padding-top: 15px;
    display: flex;
    gap: 20px;
    font-size: 14.25px;
    font-weight: 400;
    letter-spacing: 4.275px;
    line-height: 19px;
    color: var(--color-copyright);
}

.footer-col > * {
    flex: 1;
    min-width: 0;
    white-space: nowrap;
}

.footer-col a {
    color: inherit;
    text-decoration: none;
}

.footer-col a:hover {
    opacity: 0.6;
}

.footer-col p {
    text-transform: uppercase;
}

.footer-credit {
    text-transform: uppercase;
}

/* ──────────────────────────────────────────
    RESPONSIVE — no responsive design exists,
    so elements stack progressively.
────────────────────────────────────────── */
@media (max-width: 1280px) {
    .projects-grid {
        grid-template-columns: repeat(2, 1fr);
        row-gap: 60px;
    }
}

/* Filters: options open below each button */
@media (max-width: 900px) {
    .back-top-wrap {
        grid-template-columns: 1fr;
    }

    .back-top-wrap .back-top {
        grid-column: 1;
        justify-self: center;
    }

    .filter {
        flex-direction: column;
        align-items: flex-start;
    }

    .filter-options {
        display: none;
        flex-wrap: wrap;
        height: auto;
        overflow: visible;
    }

    .filter.open .filter-options {
        display: flex;
    }

    .filter-option {
        opacity: 1;
        transform: none;
        pointer-events: auto;
        transition: background 0.2s;
    }
}

@media (max-width: 768px) {
    .page-head {
        padding-top: 140px;
    }

    .project-intro.page-head {
        padding-top: 140px;
    }

    .page-title {
        font-size: clamp(38px, 11vw, 52px);
    }

    .projects-grid {
        grid-template-columns: 1fr;
        row-gap: 20px;
        margin-top: 20px;
    }

    .projects-grid > .project-card:nth-child(5) {
        grid-column: auto;
    }

    .projects-grid > .project-card:nth-child(5) .card-media {
        aspect-ratio: 613 / 600;
    }

    .card-title,
    .card-desc {
        font-size: 16px;
    }

    .card-desc {
        margin-top: 16px;
    }

    .back-top-wrap {
        margin-top: 80px;
    }

    .site-footer {
        margin-top: 80px;
        border-bottom: 0.5px solid var(--color-sep);
        padding-bottom: 10px;
    }

    .footer-cols {
        grid-template-columns: 1fr;
        gap: 10px;
    }

    /* Footer text — Figma mobile spec */
    .footer-col {
        display: block;
        padding-top: 10px;
        font-size: 10px;
        font-style: normal;
        font-weight: 500;
        line-height: 7px;
        letter-spacing: 3px;
    }

    .footer-col p {
        display: inline-block;
    }
}

/* ═══════════════════════════════════════════════
    ABOUT PAGE
═══════════════════════════════════════════════ */

/* ── Tag pill (ABOUT / ETYMOLOGY) — decorative hover ── */
.tag-pill {
    display: inline-flex;
    align-items: center;
    height: 30px;
    padding: 0 5.725px 0 10px;
    background: var(--color-tag-pill);
    border-radius: 2px;
    font-size: 14.25px;
    font-weight: 500;
    letter-spacing: 4.275px;
    text-transform: uppercase;
    color: var(--color-text);
    white-space: nowrap;
    transition: background 0.2s, color 0.2s;
}

.tag-pill:hover {
    background: var(--color-tab-hover-bg);
    color: var(--color-tab-hover-text);
}

/* ── Intro ── */
.about-head {
    padding-top: 255px;
}

.about-head .page-divider {
    margin-top: 20px;
}

.about-intro {
    padding-top: 4px;
    font-size: clamp(40px, 4.45vw, 85.5px);
    font-weight: 500;
    line-height: 1.0526;
    letter-spacing: -0.06em;
    color: var(--color-text);
}

/* ──────────────────────────────────────────
    LOOPING SLIDERS (story carousel + gallery)
────────────────────────────────────────── */
.loop-slider {
    margin-top: 140px;
    /* Horizontal swipe handled by JS; keep vertical page scroll working. */
    touch-action: pan-y;
}

/* Full-bleed clip so the half-visible next slide runs to the
    viewport edge while slides stay on the 20px content grid */
.slider-viewport {
    overflow: hidden;
    margin: 0 -20px;
    padding: 0 20px;
}

.slider-track {
    display: flex;
    gap: 20px;
    will-change: transform;
}

.slider-controls {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-top: 20px;
}

.slider-arrow {
    width: 30px;
    height: 30px;
    flex-shrink: 0;
    border: none;
    border-radius: 4px;
    padding: 0;
    background: var(--color-ctrl-bg);
    color: var(--color-ctrl-fg);
    cursor: pointer;
    transition: background 0.2s, color 0.2s;
}

.slider-arrow svg {
    display: block;
    width: 100%;
    height: 100%;
}

.slider-prev svg {
    transform: rotate(180deg);
}

.slider-arrow:hover {
    background: var(--color-tab-hover-bg);
    color: var(--color-tab-hover-text);
}

/* Dots: 8px circles; the active one grows into a 24px pill in the
    page colour with the dot sitting at its left (Figma 4|7 component) */
.slider-dots {
    height: 30px;
    padding: 0 10px;
    background: var(--color-ctrl-bg);
    border-radius: 4px;
    display: flex;
    align-items: center;
    gap: 8px;
}

.slider-dot {
    position: relative;
    width: 8px;
    height: 8px;
    padding: 0;
    border: none;
    border-radius: 4px;
    background: var(--color-ctrl-dot);
    cursor: pointer;
    flex-shrink: 0;
    transition: width 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}

.slider-dot.active {
    width: 24px;
    background: var(--color-ctrl-active-pill);
    cursor: default;
}

.slider-dot.active::before {
    content: '';
    position: absolute;
    left: 0;
    top: 0;
    width: 8px;
    height: 8px;
    border-radius: 4px;
    background: var(--color-ctrl-dot);
}

.slider-dot.timer-active::before {
    animation: dot-timer var(--autoplay-ms, 5000ms) linear forwards;
}

.slider-dots.timer-paused .slider-dot.timer-active::before {
    animation-play-state: paused;
}

@keyframes dot-timer {
    from { width: 8px; }
    to   { width: 100%; }
}

/* ── Story carousel slides: 1247/1880 of the grid = 2 cols + gutter,
      so exactly 1.5 slides are visible at any time ── */
.about-slide {
    flex-shrink: 0;
    width: calc((100% - 40px) / 3 * 2 + 20px);
    background: var(--c-black);
    border-radius: 8px;
    padding: 20px;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px;
}

body.light .about-slide {
    background: var(--c-white);
}

.slide-text {
    background: var(--color-page);
    border-radius: 8px;
    padding: 20px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    gap: 28px;
    min-width: 0;
}

/* Slides with the label on top reverse the column order */
.about-slide.label-top .slide-text {
    flex-direction: column-reverse;
}

.slide-body p {
    font-size: clamp(15px, 1.094vw, 21px);
    line-height: 1.334;
    color: var(--color-body);
}

.slide-body p + p {
    margin-top: 1.334em;
}

.slide-label {
    font-size: clamp(15px, 1.094vw, 21px);
    line-height: 1.334;
    letter-spacing: 0.3em;
    text-transform: uppercase;
    color: var(--c-grey);
}

.slide-media {
    border-radius: 8px;
    overflow: hidden;
    aspect-ratio: 593 / 580;
    min-width: 0;
    background: var(--color-card-media);
}

.slide-media img,
.slide-media video {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* ──────────────────────────────────────────
    ETYMOLOGY
────────────────────────────────────────── */
.etymology {
    margin-top: 140px;
}

.etym-grid {
    display: grid;
    grid-template-columns: calc((100% - 40px) / 3) 1fr;
    gap: 20px;
    padding-top: 20px;
}

.etym-big {
    font-size: clamp(40px, 4.45vw, 85.5px);
    font-weight: 500;
    line-height: 1.0526;
    letter-spacing: -0.06em;
    color: var(--color-text);
}

.etym-big .etym-grey {
    color: var(--c-grey);
}

.etym-big em {
    font-style: italic;
}

.etym-small {
    margin-top: 45px;
}

.etym-small p {
    font-size: clamp(15px, 1.094vw, 21px);
    line-height: 1.334;
    color: var(--color-body);
}

.etym-small p + p {
    margin-top: 1.334em;
}

/* ──────────────────────────────────────────
    GALLERY — full-width slides
────────────────────────────────────────── */
.gallery-slide {
    flex-shrink: 0;
    width: 100%;
    border-radius: 8px;
    overflow: hidden;
    aspect-ratio: 1880 / 910;
    background: var(--color-card-media);
}

.gallery-slide img,
.gallery-slide video {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* ──────────────────────────────────────────
    TEAM
────────────────────────────────────────── */
.team {
    margin-top: 140px;
}

.team-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    column-gap: 20px;
    row-gap: 100px;
    align-items: start;
    margin-top: 20px;
}

.team-card .card-media {
    aspect-ratio: 613 / 600;
}

.team-pill {
    position: absolute;
    top: 10px;
    left: 10px;
    display: inline-flex;
    align-items: center;
    height: 30px;
    padding: 0 5.725px 0 10px;
    background: var(--c-black);
    border-radius: 2px;
    font-size: 14.25px;
    font-weight: 500;
    letter-spacing: 4.275px;
    color: var(--c-white);
    white-space: nowrap;
}

.team-card .card-title {
    color: var(--color-body);
}

.card-subtitle {
    font-size: clamp(15px, 1.094vw, 21px);
    line-height: 1.334;
    color: var(--c-grey);
}

/* ──────────────────────────────────────────
    ABOUT — responsive stacking
────────────────────────────────────────── */
@media (max-width: 1280px) {
    .team-grid {
        grid-template-columns: repeat(2, 1fr);
        row-gap: 60px;
    }
}

@media (max-width: 900px) {
    /* Slide columns stack: text above media; show a peek of the next slide */
    .about-slide {
        width: calc(100% - 60px);
        grid-template-columns: 1fr;
    }

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

@media (max-width: 768px) {
    .about-head {
        padding-top: 140px;
    }

    .about-intro,
    .etym-big {
        font-size: clamp(30px, 8.5vw, 44px);
    }

    .about-intro {
        padding-top: 12px;
    }

    .loop-slider,
    .etymology,
    .team {
        margin-top: 80px;
    }

    .etym-small {
        margin-top: 28px;
    }

    .etym-small p,
    .card-subtitle {
        font-size: 16px;
    }

    /* Carousel label matches the paragraph type exactly (Figma) */
    .slide-body p,
    .slide-label {
        font-size: 14.25px;
        font-style: normal;
        font-weight: 500;
        line-height: 19px;
        letter-spacing: 0;
        color: var(--c-black);
    }

    .gallery-slide {
        aspect-ratio: 4 / 3;
    }

    /* About story carousel — per Figma (Frame 193): full-width slides at 20px
       screen margins, 10px padding, square image below the text, title on top
       with the slack sitting between title and paragraph, all slides equal
       height (the flex track stretches them; .slide-text grows to fill). */
    .about-slide {
        width: 100%;
        display: flex;
        flex-direction: column;
        padding: 10px;
        gap: 10px;
    }

    .slide-text {
        flex: 1;
        padding: 10px;
        flex-direction: column-reverse; /* label on top, body below */
    }

    .slide-media {
        flex-shrink: 0;
        aspect-ratio: 1 / 1;
    }

    .team-grid {
        grid-template-columns: 1fr;
        row-gap: 40px;
    }
}

/* ═══════════════════════════════════════════════
    PROJECT SIMPLE PAGE
═══════════════════════════════════════════════ */

/* ── Hero image/video ── */
.project-hero {
    margin: 0 -20px;
}

.project-hero-media {
    position: relative;
    width: 100%;
    aspect-ratio: 16 / 9;
    overflow: hidden;
    background: var(--color-card-media);
}

.project-hero-media img,
.project-hero-media video {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.project-hero-media iframe {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    border: none;
    pointer-events: none;
}

/* ── Project intro: tags + 3-column detail ── */
.project-intro {
    margin-top: 20px;
}

.project-intro.page-head {
    margin-top: 0;
    padding-top: 215px;
}

.project-tags {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
}

.project-tags .card-chip {
    background: var(--color-tag-pill);
    color: var(--color-text);
}

.project-intro .page-divider {
    margin-top: 20px;
}

.project-intro-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
    margin-top: 20px;
}

.project-title {
    font-size: clamp(40px, 4.45vw, 85.5px);
    font-weight: 500;
    line-height: 1.0526;
    letter-spacing: -0.06em;
    color: var(--color-text);
    transform: translateY(-16px);
}

/* Text pages (Terms / Privacy): constrain the title so it wraps to two lines
    (e.g. "Terms &" / "Conditions"). Tune the max-width if wording changes. */
.page-head .project-title {
    max-width: 8ch;
}

.project-intro-grid p {
    font-size: clamp(15px, 1.094vw, 21px);
    line-height: 1.334;
    color: var(--color-body);
}

.project-intro-grid p + p {
    margin-top: 1.334em;
}

/* ── Text section: 2-column grid (1/3 + 2/3) ── */
.project-text {
    margin-top: 140px;
}

.project-text-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
}

.project-text-grid > div:nth-child(1) { grid-column: 2 / span 1; }
.project-text-grid > div:nth-child(2) { grid-column: 3 / span 1; }
.project-text-grid a { color: inherit; }

.project-text-grid p {
    font-size: clamp(15px, 1.094vw, 21px);
    line-height: 1.334;
    color: var(--color-body);
}

.project-text-grid p + p {
    margin-top: 1.334em;
}

/* ── Related projects ── */
.related {
    margin-top: 140px;
}

.related-title {
    font-size: 21px;
    font-weight: 400;
    line-height: 28px;
    color: var(--color-body);
}

.related-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
    align-items: start;
    margin-top: 16px;
}

.related-card {
    display: flex;
    flex-direction: column;
    gap: 20px;
    text-decoration: none;
    color: var(--color-text);
    transition: transform 0.45s cubic-bezier(0.16, 1, 0.3, 1);
    padding-top: 16px;
    border-top: 0.5px solid var(--color-sep);
}

.related-card:hover {
    transform: translateY(-10px);
}

.related-card-title {
    font-size: 21px;
    font-weight: 400;
    line-height: 28px;
    letter-spacing: 0.3em;
    text-transform: uppercase;
    color: var(--color-body);
}

.related-card-divider {
    height: 0.5px;
    background: var(--color-sep);
}

.related-card .card-media {
    aspect-ratio: 613 / 300;
}

/* ── PROJECT SIMPLE — responsive ── */
@media (max-width: 1280px) {
    .related-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 900px) {
    .project-intro-grid {
        grid-template-columns: 1fr;
        gap: 20px 0;
    }

    .project-intro-grid > :first-child {
        grid-column: 1 / -1;
    }

    .project-text-grid {
        grid-template-columns: 1fr;
        gap: 20px 0;
    }

    .project-text-grid > div:nth-child(1),
    .project-text-grid > div:nth-child(2) {
        grid-column: auto;
    }

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

@media (max-width: 768px) {
    .project-hero-media {
        aspect-ratio: 4 / 3;
    }

    .project-text,
    .related,
    .talks-manifesto,
    .talks-episodes {
        margin-top: 80px;
    }

    .project-title {
        font-size: clamp(30px, 8.5vw, 44px);
        transform: translateY(-8px);
    }

    .project-intro-grid p,
    .project-text-grid p {
        font-size: 16px;
    }

    .related-card {
        padding-top: 8px;
        gap: 10px;
    }

    .related-grid {
        margin-top: 8px;
        grid-template-columns: 1fr;
    }
}

/* ═══════════════════════════════════════════════
    PROJECT TALKS PAGE
═══════════════════════════════════════════════ */

/* ── Manifesto ── */
.talks-manifesto {
    margin-top: 140px;
}

.manifesto-grid {
    display: grid;
    grid-template-columns: 1fr 1.035fr 1fr;
    gap: 20px;
    background: var(--color-manifesto-bg);
    border-radius: 6px;
    padding: 20px;
    color: var(--color-manifesto-text);
}

.manifesto-head {
    font-size: 21px;
    font-weight: 500;
    line-height: 28px;
    letter-spacing: 0.3em;
}

.manifesto-head p {
    margin: 0;
    line-height: 28px;
}

.manifesto-body {
    font-size: 21px;
    font-weight: 400;
    line-height: 28px;
}

.manifesto-body p {
    margin: 0;
    line-height: 28px;
}

.manifesto-body p + p {
    margin-top: 0;
}

/* ── Episodes ── */
.talks-episodes {
    margin-top: 140px;
}

.episodes-title {
    font-size: clamp(40px, 4.45vw, 85.5px);
    font-weight: 500;
    line-height: 1.0526;
    letter-spacing: -0.06em;
    color: var(--color-text);
}

.talks-episodes > .page-divider {
    margin-top: 20px;
}

.episode-list {
    margin-top: 0;
}

.episode-item {
    /* wrapper for row + content + divider */
    /* When scrolled into view on open, clear the fixed 90px menu + 20px gap */
    scroll-margin-top: 110px;
}

.episode-row {
    display: flex;
    align-items: flex-start;
    gap: 20px;
    min-height: 50px;
    padding: 15px 0;
    cursor: pointer;
    transition: background 0.2s;
    border: none;
    background: none;
    width: 100%;
    text-align: left;
    font-family: inherit;
    color: inherit;
}

.episode-row:hover {
}

.episode-row:focus-visible {
    outline: 1px solid var(--color-text);
    outline-offset: -1px;
}

.episode-chips {
    display: flex;
    gap: 10px;
    flex-shrink: 0;
    width: calc((100% - 40px) / 3);
    min-width: 0;
}

.episode-chip {
    display: inline-flex;
    align-items: center;
    height: 30px;
    padding: 0 5.725px 0 10px;
    border-radius: 4px;
    font-size: 14.25px;
    font-weight: 500;
    letter-spacing: 4.275px;
    white-space: nowrap;
    flex-shrink: 0;
}

.episode-chip.season {
    background: var(--color-episode-season);
    color: var(--color-text);
}

.episode-chip.num {
    background: var(--color-episode-num);
    color: var(--c-black);
}

.episode-info {
    flex: 1;
    min-width: 0;
}

.episode-name {
    font-size: 21px;
    font-weight: 500;
    line-height: 28px;
    letter-spacing: 0.3em;
    color: var(--color-text);
}

.episode-moderator {
    margin-top: 28px;
    font-size: 21px;
    font-weight: 400;
    line-height: 28px;
    color: var(--c-grey);
}

/* Toggle button */
.episode-toggle {
    flex-shrink: 0;
    width: 30px;
    height: 30px;
    border: none;
    border-radius: 4px;
    background: var(--color-episode-season);
    color: var(--color-text);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background 0.2s;
    position: relative;
}

.episode-toggle:hover {
    background: var(--color-tab-hover-bg);
    color: var(--color-tab-hover-text);
}

.toggle-plus,
.toggle-minus {
    position: absolute;
    inset: 10px;
    display: block;
}

/* Default: plus visible, minus hidden */
.toggle-plus { display: block; }
.toggle-minus { display: none; }

/* Open state: minus visible, plus hidden */
.episode-item.open .toggle-plus { display: none; }
.episode-item.open .toggle-minus { display: block; }

/* Collapsible content */
.episode-content {
    display: none;
    padding-bottom: 40px;
}

.episode-item.open .episode-content {
    display: block;
}

/* Invitați — only visible when open, sits in col 2 position */
.episode-invitati {
    font-size: 21px;
    font-weight: 400;
    line-height: 28px;
    color: var(--c-grey);
    margin-bottom: 41px;
    margin-left: calc((100% - 40px) / 3 + 20px);
    max-width: 614px;
}

.episode-invitati p {
    margin: 0;
    line-height: 28px;
}

/* Video embed */
.episode-video {
    width: 100%;
    aspect-ratio: 1880 / 910;
    border-radius: 8px;
    overflow: hidden;
    background: var(--color-card-media);
    margin-bottom: 40px;
}

.episode-video iframe {
    display: block;
    width: 100%;
    height: 100%;
    border: none;
}

/* 3-column text body */
.episode-body {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap: 20px;
}

.episode-body-col {
    font-size: 21px;
    line-height: 28px;
    color: var(--color-body);
}

.episode-body-col:first-child {
    font-weight: 500;
    letter-spacing: 0.3em;
    color: var(--color-text);
}

.episode-body-col p {
    margin: 0;
    line-height: 28px;
}

.episode-body-col p + p {
    margin-top: 0;
}

/* ── PROJECT TALKS — responsive ── */
@media (max-width: 900px) {
    .manifesto-grid {
        grid-template-columns: 1fr;
        gap: 28px;
    }

    .episode-row {
        flex-wrap: wrap;
        gap: 8px 10px;
        padding: 10px 0;
    }

    .episode-chips {
        width: auto;
    }

    .episode-info {
        flex-basis: calc(100% - 50px);
    }

    .episode-toggle {
        order: 2;
    }

    .episode-body {
        grid-template-columns: 1fr;
        gap: 28px;
    }

    .episode-invitati {
        margin-left: 0;
        max-width: none;
    }
}

@media (max-width: 768px) {
    .talks-manifesto,
    .talks-episodes {
        margin-top: 80px;
    }

    .manifesto-head,
    .manifesto-body {
        font-size: 16px;
    }

    .episode-name,
    .episode-moderator,
    .episode-body-col,
    .episode-invitati {
        font-size: 16px;
    }

    .episode-moderator,
    .episode-body-col,
    .episode-invitati {
        font-size: 14.25px;
        font-style: normal;
        font-weight: 500;
        line-height: 19px;
        color: var(--color-text);
    }

    /* Collapsed header shows only the chips + toggle (toggle stays right);
       the name/moderator drop to their own line only once the episode opens. */
    .episode-toggle {
        order: 1;
        margin-left: auto;
    }

    .episode-info {
        order: 2;
        flex-basis: 100%;
        display: none;
    }

    .episode-item.open .episode-info {
        display: block;
    }
}