/* NP Entertainment - the Wix site's look: Wix Madefor Display (headings) and Text (body), Fraunces for the show
   banner; black, white, NP red; full-width bands. Sizes as measured on the Wix pages at 1440 px, scaled down on
   smaller screens with clamp(). */
:root {
    --red: #d21212;
    --ink: #000;
    --paper: #fff;
    --grey: #eee;
    --line: #e2e2e2;
    --muted: #555;
    --display: 'Wix Madefor Display', 'Helvetica Neue', Arial, sans-serif;
    --text: 'Wix Madefor Text', 'Helvetica Neue', Arial, sans-serif;
    --serif: 'Fraunces', Georgia, 'Times New Roman', serif;
    color-scheme: light;
}
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--paper); color: var(--ink); font: 400 16px/1.5 var(--text); }
img { max-width: 100%; display: block; }
a { color: inherit; }
h1, h2, h3 { font-family: var(--display); font-weight: 700; line-height: 1.15; margin: 0; text-wrap: balance; }
.sr-only, .hp { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
main { display: block; }
.rich p { margin: 0 0 .9em; }
.rich ul { margin: 0 0 .9em; padding-left: 1.4em; }
.rich li p { margin: 0; }
.rich h2 { font-size: 1.35em; margin: 1.2em 0 .5em; }
.rich a { text-decoration: underline; }
.link-underline { text-decoration: underline; }

/* ---------------------------------------------------------------- header */
.site-header { position: relative; z-index: 20; display: flex; align-items: center; justify-content: space-between; gap: 24px;
    padding: 14px clamp(16px, 4.8vw, 70px); background: var(--paper); }
.logo { display: block; flex: 0 1 auto; min-width: 0; }
.logo img { display: block; width: 672px; max-width: 100%; height: auto; }     /* (the wide logo, 960 x 100: 70 tall; narrower when the menu needs the room) */
.site-menu > ul { display: flex; gap: clamp(16px, 2vw, 28px); list-style: none; margin: 0 clamp(0px, 8vw, 150px) 0 0; padding: 0; }
.site-menu { flex: 0 0 auto; }      /* (the menu keeps its size; the logo gives way) */
.site-menu a { text-decoration: none; font: 700 15px/1 var(--display); display: inline-flex; align-items: center; gap: 4px; padding: 8px 0; white-space: nowrap; }
.site-menu li.active > a, .site-menu a:hover { color: var(--red); }
.site-menu .chev { width: 10px; height: 6px; }
.site-menu .has-sub { position: relative; }
.site-menu .sub { display: none; position: absolute; top: 100%; left: -14px; min-width: 190px; list-style: none; margin: 0; padding: 8px 0;
    background: var(--paper); box-shadow: 0 6px 20px rgba(0, 0, 0, .12); }
.site-menu .sub a { display: block; padding: 10px 16px; font-weight: 600; }
.site-menu .has-sub:hover > .sub, .site-menu .has-sub:focus-within > .sub { display: block; }
/* Past Events -> years -> events -> dates: each opens to the left of its item (the room is on the left: the menu
   is at the right of the header); long titles wrap */
.site-menu .sub .sub { top: -8px; left: auto; right: 100%; min-width: 150px; width: max-content; max-width: 300px; }
.site-menu .sub .sub a, .site-menu .sub span { white-space: normal; line-height: 1.25; }
.site-menu .sub .has-sub > a { display: flex; gap: 8px; }
.site-menu .sub .chev { transform: rotate(90deg); flex: none; }
/* Items without a submenu: a bullet where the others have the chevron */
.site-menu .sub li:not(.has-sub) > a, .site-menu .sub li:not(.has-sub) > span { display: flex; gap: 8px; }
.site-menu .sub li:not(.has-sub) > a::before, .site-menu .sub li:not(.has-sub) > span::before { content: '•'; flex: none; width: 10px; text-align: center; }
.site-menu .sub span { display: block; padding: 10px 16px; font: 600 15px/1.25 var(--display); color: var(--muted); }
.menu-toggle { display: none; }

/* ---------------------------------------------------------------- shared */
.page-title { text-align: center; font-size: clamp(42px, 7.3vw, 104px); margin: 20px 16px 60px; letter-spacing: -.01em; }
.page-title.upper { text-transform: uppercase; font-size: clamp(36px, 6vw, 86px); }
.btn { display: inline-block; text-decoration: none; text-align: center; font: 400 15px/1 var(--text); padding: 14px 32px; min-width: 160px; border: 0; cursor: pointer; }
.btn-red { background: var(--red); color: #fff; }
.btn-red:hover { background: #a80e0e; }
.btn-black { background: var(--ink); color: #fff; }
.btn-black:hover { background: #333; }
:focus-visible { outline: 2px solid var(--red); outline-offset: 2px; }

/* ---------------------------------------------------------------- home */
.intro { padding: clamp(30px, 4vw, 60px) 16px clamp(60px, 9vw, 130px); }
.intro-text { max-width: 900px; margin: 0 auto; font: 600 clamp(17px, 1.75vw, 24.75px)/1.45 var(--display); text-align: justify; }
.intro-text p { margin: 0; }
.intro-text p + p { margin-top: 1.45em; }
/* The show's picture and the black text below it: the same width (up to 1000, centred); the picture in its own
   proportions (1400 x 1015: never cropped, only on phones a little at the sides to keep room for the title) */
.show-banner, .show-text { box-sizing: border-box; width: min(1000px, 100% - 2 * clamp(0px, 3.1vw, 45px)); margin-inline: auto; }
.show-banner { aspect-ratio: 1400 / 1015; min-height: 380px; background: #222 center / cover no-repeat;
    display: grid; place-items: center; text-align: center; padding: 24px; }
.show-banner-inner { display: grid; justify-items: center; gap: 22px; margin-top: 8%; }
.show-banner h1 { font: 300 clamp(38px, 5.4vw, 77px)/1.15 var(--serif); color: #fff; max-width: 9.5em; text-shadow: 0 2px 18px rgba(0, 0, 0, .45); letter-spacing: -.01em; }
.btn-pill { display: inline-block; background: var(--red); color: #000; border: 2px solid #fff; border-radius: 40px; padding: 12px clamp(36px, 4.4vw, 64px);
    font: 700 clamp(16px, 1.7vw, 24px)/1.2 var(--text); text-decoration: none; }
.btn-pill:hover { background: #fff; }
.show-text { background: #000; color: #fff; padding: clamp(36px, 4vw, 60px) clamp(16px, 4vw, 58px) clamp(10px, 1.5vw, 20px); }
.show-text div { font: 400 clamp(20px, 3vw, 36px)/1.6 var(--text); text-align: justify; }
.show-text p { margin: 0; }
/* While there is no current show: what is coming, in the show text's black box */
.soon { box-sizing: border-box; width: min(1000px, 100% - 2 * clamp(0px, 3.1vw, 45px)); margin: 0 auto clamp(40px, 5vw, 70px);
    background: #000; color: #fff; padding: clamp(36px, 4vw, 60px) clamp(16px, 4vw, 58px); text-align: center; }
.soon div { font: 400 clamp(20px, 2.6vw, 32px)/1.55 var(--text); }
.soon p { margin: 0; }
.soon p + p { margin-top: 1em; }
.soon a { text-decoration: underline; text-underline-offset: 4px; }
.soon a:hover { color: #ff8a8a; }
.testimonials { background: var(--grey); padding: clamp(40px, 5vw, 80px) 16px; text-align: center; position: relative; min-height: 340px; }
.slider-arrows { position: absolute; top: 18px; right: clamp(16px, 5vw, 70px); display: flex; gap: 26px; }
.slider-arrows button { background: none; border: 0; color: var(--red); font-size: 28px; cursor: pointer; padding: 4px; line-height: 1; }
.slide { margin: 0 auto; max-width: 820px; }
.slide blockquote { margin: 0 0 30px; font: 700 clamp(22px, 2.85vw, 41px)/1.3 var(--text); }
.slide figcaption { font: italic 400 clamp(16px, 1.72vw, 24.75px)/1.4 var(--text); }

/* ---------------------------------------------------------------- newsletter, footer */
.newsletter { background: #000; color: #fff; padding: 70px 16px 80px; }
.newsletter form { max-width: 384px; margin: 0 auto; display: grid; gap: 18px; }
.newsletter h2 { font: 700 clamp(20px, 2vw, 28px)/1.2 var(--display); text-align: center; }
.newsletter input[type=email] { height: 42px; padding: 0 12px; border: 1px solid #fff; background: transparent; color: #fff; font: inherit; }
.newsletter input::placeholder { color: #bbb; }
.newsletter button { height: 46px; border: 1px solid #fff; background: #fff; color: #000; font: 400 18px var(--text); cursor: pointer; }
.newsletter button:hover { background: #000; color: #fff; }
.form-note { margin: 0; text-align: center; color: #1a8f3a; font-weight: 600; }
.form-note.err { color: var(--red); }
.newsletter .form-note { color: #9be0ad; }
.newsletter .form-note.err { color: #ff8a8a; }
.newsletter .form-note.small { color: #bbb; font: 400 13px/1.4 var(--text); margin-top: -8px; }
.site-footer { text-align: center; padding: 50px 16px 40px; font-size: 14px; }
.site-footer p { margin: 8px 0; }
.social { display: flex; justify-content: center; gap: clamp(24px, 4vw, 45px); margin-bottom: 26px; }
.social svg { width: 40px; height: 40px; fill: #000; fill-rule: evenodd; }
.social a:hover svg { fill: var(--red); }

/* ---------------------------------------------------------------- upcoming events */
.event-cards { display: grid; gap: 30px; max-width: 1400px; margin: 0 auto 90px; padding: 0 clamp(16px, 1.4vw, 20px); }
.no-events { max-width: 760px; margin: -20px auto 90px; padding: 0 16px; text-align: center; font-size: clamp(18px, 1.6vw, 22px); }
.event-card { display: grid; grid-template-columns: 1fr 1fr; border: 1px solid var(--line); min-height: 498px; }
.event-card.flip .event-card-img { order: 2; }
.event-card-img { position: relative; overflow: hidden; }
.event-card-img img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.event-card-text { display: grid; align-content: center; justify-items: center; gap: 12px; text-align: center; padding: 40px clamp(20px, 3vw, 44px); font-size: 14px; }
.event-card-text h2 { font: 400 clamp(20px, 1.8vw, 26px)/1.3 var(--text); }
.event-card-text h2 a { text-decoration: none; }
.badge { border: 1px solid #888; border-radius: 20px; padding: 2px 12px; font-size: 12px; }
.event-meta { margin: 0; }
.event-meta span { margin: 0 6px; }
.event-summary { margin: 4px 0; max-width: 32em; }
.share { margin: 4px 0 8px; display: flex; gap: 18px; font-weight: 700; }
.share a { text-decoration: none; }

/* ---------------------------------------------------------------- an event */
.event-page { padding-bottom: 80px; }
.event-head { max-width: 980px; margin: 0 auto; text-align: center; padding: 60px 16px 40px; display: grid; justify-items: center; gap: 14px; }
.event-head h1 { font-size: clamp(32px, 4.2vw, 60px); }
.event-head p { margin: 0; }
.closed { color: var(--muted); }
.event-image { max-width: 979px; margin: 0 auto; background: #000; aspect-ratio: 979 / 552; display: grid; place-items: center; }
.event-image img { max-height: 100%; width: auto; object-fit: contain; }
.event-body { max-width: 840px; margin: 0 auto; padding: 40px 16px 0; display: grid; gap: 44px; }
.event-body h2 { font-size: clamp(22px, 2.1vw, 30px); margin-bottom: 14px; }
.event-body p { margin: 0 0 .5em; }
.event-tickets { text-align: center; }

/* ---------------------------------------------------------------- past events */
.past-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 70px 20px; max-width: 1300px; margin: 0 auto 90px; padding: 0 16px; }
.past-item { text-align: center; }
.past-item img { width: 100%; aspect-ratio: 419 / 274; object-fit: cover; margin-bottom: 44px; transition: transform .3s ease-in-out; }
/* As on Wix: the picture grows 5% (419 -> 440 px) while the pointer is over it */
.past-item a:hover img, .past-item a:focus-visible img { transform: scale(1.05); }
.past-item a { display: block; position: relative; z-index: 0; }
.past-item a:hover, .past-item a:focus-visible { z-index: 1; }
.past-year > h2 { text-align: center; font-size: clamp(32px, 3.6vw, 52px); margin: 0 16px 40px; }
.past-item h3 { font-size: clamp(20px, 1.75vw, 25px); margin-bottom: 18px; }
.past-item h3 a { text-decoration: underline; text-underline-offset: 3px; }
.past-item .date { color: var(--red); font: 700 clamp(17px, 1.42vw, 20.5px)/1.3 var(--display); margin: 0 0 14px; }
.past-item .performances { margin: -6px 0 14px; font-size: clamp(15px, 1.2vw, 17px); }
.past-item .performances a { display: inline; text-decoration: underline; text-underline-offset: 3px; }
.past-item .performances span { margin: 0 6px; color: var(--muted); }
.past-item .place { font-size: clamp(16px, 1.42vw, 20.5px); margin: 0 auto; max-width: 15em; }
.past-page { max-width: 1296px; margin: 0 auto; padding: 50px 16px 90px; text-align: center; }
.past-hero { width: 100%; aspect-ratio: 1296 / 783; object-fit: cover; margin-bottom: 60px; }
.past-page h1 { font-size: clamp(30px, 3.6vw, 52px); margin-bottom: 20px; }
.past-page h1 a { text-decoration: none; }
.past-dates { color: var(--red); font: 700 clamp(20px, 2.1vw, 30px)/1.3 var(--display); margin: 0 0 18px; }
.past-place { font: 400 clamp(20px, 2.1vw, 30px)/1.35 var(--text); margin: 0 0 50px; }
.past-text { max-width: 860px; margin: 0 auto; font-size: clamp(17px, 1.6vw, 23px); line-height: 1.6; }
.past-actions { margin: 50px 0 60px; }
.gallery { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; }
.gallery img { width: 100%; aspect-ratio: 1; object-fit: cover; }
/* The photo viewer (site.js): one photo at a time on white, as on Wix */
.gallery a { cursor: zoom-in; }
.viewer { position: fixed; inset: 0; z-index: 100; background: #fff; display: grid; place-items: center; padding: 36px clamp(16px, 5vw, 90px); }
.viewer img { max-width: 100%; max-height: calc(100vh - 72px); object-fit: contain; }
.viewer button { position: absolute; background: none; border: 0; color: #000; cursor: pointer; line-height: 1; padding: 8px 12px; }
.viewer button:hover { color: var(--red); }
.viewer-close { top: 6px; right: 12px; font-size: 44px; font-weight: 300; }
.viewer-prev, .viewer-next { top: 50%; transform: translateY(-50%); font-size: 64px; font-weight: 200; }
.viewer-prev { left: clamp(0px, 1.5vw, 24px); }
.viewer-next { right: clamp(0px, 1.5vw, 24px); }
.viewer-count { position: absolute; bottom: 8px; left: 0; right: 0; margin: 0; text-align: center; font-size: 14px; color: var(--muted); }

/* ---------------------------------------------------------------- about us */
.about-banner { min-height: clamp(220px, 29.5vw, 425px); background: #333 center / cover no-repeat; display: grid; place-items: center; }
.about-banner h1 { color: #fff; font-size: clamp(44px, 7.3vw, 104px); text-shadow: 0 2px 20px rgba(0, 0, 0, .4); }
.about-intro { max-width: 860px; margin: 0 auto; padding: 60px 16px; font-size: 18px; text-align: justify; }
.about-why { background: #000; color: #fff; padding: clamp(50px, 6vw, 90px) 16px; }
.about-why > div { max-width: 860px; margin: 0 auto; font-size: 18px; }
.about-why h2 { font-size: clamp(30px, 3.3vw, 47px); margin-bottom: 30px; }
.team { max-width: 1160px; margin: 0 auto; padding: 60px 16px 90px; }
.team-title { text-align: center; font-size: clamp(40px, 4.9vw, 70px); margin-bottom: clamp(50px, 7vw, 110px); }
.member { display: grid; grid-template-columns: minmax(0, 577fr) minmax(0, 560fr); gap: clamp(24px, 3vw, 44px); align-items: start; margin-bottom: 40px; }
.member img { width: 100%; aspect-ratio: 577 / 614; object-fit: cover; }
.member h3 { font-size: clamp(30px, 3.3vw, 47px); margin: 4px 0 18px; }
.member .role { font: 700 clamp(20px, 2.2vw, 31.5px)/1.25 var(--display); margin: 0 0 18px; }
.member .bio { font-size: 15px; }

/* ---------------------------------------------------------------- blog */
.blog { max-width: 940px; margin: 0 auto; padding: 40px 16px 90px; }
.blog-nav { margin: 0 0 30px; }
.blog-nav a { text-decoration: none; color: var(--muted); }
.post-card { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); border: 1px solid var(--line); }
.post-card-img img { width: 100%; height: 100%; object-fit: cover; }
.post-card-text { padding: 36px; display: grid; align-content: center; gap: 12px; }
.post-card-text h2 { font-size: 28px; }
.post-card-text h2 a { text-decoration: none; }
.post-card-text p { margin: 0; }
.post-meta { color: var(--muted); font-size: 13px; margin: 0 0 10px; }
.post h1 { font-size: clamp(28px, 3vw, 40px); margin-bottom: 30px; }
.post-image { width: 100%; margin-bottom: 36px; }
.post .rich { font-size: 18px; line-height: 1.7; }

/* ---------------------------------------------------------------- contact, legal */
.contact { background: #efefef; padding: clamp(50px, 7vw, 100px) 16px; }
.contact form { max-width: 716px; margin: 0 auto; display: grid; }
.contact h1 { font-size: clamp(28px, 2.4vw, 34px); margin-bottom: 30px; }
.contact label:not(.hp) { font-size: 14px; margin: 0 0 8px; }
.contact input:not([name=website]), .contact textarea { border: 0; background: #fff; padding: 10px 12px; font: inherit; margin-bottom: 24px; }
.contact input:not([name=website]) { height: 40px; }
.contact button { justify-self: end; width: min(100%, 346px); height: 46px; border: 0; background: #000; color: #fff; font: 400 20px var(--text); cursor: pointer; }
.contact button:hover { background: #333; }
.contact .form-note { text-align: left; margin-bottom: 20px; }
.legal { max-width: 860px; margin: 0 auto; padding: 40px 16px 90px; }
.legal h1 { font-size: clamp(36px, 4.9vw, 70px); text-align: center; margin-bottom: 40px; }
.legal .rich { font-size: 18px; }

/* ---------------------------------------------------------------- phones and tablets */
@media (max-width: 900px) {
    .menu-toggle { display: inline-grid; gap: 5px; background: none; border: 0; padding: 10px; cursor: pointer; }
    .menu-toggle > span:not(.sr-only) { width: 26px; height: 2px; background: #000; display: block; }
    .site-menu { display: none; position: absolute; top: 100%; left: 0; right: 0; background: #fff; box-shadow: 0 10px 20px rgba(0, 0, 0, .1); padding: 10px 24px 20px; }
    .site-menu.open { display: block; }
    .site-menu > ul { flex-direction: column; gap: 0; margin: 0; }
    .site-menu a { padding: 12px 0; font-size: 17px; }
    .site-menu .sub { display: block; position: static; box-shadow: none; padding: 0 0 0 16px; min-width: 0; }
    .site-menu .sub a { padding: 8px 0; font-size: 15px; }
    /* (phones: Past Events shows its years only; the events are on the page) */
    .site-menu .sub .sub { width: auto; max-width: none; }
    .site-menu .sub .sub .sub, .site-menu .sub .sub .chev { display: none; }
    .site-menu .sub .sub .has-sub > a::before { content: '•'; flex: none; width: 10px; text-align: center; }     /* (the years: their submenus hidden) */
    .event-card, .post-card { grid-template-columns: 1fr; min-height: 0; }
    .event-card.flip .event-card-img { order: 0; }
    .event-card-img { aspect-ratio: 699 / 498; }
    .past-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 50px 16px; }
    .member { grid-template-columns: 1fr; }
    .member img { max-width: 420px; }
    .gallery { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .testimonials { min-height: 0; }
    .slider-arrows { position: static; justify-content: center; margin-bottom: 18px; }
}
@media (max-width: 560px) {
    .logo img { width: 71px; }      /* (the square logo there: layout.php) */
    .past-grid { grid-template-columns: 1fr; }
    .intro-text, .show-text div, .about-intro { text-align: left; }
}
@media (prefers-reduced-motion: reduce) { * { transition: none !important; scroll-behavior: auto !important; } }