/* element selectors */

/* CHANGE font-family and font-size to whatever you feelin' - this will modify the navigation bar font */
nav {
  font-family: 'Bodoni 72 Oldstyle Web', 'Bodoni 72 Oldstyle', Georgia, serif;
  text-align: center;
  font-size: 42px;
  height: auto;
}

html {
  height: 100%;
}

hr {
  width: 100%;
}

/* CHANGE background-color to whatever you desire - this will modify background color for all pages */
body {
  background-color: #4692ff;
  display: flex;
  flex-direction: column;
  height: 100%;
}

header {
  text-align: center;
}

footer {
  text-align: center;
  font-weight: bold;
}

/* class selectors */

.overflow-y-hidden {
  overflow-y: hidden;
}
.container {
  width: 100%;
  max-width: 1920px;
  margin: 0 auto;
}

.header {
  display: flex;
  position: relative;
  justify-content: space-between;
  padding-top: 1rem;
}

.menu-btn {
  display: none;
}

.header nav {
  width: 100%;
  display: flex;
  justify-content: space-evenly;
  align-items: center;
  z-index: 999;
}

.center {
  margin-left: auto;
  margin-right: auto;
}
.logo {
  width: 165px;
  height: auto;
}
.column {
  float: left;
  width: 48.9%;
  padding: 8px;
}
.row::after {
  content: "";
  clear: both;
  display: table;
  /* clear floats after image containers */
}

/* subsection start - rollover image styles */
.album {
  position: relative;
  max-width: 100%;
}
.album img.Sirv.image-hover {
  position: absolute;
  top: 0;
  right: 0;
  left: 0;
  bottom: 0;
  object-fit: contain;
  opacity: 0;
  transition: opacity 0.2s;
}
.album:hover img.Sirv.image-hover {
  opacity: 1;
}

.album-item {
  position: relative;
  max-width: 100%;
}

.album-item img.Sirv.image-hover {
  position: absolute;
  top: 0;
  right: 0;
  left: 0;
  bottom: 0;
  object-fit: contain;
  opacity: 0;
  transition: opacity 0.2s;
}
.album-item:hover img.Sirv.image-hover {
  opacity: 1;
}

/* subsection end - rollover image styles */

/* subsection start - social media ish */
.fa {
  padding: 20px;
  font-size: 30px;
  width: 50px;
  text-align: center;
  text-decoration: none;
  margin: 5px 2px;
}
.fa:hover {
  opacity: 0.7;
}
.fa-facebook {
  background: #3b5998;
  color: white;
}
.fa-twitter {
  background: #55acee;
  color: white;
}
.fa-youtube {
  background: #bb0000;
  color: white;
}
.fa-instagram {
  background: #125688;
  color: white;
}
.fa-soundcloud {
  background: #ff5500;
  color: white;
}
/* subsection end - social media ish */

/* CHANGE border hex number to modify color of border; CHANGE max-width + margin-left if necessary - this will modify picture details on About page */
.about_us_pic {
    float: right;
    width: 40% !important;
    max-width: 500px !important;
    height: auto !important;
    box-sizing: border-box;
    padding: 7px;
    border: 5px ridge #C9D7F3;
    margin-left: 40px;
    margin-bottom: 20px;
}

@media (max-width: 600px) {
    .about_us_pic {
        float: none;
        display: block;
        width: 100%;
        max-width: 400px;
        margin: 0 auto 24px;
    }
}

/* CHANGE font-family, color, font-size, etc. to whatever you fancy - this will modify paragraph text on About page */
.about_us_text {
  font-family: 'Bodoni 72 Oldstyle Web', 'Bodoni 72 Oldstyle', Georgia, serif; 
  color: #C9D7F3;
  font-size: 20px;
  margin-top: 40px;
  margin-bottom: 0px;
  margin-left: 127px;
  margin-right: auto;
}

/* CHANGE font-family, color, font-size, etc. to whatever you prefer - this will modify header text on Music page */
.disc_header {
  font-family: 'Bodoni 72 Oldstyle Web', 'Bodoni 72 Oldstyle', Georgia, serif;
  color: #C9D7F3;
  font-size: 42px;
  padding: 0px;
  margin: 0px;
  text-align: center;
}

.disc_album_table {
  width: 1050px;
  margin-left: auto;
  margin-right: auto;
}

/* CHANGE border hex number to modify color of border on Music page */
.disc_album_images {
  width: 100%;
  height: auto;
  border: 5px solid #C9D7F3;
  border-style: ridge;
}

/* CHANGE font-family to whatever you vibin' with - this will modify album caption text on Music page */
.disc_album_captions {
  font-family: 'Bodoni 72 Oldstyle Web', 'Bodoni 72 Oldstyle', Georgia, serif;
  text-align: center;
  padding: 3px;
}

.album-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  max-width: 1060px;
  margin: auto;
}

.album-item {
  max-width: 435px;
}

/* CHANGE font-family, color, font-size, etc. to whatever you dig - this will modify header text on Videos page */
.vids_header {
  font-family: 'Bodoni 72 Oldstyle Web', 'Bodoni 72 Oldstyle', Georgia, serif;
  color: #C9D7F3;
  font-size: 42px;
  padding: 5px;
  margin: 0px;
  text-align: center;
}

.row {
  margin: 2rem auto;
  display: flex;
  flex-wrap: wrap;
  gap: 0.8rem;
  justify-content: center;
}

.row iframe {
  max-width: 100%;
}

.shorts-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  margin: 1rem auto;
  gap: 0.8rem;
}

.buzz_pic {
  width: 500px;
  max-width: 80%;
  border: 5px solid #e3a51d;
  padding: 7px;
  margin: 15px auto;
  border-style: ridge;
  display: block;
  text-align: center;
}

.resilient_you_date {
  font-family: 'Bodoni 72 Oldstyle Web', 'Bodoni 72 Oldstyle', Georgia, serif;
  color: #3b82b8;
  font-size: 27px;
  padding: 0px;
  margin: 0px;
  text-align: center;
}
.check_it_out_podcast_button {
  text-align: center;
  padding: 0px;
  margin-left: auto;
  font-size: 18px;
}

.check {
  background-color: #7c325a;
  color: white;
  padding: 14px 25px;
}

/* id selectors */
#single {
  border-radius: 25px;
  display: block;
  margin-left: auto;
  margin-right: auto;
  max-width: 33%;
  padding: 0px;
}
#collagecaption {
  text-align: center;
  }

footer {
  display: flex;
  justify-content: center;
  gap: 4rem;
  margin-top: auto;
  padding: 2rem 0;
}

/* CHANGE fill color on social media links at bottom of each page */
footer svg {
  width: 30px;
  height: 20px;
  fill: #C9D7F3;
}

/* CHANGE fill color on social media links when being hovered over at bottom of each page */
footer svg:hover {
  fill: #0044fe;
}

/* link stuff */

/* CHANGE font-family, font-size, etc. to whatever you want - this will modify "[curent single] ~ Now Streaming" on Home page */
.single_link {
  font-family: 'Bodoni 72 Oldstyle Web', 'Bodoni 72 Oldstyle', Georgia, serif;
  font-size: 42px;
  padding: 0px;
  margin: 0px;
  text-align: center;
  display: block;
}

/* CHANGE initial color of single link on Home page */
.single_link:link {
  color: #f7f5f4;
  background-color: transparent;
  text-decoration: none;
}

/* CHANGE color of single link after it has been clicked once before on Home page */
.single_link:visited {
  color: #f7f5f4;
  background-color: transparent;
  text-decoration: none;
}

/* CHANGE color of single link when it is hovered over on Home page */
.single_link:hover {
  color: #0044fe;
  background-color: transparent;
}

/* CHANGE color of single link at the split moment the link is clicked on Home page */
.single_link:active {
  color: #99b5d2;
  background-color: transparent;
}

/* CHANGE color of navigation bar links - the same link, visited, hover, active rules apply just as with single links above^ */
.nav_links:link {
  color: #C9D7F3;
  background-color: transparent;
  text-decoration: none;
}

.nav_links:visited {
  color: #C9D7F3;
  background-color: transparent;
  text-decoration: none;
}

.nav_links:hover {
  color: #0044fe;
  background-color: transparent;
}

.nav_links:active {
  color: #99b5d2;
  background-color: transparent;
}

/* CHANGE color of all other links (mainly album cover captions on Music page) - the same link, visited, hover, active rules apply just as with single links above^ */
a:link {
  color: #C9D7F3;
  background-color: transparent;
  text-decoration: none;
}

a:visited {
  color: #C9D7F3;
  background-color: transparent;
  text-decoration: none;
}

a:hover {
  color: #0044fe;
  background-color: transparent;
  text-decoration: underline;
}

a:active {
  color: #99b5d2;
  background-color: transparent;
  text-decoration: underline;
}

























/* for tablet screens */

@media screen and (max-width: 820px) {
  .header {
    flex-direction: column;
    gap: 1.4rem;
    justify-content: center;
    align-items: center;
    padding: 0.4rem;
  }

  .album {
    max-width: 435px;
    margin: auto;
  }

  .album-grid {
    grid-template-columns: 1fr;
    margin: 1rem;
  }

  .album-item {
    margin: 1rem auto;
  }

  .about_us_pic {
    margin: auto;
    display: flex;
  }

  .about_us_text {
    margin-left: 0;
  }

  #tuxes {
    float: unset;
    margin: 0;
    margin-top: 20px;
  }

  #single {
    max-width: 80%;
  }

  footer {
    gap: 2.8rem;
  }
}

























/* for mobile screens */
@media screen and (max-width: 580px) {

/*CHANGE font-size and background-color of mobile navigation panel that pops up from left side of screen */
  .header nav {
    font-size: 42px;
    position: fixed;
    left: 0;
    top: 0;
    bottom: 0;
    flex-direction: column;
    background-color: #C9D7F3;
    width: 50%;
    transform: translateX(-100%);
    transition: all 250ms;
  }

  .header nav.active {
    transform: translateX(0);
  }

  .menu-btn {
    display: flex;
    flex-direction: column;
    position: absolute;
    right: 10px;
    margin-top: auto;
    margin-bottom: auto;
    height: fit-content;
    gap: 4px;
  }

/*CHANGE background-color to modify color of three little horizontal lines and "X" that appear in top left corner of mobile to access the navigation panel */
  .menu-btn div {
    background-color: #C9D7F3;
    width: 20px;
    height: 3px;
    transition: all 100ms;
  }

  .menu-btn.active div:nth-child(1) {
    transform: rotate(45deg);
  }
  .menu-btn.active div:nth-child(2) {
    display: none;
  }
  .menu-btn.active div:nth-child(3) {
    transform: rotate(-45deg) translateY(-5px) translateX(5px);
  }
 
/* CHANGE initial color of text link on on mobile navigation panel */
  .nav_links:link {
  color: #0c163a;
  background-color: transparent;
  }

/* CHANGE color of text link after it has been clicked once before on mobile navigation panel */
  .nav_links:visited {
  color: #0c163a;
  background-color: transparent;
  }

/* CHANGE color of text link when it is hovered over on mobile navigation panel (not that relevant in all honesty since it is touch screen) */
  .nav_links:hover {
  color: #0044fe;
  background-color: transparent;
  }

/* CHANGE color of single link at the split moment the link is clicked on mobile navigation panel */
  .nav_links:active {
  color: #99b5d2;
  background-color: transparent;
} 

  .resilient_you_date {
    font-size: 22px;
  }

  .album:hover img.Sirv.image-hover {
  opacity: 0;
  }

  .album-item:hover img.Sirv.image-hover {
  opacity: 0;
  }
 
/* CHANGE size of single link if needed */
  .single_link {
    font-size: 35px;
  }
 
/* CHANGE color of border as well as margin sizes for group pic in About page */
  .about_us_pic {
  display: block;
  margin-left: 10px;
  margin-right: 10px;
  margin-bottom: 20px;
  max-width: 90%;
  padding: 7px;
  border: 5px solid #C9D7F3;
  border-style: ridge;
}

/* CHANGE margin sizes for paragraph text in About page */
  .about_us_text {
    margin-left: 10px;
	margin-right: 10px;
  }

/* CHANGE single cover art size in Home page */
  #single {
    max-width: 100%;
  }

  footer {
    gap: 1.6rem;
  }
  
}

@media screen and (max-width: 420px) {
  .album-grid {
    gap: 1rem;
    margin: 1rem 2rem;
  }
  .album-item {
    margin: 1rem 2rem;
  }

/* CHANGE size of single link if needed - for very small mobile screens */
  .single_link {
    font-size: 33px;
  }
  
/* CHANGE color of border as well as margin sizes for group pic in About page - for very small mobile screens */
  .about_us_pic {
  display: block;
  margin-left: 10px;
  margin-right: 10px;
  margin-bottom: 20px;
  max-width: 88%;
  padding: 7px;
  border: 5px solid #C9D7F3;
  border-style: ridge;
}

/* CHANGE margin sizes for paragraph text in About page - for very small mobile screens */
  .about_us_text {
    margin-left: 10px;
	margin-right: 10px;
  }

/* CHANGE single cover art size in Home page - for very small mobile screens */
  #single {
  max-width: 90%;
  }

  footer {
    gap: 1rem;
  }
  footer svg {
    width: 25px;
    height: 20px;
  }

}

/* Videos page - 1995 basement TV/VHS layout */
.video-basement {
  width: min(1200px, calc(100% - 2rem));
  margin: 1rem auto 0;
}

.video-room-title {
  margin: 0 0 1.5rem;
}

.video-room {
  display: grid;
  grid-template-columns: minmax(300px, 420px) minmax(640px, 1fr);
  align-items: end;
  gap: clamp(2rem, 5vw, 5rem);
  min-height: 680px;
  padding: clamp(1rem, 3vw, 2rem);
  background:
    linear-gradient(90deg, rgba(32, 47, 49, 0.22) 0 1px, transparent 1px 64px),
    linear-gradient(180deg, rgba(32, 47, 49, 0.18) 0 1px, transparent 1px 64px),
    radial-gradient(circle at 72% 18%, rgba(238, 190, 98, 0.22), transparent 21rem),
    linear-gradient(180deg, rgba(82, 64, 43, 0.44) 0 55%, rgba(35, 24, 16, 0.72) 55% 56%, rgba(13, 10, 8, 0.94) 56% 100%),
    #171311;
  border: 3px solid #2b2119;
  box-shadow: inset 0 -55px 90px rgba(0, 0, 0, 0.35), 0 18px 45px rgba(0, 0, 0, 0.35);
}

.vhs-stack {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  filter: drop-shadow(0 18px 14px rgba(0, 0, 0, 0.45));
}

.vhs-tape {
  position: relative;
  min-height: 62px;
  margin-top: -2px;
  padding: 10px 20px 10px 58px;
  border: 2px solid #090909;
  border-radius: 4px;
  background:
    linear-gradient(90deg, #050505 0 14%, #171717 14% 17%, transparent 17% 83%, #101010 83% 86%, #050505 86% 100%),
    linear-gradient(180deg, #1c1c1b, #0b0b0b 58%, #191614);
  color: #111;
  cursor: pointer;
  transform: rotate(var(--tape-tilt, 0deg));
  transition: transform 160ms ease, filter 160ms ease;
}

.vhs-tape:nth-child(2n) {
  --tape-tilt: -0.7deg;
}

.vhs-tape:nth-child(3n) {
  --tape-tilt: 0.8deg;
}

.vhs-tape::before {
  content: "";
  position: absolute;
  left: 18px;
  top: 16px;
  width: 22px;
  height: 28px;
  border-radius: 2px;
  background: linear-gradient(180deg, #202020, #070707);
  border: 1px solid #333;
}

.vhs-tape span {
  display: block;
  min-height: 34px;
  padding: 5px 10px;
  background: #e9e6dd;
  border: 1px solid #bdb5a4;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.5);
  font-family: 'Bodoni 72 Oldstyle Web', 'Bodoni 72 Oldstyle', Georgia, serif;
  font-size: clamp(15px, 1.6vw, 21px);
  font-weight: bold;
  line-height: 1.12;
  letter-spacing: 0;
  text-align: center;
  text-transform: uppercase;
}

.vhs-tape:hover,
.vhs-tape:focus-visible {
  z-index: 2;
  filter: brightness(1.1);
  transform: translateX(18px) rotate(var(--tape-tilt, 0deg));
}

.vhs-tape.active {
  z-index: 3;
  transform: translateX(26px) rotate(var(--tape-tilt, 0deg));
}

.vhs-tape.active span {
  background: #fff8d8;
  border-color: #d4a94d;
}

.tube-tv {
  text-align: center;
}

.tv-shell {
  position: relative;
  width: min(100%, 760px);
  margin: 0 auto;
  padding: clamp(26px, 4vw, 44px) clamp(28px, 4.5vw, 52px) clamp(110px, 11vw, 132px);
  border-radius: 8% 8% 14% 14% / 6% 6% 10% 10%;
  background:
    radial-gradient(circle at 18% 88%, rgba(255, 255, 255, 0.09), transparent 10rem),
    linear-gradient(145deg, #4d5555 0%, #24292a 48%, #121516 100%);
  box-shadow:
    inset 0 0 0 4px #0c0f10,
    inset 0 -26px 60px rgba(0, 0, 0, 0.38),
    0 28px 48px rgba(0, 0, 0, 0.48);
}

.tv-screen {
  position: relative;
  aspect-ratio: 4 / 3;
  overflow: hidden;
  border: 18px solid #080909;
  border-radius: 7% / 9%;
  background: #121819;
  box-shadow:
    inset 0 0 35px rgba(255, 255, 255, 0.12),
    0 2px 0 rgba(255, 255, 255, 0.16);
}

.tv-screen iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
  z-index: 1;
}

.tv-glass {
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
  background:
    linear-gradient(90deg, rgba(255, 255, 255, 0.04) 50%, rgba(0, 0, 0, 0.04) 50%),
    radial-gradient(ellipse at 28% 10%, rgba(255, 255, 255, 0.32), transparent 22%),
    radial-gradient(ellipse at 72% 18%, rgba(255, 255, 255, 0.14), transparent 28%),
    radial-gradient(ellipse at center, transparent 55%, rgba(0, 0, 0, 0.24));
  background-size: 4px 100%, auto, auto, auto;
  mix-blend-mode: screen;
}

.tv-static {
  position: absolute;
  inset: 0;
  z-index: 3;
  pointer-events: none;
  opacity: 0;
  background:
    repeating-linear-gradient(0deg, rgba(255, 255, 255, 0.42) 0 1px, rgba(0, 0, 0, 0.42) 1px 2px),
    repeating-linear-gradient(90deg, rgba(255, 255, 255, 0.18) 0 2px, rgba(0, 0, 0, 0.18) 2px 5px);
}

.tv-shell.switching .tv-static {
  animation: tvStatic 420ms steps(5, end);
}

.tv-brand {
  margin-top: 14px;
  color: #c7c4b7;
  font-family: 'Bodoni 72 Oldstyle Web', 'Bodoni 72 Oldstyle', Georgia, serif;
  font-size: 19px;
  font-weight: bold;
  letter-spacing: 0.12em;
  text-shadow: 0 1px 0 #050505;
}

.tv-vcr-slot {
  width: 42%;
  height: 36px;
  margin: 12px auto 0;
  border: 3px solid #0a0b0b;
  border-radius: 2px;
  background: linear-gradient(180deg, #232729, #0c0f10);
  box-shadow: inset 0 2px 10px rgba(255, 255, 255, 0.08);
}

.tv-controls {
  position: absolute;
  left: 16%;
  right: 16%;
  bottom: 34px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 13px;
}

.tv-controls span {
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: linear-gradient(145deg, #353b3b, #080909);
  border: 2px solid #050505;
  box-shadow: inset 1px 1px 4px rgba(255, 255, 255, 0.16);
}

.tv-controls .power-light {
  width: 18px;
  height: 18px;
  background: #77d66b;
  box-shadow: 0 0 14px rgba(119, 214, 107, 0.8);
}

.now-playing {
  display: inline-block;
  margin: 1.5rem auto 0;
  padding: 0.45rem 1rem;
  color: #0d1010;
  background: #e9e6dd;
  border: 2px solid #1a1715;
  font-family: 'Bodoni 72 Oldstyle Web', 'Bodoni 72 Oldstyle', Georgia, serif;
  font-size: 20px;
  font-weight: bold;
  text-transform: uppercase;
  transform: rotate(-0.7deg);
}

@keyframes tvStatic {
  0% { opacity: 0.94; transform: translateX(0); }
  38% { opacity: 0.72; transform: translateX(-3px); }
  70% { opacity: 0.82; transform: translateX(4px); }
  100% { opacity: 0; transform: translateX(0); }
}

@media screen and (max-width: 1100px) {
  .video-room {
    grid-template-columns: 1fr;
    min-height: auto;
  }

  .vhs-stack {
    order: 2;
    width: min(100%, 430px);
    margin: 0 auto;
  }

  .tube-tv {
    order: 1;
  }
}

@media screen and (max-width: 580px) {
  .video-basement {
    width: calc(100% - 1rem);
  }

  .video-room {
    padding: 0.75rem;
    border-width: 2px;
  }

  .vhs-tape {
    min-height: 54px;
    padding-left: 50px;
  }

  .vhs-tape span {
    font-size: 14px;
  }

  .tv-shell {
    padding: 20px 20px 92px;
  }

  .tv-screen {
    border-width: 12px;
  }

  .tv-brand {
    font-size: 15px;
  }

  .tv-vcr-slot {
    height: 28px;
  }

  .tv-controls {
    bottom: 26px;
    gap: 8px;
  }

  .tv-controls span {
    width: 18px;
    height: 18px;
  }

  .now-playing {
    font-size: 15px;
  }
}

/* Realism pass: CRT plastic, glass, and stacked VHS details */
.video-room {
  background:
    radial-gradient(circle at 70% 18%, rgba(230, 196, 122, 0.18), transparent 21rem),
    radial-gradient(circle at 18% 82%, rgba(76, 94, 78, 0.22), transparent 18rem),
    linear-gradient(180deg, rgba(12, 14, 13, 0.88), rgba(8, 9, 8, 0.98)),
    #0e110f;
  border-color: #332519;
  box-shadow:
    inset 0 0 0 1px rgba(255, 255, 255, 0.04),
    inset 0 -70px 110px rgba(0, 0, 0, 0.48),
    0 24px 55px rgba(0, 0, 0, 0.44);
}

.video-room::before {
  content: "";
  position: absolute;
  left: 4%;
  right: 4%;
  bottom: 7%;
  height: 28%;
  pointer-events: none;
  background:
    linear-gradient(90deg, rgba(0, 0, 0, 0.14) 0 1px, transparent 1px 90px),
    linear-gradient(180deg, rgba(255, 255, 255, 0.04), rgba(0, 0, 0, 0.2)),
    rgba(76, 55, 35, 0.16);
  transform: perspective(620px) rotateX(56deg);
  transform-origin: bottom;
  box-shadow: 0 -20px 60px rgba(0, 0, 0, 0.23);
}

.photo-vhs-stack,
.tube-tv {
  position: relative;
  z-index: 1;
}

.vhs-stack {
  perspective: 850px;
}

.vhs-tape {
  overflow: hidden;
  min-height: 68px;
  padding: 11px 22px 11px 62px;
  border-color: #030303;
  border-radius: 3px 5px 4px 3px;
  background:
    linear-gradient(90deg, rgba(255, 255, 255, 0.05), transparent 12%, rgba(255, 255, 255, 0.04) 48%, transparent 70%),
    linear-gradient(180deg, #222326 0%, #060606 24%, #131313 50%, #030303 53%, #1b1917 100%);
  box-shadow:
    inset 0 3px 0 rgba(255, 255, 255, 0.08),
    inset 0 -5px 0 rgba(0, 0, 0, 0.5),
    inset 44px 0 0 rgba(0, 0, 0, 0.3),
    0 4px 0 #050505,
    0 13px 18px rgba(0, 0, 0, 0.34);
  transform: rotate(var(--tape-tilt, 0deg)) translateZ(0);
  transition: transform 220ms cubic-bezier(.2,.8,.2,1), filter 180ms ease, box-shadow 180ms ease;
}

.vhs-tape::before {
  left: 20px;
  top: 17px;
  width: 24px;
  height: 31px;
  background:
    radial-gradient(circle at 50% 50%, #1b1b1b 0 33%, #050505 34% 100%);
  border-color: #343434;
  box-shadow:
    inset 0 0 0 4px #0a0a0a,
    0 1px 0 rgba(255, 255, 255, 0.12);
}

.vhs-tape::after {
  content: "";
  position: absolute;
  inset: 7px 13px auto 54px;
  height: 4px;
  background: linear-gradient(90deg, transparent, rgba(185, 51, 39, 0.58), transparent);
  opacity: 0.62;
}

.vhs-tape span {
  min-height: 36px;
  padding: 6px 12px;
  background:
    linear-gradient(90deg, rgba(0, 0, 0, 0.05), transparent 12%, transparent 88%, rgba(0, 0, 0, 0.04)),
    #ebe8db;
  border-color: #b7ae99;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.68),
    inset 0 -1px 0 rgba(0, 0, 0, 0.08),
    0 1px 2px rgba(0, 0, 0, 0.35);
}

.vhs-tape:hover,
.vhs-tape:focus-visible {
  transform: translateX(22px) rotate(var(--tape-tilt, 0deg)) rotateY(-8deg);
}

.vhs-tape.active {
  filter: brightness(1.15) saturate(1.08);
  box-shadow:
    inset 0 3px 0 rgba(255, 255, 255, 0.11),
    inset 0 -5px 0 rgba(0, 0, 0, 0.52),
    inset 44px 0 0 rgba(0, 0, 0, 0.3),
    0 4px 0 #050505,
    0 18px 26px rgba(0, 0, 0, 0.45);
  transform: translateX(34px) rotate(var(--tape-tilt, 0deg)) rotateY(-10deg);
}

.tv-shell {
  overflow: hidden;
  background:
    radial-gradient(ellipse at 52% 3%, rgba(255, 255, 255, 0.18), transparent 21%),
    radial-gradient(circle at 17% 82%, rgba(255, 255, 255, 0.13), transparent 11rem),
    linear-gradient(140deg, #596161 0%, #323839 22%, #1d2223 51%, #0f1112 100%);
  box-shadow:
    inset 0 0 0 4px #080a0a,
    inset 0 0 0 9px rgba(255, 255, 255, 0.035),
    inset 0 -38px 85px rgba(0, 0, 0, 0.48),
    0 34px 62px rgba(0, 0, 0, 0.55);
}

.tv-shell::before,
.tv-shell::after {
  content: "";
  position: absolute;
  bottom: 50px;
  width: 22%;
  height: 92px;
  border-radius: 6px;
  opacity: 0.76;
  background:
    radial-gradient(circle, rgba(0, 0, 0, 0.9) 0 2px, transparent 2.3px) 0 0 / 11px 11px,
    linear-gradient(145deg, rgba(255, 255, 255, 0.07), rgba(0, 0, 0, 0.22));
}

.tv-shell::before {
  left: 32px;
}

.tv-shell::after {
  right: 32px;
}

.tv-screen {
  border-width: 21px;
  border-color: #070808;
  border-radius: 9% / 11%;
  background:
    radial-gradient(ellipse at center, #1d2524 0%, #111817 72%, #050606 100%);
  box-shadow:
    inset 0 0 0 2px rgba(255, 255, 255, 0.05),
    inset 0 0 42px rgba(255, 255, 255, 0.12),
    inset 0 0 90px rgba(0, 0, 0, 0.3),
    0 2px 0 rgba(255, 255, 255, 0.14),
    0 0 0 1px rgba(0, 0, 0, 0.75);
}

.tv-screen::before {
  content: "";
  position: absolute;
  inset: -9%;
  z-index: 2;
  border-radius: 50%;
  pointer-events: none;
  box-shadow:
    inset 0 0 80px rgba(255, 255, 255, 0.07),
    inset 0 -45px 70px rgba(0, 0, 0, 0.25);
}

.tv-screen iframe {
  filter: contrast(0.96) saturate(0.82) brightness(0.9);
}

.tv-glass {
  background:
    repeating-linear-gradient(90deg, rgba(255, 255, 255, 0.055) 0 1px, rgba(0, 0, 0, 0.075) 1px 3px),
    radial-gradient(ellipse at 22% 8%, rgba(255, 255, 255, 0.42), transparent 18%),
    radial-gradient(ellipse at 82% 12%, rgba(255, 255, 255, 0.2), transparent 22%),
    radial-gradient(ellipse at center, transparent 48%, rgba(0, 0, 0, 0.36));
  mix-blend-mode: screen;
  animation: tubeGlow 6s ease-in-out infinite;
}

.tv-static {
  background:
    repeating-linear-gradient(0deg, rgba(255, 255, 255, 0.5) 0 1px, rgba(0, 0, 0, 0.54) 1px 3px),
    repeating-linear-gradient(90deg, rgba(255, 255, 255, 0.22) 0 2px, rgba(0, 0, 0, 0.22) 2px 6px),
    radial-gradient(circle, rgba(255, 255, 255, 0.25), rgba(0, 0, 0, 0.1));
}

.tv-shell.switching {
  animation: tvBump 420ms ease;
}

.tv-shell.switching .tv-static {
  animation: tvStatic 560ms steps(7, end);
}

.tv-vcr-slot {
  position: relative;
  z-index: 1;
  height: 40px;
  background:
    linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.08), transparent),
    linear-gradient(180deg, #0c0d0d 0%, #25292a 28%, #060707 100%);
  box-shadow:
    inset 0 2px 8px rgba(255, 255, 255, 0.1),
    inset 0 -3px 8px rgba(0, 0, 0, 0.7),
    0 1px 0 rgba(255, 255, 255, 0.08);
}

.tv-vcr-slot::after {
  content: "HIGH SPEED MECHANISM";
  position: absolute;
  left: 0;
  right: 0;
  top: 7px;
  color: rgba(230, 231, 219, 0.62);
  font-family: 'Bodoni 72 Oldstyle Web', 'Bodoni 72 Oldstyle', Georgia, serif;
  font-size: 9px;
  letter-spacing: 0.1em;
}

.tv-controls {
  z-index: 1;
}

.tv-controls span {
  background:
    radial-gradient(circle at 35% 28%, rgba(255, 255, 255, 0.22), transparent 25%),
    linear-gradient(145deg, #404747, #050606 70%);
}

@keyframes tubeGlow {
  0%, 100% { opacity: 0.78; }
  48% { opacity: 0.92; }
  52% { opacity: 0.72; }
}

@keyframes tvBump {
  0% { transform: translateX(0); }
  18% { transform: translateX(-2px) rotate(-0.08deg); }
  38% { transform: translateX(2px) rotate(0.08deg); }
  100% { transform: translateX(0); }
}

/* Photo-real object layout */
.video-room {
  grid-template-columns: minmax(330px, 455px) minmax(700px, 1fr);
}

.photo-vhs-stack {
  position: relative;
  aspect-ratio: 1102 / 1014;
  display: block;
  width: min(100%, 455px);
  margin: 0 auto;
  filter: drop-shadow(0 28px 22px rgba(0, 0, 0, 0.48));
}

.vhs-stack-art {
  display: block;
  width: 100%;
  height: auto;
  user-select: none;
  pointer-events: none;
}

.photo-vhs-stack .vhs-tape {
  position: absolute;
  left: 15.5%;
  width: 72.5%;
  height: 9.9%;
  min-height: 0;
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: 8px;
  background: transparent;
  box-shadow: none;
  filter: none;
  transform: none;
}

.photo-vhs-stack .vhs-tape::before,
.photo-vhs-stack .vhs-tape::after {
  display: none;
}

.photo-vhs-stack .vhs-tape span {
  position: absolute;
  inset: 8% 1.5%;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 0;
  padding: 0 0.55rem;
  overflow: hidden;
  color: #171514;
  background: transparent;
  border: 0;
  box-shadow: none;
  font-family: 'Bodoni 72 Oldstyle Web', 'Bodoni 72 Oldstyle', Georgia, serif;
  font-size: clamp(13px, 1.35vw, 19px);
  font-weight: 600;
  line-height: 0.98;
  letter-spacing: 0.015em;
  text-align: center;
  text-transform: uppercase;
  text-shadow:
    0.4px 0.4px 0 rgba(0, 0, 0, 0.2),
    -0.2px -0.2px 0 rgba(255, 255, 255, 0.4);
  transform: rotate(-2.2deg) skewX(-4deg);
  mix-blend-mode: multiply;
}

.photo-vhs-stack .tape-2 span,
.photo-vhs-stack .tape-5 span {
  transform: rotate(1.5deg) skewX(-3deg);
}

.photo-vhs-stack .tape-3 span,
.photo-vhs-stack .tape-7 span {
  transform: rotate(-0.9deg) skewX(2deg);
}

.photo-vhs-stack .tape-4 span,
.photo-vhs-stack .tape-6 span {
  transform: rotate(0.8deg) skewX(4deg);
}

.photo-vhs-stack .tape-1 { top: 2.9%; }
.photo-vhs-stack .tape-2 { top: 17.0%; }
.photo-vhs-stack .tape-3 { top: 31.0%; }
.photo-vhs-stack .tape-4 { top: 45.0%; }
.photo-vhs-stack .tape-5 { top: 59.2%; }
.photo-vhs-stack .tape-6 { top: 73.2%; }
.photo-vhs-stack .tape-7 { top: 87.0%; }

.photo-vhs-stack .vhs-tape:hover,
.photo-vhs-stack .vhs-tape:focus-visible,
.photo-vhs-stack .vhs-tape.active {
  z-index: 3;
  outline: 0;
  transform: translateX(10px);
}

.photo-vhs-stack .vhs-tape:hover span,
.photo-vhs-stack .vhs-tape:focus-visible span,
.photo-vhs-stack .vhs-tape.active span {
  color: #050505;
  text-shadow:
    0.5px 0.5px 0 rgba(0, 0, 0, 0.24),
    0 0 10px rgba(255, 232, 150, 0.45);
}

.photo-vhs-stack .vhs-tape.active::after {
  content: "";
  display: block;
  position: absolute;
  inset: -14% -3%;
  border: 2px solid rgba(232, 188, 88, 0.72);
  border-radius: 9px;
  background: rgba(255, 242, 183, 0.14);
  box-shadow: 0 0 18px rgba(232, 188, 88, 0.24);
}

.photo-tv-shell {
  position: relative;
  width: min(100%, 860px);
  margin: 0 auto;
  padding: 0;
  overflow: visible;
  background: transparent;
  box-shadow: none;
  border-radius: 0;
  animation: none;
}

.photo-tv-shell::before,
.photo-tv-shell::after {
  display: none;
}

.tv-photo-art {
  display: block;
  width: 100%;
  height: auto;
  filter: drop-shadow(0 34px 34px rgba(0, 0, 0, 0.52));
  user-select: none;
  pointer-events: none;
}

.photo-tv-screen {
  position: absolute;
  left: 16.1%;
  top: 15.2%;
  width: 67.8%;
  height: 51.6%;
  aspect-ratio: auto;
  overflow: hidden;
  border: 0;
  border-radius: 8% / 10%;
  background: #060706;
  box-shadow:
    inset 0 0 40px rgba(0, 0, 0, 0.55),
    inset 0 0 0 2px rgba(255, 255, 255, 0.05);
}

.photo-tv-screen::before {
  display: none;
}

.photo-tv-screen iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
  z-index: 1;
  filter: contrast(0.92) saturate(0.78) brightness(0.86);
}

.photo-tv-shell.switching {
  animation: tvBump 420ms ease;
}

.photo-tv-shell.switching .tv-static {
  animation: tvStatic 560ms steps(7, end);
}

.photo-tv-shell .tv-glass {
  background:
    repeating-linear-gradient(90deg, rgba(255, 255, 255, 0.055) 0 1px, rgba(0, 0, 0, 0.08) 1px 3px),
    radial-gradient(ellipse at 12% 9%, rgba(255, 255, 255, 0.42), transparent 18%),
    radial-gradient(ellipse at center, transparent 45%, rgba(0, 0, 0, 0.34));
}

@media screen and (max-width: 1100px) {
  .video-room {
    grid-template-columns: 1fr;
  }

  .photo-vhs-stack {
    width: min(100%, 520px);
  }

  .photo-tv-shell {
    width: min(100%, 820px);
  }
}

@media screen and (max-width: 580px) {
  .photo-vhs-stack .vhs-tape span {
    font-size: clamp(10px, 3vw, 14px);
  }

  .photo-tv-shell {
    width: 100%;
  }
}

/* Big TV room scene pass */
.video-basement {
  width: min(1480px, calc(100% - 1rem));
}

.video-room {
  position: relative;
  display: block;
  min-height: clamp(720px, 66vw, 860px);
  padding: 0;
  overflow: hidden;
  background:
    linear-gradient(180deg, rgba(6, 7, 9, 0.08), rgba(6, 7, 9, 0.14)),
    url("../images/hhg_wood_panel_bg.png") center center / cover no-repeat,
    linear-gradient(180deg, #171b1f 0%, #0b0f16 56%, #05070b 100%);
  border-color: #352618;
  box-shadow:
    inset 0 0 0 1px rgba(255, 255, 255, 0.04),
    inset 0 -110px 120px rgba(0, 0, 0, 0.6),
    0 24px 55px rgba(0, 0, 0, 0.45);
}

.video-room::before {
  display: none;
}

.tube-tv {
  position: absolute;
  z-index: 3;
  left: 63%;
  bottom: clamp(16px, 2.8vw, 34px);
  width: min(64vw, 900px);
  transform: translateX(-50%);
}

.photo-tv-shell {
  width: 100%;
}

.photo-tv-screen {
  left: 15.6%;
  top: 15.9%;
  width: 68.8%;
  height: 51.6%;
  border-radius: 8% / 10%;
}

.photo-vhs-stack {
  position: absolute;
  z-index: 4;
  left: clamp(148px, 13.7vw, 210px);
  bottom: clamp(76px, 8.3vw, 112px);
  width: min(25vw, 335px);
  margin: 0;
}

.vintage-table {
  position: absolute;
  z-index: 2;
  left: 50%;
  bottom: clamp(-126px, -8.6vw, -92px);
  width: min(96vw, 1180px);
  height: clamp(230px, 21vw, 285px);
  transform: translateX(-50%);
  overflow: hidden;
  pointer-events: none;
}

.vintage-table img {
  display: block;
  width: 100%;
  max-width: none;
  transform: translateY(-31%);
  filter: saturate(0.9) brightness(0.9) contrast(1.05);
  user-select: none;
}

.cassette-stand {
  display: none;
}

.cassette-stand::before {
  display: none;
}

.cassette-stand::after {
  display: none;
}

.tv-stand {
  display: none;
}

.tv-stand::before {
  display: none;
}

.tv-stand::after {
  display: none;
}

.photo-vhs-stack .vhs-tape:hover,
.photo-vhs-stack .vhs-tape:focus-visible,
.photo-vhs-stack .vhs-tape.active {
  transform: translateX(14px);
}

.photo-vhs-stack .tape-1 span {
  font-size: clamp(10px, 1.28vw, 16px);
  line-height: 0.95;
  transform: rotate(-1.7deg) scaleX(0.92);
}

.photo-vhs-stack .tape-1:hover span,
.photo-vhs-stack .tape-1:focus-visible span {
  transform: translate(3px, -1px) rotate(-1deg) scaleX(0.92);
}

.photo-vhs-stack .tape-2 span {
  font-size: clamp(10px, 1.38vw, 17px);
  transform: rotate(-1deg) scaleX(0.94);
}

.photo-tv-screen {
  background: #000;
}

.photo-tv-shell .tv-glass {
  background:
    repeating-linear-gradient(90deg, rgba(255, 255, 255, 0.035) 0 1px, rgba(0, 0, 0, 0.1) 1px 3px),
    radial-gradient(ellipse at center, transparent 52%, rgba(0, 0, 0, 0.46));
  mix-blend-mode: normal;
  animation: none;
}

.photo-vhs-stack .tape-6 span {
  font-size: clamp(10px, 1.28vw, 16px);
  transform: rotate(0.8deg) skewX(2deg) scaleX(0.92);
}

.photo-vhs-stack .tape-6:hover,
.photo-vhs-stack .tape-6:focus-visible,
.photo-vhs-stack .tape-6.active {
  transform: translateX(8px);
}

@media screen and (max-width: 1100px) {
  .video-room {
    min-height: 1080px;
  }

  .tube-tv {
    left: 50%;
    top: 72px;
    bottom: auto;
    width: min(92vw, 800px);
  }

  .tv-stand {
    left: 50%;
    top: 690px;
    bottom: auto;
    width: min(92vw, 860px);
  }

  .photo-vhs-stack {
    left: 50%;
    bottom: 54px;
    width: min(82vw, 500px);
    transform: translateX(-50%);
  }

  .vintage-table {
    bottom: -92px;
    width: min(104vw, 900px);
    height: 240px;
  }

  .cassette-stand {
    left: 50%;
    bottom: 22px;
    width: min(88vw, 550px);
    transform: translateX(-50%);
  }
}

@media screen and (max-width: 580px) {
  .video-basement {
    width: calc(100% - 0.5rem);
  }

  .video-room {
    min-height: 900px;
  }

  .tube-tv {
    top: 78px;
    width: 104vw;
  }

  .tv-stand {
    top: 600px;
    width: 98vw;
  }

  .photo-vhs-stack {
    width: 88vw;
    bottom: 52px;
  }

  .vintage-table {
    bottom: -74px;
    width: 118vw;
    height: 190px;
  }

  .cassette-stand {
    width: 96vw;
    bottom: 18px;
  }
}
/* Larger homepage video */
.home-cover {
  width: calc(100% - 2rem);
  max-width: 1020px;
  flex-shrink: 0;
  margin: 1rem auto;
}

.home-cover > a {
  display: block;
}

.home-cover .disc_album_images {
  display: block;
  box-sizing: border-box;
  width: 100%;
  height: auto;
}
/* Bodoni 72 Oldstyle website typography */
@font-face {
  font-family: 'Bodoni 72 Oldstyle Web';
  src: url('fonts/bodoni-72-oldstyle-book.ttf') format('truetype');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Bodoni 72 Oldstyle Web';
  src: url('fonts/bodoni-72-oldstyle-italic.ttf') format('truetype');
  font-weight: 400;
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: 'Bodoni 72 Oldstyle Web';
  src: url('fonts/bodoni-72-oldstyle-bold.ttf') format('truetype');
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}
body, nav, .about_us_text, .disc_header, .disc_album_captions,
.vids_header, .resilient_you_date, .single_link,
button, input, select, textarea {
  font-family: 'Bodoni 72 Oldstyle Web', 'Bodoni 72 Oldstyle', Georgia, serif;
}