
.portfolio-carousel{display:flex;align-items:center;gap:12px;max-width:1400px;margin:25px auto 0}
.carousel-window{overflow:hidden;flex:1;min-width:0}
.carousel-track{display:flex;gap:18px;transition:transform .42s cubic-bezier(.2,.7,.2,1);will-change:transform}
.portfolio-slide{flex:0 0 calc((100% - (var(--visible,3) - 1)*18px)/var(--visible,3));min-width:0;display:block;position:relative;text-decoration:none;color:white;background:#242424;overflow:hidden}
.portfolio-slide img{display:block;width:100%;height:440px;object-fit:contain;background:#282827}
.slide-caption{position:absolute;bottom:0;left:0;right:0;padding:28px 32px 20px;background:linear-gradient(transparent,rgba(0,0,0,.84));text-transform:uppercase;letter-spacing:.14em}
.slide-caption h3{font-family:Georgia,serif;font-size:21px;letter-spacing:.18em;font-weight:400;margin:0 0 8px}
.slide-caption p{font-size:12px;margin:0}
.carousel-arrow{border:1px solid #777;background:transparent;color:inherit;font-size:38px;width:48px;height:60px;cursor:pointer;flex-shrink:0}
.carousel-arrow:disabled{opacity:.25;cursor:default}
.carousel-arrow:hover{background:#333;color:white}
.carousel-footer{display:flex;justify-content:space-between;max-width:750px;margin:12px auto;font-size:12px;letter-spacing:.18em}
.detail-body{background:#eae8e3;color:#222}
.detail-header{padding:24px 5vw;display:flex;justify-content:space-between;border-bottom:1px solid #aaa;font-size:13px;letter-spacing:.12em}
.detail-header a{color:inherit;text-decoration:none}
.detail-main{display:grid;grid-template-columns:minmax(0,1fr) minmax(280px,.8fr);gap:7vw;align-items:center;max-width:1200px;margin:55px auto;padding:0 5vw}
.detail-photo{background:#292929;text-align:center}
.detail-photo img{display:block;max-width:100%;max-height:78vh;margin:auto}
.detail-info h1{font:normal clamp(40px,5vw,80px) Georgia,serif;margin:24px 0}
.detail-model{text-transform:uppercase;letter-spacing:.2em}
.detail-contact{display:inline-block;margin-top:35px;color:inherit;border-bottom:1px solid;padding-bottom:9px}
.detail-gallery{max-width:1100px;margin:60px auto;padding:0 5vw 70px}
.detail-gallery h2{font:normal 32px Georgia,serif}
.detail-gallery>div{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:20px}
.detail-gallery img{width:100%;max-height:500px;object-fit:contain;background:#292929}
@media(max-width:650px){.carousel-arrow{width:34px;height:48px;font-size:28px}.portfolio-carousel{gap:4px}.portfolio-slide img{height:56vh}.slide-caption{padding:22px}.slide-caption h3{font-size:20px}.detail-main{grid-template-columns:1fr;margin:30px auto}}

@media(min-width:651px) and (max-width:950px){.portfolio-slide img{height:390px}}
@media(max-width:650px){.carousel-track{gap:18px}.portfolio-slide img{height:56vh}}

/* Project detail enhancements */
.detail-brand{font-weight:700}.detail-info .eyebrow,.detail-section-top .eyebrow{font-size:11px;letter-spacing:.22em;color:#666}
.detail-info h1{line-height:1.06;overflow-wrap:anywhere}.detail-rule{height:1px;background:#bdbbb6;margin:28px 0}
.detail-description{line-height:1.85;white-space:pre-line;max-width:55ch;color:#4d4b47}
.detail-gallery{max-width:1250px}.detail-gallery h2{margin:12px 0 32px;font-size:clamp(30px,4vw,52px)}
.detail-gallery>div#detailGallery{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px}
.detail-gallery-item{border:0;padding:0;cursor:zoom-in;background:#282827;min-width:0;overflow:hidden}
.detail-gallery-item img{display:block;width:100%;height:360px;object-fit:contain;transition:transform .25s}
.detail-gallery-item:hover img{transform:scale(1.025)}
.detail-navigation{display:flex;align-items:center;justify-content:space-between;gap:15px;padding:35px 5vw 55px;border-top:1px solid #bdbbb6;font-size:11px;letter-spacing:.12em;text-transform:uppercase}
.detail-navigation a{color:inherit;text-decoration:none;max-width:34%}.detail-navigation a:hover{text-decoration:underline}
.lightbox[hidden]{display:none!important}.lightbox{position:fixed;inset:0;z-index:9999;background:rgba(10,10,10,.97);display:flex;align-items:center;justify-content:center;padding:45px 65px}
.lightbox img{max-width:100%;max-height:calc(100vh - 100px);object-fit:contain}
.lightbox button{position:absolute;color:#fff;background:transparent;border:0;cursor:pointer;font-size:48px;padding:10px}
.lightbox-close{top:10px;right:22px}.lightbox-prev{left:10px}.lightbox-next{right:10px}
#lightboxCount{position:absolute;bottom:14px;color:#fff;font-size:12px;letter-spacing:.2em}.lightbox-open{overflow:hidden}
@media(max-width:750px){.detail-gallery>div#detailGallery{grid-template-columns:repeat(2,minmax(0,1fr))}.detail-gallery-item img{height:260px}.detail-navigation{font-size:9px}.lightbox{padding:55px 40px}}
@media(max-width:480px){.detail-gallery>div#detailGallery{grid-template-columns:1fr}.detail-gallery-item img{height:380px}.detail-header{font-size:10px}.detail-main{gap:25px}.detail-navigation a{max-width:36%}}

/* Fishbone carousel: show the complete portrait photographs edge-to-edge. */
.portfolio-slide{background:transparent}
.portfolio-slide img{width:100%;height:auto;aspect-ratio:2 / 3;object-fit:fill;background:transparent}
@media(min-width:651px) and (max-width:950px){.portfolio-slide img{height:auto}}
@media(max-width:650px){.portfolio-slide img{height:auto}}

/* v2 — true portrait cards: no side bars, no distortion, no cropping */
.portfolio-carousel .portfolio-slide {
  aspect-ratio: 2 / 3 !important;
  height: auto !important;
  background: none !important;
  overflow: hidden;
}
.portfolio-carousel .portfolio-slide > img {
  display: block !important;
  width: 100% !important;
  height: 100% !important;
  aspect-ratio: auto !important;
  object-fit: cover !important;
  object-position: center center !important;
  background: none !important;
}
@media (max-width: 950px) {
  .portfolio-carousel .portfolio-slide > img { height: 100% !important; }
}

/* Project gallery: natural image ratios, no artificial dark frames */
.detail-gallery>div#detailGallery{align-items:start;gap:16px}
.detail-gallery-item{display:block;background:transparent!important;overflow:visible;height:auto;line-height:0}
.detail-gallery-item img{display:block;width:100%;height:auto!important;max-height:none!important;object-fit:contain;background:transparent!important;transition:none}
.detail-gallery-item:hover img{transform:none}
@media(max-width:750px){.detail-gallery>div#detailGallery{gap:12px}}

/* Project detail header: original Fishbone brand centered independently of back link */
.detail-header{position:relative;display:flex;align-items:center;justify-content:flex-start;min-height:110px;padding:12px 5vw}
.detail-header>a:first-child{position:relative;z-index:1}
.detail-header .detail-brand{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;text-decoration:none;color:inherit;white-space:nowrap;font-weight:400}
.detail-brand-mark{display:block;width:63px;height:36px;object-fit:contain}
.detail-brand-type{display:flex;flex-direction:column;align-items:center;gap:3px}
.detail-brand-type strong{font-family:Georgia,'Times New Roman',serif;font-size:19px;font-weight:400;letter-spacing:.12em;line-height:1}
.detail-brand-type small{font-family:Georgia,'Times New Roman',serif;font-size:9px;letter-spacing:.27em;line-height:1}
@media(max-width:600px){
.detail-header{min-height:91px;padding:10px 4vw}
.detail-header>a:first-child{max-width:34%;font-size:10px;line-height:1.45;letter-spacing:.055em}
.detail-brand-mark{width:46px;height:27px}
.detail-brand-type strong{font-size:14px}
.detail-brand-type small{font-size:7px}
}

/* Compact previous/next navigation near the top of each project */
.detail-quick-nav{display:flex;justify-content:space-between;align-items:center;gap:20px;padding:17px 5vw;border-bottom:1px solid rgba(25,25,25,.13)}
.detail-quick-nav a{font-size:11px;letter-spacing:.13em;text-transform:uppercase;color:inherit;text-decoration:none;transition:opacity .2s}
.detail-quick-nav a:hover{opacity:.55}
@media(max-width:600px){.detail-quick-nav{padding:13px 4vw}.detail-quick-nav a{font-size:10px;letter-spacing:.08em}}

/* Compact selected works without cropping or distorting guitar photos */
.portfolio-section{padding-top:clamp(38px,4vw,60px);padding-bottom:clamp(38px,4vw,60px);scroll-margin-top:95px}
.portfolio-section .section-heading{margin-bottom:14px}
.portfolio-section .section-heading h2{margin-top:7px}
.portfolio-section .portfolio-carousel{margin-top:14px}
.portfolio-section .portfolio-carousel .portfolio-slide{aspect-ratio:3 / 4 !important}
.portfolio-section .portfolio-carousel .portfolio-slide > img{object-fit:contain !important;background:#292827 !important}
.portfolio-section .slide-caption{padding:32px 18px 15px}
.portfolio-section .slide-caption h3{font-size:clamp(15px,1.5vw,20px)}
.portfolio-section .carousel-footer{margin:9px auto}
.portfolio-section .view-all-cta{margin-top:12px}
@media(max-width:650px){
 .portfolio-section{padding-top:38px;padding-bottom:40px}
 .portfolio-section .portfolio-carousel .portfolio-slide{aspect-ratio:2 / 3 !important}
 .portfolio-section .slide-caption{padding:26px 13px 12px}
}

/* Fix: fill carousel image frame, eliminating grey letterboxing. */
.portfolio-section .portfolio-carousel .portfolio-slide{aspect-ratio:3 / 4 !important}
.portfolio-section .portfolio-carousel .portfolio-slide > img{
  display:block;width:100%;height:100%;position:absolute;inset:0;
  object-fit:cover !important;object-position:center center;
  background:transparent !important;
}
@media(max-width:650px){
 .portfolio-section .portfolio-carousel .portfolio-slide{aspect-ratio:2 / 3 !important}
}


/* Fishbone project page refinement — 2026-10-27 */
.detail-quick-nav{padding:10px 4.5vw!important;min-height:58px}
.detail-main{max-width:1310px;gap:clamp(30px,5vw,78px);margin:clamp(24px,3vw,44px) auto clamp(34px,4vw,56px);padding:0 4.5vw;align-items:center}
.detail-photo{background:transparent}
.detail-photo img{max-height:min(72vh,690px);width:auto;max-width:100%;height:auto;object-fit:contain}
.detail-info h1{margin:16px 0;font-size:clamp(44px,5vw,76px)}
.detail-info .detail-rule{margin:18px 0}
.detail-info .detail-description{line-height:1.72}
.detail-info .detail-contact{margin-top:22px}
.detail-gallery{max-width:1310px;margin:0 auto;padding:clamp(26px,3vw,45px) 4.5vw clamp(32px,4vw,58px)}
.detail-gallery .detail-section-top{display:flex;align-items:baseline;justify-content:space-between;gap:18px;margin-bottom:24px}
.detail-gallery h2{margin:0;font-size:clamp(32px,3.3vw,48px)}
.detail-gallery>div#detailGallery{grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(12px,1.5vw,22px);align-items:start}
.detail-gallery-item{position:relative;cursor:zoom-in}
.detail-gallery-item img{width:100%;height:auto;max-height:unset;object-fit:contain}
.detail-gallery-item:focus-visible{outline:3px solid #171717;outline-offset:4px}
.detail-navigation{padding:20px 4.5vw 30px;gap:12px}
.detail-navigation a{display:flex;align-items:center;justify-content:center;min-height:43px;padding:12px 15px;background:#211f1d;color:#fff;text-align:center;text-decoration:none;flex:1;max-width:none;font-weight:700;line-height:1.4}
.detail-navigation a:hover{background:#4b4540;text-decoration:none}
.lightbox{z-index:10010}
.lightbox img{max-width:min(100%,1200px);max-height:calc(100dvh - 105px)}
.lightbox button:focus-visible{outline:2px solid white;outline-offset:2px}
@media(max-width:760px){
 .detail-main{grid-template-columns:1fr;gap:24px;margin:22px auto 30px}
 .detail-photo img{max-height:66vh}
 .detail-gallery .detail-section-top{display:block;margin-bottom:18px}
 .detail-gallery .detail-section-top h2{margin-top:10px}
 .detail-navigation{flex-wrap:wrap}
 .detail-navigation a{flex:1 1 calc(50% - 12px)}
 .detail-navigation a:nth-child(2){order:3;flex-basis:100%}
}
@media(max-width:520px){
 .detail-gallery>div#detailGallery{grid-template-columns:1fr}
 .detail-quick-nav{min-height:48px}
 .lightbox{padding:50px 36px}
 .lightbox button{font-size:38px}
}
@media(prefers-reduced-motion:reduce){.detail-gallery-item img{transition:none}}


/* Project gallery: consistent compact 4:3 frames, full image visible.
   Overrides earlier natural-height gallery rules. Lightbox is unchanged. */
.detail-gallery {
  box-sizing:border-box;
  width:100%;
  max-width:1050px;
  margin:0 auto;
  padding:32px 30px 48px;
}
.detail-gallery .detail-section-top { margin-bottom:20px; }
.detail-gallery > div#detailGallery {
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:18px;
  align-items:stretch;
}
.detail-gallery #detailGallery .detail-gallery-item {
  box-sizing:border-box;
  display:flex;
  align-items:center;
  justify-content:center;
  width:100%;
  height:auto;
  aspect-ratio:4 / 3;
  min-width:0;
  margin:0;
  padding:10px;
  overflow:hidden;
  background:#d8d4ce !important;
  border:0;
  line-height:normal;
  cursor:zoom-in;
}
.detail-gallery #detailGallery .detail-gallery-item img {
  display:block;
  width:100% !important;
  height:100% !important;
  min-width:0;
  max-height:100% !important;
  object-fit:contain !important;
  object-position:center;
  background:transparent !important;
  transition:none;
  transform:none !important;
}
@media(max-width:650px){
  .detail-gallery{padding:25px 18px 36px;}
  .detail-gallery > div#detailGallery{grid-template-columns:1fr;gap:14px;}
  .detail-gallery #detailGallery .detail-gallery-item{padding:8px;}
}
