/* Elegant, dark-mode-friendly portfolio theme — NO gradients, NO glow, NO purple/blue */
:root{

  /* Light */

  /* Accent */


  /* Shadows */

  --radius: 0px;
  --container: 1080px;

  --focus: rgba(17, 24, 39, .22);

  --feature-media-w: clamp(380px, 50vw, 920px);
  --feature-media-h: clamp(520px, 60vh, 760px);
  
  --nav-h: 100px;

    --bg: #0f0d0d;
    --bg-alt: #120c0d;
    --surface: #1c1315;
    --text: #e9edf6;
    --muted: #a8b2c7;
    --border: rgba(233, 237, 246, 0.14);

    --accent: #690229;
    --accent-ink: #e9edf6;
    --accent-hover: #80163e;

    --shadow: 0 18px 50px rgba(0,0,0,.55);
    --shadow-soft: 0 12px 34px rgba(0,0,0,.40);

    --focus: rgba(233, 237, 246, .26);

    --font-sans: "IBM Plex Sans", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial;
    --font-serif: "Spectral", ui-serif, Georgia, Cambria, "Times New Roman", Times, serif;
  
}

/* Base reset */
*{ box-sizing: border-box; }
body.menu-open{
  overflow: hidden;
}
html, body{
  height: 100%;
  -ms-overflow-style: none;
  scrollbar-width: none;
}
html::-webkit-scrollbar,
body::-webkit-scrollbar{
  width: 0;
  height: 0;
}

body{
  margin: 0;
  font-family: var(--font-sans);
  color: var(--text);
  background: var(--bg);
  line-height: 1.55;
}

h1, h2, h3{
  margin: 0;
  line-height: 1.12;
  letter-spacing: -0.02em;
  font-family: var(--font-serif);
}
p{ margin: 0; }

img{ max-width: 100%; display: block; }

a{ color: var(--accent); text-decoration: none; }
a:hover{ text-decoration: underline; }

:focus-visible{
  outline: 2px solid var(--focus);
  outline-offset: 3px;
  border-radius: 12px;
}

/* Skip link */
.skip-link{
  position: absolute;
  top: 10px;
  left: 10px;
  padding: 10px 12px;
  background: var(--text);
  color: var(--bg);
  border-radius: 12px;
  transform: translateY(-160%);
  z-index: 999;
}
.skip-link:focus{ transform: translateY(0); }

/* Layout container */
.container{
  width: min(var(--container), calc(100% - 48px));
  margin-inline: auto;
}

.page-hero{
  position: relative;
  width: 100%;
  min-height: clamp(110px, 15vw, 220px);
  overflow: hidden;
}

/* The image fills the full width/height */
.page-hero__img{
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Overlay (no gradient; just a solid dark veil) */
.page-hero::after{
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(0,0,0,.45);
  pointer-events: none;
}

/* Keep text aligned to your site container while image is full width */
.page-hero__inner{
  position: relative;
  z-index: 1;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding-block: clamp(18px, 3vw, 40px);
  background: color-mix(in srgb, black 50%, transparent);
}

.page-hero__title{
  margin: 0;
  color: #fff;
  letter-spacing: .04em;
  text-transform: uppercase;

  /* optional: subtle readability without “glow” */
  
  border-bottom: 1px solid rgba(255,255,255,.18);
  padding: 12px 14px;
}

/* Header / nav */
.site-header{
  position: sticky;
  top: 0;
  z-index: 100;
  background: color-mix(in srgb, var(--bg) 92%, transparent);
  backdrop-filter: blur(14px);
  border-bottom: 1px solid var(--border);
  overflow-x: clip;
}

.nav{
  height: var(--nav-h);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  width: min(var(--container), calc(100% - 48px));
  margin-inline: auto;
  box-sizing: border-box;
  padding-inline: 0;
}

.brand{
  display: flex;
  align-items: center;
  height: 100%;
  flex: 1 1 auto;
  gap: 10px;
  color: var(--text);
  font-weight: 700;
  letter-spacing: .2px;
  padding-left: 0;
  min-width: 0;
  font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial;
  padding-left: clamp(10px, 1.6vw, 22px);
}

.brand__mark{
  width: 30px;
  height: 30px;
  display: grid;
  place-items: center;
  border-radius: 12px;
  background: var(--surface);
  border: 1px solid var(--border);
  box-shadow: var(--shadow-soft);
}
.brand--footer .brand__mark{ 
  box-shadow: none;
   }

.brand--footer {
  justify-content: end;
}

.footer__brand {
  justify-self: end;
  align-items: end;
  text-align: right;
  
}

.footer__brand .brand{
  height: auto;             
  align-items: flex-start;  
  padding-left: 0;   
  flex: 0 0 auto;       
}

.brand__textWrap{
  flex: 1;
  min-width: 0;
  overflow: hidden;
}
.brand__text{
  display: inline-block;
  white-space: nowrap;
  height: 100%;
  font-size: clamp(10px, 6cqw, 36px);
  letter-spacing: 3px;
}

.nav__links{
  display: flex;
  flex: 1 1 auto;
  align-items: stretch;
  gap: 0;
  height: 100%;
  padding-left: 0;
  min-width: 0;
  list-style: none;
  position: relative;
  will-change: transform;
  isolation: isolate;
  margin-left: auto;
  transition:
    transform 220ms cubic-bezier(.2,.9.2,1),
    background-color 220ms ease,
    color 220ms ease,
    border-color 220ms ease;
}

.nav__links li{
  display: flex;
  height: 100%;
  flex: 1 1 auto;
  border-left: 1px solid var(--border);
}
.nav__links li:last-child{ border-right: 1px solid var(--border); }

.nav__links a{
  display: flex;
  position: relative;
  z-index: 0;
  align-items: center;
  justify-content: center;
  height: 100%;
  width: 100%;
  color: color-mix(in srgb, var(--text) 88%, transparent);
  font-weight: 650;
  text-decoration: none;
  text-align: center;
  padding: 10px 10px;
}
.nav__links a:hover,
.nav__links a:focus-visible{
  transform: translateY(-3px);
  background: color-mix(in srgb, var(--bg) 98%, white);
  z-index: 5;
}

/* Mobile menu */
.nav__mobile{ display: none; }
.nav__mobile summary{
  list-style: none;
  cursor: pointer;
  padding: 10px 12px;
  border: 1px solid var(--border);
  border-radius: 14px;
  color: var(--text);
  background: var(--surface);
  box-shadow: var(--shadow-soft);
}
.nav__mobile summary::-webkit-details-marker{ display:none; }

.nav__panel{
  position: absolute;
  right: 24px;
  top: 68px;
  width: min(260px, calc(100% - 48px));
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 16px;
  box-shadow: var(--shadow);
  padding: 10px;
  display: grid;
  gap: 6px;
}
.nav__panel a{
  padding: 12px 10px;
  border-radius: 14px;
  color: var(--text);
}
.nav__panel a:hover{
  background: color-mix(in srgb, var(--bg-alt) 80%, transparent);
}

/* Buttons */
.btn{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 12px 14px;
  border: 1px solid color-mix(in srgb, var(--accent) 70%, transparent);
  background: var(--accent);
  color: var(--accent-ink);
  font-weight: 700;
  text-decoration: none;
  box-shadow: var(--shadow-soft);
  will-change: transform;
  transition:
    transform 220ms cubic-bezier(.2,.9.2,1),
    filter 220ms ease,
    box-shadow 220ms ease;
}

.btn:hover,
.btn:focus-visible{
  transform: translateY(-3px) scale(1.02);
  filter: brightness(1.03);
  box-shadow: 0 16px 36px rgba(0,0,0,.14);
  z-index: 5;
}

.nav__links a.btn:hover,
.nav__links a.btn:focus-visible{
  background: var(--accent-hover);
  border-color: var(--accent-hover);
  filter: none;
  box-shadow: 0 3px 0 color-mix(in srgb, var(--accent) 86%, black);
}

.btn--ghost{
  background: var(--surface);
  color: var(--text);
  border: 1px solid var(--border);
  box-shadow: var(--shadow-soft);
}
.btn--ghost:hover,
.btn--ghost:focus-visible{
  transform: translateY(-3px) scale(1.02);
}
.btn--small{ padding: 10px 12px; }

#main{
  display: grid;
  gap: 70px;           /* spacing between sections */
  padding: 0 0 70px;     /* top/bottom breathing room for the whole page */
  background: var(--bg);
}

/* Sections / typography helpers */
.section{
  padding: 0;
  background: var(--bg);
}


/* Alternate band: keep band bg, but swap the inner panel bg */
.section--alt{
  background: var(--bg);
  border: 0;
  --panel-bg: var(--bg-alt);
}

.section__head{
  display: grid;
  gap: 10px;
  margin-bottom: 22px;
}

h1{ font-size: clamp(2.05rem, 4vw, 3.2rem); }
h2{ font-size: clamp(1.4rem, 2.2vw, 2.0rem); }

.h3{ font-size: 1.2rem; font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial; letter-spacing: -0.01em; }
.h4{ font-size: 1.05rem; font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial; letter-spacing: -0.01em; }

.eyebrow{ color: var(--muted); margin: 0 0 12px; font-weight: 650; font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial; }
.lede{ font-size: 1.05rem; color: var(--muted); margin-top: 12px; }
.muted{ color: var(--muted); }

.music__panel{
  padding: 0;
}

.panel.music__panel{
  padding: 0;
}

.music__panel > .music__intro {
  padding: 18px;
}


.music__intro{
  display: grid;
  gap: 10px;
  margin-bottom: 22px;
}

.music__toc{
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 6px;
}

.music__tocLink{
  display: inline-flex;
  align-items: center;
  padding: 8px 10px;
  border: 1px solid var(--border);
  background: var(--bg-alt);
  border-radius: 10px;
  color: var(--text);
  font-weight: 650;
  text-decoration: none;
}
.music__tocLink:hover{ text-decoration: underline; }

.music__groups{
  display: grid;
  gap: 0;
}

/* Section block */
.music-group{
  border-top: 1px solid var(--border);
  padding-top: 0;
}

.music-group:first-child{
  border-top: 0;
}

/* Summary (clickable header) */
.music-group__summary{
  list-style: none;
  cursor: pointer;
  padding: clamp(12px, 2vw, 16px);
  display: flex;
  align-items: flex-start;
  gap: 12px;
}

.music-group__summary::-webkit-details-marker{ display: none; }

.music-group__summaryText{
  display: grid;
  gap: 6px;
  min-width: 0;
  
}
.music-group__summaryText.h3:hover {
  text-decoration: none;
}

/* Chevron (pure CSS) */
.music-group__summary::after{
  content: "";
  width: 10px;
  height: 10px;
  margin-left: auto;
  margin-top: 6px;
  border-right: 2px solid color-mix(in srgb, var(--text) 70%, transparent);
  border-bottom: 2px solid color-mix(in srgb, var(--text) 70%, transparent);
  transform: rotate(45deg);
  transition: transform 200ms ease;
  flex: 0 0 auto;
}

.music-group[open] > .music-group__summary::after{
  transform: rotate(225deg);
}

/* Hover/focus */


.music-group__summary:focus-visible{
  outline: 2px solid var(--focus);
  outline-offset: 4px;
  border-radius: 12px;
}

/* Collapsed/expanded body */
.music-group__body{
  padding: 0;
  background: var(--bg-alt);
}

.music-group__body .tracklist{
  padding: clamp(12px, 2vw, 16px);  /* re-add *controlled* inner padding */
}

.music-group > summary{
  scroll-margin-top: calc(var(--nav-h, 100px) + 12px);
}

/* Optional: add separation line between summary and body when open */
.music-group[open] > .music-group__summary{
  border-bottom: 1px solid var(--border);
}

.music-group__head{
  display: grid;
  gap: 8px;
  margin-bottom: 12px;
}

.music-track{
  display: grid;
  gap: 10px;
  padding: 12px 0;
}


/* Make native audio look “cleaner” without custom UI */
.music-audio{
  width: 100%;
  height: 40px;
}
/* Hero */
.hero h1{
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: .4ch;
}

.pronounce{
  font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial;
  font-size: 0.42em;
  font-weight: 650;
  color: var(--muted);
  letter-spacing: 0.01em;
}

.hero__grid--full{
  position: relative;
  align-items: stretch;
  width: 100%;
  margin: 0;
  max-width: none;

  display: grid;
  grid-template-columns: clamp(320px, 42vw, 680px) 1fr;
  gap: 0;

  background: var(--surface);
  border: 1px solid var(--border);
  overflow: hidden;
}

.hero__photo{
  position: relative;
  aspect-ratio: 1 / 1;
  background: var(--bg-alt);
  z-index: 1;
}
.hero__photo img{
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.hero__photo::after{
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
}

.hero__content{
  position: relative;
  z-index: 2;
  display: flex;
  flex-direction: column;
  justify-content: center;
  min-height: 100%;
  padding: clamp(18px, 4vw, 72px);
  background: var(--surface);
  margin-left: -48px;
  box-shadow: -48px 0 28px rgba(0,0,0,.18);
}

.hero__cta{
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 24px;
  isolation: isolate;
}

.hero__meta{
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 14px;
  color: var(--muted);
}
.hero__meta a{ color: var(--muted); }
.hero__meta a:hover{ color: var(--text); }

/* Feature sections (hero-style panels) */
.feature__grid--full{
  position: relative;
  align-items: stretch;
  width: 100%;
  margin: 0;
  max-width: none;

  display: grid;
  grid-template-columns: var(--feature-media-w) 1fr;
  grid-template-areas: "media content";
  gap: 0;

  /* IMPORTANT: panel background is driven by section variable */
  background: var(--panel-bg, var(--surface));

  border: 1px solid var(--border);
  overflow: hidden;
}

.feature__media{
  position: relative;
  overflow: hidden;
  grid-area: media;
  min-height: var(--feature-media-h);
}
.feature__media img{
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.feature__content{
  position: relative;
  z-index: 2;
  grid-area: content;
  padding: clamp(18px, 4vw, 72px);

  /* match panel background */
  background: var(--panel-bg, var(--surface));

  margin-left: -48px;
  box-shadow: -48px 0 28px rgba(0,0,0,.18);
}

.feature__cta{
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 24px;
  isolation: isolate;
}

.feature__content--center{
  display: flex;
  flex-direction: column;
  justify-content: center;
  min-height: 100%;
}

/* Reverse layout */
.feature--reverse .feature__grid--full{
  grid-template-columns: 1fr var(--feature-media-w);
  grid-template-areas: "content media";
}
.feature--reverse .feature__content{
  margin-left: 0;
  margin-right: -48px;
  box-shadow: 48px 0 28px rgba(0,0,0,.18);
}

/* Common panels/cards */
.panel, .card, .callout, .contact__card{
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  /*box-shadow: var(--shadow-soft);*/
}
.panel{ padding: 18px; }

.panel--insetMedia{
  padding: 0;
  display: grid;
  overflow: hidden;
  --media-w: clamp(240px, 34%, 420px);
  --cast-w: 110px;          /* how far the shadow reaches into the image */
  --cast-strength: 0.32;    /* shadow darkness */
  grid-template-columns: var(--media-w) 1fr; /* default: media left */
  align-items: stretch; /* prevents 4:3 media from stretching */
}

.panel--insetMedia.panel--right{
  grid-template-columns: 1fr var(--media-w); /* media right */
}

/* MEDIA: locked 4:3 */
.panel--insetMedia .panel__media{
  position: relative;
  aspect-ratio: 4 / 3;
  background: var(--bg-alt);
  overflow: hidden;
  z-index: 1;
  align-self: start; /* keep aspect-ratio */
}

.panel--insetMedia .panel__media img{
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 50%;
}

/* optional subtle veil (keep light so the cast shadow is visible) */
.panel--insetMedia .panel__media::after{
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(0,0,0,.06);
  pointer-events: none;
}

/* CONTENT: sits above media */
.panel--insetMedia .panel__content{
  height: 100%;
  display: flex;
  flex-direction: column;
  position: relative;
  z-index: 2;
  background: var(--surface);
  padding: 18px;
  box-shadow: none; /* IMPORTANT: remove regular box-shadow */
}


.panel--insetMedia .panel__content::after{
  content: "";
  position: absolute;
  top: 10px;
  bottom: 10px;
  width: var(--cast-w);
  pointer-events: none;
  filter: blur(16px);
  opacity: 1;
}

/* media on LEFT => cast to LEFT */
.panel--insetMedia:not(.panel--right) .panel__content::after{
  left: calc(-1 * var(--cast-w));
  background: linear-gradient(to left,
    rgba(0,0,0,var(--cast-strength)) 0%,
    rgba(0,0,0,0) 100%);
}

/* media on RIGHT => cast to RIGHT */
.panel--insetMedia.panel--right .panel__content::after{
  right: calc(-1 * var(--cast-w));
  background: linear-gradient(to right,
    rgba(0,0,0,var(--cast-strength)) 0%,
    rgba(0,0,0,0) 100%);
}

.panel--insetMedia .panel__content .bullets{
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}



.panel--full{
  width: 100%;
  margin: 0;
  max-width: none;

  background: var(--panel-bg, var(--surface));
  border: 1px solid var(--border);
  overflow: hidden;

  /* match feature panels (no rounded card look) */
  border-radius: 0;
  box-shadow: none;
}

/* Give it the same kind of internal padding your feature content has */
.panel--full > .container{
  padding: clamp(18px, 4vw, 72px);
}

.callout{
  margin-top: 18px;
  padding: 14px 16px;
  background: var(--surface);
  border: 1px solid var(--border);
}

.bullets{ margin: 12px 0 10px; padding-left: 18px; }
.bullets li{ margin: 6px 0; }

/* Cards grid (if you still use it on other pages) */
.cards{
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
}

.card{
  overflow: hidden;
  display: grid;
  grid-template-rows: auto 1fr;
  min-height: 100%;
  transition: transform .18s ease, box-shadow .18s ease;
}
.card:hover{
  transform: translateY(-2px);
  box-shadow: var(--shadow);
}

.card__media{
  background: var(--bg-alt);
  aspect-ratio: 4 / 3;
}
.card__media img{
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.card__body{
  padding: 14px 14px 16px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  height: 100%;
}

.card__body > p.muted {
  flex: 1 1 auto;
}

.card__body .tags {
  margin-top: auto;
  align-self: flex-start;
}

.tags{
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  padding: 0;
  margin: 0;
}
.tags li{
  list-style: none;
  padding: 6px 10px;
  border-radius: 10px;
  border: 1px solid var(--border);
  background: var(--bg-alt);
  color: var(--muted);
  font-size: .9rem;
  font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial;
}

.card__links{
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial;
}
.card__links a{ font-weight: 700; }
.card__links a:hover{ text-decoration: underline; }

/* Grids/helpers */
.two-col{
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
}

.embed{
  aspect-ratio: 16/9;
  border-radius: 14px;
  overflow: hidden;
  border: 1px solid var(--border);
  background: #000;
  margin-top: 10px;
}
.embed iframe{ width: 100%; height: 100%; border: 0; }

.tracklist{
  margin: 0;
  padding: 0;
  display: grid;
  gap: 12px;
}
.track{
  list-style: none;
  background: var(--surface);
  border: 1px solid var(--border);
  padding: 14px;
  display: grid;
  gap: 10px;
}
.track__head{
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
}
.tracklist__title{ 
  font-weight: 750; 
  font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial;
  letter-spacing: -0.01em; 
  
}

.tracklist__meta{ 
  color: var(--muted); 
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.track__desc{
  margin: 0;
}
.track__player{
  width: 100%;
  height: 40px;
  border-radius: 0;
}
.tracklist li{ list-style: none; display: grid; gap: 8px; }
.tracklist__row{ display: flex; justify-content: space-between; gap: 10px; }
.track__titleWrap {
  display: flex;
  align-items: baseline;
  gap: 10px;
  flex-wrap: wrap;
}
.track__chip{
  font-size: .78rem;
  padding: 4px 8px;
  border: 1px solid var(--border);
  background: var(--bg-alt);
  color: var(--muted);
  border-radius: 999px;
  font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial;
  white-space: nowrap;
}
@media(hover:hover) {
  .track{
    transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
  }
  .track:hover{
    transform: translateY(-2px);
    box-shadow: var(--shadow-soft);
    border-color: color-mix(in srgb, var(--accent) 35%, var(--border));
  }
}

.gallery{
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 10px;
  margin-top: 10px;
}
.gallery img{
  border-radius: 14px;
  border: 1px solid var(--border);
  aspect-ratio: 4/5;
  object-fit: cover;
}

.stack{ display: flex; flex-wrap: wrap; gap: 10px; margin-top: 12px; }

.credits{ margin: 10px 0 0; padding-left: 18px; }
.credits li{ margin: 8px 0; }

.prose{ max-width: 80ch; }
.prose p{ margin: 0 0 12px; }
.prose ul{ margin: 0; padding-left: 18px; }
.prose li{ margin: 8px 0; }

.contact{
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
}
.contact__card{ padding: 16px; }

.links{ margin: 0; padding-left: 18px; }
.links li{ margin: 6px 0; }

/* Footer */
.site-footer{
  padding: 40px 0 26px;
  border-top: 1px solid var(--border);
  background: var(--bg);
}

.footer__grid{
  display: grid;
  grid-template-columns: 1fr 1fr; 
  column-gap: clamp(10px, 10vw, 36px);            
  align-items: start;
}

.footer__nav{
  justify-self: start;
  display: grid;
  grid-template-columns: auto auto; /* two columns inside the group */
  column-gap: 24px;                 /* tight gap between Links and Contact */
  align-items: start;
  text-align: left;
}

/* Make footer lists compact and remove indent */
.site-footer .links{
  list-style: none;
  padding: 0;
  margin: 8px 0 0;
  display: grid;
  gap: 6px;
}

.footer__fineprint{
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  text-align: center;
  gap: 10px;
  margin-top: 18px;
  color: var(--muted);
  font-size: .95rem;
}

.footer__dot{ opacity: .7; }

/* Small helpers */
.kicker{
  font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial;
  font-weight: 750;
  letter-spacing: .12em;
  text-transform: uppercase;
  font-size: .78rem;
  color: color-mix(in srgb, var(--muted) 92%, transparent);
}

.hr{
  height: 1px;
  background: var(--border);
  border: 0;
  margin: 22px 0;
}

.site-footer .brand {
  height: auto;
  padding-left: 0;
  flex: 0 0 auto;
  align-items: flex-start; 
  line-height: 1.12;
  padding-bottom: 12px;  
}

.site-footer .brand__text{
  line-height: 1.12;  /* or 1.0 if you want it even tighter */
  height: auto;       /* avoid any weird inherited 100% */
}

.theatre-section{
  padding: clamp(16px, 2.5vw, 24px);
}

/* Section 1: file cards */
.theatre-assets{
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
  margin-top: 12px;
}

.theatre-fileCard{
  display: grid;
  grid-template-rows: auto 1fr;
  border: 1px solid var(--border);
  background: var(--surface);
  text-decoration: none;
  color: var(--text);
  overflow: hidden;
}

.theatre-fileCard:hover{
  box-shadow: var(--shadow-soft);
}

.theatre-fileCard img{
  width: 100%;
  height: 320px;
  object-fit: cover;
  background: var(--bg-alt);
}

.theatre-fileCard__pdf{
  height: 320px;
  display: grid;
  place-items: center;
  background: var(--bg-alt);
  font-weight: 800;
  letter-spacing: .12em;
  border-bottom: 1px solid var(--border);
}

.theatre-fileCard__meta{
  padding: 12px 14px;
  display: grid;
  gap: 2px;
}

.theatre-fileCard__title{
  font-weight: 750;
  font-family: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial;
}

/* Section 2: videos */
.theatre-videos{
  display: grid;
  gap: 16px;
  margin-top: 12px;
}

.theatre-gallery{
  display: grid;
  grid-template-columns: repeat(2, 1fr);

}

/* Section 3: gallery tweaks (optional) */
.theatre-gallery img{
  width: 100%;
  aspect-ratio: 3 / 2;   /* 1.5:1 */
  object-fit: cover;
  border: 1px solid var(--border);
  border-radius: 1px;
}

.show-carousels{
  display: grid;
  gap: clamp(18px, 3vw, 32px);
}

.show-block{
  display: grid;
  gap: 12px;
  padding-top: 16px;
  border-top: 1px solid var(--border);
  --carousel-btn: 40px;
  --carousel-gap: 10px;
}
.show-block:first-child{
  border-top: 0;
  padding-top: 0;
}

.show-block__head{
  display: grid;
  padding-inline: calc(var(--carousel-btn) + var(--carousel-gap));
}

/* --- Carousel --- */
.carousel{
  --peek: clamp(50px, 12vw, 100px);
  --gap: 12px;
  display: grid;
  grid-template-columns: var(--carousel-btn) 1fr var(--carousel-btn);
  gap: var(--carousel-gap);
  align-items: center;
}

.carousel__btn{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: var(--carousel-btn);
  height: calc(2 * var(--carousel-btn));
  border: 1px solid var(--border);
  background: var(--surface);
  color: var(--text);
  border-radius: 1px;
  box-shadow: var(--shadow-soft);
  cursor: pointer;
  user-select: none;
}
.carousel__btn:hover{
  background: color-mix(in srgb, var(--bg-alt) 80%, transparent);
}

.carousel__viewport{
  overflow-x: auto;
  overflow-y: hidden;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  -webkit-overflow-scrolling: touch;

  /* IMPORTANT: no horizontal padding if you want true full-width */
  scroll-padding-inline: var(--peek);

  border: 1px solid var(--border);
  background: var(--bg-alt);

  touch-action: pan-x;
}

/* Hide scrollbar (optional; you already hide globally, but this helps some browsers) */
.carousel__viewport::-webkit-scrollbar{ height: 0; }

.carousel__track{
  display: flex;
  gap: var(--gap);
  margin: 0;
  padding: 0;            /* IMPORTANT: keep this 0 */
  list-style: none;
}

.carousel__slide{
  flex: 0 0 calc(100% - (2*var(--peek)));
  scroll-snap-align: center;
  scroll-snap-stop: always;
}

.carousel__slide img{
  width: 100%;
  aspect-ratio: 3 / 2;
  object-fit: cover;
  display: block;
  border: 1px solid var(--border);
  background: var(--surface);
  transition: transform 180ms ease, opacity 180ms ease, filter 180ms ease;
}

/* Optional: since only one slide is visible, you can remove dimming */
.carousel__slide:not(.is-active) img{
  opacity: 0.45;
  transform: scale(0.98);
  filter: saturate(0.9);
}
.carousel__slide.is-active img{
  opacity: 1;
  transform: scale(1);
  filter: none;
}

.project-work__groups{
  display: grid;
  gap: 0; /* matches music__groups style */
}

/* Your music accordion body padding is tied to .tracklist; add a generic content wrapper */
.music-group__body .work-content{
  padding: clamp(12px, 2vw, 16px);
}

/* Two-column layout: text + images */
.work-grid{
  display: grid;
  grid-template-columns: minmax(0, 1.25fr) minmax(0, 0.75fr);
  gap: 16px;
  align-items: center;
}

.work-grid > *{
  min-width: 0;
}

.work-grid-single{
  display: block;
  grid-template-columns: 1fr;
  gap: 16px;
  align-items: center;
}

.work-grid-single > *{
  min-width: 0;
}

.work-grid-single > * + *{
  margin-top: 16px;
}

/* BUT: code dropdown should feel attached to the paragraph above */
.work-grid-single > details.code-drop{
  margin-top: 6px;      /* smaller than 16px */
}

.work-text-left{
  display: flex;
  flex: 1 1 auto;
  flex-direction: column;
  text-align: left;
  justify-content: space-evenly;
  height: 100%;
}

/* Media column */
.work-media{
  display: grid;
  gap: 12px;
}

/* Optional: make a tighter 2-up grid for media */
.work-media--grid{
  grid-template-columns: 1fr 1fr;
}

/* Work images */
.work-media img{
  width: 100%;
  aspect-ratio: 4/3; /* change to 4/3 or 3/2 if you prefer */
  object-fit: cover;
  border: 1px solid var(--border);
  background: var(--surface);
}

.codeblock{
  margin-top: 12px;
  border: 1px solid var(--border);
  background: color-mix(in srgb, var(--bg-alt) 88%, black);
  box-shadow: var(--shadow-soft);
  overflow: auto;
  min-width: 0;
}

/* Prism uses <pre> styles heavily */
.codeblock[class*="language-"]{
  max-width: 100%;
  padding: 14px 16px;
  border-radius: 0; /* matches your sharp style */
}

.codeblock, pre[class*="language-"] {
  max-width: 100%;
  overflow-x: auto;
  overflow-y: hidden;
}

/* Keep code readable */
.codeblock code{
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
  font-size: 0.92rem;
  line-height: 1.5;
}

.codeblock code, pre[class*="language-"] > code {
  display: block;
  min-width: 0;
}

.code-drop{
  border-top: 0;
  margin-top: 6px;
  padding-top: 0;
  background: var(--bg-alt);
}

/* Remove the "separate section" look */
.code-drop{ border-top: 0; } /* (just in case) */

.code-drop__summary{
  list-style: none;
  cursor: pointer;

  /* Looks like part of the paragraph flow */
  padding: 12px 14px;
  display: flex;
  align-items: center;
  gap: 12px;

  /* Make it feel attached */

}

.code-drop__summary::-webkit-details-marker{ display: none; }

/* Bigger heading text */
.code-drop__title{
  font-weight: 800;
  font-size: 0.95em;  /* bump up */
  letter-spacing: -0.01em;
  font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial;
}

/* Optional right-side label */
.code-drop__meta{
  margin-left: auto;
  font-size: .95rem;
}

/* Chevron */
.code-drop__summary::after{
  content: "";
  width: 10px;
  height: 10px;
  margin-left: 6px;
  border-right: 2px solid color-mix(in srgb, var(--text) 70%, transparent);
  border-bottom: 2px solid color-mix(in srgb, var(--text) 70%, transparent);
  transform: rotate(45deg);
  transition: transform 200ms ease;
  flex: 0 0 auto;
}

.code-drop[open] > .code-drop__summary::after{
  transform: rotate(225deg);
}

/* Body: no "panel separation bar", just content */
.code-drop__body{
  padding: 0;
  background: var(--bg-alt);
  border-top: 0;
  padding-left: 20px;
  padding-right: 20px;
}

/* Give the code some breathing room inside */
.code-drop__body .codeblock,
.code-drop__body pre[class*="language-"]{
  margin: 0;
  border-left: 0;
  border-right: 0;
  border-bottom: 0;
}

.code-drop__body pre,
.code-drop__body pre[class*="language-"],
.code-drop__body .codeblock{
  margin-top: 0 !important;
  margin-bottom: 12px !important; /* <-- more space BELOW */
}

/* Optional: tiny separation between the summary row and the code */
.code-drop__body{
  padding-top: 6px;
  padding-bottom: 0; /* bottom handled by margin-bottom above */
}

.code-drop > .music-group__summary{
  padding: 6px 0 12px;    /* top small, bottom bigger */
  gap: 8px;
}

/* Make the label feel more like a heading (optional) */
.code-drop > .music-group__summary .h3{
  font-size: 1.05rem;     /* bump this up/down to taste */
  font-weight: 750;
}

/* Space between the label and the code content when opened */
.code-drop > .music-group__body{
  padding-top: 10px;      /* creates the “after” space you want */
  background: transparent; /* keeps it attached to the surrounding prose */
}

/* Remove any default/preexisting top margin on the first code block */
.code-drop > .music-group__body pre{
  margin-top: 0 !important;
}

.work-grid-single > details.code-drop{
  margin-top: -10px; /* cancels most of the 16px gap; try -12px if you want tighter */
}

/* 2) Make the label itself tighter on top */
.code-drop__summary{
  padding-top: 2px;
  padding-bottom: 0;  /* we’ll put the space on the BODY instead */
  margin: 0;
}

/* 3) Bigger "Code Snippet" label */
.code-drop__title{
  font-size: 1.05rem;
  font-weight: 800;
}

/* 4) Put the spacing AFTER the label (between label and code) */
.code-drop__body{
  padding-top: 14px;   /* <- this is the “space after Code Snippet” */
  padding-bottom: 12px;
}

/* 5) Prism/default pre margins can eat your spacing — kill them inside the code dropdown */
.code-drop__body pre,
.code-drop__body pre[class*="language-"]{
  margin: 0 !important;
}

.work-grid-single > details.code-drop{
  margin-top: -16px; /* 16px gap - 14px ≈ 2px above the label */
}

/* Remove your extra +6px top margin on code-drop */
details.code-drop{
  margin-top: 0 !important;
}

/* Keep the label tight (no extra vertical padding) */
details.code-drop > summary.code-drop__summary{
  padding-top: 0 !important;
  padding-bottom: 0 !important;
}

/* Add the spacing AFTER the label (between label and code) */
details.code-drop > .code-drop__body{
  padding-top: 22px !important;   /* bigger gap BELOW the label */
  padding-bottom: 12px !important;
}

/* Ensure Prism/pre isn't reintroducing top spacing */
details.code-drop > .code-drop__body pre,
details.code-drop > .code-drop__body pre[class*="language-"]{
  margin-top: 0 !important;
}

details.code-drop > summary.code-drop__summary{
  padding: 0;                 /* kill the big 12px padding */
  margin: 0;                  /* reset */
}

/* small space ABOVE the label (keeps it attached to paragraph) */
.work-grid-single > details.code-drop > summary.code-drop__summary{
  margin-top: 0;
}

/* big space AFTER the label (between label and code) */
details.code-drop[open] > summary.code-drop__summary{
  margin-bottom: 18px;
}

/* Body should not add extra top spacing (summary is doing it now) */
details.code-drop > .code-drop__body{
  padding-top: 0;
  padding-bottom: 12px;
}

/* Prism/pre defaults can sneak spacing back in */
details.code-drop > .code-drop__body pre,
details.code-drop > .code-drop__body pre[class*="language-"]{
  margin: 0 !important;
}

details.code-drop,
details.code-drop > .code-drop__body,
details.code-drop > .code-drop__body *{
  min-width: 0;
}

/* Constrain ALL <pre> inside code dropdowns (even if Prism class is missing) */
details.code-drop > .code-drop__body pre{
  max-width: 100%;
  overflow-x: auto;
  overflow-y: hidden;
  white-space: pre;      /* keep formatting */
}

/* Make sure <code> can't force a min-content width */
details.code-drop > .code-drop__body pre > code{
  display: block;
  min-width: 0;
}

/* Optional: keep any accidental overflow from affecting layout */
details.code-drop > .code-drop__body{
  overflow-x: hidden;
}
/* Responsive */
@media (max-width: 920px){
  /* General grids */
  :root{
    --mobile-gutter: 24px; /* matches container's 48px total */
    --mobile-pad: clamp(18px, 5vw, 28px);
  }
  
  .cards{ grid-template-columns: 1fr; }
  .two-col{ grid-template-columns: 1fr; }
  .contact{ grid-template-columns: 1fr; }
  .footer__grid{ grid-template-columns: 1fr; }

  /* Hero stacks */
  .hero__grid--full{ grid-template-columns: 1fr; }
  .hero__content{
    justify-content: flex-start;
    margin: 0;
    box-shadow: none;
    padding: var(--mobile-pad) calc(var(--mobile-gutter) + var(--mobile-pad));
	
  }
  .hero__meta a{
    overflow-wrap: anywhere;
    word-break: break-word;
  }

  /* Feature stacks */
  .feature__grid--full,
  .feature--reverse .feature__grid--full{
    grid-template-columns: 1fr;
    grid-template-areas:
      "media"
      "content";
  }
  .feature__media{ min-height: 340px; }
  .feature__content{
    margin: 0;
	padding: var(--mobile-pad) calc(var(--mobile-gutter) + var(--mobile-pad));
    box-shadow: none;
  }
  
  .panel--full > .container{
    padding: var(--mobile-pad);
  }

  .footer__grid{
    grid-template-columns: 1fr;
    justify-items: center;   
    text-align: center;
    row-gap: 44px;
  }

  .footer__nav{
    grid-template-columns: 1fr;
    row-gap: 18px;
    justify-content: start;
  }

  .footer__brand{
    justify-content: flex-start;
    display: flex;
    flex-direction: column;
    justify-self: center;
    align-items: center;
    text-align: center;
  }

  .footer__brand .brand{
    justify-content: center;
    align-items: center;
  }

  .footer__nav{
    justify-self: center;
    text-align: center;
    grid-template-columns: 1fr; 
    row-gap: 16px;
    column-gap: 0;
  }

  .site-footer .links{
    justify-items: center; 
    gap: 6px;  
  }

  .footer__fineprint {
    margin-top: 28px;
  }

  .nav{
    width: min(var(--container), calc(100% - 48px));
    margin-inline: auto;
  }

  .brand{ padding-left: 0;
   flex: 0 1 35%;
   max-width: 35%;
  }
  .nav__links{ padding-left: 0;
  flex: 1 1 0; 
  min-width: 0;
  }
  .brand,
  .nav__links{
    min-width: 0;
  }
  .nav__links li{
    min-width: 0;
    flex: 1 1 0; 
  }
  .nav__links a{
    min-width: 0;
    padding-inline: 8px;    
    white-space: nowrap;     
    overflow: hidden;
  }
  .btn--small{
    padding: 8px 10px;
  }
  .brand__textWrap{
    display: block;
    min-width: 0;
    overflow: hidden;
    white-space: nowrap;
  }
  .brand__text{
    font-size: clamp(18px, 3.2vw, 30px);
    letter-spacing: 3px;   
    height: auto;         
    line-height: 1.1;
  }

  .theatre-assets{
    grid-template-columns: 1fr;
  }
  .theatre-fileCard img,
  .theatre-fileCard__pdf{
    height: 280px;
  }

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

  .panel--insetMedia, .panel--insetMedia.panel--right{
    grid-template-columns: 1fr;

  }
  .panel--insetMedia .panel__content{
    margin: 0;
    box-shadow: none;
    padding: var(--mobile-pad, 18px);
  }
  .panel--insetMedia .panel__media{
    aspect-ratio: 4 / 3;
  }

  .work-grid{ grid-template-columns: 1fr; }
  .work-media--grid{ grid-template-columns: 1fr; }
}

@media (max-width: 720px){
  /* Keep header above everything, make it opaque */
  .site-header{
    z-index: 3000;
    background: var(--bg);
    backdrop-filter: none;
  }

  .nav__links{ display: none; }

  .nav{
	  padding-inline: 20px;
  }
  .brand{ padding-left: 0;
   max-width: none;
   min-width: 0;
   flex: 1 1 auto;
  }

  .nav__mobile{
    display: block;
    position: relative;
    margin-right: 0;
  }

  .nav__mobile summary{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  line-height: 0;           /* removes extra baseline space */
  padding: 10px 12px;       /* keep your current spacing */
}

.nav__menuIcon{
  display: block;
  width: 22px;
  height: 22px;
  object-fit: contain;
}

.nav__menuIcon--close{ display: none; }

/* When the details is open: swap them */
.nav__mobile[open] .nav__menuIcon--open{ display: none; }
.nav__mobile[open] .nav__menuIcon--close{ display: block; }

  /* Backdrop starts below the header */
  .nav__mobile::before{
    content: "";
    position: fixed;
    left: 0;
    right: 0;
    top: var(--nav-h, 100px);
    bottom: 0;
    background: rgba(0,0,0,.35);
    opacity: 0;
    pointer-events: none;
    z-index: 2000;
    transition: opacity 260ms ease;
  }
  .nav__mobile[open]::before{
    opacity: 1;
    pointer-events: auto;
  }

  /* Panel is ALWAYS below header; animation is a reveal (no clipping) */
  .nav__mobile > .nav__panel{
    display: block; /* override details default */

    position: fixed;
    left: 0;
    right: 0;
    top: calc(var(--nav-h, 100px) + 1px); /* +1px clears header bottom border */
    z-index: 2500;

    width: 100%;
    max-width: none;
    border-radius: 0;
    padding: 10px 0 calc(10px + env(safe-area-inset-bottom));
    max-height: calc(100vh - var(--nav-h, 100px));
    overflow: auto;

    /* CLOSED */
    clip-path: inset(0 0 100% 0); /* hidden from bottom */
    opacity: 0;
    visibility: hidden;
    pointer-events: none;

    will-change: clip-path, opacity;
    transition:
      clip-path 320ms cubic-bezier(.2,.9,.2,1),
      opacity 220ms ease,
      visibility 0s linear 320ms;
  }

  /* OPEN */
  .nav__mobile[open] > .nav__panel{
    clip-path: inset(0 0 0 0);
    opacity: 1;
    visibility: visible;
    pointer-events: auto;

    transition:
      clip-path 320ms cubic-bezier(.2,.9,.2,1),
      opacity 220ms ease,
      visibility 0s;
  }

  .nav__panel a{
    display: block;
    width: 100%;
    padding: 16px 24px;
    border-radius: 0;
  }

  .nav__panel{
    overscroll-behavior: contain;
  }

  .music__panel{ padding: 0; }
  .music__groups{ gap: 22px; }
  
  #main {
	  gap: 32px;
	  padding-bottom: 32px;
  }

  .carousel{
    grid-template-columns: var(--carousel-btn) 1fr var(--carousel-btn);
    gap: var(--carousel-gap);
    --peek: 0px;
  }
  .show-block{
    --carousel-btn: 24px;
    --carousel-gap: 8px;
  }
}

@media (max-width: 520px){
  .theatre-gallery{ grid-template-columns: 1fr; }
}

@media (prefers-reduced-motion: reduce){
  .btn, .nav__links a { transition: none !important; }
}

html, body { overflow-x: clip; } /* use hidden if clip isn't supported */

/* Make sure the accordion + wrappers can't become wider than the panel */
.project-work, .work-content, .work-grid-single,
details.code-drop, details.code-drop > .code-drop__body {
  max-width: 100%;
  min-width: 0;
  overflow-x: clip;
}

/* Force Prism PREs to size to the container and scroll internally */
details.code-drop pre,
details.code-drop pre[class*="language-"],
details.code-drop pre.codeblock {
  display: block !important;
  width: 100% !important;
  max-width: 100% !important;
  min-width: 0 !important;
  box-sizing: border-box !important;

  overflow-x: auto !important;
  overflow-y: hidden !important;
}

/* Prevent CODE from forcing min-content width */
details.code-drop pre > code,
details.code-drop code {
  display: block !important;
  min-width: 0 !important;
}

.work-content p, .work-content a { overflow-wrap: anywhere; }