:root {
    --noir-ink: #17130f;
    --noir-panel: #241b16;
    --noir-red: #8b1f1f;
    --noir-green: #21483b;
    --noir-gold: #c19a54;
    --noir-paper: #f4ead8;
    --noir-cream: #fff8ea;
    --noir-muted: #6d6253;
}
body.is-home { background: #f6efe2; color: var(--noir-ink); }
body.is-home .site-header { background: rgba(23, 19, 15, .94); border-bottom: 1px solid rgba(193,154,84,.35); color: #fff8ea; }
body.is-home .logo, body.is-home .nav-link, body.is-home .dropdown-toggle { color: #fff8ea; }
body.is-home .dropdown-menu { background: #241b16; border-color: rgba(193,154,84,.35); }
body.is-home .dropdown-item { color: #fff8ea; }
body.is-home .dropdown-item:hover { background: rgba(193,154,84,.14); color: #f5d994; }
.noir-home { overflow: hidden; }
.noir-hero { min-height: 720px; position: relative; display: flex; align-items: flex-end; background: #120f0d; color: #fff8ea; }
.noir-hero-bg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center; }
.noir-hero-shade { position: absolute; inset: 0; background: linear-gradient(90deg, rgba(14,11,9,.94) 0%, rgba(14,11,9,.78) 40%, rgba(14,11,9,.28) 72%), linear-gradient(0deg, rgba(14,11,9,.92), transparent 46%); }
.noir-hero-inner { position: relative; z-index: 1; display: grid; grid-template-columns: minmax(0, 640px) 360px; gap: 48px; align-items: end; padding-top: 96px; padding-bottom: 58px; }
.noir-kicker { display: inline-flex; color: #f3d590; border: 1px solid rgba(193,154,84,.55); background: rgba(28,22,18,.72); padding: 9px 14px; text-transform: uppercase; font-size: .74rem; font-weight: 800; letter-spacing: .08em; }
.noir-hero h1 { font-size: clamp(2.25rem, 5vw, 5.4rem); line-height: .95; margin: 22px 0 18px; max-width: 720px; letter-spacing: 0; }
.noir-lead { font-size: 1.12rem; line-height: 1.7; max-width: 610px; color: #eadfcd; }
.noir-search { margin: 28px 0 16px; max-width: 560px; z-index: 10; }
.noir-search input { width: 100%; border: 1px solid rgba(193,154,84,.52); background: rgba(255,248,234,.96); color: #17130f; border-radius: 8px; padding: 17px 20px 17px 48px; box-shadow: 0 18px 44px rgba(0,0,0,.26); }
.noir-search input:focus { border-color: #e6c275; box-shadow: 0 0 0 4px rgba(193,154,84,.18), 0 18px 44px rgba(0,0,0,.26); outline: none; }
.noir-search .search-icon { color: #8b1f1f; }
.noir-disclaimer { max-width: 560px; font-size: .84rem; line-height: 1.55; color: #d9c8ab; border-left: 3px solid var(--noir-gold); padding-left: 14px; }
.noir-hero-panel { display: grid; gap: 10px; }
.case-link { display: block; background: rgba(255,248,234,.9); color: #1f1712; text-decoration: none; padding: 16px 18px; border-radius: 8px; border: 1px solid rgba(193,154,84,.48); box-shadow: 0 16px 36px rgba(0,0,0,.22); transition: transform .2s, background .2s; }
.case-link:hover { transform: translateY(-3px); background: #fff8ea; }
.case-link span { color: #8b1f1f; font-weight: 900; margin-right: 8px; }
.case-link strong { display: inline; font-size: 1.02rem; }
.case-link em { display: block; margin-top: 4px; color: #6d6253; font-size: .84rem; font-style: normal; }
.noir-content { padding: 34px 0 72px; }
.noir-strip { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; margin: -68px 0 54px; position: relative; z-index: 3; }
.stamp-card { min-height: 132px; display: flex; flex-direction: column; justify-content: space-between; background: #fff8ea; border: 1px solid #d6bd84; border-radius: 8px; color: #1d1712; text-decoration: none; padding: 18px; box-shadow: 0 18px 35px rgba(54,38,25,.14); }
.stamp-card span { align-self: flex-start; color: #8b1f1f; border: 1px solid rgba(139,31,31,.35); padding: 4px 8px; font-size: .72rem; text-transform: uppercase; font-weight: 800; transform: rotate(-2deg); }
.stamp-card strong { font-size: 1.18rem; }
.stamp-card em { color: #6d6253; font-style: normal; font-size: .9rem; line-height: 1.35; }
.home-section, [data-animate] { opacity: 0; transform: translateY(24px); transition: opacity .6s ease, transform .6s ease; }
.home-section.visible, [data-animate].visible { opacity: 1; transform: translateY(0); }
.section-heading { max-width: 760px; margin: 0 0 24px; }
.section-heading p, .archive-copy span, .scene-card span, .family-role { color: #8b1f1f; font-weight: 900; text-transform: uppercase; letter-spacing: .07em; font-size: .76rem; }
.section-heading h2, .scene-card h2, .archive-copy h2, .noir-footer-note h2 { font-size: clamp(1.65rem, 3vw, 3rem); line-height: 1.08; margin: 8px 0 0; color: #1b1510; }
.noir-family, .noir-cases, .noir-scenes, .archive-section, .featured-dossier, .noir-footer-note { margin-top: 58px; }
.family-card { background: #fff8ea; border: 1px solid #d9c18c; border-radius: 8px; overflow: hidden; display: grid; grid-template-columns: .9fr 1fr; color: #1b1510; box-shadow: 0 14px 30px rgba(54,38,25,.12); }
.family-card img { width: 100%; height: 100%; min-height: 280px; object-fit: cover; }
.family-card div { padding: 28px; align-self: center; }
.family-card h3 { font-size: 1.65rem; line-height: 1.12; margin: 8px 0 12px; }
.family-card p, .scene-card p, .archive-copy p, .noir-footer-note p { color: #5f5548; line-height: 1.65; margin: 0; }
.family-card a { display: inline-flex; margin-top: 18px; color: #8b1f1f; font-weight: 800; text-decoration: none; }
.family-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; margin-top: 18px; }
.family-grid .family-card { grid-template-columns: 1fr; }
.family-grid .family-card img { min-height: 260px; aspect-ratio: 16/9; }
.family-grid .family-card h3 { font-size: 1.28rem; }
.case-grid { display: grid; grid-template-columns: repeat(4, 1fr); grid-auto-rows: 145px; gap: 14px; }
.case-tile { position: relative; display: flex; flex-direction: column; justify-content: flex-end; padding: 18px; border-radius: 8px; overflow: hidden; background: #2a211a; color: #fff8ea; text-decoration: none; border: 1px solid rgba(193,154,84,.44); }
.case-tile::before { content: ''; position: absolute; inset: 0; background: linear-gradient(135deg, rgba(139,31,31,.42), transparent 58%), repeating-linear-gradient(-8deg, transparent 0 16px, rgba(255,248,234,.035) 16px 17px); }
.case-tile strong, .case-tile span { position: relative; z-index: 1; }
.case-tile strong { font-size: 1.25rem; }
.case-tile span { color: #dcc9aa; font-size: .88rem; line-height: 1.42; margin-top: 6px; }
.case-tile.tall { grid-row: span 2; background: #1c332c; }
.case-tile.wide { grid-column: span 2; background: #4b1717; }
.noir-scenes { display: grid; gap: 20px; }
.scene-card { display: grid; grid-template-columns: 1.08fr .92fr; align-items: center; background: #fff8ea; border-radius: 8px; overflow: hidden; border: 1px solid #d9c18c; }
.scene-card.reverse { grid-template-columns: .92fr 1.08fr; }
.scene-card.reverse img { order: 2; }
.scene-card img { width: 100%; height: 100%; min-height: 360px; object-fit: cover; }
.scene-card div { padding: 34px; }
.archive-section { position: relative; background: #1b1510; border-radius: 8px; overflow: hidden; color: #fff8ea; padding: 32px; }
.archive-section > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: .32; }
.archive-section::after { content: ''; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(27,21,16,.86), rgba(27,21,16,.96)); }
.archive-section > *:not(img) { position: relative; z-index: 1; }
.archive-copy { max-width: 720px; margin-bottom: 22px; }
.archive-copy h2, .archive-copy p { color: #fff8ea; }
.archive-copy p { color: #e3d2b8; }
.articles-home-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 14px; }
.article-home-card { background: rgba(255,248,234,.94); border: 1px solid rgba(214,189,132,.78); border-radius: 8px; padding: 18px; text-decoration: none; color: #1b1510; display: flex; flex-direction: column; min-height: 148px; transition: transform .2s, background .2s; }
.article-home-card:hover { transform: translateY(-3px); background: #fff8ea; }
.article-home-title { font-weight: 850; line-height: 1.35; }
.article-home-desc { color: #5f5548; font-size: .9rem; line-height: 1.5; margin-top: 8px; flex: 1; }
.article-home-tag { align-self: flex-start; margin-top: 14px; font-size: .76rem; font-weight: 800; color: #8b1f1f; }
.loading-card { color: #cdbb9d; text-align: center; grid-column: 1/-1; }
.refresh-line { text-align: center; margin-top: 24px; }
.btn-outline.noir-refresh, .btn-outline { border-radius: 8px; border: 1px solid #c19a54; background: #fff8ea; color: #1b1510; font-weight: 850; }
.noir-featured { display: grid; grid-template-columns: 1.2fr .8fr; background: #241b16; color: #fff8ea; border-radius: 8px; overflow: hidden; text-decoration: none; border: 1px solid rgba(193,154,84,.45); }
.noir-featured .featured-content { padding: 30px; }
.noir-featured .featured-badge { color: #f0d18b; font-size: .76rem; text-transform: uppercase; font-weight: 850; }
.noir-featured .featured-title { font-size: 1.6rem; margin: 12px 0; }
.noir-featured .featured-desc { color: #d9c8ab; line-height: 1.55; }
.noir-featured .featured-cta { color: #f0d18b; font-weight: 850; }
.noir-featured .featured-visual { min-height: 220px; display: grid; place-items: center; font-size: 5rem; background: linear-gradient(135deg, #562020, #19392f); }
.recent-scroll { display: flex; gap: 12px; overflow-x: auto; margin-top: 18px; padding-bottom: 12px; }
.recent-card { flex: 0 0 270px; background: #fff8ea; border: 1px solid #d9c18c; border-radius: 8px; padding: 18px; color: #1b1510; text-decoration: none; }
.recent-badge { color: #8b1f1f; font-size: .72rem; font-weight: 900; text-transform: uppercase; }
.recent-title { margin-top: 8px; font-weight: 850; line-height: 1.35; }
.recent-cat { display: inline-block; margin-top: 12px; color: #5f5548; font-size: .82rem; }
.noir-footer-note { display: grid; grid-template-columns: .95fr 1fr; align-items: center; background: #211813; color: #fff8ea; border-radius: 8px; overflow: hidden; }
.noir-footer-note img { width: 100%; height: 100%; min-height: 300px; object-fit: cover; opacity: .82; }
.noir-footer-note div { padding: 34px; }
.noir-footer-note h2 { color: #fff8ea; }
.noir-footer-note p { color: #dac8aa; }
.hero-search-dropdown { background: #fff8ea; border: 1px solid #d9c18c; border-radius: 8px; box-shadow: 0 18px 42px rgba(0,0,0,.24); }
.sd-item { color: #1b1510; border-bottom: 1px solid #eadbbf; }
.sd-item:hover, .sd-item.sd-active { background: #f2e4c9; }
.sd-icon { background: #eadbbf; }
.sd-slug, .sd-empty { color: #6d6253; }
@media (max-width: 980px) {
    .noir-hero { min-height: auto; }
    .noir-hero-inner { grid-template-columns: 1fr; padding-top: 78px; gap: 24px; }
    .noir-hero-shade { background: linear-gradient(180deg, rgba(14,11,9,.9), rgba(14,11,9,.78)); }
    .noir-strip, .case-grid { grid-template-columns: repeat(2, 1fr); }
    .family-card, .scene-card, .scene-card.reverse, .noir-footer-note, .noir-featured { grid-template-columns: 1fr; }
    .scene-card.reverse img { order: 0; }
}
@media (max-width: 640px) {
    .noir-hero-inner { padding-bottom: 34px; }
    .noir-hero h1 { font-size: 2.35rem; }
    .noir-lead { font-size: 1rem; }
    .noir-hero-panel { display: none; }
    .noir-strip { margin-top: -24px; grid-template-columns: 1fr; }
    .family-grid, .case-grid, .articles-home-grid { grid-template-columns: 1fr; }
    .case-grid { grid-auto-rows: auto; }
    .case-tile { min-height: 132px; }
    .case-tile.tall, .case-tile.wide { grid-row: auto; grid-column: auto; }
    .family-card div, .scene-card div, .archive-section, .noir-footer-note div { padding: 22px; }
    .family-card img, .scene-card img { min-height: 230px; }
    .archive-section { margin-left: -12px; margin-right: -12px; border-radius: 0; }
}


/* Refinements after visual pass */
@media (min-width: 981px) {
    .noir-hero-bg {
        object-position: 64% center;
        transform: scale(1.035);
        transform-origin: center right;
    }
    .noir-hero-shade {
        background:
            linear-gradient(90deg, rgba(14,11,9,.98) 0%, rgba(14,11,9,.9) 32%, rgba(14,11,9,.43) 56%, rgba(14,11,9,.14) 78%),
            linear-gradient(0deg, rgba(14,11,9,.9), transparent 48%);
    }
    .noir-hero-inner {
        grid-template-columns: minmax(0, 560px) 340px;
        gap: 70px;
    }
    .noir-hero h1 {
        max-width: 555px;
        font-size: clamp(2.25rem, 4.35vw, 4.7rem);
    }
    .noir-lead,
    .noir-search,
    .noir-disclaimer {
        max-width: 525px;
    }
}

.portrait-strip {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 14px;
    margin: 0 0 18px;
}
.portrait-strip figure {
    position: relative;
    margin: 0;
    min-height: 230px;
    overflow: hidden;
    border-radius: 8px;
    border: 1px solid #d9c18c;
    background: #241b16;
    box-shadow: 0 14px 30px rgba(54,38,25,.12);
}
.portrait-strip img {
    width: 100%;
    height: 100%;
    min-height: 230px;
    object-fit: cover;
    object-position: center 18%;
    display: block;
    opacity: .92;
}
.portrait-strip figcaption {
    position: absolute;
    left: 12px;
    right: 12px;
    bottom: 12px;
    padding: 8px 10px;
    border: 1px solid rgba(193,154,84,.52);
    border-radius: 6px;
    background: rgba(23,19,15,.78);
    color: #fff8ea;
    font-size: .85rem;
    font-weight: 850;
}

body.is-home .mobile-menu-btn {
    color: #fff8ea;
    border-color: rgba(193,154,84,.55);
    background: rgba(255,248,234,.08);
}

@media (max-width: 768px) {
    body.is-home .header-inner {
        position: relative;
    }
    body.is-home .main-nav {
        top: 60px;
        left: 12px;
        right: 12px;
        padding: 12px;
        background: #241b16;
        border: 1px solid rgba(193,154,84,.45);
        border-radius: 8px;
        box-shadow: 0 18px 38px rgba(0,0,0,.28);
        max-height: calc(100vh - 82px);
        overflow-y: auto;
        gap: 6px;
    }
    body.is-home .main-nav > .nav-link {
        display: flex;
    }
    body.is-home .nav-link,
    body.is-home .dropdown-item {
        width: 100%;
        padding: 10px 12px;
        border-radius: 6px;
        white-space: normal;
        line-height: 1.35;
    }
    body.is-home .nav-dropdown {
        display: block;
        width: 100%;
    }
    body.is-home .dropdown-toggle {
        display: block;
        width: 100%;
        text-align: left;
    }
    body.is-home .dropdown-menu {
        display: none !important;
        position: static;
        margin-top: 6px;
        min-width: 0;
        max-height: none;
        overflow: visible;
        padding: 6px;
        border-radius: 6px;
        background: rgba(255,248,234,.06);
        box-shadow: none;
    }
    body.is-home .nav-dropdown:focus-within .dropdown-menu,
    body.is-home .nav-dropdown:hover .dropdown-menu {
        display: block !important;
    }
    body.is-home .main-nav:not(.open) {
        display: none !important;
    }
    body.is-home .main-nav.open {
        display: flex !important;
    }
    .portrait-strip {
        grid-template-columns: 1fr;
    }
    .portrait-strip figure,
    .portrait-strip img {
        min-height: 210px;
    }
}

@media (max-width: 640px) {
    .noir-hero-bg {
        object-position: 58% center;
    }
    .noir-hero-shade {
        background: linear-gradient(180deg, rgba(14,11,9,.78), rgba(14,11,9,.9) 48%, rgba(14,11,9,.96));
    }
    .noir-hero-inner {
        padding-top: 360px;
    }
}


/* Second visual fix: make Michele explicit in hero and restore mobile menu trigger */
.hero-michele-card {
    margin: 0 0 10px;
    overflow: hidden;
    border-radius: 8px;
    border: 1px solid rgba(193,154,84,.56);
    background: #211813;
    box-shadow: 0 18px 42px rgba(0,0,0,.32);
}
.hero-michele-card img {
    display: block;
    width: 100%;
    height: 190px;
    object-fit: cover;
    object-position: center 16%;
}
.hero-michele-card figcaption {
    padding: 9px 12px 11px;
    color: #f3d590;
    font-size: .8rem;
    font-weight: 850;
    line-height: 1.25;
    background: rgba(23,19,15,.94);
}
@media (min-width: 981px) {
    .noir-hero-inner {
        grid-template-columns: minmax(0, 520px) 390px;
        gap: 95px;
    }
    .noir-hero h1 {
        max-width: 520px;
        font-size: clamp(2.2rem, 4.05vw, 4.35rem);
    }
    .noir-lead,
    .noir-search,
    .noir-disclaimer {
        max-width: 500px;
    }
}
@media (max-width: 768px) {
    body.is-home .mobile-menu-btn {
        display: inline-flex !important;
        align-items: center;
        justify-content: center;
        position: relative;
        z-index: 1002;
        width: 42px;
        height: 38px;
        padding: 0;
        color: #fff8ea !important;
        background: rgba(255,248,234,.12) !important;
        border: 1px solid rgba(193,154,84,.72) !important;
        border-radius: 8px;
        font-size: 1.35rem;
        line-height: 1;
    }
    body.is-home .logo {
        min-width: 0;
        font-size: 1.05rem;
    }
    body.is-home .header-inner {
        height: 58px;
    }
    body.is-home .main-nav {
        top: 58px;
    }
}
@media (max-width: 640px) {
    .hero-michele-card {
        display: none;
    }
}


/* Third visual fix: keep the full hero scene visible */
@media (min-width: 981px) {
    .noir-hero-bg {
        object-position: center center;
        transform: none;
    }
    .noir-hero-shade {
        background:
            linear-gradient(90deg, rgba(14,11,9,.48) 0%, rgba(14,11,9,.38) 32%, rgba(14,11,9,.18) 58%, rgba(14,11,9,.06) 82%),
            linear-gradient(0deg, rgba(14,11,9,.52), transparent 44%);
    }
    .noir-hero-inner {
        grid-template-columns: minmax(0, 500px) 360px;
        gap: 96px;
        padding-top: 190px;
        padding-bottom: 36px;
        align-items: end;
    }
    .noir-kicker {
        background: rgba(23,19,15,.58);
    }
    .noir-hero h1 {
        max-width: 500px;
        font-size: clamp(2rem, 3.45vw, 3.85rem);
        line-height: 1.02;
        margin: 18px 0 14px;
        text-shadow: 0 3px 18px rgba(0,0,0,.62);
    }
    .noir-lead {
        max-width: 500px;
        font-size: 1.04rem;
        line-height: 1.58;
        text-shadow: 0 2px 12px rgba(0,0,0,.75);
    }
    .noir-search,
    .noir-disclaimer {
        max-width: 500px;
    }
}
@media (max-width: 640px) {
    .noir-hero-shade {
        background: linear-gradient(180deg, rgba(14,11,9,.28), rgba(14,11,9,.72) 48%, rgba(14,11,9,.88));
    }
    .noir-hero h1 {
        font-size: 2rem;
        line-height: 1.05;
    }
}


/* Mobile nav final: stable full-width panel under the sticky header */
@media (max-width: 768px) {
    body.is-home .site-header {
        position: sticky;
        top: 0;
        z-index: 2000;
    }
    body.is-home .header-inner {
        height: 58px !important;
        position: relative;
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 12px;
    }
    body.is-home .mobile-menu-btn {
        display: inline-flex !important;
        flex: 0 0 42px;
        align-items: center;
        justify-content: center;
        width: 42px;
        height: 38px;
        margin-left: auto;
        color: #fff8ea !important;
        background: rgba(255,248,234,.12) !important;
        border: 1px solid rgba(193,154,84,.72) !important;
        border-radius: 8px;
        font-size: 1.35rem;
        line-height: 1;
        position: relative;
        z-index: 2002;
    }
    body.is-home .main-nav {
        position: fixed !important;
        top: 66px !important;
        left: 12px !important;
        right: 12px !important;
        width: auto !important;
        margin: 0 !important;
        padding: 12px !important;
        display: none !important;
        flex-direction: column !important;
        align-items: stretch !important;
        gap: 6px !important;
        background: #241b16 !important;
        border: 1px solid rgba(193,154,84,.48) !important;
        border-radius: 8px !important;
        box-shadow: 0 18px 42px rgba(0,0,0,.34) !important;
        max-height: calc(100vh - 84px) !important;
        overflow-y: auto !important;
        z-index: 2001 !important;
    }
    body.is-home .main-nav.open {
        display: flex !important;
    }
    body.is-home .main-nav > .nav-link,
    body.is-home .dropdown-item {
        display: flex !important;
        align-items: center;
        width: 100% !important;
        min-height: 40px;
        padding: 9px 10px !important;
        border-radius: 6px !important;
        color: #fff8ea !important;
        background: rgba(255,248,234,.06) !important;
        white-space: normal !important;
        line-height: 1.25 !important;
    }
    body.is-home .nav-dropdown {
        display: block !important;
        width: 100% !important;
        position: static !important;
    }
    body.is-home .dropdown-toggle {
        display: none !important;
    }
    body.is-home .dropdown-menu {
        display: grid !important;
        grid-template-columns: 1fr !important;
        gap: 6px !important;
        position: static !important;
        width: 100% !important;
        min-width: 0 !important;
        max-height: none !important;
        margin: 0 !important;
        padding: 0 !important;
        background: transparent !important;
        border: 0 !important;
        box-shadow: none !important;
        overflow: visible !important;
    }
}


/* Controlled desktop H1 line breaks */
@media (min-width: 981px) {
    .noir-hero h1 span {
        display: block;
    }
}
@media (max-width: 980px) {
    .noir-hero h1 span {
        display: inline;
    }
    .noir-hero h1 span + span::before {
        content: ' ';
    }
}


/* Featured archive image */
.noir-featured .featured-visual {
    position: relative;
    overflow: hidden;
    padding: 0;
    background: #17130f;
}
.noir-featured .featured-visual img {
    width: 100%;
    height: 100%;
    min-height: 220px;
    object-fit: cover;
    object-position: center;
    display: block;
    transition: transform .3s ease;
}
.noir-featured:hover .featured-visual img {
    transform: scale(1.035);
}