:root { --paper-2: #fcfcfc; --glass: rgba(6, 6, 9, 0.7); --glass-line: rgba(247, 247, 247, 0.08); --font-sans: "Geist", "Helvetica Neue", Helvetica, Arial, sans-serif; }
/* Shared Theory8 chrome: the homepage menu, a slice of jellyfish behind the title, and one ending on every page */
/* Osmo Scaling Hamburger Navigation */
.navigation {
  z-index: 500;
  pointer-events: none;
  position: fixed;
  inset: 0;
}

.navigation__dark-bg {
  transition: all 0.7s cubic-bezier(0.5, 0.5, 0, 1);
  opacity: 0;
  pointer-events: auto;
  visibility: hidden;
  background-color: #000;
  position: absolute;
  inset: 0;
}

[data-navigation-status="active"] .navigation__dark-bg {
  opacity: 0.33;
  visibility: visible;
}

.hamburger-nav {
  border-radius: 1.5em;
  position: absolute;
  top: 2em;
  right: 2em;
}

.hamburger-nav__bg {
  transition: all 0.7s cubic-bezier(0.5, 0.5, 0, 1);
  background-color: #e2e1df;
  border-radius: 1.75em;
  width: 3.5em;
  height: 3.5em;
  position: absolute;
  top: 0;
  right: 0;
}

[data-navigation-status="active"] .hamburger-nav__bg {
  width: 100%;
  height: 100%;
}

.hamburger-nav__group {
  transition: all 0.5s cubic-bezier(0.5, 0.5, 0, 1), transform 0.7s cubic-bezier(0.5, 0.5, 0, 1);
  grid-column-gap: 1em;
  grid-row-gap: 1em;
  pointer-events: auto;
  transform-origin: 100% 0;
  flex-flow: column;
  padding: 2.25em 2.5em 2em 2em;
  display: flex;
  position: relative;
  transform: scale(0.15) rotate(0.001deg);
  opacity: 0;
  visibility: hidden;
}

[data-navigation-status="active"] .hamburger-nav__group {
  transform: scale(1) rotate(0.001deg);
  opacity: 1;
  visibility: visible;
}

.hamburger-nav__menu-p {
  opacity: .5;
  letter-spacing: .1em;
  text-transform: uppercase;
  margin-top: 0;
  margin-bottom: 0;
  font-family: var(--font-mono); /* ⚠️DEVIATION-1: Theory8 mono in place of RM Mono */
  font-size: 1em;
  font-weight: 400;
}

.hamburger-nav__ul {
  grid-column-gap: .375em;
  grid-row-gap: .375em;
  flex-flow: column;
  margin-top: 0;
  margin-bottom: 0;
  padding: 0;
  display: flex;
  position: relative;
}

.hamburger-nav__li {
  margin: 0;
  padding: 0;
  list-style: none;
}

.hamburger-nav__a {
  color: #131313;
  justify-content: space-between;
  align-items: center;
  text-decoration: none;
  display: flex;
}

.hamburger-nav__a[aria-current] .hamburger-nav__p {
  opacity: 0.33;
}

.hamburger-nav__p {
  white-space: nowrap;
  margin-top: 0;
  margin-bottom: 0;
  padding-right: 1.25em;
  font-size: 2em;
}

.hamburger-nav__dot {
  transition: all 0.7s cubic-bezier(0.5, 0.5, 0, 1);
  background-color: currentColor;
  border-radius: 50%;
  flex-shrink: 0;
  width: .5em;
  height: .5em;
  transform: scale(0) rotate(0.001deg);
  opacity: 0.5;
}

.hamburger-nav__a[aria-current] .hamburger-nav__dot {
  transform: scale(1) rotate(0.001deg);
  opacity: 1;
}

.hamburger-nav:has(.hamburger-nav__a:hover) .hamburger-nav__dot {
  transform: scale(0) rotate(0.001deg);
}

.hamburger-nav .hamburger-nav__a:hover .hamburger-nav__dot {
  transform: scale(1) rotate(0.001deg);
  opacity: 0.25;
}

.hamburger-nav__toggle {
  transition: transform 0.7s cubic-bezier(0.5, 0.5, 0, 1);
  pointer-events: auto;
  cursor: pointer;
  border-radius: 50%;
  justify-content: center;
  align-items: center;
  width: 3.5em;
  height: 3.5em;
  display: flex;
  position: absolute;
  top: 0;
  right: 0;
  transform: translate(0em, 0em) rotate(0.001deg);
}

[data-navigation-status="active"] .hamburger-nav__toggle {
  transform: translate(-1em, 1em) rotate(0.001deg);
}

.hamburger-nav__toggle-bar {
  transition: transform 0.7s cubic-bezier(0.5, 0.5, 0, 1);
  background-color: #131313;
  width: 40%;
  height: .125em;
  position: absolute;
  transform: translateY(-0.15em) rotate(0.001deg);
}

.hamburger-nav__toggle:hover .hamburger-nav__toggle-bar {
  transform: translateY(0.15em) rotate(0.001deg);
}

[data-navigation-status="active"] .hamburger-nav__toggle .hamburger-nav__toggle-bar {
  transform: translateY(0em) rotate(45deg);
}

.hamburger-nav__toggle .hamburger-nav__toggle-bar:nth-child(2) {
  transition: transform 0.7s cubic-bezier(0.5, 0.5, 0, 1);
  transform: translateY(0.15em) rotate(0.001deg);
}

.hamburger-nav__toggle:hover .hamburger-nav__toggle-bar:nth-child(2) {
  transform: translateY(-0.15em) rotate(0.001deg);
}

[data-navigation-status="active"] .hamburger-nav__toggle .hamburger-nav__toggle-bar:nth-child(2) {
  transform: translateY(0em) rotate(-45deg);
}

.hamburger-nav__li[hidden] { display: none; }
.hamburger-nav__toggle:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }


/* Theory8 menu: opens from the top left */
.hamburger-nav { top: 27px; right: auto; left: 16px; border-radius: 2px; }
.hamburger-nav__bg { right: auto; left: 0; background-color: var(--glass); border: 1px solid transparent; border-radius: 2px; width: 66px; height: 66px; backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); }
[data-navigation-status="active"] .hamburger-nav__bg { border-radius: 2px; border-color: var(--glass-line); }
.hamburger-nav__group { width: 272px; height: min(602px, calc(100vh - 54px)); overflow-y: auto; padding: 24px 16px; gap: 8px; transform-origin: 0 0; }
.hamburger-nav__menu-p { opacity: 1; letter-spacing: -0.03em; font-size: 12px; font-weight: 300; line-height: 0.9; color: #fff; padding-bottom: 12px; border-bottom: 0.5px solid #fff; }
.hamburger-nav__ul { gap: 8px; width: 100%; }
/* Menu from Figma 133:13699: main links, a rule, the small pages, a rule, socials, then the email button */
.hamburger-nav__rule { width: 100%; margin: 0; border: 0; border-top: 1px solid rgba(255, 255, 255, 0.3); }
.hamburger-nav__sub { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; width: 100%; }
.hamburger-nav .hamburger-nav__a--sm { padding: 4px 8px 4px 0; }
.hamburger-nav__a--sm .hamburger-nav__p { font-size: 12px; padding-right: 0; }
.hamburger-nav .hamburger-nav__social .hamburger-nav__a--sm { gap: 8px; padding-top: 0; padding-bottom: 0; }
.hamburger-nav__social img { flex: none; width: 16px; height: 16px; opacity: 0.85; transition: opacity 0.3s var(--ease-out); }
.hamburger-nav__social a:hover img { opacity: 1; }
/* Menu links: on hover each letter rolls up and an aqua copy rolls in under it, one letter after another */
.roll { display: inline-block; overflow: hidden; vertical-align: top; padding-block: 0.12em; margin-block: -0.12em; }
.roll__c { display: inline-block; white-space: pre; text-shadow: 0 1.3em 0 var(--accent); transition: transform 0.55s cubic-bezier(0.65, 0, 0.35, 1); transition-delay: calc(var(--i) * 18ms); }
.hamburger-nav__a:hover .roll__c, .hamburger-nav__a:focus-visible .roll__c { transform: translateY(-1.3em); }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
@media (prefers-reduced-motion: reduce) { .roll__c { transition: none; } .hamburger-nav__a:hover .roll__c, .hamburger-nav__a:focus-visible .roll__c { transform: none; color: var(--accent); } }
.hamburger-nav__email { margin-top: auto; width: 100%; height: 24.75px; display: grid; place-items: center; background: var(--paper-2); color: #0b080a; font-family: var(--font-mono); font-weight: 400; font-size: 10.5px; line-height: 0.9; text-transform: uppercase; text-decoration: none; transition: background 0.3s var(--ease-out); }
.hamburger-nav__email:hover { background: var(--accent); }
.hamburger-nav__a { color: var(--paper); padding: 8px 8px 8px 0; }
.hamburger-nav__p { font-family: var(--font-mono); font-weight: 300; font-size: 14px; line-height: 1; text-transform: uppercase; padding-right: 16px; }
.hamburger-nav__a[aria-current] .hamburger-nav__p { opacity: 1; }
.hamburger-nav__dot { width: 6px; height: 6px; background-color: var(--accent); }
.hamburger-nav__contact { margin-top: auto; display: flex; flex-direction: column; align-items: center; text-decoration: none; }
.hamburger-nav__crest { width: 27px; padding: 2px; border-radius: 3px 3px 0 0; background: rgba(255, 255, 255, 0.9); }
.hamburger-nav__crest img { width: 21px; height: 22px; object-fit: contain; margin: 0 auto; }
.hamburger-nav__contact-btn { width: 100%; height: 25px; display: grid; place-items: center; background: var(--paper-2); color: #0b080a; font-family: var(--font-mono); font-size: 10.5px; line-height: 0.9; text-transform: uppercase; transition: background 0.3s var(--ease-out); }
.hamburger-nav__contact:hover .hamburger-nav__contact-btn { background: #e8e8e8; }
.hamburger-nav__toggle { right: auto; left: 0; width: 66px; height: 66px; }
/* Square menu button, matching the square corners of the open menu */
.hamburger-nav__toggle { border-radius: 2px; }
[data-navigation-status="active"] .hamburger-nav__toggle { transform: translate(215px, -3px) rotate(0.001deg); }
.hamburger-nav__icon { position: absolute; inset: 0; width: 66px; height: 66px; transition: opacity 0.3s var(--ease-out); }
[data-navigation-status="active"] .hamburger-nav__icon { opacity: 0; }
.hamburger-nav__toggle-bar { width: 14px; height: 1px; background-color: var(--paper); opacity: 0; transition: transform 0.7s cubic-bezier(0.5, 0.5, 0, 1), opacity 0.3s; }
[data-navigation-status="active"] .hamburger-nav__toggle-bar { opacity: 1; }

/* Osmo Burger Menu Button (Ilja van Eck), sized for the 66px Theory8 circle */
.menu-button { display: flex; flex-flow: column; gap: .1875em; font-size: 10px; pointer-events: none; }
.menu-button-line { display: block; width: 2em; height: .1875em; background-color: var(--paper); transform-origin: center; }
.hamburger-nav__toggle:hover .menu-button-line { background-color: var(--accent); transition: background-color 0.3s var(--ease-out); }
.social__a { position: relative; display: inline-flex; gap: 6px; padding: 6px 0; font-family: var(--font-mono); font-weight: 300; font-size: 10.5px; line-height: 1; text-transform: uppercase; color: var(--paper); text-decoration: none; }
.social__a::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 1px; background: var(--accent); transform: scaleX(0); transform-origin: left; transition: transform 0.5s var(--ease-out); }
.social__a:hover::after, .social__a:focus-visible::after { transform: scaleX(1); }
.social__arrow { color: var(--accent); }
.hamburger-nav__toggle .menu-button-line { transition: transform 0.45s cubic-bezier(0.5, 0.05, 0.05, 0.99), opacity 0.3s; }
[data-navigation-status="active"] .menu-button-line:nth-child(1) { transform: translateY(0.375em) rotate(-135deg); }
[data-navigation-status="active"] .menu-button-line:nth-child(2) { opacity: 0; transform: scaleX(0); }
[data-navigation-status="active"] .menu-button-line:nth-child(3) { transform: translateY(-0.375em) rotate(135deg); }

/* Big titles match the homepage headlines */
.head h1, .work__title, .intro h1 { font-family: var(--font-sans); font-weight: 400; letter-spacing: -0.03em; color: var(--paper-2); }

/* The old text bar becomes a quiet Theory8 link top right, clear of the menu button */
.top { justify-content: flex-end; padding-left: 96px; }
.top__pages { display: none !important; }
body[data-backdrop="off"] .top { justify-content: space-between; }

/* A slice of the jellyfish behind the title, fading to black */
.t8-backdrop { position: absolute; inset: 0 0 auto; height: min(86vh, 820px); z-index: -1; overflow: hidden; pointer-events: none; -webkit-mask-image: linear-gradient(to bottom, #000 0%, rgba(0,0,0,0.55) 45%, transparent 100%); mask-image: linear-gradient(to bottom, #000 0%, rgba(0,0,0,0.55) 45%, transparent 100%); }
.t8-backdrop video, .t8-backdrop img { width: 100%; height: 100%; object-fit: cover; opacity: 0.42; }
body { position: relative; isolation: isolate; }

/* One ending on every page: social links and Say hello */
.t8-end { width: min(980px, 100%); margin: 0 auto; padding: 0 16px 64px; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 24px; }
@media (min-width: 760px) { .t8-end { padding: 0 48px 80px; } }
.t8-end__soc { display: flex; flex-wrap: wrap; gap: 8px 24px; }
.t8-end__hello { display: inline-flex; align-items: center; height: 32px; padding: 0 14px; border: 1px solid transparent; border-radius: 2px; background: var(--paper-2); color: #0b080a; font-family: var(--font-mono); font-weight: 400; font-size: 11px; line-height: 1; text-transform: uppercase; text-decoration: none; transition: background 0.3s var(--ease-out), color 0.3s var(--ease-out), border-color 0.3s var(--ease-out); }
.t8-end__hello:hover { background: var(--ink); color: #fcfcfc; border-color: rgba(247, 247, 247, 0.35); }
.foot { display: none !important; }
.work__head { padding-top: 64px; }