/* COBALT / BUTTER — Published palette */
:root{--ink:#1638C9;--muted:#525B87;--line:#8799DA;--paper:#F1E3A7;--surface:#F1E3A7;--accent:#173FDD;--highlight:#173FDD}
html{scroll-behavior:smooth}
body{background:#F1E3A7;color:#173FDD;font-family:Helvetica,"Helvetica Neue",Arial,sans-serif}
header{background:#F1E3A7;border-bottom:2px solid #173FDD;height:150px;color:#173FDD}
header nav a{font-size:13px;text-transform:uppercase;letter-spacing:.045em;color:#173FDD}
header nav a.active{border-bottom:2px solid #173FDD}
header nav a:hover,header .language-switch button:hover{background:#173FDD!important;color:#F1E3A7!important;box-shadow:none!important}
header .studio-logo{filter:none;mix-blend-mode:normal}
.preview-ribbon{padding:9px 4.5%;background:#173FDD;color:#F1E3A7;font-size:10px;letter-spacing:2px;display:flex;justify-content:space-between;gap:12px}
.preview-ribbon span{color:#F1E3A7}
body:has(.home-slideshow) .home-slideshow{background:#F1E3A7;padding:25px 4.5% 0}
body:has(.home-slideshow) .home-slideshow .slideshow-stage{height:clamp(320px,61vw,690px);background:#F1E3A7}
body:has(.home-slideshow) .home-slideshow .slideshow-image{object-fit:contain}
body:has(.home-slideshow) .home-slideshow .slideshow-controls{background:#F1E3A7;color:#173FDD;border-top:1px solid #173FDD;height:65px}
body:has(.home-slideshow) .home-slideshow .slideshow-controls button{color:#173FDD}
body:has(.home-slideshow) .home-slideshow .slideshow-controls button:hover{background:#173FDD!important;color:#F1E3A7!important;box-shadow:none!important}
body:has(.home-slideshow) #selected .section-title{border-top:2px solid #173FDD;margin-top:65px;padding-top:29px;align-items:end}
body:has(.home-slideshow) #selected .section-title h2{font-size:clamp(38px,5vw,77px);letter-spacing:-.055em;line-height:1;font-weight:400;margin:0;color:#173FDD}
body:has(.home-slideshow) #selected .section-title small{color:#173FDD}
body:has(.home-slideshow) #selected .text-link{background:#173FDD;color:#F1E3A7;padding:12px 14px}
body:has(.home-slideshow) #selected .card .image-wrap{background:#F1E3A7}
body:has(.home-slideshow) #selected .card:hover .image-wrap{outline:none;box-shadow:none}
body:has(.home-slideshow) #selected .card-meta{color:#173FDD}
body:has(.home-slideshow) .band{background:#F1E3A7;color:#173FDD;margin-top:60px;gap:55px;border-top:2px solid #173FDD}
body:has(.home-slideshow) .band h2{font-size:clamp(32px,4vw,60px);letter-spacing:-.055em;color:#173FDD}
body:has(.home-slideshow) .band p{color:#173FDD}
body:has(.home-slideshow) .band .bespoke-slideshow{background:#173FDD;padding:10px}
body:has(.home-slideshow) .band .slideshow-controls{color:#F1E3A7}
body:has(.home-slideshow) .band .slideshow-controls button{color:#173FDD}
footer{background:#173FDD;color:#F1E3A7;margin-top:0}
footer .footer-top p,footer .footer-legal,footer .footer-legal summary{color:#E6E8E5}
footer .footer-top>a span{color:#F1E3A7}footer .footer-top>a:hover span{color:#FFFFFF}
footer .footer-bottom{border-color:#91A2F2}
footer .footer-bottom>a{display:inline-flex;align-items:center;padding:8px 10px;background:#F1E3A7}
footer .studio-logo{filter:none;mix-blend-mode:normal}
@media(max-width:760px){header{height:112px}.preview-ribbon{font-size:9px;letter-spacing:1px}body:has(.home-slideshow) .home-slideshow{padding:12px 3% 0}body:has(.home-slideshow) #selected .section-title{align-items:start;gap:20px}body:has(.home-slideshow) #selected .section-title h2{font-size:42px}body:has(.home-slideshow) .band{margin-top:40px}header nav.open{background:#F1E3A7;color:#173FDD}}

/* Consistent cobalt interaction accents */
a:hover,button:hover{transition:color .18s ease,background-color .18s ease,outline-color .18s ease}
:focus-visible{outline:none;box-shadow:none;text-decoration:underline;text-underline-offset:5px}
footer :focus-visible{text-decoration-color:#F1E3A7}
body:has(.home-slideshow) .home-slideshow .slideshow-controls button:focus-visible{outline:none;box-shadow:none;text-decoration:underline}

/* Interaction system: inverse of the original cobalt/butter pairing, no orange or frame. */
:root{--highlight:#173FDD;--accent:#173FDD}
::selection{background:#173FDD;color:#F1E3A7}
:is(header nav a,header .language-switch button,.menu,.text-link,.credit-name[href],.press-row>a,.filters button,.entrance-choices a,.slideshow-controls button,.solid,.footer-legal summary):is(:hover,:active,:focus-visible){background:#173FDD!important;color:#F1E3A7!important;border-color:#173FDD!important;outline:none!important;box-shadow:none!important;text-decoration:none!important}
:is(header nav a,header .language-switch button,.menu,.text-link,.credit-name[href],.press-row>a,.filters button,.entrance-choices a,.slideshow-controls button,.solid,.footer-legal summary):is(:hover,:active,:focus-visible) :is(span,svg){color:inherit!important}
/* Controls resting on a cobalt surface switch to butter background, cobalt text. */
:is(footer,.band .bespoke-slideshow,.footer-top,.footer-bottom) :is(a,button,summary):is(:hover,:active,:focus-visible){background:#F1E3A7!important;color:#173FDD!important;border-color:#F1E3A7!important;box-shadow:none!important;outline:none!important}
footer .footer-top>a:is(:hover,:active,:focus-visible) span{background:transparent!important;color:#173FDD!important;box-shadow:none!important}
body:has(.home-slideshow) .home-slideshow .slideshow-controls button:is(:hover,:active,:focus-visible){background:#173FDD!important;color:#F1E3A7!important;box-shadow:none!important}
body:has(.home-slideshow) .band .bespoke-slideshow .slideshow-controls button:is(:hover,:active,:focus-visible){background:#F1E3A7!important;color:#173FDD!important;box-shadow:none!important}
/* Preserve blue chroma of the supplied identity across landing page, header and footer. */
.entrance-content .studio-logo,header .studio-logo,footer .studio-logo{filter:none!important;mix-blend-mode:normal!important}

/* Uniform Butter backgrounds across all pages; cobalt remains the contrasting brand color. */
:root{--paper:#F1E3A7;--surface:#F1E3A7}
body,main,.container,.page-title,.projects-body,.drawing{background-color:#F1E3A7}
body:has(.home-slideshow) .band,body:has(.home-slideshow) #selected .card .image-wrap{background:#F1E3A7}

/* Footer logo: same transparent treatment as landing page, in inverse Butter on Cobalt. */
footer .footer-bottom>a{position:relative;display:inline-flex;align-items:center;background:transparent!important;padding:0!important;box-shadow:none!important;outline:none!important;flex-shrink:0}
footer .footer-bottom>a .studio-logo{opacity:0!important;filter:none!important}
footer .footer-bottom>a::after{content:"";position:absolute;inset:0;background:#F1E3A7;-webkit-mask:url('assets/studio-logo.png') center/contain no-repeat;mask:url('assets/studio-logo.png') center/contain no-repeat;pointer-events:none}
footer .footer-bottom>a:is(:hover,:focus-visible,:active){background:transparent!important}
footer .footer-bottom>a:is(:hover,:focus-visible,:active)::after{opacity:.8}
/* Bespoke Architecture: Butter background, never cool gray. */
.band,body:has(.home-slideshow) .band{background:#F1E3A7!important;background-color:#F1E3A7!important}

/* Mobile arrows: same glyphs, styling, and control spacing as desktop. */
@media(max-width:760px){
  .home-slideshow .slideshow-controls,
  .bespoke-slideshow .slideshow-controls{height:58px;gap:18px}
  .home-slideshow .slideshow-controls button[data-slide-prev],
  .home-slideshow .slideshow-controls button[data-slide-next],
  .bespoke-slideshow .slideshow-controls button[data-slide-prev],
  .bespoke-slideshow .slideshow-controls button[data-slide-next]{font-family:Helvetica,"Helvetica Neue",Arial,sans-serif;font-size:14px;font-weight:400;line-height:1;min-width:40px;min-height:40px;padding:10px;color:#173FDD;border:0;background:transparent}
  .footer-top>a span,nav a span,.hero-bottom .arrow{font-size:inherit;font-weight:inherit}
}

/* Mobile project index: whole bookcase and sideboard images in square cells, without cropping. */
@media (max-width:760px) {
  .card:is([href="#project/bookcase-and-cabinet"],[href="#project/sideboard"],[href="#project/sideboard-2022"]) .image-wrap {
    width:100%; aspect-ratio:1 / 1; overflow:hidden; background:#F1E3A7;
  }
  .card:is([href="#project/bookcase-and-cabinet"],[href="#project/sideboard"],[href="#project/sideboard-2022"]) .image-wrap picture {
    display:block; width:100%; height:100%;
  }
  .card:is([href="#project/bookcase-and-cabinet"],[href="#project/sideboard"],[href="#project/sideboard-2022"]) .image-wrap img {
    display:block; width:100%; height:100%; aspect-ratio:1 / 1;
    object-fit:contain !important; object-position:center center !important;
  }
}

/* Bespoke Architecture slideshow: Butter canvas, including slide viewport and controls. */
body:has(.home-slideshow) .band .bespoke-slideshow,body:has(.home-slideshow) .band .bespoke-slideshow .slideshow-stage,body:has(.home-slideshow) .band .bespoke-slideshow .slideshow-controls{background:#F1E3A7!important;background-color:#F1E3A7!important;color:#173FDD!important}
body:has(.home-slideshow) .band .bespoke-slideshow .slideshow-controls button{color:#173FDD!important;background:transparent!important}
body:has(.home-slideshow) .band .bespoke-slideshow .slideshow-controls button:is(:hover,:focus-visible,:active){background:#173FDD!important;color:#F1E3A7!important}

/* Smartphone: plain horizontal arrow for the footer conversation link. */
@media(max-width:760px){
  footer .footer-top>a span{font-size:0!important;line-height:0!important;display:inline-block;vertical-align:baseline;background:transparent!important;box-shadow:none!important}
  footer .footer-top>a span::after{content:"→";font-family:Helvetica,"Helvetica Neue",Arial,sans-serif;font-size:clamp(30px,4.4vw,62px);font-weight:400;line-height:1;letter-spacing:0;color:inherit;display:inline-block}
}

/* Header navigation: align Contact with the other navigation labels */
header nav a{display:inline-flex;align-items:center;gap:8px;vertical-align:middle;line-height:1.3}
header nav a span{display:inline-block;margin-left:0;line-height:1;font-size:inherit;vertical-align:middle}
@media(max-width:760px){header nav a{width:max-content;align-items:center}}

/* Language selector: match navigation label baseline and vertical rhythm. */
header .language-switch{display:flex;align-items:center;font-size:13px;line-height:1.3}
header .language-switch button{font-size:inherit;line-height:inherit;padding:10px 3px}
header .language-switch span{line-height:inherit}

/* Remove the hairline touching slideshow imagery; keep section dividers. */
body:has(.home-slideshow) .home-slideshow .slideshow-controls,
body:has(.home-slideshow) .band .bespoke-slideshow .slideshow-controls {
  border-top:0!important;
}
.home-slideshow .slideshow-stage,
.bespoke-slideshow .slideshow-stage {
  border-bottom:0!important;
}

/* Mobile: keep the View All Projects arrow immediately beside its label. */
@media(max-width:760px){
  #selected .section-title .text-link{display:inline-flex!important;align-items:center;justify-content:flex-start;white-space:nowrap!important;gap:0!important;flex-shrink:0;max-width:100%;font-size:clamp(10px,2.7vw,12px)}
}

/* Montepulciano project film */
.montepulciano-video{padding-top:32px}.montepulciano-video video{display:block;width:100%;height:auto;max-height:75vh;object-fit:contain;background:#F1E3A7}.montepulciano-video .section-title{margin-top:20px}

/* Mobile video fallback: open full MP4 in the device's native video player */
.video-mobile-link{margin:12px 0 0;font-size:13px}.video-mobile-link a{display:inline-block;color:#173FDD;text-decoration:underline;text-underline-offset:4px}.video-mobile-link a:hover,.video-mobile-link a:focus-visible{background:#173FDD;color:#F1E3A7}.montepulciano-video video,.project-film video{width:100%;height:auto;max-height:75vh;background:#F1E3A7;display:block}

/* Mobile: keep all project detail titles fully inside the viewport. */
@media (max-width:760px){
  .page-title{min-width:0;max-width:100%;overflow:visible}
  .page-title h1{
    max-width:100%;min-width:0;
    font-family:Helvetica,"Helvetica Neue",Arial,sans-serif;
    font-size:clamp(27px,7.8vw,48px);
    line-height:1.1;
    letter-spacing:-.045em;
    overflow-wrap:anywhere;
    word-break:normal;
    hyphens:auto;
  }
}

/* Strong mobile override for project detail headings; long words must fit viewport */
@media screen and (max-width:760px){
  body .page-title h1{
    font-size:clamp(22px,6.2vw,32px)!important;
    line-height:1.14!important;
    letter-spacing:-.035em!important;
    width:100%!important;max-width:100%!important;
    white-space:normal!important;
    overflow-wrap:anywhere!important;word-break:break-word!important;
    margin-left:0!important;margin-right:0!important;
  }
  body .page-title{width:100%;box-sizing:border-box;padding-left:5%;padding-right:5%;}
}

/* Mobile project headings: smaller, clean word wrapping within screen */
@media screen and (max-width:760px) {
  html, body { max-width:100%; overflow-x:clip; }
  body .page-title { width:100%; max-width:100vw; min-width:0; padding-inline:5%; box-sizing:border-box; }
  body .page-title h1 {
    display:block;
    font-size:clamp(20px,5.5vw,27px)!important;
    line-height:1.18!important;
    letter-spacing:-.02em!important;
    font-weight:400!important;
    width:100%!important; max-width:100%!important; min-width:0!important;
    white-space:normal!important;
    overflow-wrap:break-word!important;
    word-break:normal!important;
    hyphens:auto;
  }
}

/* Titles on mobile: exactly 26px and multiline within screen width */
@media(max-width:760px){
 body .page-title h1{font-size:26px!important;line-height:1.16!important;letter-spacing:-.025em!important;max-width:100%!important;overflow-wrap:anywhere!important;word-break:normal!important;white-space:normal!important;}
}