/* ── Design Tokens ── */
    :root {
        --ef-black: #050505;
        --ef-charcoal: #111111;
        --ef-teal: #1a3a4a;
        --ef-amber: #d4a373;
        --ef-gold: #c9a84c;
        --ef-red: #c0392b;
        --ef-red-glow: #e74c3c;
        --ef-warm-white: #f0e6d3;
        --ef-muted: #928b80;
        --ef-serif: 'Playfair Display', 'Georgia', serif;
        --ef-sans: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
    }

    /* ── Dark Mode Overrides ── */
    body {
        background-color: var(--ef-black) !important;
        overflow-x: hidden;
    }

    .footer {
        background: rgba(10,10,10,0.9) !important;
        backdrop-filter: blur(10px) !important;
    }
    .footer .badge.bg-dark {
        background-color: var(--ef-charcoal) !important;
    }
    .footer .badge.bg-light {
        background-color: rgba(255,255,255,0.08) !important;
    }
    .footer .badge.bg-light a {
        color: var(--ef-warm-white) !important;
    }
    .footer .text-wrap.badge.bg-dark {
        color: var(--ef-muted) !important;
    }

    /* ── Static film texture ── */
    .ef-grain {
        position: fixed;
        inset: 0;
        pointer-events: none;
        z-index: 9;
        opacity: 0.016;
        background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.75' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
        background-size: 256px 256px;
    }

    /* ── Compact editorial hero ── */
    .ef-hero {
        position: relative;
        min-height: clamp(480px, 62svh, 680px);
        display: flex;
        align-items: center;
        background:
            radial-gradient(ellipse 55% 85% at 82% 45%, rgba(201,168,76,0.09), transparent 70%),
            radial-gradient(ellipse 45% 80% at 12% 90%, rgba(26,58,74,0.2), transparent 72%),
            linear-gradient(135deg, #070707 0%, #0d0c0a 62%, #050505 100%);
        border-bottom: 1px solid rgba(201,168,76,0.12);
        overflow: hidden;
    }
    .ef-hero::before {
        content: '';
        position: absolute;
        inset: 0;
        pointer-events: none;
        background: repeating-linear-gradient(90deg, transparent 0 9.95%, rgba(240,230,211,0.025) 10%, transparent 10.05%);
    }
    .ef-hero::after {
        content: 'FRAME 01 / SELECTED WORK';
        position: absolute;
        top: 36px;
        right: 3vw;
        color: rgba(240,230,211,0.22);
        font: 600 0.55rem/1 'Courier New', monospace;
        letter-spacing: 0.14em;
    }
    .ef-hero-inner {
        position: relative;
        width: min(1400px, 100%);
        margin: 0 auto;
        padding: 74px clamp(24px, 5vw, 72px) 64px;
    }
    .ef-hero-label {
        display: flex;
        align-items: center;
        gap: 14px;
        margin-bottom: 26px;
        color: var(--ef-gold);
        font: 600 0.64rem/1.4 var(--ef-sans);
        letter-spacing: 0.22em;
        text-transform: uppercase;
    }
    .ef-hero-mark {
        width: 46px;
        height: 46px;
        display: grid;
        place-items: center;
        border-radius: 7px;
        background: var(--ef-warm-white);
        box-shadow: 0 10px 32px rgba(0,0,0,0.25);
    }
    .ef-hero-mark img { display: block; width: 42px; height: 42px; }
    .ef-hero-title {
        margin: 0 0 22px;
        color: #fff7e8;
        font-family: var(--ef-serif);
        font-size: clamp(4.2rem, 12vw, 10rem);
        font-weight: 500;
        letter-spacing: -0.065em;
        line-height: 0.8;
    }
    .ef-hero-title em { color: var(--ef-gold); font-style: italic; }
    .ef-hero-subtitle {
        max-width: 670px;
        margin: 0;
        color: rgba(240,230,211,0.7);
        font: 300 clamp(0.95rem, 1.5vw, 1.16rem)/1.7 var(--ef-sans);
    }
    .ef-hero-meta {
        display: flex;
        flex-wrap: wrap;
        gap: 10px 26px;
        margin-top: 26px;
        color: rgba(240,230,211,0.45);
        font: 600 0.58rem/1.4 'Courier New', monospace;
        letter-spacing: 0.12em;
        text-transform: uppercase;
    }
    .ef-hero-meta span:first-child { color: var(--ef-gold); }
    .ef-hero-scroll {
        display: inline-flex;
        align-items: center;
        gap: 12px;
        margin-top: 34px;
        color: var(--ef-warm-white);
        font: 600 0.64rem/1 var(--ef-sans);
        letter-spacing: 0.16em;
        text-transform: uppercase;
        text-decoration: none;
    }
    .ef-scroll-line {
        width: 44px;
        height: 1px;
        background: linear-gradient(90deg, var(--ef-gold), transparent);
        transition: width 0.25s ease;
    }
    .ef-hero-scroll:hover, .ef-hero-scroll:focus-visible { color: var(--ef-gold); }
    .ef-hero-scroll:hover .ef-scroll-line, .ef-hero-scroll:focus-visible .ef-scroll-line { width: 64px; }

    /* ── Section Label ── */
    .ef-section-label {
        display: flex;
        align-items: center;
        gap: 1.25rem;
        font-family: var(--ef-sans);
        font-size: 0.7rem;
        font-weight: 500;
        letter-spacing: 0.2em;
        text-transform: uppercase;
        color: var(--ef-gold);
        margin-bottom: 2.5rem;
        padding-left: 0.25rem;
    }
    .ef-section-label::after {
        content: '';
        flex: 1;
        height: 1px;
        background: linear-gradient(90deg, var(--ef-gold), transparent 60%);
        max-width: 120px;
    }

    /* ── Back Link ── */
    .ef-back-link {
        display: inline-flex;
        align-items: center;
        gap: 0.5rem;
        font-family: var(--ef-sans);
        font-size: 0.75rem;
        font-weight: 400;
        letter-spacing: 0.1em;
        text-transform: uppercase;
        color: var(--ef-muted);
        text-decoration: none;
        transition: color 0.3s ease;
        margin-bottom: 2rem;
    }
    .ef-back-link:hover,
    .ef-back-link:focus-visible {
        color: var(--ef-warm-white);
    }
    .ef-back-link:focus-visible {
        outline: 2px solid var(--ef-gold);
        outline-offset: 4px;
        border-radius: 2px;
    }
    .ef-back-link i {
        font-size: 0.65rem;
        transition: transform 0.3s ease;
    }
    .ef-back-link:hover i {
        transform: translateX(-3px);
    }

    /* ── Category Grid ── */
    .ef-grid {
        max-width: 1400px;
        margin: 0 auto;
        padding: 72px 1.5rem 5rem;
        content-visibility: auto;
        contain-intrinsic-size: auto 1800px;
    }

    .ef-grid-row {
        display: grid;
        gap: 1rem;
        margin-bottom: 1rem;
    }
    .ef-grid-row--2 {
        grid-template-columns: 1fr 1fr;
    }
    .ef-grid-row--1 {
        grid-template-columns: 1fr;
    }
    .ef-grid-row--2 .ef-card { aspect-ratio: 16 / 10; }
    .ef-grid-row--1 .ef-card { aspect-ratio: 21 / 9; }

    @media (max-width: 767.98px) {
        .ef-grid-row--2 {
            grid-template-columns: 1fr;
        }
    }

    /* ── Category Card ── */
    .ef-card {
        position: relative;
        overflow: hidden;
        border: 1px solid rgba(240,230,211,0.08);
        border-radius: 10px;
        background:
            radial-gradient(circle at 80% 20%, rgba(201,168,76,0.12), transparent 32%),
            linear-gradient(135deg, #181612, #090909 70%);
        box-shadow: 0 16px 44px rgba(0,0,0,0.18);
        isolation: isolate;
    }

    .ef-card video {
        position: absolute;
        inset: 0;
        width: 100%;
        height: 100%;
        object-fit: cover;
        opacity: 0;
        transform: scale(1.015);
        transition: opacity 0.3s ease, transform 0.42s cubic-bezier(0.25,0.46,0.45,0.94);
    }
    .ef-card.is-ready video { opacity: 1; }

    .ef-card-overlay {
        position: absolute;
        inset: 0;
        background: linear-gradient(
            to top,
            rgba(5,5,5,0.92) 0%,
            rgba(5,5,5,0.55) 40%,
            rgba(5,5,5,0.35) 100%
        );
        transition: opacity 0.3s ease;
        z-index: 2;
    }

    .ef-card-content {
        position: absolute;
        inset: 0;
        display: flex;
        flex-direction: column;
        justify-content: flex-end;
        padding: clamp(1.4rem, 3vw, 2.4rem);
        z-index: 3;
    }

    .ef-card-index {
        font-family: var(--ef-sans);
        font-size: 0.65rem;
        font-weight: 500;
        letter-spacing: 0.2em;
        text-transform: uppercase;
        color: var(--ef-gold);
        margin-bottom: 0.6rem;
        opacity: 0.8;
        transition: opacity 0.25s ease;
    }

    .ef-card-title {
        font-family: var(--ef-serif);
        font-size: clamp(1.4rem, 2.5vw, 2.2rem);
        font-weight: 500;
        color: var(--ef-warm-white);
        margin: 0 0 0.75rem 0;
        line-height: 1.2;
        transition: transform 0.3s ease;
    }

    .ef-card-cta {
        display: inline-flex;
        align-items: center;
        gap: 0.6rem;
        font-family: var(--ef-sans);
        font-size: 0.7rem;
        font-weight: 500;
        letter-spacing: 0.15em;
        text-transform: uppercase;
        color: var(--ef-amber);
        opacity: 0.72;
        transform: none;
        transition: opacity 0.25s ease, gap 0.25s ease;
    }
    .ef-card-cta .ef-cta-line {
        display: inline-block;
        width: 24px;
        height: 1px;
        background: var(--ef-amber);
        transition: width 0.25s ease;
    }
    .ef-card-status {
        position: absolute;
        top: 18px;
        right: 18px;
        z-index: 3;
        display: inline-flex;
        align-items: center;
        gap: 7px;
        padding: 7px 10px;
        border: 1px solid rgba(240,230,211,0.12);
        border-radius: 999px;
        background: rgba(5,5,5,0.42);
        color: rgba(240,230,211,0.65);
        font: 600 0.54rem/1 var(--ef-sans);
        letter-spacing: 0.12em;
        text-transform: uppercase;
        backdrop-filter: blur(10px);
    }
    .ef-card-status > span {
        width: 6px;
        height: 6px;
        border-radius: 50%;
        background: var(--ef-gold);
        transition: background 0.2s ease, box-shadow 0.2s ease;
    }
    .ef-card.is-static .ef-card-status { display: none; }
    .ef-card.is-previewing .ef-card-status > span {
        background: var(--ef-red-glow);
        box-shadow: 0 0 8px rgba(231,76,60,0.75);
    }

    /* ── Card Border Glow ── */
    .ef-card::before {
        content: '';
        position: absolute;
        inset: 0;
        border-radius: 10px;
        border: 1px solid transparent;
        z-index: 4;
        pointer-events: none;
        transition: border-color 0.3s ease;
    }

    /* ── Fast, restrained interactions ── */
    .ef-card:hover video,
    .ef-card:focus-visible video { transform: scale(1.045); }
    .ef-card:hover .ef-card-overlay,
    .ef-card:focus-visible .ef-card-overlay { opacity: 0.35; }
    .ef-card:hover .ef-card-title,
    .ef-card:focus-visible .ef-card-title { transform: translateY(-3px); }
    .ef-card:hover .ef-card-cta,
    .ef-card:focus-visible .ef-card-cta { opacity: 1; gap: 0.8rem; }
    .ef-card:hover .ef-card-cta .ef-cta-line,
    .ef-card:focus-visible .ef-card-cta .ef-cta-line { width: 36px; }
    .ef-card:hover .ef-card-index,
    .ef-card:focus-visible .ef-card-index { opacity: 1; }
    .ef-card:hover::before,
    .ef-card:focus-visible::before { border-color: rgba(201,168,76,0.42); }
    .ef-card:focus-visible {
        outline: 2px solid var(--ef-gold);
        outline-offset: 3px;
    }

    /* ── CTA Section ── */
    .ef-cta-section {
        position: relative;
        padding: 5rem 1.5rem 8rem;
        text-align: center;
        content-visibility: auto;
        contain-intrinsic-size: auto 420px;
    }
    .ef-cta-section::before {
        content: '';
        position: absolute;
        top: 0;
        left: 50%;
        transform: translateX(-50%);
        width: 1px;
        height: 60px;
        background: linear-gradient(to bottom, transparent, var(--ef-gold));
    }
    .ef-cta-heading {
        font-family: var(--ef-serif);
        font-size: clamp(1.5rem, 3vw, 2.4rem);
        font-weight: 400;
        color: var(--ef-warm-white);
        margin-bottom: 0.75rem;
    }
    .ef-cta-heading em {
        font-style: italic;
        color: var(--ef-gold);
    }
    .ef-cta-sub {
        font-family: var(--ef-sans);
        font-size: 0.85rem;
        font-weight: 300;
        color: var(--ef-muted);
        letter-spacing: 0.05em;
        margin-bottom: 2.5rem;
    }
    .ef-cta-btn {
        display: inline-flex;
        align-items: center;
        gap: 0.75rem;
        padding: 0.9rem 2.5rem;
        font-family: var(--ef-sans);
        font-size: 0.75rem;
        font-weight: 500;
        letter-spacing: 0.18em;
        text-transform: uppercase;
        color: var(--ef-black);
        background: linear-gradient(135deg, var(--ef-gold), var(--ef-amber));
        border: none;
        border-radius: 4px;
        text-decoration: none;
        transition: transform 0.25s ease, box-shadow 0.25s ease;
    }
    .ef-cta-btn:hover,
    .ef-cta-btn:focus-visible {
        transform: translateY(-2px);
        box-shadow: 0 8px 30px rgba(201,168,76,0.25);
        color: var(--ef-black);
        outline: none;
    }
    .ef-cta-btn:focus-visible { box-shadow: 0 0 0 3px rgba(212,163,115,0.24), 0 8px 30px rgba(201,168,76,0.25); }

    /* ── Utilities ── */
    .ef-spacer { height: 0; }

    @media (max-width: 767.98px) {
        .ef-hero { min-height: 500px; }
        .ef-hero::after { display: none; }
        .ef-hero-inner { padding: 58px 20px 48px; }
        .ef-hero-label { margin-bottom: 24px; font-size: 0.56rem; letter-spacing: 0.16em; }
        .ef-hero-mark { width: 40px; height: 40px; }
        .ef-hero-mark img { width: 36px; height: 36px; }
        .ef-hero-title { font-size: clamp(4.1rem, 22vw, 7rem); line-height: 0.86; }
        .ef-hero-subtitle { font-size: 0.94rem; }
        .ef-hero-meta { max-width: 330px; }
        .ef-grid { padding: 52px 14px 4rem; }
        .ef-grid-row--2 .ef-card,
        .ef-grid-row--1 .ef-card { aspect-ratio: 16 / 10; }
        .ef-card-content { padding: 1.35rem; }
        .ef-card-status { top: 12px; right: 12px; }
        .ef-section-label { margin-bottom: 1.8rem; }
        .ef-cta-section { padding: 4rem 20px 6rem; }
    }

    @media (pointer: coarse) {
        .ef-card-status { display: none; }
        .ef-card-cta { opacity: 1; }
        .ef-card:hover video { transform: scale(1.015); }
        .ef-card:hover .ef-card-overlay { opacity: 1; }
    }

    /* ── Reduced motion ── */
    @media (prefers-reduced-motion: reduce) {
        .ef-card video {
            transition: none;
        }
        .ef-card-overlay,
        .ef-card-title,
        .ef-card-cta,
        .ef-card::before {
            transition: none;
        }
        .ef-scroll-line { transition: none; }
        .ef-card:hover video,
        .ef-card:focus-visible video { transform: scale(1.015); }
    }