/* Modern design (branch design/modern): a night-club palette of ink, warm
   brass and cream on top of the unchanged Graphene, Bootstrap and Time.ly CSS.
   Everything here is an override; remove the <link> in layout.html to get the
   original look back. */

/* Montserrat (Julieta Ulanovsky), SIL Open Font License 1.1 (see OFL.txt).
   Latin subset of the variable font, weights 100-900. Close to the logo's lettering. */
@font-face {
  font-family: 'Montserrat';
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url(/assets/fonts/montserrat/montserrat-latin.woff2) format('woff2');
}

:root {
  --jr-ink: #121110;
  --jr-night: #1d1a17;
  --jr-night-2: #2a2622;
  --jr-brass: #d6a54e;
  --jr-brass-hi: #e8bd6a;
  --jr-brass-dark: #a97a2a;
  --jr-cream: #f4eee4;
  --jr-paper: #fffdf9;
  --jr-text: #2a2622;
  --jr-muted: #6f675d;
  --jr-line: #e7ded0;
  --jr-radius: 14px;
  --jr-shadow: 0 1px 2px rgba(18, 17, 16, .06), 0 8px 24px rgba(18, 17, 16, .08);
  --jr-shadow-hover: 0 2px 4px rgba(18, 17, 16, .08), 0 14px 34px rgba(18, 17, 16, .16);
  --jr-display: 'Montserrat', 'Lato', 'Helvetica Neue', Arial, sans-serif;
}

/* ---------- Page frame: full-width bands instead of the boxed layout ---------- */
html { background: var(--jr-ink); }
body, body.custom-background {
  background: var(--jr-cream) none;
  color: var(--jr-text);
  font-family: 'Lato', 'Helvetica Neue', Arial, sans-serif;
  font-size: 16px;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
}
.container.boxed-wrapper,
.layout-boxed .boxed-wrapper {
  width: 100%; max-width: none; padding: 0; margin: 0;
  background: transparent; box-shadow: none;
}
a { color: #8a5d14; }
a:hover, a:focus { color: var(--jr-ink); }
::selection { background: var(--jr-brass-hi); color: var(--jr-ink); }

/* ---------- Hero ---------- */
.jr-hero {
  position: relative; overflow: hidden; color: #fff;
  background: var(--jr-ink) url(/wp-content/uploads/2017/03/Header-960x198.png) 30% 50% / cover no-repeat;
}
.jr-hero::before {  /* darken the photo so the text reads, keep the warm glow on the left */
  content: ""; position: absolute; inset: 0;
  background:
    radial-gradient(120% 140% at 0% 50%, rgba(214, 165, 78, .28) 0%, rgba(214, 165, 78, 0) 45%),
    linear-gradient(90deg, rgba(18, 17, 16, .55) 0%, rgba(18, 17, 16, .82) 45%, rgba(18, 17, 16, .96) 100%);
}
.jr-hero::after {  /* thin brass rule under the hero */
  content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 3px;
  background: linear-gradient(90deg, transparent, var(--jr-brass) 20%, var(--jr-brass-hi) 50%, var(--jr-brass) 80%, transparent);
}
.jr-hero-inner {
  position: relative; z-index: 1; max-width: 1200px; margin: 0 auto;
  padding: 56px 24px 60px; display: flex; align-items: center; gap: 40px;
}
.jr-logo { flex: 0 0 auto; display: block; border-radius: 50%; line-height: 0;
  box-shadow: 0 0 0 3px var(--jr-brass), 0 0 0 9px rgba(214, 165, 78, .18), 0 18px 50px rgba(0, 0, 0, .6);
  transition: transform .3s ease, box-shadow .3s ease; }
.jr-logo:hover { transform: scale(1.03); box-shadow: 0 0 0 3px var(--jr-brass-hi), 0 0 0 12px rgba(214, 165, 78, .22), 0 18px 50px rgba(0, 0, 0, .6); }
.jr-logo img { width: 168px; height: 168px; border-radius: 50%; }
.jr-hero-text p { margin: 0; }
.jr-kicker { font-family: var(--jr-display); font-size: 13px; font-weight: 600; letter-spacing: .22em; text-transform: uppercase; color: var(--jr-brass-hi); }
.jr-title { font-family: var(--jr-display); font-weight: 300; font-size: 64px; line-height: 1.05; letter-spacing: -.01em; margin: 6px 0 10px !important; text-transform: uppercase; }
.jr-tagline { font-size: 18px; color: rgba(255, 255, 255, .78); }
.jr-hero-actions { margin-top: 26px !important; display: flex; flex-wrap: wrap; gap: 12px; }
.jr-btn { display: inline-block; font-family: var(--jr-display); font-weight: 600; font-size: 14px; letter-spacing: .06em; text-transform: uppercase;
  padding: 12px 22px; border-radius: 999px; text-decoration: none !important; transition: background .2s, color .2s, border-color .2s, transform .2s; }
.jr-btn:hover { transform: translateY(-1px); }
.jr-btn-brass { background: var(--jr-brass); color: var(--jr-ink) !important; border: 2px solid var(--jr-brass); }
.jr-btn-brass:hover, .jr-btn-brass:focus { background: var(--jr-brass-hi); border-color: var(--jr-brass-hi); }
.jr-btn-ghost { background: transparent; color: #fff !important; border: 2px solid rgba(255, 255, 255, .45); }
.jr-btn-ghost:hover, .jr-btn-ghost:focus { border-color: #fff; background: rgba(255, 255, 255, .08); }

/* Inner pages: a slimmer hero so the page itself comes first. */
body:not(.home) .jr-hero-inner { padding: 26px 24px 28px; gap: 24px; }
body:not(.home) .jr-logo img { width: 92px; height: 92px; }
body:not(.home) .jr-title { font-size: 38px; margin: 2px 0 4px !important; }
body:not(.home) .jr-tagline { font-size: 15px; }
body:not(.home) .jr-hero-actions { display: none; }

/* ---------- Navigation bar ---------- */
.navbar.navbar-inverse {
  margin: 0; border: 0; border-radius: 0; min-height: 0;
  background: var(--jr-ink); box-shadow: 0 6px 18px rgba(0, 0, 0, .18);
  position: sticky; top: 0; z-index: 1000;
  padding: 0 max(16px, calc((100% - 1200px) / 2 + 16px));
}
.navbar-inverse .navbar-nav > li > a {
  font-family: var(--jr-display); font-weight: 500; font-size: 14px; letter-spacing: .01em;
  color: rgba(255, 255, 255, .82); background: transparent; padding: 19px 10px 17px; text-shadow: none;
  border-bottom: 2px solid transparent; transition: color .2s, border-color .2s;
}
.navbar-inverse .navbar-nav > li > a:hover,
.navbar-inverse .navbar-nav > li > a:focus,
.navbar-inverse .navbar-nav > .open > a,
.navbar-inverse .navbar-nav > .open > a:hover,
.navbar-inverse .navbar-nav > .open > a:focus { color: #fff; background: transparent; border-bottom-color: var(--jr-brass); }
.navbar-inverse .navbar-nav > .active > a,
.navbar-inverse .navbar-nav > .current-menu-item > a,
.navbar-inverse .navbar-nav > .current-menu-ancestor > a,
.navbar-inverse .navbar-nav > .active > a:hover { color: var(--jr-brass-hi); background: transparent; border-bottom-color: var(--jr-brass); }
.navbar-inverse .navbar-nav > li { border: 0 !important; }
@media (min-width: 768px) {  /* menu on the left, search on the right, one row */
  .navbar-inverse #header-menu-wrap { display: flex !important; align-items: center; padding: 0; }
  .navbar-inverse #header-menu { float: none; width: auto; flex: 1 1 auto; margin: 0 0 0 -10px; display: flex; flex-wrap: wrap; }
  .navbar-inverse #top_search { float: none; flex: 0 0 auto; margin-left: 12px; }
  .navbar-inverse #header-menu-wrap::before, .navbar-inverse #header-menu-wrap::after,
  .navbar-inverse #header-menu::before, .navbar-inverse #header-menu::after { display: none; }  /* Bootstrap clearfix would be a flex item */
}
.navbar-inverse .navbar-nav > li > a .fa { font-size: 9px; margin-left: 3px; opacity: .7; }
.navbar .dropdown-menu {
  background: var(--jr-night); border: 1px solid rgba(255, 255, 255, .08); border-top: 2px solid var(--jr-brass);
  border-radius: 0 0 10px 10px; padding: 8px 0; box-shadow: 0 16px 36px rgba(0, 0, 0, .35);
}
.navbar .dropdown-menu > li > a { color: rgba(255, 255, 255, .82); padding: 8px 20px; font-size: 14px; }
.navbar .dropdown-menu > li > a:hover, .navbar .dropdown-menu > li > a:focus,
.navbar .dropdown-menu > .active > a { background: rgba(214, 165, 78, .14); color: var(--jr-brass-hi); }
#top_search { margin: 10px 0; padding: 0; border: 0; box-shadow: none; }
#top_search .form-control {
  background: rgba(255, 255, 255, .08); border: 1px solid rgba(255, 255, 255, .16); color: #fff;
  border-radius: 999px 0 0 999px; height: 34px; box-shadow: none; width: 130px; transition: width .25s ease;
}
#top_search .form-control::placeholder { color: rgba(255, 255, 255, .5); }
#top_search .form-control:focus { width: 180px; background: rgba(255, 255, 255, .14); border-color: var(--jr-brass); }
#top_search .btn, #top_search .btn:focus { background: var(--jr-brass) !important; color: var(--jr-ink) !important; border: 0; border-radius: 0 999px 999px 0; height: 34px; }
#top_search .btn:hover { background: var(--jr-brass-hi) !important; }
.navbar-inverse .navbar-toggle { border-color: rgba(255, 255, 255, .3); margin: 8px 0; }
.navbar-inverse .navbar-toggle .icon-bar { background: #fff; }
.navbar-inverse .navbar-toggle:hover, .navbar-inverse .navbar-toggle:focus { background: rgba(255, 255, 255, .08); }
.navbar .header_title, .navbar .header_title a { font-family: var(--jr-display); color: #fff !important; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; }

/* ---------- Content and sidebar ---------- */
#content {
  max-width: 1200px; margin: 0 auto !important; padding: 40px 8px 56px;
  background: transparent; box-shadow: none; float: none;
}
#content-main .entry,
#content-main .post,
#content-main .item-wrap {
  background: var(--jr-paper); border: 0; border-radius: var(--jr-radius);
  box-shadow: var(--jr-shadow); padding: 0;
}
#content-main .entry { padding: 36px 40px 40px; }
#content-main .entry:has(.ai1ec-posterboard-view) { padding-left: 16px; padding-right: 16px; }  /* room for three show columns */
#content-main .entry:has(.ai1ec-posterboard-view) .post-title { margin-left: 24px; margin-right: 24px; }
#content-main .entry:has(.ai1ec-posterboard-view) .entry-content > :not(#ai1ec-container) { margin-left: 24px; margin-right: 24px; }
.entry-content > div:first-child:not(:has(*)), .entry-content p:empty { display: none; }  /* empty WordPress spacers */
#content-main .post .entry { box-shadow: none; }
.entry-content, .entry-content p { font-size: 16px; line-height: 1.7; color: var(--jr-text); }
h1, h2, h3, h4, h5, h6,
.post-title, .post-title a, .entry-content h1, .entry-content h2, .entry-content h3, .entry-content h4 {
  font-family: var(--jr-display); color: var(--jr-ink); letter-spacing: -.005em;
}
.post-title, .post-title a, .post-title a:visited, .post-title a:hover {
  font-weight: 700; font-size: 36px; line-height: 1.15; color: var(--jr-ink); margin-bottom: 18px;
}
.post-title::after {  /* short brass underline under page titles */
  content: ""; display: block; width: 56px; height: 3px; border-radius: 3px; margin-top: 14px; background: var(--jr-brass);
}
.entry-content h2 { font-weight: 700; font-size: 24px; margin-top: 1.6em; }
.entry-content h3 { font-weight: 600; font-size: 20px; }
.entry-content a { color: #8a5d14; text-decoration: underline; text-decoration-color: rgba(169, 122, 42, .45); text-underline-offset: 3px; }
.entry-content a:hover { color: var(--jr-ink); text-decoration-color: var(--jr-brass); }
.entry-content img { border-radius: 8px; }
.entry-content hr { border: 0; height: 1px; background: var(--jr-line); margin: 2.2em 0; }
.entry-content blockquote { border-left: 3px solid var(--jr-brass); background: #fbf6ec; border-radius: 0 10px 10px 0; padding: 14px 20px; }
.entry-content table { border-collapse: collapse; }
.entry-content table td, .entry-content table th { border-color: var(--jr-line); }

.sidebar .sidebar-wrap {
  background: var(--jr-paper); border: 0; border-top: 3px solid var(--jr-brass);
  border-radius: var(--jr-radius); box-shadow: var(--jr-shadow);
  padding: 22px 24px; margin-bottom: 22px; color: var(--jr-text); font-size: 15px; line-height: 1.65;
}
.sidebar .sidebar-wrap:empty,
.sidebar .sidebar-wrap.widget_block:not(:has(img, a, iframe, li)) { display: none; }  /* empty WordPress blocks */
.sidebar .sidebar-wrap h2, .sidebar .widget-title {
  font-family: var(--jr-display); font-size: 12px; font-weight: 700; letter-spacing: .18em; text-transform: uppercase;
  color: var(--jr-brass-dark); border: 0; padding: 0; margin: 0 0 12px; background: none;
}
.sidebar .sidebar-wrap h4 { font-family: var(--jr-display); font-size: 17px; line-height: 1.4; margin: 0; }
.sidebar .sidebar-wrap a { color: #8a5d14; }
.sidebar .sidebar-wrap a:hover { color: var(--jr-ink); }
.sidebar .sidebar-wrap p:last-child { margin-bottom: 0; }

/* Buttons from the theme (search page, forms, back to top). */
.btn, .btn:focus, input[type="submit"], button[type="submit"], #back-to-top,
.wp-block-button .wp-block-button__link:not(.has-background) {
  background: var(--jr-ink); color: #fff; border-radius: 999px; border: 0;
}
.btn:hover, input[type="submit"]:hover, button[type="submit"]:hover { background: var(--jr-night-2); color: var(--jr-brass-hi); }
#back-to-top { background: var(--jr-ink); color: var(--jr-brass-hi); }

/* ---------- Calendar (Time.ly markup, restyled) ---------- */
.timely { font-family: 'Lato', 'Helvetica Neue', Arial, sans-serif; }
.timely .ai1ec-btn-default {
  background: var(--jr-paper); border: 1px solid var(--jr-line); color: var(--jr-text);
  border-radius: 999px; box-shadow: none; text-shadow: none; background-image: none;
}
.timely .ai1ec-btn-default:hover, .timely .ai1ec-btn-default:focus,
.timely .ai1ec-open > .ai1ec-dropdown-toggle.ai1ec-btn-default { background: #fbf6ec; border-color: var(--jr-brass); color: var(--jr-ink); }
.timely .ai1ec-pagination.ai1ec-btn-group > .ai1ec-btn,
.timely .ai1ec-pagination.ai1ec-btn-group > .ai1ec-btn-group > .ai1ec-btn { border-radius: 0; }
.timely .ai1ec-pagination.ai1ec-btn-group > .ai1ec-btn:first-child { border-radius: 999px 0 0 999px; }
.timely .ai1ec-pagination.ai1ec-btn-group > .ai1ec-btn:last-child { border-radius: 0 999px 999px 0; }
.timely .ai1ec-month-picker > .ai1ec-btn { font-family: var(--jr-display); font-weight: 700; letter-spacing: .08em; color: var(--jr-ink); }
.timely .ai1ec-month-picker > .ai1ec-btn .ai1ec-fa { color: var(--jr-brass-dark); }
.timely .ai1ec-dropdown-menu { border: 1px solid var(--jr-line); border-radius: 10px; box-shadow: var(--jr-shadow-hover); padding: 6px 0; }
.timely .ai1ec-month-picker .ai1ec-dropdown-menu > .ai1ec-active > a,
.timely .ai1ec-month-picker .ai1ec-dropdown-menu > .ai1ec-active > a:hover { background: var(--jr-ink); color: var(--jr-brass-hi); }
.timely .ai1ec-month-picker .ai1ec-dropdown-menu > div > a:hover { background: #fbf6ec; }
.timely .ai1ec-calendar-toolbar, .timely .ai1ec-clearfix > .ai1ec-title-buttons { margin-bottom: 18px; }

/* Tickets button: brass instead of green. */
.timely .ai1ec-btn-primary, .timely a.ai1ec-btn-primary {
  background: var(--jr-brass); border-color: var(--jr-brass); color: var(--jr-ink) !important;
  font-family: var(--jr-display); font-weight: 700; letter-spacing: .06em; text-transform: uppercase; font-size: 11px;
  border-radius: 999px; text-shadow: none; background-image: none; box-shadow: none;
}
.timely .ai1ec-btn-primary:hover, .timely .ai1ec-btn-primary:focus, .timely .ai1ec-btn-primary:active {
  background: var(--jr-brass-hi); border-color: var(--jr-brass-hi); color: var(--jr-ink) !important;
}
.timely .ai1ec-btn-primary .ai1ec-fa { color: var(--jr-ink); }
.timely .ai1ec-btn.grjs-tickets-closed, .timely .ai1ec-btn.grjs-tickets-closed:hover, .timely .ai1ec-btn.grjs-tickets-closed:focus {
  background: #d9d3c9; border-color: #d9d3c9; color: #6f675d !important; border-radius: 999px;
}

/* Date blocks: ink tile with a brass day number. */
.timely .ai1ec-date-block-wrap .ai1ec-date,
.ai1ec-posterboard-view .ai1ec-date,
.ai1ec-agenda-view .ai1ec-date-title {
  background: var(--jr-ink) !important; color: #fff !important; border: 0 !important;
  border-radius: 10px !important; box-shadow: 0 4px 12px rgba(18, 17, 16, .25) !important;
  text-shadow: none !important; background-image: none !important;
}
.timely .ai1ec-date .ai1ec-month, .ai1ec-agenda-view .ai1ec-date-title .ai1ec-month {
  background: transparent !important; color: var(--jr-brass-hi) !important; font-family: var(--jr-display);
  font-weight: 700; letter-spacing: .12em; text-transform: uppercase; border-radius: 10px 10px 0 0;
}
.timely .ai1ec-date .ai1ec-day, .ai1ec-agenda-view .ai1ec-date-title .ai1ec-day {
  color: #fff !important; font-family: var(--jr-display); font-weight: 800; background: transparent !important;
}
.timely .ai1ec-date .ai1ec-weekday, .timely .ai1ec-date .ai1ec-year,
.ai1ec-agenda-view .ai1ec-date-title .ai1ec-weekday, .ai1ec-agenda-view .ai1ec-date-title .ai1ec-year {
  color: rgba(255, 255, 255, .7) !important; background: transparent !important; font-family: var(--jr-display); letter-spacing: .08em;
}
.ai1ec-agenda-view .ai1ec-date.grjs-highlight .ai1ec-date-title { box-shadow: 0 0 0 3px var(--jr-brass) !important; }

/* Posterboard tiles: white cards with a soft lift on hover. */
.ai1ec-posterboard-view .ai1ec-event {
  background: transparent !important; border: 0 !important; box-shadow: none !important; padding: 6px !important;
}
.ai1ec-posterboard-view .ai1ec-event > .ai1ec-event-wrap {
  background: var(--jr-paper) !important; border: 0 !important; border-radius: var(--jr-radius) !important;
  box-shadow: var(--jr-shadow) !important; overflow: hidden; padding: 14px 14px 16px !important;
  transition: box-shadow .25s ease, transform .25s ease;
}
.ai1ec-posterboard-view .ai1ec-event-wrap,
.ai1ec-posterboard-view .ai1ec-date-block-wrap { opacity: 1 !important; }  /* Time.ly fades tiles that aren't hovered */
.ai1ec-posterboard-view .ai1ec-date-block-wrap { background: transparent !important; border: 0 !important; box-shadow: none !important; }
.ai1ec-posterboard-view .ai1ec-event > .ai1ec-event-wrap:hover { box-shadow: var(--jr-shadow-hover) !important; transform: translateY(-3px); }
.ai1ec-posterboard-view .ai1ec-event-title, .ai1ec-posterboard-view .ai1ec-event-title a {
  font-family: var(--jr-display) !important; font-weight: 700 !important; font-size: 16px !important; line-height: 1.25 !important;
  overflow-wrap: normal !important; word-wrap: normal !important; word-break: normal !important; hyphens: none !important;
  color: var(--jr-ink) !important; text-decoration: none !important;
}
.ai1ec-posterboard-view .ai1ec-event-title a:hover { color: var(--jr-brass-dark) !important; }
.ai1ec-posterboard-view .ai1ec-event-time { color: var(--jr-muted) !important; font-size: 13px !important; }
.ai1ec-posterboard-view .ai1ec-posterboard-image-container { margin: 12px -14px 12px; }
.ai1ec-posterboard-view .ai1ec-event-avatar { border: 0 !important; margin: 0 !important; padding: 0 !important; background: none !important; box-shadow: none !important; }
.ai1ec-posterboard-view .ai1ec-event-avatar img { width: 100%; height: auto; border-radius: 0; transition: transform .4s ease; }
.ai1ec-posterboard-view .ai1ec-event-wrap:hover .ai1ec-event-avatar img { transform: scale(1.03); }
.ai1ec-posterboard-view .ai1ec-posterboard-image-container { overflow: hidden; }
.ai1ec-posterboard-view .ai1ec-posterboard-time {
  background: rgba(18, 17, 16, .82) !important; color: var(--jr-brass-hi) !important; border-radius: 999px !important;
  font-family: var(--jr-display); font-weight: 600; font-size: 12px; letter-spacing: .04em; padding: 3px 10px !important;
}
.ai1ec-posterboard-view .ai1ec-event-description { color: var(--jr-text) !important; font-size: 14px !important; line-height: 1.6 !important; }

/* Agenda view rows. */
.ai1ec-agenda-view .ai1ec-date { border: 0 !important; background: transparent !important; margin-bottom: 18px; }
.ai1ec-agenda-view .ai1ec-date-events { border: 0 !important; }
.ai1ec-agenda-view .ai1ec-event {
  background: var(--jr-paper) !important; border: 0 !important; border-left: 3px solid var(--jr-brass) !important;
  border-radius: 10px !important; box-shadow: var(--jr-shadow) !important; margin-bottom: 10px !important;
}
.ai1ec-agenda-view .ai1ec-event:hover { box-shadow: var(--jr-shadow-hover) !important; }
.ai1ec-agenda-view .ai1ec-event-title { font-family: var(--jr-display) !important; font-weight: 700 !important; color: var(--jr-ink) !important; }
.ai1ec-agenda-view .ai1ec-event-time { color: var(--jr-muted) !important; }

/* Single show pages. */
.timely.ai1ec-single-event .ai1ec-event-details, .ai1ec-single-event .ai1ec-event-details {
  background: #fbf6ec; border: 0; border-radius: 12px; padding: 16px 20px;
}
.ai1ec-single-event .ai1ec-field-label { font-family: var(--jr-display); font-weight: 700; font-size: 12px; letter-spacing: .12em; text-transform: uppercase; color: var(--jr-brass-dark); }

/* ---------- Footer ---------- */
#footer, #footer.default-footer {
  margin: 0; border: 0; color: rgba(255, 255, 255, .7); background: var(--jr-ink);
  padding: 44px max(24px, calc((100% - 1200px) / 2 + 24px)) 40px;
  position: relative;
}
#footer::before {
  content: ""; position: absolute; left: 0; right: 0; top: 0; height: 3px;
  background: linear-gradient(90deg, transparent, var(--jr-brass) 20%, var(--jr-brass-hi) 50%, var(--jr-brass) 80%, transparent);
}
#footer .copyright-developer { padding: 0; background: none; }
#footer #copyright { float: none; width: auto; padding: 0; margin: 0; }
#footer #copyright p { font-size: 14px; line-height: 1.7; color: rgba(255, 255, 255, .7); margin: 0; }
#footer #copyright p::first-line { font-family: var(--jr-display); font-weight: 600; letter-spacing: .16em; text-transform: uppercase; color: #fff; }
#footer a { color: var(--jr-brass-hi); }
#footer .grjs-footer-social { margin: 0; }
#footer .grjs-footer-social a { color: rgba(255, 255, 255, .6); width: 42px; height: 42px; border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, .18); display: inline-flex; align-items: center; justify-content: center; transition: all .2s; }
#footer .grjs-footer-social a:hover, #footer .grjs-footer-social a:focus { color: var(--jr-ink); background: var(--jr-brass); border-color: var(--jr-brass); }
#footer .grjs-footer-social svg { width: 20px; height: 20px; }
#footer .grjs-built { right: max(24px, calc((100% - 1200px) / 2 + 24px)); bottom: 26px; margin: 0; color: rgba(255, 255, 255, .35); }

/* ---------- Tablets and phones ---------- */
@media (max-width: 991px) {
  .jr-title { font-size: 48px; }
  .navbar.navbar-inverse { padding: 0 16px; }
  .navbar-inverse .navbar-nav > li > a { padding: 16px 9px; font-size: 12.5px; }
}
@media (min-width: 768px) and (max-width: 991px) {  /* tablets: the whole menu on one row, search under it on the right */
  .navbar-inverse #header-menu-wrap { flex-wrap: wrap; }
  .navbar-inverse #header-menu { flex: 1 1 100%; justify-content: space-between; margin: 0 -7px; flex-wrap: nowrap; }
  .navbar-inverse .navbar-nav > li > a { padding: 15px 6px 13px; font-size: 12px; letter-spacing: 0; }
  .navbar-inverse .navbar-nav > li > a .fa { margin-left: 2px; }
  .navbar-inverse #top_search { margin: 0 0 10px auto; }
}
@media (max-width: 767px) {
  .jr-hero-inner { padding: 22px 16px 24px; gap: 16px; flex-wrap: wrap; }
  .jr-logo img { width: 76px; height: 76px; }
  .jr-hero-text { flex: 1 1 200px; }
  .jr-kicker { font-size: 10px; letter-spacing: .14em; }
  .jr-title { display: none; }  /* the logo and the menu bar already say it */
  .jr-tagline { font-size: 14px; line-height: 1.5; margin-top: 4px !important; }
  .jr-hero-actions { flex: 1 1 100%; margin-top: 4px !important; gap: 8px; }
  .jr-btn { font-size: 11px; padding: 9px 14px; letter-spacing: .04em; }
  .jr-btn-ghost { display: none; }  /* passes are one tap away in the menu */
  body:not(.home) .jr-hero-inner { padding: 16px; gap: 14px; }
  body:not(.home) .jr-logo img { width: 60px; height: 60px; }
  body:not(.home) .jr-kicker { display: none; }
  body:not(.home) .jr-title { font-size: 24px; margin: 0 0 2px !important; }
  body:not(.home) .jr-tagline { font-size: 12.5px; }

  .navbar.navbar-inverse { padding: 0 16px; }
  .navbar-inverse .navbar-collapse { border: 0; box-shadow: none; max-height: 75vh; overflow-x: hidden; }
  .navbar-inverse .navbar-nav { margin: 0 -16px; }
  .navbar-inverse .navbar-nav > li > a { padding: 13px 20px; border-bottom: 1px solid rgba(255, 255, 255, .06); }
  .navbar-inverse .navbar-nav > li > a:hover, .navbar-inverse .navbar-nav > .open > a { border-bottom-color: rgba(255, 255, 255, .06); color: var(--jr-brass-hi); }
  .navbar .dropdown-menu { background: var(--jr-night) !important; border: 0; border-radius: 0; box-shadow: none; }
  .navbar-nav .open .dropdown-menu > li > a { color: rgba(255, 255, 255, .78) !important; padding: 10px 20px 10px 34px; }
  #top_search { margin: 12px 0 16px; }
  #top_search .form-control { width: 100%; }

  #content { padding: 20px 0 36px; }
  #content-main .entry { padding: 24px 18px 28px; }
  #content-main .entry:has(.ai1ec-posterboard-view),
  #content-main .entry:has(.ai1ec-agenda-view) { padding-left: 8px; padding-right: 8px; }
  #content-main .entry:has(.ai1ec-posterboard-view) .post-title,
  #content-main .entry:has(.ai1ec-posterboard-view) .entry-content > :not(#ai1ec-container),
  #content-main .entry:has(.ai1ec-agenda-view) .post-title,
  #content-main .entry:has(.ai1ec-agenda-view) .entry-content > :not(#ai1ec-container) { margin-left: 10px; margin-right: 10px; }
  .navbar .header_title { font-size: 15px; }
  .post-title, .post-title a { font-size: 28px; }
  .ai1ec-posterboard-view .ai1ec-event { padding: 6px !important; }

  #footer, #footer.default-footer { padding: 34px 20px 28px; }
  #footer .grjs-footer-social { float: none; margin-bottom: 18px; }
  #footer .grjs-footer-social li:first-child { margin-left: 0; }
}
@media (max-width: 480px) {
  #footer .grjs-built { position: static; text-align: left; margin: 16px 0 0; }
}
@media (prefers-reduced-motion: reduce) {
  .jr-logo, .jr-btn, .ai1ec-posterboard-view .ai1ec-event > .ai1ec-event-wrap, .ai1ec-posterboard-view .ai1ec-event-avatar img { transition: none; }
}

/* Single show page: the stacked Calendar / Tickets / Subscribe buttons read as one rounded group. */
.timely .ai1ec-btn-group-vertical > .ai1ec-btn { border-radius: 0 !important; }
.timely .ai1ec-btn-group-vertical > .ai1ec-btn:first-child { border-radius: 10px 10px 0 0 !important; }
.timely .ai1ec-btn-group-vertical > .ai1ec-btn:last-child { border-radius: 0 0 10px 10px !important; }
.timely .ai1ec-btn-group-vertical > .ai1ec-btn:only-child { border-radius: 10px !important; }

/* Breathing room in the calendar cards. The Tickets button and description sit
   inside the full-bleed photo box, so they get their own side padding. */
.ai1ec-posterboard-view .ai1ec-posterboard-image-container { margin-bottom: 4px; }
.ai1ec-posterboard-view .ai1ec-sas-actions { display: block; float: none !important; margin: 16px 18px 4px !important; }
.ai1ec-posterboard-view .ai1ec-sas-actions .ai1ec-btn { float: none; padding: 6px 14px; }
.ai1ec-posterboard-view .ai1ec-event-description {
  margin: 12px 18px 6px !important; font-size: 14.5px !important; line-height: 1.7 !important;
}
.ai1ec-posterboard-view .ai1ec-event-title-wrap { padding: 2px 4px 0; }

.ai1ec-agenda-view .ai1ec-event-header { padding: 14px 18px 14px 20px !important; }
.ai1ec-agenda-view .ai1ec-event-header .ai1ec-sas-actions { margin: 0 14px 0 16px !important; }
.ai1ec-agenda-view .ai1ec-event-header .ai1ec-sas-actions .ai1ec-btn { padding: 5px 13px; }
.ai1ec-agenda-view .ai1ec-event-time { margin-top: 4px; }
.ai1ec-agenda-view .ai1ec-event-summary { padding: 6px 22px 20px 20px !important; font-size: 15px; line-height: 1.7; }
.ai1ec-agenda-view .ai1ec-event-summary p { margin: 0 0 .9em; }
/* Phones: Time.ly hides the word "Tickets" and leaves a bare icon; show it, there's room now. */
@media (max-width: 767px) {
  .timely .ai1ec-sas-actions .ai1ec-btn .ai1ec-hidden-xs { display: inline !important; }
}

/* Showpass sales tag beside the Tickets button ("Over 70% sold", "Sold out"; build.py sales_tag). */
.grjs-sales {
  display: inline-block; vertical-align: middle; margin-left: 10px; padding: 4px 11px;
  border-radius: 999px; border: 1px solid rgba(169, 122, 42, .45); background: #fbf3e2;
  color: #7a5212; font-family: var(--jr-display); font-size: 11px; font-weight: 600;
  letter-spacing: .03em; line-height: 1.4; white-space: nowrap; cursor: default;
}
.grjs-sales::before { content: ""; display: inline-block; width: 6px; height: 6px; margin: 0 6px 1px 0; border-radius: 50%; background: var(--jr-brass); vertical-align: middle; }
.grjs-sales-soldout { background: var(--jr-ink); border-color: var(--jr-ink); color: #fff; }
.grjs-sales-soldout::before { background: #e0574f; }
.ai1ec-posterboard-view .ai1ec-sas-actions .grjs-sales { margin-left: 8px; }
.ai1ec-agenda-view .ai1ec-event-header .grjs-sales { margin: 0 0 0 8px; }
.ai1ec-single-event .ai1ec-cost .grjs-sales { margin-left: 8px; }
.timely .ai1ec-sas-actions:has(.grjs-sales) { display: flex !important; flex-wrap: wrap; align-items: center; gap: 8px; }
.timely .ai1ec-sas-actions:has(.grjs-sales)::before, .timely .ai1ec-sas-actions:has(.grjs-sales)::after { display: none; }
.timely .ai1ec-sas-actions:has(.grjs-sales) > .ai1ec-btn { border-radius: 999px !important; float: none; }
.timely .ai1ec-sas-actions:has(.grjs-sales) > .grjs-sales { margin: 0 !important; }

/* Show date and time on one line. Wrapped, "Oct 23 @ 8:00 pm –" / "10:30 pm" also reads
   as two separate times to the Mac's date detection (hover → Add to Calendar). In the
   cards the time gets the full width under the name and date tile. */
.ai1ec-posterboard-view .ai1ec-event-time { white-space: nowrap; }
@media (min-width: 768px) {  /* three narrow columns: no room beside the date tile */
  .ai1ec-posterboard-view .ai1ec-event-time { clear: both; padding-top: 6px; }
}
.ai1ec-agenda-view .ai1ec-event-time,
.ai1ec-single-event .dt-duration { white-space: nowrap; }
@media (min-width: 992px) and (max-width: 1199px) {
  .ai1ec-posterboard-view .ai1ec-event-time { font-size: 12px !important; letter-spacing: -.01em; }
}
@media (max-width: 767px) {
  /* Show page: details box full width, the Calendar / Tickets / Add to Calendar buttons in a row under it. */
  .ai1ec-single-event .ai1ec-actions { float: none !important; display: flex; gap: 8px; margin: 0 0 14px !important; }
  .ai1ec-single-event .ai1ec-actions .ai1ec-btn-group-vertical { display: flex; flex-direction: row; }
  .ai1ec-single-event .ai1ec-btn-group-vertical > .ai1ec-btn { margin: 0 0 0 -1px !important; }
  .ai1ec-single-event .ai1ec-btn-group-vertical > .ai1ec-btn:first-child { border-radius: 10px 0 0 10px !important; margin-left: 0 !important; }
  .ai1ec-single-event .ai1ec-btn-group-vertical > .ai1ec-btn:last-child { border-radius: 0 10px 10px 0 !important; }
  .ai1ec-single-event .ai1ec-btn-group-vertical > .ai1ec-btn:only-child { border-radius: 10px !important; }
  .ai1ec-single-event .ai1ec-event-details { margin-right: 0 !important; }
  .ai1ec-single-event .ai1ec-time .ai1ec-field-value { font-size: 15px !important; letter-spacing: -.01em; }
}

/* ---------- Header grows and shrinks between pages ----------
   Cross-document view transitions (CSS only): moving between the home page's
   large header and the slim one on other pages, and back, morphs the header,
   logo and title instead of jumping. Browsers without support (e.g. Firefox
   for now) simply change pages as before. */
@view-transition { navigation: auto; }
.jr-hero { view-transition-name: jr-hero; }
.jr-logo { view-transition-name: jr-logo; }
.jr-title { view-transition-name: jr-title; }
.jr-kicker { view-transition-name: jr-kicker; }
.jr-tagline { view-transition-name: jr-tagline; }
.navbar.navbar-inverse { view-transition-name: jr-nav; }

::view-transition-group(*) { animation-duration: 1s; animation-timing-function: cubic-bezier(.4, 0, .2, 1); }
/* Page content: the old page fades out quickly, then the new one fades in, so text never overlaps. */
::view-transition-old(root) { animation: jr-fade-out .36s ease-in both; }
::view-transition-new(root) { animation: jr-fade-in .6s ease-out .3s both; }
@keyframes jr-fade-out { to { opacity: 0; } }
@keyframes jr-fade-in { from { opacity: 0; } }
/* The photo and text are snapshots: keep them in proportion while the box changes size. */
::view-transition-old(jr-hero), ::view-transition-new(jr-hero) { height: 100%; width: 100%; object-fit: cover; object-position: 30% 50%; }
::view-transition-old(jr-title), ::view-transition-new(jr-title),
::view-transition-old(jr-tagline), ::view-transition-new(jr-tagline),
::view-transition-old(jr-kicker), ::view-transition-new(jr-kicker) { height: 100%; width: auto; object-fit: contain; object-position: left center; }

@media (prefers-reduced-motion: reduce) {
  @view-transition { navigation: none; }
}

/* ---------- Trademark mark (™, unregistered) on the logo and the name ---------- */
.jr-tm {
  display: inline-block; font-size: .34em; font-weight: 500; letter-spacing: 0; line-height: 1;
  vertical-align: super; margin-left: .12em; text-transform: none;
}
.jr-title .jr-tm { vertical-align: top; margin-top: .32em; color: rgba(255, 255, 255, .75); }
#footer #copyright .jr-tm { font-size: .62em; vertical-align: top; margin: .1em 0 0 .15em; color: rgba(255, 255, 255, .75); }
.navbar .header_title .jr-tm { font-size: .6em; vertical-align: top; margin-top: .05em; letter-spacing: 0; }
.jr-logo { position: relative; }
.jr-logo .jr-tm {  /* just outside the brass ring, top right of the round logo */
  position: absolute; top: 4%; right: -22px; margin: 0;
  font-family: var(--jr-display); font-size: 15px; color: var(--jr-brass-hi);
}
body:not(.home) .jr-logo .jr-tm { font-size: 11px; right: -17px; top: 0; }
@media (max-width: 767px) {
  .jr-hero-inner, body:not(.home) .jr-hero-inner { column-gap: 26px; }  /* room for the logo's ™ */
  .jr-logo .jr-tm { font-size: 10px; right: -16px; top: -2px; }
  body:not(.home) .jr-logo .jr-tm { font-size: 9px; right: -14px; }
}

/* ---------- Phone fixes ---------- */
@media (max-width: 767px) {
  /* Header tagline: "Live jazz in Uptown Waterloo" and the address on separate lines. */
  .jr-tag-sep { display: none; }
  .jr-tag-line { display: block; white-space: nowrap; }

  /* Calendar cards: Tickets (and the Showpass sales tag) on their own line right under
     the date and time, above the photo, left-aligned. */
  .ai1ec-posterboard-view .ai1ec-posterboard-image-container { display: flex; flex-direction: column; clear: both; margin-top: 10px; }
  .ai1ec-posterboard-view .ai1ec-posterboard-image-container > .ai1ec-sas-actions {
    order: -1; display: flex !important; flex-wrap: wrap; align-items: center; justify-content: flex-start;
    gap: 8px; margin: 0 18px 14px !important;
  }
  .ai1ec-posterboard-view .ai1ec-posterboard-image-container > .ai1ec-sas-actions > .ai1ec-btn { border-radius: 999px !important; }

  /* Month list: name and the expand icon on the first line, then the date and time,
     then Tickets and the sales tag on their own line, left-aligned. */
  .ai1ec-agenda-view .ai1ec-event-header { display: flex !important; flex-wrap: wrap; align-items: flex-start; }
  .ai1ec-agenda-view .ai1ec-event-header::before, .ai1ec-agenda-view .ai1ec-event-header::after { display: none; }
  .ai1ec-agenda-view .ai1ec-event-header > .ai1ec-event-title { order: 1; flex: 1 1 0; min-width: 0; }
  .ai1ec-agenda-view .ai1ec-event-header > .ai1ec-event-toggle { order: 2; float: none; position: static; margin-left: 10px; }
  .ai1ec-agenda-view .ai1ec-event-header > .ai1ec-event-time { order: 3; flex: 1 1 100%; }
  .ai1ec-agenda-view .ai1ec-event-header > .ai1ec-sas-actions {
    order: 4; flex: 1 1 100%; float: none !important; display: flex !important; flex-wrap: wrap;
    align-items: center; justify-content: flex-start; gap: 8px; margin: 10px 0 0 !important;
  }
  .ai1ec-agenda-view .ai1ec-event-header > .ai1ec-sas-actions > .ai1ec-btn { border-radius: 999px !important; float: none; }
  .ai1ec-agenda-view .ai1ec-event-header .grjs-sales { margin: 0 !important; }
  /* Time.ly's clearfix spacers would count as items in these rows and push Tickets right. */
  .ai1ec-posterboard-view .ai1ec-sas-actions::before, .ai1ec-posterboard-view .ai1ec-sas-actions::after,
  .ai1ec-agenda-view .ai1ec-sas-actions::before, .ai1ec-agenda-view .ai1ec-sas-actions::after { display: none !important; }
}
@media (max-width: 767px) {  /* compact Tickets button and sales tag so they share a line */
  .ai1ec-agenda-view .ai1ec-event-header { padding: 13px 12px 14px 14px !important; }
  .timely .ai1ec-sas-actions { gap: 6px !important; }
  .timely .ai1ec-sas-actions > .ai1ec-btn-primary { padding: 5px 10px !important; font-size: 10.5px !important; letter-spacing: .04em; }
  .timely .ai1ec-sas-actions .grjs-sales { padding: 3px 8px; font-size: 10px; letter-spacing: 0; }
  .timely .ai1ec-sas-actions .grjs-sales::before { width: 5px; height: 5px; margin-right: 4px; }
}
/* Time.ly hides every span in month-list ticket areas below 992px; keep the sales tag. */
.ai1ec-agenda-view .ai1ec-event .ai1ec-sas-actions span.grjs-sales { display: inline-block !important; }

/* Tickets button while Showpass's checkout script loads (site.js, first click only). */
.timely .ai1ec-btn.grjs-tickets-loading { opacity: .6; cursor: progress; }