@font-face {
	font-family: "Rubik Dirt";
	src: url("public/RubikDirt-Regular.ttf") format("truetype");
	font-style: normal;
	font-weight: 400;
	font-display: swap;
  }

  @font-face {
	font-family: "Special Elite";
	src: url("public/SpecialElite-Regular.ttf") format("truetype");
	font-style: normal;
	font-weight: 400;
	font-display: swap;
  }

  :root {
	/* Change these four values to recolor every section. */
	--light-bg: #ffffff;
	--light-text: #000000;
	--dark-bg: #000000;
	--dark-text: #ffffff;
	--page-padding: clamp(1.25rem, 5vw, 3rem);
	--section-spacing: clamp(3rem, 6vw, 5rem);
	--divider-clearance: clamp(2rem, 4vw, 4rem);
  }

  * { box-sizing: border-box; }

  html {
	font-size: 14px;
	scroll-behavior: smooth;
  }

  body {
	margin: 0;
	background: var(--light-bg);
	color: var(--light-text);
	font-family: "Special Elite", "Courier New", monospace;
	line-height: 1.4;
	-webkit-font-smoothing: antialiased;
  }

  img {
	display: block;
	width: 100%;
	height: auto;
  }
  
  a{ color: #ccc; text-decoration: underline; }
  a:hover { color:white; }

  .section {
	position: relative;
	width: 100%;
	padding: var(--section-spacing) var(--page-padding);
  }

  .section:not(:last-child) {
	padding-bottom: calc(var(--section-spacing) + var(--divider-clearance));
  }

  .section--light {
	background: var(--light-bg);
	color: var(--light-text);
  }

  .section--dark {
	background: var(--dark-bg);
	color: var(--dark-text);
  }

  .section:not(:last-child)::after {
	content: "";
	position: absolute;
	z-index: 2;
	right: 0;
	bottom: -1px;
	left: 0;
	height: clamp(34px, 3.5vw, 65px);
	background-position: center bottom;
	background-repeat: no-repeat;
	background-size: 100% 100%;
	pointer-events: none;
  }

  .section--light:not(:last-child)::after {
	background-image: url("_img/divider_black.png?v=20260812-012828");
  }

  .section--dark:not(:last-child)::after {
	background-image: url("_img/divider_white.png?v=20260812-012536");
  }

  .section > .content-block {
	position: relative;
	z-index: 3;
  }

  .content-block {
	width: 100%;
	max-width: 1000px;
	margin-inline: auto;
  }

  .hero {
	display: grid;
	align-items: end;
  }
  
  .emphasize{
	font-family: "Rubik Dirt", "Arial Black", sans-serif;
	font-size: 2em;
	margin: 80px auto;
  }
  
  .sub-section{
	margin: 20px auto;
  }

  .space-after {
	margin-bottom: clamp(2.5rem, 5vw, 4rem);
  }
  
  .video {
	  position: relative;
	  width: 100%;
	  padding-bottom: 56.25%;
	  margin:40px auto;
	  height: 0;
	}

	.video iframe {
	  position: absolute;
	  top: 0;
	  left: 0;
	  width: 100%;
	  height: 100%;
	}
  
  .note{
	font-style: italic;
	color: #999;
	padding-top:20px;
	margin-top:20px;
	border-top:6px solid #efefef;
	text-align:left;
  }
  
  .intro{ margin-bottom:40px; }
  
  .member{
		height: auto;
		text-align: center;
  }

  .member-row {
	display: flex;
	gap: clamp(0.75rem, 2vw, 1.5rem);
	align-items: stretch;
  }

  .member-row .member {
	flex: 1 1 0;
	float: none;
	width: auto;
	min-width: 0;
  }

  .member-photo {
	height: clamp(360px, 48vw, 600px);
	overflow: hidden;
	background: #d9d7d1;
  }

  .member-row .member img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center top;
	transform: scale(1.3);
	transform-origin: center top;
  }

  .member-row .member:nth-child(4) img {
	object-position: left top;
	transform: none;
  }

  .member-name {
	margin: 1.25rem 0 0.2rem;
	font-family: "Rubik Dirt", "Arial Black", sans-serif;
	font-size: clamp(1.7rem, 3vw, 2.5rem);
	font-weight: 400;
	line-height: 1;
	text-align: center;
  }

  .member-instrument {
	margin: 0;
	font-size: 0.8rem;
	font-weight: 700;
	letter-spacing: 0.14em;
	text-align: center;
	text-transform: uppercase;
  }
  
  .section--dark .note{
	border-color:#222;
  }

  h1, h2 { margin-top: 0; }

  h1, h2, h3 {
	font-family: "Rubik Dirt", "Arial Black", sans-serif;
	margin-bottom: 1.25rem;
	font-weight: 800;
	letter-spacing: -0.045em;
	line-height: 0.95;
  }

  h1 {
	font-size: clamp(4rem, 14vw, 9.5rem);
	font-family: "Rubik Dirt", "Arial Black", sans-serif;
	font-weight: 400;
	letter-spacing: -0.035em;
	text-transform: uppercase;
  }

  h2 {
	font-size: clamp(2.5rem, 6vw, 5.5rem);
  }
  
  h3 {
	font-size: 2em;
	line-height:1.3em;
	margin-top:40px;
  }

  p {
	margin: 15px auto;
	font-size: clamp(1rem, 1.4vw, 1.15rem);
  }

  .eyebrow {
	margin-bottom: 1rem;
	font-size: 0.75rem;
	font-weight: bold;
	letter-spacing: 0.16em;
	text-transform: uppercase;
  }

  .lede {
	max-width: 38ch;
	margin-bottom: 0;
	font-size: clamp(1.2rem, 2.5vw, 1.75rem);
  }

  /* Generic float-based columns. Combine a width with float-left/right. */
  .column-row {
	--column-gap: clamp(1.5rem, 5vw, 4rem);
	width: 100%;
	margin-inline: 0;
  }

  .column-row::after {
	content: "";
	display: table;
	clear: both;
  }
  
  .clear{ clear: both; }
  
  .align-right{ text-align: right; }
  
  .contact_info{
  	font-size:1.2em;
  	text-transform:uppercase;
  	text-align:center;
  	font-weight:bold;
  	margin-top:-50px;
  	margin-bottom:40px;
	font-family: "Rubik Dirt", "Arial Black", sans-serif;
	border: 3px solid white;
	border-radius:10px;
	padding: 15px;
	}
  .contact_info a{ padding:0 8px; }
  .section--light .contact_info{ border-color:black; color:gray; }
  .section--light .contact_info a{ color:black; }
  .section--light .contact_info a:hover{ color:gray; }

  .one-quarter-column { width: calc(25% - (var(--column-gap) * 0.75)); }
  .one-third-column { width: calc(33.333% - (var(--column-gap) * 0.667)); }
  .half-column { width: calc(50% - (var(--column-gap) * 0.5)); }
  .two-thirds-column { width: calc(66.667% - (var(--column-gap) * 0.333)); }
  .three-quarters-column { width: calc(75% - (var(--column-gap) * 0.25)); }

  .float-left { float: left; }
  .float-right { float: right; }

  .image-grid {
	--column-gap: clamp(1.5rem, 5vw, 4rem);
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: var(--column-gap);
  }

  .image-grid .half-column {
	float: none;
	width: 100%;
  }

  .feature-copy p:last-child,
  .centered p:last-child { margin-bottom: 0; }

  .photo-frame {
	overflow: hidden;
	background: #d9d7d1;
  }

  .photo-frame img {
	width: 100%;
	height: auto;
  }

  .centered {
	display: flex;
	flex-direction: column;
	align-items: center;
	text-align: center;
  }
  
  #players{
	max-width:700px;
	margin:40px auto;
  }
  
  #players iframe{
	margin:10px auto;
  }

  @media (max-width: 760px) {
	.hero { min-height: 75svh; }

	.one-quarter-column,
	.one-third-column,
	.half-column,
	.two-thirds-column,
	.three-quarters-column {
	  float: none;
	  width: 100%;
	  margin-bottom: 2.5rem;
	}

	.column-row > :last-child { margin-bottom: 0; }

	.image-grid {
	  grid-template-columns: 1fr;
	}

	.image-grid .half-column {
	  margin-bottom: 0;
	}

	.member-row {
	  display: grid;
	  grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	.member-row .member {
	  width: 100%;
	  margin-bottom: 0;
	}

	.member-photo {
	  height: clamp(320px, 80vw, 520px);
	}
  }

  @media (max-width: 380px) {
	:root { --page-padding: 1rem; }

	.member-row {
	  grid-template-columns: 1fr;
	}
  }