/* Sillage — Fabio Carissimi. Shared identity across home and all case studies. */
:root,body.cosmos-page,body.case-page{--bg:#101112;--paper:#e6e7e5;--muted:#a3a7ab;--accent:#e6e7e5;--line:#36383a;background-color:var(--bg);color:var(--paper)}
.identity{flex:none;gap:0;min-height:44px}
.identity-wordmark{display:block;width:220px;height:auto;max-width:100%;object-fit:contain}
.identity:hover{opacity:.82}
.cosmos-header{background:linear-gradient(#101112f5,#101112b3,transparent)}
.universe{background:radial-gradient(ellipse at 50% 58%,#202225 0%,#131517 44%,#101112 78%)}
.view-switch{background:#101112cc;border-color:var(--line)}
.view-switch [aria-pressed=true]{background:var(--paper);color:var(--bg)}
.view-switch a,.view-switch button{color:#a3a7ab}
.view-switch [aria-pressed=true]{color:var(--bg)}
.universe-title p,.star-meta,.universe-date,.galaxy-navigation label{color:var(--muted)}
.universe-title h1 span{color:var(--paper)}
.galaxy-navigation select{background:#191b1de8;color:var(--paper);border-color:#484c50}
.journey-start,.parcours-shortcut{color:var(--paper);border-color:#73797f}
.parcours-shortcut:focus-visible{outline-color:var(--paper)}
.project-peek{background:#191b1df5;border-color:#484c50;box-shadow:0 20px 60px #0008}
.project-peek:before{background:var(--paper)}
.peek-copy>a{border-color:#73797f;color:var(--paper)}
.peek-copy>a:hover{background:var(--paper);color:var(--bg)}
.peek-close,#preview-toggle{background:#101112eb;color:var(--paper)}
.space-controls{background-color:#101112bf;border-color:var(--line)}
.space-controls button{color:var(--muted);border-color:#555b61}
.mini-map{background:#191b1db8;border-color:var(--line)}
.map-window{border-color:#91969b99;background:#91969b0b}
.star-label.compact-star:hover .star-name,.star-label.compact-star:focus-visible .star-name{background:#191b1d}
.project-open{background:#101112e8;border-color:#91969b80}
.text-link,.contact-link,.header nav a:last-child{border-color:#73797f}
.film-choice.active{background:#e6e7e50b;color:var(--paper);box-shadow:inset 2px 0 var(--paper)}
.film-choice:hover{background:#e6e7e50b;color:var(--paper)}
.footer-signature{display:inline-flex;align-items:center;gap:12px}
.footer-mark{width:26px;height:24px;object-fit:contain}
.contact:after,.cosmos-page .contact:after{content:'';width:82px;height:76px;background:var(--paper);mask:url('assets/sillage-symbol.svg') center/contain no-repeat;-webkit-mask:url('assets/sillage-symbol.svg') center/contain no-repeat}
@media(max-width:760px){
 .identity-wordmark{width:174px}
 .header{gap:16px}.header nav{gap:20px;font-size:14px}
 .cosmos-header .identity{justify-self:start}
 .journey-start,.peek-copy>a{background:var(--paper);color:var(--bg);border-color:var(--paper)}
 .space-controls{background:none}
 .contact:after,.cosmos-page .contact:after{width:45px;height:42px}
}
@media(max-width:380px){.identity-wordmark{width:145px}.header nav{gap:14px}.header{gap:12px}}

/* More presence for the original star, without changing the lettering. */
.identity-wordmark{width:232px}
.brand-references{padding-block:42px 38px;border-bottom:1px solid var(--line)}
.brand-references-heading{display:flex;justify-content:space-between;align-items:baseline;gap:18px;margin-bottom:28px}
.brand-references-heading h2{font:500 18px/1.4 var(--body);letter-spacing:0;text-transform:none}
.brand-references-heading p{font-size:12px;color:var(--muted);margin:0}
.brand-reference-grid{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));align-items:center;gap:30px}
.brand-reference{height:88px;display:flex;align-items:center;justify-content:center;border-radius:4px;transition:background .2s}
.brand-reference:hover{background:#ffffff08}.brand-reference:focus-visible{outline:2px solid var(--paper);outline-offset:4px}
.brand-reference img{object-fit:contain;width:100%;max-width:130px;height:52px}.brand-yop img,.brand-1664 img{height:72px;width:80px}.brand-snapchat img{max-width:54px;height:54px}
.brand-hi{background:#f6f6f3;padding:10px 14px}.brand-hi:hover{background:#fff}
.film-sound{border:1px solid #777d83;background:var(--paper);color:var(--bg);font:500 13px var(--body);padding:10px 14px;min-height:44px;cursor:pointer}
.film-player figcaption{flex-wrap:wrap;gap:12px}.film-sound:focus-visible{outline:2px solid var(--paper);outline-offset:4px}
@media(max-width:760px){.identity-wordmark{width:184px}.brand-references{padding-block:28px}.brand-references-heading{display:block;margin-bottom:20px}.brand-references-heading h2{font-size:17px;margin:0 0 8px}.brand-reference-grid{grid-template-columns:repeat(3,minmax(0,1fr));gap:12px 16px}.brand-reference{height:72px}.brand-reference img{max-width:105px;height:38px}.brand-yop img,.brand-1664 img{height:62px;width:68px}.brand-snapchat img{max-width:44px;height:44px}.brand-hi{padding:8px}.film-sound{flex:1;min-width:125px}}
@media(max-width:380px){.identity-wordmark{width:152px}}
.brand-snapchat img{max-width:130px;width:100%;height:40px}@media(max-width:760px){.brand-snapchat img{max-width:105px;height:36px}}
.brand-hi,.brand-hi:hover{background:transparent}.brand-hi img{filter:brightness(0) invert(.9)}.brand-yop img{width:100px;height:80px}@media(max-width:760px){.brand-yop img{width:82px;height:70px}}

/* Personal responsibilities, reviewed against Behance */
.role-detail-link{display:inline-block;margin-top:14px;padding-block:10px;min-height:44px;font-size:14px;color:var(--paper);border-bottom:1px solid var(--line)}
.role-detail-link:hover{border-color:var(--paper)}
.case-page .case-role>p{flex:1;min-width:0}
.case-page .case-role .role-summary{display:block;margin:5px 0 0;max-width:720px}
.case-page .role-detail-link{flex-shrink:0;white-space:nowrap}
.contribution-heading{scroll-margin-top:32px}
.contributions.contributions-paired{grid-template-columns:repeat(2,minmax(0,1fr))}
@media(max-width:760px){.contributions.contributions-paired{grid-template-columns:1fr}}

/* Cinema controls remain usable on narrow screens. */
.cinema .cinema-bottom{flex-wrap:wrap}
.cinema .cinema-sound{width:auto;min-width:140px;min-height:44px;padding:10px 16px;font-size:14px;line-height:1.4;white-space:nowrap}
@media(max-width:600px){.cinema .cinema-sound{flex-basis:100%;max-width:220px;margin:0 auto}}
