/* Single site-wide header: logo + name on the left, MENU on the right, plus the side menu it opens. Self-contained (literal colours/fonts, own --pad/--gap) so every page renders it identically; link it LAST in . */ .site-header,.baccarat-menu-trigger,.baccarat-menu{--pad:clamp(20px,3.2vw,52px);--gap:clamp(16px,1.65vw,28px);--sans:"Helvetica Neue",Helvetica,Arial,sans-serif} header.site-header{box-sizing:border-box;position:fixed;z-index:50;top:0;left:0;right:0;height:56px;display:grid;grid-template-columns:1fr;align-items:center;padding:0 var(--pad);background:rgba(243,242,237,.9);-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);border-bottom:1px solid rgba(0,0,0,.15);color:#0a0a0a;font-family:var(--sans);text-transform:none;letter-spacing:normal;transform:none} .site-header .brand,.baccarat-menu-trigger{font-family:var(--sans);font-size:15px;font-weight:600;line-height:1;letter-spacing:-.02em;text-transform:uppercase;color:#0a0a0a} .site-header .brand{display:flex;align-items:center;justify-self:start;gap:11px;width:max-content} .site-header .brand img{display:block;width:26px;height:26px;object-fit:contain} .baccarat-menu-trigger{position:fixed;right:var(--pad);top:0;z-index:95;height:55px;display:flex;align-items:center;border:0;padding:0;background:transparent;cursor:pointer} .baccarat-menu-dot{display:inline-block;width:7px;height:7px;margin-left:8px;background:currentColor;border-radius:50%;transition:transform .25s ease} .baccarat-menu-trigger:hover .baccarat-menu-dot{transform:scale(1.45)} .baccarat-menu{position:fixed;inset:0 0 0 auto;margin:0;border:0;box-sizing:border-box;width:min(28rem,100%);max-width:100%;height:100dvh;max-height:100dvh;padding:var(--pad);background:#080808;color:var(--bg);transform:translateX(100%);opacity:0;transition:transform .55s cubic-bezier(.77,0,.18,1),opacity .35s ease;overflow:auto} .baccarat-menu[open]{display:flex;flex-direction:column} .baccarat-menu.is-open{transform:translateX(0);opacity:1} .baccarat-menu::backdrop{background:rgb(0 0 0 / 18%)} .baccarat-menu-close{align-self:flex-end;background:transparent;border:0;padding:8px;color:inherit;font:inherit;font-size:24px;cursor:pointer} .baccarat-menu-links{display:flex;flex-direction:column;gap:var(--gap);margin:auto 0;padding-block:var(--pad)} .baccarat-menu-links a{font-size:clamp(28px,3vw,48px);line-height:1;letter-spacing:-.045em} .baccarat-menu-links a:hover{opacity:.45} .baccarat-menu-contact{font-size:12px} .baccarat-menu{color:#f3f2ed;font-family:var(--sans);text-transform:none} .baccarat-menu-links{text-transform:none;font-size:16px;letter-spacing:normal;font-family:var(--sans)} @media(prefers-reduced-motion:reduce){.baccarat-menu,.baccarat-menu-dot{transition:none}} /* Projects list unfolding under "Projects" in the side menu (see js/baccarat-effects.js). */ .baccarat-menu-item{display:flex;flex-direction:column} .baccarat-menu-sub{display:grid;grid-template-rows:0fr;transition:grid-template-rows .55s cubic-bezier(.22,.61,.36,1)} .baccarat-menu-sub ul{list-style:none;margin:0;padding:0;min-height:0;overflow:hidden;visibility:hidden;transition:visibility 0s linear .55s} .baccarat-menu-item.is-expanded .baccarat-menu-sub{grid-template-rows:1fr} .baccarat-menu-item.is-expanded .baccarat-menu-sub ul{visibility:visible;transition-delay:0s} .baccarat-menu-sub ul::before{content:"";display:block;height:calc(var(--gap) * .9)} .baccarat-menu-sub li{opacity:0;transform:translateY(-6px);transition:opacity .3s ease,transform .45s cubic-bezier(.22,.61,.36,1);transition-delay:0s} .baccarat-menu-item.is-expanded .baccarat-menu-sub li{opacity:1;transform:none;transition-delay:calc(70ms + var(--i) * 45ms)} .baccarat-menu-links .baccarat-menu-sub a{display:block;padding:5px 0;font-size:clamp(18px,1.6vw,24px);line-height:1.2;letter-spacing:-.02em;opacity:.62;transition:opacity .2s ease} .baccarat-menu-links .baccarat-menu-sub a:hover,.baccarat-menu-links .baccarat-menu-sub a:focus-visible{opacity:1} @media(prefers-reduced-motion:reduce){.baccarat-menu-sub,.baccarat-menu-sub ul,.baccarat-menu-sub li{transition:none}}