/* Site navigation, shared by every page.
   Bold full-screen navigation (after Osmo): the black panel wipes down, links rise in on a
   stagger, hover rolls each link to a copy of itself. Links sit bottom-left at the size and
   position of the original design E menu. Self-contained so it works on pages that don't load
   home-haptic.css. */

@font-face { font-family: 'Newsreader'; src: url('../fonts/newsreader-300-latin.woff2') format('woff2'); font-weight: 300; font-style: normal; font-display: swap; }
@font-face { font-family: 'Newsreader'; src: url('../fonts/newsreader-300-italic-latin.woff2') format('woff2'); font-weight: 300; font-style: italic; font-display: swap; }

.site-nav-btn,
.site-nav {
    --sn-m: 40px;
    --sn-bg: #000;
    --sn-fg: #fff;
    --sn-ink: #000;
    --sn-chip: #efefef;
    --sn-ease: cubic-bezier(0.7, 0, 0.3, 1);
    --sn-serif: 'ivyjournal', 'Newsreader', Georgia, serif;
    --sn-sans: -apple-system, BlinkMacSystemFont, 'SF Pro Display', 'SF Pro Text', 'Inter', 'Segoe UI', sans-serif;
}

/* Button: three bars that shorten on hover and cross into an X when open */
.site-nav-btn { position: fixed; top: 40px; right: 25px; z-index: 1001; display: grid; place-items: center; width: 40px; height: 40px; margin: 0; padding: 0; overflow: hidden; border: 0; border-radius: 50%; background: var(--sn-chip); color: var(--sn-ink); cursor: pointer; }
.site-nav-btn__bars { position: relative; width: 16px; height: 12px; }
.site-nav-btn__bars i { position: absolute; top: 50%; left: 0; width: 100%; height: 1.5px; margin-top: -0.75px; background: currentColor; transform: translateY(0) rotate(0.001deg); transition: transform 0.5s var(--sn-ease), opacity 0.3s; }
.site-nav-btn__bars i:nth-child(1) { transform: translateY(-5px) scaleX(1) rotate(0.001deg); }
.site-nav-btn__bars i:nth-child(3) { transform: translateY(5px) scaleX(1) rotate(0.001deg); }
.site-nav-btn:hover .site-nav-btn__bars i:nth-child(1) { transform: translateY(-5px) scaleX(0.5) rotate(0.001deg); }
.site-nav-btn:hover .site-nav-btn__bars i:nth-child(3) { transform: translateY(5px) scaleX(0.5) rotate(0.001deg); }
.site-nav-btn[aria-expanded='true'] .site-nav-btn__bars i:nth-child(1) { transform: translateY(0) rotate(45deg) scaleX(1); }
.site-nav-btn[aria-expanded='true'] .site-nav-btn__bars i:nth-child(2) { transform: translateX(-150%) rotate(0.001deg); opacity: 0; }
.site-nav-btn[aria-expanded='true'] .site-nav-btn__bars i:nth-child(3) { transform: translateY(0) rotate(-45deg) scaleX(1); }
.site-nav-btn[aria-expanded='true']:hover .site-nav-btn__bars i:nth-child(1) { transform: translateY(0) rotate(45deg) scaleX(0.7); }
.site-nav-btn[aria-expanded='true']:hover .site-nav-btn__bars i:nth-child(3) { transform: translateY(0) rotate(-45deg) scaleX(0.7); }
.site-nav-btn .site-nav-sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* Panel */
.site-nav { position: fixed; inset: 0; z-index: 1000; display: grid; grid-template: 'word word' auto '. .' 1fr 'list contact' auto / 1fr auto; gap: 0 24px; box-sizing: border-box; padding: var(--sn-m); background: var(--sn-bg); color: var(--sn-fg); font-family: var(--sn-sans); -webkit-font-smoothing: antialiased; clip-path: polygon(0% 0%, 100% 0%, 100% 0%, 0% 0%); transition: clip-path 1s cubic-bezier(0.9, 0, 0.1, 1); }
.site-nav[data-navigation-status='active'] { clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 0% 100%); }
.site-nav a { color: inherit; text-decoration: none; }
.site-nav__wordmark { grid-area: word; justify-self: start; font-size: clamp(44px, 4.5vw, 64px); font-weight: 600; line-height: 1; letter-spacing: -0.055em; }

/* Links: original menu size and rhythm (1.02 line height). Each row is 0.14em taller than the
   rhythm so descenders aren't clipped, and the negative margin takes it back out. */
.site-nav__list { grid-area: list; display: flex; flex-direction: column; align-items: flex-start; margin: 0; padding: 0; list-style: none; font-family: var(--sn-serif); font-weight: 300; font-size: clamp(56px, 5.6vw, 80px); letter-spacing: -0.05em; }
.site-nav__list li { position: relative; display: flex; margin: 0 0 -0.14em; padding: 0; overflow: hidden; transition: opacity 0.5s var(--sn-ease); }
.site-nav__list li:last-child { margin-bottom: 0; }
.site-nav__list:has(li:hover) li { opacity: 0.35; }
.site-nav__list:has(li:hover) li:hover { opacity: 1; }
.site-nav__link { display: block; transform: translateY(100%) rotate(5deg); transform-origin: left bottom; transition: transform 0.75s var(--sn-ease); }
.site-nav__link.is-current { font-style: italic; }
.site-nav__text { display: block; padding: 0 0.04em 0.14em 0; line-height: 1.02; text-shadow: 0 1.16em 0 currentColor; transform: translateY(0) rotate(0.001deg); transition: transform 0.5s var(--sn-ease); }
.site-nav__link:is(:hover, :focus-visible) .site-nav__text { transform: translateY(-100%) rotate(0.001deg); }
.site-nav__list li:nth-child(1) .site-nav__link { transition-delay: 0.2s; }
.site-nav__list li:nth-child(2) .site-nav__link { transition-delay: 0.15s; }
.site-nav__list li:nth-child(3) .site-nav__link { transition-delay: 0.1s; }
.site-nav__list li:nth-child(4) .site-nav__link { transition-delay: 0.05s; }
.site-nav__list li:nth-child(5) .site-nav__link { transition-delay: 0s; }
.site-nav[data-navigation-status='active'] .site-nav__link { transform: translateY(0) rotate(0.001deg); }
.site-nav[data-navigation-status='active'] li:nth-child(1) .site-nav__link { transition-delay: 0.3s; }
.site-nav[data-navigation-status='active'] li:nth-child(2) .site-nav__link { transition-delay: 0.35s; }
.site-nav[data-navigation-status='active'] li:nth-child(3) .site-nav__link { transition-delay: 0.4s; }
.site-nav[data-navigation-status='active'] li:nth-child(4) .site-nav__link { transition-delay: 0.45s; }
.site-nav[data-navigation-status='active'] li:nth-child(5) .site-nav__link { transition-delay: 0.5s; }

.site-nav__contact { grid-area: contact; align-self: end; display: flex; flex-direction: column; align-items: flex-end; gap: 6px; margin: 0; padding-bottom: 0.4em; font-size: 16px; font-weight: 500; color: rgba(255, 255, 255, 0.6); }
.site-nav__contact a { transition: color 0.3s; }
.site-nav__contact a:hover { color: var(--sn-fg); }

html.site-nav-open, html.site-nav-open body { overflow: hidden; }

@media (max-width: 767px) {
    .site-nav-btn, .site-nav { --sn-m: 20px; }
    .site-nav-btn { top: 22px; right: 20px; }
    .site-nav { grid-template: 'word' auto 'contact' auto '.' 1fr 'list' auto / 1fr; }
    .site-nav__contact { align-self: start; align-items: flex-start; margin-top: 20px; padding-bottom: 0; }
}

/* Clearances for pages with their own top bars */
.project-page .site-nav-btn { top: 20px; right: 40px; }                 /* centred in the 80px case-study header */
body:has(.ref-nav) .site-nav-btn { top: 10px; }                          /* centred in the 60px essay bar */
body:has(.site-nav-btn) .ref-nav { padding-right: 92px; }
body:has(.site-nav-btn) .essay-topbar { padding-right: 96px; }
body:has(.essay-topbar) .site-nav-btn { top: 25px; }                    /* level with the essay bar's links */
@media (max-width: 992px) { .project-page .site-nav-btn { right: 24px; } }
@media (max-width: 600px) { .project-page .site-nav-btn { top: 12px; right: 16px; } } /* 64px header */
@media (max-width: 767px) {
    body:has(.site-nav-btn) .ref-nav { padding-right: 76px; }
    body:has(.site-nav-btn) .essay-topbar { padding-right: 76px; }
    body:has(.essay-topbar) .site-nav-btn { top: 22px; }
}

@media (prefers-reduced-motion: reduce) {
    .site-nav, .site-nav__link, .site-nav__text, .site-nav-btn__bars i { transition-duration: 0.01s !important; transition-delay: 0s !important; }
}

/* CB logo mark: replaces the "Carl Brunson" text wordmark in the nav, hero and loader. Sized off the parent's font-size. */
.cb-logo { display: block; height: 0.85em; width: auto; }