/* Fishbone Guitars — responsive layout refinements, 2026-10-27 */
:root{--fb-header-height:88px}
html{scroll-padding-top:calc(var(--fb-header-height) + 12px);scroll-behavior:smooth}
body{overflow-x:clip}
img,video,svg{max-width:100%}
main,section,.project-grid,.project-card{min-width:0}
.fb-unified-header,.site-header.fb-unified-header{position:sticky!important;top:0!important;z-index:10000!important}
.fb-unified-brand img,.site-header .fb-unified-brand .fb-logo-art{width:auto!important;height:70px!important;max-width:150px!important;object-fit:contain!important}
/* The homepage uses the same official artwork as Portfolio and Custom. */
/* Smaller hero: exposes the beginning of Selected Works on common desktop screens. */
@media(min-width:851px){
 body:has(.hero) .hero{height:clamp(510px,76svh,790px)!important;min-height:0!important;max-height:none!important;aspect-ratio:auto!important}
 body:has(.hero) .hero-copy{height:100%!important;padding-top:clamp(25px,4vh,55px)!important;padding-bottom:25px!important;justify-content:center!important}
 body:has(.hero) .hero h1{font-size:clamp(43px,5.5vw,84px)!important}
 body:has(.hero) .hero .eyebrow{margin-bottom:clamp(12px,2vh,24px)!important}
 body:has(.hero) .hero .button{margin-top:clamp(12px,2vh,24px)!important}
 .section{padding-top:clamp(48px,7vh,90px)!important;padding-bottom:clamp(48px,7vh,90px)!important}
 .section-heading{margin-bottom:clamp(18px,3vh,36px)!important}
 .custom-section{min-height:0!important}
 .about-section{gap:clamp(25px,5vw,75px)!important}
}
@media(min-width:851px) and (max-height:720px){
 body:has(.hero) .hero{height:clamp(430px,76svh,570px)!important}
 body:has(.hero) .hero h1{font-size:clamp(38px,5vw,68px)!important}
}
/* Avoid unintended cropping of portfolio thumbnails and keep gallery proportions. */
.project-card img,.project-image img{max-width:100%}
.detail-navigation,.detail-quick-nav{max-width:100%;box-sizing:border-box}
@media(max-width:850px){
 :root{--fb-header-height:76px}
 .fb-unified-header,.site-header.fb-unified-header{height:76px!important;min-height:76px!important}
 .fb-unified-brand img,.site-header .fb-unified-brand .fb-logo-art{height:62px!important;max-width:120px!important}
 body:has(.hero) .hero{height:auto!important;min-height:clamp(570px,85svh,760px)!important;max-height:none!important;aspect-ratio:auto!important}
 body:has(.hero) .hero-copy{height:auto!important;min-height:0!important;padding:clamp(42px,7vh,80px) 24px 30px!important}
 body:has(.hero) .hero h1{font-size:clamp(40px,10vw,65px)!important}
 .section{padding:clamp(40px,7vw,65px) 24px!important}
 .section-heading h2{font-size:clamp(35px,7vw,56px)!important}
 .detail-navigation a,.detail-quick-nav a{white-space:normal!important}
}
@media(max-width:480px){
 body:has(.hero) .hero{min-height:600px!important}
 body:has(.hero) .hero-copy{padding:44px 22px 25px!important}
 body:has(.hero) .hero h1{font-size:clamp(39px,10vw,54px)!important}
 .section{padding:42px 20px!important}
 .project-grid{grid-template-columns:repeat(2,minmax(0,1fr))!important}
}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}}