/* Fixed navigation + full-screen menu — Figma "FIX nav" (39:1298), "Nav open" (34:854), "NAV-Hover" (34:888/34:903).
   --hu is one Figma px of the 1886 artboard; it never drops below .62 px so the logo stays legible. */
:root { --hu: max(.62px, calc(100vw / 1886)); }

.site-header {
  position: fixed; inset: 0 0 auto 0; z-index: 60; height: calc(82 * var(--hu)); pointer-events: none;
  color: #030000; --menu-ink: #040100;
  opacity: 0; transform: translateY(-14px); visibility: hidden;
  transition: opacity .5s ease, transform .5s cubic-bezier(.22, 1, .36, 1), visibility 0s linear .5s, color .35s;
}
.site-header[data-tone="light"] { color: #fff; --menu-ink: #fff; }
.site-header.is-visible { opacity: 1; transform: none; visibility: visible; transition-delay: 0s; }
.site-logo { position: absolute; left: calc(6 * var(--hu)); top: calc(4 * var(--hu)); width: calc(291 * var(--hu)); height: calc(79.2827 * var(--hu)); color: inherit; pointer-events: auto; transition: opacity .25s; }
.site-logo svg { display: block; width: 100%; height: 100%; overflow: visible; }
.site-header .site-logo:focus-visible, .site-burger:focus-visible { outline: 2px solid currentColor; outline-offset: 4px; }
.site-burger {
  position: absolute; right: calc(19.82 * var(--hu)); top: calc(-61 * var(--hu)); width: calc(183.185 * var(--hu)); height: calc(177 * var(--hu));
  padding: 0; border: 0; background: none; cursor: pointer; pointer-events: none; color: inherit; font: inherit;
}
/* the hit area is the visible part only: the glyph box overhangs the top of the viewport */
.site-burger::after { content: ''; position: absolute; left: calc(40 * var(--hu)); right: 0; top: calc(61 * var(--hu)); bottom: calc(30 * var(--hu)); pointer-events: auto; }
.site-burger__m {
  /* Figma 59:1692: the M starts 26px into a 183 x 177 box that overhangs the top of the screen; its flourishes run on past the box */
  position: absolute; left: calc(26 * var(--hu)); top: 0; box-sizing: content-box; opacity: .4; white-space: nowrap;
  font-family: var(--f-script); font-size: calc(110 * var(--hu)); line-height: normal; color: transparent;
  background-image: linear-gradient(21.56deg, #ca2115 22.433%, #b56e55 93.07%); -webkit-background-clip: text; background-clip: text;
  padding: .5em 1em; margin: -.5em -1em;
}
.site-burger__label { position: absolute; right: 0; top: calc(84 * var(--hu)); font-family: var(--f-display); font-style: italic; font-size: calc(20 * var(--hu)); line-height: 1; letter-spacing: -.06em; white-space: nowrap; color: var(--menu-ink); }
@media (max-width: 700px) {
  :root { --hu: .62px; }
  .site-burger__label { font-size: 15px; }
  /* phones: the whole M stays on the screen */
  .site-burger__m { left: auto; right: calc(.72em + 6 * var(--hu)); top: calc(24 * var(--hu)); }
  .site-burger__label { top: calc(84 * var(--hu) + 24 * var(--hu)); right: calc(8 * var(--hu)); }
}

/* ---- open state */
.site-menu {
  position: fixed; inset: 0; z-index: 55; overflow: hidden; background: #040100 var(--bg-dark, none) center / cover no-repeat; color: #fff;
  opacity: 0; visibility: hidden; transition: opacity .45s ease, visibility 0s linear .45s;
}
.site-menu[hidden] { display: block !important; }
html.menu-open .site-menu { opacity: 1; visibility: visible; transition-delay: 0s; }
html.menu-open .site-header { color: #fff; --menu-ink: #fff; }
html.menu-open .site-header .site-logo { opacity: 0; pointer-events: none; }
.site-menu__logo { position: absolute; left: 50%; top: calc(1 * var(--hu)); width: calc(333.866 * var(--hu)); height: calc(126.415 * var(--hu)); transform: translateX(-50%); color: #fff; }
.site-menu__logo svg { display: block; width: 100%; height: 100%; overflow: visible; }
.site-menu__list { position: absolute; left: 50%; top: 50%; width: min(calc(1521 * var(--hu)), 100%); margin: 0; padding: 0; list-style: none; transform: translate(-50%, -50%); text-align: center; }
.site-menu__list li { position: relative; }
.site-menu__list a {
  position: relative; display: block; color: #fff; text-decoration: none; white-space: nowrap;
  font: italic 400 max(28px, calc(77 * var(--hu)))/1.4 var(--f-display); transition: color .35s;
}
.site-menu__list:hover a:not(:hover), .site-menu__list:focus-within a:not(:focus-visible):not(:hover) { color: #3a3a44; }
.site-menu__label { position: relative; z-index: 1; }
.site-menu__letter {
  position: absolute; left: 50%; top: 50%; z-index: 0; box-sizing: content-box; text-align: center; white-space: nowrap;
  /* the box is centred on the item; --dx / --dy move the glyph's ink (not its advance box) onto that centre */
  transform: translate(calc(-50% + var(--dx, 0em)), calc(-1 * (var(--dy, .5em) + .7em)));
  font-family: var(--f-script); font-style: normal; font-size: 2.165em; line-height: 1; color: transparent;
  padding: .7em 1em;
  background-image: linear-gradient(29.53deg, #ca2115 22.433%, #b56e55 93.07%); -webkit-background-clip: text; background-clip: text;
  opacity: 0; transition: opacity .35s;
}
.site-menu__list a:hover .site-menu__letter, .site-menu__list a:focus-visible .site-menu__letter { opacity: 1; }
.site-menu__list a:focus-visible { outline: none; color: #fff; }

/* framed photos: every item has its own composition (built in site-nav.js); the active one opens left -> right */
.site-menu__scene { position: absolute; inset: 0; pointer-events: none; }
.site-menu__frame { position: absolute; clip-path: inset(0 100% 0 0); transition: clip-path .75s cubic-bezier(.76, 0, .24, 1); }
.site-menu__frame img { position: absolute; display: block; max-width: none; }
.site-menu__border { inset: 0; width: 100%; height: 100%; }
.site-menu__frame[data-kind="portrait"] .site-menu__photo { left: 20.16%; top: 19.96%; width: 59.95%; height: 60.48%; object-fit: cover; }
.site-menu__frame[data-kind="square"] .site-menu__photo { left: 16.95%; top: 16.95%; width: 66.1%; height: 66.1%; object-fit: cover; }
.site-menu__scene.is-on .site-menu__frame { clip-path: inset(0); }
.menu-cta { position: absolute; left: 50%; bottom: 10px; transform: translateX(-50%); }
.menu-cta:hover { transform: translateX(-50%); }
html.menu-open { overflow: hidden; }

@media (max-width: 700px) {
  .site-menu__list a { font-size: min(8.6vw, 40px); line-height: 1.6; white-space: normal; padding-inline: 16px; }
  .site-menu__letter, .site-menu__scene { display: none; }
  .site-menu__logo { width: 230px; height: 87px; }
}
@media (prefers-reduced-motion: reduce) {
  .site-header, .site-menu, .site-menu__frame, .site-menu__letter, .site-menu__list a { transition-duration: .01s; transition-delay: 0s; }
}