/* ==================================================
   JOHN MULHOLLAND SITE
   Authored CSS Framework
================================================== */


/* ==================================================
   1. ROOT / BASE
================================================== */

:root {
    --paper: #f7f1e8;
    --warm: #efe4d6;
    --ink: #25211d;
    --muted: #6f665d;
    --dark: #171717;
    --white: #ffffff;
    --line: rgba(37, 33, 29, 0.22);

    --film-bg: #181614;
    --film-card: #211e1a;

    --gold: #b99562;
    --gold-soft: rgba(185,149,98,0.62);

    --serif: Garamond, "EB Garamond", Georgia, serif;
    --sans: "Raleway", Arial, sans-serif;
    --body: "Open Sans", Arial, sans-serif;
}

html,
body {
    width: 100%;
    min-height: 100%;
    margin: 0;
    padding: 0;
}

html {
    scroll-behavior: smooth;
}

body {
    font-family: var(--body);
    font-weight: 300;
    color: var(--ink);
    background: var(--paper);
    -webkit-font-smoothing: antialiased;
}

a {
    color: inherit;
    text-decoration: none;
}

a:hover,
a:focus {
    color: inherit;
    text-decoration: none;
    outline: none;
}

img {
    max-width: 100%;
    height: auto;
}

/* ==================================================
   2. NAVIGATION
================================================== */

.siteNav {
    min-height: 76px;
    padding: 18px 42px;
    margin: 0;
    background: rgba(15, 15, 15, 0.42);
    border: none;
    border-radius: 0;
    transition: background 0.3s ease, padding 0.3s ease;
}

.siteBrand {
    font-family: "Raleway", Arial, sans-serif;
    font-size: 14px;
    font-weight: 400;
    letter-spacing: 4px;
    text-transform: uppercase;
    color: var(--white) !important;
}

.siteMenu > li > a {
    font-family: "Raleway", Arial, sans-serif;
    font-size: 11px;
    font-weight: 600 !important;
    letter-spacing: 2.2px;
    text-transform: uppercase;
    color: rgba(255,255,255,0.82) !important;
    transition: none;
}

.siteMenu > li > a:hover,
.siteMenu > li.active > a {
    color: #ffffff !important;
    background: transparent !important;
}

.navbar-toggle {
    border: none;
}

.navbar-default .navbar-toggle .icon-bar {
    background-color: #ffffff;
}

.navbar-default .navbar-toggle:hover,
.navbar-default .navbar-toggle:focus {
    background: transparent;
}


/* ==================================================
   HERO — ROTATING KEN BURNS BACKGROUND
================================================== */

.heroSection {
    position: relative;
    min-height: 100vh;
    background-color: #171717;
    overflow: hidden;
}

/* Background slideshow frame */
.heroSlideshow {
    position: absolute;
    inset: 0;
    z-index: 0;
    overflow: hidden;
}

/* Individual hero slides */
.heroSlide {
    position: absolute;
    inset: 0;
    background-size: cover;
    background-position: center 58%;
    background-repeat: no-repeat;
    opacity: 0;
    transform: scale(1);
    transition:
        opacity 1.6s ease-in-out,
        transform 8.5s ease;
    will-change: opacity, transform;
}

/* Active slide */
.heroSlide.is-active {
    opacity: 1;
    transform: scale(1.08);
}

/* Ken Burns direction variants */
.heroSlide.kenburns-left.is-active {
    transform: scale(1.08) translateX(-1.5%);
    background-position: 46% 58%;
}

.heroSlide.kenburns-right.is-active {
    transform: scale(1.08) translateX(1.5%);
    background-position: 54% 58%;
}

.heroSlide.kenburns-center.is-active {
    transform: scale(1.08);
    background-position: center 58%;
}

/* Dark cinematic overlay */
.heroOverlay {
    position: absolute;
    inset: 0;
    background:
        linear-gradient(
            rgba(10,10,10,0.12),
            rgba(10,10,10,0.48)
        );
    z-index: 1;
}

/* Hero content wrapper */
.heroInner {
    position: relative;
    z-index: 2;
    min-height: 100vh;
    display: flex;
    align-items: center;
    padding: 130px 0 90px;
}


/* ==================================================
   HERO TYPOGRAPHY
================================================== */

.heroKicker {
    margin: 0 0 24px;
    font-family: var(--sans);
    font-size: 12px;
    font-weight: 400;
    letter-spacing: 4px;
    text-transform: uppercase;
    color: rgba(255,255,255,0.72);
}

.heroTitle {
    margin: 0;
    font-family: var(--sans);
    font-size: 43px;
    line-height: 1.05;
    font-weight: 300;
    letter-spacing: 8px;
    text-transform: uppercase;
    color: #ffffff;
}

.heroRule {
    width: 1px;
    height: 58px;
    margin: 30px auto 28px;
    background: rgba(255,255,255,0.62);
}

.heroText {
    max-width: 760px;
    margin: 0 auto;
    font-size: 18px;
    line-height: 1.85;
    color: rgba(255,255,255,0.76);
}

.heroButton {
    display: inline-block;
    margin-top: 38px;
    padding: 13px 34px;
    border: 1px solid rgba(255,255,255,0.62);
    font-family: var(--sans);
    font-size: 11px;
    letter-spacing: 3px;
    text-transform: uppercase;
    color: #ffffff;
    transition:
        background 0.25s ease,
        color 0.25s ease,
        border-color 0.25s ease;
}

.heroButton:hover,
.heroButton:focus {
    background: #ffffff;
    color: #171717;
    border-color: #ffffff;
    outline: none;
}


/* ==================================================
   HERO TEXT — SAFE FADE UP ON LOAD
   Controlled by JS adding .heroTextIn to .heroSection
================================================== */

.heroKicker,
.heroTitle,
.heroRule,
.heroText,
.heroButton {
    opacity: 0;
    transform: translateY(26px);
    transition:
        opacity 0.95s ease,
        transform 0.95s ease;
    will-change: opacity, transform;
}

.heroSection.heroTextIn .heroKicker,
.heroSection.heroTextIn .heroTitle,
.heroSection.heroTextIn .heroRule,
.heroSection.heroTextIn .heroText,
.heroSection.heroTextIn .heroButton {
    opacity: 1;
    transform: translateY(0);
}

.heroSection.heroTextIn .heroKicker {
    transition-delay: 0.28s;
}

.heroSection.heroTextIn .heroTitle {
    transition-delay: 0.46s;
}

.heroSection.heroTextIn .heroRule {
    transition-delay: 0.64s;
}

.heroSection.heroTextIn .heroText {
    transition-delay: 0.82s;
}

.heroSection.heroTextIn .heroButton {
    transition-delay: 1s;
}

/* ==================================================
   HERO — REDUCED MOTION
================================================== */

@media (prefers-reduced-motion: reduce) {
    .heroSlide {
        transition: opacity 0.4s ease !important;
        transform: none !important;
    }

    .heroSlide.is-active,
    .heroSlide.kenburns-left.is-active,
    .heroSlide.kenburns-right.is-active,
    .heroSlide.kenburns-center.is-active {
        transform: none !important;
    }

    .heroKicker,
    .heroTitle,
    .heroRule,
    .heroText,
    .heroButton {
        opacity: 1 !important;
        transform: none !important;
        transition: none !important;
        animation: none !important;
    }
}


/* ==================================================
   5. SHARED SECTION FRAMEWORK
================================================== */

.siteSection {
    position: relative;
    padding: 50px 0;
}

.sectionLight {
    background: var(--paper);
    color: var(--ink);
}

.sectionDark {
    background: var(--dark);
    color: var(--white);
}

.sectionKicker {
    margin: 0 0 18px;
    font-family: "Raleway", Arial, sans-serif;
    font-size: 11px;
    font-weight: 500;
    letter-spacing: 4px;
    text-align: center;
    text-transform: uppercase;
    color: var(--muted);
}

.sectionDark .sectionKicker {
    color: rgba(255,255,255,0.58);
}

.siteSection h2 {
    margin: 0 0 24px;
    font-family: "Raleway", Arial, sans-serif;
    font-size: 38px;
    line-height: 1.25;
    font-weight: 300;
    letter-spacing: 3px;
    text-transform: uppercase;
}

.siteSection p {
    max-width: 760px;
    margin-left: auto;
    margin-right: auto;
    font-size: 16px;
    line-height: 1.85;
    color: #7b7872;
}

.sectionDark p {
    color: rgba(255,255,255,0.68);
}


/* ==================================================
   6. ABOUT PREVIEW — TWO IMAGE INTRODUCTION
================================================== */

.aboutPreview {
    background: var(--paper);
    padding: 68px 0 74px;
}

.aboutTitle {
    margin: 0 0 10px;
    font-family: var(--serif) !important;
    font-size: 46px !important;
    line-height: 1.12 !important;
    font-weight: 400 !important;
    letter-spacing: 0.2px !important;
    text-transform: none !important;
    color: rgba(37,33,29,0.82) !important;
}

.aboutRoleLine {
    margin: 0 auto 34px !important;
    max-width: none !important;
    font-family: var(--sans);
    font-size: 16px !important;
    line-height: 1.5 !important;
    font-weight: 500;
    letter-spacing: 12.6px;
    text-transform: uppercase;
    color: rgba(37,33,29,0.48) !important;
}

.aboutImagePair {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 22px;
    max-width: 860px;
    margin: 0 auto 34px;
}

.aboutImage {
    margin: 0;
    background: #171717;
    overflow: hidden;
}

.aboutImage img {
    display: block;
    width: 100%;
    aspect-ratio: 16 / 10;
    object-fit: cover;
    object-position: center center;

}

.aboutImagePortrait img {
    object-position: center center;
}

.aboutImageWork img {
    object-position: center center;
}


.aboutQuote {
    max-width: 760px;
    margin: 0 auto 28px;
    padding: 0;
    border: none;
}

.aboutQuote p {
    margin: 0 auto !important;
    max-width: 740px !important;
    font-family: var(--serif);
    font-size: 23px !important;
    line-height: 1.42 !important;
    font-style: italic;
    font-weight: 300;
    letter-spacing: 0.1px;
    color: #7b7872 !important;
}

.aboutQuote footer {
    margin-top: 16px;
    font-family: var(--sans);
    font-size: 9px;
    line-height: 1.5;
    font-weight: 500;
    letter-spacing: 2.2px;
    text-transform: uppercase;
    color: rgba(37,33,29,0.48);
}

.aboutQuote footer::before {
    content: "— ";
}

.aboutQuote cite {
    font-style: normal;
}

.aboutQuote::after {
    content: "";
    display: block;
    width: 58px;
    height: 1px;
    margin: 24px auto 0;
    background: rgba(185,149,98,0.62);
}

.aboutPreviewText {
    max-width: 780px;
    margin: 0 auto 22px;
    font-size: 17px;
    line-height: 1.9;
    color: var(--muted);
}

.aboutPreviewText strong {
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    color: var(--ink);
}

.sectionButton {
    display: inline-block;
    margin-top: 22px;
    padding: 12px 32px;
    border: 1px solid var(--line);
    font-family: "Raleway", Arial, sans-serif;
    font-size: 11px;
    letter-spacing: 3px;
    text-transform: uppercase;
    color: var(--ink);
    transition: all 0.25s ease;
}

.sectionButton:hover {
    background: var(--ink);
    color: #ffffff;
    border-color: var(--ink);
}

@media (max-width: 767px) {
    .aboutTitle {
        font-size: 34px !important;
        line-height: 1.14 !important;
        margin-bottom: 10px;
    }

    .aboutImagePair {
        grid-template-columns: 1fr;
        gap: 18px;
        max-width: 92%;
        margin-bottom: 30px;
    }

    .aboutImage img {
        aspect-ratio: 16 / 10;
    }

    .aboutQuote p {
        font-size: 21px !important;
        line-height: 1.4 !important;
    }

    .aboutQuote footer {
        font-size: 8px;
        letter-spacing: 1.8px;
    }

    .aboutPreviewText {
        font-size: 15px;
        line-height: 1.78;
        text-align: left;
    }

    .sectionButton {
        padding: 11px 28px;
        font-size: 10px;
        letter-spacing: 2.6px;
    }
}
/* ==================================================
   7. FILMS SECTION
================================================== */

.filmsSection {
    background: var(--film-bg);
    color: #ffffff;
}

.filmsSection .sectionKicker {
    color: rgba(255,255,255,0.52);
}

.filmsSection h2 {
    color: #ffffff;
}

.filmsIntro {
    max-width: 850px;
    color: rgba(255,255,255,0.68);
}

.filmGrid {
    margin-top: 58px;
}

.filmCardWrap {
    margin-bottom: 30px;
}

.filmCard {
    height: 100%;
    background: var(--film-card);
    border: 1px solid rgba(255,255,255,0.10);
    box-shadow: 0 18px 45px rgba(0,0,0,0.28);
    overflow: hidden;
    transition:
        transform 0.35s ease,
        box-shadow 0.35s ease,
        border-color 0.35s ease;
}

.filmCard:hover {
    transform: translateY(-6px);
    border-color: rgba(255,255,255,0.20);
    box-shadow: 0 24px 60px rgba(0,0,0,0.42);
}

.filmPosterLink {
    position: relative;
    display: block;
    overflow: hidden;
    background: #000000;
}

.filmPosterLink::after {
    content: "";
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    background: rgba(0,0,0,0);
    transition: background 0.4s ease;
    z-index: 2;
}

.filmPosterLink:hover::after {
    background: rgba(0,0,0,0.30);
}

.filmPoster {
    display: block;
    width: 100%;
    height: auto;
    opacity: 1;
    transform: scale(1);
    transition:
        opacity 0.4s ease,
        transform 0.55s ease,
        filter 0.4s ease;
    filter: saturate(1) contrast(1);
}

.filmPosterLink:hover .filmPoster {
    opacity: 1;
    transform: scale(1.045);
    filter: saturate(0.96) contrast(0.95);
}

.trailerPlay {
    position: absolute;
    left: 50%;
    top: 50%;
    z-index: 4;
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 11px 18px;
    border: 1px solid rgba(255,255,255,0.58);
    background: rgba(0,0,0,0.42);
    color: #ffffff;
    transform: translate(-50%, -50%) scale(0.96);
    opacity: 0;
    transition:
        opacity 0.35s ease,
        transform 0.35s ease,
        background 0.35s ease,
        border-color 0.35s ease;
    pointer-events: none;
}

.trailerPlayIcon {
    font-size: 13px;
    line-height: 1;
}

.trailerPlayText {
    font-family: "Raleway", Arial, sans-serif;
    font-size: 10px;
    line-height: 1;
    letter-spacing: 2.5px;
    text-transform: uppercase;
}

.filmPosterLink:hover .trailerPlay {
    opacity: 1;
    transform: translate(-50%, -50%) scale(1);
    background: rgba(0,0,0,0.68);
    border-color: rgba(255,255,255,0.88);
}

.filmCardBody {
    padding: 26px 24px 28px;
}

.filmMeta {
    margin: 0 0 12px;
    font-family: "Raleway", Arial, sans-serif;
    font-size: 10px;
    line-height: 1.5;
    font-weight: 500;
    letter-spacing: 2.2px;
    text-transform: uppercase;
    color: rgba(255,255,255,0.50);
}

.filmCardBody h3 {
    margin: 0 0 8px;
    font-family: "Raleway", Arial, sans-serif;
    font-size: 21px;
    line-height: 1.28;
    font-weight: 400;
    letter-spacing: 2px;
    text-transform: uppercase;
    color: #ffffff;
}

.filmSubheading {
    margin: -2px 0 16px !important;
    max-width: none;
    font-family: "Raleway", Arial, sans-serif;
    font-size: 16px !important;
    line-height: 1.4 !important;
    font-weight: 400;
    letter-spacing: 0.1px;
    text-transform: normal;
    color: rgba(255,255,255,0.54) !important;
}

.filmCardBody p {
    margin: 0;
    max-width: none;
    font-size: 12px;
    line-height: 1.40;
    color: rgba(255,255,255,0.68);
}

.filmCardBody em {
    color: rgba(255,255,255,0.84);
}

.filmActions {
    margin-top: 22px;
    display: flex;
    flex-wrap: wrap;
    gap: 9px;
}

.filmLink {
    display: inline-block;
    padding: 9px 14px;
    border: 1px solid rgba(255,255,255,0.22);
    font-family: "Raleway", Arial, sans-serif;
    font-size: 9px;
    line-height: 1;
    letter-spacing: 2px;
    text-transform: uppercase;
    color: rgba(255,255,255,0.82);
    transition:
        background 0.25s ease,
        color 0.25s ease,
        border-color 0.25s ease;
}

.filmLink:hover {
    background: #ffffff;
    color: var(--film-bg);
    border-color: #ffffff;
}
/* ==================================================
   MOBILE SAFETY — FILMS MUST NEVER DISAPPEAR
================================================== */

@media (max-width: 767px) {
    #films.reveal-section,
    #films .reveal-item,
    #films .filmCardWrap,
    #films .filmCard,
    #films .filmPoster {
        opacity: 1 !important;
        transform: none !important;
        visibility: visible !important;
    }

    #films {
        display: block !important;
    }

    #films .filmGrid {
        display: block !important;
        margin-top: 36px;
    }

    #films .filmCardWrap {
        display: block !important;
        float: none !important;
        width: 100% !important;
        max-width: 420px;
        margin: 0 auto 28px;
    }
}

/* ==================================================
   8. INSIDE HIGH NOON QUOTE — JARALLAX
   Uses the same framework as Voices.
   HTML should use:
   data-img-size="cover"
   data-img-position="50% 42%"
================================================== */

.quoteParallaxSection {
    position: relative;
    min-height: 280px;
    padding: 70px 0;
    background-color: #111111;
    overflow: hidden;
    color: #ffffff;
    z-index: 1;
}

.quoteParallaxSection.jarallax {
    position: relative;
    z-index: 0;
}

.quoteParallaxSection .jarallax-img {
    position: absolute;
    object-fit: cover !important;
    font-family: "object-fit: cover;" !important;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: -100;
}

.quoteParallaxSection .jarallax-container {
    z-index: -100 !important;
}

.quoteParallaxSection .jarallax-container img {
    z-index: -100 !important;
}

.quoteOverlay {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    background:
        linear-gradient(
            rgba(10, 9, 8, 0.58),
            rgba(10, 9, 8, 0.84)
        );
    z-index: 1;
    pointer-events: none;
}

.quoteContent {
    position: relative;
    z-index: 20;
}

.quoteContent *,
.pullQuote,
.pullQuote * {
    position: relative;
    z-index: 21;
    visibility: visible;
}

.pullQuote {
    max-width: 980px;
    margin: 0 auto;
    padding: 0;
    border: none;
}

.pullQuote p {
    margin: 0 auto;
    max-width: 920px;
    font-family: Garamond, "EB Garamond", Georgia, serif;
    font-size: 30px;
    line-height: 1.55;
    font-weight: 400;
    letter-spacing: 0.3px;
    color: rgba(255,255,255,0.92);
}

.pullQuote em {
    font-style: italic;
    color: #ffffff;
}

.pullQuote footer {
    margin-top: 28px;
    font-family: "Raleway", Arial, sans-serif;
    font-size: 11px;
    line-height: 1.6;
    letter-spacing: 3px;
    text-transform: uppercase;
    color: rgba(255,255,255,0.58);
}

.pullQuote footer::before {
    content: "— ";
}
/* ==================================================
   INSIDE HIGH NOON QUOTE — SAFE SCROLL FADE
   Separate from global reveal system
================================================== */

/* Default: visible if JS fails */
.quoteFade {
    opacity: 1;
    transform: translateY(0);
}

/* Only hide for animation after JS confirms setup */
.quoteParallaxSection.quoteRevealReady .quoteFade {
    opacity: 0;
    transform: translateY(28px);
    transition:
        opacity 0.95s ease,
        transform 0.95s ease;
    will-change: opacity, transform;
}

/* Animate in */
.quoteParallaxSection.quoteRevealReady.quoteInView .quoteFade {
    opacity: 1;
    transform: translateY(0);
}

.quoteParallaxSection.quoteInView .quoteDelay1 {
    transition-delay: 0.12s;
}

/* ==================================================
   WRITING / BOOKS / GRAPHIC NOVELS
================================================== */

.writingSection {
    position: relative;
    background: var(--paper);
    color: var(--ink);
}

.writingSection h2 {
    font-family: var(--serif);
    font-size: 46px;
    line-height: 1.12;
    font-weight: 400;
    letter-spacing: 0.2px;
    text-transform: none;
}

.writingIntro {
    max-width: 780px;
    margin: 0 auto;
    font-size: 17px;
    line-height: 1.85;
    color: var(--muted);
}

.writingCarouselRow {
    margin-top: 58px;
}


/* ==================================================
   BOOK CAROUSEL FRAME + SIDE ARROWS
================================================== */

.bookCarouselFrame {
    position: relative;
    padding: 0 58px;
}

.bookCarousel {
    position: relative;
}

.bookArrow {
    position: absolute;
    top: 32%;
    z-index: 30;
    width: 44px;
    height: 44px;
    padding: 0;
    border: 1px solid rgba(37,33,29,0.26);
    border-radius: 50%;
    background: rgba(247,241,232,0.76);
    color: var(--ink);
    font-size: 28px;
    line-height: 42px;
    text-align: center;
    cursor: pointer;
    transition:
        background 0.25s ease,
        color 0.25s ease,
        border-color 0.25s ease,
        transform 0.25s ease,
        opacity 0.25s ease;
}

.bookArrow:hover,
.bookArrow:focus {
    background: var(--ink);
    color: #ffffff;
    border-color: var(--ink);
    outline: none;
}

.bookArrowPrev {
    left: 0;
}

.bookArrowNext {
    right: 0;
}

.bookArrowPrev:hover {
    transform: translateX(-3px);
}

.bookArrowNext:hover {
    transform: translateX(3px);
}

.bookArrow i {
    display: block;
    line-height: 42px;
}


/* ==================================================
   BOOK SLIDES — TIGHTER TITLES + REFLECTION
================================================== */

.bookSlide {
    padding: 0 14px;
    text-align: center;
}

.bookCoverLink {
    display: block;
    position: relative;
    background: #111111;
    overflow: hidden;

    /*
       This controls the distance between the cover/reflection
       and the title block below.
    */
    margin-bottom: 22px;

    /*
       Reflection is applied to the link wrapper, not the image.
       This avoids the image being clipped by its own parent.
       Works in Chrome, Safari, and Edge.
    */
    -webkit-box-reflect:
        below 6px
        linear-gradient(
            to bottom,
            rgba(255,255,255,0.12) 0%,
            rgba(255,255,255,0.06) 18%,
            rgba(255,255,255,0.02) 38%,
            rgba(255,255,255,0) 68%
        );
}

.bookCover {
    display: block;
    width: 100%;
    height: auto;
    -webkit-box-reflect: unset;
    transition:
        transform 0.45s ease,
        filter 0.45s ease,
        opacity 0.45s ease;
}

.bookCoverLink:hover .bookCover {
    transform: scale(1.025);
    filter: brightness(0.86);
}


/* ==================================================
   BOOK CAPTIONS
================================================== */

.bookCaption {
    padding: 0 8px 0;
}

.bookMeta {
    margin: 0 0 8px;
    font-family: var(--sans);
    font-size: 9px;
    line-height: 1.4;
    letter-spacing: 2.2px;
    text-transform: uppercase;
    color: var(--muted);
}

.bookCaption h3 {
    margin: 0 0 7px;
    font-family: var(--sans);
    font-size: 15px;
    line-height: 1.35;
    font-weight: 500;
    letter-spacing: 2px;
    text-transform: uppercase;
    color: var(--ink);
}

.bookCaption p {
    margin: 0 auto;
    max-width: 240px;
    font-size: 13px;
    line-height: 1.55;
    color: var(--muted);
}


/* ==================================================
   OWL CAROUSEL — REFLECTION SPACE + PAGINATION
================================================== */

/*
   Owl Carousel clips content with overflow rules.
   This gives the reflected image room below the cover.
*/
#owl-books .owl-wrapper-outer {
    padding-bottom: 26px;
    margin-bottom: -18px;
}

/* Hide Owl's built-in bottom arrow controls */
#owl-books .owl-buttons {
    display: none !important;
    visibility: hidden !important;
}

/* Keep pagination circles */
#owl-books .owl-pagination {
    display: block !important;
    margin-top: 28px;
    text-align: center;
}

#owl-books .owl-page {
    display: inline-block;
    zoom: 1;
}

#owl-books .owl-page span {
    display: block;
    width: 8px;
    height: 8px;
    margin: 5px 6px;
    border-radius: 50%;
    background: rgba(37,33,29,0.24);
    transition:
        background 0.25s ease,
        transform 0.25s ease,
        opacity 0.25s ease;
}

#owl-books .owl-page.active span {
    background: var(--ink);
    transform: scale(1.18);
}

#owl-books .owl-page:hover span {
    background: rgba(37,33,29,0.46);
}


/* ==================================================
   WRITING / BOOKS — RESPONSIVE
================================================== */

@media (max-width: 991px) {
    .writingCarouselRow {
        margin-top: 46px;
    }

    .bookCarouselFrame {
        padding: 0 50px;
    }

    .bookSlide {
        padding: 0 13px;
    }

    .bookArrow {
        top: 30%;
        width: 40px;
        height: 40px;
        font-size: 25px;
        line-height: 38px;
    }

    .bookArrow i {
        line-height: 38px;
    }

    .bookCoverLink {
        margin-bottom: 20px;
    }

    #owl-books .owl-wrapper-outer {
        padding-bottom: 24px;
        margin-bottom: -16px;
    }
}

@media (max-width: 767px) {
    .writingSection h2 {
        font-size: 34px;
        line-height: 1.14;
    }

    .writingCarouselRow {
        margin-top: 38px;
    }

    .bookCarouselFrame {
        padding: 0 38px;
    }

    .bookSlide {
        padding: 0 10px;
    }

    .bookCoverLink {
        margin-bottom: 18px;

        -webkit-box-reflect:
            below 5px
            linear-gradient(
                to bottom,
                rgba(255,255,255,0.10) 0%,
                rgba(255,255,255,0.05) 18%,
                rgba(255,255,255,0.015) 38%,
                rgba(255,255,255,0) 68%
            );
    }

    #owl-books .owl-wrapper-outer {
        padding-bottom: 22px;
        margin-bottom: -14px;
    }

    .bookArrow {
        top: 29%;
        width: 36px;
        height: 36px;
        font-size: 23px;
        line-height: 34px;
        background: rgba(247,241,232,0.88);
    }

    .bookArrow i {
        line-height: 34px;
    }

    .bookCaption {
        padding-top: 0;
    }

    .bookMeta {
        font-size: 8px;
        letter-spacing: 2px;
    }

    .bookCaption h3 {
        font-size: 14px;
        letter-spacing: 1.7px;
    }

    .bookCaption p {
        font-size: 13px;
        line-height: 1.5;
    }

    #owl-books .owl-pagination {
        margin-top: 24px;
    }
}

@media (max-width: 479px) {
    .bookCarouselFrame {
        padding: 0 36px;
    }

    .bookArrow {
        top: 28%;
        width: 32px;
        height: 32px;
        font-size: 21px;
        line-height: 30px;
    }

    .bookArrow i {
        line-height: 30px;
    }

    .bookCoverLink {
        margin-bottom: 16px;
    }
}

/* ==================================================
   BOOK CAPTION ALIGNMENT
================================================== */

.bookCaption {
    padding: 0 8px 0;
    min-height: 178px;
    display: flex;
    flex-direction: column;
    align-items: center;
}

/* Category / status line */
.bookMeta {
    min-height: 22px;
    margin: 0 0 8px;
    font-family: var(--sans);
    font-size: 9px;
    line-height: 1.4;
    letter-spacing: 2.2px;
    text-transform: uppercase;
    color: var(--muted);
}

/* Title block — this is the main alignment fix */
.bookCaption h3 {
    min-height: 45px;
    margin: 0 0 10px;
    display: flex;
    align-items: flex-start;
    justify-content: center;

    font-family: var(--sans);
    font-size: 15px;
    line-height: 1.35;
    font-weight: 500;
    letter-spacing: 2px;
    text-transform: uppercase;
    color: var(--ink);
}

/* Description always begins after the title block */
.bookCaption p {
    margin: 0 auto;
    max-width: 240px;
    font-size: 13px;
    line-height: 1.55;
    color: var(--muted);
}

/* ==================================================
   WRITING / BOOKS — REDUCED MOTION
================================================== */

@media (prefers-reduced-motion: reduce) {
    .bookArrow,
    .bookCover,
    #owl-books .owl-page span {
        transition: none !important;
        transform: none !important;
    }

    .bookCoverLink:hover .bookCover {
        transform: none !important;
        filter: none !important;
    }
}

/* ==================================================
   PRESS / BROADCAST / APPEARANCES — EDITORIAL
================================================== */

.pressSection {
    position: relative;
    background:
        radial-gradient(circle at top center, rgba(255,255,255,0.045), transparent 36%),
        linear-gradient(180deg, #151515 0%, #101010 100%);
    color: #ffffff;
    overflow: hidden;
}

.pressSection::before {
    content: "";
    position: absolute;
    inset: 0;
    background-image:
        linear-gradient(rgba(255,255,255,0.018) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255,255,255,0.012) 1px, transparent 1px);
    background-size: 40px 40px;
    opacity: 0.22;
    pointer-events: none;
}

.pressSection .container {
    position: relative;
    z-index: 2;
}


/* ==================================================
   PRESS — INTRO / HEADING
================================================== */

.pressKicker {
    color: var(--gold) !important;
}


.pressEditorialTitle {
    max-width: 1100px;
    margin: 0 auto 28px !important;
    font-family: var(--serif) !important;
    font-size: 48px !important;
    line-height: 1.08 !important;
    font-weight: 400 !important;
    letter-spacing: 0.3px !important;
    text-transform: none !important;
    color: rgba(246,241,232,0.94) !important;
}

.pressIntro {
    max-width: 880px;
    margin: 0 auto;
    font-size: 17px;
    line-height: 1.9;
    color: rgba(255,255,255,0.62);
}

.pressEditorialGrid {
    margin-top: 72px;
}


/* ==================================================
   PRESS — CARDS
================================================== */

.pressEditorialCard {
    min-height: 500px;
    background:
        linear-gradient(180deg, rgba(255,255,255,0.055), rgba(255,255,255,0.025));
    border: 1px solid rgba(185,149,98,0.28);
    box-shadow: 0 24px 70px rgba(0,0,0,0.28);
    overflow: hidden;
    transition:
        transform 0.35s ease,
        border-color 0.35s ease,
        box-shadow 0.35s ease;
}

.pressEditorialCard:hover {
    transform: translateY(-6px);
    border-color: rgba(185,149,98,0.48);
    box-shadow: 0 32px 90px rgba(0,0,0,0.42);
}


/* ==================================================
   PRESS — IMAGE TOPS / NO OVERLAY
================================================== */

.pressCardImage {
    position: relative;
    height: 150px;
    background-color: #0d0d0d;
    overflow: hidden;
}

.pressCardImage img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center center;
    filter: grayscale(10%) contrast(1.03) brightness(0.94);
    transform: scale(1.01);
    transition:
        transform 0.45s ease,
        filter 0.45s ease,
        opacity 0.45s ease;
}

.pressEditorialCard:hover .pressCardImage img {
    transform: scale(1.045);
    filter: grayscale(0%) contrast(1.04) brightness(1);
}

/* No dark overlay on press images */
.pressCardImage::after {
    display: none;
}

/* Optional image-position refinements */
.pressCardImage img[src*="john-mulholland-cspan"] {
    object-position: center 42%;
}

.pressCardImage img[src*="cooper"],
.pressCardImage img[src*="hemingway"] {
    object-position: center center;
}

.pressCardImage img[src*="public-television"],
.pressCardImage img[src*="pbs"],
.pressCardImage img[src*="apt"] {
    object-position: center center;
}

.pressCardImage img[src*="festival"],
.pressCardImage img[src*="forums"],
.pressCardImage img[src*="kennedy"] {
    object-position: center center;
}


/* ==================================================
   PRESS — CRITICS' PICK SEAL
================================================== */

.pressSeal {
    position: absolute;
    top: 28px;
    left: 50%;
    z-index: 3;
    width: 74px;
    height: 74px;
    margin-left: -37px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: rgba(185,149,98,0.92);
    color: #171717;
    font-family: var(--serif);
    font-size: 14px;
    line-height: 1.05;
    font-style: italic;
    text-align: center;
    box-shadow: 0 0 0 6px rgba(185,149,98,0.16);
}


/* ==================================================
   PRESS — CARD CONTENT
================================================== */

.pressCardInner {
    padding: 38px 28px 40px;
    text-align: center;
}

.pressMeta {
    margin: 0 0 16px !important;
    font-family: var(--sans);
    font-size: 10px !important;
    line-height: 1.4 !important;
    letter-spacing: 3px;
    text-transform: uppercase;
    color: var(--gold) !important;
}

.pressCardRule {
    width: 46px;
    height: 1px;
    margin: 0 auto 28px;
    background: rgba(185,149,98,0.70);
}

.pressEditorialCard h3 {
    margin: 0 0 26px;
    font-family: var(--serif);
    font-size: 32px;
    line-height: 1.16;
    font-weight: 400;
    letter-spacing: 0.2px;
    text-transform: none;
    color: rgba(246,241,232,0.94);
}

.pressCardText {
    margin: 0 auto !important;
    max-width: 240px !important;
    font-size: 15px !important;
    line-height: 1.7 !important;
    color: rgba(255,255,255,0.60) !important;
}

.pressCardItalic {
    font-family: var(--serif);
    font-style: italic;
    font-size: 18px !important;
    line-height: 1.55 !important;
    color: rgba(246,241,232,0.78) !important;
}


/* ==================================================
   PRESS — RESPONSIVE
================================================== */

@media (max-width: 991px) {
    .pressEditorialTitle {
        font-size: 42px !important;
    }

    .pressEditorialCard {
        margin-bottom: 30px;
        min-height: 470px;
    }

    .pressEditorialGrid {
        margin-top: 58px;
    }
}

@media (max-width: 767px) {
    .pressEditorialTitle {
        font-size: 34px !important;
        line-height: 1.12 !important;
    }

    .pressIntro {
        font-size: 15px;
        line-height: 1.8;
    }

    .pressEditorialGrid {
        margin-top: 46px;
    }

    .pressCardImage {
        height: auto;
        min-height: 0;
        aspect-ratio: auto;
        background-color: #0d0d0d;
        overflow: visible;
    }

    .pressCardImage img {
        display: block;
        width: 100%;
        height: auto;
        max-height: none;
        object-fit: contain;
        object-position: center center;
        transform: none;
    }

    .pressEditorialCard:hover .pressCardImage img {
        transform: none;
    }

    .pressEditorialCard {
        min-height: auto;
        margin-bottom: 28px;
    }

    .pressEditorialCard h3 {
        font-size: 29px;
    }

    .pressCardInner {
        padding: 32px 24px 36px;
    }

    .pressSeal {
        top: 34px;
    }
}


/* ==================================================
   PRESS — REDUCED MOTION
================================================== */

@media (prefers-reduced-motion: reduce) {
    .pressEditorialCard,
    .pressCardImage img {
        transition: none !important;
        transform: none !important;
    }

    .pressEditorialCard:hover,
    .pressEditorialCard:hover .pressCardImage img {
        transform: none !important;
    }
}

/* ==================================================
   11. VOICES ACROSS FILM HISTORY — JARALLAX
================================================== */

.voicesParallaxSection {
    position: relative;
    min-height: 680px;
    padding: 130px 0 120px;
    background-color: #171717;
    overflow: hidden;
    color: #ffffff;
    z-index: 1;
}

.voicesParallaxSection.jarallax {
    position: relative;
    z-index: 0;
}

.voicesParallaxSection .jarallax-img {
    position: absolute;
    object-fit: cover;
    font-family: "object-fit: cover;";
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: -100;
}

.voicesParallaxSection .jarallax-container {
    z-index: -100 !important;
}

.voicesParallaxSection .jarallax-container img {
    z-index: -100 !important;
}

.voicesOverlay {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    background:
        linear-gradient(
            rgba(12, 10, 9, 0.42),
            rgba(12, 10, 9, 0.60)
        );
    z-index: 1;
    pointer-events: none;
}

.voicesContent {
    position: relative;
    z-index: 20;
}

.voicesContent * {
    position: relative;
    z-index: 21;
    visibility: visible;
}

.voicesKicker {
    margin: 0 0 18px;
    font-family: "Raleway", Arial, sans-serif;
    font-size: 11px;
    font-weight: 500;
    letter-spacing: 4px;
    text-transform: uppercase;
    color: rgba(255,255,255,0.52) !important;
}

.voicesParallaxSection h2 {
    margin: 0 0 28px;
    font-family: Garamond, "EB Garamond", Georgia, serif;
    font-size: 35px;
    line-height: 1.08;
    font-weight: 400;
    letter-spacing: 0.5px;
    text-transform: none;
    color: rgba(246,241,232,0.94);
}

.voicesNameCloud {
    margin: 46px auto 0;
    max-width: 1040px;
    font-family: "Raleway", Arial, sans-serif;
    font-size: 13px;
    line-height: 2.25;
    letter-spacing: 2px;
    text-transform: uppercase;
    color: rgba(255,255,255,0.88) !important;
}

.voicesNameCloud span {
    display: inline-block;
    padding: 0 10px;
    color: var(--gold-soft);
}


/* ==================================================
   12. VOICES — FOUR IMAGE ROW
================================================== */

.voicesImageRow {
    position: relative;
    z-index: 22;
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 22px;
    margin: 54px auto 0;
    max-width: 1120px;
}

.voicesFigure {
    margin: 0;
    text-align: center;
}

.voicesFigure img {
    display: block;
    width: 100%;
    aspect-ratio: 16 / 9;
    object-fit: cover;
    object-position: center center;
    border: 1px solid rgba(255,255,255,0.22);
  
    transition:
        transform 0.35s ease,
        filter 0.35s ease,
        opacity 0.35s ease,
        border-color 0.35s ease;
}

.voicesFigure:hover img {
    transform: translateY(-4px);
    filter: grayscale(20%) contrast(1.02) brightness(0.94);
    opacity: 1;
    border-color: rgba(185,149,98,0.62);
}

.voicesFigure figcaption {
    display: block;
    margin-top: 14px;
    font-family: "Raleway", Arial, sans-serif;
    font-size: 10px;
    line-height: 1.4;
    letter-spacing: 2.2px;
    text-transform: uppercase;
    color: rgba(255,255,255,0.62);
}


/* ==================================================
   13. VOICES — SAFE SCROLL FADE / SUBTLE ENTRY
================================================== */

.voicesFade {
    opacity: 1;
    transform: translateY(0);
}

.voicesParallaxSection.voicesRevealReady .voicesFade {
    opacity: 0;
    transform: translateY(26px);
    transition:
        opacity 0.95s ease,
        transform 0.95s ease;
    will-change: opacity, transform;
}

.voicesParallaxSection.voicesRevealReady.voicesInView .voicesFade {
    opacity: 1;
    transform: translateY(0);
}

.voicesParallaxSection.voicesInView .voicesDelay1 { transition-delay: 0.08s; }
.voicesParallaxSection.voicesInView .voicesDelay2 { transition-delay: 0.20s; }
.voicesParallaxSection.voicesInView .voicesDelay3 { transition-delay: 0.34s; }
.voicesParallaxSection.voicesInView .voicesDelay4 { transition-delay: 0.50s; }


/* ==================================================
   EARLY WORK — EDITORIAL PORTFOLIO SPREAD
   Self-contained grid, no Bootstrap columns
================================================== */

.earlyEditorialSection {
    position: relative;
    padding: 90px 0 96px;
    color: #2b2722;
    overflow: hidden;
    background-color: #f3ede2;
    background-image: url("img/backgrounds/early-work-bg.webp");
    background-size: cover;
    background-position: left center;
    background-repeat: no-repeat;
}

.earlyEditorialSection::before {
    content: "";
    position: absolute;
    inset: 0;
    background:
        linear-gradient(
            90deg,
            rgba(243,237,226,0.18) 0%,
            rgba(243,237,226,0.34) 42%,
            rgba(243,237,226,0.62) 100%
        ),
        radial-gradient(circle at 20% 30%, rgba(255,255,255,0.28), transparent 36%),
        linear-gradient(180deg, rgba(255,255,255,0.10), rgba(43,39,34,0.04));
    pointer-events: none;
}

.earlyEditorialSection .container {
    position: relative;
    z-index: 2;
}


/* ==================================================
   MAIN EDITORIAL LAYOUT
================================================== */

.earlyEditorialLayout {
    display: grid;
    grid-template-columns: minmax(340px, 0.82fr) minmax(660px, 1.18fr);
    gap: 56px;
    align-items: start;
}


/* ==================================================
   LEFT EDITORIAL TEXT
================================================== */

.earlyEditorialTextCol {
    min-width: 0;
}

.earlyEditorialText {
    width: 100%;
    padding-top: 4px;
}

.earlyEditorialKicker {
    margin: 0 0 18px;
    font-family: var(--sans);
    font-size: 10px;
    line-height: 1.4;
    font-weight: 500;
    letter-spacing: 4px;
    text-transform: uppercase;
    color: rgba(43,39,34,0.78);
}

.earlyEditorialKicker::after {
    content: "";
    display: block;
    width: 112px;
    height: 1px;
    margin: 12px 0 0;
    background: rgba(170,131,79,0.82);
}

.earlyEditorialTitle {
    margin: 0 0 24px;
    font-family: "Bodoni Moda", Didot, "Bodoni 72", Garamond, Georgia, serif;
    font-size: 88px;
    line-height: .92 !important;
    font-weight: 400;
    letter-spacing: -0.6px;
    text-transform: uppercase;
    color: #1f1c18;

    display: inline-block;
    transform: scaleY(1.56);
    transform-origin: left center;
}

.earlyEditorialSubhead {
    font-family: var(--sans);
    font-size: 13px;
    line-height: 1.5;
    font-weight: 500;
    letter-spacing: 5px;
    text-transform: uppercase;
    color: #a57a42;
}

.earlyEditorialBody p {
    margin: 0 0 30px !important;
    max-width: 520px;
    font-size: 16px;
    line-height: 1.49;
    color: rgba(43,39,34,0.82);
}

.earlyEditorialDivider {
    width: 86%;
    max-width: 320px;
    height: 1px;
    margin: 30px 0 28px;
    background: rgba(170,131,79,0.42);
    position: relative;
}

.earlyEditorialDivider::after {
    content: "✦";
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -54%);
    padding: 0 12px;
    color: rgba(170,131,79,0.82);
    font-size: 12px;
    line-height: 1;
}

.earlyEditorialQuote {
    margin: 0;
    max-width: 440px;
    padding-left: 0;
    border-left: none;
}

.earlyEditorialQuote p {
    margin: 0 0 14px;
    font-family: var(--serif);
    font-size: 19px;
    line-height: 1.55;
    font-style: italic;
    color: rgba(126,95,58,0.92);
}

.earlyEditorialQuote footer {
    font-family: var(--sans);
    font-size: 12px;
    line-height: 1.5;
    letter-spacing: 0.4px;
    color: rgba(43,39,34,0.62);
}


/* ==================================================
   RIGHT IMAGE PLATE — TWO STACKS
================================================== */

.earlyEditorialMediaCol {
    min-width: 0;
}

.earlyEditorialPlate {
    width: 100%;
    display: grid;
    grid-template-columns: 0.93fr 1.04fr;
    gap: 24px;
    align-items: start;
}

.earlyPlateStack {
    display: flex;
    flex-direction: column;
    gap: 25px;
    min-width: 0;
}

.earlyPlateStackLeft,
.earlyPlateStackRight {
    width: 100%;
    min-width: 0;
}

.earlyPlateLowerPair {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 18px;
    align-items: start;
    min-width: 0;
}


/* ==================================================
   IMAGE CARDS
================================================== */

.earlyPlateItem {
    position: relative;
    margin: 0;
    background: #111111;
    border: 1px solid rgba(43,39,34,0.16);
    box-shadow:
        0 14px 28px rgba(43,39,34,0.12),
        0 1px 0 rgba(255,255,255,0.55) inset;
    overflow: hidden;
    transition:
        transform 0.28s ease,
        box-shadow 0.28s ease;
}

.earlyPlateItem:hover {
    transform: translateY(-2px);
    box-shadow:
        0 18px 36px rgba(43,39,34,0.16),
        0 1px 0 rgba(255,255,255,0.55) inset;
}

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


/* ==================================================
   IMAGE RATIOS
================================================== */

.earlyPlateTime {
    aspect-ratio: 2 / 3;
}

.earlyPlateGaslight {
    aspect-ratio: 16 / 9;
    margin-top: 3px;
}

.earlyPlateComposers {
    aspect-ratio: 1230 / 1245;
}

.earlyPlateMacbeth,
.earlyPlateVanGogh {
    aspect-ratio: 9 / 16;
}

.earlyPlateTime img,
.earlyPlateGaslight img,
.earlyPlateComposers img,
.earlyPlateMacbeth img,
.earlyPlateVanGogh img {
    object-position: center center;
}


/* ==================================================
   RESPONSIVE
================================================== */

@media (max-width: 1199px) {
    .earlyEditorialLayout {
        grid-template-columns: minmax(320px, 0.78fr) minmax(590px, 1.22fr);
        gap: 42px;
    }

    .earlyEditorialTitle {
        font-size: 76px;
        line-height: 0.84;
        transform: scaleY(1.14);
    }

    .earlyEditorialPlate {
        grid-template-columns: 0.96fr 1.04fr;
        gap: 20px;
    }

    .earlyPlateStack {
        gap: 16px;
    }

    .earlyPlateLowerPair {
        gap: 16px;
    }
}

@media (max-width: 991px) {
    .earlyEditorialLayout {
        grid-template-columns: 1fr;
        gap: 48px;
    }

    .earlyEditorialText {
        text-align: center;
    }

    .earlyEditorialKicker {
        text-align: center;
    }

    .earlyEditorialKicker::after {
        margin-left: auto;
        margin-right: auto;
    }

    .earlyEditorialTitle {
        font-size: 64px;
        line-height: 0.86;
        transform-origin: center center;
    }

    .earlyEditorialBody p,
    .earlyEditorialQuote,
    .earlyEditorialDivider {
        max-width: 720px;
        margin-left: auto;
        margin-right: auto;
    }

    .earlyEditorialPlate {
        max-width: 860px;
        margin: 0 auto;
        grid-template-columns: 0.96fr 1.04fr;
        gap: 22px;
    }
}

@media (max-width: 767px) {
    .earlyEditorialSection {
        padding: 72px 0 78px;
    }

    .earlyEditorialTitle {
        font-size: 46px;
        line-height: 0.92;
        letter-spacing: -0.2px;
        transform: scaleY(1.08);
    }

    .earlyEditorialSubhead {
        font-size: 11px;
        letter-spacing: 4px;
    }

    .earlyEditorialBody p {
        font-size: 15px;
        line-height: 1.75;
    }

    .earlyEditorialQuote p {
        font-size: 17px;
    }

    .earlyEditorialPlate {
        grid-template-columns: 1fr;
        max-width: 560px;
        gap: 18px;
    }

    .earlyPlateLowerPair {
        grid-template-columns: 1fr 1fr;
        gap: 16px;
    }
}

@media (max-width: 520px) {
    .earlyEditorialTitle {
        font-size: 40px;
        line-height: 0.94;
    }

    .earlyEditorialPlate {
        max-width: 320px;
    }

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


/* ==================================================
   REDUCED MOTION
================================================== */

@media (prefers-reduced-motion: reduce) {
    .earlyPlateItem,
    .earlyPlateItem:hover {
        transition: none !important;
        transform: none !important;
    }

    .earlyEditorialTitle {
        transform: none !important;
    }
}

/* ==================================================
   15. SELF-HOSTED MP4 TRAILER POPUP
================================================== */

.trailerPopup {
    position: relative;
    width: min(78vw, 860px);
    margin: 60px auto;
    background: #000000;
    box-shadow: 0 28px 80px rgba(0,0,0,0.65);
}

.trailerVideo {
    display: block;
    width: 100%;
    height: auto;
    max-height: 70vh;
    background: #000000;
}


/* ==================================================
   16. MAGNIFIC POPUP FADE
================================================== */

.mfp-fade.mfp-bg {
    opacity: 0;
    transition: opacity 0.26s ease-out;
}

.mfp-fade.mfp-bg.mfp-ready {
    opacity: 0.88;
}

.mfp-fade.mfp-bg.mfp-removing {
    opacity: 0;
}

.mfp-fade.mfp-wrap .mfp-content {
    opacity: 0;
    transform: translateY(18px);
    transition:
        opacity 0.26s ease-out,
        transform 0.26s ease-out;
}

.mfp-fade.mfp-wrap.mfp-ready .mfp-content {
    opacity: 1;
    transform: translateY(0);
}

.mfp-fade.mfp-wrap.mfp-removing .mfp-content {
    opacity: 0;
    transform: translateY(18px);
}


/* ==================================================
   17. MAGNIFIC CLOSE BUTTON
================================================== */

.mfp-close {
    position: fixed !important;
    top: 24px !important;
    right: 30px !important;
    width: 44px !important;
    height: 44px !important;
    line-height: 44px !important;
    font-size: 38px !important;
    font-family: Arial, sans-serif !important;
    font-weight: 300 !important;
    color: #ffffff !important;
    opacity: 0.9 !important;
    text-align: center !important;
    z-index: 99999 !important;
    cursor: pointer !important;
}

.mfp-close:hover {
    opacity: 1 !important;
    color: #ffffff !important;
}


/* ==================================================
   18. SCROLL REVEAL / SECTION MOVEMENT
================================================== */

.reveal-section {
    opacity: 0;
    transform: translateY(42px);
    transition:
        opacity 0.95s ease,
        transform 0.95s ease;
    will-change: opacity, transform;
}

.reveal-section.is-visible {
    opacity: 1;
    transform: translateY(0);
}

.reveal-item {
    opacity: 0;
    transform: translateY(24px);
    transition:
        opacity 0.85s ease,
        transform 0.85s ease;
    will-change: opacity, transform;
}

.reveal-section.is-visible .reveal-item {
    opacity: 1;
    transform: translateY(0);
}

.reveal-section.is-visible .reveal-item:nth-child(1) { transition-delay: 0.08s; }
.reveal-section.is-visible .reveal-item:nth-child(2) { transition-delay: 0.18s; }
.reveal-section.is-visible .reveal-item:nth-child(3) { transition-delay: 0.28s; }
.reveal-section.is-visible .reveal-item:nth-child(4) { transition-delay: 0.38s; }
.reveal-section.is-visible .reveal-item:nth-child(5) { transition-delay: 0.48s; }
.reveal-section.is-visible .reveal-item:nth-child(6) { transition-delay: 0.58s; }

#about.reveal-section {
    transform: translateY(30px);
}

#about.reveal-section.is-visible {
    transform: translateY(0);
}


/* ==================================================
   19. RESPONSIVE
================================================== */

@media (max-width: 991px) {
    .siteNav {
        padding: 14px 24px;
        background: rgba(15,15,15,0.88);
    }

    .siteMenu > li > a {
        font-size: 9px;
        letter-spacing: 1.5px;
    }

    .heroTitle {
        font-size: 48px;
        letter-spacing: 6px;
    }

    .heroText {
        font-size: 17px;
    }

    .filmGrid {
        margin-top: 44px;
    }

    .filmCardBody {
        padding: 24px 22px 26px;
    }

    .pressEditorialTitle {
        font-size: 34px !important;
    }

    .pressEditorialCard {
        margin-bottom: 30px;
    }

    .voicesParallaxSection {
        min-height: auto;
        padding: 110px 22px 100px;
    }

    .voicesParallaxSection h2 {
        font-size: 35px;
        line-height: 1.12;
    }

    .voicesImageRow {
        grid-template-columns: repeat(2, 1fr);
        gap: 18px;
        max-width: 760px;
    }
}

@media (max-width: 767px) {
    .siteNav {
        padding: 10px 18px;
    }

    .navbar-collapse {
        background: rgba(15,15,15,0.96);
        border: none;
        box-shadow: none;
    }

    .siteMenu > li > a {
        padding-top: 14px;
        padding-bottom: 14px;
        text-align: center;
    }

    .heroSection {
        min-height: 100vh;
        overflow: hidden;
    }

    .heroSlide,
    .heroSlide.is-active,
    .heroSlide.kenburns-left.is-active,
    .heroSlide.kenburns-right.is-active,
    .heroSlide.kenburns-center.is-active {
        background-size: cover !important;
        transform: scale(1.06) !important;
        transition: opacity 1.4s ease-in-out !important;
        will-change: opacity;
    }

    .heroSlide:not(.is-active) {
        opacity: 0;
    }

    .heroSlide.is-active {
        opacity: 1;
    }

    .heroSlideJohn,
    .heroSlideJohn.is-active,
    .heroSlideJohn.kenburns-left.is-active,
    .heroSlideJohn.kenburns-right.is-active,
    .heroSlideJohn.kenburns-center.is-active {
        background-position: 65% 50% !important;
    }

    .heroSlideHighNoon,
    .heroSlideHighNoon.is-active,
    .heroSlideHighNoon.kenburns-left.is-active,
    .heroSlideHighNoon.kenburns-right.is-active,
    .heroSlideHighNoon.kenburns-center.is-active {
        background-position: 0% 50% !important;
    }

    .heroSlideElmore,
    .heroSlideElmore.is-active,
    .heroSlideElmore.kenburns-left.is-active,
    .heroSlideElmore.kenburns-right.is-active,
    .heroSlideElmore.kenburns-center.is-active {
        background-position: 10% 50% !important;
    }

    .heroInner {
        min-height: 100vh;
        padding: 118px 22px 72px;
        display: flex;
        align-items: center;
    }

    .heroKicker {
        margin: 0 auto 22px;
        max-width: 320px;
        font-size: 9px;
        line-height: 1.7;
        letter-spacing: 3px;
        text-align: center;
    }

    .heroTitle {
        margin: 0 auto;
        max-width: 330px;
        font-size: 34px;
        line-height: 1.18;
        font-weight: 300;
        letter-spacing: 6px !important;
        text-align: center;
        white-space: normal;
    }

    .heroRule {
        height: 54px;
        margin: 26px auto;
    }

    .heroText {
        margin: 0 auto;
        max-width: 315px;
        font-size: 14px;
        line-height: 1.7;
        text-align: center;
    }

    .heroButton {
        margin-top: 32px;
        padding: 12px 28px;
        font-size: 10px;
        letter-spacing: 2.6px;
    }

    .siteSection {
        padding: 78px 22px;
    }

    .siteSection h2 {
        font-size: 29px;
        letter-spacing: 2px;
    }

    .siteSection p,
    .aboutPreviewText,
    .filmsIntro,
    .writingIntro,
    .pressIntro {
        font-size: 15px;
        line-height: 1.8;
    }

    .filmGrid {
        margin-top: 36px;
    }

    .filmCardWrap {
        margin-bottom: 26px;
    }

    .filmCardBody h3 {
        font-size: 19px;
    }

    .filmActions {
        display: block;
    }

    .filmLink {
        display: block;
        margin-top: 9px;
        text-align: center;
    }

    .quoteParallaxSection {
        min-height: auto;
        padding: 86px 22px;
    }

    .quoteParallaxSection .jarallax-img {
        object-fit: cover !important;
        font-family: "object-fit: cover;" !important;
    }

    .pullQuote p {
        font-size: 21px;
        line-height: 1.55;
        letter-spacing: 0.2px;
    }

    .pullQuote footer {
        margin-top: 22px;
        font-size: 9px;
        letter-spacing: 2.2px;
    }

    .pressEditorialTitle {
        font-size: 34px !important;
        line-height: 1.12 !important;
    }

    .pressEditorialGrid {
        margin-top: 46px;
    }

    .pressEditorialCard {
        min-height: auto;
    }

    .pressEditorialCard h3 {
        font-size: 29px;
    }

    .pressCardInner {
        padding: 32px 24px 36px;
    }

    .voicesParallaxSection {
        min-height: auto;
        padding: 88px 22px;
    }

    .voicesParallaxSection h2 {
        font-size: 29px;
        line-height: 1.12;
        letter-spacing: 0.2px;
    }

    .voicesNameCloud {
        font-size: 12px;
        line-height: 2.1;
        letter-spacing: 1.5px;
    }

    .voicesNameCloud span {
        padding: 0 6px;
    }

    .voicesImageRow {
        grid-template-columns: 1fr;
        gap: 18px;
        margin-top: 38px;
        max-width: 520px;
    }

    .voicesFigure figcaption {
        font-size: 9px;
        letter-spacing: 1.8px;
    }

    .trailerPopup {
        width: 92vw;
        margin: 70px auto 24px;
    }

    .trailerVideo {
        max-height: 62vh;
    }

    .mfp-close {
        top: 18px !important;
        right: 18px !important;
        font-size: 34px !important;
    }
}


@media (max-width: 420px) {
    .heroTitle {
        max-width: 295px;
        font-size: 31px;
        letter-spacing: 5px !important;
    }

    .heroText {
        max-width: 285px;
    }
}

/* ==================================================
   21. EDITORIAL TYPOGRAPHY PASS
   Judicious Garamond / strong sans-serif utility hierarchy
================================================== */

.editorialPage {
    font-family: var(--body);
}

.editorialPage .siteBrand,
.editorialPage .siteMenu > li > a,
.editorialPage .sectionKicker,
.editorialPage .heroKicker,
.editorialPage .heroButton,
.editorialPage .sectionButton,
.editorialPage .filmMeta,
.editorialPage .filmCardBody h3,
.editorialPage .filmSubheading,
.editorialPage .filmLink,
.editorialPage .bookMeta,
.editorialPage .bookCaption h3,
.editorialPage .pressMeta,
.editorialPage .voicesKicker,
.editorialPage .voicesNameCloud,
.editorialPage .voicesFigure figcaption,
.editorialPage .pullQuote footer {
    font-family: var(--sans);
}

.editorialPage .siteSection h2 {
    margin: 0 0 24px;
    font-family: var(--serif);
    margin-top: 15px;
    font-size: 42px;
    line-height: 1.12;
    font-weight: 400;
    letter-spacing: 0.3px;
    text-transform: none;
    color: inherit;
}

.editorialPage .sectionKicker {
    font-size: 16px;
    font-weight: 500;
    letter-spacing: 4px;
    text-transform: uppercase;
}

.editorialPage .sectionKicker::after {
    content: "";
    display: block;
    width: 42px;
    height: 1px;
    margin: 18px auto 0;
    background: rgba(185,149,98,0.58);
}

.editorialPage .heroTitle {
    font-family: var(--sans);
    letter-spacing: 8px;
    text-transform: uppercase;
}

.editorialPage .aboutPreview h2 {
    font-family: var(--serif);
    font-size: 37px !important;
    line-height: 1.12;
    font-weight: 300;
    letter-spacing: 0.2px;
    text-transform: none;
}

.editorialPage .aboutPreviewText {
    max-width: 820px;
    margin: 0 auto 24px;
    font-size: 16px;
    line-height: 1.45;
}

.editorialPage .aboutPreviewText strong {
    font-family: var(--sans);
    font-size: 0.92em;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.08em;
}

.editorialPage .filmsSection h2,
.editorialPage .writingSection h2 {
    font-family: var(--serif);
    font-size: 36px;
    line-height: 1.1;
    font-weight: 400;
    letter-spacing: 0.1px;
    text-transform: none;
}

.editorialPage .filmCardBody h3,
.editorialPage .bookCaption h3 {
    text-transform: uppercase;
}

.editorialPage .pullQuote p {
    font-family: var(--serif);
    font-size: 27px;
    line-height: 1.42;
    font-weight: 400;
    letter-spacing: 0.2px;
}

.editorialPage .pressEditorialTitle {
    max-width: 1100px;
    margin: 0 auto 28px !important;
    font-family: var(--serif) !important;
    font-size: 38px !important;
    line-height: 1.08 !important;
    font-weight: 400 !important;
    letter-spacing: 0.3px !important;
    text-transform: none !important;
}

.editorialPage .pressEditorialCard h3 {
    font-family: var(--serif);
    font-size: 26px;
    line-height: 1.16;
    font-weight: 400;
    letter-spacing: 0.2px;
    text-transform: none;
}

.editorialPage .voicesParallaxSection h2 {
    font-family: var(--serif);
    font-size: 36px;
    line-height: 1.1;
    font-weight: 400;
    letter-spacing: 0.2px;
    text-transform: none;
}

.editorialPage .voicesNameCloud {
    font-family: var(--sans);
    font-size: 13px;
    line-height: 2.25;
    letter-spacing: 2px;
    text-transform: uppercase;
}

@media (max-width: 991px) {
    .editorialPage .siteSection h2,
    .editorialPage .filmsSection h2,
    .editorialPage .writingSection h2,
    .editorialPage .voicesParallaxSection h2 {
        font-size: 38px;
    }

    .editorialPage .aboutPreview h2,
    .editorialPage .pressEditorialTitle {
        font-size: 40px !important;
    }
}

@media (max-width: 767px) {
    .editorialPage .siteSection h2,
    .editorialPage .filmsSection h2,
    .editorialPage .writingSection h2,
    .editorialPage .voicesParallaxSection h2 {
        font-size: 31px;
        line-height: 1.14;
        letter-spacing: 0.2px;
    }

    .editorialPage .aboutPreview h2,
    .editorialPage .pressEditorialTitle {
        font-size: 34px !important;
        line-height: 1.12 !important;
    }

    .editorialPage .pullQuote p {
        font-size: 22px;
        line-height: 1.55;
    }
}


/* ==================================================
   20. REDUCED MOTION
================================================== */

@media (prefers-reduced-motion: reduce) {
    .heroKicker,
    .heroTitle,
    .heroRule,
    .heroText,
    .heroButton,
    .reveal-section,
    .reveal-item,
    .filmCard,
    .filmPoster,
    .trailerPlay,
    .bookCover,
    .quoteFade,
    .voicesFade,
    .voicesFigure img,
    .mfp-fade.mfp-bg,
    .mfp-fade.mfp-wrap .mfp-content {
        opacity: 1 !important;
        transform: none !important;
        animation: none !important;
        transition: none !important;
    }
}
/* ==================================================
   CONTACT — THREE COLUMN EDITORIAL LAYOUT
================================================== */

.contactSection {
    position: relative;
    padding: 76px 0 82px;
    background: var(--paper);
    color: var(--ink);
    overflow: hidden;
}

.contactWideContainer {
    width: 100%;
    max-width: 1420px;
    margin: 0 auto;
    padding-left: 36px;
    padding-right: 36px;
}

.contactThreeColumnWrap {
    display: grid;
    grid-template-columns: minmax(380px, 1.05fr) minmax(280px, 0.72fr) minmax(320px, 360px);
    gap: 42px;
    align-items: start;
}

/* COLUMN 1 — INTRO */

.contactIntro {
    position: relative;
    padding-top: 8px;
}

.contactKicker {
    margin: 0 0 26px;
    text-align: left;
}

.contactTitle {
    margin: 0 0 20px;
    font-family: var(--serif) !important;
    font-size: 44px !important;
    line-height: 1.04 !important;
    font-weight: 400 !important;
    letter-spacing: 0 !important;
    text-transform: none !important;
    color: var(--ink);
}

.contactLead {
    max-width: 460px !important;
    margin: 0 !important;
    font-family: var(--serif);
    font-size: 20px !important;
    line-height: 1.46 !important;
    font-weight: 400;
    color: rgba(37,33,29,0.66) !important;
}

.contactRule {
    width: 56px;
    height: 1px;
    margin: 32px 0 26px;
    background: rgba(185,149,98,0.68);
}

.contactBodyText {
    max-width: 470px !important;
    margin: 0 0 20px !important;
    font-size: 14px !important;
    line-height: 1.78 !important;
    color: rgba(37,33,29,0.58) !important;
}

.contactNote {
    max-width: 460px !important;
    margin: 0 !important;
    padding-top: 18px;
    border-top: 1px solid rgba(37,33,29,0.12);
    font-size: 13px !important;
    line-height: 1.7 !important;
    color: rgba(37,33,29,0.48) !important;
}

/* COLUMN 2 — LINKS */

.contactLinksColumn {
    padding-top: 0px;
}

.contactLinksHeading {
    margin: 0 0 40px !important;
    max-width: none !important;
    font-family: var(--sans);
    font-size: 17px !important;
    line-height: 1.4 !important;
    font-weight: 600;
    letter-spacing: 3px;
    text-transform: uppercase;
    color: rgba(37,33,29,0.52) !important;
}

.contactLinkList {
    border-top: 1px solid rgba(37,33,29,0.12);
}

.contactLinkItem {
    display: block;
    padding: 13px 0;
    border-bottom: 1px solid rgba(37,33,29,0.12);
    color: inherit;
    transition:
        padding-left 0.22s ease,
        color 0.22s ease;
}

.contactLinkItem:hover {
    padding-left: 7px;
    color: var(--ink);
}

.contactLinkItem span {
    display: block;
    margin-bottom: 4px;
    font-family: var(--sans);
    font-size: 9.5px;
    line-height: 1.4;
    font-weight: 600;
    letter-spacing: 2.5px;
    text-transform: uppercase;
    color: rgba(37,33,29,0.72);
}

.contactLinkItem em {
    display: block;
    font-style: normal;
    font-size: 12.5px;
    line-height: 1.45;
    color: rgba(37,33,29,0.56);
}
/* ==================================================
   CONTACT — FOLLOW THE WORK SOCIAL ICONS
================================================== */

.contactFollowBlock {
    margin-top: 34px;
    padding-top: 24px;
    border-top: 1px solid rgba(37,33,29,0.12);
}

.contactFollowHeading {
    margin: 0 0 16px !important;
    max-width: none !important;
    font-family: var(--sans);
    font-size: 10px !important;
    line-height: 1.4 !important;
    font-weight: 600;
    letter-spacing: 3px;
    text-transform: uppercase;
    color: rgba(37,33,29,0.52) !important;
}

.contactSocialIcons {
    display: flex;
    align-items: center;
    gap: 12px;
}

.contactSocialIcons a {
    width: 38px;
    height: 38px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1px solid rgba(185,149,98,0.42);
    border-radius: 50%;
    color: rgba(37,33,29,0.62);
    font-size: 15px;
    transition:
        background 0.25s ease,
        color 0.25s ease,
        border-color 0.25s ease,
        transform 0.25s ease;
}

.contactSocialIcons a:hover {
    transform: translateY(-2px);
    background: var(--ink);
    border-color: var(--ink);
    color: #ffffff;
}
.footerSocial .footerIconImg {
    display: block;
    width: 14px;
    height: 14px;
    object-fit: contain;
    opacity: 0.66;
    filter: grayscale(1) brightness(1.75);
}

.footerSocial a:hover .footerIconImg,
.footerSocial a:focus .footerIconImg {
    opacity: 1;
    filter: grayscale(1) brightness(2.1);
}

.footerSocial .footerIconWikipedia {
    width: 18px;
    height: 18px;
}

.footerSocial .footerIconImdb {
    width: 17px;
    height: 17px;
}

@media (max-width: 991px) {
    .contactSocialIcons {
        justify-content: center;
    }
}

/* ==================================================
   GLOBAL FOOTER SOCIAL IMAGE ICONS
   For custom PNG/SVG icons such as IMDb and Wikipedia.
================================================== */

.footerSocial a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.footerSocialImg {
    display: block;
    width: 20px;
    height: 20px;
    object-fit: contain;
    opacity: 0.9;
    filter: none;
    transition: opacity 0.22s ease, transform 0.22s ease;
}

.footerSocial a:hover .footerSocialImg,
.footerSocial a:focus .footerSocialImg {
    opacity: 1;
    transform: scale(1.04);
}

.footerSocialImdb {
    width: 28px;
    height: auto;
}

.footerSocialWikipedia {
    width: 23px;
    height: auto;
}

/* ==================================================
   CONTACT — FORM FRAME / INTERNAL HEADER
================================================== */

.contactFormFrame {
    position: relative;
    width: 100%;
    max-width: 360px;
    margin-left: auto;
    padding: 22px 22px 24px;
    border: 1px solid rgba(185,149,98,0.30);
    background: rgba(247,241,232,0.28);
}

.contactFormFrame::before {
    content: "";
    position: absolute;
    inset: 12px;
    border: 1px solid rgba(37,33,29,0.06);
    pointer-events: none;
    z-index: 1;
}

.contactFormFrame > * {
    position: relative;
    z-index: 2;
}

.contactFormIntro {
    max-width: 300px;
    padding-top: 12px;
    text-align: center;
}

.contactFormKicker {
    margin: 0 0 10px !important;
    max-width: none !important;
    font-family: var(--sans);
    font-size: 9px !important;
    line-height: 1.4 !important;
    font-weight: 600;
    letter-spacing: 3px;
    text-transform: uppercase;
    color: rgba(37,33,29,0.46) !important;
}

.contactFormIntro h3 {
    margin: 0 0 10px;
    font-family: var(--serif);
    font-size: 29px;
    line-height: 1.12;
    font-weight: 400;
    color: var(--ink);
}

.contactFormIntro p {
    margin: 0 auto !important;
    max-width: 285px !important;
    font-size: 12.5px !important;
    line-height: 1.65 !important;
    color: rgba(37,33,29,0.52) !important;
}

.contactFormDivider {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    width: 185px;
    margin: 18px auto 0;
    color: rgba(185,149,98,0.70);
}

.contactFormDivider span {
    display: block;
    width: 64px;
    height: 1px;
    background: rgba(185,149,98,0.52);
}

.contactFormDivider i {
    font-size: 8px;
    line-height: 1;
}

/* live form container */
.contactInlineFormPlaceholder {
    min-height: 400px;
}

/* tighten third-party form spacing if possible */
.contactInlineFormPlaceholder form {
    margin-top: 0 !important;
}

/* Prevent third-party form overflow */
.contactFormFrame iframe,
.contactFormFrame form,
.contactFormFrame > div {
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
}

.contactFormFrame * {
    max-width: 100% !important;
    box-sizing: border-box;
}
/* ==================================================
   CONTACT — RESPONSIVE
================================================== */

@media (max-width: 1199px) {
    .contactThreeColumnWrap {
        grid-template-columns: minmax(330px, 1fr) minmax(250px, 0.72fr) minmax(300px, 340px);
        gap: 32px;
    }

    .contactTitle {
        font-size: 40px !important;
    }

    .contactLead {
        font-size: 19px !important;
    }

    .contactLinksColumn {
        padding-top: 66px;
    }
}

@media (max-width: 991px) {
    .contactSection {
        padding: 70px 0 78px;
    }

    .contactWideContainer {
        max-width: 760px;
        padding-left: 24px;
        padding-right: 24px;
    }

    .contactThreeColumnWrap {
        grid-template-columns: 1fr;
        gap: 36px;
    }

    .contactIntro,
    .contactLinksColumn,
    .contactFormPanel {
        max-width: 560px;
        width: 100%;
        margin: 0 auto;
    }

    .contactIntro {
        text-align: center;
    }

    .contactKicker {
        text-align: center;
    }

    .contactLead,
    .contactBodyText,
    .contactNote {
        margin-left: auto !important;
        margin-right: auto !important;
    }

    .contactRule {
        margin-left: auto;
        margin-right: auto;
    }

    .contactLinksColumn {
        padding-top: 0;
    }

    .contactFormPanel {
        max-width: 430px;
    }

    .contactFormFrame {
        margin-left: auto;
        margin-right: auto;
    }
}

@media (max-width: 767px) {
    .contactSection {
        padding: 58px 0 64px;
    }

    .contactWideContainer {
        padding-left: 18px;
        padding-right: 18px;
    }

    .contactTitle {
        font-size: 38px !important;
    }

    .contactLead {
        font-size: 20px !important;
        line-height: 1.42 !important;
    }

    .contactFormFrame {
        padding: 10px;
    }

    .contactFormFrame::before {
        inset: 8px;
    }

    .contactInlineFormPlaceholder {
        min-height: 500px;
    }
}
/* ==================================================
   FOOTER — EDITORIAL
================================================== */

.siteFooter {
    position: relative;
    padding: 46px 0 36px;
    background: #181614;
    color: rgba(247,241,232,0.78);
    border-top: 1px solid rgba(185,149,98,0.22);
}

.footerWideContainer {
    width: 100%;
    max-width: 1480px;
    margin: 0 auto;
    padding-left: 36px;
    padding-right: 36px;
}

.footerInner {
    display: grid;
    grid-template-columns: minmax(260px, 0.8fr) minmax(420px, 1.2fr) auto;
    gap: 42px;
    align-items: center;
    padding-bottom: 30px;
    border-bottom: 1px solid rgba(247,241,232,0.12);
}

.footerBrand {
    display: inline-block;
    margin: 0 0 8px;
    font-family: var(--serif);
    font-size: 28px;
    line-height: 1.1;
    font-weight: 400;
    color: rgba(247,241,232,0.94);
}

.footerBrand:hover,
.footerBrand:focus {
    color: #ffffff;
}

.footerBrandBlock p {
    margin: 0 !important;
    max-width: none !important;
    font-family: var(--sans);
    font-size: 9px !important;
    line-height: 1.6 !important;
    font-weight: 500;
    letter-spacing: 2.6px;
    text-transform: uppercase;
    color: rgba(247,241,232,0.42) !important;
}

.footerNav {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 14px 22px;
}

.footerNav a {
    font-family: var(--sans);
    font-size: 9px;
    line-height: 1.4;
    font-weight: 600;
    letter-spacing: 2.3px;
    text-transform: uppercase;
    color: rgba(247,241,232,0.56);
    transition: color 0.22s ease;
}

.footerNav a:hover,
.footerNav a:focus {
    color: rgba(247,241,232,0.96);
}

.footerSocial {
    display: flex;
    justify-content: flex-end;
    gap: 10px;
}

.footerSocial a {
    width: 34px;
    height: 34px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1px solid rgba(185,149,98,0.34);
    border-radius: 50%;
    color: rgba(247,241,232,0.62);
    font-size: 14px;
    transition:
        background 0.25s ease,
        color 0.25s ease,
        border-color 0.25s ease,
        transform 0.25s ease;
}

.footerSocial a:hover,
.footerSocial a:focus {
    transform: translateY(-2px);
    background: rgba(185,149,98,0.92);
    border-color: rgba(185,149,98,0.92);
    color: #181614;
}

.footerBottom {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 24px;
    padding-top: 24px;
}

.footerBottom p {
    margin: 0 !important;
    max-width: none !important;
    font-size: 12px !important;
    line-height: 1.6 !important;
    color: rgba(247,241,232,0.38) !important;
}

.footerCredit {
    display: inline-block;
    margin-left: 12px;
    padding-left: 12px;
    border-left: 1px solid rgba(247,241,232,0.16);
    font-family: var(--sans);
    font-size: 10px;
    line-height: 1.6;
    font-weight: 500;
    letter-spacing: 1.8px;
    text-transform: uppercase;
    color: rgba(247,241,232,0.34);
}

.footerCredit a {
    color: rgba(247,241,232,0.52);
}

.footerCredit a:hover,
.footerCredit a:focus {
    color: rgba(247,241,232,0.92);
}

.footerTopLink {
    font-family: var(--sans);
    font-size: 9px;
    line-height: 1.4;
    font-weight: 600;
    letter-spacing: 2.3px;
    text-transform: uppercase;
    color: rgba(247,241,232,0.48);
    transition: color 0.22s ease;
}

.footerTopLink:hover,
.footerTopLink:focus {
    color: rgba(247,241,232,0.92);
}

/* ==================================================
   FOOTER — RESPONSIVE
================================================== */

@media (max-width: 991px) {
    .footerInner {
        grid-template-columns: 1fr;
        gap: 26px;
        text-align: center;
    }

    .footerNav {
        justify-content: center;
    }

    .footerSocial {
        justify-content: center;
    }

    .footerBottom {
        flex-direction: column;
        text-align: center;
        gap: 12px;
    }

    .footerCredit {
        display: block;
        margin: 6px 0 0;
        padding-left: 0;
        border-left: none;
    }
}

@media (max-width: 767px) {
    .siteFooter {
        padding: 40px 0 32px;
    }

    .footerWideContainer {
        padding-left: 22px;
        padding-right: 22px;
    }

    .footerBrand {
        font-size: 26px;
    }

    .footerNav {
        gap: 12px 18px;
    }
}
/* ==================================================
   MOBILE — EARLY WORK QUOTE LINE HEIGHT
================================================== */

@media (max-width: 767px) {
    #early-work-quote .pullQuote p,
    #early-work-quote .earlyWorkQuote p,
    .earlyWorkQuote p {
        font-size: 28px !important;
        line-height: 1.0 !important;
        letter-spacing: 0.1px !important;
    }
}

@media (max-width: 479px) {
    #early-work-quote .pullQuote p,
    #early-work-quote .earlyWorkQuote p,
    .earlyWorkQuote p {
        font-size: 26px !important;
        line-height: 1.26 !important;
    }
}
/* ==================================================
   ABOUT — MOBILE TITLE / ROLE LINE FIX
================================================== */

@media (max-width: 767px) {
    .aboutTitle {
        max-width: 320px;
        margin: 0 auto 16px !important;
        font-size: 36px !important;
        line-height: 1.12 !important;
        letter-spacing: 0 !important;
        text-align: center;
    }

    .aboutRoleLine {
        max-width: 310px !important;
        margin: 0 auto 30px !important;
        font-size: 10px !important;
        line-height: 1.8 !important;
        letter-spacing: 2.4px !important;
        text-align: center;
        white-space: normal;
    }
}

@media (max-width: 479px) {
    .aboutTitle {
        max-width: 300px;
        font-size: 34px !important;
        line-height: 1.12 !important;
    }

    .aboutRoleLine {
        max-width: 280px !important;
        font-size: 9px !important;
        line-height: 1.75 !important;
        letter-spacing: 2px !important;
    }
}