/* 45 SOUTH — Shared site shell */

/* Public header */

#siteHeader.south-header {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    width: 100%;
    height: auto;
    min-height: 125px;
    z-index: 100;

    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 30px;

    padding: 26px 5% 18px;
    background: transparent;
    transition: background .3s ease;
}

#siteHeader.south-header.scrolled {
    background: linear-gradient(
        to bottom,
        rgba(0,0,0,.34),
        transparent
    );
}

#siteHeader .south-logo {
    display: inline-flex;
    flex-shrink: 0;
    align-items: center;
}

#siteHeader .south-logo img {
    display: block;
    width: auto;
    height: 62px;
    max-width: 280px;
    max-height: none;
    object-fit: contain;
    transform: translateY(17px);
}

#siteHeader .header-actions {
    display: flex;
    align-items: center;
    margin-left: auto;
}

#siteHeader .south-nav {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    flex-wrap: wrap;
    gap: clamp(16px, 2.7vw, 42px);
}

#siteHeader .south-nav a,
#siteHeader .south-nav button {
    display: inline-flex;
    align-items: center;
    padding: 7px 0;
    border: 0;
    border-radius: 0;
    background: transparent;

    color: #eee;
    font: 500 12px/1.4 Arial, Helvetica, sans-serif;
    letter-spacing: .09em;
    text-decoration: none;
    cursor: pointer;

    transition: opacity .25s ease, transform .25s ease;
}

#siteHeader .south-nav a:hover,
#siteHeader .south-nav button:hover {
    opacity: .65;
    transform: translateY(-2px);
}

/* Unified editorial footer */

.south-common-footer {
    position: relative;
    display: block;
    min-height: 0;
    padding: 0;
    border: 0;
    background: #111112;
    color: #f6f4ef;
}

.south-common-footer .footer-v2-inner {
    width: min(90%, 1600px);
    margin: auto;
}

.south-common-footer .footer-v2-heading {
    padding: 125px 0 145px;
}

.south-common-footer .footer-v2-heading h2 {
    margin: 30px 0 48px;
    color: #f1f0ed;
    font-family: Arial, Helvetica, sans-serif;
    font-size: clamp(3.5rem, 8vw, 10rem);
    font-weight: 700;
    line-height: 1.02;
    letter-spacing: -.075em;
}

.south-common-footer .footer-v2-heading h2 em {
    font-family: Georgia, serif;
    font-weight: 400;
    letter-spacing: -.065em;
}

.south-common-footer .footer-contact {
    display: inline-flex;
    justify-content: space-between;
    align-items: center;
    gap: 60px;
    padding: 12px 0;
    border: 0;
    border-bottom: 1px solid rgba(255,255,255,.8);
    background: transparent;

    color: #fff;
    font: 700 12px Arial, Helvetica, sans-serif;
    letter-spacing: .15em;
    cursor: pointer;
}

.south-common-footer .footer-contact span {
    font-size: 23px;
    font-weight: 400;
}

.south-common-footer .footer-v2-bottom {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 35px;
    padding: 25px 0;
    border-top: 1px solid rgba(255,255,255,.18);
}

.south-common-footer .footer-v2-bottom .logo img {
    display: block;
    width: auto;
    height: 42px;
    max-width: 190px;
    object-fit: contain;
}

.south-common-footer .footer-v2-links {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 28px;
}

.south-common-footer .footer-v2-links a,
.south-common-footer .footer-v2-links button {
    padding: 0;
    border: 0;
    background: none;
    color: #ddd;
    font: 700 12px Arial, Helvetica, sans-serif;
    letter-spacing: .13em;
    text-decoration: none;
    cursor: pointer;
}

.south-common-footer .footer-v2-links a:hover,
.south-common-footer .footer-v2-links button:hover {
    color: #007db9;
}

.south-common-footer .footer-v2-legal {
    display: flex;
    justify-content: space-between;
    gap: 20px;
    padding: 24px 0 36px;
    border-top: 1px solid rgba(255,255,255,.12);
    color: #858585;
    font-size: 9px;
    letter-spacing: .13em;
}

/* Shared contact modal */

.south-contact-dialog {
    position: fixed;
    width: min(540px, 94vw);
    max-width: 94vw;
    max-height: 92vh;
    padding: 38px;
    border: 1px solid #444;
    border-radius: 0;
    background: #171717;
    color: #fff;
    overflow: auto;
    box-sizing: border-box;
}

.south-contact-dialog::backdrop {
    background: rgba(0,0,0,.8);
}

.south-contact-dialog h2 {
    margin: 0 0 30px;
    color: #fff;
    font-size: clamp(35px, 4vw, 65px);
    line-height: 1.15;
    letter-spacing: -.05em;
}

.south-contact-close {
    position: absolute;
    top: 10px;
    right: 15px;
    border: 0;
    background: transparent;
    color: #fff;
    font-size: 28px;
    cursor: pointer;
}

.south-contact-dialog form {
    display: grid;
    gap: 15px;
}

.south-contact-dialog form label {
    color: #bbb;
    font-size: 12px;
    letter-spacing: .02em;
}

.south-contact-dialog form input,
.south-contact-dialog form textarea {
    display: block;
    width: 100%;
    margin-top: 6px;
    padding: 13px;
    border: 1px solid #555;
    border-radius: 0;
    background: #242424;
    color: #fff;
    box-sizing: border-box;
}

.south-contact-dialog form textarea {
    min-height: 125px;
    resize: vertical;
}

.south-contact-dialog form input:focus-visible,
.south-contact-dialog form textarea:focus-visible {
    outline: 2px solid #a8c8eb;
    outline-offset: 2px;
}

.south-contact-submit {
    padding: 15px;
    border: 0;
    background: #fff;
    color: #111;
    font-weight: 700;
    cursor: pointer;
}

.south-contact-submit:disabled {
    opacity: .5;
}

.south-contact-dialog .trap {
    position: absolute;
    left: -10000px;
}

.south-contact-dialog #formStatus {
    min-height: 24px;
    margin: 0;
    color: #ddd;
    font-size: 13px;
}

@media (max-width: 700px) {
    #siteHeader.south-header {
        min-height: 90px;
        padding: 18px 4% 12px;
        gap: 12px;
    }

    #siteHeader .south-logo img {
        height: 48px;
        max-width: 140px;
    }

    #siteHeader .south-nav {
        gap: 12px;
    }

    #siteHeader .south-nav a,
    #siteHeader .south-nav button {
        font-size: 10px;
        letter-spacing: .03em;
    }

    .south-common-footer .footer-v2-inner {
        width: 88%;
    }

    .south-common-footer .footer-v2-heading {
        padding: 90px 0;
    }

    .south-common-footer .footer-v2-heading h2 {
        font-size: clamp(3rem, 11vw, 5rem);
    }

    .south-common-footer .footer-v2-bottom {
        align-items: flex-start;
        flex-direction: column;
    }

    .south-common-footer .footer-v2-links {
        gap: 22px;
    }

    .south-common-footer .footer-v2-legal {
        flex-direction: column;
    }

    .south-contact-dialog {
        padding: 34px 20px;
    }
}

@media (prefers-reduced-motion: reduce) {
    #siteHeader .south-nav a,
    #siteHeader .south-nav button {
        transition: none;
    }
}

/* Shared narrow-screen footer: avoid horizontal text overflow. */
@media(max-width:420px) {
    .south-common-footer .footer-v2-heading h2 {font-size:clamp(28px,9.2vw,40px)}
}

/* STEP 79 - Mobile shell: stable navigation and usable contact fields. */
@media(max-width:700px){
 #siteHeader.south-header{min-height:90px;align-items:center;column-gap:12px;padding:12px 5% 8px}
 #siteHeader .south-logo img{height:38px;max-width:140px;transform:none}
 #siteHeader .south-nav :is(a,button){min-height:44px;justify-content:center}
 .south-contact-dialog{width:calc(100vw - 24px);max-width:calc(100vw - 24px);max-height:calc(100vh - 24px);max-height:calc(100dvh - 24px);padding:38px 20px 24px;overscroll-behavior:contain;scroll-padding-block:20px}
 .south-contact-dialog form :is(input,textarea){min-width:0;font-size:16px;line-height:1.4}
 .south-contact-dialog .south-contact-close{display:grid;place-items:center;top:4px;right:4px;width:44px;height:44px;padding:0}
 .south-common-footer .footer-v2-links :is(a,button){min-height:44px}
 .portfolio-toolbar input{font-size:16px;min-width:0;min-height:44px}
 .category-filters a{display:inline-flex;align-items:center;min-height:44px}
 .south-film-page58 .film-countries58 a{min-height:44px}
}
@media(max-width:540px){
 #siteHeader.south-header{min-height:0;flex-direction:column;align-items:flex-start;gap:4px;padding-top:10px;padding-bottom:6px}
 #siteHeader .south-logo img{height:32px;max-width:140px}
 #siteHeader .header-actions{width:100%;margin-left:0}
 #siteHeader .south-nav{width:100%;flex-wrap:nowrap;justify-content:space-between;gap:6px}
 #siteHeader .south-nav :is(a,button){font-size:10.5px;line-height:1.25;letter-spacing:-.025em;white-space:nowrap;flex-shrink:0}
}
@media(hover:none) and (pointer:coarse){
 #siteHeader .south-nav :is(a,button):hover{transform:none;opacity:1}
}

/* STEP 80 - Progressive header shading on every viewport. */
#siteHeader.south-header,#siteHeader.south-header.scrolled{background:transparent;isolation:isolate}
#siteHeader.south-header::before{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;background:linear-gradient(to bottom,rgba(0,0,0,.78),rgba(0,0,0,.32) 60%,transparent);opacity:var(--header-shade80,0);transition:opacity .1s linear}
@media(max-width:700px){
 #siteHeader.south-header{min-height:0;height:auto;flex-direction:row;flex-wrap:nowrap;align-items:flex-start;gap:16px;padding:12px 5%;transition:transform .28s ease;will-change:transform}
 #siteHeader.south-header.south-header-hidden80{transform:translateY(calc(-100% - 2px))}
 #siteHeader .south-logo img{height:38px;max-width:140px;transform:none}
 #siteHeader .header-actions{width:auto;margin-left:auto;flex:0 0 auto}
 #siteHeader .south-nav{width:auto;display:flex;flex-direction:column;align-items:flex-end;justify-content:flex-start;flex-wrap:nowrap;gap:0}
 #siteHeader .south-nav :is(a,button){font-size:11px;line-height:1.25;min-height:28px;padding:4px 0;letter-spacing:-.025em;white-space:nowrap;justify-content:flex-end}
 body.south-catalogue76 .page-hero{padding-top:152px;padding-bottom:4px}
 body.south-catalogue76 .page-hero .eyebrow{font-size:9.5px;line-height:1.5;letter-spacing:.14em;margin-bottom:10px}
 body.south-catalogue76 .page-hero h1{margin-top:10px;margin-bottom:6px}
 body.south-catalogue76 .portfolio-section{padding-top:2px}
 body.south-catalogue76 .category-filters{gap:0 14px;padding-bottom:8px}
 body.south-catalogue76 .category-filters a{font-size:9.5px;letter-spacing:.08em;min-height:32px}
 body.south-catalogue76 .portfolio-toolbar{padding:8px 0 14px;gap:12px}
 body.south-film-page58 .south-film-intro{padding-top:152px;margin-top:0;transform:none}
 main .south-project-index56{padding-top:152px}
 .south-share36__icons [data-share-url]{width:auto;padding:0 18px;gap:10px}
}
@media(prefers-reduced-motion:reduce){#siteHeader.south-header,#siteHeader.south-header::before{transition:none}}

/* STEP 82 - Mobile disclosure navigation; desktop navigation remains inline. */
#siteHeader .south-menu-toggle82{display:none}
@media(max-width:700px){
 #siteHeader .header-actions{position:relative;align-items:flex-end;flex-direction:column}
 #siteHeader.south-menu-ready82 .south-menu-toggle82{display:inline-flex;align-items:center;justify-content:flex-end;gap:9px;min-height:44px;padding:0;border:0;background:none;color:#eee;font:600 11px/1.25 Arial,Helvetica,sans-serif;cursor:pointer}
 #siteHeader .south-menu-toggle82 svg{display:block;width:19px;height:19px;fill:none;stroke:currentColor;stroke-width:1.6}
 #siteHeader .south-menu-toggle82:focus-visible{outline:2px solid #007db9;outline-offset:4px}
 #siteHeader.south-menu-ready82 .south-nav{position:absolute;top:calc(100% + 8px);right:0;min-width:170px;padding:10px 18px;background:rgba(16,16,17,.97);border:1px solid #ffffff20;border-radius:4px;opacity:0;visibility:hidden;pointer-events:none;transform:translateY(-8px);transition:opacity .2s ease,transform .2s ease,visibility .2s}
 #siteHeader.south-menu-ready82.south-menu-open82 .south-nav{opacity:1;visibility:visible;pointer-events:auto;transform:translateY(0)}
 #siteHeader.south-menu-ready82 .south-nav :is(a,button){width:100%;min-height:44px}
}
@media(prefers-reduced-motion:reduce){#siteHeader.south-menu-ready82 .south-nav{transition:none}}

/* STEP 83 - Mobile map link and a frameless, softly shaded menu. */
#siteHeader .south-nav .south-map-link83{display:none}
@media(max-width:700px){
 #siteHeader .south-nav .south-map-link83{display:inline-flex}
 #siteHeader .south-logo img{height:41.8px;max-width:154px;transform:translateY(10px)}
 #siteHeader.south-menu-ready82 .south-nav{min-width:0;width:max-content;max-width:calc(100vw - 32px);padding:10px 0;background:none;border:0;border-radius:0;isolation:isolate}
 #siteHeader.south-menu-ready82 .south-nav::before{content:"";position:absolute;inset:-20px -5vw -24px -80px;z-index:-1;pointer-events:none;background:radial-gradient(ellipse at right center,rgba(8,8,10,.98) 0%,rgba(8,8,10,.95) 40%,rgba(8,8,10,.75) 65%,transparent 100%);filter:blur(10px)}
}

/* STEP 84 - Expand a black mobile header and reserve its height in the document. */
.south-menu-spacer84{height:0;overflow:hidden;pointer-events:none;transition:height .28s ease}
body.south-menu-shifting84{overflow-anchor:none}
@media(max-width:700px){
 body .story-stage{top:var(--menu-offset84,0px);transition:top .28s ease}
 #siteHeader .south-menu-toggle82{margin-top:10px}
 #siteHeader.south-header.south-menu-open82{background:#080808}
 #siteHeader.south-menu-ready82 .south-nav{position:static;top:auto;right:auto;min-width:0;width:max-content;max-width:100%;max-height:0;overflow:hidden;padding:0;margin-top:0;border:0;border-radius:0;background:none;opacity:0;visibility:hidden;transform:none;transition:max-height .28s ease,padding .28s ease,margin-top .28s ease,opacity .2s ease,visibility .2s}
 #siteHeader.south-menu-ready82 .south-nav::before{display:none}
 #siteHeader.south-menu-ready82.south-menu-open82 .south-nav{max-height:var(--menu-links-height84,220px);padding:8px 0 6px;margin-top:8px;opacity:1;visibility:visible;transform:none}
 #siteHeader.south-menu-ready82 .south-nav :is(a,button){min-height:30px;padding:4px 0}
}
@media(prefers-reduced-motion:reduce){.south-menu-spacer84,#siteHeader.south-menu-ready82 .south-nav,body .story-stage{transition:none}}

/* STEP 85 - No inherited flex gaps; all five links fit inside the open header. */
@media(max-width:700px){
 #siteHeader .header-actions{gap:0}
 #siteHeader.south-menu-ready82 .south-nav{gap:0;row-gap:0;column-gap:0}
 #siteHeader.south-menu-ready82.south-menu-open82 .south-nav{padding:4px 0 6px;margin-top:4px}
 #siteHeader.south-header.south-menu-open82{background:#101011;padding-bottom:38px}
}

/* STEP 86 - One solid black menu area, without the scrolling shade layered over it. */
@media(max-width:700px){
 #siteHeader.south-header.south-menu-open82{background:#080808}
 #siteHeader.south-header.south-menu-open82::before{opacity:0}
}