@charset "UTF-8";

/* Base typography. Avoid overflow:hidden on the page: it breaks sticky scrolling. */
html {
	width:100%;
	height:100%;
}
body {
	/* Contain the negative-z-index photograph above the body's black background. */
	z-index:0;
	font-family:"Source Code Pro", monospace;
	color:#585858;
	font-size:16px;
	width:100%;
	height:100%;
	position: relative;
	background-color:#000;
	margin:auto;
}

/* Clip only decorative layers so wide photos never create horizontal scrolling. */
#background{
  overflow:hidden;
z-index: -1;
  position: fixed;
  margin: auto;
  width: 100%;
  height: 100%;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  background-color: #000;}

#background img{
	overflow: hidden;
	min-height: 100%;
	max-height: 100%;
  width: auto;
  height: auto;
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
 }

body a{
	text-decoration:underline;
	color:#315cf3;
}

body a:visited{
	color:#315cf3;	
}

/* The image scales inside a fixed, clipped layer during the opening fly-through. */
#qoniak_logo{
	overflow:hidden;
	pointer-events:none;
	position:fixed;
	width:100%;
	text-align: center;
	height: 100%;
}
#qoniak_logo img{
	transform-origin:center center;
	will-change:transform;
	position:absolute;
	display: table-cell;
	vertical-align: middle;
	top:38%;
	margin: auto;
	  left: 0;
	  right: 0;
	  text-align: center;
	width:50%;
}
.photo_credits{
	color: #CCCCCC;
	font-size:10px;
	position:fixed;
	bottom:0px;
	right:0px;
	z-index:1;
}
.social{
	position:fixed;
	bottom:5px;
	left:14px;
	z-index:1;
}

.social img, .menu-item img{
	width:30px;
}
/* Long headings and URLs must wrap instead of widening a narrow phone screen. */
h2{
	color:#575757;
	font-size:40px;
	font-weight:700;
	padding:0;
	margin:0;
}
h3{
	color:#575757;
	font-size:22px;
	font-weight:700;
	margin:0;
}

.centered{
	width:100%;
	height:120%;
	text-align:center;
}

.fixed {
   position: fixed;
   top: 0px;
   width: 100%;
   box-shadow: 0 2px 2px rgba(0,0,0,0.3);
}

.small_text{
	font-size:12px;
}
/* Navigation is visible from page load and stays above the panels and footer. */
#menu{
	position:fixed;
	top:0;
	left:0;
	z-index: 100;
	width:99%;
	padding-left:1%;
	font-weight:700;
}

/* A real button provides keyboard activation and a comfortable touch target. */
#menu-toggle{
    display:block;
    width:44px;
    height:44px;
    padding:7px;
    border:0;
    background:transparent;
    cursor:pointer;
}
#menu-toggle:focus-visible{ outline:2px solid yellow; }
#menu-toggle img{ display:block; width:30px; margin:0; }
#menu-toggle #menu-logo-close{ display:none; }
#menu-toggle[aria-expanded="true"] #menu-logo{ display:none; }
#menu-toggle[aria-expanded="true"] #menu-logo-close{ display:block; }
nav.is-open{
    opacity:1;
    visibility:visible;
    pointer-events:auto;
    transition-delay:0s;
}

/* Optional synthesized scroll audio: visible, touch-sized control, silent by default. */
#scroll-sound-toggle{
    position:fixed;
    top:0;
    right:10px;
    z-index:102;
    width:44px;
    min-height:44px;
    padding:8px;
    border:0;
    border-radius:0 0 4px 4px;
    color:yellow;
    background:rgba(0,0,0,0.65);
    font:12px "Source Code Pro", monospace;
    cursor:pointer;
}
#scroll-sound-toggle[aria-pressed="true"]{ color:#fff; }
#scroll-sound-toggle:focus-visible{ outline:2px solid yellow; }
/* The accessible pressed state also switches the speaker's waves/mute mark. */
#scroll-sound-toggle svg{
    display:block;
    width:28px;
    height:28px;
    fill:none;
    stroke:currentColor;
    stroke-width:1.8;
    stroke-linecap:round;
    stroke-linejoin:round;
}
#scroll-sound-toggle .sound-waves{ display:none; }
#scroll-sound-toggle[aria-pressed="true"] .sound-waves{ display:inline; }
#scroll-sound-toggle[aria-pressed="true"] .sound-muted{ display:none; }

#menu-logo{
	width: 30px;
	margin-top: 8px;
}

#menu-logo-close{
	width: 30px;
	margin-top: 8px;
	display:none;
}

nav{
	top:0;
	position:fixed;
	/* Keep the overlay rendered so opacity can animate in both directions.
	   Hide it only after the closing fade; closed menus cannot intercept clicks. */
	visibility:hidden;
	pointer-events:none;
	left:0;
	width:100%;
	overflow-y:auto;
	height:100%;
	height:100vh;
	height:100dvh; /* Follow the visible window when mobile browser bars move. */
	opacity:0;
	transition:opacity .28s ease-in-out, visibility 0s linear .28s;
	background-color:#162458;
	background-color:rgba(0, 0, 0, 0.9);
	z-index:99;
}
nav ul{
	margin:0px 0px 0 0px;
	padding:0;
	list-style: none;
	box-sizing:border-box;
	display:flex;
	flex-direction:column;
	justify-content:center;
	min-height:100%;
	padding:50px 0 20px;
	width:100%;

}

nav ul li {
	width:100%;
	padding:7px 0;
	text-align: center;
}

nav ul li a.menu_link {
	text-decoration: none;
	font-weight: bold;
	color:yellow;
	text-transform: uppercase;
	font-size: 25px;
	letter-spacing: 0.2em;
}

nav ul li a.menu_link:visited {
	color:yellow;
}

/* Stable small-viewport units keep the opening artwork clear of mobile toolbars.
   The preceding vh declarations remain fallbacks for older browsers. */
.intro-spacer{ height:100vh; height:100svh; }
#main-content{
	position:relative;
	z-index:90;
	padding-top:50vh;
	padding-top:50svh; /* Logo disappears before the first panel enters. */
	--box-top-padding: 50px;
}

#left_column{
	background-color:#e2e2e2;
	width:39.5%;
	margin:10px 2.5% 0px 5%;
	text-align: justify;
	padding:1%;
	border: 2px red solid;
	border-radius: 2px;
	box-shadow: 0px 2px 10px 1px rgba(0,0,0,0.25);
}
/* Section wrappers carry anchors; individual boxes carry all visual styling. */
.right_column{
	margin-left:40%;
	width:60%;
	position: relative;
}
.boxwrapper{
    position:relative;
    margin:0;
    padding:0;
}
.boxitem{
	box-sizing:border-box;
	overflow-wrap:break-word;
	position:relative;
	background-color:#e2e2e2;
	width:96%;
	margin:0 5% 40px 0%;
	padding:1%;
	border: 2px #dbdb00 solid;
	border-radius: 2px;
	box-shadow: 0px 2px 10px 1px rgba(0,0,0,0.25);
}

/* JS centers panels that fit the window by assigning a height and sticky top.
   A negative top on a taller panel lets all its contents scroll into view first.
   Keep all stage ancestors free of overflow:auto/hidden and transforms. */
.scroll-sequence .box-stage{
    position:relative;
    display:flow-root;
    overflow-anchor:none;
}
.scroll-sequence .box-stage > .boxitem{
    position:sticky;
    margin-top:0;
    margin-bottom:0;
}
.boxwrapper, .boxitem, .box-stage{
    scroll-margin-top:var(--box-top-padding, 50px);
}

/* Native CSS grid replaces the old masonry scripts. Without grid support,
   the video items remain readable as a simple vertical list. */
.grid{
    display:grid;
    grid-template-columns:repeat(2, minmax(0, 1fr));
    gap:20px;
    width:100%;
    margin:10px 0 0;
}
.item{ min-width:0; }
.videoWrapper {
	position: relative;
	padding-bottom: 56.25%; /* 16:9 */
	height: 0;
}
.videoWrapper iframe {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
}

/* Embeds and images stay inside the border-box panel at every viewport width. */
.boxitem img, .boxitem iframe{ max-width:100%; }
.boxitem iframe{ border:0; }
[hidden]{ display:none !important; }

/* JavaScript collapses the concert archive; it remains visible without scripts. */
.live_table{
	width: 100%;
}
.live_table td{
	vertical-align: text-top;
}
.live_table .live_table_col1{
	width:25%;
}
.live_table .live_table_col2{
}

/* Concerts use the original compact table spacing, type size and inline links.
   Long city/venue names may wrap on phones without widening the panel. */
.concert-table td { overflow-wrap:anywhere; }

#footer{
	overflow:hidden;
	border-top:10px solid red;
	position:relative;
	z-index:90;
	background-color:black;
	min-height: 100vh;
	height:100vh;
	}
	
#footer img{
	overflow: hidden;
	min-height: 100%;
	max-height: 100%;
  width: auto;
  height: auto;
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
}

/* Keep the ordinary footer as a no-JS fallback. With the scroll sequence active,
   its scene covers the viewport while the footer itself remains a scroll spacer.
   Clip the fixed scene locally, not its ancestors, and leave navigation clickable. */
.footer-crossfade #footer{
    overflow:visible;
    border-top:0;
    background:transparent;
}
.footer-crossfade .footer-scene{
    position:fixed;
    top:0;
    right:0;
    bottom:0;
    left:0;
    overflow:hidden;
    opacity:0;
    visibility:hidden;
    pointer-events:none;
}
.footer-crossfade #footer img{
    /* Match the opening photo's height-based sizing, including on wide screens.
       Stationary instrument landmarks give a 1.01428× scale, -0.608° rotation,
       and a small right/down offset. Percentages track the image on every screen. */
    width:auto;
    height:100%;
    transform:translate(-49.6132%, -49.1392%) rotate(-0.608deg) scale(1.01428);
}

/* Tablets: center the column. Border-box sizing includes padding and borders. */
@media screen and (max-width: 1100px) {
	.right_column{
		width:80%;
		margin:0% 10%;
	}
	.boxitem{
		width:100%;
		margin:0 0 40px;
		padding:1%;
	}
}

/* Phones: readable videos, wrapping text, and space around the edges. */
@media screen and (max-width:600px){
    .right_column{ width:92%; margin:0 4%; }
    .boxitem{ padding:12px; }
    h2{ font-size:28px; }
    h3{ font-size:20px; }
    .grid{ grid-template-columns:minmax(0, 1fr); }
    .live_table{ table-layout:fixed; }
    .live_table td:first-child{ width:30%; }
    .live_table td[colspan]{ width:auto; }
}

/* Reduced motion keeps the fade but disables the large logo zoom in JavaScript. */
@media (prefers-reduced-motion:reduce){
    #qoniak_logo img{ will-change:auto; }
    nav{ transition:none; }
}

/* Printed pages should include panels already faded out on screen. */
@media print{
    #background, #qoniak_logo, #menu, #scroll-sound-toggle, nav, .intro-spacer, .social, .photo_credits, #footer{ display:none; }
    #main-content{ padding:0; }
    .right_column{ width:100%; margin:0; }
    .scroll-sequence .box-stage{ height:auto !important; }
    .scroll-sequence .box-stage > .boxitem{
        position:relative;
        top:auto !important;
        opacity:1 !important;
        visibility:visible !important;
        margin-bottom:20px;
    }
}