/* Shared by every page: burger menu + short contact footer. */

/* ===== Burger: a labelled pill so it is impossible to miss ===== */
.burger{position:fixed;top:calc(12px + var(--safe-t,0px));right:max(calc(var(--gut,22px) - 12px),10px);z-index:110;width:44px;height:44px;padding:0;border:0;border-radius:50%;background:#0b0a09a6;color:#fbfaf7;cursor:pointer;display:flex;align-items:center;justify-content:center;font-family:var(--sans,"Archivo",system-ui,sans-serif);-webkit-tap-highlight-color:transparent;transition:color .45s ease,background-color .45s ease}
.burger .bars{position:relative;width:22px;height:9px;flex-shrink:0}
.burger .bars i{position:absolute;left:0;right:0;height:1.5px;background:currentColor;transition:transform .35s ease,top .35s ease}
.burger .bars i:nth-child(1){top:0}
.burger .bars i:nth-child(2){top:7.5px}
.burger.ink{color:#121110;background:#fbfaf7eb;box-shadow:0 0 0 1px #12111014}
.burger.open,.burger.open.ink{color:#fbfaf7;background:transparent;box-shadow:none;transition:none}
.burger.open .bars i:nth-child(1){top:4px;transform:rotate(45deg)}
.burger.open .bars i:nth-child(2){top:4px;transform:rotate(-45deg)}

/* ===== Full-screen menu ===== */
.menu{position:fixed;inset:0;z-index:100;will-change:opacity;background:#0b0a09;color:#fbfaf7;display:flex;flex-direction:column;justify-content:center;gap:6px;padding:0 var(--gut,22px);opacity:0;visibility:hidden;transition:opacity .4s ease,visibility 0s linear .4s;font-family:var(--sans,"Archivo",system-ui,sans-serif)}
iframe{transition:opacity .4s ease}
html.menu-open iframe{opacity:0}
/* Once the menu has faded in, stop painting the page behind it (players, lightbox) so nothing can show through. */
html.menu-covered body>:not(.menu):not(.burger){visibility:hidden}
.menu.open{opacity:1;visibility:visible;transition:opacity .4s ease}
.menu a{font-weight:500;font-size:12px;line-height:1;letter-spacing:.24em;text-transform:uppercase;padding:11px 0;opacity:.45;transition:opacity .2s ease;width:fit-content}
.menu a:hover,.menu a:focus-visible,.menu a[aria-current="page"]{opacity:1}
.menu a:focus-visible{outline:1px solid #fbfaf7;outline-offset:6px}

/* ===== Short contact footer ===== */
.sc{max-width:1280px;margin:clamp(70px,9vw,130px) auto 0;padding:clamp(28px,4vw,44px) var(--gut,22px) calc(36px + var(--safe-b,0px));position:relative;font-family:var(--sans,"Archivo",system-ui,sans-serif);color:#121110;display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:18px 32px}
.sc::before{content:"";position:absolute;top:0;left:var(--gut,22px);right:var(--gut,22px);border-top:1px solid #121110}
.mail{background:none;border:0;padding:6px 0;cursor:pointer;font-family:inherit;color:inherit;display:inline-flex;align-items:center;gap:14px;border-bottom:1px solid #121110;font-weight:400;font-size:13px;letter-spacing:.02em;-webkit-tap-highlight-color:transparent}
.mail .hint{font-weight:500;font-size:9px;letter-spacing:2px;text-transform:uppercase;color:#8a8780;border:1px solid #12111033;padding:4px 8px;border-radius:2px;line-height:1;transition:color .3s ease,border-color .3s ease}
.mail.copied .hint{color:#121110;border-color:#121110}
.sc .meta{display:flex;gap:22px;flex-wrap:wrap;font-weight:400;font-size:10px;letter-spacing:1.5px;text-transform:uppercase;color:#8a8780}
.sc .meta a{border-bottom:1px solid #12111033;padding-bottom:2px}
.sc .meta a:hover{color:#121110;border-color:#121110}
@media (hover:none){.mail{padding:11px 0}}
@media (prefers-reduced-motion:reduce){.burger,.burger .bars i,.menu,.menu a{transition:none!important}}
