/* ===================================================================
   Courtney Lewis - site-wide ycArt refinements (ALL pages)
   Load right AFTER responsive.css and BEFORE any page stylesheet.

   1. Type: futura-pt everywhere (page titles, credits, footer)
   2. Full-screen menu: 7 items, smaller and less crowded
   3. Footer credits
   4. Page banners: the conductor's head is never cut off
====================================================================== */


/* -------------------------------------------------------------------
   1. Type
---------------------------------------------------------------------- */
.alt-font,
h1, h2, h3, h4, h5, h6 {
    font-family: futura-pt, sans-serif;
}

/* every page is dark now; the theme's white body showed behind the
   (white) logo wherever a banner starts below the logo bar */
body { background-color: #0d0c0b; }


/* -------------------------------------------------------------------
   2. Full-screen menu
---------------------------------------------------------------------- */
.full-width-pull-menu .link-style-2 ul li a {
    font-size: 34px;
    line-height: 58px;
    letter-spacing: .12em;
}
.full-width-pull-menu .link-style-2 .margin-fifteen-top { margin-top: 9%; }

/* hover: the item glides a little to the right */
.full-width-pull-menu .link-style-2 ul li a {
    display: inline-block;
    transform: translate3d(0, 0, 0);
    transition: transform .55s cubic-bezier(.22, .61, .36, 1), color .35s ease !important;
    will-change: transform;
}
.full-width-pull-menu .link-style-2 ul li a:hover,
.full-width-pull-menu .link-style-2 ul li a:focus-visible {
    transform: translate3d(12px, 0, 0);
}
@media (hover: none) {               /* touch screens: no hover state left behind after a tap... */
    .full-width-pull-menu .link-style-2 ul li a:hover { transform: none; }
}
/* ...instead the same glide plays when an item is tapped (js/hamburger-menu.js
   waits a moment before opening the page, so the movement is seen) */
.full-width-pull-menu .link-style-2 ul li a.is-tapped,
.full-width-pull-menu .link-style-2 ul li a.is-tapped:hover {
    transform: translate3d(12px, 0, 0);
    color: var(--base-color, #d1e3e3);
}
@media (prefers-reduced-motion: reduce) {
    .full-width-pull-menu .link-style-2 ul li a { transition: color .35s ease !important; }
    .full-width-pull-menu .link-style-2 ul li a:hover { transform: none; }
}

/* menu credits (left half of the menu) */
.full-width-pull-menu .menu-wrap .text-extra-small.alt-font {
    font-size: 13.5px;
    line-height: 1.45;
    letter-spacing: .02em;
}

@media (max-width: 1199px) {
    .full-width-pull-menu .link-style-2 ul li a { font-size: 30px; line-height: 52px; }
}
@media (max-width: 767px) {
    .full-width-pull-menu .link-style-2 ul li a { font-size: 31px; line-height: 56px; letter-spacing: .14em; }
    .full-width-pull-menu .link-style-2 .margin-fifteen-top { margin-top: 28px; }
}
/* short screens (landscape phones, small laptops): keep all 7 items in view */
@media (max-height: 640px) {
    .full-width-pull-menu .link-style-2 ul li a { font-size: 27px; line-height: 44px; }
    .full-width-pull-menu .link-style-2 .margin-fifteen-top { margin-top: 14px; }
}


/* -------------------------------------------------------------------
   3. Footer credits
---------------------------------------------------------------------- */
footer .alt-font {
    font-size: 13.5px;
    line-height: 1.5;
    letter-spacing: .02em;
}
footer .site-credits__line { display: block; }
footer .site-credits__line + .site-credits__line { margin-top: 2px; }
footer .site-credits a { white-space: nowrap; }
@media (max-width: 991px) {
    footer .site-copy { margin-bottom: 12px; }
}


/* -------------------------------------------------------------------
   4. Page banners  
---------------------------------------------------------------------- */
.page-banner.one-third-screen {
    height: min(56.25vw, 90vh) !important;
    min-height: 420px;
    background-color: #0d0c0b;
    background-size: cover !important;
    background-position: var(--focus, 50% 40%) !important;
}
.page-banner h1,
.page-banner h2 {
    font-family: futura-pt, sans-serif !important;
    font-weight: 400 !important;
    letter-spacing: .14em;
    color: rgba(236, 233, 229, .82) !important;   /* all banners are dark photos now */
    text-shadow: 0 1px 18px rgba(0, 0, 0, .5);
}
/* banner titles are <h1> (for SEO) but keep the old <h2> size at every breakpoint */
.page-banner h1 { font-size: 55px; line-height: 60px; }
@media (max-width: 1199px) { .page-banner h1 { font-size: 70px; line-height: 75px; } }
@media (max-width: 991px)  { .page-banner h1 { font-size: 53px; line-height: 58px; } }
@media (max-width: 767px)  { .page-banner h1 { font-size: 40px; line-height: 46px; } }
@media (max-width: 991px) {
    .page-banner.one-third-screen { min-height: 340px; }
}
/* phones: the photo starts under the logo bar, so the logo never sits on his head */
@media (max-width: 767px) {
    .page-banner.one-third-screen {
        margin-top: 70px;
        height: 62vw !important;
        min-height: 230px;
    }
}

/* "--fit": the whole photo, uncropped, on every screen (Watch page).
   Height follows the photo's own 16:9 shape at any width. */
.page-banner.page-banner--fit.one-third-screen,
.page-banner.page-banner--fit.one-third-screen[class] {
    height: auto !important;
    min-height: 0;
    aspect-ratio: 16 / 9;
    background-size: 100% auto !important;
    background-position: center top !important;
}