/* ============================================================
   Southern Fried Hippies — 70s Groovy Retro Theme
   Warm cream paper, burnt orange, mustard, avocado, rust & teal.
   Sunbursts, halftone dots, wallpaper waves, hard-ink shadows.
   ============================================================ */

/* ---------- Palette & type ---------- */
:root {
  /* Retro inks — original variable names kept so inline styles keep working */
  --sfh-orange: #D9662B;        /* burnt orange */
  --sfh-orange-neon: #E8842E;   /* tangerine accent */
  --sfh-purple: #7A4E8C;        /* muted plum */
  --sfh-purple-neon: #93609F;   /* light plum */
  --sfh-green: #5F6E2A;         /* deep avocado */
  --sfh-green-neon: #7A8B37;    /* avocado */
  --sfh-yellow: #F2B33D;        /* mustard */
  --sfh-yellow-neon: #EFB700;   /* deep mustard */
  --sfh-pink: #C75B84;          /* muted rose */
  --sfh-dark: #2B1B12;          /* warm dark brown */
  --sfh-dark-gray: #3A2A1E;     /* brown panels */
  --sfh-text: #33241A;          /* ink brown (body text on paper) */
  --sfh-text-dim: #6B5138;      /* muted brown */
  /* New retro tokens */
  --sfh-paper: #F3E3C3;         /* cream paper */
  --sfh-cream: #FBF1D9;         /* light card stock */
  --sfh-ink: #2B1B12;           /* borders & hard shadows */
  --sfh-rust: #B23A22;          /* rust red */
  --sfh-teal: #2E7D74;          /* retro teal */
  --sfh-line: #D9C393;          /* paper rules */
  --sfh-font-display: "Alfa Slab One", Georgia, "Times New Roman", serif;
  --sfh-font-head: "Oswald", "Arial Narrow", Arial, sans-serif;
  --sfh-font-body: "Nunito Sans", "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
}

/* ---------- Base ---------- */
body {
  background-color: var(--sfh-paper);
  color: var(--sfh-text);
  font-family: var(--sfh-font-body);
  overflow-x: hidden;
  background-image:
    /* wallpaper waves */
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='80' height='40' viewBox='0 0 80 40'%3E%3Cpath d='M0 20 q10 -12 20 0 t20 0 t20 0 t20 0' fill='none' stroke='%23C9A96A' stroke-width='2' opacity='0.45'/%3E%3C/svg%3E"),
    /* halftone dots */
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='26' height='26'%3E%3Ccircle cx='5' cy='5' r='1.6' fill='%23C9A96A' opacity='0.5'/%3E%3Ccircle cx='18' cy='18' r='1.6' fill='%23C9A96A' opacity='0.5'/%3E%3C/svg%3E");
  background-repeat: repeat, repeat;
}
/* print-style paper grain over everything */
body::after {
  content: "";
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='220' height='220' filter='url(%23n)' opacity='0.55'/%3E%3C/svg%3E");
  opacity: 0.09;
  pointer-events: none;
  z-index: 1040;
}
h1, h2, h3 { font-family: var(--sfh-font-display); font-weight: 400; }
h4, h5, h6 { font-family: var(--sfh-font-head); font-weight: 600; letter-spacing: 0.5px; }
::selection { background: var(--sfh-yellow); color: var(--sfh-ink); }

/* Warm dark-brown bands with subtle dot + pinstripe texture */
.bg-dark {
  background-color: var(--sfh-dark-gray) !important;
  background-image:
    radial-gradient(rgba(243, 227, 195, 0.07) 1.5px, transparent 1.6px),
    repeating-linear-gradient(45deg, transparent 0 16px, rgba(243, 227, 195, 0.035) 16px 17px);
  background-size: 20px 20px, auto;
}
.text-white { color: var(--sfh-cream) !important; }
.text-muted { color: #7B6449 !important; }
.bg-dark .text-muted, .card.bg-dark .text-muted, footer .text-muted { color: #D6C3A3 !important; }
.bg-dark .blockquote-footer { color: #CDBB9A; }

a { color: var(--sfh-rust); text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 3px; transition: color 0.15s ease; }
a:hover { color: var(--sfh-orange); }

/* ---------- Navbar ---------- */
.navbar {
  background-color: rgba(43, 27, 18, 0.97);
  padding: 0.6rem 0;
  border-bottom: 6px solid transparent;
  border-image: linear-gradient(90deg, var(--sfh-rust) 0 20%, var(--sfh-orange) 20% 40%, var(--sfh-yellow) 40% 60%, var(--sfh-green-neon) 60% 80%, var(--sfh-teal) 80% 100%) 1;
}
.navbar-brand {
  color: var(--sfh-cream) !important;
  font-family: var(--sfh-font-display);
  font-size: clamp(1.1rem, 3.5vw, 1.65rem);
  font-weight: 400;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  line-height: 1.15;
}
.navbar-brand:hover { color: var(--sfh-yellow) !important; }
.nav-link {
  color: #E4D3AC !important;
  font-family: var(--sfh-font-head);
  font-weight: 500;
  font-size: 1rem;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  transition: color 0.15s ease;
}
.nav-link:hover, .nav-link.active { color: var(--sfh-yellow) !important; }

/* ---------- Buttons ---------- */
.btn-sfh-orange, .btn-sfh-outline, .btn-sfh-purple, .btn-sfh-yellow {
  font-family: var(--sfh-font-head);
  font-weight: 600;
  font-size: 1rem;
  text-transform: uppercase;
  letter-spacing: 1.5px;
  padding: 0.8rem 1.9rem;
  border-radius: 2px;
  border-width: 3px;
  transition: transform 0.12s ease, box-shadow 0.12s ease, background-color 0.15s ease;
  box-shadow: 5px 5px 0 var(--sfh-ink);
}
.btn-sfh-orange:hover, .btn-sfh-outline:hover, .btn-sfh-purple:hover, .btn-sfh-yellow:hover {
  transform: translate(2px, 2px);
  box-shadow: 3px 3px 0 var(--sfh-ink);
}
.btn-sfh-orange { background-color: var(--sfh-orange); border-color: var(--sfh-ink); color: #241207; }
.btn-sfh-orange:hover { background-color: var(--sfh-orange-neon); color: #241207; }
.btn-sfh-yellow { background-color: var(--sfh-yellow); border-color: var(--sfh-ink); color: #241207; }
.btn-sfh-yellow:hover { background-color: var(--sfh-yellow-neon); color: #241207; }
.btn-sfh-purple { background-color: var(--sfh-purple); border-color: var(--sfh-ink); color: var(--sfh-cream); }
.btn-sfh-purple:hover { background-color: var(--sfh-purple-neon); color: var(--sfh-cream); }
.btn-sfh-outline { background-color: transparent; border-color: var(--sfh-ink); color: var(--sfh-ink); }
.btn-sfh-outline:hover { background-color: var(--sfh-ink); color: var(--sfh-cream); }

/* ---------- Hero ---------- */
.hero {
  position: relative;
  background: linear-gradient(rgba(43, 27, 18, 0.82), rgba(43, 27, 18, 0.72)),
    url("../../images/Band Name and Squash Man Logo.webp");
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  height: 68vh;
  min-height: 480px;
  display: flex;
  align-items: center;
  text-align: center;
  padding: 5.5rem 0 3.5rem;
}
/* sunburst rays (also renders on the 404 hero, whose inline style removes the photo) */
.hero::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: repeating-conic-gradient(from -90deg at 50% 42%,
    rgba(242, 179, 61, 0.16) 0deg 7deg,
    transparent 7deg 14deg);
  pointer-events: none;
  z-index: 1;
}
/* 70s rainbow ribbon along the bottom */
.hero::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 26px;
  background: linear-gradient(180deg,
    var(--sfh-rust) 0 20%, var(--sfh-orange) 20% 40%, var(--sfh-yellow) 40% 60%,
    var(--sfh-green-neon) 60% 80%, var(--sfh-teal) 80% 100%);
  pointer-events: none;
  z-index: 1;
}
.hero-content { position: relative; z-index: 2; }
.hero h1 {
  font-family: var(--sfh-font-display);
  font-size: clamp(2.3rem, 6.5vw + 1rem, 4.6rem);
  text-transform: uppercase;
  color: var(--sfh-cream);
  line-height: 1.05;
  margin-bottom: 1rem;
  text-shadow: 4px 4px 0 var(--sfh-rust);
}
.hero .subtitle {
  font-family: var(--sfh-font-head);
  font-weight: 500;
  font-size: clamp(1.05rem, 2.5vw, 1.45rem);
  color: var(--sfh-yellow);
  margin-bottom: 2rem;
  letter-spacing: 1px;
  text-shadow: 2px 2px 0 rgba(43, 27, 18, 0.9);
}
.hero .btn-group { gap: 1.25rem; position: relative; z-index: 2; }
.hero .btn-sfh-outline { border-color: var(--sfh-cream); color: var(--sfh-cream); }
.hero .btn-sfh-outline:hover { background-color: var(--sfh-cream); color: var(--sfh-ink); box-shadow: 3px 3px 0 var(--sfh-ink); }
/* paper-toned hero variant (404 page) */
.hero-paper { background: none; }
.hero-paper h1 { color: var(--sfh-rust); text-shadow: 4px 4px 0 rgba(43, 27, 18, 0.18); }
.hero-paper .subtitle { color: var(--sfh-text-dim); text-shadow: none; }
.hero-paper .btn-sfh-outline { border-color: var(--sfh-ink); color: var(--sfh-ink); }
.hero-paper .btn-sfh-outline:hover { background-color: var(--sfh-ink); color: var(--sfh-cream); }

/* ---------- Section titles ---------- */
.section-title {
  display: block;
  width: 100%;
  text-align: center;
  margin-bottom: 2rem;
  font-family: var(--sfh-font-display);
  font-weight: 400;
  font-size: clamp(1.7rem, 4.5vw, 2.7rem);
  color: var(--sfh-text);
  line-height: 1.15;
}
.section-title::after {
  content: "";
  display: block;
  width: 110px;
  height: 12px;
  margin: 0.9rem auto 0;
  border-radius: 2px;
  background: linear-gradient(90deg,
    var(--sfh-rust) 0 33.3%, var(--sfh-yellow) 33.3% 66.6%, var(--sfh-green-neon) 66.6% 100%);
  box-shadow: 3px 3px 0 rgba(43, 27, 18, 0.35);
}

/* ---------- Band member cards ---------- */
.member-card {
  background-color: var(--sfh-cream);
  border: 3px solid var(--sfh-ink);
  border-radius: 4px;
  padding: 1.75rem 1.25rem;
  text-align: center;
  margin-bottom: 0;
  box-shadow: 6px 6px 0 rgba(43, 27, 18, 0.85);
  height: 100%;
  transition: transform 0.15s ease, box-shadow 0.15s ease;
}
.member-card:hover {
  transform: rotate(-1.5deg) translateY(-4px);
  box-shadow: 9px 9px 0 var(--sfh-orange);
}
.member-photo {
  width: 170px;
  height: 170px;
  object-fit: cover;
  border: 4px solid var(--sfh-ink);
  border-radius: 50%;
  margin-bottom: 1.25rem;
  box-shadow: 4px 4px 0 var(--sfh-yellow);
  background: var(--sfh-paper);
}
.member-card h3 { color: var(--sfh-rust); margin-bottom: 0.35rem; font-size: 1.6rem; }
.member-card .role {
  color: var(--sfh-green);
  font-family: var(--sfh-font-head);
  font-weight: 600;
  text-transform: uppercase;
  font-size: 0.85rem;
  letter-spacing: 2px;
  margin-bottom: 0.35rem;
}
.member-card .text-muted { color: #7B6449 !important; }

/* ---------- Shows table ---------- */
.table-sfh {
  background-color: var(--sfh-cream);
  color: var(--sfh-text);
  border: 3px solid var(--sfh-ink);
  box-shadow: 6px 6px 0 rgba(43, 27, 18, 0.85);
  margin-bottom: 0;
}
.table-sfh > :not(caption) > * > * { box-shadow: none; }
.table-sfh th {
  background-color: var(--sfh-yellow);
  color: var(--sfh-ink);
  border: none;
  font-family: var(--sfh-font-head);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 1.5px;
  font-size: 0.95rem;
}
.table-sfh td { border-color: var(--sfh-line); vertical-align: middle; font-weight: 500; }
.table-sfh tbody tr:nth-child(odd) { background-color: #EFDDB7; }
.table-sfh tbody tr:hover { background-color: rgba(242, 179, 61, 0.35); }

/* ---------- Music player & video cards ---------- */
.music-player {
  background-color: var(--sfh-cream);
  border: 3px solid var(--sfh-ink);
  border-radius: 4px;
  padding: 1.75rem;
  margin-bottom: 2rem;
  box-shadow: 7px 7px 0 rgba(43, 27, 18, 0.85);
}
.music-player h3 { color: var(--sfh-rust); }
.card-glow {
  background-color: var(--sfh-cream);
  border: 3px solid var(--sfh-ink);
  border-radius: 4px;
  color: var(--sfh-text);
  box-shadow: 6px 6px 0 rgba(43, 27, 18, 0.85);
  transition: transform 0.15s ease, box-shadow 0.15s ease;
  height: 100%;
}
.card-glow:hover { transform: translateY(-4px); box-shadow: 8px 10px 0 var(--sfh-orange); }
.card-glow h3, .card-glow h5 { color: var(--sfh-rust); }
.card-glow .text-muted { color: #7B6449 !important; }

/* ---------- Mailing list (70s curtain stripes + scallops) ---------- */
.mailing-list {
  position: relative;
  background-color: var(--sfh-dark);
  background-image:
    repeating-linear-gradient(90deg,
      rgba(178, 58, 34, 0.55) 0 26px,
      rgba(217, 102, 43, 0.55) 26px 52px,
      rgba(242, 179, 61, 0.5) 52px 78px,
      rgba(122, 139, 55, 0.5) 78px 104px,
      rgba(46, 125, 116, 0.5) 104px 130px);
  border: none;
  border-radius: 0;
  padding: clamp(2.5rem, 6vw, 4rem) 1.5rem;
  text-align: center;
  margin-bottom: 3rem;
  color: var(--sfh-cream);
}
.mailing-list::before, .mailing-list::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  height: 18px;
  background: radial-gradient(circle at 12px 0, var(--sfh-paper) 11px, transparent 12px) repeat-x;
  background-size: 24px 18px;
  pointer-events: none;
}
.mailing-list::before { top: 0; }
.mailing-list::after { bottom: 0; transform: rotate(180deg); }
.mailing-list h2 {
  color: var(--sfh-cream);
  font-family: var(--sfh-font-display);
  font-size: clamp(1.8rem, 5vw, 2.8rem);
  margin-bottom: 0.75rem;
  text-shadow: 3px 3px 0 var(--sfh-rust);
}
.mailing-list p {
  color: #F3E7C8;
  margin-bottom: 1.5rem;
  font-size: 1.1rem;
  font-weight: 600;
}
.mailing-list .form-control {
  background-color: #FFFFFF;
  border: 2px solid var(--sfh-ink);
  border-radius: 3px;
  padding: 0.75rem 1rem;
  font-size: 1rem;
  font-weight: 600;
}
.mailing-list .form-control::placeholder { color: #8A7A66; }

/* ---------- Footer ---------- */
footer {
  position: relative;
  background-color: var(--sfh-dark);
  background-image: radial-gradient(rgba(243, 227, 195, 0.07) 1.5px, transparent 1.6px);
  background-size: 22px 22px;
  border-top: none;
  padding: 3rem 0 1.5rem;
  color: #E4D3AC;
}
footer::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 12px;
  background: linear-gradient(180deg,
    var(--sfh-rust) 0 25%, var(--sfh-yellow) 25% 50%,
    var(--sfh-orange) 50% 75%, var(--sfh-green-neon) 75% 100%);
}
footer h5 {
  color: var(--sfh-yellow);
  font-family: var(--sfh-font-display);
  font-weight: 400;
  font-size: 1.3rem;
  text-transform: uppercase;
  letter-spacing: 1px;
  margin-bottom: 1rem;
}
footer a { color: #E4D3AC; }
footer a:hover { color: var(--sfh-yellow); }
footer .social-links a {
  color: #E4D3AC;
  font-family: var(--sfh-font-head);
  font-size: 1.1rem;
  letter-spacing: 1px;
  text-transform: uppercase;
  margin: 0 1.25rem 0.5rem 0;
  text-decoration: none;
  display: inline-block;
  transition: color 0.15s ease;
}
footer .social-links a:hover { color: var(--sfh-yellow); transform: none; }
footer p { margin-top: 1.5rem; font-size: 0.9rem; border-top: 2px dashed rgba(217, 195, 147, 0.45); padding-top: 1.25rem; }

/* ---------- Dark cards (contact / EPK / press quotes) ---------- */
.card { border-radius: 4px; }
.card.bg-dark {
  border: 3px solid #1F150D !important;
  box-shadow: 6px 6px 0 rgba(31, 21, 13, 0.55);
  color: var(--sfh-cream);
}
.card.bg-dark h3 { color: var(--sfh-yellow); }

/* ---------- Backward-compatible "glow" classes, now hard retro shadows ---------- */
.wavy-border { position: relative; border: 5px solid var(--sfh-ink); border-radius: 4px; }
.wavy-border::after {
  content: "";
  position: absolute;
  top: -10px;
  left: -10px;
  right: -10px;
  bottom: -10px;
  border: 4px solid var(--sfh-yellow);
  border-radius: 8px;
  pointer-events: none;
  z-index: 1;
}
.neon-glow, .neon-glow-purple, .neon-glow-green { box-shadow: 8px 8px 0 rgba(43, 27, 18, 0.85); }
.psychedelic-text {
  background: linear-gradient(90deg, var(--sfh-rust), var(--sfh-yellow), var(--sfh-green-neon), var(--sfh-teal));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

/* ---------- Utilities ---------- */
.text-yellow { color: #A1650A !important; }
.bg-dark .text-yellow, .card.bg-dark .text-yellow, footer .text-yellow, .mailing-list .text-yellow { color: var(--sfh-yellow-neon) !important; }
.bg-sfh-orange { background-color: var(--sfh-orange) !important; }
.bg-sfh-green { background-color: var(--sfh-green) !important; }
.bg-sfh-purple { background-color: var(--sfh-purple) !important; }
.bg-sfh-yellow { background-color: var(--sfh-yellow) !important; }
.badge {
  font-family: var(--sfh-font-head);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 1px;
  border-radius: 3px;
  padding: 0.45em 0.85em;
}

/* ---------- Forms ---------- */
label.form-label {
  font-family: var(--sfh-font-head);
  text-transform: uppercase;
  letter-spacing: 1px;
  font-size: 0.85rem;
  font-weight: 500;
  color: var(--sfh-text);
}
.bg-dark label.form-label,
.card.bg-dark label.form-label {
  color: var(--sfh-cream) !important;
}
.form-control, .form-select {
  border: 2px solid var(--sfh-ink);
  border-radius: 3px;
  padding: 0.65rem 0.85rem;
  background-color: var(--sfh-cream);
}
.form-control:focus, .form-select:focus {
  border-color: var(--sfh-orange);
  box-shadow: 0 0 0 3px rgba(242, 179, 61, 0.55);
}

/* ============================================================
   Responsive — fluid type, better mobile nav, less dead space
   ============================================================ */
@media (max-width: 991.98px) {
  .navbar-collapse {
    background-color: var(--sfh-dark);
    border: 3px solid var(--sfh-yellow);
    border-radius: 4px;
    margin-top: 0.6rem;
    padding: 0.5rem 1.1rem;
    box-shadow: 5px 5px 0 rgba(43, 27, 18, 0.5);
  }
  .navbar-collapse .nav-link {
    display: block;
    padding: 0.8rem 0.25rem;
    font-size: 1.05rem;
    border-bottom: 1px dashed rgba(227, 206, 163, 0.3);
  }
  .navbar-collapse li:last-child .nav-link { border-bottom: none; }
  .navbar-toggler { border-color: rgba(243, 227, 195, 0.55); }
}

@media (max-width: 767.98px) {
  .hero {
    height: auto !important;
    min-height: 360px !important;
    padding: 5.5rem 0 3.25rem;
  }
  .hero .btn-group {
    flex-direction: column;
    align-items: stretch;
    width: 100%;
    max-width: 340px;
    margin-left: auto;
    margin-right: auto;
  }
  .hero .btn-group .btn { width: 100%; }
  .member-photo { width: 150px; height: 150px; }
  .member-card { padding: 1.5rem 1rem; }
}

@media (max-width: 575.98px) {
  section.py-5 { padding-top: 2.25rem !important; padding-bottom: 2.25rem !important; }
  .music-player, .card-glow { padding: 1.1rem !important; }
  .table-sfh { font-size: 0.92rem; }
  .table-sfh th, .table-sfh td { padding: 0.55rem 0.5rem; white-space: nowrap; }
  .mailing-list { padding: 2.75rem 1.1rem; margin-bottom: 2rem; }
  .card.bg-dark { padding: 1.5rem !important; }
  footer { padding: 2.25rem 0 1.25rem; }
  footer .social-links a { margin-right: 0.9rem; font-size: 1rem; }
  .section-title { margin-bottom: 1.5rem; }
}

/* ---------- Skip to content (accessibility) ---------- */
.skip-to-content {
  position: absolute;
  top: -10000px;
  left: 0;
  background: var(--sfh-yellow);
  color: var(--sfh-ink);
  font-family: var(--sfh-font-head);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 1px;
  padding: 0.75rem 1.5rem;
  border: 3px solid var(--sfh-ink);
  box-shadow: 5px 5px 0 var(--sfh-ink);
  z-index: 10000;
  text-decoration: none;
}
.skip-to-content:focus {
  top: 0.5rem;
  left: 0.5rem;
}

/* ---------- Show table wrapper ---------- */
.table-sfh.w-auto {
  max-width: 100%;
  overflow-x: auto;
}

/* ---------- Retro TV video player ---------- */
.tv-wrapper {
  width: 100%;
  margin: 0 auto 2rem;
}

.retro-tv {
  position: relative;
  background: var(--sfh-dark-gray);
  border: 16px solid var(--sfh-ink);
  border-radius: 8px 8px 4px 4px;
  box-shadow: 10px 10px 0 var(--sfh-ink);
  width: 100%;
  padding: 28px 28px 42px 28px;
  box-sizing: border-box;
}

.tv-top {
  position: absolute;
  top: -14px;
  left: 50%;
  transform: translateX(-50%);
  width: 65%;
  height: 16px;
  background: var(--sfh-dark-gray);
  border: 5px solid var(--sfh-ink);
  border-radius: 5px 5px 0 0;
  box-shadow: 5px 5px 0 var(--sfh-ink);
}

.tv-antenna-left,
.tv-antenna-right {
  position: absolute;
  top: -30px;
  width: 2px;
  height: 26px;
  background: var(--sfh-ink);
}

.tv-antenna-left {
  left: 20%;
  transform: rotate(-15deg);
  transform-origin: bottom;
}

.tv-antenna-right {
  right: 20%;
  transform: rotate(15deg);
  transform-origin: bottom;
}

.tv-screen {
  position: relative;
  background: #000;
  border: 8px solid var(--sfh-ink);
  border-radius: 3px;
  overflow: hidden;
  aspect-ratio: 16 / 9;
  width: 100%;
  box-shadow: inset 6px 6px 0 rgba(0, 0, 0, 0.5);
}

.tv-screen iframe {
  width: 100%;
  height: 100%;
  border: none;
  display: block;
}

.tv-dial-left,
.tv-dial-right {
  position: absolute;
  bottom: 18px;
  width: 20px;
  height: 20px;
  background: var(--sfh-yellow);
  border: 3px solid var(--sfh-ink);
  border-radius: 50%;
  box-shadow: 3px 3px 0 rgba(0, 0, 0, 0.3);
}

.tv-dial-left {
  left: 30%;
}

.tv-dial-right {
  right: 30%;
}

.tv-brand {
  position: absolute;
  bottom: 48px;
  left: 50%;
  transform: translateX(-50%);
  font-family: var(--sfh-font-display);
  font-size: 2rem;
  color: var(--sfh-yellow);
  text-transform: uppercase;
  letter-spacing: 2px;
  text-shadow: 3px 3px 0 var(--sfh-ink);
}

.tv-stand-top {
  position: absolute;
  bottom: -14px;
  left: 50%;
  transform: translateX(-50%);
  width: 65%;
  height: 18px;
  background: var(--sfh-dark-gray);
  border: 5px solid var(--sfh-ink);
  border-radius: 3px;
  box-shadow: 5px 5px 0 var(--sfh-ink);
}

.tv-stand-bottom {
  position: absolute;
  bottom: -34px;
  left: 50%;
  transform: translateX(-50%);
  width: 45%;
  height: 16px;
  background: var(--sfh-dark-gray);
  border: 5px solid var(--sfh-ink);
  border-radius: 3px;
  box-shadow: 5px 5px 0 var(--sfh-ink);
}

/* Mobile adjustments */
@media (max-width: 767.98px) {
  .retro-tv {
    border-width: 8px;
    padding: 14px 14px 24px 14px;
  }
  .tv-top { top: -8px; width: 55%; height: 10px; border-width: 3px; }
  .tv-antenna-left, .tv-antenna-right { top: -18px; height: 16px; }
  .tv-dial-left, .tv-dial-right { bottom: 10px; width: 14px; height: 14px; border-width: 2px; }
  .tv-brand { bottom: 32px; font-size: 1.2rem; }
  .tv-stand-top { bottom: -8px; height: 12px; border-width: 3px; }
  .tv-stand-bottom { bottom: -22px; height: 10px; border-width: 3px; }
}

@media (max-width: 575.98px) {
  .retro-tv {
    border-width: 6px;
    padding: 10px 10px 18px 10px;
    transform: scale(0.85);
    transform-origin: center;
  }
  .tv-top { top: -6px; width: 50%; height: 8px; border-width: 2px; }
  .tv-antenna-left, .tv-antenna-right { top: -14px; height: 12px; }
  .tv-dial-left, .tv-dial-right { bottom: 8px; width: 12px; height: 12px; border-width: 2px; }
  .tv-brand { bottom: 26px; font-size: 1rem; }
  .tv-stand-top { bottom: -6px; height: 10px; border-width: 2px; }
  .tv-stand-bottom { bottom: -18px; height: 8px; border-width: 2px; }
}