:root {
  --color-navy-500: hsl(224, 34%, 34%);
  --color-navy-700: hsl(222, 33%, 20%);
  --color-navy-800: hsl(222, 33%, 14%);
  --color-grey-900: hsl(0, 6%, 32%);
  --color-white: hsl(0, 0%, 100%);
  --color-white-20: hsla(0, 0%, 100%, 0.2);
  --color-white-80: hsla(0, 0%, 100%, 0.8);
  --color-overlay: hsla(0, 0%, 0%, 0.5);
  --color-error: hsl(0, 70%, 65%);
  --color-success: hsl(150, 50%, 55%);
}

:root {
  /* Surfaces */
  --surface-nav: var(--color-navy-500);
  --surface-drawer: var(--color-navy-800);
  --surface-footer: var(--color-navy-500);
  --surface-content: hsla(0, 6%, 32%, 0.94);

  /* Navigation */
  --nav-text: var(--color-white-80);
  --nav-text-hover: var(--color-white);
  --nav-bg-hover: var(--color-navy-700);
  --nav-bg-active: var(--color-navy-700);

  /* Text */
  --text-primary: var(--color-white);
  --text-on-navy: var(--color-white);

  /* Borders */
  --border-hr: var(--color-white-20);
  --border-subtle: hsl(224, 34%, 28%);
  --border-width-thin: 1px;
  --border-width-thick: var(--space-2);
  --nav-border-width: var(--border-width-thick);
}

:root {
  --font-display: "Josefin Sans", sans-serif;
  --font-body: "Source Sans 3", sans-serif;

  --weight-regular: 400;
  --weight-semibold: 600;
  --weight-bold: 700;

  --size-h1: clamp(2.74rem, 2.342rem + 1.99vw, 4.13rem);
  --size-h2: clamp(2.34rem, 2.072rem + 1.34vw, 3.28rem);
  --size-h3: clamp(2rem, 1.828rem + 0.86vw, 2.6rem);
  --size-h4: clamp(1.71rem, 1.61rem + 0.5vw, 2.06rem);
  --size-h5: clamp(1.46rem, 1.408rem + 0.26vw, 1.64rem);
  --size-h6: clamp(1.25rem, 1.236rem + 0.07vw, 1.3rem);
  --size-body: clamp(1.25rem, 1.236rem + 0.07vw, 1.3rem);
  --size-body-small: clamp(0.875rem, 0.85rem + 0.12vw, 1rem);
}

:root {
  --type-heading-family: var(--font-display);
  --type-heading-weight: var(--weight-bold);
  --type-h1-size: var(--size-h1);
  --type-h2-size: var(--size-h2);
  --type-h3-size: var(--size-h3);
  --type-h4-size: var(--size-h4);
  --type-h5-size: var(--size-h5);
  --type-h6-size: var(--size-h6);

  --type-body-family: var(--font-body);
  --type-body-size: var(--size-body);
  --type-body-weight: var(--weight-regular);
  --type-body-small-size: var(--size-body-small);

  --type-nav-family: var(--font-body);
  --type-nav-size: var(--size-body);
  --type-nav-weight: var(--weight-semibold);
  --type-nav-transform: uppercase;
}

:root {
  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-5: 1.25rem;
  --space-6: 1.5rem;
  --space-8: 2rem;
  --space-10: 2.5rem;
  --space-12: 3rem;
  --space-16: 4rem;
  --space-20: 5rem;
  --space-30: 7.5rem;
  --space-40: 10rem;
}

:root {
  --gap-xs: var(--space-2);
  --gap-sm: var(--space-3);
  --gap-md: var(--space-4);
  --gap-lg: var(--space-6);
  --gap-xl: var(--space-8);

  --padding-xs: var(--space-2);
  --padding-sm: var(--space-3);
  --padding-md: var(--space-4);
  --padding-lg: var(--space-6);
  --padding-xl: var(--space-8);

  --section-padding-sm: var(--space-10);
  --section-padding-md: var(--space-12);
  --section-padding-lg: var(--space-20);
  --section-padding-xl: var(--space-30);
  --section-padding-2xl: var(--space-40);

  --container-max: 90rem;
  --container-text: 65ch;
  --container-narrow: 45rem;

  --nav-height: var(--space-12);
  --nav-padding-x: var(--space-8);
  --nav-drawer-max-width: 20rem;

  --icon-xs: 1rem;
  --icon-sm: 1.25rem;
  --icon-md: 1.5rem;
  --icon-lg: 2rem;
  --icon-xl: 2.5rem;
  --icon-2xl: 3rem;

  --image-constrained-height: 50rem;

  /* Z INDEX TOKENS */
  --z-header: 100;
  --z-overlay: 200;
  --z-drawer: 300;
  --z-toast: 400;
}

*,
*::before,
*::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

img,
picture {
  display: block;
  max-width: 100%;
  height: auto;
}

body {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  font-family: var(--type-body-family);
  font-size: var(--type-body-size);
  font-weight: var(--type-body-weight);
  line-height: 1.6;
  color: var(--text-primary);
  background-image: url(../images/website_background.webp);
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}

h1,
h2,
h3,
h4,
h5,
h6 {
  font-family: var(--type-heading-family);
  font-weight: var(--type-heading-weight);
  line-height: 1.2;
}

h1 {
  font-size: var(--type-h1-size);
}
h2 {
  font-size: var(--type-h2-size);
}
h3 {
  font-size: var(--type-h3-size);
}
h4 {
  font-size: var(--type-h4-size);
}
h5 {
  font-size: var(--type-h5-size);
}
h6 {
  font-size: var(--type-h6-size);
}

hr {
  border: none;
  border-top: var(--border-width-thin) solid var(--border-hr);
}

.body-regular {
  font-family: var(--type-body-family);
  font-size: var(--type-body-size);
  font-weight: var(--type-body-weight);
}

.body-small {
  font-family: var(--type-body-family);
  font-size: var(--type-body-small-size);
}

i[class*="ph"] {
  font-size: var(--icon-size, var(--icon-md));
}

.icon-xs {
  --icon-size: var(--icon-xs);
}
.icon-sm {
  --icon-size: var(--icon-sm);
}
.icon-md {
  --icon-size: var(--icon-md);
}
.icon-lg {
  --icon-size: var(--icon-lg);
}
.icon-xl {
  --icon-size: var(--icon-xl);
}
.icon-2xl {
  --icon-size: var(--icon-2xl);
}

header {
  position: sticky;
  top: 0;
  z-index: var(--z-header);
  padding: 0 var(--nav-padding-x);
  background: var(--surface-nav);
  border-bottom: var(--border-width-thin) solid var(--border-subtle);
}

header .site-logo {
  display: flex;
  align-items: center;
  line-height: 0;
  text-decoration: none;
  padding: var(--padding-sm);
}

header .site-logo img {
  display: block;
  height: var(--nav-height);
  width: auto;
  object-fit: contain;
}

main {
  flex: 1 0 auto;
  width: 100%;
  max-width: var(--container-max);
  padding: var(--section-padding-lg) var(--padding-md);
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

footer {
  padding: var(--padding-md) var(--padding-xl);
  background: var(--surface-footer);
  border-top: var(--border-width-thin) solid var(--border-subtle);
  color: var(--text-on-navy);
}

footer p {
  font-size: var(--type-body-small-size);
  max-width: var(--container-max);
  margin: 0 auto;
}

.navigation-container {
  max-width: var(--container-max);
  align-items: stretch;
  justify-content: space-between;
  margin: 0 auto;
}

/* Shared nav link styles — desktop and drawer */
nav a,
.nav-drawer a {
  font-family: var(--type-nav-family);
  font-weight: var(--type-nav-weight);
  text-transform: var(--type-nav-transform);
  color: var(--nav-text);
  text-decoration: none;
  transition: color 0.2s ease;
}

nav a:hover,
.nav-drawer a:hover {
  color: var(--nav-text-hover);
}

nav a.active,
.nav-drawer a.active {
  color: var(--nav-text-hover);
}

/* Desktop nav specific */
.nav-desktop ul {
  margin: 0;
  padding: 0;
  list-style: none;
  display: flex;
  gap: var(--gap-lg);
  height: 100%;
}

.nav-desktop li {
  height: 100%;
}

.nav-desktop a {
  font-size: var(--type-nav-size);
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100%;
  padding: var(--padding-md);
}

.nav-desktop a:hover {
  box-shadow: inset 0 calc(-1 * var(--nav-border-width)) 0 var(--nav-bg-hover);
}

.nav-desktop a.active {
  background: var(--nav-bg-active);
}

/* Hamburger button */
.hamburger {
  display: none;
  align-items: center;
  justify-content: center;
  background: transparent;
  border: none;
  color: var(--color-white);
  cursor: pointer;
  padding: var(--padding-sm);
  margin-left: auto;
  line-height: 0;
}

.hamburger:focus-visible {
  outline: 2px solid var(--color-white);
  outline-offset: 3px;
}

/* Icon swap via aria-expanded — no JS needed for this */
.hamburger[aria-expanded="false"] .icon-close,
.hamburger[aria-expanded="true"] .icon-open {
  display: none;
}

.nav-drawer {
  position: fixed;
  top: 0;
  right: 0;
  height: 100%;
  width: 85vw;
  max-width: var(--nav-drawer-max-width);
  background: var(--surface-drawer);
  border-left: var(--border-width-thin) solid var(--border-subtle);
  z-index: var(--z-drawer);
  padding: var(--section-padding-md) var(--padding-xl);
  transform: translateX(100%);
  transition: transform 0.3s ease;
  display: flex;
  flex-direction: column;
  visibility: hidden;
}

.nav-drawer[aria-hidden="false"] {
  transform: translateX(0);
  visibility: visible;
}

.nav-drawer ul {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: var(--gap-xs);
  margin-top: var(--space-8);
}

.nav-drawer a {
  font-size: var(--type-h6-size);
  display: block;
  padding: var(--padding-md) var(--padding-sm);
  border-bottom: var(--border-width-thin) solid var(--color-white-20);
}

/* Overlay */
.nav-overlay {
  position: fixed;
  inset: 0;
  background: var(--color-overlay);
  z-index: var(--z-overlay);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.3s ease;
}

.nav-overlay.nav-overlay--visible {
  opacity: 1;
  pointer-events: auto;
}

/* Global content background */
.global-content-bg {
  padding: var(--padding-xl);
  background: var(--surface-content);
  width: 100%;
}

/* Bento grid */
.bento-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--gap-md);
  grid-auto-rows: 16rem;
}

.bento-item {
  position: relative;
  overflow: hidden;
  border-radius: var(--space-2);
  background: var(--color-navy-700);
}

.bento-item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center top;
  display: block;
  transition: transform 0.4s ease;
}

.bento-item figcaption {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  padding: var(--padding-md);
  background: linear-gradient(
    to top,
    hsla(0, 0%, 0%, 0.85) 0%,
    hsla(0, 0%, 0%, 0.65) 50%,
    transparent 100%
  );
  font-family: var(--type-body-family);
  font-size: var(--type-body-small-size);
  font-weight: var(--weight-regular);
  color: var(--text-primary);
  opacity: 0;
  transform: translateY(var(--space-2));
  transition:
    opacity 0.3s ease,
    transform 0.3s ease;
}

.bento-item:hover img {
  transform: scale(1.04);
}

.bento-item:hover figcaption {
  opacity: 1;
  transform: translateY(0);
}

/* Contact Form */
.contact-form {
  display: flex;
  flex-direction: column;
  gap: var(--gap-lg);
  width: 100%;
}

.form-group {
  display: flex;
  flex-direction: column;
  gap: var(--gap-xs);
}

.form-group label {
  font-family: var(--type-body-family);
  font-size: var(--type-body-small-size);
  font-weight: var(--weight-semibold);
  color: var(--color-white-80);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.form-group label span {
  color: var(--color-white);
  margin-left: var(--space-1);
}

.form-group input,
.form-group textarea {
  font-family: var(--type-body-family);
  font-size: var(--type-body-size);
  font-weight: var(--type-body-weight);
  color: var(--color-white);
  background: var(--color-white-20);
  border: var(--border-width-thin) solid var(--color-white-20);
  border-radius: var(--space-1);
  padding: var(--padding-sm) var(--padding-md);
  width: 100%;
  transition:
    border-color 0.2s ease,
    background 0.2s ease;
}

.form-group textarea {
  resize: vertical;
  min-height: 8rem;
  line-height: 1.6;
}

.form-group input::placeholder,
.form-group textarea::placeholder {
  color: var(--color-white-20);
}

.form-group input:focus,
.form-group textarea:focus {
  outline: none;
  border-color: var(--color-white-80);
  background: hsla(0, 0%, 100%, 0.12);
}

.form-group input:not(:placeholder-shown):invalid,
.form-group textarea:not(:placeholder-shown):invalid {
  border-color: var(--color-error);
}

.form-group input:not(:placeholder-shown):valid,
.form-group textarea:not(:placeholder-shown):valid {
  border-color: var(--color-success);
}

/* Primary button — reusable across pages */
.btn-primary {
  display: inline-flex;
  align-items: center;
  width: fit-content;
  gap: var(--gap-sm);
  font-family: var(--type-body-family);
  font-size: var(--type-body-size);
  font-weight: var(--weight-semibold);
  color: var(--color-white);
  background: var(--color-navy-500);
  border: var(--border-width-thin) solid var(--border-subtle);
  border-radius: var(--space-1);
  padding: var(--padding-sm) var(--padding-xl);
  text-decoration: none;
  cursor: pointer;
  transition:
    background 0.2s ease,
    border-color 0.2s ease;
}

.btn-primary:hover {
  background: var(--color-navy-700);
  border-color: var(--color-white-20);
}

.btn-primary:focus-visible {
  outline: 2px solid var(--color-white);
  outline-offset: 3px;
}

/* Submit button — extends btn-primary, aligns left in flex context */
.btn-submit {
  align-self: flex-start;
}

/* Social links */
.contact-social-link {
  display: inline-flex;
  align-items: center;
  gap: var(--gap-sm);
  color: var(--color-white);
  text-decoration: none;
  background: var(--color-white-20);
  border: var(--border-width-thin) solid var(--color-white-20);
  border-radius: var(--space-1);
  padding: var(--padding-xs);
  width: fit-content;
  transition:
    background 0.2s ease,
    color 0.2s ease,
    border-color 0.2s ease;
}

.contact-social-link:hover {
  background: var(--color-white);
  color: var(--color-grey-900);
  border-color: var(--color-white);
}

.contact-social-link:hover .ph-facebook-logo {
  color: #1877f2;
}

.contact-social-link:hover .ph-twitter-logo {
  color: var(--color-grey-900);
}

.contact-social-link:focus-visible {
  outline: 2px solid var(--color-white);
  outline-offset: 3px;
}

/* Toast */
.toast {
  position: fixed;
  bottom: var(--space-8);
  left: 50%;
  transform: translateX(-50%) translateY(calc(100% + var(--space-8)));
  background: var(--color-navy-700);
  color: var(--color-white);
  font-family: var(--type-body-family);
  font-size: var(--type-body-small-size);
  font-weight: var(--weight-semibold);
  padding: var(--padding-sm) var(--padding-xl);
  border-radius: var(--space-1);
  border: var(--border-width-thin) solid var(--border-subtle);
  white-space: nowrap;
  opacity: 0;
  transition:
    transform 0.3s ease,
    opacity 0.3s ease;
  z-index: var(--z-toast);
  pointer-events: none;
}

.toast--visible {
  opacity: 1;
  transform: translateX(-50%) translateY(0);
}

.toast--error {
  border-color: var(--color-error);
}

.layout-flex {
  display: flex;
  flex-direction: var(--layout-direction, row);
  gap: var(--layout-gap, var(--gap-md));
}

.layout-two-col {
  display: flex;
  gap: var(--layout-gap, var(--gap-md));
}

.layout-two-col > * {
  flex: 1 1 50%;
  min-width: 0;
}

.layout-two-col > img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center top;
  border-radius: var(--space-2);
}

/* Lessons page image height constraint */
.lessons-image {
  max-height: var(--image-constrained-height);
  object-fit: contain;
  object-position: center top;
}

.layout-row {
  --layout-direction: row;
}
.layout-column {
  --layout-direction: column;
}

.layout-gap-sm {
  --layout-gap: var(--gap-sm);
}
.layout-gap-md {
  --layout-gap: var(--gap-md);
}
.layout-gap-lg {
  --layout-gap: var(--gap-lg);
}

.align-center {
  align-items: center;
}
.align-bottom {
  justify-content: end;
}

/* Music page sidebar */
.layout-grid-content-sidebar {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: var(--layout-gap, var(--gap-md));
}

.music-sidebar-image {
  height: calc((180px * 3) + (var(--gap-lg) * 2));
  object-fit: cover;
  object-position: center top;
  border-radius: var(--space-2);
  display: block;
}

/* Video grid */
.video-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--gap-lg);
}

.video-embed {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 9;
}

.video-embed iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border: none;
  border-radius: var(--space-2);
}

/* — Tablet: ≤64rem */
@media (max-width: 64rem) {
  .bento-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .video-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

/* — Mobile: ≤48rem */
@media (max-width: 48rem) {
  /* Nav */
  .nav-desktop {
    display: none;
  }

  .hamburger {
    display: flex;
  }

  /* Layout */
  main {
    padding: var(--section-padding-md) var(--padding-md);
  }

  .global-content-bg {
    padding: var(--padding-lg);
  }

  footer {
    padding: var(--padding-md);
  }

  /* Two-col stacks, image always on top */
  .layout-two-col {
    flex-direction: column;
  }

  .layout-two-col > img {
    order: -1;
    width: 100%;
    height: auto;
    max-height: var(--image-constrained-height);
  }

  /* Lessons image — same token, no override needed since inline style is removed */
  .lessons-image {
    max-height: var(--image-constrained-height);
  }

  /* Grids go single col */
  .video-grid,
  .bento-grid {
    grid-template-columns: 1fr;
  }

  /* Music sidebar — stack soundcloud, hide image */
  .layout-grid-content-sidebar {
    display: flex;
    flex-direction: column;
    height: auto;
  }

  .music-sidebar-image {
    display: none;
  }
}