@import url('https://fonts.googleapis.com/css2?family=Anton&family=Barlow+Condensed:wght@600;700&display=swap');:root{--bg:#151b19;--gold:#e2b935;--white:#fff}*{box-sizing:border-box}html{scroll-behavior:smooth;scroll-padding-top:55px}body{margin:0;background:var(--bg);color:var(--white);font-family:Arial,Helvetica,sans-serif}a{color:inherit;text-decoration:none}a:hover{color:var(--gold)}.container{max-width:1450px;width:86%;margin:auto}.site-header{position:absolute;z-index:10;top:0;left:0;width:100%;color:white}.nav-wrap{max-width:1150px;width:92%;margin:auto;display:flex;align-items:center;justify-content:space-between;gap:24px;height:48px}.brand{font:600 19px 'Barlow Condensed','Arial Narrow',sans-serif;white-space:nowrap}.gold{color:var(--gold);font-size:23px;margin-right:8px}nav{display:flex;align-items:center;gap:25px;font-weight:700;font-size:15px}nav a{white-space:nowrap}.social{display:flex;gap:13px;color:var(--gold);font-size:19px}.menu-toggle{display:none}.hero{height:min(48vw,960px);min-height:560px;background:#171c1c url('assets/hero-reference.png') center top/100% 100% no-repeat;position:relative}.hero-down{position:absolute;bottom:20%;left:50%;transform:translateX(-50%);font-size:56px;color:var(--gold);line-height:1;opacity:0}.hero-mobile-title{display:none}.section{padding:55px 0 40px}.section h2,.contact h2{font-family:'Anton',Impact,'Arial Narrow',sans-serif;font-weight:400;font-size:42px;line-height:1.2;margin:0 0 34px}.dark{background:#151b19}.carousel-shell{position:relative}.poster-strip{display:flex;gap:24px;overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none}.poster-strip::-webkit-scrollbar{display:none}.poster-strip img{flex:0 0 calc((100% - 96px)/5);width:calc((100% - 96px)/5);height:420px;object-fit:cover;scroll-snap-align:start}.poster-strip{scroll-behavior:smooth;overscroll-behavior-inline:contain}.arrow{position:absolute;top:48%;z-index:2;border:0;background:#c3c3c3b5;color:#222;border-radius:50%;font-size:36px;cursor:pointer;width:40px;height:40px;line-height:32px}.prev{left:8px}.next{right:8px}.film-grid{display:flex;gap:25px;align-items:flex-start}.film-grid img{width:280px;height:auto;max-height:425px;object-fit:cover}.text-panel{background:#202020;padding:85px 0 100px}.two-cols{display:grid;grid-template-columns:1fr 1fr;gap:28px}.two-cols p,.music p,.about p,.album-row p{font-size:20px;line-height:1.6;margin:0}.awards{background:#e0e5e3;padding:100px 0 75px}.awards-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:55px 25px;align-items:center}.awards-grid img{width:100%;height:225px;object-fit:contain;mix-blend-mode:multiply}.music-row{display:grid;grid-template-columns:1.3fr 1fr;gap:50px;align-items:start;margin:75px 0 35px}.music-row>img{width:100%;height:auto}.music-row p{margin-bottom:48px}.album-panel{background:#202020;padding:45px 0}.album-row{display:grid;grid-template-columns:1fr 1fr;gap:75px;align-items:center}.album-row h2{font-size:58px;margin-bottom:65px}.album-row p{margin-bottom:50px}.album-row img{width:100%;max-height:700px;object-fit:contain}.about{background:#000;padding-top:20px;padding-bottom:55px}.main-logo{display:block;width:360px;max-width:70%;margin:35px auto 45px}.about-copy p{margin-bottom:37px}.contact{background:#000;padding-top:20px}.contact h2{margin-bottom:26px}.contact-band{background:#151b19;padding:18px 0 22px}.contact-grid{display:flex;align-items:center;justify-content:center;gap:130px}.contact-grid img{height:120px;width:110px;object-fit:contain}.contact-grid address{font-size:24px;font-style:normal;line-height:2}.contact-grid address span{display:inline-block;width:45px;color:var(--gold);font-size:30px}footer{background:#202020;min-height:320px;padding:55px 0 30px;text-align:center}.footer-top{display:flex;justify-content:space-between;text-align:left;font-size:20px}.footer-top p{line-height:1.55;margin:0}.footer-social{color:var(--gold);font-size:24px}footer small{display:block;margin-top:135px;font-size:15px}@media(max-width:1150px){.brand{font-size:16px}nav{gap:12px;font-size:12px}.poster-strip img{flex-basis:calc((100% - 48px)/3);width:calc((100% - 48px)/3)}.container{width:90%}.film-grid img{width:30%}}@media(max-width:750px){.site-header{background:#101514eb;position:fixed}.nav-wrap{height:58px}.brand{font-size:17px}.menu-toggle{display:block;background:none;border:0;color:white;font-size:27px;cursor:pointer}nav{display:none;position:absolute;top:58px;left:0;right:0;background:#151b19;flex-direction:column;align-items:stretch;padding:16px 7%;font-size:16px;gap:0}nav.open{display:flex}nav>a{padding:11px 0;border-bottom:1px solid #333}.social{padding:12px 0}.hero{height:85vh;min-height:480px;background-size:auto 100%;background-position:center}.hero:before{content:'';position:absolute;inset:0;background:#0008}.hero-mobile-title{display:block;position:absolute;top:45%;width:100%;text-align:center;padding:0 10px}.hero-mobile-title h1{font:42px 'Anton',Impact,sans-serif;letter-spacing:4px;margin:0}.hero-mobile-title p{font-size:24px;margin:0}.hero-down{opacity:1;bottom:18%}.section h2,.contact h2{font-size:36px}.section{padding:40px 0}.poster-strip{gap:14px}.poster-strip img{flex-basis:65%;width:65%;height:390px}.film-grid{gap:12px;flex-wrap:wrap}.film-grid img{width:calc(50% - 6px)}.two-cols,.music-row,.album-row{grid-template-columns:1fr}.text-panel{padding:35px 0}.two-cols p,.music p,.about p,.album-row p{font-size:17px}.awards{padding:35px 0}.awards-grid{grid-template-columns:repeat(2,1fr);gap:20px}.awards-grid img{height:160px}.music-row{margin:20px 0;gap:25px}.music-row p,.album-row p{margin-bottom:22px}.album-row{gap:20px}.album-row h2{font-size:44px;margin-bottom:22px}.contact-grid{gap:15px;justify-content:space-around}.contact-grid img{width:75px;height:90px}.contact-grid address{font-size:15px}.contact-grid address span{font-size:20px;width:26px}.footer-top{font-size:16px}footer{min-height:240px}footer small{margin-top:75px}}@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
/* Interactive poster carousels */
.poster-strip .poster-card{flex:0 0 calc((100% - 96px)/5);width:calc((100% - 96px)/5);height:420px;padding:0;border:0;background:transparent;cursor:pointer;scroll-snap-align:start;overflow:hidden;display:block}
.poster-strip .poster-card img{display:block;width:100%;height:100%;object-fit:cover;flex:none;scroll-snap-align:none}
.poster-card:focus-visible{outline:3px solid var(--gold);outline-offset:-3px}
.arrow:disabled{opacity:.22;cursor:not-allowed;pointer-events:none}
/* Film details lightbox */
.poster-modal[hidden]{display:none}
.poster-modal{position:fixed;inset:0;z-index:1000;display:flex;align-items:center;justify-content:center;padding:22px}
.poster-modal-backdrop{position:absolute;inset:0;background:rgba(0,0,0,.86)}
.poster-modal-panel{position:relative;display:grid;grid-template-columns:minmax(180px,300px) minmax(250px,1fr);gap:32px;align-items:center;background:#1b211f;border:1px solid #4b4b4b;color:#fff;padding:35px;max-width:920px;width:100%;max-height:calc(100vh - 44px);overflow:auto;box-shadow:0 20px 80px #000a}
.poster-modal-art{width:100%;height:auto;max-height:75vh;object-fit:contain}
.poster-modal-info h2{font-family:'Anton',Impact,'Arial Narrow',sans-serif;font-size:clamp(30px,4vw,48px);font-weight:400;line-height:1.15;margin:0 40px 28px 0}
.poster-modal-label{color:var(--gold);font-weight:700;font-size:13px;letter-spacing:2px;margin:25px 0 8px}
#poster-modal-genre{font-size:18px;line-height:1.5;margin:0}
#poster-modal-logline{font-size:19px;line-height:1.65;margin:0}
.poster-modal-close{position:absolute;top:12px;right:16px;background:none;border:0;color:#fff;font-size:36px;cursor:pointer;line-height:1;z-index:1}
.poster-modal-close:hover{color:var(--gold)}
.modal-open{overflow:hidden}
@media(max-width:1150px){.poster-strip .poster-card{flex-basis:calc((100% - 48px)/3);width:calc((100% - 48px)/3)}}
@media(max-width:750px){.poster-strip .poster-card{flex-basis:65%;width:65%;height:390px}.poster-modal-panel{grid-template-columns:1fr;gap:16px;padding:24px 20px;max-width:460px}.poster-modal-art{max-height:36vh}.poster-modal-info h2{font-size:30px;margin-bottom:12px}.poster-modal-label{margin-top:12px}#poster-modal-logline{font-size:16px}#poster-modal-genre{font-size:16px}}

/* Larger film detail popup: poster-first desktop layout */
@media (min-width: 751px) {
  .poster-modal { padding: 18px; }
  .poster-modal-panel {
    width: min(1250px, 96vw);
    max-width: 1250px;
    max-height: calc(100dvh - 36px);
    grid-template-columns: minmax(300px, 480px) minmax(300px, 1fr);
    gap: clamp(24px, 3vw, 55px);
    padding: clamp(24px, 3vw, 44px);
  }
  .poster-modal-art {
    width: 100%;
    max-height: calc(100dvh - 124px);
    object-fit: contain;
  }
}
@media (max-width: 750px) {
  .poster-modal { padding: 10px; }
  .poster-modal-panel { width: 100%; max-width: 540px; max-height: calc(100dvh - 20px); }
  .poster-modal-art { max-height: 52dvh; }
}

/* About: three paragraphs per column, preserving original reading order */
.about-copy{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(30px,5vw,85px);align-items:start}
.about-column{min-width:0}
@media(max-width:750px){.about-copy{grid-template-columns:1fr;gap:0}}

/* Larger header branding, navigation links and social icons */
@media (min-width: 1151px) {
  .nav-wrap { max-width: 1540px; width: 96%; height: 76px; gap: 18px; }
  .brand { font-size: 25px; }
  .gold { font-size: 29px; }
  nav { gap: clamp(12px, 1.35vw, 23px); font-size: 19px; }
  .social { gap: 17px; font-size: 26px; }
}
@media (min-width: 751px) and (max-width: 1150px) {
  .nav-wrap { width: 96%; max-width: none; height: 70px; gap: 12px; }
  .brand { font-size: clamp(17px, 1.9vw, 22px); }
  .gold { font-size: 25px; }
  nav { gap: clamp(7px, 1vw, 12px); font-size: clamp(13px, 1.4vw, 17px); }
  .social { gap: 10px; font-size: 22px; }
}
@media (max-width: 750px) {
  .nav-wrap { height: 66px; }
  .brand { font-size: clamp(17px, 4.2vw, 22px); }
  .gold { font-size: 26px; margin-right: 4px; }
  .menu-toggle { font-size: 32px; }
  nav { top: 66px; font-size: 20px; }
  .social { font-size: 27px; gap: 22px; }
}

/* Updated cinematic hero: new artwork with seamless bottom fade. */
.hero {
  background-image: linear-gradient(to bottom, rgba(21,27,25,0) 55%, rgba(21,27,25,.35) 73%, #151b19 100%), url('assets/filmprod.jpg');
  background-color: #151b19;
  background-position: center center;
  background-size: cover;
  background-repeat: no-repeat;
}
@media (max-width:750px) {
  .hero {
    background-image: linear-gradient(to bottom, rgba(21,27,25,0) 45%, rgba(21,27,25,.4) 73%, #151b19 100%), url('assets/filmprod.jpg');
    background-position: center center;
    background-size: cover;
  }
  /* Artwork already includes the Rain of Arrows lettering. */
  .hero-mobile-title { display: none; }
}

/* Balanced, more compact presentation across the entire page (October 2026). */
@media (min-width: 751px) {
  .container { max-width: 1240px; width: 84%; }
  .section { padding: 40px 0 30px; }
  .section h2, .contact h2 { font-size: 34px; margin-bottom: 24px; }
  .poster-strip { gap: 18px; }
  .poster-strip .poster-card { flex-basis: calc((100% - 72px)/5); width: calc((100% - 72px)/5); height: 340px; }
  .poster-strip .poster-card img { width: 100%; height: 100%; }
  .arrow { width: 36px; height: 36px; font-size: 31px; line-height: 29px; }
  .text-panel { padding: 52px 0 62px; }
  .two-cols { gap: 45px; }
  .two-cols p, .music p, .about p, .album-row p { font-size: 17px; line-height: 1.58; }
  .awards { padding: 50px 0 45px; }
  .awards-grid { gap: 22px 30px; }
  .awards-grid img { height: 165px; }
  .music-row { margin: 34px 0 24px; gap: 42px; grid-template-columns: 1.15fr 1fr; }
  .music-row p { margin-bottom: 23px; }
  .album-panel { padding: 36px 0; }
  .album-row { gap: 55px; }
  .album-row h2 { font-size: 43px; margin-bottom: 28px; }
  .album-row p { margin-bottom: 25px; }
  .album-row img { max-height: 490px; }
  .about { padding-top: 18px; padding-bottom: 40px; }
  .main-logo { width: 270px; margin: 22px auto 32px; }
  .about-copy { gap: clamp(30px, 4vw, 65px); }
  .about-copy p { margin-bottom: 22px; }
  .contact { padding-top: 18px; }
  .contact-band { padding: 14px 0 18px; }
  .contact-grid { gap: 85px; }
  .contact-grid img { height: 95px; width: 88px; }
  .contact-grid address { font-size: 16px; line-height: 1.8; }
  .contact-grid address span { font-size: 24px; width: 36px; }
  footer { min-height: 210px; padding: 36px 0 24px; }
  .footer-top { font-size: 17px; }
  footer small { margin-top: 72px; font-size: 13px; }
}
@media (min-width: 751px) and (max-width: 1150px) {
  .poster-strip .poster-card { flex-basis: calc((100% - 36px)/3); width: calc((100% - 36px)/3); height: 340px; }
}
@media (max-width: 750px) {
  .section { padding: 30px 0 24px; }
  .section h2, .contact h2 { font-size: 30px; margin-bottom: 20px; }
  .poster-strip .poster-card { flex-basis: 58%; width: 58%; height: 310px; }
  .poster-strip { gap: 12px; }
  .arrow { width: 35px; height: 35px; font-size: 30px; line-height: 28px; }
  .text-panel { padding: 27px 0; }
  .two-cols { gap: 18px; }
  .two-cols p, .music p, .about p, .album-row p { font-size: 16px; line-height: 1.55; }
  .awards { padding: 24px 0; }
  .awards-grid { gap: 10px 15px; }
  .awards-grid img { height: 115px; }
  .music-row { margin: 18px 0; gap: 18px; }
  .music-row p, .album-row p { margin-bottom: 16px; }
  .album-panel { padding: 26px 0; }
  .album-row h2 { font-size: 35px; margin-bottom: 16px; }
  .album-row img { max-height: 390px; }
  .main-logo { width: 230px; margin: 16px auto 25px; }
  .about-copy p { margin-bottom: 18px; }
  .about { padding-bottom: 30px; }
  .contact-grid img { width: 60px; height: 75px; }
  .contact-grid address { font-size: 14px; line-height: 1.75; }
  footer { min-height: 190px; padding: 30px 0 22px; }
  footer small { margin-top: 55px; }
}

/* Center the three awards in row two between the four awards in row one. */
@media (min-width: 751px) {
  .awards-grid { grid-template-columns: repeat(8, minmax(0, 1fr)); }
  .awards-grid > img { grid-column: span 2; }
  .awards-grid > img:nth-child(5) { grid-column: 2 / span 2; }
  .awards-grid > img:nth-child(6) { grid-column: 4 / span 2; }
  .awards-grid > img:nth-child(7) { grid-column: 6 / span 2; }
}

/* Footer social links */
.footer-social{display:flex;align-items:center;gap:20px}
.footer-social a{color:inherit;text-decoration:none;transition:color .2s ease}
.footer-social a:hover,.footer-social a:focus-visible{color:#d5ae57}

/* Carousel controls sit in dedicated gutters, never over the poster artwork. */
#upcoming .carousel-shell, #films .carousel-shell {
  display: grid;
  grid-template-columns: 48px minmax(0, 1fr) 48px;
  align-items: center;
  column-gap: 14px;
}
#upcoming .carousel-shell .poster-strip, #films .carousel-shell .poster-strip {
  min-width: 0;
  width: 100%;
}
#upcoming .carousel-shell .arrow, #films .carousel-shell .arrow {
  position: static;
  inset: auto;
  transform: none;
  justify-self: center;
  align-self: center;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  padding: 0 0 4px;
  border: 1px solid rgba(226,185,53,.65);
  border-radius: 50%;
  background: #28302c;
  color: #e2b935;
  font-size: 35px;
  line-height: 1;
  transition: background-color .2s, opacity .2s;
}
#upcoming .carousel-shell .arrow:not(:disabled):hover,
#films .carousel-shell .arrow:not(:disabled):hover { background: #3c443b; }
#upcoming .carousel-shell .arrow:focus-visible,
#films .carousel-shell .arrow:focus-visible { outline: 2px solid #e2b935; outline-offset: 3px; }
#upcoming .carousel-shell .arrow:disabled,
#films .carousel-shell .arrow:disabled { opacity: .24; cursor: not-allowed; }
@media (max-width: 750px) {
  #upcoming .carousel-shell, #films .carousel-shell {
    grid-template-columns: 36px minmax(0,1fr) 36px;
    column-gap: 5px;
  }
  #upcoming .carousel-shell .arrow, #films .carousel-shell .arrow {
    width: 34px;
    height: 42px;
    font-size: 29px;
  }
}

/* PATCH FOR MOBILE PHONE DISPLAYS */
/* Rain of Arrows — portrait-phone improvements. Append to END of style.css. */
@media (max-width: 750px) {
  html { scroll-padding-top: 76px; }
  body { overflow-x: clip; }
  .container { width: calc(100% - 32px); max-width: 100%; }
  .nav-wrap { width: calc(100% - 24px); gap: 8px; }
  .brand { font-size: clamp(14px, 4vw, 19px); white-space: normal; line-height: 1.05; }
  .gold { font-size: 22px; }
  .menu-toggle { min-width: 44px; min-height: 44px; flex-shrink: 0; }
  nav { max-height: calc(100dvh - 66px); overflow-y: auto; }
  nav a { min-height: 44px; display: flex; align-items: center; }
  .social a { min-width: 40px; min-height: 44px; display: inline-flex; align-items: center; justify-content: center; }

  /* Keep hero tall but prevent landscape artwork from being distorted. */
  .hero { min-height: 480px; background-size: cover; background-position: center center; }

  .section { padding: 30px 0 26px; }
  .section h2, .contact h2 { font-size: clamp(27px, 8vw, 34px); line-height: 1.2; }
  .two-cols, .music-row, .album-row, .about-copy { grid-template-columns: minmax(0, 1fr); }
  .two-cols p, .music p, .about p, .album-row p { font-size: 16px; line-height: 1.65; }
  .music-row > img, .album-row > img { max-width: 100%; height: auto; }

  /* External carousel controls: usable touch targets, one poster per view. */
  #upcoming .carousel-shell, #films .carousel-shell {
    grid-template-columns: 44px minmax(0, 1fr) 44px;
    column-gap: 6px;
  }
  #upcoming .carousel-shell .arrow, #films .carousel-shell .arrow {
    width: 44px; height: 48px; font-size: 30px;
  }
  .poster-strip .poster-card {
    flex: 0 0 100%; width: 100%; height: auto;
    aspect-ratio: 2 / 3;
  }
  .poster-strip .poster-card img { width: 100%; height: 100%; object-fit: cover; }
  .poster-strip { gap: 12px; }

  .awards-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
  .awards-grid img { max-width: 100%; height: 105px; }
  .main-logo { max-width: min(230px, 75%); height: auto; }

  .contact-grid { flex-direction: column; gap: 14px; text-align: center; }
  .contact-grid address { font-size: clamp(13px, 3.7vw, 16px); line-height: 1.8; overflow-wrap: anywhere; }
  .contact-grid address span { width: 26px; }
  .footer-top { flex-direction: column; align-items: center; text-align: center; gap: 18px; }
  .footer-social { justify-content: center; }
  .footer-social a { min-width: 44px; min-height: 44px; display: inline-flex; align-items: center; justify-content: center; }
  footer small { margin-top: 28px; line-height: 1.5; }

  /* Film details: readable and scrollable on portrait screens. */
  .poster-modal { padding: 8px; }
  .poster-modal-panel { width: 100%; max-width: 100%; max-height: calc(100dvh - 16px); padding: 16px; gap: 12px; }
  .poster-modal-art { width: 100%; max-height: 42dvh; object-fit: contain; }
  .poster-modal-info h2 { font-size: 27px; margin: 0 36px 10px 0; }
  #poster-modal-logline { font-size: 15px; line-height: 1.55; }
  .poster-modal-close { min-width: 44px; min-height: 44px; top: 4px; right: 4px; }
}
@media (max-width: 360px) {
  .container { width: calc(100% - 24px); }
  #upcoming .carousel-shell, #films .carousel-shell {
    grid-template-columns: 40px minmax(0, 1fr) 40px;
    column-gap: 3px;
  }
  #upcoming .carousel-shell .arrow, #films .carousel-shell .arrow { width: 40px; }
}


/* ADDING PORTRAIT HERO BG IMAGE FOR MOBILE DISPLAYS */

/* Mobile portrait hero image */
@media (max-width: 750px) {
    .hero {
        background-image:
            linear-gradient(
                to bottom,
                rgba(21, 27, 25, 0) 55%,
                rgba(21, 27, 25, 0.35) 75%,
                #151b19 100%
            ),
            url('assets/filmprod-pt.jpg');

        background-size: cover;
        background-position: center center;
        background-repeat: no-repeat;
    }
}