:root{
  --cream:#f1ebd8;
  --charcoal:#1f1f1f;
  --red:#973301;
  --ink:#222;
  --line:#5f5f5f;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;
  font-family:Arial,Helvetica,sans-serif;
  background:var(--cream);
  color:var(--ink);
}
.top{background:var(--red)}
.banner-wrap{
  width:100%;
  margin:0;
  padding:14px 24px 12px;
}
.banner-wrap img{
  width:100%;
  display:block;
  max-height:190px;
  object-fit:contain;
  object-position:center;
}
nav{
  background:var(--charcoal);
  min-height:38px;
  display:flex;
  align-items:center;
  justify-content:flex-start;
  gap:54px;
  padding:0 max(24px,calc((100vw - 1160px)/2));
}
nav a{
  color:#d6d2ca;
  text-decoration:none;
  font-size:14px;
  font-weight:700;
  letter-spacing:.02em;
}
.content{max-width:1160px;margin:0 auto}
.intro{
  max-width:1160px;
  margin:0 auto;
  padding:22px 24px 24px;
  display:grid;
  grid-template-columns: .9fr 1.15fr;
  gap:28px;
  align-items:start;
}
.intro-copy h1{
  margin:0;
  font-size:33px;
  line-height:1.05;
  letter-spacing:-.02em;
}
.rule{height:1px;background:#4d4b45;margin:12px 0 12px}
.intro-copy p{
  font-size:17px;
  line-height:1.45;
  margin:28px 0 0;
  max-width:500px;
}
.slideshow{
  position:relative;
  aspect-ratio:4/3;
  background:#111;
  overflow:hidden;
}
.slide{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  object-fit:cover;
  opacity:0;
  transition:opacity .4s ease;
}
.slide.active{opacity:1}
.dots{
  position:absolute;
  bottom:10px;
  left:14px;
  display:flex;
  gap:7px;
}
.dots button{
  width:8px;height:8px;border-radius:50%;
  border:1px solid #fff;
  padding:0;background:transparent;
}
.dots button.active{background:#fff}

.music{
  background:var(--charcoal);
  color:#fff;
  padding:36px 24px 36px;
}
.music h2,.services h2,.about h2,.development>.section-title{
  margin:0 0 24px;
  font-size:31px;
}
.album-grid{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:18px;
}
.album-grid img{
  width:100%;
  aspect-ratio:1;
  object-fit:cover;
  display:block;
}

.development{
  max-width:1160px;
  margin:0 auto;
  padding:36px 24px 38px;
}
.development>.section-title{
  text-transform:uppercase;
}
.dev-inner{
  display:grid;
  grid-template-columns: .65fr 1.6fr;
  gap:55px;
  align-items:center;
}
.cow-wrap{text-align:center}
.cow-wrap img{max-width:280px;width:100%}
.dev-copy h2{
  margin:0 0 18px;
  font-size:44px;
  letter-spacing:-.025em;
}
.dev-copy p{
  font-size:18px;
  line-height:1.5;
  max-width:690px;
  margin:0;
}
.how{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:32px;
  margin-top:34px;
  padding-top:34px;
  border-top:1px solid #aaa18e;
  width:92%;
  margin-left:auto;
  margin-right:auto;
}
.step h3{
  margin:0 0 10px;
  font-size:22px;
}
.step p{
  margin:0;
  font-size:16px;
  line-height:1.48;
}
.dev-copy .goal{
  margin:22px 0 0;
  padding:0;
  border:0;
  font-size:18px;
  line-height:1.5;
  font-weight:700;
}
.services{
  background:var(--red);
  color:#f7edda;
  padding:36px 24px 40px;
}
.services-grid{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:0 52px;
}
details{
  border-bottom:1px solid rgba(255,255,255,.28);
}
summary{
  list-style:none;
  cursor:pointer;
  padding:15px 2px;
  font-weight:700;
  font-size:22px;
  display:flex;
  justify-content:space-between;
  align-items:center;
}
summary::-webkit-details-marker{display:none}
summary::after{content:"+";font-size:22px;font-weight:400}
details[open] summary::after{content:"–"}
details p{
  margin:0;
  padding:0 24px 16px 2px;
  font-size:16px;
  line-height:1.48;
}

.about{
  padding:32px 24px 36px;
}
.about-row{
  display:grid;
  grid-template-columns: .55fr 1.6fr;
  gap:58px;
  align-items:start;
  padding-bottom:45px;
}
.about h3{
  margin:0 0 18px;
  font-size:27px;
}
.about p{
  font-size:16px;
  line-height:1.5;
  margin:0 0 17px;
}
.portrait-placeholder{
  min-height:260px;
  display:flex;
  justify-content:center;
  align-items:center;
}
.studio-title{
  margin-top:32px !important;
  padding-top:32px;
  border-top:1px solid #aaa18e;
  text-transform:uppercase;
}
.studio-row{
  display:grid;
  grid-template-columns:.75fr 1.25fr;
  gap:42px;
  align-items:center;
  padding:0;
}
.studio-row img{
  width:100%;
  display:block;
  aspect-ratio:16/10;
  object-fit:cover;
}
footer{
  background:var(--charcoal);
  color:#b8b2a7;
  text-align:center;
  padding:24px 20px 30px;
}
footer img{height:72px;display:block;margin:0 auto 8px}
footer div{font-size:14px;letter-spacing:.08em;margin-bottom:34px}
footer small{font-size:10px}

.talk-btn{
  position:fixed;
  right:20px;
  bottom:20px;
  z-index:20;
  border:0;
  background:var(--cream);
  color:var(--ink);
  border:1px solid var(--ink);
  font-weight:800;
  font-size:12px;
  letter-spacing:.08em;
  padding:14px 18px;
  box-shadow:0 3px 10px rgba(0,0,0,.25);
  cursor:pointer;
}
.talk-modal{
  position:fixed;
  right:20px;
  bottom:20px;
  z-index:30;
  width:380px;
  max-width:calc(100vw - 40px);
  background:var(--cream);
  border:1px solid #222;
  box-shadow:0 10px 32px rgba(0,0,0,.28);
  padding:24px;
}
.talk-modal[hidden]{display:none}
.talk-modal h3{margin:0 30px 12px 0;font-size:18px}
.talk-modal p{margin:0 0 20px;line-height:1.5;font-size:16px}
.close{
  position:absolute;top:8px;right:10px;
  border:0;background:none;font-size:27px;cursor:pointer;
}
.talk-actions{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:12px;
}
.talk-actions a{
  border:2px solid #222;
  background:#222;
  text-decoration:none;
  color:var(--cream);
  display:flex;
  gap:10px;
  align-items:center;
  justify-content:center;
  padding:14px 12px;
  font-weight:700;
  font-size:22px;
}
.talk-actions a:hover{background:var(--cream);color:#222}
.icon{width:22px;height:22px;display:inline-flex;align-items:center;justify-content:center}
.icon svg{width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linejoin:round;stroke-linecap:round}


@media(max-width:850px){
  nav{gap:24px;overflow-x:auto}
  .intro{grid-template-columns:1fr}
  .dev-inner{grid-template-columns:1fr}
  .cow-wrap img{max-width:220px}
  .how{grid-template-columns:1fr}
  .services-grid{grid-template-columns:1fr}
  .about-row,.studio-row{grid-template-columns:1fr}
}
@media(max-width:650px){
  .album-grid{grid-template-columns:repeat(2,1fr)}
  .intro-copy h1{font-size:28px}
}

.music h2{color:var(--cream);}
.development>.section-title{color:var(--red);}

.how .step{min-width:0;}

.talk-actions a:nth-child(2) .icon,
.talk-actions a:nth-child(2) .icon svg{width:24px;height:24px;}

.rob-portrait{
  width:100%;
  max-width:210px;
  height:auto;
  display:block;
}

.studio-row p,.rob-row p{font-size:16px;line-height:1.5;}

.music h2,.services h2,.about h2,.development>.section-title{margin-bottom:20px;}
.about-row{padding-bottom:34px;}
.studio-title{margin-top:24px !important;padding-top:24px;}
.dev-copy p{margin-bottom:0;}

.development>.section-title{
  text-align:center;
}

.intro-copy h1{
  text-align:center;
}
.intro-copy p + p{
  margin-top:16px;
}

.how{
  width:94%;
  margin-left:auto;
  margin-right:auto;
}

.services summary{
  font-size:18px;
}

.rob-row{
  padding-bottom:24px;
}
.studio-row{
  align-items:start;
}
.studio-row>div{
  padding-top:0;
}
.studio-row p:first-child{
  margin-top:0;
}

nav .nav-contact{
  appearance:none;
  border:0;
  background:none;
  color:#d6d2ca;
  font-family:Arial,Helvetica,sans-serif;
  font-size:14px;
  font-weight:700;
  letter-spacing:.02em;
  padding:0;
  cursor:pointer;
}

.talk-actions a{
  padding:10px 12px;
  font-size:17px;
}
.talk-actions .icon,
.talk-actions .icon svg{
  width:22px;
  height:22px;
}
.talk-actions a:nth-child(2) .icon,
.talk-actions a:nth-child(2) .icon svg{
  width:24px;
  height:24px;
}

.intro-copy{
  align-self:center;
}

.development>.section-title{
  text-align:left;
}

.how{
  width:100%;
  margin-left:0;
  margin-right:0;
  position:relative;
  border-top:0;
}
.how::before{
  content:"";
  position:absolute;
  top:0;
  left:3%;
  right:3%;
  border-top:1px solid #aaa18e;
}

nav a,
nav .nav-contact{
  font-size:16px;
}

.studio-row{
  align-items:start;
  padding-top:24px;
  border-top:1px solid #aaa18e;
}
.studio-row .studio-title{
  margin:0 0 24px !important;
  padding:0;
  border:0;
}
.studio-row img{
  margin-top:0;
  align-self:start;
}

.intro-copy{
  align-self:stretch;
  display:flex;
  flex-direction:column;
  justify-content:flex-start;
  padding-top:28px;
  padding-bottom:56px;
}
.intro-copy h1{
  flex:0 0 auto;
}
.intro-copy p:first-of-type{
  margin-top:auto;
}
.intro-copy p + p{
  margin-top:18px;
}

.studio-row>div{
  display:flex;
  flex-direction:column;
  align-self:stretch;
}
.studio-row .studio-title{
  flex:0 0 auto;
}
.studio-row>div>p:first-of-type{
  margin-top:10px;
}

.intro-copy p:first-of-type{
  margin-top:58px;
}

.intro-copy p{
  font-size:18px;
  line-height:1.5;
}

.intro{
  padding-bottom:22px;
}
.intro-copy{
  padding-bottom:28px;
}


/* v16 authoritative layout and brand overrides */
:root{
  --cream:#F5ECCF;
  --charcoal:#221F20;
  --red:#973301;
  --ink:#221F20;
}
body{background:var(--cream);color:var(--ink)}
.top{background:var(--red)}
nav{background:var(--charcoal)}
nav a,nav .nav-contact{color:var(--cream)}

.intro{
  max-width:1160px;
  margin:0 auto;
  padding:24px;
  display:grid;
  grid-template-columns:45% 55%;
  gap:0;
  align-items:stretch;
}
.intro-copy{
  padding:0 26px 0 0;
  display:flex;
  flex-direction:column;
  align-self:stretch;
}
.intro-copy h1{
  margin:0;
  font-size:36px;
  line-height:1.05;
  letter-spacing:-.02em;
  white-space:nowrap;
}
.intro-copy .rule{
  height:2px;
  background:var(--ink);
  margin:22px 0 0;
}
.intro-body{
  flex:1;
  display:flex;
  flex-direction:column;
  justify-content:center;
  padding-top:6px;
}
.intro-copy p,
.intro-copy p:first-of-type,
.intro-copy p + p{
  margin:0;
  max-width:none;
  text-align:center;
  font-size:20px;
  line-height:1.22;
}
.intro-copy p + p{margin-top:34px}
.main-slideshow-link{
  display:block;
  width:100%;
  aspect-ratio:16/9;
  background:#000;
  overflow:hidden;
  cursor:pointer;
}
.main-slideshow-video{
  display:block;
  width:100%;
  height:100%;
  object-fit:cover;
}

.studio-row .studio-slideshow-video{
  width:100%;
  display:block;
  aspect-ratio:8/5;
  object-fit:cover;
  margin-top:0;
  align-self:start;
  background:#000;
}

@media(max-width:850px){
  .intro{grid-template-columns:1fr;gap:22px}
  .intro-copy{padding-right:0}
  .intro-body{padding:30px 0}
  .intro-copy h1{white-space:normal}
}
@media(max-width:650px){
  .intro-copy h1{font-size:28px}
  .intro-copy p,.intro-copy p:first-of-type,.intro-copy p + p{font-size:17px}
}


/* v19 spacing + portrait refinements */
.music,
.services {
  padding-top:24px;
  padding-bottom:24px;
}
.development {
  padding-top:24px;
  padding-bottom:24px;
}
.about {
  padding-top:24px;
  padding-bottom:24px;
}
.music h2,
.services h2,
.about h2,
.development>.section-title {
  margin-bottom:24px;
}
.development>.section-title {
  font-size:32px;
}
.how {
  margin-top:24px;
  padding-top:24px;
}
.about-row,
.rob-row {
  padding-bottom:24px;
}
.studio-row {
  padding-top:24px;
}


/* v20 spacing refinements — preserve v19 layout/behavior otherwise */

/* SERVICES: compensate for the summary row's built-in top padding so the
   visible heading-to-first-row spacing matches the 24px section rhythm. */
.services h2{
  margin-bottom:9px;
}

/* The final bio paragraph should not add its own margin on top of the
   standardized 24px row spacing before the Studio divider. */
.rob-row p:last-child{
  margin-bottom:0;
}

/* Footer uses the same 24px vertical rhythm, with copyright as the last item. */
footer{
  padding-top:24px;
  padding-bottom:24px;
}
footer div{
  margin-bottom:24px;
}
footer small{
  display:block;
  margin:0;
}

/* v24 persistent music player */
body{padding-bottom:76px}.bp-player{position:fixed;left:0;right:0;bottom:0;z-index:1000;background:#221F20;color:#F5ECCF;border-top:2px solid #973301;font-family:inherit}.bp-player-main{min-height:74px;display:grid;grid-template-columns:minmax(220px,1.25fr) auto minmax(260px,1.5fr) minmax(120px,.55fr);align-items:center;gap:20px;padding:9px 24px}.bp-player button{font:inherit}.bp-player-expand{display:flex;align-items:center;gap:12px;min-width:0;border:0;background:transparent;color:#F5ECCF;text-align:left;cursor:pointer;padding:0}.bp-player-expand img{width:54px;height:54px;object-fit:cover;flex:0 0 auto}.bp-player-meta{display:flex;flex-direction:column;min-width:0}.bp-player-meta strong,.bp-player-meta span{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.bp-player-meta strong{font-size:15px}.bp-player-meta span{font-size:13px;opacity:.78;margin-top:3px}.bp-player-controls{display:flex;align-items:center;gap:5px}.bp-player-controls button{width:38px;height:38px;display:grid;place-items:center;border:0;border-radius:50%;background:transparent;color:#F5ECCF;cursor:pointer;font-size:32px}.bp-player-controls #bpPlay{width:44px;height:44px;background:#F5ECCF;color:#221F20}.bp-player-controls svg{width:22px;height:22px;fill:currentColor}.bp-player-progress,.bp-player-volume{display:flex;align-items:center;gap:9px;font-size:11px}.bp-player input[type=range]{width:100%;accent-color:#973301;cursor:pointer}.bp-player-volume span{font-size:10px;letter-spacing:.08em}.bp-player-queue{position:absolute;left:0;right:0;bottom:100%;background:#221F20;border-top:2px solid #973301;max-height:65vh;overflow:auto}.bp-player-queue-inner{max-width:1180px;margin:0 auto;padding:22px 24px 18px}.bp-player-queue-heading{font-weight:700;font-size:17px;letter-spacing:.08em;margin-bottom:12px}.bp-track{width:100%;display:grid;grid-template-columns:46px minmax(0,1fr) auto;align-items:center;gap:12px;border:0;border-top:1px solid rgba(245,236,207,.22);background:transparent;color:#F5ECCF;padding:9px 4px;text-align:left;cursor:pointer}.bp-track:last-child{border-bottom:1px solid rgba(245,236,207,.22)}.bp-track img{width:46px;height:46px;object-fit:cover}.bp-track-text{display:flex;flex-direction:column;min-width:0}.bp-track-text strong,.bp-track-text span{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.bp-track-text strong{font-size:14px}.bp-track-text span{font-size:12px;opacity:.72;margin-top:2px}.bp-track-time{font-size:12px;opacity:.72}.bp-track.active{background:rgba(245,236,207,.08)}
@media(max-width:800px){body{padding-bottom:132px}.bp-player-main{grid-template-columns:minmax(0,1fr) auto;gap:8px 12px;padding:9px 14px}.bp-player-progress{grid-column:1/-1}.bp-player-volume{display:none}}

/* v25: keep contact controls above the persistent player */
.floating-contact,.contact-float,.lets-talk,#letsTalk,#contactFloat,#contactPopover,.contact-popover{
  z-index:1200;
}
/* Slight translucency for player and expanded queue. */
.bp-player{ background:rgba(34,31,32,.94); }
.bp-player-queue{ background:rgba(34,31,32,.96); }

/* Album covers are now direct play controls. */
.music-grid img,.album-grid img,.albums img{ cursor:pointer; }

/* v26: player occupies the bottom edge, so lift the original v23 contact UI above it. */
.talk-btn{ bottom:96px !important; z-index:1300 !important; }
.talk-modal{ bottom:96px !important; z-index:1301 !important; }

/* Keep the requested slight transparency. */
.bp-player{ background:rgba(34,31,32,.92) !important; }
.bp-player-queue{ background:rgba(34,31,32,.95) !important; }

/* v27 album-art playback controllers */
.album-controller{
  position:relative;
  display:block;
  overflow:hidden;
  cursor:pointer;
  outline:none;
}
.album-controller > img{
  display:block;
  width:100%;
  height:100%;
}
.album-overlay{
  position:absolute;
  inset:0;
  pointer-events:none;
  opacity:0;
  transition:opacity .16s ease;
  /* BP Black is opaque at bottom and fades to transparent by ~25% of cover height. */
  background:linear-gradient(to top,
    rgba(34,31,32,1) 0%,
    rgba(34,31,32,1) 7%,
    rgba(34,31,32,0) 25%);
}
.album-controller:hover .album-overlay,
.album-controller:focus-visible .album-overlay,
.album-controller.is-playing .album-overlay,
.album-controller.is-paused .album-overlay{
  opacity:1;
}
.album-control{
  position:absolute;
  left:50%;
  top:50%;
  width:43%;
  aspect-ratio:1;
  transform:translate(-50%,-50%);
  color:rgba(245,236,207,.66);
}
.album-control svg{width:100%;height:100%;display:block}
.album-control circle{
  fill:none;
  stroke:currentColor;
  stroke-width:2;
}
.album-control path,.album-control rect{fill:currentColor}
.album-icon-pause{display:none}
.album-controller.is-playing .album-icon-play{display:none}
.album-controller.is-playing .album-icon-pause{display:block}
.album-artist{
  position:absolute;
  left:0;right:0;bottom:4%;
  text-align:center;
  color:#F5ECCF;
  font-size:clamp(16px,1.8vw,28px);
  line-height:1;
  letter-spacing:.04em;
  text-transform:uppercase;
}

/* v28 album-controller refinements */
.album-overlay{
  /* 100% BP Black only at the bottom edge, continuously fading to transparent by 25%. */
  background:linear-gradient(to top,
    rgba(34,31,32,1) 0%,
    rgba(34,31,32,0) 25%);
}
.album-control{
  /* Established BP shadow treatment: black, 25%, 2pt downward offset, ~11pt blur. */
  filter:drop-shadow(0 2px 11px rgba(34,31,32,.25));
}

/* v29 Keynote-matched album controller */
.album-controller{line-height:0;}
.album-controller>img{display:block;vertical-align:top;}
.album-overlay{inset:0;background:linear-gradient(to top,rgba(34,31,32,1) 0%,rgba(34,31,32,.5) 50%,rgba(34,31,32,0) 100%);}
.album-control{width:45.2128%;aspect-ratio:1;color:rgba(245,236,207,.66);filter:drop-shadow(0 2px 11px rgba(34,31,32,.25));}
.album-control circle{fill:none;stroke:currentColor;stroke-width:2;}
.album-artist{line-height:1;}

/* v30 — play control geometry corrected from Keynote measurements */
.album-control{
  width:45.2128%;
  left:48.1383%;
  top:44.4149%;
  transform:translate(-50%,-50%);
}
.album-control circle{stroke-width:3.5;}

/* v31 — circle correction from overlay comparison */
.album-control{
  /* Circle is mathematically centered on the square cover. */
  left:50%;
  /* Vertically center the triangle mathematically in the circle while preserving its v30 visual position. */
  top:44.84%;
  width:45.2128%;
}
.album-control circle{
  /* Fill the 45.2128% control box; v30's r=43 made the visible ring only ~38.9% of the cover. */
  r:48;
  stroke-width:3.5;
}
/* Corina Seas (track 2) and Cooling Time (track 7): icons only at 80%; ring remains 66%. */
.album-controller[data-play-track="2"] .album-icon-play,
.album-controller[data-play-track="2"] .album-icon-pause,
.album-controller[data-play-track="7"] .album-icon-play,
.album-controller[data-play-track="7"] .album-icon-pause{
  opacity:.80;
}


/* v32 — icon opacity correction + RubySue two-line treatment */
.album-control{
  /* Keep opacity independent so the ring can stay at 66% while selected icons reach a true 80%. */
  color:#F5ECCF;
}
.album-control circle{opacity:.66;}
.album-control .album-icon-play,
.album-control .album-icon-pause{opacity:.66;}
.album-controller[data-play-track="2"] .album-icon-play,
.album-controller[data-play-track="2"] .album-icon-pause,
.album-controller[data-play-track="7"] .album-icon-play,
.album-controller[data-play-track="7"] .album-icon-pause{opacity:.80;}
.album-artist-rubysue{line-height:1.14;}

/* v33 — final desktop About spacing refinement
   Tighten only the gap between ABOUT and the portrait/bio row. */
.about h2{
  margin-bottom:8px;
}

/* v35 — About spacing matched to supplied 02 New About Spacing reference */
.about-row{
  transform:translateY(-12px);
  margin-bottom:-12px;
}


/* v36 — iPhone/mobile refinement based on supplied mobile mockups.
   Desktop v35 remains authoritative and unchanged above 650px. */
@media (max-width:650px){

  /* HERO — same content/layout, tighter vertical rhythm */
  .intro{
    padding:12px 24px 18px;
    gap:14px;
  }
  .intro-copy{
    padding:0;
  }
  .intro-copy h1{
    font-size:28px;
  }
  .rule{
    margin:10px 0;
  }
  .intro-copy p,
  .intro-copy p:first-of-type,
  .intro-copy p + p{
    font-size:17px;
    line-height:1.35;
  }
  .intro-copy p:first-of-type{
    margin-top:16px;
  }
  .intro-copy p + p{
    margin-top:14px;
  }

  /* MUSIC — one horizontal row, with the next cover deliberately peeking in */
  .music{
    padding:24px 0;
    overflow:hidden;
  }
  .music h2{
    margin-left:24px;
    margin-right:24px;
  }
  .album-grid{
    display:flex;
    grid-template-columns:none;
    gap:16px;
    overflow-x:auto;
    overflow-y:hidden;
    padding:0 24px 4px;
    scroll-snap-type:x proximity;
    -webkit-overflow-scrolling:touch;
    scrollbar-width:none;
  }
  .album-grid::-webkit-scrollbar{
    display:none;
  }
  .album-controller{
    flex:0 0 74%;
    scroll-snap-align:start;
  }

  /* ARTIST DEVELOPMENT — proportions/spacing from the proposed right column */
  .development{
    padding:20px 24px 22px;
  }
  .development>.section-title{
    font-size:26px;
    line-height:1.05;
    text-align:left;
    white-space:nowrap;
    margin-bottom:12px;
  }
  .dev-inner{
    gap:8px;
  }
  .cow-wrap img{
    max-width:160px;
  }
  .dev-copy{
    text-align:center;
  }
  .dev-copy h2{
    font-size:36px;
    margin:4px 0 14px;
  }
  .dev-copy p{
    font-size:16px;
    line-height:1.45;
  }
  .dev-copy .goal{
    font-size:16px;
    line-height:1.4;
    margin-top:18px;
    text-align:left;
  }
  .how{
    width:94%;
    margin-top:18px;
    padding-top:18px;
    gap:18px;
  }
  .step h3{
    margin-bottom:7px;
    font-size:20px;
  }
  .step p{
    font-size:15px;
    line-height:1.42;
  }

  /* ABOUT — remove desktop transform and compact portrait/text relationship */
  .about{
    padding:20px 24px 22px;
  }
  .about h2{
    margin-bottom:8px;
  }
  .about-row{
    transform:none;
    margin-bottom:0;
    gap:10px;
    padding-bottom:18px;
  }
  .portrait-placeholder{
    min-height:0;
  }
  .rob-portrait{
    max-width:175px;
    margin:0 auto;
  }
  .about h3{
    font-size:24px;
    margin:0 0 14px;
  }
  .about p,
  .rob-row p{
    font-size:15px;
    line-height:1.43;
    margin-bottom:16px;
  }

  /* STUDIO — same structure, less empty vertical space */
  .studio-row{
    gap:16px;
    padding-top:18px;
  }
  .studio-row .studio-title{
    margin:0 0 18px !important;
  }
  .studio-row>div>p:first-of-type{
    margin-top:0;
  }
  .studio-row p{
    font-size:15px;
    line-height:1.43;
    margin-top:0;
    margin-bottom:16px;
  }
  .studio-slideshow-video{
    margin-top:2px;
  }

  /* FOOTER — compact as in proposed mobile layout */
  footer{
    padding-top:18px;
    padding-bottom:18px;
  }
  footer img{
    height:58px;
  }
  footer div{
    margin-bottom:12px;
  }
}


/* v37 — mobile corrections from review */
@media (max-width:650px){

  /* Hero: match supplied mockup more closely — narrower text measure and much tighter vertical spacing. */
  .intro{
    padding:10px 20px 14px;
    gap:10px;
  }
  .intro-copy{
    padding:0;
  }
  .intro-copy h1{
    margin:0;
  }
  .rule{
    margin:8px 0 12px;
  }
  .intro-body{
    width:94%;
    margin:0 auto;
  }
  .intro-body br{
    display:none;
  }
  .intro-copy p,
  .intro-copy p:first-of-type,
  .intro-copy p + p{
    margin-left:auto;
    margin-right:auto;
    font-size:16px;
    line-height:1.32;
    max-width:330px;
  }
  .intro-copy p:first-of-type{
    margin-top:0;
  }
  .intro-copy p + p{
    margin-top:12px;
  }
  .main-slideshow-link{
    margin-top:0;
  }

  /* Artist Development: keep v36 condensed rhythm, restore v35 left alignment. */
  .dev-copy{
    text-align:left;
  }
  .dev-copy h2{
    text-align:left;
  }

  /* Touch album behavior: overlay is revealed only after first tap. */
  .album-controller.touch-active .album-overlay{
    opacity:1;
  }

  /* Fixed player may overlay the footer; don't reserve a beige strip beneath the site. */
  body{
    padding-bottom:0 !important;
  }
}


/* v38 — final mobile positioning/order refinements */
@media (max-width:650px){

  /* Hero: equalize the three vertical gaps marked in the supplied mockup. */
  .intro{
    gap:0;
    padding-bottom:12px;
  }
  .intro-copy p + p{
    margin-top:10px;
  }
  .main-slideshow-link{
    margin-top:10px;
  }

  /* Preserve vertical positions; shift only the artwork itself left. */
  .cow-wrap img{
    position:relative;
    left:-22px;
  }
  .rob-portrait{
    position:relative;
    left:-22px;
  }

  /* Mobile-only carousel order: desktop positions 1,5,2,6,3,7,4,8. */
  .album-controller:nth-child(1){order:1;}
  .album-controller:nth-child(5){order:2;}
  .album-controller:nth-child(2){order:3;}
  .album-controller:nth-child(6){order:4;}
  .album-controller:nth-child(3){order:5;}
  .album-controller:nth-child(7){order:6;}
  .album-controller:nth-child(4){order:7;}
  .album-controller:nth-child(8){order:8;}
}


/* v40 — mobile spacing/position/footer corrections */
@media (max-width:650px){

  /* Hero: remove desktop flex distribution on mobile.
     Use explicit, compact spacing between heading, rule, copy and slideshow. */
  .intro{
    padding:10px 20px 12px;
    gap:0;
  }
  .intro-copy{
    display:block;
  }
  .intro-copy .rule,
  .rule{
    margin:14px 0;
  }
  .intro-body{
    display:block;
    width:94%;
    margin:0 auto;
    padding:0;
  }
  .intro-copy p,
  .intro-copy p:first-of-type,
  .intro-copy p + p{
    margin-left:auto;
    margin-right:auto;
  }
  .intro-copy p:first-of-type{
    margin-top:0;
  }
  .intro-copy p + p{
    margin-top:12px;
  }
  .main-slideshow-link{
    margin-top:14px;
  }

  /* Cow: horizontal correction only; vertical placement remains unchanged. */
  .cow-wrap img{
    left:-48px;
  }

  /* Keep the page scrollable above the fixed player without restoring
     the old beige body strip: reserve the space inside the dark footer. */
  body{
    padding-bottom:0 !important;
  }
  footer{
    padding-bottom:150px;
  }
}

/* v41 — navbar typography/dividers + mobile hero spacing */

/* Navbar: preserve existing type size/tracking/alignment and change weight only. */
nav a,
nav .nav-contact{
  font-weight:400;
  position:relative;
  flex:0 0 auto;
}

/* Partial-height separators centered in the existing desktop gaps. */
nav a:not(:last-of-type)::after{
  content:"";
  position:absolute;
  top:50%;
  right:-27px;
  width:1px;
  height:24px;
  background:rgba(245,236,207,.62);
  transform:translateY(-50%);
  pointer-events:none;
}

@media (max-width:850px){
  /* Mobile/tablet navbar: retain horizontal scrolling, tighten item spacing to
     the supplied mockup, and keep equal outer space at both scroll ends. */
  nav{
    gap:18px;
    padding-left:24px;
    padding-right:24px;
    overflow-x:auto;
    overflow-y:hidden;
    justify-content:flex-start;
    -webkit-overflow-scrolling:touch;
    scrollbar-width:none;
  }
  nav::-webkit-scrollbar{display:none;}
  nav a:not(:last-of-type)::after{
    right:-9px;
    height:24px;
  }
}

@media (max-width:650px){
  /* Mobile hero only: preserve all sizing/layout and open the vertical rhythm
     to match the supplied v40-to-target comparison. */
  .intro-copy .rule,
  .rule{
    margin:18px 0;
  }
  .intro-copy p + p{
    margin-top:16px;
  }
  .main-slideshow-link{
    margin-top:18px;
  }
}

/* v41.1 — review corrections: complete divider sequence + mobile nav/hero match */

/* ABOUT is the final anchor but is followed by the CONTACT button, so every
   navbar anchor receives a separator. CONTACT itself receives none. */
nav a::after{
  content:"";
  position:absolute;
  top:50%;
  right:-27px;
  width:1px;
  height:24px;
  background:rgba(245,236,207,.62);
  transform:translateY(-50%);
  pointer-events:none;
}

@media (max-width:850px){
  nav a::after{
    right:-9px;
    height:24px;
  }
}

@media (max-width:650px){
  /* Match the reference mobile navbar: Artist Development occupies two lines
     without changing type size, tracking, navbar height, or scroll behavior. */
  nav a[href="#artist-development"]{
    width:132px;
    white-space:normal;
    line-height:1.05;
    text-align:center;
  }

  /* Mobile hero vertical rhythm matched to the supplied target. */
  .intro{
    padding-top:26px;
  }
  .intro-copy .rule,
  .rule{
    margin:22px 0;
  }
  .intro-copy p + p{
    margin-top:14px;
  }
  .main-slideshow-link{
    margin-top:21px;
  }
}

/* v42 — final navbar end-divider + mobile hero bottom-spacing refinement */

/* Desktop: include the terminal divider after CONTACT, matching the desktop reference. */
nav .nav-contact::after{
  content:"";
  position:absolute;
  top:50%;
  right:-27px;
  width:1px;
  height:24px;
  background:rgba(245,236,207,.62);
  transform:translateY(-50%);
  pointer-events:none;
}

@media (max-width:850px){
  /* Mobile/tablet: CONTACT is the final item — no terminal divider. */
  nav .nav-contact::after{
    content:none;
  }
}

@media (max-width:650px){
  /* v44 — mobile hero bottom spacing only. */
  .intro{
    padding-bottom:25px;
  }
}

/* v46 — optional mobile dark mode; v44 light mode remains the default. */
@media (max-width:650px){
  /* ARTIST DEVELOPMENT remains two lines, but aligns with the left edge of its item. */
  nav a[href="#artist-development"]{
    text-align:left;
  }
}

@media (max-width:650px) and (prefers-color-scheme:dark){
  body{
    background:var(--charcoal);
    color:var(--cream);
  }

  /* Inverted mobile navbar. Preserve v44 dimensions, scrolling and separators. */
  nav{
    background:var(--cream);
  }
  nav a,
  nav .nav-contact{
    color:var(--charcoal);
  }
  nav a::after{
    background:rgba(34,31,32,.62);
  }

  /* Hero */
  .intro{
    background:var(--charcoal);
    color:var(--cream);
  }
  .intro-copy h1,
  .intro-copy p{
    color:var(--cream);
  }
  .intro-copy .rule,
  .rule{
    background:var(--cream);
  }

  /* Music */
  .music{
    background:var(--red);
    color:var(--cream);
  }
  .music h2{
    color:var(--cream);
  }

  /* Artist Development */
  .development{
    background:var(--charcoal);
    color:var(--cream);
  }
  .development>.section-title,
  .dev-copy h2,
  .dev-copy p,
  .dev-copy .goal,
  .step h3,
  .step p{
    color:var(--cream);
  }
  .how::before{
    border-top-color:rgba(245,236,207,.55);
  }

  /* Services */
  .services{
    background:var(--red);
    color:var(--cream);
  }
  .services h2,
  .services summary,
  .services details p{
    color:var(--cream);
  }
  .services details{
    border-bottom-color:rgba(245,236,207,.32);
  }

  /* About + Studio */
  .about{
    background:var(--charcoal);
    color:var(--cream);
  }
  .about h2,
  .about h3,
  .about p,
  .studio-row .studio-title,
  .studio-row p{
    color:var(--cream);
  }
  .studio-row{
    border-top-color:rgba(245,236,207,.55);
  }

  /* Existing portrait asset on the requested BP Beige square. */
  .portrait-placeholder{
    width:175px;
    height:175px;
    margin-left:auto;
    margin-right:auto;
    background:var(--cream);
    overflow:hidden;
  }
  .rob-portrait{
    width:100%;
    height:100%;
    max-width:none;
    object-fit:contain;
  }

  /* Footer */
  footer{
    background:var(--red);
    color:var(--cream);
  }
}

/* v49 — mobile dark-mode divider reliability + portrait background alignment */
@media (max-width:650px){
  /* On mobile, build separators from the leading edge of every item after MUSIC.
     This is independent of the desktop trailing-divider treatment. */
  nav a::after,
  nav .nav-contact::after{
    content:none;
  }
  nav > a:not(:first-child)::before,
  nav > .nav-contact::before{
    content:"";
    position:absolute;
    top:50%;
    left:-9px;
    width:1px;
    height:24px;
    background:rgba(245,236,207,.62);
    transform:translateY(-50%);
    pointer-events:none;
  }
}

@media (max-width:650px) and (prefers-color-scheme:dark){
  /* Dark mobile navbar separators match the BP Black navbar text. */
  nav > a:not(:first-child)::before,
  nav > .nav-contact::before{
    background:#221F20;
  }

  /* Put the beige square on the portrait element itself so the square and
     portrait share the exact same box, while preserving v44's visual position. */
  .portrait-placeholder{
    background:transparent;
    width:auto;
    height:auto;
    overflow:visible;
  }
  .rob-portrait{
    left:-22px;
    width:175px;
    height:175px;
    max-width:175px;
    object-fit:contain;
    background:#F5ECCF;
  }
}